diff --git a/ui/app/pages/create-account/connect-hardware/connect-screen.js b/ui/app/pages/create-account/connect-hardware/connect-screen.js
index b1323b467..3a7d3a3af 100644
--- a/ui/app/pages/create-account/connect-hardware/connect-screen.js
+++ b/ui/app/pages/create-account/connect-hardware/connect-screen.js
@@ -1,206 +1,227 @@
-const { Component } = require('react')
-const PropTypes = require('prop-types')
-const h = require('react-hyperscript')
+import classnames from 'classnames'
+import PropTypes from 'prop-types'
+import React, { Component } from 'react'
 import Button from '../../../components/ui/button'
 
 class ConnectScreen extends Component {
-  constructor (props) {
-    super(props)
-    this.state = {
-      selectedDevice: null,
+  static contextTypes = {
+    t: PropTypes.func,
+  }
+
+  static propTypes = {
+    connectToHardwareWallet: PropTypes.func.isRequired,
+    browserSupported: PropTypes.bool.isRequired,
+  }
+
+  state = {
+    selectedDevice: null,
+  }
+
+  connect = () => {
+    if (this.state.selectedDevice) {
+      this.props.connectToHardwareWallet(this.state.selectedDevice)
+    }
+    return null
+  }
+
+  renderConnectToTrezorButton () {
+    return (
+      <button
+        className={classnames('hw-connect__btn', {
+          'selected': this.state.selectedDevice === 'trezor',
+        })}
+        onClick={_ => this.setState({selectedDevice: 'trezor'})}
+      >
+        <img
+          className="hw-connect__btn__img"
+          src="images/trezor-logo.svg"
+          alt=""
+        />
+      </button>
+    )
+  }
+
+  renderConnectToLedgerButton () {
+    return (
+      <button
+        className={classnames('hw-connect__btn', {
+          'selected': this.state.selectedDevice === 'ledger',
+        })}
+        onClick={_ => this.setState({selectedDevice: 'ledger'})}
+      >
+        <img
+          className="hw-connect__btn__img"
+          src="images/ledger-logo.svg"
+          alt=""
+        />
+      </button>
+    )
+  }
+
+  renderButtons () {
+    return (
+      <div>
+        <div className="hw-connect__btn-wrapper">
+          {this.renderConnectToLedgerButton()}
+          {this.renderConnectToTrezorButton()}
+        </div>
+        <Button
+          type="primary"
+          large
+          className="hw-connect__connect-btn"
+          onClick={this.connect}
+          disabled={!this.state.selectedDevice}
+        >
+          {this.context.t('connect')}
+        </Button>
+      </div>
+    )
+  }
+
+  renderUnsupportedBrowser () {
+    return (
+      <div className="new-account-connect-form unsupported-browser">
+        <div className="hw-connect">
+          <h3 className="hw-connect__title">{this.context.t('browserNotSupported')}</h3>
+          <p className="hw-connect__msg">{this.context.t('chromeRequiredForHardwareWallets')}</p>
+        </div>
+        <Button
+          type="primary"
+          large
+          onClick={() => global.platform.openWindow({
+            url: 'https://google.com/chrome',
+          })}
+        >
+          {this.context.t('downloadGoogleChrome')}
+        </Button>
+      </div>
+    )
+  }
+
+  renderHeader () {
+    return (
+      <div className="hw-connect__header">
+        <h3 className="hw-connect__header__title">{this.context.t('hardwareWallets')}</h3>
+        <p className="hw-connect__header__msg">{this.context.t('hardwareWalletsMsg')}</p>
+      </div>
+    )
+  }
+
+  getAffiliateLinks () {
+    const links = {
+      trezor: `<a class='hw-connect__get-hw__link' href='https://shop.trezor.io/?a=metamask' target='_blank'>Trezor</a>`,
+      ledger: `<a class='hw-connect__get-hw__link' href='https://www.ledger.com/products/ledger-nano-s?r=17c4991a03fa&tracker=MY_TRACKER' target='_blank'>Ledger</a>`,
+    }
+
+    const text = this.context.t('orderOneHere')
+    const response = text.replace('Trezor', links.trezor).replace('Ledger', links.ledger)
+
+    return (
+      <div
+        className="hw-connect__get-hw__msg"
+        dangerouslySetInnerHTML={{__html: response }}
+      />
+    )
+  }
+
+  renderTrezorAffiliateLink () {
+    return (
+      <div className="hw-connect__get-hw">
+        <p className="hw-connect__get-hw__msg">{this.context.t('dontHaveAHardwareWallet')}</p>
+        {this.getAffiliateLinks()}
+      </div>
+    )
+  }
+
+
+  scrollToTutorial = () => {
+    if (this.referenceNode) {
+      this.referenceNode.scrollIntoView({behavior: 'smooth'})
     }
   }
 
-    connect = () => {
-      if (this.state.selectedDevice) {
-        this.props.connectToHardwareWallet(this.state.selectedDevice)
-      }
-      return null
-    }
+  renderLearnMore () {
+    return (
+      <p className="hw-connect__learn-more" onClick={this.scrollToTutorial}>
+        {this.context.t('learnMore')}
+        <img className="hw-connect__learn-more__arrow" src="images/caret-right.svg" alt="" />
+      </p>
+    )
+  }
 
-    renderConnectToTrezorButton () {
-      return h(
-        `button.hw-connect__btn${this.state.selectedDevice === 'trezor' ? '.selected' : ''}`,
-        { onClick: _ => this.setState({selectedDevice: 'trezor'}) },
-        h('img.hw-connect__btn__img', {
-          src: 'images/trezor-logo.svg',
-        })
-      )
-    }
-
-    renderConnectToLedgerButton () {
-      return h(
-        `button.hw-connect__btn${this.state.selectedDevice === 'ledger' ? '.selected' : ''}`,
-        { onClick: _ => this.setState({selectedDevice: 'ledger'}) },
-        h('img.hw-connect__btn__img', {
-          src: 'images/ledger-logo.svg',
-        })
-      )
-    }
-
-    renderButtons () {
-      return (
-        h('div', {}, [
-          h('div.hw-connect__btn-wrapper', {}, [
-            this.renderConnectToLedgerButton(),
-            this.renderConnectToTrezorButton(),
-          ]),
-          h(Button, {
-            type: 'primary',
-            large: true,
-            className: 'hw-connect__connect-btn',
-            onClick: this.connect,
-            disabled: !this.state.selectedDevice,
-          }, this.context.t('connect')),
-        ])
-      )
-    }
-
-    renderUnsupportedBrowser () {
-      return (
-        h('div.new-account-connect-form.unsupported-browser', {}, [
-          h('div.hw-connect', [
-            h('h3.hw-connect__title', {}, this.context.t('browserNotSupported')),
-            h('p.hw-connect__msg', {}, this.context.t('chromeRequiredForHardwareWallets')),
-          ]),
-          h(Button, {
-            type: 'primary',
-            large: true,
-            onClick: () => global.platform.openWindow({
-              url: 'https://google.com/chrome',
-            }),
-          }, this.context.t('downloadGoogleChrome')),
-        ])
-      )
-    }
-
-    renderHeader () {
-      return (
-        h('div.hw-connect__header', {}, [
-          h('h3.hw-connect__header__title', {}, this.context.t('hardwareWallets')),
-          h('p.hw-connect__header__msg', {}, this.context.t('hardwareWalletsMsg')),
-        ])
-      )
-    }
-
-    getAffiliateLinks () {
-      const links = {
-        trezor: `<a class='hw-connect__get-hw__link' href='https://shop.trezor.io/?a=metamask' target='_blank'>Trezor</a>`,
-        ledger: `<a class='hw-connect__get-hw__link' href='https://www.ledger.com/products/ledger-nano-s?r=17c4991a03fa&tracker=MY_TRACKER' target='_blank'>Ledger</a>`,
-      }
-
-      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 }})
-    }
-
-    renderTrezorAffiliateLink () {
-      return h('div.hw-connect__get-hw', {}, [
-        h('p.hw-connect__get-hw__msg', {}, this.context.t('dontHaveAHardwareWallet')),
-        this.getAffiliateLinks(),
-      ])
-    }
-
-
-    scrollToTutorial = () => {
-      if (this.referenceNode) {
-        this.referenceNode.scrollIntoView({behavior: 'smooth'})
-      }
-    }
-
-    renderLearnMore () {
-      return (
-        h('p.hw-connect__learn-more', {
-          onClick: this.scrollToTutorial,
-        }, [
-          this.context.t('learnMore'),
-          h('img.hw-connect__learn-more__arrow', { src: 'images/caret-right.svg'}),
-        ])
-      )
-    }
-
-    renderTutorialSteps () {
-      const steps = [
-        {
-          asset: 'hardware-wallet-step-1',
-          dimensions: {width: '225px', height: '75px'},
-          title: this.context.t('step1HardwareWallet'),
-          message: this.context.t('step1HardwareWalletMsg'),
-        },
-        {
-          asset: 'hardware-wallet-step-2',
-          dimensions: {width: '300px', height: '100px'},
-          title: this.context.t('step2HardwareWallet'),
-          message: this.context.t('step2HardwareWalletMsg'),
-        },
-        {
-          asset: 'hardware-wallet-step-3',
-          dimensions: {width: '120px', height: '90px'},
-          title: this.context.t('step3HardwareWallet'),
-          message: this.context.t('step3HardwareWalletMsg'),
-        },
-      ]
-
-      return h('.hw-tutorial', {
-        ref: node => {
-          this.referenceNode = node
-        },
+  renderTutorialSteps () {
+    const steps = [
+      {
+        asset: 'hardware-wallet-step-1',
+        dimensions: {width: '225px', height: '75px'},
+        title: this.context.t('step1HardwareWallet'),
+        message: this.context.t('step1HardwareWalletMsg'),
       },
-      steps.map((step) => (
-        h('div.hw-connect', {}, [
-          h('h3.hw-connect__title', {}, step.title),
-          h('p.hw-connect__msg', {}, step.message),
-          h('img.hw-connect__step-asset', { src: `images/${step.asset}.svg`, ...step.dimensions }),
-        ])
-      ))
-      )
+      {
+        asset: 'hardware-wallet-step-2',
+        dimensions: {width: '300px', height: '100px'},
+        title: this.context.t('step2HardwareWallet'),
+        message: this.context.t('step2HardwareWalletMsg'),
+      },
+      {
+        asset: 'hardware-wallet-step-3',
+        dimensions: {width: '120px', height: '90px'},
+        title: this.context.t('step3HardwareWallet'),
+        message: this.context.t('step3HardwareWalletMsg'),
+      },
+    ]
+
+    return (
+      <div
+        className="hw-tutorial"
+        ref={node => {
+          this.referenceNode = node
+        }}>
+        {steps.map((step, index) => (
+          <div className="hw-connect" key={index}>
+            <h3 className="hw-connect__title">{step.title}</h3>
+            <p className="hw-connect__msg">{step.message}</p>
+            <img className="hw-connect__step-asset" src={`images/${step.asset}.svg`} {...step.dimensions} alt="" />
+          </div>
+        ))}
+      </div>
+    )
+  }
+
+  renderFooter () {
+    return (
+      <div className="hw-connect__footer">
+        <h3 className="hw-connect__footer__title">{this.context.t('readyToConnect')}</h3>
+        {this.renderButtons()}
+        <p className="hw-connect__footer__msg">
+          {this.context.t('havingTroubleConnecting')}
+          <a className="hw-connect__footer__link" href="https://support.metamask.io/" target="_blank" rel="noopener noreferrer">
+            {this.context.t('getHelp')}
+          </a>
+        </p>
+      </div>
+    )
+  }
+
+  renderConnectScreen () {
+    return (
+      <div className="new-account-connect-form">
+        {this.renderHeader()}
+        {this.renderButtons()}
+        {this.renderTrezorAffiliateLink()}
+        {this.renderLearnMore()}
+        {this.renderTutorialSteps()}
+        {this.renderFooter()}
+      </div>
+    )
+  }
+
+  render () {
+    if (this.props.browserSupported) {
+      return this.renderConnectScreen()
     }
-
-    renderFooter () {
-      return (
-        h('div.hw-connect__footer', {}, [
-          h('h3.hw-connect__footer__title', {}, this.context.t('readyToConnect')),
-          this.renderButtons(),
-          h('p.hw-connect__footer__msg', {}, [
-            this.context.t('havingTroubleConnecting'),
-            h('a.hw-connect__footer__link', {
-              href: 'https://support.metamask.io/',
-              target: '_blank',
-            }, this.context.t('getHelp')),
-          ]),
-        ])
-      )
-    }
-
-    renderConnectScreen () {
-      return (
-        h('div.new-account-connect-form', {}, [
-          this.renderHeader(),
-          this.renderButtons(),
-          this.renderTrezorAffiliateLink(),
-          this.renderLearnMore(),
-          this.renderTutorialSteps(),
-          this.renderFooter(),
-        ])
-      )
-    }
-
-    render () {
-      if (this.props.browserSupported) {
-        return this.renderConnectScreen()
-      }
-      return this.renderUnsupportedBrowser()
-    }
-}
-
-ConnectScreen.propTypes = {
-  connectToHardwareWallet: PropTypes.func.isRequired,
-  browserSupported: PropTypes.bool.isRequired,
-}
-
-ConnectScreen.contextTypes = {
-  t: PropTypes.func,
+    return this.renderUnsupportedBrowser()
+  }
 }
 
 module.exports = ConnectScreen