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

1 files changed, 15 insertions, 1 deletions

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,
   }
 }