Added external wallet connection screen

app/components/Voting.js

@@ -13,6 +13,7 @@ import LearnAboutBallots from './flow/LearnAboutBallots';
 import HowVotingWorks from './flow/HowVotingWorks';
 import ConnectYourWallet from './flow/ConnectYourWallet';
 import OtherWallets from './flow/OtherWallets';
+import ExternalWallet from './flow/ExternalWallet';
 import VotingCredits from './flow/VotingCredits';
 import PollVoting from './flow/PollVoting';
 import ReviewVotes from './flow/ReviewVotes';
@@ -62,6 +63,7 @@ class Voting extends PureComponent {
                 <Route path="/votingHelp/:id" render={props => <HowVotingWorks idPoll={props.match.params.id} />} />
                 <Route path="/wallet/:id" render={props => <ConnectYourWallet polls={rawPolls} idPoll={props.match.params.id} updateBalances={this.updatePollBalance} />} />
                 <Route path="/otherWallets/:id" render={props => <OtherWallets idPoll={props.match.params.id} />} />
+                <Route path="/externalWallet/:id" render={props => <ExternalWallet polls={rawPolls} idPoll={props.match.params.id} updateBalances={this.updatePollBalance} />} />
                 <Route path="/votingCredits/:id" render={props => <VotingCredits polls={rawPolls} idPoll={props.match.params.id} balances={pollTokenBalances} />} />
                 <Route path="/voting/:id" render={props => <PollVoting polls={rawPolls} idPoll={props.match.params.id} balances={pollTokenBalances} originalVotes={votes} setVotesToReview={this.setVotesToReview} />} />
                 <Route path="/review/:id" render={props => <ReviewVotes polls={rawPolls} idPoll={props.match.params.id} votes={votes} balances={pollTokenBalances} setTransactionPromise={this.setTransactionPromise} />} />

app/components/flow/ExternalWallet.js

@@ -0,0 +1,37 @@
+import React, {Component} from 'react';
+import { withRouter } from 'react-router-dom'
+import SNT from  'Embark/contracts/SNT';
+import PollManager from  'Embark/contracts/PollManager';
+
+class ExternalWallet extends Component {
+    
+    componentDidUpdate(prevProps){
+        if (this.props.polls !== prevProps.polls && this.props.polls && this.props.polls.length) {
+            this.connectWallet();
+        }
+    }
+
+    componentDidMount(){
+        this.connectWallet();
+    }
+
+    connectWallet = async () => {
+        const {history, polls, updateBalances, idPoll} = this.props;
+        if(!polls || !polls.length) return;
+
+        const poll = polls[idPoll];
+        const tknVotes = await PollManager.methods.getVote(idPoll, web3.eth.defaultAccount).call();  
+        const votes = tknVotes.map(x => Math.sqrt(parseInt(web3.utils.fromWei(x, "ether"))));            
+        const tokenBalance = await SNT.methods.balanceOfAt(web3.eth.defaultAccount, poll._startBlock).call();
+        const ethBalance = await web3.eth.getBalance(web3.eth.defaultAccount);
+        updateBalances(idPoll, tokenBalance, ethBalance, votes);
+
+        history.push('/votingCredits/' + idPoll);
+    };
+
+    render(){
+        return null;
+    }
+}
+
+export default withRouter(ExternalWallet);

app/components/flow/OtherWallets.js

@@ -11,33 +11,43 @@ const OtherWallets = (props) => <Fragment><div className="section">
   <Card className="card">
     <CardContent>
       <Typography gutterBottom component="h2">
-        Ledger or Metamask
+        Connect on Desktop
       </Typography>
       <Typography component="p">
-        Text about sending the link to your email account and open it on desktop
-        <Button color="primary" variant="contained">
-          CALL TO ACTION
-        </Button>
+        Send yourself a link to vote using a hardware wallet or a desktop browser extension.
       </Typography>
+      <Link to={"/externalWallet/" + props.idPoll}>
+      <Button color="primary" variant="contained">
+        Send a link
+      </Button>
+      </Link>
     </CardContent>
   </Card>
   <Card className="card">
     <CardContent>
       <Typography gutterBottom component="h2">
-        Web3 wallet / browser
+      Connect on mobile
       </Typography>
       <Typography component="p">
-        Some explanation and CTA
+        Copy a link to use on a mobile Web3 browser
       </Typography>
+      <Link to={"/externalWallet/" + props.idPoll}>
+      <Button color="primary" variant="contained">
+        Copy link
+      </Button>
+      </Link>
     </CardContent>
   </Card>
   <Card className="card">
     <CardContent>
       <Typography gutterBottom component="h2">
-        Exchanges
+        SNT on Exchanges
       </Typography>
       <Typography component="p">
-        Unfortunately we cannot...
+      Sorry!, SNT held on exchanges don’t qualify for voting. 
+      </Typography>
+      <Typography component="p">
+      To vote in the next poll, move your tokens to a wallet where you control the private keys.
       </Typography>
     </CardContent>
   </Card>

app/components/flow/TitleScreen.js

@@ -13,7 +13,8 @@ class TitleScreen extends Component {
 
   state = {
     time: {},
-    seconds: -1
+    seconds: -1,
+    initTimer: false
   }
 
   timer = 0
@@ -55,42 +56,46 @@ class TitleScreen extends Component {
     clearInterval(this.timer);
   }
 
+  componentDidMount(){
+    if(this.props.polls && this.props.polls.length){
+      this.initTimer();
+    }
+  }
+
   componentDidUpdate(prevProps){
     if (this.props.polls !== prevProps.polls && this.props.polls && this.props.polls.length) {
-      const idPoll = this.props.polls[this.props.polls.length - 1].idPoll;
-      const seconds = this.props.polls[idPoll]._endTime - (new Date()).getTime() / 1000
-      if(seconds > 0){
-        let timeLeftVar = this.secondsToTime(seconds);
-        this.setState({ time: timeLeftVar, seconds });
-        this.startTimer();
-      } else {
-        this.setState({seconds});
-      }
+      this.initTimer();
+    }
+  }
+
+  initTimer(){
+    if(this.state.initTimer) return;
+
+    this.setState({initTimer: true});
+    
+    const idPoll = this.props.polls[this.props.polls.length - 1].idPoll;
+    const seconds = this.props.polls[idPoll]._endTime - (new Date()).getTime() / 1000
+    if(seconds > 0){
+      let timeLeftVar = this.secondsToTime(seconds);
+      this.setState({ time: timeLeftVar, seconds });
+      this.startTimer();
+    } else {
+      this.setState({seconds});
     }
   }
 
   render(){
     const {time, seconds} = this.state;
     const {polls} = this.props;
-    let canceled = true;
 
-    let startBlock, endTime, title, description;
+    if(!polls || !polls.length) return null;
 
-    let idPoll;
-
-    if(polls && polls.length){
-
-      idPoll = polls[polls.length - 1].idPoll;
-
-
-      title = polls[idPoll].content.title;
-      description = polls[idPoll].content.description;
-      canceled = polls[idPoll]._canceled;
-      startBlock = polls[idPoll]._startBlock;
-      endTime = polls[idPoll]._endTime;
-    }
+    const  idPoll = polls[polls.length - 1].idPoll;
+    const title = polls[idPoll].content.title;
+    const description = polls[idPoll].content.description;
+    const canceled = polls[idPoll]._canceled;
     
-    return (polls && !canceled ? <div>
+    return (!canceled ? <div>
       <div className="section">
         <img src="images/status-logo.svg" width="36" />
         <Typography variant="headline">{title}</Typography>