mirror of
https://github.com/status-im/snt-voting.git
synced 2025-02-23 23:58:13 +00:00
Adding styling to additional sections
This commit is contained in:
Richard Ramos
parent
c4148e42fe
commit
1c0c4b8753
@ -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);
|
||||
|
||||
@ -9,32 +9,47 @@ const HowVotingWorks = (props) => <Fragment><div className="section">
|
||||
<Typography variant="headline">How voting works</Typography>
|
||||
<Card className="card">
|
||||
<CardContent>
|
||||
<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>
|
||||
<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>
|
||||
<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>
|
||||
|
||||
@ -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>
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
@ -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>
|
||||
<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 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);
|
||||
}
|
||||
|
||||
@ -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;
|
||||
@ -142,3 +180,31 @@
|
||||
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
3
app/images/medium-arrow-l.svg
Normal 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>
|
||||
|
After Width: | Height: | Size: 559 B |
5
app/images/warning.svg
Normal file
5
app/images/warning.svg
Normal 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>
|
||||
|
After Width: | Height: | Size: 635 B |
Loading…
x
Reference in New Issue
Block a user