Split AccountModalContainer into container and component files (#7549)

Co-Authored-By: Mark Stacey <markjstacey@gmail.com>

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

@@ -1,80 +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 { getSelectedIdentity } = require('../../../selectors/selectors')
-import Identicon from '../../ui/identicon'
-
-function mapStateToProps (state, ownProps) {
-  return {
-    selectedIdentity: ownProps.selectedIdentity || getSelectedIdentity(state),
-  }
-}
-
-function mapDispatchToProps (dispatch) {
-  return {
-    hideModal: () => {
-      dispatch(actions.hideModal())
-    },
-  }
-}
-
-inherits(AccountModalContainer, Component)
-function AccountModalContainer () {
-  Component.call(this)
-}
-
-AccountModalContainer.contextTypes = {
-  t: PropTypes.func,
-}
-
-module.exports = connect(mapStateToProps, mapDispatchToProps)(AccountModalContainer)
-
-
-AccountModalContainer.prototype.render = function () {
-  const {
-    selectedIdentity,
-    showBackButton = false,
-    backButtonAction,
-  } = this.props
-  let { children } = this.props
-
-  if (children.constructor !== Array) {
-    children = [children]
-  }
-
-  return h('div', { style: { borderRadius: '4px' }}, [
-    h('div.account-modal-container', [
-
-      h('div', [
-
-        // Needs a border; requires changes to svg
-        h(Identicon, {
-          address: selectedIdentity.address,
-          diameter: 64,
-          style: {},
-        }),
-
-      ]),
-
-      showBackButton && h('div.account-modal-back', {
-        onClick: backButtonAction,
-      }, [
-
-        h('i.fa.fa-angle-left.fa-lg'),
-
-        h('span.account-modal-back__text', ' ' + this.context.t('back')),
-
-      ]),
-
-      h('div.account-modal-close', {
-        onClick: this.props.hideModal,
-      }),
-
-      ...children,
-
-    ]),
-  ])
-}

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

@@ -0,0 +1,51 @@
+import PropTypes from 'prop-types'
+import React from 'react'
+import Identicon from '../../../ui/identicon'
+
+export default function AccountModalContainer (props, context) {
+  const {
+    selectedIdentity,
+    showBackButton,
+    backButtonAction,
+    hideModal,
+    children,
+  } = props
+
+  return (
+    <div style={{ borderRadius: '4px' }}>
+      <div className="account-modal-container">
+        <div>
+          <Identicon
+            address={selectedIdentity.address}
+            diameter={64}
+          />
+        </div>
+        {showBackButton && (
+          <div className="account-modal-back" onClick={backButtonAction}>
+            <i className="fa fa-angle-left fa-lg" />
+            <span className="account-modal-back__text">{' ' + context.t('back')}</span>
+          </div>
+        )}
+        <div className="account-modal-close" onClick={hideModal} />
+        {children}
+      </div>
+    </div>
+  )
+}
+
+AccountModalContainer.contextTypes = {
+  t: PropTypes.func,
+}
+
+AccountModalContainer.defaultProps = {
+  showBackButton: false,
+  children: null,
+}
+
+AccountModalContainer.propTypes = {
+  selectedIdentity: PropTypes.object.isRequired,
+  showBackButton: PropTypes.bool,
+  backButtonAction: PropTypes.func.isRequired,
+  hideModal: PropTypes.func.isRequired,
+  children: PropTypes.node,
+}

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

@@ -0,0 +1,20 @@
+import { connect } from 'react-redux'
+import { hideModal } from '../../../../store/actions'
+import { getSelectedIdentity } from '../../../../selectors/selectors'
+import AccountModalContainer from './account-modal-container.component'
+
+function mapStateToProps (state, ownProps) {
+  return {
+    selectedIdentity: ownProps.selectedIdentity || getSelectedIdentity(state),
+  }
+}
+
+function mapDispatchToProps (dispatch) {
+  return {
+    hideModal: () => {
+      dispatch(hideModal())
+    },
+  }
+}
+
+export default connect(mapStateToProps, mapDispatchToProps)(AccountModalContainer)

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

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

ui/app/components/app/modals/export-private-key-modal.js

@@ -6,11 +6,11 @@ const inherits = require('util').inherits
 const connect = require('react-redux').connect
 const { stripHexPrefix } = require('ethereumjs-util')
 const actions = require('../../../store/actions')
-const AccountModalContainer = require('./account-modal-container')
 const { getSelectedIdentity } = require('../../../selectors/selectors')
 const ReadOnlyInput = require('../../ui/readonly-input')
 const copyToClipboard = require('copy-to-clipboard')
 const { checksumAddress } = require('../../../helpers/utils/util')
+import AccountModalContainer from './account-modal-container'
 import Button from '../../ui/button'
 
 function mapStateToPropsFactory () {