From dde39e82b5723ba8056b73f0f823d40c3e702a99 Mon Sep 17 00:00:00 2001 From: Alexander Tseung Date: Mon, 4 Dec 2017 01:24:30 -0500 Subject: Add routes for mascara --- ui/app/app.js | 48 ++++++++++++++++++------ ui/app/components/account-menu/index.js | 22 +++-------- ui/app/components/pages/authenticated.js | 16 ++++---- ui/app/components/pages/keychains/reveal-seed.js | 5 ++- ui/app/components/pages/metamask-route.js | 28 ++++++++++++++ ui/app/components/pages/notice.js | 16 -------- ui/app/components/pages/unauthenticated/index.js | 38 +++++++++++++++++++ ui/app/first-time/init-menu.js | 2 +- ui/app/routes.js | 4 +- 9 files changed, 123 insertions(+), 56 deletions(-) create mode 100644 ui/app/components/pages/metamask-route.js create mode 100644 ui/app/components/pages/unauthenticated/index.js (limited to 'ui') diff --git a/ui/app/app.js b/ui/app/app.js index 168ec6559..68384f30d 100644 --- a/ui/app/app.js +++ b/ui/app/app.js @@ -5,8 +5,10 @@ const { compose } = require('recompose') const h = require('react-hyperscript') const actions = require('./actions') // mascara -const MascaraFirstTime = require('../../mascara/src/app/first-time').default +const MascaraCreatePassword = require('../../mascara/src/app/first-time/create-password-screen').default const MascaraBuyEtherScreen = require('../../mascara/src/app/first-time/buy-ether-screen').default +const MascaraNoticeScreen = require('../../mascara/src/app/first-time/notice-screen').default +const MascaraBackupPhraseScreen = require('../../mascara/src/app/first-time/backup-phrase-screen').default // init const InitializeMenuScreen = require('./first-time/init-menu') const NewKeyChainScreen = require('./new-keychain') @@ -22,6 +24,8 @@ const WalletView = require('./components/wallet-view') // other views const Authenticated = require('./components/pages/authenticated') +const Unauthenticated = require('./components/pages/unauthenticated') +const MetamaskRoute = require('./components/pages/metamask-route') const Settings = require('./components/pages/settings') const UnlockPage = require('./components/pages/unauthenticated/unlock') const RestoreVaultPage = require('./components/pages/keychains/restore-vault') @@ -53,7 +57,7 @@ const { IMPORT_ACCOUNT_ROUTE, SEND_ROUTE, CONFIRM_TRANSACTION_ROUTE, - INITIALIZE_MENU_ROUTE, + INITIALIZE_ROUTE, NOTICE_ROUTE, } = require('./routes') @@ -65,7 +69,7 @@ class App extends Component { } componentWillMount () { - const { currentCurrency, setCurrentCurrency } = this.props + const { currentCurrency, setCurrentCurrencyToUSD } = this.props if (!currentCurrency) { setCurrentCurrencyToUSD() @@ -77,14 +81,29 @@ class App extends Component { return ( h(Switch, [ - h(Route, { path: INITIALIZE_MENU_ROUTE, exact, component: InitializeMenuScreen }), - h(Route, { path: UNLOCK_ROUTE, exact, component: UnlockPage }), - h(Route, { path: SETTINGS_ROUTE, component: Settings }), - h(Route, { path: RESTORE_VAULT_ROUTE, exact, component: RestoreVaultPage }), - h(Route, { path: NOTICE_ROUTE, exact, component: NoticeScreen }), + h(MetamaskRoute, { + path: INITIALIZE_ROUTE, + exact, + component: InitializeMenuScreen, + mascaraComponent: MascaraCreatePassword, + }), + h(MetamaskRoute, { + path: REVEAL_SEED_ROUTE, + exact, + component: RevealSeedPage, + mascaraComponent: MascaraBackupPhraseScreen, + }), + h(Unauthenticated, { path: UNLOCK_ROUTE, exact, component: UnlockPage }), + h(Unauthenticated, { path: SETTINGS_ROUTE, component: Settings }), + h(Unauthenticated, { path: RESTORE_VAULT_ROUTE, exact, component: RestoreVaultPage }), + h(Unauthenticated, { + path: NOTICE_ROUTE, + exact, + component: NoticeScreen, + mascaraComponent: MascaraNoticeScreen, + }), h(Authenticated, { path: CONFIRM_TRANSACTION_ROUTE, exact, component: ConfirmTxScreen }), h(Authenticated, { path: SEND_ROUTE, exact, component: SendTransactionScreen2 }), - h(Authenticated, { path: REVEAL_SEED_ROUTE, exact, component: RevealSeedPage }), h(Authenticated, { path: ADD_TOKEN_ROUTE, exact, component: AddTokenPage }), h(Authenticated, { path: IMPORT_ACCOUNT_ROUTE, exact, component: ImportAccountPage }), h(Authenticated, { path: DEFAULT_ROUTE, exact, component: this.renderPrimary }), @@ -327,10 +346,17 @@ class App extends Component { currentView, activeAddress, unapprovedTxs = {}, + seedWords, } = this.props - if (isMascara && isOnboarding) { - return h(MascaraFirstTime) + // seed words + if (seedWords) { + log.debug('rendering seed words') + return h(Redirect, { + to: { + pathname: REVEAL_SEED_ROUTE, + }, + }) } // notices diff --git a/ui/app/components/account-menu/index.js b/ui/app/components/account-menu/index.js index 0965cba38..0d3b43ae9 100644 --- a/ui/app/components/account-menu/index.js +++ b/ui/app/components/account-menu/index.js @@ -8,7 +8,7 @@ const actions = require('../../actions') const { Menu, Item, Divider, CloseArea } = require('../dropdowns/components/menu') const Identicon = require('../identicon') const { formatBalance } = require('../../util') -const { SETTINGS_ROUTE, INFO_ROUTE, IMPORT_ACCOUNT_ROUTE } = require('../../routes') +const { SETTINGS_ROUTE, INFO_ROUTE, IMPORT_ACCOUNT_ROUTE, DEFAULT_ROUTE } = require('../../routes') module.exports = compose( withRouter, @@ -40,22 +40,10 @@ function mapDispatchToProps (dispatch) { dispatch(actions.displayWarning(null)) dispatch(actions.toggleAccountMenu()) }, - showConfigPage: () => { - dispatch(actions.showConfigPage()) - dispatch(actions.toggleAccountMenu()) - }, showNewAccountModal: () => { dispatch(actions.showModal({ name: 'NEW_ACCOUNT' })) dispatch(actions.toggleAccountMenu()) }, - showImportPage: () => { - dispatch(actions.showImportPage()) - dispatch(actions.toggleAccountMenu()) - }, - showInfoPage: () => { - dispatch(actions.showInfoPage()) - dispatch(actions.toggleAccountMenu()) - }, } } @@ -64,10 +52,7 @@ AccountMenu.prototype.render = function () { isAccountMenuOpen, toggleAccountMenu, showNewAccountModal, - showImportPage, lockMetamask, - showConfigPage, - showInfoPage, history, } = this.props @@ -78,7 +63,10 @@ AccountMenu.prototype.render = function () { }, [ 'My Accounts', h('button.account-menu__logout-button', { - onClick: lockMetamask, + onClick: () => { + lockMetamask() + history.push(DEFAULT_ROUTE) + }, }, 'Log out'), ]), h(Divider), diff --git a/ui/app/components/pages/authenticated.js b/ui/app/components/pages/authenticated.js index 78f3a4225..89bd238d2 100644 --- a/ui/app/components/pages/authenticated.js +++ b/ui/app/components/pages/authenticated.js @@ -1,26 +1,26 @@ const { connect } = require('react-redux') const PropTypes = require('prop-types') -const { Redirect, Route } = require('react-router-dom') +const { Redirect } = require('react-router-dom') const h = require('react-hyperscript') -const { UNLOCK_ROUTE, INITIALIZE_MENU_ROUTE } = require('../../routes') +const MetamaskRoute = require('./metamask-route') +const { UNLOCK_ROUTE, INITIALIZE_ROUTE } = require('../../routes') const Authenticated = ({ component: Component, isUnlocked, isInitialized, ...props }) => { - - const render = props => { + const component = renderProps => { switch (true) { case isUnlocked: - return h(Component, { ...props }) + return h(Component, { ...renderProps }) case !isInitialized: - return h(Redirect, { to: { pathname: INITIALIZE_MENU_ROUTE } }) + return h(Redirect, { to: { pathname: INITIALIZE_ROUTE } }) default: return h(Redirect, { to: { pathname: UNLOCK_ROUTE } }) } } return ( - h(Route, { + h(MetamaskRoute, { ...props, - render, + component, }) ) } diff --git a/ui/app/components/pages/keychains/reveal-seed.js b/ui/app/components/pages/keychains/reveal-seed.js index dc2cfc23e..029eb7d8e 100644 --- a/ui/app/components/pages/keychains/reveal-seed.js +++ b/ui/app/components/pages/keychains/reveal-seed.js @@ -8,7 +8,10 @@ const { DEFAULT_ROUTE } = require('../../../routes') class RevealSeedPage extends Component { componentDidMount () { - document.getElementById('password-box').focus() + const passwordBox = document.getElementById('password-box') + if (passwordBox) { + passwordBox.focus() + } } checkConfirmation (event) { diff --git a/ui/app/components/pages/metamask-route.js b/ui/app/components/pages/metamask-route.js new file mode 100644 index 000000000..23c5b5199 --- /dev/null +++ b/ui/app/components/pages/metamask-route.js @@ -0,0 +1,28 @@ +const { connect } = require('react-redux') +const PropTypes = require('prop-types') +const { Route } = require('react-router-dom') +const h = require('react-hyperscript') + +const MetamaskRoute = ({ component, mascaraComponent, isMascara, ...props }) => { + return ( + h(Route, { + ...props, + component: isMascara && mascaraComponent ? mascaraComponent : component, + }) + ) +} + +MetamaskRoute.propTypes = { + component: PropTypes.func, + mascaraComponent: PropTypes.func, + isMascara: PropTypes.bool, +} + +const mapStateToProps = state => { + const { metamask: { isMascara } } = state + return { + isMascara, + } +} + +module.exports = connect(mapStateToProps)(MetamaskRoute) diff --git a/ui/app/components/pages/notice.js b/ui/app/components/pages/notice.js index 8e68cd52b..2329a9147 100644 --- a/ui/app/components/pages/notice.js +++ b/ui/app/components/pages/notice.js @@ -53,7 +53,6 @@ class Notice extends Component { render () { const { notice = {} } = this.props const { title, date, body } = notice - // const state = this.state || { disclaimerDisabled: true } const { disclaimerDisabled } = this.state return ( @@ -156,21 +155,6 @@ class Notice extends Component { const mapStateToProps = state => { const { metamask } = state const { noActiveNotices, lastUnreadNotice, lostAccounts } = metamask - // if (!props.noActiveNotices) { - // log.debug('rendering notice screen for unread notices.') - // return h(NoticeScreen, { - // notice: props.lastUnreadNotice, - // key: 'NoticeScreen', - // onConfirm: () => props.dispatch(actions.markNoticeRead(props.lastUnreadNotice)), - // }) - // } else if (props.lostAccounts && props.lostAccounts.length > 0) { - // log.debug('rendering notice screen for lost accounts view.') - // return h(NoticeScreen, { - // notice: generateLostAccountsNotice(props.lostAccounts), - // key: 'LostAccountsNotice', - // onConfirm: () => props.dispatch(actions.markAccountsFound()), - // }) - // } return { noActiveNotices, diff --git a/ui/app/components/pages/unauthenticated/index.js b/ui/app/components/pages/unauthenticated/index.js new file mode 100644 index 000000000..f8b5fa172 --- /dev/null +++ b/ui/app/components/pages/unauthenticated/index.js @@ -0,0 +1,38 @@ +const { connect } = require('react-redux') +const PropTypes = require('prop-types') +const { Redirect } = require('react-router-dom') +const h = require('react-hyperscript') +const { INITIALIZE_ROUTE } = require('../../../routes') +const MetamaskRoute = require('../metamask-route') + +const Unauthenticated = ({ component: Component, isInitialized, ...props }) => { + const component = renderProps => { + return isInitialized + ? h(Component, { ...renderProps }) + : h(Redirect, { to: { pathname: INITIALIZE_ROUTE } }) + } + + return ( + h(MetamaskRoute, { + ...props, + component, + }) + ) +} + +Unauthenticated.propTypes = { + component: PropTypes.func, + isInitialized: PropTypes.bool, + isMascara: PropTypes.bool, + mascaraComponent: PropTypes.func, +} + +const mapStateToProps = state => { + const { metamask: { isInitialized, isMascara } } = state + return { + isInitialized, + isMascara, + } +} + +module.exports = connect(mapStateToProps)(Unauthenticated) diff --git a/ui/app/first-time/init-menu.js b/ui/app/first-time/init-menu.js index 6832f5ddf..addcedc77 100644 --- a/ui/app/first-time/init-menu.js +++ b/ui/app/first-time/init-menu.js @@ -35,7 +35,7 @@ class InitializeMenuScreen extends Component { const { warning } = this.state return ( - h('.initialize-screen.flex-column.flex-center.flex-grow', [ + h('.initialize-screen.flex-column.flex-center', [ h(Mascot, { animationEventEmitter: this.animationEventEmitter, diff --git a/ui/app/routes.js b/ui/app/routes.js index 1305d6b1e..72be616a7 100644 --- a/ui/app/routes.js +++ b/ui/app/routes.js @@ -8,7 +8,7 @@ const ADD_TOKEN_ROUTE = '/add-token' const IMPORT_ACCOUNT_ROUTE = '/import-account' const SEND_ROUTE = '/send' const CONFIRM_TRANSACTION_ROUTE = '/confirm-transaction' -const INITIALIZE_MENU_ROUTE = '/initialize-menu' +const INITIALIZE_ROUTE = '/initialize' const NOTICE_ROUTE = '/notice' module.exports = { @@ -22,6 +22,6 @@ module.exports = { IMPORT_ACCOUNT_ROUTE, SEND_ROUTE, CONFIRM_TRANSACTION_ROUTE, - INITIALIZE_MENU_ROUTE, + INITIALIZE_ROUTE, NOTICE_ROUTE, } -- cgit v1.2.3