diff options
author | Alexander Tseung <alextsg@users.noreply.github.com> | 2019-01-23 23:25:34 +0800 |
---|---|---|
committer | Whymarrh Whitby <whymarrh.whitby@gmail.com> | 2019-01-23 23:25:34 +0800 |
commit | fba17d77de9e60de0e02e90dc6dbcbbf7454158a (patch) | |
tree | 0a14f465c25b2b400f5706b55993dcf06d6633a3 /ui/app/components/pages/first-time-flow/seed-phrase/reveal-seed-phrase/reveal-seed-phrase.component.js | |
parent | 69fcfa427bdee2ea287e9d9c23963dc1032685cd (diff) | |
download | tangerine-wallet-browser-fba17d77de9e60de0e02e90dc6dbcbbf7454158a.tar.gz tangerine-wallet-browser-fba17d77de9e60de0e02e90dc6dbcbbf7454158a.tar.zst tangerine-wallet-browser-fba17d77de9e60de0e02e90dc6dbcbbf7454158a.zip |
Refactor first time flow, remove seed phrase from state (#5994)
* Refactor and fix styling for first time flow. Remove seed phrase from persisted metamask state
* Fix linting and tests
* Fix translations, initialization notice routing
* Fix drizzle tests
* Fix e2e tests
* Fix integration tests
* Fix styling
* Fix migration naming from 030 to 031
* Open extension in browser when user has not completed onboarding
Diffstat (limited to 'ui/app/components/pages/first-time-flow/seed-phrase/reveal-seed-phrase/reveal-seed-phrase.component.js')
-rw-r--r-- | ui/app/components/pages/first-time-flow/seed-phrase/reveal-seed-phrase/reveal-seed-phrase.component.js | 139 |
1 files changed, 139 insertions, 0 deletions
diff --git a/ui/app/components/pages/first-time-flow/seed-phrase/reveal-seed-phrase/reveal-seed-phrase.component.js b/ui/app/components/pages/first-time-flow/seed-phrase/reveal-seed-phrase/reveal-seed-phrase.component.js new file mode 100644 index 000000000..bb822d1d5 --- /dev/null +++ b/ui/app/components/pages/first-time-flow/seed-phrase/reveal-seed-phrase/reveal-seed-phrase.component.js @@ -0,0 +1,139 @@ +import React, { PureComponent } from 'react' +import PropTypes from 'prop-types' +import classnames from 'classnames' +import Identicon from '../../../../identicon' +import LockIcon from '../../../../lock-icon' +import Button from '../../../../button' +import Breadcrumbs from '../../../../breadcrumbs' +import { INITIALIZE_CONFIRM_SEED_PHRASE_ROUTE } from '../../../../../routes' +import { exportAsFile } from '../../../../../../app/util' + +export default class RevealSeedPhrase extends PureComponent { + static contextTypes = { + t: PropTypes.func, + } + + static propTypes = { + address: PropTypes.string, + history: PropTypes.object, + seedPhrase: PropTypes.string, + } + + state = { + isShowingSeedPhrase: false, + } + + handleExport = () => { + exportAsFile('MetaMask Secret Backup Phrase', this.props.seedPhrase, 'text/plain') + } + + handleNext = event => { + event.preventDefault() + const { isShowingSeedPhrase } = this.state + const { history } = this.props + + if (!isShowingSeedPhrase) { + return + } + + history.push(INITIALIZE_CONFIRM_SEED_PHRASE_ROUTE) + } + + renderSecretWordsContainer () { + const { t } = this.context + const { seedPhrase } = this.props + const { isShowingSeedPhrase } = this.state + + return ( + <div className="reveal-seed-phrase__secret"> + <div className={classnames( + 'reveal-seed-phrase__secret-words', + { 'reveal-seed-phrase__secret-words--hidden': !isShowingSeedPhrase } + )}> + { seedPhrase } + </div> + { + !isShowingSeedPhrase && ( + <div + className="reveal-seed-phrase__secret-blocker" + onClick={() => this.setState({ isShowingSeedPhrase: true })} + > + <LockIcon + width="28px" + height="35px" + fill="#FFFFFF" + /> + <div className="reveal-seed-phrase__reveal-button"> + { t('clickToRevealSeed') } + </div> + </div> + ) + } + </div> + ) + } + + render () { + const { t } = this.context + const { address } = this.props + const { isShowingSeedPhrase } = this.state + + return ( + <div> + <Identicon + className="first-time-flow__unique-image" + address={address} + diameter={70} + /> + <div className="seed-phrase__sections"> + <div className="seed-phrase__main"> + <div className="first-time-flow__header"> + { t('secretBackupPhrase') } + </div> + <div className="first-time-flow__text-block"> + { t('secretBackupPhraseDescription') } + </div> + <div className="first-time-flow__text-block"> + { t('secretBackupPhraseWarning') } + </div> + { this.renderSecretWordsContainer() } + </div> + <div className="seed-phrase__side"> + <div className="first-time-flow__text-block"> + { `${t('tips')}:` } + </div> + <div className="first-time-flow__text-block"> + { t('storePhrase') } + </div> + <div className="first-time-flow__text-block"> + { t('writePhrase') } + </div> + <div className="first-time-flow__text-block"> + { t('memorizePhrase') } + </div> + <div className="first-time-flow__text-block"> + <a + className="reveal-seed-phrase__export-text" + onClick={this.handleExport}> + { t('downloadSecretBackup') } + </a> + </div> + </div> + </div> + <Button + type="first-time" + className="first-time-flow__button" + onClick={this.handleNext} + disabled={!isShowingSeedPhrase} + > + { t('next') } + </Button> + <Breadcrumbs + className="first-time-flow__breadcrumbs" + total={3} + currentIndex={2} + /> + </div> + ) + } +} |