aboutsummaryrefslogtreecommitdiffstats
path: root/mascara/src/app/first-time/backup-phrase-screen.js
diff options
context:
space:
mode:
authorAlexander Tseung <alextsg@gmail.com>2017-12-05 03:29:52 +0800
committerAlexander Tseung <alextsg@gmail.com>2017-12-15 06:11:23 +0800
commitd9ea2df6c2a2cabedead09f90c3c9bb7b4c37dd1 (patch)
tree094a2deab76a7bedb2a71f753ff7e74d0dfbb54c /mascara/src/app/first-time/backup-phrase-screen.js
parentec5e0a711cac3d35afcb1ecf5881f11adb4b3a06 (diff)
downloadtangerine-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.js269
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)