mirror of
https://github.com/kremalicious/metamask-extension.git
synced 2024-12-23 01:39:44 +01:00
Isolate wallet-content-display component
This commit is contained in:
parent
7d4927c975
commit
0c1aea97c7
54
ui/app/components/wallet-content-display.js
Normal file
54
ui/app/components/wallet-content-display.js
Normal file
@ -0,0 +1,54 @@
|
||||
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 () {
|
||||
const { title, amount, fiatValue, active } = this.props
|
||||
|
||||
return h('div.flex-column', {
|
||||
style: {
|
||||
marginLeft: '35px',
|
||||
marginTop: '15px',
|
||||
alignItems: 'flex-start',
|
||||
}
|
||||
}, [
|
||||
|
||||
h('span', {
|
||||
style: {
|
||||
fontSize: '1.1em',
|
||||
},
|
||||
}, title),
|
||||
|
||||
h('span', {
|
||||
style: {
|
||||
fontSize: '1.8em',
|
||||
margin: '10px 0px',
|
||||
},
|
||||
}, amount),
|
||||
|
||||
h('span', {
|
||||
style: {
|
||||
fontSize: '1.3em',
|
||||
},
|
||||
}, fiatValue),
|
||||
|
||||
active && h('div', {
|
||||
style: {
|
||||
position: 'absolute',
|
||||
marginLeft: '-35px',
|
||||
height: '6em',
|
||||
width: '4px',
|
||||
background: '#D8D8D8', // TODO: add to resuable colors
|
||||
}
|
||||
}, [
|
||||
])
|
||||
])
|
||||
}
|
||||
|
@ -4,6 +4,7 @@ const h = require('react-hyperscript')
|
||||
const inherits = require('util').inherits
|
||||
const Identicon = require('./identicon')
|
||||
const AccountDropdowns = require('./account-dropdowns').AccountDropdowns
|
||||
const Content = require('./wallet-content-display')
|
||||
|
||||
module.exports = connect(mapStateToProps)(WalletView)
|
||||
|
||||
@ -74,7 +75,7 @@ WalletView.prototype.render = function () {
|
||||
|
||||
]),
|
||||
|
||||
// TODO: Separate component: wallet contents
|
||||
// TODO: Separate component: wallet-content-account
|
||||
h('div.flex-column', {
|
||||
style: {
|
||||
marginLeft: '35px',
|
||||
@ -160,8 +161,13 @@ WalletView.prototype.render = function () {
|
||||
}, 'SEND'),
|
||||
]),
|
||||
|
||||
|
||||
// Wallet contents
|
||||
h(Content, {
|
||||
title: "Total Token Balance",
|
||||
amount: "45.439 ETH",
|
||||
fiatValue: "$13,000.00 USD",
|
||||
active: false,
|
||||
})
|
||||
|
||||
])
|
||||
}
|
||||
|
Loading…
Reference in New Issue
Block a user