useClaimNFT

Hook for claiming an NFT from a smart contract.

Available to use on smart contracts that implement the ERC721 or ERC1155 standard.

import { useClaimNFT } from "@thirdweb-dev/react";

Usage

Provide your NFT collection contract as the argument.

import { useContract, useClaimNFT } from "@thirdweb-dev/react";

function App() {
  const { contract } = useContract("{{contract_address}}");
  const { mutate: claimNft, isLoading, error } = useClaimNFT(contract);

  if (error) {
    console.error("failed to claim nft", error);
  }

  return (
    <button
      disabled={isLoading} // While the transaction is processing, disable the button
      onClick={() =>
        claimNft({
          to: "{{wallet_address}}", // Use useAddress hook to get current wallet address
          quantity: 1,
        })
      }
    >
      {isLoading ? "Claiming NFT..." : "Claim NFT"}
    </button>
  );
}

Configuration

to

Likely, you will want to claim the NFT to the currently connected wallet address.

You can use the useAddress hook to get this value.

import { useContract, useClaimNFT, useAddress } from "@thirdweb-dev/react";

function App() {
  const { contract } = useContract("{{contract_address}}");
  const { mutate: claimNft, isLoading, error } = useClaimNFT(contract);
  const address = useAddress();

  return (
    <button
      disabled={isLoading} // While the transaction is processing, disable the button
      onClick={() =>
        claimNft({
          to: address,
          quantity: 1,
        })
      }
    >
      {isLoading ? "Claiming NFT..." : "Claim NFT"}
    </button>
  );
}

quantity

Quantity represents the number of NFTs you wish to claim.

Note that this is only supported on ERC1155 contracts.

import { useContract, useClaimNFT } from "@thirdweb-dev/react";

function App() {
  const { contract } = useContract("{{contract_address}}");
  const { mutate: claimNft, isLoading, error } = useClaimNFT(contract);

  if (error) {
    console.error("failed to claim nft", error);
  }

  return (
    <button
      disabled={isLoading} // While the transaction is processing, disable the button
      onClick={() =>
        claimNft({
          to: "{{wallet_address}}",
          // Only use this for ERC1155 contracts
          quantity: 10,
        })
      }
    >
      {isLoading ? "Claiming NFT..." : "Claim NFT"}
    </button>
  );
}

tokenId

For ERC1155 contracts only, you can specify a specific tokenId to claim.

To get the tokenId of a specific NFT, see the useTokenId hook.

import { useContract, useClaimNFT, useTokenId } from "@thirdweb-dev/react";

function App() {
  const { contract } = useContract("{{contract_address}}");
  const { mutate: claimNft, isLoading, error } = useClaimNFT(contract);
  const tokenId = useTokenId("my-nft");

  return (
    <button
      disabled={isLoading} // While the transaction is processing, disable the button
      onClick={() =>
        claimNft({
          to: "{{wallet_address}}",
          quantity: 1,
          tokenId,
        })
      }
    >
      {isLoading ? "Claiming NFT..." : "Claim NFT"}
    </button>
  );
}