From f262f0ea64e1e803d8dcd9a31f92cffe81d27b3d Mon Sep 17 00:00:00 2001
From: Dan <danjm.com@gmail.com>
Date: Fri, 22 Jun 2018 14:41:18 -0230
Subject: [PATCH 1/2] Update import from seed screen on new ui.

---
 app/_locales/en/messages.json                 |   9 +
 test/e2e/beta/metamask-beta-ui.spec.js        |   9 +-
 ui/app/app.js                                 |   2 +-
 .../pages/keychains/restore-vault-new.js      | 189 ++++++++++++++++++
 .../css/itcss/components/newui-sections.scss  |   9 +
 5 files changed, 214 insertions(+), 4 deletions(-)
 create mode 100644 ui/app/components/pages/keychains/restore-vault-new.js

diff --git a/app/_locales/en/messages.json b/app/_locales/en/messages.json
index 46fbdc1a7..621775592 100644
--- a/app/_locales/en/messages.json
+++ b/app/_locales/en/messages.json
@@ -664,6 +664,9 @@
   "restoreVault": {
     "message": "Restore Vault"
   },
+  "restoreAccountWithSeed": {
+    "message": "Restore your Account with Seed Phrase"
+  },
   "required": {
     "message": "Required"
   },
@@ -673,6 +676,9 @@
   "walletSeed": {
     "message": "Wallet Seed"
   },
+  "restore": {
+    "message": "Restore"
+  },
   "revealSeedWords": {
     "message": "Reveal Seed Words"
   },
@@ -777,6 +783,9 @@
   "sendTokens": {
     "message": "Send Tokens"
   },
+  "separateEachWord": {
+    "message": "Separate each word with a single space"
+  },
   "onlySendToEtherAddress": {
     "message": "Only send ETH to an Ethereum address."
   },
diff --git a/test/e2e/beta/metamask-beta-ui.spec.js b/test/e2e/beta/metamask-beta-ui.spec.js
index 5f270b52b..b07b1ecd7 100644
--- a/test/e2e/beta/metamask-beta-ui.spec.js
+++ b/test/e2e/beta/metamask-beta-ui.spec.js
@@ -355,9 +355,12 @@ describe('MetaMask', function () {
       await seedTextArea.sendKeys(testSeedPhrase)
       await delay(regularDelayMs)
 
-      await driver.findElement(By.id('password-box')).sendKeys('correct horse battery staple')
-      await driver.findElement(By.id('password-box-confirm')).sendKeys('correct horse battery staple')
-      await driver.findElement(By.css('button:nth-child(2)')).click()
+      const passwordInputs = await driver.findElements(By.css('input'))
+      await delay(regularDelayMs)
+
+      passwordInputs[0].sendKeys('correct horse battery staple')
+      passwordInputs[1].sendKeys('correct horse battery staple')
+      await driver.findElement(By.css('.first-time-flow__button')).click()
       await delay(regularDelayMs)
     })
 
diff --git a/ui/app/app.js b/ui/app/app.js
index d0e48a368..3ca18d4ca 100644
--- a/ui/app/app.js
+++ b/ui/app/app.js
@@ -23,7 +23,7 @@ const Authenticated = require('./components/pages/authenticated')
 const Initialized = require('./components/pages/initialized')
 const Settings = require('./components/pages/settings')
 const UnlockPage = require('./components/pages/unlock-page')
-const RestoreVaultPage = require('./components/pages/keychains/restore-vault')
+const RestoreVaultPage = require('./components/pages/keychains/restore-vault-new').default
 const RevealSeedConfirmation = require('./components/pages/keychains/reveal-seed')
 const AddTokenPage = require('./components/pages/add-token')
 const ConfirmAddTokenPage = require('./components/pages/confirm-add-token')
