Skip to main content

Signature Drop

Learn how to interact with your Signature Drop contract in the SDK.

Create a Signature Drop Contract​

const sdk = useSDK();

const contractAddress = await sdk.deployer.deploySignatureDrop({
  name: "My Signature Drop",
  primary_sale_recipient: "your-address",
});
View in React SDK Documentation

Getting the contract in your application​

To start using your Signature Drop contract inside your application, you need to use its contract address. You can get the contract address from the dashboard.

import { useContract } from '@thirdweb-dev/react'

export default function Component() {
  const { contract } = useContract("<YOUR-CONTRACT-ADDRESS>", "signature-drop")

  // Now you can use the Signature drop contract in the rest of the component
}

Lazy Minting Your NFTs​

Create a batch of unique NFTs to be claimed in the future 
// Custom metadata of the NFTs to create
const metadatas = [{
  name: "Cool NFT",
  description: "This is a cool NFT",
  image: fs.readFileSync("path/to/image.png"), // This can be an image url or file
}, {
  name: "Cool NFT",
  description: "This is a cool NFT",
  image: fs.readFileSync("path/to/image.png"),
}];

const results = await contract.createBatch(metadatas); // uploads and creates the NFTs on chain
const firstTokenId = results[0].id; // token id of the first created NFT
const firstNFT = await results[0].data(); // (optional) fetch details of the first created NFT
View in React SDK Documentation

Setting Claim Phases​

Configure claim conditions 
const presaleStartTime = new Date();
const claimCondition = {
    startTime: presaleStartTime, // start the presale now
    maxClaimableSupply: 2, // limit how many mints for this presale
    price: 0.01, // presale price
    snapshot: ['0x...', '0x...'], // limit minting to only certain addresses
};
await contract.claimConditions.set([claimCondition]);
View in React SDK Documentation

Delayed Reveals​

Delayed reveal 
// the real NFTs, these will be encrypted until you reveal them
const realNFTs = [{
  name: "Common NFT #1",
  description: "Common NFT, one of many.",
  image: fs.readFileSync("path/to/image.png"),
}, {
  name: "Super Rare NFT #2",
  description: "You got a Super Rare NFT!",
  image: fs.readFileSync("path/to/image.png"),
}];
// A placeholder NFT that people will get immediately in their wallet, and will be converted to the real NFT at reveal time
const placeholderNFT = {
  name: "Hidden NFT",
  description: "Will be revealed next week!"
};
// Create and encrypt the NFTs
await contract.revealer.createDelayedRevealBatch(
  placeholderNFT,
  realNFTs,
  "my secret password",
);
// Whenever you're ready, reveal your NFTs at any time
const batchId = 0; // the batch to reveal
await contract.revealer.reveal(batchId, "my secret password");
View in React SDK Documentation

Setting Royalty Fees​

Configure royalties 
// royalties on the whole contract
contract.royalties.setDefaultRoyaltyInfo({
  seller_fee_basis_points: 100, // 1%
  fee_recipient: "0x..."
});
// override royalty for a particular token
contract.royalties.setTokenRoyaltyInfo(tokenId, {
  seller_fee_basis_points: 500, // 5%
  fee_recipient: "0x..."
});
View in React SDK Documentation

Minting / Claiming NFTs​

Claim unique NFTs to a specific Wallet 
const Component = () => {
  const { contract } = useContract("{{contract_address}}");
  const {
    mutate: claimNFT,
    isLoading,
    error,
  } = useClaimNFT(contract);

  if (error) {
    console.error("failed to claim nft", error);
  }

  return (
    <button
      disabled={isLoading}
      onClick={() => claimNFT({ to: "{{wallet_address}}", quantity: 1 })}
    >
      Claim NFT!
    </button>
  );
};
View in React SDK Documentation

Signature Minting​

Signature Minting 
// see how to craft a payload to sign in the `contract.signature.generate()` documentation
const signedPayload = contract.signature.generate(payload);

// now anyone can mint the NFT
const tx = contract.signature.mint(signedPayload);
const receipt = tx.receipt; // the mint transaction receipt
const mintedId = tx.id; // the id of the NFT minted
View in React SDK Documentation

Viewing NFTs​

One NFT​

Get a single NFT 
const tokenId = 0; // the tokenId to look up
const { data: nft, isLoading, error } = useNFT(contract, tokenId);
View in React SDK Documentation

All NFTs​

Get all NFTs 
const { data: nfts, isLoading, error } = useNFTs(contract, { start: 0, count: 100 });
View in React SDK Documentation

Claimed NFTs​

Get All Claimed NFTs 
const { data: claimedNFTs, isLoading, error } = useClaimedNFTs(contract, { start: 0, count: 100 });
View in React SDK Documentation

Unclaimed NFTs​

Get All Unclaimed NFTs 
const { data: unclaimedNfts, isLoading, error } = useUnclaimedNFTs(contract, { start: 0, count: 100 });
View in React SDK Documentation

NFTs owned by a specific wallet​

Get all NFTs owned by a specific wallet 
const { data: ownedNFTs, isLoading, error } = useOwnedNFTs(contract, "{{wallet_address}}");
View in React SDK Documentation

Balance of a specific wallet​

Get NFT Balance 
const { data: ownerBalance, isLoading, error } = useNFTBalance(contract, "{{wallet_address}}");
// for ERC1155 contracts, you can also pass a tokenId
const tokenId = 0;
const { data: ownerBalance, isLoading, error } = useNFTBalance(contract, "{{wallet_address}}", tokenId);
View in React SDK Documentation

Viewing Supply​

Claimed supply​

Get the claimed supply 
const claimedNFTCount = await contract.totalClaimedSupply();
console.log(`NFTs claimed so far: ${claimedNFTCount}`);
View in React SDK Documentation

Unclaimed supply​

Get the unclaimed supply 
const unclaimedNFTCount = await contract.totalUnclaimedSupply();
console.log(`NFTs left to claim: ${unclaimedNFTCount}`);
View in React SDK Documentation

Transferring NFTs​

Burning NFTs​

Burn a single NFT 
const result = await contract.burnToken(tokenId);
View in React SDK Documentation