Convert NetworkDropdown component to use JSX (#7562)

ui/app/components/app/dropdowns/network-dropdown.js

@@ -1,6 +1,5 @@
-const Component = require('react').Component
-const PropTypes = require('prop-types')
-const h = require('react-hyperscript')
+import PropTypes from 'prop-types'
+import React, {Component} from 'react'
 const inherits = require('util').inherits
 const connect = require('react-redux').connect
 const { withRouter } = require('react-router-dom')
@@ -67,10 +66,9 @@ module.exports = compose(
 
 
 // TODO: specify default props and proptypes
-NetworkDropdown.prototype.render = function () {
-  const props = this.props
-  const { provider: { type: providerType, rpcTarget: activeNetwork }, setNetworksTabAddMode } = props
-  const rpcListDetail = props.frequentRpcListDetail
+NetworkDropdown.prototype.render = function NetworkDropdown () {
+  const { provider: { type: providerType, rpcTarget: activeNetwork }, setNetworksTabAddMode } = this.props
+  const rpcListDetail = this.props.frequentRpcListDetail
   const isOpen = this.props.networkDropdownOpen
   const dropdownMenuItemStyle = {
     fontSize: '16px',
@@ -78,201 +76,206 @@ NetworkDropdown.prototype.render = function () {
     padding: '12px 0',
   }
 
-  return h(Dropdown, {
-    isOpen,
-    onClickOutside: (event) => {
-      const { classList } = event.target
-      const isInClassList = className => classList.contains(className)
-      const notToggleElementIndex = R.findIndex(isInClassList)(notToggleElementClassnames)
+  return (
+    <Dropdown
+      isOpen={isOpen}
+      onClickOutside={(event) => {
+        const { classList } = event.target
+        const isInClassList = className => classList.contains(className)
+        const notToggleElementIndex = R.findIndex(isInClassList)(notToggleElementClassnames)
 
-      if (notToggleElementIndex === -1) {
-        this.props.hideNetworkDropdown()
-      }
-    },
-    containerClassName: 'network-droppo',
-    zIndex: 55,
-    style: {
-      position: 'absolute',
-      top: '58px',
-      width: '309px',
-      zIndex: '55px',
-    },
-    innerStyle: {
-      padding: '18px 8px',
-    },
-  }, [
-
-    h('div.network-dropdown-header', {}, [
-      h('div.network-dropdown-title', {}, this.context.t('networks')),
-
-      h('div.network-dropdown-divider'),
-
-      h('div.network-dropdown-content',
-        {},
-        this.context.t('defaultNetwork')
-      ),
-    ]),
-
-    h(
-      DropdownMenuItem,
-      {
-        key: 'main',
-        closeMenu: () => this.props.hideNetworkDropdown(),
-        onClick: () => this.handleClick('mainnet'),
-        style: { ...dropdownMenuItemStyle, borderColor: '#038789' },
-      },
-      [
-        providerType === 'mainnet' ? h('i.fa.fa-check') : h('.network-check__transparent', '✓'),
-        h(NetworkDropdownIcon, {
-          backgroundColor: '#29B6AF', // $java
-          isSelected: providerType === 'mainnet',
-        }),
-        h('span.network-name-item', {
-          style: {
-            color: providerType === 'mainnet' ? '#ffffff' : '#9b9b9b',
-          },
-        }, this.context.t('mainnet')),
-      ]
-    ),
-
-    h(
-      DropdownMenuItem,
-      {
-        key: 'ropsten',
-        closeMenu: () => this.props.hideNetworkDropdown(),
-        onClick: () => this.handleClick('ropsten'),
-        style: dropdownMenuItemStyle,
-      },
-      [
-        providerType === 'ropsten' ? h('i.fa.fa-check') : h('.network-check__transparent', '✓'),
-        h(NetworkDropdownIcon, {
-          backgroundColor: '#ff4a8d', // $wild-strawberry
-          isSelected: providerType === 'ropsten',
-        }),
-        h('span.network-name-item', {
-          style: {
-            color: providerType === 'ropsten' ? '#ffffff' : '#9b9b9b',
-          },
-        }, this.context.t('ropsten')),
-      ]
-    ),
-
-    h(
-      DropdownMenuItem,
-      {
-        key: 'kovan',
-        closeMenu: () => this.props.hideNetworkDropdown(),
-        onClick: () => this.handleClick('kovan'),
-        style: dropdownMenuItemStyle,
-      },
-      [
-        providerType === 'kovan' ? h('i.fa.fa-check') : h('.network-check__transparent', '✓'),
-        h(NetworkDropdownIcon, {
-          backgroundColor: '#7057ff', // $cornflower-blue
-          isSelected: providerType === 'kovan',
-        }),
-        h('span.network-name-item', {
-          style: {
-            color: providerType === 'kovan' ? '#ffffff' : '#9b9b9b',
-          },
-        }, this.context.t('kovan')),
-      ]
-    ),
-
-    h(
-      DropdownMenuItem,
-      {
-        key: 'rinkeby',
-        closeMenu: () => this.props.hideNetworkDropdown(),
-        onClick: () => this.handleClick('rinkeby'),
-        style: dropdownMenuItemStyle,
-      },
-      [
-        providerType === 'rinkeby' ? h('i.fa.fa-check') : h('.network-check__transparent', '✓'),
-        h(NetworkDropdownIcon, {
-          backgroundColor: '#f6c343', // $saffron
-          isSelected: providerType === 'rinkeby',
-        }),
-        h('span.network-name-item', {
-          style: {
-            color: providerType === 'rinkeby' ? '#ffffff' : '#9b9b9b',
-          },
-        }, this.context.t('rinkeby')),
-      ]
-    ),
-
-    h(
-      DropdownMenuItem,
-      {
-        key: 'goerli',
-        closeMenu: () => this.props.hideNetworkDropdown(),
-        onClick: () => this.handleClick('goerli'),
-        style: dropdownMenuItemStyle,
-      },
-      [
-        providerType === 'goerli' ? h('i.fa.fa-check') : h('.network-check__transparent', '✓'),
-        h(NetworkDropdownIcon, {
-          backgroundColor: '#3099f2', // $dodger-blue
-          isSelected: providerType === 'goerli',
-        }),
-        h('span.network-name-item', {
-          style: {
-            color: providerType === 'goerli' ? '#ffffff' : '#9b9b9b',
-          },
-        }, this.context.t('goerli')),
-      ]
-    ),
-
-    h(
-      DropdownMenuItem,
-      {
-        key: 'default',
-        closeMenu: () => this.props.hideNetworkDropdown(),
-        onClick: () => this.handleClick('localhost'),
-        style: dropdownMenuItemStyle,
-      },
-      [
-        providerType === 'localhost' ? h('i.fa.fa-check') : h('.network-check__transparent', '✓'),
-        h(NetworkDropdownIcon, {
-          isSelected: providerType === 'localhost',
-          innerBorder: '1px solid #9b9b9b',
-        }),
-        h('span.network-name-item', {
-          style: {
-            color: providerType === 'localhost' ? '#ffffff' : '#9b9b9b',
-          },
-        }, this.context.t('localhost')),
-      ]
-    ),
-
-    this.renderCustomOption(props.provider),
-    this.renderCommonRpc(rpcListDetail, props.provider),
-
-    h(
-      DropdownMenuItem,
-      {
-        closeMenu: () => this.props.hideNetworkDropdown(),
-        onClick: () => {
+        if (notToggleElementIndex === -1) {
+          this.props.hideNetworkDropdown()
+        }
+      }}
+      containerClassName="network-droppo"
+      zIndex={55}
+      style={{
+        position: 'absolute',
+        top: '58px',
+        width: '309px',
+        zIndex: '55px',
+      }}
+      innerStyle={{
+        padding: '18px 8px',
+      }}
+    >
+      <div className="network-dropdown-header">
+        <div className="network-dropdown-title">
+          {this.context.t('networks')}
+        </div>
+        <div className="network-dropdown-divider" />
+        <div className="network-dropdown-content">
+          {this.context.t('defaultNetwork')}
+        </div>
+      </div>
+      <DropdownMenuItem
+        key="main"
+        closeMenu={() => this.props.hideNetworkDropdown()}
+        onClick={() => this.handleClick('mainnet')}
+        style={{ ...dropdownMenuItemStyle, borderColor: '#038789' }}
+      >
+        {
+          providerType === 'mainnet'
+            ? <i className="fa fa-check" />
+            : <div className="network-check__transparent">✓</div>
+        }
+        <NetworkDropdownIcon backgroundColor="#29B6AF" isSelected={providerType === 'mainnet'} />
+        <span
+          className="network-name-item"
+          style={{
+            color: providerType === 'mainnet'
+              ? '#ffffff'
+              : '#9b9b9b',
+          }}
+        >
+          {this.context.t('mainnet')}
+        </span>
+      </DropdownMenuItem>
+      <DropdownMenuItem
+        key="ropsten"
+        closeMenu={() => this.props.hideNetworkDropdown()}
+        onClick={() => this.handleClick('ropsten')}
+        style={dropdownMenuItemStyle}
+      >
+        {
+          providerType === 'ropsten'
+            ? <i className="fa fa-check" />
+            : <div className="network-check__transparent">✓</div>
+        }
+        <NetworkDropdownIcon backgroundColor="#ff4a8d" isSelected={providerType === 'ropsten'} />
+        <span
+          className="network-name-item"
+          style={{
+            color: providerType === 'ropsten'
+              ? '#ffffff'
+              : '#9b9b9b',
+          }}
+        >
+          {this.context.t('ropsten')}
+        </span>
+      </DropdownMenuItem>
+      <DropdownMenuItem
+        key="kovan"
+        closeMenu={() => this.props.hideNetworkDropdown()}
+        onClick={() => this.handleClick('kovan')}
+        style={dropdownMenuItemStyle}
+      >
+        {
+          providerType === 'kovan'
+            ? <i className="fa fa-check" />
+            : <div className="network-check__transparent">✓</div>
+        }
+        <NetworkDropdownIcon backgroundColor="#7057ff" isSelected={providerType === 'kovan'} />
+        <span
+          className="network-name-item"
+          style={{
+            color: providerType === 'kovan'
+              ? '#ffffff'
+              : '#9b9b9b',
+          }}
+        >
+          {this.context.t('kovan')}
+        </span>
+      </DropdownMenuItem>
+      <DropdownMenuItem
+        key="rinkeby"
+        closeMenu={() => this.props.hideNetworkDropdown()}
+        onClick={() => this.handleClick('rinkeby')}
+        style={dropdownMenuItemStyle}
+      >
+        {
+          providerType === 'rinkeby'
+            ? <i className="fa fa-check" />
+            : <div className="network-check__transparent">✓</div>
+        }
+        <NetworkDropdownIcon backgroundColor="#f6c343" isSelected={providerType === 'rinkeby'} />
+        <span
+          className="network-name-item"
+          style={{
+            color: providerType === 'rinkeby'
+              ? '#ffffff'
+              : '#9b9b9b',
+          }}
+        >
+          {this.context.t('rinkeby')}
+        </span>
+      </DropdownMenuItem>
+      <DropdownMenuItem
+        key="goerli"
+        closeMenu={() => this.props.hideNetworkDropdown()}
+        onClick={() => this.handleClick('goerli')}
+        style={dropdownMenuItemStyle}
+      >
+        {
+          providerType === 'goerli'
+            ? <i className="fa fa-check" />
+            : <div className="network-check__transparent">✓</div>
+        }
+        <NetworkDropdownIcon backgroundColor="#3099f2" isSelected={providerType === 'goerli'} />
+        <span
+          className="network-name-item"
+          style={{
+            color: providerType === 'goerli'
+              ? '#ffffff'
+              : '#9b9b9b',
+          }}
+        >
+          {this.context.t('goerli')}
+        </span>
+      </DropdownMenuItem>
+      <DropdownMenuItem
+        key="default"
+        closeMenu={() => this.props.hideNetworkDropdown()}
+        onClick={() => this.handleClick('localhost')}
+        style={dropdownMenuItemStyle}
+      >
+        {
+          providerType === 'localhost'
+            ? <i className="fa fa-check" />
+            : <div className="network-check__transparent">✓</div>
+        }
+        <NetworkDropdownIcon isSelected={providerType === 'localhost'} innerBorder="1px solid #9b9b9b" />
+        <span
+          className="network-name-item"
+          style={{
+            color: providerType === 'localhost'
+              ? '#ffffff'
+              : '#9b9b9b',
+          }}
+        >
+          {this.context.t('localhost')}
+        </span>
+      </DropdownMenuItem>
+      {this.renderCustomOption(this.props.provider)}
+      {this.renderCommonRpc(rpcListDetail, this.props.provider)}
+      <DropdownMenuItem
+        closeMenu={() => this.props.hideNetworkDropdown()}
+        onClick={() => {
           setNetworksTabAddMode(true)
           this.props.history.push(NETWORKS_ROUTE)
-        },
-        style: dropdownMenuItemStyle,
-      },
-      [
-        activeNetwork === 'custom' ? h('i.fa.fa-check') : h('.network-check__transparent', '✓'),
-        h(NetworkDropdownIcon, {
-          isSelected: activeNetwork === 'custom',
-          innerBorder: '1px solid #9b9b9b',
-        }),
-        h('span.network-name-item', {
-          style: {
-            color: activeNetwork === 'custom' ? '#ffffff' : '#9b9b9b',
-          },
-        }, this.context.t('customRPC')),
-      ]
-    ),
-
-  ])
+        }}
+        style={dropdownMenuItemStyle}
+      >
+        {
+          activeNetwork === 'custom'
+            ? <i className="fa fa-check" />
+            : <div className="network-check__transparent">✓</div>
+        }
+        <NetworkDropdownIcon isSelected={activeNetwork === 'custom'} innerBorder="1px solid #9b9b9b" />
+        <span
+          className="network-name-item"
+          style={{
+            color: activeNetwork === 'custom'
+              ? '#ffffff'
+              : '#9b9b9b',
+          }}
+        >
+          {this.context.t('customRPC')}
+        </span>
+      </DropdownMenuItem>
+    </Dropdown>
+  )
 }
 
 NetworkDropdown.prototype.handleClick = function (newProviderType) {
@@ -332,43 +335,52 @@ NetworkDropdown.prototype.renderCommonRpc = function (rpcListDetail, provider) {
       return null
     } else {
       const chainId = entry.chainId
-      return h(
-        DropdownMenuItem,
-        {
-          key: `common${rpc}`,
-          closeMenu: () => this.props.hideNetworkDropdown(),
-          onClick: () => props.setRpcTarget(rpc, chainId, ticker, nickname),
-          style: {
+      return (
+        <DropdownMenuItem
+          key={`common${rpc}`}
+          closeMenu={() => this.props.hideNetworkDropdown()}
+          onClick={() => props.setRpcTarget(rpc, chainId, ticker, nickname)}
+          style={{
             fontSize: '16px',
             lineHeight: '20px',
             padding: '12px 0',
-          },
-        },
-        [
-          currentRpcTarget ? h('i.fa.fa-check') : h('.network-check__transparent', '✓'),
-          h('i.fa.fa-question-circle.fa-med.menu-icon-circle'),
-          h('span.network-name-item', {
-            style: {
-              color: currentRpcTarget ? '#ffffff' : '#9b9b9b',
-            },
-          }, nickname || rpc),
-          h('i.fa.fa-times.delete',
-            {
-              onClick: (e) => {
-                e.stopPropagation()
-                props.delRpcTarget(rpc)
-              },
-            }),
-        ]
+          }}
+        >
+          {
+            currentRpcTarget
+              ? <i className="fa fa-check" />
+              : <div className="network-check__transparent">✓</div>
+          }
+          <i className="fa fa-question-circle fa-med menu-icon-circle" />
+          <span
+            className="network-name-item"
+            style={{
+              color: currentRpcTarget
+                ? '#ffffff'
+                : '#9b9b9b',
+            }}
+          >
+            {nickname || rpc}
+          </span>
+          <i
+            className="fa fa-times delete"
+            onClick={(e) => {
+              e.stopPropagation()
+              props.delRpcTarget(rpc)
+            }}
+          />
+        </DropdownMenuItem>
       )
     }
   })
 }
 
-NetworkDropdown.prototype.renderCustomOption = function (provider) {
+/**
+ * @return {Component|null}
+ */
+NetworkDropdown.prototype.renderCustomOption = function NetworkDropdown (provider) {
   const { rpcTarget, type, ticker, nickname } = provider
-  const props = this.props
-  const network = props.network
+  const network = this.props.network
 
   if (type !== 'rpc') {
     return null
@@ -380,27 +392,28 @@ NetworkDropdown.prototype.renderCustomOption = function (provider) {
       return null
 
     default:
-      return h(
-        DropdownMenuItem,
-        {
-          key: rpcTarget,
-          onClick: () => props.setRpcTarget(rpcTarget, network, ticker, nickname),
-          closeMenu: () => this.props.hideNetworkDropdown(),
-          style: {
+      return (
+        <DropdownMenuItem
+          key={rpcTarget}
+          onClick={() => this.props.setRpcTarget(rpcTarget, network, ticker, nickname)}
+          closeMenu={() => this.props.hideNetworkDropdown()}
+          style={{
             fontSize: '16px',
             lineHeight: '20px',
             padding: '12px 0',
-          },
-        },
-        [
-          h('i.fa.fa-check'),
-          h('i.fa.fa-question-circle.fa-med.menu-icon-circle'),
-          h('span.network-name-item', {
-            style: {
+          }}
+        >
+          <i className="fa fa-check" />
+          <i className="fa fa-question-circle fa-med menu-icon-circle" />
+          <span
+            className="network-name-item"
+            style={{
               color: '#ffffff',
-            },
-          }, nickname || rpcTarget),
-        ]
+            }}
+          >
+            {nickname || rpcTarget}
+          </span>
+        </DropdownMenuItem>
       )
   }
 }