feat: trigger alert modal on confirm button (#24049)

## **Description** This PR aims to add a button to review alerts when there are unacknowledged alerts in a confirmation Once the button is clicked the `MultipleAlerModal` is displayed enabling users to review and take action on each alert individually. If all alerts are reviewed a `ConfirmAlertModal` is displayed warning the user and with the possibility to again review all the alerts before confirming it. Create the logic to support the friction modal when all the alerts are reviewed and the confirm button is clicked. **Background** As with the inline alerts alongside the confirmation fields, the confirmation confirm button should also display all the confirmation alerts sequentially in the alert modal. In addition the confirm button should be suitably styled to indicate alerts are present. Based on [figma](https://www.figma.com/file/yUczlH2HbHaHsYijiONKx0/Warnings%2C-Alerts-and-Flags?type=design&node-id=1208-25406&mode=design).  [![Open in GitHub Codespaces](https://github.com/codespaces/badge.svg)](https://codespaces.new/MetaMask/metamask-extension/pull/24049?quickstart=1) ## **Related issues** Fixes: MetaMask/MetaMask-planning#2292 ## **Manual testing steps** Those components are currently not in use and are not available to users. It is part of the new alert system, and we will have a dedicated PR to integrate this component into the new confirmation screens. - Regression for new confirmation screens. ## **Screenshots/Recordings**  ### **Before**  ### **After** ![image](https://github.com/MetaMask/metamask-extension/assets/45455812/c16c0ded-b450-49f7-b63b-ec238c69ea9c) [frictionModal.webm](https://github.com/MetaMask/metamask-extension/assets/45455812/49badc8d-a90e-4449-81a1-4a744f5da499)  ## **Pre-merge author checklist** - [x] I’ve followed [MetaMask Coding Standards](https://github.com/MetaMask/metamask-extension/blob/develop/.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/develop/.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. --------- Co-authored-by: Matthew Walsh <[email protected]> Co-authored-by: George Marshall <[email protected]>
MetaMask · May 22, 2024 · 85d7f8a · 85d7f8a
1 parent bf76bff
commit 85d7f8a
Show file tree

Hide file tree

Showing 15 changed files with 801 additions and 152 deletions.
diff --git a/app/_locales/en/messages.json b/app/_locales/en/messages.json
diff --git a/test/data/mock-state.json b/test/data/mock-state.json
@@ -30,6 +30,10 @@
     "customTokenAmount": "10"
   },
   "confirm": {},
