First time flow updates (#6192)

* Action select step of onboarding flow added.

* Update navigation on create and import password screens.

* Adds terms of service checkbox to create and import account screens.

* Add security warning to jazzicon intro step

* Update and streamline unique image to confirm seed steps of first time flow.

* UI touch ups to welcome screen.

* UI touch up on select action page

* Fix first time import flow.

* Add end of flow screen to first time flow

* Replace unique image screen with updated fishing warning screen.

* Update e2e tests for onboarding flow changes.

* Add required translations to onboarding flow.

* Update design of select action screen to emphasize create new wallet option.

* Clean up onboarding flow code.

* Remove notice related code from first-time-flow directory.

* Use updater function argument in new-account.component

3 files changed, 135 insertions, 188 deletions

diff --git a/test/e2e/beta/from-import-beta-ui.spec.js b/test/e2e/beta/from-import-beta-ui.spec.js
index d4a380584..ad3e8b1fe 100644
--- a/test/e2e/beta/from-import-beta-ui.spec.js
+++ b/test/e2e/beta/from-import-beta-ui.spec.js
@@ -65,13 +65,16 @@ describe('Using MetaMask with an existing account', function () {
 
   beforeEach(async function () {
     await driver.executeScript(
+      'window.origFetch = window.fetch.bind(window);' +
       'window.fetch = ' +
       '(...args) => { ' +
       'if (args[0] === "https://ethgasstation.info/json/ethgasAPI.json") { return ' +
       'Promise.resolve({ json: () => Promise.resolve(JSON.parse(\'' + fetchMockResponses.ethGasBasic + '\')) }); } else if ' +
       '(args[0] === "https://ethgasstation.info/json/predictTable.json") { return ' +
-      'Promise.resolve({ json: () => Promise.resolve(JSON.parse(\'' + fetchMockResponses.ethGasPredictTable + '\')) }); } ' +
-      'return window.fetch(...args); }'
+      'Promise.resolve({ json: () => Promise.resolve(JSON.parse(\'' + fetchMockResponses.ethGasPredictTable + '\')) }); } else if ' +
+      '(args[0] === "https://dev.blockscale.net/api/gasexpress.json") { return ' +
+      'Promise.resolve({ json: () => Promise.resolve(JSON.parse(\'' + fetchMockResponses.gasExpress + '\')) }); } ' +
+      'return window.origFetch(...args); }'
     )
   })
 
@@ -95,16 +98,19 @@ describe('Using MetaMask with an existing account', function () {
 
   describe('First time flow starting from an existing seed phrase', () => {
     it('clicks the continue button on the welcome screen', async () => {
-      const welcomeScreenBtn = await findElement(driver, By.css('.welcome-page .first-time-flow__button'))
+      await findElement(driver, By.css('.welcome-page__header'))
+      const welcomeScreenBtn = await findElement(driver, By.css('.first-time-flow__button'))
       welcomeScreenBtn.click()
       await delay(largeDelayMs)
     })
 
-    it('imports a seed phrase', async () => {
-      const [seedPhrase] = await findElements(driver, By.xpath(`//a[contains(text(), 'Import with seed phrase')]`))
-      await seedPhrase.click()
-      await delay(regularDelayMs)
+    it('clicks the "Import Wallet" option', async () => {
+      const customRpcButton = await findElement(driver, By.xpath(`//button[contains(text(), 'Import Wallet')]`))
+      customRpcButton.click()
+      await delay(largeDelayMs)
+    })
 
+    it('imports a seed phrase', async () => {
       const [seedTextArea] = await findElements(driver, By.css('textarea.first-time-flow__textarea'))
       await seedTextArea.sendKeys(testSeedPhrase)
       await delay(regularDelayMs)
@@ -114,39 +120,25 @@ describe('Using MetaMask with an existing account', function () {
       const [confirmPassword] = await findElements(driver, By.id('confirm-password'))
       confirmPassword.sendKeys('correct horse battery staple')
 
+      const tosCheckBox = await findElement(driver, By.css('.first-time-flow__checkbox'))
+      await tosCheckBox.click()
+
       const [importButton] = await findElements(driver, By.xpath(`//button[contains(text(), 'Import')]`))
       await importButton.click()
       await delay(regularDelayMs)
     })
 
-    it('clicks through the ToS', async () => {
-      // terms of use
-      await findElement(driver, By.css('.first-time-flow__markdown'))
-      const canClickThrough = await driver.findElement(By.css('button.first-time-flow__button')).isEnabled()
-      assert.equal(canClickThrough, false, 'disabled continue button')
-      const bottomOfTos = await findElement(driver, By.linkText('Attributions'))
-      await driver.executeScript('arguments[0].scrollIntoView(true)', bottomOfTos)
-      await delay(regularDelayMs)
-      const acceptTos = await findElement(driver, By.css('button.first-time-flow__button'))
-      driver.wait(until.elementIsEnabled(acceptTos))
-      await acceptTos.click()
-      await delay(regularDelayMs)
-    })
-
-    it('clicks through the privacy notice', async () => {
-      // privacy notice
+    it('clicks through the security warning screen', async () => {
+      await findElement(driver, By.xpath(`//div[contains(text(), 'Protect Your Keys!')]`))
       const nextScreen = await findElement(driver, By.css('button.first-time-flow__button'))
       await nextScreen.click()
       await delay(regularDelayMs)
     })
 
-    it('clicks through the phishing notice', async () => {
-      // phishing notice
-      const noticeElement = await driver.findElement(By.css('.first-time-flow__markdown'))
-      await driver.executeScript('arguments[0].scrollTop = arguments[0].scrollHeight', noticeElement)
-      await delay(regularDelayMs)
-      const nextScreen = await findElement(driver, By.css('button.first-time-flow__button'))
-      await nextScreen.click()
+    it('clicks through the success screen', async () => {
+      await findElement(driver, By.xpath(`//div[contains(text(), 'Congratulations')]`))
+      const doneButton = await findElement(driver, By.css('button.first-time-flow__button'))
+      await doneButton.click()
       await delay(regularDelayMs)
     })
   })
diff --git a/test/e2e/beta/metamask-beta-responsive-ui.spec.js b/test/e2e/beta/metamask-beta-responsive-ui.spec.js
index 099ed944e..781811d6d 100644
--- a/test/e2e/beta/metamask-beta-responsive-ui.spec.js
+++ b/test/e2e/beta/metamask-beta-responsive-ui.spec.js
@@ -80,134 +80,111 @@ describe('MetaMask', function () {
   })
 
   describe('Going through the first time flow', () => {
-    it('clicks the continue button on the welcome screen', async () => {
-      const welcomeScreenBtn = await findElement(driver, By.css('.welcome-page .first-time-flow__button'))
-      welcomeScreenBtn.click()
-      await delay(largeDelayMs)
-    })
-
-    it('accepts a secure password', async () => {
-      const passwordBox = await findElement(driver, By.css('.first-time-flow__form #create-password'))
-      const passwordBoxConfirm = await findElement(driver, By.css('.first-time-flow__form #confirm-password'))
-      const button = await findElement(driver, By.css('.first-time-flow__form button'))
-
-      await passwordBox.sendKeys('correct horse battery staple')
-      await passwordBoxConfirm.sendKeys('correct horse battery staple')
-      await button.click()
-      await delay(regularDelayMs)
-    })
-
-    it('clicks through the unique image screen', async () => {
-      await findElement(driver, By.css('.first-time-flow__unique-image'))
-      const nextScreen = await findElement(driver, By.css('button.first-time-flow__button'))
-      await nextScreen.click()
-      await delay(regularDelayMs)
-    })
-
-    it('clicks through the ToS', async () => {
-      // terms of use
-      await findElement(driver, By.css('.first-time-flow__markdown'))
-      const canClickThrough = await driver.findElement(By.css('button.first-time-flow__button')).isEnabled()
-      assert.equal(canClickThrough, false, 'disabled continue button')
-      const bottomOfTos = await findElement(driver, By.linkText('Attributions'))
-      await driver.executeScript('arguments[0].scrollIntoView(true)', bottomOfTos)
-      await delay(regularDelayMs)
-      const acceptTos = await findElement(driver, By.css('button.first-time-flow__button'))
-      driver.wait(until.elementIsEnabled(acceptTos))
-      await acceptTos.click()
-      await delay(regularDelayMs)
-    })
-
-    it('clicks through the privacy notice', async () => {
-      // privacy notice
-      const nextScreen = await findElement(driver, By.css('button.first-time-flow__button'))
-      await nextScreen.click()
-      await delay(regularDelayMs)
-    })
-
-    it('clicks through the phishing notice', async () => {
-      // phishing notice
-      const noticeElement = await driver.findElement(By.css('.first-time-flow__markdown'))
-      await driver.executeScript('arguments[0].scrollTop = arguments[0].scrollHeight', noticeElement)
-      await delay(regularDelayMs)
-      const nextScreen = await findElement(driver, By.css('button.first-time-flow__button'))
-      await nextScreen.click()
-      await delay(regularDelayMs)
-    })
-
-    let seedPhrase
-
-    it('reveals the seed phrase', async () => {
-      const byRevealButton = By.css('.reveal-seed-phrase__secret-blocker .reveal-seed-phrase__reveal-button')
-      await driver.wait(until.elementLocated(byRevealButton, 10000))
-      const revealSeedPhraseButton = await findElement(driver, byRevealButton, 10000)
-      await revealSeedPhraseButton.click()
-      await delay(regularDelayMs)
-
-      seedPhrase = await driver.findElement(By.css('.reveal-seed-phrase__secret-words')).getText()
-      assert.equal(seedPhrase.split(' ').length, 12)
-      await delay(regularDelayMs)
-
-      const nextScreen = await findElement(driver, By.css('button.first-time-flow__button'))
-      await nextScreen.click()
-      await delay(regularDelayMs)
-    })
-
-    async function clickWordAndWait (word) {
-      const xpath = `//div[contains(@class, 'confirm-seed-phrase__seed-word--shuffled') and not(contains(@class, 'confirm-seed-phrase__seed-word--selected')) and contains(text(), '${word}')]`
-      const word0 = await findElement(driver, By.xpath(xpath), 10000)
-
-      await word0.click()
-      await delay(tinyDelayMs)
-    }
+      it('clicks the continue button on the welcome screen', async () => {
+        await findElement(driver, By.css('.welcome-page__header'))
+        const welcomeScreenBtn = await findElement(driver, By.css('.first-time-flow__button'))
+        welcomeScreenBtn.click()
+        await delay(largeDelayMs)
+      })
 
-    async function retypeSeedPhrase (words, wasReloaded, count = 0) {
-      try {
-        if (wasReloaded) {
-          const byRevealButton = By.css('.reveal-seed-phrase__secret-blocker .reveal-seed-phrase__reveal-button')
-          await driver.wait(until.elementLocated(byRevealButton, 10000))
-          const revealSeedPhraseButton = await findElement(driver, byRevealButton, 10000)
-          await revealSeedPhraseButton.click()
-          await delay(regularDelayMs)
-
-          const nextScreen = await findElement(driver, By.css('button.first-time-flow__button'))
-          await nextScreen.click()
-          await delay(regularDelayMs)
-        }
+      it('clicks the "Create New Wallet" option', async () => {
+        const customRpcButton = await findElement(driver, By.xpath(`//button[contains(text(), 'Create a Wallet')]`))
+        customRpcButton.click()
+        await delay(largeDelayMs)
+      })
+
+      it('accepts a secure password', async () => {
+        const passwordBox = await findElement(driver, By.css('.first-time-flow__form #create-password'))
+        const passwordBoxConfirm = await findElement(driver, By.css('.first-time-flow__form #confirm-password'))
+        const button = await findElement(driver, By.css('.first-time-flow__form button'))
+
+        await passwordBox.sendKeys('correct horse battery staple')
+        await passwordBoxConfirm.sendKeys('correct horse battery staple')
+
+        const tosCheckBox = await findElement(driver, By.css('.first-time-flow__checkbox'))
+        await tosCheckBox.click()
+
+        await button.click()
+        await delay(regularDelayMs)
+      })
+
+      it('clicks through the security warning screen', async () => {
+        await findElement(driver, By.xpath(`//div[contains(text(), 'Protect Your Keys!')]`))
+        const nextScreen = await findElement(driver, By.css('button.first-time-flow__button'))
+        await nextScreen.click()
+        await delay(regularDelayMs)
+      })
+
+      let seedPhrase
+
+      it('reveals the seed phrase', async () => {
+        const byRevealButton = By.css('.reveal-seed-phrase__secret-blocker .reveal-seed-phrase__reveal-button')
+        await driver.wait(until.elementLocated(byRevealButton, 10000))
+        const revealSeedPhraseButton = await findElement(driver, byRevealButton, 10000)
+        await revealSeedPhraseButton.click()
+        await delay(regularDelayMs)
+
+        seedPhrase = await driver.findElement(By.css('.reveal-seed-phrase__secret-words')).getText()
+        assert.equal(seedPhrase.split(' ').length, 12)
+        await delay(regularDelayMs)
+
+        const nextScreen = await findElement(driver, By.css('button.first-time-flow__button'))
+        await nextScreen.click()
+        await delay(regularDelayMs)
+      })
+
+      async function clickWordAndWait (word) {
+        const xpath = `//div[contains(@class, 'confirm-seed-phrase__seed-word--shuffled') and not(contains(@class, 'confirm-seed-phrase__seed-word--selected')) and contains(text(), '${word}')]`
+        const word0 = await findElement(driver, By.xpath(xpath), 10000)
+
+        await word0.click()
+        await delay(tinyDelayMs)
+      }
 
-        for (let i = 0; i < 12; i++) {
-          await clickWordAndWait(words[i])
-        }
-      } catch (e) {
-        if (count > 2) {
-          throw e
-        } else {
-          await loadExtension(driver, extensionId)
-          await retypeSeedPhrase(words, true, count + 1)
+      async function retypeSeedPhrase (words, wasReloaded, count = 0) {
+        try {
+          if (wasReloaded) {
+            const byRevealButton = By.css('.reveal-seed-phrase__secret-blocker .reveal-seed-phrase__reveal-button')
+            await driver.wait(until.elementLocated(byRevealButton, 10000))
+            const revealSeedPhraseButton = await findElement(driver, byRevealButton, 10000)
+            await revealSeedPhraseButton.click()
+            await delay(regularDelayMs)
+
+            const nextScreen = await findElement(driver, By.css('button.first-time-flow__button'))
+            await nextScreen.click()
+            await delay(regularDelayMs)
+          }
+
+          for (let i = 0; i < 12; i++) {
+            await clickWordAndWait(words[i])
+          }
+        } catch (e) {
+          if (count > 2) {
+            throw e
+          } else {
+            await loadExtension(driver, extensionId)
+            await retypeSeedPhrase(words, true, count + 1)
+          }
         }
       }
-    }
 
-    it('can retype the seed phrase', async () => {
-      const words = seedPhrase.split(' ')
+      it('can retype the seed phrase', async () => {
+        const words = seedPhrase.split(' ')
 
-      await retypeSeedPhrase(words)
-      await delay(regularDelayMs)
+        await retypeSeedPhrase(words)
 
-      const confirm = await findElement(driver, By.xpath(`//button[contains(text(), 'Confirm')]`))
-      await confirm.click()
-      await delay(regularDelayMs)
-    })
+        const confirm = await findElement(driver, By.xpath(`//button[contains(text(), 'Confirm')]`))
+        await confirm.click()
+        await delay(regularDelayMs)
+      })
 
-    it('clicks through the deposit modal', async () => {
-      const byBuyModal = By.css('span .modal')
-      const buyModal = await driver.wait(until.elementLocated(byBuyModal))
-      const closeModal = await findElement(driver, By.css('.page-container__header-close'))
-      await closeModal.click()
-      await driver.wait(until.stalenessOf(buyModal))
-      await delay(regularDelayMs)
+      it('clicks through the success screen', async () => {
+        await findElement(driver, By.xpath(`//div[contains(text(), 'Congratulations')]`))
+        const doneButton = await findElement(driver, By.css('button.first-time-flow__button'))
+        await doneButton.click()
+        await delay(regularDelayMs)
+      })
     })
-  })
 
   describe('Show account information', () => {
     it('show account details dropdown menu', async () => {
diff --git a/test/e2e/beta/metamask-beta-ui.spec.js b/test/e2e/beta/metamask-beta-ui.spec.js
index 798cce372..26aa50a43 100644
--- a/test/e2e/beta/metamask-beta-ui.spec.js
+++ b/test/e2e/beta/metamask-beta-ui.spec.js
@@ -102,11 +102,18 @@ describe('MetaMask', function () {
 
   describe('Going through the first time flow', () => {
     it('clicks the continue button on the welcome screen', async () => {
-      const welcomeScreenBtn = await findElement(driver, By.css('.welcome-page .first-time-flow__button'))
+      await findElement(driver, By.css('.welcome-page__header'))
+      const welcomeScreenBtn = await findElement(driver, By.css('.first-time-flow__button'))
       welcomeScreenBtn.click()
       await delay(largeDelayMs)
     })
 
+    it('clicks the "Create New Wallet" option', async () => {
+      const customRpcButton = await findElement(driver, By.xpath(`//button[contains(text(), 'Create a Wallet')]`))
+      customRpcButton.click()
+      await delay(largeDelayMs)
+    })
+
     it('accepts a secure password', async () => {
       const passwordBox = await findElement(driver, By.css('.first-time-flow__form #create-password'))
       const passwordBoxConfirm = await findElement(driver, By.css('.first-time-flow__form #confirm-password'))
@@ -114,43 +121,16 @@ describe('MetaMask', function () {
 
       await passwordBox.sendKeys('correct horse battery staple')
       await passwordBoxConfirm.sendKeys('correct horse battery staple')
-      await button.click()
-      await delay(regularDelayMs)
-    })
-
-    it('clicks through the unique image screen', async () => {
-      await findElement(driver, By.css('.first-time-flow__unique-image'))
-      const nextScreen = await findElement(driver, By.css('button.first-time-flow__button'))
-      await nextScreen.click()
-      await delay(regularDelayMs)
-    })
 
-    it('clicks through the ToS', async () => {
-      // terms of use
-      await findElement(driver, By.css('.first-time-flow__markdown'))
-      const canClickThrough = await driver.findElement(By.css('button.first-time-flow__button')).isEnabled()
-      assert.equal(canClickThrough, false, 'disabled continue button')
-      const bottomOfTos = await findElement(driver, By.linkText('Attributions'))
-      await driver.executeScript('arguments[0].scrollIntoView(true)', bottomOfTos)
-      await delay(regularDelayMs)
-      const acceptTos = await findElement(driver, By.css('button.first-time-flow__button'))
-      driver.wait(until.elementIsEnabled(acceptTos))
-      await acceptTos.click()
-      await delay(regularDelayMs)
-    })
+      const tosCheckBox = await findElement(driver, By.css('.first-time-flow__checkbox'))
+      await tosCheckBox.click()
 
-    it('clicks through the privacy notice', async () => {
-      // privacy notice
-      const nextScreen = await findElement(driver, By.css('button.first-time-flow__button'))
-      await nextScreen.click()
+      await button.click()
       await delay(regularDelayMs)
     })
 
-    it('clicks through the phishing notice', async () => {
-      // phishing notice
-      const noticeElement = await driver.findElement(By.css('.first-time-flow__markdown'))
-      await driver.executeScript('arguments[0].scrollTop = arguments[0].scrollHeight', noticeElement)
-      await delay(regularDelayMs)
+    it('clicks through the security warning screen', async () => {
+      await findElement(driver, By.xpath(`//div[contains(text(), 'Protect Your Keys!')]`))
       const nextScreen = await findElement(driver, By.css('button.first-time-flow__button'))
       await nextScreen.click()
       await delay(regularDelayMs)
@@ -219,12 +199,10 @@ describe('MetaMask', function () {
       await delay(regularDelayMs)
     })
 
-    it('clicks through the deposit modal', async () => {
-      const byBuyModal = By.css('span .modal')
-      const buyModal = await driver.wait(until.elementLocated(byBuyModal))
-      const closeModal = await findElement(driver, By.css('.page-container__header-close'))
-      await closeModal.click()
-      await driver.wait(until.stalenessOf(buyModal))
+    it('clicks through the success screen', async () => {
+      await findElement(driver, By.xpath(`//div[contains(text(), 'Congratulations')]`))
+      const doneButton = await findElement(driver, By.css('button.first-time-flow__button'))
+      await doneButton.click()
       await delay(regularDelayMs)
     })
   })