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

4 files changed, 74 insertions, 1 deletions

diff --git a/app/_locales/en/messages.json b/app/_locales/en/messages.json
index 2d0098a24..d4860bbfb 100644
--- a/app/_locales/en/messages.json
+++ b/app/_locales/en/messages.json
@@ -92,6 +92,15 @@
   "advanced": {
     "message": "Advanced"
   },
+  "agreeTermsOfService": {
+    "message": "I agree to the Terms of Service"
+  },
+  "allDone": {
+    "message": "All Done"
+  },
+  "alreadyHaveSeedPhrase": {
+    "message": "No, I already have a seed phrase"
+  },
   "amount": {
     "message": "Amount"
   },
@@ -239,6 +248,9 @@
   "confirmTransaction": {
     "message": "Confirm Transaction"
   },
+  "congratulations": {
+    "message": "Congratulations"
+  },
   "connectHardwareWallet": {
     "message": "Connect Hardware Wallet"
   },
@@ -326,6 +338,9 @@
   "createAccount": {
     "message": "Create Account"
   },
+  "createAWallet": {
+    "message": "Create a Wallet"
+  },
   "createDen": {
     "message": "Create"
   },
@@ -448,6 +463,24 @@
   "encryptNewDen": {
     "message": "Encrypt your new DEN"
   },
+  "endOfFlowMessage1": {
+    "message": "You passed the test - keep your seedphrase safe, it's your responsibility!"
+  },
+  "endOfFlowMessage2": {
+    "message": "Tips on storing it safely"
+  },
+  "endOfFlowMessage3": {
+    "message": "Save a backup in multiple places"
+  },
+  "endOfFlowMessage4": {
+    "message": "Never tell anyone"
+  },
+  "endOfFlowMessage5": {
+    "message": "If you need to back your seed phrase again, you can find it in Settings -> Security."
+  },
+  "endOfFlowMessage6": {
+    "message": "MetaMask cannot recover your seedphrase. Learn more."
+  },
   "ensNameNotFound": {
     "message": "ENS name not found"
   },
@@ -581,10 +614,16 @@
   "getHelp": {
     "message": "Get Help."
   },
+  "getStarted": {
+    "message": "Get Started"
+  },
   "greaterThanMin": {
     "message": "must be greater than or equal to $1.",
     "description": "helper for inputting hex as decimal input"
   },
+  "happyToSeeYou": {
+    "message": "We’re happy to see you."
+  },
   "hardware": {
     "message": "hardware"
   },
@@ -647,6 +686,9 @@
   "importDen": {
     "message": "Import Existing DEN"
   },
+  "importWallet": {
+    "message": "Import Wallet"
+  },
   "imported": {
     "message": "Imported",
     "description": "status showing that an account has been fully loaded into the keyring"
@@ -731,6 +773,9 @@
     "message": "must be less than or equal to $1.",
     "description": "helper for inputting hex as decimal input"
   },
+  "letsGoSetUp": {
+    "message": "Yes, let’s get set up!"
+  },
   "likeToAddTokens": {
     "message": "Would you like to add these tokens?"
   },