diff --git a/ui/app/components/pages/keychains/restore-vault-new.js b/ui/app/components/pages/keychains/restore-vault-new.js
new file mode 100644
index 000000000..ef38faf1e
--- /dev/null
+++ b/ui/app/components/pages/keychains/restore-vault-new.js
@@ -0,0 +1,189 @@
+import React, { Component } from 'react'
+import PropTypes from 'prop-types'
+import {connect} from 'react-redux'
+import {
+  createNewVaultAndRestore,
+  unMarkPasswordForgotten,
+} from '../../../actions'
+import { DEFAULT_ROUTE } from '../../../routes'
+import TextField from '../../text-field'
+
+class RestoreVaultPageNew extends Component {
+  static contextTypes = {
+    t: PropTypes.func,
+  }
+
+  static propTypes = {
+    warning: PropTypes.string,
+    createNewVaultAndRestore: PropTypes.func.isRequired,
+    leaveImportSeedScreenState: PropTypes.func,
+    history: PropTypes.object,
+    isLoading: PropTypes.bool,
+  };
+
+  state = {
+    seedPhrase: '',
+    password: '',
+    confirmPassword: '',
+    seedPhraseError: null,
+    passwordError: null,
+    confirmPasswordError: null,
+  }
+
+  parseSeedPhrase = (seedPhrase) => {
+    return seedPhrase
+      .match(/\w+/g)
+      .join(' ')
+  }
+
+  handleSeedPhraseChange (seedPhrase) {
+    let seedPhraseError = null
+
+    if (seedPhrase && this.parseSeedPhrase(seedPhrase).split(' ').length !== 12) {
+      seedPhraseError = this.context.t('seedPhraseReq')
+    }
+
+    this.setState({ seedPhrase, seedPhraseError })
+  }
+
+  handlePasswordChange (password) {
+    const { confirmPassword } = this.state
+    let confirmPasswordError = null
+    let passwordError = null
+
+    if (password && password.length < 8) {
+      passwordError = this.context.t('passwordNotLongEnough')
+    }
+
+    if (confirmPassword && password !== confirmPassword) {
+      confirmPasswordError = this.context.t('passwordsDontMatch')
+    }
+
+    this.setState({ password, passwordError, confirmPasswordError })
+  }
+
+  handleConfirmPasswordChange (confirmPassword) {
+    const { password } = this.state
+    let confirmPasswordError = null
+
+    if (password !== confirmPassword) {
+      confirmPasswordError = this.context.t('passwordsDontMatch')
+    }
+
+    this.setState({ confirmPassword, confirmPasswordError })
+  }
+
+  onClick = () => {
+    const { password, seedPhrase } = this.state
+    const {
+      createNewVaultAndRestore,
+      leaveImportSeedScreenState,
+      history,
+    } = this.props
+
+    leaveImportSeedScreenState()
+    createNewVaultAndRestore(password, this.parseSeedPhrase(seedPhrase))
+      .then(() => history.push(DEFAULT_ROUTE))
+  }
+
+  hasError () {
+    const { passwordError, confirmPasswordError, seedPhraseError } = this.state
+    return passwordError || confirmPasswordError || seedPhraseError
+  }
+
+  render () {
+    const {
+      seedPhrase,
+      password,
+      confirmPassword,
+      seedPhraseError,
+      passwordError,
+      confirmPasswordError,
+    } = this.state
+    const { t } = this.context
+    const { isLoading } = this.props
+    const disabled = !seedPhrase || !password || !confirmPassword || isLoading || this.hasError()
+
+    return (
+      <div className="first-view-main-wrapper">
+        <div className="first-view-main">
+          <div className="import-account">
+            <a
+              className="import-account__back-button"
+              onClick={e => {
+                e.preventDefault()
+                this.props.history.goBack()
+              }}
+              href="#"
+            >
+              {`< Back`}
+            </a>
+            <div className="import-account__title">
+              { this.context.t('restoreAccountWithSeed') }
+            </div>
+            <div className="import-account__selector-label">
+              { this.context.t('secretPhrase') }
+            </div>
+            <div className="import-account__input-wrapper">
+              <label className="import-account__input-label">Wallet Seed</label>
+              <textarea
+                className="import-account__secret-phrase"
+                onChange={e => this.handleSeedPhraseChange(e.target.value)}
+                value={this.state.seedPhrase}
+                placeholder={this.context.t('separateEachWord')}
+              />
+            </div>
+            <span className="error">
+              { seedPhraseError }
+            </span>
+            <TextField
+              id="password"
+              label={t('newPassword')}
+              type="password"
+              className="first-time-flow__input"
+              value={this.state.password}
+              onChange={event => this.handlePasswordChange(event.target.value)}
+              error={passwordError}
+              autoComplete="new-password"
+              margin="normal"
+              largeLabel
+            />
+            <TextField
+              id="confirm-password"
+              label={t('confirmPassword')}
+              type="password"
+              className="first-time-flow__input"
+              value={this.state.confirmPassword}
+              onChange={event => this.handleConfirmPasswordChange(event.target.value)}
+              error={confirmPasswordError}
+              autoComplete="confirm-password"
+              margin="normal"
+              largeLabel
+            />
+            <button
+              className="first-time-flow__button"
+              onClick={() => !disabled && this.onClick()}
+              disabled={disabled}
+            >
+              {this.context.t('restore')}
+            </button>
+          </div>
+        </div>
+      </div>
+    )
+  }
+}
+
+RestoreVaultPageNew.contextTypes = {
+  t: PropTypes.func,
+}
+
+export default connect(
+  ({ appState: { warning, isLoading } }) => ({ warning, isLoading }),
+  dispatch => ({
+    leaveImportSeedScreenState: () => {
+      dispatch(unMarkPasswordForgotten())
+    },
+    createNewVaultAndRestore: (pw, seed) => dispatch(createNewVaultAndRestore(pw, seed)),
+  })
+)(RestoreVaultPageNew)
diff --git a/ui/app/css/itcss/components/newui-sections.scss b/ui/app/css/itcss/components/newui-sections.scss
index 667e45ba2..bbfd85c90 100644
--- a/ui/app/css/itcss/components/newui-sections.scss
+++ b/ui/app/css/itcss/components/newui-sections.scss
@@ -332,3 +332,12 @@ $wallet-view-bg: $alabaster;
   align-items: center;
   flex: 1 0 auto;
 }
