2017-07-31 07:30:55 +02:00
|
|
|
const Component = require('react').Component
|
|
|
|
const h = require('react-hyperscript')
|
|
|
|
const inherits = require('util').inherits
|
|
|
|
|
|
|
|
module.exports = WalletContentDisplay
|
|
|
|
|
|
|
|
inherits(WalletContentDisplay, Component)
|
|
|
|
function WalletContentDisplay () {
|
|
|
|
Component.call(this)
|
|
|
|
}
|
|
|
|
|
|
|
|
WalletContentDisplay.prototype.render = function () {
|
2017-08-01 05:22:15 +02:00
|
|
|
const { title, amount, fiatValue, active, style } = this.props
|
2017-07-31 07:30:55 +02:00
|
|
|
|
2017-08-01 05:22:15 +02:00
|
|
|
// TODO: Separate component: wallet-content-account
|
2017-07-31 07:30:55 +02:00
|
|
|
return h('div.flex-column', {
|
|
|
|
style: {
|
2017-08-01 05:22:15 +02:00
|
|
|
marginLeft: '1.3em',
|
2017-07-31 07:30:55 +02:00
|
|
|
alignItems: 'flex-start',
|
2017-08-01 05:22:15 +02:00
|
|
|
...style,
|
2017-08-29 16:50:48 +02:00
|
|
|
},
|
2017-07-31 07:30:55 +02:00
|
|
|
}, [
|
|
|
|
|
|
|
|
h('span', {
|
|
|
|
style: {
|
|
|
|
fontSize: '1.1em',
|
|
|
|
},
|
|
|
|
}, title),
|
|
|
|
|
|
|
|
h('span', {
|
|
|
|
style: {
|
|
|
|
fontSize: '1.8em',
|
2017-08-01 05:22:15 +02:00
|
|
|
margin: '0.4em 0em',
|
2017-07-31 07:30:55 +02:00
|
|
|
},
|
|
|
|
}, amount),
|
|
|
|
|
|
|
|
h('span', {
|
|
|
|
style: {
|
|
|
|
fontSize: '1.3em',
|
|
|
|
},
|
|
|
|
}, fiatValue),
|
|
|
|
|
|
|
|
active && h('div', {
|
|
|
|
style: {
|
|
|
|
position: 'absolute',
|
2017-08-01 05:22:15 +02:00
|
|
|
marginLeft: '-1.3em',
|
2017-07-31 07:30:55 +02:00
|
|
|
height: '6em',
|
2017-08-01 05:22:15 +02:00
|
|
|
width: '0.3em',
|
2017-08-21 21:26:36 +02:00
|
|
|
background: '#D8D8D8', // $alto
|
2017-08-29 16:50:48 +02:00
|
|
|
},
|
2017-07-31 07:30:55 +02:00
|
|
|
}, [
|
2017-08-29 16:50:48 +02:00
|
|
|
]),
|
2017-07-31 07:30:55 +02:00
|
|
|
])
|
2017-08-01 05:22:15 +02:00
|
|
|
|
2017-07-31 07:30:55 +02:00
|
|
|
}
|
|
|
|
|