Hook up identicon and buttons to AccountDetailsModal, clean up colors

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

@@ -4,13 +4,15 @@ const inherits = require('util').inherits
 const connect = require('react-redux').connect
 const actions = require('../../actions')
 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),
+    selectedAddress: getSelectedAddress(state),
     selectedIdentity: getSelectedIdentity(state),
   }
 }
@@ -31,18 +33,24 @@ function AccountDetailsModal () {
 
 module.exports = connect(mapStateToProps, mapDispatchToProps)(AccountDetailsModal)
 
-// AccountDetailsModal is currently meant to be rendered inside <Modal />
-// It is the only component in this codebase that does so
-// It utilizes modal styles
 AccountDetailsModal.prototype.render = function () {
-  const { selectedIdentity } = this.props
+  const { selectedIdentity, selectedAddress, network } = this.props
 
   return h('div', {}, [
     h('div.account-details-modal-wrapper', {
     }, [
 
       h('div', {}, [
-        'ICON',
+
+        h(
+          Identicon,
+          {
+            address: selectedIdentity.address,
+            diameter: 64,
+            style: {},
+          },
+        ),
+
       ]),
 
       h('div', {}, [
@@ -64,21 +72,22 @@ AccountDetailsModal.prototype.render = function () {
       ]),
 
       // divider
-      h('div', {
-        style: {
-          width: '100%',
-          height: '1px',
-          margin: '10px 0px',
-          backgroundColor: '#D8D8D8',
-        }
+      h('div.account-details-modal-divider', {
+        style: {}
       }, []),
 
-      h('div', {}, [
-        'View aCcount on etherscan',
+      h('button.btn-clear', {
+        onClick: () => {
+          const url = genAccountLink(selectedIdentity.address, network)
+          global.platform.openWindow({ url })
+        },
+      }, [
+        'View account on Etherscan',
       ]),
 
-      h('div', {}, [
-        'export private key',
+      // Holding on redesign for Export Private Key functionality
+      h('button.btn-clear', {}, [
+        'Export private key',
       ]),
 
     ])

ui/app/components/modals/buy-options-modal.js

@@ -29,9 +29,6 @@ function BuyOptions () {
 
 module.exports = connect(mapStateToProps, mapDispatchToProps)(BuyOptions)
 
-// BuyOptions is currently meant to be rendered inside <Modal />
-// It is the only component in this codebase that does so
-// It utilizes modal styles
 BuyOptions.prototype.render = function () {
   return h('div', {}, [
     h('div.buy-modal-content.transfers-subview', {

ui/app/components/modals/edit-account-name-modal.js

@@ -33,9 +33,6 @@ function EditAccountNameModal () {
 
 module.exports = connect(mapStateToProps, mapDispatchToProps)(EditAccountNameModal)
 
-// EditAccountNameModal is currently meant to be rendered inside <Modal />
-// It is the only component in this codebase that does so
-// It utilizes modal styles
 EditAccountNameModal.prototype.render = function () {
   const { hideModal, saveAccountLabel, identity } = this.props
 

ui/app/components/qr-code.js

@@ -30,22 +30,13 @@ QrCodeView.prototype.render = function () {
   qrImage.addData(address)
   qrImage.make()
   return h('.div.flex-column.flex-center', {
-    // key: 'qr',
     style: {
-      // justifyContent: 'center',
-      // paddingBottom: '45px',
-      // paddingLeft: '45px',
-      // paddingRight: '45px',
-      // alignItems: 'center',
     },
   }, [
     Array.isArray(Qr.message) ? h('.message-container', this.renderMultiMessage()) : h('.qr-header', Qr.message),
 
     this.props.warning ? this.props.warning && h('span.error.flex-center', {
       style: {
-        // textAlign: 'center',
-        // width: '229px',
-        // height: '82px',
       },
     },
     this.props.warning) : null,

ui/app/components/wallet-content-display.js

@@ -46,7 +46,7 @@ WalletContentDisplay.prototype.render = function () {
         marginLeft: '-1.3em',
         height: '6em',
         width: '0.3em',
-        background: '#D8D8D8', // TODO: add to resuable colors
+        background: '#D8D8D8', // $alto
       }
     }, [
     ])

ui/app/css/itcss/components/modal.scss

@@ -174,6 +174,13 @@
   position: relative;
 }
 
+.account-details-modal-divider {
+  width: 100%;
+  height: 1px;
+  margin: 10px 0px;
+  background-color: $alto;
+}
+
 // New Account Modal
 .new-account-modal-wrapper {
   display: flex;
@@ -182,4 +189,4 @@
   align-items: center;
   position: relative;
   border: 1px solid #d8d8d8;
-}
+}

ui/app/css/itcss/components/sections.scss

@@ -460,10 +460,6 @@ textarea.twelve-word-phrase {
 .qr-ellip-address {
   overflow: hidden;
   text-overflow: ellipsis;
-  // width: 5em;
-  // font-size: 14px;
-  // font-family: "Montserrat Light";
-  // margin-left: 5px;
 }
 
 .qr-header {

ui/app/css/itcss/settings/variables.scss

@@ -10,6 +10,7 @@ $red: #f00;
 
 /*
   Colors
+  http://chir.ag/projects/name-that-color
  */
 $white-linen: #faf6f0; // formerly 'faint orange (textfield shades)'
 $rajah: #f5c26d; // formerly 'light orange (button shades)'