+
+.first-view-main-wrapper {
+  display: flex;
+  width: 100%;
+  height: 100%;
+  justify-content: center;
+  padding: 0 10px;
+  background: white;
+}

From f006cbf2ceb8f9519b58656e893e55762c877b8a Mon Sep 17 00:00:00 2001
From: Dan <danjm.com@gmail.com>
Date: Thu, 5 Jul 2018 14:39:55 -0230
Subject: [PATCH 2/2] Delete old restore vault file.

---
 ui/app/app.js                                 |   2 +-
 .../pages/keychains/restore-vault-new.js      | 189 -----------
 .../pages/keychains/restore-vault.js          | 313 +++++++++---------
 3 files changed, 163 insertions(+), 341 deletions(-)
 delete mode 100644 ui/app/components/pages/keychains/restore-vault-new.js

diff --git a/ui/app/app.js b/ui/app/app.js
index 3ca18d4ca..670b7e2d0 100644
--- a/ui/app/app.js
+++ b/ui/app/app.js
@@ -23,7 +23,7 @@ const Authenticated = require('./components/pages/authenticated')
 const Initialized = require('./components/pages/initialized')
 const Settings = require('./components/pages/settings')
 const UnlockPage = require('./components/pages/unlock-page')
-const RestoreVaultPage = require('./components/pages/keychains/restore-vault-new').default
+const RestoreVaultPage = require('./components/pages/keychains/restore-vault').default
 const RevealSeedConfirmation = require('./components/pages/keychains/reveal-seed')
 const AddTokenPage = require('./components/pages/add-token')
 const ConfirmAddTokenPage = require('./components/pages/confirm-add-token')
