fix: addressing feedbacks in typed sign alerts (#25163)

MetaMask · Jun 11, 2024 · 1be8a26 · 1be8a26
1 parent c81284f
commit 1be8a26
Show file tree

Hide file tree

Showing 6 changed files with 19 additions and 8 deletions.
diff --git a/app/_locales/en/messages.json b/app/_locales/en/messages.json
diff --git a/ui/components/app/alert-system/alert-modal/alert-modal.tsx b/ui/components/app/alert-system/alert-modal/alert-modal.tsx
@@ -137,7 +137,11 @@ function AlertHeader({
 
 function BlockaidAlertDetails() {
   const t = useI18nContext();
-  return <Text textAlign={TextAlign.Center}>{t('blockaidAlertInfo')}</Text>;
+  return (
+    <Text textAlign={TextAlign.Center} variant={TextVariant.bodyMd}>
+      {t('blockaidAlertInfo')}
+    </Text>
+  );
 }
 
 function AlertDetails({

diff --git a/ui/components/app/alert-system/general-alert/general-alert.tsx b/ui/components/app/alert-system/general-alert/general-alert.tsx
@@ -11,6 +11,7 @@ import { DisclosureVariant } from '../../../ui/disclosure/disclosure.constants';
 import { useI18nContext } from '../../../../hooks/useI18nContext';
 import {
   Display,
+  FontWeight,
   TextVariant,
 } from '../../../../helpers/constants/design-system';
 import { SecurityProvider } from '../../../../../shared/constants/security-provider';
@@ -79,7 +80,12 @@ function AlertDetails({
           <Box as="ul" className={'alert-modal__alert-details'} paddingLeft={6}>
             {details.map((detail, index) => (
               <Box as="li" key={`disclosure-detail-${index}`}>
-                <Text variant={TextVariant.bodySm}>{detail}</Text>
+                <Text
+                  variant={TextVariant.bodyMdMedium}
+                  fontWeight={FontWeight.Normal}
+                >
+                  {detail}
+                </Text>
               </Box>
             ))}
           </Box>

diff --git a/ui/hooks/useAlerts.ts b/ui/hooks/useAlerts.ts
@@ -62,7 +62,7 @@ const useAlerts = (ownerId: string) => {
       !isAlertConfirmed(alert.key) && alert.severity === Severity.Danger,
   );
   const hasAlerts = alerts.length > 0;
-  const hasDangerAlerts = alerts.some(
+  const dangerAlerts = alerts.filter(
     (alert) => alert.severity === Severity.Danger,
   );
   const hasUnconfirmedDangerAlerts = unconfirmedDangerAlerts.length > 0;
@@ -73,7 +73,8 @@ const useAlerts = (ownerId: string) => {
     generalAlerts,
     getFieldAlerts,
     hasAlerts,
-    hasDangerAlerts,
+    dangerAlerts,
+    hasDangerAlerts: dangerAlerts?.length > 0,
     hasUnconfirmedDangerAlerts,
     isAlertConfirmed,
     setAlertConfirmed,

diff --git a/ui/pages/confirmations/components/confirm/footer/footer.test.tsx b/ui/pages/confirmations/components/confirm/footer/footer.test.tsx
@@ -202,7 +202,7 @@ describe('ConfirmFooter', () => {
     };
     it('renders the review alerts button when there are unconfirmed alerts', () => {
       const { getByText } = render(stateWithAlertsMock);
-      expect(getByText('Review alerts')).toBeInTheDocument();
+      expect(getByText('Confirm')).toBeInTheDocument();
     });
 
     it('renders the confirm button when there are no unconfirmed alerts', () => {

diff --git a/ui/pages/confirmations/components/confirm/footer/footer.tsx b/ui/pages/confirmations/components/confirm/footer/footer.tsx
@@ -43,7 +43,7 @@ const ConfirmButton = ({
   const [confirmModalVisible, setConfirmModalVisible] =
     useState<boolean>(false);
 
-  const { alerts, hasDangerAlerts, hasUnconfirmedDangerAlerts } =
+  const { alerts, dangerAlerts, hasDangerAlerts, hasUnconfirmedDangerAlerts } =
     useAlerts(alertOwnerId);
 
   const handleCloseConfirmModal = useCallback(() => {
@@ -76,7 +76,7 @@ const ConfirmButton = ({
         size={ButtonSize.Lg}
         disabled={hasUnconfirmedDangerAlerts ? false : disabled}
       >
-        {hasUnconfirmedDangerAlerts ? t('reviewAlerts') : t('confirm')}
+        {dangerAlerts?.length > 1 ? t('reviewAlerts') : t('confirm')}
       </Button>
     </>
   );