Refactor first time flow, remove seed phrase from state (#5994)

* Refactor and fix styling for first time flow. Remove seed phrase from persisted metamask state

* Fix linting and tests

* Fix translations, initialization notice routing

* Fix drizzle tests

* Fix e2e tests

* Fix integration tests

* Fix styling

* Fix migration naming from 030 to 031

* Open extension in browser when user has not completed onboarding

3 files changed, 46 insertions, 37 deletions

diff --git a/ui/app/components/pages/unlock-page/index.scss b/ui/app/components/pages/unlock-page/index.scss
index 6bd52282d..3d44bd037 100644
--- a/ui/app/components/pages/unlock-page/index.scss
+++ b/ui/app/components/pages/unlock-page/index.scss
@@ -14,7 +14,6 @@
     align-self: stretch;
     justify-content: center;
     flex: 1 0 auto;
-    height: 100vh;
   }
 
   &__mascot-container {
diff --git a/ui/app/components/pages/unlock-page/unlock-page.component.js b/ui/app/components/pages/unlock-page/unlock-page.component.js
index 94915df76..58a8b0566 100644
--- a/ui/app/components/pages/unlock-page/unlock-page.component.js
+++ b/ui/app/components/pages/unlock-page/unlock-page.component.js
@@ -2,12 +2,10 @@ import React, { Component } from 'react'
 import PropTypes from 'prop-types'
 import Button from '@material-ui/core/Button'
 import TextField from '../../text-field'
-import { ENVIRONMENT_TYPE_POPUP } from '../../../../../app/scripts/lib/enums'
-import { getEnvironmentType } from '../../../../../app/scripts/lib/util'
 import getCaretCoordinates from 'textarea-caret'
 import { EventEmitter } from 'events'
 import Mascot from '../../mascot'
-import { DEFAULT_ROUTE, RESTORE_VAULT_ROUTE } from '../../../routes'
+import { DEFAULT_ROUTE } from '../../../routes'
 
 export default class UnlockPage extends Component {
   static contextTypes = {
@@ -15,12 +13,11 @@ export default class UnlockPage extends Component {
   }
 
   static propTypes = {
-    forgotPassword: PropTypes.func,
-    tryUnlockMetamask: PropTypes.func,
-    markPasswordForgotten: PropTypes.func,
     history: PropTypes.object,
     isUnlocked: PropTypes.bool,
-    useOldInterface: PropTypes.func,
+    onImport: PropTypes.func,
+    onRestore: PropTypes.func,
+    onSubmit: PropTypes.func,
   }
 
   constructor (props) {
@@ -43,12 +40,12 @@ export default class UnlockPage extends Component {
     }
   }
 
-  async handleSubmit (event) {
+  handleSubmit = async event => {
     event.preventDefault()
     event.stopPropagation()
 
     const { password } = this.state
-    const { tryUnlockMetamask, history } = this.props
+    const { onSubmit } = this.props
 
     if (password === '' || this.submitting) {
       return
@@ -58,9 +55,7 @@ export default class UnlockPage extends Component {
     this.submitting = true
 
     try {
-      await tryUnlockMetamask(password)
-      this.submitting = false
-      history.push(DEFAULT_ROUTE)
+      await onSubmit(password)
     } catch ({ message }) {
       this.setState({ error: message })
       this.submitting = false
@@ -99,7 +94,7 @@ export default class UnlockPage extends Component {
         fullWidth
         variant="raised"
         size="large"
-        onClick={event => this.handleSubmit(event)}
+        onClick={this.handleSubmit}
         disableRipple
       >
         { this.context.t('login') }
@@ -110,7 +105,7 @@ export default class UnlockPage extends Component {
   render () {
     const { password, error } = this.state
     const { t } = this.context
-    const { markPasswordForgotten, history } = this.props
+    const { onImport, onRestore } = this.props
 
     return (
       <div className="unlock-page__container">
@@ -128,7 +123,7 @@ export default class UnlockPage extends Component {
           <div>{ t('unlockMessage') }</div>
           <form
             className="unlock-page__form"
-            onSubmit={event => this.handleSubmit(event)}
+            onSubmit={this.handleSubmit}
           >
             <TextField
               id="password"
@@ -147,27 +142,13 @@ export default class UnlockPage extends Component {
           <div className="unlock-page__links">
             <div
               className="unlock-page__link"
-              onClick={() => {
-                markPasswordForgotten()
-                history.push(RESTORE_VAULT_ROUTE)
-
-                if (getEnvironmentType(window.location.href) === ENVIRONMENT_TYPE_POPUP) {
-                  global.platform.openExtensionInBrowser()
-                }
-              }}
+              onClick={() => onRestore()}
             >
               { t('restoreFromSeed') }
             </div>
             <div
               className="unlock-page__link unlock-page__link--import"
-              onClick={() => {
-                markPasswordForgotten()
-                history.push(RESTORE_VAULT_ROUTE)
-
-                if (getEnvironmentType(window.location.href) === ENVIRONMENT_TYPE_POPUP) {
-                  global.platform.openExtensionInBrowser()
-                }
-              }}
+              onClick={() => onImport()}
             >
               { t('importUsingSeed') }
             </div>
diff --git a/ui/app/components/pages/unlock-page/unlock-page.container.js b/ui/app/components/pages/unlock-page/unlock-page.container.js
index 18fed9b2e..5f302dc37 100644
--- a/ui/app/components/pages/unlock-page/unlock-page.container.js
+++ b/ui/app/components/pages/unlock-page/unlock-page.container.js
@@ -1,13 +1,14 @@
 import { connect } from 'react-redux'
 import { withRouter } from 'react-router-dom'
 import { compose } from 'recompose'
-
-const {
+import { getEnvironmentType } from '../../../../../app/scripts/lib/util'
+import { ENVIRONMENT_TYPE_POPUP } from '../../../../../app/scripts/lib/enums'
+import { DEFAULT_ROUTE, RESTORE_VAULT_ROUTE } from '../../../routes'
+import {
   tryUnlockMetamask,
   forgotPassword,
   markPasswordForgotten,
-} = require('../../../actions')
-
+} from '../../../actions'
 import UnlockPage from './unlock-page.component'
 
 const mapStateToProps = state => {
@@ -25,7 +26,35 @@ const mapDispatchToProps = dispatch => {
   }
 }
 
+const mergeProps = (stateProps, dispatchProps, ownProps) => {
+  const { markPasswordForgotten, tryUnlockMetamask, ...restDispatchProps } = dispatchProps
+  const { history, onSubmit: ownPropsSubmit, ...restOwnProps } = ownProps
+
+  const onImport = () => {
+    markPasswordForgotten()
+    history.push(RESTORE_VAULT_ROUTE)
+
+    if (getEnvironmentType(window.location.href) === ENVIRONMENT_TYPE_POPUP) {
+      global.platform.openExtensionInBrowser()
+    }
+  }
+
+  const onSubmit = async password => {
+    await tryUnlockMetamask(password)
+    history.push(DEFAULT_ROUTE)
+  }
+
+  return {
+    ...stateProps,
+    ...restDispatchProps,
+    ...restOwnProps,
+    onImport,
+    onRestore: onImport,
+    onSubmit: ownPropsSubmit || onSubmit,
+  }
+}
+
 export default compose(
   withRouter,
-  connect(mapStateToProps, mapDispatchToProps)
+  connect(mapStateToProps, mapDispatchToProps, mergeProps)
 )(UnlockPage)