Skip to main content

NFT Drop

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

Create an NFT Drop Contract​

const sdk = useSDK();

const contractAddress = await sdk.deployer.deployNFTDrop({
  name: "My Drop",
  primary_sale_recipient: "your-address",
});

Getting the contract in your application​

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

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

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

  // Now you can use the nft 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 publicSaleStartTime = new Date(Date.now() + 60 * 60 * 24 * 1000);
const claimConditions = [
  {
    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
  },
  {
    startTime: publicSaleStartTime, // 24h after presale, start public sale
    price: 0.08, // public sale price
  }
]);
await contract.claimConditions.set(claimConditions);

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

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

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​