diff --git a/app/_locales/en/messages.json b/app/_locales/en/messages.json index 33e72cd83..c1692ce5e 100644 --- a/app/_locales/en/messages.json +++ b/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)" }, 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()) }) diff --git a/test/unit/ui/app/reducers/metamask.spec.js b/test/unit/ui/app/reducers/metamask.spec.js index 502e7ef33..8cdb780fe 100644 --- a/test/unit/ui/app/reducers/metamask.spec.js +++ b/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', () => { 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 { } }} > + { - const { t } = context - const { hideModal } = props - - return ( - hideModal()} - submitText={t('ok')} - > - - - ) -} - -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 ( -
-
- { t('useOldUI') } -
-
-
- -
-
-
- ) - } - 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 (
@@ -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 ( +
+

{t('uiMigrationAnnouncement')}

+

{t('close')}

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