Web3 Toolbox: Building an NFT Drop With Web3 Toolbox

What is Web3 Toolbox?

Web3 Toolbox is an open-source application and plugin that extends the functionality and compatibility of the no-code platform Bubble. Bubble is used to create several different digital products like marketplaces, applications, dashboards, and social networks without coding.

Read below to learn how to build an NFT drop with Web3 Toolbox and IPFS.

1. First, we need to create an IPFS bucket on Filebase.

To do this, navigate to console.filebase.com. If you don’t have an account already, sign up, then log in.

2. Select ‘Buckets’ from the left sidebar menu, or navigate to console.filebase.com/buckets.

Select ‘Create Bucket’ in the top right corner to create a new bucket for your NFTs.

3. Enter a bucket name and choose the IPFS storage network to create the bucket.

4. Now, upload your NFTs to Filebase using the web console and select ‘Folder’, then select the folder that contains your NFT files.

These files need to be named in sequential order, such as 0.png, 1.png, 2.png, etc.

5. You will see your folder uploaded as a single object:

6. Copy the CID of your folder:

7. Navigate to your IPFS Folder using the Filebase IPFS gateway to see your folder’s files:

https://ipfs.filebase.io/ipfs/IPFS_CID

8. Next, you will need to build out the metadata files for your NFT collection.

One method to quickly create metadata is to input the metadata information in a CSV file, then convert that file to the necessary JSON files.

To build this out, we’ll use the Web3 Toolbox NFT Metadata tool.

9. Select ‘Create CSV Template’.

10. Next, fill out the fields with the information for your NFT collection.

In the ‘Uploaded Files Folder URL’, enter your IPFS Folder CID from step 6, prefaced with ipfs://.

11. Once completed, select ‘Download Template’ to download the CSV metadata template.

This template can be edited to add additional columns that contain custom attribute traits, such as rarity, background color, or special NFT perks. However, do NOT edit the column names for any of the pre-existing columns.

12. Next, convert the CSV file to JSON by using the Web3 Toolbox NFT Metadata ‘Convert CSV Template’ tool.

13. Upload the CSV file. Then select ‘Download JSON’.

This file will download as a text document file (.txt). Keep this file handy to be used later.

14. Next, navigate to the Web3 Toolbox NFT Drop page.

Connect your wallet by selecting the ‘Connect’ button in the upper right corner.

15. Make sure that the intended blockchain network is selected in your cryptowallet.

16. Select ‘Deploy’ from the list of options.

17. Fill out the settings for your NFT smart contract, such as the collection’s name, image, description, and wallet address for all sales and royalties to be sent to.

Then, select ‘Deploy Smart Contract’.

18. You will be prompted to confirm the transaction through your wallet.

19. Once deployed, copy the smart contract address as seen below:

20. Scroll back up on that webpage and select ‘Interact’.

21. Select ‘Upload Metadata’:

22. Insert the smart contract address you previously copied, then paste in the contents of your .txt file containing the collection’s metadata.

23. Then select ‘Upload Metadata’:

24. Confirm this transaction through your crypto wallet:

25. Next, select ‘Set Claim Conditions’ to configure the conditions that will be used to determine who can mint an NFT from your collection.

26. Configure the collection’s claim conditions, such as the smart contract’s network, whether there is a presale or not, and whether there is a whitelist of addresses.

Then, set the date for your collection to go on sale and the sale price. When you’re finished, select ‘Set Claim Conditions’.

27. Confirm the transaction through your crypto wallet.

28. Additional configuration and deployment options can be set by creating a checkout or one-time purchase link, providing a widget for users to sign up for the collection’s whitelist, or a widget that can be embedded in a website for users to mint an NFT from your collection.

These configuration options are optional and will be based on your workflow and intended release format.

For more information on these specific options, check out the Web3 Toolbox documentation.

29. We’ll create a Claim widget that can be embedded into a webpage.

Select the ‘Claim’ option.

30. Enter your intended configuration options, such as your collection’s name, description, and image, then configure the widget’s visual elements like background color and font color.

Lastly, insert your NFT collection’s smart contract address.

31. Then select ‘Create Widget’. A preview of your widget will be shown.

This widget can then be embedded into a webpage or application for users to mint an NFT from your collection.