From 009784c79b5c0ebfd9dbe9536870c55e906e914d Mon Sep 17 00:00:00 2001 From: Kevin Serrano Date: Tue, 16 Aug 2016 10:34:29 -0700 Subject: Divided eth components for tx and account detail. --- ui/app/components/account-eth-balance.js | 124 +++++++++++++++++++++++++++++++ 1 file changed, 124 insertions(+) create mode 100644 ui/app/components/account-eth-balance.js (limited to 'ui/app/components/account-eth-balance.js') diff --git a/ui/app/components/account-eth-balance.js b/ui/app/components/account-eth-balance.js new file mode 100644 index 000000000..b748ea2ea --- /dev/null +++ b/ui/app/components/account-eth-balance.js @@ -0,0 +1,124 @@ +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)(EthBalanceComponent) + +function mapStateToProps (state) { + return { + conversionRate: state.metamask.conversionRate, + conversionDate: state.metamask.conversionDate, + currentFiat: state.metamask.currentFiat, + } +} + +inherits(EthBalanceComponent, Component) +function EthBalanceComponent () { + Component.call(this) +} + +EthBalanceComponent.prototype.render = function () { + var state = this.props + var style = state.style + + const value = formatBalance(state.value, 6) + var width = state.width + + return ( + + h('.ether-balance', { + style: style, + }, [ + h('.ether-balance-amount', { + style: { + display: 'inline', + width: width, + }, + }, this.renderBalance(value, state)), + ]) + + ) +} +EthBalanceComponent.prototype.renderBalance = function (value, state) { + if (value === 'None') return value + var balanceObj = generateBalanceObject(value, state.shorten ? 1 : 3) + var balance + var splitBalance = value.split(' ') + var ethNumber = splitBalance[0] + var ethSuffix = splitBalance[1] + var fiatNumber = Number(splitBalance[0]) * state.conversionRate + var fiatSuffix = state.currentFiat + + if (state.shorten) { + balance = balanceObj.shortBalance + } else { + balance = balanceObj.balance + } + + var label = balanceObj.label + + return ( + h('.flex-column', [ + h(Tooltip, { + position: 'bottom', + title: `${balance} ${label}`, + }, [ + h('.flex-row', { + style: { + alignItems: 'flex-end', + lineHeight: '13px', + fontFamily: 'Montserrat Light', + textRendering: 'geometricPrecision', + marginBottom: '5px', + }, + }, [ + h('div', { + style: { + width: '100%', + textAlign: 'right', + }, + }, balance), + h('div', { + style: { + color: '#AEAEAE', + marginLeft: '5px', + }, + }, label), + ]), + ]), + h(Tooltip, { + position: 'bottom', + title: `${fiatNumber} ${fiatSuffix}`, + }, [ + 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', + }, + }, `= ${fiatNumber.toFixed(2)}`), + h('div', { + style: { + color: '#AEAEAE', + marginLeft: '5px', + fontSize: '12px', + }, + }, fiatSuffix), + ]), + ]), + ]) + ) +} -- cgit From 7d1b2db87e9d66735d0de04dc5e8c53e72e8431b Mon Sep 17 00:00:00 2001 From: Kevin Serrano Date: Tue, 16 Aug 2016 10:48:31 -0700 Subject: linting and ignoring. --- ui/app/components/account-eth-balance.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) (limited to 'ui/app/components/account-eth-balance.js') diff --git a/ui/app/components/account-eth-balance.js b/ui/app/components/account-eth-balance.js index b748ea2ea..4cdab235a 100644 --- a/ui/app/components/account-eth-balance.js +++ b/ui/app/components/account-eth-balance.js @@ -65,7 +65,7 @@ EthBalanceComponent.prototype.renderBalance = function (value, state) { h('.flex-column', [ h(Tooltip, { position: 'bottom', - title: `${balance} ${label}`, + title: `${ethNumber} ${ethSuffix}`, }, [ h('.flex-row', { style: { -- cgit From 6041ba1ed24b16ec2614c954b05ab03488301d72 Mon Sep 17 00:00:00 2001 From: Kevin Serrano Date: Tue, 16 Aug 2016 14:07:06 -0700 Subject: Add fallback to API failure. --- ui/app/components/account-eth-balance.js | 6 +++++- 1 file changed, 5 insertions(+), 1 deletion(-) (limited to 'ui/app/components/account-eth-balance.js') diff --git a/ui/app/components/account-eth-balance.js b/ui/app/components/account-eth-balance.js index 4cdab235a..260444688 100644 --- a/ui/app/components/account-eth-balance.js +++ b/ui/app/components/account-eth-balance.js @@ -59,6 +59,10 @@ EthBalanceComponent.prototype.renderBalance = function (value, state) { balance = balanceObj.balance } + if (fiatNumber !== 'N/A') { + fiatNumber = fiatNumber.toFixed(2) + } + var label = balanceObj.label return ( @@ -109,7 +113,7 @@ EthBalanceComponent.prototype.renderBalance = function (value, state) { fontSize: '12px', color: '#333333', }, - }, `= ${fiatNumber.toFixed(2)}`), + }, `= ${fiatNumber}`), h('div', { style: { color: '#AEAEAE', -- cgit From 0b052e94ccd718afe8b0a148085875409e30eb76 Mon Sep 17 00:00:00 2001 From: Kevin Serrano Date: Tue, 16 Aug 2016 14:49:21 -0700 Subject: Hide conversions when API fails. --- ui/app/components/account-eth-balance.js | 71 +++++++++++++++++++------------- 1 file changed, 42 insertions(+), 29 deletions(-) (limited to 'ui/app/components/account-eth-balance.js') diff --git a/ui/app/components/account-eth-balance.js b/ui/app/components/account-eth-balance.js index 260444688..ad6033716 100644 --- a/ui/app/components/account-eth-balance.js +++ b/ui/app/components/account-eth-balance.js @@ -44,13 +44,22 @@ EthBalanceComponent.prototype.render = function () { ) } EthBalanceComponent.prototype.renderBalance = function (value, state) { + console.log("THIS IS VALUE") + console.log(value) + console.log(state.conversionRate) if (value === 'None') return value var balanceObj = generateBalanceObject(value, state.shorten ? 1 : 3) var balance var splitBalance = value.split(' ') var ethNumber = splitBalance[0] var ethSuffix = splitBalance[1] - var fiatNumber = Number(splitBalance[0]) * state.conversionRate + + if (state.conversionRate !== 'N/A') { + var fiatNumber = (Number(splitBalance[0]) * state.conversionRate).toFixed(2) + } else { + var fiatNumber = 'N/A' + } + var fiatSuffix = state.currentFiat if (state.shorten) { @@ -59,10 +68,6 @@ EthBalanceComponent.prototype.renderBalance = function (value, state) { balance = balanceObj.balance } - if (fiatNumber !== 'N/A') { - fiatNumber = fiatNumber.toFixed(2) - } - var label = balanceObj.label return ( @@ -98,31 +103,39 @@ EthBalanceComponent.prototype.renderBalance = function (value, state) { position: 'bottom', title: `${fiatNumber} ${fiatSuffix}`, }, [ - 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', - }, - }, `= ${fiatNumber}`), - h('div', { - style: { - color: '#AEAEAE', - marginLeft: '5px', - fontSize: '12px', - }, - }, fiatSuffix), - ]), + fiatDisplay (fiatNumber, fiatSuffix) ]), ]) ) } + +function fiatDisplay (fiatNumber, fiatSuffix) { + if (fiatNumber !== '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', + }, + }, fiatNumber), + h('div', { + style: { + color: '#AEAEAE', + marginLeft: '5px', + fontSize: '12px', + }, + }, fiatSuffix), + ]) + } else { + return h('div') + } +} -- cgit From 5afaebe6028953f35de6d033c29d86d879273a30 Mon Sep 17 00:00:00 2001 From: Kevin Serrano Date: Tue, 16 Aug 2016 14:49:53 -0700 Subject: Remove logs. --- ui/app/components/account-eth-balance.js | 3 --- 1 file changed, 3 deletions(-) (limited to 'ui/app/components/account-eth-balance.js') diff --git a/ui/app/components/account-eth-balance.js b/ui/app/components/account-eth-balance.js index ad6033716..d5fc9a80f 100644 --- a/ui/app/components/account-eth-balance.js +++ b/ui/app/components/account-eth-balance.js @@ -44,9 +44,6 @@ EthBalanceComponent.prototype.render = function () { ) } EthBalanceComponent.prototype.renderBalance = function (value, state) { - console.log("THIS IS VALUE") - console.log(value) - console.log(state.conversionRate) if (value === 'None') return value var balanceObj = generateBalanceObject(value, state.shorten ? 1 : 3) var balance -- cgit From 121af0c4b9fd12e9960cbf5bbb3203819b854eb7 Mon Sep 17 00:00:00 2001 From: Kevin Serrano Date: Tue, 16 Aug 2016 14:51:55 -0700 Subject: Lint. --- ui/app/components/account-eth-balance.js | 9 +++++---- 1 file changed, 5 insertions(+), 4 deletions(-) (limited to 'ui/app/components/account-eth-balance.js') diff --git a/ui/app/components/account-eth-balance.js b/ui/app/components/account-eth-balance.js index d5fc9a80f..bcef40096 100644 --- a/ui/app/components/account-eth-balance.js +++ b/ui/app/components/account-eth-balance.js @@ -46,15 +46,16 @@ EthBalanceComponent.prototype.render = function () { EthBalanceComponent.prototype.renderBalance = function (value, state) { if (value === 'None') return value var balanceObj = generateBalanceObject(value, state.shorten ? 1 : 3) - var balance + var balance, fiatNumber var splitBalance = value.split(' ') var ethNumber = splitBalance[0] var ethSuffix = splitBalance[1] + if (state.conversionRate !== 'N/A') { - var fiatNumber = (Number(splitBalance[0]) * state.conversionRate).toFixed(2) + fiatNumber = (Number(splitBalance[0]) * state.conversionRate).toFixed(2) } else { - var fiatNumber = 'N/A' + fiatNumber = 'N/A' } var fiatSuffix = state.currentFiat @@ -100,7 +101,7 @@ EthBalanceComponent.prototype.renderBalance = function (value, state) { position: 'bottom', title: `${fiatNumber} ${fiatSuffix}`, }, [ - fiatDisplay (fiatNumber, fiatSuffix) + fiatDisplay(fiatNumber, fiatSuffix), ]), ]) ) -- cgit From 666f3cd66ce56013e5688d514e3c1fc3ec8a6ac4 Mon Sep 17 00:00:00 2001 From: Kevin Serrano Date: Tue, 16 Aug 2016 15:11:40 -0700 Subject: Added compliance for tests and properly accounts for N/A conversions. --- ui/app/components/account-eth-balance.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) (limited to 'ui/app/components/account-eth-balance.js') diff --git a/ui/app/components/account-eth-balance.js b/ui/app/components/account-eth-balance.js index bcef40096..6cdb33b73 100644 --- a/ui/app/components/account-eth-balance.js +++ b/ui/app/components/account-eth-balance.js @@ -52,7 +52,7 @@ EthBalanceComponent.prototype.renderBalance = function (value, state) { var ethSuffix = splitBalance[1] - if (state.conversionRate !== 'N/A') { + if (state.conversionRate !== 0) { fiatNumber = (Number(splitBalance[0]) * state.conversionRate).toFixed(2) } else { fiatNumber = 'N/A' -- cgit