3 files changed, 33 insertions, 5 deletions
diff --git a/app/scripts/controllers/preferences.js b/app/scripts/controllers/preferences.js
index 0aed4dbdf..de9006044 100644
--- a/app/scripts/controllers/preferences.js
+++ b/app/scripts/controllers/preferences.js
@@ -10,6 +10,7 @@ class PreferencesController {
       currentAccountTab: 'history',
       tokens: [],
       useBlockie: false,
+      featureFlags: {},
     }, opts.initState)
     this.store = new ObservableStore(initState)
   }
@@ -100,6 +101,22 @@ class PreferencesController {
   getFrequentRpcList () {
     return this.store.getState().frequentRpcList
   }
+
+  setFeatureFlag (feature, activated) {
+    const currentFeatureFlags = this.store.getState().featureFlags
+    const updatedFeatureFlags = {
+      ...currentFeatureFlags,
+      [feature]: activated,
+    }
+
+    this.store.updateState({ featureFlags: updatedFeatureFlags })
+
+    return Promise.resolve(updatedFeatureFlags)
+  }
+
+  getFeatureFlags () {
+    return this.store.getState().featureFlags
+  }
   //
   // PRIVATE METHODS
   //
diff --git a/app/scripts/metamask-controller.js b/app/scripts/metamask-controller.js
index a96d20d3b..018eb2c76 100644
--- a/app/scripts/metamask-controller.js
+++ b/app/scripts/metamask-controller.js
@@ -350,6 +350,7 @@ module.exports = class MetamaskController extends EventEmitter {
       addToken: nodeify(preferencesController.addToken, preferencesController),
       removeToken: nodeify(preferencesController.removeToken, preferencesController),
       setCurrentAccountTab: nodeify(preferencesController.setCurrentAccountTab, preferencesController),
+      setFeatureFlag: nodeify(preferencesController.setFeatureFlag, preferencesController),
 
       // AddressController
       setAddressBook: nodeify(addressBookController.setAddressBook, addressBookController),
diff --git a/app/scripts/popup.js b/app/scripts/popup.js
index 5f17f0651..d0952af6a 100644
--- a/app/scripts/popup.js
+++ b/app/scripts/popup.js
@@ -1,5 +1,6 @@
 const injectCss = require('inject-css')
-const MetaMaskUiCss = require('../../ui/css')
+const OldMetaMaskUiCss = require('../../old-ui/css')
+const NewMetaMaskUiCss = require('../../ui/css')
 const startPopup = require('./popup-core')
 const PortStream = require('./lib/port-stream.js')
 const isPopupOrNotification = require('./lib/is-popup-or-notification')
@@ -11,10 +12,6 @@ const notificationManager = new NotificationManager()
 // create platform global
 global.platform = new ExtensionPlatform()
 
-// inject css
-const css = MetaMaskUiCss()
-injectCss(css)
-
 // identify window type (popup, notification)
 const windowType = isPopupOrNotification()
 global.METAMASK_UI_TYPE = windowType
@@ -28,8 +25,21 @@ const connectionStream = new PortStream(extensionPort)
 const container = document.getElementById('app-content')
 startPopup({ container, connectionStream }, (err, store) => {
   if (err) return displayCriticalError(err)
+
+  let betaUIState = store.getState().metamask.featureFlags.betaUI
+  let css = betaUIState ? 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)
+    }
     if (state.appState.shouldClose) notificationManager.closePopup()
   })
 })