thirdweb: Build an NFT Minting Page with thirdweb, IPFS, RainbowKit, and WAGMI
Learn how to build an NFT minting page with thirdweb, IPFS, RainbowKit & WAGMI.
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 build an NFT minting page with thirdweb, IPFS, RainbowKit & Wagmi.
- Have some Mumbai Testnet Currency.



Then select 'Deploy Now'.

For this tutorial, we’ll be using the Mumbai testnet, so we are using a Mumbai wallet.


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_CID
Take note of this URL.
Select the ‘Code’ tab. This code showcases different code snippets to use 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
with your contract address.WALLET_ADDRESS
with your crypto wallet address.- Each
IPFS_CID
with your IPFS folder CID you took note of earlier. - Replace the name and description of each NFT with your desired information.
import { ThirdwebSDK } from "@thirdweb-dev/sdk";
const sdk = new ThirdwebSDK("mumbai");
const contract = sdk.getContract("CONTRACT", "nft-collection");
// Address of the wallet you want to mint the NFT to
const walletAddress = "WALLET_ADDRESS";
// Custom metadata of the NFTs you want to mint.
const metadatas = [{
name: "Cool NFT #1",
description: "This is a cool NFT",
image: fs.readFileSync("https://ipfs.filebase.io/ipfs/IPFS_CID/0.png"), // This can be an image url or file
}, {
name: "Cool NFT #2",
description: "This is a cool NFT",
image: fs.readFileSync("https://ipfs.filebase.io/ipfs/IPFS_CID/1.png"),
}];
const tx = await contract.mintBatchTo(walletAddress, metadatas);
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 at one time.
node mint.js


yarn create vite
When prompted, answer the questions in the following manner:

cd nft-mint-page
yarn
yarn dev


yarn add @rainbow-me/rainbowkit wagmi ethers @chakra-ui/react @emotion/react @emotion/styled framer-motion
import React from 'react';
import ReactDOM from 'react-dom/client';
import App from './App';
import './index.css';
import '@rainbow-me/rainbowkit/styles.css';
import { getDefaultWallets, RainbowKitProvider } from '@rainbow-me/rainbowkit';
import { chain, configureChains, createClient, WagmiConfig } from 'wagmi';
import { jsonRpcProvider } from 'wagmi/providers/jsonRpc';
import { publicProvider } from 'wagmi/providers/public';
import { ChakraProvider } from '@chakra-ui/react';
const { chains, provider } = configureChains(
[chain.goerli], // you can add more chains here like chain.mainnet, chain.optimism etc.
[
jsonRpcProvider({
rpc: () => {
return {
http: 'https://rpc.ankr.com/eth_goerli', // go to <https://www.ankr.com/protocol/> to get a free RPC for your network
};
},
}),
publicProvider(),
]
);
const { connectors } = getDefaultWallets({
appName: 'NFT minting dApp',
chains,
});
const wagmiClient = createClient({
autoConnect: false,
connectors,
provider,
});
ReactDOM.createRoot(document.getElementById('root')!).render(
<React.StrictMode>
<ChakraProvider>
<WagmiConfig client={wagmiClient}>
<RainbowKitProvider chains={chains}>
<App />
</RainbowKitProvider>
</WagmiConfig>
</ChakraProvider>
</React.StrictMode>
);
import { Container } from '@chakra-ui/react';
import { ConnectButton } from '@rainbow-me/rainbowkit';
function App() {
return (
<Container paddingY='10'>
<ConnectButton />
</Container>
);
}
export default App;

