Use Bundlr to store NFT images in an NFT Drop

In this guide, we are going to use the thirdweb Solana SDK to deploy a Solana NFT drop, upload images to Bundlr to permanently store them, and finally, use these images to lazy-mint some NFTs into the drop.

Before we get started, below are some helpful resources where you can learn more about the tools we will use in this guide.

• View project source code
• Solana SDK
• Getting Started with Solana
• Bundlr

Let's get started!

Setup

Create a folder to create our project and navigate into it:

mkdir thirdweb-bundlr
cd thirdweb-bundlr

We will use node.js to write and run a script that will deploy our NFT drop, upload images, and lazy-mint the NFTs! So, initialize an empty node project:

npm init -y

Now, we need to install some packages that we will use, so install them:

npm i @thirdweb-dev/sdk dotenv @bundlr-network/client # npm

yarn add @thirdweb-dev/sdk dotenv @bundlr-network/client # yarn

Retrieving the Wallet Private Key

To deploy the contract from our wallet, we need the private key of our wallet. So, go to your Phantom wallet (if you haven't already created one, check out this guide) and click on the top right badge and select your wallet. Then click on the export private key button:

Copy this private key, and paste it into a new file .env in the following format:

PRIVATE_KEY=<your-private-key>

Using private keys as an env variable is vulnerable to attacks and is not the best practice. We are doing it in this guide for the sake of brevity, but we strongly recommend using a secret manager to store your private key.

Writing the script

Now that we have got everything set up it is time to write our script! Create a new file called mint.ts.

Initializing the SDK

Inside the mint.ts file add the following code to initialize the SDK and pass the private key:

import { ThirdwebSDK } from "@thirdweb-dev/sdk/solana";
import { config } from "dotenv";
config();

const mint = async () => {
  const walletPrivateKey = process.env.PRIVATE_KEY as string;
  // Instantiate the SDK and pass in the private key
  const sdk = ThirdwebSDK.fromPrivateKey("devnet", walletPrivateKey);
};

Deploying the NFT drop

For creating the NFT drop, we will use the SDK that we initialized and some metadata, so add the following code to your file. This will deploy an NFT drop and log the program address:

 // Metadata for the program
  const programMetadata = {
    name: "My NFT Drop",
    symbol: "MND",
    description: "This is my NFT Drop",
    totalSupply: 3,
  };

  // Deploying the program
  const address = await sdk.deployer.createNftDrop(programMetadata);
  console.log("Program Address: ", address);

Uploading Images to Bundlr

Create a folder called images and added the NFT images to it. We will now upload the whole folder to Bundlr using their SDK like so:

  // Initializing the bundlr client
  const bundlr = new Bundlr(
    "https://node2.bundlr.network",
    "solana",
    walletPrivateKey
  );

  // Uploading the folder
  const uploadedFolder = await bundlr.uploadFolder("./images");
  console.log("Uploaded folder: ", uploadedFolder?.id);

The node2 provides completely free uploads up to 100kB but if you have a lot of images you can switch to node1 which will cost you some gas fees.

Creating metadata for the NFTs

We are going to use the images that we just uploaded and create an array of NFTs with the metadata that we'll lazy mint:

  // Metadata for the NFTs
  const metadata = [
    {
      name: "NFT #1",
      description: "My first NFT!",
      image: `https://arweave.net/${uploadedFolder?.id}/0.jpg`,
      properties: [
        {
          name: "kitten",
          value: "very cute!",
        },
      ],
    },
    {
      name: "NFT #2",
      description: "My second NFT!",
      image: `https://arweave.net/${uploadedFolder?.id}/1.jpg`,
      properties: [
        {
          name: "grumpy cat",
          value: "grumpy!",
        },
      ],
    },
    {
      name: "NFT #2",
      description: "My third NFT!",
      image: `https://arweave.net/${uploadedFolder?.id}/2.jpg`,
      properties: [
        {
          name: "Ninja Cat",
          value: "warrior!",
        },
      ],
    },
  ];

Lazy minting the NFTs

Finally, we will lazy mint the NFTs from the metadata that we just added:

  // Getting the program
  const program = await sdk.getNFTDrop(address);
  // Minting the NFTs
  const tx = await program.lazyMint(metadata);
  console.log("signature: ", tx[0].signature);

Running the script

We will now finally run the script and test it, so run:

npx ts-node mint.ts

Moment of truth... 🥁. Wait for the script and you should be able to see these logs:

Now, we can go check this program on by going to https://thirdweb.com/sol-devnet/program-address

Once you go to the dashboard you will be able to see all your NFTs there 🎉

If you check the images, you will see they are now stored on arweave instead of the default, IPFS!

Conclusion

In this guide, we learned how to use Bundlr to store images for our Solana NFT drop. If you made your own NFT drop pat yourself on the back and share it with us on the thirdweb Discord!

If you want to look at the code, check out the GitHub Repository!