diff --git a/ui/app/components/eth-balance.js b/ui/app/components/eth-balance.js index 79fc1d256..975ba3acd 100644 --- a/ui/app/components/eth-balance.js +++ b/ui/app/components/eth-balance.js @@ -2,7 +2,8 @@ const Component = require('react').Component const h = require('react-hyperscript') const inherits = require('util').inherits const formatBalance = require('../util').formatBalance - +const generateBalanceObject = require('../util').generateBalanceObject +const Tooltip = require('./tooltip.js') module.exports = EthBalanceComponent inherits(EthBalanceComponent, Component) @@ -32,34 +33,48 @@ EthBalanceComponent.prototype.render = function () { } EthBalanceComponent.prototype.renderBalance = function (value) { const props = this.props - if (value === 'None') return value - - var balance = value.split(' ')[0] - var label = value.split(' ')[1] + var balanceObj = generateBalanceObject(value) + var balance = balanceObj.balance + var label = balanceObj.label var tagName = props.inline ? 'span' : 'div' var topTag = props.inline ? 'div' : '.flex-column' return ( - h(topTag, { - style: { - alignItems: 'flex-end', - lineHeight: props.fontSize || '13px', - fontFamily: 'Montserrat Regular', - textRendering: 'geometricPrecision', - }, + + h(Tooltip, { + position: 'bottom', + title: value.split(' ')[0], }, [ - h(tagName, { + h(topTag, { style: { - fontSize: props.fontSize || '12px', + alignItems: 'flex-end', + lineHeight: props.fontSize || '13px', + fontFamily: 'Montserrat Regular', + textRendering: 'geometricPrecision', }, - }, balance + ' '), - h(tagName, { - style: { - color: props.labelColor || '#AEAEAE', - fontSize: props.fontSize || '12px', - }, - }, label), + }, [ + h(tagName, { + style: { + fontSize: props.fontSize || '12px', + }, + }, balance + ' '), + h(tagName, { + style: { + color: props.labelColor || '#AEAEAE', + fontSize: props.fontSize || '12px', + }, + }, [ + h('div', balance), + h('div', { + style: { + color: '#AEAEAE', + fontSize: '12px', + }, + }, label), + ]), + ]) ]) + ) } diff --git a/ui/app/util.js b/ui/app/util.js index 89853d746..b86bc6035 100644 --- a/ui/app/util.js +++ b/ui/app/util.js @@ -27,6 +27,7 @@ module.exports = { numericBalance: numericBalance, parseBalance: parseBalance, formatBalance: formatBalance, + generateBalanceObject: generateBalanceObject, dataSize: dataSize, readableDate: readableDate, ethToWei: ethToWei, @@ -128,6 +129,17 @@ function formatBalance (balance, decimalsToKeep) { return formatted } +function generateBalanceObject (formattedBalance) { + var balance = formattedBalance.split(' ')[0] + var label = formattedBalance.split(' ')[1] + var beforeDecimal = balance.split('.')[0] + var afterDecimal = balance.split('.')[1] + + if (beforeDecimal === '0' && afterDecimal.substr(0, 5) === '00000') { balance = '< 0.00001' } + + return { balance, label } +} + function dataSize (data) { var size = data ? ethUtil.stripHexPrefix(data).length : 0 return size + ' bytes'