Convert dev scripts to use JSX (#7555)

development/mock-dev.js

@@ -10,13 +10,13 @@
  * without having to re-open the plugin or even re-build it.
  */
 
+import React from 'react'
 const render = require('react-dom').render
-const h = require('react-hyperscript')
 const Root = require('../ui/app/pages')
 const configureStore = require('../ui/app/store/store')
 const actions = require('../ui/app/store/actions')
 const backGroundConnectionModifiers = require('./backGroundConnectionModifiers')
-const Selector = require('./selector')
+import Selector from './selector'
 const MetamaskController = require('../app/scripts/metamask-controller')
 const firstTimeState = require('../app/scripts/first-time-state')
 const ExtensionPlatform = require('../app/scripts/platforms/extension')
@@ -106,40 +106,38 @@ function startApp () {
   body.appendChild(container)
 
   render(
-    h('.super-dev-container', [
-
-      h('button', {
-        onClick: (ev) => {
+    <div className="super-dev-container">
+      <button
+        onClick={(ev) => {
           ev.preventDefault()
           store.dispatch(actions.update('terms'))
-        },
-        style: {
+        }}
+        style={{
           margin: '19px 19px 0px 19px',
-        },
-      }, 'Reset State'),
-
-      h(Selector, {
-        actions,
-        selectedKey: selectedView,
-        states,
-        store,
-        modifyBackgroundConnection,
-        backGroundConnectionModifiers,
-      }),
-
-      h('#app-content', {
-        style: {
+        }}
+      >
+        Reset State
+      </button>
+      <Selector
+        states={states}
+        selectedKey={selectedView}
+        actions={actions}
+        store={store}
+        modifyBackgroundConnection={modifyBackgroundConnection}
+        backGroundConnectionModifiers={backGroundConnectionModifiers}
+      />
+      <div
+        id="app-content"
+        style={{
           height: '500px',
           width: '360px',
           boxShadow: 'grey 0px 2px 9px',
           margin: '20px',
-        },
-      }, [
-        h(Root, {
-          store: store,
-        }),
-      ]),
-
-    ]
-    ), container)
+        }}
+      >
+        <Root store={store}/>
+      </div>
+    </div>,
+    container,
+  )
 }

development/selector.js

@@ -1,42 +1,49 @@
-const Component = require('react').Component
-const h = require('react-hyperscript')
-const inherits = require('util').inherits
+import PropTypes from 'prop-types'
+import React, {Component} from 'react'
 
-module.exports = NewComponent
+export default class Selector extends Component {
+  state = {}
 
-inherits(NewComponent, Component)
-function NewComponent () {
-  Component.call(this)
+  render () {
+    const {
+      states,
+      selectedKey,
+      actions,
+      store,
+      modifyBackgroundConnection,
+      backGroundConnectionModifiers,
+    } = this.props
+    const selected = this.state.selected || selectedKey
+
+    return (
+      <select
+        style={{ margin: '20px 20px 0px' }}
+        value={selected}
+        onChange={(event) => {
+          const selectedKey = event.target.value
+          const backgroundConnectionModifier = backGroundConnectionModifiers[selectedKey]
+          modifyBackgroundConnection(backgroundConnectionModifier || {})
+          store.dispatch(actions.update(selectedKey))
+          this.setState({ selected: selectedKey })
+        }}
+      >
+        {Object.keys(states).map((stateName, index) => {
+          return (
+            <option key={index} value={stateName}>
+              {stateName}
+            </option>
+          )
+        })}
+      </select>
+    )
+  }
 }
 
-NewComponent.prototype.render = function () {
-  const props = this.props
-  const {
-    states,
-    selectedKey,
-    actions,
-    store,
-    modifyBackgroundConnection,
-    backGroundConnectionModifiers,
-  } = props
-
-  const state = this.state || {}
-  const selected = state.selected || selectedKey
-
-  return h('select', {
-    style: {
-      margin: '20px 20px 0px',
-    },
-    value: selected,
-    onChange: (event) => {
-      const selectedKey = event.target.value
-      const backgroundConnectionModifier = backGroundConnectionModifiers[selectedKey]
-      modifyBackgroundConnection(backgroundConnectionModifier || {})
-      store.dispatch(actions.update(selectedKey))
-      this.setState({ selected: selectedKey })
-    },
-  }, Object.keys(states).map((stateName) => {
-    return h('option', { value: stateName }, stateName)
-  }))
-
+Selector.propTypes = {
+  states: PropTypes.object.isRequired,
+  selectedKey: PropTypes.string.isRequired,
+  actions: PropTypes.object.isRequired,
+  store: PropTypes.object.isRequired,
+  modifyBackgroundConnection: PropTypes.func.isRequired,
+  backGroundConnectionModifiers: PropTypes.object.isRequired,
 }