SecureVote Light - Vue Components

Vue.js UI components used for SecureVote light

This this library of components has been designed to allow components created by SecureVote to be reused easily and extensibly across projects.

Usage

import {BallotTile} from 'sv-vue'

components: {
	BallotTile
}

The library exports a number of vue components that can be imported into Vue.js projects.

Components

NOTE - This library is in progress and more components are still being added

BallotTile

<ballot-tile :ballot="globalBallotObject" :showPointer="true" @ballotTileClicked="handleClickEvent()" />

import {BallotTile} from 'sv-vue'

Props

• ballot - Object, passed in the format of a global ballot object, specified in the core concepts below. The component is used for displaying the ballot information it is passed only.
• showPointer - Boolean, used to specify if the hover state should be present or not.

Events

• ballotTileClicked - Occurs when the component is clicked and passes it's own ballot object back in the event. This can be used for routing, or whatever else is needed.

Component Styling

Styling on the components has been kept as minimal as possible. Where customisation is required, this should take place in a parent component.

Key concepts - Ballots

Ballots are one of the key data structures used within SV Light, there are two main formats that they are used within applications using SV Light.

The ballot spec

The ballot spec is standardised across ballot versions. We are currently on ballot version 2 which has the following specifications:

• ballotVersion Number, specifying the ballot spec version
• ballotInner Object, containing all the relevant content: - ballotTitle String, self explanatory - shortDesc String, a shorter version of the description - longDesc String, a longer version of the description. In the future we may aim to support markdown here. - subGroup String, this is currently unused on the tokenvote platform, but is being used to create categories for the Swarm Fund liquid democracy voting module. Can be null - discussionLink String, url for where the proposal can be discussed. Can be null if there is no link. - encryptionPK String, public key required for ballot encryption. Can be null for unencrypted ballots
• optionsVersion Number, specifies the type of ballot (1: Ranged ballot, 2: Binary ballot, 3: Petition)
• optionsInner Object, containing - options Object (or null). This is where ranged vote options are specified. Should be null in the case of a binary vote or petition. - aux Object (or null) currently unused but included for future extensibility.

Note - All fields are required, even if they are not being used. If this is the case, then the value should be set to null

Example ballot spec:

{
	"ballotVersion": 2,
	"ballotInner": {
		"ballotTitle": "Create a calculator for asset germination events",
		"shortDesc": "It would be handy for users to see the expected return on their investments instantly in an easy to use calculator which shows them their profits or dividends from the investment. This may inspire more investment and accelerate renewable energy adoption.",
		"longDesc": "It would be handy for users to see the expected return on their investments instantly in an easy to use calculator which shows them their profits or dividends from the investment. This may inspire more investment and accelerate renewable energy adoption.",
		"subgroup": null,
		"discussionLink": null,
		"encryptionPK": null
	},
	"optionsVersion": 3,
	"optionsInner": {
		"options": null,
		"aux": null
	}
},

The 'global' ballot object

In addition to the ballot spec, there are some additional values that are required to interact with ballots. The ballot spec is included as an object in the global ballot object.

The global ballot object includes the following:

• index Number, the index of the ballot within the democracy
• error Boolean, flag to specify if there has been an error loading the ballot, or with the ballot contents itself.
• bbFarmAddress String, Ethereum address of the ballot box farm where votes on this particular ballot are stored and where results will be pulled from.
• ballotId String, the ID of the ballot which can be used as a unique identifier,
• startTime Number, the starting time of the ballot. This is stored in the Index smart contract.
• endTime Number, the ending time of the ballot. Note: both of these are recorded as seconds, so multiply by 1000 to the milliseconds when creating javascript date object.
• ballotSpec Object, the ballot spec outlined in the section above
• nVotesCast Number, the number of votes cast
• submissionBits Number, a number used to identify configuration of the ballot. TODO - Go into more detail here or link to the appropriate section.

{
	"index": 0,
	"error": false,
	"bbFarmAddress": "0xB105035C563Ed14C17f6BeaCe07F4659C823322a",
	"ballotId": "42364633109615598255588040701757143132188425043626538479181752808160",
	"specHash": "0xae9ca2179246b7e880949f67f78c9508375d849540229e977bb244ebdbb9b2e0",
	"startTime": 1530254801,
	"endTime": 1531464178,
	"ballotSpec": {
		"ballotVersion": ...,
		"ballotInner": ...,
		"optionsVersion": ...,
		"optionsInner": ...
	},
	"nVotesCast": 1,
	"userHasVoted": false,
	"submissionBits": 5
}