Migrate all users to the new UI

app/_locales/en/messages.json

@@ -1437,6 +1437,9 @@
   "typePassword": {
     "message": "Type your MetaMask password"
   },
+  "uiMigrationAnnouncement": {
+    "message": "Welcome to the new MetaMask UI. If you have feedback about the UI or feature requests, please reach out to our support team or on GitHub."
+  },
   "uiWelcome": {
     "message": "Welcome to the New UI (Beta)"
   },

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
   //

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),
 

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
+}

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())
   })
 
 

test/unit/ui/app/reducers/metamask.spec.js

@@ -502,17 +502,15 @@ describe('MetaMask Reducers', () => {
     assert.equal(state.useBlockie, true)
   })
 
-  it('updates feature flag', () => {
+  it('updates an arbitrary feature flag', () => {
     const state = reduceMetamask({}, {
       type: actions.UPDATE_FEATURE_FLAGS,
       value: {
-        betaUI: true,
-        skipAnnounceBetaUI: true,
+        foo: true,
       },
     })
 
-    assert.equal(state.featureFlags.betaUI, true)
-    assert.equal(state.featureFlags.skipAnnounceBetaUI, true)
+    assert.equal(state.featureFlags.foo, true)
   })
 
   it('updates network endpoint type', () => {

ui/app/actions.js

@@ -317,6 +317,11 @@ var actions = {
   UPDATE_PREFERENCES: 'UPDATE_PREFERENCES',
   setUseNativeCurrencyAsPrimaryCurrencyPreference,
 
+  // Migration of users to new UI
+  setCompletedUiMigration,
+  completeUiMigration,
+  COMPLETE_UI_MIGRATION: 'COMPLETE_UI_MIGRATION',
+
   // Onboarding
   setCompletedOnboarding,
   completeOnboarding,
@@ -2474,6 +2479,31 @@ function completeOnboarding () {
   }
 }
 
+function setCompletedUiMigration () {
+  return dispatch => {
+    dispatch(actions.showLoadingIndication())
+    return new Promise((resolve, reject) => {
+      background.completeUiMigration(err => {
+        dispatch(actions.hideLoadingIndication())
+
+        if (err) {
+          dispatch(actions.displayWarning(err.message))
+          return reject(err)
+        }
+
+        dispatch(actions.completeUiMigration())
+        resolve()
+      })
+    })
+  }
+}
+
+function completeUiMigration () {
+  return {
+    type: actions.COMPLETE_UI_MIGRATION,
+  }
+}
+
 function setNetworkNonce (networkNonce) {
   return {
     type: actions.SET_NETWORK_NONCE,

ui/app/app.js

@@ -22,6 +22,7 @@ import Settings from './components/pages/settings'
 import Authenticated from './higher-order-components/authenticated'
 import Initialized from './higher-order-components/initialized'
 import Lock from './components/pages/lock'
+import UiMigrationAnnouncement from './components/ui-migration-annoucement'
 const RestoreVaultPage = require('./components/pages/keychains/restore-vault').default
 const RevealSeedConfirmation = require('./components/pages/keychains/reveal-seed')
 const AddTokenPage = require('./components/pages/add-token')
@@ -173,6 +174,7 @@ class App extends Component {
           }
         }}
       >
+        <UiMigrationAnnouncement />
         <Modal />
         <Alert
           visible={this.props.alertOpen}
@@ -303,7 +305,6 @@ App.propTypes = {
   unapprovedTypedMessagesCount: PropTypes.number,
   welcomeScreenSeen: PropTypes.bool,
   isPopup: PropTypes.bool,
-  betaUI: PropTypes.bool,
   isMouseUser: PropTypes.bool,
   setMouseUserState: PropTypes.func,
   t: PropTypes.func,
@@ -375,7 +376,6 @@ function mapStateToProps (state) {
     frequentRpcListDetail: state.metamask.frequentRpcListDetail || [],
     currentCurrency: state.metamask.currentCurrency,
     isMouseUser: state.appState.isMouseUser,
-    betaUI: state.metamask.featureFlags.betaUI,
     isRevealingSeedWords: state.metamask.isRevealingSeedWords,
     Qr: state.appState.Qr,
     welcomeScreenSeen: state.metamask.welcomeScreenSeen,

ui/app/components/index.scss

@@ -77,3 +77,5 @@
 @import './gas-customization/index';
 
 @import './gas-customization/gas-price-button-group/index';
+
+@import './ui-migration-annoucement/index';

ui/app/components/modals/modal.js

@@ -25,7 +25,6 @@ import ConfirmRemoveAccount from './confirm-remove-account'
 import ConfirmResetAccount from './confirm-reset-account'
 import TransactionConfirmed from './transaction-confirmed'
 import CancelTransaction from './cancel-transaction'
-import WelcomeBeta from './welcome-beta'
 import RejectTransactions from './reject-transactions'
 import ClearApprovedOrigins from './clear-approved-origins'
 import ConfirmCustomizeGasModal from '../gas-customization/gas-modal-page-container'
@@ -201,19 +200,6 @@ const MODALS = {
     },
   },
 
-  BETA_UI_NOTIFICATION_MODAL: {
-    contents: h(WelcomeBeta),
-    mobileModalStyle: {
-      ...modalContainerMobileStyle,
-    },
-    laptopModalStyle: {
-      ...modalContainerLaptopStyle,
-    },
-    contentStyle: {
-      borderRadius: '8px',
-    },
-  },
-
   CLEAR_APPROVED_ORIGINS: {
     contents: h(ClearApprovedOrigins),
     mobileModalStyle: {

ui/app/components/pages/settings/settings-tab/settings-tab.component.js

@@ -46,12 +46,10 @@ export default class SettingsTab extends PureComponent {
     delRpcTarget: PropTypes.func,
     displayWarning: PropTypes.func,
     revealSeedConfirmation: PropTypes.func,
-    setFeatureFlagToBeta: PropTypes.func,
     showClearApprovalModal: PropTypes.func,
     showResetAccountConfirmationModal: PropTypes.func,
     warning: PropTypes.string,
     history: PropTypes.object,
-    isMascara: PropTypes.bool,
     updateCurrentLocale: PropTypes.func,
     currentLocale: PropTypes.string,
     useBlockie: PropTypes.bool,
@@ -338,34 +336,6 @@ export default class SettingsTab extends PureComponent {
     )
   }
 
-  renderOldUI () {
-    const { t } = this.context
-    const { setFeatureFlagToBeta } = this.props
-
-    return (
-      <div className="settings-page__content-row">
-        <div className="settings-page__content-item">
-          <span>{ t('useOldUI') }</span>
-        </div>
-        <div className="settings-page__content-item">
-          <div className="settings-page__content-item-col">
-            <Button
-              type="secondary"
-              large
-              className="settings-tab__button--orange"
-              onClick={event => {
-                event.preventDefault()
-                setFeatureFlagToBeta()
-              }}
-            >
-              { t('useOldUI') }
-            </Button>
-          </div>
-        </div>
-      </div>
-    )
-  }
-
   renderResetAccount () {
     const { t } = this.context
     const { showResetAccountConfirmationModal } = this.props
@@ -523,7 +493,7 @@ export default class SettingsTab extends PureComponent {
   }
 
   render () {
-    const { warning, isMascara } = this.props
+    const { warning } = this.props
 
     return (
       <div className="settings-page__content">
@@ -534,7 +504,6 @@ export default class SettingsTab extends PureComponent {
         { this.renderNewRpcUrl() }
         { this.renderStateLogs() }
         { this.renderSeedWords() }
-        { !isMascara && this.renderOldUI() }
         { this.renderResetAccount() }
         { this.renderClearApproval() }
         { this.renderPrivacyOptIn() }

ui/app/components/pages/settings/settings-tab/settings-tab.container.js

@@ -27,14 +27,12 @@ const mapStateToProps = state => {
       privacyMode,
     } = {},
     provider = {},
-    isMascara,
     currentLocale,
   } = metamask
   const { useNativeCurrencyAsPrimaryCurrency } = preferencesSelector(state)
 
   return {
     warning,
-    isMascara,
     currentLocale,
     currentCurrency,
     conversionDate,
@@ -55,9 +53,6 @@ const mapDispatchToProps = dispatch => {
     revealSeedConfirmation: () => dispatch(revealSeedConfirmation()),
     setUseBlockie: value => dispatch(setUseBlockie(value)),
     updateCurrentLocale: key => dispatch(updateCurrentLocale(key)),
-    setFeatureFlagToBeta: () => {
-      return dispatch(setFeatureFlag('betaUI', false, 'OLD_UI_NOTIFICATION_MODAL'))
-    },
     setHexDataFeatureFlag: shouldShow => dispatch(setFeatureFlag('sendHexData', shouldShow)),
     setPrivacyMode: enabled => dispatch(setFeatureFlag('privacyMode', enabled)),
     showResetAccountConfirmationModal: () => dispatch(showModal({ name: 'CONFIRM_RESET_ACCOUNT' })),