diff --git a/ui/app/components/transaction-breakdown/transaction-breakdown.component.js b/ui/app/components/transaction-breakdown/transaction-breakdown.component.js index 26f52317d..26dc4c153 100644 --- a/ui/app/components/transaction-breakdown/transaction-breakdown.component.js +++ b/ui/app/components/transaction-breakdown/transaction-breakdown.component.js @@ -6,8 +6,6 @@ import CurrencyDisplay from '../currency-display' import UserPreferencedCurrencyDisplay from '../user-preferenced-currency-display' import HexToDecimal from '../hex-to-decimal' import { GWEI, PRIMARY, SECONDARY } from '../../constants/common' -import { getHexGasTotal } from '../../helpers/confirm-transaction/util' -import { sumHexes } from '../../helpers/transactions.util' export default class TransactionBreakdown extends PureComponent { static contextTypes = { @@ -19,6 +17,11 @@ export default class TransactionBreakdown extends PureComponent { className: PropTypes.string, nativeCurrency: PropTypes.string.isRequired, showFiat: PropTypes.bool, + gas: PropTypes.oneOfType([PropTypes.string, PropTypes.number]), + gasPrice: PropTypes.oneOfType([PropTypes.string, PropTypes.number]), + value: PropTypes.oneOfType([PropTypes.string, PropTypes.number]), + gasUsed: PropTypes.oneOfType([PropTypes.string, PropTypes.number]), + totalInHex: PropTypes.oneOfType([PropTypes.string, PropTypes.number]), } static defaultProps = { @@ -28,13 +31,7 @@ export default class TransactionBreakdown extends PureComponent { render () { const { t } = this.context - const { transaction, className, nativeCurrency, showFiat } = this.props - const { txParams: { gas, gasPrice, value } = {}, txReceipt: { gasUsed } = {} } = transaction - - const gasLimit = typeof gasUsed === 'string' ? gasUsed : gas - - const hexGasTotal = getHexGasTotal({ gasLimit, gasPrice }) - const totalInHex = sumHexes(hexGasTotal, value) + const { gas, gasPrice, value, className, nativeCurrency, showFiat, totalInHex, gasUsed } = this.props return (
@@ -52,10 +49,13 @@ export default class TransactionBreakdown extends PureComponent { title={`${t('gasLimit')} (${t('units')})`} className="transaction-breakdown__row-title" > - + {typeof gas !== 'undefined' + ? + : '?' + } { typeof gasUsed === 'string' && ( @@ -71,13 +71,16 @@ export default class TransactionBreakdown extends PureComponent { ) } - + {typeof gasPrice !== 'undefined' + ? + : '?' + }
diff --git a/ui/app/components/transaction-breakdown/transaction-breakdown.container.js b/ui/app/components/transaction-breakdown/transaction-breakdown.container.js index 919187b6f..3e85b9e23 100644 --- a/ui/app/components/transaction-breakdown/transaction-breakdown.container.js +++ b/ui/app/components/transaction-breakdown/transaction-breakdown.container.js @@ -1,14 +1,28 @@ import { connect } from 'react-redux' import TransactionBreakdown from './transaction-breakdown.component' import {getIsMainnet, getNativeCurrency, preferencesSelector} from '../../selectors' +import { getHexGasTotal } from '../../helpers/confirm-transaction/util' +import { sumHexes } from '../../helpers/transactions.util' -const mapStateToProps = (state) => { +const mapStateToProps = (state, ownProps) => { + const { transaction } = ownProps + const { txParams: { gas, gasPrice, value } = {}, txReceipt: { gasUsed } = {} } = transaction const { showFiatInTestnets } = preferencesSelector(state) const isMainnet = getIsMainnet(state) + const gasLimit = typeof gasUsed === 'string' ? gasUsed : gas + + const hexGasTotal = gasLimit && gasPrice && getHexGasTotal({ gasLimit, gasPrice }) || '0x0' + const totalInHex = sumHexes(hexGasTotal, value) + return { nativeCurrency: getNativeCurrency(state), showFiat: (isMainnet || !!showFiatInTestnets), + totalInHex, + gas, + gasPrice, + value, + gasUsed, } }