useClaimNFT

Hook for claiming an NFT from a smart contract.

Available to use on smart contracts that implement a Claimable interface, and follow either the ERC721 or ERC1155 standard.

Example


import {
  useContract,
  useClaimNFT,
  Web3Button,
} from "@thirdweb-dev/react";
 
function App() {
  const { contract } = useContract(contractAddress);
  const {
    mutateAsync: claimNft,
    isLoading,
    error,
  } = useClaimNFT(contract);
 
  return (
    <Web3Button
      contractAddress={contractAddress}
      action={() =>
        claimNft({
          to: "{{wallet_address}}", // Use useAddress hook to get current wallet address
          quantity: 1,
        })
      }
    >
      Claim NFT
    </Web3Button>
  );
}

Parameters

Returns

A mutation object to claim a NFT to the wallet specified in the params


const { mutateAsync, isLoading, error } = useClaimNFT(contract);

options

The mutation function takes an object as argument with below properties:

to

The wallet address to mint the NFT(s) to.

Use the useAddress hook to get the currently connected wallet address.

quantity

The number of NFTs you wish to claim.

With ERC721 contracts, this represents the number of unique tokens you wish to claim.
With ERC1155 contracts, this represents the quantity of the specific tokenId you wish to claim.

tokenId

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

options (optional)

Customizable ClaimOptions object to override the default behaviour of the hook.

There are three options available:

checkERC20Allowance - Whether to check the ERC20 allowance of the sender, defaults to true.
currencyAddress - The currency to pay for each token claimed, defaults to NATIVE_TOKEN_ADDRESS for native currency.
pricePerToken - The price to pay for each token claimed. Not relevant when using claim conditions.


import {
  useContract,
  useClaimNFT,
  Web3Button,
} from "@thirdweb-dev/react";
 
function App() {
  const { contract } = useContract(contractAddress);
  const {
    mutate: claimNft,
    isLoading,
    error,
  } = useClaimNFT(contract);
 
  return (
    <Web3Button
      contractAddress={contractAddress}
      action={() =>
        claimNft({
          to: "{{wallet_address}}",
          quantity: 1,
          options: {
            checkERC20Allowance: true,
            currencyAddress: "{{erc20_address}}",
            pricePerToken: 0,
          },
        })
      }
    >
      Claim NFT
    </Web3Button>
  );
}