diff options
Diffstat (limited to 'mascara/src/app/first-time/backup-phrase-screen.js')
| -rw-r--r-- | mascara/src/app/first-time/backup-phrase-screen.js | 254 |
1 files changed, 254 insertions, 0 deletions
diff --git a/mascara/src/app/first-time/backup-phrase-screen.js b/mascara/src/app/first-time/backup-phrase-screen.js new file mode 100644 index 000000000..c68dacea2 --- /dev/null +++ b/mascara/src/app/first-time/backup-phrase-screen.js @@ -0,0 +1,254 @@ +import React, {Component, PropTypes} from 'react' +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' + +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.isRequired, + next: PropTypes.func.isRequired, + confirmSeedWords: PropTypes.func.isRequired, + }; + + 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(' ')), + } + } + + 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, next } = 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(next)} + 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 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> + ) + } +} + +export default compose( + onlyUpdateForPropTypes, + connect( + ({ metamask: { selectedAddress, seedWords }, appState: { isLoading } }) => ({ + seedWords, + isLoading, + address: selectedAddress, + }), + dispatch => ({ + confirmSeedWords: () => dispatch(confirmSeedWords()), + }) + ) +)(BackupPhraseScreen) |