From c1bf3b259f37ab15a994fcf2336131365f667ca9 Mon Sep 17 00:00:00 2001 From: Richard Ramos Date: Sat, 20 Oct 2018 22:35:54 -0400 Subject: [PATCH] Added external wallet connection screen --- app/components/Voting.js | 2 + app/components/flow/ExternalWallet.js | 37 +++++++++++++++++ app/components/flow/OtherWallets.js | 28 ++++++++----- app/components/flow/TitleScreen.js | 57 +++++++++++++++------------ 4 files changed, 89 insertions(+), 35 deletions(-) create mode 100644 app/components/flow/ExternalWallet.js diff --git a/app/components/Voting.js b/app/components/Voting.js index f785e2f..f98ad94 100644 --- a/app/components/Voting.js +++ b/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 { } /> } /> } /> + } /> } /> } /> } /> diff --git a/app/components/flow/ExternalWallet.js b/app/components/flow/ExternalWallet.js new file mode 100644 index 0000000..44c5587 --- /dev/null +++ b/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); \ No newline at end of file diff --git a/app/components/flow/OtherWallets.js b/app/components/flow/OtherWallets.js index 6fc92e8..3f518ae 100644 --- a/app/components/flow/OtherWallets.js +++ b/app/components/flow/OtherWallets.js @@ -11,33 +11,43 @@ const OtherWallets = (props) =>
- Ledger or Metamask + Connect on Desktop - Text about sending the link to your email account and open it on desktop - + Send yourself a link to vote using a hardware wallet or a desktop browser extension. + + + - Web3 wallet / browser + Connect on mobile - Some explanation and CTA + Copy a link to use on a mobile Web3 browser + + + - Exchanges + SNT on Exchanges - Unfortunately we cannot... + Sorry!, SNT held on exchanges don’t qualify for voting. + + + To vote in the next poll, move your tokens to a wallet where you control the private keys. diff --git a/app/components/flow/TitleScreen.js b/app/components/flow/TitleScreen.js index fc2eb26..9346bad 100644 --- a/app/components/flow/TitleScreen.js +++ b/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 ?
+ return (!canceled ?
{title}