diff options
Diffstat (limited to 'ui/app/pages/first-time-flow/seed-phrase')
9 files changed, 127 insertions, 18 deletions
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 f4557115a..79cb27c52 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 @@ -17,18 +17,31 @@ export default class SeedPhrase extends PureComponent { 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}> @@ -41,7 +54,7 @@ export default class SeedPhrase extends PureComponent { render={props => ( <ConfirmSeedPhrase { ...props } - seedPhrase={seedPhrase} + seedPhrase={seedPhrase || verifiedSeedPhrase} /> )} /> @@ -51,7 +64,7 @@ export default class SeedPhrase extends PureComponent { render={props => ( <RevealSeedPhrase { ...props } - seedPhrase={seedPhrase} + 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', |