Convert Network component to use JSX (#7564)

ui/app/components/app/network.js

@@ -1,7 +1,6 @@
-const Component = require('react').Component
-const PropTypes = require('prop-types')
-const h = require('react-hyperscript')
-const connect = require('react-redux').connect
+import PropTypes from 'prop-types'
+import React, {Component} from 'react'
+
 const classnames = require('classnames')
 const inherits = require('util').inherits
 const NetworkDropdownIcon = require('./dropdowns/components/network-dropdown-icon')
@@ -10,8 +9,7 @@ Network.contextTypes = {
   t: PropTypes.func,
 }
 
-module.exports = connect()(Network)
-
+module.exports = Network
 
 inherits(Network, Component)
 
@@ -19,15 +17,14 @@ function Network () {
   Component.call(this)
 }
 
-Network.prototype.render = function () {
-  const props = this.props
+Network.prototype.render = function Network () {
   const context = this.context
-  const networkNumber = props.network
+  const networkNumber = this.props.network
   let providerName, providerNick, providerUrl
   try {
-    providerName = props.provider.type
-    providerNick = props.provider.nickname || ''
-    providerUrl = props.provider.rpcTarget
+    providerName = this.props.provider.type
+    providerNick = this.props.provider.nickname || ''
+    providerUrl = this.props.provider.rpcTarget
   } catch (e) {
     providerName = null
   }
@@ -56,96 +53,124 @@ Network.prototype.render = function () {
   }
 
   return (
-    h('div.network-component.pointer', {
-      className: classnames({
+    <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) => {
+      })}
+      title={hoverText}
+      onClick={(event) => {
         if (!this.props.disabled) {
           this.props.onClick(event)
         }
-      },
-    }, [
-      (function () {
+      }}
+    >
+      {(function () {
         switch (iconName) {
           case 'ethereum-network':
-            return h('.network-indicator', [
-              h(NetworkDropdownIcon, {
-                backgroundColor: '#038789', // $blue-lagoon
-                nonSelectBackgroundColor: '#15afb2',
-                loading: networkNumber === 'loading',
-              }),
-              h('.network-name', context.t('mainnet')),
-              h('.network-indicator__down-arrow'),
-            ])
+            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 h('.network-indicator', [
-              h(NetworkDropdownIcon, {
-                backgroundColor: '#e91550', // $crimson
-                nonSelectBackgroundColor: '#ec2c50',
-                loading: networkNumber === 'loading',
-              }),
-              h('.network-name', context.t('ropsten')),
-              h('.network-indicator__down-arrow'),
-            ])
+            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 h('.network-indicator', [
-              h(NetworkDropdownIcon, {
-                backgroundColor: '#690496', // $purple
-                nonSelectBackgroundColor: '#b039f3',
-                loading: networkNumber === 'loading',
-              }),
-              h('.network-name', context.t('kovan')),
-              h('.network-indicator__down-arrow'),
-            ])
+            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 h('.network-indicator', [
-              h(NetworkDropdownIcon, {
-                backgroundColor: '#ebb33f', // $tulip-tree
-                nonSelectBackgroundColor: '#ecb23e',
-                loading: networkNumber === 'loading',
-              }),
-              h('.network-name', context.t('rinkeby')),
-              h('.network-indicator__down-arrow'),
-            ])
+            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 h('.network-indicator', [
-              h(NetworkDropdownIcon, {
-                backgroundColor: '#3099f2', // $dodger-blue
-                nonSelectBackgroundColor: '#ecb23e',
-                loading: networkNumber === 'loading',
-              }),
-              h('.network-name', context.t('goerli')),
-              h('.network-indicator__down-arrow'),
-            ])
+            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 h('.network-indicator', [
-              networkNumber === 'loading'
-                ? h('span.pointer.network-loading-spinner', {
-                  onClick: (event) => this.props.onClick(event),
-                }, [
-                  h('img', {
-                    title: context.t('attemptingConnect'),
-                    src: 'images/loading.svg',
-                  }),
-                ])
-                : h('i.fa.fa-question-circle.fa-lg', {
-                  style: {
-                    color: 'rgb(125, 128, 130)',
-                  },
-                }),
-
-              h('.network-name', providerName === 'localhost' ? context.t('localhost') : providerNick || context.t('privateNetwork')),
-              h('.network-indicator__down-arrow'),
-            ])
+            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>
   )
 }