Skip to main content

Token Drop

Release your token with claim conditions for a price using thirdweb's Token Drop contract

To create a new project using this template, use the thirdweb CLI:

npx thirdweb create --template token-drop

Using this template


In this guide, we will utilize the Token Drop contract to release ERC-20 tokens!

We also utilize the token drop's claim phases feature, to release the tokens for a price, and only allow a certain amount to be claimed per wallet.

Check out the Demo here:


Using This Repo

  • Create a Token Drop contract via the thirdweb dashboard on the Polygon Mumbai (MATIC) test network.

  • Create a project using this example by running:

npx thirdweb create --template token-drop
  • Replace our demo token drop contract address (0xCFbB61aF7f8F39dc946086c378D8cd997C72e2F3) with your token drop contract address!


Configuring the ThirdwebProvider

The thirdweb provider is a wrapper around our whole application.

It allows us to access all of the React SDK's helpful hooks anywhere in our application.

// This is the chainId your dApp will work on.
const activeChainId = ChainId.Mumbai;

function MyApp({ Component, pageProps }) {
return (
<ThirdwebProvider desiredChainId={activeChainId}>
<Component {...pageProps} />

Connecting User's Wallets

We use the useMetamask hook to connect with user's wallets.

const connectWithMetamask = useMetamask();

// ...
<button onClick={connectWithMetamask}>Connect with Metamask</button>;

Getting the token drop contract

We use the useTokenDrop hook to get the token drop contract:

const tokenDropContract = useTokenDrop(

Claiming Tokens

In this example repository, we will use the .claim method to claim tokens.

Since we have a wallet connected, the function automatically detects our wallet address as the claimer by default.

We store a value the user types into an input field in state:

const [amountToClaim, setAmountToClaim] = useState("");

// ...

placeholder="Enter amount to claim"
onChange={(e) => setAmountToClaim(}

And use this value to call claim on behalf of the connected wallet.

const claimResult = await tokenDropContract?.claim(amountToClaim);

Viewing Token Holders & Balances

We use the TypeScript SDK to view all the holders of our token and their balances, using the getAllHolderBalances method.

const sdk = new ThirdwebSDK("mumbai"); // configure this to your network

const token = sdk.getToken("0xCFbB61aF7f8F39dc946086c378D8cd997C72e2F3"); // our token drop contract address

const balances = await token.history.getAllHolderBalances();

We store the balances array in state, and map each balance to a div containing the holder's address and balance:

{ => (
<div key={holder.holder}>
{holder.balance.displayValue} {holder.balance.symbol}

Transferring Tokens

Using the TypeScript SDK's .transfer method, we can transfer a set quantity of tokens to another address.

In this example, we have a text field to enter the address to transfer to, and a text field to enter the amount to transfer, which we store in state:

const [addressToTransferTo, setAddressToTransferTo] = useState("");
const [amountToTransfer, setAmountToTransfer] = useState("");

We then transfer the tokens using these values:

const transferResult = await tokenDropContract?.transfer(

Additionally, we can get the amount of tokens we now have after transferring:

const newBalance = await tokenDropContract?.balanceOf(address);

Join our Discord!

For any questions, suggestions, join our discord at thirdweb.