How to signature mint using the thirdweb v5 SDK
Today, we'll learn how to mint signatures using the new thirdweb Connect SDK.
Signature minting requires two steps:
- Generating the signature → Backend
- Minting using generated signature → Frontend
Generating the signature:
If you don’t have a thirdweb
secretKey
, you can use the following guide to create one via the thirdweb dashboard
This guide is only for our prebuilt NFT Collection & Edition contracts import { createThirdwebClient } from "thirdweb";
import { getContract } from "thirdweb";
import { defineChain } from "thirdweb/chains";
import { privateKeyToAccount } from "thirdweb/wallets";
import { generateMintSignature } from "thirdweb/extensions/erc721";
export async function main(address: any) {
const client = createThirdwebClient({
secretKey: process.env.THIRDWEB_SECRET_KEY,
});
const account = privateKeyToAccount({
client,
privateKey: process.env.PRIVATE_KEY,
});
const contract = getContract({
client,
chain: defineChain(97),
address: "",
});
const { payload, signature } = await generateMintSignature({
account,
contract,
mintRequest: {
to: address,
metadata: {
name: "My NFT",
description: "This is my NFT",
image: "https://example.com/image.png",
},
price: "0.01",
royaltyRecipient: address,
royaltyBps: 0,
primarySaleRecipient: address,
},
});
return {
payload: payload,
signature: signature,
};
}
Minting using generated signature:
import { main } from "./api/get";
import { useActiveAccount, ConnectButton } from "thirdweb/react";
import { mintWithSignature } from "thirdweb/extensions/erc721";
import { defineChain } from "thirdweb/chains";
import { sendAndConfirmTransaction, createThirdwebClient, getContract } from "thirdweb";
export default function Home() {
const wallet = useActiveAccount()?.address;
const account = useActiveAccount();
const client = createThirdwebClient({
clientId: process.env.NEXT_PUBLIC_CLIENT_ID,
});
async function mint() {
let { payload, signature } = await main(wallet);
const contract = getContract({
client,
chain: defineChain(97),
address: "",
});
const transaction = mintWithSignature({
contract,
payload,
signature,
});
await sendAndConfirmTransaction({ transaction, account });
}
return (
<>
<ConnectButton
client={client}
appMetadata={{
name: "Example App",
url: "https://example.com",
}}
/>
<button onClick={mint}>MINT</button>
</>
);
}
Can’t get this working? If you’ve followed the above and still have issues, contact our support team for help.
Did this answer your question?
😞
😐
🤩