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

Introduction

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: https://token-drop.thirdweb-example.com/

Tools:

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!

Guide

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

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(
"0xCFbB61aF7f8F39dc946086c378D8cd997C72e2F3",
);

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("");

// ...

<input
type="text"
placeholder="Enter amount to claim"
onChange={(e) => setAmountToClaim(e.target.value)}
/>;

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:

{
holders.map((holder) => (
<div key={holder.holder}>
<p>{holder.holder}</p>
<p>
{holder.balance.displayValue} {holder.balance.symbol}
</p>
</div>
));
}

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(
addressToTransferTo,
amountToTransfer,
);

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 https://discord.gg/cd thirdweb.