{
"abi": [
{
"inputs": [
{
"internalType": "string",
"name": "_tokenURI",
"type": "string"
},
{
"internalType": "uint256",
"name": "_mintCost",
"type": "uint256"
}
],
"stateMutability": "nonpayable",
"type": "constructor"
},
{
"anonymous": false,
"inputs": [
{
"indexed": true,
"internalType": "address",
"name": "owner",
"type": "address"
},
{
"indexed": true,
"internalType": "address",
"name": "approved",
"type": "address"
},
{
"indexed": true,
"internalType": "uint256",
"name": "tokenId",
"type": "uint256"
}
],
"name": "Approval",
"type": "event"
},
{
"anonymous": false,
"inputs": [
{
"indexed": true,
"internalType": "address",
"name": "owner",
"type": "address"
},
{
"indexed": true,
"internalType": "address",
"name": "operator",
"type": "address"
},
{
"indexed": false,
"internalType": "bool",
"name": "approved",
"type": "bool"
}
],
"name": "ApprovalForAll",
"type": "event"
},
{
"anonymous": false,
"inputs": [
{
"indexed": true,
"internalType": "address",
"name": "previousOwner",
"type": "address"
},
{
"indexed": true,
"internalType": "address",
"name": "newOwner",
"type": "address"
}
],
"name": "OwnershipTransferred",
"type": "event"
},
{
"anonymous": false,
"inputs": [
{
"indexed": true,
"internalType": "address",
"name": "from",
"type": "address"
},
{
"indexed": true,
"internalType": "address",
"name": "to",
"type": "address"
},
{
"indexed": true,
"internalType": "uint256",
"name": "tokenId",
"type": "uint256"
}
],
"name": "Transfer",
"type": "event"
},
{
"inputs": [
{
"internalType": "address",
"name": "to",
"type": "address"
},
{
"internalType": "uint256",
"name": "tokenId",
"type": "uint256"
}
],
"name": "approve",
"outputs": [],
"stateMutability": "nonpayable",
"type": "function"
},
{
"inputs": [
{
"internalType": "address",
"name": "owner",
"type": "address"
}
],
"name": "balanceOf",
"outputs": [
{
"internalType": "uint256",
"name": "",
"type": "uint256"
}
],
"stateMutability": "view",
"type": "function"
},
{
"inputs": [
{
"internalType": "string",
"name": "_newURI",
"type": "string"
}
],
"name": "changeTokenURI",
"outputs": [],
"stateMutability": "nonpayable",
"type": "function"
},
{
"inputs": [],
"name": "commonTokenURI",
"outputs": [
{
"internalType": "string",
"name": "",
"type": "string"
}
],
"stateMutability": "view",
"type": "function"
},
{
"inputs": [
{
"internalType": "uint256",
"name": "tokenId",
"type": "uint256"
}
],
"name": "getApproved",
"outputs": [
{
"internalType": "address",
"name": "",
"type": "address"
}
],
"stateMutability": "view",
"type": "function"
},
{
"inputs": [
{
"internalType": "address",
"name": "owner",
"type": "address"
},
{
"internalType": "address",
"name": "operator",
"type": "address"
}
],
"name": "isApprovedForAll",
"outputs": [
{
"internalType": "bool",
"name": "",
"type": "bool"
}
],
"stateMutability": "view",
"type": "function"
},
{
"inputs": [
{
"internalType": "address",
"name": "_to",
"type": "address"
}
],
"name": "mint",
"outputs": [
{
"internalType": "uint256",
"name": "",
"type": "uint256"
}
],
"stateMutability": "payable",
"type": "function"
},
{
"inputs": [],
"name": "mintCost",
"outputs": [
{
"internalType": "uint256",
"name": "",
"type": "uint256"
}
],
"stateMutability": "view",
"type": "function"
},
{
"inputs": [],
"name": "name",
"outputs": [
{
"internalType": "string",
"name": "",
"type": "string"
}
],
"stateMutability": "view",
"type": "function"
},
{
"inputs": [],
"name": "owner",
"outputs": [
{
"internalType": "address",
"name": "",
"type": "address"
}
],
"stateMutability": "view",
"type": "function"
},
{
"inputs": [
{
"internalType": "uint256",
"name": "tokenId",
"type": "uint256"
}
],
"name": "ownerOf",
"outputs": [
{
"internalType": "address",
"name": "",
"type": "address"
}
],
"stateMutability": "view",
"type": "function"
},
{
"inputs": [],
"name": "renounceOwnership",
"outputs": [],
"stateMutability": "nonpayable",
"type": "function"
},
{
"inputs": [
{
"internalType": "address",
"name": "from",
"type": "address"
},
{
"internalType": "address",
"name": "to",
"type": "address"
},
{
"internalType": "uint256",
"name": "tokenId",
"type": "uint256"
}
],
"name": "safeTransferFrom",
"outputs": [],
"stateMutability": "nonpayable",
"type": "function"
},
{
"inputs": [
{
"internalType": "address",
"name": "from",
"type": "address"
},
{
"internalType": "address",
"name": "to",
"type": "address"
},
{
"internalType": "uint256",
"name": "tokenId",
"type": "uint256"
},
{
"internalType": "bytes",
"name": "_data",
"type": "bytes"
}
],
"name": "safeTransferFrom",
"outputs": [],
"stateMutability": "nonpayable",
"type": "function"
},
{
"inputs": [
{
"internalType": "address",
"name": "operator",
"type": "address"
},
{
"internalType": "bool",
"name": "approved",
"type": "bool"
}
],
"name": "setApprovalForAll",
"outputs": [],
"stateMutability": "nonpayable",
"type": "function"
},
{
"inputs": [
{
"internalType": "bytes4",
"name": "interfaceId",
"type": "bytes4"
}
],
"name": "supportsInterface",
"outputs": [
{
"internalType": "bool",
"name": "",
"type": "bool"
}
],
"stateMutability": "view",
"type": "function"
},
{
"inputs": [],
"name": "symbol",
"outputs": [
{
"internalType": "string",
"name": "",
"type": "string"
}
],
"stateMutability": "view",
"type": "function"
},
{
"inputs": [
{
"internalType": "uint256",
"name": "tokenId",
"type": "uint256"
}
],
"name": "tokenURI",
"outputs": [
{
"internalType": "string",
"name": "",
"type": "string"
}
],
"stateMutability": "view",
"type": "function"
},
{
"inputs": [
{
"internalType": "address",
"name": "from",
"type": "address"
},
{
"internalType": "address",
"name": "to",
"type": "address"
},
{
"internalType": "uint256",
"name": "tokenId",
"type": "uint256"
}
],
"name": "transferFrom",
"outputs": [],
"stateMutability": "nonpayable",
"type": "function"
},
{
"inputs": [
{
"internalType": "address",
"name": "newOwner",
"type": "address"
}
],
"name": "transferOwnership",
"outputs": [],
"stateMutability": "nonpayable",
"type": "function"
}
]
}
import { Box, Container, Image, Skeleton, Text } from '@chakra-ui/react';
import { ConnectButton } from '@rainbow-me/rainbowkit';
import { motion } from 'framer-motion';
import { useEffect, useState } from 'react';
import { useContractRead } from 'wagmi';
import abiFile from './abiFile.json';
const CONTRACT_ADDRESS = 'ADDRESS_HERE';
function App() {
const contractConfig = {
addressOrName: CONTRACT_ADDRESS,
contractInterface: abiFile.abi,
};
const { data: tokenURI } = useContractRead({
...contractConfig,
functionName: 'commonTokenURI',
});
const [imgURL, setImgURL] = useState('');
useEffect(() => {
(async () => {
if (tokenURI) {
const res = await (await fetch(tokenURI as unknown as string)).json();
setImgURL(res.image);
}
})();
}, [tokenURI]);
return (
<Container paddingY='10'>
<ConnectButton />
<Text marginTop='4'>This is the NFT we will be minting!</Text>
{imgURL ? (
<Box
as={motion.div}
borderColor='gray.200'
borderWidth='1px'
width='fit-content'
marginTop='4'
padding='6'
shadow='md'
rounded='lg'
whileHover={{ scale: 1.05 }}
whileTap={{ scale: 0.95 }}
>
<Image src={imgURL} width='200px' />
</Box>
) : (
<Skeleton marginTop='4' width='250px' height='250px' rounded='lg' />
)}
</Container>
);
}
export default App;
Replace
ADDRESS_HERE
with the contract address of your NFT collection that we took note of from the thirdweb dashboard.
Note: Your NFT image might take a few minutes to load since it will need to be fetched from the IPFS DHT.
import {
Button,
Container,
Text,
Image,
Box,
Link,
Skeleton,
} from '@chakra-ui/react';
import { ConnectButton } from '@rainbow-me/rainbowkit';
import { ethers } from 'ethers';
import { useEffect, useState } from 'react';
import { useAccount, useContractRead, useContractWrite } from 'wagmi';
import abiFile from './abiFile.json';
import { motion } from 'framer-motion';
const CONTRACT_ADDRESS = 'ADDRESS_HERE';
const getOpenSeaURL = (tokenId: string | number) =>
`https://testnets.opensea.io/assets/goerli/${CONTRACT_ADDRESS}/${tokenId}`;
function App() {
const contractConfig = {
addressOrName: CONTRACT_ADDRESS,
contractInterface: abiFile.abi,
};
const { data: tokenURI } = useContractRead({
...contractConfig,
functionName: 'commonTokenURI',
});
const [imgURL, setImgURL] = useState('');
const { writeAsync: mint, error: mintError } = useContractWrite({
...contractConfig,
functionName: 'mint',
});
const [mintLoading, setMintLoading] = useState(false);
const { address } = useAccount();
const isConnected = !!address;
const [mintedTokenId, setMintedTokenId] = useState<number>();
const onMintClick = async () => {
try {
setMintLoading(true);
const tx = await mint({
args: [address, { value: ethers.utils.parseEther('0.001') }],
});
const receipt = await tx.wait();
console.log('TX receipt', receipt);
// @ts-ignore
const mintedTokenId = await receipt.events