feat: purchase history

.env

@@ -1,4 +1,4 @@
-NEXT_PUBLIC_API=https://api.guild.xyz/v1
+NEXT_PUBLIC_API=https://api.dev.guild-api.xyz/v1
 NEXT_PUBLIC_URL=https://$NEXT_PUBLIC_VERCEL_URL
 NEXT_PUBLIC_DISCORD_CLIENT_ID=868172385000509460
 NEXT_PUBLIC_IPFS_GATEWAY=https://guild-xyz.mypinata.cloud/ipfs/

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)
@@ -175,6 +187,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}`>
   /**
@@ -37,7 +38,7 @@ const requirementIntentAction: Partial<
 export const TWITTER_HANDLE_REGEX = /^[a-z0-9_]+$/i
 
 const TwitterRequirement = (props: RequirementProps) => {
-  const requirement = useRequirementContext<TwitterRequirementType>()
+  const requirement = useRequirementContext()
   const { id: userId, platformUsers } = useUser()
   const isTwitterConnected = platformUsers?.find(
     (pu) => pu.platformId === PlatformType.TWITTER_V1
@@ -53,7 +54,9 @@ const TwitterRequirement = (props: RequirementProps) => {
           ) : (
             <TwitterIntent
               action={
-                requirementIntentAction[requirement.type] as TwitterIntentAction
+                requirementIntentAction[
+                  requirement.type as TwitterRequirementType
+                ] as TwitterIntentAction
               }
             />
           )
@@ -68,7 +71,7 @@ const TwitterRequirement = (props: RequirementProps) => {
           "minAmount" in requirement.data ? requirement.data.minAmount : 0
         )
 
-        switch (requirement.type) {
+        switch (requirement.type as TwitterRequirementType) {
           case "TWITTER_NAME":
             return (
               <>

src/requirements/WalletActivity/WalletActivityRequirement.tsx

@@ -44,7 +44,7 @@ type CovalentRequirementType =
   | "COVALENT_TX_VALUE_RELATIVE"
 
 const WalletActivityRequirement = (props: RequirementProps): JSX.Element => {
-  const requirement = useRequirementContext<CovalentRequirementType>()
+  const requirement = useRequirementContext()
   const reqData = requirement.data as any // Important note: we needed a hotfix for the requirement icon, but we should find a proper solution for this.
 
   const maxAmount = reqData?.timestamps?.maxAmount

src/requirements/requirementDisplayComponents.ts

@@ -28,13 +28,6 @@ export const REQUIREMENT_DISPLAY_COMPONENTS = {
   CONTRACT: dynamic<RequirementProps>(
     () => import("requirements/ContractState/ContractStateRequirement")
   ),
-  // TODO: TX_VALUE requirements are deprecated
-  COVALENT_TX_VALUE: dynamic<RequirementProps>(
-    () => import("requirements/WalletActivity/WalletActivityRequirement")
-  ),
-  COVALENT_TX_VALUE_RELATIVE: dynamic<RequirementProps>(
-    () => import("requirements/WalletActivity/WalletActivityRequirement")
-  ),
   COVALENT_FIRST_TX: dynamic<RequirementProps>(
     () => import("requirements/WalletActivity/WalletActivityRequirement")
   ),
@@ -119,10 +112,6 @@ export const REQUIREMENT_DISPLAY_COMPONENTS = {
   FORM_SUBMISSION: dynamic<RequirementProps>(
     () => import("requirements/Form/FormRequirement")
   ),
-  // TODO: this is a deprecated requirement
-  FORM_APPROVAL: dynamic<RequirementProps>(
-    () => import("requirements/Form/FormRequirement")
-  ),
   WORLD_ID_VERIFICATION: dynamic<RequirementProps>(
     () => import("requirements/WorldID/WorldIDRequirement")
   ),
@@ -180,10 +169,6 @@ export const REQUIREMENT_DISPLAY_COMPONENTS = {
   TWITTER_TWEET_COUNT: dynamic<RequirementProps>(
     () => import("requirements/Twitter/TwitterRequirement")
   ),
-  // TODO: this is a deprecated requirement
-  TWITTER_LIST_FOLLOW: dynamic<RequirementProps>(
-    () => import("requirements/Twitter/TwitterRequirement")
-  ),
   GITHUB_STARRING: dynamic<RequirementProps>(
     () => import("requirements/Github/GithubRequirement")
   ),

src/requirements/requirementFormComponents.ts

@@ -18,13 +18,6 @@ export const REQUIREMENT_FORM_COMPONENTS = {
   CONTRACT: dynamic<RequirementFormProps>(
     () => import("requirements/ContractState/ContractStateForm")
   ),
-  // TODO: TX_VALUE requirements are deprecated
-  COVALENT_TX_VALUE: dynamic<RequirementFormProps>(
-    () => import("requirements/WalletActivity/WalletActivityForm")
-  ),
-  COVALENT_TX_VALUE_RELATIVE: dynamic<RequirementFormProps>(
-    () => import("requirements/WalletActivity/WalletActivityForm")
-  ),
   COVALENT_FIRST_TX: dynamic<RequirementFormProps>(
     () => import("requirements/WalletActivity/WalletActivityForm")
   ),
@@ -109,10 +102,6 @@ export const REQUIREMENT_FORM_COMPONENTS = {
   FORM_SUBMISSION: dynamic<RequirementFormProps>(
     () => import("requirements/Form/FormForm")
   ),
-  // TODO: this is a deprecated requirement
-  FORM_APPROVAL: dynamic<RequirementFormProps>(
-    () => import("requirements/Form/FormForm")
-  ),
   WORLD_ID_VERIFICATION: dynamic<RequirementFormProps>(
     () => import("requirements/WorldID/WorldIDForm")
   ),
@@ -170,10 +159,6 @@ export const REQUIREMENT_FORM_COMPONENTS = {
   TWITTER_TWEET_COUNT: dynamic<RequirementFormProps>(
     () => import("requirements/Twitter/TwitterForm")
   ),
-  // TODO: this is a deprecated requirement
-  TWITTER_LIST_FOLLOW: dynamic<RequirementFormProps>(
-    () => import("requirements/Twitter/TwitterForm")
-  ),
   GITHUB_STARRING: dynamic<RequirementFormProps>(
     () => import("requirements/Github/GithubForm")
   ),

src/requirements/types.ts

@@ -3,7 +3,13 @@ import { Icon } from "@phosphor-icons/react"
 import { UseControllerProps } from "react-hook-form"
 import { Requirement } from "types"
 
-export type RequirementType = Schemas["Requirement"]["type"]
+export type RequirementType = Exclude<
+  Schemas["Requirement"]["type"],
+  | "COVALENT_TX_VALUE"
+  | "COVALENT_TX_VALUE_RELATIVE"
+  | "FORM_APPROVAL"
+  | "TWITTER_LIST_FOLLOW"
+>
 
 export type RequirementFormProps = {
   baseFieldPath: string