diff --git a/app/scripts/controllers/transactions/index.js b/app/scripts/controllers/transactions/index.js
index 81f97a2c2..d469cfa1b 100644
--- a/app/scripts/controllers/transactions/index.js
+++ b/app/scripts/controllers/transactions/index.js
@@ -583,11 +583,15 @@ export default class TransactionController extends EventEmitter {
         const postTxBalance = await this.query.getBalance(txMeta.txParams.from)
         const latestTxMeta = this.txStateManager.getTx(txId)
 
+        const approvalTxMeta = latestTxMeta.approvalTxId
+          ? this.txStateManager.getTx(latestTxMeta.approvalTxId)
+          : null
+
         latestTxMeta.postTxBalance = postTxBalance.toString(16)
 
         this.txStateManager.updateTx(latestTxMeta, 'transactions#confirmTransaction - add postTxBalance')
 
-        this._trackSwapsMetrics(latestTxMeta)
+        this._trackSwapsMetrics(latestTxMeta, approvalTxMeta)
       }
 
     } catch (err) {
@@ -822,7 +826,7 @@ export default class TransactionController extends EventEmitter {
     this.memStore.updateState({ unapprovedTxs, currentNetworkTxList })
   }
 
-  _trackSwapsMetrics (txMeta) {
+  _trackSwapsMetrics (txMeta, approvalTxMeta) {
     if (this._getParticipateInMetrics() && txMeta.swapMetaData) {
       if (txMeta.txReceipt.status === '0x0') {
         this._trackSegmentEvent({
@@ -844,6 +848,7 @@ export default class TransactionController extends EventEmitter {
           txMeta.destinationTokenAddress,
           txMeta.txParams.from,
           txMeta.destinationTokenDecimals,
+          approvalTxMeta,
         )
 
         const quoteVsExecutionRatio = `${
diff --git a/ui/app/ducks/swaps/swaps.js b/ui/app/ducks/swaps/swaps.js
index 6e88ae826..840b4bfe2 100644
--- a/ui/app/ducks/swaps/swaps.js
+++ b/ui/app/ducks/swaps/swaps.js
@@ -484,11 +484,12 @@ export const signAndSendTransactions = (history, metaMetricsEvent) => {
     metaMetricsEvent({ ...metaMetricsConfig })
     metaMetricsEvent({ ...metaMetricsConfig, excludeMetaMetricsId: true, properties: swapMetaData })
 
+    let finalApproveTxMeta
     const approveTxParams = getApproveTxParams(state)
     if (approveTxParams) {
       const approveTxMeta = await dispatch(addUnapprovedTransaction({ ...approveTxParams, amount: '0x0' }, 'metamask'))
       await dispatch(setApproveTxId(approveTxMeta.id))
-      const finalApproveTxMeta = await (dispatch(updateTransaction({
+      finalApproveTxMeta = await (dispatch(updateTransaction({
         ...approveTxMeta,
         transactionCategory: SWAP_APPROVAL,
         sourceTokenSymbol: sourceTokenInfo.symbol,
@@ -513,6 +514,7 @@ export const signAndSendTransactions = (history, metaMetricsEvent) => {
       destinationTokenAddress: destinationTokenInfo.address,
       swapMetaData,
       swapTokenValue,
+      approvalTxId: finalApproveTxMeta?.id,
     }, true)))
     try {
       await dispatch(updateAndApproveTx(finalTradeTxMeta, true))
diff --git a/ui/app/pages/swaps/index.js b/ui/app/pages/swaps/index.js
index f4e295735..206489b8c 100644
--- a/ui/app/pages/swaps/index.js
+++ b/ui/app/pages/swaps/index.js
@@ -102,6 +102,7 @@ export default function Swap () {
     destinationTokenInfo?.address,
     selectedAccountAddress,
     destinationTokenInfo?.decimals,
+    approveTxData,
   )
   const tradeConfirmed = tradeTxData?.status === 'confirmed'
   const approveError = approveTxData?.status === 'failed' || approveTxData?.txReceipt?.status === '0x0'
diff --git a/ui/app/pages/swaps/swaps.util.js b/ui/app/pages/swaps/swaps.util.js
index 5a720a3b3..92d20556e 100644
--- a/ui/app/pages/swaps/swaps.util.js
+++ b/ui/app/pages/swaps/swaps.util.js
@@ -364,18 +364,27 @@ export function quotesToRenderableData (quotes, gasPrice, conversionRate, curren
   })
 }
 
-export function getSwapsTokensReceivedFromTxMeta (tokenSymbol, txMeta, tokenAddress, accountAddress, tokenDecimals) {
+export function getSwapsTokensReceivedFromTxMeta (tokenSymbol, txMeta, tokenAddress, accountAddress, tokenDecimals, approvalTxMeta) {
   const txReceipt = txMeta?.txReceipt
   if (tokenSymbol === 'ETH') {
     if (!txReceipt || !txMeta || !txMeta.postTxBalance || !txMeta.preTxBalance) {
       return null
     }
+
+    let approvalTxGasCost = '0x0'
+    if (approvalTxMeta && approvalTxMeta.txReceipt) {
+      approvalTxGasCost = calcGasTotal(approvalTxMeta.txReceipt.gasUsed, approvalTxMeta.txParams.gasPrice)
+    }
+
     const gasCost = calcGasTotal(txReceipt.gasUsed, txMeta.txParams.gasPrice)
-    const preTxBalanceLessGasCost = subtractCurrencies(txMeta.preTxBalance, gasCost, {
+    const totalGasCost = (new BigNumber(gasCost, 16)).plus(approvalTxGasCost, 16).toString(16)
+
+    const preTxBalanceLessGasCost = subtractCurrencies(txMeta.preTxBalance, totalGasCost, {
       aBase: 16,
       bBase: 16,
       toNumericBase: 'hex',
     })
+
     const ethReceived = subtractCurrencies(txMeta.postTxBalance, preTxBalanceLessGasCost, {
       aBase: 16,
       bBase: 16,