11 min read

Overview

Building on web3 is sometimes seen as a challenge greater than building on web2. The majority of web2 development features and technologies are well-documented and have stood the test of time, thus not requiring much innovation. Web3 is still in many ways the new kid on the block and development in it can often seem exciting yet daunting. Fortunately, there are services, like thirdweb, which help streamline the web3 development process and make it quick and easy to get started. In this guide, we will demonstrate two ways in which you can mint an NFT on thirdweb - through the thirdweb dashboard (with no code!) and then using thirdweb's SDK with TypeScript. Let's jump in!

What We Will Do

• Navigate the thirdweb dashboard
• Deploy an NFT collection contract and mint from it
• Set permissions for our NFT collection contract
• Mint an NFT with the thirdweb SDK using Typescript

What You Will Need

• A basic understanding of Typescript
• Rinkeby test ETH (you can get some at this faucet)
• A Cryptocurrency wallet
• Image assets (you can use NFT.storage to host images for free)

Wallet Configuration & Funding

Before we jump into minting NFTs with thirdweb, we will need to set up a MetaMask wallet account. You can create a MetaMask wallet by following this quick setup guide. Once your wallet is set up, you'll need to configure your MetaMask wallet to the Rinkeby test network. To do this, click the "Ethereum Mainnet" dropdown on the Metamask app and then click Show/hide test networks and select Rinkeby Test Network (more info).

You will also need some test ETH to pay for this transaction. If you don't have some already, go to this faucet page and connect your wallet to request free funding on the Rinkeby network.

Minting NFTs from the thirdweb Dashboard

Connecting your Wallet

First, navigate to the thirdweb's dashboard. You will be prompted to connect your wallet.

Since we are using a MetaMask wallet for this guide, we will click on the Connect Wallet button and select MetaMask as our sign-in option. Once we choose MetaMask, we will get a pop up like this:

Click on Next, and click the Connect button afterward. We are now signed in and can create our collection.

Deploying the NFT Collection Contract

In this section, we will deploy an NFT collection contract. After connecting to our MetaMask wallet, we are directed to thirdweb's dashboard with a button to deploy a new contract.

To continue, click on the Deploy new contract button, and you'll be redirected to the contracts page. thirdweb allows us to deploy pre-built contracts through their frontend or via the thirdweb cli. This allows technical and non-technical users to easily deploy smart contracts. There is a wide variety of pre-built contracts you can easily deploy, such as NFT Drops, NFT Collections, Edition Drops, Tokens (ER20), Voting contracts, NFT marketplaces, and much more! For this guide's purpose, we will click Deploy Now under the NFT Collection section.

Next, on the NFT collection window, we are going to configure our NFT collection contract. Under Contract Metadata, we will populate the following fields:

• Name
• Symbol
• Description
• Image

Note that in the Payout Settings and Royalties section, the default recipient address is set to your connected wallet address. Primary sales refer to the initial sales when users mint from your NFT Collection contract. Royalty sales derive from secondary market sales such as OpenSea, Rarible, LooksRare, etc.

Once we are done filling in the contract information, we need to select which network to deploy this contract on. Expand the Network/Chain dropdown and select Rinkeby under test networks. Click the Deploy Now button, and MetaMask will pop up. Next, confirm the transaction on MetaMask and navigate back to the thirdweb dashboard.

Minting an NFT Under our NFT Collection

In this section, we will mint an NFT under the NFT collection we just deployed on the Rinkeby test network. In the dashboard, click your created collection to be directed to it's specific page:

To mint an NFT under this Blueberry collection, all we have to do is click on the + Mint NFT button.

When we click on the + Mint NFT button, a panel opens up to the right for us to fill in the information for the NFT, like the name, description, image, and any properties for the NFT if we like. NFTs can range from images to videos and other kinds of digital documents like texts, PDFs, etc.

After filling out all the information for the NFT, we click the + Mint NFT button, and again we will be prompted by MetaMask to sign the transaction.

Once we confirm the transaction, that's it! We minted our first NFT without writing a single line of code! We can view this NFT on our dashboard (& other NFT marketplaces) and do whatever we want with the NFT, such as transferring it to another wallet or burning it (which would essentially remove it from your wallet).

