thirdweb: Build an NFT Loot Box with thirdweb and IPFS

Learn how to build an NFT loot box with thirdweb and IPFS.

What is thirdweb?

thirdweb is an easy-to-use platform to build Web3 applications with code or no-code. thirdweb makes creating and deploying apps such as NFT collections or NFT marketplaces easy. thirdweb can be used with objects stored on IPFS, so objects stored in a Filebase IPFS bucket can be seamlessly uploaded for use with a thirdweb app.

Read below to learn how to release an NFT loot box with thirdweb and IPFS.

Prerequisites:

• Install Node.js and npm.

• A cryptowallet, such as MetaMask.

• Have some Mumbai Testnet Currency.

• Download and install an IDE of your choice, such as VSCode.

• Sign up for a free Filebase account.

1. Start by navigating to the thirdweb dashboard and connecting your crypto wallet.

2. Select ‘Deploy New Contract':

3. In this tutorial, we’ll create two contracts: one using an ERC-20 token that'll be a reward in the loot box and one for the NFT rewards inside of the loot box that use an ERC-1155 contract.

Let’s start with the ERC-20 token. Select ‘Token’ under the ‘Popular’ category.

4. Select ‘Deploy Now’.

5. For this contract, you will need to fill out configuration fields such as the contract’s name, symbol, description, image, and confirm that the wallet address is correct.

Then, select the blockchain for this contract to be deployed on. This tutorial uses the Mumbai Testnet network. When finished, select ‘Deploy Now’ to deploy the smart contract.

6. By default, there will be a supply of 0 tokens.

To include the token in our loot box, we’ll need to mint some.

7. Select ‘Mint’, then enter the desired number of tokens to be minted.

8. Once these tokens have been minted, they’ll be displayed under the ‘Contract Tokens’ section.

9. Now it’s time to mint our NFTs.

Head back to the thirdweb dashboard, select ‘Deploy New Contract’, then select the ‘Edition’ smart contract under ‘NFTs’.

10. Select ‘Deploy Now’, then configure the smart contract’s information.

11. Once created, you’ll see your contract’s dashboard.

12. Now it’s time to mint our NFTs.

First, we need some images stored on IPFS. To do this, navigate to console.filebase.com. If you don’t have an account already, sign up, then log in.

13. 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.

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

Bucket names must be unique across all Filebase users, be between 3 and 63 characters long, and can contain only lowercase characters, numbers, and dashes.

15. 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.

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

17. Copy the CID of your folder:

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

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

Take note of this URL.

19. Head back to thirdweb.

Select the ‘Code’ tab. This code showcases different code snippets to mint your NFTs using scripts, with your contract address and crypto wallet address inputted automatically for easy copy and paste. This tutorial will showcase the JavaScript code examples, but you can use any of the languages showcased in this Code tab. You can follow along with the code examples showcased in this tutorial, or copy and paste the snippets provided in this tab.

20. Open a command line window and install the thirdweb SDK:

npm install @thirdweb-dev/sdk

21. Open an IDE such as VSCode and insert the following code, replacing the following values:

• CONTRACT: Your Edition NFT contract address. This can be found in the thirdweb dashboard here:

• WALLET_ADDRESS: Your crypto wallet address.

• Each IPFS_CID with your IPFS folder CID you took note of earlier.

• Adjust the SUPPLY value for each NFT to reflect how many of each you would like included in your loot box.

import { ThirdwebSDK } from "@thirdweb-dev/sdk";

const sdk = new ThirdwebSDK("mumbai");
const contract = await sdk.getContract("0x86d96De91B42338eF8E8Aa18Df6f7c0f1cfFd5AA", "edition");

// Address of the wallet you want to mint the NFT to
const toAddress = "0xE9275fc700e9C22f262ce2222b6d3D57DbE9376c"

