feat: Add link to pending transaction alert (#28721)

<!--
Please submit this PR as a draft initially.
Do not mark it as "Ready for review" until the template has been
completely filled out, and PR status checks have passed at least once.
-->

## **Description**

This PR substitutes a purely text based alert for pending transactions
with one that includes a hyperlink to the docs.

<!--
Write a short description of the changes included in this pull request,
also include relevant motivation and context. Have in mind the following
questions:
1. What is the reason for the change?
2. What is the improvement/solution?
-->

[![Open in GitHub
Codespaces](https://github.com/codespaces/badge.svg)](https://codespaces.new/MetaMask/metamask-extension/pull/28721?quickstart=1)

## **Related issues**

Fixes: #28308

## **Manual testing steps**

1. Go to this page...
2.
3.

## **Screenshots/Recordings**

<!-- If applicable, add screenshots and/or recordings to visualize the
before and after of your change. -->

### **Before**

<!-- [screenshots/recordings] -->

### **After**

<!-- [screenshots/recordings] -->

![Screenshot 2024-12-02 at 11 13
58](https://github.com/user-attachments/assets/146b353d-a515-40db-95cd-5e091700cf18)


## **Pre-merge author checklist**

- [ ] I've followed [MetaMask Contributor
Docs](https://github.com/MetaMask/contributor-docs) and [MetaMask
Extension Coding
Standards](https://github.com/MetaMask/metamask-extension/blob/develop/.github/guidelines/CODING_GUIDELINES.md).
- [ ] I've completed the PR template to the best of my ability
- [ ] I’ve included tests if applicable
- [ ] I’ve documented my code using [JSDoc](https://jsdoc.app/) format
if applicable
- [ ] I’ve applied the right labels on the PR (see [labeling
guidelines](https://github.com/MetaMask/metamask-extension/blob/develop/.github/guidelines/LABELING_GUIDELINES.md)).
Not required for external contributors.

## **Pre-merge reviewer checklist**

- [ ] I've manually tested the PR (e.g. pull and build branch, run the
app, test code being changed).
- [ ] I confirm that this PR addresses all acceptance criteria described
in the ticket it closes and includes the necessary testing evidence such
as recordings and or screenshots.

jest.integration.config.js

@@ -25,8 +25,7 @@ module.exports = {
   setupFilesAfterEnv: ['<rootDir>/test/integration/config/setupAfter.js'],
   testMatch: ['<rootDir>/test/integration/**/*.test.(js|ts|tsx)'],
   testPathIgnorePatterns: ['<rootDir>/test/integration/config/*'],
-  // This was increased from 5500 to 10000 to when lazy loading was introduced
-  testTimeout: 10000,
+  testTimeout: 15000,
   // We have to specify the environment we are running in, which is jsdom. The
   // default is 'node'. This can be modified *per file* using a comment at the
   // head of the file. So it may be worthwhile to switch to 'node' in any

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

@@ -362,7 +362,7 @@ describe('Contract Interaction Confirmation Alerts', () => {
     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.',
+      "This transaction won't go through until a previous transaction is complete. Learn how to cancel or speed up a transaction.",
     );
   });
 

ui/components/app/alert-system/alert-modal/alert-modal.tsx

@@ -164,12 +164,15 @@ function AlertDetails({
     >
       {customDetails ?? (
         <Box>
-          <Text
-            variant={TextVariant.bodyMd}
-            data-testid="alert-modal__selected-alert"
-          >
-            {selectedAlert.message}
-          </Text>
+          {Boolean(selectedAlert.content) && selectedAlert.content}
+          {Boolean(selectedAlert.message) && (
+            <Text
+              variant={TextVariant.bodyMd}
+              data-testid="alert-modal__selected-alert"
+            >
+              {selectedAlert.message}
+            </Text>
+          )}
           {selectedAlert.alertDetails?.length ? (
             <Text variant={TextVariant.bodyMdBold} marginTop={1}>
               {t('alertModalDetails')}

ui/components/app/alert-system/general-alert/general-alert.tsx

@@ -21,13 +21,14 @@ import { AlertProvider } from '../alert-provider';
 import { AlertSeverity } from '../../../../ducks/confirm-alerts/confirm-alerts';
 
 export type GeneralAlertProps = {
-  description: string;
+  description?: string;
   details?: React.ReactNode | string[];
   onClickSupportLink?: () => void;
   provider?: SecurityProvider;
   reportUrl?: string;
   severity: AlertSeverity;
   title?: string;
+  children?: React.ReactNode;
 };
 
 function ReportLink({
@@ -119,6 +120,7 @@ function GeneralAlert({
       description={description}
       {...props}
     >
+      {props.children}
       <AlertDetails
         details={details}
         reportUrl={reportUrl}

ui/ducks/confirm-alerts/confirm-alerts.ts

@@ -1,3 +1,4 @@
+import { ReactNode } from 'react';
 import { SecurityProvider } from '../../../shared/constants/security-provider';
 import { Severity } from '../../helpers/constants/design-system';
 
@@ -33,11 +34,6 @@ export type Alert = {
    */
   isBlocking?: boolean;
 
-  /**
-   * The message is a summary of the alert details.
-   */
-  message: string;
-
   /**
    * The security provider associated with the alert.
    */
@@ -57,7 +53,31 @@ export type Alert = {
    * URL to report issue.
    */
   reportUrl?: string;
-};
+} & MessageOrContent;
+
+type MessageOrContent =
+  | {
+      /**
+       * The message is a summary of the alert details.
+       */
+      message: string;
+
+      /**
+       * Alert summary components can be used as an alternative to a message.
+       */
+      content?: ReactNode;
+    }
+  | {
+      /**
+       * The message is a summary of the alert details.
+       */
+      message?: string;
+
+      /**
+       * Alert summary components can be used as an alternative to a message.
+       */
+      content: ReactNode;
+    };
 
 /**
  * Represents the state of confirm alerts in the application.

ui/pages/confirmations/components/confirm/title/title.tsx

@@ -43,6 +43,7 @@ function ConfirmBannerAlert({ ownerId }: { ownerId: string }) {
             provider={alert.provider}
             details={alert.alertDetails}
             reportUrl={alert.reportUrl}
+            children={alert.content}
           />
         </Box>
       ))}

ui/pages/confirmations/hooks/alerts/transactions/PendingTransactionAlertMessage.tsx

@@ -0,0 +1,32 @@
+import React from 'react';
+import { ButtonLink, Text } from '../../../../../components/component-library';
+import {
+  TextColor,
+  TextVariant,
+} from '../../../../../helpers/constants/design-system';
+import ZENDESK_URLS from '../../../../../helpers/constants/zendesk-url';
+import { useI18nContext } from '../../../../../hooks/useI18nContext';
+
+export const PendingTransactionAlertMessage = () => {
+  const t = useI18nContext();
+
+  return (
+    <Text
+      variant={TextVariant.bodyMd}
+      color={TextColor.textDefault}
+      data-testid="alert-modal__selected-alert"
+    >
+      {t('pendingTransactionAlertMessage', [
+        <ButtonLink
+          href={ZENDESK_URLS.SPEEDUP_CANCEL}
+          key="link"
+          target="_blank"
+          rel="noreferrer noopener"
+          color={TextColor.primaryDefault}
+        >
+          {t('pendingTransactionAlertMessageHyperlink')}
+        </ButtonLink>,
+      ])}
+    </Text>
+  );
+};