Using eth balance component to ensure proper rounding.

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,17 +64,20 @@ EthBalanceComponent.prototype.renderBalance = function (value) {
   }
 
   var label = balanceObj.label
-
+  const tooltipProps = hideTooltip ? {} : {
-  return (
-    h(Tooltip, {
     position: 'bottom',
     title: `${ethNumber} ${ethSuffix}`,
-    }, h('div.flex-column', [
+  };
+
+  return (
+    h(hideTooltip ? 'div' : Tooltip,
+      tooltipProps,
+      h('div.flex-column', [
         h('.flex-row', {
           style: {
             alignItems: 'flex-end',
-          lineHeight: '13px',
+            lineHeight: lineHeight || '13px',
-          fontFamily: 'Montserrat Light',
+            fontFamily: fontFamily || 'Montserrat Light',
             textRendering: 'geometricPrecision',
           },
         }, [
@@ -72,12 +85,14 @@ EthBalanceComponent.prototype.renderBalance = function (value) {
             style: {
               width: '100%',
               textAlign: 'right',
+              fontSize: fontSize || 'inherit',
+              color: color || 'inherit',
             },
           }, incoming ? `+${balance}` : balance),
           h('div', {
             style: {
-            color: ' #AEAEAE',
+              color: color || '#AEAEAE',
-            fontSize: '12px',
+              fontSize: fontSize || '12px',
               marginLeft: '5px',
             },
           }, label),

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',

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,
                   }