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,30 +7,38 @@ import JsonImportView from './json.js'
 
 import PrivateKeyImportView from './private-key.js'
 
-
-AccountImportSubview.contextTypes = {
+export default class AccountImportSubview extends Component {
+  static contextTypes = {
     t: PropTypes.func,
-}
-
-export default AccountImportSubview
+  }
 
+  state = {}
 
-inherits(AccountImportSubview, Component)
-function AccountImportSubview () {
-  Component.call(this)
-}
-
-AccountImportSubview.prototype.getMenuItemTexts = function () {
+  getMenuItemTexts () {
     return [
       this.context.t('privateKey'),
       this.context.t('jsonFile'),
     ]
-}
+  }
 
-AccountImportSubview.prototype.render = function () {
-  const state = this.state || {}
+  renderImportView () {
+    const { type } = this.state
     const menuItems = this.getMenuItemTexts()
-  const { type } = state
+    const current = type || menuItems[0]
+
+    switch (current) {
+      case this.context.t('privateKey'):
+        return <PrivateKeyImportView />
+      case this.context.t('jsonFile'):
+        return <JsonImportView />
+      default:
+        return <JsonImportView />
+    }
+  }
+
+  render () {
+    const menuItems = this.getMenuItemTexts()
+    const { type } = this.state
 
     return (
       <div className="new-account-import-form">
@@ -74,20 +81,5 @@ AccountImportSubview.prototype.render = function () {
         {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,41 +8,62 @@ import { DEFAULT_ROUTE } from '../../../helpers/constants/routes'
 import { getMetaMaskAccounts } from '../../../selectors/selectors'
 import Button from '../../../components/ui/button'
 
-PrivateKeyImportView.contextTypes = {
+class PrivateKeyImportView extends Component {
+  static contextTypes = {
     t: PropTypes.func,
     metricsEvent: PropTypes.func,
-}
+  }
 
-export default compose(
-  withRouter,
-  connect(mapStateToProps, mapDispatchToProps)
-)(PrivateKeyImportView)
+  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,
+  }
 
 
-function mapStateToProps (state) {
-  return {
-    error: state.appState.warning,
-    firstAddress: Object.keys(getMetaMaskAccounts(state))[0],
-  }
-}
+  createNewKeychain () {
+    const input = document.getElementById('private-key-box')
+    const privateKey = input.value
+    const { importNewAccount, history, displayWarning, setSelectedAddress, firstAddress } = this.props
 
-function mapDispatchToProps (dispatch) {
-  return {
-    importNewAccount: (strategy, [ privateKey ]) => {
-      return dispatch(actions.importNewAccount(strategy, [ privateKey ]))
+    importNewAccount('Private Key', [ privateKey ])
+      .then(({ selectedAddress }) => {
+        if (selectedAddress) {
+          this.context.metricsEvent({
+            eventOpts: {
+              category: 'Accounts',
+              action: 'Import Account',
+              name: 'Imported Account with Private Key',
             },
-    displayWarning: (message) => dispatch(actions.displayWarning(message || null)),
-    setSelectedAddress: (address) => dispatch(actions.setSelectedAddress(address)),
+          })
+          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))
   }
-}
 
-inherits(PrivateKeyImportView, Component)
-function PrivateKeyImportView () {
-  this.createKeyringOnEnter = this.createKeyringOnEnter.bind(this)
-  Component.call(this)
-}
+  createKeyringOnEnter = (event) => {
+    if (event.key === 'Enter') {
+      event.preventDefault()
+      this.createNewKeychain()
+    }
+  }
 
-PrivateKeyImportView.prototype.render = function PrivateKeyImportView () {
+  render () {
     const { error, displayWarning } = this.props
 
     return (
@@ -87,43 +107,28 @@ PrivateKeyImportView.prototype.render = function PrivateKeyImportView () {
         }
       </div>
     )
+  }
 }
 
-PrivateKeyImportView.prototype.createKeyringOnEnter = function (event) {
-  if (event.key === 'Enter') {
-    event.preventDefault()
-    this.createNewKeychain()
+export default compose(
+  withRouter,
+  connect(mapStateToProps, mapDispatchToProps)
+)(PrivateKeyImportView)
+
+
+function mapStateToProps (state) {
+  return {
+    error: state.appState.warning,
+    firstAddress: Object.keys(getMetaMaskAccounts(state))[0],
   }
 }
 
-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',
+function mapDispatchToProps (dispatch) {
+  return {
+    importNewAccount: (strategy, [ privateKey ]) => {
+      return dispatch(actions.importNewAccount(strategy, [ privateKey ]))
     },
-        })
-        setSelectedAddress(firstAddress)
+    displayWarning: (message) => dispatch(actions.displayWarning(message || null)),
+    setSelectedAddress: (address) => dispatch(actions.setSelectedAddress(address)),
   }
-    })
-    .catch(err => err && displayWarning(err.message || err))
 }