status-im/snt-voting
2
0
Fork 0
mirror of https://github.com/status-im/snt-voting.git synced 2025-02-23 15:48:10 +00:00
Code Issues Projects Releases Wiki Activity

Adding styling to additional sections

Browse Source
This commit is contained in:
Richard Ramos 2018-10-18 20:01:49 -04:00
parent c4148e42fe
commit 1c0c4b8753
7 changed files with 138 additions and 42 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

5
app/components/flow/ConnectYourWallet.js
View File

@ -12,7 +12,7 @@ class ConnectYourWallet extends Component {
// TODO:
//web3.currentProvider.isStatus = true;
web3.currentProvider.isStatus = true;
const poll = polls[0];
const idPoll = 0;
@ -20,6 +20,9 @@ class ConnectYourWallet extends Component {
const tknVotes = await PollManager.methods.getVote(idPoll, web3.eth.defaultAccount).call();
const votes = tknVotes.map(x => Math.sqrt(parseInt(web3.utils.fromWei(x, "ether"))));
if(window.ethereum)
await ethereum.enable();
if(web3.currentProvider.isStatus){
const tokenBalance = await SNT.methods.balanceOfAt(web3.eth.defaultAccount, poll._startBlock).call();
const ethBalance = await web3.eth.getBalance(web3.eth.defaultAccount);

51
app/components/flow/HowVotingWorks.js
View File

@ -9,32 +9,47 @@ const HowVotingWorks = (props) => <Fragment><div className="section">
<Typography variant="headline">How voting works</Typography>
<Card className="card">
<CardContent>
<Typography gutterBottom component="h2">
Any wallet with SNT can vote
</Typography>
<Typography component="p">
When a poll is created a snapshot is taken of every wallet that holds Status Network Tokens (SNT).
</Typography>
<div className="left">
<span><img src="images/wallet.svg" width="23" /></span>
</div>
<div>
<Typography gutterBottom component="h2">
Any wallet with SNT can vote
</Typography>
<Typography component="p">
When a poll is created a snapshot is taken of every wallet that holds Status Network Tokens (SNT).
</Typography>
</div>
</CardContent>
</Card>
<Card className="card">
<CardContent>
<Typography gutterBottom component="h2">
You don't spend your SNT!
</Typography>
<Typography component="p">
Your wallet gets one voting credit for every SNT it holds. To cast your vote, you sign a transaction, but you only spend a small amount of ETH for the transaction fee.
</Typography>
<div className="left">
<span><img src="images/happy-face.svg" width="23" /></span>
</div>
<div>
<Typography gutterBottom component="h2">
You don't spend your SNT!
</Typography>
<Typography component="p">
Your wallet gets one voting credit for every SNT it holds. To cast your vote, you sign a transaction, but you only spend a small amount of ETH for the transaction fee.
</Typography>
</div>
</CardContent>
</Card>
<Card className="card">
<CardContent>
<Typography gutterBottom component="h2">
Your vote counts
</Typography>
<Typography component="p">
Most votes when poll ends wins! Multiple votes cost more to prevent whales from controlling the vote
</Typography>
<div className="left">
<span><img src="images/envelope.svg" width="23" /></span>
</div>
<div>
<Typography gutterBottom component="h2">
Your vote counts
</Typography>
<Typography component="p">
Most votes when poll ends wins! Multiple votes cost more to prevent whales from controlling the vote
</Typography>
</div>
</CardContent>
</Card>
</div>

6
app/components/flow/PollVoting.js
View File

@ -119,16 +119,20 @@ class PollVoting extends Component {
maxValuesForBallots[i] = Math.floor(Math.sqrt(balance - votedSNT + votes[i]*votes[i]));
}
return <div className="section">
return <Fragment>
<div className="section">
<Typography variant="headline">{title}</Typography>
{ votes.map((v, i) => {
const item = ballots[i];
return <BallotSlider key={i} title={item.title} subtitle={item.subtitle} symbol={symbol} classes={classes} votes={v} cantVote={cantVote} balance={balance} maxVotes={maxVotes} maxVotesAvailable={maxValuesForBallots[i]} updateVotes={this.updateVotes(i)} />
})}
</div>
<div className="buttonNav">
<Typography>{availableCredits} Credits left</Typography>
<Button disabled={disableVote} variant="text" onClick={this.sendToReview}>Review vote</Button>
</div>
</Fragment>
}
}

44
app/components/flow/VotingCredits.js
View File

@ -28,48 +28,48 @@ class VotingCredits extends Component {
return (polls ? <Fragment><div className="section">
<Typography variant="headline">{title}</Typography>
<Typography variant="body1" component="div" dangerouslySetInnerHTML={{__html: description}}></Typography>
<Card className="card">
<Card className="card credits">
<CardContent>
<Typography component="p">
Voting Credits {tokenBalance}
<Typography component="div">
<span className="title">Voting Credits</span>
<span className="value">{tokenBalance}</span>
</Typography>
{ tokenBalance > 0 &&
<Typography component="p">
<Typography component="p" className="text">
You get one credit for each SNT held in your wallet <b>at the time of poll was created</b>. They are usable only in this poll.
</Typography> }
{ tokenBalance == 0 &&
<div>
<Typography component="h2">
<div className="warning">
<Typography component="h2" >
No SNT in your wallet
</Typography>
<Typography component="p">
To vote, you need to connect with a wallet that holds SNT tokens.
</Typography>
<Typography component="p">
<Link to="/otherWallets">Connect with another wallet</Link>
</Typography>
</div>
}
</CardContent>
</Card>
{ ethBalance == 0 && <Card className="card">
{ ethBalance == 0 && <Card className="card credits">
<CardContent>
<Typography component="p">
ETH {ethBalance}
</Typography>
<Typography component="h2">
Not enough ETH in your wallet
</Typography>
<Typography component="p">
You will sign a transaction to confirm your vote. No tokens are sent, but you need ETH to pay for gas (Ethereum network fee).
<Typography component="div">
<span className="title">ETH</span>
<span className="value">{ethBalance}</span>
</Typography>
<div className="warning">
<Typography component="h2">
Not enough ETH in your wallet
</Typography>
<Typography component="p">
You will sign a transaction to confirm your vote. No tokens are sent, but you need ETH to pay for gas (Ethereum network fee).
</Typography>
</div>
</CardContent>
</Card> }
</div>
<div className="buttonNav">
{ ethBalance == 0 || tokenBalance == 0 && <Link to="/wallet"><Button variant="text">Back</Button></Link> }
{ ethBalance > 0 && tokenBalance > 0 && <Link to="/voting"><Button variant="text">Vote</Button></Link> }
<div className={(ethBalance == 0 || tokenBalance == 0) ? 'buttonNav back' : 'buttonNav'}>
{ (ethBalance == 0 || tokenBalance == 0) && <Link to="/wallet"><Button variant="text">Back</Button></Link> }
{ (ethBalance > 0 && tokenBalance > 0) && <Link to="/voting"><Button variant="text">Vote</Button></Link> }
</div>
</Fragment> : null);
}

66
app/css/styles.css
View File

@ -101,6 +101,40 @@
box-shadow: none;
}
#votingDapp div.credits {
padding: 0;
}
#votingDapp div.credits div {
padding: 0;
}
#votingDapp div.credits div .title {
display: inline-block;
width: 150px;
padding: 15px;
}
#votingDapp div.credits div .value {
font-weight: bold;
text-align: right;
width: 150px;
float: right;
padding: 15px;
}
#votingDapp div.credits .text {
border-top: 1px solid #edf2f5;
padding: 15px;
color: #939BA1;
font-size: .75rem;
}
#votingDapp div.credits .warning {
padding: 15px;
border-top: 1px solid #edf2f5;
}
#votingDapp div.card div.ballotData {
padding-bottom: 0;
}
@ -129,6 +163,10 @@
background: #ffffff;
}
#votingDapp div.buttonNav.back {
text-align: left;
}
#votingDapp div.buttonNav a,
#votingDapp div.buttonNav a:visited {
text-decoration: none;
@ -141,4 +179,32 @@
text-transform: capitalize;
color: #4360DF;
font-size: 0.75rem;
}
#votingDapp div.buttonNav.back button {
background: url(../images/medium-arrow-l.svg) center left no-repeat;
padding-right: 0;
padding-left: 15px;
}
#votingDapp div.left {
width: 60px;
float: left;
height: 75px;
}
#votingDapp div.left span {
background-color: #ECEFFC;
width:44px;
height:44px;
display:table-cell;
vertical-align:middle;
text-align:center;
border-radius:50%;
overflow:hidden;
}
#votingDapp div.warning h2 {
background: url(../images/warning.svg) no-repeat center left;
padding-left: 25px;
}

