feat(ui): refactor notification item

src/ui/pages/Notifications/Notification.types.ts

@@ -0,0 +1,24 @@
+import { KeriaNotification } from "../../../core/agent/agent.types";
+
+enum NotificationFilter {
+  All = "all",
+  Identifier = "identifiers",
+  Credential = "credentials",
+}
+
+interface NotificationItemProps {
+  item: KeriaNotification;
+  onClick: (item: KeriaNotification) => void;
+  onOptionButtonClick: (item: KeriaNotification) => void;
+}
+
+interface FilterChipProps {
+  filter: NotificationFilter;
+  label: string;
+  isActive: boolean;
+  onClick: (filter: NotificationFilter) => void;
+}
+
+export { NotificationFilter };
+
+export type { NotificationItemProps, FilterChipProps };

src/ui/pages/Notifications/NotificationItem.tsx

@@ -1,27 +1,26 @@
-import { IonItem, IonLabel, IonIcon } from "@ionic/react";
-import { ellipsisHorizontal } from "ionicons/icons";
-import i18next from "i18next";
-import { useEffect, useState } from "react";
-import KeriLogo from "../../assets/images/KeriGeneric.jpg";
-import { getConnectionsCache } from "../../../store/reducers/connectionsCache";
-import { useAppSelector } from "../../../store/hooks";
+import { IonIcon, IonItem, IonLabel } from "@ionic/react";
+import { t } from "i18next";
+import { ellipsisHorizontal, fingerPrintOutline } from "ionicons/icons";
+import { MouseEvent, useCallback, useEffect, useState } from "react";
+import { Trans } from "react-i18next";
+import { Agent } from "../../../core/agent/agent";
 import {
   KeriaNotification,
   NotificationRoute,
 } from "../../../core/agent/agent.types";
-import { timeDifference } from "../../utils/formatters";
-import { Agent } from "../../../core/agent/agent";
 import { MultiSigIcpRequestDetails } from "../../../core/agent/services/identifier.types";
