test: add integration test for pending transaction alert and fix bug …

test/integration/confirmations/transactions/alerts.test.tsx

@@ -1,4 +1,5 @@
-import { act, fireEvent } from '@testing-library/react';
+import { randomUUID } from 'crypto';
+import { act, fireEvent, screen } from '@testing-library/react';
 import { ApprovalType } from '@metamask/controller-utils';
 import nock from 'nock';
 import mockMetaMaskState from '../../data/integration-init-state.json';
@@ -274,4 +275,76 @@ describe('Contract Interaction Confirmation', () => {
       await findByTestId('alert-modal-action-showAdvancedGasModal'),
     ).toHaveTextContent('Update fee');
   });
+
+  it('displays the alert for pending transactions', async () => {
+    const account =
+      mockMetaMaskState.internalAccounts.accounts[
+        mockMetaMaskState.internalAccounts
+          .selectedAccount as keyof typeof mockMetaMaskState.internalAccounts.accounts
+      ];
+
+    const mockedMetaMaskState =
+      getMetaMaskStateWithUnapprovedApproveTransaction(account.address);
+    const unapprovedTransaction = mockedMetaMaskState.transactions[0];
+    const submittedTransaction = getUnapprovedApproveTransaction(
+      account.address,
+      randomUUID(),
+      pendingTransactionTime - 1000,
+    );
+    submittedTransaction.status = 'submitted';
+
+    await act(async () => {
+      await integrationTestRender({
+        preloadedState: {
+          ...mockedMetaMaskState,
+          gasEstimateType: 'none',
+          pendingApprovalCount: 2,
+          pendingApprovals: {
+            [pendingTransactionId]: {
+              id: pendingTransactionId,
+              origin: 'origin',
+              time: pendingTransactionTime,
+              type: ApprovalType.Transaction,
+              requestData: {
+                txId: pendingTransactionId,
+              },
+              requestState: null,
+              expectsResult: false,
+            },
+            [submittedTransaction.id]: {
+              id: submittedTransaction.id,
+              origin: 'origin',
+              time: pendingTransactionTime - 1000,
+              type: ApprovalType.Transaction,
+              requestData: {
+                txId: submittedTransaction.id,
+              },
+              requestState: null,
+              expectsResult: false,
+            },
+          },
+          transactions: [unapprovedTransaction, submittedTransaction],
+        },
+        backgroundConnection: backgroundConnectionMocked,
+      });
+    });
+
+    expect(await screen.getByTestId('inline-alert')).toBeInTheDocument();
+
+    act(() => {
+      fireEvent.click(screen.getByTestId('inline-alert'));
+    });
+
+    expect(await screen.findByTestId('alert-modal')).toBeInTheDocument();
+
+    expect(
+      await screen.findByTestId('alert-modal__selected-alert'),
+    ).toBeInTheDocument();
+
+    expect(
+      await screen.findByTestId('alert-modal__selected-alert'),
+    ).toHaveTextContent(
+      'This transaction won’t go through until a previous transaction is complete. Learn how to cancel or speed up a transaction.',
+    );
+  });
 });

ui/pages/confirmations/components/confirm/info/approve/__snapshots__/approve.test.tsx.snap

@@ -241,10 +241,10 @@ exports[`<ApproveInfo /> renders component for approve request 1`] = `
     <div
       class="mm-box confirm-info-row mm-box--margin-top-2 mm-box--margin-bottom-2 mm-box--padding-right-2 mm-box--padding-left-2 mm-box--display-flex mm-box--flex-direction-row mm-box--flex-wrap-wrap mm-box--justify-content-space-between mm-box--color-text-default mm-box--rounded-lg"
       data-testid="gas-fee-details-speed"
-      style="overflow-wrap: anywhere; min-height: 24px; position: relative;"
+      style="overflow-wrap: anywhere; min-height: 24px; position: relative; background: transparent;"
     >
       <div
-        class="mm-box mm-box--display-flex mm-box--flex-direction-row mm-box--justify-content-center mm-box--align-items-flex-start"
+        class="mm-box mm-box--display-flex mm-box--flex-direction-row mm-box--justify-content-center mm-box--align-items-flex-start mm-box--color-info-default"
         style="align-items: center;"
       >
         <p

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

@@ -284,10 +284,10 @@ exports[`<BaseTransactionInfo /> renders component for contract interaction requ
     <div
       class="mm-box confirm-info-row mm-box--margin-top-2 mm-box--margin-bottom-2 mm-box--padding-right-2 mm-box--padding-left-2 mm-box--display-flex mm-box--flex-direction-row mm-box--flex-wrap-wrap mm-box--justify-content-space-between mm-box--color-text-default mm-box--rounded-lg"
       data-testid="gas-fee-details-speed"
