From f3a7054f6b25a43b55bb6bda77b084171d611d12 Mon Sep 17 00:00:00 2001 From: Whymarrh Whitby Date: Wed, 30 Jan 2019 13:44:30 -0330 Subject: [PATCH] Add announcement for users migrated to the new UI --- app/_locales/en/messages.json | 3 ++ app/scripts/controllers/preferences.js | 2 +- app/scripts/metamask-controller.js | 1 + ui/app/actions.js | 30 +++++++++++++++++ ui/app/app.js | 2 ++ ui/app/components/index.scss | 2 ++ ui/app/components/modals/modal.js | 14 -------- .../components/modals/welcome-beta/index.js | 1 - .../welcome-beta/welcome-beta.component.js | 30 ----------------- .../welcome-beta/welcome-beta.container.js | 4 --- .../ui-migration-annoucement/index.js | 1 + .../ui-migration-annoucement/index.scss | 22 +++++++++++++ .../ui-migration-annoucement.component.js | 33 +++++++++++++++++++ .../ui-migration-announcement.container.js | 21 ++++++++++++ ui/app/reducers/metamask.js | 6 ++++ 15 files changed, 122 insertions(+), 50 deletions(-) delete mode 100644 ui/app/components/modals/welcome-beta/index.js delete mode 100644 ui/app/components/modals/welcome-beta/welcome-beta.component.js delete mode 100644 ui/app/components/modals/welcome-beta/welcome-beta.container.js create mode 100644 ui/app/components/ui-migration-annoucement/index.js create mode 100644 ui/app/components/ui-migration-annoucement/index.scss create mode 100644 ui/app/components/ui-migration-annoucement/ui-migration-annoucement.component.js create mode 100644 ui/app/components/ui-migration-annoucement/ui-migration-announcement.container.js diff --git a/app/_locales/en/messages.json b/app/_locales/en/messages.json index 33e72cd83c11..c1692ce5e6b2 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 c0716cc420bf..565f4f292167 100644 --- a/app/scripts/controllers/preferences.js +++ b/app/scripts/controllers/preferences.js @@ -44,7 +44,7 @@ class PreferencesController { useNativeCurrencyAsPrimaryCurrency: true, }, completedOnboarding: false, - completedUiMigration: false, + completedUiMigration: true, }, opts.initState) this.diagnostics = opts.diagnostics diff --git a/app/scripts/metamask-controller.js b/app/scripts/metamask-controller.js index 942c6a62e9a3..16ab34c7dfba 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/ui/app/actions.js b/ui/app/actions.js index c4212f35be2f..f3e9d2b275bb 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 886bef35a99f..9c44bd553f20 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 c5123ad474ac..000000000000 --- 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/ui-migration-annoucement/index.js b/ui/app/components/ui-migration-annoucement/index.js new file mode 100644 index 000000000000..c6c8cc619e9d --- /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 000000000000..6138a30799be --- /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 000000000000..7a4124972783 --- /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 000000000000..6dc993b8730d --- /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 632ec18f8835..5a08f2d09b17 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