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.
In this example, you'll learn how to integrate thirdweb components from your Next.js app into Makeswift to make it visually editable.
https://makeswift-examples-thirdweb.vercel.app/
Deploy your own with Vercel or preview live with StackBlitz
- 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.
-
Create a site on Makeswift
Head over to Makeswift and sign up for a free account. Create a site using the option to "Integrate with Next.js".
-
Clone this template
Instead of using
create-next-app
, run this command from the terminal:npx thirdweb create --template makeswift
-
Update environment variables
Rename
.env.local.example
to.env.local
and add your site API key from Makeswift.- MAKESWIFT_SITE_API_KEY= + MAKESWIFT_SITE_API_KEY=<YOUR_MAKESWIFT_SITE_API_KEY>
-
Start the dev server
Run this command from the terminal:
yarn dev # or npm run dev
Your host should be up and running on http://localhost:3000.
-
Add the NFT Drop component into your Makeswift page
Look for the ellipsis menu in the left toolbar and drop the NFT Drop component into Makeswift.
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.
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!