From e226b10a89d87af07c7c35ff1251a8264f3bb1b8 Mon Sep 17 00:00:00 2001 From: Alexander Tseung Date: Tue, 28 Nov 2017 20:24:35 -0800 Subject: Add react-router to allow use of the browser back button --- ui/app/app.js | 908 ++++++++++++++++++++++++++++++++-------------------------- 1 file changed, 497 insertions(+), 411 deletions(-) (limited to 'ui/app/app.js') diff --git a/ui/app/app.js b/ui/app/app.js index 1f40eccbe..168ec6559 100644 --- a/ui/app/app.js +++ b/ui/app/app.js @@ -1,6 +1,7 @@ -const inherits = require('util').inherits -const Component = require('react').Component -const connect = require('react-redux').connect +const { Component } = require('react') +const { connect } = require('react-redux') +const { Switch, Route, Redirect, withRouter } = require('react-router-dom') +const { compose } = require('recompose') const h = require('react-hyperscript') const actions = require('./actions') // mascara @@ -14,23 +15,25 @@ const MainContainer = require('./main-container') const SendTransactionScreen2 = require('./components/send/send-v2-container') const ConfirmTxScreen = require('./conf-tx') // notice -const NoticeScreen = require('./components/notice') const generateLostAccountsNotice = require('../lib/lost-accounts-notice') // slideout menu const WalletView = require('./components/wallet-view') // other views -const Settings = require('./settings') -const AddTokenScreen = require('./add-token') -const Import = require('./accounts/import') +const Authenticated = require('./components/pages/authenticated') +const Settings = require('./components/pages/settings') +const UnlockPage = require('./components/pages/unauthenticated/unlock') +const RestoreVaultPage = require('./components/pages/keychains/restore-vault') +const RevealSeedPage = require('./components/pages/keychains/reveal-seed') +const AddTokenPage = require('./components/pages/add-token') +const ImportAccountPage = require('./components/pages/import-account') +const NoticeScreen = require('./components/pages/notice') + const Loading = require('./components/loading') const NetworkIndicator = require('./components/network') const Identicon = require('./components/identicon') const BuyView = require('./components/buy-button-subview') -const HDCreateVaultComplete = require('./keychains/hd/create-vault-complete') -const HDRestoreVaultScreen = require('./keychains/hd/restore-vault') -const RevealSeedConfirmation = require('./keychains/hd/recover-seed/confirmation') const ReactCSSTransitionGroup = require('react-addons-css-transition-group') const NetworkDropdown = require('./components/dropdowns/network-dropdown') const AccountMenu = require('./components/account-menu') @@ -39,482 +42,565 @@ const QrView = require('./components/qr-code') // Global Modals const Modal = require('./components/modals/index').Modal -module.exports = connect(mapStateToProps, mapDispatchToProps)(App) - -inherits(App, Component) -function App () { Component.call(this) } - -function mapStateToProps (state) { - const { - identities, - accounts, - address, - keyrings, - isInitialized, - noActiveNotices, - seedWords, - } = state.metamask - const selected = address || Object.keys(accounts)[0] - - return { - // state from plugin - networkDropdownOpen: state.appState.networkDropdownOpen, - sidebarOpen: state.appState.sidebarOpen, - isLoading: state.appState.isLoading, - loadingMessage: state.appState.loadingMessage, - noActiveNotices: state.metamask.noActiveNotices, - isInitialized: state.metamask.isInitialized, - isUnlocked: state.metamask.isUnlocked, - selectedAddress: state.metamask.selectedAddress, - currentView: state.appState.currentView, - activeAddress: state.appState.activeAddress, - transForward: state.appState.transForward, - isMascara: state.metamask.isMascara, - isOnboarding: Boolean(!noActiveNotices || seedWords || !isInitialized), - seedWords: state.metamask.seedWords, - unapprovedTxs: state.metamask.unapprovedTxs, - unapprovedMsgs: state.metamask.unapprovedMsgs, - menuOpen: state.appState.menuOpen, - network: state.metamask.network, - provider: state.metamask.provider, - forgottenPassword: state.appState.forgottenPassword, - lastUnreadNotice: state.metamask.lastUnreadNotice, - lostAccounts: state.metamask.lostAccounts, - frequentRpcList: state.metamask.frequentRpcList || [], - currentCurrency: state.metamask.currentCurrency, - - // state needed to get account dropdown temporarily rendering from app bar - identities, - selected, - keyrings, +// Routes +const { + DEFAULT_ROUTE, + UNLOCK_ROUTE, + SETTINGS_ROUTE, + REVEAL_SEED_ROUTE, + RESTORE_VAULT_ROUTE, + ADD_TOKEN_ROUTE, + IMPORT_ACCOUNT_ROUTE, + SEND_ROUTE, + CONFIRM_TRANSACTION_ROUTE, + INITIALIZE_MENU_ROUTE, + NOTICE_ROUTE, +} = require('./routes') + +class App extends Component { + constructor (props) { + super(props) + + this.renderPrimary = this.renderPrimary.bind(this) } -} -function mapDispatchToProps (dispatch, ownProps) { - return { - dispatch, - hideSidebar: () => dispatch(actions.hideSidebar()), - showNetworkDropdown: () => dispatch(actions.showNetworkDropdown()), - hideNetworkDropdown: () => dispatch(actions.hideNetworkDropdown()), - setCurrentCurrencyToUSD: () => dispatch(actions.setCurrentCurrency('usd')), - toggleAccountMenu: () => dispatch(actions.toggleAccountMenu()), + componentWillMount () { + const { currentCurrency, setCurrentCurrency } = this.props + + if (!currentCurrency) { + setCurrentCurrencyToUSD() + } } -} -App.prototype.componentWillMount = function () { - if (!this.props.currentCurrency) { - this.props.setCurrentCurrencyToUSD() + renderRoutes () { + const exact = true + + 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(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 }), + ]) + ) } -} -App.prototype.render = function () { - var props = this.props - const { isLoading, loadingMessage, network } = props - const isLoadingNetwork = network === 'loading' && props.currentView.name !== 'config' - const loadMessage = loadingMessage || isLoadingNetwork ? - `Connecting to ${this.getNetworkName()}` : null - log.debug('Main ui render function') - - return ( - h('.flex-column.full-height', { - style: { - overflowX: 'hidden', - position: 'relative', - alignItems: 'center', - }, - }, [ + render () { + var props = this.props + const { isLoading, loadingMessage, network } = props + const isLoadingNetwork = network === 'loading' && props.currentView.name !== 'config' + const loadMessage = loadingMessage || isLoadingNetwork ? + `Connecting to ${this.getNetworkName()}` : null + log.debug('Main ui render function') - // global modal - h(Modal, {}, []), + return ( + h('.flex-column.full-height', { + style: { + overflowX: 'hidden', + position: 'relative', + alignItems: 'center', + }, + }, [ - // app bar - this.renderAppBar(), + // global modal + h(Modal, {}, []), - // sidebar - this.renderSidebar(), + // app bar + this.renderAppBar(), - // network dropdown - h(NetworkDropdown, { - provider: this.props.provider, - frequentRpcList: this.props.frequentRpcList, - }, []), + // sidebar + this.renderSidebar(), - h(AccountMenu), + // network dropdown + h(NetworkDropdown, { + provider: this.props.provider, + frequentRpcList: this.props.frequentRpcList, + }, []), - (isLoading || isLoadingNetwork) && h(Loading, { - loadingMessage: loadMessage, - }), + h(AccountMenu), - // this.renderLoadingIndicator({ isLoading, isLoadingNetwork, loadMessage }), + (isLoading || isLoadingNetwork) && h(Loading, { + loadingMessage: loadMessage, + }), - // content - this.renderPrimary(), - ]) - ) -} + // this.renderLoadingIndicator({ isLoading, isLoadingNetwork, loadMessage }), -App.prototype.renderGlobalModal = function () { - return h(Modal, { - ref: 'modalRef', - }, [ - // h(BuyOptions, {}, []), - ]) -} + // content + this.renderRoutes(), + // this.renderPrimary(), + ]) + ) + } -App.prototype.renderSidebar = function () { - - return h('div', { - }, [ - h('style', ` - .sidebar-enter { - transition: transform 300ms ease-in-out; - transform: translateX(-100%); - } - .sidebar-enter.sidebar-enter-active { - transition: transform 300ms ease-in-out; - transform: translateX(0%); - } - .sidebar-leave { - transition: transform 200ms ease-out; - transform: translateX(0%); - } - .sidebar-leave.sidebar-leave-active { - transition: transform 200ms ease-out; - transform: translateX(-100%); - } - `), - - h(ReactCSSTransitionGroup, { - transitionName: 'sidebar', - transitionEnterTimeout: 300, - transitionLeaveTimeout: 200, + renderGlobalModal () { + return h(Modal, { + ref: 'modalRef', }, [ - // A second instance of Walletview is used for non-mobile viewports - this.props.sidebarOpen ? h(WalletView, { - responsiveDisplayClassname: '.sidebar', - style: {}, - }) : undefined, - - ]), - - // overlay - // TODO: add onClick for overlay to close sidebar - this.props.sidebarOpen ? h('div.sidebar-overlay', { - style: {}, - onClick: () => { - this.props.hideSidebar() - }, - }, []) : undefined, - ]) -} - -App.prototype.renderAppBar = function () { - const { - isUnlocked, - network, - provider, - networkDropdownOpen, - showNetworkDropdown, - hideNetworkDropdown, - currentView, - } = this.props - - if (window.METAMASK_UI_TYPE === 'notification') { - return null + // h(BuyOptions, {}, []), + ]) } - const props = this.props - const {isMascara, isOnboarding} = props + renderSidebar () { + return h('div', [ + h('style', ` + .sidebar-enter { + transition: transform 300ms ease-in-out; + transform: translateX(-100%); + } + .sidebar-enter.sidebar-enter-active { + transition: transform 300ms ease-in-out; + transform: translateX(0%); + } + .sidebar-leave { + transition: transform 200ms ease-out; + transform: translateX(0%); + } + .sidebar-leave.sidebar-leave-active { + transition: transform 200ms ease-out; + transform: translateX(-100%); + } + `), + + h(ReactCSSTransitionGroup, { + transitionName: 'sidebar', + transitionEnterTimeout: 300, + transitionLeaveTimeout: 200, + }, [ + // A second instance of Walletview is used for non-mobile viewports + this.props.sidebarOpen ? h(WalletView, { + responsiveDisplayClassname: '.sidebar', + style: {}, + }) : undefined, - // Do not render header if user is in mascara onboarding - if (isMascara && isOnboarding) { - return null - } + ]), - // Do not render header if user is in mascara buy ether - if (isMascara && props.currentView.name === 'buyEth') { - return null + // overlay + // TODO: add onClick for overlay to close sidebar + this.props.sidebarOpen ? h('div.sidebar-overlay', { + style: {}, + onClick: () => { + this.props.hideSidebar() + }, + }, []) : undefined, + ]) } - return ( + renderAppBar () { + const { + isUnlocked, + network, + provider, + networkDropdownOpen, + showNetworkDropdown, + hideNetworkDropdown, + currentView, + isMascara, + isOnboarding, + history, + } = this.props + + if (window.METAMASK_UI_TYPE === 'notification') { + return null + } + + // Do not render header if user is in mascara onboarding + if (isMascara && isOnboarding) { + return null + } - h('.full-width', { - style: {}, - }, [ + // Do not render header if user is in mascara buy ether + if (isMascara && currentView.name === 'buyEth') { + return null + } + + return ( - h('.app-header.flex-row.flex-space-between', { + h('.full-width', { style: {}, }, [ - h('div.app-header-contents', {}, [ - h('div.left-menu-wrapper', { - onClick: () => { - props.dispatch(actions.backToAccountDetail(props.activeAddress)) - }, - }, [ - // mini logo - h('img.metafox-icon', { - height: 29, - width: 29, - src: '/images/icon-128.png', - }), - - // metamask name - h('h1', { - style: { - position: 'relative', - paddingLeft: '9px', - color: '#5B5D67', - }, - }, 'MetaMask'), - - ]), - h('div.header__right-actions', [ - h('div.network-component-wrapper', { - style: {}, + h('.app-header.flex-row.flex-space-between', { + style: {}, + }, [ + h('div.app-header-contents', {}, [ + h('div.left-menu-wrapper', { + onClick: () => history.push(DEFAULT_ROUTE), }, [ - // Network Indicator - h(NetworkIndicator, { - network, - provider, - disabled: currentView.name === 'confTx', - onClick: (event) => { - event.preventDefault() - event.stopPropagation() - return networkDropdownOpen === false - ? showNetworkDropdown() - : hideNetworkDropdown() - }, + // mini logo + h('img.metafox-icon', { + height: 29, + width: 29, + src: '/images/icon-128.png', }), + // metamask name + h('h1', { + style: { + position: 'relative', + paddingLeft: '9px', + color: '#5B5D67', + }, + }, 'MetaMask'), + ]), - isUnlocked && h('div.account-menu__icon', { onClick: this.props.toggleAccountMenu }, [ - h(Identicon, { - address: this.props.selectedAddress, - diameter: 32, - }), + h('div.header__right-actions', [ + h('div.network-component-wrapper', { + style: {}, + }, [ + // Network Indicator + h(NetworkIndicator, { + network, + provider, + disabled: currentView.name === 'confTx', + onClick: (event) => { + event.preventDefault() + event.stopPropagation() + return networkDropdownOpen === false + ? showNetworkDropdown() + : hideNetworkDropdown() + }, + }), + + ]), + + isUnlocked && h('div.account-menu__icon', { onClick: this.props.toggleAccountMenu }, [ + h(Identicon, { + address: this.props.selectedAddress, + diameter: 32, + }), + ]), ]), ]), ]), - ]), - - ]) - ) -} - - -App.prototype.renderLoadingIndicator = function ({ isLoading, isLoadingNetwork, loadMessage }) { - const { isMascara } = this.props - - return isMascara - ? null - : h(Loading, { - isLoading: isLoading || isLoadingNetwork, - loadingMessage: loadMessage, - }) -} - -App.prototype.renderBackButton = function (style, justArrow = false) { - var props = this.props - return ( - h('.flex-row', { - key: 'leftArrow', - style: style, - onClick: () => props.dispatch(actions.goBackToInitView()), - }, [ - h('i.fa.fa-arrow-left.cursor-pointer'), - justArrow ? null : h('div.cursor-pointer', { - style: { - marginLeft: '3px', - }, - onClick: () => props.dispatch(actions.goBackToInitView()), - }, 'BACK'), - ]) - ) -} + ]) + ) + } -App.prototype.renderPrimary = function () { - log.debug('rendering primary') - var props = this.props - const {isMascara, isOnboarding} = props + renderLoadingIndicator ({ isLoading, isLoadingNetwork, loadMessage }) { + const { isMascara } = this.props - if (isMascara && isOnboarding) { - return h(MascaraFirstTime) + return isMascara + ? null + : h(Loading, { + isLoading: isLoading || isLoadingNetwork, + loadingMessage: loadMessage, + }) } - // notices - 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()), - }) - } + renderBackButton (style, justArrow = false) { + const { dispatch } = this.props - if (props.seedWords) { - log.debug('rendering seed words') - return h(HDCreateVaultComplete, {key: 'HDCreateVaultComplete'}) + return ( + h('.flex-row', { + key: 'leftArrow', + style: style, + onClick: () => dispatch(actions.goBackToInitView()), + }, [ + h('i.fa.fa-arrow-left.cursor-pointer'), + justArrow ? null : h('div.cursor-pointer', { + style: { + marginLeft: '3px', + }, + onClick: () => dispatch(actions.goBackToInitView()), + }, 'BACK'), + ]) + ) } - // show initialize screen - if (!props.isInitialized || props.forgottenPassword) { - // show current view - log.debug('rendering an initialize screen') - switch (props.currentView.name) { + renderPrimary () { + log.debug('rendering primary') + const { + isMascara, + isOnboarding, + noActiveNotices, + lostAccounts, + isInitialized, + forgottenPassword, + currentView, + activeAddress, + unapprovedTxs = {}, + } = this.props + + if (isMascara && isOnboarding) { + return h(MascaraFirstTime) + } - case 'restoreVault': - log.debug('rendering restore vault screen') - return h(HDRestoreVaultScreen, {key: 'HDRestoreVaultScreen'}) + // notices + if (!noActiveNotices || (lostAccounts && lostAccounts.length > 0)) { + return h(Redirect, { + to: { + pathname: NOTICE_ROUTE, + }, + }) + } - default: - log.debug('rendering menu screen') - return h(InitializeMenuScreen, {key: 'menuScreenInit'}) + // unapprovedTxs + if (Object.keys(unapprovedTxs).length) { + return h(Redirect, { + to: { + pathname: CONFIRM_TRANSACTION_ROUTE, + }, + }) } - } - // show unlock screen - if (!props.isUnlocked) { - return h(MainContainer, { - currentViewName: props.currentView.name, - isUnlocked: props.isUnlocked, - }) - } + // 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()), + // }) + // } + + // if (props.seedWords) { + // log.debug('rendering seed words') + // return h(HDCreateVaultComplete, {key: 'HDCreateVaultComplete'}) + // } + + // show initialize screen + if (!isInitialized || forgottenPassword) { + // show current view + log.debug('rendering an initialize screen') + // switch (props.currentView.name) { + + // case 'restoreVault': + // log.debug('rendering restore vault screen') + // return h(HDRestoreVaultScreen, {key: 'HDRestoreVaultScreen'}) + + // default: + // log.debug('rendering menu screen') + // return h(InitializeMenuScreen, {key: 'menuScreenInit'}) + // } + } - // show current view - switch (props.currentView.name) { + // // show unlock screen + // if (!props.isUnlocked) { + // return h(MainContainer, { + // currentViewName: props.currentView.name, + // isUnlocked: props.isUnlocked, + // }) + // } - case 'accountDetail': - log.debug('rendering main container') - return h(MainContainer, {key: 'account-detail'}) + // show current view + switch (currentView.name) { - case 'sendTransaction': - log.debug('rendering send tx screen') + case 'accountDetail': + log.debug('rendering main container') + return h(MainContainer, {key: 'account-detail'}) - // Going to leave this here until we are ready to delete SendTransactionScreen v1 - // const SendComponentToRender = checkFeatureToggle('send-v2') - // ? SendTransactionScreen2 - // : SendTransactionScreen + // case 'sendTransaction': + // log.debug('rendering send tx screen') - return h(SendTransactionScreen2, {key: 'send-transaction'}) + // // Going to leave this here until we are ready to delete SendTransactionScreen v1 + // // const SendComponentToRender = checkFeatureToggle('send-v2') + // // ? SendTransactionScreen2 + // // : SendTransactionScreen - case 'sendToken': - log.debug('rendering send token screen') + // return h(SendTransactionScreen2, {key: 'send-transaction'}) - // Going to leave this here until we are ready to delete SendTransactionScreen v1 - // const SendTokenComponentToRender = checkFeatureToggle('send-v2') - // ? SendTransactionScreen2 - // : SendTokenScreen + // case 'sendToken': + // log.debug('rendering send token screen') - return h(SendTransactionScreen2, {key: 'sendToken'}) + // // Going to leave this here until we are ready to delete SendTransactionScreen v1 + // // const SendTokenComponentToRender = checkFeatureToggle('send-v2') + // // ? SendTransactionScreen2 + // // : SendTokenScreen - case 'newKeychain': - log.debug('rendering new keychain screen') - return h(NewKeyChainScreen, {key: 'new-keychain'}) + // return h(SendTransactionScreen2, {key: 'sendToken'}) - case 'confTx': - log.debug('rendering confirm tx screen') - return h(ConfirmTxScreen, {key: 'confirm-tx'}) + case 'newKeychain': + log.debug('rendering new keychain screen') + return h(NewKeyChainScreen, {key: 'new-keychain'}) - case 'add-token': - log.debug('rendering add-token screen from unlock screen.') - return h(AddTokenScreen, {key: 'add-token'}) + // case 'confTx': + // log.debug('rendering confirm tx screen') + // return h(Redirect, { + // to: { + // pathname: CONFIRM_TRANSACTION_ROUTE, + // }, + // }) + // return h(ConfirmTxScreen, {key: 'confirm-tx'}) - case 'config': - log.debug('rendering config screen') - return h(Settings, {key: 'config'}) + // case 'add-token': + // log.debug('rendering add-token screen from unlock screen.') + // return h(AddTokenScreen, {key: 'add-token'}) - case 'import-menu': - log.debug('rendering import screen') - return h(Import, {key: 'import-menu'}) + // case 'config': + // log.debug('rendering config screen') + // return h(Settings, {key: 'config'}) - case 'reveal-seed-conf': - log.debug('rendering reveal seed confirmation screen') - return h(RevealSeedConfirmation, {key: 'reveal-seed-conf'}) + // case 'import-menu': + // log.debug('rendering import screen') + // return h(Import, {key: 'import-menu'}) - case 'info': - log.debug('rendering info screen') - return h(Settings, {key: 'info', tab: 'info'}) + // case 'reveal-seed-conf': + // log.debug('rendering reveal seed confirmation screen') + // return h(RevealSeedConfirmation, {key: 'reveal-seed-conf'}) - case 'buyEth': - log.debug('rendering buy ether screen') - return h(BuyView, {key: 'buyEthView'}) + // case 'info': + // log.debug('rendering info screen') + // return h(Settings, {key: 'info', tab: 'info'}) - case 'onboardingBuyEth': - log.debug('rendering onboarding buy ether screen') - return h(MascaraBuyEtherScreen, {key: 'buyEthView'}) + case 'buyEth': + log.debug('rendering buy ether screen') + return h(BuyView, {key: 'buyEthView'}) - case 'qr': - log.debug('rendering show qr screen') - return h('div', { - style: { - position: 'absolute', - height: '100%', - top: '0px', - left: '0px', - }, - }, [ - h('i.fa.fa-arrow-left.fa-lg.cursor-pointer.color-orange', { - onClick: () => props.dispatch(actions.backToAccountDetail(props.activeAddress)), - style: { - marginLeft: '10px', - marginTop: '50px', - }, - }), - h('div', { + case 'onboardingBuyEth': + log.debug('rendering onboarding buy ether screen') + return h(MascaraBuyEtherScreen, {key: 'buyEthView'}) + + case 'qr': + log.debug('rendering show qr screen') + return h('div', { style: { position: 'absolute', - left: '44px', - width: '285px', + height: '100%', + top: '0px', + left: '0px', }, }, [ - h(QrView, {key: 'qr'}), - ]), - ]) + h('i.fa.fa-arrow-left.fa-lg.cursor-pointer.color-orange', { + onClick: () => this.props.dispatch(actions.backToAccountDetail(activeAddress)), + style: { + marginLeft: '10px', + marginTop: '50px', + }, + }), + h('div', { + style: { + position: 'absolute', + left: '44px', + width: '285px', + }, + }, [ + h(QrView, {key: 'qr'}), + ]), + ]) - default: - log.debug('rendering default, account detail screen') - return h(MainContainer, {key: 'account-detail'}) + default: + log.debug('rendering default, account detail screen') + return h(MainContainer, {key: 'account-detail'}) + } } -} -App.prototype.toggleMetamaskActive = function () { - if (!this.props.isUnlocked) { - // currently inactive: redirect to password box - var passwordBox = document.querySelector('input[type=password]') - if (!passwordBox) return - passwordBox.focus() - } else { - // currently active: deactivate - this.props.dispatch(actions.lockMetamask(false)) + toggleMetamaskActive () { + if (!this.props.isUnlocked) { + // currently inactive: redirect to password box + var passwordBox = document.querySelector('input[type=password]') + if (!passwordBox) return + passwordBox.focus() + } else { + // currently active: deactivate + this.props.dispatch(actions.lockMetamask(false)) + } + } + + getNetworkName () { + const { provider } = this.props + const providerName = provider.type + + let name + + if (providerName === 'mainnet') { + name = 'Main Ethereum Network' + } else if (providerName === 'ropsten') { + name = 'Ropsten Test Network' + } else if (providerName === 'kovan') { + name = 'Kovan Test Network' + } else if (providerName === 'rinkeby') { + name = 'Rinkeby Test Network' + } else { + name = 'Unknown Private Network' + } + + return name } } -App.prototype.getNetworkName = function () { - const { provider } = this.props - const providerName = provider.type - - let name - - if (providerName === 'mainnet') { - name = 'Main Ethereum Network' - } else if (providerName === 'ropsten') { - name = 'Ropsten Test Network' - } else if (providerName === 'kovan') { - name = 'Kovan Test Network' - } else if (providerName === 'rinkeby') { - name = 'Rinkeby Test Network' - } else { - name = 'Unknown Private Network' +function mapStateToProps (state) { + const { appState, metamask } = state + const { + networkDropdownOpen, + sidebarOpen, + isLoading, + loadingMessage, + } = appState + + const { + identities, + accounts, + address, + keyrings, + isInitialized, + noActiveNotices, + seedWords, + unapprovedTxs, + lastUnreadNotice, + lostAccounts, + } = metamask + const selected = address || Object.keys(accounts)[0] + + return { + // state from plugin + networkDropdownOpen, + sidebarOpen, + isLoading, + loadingMessage, + noActiveNotices, + isInitialized, + isUnlocked: state.metamask.isUnlocked, + selectedAddress: state.metamask.selectedAddress, + currentView: state.appState.currentView, + activeAddress: state.appState.activeAddress, + transForward: state.appState.transForward, + isMascara: state.metamask.isMascara, + isOnboarding: Boolean(!noActiveNotices || seedWords || !isInitialized), + seedWords: state.metamask.seedWords, + unapprovedTxs, + unapprovedMsgs: state.metamask.unapprovedMsgs, + menuOpen: state.appState.menuOpen, + network: state.metamask.network, + provider: state.metamask.provider, + forgottenPassword: state.appState.forgottenPassword, + lastUnreadNotice, + lostAccounts, + frequentRpcList: state.metamask.frequentRpcList || [], + currentCurrency: state.metamask.currentCurrency, + + // state needed to get account dropdown temporarily rendering from app bar + identities, + selected, + keyrings, } +} - return name +function mapDispatchToProps (dispatch, ownProps) { + return { + dispatch, + hideSidebar: () => dispatch(actions.hideSidebar()), + showNetworkDropdown: () => dispatch(actions.showNetworkDropdown()), + hideNetworkDropdown: () => dispatch(actions.hideNetworkDropdown()), + setCurrentCurrencyToUSD: () => dispatch(actions.setCurrentCurrency('usd')), + toggleAccountMenu: () => dispatch(actions.toggleAccountMenu()), + } } + +module.exports = compose( + withRouter, + connect(mapStateToProps, mapDispatchToProps) +)(App) -- cgit 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 +++++++++++++++++++++++++++++++++++++----------- 1 file changed, 37 insertions(+), 11 deletions(-) (limited to 'ui/app/app.js') 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 -- cgit From ec5e0a711cac3d35afcb1ecf5881f11adb4b3a06 Mon Sep 17 00:00:00 2001 From: Alexander Tseung Date: Mon, 4 Dec 2017 03:06:09 -0500 Subject: Fix lint errors --- ui/app/app.js | 54 +++++++++++++++++++++++++++++++++++++++++++----------- 1 file changed, 43 insertions(+), 11 deletions(-) (limited to 'ui/app/app.js') diff --git a/ui/app/app.js b/ui/app/app.js index 68384f30d..3f6795386 100644 --- a/ui/app/app.js +++ b/ui/app/app.js @@ -1,6 +1,7 @@ const { Component } = require('react') +const PropTypes = require('prop-types') const { connect } = require('react-redux') -const { Switch, Route, Redirect, withRouter } = require('react-router-dom') +const { Switch, Redirect, withRouter } = require('react-router-dom') const { compose } = require('recompose') const h = require('react-hyperscript') const actions = require('./actions') @@ -16,8 +17,6 @@ const NewKeyChainScreen = require('./new-keychain') const MainContainer = require('./main-container') const SendTransactionScreen2 = require('./components/send/send-v2-container') const ConfirmTxScreen = require('./conf-tx') -// notice -const generateLostAccountsNotice = require('../lib/lost-accounts-notice') // slideout menu const WalletView = require('./components/wallet-view') @@ -112,9 +111,15 @@ class App extends Component { } render () { - var props = this.props - const { isLoading, loadingMessage, network } = props - const isLoadingNetwork = network === 'loading' && props.currentView.name !== 'config' + const { + isLoading, + loadingMessage, + network, + provider, + frequentRpcList, + currentView, + } = this.props + const isLoadingNetwork = network === 'loading' && currentView.name !== 'config' const loadMessage = loadingMessage || isLoadingNetwork ? `Connecting to ${this.getNetworkName()}` : null log.debug('Main ui render function') @@ -139,8 +144,8 @@ class App extends Component { // network dropdown h(NetworkDropdown, { - provider: this.props.provider, - frequentRpcList: this.props.frequentRpcList, + provider, + frequentRpcList, }, []), h(AccountMenu), @@ -153,7 +158,6 @@ class App extends Component { // content this.renderRoutes(), - // this.renderPrimary(), ]) ) } @@ -337,8 +341,6 @@ class App extends Component { renderPrimary () { log.debug('rendering primary') const { - isMascara, - isOnboarding, noActiveNotices, lostAccounts, isInitialized, @@ -558,6 +560,36 @@ class App extends Component { } } +App.propTypes = { + currentCurrency: PropTypes.string, + setCurrentCurrencyToUSD: PropTypes.func, + isLoading: PropTypes.bool, + loadingMessage: PropTypes.string, + network: PropTypes.string, + provider: PropTypes.object, + frequentRpcList: PropTypes.array, + currentView: PropTypes.object, + sidebarOpen: PropTypes.bool, + hideSidebar: PropTypes.func, + isMascara: PropTypes.bool, + isOnboarding: PropTypes.bool, + isUnlocked: PropTypes.bool, + networkDropdownOpen: PropTypes.bool, + showNetworkDropdown: PropTypes.func, + hideNetworkDropdown: PropTypes.func, + history: PropTypes.object, + dispatch: PropTypes.func, + toggleAccountMenu: PropTypes.func, + selectedAddress: PropTypes.string, + noActiveNotices: PropTypes.bool, + lostAccounts: PropTypes.array, + isInitialized: PropTypes.bool, + forgottenPassword: PropTypes.bool, + activeAddress: PropTypes.string, + unapprovedTxs: PropTypes.object, + seedWords: PropTypes.string, +} + function mapStateToProps (state) { const { appState, metamask } = state const { -- cgit From d9ea2df6c2a2cabedead09f90c3c9bb7b4c37dd1 Mon Sep 17 00:00:00 2001 From: Alexander Tseung Date: Mon, 4 Dec 2017 14:29:52 -0500 Subject: Add route for Mascara confirm seed --- ui/app/app.js | 11 +++++++++-- 1 file changed, 9 insertions(+), 2 deletions(-) (limited to 'ui/app/app.js') diff --git a/ui/app/app.js b/ui/app/app.js index 3f6795386..8c3cfee2f 100644 --- a/ui/app/app.js +++ b/ui/app/app.js @@ -9,7 +9,8 @@ const actions = require('./actions') 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 +const MascaraSeedScreen = require('../../mascara/src/app/first-time/seed-screen').default +const MascaraConfirmSeedScreen = require('../../mascara/src/app/first-time/confirm-seed-screen').default // init const InitializeMenuScreen = require('./first-time/init-menu') const NewKeyChainScreen = require('./new-keychain') @@ -51,6 +52,7 @@ const { UNLOCK_ROUTE, SETTINGS_ROUTE, REVEAL_SEED_ROUTE, + CONFIRM_SEED_ROUTE, RESTORE_VAULT_ROUTE, ADD_TOKEN_ROUTE, IMPORT_ACCOUNT_ROUTE, @@ -90,7 +92,12 @@ class App extends Component { path: REVEAL_SEED_ROUTE, exact, component: RevealSeedPage, - mascaraComponent: MascaraBackupPhraseScreen, + mascaraComponent: MascaraSeedScreen, + }), + h(MetamaskRoute, { + path: CONFIRM_SEED_ROUTE, + exact, + mascaraComponent: MascaraConfirmSeedScreen, }), h(Unauthenticated, { path: UNLOCK_ROUTE, exact, component: UnlockPage }), h(Unauthenticated, { path: SETTINGS_ROUTE, component: Settings }), -- cgit From 706a6b0ad6d7b6e2d56252f17713e63430d84abc Mon Sep 17 00:00:00 2001 From: Alexander Tseung Date: Mon, 4 Dec 2017 15:13:02 -0500 Subject: Add initialized checks for first time flow routes --- ui/app/app.js | 16 ++++++++-------- 1 file changed, 8 insertions(+), 8 deletions(-) (limited to 'ui/app/app.js') diff --git a/ui/app/app.js b/ui/app/app.js index 8c3cfee2f..6717b3d67 100644 --- a/ui/app/app.js +++ b/ui/app/app.js @@ -24,10 +24,10 @@ const WalletView = require('./components/wallet-view') // other views const Authenticated = require('./components/pages/authenticated') -const Unauthenticated = require('./components/pages/unauthenticated') +const Initialized = require('./components/pages/initialized') const MetamaskRoute = require('./components/pages/metamask-route') const Settings = require('./components/pages/settings') -const UnlockPage = require('./components/pages/unauthenticated/unlock') +const UnlockPage = require('./components/pages/unlock') const RestoreVaultPage = require('./components/pages/keychains/restore-vault') const RevealSeedPage = require('./components/pages/keychains/reveal-seed') const AddTokenPage = require('./components/pages/add-token') @@ -88,21 +88,21 @@ class App extends Component { component: InitializeMenuScreen, mascaraComponent: MascaraCreatePassword, }), - h(MetamaskRoute, { + h(Initialized, { path: REVEAL_SEED_ROUTE, exact, component: RevealSeedPage, mascaraComponent: MascaraSeedScreen, }), - h(MetamaskRoute, { + h(Initialized, { path: CONFIRM_SEED_ROUTE, exact, mascaraComponent: MascaraConfirmSeedScreen, }), - 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, { + h(Initialized, { path: UNLOCK_ROUTE, exact, component: UnlockPage }), + h(Initialized, { path: SETTINGS_ROUTE, component: Settings }), + h(Initialized, { path: RESTORE_VAULT_ROUTE, exact, component: RestoreVaultPage }), + h(Initialized, { path: NOTICE_ROUTE, exact, component: NoticeScreen, -- cgit From 5d1187c37bfee988d7384f189f228882ce847005 Mon Sep 17 00:00:00 2001 From: Alexander Tseung Date: Mon, 4 Dec 2017 22:27:42 -0500 Subject: Add route for signature request --- ui/app/app.js | 25 ++++++++++++++++++++++++- 1 file changed, 24 insertions(+), 1 deletion(-) (limited to 'ui/app/app.js') diff --git a/ui/app/app.js b/ui/app/app.js index 6717b3d67..07be459fc 100644 --- a/ui/app/app.js +++ b/ui/app/app.js @@ -33,6 +33,7 @@ const RevealSeedPage = require('./components/pages/keychains/reveal-seed') const AddTokenPage = require('./components/pages/add-token') const ImportAccountPage = require('./components/pages/import-account') const NoticeScreen = require('./components/pages/notice') +const SignatureRequestPage = require('./components/pages/signature-request') const Loading = require('./components/loading') const NetworkIndicator = require('./components/network') @@ -60,6 +61,7 @@ const { CONFIRM_TRANSACTION_ROUTE, INITIALIZE_ROUTE, NOTICE_ROUTE, + SIGNATURE_REQUEST_ROUTE, } = require('./routes') class App extends Component { @@ -112,6 +114,7 @@ class App extends Component { h(Authenticated, { path: SEND_ROUTE, exact, component: SendTransactionScreen2 }), h(Authenticated, { path: ADD_TOKEN_ROUTE, exact, component: AddTokenPage }), h(Authenticated, { path: IMPORT_ACCOUNT_ROUTE, exact, component: ImportAccountPage }), + h(Authenticated, { path: SIGNATURE_REQUEST_ROUTE, exact, component: SignatureRequestPage }), h(Authenticated, { path: DEFAULT_ROUTE, exact, component: this.renderPrimary }), ]) ) @@ -356,6 +359,9 @@ class App extends Component { activeAddress, unapprovedTxs = {}, seedWords, + unapprovedMsgCount = 0, + unapprovedPersonalMsgCount = 0, + unapprovedTypedMessagesCount = 0, } = this.props // seed words @@ -386,6 +392,15 @@ class App extends Component { }) } + // unapproved messages + if (unapprovedTypedMessagesCount + unapprovedMsgCount + unapprovedPersonalMsgCount > 0) { + return h(Redirect, { + to: { + pathname: SIGNATURE_REQUEST_ROUTE, + }, + }) + } + // if (!props.noActiveNotices) { // log.debug('rendering notice screen for unread notices.') // return h(NoticeScreen, { @@ -595,6 +610,9 @@ App.propTypes = { activeAddress: PropTypes.string, unapprovedTxs: PropTypes.object, seedWords: PropTypes.string, + unapprovedMsgCount: PropTypes.number, + unapprovedPersonalMsgCount: PropTypes.number, + unapprovedTypedMessagesCount: PropTypes.number, } function mapStateToProps (state) { @@ -617,6 +635,9 @@ function mapStateToProps (state) { unapprovedTxs, lastUnreadNotice, lostAccounts, + unapprovedMsgCount, + unapprovedPersonalMsgCount, + unapprovedTypedMessagesCount, } = metamask const selected = address || Object.keys(accounts)[0] @@ -637,7 +658,9 @@ function mapStateToProps (state) { isOnboarding: Boolean(!noActiveNotices || seedWords || !isInitialized), seedWords: state.metamask.seedWords, unapprovedTxs, - unapprovedMsgs: state.metamask.unapprovedMsgs, + unapprovedMsgCount, + unapprovedPersonalMsgCount, + unapprovedTypedMessagesCount, menuOpen: state.appState.menuOpen, network: state.metamask.network, provider: state.metamask.provider, -- cgit From 0c6fef3dec4f3ba70e8e86275ee9db4f2d58d129 Mon Sep 17 00:00:00 2001 From: Alexander Tseung Date: Wed, 31 Jan 2018 18:08:49 -0800 Subject: Add create new account routes, fix conflicts from uat updates --- ui/app/app.js | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) (limited to 'ui/app/app.js') diff --git a/ui/app/app.js b/ui/app/app.js index 22dc8c343..09af2db2c 100644 --- a/ui/app/app.js +++ b/ui/app/app.js @@ -33,7 +33,7 @@ const UnlockPage = require('./components/pages/unlock') const RestoreVaultPage = require('./components/pages/keychains/restore-vault') const RevealSeedPage = require('./components/pages/keychains/reveal-seed') const AddTokenPage = require('./components/pages/add-token') -const ImportAccountPage = require('./components/pages/import-account') +const CreateAccountPage = require('./components/pages/create-account') const NoticeScreen = require('./components/pages/notice') const SignatureRequestPage = require('./components/pages/signature-request') @@ -58,7 +58,7 @@ const { CONFIRM_SEED_ROUTE, RESTORE_VAULT_ROUTE, ADD_TOKEN_ROUTE, - IMPORT_ACCOUNT_ROUTE, + NEW_ACCOUNT_ROUTE, SEND_ROUTE, CONFIRM_TRANSACTION_ROUTE, INITIALIZE_ROUTE, @@ -115,7 +115,7 @@ class App extends Component { h(Authenticated, { path: CONFIRM_TRANSACTION_ROUTE, exact, component: ConfirmTxScreen }), h(Authenticated, { path: SEND_ROUTE, exact, component: SendTransactionScreen2 }), h(Authenticated, { path: ADD_TOKEN_ROUTE, exact, component: AddTokenPage }), - h(Authenticated, { path: IMPORT_ACCOUNT_ROUTE, exact, component: ImportAccountPage }), + h(Authenticated, { path: NEW_ACCOUNT_ROUTE, component: CreateAccountPage }), h(Authenticated, { path: SIGNATURE_REQUEST_ROUTE, exact, component: SignatureRequestPage }), h(Authenticated, { path: DEFAULT_ROUTE, exact, component: this.renderPrimary }), ]) -- cgit From 72ffa2c3f5abbcb06c8ab5fdf20b9d934c330692 Mon Sep 17 00:00:00 2001 From: Alexander Tseung Date: Fri, 9 Feb 2018 12:05:27 -0800 Subject: Fix react-router related exceptions --- ui/app/app.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) (limited to 'ui/app/app.js') diff --git a/ui/app/app.js b/ui/app/app.js index 0ecfd0dde..168dfa9ac 100644 --- a/ui/app/app.js +++ b/ui/app/app.js @@ -268,7 +268,7 @@ class App extends Component { }, [ h('div.app-header-contents', {}, [ h('div.left-menu-wrapper', { - onClick: () => history.push(DEFAULT_ROUTE), + onClick: () => props.history.push(DEFAULT_ROUTE), }, [ // mini logo h('img.metafox-icon', { -- cgit From 58f52b2b8de9efd43896e23ab0ac9972f45bb278 Mon Sep 17 00:00:00 2001 From: Alexander Tseung Date: Wed, 28 Mar 2018 13:21:53 -0700 Subject: Fix merge conflicts. Refactor onboarding flow. --- ui/app/app.js | 26 +++++++++++++++----------- 1 file changed, 15 insertions(+), 11 deletions(-) (limited to 'ui/app/app.js') diff --git a/ui/app/app.js b/ui/app/app.js index d114cde09..2b6d5fc62 100644 --- a/ui/app/app.js +++ b/ui/app/app.js @@ -1,21 +1,23 @@ const { Component } = require('react') const PropTypes = require('prop-types') const { connect } = require('react-redux') -const { Switch, Redirect, withRouter } = require('react-router-dom') +const { Route, Switch, Redirect, withRouter } = require('react-router-dom') const { compose } = require('recompose') const h = require('react-hyperscript') const actions = require('./actions') const classnames = require('classnames') const t = require('../i18n') +// init +const InitializeScreen = require('../../mascara/src/app/first-time').default +const WelcomeScreen = require('./welcome-screen').default +const NewKeyChainScreen = require('./new-keychain') // mascara 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 MascaraSeedScreen = require('../../mascara/src/app/first-time/seed-screen').default const MascaraConfirmSeedScreen = require('../../mascara/src/app/first-time/confirm-seed-screen').default -// init -const NewKeyChainScreen = require('./new-keychain') // accounts const MainContainer = require('./main-container') @@ -28,7 +30,6 @@ const WalletView = require('./components/wallet-view') // other views const Authenticated = require('./components/pages/authenticated') const Initialized = require('./components/pages/initialized') -const MetamaskRoute = require('./components/pages/metamask-route') const Settings = require('./components/pages/settings') const UnlockPage = require('./components/pages/unlock') const RestoreVaultPage = require('./components/pages/keychains/restore-vault') @@ -65,6 +66,7 @@ const { INITIALIZE_ROUTE, NOTICE_ROUTE, SIGNATURE_REQUEST_ROUTE, + WELCOME_ROUTE, } = require('./routes') class App extends Component { @@ -87,11 +89,14 @@ class App extends Component { return ( h(Switch, [ - h(MetamaskRoute, { - path: INITIALIZE_ROUTE, + h(Route, { + path: WELCOME_ROUTE, exact, - component: InitializeMenuScreen, - mascaraComponent: MascaraCreatePassword, + component: WelcomeScreen, + }), + h(Route, { + path: INITIALIZE_ROUTE, + component: InitializeScreen, }), h(Initialized, { path: REVEAL_SEED_ROUTE, @@ -110,8 +115,7 @@ class App extends Component { h(Initialized, { path: NOTICE_ROUTE, exact, - component: NoticeScreen, - mascaraComponent: MascaraNoticeScreen, + component: MascaraNoticeScreen, }), h(Authenticated, { path: CONFIRM_TRANSACTION_ROUTE, exact, component: ConfirmTxScreen }), h(Authenticated, { path: SEND_ROUTE, exact, component: SendTransactionScreen2 }), @@ -465,7 +469,7 @@ class App extends Component { // // default: // // log.debug('rendering menu screen') - // // return h(InitializeMenuScreen, {key: 'menuScreenInit'}) + // // return h(InitializeScreen, {key: 'menuScreenInit'}) // // } // } -- cgit From bdc4a6964ae83faa8229c50870e3bcc9b9074989 Mon Sep 17 00:00:00 2001 From: Alexander Tseung Date: Fri, 30 Mar 2018 14:51:11 -0700 Subject: Fix merge conflicts. Refactor renderPrimary into Home component --- ui/app/app.js | 442 +++++++++++++++++++++++++++------------------------------- 1 file changed, 207 insertions(+), 235 deletions(-) (limited to 'ui/app/app.js') diff --git a/ui/app/app.js b/ui/app/app.js index 719830fda..5d47a4189 100644 --- a/ui/app/app.js +++ b/ui/app/app.js @@ -27,6 +27,7 @@ const ConfirmTxScreen = require('./conf-tx') const WalletView = require('./components/wallet-view') // other views +const Home = require('./components/pages/home') const Authenticated = require('./components/pages/authenticated') const Initialized = require('./components/pages/initialized') const Settings = require('./components/pages/settings') @@ -36,7 +37,6 @@ const RevealSeedPage = require('./components/pages/keychains/reveal-seed') const AddTokenPage = require('./components/pages/add-token') const CreateAccountPage = require('./components/pages/create-account') const NoticeScreen = require('./components/pages/notice') -const SignatureRequestPage = require('./components/pages/signature-request') const Loading = require('./components/loading') const NetworkIndicator = require('./components/network') @@ -69,11 +69,11 @@ const { } = require('./routes') class App extends Component { - constructor (props) { - super(props) + // constructor (props) { + // super(props) - this.renderPrimary = this.renderPrimary.bind(this) - } + // this.renderPrimary = this.renderPrimary.bind(this) + // } componentWillMount () { const { currentCurrency, setCurrentCurrencyToUSD } = this.props @@ -116,12 +116,11 @@ class App extends Component { exact, component: MascaraNoticeScreen, }), - h(Authenticated, { path: CONFIRM_TRANSACTION_ROUTE, exact, component: ConfirmTxScreen }), + h(Authenticated, { path: CONFIRM_TRANSACTION_ROUTE, component: ConfirmTxScreen }), h(Authenticated, { path: SEND_ROUTE, exact, component: SendTransactionScreen2 }), h(Authenticated, { path: ADD_TOKEN_ROUTE, exact, component: AddTokenPage }), h(Authenticated, { path: NEW_ACCOUNT_ROUTE, component: CreateAccountPage }), - h(Authenticated, { path: SIGNATURE_REQUEST_ROUTE, exact, component: SignatureRequestPage }), - h(Authenticated, { path: DEFAULT_ROUTE, exact, component: this.renderPrimary }), + h(Authenticated, { path: DEFAULT_ROUTE, exact, component: Home }), ]) ) } @@ -357,233 +356,205 @@ class App extends Component { }) } - renderBackButton (style, justArrow = false) { - const { dispatch } = this.props - - return ( - h('.flex-row', { - key: 'leftArrow', - style: style, - onClick: () => dispatch(actions.goBackToInitView()), - }, [ - h('i.fa.fa-arrow-left.cursor-pointer'), - justArrow ? null : h('div.cursor-pointer', { - style: { - marginLeft: '3px', - }, - onClick: () => dispatch(actions.goBackToInitView()), - }, 'BACK'), - ]) - ) - } - - renderPrimary () { - log.debug('rendering primary') - const { - noActiveNotices, - lostAccounts, - forgottenPassword, - currentView, - activeAddress, - unapprovedTxs = {}, - seedWords, - unapprovedMsgCount = 0, - unapprovedPersonalMsgCount = 0, - unapprovedTypedMessagesCount = 0, - } = this.props - - // seed words - if (seedWords) { - log.debug('rendering seed words') - return h(Redirect, { - to: { - pathname: REVEAL_SEED_ROUTE, - }, - }) - } - - if (forgottenPassword) { - log.debug('rendering restore vault screen') - return h(Redirect, { - to: { - pathname: RESTORE_VAULT_ROUTE, - }, - }) - } - - // notices - if (!noActiveNotices || (lostAccounts && lostAccounts.length > 0)) { - return h(Redirect, { - to: { - pathname: NOTICE_ROUTE, - }, - }) - } - - // unapprovedTxs - if (Object.keys(unapprovedTxs).length) { - return h(Redirect, { - to: { - pathname: CONFIRM_TRANSACTION_ROUTE, - }, - }) - } - - // unapproved messages - if (unapprovedTypedMessagesCount + unapprovedMsgCount + unapprovedPersonalMsgCount > 0) { - return h(Redirect, { - to: { - pathname: SIGNATURE_REQUEST_ROUTE, - }, - }) - } - - // 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()), - // }) - // } - - // if (props.seedWords) { - // log.debug('rendering seed words') - // return h(HDCreateVaultComplete, {key: 'HDCreateVaultComplete'}) - // } - - // show initialize screen - // if (!isInitialized || forgottenPassword) { - // // show current view - // log.debug('rendering an initialize screen') - // // switch (props.currentView.name) { - - // // case 'restoreVault': - // // log.debug('rendering restore vault screen') - // // return h(HDRestoreVaultScreen, {key: 'HDRestoreVaultScreen'}) - - // // default: - // // log.debug('rendering menu screen') - // // return h(InitializeScreen, {key: 'menuScreenInit'}) - // // } - // } - - // // show unlock screen - // if (!props.isUnlocked) { - // return h(MainContainer, { - // currentViewName: props.currentView.name, - // isUnlocked: props.isUnlocked, - // }) - // } - - // show current view - switch (currentView.name) { - - case 'accountDetail': - log.debug('rendering main container') - return h(MainContainer, {key: 'account-detail'}) - - // case 'sendTransaction': - // log.debug('rendering send tx screen') - - // // Going to leave this here until we are ready to delete SendTransactionScreen v1 - // // const SendComponentToRender = checkFeatureToggle('send-v2') - // // ? SendTransactionScreen2 - // // : SendTransactionScreen - - // return h(SendTransactionScreen2, {key: 'send-transaction'}) - - // case 'sendToken': - // log.debug('rendering send token screen') - - // // Going to leave this here until we are ready to delete SendTransactionScreen v1 - // // const SendTokenComponentToRender = checkFeatureToggle('send-v2') - // // ? SendTransactionScreen2 - // // : SendTokenScreen - - // return h(SendTransactionScreen2, {key: 'sendToken'}) - - case 'newKeychain': - log.debug('rendering new keychain screen') - return h(NewKeyChainScreen, {key: 'new-keychain'}) - - // case 'confTx': - // log.debug('rendering confirm tx screen') - // return h(Redirect, { - // to: { - // pathname: CONFIRM_TRANSACTION_ROUTE, - // }, - // }) - // return h(ConfirmTxScreen, {key: 'confirm-tx'}) - - // case 'add-token': - // log.debug('rendering add-token screen from unlock screen.') - // return h(AddTokenScreen, {key: 'add-token'}) - - // case 'config': - // log.debug('rendering config screen') - // return h(Settings, {key: 'config'}) - - // case 'import-menu': - // log.debug('rendering import screen') - // return h(Import, {key: 'import-menu'}) - - // case 'reveal-seed-conf': - // log.debug('rendering reveal seed confirmation screen') - // return h(RevealSeedConfirmation, {key: 'reveal-seed-conf'}) - - // case 'info': - // log.debug('rendering info screen') - // return h(Settings, {key: 'info', tab: 'info'}) - - case 'buyEth': - log.debug('rendering buy ether screen') - return h(BuyView, {key: 'buyEthView'}) - - case 'onboardingBuyEth': - log.debug('rendering onboarding buy ether screen') - return h(MascaraBuyEtherScreen, {key: 'buyEthView'}) - - case 'qr': - log.debug('rendering show qr screen') - return h('div', { - style: { - position: 'absolute', - height: '100%', - top: '0px', - left: '0px', - }, - }, [ - h('i.fa.fa-arrow-left.fa-lg.cursor-pointer.color-orange', { - onClick: () => this.props.dispatch(actions.backToAccountDetail(activeAddress)), - style: { - marginLeft: '10px', - marginTop: '50px', - }, - }), - h('div', { - style: { - position: 'absolute', - left: '44px', - width: '285px', - }, - }, [ - h(QrView, {key: 'qr'}), - ]), - ]) - - default: - log.debug('rendering default, account detail screen') - return h(MainContainer, {key: 'account-detail'}) - } - } + // renderPrimary () { + // log.debug('rendering primary') + // const { + // noActiveNotices, + // lostAccounts, + // forgottenPassword, + // currentView, + // activeAddress, + // unapprovedTxs = {}, + // seedWords, + // unapprovedMsgCount = 0, + // unapprovedPersonalMsgCount = 0, + // unapprovedTypedMessagesCount = 0, + // } = this.props + + // // seed words + // if (seedWords) { + // log.debug('rendering seed words') + // return h(Redirect, { + // to: { + // pathname: REVEAL_SEED_ROUTE, + // }, + // }) + // } + + // if (forgottenPassword) { + // log.debug('rendering restore vault screen') + // return h(Redirect, { + // to: { + // pathname: RESTORE_VAULT_ROUTE, + // }, + // }) + // } + + // // notices + // if (!noActiveNotices || (lostAccounts && lostAccounts.length > 0)) { + // return h(Redirect, { + // to: { + // pathname: NOTICE_ROUTE, + // }, + // }) + // } + + // // unapprovedTxs and unapproved messages + // if (Object.keys(unapprovedTxs).length || + // unapprovedTypedMessagesCount + unapprovedMsgCount + unapprovedPersonalMsgCount > 0) { + // return h(Redirect, { + // to: { + // pathname: CONFIRM_TRANSACTION_ROUTE, + // }, + // }) + // } + + // // 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()), + // // }) + // // } + + // // if (props.seedWords) { + // // log.debug('rendering seed words') + // // return h(HDCreateVaultComplete, {key: 'HDCreateVaultComplete'}) + // // } + + // // show initialize screen + // // if (!isInitialized || forgottenPassword) { + // // // show current view + // // log.debug('rendering an initialize screen') + // // // switch (props.currentView.name) { + + // // // case 'restoreVault': + // // // log.debug('rendering restore vault screen') + // // // return h(HDRestoreVaultScreen, {key: 'HDRestoreVaultScreen'}) + + // // // default: + // // // log.debug('rendering menu screen') + // // // return h(InitializeScreen, {key: 'menuScreenInit'}) + // // // } + // // } + + // // // show unlock screen + // // if (!props.isUnlocked) { + // // return h(MainContainer, { + // // currentViewName: props.currentView.name, + // // isUnlocked: props.isUnlocked, + // // }) + // // } + + // // show current view + // switch (currentView.name) { + + // case 'accountDetail': + // log.debug('rendering main container') + // return h(MainContainer, {key: 'account-detail'}) + + // // case 'sendTransaction': + // // log.debug('rendering send tx screen') + + // // // Going to leave this here until we are ready to delete SendTransactionScreen v1 + // // // const SendComponentToRender = checkFeatureToggle('send-v2') + // // // ? SendTransactionScreen2 + // // // : SendTransactionScreen + + // // return h(SendTransactionScreen2, {key: 'send-transaction'}) + + // // case 'sendToken': + // // log.debug('rendering send token screen') + + // // // Going to leave this here until we are ready to delete SendTransactionScreen v1 + // // // const SendTokenComponentToRender = checkFeatureToggle('send-v2') + // // // ? SendTransactionScreen2 + // // // : SendTokenScreen + + // // return h(SendTransactionScreen2, {key: 'sendToken'}) + + // case 'newKeychain': + // log.debug('rendering new keychain screen') + // return h(NewKeyChainScreen, {key: 'new-keychain'}) + + // // case 'confTx': + // // log.debug('rendering confirm tx screen') + // // return h(Redirect, { + // // to: { + // // pathname: CONFIRM_TRANSACTION_ROUTE, + // // }, + // // }) + // // return h(ConfirmTxScreen, {key: 'confirm-tx'}) + + // // case 'add-token': + // // log.debug('rendering add-token screen from unlock screen.') + // // return h(AddTokenScreen, {key: 'add-token'}) + + // // case 'config': + // // log.debug('rendering config screen') + // // return h(Settings, {key: 'config'}) + + // // case 'import-menu': + // // log.debug('rendering import screen') + // // return h(Import, {key: 'import-menu'}) + + // // case 'reveal-seed-conf': + // // log.debug('rendering reveal seed confirmation screen') + // // return h(RevealSeedConfirmation, {key: 'reveal-seed-conf'}) + + // // case 'info': + // // log.debug('rendering info screen') + // // return h(Settings, {key: 'info', tab: 'info'}) + + // case 'buyEth': + // log.debug('rendering buy ether screen') + // return h(BuyView, {key: 'buyEthView'}) + + // case 'onboardingBuyEth': + // log.debug('rendering onboarding buy ether screen') + // return h(MascaraBuyEtherScreen, {key: 'buyEthView'}) + + // case 'qr': + // log.debug('rendering show qr screen') + // return h('div', { + // style: { + // position: 'absolute', + // height: '100%', + // top: '0px', + // left: '0px', + // }, + // }, [ + // h('i.fa.fa-arrow-left.fa-lg.cursor-pointer.color-orange', { + // onClick: () => this.props.dispatch(actions.backToAccountDetail(activeAddress)), + // style: { + // marginLeft: '10px', + // marginTop: '50px', + // }, + // }), + // h('div', { + // style: { + // position: 'absolute', + // left: '44px', + // width: '285px', + // }, + // }, [ + // h(QrView, {key: 'qr'}), + // ]), + // ]) + + // default: + // log.debug('rendering default, account detail screen') + // return h(MainContainer, {key: 'account-detail'}) + // } + // } toggleMetamaskActive () { if (!this.props.isUnlocked) { @@ -676,6 +647,7 @@ App.propTypes = { betaUI: PropTypes.bool, isMouseUser: PropTypes.bool, setMouseUserState: PropTypes.func, + t: PropTypes.func, } function mapStateToProps (state) { -- cgit From 2fa554a6414d2231dcd6f2476866ea9c1c7b80ca Mon Sep 17 00:00:00 2001 From: Alexander Tseung Date: Fri, 30 Mar 2018 17:37:24 -0700 Subject: Fix conf-tx render --- ui/app/app.js | 5 ++++- 1 file changed, 4 insertions(+), 1 deletion(-) (limited to 'ui/app/app.js') diff --git a/ui/app/app.js b/ui/app/app.js index af2b70353..8a21220b1 100644 --- a/ui/app/app.js +++ b/ui/app/app.js @@ -4,7 +4,6 @@ const connect = require('react-redux').connect const { Route, Switch, Redirect, withRouter } = require('react-router-dom') const { compose } = require('recompose') const h = require('react-hyperscript') -const PropTypes = require('prop-types') const actions = require('./actions') const classnames = require('classnames') @@ -732,6 +731,10 @@ function mapDispatchToProps (dispatch, ownProps) { } } +App.contextTypes = { + t: PropTypes.func, +} + module.exports = compose( withRouter, connect(mapStateToProps, mapDispatchToProps) -- cgit From 6277a4c46aa2fd94f0fff047aff346d7f255224d Mon Sep 17 00:00:00 2001 From: Alexander Tseung Date: Mon, 2 Apr 2018 02:59:49 -0700 Subject: Refactor onboarding flow --- ui/app/app.js | 24 ++++-------------------- 1 file changed, 4 insertions(+), 20 deletions(-) (limited to 'ui/app/app.js') diff --git a/ui/app/app.js b/ui/app/app.js index 8a21220b1..f3e9e3470 100644 --- a/ui/app/app.js +++ b/ui/app/app.js @@ -88,34 +88,18 @@ class App extends Component { return ( h(Switch, [ - h(Route, { - path: WELCOME_ROUTE, - exact, - component: WelcomeScreen, - }), - h(Route, { - path: INITIALIZE_ROUTE, - component: InitializeScreen, - }), + h(Route, { path: INITIALIZE_ROUTE, component: InitializeScreen }), h(Initialized, { path: REVEAL_SEED_ROUTE, exact, component: RevealSeedPage, mascaraComponent: MascaraSeedScreen, }), - h(Initialized, { - path: CONFIRM_SEED_ROUTE, - exact, - mascaraComponent: MascaraConfirmSeedScreen, - }), + // h(Initialized, { path: CONFIRM_SEED_ROUTE, exact, component: MascaraConfirmSeedScreen }), h(Initialized, { path: UNLOCK_ROUTE, exact, component: UnlockPage }), h(Initialized, { path: SETTINGS_ROUTE, component: Settings }), h(Initialized, { path: RESTORE_VAULT_ROUTE, exact, component: RestoreVaultPage }), - h(Initialized, { - path: NOTICE_ROUTE, - exact, - component: MascaraNoticeScreen, - }), + h(Initialized, { path: NOTICE_ROUTE, exact, component: NoticeScreen }), h(Authenticated, { path: CONFIRM_TRANSACTION_ROUTE, component: ConfirmTxScreen }), h(Authenticated, { path: SEND_ROUTE, exact, component: SendTransactionScreen2 }), h(Authenticated, { path: ADD_TOKEN_ROUTE, exact, component: AddTokenPage }), @@ -322,7 +306,7 @@ class App extends Component { ]), - isUnlocked && h('div.account-menu__icon', { onClick: this.context.toggleAccountMenu }, [ + isUnlocked && h('div.account-menu__icon', { onClick: this.props.toggleAccountMenu }, [ h(Identicon, { address: this.props.selectedAddress, diameter: 32, -- cgit From 516c1869b0f366a42282a66e14185ce630f883dd Mon Sep 17 00:00:00 2001 From: Alexander Tseung Date: Mon, 2 Apr 2018 16:24:37 -0700 Subject: Fix lint errors --- ui/app/app.js | 220 +--------------------------------------------------------- 1 file changed, 1 insertion(+), 219 deletions(-) (limited to 'ui/app/app.js') diff --git a/ui/app/app.js b/ui/app/app.js index f3e9e3470..52e5e00a8 100644 --- a/ui/app/app.js +++ b/ui/app/app.js @@ -1,7 +1,7 @@ const { Component } = require('react') const PropTypes = require('prop-types') const connect = require('react-redux').connect -const { Route, Switch, Redirect, withRouter } = require('react-router-dom') +const { Route, Switch, withRouter } = require('react-router-dom') const { compose } = require('recompose') const h = require('react-hyperscript') const actions = require('./actions') @@ -9,17 +9,10 @@ const classnames = require('classnames') // init const InitializeScreen = require('../../mascara/src/app/first-time').default -const WelcomeScreen = require('./welcome-screen').default -const NewKeyChainScreen = require('./new-keychain') // mascara -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 MascaraSeedScreen = require('../../mascara/src/app/first-time/seed-screen').default -const MascaraConfirmSeedScreen = require('../../mascara/src/app/first-time/confirm-seed-screen').default // accounts -const MainContainer = require('./main-container') const SendTransactionScreen2 = require('./components/send/send-v2-container') const ConfirmTxScreen = require('./conf-tx') @@ -41,11 +34,9 @@ const NoticeScreen = require('./components/pages/notice') const Loading = require('./components/loading') const NetworkIndicator = require('./components/network') const Identicon = require('./components/identicon') -const BuyView = require('./components/buy-button-subview') const ReactCSSTransitionGroup = require('react-addons-css-transition-group') const NetworkDropdown = require('./components/dropdowns/network-dropdown') const AccountMenu = require('./components/account-menu') -const QrView = require('./components/qr-code') // Global Modals const Modal = require('./components/modals/index').Modal @@ -56,7 +47,6 @@ const { UNLOCK_ROUTE, SETTINGS_ROUTE, REVEAL_SEED_ROUTE, - CONFIRM_SEED_ROUTE, RESTORE_VAULT_ROUTE, ADD_TOKEN_ROUTE, NEW_ACCOUNT_ROUTE, @@ -64,17 +54,9 @@ const { CONFIRM_TRANSACTION_ROUTE, INITIALIZE_ROUTE, NOTICE_ROUTE, - SIGNATURE_REQUEST_ROUTE, - WELCOME_ROUTE, } = require('./routes') class App extends Component { - // constructor (props) { - // super(props) - - // this.renderPrimary = this.renderPrimary.bind(this) - // } - componentWillMount () { const { currentCurrency, setCurrentCurrencyToUSD } = this.props @@ -340,206 +322,6 @@ class App extends Component { }) } - // renderPrimary () { - // log.debug('rendering primary') - // const { - // noActiveNotices, - // lostAccounts, - // forgottenPassword, - // currentView, - // activeAddress, - // unapprovedTxs = {}, - // seedWords, - // unapprovedMsgCount = 0, - // unapprovedPersonalMsgCount = 0, - // unapprovedTypedMessagesCount = 0, - // } = this.props - - // // seed words - // if (seedWords) { - // log.debug('rendering seed words') - // return h(Redirect, { - // to: { - // pathname: REVEAL_SEED_ROUTE, - // }, - // }) - // } - - // if (forgottenPassword) { - // log.debug('rendering restore vault screen') - // return h(Redirect, { - // to: { - // pathname: RESTORE_VAULT_ROUTE, - // }, - // }) - // } - - // // notices - // if (!noActiveNotices || (lostAccounts && lostAccounts.length > 0)) { - // return h(Redirect, { - // to: { - // pathname: NOTICE_ROUTE, - // }, - // }) - // } - - // // unapprovedTxs and unapproved messages - // if (Object.keys(unapprovedTxs).length || - // unapprovedTypedMessagesCount + unapprovedMsgCount + unapprovedPersonalMsgCount > 0) { - // return h(Redirect, { - // to: { - // pathname: CONFIRM_TRANSACTION_ROUTE, - // }, - // }) - // } - - // // 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()), - // // }) - // // } - - // // if (props.seedWords) { - // // log.debug('rendering seed words') - // // return h(HDCreateVaultComplete, {key: 'HDCreateVaultComplete'}) - // // } - - // // show initialize screen - // // if (!isInitialized || forgottenPassword) { - // // // show current view - // // log.debug('rendering an initialize screen') - // // // switch (props.currentView.name) { - - // // // case 'restoreVault': - // // // log.debug('rendering restore vault screen') - // // // return h(HDRestoreVaultScreen, {key: 'HDRestoreVaultScreen'}) - - // // // default: - // // // log.debug('rendering menu screen') - // // // return h(InitializeScreen, {key: 'menuScreenInit'}) - // // // } - // // } - - // // // show unlock screen - // // if (!props.isUnlocked) { - // // return h(MainContainer, { - // // currentViewName: props.currentView.name, - // // isUnlocked: props.isUnlocked, - // // }) - // // } - - // // show current view - // switch (currentView.name) { - - // case 'accountDetail': - // log.debug('rendering main container') - // return h(MainContainer, {key: 'account-detail'}) - - // // case 'sendTransaction': - // // log.debug('rendering send tx screen') - - // // // Going to leave this here until we are ready to delete SendTransactionScreen v1 - // // // const SendComponentToRender = checkFeatureToggle('send-v2') - // // // ? SendTransactionScreen2 - // // // : SendTransactionScreen - - // // return h(SendTransactionScreen2, {key: 'send-transaction'}) - - // // case 'sendToken': - // // log.debug('rendering send token screen') - - // // // Going to leave this here until we are ready to delete SendTransactionScreen v1 - // // // const SendTokenComponentToRender = checkFeatureToggle('send-v2') - // // // ? SendTransactionScreen2 - // // // : SendTokenScreen - - // // return h(SendTransactionScreen2, {key: 'sendToken'}) - - // case 'newKeychain': - // log.debug('rendering new keychain screen') - // return h(NewKeyChainScreen, {key: 'new-keychain'}) - - // // case 'confTx': - // // log.debug('rendering confirm tx screen') - // // return h(Redirect, { - // // to: { - // // pathname: CONFIRM_TRANSACTION_ROUTE, - // // }, - // // }) - // // return h(ConfirmTxScreen, {key: 'confirm-tx'}) - - // // case 'add-token': - // // log.debug('rendering add-token screen from unlock screen.') - // // return h(AddTokenScreen, {key: 'add-token'}) - - // // case 'config': - // // log.debug('rendering config screen') - // // return h(Settings, {key: 'config'}) - - // // case 'import-menu': - // // log.debug('rendering import screen') - // // return h(Import, {key: 'import-menu'}) - - // // case 'reveal-seed-conf': - // // log.debug('rendering reveal seed confirmation screen') - // // return h(RevealSeedConfirmation, {key: 'reveal-seed-conf'}) - - // // case 'info': - // // log.debug('rendering info screen') - // // return h(Settings, {key: 'info', tab: 'info'}) - - // case 'buyEth': - // log.debug('rendering buy ether screen') - // return h(BuyView, {key: 'buyEthView'}) - - // case 'onboardingBuyEth': - // log.debug('rendering onboarding buy ether screen') - // return h(MascaraBuyEtherScreen, {key: 'buyEthView'}) - - // case 'qr': - // log.debug('rendering show qr screen') - // return h('div', { - // style: { - // position: 'absolute', - // height: '100%', - // top: '0px', - // left: '0px', - // }, - // }, [ - // h('i.fa.fa-arrow-left.fa-lg.cursor-pointer.color-orange', { - // onClick: () => this.props.dispatch(actions.backToAccountDetail(activeAddress)), - // style: { - // marginLeft: '10px', - // marginTop: '50px', - // }, - // }), - // h('div', { - // style: { - // position: 'absolute', - // left: '44px', - // width: '285px', - // }, - // }, [ - // h(QrView, {key: 'qr'}), - // ]), - // ]) - - // default: - // log.debug('rendering default, account detail screen') - // return h(MainContainer, {key: 'account-detail'}) - // } - // } - toggleMetamaskActive () { if (!this.props.isUnlocked) { // currently inactive: redirect to password box -- cgit From 007f91cc50227eebb3db557db17c2f81625bdcf2 Mon Sep 17 00:00:00 2001 From: Alexander Tseung Date: Tue, 3 Apr 2018 17:43:42 -0700 Subject: commit --- ui/app/app.js | 10 ++-------- 1 file changed, 2 insertions(+), 8 deletions(-) (limited to 'ui/app/app.js') diff --git a/ui/app/app.js b/ui/app/app.js index 82871d970..f71a9bb06 100644 --- a/ui/app/app.js +++ b/ui/app/app.js @@ -11,7 +11,6 @@ const classnames = require('classnames') const InitializeScreen = require('../../mascara/src/app/first-time').default // mascara const MascaraSeedScreen = require('../../mascara/src/app/first-time/seed-screen').default - // accounts const SendTransactionScreen2 = require('./components/send/send-v2-container') const ConfirmTxScreen = require('./conf-tx') @@ -26,7 +25,7 @@ const Initialized = require('./components/pages/initialized') const Settings = require('./components/pages/settings') const UnlockPage = require('./components/pages/unlock') const RestoreVaultPage = require('./components/pages/keychains/restore-vault') -const RevealSeedPage = require('./components/pages/keychains/reveal-seed') +const RevealSeedConfirmation = require('./keychains/hd/recover-seed/confirmation') const AddTokenPage = require('./components/pages/add-token') const CreateAccountPage = require('./components/pages/create-account') const NoticeScreen = require('./components/pages/notice') @@ -71,12 +70,7 @@ class App extends Component { return ( h(Switch, [ h(Route, { path: INITIALIZE_ROUTE, component: InitializeScreen }), - h(Initialized, { - path: REVEAL_SEED_ROUTE, - exact, - component: RevealSeedPage, - mascaraComponent: MascaraSeedScreen, - }), + h(Initialized, { path: REVEAL_SEED_ROUTE, exact, component: RevealSeedConfirmation }), h(Initialized, { path: UNLOCK_ROUTE, exact, component: UnlockPage }), h(Initialized, { path: SETTINGS_ROUTE, component: Settings }), h(Initialized, { path: RESTORE_VAULT_ROUTE, exact, component: RestoreVaultPage }), -- cgit From 1e6f062bb6bbc39d6ab21a351fdb0d3bcab4d7d5 Mon Sep 17 00:00:00 2001 From: Alexander Tseung Date: Fri, 6 Apr 2018 02:04:39 -0700 Subject: Fix integration tests --- ui/app/app.js | 2 -- 1 file changed, 2 deletions(-) (limited to 'ui/app/app.js') diff --git a/ui/app/app.js b/ui/app/app.js index f71a9bb06..75c3febb0 100644 --- a/ui/app/app.js +++ b/ui/app/app.js @@ -9,8 +9,6 @@ const classnames = require('classnames') // init const InitializeScreen = require('../../mascara/src/app/first-time').default -// mascara -const MascaraSeedScreen = require('../../mascara/src/app/first-time/seed-screen').default // accounts const SendTransactionScreen2 = require('./components/send/send-v2-container') const ConfirmTxScreen = require('./conf-tx') -- cgit