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', [
+    <div className="super-dev-container">
-
+      <button
-      h('button', {
+        onClick={(ev) => {
-        onClick: (ev) => {
           ev.preventDefault()
           store.dispatch(actions.update('terms'))
-        },
+        }}
-        style: {
+        style={{
           margin: '19px 19px 0px 19px',
-        },
+        }}
-      }, 'Reset State'),
+      >
-
+        Reset State
-      h(Selector, {
+      </button>
-        actions,
+      <Selector
-        selectedKey: selectedView,
+        states={states}
-        states,
+        selectedKey={selectedView}
-        store,
+        actions={actions}
-        modifyBackgroundConnection,
+        store={store}
-        backGroundConnectionModifiers,
+        modifyBackgroundConnection={modifyBackgroundConnection}
-      }),
+        backGroundConnectionModifiers={backGroundConnectionModifiers}
-
+      />
-      h('#app-content', {
+      <div
-        style: {
+        id="app-content"
+        style={{
           height: '500px',
           width: '360px',
           boxShadow: 'grey 0px 2px 9px',
           margin: '20px',
-        },
+        }}
-      }, [
+      >
-        h(Root, {
+        <Root store={store}/>
-          store: store,
+      </div>
-        }),
+    </div>,
-      ]),
+    container,
-
+  )
-    ]
-    ), container)
 }

development/selector.js

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