purchase history drawer with example data

package.json

@@ -49,7 +49,7 @@
     "@radix-ui/react-avatar": "^1.1.0",
     "@radix-ui/react-checkbox": "^1.1.1",
     "@radix-ui/react-collapsible": "^1.1.0",
-    "@radix-ui/react-dialog": "^1.1.1",
+    "@radix-ui/react-dialog": "^1.1.2",
     "@radix-ui/react-dropdown-menu": "^2.1.1",
     "@radix-ui/react-focus-scope": "^1.1.0",
     "@radix-ui/react-hover-card": "^1.1.1",
@@ -124,6 +124,7 @@
     "three": "^0.166.1",
     "usehooks-ts": "^3.1.0",
     "uuidv7": "^0.6.3",
+    "vaul": "^1.0.0",
     "viem": "^2.21.1",
     "wagmi": "^2.12.8",
     "zod": "^3.22.4"

src/pages/_app.tsx

@@ -19,6 +19,7 @@ import { WagmiProvider } from "wagmi"
 import { wagmiConfig } from "wagmiConfig"
 import "../app/globals.css"
 import { AccountModal } from "@/components/Account/components/AccountModal"
+import { PurchaseHistoryDrawer } from "@/components/Account/components/PurchaseHistoryDrawer/PurchaseHistoryDrawer"
 import AppErrorBoundary from "@/components/AppErrorBoundary"
 import { IntercomProvider } from "@/components/Providers/IntercomProvider"
 import { Toaster } from "@/components/ui/Toaster"
@@ -83,6 +84,7 @@ const App = ({
 
                         <ClientOnly>
                           <AccountModal />
+                          <PurchaseHistoryDrawer />
                         </ClientOnly>
                       </IntercomProvider>
 

src/v2/components/Account/components/AccountModal/components/Account.tsx

@@ -1,5 +1,6 @@
 import { CopyableAddress } from "@/components/CopyableAddress"
 import { GuildAvatar } from "@/components/GuildAvatar"
+import { purchaseHistoryDrawerAtom } from "@/components/Providers/atoms"
 import useConnectorNameAndIcon from "@/components/Web3ConnectionManager/hooks/useConnectorNameAndIcon"
 import { useWeb3ConnectionManager } from "@/components/Web3ConnectionManager/hooks/useWeb3ConnectionManager"
 import {
@@ -11,6 +12,7 @@ import {
 import { IconButton } from "@/components/ui/IconButton"
 import { DotsThreeVertical, File, SignOut } from "@phosphor-icons/react"
 import useResolveAddress from "hooks/useResolveAddress"
+import { useSetAtom } from "jotai"
 import { useAccount } from "wagmi"
 import { NetworkIndicator } from "./NetworkIndicator"
 
@@ -25,6 +27,8 @@ export const Account = ({ handleLogout }: AccountProps) => {
   const { address: evmAddress } = useAccount()
   const domain = useResolveAddress(evmAddress ?? "")
 
+  const setIsPurchaseHistoryOpen = useSetAtom(purchaseHistoryDrawerAtom)
+
   if (!address) return null
 
   return (
@@ -59,7 +63,10 @@ export const Account = ({ handleLogout }: AccountProps) => {
           />
         </DropdownMenuTrigger>
         <DropdownMenuContent>
-          <DropdownMenuItem className="flex items-center gap-2 px-4 font-semibold">
+          <DropdownMenuItem
+            className="flex items-center gap-2 px-4 font-semibold"
+            onClick={() => setIsPurchaseHistoryOpen(true)}
+          >
             <File weight="bold" className="size-4" />
             Purchase history
           </DropdownMenuItem>

src/v2/components/Account/components/AccountModal/components/AccountGuildProfile.tsx

@@ -19,9 +19,11 @@ import { LevelBadge } from "@app/(marketing)/profile/_components/LevelBadge"
 import { ArrowRight, DotsThreeVertical } from "@phosphor-icons/react"
 import { File, SignOut } from "@phosphor-icons/react/dist/ssr"
 
+import { purchaseHistoryDrawerAtom } from "@/components/Providers/atoms"
 import useConnectorNameAndIcon from "@/components/Web3ConnectionManager/hooks/useConnectorNameAndIcon"
 import { useExperienceProgression } from "@app/(marketing)/profile/_hooks/useExperienceProgression"
 import useUser from "components/[guild]/hooks/useUser"
+import { useSetAtom } from "jotai"
 import { NetworkIndicator } from "../components/NetworkIndicator"
 
 type AccountGuildProfileProps = {
@@ -36,6 +38,7 @@ export const AccountGuildProfile = ({
   const { guildProfile } = useUser()
   const xp = useExperienceProgression(true)
   const { connectorName } = useConnectorNameAndIcon()
+  const setIsPurchaseHistoryOpen = useSetAtom(purchaseHistoryDrawerAtom)
 
   if (!guildProfile) return null
 
@@ -108,7 +111,10 @@ export const AccountGuildProfile = ({
               />
             </DropdownMenuTrigger>
             <DropdownMenuContent>
-              <DropdownMenuItem className="flex items-center gap-2 px-4 font-semibold">
+              <DropdownMenuItem
+                className="flex items-center gap-2 px-4 font-semibold"
+                onClick={() => setIsPurchaseHistoryOpen(true)}
+              >
                 <File weight="bold" className="size-4" />
                 Purchase history
               </DropdownMenuItem>