I5849 incremental account security (#6874)

* Implements ability to defer seed phrase backup to later

* Adds incremental-security.spec.js, including test dapp that sends signed tx with stand alone localhost provider

* Update metamask-responsive-ui for incremental account security changes

* Update backup-notification style and fix responsiveness of seed phrase screen

* Remove uneeded files from send-eth-with-private-key-test/

* Apply linguist flags in .gitattributes for send-eth-with-private-key-test/ethereumjs-tx.js

* Improve docs in controllers/onboarding.js

* Clean up metamask-extension/test/e2e/send-eth-with-private-key-test/index.html

* Remove unnecessary newlines in a couple first-time-flow/ files

* Fix import of backup-notification in home.component

* Fix git attrs file

9 files changed, 127 insertions, 18 deletions

diff --git a/ui/app/pages/first-time-flow/seed-phrase/confirm-seed-phrase/confirm-seed-phrase.component.js b/ui/app/pages/first-time-flow/seed-phrase/confirm-seed-phrase/confirm-seed-phrase.component.js
index 4cfc38fdf..9256c3d8d 100644
--- a/ui/app/pages/first-time-flow/seed-phrase/confirm-seed-phrase/confirm-seed-phrase.component.js
+++ b/ui/app/pages/first-time-flow/seed-phrase/confirm-seed-phrase/confirm-seed-phrase.component.js
@@ -6,6 +6,7 @@ import Button from '../../../../components/ui/button'
 import {
   INITIALIZE_END_OF_FLOW_ROUTE,
   INITIALIZE_SEED_PHRASE_ROUTE,
+  DEFAULT_ROUTE,
 } from '../../../../helpers/constants/routes'
 import { exportAsFile } from '../../../../helpers/utils/util'
 import DraggableSeed from './draggable-seed.component'
@@ -88,7 +89,7 @@ export default class ConfirmSeedPhrase extends PureComponent {
   }
 
   handleSubmit = async () => {
-    const { history } = this.props
+    const { history, setSeedPhraseBackedUp, showingSeedPhraseBackupAfterOnboarding, hideSeedPhraseBackupAfterOnboarding } = this.props
 
     if (!this.isValid()) {
       return
@@ -102,7 +103,15 @@ export default class ConfirmSeedPhrase extends PureComponent {
           name: 'Verify Complete',
         },
       })
-      history.push(INITIALIZE_END_OF_FLOW_ROUTE)
+
+      setSeedPhraseBackedUp(true).then(() => {
+        if (showingSeedPhraseBackupAfterOnboarding) {
+          hideSeedPhraseBackupAfterOnboarding()
+          history.push(DEFAULT_ROUTE)
+        } else {
+          history.push(INITIALIZE_END_OF_FLOW_ROUTE)
+        }
+      })
     } catch (error) {
       console.error(error.message)
     }
