diff --git a/ui/pages/confirmations/components/confirm/info/batch/batch-simulation-details/batch-simulation-details.tsx b/ui/pages/confirmations/components/confirm/info/batch/batch-simulation-details/batch-simulation-details.tsx
index 2a676be1fdb2..149d5f2a6f99 100644
--- a/ui/pages/confirmations/components/confirm/info/batch/batch-simulation-details/batch-simulation-details.tsx
+++ b/ui/pages/confirmations/components/confirm/info/batch/batch-simulation-details/batch-simulation-details.tsx
@@ -1,4 +1,4 @@
-import React, { useCallback, useState } from 'react';
+import React, { useCallback, useMemo, useState } from 'react';
import {
TransactionMeta,
TransactionType,
@@ -63,18 +63,22 @@ export function BatchSimulationDetails() {
return null;
}
- const finalBalanceChanges = approveBalanceChanges?.map((change) => ({
- ...change,
- onEdit:
- change.asset.standard === TokenStandard.ERC20
- ? () => handleEdit(change)
- : undefined,
- }));
+ const approveRows: StaticRow[] = useMemo(() => {
+ const finalBalanceChanges = approveBalanceChanges?.map((change) => ({
+ ...change,
+ onEdit:
+ change.asset.standard === TokenStandard.ERC20
+ ? () => handleEdit(change)
+ : undefined,
+ }));
- const approveRow: StaticRow = {
- label: t('confirmSimulationApprove'),
- balanceChanges: finalBalanceChanges ?? [],
- };
+ return [
+ {
+ label: t('confirmSimulationApprove'),
+ balanceChanges: finalBalanceChanges ?? [],
+ },
+ ];
+ }, [approveBalanceChanges, handleEdit]);
const nestedTransactionToEdit =
nestedTransactionIndexToEdit === undefined
@@ -94,7 +98,7 @@ export function BatchSimulationDetails() {
)}
diff --git a/ui/pages/confirmations/components/confirm/info/hooks/useBatchApproveBalanceChanges.ts b/ui/pages/confirmations/components/confirm/info/hooks/useBatchApproveBalanceChanges.ts
index 3bb973b31e2a..09817e540373 100644
--- a/ui/pages/confirmations/components/confirm/info/hooks/useBatchApproveBalanceChanges.ts
+++ b/ui/pages/confirmations/components/confirm/info/hooks/useBatchApproveBalanceChanges.ts
@@ -5,6 +5,8 @@ import {
TransactionMeta,
} from '@metamask/transaction-controller';
import { add0x } from '@metamask/utils';
+import { useMemo } from 'react';
+
import { useConfirmContext } from '../../../../context/confirm';
import { useAsyncResult } from '../../../../../../hooks/useAsync';
import { getTokenStandardAndDetails } from '../../../../../../store/actions';
@@ -40,18 +42,20 @@ export function useBatchApproveBalanceChanges() {
},
});
- const finalBalanceChanges = (balanceChanges ?? []).map(
- (change, index) => {
- const simulation = simulationBalanceChanges?.[index];
-
- return {
- ...change,
- isApproval: true,
- isAllApproval: simulation?.isAll ?? false,
- isUnlimitedApproval: simulation?.isUnlimited ?? false,
- nestedTransactionIndex: simulation?.nestedTransactionIndex ?? -1,
- };
- },
+ const finalBalanceChanges = useMemo(
+ () =>
+ (balanceChanges ?? []).map((change, index) => {
+ const simulation = simulationBalanceChanges?.[index];
+
+ return {
+ ...change,
+ isApproval: true,
+ isAllApproval: simulation?.isAll ?? false,
+ isUnlimitedApproval: simulation?.isUnlimited ?? false,
+ nestedTransactionIndex: simulation?.nestedTransactionIndex ?? -1,
+ };
+ }),
+ [balanceChanges, simulationBalanceChanges],
);
const pending = pendingSimulationChanges || pendingBalanceChanges;
@@ -66,7 +70,7 @@ function useBatchApproveSimulationBalanceChanges({
}) {
return useAsyncResult(
async () => buildSimulationTokenBalanceChanges({ nestedTransactions }),
- [nestedTransactions],
+ [JSON.stringify(nestedTransactions)],
);
}