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.

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

Usage

Provide your drop contract (ERC721 or ERC1155) as the argument.

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

const contractAddress = "{{contract_address}}";

function App() {
  const { contract } = useContract(contractAddress);
  const { mutate: 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>
  );
}

Configuration

to (required)

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

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

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

const contractAddress = "{{contract_address}}";

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

  return (
    <Web3Button
      contractAddress={contractAddress}
      action={() =>
        claimNft({
          to: address,
          quantity: 1,
        })
      }
    >
      Claim NFT
    </Web3Button>
  );
}

quantity (required)

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.

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

const contractAddress = "{{contract_address}}";

function App() {
  const { contract } = useContract(contractAddress);
  const { mutate: 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>
  );
}

tokenId (required)

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

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

const contractAddress = "{{contract_address}}";

const tokenId = 0;

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

  return (
    <Web3Button
      contractAddress={contractAddress}
      action={() =>
        claimNft({
          to: "{{wallet_address}}", // Use useAddress hook to get current wallet address
          quantity: 1,
          tokenId,
        })
      }
    >
      Claim NFT
    </Web3Button>
  );
}

options (optional)

Customizable ClaimOptions object that can be used 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";

const contractAddress = "{{contract_address}}";

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>
  );
}