Permission Manager

Now, let's look at some permissions we can set to manage the NFT we minted. To adjust permissions features, switch to the Permissions tab next to the Overview tab.

Here we can see the roles and permissions we can set up for this NFT. Under the Admin section, we can transfer the account to those who we want to have admin privileges over the NFT or add new accounts to manage the NFT. We can also change the creator or add accounts that will be able to create NFTs under the contract in the creator heading. Lastly, we can decide to set the NFT to transferable or non-transferable. Once you are done with setting permissions, click on the update permissions button.

Minting NFTs from the thirdweb SDK using Typescript

Now that we've seen how minting an NFT can be done through the thirdweb dashboard, let's see how this can also be achieved with code using Typescript and the thirdweb SDK. We will install and use the thirdweb SDK to programmatically create an NFT collection and mint from it. Let's get started!

Note: This demonstration will create another NFT collection from scratch, but you can also mint NFTs programmatically from your already created NFT collection on the thirdweb dashboard by clicking the Code tab and looking under the related code example.

Installing the thirdweb SDK

To set up our project, first run the following command in a terminal window to create a folder and navigate inside it:

Next, run the command echo > index.ts to create a new typescript file. After this, we will initialize an npm project by running the following command:

Finally, install the following dependencies in order to use the thirdweb SDK:

Setting your environment variable

Now that everything is installed, we can move on to the next step, which is creating a .env file. A .env file (environment file) is a simple text configuration file for controlling your project's environment. We'll use this method to securely store our private key and prevent it from being sourced from our typescript file.

Run the command echo > .env to create a .env file at the root folder of your directory. Then, to find your private key on your MetaMask wallet, check out the following article - How to Export an Account Private Key. Once you have your private key, add it to the .env file in the following format:

Importing dependencies

Once our environment variable is set up, open the index.ts file in a code editor and paste the following code snippets (in order) to the file:

import { BigNumber, ethers } from "ethers";
import { ThirdwebSDK, TransactionResult } from "@thirdweb-dev/sdk";
require('dotenv').config();

Initializing the thirdweb SDK

const privateKey = process.env.PRIVATE_KEY as string;
const sdk = new ThirdwebSDK(
    new ethers.Wallet(   
    privateKey,
    ethers.getDefaultProvider("YOUR_QUICKNODE_HTTP_URL")
    )
);

let collectionAddress:string;
let mintTxnHash:TransactionResult;

The code above accomplishes a few tasks:

1. Imports the required modules to interact with the thirdweb SDK
2. Requires the dotenv module in order to import our environment variable
3. Initializes a thirdweb SDK instance by using the function ThirdwebSDK() and the Ethers.Wallet library
4. Declares two string variables that will be used when creating and minting NFTs.

Note: Remember to replace the placeholder - "YOUR_QUICKNODE_RPC_URL" with a valid RPC URL; you can get a free endpoint at quicknode.com!

Next, we will create a function that will help us deploy an NFT collection via thirdweb cli.

Creating the NFT collection

In the index.ts file, paste the following code at the bottom of the file.

async function createCollection() {

    collectionAddress = await sdk.deployer.deployNFTCollection({
        name: "Fruit Basket",
        symbol: "FRUIT",
        primary_sale_recipient: "0x2ED0fE9a8FbB3b7f0ffC45a18eff8f0c3A0ABE2C",
        image: "https://bafkreie4zdcentifeqoukitd32lvd3k3kr3y5va7kqfdewd7budjkoanui.ipfs.nftstorage.link/",
        description: "A fruit basket that lives on the Rinkeby blockchain! 🍎🧺",
        /* Optional fields below */
        //platform_fee_recipient: "0x00000",
        //platform_fee_basis_points: "5",
        //fee_recipient: "0x00000",
        //seller_fee_basis_points: "10",
        //external_link: "YOUR_HTTP_URL",
        //Descriptions for the fields above can be found here: https://portal.thirdweb.com/typescript/sdk.nftcontractdeploymetadata
    })
    console.log("NFT Collection Address: ", collectionAddress)
}

Our async function createCollection() calls the deployNFTCollection() function which takes our NFT collection metadata as an argument. Our example uses the following fields - name, symbol, primary_sale_reciepient, image and description. You can also uncomment the other fields for additional contract specifications.

