Refactor Network dropdown component (#7817)

ui/app/components/app/network.js

@@ -1,9 +1,42 @@
 import PropTypes from 'prop-types'
 import React, { Component } from 'react'
-
 import classnames from 'classnames'
 import NetworkDropdownIcon from './dropdowns/components/network-dropdown-icon'
 
+function NetworkIndicator ({ disabled, children, hoverText, onClick, providerName }) {
+  return (
+    <div
+      className={classnames('network-component pointer', {
+        'network-component--disabled': disabled,
+        'ethereum-network': providerName === 'mainnet',
+        'ropsten-test-network': providerName === 'ropsten',
+        'kovan-test-network': providerName === 'kovan',
+        'rinkeby-test-network': providerName === 'rinkeby',
+        'goerli-test-network': providerName === 'goerli',
+      })}
+      title={hoverText}
+      onClick={(event) => {
+        if (!disabled) {
+          onClick(event)
+        }
+      }}
+    >
+      <div className="network-indicator">
+        {children}
+        <div className="network-indicator__down-arrow" />
+      </div>
+    </div>
+  )
+}
+
+NetworkIndicator.propTypes = {
+  children: PropTypes.node.isRequired,
+  disabled: PropTypes.bool,
+  hoverText: PropTypes.string,
+  onClick: PropTypes.func,
+  providerName: PropTypes.string,
+}
+
 export default class Network extends Component {
   static contextTypes = {
     t: PropTypes.func,
@@ -21,160 +54,113 @@ export default class Network extends Component {
   }
 
   render () {
-    const context = this.context
-    const networkNumber = this.props.network
+    const {
+      t,
+    } = this.context
+
+    const {
+      disabled,
+      network: networkNumber,
+      onClick,
+      provider,
+    } = this.props
+
     let providerName, providerNick, providerUrl
-    try {
-      providerName = this.props.provider.type
-      providerNick = this.props.provider.nickname || ''
-      providerUrl = this.props.provider.rpcTarget
-    } catch (e) {
-      providerName = null
-    }
-    const providerId = providerNick || providerName || providerUrl || null
-    let iconName
-    let hoverText
-
-    if (providerName === 'mainnet') {
-      hoverText = context.t('mainnet')
-      iconName = 'ethereum-network'
-    } else if (providerName === 'ropsten') {
-      hoverText = context.t('ropsten')
-      iconName = 'ropsten-test-network'
-    } else if (providerName === 'kovan') {
-      hoverText = context.t('kovan')
-      iconName = 'kovan-test-network'
-    } else if (providerName === 'rinkeby') {
-      hoverText = context.t('rinkeby')
-      iconName = 'rinkeby-test-network'
-    } else if (providerName === 'goerli') {
-      hoverText = context.t('goerli')
-      iconName = 'goerli-test-network'
-    } else {
-      hoverText = providerId
-      iconName = 'private-network'
+    if (provider) {
+      providerName = provider.type
+      providerNick = provider.nickname || ''
+      providerUrl = provider.rpcTarget
     }
 
-    return (
-      <div
-        className={classnames('network-component pointer', {
-          'network-component--disabled': this.props.disabled,
-          'ethereum-network': providerName === 'mainnet',
-          'ropsten-test-network': providerName === 'ropsten',
-          'kovan-test-network': providerName === 'kovan',
-          'rinkeby-test-network': providerName === 'rinkeby',
-          'goerli-test-network': providerName === 'goerli',
-        })}
-        title={hoverText}
-        onClick={(event) => {
-          if (!this.props.disabled) {
-            this.props.onClick(event)
-          }
-        }}
-      >
-        {(function () {
-          switch (iconName) {
-            case 'ethereum-network':
-              return (
-                <div className="network-indicator">
-                  <NetworkDropdownIcon
-                    backgroundColor="#038789"
-                    nonSelectBackgroundColor="#15afb2"
-                    loading={networkNumber === 'loading'}
-                  />
-                  <div className="network-name">
-                    {context.t('mainnet')}
-                  </div>
-                  <div className="network-indicator__down-arrow" />
-                </div>
-              )
-            case 'ropsten-test-network':
-              return (
-                <div className="network-indicator">
-                  <NetworkDropdownIcon
-                    backgroundColor="#e91550"
-                    nonSelectBackgroundColor="#ec2c50"
-                    loading={networkNumber === 'loading'}
-                  />
-                  <div className="network-name">
-                    {context.t('ropsten')}
-                  </div>
-                  <div className="network-indicator__down-arrow" />
-                </div>
-              )
-            case 'kovan-test-network':
-              return (
-                <div className="network-indicator">
-                  <NetworkDropdownIcon
-                    backgroundColor="#690496"
-                    nonSelectBackgroundColor="#b039f3"
-                    loading={networkNumber === 'loading'}
-                  />
-                  <div className="network-name">
-                    {context.t('kovan')}
-                  </div>
-                  <div className="network-indicator__down-arrow" />
-                </div>
-              )
-            case 'rinkeby-test-network':
-              return (
-                <div className="network-indicator">
-                  <NetworkDropdownIcon
-                    backgroundColor="#ebb33f"
-                    nonSelectBackgroundColor="#ecb23e"
-                    loading={networkNumber === 'loading'}
-                  />
-                  <div className="network-name">
-                    {context.t('rinkeby')}
-                  </div>
-                  <div className="network-indicator__down-arrow" />
-                </div>
-              )
-            case 'goerli-test-network':
-              return (
-                <div className="network-indicator">
-                  <NetworkDropdownIcon
-                    backgroundColor="#3099f2"
-                    nonSelectBackgroundColor="#ecb23e"
-                    loading={networkNumber === 'loading'}
-                  />
-                  <div className="network-name">{context.t('goerli')}</div>
-                  <div className="network-indicator__down-arrow" />
-                </div>
-              )
-            default:
-              return (
-                <div className="network-indicator">
-                  {networkNumber === 'loading'
-                    ? (
-                      <span
-                        className="pointer network-loading-spinner"
-                        onClick={(event) => this.props.onClick(event)}
-                      >
-                        <img title={context.t('attemptingConnect')} src="images/loading.svg" alt="" />
-                      </span>
-                    )
-                    : (
-                      <i
-                        className="fa fa-question-circle fa-lg"
-                        style={{
-                          color: 'rgb(125, 128, 130)',
-                        }}
-                      />
-                    )}
-                  <div className="network-name">
-                    {
-                      providerName === 'localhost'
-                        ? context.t('localhost')
-                        : providerNick || context.t('privateNetwork')
-                    }
-                  </div>
-                  <div className="network-indicator__down-arrow" />
-                </div>
-              )
-          }
-        })()}
-      </div>
-    )
+    switch (providerName) {
+      case 'mainnet':
+        return (
+          <NetworkIndicator disabled={disabled} hoverText={t('mainnet')} onClick={onClick} providerName={providerName}>
+            <NetworkDropdownIcon
+              backgroundColor="#038789"
+              nonSelectBackgroundColor="#15afb2"
+              loading={networkNumber === 'loading'}
+            />
+            <div className="network-name">{t('mainnet')}</div>
+          </NetworkIndicator>
+        )
+
+      case 'ropsten':
+        return (
+          <NetworkIndicator disabled={disabled} hoverText={t('ropsten')} onClick={onClick} providerName={providerName}>
+            <NetworkDropdownIcon
+              backgroundColor="#e91550"
+              nonSelectBackgroundColor="#ec2c50"
+              loading={networkNumber === 'loading'}
+            />
+            <div className="network-name">{t('ropsten')}</div>
+          </NetworkIndicator>
+        )
+
+      case 'kovan':
+        return (
+          <NetworkIndicator disabled={disabled} hoverText={t('kovan')} onClick={onClick} providerName={providerName}>
+            <NetworkDropdownIcon
+              backgroundColor="#690496"
+              nonSelectBackgroundColor="#b039f3"
+              loading={networkNumber === 'loading'}
+            />
+            <div className="network-name">{t('kovan')}</div>
+          </NetworkIndicator>
+        )
+
+      case 'rinkeby':
+        return (
+          <NetworkIndicator disabled={disabled} hoverText={t('rinkeby')} onClick={onClick} providerName={providerName}>
+            <NetworkDropdownIcon
+              backgroundColor="#ebb33f"
+              nonSelectBackgroundColor="#ecb23e"
+              loading={networkNumber === 'loading'}
+            />
+            <div className="network-name">{t('rinkeby')}</div>
+          </NetworkIndicator>
+        )
+
+      case 'goerli':
+        return (
+          <NetworkIndicator disabled={disabled} hoverText={t('goerli')} onClick={onClick} providerName={providerName}>
+            <NetworkDropdownIcon
+              backgroundColor="#3099f2"
+              nonSelectBackgroundColor="#ecb23e"
+              loading={networkNumber === 'loading'}
+            />
+            <div className="network-name">{t('goerli')}</div>
+          </NetworkIndicator>
+        )
+
+      default:
+        return (
+          <NetworkIndicator
+            disabled={disabled}
+            hoverText={providerNick || providerName || providerUrl || null}
+            onClick={onClick}
+            providerName={providerName}
+          >
+            {
+              networkNumber === 'loading'
+                ? (
+                  <span className="pointer network-loading-spinner" onClick={(event) => onClick(event)}>
+                    <img title={t('attemptingConnect')} src="images/loading.svg" alt="" />
+                  </span>
+                )
+                : (
+                  <i className="fa fa-question-circle fa-lg" style={{ color: 'rgb(125, 128, 130)' }} />
+                )
+            }
+            <div className="network-name">
+              {
+                providerName === 'localhost'
+                  ? t('localhost')
+                  : providerNick || t('privateNetwork')
+              }
+            </div>
+          </NetworkIndicator>
+        )
+    }
   }
 }