Minting website integration
While it's possible for people to mint directly via Etherscan (and some people prefer to do it this way), it's a very common requirement to build a small "minting" website to do the following:
- Allow users to connect their wallet
- Indicate to users whether the NFT is available to mint (based on the smart contract)
- Retrieve the coupon for the connected wallet (if available) and allow the user to mint or claim their token.
- Indicate when the token has been minted and link to the user's new token on OpenSea
I have included a sample Next.js application with the above functionality - this repository can be used as a starting point to quickly build out a minting website.
You can find the source code at https://github.com/michaelstivala/luzzu-minting-website.
Application architecture
The application is built using the next.js framework, which is an excellent React framework. If you need to use a different javascript library - this repository can still act as code samples for your project.
Though I come from a Vue.js background, I recommend using React since you'll find more support and readily available code online.
The application exposes an API endpoint for serving coupons, as well as a number of frontend modules, namely:
- Auth: for connecting users wallets
- Interface: for layout and other non-functional components
- Mint: for the minting and smart contract integration
API
There is one API route defined in app/pages/coupons.ts which returns all coupons found for the passed wallet address. This file will import the coupons.json file that we generated previously, and will return coupons found for the wallet address passed in through the request.
Remember that with the smart contract code we wrote, the coupon is only valid for the wallet address that it whitelists - so there is no requirement to keep the coupon secret. Having said that, the coupons are served from an API endpoint so that the application doesn't expose a list of wallet addresses that are on the whitelist.
A note about connecting users wallets
The application integrates with BlockNative Onboard - a library that offers multi-wallet and multi-chain support.
Configuring the application
- Adding the contract details (ABI + Contract config)
- Adding the coupons
- Styling the application
Hosting
Since we're not working with a database here, there are a number of quick options for deploying this website for production. Here are two of my recommendations.
Both are great options. If you haven't used either before, then I would recommend using Vercel since they offer first-party support for deploying next.js applications (they are in fact the creators of next.js).