add correct flow and feedback to improve UX

MetaMask · Oct 10, 2024 · 9f36768 · 9f36768
1 parent 899e83f
commit 9f36768
Show file tree

Hide file tree

Showing 4 changed files with 36 additions and 17 deletions.
diff --git a/app/actions/notification/helpers/index.ts b/app/actions/notification/helpers/index.ts
@@ -171,10 +171,19 @@ export const markMetamaskNotificationsAsRead = async (
     return getErrorMessage(error);
   }
 };
-
-export const performDeleteStorage = async () => {
+/**
+ * Perform the deletion of the notifications storage key and the creation of on chain triggers to reset the notifications.
+ *
+ * @returns {Promise<string | undefined>} A promise that resolves to a string error message or undefined if successful.
+ */
+export const performDeleteStorage = async (): Promise<string | undefined> => {
   try {
    await Engine.context.UserStorageController.performDeleteStorage('notifications.notification_settings');
+   await Engine.context.NotificationServicesController.createOnChainTriggers(
+    {
+      resetNotifications: true,
+    },
+  );
   } catch (error) {
     return getErrorMessage(error);
   }

diff --git a/app/components/UI/Notification/ResetNotificationsModal/index.tsx b/app/components/UI/Notification/ResetNotificationsModal/index.tsx
@@ -1,5 +1,5 @@
 // Third party dependencies.
-import React, { useEffect, useRef } from 'react';
+import React, { useContext, useEffect, useRef } from 'react';
 
 // External dependencies.
 import { useMetrics } from '../../../hooks/useMetrics';
@@ -14,25 +14,38 @@ import  {
   IconSize,
 } from '../../../../component-library/components/Icons/Icon';
 import { MetaMetricsEvents } from '../../../../core/Analytics';
-import { useDeleteNotificationsStorageKey, useEnableNotifications } from '../../../../util/notifications/hooks/useNotifications';
+import { useDeleteNotificationsStorageKey } from '../../../../util/notifications/hooks/useNotifications';
 import ModalContent from '../Modal';
-
+import { ToastContext } from '../../../../component-library/components/Toast';
+import { ToastVariants } from '../../../../component-library/components/Toast/Toast.types';
 const ResetNotificationsModal = () => {
   const { trackEvent } = useMetrics();
   const bottomSheetRef = useRef<BottomSheetRef>(null);
   const [isChecked, setIsChecked] = React.useState(false);
   const { deleteNotificationsStorageKey, loading } = useDeleteNotificationsStorageKey();
-  const { enableNotifications, loading: enableLoading } = useEnableNotifications();
-
-
+  const { toastRef } = useContext(ToastContext);
   const closeBottomSheet = () => bottomSheetRef.current?.onCloseBottomSheet();
 
+  const showResultToast = () => {
+    toastRef?.current?.showToast({
+      variant: ToastVariants.Plain,
+      labelOptions: [
+        {
+          label: strings('app_settings.reset_notifications_success'),
+          isBold: false,
+        },
+      ],
+      hasNoTimeout: false,
+    });
+  };
+
   const handleCta = async () => {
-    await deleteNotificationsStorageKey();
-    await enableNotifications();
+    await deleteNotificationsStorageKey().then(() => {
+      showResultToast();
       trackEvent(MetaMetricsEvents.NOTIFICATION_STORAGE_KEY_DELETED, {
         settings_type: 'delete_notifications_storage_key',
       });
+    });
   };
 
   const prevLoading = useRef(loading);
@@ -59,7 +72,7 @@ const ResetNotificationsModal = () => {
         setIsChecked={setIsChecked}
         handleCta={handleCta}
         handleCancel={closeBottomSheet}
-        loading={loading || enableLoading}
+        loading={loading}
         />
     </BottomSheet>
   );

diff --git a/app/components/Views/Settings/NotificationsSettings/index.tsx b/app/components/Views/Settings/NotificationsSettings/index.tsx
@@ -186,19 +186,15 @@ const NotificationsSettings = ({ navigation, route }: Props) => {
         },
       });
     } else if (isMetamaskNotificationsEnabled) {
-      disableNotifications();
+      await disableNotifications();
       setUiNotificationStatus(false);
     } else {
       const { permission } = await NotificationsService.getAllPermissions(false);
       if (permission !== 'authorized') {
         return;
       }
 
-        /**
-         * Although this is an async function, we are dispatching an action (firing & forget)
-         * to emulate optimistic UI.
-         */
-        enableNotifications();
+        await enableNotifications();
         setUiNotificationStatus(true);
     }
     trackEvent(MetaMetricsEvents.NOTIFICATIONS_SETTINGS_UPDATED, {

diff --git a/locales/languages/en.json b/locales/languages/en.json
@@ -772,6 +772,7 @@
     "reset_notifications_title": "Reset notifications",
     "reset_notifications_description": "Resetting notifications, means you're deleting your notifications storage keys and resetting all your notification history. Are you sure you want to do this?",
     "reset_notifications": "Reset notifications",
+    "reset_notifications_success": "Notifications storage key deleted/recreated, and notifications history reset.",
     "enabling_profile_sync": "Enabling profile syncing...",
     "disabling_profile_sync": "Disabling profile syncing...",
     "notifications_dismiss_modal": "Dismiss",