mirror of
https://github.com/kremalicious/metamask-extension.git
synced 2024-12-23 09:52:26 +01:00
Implement new dropdown design, integrate account balances
This commit is contained in:
parent
18ea874a80
commit
66829b7a05
@ -9,6 +9,7 @@ const DropdownMenuItem = require('./dropdown').DropdownMenuItem
|
|||||||
const Identicon = require('../../identicon')
|
const Identicon = require('../../identicon')
|
||||||
const ethUtil = require('ethereumjs-util')
|
const ethUtil = require('ethereumjs-util')
|
||||||
const copyToClipboard = require('copy-to-clipboard')
|
const copyToClipboard = require('copy-to-clipboard')
|
||||||
|
const { formatBalance } = require('../../../util')
|
||||||
|
|
||||||
class AccountDropdowns extends Component {
|
class AccountDropdowns extends Component {
|
||||||
constructor (props) {
|
constructor (props) {
|
||||||
@ -24,12 +25,15 @@ class AccountDropdowns extends Component {
|
|||||||
}
|
}
|
||||||
|
|
||||||
renderAccounts () {
|
renderAccounts () {
|
||||||
const { identities, selected, menuItemStyles, dropdownWrapperStyle, actions } = this.props
|
const { identities, accounts, selected, menuItemStyles, dropdownWrapperStyle, actions } = this.props
|
||||||
|
|
||||||
return Object.keys(identities).map((key, index) => {
|
return Object.keys(identities).map((key, index) => {
|
||||||
const identity = identities[key]
|
const identity = identities[key]
|
||||||
const isSelected = identity.address === selected
|
const isSelected = identity.address === selected
|
||||||
|
|
||||||
|
const balanceValue = accounts[key].balance
|
||||||
|
const formattedBalance = balanceValue ? formatBalance(balanceValue, 6) : '...'
|
||||||
|
|
||||||
return h(
|
return h(
|
||||||
DropdownMenuItem,
|
DropdownMenuItem,
|
||||||
{
|
{
|
||||||
@ -46,45 +50,77 @@ class AccountDropdowns extends Component {
|
|||||||
),
|
),
|
||||||
},
|
},
|
||||||
[
|
[
|
||||||
h('div.flex-row', {}, [
|
h('div.flex-row.flex-center', {}, [
|
||||||
|
|
||||||
h('span', {
|
h('span', {
|
||||||
style: {
|
style: {
|
||||||
flex: '1 1 auto',
|
flex: '1 1 0',
|
||||||
|
minWidth: '20px',
|
||||||
|
minHeight: '30px',
|
||||||
}
|
}
|
||||||
}, isSelected ? h('.check', '✓') : null),
|
}, [
|
||||||
|
h('span', {
|
||||||
|
style: {
|
||||||
|
flex: '1 1 auto',
|
||||||
|
fontSize: '14px',
|
||||||
|
}
|
||||||
|
}, isSelected ? h('i.fa.fa-check') : null),
|
||||||
|
]),
|
||||||
|
|
||||||
h(
|
h(
|
||||||
Identicon,
|
Identicon,
|
||||||
{
|
{
|
||||||
address: identity.address,
|
address: identity.address,
|
||||||
diameter: 32,
|
diameter: 24,
|
||||||
style: {
|
style: {
|
||||||
flex: '1 1 auto',
|
flex: '1 1 auto',
|
||||||
|
marginLeft: '10px',
|
||||||
},
|
},
|
||||||
},
|
},
|
||||||
),
|
),
|
||||||
|
|
||||||
h('span', {
|
h('span.flex-column', {
|
||||||
style: {
|
style: {
|
||||||
flex: '5 5 auto',
|
flex: '10 10 auto',
|
||||||
fontSize: '24px',
|
width: '175px',
|
||||||
maxWidth: '145px',
|
alignItems: 'flex-start',
|
||||||
whiteSpace: 'nowrap',
|
justifyContent: 'center',
|
||||||
overflow: 'hidden',
|
marginLeft: '10px',
|
||||||
textOverflow: 'ellipsis',
|
}
|
||||||
},
|
}, [
|
||||||
}, identity.name || ''),
|
h('span.account-dropdown-name', {
|
||||||
|
style: {
|
||||||
|
fontSize: '18px',
|
||||||
|
maxWidth: '145px',
|
||||||
|
whiteSpace: 'nowrap',
|
||||||
|
overflow: 'hidden',
|
||||||
|
textOverflow: 'ellipsis',
|
||||||
|
},
|
||||||
|
}, identity.name || ''),
|
||||||
|
|
||||||
|
h('span.account-dropdown-balance', {
|
||||||
|
style: {
|
||||||
|
fontSize: '14px',
|
||||||
|
},
|
||||||
|
}, formattedBalance)
|
||||||
|
]),
|
||||||
|
|
||||||
h('span', {
|
h('span', {
|
||||||
style: {
|
style: {
|
||||||
flex: '2 2 auto',
|
flex: '3 3 auto',
|
||||||
fontSize: '18px',
|
|
||||||
},
|
},
|
||||||
onClick: () => {
|
}, [
|
||||||
actions.showNewAccountModal()
|
h('span.account-dropdown-edit-button', {
|
||||||
}
|
style: {
|
||||||
}, 'Edit'),
|
fontSize: '16px',
|
||||||
|
},
|
||||||
|
onClick: () => {
|
||||||
|
actions.showNewAccountModal()
|
||||||
|
},
|
||||||
|
}, [
|
||||||
|
'Edit',
|
||||||
|
])
|
||||||
|
]),
|
||||||
|
|
||||||
])
|
])
|
||||||
]
|
]
|
||||||
@ -93,7 +129,7 @@ class AccountDropdowns extends Component {
|
|||||||
}
|
}
|
||||||
|
|
||||||
renderAccountSelector () {
|
renderAccountSelector () {
|
||||||
const { actions, dropdownWrapperStyle, useCssTransition } = this.props
|
const { actions, dropdownWrapperStyle, useCssTransition, innerStyle } = this.props
|
||||||
const { accountSelectorActive, menuItemStyles } = this.state
|
const { accountSelectorActive, menuItemStyles } = this.state
|
||||||
|
|
||||||
return h(
|
return h(
|
||||||
@ -108,7 +144,7 @@ class AccountDropdowns extends Component {
|
|||||||
maxHeight: '300px',
|
maxHeight: '300px',
|
||||||
width: '300px',
|
width: '300px',
|
||||||
},
|
},
|
||||||
innerStyle: {},
|
innerStyle,
|
||||||
isOpen: accountSelectorActive,
|
isOpen: accountSelectorActive,
|
||||||
onClickOutside: (event) => {
|
onClickOutside: (event) => {
|
||||||
const { classList } = event.target
|
const { classList } = event.target
|
||||||
@ -141,7 +177,7 @@ class AccountDropdowns extends Component {
|
|||||||
},
|
},
|
||||||
),
|
),
|
||||||
h('span', {
|
h('span', {
|
||||||
style: { marginLeft: '20px', fontSize: '24px' },
|
style: { marginLeft: '20px', fontSize: '18px' },
|
||||||
onClick: () => {
|
onClick: () => {
|
||||||
actions.showNewAccountModal()
|
actions.showNewAccountModal()
|
||||||
},
|
},
|
||||||
@ -171,7 +207,7 @@ class AccountDropdowns extends Component {
|
|||||||
h('span', {
|
h('span', {
|
||||||
style: {
|
style: {
|
||||||
marginLeft: '20px',
|
marginLeft: '20px',
|
||||||
fontSize: '24px',
|
fontSize: '18px',
|
||||||
marginBottom: '5px',
|
marginBottom: '5px',
|
||||||
},
|
},
|
||||||
}, 'Import Account'),
|
}, 'Import Account'),
|
||||||
|
@ -18,10 +18,10 @@ const MODALS = {
|
|||||||
h(BuyOptions, {}, []),
|
h(BuyOptions, {}, []),
|
||||||
],
|
],
|
||||||
EDIT_ACCOUNT_NAME: [
|
EDIT_ACCOUNT_NAME: [
|
||||||
h(AccountDetailsModal, {}, []),
|
h(EditAccountNameModal, {}, []),
|
||||||
],
|
],
|
||||||
ACCOUNT_DETAILS: [
|
ACCOUNT_DETAILS: [
|
||||||
h(EditAccountNameModal, {}, []),
|
h(AccountDetailsModal, {}, []),
|
||||||
],
|
],
|
||||||
NEW_ACCOUNT: [
|
NEW_ACCOUNT: [
|
||||||
h(NewAccountModal, {}, []),
|
h(NewAccountModal, {}, []),
|
||||||
|
@ -39,7 +39,7 @@ function WalletView () {
|
|||||||
const noop = () => {}
|
const noop = () => {}
|
||||||
|
|
||||||
WalletView.prototype.render = function () {
|
WalletView.prototype.render = function () {
|
||||||
const { network, responsiveDisplayClassname, style, identities, selectedAddress, selectedAccount } = this.props
|
const { network, responsiveDisplayClassname, style, identities, selectedAddress, selectedAccount, accounts } = this.props
|
||||||
|
|
||||||
// temporary logs + fake extra wallets
|
// temporary logs + fake extra wallets
|
||||||
console.log(selectedAccount)
|
console.log(selectedAccount)
|
||||||
@ -96,11 +96,15 @@ WalletView.prototype.render = function () {
|
|||||||
}
|
}
|
||||||
}, [
|
}, [
|
||||||
h(AccountDropdowns, {
|
h(AccountDropdowns, {
|
||||||
|
accounts,
|
||||||
style: {
|
style: {
|
||||||
position: 'absolute',
|
position: 'absolute',
|
||||||
left: 'calc(50% + 28px + 5.5px)',
|
left: 'calc(50% + 28px + 5.5px)',
|
||||||
top: '14px',
|
top: '14px',
|
||||||
},
|
},
|
||||||
|
innerStyle: {
|
||||||
|
padding: '2px 16px',
|
||||||
|
},
|
||||||
useCssTransition: true,
|
useCssTransition: true,
|
||||||
selected: selectedAddress,
|
selected: selectedAddress,
|
||||||
network,
|
network,
|
||||||
|
14
ui/app/css/itcss/components/account-dropdown.scss
Normal file
14
ui/app/css/itcss/components/account-dropdown.scss
Normal file
@ -0,0 +1,14 @@
|
|||||||
|
.account-dropdown-name {
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
|
.account-dropdown-balance {
|
||||||
|
color: $dusty-gray;
|
||||||
|
}
|
||||||
|
|
||||||
|
.account-dropdown-edit-button {
|
||||||
|
color: $dusty-gray;
|
||||||
|
&:hover {
|
||||||
|
color: $white;
|
||||||
|
}
|
||||||
|
}
|
@ -10,6 +10,8 @@
|
|||||||
|
|
||||||
@import './newui-sections.scss';
|
@import './newui-sections.scss';
|
||||||
|
|
||||||
|
@import './account-dropdown.scss';
|
||||||
|
|
||||||
// Balances
|
// Balances
|
||||||
@import './hero-balance.scss';
|
@import './hero-balance.scss';
|
||||||
|
|
||||||
|
Loading…
Reference in New Issue
Block a user