diff options
| -rw-r--r-- | mascara/src/app/first-time/backup-phrase-screen.js | 58 | ||||
| -rw-r--r-- | mascara/src/app/first-time/index.js | 2 | ||||
| -rw-r--r-- | package.json | 3 | ||||
| -rw-r--r-- | ui/app/app.js | 6 |
4 files changed, 44 insertions, 25 deletions
diff --git a/mascara/src/app/first-time/backup-phrase-screen.js b/mascara/src/app/first-time/backup-phrase-screen.js index c3a52d94e..52ec79307 100644 --- a/mascara/src/app/first-time/backup-phrase-screen.js +++ b/mascara/src/app/first-time/backup-phrase-screen.js @@ -1,6 +1,8 @@ import React, {Component, PropTypes} from 'react' 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' @@ -41,6 +43,7 @@ class BackupPhraseScreen extends Component { address: PropTypes.string.isRequired, seedWords: PropTypes.string.isRequired, next: PropTypes.func.isRequired, + confirmSeedWords: PropTypes.func.isRequired, }; static defaultProps = { @@ -52,14 +55,19 @@ class BackupPhraseScreen extends Component { CONFIRM: 'confirm' }; - state = { - isShowingSecret: false, - page: BackupPhraseScreen.PAGE.SECRET, - selectedSeeds: [] + constructor(props) { + super(props) + this.state = { + isShowingSecret: false, + page: BackupPhraseScreen.PAGE.SECRET, + selectedSeeds: [], + shuffledSeeds: shuffle(props.seedWords.split(' ')), + } } renderSecretWordsContainer() { - const { isShowingSecret } = this.state; + const { isShowingSecret } = this.state + return ( <div className="backup-phrase__secret"> <div className={classnames('backup-phrase__secret-words', { @@ -84,6 +92,7 @@ class BackupPhraseScreen extends Component { renderSecretScreen() { const { isShowingSecret } = this.state + return ( <div className="backup-phrase__content-wrapper"> <div> @@ -125,8 +134,8 @@ class BackupPhraseScreen extends Component { renderConfirmationScreen() { const { seedWords, confirmSeedWords, next } = this.props; - const { selectedSeeds } = this.state; - const isValid = seedWords === selectedSeeds.join(' ') + const { selectedSeeds, shuffledSeeds } = this.state; + const isValid = seedWords === selectedSeeds.map(([_, seed]) => seed).join(' ') return ( <div className="backup-phrase__content-wrapper"> @@ -136,7 +145,7 @@ class BackupPhraseScreen extends Component { Please select each phrase in order to make sure it is correct. </div> <div className="backup-phrase__confirm-secret"> - {selectedSeeds.map((word, i) => ( + {selectedSeeds.map(([_, word], i) => ( <button key={i} className="backup-phrase__confirm-seed-option" @@ -146,8 +155,11 @@ class BackupPhraseScreen extends Component { ))} </div> <div className="backup-phrase__confirm-seed-options"> - {seedWords.split(' ').map((word, i) => { - const isSelected = selectedSeeds.includes(word) + {shuffledSeeds.map((word, i) => { + const isSelected = selectedSeeds + .filter(([index, seed]) => seed === word && index === i) + .length + return ( <button key={i} @@ -157,11 +169,12 @@ class BackupPhraseScreen extends Component { onClick={() => { if (!isSelected) { this.setState({ - selectedSeeds: [...selectedSeeds, word] + selectedSeeds: [...selectedSeeds, [i, word]] }) } else { this.setState({ - selectedSeeds: selectedSeeds.filter(seed => seed !== word) + selectedSeeds: selectedSeeds + .filter(([index, seed]) => !(seed === word && index === i)) }) } }} @@ -225,13 +238,16 @@ class BackupPhraseScreen extends Component { } } -export default connect( - ({ metamask: { selectedAddress, seedWords }, appState: { isLoading } }) => ({ - seedWords, - isLoading, - address: selectedAddress - }), - dispatch => ({ - confirmSeedWords: () => dispatch(confirmSeedWords()) - }) +export default compose( + onlyUpdateForPropTypes, + connect( + ({ metamask: { selectedAddress, seedWords }, appState: { isLoading } }) => ({ + seedWords, + isLoading, + address: selectedAddress + }), + dispatch => ({ + confirmSeedWords: () => dispatch(confirmSeedWords()) + }) + ) )(BackupPhraseScreen) diff --git a/mascara/src/app/first-time/index.js b/mascara/src/app/first-time/index.js index f6f7ee75f..90f89f380 100644 --- a/mascara/src/app/first-time/index.js +++ b/mascara/src/app/first-time/index.js @@ -52,7 +52,7 @@ class FirstTimeFlow extends Component { } = this.props; const {SCREEN_TYPE} = FirstTimeFlow - // return SCREEN_TYPE.IMPORT_ACCOUNT + // return SCREEN_TYPE.BACK_UP_PHRASE if (!isInitialized) { return SCREEN_TYPE.CREATE_PASSWORD diff --git a/package.json b/package.json index 0e99ce5ca..ac46c58ba 100644 --- a/package.json +++ b/package.json @@ -102,6 +102,9 @@ "jazzicon": "^1.2.0", "json-rpc-engine": "^3.2.0", "json-rpc-middleware-stream": "^1.0.1", + "lodash.debounce": "^4.0.8", + "lodash.memoize": "^4.1.2", + "lodash.shuffle": "^4.2.0", "loglevel": "^1.4.1", "metamascara": "^1.3.1", "metamask-logo": "^2.1.2", diff --git a/ui/app/app.js b/ui/app/app.js index 362d9cf27..36241b942 100644 --- a/ui/app/app.js +++ b/ui/app/app.js @@ -440,9 +440,9 @@ App.prototype.renderPrimary = function () { var props = this.props const {isMascara, isOnboarding} = props - // if (isMascara && isOnboarding) { - // return h(MascaraFirstTime) - // } + if (isMascara && isOnboarding) { + return h(MascaraFirstTime) + } // notices if (!props.noActiveNotices) { |