3
app/images/medium-arrow-l.svg Normal file
View File

@ -0,0 +1,3 @@
<svg width="9" height="16" viewBox="0 0 9 16" fill="none" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd" d="M0.00687048 7.89841C0.027045 7.67387 0.122799 7.45524 0.292809 7.28566L7.30422 0.292065C7.6926 -0.0953277 8.3188 -0.0987967 8.70893 0.290334C9.09635 0.676771 9.0907 1.30894 8.70719 1.69148L2.38119 8.00141L8.70719 14.3114C9.09557 14.6987 9.09905 15.3234 8.70893 15.7125C8.32151 16.0989 7.68773 16.0933 7.30422 15.7108L0.292809 8.71716C0.0681878 8.49311 -0.0276859 8.18971 0.00687048 7.89841Z" fill="#4360DF"/>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 559 B

5
app/images/warning.svg Normal file
View File

@ -0,0 +1,5 @@
<svg width="18" height="18" viewBox="0 0 18 18" fill="none" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd" d="M8.991 0C13.968 0 18 4.032 18 9C18 13.968 13.968 18 8.991 18C4.023 18 0 13.968 0 9C0 4.032 4.023 0 8.991 0ZM9.00005 16.2C12.978 16.2 16.2 12.978 16.2 9.00005C16.2 5.02205 12.978 1.80005 9.00005 1.80005C5.02205 1.80005 1.80005 5.02205 1.80005 9.00005C1.80005 12.978 5.02205 16.2 9.00005 16.2Z" fill="#FF2D55"/>
<rect x="8.5" y="4.5" width="1" height="6" rx="0.5" fill="#FF2D55" stroke="#FF2D55"/>
<rect x="8.5" y="12.5" width="1" height="1" rx="0.5" fill="#FF2D55" stroke="#FF2D55"/>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 635 B