From f503120b82c108efae0a4fc1282a43721d961ca2 Mon Sep 17 00:00:00 2001
From: Chi Kei Chan <chikeichan@gmail.com>
Date: Fri, 20 Oct 2017 22:31:59 -0700
Subject: [PATCH] Add Import With Seed Phrase

---
 .../app/first-time/create-password-screen.js  |  13 ++-
 .../first-time/import-seed-phrase-screen.js   | 103 ++++++++++++++++++
 mascara/src/app/first-time/index.css          |  10 +-
 mascara/src/app/first-time/index.js           |  11 +-
 ui/app/actions.js                             |  18 ++-
 yarn.lock                                     |  20 ++--
 6 files changed, 156 insertions(+), 19 deletions(-)
 create mode 100644 mascara/src/app/first-time/import-seed-phrase-screen.js

diff --git a/mascara/src/app/first-time/create-password-screen.js b/mascara/src/app/first-time/create-password-screen.js
index a1816b88c..2f4b81e7c 100644
--- a/mascara/src/app/first-time/create-password-screen.js
+++ b/mascara/src/app/first-time/create-password-screen.js
@@ -8,6 +8,7 @@ class CreatePasswordScreen extends Component {
   static propTypes = {
     isLoading: PropTypes.bool.isRequired,
     createAccount: PropTypes.func.isRequired,
+    goToImportWithSeedPhrase: PropTypes.func.isRequired,
     goToImportAccount: PropTypes.func.isRequired,
     next: PropTypes.func.isRequired
   }
@@ -44,7 +45,7 @@ class CreatePasswordScreen extends Component {
   }
 
   render() {
-    const { isLoading, goToImportAccount } = this.props
+    const { isLoading, goToImportAccount, goToImportWithSeedPhrase } = this.props
 
     return isLoading
       ? <LoadingScreen loadingMessage="Creating your new account" />
@@ -72,6 +73,16 @@ class CreatePasswordScreen extends Component {
           >
             Create
           </button>
+          <a
+            href=""
+            className="first-time-flow__link create-password__import-link"
+            onClick={e => {
+              e.preventDefault()
+              goToImportWithSeedPhrase()
+            }}
+          >
+            Import with seed phrase
+          </a>
           { /* }
           <a
             href=""
diff --git a/mascara/src/app/first-time/import-seed-phrase-screen.js b/mascara/src/app/first-time/import-seed-phrase-screen.js
new file mode 100644
index 000000000..d2eed61b7
--- /dev/null
+++ b/mascara/src/app/first-time/import-seed-phrase-screen.js
@@ -0,0 +1,103 @@
+import React, {Component, PropTypes} from 'react'
+import {connect} from 'react-redux'
+import LoadingScreen from './loading-screen'
+import {createNewVaultAndRestore, hideWarning} from '../../../../ui/app/actions'
+
+class ImportSeedPhraseScreen extends Component {
+  static propTypes = {
+    warning: PropTypes.string,
+    back: PropTypes.func.isRequired,
+    next: PropTypes.func.isRequired,
+    createNewVaultAndRestore: PropTypes.func.isRequired,
+    hideWarning: PropTypes.func.isRequired,
+    isLoading: PropTypes.bool.isRequired,
+  };
+
+  state = {
+    seedPhrase: '',
+    password: '',
+    confirmPassword: '',
+  }
+
+  onClick = () => {
+    const { password, seedPhrase } = this.state
+    const { createNewVaultAndRestore, next } = this.props
+
+    createNewVaultAndRestore(password, seedPhrase)
+      .then(next)
+  }
+
+  isValid () {
+    const { seedPhrase, password, confirmPassword } = this.state
+
+    if (seedPhrase.split(' ').length !== 12) {
+      return false
+    }
+
+    if (password.length < 8) {
+      return false
+    }
+
+    if (password !== confirmPassword) {
+      return false
+    }
+
+    return true
+  }
+
+  render () {
+    return this.props.isLoading
+      ? <LoadingScreen loadingMessage="Creating your new account" />
+      : (
+        <div className="import-account">
+          <a
+            className="import-account__back-button"
+            onClick={e => {
+              e.preventDefault()
+              this.props.back()
+            }}
+            href="#"
+          >
+            {`< Back`}
+          </a>
+          <div className="import-account__title">
+            Import an Account with Seed Phrase
+          </div>
+          <div className="import-account__selector-label">
+            Enter your secret twelve word phrase here to restore your vault.
+          </div>
+          <textarea
+            className="import-account__secret-phrase"
+            onChange={e => this.setState({seedPhrase: e.target.value})}
+          />
+          <input
+            className="first-time-flow__input"
+            type="password"
+            placeholder="New Password (min 8 characters)"
+            onChange={e => this.setState({password: e.target.value})}
+          />
+          <input
+            className="first-time-flow__input create-password__confirm-input"
+            type="password"
+            placeholder="Confirm Password"
+            onChange={e => this.setState({confirmPassword: e.target.value})}
+          />
+          <button
+            className="first-time-flow__button"
+            onClick={this.onClick}
+            disabled={!this.isValid()}
+          >
+            Import
+          </button>
+        </div>
+      )
+  }
+}
+
+export default connect(
+  ({ appState: { isLoading, warning } }) => ({ isLoading, warning }),
+  dispatch => ({
+    createNewVaultAndRestore: (pw, seed) => dispatch(createNewVaultAndRestore(pw, seed)),
+    hideWarning: () => dispatch(hideWarning()),
+  })
+)(ImportSeedPhraseScreen)
diff --git a/mascara/src/app/first-time/index.css b/mascara/src/app/first-time/index.css
index 7d993a04a..28aa3060a 100644
--- a/mascara/src/app/first-time/index.css
+++ b/mascara/src/app/first-time/index.css
@@ -78,7 +78,8 @@
     width: initial !important; 
   }
 
-  .backup-phrase__confirm-secret {
+  .backup-phrase__confirm-secret,
+  .import-account__secret-phrase {
     width: initial !important;
     height: initial !important;
     min-height: 190px;
@@ -266,7 +267,8 @@ button.backup-phrase__reveal-button:hover {
   transform: scale(1);
 }
 
-.backup-phrase__confirm-secret {
+.backup-phrase__confirm-secret,
+.import-account__secret-phrase {
   height: 190px;
   width: 495px;
   border: 1px solid #CDCDCD;
@@ -276,6 +278,10 @@ button.backup-phrase__reveal-button:hover {
   padding: 17px;
 }
 
+.import-account__secret-phrase {
+  font-size: 16px;
+}
+
 .backup-phrase__confirm-seed-options {
   display: flex;
   flex-flow: row wrap;
diff --git a/mascara/src/app/first-time/index.js b/mascara/src/app/first-time/index.js
index 6035db5c2..66b591bd8 100644
--- a/mascara/src/app/first-time/index.js
+++ b/mascara/src/app/first-time/index.js
@@ -5,7 +5,7 @@ import UniqueImageScreen from './unique-image-screen'
 import NoticeScreen from './notice-screen'
 import BackupPhraseScreen from './backup-phrase-screen'
 import ImportAccountScreen from './import-account-screen'
-import BuyEtherScreen from './buy-ether-screen'
+import ImportSeedPhraseScreen from './import-seed-phrase-screen'
 import {onboardingBuyEthView} from '../../../../ui/app/actions'
 
 class FirstTimeFlow extends Component {
@@ -27,6 +27,7 @@ class FirstTimeFlow extends Component {
   static SCREEN_TYPE = {
     CREATE_PASSWORD: 'create_password',
     IMPORT_ACCOUNT: 'import_account',
+    IMPORT_SEED_PHRASE: 'import_seed_phrase',
     UNIQUE_IMAGE: 'unique_image',
     NOTICE: 'notice',
     BACK_UP_PHRASE: 'back_up_phrase',
@@ -77,6 +78,7 @@ class FirstTimeFlow extends Component {
           <CreatePasswordScreen
             next={() => this.setScreenType(SCREEN_TYPE.UNIQUE_IMAGE)}
             goToImportAccount={() => this.setScreenType(SCREEN_TYPE.IMPORT_ACCOUNT)}
+            goToImportWithSeedPhrase={() => this.setScreenType(SCREEN_TYPE.IMPORT_SEED_PHRASE)}
           />
         )
       case SCREEN_TYPE.IMPORT_ACCOUNT:
@@ -86,6 +88,13 @@ class FirstTimeFlow extends Component {
             next={() => this.setScreenType(SCREEN_TYPE.NOTICE)}
           />
         )
+      case SCREEN_TYPE.IMPORT_SEED_PHRASE:
+        return (
+          <ImportSeedPhraseScreen
+            back={() => this.setScreenType(SCREEN_TYPE.CREATE_PASSWORD)}
+            next={() => this.setScreenType(SCREEN_TYPE.NOTICE)}
+          />
+        )
       case SCREEN_TYPE.UNIQUE_IMAGE:
         return (
           <UniqueImageScreen
diff --git a/ui/app/actions.js b/ui/app/actions.js
index 41b4494ad..04fd35b20 100644
--- a/ui/app/actions.js
+++ b/ui/app/actions.js
@@ -238,10 +238,20 @@ function createNewVaultAndRestore (password, seed) {
   return (dispatch) => {
     dispatch(actions.showLoadingIndication())
     log.debug(`background.createNewVaultAndRestore`)
-    background.createNewVaultAndRestore(password, seed, (err) => {
-      dispatch(actions.hideLoadingIndication())
-      if (err) return dispatch(actions.displayWarning(err.message))
-      dispatch(actions.showAccountsPage())
+
+    return new Promise((resolve, reject) => {
+      background.createNewVaultAndRestore(password, seed, (err) => {
+
+        dispatch(actions.hideLoadingIndication())
+
+        if (err) {
+          dispatch(actions.displayWarning(err.message))
+          return reject(err)
+        }
+
+        dispatch(actions.showAccountsPage())
+        resolve()
+      })
     })
   }
 }
diff --git a/yarn.lock b/yarn.lock
index c37e3ca4b..428a56c99 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -3237,9 +3237,9 @@ eth-hd-keyring@^1.2.1:
     ethereumjs-wallet "^0.6.0"
     events "^1.1.1"
 
-eth-json-rpc-filters@^1.2.2:
-  version "1.2.3"
-  resolved "https://registry.yarnpkg.com/eth-json-rpc-filters/-/eth-json-rpc-filters-1.2.3.tgz#6ad6db134d1fc84c4d0b60f9faf19b70d300ae1e"
+eth-json-rpc-filters@^1.2.4:
+  version "1.2.4"
+  resolved "https://registry.yarnpkg.com/eth-json-rpc-filters/-/eth-json-rpc-filters-1.2.4.tgz#716109b1cf4d0ec01f30f848d65c60c34400e975"
   dependencies:
     await-semaphore "^0.1.1"
     eth-json-rpc-middleware "^1.0.0"
@@ -3261,9 +3261,9 @@ eth-json-rpc-middleware@^1.0.0, eth-json-rpc-middleware@^1.2.7:
     promise-to-callback "^1.0.0"
     tape "^4.6.3"
 
-eth-keyring-controller@^2.1.0:
-  version "2.1.1"
-  resolved "https://registry.yarnpkg.com/eth-keyring-controller/-/eth-keyring-controller-2.1.1.tgz#08129c8300f0ac6de9110e0b8d51292b5c6327e3"
+eth-keyring-controller@^2.1.2:
+  version "2.1.2"
+  resolved "https://registry.yarnpkg.com/eth-keyring-controller/-/eth-keyring-controller-2.1.2.tgz#1af179d8fd7ff470eb91e113a0fd3a440bd66bcc"
   dependencies:
     bip39 "^2.4.0"
     bluebird "^3.5.0"
@@ -7845,14 +7845,12 @@ samsam@1.x, samsam@^1.1.3:
   version "1.2.1"
   resolved "https://registry.yarnpkg.com/samsam/-/samsam-1.2.1.tgz#edd39093a3184370cb859243b2bdf255e7d8ea67"
 
-sandwich-expando@^1.0.5:
-  version "1.1.1"
-  resolved "https://registry.yarnpkg.com/sandwich-expando/-/sandwich-expando-1.1.1.tgz#83806fcca2375af8b6c30e6f52ed4f989debb165"
+sandwich-expando@^1.1.3:
+  version "1.1.3"
+  resolved "https://registry.yarnpkg.com/sandwich-expando/-/sandwich-expando-1.1.3.tgz#6ba78d034c32f8bf5ab5934c214f8384614a88a5"
   dependencies:
     babel-preset-es2015 "^6.6.0"
     babelify "^7.3.0"
-    brfs "^1.4.3"
-    raphael "^2.2.0"
     react "^15.0.2"
     react-dom "^15.0.2"
     react-hyperscript "^2.4.0"