2457 notificaitons

app/__test-fixtures__/verifiableCredentialResults.ts

@@ -1,6 +1,6 @@
 import { CredentialResponseBody, VerifiableCredential, VerifiableCredentialRecord } from "@gitcoin/passport-types";
 
-const credential: VerifiableCredential = {
+export const credential: VerifiableCredential = {
   "@context": ["https://www.w3.org/2018/credentials/v1"],
   type: ["VerifiableCredential"],
   credentialSubject: {

app/__tests__/components/Notifications.test.tsx

@@ -0,0 +1,80 @@
+import React from "react";
+import { fireEvent, render, screen, waitFor } from "@testing-library/react";
+import { Notifications } from "../../components/Notifications";
+import { useNotifications, useDismissNotification } from "../../hooks/useNotifications";
+import { StampClaimingContext } from "../../context/stampClaimingContext";
+import { CeramicContext } from "../../context/ceramicContext";
+
+// Mock the hooks and contexts
+jest.mock("../../hooks/useNotifications", () => ({
+  useNotifications: jest.fn(),
+  useDismissNotification: jest.fn(),
+}));
+jest.mock("../../context/stampClaimingContext");
+jest.mock("../../context/ceramicContext");
+
+const mockSetShowSidebar = jest.fn();
+
+describe("Notifications Component", () => {
+  beforeEach(() => {
+    jest.clearAllMocks();
+  });
+
+  it("should render without notifications", async () => {
+    (useNotifications as jest.Mock).mockReturnValue({ notifications: [] });
+
+    render(<Notifications setShowSidebar={mockSetShowSidebar} />);
+    const noteBell = screen.getByTestId("notification-bell");
+    fireEvent.click(noteBell);
+
+    await waitFor(() => {
+      expect(screen.getByText("Congrats! You don't have any notifications.")).toBeInTheDocument();
+    });
+  });
+  it("should render read notification", async () => {
+    (useNotifications as jest.Mock).mockReturnValue({
+      notifications: [
+        {
+          notification_id: "1",
+          type: "on_chain_expiry",
+          content: "Test notification",
+          is_read: false,
+          link: "https://example.com",
+        },
+      ],
+    });
+
+    render(<Notifications setShowSidebar={mockSetShowSidebar} />);
+
+    await waitFor(() => {});
+
+    const noteBell = screen.getByTestId("notification-bell");
+    fireEvent.click(noteBell);
+
+    expect(screen.getByText(`Test notification`)).toBeInTheDocument();
+    expect(screen.getByTestId("read-indicator")).toHaveClass("bg-background-5");
+  });
+  it("should render unread notification", async () => {
+    (useNotifications as jest.Mock).mockReturnValue({
+      notifications: [
+        {
+          notification_id: "1",
+          type: "on_chain_expiry",
+          content: "Test notification",
+          is_read: true,
+          link: "https://example.com",
+        },
+      ],
+    });
+
+    render(<Notifications setShowSidebar={mockSetShowSidebar} />);
+
+    await waitFor(() => {});
+
+    const noteBell = screen.getByTestId("notification-bell");
+    fireEvent.click(noteBell);
+
+    expect(screen.getByText(`Test notification`)).toBeInTheDocument();
+    expect(screen.getByTestId("read-indicator")).toHaveClass("bg-transparent");
+  });
+});

app/components/AccountCenter.tsx

@@ -1,12 +1,14 @@
 // --- React components/methods
 import React, { useEffect, useState } from "react";
+import { useOneClickVerification } from "../hooks/useOneClickVerification";
 
 const shouldMinimize = () => {
   return window.scrollY > 120 || (window.screenY > 50 && window.innerWidth < 1024);
 };
 
 export const AccountCenter = () => {
   const [minimized, setMinimized] = useState(false);
+  const { verificationComplete } = useOneClickVerification();
 
   useEffect(() => {
     const onEvent = () => {
@@ -34,7 +36,9 @@ export const AccountCenter = () => {
   }, []);
 
   return (
-    <div className="fixed right-2 md:right-10 lg:right-20 top-3 rounded-2xl w-fit h-fit bg-background z-10 flex justify-end">
+    <div
+      className={`fixed top-3 rounded-2xl w-fit h-fit bg-background z-10 flex justify-end ${verificationComplete ? "right-14 md:right-20 lg:right-36" : "right-2 md:right-10 lg:right-20"}`}
+    >
       <div className="hidden xl:block">
         <w3m-button balance={minimized ? "hide" : "show"} size="sm" />
       </div>

app/components/Category.tsx

@@ -37,7 +37,6 @@ export const Category = ({
   const [dropDownOpen, setDropDownOpen] = useState<boolean>(false);
   const openRef = React.useRef(dropDownOpen);
   openRef.current = dropDownOpen;
-  const customization = useCustomization();
 
   const [panelMounted, setPanelMounted] = useState<boolean>(false);
 

app/components/GenericPlatform.tsx

@@ -455,7 +455,6 @@ export const GenericPlatform = ({
     return "Verify";
   }, [isReverifying, isLoading, submitted, canSubmit, verifiedProviders.length, platformProviderIds.length]);
 
-  console.log("verify - submitted, canSubmit", submitted, canSubmit, !submitted && !canSubmit);
   return (
     <Drawer isOpen={isOpen} placement="right" size="sm" onClose={onClose}>
       <DrawerOverlay />

app/components/MinimalHeader.tsx

@@ -1,6 +1,9 @@
 // --- React methods
 import React, { useMemo } from "react";
 import { AccountCenter } from "./AccountCenter";
+import { Notifications } from "./Notifications";
+import { OnchainSidebar } from "./OnchainSidebar";
+import { useOneClickVerification } from "../hooks/useOneClickVerification";
 
 type MinimalHeaderProps = {
   className?: string;
@@ -17,20 +20,26 @@ const getAssets = () => {
 
 const MinimalHeader = ({ className }: MinimalHeaderProps): JSX.Element => {
   const assets = useMemo(() => getAssets(), []);
+  const [showSidebar, setShowSidebar] = React.useState(false);
+  const { verificationComplete } = useOneClickVerification();
 
   return (
-    <div className={`flex items-center h-16 ${className}`}>
-      <div className="flex-1 flex items-center">
-        <img className="" src={assets.gitcoinLogo} alt="Gitcoin Logo" />
-        <img className="mx-3 md:mx-6" src={assets.logoLine} alt="Logo Line" />
-        <img className="h-8" src={assets.passportLogo} alt="Passport Logo" />
-        <div className="ml-3 text-2xl text-color-1">Passport</div>
+    <>
+      <OnchainSidebar isOpen={showSidebar} onClose={() => setShowSidebar(false)} />
+      <div className={`flex items-center h-16 ${className}`}>
+        <div className="flex-1 flex items-center">
+          <img className="" src={assets.gitcoinLogo} alt="Gitcoin Logo" />
+          <img className="mx-3 md:mx-6" src={assets.logoLine} alt="Logo Line" />
+          <img className="h-8" src={assets.passportLogo} alt="Passport Logo" />
+          <div className="ml-3 hidden md:inline-block text-2xl text-color-1">Passport</div>
+        </div>
+        {/* This is really just a placeholder div, because AccountCenter uses fixed positioning */}
+        <div className="flex-1">
+          <AccountCenter />
+        </div>
+        {verificationComplete && <Notifications setShowSidebar={() => setShowSidebar(true)} />}
       </div>
-      {/* This is really just a placeholder div, because AccountCenter uses fixed positioning */}
-      <div className="flex-1">
-        <AccountCenter />
-      </div>
-    </div>
+    </>
   );
 };
 

app/components/Notifications.tsx

@@ -0,0 +1,219 @@
+import React, { Fragment, useContext, useMemo } from "react";
+import { Popover, Transition } from "@headlessui/react";
+import { useNotifications, useDismissNotification, Notification } from "../hooks/useNotifications";
+import { StampClaimForPlatform, StampClaimingContext } from "../context/stampClaimingContext";
+import { PLATFORM_ID, PROVIDER_ID } from "@gitcoin/passport-types";
+import { CeramicContext } from "../context/ceramicContext";
+
+export type NotificationProps = {
+  notification: Notification;
+} & {
+  setShowSidebar: (show: boolean) => void;
+};
+
+const ExpiryAction = ({
+  content,
+  provider,
+  notification_id,
+}: {
+  content: string;
+  provider: PROVIDER_ID;
+  notification_id: string;
+}) => {
+  const { claimCredentials } = useContext(StampClaimingContext);
+  const { expiredPlatforms } = useContext(CeramicContext);
+
+  const platformId = Object.values(expiredPlatforms)
+    .filter((platform) => {
+      const providers = platform.platFormGroupSpec
+        .map((spec) => spec.providers.map((provider) => provider.name))
+        .flat();
+
+      return providers.includes(provider);
+    })
+    .map((platform) => platform.platform.platformId)[0];
+
+  const deleteMutation = useDismissNotification(notification_id, "delete");
+
+  const message = useMemo(() => {
+    const refreshStamp = async (stamp: StampClaimForPlatform) => {
+      await claimCredentials(async () => await Promise.resolve(), [stamp]);
+      deleteMutation.mutate();
+    };
+    const claim: StampClaimForPlatform = {
+      platformId: platformId as PLATFORM_ID,
+      selectedProviders: [provider],
+    };
+
+    const parts = content.split(/(reverify)/i);
+    return parts.map((part, index) =>
+      part.toLowerCase() === "reverify" ? (
+        <div className="inline-block underline cursor-pointer" key={index} onClick={() => refreshStamp(claim)}>
+          {part}
+        </div>
+      ) : (
+        part
+      )
+    );
+  }, [platformId, provider, content, claimCredentials, deleteMutation]);
+
+  return <>{message}</>;
+};
+
+const Content = ({ notification }: { notification: Notification }) => {
+  const { content, link, type, link_text } = notification;
+  const linkSpan =
+    link && link_text ? (
+      <a className="underline" href={link} target="_blank">
+        {link_text}.
+      </a>
+    ) : null;
+
+  switch (type) {
+    case "custom":
+      return (
+        <span>
+          {content} {linkSpan}
+        </span>
+      );
+    case "stamp_expiry":
+      return (
+        <ExpiryAction content={content} provider={link as PROVIDER_ID} notification_id={notification.notification_id} />
+      );
+    case "on_chain_expiry":
+      return (
+        <span>
+          {content} {linkSpan}
+        </span>
+      );
+    case "deduplication":
+      return (
+        <span>
+          {content} {linkSpan}
+        </span>
+      );
+  }
+};
+
+const NotificationComponent: React.FC<NotificationProps> = ({ notification, setShowSidebar }) => {
+  const { notification_id, is_read, type } = notification;
+  const messageClasses = `text-sm w-5/6 ${is_read ? "text-foreground-4" : "text-foreground-2"}`;
+
+  const dismissMutation = useDismissNotification(notification_id, "read");
+  const deleteMutation = useDismissNotification(notification_id, "delete");
+
+  return (
+    <>
+      <div className={`flex justify-start items-center p-4 relative ${type === "on_chain_expiry" && "cursor-pointer"}`}>
+        <span
+          data-testid="read-indicator"
+          className={`p-1 mr-2 text-xs rounded-full ${is_read ? "bg-transparent" : "bg-background-5 "}`}
+        ></span>
+        <span
+          className={messageClasses}
+          onClick={() => {
+            if (type === "on_chain_expiry") {
+              setShowSidebar(true);
+            }
+          }}
+        >
+          <Content notification={notification} />
+        </span>
+        <div className="absolute top-1 right-3 z-10">
+          <Popover className="relative">
+            <>
+              <Popover.Button className="ml-auto p-2">
+                <svg width="4" height="16" viewBox="0 0 4 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+                  <ellipse cx="2" cy="2" rx="2" ry="2" fill="#6CB6AD" />
+                  <ellipse cx="2" cy="8" rx="2" ry="2" fill="#6CB6AD" />
+                  <ellipse cx="2" cy="13.7998" rx="2" ry="2" fill="#6CB6AD" />
+                </svg>
+              </Popover.Button>
+              <Transition
+                as={Fragment}
+                enter="transition ease-out duration-100"
+                enterFrom="opacity-0 translate-y-1"
+                enterTo="opacity-100 translate-y-0"
+                leave="transition ease-in duration-150"
+                leaveFrom="opacity-100 translate-y-0"
+                leaveTo="opacity-0 translate-y-1"
+              >
+                <Popover.Panel className="absolute w-48 right-1 bg-background flex flex-col justify-start text-left p-4 rounded">
+                  <button onClick={() => dismissMutation.mutate()} className="w-full text-left">
+                    Mark as Read
+                  </button>
+                  <button className="w-full text-left text-color-7" onClick={() => deleteMutation.mutate()}>
+                    Delete
+                  </button>
+                </Popover.Panel>
+              </Transition>
+            </>
+          </Popover>
+        </div>
+      </div>
+    </>
+  );
+};
+
+export type NotificationsProps = {
+  setShowSidebar: (show: boolean) => void;
+};
+
+export const Notifications: React.FC<NotificationsProps> = ({ setShowSidebar }) => {
+  const { notifications } = useNotifications();
+  const hasNotifications = notifications.length > 0;
+  return (
+    <div className="w-full flex justify-end z-20">
+      <Popover className="relative">
+        <>
+          <Popover.Button className="ml-auto p-6" data-testid="notification-bell">
+            <div className="relative">
+              {notifications.length > 0 && (
+                <div
+                  className={`${notifications.length > 10 ? "-right-5" : "-right-2"} absolute -top-3 rounded-full bg-background-5 px-1 border-4 border-background text-[10px] text-background leading-2`}
+                >
+                  {notifications.filter((not) => !not.is_read).length}
+                </div>
+              )}
+              <img
+                className="h-6 w-6"
+                alt={`Notifications indicator. User currently ${hasNotifications ? "has" : "doesn't have"} notifications`}
+                src={hasNotifications ? "./assets/full-bell.svg" : "./assets/empty-bell.svg"}
+              />
+            </div>
+          </Popover.Button>
+          <Transition
+            as={Fragment}
+            enter="transition ease-out duration-100"
+            enterFrom="opacity-0 translate-y-1"
+            enterTo="opacity-100 translate-y-0"
+            leave="transition ease-in duration-150"
+            leaveFrom="opacity-100 translate-y-0"
+            leaveTo="opacity-0 translate-y-1"
+          >
+            <Popover.Panel className="absolute w-96 md:w-72 right-1 flex flex-col border-foreground-5 border rounded bg-gradient-to-b from-background via-background to-[#082F2A]">
+              <div className="w-full relative">
+                <div className="absolute top-[-6px] w-[10px] h-[10px] right-7 border-l bg-background border-b border-foreground-5 transform rotate-[135deg]"></div>
+              </div>
+              <div className="overflow-y-auto min-h-[120px] max-h-[40vh]">
+                {notifications.length > 0 ? (
+                  notifications
+                    .sort((a, b) => (a.is_read === b.is_read ? 0 : a.is_read ? 1 : -1))
+                    .map((notification) => (
+                      <NotificationComponent
+                        key={notification.notification_id}
+                        notification={notification}
+                        setShowSidebar={() => setShowSidebar(true)}
+                      />
+                    ))
+                ) : (
+                  <p className="p-2">Congrats! You don&apos;t have any notifications.</p>
+                )}
+              </div>
+            </Popover.Panel>
+          </Transition>
+        </>
+      </Popover>
+    </div>
+  );
+};