diff options
author | sdtsui <szehungdanieltsui@gmail.com> | 2017-07-31 13:30:55 +0800 |
---|---|---|
committer | sdtsui <szehungdanieltsui@gmail.com> | 2017-07-31 13:30:55 +0800 |
commit | 0c1aea97c74e6ac0c263a654510faca73a2dc949 (patch) | |
tree | 3ceb7cec8cee8231ea4b04e8410adfdcaaf4b14e | |
parent | 7d4927c975554b091d72f6c24e7dd9e824f32548 (diff) | |
download | tangerine-wallet-browser-0c1aea97c74e6ac0c263a654510faca73a2dc949.tar tangerine-wallet-browser-0c1aea97c74e6ac0c263a654510faca73a2dc949.tar.gz tangerine-wallet-browser-0c1aea97c74e6ac0c263a654510faca73a2dc949.tar.bz2 tangerine-wallet-browser-0c1aea97c74e6ac0c263a654510faca73a2dc949.tar.lz tangerine-wallet-browser-0c1aea97c74e6ac0c263a654510faca73a2dc949.tar.xz tangerine-wallet-browser-0c1aea97c74e6ac0c263a654510faca73a2dc949.tar.zst tangerine-wallet-browser-0c1aea97c74e6ac0c263a654510faca73a2dc949.zip |
Isolate wallet-content-display component
-rw-r--r-- | ui/app/components/wallet-content-display.js | 54 | ||||
-rw-r--r-- | ui/app/components/wallet-view.js | 10 |
2 files changed, 62 insertions, 2 deletions
diff --git a/ui/app/components/wallet-content-display.js b/ui/app/components/wallet-content-display.js new file mode 100644 index 000000000..f1db09ec8 --- /dev/null +++ b/ui/app/components/wallet-content-display.js @@ -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 + } + }, [ + ]) + ]) +} + diff --git a/ui/app/components/wallet-view.js b/ui/app/components/wallet-view.js index b61b53447..1c3f3b7f9 100644 --- a/ui/app/components/wallet-view.js +++ b/ui/app/components/wallet-view.js @@ -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, + }) ]) } |