useDelayedRevealLazyMint

Hook to lazy-mint a batch of NFTs with delayed reveal; allowing the owner to set placeholder metadata and reveal the metadata of the NFTs at a later time.

Available to use on contracts that implement the ERC721Revealable or ERC1155Revealable interfaces.

import { useDelayedRevealLazyMint } from "@thirdweb-dev/react";

Usage

Provide your contract instance from the useContract hook as the argument.

import {
  useDelayedRevealLazyMint,
  useContract,
  Web3Button,
} from "@thirdweb-dev/react";

// Your smart contract address
const contractAddress = "{{contract_address}}";

function App() {
  const { contract } = useContract(contractAddress);
  const {
    mutateAsync: mintNft,
    isLoading,
    error,
  } = useDelayedRevealLazyMint(contract);

  return (
    <Web3Button
      contractAddress={contractAddress}
      action={() =>
        mintNft({
          placeholder: {
            name: "My NFT",
            description: "This is my NFT",
            image: "ipfs://example.com/my-nft.png", // Accepts any URL or File type
          },
          metadatas: [
            {
              name: "My NFT",
              description: "This is my NFT",
              image: "ipfs://example.com/my-nft.png", // Accepts any URL or File type
            },
          ],
          password: "{{password}}", // Password to be used for encryption
        })
      }
    >
      Mint NFTs
    </Web3Button>
  );
}

Configuration

placeholder (required)

The placeholder object represents the metadata the NFTs will have until the owner reveals the metadata.

import {
  useDelayedRevealLazyMint,
  useContract,
  Web3Button,
} from "@thirdweb-dev/react";

// Your smart contract address
const contractAddress = "{{contract_address}}";

function App() {
  const { contract } = useContract(contractAddress);
  const {
    mutateAsync: mintNft,
    isLoading,
    error,
  } = useDelayedRevealLazyMint(contract);

  return (
    <Web3Button
      contractAddress={contractAddress}
      action={() =>
        mintNft({
          placeholder: {
            name: "My NFT",
            description: "This is my NFT",
            image: "ipfs://example.com/my-nft.png", // Accepts any URL or File type
          },
          metadatas: [
            // You can provide up to 1000 metadata objects
            {
              name: "My NFT",
              description: "This is my NFT",
              image: "ipfs://example.com/my-nft.png", // Accepts any URL or File type
            },
          ],
          password: "{{password}}", // Password to be used for encryption
        })
      }
    >
      Lazy Mint NFTs
    </Web3Button>
  );
}

metadatas (required)

An array of metadata objects, representing the metadata of the NFTs to be lazy-minted.

Each metadata object must conform to the standard metadata properties.

import {
  useDelayedRevealLazyMint,
  useContract,
  Web3Button,
} from "@thirdweb-dev/react";

// Your smart contract address
const contractAddress = "{{contract_address}}";

function App() {
  const { contract } = useContract(contractAddress);
  const {
    mutateAsync: mintNft,
    isLoading,
    error,
  } = useDelayedRevealLazyMint(contract);

  return (
    <Web3Button
      contractAddress={contractAddress}
      action={() =>
        mintNft({
          placeholder: {
            name: "My NFT",
            description: "This is my NFT",
            image: "ipfs://example.com/my-nft.png", // Accepts any URL or File type
          },
          metadatas: [
            // You can provide up to 1000 metadata objects
            {
              name: "My NFT",
              description: "This is my NFT",
              image: "ipfs://example.com/my-nft.png", // Accepts any URL or File type
            },
          ],
          password: "{{password}}", // Password to be used for encryption
        })
      }
    >
      Lazy Mint NFTs
    </Web3Button>
  );
}

password (required)

The password used to encrypt the metadatas.

danger

The password CANNOT be recovered once it is set.

If you lose the password, you will not be able to reveal the metadata.

import {
  useDelayedRevealLazyMint,
  useContract,
  Web3Button,
} from "@thirdweb-dev/react";

// Your smart contract address
const contractAddress = "{{contract_address}}";

function App() {
  const { contract } = useContract(contractAddress);
  const {
    mutateAsync: mintNft,
    isLoading,
    error,
  } = useDelayedRevealLazyMint(contract);

  return (
    <Web3Button
      contractAddress={contractAddress}
      action={() =>
        mintNft({
          placeholder: {
            name: "My NFT",
            description: "This is my NFT",
            image: "ipfs://example.com/my-nft.png", // Accepts any URL or File type
          },
          metadatas: [
            // You can provide up to 1000 metadata objects
            {
              name: "My NFT",
              description: "This is my NFT",
              image: "ipfs://example.com/my-nft.png", // Accepts any URL or File type
            },
          ],
          password: "{{password}}", // Password to be used for encryption
        })
      }
    >
      Mint NFTs
    </Web3Button>
  );
}