Abstract account modal.

4 files changed, 96 insertions, 63 deletions

diff --git a/ui/app/components/modals/account-details-modal.js b/ui/app/components/modals/account-details-modal.js
index ec7e4b500..6c2eba7bd 100644
--- a/ui/app/components/modals/account-details-modal.js
+++ b/ui/app/components/modals/account-details-modal.js
@@ -3,25 +3,21 @@ const h = require('react-hyperscript')
 const inherits = require('util').inherits
 const connect = require('react-redux').connect
 const actions = require('../../actions')
+const AccountModalContainer = require('./account-modal-container')
 const { getSelectedIdentity, getSelectedAddress } = require('../../selectors')
 const genAccountLink = require('../../../lib/account-link.js')
-const Identicon = require('../identicon')
 const QrView = require('../qr-code')
 
 function mapStateToProps (state) {
   return {
     network: state.metamask.network,
-    address: state.metamask.selectedAddress,
-    selectedAddress: getSelectedAddress(state),
     selectedIdentity: getSelectedIdentity(state),
   }
 }
 
 function mapDispatchToProps (dispatch) {
   return {
-    hideModal: () => {
-      dispatch(actions.hideModal())
-    },
+    // Is this supposed to be used somewhere?
     showQrView: (selected, identity) => dispatch(actions.showQrView(selected, identity)),
   }
 }
@@ -34,49 +30,28 @@ function AccountDetailsModal () {
 module.exports = connect(mapStateToProps, mapDispatchToProps)(AccountDetailsModal)
 
 // Not yet pixel perfect todos:
-  // fonts of qr-header and close button
+  // fonts of qr-header
 
 AccountDetailsModal.prototype.render = function () {
   const { selectedIdentity, network } = this.props
+  const { name, address } = selectedIdentity
 
-  return h('div', { style: { borderRadius: '4px' }}, [
-    h('div.account-details-modal-wrapper', [
-
-      h('div', [
-
-        // Needs a border; requires changes to svg
-        h(Identicon, {
-          address: selectedIdentity.address,
-          diameter: 64,
-          style: {},
-        }),
-
-      ]),
-
-      h('div.account-details-modal-close', {
-        onClick: this.props.hideModal,
-      }),
-
+  return h(AccountModalContainer, {}, [
       h(QrView, {
         Qr: {
-          message: this.props.selectedIdentity.name,
-          data: this.props.selectedIdentity.address,
+          message: name,
+          data: address,
         },
       }),
 
-      // divider
-      h('div.account-details-modal-divider'),
+      h('div.account-modal-divider'),
 
       h('button.btn-clear', {
-        onClick: () => {
-          const url = genAccountLink(selectedIdentity.address, network)
-          global.platform.openWindow({ url })
-        },
+        onClick: () => global.platform.openWindow({ url: genAccountLink(address, network) }),
       }, [ 'View account on Etherscan' ]),
 
       // Holding on redesign for Export Private Key functionality
       h('button.btn-clear', [ 'Export private key' ]),
-
-    ]),
+      
   ])
 }
diff --git a/ui/app/components/modals/account-modal-container.js b/ui/app/components/modals/account-modal-container.js
new file mode 100644
index 000000000..69650ca15
--- /dev/null
+++ b/ui/app/components/modals/account-modal-container.js
@@ -0,0 +1,55 @@
+const Component = require('react').Component
+const h = require('react-hyperscript')
+const inherits = require('util').inherits
+const connect = require('react-redux').connect
+const actions = require('../../actions')
+const { getSelectedIdentity } = require('../../selectors')
+const Identicon = require('../identicon')
+
+function mapStateToProps (state) {
+  return {
+    selectedIdentity: getSelectedIdentity(state),
+  }
+}
+
+function mapDispatchToProps (dispatch) {
+  return {
+    hideModal: () => {
+      dispatch(actions.hideModal())
+    },
+  }
+}
+
+inherits(AccountModalContainer, Component)
+function AccountModalContainer () {
+  Component.call(this)
+}
+
+module.exports = connect(mapStateToProps, mapDispatchToProps)(AccountModalContainer)
+
+AccountModalContainer.prototype.render = function () {
+  const { selectedIdentity, children } = this.props
+  console.log(`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: {},
+        }),
+
+      ]),
+
+      h('div.account-modal-close', {
+        onClick: this.props.hideModal,
+      }),
+
+      ...children,
+
+    ]),
+  ])
+}
diff --git a/ui/app/components/qr-code.js b/ui/app/components/qr-code.js
index 4257c1a15..dca5c8c47 100644
--- a/ui/app/components/qr-code.js
+++ b/ui/app/components/qr-code.js
@@ -52,7 +52,7 @@ QrCodeView.prototype.render = function () {
           width: '247px',
         },
         value: Qr.data,
-        readonly: true,
+        readOnly: true,
       }),
       // h(CopyButton, {
       //   value: Qr.data,
diff --git a/ui/app/css/itcss/components/modal.scss b/ui/app/css/itcss/components/modal.scss
index c85e61ae2..9f6ce54f5 100644
--- a/ui/app/css/itcss/components/modal.scss
+++ b/ui/app/css/itcss/components/modal.scss
@@ -175,8 +175,8 @@
   font-size: 18px;
 }
 
-// Account Details Modal
-.account-details-modal-wrapper {
+// Account Modal Container
+.account-modal-container {
   display: flex;
   flex-direction: column;
   justify-content: flex-start;
@@ -192,16 +192,38 @@
   }
 }
 
-.account-details-modal-wrapper .qr-header {
+.account-modal-close::after {
+  content: '\00D7';
+  font-size: 40px;
+  color: $dusty-gray;
+  position: absolute;
+  top: 10px;
+  right: 12px;
+  cursor: pointer;
+}
+
+.account-modal-container .identicon {
+  position: relative;
+  left: 0;
+  right: 0;
+  margin: 0 auto;
+  top: -32px;
+  margin-bottom: -32px;
+}
+
+
+// Account Details Modal
+
+.account-modal-container .qr-header {
   margin-top: 9px;
   font-size: 20px;
 }
 
-.account-details-modal-wrapper .qr-wrapper {
+.account-modal-container .qr-wrapper {
   margin-top: 5px;
 }
 
-.account-details-modal-wrapper .ellip-address-wrapper {
+.account-modal-container .ellip-address-wrapper {
   display: flex;
   justify-content: center;
   border: 1px solid $alto;
@@ -211,14 +233,14 @@
   width: 286px;
 }
 
-.account-details-modal-wrapper .qr-ellip-address {
+.account-modal-container .qr-ellip-address {
   width: 254px;
   border: none;
   font-family: 'Montserrat Light';
   font-size: 14px;
 }
 
-.account-details-modal-wrapper .btn-clear {
+.account-modal-container .btn-clear {
   min-height: 28px;
   font-size: 14px;
   border-color: $curious-blue;
@@ -233,32 +255,13 @@
   font-family: 'Montserrat Light';
 }
 
-.account-details-modal-divider {
+.account-modal-divider {
   width: 100%;
   height: 1px;
   margin: 19px 0 8px 0;
   background-color: $alto;
 }
 
-.account-details-modal-wrapper .identicon {
-  position: relative;
-  left: 0;
-  right: 0;
-  margin: 0 auto;
-  top: -32px;
-  margin-bottom: -32px;
-}
-
-.account-details-modal-close::after {
-  content: '\00D7';
-  font-size: 40px;
-  color: $dusty-gray;
-  position: absolute;
-  top: 10px;
-  right: 12px;
-  cursor: pointer;
-}
-
 // New Account Modal
 .new-account-modal-wrapper {
   display: flex;