How voting works dialog, #14

app/components/flow/HowVotingWorks.js

@@ -6,10 +6,29 @@ import Typography from '@material-ui/core/Typography';
 import { withRouter } from 'react-router-dom';
 import SNT from  'Embark/contracts/SNT';
 import PollManager from  'Embark/contracts/PollManager';
+import Dialog from '@material-ui/core/Dialog';
+import DialogActions from '@material-ui/core/DialogActions';
+import DialogContent from '@material-ui/core/DialogContent';
+import DialogTitle from '@material-ui/core/DialogTitle';
 
 
 class HowVotingWorks extends Component {
 
+  state = {
+    open: false
+  }
+
+
+  handleClickOpen = () => {
+    this.setState({
+      open: true,
+    });
+  };
+
+  handleClose = value => {
+    this.setState({ open: false });
+  };
+
   checkWeb3 = async () => {
     if(!window.web3){
       this.props.history.push("/wallet/" + this.props.idPoll);
@@ -48,46 +67,54 @@ class HowVotingWorks extends Component {
     const props = this.props;
     return <Fragment><div className="section">
   <Typography variant="headline">How voting works</Typography>
-  <Card className="card">
+  <InfoDialog
+  text={<Fragment>
+    <p>When a vote is created, the Voting Dapp uses smart contracts to take a snapshot of all the wallets addresses which hold SNT and their SNT balances. These SNT balances are used to inform the number of voting credits a wallet address has. No SNT needs to be staked or committed, all that is required is to connect to the voting app with a wallet that had SNT in it before the "snapshot" was taken.</p>
+    <p>Voting credits are a representation of the SNT in the wallet address at the time the vote was created. When voting, the first ballot which is voted on will cost 1 voting credit. The second vote will cost an additional 3 voting credits to total 4 voting credits. Every additional vote will require its square in voting credits.</p>
+    <p>This voting process is called quadratic voting. It minimizes the effect that large token holders can have on the vote, measures the intensity of opinion and encourages a spread of voting amongst the ballots.</p></Fragment>}
+  open={this.state.open}
+  onClose={this.handleClose}
+/>
+  <Card className="card" onClick={this.handleClickOpen}>
     <CardContent>
       <div className="left">
-        <span><img src="images/wallet.svg" width="23" /></span>
+        <span><img src="images/wallet.svg" width="23" onClick={this.handleClickOpen} /></span>
       </div>
       <div className="right">
-        <Typography gutterBottom component="h2">
+        <Typography gutterBottom component="h2" onClick={this.handleClickOpen}>
           Any wallet with SNT can vote
         </Typography>
-        <Typography component="p">
+        <Typography component="p" onClick={this.handleClickOpen}>
           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">
+  <Card className="card" onClick={this.handleClickOpen}>
     <CardContent>
       <div className="left">
-        <span><img src="images/happy-face.svg" width="23" /></span>
+        <span><img src="images/happy-face.svg" width="23" onClick={this.handleClickOpen} /></span>
       </div>
       <div className="right">
-        <Typography gutterBottom component="h2">
+        <Typography gutterBottom component="h2" onClick={this.handleClickOpen}>
           You don't spend your SNT!
         </Typography>
-        <Typography component="p">
+        <Typography component="p" onClick={this.handleClickOpen}>
           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">
+  <Card className="card" onClick={this.handleClickOpen}>
     <CardContent>
       <div className="left">
-        <span><img src="images/envelope.svg" width="23" /></span>
+        <span><img src="images/envelope.svg" width="23" onClick={this.handleClickOpen} /></span>
       </div>
       <div className="right">
-        <Typography gutterBottom component="h2">
+        <Typography gutterBottom component="h2" onClick={this.handleClickOpen}>
         Your vote counts
         </Typography>
-        <Typography component="p">
+        <Typography component="p" onClick={this.handleClickOpen}>
           Most votes when poll ends wins! Multiple votes cost more to prevent whales from controlling the vote
         </Typography>
       </div>
@@ -102,4 +129,33 @@ class HowVotingWorks extends Component {
   }
 }
 
+
+
+class InfoDialog extends Component {
+
+  handleClose = () => {
+    this.props.onClose(this.props.selectedValue);
+  };
+  
+  handleListItemClick = value => {
+    this.props.onClose(value);
+  };
+  
+  render() {
+    const { onClose, text, ...other } = this.props;
+   
+    return (
+    <Dialog onClose={this.handleClose} aria-labelledby="simple-dialog-title" {...other}>
+      <DialogTitle>How voting works</DialogTitle>
+      <DialogContent>
+        <Typography variant="body1" component="div">{text}</Typography>
+      </DialogContent>
+      <DialogActions>
+        <Button onClick={this.handleClose} color="primary" autoFocus>Ok</Button>
+      </DialogActions>
+    </Dialog>
+    );
+  }
+}
+
 export default withRouter(HowVotingWorks);