thirdweb: Build an NFT Loot Box with thirdweb and IPFS
Learn how to build an NFT loot box with thirdweb and IPFS.
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.
- Have some Mumbai Testnet Currency.
Let’s start with the ERC-20 token. Select ‘Token’ under the ‘Popular’ category.
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.
To include the token in our loot box, we’ll need to mint some.
Head back to the thirdweb dashboard, select ‘Deploy New Contract’, then select the ‘Edition’ smart contract under ‘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.
Select ‘Create Bucket’ in the top right corner to create a new bucket for your NFTs.
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.
These files need to be named in sequential order, such as 0.png, 1.png, 2.png, etc.
https://ipfs.filebase.io/ipfs/IPFS_CIDTake note of this URL.
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.
npm install @thirdweb-dev/sdk- 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.
node mint.js
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.
npx thirdweb create --next --tsWhen prompted with the configuration options, use the following answers:
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.
node ./scripts/deployPack.mjsThis script will return a Pack address. Save this address to be used in the next step.
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);
})();
node ./scripts/bundleTokens.mjsNow 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.
If you have any questions, please join our Discord server, or send us an email at [email protected]