diff options
author | Alexander Tseung <alextsg@gmail.com> | 2017-12-05 03:29:52 +0800 |
---|---|---|
committer | Alexander Tseung <alextsg@gmail.com> | 2017-12-15 06:11:23 +0800 |
commit | d9ea2df6c2a2cabedead09f90c3c9bb7b4c37dd1 (patch) | |
tree | 094a2deab76a7bedb2a71f753ff7e74d0dfbb54c /mascara/src/app/first-time/backup-phrase-screen.js | |
parent | ec5e0a711cac3d35afcb1ecf5881f11adb4b3a06 (diff) | |
download | tangerine-wallet-browser-d9ea2df6c2a2cabedead09f90c3c9bb7b4c37dd1.tar.gz tangerine-wallet-browser-d9ea2df6c2a2cabedead09f90c3c9bb7b4c37dd1.tar.zst tangerine-wallet-browser-d9ea2df6c2a2cabedead09f90c3c9bb7b4c37dd1.zip |
Add route for Mascara confirm seed
Diffstat (limited to 'mascara/src/app/first-time/backup-phrase-screen.js')
-rw-r--r-- | mascara/src/app/first-time/backup-phrase-screen.js | 269 |
1 files changed, 0 insertions, 269 deletions
diff --git a/mascara/src/app/first-time/backup-phrase-screen.js b/mascara/src/app/first-time/backup-phrase-screen.js deleted file mode 100644 index 266a82cdb..000000000 --- a/mascara/src/app/first-time/backup-phrase-screen.js +++ /dev/null @@ -1,269 +0,0 @@ -import React, { Component } from 'react' -import PropTypes from 'prop-types' -import {connect} from 'react-redux' -import classnames from 'classnames' -import shuffle from 'lodash.shuffle' -import {compose, onlyUpdateForPropTypes} 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' - -const LockIcon = props => ( - <svg - version="1.1" - id="Capa_1" - xmlns="http://www.w3.org/2000/svg" - xmlnsXlink="http://www.w3.org/1999/xlink" - x="0px" - y="0px" - width="401.998px" - height="401.998px" - viewBox="0 0 401.998 401.998" - style={{enableBackground: 'new 0 0 401.998 401.998'}} - xmlSpace="preserve" - {...props} - > - <g> - <path - d="M357.45,190.721c-5.331-5.33-11.8-7.993-19.417-7.993h-9.131v-54.821c0-35.022-12.559-65.093-37.685-90.218 - C266.093,12.563,236.025,0,200.998,0c-35.026,0-65.1,12.563-90.222,37.688C85.65,62.814,73.091,92.884,73.091,127.907v54.821 - h-9.135c-7.611,0-14.084,2.663-19.414,7.993c-5.33,5.326-7.994,11.799-7.994,19.417V374.59c0,7.611,2.665,14.086,7.994,19.417 - c5.33,5.325,11.803,7.991,19.414,7.991H338.04c7.617,0,14.085-2.663,19.417-7.991c5.325-5.331,7.994-11.806,7.994-19.417V210.135 - C365.455,202.523,362.782,196.051,357.45,190.721z M274.087,182.728H127.909v-54.821c0-20.175,7.139-37.402,21.414-51.675 - c14.277-14.275,31.501-21.411,51.678-21.411c20.179,0,37.399,7.135,51.677,21.411c14.271,14.272,21.409,31.5,21.409,51.675V182.728 - z" - /> - </g> - </svg> -) - -class BackupPhraseScreen extends Component { - static propTypes = { - isLoading: PropTypes.bool.isRequired, - address: PropTypes.string.isRequired, - seedWords: PropTypes.string, - confirmSeedWords: PropTypes.func.isRequired, - history: PropTypes.object, - }; - - static defaultProps = { - seedWords: '', - } - - static PAGE = { - SECRET: 'secret', - CONFIRM: 'confirm', - } - - constructor (props) { - const {seedWords} = props - super(props) - this.state = { - isShowingSecret: false, - page: BackupPhraseScreen.PAGE.SECRET, - selectedSeeds: [], - shuffledSeeds: seedWords && shuffle(seedWords.split(' ')), - } - } - - componentWillMount () { - const { seedWords, history } = this.props - if (!seedWords) { - history.push(DEFAULT_ROUTE) - } - } - - renderSecretWordsContainer () { - const { isShowingSecret } = this.state - - return ( - <div className="backup-phrase__secret"> - <div className={classnames('backup-phrase__secret-words', { - 'backup-phrase__secret-words--hidden': !isShowingSecret, - })}> - {this.props.seedWords} - </div> - {!isShowingSecret && ( - <div className="backup-phrase__secret-blocker"> - <LockIcon width="28px" height="35px" fill="#FFFFFF" /> - <button - className="backup-phrase__reveal-button" - onClick={() => this.setState({ isShowingSecret: true })} - > - Click here to reveal secret words - </button> - </div> - )} - </div> - ) - } - - renderSecretScreen () { - const { isShowingSecret } = this.state - - return ( - <div className="backup-phrase__content-wrapper"> - <div> - <div className="backup-phrase__title">Secret Backup Phrase</div> - <div className="backup-phrase__body-text"> - Your secret backup phrase makes it easy to back up and restore your account. - </div> - <div className="backup-phrase__body-text"> - WARNING: Never disclose your backup phrase. Anyone with this phrase can take your Ether forever. - </div> - {this.renderSecretWordsContainer()} - <button - className="first-time-flow__button" - onClick={() => isShowingSecret && this.setState({ - isShowingSecret: false, - page: BackupPhraseScreen.PAGE.CONFIRM, - })} - disabled={!isShowingSecret} - > - Next - </button> - <Breadcrumbs total={3} currentIndex={1} /> - </div> - <div className="backup-phrase__tips"> - <div className="backup-phrase__tips-text">Tips:</div> - <div className="backup-phrase__tips-text"> - Store this phrase in a password manager like 1password. - </div> - <div className="backup-phrase__tips-text"> - Write this phrase on a piece of paper and store in a secure location. If you want even more security, write it down on multiple pieces of paper and store each in 2 - 3 different locations. - </div> - <div className="backup-phrase__tips-text"> - Memorize this phrase. - </div> - </div> - </div> - ) - } - - renderConfirmationScreen () { - const { seedWords, confirmSeedWords, history } = this.props - const { selectedSeeds, shuffledSeeds } = this.state - const isValid = seedWords === selectedSeeds.map(([_, seed]) => seed).join(' ') - - return ( - <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 - className="first-time-flow__button" - onClick={() => isValid && confirmSeedWords().then(() => history.push(DEFAULT_ROUTE))} - disabled={!isValid} - > - Confirm - </button> - </div> - </div> - ) - } - - renderBack () { - return this.state.page === BackupPhraseScreen.PAGE.CONFIRM - ? ( - <a - className="backup-phrase__back-button" - onClick={e => { - e.preventDefault() - this.setState({ - page: BackupPhraseScreen.PAGE.SECRET, - }) - }} - href="#" - > - {`< Back`} - </a> - ) - : null - } - - renderContent () { - switch (this.state.page) { - case BackupPhraseScreen.PAGE.CONFIRM: - return this.renderConfirmationScreen() - case BackupPhraseScreen.PAGE.SECRET: - default: - return this.renderSecretScreen() - } - } - - render () { - return ( - <div className="first-time-flow"> - { - this.props.isLoading - ? <LoadingScreen loadingMessage="Creating your new account" /> - : ( - <div className="backup-phrase"> - {this.renderBack()} - <Identicon address={this.props.address} diameter={70} /> - {this.renderContent()} - </div> - ) - } - </div> - ) - } -} - -export default compose( - onlyUpdateForPropTypes, - connect( - ({ metamask: { selectedAddress, seedWords }, appState: { isLoading } }) => ({ - seedWords, - isLoading, - address: selectedAddress, - }), - dispatch => ({ - confirmSeedWords: () => dispatch(confirmSeedWords()), - }) - ) -)(BackupPhraseScreen) |