diff --git a/ui/app/pages/first-time-flow/seed-phrase/confirm-seed-phrase/confirm-seed-phrase.container.js b/ui/app/pages/first-time-flow/seed-phrase/confirm-seed-phrase/confirm-seed-phrase.container.js
new file mode 100644
index 000000000..ac5a26979
--- /dev/null
+++ b/ui/app/pages/first-time-flow/seed-phrase/confirm-seed-phrase/confirm-seed-phrase.container.js
@@ -0,0 +1,23 @@
+import { connect } from 'react-redux'
+import ConfirmSeedPhrase from './confirm-seed-phrase.component'
+import {
+  setSeedPhraseBackedUp,
+  hideSeedPhraseBackupAfterOnboarding,
+} from '../../../../store/actions'
+
+const mapStateToProps = state => {
+  const { appState: { showingSeedPhraseBackupAfterOnboarding } } = state
+
+  return {
+    showingSeedPhraseBackupAfterOnboarding,
+  }
+}
+
+const mapDispatchToProps = dispatch => {
+  return {
+    setSeedPhraseBackedUp: (seedPhraseBackupState) => dispatch(setSeedPhraseBackedUp(seedPhraseBackupState)),
+    hideSeedPhraseBackupAfterOnboarding: () => dispatch(hideSeedPhraseBackupAfterOnboarding()),
+  }
+}
+
+export default connect(mapStateToProps, mapDispatchToProps)(ConfirmSeedPhrase)
diff --git a/ui/app/pages/first-time-flow/seed-phrase/confirm-seed-phrase/index.js b/ui/app/pages/first-time-flow/seed-phrase/confirm-seed-phrase/index.js
index c7b511503..beb53b383 100644
--- a/ui/app/pages/first-time-flow/seed-phrase/confirm-seed-phrase/index.js
+++ b/ui/app/pages/first-time-flow/seed-phrase/confirm-seed-phrase/index.js
@@ -1 +1 @@
-export { default } from './confirm-seed-phrase.component'
+export { default } from './confirm-seed-phrase.container'
diff --git a/ui/app/pages/first-time-flow/seed-phrase/reveal-seed-phrase/index.js b/ui/app/pages/first-time-flow/seed-phrase/reveal-seed-phrase/index.js
index 4a1b191b5..a528f95a2 100644
--- a/ui/app/pages/first-time-flow/seed-phrase/reveal-seed-phrase/index.js
+++ b/ui/app/pages/first-time-flow/seed-phrase/reveal-seed-phrase/index.js
@@ -1 +1 @@
-export { default } from './reveal-seed-phrase.component'
+export { default } from './reveal-seed-phrase.container'
diff --git a/ui/app/pages/first-time-flow/seed-phrase/reveal-seed-phrase/index.scss b/ui/app/pages/first-time-flow/seed-phrase/reveal-seed-phrase/index.scss
index 8a47447ed..dfe9868cf 100644
--- a/ui/app/pages/first-time-flow/seed-phrase/reveal-seed-phrase/index.scss
+++ b/ui/app/pages/first-time-flow/seed-phrase/reveal-seed-phrase/index.scss
@@ -1,4 +1,12 @@
 .reveal-seed-phrase {
+  @media screen and (max-width: 576px) {
+    display: flex;
+    flex-direction: column;
+    width: 96%;
+    margin-left: 2%;
+    margin-right: 2%;
+  }
+
   &__secret {
     position: relative;
     display: flex;
@@ -54,4 +62,12 @@
   button {
     margin-top: 0xp;
   }
+
+  &__buttons {
+    display: flex;
+
+    .first-time-flow__button:last-of-type {
+      margin-left: 20px;
+    }
+  }
 }
diff --git a/ui/app/pages/first-time-flow/seed-phrase/reveal-seed-phrase/reveal-seed-phrase.component.js b/ui/app/pages/first-time-flow/seed-phrase/reveal-seed-phrase/reveal-seed-phrase.component.js
index 4e9948a0e..78981bae8 100644
--- a/ui/app/pages/first-time-flow/seed-phrase/reveal-seed-phrase/reveal-seed-phrase.component.js
+++ b/ui/app/pages/first-time-flow/seed-phrase/reveal-seed-phrase/reveal-seed-phrase.component.js
@@ -3,7 +3,7 @@ import PropTypes from 'prop-types'
 import classnames from 'classnames'
 import LockIcon from '../../../../components/ui/lock-icon'
 import Button from '../../../../components/ui/button'
-import { INITIALIZE_CONFIRM_SEED_PHRASE_ROUTE } from '../../../../helpers/constants/routes'
+import { INITIALIZE_CONFIRM_SEED_PHRASE_ROUTE, DEFAULT_ROUTE } from '../../../../helpers/constants/routes'
 import { exportAsFile } from '../../../../helpers/utils/util'
 
 export default class RevealSeedPhrase extends PureComponent {
@@ -15,6 +15,8 @@ export default class RevealSeedPhrase extends PureComponent {
   static propTypes = {
     history: PropTypes.object,
     seedPhrase: PropTypes.string,
+    setSeedPhraseBackedUp: PropTypes.func,
+    setCompletedOnboarding: PropTypes.func,
   }
 
   state = {
@@ -45,6 +47,24 @@ export default class RevealSeedPhrase extends PureComponent {
     history.push(INITIALIZE_CONFIRM_SEED_PHRASE_ROUTE)
   }
 
+  handleSkip = event => {
+    event.preventDefault()
+    const { history, setSeedPhraseBackedUp, setCompletedOnboarding } = this.props
+
+    this.context.metricsEvent({
+      eventOpts: {
+        category: 'Onboarding',
+        action: 'Seed Phrase Setup',
+        name: 'Remind me later',
+      },
+    })
+
+    Promise.all([setCompletedOnboarding(), setSeedPhraseBackedUp(false)])
+      .then(() => {
+        history.push(DEFAULT_ROUTE)
+      })
+  }
+
   renderSecretWordsContainer () {
     const { t } = this.context
     const { seedPhrase } = this.props
@@ -129,14 +149,23 @@ export default class RevealSeedPhrase extends PureComponent {
             </div>
           </div>
         </div>
-        <Button
-          type="primary"
-          className="first-time-flow__button"
-          onClick={this.handleNext}
-          disabled={!isShowingSeedPhrase}
-        >
-          { t('next') }
-        </Button>
+        <div className="reveal-seed-phrase__buttons">
+          <Button
+            type="secondary"
+            className="first-time-flow__button"
+            onClick={this.handleSkip}
+          >
+            { t('remindMeLater') }
+          </Button>
+          <Button
+            type="primary"
+            className="first-time-flow__button"
+            onClick={this.handleNext}
+            disabled={!isShowingSeedPhrase}
+          >
+            { t('next') }
+          </Button>
+        </div>
       </div>
     )
   }
diff --git a/ui/app/pages/first-time-flow/seed-phrase/reveal-seed-phrase/reveal-seed-phrase.container.js b/ui/app/pages/first-time-flow/seed-phrase/reveal-seed-phrase/reveal-seed-phrase.container.js
new file mode 100644
index 000000000..7ada36afc
--- /dev/null
+++ b/ui/app/pages/first-time-flow/seed-phrase/reveal-seed-phrase/reveal-seed-phrase.container.js
@@ -0,0 +1,15 @@
+import { connect } from 'react-redux'
+import RevealSeedPhrase from './reveal-seed-phrase.component'
+import {
+  setCompletedOnboarding,
+  setSeedPhraseBackedUp,
+} from '../../../../store/actions'
+
+const mapDispatchToProps = dispatch => {
+  return {
+    setSeedPhraseBackedUp: (seedPhraseBackupState) => dispatch(setSeedPhraseBackedUp(seedPhraseBackupState)),
+    setCompletedOnboarding: () => dispatch(setCompletedOnboarding()),
+  }
+}
+
+export default connect(null, mapDispatchToProps)(RevealSeedPhrase)
diff --git a/ui/app/pages/first-time-flow/seed-phrase/seed-phrase.component.js b/ui/app/pages/first-time-flow/seed-phrase/seed-phrase.component.js
index f4557115a..79cb27c52 100644
--- a/ui/app/pages/first-time-flow/seed-phrase/seed-phrase.component.js
+++ b/ui/app/pages/first-time-flow/seed-phrase/seed-phrase.component.js
@@ -17,18 +17,31 @@ export default class SeedPhrase extends PureComponent {
     address: PropTypes.string,
     history: PropTypes.object,
     seedPhrase: PropTypes.string,
+    verifySeedPhrase: PropTypes.func,
+  }
+
+  state = {
+    verifiedSeedPhrase: '',
   }
 
   componentDidMount () {
-    const { seedPhrase, history } = this.props
+    const { seedPhrase, history, verifySeedPhrase } = this.props
 
     if (!seedPhrase) {
-      history.push(DEFAULT_ROUTE)
+      verifySeedPhrase()
+        .then(verifiedSeedPhrase => {
+          if (!verifiedSeedPhrase) {
+            history.push(DEFAULT_ROUTE)
+          } else {
+            this.setState({ verifiedSeedPhrase })
+          }
+        })
     }
   }
 
   render () {
     const { seedPhrase } = this.props
+    const { verifiedSeedPhrase } = this.state
 
     return (
       <DragDropContextProvider backend={HTML5Backend}>
@@ -41,7 +54,7 @@ export default class SeedPhrase extends PureComponent {
               render={props => (
                 <ConfirmSeedPhrase
                   { ...props }
-                  seedPhrase={seedPhrase}
+                  seedPhrase={seedPhrase || verifiedSeedPhrase}
                 />
               )}
             />
@@ -51,7 +64,7 @@ export default class SeedPhrase extends PureComponent {
               render={props => (
                 <RevealSeedPhrase
                   { ...props }
-                  seedPhrase={seedPhrase}
+                  seedPhrase={seedPhrase || verifiedSeedPhrase}
                 />
               )}
             />
diff --git a/ui/app/pages/first-time-flow/seed-phrase/tests/confirm-seed-phrase-component.test.js b/ui/app/pages/first-time-flow/seed-phrase/tests/confirm-seed-phrase-component.test.js
index 8339a6f6f..3d5f7f066 100644
--- a/ui/app/pages/first-time-flow/seed-phrase/tests/confirm-seed-phrase-component.test.js
+++ b/ui/app/pages/first-time-flow/seed-phrase/tests/confirm-seed-phrase-component.test.js
@@ -131,7 +131,7 @@ describe('ConfirmSeedPhrase Component', () => {
     assert.deepEqual(root.state().pendingSeedIndices, [2, 0, 1])
   })
 
-  it('should submit correctly', () => {
+  it('should submit correctly', async () => {
     const originalSeed = ['鼠', '牛', '虎', '兔', '龍', '蛇', '馬', '羊', '猴', '雞', '狗', '豬']
     const metricsEventSpy = sinon.spy()
     const pushSpy = sinon.spy()
@@ -139,6 +139,7 @@ describe('ConfirmSeedPhrase Component', () => {
       {
         seedPhrase: '鼠 牛 虎 兔 龍 蛇 馬 羊 猴 雞 狗 豬',
         history: { push: pushSpy },
+        setSeedPhraseBackedUp: () => Promise.resolve(),
       },
       {
         metricsEvent: metricsEventSpy,
@@ -157,6 +158,9 @@ describe('ConfirmSeedPhrase Component', () => {
     root.update()
 
     root.find('.first-time-flow__button').simulate('click')
+
+    await (new Promise(resolve => setTimeout(resolve, 100)))
+
     assert.deepEqual(metricsEventSpy.args[0][0], {
       eventOpts: {
         category: 'Onboarding',