feat: shield-confirmation-alert-update

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

@@ -124,7 +124,7 @@ function AlertHeader({
   customTitle?: string;
 }) {
   const t = useI18nContext();
-  const { severity, reason } = selectedAlert;
+  const { severity, reason, iconName, iconColor } = selectedAlert;
   const severityStyle = getSeverityStyle(severity);
   return (
     <Box
@@ -135,12 +135,13 @@ function AlertHeader({
     >
       <Icon
         name={
-          severity === Severity.Info || severity === Severity.Success
+          iconName ??
+          (severity === Severity.Info || severity === Severity.Success
             ? IconName.Info
-            : IconName.Danger
+            : IconName.Danger)
         }
         size={IconSize.Xl}
-        color={severityStyle.icon}
+        color={iconColor ?? severityStyle.icon}
       />
       <Text
         variant={TextVariant.headingSm}
@@ -292,11 +293,13 @@ function AcknowledgeButton({
   isConfirmed,
   hasActions,
   isBlocking,
+  label,
 }: {
   onAcknowledgeClick: () => void;
   isConfirmed: boolean;
   hasActions?: boolean;
   isBlocking?: boolean;
+  label?: string;
 }) {
   const t = useI18nContext();
 
@@ -309,7 +312,7 @@ function AcknowledgeButton({
       data-testid="alert-modal-button"
       disabled={!isBlocking && !isConfirmed}
     >
-      {t('gotIt')}
+      {label ?? t('gotIt')}
     </Button>
   );
 }
@@ -456,10 +459,14 @@ export function AlertModal({
             {customAcknowledgeButton ?? (
               <>
                 <AcknowledgeButton
-                  onAcknowledgeClick={onAcknowledgeClick}
+                  onAcknowledgeClick={
+                    selectedAlert.customAcknowledgeButtonOnClick ??
+                    onAcknowledgeClick
+                  }
                   isConfirmed={acknowledgementRequired ? isConfirmed : true}
                   hasActions={Boolean(selectedAlert.actions)}
                   isBlocking={selectedAlert.isBlocking}
+                  label={selectedAlert.customAcknowledgeButtonText}
                 />
                 {(selectedAlert.actions ?? []).map(
                   (action: { key: string; label: string }) => (

ui/components/app/alert-system/inline-alert/index.scss

@@ -18,4 +18,14 @@
     color: var(--color-success-default);
     background-color: var(--color-success-muted);
   }
+
+  &__disabled {
+    color: var(--color-text-alternative);
+    background-color: var(--color-background-muted);
+  }
+
+  &__pill {
+    padding: 2px 5px;
+    border-radius: 6px;
+  }
 }

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

@@ -4,9 +4,11 @@ import {
   AlignItems,
   BorderRadius,
   Display,
+  IconColor,
   Severity,
   TextColor,
   TextVariant,
+  BackgroundColor,
 } from '../../../../helpers/constants/design-system';
 import { useI18nContext } from '../../../../hooks/useI18nContext';
 import {
@@ -30,6 +32,16 @@ export type InlineAlertProps = {
   textOverride?: string;
   /** Whether to show the arrow icon */
   showArrow?: boolean;
+  /** Whether to show the inline alert as a pill style */
+  pill?: boolean;
+  /** The name of the icon to show */
+  iconName?: IconName;
+  /** The color of the icon to show */
+  iconColor?: IconColor;
+  /** Whether to show the icon on the right side of the inline alert */
+  iconRight?: boolean;
+  /** The background color of the inline alert */
+  backgroundColor?: BackgroundColor;
 };
 
 // TODO: Fix in https://github.com/MetaMask/metamask-extension/issues/31860
@@ -41,9 +53,25 @@ export default function InlineAlert({
   style,
   textOverride,
   showArrow = true,
+  pill = false,
+  iconName,
+  iconColor,
+  iconRight,
+  backgroundColor,
 }: InlineAlertProps) {
   const t = useI18nContext();
 
+  const renderIcon = () => (
+    <Icon
+      name={
+        iconName ??
+        (severity === Severity.Danger ? IconName.Danger : IconName.Info)
+      }
+      size={IconSize.Sm}
+      color={iconColor}
+    />
+  );
+
   return (
     <Box display={Display.Flex}>
       <Box
@@ -59,20 +87,21 @@ export default function InlineAlert({
           'inline-alert__warning': severity === Severity.Warning,
           'inline-alert__danger': severity === Severity.Danger,
           'inline-alert__success': severity === Severity.Success,
+          'inline-alert__disabled': severity === Severity.Disabled,
+          'inline-alert__pill': pill,
         })}
+        backgroundColor={backgroundColor}
         style={{
           cursor: onClick ? 'pointer' : 'default',
           ...style,
         }}
         onClick={onClick}
       >
-        <Icon
-          name={severity === Severity.Danger ? IconName.Danger : IconName.Info}
-          size={IconSize.Sm}
-        />
+        {!iconRight && renderIcon()}
         <Text variant={TextVariant.bodySm} color={TextColor.inherit}>
           {textOverride ?? t('alert')}
         </Text>
+        {iconRight && renderIcon()}
         {showArrow && <Icon name={IconName.ArrowRight} size={IconSize.Xs} />}
       </Box>
     </Box>

ui/components/app/confirm/info/row/alert-row/alert-row.tsx

@@ -111,6 +111,11 @@ export const ConfirmInfoAlertRow = ({
         showArrow={selectedAlertShowArrow}
         textOverride={selectedAlertInlineAlertText}
         onClick={onClickHandler}
+        iconName={selectedAlert?.iconName}
+        iconColor={selectedAlert?.iconColor}
+        iconRight={selectedAlert?.inlineAlertIconRight}
+        pill={selectedAlert?.inlineAlertTextPill}
+        backgroundColor={selectedAlert?.inlineAlertTextBackgroundColor}
       />
     </Box>
   ) : (

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

@@ -1,12 +1,18 @@
 import { ReactNode } from 'react';
 import { SecurityProvider } from '../../../shared/constants/security-provider';
-import { Severity } from '../../helpers/constants/design-system';
+import {
+  BackgroundColor,
+  IconColor,
+  Severity,
+} from '../../helpers/constants/design-system';
+import { IconName } from '../../components/component-library';
 
 export type AlertSeverity =
   | Severity.Danger
   | Severity.Info
   | Severity.Success
-  | Severity.Warning;
+  | Severity.Warning
+  | Severity.Disabled;
 
 /**
  * A confirmable alert to be displayed in the UI.
@@ -32,6 +38,31 @@ export type Alert = {
    */
   inlineAlertText?: string;
 
+  /**
+   * The background color of the inline alert.
+   */
+  inlineAlertTextBackgroundColor?: BackgroundColor;
+
+  /**
+   * Whether to show the inline alert as a pill style.
+   */
+  inlineAlertTextPill?: boolean;
+
+  /**
+   * Whether to show the icon on the right side of the inline alert.
+   */
+  inlineAlertIconRight?: boolean;
+
+  /**
+   * The name of the icon to show.
+   */
+  iconName?: IconName;
+
+  /**
+   * The color of the icon to show.
+   */
+  iconColor?: IconColor;
+
   /**
    * Whether the alert is a blocker and un-acknowledgeable, preventing the user
    * from proceeding and relying on actions to proceed. The default is `false`.
@@ -83,6 +114,16 @@ export type Alert = {
    * Whether to show the arrow icon on the inline alert.
    */
   showArrow?: boolean;
+
+  /**
+   * The custom button text for acknowledging the alert in modal.
+   */
+  customAcknowledgeButtonText?: string;
+
+  /**
+   * The custom button onClick handler for acknowledging the alert in modal.
+   */
+  customAcknowledgeButtonOnClick?: () => void;
 } & MessageOrContent;
 
 type MessageOrContent =

ui/helpers/constants/design-system.ts

@@ -932,6 +932,7 @@ export enum Severity {
   Warning = 'warning',
   Info = 'info',
   Success = 'success',
+  Disabled = 'disabled',
 }
 
 /**

ui/hooks/useAlerts.test.ts

@@ -70,6 +70,7 @@ describe('useAlerts', () => {
       [Severity.Warning]: 2,
       [Severity.Info]: 1,
       [Severity.Success]: 0,
+      [Severity.Disabled]: 0,
     };
 
     return [...alerts].sort(

ui/hooks/useAlerts.ts

@@ -131,6 +131,7 @@ function sortAlertsBySeverity(alerts: Alert[]): Alert[] {
     [Severity.Warning]: 2,
     [Severity.Info]: 1,
     [Severity.Success]: 0,
+    [Severity.Disabled]: 0,
   };
 
   return [...alerts].sort(

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

@@ -262,7 +262,8 @@ const Footer = () => {
     navigateNext(currentConfirmation.id);
   }, [navigateNext, onCancel, shouldThrottleOrigin, currentConfirmation]);
 
-  const isShowShieldFooterCoverageIndicator = useEnableShieldCoverageChecks();
+  const { isEnabled, isPaused } = useEnableShieldCoverageChecks();
+  const isShowShieldFooterCoverageIndicator = isEnabled || isPaused;
 
   return (
     <>

ui/pages/confirmations/components/confirm/footer/shield-footer-coverage-indicator/shield-footer-coverage-indicator.test.tsx

@@ -10,7 +10,10 @@ import ShieldFooterCoverageIndicator from './shield-footer-coverage-indicator';
 jest.mock(
   '../../../../hooks/transactions/useEnableShieldCoverageChecks',
   () => ({
-    useEnableShieldCoverageChecks: jest.fn(() => true),
+    useEnableShieldCoverageChecks: jest.fn(() => ({
+      isEnabled: true,
+      isPaused: false,
+    })),
   }),
 );
 

ui/pages/confirmations/components/confirm/footer/shield-footer-coverage-indicator/shield-footer-coverage-indicator.tsx

@@ -18,7 +18,8 @@ const ShieldFooterCoverageIndicator = () => {
   const { currentConfirmation } = useConfirmContext<
     TransactionMeta | SignatureRequest
   >();
-  const isShowShieldFooterCoverageIndicator = useEnableShieldCoverageChecks();
+  const { isEnabled, isPaused } = useEnableShieldCoverageChecks();
+  const isShowShieldFooterCoverageIndicator = isEnabled || isPaused;
 
   if (!isShowShieldFooterCoverageIndicator) {
     return null;