🖼️Build An NFT Drop
Create a fully custom NFT Drop mint site and smart contract.
In this guide, we will deploy an NFT Drop smart contract and set up an "NFT mint site" where users can claim NFTs using their wallet or a credit card.
We are building this in Bubble, if you don't have an account already you can sign up here.
What Is An NFT Drop?
An NFT Drop smart contract is a version of an ERC-721 NFT smart contract where users can claim a random NFT from the collection by paying a predetermined price the creator specifies.
The term 'drop' means that these NFTs will become available to "Claim" at an exact time and date.
The term "Claim" and "Mint" both refer to the act of purchasing an NFT.
Key Features
Users will not know the exact NFT they will receive until after they have purchased it.
Pre-sale and public sale phases that can have different prices.
Whitelisted wallet addresses to control who can claim from your NFT Drop (Optional).
Lazy minting.
Learn more about the NFT Drop smart contract here.
Prerequisites
You need a few things before we get started.
User Interface
Bubble has a drag-and-drop UI builder that is very intuitive to use. To keep this guide short and sweet, we will start with all the visual elements on the page.
Get creative as you like in designing the User Interface to fit your NFT project.
You can view our project editor here.
NFT Metadata
NFT metadata is the content associated with a particular NFT, such as a name, description, image/video, and attributes.
This is what makes your NFTs special! ✨
We are going to include the following in our NFT metadata:
Name
Description
Image
External URL
A custom "XP points" attribute
Upload Media To IPFS
The first step is to upload our folder of media to IPFS using an IPFS pinning service.
We recommend Filebase but you can use any service you like.
The goal here is to upload the folder of images and receive a CID (content identifier) in return.
Make sure the images in your folder are numbered consecutively from 0.
For example, in a folder of PNG images, you will name the files 0.png, 1.png, 2.png, etc.
This will be the order the NFTs will be minted, meaning the first NFT minted will have the file 0.png attached to it, etc.
Go over Filebase and create a new Bucket if you don't have one set up already.
Now we have created a Bucket where we can upload files and folders. Click on the name to enter the Bucket.
Click the upload button and select your folder of images.
Once the folder has completed uploading you will see it added to your list.
Copy the CID and then we are done with uploading our folder to IPFS! 🚀
Building Metadata
Now that we have the CID for our folder uploaded to IPFS, we can start to build the NFT metadata.
We find it easiest to build the metadata in a spreadsheet (CSV) and then convert it to the required JSON format once completed.
We have an easy tool to create your metadata template.
Create the CSV template here 👨🎨
In the Create tab, toggle to the Create CSV Template tab.
Here we will fill in the fields.
As you can see the Uploaded Files Folder URL is ipfs:// followed by the CID from uploading the Folder to IPFS.
Now we can download the template and open it in a spreadsheet editor.
Here is what our spreadsheet looks like once we open it up in Google sheets.
You can edit this data however you see fit, just make sure you do not change the column names.
Custom Attributes
Custom attributes can be used to give NFTs different levels of rarity based on the NFT's metadata.
Here's an example of a BAYC's NFT custom attributes (referred to as properties on OpenSea).
Custom attributes can be added to your metadata by adding additional columns to your spreadsheet.
For example, If we wanted the same attributes as the example above, would add 5 new columns named Background, Clothes, Eyes, Fur & Mouth.
We are going to create an attribute named XP Points.
So to do this we will create an additional column named XP Points then give each row a different value of XP Points. This allows us to make some NFTs more desirable.
We used this function in the cell to generate a random number between 1 and 1000.
=TRUNC(RAND() * (1000 - 1) + 1)
Convert To JSON
Our smart contract requires us to upload this metadata in a JSON format rather than CSV.
First, download the spreadsheet in CSV format, then go back to The Web3 Toolbox NFT Metadata page and use the Convert CSV Template tool to generate the JSON Metadata from this CSV file.
Upload the CSV then download the JSON metadata (the downloaded file will be in .txt format).
Verify Your Metadata
Go to the view tab and paste in the text from your .txt file to view and verify your metadata before you upload it.
Once you upload (Lazy Mint) the metadata to your smart contract it can never be changed!!! Make sure it's right!
Keep this .txt file handy, we will need it soon.
Great job! You have successfully created your NFT metadata! 🔥
Deploy Your Smart Contract
Now we have our user interface ready for integration and our NFT metadata created, let's deploy an NFT Drop smart contract!
Go to The Web3 Toolbox NFT Drop page here.
Connect your wallet using the connect button at the top right of the page.
We are going to deploy our NFT drop on Polygon so we need to make sure that our MetaMask account is set on the polygon network.
If you have not manually added your desired network to MetaMask you will need to by using the "Add Network" button at the bottom. You can get the required information to add networks here.
Make sure you have native tokens to pay the gas fees for deploying your smart contract!
As you can see we have a balance of MATIC in our wallet that will be used to pay the gas fees for deploying this smart contract.
You can buy MATIC here
Now we will input all the custom values for your NFT Drop smart contract in the deploy tab.
Contract Metadata
Name
The name of the NFT Drop smart contract, not the NFTs minted from it.
Image
The image of the NFT Drop smart contract, not the NFTs minted from it.
Description
The description of the NFT Drop smart contract, not the NFTs minted from it.
Below you can see how the Name, Description & Image of the BAYC smart contract is viewed on OpenSea.
Contract Blockchain Settings
Primary Sale Recipient
The wallet address that will receive funds from the initial sale of these NFTs.
Symbol
The token symbol for these NFTs. (eg. the token symbol for Ether is ETH).
Royalty Recipient
The wallet address that will receive secondary sale royalties.
Royalty Percentage in Basis Points
The percentage of secondary sales that will go to the royalty recipient. (1% = 100 basis points)
Non-Transferrable Tokens (Soulbound)
If yes, NFTs minted from this contract cannot be transferred once they are claimed.
Once you have filled in these fields press the Deploy Smart Contract button.
You will need to confirm a transaction in your wallet.
Once the transaction is successful, you have deployed your NFT Drop smart contract! 🎉
You can find the contracts you have deployed previously on the Deployments page.
Make sure you are connected with the wallet you deployed the contract with.
Configure Your Smart Contract
Now we have a deployed smart contract, the next step is to configure it for our needs.
Upload Metadata (Lazy Mint)
Head over to the interact tab on the same page to upload the metadata we previously generated.
This is commonly referred to as Lazy Minting.
Input your NFT Drop smart contract address and metadata (you verified is correct), then upload.
Here you will need to approve another transaction in your wallet.
Once this transaction has been completed, you have successfully uploaded your metadata!! 🎉
Set Claim Conditions
In this step, we will set the claim conditions for our NFTs:
The price and currency that will be charged to claim NFTs.
If there will be a presale or whitelist.
Sale start times.
Here you can see we have set up the following:
Charge in USDC to claim our NFTs.
No whitelist.
Presale starts Nov 4th at 9 am, where a total of 5 NFTs can be sold for $49 USDC.
Public sale starts Nov 5th at 9 am, where the remaining NFTs are available for $99 USDC.
If the currency you want to charge is not listed, choose ERC-20 and input the contract address of the token you would to charge in.
Make sure it's the contract address is from the chain you are building on.
Specify your claim conditions and then approve the transaction in your wallet.
Once this transaction is completed, you have successfully set your claim conditions!!! 💸
Credit Card Checkout
We would like to offer users the ability to purchase our NFTs using a credit card.
This can be done using create checkout link action.
Input your checkout parameters to receive a QR code and link for your NFT Drop.
View the checkout here 💎
Make sure to save these links somewhere or they will be lost when you leave the page.
Connect Your UI & Smart Contract
Now that we have our smart contract configured, and a credit card checkout set up, the final step is to integrate them with the user interface in Bubble.
Our UI has two buttons that will allow the user to claim an NFT.
Native Mint Button - This will allow the user to connect their wallet, then claim the NFT directly from our smart contract using USDC held in their wallet.
Credit Card Button - This will open up the self-contained Paper checkout flow in a new tab.
Set-Up
We need to set a few things up before we start building.
Install The Web3 Toolbox
The first step is to install The Web3 Toolbox free plugin using the plugin tab on the left side of the screen.
Add Plugin Elements To The Page
Now we need to make sure that we have the smart contract actions and the wallet actions element on the page.
Find the two elements in the visual elements menu on the left side of the screen and drop them onto the page anywhere. They will not be visible when your page is being viewed.
These elements allow us to access all the actions we need in our workflows.
"Claiming" Custom State
Here we will set up a custom yes/no state on our page that will be set to yes while the user is claiming the NFT.
We do this by selecting the page in the elements tree.
Now we need to select the "i" icon in the top right corner to open up the element inspector where we can create a new state.
Create a new yes/no state, we named ours "Claiming".
Once it's created set the default value to no.
Native Mint Button
This button will allow the user to connect their wallet, then claim the NFT directly from our smart contract using USDC held in their wallet.
Listed below are the actions we will need from the plugin to set up this workflow:
Wallet Actions - Connect To MetaMask
This action allows the user to connect their MetaMask wallet.
Wallet Actions - MetaMask - Switch Network
This action will switch the user's wallet to the correct chain.
Smart Contract Actions - NFT Drop - Claim NFT
This action will trigger a transaction in the user's wallet to claim a new NFT from your smart contract, paying the price you set in the claim conditions.
Edge Case Handling
When building workflows that interact with user wallets and smart contracts, we need to be aware of common edge cases that occur so we can handle them smoothly.
Two common situations we need to handle are:
If a user's wallet is connected or not before the workflow is triggered.
If the user's wallet is connected to the correct network.
We have found the best way to handle these edge cases reliably is to set up multiple workflows with conditional statements on them.
Workflows
We are going to set up 3 separate workflows triggered by pressing the same Native Mint Button.
These workflows will be triggered based on the conditional statements listed below:
"Wallet Connected is No".
"Wallet Connected is Yes" and "Connected chain ID is not 137"
"Wallet Connected is Yes" and "Connected chain ID is 137"
We will also set up conditional statements on the button's text to change based on these conditionals so the user understands what's happening.
The chain ID for Polygon is 137.
"Wallet Connected is No" workflow
The button will say 'Connect Wallet" when this conditional is true.
Connect Wallet - The only step in this workflow will be to connect to the user's MetaMask wallet.
First, we are going to select our Native mint button to open the inspector and press the Start/Edit Workflow button to open up the workflow editor for this element.
Now we will set the conditional statement for this workflow in the "Only when" box.
The conditional statement will be: Wallet Actions A's Wallet Connect is "no".
Now add the only step to this workflow: Connect to MetaMask
"Wallet Connected is Yes" and "Connected chain ID is not 137" workflow
The button will say 'Switch Network" when this conditional is true.
Switch Network - Our smart contract is on Polygon. This action will switch the user's wallet to the Polygon network if they are not already connected to it.
Duplicate the workflow we just set up by copying and pasting it.
Change the conditional statement to Wallet Actions A's Wallet Connect is "yes" and Wallet Actions A's Connected chain ID is not 137.
Now we will add the only step to this workflow: MetaMask - Switch Network
For this action we need to input the Polygon network's RPC settings, this will add the network to the user's MetaMask if they have not added it already.
You can find RPC information of all compatible chains at Chainlist.org
"Wallet Connected is Yes" and "Connected chain ID is 137" workflow
The button will say 'Mint NFT" when this conditional is true.
Set "Claiming" State to Yes - This will set the "Claiming" state to yes, which will be used to make the native mint button inactive while a transaction is in progress.
Claim NFT - This will trigger the transaction approval request in the connected wallet.
NFT Minted Event - We will use the "NFT Drop - Claimed" event to continue this workflow once the NFT has successfully been claimed.
Set "Claiming" State to No - Once the transaction has been successful we will use an event to set the "Claiming" state to no.
Show A Success Message - This will show a pop-up that tells the user which token ID they received and a link to view the NFT on OpenSea.
There is also an event available that triggers if an error occurs while claiming the NFT that we will set up as well.
So again we are going to create a new workflow triggered from the same button and change the conditional statement to Wallet Actions A's Wallet Connect is "yes" and Wallet Actions A's Connected chain ID is 137.
The first step in our workflow is setting the custom state we just set up to yes.
Find the set state action in element actions.
The next step in this workflow will be NFT Drop - Claim NFT.
This will trigger the transaction approval in the user's wallet.
We have a few feilds we need to fill in for this action.
NFT Contract Address - This will be the contract address returned when you deployed the NFT Drop smart contract.
NFT Receiver - This is the wallet address that will receive the NFT once it has been claimed. You would usually want to use the connected wallet's address here.
Quantity - The quantity of NFTs that the user will be claiming.
Disregard the "Gasless Settings" for this drop. If this was set up we could fund a Biconomy relayer to pay the gas fee for minting the NFT instead of the user.
You can find your NFT Drop contract address on The Web3 Toolbox deployments page
This action can take up to a minute as it is interacting with a user's wallet and our smart contract.
Because of this we will use the NFT Drop - Claimed event to continue our workflow.
This event will trigger once the NFT has been successfully Claimed from our smart contract.
The first step in the workflow triggered by this event will be to set the "Claiming" custom state back to "no".
It's helpful to change the color of the Claimed event to green as it represents a successful transaction.
Next, we are going to show a success message that shows the user which token ID they received and a link to view the NFT on OpenSea. This is optional but recommended.
The URL to view a polygon NFT on OpenSea will follow this scheme:
https://opensea.io/assets/matic/<NFT Contract Address>/<NFT Token ID>
The token ID of the last minted NFT is exposed as a state on Smart contract Action's element, called NFT Drop - Claim Token ID.
The final part of this workflow is to set up error handling if the transaction fails.
There is an event for this named NFT Drop - Claim Error.
It's helpful to change the color of the Error event to red as it represents an unsuccessful transaction.
In this workflow, we are going to set the "Claiming" back to no and also show an error message popup.
The error message is optional but highly recommended.
The dynamic error message is exposed as a state on Smart contract Action's element, called NFT Drop - Claim Error.
Native Mint Button Conditionals
As we mentioned previously, we would like the text on the button to change based on the same conditionals that will trigger the different workflows we have set up.
Click on the button and toggle to the conditionals tab.
As you can we already have one conditional on this button to change its color when it is hovered.
Add the same three conditionals that we have on each of the workflows, and change the button's text accordingly.
We will add one final conditional to this button when the "Claiming" state is yes.
As you can see, we are making the button inactive and grey as well as the text say "Claiming NFT" when the condition is true.
This prevents a user from prevents triggering another transaction while one is in progress.
That's it for the native mint button, users can connect their wallet and claim their NFT!!! 🤯
Credit Card Checkout Button
In this step, we will open up the credit card checkout link we generated previously in a new tab where the user can connect or create a wallet and then purchase the NFT with a credit card.
Simple!
Let's install a free plugin called TabOpener.
Now we will click on the Credit Card button and Start/Edit workflow.
Find the Open in a new tab action and fill in the URL of the Paper checkout you created earlier.
That's It!
Now you have set up your own fully customizable NFT mint site! Great job!!!! ✨
You can view our project editor here.
Visit The Web3 Toolbox
Get help in our Discord
Sign up for a Bubble Account
Happy building, WAGMI! 🚀 💜
Last updated