diff --git a/ui/app/components/pages/keychains/restore-vault-new.js b/ui/app/components/pages/keychains/restore-vault-new.js
deleted file mode 100644
index ef38faf1e..000000000
--- a/ui/app/components/pages/keychains/restore-vault-new.js
+++ /dev/null
@@ -1,189 +0,0 @@
-import React, { Component } from 'react'
-import PropTypes from 'prop-types'
-import {connect} from 'react-redux'
-import {
-  createNewVaultAndRestore,
-  unMarkPasswordForgotten,
-} from '../../../actions'
-import { DEFAULT_ROUTE } from '../../../routes'
-import TextField from '../../text-field'
-
-class RestoreVaultPageNew extends Component {
-  static contextTypes = {
-    t: PropTypes.func,
-  }
-
-  static propTypes = {
-    warning: PropTypes.string,
-    createNewVaultAndRestore: PropTypes.func.isRequired,
-    leaveImportSeedScreenState: PropTypes.func,
-    history: PropTypes.object,
-    isLoading: PropTypes.bool,
-  };
-
-  state = {
-    seedPhrase: '',
-    password: '',
-    confirmPassword: '',
-    seedPhraseError: null,
-    passwordError: null,
-    confirmPasswordError: null,
-  }
-
-  parseSeedPhrase = (seedPhrase) => {
-    return seedPhrase
-      .match(/\w+/g)
-      .join(' ')
-  }
-
-  handleSeedPhraseChange (seedPhrase) {
-    let seedPhraseError = null
-
-    if (seedPhrase && this.parseSeedPhrase(seedPhrase).split(' ').length !== 12) {
-      seedPhraseError = this.context.t('seedPhraseReq')
-    }
-
-    this.setState({ seedPhrase, seedPhraseError })
-  }
-
-  handlePasswordChange (password) {
-    const { confirmPassword } = this.state
-    let confirmPasswordError = null
-    let passwordError = null
-
-    if (password && password.length < 8) {
-      passwordError = this.context.t('passwordNotLongEnough')
-    }
-
-    if (confirmPassword && password !== confirmPassword) {
-      confirmPasswordError = this.context.t('passwordsDontMatch')
-    }
-
-    this.setState({ password, passwordError, confirmPasswordError })
-  }
-
-  handleConfirmPasswordChange (confirmPassword) {
-    const { password } = this.state
-    let confirmPasswordError = null
-
-    if (password !== confirmPassword) {
-      confirmPasswordError = this.context.t('passwordsDontMatch')
-    }
-
-    this.setState({ confirmPassword, confirmPasswordError })
-  }
-
-  onClick = () => {
-    const { password, seedPhrase } = this.state
-    const {
-      createNewVaultAndRestore,
-      leaveImportSeedScreenState,
-      history,
-    } = this.props
-
-    leaveImportSeedScreenState()
-    createNewVaultAndRestore(password, this.parseSeedPhrase(seedPhrase))
-      .then(() => history.push(DEFAULT_ROUTE))
-  }
-
-  hasError () {
-    const { passwordError, confirmPasswordError, seedPhraseError } = this.state
-    return passwordError || confirmPasswordError || seedPhraseError
-  }
-
-  render () {
-    const {
-      seedPhrase,
-      password,
-      confirmPassword,
-      seedPhraseError,
-      passwordError,
-      confirmPasswordError,
-    } = this.state
-    const { t } = this.context
-    const { isLoading } = this.props
-    const disabled = !seedPhrase || !password || !confirmPassword || isLoading || this.hasError()
-
-    return (
-      <div className="first-view-main-wrapper">
-        <div className="first-view-main">
-          <div className="import-account">
-            <a
-              className="import-account__back-button"
-              onClick={e => {
-                e.preventDefault()
-                this.props.history.goBack()
-              }}
-              href="#"
-            >
-              {`< Back`}
-            </a>
-            <div className="import-account__title">
-              { this.context.t('restoreAccountWithSeed') }
-            </div>
-            <div className="import-account__selector-label">
-              { this.context.t('secretPhrase') }
-            </div>
-            <div className="import-account__input-wrapper">
-              <label className="import-account__input-label">Wallet Seed</label>
-              <textarea
-                className="import-account__secret-phrase"
-                onChange={e => this.handleSeedPhraseChange(e.target.value)}
-                value={this.state.seedPhrase}
-                placeholder={this.context.t('separateEachWord')}
-              />
-            </div>
-            <span className="error">
-              { seedPhraseError }
-            </span>
-            <TextField
-              id="password"
-              label={t('newPassword')}
-              type="password"
-              className="first-time-flow__input"
-              value={this.state.password}
-              onChange={event => this.handlePasswordChange(event.target.value)}
-              error={passwordError}
-              autoComplete="new-password"
-              margin="normal"
-              largeLabel
-            />
-            <TextField
-              id="confirm-password"
-              label={t('confirmPassword')}
-              type="password"
-              className="first-time-flow__input"
-              value={this.state.confirmPassword}
-              onChange={event => this.handleConfirmPasswordChange(event.target.value)}
-              error={confirmPasswordError}
-              autoComplete="confirm-password"
-              margin="normal"
-              largeLabel
-            />
-            <button
-              className="first-time-flow__button"
-              onClick={() => !disabled && this.onClick()}
-              disabled={disabled}
-            >
-              {this.context.t('restore')}
-            </button>
-          </div>
-        </div>
-      </div>
-    )
-  }
-}
-
-RestoreVaultPageNew.contextTypes = {
-  t: PropTypes.func,
-}
-
-export default connect(
-  ({ appState: { warning, isLoading } }) => ({ warning, isLoading }),
-  dispatch => ({
-    leaveImportSeedScreenState: () => {
-      dispatch(unMarkPasswordForgotten())
-    },
-    createNewVaultAndRestore: (pw, seed) => dispatch(createNewVaultAndRestore(pw, seed)),
-  })
-)(RestoreVaultPageNew)
diff --git a/ui/app/components/pages/keychains/restore-vault.js b/ui/app/components/pages/keychains/restore-vault.js
index 33575bfbb..d90a33e49 100644
--- a/ui/app/components/pages/keychains/restore-vault.js
+++ b/ui/app/components/pages/keychains/restore-vault.js
@@ -1,178 +1,189 @@
-const { withRouter } = require('react-router-dom')
-const PropTypes = require('prop-types')
-const { compose } = require('recompose')
-const PersistentForm = require('../../../../lib/persistent-form')
-const connect = require('../../../metamask-connect')
-const h = require('react-hyperscript')
-const { createNewVaultAndRestore, unMarkPasswordForgotten } = require('../../../actions')
-const { DEFAULT_ROUTE } = require('../../../routes')
-const log = require('loglevel')
-
-class RestoreVaultPage extends PersistentForm {
-  constructor (props) {
-    super(props)
-
-    this.state = {
-      error: null,
-    }
+import React, { Component } from 'react'
+import PropTypes from 'prop-types'
+import {connect} from 'react-redux'
+import {
+  createNewVaultAndRestore,
+  unMarkPasswordForgotten,
+} from '../../../actions'
+import { DEFAULT_ROUTE } from '../../../routes'
+import TextField from '../../text-field'
+
+class RestoreVaultPage extends Component {
+  static contextTypes = {
+    t: PropTypes.func,
   }
 
-  createOnEnter (event) {
-    if (event.key === 'Enter') {
-      this.createNewVaultAndRestore()
-    }
+  static propTypes = {
+    warning: PropTypes.string,
+    createNewVaultAndRestore: PropTypes.func.isRequired,
+    leaveImportSeedScreenState: PropTypes.func,
+    history: PropTypes.object,
+    isLoading: PropTypes.bool,
+  };
+
+  state = {
+    seedPhrase: '',
+    password: '',
+    confirmPassword: '',
+    seedPhraseError: null,
+    passwordError: null,
+    confirmPasswordError: null,
   }
 
-  cancel () {
-    this.props.unMarkPasswordForgotten()
-      .then(this.props.history.push(DEFAULT_ROUTE))
+  parseSeedPhrase = (seedPhrase) => {
+    return seedPhrase
+      .match(/\w+/g)
+      .join(' ')
   }
 
-  createNewVaultAndRestore () {
-    this.setState({ error: null })
+  handleSeedPhraseChange (seedPhrase) {
+    let seedPhraseError = null
+
+    if (seedPhrase && this.parseSeedPhrase(seedPhrase).split(' ').length !== 12) {
+      seedPhraseError = this.context.t('seedPhraseReq')
+    }
+
+    this.setState({ seedPhrase, seedPhraseError })
+  }
 
-    // check password
-    var passwordBox = document.getElementById('password-box')
-    var password = passwordBox.value
-    var passwordConfirmBox = document.getElementById('password-box-confirm')
-    var passwordConfirm = passwordConfirmBox.value
+  handlePasswordChange (password) {
+    const { confirmPassword } = this.state
+    let confirmPasswordError = null
+    let passwordError = null
 
-    if (password.length < 8) {
-      this.setState({ error: 'Password not long enough' })
-      return
+    if (password && password.length < 8) {
+      passwordError = this.context.t('passwordNotLongEnough')
     }
 
-    if (password !== passwordConfirm) {
-      this.setState({ error: 'Passwords don\'t match' })
-      return
+    if (confirmPassword && password !== confirmPassword) {
+      confirmPasswordError = this.context.t('passwordsDontMatch')
     }
 
-    // check seed
-    var seedBox = document.querySelector('textarea.twelve-word-phrase')
-    var seed = seedBox.value.trim()
-    if (seed.split(' ').length !== 12) {
-      this.setState({ error: 'Seed phrases are 12 words long' })
-      return
+    this.setState({ password, passwordError, confirmPasswordError })
+  }
+
+  handleConfirmPasswordChange (confirmPassword) {
+    const { password } = this.state
+    let confirmPasswordError = null
+
+    if (password !== confirmPassword) {
+      confirmPasswordError = this.context.t('passwordsDontMatch')
     }
 
-    // submit
-    this.props.createNewVaultAndRestore(password, seed)
-      .then(() => this.props.history.push(DEFAULT_ROUTE))
-      .catch(({ message }) => {
-        this.setState({ error: message })
-        log.error(message)
-      })
+    this.setState({ confirmPassword, confirmPasswordError })
+  }
+
+  onClick = () => {
+    const { password, seedPhrase } = this.state
+    const {
+      createNewVaultAndRestore,
+      leaveImportSeedScreenState,
+      history,
+    } = this.props
+
+    leaveImportSeedScreenState()
+    createNewVaultAndRestore(password, this.parseSeedPhrase(seedPhrase))
+      .then(() => history.push(DEFAULT_ROUTE))
+  }
+
+  hasError () {
+    const { passwordError, confirmPasswordError, seedPhraseError } = this.state
+    return passwordError || confirmPasswordError || seedPhraseError
   }
 
   render () {
-    const { error } = this.state
-    this.persistentFormParentId = 'restore-vault-form'
+    const {
+      seedPhrase,
+      password,
+      confirmPassword,
+      seedPhraseError,
+      passwordError,
+      confirmPasswordError,
+    } = this.state
+    const { t } = this.context
+    const { isLoading } = this.props
+    const disabled = !seedPhrase || !password || !confirmPassword || isLoading || this.hasError()
 
     return (
-      h('.initialize-screen.flex-column.flex-center.flex-grow', [
-
-        h('h3.flex-center.text-transform-uppercase', {
-          style: {
-            background: '#EBEBEB',
-            color: '#AEAEAE',
-            marginBottom: 24,
-            width: '100%',
-            fontSize: '20px',
-            padding: 6,
-          },
-        }, [
-          this.props.t('restoreVault'),
-        ]),
-
-        // wallet seed entry
-        h('h3', 'Wallet Seed'),
-        h('textarea.twelve-word-phrase.letter-spacey', {
-          dataset: {
-            persistentFormId: 'wallet-seed',
-          },
-          placeholder: this.props.t('secretPhrase'),
-        }),
-
-        // password
-        h('input.large-input.letter-spacey', {
-          type: 'password',
-          id: 'password-box',
-          placeholder: this.props.t('newPassword8Chars'),
-          dataset: {
-            persistentFormId: 'password',
-          },
-          style: {
-            width: 260,
-            marginTop: 12,
-          },
-        }),
-
-        // confirm password
-        h('input.large-input.letter-spacey', {
-          type: 'password',
-          id: 'password-box-confirm',
-          placeholder: this.props.t('confirmPassword'),
-          onKeyPress: this.createOnEnter.bind(this),
-          dataset: {
-            persistentFormId: 'password-confirmation',
-          },
-          style: {
-            width: 260,
-            marginTop: 16,
-          },
-        }),
-
-        error && (
-          h('span.error.in-progress-notification', error)
-        ),
-
-        // submit
-        h('.flex-row.flex-space-between', {
-          style: {
-            marginTop: 30,
-            width: '50%',
-          },
-        }, [
-
-          // cancel
-          h('button.primary', {
-            onClick: () => this.cancel(),
-          }, this.props.t('cancel')),
-
-          // submit
-          h('button.primary', {
-            onClick: this.createNewVaultAndRestore.bind(this),
-          }, this.props.t('ok')),
-
-        ]),
-      ])
+      <div className="first-view-main-wrapper">
+        <div className="first-view-main">
+          <div className="import-account">
+            <a
+              className="import-account__back-button"
+              onClick={e => {
+                e.preventDefault()
+                this.props.history.goBack()
+              }}
+              href="#"
+            >
+              {`< Back`}
+            </a>
+            <div className="import-account__title">
+              { this.context.t('restoreAccountWithSeed') }
+            </div>
+            <div className="import-account__selector-label">
+              { this.context.t('secretPhrase') }
+            </div>
+            <div className="import-account__input-wrapper">
+              <label className="import-account__input-label">Wallet Seed</label>
+              <textarea
+                className="import-account__secret-phrase"
+                onChange={e => this.handleSeedPhraseChange(e.target.value)}
+                value={this.state.seedPhrase}
+                placeholder={this.context.t('separateEachWord')}
+              />
+            </div>
+            <span className="error">
+              { seedPhraseError }
+            </span>
+            <TextField
+              id="password"
+              label={t('newPassword')}
+              type="password"
+              className="first-time-flow__input"
+              value={this.state.password}
+              onChange={event => this.handlePasswordChange(event.target.value)}
+              error={passwordError}
+              autoComplete="new-password"
+              margin="normal"
+              largeLabel
+            />
+            <TextField
+              id="confirm-password"
+              label={t('confirmPassword')}
+              type="password"
+              className="first-time-flow__input"
+              value={this.state.confirmPassword}
+              onChange={event => this.handleConfirmPasswordChange(event.target.value)}
+              error={confirmPasswordError}
+              autoComplete="confirm-password"
+              margin="normal"
+              largeLabel
+            />
+            <button
+              className="first-time-flow__button"
+              onClick={() => !disabled && this.onClick()}
+              disabled={disabled}
+            >
+              {this.context.t('restore')}
+            </button>
+          </div>
+        </div>
+      </div>
     )
   }
 }
 
-RestoreVaultPage.propTypes = {
-  history: PropTypes.object,
-}
-
-const mapStateToProps = state => {
-  const { appState: { warning, forgottenPassword } } = state
-
-  return {
-    warning,
-    forgottenPassword,
-  }
+RestoreVaultPage.contextTypes = {
+  t: PropTypes.func,
 }
 
-const mapDispatchToProps = dispatch => {
-  return {
-    createNewVaultAndRestore: (password, seed) => {
-      return dispatch(createNewVaultAndRestore(password, seed))
+export default connect(
+  ({ appState: { warning, isLoading } }) => ({ warning, isLoading }),
+  dispatch => ({
+    leaveImportSeedScreenState: () => {
+      dispatch(unMarkPasswordForgotten())
     },
-    unMarkPasswordForgotten: () => dispatch(unMarkPasswordForgotten()),
-  }
-}
-
-module.exports = compose(
-  withRouter,
-  connect(mapStateToProps, mapDispatchToProps)
+    createNewVaultAndRestore: (pw, seed) => dispatch(createNewVaultAndRestore(pw, seed)),
+  })
 )(RestoreVaultPage)