diff options
| -rw-r--r-- | ui/app/components/balance-component.js | 89 | ||||
| -rw-r--r-- | ui/app/components/tx-view.js | 49 | ||||
| -rw-r--r-- | ui/app/css/itcss/components/hero-balance.scss | 23 |
3 files changed, 135 insertions, 26 deletions
diff --git a/ui/app/components/balance-component.js b/ui/app/components/balance-component.js new file mode 100644 index 000000000..62024895b --- /dev/null +++ b/ui/app/components/balance-component.js @@ -0,0 +1,89 @@ +const Component = require('react').Component +const h = require('react-hyperscript') +const inherits = require('util').inherits + +const { formatBalance, generateBalanceObject } = require('../util') + +module.exports = BalanceComponent + +inherits(BalanceComponent, Component) +function BalanceComponent () { + Component.call(this) +} + +BalanceComponent.prototype.render = function () { + const props = this.props + const { balanceValue } = props + const needsParse = 'needsParse' in props ? props.needsParse : true + const formattedBalance = balanceValue ? formatBalance(balanceValue, 6, needsParse) : '...' + + return h('div.balance-container', {}, [ + // laptop: 50px 50px + // mobile: 100px 100px + + // TODO: balance icon needs to be passed in + h('img.balance-icon', { + src: '../images/eth_logo.svg', + style: {}, + }), + + this.renderBalance(formattedBalance), + ]) +} + +BalanceComponent.prototype.renderBalance = function (formattedBalance) { + const props = this.props + const { shorten } = props + const showFiat = 'showFiat' in props ? props.showFiat : true + + if (formattedBalance === 'None' || formattedBalance === '...') { + return h('div.flex-column.balance-display', {}, [ + h('div.token-amount', { + style: {}, + }, formattedBalance), + ]) + } + + var balanceObj = generateBalanceObject(formattedBalance, shorten ? 1 : 3) + var balanceValue = shorten ? balanceObj.shortBalance : balanceObj.balance + + var label = balanceObj.label + + // laptop: 5vw? + // phone: 50vw? + return h('div.flex-column.balance-display', {}, [ + h('div.token-amount', { + style: {}, + }, `${balanceValue} ${label}`), + + showFiat ? this.renderFiatValue(formattedBalance) : null, + ]) +} + +BalanceComponent.prototype.renderFiatValue = function (formattedBalance) { + + const props = this.props + const { conversionRate, currentCurrency } = props + + if (formattedBalance === 'None') return formattedBalance + var fiatDisplayNumber + var splitBalance = formattedBalance.split(' ') + + if (conversionRate !== 0) { + fiatDisplayNumber = (Number(splitBalance[0]) * conversionRate).toFixed(2) + } else { + fiatDisplayNumber = 'N/A' + } + + return fiatDisplay(fiatDisplayNumber, currentCurrency) +} + +function fiatDisplay (fiatDisplayNumber, fiatSuffix) { + if (fiatDisplayNumber !== 'N/A') { + return h('div.fiat-amount', { + style: {}, + }, `${fiatDisplayNumber} ${fiatSuffix}`) + } else { + return h('div') + } +} diff --git a/ui/app/components/tx-view.js b/ui/app/components/tx-view.js index 97b9a89f4..d0337fcb1 100644 --- a/ui/app/components/tx-view.js +++ b/ui/app/components/tx-view.js @@ -1,11 +1,15 @@ const Component = require('react').Component const connect = require('react-redux').connect const h = require('react-hyperscript') +const ethUtil = require('ethereumjs-util') const inherits = require('util').inherits const actions = require('../actions') // slideout menu const WalletView = require('./wallet-view') +// balance component +const BalanceComponent = require('./balance-component') + const Identicon = require('./identicon') // const AccountDropdowns = require('./account-dropdowns').AccountDropdowns // const Content = require('./wallet-content-display') @@ -15,13 +19,18 @@ module.exports = connect(mapStateToProps, mapDispatchToProps)(TxView) function mapStateToProps (state) { return { sidebarOpen: state.appState.sidebarOpen, + identities: state.metamask.identities, + accounts: state.metamask.accounts, + address: state.metamask.selectedAddress, + conversionRate: state.metamask.conversionRate, + currentCurrency: state.metamask.currentCurrency, } } function mapDispatchToProps (dispatch) { return { - showSidebar: () => {dispatch(actions.showSidebar())}, - hideSidebar: () => {dispatch(actions.hideSidebar())}, + showSidebar: () => { dispatch(actions.showSidebar()) }, + hideSidebar: () => { dispatch(actions.hideSidebar()) }, } } @@ -40,7 +49,13 @@ function TxView () { } TxView.prototype.render = function () { - const selected = '0x82df11beb942BEeeD58d466fCb0F0791365C7684' // TODO: remove fake address + + var props = this.props + var selected = props.address || Object.keys(props.accounts)[0] + var checksumAddress = selected && ethUtil.toChecksumAddress(selected) + var identity = props.identities[selected] + var account = props.accounts[selected] + const { conversionRate, currentCurrency } = props return h('div.tx-view.flex-column', { style: {}, @@ -62,7 +77,7 @@ TxView.prototype.render = function () { }, }, []), - //account display + // account display h('.identicon-wrapper.select-none', { style: { marginLeft: '0.9em', @@ -75,9 +90,9 @@ TxView.prototype.render = function () { ]), h('span.account-name', { - style: {} + style: {}, }, [ - 'Account 1' + identity.name, ]), ]), @@ -88,25 +103,13 @@ TxView.prototype.render = function () { style: {}, }, [ - // laptop: 50px 50px - // mobile: 100px 100px - h('img.hero-balance-icon', { - src: '../images/eth_logo.svg', - style: {} + h(BalanceComponent, { + balanceValue: account && account.balance, + conversionRate, + currentCurrency, + style: {}, }), - // laptop: 5vw? - // phone: 50vw? - h('div.flex-column.hero-balance-display', {}, [ - h('div.token-amount', { - style: {} - }, '1001.124 ETH'), - - h('div.fiat-amount', { - style: {} - }, '$300,000 USD'), - ]), - // laptop: 10vw? // phone: 75vw? h('div.flex-row.flex-center.hero-balance-buttons', { diff --git a/ui/app/css/itcss/components/hero-balance.scss b/ui/app/css/itcss/components/hero-balance.scss index f7ecf0cdf..f657e4f2c 100644 --- a/ui/app/css/itcss/components/hero-balance.scss +++ b/ui/app/css/itcss/components/hero-balance.scss @@ -20,7 +20,25 @@ $break-large: 576px; margin: 2.8em 0.9em 0.8em 0.9em; } - .hero-balance-display { + .balance-container { + + display: flex; + margin: 0; + justify-content: flex-start; + align-items: center; + + @media screen and (max-width: $break-small) { + flex-direction: column; + } + + @media screen and (min-width: $break-large) { + flex-direction: row; + flex-grow: 3; + } + + } + + .balance-display { @media screen and (max-width: $break-small) { text-align: center; @@ -38,7 +56,6 @@ $break-large: 576px; } @media screen and (min-width: $break-large) { - flex-grow: 3; margin-left: 3%; justify-content: flex-start; align-items: flex-start; @@ -56,7 +73,7 @@ $break-large: 576px; } - .hero-balance-icon { + .balance-icon { border-radius: 25px; width: 45px; height: 45px; |