adding teh error modal

ui/components/app/clear-metametrics-data/ClearMetaMetricsData.tsx

@@ -5,6 +5,7 @@ import {
   markingMetaMetricsDataDeletion,
   continueRecordingMetaMetricsData,
   stopRecordingMetaMetricsData,
+  openDataDeletionErrorModal,
 } from '../../../ducks/app/app';
 import { useI18nContext } from '../../../hooks/useI18nContext';
 import {
@@ -60,7 +61,7 @@ export default function ClearMetaMetricsData() {
         dispatch(stopRecordingMetaMetricsData());
       }
     } catch (error: unknown) {
-      // ignore
+      dispatch(openDataDeletionErrorModal());
     } finally {
       dispatch(hideDeleteMetaMetricsDataModal());
     }

ui/components/app/clear-metametrics-data/DataDeletionErrorModal.tsx

@@ -0,0 +1,99 @@
+import React from 'react';
+import { useDispatch } from 'react-redux';
+import {
+  Display,
+  FlexDirection,
+  AlignItems,
+  JustifyContent,
+  TextVariant,
+  BlockSize,
+  IconColor,
+  TextAlign,
+} from '../../../helpers/constants/design-system';
+import { useI18nContext } from '../../../hooks/useI18nContext';
+import {
+  ModalOverlay,
+  ModalContent,
+  ModalHeader,
+  Modal,
+  Box,
+  Text,
+  ModalFooter,
+  Button,
+  IconName,
+  ButtonVariant,
+  Icon,
+  IconSize,
+  ButtonSize,
+} from '../../component-library';
+import { hideDataDeletionErrorModal } from '../../../ducks/app/app';
+
+export function DataDeletionErrorModal() {
+  const t = useI18nContext();
+  const dispatch = useDispatch();
+
+  function closeModal() {
+    dispatch(hideDataDeletionErrorModal());
+  }
+
+  return (
+    <Modal onClose={closeModal} isOpen>
+      <ModalOverlay />
+      <ModalContent
+        modalDialogProps={{
+          display: Display.Flex,
+          flexDirection: FlexDirection.Column,
+        }}
+      >
+        <ModalHeader
+          paddingBottom={4}
+          paddingRight={6}
+          paddingLeft={6}
+          onClose={closeModal}
+        >
+          <Box
+            display={Display.Flex}
+            flexDirection={FlexDirection.Column}
+            alignItems={AlignItems.center}
+            justifyContent={JustifyContent.center}
+            gap={4}
+          >
+            <Icon
+              size={IconSize.Xl}
+              name={IconName.Danger}
+              color={IconColor.warningDefault}
+            />
+            <Text variant={TextVariant.headingSm} textAlign={TextAlign.Center}>
+              {t('deleteMetaMetricsDataErrorTitle')}
+            </Text>
+          </Box>
+        </ModalHeader>
+
+        <Box
+          paddingLeft={6}
+          paddingRight={6}
+          display={Display.Flex}
+          gap={4}
+          flexDirection={FlexDirection.Column}
+        >
+          <Text variant={TextVariant.bodySm} textAlign={TextAlign.Justify}>
+            {t('deleteMetaMetricsDataErrorDesc')}
+          </Text>
+        </Box>
+
+        <ModalFooter>
+          <Box display={Display.Flex} gap={4}>
+            <Button
+              size={ButtonSize.Lg}
+              width={BlockSize.Full}
+              variant={ButtonVariant.Primary}
+              onClick={closeModal}
+            >
+              {t('ok')}
+            </Button>
+          </Box>
+        </ModalFooter>
+      </ModalContent>
+    </Modal>
+  );
+}

ui/ducks/app/app.ts

