Adding voting review content and loading existing votes for a poll

app/components/Voting.js

@@ -24,10 +24,10 @@ class Voting extends PureComponent {
     votes: []
   };
 
-  updatePollBalance = (pollId, tokenBalance, ethBalance) => {
+  updatePollBalance = (pollId, tokenBalance, ethBalance, votes) => {
     const {pollTokenBalances} = this.state;
     pollTokenBalances[pollId] = { tokenBalance, ethBalance };
-    this.setState({pollTokenBalances});
+    this.setState({pollTokenBalances, votes});
   }
 
   setVotesToReview = (votes) => {
@@ -57,7 +57,7 @@ class Voting extends PureComponent {
                 <Route path="/otherWallets" render={OtherWallets} />
                 <Route path="/votingCredits" render={() => <VotingCredits polls={rawPolls} balances={pollTokenBalances} />} />
                 <Route path="/voting" render={() => <PollVoting polls={rawPolls} balances={pollTokenBalances} originalVotes={votes} setVotesToReview={this.setVotesToReview} />} />
-                <Route path="/review" render={() => <ReviewVotes polls={rawPolls} votes={votes} />} />
+                <Route path="/review" render={() => <ReviewVotes polls={rawPolls} votes={votes} balances={pollTokenBalances} />} />
               </Switch>
             </div>
           </div>

app/components/flow/ConnectYourWallet.js

@@ -4,15 +4,26 @@ import React, {Component} from 'react';
 import Typography from '@material-ui/core/Typography'
 import SNT from  'Embark/contracts/SNT';
 import { withRouter } from 'react-router-dom'
+import PollManager from 'Embark/contracts/PollManager';
 
 class ConnectYourWallet extends Component {
   connectWallet = async () => {
     const {history, polls, updateBalances} = this.props;
 
+
+    // TODO:
+    //web3.currentProvider.isStatus = true;
+
+    const poll = polls[0];
+    const idPoll = 0;
+
+    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(web3.currentProvider.isStatus){
-      const tokenBalance = await SNT.methods.balanceOfAt(web3.eth.defaultAccount, polls[0]._startBlock).call();
+      const tokenBalance = await SNT.methods.balanceOfAt(web3.eth.defaultAccount, poll._startBlock).call();
       const ethBalance = await web3.eth.getBalance(web3.eth.defaultAccount);
-      updateBalances(0, tokenBalance, ethBalance);
+      updateBalances(0, tokenBalance, ethBalance, votes);
       history.push('/votingCredits');
     } else {
       window.location.href = "https://get.status.im/browse/" + location.href.replace(/^http(s?):\/\//, '');

app/components/flow/ReviewVotes.js

@@ -2,20 +2,76 @@ import {Link} from "react-router-dom";
 import Button from '@material-ui/core/Button';
 import React, {Component} from 'react';
 import Typography from '@material-ui/core/Typography'
-
+import Card from '@material-ui/core/Card';
+import CardContent from '@material-ui/core/CardContent';
+import PollManager from 'Embark/contracts/PollManager';
+import { withRouter } from 'react-router-dom'
 class ReviewVotes extends Component {
 
-  render(){
-    const {polls} = this.props;
-    
-    return (polls ? <div>
-      <div className="section">
-        <Typography variant="headline">Review your vote</Typography>
-      </div>
-      
-      <Link to="/voting"><Button variant="text">Add votes</Button></Link>
+  state = {
+    isSubmitting: false
+  }
 
-        <Link to="/review"><Button variant="text">Review vote</Button></Link>
+  vote = () => {
+    this.setState({isSubmitting: true});
+
+    const { vote, unvote } = PollManager.methods;
+    const { polls, votes } = this.props;
+    const { toWei } = web3.utils;
+
+    const poll = polls[0];
+    const idPoll = 0; // TODO: 
+
+    const ballots = votes.map(el => parseInt(toWei((el * el).toString(), "ether")));
+    const balance4Voting = ballots.reduce((prev, curr) => prev + curr, 0);
+    const toSend = balance4Voting == 0 ? unvote(idPoll) : vote(idPoll, ballots);
+
+    toSend.estimateGas()
+      .then(gasEstimated => {
+        console.log("voting gas estimated: " + gasEstimated);
+        toSend.send({gas: gasEstimated + 100000});
+
+        alert("Redirect to results page, keep promise somewhere");
+      });
+  }
+
+  render(){
+    const {polls, balances, votes} = this.props;
+    const {isSubmitting} = this.state;
+    const {fromWei} = web3.utils;
+
+    if(!polls || !polls.length){
+      return null;
+    }
+
+    const poll = polls[0];
+    const ballots = poll.content.ballots
+    const balance = fromWei(balances[0].tokenBalance, "ether");
+    const availableCredits = parseInt(balance, 10) - votes.reduce((prev, curr) => prev + curr * curr, 0);
+    
+    return (polls ? <div className="section">
+        <Typography variant="headline">Review your vote</Typography>
+
+        { ballots.map((item, i) => {
+          return <Card className="card" key={i}>
+            <CardContent>
+              <Typography gutterBottom component="h2">{item.title}</Typography>
+              <Typography component="p">{item.subtitle}</Typography>
+              <Typography component="p">{votes[i]} votes</Typography>
+              <Typography component="p">{votes[i] * votes[i]} credits</Typography>
+            </CardContent>
+          </Card>
+        })}
+
+        <Card className="card creditsAvailable">
+          <CardContent>
+              <Typography gutterBottom component="p">Unused voting power</Typography>
+              <Typography gutterBottom component="h2">{availableCredits} credits</Typography>
+              <Link to="/voting"><Button variant="text">Add votes</Button></Link>
+          </CardContent>
+        </Card>
+
+        <Button variant="text" onClick={this.vote} disabled={isSubmitting}>Sign to confirm</Button>
 
 
     </div> : null);