{"id":13632272,"url":"https://github.com/thirdweb-example/erc721","last_synced_at":"2025-04-05T21:11:11.807Z","repository":{"id":37376226,"uuid":"492645389","full_name":"thirdweb-example/erc721","owner":"thirdweb-example","description":"Create an NFT minting page using thirdweb's React SDK","archived":false,"fork":false,"pushed_at":"2024-04-12T00:20:50.000Z","size":487,"stargazers_count":160,"open_issues_count":5,"forks_count":194,"subscribers_count":5,"default_branch":"main","last_synced_at":"2025-03-29T20:08:41.443Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":"https://nft-drop.thirdweb-preview.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-16T01:17:47.000Z","updated_at":"2025-03-16T10:09:55.000Z","dependencies_parsed_at":"2023-01-22T23:45:27.075Z","dependency_job_id":"24df3ee3-f068-4dc8-bdcc-7f6d964494fd","html_url":"https://github.com/thirdweb-example/erc721","commit_stats":null,"previous_names":["thirdweb-example/nft-drop"],"tags_count":0,"template":true,"template_full_name":"thirdweb-example/next-typescript-starter","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/thirdweb-example%2Ferc721","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/thirdweb-example%2Ferc721/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/thirdweb-example%2Ferc721/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/thirdweb-example%2Ferc721/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/thirdweb-example","download_url":"https://codeload.github.com/thirdweb-example/erc721/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":247399885,"owners_count":20932880,"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":["nft-drop"],"created_at":"2024-08-01T22:02:58.439Z","updated_at":"2025-04-05T21:11:11.745Z","avatar_url":"https://github.com/thirdweb-example.png","language":"TypeScript","readme":"\u003e [!Important]  \n\u003e This repository is referencing the `mumbai` chain.\n\u003e \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.\n\u003e\n\u003e You can still use this repository, however you will have to switch any references to `mumbai` to another chain.\n\n# ERC721 Drop Claim Page\n\nIn this example, you can create your own ERC721 Drop claim page just by customizing the template with your branding and plugging in your NFT Drop contract address.\n\nThis template works with the NFT Drop / Signature Drop contract from thirdweb or when using any of the Drop contract bases or if you implement these extensions:\n\n- [ERC721ClaimConditions](https://portal.thirdweb.com/solidity/extensions/erc721claimconditions)\n- [ERC721ClaimPhases](https://portal.thirdweb.com/solidity/extensions/erc721claimphases)\n\n## Using This Repo\n\nTo create your own version of this template, you can use the following steps:\n\nRun this command from the terminal to clone this project:\n\n```bash\nnpx thirdweb create --template erc721\n```\n\n### 1. Deploy An NFT Drop on thirdweb\n\nIf you haven't already deployed your contract, head over to the thirdweb dashboard and create your own NFT Drop contract.\n\nYou can learn how to do that with our guide [Release an NFT drop on your own site without writing any code](https://portal.thirdweb.com/guides/release-an-nft-drop-with-no-code#create-a-drop-contract).\n\nBe sure to configure a **name**, **description**, and **image** for your NFT drop in the dashboard.\n\n### 2. Configure Parameters\n\nGo to the [`parameters.ts`](/src/consts/parameters.ts) and update the following values:\n\n1. `contractConst`: The smart contract address of your NFT drop.\n2. `chainConst`: The name of the chain that your smart contract is deployed to.\n\nIf you are using one of thirdweb's [default supported chains](https://portal.thirdweb.com/react/react.thirdwebprovider#default-chains) You can use the chain name as string.\n\n#### Example\n\n```ts\nexport const chainConst = \"ethereum\";\n```\n\nIf you are using any other chain, you need to provide the chain object from the `@thirdweb-dev/chains` package to `ThirdwebProvider`'s `activeChain` prop as mentioned [here](https://portal.thirdweb.com/react/react.thirdwebprovider#activechain-recommended).\n\n\n#### Example\n\n```ts\nimport { Sepolia } from '@thirdweb-dev/chains';\n\nexport const chainConst = Sepolia;\n```\n\nIf your chain is not included in the `@thirdweb-dev/chains` package, you can provide the chain information yourself by creating an object as mentioned [here](https://portal.thirdweb.com/react/react.thirdwebprovider#custom-evm-chains)\n\n\n### 3. Customize the Styling\n\nYou can change the theme and primary color of the page by updating `primaryColorConst` and `themeConst` in [`parameters.ts`](/src/consts/parameters.ts).\n\nIf you want to go further, you can also update the styles in the respective components by changing the [Tailwind](https://tailwindcss.com/) classes.\n\n### 4. Optional: Add Gasless Transaction Support\n\nIf you want to sponsor the gas fees for your user, you can update the `relayerUrlConst` in [`parameters.ts`](/src/consts/parameters.ts) to point to your Open Zeppelin relayer or `biconomyApiKeyConst` and `biconomyApiIdConst` to use Biconomy.\n\nLearn more: https://portal.thirdweb.com/glossary/gasless-transactions\n\n## Deploying Your Site\n\n### Deploying to IPFS\n\nTo deploy your site to IPFS, run the following command:\n\n```bash\nyarn deploy\n```\n\nThis will deploy your site and output the IPFS hash of your site. You can then grab the IPFS hash and replace it with the one you get on the Embed tab on your contract on dashboard, so you get the updated version on your website once you copy it over.\n\n### Deploying to a centralized server\n\nYou can also deploy it to any centralized server like any normal website.\n\n## Join our Discord!\n\nFor any questions or suggestions, join our discord at [https://discord.gg/thirdweb](https://discord.gg/thirdweb).\n","funding_links":[],"categories":["TypeScript"],"sub_categories":[],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fthirdweb-example%2Ferc721","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fthirdweb-example%2Ferc721","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fthirdweb-example%2Ferc721/lists"}