From 27b75b67b42c232051660c33da976d64a63ff407 Mon Sep 17 00:00:00 2001 From: sdtsui Date: Mon, 21 Aug 2017 12:26:36 -0700 Subject: [PATCH] Hook up identicon and buttons to AccountDetailsModal, clean up colors --- .../modals/account-details-modal.js | 45 +++++++++++-------- ui/app/components/modals/buy-options-modal.js | 3 -- .../modals/edit-account-name-modal.js | 3 -- ui/app/components/qr-code.js | 9 ---- ui/app/components/wallet-content-display.js | 2 +- ui/app/css/itcss/components/modal.scss | 9 +++- ui/app/css/itcss/components/sections.scss | 4 -- ui/app/css/itcss/settings/variables.scss | 1 + 8 files changed, 37 insertions(+), 39 deletions(-) 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)'