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>
);
}
function useClaimNFT(
contract: RequiredParam<TContract>,
): UseMutationResult<
unknown,
unknown
>;

Parameters

Instance of a DropContract

Type

let contract: RequiredParam<TContract>;

Returns

let returnType: UseMutationResult<
unknown,
unknown
>;

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