Merge branch 'main' into account-tracker-controller-migration

Author: bergarces

ui/pages/confirmations/components/confirm/info/base-transaction-info/base-transaction-info.test.tsx

@@ -18,6 +18,10 @@ jest.mock('../../../simulation-details/useBalanceChanges', () => ({
   useBalanceChanges: jest.fn(() => ({ pending: false, value: [] })),
 }));
 
+jest.mock('../hooks/useBatchApproveBalanceChanges', () => ({
+  useBatchApproveBalanceChanges: jest.fn(),
+}));
+
 jest.mock('../../../../../../store/actions', () => ({
   ...jest.requireActual('../../../../../../store/actions'),
   getGasFeeTimeEstimate: jest.fn().mockResolvedValue({

ui/pages/confirmations/components/confirm/info/batch/batch-simulation-details/batch-simulation-details.test.tsx

@@ -295,4 +295,15 @@ describe('BatchSimulationDetails', () => {
     const { container } = render(upgradeAccountConfirmationOnly);
     expect(container.firstChild).toBeNull();
   });
+
+  it('does not render SimulationDetails and EditSpendingCapModal while approvePending is true', () => {
+    useBatchApproveBalanceChangesMock.mockReturnValue({
+      pending: true,
+      value: [BALANCE_CHANGE_ERC20_MOCK],
+    });
+    const { queryByText, queryByTestId } = render();
+    expect(queryByText('Edit spending cap')).toBeNull();
+    expect(queryByTestId('balance-change-edit')).toBeNull();
+    expect(queryByText('You approve')).toBeNull();
+  });
 });

ui/pages/confirmations/components/confirm/info/batch/batch-simulation-details/batch-simulation-details.tsx

@@ -30,7 +30,7 @@ export function BatchSimulationDetails() {
 
   const { id, nestedTransactions } = transactionMeta;
 
-  const { value: approveBalanceChanges } =
+  const { value: approveBalanceChanges, pending: approvePending } =
     useBatchApproveBalanceChanges() ?? {};
 
   const [isEditApproveModalOpen, setIsEditApproveModalOpen] = useState(false);
@@ -89,23 +89,27 @@ export function BatchSimulationDetails() {
 
   return (
     <>
-      {isEditApproveModalOpen && (
-        <EditSpendingCapModal
-          data={nestedTransactionToEdit?.data}
-          isOpenEditSpendingCapModal={true}
-          // TODO: Fix in https://github.com/MetaMask/metamask-extension/issues/31879
-          // eslint-disable-next-line @typescript-eslint/no-misused-promises
-          onSubmit={handleEditSubmit}
-          setIsOpenEditSpendingCapModal={setIsEditApproveModalOpen}
-          to={nestedTransactionToEdit?.to}
-        />
+      {!approvePending && (
+        <>
+          {isEditApproveModalOpen && (
+            <EditSpendingCapModal
+              data={nestedTransactionToEdit?.data}
+              isOpenEditSpendingCapModal={true}
+              // TODO: Fix in https://github.com/MetaMask/metamask-extension/issues/31879
+              // eslint-disable-next-line @typescript-eslint/no-misused-promises
+              onSubmit={handleEditSubmit}
+              setIsOpenEditSpendingCapModal={setIsEditApproveModalOpen}
+              to={nestedTransactionToEdit?.to}
+            />
+          )}
+          <SimulationDetails
+            transaction={transactionMeta}
+            staticRows={approveRows}
+            isTransactionsRedesign
+            enableMetrics
+          />
+        </>
       )}
-      <SimulationDetails
-        transaction={transactionMeta}
-        staticRows={approveRows}
-        isTransactionsRedesign
-        enableMetrics
-      />
     </>
   );
 }

ui/pages/confirmations/components/confirm/info/info.test.tsx

@@ -20,6 +20,10 @@ jest.mock('../../simulation-details/useBalanceChanges', () => ({
   useBalanceChanges: jest.fn(() => ({ pending: false, value: [] })),
 }));
 
+jest.mock('./hooks/useBatchApproveBalanceChanges', () => ({
+  useBatchApproveBalanceChanges: jest.fn(),
+}));
+
 jest.mock(
   '../../../../../components/app/alert-system/contexts/alertMetricsContext',
   () => ({