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