feat: purchase history (#1523)

* feat(AccountModal): add purchase history menu item

* rebase with latest changes

* connect to backend

* use copyable address component

* TEMP: forgot rebase process

* fix build errors

* remove introduced default exports

* fix: run biome check

* feat(PurchaseHistoryDrawer): download receipts

* feat: initialize order verification on NFT mint

* refactor: include billing service types

* fix(RequirementAccessIndicatorUI): exclude `red` color scheme

* refactor: move prettyDate to a util

* fix(useOrders): don't revalidate on mount

* refactor: simplify PurchaseHistoryDrawer

* temp: use the dev api

* chore: run biome check

* fix: remove deprecated requirement components

* fix(useOrders): dynamic revalidateOnMount value

* fix: don't use custom rpc for sepolia

* fix: update the types package

* feat: limit order download to supported countries

* reset env to prod backend api

* fix: order fetching on drawer open

---------

Co-authored-by: BrickheadJohnny <[email protected]>

package.json

@@ -123,6 +123,7 @@
     "three": "^0.166.1",
     "usehooks-ts": "^3.1.0",
     "uuidv7": "^0.6.3",
+    "vaul": "^1.1.2",
     "viem": "^2.22.4",
     "wagmi": "^2.14.6",
     "zod": "^3.22.4"

src/components/[guild]/Requirements/components/GuildCheckout/hooks/useMintGuildPin.tsx

@@ -201,12 +201,12 @@ const useMintGuildPin = () => {
       shareText: `Just minted my Guild Pin for joining ${name}!\nguild.xyz/${urlName}`,
     })
 
-    createPurchase(hash)
+    verifyPurchase(hash)
   }
 
   const fetcherWithSign = useFetcherWithSign()
 
-  const createPurchase = (txHash: string) => {
+  const verifyPurchase = (txHash: string) => {
     fetcherWithSign([
       `/v2/users/${address}/orders/verify`,
       {

src/components/[guild]/Requirements/components/RequirementAccessIndicatorUI.tsx

@@ -10,7 +10,7 @@ import { Icon } from "@phosphor-icons/react/dist/lib/types"
 import { PropsWithChildren, useState } from "react"
 
 type Props = {
-  colorScheme: NonNullable<Exclude<BadgeProps["colorScheme"], "gold">>
+  colorScheme: NonNullable<Exclude<BadgeProps["colorScheme"], "gold" | "red">>
   icon: Icon
   isAlwaysOpen?: boolean
 }
@@ -19,7 +19,7 @@ const CIRCLE_BG_CLASS = {
   gray: "bg-secondary",
   blue: "bg-info dark:bg-info-subtle-foreground",
   green: "bg-success dark:bg-success-subtle-foreground",
-  orange: "bg-warning  dark:bg-warning-subtle-foreground",
+  orange: "bg-warning dark:bg-warning-subtle-foreground",
 } satisfies Record<Props["colorScheme"], string>
 
 const RequirementAccessIndicatorUI = ({

src/components/[guild]/collect/hooks/useCollectNft.ts

@@ -102,6 +102,18 @@ const useCollectNft = () => {
   })
   const claimAmount = claimAmountFromForm ?? 1
 
+  const verifyPurchase = (txHash: string) => {
+    fetcherWithSign([
+      `/v2/users/${userAddress}/orders/verify`,
+      {
+        body: {
+          txHash: txHash,
+          chainId,
+        },
+      },
+    ])
+  }
+
   const mint = async () => {
     setTxError(null)
     setTxSuccess(false)
@@ -187,6 +199,7 @@ const useCollectNft = () => {
 
     setTxSuccess(true)
 
+    verifyPurchase(hash)
     return receipt
   }
 

src/pages/_app.tsx

@@ -18,6 +18,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 { AnnouncementDialog } from "@/components/AnnouncementDialog"
 import AppErrorBoundary from "@/components/AppErrorBoundary"
 import { IntercomProvider } from "@/components/Providers/IntercomProvider"
@@ -84,6 +85,7 @@ const App = ({
 
                         <ClientOnly>
                           <AccountModal />
+                          <PurchaseHistoryDrawer />
                         </ClientOnly>
                       </IntercomProvider>
 

src/requirements/Farcaster/components/FarcasterCast.tsx

@@ -1,3 +1,4 @@
+import { prettyDate } from "@/lib/prettyDate"
 import { cn } from "@/lib/utils"
 import { Icon } from "@phosphor-icons/react/dist/lib/types"
 import {
@@ -24,12 +25,6 @@ export const FarcasterCast = ({
   size?: string
 }) => {
   const url = `https://warpcast.com/${cast?.author.username}/${cast?.hash}`
-  const prettyDate =
-    cast?.timestamp &&
-    new Intl.DateTimeFormat("en-US", {
-      dateStyle: "short",
-      timeStyle: "short",
-    }).format(new Date(cast.timestamp))
 
   if (size === "sm") {
     return <FarcasterCastSmall cast={cast} error={error} loading={loading} />
@@ -76,7 +71,11 @@ export const FarcasterCast = ({
             <span className="text-ellipsis font-bold text-sm">
               {cast.author.display_name ?? cast.author.username}
             </span>
-            <span className="text-muted-foreground text-xs">{prettyDate}</span>
+            {cast?.timestamp && (
+              <span className="text-muted-foreground text-xs">
+                {prettyDate(cast.timestamp)}
+              </span>
+            )}
           </div>
         </div>
 

src/requirements/Twitter/TwitterRequirement.tsx

@@ -18,6 +18,7 @@ import TwitterListLink from "./components/TwitterListLink"
 import TwitterTweetLink from "./components/TwitterTweetLink"
 import TwitterUserLink from "./components/TwitterUserLink"
 
+type TW = Extract<RequirementType, `TWITTER_${string}`> | "LINK_VISIT"
 type TwitterRequirementType =
   | Extract<RequirementType, `TWITTER_${string}`>
   /**

src/static/billingSupportedCountries.ts

@@ -0,0 +1,30 @@
+export const SupportedCountryCodes = [
+  "AT",
+  "BE",
+  "BG",
+  "CY",
+  "CZ",
+  "DE",
+  "DK",
+  "EE",
+  "EL",
+  "ES",
+  "FI",
+  "FR",
+  "HR",
+  "HU",
+  "IE",
+  "IT",
+  "LT",
+  "LU",
+  "LV",
+  "MT",
+  "NL",
+  "PL",
+  "PT",
+  "RO",
+  "SE",
+  "SI",
+  "SK",
+] as const
+export type SupportedCountryCode = (typeof SupportedCountryCodes)[number]