diff options
Diffstat (limited to 'mascara/src/app/first-time/confirm-seed-screen.js')
| -rw-r--r-- | mascara/src/app/first-time/confirm-seed-screen.js | 129 |
1 files changed, 71 insertions, 58 deletions
diff --git a/mascara/src/app/first-time/confirm-seed-screen.js b/mascara/src/app/first-time/confirm-seed-screen.js index c9382689e..6eabd7544 100644 --- a/mascara/src/app/first-time/confirm-seed-screen.js +++ b/mascara/src/app/first-time/confirm-seed-screen.js @@ -1,14 +1,15 @@ import React, { Component } from 'react' import PropTypes from 'prop-types' import { connect } from 'react-redux' +import { withRouter } from 'react-router-dom' import classnames from 'classnames' import shuffle from 'lodash.shuffle' -import { compose, onlyUpdateForPropTypes } from 'recompose' +import { compose } from 'recompose' import Identicon from '../../../../ui/app/components/identicon' import { confirmSeedWords } from '../../../../ui/app/actions' import Breadcrumbs from './breadcrumbs' import LoadingScreen from './loading-screen' -import { DEFAULT_ROUTE } from '../../../../ui/app/routes' +import { INITIALIZE_ROUTE, DEFAULT_ROUTE } from '../../../../ui/app/routes' class ConfirmSeedScreen extends Component { static propTypes = { @@ -35,10 +36,18 @@ class ConfirmSeedScreen extends Component { componentWillMount () { const { seedWords, history } = this.props if (!seedWords) { - history.push(DEFAULT_ROUTE) + history.push(INITIALIZE_ROUTE) } } + handleClick () { + this.props.confirmSeedWords() + .then(() => { + console.log('FINISHED') + this.props.history.push(DEFAULT_ROUTE) + }) + } + render () { const { seedWords, confirmSeedWords, history } = this.props const { selectedSeeds, shuffledSeeds } = this.state @@ -50,66 +59,70 @@ class ConfirmSeedScreen extends Component { this.props.isLoading ? <LoadingScreen loadingMessage="Creating your new account" /> : ( - <div className="backup-phrase"> - <Identicon address={this.props.address} diameter={70} /> - <div className="backup-phrase__content-wrapper"> - <div> - <div className="backup-phrase__title"> - Confirm your Secret Backup Phrase - </div> - <div className="backup-phrase__body-text"> - Please select each phrase in order to make sure it is correct. - </div> - <div className="backup-phrase__confirm-secret"> - {selectedSeeds.map(([_, word], i) => ( + <div className="first-view-main-wrapper"> + <div className="first-view-main"> + <div className="backup-phrase"> + <Identicon address={this.props.address} diameter={70} /> + <div className="backup-phrase__content-wrapper"> + <div> + <div className="backup-phrase__title"> + Confirm your Secret Backup Phrase + </div> + <div className="backup-phrase__body-text"> + Please select each phrase in order to make sure it is correct. + </div> + <div className="backup-phrase__confirm-secret"> + {selectedSeeds.map(([_, word], i) => ( + <button + key={i} + className="backup-phrase__confirm-seed-option" + > + {word} + </button> + ))} + </div> + <div className="backup-phrase__confirm-seed-options"> + {shuffledSeeds.map((word, i) => { + const isSelected = selectedSeeds + .filter(([index, seed]) => seed === word && index === i) + .length + + return ( + <button + key={i} + className={classnames('backup-phrase__confirm-seed-option', { + 'backup-phrase__confirm-seed-option--selected': isSelected, + })} + onClick={() => { + if (!isSelected) { + this.setState({ + selectedSeeds: [...selectedSeeds, [i, word]], + }) + } else { + this.setState({ + selectedSeeds: selectedSeeds + .filter(([index, seed]) => !(seed === word && index === i)), + }) + } + }} + > + {word} + </button> + ) + })} + </div> <button - key={i} - className="backup-phrase__confirm-seed-option" + className="first-time-flow__button" + onClick={() => isValid && this.handleClick()} + disabled={!isValid} > - {word} + Confirm </button> - ))} - </div> - <div className="backup-phrase__confirm-seed-options"> - {shuffledSeeds.map((word, i) => { - const isSelected = selectedSeeds - .filter(([index, seed]) => seed === word && index === i) - .length - - return ( - <button - key={i} - className={classnames('backup-phrase__confirm-seed-option', { - 'backup-phrase__confirm-seed-option--selected': isSelected, - })} - onClick={() => { - if (!isSelected) { - this.setState({ - selectedSeeds: [...selectedSeeds, [i, word]], - }) - } else { - this.setState({ - selectedSeeds: selectedSeeds - .filter(([index, seed]) => !(seed === word && index === i)), - }) - } - }} - > - {word} - </button> - ) - })} + </div> </div> - <button - className="first-time-flow__button" - onClick={() => isValid && confirmSeedWords().then(() => history.push(DEFAULT_ROUTE))} - disabled={!isValid} - > - Confirm - </button> + <Breadcrumbs total={3} currentIndex={1} /> </div> </div> - <Breadcrumbs total={3} currentIndex={1} /> </div> ) } @@ -119,7 +132,7 @@ class ConfirmSeedScreen extends Component { } export default compose( - onlyUpdateForPropTypes, + withRouter, connect( ({ metamask: { selectedAddress, seedWords }, appState: { isLoading } }) => ({ seedWords, |