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:

  1. Generating the signature → Backend
  1. 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?
😞
😐
🤩