Convert the RevealSeedPage component to use JSX (#7536)

ui/app/pages/keychains/reveal-seed.js

@@ -1,7 +1,6 @@
-const { Component } = require('react')
+import React, { Component } from 'react'
 const { connect } = require('react-redux')
 const PropTypes = require('prop-types')
-const h = require('react-hyperscript')
 const classnames = require('classnames')
 
 const { requestRevealSeedWords } = require('../../store/actions')
@@ -14,16 +13,12 @@ const PASSWORD_PROMPT_SCREEN = 'PASSWORD_PROMPT_SCREEN'
 const REVEAL_SEED_SCREEN = 'REVEAL_SEED_SCREEN'
 
 class RevealSeedPage extends Component {
-  constructor (props) {
-    super(props)
-
-    this.state = {
+  state = {
     screen: PASSWORD_PROMPT_SCREEN,
     password: '',
     seedWords: null,
     error: null,
   }
-  }
 
   componentDidMount () {
     const passwordBox = document.getElementById('password-box')
@@ -42,15 +37,17 @@ class RevealSeedPage extends Component {
 
   renderWarning () {
     return (
-      h('.page-container__warning-container', [
-        h('img.page-container__warning-icon', {
-          src: 'images/warning.svg',
-        }),
-        h('.page-container__warning-message', [
-          h('.page-container__warning-title', [this.context.t('revealSeedWordsWarningTitle')]),
-          h('div', [this.context.t('revealSeedWordsWarning')]),
-        ]),
-      ])
+      <div className="page-container__warning-container">
+        <img className="page-container__warning-icon" src="images/warning.svg" alt="" />
+        <div className="page-container__warning-message">
+          <div className="page-container__warning-title">
+            {this.context.t('revealSeedWordsWarningTitle')}
+          </div>
+          <div>
+            {this.context.t('revealSeedWordsWarning')}
+          </div>
+        </div>
+      </div>
     )
   }
 
@@ -64,24 +61,25 @@ class RevealSeedPage extends Component {
     const { t } = this.context
 
     return (
-      h('form', {
-        onSubmit: event => this.handleSubmit(event),
-      }, [
-        h('label.input-label', {
-          htmlFor: 'password-box',
-        }, t('enterPasswordContinue')),
-        h('.input-group', [
-          h('input.form-control', {
-            type: 'password',
-            placeholder: t('password'),
-            id: 'password-box',
-            value: this.state.password,
-            onChange: event => this.setState({ password: event.target.value }),
-            className: classnames({ 'form-control--error': this.state.error }),
-          }),
-        ]),
-        this.state.error && h('.reveal-seed__error', this.state.error),
-      ])
+      <form onSubmit={event => this.handleSubmit(event)}>
+        <label className="input-label" htmlFor="password-box">{t('enterPasswordContinue')}</label>
+        <div className="input-group">
+          <input
+            type="password"
+            placeholder={t('password')}
+            id="password-box"
+            value={this.state.password}
+            onChange={event => this.setState({ password: event.target.value })}
+            className={classnames('form-control', { 'form-control--error': this.state.error })}
+          />
+        </div>
+        {
+          this.state.error && (
+            <div className="reveal-seed__error">
+              {this.state.error}
+            </div>
+          )}
+      </form>
     )
   }
 
@@ -89,13 +87,10 @@ class RevealSeedPage extends Component {
     const { t } = this.context
 
     return (
-      h('div', [
-        h('label.reveal-seed__label', t('yourPrivateSeedPhrase')),
-        h(ExportTextContainer, {
-          text: this.state.seedWords,
-          filename: t('metamaskSeedWords'),
-        }),
-      ])
+      <div>
+        <label className="reveal-seed__label">{t('yourPrivateSeedPhrase')}</label>
+        <ExportTextContainer text={this.state.seedWords} filename={t('metamaskSeedWords')} />
+      </div>
     )
   }
 
@@ -107,54 +102,64 @@ class RevealSeedPage extends Component {
 
   renderPasswordPromptFooter () {
     return (
-      h('.page-container__footer', [
-        h('header', [
-          h(Button, {
-            type: 'default',
-            large: true,
-            className: 'page-container__footer-button',
-            onClick: () => this.props.history.push(DEFAULT_ROUTE),
-          }, this.context.t('cancel')),
-          h(Button, {
-            type: 'secondary',
-            large: true,
-            className: 'page-container__footer-button',
-            onClick: event => this.handleSubmit(event),
-            disabled: this.state.password === '',
-          }, this.context.t('next')),
-        ]),
-      ])
+      <div className="page-container__footer">
+        <header>
+          <Button
+            type="default"
+            large
+            className="page-container__footer-button"
+            onClick={() => this.props.history.push(DEFAULT_ROUTE)}
+          >
+            {this.context.t('cancel')}
+          </Button>
+          <Button
+            type="secondary"
+            large
+            className="page-container__footer-button"
+            onClick={event => this.handleSubmit(event)}
+            disabled={this.state.password === ''}
+          >
+            {this.context.t('next')}
+          </Button>
+        </header>
+      </div>
     )
   }
 
   renderRevealSeedFooter () {
     return (
-      h('.page-container__footer', [
-        h(Button, {
-          type: 'default',
-          large: true,
-          className: 'page-container__footer-button',
-          onClick: () => this.props.history.push(DEFAULT_ROUTE),
-        }, this.context.t('close')),
-      ])
+      <div className="page-container__footer">
+        <Button
+          type="default"
+          large
+          className="page-container__footer-button"
+          onClick={() => this.props.history.push(DEFAULT_ROUTE)}
+        >
+          {this.context.t('close')}
+        </Button>
+      </div>
     )
   }
 
   render () {
     return (
-      h('.page-container', [
-        h('.page-container__header', [
-          h('.page-container__title', this.context.t('revealSeedWordsTitle')),
-          h('.page-container__subtitle', this.context.t('revealSeedWordsDescription')),
-        ]),
-        h('.page-container__content', [
-          this.renderWarning(),
-          h('.reveal-seed__content', [
-            this.renderContent(),
-          ]),
-        ]),
-        this.renderFooter(),
-      ])
+      <div className="page-container">
+        <div className="page-container__header">
+          <div className="page-container__title">
+            {this.context.t('revealSeedWordsTitle')}
+          </div>
+          <div className="page-container__subtitle">
+            {this.context.t('revealSeedWordsDescription')}
+          </div>
+        </div>
+        <div className="page-container__content">
+          {this.renderWarning()}
+          <div className="reveal-seed__content">
+            {this.renderContent()}
+          </div>
+        </div>
+        {this.renderFooter()}
+      </div>
     )
   }
 }