feat: purchase history

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.1.0",
     "viem": "^2.21.32",
     "wagmi": "^2.12.22",
     "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 { TermsOfUseUpdateDialog } from "@/components/TermsOfUseUpdateDialog"
@@ -84,6 +85,7 @@ const App = ({
 
                         <ClientOnly>
                           <AccountModal />
+                          <PurchaseHistoryDrawer />
                         </ClientOnly>
                       </IntercomProvider>
 

src/utils/fetcher.ts

@@ -59,9 +59,15 @@ const fetcher = async (
 
   return fetch(endpoint, options).then(async (response: Response) => {
     const contentType = response.headers.get("content-type")
-    const res = contentType.includes("json")
-      ? await response.json?.()
-      : await response.text()
+
+    let res
+    if (contentType?.includes("json")) {
+      res = await response.json?.()
+    } else if (contentType?.includes("pdf")) {
+      return response.blob()
+    } else {
+      res = await response.text()
+    }
 
     if (!response.ok) {
       if (

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

@@ -1,14 +1,5 @@
-import { CheckMark } from "@/components/CheckMark"
-import { CircularProgressBar } from "@/components/CircularProgressBar"
-import { CopyableAddress } from "@/components/CopyableAddress"
-import { GuildAvatar } from "@/components/GuildAvatar"
-import { ProfileAvatar } from "@/components/ProfileAvatar"
 import { accountModalAtom } from "@/components/Providers/atoms"
-import useConnectorNameAndIcon from "@/components/Web3ConnectionManager/hooks/useConnectorNameAndIcon"
 import { useWeb3ConnectionManager } from "@/components/Web3ConnectionManager/hooks/useWeb3ConnectionManager"
-import { Anchor } from "@/components/ui/Anchor"
-import { Avatar } from "@/components/ui/Avatar"
-import { buttonVariants } from "@/components/ui/Button"
 import {
   Dialog,
   DialogBody,
@@ -18,43 +9,23 @@ import {
   DialogHeader,
   DialogTitle,
 } from "@/components/ui/Dialog"
-import {
-  DropdownMenu,
-  DropdownMenuContent,
-  DropdownMenuItem,
-  DropdownMenuLabel,
-  DropdownMenuTrigger,
-} from "@/components/ui/DropdownMenu"
-import { IconButton } from "@/components/ui/IconButton"
 import { Separator } from "@/components/ui/Separator"
-import { Tooltip, TooltipContent, TooltipTrigger } from "@/components/ui/Tooltip"
 import { useUserPublic } from "@/hooks/useUserPublic"
-import { LevelBadge } from "@app/(marketing)/profile/_components/LevelBadge"
-import { useExperienceProgression } from "@app/(marketing)/profile/_hooks/useExperienceProgression"
-import { ArrowRight, DotsThreeVertical } from "@phosphor-icons/react"
-import { SignOut } from "@phosphor-icons/react/dist/ssr"
 import useUser from "components/[guild]/hooks/useUser"
-import useResolveAddress from "hooks/useResolveAddress"
 import { useAtom } from "jotai"
 import { deleteKeyPairFromIdb } from "utils/keyPair"
-import { useAccount } from "wagmi"
+import { Account } from "./components/Account"
 import { AccountConnections } from "./components/AccountConnections"
-import { NetworkIndicator } from "./components/NetworkIndicator"
+import { AccountGuildProfile } from "./components/AccountGuildProfile"
 import { UsersGuildPins } from "./components/UsersGuildPins"
 
 const AccountModal = () => {
-  const { address, disconnect, type } = useWeb3ConnectionManager()
-  const { connectorName } = useConnectorNameAndIcon()
-
+  const { address, disconnect } = useWeb3ConnectionManager()
   const [isOpen, setIsOpen] = useAtom(accountModalAtom)
 
   const { id, guildProfile } = useUser()
   const { deleteKeys } = useUserPublic()
 
-  const { address: evmAddress, chainId } = useAccount()
-  const domain = useResolveAddress(evmAddress)
-  const xp = useExperienceProgression(true)
-
   const handleLogout = () => {
     const keysToRemove = Object.keys({ ...window.localStorage }).filter((key) =>
       /^dc_auth_[a-z]*$/.test(key)
@@ -65,7 +36,7 @@ const AccountModal = () => {
     })
 
     deleteKeyPairFromIdb(id)
-      ?.catch(() => {})
+      ?.catch(() => null)
       .finally(() => {
         setIsOpen(false)
         disconnect()
@@ -87,129 +58,12 @@ const AccountModal = () => {
           {address ? (
             <>
               {guildProfile ? (
-                <div className="mb-8 flex gap-3">
-                  {xp && (
-                    <div className="relative mr-2 flex aspect-square items-center justify-center">
-                      <CircularProgressBar
-                        progress={xp.progress}
-                        color={xp.rank.color}
-                        className="absolute inset-0 size-full"
-                      />
-                      <Avatar
-                        size="2xl"
-                        className="m-1.5 flex items-center justify-center rounded-full border"
-                      >
-                        <ProfileAvatar
-                          username={guildProfile.username}
-                          profileImageUrl={guildProfile.profileImageUrl}
-                        />
-                      </Avatar>
-                      <LevelBadge
-                        level={xp.level}
-                        rank={xp.rank}
-                        className="absolute right-0.5 bottom-0.5"
-                      />
-                    </div>
-                  )}
-                  <div className="flex w-full flex-col justify-center">
-                    <h3 className=" flex items-center font-bold">
-                      <span className="max-w-52 truncate">
-                        {guildProfile.name || guildProfile.username}
-                      </span>
-                      <CheckMark className="ml-0.5 inline-block fill-yellow-500" />
-                    </h3>
-                    <div className="flex gap-2 text-muted-foreground text-sm">
-                      <span>@{guildProfile.username}</span>
-                      <Separator orientation="vertical" />
-                      {xp && (
-                        <Tooltip>
-                          <TooltipTrigger>{xp.experienceCount} XP</TooltipTrigger>
-                          <TooltipContent>
-                            {`${xp.currentLevelXp} -> `}
-                            <span className="font-bold">
-                              {xp.experienceCount} XP
-                            </span>
-                            {` -> ${xp.nextLevelXp}`}
-                          </TooltipContent>
-                        </Tooltip>
-                      )}
-                    </div>
-                    <div className="mt-2 flex gap-1.5">
-                      <Anchor
-                        href={`/profile/${guildProfile.username}`}
-                        className={buttonVariants({
-                          className: "w-full gap-3",
-                          size: "sm",
-                        })}
-                        variant="unstyled"
-                        onClick={() => setIsOpen(false)}
-                      >
-                        View profile
-                        <ArrowRight weight="bold" />
-                      </Anchor>
-                      <DropdownMenu>
-                        <DropdownMenuTrigger asChild>
-                          <IconButton
-                            aria-label="Open menu"
-                            variant="outline"
-                            size="sm"
-                            icon={<DotsThreeVertical weight="bold" />}
-                          />
-                        </DropdownMenuTrigger>
-                        <DropdownMenuContent>
-                          <DropdownMenuLabel className="mt-2 flex gap-1 px-4 text-muted-foreground">
-                            Connected with {connectorName}
-                            <NetworkIndicator />
-                          </DropdownMenuLabel>
-                          <DropdownMenuItem
-                            className="flex items-center gap-2 px-4 font-semibold"
-                            onClick={handleLogout}
-                          >
-                            <SignOut weight="bold" className="size-4" />
-                            Disconnect
-                          </DropdownMenuItem>
-                        </DropdownMenuContent>
-                      </DropdownMenu>
-                    </div>
-                  </div>
-                </div>
+                <AccountGuildProfile
+                  handleLogout={handleLogout}
+                  onClose={() => setIsOpen(false)}
+                />
               ) : (
-                <div className="mb-8 flex items-center gap-3">
-                  <div className="flex size-12 items-center justify-center rounded-full border bg-card-secondary">
-                    <GuildAvatar address={address} />
-                  </div>
-                  <div className="flex flex-col items-start gap-1">
-                    <CopyableAddress
-                      address={address}
-                      domain={domain}
-                      decimals={5}
-                      className="font-bold"
-                    />
-
-                    <div className="flex items-center gap-1">
-                      <p className="line-clamp-1 font-medium text-muted-foreground text-sm">
-                        {`Connected with ${connectorName}`}
-                      </p>
-                      <NetworkIndicator />
-                    </div>
-                  </div>
-
-                  <Tooltip>
-                    <TooltipTrigger asChild>
-                      <IconButton
-                        aria-label="Disconnect"
-                        icon={<SignOut weight="bold" className="size-3" />}
-                        variant="outline"
-                        size="sm"
-                        className="ml-auto"
-                        onClick={handleLogout}
-                      />
-                    </TooltipTrigger>
-                    <TooltipContent>
-                      <span>Disconnect</span>
-                    </TooltipContent>
-                  </Tooltip>
-                </div>
+                <Account handleLogout={handleLogout} />
               )}
 
               <AccountConnections />

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

@@ -0,0 +1,84 @@
+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 {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuTrigger,
+} from "@/components/ui/DropdownMenu"
+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"
+
+type AccountProps = {
+  handleLogout: () => void
+}
+
+export const Account = ({ handleLogout }: AccountProps) => {
+  const { address } = useWeb3ConnectionManager()
+  const { connectorName } = useConnectorNameAndIcon()
+
+  const { address: evmAddress } = useAccount()
+  const domain = useResolveAddress(evmAddress ?? "")
+
+  const setIsPurchaseHistoryOpen = useSetAtom(purchaseHistoryDrawerAtom)
+
+  if (!address) return null
+
+  return (
+    <div className="mb-8 flex items-center gap-3">
+      <div className="flex size-12 items-center justify-center rounded-full border bg-card-secondary">
+        <GuildAvatar address={address} />
+      </div>
+      <div className="flex flex-col items-start gap-1">
+        <CopyableAddress
+          address={address}
+          domain={domain}
+          decimals={5}
+          className="font-bold"
+        />
+
+        <div className="flex items-center gap-1">
+          <p className="line-clamp-1 font-medium text-muted-foreground text-sm">
+            {`Connected with ${connectorName}`}
+          </p>
+          <NetworkIndicator />
+        </div>
+      </div>
+
+      <DropdownMenu>
+        <DropdownMenuTrigger asChild>
+          <IconButton
+            className="ml-auto"
+            aria-label="Open menu"
+            variant="outline"
+            size="sm"
+            icon={<DotsThreeVertical weight="bold" />}
+          />
+        </DropdownMenuTrigger>
+        <DropdownMenuContent>
+          <DropdownMenuItem
+            className="flex items-center gap-2 px-4 font-semibold"
+            onClick={() => setIsPurchaseHistoryOpen(true)}
+          >
+            <File weight="bold" className="size-4" />
+            Purchase history
+          </DropdownMenuItem>
+          <DropdownMenuItem
+            className="flex items-center gap-2 px-4 font-semibold"
+            onClick={handleLogout}
+          >
+            <SignOut weight="bold" className="size-4" />
+            Disconnect
+          </DropdownMenuItem>
+        </DropdownMenuContent>
+      </DropdownMenu>
+    </div>
+  )
+}