Important

This repository is referencing the mumbai chain.

Mumbai is deprecated since 08/04/2024, meaning the code in this repository will no longer work out of the box.

You can still use this repository, however you will have to switch any references to mumbai to another chain.

Token Drop Example

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:

• thirdweb Token Drop: thirdweb's Token Drop contract is a way of releasing your ERC20 tokens!

• thirdweb React SDK: To connect to our NFT Collection Smart contract via React hooks such as useTokenDrop, connect user's wallets, and other awesome hooks like useActiveClaimCondition and useClaimIneligibilityReasons.

• thirdweb TypeScript SDK: To claim/mint tokens from the token drop with .claim , view token balance with .balanceOf, and transfer tokens with .transfer.

Using This Repo

• Create a Token Drop contract via the thirdweb dashboard on the Mumbai test network.

• Create a project using this example by running:

npx thirdweb create --template token-drop

• Replace our demo token drop contract address (0x5ec440E5965da9570CAa66402980c6D20cbe0663) 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 chain your dApp will work on.
const activeChainId = "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 useContract hook to get the token drop contract:

const { contract: tokenDropContract } = useContract(
  "0x5ec440E5965da9570CAa66402980c6D20cbe0663",
  "token-drop"
);

Claiming Tokens

We use the claim function and pass in the desired amount of tokens to claim inside a Web3Button component:

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

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

// ...

<div className={styles.claimGrid}>
  <input
    type="text"
    placeholder="Enter amount to claim"
    onChange={(e) => setAmountToClaim(e.target.value)}
    className={`${styles.textInput} ${styles.noGapBottom}`}
  />
  <Web3Button
    colorMode="dark"
    contractAddress="0x5ec440E5965da9570CAa66402980c6D20cbe0663"
    action={(contract) => contract.erc20.claim(amountToClaim)}
    onSuccess={() => alert("Claimed!")}
    onError={(err) => alert(err)}
  >
    Claim Tokens
  </Web3Button>
</div>;

Join our Discord!

For any questions, suggestions, join our discord at https://discord.gg/cd thirdweb.