@@ -90,6 +90,7 @@ type AppState = {
   txId: string | null;
   accountDetailsAddress: string;
   showDeleteMetaMetricsDataModal: boolean;
+  showDataDeletionErrorModal: boolean;
   metaMetricsDataDeletionMarked: boolean;
   hasRecordedMetricsSinceDeletion: boolean;
   ///: BEGIN:ONLY_INCLUDE_IF(snaps)
@@ -172,6 +173,7 @@ const initialState: AppState = {
   txId: null,
   accountDetailsAddress: '',
   showDeleteMetaMetricsDataModal: false,
+  showDataDeletionErrorModal: false,
   metaMetricsDataDeletionMarked: false,
   hasRecordedMetricsSinceDeletion: false,
   ///: BEGIN:ONLY_INCLUDE_IF(snaps)
@@ -566,6 +568,16 @@ export default function reduceApp(
         ...appState,
         showDeleteMetaMetricsDataModal: false,
       };
+    case actionConstants.DATA_DELETION_ERROR_MODAL_OPEN:
+      return {
+        ...appState,
+        showDataDeletionErrorModal: true,
+      };
+    case actionConstants.DATA_DELETION_ERROR_MODAL_CLOSE:
+      return {
+        ...appState,
+        showDataDeletionErrorModal: false,
+      };
     case actionConstants.METAMETRICS_DATA_DELETION_MARKED:
       return {
         ...appState,
@@ -708,6 +720,18 @@ export function hideDeleteMetaMetricsDataModal(): Action {
   };
 }
 
+export function openDataDeletionErrorModal(): Action {
+  return {
+    type: actionConstants.DATA_DELETION_ERROR_MODAL_OPEN,
+  };
+}
+
+export function hideDataDeletionErrorModal(): Action {
+  return {
+    type: actionConstants.DATA_DELETION_ERROR_MODAL_CLOSE,
+  };
+}
+
 export function markingMetaMetricsDataDeletion(): Action {
   return {
     type: actionConstants.METAMETRICS_DATA_DELETION_MARKED,

ui/pages/settings/security-tab/security-tab.component.js

@@ -48,6 +48,7 @@ import IncomingTransactionToggle from '../../../components/app/incoming-trasacti
 import ClearMetametricsData from '../../../components/app/clear-metametrics-data';
 import { DeleteRegulationStatus } from '../../../../app/scripts/controllers/metametrics-data-deletion/metametrics-data-deletion';
 import { checkDataDeletionTaskStatus } from '../../../store/actions';
+import { DataDeletionErrorModal } from '../../../components/app/clear-metametrics-data/DataDeletionErrorModal';
 
 export default class SecurityTab extends PureComponent {
   static contextTypes = {
@@ -95,6 +96,7 @@ export default class SecurityTab extends PureComponent {
     toggleExternalServices: PropTypes.func.isRequired,
     showDeleteMetaMetricsDataModal: PropTypes.bool.isRequired,
     setDeleteMetaMetricsDataModalOpen: PropTypes.func.isRequired,
+    showDataDeletionErrorModal: PropTypes.bool.isRequired,
     metaMetricsDataDeletionStatus: PropTypes.string,
     metaMetricsDataDeletionDate: PropTypes.string,
     metaMetricsDataDeletionMarked: PropTypes.bool.isRequired,
@@ -392,10 +394,13 @@ export default class SecurityTab extends PureComponent {
   renderDeleteMetaMetricsData() {
     const { t } = this.context;
     const {
+      hasRecordedMetricsSinceDeletion,
       metaMetricsDataDeletionStatus,
       metaMetricsDataDeletionDate,
       metaMetricsDataDeletionMarked,
-      hasRecordedMetricsSinceDeletion,
+      setDeleteMetaMetricsDataModalOpen,
+      showDeleteMetaMetricsDataModal,
+      showDataDeletionErrorModal,
     } = this.props;
 
     let dataDeletionButtonDisabled = false;
@@ -444,15 +449,16 @@ export default class SecurityTab extends PureComponent {
               className="settings-page__button"
               onClick={(event) => {
                 event.preventDefault();
-                this.props.setDeleteMetaMetricsDataModalOpen();
+                setDeleteMetaMetricsDataModalOpen();
               }}
               disabled={dataDeletionButtonDisabled}
             >
               {t('deleteMetaMetricsData')}
             </ButtonPrimary>
           </div>
         </Box>
-        {this.props.showDeleteMetaMetricsDataModal && <ClearMetametricsData />}
+        {showDeleteMetaMetricsDataModal && <ClearMetametricsData />}
+        {showDataDeletionErrorModal && <DataDeletionErrorModal />}
       </>
     );
   }

ui/pages/settings/security-tab/security-tab.container.js

@@ -34,6 +34,7 @@ import {
   getShowDeleteMetaMetricsDataModal,
   isMetaMetricsDataDeletionMarked,
   hasRecordedMetricsSinceDeletion,
+  getShowDataDeletionErrorModal,
 } from '../../../selectors';
 import {
   continueRecordingMetaMetricsData,
@@ -93,6 +94,7 @@ const mapStateToProps = (state) => {
     ///: END:ONLY_INCLUDE_IF
     useTransactionSimulations: metamask.useTransactionSimulations,
     showDeleteMetaMetricsDataModal: getShowDeleteMetaMetricsDataModal(state),
+    showDataDeletionErrorModal: getShowDataDeletionErrorModal(state),
     metaMetricsDataDeletionStatus: getMetaMetricsDataDeletionStatus(state),
     metaMetricsDataDeletionDate: getMetaMetricsDataDeletionDate(state),
     metaMetricsDataDeletionMarked: isMetaMetricsDataDeletionMarked(state),

ui/selectors/selectors.js

@@ -2453,6 +2453,10 @@ export function getShowDeleteMetaMetricsDataModal(state) {
   return state.appState.showDeleteMetaMetricsDataModal;
 }
 
+export function getShowDataDeletionErrorModal(state) {
+  return state.appState.showDataDeletionErrorModal;
+}
+
 export function getParticipateInMetaMetrics(state) {
   return state.metamask.participateInMetaMetrics;
 }

ui/store/actionConstants.ts

@@ -82,6 +82,10 @@ export const DELETE_METAMETRICS_DATA_MODAL_OPEN =
   'DELETE_METAMETRICS_DATA_MODAL_OPEN';
 export const DELETE_METAMETRICS_DATA_MODAL_CLOSE =
   'DELETE_METAMETRICS_DATA_MODAL_CLOSE';
+export const DATA_DELETION_ERROR_MODAL_OPEN =
+  'DELETE_METAMETRICS_DATA_ERROR_MODAL_OPEN';
+export const DATA_DELETION_ERROR_MODAL_CLOSE =
+  'DELETE_METAMETRICS_DATA_ERROR_MODAL_CLOSE';
 export const METAMETRICS_DATA_DELETION_MARKED =
   'METAMETRICS_DATA_DELETION_MARKED';
 export const METAMETRICS_DATA_DELETION_UNMARKED =