feat: batch claim fraction

app/profile/[address]/hypercerts-tab-content.tsx

@@ -2,12 +2,15 @@ import { getHypercertsByCreator } from "@/hypercerts/getHypercertsByCreator";
 import { getAllowListRecordsForAddressByClaimed } from "@/allowlists/getAllowListRecordsForAddressByClaimed";
 import HypercertWindow from "@/components/hypercert/hypercert-window";
 import { EmptySection } from "@/components/global/sections";
-import UnclaimedHypercertsList from "@/components/profile/unclaimed-hypercerts-list";
+import UnclaimedHypercertsList, {
+  UnclaimedFraction,
+} from "@/components/profile/unclaimed-hypercerts-list";
 import { Suspense } from "react";
 import ExploreListSkeleton from "@/components/explore/explore-list-skeleton";
 import { ProfileSubTabKey, subTabs } from "@/app/profile/[address]/tabs";
 import { SubTabsWithCount } from "@/components/profile/sub-tabs-with-count";
 import { getHypercertsByOwner } from "@/hypercerts/getHypercertsByOwner";
+import { getHypercert } from "@/hypercerts/getHypercert";
 
 const HypercertsTabContentInner = async ({
   address,
@@ -27,7 +30,27 @@ const HypercertsTabContentInner = async ({
   const claimableHypercerts = await getAllowListRecordsForAddressByClaimed(
     address,
     false,
-  );
+  ).then(async (res) => {
+    if (!res?.data) {
+      return {
+        data: [],
+        count: 0,
+      };
+    }
+    const hypercertsWithMetadata = await Promise.all(
+      res.data.map(async (record): Promise<UnclaimedFraction> => {
+        const hypercert = await getHypercert(record.hypercert_id as string);
+        return {
+          ...record,
+          metadata: hypercert?.metadata || null,
+        };
+      }),
+    );
+    return {
+      data: hypercertsWithMetadata,
+      count: res?.count,
+    };
+  });
 
   const showCreatedHypercerts =
     createdHypercerts?.data && createdHypercerts.data.length > 0;

components/global/extra-content.tsx

@@ -0,0 +1,64 @@
+import { Button, buttonVariants } from "@/components/ui/button";
+import { createElement } from "react";
+import type { Chain, TransactionReceipt } from "viem";
+import { generateBlockExplorerLink } from "@/lib/utils";
+
+export const createExtraContent = (
+  receipt: TransactionReceipt,
+  hypercertId?: string,
+  chain?: Chain,
+) => {
+  const receiptButton =
+    receipt &&
+    createElement(
+      "a",
+      {
+        href: generateBlockExplorerLink(chain, receipt.transactionHash),
+        target: "_blank",
+        rel: "noopener noreferrer",
+      },
+      createElement(
+        Button,
+        {
+          size: "default",
+          className: buttonVariants({ variant: "secondary" }),
+        },
+        "View transaction",
+      ),
+    );
+
+  const hypercertButton =
+    hypercertId &&
+    createElement(
+      "a",
+      {
+        href: `/hypercerts/${hypercertId}`,
+        target: "_blank",
+        rel: "noopener noreferrer",
+      },
+      createElement(
+        Button,
+        {
+          size: "default",
+          className: buttonVariants({ variant: "default" }),
+        },
+        "View hypercert",
+      ),
+    );
+
+  return createElement(
+    "div",
+    { className: "flex flex-col space-y-2" },
+    createElement(
+      "p",
+      { className: "text-sm font-medium" },
+      "Your hypercert has been minted successfully!",
+    ),
+    createElement(
+      "div",
+      { className: "flex space-x-4" },
+      receiptButton,
+      hypercertButton,
+    ),
+  );
+};

components/profile/unclaimed-hypercert-butchClaim-button.tsx

@@ -0,0 +1,145 @@
+"use client";
+
+import { AllowListRecord } from "@/allowlists/getAllowListRecordsForAddressByClaimed";
+import { Button } from "../ui/button";
+import { useHypercertClient } from "@/hooks/use-hypercert-client";
+import { waitForTransactionReceipt } from "viem/actions";
+import { useAccount, useSwitchChain, useWalletClient } from "wagmi";
+import { useRouter } from "next/navigation";
+import { useStepProcessDialogContext } from "../global/step-process-dialog";
+import { revalidatePathServerAction } from "@/app/actions/revalidatePathServerAction";
+import { useState } from "react";
+import { Hex, ByteArray } from "viem";
+import { errorToast } from "@/lib/errorToast";
+import { ChainFactory } from "@/lib/chainFactory";
+
+interface TransformedClaimData {
+  hypercertTokenIds: bigint[];
+  units: bigint[];
+  proofs: (Hex | ByteArray)[][];
+  roots?: (Hex | ByteArray)[];
+}
+
+function transformAllowListRecords(
+  records: AllowListRecord[],
+): TransformedClaimData {
+  return {
+    hypercertTokenIds: records.map((record) => BigInt(record.token_id!)),
+    units: records.map((record) => BigInt(record.units!)),
+    proofs: records.map((record) => record.proof as (Hex | ByteArray)[]),
+    roots: records.map((record) => record.root as Hex | ByteArray),
+  };
+}
+
+export default function UnclaimedHypercertBatchClaimButton({
+  allowListRecords,
+  selectedChainId,
+}: {
+  allowListRecords: AllowListRecord[];
+  selectedChainId: number | null;
+}) {
+  const { client } = useHypercertClient();
+  const { data: walletClient } = useWalletClient();
+  const account = useAccount();
+  const { refresh } = useRouter();
+  const [isLoading, setIsLoading] = useState(false);
+  const { setDialogStep, setSteps, setOpen, setTitle } =
+    useStepProcessDialogContext();
+  const { switchChain } = useSwitchChain();
+
+  const selectedChain = selectedChainId
+    ? ChainFactory.getChain(selectedChainId)
+    : null;
+
+  const claimHypercert = async () => {
+    setIsLoading(true);
+    setOpen(true);
+    setSteps([
+      { id: "preparing", description: "Preparing to claim hypercert..." },
+      { id: "claiming", description: "Claiming hypercert on-chain..." },
+      { id: "confirming", description: "Waiting for on-chain confirmation" },
+      { id: "done", description: "Claiming complete!" },
+    ]);
+    setTitle("Claim Hypercert 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");
+    console.log(allowListRecords);
+    try {
+      await setDialogStep("claiming", "active");
+
+      const tx = await client.batchClaimFractionsFromAllowlists(claimData);
+      console.log(tx);
+      if (!tx) {
+        await setDialogStep("claiming", "error");
+        throw new Error("Failed to claim hypercert");
+      }
+      await setDialogStep("confirming", "active");
+      const receipt = await waitForTransactionReceipt(walletClient, {
+        confirmations: 3,
+        hash: tx,
+      });
+      if (receipt.status == "success") {
+        await setDialogStep("done", "completed");
+        await revalidatePathServerAction([
+          `/profile/${account.address}`,
+          `/profile/${account.address}?tab=hypercerts-claimable`,
+        ]);
+      } else if (receipt.status == "reverted") {
+        await setDialogStep("confirming", "error", "Transaction reverted");
+      }
+      console.log({ receipt });
+      setTimeout(() => {
+        refresh();
+      }, 5000);
+    } catch (error) {
+      console.error(error);
+    } finally {
+      setIsLoading(false);
+    }
+  };
+  return (
+    <>
+      {account.chainId === selectedChainId ? (
+        <Button
+          variant={"outline"}
+          size={"sm"}
+          onClick={claimHypercert}
+          disabled={
+            isLoading ||
+            !allowListRecords.length ||
+            !account ||
+            !client ||
+            account.address !== allowListRecords[0].user_address
+          }
+        >
+          Claim Selected
+        </Button>
+      ) : (
+        <Button
+          variant={"outline"}
+          size="sm"
+          disabled={!account.isConnected || !selectedChainId}
+          onClick={() => {
+            if (!selectedChainId)
+              return errorToast("Hypercert is not selected");
+            switchChain({ chainId: selectedChainId });
+          }}
+        >
+          {selectedChainId
+            ? `Switch to ${selectedChain?.name}`
+            : "Select Hypercert"}
+        </Button>
+      )}
+    </>
+  );
+}