From b2ebb6032d3f99eb0e9eb90364a0cd95c7775bde Mon Sep 17 00:00:00 2001 From: Dan Finlay Date: Sat, 3 Sep 2016 14:20:27 -0700 Subject: Continuing fiat balance modularization --- ui/app/components/account-eth-balance.js | 81 ++++++-------------------------- ui/app/components/eth-balance.js | 18 ++++--- ui/app/components/fiat-value.js | 80 +++++++++++++++++++++++++++++++ 3 files changed, 106 insertions(+), 73 deletions(-) create mode 100644 ui/app/components/fiat-value.js (limited to 'ui/app/components') diff --git a/ui/app/components/account-eth-balance.js b/ui/app/components/account-eth-balance.js index 8d693685f..1e4437405 100644 --- a/ui/app/components/account-eth-balance.js +++ b/ui/app/components/account-eth-balance.js @@ -1,20 +1,12 @@ const Component = require('react').Component const h = require('react-hyperscript') const inherits = require('util').inherits -const connect = require('react-redux').connect const formatBalance = require('../util').formatBalance const generateBalanceObject = require('../util').generateBalanceObject const Tooltip = require('./tooltip.js') +const FiatValue = require('./fiat-value') -module.exports = connect(mapStateToProps)(EthBalanceComponent) - -function mapStateToProps (state) { - return { - conversionRate: state.metamask.conversionRate, - conversionDate: state.metamask.conversionDate, - currentFiat: state.metamask.currentFiat, - } -} +module.exports = EthBalanceComponent inherits(EthBalanceComponent, Component) function EthBalanceComponent () { @@ -22,11 +14,10 @@ function EthBalanceComponent () { } EthBalanceComponent.prototype.render = function () { - var state = this.props - var style = state.style + var props = this.props + var style = props.style - const value = formatBalance(state.value, 6) - var width = state.width + var width = props.width return ( @@ -38,30 +29,23 @@ EthBalanceComponent.prototype.render = function () { display: 'inline', width: width, }, - }, this.renderBalance(value, state)), + }, this.renderBalance()), ]) - ) } -EthBalanceComponent.prototype.renderBalance = function (value, state) { + +EthBalanceComponent.prototype.renderBalance = function () { + const props = this.props + const value = formatBalance(props.value, 6) + if (value === 'None') return value - var balanceObj = generateBalanceObject(value, state.shorten ? 1 : 3) - var balance, fiatDisplayNumber, fiatTooltipNumber + var balanceObj = generateBalanceObject(value, props.shorten ? 1 : 3) + var balance var splitBalance = value.split(' ') var ethNumber = splitBalance[0] var ethSuffix = splitBalance[1] - - if (state.conversionRate !== 0) { - fiatTooltipNumber = Number(splitBalance[0]) * state.conversionRate - fiatDisplayNumber = fiatTooltipNumber.toFixed(2) - } else { - fiatDisplayNumber = 'N/A' - } - - var fiatSuffix = state.currentFiat - - if (state.shorten) { + if (props.shorten) { balance = balanceObj.shortBalance } else { balance = balanceObj.balance @@ -98,43 +82,8 @@ EthBalanceComponent.prototype.renderBalance = function (value, state) { }, label), ]), ]), - h(Tooltip, { - position: 'bottom', - title: `${fiatTooltipNumber} ${fiatSuffix}`, - }, [ - fiatDisplay(fiatDisplayNumber, fiatSuffix), - ]), + h(FiatValue, { value: props.value }), ]) ) } -function fiatDisplay (fiatDisplayNumber, fiatSuffix) { - if (fiatDisplayNumber !== 'N/A') { - return h('.flex-row', { - style: { - alignItems: 'flex-end', - lineHeight: '13px', - fontFamily: 'Montserrat Light', - textRendering: 'geometricPrecision', - }, - }, [ - h('div', { - style: { - width: '100%', - textAlign: 'right', - fontSize: '12px', - color: '#333333', - }, - }, fiatDisplayNumber), - h('div', { - style: { - color: '#AEAEAE', - marginLeft: '5px', - fontSize: '12px', - }, - }, fiatSuffix), - ]) - } else { - return h('div') - } -} diff --git a/ui/app/components/eth-balance.js b/ui/app/components/eth-balance.js index 498873faa..055cf6dd3 100644 --- a/ui/app/components/eth-balance.js +++ b/ui/app/components/eth-balance.js @@ -4,6 +4,7 @@ const inherits = require('util').inherits const formatBalance = require('../util').formatBalance const generateBalanceObject = require('../util').generateBalanceObject const Tooltip = require('./tooltip.js') +const FiatValue = require('./fiat-value.js') module.exports = EthBalanceComponent @@ -13,11 +14,12 @@ function EthBalanceComponent () { } EthBalanceComponent.prototype.render = function () { - var state = this.props - var style = state.style + var props = this.props + var style = props.style var needsParse = this.props.needsParse !== undefined ? this.props.needsParse : true - const value = formatBalance(state.value, 6, needsParse) - var width = state.width + const value = formatBalance(props.value, 6, needsParse) + var width = props.width + const showFiat = 'showFiat' in props ? props.showFiat : true return ( @@ -35,15 +37,15 @@ EthBalanceComponent.prototype.render = function () { ) } EthBalanceComponent.prototype.renderBalance = function (value) { - var state = this.props + var props = this.props if (value === 'None') return value - var balanceObj = generateBalanceObject(value, state.shorten ? 1 : 3) + var balanceObj = generateBalanceObject(value, props.shorten ? 1 : 3) var balance var splitBalance = value.split(' ') var ethNumber = splitBalance[0] var ethSuffix = splitBalance[1] - if (state.shorten) { + if (props.shorten) { balance = balanceObj.shortBalance } else { balance = balanceObj.balance @@ -77,6 +79,8 @@ EthBalanceComponent.prototype.renderBalance = function (value) { }, }, label), ]), + + fiatValue ? h(FiatValue, { value: props.value }) : null, ]) ) } diff --git a/ui/app/components/fiat-value.js b/ui/app/components/fiat-value.js new file mode 100644 index 000000000..0aa7d0bc5 --- /dev/null +++ b/ui/app/components/fiat-value.js @@ -0,0 +1,80 @@ +const Component = require('react').Component +const h = require('react-hyperscript') +const inherits = require('util').inherits +const connect = require('react-redux').connect +const formatBalance = require('../util').formatBalance +const generateBalanceObject = require('../util').generateBalanceObject +const Tooltip = require('./tooltip.js') + +module.exports = connect(mapStateToProps)(FiatValue) + +function mapStateToProps (state) { + return { + conversionRate: state.metamask.conversionRate, + currentFiat: state.metamask.currentFiat, + } +} + +inherits(FiatValue, Component) +function FiatValue () { + Component.call(this) +} + +FiatValue.prototype.render = function () { + const props = this.props + const value = formatBalance(props.value, 6) + + if (value === 'None') return value + var balanceObj = generateBalanceObject(value, props.shorten ? 1 : 3) + var fiatDisplayNumber, fiatTooltipNumber + var splitBalance = value.split(' ') + + if (props.conversionRate !== 0) { + fiatTooltipNumber = Number(splitBalance[0]) * props.conversionRate + fiatDisplayNumber = fiatTooltipNumber.toFixed(2) + } else { + fiatDisplayNumber = 'N/A' + } + + var fiatSuffix = props.currentFiat + + return ( + h(Tooltip, { + position: 'bottom', + title: `${fiatTooltipNumber} ${fiatSuffix}`, + }, [ + fiatDisplay(fiatDisplayNumber, fiatSuffix), + ]) + ) +} + +function fiatDisplay (fiatDisplayNumber, fiatSuffix) { + if (fiatDisplayNumber !== 'N/A') { + return h('.flex-row', { + style: { + alignItems: 'flex-end', + lineHeight: '13px', + fontFamily: 'Montserrat Light', + textRendering: 'geometricPrecision', + }, + }, [ + h('div', { + style: { + width: '100%', + textAlign: 'right', + fontSize: '12px', + color: '#333333', + }, + }, fiatDisplayNumber), + h('div', { + style: { + color: '#AEAEAE', + marginLeft: '5px', + fontSize: '12px', + }, + }, fiatSuffix), + ]) + } else { + return h('div') + } +} -- cgit