feat: add safe support for batch claiming hypercerts

pheuberger · pheuberger · commit 2b76864f8926 · 2025-04-04T22:53:35.000+03:00
In the previous commit 5ca3a2c I missed adding support for batch claiming hypercerts. This patch adds another set of strategies for this case, nicely abstracting all these code paths into their own strategy.
diff --git a/components/profile/unclaimed-hypercert-batchClaim-button.tsx b/components/profile/unclaimed-hypercert-batchClaim-button.tsx
@@ -1,18 +1,15 @@
 "use client";
 
-import { AllowListRecord } from "@/allowlists/actions/getAllowListRecordsForAddressByClaimed";
-import { revalidatePathServerAction } from "@/app/actions/revalidatePathServerAction";
-import { useHypercertClient } from "@/hooks/use-hypercert-client";
-import { ChainFactory } from "@/lib/chainFactory";
-import { errorToast } from "@/lib/errorToast";
+import { AllowListRecord } from "@/allowlists/getAllowListRecordsForAddressByClaimed";
+import { Button } from "../ui/button";
+import { useAccount, useSwitchChain } from "wagmi";
 import { useRouter } from "next/navigation";
 import { useState } from "react";
-import { ByteArray, getAddress, Hex } from "viem";
-import { waitForTransactionReceipt } from "viem/actions";
-import { useAccount, useSwitchChain, useWalletClient } from "wagmi";
-import { createExtraContent } from "../global/extra-content";
-import { useStepProcessDialogContext } from "../global/step-process-dialog";
-import { Button } from "../ui/button";
+import { getAddress, Hex, ByteArray } from "viem";
+import { errorToast } from "@/lib/errorToast";
+import { ChainFactory } from "@/lib/chainFactory";
+import { useClaimHypercertStrategy } from "@/hypercerts/hooks/useClaimHypercertStrategy";
+import { useAccountStore } from "@/lib/account-store";
 
 interface TransformedClaimData {
   hypercertTokenIds: bigint[];
@@ -39,104 +36,39 @@ export default function UnclaimedHypercertBatchClaimButton({
   allowListRecords: AllowListRecord[];
   selectedChainId: number | null;
 }) {
-  const router = useRouter();
-  const { client } = useHypercertClient();
-  const { data: walletClient } = useWalletClient();
   const account = useAccount();
   const [isLoading, setIsLoading] = useState(false);
-  const { setDialogStep, setSteps, setOpen, setTitle, setExtraContent } =
-    useStepProcessDialogContext();
   const { switchChain } = useSwitchChain();
+  const getStrategy = useClaimHypercertStrategy();
+  const { selectedAccount } = useAccountStore();
+
   const selectedChain = selectedChainId
     ? ChainFactory.getChain(selectedChainId)
     : null;
 
-  const refreshData = async (address: string) => {
-    const hypercertIds = allowListRecords.map((record) => record.hypercert_id);
-
-    const hypercertViewInvalidationPaths = hypercertIds.map((id) => {
-      return `/hypercerts/${id}`;
-    });
-
-    await revalidatePathServerAction([
-      `/profile/${address}`,
-      `/profile/${address}?tab`,
-      `/profile/${address}?tab=hypercerts-claimable`,
-      `/profile/${address}?tab=hypercerts-owned`,
-      ...hypercertViewInvalidationPaths,
-    ]).then(async () => {
-      setTimeout(() => {
-        // refresh after 5 seconds
-        router.refresh();
-
-        // push to the profile page with the hypercerts-claimable tab
-        // because revalidatePath will revalidate on the next page visit.
-        router.push(`/profile/${address}?tab=hypercerts-claimable`);
-      }, 5000);
-    });
-  };
-
   const claimHypercert = async () => {
     setIsLoading(true);
-    setOpen(true);
-    setSteps([
-      { id: "preparing", description: "Preparing to claim fractions..." },
-      { id: "claiming", description: "Claiming fractions on-chain..." },
-      { id: "confirming", description: "Waiting for on-chain confirmation" },
-      { id: "done", description: "Claiming complete!" },
-    ]);
-    setTitle("Claim fractions from Allowlist");
-    if (!client) {
-      throw new Error("No client found");
-    }
-    if (!walletClient) {
-      throw new Error("No wallet client found");
-    }
-    if (!account) {
-      throw new Error("No address found");
-    }
-
-    const claimData = transformAllowListRecords(allowListRecords);
-    await setDialogStep("preparing, active");
     try {
-      await setDialogStep("claiming", "active");
-      const tx = await client.batchClaimFractionsFromAllowlists(claimData);
-
-      if (!tx) {
-        await setDialogStep("claiming", "error");
-        throw new Error("Failed to claim fractions");
-      }
-
-      await setDialogStep("confirming", "active");
-      const receipt = await waitForTransactionReceipt(walletClient, {
-        hash: tx,
-      });
-
-      if (receipt.status == "success") {
-        await setDialogStep("done", "completed");
-        const extraContent = createExtraContent({
-          receipt,
-          chain: account?.chain!,
-        });
-        setExtraContent(extraContent);
-        refreshData(getAddress(account.address!));
-      } else if (receipt.status == "reverted") {
-        await setDialogStep("confirming", "error", "Transaction reverted");
-      }
+      const claimData = transformAllowListRecords(allowListRecords);
+      const params = claimData.hypercertTokenIds.map((tokenId, index) => ({
+        tokenId,
+        units: claimData.units[index],
+        proof: claimData.proofs[index] as `0x${string}`[],
+      }));
+      await getStrategy(params).execute(params);
     } catch (error) {
-      console.error("Claim error:", error);
-      await setDialogStep("claiming", "error", "Transaction failed");
+      console.error(error);
     } finally {
       setIsLoading(false);
     }
   };
 
+  const activeAddress = selectedAccount?.address || account.address;
   const isBatchClaimDisabled =
     isLoading ||
     !allowListRecords.length ||
-    !account ||
-    !client ||
-    account.address !== getAddress(allowListRecords[0].user_address as string);
+    !activeAddress ||
+    activeAddress !== getAddress(allowListRecords[0].user_address as string);
 
   return (
     <>
diff --git a/components/profile/unclaimed-hypercert-claim-button.tsx b/components/profile/unclaimed-hypercert-claim-button.tsx
@@ -35,11 +35,13 @@ export default function UnclaimedHypercertClaimButton({
         throw new Error("Invalid allow list record");
       }
 
-      await claimHypercert({
-        tokenId: BigInt(selectedHypercert.token_id),
-        units: BigInt(selectedHypercert.units),
-        proof: selectedHypercert.proof as `0x${string}`[],
-      });
+      await claimHypercert([
+        {
+          tokenId: BigInt(selectedHypercert.token_id),
+          units: BigInt(selectedHypercert.units),
+          proof: selectedHypercert.proof as `0x${string}`[],
+        },
+      ]);
     } catch (error) {
       console.error(error);
     } finally {
diff --git a/hypercerts/ClaimHypercertStrategy.ts b/hypercerts/ClaimHypercertStrategy.ts
@@ -21,5 +21,5 @@ export abstract class ClaimHypercertStrategy {
     protected router: AppRouterInstance,
   ) {}
 
-  abstract execute(params: ClaimHypercertParams): Promise<void>;
+  abstract execute(params: ClaimHypercertParams[]): Promise<void>;
 }
diff --git a/hypercerts/EOABatchClaimHypercertStrategy.ts b/hypercerts/EOABatchClaimHypercertStrategy.ts
@@ -0,0 +1,89 @@
+import { waitForTransactionReceipt } from "viem/actions";
+
+import { createExtraContent } from "@/components/global/extra-content";
+import { revalidatePathServerAction } from "@/app/actions/revalidatePathServerAction";
+
+import {
+  ClaimHypercertStrategy,
+  ClaimHypercertParams,
+} from "./ClaimHypercertStrategy";
+
+export class EOABatchClaimHypercertStrategy extends ClaimHypercertStrategy {
+  async execute(params: ClaimHypercertParams[]): Promise<void> {
+    const { setDialogStep, setSteps, setOpen, setTitle, setExtraContent } =
+      this.dialogContext;
+    const { data: walletClient } = this.walletClient;
+
+    if (!this.client) throw new Error("No client found");
+    if (!walletClient) throw new Error("No wallet client found");
+
+    setOpen(true);
+    setSteps([
+      { id: "preparing", description: "Preparing to claim fractions..." },
+      { id: "claiming", description: "Claiming fractions on-chain..." },
+      { id: "confirming", description: "Waiting for on-chain confirmation" },
+      { id: "done", description: "Claiming complete!" },
+    ]);
+    setTitle("Claim fractions from Allowlist");
+
+    try {
+      await setDialogStep("preparing", "active");
+      await setDialogStep("claiming", "active");
+
+      const tx = await this.client.batchClaimFractionsFromAllowlists(
+        mapClaimParams(params),
+      );
+      if (!tx) {
+        await setDialogStep("claiming", "error");
+        throw new Error("Failed to claim fractions");
+      }
+
+      await setDialogStep("confirming", "active");
+      const receipt = await waitForTransactionReceipt(walletClient, {
+        hash: tx,
+      });
+
+      if (receipt.status === "success") {
+        await setDialogStep("done", "completed");
+        const extraContent = createExtraContent({
+          receipt,
+          chain: this.chain,
+        });
+        setExtraContent(extraContent);
+
+        const hypercertViewInvalidationPaths = params.map((param) => {
+          return `/hypercerts/${param.tokenId}`;
+        });
+
+        // Revalidate all relevant paths
+        await revalidatePathServerAction([
+          `/profile/${this.address}`,
+          `/profile/${this.address}?tab`,
+          `/profile/${this.address}?tab=hypercerts-claimable`,
+          `/profile/${this.address}?tab=hypercerts-owned`,
+          ...hypercertViewInvalidationPaths,
+        ]);
+
+        // Wait 5 seconds before refreshing and navigating
+        setTimeout(() => {
+          this.router.refresh();
+          this.router.push(`/profile/${this.address}?tab=hypercerts-claimable`);
+        }, 5000);
+      } else if (receipt.status === "reverted") {
+        await setDialogStep("confirming", "error", "Transaction reverted");
+      }
+    } catch (error) {
+      console.error("Claim error:", error);
+      await setDialogStep("claiming", "error", "Transaction failed");
+      throw error;
+    }
+  }
+}
+
+function mapClaimParams(params: ClaimHypercertParams[]) {
+  return {
+    hypercertTokenIds: params.map((p) => p.tokenId),
+    units: params.map((p) => p.units),
+    proofs: params.map((p) => p.proof),
+  };
+}
diff --git a/hypercerts/EOAClaimHypercertStrategy.ts b/hypercerts/EOAClaimHypercertStrategy.ts
@@ -1,4 +1,5 @@
 import { waitForTransactionReceipt } from "viem/actions";
+import assert from "assert";
 
 import { createExtraContent } from "@/components/global/extra-content";
 import { revalidatePathServerAction } from "@/app/actions/revalidatePathServerAction";
@@ -9,7 +10,10 @@ import {
 } from "./ClaimHypercertStrategy";
 
 export class EOAClaimHypercertStrategy extends ClaimHypercertStrategy {
-  async execute({ tokenId, units, proof }: ClaimHypercertParams) {
+  async execute(params: ClaimHypercertParams[]) {
+    assert(params.length === 1, "Only one claim params object allowed");
+
+    const { tokenId, units, proof } = params[0];
     const { setDialogStep, setSteps, setOpen, setTitle, setExtraContent } =
       this.dialogContext;
     const { data: walletClient } = this.walletClient;
diff --git a/hypercerts/SafeBatchClaimHypercertStrategy.tsx b/hypercerts/SafeBatchClaimHypercertStrategy.tsx
@@ -0,0 +1,103 @@
+import { Chain } from "viem";
+import { ExternalLink } from "lucide-react";
+
+import { Button } from "@/components/ui/button";
+import { generateSafeAppLink } from "@/lib/utils";
+
+import {
+  ClaimHypercertStrategy,
+  ClaimHypercertParams,
+} from "./ClaimHypercertStrategy";
+
+function DialogFooter({
+  chain,
+  safeAddress,
+}: {
+  chain: Chain;
+  safeAddress: string;
+}) {
+  return (
+    <div className="flex flex-col space-y-2">
+      <p className="text-lg font-medium">Success</p>
+      <p className="text-sm font-medium">
+        We&apos;ve submitted the transaction requests to the connected Safe.
+      </p>
+      <div className="flex space-x-4 py-4 justify-center">
+        {chain && (
+          <Button asChild>
+            <a
+              href={generateSafeAppLink(chain, safeAddress as `0x${string}`)}
+              target="_blank"
+              rel="noopener noreferrer"
+            >
+              View Safe <ExternalLink size={14} className="ml-2" />
+            </a>
+          </Button>
+        )}
+      </div>
+    </div>
+  );
+}
+
+export class SafeBatchClaimHypercertStrategy extends ClaimHypercertStrategy {
+  async execute(params: ClaimHypercertParams[]): Promise<void> {
+    console.log("[SafeBatchClaim] Starting execution with params:", params);
+    const { setDialogStep, setSteps, setOpen, setTitle, setExtraContent } =
+      this.dialogContext;
+
+    if (!this.client) {
+      console.error("[SafeBatchClaim] No client found");
+      setOpen(false);
+      throw new Error("No client found");
+    }
+
+    console.log("[SafeBatchClaim] Setting up dialog UI");
+    setOpen(true);
+    setTitle("Claim fractions from Allowlist");
+    setSteps([
+      { id: "preparing", description: "Preparing to claim fractions..." },
+      { id: "submitting", description: "Submitting to Safe..." },
+      { id: "queued", description: "Transaction queued in Safe" },
+    ]);
+
+    await setDialogStep("preparing", "active");
+    console.log("[SafeBatchClaim] Preparation step completed");
+
+    try {
+      console.log("[SafeBatchClaim] Starting submission to Safe");
+      await setDialogStep("submitting", "active");
+      const mappedParams = mapClaimParams(params);
+      console.log("[SafeBatchClaim] Mapped params:", mappedParams);
+
+      await this.client.batchClaimFractionsFromAllowlists({
+        ...mappedParams,
+        overrides: {
+          safeAddress: this.address as `0x${string}`,
+        },
+      });
+
+      console.log("[SafeBatchClaim] Successfully queued transaction in Safe");
+      await setDialogStep("queued", "completed");
+
+      setExtraContent(() => (
+        <DialogFooter chain={this.chain} safeAddress={this.address} />
+      ));
+    } catch (error) {
+      console.error("[SafeBatchClaim] Error during execution:", error);
+      await setDialogStep(
+        "submitting",
+        "error",
+        error instanceof Error ? error.message : "Unknown error",
+      );
+      throw error;
+    }
+  }
+}
+
+function mapClaimParams(params: ClaimHypercertParams[]) {
+  return {
+    hypercertTokenIds: params.map((p) => p.tokenId),
+    units: params.map((p) => p.units),
+    proofs: params.map((p) => p.proof),
+  };
+}
diff --git a/hypercerts/SafeClaimHypercertStrategy.tsx b/hypercerts/SafeClaimHypercertStrategy.tsx
diff --git a/hypercerts/hooks/useClaimHypercert.ts b/hypercerts/hooks/useClaimHypercert.ts
diff --git a/hypercerts/hooks/useClaimHypercertStrategy.ts b/hypercerts/hooks/useClaimHypercertStrategy.ts

Original file line number	Diff line number	Diff line change
`@@ -21,5 +21,5 @@ export abstract class ClaimHypercertStrategy {`
`21`	`21`	`protected router: AppRouterInstance,`
`22`	`22`	`) {}`
`23`	`23`
`24`		`- abstract execute(params: ClaimHypercertParams): Promise<void>;`
	`24`	`+ abstract execute(params: ClaimHypercertParams[]): Promise<void>;`
`25`	`25`	`}`