Address PR review

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}>

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}

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

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.

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/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,
       },