diff --git a/ui/app/components/gas-tooltip.js b/ui/app/components/gas-tooltip.js index 91a07c738..de2f8046b 100644 --- a/ui/app/components/gas-tooltip.js +++ b/ui/app/components/gas-tooltip.js @@ -18,6 +18,12 @@ function GasTooltip () { this.updateGasLimit = this.updateGasLimit.bind(this); } +GasTooltip.prototype.componentWillMount = function () { + const { gasPrice = 0, gasLimit = 0} = this.props + + this.setState({ gasPrice, gasLimit }) +} + GasTooltip.prototype.updateGasPrice = function (newPrice) { const { onFeeChange } = this.props const { gasLimit } = this.state @@ -57,7 +63,11 @@ GasTooltip.prototype.render = function () { initValue: gasPrice, onChange: (newPrice) => this.updateGasPrice(newPrice), }), - h('div.gas-tooltip-input-label', {}, [ + h('div.gas-tooltip-input-label', { + style: { + 'marginTop': '81px', + }, + }, [ h('span.gas-tooltip-label', {}, ['Gas Limit']), h('i.fa.fa-info-circle') ]), @@ -104,10 +114,7 @@ GasTooltip.prototype.componentWillUnmount = function () { GasTooltip.prototype.globalClickOccurred = function (event) { const target = event.target const container = findDOMNode(this) - console.log(`target`, target); - console.log(`container`, container); - console.log(`this.container`, this.container); - console.log(`this.outsideClickHandler`, this.outsideClickHandler); + if (target !== container && !isDescendant(container, target) && this.outsideClickHandler) { diff --git a/ui/app/components/input-number.js b/ui/app/components/input-number.js index 5b4265459..c8bdd5ec5 100644 --- a/ui/app/components/input-number.js +++ b/ui/app/components/input-number.js @@ -16,9 +16,9 @@ function InputNumber () { this.setValue = this.setValue.bind(this); } -InputNumber.prototype.componentWillMount == function () { +InputNumber.prototype.componentWillMount = function () { const { initValue = 0 } = this.props - + this.setState({ value: initValue }); } @@ -36,7 +36,7 @@ InputNumber.prototype.setValue = function (newValue) { InputNumber.prototype.render = function () { const { unitLabel, step = 1, min, placeholder } = this.props const { value } = this.state - + return h('div.customize-gas-input-wrapper', {}, [ h('input.customize-gas-input', { placeholder, diff --git a/ui/app/send.js b/ui/app/send.js index 34c6df9f7..e29c1aadf 100644 --- a/ui/app/send.js +++ b/ui/app/send.js @@ -10,6 +10,7 @@ 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') @@ -54,7 +55,7 @@ function SendTransactionScreen () { amount: '0.0001', // see L544 gasPrice: '4a817c800', gas: '0x7b0d', - gasFee: 0, + gasFee: ((parseInt('0x7b0d', 16) * parseInt('4a817c800', 16)) / 1000000000).toFixed(10), txData: null, memo: '', }, @@ -225,20 +226,22 @@ SendTransactionScreen.prototype.render = function () { h('span', {}, ['What\'s this?']), ]), - h('input.large-input.send-screen-gas-input', { - placeholder: '0', - value: this.state.newTx.gasFee - }, []), - - h('div.send-screen-gas-input-customize', { - onClick: () => this.setTooltipOpen.bind(this)(!this.state.tooltipIsOpen), - }, [ - 'Customize' + h('div.large-input.send-screen-gas-input', {}, [ + h(FiatValue, { + value: this.state.newTx.gasFee.toString(16), conversionRate, currentCurrency } + ), + h('div.send-screen-gas-input-customize', { + onClick: () => this.setTooltipOpen.bind(this)(!this.state.tooltipIsOpen), + }, [ + 'Customize' + ]), ]), h(GasTooltip, { isOpen: this.state.tooltipIsOpen, className: 'send-tooltip', + gasPrice: parseInt(this.state.newTx.gasPrice, 16), + gasLimit: parseInt(this.state.newTx.gas, 16), onClickOutside: () => this.setTooltipOpen.bind(this)(false), onFeeChange: ({gasLimit, gasPrice}) => { this.setState({ @@ -246,6 +249,8 @@ SendTransactionScreen.prototype.render = function () { this.state.newTx, { gasFee: ((gasLimit * gasPrice) / 1000000000).toFixed(10), + gas: gasLimit, + gasPrice, } ), })