fix: cp-12.17.3 fix repeated re-rendering of approve row in simulations section

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() {
       )}
       <SimulationDetails
         transaction={transactionMeta}
-        staticRows={[approveRow]}
+        staticRows={approveRows}
         isTransactionsRedesign
         enableMetrics
       />

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