Docs

ClaimButton

Defined in thirdweb/src/react/web/ui/prebuilt/thirdweb/ClaimButton/index.tsx#L98

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

import { ClaimButton } from "thirdweb/react";
import { ethereum } from "thirdweb/chains";
 
// For NFT Drop (ERC721)
<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>

Parameters

Returns

A wrapper for TransactionButton