mirror of
https://github.com/kremalicious/metamask-extension.git
synced 2024-12-23 09:52:26 +01:00
Hook up identicon and buttons to AccountDetailsModal, clean up colors
This commit is contained in:
parent
877faaf096
commit
27b75b67b4
@ -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',
|
||||
]),
|
||||
|
||||
])
|
||||
|
@ -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', {
|
||||
|
@ -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
|
||||
|
||||
|
@ -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,
|
||||
|
@ -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
|
||||
}
|
||||
}, [
|
||||
])
|
||||
|
@ -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;
|
||||
}
|
||||
}
|
||||
|
@ -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 {
|
||||
|
@ -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)'
|
||||
|
Loading…
Reference in New Issue
Block a user