[Dashboard] Remove useClaimNFT; use erc1155/claimTo (#4102)

The component in this PR is meant for Edition Drop only

<!-- start pr-codex -->

---

## PR-Codex overview
The focus of this PR is to update the `ClaimTab` component to support ERC1155 contracts and improve transaction handling.

### Detailed summary
- Renamed `ClaimTab` component to `ClaimTabERC1155`.
- Updated `ClaimTabERC1155` to work with ERC1155 contracts.
- Improved transaction handling in `ClaimTabERC1155`.
- Removed unnecessary imports and updated dependencies.

> ✨ 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-tab.tsx

@@ -1,45 +1,47 @@
 import { Flex, FormControl, Input } from "@chakra-ui/react";
-import { type DropContract, useClaimNFT } from "@thirdweb-dev/react";
 import { TransactionButton } from "components/buttons/TransactionButton";
 import { useTrack } from "hooks/analytics/useTrack";
 import { useTxNotifications } from "hooks/useTxNotifications";
 import { thirdwebClient } from "lib/thirdweb-client";
 import { useV5DashboardChain } from "lib/v5-adapter";
 import { useForm } from "react-hook-form";
 import { ZERO_ADDRESS, getContract } from "thirdweb";
-import { useActiveAccount } from "thirdweb/react";
+import { claimTo } from "thirdweb/extensions/erc1155";
+import { useActiveAccount, useSendAndConfirmTransaction } from "thirdweb/react";
 import { FormErrorMessage, FormHelperText, FormLabel } from "tw-components";
 
 interface ClaimTabProps {
-  contract: DropContract;
+  contractAddress: string;
+  chainId: number;
   tokenId: string;
 }
 
-const ClaimTab: React.FC<ClaimTabProps> = ({ contract, tokenId }) => {
+const ClaimTabERC1155: React.FC<ClaimTabProps> = ({
+  contractAddress,
+  chainId,
+  tokenId,
+}) => {
   const trackEvent = useTrack();
   const address = useActiveAccount()?.address;
   const form = useForm<{ to: string; amount: string }>({
     defaultValues: { amount: "1", to: address },
   });
+  const chain = useV5DashboardChain(chainId);
 
-  const claim = useClaimNFT(contract);
-  const chain = useV5DashboardChain(contract?.chainId);
-
-  const contractV5 =
-    contract && chain
-      ? getContract({
-          address: contract.getAddress(),
-          chain: chain,
-          client: thirdwebClient,
-        })
-      : null;
+  const contract = getContract({
+    address: contractAddress,
+    chain: chain,
+    client: thirdwebClient,
+  });
 
   const { onSuccess, onError } = useTxNotifications(
     "Claimed successfully",
     "Failed to claim",
-    contractV5,
+    contract,
   );
 
+  const mutation = useSendAndConfirmTransaction();
+
   return (
     <Flex
       w="full"
@@ -53,11 +55,13 @@ const ClaimTab: React.FC<ClaimTabProps> = ({ contract, tokenId }) => {
         });
 
         try {
-          await claim.mutateAsync({
-            tokenId,
-            quantity: data.amount,
+          const transaction = claimTo({
+            contract,
+            tokenId: BigInt(tokenId),
+            quantity: BigInt(data.amount),
             to: data.to,
           });
+          await mutation.mutateAsync(transaction);
           trackEvent({
             category: "nft",
             action: "claim",
@@ -115,7 +119,7 @@ const ClaimTab: React.FC<ClaimTabProps> = ({ contract, tokenId }) => {
 
         <TransactionButton
           transactionCount={1}
-          isLoading={claim.isLoading || form.formState.isSubmitting}
+          isLoading={mutation.isPending || form.formState.isSubmitting}
           type="submit"
           colorScheme="primary"
           alignSelf="flex-end"
@@ -127,4 +131,4 @@ const ClaimTab: React.FC<ClaimTabProps> = ({ contract, tokenId }) => {
   );
 };
 
-export default ClaimTab;
+export default ClaimTabERC1155;

apps/dashboard/src/core-ui/nft-drawer/useNftDrawerTabs.tsx

@@ -39,7 +39,7 @@ const ClaimConditionTab = dynamic(() =>
     ({ ClaimConditions }) => ClaimConditions,
   ),
 );
-const ClaimTab = dynamic(
+const ClaimTabERC1155 = dynamic(
   () => import("contract-ui/tabs/nfts/components/claim-tab"),
 );
 const UpdateMetadataTab = dynamic(
@@ -216,12 +216,18 @@ export function useNFTDrawerTabs({
         },
       ]);
     }
-    if (isClaimable && isERC1155) {
+    if (isClaimable && isERC1155 && oldContract) {
       tabs = tabs.concat([
         {
           title: "Claim",
           isDisabled: false,
-          children: <ClaimTab contract={oldContract} tokenId={tokenId} />,
+          children: (
+            <ClaimTabERC1155
+              contractAddress={oldContract.getAddress()}
+              chainId={oldContract.chainId}
+              tokenId={tokenId}
+            />
+          ),
         },
       ]);
     }