Now that we have the code required to deploy an NFT collection, let's move on to creating the code logic to mint NFTs from our collection.

Mint an NFT under our collection

In this section, we will create the logic for minting an NFT from our collection. Minting an NFT to yourself is now as simple as calling the mintToSelf method on the initialized NFT contract.

async function mint() {
    const nftCollection = sdk.getNFTCollection(collectionAddress)
    mintTxnHash = await nftCollection.mintToSelf?.(
    {
        name: "Orange",
        description: "An orange living on the Rinkeby blockchain",
        image: "https://bafkreidxzweunukaruhyfvepkjrep76vi75y6yl5fq3pqedallz6nwoori.ipfs.nftstorage.link/", 
        properties: {
            "Orange Type": "Navel", // Optional field to set attributes
        }
    })
    console.log("Minted NFT Transaction Hash: ", mintTxnHash.receipt.transactionHash)
}

We will also add a helper function that will run our code synchronously. This is helpful because it allows each function to run before the next function is executed.

async function main() {
    createCollection().then(
    () => mint())
}

The final script should look like this:

import { BigNumber, ethers } from "ethers";
import { ThirdwebSDK, TransactionResult } from "@thirdweb-dev/sdk";
require('dotenv').config();


const privateKey = process.env.PRIVATE_KEY as string;
const sdk = new ThirdwebSDK(
    new ethers.Wallet(   
    privateKey,
    ethers.getDefaultProvider("YOUR_QUICKNODE_HTTP_URL")
    )
);

let collectionAddress:string;
let mintTxnHash:TransactionResult;

async function createCollection() {

    collectionAddress = await sdk.deployer.deployNFTCollection({
        name: "Fruit Basket",
        symbol: "FRUIT",
        primary_sale_recipient: "0x2ED0fE9a8FbB3b7f0ffC45a18eff8f0c3A0ABE2C",
        image: "https://bafkreie4zdcentifeqoukitd32lvd3k3kr3y5va7kqfdewd7budjkoanui.ipfs.nftstorage.link/",
        description: "A fruit basket that lives on the Rinkeby blockchain! 🍎🧺",
        /* Optional fields below */
        //platform_fee_recipient: "0x00000",
        //platform_fee_basis_points: "5",
        //fee_recipient: "0x00000",
        //seller_fee_basis_points: "10",
        //external_link: "YOUR_HTTP_URL",
        //Descriptions for the fields above can be found here: https://portal.thirdweb.com/typescript/sdk.nftcontractdeploymetadata
    })
    console.log("NFT Collection Address: ", collectionAddress)
}

async function mint() {
    const nftCollection = sdk.getNFTCollection(collectionAddress)
    mintTxnHash = await nftCollection.mintToSelf?.(
    {
        name: "Orange",
        description: "An orange living on the Rinkeby blockchain",
        image: "https://bafkreidxzweunukaruhyfvepkjrep76vi75y6yl5fq3pqedallz6nwoori.ipfs.nftstorage.link/", 
        properties: {
            "Orange Type": "Navel", // Optional field to set attributes
        }
    })
    console.log("Minted NFT Transaction Hash: ", mintTxnHash.receipt.transactionHash)
}

async function main() {
    createCollection().then(
    () => mint())
}

main()

Once you have saved the changes in your index.ts file, open the terminal and run the following command to run the script:

You should see the following output printed in your terminal window:

From the screenshot above, we can see that our Fruit Basket NFT collection has been deployed to the address: 0xF44DC7B595F690084f0b8787fAd8cBCc130C4A06.

Additionally, we can take the transaction hash and look for it on Etherscan to see the mined transaction. If you navigate to the thirdweb dashboard and click on the particular collection contract, you can see the NFT minted:

Conclusion

That's a wrap! In this guide, we demonstrated two ways in which you can mint an NFT with thirdweb: through the thirdweb dashboard without any code and with the thirdweb SDK using Typescript. 

Subscribe to our newsletter for more articles and guides. Feel free to reach out to us via Twitter if you have any feedback. You can always chat with us on our Discord community server, featuring some of the coolest developers you'll ever meet :)