Convert account import components to ES6 classes (#7791)

Co-authored-by: Mark Stacey <markjstacey@gmail.com>

ui/app/pages/create-account/import-account/index.js

@@ -1,5 +1,4 @@
 import React, { Component } from 'react'
-import { inherits } from 'util'
 import PropTypes from 'prop-types'
 import Select from 'react-select'
 
@@ -8,86 +7,79 @@ import JsonImportView from './json.js'
 
 import PrivateKeyImportView from './private-key.js'
 
+export default class AccountImportSubview extends Component {
+  static contextTypes = {
+    t: PropTypes.func,
+  }
 
-AccountImportSubview.contextTypes = {
+  state = {}
-  t: PropTypes.func,
-}
 
-export default AccountImportSubview
+  getMenuItemTexts () {
+    return [
+      this.context.t('privateKey'),
+      this.context.t('jsonFile'),
+    ]
+  }
 
+  renderImportView () {
+    const { type } = this.state
+    const menuItems = this.getMenuItemTexts()
+    const current = type || menuItems[0]
 
-inherits(AccountImportSubview, Component)
+    switch (current) {
-function AccountImportSubview () {
+      case this.context.t('privateKey'):
-  Component.call(this)
+        return <PrivateKeyImportView />
-}
+      case this.context.t('jsonFile'):
+        return <JsonImportView />
+      default:
+        return <JsonImportView />
+    }
+  }
 
-AccountImportSubview.prototype.getMenuItemTexts = function () {
+  render () {
-  return [
+    const menuItems = this.getMenuItemTexts()
-    this.context.t('privateKey'),
+    const { type } = this.state
-    this.context.t('jsonFile'),
-  ]
-}
 
-AccountImportSubview.prototype.render = function () {
+    return (
-  const state = this.state || {}
+      <div className="new-account-import-form">
-  const menuItems = this.getMenuItemTexts()
+        <div className="new-account-import-disclaimer">
-  const { type } = state
+          <span>{this.context.t('importAccountMsg')}</span>
-
+          <span
-  return (
+            style={{
-    <div className="new-account-import-form">
+              cursor: 'pointer',
-      <div className="new-account-import-disclaimer">
+              textDecoration: 'underline',
-        <span>{this.context.t('importAccountMsg')}</span>
+            }}
-        <span
+            onClick={() => {
-          style={{
+              global.platform.openWindow({
-            cursor: 'pointer',
+                url: 'https://metamask.zendesk.com/hc/en-us/articles/360015289932',
-            textDecoration: 'underline',
+              })
-          }}
+            }}
-          onClick={() => {
+          >
-            global.platform.openWindow({
+            {this.context.t('here')}
-              url: 'https://metamask.zendesk.com/hc/en-us/articles/360015289932',
+          </span>
-            })
-          }}
-        >
-          {this.context.t('here')}
-        </span>
-      </div>
-      <div className="new-account-import-form__select-section">
-        <div className="new-account-import-form__select-label">
-          {this.context.t('selectType')}
         </div>
-        <Select
+        <div className="new-account-import-form__select-section">
-          className="new-account-import-form__select"
+          <div className="new-account-import-form__select-label">
-          name="import-type-select"
+            {this.context.t('selectType')}
-          clearable={false}
+          </div>
-          value={type || menuItems[0]}
+          <Select
-          options={menuItems.map((type) => {
+            className="new-account-import-form__select"
-            return {
+            name="import-type-select"
-              value: type,
+            clearable={false}
-              label: type,
+            value={type || menuItems[0]}
-            }
+            options={menuItems.map((type) => {
-          })}
+              return {
-          onChange={(opt) => {
+                value: type,
-            this.setState({ type: opt.value })
+                label: type,
-          }}
+              }
-        />
+            })}
+            onChange={(opt) => {
+              this.setState({ type: opt.value })
+            }}
+          />
+        </div>
+        {this.renderImportView()}
       </div>
-      {this.renderImportView()}
+    )
-    </div>
-  )
-}
-
-AccountImportSubview.prototype.renderImportView = function () {
-  const state = this.state || {}
-  const { type } = state
-  const menuItems = this.getMenuItemTexts()
-  const current = type || menuItems[0]
-
-  switch (current) {
-    case this.context.t('privateKey'):
-      return <PrivateKeyImportView />
-    case this.context.t('jsonFile'):
-      return <JsonImportView />
-    default:
-      return <JsonImportView />
   }
 }

ui/app/pages/create-account/import-account/private-key.js

@@ -1,5 +1,4 @@
 import React, { Component } from 'react'
-import { inherits } from 'util'
 import { withRouter } from 'react-router-dom'
 import { compose } from 'recompose'
 import PropTypes from 'prop-types'
@@ -9,9 +8,106 @@ import { DEFAULT_ROUTE } from '../../../helpers/constants/routes'
 import { getMetaMaskAccounts } from '../../../selectors/selectors'
 import Button from '../../../components/ui/button'
 
-PrivateKeyImportView.contextTypes = {
+class PrivateKeyImportView extends Component {
-  t: PropTypes.func,
+  static contextTypes = {
-  metricsEvent: PropTypes.func,
+    t: PropTypes.func,
+    metricsEvent: PropTypes.func,
+  }
+
+  static propTypes = {
+    importNewAccount: PropTypes.func.isRequired,
+    history: PropTypes.object.isRequired,
+    displayWarning: PropTypes.func.isRequired,
+    setSelectedAddress: PropTypes.func.isRequired,
+    firstAddress: PropTypes.string.isRequired,
+    error: PropTypes.node,
+  }
+
+
+  createNewKeychain () {
+    const input = document.getElementById('private-key-box')
+    const privateKey = input.value
+    const { importNewAccount, history, displayWarning, setSelectedAddress, firstAddress } = this.props
+
+    importNewAccount('Private Key', [ privateKey ])
+      .then(({ selectedAddress }) => {
+        if (selectedAddress) {
+          this.context.metricsEvent({
+            eventOpts: {
+              category: 'Accounts',
+              action: 'Import Account',
+              name: 'Imported Account with Private Key',
+            },
+          })
+          history.push(DEFAULT_ROUTE)
+          displayWarning(null)
+        } else {
+          displayWarning('Error importing account.')
+          this.context.metricsEvent({
+            eventOpts: {
+              category: 'Accounts',
+              action: 'Import Account',
+              name: 'Error importing with Private Key',
+            },
+          })
+          setSelectedAddress(firstAddress)
+        }
+      })
+      .catch(err => err && displayWarning(err.message || err))
+  }
+
+  createKeyringOnEnter = (event) => {
+    if (event.key === 'Enter') {
+      event.preventDefault()
+      this.createNewKeychain()
+    }
+  }
+
+  render () {
+    const { error, displayWarning } = this.props
+
+    return (
+      <div className="new-account-import-form__private-key">
+        <span className="new-account-create-form__instruction">
+          {this.context.t('pastePrivateKey')}
+        </span>
+        <div className="new-account-import-form__private-key-password-container">
+          <input
+            className="new-account-import-form__input-password"
+            type="password"
+            id="private-key-box"
+            onKeyPress={e => this.createKeyringOnEnter(e)}
+          />
+        </div>
+        <div className="new-account-import-form__buttons">
+          <Button
+            type="default"
+            large
+            className="new-account-create-form__button"
+            onClick={() => {
+              displayWarning(null)
+              this.props.history.push(DEFAULT_ROUTE)
+            }}
+          >
+            {this.context.t('cancel')}
+          </Button>
+          <Button
+            type="secondary"
+            large
+            className="new-account-create-form__button"
+            onClick={() => this.createNewKeychain()}
+          >
+            {this.context.t('import')}
+          </Button>
+        </div>
+        {
+          error
+            ? <span className="error">{error}</span>
+            : null
+        }
+      </div>
+    )
+  }
 }
 
 export default compose(
@@ -36,94 +132,3 @@ function mapDispatchToProps (dispatch) {
     setSelectedAddress: (address) => dispatch(actions.setSelectedAddress(address)),
   }
 }
-
-inherits(PrivateKeyImportView, Component)
-function PrivateKeyImportView () {
-  this.createKeyringOnEnter = this.createKeyringOnEnter.bind(this)
-  Component.call(this)
-}
-
-PrivateKeyImportView.prototype.render = function PrivateKeyImportView () {
-  const { error, displayWarning } = this.props
-
-  return (
-    <div className="new-account-import-form__private-key">
-      <span className="new-account-create-form__instruction">
-        {this.context.t('pastePrivateKey')}
-      </span>
-      <div className="new-account-import-form__private-key-password-container">
-        <input
-          className="new-account-import-form__input-password"
-          type="password"
-          id="private-key-box"
-          onKeyPress={e => this.createKeyringOnEnter(e)}
-        />
-      </div>
-      <div className="new-account-import-form__buttons">
-        <Button
-          type="default"
-          large
-          className="new-account-create-form__button"
-          onClick={() => {
-            displayWarning(null)
-            this.props.history.push(DEFAULT_ROUTE)
-          }}
-        >
-          {this.context.t('cancel')}
-        </Button>
-        <Button
-          type="secondary"
-          large
-          className="new-account-create-form__button"
-          onClick={() => this.createNewKeychain()}
-        >
-          {this.context.t('import')}
-        </Button>
-      </div>
-      {
-        error
-          ? <span className="error">{error}</span>
-          : null
-      }
-    </div>
-  )
-}
-
-PrivateKeyImportView.prototype.createKeyringOnEnter = function (event) {
-  if (event.key === 'Enter') {
-    event.preventDefault()
-    this.createNewKeychain()
-  }
-}
-
-PrivateKeyImportView.prototype.createNewKeychain = function () {
-  const input = document.getElementById('private-key-box')
-  const privateKey = input.value
-  const { importNewAccount, history, displayWarning, setSelectedAddress, firstAddress } = this.props
-
-  importNewAccount('Private Key', [ privateKey ])
-    .then(({ selectedAddress }) => {
-      if (selectedAddress) {
-        this.context.metricsEvent({
-          eventOpts: {
-            category: 'Accounts',
-            action: 'Import Account',
-            name: 'Imported Account with Private Key',
-          },
-        })
-        history.push(DEFAULT_ROUTE)
-        displayWarning(null)
-      } else {
-        displayWarning('Error importing account.')
-        this.context.metricsEvent({
-          eventOpts: {
-            category: 'Accounts',
-            action: 'Import Account',
-            name: 'Error importing with Private Key',
-          },
-        })
-        setSelectedAddress(firstAddress)
-      }
-    })
-    .catch(err => err && displayWarning(err.message || err))
-}