From 1b1bf84613d6157000ab94a1aca1e9e04c7d4bab Mon Sep 17 00:00:00 2001
From: Pedro Figueiredo <pedro.figueiredo@consensys.net>
Date: Wed, 4 Dec 2024 15:03:40 +0000
Subject: [PATCH] Address PR review

---
 .../alert-system/alert-modal/alert-modal.tsx  |  5 ++-
 .../general-alert/general-alert.tsx           |  6 ++--
 .../banner-base/banner-base.types.ts          |  2 +-
 ui/ducks/confirm-alerts/confirm-alerts.ts     | 31 +++++++++++++++----
 .../components/confirm/title/title.tsx        |  1 +
 .../usePendingTransactionAlerts.ts            |  2 +-
 6 files changed, 34 insertions(+), 13 deletions(-)

diff --git a/ui/components/app/alert-system/alert-modal/alert-modal.tsx b/ui/components/app/alert-system/alert-modal/alert-modal.tsx
index 446b810652cf..2eb78fba44c1 100644
--- a/ui/components/app/alert-system/alert-modal/alert-modal.tsx
+++ b/ui/components/app/alert-system/alert-modal/alert-modal.tsx
@@ -164,15 +164,14 @@ function AlertDetails({
     >
       {customDetails ?? (
         <Box>
-          {typeof selectedAlert.message === 'string' ? (
+          {Boolean(selectedAlert.content) && selectedAlert.content}
+          {Boolean(selectedAlert.message) && (
             <Text
               variant={TextVariant.bodyMd}
               data-testid="alert-modal__selected-alert"
             >
               {selectedAlert.message}
             </Text>
-          ) : (
-            selectedAlert.message
           )}
           {selectedAlert.alertDetails?.length ? (
             <Text variant={TextVariant.bodyMdBold} marginTop={1}>
diff --git a/ui/components/app/alert-system/general-alert/general-alert.tsx b/ui/components/app/alert-system/general-alert/general-alert.tsx
index 1f37d4babbf0..5c222902b3ab 100644
--- a/ui/components/app/alert-system/general-alert/general-alert.tsx
+++ b/ui/components/app/alert-system/general-alert/general-alert.tsx
@@ -1,4 +1,4 @@
-import React, { ReactNode } from 'react';
+import React from 'react';
 import {
   BannerAlert,
   Box,
@@ -21,13 +21,14 @@ import { AlertProvider } from '../alert-provider';
 import { AlertSeverity } from '../../../../ducks/confirm-alerts/confirm-alerts';
 
 export type GeneralAlertProps = {
-  description: string | ReactNode;
+  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}
diff --git a/ui/components/component-library/banner-base/banner-base.types.ts b/ui/components/component-library/banner-base/banner-base.types.ts
index 6f86c1d12901..61e7c6085e07 100644
--- a/ui/components/component-library/banner-base/banner-base.types.ts
+++ b/ui/components/component-library/banner-base/banner-base.types.ts
@@ -31,7 +31,7 @@ export interface BannerBaseStyleUtilityProps extends StyleUtilityProps {
   /**
    * The description is the content area below BannerBase title
    */
-  description?: string | React.ReactNode;
+  description?: string;
   /**
    * Additional props to pass to the `Text` component used for the `description` text
    */
diff --git a/ui/ducks/confirm-alerts/confirm-alerts.ts b/ui/ducks/confirm-alerts/confirm-alerts.ts
index 68bb4f152f04..586ed181977b 100644
--- a/ui/ducks/confirm-alerts/confirm-alerts.ts
+++ b/ui/ducks/confirm-alerts/confirm-alerts.ts
@@ -34,11 +34,6 @@ export type Alert = {
    */
   isBlocking?: boolean;
 
-  /**
-   * The message is a summary of the alert details.
-   */
-  message: string | ReactNode;
-
   /**
    * The security provider associated with the alert.
    */
@@ -58,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.
diff --git a/ui/pages/confirmations/components/confirm/title/title.tsx b/ui/pages/confirmations/components/confirm/title/title.tsx
index 83efc26406bf..e8148912cac1 100644
--- a/ui/pages/confirmations/components/confirm/title/title.tsx
+++ b/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>
       ))}
diff --git a/ui/pages/confirmations/hooks/alerts/transactions/usePendingTransactionAlerts.ts b/ui/pages/confirmations/hooks/alerts/transactions/usePendingTransactionAlerts.ts
index 5394dcfbcf09..6ef15b5ff41f 100644
--- a/ui/pages/confirmations/hooks/alerts/transactions/usePendingTransactionAlerts.ts
+++ b/ui/pages/confirmations/hooks/alerts/transactions/usePendingTransactionAlerts.ts
@@ -30,7 +30,7 @@ export function usePendingTransactionAlerts(): Alert[] {
       {
         field: RowAlertKey.Speed,
         key: 'pendingTransactions',
-        message: PendingTransactionAlertMessage(),
+        content: PendingTransactionAlertMessage(),
         reason: t('alertReasonPendingTransactions'),
         severity: Severity.Warning,
       },