diff options
Diffstat (limited to 'ui/app/pages/first-time-flow')
20 files changed, 216 insertions, 106 deletions
diff --git a/ui/app/pages/first-time-flow/create-password/create-password.component.js b/ui/app/pages/first-time-flow/create-password/create-password.component.js index 5e67a2244..fbeb34d77 100644 --- a/ui/app/pages/first-time-flow/create-password/create-password.component.js +++ b/ui/app/pages/first-time-flow/create-password/create-password.component.js @@ -2,6 +2,7 @@ import React, { PureComponent } from 'react' import PropTypes from 'prop-types' import { Switch, Route } from 'react-router-dom' import NewAccount from './new-account' +import MetaFoxLogo from '../../../components/ui/metafox-logo' import ImportWithSeedPhrase from './import-with-seed-phrase' import { INITIALIZE_CREATE_PASSWORD_ROUTE, @@ -30,19 +31,7 @@ export default class CreatePassword extends PureComponent { return ( <div className="first-time-flow__wrapper"> - <div className="app-header__logo-container"> - <img - className="app-header__metafox-logo app-header__metafox-logo--horizontal" - src="/images/logo/metamask-logo-horizontal.svg" - height={30} - /> - <img - className="app-header__metafox-logo app-header__metafox-logo--icon" - src="/images/logo/metamask-fox.svg" - height={42} - width={42} - /> - </div> + <MetaFoxLogo /> <Switch> <Route exact diff --git a/ui/app/pages/first-time-flow/create-password/import-with-seed-phrase/import-with-seed-phrase.component.js b/ui/app/pages/first-time-flow/create-password/import-with-seed-phrase/import-with-seed-phrase.component.js index a2fb5a3bf..48eff96cb 100644 --- a/ui/app/pages/first-time-flow/create-password/import-with-seed-phrase/import-with-seed-phrase.component.js +++ b/ui/app/pages/first-time-flow/create-password/import-with-seed-phrase/import-with-seed-phrase.component.js @@ -17,6 +17,7 @@ export default class ImportWithSeedPhrase extends PureComponent { static propTypes = { history: PropTypes.object, onSubmit: PropTypes.func.isRequired, + setSeedPhraseBackedUp: PropTypes.func, } state = { @@ -126,7 +127,7 @@ export default class ImportWithSeedPhrase extends PureComponent { } const { password, seedPhrase } = this.state - const { history, onSubmit } = this.props + const { history, onSubmit, setSeedPhraseBackedUp } = this.props try { await onSubmit(password, this.parseSeedPhrase(seedPhrase)) @@ -137,7 +138,10 @@ export default class ImportWithSeedPhrase extends PureComponent { name: 'Import Complete', }, }) - history.push(INITIALIZE_END_OF_FLOW_ROUTE) + + setSeedPhraseBackedUp(true).then(() => { + history.push(INITIALIZE_END_OF_FLOW_ROUTE) + }) } catch (error) { this.setState({ seedPhraseError: error.message }) } @@ -174,7 +178,7 @@ export default class ImportWithSeedPhrase extends PureComponent { }) this.setState((prevState) => ({ - termsChecked: !prevState.termsChecked, + termsChecked: !prevState.termsChecked, })) } diff --git a/ui/app/pages/first-time-flow/create-password/import-with-seed-phrase/import-with-seed-phrase.container.js b/ui/app/pages/first-time-flow/create-password/import-with-seed-phrase/import-with-seed-phrase.container.js new file mode 100644 index 000000000..0cfeee1f4 --- /dev/null +++ b/ui/app/pages/first-time-flow/create-password/import-with-seed-phrase/import-with-seed-phrase.container.js @@ -0,0 +1,13 @@ +import { connect } from 'react-redux' +import ImportWithSeedPhrase from './import-with-seed-phrase.component' +import { + setSeedPhraseBackedUp, +} from '../../../../store/actions' + +const mapDispatchToProps = dispatch => { + return { + setSeedPhraseBackedUp: (seedPhraseBackupState) => dispatch(setSeedPhraseBackedUp(seedPhraseBackupState)), + } +} + +export default connect(null, mapDispatchToProps)(ImportWithSeedPhrase) diff --git a/ui/app/pages/first-time-flow/create-password/import-with-seed-phrase/index.js b/ui/app/pages/first-time-flow/create-password/import-with-seed-phrase/index.js index e5ff1fde5..9d4ad7d0f 100644 --- a/ui/app/pages/first-time-flow/create-password/import-with-seed-phrase/index.js +++ b/ui/app/pages/first-time-flow/create-password/import-with-seed-phrase/index.js @@ -1 +1 @@ -export { default } from './import-with-seed-phrase.component' +export { default } from './import-with-seed-phrase.container' diff --git a/ui/app/pages/first-time-flow/end-of-flow/end-of-flow.component.js b/ui/app/pages/first-time-flow/end-of-flow/end-of-flow.component.js index 83b0e7fc6..31658d87a 100644 --- a/ui/app/pages/first-time-flow/end-of-flow/end-of-flow.component.js +++ b/ui/app/pages/first-time-flow/end-of-flow/end-of-flow.component.js @@ -1,6 +1,7 @@ import React, { PureComponent } from 'react' import PropTypes from 'prop-types' import Button from '../../../components/ui/button' +import MetaFoxLogo from '../../../components/ui/metafox-logo' import { DEFAULT_ROUTE } from '../../../helpers/constants/routes' export default class EndOfFlowScreen extends PureComponent { @@ -21,19 +22,7 @@ export default class EndOfFlowScreen extends PureComponent { return ( <div className="end-of-flow"> - <div className="app-header__logo-container"> - <img - className="app-header__metafox-logo app-header__metafox-logo--horizontal" - src="/images/logo/metamask-logo-horizontal.svg" - height={30} - /> - <img - className="app-header__metafox-logo app-header__metafox-logo--icon" - src="/images/logo/metamask-fox.svg" - height={42} - width={42} - /> - </div> + <MetaFoxLogo /> <div className="end-of-flow__emoji">π</div> <div className="first-time-flow__header"> { t('congratulations') } @@ -66,9 +55,9 @@ export default class EndOfFlowScreen extends PureComponent { rel="noopener noreferrer" > <span className="first-time-flow__link-text"> - Learn More + {t('endOfFlowMessage9')} </span> - </a>. + </a> </div> <Button type="primary" @@ -85,7 +74,7 @@ export default class EndOfFlowScreen extends PureComponent { history.push(DEFAULT_ROUTE) }} > - { 'All Done' } + { t('endOfFlowMessage10') } </Button> </div> ) diff --git a/ui/app/pages/first-time-flow/first-time-flow-switch/first-time-flow-switch.component.js b/ui/app/pages/first-time-flow/first-time-flow-switch/first-time-flow-switch.component.js index 4fd028482..6bc89245b 100644 --- a/ui/app/pages/first-time-flow/first-time-flow-switch/first-time-flow-switch.component.js +++ b/ui/app/pages/first-time-flow/first-time-flow-switch/first-time-flow-switch.component.js @@ -6,7 +6,6 @@ import { LOCK_ROUTE, INITIALIZE_WELCOME_ROUTE, INITIALIZE_UNLOCK_ROUTE, - INITIALIZE_SEED_PHRASE_ROUTE, INITIALIZE_METAMETRICS_OPT_IN_ROUTE, } from '../../../helpers/constants/routes' @@ -15,7 +14,6 @@ export default class FirstTimeFlowSwitch extends PureComponent { completedOnboarding: PropTypes.bool, isInitialized: PropTypes.bool, isUnlocked: PropTypes.bool, - seedPhrase: PropTypes.string, optInMetaMetrics: PropTypes.bool, } @@ -24,7 +22,6 @@ export default class FirstTimeFlowSwitch extends PureComponent { completedOnboarding, isInitialized, isUnlocked, - seedPhrase, optInMetaMetrics, } = this.props @@ -32,7 +29,7 @@ export default class FirstTimeFlowSwitch extends PureComponent { return <Redirect to={{ pathname: DEFAULT_ROUTE }} /> } - if (isUnlocked && !seedPhrase) { + if (isUnlocked) { return <Redirect to={{ pathname: LOCK_ROUTE }} /> } @@ -44,10 +41,6 @@ export default class FirstTimeFlowSwitch extends PureComponent { return <Redirect to={{ pathname: INITIALIZE_UNLOCK_ROUTE }} /> } - if (seedPhrase) { - return <Redirect to={{ pathname: INITIALIZE_SEED_PHRASE_ROUTE }} /> - } - if (optInMetaMetrics === null) { return <Redirect to={{ pathname: INITIALIZE_WELCOME_ROUTE }} /> } diff --git a/ui/app/pages/first-time-flow/first-time-flow.component.js b/ui/app/pages/first-time-flow/first-time-flow.component.js index 0d206bf42..91415d2ee 100644 --- a/ui/app/pages/first-time-flow/first-time-flow.component.js +++ b/ui/app/pages/first-time-flow/first-time-flow.component.js @@ -18,6 +18,7 @@ import { INITIALIZE_SELECT_ACTION_ROUTE, INITIALIZE_END_OF_FLOW_ROUTE, INITIALIZE_METAMETRICS_OPT_IN_ROUTE, + INITIALIZE_BACKUP_SEED_PHRASE_ROUTE, } from '../../helpers/constants/routes' export default class FirstTimeFlow extends PureComponent { @@ -30,6 +31,9 @@ export default class FirstTimeFlow extends PureComponent { isUnlocked: PropTypes.bool, unlockAccount: PropTypes.func, nextRoute: PropTypes.string, + showingSeedPhraseBackupAfterOnboarding: PropTypes.bool, + seedPhraseBackedUp: PropTypes.bool, + verifySeedPhrase: PropTypes.func, } state = { @@ -38,9 +42,16 @@ export default class FirstTimeFlow extends PureComponent { } componentDidMount () { - const { completedOnboarding, history, isInitialized, isUnlocked } = this.props + const { + completedOnboarding, + history, + isInitialized, + isUnlocked, + showingSeedPhraseBackupAfterOnboarding, + seedPhraseBackedUp, + } = this.props - if (completedOnboarding) { + if (completedOnboarding && (!showingSeedPhraseBackupAfterOnboarding || seedPhraseBackedUp)) { history.push(DEFAULT_ROUTE) return } @@ -88,6 +99,7 @@ export default class FirstTimeFlow extends PureComponent { render () { const { seedPhrase, isImportedKeyring } = this.state + const { verifySeedPhrase } = this.props return ( <div className="first-time-flow"> @@ -98,6 +110,17 @@ export default class FirstTimeFlow extends PureComponent { <SeedPhrase { ...props } seedPhrase={seedPhrase} + verifySeedPhrase={verifySeedPhrase} + /> + )} + /> + <Route + path={INITIALIZE_BACKUP_SEED_PHRASE_ROUTE} + render={props => ( + <SeedPhrase + { ...props } + seedPhrase={seedPhrase} + verifySeedPhrase={verifySeedPhrase} /> )} /> diff --git a/ui/app/pages/first-time-flow/first-time-flow.container.js b/ui/app/pages/first-time-flow/first-time-flow.container.js index 16025a489..ec9920d74 100644 --- a/ui/app/pages/first-time-flow/first-time-flow.container.js +++ b/ui/app/pages/first-time-flow/first-time-flow.container.js @@ -5,16 +5,23 @@ import { createNewVaultAndGetSeedPhrase, createNewVaultAndRestore, unlockAndGetSeedPhrase, + verifySeedPhrase, } from '../../store/actions' +import { + INITIALIZE_BACKUP_SEED_PHRASE_ROUTE, +} from '../../helpers/constants/routes' -const mapStateToProps = state => { - const { metamask: { completedOnboarding, isInitialized, isUnlocked } } = state +const mapStateToProps = (state, ownProps) => { + const { metamask: { completedOnboarding, isInitialized, isUnlocked, seedPhraseBackedUp } } = state + const showingSeedPhraseBackupAfterOnboarding = Boolean(ownProps.location.pathname.match(INITIALIZE_BACKUP_SEED_PHRASE_ROUTE)) return { completedOnboarding, isInitialized, isUnlocked, nextRoute: getFirstTimeFlowTypeRoute(state), + showingSeedPhraseBackupAfterOnboarding, + seedPhraseBackedUp, } } @@ -25,6 +32,7 @@ const mapDispatchToProps = dispatch => { return dispatch(createNewVaultAndRestore(password, seedPhrase)) }, unlockAccount: password => dispatch(unlockAndGetSeedPhrase(password)), + verifySeedPhrase: () => verifySeedPhrase(), } } diff --git a/ui/app/pages/first-time-flow/index.scss b/ui/app/pages/first-time-flow/index.scss index 6c65cfdae..dec80cb60 100644 --- a/ui/app/pages/first-time-flow/index.scss +++ b/ui/app/pages/first-time-flow/index.scss @@ -26,6 +26,10 @@ .app-header__metafox-logo { margin-bottom: 40px; + + @media screen and (max-width: $break-small) { + margin-bottom: 0px; + } } } diff --git a/ui/app/pages/first-time-flow/metametrics-opt-in/metametrics-opt-in.component.js b/ui/app/pages/first-time-flow/metametrics-opt-in/metametrics-opt-in.component.js index 6b9d06cf9..bb187d634 100644 --- a/ui/app/pages/first-time-flow/metametrics-opt-in/metametrics-opt-in.component.js +++ b/ui/app/pages/first-time-flow/metametrics-opt-in/metametrics-opt-in.component.js @@ -1,5 +1,6 @@ import React, { Component } from 'react' import PropTypes from 'prop-types' +import MetaFoxLogo from '../../../components/ui/metafox-logo' import PageContainerFooter from '../../../components/ui/page-container/page-container-footer' export default class MetaMetricsOptIn extends Component { @@ -28,19 +29,7 @@ export default class MetaMetricsOptIn extends Component { return ( <div className="metametrics-opt-in"> <div className="metametrics-opt-in__main"> - <div className="app-header__logo-container"> - <img - className="app-header__metafox-logo app-header__metafox-logo--horizontal" - src="/images/logo/metamask-logo-horizontal.svg" - height={30} - /> - <img - className="app-header__metafox-logo app-header__metafox-logo--icon" - src="/images/logo/metamask-fox.svg" - height={42} - width={42} - /> - </div> + <MetaFoxLogo /> <div className="metametrics-opt-in__body-graphic"> <img src="images/metrics-chart.svg" /> </div> @@ -113,7 +102,7 @@ export default class MetaMetricsOptIn extends Component { .then(() => { history.push(nextRoute) }) - }) + }) }} cancelText={'No Thanks'} hideCancel={false} @@ -146,7 +135,7 @@ export default class MetaMetricsOptIn extends Component { .then(() => { history.push(nextRoute) }) - }) + }) }} submitText={'I agree'} submitButtonType={'primary'} diff --git a/ui/app/pages/first-time-flow/seed-phrase/confirm-seed-phrase/confirm-seed-phrase.component.js b/ui/app/pages/first-time-flow/seed-phrase/confirm-seed-phrase/confirm-seed-phrase.component.js index 4cfc38fdf..9256c3d8d 100644 --- a/ui/app/pages/first-time-flow/seed-phrase/confirm-seed-phrase/confirm-seed-phrase.component.js +++ b/ui/app/pages/first-time-flow/seed-phrase/confirm-seed-phrase/confirm-seed-phrase.component.js @@ -6,6 +6,7 @@ import Button from '../../../../components/ui/button' import { INITIALIZE_END_OF_FLOW_ROUTE, INITIALIZE_SEED_PHRASE_ROUTE, + DEFAULT_ROUTE, } from '../../../../helpers/constants/routes' import { exportAsFile } from '../../../../helpers/utils/util' import DraggableSeed from './draggable-seed.component' @@ -88,7 +89,7 @@ export default class ConfirmSeedPhrase extends PureComponent { } handleSubmit = async () => { - const { history } = this.props + const { history, setSeedPhraseBackedUp, showingSeedPhraseBackupAfterOnboarding, hideSeedPhraseBackupAfterOnboarding } = this.props if (!this.isValid()) { return @@ -102,7 +103,15 @@ export default class ConfirmSeedPhrase extends PureComponent { name: 'Verify Complete', }, }) - history.push(INITIALIZE_END_OF_FLOW_ROUTE) + + setSeedPhraseBackedUp(true).then(() => { + if (showingSeedPhraseBackupAfterOnboarding) { + hideSeedPhraseBackupAfterOnboarding() + history.push(DEFAULT_ROUTE) + } else { + history.push(INITIALIZE_END_OF_FLOW_ROUTE) + } + }) } catch (error) { console.error(error.message) } diff --git a/ui/app/pages/first-time-flow/seed-phrase/confirm-seed-phrase/confirm-seed-phrase.container.js b/ui/app/pages/first-time-flow/seed-phrase/confirm-seed-phrase/confirm-seed-phrase.container.js new file mode 100644 index 000000000..ac5a26979 --- /dev/null +++ b/ui/app/pages/first-time-flow/seed-phrase/confirm-seed-phrase/confirm-seed-phrase.container.js @@ -0,0 +1,23 @@ +import { connect } from 'react-redux' +import ConfirmSeedPhrase from './confirm-seed-phrase.component' +import { + setSeedPhraseBackedUp, + hideSeedPhraseBackupAfterOnboarding, +} from '../../../../store/actions' + +const mapStateToProps = state => { + const { appState: { showingSeedPhraseBackupAfterOnboarding } } = state + + return { + showingSeedPhraseBackupAfterOnboarding, + } +} + +const mapDispatchToProps = dispatch => { + return { + setSeedPhraseBackedUp: (seedPhraseBackupState) => dispatch(setSeedPhraseBackedUp(seedPhraseBackupState)), + hideSeedPhraseBackupAfterOnboarding: () => dispatch(hideSeedPhraseBackupAfterOnboarding()), + } +} + +export default connect(mapStateToProps, mapDispatchToProps)(ConfirmSeedPhrase) diff --git a/ui/app/pages/first-time-flow/seed-phrase/confirm-seed-phrase/index.js b/ui/app/pages/first-time-flow/seed-phrase/confirm-seed-phrase/index.js index c7b511503..beb53b383 100644 --- a/ui/app/pages/first-time-flow/seed-phrase/confirm-seed-phrase/index.js +++ b/ui/app/pages/first-time-flow/seed-phrase/confirm-seed-phrase/index.js @@ -1 +1 @@ -export { default } from './confirm-seed-phrase.component' +export { default } from './confirm-seed-phrase.container' diff --git a/ui/app/pages/first-time-flow/seed-phrase/reveal-seed-phrase/index.js b/ui/app/pages/first-time-flow/seed-phrase/reveal-seed-phrase/index.js index 4a1b191b5..a528f95a2 100644 --- a/ui/app/pages/first-time-flow/seed-phrase/reveal-seed-phrase/index.js +++ b/ui/app/pages/first-time-flow/seed-phrase/reveal-seed-phrase/index.js @@ -1 +1 @@ -export { default } from './reveal-seed-phrase.component' +export { default } from './reveal-seed-phrase.container' diff --git a/ui/app/pages/first-time-flow/seed-phrase/reveal-seed-phrase/index.scss b/ui/app/pages/first-time-flow/seed-phrase/reveal-seed-phrase/index.scss index 8a47447ed..dfe9868cf 100644 --- a/ui/app/pages/first-time-flow/seed-phrase/reveal-seed-phrase/index.scss +++ b/ui/app/pages/first-time-flow/seed-phrase/reveal-seed-phrase/index.scss @@ -1,4 +1,12 @@ .reveal-seed-phrase { + @media screen and (max-width: 576px) { + display: flex; + flex-direction: column; + width: 96%; + margin-left: 2%; + margin-right: 2%; + } + &__secret { position: relative; display: flex; @@ -54,4 +62,12 @@ button { margin-top: 0xp; } + + &__buttons { + display: flex; + + .first-time-flow__button:last-of-type { + margin-left: 20px; + } + } } diff --git a/ui/app/pages/first-time-flow/seed-phrase/reveal-seed-phrase/reveal-seed-phrase.component.js b/ui/app/pages/first-time-flow/seed-phrase/reveal-seed-phrase/reveal-seed-phrase.component.js index 4e9948a0e..78981bae8 100644 --- a/ui/app/pages/first-time-flow/seed-phrase/reveal-seed-phrase/reveal-seed-phrase.component.js +++ b/ui/app/pages/first-time-flow/seed-phrase/reveal-seed-phrase/reveal-seed-phrase.component.js @@ -3,7 +3,7 @@ import PropTypes from 'prop-types' import classnames from 'classnames' import LockIcon from '../../../../components/ui/lock-icon' import Button from '../../../../components/ui/button' -import { INITIALIZE_CONFIRM_SEED_PHRASE_ROUTE } from '../../../../helpers/constants/routes' +import { INITIALIZE_CONFIRM_SEED_PHRASE_ROUTE, DEFAULT_ROUTE } from '../../../../helpers/constants/routes' import { exportAsFile } from '../../../../helpers/utils/util' export default class RevealSeedPhrase extends PureComponent { @@ -15,6 +15,8 @@ export default class RevealSeedPhrase extends PureComponent { static propTypes = { history: PropTypes.object, seedPhrase: PropTypes.string, + setSeedPhraseBackedUp: PropTypes.func, + setCompletedOnboarding: PropTypes.func, } state = { @@ -45,6 +47,24 @@ export default class RevealSeedPhrase extends PureComponent { history.push(INITIALIZE_CONFIRM_SEED_PHRASE_ROUTE) } + handleSkip = event => { + event.preventDefault() + const { history, setSeedPhraseBackedUp, setCompletedOnboarding } = this.props + + this.context.metricsEvent({ + eventOpts: { + category: 'Onboarding', + action: 'Seed Phrase Setup', + name: 'Remind me later', + }, + }) + + Promise.all([setCompletedOnboarding(), setSeedPhraseBackedUp(false)]) + .then(() => { + history.push(DEFAULT_ROUTE) + }) + } + renderSecretWordsContainer () { const { t } = this.context const { seedPhrase } = this.props @@ -129,14 +149,23 @@ export default class RevealSeedPhrase extends PureComponent { </div> </div> </div> - <Button - type="primary" - className="first-time-flow__button" - onClick={this.handleNext} - disabled={!isShowingSeedPhrase} - > - { t('next') } - </Button> + <div className="reveal-seed-phrase__buttons"> + <Button + type="secondary" + className="first-time-flow__button" + onClick={this.handleSkip} + > + { t('remindMeLater') } + </Button> + <Button + type="primary" + className="first-time-flow__button" + onClick={this.handleNext} + disabled={!isShowingSeedPhrase} + > + { t('next') } + </Button> + </div> </div> ) } diff --git a/ui/app/pages/first-time-flow/seed-phrase/reveal-seed-phrase/reveal-seed-phrase.container.js b/ui/app/pages/first-time-flow/seed-phrase/reveal-seed-phrase/reveal-seed-phrase.container.js new file mode 100644 index 000000000..7ada36afc --- /dev/null +++ b/ui/app/pages/first-time-flow/seed-phrase/reveal-seed-phrase/reveal-seed-phrase.container.js @@ -0,0 +1,15 @@ +import { connect } from 'react-redux' +import RevealSeedPhrase from './reveal-seed-phrase.component' +import { + setCompletedOnboarding, + setSeedPhraseBackedUp, +} from '../../../../store/actions' + +const mapDispatchToProps = dispatch => { + return { + setSeedPhraseBackedUp: (seedPhraseBackupState) => dispatch(setSeedPhraseBackedUp(seedPhraseBackupState)), + setCompletedOnboarding: () => dispatch(setCompletedOnboarding()), + } +} + +export default connect(null, mapDispatchToProps)(RevealSeedPhrase) diff --git a/ui/app/pages/first-time-flow/seed-phrase/seed-phrase.component.js b/ui/app/pages/first-time-flow/seed-phrase/seed-phrase.component.js index 0b19af18c..ae38757d9 100644 --- a/ui/app/pages/first-time-flow/seed-phrase/seed-phrase.component.js +++ b/ui/app/pages/first-time-flow/seed-phrase/seed-phrase.component.js @@ -6,45 +6,48 @@ import ConfirmSeedPhrase from './confirm-seed-phrase' import { INITIALIZE_SEED_PHRASE_ROUTE, INITIALIZE_CONFIRM_SEED_PHRASE_ROUTE, + INITIALIZE_BACKUP_SEED_PHRASE_ROUTE, DEFAULT_ROUTE, } from '../../../helpers/constants/routes' import HTML5Backend from 'react-dnd-html5-backend' import {DragDropContextProvider} from 'react-dnd' +import MetaFoxLogo from '../../../components/ui/metafox-logo' export default class SeedPhrase extends PureComponent { static propTypes = { address: PropTypes.string, history: PropTypes.object, seedPhrase: PropTypes.string, + verifySeedPhrase: PropTypes.func, + } + + state = { + verifiedSeedPhrase: '', } componentDidMount () { - const { seedPhrase, history } = this.props + const { seedPhrase, history, verifySeedPhrase } = this.props if (!seedPhrase) { - history.push(DEFAULT_ROUTE) + verifySeedPhrase() + .then(verifiedSeedPhrase => { + if (!verifiedSeedPhrase) { + history.push(DEFAULT_ROUTE) + } else { + this.setState({ verifiedSeedPhrase }) + } + }) } } render () { const { seedPhrase } = this.props + const { verifiedSeedPhrase } = this.state return ( <DragDropContextProvider backend={HTML5Backend}> <div className="first-time-flow__wrapper"> - <div className="app-header__logo-container"> - <img - className="app-header__metafox-logo app-header__metafox-logo--horizontal" - src="/images/logo/metamask-logo-horizontal.svg" - height={30} - /> - <img - className="app-header__metafox-logo app-header__metafox-logo--icon" - src="/images/logo/metamask-fox.svg" - height={42} - width={42} - /> - </div> + <MetaFoxLogo /> <Switch> <Route exact @@ -52,7 +55,7 @@ export default class SeedPhrase extends PureComponent { render={props => ( <ConfirmSeedPhrase { ...props } - seedPhrase={seedPhrase} + seedPhrase={seedPhrase || verifiedSeedPhrase} /> )} /> @@ -62,7 +65,17 @@ export default class SeedPhrase extends PureComponent { render={props => ( <RevealSeedPhrase { ...props } - seedPhrase={seedPhrase} + seedPhrase={seedPhrase || verifiedSeedPhrase} + /> + )} + /> + <Route + exact + path={INITIALIZE_BACKUP_SEED_PHRASE_ROUTE} + render={props => ( + <RevealSeedPhrase + { ...props } + seedPhrase={seedPhrase || verifiedSeedPhrase} /> )} /> diff --git a/ui/app/pages/first-time-flow/seed-phrase/tests/confirm-seed-phrase-component.test.js b/ui/app/pages/first-time-flow/seed-phrase/tests/confirm-seed-phrase-component.test.js index 8339a6f6f..3d5f7f066 100644 --- a/ui/app/pages/first-time-flow/seed-phrase/tests/confirm-seed-phrase-component.test.js +++ b/ui/app/pages/first-time-flow/seed-phrase/tests/confirm-seed-phrase-component.test.js @@ -131,7 +131,7 @@ describe('ConfirmSeedPhrase Component', () => { assert.deepEqual(root.state().pendingSeedIndices, [2, 0, 1]) }) - it('should submit correctly', () => { + it('should submit correctly', async () => { const originalSeed = ['ιΌ ', 'η', 'θ', 'ε
', 'ιΎ', 'θ', '馬', 'ηΎ', 'η΄', 'ι', 'η', '豬'] const metricsEventSpy = sinon.spy() const pushSpy = sinon.spy() @@ -139,6 +139,7 @@ describe('ConfirmSeedPhrase Component', () => { { seedPhrase: 'ιΌ η θ ε
ιΎ θ 馬 ηΎ η΄ ι η 豬', history: { push: pushSpy }, + setSeedPhraseBackedUp: () => Promise.resolve(), }, { metricsEvent: metricsEventSpy, @@ -157,6 +158,9 @@ describe('ConfirmSeedPhrase Component', () => { root.update() root.find('.first-time-flow__button').simulate('click') + + await (new Promise(resolve => setTimeout(resolve, 100))) + assert.deepEqual(metricsEventSpy.args[0][0], { eventOpts: { category: 'Onboarding', diff --git a/ui/app/pages/first-time-flow/select-action/select-action.component.js b/ui/app/pages/first-time-flow/select-action/select-action.component.js index 5af29a505..5379952f1 100644 --- a/ui/app/pages/first-time-flow/select-action/select-action.component.js +++ b/ui/app/pages/first-time-flow/select-action/select-action.component.js @@ -1,6 +1,7 @@ import React, { PureComponent } from 'react' import PropTypes from 'prop-types' import Button from '../../../components/ui/button' +import MetaFoxLogo from '../../../components/ui/metafox-logo' import { INITIALIZE_METAMETRICS_OPT_IN_ROUTE, } from '../../../helpers/constants/routes' @@ -39,20 +40,8 @@ export default class SelectAction extends PureComponent { const { t } = this.context return ( - <div className="select-action"> - <div className="app-header__logo-container"> - <img - className="app-header__metafox-logo app-header__metafox-logo--horizontal" - src="/images/logo/metamask-logo-horizontal.svg" - height={30} - /> - <img - className="app-header__metafox-logo app-header__metafox-logo--icon" - src="/images/logo/metamask-fox.svg" - height={42} - width={42} - /> - </div> + <div className="select-action"> + <MetaFoxLogo /> <div className="select-action__wrapper"> @@ -106,7 +95,7 @@ export default class SelectAction extends PureComponent { </div> </div> - </div> + </div> ) } } |