diff --git a/ui/app/components/eth-balance.js b/ui/app/components/eth-balance.js index 4f538fd31..32ff4efdf 100644 --- a/ui/app/components/eth-balance.js +++ b/ui/app/components/eth-balance.js @@ -37,7 +37,17 @@ EthBalanceComponent.prototype.render = function () { } EthBalanceComponent.prototype.renderBalance = function (value) { var props = this.props - const { conversionRate, shorten, incoming, currentCurrency } = props + const { + conversionRate, + shorten, + incoming, + currentCurrency, + hideTooltip, + styleOveride, + } = props + + const { fontSize, color, fontFamily, lineHeight } = styleOveride + if (value === 'None') return value if (value === '...') return value var balanceObj = generateBalanceObject(value, shorten ? 1 : 3) @@ -54,36 +64,41 @@ EthBalanceComponent.prototype.renderBalance = function (value) { } var label = balanceObj.label + const tooltipProps = hideTooltip ? {} : { + position: 'bottom', + title: `${ethNumber} ${ethSuffix}`, + }; return ( - h(Tooltip, { - position: 'bottom', - title: `${ethNumber} ${ethSuffix}`, - }, h('div.flex-column', [ - h('.flex-row', { - style: { - alignItems: 'flex-end', - lineHeight: '13px', - fontFamily: 'Montserrat Light', - textRendering: 'geometricPrecision', - }, - }, [ - h('div', { - style: { - width: '100%', - textAlign: 'right', - }, - }, incoming ? `+${balance}` : balance), - h('div', { + h(hideTooltip ? 'div' : Tooltip, + tooltipProps, + h('div.flex-column', [ + h('.flex-row', { style: { - color: ' #AEAEAE', - fontSize: '12px', - marginLeft: '5px', + alignItems: 'flex-end', + lineHeight: lineHeight || '13px', + fontFamily: fontFamily || 'Montserrat Light', + textRendering: 'geometricPrecision', }, - }, label), - ]), + }, [ + h('div', { + style: { + width: '100%', + textAlign: 'right', + fontSize: fontSize || 'inherit', + color: color || 'inherit', + }, + }, incoming ? `+${balance}` : balance), + h('div', { + style: { + color: color || '#AEAEAE', + fontSize: fontSize || '12px', + marginLeft: '5px', + }, + }, label), + ]), - showFiat ? h(FiatValue, { value: props.value, conversionRate, currentCurrency }) : null, - ])) + showFiat ? h(FiatValue, { value: props.value, conversionRate, currentCurrency }) : null, + ])) ) } diff --git a/ui/app/components/tooltip.js b/ui/app/components/tooltip.js index edbc074bb..74cf1ae43 100644 --- a/ui/app/components/tooltip.js +++ b/ui/app/components/tooltip.js @@ -12,7 +12,7 @@ function Tooltip () { Tooltip.prototype.render = function () { const props = this.props - const { position, title, children } = props + const { position, title, children, show = true } = props return h(ReactTooltip, { position: position || 'left', diff --git a/ui/app/send.js b/ui/app/send.js index f54a76926..ae779790d 100644 --- a/ui/app/send.js +++ b/ui/app/send.js @@ -58,7 +58,6 @@ function SendTransactionScreen () { amount: '0.0001', // see L544 gasPrice: '0x19', gas: '0x7b0d', - gasFee: ((parseInt('0x7b0d', 16) * parseInt('0x19', 16)) / 1000000000).toFixed(6), txData: null, memo: '', }, @@ -276,7 +275,19 @@ SendTransactionScreen.prototype.render = function () { lineHeight: '22.4px' } }) - : h('div', {}, [`${this.state.newTx.gasFee} ETH`]), + : h(EthBalance, { + value: this.getTxFeeBn(this.state.newTx.gas.toString(16), this.state.newTx.gasPrice.toString(16)).toString(16), + currentCurrency, + conversionRate, + showFiat: false, + hideTooltip: true, + styleOveride: { + color: '#5d5d5d', + fontSize: '16px', + fontFamily: 'DIN OT', + lineHeight: '22.4px' + } + }), h('div.send-screen-gas-input-customize', { onClick: () => this.toggleTooltip.bind(this)(!this.state.tooltipIsOpen), }, [ @@ -294,8 +305,6 @@ SendTransactionScreen.prototype.render = function () { newTx: Object.assign( this.state.newTx, { - // TODO: determine how prices are rounded on master - gasFee: ((gasPrice / 1000000000) * gasLimit).toFixed(6), gas: gasLimit, gasPrice, }