Docs

ClaimButton

This button is used to claim tokens (NFT or ERC20) from a given thirdweb Drop contract.

there are 3 type of Drop contract: NFT Drop (DropERC721), Edition Drop (DropERC1155) and Token Drop (DropERC20)

Learn more: https://thirdweb.com/explore/drops

Note: This button only works with thirdweb Drop contracts. For custom contract, please use TransactionButton

Example

Example for claiming NFT from an NFT Drop contract

import { ClaimButton } from "thirdweb/react";
import { ethereum } from "thirdweb/chains";
 
<ClaimButton
  contractAddress="0x..." // contract address of the NFT Drop
  chain={ethereum}
  client={client}
  claimParams={{
    type: "ERC721",
    quantity: 1n, // claim 1 token
  }}
>
  Claim now
</ClaimButton>;

For Edition Drop (ERC1155)

<ClaimButton
  contractAddress="0x..." // contract address of the Edition Drop
  chain={ethereum}
  client={client}
  claimParams={{
    type: "ERC1155",
    quantity: 1n,
    tokenId: 0n,
  }}
>
  Claim now
</ClaimButton>;

For Token Drop (ERC20)

<ClaimButton
  contractAddress="0x..." // contract address of the Token Drop
  chain={ethereum}
  client={client}
  claimParams={{
    type: "ERC20",
    quantity: "100", // claim 100 ERC20 tokens
    // instead of `quantity`, you can also use `quantityInWei` (bigint)
  }}
>
  Claim now
</ClaimButton>;

Attach custom Pay metadata

<ClaimButton
  payModal={{
    metadata: {
      name: "Van Gogh Starry Night",
      image: "https://unsplash.com/starry-night.png",
    },
  }}
>
  ...
</ClaimButton>;

Since this button uses the TransactionButton , it can take in any props that can be passed to the TransactionButton

For error handling & callbacks on transaction-sent and transaction-confirmed, please refer to the TransactionButton docs.

Parameters

Returns

A wrapper for TransactionButton