custom-minting-page v2.1.1
Demo
https://makeswift-examples-thirdweb.vercel.app/
Visually build with Thirdweb components
In this example, you'll learn how to integrate thirdweb components from your Next.js app into Makeswift to make it visually editable.
Tools
- 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.
- Makeswift SDK: to register components into Makeswift's visual builder.
Using this example
To quickly try this example either deploy to Vercel or use our CLI.
Deploy your own to Vercel
Deploy your own with Vercel
With your deployment completed, take a tour of the newly created store
Use this example locally with the Makeswift CLI
Run the Makeswift CLI command
npx makeswift@latest init --template=ecommerce-thirdwebNote: the
--template=ecommerce-thirdwebabove will auto-select the "Ecommerce - Thirdweb" template in Makeswift and download this example Next.js app to your local machineLog in or sign up for Makeswift
Once completed, the CLI runs yarn dev and redirects you to app.makeswift.com.
Take a tour of your web3 website
After integration, you will be redirected to app.makeswift.com. You can see the "NFT Drop" component on the right-hand side of the screen.
With the NFT drop component selected, paste your NFT drop contract address from Thirdweb into the "Contract address" panel and select the correct chain.
If you don't have an NFT drop contract, read this guide to learn how to create one using Thirdweb without any code.
If you are struggling with this example reach out in our Discord and we will be happy to help!
Next steps
With Makeswift, you can give your marketing team hand-crafted Thirdweb building blocks to create custom Web3 websites.
To learn more about Makeswift, take a look at the following resources:
You can check out the Makeswift GitHub repository - your feedback and contributions are welcome!