From c8d45cb4a8a671bad20cd5a5aa1bcbbd88463bdb Mon Sep 17 00:00:00 2001 From: Esteban MIno Date: Wed, 25 Jul 2018 20:02:12 -0400 Subject: only show retry button on earliest pending tx --- old-ui/app/components/transaction-list-item.js | 8 +++++++- 1 file changed, 7 insertions(+), 1 deletion(-) (limited to 'old-ui') diff --git a/old-ui/app/components/transaction-list-item.js b/old-ui/app/components/transaction-list-item.js index e9280419a..e12f9cd6a 100644 --- a/old-ui/app/components/transaction-list-item.js +++ b/old-ui/app/components/transaction-list-item.js @@ -39,11 +39,17 @@ TransactionListItem.prototype.showRetryButton = function () { const currentNonce = txParams.nonce const currentNonceTxs = transactions.filter(tx => tx.txParams.nonce === currentNonce) const currentNonceSubmittedTxs = currentNonceTxs.filter(tx => tx.status === 'submitted') + const currentSubmittedTxs = transactions.filter(tx => tx.status === 'submitted') const lastSubmittedTxWithCurrentNonce = currentNonceSubmittedTxs[0] const currentTxIsLatestWithNonce = lastSubmittedTxWithCurrentNonce && lastSubmittedTxWithCurrentNonce.id === transaction.id + const lastTx = currentSubmittedTxs.reduce((tx1, tx2) => { + if (tx1.id < tx2.id) return tx1 + return tx2 + }) - return currentTxIsLatestWithNonce && Date.now() - submittedTime > 30000 + const currentTxIsLatest = lastTx.id === transaction.id + return currentTxIsLatestWithNonce && Date.now() - submittedTime > 30000 && currentTxIsLatest } TransactionListItem.prototype.render = function () { -- cgit From b580f60d749b862fe08adfc7457c726905ebc623 Mon Sep 17 00:00:00 2001 From: Esteban MIno Date: Wed, 25 Jul 2018 20:58:20 -0400 Subject: earliest tx by submittedTime --- old-ui/app/components/transaction-list-item.js | 13 ++++++++----- 1 file changed, 8 insertions(+), 5 deletions(-) (limited to 'old-ui') diff --git a/old-ui/app/components/transaction-list-item.js b/old-ui/app/components/transaction-list-item.js index e12f9cd6a..f479ce666 100644 --- a/old-ui/app/components/transaction-list-item.js +++ b/old-ui/app/components/transaction-list-item.js @@ -36,6 +36,7 @@ TransactionListItem.prototype.showRetryButton = function () { return false } + let currentTxIsLatest = false const currentNonce = txParams.nonce const currentNonceTxs = transactions.filter(tx => tx.txParams.nonce === currentNonce) const currentNonceSubmittedTxs = currentNonceTxs.filter(tx => tx.status === 'submitted') @@ -43,12 +44,14 @@ TransactionListItem.prototype.showRetryButton = function () { const lastSubmittedTxWithCurrentNonce = currentNonceSubmittedTxs[0] const currentTxIsLatestWithNonce = lastSubmittedTxWithCurrentNonce && lastSubmittedTxWithCurrentNonce.id === transaction.id - const lastTx = currentSubmittedTxs.reduce((tx1, tx2) => { - if (tx1.id < tx2.id) return tx1 - return tx2 - }) + if (currentSubmittedTxs.length > 0) { + const lastTx = currentSubmittedTxs.reduce((tx1, tx2) => { + if (tx1.submittedTime < tx2.submittedTime) return tx1 + return tx2 + }) + currentTxIsLatest = lastTx.id === transaction.id + } - const currentTxIsLatest = lastTx.id === transaction.id return currentTxIsLatestWithNonce && Date.now() - submittedTime > 30000 && currentTxIsLatest } -- cgit From 1d6227d718c94a2b0b4b3743985929790ffa26a2 Mon Sep 17 00:00:00 2001 From: Whymarrh Whitby Date: Wed, 25 Jul 2018 19:33:27 -0230 Subject: Move the old UI's AppBar into its own component --- old-ui/app/app.js | 387 +-------------------------------------- old-ui/app/components/app-bar.js | 385 ++++++++++++++++++++++++++++++++++++++ old-ui/app/css/index.css | 6 +- 3 files changed, 394 insertions(+), 384 deletions(-) create mode 100644 old-ui/app/components/app-bar.js (limited to 'old-ui') diff --git a/old-ui/app/app.js b/old-ui/app/app.js index 0637e3b5b..4921a29fa 100644 --- a/old-ui/app/app.js +++ b/old-ui/app/app.js @@ -24,17 +24,13 @@ const ConfigScreen = require('./config') const AddTokenScreen = require('./add-token') const Import = require('./accounts/import') const InfoScreen = require('./info') +const AppBar = require('./components/app-bar') const Loading = require('./components/loading') -const SandwichExpando = require('sandwich-expando') -const Dropdown = require('./components/dropdown').Dropdown -const DropdownMenuItem = require('./components/dropdown').DropdownMenuItem -const NetworkIndicator = require('./components/network') const BuyView = require('./components/buy-button-subview') const QrView = require('./components/qr-code') const HDCreateVaultComplete = require('./keychains/hd/create-vault-complete') const HDRestoreVaultScreen = require('./keychains/hd/restore-vault') const RevealSeedConfirmation = require('./keychains/hd/recover-seed/confirmation') -const AccountDropdowns = require('./components/account-dropdowns').AccountDropdowns module.exports = connect(mapStateToProps)(App) @@ -102,12 +98,9 @@ App.prototype.render = function () { alignItems: 'center', }, }, [ - - // app bar - this.renderAppBar(), - this.renderNetworkDropdown(), - this.renderDropdown(), - + h(AppBar, { + ...props, + }), this.renderLoadingIndicator({ isLoading, isLoadingNetwork, loadMessage }), // panel content @@ -121,299 +114,6 @@ App.prototype.render = function () { ]) ) } - -App.prototype.renderAppBar = function () { - if (window.METAMASK_UI_TYPE === 'notification') { - return null - } - - const props = this.props - const state = this.state || {} - const isNetworkMenuOpen = state.isNetworkMenuOpen || false - const {isMascara, isOnboarding} = props - - // 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 - } - - return ( - - h('.full-width', { - height: '38px', - }, [ - - h('.app-header.flex-row.flex-space-between', { - style: { - alignItems: 'center', - visibility: props.isUnlocked ? 'visible' : 'none', - background: props.isUnlocked ? 'white' : 'none', - height: '38px', - position: 'relative', - zIndex: 12, - }, - }, [ - - h('div.left-menu-section', { - style: { - display: 'flex', - flexDirection: 'row', - alignItems: 'center', - }, - }, [ - - // mini logo - h('img', { - height: 24, - width: 24, - src: './images/icon-128.png', - }), - - h(NetworkIndicator, { - network: this.props.network, - provider: this.props.provider, - onClick: (event) => { - event.preventDefault() - event.stopPropagation() - this.setState({ isNetworkMenuOpen: !isNetworkMenuOpen }) - }, - }), - - ]), - - props.isUnlocked && h('div', { - style: { - display: 'flex', - flexDirection: 'row', - alignItems: 'center', - }, - }, [ - - props.isUnlocked && h(AccountDropdowns, { - style: {}, - enableAccountsSelector: true, - identities: this.props.identities, - selected: this.props.selectedAddress, - network: this.props.network, - keyrings: this.props.keyrings, - }, []), - - // hamburger - props.isUnlocked && h(SandwichExpando, { - className: 'sandwich-expando', - width: 16, - barHeight: 2, - padding: 0, - isOpen: state.isMainMenuOpen, - color: 'rgb(247,146,30)', - onClick: () => { - this.setState({ - isMainMenuOpen: !state.isMainMenuOpen, - }) - }, - }), - ]), - ]), - ]) - ) -} - -App.prototype.renderNetworkDropdown = function () { - const props = this.props - const { provider: { type: providerType, rpcTarget: activeNetwork } } = props - const rpcList = props.frequentRpcList - const state = this.state || {} - const isOpen = state.isNetworkMenuOpen - - return h(Dropdown, { - useCssTransition: true, - isOpen, - onClickOutside: (event) => { - const { classList } = event.target - const isNotToggleElement = [ - classList.contains('menu-icon'), - classList.contains('network-name'), - classList.contains('network-indicator'), - ].filter(bool => bool).length === 0 - // classes from three constituent nodes of the toggle element - - if (isNotToggleElement) { - this.setState({ isNetworkMenuOpen: false }) - } - }, - zIndex: 11, - style: { - position: 'absolute', - left: '2px', - top: '36px', - }, - innerStyle: { - padding: '2px 16px 2px 0px', - }, - }, [ - - h( - DropdownMenuItem, - { - key: 'main', - closeMenu: () => this.setState({ isNetworkMenuOpen: !isOpen }), - onClick: () => props.dispatch(actions.setProviderType('mainnet')), - style: { - fontSize: '18px', - }, - }, - [ - h('.menu-icon.diamond'), - 'Main Ethereum Network', - providerType === 'mainnet' ? h('.check', '✓') : null, - ] - ), - - h( - DropdownMenuItem, - { - key: 'ropsten', - closeMenu: () => this.setState({ isNetworkMenuOpen: !isOpen }), - onClick: () => props.dispatch(actions.setProviderType('ropsten')), - style: { - fontSize: '18px', - }, - }, - [ - h('.menu-icon.red-dot'), - 'Ropsten Test Network', - providerType === 'ropsten' ? h('.check', '✓') : null, - ] - ), - - h( - DropdownMenuItem, - { - key: 'kovan', - closeMenu: () => this.setState({ isNetworkMenuOpen: !isOpen }), - onClick: () => props.dispatch(actions.setProviderType('kovan')), - style: { - fontSize: '18px', - }, - }, - [ - h('.menu-icon.hollow-diamond'), - 'Kovan Test Network', - providerType === 'kovan' ? h('.check', '✓') : null, - ] - ), - - h( - DropdownMenuItem, - { - key: 'rinkeby', - closeMenu: () => this.setState({ isNetworkMenuOpen: !isOpen }), - onClick: () => props.dispatch(actions.setProviderType('rinkeby')), - style: { - fontSize: '18px', - }, - }, - [ - h('.menu-icon.golden-square'), - 'Rinkeby Test Network', - providerType === 'rinkeby' ? h('.check', '✓') : null, - ] - ), - - h( - DropdownMenuItem, - { - key: 'default', - closeMenu: () => this.setState({ isNetworkMenuOpen: !isOpen }), - onClick: () => props.dispatch(actions.setProviderType('localhost')), - style: { - fontSize: '18px', - }, - }, - [ - h('i.fa.fa-question-circle.fa-lg.menu-icon'), - 'Localhost 8545', - activeNetwork === 'http://localhost:8545' ? h('.check', '✓') : null, - ] - ), - - this.renderCustomOption(props.provider), - this.renderCommonRpc(rpcList, props.provider), - - h( - DropdownMenuItem, - { - closeMenu: () => this.setState({ isNetworkMenuOpen: !isOpen }), - onClick: () => this.props.dispatch(actions.showConfigPage()), - style: { - fontSize: '18px', - }, - }, - [ - h('i.fa.fa-question-circle.fa-lg.menu-icon'), - 'Custom RPC', - activeNetwork === 'custom' ? h('.check', '✓') : null, - ] - ), - - ]) -} - -App.prototype.renderDropdown = function () { - const state = this.state || {} - const isOpen = state.isMainMenuOpen - - return h(Dropdown, { - useCssTransition: true, - isOpen: isOpen, - zIndex: 11, - onClickOutside: (event) => { - const classList = event.target.classList - const parentClassList = event.target.parentElement.classList - - const isToggleElement = classList.contains('sandwich-expando') || - parentClassList.contains('sandwich-expando') - - if (isOpen && !isToggleElement) { - this.setState({ isMainMenuOpen: false }) - } - }, - style: { - position: 'absolute', - right: '2px', - top: '38px', - }, - innerStyle: {}, - }, [ - h(DropdownMenuItem, { - closeMenu: () => this.setState({ isMainMenuOpen: !isOpen }), - onClick: () => { this.props.dispatch(actions.showConfigPage()) }, - }, 'Settings'), - - h(DropdownMenuItem, { - closeMenu: () => this.setState({ isMainMenuOpen: !isOpen }), - onClick: () => { this.props.dispatch(actions.lockMetamask()) }, - }, 'Log Out'), - - h(DropdownMenuItem, { - closeMenu: () => this.setState({ isMainMenuOpen: !isOpen }), - onClick: () => { this.props.dispatch(actions.showInfoPage()) }, - }, 'Info/Help'), - - h(DropdownMenuItem, { - closeMenu: () => this.setState({ isMainMenuOpen: !isOpen }), - onClick: () => { - this.props.dispatch(actions.setFeatureFlag('betaUI', true, 'BETA_UI_NOTIFICATION_MODAL')) - }, - }, 'Try Beta!'), - ]) -} - App.prototype.renderLoadingIndicator = function ({ isLoading, isLoadingNetwork, loadMessage }) { const { isMascara } = this.props @@ -425,25 +125,6 @@ App.prototype.renderLoadingIndicator = function ({ isLoading, isLoadingNetwork, }) } -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 @@ -623,41 +304,6 @@ App.prototype.toggleMetamaskActive = function () { this.props.dispatch(actions.lockMetamask(false)) } } - -App.prototype.renderCustomOption = function (provider) { - const { rpcTarget, type } = provider - const props = this.props - - if (type !== 'rpc') return null - - // Concatenate long URLs - let label = rpcTarget - if (rpcTarget.length > 31) { - label = label.substr(0, 34) + '...' - } - - switch (rpcTarget) { - - case 'http://localhost:8545': - return null - - default: - return h( - DropdownMenuItem, - { - key: rpcTarget, - onClick: () => props.dispatch(actions.setRpcTarget(rpcTarget)), - closeMenu: () => this.setState({ isNetworkMenuOpen: false }), - }, - [ - h('i.fa.fa-question-circle.fa-lg.menu-icon'), - label, - h('.check', '✓'), - ] - ) - } -} - App.prototype.getNetworkName = function () { const { provider } = this.props const providerName = provider.type @@ -678,28 +324,3 @@ App.prototype.getNetworkName = function () { return name } - -App.prototype.renderCommonRpc = function (rpcList, provider) { - const props = this.props - const rpcTarget = provider.rpcTarget - - return rpcList.map((rpc) => { - if ((rpc === 'http://localhost:8545') || (rpc === rpcTarget)) { - return null - } else { - return h( - DropdownMenuItem, - { - key: `common${rpc}`, - closeMenu: () => this.setState({ isNetworkMenuOpen: false }), - onClick: () => props.dispatch(actions.setRpcTarget(rpc)), - }, - [ - h('i.fa.fa-question-circle.fa-lg.menu-icon'), - rpc, - rpcTarget === rpc ? h('.check', '✓') : null, - ] - ) - } - }) -} diff --git a/old-ui/app/components/app-bar.js b/old-ui/app/components/app-bar.js new file mode 100644 index 000000000..ea04f40f0 --- /dev/null +++ b/old-ui/app/components/app-bar.js @@ -0,0 +1,385 @@ +const PropTypes = require('prop-types') +const {Component} = require('react') +const h = require('react-hyperscript') +const actions = require('../../../ui/app/actions') +const SandwichExpando = require('sandwich-expando') +const {Dropdown} = require('./dropdown') +const {DropdownMenuItem} = require('./dropdown') +const NetworkIndicator = require('./network') +const {AccountDropdowns} = require('./account-dropdowns') + +const LOCALHOST_RPC_URL = 'http://localhost:8545' + +module.exports = class AppBar extends Component { + static defaultProps = { + selectedAddress: undefined, + } + + static propTypes = { + dispatch: PropTypes.func.isRequired, + frequentRpcList: PropTypes.array.isRequired, + isMascara: PropTypes.bool.isRequired, + isOnboarding: PropTypes.bool.isRequired, + identities: PropTypes.any.isRequired, + selectedAddress: PropTypes.string, + isUnlocked: PropTypes.bool.isRequired, + network: PropTypes.any.isRequired, + keyrings: PropTypes.any.isRequired, + provider: PropTypes.any.isRequired, + } + + state = { + isNetworkMenuOpen: false, + } + + renderAppBar () { + if (window.METAMASK_UI_TYPE === 'notification') { + return null + } + + const props = this.props + const {isMascara, isOnboarding} = props + + // 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 + } + + return ( + h('div.app-bar', [ + this.renderAppBarAppHeader(), + ]) + ) + } + + renderAppBarAppHeader () { + const { + identities, + selectedAddress, + isUnlocked, + network, + keyrings, + provider, + } = this.props + const { + isNetworkMenuOpen, + isMainMenuOpen, + } = this.state + + return ( + h('.full-width', { + style: { + display: 'flex', + flexDirection: 'column', + height: '38px', + }, + }, [ + h('.app-header.flex-row.flex-space-between', { + style: { + alignItems: 'center', + visibility: isUnlocked ? 'visible' : 'none', + background: isUnlocked ? 'white' : 'none', + height: '38px', + position: 'relative', + zIndex: 12, + }, + }, [ + h('div.left-menu-section', { + style: { + display: 'flex', + flexDirection: 'row', + alignItems: 'center', + }, + }, [ + // mini logo + h('img', { + height: 24, + width: 24, + src: './images/icon-128.png', + }), + h(NetworkIndicator, { + network: network, + provider: provider, + onClick: (event) => { + event.preventDefault() + event.stopPropagation() + this.setState({ isNetworkMenuOpen: !isNetworkMenuOpen }) + }, + }), + ]), + isUnlocked && h('div', { + style: { + display: 'flex', + flexDirection: 'row', + alignItems: 'center', + }, + }, [ + h(AccountDropdowns, { + style: {}, + enableAccountsSelector: true, + identities: identities, + selected: selectedAddress, + network, + keyrings, + }, []), + h(SandwichExpando, { + className: 'sandwich-expando', + width: 16, + barHeight: 2, + padding: 0, + isOpen: isMainMenuOpen, + color: 'rgb(247,146,30)', + onClick: () => { + this.setState({ + isMainMenuOpen: !isMainMenuOpen, + }) + }, + }), + ]), + ]), + ]) + ) + } + + renderNetworkDropdown () { + const { + dispatch, + frequentRpcList: rpcList, + provider, + } = this.props + const { + type: providerType, + rpcTarget: activeNetwork, + } = provider + const isOpen = this.state.isNetworkMenuOpen + + return h(Dropdown, { + useCssTransition: true, + isOpen, + onClickOutside: (event) => { + const { classList } = event.target + const isNotToggleElement = [ + classList.contains('menu-icon'), + classList.contains('network-name'), + classList.contains('network-indicator'), + ].filter(bool => bool).length === 0 + // classes from three constituent nodes of the toggle element + + if (isNotToggleElement) { + this.setState({ isNetworkMenuOpen: false }) + } + }, + zIndex: 11, + style: { + position: 'absolute', + left: '2px', + top: '36px', + }, + innerStyle: { + padding: '2px 16px 2px 0px', + }, + }, [ + h(DropdownMenuItem, { + key: 'main', + closeMenu: () => this.setState({ isNetworkMenuOpen: !isOpen }), + onClick: () => dispatch(actions.setProviderType('mainnet')), + style: { + fontSize: '18px', + }, + }, [ + h('.menu-icon.diamond'), + 'Main Ethereum Network', + providerType === 'mainnet' + ? h('.check', '✓') + : null, + ]), + h(DropdownMenuItem, { + key: 'ropsten', + closeMenu: () => this.setState({ isNetworkMenuOpen: !isOpen }), + onClick: () => dispatch(actions.setProviderType('ropsten')), + style: { + fontSize: '18px', + }, + }, [ + h('.menu-icon.red-dot'), + 'Ropsten Test Network', + providerType === 'ropsten' + ? h('.check', '✓') + : null, + ]), + h(DropdownMenuItem, { + key: 'kovan', + closeMenu: () => this.setState({ isNetworkMenuOpen: !isOpen }), + onClick: () => dispatch(actions.setProviderType('kovan')), + style: { + fontSize: '18px', + }, + }, [ + h('.menu-icon.hollow-diamond'), + 'Kovan Test Network', + providerType === 'kovan' + ? h('.check', '✓') + : null, + ]), + h(DropdownMenuItem, { + key: 'rinkeby', + closeMenu: () => this.setState({ isNetworkMenuOpen: !isOpen }), + onClick: () => dispatch(actions.setProviderType('rinkeby')), + style: { + fontSize: '18px', + }, + }, [ + h('.menu-icon.golden-square'), + 'Rinkeby Test Network', + providerType === 'rinkeby' + ? h('.check', '✓') + : null, + ]), + h(DropdownMenuItem, { + key: 'default', + closeMenu: () => this.setState({ isNetworkMenuOpen: !isOpen }), + onClick: () => dispatch(actions.setProviderType('localhost')), + style: { + fontSize: '18px', + }, + }, [ + h('i.fa.fa-question-circle.fa-lg.menu-icon'), + 'Localhost 8545', + activeNetwork === LOCALHOST_RPC_URL + ? h('.check', '✓') + : null, + ]), + + this.renderCustomOption(provider), + this.renderCommonRpc(rpcList, provider), + + h(DropdownMenuItem, { + closeMenu: () => this.setState({ isNetworkMenuOpen: !isOpen }), + onClick: () => dispatch(actions.showConfigPage()), + style: { + fontSize: '18px', + }, + }, [ + h('i.fa.fa-question-circle.fa-lg.menu-icon'), + 'Custom RPC', + activeNetwork === 'custom' + ? h('.check', '✓') + : null, + ]), + ]) + } + + renderCustomOption ({ rpcTarget, type }) { + const {dispatch} = this.props + + if (type !== 'rpc') { + return null + } + + // Concatenate long URLs + let label = rpcTarget + if (rpcTarget.length > 31) { + label = label.substr(0, 34) + '...' + } + + switch (rpcTarget) { + case LOCALHOST_RPC_URL: + return null + default: + return h(DropdownMenuItem, { + key: rpcTarget, + onClick: () => dispatch(actions.setRpcTarget(rpcTarget)), + closeMenu: () => this.setState({ isNetworkMenuOpen: false }), + }, [ + h('i.fa.fa-question-circle.fa-lg.menu-icon'), + label, + h('.check', '✓'), + ]) + } + } + + renderCommonRpc (rpcList, {rpcTarget}) { + const {dispatch} = this.props + + return rpcList.map((rpc) => { + if ((rpc === LOCALHOST_RPC_URL) || (rpc === rpcTarget)) { + return null + } else { + return h(DropdownMenuItem, { + key: `common${rpc}`, + closeMenu: () => this.setState({ isNetworkMenuOpen: false }), + onClick: () => dispatch(actions.setRpcTarget(rpc)), + }, [ + h('i.fa.fa-question-circle.fa-lg.menu-icon'), + rpc, + rpcTarget === rpc + ? h('.check', '✓') + : null, + ]) + } + }) + } + + renderDropdown () { + const {dispatch} = this.props + const isOpen = this.state.isMainMenuOpen + + return h(Dropdown, { + useCssTransition: true, + isOpen: isOpen, + zIndex: 11, + onClickOutside: (event) => { + const classList = event.target.classList + const parentClassList = event.target.parentElement.classList + + const isToggleElement = classList.contains('sandwich-expando') || + parentClassList.contains('sandwich-expando') + + if (isOpen && !isToggleElement) { + this.setState({ isMainMenuOpen: false }) + } + }, + style: { + position: 'absolute', + right: '2px', + top: '38px', + }, + innerStyle: {}, + }, [ + h(DropdownMenuItem, { + closeMenu: () => this.setState({ isMainMenuOpen: !isOpen }), + onClick: () => { dispatch(actions.showConfigPage()) }, + }, 'Settings'), + + h(DropdownMenuItem, { + closeMenu: () => this.setState({ isMainMenuOpen: !isOpen }), + onClick: () => { dispatch(actions.lockMetamask()) }, + }, 'Log Out'), + + h(DropdownMenuItem, { + closeMenu: () => this.setState({ isMainMenuOpen: !isOpen }), + onClick: () => { dispatch(actions.showInfoPage()) }, + }, 'Info/Help'), + + h(DropdownMenuItem, { + closeMenu: () => this.setState({ isMainMenuOpen: !isOpen }), + onClick: () => { + dispatch(actions.setFeatureFlag('betaUI', true, 'BETA_UI_NOTIFICATION_MODAL')) + }, + }, 'Try Beta!'), + ]) + } + + render () { + return h('div.full-width', [ + this.renderAppBar(), + this.renderNetworkDropdown(), + this.renderDropdown(), + ]) + } +} diff --git a/old-ui/app/css/index.css b/old-ui/app/css/index.css index 7af713336..f641e7934 100644 --- a/old-ui/app/css/index.css +++ b/old-ui/app/css/index.css @@ -720,7 +720,11 @@ div.message-container > div:first-child { transform: scale(1.1); } -//Notification Modal +.app-bar { + width: 100%; + display: flex; + flex-direction: column; +} .notification-modal-wrapper { display: flex; -- cgit From 6ae76fee33af8f3079fd650f35df1107e7996ffe Mon Sep 17 00:00:00 2001 From: Whymarrh Whitby Date: Wed, 25 Jul 2018 23:19:18 -0230 Subject: Add banner suggesting new UI --- old-ui/app/components/app-bar.js | 50 ++++++++++++++++++++++++++++++++++++++-- old-ui/app/css/index.css | 16 +++++++++++++ 2 files changed, 64 insertions(+), 2 deletions(-) (limited to 'old-ui') diff --git a/old-ui/app/components/app-bar.js b/old-ui/app/components/app-bar.js index ea04f40f0..4dfedc633 100644 --- a/old-ui/app/components/app-bar.js +++ b/old-ui/app/components/app-bar.js @@ -28,6 +28,16 @@ module.exports = class AppBar extends Component { provider: PropTypes.any.isRequired, } + static renderSpace () { + return ( + h('span', { + dangerouslySetInnerHTML: { + __html: ' ', + }, + }) + ) + } + state = { isNetworkMenuOpen: false, } @@ -52,11 +62,47 @@ module.exports = class AppBar extends Component { return ( h('div.app-bar', [ + this.renderAppBarNewUiNotice(), this.renderAppBarAppHeader(), ]) ) } + renderAppBarNewUiNotice () { + const {dispatch} = this.props + + return ( + h('div.app-bar__new-ui-banner', { + style: { + height: '28px', + zIndex: 12, + }, + }, [ + 'Try the New MetaMask', + AppBar.renderSpace(), + h('span.banner__link', { + onClick () { + dispatch(actions.setFeatureFlag('betaUI', true, 'BETA_UI_NOTIFICATION_MODAL')) + }, + }, [ + 'Now', + ]), + AppBar.renderSpace(), + 'or', + AppBar.renderSpace(), + h('span.banner__link', { + onClick () { + global.platform.openWindow({ + url: 'https://medium.com/metamask/74dba32cc7f7', + }) + }, + }, [ + 'Learn More', + ]), + ]) + ) + } + renderAppBarAppHeader () { const { identities, @@ -178,7 +224,7 @@ module.exports = class AppBar extends Component { style: { position: 'absolute', left: '2px', - top: '36px', + top: '64px', }, innerStyle: { padding: '2px 16px 2px 0px', @@ -347,7 +393,7 @@ module.exports = class AppBar extends Component { style: { position: 'absolute', right: '2px', - top: '38px', + top: '66px', }, innerStyle: {}, }, [ diff --git a/old-ui/app/css/index.css b/old-ui/app/css/index.css index f641e7934..08b3890fd 100644 --- a/old-ui/app/css/index.css +++ b/old-ui/app/css/index.css @@ -726,6 +726,22 @@ div.message-container > div:first-child { flex-direction: column; } +.app-bar__new-ui-banner { + background: #33A4E7; + color: white; + font-size: 12px; + line-height: 12px; + padding: 8px; + font-family: Roboto, Arial, sans-serif; + font-weight: 400; + width: 100%; +} + +.banner__link { + cursor: pointer; + text-decoration: underline; +} + .notification-modal-wrapper { display: flex; flex-direction: column; -- cgit From d16f25fc20c98ac06b2e13be6f2732d60919a862 Mon Sep 17 00:00:00 2001 From: Whymarrh Whitby Date: Wed, 25 Jul 2018 23:49:57 -0230 Subject: Add NewUiAnnouncement component --- old-ui/app/app.js | 29 ++++++++--- old-ui/app/components/app-bar.js | 4 +- old-ui/app/css/index.css | 106 ++++++++++++++++++++++++++++++++++++++- old-ui/app/new-ui-annoucement.js | 86 +++++++++++++++++++++++++++++++ 4 files changed, 216 insertions(+), 9 deletions(-) create mode 100644 old-ui/app/new-ui-annoucement.js (limited to 'old-ui') diff --git a/old-ui/app/app.js b/old-ui/app/app.js index 4921a29fa..a2606c4ed 100644 --- a/old-ui/app/app.js +++ b/old-ui/app/app.js @@ -24,6 +24,7 @@ const ConfigScreen = require('./config') const AddTokenScreen = require('./add-token') const Import = require('./accounts/import') const InfoScreen = require('./info') +const NewUiAnnouncement = require('./new-ui-annoucement') const AppBar = require('./components/app-bar') const Loading = require('./components/loading') const BuyView = require('./components/buy-button-subview') @@ -82,13 +83,29 @@ function mapStateToProps (state) { } App.prototype.render = function () { - var props = this.props - const { isLoading, loadingMessage, transForward, network } = props - const isLoadingNetwork = network === 'loading' && props.currentView.name !== 'config' - const loadMessage = loadingMessage || isLoadingNetwork ? - `Connecting to ${this.getNetworkName()}` : null + const { + currentView, + dispatch, + isLoading, + loadingMessage, + transForward, + network, + featureFlags, + } = this.props + const isLoadingNetwork = network === 'loading' && currentView.name !== 'config' + const loadMessage = loadingMessage || isLoadingNetwork + ? `Connecting to ${this.getNetworkName()}` + : null log.debug('Main ui render function') + if (!featureFlags.skipAnnounceBetaUI) { + return ( + h(NewUiAnnouncement, { + dispatch, + }) + ) + } + return ( h('.flex-column.full-height', { style: { @@ -99,7 +116,7 @@ App.prototype.render = function () { }, }, [ h(AppBar, { - ...props, + ...this.props, }), this.renderLoadingIndicator({ isLoading, isLoadingNetwork, loadMessage }), diff --git a/old-ui/app/components/app-bar.js b/old-ui/app/components/app-bar.js index 4dfedc633..e65f942ae 100644 --- a/old-ui/app/components/app-bar.js +++ b/old-ui/app/components/app-bar.js @@ -81,8 +81,8 @@ module.exports = class AppBar extends Component { 'Try the New MetaMask', AppBar.renderSpace(), h('span.banner__link', { - onClick () { - dispatch(actions.setFeatureFlag('betaUI', true, 'BETA_UI_NOTIFICATION_MODAL')) + async onClick () { + await dispatch(actions.setFeatureFlag('betaUI', true, 'BETA_UI_NOTIFICATION_MODAL')) }, }, [ 'Now', diff --git a/old-ui/app/css/index.css b/old-ui/app/css/index.css index 08b3890fd..d209b4754 100644 --- a/old-ui/app/css/index.css +++ b/old-ui/app/css/index.css @@ -720,6 +720,110 @@ div.message-container > div:first-child { transform: scale(1.1); } +.new-ui-announcement { + display: flex; + flex-direction: column; + height: 100%; + background: white; + color: #4D4D4D; + font-family: Roboto, Arial, sans-serif; + padding: 1.5rem; +} + +.new-ui-announcement__announcement-header { + display: flex; + flex-direction: row; + justify-content: space-between; + padding-bottom: 1rem; +} + +.new-ui-announcement__announcement-header a.close { + cursor: pointer; + font-size: 32px; + line-height: 17px; +} + +.new-ui-announcement__announcement-header a.close:hover { + color: inherit; +} + +.new-ui-announcement__announcement-header h1 { + color: #33A4E7; + text-transform: uppercase; + font-size: 18px; + font-weight: 400; +} + +.new-ui-announcement__body { + display: flex; + flex: 1; + flex-direction: column; + font-size: 10.5pt; + font-weight: 300; +} + +.new-ui-announcement__body h1 { + font-size: 22px; + font-weight: 600; + padding-bottom: 1rem; +} + +.new-ui-announcement__body a { + color: #33A4E7; +} + +.new-ui-announcement__body .updates-list { + padding: .5rem 1rem; +} + +.new-ui-announcement__body .updates-list h2 { + font-weight: 600; +} + +.new-ui-announcement__body .updates-list ul { + list-style: disc inside; +} + +.new-ui-announcement__footer { + display: flex; + flex-direction: column; + align-items: center; +} + +.new-ui-announcement__footer h1 { + font-family: inherit; + font-weight: 600; +} + +.new-ui-announcement__footer button:hover { + transform: none; +} + +.new-ui-announcement__footer button.positive { + padding: 1rem; + margin: 1rem; + background: #33A4E7; + color: white; + text-transform: uppercase; + box-shadow: none; + border-radius: 5px; + font-family: inherit; + font-size: 13px; + font-weight: 400; + width: 90%; +} + +.new-ui-announcement__footer button.negative { + margin: 0; + padding: 0; + background: white; + color: #33A4E7; + font-family: inherit; + font-size: 13px; + font-weight: 400; + box-shadow: none; +} + .app-bar { width: 100%; display: flex; @@ -832,4 +936,4 @@ div.message-container > div:first-child { .notification-modal__link { color: #2f9ae0; -} \ No newline at end of file +} diff --git a/old-ui/app/new-ui-annoucement.js b/old-ui/app/new-ui-annoucement.js new file mode 100644 index 000000000..504016b61 --- /dev/null +++ b/old-ui/app/new-ui-annoucement.js @@ -0,0 +1,86 @@ +const PropTypes = require('prop-types') +const {PureComponent} = require('react') +const h = require('react-hyperscript') +const actions = require('../../ui/app/actions') + +module.exports = class NewUiAnnouncement extends PureComponent { + static propTypes = { + dispatch: PropTypes.func.isRequired, + }; + + close = async () => { + await this.props.dispatch(actions.setFeatureFlag('skipAnnounceBetaUI', true)) + } + + switchToNewUi = async () => { + const flag = 'betaUI' + const enabled = true + const notificationType = 'BETA_UI_NOTIFICATION_MODAL' + await this.props.dispatch(actions.setFeatureFlag( + flag, + enabled, + notificationType, + )) + await this.close() + } + + render () { + return ( + h('div.new-ui-announcement', [ + h('section.new-ui-announcement__announcement-header', [ + h('h1', 'Announcement'), + h('a.close', { + onClick: this.close, + }, '×'), + ]), + h('section.new-ui-announcement__body', [ + h('h1', 'A New Version of MetaMask'), + h('p', [ + "We're excited to announce a brand-new version of MetaMask with enhanced features and functionality.", + ]), + h('div.updates-list', [ + h('h2', 'Updates include'), + h('ul', [ + h('li', 'New user interface'), + h('li', 'Full-screen mode'), + h('li', 'Better token support'), + h('li', 'Better gas controls'), + h('li', 'Advanced features for developers'), + h('li', 'New confirmation screens'), + h('li', 'And more!'), + ]), + ]), + h('p', [ + 'You can still use the current version of MetaMask. The new version is still in beta, ' + + 'however we encourage you to try it out as we transition into this exciting new update.', + h('span', { + dangerouslySetInnerHTML: { + __html: ' ', + }, + }), + h('a', { + href: 'https://medium.com/metamask/74dba32cc7f7', + onClick ({target}) { + const url = target.href + global.platform.openWindow({ + url, + }) + }, + }, [ + 'Learn more.', + ]), + ]), + ]), + h('section.new-ui-announcement__footer', [ + h('h1', 'Ready to try the new MetaMask?'), + h('button.positive', { + onClick: this.switchToNewUi, + }, 'Try it now'), + h('button.negative', { + onClick: this.close, + }, 'No thanks, maybe later'), + ]), + ]) + ) + } +} -- cgit From 6326dab1866f3dc795a74133efebb62b1bd07003 Mon Sep 17 00:00:00 2001 From: Whymarrh Whitby Date: Thu, 26 Jul 2018 01:46:56 -0230 Subject: Remove suggestion from bottom of old UI onboarding --- old-ui/app/app.js | 16 ---------------- 1 file changed, 16 deletions(-) (limited to 'old-ui') diff --git a/old-ui/app/app.js b/old-ui/app/app.js index a2606c4ed..7f25cadbb 100644 --- a/old-ui/app/app.js +++ b/old-ui/app/app.js @@ -163,22 +163,6 @@ App.prototype.renderPrimary = function () { key: 'NoticeScreen', onConfirm: () => props.dispatch(actions.markNoticeRead(props.nextUnreadNotice)), }), - - !props.isInitialized && h('.flex-row.flex-center.flex-grow', [ - h('p.pointer', { - onClick: () => { - global.platform.openExtensionInBrowser() - props.dispatch(actions.setFeatureFlag('betaUI', true, 'BETA_UI_NOTIFICATION_MODAL')) - }, - style: { - fontSize: '0.8em', - color: '#aeaeae', - textDecoration: 'underline', - marginTop: '32px', - }, - }, 'Try Beta Version'), - ]), - ]) } else if (props.lostAccounts && props.lostAccounts.length > 0) { log.debug('rendering notice screen for lost accounts view.') -- cgit From 89c74ac4adf7d064e144594537d8e8ee5a0f8082 Mon Sep 17 00:00:00 2001 From: Whymarrh Whitby Date: Fri, 27 Jul 2018 19:43:07 -0230 Subject: Rewrite AccountQrScreen to use flexbox The old QR screen was absolutely positioning everything which broke when the app bar resized for the new UI announcement. This change, while futile*, makes the QR screen less bad. * futile because the old UI is being deprecated --- old-ui/app/account-qr.js | 86 ++++++++++++++++++++++++++++++++ old-ui/app/app.js | 31 ++---------- old-ui/app/components/qr-code.js | 79 ----------------------------- old-ui/app/components/shapeshift-form.js | 4 +- 4 files changed, 92 insertions(+), 108 deletions(-) create mode 100644 old-ui/app/account-qr.js delete mode 100644 old-ui/app/components/qr-code.js (limited to 'old-ui') diff --git a/old-ui/app/account-qr.js b/old-ui/app/account-qr.js new file mode 100644 index 000000000..b41cc5112 --- /dev/null +++ b/old-ui/app/account-qr.js @@ -0,0 +1,86 @@ +const PropTypes = require('prop-types') +const {PureComponent} = require('react') +const h = require('react-hyperscript') +const {qrcode: qrCode} = require('qrcode-npm') +const {connect} = require('react-redux') +const {isHexPrefixed} = require('ethereumjs-util') +const actions = require('../../ui/app/actions') +const CopyButton = require('./components/copyButton') + +class AccountQrScreen extends PureComponent { + static defaultProps = { + warning: null, + } + + static propTypes = { + dispatch: PropTypes.func.isRequired, + buyView: PropTypes.any.isRequired, + Qr: PropTypes.object.isRequired, + selectedAddress: PropTypes.string.isRequired, + warning: PropTypes.node, + } + + render () { + const {dispatch, Qr, selectedAddress, warning} = this.props + const address = `${isHexPrefixed(Qr.data) ? 'ethereum:' : ''}${Qr.data}` + const qrImage = qrCode(4, 'M') + + qrImage.addData(address) + qrImage.make() + + return h('div.flex-column.full-width', { + style: { + alignItems: 'center', + boxSizing: 'border-box', + padding: '50px', + }, + }, [ + h('div.flex-row.full-width', { + style: { + alignItems: 'flex-start', + }, + }, [ + h('i.fa.fa-arrow-left.fa-lg.cursor-pointer.color-orange', { + onClick () { + dispatch(actions.backToAccountDetail(selectedAddress)) + }, + }), + ]), + h('div.qr-header', Qr.message), + warning && h('span.error.flex-center', { + style: { + textAlign: 'center', + width: '229px', + height: '82px', + }, + }, [ + this.props.warning, + ]), + h('div#qr-container.flex-column', { + style: { + marginTop: '25px', + marginBottom: '15px', + }, + dangerouslySetInnerHTML: { + __html: qrImage.createTableTag(4), + }, + }), + h('div.flex-row.full-width', [ + h('h3.ellip-address.grow-tenx', Qr.data), + h(CopyButton, { + value: Qr.data, + }), + ]), + ]) + } +} + +function mapStateToProps (state) { + return { + Qr: state.appState.Qr, + buyView: state.appState.buyView, + warning: state.appState.warning, + } +} + +module.exports = connect(mapStateToProps)(AccountQrScreen) diff --git a/old-ui/app/app.js b/old-ui/app/app.js index 7f25cadbb..d3e9e823b 100644 --- a/old-ui/app/app.js +++ b/old-ui/app/app.js @@ -14,6 +14,7 @@ const NewKeyChainScreen = require('./new-keychain') const UnlockScreen = require('./unlock') // accounts const AccountDetailScreen = require('./account-detail') +const AccountQrScreen = require('./account-qr') const SendTransactionScreen = require('./send') const ConfirmTxScreen = require('./conf-tx') // notice @@ -28,7 +29,6 @@ const NewUiAnnouncement = require('./new-ui-annoucement') const AppBar = require('./components/app-bar') const Loading = require('./components/loading') const BuyView = require('./components/buy-button-subview') -const QrView = require('./components/qr-code') const HDCreateVaultComplete = require('./keychains/hd/create-vault-complete') const HDRestoreVaultScreen = require('./keychains/hd/restore-vault') const RevealSeedConfirmation = require('./keychains/hd/recover-seed/confirmation') @@ -262,31 +262,10 @@ App.prototype.renderPrimary = function () { 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.selectedAddress)), - style: { - marginLeft: '10px', - marginTop: '50px', - }, - }), - h('div', { - style: { - position: 'absolute', - left: '44px', - width: '285px', - }, - }, [ - h(QrView, {key: 'qr'}), - ]), - ]) + return h(AccountQrScreen, { + key: 'account-qr', + selectedAddress: props.selectedAddress, + }) default: log.debug('rendering default, account detail screen') diff --git a/old-ui/app/components/qr-code.js b/old-ui/app/components/qr-code.js deleted file mode 100644 index 06b9aed9b..000000000 --- a/old-ui/app/components/qr-code.js +++ /dev/null @@ -1,79 +0,0 @@ -const Component = require('react').Component -const h = require('react-hyperscript') -const qrCode = require('qrcode-npm').qrcode -const inherits = require('util').inherits -const connect = require('react-redux').connect -const isHexPrefixed = require('ethereumjs-util').isHexPrefixed -const CopyButton = require('./copyButton') - -module.exports = connect(mapStateToProps)(QrCodeView) - -function mapStateToProps (state) { - return { - Qr: state.appState.Qr, - buyView: state.appState.buyView, - warning: state.appState.warning, - } -} - -inherits(QrCodeView, Component) - -function QrCodeView () { - Component.call(this) -} - -QrCodeView.prototype.render = function () { - const props = this.props - const Qr = props.Qr - const address = `${isHexPrefixed(Qr.data) ? 'ethereum:' : ''}${Qr.data}` - const qrImage = qrCode(4, 'M') - qrImage.addData(address) - qrImage.make() - return h('.main-container.flex-column', { - key: 'qr', - style: { - justifyContent: 'center', - paddingBottom: '45px', - paddingLeft: '45px', - paddingRight: '45px', - alignItems: 'center', - }, - }, [ - Array.isArray(Qr.message) ? h('.message-container', this.renderMultiMessage()) : h('.qr-header', Qr.message), - - this.props.warning ? this.props.warning && h('span.error.flex-center', { - style: { - textAlign: 'center', - width: '229px', - height: '82px', - }, - }, - this.props.warning) : null, - - h('#qr-container.flex-column', { - style: { - marginTop: '25px', - marginBottom: '15px', - }, - dangerouslySetInnerHTML: { - __html: qrImage.createTableTag(4), - }, - }), - h('.flex-row', [ - h('h3.ellip-address', { - style: { - width: '247px', - }, - }, Qr.data), - h(CopyButton, { - value: Qr.data, - }), - ]), - ]) -} - -QrCodeView.prototype.renderMultiMessage = function () { - var Qr = this.props.Qr - var multiMessage = Qr.message.map((message) => h('.qr-message', message)) - return multiMessage -} diff --git a/old-ui/app/components/shapeshift-form.js b/old-ui/app/components/shapeshift-form.js index 97068db0a..14de309ab 100644 --- a/old-ui/app/components/shapeshift-form.js +++ b/old-ui/app/components/shapeshift-form.js @@ -3,7 +3,6 @@ const h = require('react-hyperscript') const inherits = require('util').inherits const connect = require('react-redux').connect const actions = require('../../../ui/app/actions') -const Qr = require('./qr-code') const isValidAddress = require('../util').isValidAddress module.exports = connect(mapStateToProps)(ShapeshiftForm) @@ -11,7 +10,6 @@ function mapStateToProps (state) { return { warning: state.appState.warning, isSubLoading: state.appState.isSubLoading, - qrRequested: state.appState.qrRequested, } } @@ -23,7 +21,7 @@ function ShapeshiftForm () { } ShapeshiftForm.prototype.render = function () { - return this.props.qrRequested ? h(Qr, {key: 'qr'}) : this.renderMain() + return this.renderMain() } ShapeshiftForm.prototype.renderMain = function () { -- cgit From 0fd8862c5e942778763e170a36aeb7604472c5cd Mon Sep 17 00:00:00 2001 From: Whymarrh Whitby Date: Fri, 27 Jul 2018 20:05:26 -0230 Subject: Don't show an additional beta UI notification When a user has opted-in to the new UI from the announcement, we don't need an additional notification letting the user know that they've switched. --- old-ui/app/components/app-bar.js | 2 +- old-ui/app/new-ui-annoucement.js | 2 -- 2 files changed, 1 insertion(+), 3 deletions(-) (limited to 'old-ui') diff --git a/old-ui/app/components/app-bar.js b/old-ui/app/components/app-bar.js index e65f942ae..4253c5f28 100644 --- a/old-ui/app/components/app-bar.js +++ b/old-ui/app/components/app-bar.js @@ -82,7 +82,7 @@ module.exports = class AppBar extends Component { AppBar.renderSpace(), h('span.banner__link', { async onClick () { - await dispatch(actions.setFeatureFlag('betaUI', true, 'BETA_UI_NOTIFICATION_MODAL')) + await dispatch(actions.setFeatureFlag('betaUI', true)) }, }, [ 'Now', diff --git a/old-ui/app/new-ui-annoucement.js b/old-ui/app/new-ui-annoucement.js index 504016b61..a20dae2f8 100644 --- a/old-ui/app/new-ui-annoucement.js +++ b/old-ui/app/new-ui-annoucement.js @@ -15,11 +15,9 @@ module.exports = class NewUiAnnouncement extends PureComponent { switchToNewUi = async () => { const flag = 'betaUI' const enabled = true - const notificationType = 'BETA_UI_NOTIFICATION_MODAL' await this.props.dispatch(actions.setFeatureFlag( flag, enabled, - notificationType, )) await this.close() } -- cgit From f9871fe60b7c6300e746605948eb690b8e48aecc Mon Sep 17 00:00:00 2001 From: Whymarrh Whitby Date: Fri, 27 Jul 2018 20:09:31 -0230 Subject: Open UI in browser post-new-UI-switch --- old-ui/app/components/app-bar.js | 1 + old-ui/app/new-ui-annoucement.js | 1 + 2 files changed, 2 insertions(+) (limited to 'old-ui') diff --git a/old-ui/app/components/app-bar.js b/old-ui/app/components/app-bar.js index 4253c5f28..8ab647efd 100644 --- a/old-ui/app/components/app-bar.js +++ b/old-ui/app/components/app-bar.js @@ -83,6 +83,7 @@ module.exports = class AppBar extends Component { h('span.banner__link', { async onClick () { await dispatch(actions.setFeatureFlag('betaUI', true)) + global.platform.openExtensionInBrowser() }, }, [ 'Now', diff --git a/old-ui/app/new-ui-annoucement.js b/old-ui/app/new-ui-annoucement.js index a20dae2f8..59b126279 100644 --- a/old-ui/app/new-ui-annoucement.js +++ b/old-ui/app/new-ui-annoucement.js @@ -20,6 +20,7 @@ module.exports = class NewUiAnnouncement extends PureComponent { enabled, )) await this.close() + global.platform.openExtensionInBrowser() } render () { -- cgit