Convert ConnectScreen to use JSX (#7525)

ui/app/pages/create-account/connect-hardware/connect-screen.js

@@ -1,14 +1,20 @@
-const { Component } = require('react')
+import classnames from 'classnames'
-const PropTypes = require('prop-types')
+import PropTypes from 'prop-types'
-const h = require('react-hyperscript')
+import React, { Component } from 'react'
 import Button from '../../../components/ui/button'
 
 class ConnectScreen extends Component {
-  constructor (props) {
+  static contextTypes = {
-    super(props)
+    t: PropTypes.func,
-    this.state = {
-      selectedDevice: null,
   }
+
+  static propTypes = {
+    connectToHardwareWallet: PropTypes.func.isRequired,
+    browserSupported: PropTypes.bool.isRequired,
+  }
+
+  state = {
+    selectedDevice: null,
   }
 
   connect = () => {
@@ -19,67 +25,85 @@ class ConnectScreen extends Component {
   }
 
   renderConnectToTrezorButton () {
-      return h(
+    return (
-        `button.hw-connect__btn${this.state.selectedDevice === 'trezor' ? '.selected' : ''}`,
+      <button
-        { onClick: _ => this.setState({selectedDevice: 'trezor'}) },
+        className={classnames('hw-connect__btn', {
-        h('img.hw-connect__btn__img', {
+          'selected': this.state.selectedDevice === 'trezor',
-          src: 'images/trezor-logo.svg',
+        })}
-        })
+        onClick={_ => this.setState({selectedDevice: 'trezor'})}
+      >
+        <img
+          className="hw-connect__btn__img"
+          src="images/trezor-logo.svg"
+          alt=""
+        />
+      </button>
     )
   }
 
   renderConnectToLedgerButton () {
-      return h(
+    return (
-        `button.hw-connect__btn${this.state.selectedDevice === 'ledger' ? '.selected' : ''}`,
+      <button
-        { onClick: _ => this.setState({selectedDevice: 'ledger'}) },
+        className={classnames('hw-connect__btn', {
-        h('img.hw-connect__btn__img', {
+          'selected': this.state.selectedDevice === 'ledger',
-          src: 'images/ledger-logo.svg',
+        })}
-        })
+        onClick={_ => this.setState({selectedDevice: 'ledger'})}
+      >
+        <img
+          className="hw-connect__btn__img"
+          src="images/ledger-logo.svg"
+          alt=""
+        />
+      </button>
     )
   }
 
   renderButtons () {
     return (
-        h('div', {}, [
+      <div>
-          h('div.hw-connect__btn-wrapper', {}, [
+        <div className="hw-connect__btn-wrapper">
-            this.renderConnectToLedgerButton(),
+          {this.renderConnectToLedgerButton()}
-            this.renderConnectToTrezorButton(),
+          {this.renderConnectToTrezorButton()}
-          ]),
+        </div>
-          h(Button, {
+        <Button
-            type: 'primary',
+          type="primary"
-            large: true,
+          large
-            className: 'hw-connect__connect-btn',
+          className="hw-connect__connect-btn"
-            onClick: this.connect,
+          onClick={this.connect}
-            disabled: !this.state.selectedDevice,
+          disabled={!this.state.selectedDevice}
-          }, this.context.t('connect')),
+        >
-        ])
+          {this.context.t('connect')}
+        </Button>
+      </div>
     )
   }
 
   renderUnsupportedBrowser () {
     return (
-        h('div.new-account-connect-form.unsupported-browser', {}, [
+      <div className="new-account-connect-form unsupported-browser">
-          h('div.hw-connect', [
+        <div className="hw-connect">
-            h('h3.hw-connect__title', {}, this.context.t('browserNotSupported')),
+          <h3 className="hw-connect__title">{this.context.t('browserNotSupported')}</h3>
-            h('p.hw-connect__msg', {}, this.context.t('chromeRequiredForHardwareWallets')),
+          <p className="hw-connect__msg">{this.context.t('chromeRequiredForHardwareWallets')}</p>
-          ]),
+        </div>
-          h(Button, {
+        <Button
-            type: 'primary',
+          type="primary"
-            large: true,
+          large
-            onClick: () => global.platform.openWindow({
+          onClick={() => global.platform.openWindow({
             url: 'https://google.com/chrome',
-            }),
+          })}
-          }, this.context.t('downloadGoogleChrome')),
+        >
-        ])
+          {this.context.t('downloadGoogleChrome')}
+        </Button>
+      </div>
     )
   }
 
   renderHeader () {
     return (
-        h('div.hw-connect__header', {}, [
+      <div className="hw-connect__header">
-          h('h3.hw-connect__header__title', {}, this.context.t('hardwareWallets')),
+        <h3 className="hw-connect__header__title">{this.context.t('hardwareWallets')}</h3>
-          h('p.hw-connect__header__msg', {}, this.context.t('hardwareWalletsMsg')),
+        <p className="hw-connect__header__msg">{this.context.t('hardwareWalletsMsg')}</p>
-        ])
+      </div>
     )
   }
 
@@ -92,14 +116,21 @@ class ConnectScreen extends Component {
     const text = this.context.t('orderOneHere')
     const response = text.replace('Trezor', links.trezor).replace('Ledger', links.ledger)
 
-      return h('div.hw-connect__get-hw__msg', { dangerouslySetInnerHTML: {__html: response }})
+    return (
+      <div
+        className="hw-connect__get-hw__msg"
+        dangerouslySetInnerHTML={{__html: response }}
+      />
+    )
   }
 
   renderTrezorAffiliateLink () {
-      return h('div.hw-connect__get-hw', {}, [
+    return (
-        h('p.hw-connect__get-hw__msg', {}, this.context.t('dontHaveAHardwareWallet')),
+      <div className="hw-connect__get-hw">
-        this.getAffiliateLinks(),
+        <p className="hw-connect__get-hw__msg">{this.context.t('dontHaveAHardwareWallet')}</p>
-      ])
+        {this.getAffiliateLinks()}
+      </div>
+    )
   }
 
 
@@ -111,12 +142,10 @@ class ConnectScreen extends Component {
 
   renderLearnMore () {
     return (
-        h('p.hw-connect__learn-more', {
+      <p className="hw-connect__learn-more" onClick={this.scrollToTutorial}>
-          onClick: this.scrollToTutorial,
+        {this.context.t('learnMore')}
-        }, [
+        <img className="hw-connect__learn-more__arrow" src="images/caret-right.svg" alt="" />
-          this.context.t('learnMore'),
+      </p>
-          h('img.hw-connect__learn-more__arrow', { src: 'images/caret-right.svg'}),
-        ])
     )
   }
 
@@ -142,47 +171,48 @@ class ConnectScreen extends Component {
       },
     ]
 
-      return h('.hw-tutorial', {
+    return (
-        ref: node => {
+      <div
+        className="hw-tutorial"
+        ref={node => {
           this.referenceNode = node
-        },
+        }}>
-      },
+        {steps.map((step, index) => (
-      steps.map((step) => (
+          <div className="hw-connect" key={index}>
-        h('div.hw-connect', {}, [
+            <h3 className="hw-connect__title">{step.title}</h3>
-          h('h3.hw-connect__title', {}, step.title),
+            <p className="hw-connect__msg">{step.message}</p>
-          h('p.hw-connect__msg', {}, step.message),
+            <img className="hw-connect__step-asset" src={`images/${step.asset}.svg`} {...step.dimensions} alt="" />
-          h('img.hw-connect__step-asset', { src: `images/${step.asset}.svg`, ...step.dimensions }),
+          </div>
-        ])
+        ))}
-      ))
+      </div>
     )
   }
 
   renderFooter () {
     return (
-        h('div.hw-connect__footer', {}, [
+      <div className="hw-connect__footer">
-          h('h3.hw-connect__footer__title', {}, this.context.t('readyToConnect')),
+        <h3 className="hw-connect__footer__title">{this.context.t('readyToConnect')}</h3>
-          this.renderButtons(),
+        {this.renderButtons()}
-          h('p.hw-connect__footer__msg', {}, [
+        <p className="hw-connect__footer__msg">
-            this.context.t('havingTroubleConnecting'),
+          {this.context.t('havingTroubleConnecting')}
-            h('a.hw-connect__footer__link', {
+          <a className="hw-connect__footer__link" href="https://support.metamask.io/" target="_blank" rel="noopener noreferrer">
-              href: 'https://support.metamask.io/',
+            {this.context.t('getHelp')}
-              target: '_blank',
+          </a>
-            }, this.context.t('getHelp')),
+        </p>
-          ]),
+      </div>
-        ])
     )
   }
 
   renderConnectScreen () {
     return (
-        h('div.new-account-connect-form', {}, [
+      <div className="new-account-connect-form">
-          this.renderHeader(),
+        {this.renderHeader()}
-          this.renderButtons(),
+        {this.renderButtons()}
-          this.renderTrezorAffiliateLink(),
+        {this.renderTrezorAffiliateLink()}
-          this.renderLearnMore(),
+        {this.renderLearnMore()}
-          this.renderTutorialSteps(),
+        {this.renderTutorialSteps()}
-          this.renderFooter(),
+        {this.renderFooter()}
-        ])
+      </div>
     )
   }
 
@@ -194,14 +224,5 @@ class ConnectScreen extends Component {
   }
 }
 
-ConnectScreen.propTypes = {
-  connectToHardwareWallet: PropTypes.func.isRequired,
-  browserSupported: PropTypes.bool.isRequired,
-}
-
-ConnectScreen.contextTypes = {
-  t: PropTypes.func,
-}
-
 module.exports = ConnectScreen