Convert JsonImportSubview component to use JSX (#7521)

ui/app/pages/create-account/import-account/json.js

@@ -1,6 +1,5 @@
-const Component = require('react').Component
+import React, { Component } from 'react'
 const PropTypes = require('prop-types')
-const h = require('react-hyperscript')
 const { withRouter } = require('react-router-dom')
 const { compose } = require('recompose')
 const connect = require('react-redux').connect
@@ -26,53 +25,51 @@ class JsonImportSubview extends Component {
     const { error } = this.props
 
     return (
-      h('div.new-account-import-form__json', [
-
-        h('p', this.context.t('usedByClients')),
-        h('a.warning', {
-          href: HELP_LINK,
-          target: '_blank',
-        }, this.context.t('fileImportFail')),
-
-        h(FileInput, {
-          readAs: 'text',
-          onLoad: this.onLoad.bind(this),
-          style: {
+      <div className="new-account-import-form__json">
+        <p>{this.context.t('usedByClients')}</p>
+        <a className="warning" href={HELP_LINK} target="_blank">{this.context.t('fileImportFail')}</a>
+        <FileInput
+          readAs="text"
+          onLoad={this.onLoad.bind(this)}
+          style={{
             padding: '20px 0px 12px 15%',
             fontSize: '15px',
             display: 'flex',
             justifyContent: 'center',
             width: '100%',
-          },
-        }),
-
-        h('input.new-account-import-form__input-password', {
-          type: 'password',
-          placeholder: this.context.t('enterPassword'),
-          id: 'json-password-box',
-          onKeyPress: this.createKeyringOnEnter.bind(this),
-        }),
-
-        h('div.new-account-create-form__buttons', {}, [
-
-          h(Button, {
-            type: 'default',
-            large: true,
-            className: 'new-account-create-form__button',
-            onClick: () => this.props.history.push(DEFAULT_ROUTE),
-          }, [this.context.t('cancel')]),
-
-          h(Button, {
-            type: 'secondary',
-            large: true,
-            className: 'new-account-create-form__button',
-            onClick: () => this.createNewKeychain(),
-          }, [this.context.t('import')]),
-
-        ]),
-
-        error ? h('span.error', error) : null,
-      ])
+          }}
+        />
+        <input
+          className="new-account-import-form__input-password"
+          type="password"
+          placeholder={this.context.t('enterPassword')}
+          id="json-password-box"
+          onKeyPress={this.createKeyringOnEnter.bind(this)}
+        />
+        <div className="new-account-create-form__buttons">
+          <Button
+            type="default"
+            large
+            className="new-account-create-form__button"
+            onClick={() => this.props.history.push(DEFAULT_ROUTE)}
+          >
+            {this.context.t('cancel')}
+          </Button>
+          <Button
+            type="secondary"
+            large
+            className="new-account-create-form__button"
+            onClick={() => this.createNewKeychain()}
+          >
+            {this.context.t('import')}
+          </Button>
+        </div>
+        {
+          error
+            ? <span className="error">{error}</span>
+            : null
+        }
+      </div>
     )
   }