Merge pull request #1729 from MetaMask/i1707-ClarifySearchingIndication

Clarify network searching indication

CHANGELOG.md

@@ -2,6 +2,9 @@
 
 ## Current Master
 
+- 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.

ui/app/app.js

@@ -68,7 +68,7 @@ App.prototype.render = function () {
   const { isLoading, loadingMessage, transForward, network } = props
   const isLoadingNetwork = network === 'loading'
   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', {
+          h(NetworkIndicator, {
-            style: {
+            network: this.props.network,
-              marginRight: '-72px',
+            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

ui/app/components/network.js

@@ -22,15 +22,24 @@ Network.prototype.render = function () {
   let iconName, hoverText
 
   if (networkNumber === 'loading') {
-    return h('img.network-indicator', {
+    return h('span', {
-      title: 'Attempting to connect to blockchain.',
-      onClick: (event) => this.props.onClick(event),
       style: {
-        width: '27px',
+        display: 'flex',
-        marginRight: '-27px',
+        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'