feat: add notifications (#1360)

* feat: add header

* chore: configure navigator

* feat: `Providers` component

* chore: disable navigator on blur

* feat: `NavigationEvents` component

* refactor: make providers work with both routers

* feat: add IntercomProvider

* feat: usePrevious hook

* feat(CardMotionWrapper): use `m.div` instead of `MotionBox`

* wip: WalletSelectorModal without Google login button

* update package-lock

* fix: proper button states in wallet selector modal

* feat: `NavMenu` as popover

* feat: `CopyableAddress` component

* fix(useGuild): use the new `usePathname` hook

* fix: export `connectorButtonBaseProps` from `ConnectorButton`

* refactor toast related css variables

* fix: replace relevant toasts with our new toast component

* chore: upgrade nextjs

* wip: account modal

* cleanup playground

* refactor posthog, intercom, web3 related contexts & hooks

* cleanup: remove `DialogExample`

* fix(CardMotionWrapper): remove the `EASING` import

* Try fix build "out of memory" error (#1347)

* build: allocate more memory for nodejs on build

* build: increase memory limit

* chore: remove posthog provider to test build error

* chore: remove posthog provider to test build error

* chore: remove reward import

* build: remove memory limit override

* chore: fix circular import

* fix: update import outside v2

* fix: add missing react suspense

* Revert "chore: remove reward import"

This reverts commit b2cf1d8.

* chore: remove accidental svg

* fix(layout): add back `PostHogPageViews`

---------

Co-authored-by: BrickheadJohnny <johnny.zgen@gmail.com>

* feat(CopyableAddress): add tooltip

* feat: `NetworkModal` migration

* feat: `Accordion` component

* temporarily remove `CircularDependencyPlugin`

* move `platformMergeAlertAtom` to `atoms.ts`

* fix(useUserPublic): comment posthog related stuff

* feat: `FarcasterProfile` component

* fix ring color in light mode

* fix: remove ring offset

* fix: connect Farcaster button colors

* feat: define css vars for every platform type

* fix(SocialAccount): use the correct button colors

* feat: `Collapse` component

* feat(Form): don't re-export `FormProvider` as `Form`

* chore: remove old `Header` & `NavMenu`

* fix: Button & Input classNames

* feat(FormErrorMessage): add collapse animation

* feat: migrate the `EmailAddress` component

* chore: migrate `useDisconnect`

* fix(AccountModal): simplify modal state

* fix(EmailAddress): verify flow

* chore: remove unused `AccountButton`

* cleanup: move `processEmailError` inside `AccountModal/utils`

* feat: `useGuildUrlNameFromPathname` helper hook

* wip: `SharedSocials` migration

* refactor: move `useEditSharedSocials` to the `v2` folder

* feat: finish `SharedSocial` migration

* feat: `useErrorToast` hook

* fix(WalletSelectorModal): remove `CardMotionWrapper`

* fix(Button): remove important modifier

* fix(WalletSelectorModal): remove animations

* feat: "Linked addresses" section

* feat: `WalletLinkHelperModal` migration

* feat: `UsersGuildPins` migration

* fix(UsersGuildPins): `isValidating` logic

* fix(_app): remove custom-scrollbar.css import

* patch package-lock

* fix(playground): remove Section component

* chore(playground): remove FormExample

* cleanup: remove unused `GoogleTerms` component

* feat: migrate the `Error` component

* cleanup(LinkedAddress): remove unused legacy code

* fix: use bold icons everywhere under the `/v2` directory

* feat: `/cwaas-export` page

* fix(next.config.js): add `CircularDependencyPlugin`

* fix: uncomment `useResolveAddress` hook usages

* fix(Account): simplify conditional classNames

* fix: don't use `clsx` inside `cn` calls

* fix(usePrevious): remove assertion

* fix(EmailAddress): better generic type for `emailSentAt` state

* chore(NetworkButton): add comment about `img`

* fix(CopyableAddress): simplify className

* fix(NavMenu): remove unnecessary boolean inversion

* cleanup(ConnectorButton): use descriptive variable names

* fix(AddressTypeBadge): tooltip content

* feat: use the `useTheme` hook for dynamic connector icons

* cleanup(useWeb3ConnectionManager): remove ternary

* fix: use consistent ring sizes

* cleanup(tailwind.config.ts): remove unnecessary custom animations

* fix(WalletSelectorModal): move export link to the end of the list

* feat: `IntercomProvider` migration

* feat: `PlatformMergeErrorAlert` migration

* feat: `useConnectFromLocalStorage` migration

* fix(_app): add `Toaster`

* feat: add notifications

* feat: add separator

* feat: add notifications

* feat: `Collapsible` component

* fix(useLensProfile): don't import icon from the requirements config

* fix(EmailAddress): use the new  hook

* fix(FarcasterProfile): use the new  hook

* feat: new `GuildLogo` component

* fix(SharedSocials): use the new `GuildLogo` component

* fix: add more packages to `optimizePackageImports`

* fix(useTriggerNetworkChange): use the new `useToast` hook

* fix: patch package-lock

* fix: Tooltip animation duration

* cleanup: remove some unnecessary comments

* feat(WalletSelectorModal): use the new `Anchor` tag

* feat: add skeleton for notification

* chore: add sign in button

* refactor: write biome check unsafe

* chore: fix ts errors

* feat: add subscribe option

* feat: add modals to notification

* refactor: separate view and container

* cleanup: small copy/naming improvements

* fix(Skeleton): define a CSS variable for skeleton background

* fix(Account): styling/layout improvements

* fix(Skeleton): use the new CSS variables

* refactor: load the `Web3Inbox` component dynamically

* fix: dynamic popover width

---------

Co-authored-by: BrickheadJohnny <johnny.zgen@gmail.com>

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>
+  )
+}