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