+import { useAppSelector } from "../../../store/hooks";
+import { getConnectionsCache } from "../../../store/reducers/connectionsCache";
+import KeriLogo from "../../assets/images/KeriGeneric.jpg";
+import MultisignReferIcon from "../../assets/images/multisign-icon.jpg";
+import { timeDifference } from "../../utils/formatters";
+import { NotificationItemProps } from "./Notification.types";
 
 const NotificationItem = ({
   item,
-  index,
-  handleNotificationClick,
-}: {
-  item: KeriaNotification;
-  index: number;
-  handleNotificationClick: (item: KeriaNotification) => void;
-}) => {
+  onClick,
+  onOptionButtonClick,
+}: NotificationItemProps) => {
   const connectionsCache = useAppSelector(getConnectionsCache);
   const [notificationLabelText, setNotificationLabelText] =
     useState<string>("");
@@ -30,13 +29,39 @@ const NotificationItem = ({
     (connection) => connection.id === item.connectionId
   )[0]?.label;
 
-  const fetchNotificationLabel = async (
-    multiSigIcpDetails?: MultiSigIcpRequestDetails
-  ) => {
-    const label = await notificationLabel(item, multiSigIcpDetails);
-    setNotificationLabelText(label);
-    setLoading(false);
-  };
+  const notificationLabel = useCallback(
+    (
+      item: KeriaNotification,
+      multisigIcpDetails?: MultiSigIcpRequestDetails
+    ) => {
+      switch (item.a.r) {
+      case NotificationRoute.ExnIpexGrant:
+        return t("notifications.tab.labels.exnipexgrant", {
+          connection: connection,
+        });
+      case NotificationRoute.MultiSigIcp:
+        return t("notifications.tab.labels.multisigicp", {
+          connection: multisigIcpDetails?.sender?.label,
+        });
+      case NotificationRoute.ExnIpexApply:
+        return t("notifications.tab.labels.exnipexapply", {
+          connection: connection,
+        });
+      default:
+        return "";
+      }
+    },
+    [connection]
+  );
+
+  const fetchNotificationLabel = useCallback(
+    (multiSigIcpDetails?: MultiSigIcpRequestDetails) => {
+      const label = notificationLabel(item, multiSigIcpDetails);
+      setNotificationLabelText(label);
+      setLoading(false);
+    },
+    [item, notificationLabel]
+  );
 
   useEffect(() => {
     const fetchData = async () => {
@@ -51,47 +76,49 @@ const NotificationItem = ({
     };
 
     fetchData();
-  }, [item]);
+  }, [fetchNotificationLabel, item]);
 
-  const notificationLabel = async (
-    item: KeriaNotification,
-    multisigIcpDetails?: MultiSigIcpRequestDetails
-  ) => {
+  const referIcon = (item: KeriaNotification) => {
     switch (item.a.r) {
     case NotificationRoute.ExnIpexGrant:
-      return i18next.t("notifications.tab.labels.exnipexgrant", {
-        connection: connection,
-      });
-    case NotificationRoute.MultiSigIcp:
-      return i18next.t("notifications.tab.labels.multisigicp", {
-        connection: multisigIcpDetails?.sender?.label,
-      });
     case NotificationRoute.ExnIpexApply:
-      return i18next.t("notifications.tab.labels.exnipexapply", {
-        connection: connection,
-      });
+      return fingerPrintOutline;
+    case NotificationRoute.MultiSigIcp:
+      return MultisignReferIcon;
     default:
-      return "";
+      return MultisignReferIcon;
     }
   };
 
+  const openOptionModal = (e: MouseEvent) => {
+    e.stopPropagation();
+
+    onOptionButtonClick(item);
+  };
+
   return (
     <>
       {!loading && (
         <IonItem
-          key={index}
-          onClick={() => handleNotificationClick(item)}
+          onClick={() => onClick(item)}
           className={`notifications-tab-item${item.read ? "" : " unread"}`}
-          data-testid={`notifications-tab-item-${index}`}
+          data-testid={`notifications-tab-item-${item.id}`}
         >
-          <img
-            src={KeriLogo}
-            alt="notifications-tab-item-logo"
-            className="notifications-tab-item-logo"
-            data-testid="notifications-tab-item-logo"
-          />
+          <div className="notification-logo">
+            <img
+              src={KeriLogo}
+              alt="notifications-tab-item-logo"
+              className="notifications-tab-item-logo"
+              data-testid="notifications-tab-item-logo"
+            />
+            <img
+              src={referIcon(item)}
+              alt="refer-icon"
+              className="notification-ref-icon"
+            />
+          </div>
           <IonLabel>
-            {notificationLabelText}
+            <Trans>{notificationLabelText}</Trans>
             <br />
             <span className="notifications-tab-item-time">
               {timeDifference(item.createdAt)[0]}
@@ -103,6 +130,8 @@ const NotificationItem = ({
             icon={ellipsisHorizontal}
             slot="end"
             className="notifications-tab-item-ellipsis"
+            data-testid={`${item.id}-option-btn`}
+            onClick={openOptionModal}
           />
         </IonItem>
       )}

src/ui/pages/Notifications/Notifications.scss

@@ -37,6 +37,27 @@
   }
 
   .notifications-tab-content {
+    .show-ealier-btn {
+      --background: rgba(187, 187, 187, 0.5);
+      --border-radius: 0.5rem;
+      color: var(--ion-color-primary);
+      width: calc(100vw - 2.5rem);
+      margin: 0.75rem auto 0;
+      display: block;
+
+      &::part(native) {
+        border: none;
+      }
+    }
+
+    .end-message {
+      text-align: center;
+      color: rgba(54, 60, 74, 0.5);
+      font-size: 0.875rem;
+      line-height: 1.25rem;
+      margin: 1rem 0;
+    }
+
     .notifications-tab-section {
       margin-top: 1.5rem;
 
@@ -72,6 +93,21 @@
           --inner-padding-end: 0;
         }
 
+        .notification-logo {
+          position: relative;
+
+          .notification-ref-icon {
+            position: absolute;
+            bottom: 0.115rem;
+            right: 0.7rem;
+            width: 1.25rem;
+            height: 1.25rem;
+            border-radius: 0.625rem;
+            padding: 0.25rem;
+            background-color: var(--ion-color-light-grey);
+          }
+        }
+
         .notifications-tab-item-logo {
           border-radius: 3rem;
           width: 3rem;