All Categories
How to
How to signature mint using the thirdweb v5 SDK

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?
😞
😐
🤩
How to resolve ENS name? How to update NFT metadata for drop contract via thirdweb SDK