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

5 files changed, 52 insertions, 2 deletions

diff --git a/app/scripts/controllers/preferences.js b/app/scripts/controllers/preferences.js
index fa162c21f..e82a69da2 100644
--- a/app/scripts/controllers/preferences.js
+++ b/app/scripts/controllers/preferences.js
@@ -46,6 +46,7 @@ class PreferencesController {
       preferences: {
         useNativeCurrencyAsPrimaryCurrency: true,
       },
+      completedOnboarding: false,
     }, opts.initState)
 
     this.diagnostics = opts.diagnostics
@@ -516,6 +517,15 @@ class PreferencesController {
     return this.store.getState().preferences
   }
 
+  /**
+   * Sets the completedOnboarding state to true, indicating that the user has completed the
+   * onboarding process.
+   */
+  completeOnboarding () {
+    this.store.updateState({ completedOnboarding: true })
+    return Promise.resolve(true)
+  }
+
   //
   // PRIVATE METHODS
   //
diff --git a/app/scripts/metamask-controller.js b/app/scripts/metamask-controller.js
index ea57582a0..4189bdd10 100644
--- a/app/scripts/metamask-controller.js
+++ b/app/scripts/metamask-controller.js
@@ -425,6 +425,7 @@ module.exports = class MetamaskController extends EventEmitter {
       setAccountLabel: nodeify(preferencesController.setAccountLabel, preferencesController),
       setFeatureFlag: nodeify(preferencesController.setFeatureFlag, preferencesController),
       setPreference: nodeify(preferencesController.setPreference, preferencesController),
+      completeOnboarding: nodeify(preferencesController.completeOnboarding, preferencesController),
       addKnownMethodData: nodeify(preferencesController.addKnownMethodData, preferencesController),
 
       // BlacklistController
diff --git a/app/scripts/migrations/031.js b/app/scripts/migrations/031.js
new file mode 100644
index 000000000..98d182828
--- /dev/null
+++ b/app/scripts/migrations/031.js
@@ -0,0 +1,31 @@
+// next version number
+const version = 31
+const clone = require('clone')
+
+ /*
+  * The purpose of this migration is to properly set the completedOnboarding flag baesd on the state
+  * of the KeyringController.
+  */
+module.exports = {
+  version,
+
+   migrate: async function (originalVersionedData) {
+    const versionedData = clone(originalVersionedData)
+    versionedData.meta.version = version
+    const state = versionedData.data
+    const newState = transformState(state)
+    versionedData.data = newState
+    return versionedData
+  },
+}
+
+ function transformState (state) {
+  const { KeyringController, PreferencesController } = state
+
+   if (KeyringController && PreferencesController) {
+    const { vault } = KeyringController
+    PreferencesController.completedOnboarding = Boolean(vault)
+  }
+
+   return state
+}
diff --git a/app/scripts/migrations/index.js b/app/scripts/migrations/index.js
index 99cca94b8..eb1b51685 100644
--- a/app/scripts/migrations/index.js
+++ b/app/scripts/migrations/index.js
@@ -41,4 +41,5 @@ module.exports = [
   require('./028'),
   require('./029'),
   require('./030'),
+  require('./031'),
 ]
diff --git a/app/scripts/ui.js b/app/scripts/ui.js
index 682a4aaac..e4b9b7b9c 100644
--- a/app/scripts/ui.js
+++ b/app/scripts/ui.js
@@ -5,7 +5,7 @@ const {getShouldUseNewUi} = require('../../ui/app/selectors')
 const startPopup = require('./popup-core')
 const PortStream = require('extension-port-stream')
 const { getEnvironmentType } = require('./lib/util')
-const { ENVIRONMENT_TYPE_NOTIFICATION } = require('./lib/enums')
+const { ENVIRONMENT_TYPE_NOTIFICATION, ENVIRONMENT_TYPE_FULLSCREEN } = require('./lib/enums')
 const extension = require('extensionizer')
 const ExtensionPlatform = require('./platforms/extension')
 const NotificationManager = require('./lib/notification-manager')
@@ -49,7 +49,14 @@ async function start () {
     if (err) return displayCriticalError(err)
 
     const state = store.getState()
-    let betaUIState = Boolean(state.featureFlags && state.featureFlags.betaUI)
+    const { metamask: { completedOnboarding, featureFlags } = {} } = state
+
+    if (!completedOnboarding && windowType !== ENVIRONMENT_TYPE_FULLSCREEN) {
+      global.platform.openExtensionInBrowser()
+      return
+    }
+
+    let betaUIState = Boolean(featureFlags && featureFlags.betaUI)
     const useBetaCss = getShouldUseNewUi(state)
 
     let css = useBetaCss ? NewMetaMaskUiCss() : OldMetaMaskUiCss()