Merge pull request #5893 from MetaMask/loading-network-screen

Loading network screen

1 files changed, 30 insertions, 23 deletions

diff --git a/ui/app/components/network.js b/ui/app/components/network.js
index 611aadb7b..e18404f42 100644
--- a/ui/app/components/network.js
+++ b/ui/app/components/network.js
@@ -23,33 +23,19 @@ Network.prototype.render = function () {
   const props = this.props
   const context = this.context
   const networkNumber = props.network
-  let providerName, providerNick
+  let providerName, providerNick, providerUrl
   try {
     providerName = props.provider.type
     providerNick = props.provider.nickname || ''
+    providerUrl = props.provider.rpcTarget
   } catch (e) {
     providerName = null
   }
-  let iconName, hoverText
+  const providerId = providerNick || providerName || providerUrl || null
+  let iconName
+  let hoverText
 
-  if (networkNumber === 'loading') {
-    return h('span.pointer.network-indicator', {
-      style: {
-        display: 'flex',
-        alignItems: 'center',
-        flexDirection: 'row',
-      },
-      onClick: (event) => this.props.onClick(event),
-    }, [
-      h('img', {
-        title: context.t('attemptingConnect'),
-        style: {
-          width: '27px',
-        },
-        src: 'images/loading.svg',
-      }),
-    ])
-  } else if (providerName === 'mainnet') {
+  if (providerName === 'mainnet') {
     hoverText = context.t('mainnet')
     iconName = 'ethereum-network'
   } else if (providerName === 'ropsten') {
@@ -65,8 +51,8 @@ Network.prototype.render = function () {
     hoverText = context.t('rinkeby')
     iconName = 'rinkeby-test-network'
   } else {
-    hoverText = context.t('unknownNetwork')
-    iconName = 'unknown-private-network'
+    hoverText = providerId
+    iconName = 'private-network'
   }
 
   return (
@@ -92,6 +78,7 @@ Network.prototype.render = function () {
               h(NetworkDropdownIcon, {
                 backgroundColor: '#038789', // $blue-lagoon
                 nonSelectBackgroundColor: '#15afb2',
+                loading: networkNumber === 'loading',
               }),
               h('.network-name', context.t('mainnet')),
               h('i.fa.fa-chevron-down.fa-lg.network-caret'),
@@ -101,6 +88,7 @@ Network.prototype.render = function () {
               h(NetworkDropdownIcon, {
                 backgroundColor: '#e91550', // $crimson
                 nonSelectBackgroundColor: '#ec2c50',
+                loading: networkNumber === 'loading',
               }),
               h('.network-name', context.t('ropsten')),
               h('i.fa.fa-chevron-down.fa-lg.network-caret'),
@@ -110,6 +98,7 @@ Network.prototype.render = function () {
               h(NetworkDropdownIcon, {
                 backgroundColor: '#690496', // $purple
                 nonSelectBackgroundColor: '#b039f3',
+                loading: networkNumber === 'loading',
               }),
               h('.network-name', context.t('kovan')),
               h('i.fa.fa-chevron-down.fa-lg.network-caret'),
@@ -119,13 +108,31 @@ Network.prototype.render = function () {
               h(NetworkDropdownIcon, {
                 backgroundColor: '#ebb33f', // $tulip-tree
                 nonSelectBackgroundColor: '#ecb23e',
+                loading: networkNumber === 'loading',
               }),
               h('.network-name', context.t('rinkeby')),
               h('i.fa.fa-chevron-down.fa-lg.network-caret'),
             ])
           default:
             return h('.network-indicator', [
-              h('i.fa.fa-question-circle.fa-lg', {
+              networkNumber === 'loading'
+              ? h('span.pointer.network-indicator', {
+                style: {
+                  display: 'flex',
+                  alignItems: 'center',
+                  flexDirection: 'row',
+                },
+                onClick: (event) => this.props.onClick(event),
+              }, [
+                h('img', {
+                  title: context.t('attemptingConnect'),
+                  style: {
+                    width: '27px',
+                  },
+                  src: 'images/loading.svg',
+                }),
+              ])
+              : h('i.fa.fa-question-circle.fa-lg', {
                 style: {
                   margin: '10px',
                   color: 'rgb(125, 128, 130)',