snt-voting/app/components/flow/HowVotingWorks.js

61 lines
2.0 KiB
JavaScript
Raw Normal View History

2018-10-16 16:20:54 -04:00
import {Link} from "react-router-dom";
import Button from '@material-ui/core/Button';
2018-10-18 16:10:48 -04:00
import React, {Fragment} from 'react';
2018-10-16 16:20:54 -04:00
import Card from '@material-ui/core/Card';
import CardContent from '@material-ui/core/CardContent';
import Typography from '@material-ui/core/Typography';
2018-10-18 16:10:48 -04:00
const HowVotingWorks = (props) => <Fragment><div className="section">
2018-10-16 16:20:54 -04:00
<Typography variant="headline">How voting works</Typography>
<Card className="card">
2018-10-16 16:20:54 -04:00
<CardContent>
2018-10-18 20:01:49 -04:00
<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>
2018-10-16 16:20:54 -04:00
</CardContent>
</Card>
<Card className="card">
2018-10-16 16:20:54 -04:00
<CardContent>
2018-10-18 20:01:49 -04:00
<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>
2018-10-16 16:20:54 -04:00
</CardContent>
</Card>
<Card className="card">
2018-10-16 16:20:54 -04:00
<CardContent>
2018-10-18 20:01:49 -04:00
<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>
2018-10-16 16:20:54 -04:00
</CardContent>
</Card>
2018-10-18 16:10:48 -04:00
</div>
<div className="buttonNav">
<Link to={"/wallet/" + props.idPoll}><Button>Connect with your wallet</Button></Link>
2018-10-18 16:10:48 -04:00
</div>
</Fragment>;
2018-10-16 16:20:54 -04:00
export default HowVotingWorks;