aboutsummaryrefslogtreecommitdiffstats
diff options
context:
space:
mode:
-rw-r--r--CHANGELOG.md4
-rw-r--r--ui/app/app.js49
-rw-r--r--ui/app/components/network.js23
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'