diff options
| -rw-r--r-- | CHANGELOG.md | 4 | ||||
| -rw-r--r-- | ui/app/app.js | 49 | ||||
| -rw-r--r-- | ui/app/components/network.js | 23 |
3 files changed, 52 insertions, 24 deletions
diff --git a/CHANGELOG.md b/CHANGELOG.md index abb8f24f5..07f55bf2b 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -2,6 +2,10 @@ ## Current Master +- No longer show network loading indication on config screen, to allow selecting custom RPCs. +- Visually indicate that network spinner is a menu. +- Indicate what network is being searched for when disconnected. + ## 3.8.1 2017-6-30 - Temporarily disabled loading popular tokens by default to improve performance. diff --git a/ui/app/app.js b/ui/app/app.js index 8bf69b5ad..1a63002e1 100644 --- a/ui/app/app.js +++ b/ui/app/app.js @@ -66,9 +66,9 @@ function mapStateToProps (state) { App.prototype.render = function () { var props = this.props const { isLoading, loadingMessage, transForward, network } = props - const isLoadingNetwork = network === 'loading' + const isLoadingNetwork = network === 'loading' && props.currentView.name !== 'config' const loadMessage = loadingMessage || isLoadingNetwork ? - 'Searching for Network' : null + `Connecting to ${this.getNetworkName()}` : null log.debug('Main ui render function') @@ -136,7 +136,7 @@ App.prototype.renderAppBar = function () { }, }, [ - h('div', { + h('div.left-menu-section', { style: { display: 'flex', flexDirection: 'row', @@ -151,21 +151,15 @@ App.prototype.renderAppBar = function () { src: '/images/icon-128.png', }), - h('#network-spacer.flex-center', { - style: { - marginRight: '-72px', + h(NetworkIndicator, { + network: this.props.network, + provider: this.props.provider, + onClick: (event) => { + event.preventDefault() + event.stopPropagation() + this.setState({ isNetworkMenuOpen: !isNetworkMenuOpen }) }, - }, [ - h(NetworkIndicator, { - network: this.props.network, - provider: this.props.provider, - onClick: (event) => { - event.preventDefault() - event.stopPropagation() - this.setState({ isNetworkMenuOpen: !isNetworkMenuOpen }) - }, - }), - ]), + }), ]), // metamask name @@ -555,6 +549,27 @@ App.prototype.renderCustomOption = function (provider) { } } +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' + } + + return name +} + App.prototype.renderCommonRpc = function (rpcList, provider) { const { rpcTarget } = provider const props = this.props diff --git a/ui/app/components/network.js b/ui/app/components/network.js index 31a8fc17c..d5d3e18cd 100644 --- a/ui/app/components/network.js +++ b/ui/app/components/network.js @@ -22,15 +22,24 @@ Network.prototype.render = function () { let iconName, hoverText if (networkNumber === 'loading') { - return h('img.network-indicator', { - title: 'Attempting to connect to blockchain.', - onClick: (event) => this.props.onClick(event), + return h('span', { style: { - width: '27px', - marginRight: '-27px', + display: 'flex', + alignItems: 'center', + flexDirection: 'row', }, - src: 'images/loading.svg', - }) + onClick: (event) => this.props.onClick(event), + }, [ + h('img', { + title: 'Attempting to connect to blockchain.', + style: { + width: '27px', + }, + src: 'images/loading.svg', + }), + h('i.fa.fa-sort-desc'), + ]) + } else if (providerName === 'mainnet') { hoverText = 'Main Ethereum Network' iconName = 'ethereum-network' |