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",
});

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 { useSignatureDrop } from '@thirdweb-dev/react'

export default function Component() {
const signatureDrop = useSignatureDrop("<YOUR-CONTRACT-ADDRESS>")

// 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

Setting Claim Phases

Configure claim conditions
const presaleStartTime = new Date();
const claimCondition = {
startTime: presaleStartTime, // start the presale now
maxQuantity: 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]);

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");

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..."
});

Minting / Claiming NFTs

Claim unique NFTs to a specific Wallet
const Component = () => {
const {
mutate: claimNft,
isLoading,
error,
} = useClaimNFT(DropContract);

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

return (
<button
disabled={isLoading}
onClick={() => claimNft({ to: "0x...", 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

Viewing NFTs

One NFT

Get a single NFT Metadata
const { contract } = useContract(<ContractAddress>);
const { data: nft, isLoading, error } = useNFT(contract?.nft, <tokenId>);
View in React SDK Documentation

All NFTs

Get All Minted NFTs
const { contract } = useContract(<ContractAddress>);
const { data: nfts, isLoading, error } = useNFTs(contract?.nft, { start: 0, count: 100 });
View in React SDK Documentation

Claimed NFTs

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

Unclaimed NFTs

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

NFTs owned by a specific wallet

Get Owned NFTs
const { contract } = useContract(<ContractAddress>);
const { data: ownedNFTs, isLoading, error } = useOwnedNFTs(contract?.nft, <OwnerWalletAddress>);
View in React SDK Documentation

Balance of a specific wallet

Get NFT Balance
const { contract } = useContract(<ContractAddress>);
const { data: ownerBalance, isLoading, error } = useNFTBalance(contract?.nft, <OwnerWalletAddress>);
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

Transfer a single NFT
const walletAddress = "{{wallet_address}}";
const tokenId = 0;
await contract.nft.transfer(walletAddress, tokenId);

Burning NFTs

Burn a single NFT
const result = await contract.burn(tokenId, amount);