{"id":20974222,"url":"https://github.com/thirdweb-example/token-drop","last_synced_at":"2025-07-24T18:04:24.114Z","repository":{"id":50685956,"uuid":"496076935","full_name":"thirdweb-example/token-drop","owner":"thirdweb-example","description":"Release your token with claim conditions for a price using thirdweb's Token Drop contract","archived":false,"fork":false,"pushed_at":"2024-04-12T00:31:23.000Z","size":138,"stargazers_count":25,"open_issues_count":6,"forks_count":58,"subscribers_count":1,"default_branch":"main","last_synced_at":"2025-05-14T12:37:01.890Z","etag":null,"topics":["token-drop"],"latest_commit_sha":null,"homepage":"https://token-drop.thirdweb-example.com","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"apache-2.0","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/thirdweb-example.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE.md","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2022-05-25T04:05:25.000Z","updated_at":"2024-08-10T21:04:55.000Z","dependencies_parsed_at":"2024-04-18T20:33:15.449Z","dependency_job_id":null,"html_url":"https://github.com/thirdweb-example/token-drop","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/thirdweb-example/token-drop","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/thirdweb-example%2Ftoken-drop","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/thirdweb-example%2Ftoken-drop/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/thirdweb-example%2Ftoken-drop/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/thirdweb-example%2Ftoken-drop/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/thirdweb-example","download_url":"https://codeload.github.com/thirdweb-example/token-drop/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/thirdweb-example%2Ftoken-drop/sbom","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":264324420,"owners_count":23590868,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["token-drop"],"created_at":"2024-11-19T04:27:17.866Z","updated_at":"2025-07-08T18:34:27.564Z","avatar_url":"https://github.com/thirdweb-example.png","language":"TypeScript","readme":"\u003e [!Important]  \r\n\u003e This repository is referencing the `mumbai` chain.\r\n\u003e \r\n\u003e `Mumbai` [is deprecated since 08/04/2024](https://blog.thirdweb.com/deprecation-of-mumbai-testnet/), meaning the code in this repository will no longer work out of the box.\r\n\u003e\r\n\u003e You can still use this repository, however you will have to switch any references to `mumbai` to another chain.\r\n\r\n# Token Drop Example\r\n\r\n## Introduction\r\n\r\nIn this guide, we will utilize the [**Token Drop**](https://portal.thirdweb.com/contracts/token-drop) contract to release ERC-20 tokens!\r\n\r\nWe also utilize the token drop's [claim phases](https://portal.thirdweb.com/pre-built-contracts/token-drop#setting-claim-phases) feature, to release the tokens for a price, and only allow a certain amount to be claimed per wallet.\r\n\r\n**Check out the Demo here**: https://token-drop.thirdweb-example.com/\r\n\r\n## Tools:\r\n\r\n- [**thirdweb Token Drop**](https://portal.thirdweb.com/contracts/token-drop): thirdweb's Token Drop contract is a way of releasing your ERC20 tokens!\r\n\r\n- [**thirdweb React SDK**](https://docs.thirdweb.com/react): To connect to our NFT Collection Smart contract via React hooks such as [useTokenDrop](https://docs.thirdweb.com/react/react.usetokendrop), connect user's wallets, and other awesome hooks like [useActiveClaimCondition](https://docs.thirdweb.com/react/react.useactiveclaimcondition) and [useClaimIneligibilityReasons](https://docs.thirdweb.com/react/react.useclaimineligibilityreasons).\r\n\r\n- [**thirdweb TypeScript SDK**](https://docs.thirdweb.com/typescript): To claim/mint tokens from the token drop with [.claim](https://portal.thirdweb.com/pre-built-contracts/token-drop#claiming-tokens) , view token balance with [.balanceOf](https://portal.thirdweb.com/pre-built-contracts/token-drop#token-balance), and transfer tokens with [.transfer](https://portal.thirdweb.com/pre-built-contracts/token-drop#transfer-tokens).\r\n\r\n## Using This Repo\r\n\r\n- Create a Token Drop contract via the thirdweb dashboard on the Mumbai test network.\r\n\r\n- Create a project using this example by running:\r\n\r\n```bash\r\nnpx thirdweb create --template token-drop\r\n```\r\n\r\n- Replace our demo token drop contract address (`0x5ec440E5965da9570CAa66402980c6D20cbe0663`) with your token drop contract address!\r\n\r\n# Guide\r\n\r\n## Configuring the ThirdwebProvider\r\n\r\nThe thirdweb provider is a wrapper around our whole application.\r\n\r\nIt allows us to access all of the React SDK's helpful hooks anywhere in our application.\r\n\r\n```jsx\r\n// This is the chain your dApp will work on.\r\nconst activeChainId = \"mumbai\";\r\n\r\nfunction MyApp({ Component, pageProps }) {\r\n  return (\r\n    \u003cThirdwebProvider desiredChainId={activeChainId}\u003e\r\n      \u003cComponent {...pageProps} /\u003e\r\n    \u003c/ThirdwebProvider\u003e\r\n  );\r\n}\r\n```\r\n\r\n## Connecting User's Wallets\r\n\r\nWe use the [useMetamask](https://portal.thirdweb.com/react/react.usemetamask) hook to connect with user's wallets.\r\n\r\n```jsx\r\nconst connectWithMetamask = useMetamask();\r\n\r\n// ...\r\n\u003cbutton onClick={connectWithMetamask}\u003eConnect with Metamask\u003c/button\u003e;\r\n```\r\n\r\n## Getting the token drop contract\r\n\r\nWe use the [useContract](https://docs.thirdweb.com/react/react.useContract) hook to get the token drop contract:\r\n\r\n```jsx\r\nconst { contract: tokenDropContract } = useContract(\r\n  \"0x5ec440E5965da9570CAa66402980c6D20cbe0663\",\r\n  \"token-drop\"\r\n);\r\n```\r\n\r\n## Claiming Tokens\r\n\r\nWe use the `claim` function and pass in the desired amount of tokens to claim inside a `Web3Button` component:\r\n\r\nWe store a value the user types into an input field in state:\r\n\r\n```jsx\r\nconst [amountToClaim, setAmountToClaim] = useState(\"\");\r\n\r\n// ...\r\n\r\n\u003cdiv className={styles.claimGrid}\u003e\r\n  \u003cinput\r\n    type=\"text\"\r\n    placeholder=\"Enter amount to claim\"\r\n    onChange={(e) =\u003e setAmountToClaim(e.target.value)}\r\n    className={`${styles.textInput} ${styles.noGapBottom}`}\r\n  /\u003e\r\n  \u003cWeb3Button\r\n    colorMode=\"dark\"\r\n    contractAddress=\"0x5ec440E5965da9570CAa66402980c6D20cbe0663\"\r\n    action={(contract) =\u003e contract.erc20.claim(amountToClaim)}\r\n    onSuccess={() =\u003e alert(\"Claimed!\")}\r\n    onError={(err) =\u003e alert(err)}\r\n  \u003e\r\n    Claim Tokens\r\n  \u003c/Web3Button\u003e\r\n\u003c/div\u003e;\r\n```\r\n\r\n## Join our Discord!\r\n\r\nFor any questions, suggestions, join our discord at [https://discord.gg/cd thirdweb](https://discord.gg/thirdweb).\r\n","funding_links":[],"categories":[],"sub_categories":[],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fthirdweb-example%2Ftoken-drop","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fthirdweb-example%2Ftoken-drop","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fthirdweb-example%2Ftoken-drop/lists"}