1
0
mirror of https://github.com/kremalicious/metamask-extension.git synced 2024-12-23 09:52:26 +01:00
metamask-extension/ui/app/components/panel.js
Dan Finlay a9fc4f452f 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.
2016-05-06 14:24:01 -07:00

64 lines
1.5 KiB
JavaScript

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,
])
)
}