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', [
+      <div className="new-account-import-form__json">
-
+        <p>{this.context.t('usedByClients')}</p>
-        h('p', this.context.t('usedByClients')),
+        <a className="warning" href={HELP_LINK} target="_blank">{this.context.t('fileImportFail')}</a>
-        h('a.warning', {
+        <FileInput
-          href: HELP_LINK,
+          readAs="text"
-          target: '_blank',
+          onLoad={this.onLoad.bind(this)}
-        }, this.context.t('fileImportFail')),
+          style={{
-
-        h(FileInput, {
-          readAs: 'text',
-          onLoad: this.onLoad.bind(this),
-          style: {
             padding: '20px 0px 12px 15%',
             fontSize: '15px',
             display: 'flex',
             justifyContent: 'center',
             width: '100%',
-          },
+          }}
-        }),
+        />
-
+        <input
-        h('input.new-account-import-form__input-password', {
+          className="new-account-import-form__input-password"
-          type: 'password',
+          type="password"
-          placeholder: this.context.t('enterPassword'),
+          placeholder={this.context.t('enterPassword')}
-          id: 'json-password-box',
+          id="json-password-box"
-          onKeyPress: this.createKeyringOnEnter.bind(this),
+          onKeyPress={this.createKeyringOnEnter.bind(this)}
-        }),
+        />
-
+        <div className="new-account-create-form__buttons">
-        h('div.new-account-create-form__buttons', {}, [
+          <Button
-
+            type="default"
-          h(Button, {
+            large
-            type: 'default',
+            className="new-account-create-form__button"
-            large: true,
+            onClick={() => this.props.history.push(DEFAULT_ROUTE)}
-            className: 'new-account-create-form__button',
+          >
-            onClick: () => this.props.history.push(DEFAULT_ROUTE),
+            {this.context.t('cancel')}
-          }, [this.context.t('cancel')]),
+          </Button>
-
+          <Button
-          h(Button, {
+            type="secondary"
-            type: 'secondary',
+            large
-            large: true,
+            className="new-account-create-form__button"
-            className: 'new-account-create-form__button',
+            onClick={() => this.createNewKeychain()}
-            onClick: () => this.createNewKeychain(),
+          >
-          }, [this.context.t('import')]),
+            {this.context.t('import')}
-
+          </Button>
-        ]),
+        </div>
-
+        {
-        error ? h('span.error', error) : null,
+          error
-      ])
+            ? <span className="error">{error}</span>
+            : null
+        }
+      </div>
     )
   }