// Custom metadata and supplies of your NFTs
const metadataWithSupply = [{
  supply: 50, // The number of this NFT you want to mint
  metadata: {
    name: "Loot Box NFT 1",
    description: "This NFT is part of the Filebase Loot Box",
    image: fs.readFileSync("https://ipfs.filebase.io/ipfs/IPFS_CID/0.png"), // This can be an image url or file
  },
}, {
  supply: 100,
  metadata: {
    name: "Loot Box NFT 2",
    description: "This NFT is part of the Filebase Loot Box",
    image: fs.readFileSync("https://ipfs.filebase.io/ipfs/IPFS_CID/1.png"), // This can be an image url or file
  },
{
  supply: 25,
  metadata: {
    name: "Loot Box NFT 3",
    description: "This NFT is part of the Filebase Loot Box",
    image: fs.readFileSync("https://ipfs.filebase.io/ipfs/IPFS_CID/2.png"), // This can be an image url or file
  },
{
  supply: 10,
  metadata: {
    name: "Loot Box NFT 4",
    description: "This NFT is part of the Filebase Loot Box",
    image: fs.readFileSync("https://ipfs.filebase.io/ipfs/IPFS_CID/3.png"), // This can be an image url or file
  },
{
  supply: 1,
  metadata: {
    name: "Loot Box NFT 5",
    description: "This NFT is part of the Filebase Loot Box",
    image: fs.readFileSync("https://ipfs.filebase.io/ipfs/IPFS_CID/4.png"), // This can be an image url or file
  },
}];

const tx = await contract.mintBatchTo(toAddress, metadataWithSupply);
const receipt = tx[0].receipt; // same transaction receipt for all minted NFTs
const firstTokenId = tx[0].id; // token id of the first minted NFT
const firstNFT = await tx[0].data(); // (optional) fetch details of the first minted NFT

You can edit this script to include as many NFTs as you’d like to mint in your loot box.

22. Save this script as mint.js, then run this script with the command:

node mint.js

23. Refresh your thirdweb dashboard. Your NFTs will be listed.

24. Now it’s time to create the loot box. First, let’s dive into how a loot box works.

A loot box is a pack of multiple different rewards that contain a random selection of different items based on the reward pool. In this case, our rewards are our NFTs. There is a fixed supply of each NFT that we created, with some being in a much higher supply than others. The NFTs with a lower supply are rare to receive, making them worth more.

When you open a loot box, you’ll receive a random selection of the NFTs based on their rarity.

In this tutorial, we have 5 possible NFTs that can be in the loot box. We’ll configure our loot box to include 3 NFTs, making the NFTs with a lower supply rarer to receive within a loot box pack. Each loot box will also include a set number of the ERC-20 tokens that we created at the start of the tutorial. We’ll set a total number of 62 loot boxes that can be claimed and opened.

The total number of loot boxes that you create must take into consideration the total amount of NFTs and Tokens you have minted. In this example, we minted a total of 186 NFTs and 1000 tokens. If every loot box contains 3 NFTs and 20 Tokens, the maximum amount of loot boxes we can create is 62.

25. To create our loot box, start by creating a new Next.js and TypeScript project using the following command:

npx thirdweb create --next --ts

When prompted with the configuration options, use the following answers:

26. Then, create a new folder called scripts, with a new file called deployPack.mjs. Open this file in your IDE of choice, then insert the following code:

import { ThirdwebSDK } from "@thirdweb-dev/sdk";

(async () => {
  const sdk = ThirdwebSDK.fromPrivateKey("PRIVATE_KEY", "mumbai");

  const packAddress = await sdk.deployer.deployPack({
    name: "NFT Loot Box",
    primary_sale_recipient: "WALLET_ADDRESS",
  });

  console.log(`Pack address: ${packAddress}`);
})();

Replace the following values:

• PRIVATE_KEY: This is the private key from your crypto wallet. You can learn how to export your private key here. Note that this value should be stored and accessed securely, and should not be made public at any time.
• WALLET_ADDRESS: Your crypto wallet address.

27. Save this file, then run it with the command:

node ./scripts/deployPack.mjs

This script will return a Pack address. Save this address to be used in the next step.

28. Next, create another new file in the scripts directory called bundleTokens.mjs.

Inside this file, insert the following code, replacing the following values to match your configuration:

• PACK_ADDRESS: The pack address returned in the previous step.

• TOKEN_ADDRESS: The contract address for your ERC-20 token. This can be found in the thirdweb dashboard:

  
• EDITION_ADDRESS: The contract address for your ERC-1155 contract. This can be found in the thirdweb dashboard:

• Configure the values for quantityPerReward, quantity, and totalReward to match your loot box's values.

import { ThirdwebSDK } from "@thirdweb-dev/sdk";
import fs from "fs";

(async () => {
  const packAddress = "PACK_ADDRESS";
  const tokenAddress = "TOKEN_ADDRESS";
  const editionAddress = "EDITION_ADDRESS";

  const sdk = ThirdwebSDK.fromPrivateKey("PRIVATE_KEY", "mumbai");

  const pack = sdk.getPack(packAddress);

  const token = sdk.getToken(tokenAddress);
  await token.setAllowance(packAddress, 100);

  const edition = sdk.getEdition(editionAddress);
  await edition.setApprovalForAll(packAddress, true);

  const ipfsHash = await sdk.storage.upload(chestFile);
  const url = ipfsHash.uris[0];

const packNfts = await pack.create({
    // Metadata for the pack NFTs
    packMetadata: {
      name: "Filebase NFT Loot Box",
      description:
        "An NFT Loot Box!",
      image: url,
    },

    erc20Rewards: [
      {
        contractAddress: tokenAddress,
        quantityPerReward: 20,
        quantity: 1000,
        totalRewards: 62,
      },
    ],

    erc1155Rewards: [
      {
        contractAddress: editionAddress,
        tokenId: 0,
        quantityPerReward: 1,
        totalRewards: 50,
      },
      {
        contractAddress: editionAddress,
        tokenId: 1,
        quantityPerReward: 1,
        totalRewards: 100,
      },
      {
        contractAddress: editionAddress,
        tokenId: 2,
        quantityPerReward: 1,
        totalRewards: 25,
      },
      {
        contractAddress: editionAddress,
        tokenId: 3,
        quantityPerReward: 1,
        totalRewards: 10,
      },
      {
        contractAddress: editionAddress,
        tokenId: 4,
        quantityPerReward: 1,
        totalRewards: 1,
      },
      ],
    rewardsPerPack: 3,
  });

  console.log(`====== Success: Pack NFTs created =====`);

  console.log(packNfts);
})();

29. Then, run this script with the command:

node ./scripts/bundleTokens.mjs

Further Reading

Now that you’ve created an NFT loot box, you can air drop packs to your friend’s wallets, set up a website for loot boxes to be claimed and opened, or use them as community rewards. To learn more about these workflows, check out the thirdweb documentation for this project.