Merge pull request #6082 from whymarrh/migrate-to-new-ui

Migrate all users to the new UI

19 files changed, 129 insertions, 200 deletions

diff --git a/ui/app/actions.js b/ui/app/actions.js
index c4212f35b..f3e9d2b27 100644
--- a/ui/app/actions.js
+++ b/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,
diff --git a/ui/app/app.js b/ui/app/app.js
index 28f4860a8..9c44bd553 100644
--- a/ui/app/app.js
+++ b/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,
diff --git a/ui/app/components/index.scss b/ui/app/components/index.scss
index 33bbb4573..96cc74c79 100644
--- a/ui/app/components/index.scss
+++ b/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';
diff --git a/ui/app/components/modals/modal.js b/ui/app/components/modals/modal.js
index 990be260c..32c860a7b 100644
--- a/ui/app/components/modals/modal.js
+++ b/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: {
diff --git a/ui/app/components/modals/welcome-beta/index.js b/ui/app/components/modals/welcome-beta/index.js
deleted file mode 100644
index 49e45b9d7..000000000
--- a/ui/app/components/modals/welcome-beta/index.js
+++ /dev/null
@@ -1 +0,0 @@
-export { default } from './welcome-beta.container'
diff --git a/ui/app/components/modals/welcome-beta/welcome-beta.component.js b/ui/app/components/modals/welcome-beta/welcome-beta.component.js
deleted file mode 100644
index ef1799164..000000000
--- a/ui/app/components/modals/welcome-beta/welcome-beta.component.js
+++ /dev/null
@@ -1,30 +0,0 @@
-import React from 'react'
-import PropTypes from 'prop-types'
-import Modal, { ModalContent } from '../../modal'
-
-const TransactionConfirmed = (props, context) => {
-  const { t } = context
-  const { hideModal } = props
-
-  return (
-    <Modal
-      onSubmit={() => hideModal()}
-      submitText={t('ok')}
-    >
-      <ModalContent
-        title={t('uiWelcome')}
-        description={t('uiWelcomeMessage')}
-      />
-    </Modal>
-  )
-}
-
-TransactionConfirmed.contextTypes = {
-  t: PropTypes.func,
-}
-
-TransactionConfirmed.propTypes = {
-  hideModal: PropTypes.func,
-}
-
-export default TransactionConfirmed
diff --git a/ui/app/components/modals/welcome-beta/welcome-beta.container.js b/ui/app/components/modals/welcome-beta/welcome-beta.container.js
deleted file mode 100644
index c5123ad47..000000000
--- a/ui/app/components/modals/welcome-beta/welcome-beta.container.js
+++ /dev/null
@@ -1,4 +0,0 @@
-import WelcomeBeta from './welcome-beta.component'
-import withModalProps from '../../../higher-order-components/with-modal-props'
-
-export default withModalProps(WelcomeBeta)
diff --git a/ui/app/components/pages/settings/settings-tab/settings-tab.component.js b/ui/app/components/pages/settings/settings-tab/settings-tab.component.js
index 8cd596423..ce1f72407 100644
--- a/ui/app/components/pages/settings/settings-tab/settings-tab.component.js
+++ b/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() }
diff --git a/ui/app/components/pages/settings/settings-tab/settings-tab.container.js b/ui/app/components/pages/settings/settings-tab/settings-tab.container.js
index d5fd8416a..92f645438 100644
--- a/ui/app/components/pages/settings/settings-tab/settings-tab.container.js
+++ b/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' })),
diff --git a/ui/app/components/send/send.selectors.js b/ui/app/components/send/send.selectors.js
index 140da2ce9..47a49500f 100644
--- a/ui/app/components/send/send.selectors.js
+++ b/ui/app/components/send/send.selectors.js
@@ -16,7 +16,6 @@ import {
 
 const selectors = {
   accountsWithSendEtherInfoSelector,
-  // autoAddToBetaUI,
   getAddressBook,
   getAmountConversionRate,
   getBlockGasLimit,
@@ -72,23 +71,6 @@ function accountsWithSendEtherInfoSelector (state) {
   return accountsWithSendEtherInfo
 }
 
-// function autoAddToBetaUI (state) {
-//   const autoAddTransactionThreshold = 12
-//   const autoAddAccountsThreshold = 2
-//   const autoAddTokensThreshold = 1
-
-//   const numberOfTransactions = state.metamask.selectedAddressTxList.length
-//   const numberOfAccounts = Object.keys(getMetaMaskAccounts(state)).length
-//   const numberOfTokensAdded = state.metamask.tokens.length
-
-//   const userPassesThreshold = (numberOfTransactions > autoAddTransactionThreshold) &&
-//     (numberOfAccounts > autoAddAccountsThreshold) &&
-//     (numberOfTokensAdded > autoAddTokensThreshold)
-//   const userIsNotInBeta = !state.metamask.featureFlags.betaUI
-
-//   return userIsNotInBeta && userPassesThreshold
-// }
-
 function getAddressBook (state) {
   return state.metamask.addressBook
 }
diff --git a/ui/app/components/send/tests/send-selectors-test-data.js b/ui/app/components/send/tests/send-selectors-test-data.js
index 66c0da229..d43d7c650 100644
--- a/ui/app/components/send/tests/send-selectors-test-data.js
+++ b/ui/app/components/send/tests/send-selectors-test-data.js
@@ -2,7 +2,7 @@ module.exports = {
   'metamask': {
     'isInitialized': true,
     'isUnlocked': true,
-    'featureFlags': {'betaUI': true, 'sendHexData': true},
+    'featureFlags': {'sendHexData': true},
     'rpcTarget': 'https://rawtestrpc.metamask.io/',
     'identities': {
       '0xfdea65c8e26263f6d9a1b5de9555d2931a33b825': {
diff --git a/ui/app/components/ui-migration-annoucement/index.js b/ui/app/components/ui-migration-annoucement/index.js
new file mode 100644
index 000000000..c6c8cc619
--- /dev/null
+++ b/ui/app/components/ui-migration-annoucement/index.js
@@ -0,0 +1 @@
+export {default} from './ui-migration-announcement.container'
diff --git a/ui/app/components/ui-migration-annoucement/index.scss b/ui/app/components/ui-migration-annoucement/index.scss
new file mode 100644
index 000000000..6138a3079
--- /dev/null
+++ b/ui/app/components/ui-migration-annoucement/index.scss
@@ -0,0 +1,22 @@
+.ui-migration-announcement {
+  position: absolute;
+  z-index: 9999;
+  width: 100vw;
+  height: 100vh;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  background: $white;
+
+  p {
+    box-sizing: border-box;
+    padding: 1em;
+    font-size: 12pt;
+  }
+
+  p:last-of-type {
+    cursor: pointer;
+    text-decoration: underline;
+    font-weight: bold;
+  }
+}
diff --git a/ui/app/components/ui-migration-annoucement/ui-migration-annoucement.component.js b/ui/app/components/ui-migration-annoucement/ui-migration-annoucement.component.js
new file mode 100644
index 000000000..7a4124972
--- /dev/null
+++ b/ui/app/components/ui-migration-annoucement/ui-migration-annoucement.component.js
@@ -0,0 +1,33 @@
+import PropTypes from 'prop-types'
+import React, {PureComponent} from 'react'
+
+export default class UiMigrationAnnouncement extends PureComponent {
+  static contextTypes = {
+    t: PropTypes.func.isRequired,
+  }
+
+  static defaultProps = {
+    shouldShowAnnouncement: true,
+  };
+
+  static propTypes = {
+    onClose: PropTypes.func.isRequired,
+    shouldShowAnnouncement: PropTypes.bool,
+  }
+
+  render () {
+    const { t } = this.context
+    const { onClose, shouldShowAnnouncement } = this.props
+
+    if (!shouldShowAnnouncement) {
+      return null
+    }
+
+    return (
+      <div className="ui-migration-announcement">
+        <p>{t('uiMigrationAnnouncement')}</p>
+        <p onClick={onClose}>{t('close')}</p>
+      </div>
+    )
+  }
+}
diff --git a/ui/app/components/ui-migration-annoucement/ui-migration-announcement.container.js b/ui/app/components/ui-migration-annoucement/ui-migration-announcement.container.js
new file mode 100644
index 000000000..6dc993b87
--- /dev/null
+++ b/ui/app/components/ui-migration-annoucement/ui-migration-announcement.container.js
@@ -0,0 +1,21 @@
+import { connect } from 'react-redux'
+import UiMigrationAnnouncement from './ui-migration-annoucement.component'
+import { setCompletedUiMigration } from '../../actions'
+
+const mapStateToProps = (state) => {
+  const shouldShowAnnouncement = !state.metamask.completedUiMigration
+
+  return {
+    shouldShowAnnouncement,
+  }
+}
+
+const mapDispatchToProps = dispatch => {
+  return {
+    onClose () {
+      dispatch(setCompletedUiMigration())
+    },
+  }
+}
+
+export default connect(mapStateToProps, mapDispatchToProps)(UiMigrationAnnouncement)
diff --git a/ui/app/reducers/metamask.js b/ui/app/reducers/metamask.js
index 632ec18f8..5a08f2d09 100644
--- a/ui/app/reducers/metamask.js
+++ b/ui/app/reducers/metamask.js
@@ -385,6 +385,12 @@ function reduceMetamask (state, action) {
       })
     }
 
+    case actions.COMPLETE_UI_MIGRATION: {
+      return extend(metamaskState, {
+        completedUiMigration: true,
+      })
+    }
+
     default:
       return metamaskState
 
diff --git a/ui/app/root.js b/ui/app/root.js
index 09deae1b1..f9e3709a0 100644
--- a/ui/app/root.js
+++ b/ui/app/root.js
@@ -2,7 +2,9 @@ const { Component } = require('react')
 const PropTypes = require('prop-types')
 const { Provider } = require('react-redux')
 const h = require('react-hyperscript')
-const SelectedApp = require('./select-app')
+const { HashRouter } = require('react-router-dom')
+const App = require('./app')
+const I18nProvider = require('./i18n-provider')
 
 class Root extends Component {
   render () {
@@ -10,7 +12,13 @@ class Root extends Component {
 
     return (
       h(Provider, { store }, [
-        h(SelectedApp),
+        h(HashRouter, {
+          hashType: 'noslash',
+        }, [
+          h(I18nProvider, [
+            h(App),
+          ]),
+        ]),
       ])
     )
   }
diff --git a/ui/app/select-app.js b/ui/app/select-app.js
deleted file mode 100644
index f5f9e33ab..000000000
--- a/ui/app/select-app.js
+++ /dev/null
@@ -1,65 +0,0 @@
-const inherits = require('util').inherits
-const Component = require('react').Component
-const connect = require('react-redux').connect
-const h = require('react-hyperscript')
-const { HashRouter } = require('react-router-dom')
-const App = require('./app')
-const OldApp = require('../../old-ui/app/app')
-const { getShouldUseNewUi } = require('./selectors')
-const { setFeatureFlag } = require('./actions')
-const I18nProvider = require('./i18n-provider')
-
-function mapStateToProps (state) {
-  return {
-    isMascara: state.metamask.isMascara,
-    shouldUseNewUi: getShouldUseNewUi(state),
-  }
-}
-
-function mapDispatchToProps (dispatch) {
-  return {
-    setFeatureFlagWithModal: () => {
-      return dispatch(setFeatureFlag('betaUI', true, 'BETA_UI_NOTIFICATION_MODAL'))
-    },
-    setFeatureFlagWithoutModal: () => {
-      return dispatch(setFeatureFlag('betaUI', true))
-    },
-  }
-}
-module.exports = connect(mapStateToProps, mapDispatchToProps)(SelectedApp)
-
-inherits(SelectedApp, Component)
-function SelectedApp () {
-  Component.call(this)
-}
-
-SelectedApp.prototype.componentWillReceiveProps = function (nextProps) {
-  // Code commented out until we begin auto adding users to NewUI
-  const {
-    // isUnlocked,
-    // setFeatureFlagWithModal,
-    setFeatureFlagWithoutModal,
-    isMascara,
-    // firstTime,
-  } = this.props
-
-  // if (isMascara || firstTime) {
-  if (isMascara) {
-    setFeatureFlagWithoutModal()
-  }
-  // } else if (!isUnlocked && nextProps.isUnlocked && (nextProps.autoAdd)) {
-  //   setFeatureFlagWithModal()
-  // }
-}
-
-SelectedApp.prototype.render = function () {
-  const { shouldUseNewUi } = this.props
-  const newUi = h(HashRouter, {
-    hashType: 'noslash',
-  }, [
-    h(I18nProvider, [
-      h(App),
-    ]),
-  ])
-  return shouldUseNewUi ? newUi : h(OldApp)
-}
diff --git a/ui/app/selectors.js b/ui/app/selectors.js
index c60b27ab4..6e9bf6470 100644
--- a/ui/app/selectors.js
+++ b/ui/app/selectors.js
@@ -28,8 +28,6 @@ const selectors = {
   getSendAmount,
   getSelectedTokenToFiatRate,
   getSelectedTokenContract,
-  autoAddToBetaUI,
-  getShouldUseNewUi,
   getSendMaxModeState,
   getCurrentViewContext,
   getTotalUnapprovedCount,
@@ -212,30 +210,6 @@ function getSelectedTokenContract (state) {
     : null
 }
 
-function autoAddToBetaUI (state) {
-  const autoAddTransactionThreshold = 12
-  const autoAddAccountsThreshold = 2
-  const autoAddTokensThreshold = 1
-
-  const numberOfTransactions = state.metamask.selectedAddressTxList.length
-  const numberOfAccounts = Object.keys(getMetaMaskAccounts(state)).length
-  const numberOfTokensAdded = state.metamask.tokens.length
-
-  const userPassesThreshold = (numberOfTransactions > autoAddTransactionThreshold) &&
-    (numberOfAccounts > autoAddAccountsThreshold) &&
-    (numberOfTokensAdded > autoAddTokensThreshold)
-  const userIsNotInBeta = !state.metamask.featureFlags.betaUI
-
-  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