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:
mkdir thirdwebmint && cd thirdwebmint
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:
npm init -y
Finally, install the following dependencies in order to use the thirdweb SDK:
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:
PRIVATE_KEY = YOUR_PRIVATE_KEY_HERE
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:
minting nfts from the thirdweb sdk using typescript
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;
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;
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:
Imports the required modules to interact with the thirdweb SDK
Requires the dotenv module in order to import our environment variable
Initializes a thirdweb SDK instance by using the function ThirdwebSDK() and the Ethers.Wallet library
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 trial 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.
minting nfts from the thirdweb sdk using typescript
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 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 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.
minting nfts from the thirdweb sdk using typescript
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 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 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.
minting nfts from the thirdweb sdk using typescript
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 :)
Uma is a software developer and blockchain enthusiast based in Nigeria who is familiar with a variety of different web technologies and frameworks. He is also keen on finding ways to explain things as simply as possible.
Want more Web3 tutorials?
We'll send you our latest tutorials via the QuickNode Newsletter.
PHP is very popular in developing the backend of websites or web applications. PHP has a huge crowd of developers trusting it as their go-to language. In this guide, we will see how we can...
Private keys are one of the most sensitive pieces of data when it comes to cryptography and the blockchain. However, there has always been debate/confusion about choosing between custodial...
With high usage in web applications and straightforward syntax, Ruby is used by a vast number of people. This guide will cover creating an Ethereum address in Ruby using
In this tutorial we will look at how we can setup a basic NEAR project from scratch, installing and configuring dependencies and customizing the project to work well with...
To send a transaction on the Ethereum network, you need to pay fees for including the transaction in a block as well as the computation necessary in the transaction; this fee is called gas....
When building a smart contract on the Ethereum blockchain, new developers tend to reach out to tools like truffle and web3.js in building their smart contracts. This tutorial will look at how...
We can say that Java is one of the most versatile languages out there, and it continues to be relevant in today's time. Java is so popular because of its massive user base and use cases. In...
Ever wanted to get a list of all the owners of a particular NFT collection? Or wanted to fetch all the metadata for an NFT collection? From experience, you may know that compiling all this NFT...
Bitcoin is the father of blockchain technology. With Bitcoin started a new era of blockchain and decentralization. Bitcoin enabled everyone to make the peer-to-peer transactions they enjoy...
When someone thinks of developing a dApp the first tool that comes to their mind is web3.js which is pretty common because of its popularity in the community and wide use cases, dApp...
Stacks is an open-source layer-1 blockchain that utilizes the Proof of Transfer (PoX) consensus mechanism. The Stacks blockchain leverages Bitcoin's security and allows direct read access to...
On Ethereum, when a transaction is sent, before being added to a block, it resides in what is called a Mempool. To receive information about this transaction, the Mempool must be queried. This...
A developer stack is a bag of technologies a developer possesses. For example, MEAN (MongoDB, Express.js, AngularJS/Angular, and Node.js) and MERN (MongoDB, Express.js, React, and Node.js) are...
This guide demonstrates how to mint an NFT on the Polygon blockchain using the Ethers.js library and the Factory ERC-1155 contract you built in an earlier
If you are building on Ethereum, you may run into scenarios where you need to fetch transaction history for a given address. Unfortunately, the current design for Ethereum lacks an easy way to...
Developing applications involves juggling several moving pieces like front-ends, back-ends, and databases. But developing a decentralized application on a blockchain adds a few more elements...
To do any type of transaction on the Bitcoin blockchain, you’ll need a public key or a Bitcoin address. In this guide, we’ll cover how to generate a new Bitcoin address in JavaScript using
Avalanche is an open-source, proof-of-stake blockchain with smart contract functionality that uses the Snow family of consensus protocols. The Avalanche...
Blockchain provides us with the power of decentralization. Decentralization means the transfer of power to users/members rather than having a single centralized authority governing everything;...
In our dApp, we will have a simple react user interface that has a material button asking the user to connect to MetaMask. And if they do not have an account, they can create one or log in to...
Sometimes, you submit a transaction on Ethereum without enough gas due to network congestion or too many pending transactions offering a higher gas price than you have offered on your...
PHP is a very popular choice among developers and has a vast community due to its long presence in web development. In this guide, we’ll cover how to connect to Ethereum with PHP using the
Making a dApp that requires ERC20 token data can be tedious since there are numerous tokens, and one needs to query each token contract to get the data. This guide will show how we can build a...
In this guide, we'll understand a bit about reactive development and how to use Subspace with QuickNode.JavaScript is the programming language behind most of the internet apps and...
Social logins: we have all seen them, we have all used them. "Login with Facebook". "Login with Github".If you have been around the Web3 community you may have come across a...
Golang is very popular among backend developers for building infrastructures and microservices. Go is a procedural programming language. Developed in 2007 by...
Python is one of the most versatile programming languages out there with an abundance of use cases; We can build many applications with Python from client-side to back end. In this guide, we...
NFTs are great for creators to monetize their artwork and for people to get ownership of an item. But since gas prices are usually high given the highly in-demand space on Ethereum, minting an...
Today we will be building a sample app in Svelte, and connecting it to a smart contract that we deploy on the Ropsten Network.Our frontend will be able to do the...
If you’ve interacted with smart contracts on Ethereum before, you might have noticed that your transaction includes a long hexadecimal value in its data field. As a user (or developer), you...