fix bug and make style changes

MetaMask · Oct 14, 2024 · 67c23d3 · 67c23d3
1 parent ea3cac7
commit 67c23d3
Show file tree

Hide file tree

Showing 5 changed files with 83 additions and 53 deletions.
diff --git a/ui/pages/notification-details/notification-details-footer/notification-details-footer.tsx b/ui/pages/notification-details/notification-details-footer/notification-details-footer.tsx
@@ -1,5 +1,4 @@
 import React from 'react';
-import type { NotificationServicesController } from '@metamask/notification-services-controller';
 import { Box } from '../../../components/component-library';
 import {
   BlockSize,
@@ -8,12 +7,11 @@ import {
   JustifyContent,
 } from '../../../helpers/constants/design-system';
 import {
+  Notification,
   NotificationComponentType,
   type NotificationComponent,
 } from '../../notifications/notification-components/types/notifications/notifications';
 
-type Notification = NotificationServicesController.Types.INotification;
-
 type NotificationDetailsFooterProps = {
   footer: NotificationComponent['footer'];
   notification: Notification;

diff --git a/ui/pages/notification-details/notification-details.tsx b/ui/pages/notification-details/notification-details.tsx
@@ -1,7 +1,6 @@
 import React, { useCallback, useEffect } from 'react';
-import { useSelector } from 'react-redux';
+import { useDispatch, useSelector } from 'react-redux';
 import { useHistory, useLocation } from 'react-router-dom';
-import type { NotificationServicesController } from '@metamask/notification-services-controller';
 import { Box } from '../../components/component-library';
 import {
   BlockSize,
@@ -16,15 +15,19 @@ import { useMarkNotificationAsRead } from '../../hooks/metamask-notifications/us
 import { getMetamaskNotificationById } from '../../selectors/metamask-notifications/metamask-notifications';
 import {
   NotificationComponents,
+  TRIGGER_TYPES,
   hasNotificationComponents,
 } from '../notifications/notification-components';
+import { getNotificationById } from '../../selectors';
+import { type Notification } from '../notifications/notification-components/types/notifications/notifications';
+import { markNotificationsAsRead as markSnapNotificationsAsRead } from '../../store/actions';
+import { processSnapNotifications } from '../notifications/snap/utils/utils';
+import { RawSnapNotification } from '../notifications/snap/types/types';
 import { getExtractIdentifier } from './utils/utils';
 import { NotificationDetailsHeader } from './notification-details-header/notification-details-header';
 import { NotificationDetailsBody } from './notification-details-body/notification-details-body';
 import { NotificationDetailsFooter } from './notification-details-footer/notification-details-footer';
 
-type Notification = NotificationServicesController.Types.INotification;
-
 function useModalNavigation() {
   const history = useHistory();
 
@@ -40,7 +43,19 @@ function useModalNavigation() {
 function useNotificationByPath() {
   const { pathname } = useLocation();
   const id = getExtractIdentifier(pathname);
-  const notification = useSelector(getMetamaskNotificationById(id));
+  let notification = useSelector(
+    getMetamaskNotificationById(id),
+  ) as unknown as Notification;
+  if (!notification) {
+    // we only reach here if it is a snap notification
+    const snapNotification = useSelector((state) =>
+      // @ts-expect-error improperly typed
+      getNotificationById(state, id),
+    ) as unknown as RawSnapNotification;
+    if (snapNotification) {
+      notification = processSnapNotifications([snapNotification])[0];
+    }
+  }
 
   return {
     notification,
@@ -49,15 +64,20 @@ function useNotificationByPath() {
 
 function useEffectOnNotificationView(notificationData?: Notification) {
   const { markNotificationAsRead } = useMarkNotificationAsRead();
+  const dispatch = useDispatch();
   useEffect(() => {
     if (notificationData) {
-      markNotificationAsRead([
-        {
-          id: notificationData.id,
-          type: notificationData.type,
-          isRead: notificationData.isRead,
-        },
-      ]);
+      if (notificationData.type === TRIGGER_TYPES.SNAP) {
+        dispatch(markSnapNotificationsAsRead([notificationData.id]));
+      } else {
+        markNotificationAsRead([
+          {
+            id: notificationData.id,
+            type: notificationData.type,
+            isRead: notificationData.isRead,
+          },
+        ]);
+      }
     }
   }, [markNotificationAsRead, notificationData]);
 }

diff --git a/ui/pages/notifications/notification-components/snap/snap.tsx b/ui/pages/notifications/notification-components/snap/snap.tsx
@@ -1,19 +1,13 @@
-import React, { useContext } from 'react';
-import { useSelector, useDispatch } from 'react-redux';
+import React from 'react';
+import { useSelector } from 'react-redux';
 import { useHistory } from 'react-router-dom';
-import {
-  MetaMetricsEventCategory,
-  MetaMetricsEventName,
-} from '../../../../../shared/constants/metametrics';
-import { MetaMetricsContext } from '../../../../contexts/metametrics';
 import {
   NotificationDetailButton,
   NotificationDetailTitle,
   NotificationListItemSnap,
 } from '../../../../components/multichain';
 import type { SnapNotification } from '../../snap/types/types';
 import { getSnapsMetadata } from '../../../../selectors';
-import { markNotificationsAsRead } from '../../../../store/actions';
 import { getSnapRoute, getSnapName } from '../../../../helpers/utils/util';
 import {
   NotificationComponent,
@@ -22,6 +16,7 @@ import {
 import { formatIsoDateString } from '../../../../helpers/utils/notification.util';
 import { SnapUIRenderer } from '../../../../components/app/snaps/snap-ui-renderer';
 import {
+  AlignItems,
   BackgroundColor,
   Display,
   FlexDirection,
@@ -40,22 +35,10 @@ import { SnapIcon } from '../../../../components/app/snaps/snap-icon';
 export const components: NotificationComponent<SnapNotification> = {
   guardFn: isOfTypeNodeGuard(['snap' as typeof TRIGGER_TYPES.SNAP]),
   item: ({ notification, onClick }) => {
-    const dispatch = useDispatch();
     const history = useHistory();
-    const trackEvent = useContext(MetaMetricsContext);
     const snapsMetadata = useSelector(getSnapsMetadata);
     const snapsNameGetter = getSnapName(snapsMetadata);
     const handleSnapButton = () => {
-      dispatch(markNotificationsAsRead([notification.id]));
-      trackEvent({
-        category: MetaMetricsEventCategory.NotificationInteraction,
-        event: MetaMetricsEventName.NotificationClicked,
-        properties: {
-          notification_id: notification.id,
-          notification_type: notification.type,
-          previously_read: notification.isRead,
-        },
-      });
       history.push(getSnapRoute(notification.data.origin));
     };
 
@@ -99,23 +82,30 @@ export const components: NotificationComponent<SnapNotification> = {
                 border: '1px solid var(--color-border-muted)',
               }}
               flexDirection={FlexDirection.Column}
+              padding={[4, 3, 4, 3]}
             >
-              <Box display={Display.Flex}>
+              <Box
+                display={Display.Flex}
+                alignItems={AlignItems.center}
+                paddingBottom={2}
+              >
                 <SnapIcon snapId={snapId} avatarSize={IconSize.Xl} />
-                <Text paddingLeft={1}>{snapsNameGetter(snapId)}</Text>
+                <Text paddingLeft={4}>{snapsNameGetter(snapId)}</Text>
               </Box>
               <Text overflowWrap={OverflowWrap.Normal}>
                 {notification.data.message}
               </Text>
             </Box>
-            <SnapUIRenderer
-              snapId={notification.data.origin}
-              interfaceId={
-                notification.data.expandedView?.interfaceId as string
-              }
-              useDelineator={false}
-              contentBackgroundColor={BackgroundColor.backgroundDefault}
-            />
+            <Box paddingLeft={1} paddingRight={1}>
+              <SnapUIRenderer
+                snapId={notification.data.origin}
+                interfaceId={
+                  notification.data.expandedView?.interfaceId as string
+                }
+                useDelineator={false}
+                contentBackgroundColor={BackgroundColor.backgroundDefault}
+              />
+            </Box>
           </>
         );
       },

diff --git a/ui/pages/notifications/notifications-list-item.tsx b/ui/pages/notifications/notifications-list-item.tsx
@@ -1,4 +1,5 @@
 import React, { useContext, useCallback } from 'react';
+import { useDispatch } from 'react-redux';
 import { useHistory } from 'react-router-dom';
 import { MetaMetricsContext } from '../../contexts/metametrics';
 import {
@@ -13,6 +14,7 @@ import {
 } from '../../helpers/constants/design-system';
 import { NOTIFICATIONS_ROUTE } from '../../helpers/constants/routes';
 import { useMarkNotificationAsRead } from '../../hooks/metamask-notifications/useNotifications';
+import { markNotificationsAsRead as markSnapNotificationsAsRead } from '../../store/actions';
 import {
   NotificationComponents,
   TRIGGER_TYPES,
@@ -26,6 +28,7 @@ export function NotificationsListItem({
   notification: Notification;
 }) {
   const history = useHistory();
+  const dispatch = useDispatch();
   const trackEvent = useContext(MetaMetricsContext);
 
   const { markNotificationAsRead } = useMarkNotificationAsRead();
@@ -44,13 +47,19 @@ export function NotificationsListItem({
         previously_read: notification.isRead,
       },
     });
-    markNotificationAsRead([
-      {
-        id: notification.id,
-        type: notification.type,
-        isRead: notification.isRead,
-      },
-    ]);
+
+    // In the future will move snap notifications into the notification services controller
+    if (notification.type === TRIGGER_TYPES.SNAP) {
+      dispatch(markSnapNotificationsAsRead([notification.id]));
+    } else {
+      markNotificationAsRead([
+        {
+          id: notification.id,
+          type: notification.type,
+          isRead: notification.isRead,
+        },
+      ]);
+    }
 
     if (
       notification.type === TRIGGER_TYPES.SNAP &&
@@ -60,7 +69,13 @@ export function NotificationsListItem({
     }
 
     history.push(`${NOTIFICATIONS_ROUTE}/${notification.id}`);
-  }, [notification, markNotificationAsRead, history]);
+  }, [
+    notification,
+    markNotificationAsRead,
+    markSnapNotificationsAsRead,
+    dispatch,
+    history,
+  ]);
 
   if (!hasNotificationComponents(notification.type)) {
     return null;

diff --git a/ui/selectors/selectors.js b/ui/selectors/selectors.js
@@ -1730,6 +1730,13 @@ export function getNotifications(state) {
   return notificationsSortedByDate;
 }
 
+export const getNotificationById = createDeepEqualSelector(
+  getNotifications,
+  (_, id) => id,
+  (notifications, id) =>
+    notifications.find((notification) => notification.id === id),
+);
+
 export function getUnreadNotifications(state) {
   const notifications = getNotifications(state);