diff --git a/ui/app/components/fiat-value.js b/ui/app/components/fiat-value.js index 8a64a1cfc..665789353 100644 --- a/ui/app/components/fiat-value.js +++ b/ui/app/components/fiat-value.js @@ -12,7 +12,7 @@ function FiatValue () { FiatValue.prototype.render = function () { const props = this.props - const { conversionRate, currentCurrency } = props + const { conversionRate, currentCurrency, style } = props const value = formatBalance(props.value, 6) @@ -28,16 +28,18 @@ FiatValue.prototype.render = function () { fiatTooltipNumber = 'Unknown' } - return fiatDisplay(fiatDisplayNumber, currentCurrency) + return fiatDisplay(fiatDisplayNumber, currentCurrency, style) } -function fiatDisplay (fiatDisplayNumber, fiatSuffix) { +function fiatDisplay (fiatDisplayNumber, fiatSuffix, styleOveride = {}) { + const { fontSize, color, fontFamily, lineHeight } = styleOveride + if (fiatDisplayNumber !== 'N/A') { return h('.flex-row', { style: { alignItems: 'flex-end', - lineHeight: '13px', - fontFamily: 'Montserrat Light', + lineHeight: lineHeight || '13px', + fontFamily: fontFamily || 'Montserrat Light', textRendering: 'geometricPrecision', }, }, [ @@ -45,15 +47,15 @@ function fiatDisplay (fiatDisplayNumber, fiatSuffix) { style: { width: '100%', textAlign: 'right', - fontSize: '12px', - color: '#333333', + fontSize: fontSize || '12px', + color: color || '#333333', }, }, fiatDisplayNumber), h('div', { style: { - color: '#AEAEAE', + color: color || '#AEAEAE', marginLeft: '5px', - fontSize: '12px', + fontSize: fontSize || '12px', }, }, fiatSuffix), ]) diff --git a/ui/app/css/itcss/components/send.scss b/ui/app/css/itcss/components/send.scss index a1bab3e1b..4844fa869 100644 --- a/ui/app/css/itcss/components/send.scss +++ b/ui/app/css/itcss/components/send.scss @@ -65,6 +65,8 @@ align-items: center; padding-left: 10px; padding-right: 12px; + font-size: 16px; + color: $scorpion; } .send-screen-amount-labels { @@ -79,8 +81,6 @@ justify-content: space-between; } -.send-screen-bolt-icon {} - .selected-currency { color: $curious-blue; } diff --git a/ui/app/css/itcss/settings/variables.scss b/ui/app/css/itcss/settings/variables.scss index 2f5f17f17..ac719e50b 100644 --- a/ui/app/css/itcss/settings/variables.scss +++ b/ui/app/css/itcss/settings/variables.scss @@ -29,6 +29,7 @@ $curious-blue: #2f9ae0; $concrete: #f3f3f3; $tundora: #4d4d4d; $nile-blue: #1b344d; +$scorpion: #5d5d5d; /* Z-Indicies diff --git a/ui/app/send.js b/ui/app/send.js index e29c1aadf..e3a48a441 100644 --- a/ui/app/send.js +++ b/ui/app/send.js @@ -5,13 +5,15 @@ const connect = require('react-redux').connect const Identicon = require('./components/identicon') const actions = require('./actions') const util = require('./util') +const ethUtil = require('ethereumjs-util') +const BN = ethUtil.BN +const hexToBn = require('../../app/scripts/lib/hex-to-bn') const numericBalance = require('./util').numericBalance const addressSummary = require('./util').addressSummary const isHex = require('./util').isHex const EthBalance = require('./components/eth-balance') const EnsInput = require('./components/ens-input') const FiatValue = require('./components/fiat-value.js') -const ethUtil = require('ethereumjs-util') const GasTooltip = require('./components/gas-tooltip.js') const { getSelectedIdentity } = require('./selectors') @@ -30,6 +32,7 @@ function mapStateToProps (state) { addressBook: state.metamask.addressBook, conversionRate: state.metamask.conversionRate, currentCurrency: state.metamask.currentCurrency, + blockGasLimit: state.metamask.currentBlockGasLimit, } result.error = result.warning && result.warning.split('.')[0] @@ -53,9 +56,9 @@ function SendTransactionScreen () { to: '', // these values are hardcoded, so "Next" can be clicked amount: '0.0001', // see L544 - gasPrice: '4a817c800', + gasPrice: '0x19', gas: '0x7b0d', - gasFee: ((parseInt('0x7b0d', 16) * parseInt('4a817c800', 16)) / 1000000000).toFixed(10), + gasFee: ((parseInt('0x7b0d', 16) * parseInt('0x19', 16)) / 1000000000).toFixed(6), txData: null, memo: '', }, @@ -63,6 +66,28 @@ function SendTransactionScreen () { } } +SendTransactionScreen.prototype.bnMultiplyByFraction = function (targetBN, numerator, denominator) { + const numBN = new BN(numerator) + const denomBN = new BN(denominator) + return targetBN.mul(numBN).div(denomBN) +} + +SendTransactionScreen.prototype.getTxFeeBn = function (gas, gasPrice = MIN_GAS_PRICE_BN.toString(16)) { + const { blockGasLimit } = this.props; + const gasBn = hexToBn(gas) + const gasLimit = new BN(parseInt(blockGasLimit)) + const safeGasLimit = this.bnMultiplyByFraction(gasLimit, 19, 20).toString(10) + + + // Gas Price + const gasPriceBn = hexToBn(gasPrice) + const txFeeBn = gasBn.mul(gasPriceBn) + + const fiatMultiplier = hexToBn((1000000000).toString(16)) + const txFeeAsFiatBn = txFeeBn.mul(fiatMultiplier) + return txFeeAsFiatBn; +} + SendTransactionScreen.prototype.render = function () { this.persistentFormParentId = 'send-tx-form' @@ -226,10 +251,21 @@ SendTransactionScreen.prototype.render = function () { h('span', {}, ['What\'s this?']), ]), + // TODO: handle loading time when switching to USD h('div.large-input.send-screen-gas-input', {}, [ - h(FiatValue, { - value: this.state.newTx.gasFee.toString(16), conversionRate, currentCurrency } - ), + currentCurrency === 'USD' + ? h(FiatValue, { + value: this.getTxFeeBn.bind(this)(this.state.newTx.gas.toString(16), this.state.newTx.gasPrice.toString(16)).toString(16), + conversionRate, + currentCurrency, + style: { + color: '#5d5d5d', + fontSize: '16px', + fontFamily: 'DIN OT', + lineHeight: '22.4px' + } + }) + : h('div', {}, [`${this.state.newTx.gasFee} ETH`]), h('div.send-screen-gas-input-customize', { onClick: () => this.setTooltipOpen.bind(this)(!this.state.tooltipIsOpen), }, [ @@ -248,7 +284,8 @@ SendTransactionScreen.prototype.render = function () { newTx: Object.assign( this.state.newTx, { - gasFee: ((gasLimit * gasPrice) / 1000000000).toFixed(10), + // TODO: determine how prices are rounded on master + gasFee: ((gasPrice / 1000000000) * gasLimit).toFixed(6), gas: gasLimit, gasPrice, }