diff options
Diffstat (limited to 'ui')
-rw-r--r-- | ui/app/actions.js | 18 | ||||
-rw-r--r-- | ui/app/app.js | 13 | ||||
-rw-r--r-- | ui/app/components/app-header/app-header.component.js | 44 | ||||
-rw-r--r-- | ui/app/components/pages/settings/settings.js | 2 | ||||
-rw-r--r-- | ui/app/components/pages/unlock-page/unlock-page.component.js | 1 | ||||
-rw-r--r-- | ui/app/components/pages/unlock-page/unlock-page.container.js | 2 | ||||
-rw-r--r-- | ui/app/components/pending-tx/confirm-send-ether.js | 14 | ||||
-rw-r--r-- | ui/app/components/text-field/text-field.component.js | 5 | ||||
-rw-r--r-- | ui/app/css/itcss/components/account-menu.scss | 4 | ||||
-rw-r--r-- | ui/app/css/itcss/components/header.scss | 4 | ||||
-rw-r--r-- | ui/app/css/itcss/components/welcome-screen.scss | 97 | ||||
-rw-r--r-- | ui/app/first-time/init-menu.js | 2 | ||||
-rw-r--r-- | ui/app/select-app.js | 5 | ||||
-rw-r--r-- | ui/index.js | 9 |
14 files changed, 113 insertions, 107 deletions
diff --git a/ui/app/actions.js b/ui/app/actions.js index 9c4de9551..2d238b2f8 100644 --- a/ui/app/actions.js +++ b/ui/app/actions.js @@ -271,7 +271,6 @@ var actions = { SET_MOUSE_USER_STATE: 'SET_MOUSE_USER_STATE', // Network - setNetworkEndpoints, updateNetworkEndpointType, UPDATE_NETWORK_ENDPOINT_TYPE: 'UPDATE_NETWORK_ENDPOINT_TYPE', @@ -1924,23 +1923,6 @@ function setLocaleMessages (localeMessages) { } } -function setNetworkEndpoints (networkEndpointType) { - return dispatch => { - log.debug('background.setNetworkEndpoints') - return new Promise((resolve, reject) => { - background.setNetworkEndpoints(networkEndpointType, err => { - if (err) { - dispatch(actions.displayWarning(err.message)) - return reject(err) - } - - dispatch(actions.updateNetworkEndpointType(networkEndpointType)) - resolve(networkEndpointType) - }) - }) - } -} - function updateNetworkEndpointType (networkEndpointType) { return { type: actions.UPDATE_NETWORK_ENDPOINT_TYPE, diff --git a/ui/app/app.js b/ui/app/app.js index 5bc571c64..f840cc34e 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, withRouter, matchPath } = 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') @@ -83,15 +83,6 @@ class App extends Component { ) } - renderAppHeader () { - const { location } = this.props - const isInitializing = matchPath(location.pathname, { - path: INITIALIZE_ROUTE, exact: false, - }) - - return isInitializing ? null : h(AppHeader) - } - render () { const { isLoading, @@ -128,7 +119,7 @@ class App extends Component { // global modal h(Modal, {}, []), - this.renderAppHeader(), + h(AppHeader), // sidebar this.renderSidebar(), diff --git a/ui/app/components/app-header/app-header.component.js b/ui/app/components/app-header/app-header.component.js index cf36e0d79..62b04562a 100644 --- a/ui/app/components/app-header/app-header.component.js +++ b/ui/app/components/app-header/app-header.component.js @@ -1,9 +1,13 @@ import React, { Component } from 'react' import PropTypes from 'prop-types' import classnames from 'classnames' +import { matchPath } from 'react-router-dom' -const { ENVIRONMENT_TYPE_NOTIFICATION } = require('../../../../app/scripts/lib/enums') -const { DEFAULT_ROUTE, CONFIRM_TRANSACTION_ROUTE } = require('../../routes') +const { + ENVIRONMENT_TYPE_NOTIFICATION, + ENVIRONMENT_TYPE_POPUP, +} = require('../../../../app/scripts/lib/enums') +const { DEFAULT_ROUTE, INITIALIZE_ROUTE, CONFIRM_TRANSACTION_ROUTE } = require('../../routes') const Identicon = require('../identicon') const NetworkIndicator = require('../network') @@ -36,13 +40,23 @@ class AppHeader extends Component { : hideNetworkDropdown() } + isConfirming () { + const { location } = this.props + + return Boolean(matchPath(location.pathname, { + path: CONFIRM_TRANSACTION_ROUTE, exact: false, + })) + } + renderAccountMenu () { const { isUnlocked, toggleAccountMenu, selectedAddress } = this.props return isUnlocked && ( <div - className="account-menu__icon" - onClick={toggleAccountMenu} + className={classnames('account-menu__icon', { + 'account-menu__icon--disabled': this.isConfirming(), + })} + onClick={() => this.isConfirming() || toggleAccountMenu()} > <Identicon address={selectedAddress} @@ -52,6 +66,26 @@ class AppHeader extends Component { ) } + hideAppHeader () { + const { location } = this.props + + const isInitializing = Boolean(matchPath(location.pathname, { + path: INITIALIZE_ROUTE, exact: false, + })) + + if (isInitializing) { + return true + } + + if (window.METAMASK_UI_TYPE === ENVIRONMENT_TYPE_NOTIFICATION) { + return true + } + + if (window.METAMASK_UI_TYPE === ENVIRONMENT_TYPE_POPUP && this.isConfirming()) { + return true + } + } + render () { const { network, @@ -61,7 +95,7 @@ class AppHeader extends Component { isUnlocked, } = this.props - if (window.METAMASK_UI_TYPE === ENVIRONMENT_TYPE_NOTIFICATION) { + if (this.hideAppHeader()) { return null } diff --git a/ui/app/components/pages/settings/settings.js b/ui/app/components/pages/settings/settings.js index bdefe56f8..f58ac7ddf 100644 --- a/ui/app/components/pages/settings/settings.js +++ b/ui/app/components/pages/settings/settings.js @@ -12,7 +12,6 @@ const SimpleDropdown = require('../../dropdowns/simple-dropdown') const ToggleButton = require('react-toggle-button') const { REVEAL_SEED_ROUTE } = require('../../../routes') const locales = require('../../../../../app/_locales/index.json') -const { OLD_UI_NETWORK_TYPE } = require('../../../../../app/scripts/controllers/network/enums') const getInfuraCurrencyOptions = () => { const sortedCurrencies = infuraCurrencies.objects.sort((a, b) => { @@ -349,7 +348,6 @@ const mapDispatchToProps = dispatch => { updateCurrentLocale: key => dispatch(actions.updateCurrentLocale(key)), setFeatureFlagToBeta: () => { return dispatch(actions.setFeatureFlag('betaUI', false, 'OLD_UI_NOTIFICATION_MODAL')) - .then(() => dispatch(actions.setNetworkEndpoints(OLD_UI_NETWORK_TYPE))) }, showResetAccountConfirmationModal: () => { return dispatch(actions.showModal({ name: 'CONFIRM_RESET_ACCOUNT' })) diff --git a/ui/app/components/pages/unlock-page/unlock-page.component.js b/ui/app/components/pages/unlock-page/unlock-page.component.js index d5e2a3224..0976d9506 100644 --- a/ui/app/components/pages/unlock-page/unlock-page.component.js +++ b/ui/app/components/pages/unlock-page/unlock-page.component.js @@ -175,7 +175,6 @@ UnlockPage.propTypes = { isUnlocked: PropTypes.bool, t: PropTypes.func, useOldInterface: PropTypes.func, - setNetworkEndpoints: PropTypes.func, } export default UnlockPage diff --git a/ui/app/components/pages/unlock-page/unlock-page.container.js b/ui/app/components/pages/unlock-page/unlock-page.container.js index 9788a18ea..18fed9b2e 100644 --- a/ui/app/components/pages/unlock-page/unlock-page.container.js +++ b/ui/app/components/pages/unlock-page/unlock-page.container.js @@ -6,7 +6,6 @@ const { tryUnlockMetamask, forgotPassword, markPasswordForgotten, - setNetworkEndpoints, } = require('../../../actions') import UnlockPage from './unlock-page.component' @@ -23,7 +22,6 @@ const mapDispatchToProps = dispatch => { forgotPassword: () => dispatch(forgotPassword()), tryUnlockMetamask: password => dispatch(tryUnlockMetamask(password)), markPasswordForgotten: () => dispatch(markPasswordForgotten()), - setNetworkEndpoints: type => dispatch(setNetworkEndpoints(type)), } } diff --git a/ui/app/components/pending-tx/confirm-send-ether.js b/ui/app/components/pending-tx/confirm-send-ether.js index 16dbd273b..c07c96ccc 100644 --- a/ui/app/components/pending-tx/confirm-send-ether.js +++ b/ui/app/components/pending-tx/confirm-send-ether.js @@ -28,6 +28,10 @@ const currencies = require('currency-formatter/currencies') const { MIN_GAS_PRICE_HEX } = require('../send/send-constants') const { SEND_ROUTE, DEFAULT_ROUTE } = require('../../routes') +const { + ENVIRONMENT_TYPE_POPUP, + ENVIRONMENT_TYPE_NOTIFICATION, +} = require('../../../../app/scripts/lib/enums') ConfirmSendEther.contextTypes = { t: PropTypes.func, @@ -293,6 +297,14 @@ ConfirmSendEther.prototype.editTransaction = function (txMeta) { history.push(SEND_ROUTE) } +ConfirmSendEther.prototype.renderNetworkDisplay = function () { + const windowType = window.METAMASK_UI_TYPE + + return (windowType === ENVIRONMENT_TYPE_NOTIFICATION || windowType === ENVIRONMENT_TYPE_POPUP) + ? h(NetworkDisplay) + : null +} + ConfirmSendEther.prototype.render = function () { const { currentCurrency, @@ -358,7 +370,7 @@ ConfirmSendEther.prototype.render = function () { visibility: !txMeta.lastGasPrice ? 'initial' : 'hidden', }, }, 'Edit'), - window.METAMASK_UI_TYPE === 'notification' && h(NetworkDisplay), + this.renderNetworkDisplay(), ]), h('.page-container__title', title), h('.page-container__subtitle', subtitle), diff --git a/ui/app/components/text-field/text-field.component.js b/ui/app/components/text-field/text-field.component.js index 4a02f76d8..6fd3b82b4 100644 --- a/ui/app/components/text-field/text-field.component.js +++ b/ui/app/components/text-field/text-field.component.js @@ -8,6 +8,9 @@ const styles = { '&$cssFocused': { color: '#aeaeae', }, + '&$cssError': { + color: '#aeaeae', + }, fontWeight: '400', color: '#aeaeae', }, @@ -17,6 +20,7 @@ const styles = { backgroundColor: '#f7861c', }, }, + cssError: {}, } const TextField = props => { @@ -30,6 +34,7 @@ const TextField = props => { FormLabelClasses: { root: classes.cssLabel, focused: classes.cssFocused, + error: classes.cssError, }, }} InputProps={{ diff --git a/ui/app/css/itcss/components/account-menu.scss b/ui/app/css/itcss/components/account-menu.scss index 824b2ddb6..657760ab5 100644 --- a/ui/app/css/itcss/components/account-menu.scss +++ b/ui/app/css/itcss/components/account-menu.scss @@ -23,6 +23,10 @@ &__icon { margin-left: 20px; cursor: pointer; + + &--disabled { + cursor: initial; + } } &__header { diff --git a/ui/app/css/itcss/components/header.scss b/ui/app/css/itcss/components/header.scss index cef61d0e2..3ccfd5c15 100644 --- a/ui/app/css/itcss/components/header.scss +++ b/ui/app/css/itcss/components/header.scss @@ -82,10 +82,6 @@ display: flex; flex-flow: row nowrap; align-items: center; - - .identicon { - cursor: pointer; - } } } diff --git a/ui/app/css/itcss/components/welcome-screen.scss b/ui/app/css/itcss/components/welcome-screen.scss index bfd174ad9..af1d67398 100644 --- a/ui/app/css/itcss/components/welcome-screen.scss +++ b/ui/app/css/itcss/components/welcome-screen.scss @@ -1,59 +1,60 @@ .welcome-screen { + display: flex; + flex-flow: column; + justify-content: center; + align-items: center; + font-family: Roboto; + font-weight: 400; + width: 100%; + flex: 1 0 auto; + padding: 70px 0; + background: $white; + + @media screen and (max-width: 575px) { + padding: 0; + } + + &__info { display: flex; flex-flow: column; - justify-content: center; - align-items: center; - font-family: Roboto; - font-weight: 400; width: 100%; - flex: 1 0 auto; - padding: 70px 0; - background: $white; - - @media screen and (max-width: 575px) { - padding: 0; - } - - &__info { - display: flex; - flex-flow: column; - width: 100%; - height: 100%; - align-items: center; - - &__header { - font-size: 1.65em; - margin-bottom: 14px; - - @media screen and (max-width: 575px) { - font-size: 1.5em; - } - } + height: 100%; + align-items: center; + justify-content: center; - &__copy { - font-size: 1em; - width: 400px; - max-width: 90vw; - text-align: center; + &__header { + font-size: 1.65em; + margin-bottom: 14px; - @media screen and (max-width: 575px) { - font-size: 0.9em; - } - } + @media screen and (max-width: 575px) { + font-size: 1.5em; + } } - &__button { - height: 54px; - width: 198px; - box-shadow: 0 2px 4px 0 rgba(0,0,0,0.14); - color: #FFFFFF; - font-size: 20px; - font-weight: 500; - line-height: 26px; + &__copy { + font-size: 1em; + width: 400px; + max-width: 90vw; text-align: center; - text-transform: uppercase; - margin: 35px 0 14px; - transition: 200ms ease-in-out; - background-color: rgba(247, 134, 28, 0.9); + + @media screen and (max-width: 575px) { + font-size: .9em; + } } + } + + &__button { + height: 54px; + width: 198px; + box-shadow: 0 2px 4px 0 rgba(0, 0, 0, .14); + color: #fff; + font-size: 20px; + font-weight: 500; + line-height: 26px; + text-align: center; + text-transform: uppercase; + margin: 35px 0 14px; + transition: 200ms ease-in-out; + background-color: rgba(247, 134, 28, .9); + } } diff --git a/ui/app/first-time/init-menu.js b/ui/app/first-time/init-menu.js index 6cb548bb9..c20ba2d77 100644 --- a/ui/app/first-time/init-menu.js +++ b/ui/app/first-time/init-menu.js @@ -10,7 +10,6 @@ const getCaretCoordinates = require('textarea-caret') const { RESTORE_VAULT_ROUTE, DEFAULT_ROUTE } = require('../routes') const { getEnvironmentType } = require('../../../app/scripts/lib/util') const { ENVIRONMENT_TYPE_POPUP } = require('../../../app/scripts/lib/enums') -const { OLD_UI_NETWORK_TYPE } = require('../../../app/scripts/controllers/network/enums') class InitializeMenuScreen extends Component { constructor (props) { @@ -190,7 +189,6 @@ class InitializeMenuScreen extends Component { showOldUI () { this.props.dispatch(actions.setFeatureFlag('betaUI', false, 'OLD_UI_NOTIFICATION_MODAL')) - .then(() => this.props.dispatch(actions.setNetworkEndpoints(OLD_UI_NETWORK_TYPE))) } } diff --git a/ui/app/select-app.js b/ui/app/select-app.js index 808f9ba56..f2e8e8d10 100644 --- a/ui/app/select-app.js +++ b/ui/app/select-app.js @@ -6,8 +6,7 @@ const { HashRouter } = require('react-router-dom') const App = require('./app') const OldApp = require('../../old-ui/app/app') const { autoAddToBetaUI } = require('./selectors') -const { setFeatureFlag, setNetworkEndpoints } = require('./actions') -const { BETA_UI_NETWORK_TYPE } = require('../../app/scripts/controllers/network/enums') +const { setFeatureFlag } = require('./actions') const I18nProvider = require('./i18n-provider') function mapStateToProps (state) { @@ -24,11 +23,9 @@ function mapDispatchToProps (dispatch) { return { setFeatureFlagWithModal: () => { return dispatch(setFeatureFlag('betaUI', true, 'BETA_UI_NOTIFICATION_MODAL')) - .then(() => dispatch(setNetworkEndpoints(BETA_UI_NETWORK_TYPE))) }, setFeatureFlagWithoutModal: () => { return dispatch(setFeatureFlag('betaUI', true)) - .then(() => dispatch(setNetworkEndpoints(BETA_UI_NETWORK_TYPE))) }, } } diff --git a/ui/index.js b/ui/index.js index 075faf66d..bd9ecc28b 100644 --- a/ui/index.js +++ b/ui/index.js @@ -5,11 +5,6 @@ const actions = require('./app/actions') const configureStore = require('./app/store') const txHelper = require('./lib/tx-helper') const { fetchLocale } = require('./i18n-helper') -const { - OLD_UI_NETWORK_TYPE, - BETA_UI_NETWORK_TYPE, -} = require('../app/scripts/controllers/network/enums') - const log = require('loglevel') module.exports = launchMetamaskUi @@ -55,10 +50,6 @@ async function startApp (metamaskState, accountManager, opts) { networkVersion: opts.networkVersion, }) - const useBetaUi = metamaskState.featureFlags.betaUI - const networkEndpointType = useBetaUi ? BETA_UI_NETWORK_TYPE : OLD_UI_NETWORK_TYPE - store.dispatch(actions.setNetworkEndpoints(networkEndpointType)) - // if unconfirmed txs, start on txConf page const unapprovedTxsAll = txHelper(metamaskState.unapprovedTxs, metamaskState.unapprovedMsgs, metamaskState.unapprovedPersonalMsgs, metamaskState.unapprovedTypedMessages, metamaskState.network) const numberOfUnapprivedTx = unapprovedTxsAll.length |