4 files changed, 42 insertions, 24 deletions
diff --git a/app/scripts/controllers/preferences.js b/app/scripts/controllers/preferences.js
index d2ef987f2..565f4f292 100644
--- a/app/scripts/controllers/preferences.js
+++ b/app/scripts/controllers/preferences.js
@@ -33,10 +33,7 @@ class PreferencesController {
       tokens: [],
       suggestedTokens: {},
       useBlockie: false,
-      featureFlags: {
-        betaUI: true,
-        skipAnnounceBetaUI: true,
-      },
+      featureFlags: {},
       knownMethodData: {},
       currentLocale: opts.initLangCode,
       identities: {},
@@ -47,6 +44,7 @@ class PreferencesController {
         useNativeCurrencyAsPrimaryCurrency: true,
       },
       completedOnboarding: false,
+      completedUiMigration: true,
     }, opts.initState)
 
     this.diagnostics = opts.diagnostics
@@ -552,6 +550,14 @@ class PreferencesController {
     return Promise.resolve(true)
   }
 
+  /**
+   * Sets the {@code completedUiMigration} state to {@code true}, indicating that the user has completed the UI switch.
+   */
+  completeUiMigration () {
+    this.store.updateState({ completedUiMigration: true })
+    return Promise.resolve(true)
+  }
+
   //
   // PRIVATE METHODS
   //
diff --git a/app/scripts/metamask-controller.js b/app/scripts/metamask-controller.js
index 942c6a62e..16ab34c7d 100644
--- a/app/scripts/metamask-controller.js
+++ b/app/scripts/metamask-controller.js
@@ -426,6 +426,7 @@ module.exports = class MetamaskController extends EventEmitter {
       setAccountLabel: nodeify(preferencesController.setAccountLabel, preferencesController),
       setFeatureFlag: nodeify(preferencesController.setFeatureFlag, preferencesController),
       setPreference: nodeify(preferencesController.setPreference, preferencesController),
+      completeUiMigration: nodeify(preferencesController.completeUiMigration, preferencesController),
       completeOnboarding: nodeify(preferencesController.completeOnboarding, preferencesController),
       addKnownMethodData: nodeify(preferencesController.addKnownMethodData, preferencesController),
 
diff --git a/app/scripts/migrations/032.js b/app/scripts/migrations/032.js
new file mode 100644
index 000000000..e89fe383f
--- /dev/null
+++ b/app/scripts/migrations/032.js
@@ -0,0 +1,29 @@
+const version = 32
+const clone = require('clone')
+
+/**
+ * The purpose of this migration is to set the {@code completedUiMigration} flag based on the user's UI preferences
+ */
+module.exports = {
+  version,
+  migrate: async function (originalVersionedData) {
+    const versionedData = clone(originalVersionedData)
+    versionedData.meta.version = version
+    const state = versionedData.data
+    versionedData.data = transformState(state)
+    return versionedData
+  },
+}
+
+function transformState (state) {
+  const { PreferencesController } = state
+
+  if (PreferencesController) {
+    const { betaUI } = PreferencesController.featureFlags || {}
+    // Users who have been using the "beta" UI are considered to have completed the migration
+    // as they'll see no difference in this version
+    PreferencesController.completedUiMigration = betaUI
+  }
+
+  return state
+}
diff --git a/app/scripts/ui.js b/app/scripts/ui.js
index e4b9b7b9c..67ec6bf06 100644
--- a/app/scripts/ui.js
+++ b/app/scripts/ui.js
@@ -1,7 +1,5 @@
 const injectCss = require('inject-css')
-const OldMetaMaskUiCss = require('../../old-ui/css')
 const NewMetaMaskUiCss = require('../../ui/css')
-const {getShouldUseNewUi} = require('../../ui/app/selectors')
 const startPopup = require('./popup-core')
 const PortStream = require('extension-port-stream')
 const { getEnvironmentType } = require('./lib/util')
@@ -49,30 +47,14 @@ async function start () {
     if (err) return displayCriticalError(err)
 
     const state = store.getState()
-    const { metamask: { completedOnboarding, featureFlags } = {} } = state
+    const { metamask: { completedOnboarding } = {} } = 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()
-    let deleteInjectedCss = injectCss(css)
-    let newBetaUIState
-
-    store.subscribe(() => {
-      const state = store.getState()
-      newBetaUIState = state.metamask.featureFlags.betaUI
-      if (newBetaUIState !== betaUIState) {
-        deleteInjectedCss()
-        betaUIState = newBetaUIState
-        css = betaUIState ? NewMetaMaskUiCss() : OldMetaMaskUiCss()
-        deleteInjectedCss = injectCss(css)
-      }
-    })
+    injectCss(NewMetaMaskUiCss())
   })