From d9ea2df6c2a2cabedead09f90c3c9bb7b4c37dd1 Mon Sep 17 00:00:00 2001 From: Alexander Tseung Date: Mon, 4 Dec 2017 14:29:52 -0500 Subject: Add route for Mascara confirm seed --- mascara/src/app/first-time/confirm-seed-screen.js | 133 ++++++++++++++++++++++ 1 file changed, 133 insertions(+) create mode 100644 mascara/src/app/first-time/confirm-seed-screen.js (limited to 'mascara/src/app/first-time/confirm-seed-screen.js') diff --git a/mascara/src/app/first-time/confirm-seed-screen.js b/mascara/src/app/first-time/confirm-seed-screen.js new file mode 100644 index 000000000..6b730a2f8 --- /dev/null +++ b/mascara/src/app/first-time/confirm-seed-screen.js @@ -0,0 +1,133 @@ +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' + +class ConfirmSeedScreen 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: '', + } + + constructor (props) { + super(props) + const { seedWords } = props + this.state = { + selectedSeeds: [], + shuffledSeeds: seedWords && shuffle(seedWords.split(' ')), + } + } + + componentWillMount () { + const { seedWords, history } = this.props + if (!seedWords) { + history.push(DEFAULT_ROUTE) + } + } + + render () { + const { seedWords, confirmSeedWords, history } = this.props + const { selectedSeeds, shuffledSeeds } = this.state + const isValid = seedWords === selectedSeeds.map(([_, seed]) => seed).join(' ') + + return ( +
+ { + this.props.isLoading + ? + : ( +
+ +
+
+
+ Confirm your Secret Backup Phrase +
+
+ Please select each phrase in order to make sure it is correct. +
+
+ {selectedSeeds.map(([_, word], i) => ( + + ))} +
+
+ {shuffledSeeds.map((word, i) => { + const isSelected = selectedSeeds + .filter(([index, seed]) => seed === word && index === i) + .length + + return ( + + ) + })} +
+ +
+
+ +
+ ) + } +
+ ) + } +} + +export default compose( + onlyUpdateForPropTypes, + connect( + ({ metamask: { selectedAddress, seedWords }, appState: { isLoading } }) => ({ + seedWords, + isLoading, + address: selectedAddress, + }), + dispatch => ({ + confirmSeedWords: () => dispatch(confirmSeedWords()), + }) + ) +)(ConfirmSeedScreen) -- cgit From 706a6b0ad6d7b6e2d56252f17713e63430d84abc Mon Sep 17 00:00:00 2001 From: Alexander Tseung Date: Mon, 4 Dec 2017 15:13:02 -0500 Subject: Add initialized checks for first time flow routes --- mascara/src/app/first-time/confirm-seed-screen.js | 8 ++++---- 1 file changed, 4 insertions(+), 4 deletions(-) (limited to 'mascara/src/app/first-time/confirm-seed-screen.js') diff --git a/mascara/src/app/first-time/confirm-seed-screen.js b/mascara/src/app/first-time/confirm-seed-screen.js index 6b730a2f8..c9382689e 100644 --- a/mascara/src/app/first-time/confirm-seed-screen.js +++ b/mascara/src/app/first-time/confirm-seed-screen.js @@ -12,10 +12,10 @@ import { DEFAULT_ROUTE } from '../../../../ui/app/routes' class ConfirmSeedScreen extends Component { static propTypes = { - isLoading: PropTypes.bool.isRequired, - address: PropTypes.string.isRequired, + isLoading: PropTypes.bool, + address: PropTypes.string, seedWords: PropTypes.string, - confirmSeedWords: PropTypes.func.isRequired, + confirmSeedWords: PropTypes.func, history: PropTypes.object, }; @@ -28,7 +28,7 @@ class ConfirmSeedScreen extends Component { const { seedWords } = props this.state = { selectedSeeds: [], - shuffledSeeds: seedWords && shuffle(seedWords.split(' ')), + shuffledSeeds: seedWords && shuffle(seedWords.split(' ')) || [], } } -- cgit From 6277a4c46aa2fd94f0fff047aff346d7f255224d Mon Sep 17 00:00:00 2001 From: Alexander Tseung Date: Mon, 2 Apr 2018 02:59:49 -0700 Subject: Refactor onboarding flow --- mascara/src/app/first-time/confirm-seed-screen.js | 129 ++++++++++++---------- 1 file changed, 71 insertions(+), 58 deletions(-) (limited to 'mascara/src/app/first-time/confirm-seed-screen.js') diff --git a/mascara/src/app/first-time/confirm-seed-screen.js b/mascara/src/app/first-time/confirm-seed-screen.js index c9382689e..6eabd7544 100644 --- a/mascara/src/app/first-time/confirm-seed-screen.js +++ b/mascara/src/app/first-time/confirm-seed-screen.js @@ -1,14 +1,15 @@ import React, { Component } from 'react' import PropTypes from 'prop-types' import { connect } from 'react-redux' +import { withRouter } from 'react-router-dom' import classnames from 'classnames' import shuffle from 'lodash.shuffle' -import { compose, onlyUpdateForPropTypes } from 'recompose' +import { compose } 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' +import { INITIALIZE_ROUTE, DEFAULT_ROUTE } from '../../../../ui/app/routes' class ConfirmSeedScreen extends Component { static propTypes = { @@ -35,10 +36,18 @@ class ConfirmSeedScreen extends Component { componentWillMount () { const { seedWords, history } = this.props if (!seedWords) { - history.push(DEFAULT_ROUTE) + history.push(INITIALIZE_ROUTE) } } + handleClick () { + this.props.confirmSeedWords() + .then(() => { + console.log('FINISHED') + this.props.history.push(DEFAULT_ROUTE) + }) + } + render () { const { seedWords, confirmSeedWords, history } = this.props const { selectedSeeds, shuffledSeeds } = this.state @@ -50,66 +59,70 @@ class ConfirmSeedScreen extends Component { this.props.isLoading ? : ( -
- -
-
-
- Confirm your Secret Backup Phrase -
-
- Please select each phrase in order to make sure it is correct. -
-
- {selectedSeeds.map(([_, word], i) => ( +
+
+
+ +
+
+
+ Confirm your Secret Backup Phrase +
+
+ Please select each phrase in order to make sure it is correct. +
+
+ {selectedSeeds.map(([_, word], i) => ( + + ))} +
+
+ {shuffledSeeds.map((word, i) => { + const isSelected = selectedSeeds + .filter(([index, seed]) => seed === word && index === i) + .length + + return ( + + ) + })} +
- ))} -
-
- {shuffledSeeds.map((word, i) => { - const isSelected = selectedSeeds - .filter(([index, seed]) => seed === word && index === i) - .length - - return ( - - ) - })} +
- +
-
) } @@ -119,7 +132,7 @@ class ConfirmSeedScreen extends Component { } export default compose( - onlyUpdateForPropTypes, + withRouter, connect( ({ metamask: { selectedAddress, seedWords }, appState: { isLoading } }) => ({ seedWords, -- cgit From 516c1869b0f366a42282a66e14185ce630f883dd Mon Sep 17 00:00:00 2001 From: Alexander Tseung Date: Mon, 2 Apr 2018 16:24:37 -0700 Subject: Fix lint errors --- mascara/src/app/first-time/confirm-seed-screen.js | 16 ++++++++-------- 1 file changed, 8 insertions(+), 8 deletions(-) (limited to 'mascara/src/app/first-time/confirm-seed-screen.js') diff --git a/mascara/src/app/first-time/confirm-seed-screen.js b/mascara/src/app/first-time/confirm-seed-screen.js index 6eabd7544..359e3d7fa 100644 --- a/mascara/src/app/first-time/confirm-seed-screen.js +++ b/mascara/src/app/first-time/confirm-seed-screen.js @@ -9,7 +9,7 @@ import Identicon from '../../../../ui/app/components/identicon' import { confirmSeedWords } from '../../../../ui/app/actions' import Breadcrumbs from './breadcrumbs' import LoadingScreen from './loading-screen' -import { INITIALIZE_ROUTE, DEFAULT_ROUTE } from '../../../../ui/app/routes' +import { DEFAULT_ROUTE } from '../../../../ui/app/routes' class ConfirmSeedScreen extends Component { static propTypes = { @@ -35,21 +35,21 @@ class ConfirmSeedScreen extends Component { componentWillMount () { const { seedWords, history } = this.props + if (!seedWords) { - history.push(INITIALIZE_ROUTE) + history.push(DEFAULT_ROUTE) } } handleClick () { - this.props.confirmSeedWords() - .then(() => { - console.log('FINISHED') - this.props.history.push(DEFAULT_ROUTE) - }) + const { confirmSeedWords, history } = this.props + + confirmSeedWords() + .then(() => history.push(DEFAULT_ROUTE)) } render () { - const { seedWords, confirmSeedWords, history } = this.props + const { seedWords } = this.props const { selectedSeeds, shuffledSeeds } = this.state const isValid = seedWords === selectedSeeds.map(([_, seed]) => seed).join(' ') -- cgit From 037d6e66248d2fc13a9d97a52ce667afe1aa2ae8 Mon Sep 17 00:00:00 2001 From: Alexander Tseung Date: Wed, 4 Apr 2018 18:21:30 -0700 Subject: Fix integration tests --- mascara/src/app/first-time/confirm-seed-screen.js | 11 ++++++++--- 1 file changed, 8 insertions(+), 3 deletions(-) (limited to 'mascara/src/app/first-time/confirm-seed-screen.js') diff --git a/mascara/src/app/first-time/confirm-seed-screen.js b/mascara/src/app/first-time/confirm-seed-screen.js index 359e3d7fa..438f383b1 100644 --- a/mascara/src/app/first-time/confirm-seed-screen.js +++ b/mascara/src/app/first-time/confirm-seed-screen.js @@ -6,7 +6,7 @@ import classnames from 'classnames' import shuffle from 'lodash.shuffle' import { compose } from 'recompose' import Identicon from '../../../../ui/app/components/identicon' -import { confirmSeedWords } from '../../../../ui/app/actions' +import { confirmSeedWords, showModal } from '../../../../ui/app/actions' import Breadcrumbs from './breadcrumbs' import LoadingScreen from './loading-screen' import { DEFAULT_ROUTE } from '../../../../ui/app/routes' @@ -18,6 +18,7 @@ class ConfirmSeedScreen extends Component { seedWords: PropTypes.string, confirmSeedWords: PropTypes.func, history: PropTypes.object, + openBuyEtherModal: PropTypes.func, }; static defaultProps = { @@ -42,10 +43,13 @@ class ConfirmSeedScreen extends Component { } handleClick () { - const { confirmSeedWords, history } = this.props + const { confirmSeedWords, history, openBuyEtherModal } = this.props confirmSeedWords() - .then(() => history.push(DEFAULT_ROUTE)) + .then(() => { + history.push(DEFAULT_ROUTE) + openBuyEtherModal() + }) } render () { @@ -141,6 +145,7 @@ export default compose( }), dispatch => ({ confirmSeedWords: () => dispatch(confirmSeedWords()), + openBuyEtherModal: () => dispatch(showModal({ name: 'DEPOSIT_ETHER'})), }) ) )(ConfirmSeedScreen) -- cgit