Handle undefined gas limits and prices in transaction-breakdown.component (#6246)

2 files changed, 38 insertions, 21 deletions

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 (
       <div className={classnames('transaction-breakdown', className)}>
@@ -52,10 +49,13 @@ export default class TransactionBreakdown extends PureComponent {
           title={`${t('gasLimit')} (${t('units')})`}
           className="transaction-breakdown__row-title"
         >
-          <HexToDecimal
-            className="transaction-breakdown__value"
-            value={gas}
-          />
+          {typeof gas !== 'undefined'
+            ? <HexToDecimal
+              className="transaction-breakdown__value"
+              value={gas}
+            />
+            : '?'
+          }
         </TransactionBreakdownRow>
         {
           typeof gasUsed === 'string' && (
@@ -71,13 +71,16 @@ export default class TransactionBreakdown extends PureComponent {
           )
         }
         <TransactionBreakdownRow title={t('gasPrice')}>
-          <CurrencyDisplay
-            className="transaction-breakdown__value"
-            currency={nativeCurrency}
-            denomination={GWEI}
-            value={gasPrice}
-            hideLabel
-          />
+          {typeof gasPrice !== 'undefined'
+            ? <CurrencyDisplay
+              className="transaction-breakdown__value"
+              currency={nativeCurrency}
+              denomination={GWEI}
+              value={gasPrice}
+              hideLabel
+            />
+            : '?'
+          }
         </TransactionBreakdownRow>
         <TransactionBreakdownRow title={t('total')}>
           <div>
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,
   }
 }