feat: add notifications

src/app/globals.css

@@ -7,6 +7,8 @@
     --background: 240 5% 96%;
     --foreground: 240 4% 16%;
 
+    --skeleton: 240 5% 84%;
+
     --card: 0 0% 100%;
     --card-secondary: 0 0% 98%;
     --card-foreground: var(--foreground);
@@ -104,6 +106,8 @@
     --background: 240 3.7% 15.88%;
     --foreground: 210 20% 98%;
 
+    --skeleton: 240 5% 65%;
+
     --card: 240 5.26% 26.08%;
     --card-secondary: 240 5% 22%;
     --card-foreground: var(--foreground);

src/v2/components/Account/Account.tsx

@@ -1,25 +1,32 @@
 "use client"
 
+import { useDisclosure } from "@/hooks/useDisclosure"
 import { cn } from "@/lib/utils"
+import { Bell } from "@phosphor-icons/react"
 import { SignIn } from "@phosphor-icons/react/dist/ssr"
 import useUser from "components/[guild]/hooks/useUser"
 import useResolveAddress from "hooks/useResolveAddress"
 import { useSetAtom } from "jotai"
 import shortenHex from "utils/shortenHex"
 import { GuildAvatar } from "../GuildAvatar"
+import { usePostHogContext } from "../Providers/PostHogProvider"
 import { accountModalAtom, walletSelectorModalAtom } from "../Providers/atoms"
 import { useWeb3ConnectionManager } from "../Web3ConnectionManager/hooks/useWeb3ConnectionManager"
 import { Button } from "../ui/Button"
 import { Card } from "../ui/Card"
+import { Popover, PopoverContent, PopoverTrigger } from "../ui/Popover"
+import { NotificationContent } from "./components/Notification/NotificationContent"
 
 export const Account = () => {
   const { address } = useWeb3ConnectionManager()
   const setIsAccountModalOpen = useSetAtom(accountModalAtom)
   const setIsWalletSelectorModalOpen = useSetAtom(walletSelectorModalAtom)
+  const { isOpen, setValue } = useDisclosure()
 
   const domainName = useResolveAddress(address)
   const { addresses } = useUser()
   const linkedAddressesCount = (addresses?.length ?? 1) - 1
+  const { captureEvent } = usePostHogContext()
 
   if (!address)
     return (
@@ -32,8 +39,31 @@ export const Account = () => {
     )
 
   return (
-    <Card>
-      <Button variant="ghost" onClick={() => setIsAccountModalOpen(true)}>
+    <Card className="flex items-center">
+      <Popover open={isOpen} onOpenChange={setValue}>
+        <PopoverTrigger asChild>
+          <Button
+            variant="ghost"
+            className="rounded-r-none border-border border-r"
+            aria-label="Notifications"
+            onClick={() => {
+              if (isOpen) return
+              captureEvent("opened UserActivityLogPopover")
+            }}
+          >
+            <Bell weight="bold" />
+          </Button>
+        </PopoverTrigger>
+        <PopoverContent className="w-[min(100vw,theme(space.96))]">
+          <NotificationContent />
+        </PopoverContent>
+      </Popover>
+
+      <Button
+        variant="ghost"
+        onClick={() => setIsAccountModalOpen(true)}
+        className="rounded-l-none"
+      >
         <div className="flex items-center gap-3">
           <div className="flex flex-col items-end gap-0">
             <span

src/v2/components/Account/components/Notification/NotificationContent.tsx

@@ -0,0 +1,50 @@
+"use client"
+
+import { useWeb3ConnectionManager } from "@/components/Web3ConnectionManager/hooks/useWeb3ConnectionManager"
+import { Anchor } from "@/components/ui/Anchor"
+import { buttonVariants } from "@/components/ui/Button"
+import { Separator } from "@/components/ui/Separator"
+import { cn } from "@/lib/utils"
+import { ArrowRight } from "@phosphor-icons/react"
+import dynamic from "next/dynamic"
+import { Web3InboxSkeleton } from "./Web3InboxSkeleton"
+
+const DynamicWeb3Inbox = dynamic(() => import("./Web3Inbox"), {
+  ssr: false,
+  loading: Web3InboxSkeleton,
+})
+
+export const NotificationContent = () => {
+  const { type } = useWeb3ConnectionManager()
+
+  return (
+    <div>
+      {type === "EVM" && (
+        <>
+          <section>
+            <h3 className="mx-4 mb-4 font-bold text-muted-foreground text-xs">
+              MESSAGES
+            </h3>
+            <div className="flex flex-col gap-4">
+              <DynamicWeb3Inbox />
+            </div>
+          </section>
+          <Separator className="my-4" />
+        </>
+      )}
+      <div className="px-4">
+        <Anchor
+          variant="silent"
+          className={cn(
+            buttonVariants({ variant: "ghost", size: "md" }),
+            "w-full gap-2"
+          )}
+          href="/profile/activity"
+        >
+          View recent activity
+          <ArrowRight />
+        </Anchor>
+      </div>
+    </div>
+  )
+}