[Dashboard] Replace erc721 claim Drawer with Sheet (#4932)

## Problem solved

Short description of the bug fixed or feature added

<!-- start pr-codex -->

---

## PR-Codex overview
This PR focuses on refactoring the `NFTClaimButton` component to replace the `Drawer` with a `Sheet` component for a better user interface. It enhances the form handling by integrating validation and error messaging for claiming NFTs.

### Detailed summary
- Removed the `Drawer` component and replaced it with a `Sheet`.
- Integrated `react-hook-form` for form handling.
- Added validation for the "To Address" and "Amount" fields.
- Implemented error messages for form validation.
- Added transaction handling logic for NFT claims.
- Used `TransactionButton` for submitting the claim.

> ✨ Ask PR-Codex anything about this PR by commenting with `/codex {your question}`

<!-- end pr-codex -->

Author: kien-ngo

apps/dashboard/src/contract-ui/tabs/nfts/components/claim-button.tsx

@@ -1,10 +1,27 @@
 "use client";
 
-import { useDisclosure } from "@chakra-ui/react";
+import {
+  Sheet,
+  SheetContent,
+  SheetHeader,
+  SheetTitle,
+  SheetTrigger,
+} from "@/components/ui/sheet";
+import { FormControl, Input } from "@chakra-ui/react";
+import { TransactionButton } from "components/buttons/TransactionButton";
+import { useTrack } from "hooks/analytics/useTrack";
 import { GemIcon } from "lucide-react";
-import type { ThirdwebContract } from "thirdweb";
-import { Button, Drawer } from "tw-components";
-import { NFTClaimForm } from "./claim-form";
+import { useState } from "react";
+import { useForm } from "react-hook-form";
+import { toast } from "sonner";
+import { type ThirdwebContract, ZERO_ADDRESS } from "thirdweb";
+import { getApprovalForTransaction } from "thirdweb/extensions/erc20";
+import { claimTo } from "thirdweb/extensions/erc721";
+import { useActiveAccount, useSendAndConfirmTransaction } from "thirdweb/react";
+import { Button } from "tw-components";
+import { FormErrorMessage, FormHelperText, FormLabel } from "tw-components";
+
+const CLAIM_FORM_ID = "nft-claim-form";
 
 interface NFTClaimButtonProps {
   contract: ThirdwebContract;
@@ -15,26 +32,144 @@ interface NFTClaimButtonProps {
  * For Edition Drop we have a dedicated ClaimTabERC1155 inside each Edition's page
  */
 export const NFTClaimButton: React.FC<NFTClaimButtonProps> = ({ contract }) => {
-  const { isOpen, onOpen, onClose } = useDisclosure();
+  const trackEvent = useTrack();
+  const address = useActiveAccount()?.address;
+  const { register, handleSubmit, formState } = useForm({
+    defaultValues: { amount: "1", to: address },
+  });
+  const { errors } = formState;
+  const sendAndConfirmTx = useSendAndConfirmTransaction();
+  const account = useActiveAccount();
+  const [open, setOpen] = useState(false);
 
   return (
-    <>
-      <Drawer
-        allowPinchZoom
-        preserveScrollBarGap
-        size="lg"
-        onClose={onClose}
-        isOpen={isOpen}
-      >
-        <NFTClaimForm contract={contract} />
-      </Drawer>
-      <Button
-        colorScheme="primary"
-        leftIcon={<GemIcon className="size-4" />}
-        onClick={onOpen}
-      >
-        Claim
-      </Button>
-    </>
+    <Sheet open={open} onOpenChange={setOpen}>
+      <SheetTrigger asChild>
+        <Button colorScheme="primary" leftIcon={<GemIcon className="size-4" />}>
+          Claim
+        </Button>
+      </SheetTrigger>
+      <SheetContent className="z-[10000] overflow-y-auto sm:w-[540px] sm:max-w-[90%] lg:w-[700px]">
+        <SheetHeader>
+          <SheetTitle>Claim NFTs</SheetTitle>
+        </SheetHeader>
+        <form className="mt-8 flex w-full flex-col gap-3 md:flex-row">
+          <div className="flex w-full flex-col gap-6 md:flex-row">
+            <FormControl isRequired isInvalid={!!errors.to}>
+              <FormLabel>To Address</FormLabel>
+              <Input placeholder={ZERO_ADDRESS} {...register("to")} />
+              <FormHelperText>Enter the address to claim to.</FormHelperText>
+              <FormErrorMessage>{errors.to?.message}</FormErrorMessage>
+            </FormControl>
+            <FormControl isRequired isInvalid={!!errors.amount}>
+              <FormLabel>Amount</FormLabel>
+              <Input
+                type="text"
+                {...register("amount", {
+                  validate: (value) => {
+                    const valueNum = Number(value);
+                    if (!Number.isInteger(valueNum)) {
+                      return "Amount must be an integer";
+                    }
+                  },
+                })}
+              />
+              <FormHelperText>How many would you like to claim?</FormHelperText>
+              <FormErrorMessage>{errors.amount?.message}</FormErrorMessage>
+            </FormControl>
+          </div>
+        </form>
+        <div className="mt-4 flex justify-end">
+          <TransactionButton
+            txChainID={contract.chain.id}
+            transactionCount={1}
+            form={CLAIM_FORM_ID}
+            isLoading={formState.isSubmitting}
+            type="submit"
+            colorScheme="primary"
+            onClick={handleSubmit(async (d) => {
+              try {
+                trackEvent({
+                  category: "nft",
+                  action: "claim",
+                  label: "attempt",
+                });
+                if (!account) {
+                  return toast.error("No account detected");
+                }
+                if (!d.to) {
+                  return toast.error(
+                    "Please enter the address that will receive the NFT",
+                  );
+                }
+
+                const transaction = claimTo({
+                  contract,
+                  to: d.to,
+                  quantity: BigInt(d.amount),
+                  from: account.address,
+                });
+
+                const approveTx = await getApprovalForTransaction({
+                  transaction,
+                  account,
+                });
+
+                if (approveTx) {
+                  const promise = sendAndConfirmTx.mutateAsync(approveTx, {
+                    onError: (error) => {
+                      console.error(error);
+                    },
+                  });
+                  toast.promise(promise, {
+                    loading: "Approving ERC20 tokens for this claim",
+                    success: "Tokens approved successfully",
+                    error: "Failed to approve token",
+                  });
+
+                  await promise;
+                }
+
+                const promise = sendAndConfirmTx.mutateAsync(transaction, {
+                  onSuccess: () => {
+                    trackEvent({
+                      category: "nft",
+                      action: "claim",
+                      label: "success",
+                    });
+                    setOpen(false);
+                  },
+                  onError: (error) => {
+                    trackEvent({
+                      category: "nft",
+                      action: "claim",
+                      label: "error",
+                      error,
+                    });
+                  },
+                });
+
+                toast.promise(promise, {
+                  loading: "Claiming NFT(s)",
+                  success: "NFT(s) claimed successfully",
+                  error: "Failed to claim NFT(s)",
+                });
+              } catch (error) {
+                console.error(error);
+                toast.error((error as Error).message || "Error claiming NFT");
+                trackEvent({
+                  category: "nft",
+                  action: "claim",
+                  label: "error",
+                  error,
+                });
+              }
+            })}
+          >
+            Claim NFT
+          </TransactionButton>
+        </div>
+      </SheetContent>
+    </Sheet>
   );
 };