diff --git a/ui/app/components/modals/account-details-modal.js b/ui/app/components/modals/account-details-modal.js
index e3d1bb26b..cbddd0421 100644
--- a/ui/app/components/modals/account-details-modal.js
+++ b/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
-// 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',
]),
])
diff --git a/ui/app/components/modals/buy-options-modal.js b/ui/app/components/modals/buy-options-modal.js
index 76e0da4f1..6e0831768 100644
--- a/ui/app/components/modals/buy-options-modal.js
+++ b/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
-// 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', {
diff --git a/ui/app/components/modals/edit-account-name-modal.js b/ui/app/components/modals/edit-account-name-modal.js
index cff8b2a58..ae5ca23d4 100644
--- a/ui/app/components/modals/edit-account-name-modal.js
+++ b/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
-// 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
diff --git a/ui/app/components/qr-code.js b/ui/app/components/qr-code.js
index 914d3aa29..1de5f7352 100644
--- a/ui/app/components/qr-code.js
+++ b/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,
diff --git a/ui/app/components/wallet-content-display.js b/ui/app/components/wallet-content-display.js
index 3baffad69..9c5db82d2 100644
--- a/ui/app/components/wallet-content-display.js
+++ b/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
}
}, [
])
diff --git a/ui/app/css/itcss/components/modal.scss b/ui/app/css/itcss/components/modal.scss
index 119714506..c23d6bc21 100644
--- a/ui/app/css/itcss/components/modal.scss
+++ b/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;
-}
\ No newline at end of file
+}
diff --git a/ui/app/css/itcss/components/sections.scss b/ui/app/css/itcss/components/sections.scss
index 16580b9f3..c49fc617e 100644
--- a/ui/app/css/itcss/components/sections.scss
+++ b/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 {
diff --git a/ui/app/css/itcss/settings/variables.scss b/ui/app/css/itcss/settings/variables.scss
index 829c3d591..c93a38139 100644
--- a/ui/app/css/itcss/settings/variables.scss
+++ b/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)'