1
0
mirror of https://github.com/kremalicious/metamask-extension.git synced 2024-12-23 01:39:44 +01:00

Move account panel style into reusable component

The styles that defined the `account-panel` component now belong to the `panel` component, which is now used by the `account-panel` component for its styles.

It accepts an optional `onClick` property that it will fire when clicked!

Planning to use it for the tx-list.
This commit is contained in:
Dan Finlay 2016-05-06 14:24:01 -07:00
parent edf4e2bc5b
commit a9fc4f452f
4 changed files with 98 additions and 63 deletions

View File

@ -58,7 +58,8 @@ AccountDetailScreen.prototype.render = function() {
showFullAddress: true, showFullAddress: true,
identity: identity, identity: identity,
account: account, account: account,
}, []), key: 'accountPanel'
}),
h('div', { h('div', {
style: { style: {

View File

@ -6,6 +6,8 @@ const addressSummary = require('../util').addressSummary
const formatBalance = require('../util').formatBalance const formatBalance = require('../util').formatBalance
const Identicon = require('identicon.js') const Identicon = require('identicon.js')
const Panel = require('./panel')
module.exports = AccountPanel module.exports = AccountPanel
@ -23,49 +25,29 @@ AccountPanel.prototype.render = function() {
var identicon = new Identicon(identity.address, 46).toString() var identicon = new Identicon(identity.address, 46).toString()
var identiconSrc = `data:image/png;base64,${identicon}` var identiconSrc = `data:image/png;base64,${identicon}`
return ( var panelOpts = {
key: `accountPanel${identity.address}`,
h('.identity-panel.flex-row.flex-space-between'+(state.isSelected?'.selected':''), { onClick: (event) => {
style: { if (state.onShowDetail) {
flex: '1 0 auto', state.onShowDetail(identity.address, event)
},
onClick: (event) => state.onShowDetail(identity.address, event),
}, [
// account identicon
h('.identicon-wrapper.flex-column.select-none', [
h('img.identicon', {
src: identiconSrc,
style: {
border: 'none',
borderRadius: '20px',
} }
}), },
h('span.font-small', identity.name), identiconKey: identity.address,
]), identiconLabel: identity.name,
attributes: [
// account address, balance {
h('.identity-data.flex-column.flex-justify-center.flex-grow.select-none', [ key: 'ADDRESS',
value: addressSummary(identity.address)
h('.flex-row.flex-space-between', [ },
h('label.font-small', 'ADDRESS'),
h('span.font-small', addressSummary(identity.address)),
]),
balanceOrFaucetingIndication(account, isFauceting), balanceOrFaucetingIndication(account, isFauceting),
]
}
// outlet for inserting additional stuff return h(Panel, panelOpts,
state.children, !state.onShowDetail ? null : h('.arrow-right.cursor-pointer', [
]),
// navigate to account detail
!state.onShowDetail ? null :
h('.arrow-right.cursor-pointer', [
h('i.fa.fa-chevron-right.fa-lg'), h('i.fa.fa-chevron-right.fa-lg'),
]), ]))
])
)
} }
function balanceOrFaucetingIndication(account, isFauceting) { function balanceOrFaucetingIndication(account, isFauceting) {
@ -73,27 +55,14 @@ function balanceOrFaucetingIndication(account, isFauceting) {
// Temporarily deactivating isFauceting indication // Temporarily deactivating isFauceting indication
// because it shows fauceting for empty restored accounts. // because it shows fauceting for empty restored accounts.
if (/*isFauceting*/ false) { if (/*isFauceting*/ false) {
return {
return h('.flex-row.flex-space-between', [ key: 'Account is auto-funding.',
h('span.font-small', { value: 'Please wait.',
}, [ }
'Account is auto-funding,',
h('br'),
'please wait.'
]),
])
} else { } else {
return {
return h('.flex-row.flex-space-between', [ key: 'BALANCE',
h('label.font-small', 'BALANCE'), value: formatBalance(account.balance)
h('span.font-small', { }
style: {
overflowX: 'hidden',
maxWidth: '136px',
}
}, formatBalance(account.balance)),
])
} }
} }

View File

@ -0,0 +1,63 @@
const inherits = require('util').inherits
const ethUtil = require('ethereumjs-util')
const Component = require('react').Component
const h = require('react-hyperscript')
const Identicon = require('identicon.js')
module.exports = Panel
inherits(Panel, Component)
function Panel() {
Component.call(this)
}
Panel.prototype.render = function() {
var state = this.props
var identity = state.identity || {}
var account = state.account || {}
var isFauceting = state.isFauceting
var identicon = new Identicon(state.identiconKey, 46).toString()
var identiconSrc = `data:image/png;base64,${identicon}`
return (
h('.identity-panel.flex-row.flex-space-between', {
style: {
flex: '1 0 auto',
},
onClick: state.onClick,
}, [
// account identicon
h('.identicon-wrapper.flex-column.select-none', [
h('img.identicon', {
src: identiconSrc,
style: {
border: 'none',
borderRadius: '20px',
}
}),
h('span.font-small', state.identiconLabel),
]),
// account address, balance
h('.identity-data.flex-column.flex-justify-center.flex-grow.select-none', [
state.attributes.map((attr) => {
return h('.flex-row.flex-space-between', {
key: '' + Math.round(Math.random() * 1000000),
}, [
h('label.font-small', attr.key),
h('span.font-small', attr.value),
])
}),
]),
// outlet for inserting additional stuff
state.children,
])
)
}

View File

@ -16,7 +16,9 @@ module.exports = function(transactions, network) {
h('div.font-small', {style: {display: 'inline'}}, 'Transactions'), h('div.font-small', {style: {display: 'inline'}}, 'Transactions'),
transactions.map((transaction) => { transactions.map((transaction) => {
return h('.tx.flex-row.flex-space-around', [ return h('.tx.flex-row.flex-space-around', {
key: `listed-tx-${transaction.hash}`,
}, [
h('a.font-small', h('a.font-small',
{ {
href: explorerLink(transaction.hash, parseInt(network)), href: explorerLink(transaction.hash, parseInt(network)),