-      style="overflow-wrap: anywhere; min-height: 24px; position: relative;"
+      style="overflow-wrap: anywhere; min-height: 24px; position: relative; background: transparent;"
     >
       <div
-        class="mm-box mm-box--display-flex mm-box--flex-direction-row mm-box--justify-content-center mm-box--align-items-flex-start"
+        class="mm-box mm-box--display-flex mm-box--flex-direction-row mm-box--justify-content-center mm-box--align-items-flex-start mm-box--color-info-default"
         style="align-items: center;"
       >
         <p
@@ -644,10 +644,10 @@ exports[`<BaseTransactionInfo /> renders component for contract interaction requ
     <div
       class="mm-box confirm-info-row mm-box--margin-top-2 mm-box--margin-bottom-2 mm-box--padding-right-2 mm-box--padding-left-2 mm-box--display-flex mm-box--flex-direction-row mm-box--flex-wrap-wrap mm-box--justify-content-space-between mm-box--color-text-default mm-box--rounded-lg"
       data-testid="gas-fee-details-speed"
-      style="overflow-wrap: anywhere; min-height: 24px; position: relative;"
+      style="overflow-wrap: anywhere; min-height: 24px; position: relative; background: transparent;"
     >
       <div
-        class="mm-box mm-box--display-flex mm-box--flex-direction-row mm-box--justify-content-center mm-box--align-items-flex-start"
+        class="mm-box mm-box--display-flex mm-box--flex-direction-row mm-box--justify-content-center mm-box--align-items-flex-start mm-box--color-info-default"
         style="align-items: center;"
       >
         <p
@@ -1001,10 +1001,10 @@ exports[`<BaseTransactionInfo /> renders component for contract interaction requ
     <div
       class="mm-box confirm-info-row mm-box--margin-top-2 mm-box--margin-bottom-2 mm-box--padding-right-2 mm-box--padding-left-2 mm-box--display-flex mm-box--flex-direction-row mm-box--flex-wrap-wrap mm-box--justify-content-space-between mm-box--color-text-default mm-box--rounded-lg"
       data-testid="gas-fee-details-speed"
-      style="overflow-wrap: anywhere; min-height: 24px; position: relative;"
+      style="overflow-wrap: anywhere; min-height: 24px; position: relative; background: transparent;"
     >
       <div
-        class="mm-box mm-box--display-flex mm-box--flex-direction-row mm-box--justify-content-center mm-box--align-items-flex-start"
+        class="mm-box mm-box--display-flex mm-box--flex-direction-row mm-box--justify-content-center mm-box--align-items-flex-start mm-box--color-info-default"
         style="align-items: center;"
       >
         <p

ui/pages/confirmations/components/confirm/info/shared/gas-fees-details/__snapshots__/gas-fees-details.test.tsx.snap

@@ -65,10 +65,10 @@ exports[`<GasFeesDetails /> renders component for gas fees section 1`] = `
   <div
     class="mm-box confirm-info-row mm-box--margin-top-2 mm-box--margin-bottom-2 mm-box--padding-right-2 mm-box--padding-left-2 mm-box--display-flex mm-box--flex-direction-row mm-box--flex-wrap-wrap mm-box--justify-content-space-between mm-box--color-text-default mm-box--rounded-lg"
     data-testid="gas-fee-details-speed"
-    style="overflow-wrap: anywhere; min-height: 24px; position: relative;"
+    style="overflow-wrap: anywhere; min-height: 24px; position: relative; background: transparent;"
   >
     <div
-      class="mm-box mm-box--display-flex mm-box--flex-direction-row mm-box--justify-content-center mm-box--align-items-flex-start"
+      class="mm-box mm-box--display-flex mm-box--flex-direction-row mm-box--justify-content-center mm-box--align-items-flex-start mm-box--color-info-default"
       style="align-items: center;"
     >
       <p

ui/pages/confirmations/components/confirm/info/shared/gas-fees-details/gas-fees-details.tsx

@@ -1,10 +1,7 @@
 import { TransactionMeta } from '@metamask/transaction-controller';
 import React, { Dispatch, SetStateAction } from 'react';
 import { useSelector } from 'react-redux';
-import {
-  ConfirmInfoRow,
-  ConfirmInfoRowVariant,
-} from '../../../../../../../components/app/confirm/info/row';
+import { ConfirmInfoRowVariant } from '../../../../../../../components/app/confirm/info/row';
 import { Box } from '../../../../../../../components/component-library';
 import {
   AlignItems,
@@ -19,6 +16,8 @@ import { useFeeCalculations } from '../../hooks/useFeeCalculations';
 import { useSupportsEIP1559 } from '../../hooks/useSupportsEIP1559';
 import { EditGasFeesRow } from '../edit-gas-fees-row/edit-gas-fees-row';
 import { GasFeesRow } from '../gas-fees-row/gas-fees-row';
+import { ConfirmInfoAlertRow } from '../../../../../../../components/app/confirm/info/row/alert-row/alert-row';
+import { RowAlertKey } from '../../../../../../../components/app/confirm/info/row/constants';
 
 export const GasFeesDetails = ({
   setShowCustomizeGasPopover,
@@ -83,18 +82,20 @@ export const GasFeesDetails = ({
         </>
       )}
       {supportsEIP1559 && (
-        <ConfirmInfoRow
+        <ConfirmInfoAlertRow
+          alertKey={RowAlertKey.Speed}
           data-testid="gas-fee-details-speed"
           label={t('speed')}
           variant={ConfirmInfoRowVariant.Default}
+          ownerId={transactionMeta.id}
         >
           <Box display={Display.Flex} alignItems={AlignItems.center}>
             <GasTiming
               maxFeePerGas={maxFeePerGas}
               maxPriorityFeePerGas={maxPriorityFeePerGas}
             />
           </Box>
-        </ConfirmInfoRow>
+        </ConfirmInfoAlertRow>
       )}
       {showAdvancedDetails && (
         <GasFeesRow

ui/pages/confirmations/components/confirm/info/shared/gas-fees-section/__snapshots__/gas-fees-section.test.tsx.snap

@@ -71,10 +71,10 @@ exports[`<GasFeesSection /> renders component for gas fees section 1`] = `
     <div
       class="mm-box confirm-info-row mm-box--margin-top-2 mm-box--margin-bottom-2 mm-box--padding-right-2 mm-box--padding-left-2 mm-box--display-flex mm-box--flex-direction-row mm-box--flex-wrap-wrap mm-box--justify-content-space-between mm-box--color-text-default mm-box--rounded-lg"
       data-testid="gas-fee-details-speed"
-      style="overflow-wrap: anywhere; min-height: 24px; position: relative;"
+      style="overflow-wrap: anywhere; min-height: 24px; position: relative; background: transparent;"
     >
       <div
-        class="mm-box mm-box--display-flex mm-box--flex-direction-row mm-box--justify-content-center mm-box--align-items-flex-start"
+        class="mm-box mm-box--display-flex mm-box--flex-direction-row mm-box--justify-content-center mm-box--align-items-flex-start mm-box--color-info-default"
         style="align-items: center;"
       >
         <p