Convert NetworkDropdownIcon component to JSX (#7511)

Co-Authored-By: Mark Stacey <markjstacey@gmail.com>

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

@@ -1,47 +1,54 @@
-const inherits = require('util').inherits
-const Component = require('react').Component
-const h = require('react-hyperscript')
+import PropTypes from 'prop-types'
+import React from 'react'
 
-
-inherits(NetworkDropdownIcon, Component)
-module.exports = NetworkDropdownIcon
-
-function NetworkDropdownIcon () {
-  Component.call(this)
-}
-
-NetworkDropdownIcon.prototype.render = function () {
+function NetworkDropdownIcon (props) {
   const {
     backgroundColor,
     isSelected,
-    innerBorder = 'none',
-    diameter = '12',
+    innerBorder,
+    diameter,
     loading,
-  } = this.props
+  } = props
 
   return loading
-    ? h('span.pointer.network-indicator', {
-      style: {
-        display: 'flex',
-        alignItems: 'center',
-        flexDirection: 'row',
-      },
-    }, [
-      h('img', {
-        style: {
-          width: '27px',
-        },
-        src: 'images/loading.svg',
-      }),
-    ])
-    : h(`.menu-icon-circle${isSelected ? '--active' : ''}`, {},
-      h('div', {
-        style: {
+    ? (
+      <span
+        className="pointer network-indicator"
+        style={{
+          display: 'flex',
+          alignItems: 'center',
+          flexDirection: 'row',
+        }}
+      >
+        <img alt="" style={{ width: '27px' }} src="images/loading.svg" />
+      </span>
+    )
+    : (
+      <div className={`menu-icon-circle${isSelected ? '--active' : ''}`}>
+        <div style={{
           background: backgroundColor,
           border: innerBorder,
           height: `${diameter}px`,
           width: `${diameter}px`,
-        },
-      })
+        }} />
+      </div>
     )
 }
+
+NetworkDropdownIcon.defaultProps = {
+  backgroundColor: undefined,
+  loading: false,
+  innerBorder: 'none',
+  diameter: '12',
+  isSelected: false,
+}
+
+NetworkDropdownIcon.propTypes = {
+  backgroundColor: PropTypes.string,
+  loading: PropTypes.boolean,
+  innerBorder: PropTypes.string,
+  diameter: PropTypes.string,
+  isSelected: PropTypes.bool,
+}
+
+module.exports = NetworkDropdownIcon

ui/app/components/app/dropdowns/tests/network-dropdown-icon.test.js

@@ -7,12 +7,14 @@ describe('Network Dropdown Icon', () => {
   let wrapper
 
   beforeEach(() => {
-    wrapper = shallow(<NetworkDropdownIcon
-      backgroundColor="red"
-      isSelected={false}
-      innerBorder="none"
-      diameter="12"
-    />)
+    wrapper = shallow((
+      <NetworkDropdownIcon
+        backgroundColor="red"
+        isSelected={false}
+        innerBorder="none"
+        diameter="12"
+      />
+    ))
   })
 
   it('adds style props based on props', () => {