feat: show banner for delayed bridge tx (#28849)

<!--
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**

<!--
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?
-->

This PR adds a banner to tell users to reach out to Support if the
Bridge tx is delayed.

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

## **Related issues**


## **Manual testing steps**

1. Start a Bridge tx
2. Wait a bit
3. Banner should appear

## **Screenshots/Recordings**

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

### **Before**

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

### **After**

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



https://github.com/user-attachments/assets/51e288e8-aa98-484c-b851-34eb471471e9




## **Pre-merge author checklist**

- [x] I've followed [MetaMask Contributor
Docs](https://github.com/MetaMask/contributor-docs) and [MetaMask
Extension Coding
Standards](https://github.com/MetaMask/metamask-extension/blob/main/.github/guidelines/CODING_GUIDELINES.md).
- [x] I've completed the PR template to the best of my ability
- [x] I’ve included tests if applicable
- [x] I’ve documented my code using [JSDoc](https://jsdoc.app/) format
if applicable
- [x] I’ve applied the right labels on the PR (see [labeling
guidelines](https://github.com/MetaMask/metamask-extension/blob/main/.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.

shared/types/bridge-status.ts

@@ -119,7 +119,7 @@ export type BridgeHistoryItem = {
   txMetaId: string; // Need this to handle STX that might not have a txHash immediately
   quote: Quote;
   status: StatusResponse;
-  startTime?: number;
+  startTime?: number; // timestamp in ms
   estimatedProcessingTimeInSeconds: number;
   slippagePercentage: number;
   completionTime?: number;

ui/pages/bridge/transaction-details/transaction-details.test.tsx

@@ -0,0 +1,50 @@
+import {
+  BridgeHistoryItem,
+  StatusTypes,
+} from '../../../../shared/types/bridge-status';
+import { getIsDelayed } from './transaction-details';
+
+describe('transaction-details', () => {
+  describe('getIsDelayed', () => {
+    it('returns false when status is not PENDING', () => {
+      const result = getIsDelayed(StatusTypes.COMPLETE, {
+        startTime: Date.now(),
+        estimatedProcessingTimeInSeconds: 60,
+      } as BridgeHistoryItem);
+      expect(result).toBe(false);
+    });
+
+    it('returns false when bridgeHistoryItem is undefined', () => {
+      const result = getIsDelayed(StatusTypes.PENDING, undefined);
+      expect(result).toBe(false);
+    });
+
+    it('returns false when startTime is undefined', () => {
+      const result = getIsDelayed(StatusTypes.PENDING, {
+        startTime: undefined,
+        estimatedProcessingTimeInSeconds: 60,
+      } as BridgeHistoryItem);
+      expect(result).toBe(false);
+    });
+
+    it('returns false when current time is less than estimated completion time', () => {
+      const result = getIsDelayed(StatusTypes.PENDING, {
+        startTime: Date.now() - 1000,
+        estimatedProcessingTimeInSeconds: 60,
+      } as BridgeHistoryItem);
+
+      expect(result).toBe(false);
+    });
+
+    it('returns true when current time exceeds estimated completion time', () => {
+      const startTime = Date.now() - 61 * 1000;
+
+      const result = getIsDelayed(StatusTypes.PENDING, {
+        startTime,
+        estimatedProcessingTimeInSeconds: 60,
+      } as BridgeHistoryItem);
+
+      expect(result).toBe(true);
+    });
+  });
+});

ui/pages/bridge/transaction-details/transaction-details.tsx

@@ -1,14 +1,17 @@
-import React from 'react';
+import React, { useContext } from 'react';
 import { useSelector } from 'react-redux';
 import { useHistory, useParams } from 'react-router-dom';
 import { NetworkConfiguration } from '@metamask/network-controller';
 import { TransactionMeta } from '@metamask/transaction-controller';
 import {
   AvatarNetwork,
   AvatarNetworkSize,
+  BannerAlert,
+  BannerAlertSeverity,
   Box,
   ButtonIcon,
   ButtonIconSize,
+  ButtonLink,
   IconName,
   Text,
 } from '../../../components/component-library';
@@ -21,7 +24,10 @@ import { MetaMaskReduxState } from '../../../store/store';
 import { hexToDecimal } from '../../../../shared/modules/conversion.utils';
 import UserPreferencedCurrencyDisplay from '../../../components/app/user-preferenced-currency-display/user-preferenced-currency-display.component';
 import { EtherDenomination } from '../../../../shared/constants/common';
-import { PRIMARY } from '../../../helpers/constants/common';
+import {
+  PRIMARY,
+  SUPPORT_REQUEST_LINK,
+} from '../../../helpers/constants/common';
 import CurrencyDisplay from '../../../components/ui/currency-display/currency-display.component';
 import {
   BridgeHistoryItem,
@@ -39,6 +45,12 @@ import { ConfirmInfoRowDivider as Divider } from '../../../components/app/confir
 import { useI18nContext } from '../../../hooks/useI18nContext';
 import { CHAIN_ID_TO_NETWORK_IMAGE_URL_MAP } from '../../../../shared/constants/network';
 import { selectedAddressTxListSelector } from '../../../selectors';
+import {
+  MetaMetricsContextProp,
+  MetaMetricsEventCategory,
+  MetaMetricsEventName,
+} from '../../../../shared/constants/metametrics';
+import { MetaMetricsContext } from '../../../contexts/metametrics';
 import TransactionDetailRow from './transaction-detail-row';
 import BridgeExplorerLinks from './bridge-explorer-links';
 import BridgeStepList from './bridge-step-list';
@@ -79,6 +91,24 @@ const getBridgeAmount = ({
   return undefined;
 };
 
+/**
+ * @param status - The status of the bridge history item
+ * @param bridgeHistoryItem - The bridge history item
+ * @returns Whether the bridge history item is delayed
+ */
+export const getIsDelayed = (
+  status: StatusTypes,
+  bridgeHistoryItem?: BridgeHistoryItem,
+) => {
+  return Boolean(
+    status === StatusTypes.PENDING &&
+      bridgeHistoryItem?.startTime &&
+      Date.now() >
+        bridgeHistoryItem.startTime +
+          bridgeHistoryItem.estimatedProcessingTimeInSeconds * 1000,
+  );
+};
+
 const StatusToColorMap: Record<StatusTypes, TextColor> = {
   [StatusTypes.PENDING]: TextColor.warningDefault,
   [StatusTypes.COMPLETE]: TextColor.successDefault,
@@ -88,6 +118,7 @@ const StatusToColorMap: Record<StatusTypes, TextColor> = {
 
 const CrossChainSwapTxDetails = () => {
   const t = useI18nContext();
+  const trackEvent = useContext(MetaMetricsContext);
   const rootState = useSelector((state) => state);
   const history = useHistory();
   const { srcTxMetaId } = useParams<{ srcTxMetaId: string }>();
@@ -141,6 +172,7 @@ const CrossChainSwapTxDetails = () => {
     : undefined;
 
   const bridgeAmount = getBridgeAmount({ bridgeHistoryItem });
+  const isDelayed = getIsDelayed(status, bridgeHistoryItem);
 
   return (
     <div className="bridge">
@@ -164,6 +196,41 @@ const CrossChainSwapTxDetails = () => {
             flexDirection={FlexDirection.Column}
             gap={4}
           >
+            {isDelayed && (
+              <BannerAlert
+                title={t('bridgeTxDetailsDelayedTitle')}
+                severity={BannerAlertSeverity.Warning}
+              >
+                <Text display={Display.Flex} alignItems={AlignItems.center}>
+                  {t('bridgeTxDetailsDelayedDescription')}&nbsp;
+                  <ButtonLink
+                    externalLink
+                    href={SUPPORT_REQUEST_LINK}
+                    onClick={() => {
+                      trackEvent(
+                        {
+                          category: MetaMetricsEventCategory.Home,
+                          event: MetaMetricsEventName.SupportLinkClicked,
+                          properties: {
+                            url: SUPPORT_REQUEST_LINK,
+                            location: 'Bridge Tx Details',
+                          },
+                        },
+                        {
+                          contextPropsIntoEventProperties: [
+                            MetaMetricsContextProp.PageTitle,
+                          ],
+                        },
+                      );
+                    }}
+                  >
+                    {t('bridgeTxDetailsDelayedDescriptionSupport')}
+                  </ButtonLink>
+                  .
+                </Text>
+              </BannerAlert>
+            )}
+
             {status !== StatusTypes.COMPLETE &&
               (bridgeHistoryItem || srcChainTxMeta) && (
                 <BridgeStepList