From 57fec36a7d999e4fdfc06e0b1f8649ec39d7eed4 Mon Sep 17 00:00:00 2001 From: Dan Finlay Date: Mon, 27 Feb 2017 16:06:28 -0800 Subject: [PATCH] Add non-working gas recalculating logic to tx-details view --- ui/app/components/pending-tx-details.js | 75 +++++++++++++++++++++++-- 1 file changed, 69 insertions(+), 6 deletions(-) diff --git a/ui/app/components/pending-tx-details.js b/ui/app/components/pending-tx-details.js index 973f6ac92..a4ca2d32b 100644 --- a/ui/app/components/pending-tx-details.js +++ b/ui/app/components/pending-tx-details.js @@ -1,7 +1,10 @@ const Component = require('react').Component const h = require('react-hyperscript') const inherits = require('util').inherits +const debounce = require('debounce') +const extend = require('xtend') +const TxUtils = require('../../../app/scripts/lib/tx-utils') const MiniAccountPanel = require('./mini-account-panel') const EthBalance = require('./eth-balance') const util = require('../util') @@ -21,7 +24,8 @@ const PTXP = PendingTxDetails.prototype PTXP.render = function () { var props = this.props - var txData = props.txData + var state = this.state || {} + var txData = state.txMeta || props.txData var state = this.state || {} var txParams = txData.txParams || {} @@ -33,11 +37,13 @@ PTXP.render = function () { const gas = state.gas || txParams.gas const gasPrice = state.gasPrice || txData.gasPrice - var txFee = txData.txFee || '' - var maxCost = txData.maxCost || '' + var txFee = state.txFee || txData.txFee || '' + var maxCost = state.maxCost || txData.maxCost || '' var dataLength = txParams.data ? (txParams.data.length - 2) / 2 : 0 var imageify = props.imageifyIdenticons === undefined ? true : props.imageifyIdenticons + log.debug(`rendering gas: ${gas}, gasPrice: ${gasPrice}, txFee: ${txFee}, maxCost: ${maxCost}`) + return ( h('div', [ @@ -138,13 +144,14 @@ PTXP.render = function () { h('.cell.row', { }, [ - h('.cell.label', 'Total Gas'), + h('.cell.label', 'Gas Limit'), h('.cell.value', { }, [ h(HexInput, { value: gas, onChange: (newHex) => { + log.info(`Gas limit changed to ${newHex}`) this.setState({ gas: newHex }) }, }), @@ -155,12 +162,12 @@ PTXP.render = function () { }, [ h('.cell.label', 'Gas Price'), h('.cell.value', { - }, [ h(HexInput, { value: gasPrice, onChange: (newHex) => { - this.setState({ gas: newHex }) + log.info(`Gas price changed to: ${newHex}`) + this.setState({ gasPrice: newHex }) }, }), ]) @@ -226,6 +233,62 @@ PTXP.miniAccountPanelForRecipient = function () { } } +PTXP.componentDidMount = function () { + this.txUtils = new TxUtils(web3.currentProvider) + this.recalculateGas = debounce(this.calculateGas.bind(this), 300) +} + +PTXP.componentDidUpdate = function (prevProps, prevState) { + const state = this.state || {} + log.debug(`pending-tx-details componentDidUpdate`) + console.log(arguments) + + // Only if gas or gasPrice changed: + if (prevState && + (state.gas !== prevState.gas || + state.gasPrice !== prevState.gasPrice) && + this.recalculateGas) { + log.debug(`recalculating gas since prev state change: ${JSON.stringify({ prevState, state })}`) + this.recalculateGas() + } +} + +PTXP.gatherParams = function () { + log.debug(`pending-tx-details#gatherParams`) + const props = this.props + const state = this.state || {} + const txData = state.txData || props.txData + const txParams = txData.txParams + + const gas = state.gas || txParams.gas + const gasPrice = state.gasPrice || txParams.gasPrice + const resultTx = extend(txParams, { + gas, + gasPrice, + }) + const resultTxMeta = extend(txData, { + txParams: resultTx, + }) + log.debug(`gathered params: ${JSON.stringify(resultTxMeta)}`) + return resultTxMeta +} + +PTXP.calculateGas = function () { + const txMeta = this.gatherParams() + log.debug(`pending-tx-details calculating gas for ${ JSON.stringify(txMeta) }`) + const txUtils = this.txUtils + this.txUtils.analyzeGasUsage(txMeta, (err, result) => { + console.log('ANALYZED') + console.dir(arguments) + const { txFee, maxCost } = result || txMeta + if (txFee === txMeta.txFee && maxCost === txMeta.maxCost) { + log.warn(`Recalculating gas resulted in no change.`) + } + log.debug(`pending-tx-details calculated tx fee: ${txFee} and max cost: ${maxCost}`) + this.setState({ txFee, maxCost }) + }) +} + function forwardCarrat () { return (