Default to the new UI for first time users

app/scripts/controllers/preferences.js

@@ -32,7 +32,9 @@ class PreferencesController {
       tokens: [],
       suggestedTokens: {},
       useBlockie: false,
-      featureFlags: {},
+      featureFlags: {
+        betaUI: true,
+      },
       currentLocale: opts.initLangCode,
       identities: {},
       lostIdentities: {},

app/scripts/ui.js

@@ -1,6 +1,7 @@
 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')
@@ -33,10 +34,6 @@ async function start () {
     return state
   }
 
-  // inject css
-  // const css = MetaMaskUiCss()
-  // injectCss(css)
-
   // identify window type (popup, notification)
   const windowType = getEnvironmentType(window.location.href)
   global.METAMASK_UI_TYPE = windowType
@@ -51,15 +48,9 @@ async function start () {
   startPopup({ container, connectionStream }, (err, store) => {
     if (err) return displayCriticalError(err)
 
-    // Code commented out until we begin auto adding users to NewUI
-    // const { isMascara, identities = {}, featureFlags = {} } = store.getState().metamask
-    // const firstTime = Object.keys(identities).length === 0
-    const { isMascara, featureFlags = {} } = store.getState().metamask
-    let betaUIState = featureFlags.betaUI
-
-    // Code commented out until we begin auto adding users to NewUI
-    // const useBetaCss = isMascara || firstTime || betaUIState
-    const useBetaCss = isMascara || betaUIState
+    const state = store.getState()
+    let betaUIState = Boolean(state.featureFlags && state.featureFlags.betaUI)
+    const useBetaCss = getShouldUseNewUi(state)
 
     let css = useBetaCss ? NewMetaMaskUiCss() : OldMetaMaskUiCss()
     let deleteInjectedCss = injectCss(css)

ui/app/select-app.js

@@ -5,17 +5,14 @@ const h = require('react-hyperscript')
 const { HashRouter } = require('react-router-dom')
 const App = require('./app')
 const OldApp = require('../../old-ui/app/app')
-const { autoAddToBetaUI } = require('./selectors')
+const { getShouldUseNewUi } = require('./selectors')
 const { setFeatureFlag } = require('./actions')
 const I18nProvider = require('./i18n-provider')
 
 function mapStateToProps (state) {
   return {
-    betaUI: state.metamask.featureFlags.betaUI,
-    autoAdd: autoAddToBetaUI(state),
-    isUnlocked: state.metamask.isUnlocked,
     isMascara: state.metamask.isMascara,
-    firstTime: Object.keys(state.metamask.identities).length === 0,
+    shouldUseNewUi: getShouldUseNewUi(state),
   }
 }
 
@@ -56,17 +53,13 @@ SelectedApp.prototype.componentWillReceiveProps = function (nextProps) {
 }
 
 SelectedApp.prototype.render = function () {
-  // Code commented out until we begin auto adding users to NewUI
-  // const { betaUI, isMascara, firstTime } = this.props
-  // const Selected = betaUI || isMascara || firstTime ? App : OldApp
-
-  const { betaUI, isMascara } = this.props
-
-  return betaUI || isMascara
-  ? h(HashRouter, {
-      hashType: 'noslash',
-    }, [
-      h(I18nProvider, [ h(App) ]),
-    ])
-  : h(OldApp)
+  const { shouldUseNewUi } = this.props
+  const newUi = h(HashRouter, {
+    hashType: 'noslash',
+  }, [
+    h(I18nProvider, [
+      h(App),
+    ]),
+  ])
+  return shouldUseNewUi ? newUi : h(OldApp)
 }

ui/app/selectors.js

@@ -31,6 +31,7 @@ const selectors = {
   getSelectedTokenToFiatRate,
   getSelectedTokenContract,
   autoAddToBetaUI,
+  getShouldUseNewUi,
   getSendMaxModeState,
   getCurrentViewContext,
   getTotalUnapprovedCount,
@@ -185,6 +186,13 @@ function autoAddToBetaUI (state) {
   return userIsNotInBeta && userPassesThreshold
 }
 
+function getShouldUseNewUi (state) {
+  const isAlreadyUsingBetaUi = state.metamask.featureFlags.betaUI
+  const isMascara = state.metamask.isMascara
+  const isFreshInstall = Object.keys(state.metamask.identities).length === 0
+  return isAlreadyUsingBetaUi || isMascara || isFreshInstall
+}
+
 function getCurrentViewContext (state) {
   const { currentView = {} } = state.appState
   return currentView.context