[!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.

Customizable Edition Drop Minting Page

In this template, we build a page where users can claim NFTs from the Edition Drop contract.

Tools

• Edition Drop: Create a collection of ERC-1155 NFTs and release them to users under claim conditions.
• React SDK: to enable users to connect their wallets with the useMetamask hook, and access hooks such as useNFTDrop to interact with the NFT drop contract.
• TypeScript SDK: to view the claimed supply, total supply, and mint NFTs from the drop.

Using This Repo

To create your own version of this template, you can use the following steps:

Run this command from the terminal to clone this project:

npx thirdweb create --template edition-drop

1. Deploy Your Own Edition Drop on thirdweb

Head to the dashboard and create your own Edition Drop contract.

You can learn how to do that with our guide Release an NFT drop on your own site without writing any code.

Be sure to configure a name, description, and image for your NFT drop in the dashboard.

2. Configure the styles to your branding

You can fully customize the colors and style of this template by editing the values in the globals.css file.

You can configure:

• The color of the background with --background-color
• The color of the text with --text-color
• The color of the button (is a gradient from primary to secondary color) with --color-primary and --color-secondary
• The font with --font
• The border colors with --border-color

3. Plug in your Edition Drop contract address

Replace the value of the myEditionDropContractAddress inside yourDetails.ts with your Edition Drop contract address you can find in the dashboard.

Replace the value of the tokenId inside yourDetails.ts with your tokenId.

4. Configure Your Network

Inside _app.tsx you can configure the network you want to use:

// This is the chain your dApp will work on.
const activeChain = "mumbai";

Join our Discord!

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