Refactor account-details-modal

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')