Shuffle tokens

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 = {
+  constructor(props) {
-    isShowingSecret: false,
+    super(props)
-    page: BackupPhraseScreen.PAGE.SECRET,
+    this.state = {
-    selectedSeeds: []
+      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 { selectedSeeds, shuffledSeeds } = this.state;
-    const isValid = seedWords === selectedSeeds.join(' ')
+    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) => {
+            {shuffledSeeds.map((word, i) => {
-              const isSelected = selectedSeeds.includes(word)
+              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(
+export default compose(
-  ({ metamask: { selectedAddress, seedWords }, appState: { isLoading } }) => ({
+  onlyUpdateForPropTypes,
-    seedWords,
+  connect(
-    isLoading,
+    ({ metamask: { selectedAddress, seedWords }, appState: { isLoading } }) => ({
-    address: selectedAddress
+      seedWords,
-  }),
+      isLoading,
-  dispatch => ({
+      address: selectedAddress
-    confirmSeedWords: () => dispatch(confirmSeedWords())
+    }),
-  })
+    dispatch => ({
+      confirmSeedWords: () => dispatch(confirmSeedWords())
+    })
+  )
 )(BackupPhraseScreen)

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

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",

ui/app/app.js

@@ -440,9 +440,9 @@ App.prototype.renderPrimary = function () {
   var props = this.props
   const {isMascara, isOnboarding} = props
 
-  // if (isMascara && isOnboarding) {
+  if (isMascara && isOnboarding) {
-  //   return h(MascaraFirstTime)
+    return h(MascaraFirstTime)
-  // }
+  }
 
   // notices
   if (!props.noActiveNotices) {