Refactor account-details-modal (#6751)

Refactor the AccountDetailsModal to follow newer conventions. Changes
include:
- Create a directory for the component with separate files for the
  component, the container, and the entrypoint.
- Use jsx rather than hyperscript

Fixes #6741

ui/app/components/app/modals/account-details-modal.js

@@ -1,107 +0,0 @@
-const Component = require('react').Component
-const PropTypes = require('prop-types')
-const h = require('react-hyperscript')
-const inherits = require('util').inherits
-const connect = require('react-redux').connect
-const actions = require('../../../store/actions')
-const AccountModalContainer = require('./account-modal-container')
-const { getSelectedIdentity, getRpcPrefsForCurrentProvider } = require('../../../selectors/selectors')
-const genAccountLink = require('../../../../lib/account-link.js')
-const QrView = require('../../ui/qr-code')
-const EditableLabel = require('../../ui/editable-label')
-
-import Button from '../../ui/button'
-
-function mapStateToProps (state) {
-  return {
-    network: state.metamask.network,
-    selectedIdentity: getSelectedIdentity(state),
-    keyrings: state.metamask.keyrings,
-    rpcPrefs: getRpcPrefsForCurrentProvider(state),
-  }
-}
-
-function mapDispatchToProps (dispatch) {
-  return {
-    // Is this supposed to be used somewhere?
-    showQrView: (selected, identity) => dispatch(actions.showQrView(selected, identity)),
-    showExportPrivateKeyModal: () => {
-      dispatch(actions.showModal({ name: 'EXPORT_PRIVATE_KEY' }))
-    },
-    hideModal: () => dispatch(actions.hideModal()),
-    setAccountLabel: (address, label) => dispatch(actions.setAccountLabel(address, label)),
-  }
-}
-
-inherits(AccountDetailsModal, Component)
-function AccountDetailsModal () {
-  Component.call(this)
-}
-
-AccountDetailsModal.contextTypes = {
-  t: PropTypes.func,
-}
-
-module.exports = connect(mapStateToProps, mapDispatchToProps)(AccountDetailsModal)
-
-
-// Not yet pixel perfect todos:
-  // fonts of qr-header
-
-AccountDetailsModal.prototype.render = function () {
-  const {
-    selectedIdentity,
-    network,
-    showExportPrivateKeyModal,
-    setAccountLabel,
-    keyrings,
-    rpcPrefs,
-  } = this.props
-  const { name, address } = selectedIdentity
-
-  const keyring = keyrings.find((kr) => {
-    return kr.accounts.includes(address)
-  })
-
-  let exportPrivateKeyFeatureEnabled = true
-  // This feature is disabled for hardware wallets
-  if (keyring && keyring.type.search('Hardware') !== -1) {
-    exportPrivateKeyFeatureEnabled = false
-  }
-
-  return h(AccountModalContainer, {}, [
-      h(EditableLabel, {
-        className: 'account-modal__name',
-        defaultValue: name,
-        onSubmit: label => setAccountLabel(address, label),
-      }),
-
-      h(QrView, {
-        Qr: {
-          data: address,
-          network: network,
-        },
-      }),
-
-      h('div.account-modal-divider'),
-
-      h(Button, {
-        type: 'secondary',
-        className: 'account-modal__button',
-        onClick: () => {
-          global.platform.openWindow({ url: genAccountLink(address, network, rpcPrefs) })
-        },
-      }, (rpcPrefs.blockExplorerUrl
-        ? this.context.t('blockExplorerView', [rpcPrefs.blockExplorerUrl.match(/^https?:\/\/(.+)/)[1]])
-        : this.context.t('viewOnEtherscan'))),
-
-      // Holding on redesign for Export Private Key functionality
-
-      exportPrivateKeyFeatureEnabled ? h(Button, {
-        type: 'secondary',
-        className: 'account-modal__button',
-        onClick: () => showExportPrivateKeyModal(),
-      }, this.context.t('exportPrivateKey')) : null,
-
-  ])
-}

ui/app/components/app/modals/account-details-modal/account-details-modal.component.js

@@ -0,0 +1,87 @@
+import React, { Component} from 'react'
+import PropTypes from 'prop-types'
+import AccountModalContainer from '../account-modal-container'
+import genAccountLink from '../../../../../lib/account-link.js'
+import QrView from '../../../ui/qr-code'
+import EditableLabel from '../../../ui/editable-label'
+import Button from '../../../ui/button'
+
+export default class AccountDetailsModal extends Component {
+  static propTypes = {
+    selectedIdentity: PropTypes.object,
+    network: PropTypes.string,
+    showExportPrivateKeyModal: PropTypes.func,
+    setAccountLabel: PropTypes.func,
+    keyrings: PropTypes.array,
+    rpcPrefs: PropTypes.object,
+  }
+
+  static contextTypes = {
+    t: PropTypes.func,
+  }
+
+  render () {
+    const {
+      selectedIdentity,
+      network,
+      showExportPrivateKeyModal,
+      setAccountLabel,
+      keyrings,
+      rpcPrefs,
+    } = this.props
+    const { name, address } = selectedIdentity
+
+    const keyring = keyrings.find((kr) => {
+      return kr.accounts.includes(address)
+    })
+
+    let exportPrivateKeyFeatureEnabled = true
+    // This feature is disabled for hardware wallets
+    if (keyring && keyring.type.search('Hardware') !== -1) {
+      exportPrivateKeyFeatureEnabled = false
+    }
+
+    return (
+      <AccountModalContainer>
+        <EditableLabel
+          className="account-modal__name"
+          defaultValue={name}
+          onSubmit={label => setAccountLabel(address, label)}
+        />
+
+        <QrView
+          Qr={{
+            data: address,
+            network: network,
+          }}
+        />
+
+        <div className="account-modal-divider"/>
+
+        <Button
+          type="secondary"
+          className="account-modal__button"
+          onClick={() => {
+            global.platform.openWindow({ url: genAccountLink(address, network, rpcPrefs) })
+          }}
+        >
+          {rpcPrefs.blockExplorerUrl
+            ? this.context.t('blockExplorerView', [rpcPrefs.blockExplorerUrl.match(/^https?:\/\/(.+)/)[1]])
+            : this.context.t('viewOnEtherscan')
+          }
+        </Button>
+
+        {exportPrivateKeyFeatureEnabled
+            ? <Button
+                type="secondary"
+                className="account-modal__button"
+                onClick={() => showExportPrivateKeyModal()}
+              >
+                {this.context.t('exportPrivateKey')}
+              </Button>
+            : null
+        }
+      </AccountModalContainer>
+    )
+  }
+}

ui/app/components/app/modals/account-details-modal/account-details-modal.container.js

@@ -0,0 +1,27 @@
+import { connect } from 'react-redux'
+import actions from '../../../../store/actions'
+import { getSelectedIdentity, getRpcPrefsForCurrentProvider } from '../../../../selectors/selectors'
+import AccountDetailsModal from './account-details-modal.component'
+
+const mapStateToProps = (state) => {
+  return {
+    network: state.metamask.network,
+    selectedIdentity: getSelectedIdentity(state),
+    keyrings: state.metamask.keyrings,
+    rpcPrefs: getRpcPrefsForCurrentProvider(state),
+  }
+}
+
+const mapDispatchToProps = (dispatch) => {
+  return {
+    // Is this supposed to be used somewhere?
+    showQrView: (selected, identity) => dispatch(actions.showQrView(selected, identity)),
+    showExportPrivateKeyModal: () => {
+      dispatch(actions.showModal({ name: 'EXPORT_PRIVATE_KEY' }))
+    },
+    hideModal: () => dispatch(actions.hideModal()),
+    setAccountLabel: (address, label) => dispatch(actions.setAccountLabel(address, label)),
+  }
+}
+
+export default connect(mapStateToProps, mapDispatchToProps)(AccountDetailsModal)

ui/app/components/app/modals/account-details-modal/index.js

@@ -0,0 +1 @@
+export { default } from './account-details-modal.container'

ui/app/components/app/modals/modal.js

@@ -12,7 +12,7 @@ const { ENVIRONMENT_TYPE_POPUP } = require('../../../../../app/scripts/lib/enums
 // Modal Components
 const BuyOptions = require('./buy-options-modal')
 const DepositEtherModal = require('./deposit-ether-modal')
-const AccountDetailsModal = require('./account-details-modal')
+import AccountDetailsModal from './account-details-modal'
 const EditAccountNameModal = require('./edit-account-name-modal')
 const ExportPrivateKeyModal = require('./export-private-key-modal')
 const NewAccountModal = require('./new-account-modal')