Custom NFT minting page starter repo built on Next.js, Tailwind, and Decent, deployed on Vercel.
The purpose of this repository is to get you up & running quickly with a custom NFT minting page. Notably, this repository enables purchasing NFTs with either crypto or credit cards. The primary functionality demonstrated in this repo is the ability to mint NFTs from Decent's Editions & Rentable contracts.
For a video tutorial on how to get up and running in ~10min, please check out the YouTube demo.
You will need to create a Decent NFT, Decent API Key, Crossmint Client ID, and Alchemy API Key to use this starter. Here are the steps:
-
Go to https://hq.decent.xyz/create/Editions and create a new NFT
-
From the success page, copy the contract address and note the chain ID number. You can deploy your NFT to Ethereum, Polygon, Arbitrum or Optimism. These chains have the following IDs:
| Chain | ID Number |
|---|---|
| Ethereum | 1 |
| Polygon | 137 |
| Arbitrum | 42161 |
| Optimism | 10 |
The example uses an NFT on Polygon. On the index.tsx page, enter your NFT's chain ID and contract address in the getServerSideProps request + the activeChain property within the <MintButton /> component.
-
Request a Decent API Key and add it to your .env file. Once inputted, your minting page will automatically populate with your NFT's data and metadata. If you would like to add or swap information, please visit Decent's API Documentation to query for your contract and view the JSON response to see the available information.
-
(Skip to #5 if do not want credit cards) Visit the Crossmint Developer Console, and select the "Enable credit card payments" option.
-
Click on "Register a new collection" and follow the form's steps. Crossmint will automatically populate the ABI for all Decent contracts, so you should not have to worry about that step. Enter the client ID you receive as your .env file to enable credit card payments.
-
Create an Alchemy account and visit your dashboard to create an Alchemy API key. Alchemy facilitates the connection between your application and the chain of your choice.
-
If your NFT is not on Polygon, visit the
_app.tsxfile and update the chain config for the chain of your choice. -
(Optional) Create your own Privy application id and enter it on the
_app.tsxfile here:http://privy.io/. Ok to just use Decent's default appId as well.
Reach out to @cdurbinxyz on Twitter if you run into any issues.
First, install dependencies using npm:
npm iNext, run cp .env.example .env.local to create your file to enter the information detailed above. It should look like:
NEXT_PUBLIC_CROSSMINT_CLIENTID=<your-crossmint-client-id>
NEXT_PUBLIC_DECENT_API_KEY=<your-decent-api-key>
NEXT_PUBLIC_ALCHEMY_API_KEY=<your-alchemy-api-key>Lastly, run the development server:
npm run dev