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)], ); }