+  "confirmAlerts": {
+    "alerts": [],
+    "confirmed": []
+  },
   "confirmTransaction": {
     "txData": {
       "txParams": {

diff --git a/ui/components/app/confirmations/alerts/alert-modal/alert-modal.stories.tsx b/ui/components/app/confirmations/alerts/alert-modal/alert-modal.stories.tsx
@@ -1,10 +1,12 @@
 import React from 'react';
 import { AlertModal } from './alert-modal';
 import { Severity } from '../../../../../helpers/constants/design-system';
-import { Meta } from '@storybook/react';
+import { Meta, StoryFn } from '@storybook/react';
 import configureStore from '../../../../../store/store';
 import { Provider } from 'react-redux';
 import { Alert } from '../../../../../ducks/confirm-alerts/confirm-alerts';
+import { useArgs } from '@storybook/client-api';
+import { Box, Button } from '../../../../component-library';
 
 const alertsMock: Alert[] = [
   { key: 'from', severity: Severity.Danger, message: 'Description of what may happen if this alert was ignored', reason: 'Reason for the alert 1', alertDetails: ['We found the contract Petname 0xEqT3b9773b1763efa556f55ccbeb20441962d82x to be malicious',
@@ -47,8 +49,27 @@ export default {
   decorators: [(story) => <Provider store={storeMock}>{story()}</Provider>],
 } as Meta<typeof AlertModal>;
 
-export const DefaultStory = (args) => {
-  return <AlertModal alertKey={'from'} {...args} />;
+export const DefaultStory: StoryFn<typeof AlertModal> = (args) => {
+  const [{ isOpen }, updateArgs] = useArgs();
+  const handleOnClick = () => {
+    updateArgs({ isOpen: true });
+  };
+  const handleOnClose = () => {
+    updateArgs({ isOpen: false });
+  };
+  return (
+    <Box>
+      {isOpen && (
+        <AlertModal
+          {...args}
+          alertKey={'from'}
+          onClose={handleOnClose}
+          onAcknowledgeClick={handleOnClose}
+        />
+      )}
+      <Button onClick={handleOnClick} danger={true}>Open alert modal</Button>
+    </Box>
+  );
 };
 
 DefaultStory.storyName = 'Critical Alert';
diff --git a/ui/components/app/confirmations/alerts/alert-modal/alert-modal.tsx b/ui/components/app/confirmations/alerts/alert-modal/alert-modal.tsx
@@ -22,6 +22,7 @@ import {
   BlockSize,
   BorderRadius,
   Display,
+  FlexDirection,
   IconColor,
   Severity,
   TextAlign,
@@ -33,22 +34,46 @@ import useAlerts from '../../../../../hooks/useAlerts';
 import { Alert } from '../../../../../ducks/confirm-alerts/confirm-alerts';
 
 export type AlertModalProps = {
-  /** The unique key representing the specific alert field. */
+  /**
+   * The unique key representing the specific alert field.
+   */
   alertKey: string;
+  /**
+   * The custom button component for acknowledging the alert.
+   */
+  customAcknowledgeButton?: React.ReactNode;
+  /**
+   * The custom checkbox component for acknowledging the alert.
+   */
+  customAcknowledgeCheckbox?: React.ReactNode;
+  /**
+   * The custom details component for the alert.
+   */
+  customAlertDetails?: React.ReactNode;
+  /**
+   * The custom title for the alert.
+   */
+  customAlertTitle?: string;
   /**
    * The start (left) content area of ModalHeader.
-   * It override `startAccessory` of ModalHeaderDefault and by default no content is present.
+   * It overrides `startAccessory` of ModalHeaderDefault and by default no content is present.
    */
   headerStartAccessory?: React.ReactNode;
-  /** The owner ID of the relevant alert from the `confirmAlerts` reducer. */
+  /**
+   * The owner ID of the relevant alert from the `confirmAlerts` reducer.
+   */
   ownerId: string;
-  /** The function invoked when the user acknowledges the alert. */
+  /**
+   * The function invoked when the user acknowledges the alert.
+   */
   onAcknowledgeClick: () => void;
-  /** The function to be executed when the modal needs to be closed. */
+  /**
+   * The function to be executed when the modal needs to be closed.
+   */
   onClose: () => void;
 };
 
-function getSeverityStyle(severity: Severity) {
+export function getSeverityStyle(severity?: Severity) {
   switch (severity) {
     case Severity.Warning:
       return {
@@ -68,7 +93,13 @@ function getSeverityStyle(severity: Severity) {
   }
 }
 
-function AlertHeader({ selectedAlert }: { selectedAlert: Alert }) {
+function AlertHeader({
+  selectedAlert,
+  customAlertTitle,
+}: {
+  selectedAlert: Alert;
+  customAlertTitle?: string;
+}) {
   const t = useI18nContext();
   const severityStyle = getSeverityStyle(selectedAlert.severity);
   return (
@@ -95,58 +126,74 @@ function AlertHeader({ selectedAlert }: { selectedAlert: Alert }) {
           marginTop={3}
           marginBottom={4}
         >
-          {selectedAlert.reason ?? t('alert')}
+          {customAlertTitle ?? selectedAlert.reason ?? t('alert')}
         </Text>
       </Box>
     </>
   );
 }
 
-function AlertDetails({ selectedAlert }: { selectedAlert: Alert }) {
+function AlertDetails({
+  selectedAlert,
+  customAlertDetails,
+}: {
+  selectedAlert: Alert;
+  customAlertDetails?: React.ReactNode;
+}) {
   const t = useI18nContext();
   const severityStyle = getSeverityStyle(selectedAlert.severity);
   return (
-    <Box
-      key={selectedAlert.key}
-      display={Display.InlineBlock}
-      padding={2}
-      width={BlockSize.Full}
-      backgroundColor={severityStyle.background}
-      gap={2}
-      borderRadius={BorderRadius.SM}
-    >
-      <Text variant={TextVariant.bodySm}>{selectedAlert.message}</Text>
-      {selectedAlert.alertDetails?.length ? (
-        <Text variant={TextVariant.bodySmBold} marginTop={1}>
-          {t('alertModalDetails')}
-        </Text>
-      ) : null}
-
-      <Box as="ul" className={'alert-modal__alert-details'} paddingLeft={6}>
-        {selectedAlert.alertDetails?.map((detail, index) => (
-          <Box as="li" key={`${selectedAlert.key}-detail-${index}`}>
-            <Text variant={TextVariant.bodySm}>{detail}</Text>
+    <>
+      <Box
+        key={selectedAlert.key}
+        display={Display.InlineBlock}
+        padding={2}
+        width={BlockSize.Full}
+        backgroundColor={
+          customAlertDetails ? undefined : severityStyle.background
+        }
+        gap={2}
+        borderRadius={BorderRadius.SM}
+      >
+        {customAlertDetails ?? (
+          <Box>
+            <Text variant={TextVariant.bodySm}>{selectedAlert.message}</Text>
+            {selectedAlert.alertDetails?.length ? (
+              <Text variant={TextVariant.bodySmBold} marginTop={1}>
+                {t('alertModalDetails')}
+              </Text>
+            ) : null}
+            <Box
+              as="ul"
+              className={'alert-modal__alert-details'}
+              paddingLeft={6}
+            >
+              {selectedAlert.alertDetails?.map((detail, index) => (
+                <Box as="li" key={`${selectedAlert.key}-detail-${index}`}>
+                  <Text variant={TextVariant.bodySm}>{detail}</Text>
+                </Box>
+              ))}
+            </Box>
           </Box>
-        ))}
+        )}
       </Box>
-    </Box>
+    </>
   );
 }
 
-function AcknowledgeCheckbox({
+export function AcknowledgeCheckboxBase({
   selectedAlert,
-  setAlertConfirmed,
+  onCheckboxClick,
   isConfirmed,
+  label,
 }: {
   selectedAlert: Alert;
-  setAlertConfirmed: (alertKey: string, isConfirmed: boolean) => void;
+  onCheckboxClick: () => void;
   isConfirmed: boolean;
+  label?: string;
 }) {
   const t = useI18nContext();
   const severityStyle = getSeverityStyle(selectedAlert.severity);
-  const handleCheckboxClick = () => {
-    return setAlertConfirmed(selectedAlert.key, !isConfirmed);
-  };
   return (
     <Box
       display={Display.Flex}
@@ -158,10 +205,10 @@ function AcknowledgeCheckbox({
       borderRadius={BorderRadius.LG}
     >
       <Checkbox
-        label={t('alertModalAcknowledge')}
-        data-testid="alert-modal-acknowledge-checkbox"
+        label={label ?? t('alertModalAcknowledge')}
+        data-testid={'alert-modal-acknowledge-checkbox'}
         isChecked={isConfirmed}
-        onChange={handleCheckboxClick}
+        onChange={onCheckboxClick}
         alignItems={AlignItems.flexStart}
         className={'alert-modal__acknowledge-checkbox'}
       />
@@ -179,18 +226,16 @@ function AcknowledgeButton({
   const t = useI18nContext();
 
   return (
-    <>
-      <Button
-        variant={ButtonVariant.Primary}
-        width={BlockSize.Full}
-        onClick={onAcknowledgeClick}
-        size={ButtonSize.Lg}
-        data-testid="alert-modal-button"
-        disabled={!isConfirmed}
-      >
-        {t('gotIt')}
-      </Button>
-    </>
+    <Button
+      variant={ButtonVariant.Primary}
+      width={BlockSize.Full}
+      onClick={onAcknowledgeClick}
+      size={ButtonSize.Lg}
+      data-testid="alert-modal-button"
+      disabled={!isConfirmed}
+    >
+      {t('gotIt')}
+    </Button>
   );
 }
 
@@ -200,6 +245,10 @@ export function AlertModal({
   alertKey,
   onClose,
   headerStartAccessory,
+  customAlertTitle,
+  customAlertDetails,
+  customAcknowledgeCheckbox,
+  customAcknowledgeButton,
 }: AlertModalProps) {
   const { alerts, isAlertConfirmed, setAlertConfirmed } = useAlerts(ownerId);
 
@@ -214,6 +263,10 @@ export function AlertModal({
   }
   const isConfirmed = isAlertConfirmed(selectedAlert.key);
 
+  const handleCheckboxClick = useCallback(() => {
+    return setAlertConfirmed(selectedAlert.key, !isConfirmed);
+  }, [isConfirmed, selectedAlert.key]);
+
   return (
     <Modal isOpen onClose={handleClose}>
       <ModalOverlay />
@@ -225,20 +278,37 @@ export function AlertModal({
           borderWidth={1}
           display={headerStartAccessory ? Display.InlineFlex : Display.Block}
         />
-        <AlertHeader selectedAlert={selectedAlert} />
+        <AlertHeader
+          selectedAlert={selectedAlert}
+          customAlertTitle={customAlertTitle}
+        />
         <ModalBody>
-          <AlertDetails selectedAlert={selectedAlert} />
-          <AcknowledgeCheckbox
+          <AlertDetails
             selectedAlert={selectedAlert}
-            isConfirmed={isConfirmed}
-            setAlertConfirmed={setAlertConfirmed}
+            customAlertDetails={customAlertDetails}
           />
+          {customAcknowledgeCheckbox ?? (
+            <AcknowledgeCheckboxBase
+              selectedAlert={selectedAlert}
+              isConfirmed={isConfirmed}
+              onCheckboxClick={handleCheckboxClick}
+            />
+          )}
         </ModalBody>
         <ModalFooter>
-          <AcknowledgeButton
-            onAcknowledgeClick={onAcknowledgeClick}
-            isConfirmed={isConfirmed}
-          />
+          <Box
+            display={Display.Flex}
+            flexDirection={FlexDirection.Column}
+            gap={4}
+            width={BlockSize.Full}
+          >
+            {customAcknowledgeButton ?? (
+              <AcknowledgeButton
+                onAcknowledgeClick={onAcknowledgeClick}
+                isConfirmed={isConfirmed}
+              />
+            )}
+          </Box>
         </ModalFooter>
       </ModalContent>
     </Modal>