@@ -777,7 +822,7 @@
     "message": "Message"
   },
   "metamaskDescription": {
-    "message": "MetaMask is a secure identity vault for Ethereum."
+    "message": "Connecting you to Ethereum and the Decentralized Web."
   },
   "metamaskSeedWords": {
     "message": "MetaMask Seed Words"
@@ -848,6 +893,21 @@
   "newNetwork": {
     "message": "New Network"
   },
+  "newToMetaMask": {
+    "message": "New to MetaMask?"
+  },
+  "noAlreadyHaveSeed": {
+    "message": "No, I already have a seed phrase"
+  },
+  "protectYourKeys": {
+    "message": "Protect Your Keys!"
+  },
+  "protectYourKeysMessage1": {
+    "message": "Be careful with your seed phrase — there have been reports of websites that attempt to imitate MetaMask. MetaMask will never ask for your seed phrase!"
+  },
+  "protectYourKeysMessage2": {
+    "message": "Keep your phrase safe. If you see something fishy, or you’re uncertain about a website, email support@metamask.io"
+  },
   "rpcURL": {
     "message": "New RPC URL"
   },
@@ -1609,6 +1669,9 @@
   "yourUniqueAccountImageDescription2": {
     "message": "You’ll see this image everytime you need to confirm a transaction."
   },
+  "yourUniqueAccountImageDescription3": {
+    "message": "MetaMask will never ask for your seed phrase!"
+  },
   "zeroGasPriceOnSpeedUpError": {
     "message":"Zero gas price on speed up"
   }
diff --git a/app/images/download-alt.svg b/app/images/download-alt.svg
new file mode 100644
index 000000000..11c54fd66
--- /dev/null
+++ b/app/images/download-alt.svg
@@ -0,0 +1,5 @@
+<svg width="40" height="40" viewBox="0 0 40 40" fill="none" xmlns="http://www.w3.org/2000/svg">
+<rect x="40" y="40" width="40" height="4.57143" rx="2.28571" transform="rotate(-180 40 40)" fill="#979797"/>
+<rect x="22.5641" y="21.7144" width="4.10256" height="21.7143" rx="2.05128" transform="rotate(-180 22.5641 21.7144)" fill="#979797"/>
+<path d="M20.5 30L7.07661 12L33.9234 12L20.5 30Z" fill="#979797"/>
+</svg>
diff --git a/app/images/sleuth.svg b/app/images/sleuth.svg
new file mode 100644
index 000000000..f4ac8c787
--- /dev/null
+++ b/app/images/sleuth.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 36 36"><path fill="#66757F" d="M33 36v-1c0-3.313-2.687-6-6-6H9c-3.313 0-6 2.687-6 6v1h30z"/><path fill="#EF9645" d="M12 27.482C13.672 29.057 15.746 30 18 30s4.327-.944 6-2.518V26H12v1.482z"/><path fill="#66757F" d="M26.75 20.435c1.188.208 2.619.129 2.416.917-.479 1.854-2.604 1.167-2.979 1.188-.375.02.563-2.105.563-2.105z"/><path fill="#292F33" d="M27.062 20.645c1.875.25 2.541.416 1.166.958-.772.305-2.243 4.803-3.331 4.118-1.087-.685 2.165-5.076 2.165-5.076z"/><path fill="#66757F" d="M9.255 20.435c-1.188.208-2.619.129-2.416.917.479 1.854 2.604 1.167 2.979 1.188.375.02-.563-2.105-.563-2.105z"/><path fill="#292F33" d="M8.943 20.645c-1.875.25-2.541.416-1.166.958.772.305 2.243 4.803 3.331 4.118 1.088-.685-2.165-5.076-2.165-5.076z"/><path fill="#FFAC33" d="M8.055 11.031c-1.953 0-2.305 3.164-.664 3.594 0 0-1.367 3.32 1.953 3.32-.547-1.68-1.562-4.414-.781-6.406m19.38-.508c1.953 0 2.305 3.164.664 3.594 0 0 1.367 3.32-1.953 3.32.547-1.68 1.562-4.414.781-6.406"/><ellipse fill="#FFDC5D" cx="18" cy="15.5" rx="10" ry="12.5"/><path fill="#662113" d="M14 17c-.552 0-1-.448-1-1v-1c0-.552.448-1 1-1s1 .448 1 1v1c0 .552-.448 1-1 1zm8 0c-.553 0-1-.448-1-1v-1c0-.552.447-1 1-1s1 .448 1 1v1c0 .552-.447 1-1 1z"/><path fill="#C1694F" d="M19 20.5c0 .276-.224.5-.5.5h-1c-.276 0-.5-.224-.5-.5s.224-.5.5-.5h1c.276 0 .5.224.5.5z"/><path fill-rule="evenodd" clip-rule="evenodd" fill="#292F33" d="M7.657 14.788c.148.147.888.591 1.036 1.034.148.443.445 2.954 1.333 3.693.916.762 4.37.478 5.032.149 1.48-.738 1.662-2.798 1.924-3.842.148-.591 1.036-.591 1.036-.591s.888 0 1.036.591c.262 1.044.444 3.104 1.924 3.841.662.33 4.116.614 5.034-.147.887-.739 1.183-3.25 1.331-3.694.146-.443.888-.886 1.035-1.034.148-.148.148-.739 0-.887-.296-.295-3.788-.559-7.548-.148-.75.082-1.035.295-2.812.295-1.776 0-2.062-.214-2.812-.295-3.759-.411-7.252-.148-7.548.148-.149.148-.149.74-.001.887z"/><path fill="#66757F" d="M7.858 8.395S9.217-.506 13.79.023c3.512.406 4.89.825 7.833.097 1.947-.482 4.065 1.136 5.342 4.379.816 2.068 1.224 4.041 1.224 4.041s3.938-.385 4.165 1.732c.228 2.117-4.354 4.716-15.889 4.716C10 14.987 3.33 12.63 3.013 10.657c-.317-1.973 4.845-2.262 4.845-2.262z"/><path fill="#292F33" d="M8.125 7.15s-.27 1.104-.406 1.871c-.136.768.226 1.296 2.705 1.824 3.287.7 10.679.692 15.058-.383 1.759-.432 2.886-.72 2.751-1.583-.167-1.068-.196-1.066-.541-2.208 0 0-1.477.502-3.427.96-2.66.624-9.964.911-13.481.144-1.874-.41-2.659-.625-2.659-.625zm-.136 13.953c-.354.145 2.921 1.378 7.48 1.458 4.771.084 6.234.39 5.146 1.459-1.146 1.125-.852 2.894-.771 3.418.081.524 2.047 1.916 2.208 2.56.161.645-1.229 5.961-1.229 5.961l-8.729-.252c-2.565-8.844-2.883-8.501-4.105-13.604-.241-1.008 0-1 0-1z"/><path fill="#66757F" d="M6.989 21.144c-.354.146 2.921 1.378 7.48 1.458 4.771.084 6.234.39 5.146 1.459-1.146 1.125-.664 2.894-.583 3.418.081.524 1.859 1.916 2.021 2.561.16.644-1.231 5.96-1.231 5.96l-8.729-.252c-2.565-8.844-2.883-8.501-4.105-13.604-.24-1.008.001-1 .001-1z"/><path fill="#292F33" d="M28.052 21.103c.354.145-2.921 1.378-7.479 1.458-4.771.084-6.234.39-5.146 1.459 1.146 1.125 2.976 2.892 2.896 3.416-.081.524-4.172 1.918-4.333 2.562-.161.645 1.229 5.961 1.229 5.961l8.729-.252c2.565-8.844 2.883-8.501 4.104-13.604.241-1.008 0-1 0-1z"/><path fill="#66757F" d="M28.958 21.103c.354.145-2.921 1.378-7.479 1.458-4.771.084-6.234.39-5.146 1.459 1.146 1.125 2.977 2.892 2.896 3.416-.081.524-4.172 1.918-4.333 2.562-.161.645 1.229 5.961 1.229 5.961l8.657.01c2.565-8.844 2.955-8.763 4.177-13.866.24-1.008-.001-1-.001-1z"/></svg>
diff --git a/app/images/thin-plus.svg b/app/images/thin-plus.svg
new file mode 100644
index 000000000..f46c72a4a
--- /dev/null
+++ b/app/images/thin-plus.svg
@@ -0,0 +1,4 @@
+<svg width="40" height="40" viewBox="0 0 40 40" fill="none" xmlns="http://www.w3.org/2000/svg">
+<rect y="18" width="40" height="4" rx="2" fill="#979797"/>
+<rect x="18" width="4" height="40" rx="2" fill="#979797"/>
+</svg>