Files
js/snippets/feature_snippets_react.json
T

2818 lines
261 KiB
JSON
Raw Blame History

This file contains ambiguous Unicode characters
This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.
{
"": [
{
"name": "shortenAddress",
"summary": "This function shortens an address if it is a valid EVM address.\n\n",
"remarks": "\n\nNote that this function will not check if the address is an ENS.\n\n",
"examples": {
"tyepscript": "const address = shortenIfAddress(\"0x1234567890123456789012345678901234567890\", true); // result will be \"0x1234...890\""
},
"reference": {
"javascript": "https://docs.thirdweb.com/react/react.shortenaddress"
}
},
{
"name": "ThirdwebSDKProvider",
"summary": "The `ThirdwebSDKProvider` is used when you want to provide your own wallet connection logic and just use the thirdweb SDK to interact with smart contracts and the blockchain. This means you can use everything in the SDK except for wallet connection-related components and hooks. if you need those please use the `ThirdwebProvider` instead.\n\n`ThirdwebSDKProvider` allows you to set a provider & signer to the thirdweb SDK.\n\n",
"remarks": null,
"examples": {
"tyepscript": "import { ThirdwebSDKProvider } from \"@thirdweb-dev/react\";\nimport { ethers } from \"ethers\";\n\n// Example shows how to get the signer from the injected provider ( wallet extension )\nfunction Example() {\n return (\n <ThirdwebSDKProvider\n activeChain=\"ethereum\"\n clientId=\"YOUR_CLIENT_ID\"\n signer={new ethers.providers.Web3Provider(window.ethereum).getSigner()}\n >\n <App />\n </ThirdwebSDKProvider>\n )\n}"
},
"reference": {
"javascript": "https://docs.thirdweb.com/react/react.thirdwebsdkprovider"
}
},
{
"name": "useAcceptDirectListingOffer",
"summary": "Hook for accepting an offer from a direct listing on a `Marketplace` contract.\n\nAllows the seller (the user who listed the NFT for sale) to accept an offer on their listing, triggering a sale event, meaning the: - NFT(s) are transferred from the seller to the buyer. - Funds from the offeror are sent to the seller.\n\n",
"remarks": null,
"examples": {
"tyepscript": "import {\n useAcceptDirectListingOffer,\n useContract,\n Web3Button,\n} from \"@thirdweb-dev/react\";\n\nfunction App() {\n const { contract } = useContract(contractAddress, \"marketplace\");\n const {\n mutateAsync: acceptDirectOffer,\n isLoading,\n error,\n } = useAcceptDirectListingOffer(contract);\n\n return (\n <Web3Button\n contractAddress={contractAddress}\n action={() =>\n acceptDirectOffer({\n listingId: \"{{listing_id}}\",\n addressOfOfferor: \"{{offeror_address}}\",\n })\n }\n >\n Accept Offer\n </Web3Button>\n );\n}"
},
"reference": {
"javascript": "https://docs.thirdweb.com/react/react.useacceptdirectlistingoffer"
}
},
{
"name": "useActiveListings",
"summary": "Hook for fetching all active listings from a `Marketplace` contract.\n\n__Note: This hook is only for Marketplace contracts. For Marketplace V3 contracts, use `useValidDirectListings` or `useValidEnglishAuctions` instead__\n\n",
"remarks": null,
"examples": {
"javascript": "import { useActiveListings, useContract } from \"@thirdweb-dev/react\";\n\nfunction App() {\n const { contract } = useContract(contractAddress, \"marketplace\");\n const { data, isLoading, error } = useActiveListings(contract);\n}"
},
"reference": {
"javascript": "https://docs.thirdweb.com/react/react.useactivelistings"
}
},
{
"name": "useAddress",
"summary": "Get the address of the connected wallet.\n\nReturns `undefined` if no wallet is connected.\n\n",
"remarks": null,
"examples": {
"tyepscript": "import { useAddress } from \"@thirdweb-dev/react\"\n\nfunction Example() {\n const address = useAddress()\n\n return <div>{address}</div>\n}"
},
"reference": {
"javascript": "https://docs.thirdweb.com/react/react.useaddress"
}
},
{
"name": "useBalance",
"summary": "Hook for getting a wallet's current balance of native or (optional) ERC20 token balance\n\n",
"remarks": null,
"examples": {
"javascript": "import { useBalance } from \"@thirdweb-dev/react\";\n\nfunction App() {\n const { data, isLoading } = useBalance(tokenAddress);\n}"
},
"reference": {
"javascript": "https://docs.thirdweb.com/react/react.usebalance"
}
},
{
"name": "useBalanceForAddress",
"summary": "This hook is similar to the `useBalance` hook, but it for fetching the native token balance of any given wallet address.\n\nThis hook only fetches the native token balance of the given wallet address. If you want to get the ERC20 balance from a given wallet, use `useTokenBalance`\n\n",
"remarks": null,
"examples": {
"tyepscript": "const { data, isLoading } = useBalanceForAddress(walletAddress)"
},
"reference": {
"javascript": "https://docs.thirdweb.com/react/react.usebalanceforaddress"
}
},
{
"name": "useBuyDirectListing",
"summary": "Hook for buying a direct listing on a [Marketplace V3](https://thirdweb.com/thirdweb.eth/MarketplaceV3) smart contract.\n\nIf the listing is in a currency that is not native to the chain (e.g. not Ether on Ethereum), the hook will prompt the user to approve the marketplace contract to spend the currency on their behalf before performing the buy.\n```jsx\nimport { useBuyDirectListing } from \"@thirdweb-dev/react\";\n\nconst { mutateAsync, isLoading, error } = useBuyDirectListing(contract);\n```\n\n",
"remarks": null,
"examples": {
"javascript": "import {\n useBuyDirectListing,\n useContract,\n Web3Button,\n} from \"@thirdweb-dev/react\";\nimport { ListingType } from \"@thirdweb-dev/sdk\";\n\nfunction App() {\n const { contract } = useContract(contractAddress, \"marketplace-v3\");\n const {\n mutateAsync: buyDirectListing,\n isLoading,\n error,\n } = useBuyDirectListing(contract);\n\n return (\n <Web3Button\n contractAddress={contractAddress}\n action={() =>\n buyDirectListing({\n listingId: \"{{listing_id}}\", // ID of the listing to buy\n quantity: \"1\",\n buyer: \"{{wallet_address}}\", // Wallet to buy for\n })\n }\n >\n Buy Now\n </Web3Button>\n );\n}"
},
"reference": {
"javascript": "https://docs.thirdweb.com/react/react.usebuydirectlisting"
}
},
{
"name": "useBuyNow",
"summary": "Hook for buying a listing on a `Marketplace` smart contract.\n\nIf the listing is in a currency that is not native to the chain (e.g. not Ether on Ethereum), the hook will prompt the user to approve the marketplace contract to spend the currency on their behalf before performing the buy.\n\n__This hook is only for `Marketplace` contracts. Not for `MarketplaceV3`__\n\n",
"remarks": null,
"examples": {
"javascript": "import { useBuyNow, useContract, Web3Button } from \"@thirdweb-dev/react\";\nimport { ListingType } from \"@thirdweb-dev/sdk\";\n\nfunction App() {\n const { contract } = useContract(contractAddress, \"marketplace\");\n const { mutateAsync: buyNow, isLoading, error } = useBuyNow(contract);\n\n return (\n <Web3Button\n contractAddress={contractAddress}\n action={() =>\n buyNow({\n id: \"{{listing_id}}\", // ID of the listing to buy\n type: ListingType.Direct, // Direct (0) or Auction (1)\n buyAmount: \"{{buy_amount}}\", // Amount to buy\n buyForWallet: \"{{wallet_address}}\", // Wallet to buy for, defaults to current wallet\n })\n }\n >\n Buy Now\n </Web3Button>\n );\n}"
},
"reference": {
"javascript": "https://docs.thirdweb.com/react/react.usebuynow"
}
},
{
"name": "useBuyWithCryptoHistory",
"summary": "Hook to get the history of purchases a given wallet has performed.\n\nThis hook is a React Query wrapper of the [`getBuyWithCryptoHistory`](https://portal.thirdweb.com/references/typescript/v4/getBuyWithCryptoHistory) function. You can also use that function directly\n\n",
"remarks": null,
"examples": {
"tyepscript": "import { useBuyWithCryptoHistory } from \"@thirdweb-dev/react\";\n\nfunction Component() {\n const buyWithCryptoHistory = useBuyWithCryptoHistory(params);\n console.log(buyWithCryptoHistory.data);\n return <div> ... </div>;\n}"
},
"reference": {
"javascript": "https://docs.thirdweb.com/react/react.usebuywithcryptohistory"
}
},
{
"name": "useBuyWithCryptoQuote",
"summary": "Hook to get a quote of type [`BuyWithCryptoQuote`](https://portal.thirdweb.com/references/typescript/v4/BuyWithCryptoQuote) for buying tokens with crypto. This quote contains the information about the purchase such as token amounts, processing fees, estimated time etc.\n\nThis hook is a React Query wrapper of the [`getBuyWithCryptoQuote`](https://portal.thirdweb.com/references/typescript/v4/getBuyWithCryptoQuote) function. You can also use that function directly\n\nOnce you have the quote, you can use the [`useBuyWithCryptoStatus`](https://portal.thirdweb.com/references/react/v4/useBuyWithCryptoStatus) function to get the status of the swap transaction.\n\n",
"remarks": null,
"examples": {
"tyepscript": "import { useSigner, useBuyWithCryptoQuote, useBuyWithCryptoStatus } from \"@thirdweb-dev/react\";\n\nfunction Component() {\n const buyWithCryptoQuoteQuery = useBuyWithCryptoQuote* (swapParams);\n const signer = useSigner();\n const [buyTxHash, setBuyTxHash] = useState<string | undefined>();\n const buyWithCryptoStatusQuery = useBuyWithCryptoStatus* (buyTxHash ? {\n clientId: \"YOUR_CLIENT_ID\",\n transactionHash: buyTxHash,\n }: undefined);\n\n async function handleBuyWithCrypto() {\n if (!buyWithCryptoQuoteQuery.data || !signer) {\n return;\n }\n\n // if approval is required\n if (buyWithCryptoQuoteQuery.data.approval) {\n const approveTx = await signer.sendTransaction* (buyWithCryptoQuoteQuery.data.approval);\n await approveTx.wait();\n }\n\n // send the transaction to buy crypto\n // this promise is resolved when user confirms the transaction * in the wallet and the transaction is sent to the blockchain\n const buyTx = await signer.sendTransaction* (buyWithCryptoQuoteQuery.data.transactionRequest);\n await buyTx.wait();\n\n // set buyTx.hash to poll the status of the swap * transaction\n setBuyTxHash(buyTx.hash);\n }\n\n if (buyWithCryptoStatusQuery.data) {\n console.log('buyWithCryptoStatusQuery.data', * buyWithCryptoStatusQuery.data)\n }\n return <button onClick={handleBuyWithCrypto}>Swap</button>\n }"
},
"reference": {
"javascript": "https://docs.thirdweb.com/react/react.usebuywithcryptoquote"
}
},
{
"name": "useBuyWithCryptoStatus",
"summary": "A hook to get a status of Buy with Crypto transaction.\n\nThis hook is a React Query wrapper of the [`getBuyWithCryptoStatus`](https://portal.thirdweb.com/references/typescript/v4/getBuyWithCryptoStatus) function. You can also use that function directly.\n\n",
"remarks": null,
"examples": {
"tyepscript": "import { useSigner, useBuyWithCryptoQuote, useBuyWithCryptoStatus } from \"@thirdweb-dev/react\";\n\nfunction Component() {\n const buyWithCryptoQuoteQuery = useBuyWithCryptoQuote(swapParams);\n const signer = useSigner();\n const [buyTxHash, setBuyTxHash] = useState<string | undefined>();\n const buyWithCryptoStatusQuery = useBuyWithCryptoStatus* (buyTxHash ? {\n clientId: \"YOUR_CLIENT_ID\",\n transactionHash: buyTxHash,\n }: undefined);\n\n async function handleBuyWithCrypto() {\n if (!buyWithCryptoQuoteQuery.data || !signer) {\n return;\n }\n\n // if approval is required\n if (buyWithCryptoQuoteQuery.data.approval) {\n const approveTx = await signer.sendTransaction(buyWithCryptoQuoteQuery.data.approval);\n await approveTx.wait();\n }\n\n // send the transaction to buy crypto\n // this promise is resolved when user confirms the transaction * in the wallet and the transaction is sent to the blockchain\n const buyTx = await signer.sendTransaction(buyWithCryptoQuoteQuery.data.transactionRequest);\n await buyTx.wait();\n\n // set buyTx.transactionHash to poll the status of the swap * transaction\n setBuyTxHash(buyTx.hash);\n }\n\n if (buyWithCryptoStatusQuery.data) {\n console.log('buyWithCryptoStatusQuery.data', * buyWithCryptoStatusQuery.data)\n }\n return <button onClick={handleBuyWithCrypto}>Swap</button>\n }"
},
"reference": {
"javascript": "https://docs.thirdweb.com/react/react.usebuywithcryptostatus"
}
},
{
"name": "useCancelListing",
"summary": "Hook for canceling an existing auction or listing on a `Marketplace` contract.\n\n__Auction listings cannot be canceled if a bid has been placed__\n\n__This hook is only for `Marketplace` contracts.__\n\nFor [Marketplace V3](https://thirdweb.com/thirdweb.eth/MarketplaceV3) contracts, use `useCancelDirectListing` or `useCancelEnglishAuction` instead.\n\n",
"remarks": null,
"examples": {
"javascript": "import { useCancelListing, useContract, Web3Button } from \"@thirdweb-dev/react\";\nimport { ListingType } from \"@thirdweb-dev/sdk\";\n\nfunction App() {\n const { contract } = useContract(contractAddress, \"marketplace\");\n const {\n mutateAsync: cancelListing,\n isLoading,\n error,\n } = useCancelListing(contract);\n\n return (\n <Web3Button\n contractAddress={contractAddress}\n action={() =>\n cancelListing({\n id: \"{{listing_id}}\",\n type: ListingType.Direct, // Direct (0) or Auction (1)\n })\n }\n >\n Cancel Listing\n </Web3Button>\n );\n}"
},
"reference": {
"javascript": "https://docs.thirdweb.com/react/react.usecancellisting"
}
},
{
"name": "useChain",
"summary": "Hook for getting the `Chain` object of the network that the user is connected - but only if it's a supported network (added in the `ThirdwebProvider`'s `supportedChains` or one of default chains\n\nReturns `undefined` if the network is not supported or the user is not connected to a wallet. You can use the `useConnectionStatus` hook to check if the user is connected to a wallet or not to differentiate between the two cases.\n\nIf you only want to get the chain id of the network the user is connected to regardless of whether it's supported or not, use `useChainId` instead.\n```jsx\nimport { useChain } from \"@thirdweb-dev/react\";\n\nconst chain = useChain();\n```\n\n",
"remarks": null,
"examples": {
"javascript": "import { useChain, useConnectionStatus } from \"@thirdweb-dev/react\";\n\nfunction App() {\n const chain = useChain();\n const status = useConnectionStatus();\n\n if (status === \"unknown\") return <div> Loading... </div>;\n if (status === \"disconnected\") return <div> disconnected </div>;\n if (status === \"connecting\") return <div> connecting... </div>;\n\n if (chain) {\n return <p> Connected to {chain.name} </p>;\n }\n\n return <p> Connected to an unsupported network </p>;\n}"
},
"reference": {
"javascript": "https://docs.thirdweb.com/react/react.usechain"
}
},
{
"name": "useChainId",
"summary": "Hook for accessing the chain ID of the network the current wallet is connected to\n```javascript\nimport { useChainId } from \"@thirdweb-dev/react\"\n```\n\n",
"remarks": null,
"examples": {
"javascript": "import { useChainId } from \"@thirdweb-dev/react\"\n\nconst App = () => {\n const chainId = useChainId()\n\n return <div>{chainId}</div>\n}"
},
"reference": {
"javascript": "https://docs.thirdweb.com/react/react.usechainid"
}
},
{
"name": "useCompilerMetadata",
"summary": "Hook for retrieving information such as the ABI, license, and metadata of a smart contract using it's contract address.\n\n",
"remarks": null,
"examples": {
"javascript": "import { useCompilerMetadata } from \"@thirdweb-dev/react\";\n\nfunction App() {\n const { data, isLoading, error } = useCompilerMetadata(contractAddress);\n}\n\nexport default App;"
},
"reference": {
"javascript": "https://docs.thirdweb.com/react/react.usecompilermetadata"
}
},
{
"name": "useConnect",
"summary": "Hook for connecting a wallet to your app.\n\nThe wallet also needs to be added in `ThirdwebProvider`'s `supportedWallets` prop to enable auto-connection on page load.\n\n",
"remarks": null,
"examples": {
"javascript": "import { useConnect, metamaskWallet } from \"@thirdweb-dev/react\";\n\nconst metamaskConfig = metamaskWallet();\n\nfunction App() {\n const connect = useConnect();\n\n return (\n <button\n onClick={async () => {\n const wallet = await connect(metamaskConfig, connectOptions);\n console.log(\"connected to \", wallet);\n }}\n >\n Connect to MetaMask\n </button>\n );\n}"
},
"reference": {
"javascript": "https://docs.thirdweb.com/react/react.useconnect"
}
},
{
"name": "useConnectionStatus",
"summary": "Hook for checking whether your app is connected to a wallet or not.\n\n",
"remarks": null,
"examples": {
"javascript": "import { useConnectionStatus } from \"@thirdweb-dev/react\";\n\nfunction App() {\n const connectionStatus = useConnectionStatus();\n\n if (connectionStatus === \"unknown\") return <p> Loading... </p>;\n if (connectionStatus === \"connecting\") return <p> Connecting... </p>;\n if (connectionStatus === \"connected\") return <p> You are connected </p>;\n if (connectionStatus === \"disconnected\")\n return <p> You are not connected to a wallet </p>;\n}"
},
"reference": {
"javascript": "https://docs.thirdweb.com/react/react.useconnectionstatus"
}
},
{
"name": "useContract",
"summary": "Hook for connecting to a smart contract.\n\nProvide your smart contract address as the first parameter. Once connected, the `contract` will be an instance of your smart contract.\n\nThe ABI of the smart contract is resolved automatically for contracts deployed or imported using the [thirdweb dashboard](https://thirdweb.com/dashboard).\n\n",
"remarks": "\n\nTo cache the ABI of the smart contract, use [thirdweb generate](https://portal.thirdweb.com/cli/generate). This is recommended to improve performance and provide type-safety when interacting with your smart contract.\n\n",
"examples": {
"javascript": "const { contract, isLoading, error } = useContract(contractAddress);"
},
"reference": {
"javascript": "https://docs.thirdweb.com/react/react.usecontract"
}
},
{
"name": "useContract",
"summary": "If your contract is a prebuilt contract, it is strongly recommended you provide the contract's name as the second argument to gain access to improved top-level functions and type inference.\n\nAvailable contract types are: - `\"nft-drop\"` - `\"signature-drop\"` - `\"edition-drop\"` - `\"nft-collection\"` - `\"edition\"` - `\"multiwrap\"` - `\"pack\"` - `\"token-drop\"` - `\"token\"` - `\"marketplace\"` - `\"marketplace-v3\"` - `\"split\"` - `\"vote\"`\n\nWhen a contract type is provided, the contract object will be typed as the contract's class. For example, if you provide the contract type `\"pack\"`, the contract object will be returned typed as an instance of the `Pack` class, unlocking all of the top-level functions specific to the pack.\n\n",
"remarks": null,
"examples": {
"javascript": "const { contract, isLoading, error } = useContract(contractAddress, \"pack\");"
},
"reference": {
"javascript": "https://docs.thirdweb.com/react/react.usecontract"
}
},
{
"name": "useContract",
"summary": "Optionally, (if you don’t want to use the dashboard import feature), you can provide your smart contract’s ABI to the second parameter of the useContract hook. This is useful when developing on a local node, where it may be faster to use the ABI than to import the contract using the dashboard.\n\nThe ABI is only necessary if you have not deployed your contract with, or imported your contract to the [thirdweb dashboard](https://thirdweb.com/dashboard).\n\n",
"remarks": null,
"examples": {
"javascript": "const { contract, isLoading, error } = useContract(contractAddress, contractAbi);"
},
"reference": {
"javascript": "https://docs.thirdweb.com/react/react.usecontract"
}
},
{
"name": "useContractEvents",
"summary": "Hook for reading events emitted by a smart contract, including new events as they are emitted (optional).\n\nBy default, it reads all events emitted by the smart contract.\n\n",
"remarks": null,
"examples": {
"tyepscript": "import { useContractEvents, useContract } from \"@thirdweb-dev/react\";\n\nfunction App() {\n const { contract } = useContract(contractAddress);\n const { data, isLoading, error } = useContractEvents(contract);\n}"
},
"reference": {
"javascript": "https://docs.thirdweb.com/react/react.usecontractevents"
}
},
{
"name": "useContractRead",
"summary": "Generic hook for reading any data from a smart contract via it’s function/view/variable name.\n```javascript\nconst { contract } = useContract(\"{{contract_address}}\");\nconst { data, isLoading, error } = useContractRead(contract, \"functionName\", args);\n```\n\n",
"remarks": "\n\nIf you have cached the ABI of your smart contract using [thirdweb generate](https://portal.thirdweb.com/cli/generate), the functionName and args parameters are strongly typed according to your smart contract’s ABI.\n\n",
"examples": {
"tyepscript": "import { useContractRead, useContract } from \"@thirdweb-dev/react\";\n\nfunction App() {\n const { contract } = useContract(contractAddress);\n const { data, isLoading, error } = useContractRead(contract, \"getName\");\n}"
},
"reference": {
"javascript": "https://docs.thirdweb.com/react/react.usecontractread"
}
},
{
"name": "useContractType",
"summary": "Hook for determining the type of contract for a contract address.\n\nThis is useful if you want to determine if a contract is a [prebuilt contract](https://portal.thirdweb.com/pre-built-contracts).\n\n",
"remarks": null,
"examples": {
"javascript": "import { useContractType } from \"@thirdweb-dev/react\";\n\nfunction App() {\n const { data, isLoading, error } = useContractType(contractAddress);\n}"
},
"reference": {
"javascript": "https://docs.thirdweb.com/react/react.usecontracttype"
}
},
{
"name": "useContractWrite",
"summary": "Generic hook for calling any smart contract function that requires a transaction to take place.\n\nProvide your smart contract instance returned from the `useContract` hook, along with the name of the function you wish to call on your smart contract as arguments to the hook.\n\nThen call the `mutate` or `mutateAsync` function returned by the hook, providing an array of arguments to send to your smart contract function.\n\nIf you provide too many or too few arguments, the `error` property will be populated with an error message.\n\nIf your function has no arguments, provide an empty array by calling the function with `{ args: [] }`\n\n",
"remarks": "\n\nIf you have cached the ABI of your smart contract using [thirdweb generate](https://portal.thirdweb.com/cli/generate), the functionName and args parameters are strongly typed according to your smart contract’s ABI.\n\n",
"examples": {
"javascript": "import { useContractWrite, useContract, Web3Button } from \"@thirdweb-dev/react\";\n\nfunction App() {\n const { contract } = useContract(contractAddress);\n const { mutateAsync, isLoading, error } = useContractWrite(\n contract,\n \"setName\",\n );\n\n return (\n <Web3Button\n contractAddress={contractAddress}\n // Calls the \"setName\" function on your smart contract with \"My Name\" as the first argument\n action={() => mutateAsync({ args: [\"My Name\"] })}\n >\n Send Transaction\n </Web3Button>\n );\n}"
},
"reference": {
"javascript": "https://docs.thirdweb.com/react/react.usecontractwrite"
}
},
{
"name": "useCreateWalletInstance",
"summary": "Hook for creating a wallet instance from given `WalletConfig` object.\n\nIf you just want to connect the wallet and don't need the wallet instance before connecting the wallet, use the `useConnect` hook instead.\n\n",
"remarks": null,
"examples": {
"javascript": "import { useConnect, metamaskWallet } from \"@thirdweb-dev/react\";\n\nconst metamaskConfig = metamaskWallet();\n\nfunction App() {\n const createWalletInstance = useCreateWalletInstance();\n\n return (\n <button\n onClick={() => {\n const metamaskWalletInstance = createWalletInstance(metamaskConfig);\n console.log(metamaskWalletInstance);\n }}\n >\n create wallet instance\n </button>\n );\n}"
},
"reference": {
"javascript": "https://docs.thirdweb.com/react/react.usecreatewalletinstance"
}
},
{
"name": "useDisconnect",
"summary": "Hook for disconnecting the currently connected wallet.\n\n",
"remarks": null,
"examples": {
"javascript": "import { useDisconnect } from \"@thirdweb-dev/react\";\n\nfunction App() {\n const disconnect = useDisconnect();\n\n return <button onClick={disconnect}>Disconnect</button>;\n}"
},
"reference": {
"javascript": "https://docs.thirdweb.com/react/react.usedisconnect"
}
},
{
"name": "useEdition",
"summary": "Hook for getting an instance of an `Edition` contract. This contract is used to interface with ERC1155 compliant NFTs.\n\n",
"remarks": null,
"examples": {
"javascript": "import { useContract } from '@thirdweb-dev/react'\n\nexport default function Component() {\n const { contract } = useContract(\"<YOUR-CONTRACT-ADDRESS>\", \"edition\")\n\n // Now you can use the edition contract in the rest of the component\n\n // For example, this function will return all the NFTs on this contract\n async function getNFTs() {\n const nfts = await contract.getAll()\n return nfts\n }\n\n ...\n}"
},
"reference": {
"javascript": "https://docs.thirdweb.com/react/react.useedition"
}
},
{
"name": "useEditionDrop",
"summary": "Hook for getting an instance of an `EditionDrop` contract. This contract is used to interface with ERC1155 compliant NFTs that can be lazily minted.\n\n",
"remarks": null,
"examples": {
"javascript": "import { useContract } from '@thirdweb-dev/react'\n\nexport default function Component() {\n const { contract } = useContract(\"<YOUR-CONTRACT-ADDRESS>\", \"edition-drop\")\n\n // Now you can use the edition drop contract in the rest of the component\n\n // For example, this function will let the connected wallet claim a new NFT\n async function claim(tokenId, quantity) {\n await contract.claim(tokenId, quantity)\n }\n\n ...\n}"
},
"reference": {
"javascript": "https://docs.thirdweb.com/react/react.useeditiondrop"
}
},
{
"name": "useExecuteAuctionSale",
"summary": "Hook for executing a sale of an auction listing on a `Marketplace` contract.\n\nTriggers a new sale, transferring the NFT(s) to the buyer and the funds to the seller.\n\nA sale must be executed when an auction ends, and the auction has a winning bid that was below the buyout price. This means the auction has finished, and the highest bidder has won the auction. **Any wallet** can now execute the sale, transferring the NFT(s) to the buyer and the funds to the seller.\n\n",
"remarks": null,
"examples": {
"javascript": "import {\n useExecuteAuctionSale,\n useContract,\n Web3Button,\n} from \"@thirdweb-dev/react\";\n\nfunction App() {\n const { contract } = useContract(contractAddress, \"marketplace\");\n const {\n mutateAsync: executeAuctionSale,\n isLoading,\n error,\n } = useExecuteAuctionSale(contract);\n\n return (\n <Web3Button\n contractAddress={contractAddress}\n action={() =>\n executeAuctionSale({\n // The listingId of the auction to execute\n listingId: \"{{listing_id}}\",\n })\n }\n >\n Execute Auction Sale\n </Web3Button>\n );\n}"
},
"reference": {
"javascript": "https://docs.thirdweb.com/react/react.useexecuteauctionsale"
}
},
{
"name": "useListing",
"summary": "Hook for getting a specific listing on a `Marketplace` contract.\n\n__This hook is only available for `Marketplace` contracts__\n\nIf you are using [Marketplace V3](https://thirdweb.com/thirdweb.eth/MarketplaceV3), use `useDirectListing` or `useEnglishAuction` instead.\n\n",
"remarks": null,
"examples": {
"javascript": "import { useContract, useListing } from \"@thirdweb-dev/react\";\n\nconst listingId = 0;\n\nfunction App() {\n const { contract } = useContract(contractAddress, \"marketplace\");\n const { data, isLoading, error } = useListing(contract, listingId);\n}"
},
"reference": {
"javascript": "https://docs.thirdweb.com/react/react.uselisting"
}
},
{
"name": "useListings",
"summary": "Hook for getting all listings (including expired ones) from a `Marketplace` contract.\n\n__This hook is only available for `Marketplace` contracts__\n\nIf you are using [Marketplace V3](https://thirdweb.com/thirdweb.eth/MarketplaceV3), use `useDirectListings` or `useEnglishAuctions` instead.\n\n",
"remarks": null,
"examples": {
"javascript": "import { useContract, useListings } from \"@thirdweb-dev/react\";\n\nfunction App() {\n const { contract } = useContract(contractAddress, \"marketplace\");\n const { data, isLoading, error } = useListings(contract);\n}"
},
"reference": {
"javascript": "https://docs.thirdweb.com/react/react.uselistings"
}
},
{
"name": "useListingsCount",
"summary": "Hook for getting the total number of listings on a `Marketplace` contract.\n\n__This hook is only available for `Marketplace` contracts__\n\nIf you are using [Marketplace V3](https://thirdweb.com/thirdweb.eth/MarketplaceV3), use `useDirectListingsCount` or `useEnglishAuctionsCount` instead.\n\n",
"remarks": null,
"examples": {
"javascript": "import { useContract, useListingsCount } from \"@thirdweb-dev/react\";\n\nfunction App() {\n const { contract } = useContract(contractAddress, \"marketplace\");\n const { data: listingsCount, isLoading, error } = useListingsCount(contract);\n}"
},
"reference": {
"javascript": "https://docs.thirdweb.com/react/react.uselistingscount"
}
},
{
"name": "useLogin",
"summary": "Hook to prompt the user to sign in with their wallet using [auth](https://portal.thirdweb.com/wallets/auth)\n\nRequires the `authConfig` prop to be configured on the `ThirdwebProvider`\n\n",
"remarks": null,
"examples": {
"javascript": "import { useLogin } from \"@thirdweb-dev/react\";\n\nfunction App() {\n const { isLoading, login } = useLogin();\n\n return (\n <button onClick={() => login()}>\n {isLoading ? \"Loading...\" : \"Sign in with Ethereum\"}\n </button>\n );\n}"
},
"reference": {
"javascript": "https://docs.thirdweb.com/react/react.uselogin"
}
},
{
"name": "useLogout",
"summary": "Hook for signing out of a wallet after a user has logged in using `useLogin`\n\n",
"remarks": null,
"examples": {
"javascript": "import { useLogout } from \"@thirdweb-dev/react\";\n\nfunction App() {\n const { logout, isLoading } = useLogout();\n\n return (\n <button onClick={() => logout()}>\n {isLoading ? \"Logging out...\" : \"Logout\"}\n </button>\n );\n}"
},
"reference": {
"javascript": "https://docs.thirdweb.com/react/react.uselogout"
}
},
{
"name": "useMakeBid",
"summary": "Hook for placing a bid on a `Marketplace` auction listing.\n\nBids have several important properties:\n\n- Cannot be canceled once placed. - Are automatically refunded if they are outbid. - Must be higher than the current highest bid by the percentage defined in the bid buffer. - Must be higher than the reserve price (if there is no bid yet).\n\n",
"remarks": null,
"examples": {
"javascript": "import { useMakeBid, useContract, Web3Button } from \"@thirdweb-dev/react\";\n\nfunction App() {\n const { contract } = useContract(contractAddress, \"marketplace\");\n const { mutateAsync: makeBid, isLoading, error } = useMakeBid(contract);\n\n return (\n <Web3Button\n contractAddress={contractAddress}\n action={() =>\n makeBid({\n listingId: \"1\", // ID of the listing to bid on. Must be an auction.\n bid: \"1\", // Uses the currencyContractAddress of the listing.\n })\n }\n >\n Make Bid\n </Web3Button>\n );\n}"
},
"reference": {
"javascript": "https://docs.thirdweb.com/react/react.usemakebid"
}
},
{
"name": "useMakeOffer",
"summary": "Hook for placing an offer on a `Marketplace` direct listing.\n\n",
"remarks": null,
"examples": {
"javascript": "import { useMakeOffer, useContract, Web3Button } from \"@thirdweb-dev/react\";\n\nfunction App() {\n const { contract } = useContract(contractAddress, \"marketplace\");\n const { mutateAsync: makeOffer, isLoading, error } = useMakeOffer(contract);\n\n return (\n <Web3Button\n contractAddress={contractAddress}\n action={() =>\n makeOffer({\n listingId: 1, // ID of the listing to make an offer on\n pricePerToken: 1, // Price per token to offer (in the listing's currency)\n quantity: 1, // Number of NFTs you want to buy (used for ERC1155 NFTs)\n })\n }\n >\n Make Bid\n </Web3Button>\n );\n}"
},
"reference": {
"javascript": "https://docs.thirdweb.com/react/react.usemakeoffer"
}
},
{
"name": "useMarketplace",
"summary": "Hook for getting an instance of a `Marketplace` contract. This contract is used to support marketplace for purchase and sale of on-chain assets.\n\n",
"remarks": null,
"examples": {
"javascript": "import { useContract } from '@thirdweb-dev/react'\n\nexport default function Component() {\n const { contract } = useContract(\"<YOUR-CONTRACT-ADDRESS>\", \"marketplace\")\n\n // Now you can use the marketplace contract in the rest of the component\n\n // For example, this function will return all the listings on the marketplace\n async function getListings() {\n const listings = await contract.getAll()\n return listings\n }\n\n ...\n}"
},
"reference": {
"javascript": "https://docs.thirdweb.com/react/react.usemarketplace"
}
},
{
"name": "useMetadata",
"summary": "Hook for getting the metadata associated with a smart contract.\n\nAvailable to use on contracts that implement the [Contract Metadata](https://portal.thirdweb.com/contracts/build/extensions/general/ContractMetadata) interface.\n\n",
"remarks": null,
"examples": {
"javascript": "import { useContract, useMetadata } from \"@thirdweb-dev/react\";\n\nfunction App() {\n const { contract } = useContract(contractAddress);\n const { data, isLoading, error } = useMetadata(contract);\n}"
},
"reference": {
"javascript": "https://docs.thirdweb.com/react/react.usemetadata"
}
},
{
"name": "useMultiwrap",
"summary": "Hook for getting an instance of an `Multiwrap` contract. This contract is an ERC721 in which you can wrap ERC721, ERC1155 and ERC20 tokens.\n\n",
"remarks": null,
"examples": {
"javascript": "import { useContract } from '@thirdweb-dev/react'\n\nexport default function Component() {\n const { contract } = useContract(\"<YOUR-CONTRACT-ADDRESS>\", \"multiwrap\")\n\n // Now you can use the multiwrap contract in the rest of the component\n\n // For example, this function will let the connected wallet wrap tokens\n async function wrap(tokensToWrap, wrappedNFTMetadata) {\n await contract.wrap(tokensToWrap, wrappedNFTMetadata)\n }\n\n ...\n}"
},
"reference": {
"javascript": "https://docs.thirdweb.com/react/react.usemultiwrap"
}
},
{
"name": "useNetworkMismatch",
"summary": "Hook for checking whether the connected wallet is currently on the correct chain, i.e. the chain specified in the `activeChain` on the `ThirdwebProvider`.\n\n",
"remarks": null,
"examples": {
"javascript": "import { useNetworkMismatch } from \"@thirdweb-dev/react\";\n\nconst App = () => {\n const isMismatched = useNetworkMismatch();\n};"
},
"reference": {
"javascript": "https://docs.thirdweb.com/react/react.usenetworkmismatch"
}
},
{
"name": "useNFTCollection",
"summary": "Hook for getting an instance of an `NFTCollection` contract. This contract is meant to interface with ERC721 compliant NFTs.\n\n",
"remarks": null,
"examples": {
"javascript": "import { useContract } from '@thirdweb-dev/react'\n\nexport default function Component() {\n const { contract, isLoading, error } = useContract(\"<YOUR-CONTRACT-ADDRESS>\", \"nft-collection\")\n\n // Now you can use the nftCollection contract in the rest of the component\n\n // For example, this function will return all the NFTs on this contract\n async function getNFTs() {\n const nfts = await contract.getAll()\n return nfts\n }\n\n ...\n}"
},
"reference": {
"javascript": "https://docs.thirdweb.com/react/react.usenftcollection"
}
},
{
"name": "useNFTDrop",
"summary": "Hook for getting an instance of an `NFTDrop` contract. This contract is meant to interface with ERC721 compliant NFTs that can be lazily minted.\n\n",
"remarks": null,
"examples": {
"javascript": "import { useContract } from '@thirdweb-dev/react'\n\nexport default function Component() {\n const { contract } = useContract(\"<YOUR-CONTRACT-ADDRESS>\", \"nft-drop\")\n\n // Now you can use the nft drop contract in the rest of the component\n\n // For example, this function will let the connected wallet claim a new NFT\n async function claim(quantity) {\n await contract.claim(quantity)\n }\n\n ...\n}"
},
"reference": {
"javascript": "https://docs.thirdweb.com/react/react.usenftdrop"
}
},
{
"name": "useOffers",
"summary": "Hook for getting all of the offers made on a direct listing on a `Marketplace` contract.\n\n",
"remarks": null,
"examples": {
"javascript": "import { useOffers, useContract } from \"@thirdweb-dev/react\";\n\nfunction App() {\n const { contract } = useContract(contractAddress, \"marketplace\");\n const { data: offers, isLoading, error } = useOffers(contract, listingId);\n}"
},
"reference": {
"javascript": "https://docs.thirdweb.com/react/react.useoffers"
}
},
{
"name": "usePack",
"summary": "Hook for getting an instance of a `Pack` contract. This contract supports the creation of on-chain luck-based lootboxes.\n\n",
"remarks": null,
"examples": {
"javascript": "import { useContract } from '@thirdweb-dev/react'\n\nexport default function Component() {\n const { contract } = usePack(\"<YOUR-CONTRACT-ADDRESS>\", \"pack\")\n\n // Now you can use the pack contract in the rest of the component\n\n // For example, this function will get all the packs on this contract\n async function getPacks() {\n const packs = await contract.getAll()\n return packs\n }\n\n ...\n}"
},
"reference": {
"javascript": "https://docs.thirdweb.com/react/react.usepack"
}
},
{
"name": "useSDK",
"summary": "Hook to get the instance of the `ThirdwebSDK` class being used by the `ThirdwebProvider` component.\n\nThis gives access to all of the functionality of the TypeScript SDK in your React app.\n\n- If there is a connected wallet, the SDK is instantiated from the connected wallet’s signer. Meaning all transactions are initiated from the connected wallet. - If there is no connected wallet, the SDK is in read-only mode on the activeChain.\n\n",
"remarks": null,
"examples": {
"tyepscript": "import { useSDK } from \"@thirdweb-dev/react\";\n\nfunction App() {\n const sdk = useSDK();\n\n // Now you use all of the TypeScript SDK functionality\n // For example, deploy a new contract from the connected wallet.\n async function deployContract() {\n sdk?.deployer.deployNFTDrop({\n name: \"My NFT Drop\",\n primary_sale_recipient: \"{{wallet_address}}\",\n });\n }\n}"
},
"reference": {
"javascript": "https://docs.thirdweb.com/react/react.usesdk"
}
},
{
"name": "useSetConnectedWallet",
"summary": "Hook for setting a wallet instance as \"connected\" - once done, the wallet connection hooks like `useWallet`, `useAddress`, `useSigner`, `useConnectionStatus` etc will return the data for that wallet instance\n\nThis is only useful if you are manually connecting a wallet instance as mentioned in [Build your Wallet](https://portal.thirdweb.com/wallet-sdk/v2/build)\n\n",
"remarks": null,
"examples": {
"tyepscript": "import {\n useCreateWalletInstance,\n useSetConnectionStatus,\n useSetConnectedWallet,\n metamaskWallet\n} from \"@thirdweb-dev/react\";\n\nconst walletConfig = metamaskWallet();\n\nfunction Example() {\n const createWalletInstance = useCreateWalletInstance();\n const setConnectionStatus = useSetConnectionStatus();\n const setConnectedWallet = useSetConnectedWallet();\n\n // Call this function to connect your wallet\n const handleConnect = async () => {\n // 1. create instance\n const walletInstance = createWalletInstance(walletConfig);\n setConnectionStatus(\"connecting\");\n\n try {\n // 2. Call `connect` method of your wallet\n await walletInstance.connect(\n connectOptions, // if your wallet.connect method accepts any options, specify it here\n );\n\n // 3. Set connected wallet\n setConnectedWallet(walletInstance);\n props.close();\n } catch (e) {\n setConnectionStatus(\"disconnected\");\n console.error(\"failed to connect\", e);\n }\n };\n\n return <div> ... </div>;\n}"
},
"reference": {
"javascript": "https://docs.thirdweb.com/react/react.usesetconnectedwallet"
}
},
{
"name": "useSetConnectionStatus",
"summary": "Hook for setting the `connectionStatus` of the wallet which is returned by the `useConnectionStatus` hook\n\nThis is only useful if you are manually connecting a wallet instance as mentioned in [Build your Wallet](https://portal.thirdweb.com/wallet-sdk/v2/build)\n\n",
"remarks": null,
"examples": {
"tyepscript": "import {\n useCreateWalletInstance,\n useSetConnectionStatus,\n useSetConnectedWallet,\n metamaskWallet\n} from \"@thirdweb-dev/react\";\n\nconst walletConfig = metamaskWallet();\n\nfunction Example() {\n const createWalletInstance = useCreateWalletInstance();\n const setConnectionStatus = useSetConnectionStatus();\n const setConnectedWallet = useSetConnectedWallet();\n\n // Call this function to connect your wallet\n const handleConnect = async () => {\n // 1. create instance\n const walletInstance = createWalletInstance(walletConfig);\n setConnectionStatus(\"connecting\");\n\n try {\n // 2. Call `connect` method of your wallet\n await walletInstance.connect(\n connectOptions, // if your wallet.connect method accepts any options, specify it here\n );\n\n // 3. Set connected wallet\n setConnectedWallet(walletInstance);\n props.close();\n } catch (e) {\n setConnectionStatus(\"disconnected\");\n console.error(\"failed to connect\", e);\n }\n };\n\n return <div> ... </div>;\n}"
},
"reference": {
"javascript": "https://docs.thirdweb.com/react/react.usesetconnectionstatus"
}
},
{
"name": "useSignatureDrop",
"summary": "Hook for getting an instance of an `SignatureDrop` contract. This contract is meant to interface with ERC721 compliant NFTs that can be lazily minted.\n\n",
"remarks": null,
"examples": {
"javascript": "import { useContract } from '@thirdweb-dev/react'\n\nexport default function Component() {\n const { contract } = useContract(\"<YOUR-CONTRACT-ADDRESS>\", \"signature-drop\")\n\n // Now you can use the Signature drop contract in the rest of the component\n\n // For example, this function will let the connected wallet claim a new NFT\n async function claim(quantity) {\n await contract.claim(quantity)\n }\n\n ...\n}"
},
"reference": {
"javascript": "https://docs.thirdweb.com/react/react.usesignaturedrop"
}
},
{
"name": "useSigner",
"summary": "Hook for getting the [ethers signer](https://docs.ethers.org/v5/api/signer/) of the connected wallet.\n\n",
"remarks": null,
"examples": {
"javascript": "import { useSigner, Web3Button } from \"@thirdweb-dev/react\";\n\nfunction App() {\n const signer = useSigner();\n}"
},
"reference": {
"javascript": "https://docs.thirdweb.com/react/react.usesigner"
}
},
{
"name": "useSplit",
"summary": "Hook for getting an instance of a `Split` contract. This contract supports fund distribution to multiple parties.\n\n",
"remarks": null,
"examples": {
"javascript": "import { useContract } from '@thirdweb-dev/react'\n\nexport default function Component() {\n const { contract } = useContract(\"<YOUR-CONTRACT-ADDRESS>\", \"split\")\n\n // Now you can use the split contract in the rest of the component\n\n // For example, this function will return all the recipients of the split\n async function getRecipients() {\n const recipients = await contract.getAllRecipients()\n return recipients\n }\n\n ...\n}"
},
"reference": {
"javascript": "https://docs.thirdweb.com/react/react.usesplit"
}
},
{
"name": "useStorage",
"summary": "Get the instance of the `ThirdwebStorage` class being used by the `ThirdwebProvider`\n\nAllows you to use the TypeScript SDK functionality of [Storage](https://portal.thirdweb.com/infrastructure/storage/overview) in your React app.\n\n",
"remarks": "\n\n### API Key\n\nYou will require an API key to use thirdweb’s storage services with the SDK. If you haven’t created a key yet you can do so for free from the [**thirdweb dashboard**](https://thirdweb.com/create-api-key).\n\nYou can then obtain a `clientId` from the API key which you will need to pass to the `ThirdwebProvider` component:\n```jsx\nimport { ThirdwebProvider } from \"@thirdweb-dev/react\";\n\nconst App = () => {\n return (\n <ThirdwebProvider clientId=\"YOUR_CLIENT_ID\">\n <YourApp />\n </ThirdwebProvider>\n );\n};\n```\n\nStorage can also be configured using the `storageInterface` prop on `ThirdwebProvider`\n\n",
"examples": {
"javascript": "import { useStorage } from \"@thirdweb-dev/react\";\n\nexport default function Component() {\n const storage = useStorage();\n\n // Now you can use the functionality of the ThirdwebStorage class:\n storage?.download(); // Download a file from IPFS\n storage?.upload(); // Upload a file to IPFS\n}"
},
"reference": {
"javascript": "https://docs.thirdweb.com/react/react.usestorage"
}
},
{
"name": "useStorageUpload",
"summary": "Hook for uploading files to IPFS and retrieving the IPFS URI.\n\n",
"remarks": "\n\n### API key\n\nYou will require an API key to use thirdweb’s storage services with the SDK. If you haven’t created a key yet you can do so for free from the [**thirdweb dashboard**](https://thirdweb.com/create-api-key).\n\nYou can then obtain a `clientId` from the API key which you will need to pass to the [`ThirdwebProvider`](/react/react.thirdwebprovider) component:\n```jsx\nimport { ThirdwebProvider } from \"@thirdweb/react\";\n\nconst App = () => {\n return (\n <ThirdwebProvider clientId=\"YOUR_CLIENT_ID\">\n <YourApp />\n </ThirdwebProvider>\n );\n};\n```\n\n",
"examples": {
"javascript": "import { useStorageUpload } from \"@thirdweb-dev/react\";\n\nexport default function Component() {\n const { mutateAsync: upload, isLoading } = useStorageUpload();\n\n async function uploadData() {\n const filesToUpload = [...];\n const uris = await upload({ data: files });\n console.log(uris);\n }\n\n return (\n <button onClick={uploadData}>\n Upload\n </button>\n )\n}"
},
"reference": {
"javascript": "https://docs.thirdweb.com/react/react.usestorageupload"
}
},
{
"name": "useSwitchAccount",
"summary": "Hook to switch the account of the active wallet\n\n",
"remarks": null,
"examples": {
"tyepscript": "const { switchAccount, isLoading } = useSwitchAccount();\n\nconst handleSwitchAccount = async (address: string) => {\n await switchAccount(address);\n}"
},
"reference": {
"javascript": "https://docs.thirdweb.com/react/react.useswitchaccount"
}
},
{
"name": "useSwitchChain",
"summary": "Hook for switching to a different network.\n\n",
"remarks": null,
"examples": {
"javascript": "import { useSwitchChain } from \"@thirdweb-dev/react\";\nimport { Goerli } from \"@thirdweb-dev/chains\";\n\nfunction App() {\n const switchChain = useSwitchChain();\n return (\n <button onClick={() => switchChain(Goerli.chainId)}>\n Switch to Goerli\n </button>\n );\n}"
},
"reference": {
"javascript": "https://docs.thirdweb.com/react/react.useswitchchain"
}
},
{
"name": "useToken",
"summary": "Hook for getting an instance of a `Token` contract. This contract supports ERC20 compliant tokens.\n\n",
"remarks": null,
"examples": {
"javascript": "import { useContract } from '@thirdweb-dev/react'\n\nexport default function Component() {\n const { contract } = useContract(\"<YOUR-CONTRACT-ADDRESS>\", \"token\")\n\n // Now you can use the token contract in the rest of the component\n\n // For example, this function will get the connected wallets token balance\n async function balance() {\n const balance = await contract.balance()\n return balance\n }\n\n ...\n}"
},
"reference": {
"javascript": "https://docs.thirdweb.com/react/react.usetoken"
}
},
{
"name": "useTokenDrop",
"summary": "Hook for getting an instance of a `Token Drop` contract.\n\n",
"remarks": null,
"examples": {
"javascript": "import { useContract } from '@thirdweb-dev/react'\n\nexport default function Component() {\n const { contract } = useContract(\"<YOUR-CONTRACT-ADDRESS>\", \"token-drop\")\n\n // Now you can use the token drop contract in the rest of the component\n\n // For example, this function will get the connected wallets token balance\n async function balance() {\n const balance = await contract.balance()\n return balance\n }\n\n ...\n}"
},
"reference": {
"javascript": "https://docs.thirdweb.com/react/react.usetokendrop"
}
},
{
"name": "useTransferNativeToken",
"summary": "A hook to transfer native token (of the active chain) to another wallet\n\n",
"remarks": null,
"examples": {
"javascript": "const Component = () => {\n const {\n mutate: transferNativeToken,\n isLoading,\n error,\n } = useTransferNativeToken();\n\n if (error) {\n console.error(\"failed to transfer tokens\", error);\n }\n\n return (\n <button\n disabled={isLoading}\n onClick={() => transferNativeToken({ to: \"{{wallet_address}}\", amount: \"0.1\" })}\n >\n Transfer\n </button>\n );\n};"
},
"reference": {
"javascript": "https://docs.thirdweb.com/react/react.usetransfernativetoken"
}
},
{
"name": "useUpdateMetadata",
"summary": "Hook for updating the metadata of a smart contract.\n\nAvailable to use on smart contracts that implement the `ContractMetadata` interface.\n\nThe wallet initiating this transaction must have the required permissions to update the metadata, (`admin` permissions required by default).\n\nProvide your contract instance from the `useContract` hook as the first argument, and an object fitting the [contract-level metadata standards](https://docs.opensea.io/docs/contract-level-metadata) of the new metadata as the second argument, including:\n\n- `name`: A `string` for the name of the smart contract (required). - `description`: A `string` to describe the smart contract (optional). - `image`: A `string` or `File` object containing the URL or file data of an image to associate with the contract (optional). - `external_link`: A `string` containing a URL to view the smart contract on your website (optional).\n\n",
"remarks": null,
"examples": {
"javascript": "import {\n useUpdateMetadata,\n useContract,\n Web3Button,\n} from \"@thirdweb-dev/react\";\n\nfunction App() {\n const { contract } = useContract(contractAddress);\n const {\n mutateAsync: updateMetadata,\n isLoading,\n error,\n } = useUpdateMetadata(contract);\n\n return (\n <Web3Button\n contractAddress={contractAddress}\n action={() =>\n updateMetadata({\n name: \"My App\",\n description: \"My awesome Ethereum App\",\n image: \"/path/to/image.jpg\", // URL, URI, or File object\n external_link: \"https://myapp.com\",\n })\n }\n >\n Update Metadata\n </Web3Button>\n );\n}"
},
"reference": {
"javascript": "https://docs.thirdweb.com/react/react.useupdatemetadata"
}
},
{
"name": "useVote",
"summary": "Hook for getting an instance of an `Vote` contract. This contract enables fully featured voting-based decentralized governance systems.\n\n",
"remarks": null,
"examples": {
"javascript": "import { useContract } from '@thirdweb-dev/react'\n\nexport default function Component() {\n const { contract } = useContract(\"<YOUR-CONTRACT-ADDRESS>\", \"vote\")\n\n // Now you can use the vote contract in the rest of the component\n\n // For example, this function will get all the proposals on this contract\n async function getProposals() {\n const proposals = await contract.getAll()\n return proposals\n }\n\n ...\n}"
},
"reference": {
"javascript": "https://docs.thirdweb.com/react/react.usevote"
}
},
{
"name": "useWallet",
"summary": "Hook to get the instance of the currently connected wallet.\n\n",
"remarks": null,
"examples": {
"javascript": "import { useWallet } from \"@thirdweb-dev/react\";\n\nfunction App() {\n const walletInstance = useWallet();\n}"
},
"reference": {
"javascript": "https://docs.thirdweb.com/react/react.usewallet"
}
},
{
"name": "useWallet",
"summary": "Hook to get the instance of the currently connected wallet if it matches the given `walletId`.\n\n",
"remarks": null,
"examples": {
"javascript": "import { useWallet } from \"@thirdweb-dev/react\";\n\nfunction App() {\n const metamaskWalletInstance = useWallet('metamask');\n}"
},
"reference": {
"javascript": "https://docs.thirdweb.com/react/react.usewallet"
}
},
{
"name": "useWalletConfig",
"summary": "Hook to get the `WalletConfig` object of the currently connected wallet.\n\nThis is useful to get metadata about the connected wallet, such as the wallet name, logo, etc\n\n",
"remarks": null,
"examples": {
"javascript": "import { useWalletConfig } from \"@thirdweb-dev/react\";\n\nfunction App() {\n const walletConfig = useWalletConfig();\n\n const walletName = walletConfig?.meta.name;\n const walletLogo = walletConfig?.meta.iconURL;\n}"
},
"reference": {
"javascript": "https://docs.thirdweb.com/react/react.usewalletconfig"
}
},
{
"name": "useWatchTransactions",
"summary": "Hook that listens to transactions on a given chain for a given address.\n```javascript\nimport { useWatchTransactions } from \"@thirdweb-dev/react\"\n```\n\n",
"remarks": null,
"examples": {
"javascript": "const transactions = useWatchTransactions({\n address: \"0x1234\",\n network: \"ethereum\",\n});"
},
"reference": {
"javascript": "https://docs.thirdweb.com/react/react.usewatchtransactions"
}
},
{
"name": "useWinningBid",
"summary": "Hook for getting the winning bid of an auction listing on a `Marketplace` contract.\n\n",
"remarks": null,
"examples": {
"javascript": "import { useContract, useWinningBid } from \"@thirdweb-dev/react\";\n\nfunction App() {\n const { contract } = useContract(contractAddress, \"marketplace\");\n const { data, isLoading, error } = useWinningBid(contract, listingId);\n}"
},
"reference": {
"javascript": "https://docs.thirdweb.com/react/react.usewinningbid"
}
}
],
"Account\n\n@smartWallet": [
{
"name": "useAccountAdmins",
"summary": "Get all the admins on a smart wallet account\n\n",
"remarks": null,
"examples": {
"javascript": "const { data: accounts, isLoading, error } = useAccountAdmins(contract);"
},
"reference": {
"javascript": "https://docs.thirdweb.com/react/react.useaccountadmins"
}
},
{
"name": "useAccountSigners",
"summary": "Get all signers of account\n\n",
"remarks": null,
"examples": {
"javascript": "const { data: accounts, isLoading, error } = useAccountSigners(contract);"
},
"reference": {
"javascript": "https://docs.thirdweb.com/react/react.useaccountsigners"
}
},
{
"name": "useAddAdmin",
"summary": "Add an additional admin on the smart wallet account\n\n",
"remarks": null,
"examples": {
"javascript": "import { useAddAdmin } from \"@thirdweb-dev/react\";\n\nconst adminAddress = \"{{admin_address}}\";\n\nconst Component = () => {\n const { mutate: addAdmin, isLoading, error } = useAddAdmin();\n\n if (error) {\n console.error(\"failed to add admin\", error);\n }\n\n return (\n <button disabled={isLoading} onClick={() => addAdmin(adminAddress)}>\n Add admin\n </button>\n );\n};"
},
"reference": {
"javascript": "https://docs.thirdweb.com/react/react.useaddadmin"
}
},
{
"name": "useCreateSessionKey",
"summary": "Create and add a session key for the smart wallet account\n\n",
"remarks": null,
"examples": {
"javascript": " const Component = () => {\n const {\n mutate: createSessionKey,\n isLoading,\n error,\n } = useCreateSessionKey();\n\n if (error) {\n console.error(\"failed to create session key\", error);\n }\n\n return (\n <button\n disabled={isLoading}\n onClick={() => createSessionKey(\n keyAddress,\n {\n approvedCallTargets: [\"0x...\"], // the addresses of contracts that the session key can call\n nativeTokenLimitPerTransaction: 0.1, // the maximum amount of native token (in ETH) that the session key can spend per transaction\n startDate: new Date(), // the date when the session key becomes active\n expirationDate = new Date(Date.now() + 24 * 60 * 60 * 1000); // the date when the session key expires\n }\n )}\n >\n Create Session Key\n </button>\n );\n };"
},
"reference": {
"javascript": "https://docs.thirdweb.com/react/react.usecreatesessionkey"
}
},
{
"name": "useRevokeSessionKey",
"summary": "Revoke a session key (or signer) on the smart wallet account\n\n",
"remarks": null,
"examples": {
"javascript": "import { useRevokeSessionKey } from \"@thirdweb-dev/react\";\n\n// Your ERC20 token smart contract address\nconst keyAddress = \"{{key_address}}\";\n\nconst Component = () => {\n const { mutate: revokeSessionKey, isLoading, error } = useRevokeSessionKey();\n\n if (error) {\n console.error(\"failed to revoke session key\", error);\n }\n\n return (\n <button disabled={isLoading} onClick={() => revokeSessionKey(keyAddress)}>\n Revoke Session Key\n </button>\n );\n};"
},
"reference": {
"javascript": "https://docs.thirdweb.com/react/react.userevokesessionkey"
}
}
],
"AccountFactory\n\n@smartWallet": [
{
"name": "useAccounts",
"summary": "Get all accounts\n\n",
"remarks": null,
"examples": {
"javascript": "const { data: accounts, isLoading, error } = useAccounts(contract);"
},
"reference": {
"javascript": "https://docs.thirdweb.com/react/react.useaccounts"
}
},
{
"name": "useAccountsForAddress",
"summary": "Get all accounts associated with the provided address\n\n",
"remarks": null,
"examples": {
"javascript": "const { data: accountsForAddress, isLoading, error } = useAccountsForAddress(contract, \"{{account_address}}\");"
},
"reference": {
"javascript": "https://docs.thirdweb.com/react/react.useaccountsforaddress"
}
},
{
"name": "useCreateAccount",
"summary": "Create a account in the account factory contract\n\n",
"remarks": null,
"examples": {
"javascript": "const Component = () => {\n const { contract } = useContract(\"{{contract_address}}\");\n const {\n mutate: createAccount,\n isLoading,\n error,\n } = useCreateAccount(contract);\n\n if (error) {\n console.error(\"failed to create account\", error);\n }\n\n return (\n <button\n disabled={isLoading}\n onClick={() => createAccount(\"0x...\")}\n >\n Create Account\n </button>\n );\n};"
},
"reference": {
"javascript": "https://docs.thirdweb.com/react/react.usecreateaccount"
}
},
{
"name": "useIsAccountDeployed",
"summary": "Check if a account has been deployed for the given admin in the account factory contract\n\n",
"remarks": null,
"examples": {
"javascript": "const { data: isAccountDeployed, isLoading, error } = useIsAccountDeployed(contract);"
},
"reference": {
"javascript": "https://docs.thirdweb.com/react/react.useisaccountdeployed"
}
}
],
"ERC20ClaimPhasesV2": [
{
"name": "useActiveClaimCondition",
"summary": "Hook for getting the active claim condition for a given drop contract.\n\nAvailable for contracts that implement the \"ClaimConditions\" interface; such as [NFT Drop](https://thirdweb.com/thirdweb.eth/DropERC721), [Edition Drop](https://thirdweb.com/thirdweb.eth/DropERC1155), and [Token Drop](https://thirdweb.com/thirdweb.eth/DropERC20).\n\n",
"remarks": null,
"examples": {
"javascript": "import { useActiveClaimCondition, useContract } from \"@thirdweb-dev/react\";\n\nfunction App() {\n const { contract } = useContract(contractAddress);\n const { data, isLoading, error } = useActiveClaimCondition(contract);\n}"
},
"reference": {
"javascript": "https://docs.thirdweb.com/react/react.useactiveclaimcondition"
}
},
{
"name": "useActiveClaimConditionForWallet",
"summary": "Hook for getting the active claim condition on a drop contract for a specific wallet address.\n\nEach wallet address can have unique claim conditions at any given time. This hook allows you to get the active claim condition for a specific wallet address at this time.\n\nThis is available for available for contracts that implement the \"ClaimConditions\" interface; such as [NFT Drop](https://thirdweb.com/thirdweb.eth/DropERC721), [Edition Drop](https://thirdweb.com/thirdweb.eth/DropERC1155), and [Token Drop](https://thirdweb.com/thirdweb.eth/DropERC20).\n\n---\n\n- Returns the claim condition specific to the wallet address if found in the claimer snapshot. - Returns the default claim condition on the contract if the address is not found in the claimer snapshot. - Populates the error field if there is no active claim condition on the contract.\n\n",
"remarks": null,
"examples": {
"javascript": "import {\n useActiveClaimConditionForWallet,\n useContract,\n useAddress,\n} from \"@thirdweb-dev/react\";\n\nfunction App() {\n const address = useAddress();\n const { contract } = useContract(contractAddress);\n const { data, isLoading, error } = useActiveClaimConditionForWallet(\n contract,\n address,\n );\n}"
},
"reference": {
"javascript": "https://docs.thirdweb.com/react/react.useactiveclaimconditionforwallet"
}
},
{
"name": "useClaimConditions",
"summary": "Hook for fetching all claim conditions for a given drop contract.\n\nThis is available for available for contracts that implement the \"ClaimConditions\" interface; such as [NFT Drop](https://thirdweb.com/thirdweb.eth/DropERC721), [Edition Drop](https://thirdweb.com/thirdweb.eth/DropERC1155), and [Token Drop](https://thirdweb.com/thirdweb.eth/DropERC20).\n\n",
"remarks": null,
"examples": {
"javascript": "import { useClaimConditions, useContract } from \"@thirdweb-dev/react\";\n\nfunction App() {\n const { contract } = useContract(contractAddress);\n const { data, isLoading, error } = useClaimConditions(contract);\n}"
},
"reference": {
"javascript": "https://docs.thirdweb.com/react/react.useclaimconditions"
}
},
{
"name": "useClaimerProofs",
"summary": "Hook to get the claimer proofs for an address for [ERC20](https://portal.thirdweb.com/contracts/build/base-contracts/erc-20/drop), [ERC721](https://portal.thirdweb.com/contracts/build/base-contracts/erc-721/drop), and [ERC1155](https://portal.thirdweb.com/contracts/build/base-contracts/erc-1155/drop) drop contracts.\n\nA claimer proof is a set of data about a claimer's claim condition, including the claimer's address, the claimer's proof, and the claimer's max claimable amount, price, and currency address.\n\nThis is available for available for contracts that implement the \"ClaimConditions\" interface; such as [NFT Drop](https://thirdweb.com/thirdweb.eth/DropERC721), [Edition Drop](https://thirdweb.com/thirdweb.eth/DropERC1155), and [Token Drop](https://thirdweb.com/thirdweb.eth/DropERC20).\n\n",
"remarks": null,
"examples": {
"javascript": "import { useClaimerProofs, useContract } from \"@thirdweb-dev/react\";\n\nfunction App() {\n const { contract } = useContract(contractAddress);\n\n const {\n data: proof,\n isLoading,\n error,\n } = useClaimerProofs(contract, \"{{claimer_address}}\");\n}"
},
"reference": {
"javascript": "https://docs.thirdweb.com/react/react.useclaimerproofs"
}
},
{
"name": "useClaimIneligibilityReasons",
"summary": "Hook for fetching the reasons a wallet is not eligible to claim tokens from a drop, if any.\n\nThis is available for available for contracts that implement the \"ClaimConditions\" interface; such as [NFT Drop](https://thirdweb.com/thirdweb.eth/DropERC721), [Edition Drop](https://thirdweb.com/thirdweb.eth/DropERC1155), and [Token Drop](https://thirdweb.com/thirdweb.eth/DropERC20).\n\n",
"remarks": null,
"examples": {
"javascript": "import { useClaimIneligibilityReasons, useContract } from \"@thirdweb-dev/react\";\n\nfunction App() {\n const { contract } = useContract(contractAddress);\n const { data, isLoading, error } = useClaimIneligibilityReasons(contract, {\n walletAddress: \"0x123...\", // Use useAddress hook to get the user's wallet address\n quantity: 1, // Quantity to check eligibility for\n });\n}"
},
"reference": {
"javascript": "https://docs.thirdweb.com/react/react.useclaimineligibilityreasons"
}
},
{
"name": "useClaimToken",
"summary": "Hook for claiming a ERC20 tokens from a smart contract.\n\nAvailable to use on smart contracts that implement both the [ERC20](https://portal.thirdweb.com/contracts/build/extensions/erc-20/ERC20) interface and the [`claim`](https://portal.thirdweb.com/contracts/build/extensions/erc-721/ERC721Claimable) function, such as the [Token Drop](https://thirdweb.com/thirdweb.eth/DropERC20).\n\n",
"remarks": null,
"examples": {
"javascript": "import { useClaimToken, useContract, Web3Button } from \"@thirdweb-dev/react\";\n\nfunction App() {\n const { contract } = useContract(contractAddress);\n const { mutateAsync: claimToken, isLoading, error } = useClaimToken(contract);\n\n return (\n <Web3Button\n contractAddress={contractAddress}\n action={() =>\n claimToken({\n to: \"{{wallet_address}}\", // Use useAddress hook to get current wallet address\n amount: 100, // Amount of token to claim\n })\n }\n >\n Claim Token\n </Web3Button>\n );\n}"
},
"reference": {
"javascript": "https://docs.thirdweb.com/react/react.useclaimtoken"
}
},
{
"name": "useResetClaimConditions",
"summary": "Hook for resetting the claim conditions on a drop contract.\n\nAvailable to use on contracts that implement [`ERC721ClaimableWithConditions`](https://portal.thirdweb.com/contracts/build/extensions/erc-721/ERC721ClaimConditions), [`ERC1155ClaimableWithConditions`](https://portal.thirdweb.com/contracts/build/extensions/erc-1155/ERC1155ClaimConditions) or [`ERC20ClaimableWithConditions`](https://portal.thirdweb.com/contracts/build/extensions/erc-20/ERC20ClaimConditions).\n\n",
"remarks": null,
"examples": {
"javascript": "import {\n useContract,\n useResetClaimConditions,\n Web3Button,\n} from \"@thirdweb-dev/react\";\n\nfunction App() {\n // Contract must be a drop contract that implements claim conditions\n const { contract } = useContract(contractAddress);\n const {\n mutateAsync: resetClaimConditions,\n isLoading,\n error,\n } = useResetClaimConditions(contract);\n\n return (\n <Web3Button\n contractAddress={contractAddress}\n action={() => resetClaimConditions()}\n >\n Reset Claim Conditions\n </Web3Button>\n );\n}"
},
"reference": {
"javascript": "https://docs.thirdweb.com/react/react.useresetclaimconditions"
}
},
{
"name": "useSetClaimConditions",
"summary": "Hook for setting claim conditions on a drop contract.\n\nThis is available for available for contracts that implement the \"ClaimConditions\" interface; such as [NFT Drop](https://thirdweb.com/thirdweb.eth/DropERC721), [Edition Drop](https://thirdweb.com/thirdweb.eth/DropERC1155), and [Token Drop](https://thirdweb.com/thirdweb.eth/DropERC20).\n\nWhen using an ERC1155 contract, you must also provide the token ID of the NFT you want to set claim conditions on as the second parameter to the hook.\n\n",
"remarks": null,
"examples": {
"tyepscript": "import {\n useSetClaimConditions,\n useContract,\n Web3Button,\n} from \"@thirdweb-dev/react\";\n\nfunction App() {\n const { contract } = useContract(contractAddress);\n const {\n mutateAsync: setClaimConditions,\n isLoading,\n error,\n } = useSetClaimConditions(contract);\n\n const claimConditions = {\n phases: [\n {\n metadata: {\n name: \"Phase 1\", // The name of the phase\n },\n currencyAddress: \"0x...\", // The address of the currency you want users to pay in\n price: 1, // The price of the token in the currency specified above\n maxClaimablePerWallet: 1, // The maximum number of tokens a wallet can claim\n maxClaimableSupply: 100, // The total number of tokens that can be claimed in this phase\n startTime: new Date(), // When the phase starts (i.e. when users can start claiming tokens)\n waitInSeconds: 60 * 60 * 24 * 7, // The period of time users must wait between repeat claims\n snapshot: [\n {\n address: \"0x...\", // The address of the wallet\n currencyAddress: \"0x...\", // Override the currency address this wallet pays in\n maxClaimable: 5, // Override the maximum number of tokens this wallet can claim\n price: 0.5, // Override the price this wallet pays\n },\n ],\n merkleRootHash: \"0x...\", // The merkle root hash of the snapshot\n },\n ],\n }\n\n return (\n <Web3Button\n contractAddress={contractAddress}\n action={() => setClaimConditions(claimConditions)}\n >\n Set Claim Conditions\n </Web3Button>\n );\n}"
},
"reference": {
"javascript": "https://docs.thirdweb.com/react/react.usesetclaimconditions"
}
}
],
"ERC20ClaimPhasesV1": [
{
"name": "useActiveClaimCondition",
"summary": "Hook for getting the active claim condition for a given drop contract.\n\nAvailable for contracts that implement the \"ClaimConditions\" interface; such as [NFT Drop](https://thirdweb.com/thirdweb.eth/DropERC721), [Edition Drop](https://thirdweb.com/thirdweb.eth/DropERC1155), and [Token Drop](https://thirdweb.com/thirdweb.eth/DropERC20).\n\n",
"remarks": null,
"examples": {
"javascript": "import { useActiveClaimCondition, useContract } from \"@thirdweb-dev/react\";\n\nfunction App() {\n const { contract } = useContract(contractAddress);\n const { data, isLoading, error } = useActiveClaimCondition(contract);\n}"
},
"reference": {
"javascript": "https://docs.thirdweb.com/react/react.useactiveclaimcondition"
}
},
{
"name": "useActiveClaimConditionForWallet",
"summary": "Hook for getting the active claim condition on a drop contract for a specific wallet address.\n\nEach wallet address can have unique claim conditions at any given time. This hook allows you to get the active claim condition for a specific wallet address at this time.\n\nThis is available for available for contracts that implement the \"ClaimConditions\" interface; such as [NFT Drop](https://thirdweb.com/thirdweb.eth/DropERC721), [Edition Drop](https://thirdweb.com/thirdweb.eth/DropERC1155), and [Token Drop](https://thirdweb.com/thirdweb.eth/DropERC20).\n\n---\n\n- Returns the claim condition specific to the wallet address if found in the claimer snapshot. - Returns the default claim condition on the contract if the address is not found in the claimer snapshot. - Populates the error field if there is no active claim condition on the contract.\n\n",
"remarks": null,
"examples": {
"javascript": "import {\n useActiveClaimConditionForWallet,\n useContract,\n useAddress,\n} from \"@thirdweb-dev/react\";\n\nfunction App() {\n const address = useAddress();\n const { contract } = useContract(contractAddress);\n const { data, isLoading, error } = useActiveClaimConditionForWallet(\n contract,\n address,\n );\n}"
},
"reference": {
"javascript": "https://docs.thirdweb.com/react/react.useactiveclaimconditionforwallet"
}
},
{
"name": "useClaimConditions",
"summary": "Hook for fetching all claim conditions for a given drop contract.\n\nThis is available for available for contracts that implement the \"ClaimConditions\" interface; such as [NFT Drop](https://thirdweb.com/thirdweb.eth/DropERC721), [Edition Drop](https://thirdweb.com/thirdweb.eth/DropERC1155), and [Token Drop](https://thirdweb.com/thirdweb.eth/DropERC20).\n\n",
"remarks": null,
"examples": {
"javascript": "import { useClaimConditions, useContract } from \"@thirdweb-dev/react\";\n\nfunction App() {\n const { contract } = useContract(contractAddress);\n const { data, isLoading, error } = useClaimConditions(contract);\n}"
},
"reference": {
"javascript": "https://docs.thirdweb.com/react/react.useclaimconditions"
}
},
{
"name": "useClaimerProofs",
"summary": "Hook to get the claimer proofs for an address for [ERC20](https://portal.thirdweb.com/contracts/build/base-contracts/erc-20/drop), [ERC721](https://portal.thirdweb.com/contracts/build/base-contracts/erc-721/drop), and [ERC1155](https://portal.thirdweb.com/contracts/build/base-contracts/erc-1155/drop) drop contracts.\n\nA claimer proof is a set of data about a claimer's claim condition, including the claimer's address, the claimer's proof, and the claimer's max claimable amount, price, and currency address.\n\nThis is available for available for contracts that implement the \"ClaimConditions\" interface; such as [NFT Drop](https://thirdweb.com/thirdweb.eth/DropERC721), [Edition Drop](https://thirdweb.com/thirdweb.eth/DropERC1155), and [Token Drop](https://thirdweb.com/thirdweb.eth/DropERC20).\n\n",
"remarks": null,
"examples": {
"javascript": "import { useClaimerProofs, useContract } from \"@thirdweb-dev/react\";\n\nfunction App() {\n const { contract } = useContract(contractAddress);\n\n const {\n data: proof,\n isLoading,\n error,\n } = useClaimerProofs(contract, \"{{claimer_address}}\");\n}"
},
"reference": {
"javascript": "https://docs.thirdweb.com/react/react.useclaimerproofs"
}
},
{
"name": "useClaimIneligibilityReasons",
"summary": "Hook for fetching the reasons a wallet is not eligible to claim tokens from a drop, if any.\n\nThis is available for available for contracts that implement the \"ClaimConditions\" interface; such as [NFT Drop](https://thirdweb.com/thirdweb.eth/DropERC721), [Edition Drop](https://thirdweb.com/thirdweb.eth/DropERC1155), and [Token Drop](https://thirdweb.com/thirdweb.eth/DropERC20).\n\n",
"remarks": null,
"examples": {
"javascript": "import { useClaimIneligibilityReasons, useContract } from \"@thirdweb-dev/react\";\n\nfunction App() {\n const { contract } = useContract(contractAddress);\n const { data, isLoading, error } = useClaimIneligibilityReasons(contract, {\n walletAddress: \"0x123...\", // Use useAddress hook to get the user's wallet address\n quantity: 1, // Quantity to check eligibility for\n });\n}"
},
"reference": {
"javascript": "https://docs.thirdweb.com/react/react.useclaimineligibilityreasons"
}
},
{
"name": "useClaimToken",
"summary": "Hook for claiming a ERC20 tokens from a smart contract.\n\nAvailable to use on smart contracts that implement both the [ERC20](https://portal.thirdweb.com/contracts/build/extensions/erc-20/ERC20) interface and the [`claim`](https://portal.thirdweb.com/contracts/build/extensions/erc-721/ERC721Claimable) function, such as the [Token Drop](https://thirdweb.com/thirdweb.eth/DropERC20).\n\n",
"remarks": null,
"examples": {
"javascript": "import { useClaimToken, useContract, Web3Button } from \"@thirdweb-dev/react\";\n\nfunction App() {\n const { contract } = useContract(contractAddress);\n const { mutateAsync: claimToken, isLoading, error } = useClaimToken(contract);\n\n return (\n <Web3Button\n contractAddress={contractAddress}\n action={() =>\n claimToken({\n to: \"{{wallet_address}}\", // Use useAddress hook to get current wallet address\n amount: 100, // Amount of token to claim\n })\n }\n >\n Claim Token\n </Web3Button>\n );\n}"
},
"reference": {
"javascript": "https://docs.thirdweb.com/react/react.useclaimtoken"
}
},
{
"name": "useResetClaimConditions",
"summary": "Hook for resetting the claim conditions on a drop contract.\n\nAvailable to use on contracts that implement [`ERC721ClaimableWithConditions`](https://portal.thirdweb.com/contracts/build/extensions/erc-721/ERC721ClaimConditions), [`ERC1155ClaimableWithConditions`](https://portal.thirdweb.com/contracts/build/extensions/erc-1155/ERC1155ClaimConditions) or [`ERC20ClaimableWithConditions`](https://portal.thirdweb.com/contracts/build/extensions/erc-20/ERC20ClaimConditions).\n\n",
"remarks": null,
"examples": {
"javascript": "import {\n useContract,\n useResetClaimConditions,\n Web3Button,\n} from \"@thirdweb-dev/react\";\n\nfunction App() {\n // Contract must be a drop contract that implements claim conditions\n const { contract } = useContract(contractAddress);\n const {\n mutateAsync: resetClaimConditions,\n isLoading,\n error,\n } = useResetClaimConditions(contract);\n\n return (\n <Web3Button\n contractAddress={contractAddress}\n action={() => resetClaimConditions()}\n >\n Reset Claim Conditions\n </Web3Button>\n );\n}"
},
"reference": {
"javascript": "https://docs.thirdweb.com/react/react.useresetclaimconditions"
}
},
{
"name": "useSetClaimConditions",
"summary": "Hook for setting claim conditions on a drop contract.\n\nThis is available for available for contracts that implement the \"ClaimConditions\" interface; such as [NFT Drop](https://thirdweb.com/thirdweb.eth/DropERC721), [Edition Drop](https://thirdweb.com/thirdweb.eth/DropERC1155), and [Token Drop](https://thirdweb.com/thirdweb.eth/DropERC20).\n\nWhen using an ERC1155 contract, you must also provide the token ID of the NFT you want to set claim conditions on as the second parameter to the hook.\n\n",
"remarks": null,
"examples": {
"tyepscript": "import {\n useSetClaimConditions,\n useContract,\n Web3Button,\n} from \"@thirdweb-dev/react\";\n\nfunction App() {\n const { contract } = useContract(contractAddress);\n const {\n mutateAsync: setClaimConditions,\n isLoading,\n error,\n } = useSetClaimConditions(contract);\n\n const claimConditions = {\n phases: [\n {\n metadata: {\n name: \"Phase 1\", // The name of the phase\n },\n currencyAddress: \"0x...\", // The address of the currency you want users to pay in\n price: 1, // The price of the token in the currency specified above\n maxClaimablePerWallet: 1, // The maximum number of tokens a wallet can claim\n maxClaimableSupply: 100, // The total number of tokens that can be claimed in this phase\n startTime: new Date(), // When the phase starts (i.e. when users can start claiming tokens)\n waitInSeconds: 60 * 60 * 24 * 7, // The period of time users must wait between repeat claims\n snapshot: [\n {\n address: \"0x...\", // The address of the wallet\n currencyAddress: \"0x...\", // Override the currency address this wallet pays in\n maxClaimable: 5, // Override the maximum number of tokens this wallet can claim\n price: 0.5, // Override the price this wallet pays\n },\n ],\n merkleRootHash: \"0x...\", // The merkle root hash of the snapshot\n },\n ],\n }\n\n return (\n <Web3Button\n contractAddress={contractAddress}\n action={() => setClaimConditions(claimConditions)}\n >\n Set Claim Conditions\n </Web3Button>\n );\n}"
},
"reference": {
"javascript": "https://docs.thirdweb.com/react/react.usesetclaimconditions"
}
}
],
"ERC20ClaimConditionsV2": [
{
"name": "useActiveClaimCondition",
"summary": "Hook for getting the active claim condition for a given drop contract.\n\nAvailable for contracts that implement the \"ClaimConditions\" interface; such as [NFT Drop](https://thirdweb.com/thirdweb.eth/DropERC721), [Edition Drop](https://thirdweb.com/thirdweb.eth/DropERC1155), and [Token Drop](https://thirdweb.com/thirdweb.eth/DropERC20).\n\n",
"remarks": null,
"examples": {
"javascript": "import { useActiveClaimCondition, useContract } from \"@thirdweb-dev/react\";\n\nfunction App() {\n const { contract } = useContract(contractAddress);\n const { data, isLoading, error } = useActiveClaimCondition(contract);\n}"
},
"reference": {
"javascript": "https://docs.thirdweb.com/react/react.useactiveclaimcondition"
}
},
{
"name": "useActiveClaimConditionForWallet",
"summary": "Hook for getting the active claim condition on a drop contract for a specific wallet address.\n\nEach wallet address can have unique claim conditions at any given time. This hook allows you to get the active claim condition for a specific wallet address at this time.\n\nThis is available for available for contracts that implement the \"ClaimConditions\" interface; such as [NFT Drop](https://thirdweb.com/thirdweb.eth/DropERC721), [Edition Drop](https://thirdweb.com/thirdweb.eth/DropERC1155), and [Token Drop](https://thirdweb.com/thirdweb.eth/DropERC20).\n\n---\n\n- Returns the claim condition specific to the wallet address if found in the claimer snapshot. - Returns the default claim condition on the contract if the address is not found in the claimer snapshot. - Populates the error field if there is no active claim condition on the contract.\n\n",
"remarks": null,
"examples": {
"javascript": "import {\n useActiveClaimConditionForWallet,\n useContract,\n useAddress,\n} from \"@thirdweb-dev/react\";\n\nfunction App() {\n const address = useAddress();\n const { contract } = useContract(contractAddress);\n const { data, isLoading, error } = useActiveClaimConditionForWallet(\n contract,\n address,\n );\n}"
},
"reference": {
"javascript": "https://docs.thirdweb.com/react/react.useactiveclaimconditionforwallet"
}
},
{
"name": "useClaimConditions",
"summary": "Hook for fetching all claim conditions for a given drop contract.\n\nThis is available for available for contracts that implement the \"ClaimConditions\" interface; such as [NFT Drop](https://thirdweb.com/thirdweb.eth/DropERC721), [Edition Drop](https://thirdweb.com/thirdweb.eth/DropERC1155), and [Token Drop](https://thirdweb.com/thirdweb.eth/DropERC20).\n\n",
"remarks": null,
"examples": {
"javascript": "import { useClaimConditions, useContract } from \"@thirdweb-dev/react\";\n\nfunction App() {\n const { contract } = useContract(contractAddress);\n const { data, isLoading, error } = useClaimConditions(contract);\n}"
},
"reference": {
"javascript": "https://docs.thirdweb.com/react/react.useclaimconditions"
}
},
{
"name": "useClaimerProofs",
"summary": "Hook to get the claimer proofs for an address for [ERC20](https://portal.thirdweb.com/contracts/build/base-contracts/erc-20/drop), [ERC721](https://portal.thirdweb.com/contracts/build/base-contracts/erc-721/drop), and [ERC1155](https://portal.thirdweb.com/contracts/build/base-contracts/erc-1155/drop) drop contracts.\n\nA claimer proof is a set of data about a claimer's claim condition, including the claimer's address, the claimer's proof, and the claimer's max claimable amount, price, and currency address.\n\nThis is available for available for contracts that implement the \"ClaimConditions\" interface; such as [NFT Drop](https://thirdweb.com/thirdweb.eth/DropERC721), [Edition Drop](https://thirdweb.com/thirdweb.eth/DropERC1155), and [Token Drop](https://thirdweb.com/thirdweb.eth/DropERC20).\n\n",
"remarks": null,
"examples": {
"javascript": "import { useClaimerProofs, useContract } from \"@thirdweb-dev/react\";\n\nfunction App() {\n const { contract } = useContract(contractAddress);\n\n const {\n data: proof,\n isLoading,\n error,\n } = useClaimerProofs(contract, \"{{claimer_address}}\");\n}"
},
"reference": {
"javascript": "https://docs.thirdweb.com/react/react.useclaimerproofs"
}
},
{
"name": "useClaimIneligibilityReasons",
"summary": "Hook for fetching the reasons a wallet is not eligible to claim tokens from a drop, if any.\n\nThis is available for available for contracts that implement the \"ClaimConditions\" interface; such as [NFT Drop](https://thirdweb.com/thirdweb.eth/DropERC721), [Edition Drop](https://thirdweb.com/thirdweb.eth/DropERC1155), and [Token Drop](https://thirdweb.com/thirdweb.eth/DropERC20).\n\n",
"remarks": null,
"examples": {
"javascript": "import { useClaimIneligibilityReasons, useContract } from \"@thirdweb-dev/react\";\n\nfunction App() {\n const { contract } = useContract(contractAddress);\n const { data, isLoading, error } = useClaimIneligibilityReasons(contract, {\n walletAddress: \"0x123...\", // Use useAddress hook to get the user's wallet address\n quantity: 1, // Quantity to check eligibility for\n });\n}"
},
"reference": {
"javascript": "https://docs.thirdweb.com/react/react.useclaimineligibilityreasons"
}
},
{
"name": "useClaimToken",
"summary": "Hook for claiming a ERC20 tokens from a smart contract.\n\nAvailable to use on smart contracts that implement both the [ERC20](https://portal.thirdweb.com/contracts/build/extensions/erc-20/ERC20) interface and the [`claim`](https://portal.thirdweb.com/contracts/build/extensions/erc-721/ERC721Claimable) function, such as the [Token Drop](https://thirdweb.com/thirdweb.eth/DropERC20).\n\n",
"remarks": null,
"examples": {
"javascript": "import { useClaimToken, useContract, Web3Button } from \"@thirdweb-dev/react\";\n\nfunction App() {\n const { contract } = useContract(contractAddress);\n const { mutateAsync: claimToken, isLoading, error } = useClaimToken(contract);\n\n return (\n <Web3Button\n contractAddress={contractAddress}\n action={() =>\n claimToken({\n to: \"{{wallet_address}}\", // Use useAddress hook to get current wallet address\n amount: 100, // Amount of token to claim\n })\n }\n >\n Claim Token\n </Web3Button>\n );\n}"
},
"reference": {
"javascript": "https://docs.thirdweb.com/react/react.useclaimtoken"
}
},
{
"name": "useResetClaimConditions",
"summary": "Hook for resetting the claim conditions on a drop contract.\n\nAvailable to use on contracts that implement [`ERC721ClaimableWithConditions`](https://portal.thirdweb.com/contracts/build/extensions/erc-721/ERC721ClaimConditions), [`ERC1155ClaimableWithConditions`](https://portal.thirdweb.com/contracts/build/extensions/erc-1155/ERC1155ClaimConditions) or [`ERC20ClaimableWithConditions`](https://portal.thirdweb.com/contracts/build/extensions/erc-20/ERC20ClaimConditions).\n\n",
"remarks": null,
"examples": {
"javascript": "import {\n useContract,\n useResetClaimConditions,\n Web3Button,\n} from \"@thirdweb-dev/react\";\n\nfunction App() {\n // Contract must be a drop contract that implements claim conditions\n const { contract } = useContract(contractAddress);\n const {\n mutateAsync: resetClaimConditions,\n isLoading,\n error,\n } = useResetClaimConditions(contract);\n\n return (\n <Web3Button\n contractAddress={contractAddress}\n action={() => resetClaimConditions()}\n >\n Reset Claim Conditions\n </Web3Button>\n );\n}"
},
"reference": {
"javascript": "https://docs.thirdweb.com/react/react.useresetclaimconditions"
}
},
{
"name": "useSetClaimConditions",
"summary": "Hook for setting claim conditions on a drop contract.\n\nThis is available for available for contracts that implement the \"ClaimConditions\" interface; such as [NFT Drop](https://thirdweb.com/thirdweb.eth/DropERC721), [Edition Drop](https://thirdweb.com/thirdweb.eth/DropERC1155), and [Token Drop](https://thirdweb.com/thirdweb.eth/DropERC20).\n\nWhen using an ERC1155 contract, you must also provide the token ID of the NFT you want to set claim conditions on as the second parameter to the hook.\n\n",
"remarks": null,
"examples": {
"tyepscript": "import {\n useSetClaimConditions,\n useContract,\n Web3Button,\n} from \"@thirdweb-dev/react\";\n\nfunction App() {\n const { contract } = useContract(contractAddress);\n const {\n mutateAsync: setClaimConditions,\n isLoading,\n error,\n } = useSetClaimConditions(contract);\n\n const claimConditions = {\n phases: [\n {\n metadata: {\n name: \"Phase 1\", // The name of the phase\n },\n currencyAddress: \"0x...\", // The address of the currency you want users to pay in\n price: 1, // The price of the token in the currency specified above\n maxClaimablePerWallet: 1, // The maximum number of tokens a wallet can claim\n maxClaimableSupply: 100, // The total number of tokens that can be claimed in this phase\n startTime: new Date(), // When the phase starts (i.e. when users can start claiming tokens)\n waitInSeconds: 60 * 60 * 24 * 7, // The period of time users must wait between repeat claims\n snapshot: [\n {\n address: \"0x...\", // The address of the wallet\n currencyAddress: \"0x...\", // Override the currency address this wallet pays in\n maxClaimable: 5, // Override the maximum number of tokens this wallet can claim\n price: 0.5, // Override the price this wallet pays\n },\n ],\n merkleRootHash: \"0x...\", // The merkle root hash of the snapshot\n },\n ],\n }\n\n return (\n <Web3Button\n contractAddress={contractAddress}\n action={() => setClaimConditions(claimConditions)}\n >\n Set Claim Conditions\n </Web3Button>\n );\n}"
},
"reference": {
"javascript": "https://docs.thirdweb.com/react/react.usesetclaimconditions"
}
}
],
"ERC20ClaimConditionsV1": [
{
"name": "useActiveClaimCondition",
"summary": "Hook for getting the active claim condition for a given drop contract.\n\nAvailable for contracts that implement the \"ClaimConditions\" interface; such as [NFT Drop](https://thirdweb.com/thirdweb.eth/DropERC721), [Edition Drop](https://thirdweb.com/thirdweb.eth/DropERC1155), and [Token Drop](https://thirdweb.com/thirdweb.eth/DropERC20).\n\n",
"remarks": null,
"examples": {
"javascript": "import { useActiveClaimCondition, useContract } from \"@thirdweb-dev/react\";\n\nfunction App() {\n const { contract } = useContract(contractAddress);\n const { data, isLoading, error } = useActiveClaimCondition(contract);\n}"
},
"reference": {
"javascript": "https://docs.thirdweb.com/react/react.useactiveclaimcondition"
}
},
{
"name": "useActiveClaimConditionForWallet",
"summary": "Hook for getting the active claim condition on a drop contract for a specific wallet address.\n\nEach wallet address can have unique claim conditions at any given time. This hook allows you to get the active claim condition for a specific wallet address at this time.\n\nThis is available for available for contracts that implement the \"ClaimConditions\" interface; such as [NFT Drop](https://thirdweb.com/thirdweb.eth/DropERC721), [Edition Drop](https://thirdweb.com/thirdweb.eth/DropERC1155), and [Token Drop](https://thirdweb.com/thirdweb.eth/DropERC20).\n\n---\n\n- Returns the claim condition specific to the wallet address if found in the claimer snapshot. - Returns the default claim condition on the contract if the address is not found in the claimer snapshot. - Populates the error field if there is no active claim condition on the contract.\n\n",
"remarks": null,
"examples": {
"javascript": "import {\n useActiveClaimConditionForWallet,\n useContract,\n useAddress,\n} from \"@thirdweb-dev/react\";\n\nfunction App() {\n const address = useAddress();\n const { contract } = useContract(contractAddress);\n const { data, isLoading, error } = useActiveClaimConditionForWallet(\n contract,\n address,\n );\n}"
},
"reference": {
"javascript": "https://docs.thirdweb.com/react/react.useactiveclaimconditionforwallet"
}
},
{
"name": "useClaimConditions",
"summary": "Hook for fetching all claim conditions for a given drop contract.\n\nThis is available for available for contracts that implement the \"ClaimConditions\" interface; such as [NFT Drop](https://thirdweb.com/thirdweb.eth/DropERC721), [Edition Drop](https://thirdweb.com/thirdweb.eth/DropERC1155), and [Token Drop](https://thirdweb.com/thirdweb.eth/DropERC20).\n\n",
"remarks": null,
"examples": {
"javascript": "import { useClaimConditions, useContract } from \"@thirdweb-dev/react\";\n\nfunction App() {\n const { contract } = useContract(contractAddress);\n const { data, isLoading, error } = useClaimConditions(contract);\n}"
},
"reference": {
"javascript": "https://docs.thirdweb.com/react/react.useclaimconditions"
}
},
{
"name": "useClaimerProofs",
"summary": "Hook to get the claimer proofs for an address for [ERC20](https://portal.thirdweb.com/contracts/build/base-contracts/erc-20/drop), [ERC721](https://portal.thirdweb.com/contracts/build/base-contracts/erc-721/drop), and [ERC1155](https://portal.thirdweb.com/contracts/build/base-contracts/erc-1155/drop) drop contracts.\n\nA claimer proof is a set of data about a claimer's claim condition, including the claimer's address, the claimer's proof, and the claimer's max claimable amount, price, and currency address.\n\nThis is available for available for contracts that implement the \"ClaimConditions\" interface; such as [NFT Drop](https://thirdweb.com/thirdweb.eth/DropERC721), [Edition Drop](https://thirdweb.com/thirdweb.eth/DropERC1155), and [Token Drop](https://thirdweb.com/thirdweb.eth/DropERC20).\n\n",
"remarks": null,
"examples": {
"javascript": "import { useClaimerProofs, useContract } from \"@thirdweb-dev/react\";\n\nfunction App() {\n const { contract } = useContract(contractAddress);\n\n const {\n data: proof,\n isLoading,\n error,\n } = useClaimerProofs(contract, \"{{claimer_address}}\");\n}"
},
"reference": {
"javascript": "https://docs.thirdweb.com/react/react.useclaimerproofs"
}
},
{
"name": "useClaimIneligibilityReasons",
"summary": "Hook for fetching the reasons a wallet is not eligible to claim tokens from a drop, if any.\n\nThis is available for available for contracts that implement the \"ClaimConditions\" interface; such as [NFT Drop](https://thirdweb.com/thirdweb.eth/DropERC721), [Edition Drop](https://thirdweb.com/thirdweb.eth/DropERC1155), and [Token Drop](https://thirdweb.com/thirdweb.eth/DropERC20).\n\n",
"remarks": null,
"examples": {
"javascript": "import { useClaimIneligibilityReasons, useContract } from \"@thirdweb-dev/react\";\n\nfunction App() {\n const { contract } = useContract(contractAddress);\n const { data, isLoading, error } = useClaimIneligibilityReasons(contract, {\n walletAddress: \"0x123...\", // Use useAddress hook to get the user's wallet address\n quantity: 1, // Quantity to check eligibility for\n });\n}"
},
"reference": {
"javascript": "https://docs.thirdweb.com/react/react.useclaimineligibilityreasons"
}
},
{
"name": "useResetClaimConditions",
"summary": "Hook for resetting the claim conditions on a drop contract.\n\nAvailable to use on contracts that implement [`ERC721ClaimableWithConditions`](https://portal.thirdweb.com/contracts/build/extensions/erc-721/ERC721ClaimConditions), [`ERC1155ClaimableWithConditions`](https://portal.thirdweb.com/contracts/build/extensions/erc-1155/ERC1155ClaimConditions) or [`ERC20ClaimableWithConditions`](https://portal.thirdweb.com/contracts/build/extensions/erc-20/ERC20ClaimConditions).\n\n",
"remarks": null,
"examples": {
"javascript": "import {\n useContract,\n useResetClaimConditions,\n Web3Button,\n} from \"@thirdweb-dev/react\";\n\nfunction App() {\n // Contract must be a drop contract that implements claim conditions\n const { contract } = useContract(contractAddress);\n const {\n mutateAsync: resetClaimConditions,\n isLoading,\n error,\n } = useResetClaimConditions(contract);\n\n return (\n <Web3Button\n contractAddress={contractAddress}\n action={() => resetClaimConditions()}\n >\n Reset Claim Conditions\n </Web3Button>\n );\n}"
},
"reference": {
"javascript": "https://docs.thirdweb.com/react/react.useresetclaimconditions"
}
},
{
"name": "useSetClaimConditions",
"summary": "Hook for setting claim conditions on a drop contract.\n\nThis is available for available for contracts that implement the \"ClaimConditions\" interface; such as [NFT Drop](https://thirdweb.com/thirdweb.eth/DropERC721), [Edition Drop](https://thirdweb.com/thirdweb.eth/DropERC1155), and [Token Drop](https://thirdweb.com/thirdweb.eth/DropERC20).\n\nWhen using an ERC1155 contract, you must also provide the token ID of the NFT you want to set claim conditions on as the second parameter to the hook.\n\n",
"remarks": null,
"examples": {
"tyepscript": "import {\n useSetClaimConditions,\n useContract,\n Web3Button,\n} from \"@thirdweb-dev/react\";\n\nfunction App() {\n const { contract } = useContract(contractAddress);\n const {\n mutateAsync: setClaimConditions,\n isLoading,\n error,\n } = useSetClaimConditions(contract);\n\n const claimConditions = {\n phases: [\n {\n metadata: {\n name: \"Phase 1\", // The name of the phase\n },\n currencyAddress: \"0x...\", // The address of the currency you want users to pay in\n price: 1, // The price of the token in the currency specified above\n maxClaimablePerWallet: 1, // The maximum number of tokens a wallet can claim\n maxClaimableSupply: 100, // The total number of tokens that can be claimed in this phase\n startTime: new Date(), // When the phase starts (i.e. when users can start claiming tokens)\n waitInSeconds: 60 * 60 * 24 * 7, // The period of time users must wait between repeat claims\n snapshot: [\n {\n address: \"0x...\", // The address of the wallet\n currencyAddress: \"0x...\", // Override the currency address this wallet pays in\n maxClaimable: 5, // Override the maximum number of tokens this wallet can claim\n price: 0.5, // Override the price this wallet pays\n },\n ],\n merkleRootHash: \"0x...\", // The merkle root hash of the snapshot\n },\n ],\n }\n\n return (\n <Web3Button\n contractAddress={contractAddress}\n action={() => setClaimConditions(claimConditions)}\n >\n Set Claim Conditions\n </Web3Button>\n );\n}"
},
"reference": {
"javascript": "https://docs.thirdweb.com/react/react.usesetclaimconditions"
}
}
],
"ERC721ClaimPhasesV2": [
{
"name": "useActiveClaimCondition",
"summary": "Hook for getting the active claim condition for a given drop contract.\n\nAvailable for contracts that implement the \"ClaimConditions\" interface; such as [NFT Drop](https://thirdweb.com/thirdweb.eth/DropERC721), [Edition Drop](https://thirdweb.com/thirdweb.eth/DropERC1155), and [Token Drop](https://thirdweb.com/thirdweb.eth/DropERC20).\n\n",
"remarks": null,
"examples": {
"javascript": "import { useActiveClaimCondition, useContract } from \"@thirdweb-dev/react\";\n\nfunction App() {\n const { contract } = useContract(contractAddress);\n const { data, isLoading, error } = useActiveClaimCondition(contract);\n}"
},
"reference": {
"javascript": "https://docs.thirdweb.com/react/react.useactiveclaimcondition"
}
},
{
"name": "useActiveClaimConditionForWallet",
"summary": "Hook for getting the active claim condition on a drop contract for a specific wallet address.\n\nEach wallet address can have unique claim conditions at any given time. This hook allows you to get the active claim condition for a specific wallet address at this time.\n\nThis is available for available for contracts that implement the \"ClaimConditions\" interface; such as [NFT Drop](https://thirdweb.com/thirdweb.eth/DropERC721), [Edition Drop](https://thirdweb.com/thirdweb.eth/DropERC1155), and [Token Drop](https://thirdweb.com/thirdweb.eth/DropERC20).\n\n---\n\n- Returns the claim condition specific to the wallet address if found in the claimer snapshot. - Returns the default claim condition on the contract if the address is not found in the claimer snapshot. - Populates the error field if there is no active claim condition on the contract.\n\n",
"remarks": null,
"examples": {
"javascript": "import {\n useActiveClaimConditionForWallet,\n useContract,\n useAddress,\n} from \"@thirdweb-dev/react\";\n\nfunction App() {\n const address = useAddress();\n const { contract } = useContract(contractAddress);\n const { data, isLoading, error } = useActiveClaimConditionForWallet(\n contract,\n address,\n );\n}"
},
"reference": {
"javascript": "https://docs.thirdweb.com/react/react.useactiveclaimconditionforwallet"
}
},
{
"name": "useClaimConditions",
"summary": "Hook for fetching all claim conditions for a given drop contract.\n\nThis is available for available for contracts that implement the \"ClaimConditions\" interface; such as [NFT Drop](https://thirdweb.com/thirdweb.eth/DropERC721), [Edition Drop](https://thirdweb.com/thirdweb.eth/DropERC1155), and [Token Drop](https://thirdweb.com/thirdweb.eth/DropERC20).\n\n",
"remarks": null,
"examples": {
"javascript": "import { useClaimConditions, useContract } from \"@thirdweb-dev/react\";\n\nfunction App() {\n const { contract } = useContract(contractAddress);\n const { data, isLoading, error } = useClaimConditions(contract);\n}"
},
"reference": {
"javascript": "https://docs.thirdweb.com/react/react.useclaimconditions"
}
},
{
"name": "useClaimerProofs",
"summary": "Hook to get the claimer proofs for an address for [ERC20](https://portal.thirdweb.com/contracts/build/base-contracts/erc-20/drop), [ERC721](https://portal.thirdweb.com/contracts/build/base-contracts/erc-721/drop), and [ERC1155](https://portal.thirdweb.com/contracts/build/base-contracts/erc-1155/drop) drop contracts.\n\nA claimer proof is a set of data about a claimer's claim condition, including the claimer's address, the claimer's proof, and the claimer's max claimable amount, price, and currency address.\n\nThis is available for available for contracts that implement the \"ClaimConditions\" interface; such as [NFT Drop](https://thirdweb.com/thirdweb.eth/DropERC721), [Edition Drop](https://thirdweb.com/thirdweb.eth/DropERC1155), and [Token Drop](https://thirdweb.com/thirdweb.eth/DropERC20).\n\n",
"remarks": null,
"examples": {
"javascript": "import { useClaimerProofs, useContract } from \"@thirdweb-dev/react\";\n\nfunction App() {\n const { contract } = useContract(contractAddress);\n\n const {\n data: proof,\n isLoading,\n error,\n } = useClaimerProofs(contract, \"{{claimer_address}}\");\n}"
},
"reference": {
"javascript": "https://docs.thirdweb.com/react/react.useclaimerproofs"
}
},
{
"name": "useClaimIneligibilityReasons",
"summary": "Hook for fetching the reasons a wallet is not eligible to claim tokens from a drop, if any.\n\nThis is available for available for contracts that implement the \"ClaimConditions\" interface; such as [NFT Drop](https://thirdweb.com/thirdweb.eth/DropERC721), [Edition Drop](https://thirdweb.com/thirdweb.eth/DropERC1155), and [Token Drop](https://thirdweb.com/thirdweb.eth/DropERC20).\n\n",
"remarks": null,
"examples": {
"javascript": "import { useClaimIneligibilityReasons, useContract } from \"@thirdweb-dev/react\";\n\nfunction App() {\n const { contract } = useContract(contractAddress);\n const { data, isLoading, error } = useClaimIneligibilityReasons(contract, {\n walletAddress: \"0x123...\", // Use useAddress hook to get the user's wallet address\n quantity: 1, // Quantity to check eligibility for\n });\n}"
},
"reference": {
"javascript": "https://docs.thirdweb.com/react/react.useclaimineligibilityreasons"
}
},
{
"name": "useClaimNFT",
"summary": "Hook for claiming an NFT from a smart contract.\n\nAvailable to use on smart contracts that implement a `Claimable` interface, and follow either the `ERC721`or `ERC1155` standard.\n\n",
"remarks": null,
"examples": {
"javascript": "import { useContract, useClaimNFT, Web3Button } from \"@thirdweb-dev/react\";\n\nfunction App() {\n const { contract } = useContract(contractAddress);\n const { mutateAsync: claimNft, isLoading, error } = useClaimNFT(contract);\n\n return (\n <Web3Button\n contractAddress={contractAddress}\n action={() =>\n claimNft({\n to: \"{{wallet_address}}\", // Use useAddress hook to get current wallet address\n quantity: 1,\n })\n }\n >\n Claim NFT\n </Web3Button>\n );\n}"
},
"reference": {
"javascript": "https://docs.thirdweb.com/react/react.useclaimnft"
}
},
{
"name": "useResetClaimConditions",
"summary": "Hook for resetting the claim conditions on a drop contract.\n\nAvailable to use on contracts that implement [`ERC721ClaimableWithConditions`](https://portal.thirdweb.com/contracts/build/extensions/erc-721/ERC721ClaimConditions), [`ERC1155ClaimableWithConditions`](https://portal.thirdweb.com/contracts/build/extensions/erc-1155/ERC1155ClaimConditions) or [`ERC20ClaimableWithConditions`](https://portal.thirdweb.com/contracts/build/extensions/erc-20/ERC20ClaimConditions).\n\n",
"remarks": null,
"examples": {
"javascript": "import {\n useContract,\n useResetClaimConditions,\n Web3Button,\n} from \"@thirdweb-dev/react\";\n\nfunction App() {\n // Contract must be a drop contract that implements claim conditions\n const { contract } = useContract(contractAddress);\n const {\n mutateAsync: resetClaimConditions,\n isLoading,\n error,\n } = useResetClaimConditions(contract);\n\n return (\n <Web3Button\n contractAddress={contractAddress}\n action={() => resetClaimConditions()}\n >\n Reset Claim Conditions\n </Web3Button>\n );\n}"
},
"reference": {
"javascript": "https://docs.thirdweb.com/react/react.useresetclaimconditions"
}
},
{
"name": "useSetClaimConditions",
"summary": "Hook for setting claim conditions on a drop contract.\n\nThis is available for available for contracts that implement the \"ClaimConditions\" interface; such as [NFT Drop](https://thirdweb.com/thirdweb.eth/DropERC721), [Edition Drop](https://thirdweb.com/thirdweb.eth/DropERC1155), and [Token Drop](https://thirdweb.com/thirdweb.eth/DropERC20).\n\nWhen using an ERC1155 contract, you must also provide the token ID of the NFT you want to set claim conditions on as the second parameter to the hook.\n\n",
"remarks": null,
"examples": {
"tyepscript": "import {\n useSetClaimConditions,\n useContract,\n Web3Button,\n} from \"@thirdweb-dev/react\";\n\nfunction App() {\n const { contract } = useContract(contractAddress);\n const {\n mutateAsync: setClaimConditions,\n isLoading,\n error,\n } = useSetClaimConditions(contract);\n\n const claimConditions = {\n phases: [\n {\n metadata: {\n name: \"Phase 1\", // The name of the phase\n },\n currencyAddress: \"0x...\", // The address of the currency you want users to pay in\n price: 1, // The price of the token in the currency specified above\n maxClaimablePerWallet: 1, // The maximum number of tokens a wallet can claim\n maxClaimableSupply: 100, // The total number of tokens that can be claimed in this phase\n startTime: new Date(), // When the phase starts (i.e. when users can start claiming tokens)\n waitInSeconds: 60 * 60 * 24 * 7, // The period of time users must wait between repeat claims\n snapshot: [\n {\n address: \"0x...\", // The address of the wallet\n currencyAddress: \"0x...\", // Override the currency address this wallet pays in\n maxClaimable: 5, // Override the maximum number of tokens this wallet can claim\n price: 0.5, // Override the price this wallet pays\n },\n ],\n merkleRootHash: \"0x...\", // The merkle root hash of the snapshot\n },\n ],\n }\n\n return (\n <Web3Button\n contractAddress={contractAddress}\n action={() => setClaimConditions(claimConditions)}\n >\n Set Claim Conditions\n </Web3Button>\n );\n}"
},
"reference": {
"javascript": "https://docs.thirdweb.com/react/react.usesetclaimconditions"
}
}
],
"ERC721ClaimPhasesV1": [
{
"name": "useActiveClaimCondition",
"summary": "Hook for getting the active claim condition for a given drop contract.\n\nAvailable for contracts that implement the \"ClaimConditions\" interface; such as [NFT Drop](https://thirdweb.com/thirdweb.eth/DropERC721), [Edition Drop](https://thirdweb.com/thirdweb.eth/DropERC1155), and [Token Drop](https://thirdweb.com/thirdweb.eth/DropERC20).\n\n",
"remarks": null,
"examples": {
"javascript": "import { useActiveClaimCondition, useContract } from \"@thirdweb-dev/react\";\n\nfunction App() {\n const { contract } = useContract(contractAddress);\n const { data, isLoading, error } = useActiveClaimCondition(contract);\n}"
},
"reference": {
"javascript": "https://docs.thirdweb.com/react/react.useactiveclaimcondition"
}
},
{
"name": "useActiveClaimConditionForWallet",
"summary": "Hook for getting the active claim condition on a drop contract for a specific wallet address.\n\nEach wallet address can have unique claim conditions at any given time. This hook allows you to get the active claim condition for a specific wallet address at this time.\n\nThis is available for available for contracts that implement the \"ClaimConditions\" interface; such as [NFT Drop](https://thirdweb.com/thirdweb.eth/DropERC721), [Edition Drop](https://thirdweb.com/thirdweb.eth/DropERC1155), and [Token Drop](https://thirdweb.com/thirdweb.eth/DropERC20).\n\n---\n\n- Returns the claim condition specific to the wallet address if found in the claimer snapshot. - Returns the default claim condition on the contract if the address is not found in the claimer snapshot. - Populates the error field if there is no active claim condition on the contract.\n\n",
"remarks": null,
"examples": {
"javascript": "import {\n useActiveClaimConditionForWallet,\n useContract,\n useAddress,\n} from \"@thirdweb-dev/react\";\n\nfunction App() {\n const address = useAddress();\n const { contract } = useContract(contractAddress);\n const { data, isLoading, error } = useActiveClaimConditionForWallet(\n contract,\n address,\n );\n}"
},
"reference": {
"javascript": "https://docs.thirdweb.com/react/react.useactiveclaimconditionforwallet"
}
},
{
"name": "useClaimConditions",
"summary": "Hook for fetching all claim conditions for a given drop contract.\n\nThis is available for available for contracts that implement the \"ClaimConditions\" interface; such as [NFT Drop](https://thirdweb.com/thirdweb.eth/DropERC721), [Edition Drop](https://thirdweb.com/thirdweb.eth/DropERC1155), and [Token Drop](https://thirdweb.com/thirdweb.eth/DropERC20).\n\n",
"remarks": null,
"examples": {
"javascript": "import { useClaimConditions, useContract } from \"@thirdweb-dev/react\";\n\nfunction App() {\n const { contract } = useContract(contractAddress);\n const { data, isLoading, error } = useClaimConditions(contract);\n}"
},
"reference": {
"javascript": "https://docs.thirdweb.com/react/react.useclaimconditions"
}
},
{
"name": "useClaimerProofs",
"summary": "Hook to get the claimer proofs for an address for [ERC20](https://portal.thirdweb.com/contracts/build/base-contracts/erc-20/drop), [ERC721](https://portal.thirdweb.com/contracts/build/base-contracts/erc-721/drop), and [ERC1155](https://portal.thirdweb.com/contracts/build/base-contracts/erc-1155/drop) drop contracts.\n\nA claimer proof is a set of data about a claimer's claim condition, including the claimer's address, the claimer's proof, and the claimer's max claimable amount, price, and currency address.\n\nThis is available for available for contracts that implement the \"ClaimConditions\" interface; such as [NFT Drop](https://thirdweb.com/thirdweb.eth/DropERC721), [Edition Drop](https://thirdweb.com/thirdweb.eth/DropERC1155), and [Token Drop](https://thirdweb.com/thirdweb.eth/DropERC20).\n\n",
"remarks": null,
"examples": {
"javascript": "import { useClaimerProofs, useContract } from \"@thirdweb-dev/react\";\n\nfunction App() {\n const { contract } = useContract(contractAddress);\n\n const {\n data: proof,\n isLoading,\n error,\n } = useClaimerProofs(contract, \"{{claimer_address}}\");\n}"
},
"reference": {
"javascript": "https://docs.thirdweb.com/react/react.useclaimerproofs"
}
},
{
"name": "useClaimIneligibilityReasons",
"summary": "Hook for fetching the reasons a wallet is not eligible to claim tokens from a drop, if any.\n\nThis is available for available for contracts that implement the \"ClaimConditions\" interface; such as [NFT Drop](https://thirdweb.com/thirdweb.eth/DropERC721), [Edition Drop](https://thirdweb.com/thirdweb.eth/DropERC1155), and [Token Drop](https://thirdweb.com/thirdweb.eth/DropERC20).\n\n",
"remarks": null,
"examples": {
"javascript": "import { useClaimIneligibilityReasons, useContract } from \"@thirdweb-dev/react\";\n\nfunction App() {\n const { contract } = useContract(contractAddress);\n const { data, isLoading, error } = useClaimIneligibilityReasons(contract, {\n walletAddress: \"0x123...\", // Use useAddress hook to get the user's wallet address\n quantity: 1, // Quantity to check eligibility for\n });\n}"
},
"reference": {
"javascript": "https://docs.thirdweb.com/react/react.useclaimineligibilityreasons"
}
},
{
"name": "useClaimNFT",
"summary": "Hook for claiming an NFT from a smart contract.\n\nAvailable to use on smart contracts that implement a `Claimable` interface, and follow either the `ERC721`or `ERC1155` standard.\n\n",
"remarks": null,
"examples": {
"javascript": "import { useContract, useClaimNFT, Web3Button } from \"@thirdweb-dev/react\";\n\nfunction App() {\n const { contract } = useContract(contractAddress);\n const { mutateAsync: claimNft, isLoading, error } = useClaimNFT(contract);\n\n return (\n <Web3Button\n contractAddress={contractAddress}\n action={() =>\n claimNft({\n to: \"{{wallet_address}}\", // Use useAddress hook to get current wallet address\n quantity: 1,\n })\n }\n >\n Claim NFT\n </Web3Button>\n );\n}"
},
"reference": {
"javascript": "https://docs.thirdweb.com/react/react.useclaimnft"
}
},
{
"name": "useResetClaimConditions",
"summary": "Hook for resetting the claim conditions on a drop contract.\n\nAvailable to use on contracts that implement [`ERC721ClaimableWithConditions`](https://portal.thirdweb.com/contracts/build/extensions/erc-721/ERC721ClaimConditions), [`ERC1155ClaimableWithConditions`](https://portal.thirdweb.com/contracts/build/extensions/erc-1155/ERC1155ClaimConditions) or [`ERC20ClaimableWithConditions`](https://portal.thirdweb.com/contracts/build/extensions/erc-20/ERC20ClaimConditions).\n\n",
"remarks": null,
"examples": {
"javascript": "import {\n useContract,\n useResetClaimConditions,\n Web3Button,\n} from \"@thirdweb-dev/react\";\n\nfunction App() {\n // Contract must be a drop contract that implements claim conditions\n const { contract } = useContract(contractAddress);\n const {\n mutateAsync: resetClaimConditions,\n isLoading,\n error,\n } = useResetClaimConditions(contract);\n\n return (\n <Web3Button\n contractAddress={contractAddress}\n action={() => resetClaimConditions()}\n >\n Reset Claim Conditions\n </Web3Button>\n );\n}"
},
"reference": {
"javascript": "https://docs.thirdweb.com/react/react.useresetclaimconditions"
}
},
{
"name": "useSetClaimConditions",
"summary": "Hook for setting claim conditions on a drop contract.\n\nThis is available for available for contracts that implement the \"ClaimConditions\" interface; such as [NFT Drop](https://thirdweb.com/thirdweb.eth/DropERC721), [Edition Drop](https://thirdweb.com/thirdweb.eth/DropERC1155), and [Token Drop](https://thirdweb.com/thirdweb.eth/DropERC20).\n\nWhen using an ERC1155 contract, you must also provide the token ID of the NFT you want to set claim conditions on as the second parameter to the hook.\n\n",
"remarks": null,
"examples": {
"tyepscript": "import {\n useSetClaimConditions,\n useContract,\n Web3Button,\n} from \"@thirdweb-dev/react\";\n\nfunction App() {\n const { contract } = useContract(contractAddress);\n const {\n mutateAsync: setClaimConditions,\n isLoading,\n error,\n } = useSetClaimConditions(contract);\n\n const claimConditions = {\n phases: [\n {\n metadata: {\n name: \"Phase 1\", // The name of the phase\n },\n currencyAddress: \"0x...\", // The address of the currency you want users to pay in\n price: 1, // The price of the token in the currency specified above\n maxClaimablePerWallet: 1, // The maximum number of tokens a wallet can claim\n maxClaimableSupply: 100, // The total number of tokens that can be claimed in this phase\n startTime: new Date(), // When the phase starts (i.e. when users can start claiming tokens)\n waitInSeconds: 60 * 60 * 24 * 7, // The period of time users must wait between repeat claims\n snapshot: [\n {\n address: \"0x...\", // The address of the wallet\n currencyAddress: \"0x...\", // Override the currency address this wallet pays in\n maxClaimable: 5, // Override the maximum number of tokens this wallet can claim\n price: 0.5, // Override the price this wallet pays\n },\n ],\n merkleRootHash: \"0x...\", // The merkle root hash of the snapshot\n },\n ],\n }\n\n return (\n <Web3Button\n contractAddress={contractAddress}\n action={() => setClaimConditions(claimConditions)}\n >\n Set Claim Conditions\n </Web3Button>\n );\n}"
},
"reference": {
"javascript": "https://docs.thirdweb.com/react/react.usesetclaimconditions"
}
}
],
"ERC721ClaimConditionsV2": [
{
"name": "useActiveClaimCondition",
"summary": "Hook for getting the active claim condition for a given drop contract.\n\nAvailable for contracts that implement the \"ClaimConditions\" interface; such as [NFT Drop](https://thirdweb.com/thirdweb.eth/DropERC721), [Edition Drop](https://thirdweb.com/thirdweb.eth/DropERC1155), and [Token Drop](https://thirdweb.com/thirdweb.eth/DropERC20).\n\n",
"remarks": null,
"examples": {
"javascript": "import { useActiveClaimCondition, useContract } from \"@thirdweb-dev/react\";\n\nfunction App() {\n const { contract } = useContract(contractAddress);\n const { data, isLoading, error } = useActiveClaimCondition(contract);\n}"
},
"reference": {
"javascript": "https://docs.thirdweb.com/react/react.useactiveclaimcondition"
}
},
{
"name": "useActiveClaimConditionForWallet",
"summary": "Hook for getting the active claim condition on a drop contract for a specific wallet address.\n\nEach wallet address can have unique claim conditions at any given time. This hook allows you to get the active claim condition for a specific wallet address at this time.\n\nThis is available for available for contracts that implement the \"ClaimConditions\" interface; such as [NFT Drop](https://thirdweb.com/thirdweb.eth/DropERC721), [Edition Drop](https://thirdweb.com/thirdweb.eth/DropERC1155), and [Token Drop](https://thirdweb.com/thirdweb.eth/DropERC20).\n\n---\n\n- Returns the claim condition specific to the wallet address if found in the claimer snapshot. - Returns the default claim condition on the contract if the address is not found in the claimer snapshot. - Populates the error field if there is no active claim condition on the contract.\n\n",
"remarks": null,
"examples": {
"javascript": "import {\n useActiveClaimConditionForWallet,\n useContract,\n useAddress,\n} from \"@thirdweb-dev/react\";\n\nfunction App() {\n const address = useAddress();\n const { contract } = useContract(contractAddress);\n const { data, isLoading, error } = useActiveClaimConditionForWallet(\n contract,\n address,\n );\n}"
},
"reference": {
"javascript": "https://docs.thirdweb.com/react/react.useactiveclaimconditionforwallet"
}
},
{
"name": "useClaimConditions",
"summary": "Hook for fetching all claim conditions for a given drop contract.\n\nThis is available for available for contracts that implement the \"ClaimConditions\" interface; such as [NFT Drop](https://thirdweb.com/thirdweb.eth/DropERC721), [Edition Drop](https://thirdweb.com/thirdweb.eth/DropERC1155), and [Token Drop](https://thirdweb.com/thirdweb.eth/DropERC20).\n\n",
"remarks": null,
"examples": {
"javascript": "import { useClaimConditions, useContract } from \"@thirdweb-dev/react\";\n\nfunction App() {\n const { contract } = useContract(contractAddress);\n const { data, isLoading, error } = useClaimConditions(contract);\n}"
},
"reference": {
"javascript": "https://docs.thirdweb.com/react/react.useclaimconditions"
}
},
{
"name": "useClaimerProofs",
"summary": "Hook to get the claimer proofs for an address for [ERC20](https://portal.thirdweb.com/contracts/build/base-contracts/erc-20/drop), [ERC721](https://portal.thirdweb.com/contracts/build/base-contracts/erc-721/drop), and [ERC1155](https://portal.thirdweb.com/contracts/build/base-contracts/erc-1155/drop) drop contracts.\n\nA claimer proof is a set of data about a claimer's claim condition, including the claimer's address, the claimer's proof, and the claimer's max claimable amount, price, and currency address.\n\nThis is available for available for contracts that implement the \"ClaimConditions\" interface; such as [NFT Drop](https://thirdweb.com/thirdweb.eth/DropERC721), [Edition Drop](https://thirdweb.com/thirdweb.eth/DropERC1155), and [Token Drop](https://thirdweb.com/thirdweb.eth/DropERC20).\n\n",
"remarks": null,
"examples": {
"javascript": "import { useClaimerProofs, useContract } from \"@thirdweb-dev/react\";\n\nfunction App() {\n const { contract } = useContract(contractAddress);\n\n const {\n data: proof,\n isLoading,\n error,\n } = useClaimerProofs(contract, \"{{claimer_address}}\");\n}"
},
"reference": {
"javascript": "https://docs.thirdweb.com/react/react.useclaimerproofs"
}
},
{
"name": "useClaimIneligibilityReasons",
"summary": "Hook for fetching the reasons a wallet is not eligible to claim tokens from a drop, if any.\n\nThis is available for available for contracts that implement the \"ClaimConditions\" interface; such as [NFT Drop](https://thirdweb.com/thirdweb.eth/DropERC721), [Edition Drop](https://thirdweb.com/thirdweb.eth/DropERC1155), and [Token Drop](https://thirdweb.com/thirdweb.eth/DropERC20).\n\n",
"remarks": null,
"examples": {
"javascript": "import { useClaimIneligibilityReasons, useContract } from \"@thirdweb-dev/react\";\n\nfunction App() {\n const { contract } = useContract(contractAddress);\n const { data, isLoading, error } = useClaimIneligibilityReasons(contract, {\n walletAddress: \"0x123...\", // Use useAddress hook to get the user's wallet address\n quantity: 1, // Quantity to check eligibility for\n });\n}"
},
"reference": {
"javascript": "https://docs.thirdweb.com/react/react.useclaimineligibilityreasons"
}
},
{
"name": "useClaimNFT",
"summary": "Hook for claiming an NFT from a smart contract.\n\nAvailable to use on smart contracts that implement a `Claimable` interface, and follow either the `ERC721`or `ERC1155` standard.\n\n",
"remarks": null,
"examples": {
"javascript": "import { useContract, useClaimNFT, Web3Button } from \"@thirdweb-dev/react\";\n\nfunction App() {\n const { contract } = useContract(contractAddress);\n const { mutateAsync: claimNft, isLoading, error } = useClaimNFT(contract);\n\n return (\n <Web3Button\n contractAddress={contractAddress}\n action={() =>\n claimNft({\n to: \"{{wallet_address}}\", // Use useAddress hook to get current wallet address\n quantity: 1,\n })\n }\n >\n Claim NFT\n </Web3Button>\n );\n}"
},
"reference": {
"javascript": "https://docs.thirdweb.com/react/react.useclaimnft"
}
},
{
"name": "useResetClaimConditions",
"summary": "Hook for resetting the claim conditions on a drop contract.\n\nAvailable to use on contracts that implement [`ERC721ClaimableWithConditions`](https://portal.thirdweb.com/contracts/build/extensions/erc-721/ERC721ClaimConditions), [`ERC1155ClaimableWithConditions`](https://portal.thirdweb.com/contracts/build/extensions/erc-1155/ERC1155ClaimConditions) or [`ERC20ClaimableWithConditions`](https://portal.thirdweb.com/contracts/build/extensions/erc-20/ERC20ClaimConditions).\n\n",
"remarks": null,
"examples": {
"javascript": "import {\n useContract,\n useResetClaimConditions,\n Web3Button,\n} from \"@thirdweb-dev/react\";\n\nfunction App() {\n // Contract must be a drop contract that implements claim conditions\n const { contract } = useContract(contractAddress);\n const {\n mutateAsync: resetClaimConditions,\n isLoading,\n error,\n } = useResetClaimConditions(contract);\n\n return (\n <Web3Button\n contractAddress={contractAddress}\n action={() => resetClaimConditions()}\n >\n Reset Claim Conditions\n </Web3Button>\n );\n}"
},
"reference": {
"javascript": "https://docs.thirdweb.com/react/react.useresetclaimconditions"
}
},
{
"name": "useSetClaimConditions",
"summary": "Hook for setting claim conditions on a drop contract.\n\nThis is available for available for contracts that implement the \"ClaimConditions\" interface; such as [NFT Drop](https://thirdweb.com/thirdweb.eth/DropERC721), [Edition Drop](https://thirdweb.com/thirdweb.eth/DropERC1155), and [Token Drop](https://thirdweb.com/thirdweb.eth/DropERC20).\n\nWhen using an ERC1155 contract, you must also provide the token ID of the NFT you want to set claim conditions on as the second parameter to the hook.\n\n",
"remarks": null,
"examples": {
"tyepscript": "import {\n useSetClaimConditions,\n useContract,\n Web3Button,\n} from \"@thirdweb-dev/react\";\n\nfunction App() {\n const { contract } = useContract(contractAddress);\n const {\n mutateAsync: setClaimConditions,\n isLoading,\n error,\n } = useSetClaimConditions(contract);\n\n const claimConditions = {\n phases: [\n {\n metadata: {\n name: \"Phase 1\", // The name of the phase\n },\n currencyAddress: \"0x...\", // The address of the currency you want users to pay in\n price: 1, // The price of the token in the currency specified above\n maxClaimablePerWallet: 1, // The maximum number of tokens a wallet can claim\n maxClaimableSupply: 100, // The total number of tokens that can be claimed in this phase\n startTime: new Date(), // When the phase starts (i.e. when users can start claiming tokens)\n waitInSeconds: 60 * 60 * 24 * 7, // The period of time users must wait between repeat claims\n snapshot: [\n {\n address: \"0x...\", // The address of the wallet\n currencyAddress: \"0x...\", // Override the currency address this wallet pays in\n maxClaimable: 5, // Override the maximum number of tokens this wallet can claim\n price: 0.5, // Override the price this wallet pays\n },\n ],\n merkleRootHash: \"0x...\", // The merkle root hash of the snapshot\n },\n ],\n }\n\n return (\n <Web3Button\n contractAddress={contractAddress}\n action={() => setClaimConditions(claimConditions)}\n >\n Set Claim Conditions\n </Web3Button>\n );\n}"
},
"reference": {
"javascript": "https://docs.thirdweb.com/react/react.usesetclaimconditions"
}
}
],
"ERC721ClaimConditionsV1": [
{
"name": "useActiveClaimCondition",
"summary": "Hook for getting the active claim condition for a given drop contract.\n\nAvailable for contracts that implement the \"ClaimConditions\" interface; such as [NFT Drop](https://thirdweb.com/thirdweb.eth/DropERC721), [Edition Drop](https://thirdweb.com/thirdweb.eth/DropERC1155), and [Token Drop](https://thirdweb.com/thirdweb.eth/DropERC20).\n\n",
"remarks": null,
"examples": {
"javascript": "import { useActiveClaimCondition, useContract } from \"@thirdweb-dev/react\";\n\nfunction App() {\n const { contract } = useContract(contractAddress);\n const { data, isLoading, error } = useActiveClaimCondition(contract);\n}"
},
"reference": {
"javascript": "https://docs.thirdweb.com/react/react.useactiveclaimcondition"
}
},
{
"name": "useActiveClaimConditionForWallet",
"summary": "Hook for getting the active claim condition on a drop contract for a specific wallet address.\n\nEach wallet address can have unique claim conditions at any given time. This hook allows you to get the active claim condition for a specific wallet address at this time.\n\nThis is available for available for contracts that implement the \"ClaimConditions\" interface; such as [NFT Drop](https://thirdweb.com/thirdweb.eth/DropERC721), [Edition Drop](https://thirdweb.com/thirdweb.eth/DropERC1155), and [Token Drop](https://thirdweb.com/thirdweb.eth/DropERC20).\n\n---\n\n- Returns the claim condition specific to the wallet address if found in the claimer snapshot. - Returns the default claim condition on the contract if the address is not found in the claimer snapshot. - Populates the error field if there is no active claim condition on the contract.\n\n",
"remarks": null,
"examples": {
"javascript": "import {\n useActiveClaimConditionForWallet,\n useContract,\n useAddress,\n} from \"@thirdweb-dev/react\";\n\nfunction App() {\n const address = useAddress();\n const { contract } = useContract(contractAddress);\n const { data, isLoading, error } = useActiveClaimConditionForWallet(\n contract,\n address,\n );\n}"
},
"reference": {
"javascript": "https://docs.thirdweb.com/react/react.useactiveclaimconditionforwallet"
}
},
{
"name": "useClaimConditions",
"summary": "Hook for fetching all claim conditions for a given drop contract.\n\nThis is available for available for contracts that implement the \"ClaimConditions\" interface; such as [NFT Drop](https://thirdweb.com/thirdweb.eth/DropERC721), [Edition Drop](https://thirdweb.com/thirdweb.eth/DropERC1155), and [Token Drop](https://thirdweb.com/thirdweb.eth/DropERC20).\n\n",
"remarks": null,
"examples": {
"javascript": "import { useClaimConditions, useContract } from \"@thirdweb-dev/react\";\n\nfunction App() {\n const { contract } = useContract(contractAddress);\n const { data, isLoading, error } = useClaimConditions(contract);\n}"
},
"reference": {
"javascript": "https://docs.thirdweb.com/react/react.useclaimconditions"
}
},
{
"name": "useClaimerProofs",
"summary": "Hook to get the claimer proofs for an address for [ERC20](https://portal.thirdweb.com/contracts/build/base-contracts/erc-20/drop), [ERC721](https://portal.thirdweb.com/contracts/build/base-contracts/erc-721/drop), and [ERC1155](https://portal.thirdweb.com/contracts/build/base-contracts/erc-1155/drop) drop contracts.\n\nA claimer proof is a set of data about a claimer's claim condition, including the claimer's address, the claimer's proof, and the claimer's max claimable amount, price, and currency address.\n\nThis is available for available for contracts that implement the \"ClaimConditions\" interface; such as [NFT Drop](https://thirdweb.com/thirdweb.eth/DropERC721), [Edition Drop](https://thirdweb.com/thirdweb.eth/DropERC1155), and [Token Drop](https://thirdweb.com/thirdweb.eth/DropERC20).\n\n",
"remarks": null,
"examples": {
"javascript": "import { useClaimerProofs, useContract } from \"@thirdweb-dev/react\";\n\nfunction App() {\n const { contract } = useContract(contractAddress);\n\n const {\n data: proof,\n isLoading,\n error,\n } = useClaimerProofs(contract, \"{{claimer_address}}\");\n}"
},
"reference": {
"javascript": "https://docs.thirdweb.com/react/react.useclaimerproofs"
}
},
{
"name": "useClaimIneligibilityReasons",
"summary": "Hook for fetching the reasons a wallet is not eligible to claim tokens from a drop, if any.\n\nThis is available for available for contracts that implement the \"ClaimConditions\" interface; such as [NFT Drop](https://thirdweb.com/thirdweb.eth/DropERC721), [Edition Drop](https://thirdweb.com/thirdweb.eth/DropERC1155), and [Token Drop](https://thirdweb.com/thirdweb.eth/DropERC20).\n\n",
"remarks": null,
"examples": {
"javascript": "import { useClaimIneligibilityReasons, useContract } from \"@thirdweb-dev/react\";\n\nfunction App() {\n const { contract } = useContract(contractAddress);\n const { data, isLoading, error } = useClaimIneligibilityReasons(contract, {\n walletAddress: \"0x123...\", // Use useAddress hook to get the user's wallet address\n quantity: 1, // Quantity to check eligibility for\n });\n}"
},
"reference": {
"javascript": "https://docs.thirdweb.com/react/react.useclaimineligibilityreasons"
}
},
{
"name": "useClaimNFT",
"summary": "Hook for claiming an NFT from a smart contract.\n\nAvailable to use on smart contracts that implement a `Claimable` interface, and follow either the `ERC721`or `ERC1155` standard.\n\n",
"remarks": null,
"examples": {
"javascript": "import { useContract, useClaimNFT, Web3Button } from \"@thirdweb-dev/react\";\n\nfunction App() {\n const { contract } = useContract(contractAddress);\n const { mutateAsync: claimNft, isLoading, error } = useClaimNFT(contract);\n\n return (\n <Web3Button\n contractAddress={contractAddress}\n action={() =>\n claimNft({\n to: \"{{wallet_address}}\", // Use useAddress hook to get current wallet address\n quantity: 1,\n })\n }\n >\n Claim NFT\n </Web3Button>\n );\n}"
},
"reference": {
"javascript": "https://docs.thirdweb.com/react/react.useclaimnft"
}
},
{
"name": "useResetClaimConditions",
"summary": "Hook for resetting the claim conditions on a drop contract.\n\nAvailable to use on contracts that implement [`ERC721ClaimableWithConditions`](https://portal.thirdweb.com/contracts/build/extensions/erc-721/ERC721ClaimConditions), [`ERC1155ClaimableWithConditions`](https://portal.thirdweb.com/contracts/build/extensions/erc-1155/ERC1155ClaimConditions) or [`ERC20ClaimableWithConditions`](https://portal.thirdweb.com/contracts/build/extensions/erc-20/ERC20ClaimConditions).\n\n",
"remarks": null,
"examples": {
"javascript": "import {\n useContract,\n useResetClaimConditions,\n Web3Button,\n} from \"@thirdweb-dev/react\";\n\nfunction App() {\n // Contract must be a drop contract that implements claim conditions\n const { contract } = useContract(contractAddress);\n const {\n mutateAsync: resetClaimConditions,\n isLoading,\n error,\n } = useResetClaimConditions(contract);\n\n return (\n <Web3Button\n contractAddress={contractAddress}\n action={() => resetClaimConditions()}\n >\n Reset Claim Conditions\n </Web3Button>\n );\n}"
},
"reference": {
"javascript": "https://docs.thirdweb.com/react/react.useresetclaimconditions"
}
},
{
"name": "useSetClaimConditions",
"summary": "Hook for setting claim conditions on a drop contract.\n\nThis is available for available for contracts that implement the \"ClaimConditions\" interface; such as [NFT Drop](https://thirdweb.com/thirdweb.eth/DropERC721), [Edition Drop](https://thirdweb.com/thirdweb.eth/DropERC1155), and [Token Drop](https://thirdweb.com/thirdweb.eth/DropERC20).\n\nWhen using an ERC1155 contract, you must also provide the token ID of the NFT you want to set claim conditions on as the second parameter to the hook.\n\n",
"remarks": null,
"examples": {
"tyepscript": "import {\n useSetClaimConditions,\n useContract,\n Web3Button,\n} from \"@thirdweb-dev/react\";\n\nfunction App() {\n const { contract } = useContract(contractAddress);\n const {\n mutateAsync: setClaimConditions,\n isLoading,\n error,\n } = useSetClaimConditions(contract);\n\n const claimConditions = {\n phases: [\n {\n metadata: {\n name: \"Phase 1\", // The name of the phase\n },\n currencyAddress: \"0x...\", // The address of the currency you want users to pay in\n price: 1, // The price of the token in the currency specified above\n maxClaimablePerWallet: 1, // The maximum number of tokens a wallet can claim\n maxClaimableSupply: 100, // The total number of tokens that can be claimed in this phase\n startTime: new Date(), // When the phase starts (i.e. when users can start claiming tokens)\n waitInSeconds: 60 * 60 * 24 * 7, // The period of time users must wait between repeat claims\n snapshot: [\n {\n address: \"0x...\", // The address of the wallet\n currencyAddress: \"0x...\", // Override the currency address this wallet pays in\n maxClaimable: 5, // Override the maximum number of tokens this wallet can claim\n price: 0.5, // Override the price this wallet pays\n },\n ],\n merkleRootHash: \"0x...\", // The merkle root hash of the snapshot\n },\n ],\n }\n\n return (\n <Web3Button\n contractAddress={contractAddress}\n action={() => setClaimConditions(claimConditions)}\n >\n Set Claim Conditions\n </Web3Button>\n );\n}"
},
"reference": {
"javascript": "https://docs.thirdweb.com/react/react.usesetclaimconditions"
}
}
],
"ERC1155ClaimPhasesV2": [
{
"name": "useActiveClaimCondition",
"summary": "Hook for getting the active claim condition for a given drop contract.\n\nAvailable for contracts that implement the \"ClaimConditions\" interface; such as [NFT Drop](https://thirdweb.com/thirdweb.eth/DropERC721), [Edition Drop](https://thirdweb.com/thirdweb.eth/DropERC1155), and [Token Drop](https://thirdweb.com/thirdweb.eth/DropERC20).\n\n",
"remarks": null,
"examples": {
"javascript": "import { useActiveClaimCondition, useContract } from \"@thirdweb-dev/react\";\n\nfunction App() {\n const { contract } = useContract(contractAddress);\n const { data, isLoading, error } = useActiveClaimCondition(contract);\n}"
},
"reference": {
"javascript": "https://docs.thirdweb.com/react/react.useactiveclaimcondition"
}
},
{
"name": "useActiveClaimConditionForWallet",
"summary": "Hook for getting the active claim condition on a drop contract for a specific wallet address.\n\nEach wallet address can have unique claim conditions at any given time. This hook allows you to get the active claim condition for a specific wallet address at this time.\n\nThis is available for available for contracts that implement the \"ClaimConditions\" interface; such as [NFT Drop](https://thirdweb.com/thirdweb.eth/DropERC721), [Edition Drop](https://thirdweb.com/thirdweb.eth/DropERC1155), and [Token Drop](https://thirdweb.com/thirdweb.eth/DropERC20).\n\n---\n\n- Returns the claim condition specific to the wallet address if found in the claimer snapshot. - Returns the default claim condition on the contract if the address is not found in the claimer snapshot. - Populates the error field if there is no active claim condition on the contract.\n\n",
"remarks": null,
"examples": {
"javascript": "import {\n useActiveClaimConditionForWallet,\n useContract,\n useAddress,\n} from \"@thirdweb-dev/react\";\n\nfunction App() {\n const address = useAddress();\n const { contract } = useContract(contractAddress);\n const { data, isLoading, error } = useActiveClaimConditionForWallet(\n contract,\n address,\n );\n}"
},
"reference": {
"javascript": "https://docs.thirdweb.com/react/react.useactiveclaimconditionforwallet"
}
},
{
"name": "useClaimConditions",
"summary": "Hook for fetching all claim conditions for a given drop contract.\n\nThis is available for available for contracts that implement the \"ClaimConditions\" interface; such as [NFT Drop](https://thirdweb.com/thirdweb.eth/DropERC721), [Edition Drop](https://thirdweb.com/thirdweb.eth/DropERC1155), and [Token Drop](https://thirdweb.com/thirdweb.eth/DropERC20).\n\n",
"remarks": null,
"examples": {
"javascript": "import { useClaimConditions, useContract } from \"@thirdweb-dev/react\";\n\nfunction App() {\n const { contract } = useContract(contractAddress);\n const { data, isLoading, error } = useClaimConditions(contract);\n}"
},
"reference": {
"javascript": "https://docs.thirdweb.com/react/react.useclaimconditions"
}
},
{
"name": "useClaimerProofs",
"summary": "Hook to get the claimer proofs for an address for [ERC20](https://portal.thirdweb.com/contracts/build/base-contracts/erc-20/drop), [ERC721](https://portal.thirdweb.com/contracts/build/base-contracts/erc-721/drop), and [ERC1155](https://portal.thirdweb.com/contracts/build/base-contracts/erc-1155/drop) drop contracts.\n\nA claimer proof is a set of data about a claimer's claim condition, including the claimer's address, the claimer's proof, and the claimer's max claimable amount, price, and currency address.\n\nThis is available for available for contracts that implement the \"ClaimConditions\" interface; such as [NFT Drop](https://thirdweb.com/thirdweb.eth/DropERC721), [Edition Drop](https://thirdweb.com/thirdweb.eth/DropERC1155), and [Token Drop](https://thirdweb.com/thirdweb.eth/DropERC20).\n\n",
"remarks": null,
"examples": {
"javascript": "import { useClaimerProofs, useContract } from \"@thirdweb-dev/react\";\n\nfunction App() {\n const { contract } = useContract(contractAddress);\n\n const {\n data: proof,\n isLoading,\n error,\n } = useClaimerProofs(contract, \"{{claimer_address}}\");\n}"
},
"reference": {
"javascript": "https://docs.thirdweb.com/react/react.useclaimerproofs"
}
},
{
"name": "useClaimIneligibilityReasons",
"summary": "Hook for fetching the reasons a wallet is not eligible to claim tokens from a drop, if any.\n\nThis is available for available for contracts that implement the \"ClaimConditions\" interface; such as [NFT Drop](https://thirdweb.com/thirdweb.eth/DropERC721), [Edition Drop](https://thirdweb.com/thirdweb.eth/DropERC1155), and [Token Drop](https://thirdweb.com/thirdweb.eth/DropERC20).\n\n",
"remarks": null,
"examples": {
"javascript": "import { useClaimIneligibilityReasons, useContract } from \"@thirdweb-dev/react\";\n\nfunction App() {\n const { contract } = useContract(contractAddress);\n const { data, isLoading, error } = useClaimIneligibilityReasons(contract, {\n walletAddress: \"0x123...\", // Use useAddress hook to get the user's wallet address\n quantity: 1, // Quantity to check eligibility for\n });\n}"
},
"reference": {
"javascript": "https://docs.thirdweb.com/react/react.useclaimineligibilityreasons"
}
},
{
"name": "useClaimNFT",
"summary": "Hook for claiming an NFT from a smart contract.\n\nAvailable to use on smart contracts that implement a `Claimable` interface, and follow either the `ERC721`or `ERC1155` standard.\n\n",
"remarks": null,
"examples": {
"javascript": "import { useContract, useClaimNFT, Web3Button } from \"@thirdweb-dev/react\";\n\nfunction App() {\n const { contract } = useContract(contractAddress);\n const { mutateAsync: claimNft, isLoading, error } = useClaimNFT(contract);\n\n return (\n <Web3Button\n contractAddress={contractAddress}\n action={() =>\n claimNft({\n to: \"{{wallet_address}}\", // Use useAddress hook to get current wallet address\n quantity: 1,\n })\n }\n >\n Claim NFT\n </Web3Button>\n );\n}"
},
"reference": {
"javascript": "https://docs.thirdweb.com/react/react.useclaimnft"
}
},
{
"name": "useResetClaimConditions",
"summary": "Hook for resetting the claim conditions on a drop contract.\n\nAvailable to use on contracts that implement [`ERC721ClaimableWithConditions`](https://portal.thirdweb.com/contracts/build/extensions/erc-721/ERC721ClaimConditions), [`ERC1155ClaimableWithConditions`](https://portal.thirdweb.com/contracts/build/extensions/erc-1155/ERC1155ClaimConditions) or [`ERC20ClaimableWithConditions`](https://portal.thirdweb.com/contracts/build/extensions/erc-20/ERC20ClaimConditions).\n\n",
"remarks": null,
"examples": {
"javascript": "import {\n useContract,\n useResetClaimConditions,\n Web3Button,\n} from \"@thirdweb-dev/react\";\n\nfunction App() {\n // Contract must be a drop contract that implements claim conditions\n const { contract } = useContract(contractAddress);\n const {\n mutateAsync: resetClaimConditions,\n isLoading,\n error,\n } = useResetClaimConditions(contract);\n\n return (\n <Web3Button\n contractAddress={contractAddress}\n action={() => resetClaimConditions()}\n >\n Reset Claim Conditions\n </Web3Button>\n );\n}"
},
"reference": {
"javascript": "https://docs.thirdweb.com/react/react.useresetclaimconditions"
}
},
{
"name": "useSetClaimConditions",
"summary": "Hook for setting claim conditions on a drop contract.\n\nThis is available for available for contracts that implement the \"ClaimConditions\" interface; such as [NFT Drop](https://thirdweb.com/thirdweb.eth/DropERC721), [Edition Drop](https://thirdweb.com/thirdweb.eth/DropERC1155), and [Token Drop](https://thirdweb.com/thirdweb.eth/DropERC20).\n\nWhen using an ERC1155 contract, you must also provide the token ID of the NFT you want to set claim conditions on as the second parameter to the hook.\n\n",
"remarks": null,
"examples": {
"tyepscript": "import {\n useSetClaimConditions,\n useContract,\n Web3Button,\n} from \"@thirdweb-dev/react\";\n\nfunction App() {\n const { contract } = useContract(contractAddress);\n const {\n mutateAsync: setClaimConditions,\n isLoading,\n error,\n } = useSetClaimConditions(contract);\n\n const claimConditions = {\n phases: [\n {\n metadata: {\n name: \"Phase 1\", // The name of the phase\n },\n currencyAddress: \"0x...\", // The address of the currency you want users to pay in\n price: 1, // The price of the token in the currency specified above\n maxClaimablePerWallet: 1, // The maximum number of tokens a wallet can claim\n maxClaimableSupply: 100, // The total number of tokens that can be claimed in this phase\n startTime: new Date(), // When the phase starts (i.e. when users can start claiming tokens)\n waitInSeconds: 60 * 60 * 24 * 7, // The period of time users must wait between repeat claims\n snapshot: [\n {\n address: \"0x...\", // The address of the wallet\n currencyAddress: \"0x...\", // Override the currency address this wallet pays in\n maxClaimable: 5, // Override the maximum number of tokens this wallet can claim\n price: 0.5, // Override the price this wallet pays\n },\n ],\n merkleRootHash: \"0x...\", // The merkle root hash of the snapshot\n },\n ],\n }\n\n return (\n <Web3Button\n contractAddress={contractAddress}\n action={() => setClaimConditions(claimConditions)}\n >\n Set Claim Conditions\n </Web3Button>\n );\n}"
},
"reference": {
"javascript": "https://docs.thirdweb.com/react/react.usesetclaimconditions"
}
}
],
"ERC1155ClaimPhasesV1": [
{
"name": "useActiveClaimCondition",
"summary": "Hook for getting the active claim condition for a given drop contract.\n\nAvailable for contracts that implement the \"ClaimConditions\" interface; such as [NFT Drop](https://thirdweb.com/thirdweb.eth/DropERC721), [Edition Drop](https://thirdweb.com/thirdweb.eth/DropERC1155), and [Token Drop](https://thirdweb.com/thirdweb.eth/DropERC20).\n\n",
"remarks": null,
"examples": {
"javascript": "import { useActiveClaimCondition, useContract } from \"@thirdweb-dev/react\";\n\nfunction App() {\n const { contract } = useContract(contractAddress);\n const { data, isLoading, error } = useActiveClaimCondition(contract);\n}"
},
"reference": {
"javascript": "https://docs.thirdweb.com/react/react.useactiveclaimcondition"
}
},
{
"name": "useActiveClaimConditionForWallet",
"summary": "Hook for getting the active claim condition on a drop contract for a specific wallet address.\n\nEach wallet address can have unique claim conditions at any given time. This hook allows you to get the active claim condition for a specific wallet address at this time.\n\nThis is available for available for contracts that implement the \"ClaimConditions\" interface; such as [NFT Drop](https://thirdweb.com/thirdweb.eth/DropERC721), [Edition Drop](https://thirdweb.com/thirdweb.eth/DropERC1155), and [Token Drop](https://thirdweb.com/thirdweb.eth/DropERC20).\n\n---\n\n- Returns the claim condition specific to the wallet address if found in the claimer snapshot. - Returns the default claim condition on the contract if the address is not found in the claimer snapshot. - Populates the error field if there is no active claim condition on the contract.\n\n",
"remarks": null,
"examples": {
"javascript": "import {\n useActiveClaimConditionForWallet,\n useContract,\n useAddress,\n} from \"@thirdweb-dev/react\";\n\nfunction App() {\n const address = useAddress();\n const { contract } = useContract(contractAddress);\n const { data, isLoading, error } = useActiveClaimConditionForWallet(\n contract,\n address,\n );\n}"
},
"reference": {
"javascript": "https://docs.thirdweb.com/react/react.useactiveclaimconditionforwallet"
}
},
{
"name": "useClaimConditions",
"summary": "Hook for fetching all claim conditions for a given drop contract.\n\nThis is available for available for contracts that implement the \"ClaimConditions\" interface; such as [NFT Drop](https://thirdweb.com/thirdweb.eth/DropERC721), [Edition Drop](https://thirdweb.com/thirdweb.eth/DropERC1155), and [Token Drop](https://thirdweb.com/thirdweb.eth/DropERC20).\n\n",
"remarks": null,
"examples": {
"javascript": "import { useClaimConditions, useContract } from \"@thirdweb-dev/react\";\n\nfunction App() {\n const { contract } = useContract(contractAddress);\n const { data, isLoading, error } = useClaimConditions(contract);\n}"
},
"reference": {
"javascript": "https://docs.thirdweb.com/react/react.useclaimconditions"
}
},
{
"name": "useClaimerProofs",
"summary": "Hook to get the claimer proofs for an address for [ERC20](https://portal.thirdweb.com/contracts/build/base-contracts/erc-20/drop), [ERC721](https://portal.thirdweb.com/contracts/build/base-contracts/erc-721/drop), and [ERC1155](https://portal.thirdweb.com/contracts/build/base-contracts/erc-1155/drop) drop contracts.\n\nA claimer proof is a set of data about a claimer's claim condition, including the claimer's address, the claimer's proof, and the claimer's max claimable amount, price, and currency address.\n\nThis is available for available for contracts that implement the \"ClaimConditions\" interface; such as [NFT Drop](https://thirdweb.com/thirdweb.eth/DropERC721), [Edition Drop](https://thirdweb.com/thirdweb.eth/DropERC1155), and [Token Drop](https://thirdweb.com/thirdweb.eth/DropERC20).\n\n",
"remarks": null,
"examples": {
"javascript": "import { useClaimerProofs, useContract } from \"@thirdweb-dev/react\";\n\nfunction App() {\n const { contract } = useContract(contractAddress);\n\n const {\n data: proof,\n isLoading,\n error,\n } = useClaimerProofs(contract, \"{{claimer_address}}\");\n}"
},
"reference": {
"javascript": "https://docs.thirdweb.com/react/react.useclaimerproofs"
}
},
{
"name": "useClaimIneligibilityReasons",
"summary": "Hook for fetching the reasons a wallet is not eligible to claim tokens from a drop, if any.\n\nThis is available for available for contracts that implement the \"ClaimConditions\" interface; such as [NFT Drop](https://thirdweb.com/thirdweb.eth/DropERC721), [Edition Drop](https://thirdweb.com/thirdweb.eth/DropERC1155), and [Token Drop](https://thirdweb.com/thirdweb.eth/DropERC20).\n\n",
"remarks": null,
"examples": {
"javascript": "import { useClaimIneligibilityReasons, useContract } from \"@thirdweb-dev/react\";\n\nfunction App() {\n const { contract } = useContract(contractAddress);\n const { data, isLoading, error } = useClaimIneligibilityReasons(contract, {\n walletAddress: \"0x123...\", // Use useAddress hook to get the user's wallet address\n quantity: 1, // Quantity to check eligibility for\n });\n}"
},
"reference": {
"javascript": "https://docs.thirdweb.com/react/react.useclaimineligibilityreasons"
}
},
{
"name": "useClaimNFT",
"summary": "Hook for claiming an NFT from a smart contract.\n\nAvailable to use on smart contracts that implement a `Claimable` interface, and follow either the `ERC721`or `ERC1155` standard.\n\n",
"remarks": null,
"examples": {
"javascript": "import { useContract, useClaimNFT, Web3Button } from \"@thirdweb-dev/react\";\n\nfunction App() {\n const { contract } = useContract(contractAddress);\n const { mutateAsync: claimNft, isLoading, error } = useClaimNFT(contract);\n\n return (\n <Web3Button\n contractAddress={contractAddress}\n action={() =>\n claimNft({\n to: \"{{wallet_address}}\", // Use useAddress hook to get current wallet address\n quantity: 1,\n })\n }\n >\n Claim NFT\n </Web3Button>\n );\n}"
},
"reference": {
"javascript": "https://docs.thirdweb.com/react/react.useclaimnft"
}
},
{
"name": "useResetClaimConditions",
"summary": "Hook for resetting the claim conditions on a drop contract.\n\nAvailable to use on contracts that implement [`ERC721ClaimableWithConditions`](https://portal.thirdweb.com/contracts/build/extensions/erc-721/ERC721ClaimConditions), [`ERC1155ClaimableWithConditions`](https://portal.thirdweb.com/contracts/build/extensions/erc-1155/ERC1155ClaimConditions) or [`ERC20ClaimableWithConditions`](https://portal.thirdweb.com/contracts/build/extensions/erc-20/ERC20ClaimConditions).\n\n",
"remarks": null,
"examples": {
"javascript": "import {\n useContract,\n useResetClaimConditions,\n Web3Button,\n} from \"@thirdweb-dev/react\";\n\nfunction App() {\n // Contract must be a drop contract that implements claim conditions\n const { contract } = useContract(contractAddress);\n const {\n mutateAsync: resetClaimConditions,\n isLoading,\n error,\n } = useResetClaimConditions(contract);\n\n return (\n <Web3Button\n contractAddress={contractAddress}\n action={() => resetClaimConditions()}\n >\n Reset Claim Conditions\n </Web3Button>\n );\n}"
},
"reference": {
"javascript": "https://docs.thirdweb.com/react/react.useresetclaimconditions"
}
},
{
"name": "useSetClaimConditions",
"summary": "Hook for setting claim conditions on a drop contract.\n\nThis is available for available for contracts that implement the \"ClaimConditions\" interface; such as [NFT Drop](https://thirdweb.com/thirdweb.eth/DropERC721), [Edition Drop](https://thirdweb.com/thirdweb.eth/DropERC1155), and [Token Drop](https://thirdweb.com/thirdweb.eth/DropERC20).\n\nWhen using an ERC1155 contract, you must also provide the token ID of the NFT you want to set claim conditions on as the second parameter to the hook.\n\n",
"remarks": null,
"examples": {
"tyepscript": "import {\n useSetClaimConditions,\n useContract,\n Web3Button,\n} from \"@thirdweb-dev/react\";\n\nfunction App() {\n const { contract } = useContract(contractAddress);\n const {\n mutateAsync: setClaimConditions,\n isLoading,\n error,\n } = useSetClaimConditions(contract);\n\n const claimConditions = {\n phases: [\n {\n metadata: {\n name: \"Phase 1\", // The name of the phase\n },\n currencyAddress: \"0x...\", // The address of the currency you want users to pay in\n price: 1, // The price of the token in the currency specified above\n maxClaimablePerWallet: 1, // The maximum number of tokens a wallet can claim\n maxClaimableSupply: 100, // The total number of tokens that can be claimed in this phase\n startTime: new Date(), // When the phase starts (i.e. when users can start claiming tokens)\n waitInSeconds: 60 * 60 * 24 * 7, // The period of time users must wait between repeat claims\n snapshot: [\n {\n address: \"0x...\", // The address of the wallet\n currencyAddress: \"0x...\", // Override the currency address this wallet pays in\n maxClaimable: 5, // Override the maximum number of tokens this wallet can claim\n price: 0.5, // Override the price this wallet pays\n },\n ],\n merkleRootHash: \"0x...\", // The merkle root hash of the snapshot\n },\n ],\n }\n\n return (\n <Web3Button\n contractAddress={contractAddress}\n action={() => setClaimConditions(claimConditions)}\n >\n Set Claim Conditions\n </Web3Button>\n );\n}"
},
"reference": {
"javascript": "https://docs.thirdweb.com/react/react.usesetclaimconditions"
}
}
],
"ERC1155ClaimConditionsV2": [
{
"name": "useActiveClaimCondition",
"summary": "Hook for getting the active claim condition for a given drop contract.\n\nAvailable for contracts that implement the \"ClaimConditions\" interface; such as [NFT Drop](https://thirdweb.com/thirdweb.eth/DropERC721), [Edition Drop](https://thirdweb.com/thirdweb.eth/DropERC1155), and [Token Drop](https://thirdweb.com/thirdweb.eth/DropERC20).\n\n",
"remarks": null,
"examples": {
"javascript": "import { useActiveClaimCondition, useContract } from \"@thirdweb-dev/react\";\n\nfunction App() {\n const { contract } = useContract(contractAddress);\n const { data, isLoading, error } = useActiveClaimCondition(contract);\n}"
},
"reference": {
"javascript": "https://docs.thirdweb.com/react/react.useactiveclaimcondition"
}
},
{
"name": "useActiveClaimConditionForWallet",
"summary": "Hook for getting the active claim condition on a drop contract for a specific wallet address.\n\nEach wallet address can have unique claim conditions at any given time. This hook allows you to get the active claim condition for a specific wallet address at this time.\n\nThis is available for available for contracts that implement the \"ClaimConditions\" interface; such as [NFT Drop](https://thirdweb.com/thirdweb.eth/DropERC721), [Edition Drop](https://thirdweb.com/thirdweb.eth/DropERC1155), and [Token Drop](https://thirdweb.com/thirdweb.eth/DropERC20).\n\n---\n\n- Returns the claim condition specific to the wallet address if found in the claimer snapshot. - Returns the default claim condition on the contract if the address is not found in the claimer snapshot. - Populates the error field if there is no active claim condition on the contract.\n\n",
"remarks": null,
"examples": {
"javascript": "import {\n useActiveClaimConditionForWallet,\n useContract,\n useAddress,\n} from \"@thirdweb-dev/react\";\n\nfunction App() {\n const address = useAddress();\n const { contract } = useContract(contractAddress);\n const { data, isLoading, error } = useActiveClaimConditionForWallet(\n contract,\n address,\n );\n}"
},
"reference": {
"javascript": "https://docs.thirdweb.com/react/react.useactiveclaimconditionforwallet"
}
},
{
"name": "useClaimConditions",
"summary": "Hook for fetching all claim conditions for a given drop contract.\n\nThis is available for available for contracts that implement the \"ClaimConditions\" interface; such as [NFT Drop](https://thirdweb.com/thirdweb.eth/DropERC721), [Edition Drop](https://thirdweb.com/thirdweb.eth/DropERC1155), and [Token Drop](https://thirdweb.com/thirdweb.eth/DropERC20).\n\n",
"remarks": null,
"examples": {
"javascript": "import { useClaimConditions, useContract } from \"@thirdweb-dev/react\";\n\nfunction App() {\n const { contract } = useContract(contractAddress);\n const { data, isLoading, error } = useClaimConditions(contract);\n}"
},
"reference": {
"javascript": "https://docs.thirdweb.com/react/react.useclaimconditions"
}
},
{
"name": "useClaimerProofs",
"summary": "Hook to get the claimer proofs for an address for [ERC20](https://portal.thirdweb.com/contracts/build/base-contracts/erc-20/drop), [ERC721](https://portal.thirdweb.com/contracts/build/base-contracts/erc-721/drop), and [ERC1155](https://portal.thirdweb.com/contracts/build/base-contracts/erc-1155/drop) drop contracts.\n\nA claimer proof is a set of data about a claimer's claim condition, including the claimer's address, the claimer's proof, and the claimer's max claimable amount, price, and currency address.\n\nThis is available for available for contracts that implement the \"ClaimConditions\" interface; such as [NFT Drop](https://thirdweb.com/thirdweb.eth/DropERC721), [Edition Drop](https://thirdweb.com/thirdweb.eth/DropERC1155), and [Token Drop](https://thirdweb.com/thirdweb.eth/DropERC20).\n\n",
"remarks": null,
"examples": {
"javascript": "import { useClaimerProofs, useContract } from \"@thirdweb-dev/react\";\n\nfunction App() {\n const { contract } = useContract(contractAddress);\n\n const {\n data: proof,\n isLoading,\n error,\n } = useClaimerProofs(contract, \"{{claimer_address}}\");\n}"
},
"reference": {
"javascript": "https://docs.thirdweb.com/react/react.useclaimerproofs"
}
},
{
"name": "useClaimIneligibilityReasons",
"summary": "Hook for fetching the reasons a wallet is not eligible to claim tokens from a drop, if any.\n\nThis is available for available for contracts that implement the \"ClaimConditions\" interface; such as [NFT Drop](https://thirdweb.com/thirdweb.eth/DropERC721), [Edition Drop](https://thirdweb.com/thirdweb.eth/DropERC1155), and [Token Drop](https://thirdweb.com/thirdweb.eth/DropERC20).\n\n",
"remarks": null,
"examples": {
"javascript": "import { useClaimIneligibilityReasons, useContract } from \"@thirdweb-dev/react\";\n\nfunction App() {\n const { contract } = useContract(contractAddress);\n const { data, isLoading, error } = useClaimIneligibilityReasons(contract, {\n walletAddress: \"0x123...\", // Use useAddress hook to get the user's wallet address\n quantity: 1, // Quantity to check eligibility for\n });\n}"
},
"reference": {
"javascript": "https://docs.thirdweb.com/react/react.useclaimineligibilityreasons"
}
},
{
"name": "useClaimNFT",
"summary": "Hook for claiming an NFT from a smart contract.\n\nAvailable to use on smart contracts that implement a `Claimable` interface, and follow either the `ERC721`or `ERC1155` standard.\n\n",
"remarks": null,
"examples": {
"javascript": "import { useContract, useClaimNFT, Web3Button } from \"@thirdweb-dev/react\";\n\nfunction App() {\n const { contract } = useContract(contractAddress);\n const { mutateAsync: claimNft, isLoading, error } = useClaimNFT(contract);\n\n return (\n <Web3Button\n contractAddress={contractAddress}\n action={() =>\n claimNft({\n to: \"{{wallet_address}}\", // Use useAddress hook to get current wallet address\n quantity: 1,\n })\n }\n >\n Claim NFT\n </Web3Button>\n );\n}"
},
"reference": {
"javascript": "https://docs.thirdweb.com/react/react.useclaimnft"
}
},
{
"name": "useResetClaimConditions",
"summary": "Hook for resetting the claim conditions on a drop contract.\n\nAvailable to use on contracts that implement [`ERC721ClaimableWithConditions`](https://portal.thirdweb.com/contracts/build/extensions/erc-721/ERC721ClaimConditions), [`ERC1155ClaimableWithConditions`](https://portal.thirdweb.com/contracts/build/extensions/erc-1155/ERC1155ClaimConditions) or [`ERC20ClaimableWithConditions`](https://portal.thirdweb.com/contracts/build/extensions/erc-20/ERC20ClaimConditions).\n\n",
"remarks": null,
"examples": {
"javascript": "import {\n useContract,\n useResetClaimConditions,\n Web3Button,\n} from \"@thirdweb-dev/react\";\n\nfunction App() {\n // Contract must be a drop contract that implements claim conditions\n const { contract } = useContract(contractAddress);\n const {\n mutateAsync: resetClaimConditions,\n isLoading,\n error,\n } = useResetClaimConditions(contract);\n\n return (\n <Web3Button\n contractAddress={contractAddress}\n action={() => resetClaimConditions()}\n >\n Reset Claim Conditions\n </Web3Button>\n );\n}"
},
"reference": {
"javascript": "https://docs.thirdweb.com/react/react.useresetclaimconditions"
}
},
{
"name": "useSetClaimConditions",
"summary": "Hook for setting claim conditions on a drop contract.\n\nThis is available for available for contracts that implement the \"ClaimConditions\" interface; such as [NFT Drop](https://thirdweb.com/thirdweb.eth/DropERC721), [Edition Drop](https://thirdweb.com/thirdweb.eth/DropERC1155), and [Token Drop](https://thirdweb.com/thirdweb.eth/DropERC20).\n\nWhen using an ERC1155 contract, you must also provide the token ID of the NFT you want to set claim conditions on as the second parameter to the hook.\n\n",
"remarks": null,
"examples": {
"tyepscript": "import {\n useSetClaimConditions,\n useContract,\n Web3Button,\n} from \"@thirdweb-dev/react\";\n\nfunction App() {\n const { contract } = useContract(contractAddress);\n const {\n mutateAsync: setClaimConditions,\n isLoading,\n error,\n } = useSetClaimConditions(contract);\n\n const claimConditions = {\n phases: [\n {\n metadata: {\n name: \"Phase 1\", // The name of the phase\n },\n currencyAddress: \"0x...\", // The address of the currency you want users to pay in\n price: 1, // The price of the token in the currency specified above\n maxClaimablePerWallet: 1, // The maximum number of tokens a wallet can claim\n maxClaimableSupply: 100, // The total number of tokens that can be claimed in this phase\n startTime: new Date(), // When the phase starts (i.e. when users can start claiming tokens)\n waitInSeconds: 60 * 60 * 24 * 7, // The period of time users must wait between repeat claims\n snapshot: [\n {\n address: \"0x...\", // The address of the wallet\n currencyAddress: \"0x...\", // Override the currency address this wallet pays in\n maxClaimable: 5, // Override the maximum number of tokens this wallet can claim\n price: 0.5, // Override the price this wallet pays\n },\n ],\n merkleRootHash: \"0x...\", // The merkle root hash of the snapshot\n },\n ],\n }\n\n return (\n <Web3Button\n contractAddress={contractAddress}\n action={() => setClaimConditions(claimConditions)}\n >\n Set Claim Conditions\n </Web3Button>\n );\n}"
},
"reference": {
"javascript": "https://docs.thirdweb.com/react/react.usesetclaimconditions"
}
}
],
"ERC1155ClaimConditionsV1@claimConditions": [
{
"name": "useActiveClaimCondition",
"summary": "Hook for getting the active claim condition for a given drop contract.\n\nAvailable for contracts that implement the \"ClaimConditions\" interface; such as [NFT Drop](https://thirdweb.com/thirdweb.eth/DropERC721), [Edition Drop](https://thirdweb.com/thirdweb.eth/DropERC1155), and [Token Drop](https://thirdweb.com/thirdweb.eth/DropERC20).\n\n",
"remarks": null,
"examples": {
"javascript": "import { useActiveClaimCondition, useContract } from \"@thirdweb-dev/react\";\n\nfunction App() {\n const { contract } = useContract(contractAddress);\n const { data, isLoading, error } = useActiveClaimCondition(contract);\n}"
},
"reference": {
"javascript": "https://docs.thirdweb.com/react/react.useactiveclaimcondition"
}
},
{
"name": "useActiveClaimConditionForWallet",
"summary": "Hook for getting the active claim condition on a drop contract for a specific wallet address.\n\nEach wallet address can have unique claim conditions at any given time. This hook allows you to get the active claim condition for a specific wallet address at this time.\n\nThis is available for available for contracts that implement the \"ClaimConditions\" interface; such as [NFT Drop](https://thirdweb.com/thirdweb.eth/DropERC721), [Edition Drop](https://thirdweb.com/thirdweb.eth/DropERC1155), and [Token Drop](https://thirdweb.com/thirdweb.eth/DropERC20).\n\n---\n\n- Returns the claim condition specific to the wallet address if found in the claimer snapshot. - Returns the default claim condition on the contract if the address is not found in the claimer snapshot. - Populates the error field if there is no active claim condition on the contract.\n\n",
"remarks": null,
"examples": {
"javascript": "import {\n useActiveClaimConditionForWallet,\n useContract,\n useAddress,\n} from \"@thirdweb-dev/react\";\n\nfunction App() {\n const address = useAddress();\n const { contract } = useContract(contractAddress);\n const { data, isLoading, error } = useActiveClaimConditionForWallet(\n contract,\n address,\n );\n}"
},
"reference": {
"javascript": "https://docs.thirdweb.com/react/react.useactiveclaimconditionforwallet"
}
},
{
"name": "useClaimConditions",
"summary": "Hook for fetching all claim conditions for a given drop contract.\n\nThis is available for available for contracts that implement the \"ClaimConditions\" interface; such as [NFT Drop](https://thirdweb.com/thirdweb.eth/DropERC721), [Edition Drop](https://thirdweb.com/thirdweb.eth/DropERC1155), and [Token Drop](https://thirdweb.com/thirdweb.eth/DropERC20).\n\n",
"remarks": null,
"examples": {
"javascript": "import { useClaimConditions, useContract } from \"@thirdweb-dev/react\";\n\nfunction App() {\n const { contract } = useContract(contractAddress);\n const { data, isLoading, error } = useClaimConditions(contract);\n}"
},
"reference": {
"javascript": "https://docs.thirdweb.com/react/react.useclaimconditions"
}
}
],
"ERC1155\n\n@nft": [
{
"name": "useAirdropNFT",
"summary": "Hook for airdropping [`ERC1155`](https://portal.thirdweb.com/contracts/build/extensions/erc-1155/ERC1155) NFT tokens to multiple wallet addresses at once.\n\nAvailable to use on smart contracts that implement the `ERC1155` standard.\n\nPerforms a batch transfer from the connected wallet to the specified addresses. This means you need to have the total number of tokens you wish to airdrop available in the wallet that performs this transaction.\n\n",
"remarks": null,
"examples": {
"javascript": "import { useAirdropNFT, useContract, Web3Button } from \"@thirdweb-dev/react\";\n\nfunction App() {\n const { contract } = useContract(contractAddress);\n const { mutateAsync: airdropNft, isLoading, error } = useAirdropNFT(contract);\n\n return (\n <Web3Button\n contractAddress={contractAddress}\n action={() =>\n airdropNft({\n addresses: [\n {\n address: \"0x123\",\n quantity: 1,\n },\n ],\n tokenId: tokenId,\n })\n }\n >\n Airdrop NFT\n </Web3Button>\n );\n}"
},
"reference": {
"javascript": "https://docs.thirdweb.com/react/react.useairdropnft"
}
}
],
"PermissionsEnumerable\n\n@permissionControl": [
{
"name": "useAllRoleMembers",
"summary": "Hook for getting all wallet addresses that have a role in a smart contract.\n\nAvailable to use on contracts that implement [`Permissions`](https://portal.thirdweb.com/contracts/build/extensions/general/Permissions).\n\n",
"remarks": null,
"examples": {
"javascript": "import { useAllRoleMembers, useContract } from \"@thirdweb-dev/react\";\n\nfunction App() {\n const { contract } = useContract(contractAddress);\n const { data, isLoading, error } = useAllRoleMembers(contract);\n}"
},
"reference": {
"javascript": "https://docs.thirdweb.com/react/react.useallrolemembers"
}
},
{
"name": "useIsAddressRole",
"summary": "Hook to check if an address is a member of a role on a smart contract.\n\nAvailable to use on contracts that implement [`Permissions`](https://portal.thirdweb.com/contracts/build/extensions/general/Permissions) interface\n\nProvide the following arguments to the hook:\n\n1. `contract` - The contract instance to check the role on. 2. `roleName` - The name of the role to check. 3. `address` - The wallet address to see if it is a member of the role.\n\n",
"remarks": null,
"examples": {
"javascript": "import { useIsAddressRole, useContract } from \"@thirdweb-dev/react\";\n\nfunction App() {\n const { contract } = useContract(contractAddress);\n const isMember = useIsAddressRole(contract, roleName, walletAddress);\n}"
},
"reference": {
"javascript": "https://docs.thirdweb.com/react/react.useisaddressrole"
}
}
],
"AppURI\n\n@appURI": [
{
"name": "useAppURI",
"summary": "Get App URI of the contract\n\n",
"remarks": null,
"examples": {
"javascript": "const { data: contractMetadata, isLoading, error } = useAppURI(contract);"
},
"reference": {
"javascript": "https://docs.thirdweb.com/react/react.useappuri"
}
},
{
"name": "useSetAppURI",
"summary": "Set App URI of the contract\n\n",
"remarks": null,
"examples": {
"javascript": "const Component = () => {\n const {\n mutate: useSetAppURI,\n isLoading,\n error,\n } = useSetAppURI(contract);\n\n if (error) {\n console.error(\"failed to update appURI\", error);\n }\n\n return (\n <button\n disabled={isLoading}\n onClick={() => useSetAppURI({ uri })}\n >\n Update App URI\n </button>\n );\n};"
},
"reference": {
"javascript": "https://docs.thirdweb.com/react/react.usesetappuri"
}
}
],
"EnglishAuctions\n\n@marketplace": [
{
"name": "useAuctionWinner",
"summary": "Hook for getting the winner of an auction (or english auction) on a `Marketplace` or [MarketplaceV3](https://thirdweb.com/thirdweb.eth/MarketplaceV3) contract.\n\n",
"remarks": null,
"examples": {
"javascript": "import { useAuctionWinner, useContract } from \"@thirdweb-dev/react\";\n\nfunction App() {\n const { contract } = useContract(contractAddress, \"marketplace\");\n const { data, isLoading, error } = useAuctionWinner(\n contract,\n listingId, // The listing id of the item that you want to get the auction winner for\n );\n}"
},
"reference": {
"javascript": "https://docs.thirdweb.com/react/react.useauctionwinner"
}
},
{
"name": "useBidBuffer",
"summary": "Hook for determining the current bid buffer on a `Marketplace` or [Marketplace V3](https://thirdweb.com/thirdweb.eth/MarketplaceV3) contract.\n\nThe bid buffer is what percentage higher the next bid must be than the current highest bid, or the starting price if there are no bids.\n\n",
"remarks": null,
"examples": {
"javascript": "import { useBidBuffer, useContract } from \"@thirdweb-dev/react\";\n\nfunction App() {\n const { contract } = useContract(contractAddress, \"marketplace\");\n const {\n data: bidBuffer,\n isLoading,\n error,\n } = useBidBuffer(contract, listingId);"
},
"reference": {
"javascript": "https://docs.thirdweb.com/react/react.usebidbuffer"
}
},
{
"name": "useCancelEnglishAuction",
"summary": "Hook for canceling an english auction on a [MarketplaceV3](https://thirdweb.com/thirdweb.eth/MarketplaceV3) contract.\n\n__English auctions cannot be canceled if a bid has been placed__\n\n__This hook is only for [Marketplace V3](https://thirdweb.com/thirdweb.eth/MarketplaceV3) contracts.__\n\nFor `Marketplace` contracts, use `useCancelListing` instead.\n\n",
"remarks": null,
"examples": {
"javascript": "import {\n useCancelEnglishAuction,\n useContract,\n Web3Button,\n} from \"@thirdweb-dev/react\";\n\nfunction App() {\n const { contract } = useContract(contractAddress, \"marketplace-v3\");\n const {\n mutateAsync: cancelEnglishAuction,\n isLoading,\n error,\n } = useCancelEnglishAuction(contract);\n\n return (\n <Web3Button\n contractAddress={contractAddress}\n action={() => cancelEnglishAuction(listingId)}\n >\n Cancel English Auction\n </Web3Button>\n );\n}"
},
"reference": {
"javascript": "https://docs.thirdweb.com/react/react.usecancelenglishauction"
}
},
{
"name": "useCreateAuctionListing",
"summary": "Hook for creating an auction listing on a `Marketplace` or [MarketplaceV3](https://thirdweb.com/thirdweb.eth/MarketplaceV3) smart contract.\n\nAuction listings hold the NFTs in escrow; requiring the seller to transfer the NFTs to the marketplace contract as part of the listing creation process.\n\nProvide your `Marketplace` or [MarketplaceV3](https://thirdweb.com/thirdweb.eth/MarketplaceV3) contract as the argument to the hook.\n\nThen, provide the information about the listing you want to create as the argument to the mutation.\n\n",
"remarks": null,
"examples": {
"javascript": "import {\n useCreateAuctionListing,\n useContract,\n Web3Button,\n} from \"@thirdweb-dev/react\";\nimport { NATIVE_TOKEN_ADDRESS } from \"@thirdweb-dev/sdk\";\n\nfunction App() {\n const { contract } = useContract(contractAddress, \"marketplace-v3\");\n const {\n mutateAsync: createAuctionListing,\n isLoading,\n error,\n } = useCreateAuctionListing(contract);\n\n return (\n <Web3Button\n contractAddress={contractAddress}\n action={() =>\n createAuctionListing({\n tokenId: \"{{token_id}}\", // The ID of the token to list.\n assetContractAddress: \"{{asset_contract_address}}\", // The contract address of the asset being listed.\n currencyContractAddress: NATIVE_TOKEN_ADDRESS, // The address of the currency to accept for the listing.\n quantity: \"{{quantity}}\",\n startTimestamp: new Date(),\n buyoutBidAmount: \"{{buyout_bid_amount}}\",\n minimumBidAmount: \"{{minimum_bid_amount}}\",\n endTimestamp: new Date(),\n bidBufferBps: \"{{bid_buffer_bps}}\",\n timeBufferInSeconds: \"{{time_buffer_in_seconds}}\",\n })\n }\n >\n Create Auction Listing\n </Web3Button>\n );\n}"
},
"reference": {
"javascript": "https://docs.thirdweb.com/react/react.usecreateauctionlisting"
}
},
{
"name": "useEnglishAuction",
"summary": "Hook to get an english auction listing from a [Marketplace V3](https://thirdweb.com/thirdweb.eth/MarketplaceV3) contract.\n\n**Note: This hook is only for [Marketplace V3](https://thirdweb.com/thirdweb.eth/MarketplaceV3) contracts.**\n\nFor `Marketplace` contracts, use `useListing` instead.\n\n",
"remarks": null,
"examples": {
"javascript": "import { useEnglishAuction, useContract } from \"@thirdweb-dev/react\";\n\nfunction App() {\n const { contract } = useContract(contractAddress, \"marketplace-v3\");\n const {\n data: englishAuction,\n isLoading,\n error,\n } = useEnglishAuction(contract, listingId);\n}"
},
"reference": {
"javascript": "https://docs.thirdweb.com/react/react.useenglishauction"
}
},
{
"name": "useEnglishAuctions",
"summary": "Hook to get a list of all English auctions from a [Marketplace V3](https://thirdweb.com/thirdweb.eth/MarketplaceV3) contract.\n\n**Note: This hook is only for [Marketplace V3](https://thirdweb.com/thirdweb.eth/MarketplaceV3) contracts.**\n\nFor `Marketplace` contracts, use `useListings` instead.\n\n",
"remarks": null,
"examples": {
"javascript": "import { useEnglishAuctions, useContract } from \"@thirdweb-dev/react\";\n\nfunction App() {\n const { contract } = useContract(contractAddress, \"marketplace-v3\");\n const {\n data: englishAuctions,\n isLoading,\n error,\n } = useEnglishAuctions(contract);\n}"
},
"reference": {
"javascript": "https://docs.thirdweb.com/react/react.useenglishauctions"
}
},
{
"name": "useEnglishAuctionsCount",
"summary": "Hook to get the total number of direct listings on a [Marketplace V3](https://thirdweb.com/thirdweb.eth/MarketplaceV3) contract.\n\n__This hook is only for [Marketplace V3](https://thirdweb.com/thirdweb.eth/MarketplaceV3) contracts.__\n\nFor `Marketplace` contracts, use `useListingsCount` instead.\n\n",
"remarks": null,
"examples": {
"javascript": "import { useEnglishAuctionsCount, useContract } from \"@thirdweb-dev/react\";\n\nfunction App() {\n const { contract } = useContract(contractAddress, \"marketplace-v3\");\n const {\n data: englishAuctionsCount,\n isLoading,\n error,\n } = useEnglishAuctionsCount(contract);\n}"
},
"reference": {
"javascript": "https://docs.thirdweb.com/react/react.useenglishauctionscount"
}
},
{
"name": "useEnglishAuctionWinningBid",
"summary": "Hook to get the winning bid for an English auction listing from a [Marketplace V3](https://thirdweb.com/thirdweb.eth/MarketplaceV3) contract.\n\n",
"remarks": null,
"examples": {
"javascript": "import { useEnglishAuctionWinningBid, useContract } from \"@thirdweb-dev/react\";\n\nfunction App() {\n const { contract } = useContract(contractAddress, \"marketplace-v3\");\n const {\n data: winningBid,\n isLoading,\n error,\n } = useEnglishAuctionWinningBid(contract, listingId);\n}"
},
"reference": {
"javascript": "https://docs.thirdweb.com/react/react.useenglishauctionwinningbid"
}
},
{
"name": "useValidEnglishAuctions",
"summary": "Hook to get all valid English auctions from a [Marketplace V3](https://thirdweb.com/thirdweb.eth/MarketplaceV3) contract.\n\nA listing is considered valid if the:\n\n- Auction has not expired (i.e. current time is before the end time of the auction) - Auction has not been canceled - Auction has not been bought out (all quantity has been sold)\n\n__This hook is only for [Marketplace V3](https://thirdweb.com/thirdweb.eth/MarketplaceV3) contracts.__\n\nFor [Marketplace](https://thirdweb.com/thirdweb.eth/Marketplace) contracts, use [useActiveListings](/react/react.useactivelistings) instead.\n\n",
"remarks": null,
"examples": {
"javascript": "import { useValidEnglishAuctions, useContract } from \"@thirdweb-dev/react\";\n\n// Your smart contract address\nconst contractAddress = \"{{contract_address}}\";\n\nfunction App() {\n const { contract } = useContract(contractAddress, \"marketplace-v3\");\n const {\n data: englishAuctions,\n isLoading,\n error,\n } = useValidEnglishAuctions(contract);\n}"
},
"reference": {
"javascript": "https://docs.thirdweb.com/react/react.usevalidenglishauctions"
}
}
],
"ERC721Revealable": [
{
"name": "useBatchesToReveal",
"summary": "Hook for fetching batches of lazy-minted NFTs that were set to be revealed at a later date, but have not yet been revealed.\n\nAvailable to use on contracts that implement the [ERC721Revealable](https://portal.thirdweb.com/contracts/build/extensions/erc-721/ERC721Revealable) or [ERC1155Revealable](https://portal.thirdweb.com/contracts/build/extensions/erc-1155/ERC1155Revealable) interfaces, such as the [NFT Drop](https://thirdweb.com/thirdweb.eth/DropERC721) and [Edition Drop](https://thirdweb.com/thirdweb.eth/DropERC1155) smart contracts.\n\n",
"remarks": null,
"examples": {
"tyepscript": "import { useBatchesToReveal, useContract } from \"@thirdweb-dev/react\";\n\nfunction App() {\n const { contract } = useContract(contractAddress);\n const { data: batches, isLoading, error } = useBatchesToReveal(contract);\n}"
},
"reference": {
"javascript": "https://docs.thirdweb.com/react/react.usebatchestoreveal"
}
},
{
"name": "useDelayedRevealLazyMint",
"summary": "Hook to lazy-mint a batch of NFTs with [delayed reveal](https://portal.thirdweb.com/glossary/delayed-reveal); allowing the owner to set placeholder metadata and reveal the metadata of the NFTs at a later time.\n\nAvailable to use on contracts that implement the [ERC721Revealable](https://portal.thirdweb.com/contracts/build/extensions/erc-721/ERC721Revealable) or [ERC1155Revealable](https://portal.thirdweb.com/contracts/build/extensions/erc-1155/ERC1155Revealable) interfaces.\n\n",
"remarks": null,
"examples": {
"tyepscript": "import {\n useDelayedRevealLazyMint,\n useContract,\n Web3Button,\n} from \"@thirdweb-dev/react\";\n\nfunction App() {\n const { contract } = useContract(contractAddress);\n const {\n mutateAsync: mintNft,\n isLoading,\n error,\n } = useDelayedRevealLazyMint(contract);\n\n const nftData = {\n placeholder: {\n name: \"My NFT\",\n description: \"This is my NFT\",\n image: \"ipfs://example.com/my-nft.png\", // Accepts any URL or File type\n },\n metadatas: [\n {\n name: \"My NFT\",\n description: \"This is my NFT\",\n image: \"ipfs://example.com/my-nft.png\", // Accepts any URL or File type\n },\n ],\n password: \"{{password}}\", // Password to be used for encryption\n };\n\n return (\n <Web3Button\n contractAddress={contractAddress}\n action={() => mintNft(nftData)}\n >\n Mint NFTs\n </Web3Button>\n );\n}"
},
"reference": {
"javascript": "https://docs.thirdweb.com/react/react.usedelayedreveallazymint"
}
},
{
"name": "useRevealLazyMint",
"summary": "Hook for revealing a batch of delayed reveal NFTs using [delayed reveal](https://portal.thirdweb.com/glossary/delayed-reveal).\n\nAvailable to use on contracts that implement the [ERC721Revealable](https://portal.thirdweb.com/contracts/build/extensions/erc-721/ERC721Revealable) or [ERC1155Revealable](https://portal.thirdweb.com/contracts/build/extensions/erc-1155/ERC1155Revealable) interfaces.\n```jsx\nimport { useRevealLazyMint } from \"@thirdweb-dev/react\";\n\nconst { mutateAsync, isLoading, error } = useRevealLazyMint(contract);\n```\n\n",
"remarks": null,
"examples": {
"tyepscript": "import {\n useContract,\n useRevealLazyMint,\n Web3Button,\n} from \"@thirdweb-dev/react\";\n\nfunction App() {\n // Contract must be an ERC-721 or ERC-1155 contract that implements the ERC721Revealable or ERC1155Revealable interface\n const { contract } = useContract(contractAddress);\n const {\n mutateAsync: revealLazyMint,\n isLoading,\n error,\n } = useRevealLazyMint(contract);\n\n return (\n <Web3Button\n contractAddress={contractAddress}\n action={() =>\n revealLazyMint({\n batchId: \"{{batch_id}}\", // ID of the batch to reveal (use useBatchesToReveal to get the batch IDs)\n password: \"{{password}}\", // Password to reveal the batch\n })\n }\n >\n Reveal Lazy Mint\n </Web3Button>\n );\n}"
},
"reference": {
"javascript": "https://docs.thirdweb.com/react/react.usereveallazymint"
}
}
],
"ERC1155Revealable@delayedReveal": [
{
"name": "useBatchesToReveal",
"summary": "Hook for fetching batches of lazy-minted NFTs that were set to be revealed at a later date, but have not yet been revealed.\n\nAvailable to use on contracts that implement the [ERC721Revealable](https://portal.thirdweb.com/contracts/build/extensions/erc-721/ERC721Revealable) or [ERC1155Revealable](https://portal.thirdweb.com/contracts/build/extensions/erc-1155/ERC1155Revealable) interfaces, such as the [NFT Drop](https://thirdweb.com/thirdweb.eth/DropERC721) and [Edition Drop](https://thirdweb.com/thirdweb.eth/DropERC1155) smart contracts.\n\n",
"remarks": null,
"examples": {
"tyepscript": "import { useBatchesToReveal, useContract } from \"@thirdweb-dev/react\";\n\nfunction App() {\n const { contract } = useContract(contractAddress);\n const { data: batches, isLoading, error } = useBatchesToReveal(contract);\n}"
},
"reference": {
"javascript": "https://docs.thirdweb.com/react/react.usebatchestoreveal"
}
},
{
"name": "useDelayedRevealLazyMint",
"summary": "Hook to lazy-mint a batch of NFTs with [delayed reveal](https://portal.thirdweb.com/glossary/delayed-reveal); allowing the owner to set placeholder metadata and reveal the metadata of the NFTs at a later time.\n\nAvailable to use on contracts that implement the [ERC721Revealable](https://portal.thirdweb.com/contracts/build/extensions/erc-721/ERC721Revealable) or [ERC1155Revealable](https://portal.thirdweb.com/contracts/build/extensions/erc-1155/ERC1155Revealable) interfaces.\n\n",
"remarks": null,
"examples": {
"tyepscript": "import {\n useDelayedRevealLazyMint,\n useContract,\n Web3Button,\n} from \"@thirdweb-dev/react\";\n\nfunction App() {\n const { contract } = useContract(contractAddress);\n const {\n mutateAsync: mintNft,\n isLoading,\n error,\n } = useDelayedRevealLazyMint(contract);\n\n const nftData = {\n placeholder: {\n name: \"My NFT\",\n description: \"This is my NFT\",\n image: \"ipfs://example.com/my-nft.png\", // Accepts any URL or File type\n },\n metadatas: [\n {\n name: \"My NFT\",\n description: \"This is my NFT\",\n image: \"ipfs://example.com/my-nft.png\", // Accepts any URL or File type\n },\n ],\n password: \"{{password}}\", // Password to be used for encryption\n };\n\n return (\n <Web3Button\n contractAddress={contractAddress}\n action={() => mintNft(nftData)}\n >\n Mint NFTs\n </Web3Button>\n );\n}"
},
"reference": {
"javascript": "https://docs.thirdweb.com/react/react.usedelayedreveallazymint"
}
},
{
"name": "useRevealLazyMint",
"summary": "Hook for revealing a batch of delayed reveal NFTs using [delayed reveal](https://portal.thirdweb.com/glossary/delayed-reveal).\n\nAvailable to use on contracts that implement the [ERC721Revealable](https://portal.thirdweb.com/contracts/build/extensions/erc-721/ERC721Revealable) or [ERC1155Revealable](https://portal.thirdweb.com/contracts/build/extensions/erc-1155/ERC1155Revealable) interfaces.\n```jsx\nimport { useRevealLazyMint } from \"@thirdweb-dev/react\";\n\nconst { mutateAsync, isLoading, error } = useRevealLazyMint(contract);\n```\n\n",
"remarks": null,
"examples": {
"tyepscript": "import {\n useContract,\n useRevealLazyMint,\n Web3Button,\n} from \"@thirdweb-dev/react\";\n\nfunction App() {\n // Contract must be an ERC-721 or ERC-1155 contract that implements the ERC721Revealable or ERC1155Revealable interface\n const { contract } = useContract(contractAddress);\n const {\n mutateAsync: revealLazyMint,\n isLoading,\n error,\n } = useRevealLazyMint(contract);\n\n return (\n <Web3Button\n contractAddress={contractAddress}\n action={() =>\n revealLazyMint({\n batchId: \"{{batch_id}}\", // ID of the batch to reveal (use useBatchesToReveal to get the batch IDs)\n password: \"{{password}}\", // Password to reveal the batch\n })\n }\n >\n Reveal Lazy Mint\n </Web3Button>\n );\n}"
},
"reference": {
"javascript": "https://docs.thirdweb.com/react/react.usereveallazymint"
}
}
],
"ERC721Burnable": [
{
"name": "useBurnNFT",
"summary": "Hook for burning a NFT on a smart contract.\n\nAvailable to use on smart contracts that implement the [`ERC721`](https://portal.thirdweb.com/contracts/build/extensions/erc-721/ERC721) or [`ERC1155`](https://portal.thirdweb.com/contracts/build/extensions/erc-1155/ERC1155) standard.\n\n",
"remarks": null,
"examples": {
"javascript": "import { useBurnNFT, useContract, Web3Button } from \"@thirdweb-dev/react\";\n\nconst contractAddress = \"{{contract_address}}\";\n// The tokenId of the NFT you want to burn\nconst tokenIdToBurn = \"{{tokenId}}}}\";\nconst amount = 1;\n\nfunction App() {\n const { contract } = useContract(contractAddress);\n const { mutateAsync: burnNft, isLoading, error } = useBurnNFT(contract);\n\n return (\n <Web3Button\n contractAddress={contractAddress}\n action={() =>\n burnNft({\n tokenId: tokenIdToBurn,\n amount: amount,\n })\n }\n >\n Burn NFT\n </Web3Button>\n );\n}"
},
"reference": {
"javascript": "https://docs.thirdweb.com/react/react.useburnnft"
}
}
],
"ERC1155Burnable@nft": [
{
"name": "useBurnNFT",
"summary": "Hook for burning a NFT on a smart contract.\n\nAvailable to use on smart contracts that implement the [`ERC721`](https://portal.thirdweb.com/contracts/build/extensions/erc-721/ERC721) or [`ERC1155`](https://portal.thirdweb.com/contracts/build/extensions/erc-1155/ERC1155) standard.\n\n",
"remarks": null,
"examples": {
"javascript": "import { useBurnNFT, useContract, Web3Button } from \"@thirdweb-dev/react\";\n\nconst contractAddress = \"{{contract_address}}\";\n// The tokenId of the NFT you want to burn\nconst tokenIdToBurn = \"{{tokenId}}}}\";\nconst amount = 1;\n\nfunction App() {\n const { contract } = useContract(contractAddress);\n const { mutateAsync: burnNft, isLoading, error } = useBurnNFT(contract);\n\n return (\n <Web3Button\n contractAddress={contractAddress}\n action={() =>\n burnNft({\n tokenId: tokenIdToBurn,\n amount: amount,\n })\n }\n >\n Burn NFT\n </Web3Button>\n );\n}"
},
"reference": {
"javascript": "https://docs.thirdweb.com/react/react.useburnnft"
}
}
],
"ERC20Burnable\n\n@token": [
{
"name": "useBurnToken",
"summary": "Hook for burning ERC20 tokens on a smart contract.\n\nAvailable to use on smart contracts that implement the [ERC20](https://portal.thirdweb.com/contracts/build/extensions/erc-20/ERC20) standard.\n\n",
"remarks": null,
"examples": {
"javascript": "import { useBurnToken, useContract, Web3Button } from \"@thirdweb-dev/react\";\n\nfunction App() {\n const { contract } = useContract(contractAddress);\n const { mutateAsync: burnToken, isLoading, error } = useBurnToken(contract);\n\n return (\n <Web3Button\n contractAddress={contractAddress}\n action={() =>\n burnToken({\n amount: \"10\", // Amount of tokens to burn\n })\n }\n >\n Burn Token\n </Web3Button>\n );\n}"
},
"reference": {
"javascript": "https://docs.thirdweb.com/react/react.useburntoken"
}
}
],
"DirectListings\n\n@marketplace": [
{
"name": "useCancelDirectListing",
"summary": "Hook for canceling a direct listing on a [MarketplaceV3](https://thirdweb.com/thirdweb.eth/MarketplaceV3) contract.\n\nDirect listings can be canceled at any time, (unless the listing has already been sold). Only the creator of the listing can cancel it.\n\n__Note: This hook is only for [Marketplace V3](https://thirdweb.com/thirdweb.eth/MarketplaceV3) contracts.__\n\nFor `Marketplace` contracts, use `useCancelListing` instead.\n\n",
"remarks": null,
"examples": {
"javascript": "import {\n useCancelDirectListing,\n useContract,\n Web3Button,\n} from \"@thirdweb-dev/react\";\nimport { ListingType } from \"@thirdweb-dev/sdk\";\n\nfunction App() {\n const { contract } = useContract(contractAddress, \"marketplace-v3\");\n const {\n mutateAsync: cancelDirectListing,\n isLoading,\n error,\n } = useCancelDirectListing(contract);\n\n return (\n <Web3Button\n contractAddress={contractAddress}\n action={() => cancelDirectListing(listingId)}\n >\n Cancel Direct Listing\n </Web3Button>\n );\n}"
},
"reference": {
"javascript": "https://docs.thirdweb.com/react/react.usecanceldirectlisting"
}
},
{
"name": "useCreateDirectListing",
"summary": "Hook for creating a new direct listing on a `Marketplace` or [MarketplaceV3](https://thirdweb.com/thirdweb.eth/MarketplaceV3) smart contract.\n\nDirect listings require the user to approve the marketplace to transfer the NFTs on their behalf as part of the listing creation process. This is because the marketplace needs permission to execute sales and transfer the NFTs to the buyer when a sale is made.\n\n",
"remarks": null,
"examples": {
"javascript": "import {\n useCreateDirectListing,\n useContract,\n Web3Button,\n} from \"@thirdweb-dev/react\";\n\nfunction App() {\n const { contract } = useContract(contractAddress, \"marketplace-v3\");\n const {\n mutateAsync: createDirectListing,\n isLoading,\n error,\n } = useCreateDirectListing(contract);\n\n return (\n <Web3Button\n contractAddress={contractAddress}\n action={() =>\n createDirectListing({\n assetContractAddress: \"{{asset_contract_address}}\",\n tokenId: \"{{token_id}}\",\n pricePerToken: \"{{price_per_token}}\",\n currencyContractAddress: \"{{currency_contract_address}}\",\n isReservedListing: false,\n quantity: \"{{quantity}}\",\n startTimestamp: new Date(),\n endTimestamp: new Date(\n new Date().getTime() + 7 * 24 * 60 * 60 * 1000,\n ),\n })\n }\n >\n Create Direct Listing\n </Web3Button>\n );\n}"
},
"reference": {
"javascript": "https://docs.thirdweb.com/react/react.usecreatedirectlisting"
}
},
{
"name": "useDirectListing",
"summary": "Hook to get a specific direct listing from a [Marketplace V3](https://thirdweb.com/thirdweb.eth/MarketplaceV3) contract.\n\n__This hook is only for [Marketplace V3](https://thirdweb.com/thirdweb.eth/MarketplaceV3) contracts.__\n\nFor `Marketplace` contracts, use `useListing` instead.\n\n",
"remarks": null,
"examples": {
"javascript": "import { useDirectListing, useContract } from \"@thirdweb-dev/react\";\n\nfunction App() {\n const { contract } = useContract(contractAddress, \"marketplace-v3\");\n const {\n data: directListing,\n isLoading,\n error,\n } = useDirectListing(contract, listingId);\n}"
},
"reference": {
"javascript": "https://docs.thirdweb.com/react/react.usedirectlisting"
}
},
{
"name": "useDirectListings",
"summary": "Hook to get all the direct listings from a [Marketplace V3](https://thirdweb.com/thirdweb.eth/MarketplaceV3) contract.\n\n__This hook is only for [Marketplace V3](https://thirdweb.com/thirdweb.eth/MarketplaceV3) contracts.__\n\nFor `Marketplace` contracts, use `useListings` instead.\n\n",
"remarks": null,
"examples": {
"javascript": "import { useDirectListings, useContract } from \"@thirdweb-dev/react\";\n\nfunction App() {\n const { contract } = useContract(contractAddress, \"marketplace-v3\");\n const {\n data: directListings,\n isLoading,\n error,\n } = useDirectListings(contract);\n}"
},
"reference": {
"javascript": "https://docs.thirdweb.com/react/react.usedirectlistings"
}
},
{
"name": "useDirectListingsCount",
"summary": "Hook to get the total number of direct listings on a [Marketplace V3](https://thirdweb.com/thirdweb.eth/MarketplaceV3) contract.\n\n__This hook is only for [Marketplace V3](https://thirdweb.com/thirdweb.eth/MarketplaceV3) contracts.__\n\nFor `Marketplace` contracts, use `useListingsCount` instead.\n\n",
"remarks": null,
"examples": {
"javascript": "import { useDirectListingsCount, useContract } from \"@thirdweb-dev/react\";\n\nfunction App() {\n const { contract } = useContract(contractAddress, \"marketplace-v3\");\n const {\n data: listingsCount,\n isLoading,\n error,\n } = useDirectListingsCount(contract);\n}"
},
"reference": {
"javascript": "https://docs.thirdweb.com/react/react.usedirectlistingscount"
}
},
{
"name": "useValidDirectListings",
"summary": "Hook to get a list of valid direct listings from a [Marketplace V3](https://thirdweb.com/thirdweb.eth/MarketplaceV3) contract.\n\nA listing is considered valid if the:\n\n- Seller still owns the NFT - Listing has not expired (time is before `endTimeInSeconds`) - Listing has not been canceled - Listing has not been bought out (all `quantity` of the NFTs have not been purchased)\n\n**Note: This hook is only for [Marketplace V3](https://thirdweb.com/thirdweb.eth/MarketplaceV3) contracts.**\n\nFor `Marketplace` contracts, use `useActiveListings` instead.\n\n",
"remarks": null,
"examples": {
"javascript": "import { useValidDirectListings, useContract } from \"@thirdweb-dev/react\";\n\nfunction App() {\n const { contract } = useContract(contractAddress, \"marketplace-v3\");\n const {\n data: directListings,\n isLoading,\n error,\n } = useValidDirectListings(contract);\n}"
},
"reference": {
"javascript": "https://docs.thirdweb.com/react/react.usevaliddirectlistings"
}
}
],
"ERC721LazyMintable\n\n@nftDrop": [
{
"name": "useClaimedNFTs",
"summary": "Hook for fetching all claimed NFTs from a given NFT Drop contract.\n\nAvailable to use on contracts that implement [`ERC721Claimable`](https://portal.thirdweb.com/contracts/build/extensions/erc-721/ERC721Claimable), such as the [NFT Drop](https://thirdweb.com/thirdweb.eth/DropERC721).\n\n",
"remarks": null,
"examples": {
"javascript": "import { useClaimedNFTs, useContract } from \"@thirdweb-dev/react\";\n\nfunction App() {\n const { contract } = useContract(contractAddress, \"nft-drop\");\n const { data: nfts, isLoading, error } = useClaimedNFTs(contract);\n}"
},
"reference": {
"javascript": "https://docs.thirdweb.com/react/react.useclaimednfts"
}
},
{
"name": "useClaimedNFTSupply",
"summary": "Hook for retrieving the total supply of NFTs claimed from an NFT Drop contract.\n\nAvailable to use on contracts that implement [`ERC721Claimable`](https://portal.thirdweb.com/contracts/build/extensions/erc-721/ERC721Claimable).\n\n",
"remarks": null,
"examples": {
"javascript": "import { useClaimedNFTSupply, useContract } from \"@thirdweb-dev/react\";\n\nfunction App() {\n const { contract } = useContract(contractAddress);\n const { data, isLoading } = useClaimedNFTSupply(contract);\n}"
},
"reference": {
"javascript": "https://docs.thirdweb.com/react/react.useclaimednftsupply"
}
},
{
"name": "useUnclaimedNFTs",
"summary": "Hook for fetching information about all NFTs that haven't been claimed yet from an NFT Drop contract.\n\nAvailable to use on contracts that extends the ERC721 spec\n\n",
"remarks": null,
"examples": {
"javascript": "import { useUnclaimedNFTs, useContract } from \"@thirdweb-dev/react\";\n\nfunction App() {\n const { contract } = useContract(contractAddress);\n const { data, isLoading, error } = useUnclaimedNFTs(contract);\n}"
},
"reference": {
"javascript": "https://docs.thirdweb.com/react/react.useunclaimednfts"
}
},
{
"name": "useUnclaimedNFTSupply",
"summary": "Hook for fetching the number of unclaimed NFTs from an NFT/Edition Drop contract.\n\nUnclaimed NFTs are tokens that were lazy-minted but have not yet been claimed by a user.\n\nAvailable to use on contracts that implement the [`LazyMint`](https://portal.thirdweb.com/contracts/build/extensions/general/LazyMint) extension; such as the [NFT Drop](https://thirdweb.com/thirdweb.eth/DropERC721) contract.\n\n",
"remarks": null,
"examples": {
"javascript": "import { useUnclaimedNFTSupply, useContract } from \"@thirdweb-dev/react\";\n\nfunction App() {\n const { contract } = useContract(contractAddress, \"nftDrop\");\n const { data, isLoading, error } = useUnclaimedNFTSupply(contract);\n}"
},
"reference": {
"javascript": "https://docs.thirdweb.com/react/react.useunclaimednftsupply"
}
}
],
"ERC1155ClaimConditionsV1": [
{
"name": "useClaimerProofs",
"summary": "Hook to get the claimer proofs for an address for [ERC20](https://portal.thirdweb.com/contracts/build/base-contracts/erc-20/drop), [ERC721](https://portal.thirdweb.com/contracts/build/base-contracts/erc-721/drop), and [ERC1155](https://portal.thirdweb.com/contracts/build/base-contracts/erc-1155/drop) drop contracts.\n\nA claimer proof is a set of data about a claimer's claim condition, including the claimer's address, the claimer's proof, and the claimer's max claimable amount, price, and currency address.\n\nThis is available for available for contracts that implement the \"ClaimConditions\" interface; such as [NFT Drop](https://thirdweb.com/thirdweb.eth/DropERC721), [Edition Drop](https://thirdweb.com/thirdweb.eth/DropERC1155), and [Token Drop](https://thirdweb.com/thirdweb.eth/DropERC20).\n\n",
"remarks": null,
"examples": {
"javascript": "import { useClaimerProofs, useContract } from \"@thirdweb-dev/react\";\n\nfunction App() {\n const { contract } = useContract(contractAddress);\n\n const {\n data: proof,\n isLoading,\n error,\n } = useClaimerProofs(contract, \"{{claimer_address}}\");\n}"
},
"reference": {
"javascript": "https://docs.thirdweb.com/react/react.useclaimerproofs"
}
},
{
"name": "useClaimIneligibilityReasons",
"summary": "Hook for fetching the reasons a wallet is not eligible to claim tokens from a drop, if any.\n\nThis is available for available for contracts that implement the \"ClaimConditions\" interface; such as [NFT Drop](https://thirdweb.com/thirdweb.eth/DropERC721), [Edition Drop](https://thirdweb.com/thirdweb.eth/DropERC1155), and [Token Drop](https://thirdweb.com/thirdweb.eth/DropERC20).\n\n",
"remarks": null,
"examples": {
"javascript": "import { useClaimIneligibilityReasons, useContract } from \"@thirdweb-dev/react\";\n\nfunction App() {\n const { contract } = useContract(contractAddress);\n const { data, isLoading, error } = useClaimIneligibilityReasons(contract, {\n walletAddress: \"0x123...\", // Use useAddress hook to get the user's wallet address\n quantity: 1, // Quantity to check eligibility for\n });\n}"
},
"reference": {
"javascript": "https://docs.thirdweb.com/react/react.useclaimineligibilityreasons"
}
},
{
"name": "useSetClaimConditions",
"summary": "Hook for setting claim conditions on a drop contract.\n\nThis is available for available for contracts that implement the \"ClaimConditions\" interface; such as [NFT Drop](https://thirdweb.com/thirdweb.eth/DropERC721), [Edition Drop](https://thirdweb.com/thirdweb.eth/DropERC1155), and [Token Drop](https://thirdweb.com/thirdweb.eth/DropERC20).\n\nWhen using an ERC1155 contract, you must also provide the token ID of the NFT you want to set claim conditions on as the second parameter to the hook.\n\n",
"remarks": null,
"examples": {
"tyepscript": "import {\n useSetClaimConditions,\n useContract,\n Web3Button,\n} from \"@thirdweb-dev/react\";\n\nfunction App() {\n const { contract } = useContract(contractAddress);\n const {\n mutateAsync: setClaimConditions,\n isLoading,\n error,\n } = useSetClaimConditions(contract);\n\n const claimConditions = {\n phases: [\n {\n metadata: {\n name: \"Phase 1\", // The name of the phase\n },\n currencyAddress: \"0x...\", // The address of the currency you want users to pay in\n price: 1, // The price of the token in the currency specified above\n maxClaimablePerWallet: 1, // The maximum number of tokens a wallet can claim\n maxClaimableSupply: 100, // The total number of tokens that can be claimed in this phase\n startTime: new Date(), // When the phase starts (i.e. when users can start claiming tokens)\n waitInSeconds: 60 * 60 * 24 * 7, // The period of time users must wait between repeat claims\n snapshot: [\n {\n address: \"0x...\", // The address of the wallet\n currencyAddress: \"0x...\", // Override the currency address this wallet pays in\n maxClaimable: 5, // Override the maximum number of tokens this wallet can claim\n price: 0.5, // Override the price this wallet pays\n },\n ],\n merkleRootHash: \"0x...\", // The merkle root hash of the snapshot\n },\n ],\n }\n\n return (\n <Web3Button\n contractAddress={contractAddress}\n action={() => setClaimConditions(claimConditions)}\n >\n Set Claim Conditions\n </Web3Button>\n );\n}"
},
"reference": {
"javascript": "https://docs.thirdweb.com/react/react.usesetclaimconditions"
}
}
],
"ERC721Claimable": [
{
"name": "useClaimNFT",
"summary": "Hook for claiming an NFT from a smart contract.\n\nAvailable to use on smart contracts that implement a `Claimable` interface, and follow either the `ERC721`or `ERC1155` standard.\n\n",
"remarks": null,
"examples": {
"javascript": "import { useContract, useClaimNFT, Web3Button } from \"@thirdweb-dev/react\";\n\nfunction App() {\n const { contract } = useContract(contractAddress);\n const { mutateAsync: claimNft, isLoading, error } = useClaimNFT(contract);\n\n return (\n <Web3Button\n contractAddress={contractAddress}\n action={() =>\n claimNft({\n to: \"{{wallet_address}}\", // Use useAddress hook to get current wallet address\n quantity: 1,\n })\n }\n >\n Claim NFT\n </Web3Button>\n );\n}"
},
"reference": {
"javascript": "https://docs.thirdweb.com/react/react.useclaimnft"
}
}
],
"ERC1155Claimable": [
{
"name": "useClaimNFT",
"summary": "Hook for claiming an NFT from a smart contract.\n\nAvailable to use on smart contracts that implement a `Claimable` interface, and follow either the `ERC721`or `ERC1155` standard.\n\n",
"remarks": null,
"examples": {
"javascript": "import { useContract, useClaimNFT, Web3Button } from \"@thirdweb-dev/react\";\n\nfunction App() {\n const { contract } = useContract(contractAddress);\n const { mutateAsync: claimNft, isLoading, error } = useClaimNFT(contract);\n\n return (\n <Web3Button\n contractAddress={contractAddress}\n action={() =>\n claimNft({\n to: \"{{wallet_address}}\", // Use useAddress hook to get current wallet address\n quantity: 1,\n })\n }\n >\n Claim NFT\n </Web3Button>\n );\n}"
},
"reference": {
"javascript": "https://docs.thirdweb.com/react/react.useclaimnft"
}
}
],
"ERC1155ClaimConditionsV1@nftDrop": [
{
"name": "useClaimNFT",
"summary": "Hook for claiming an NFT from a smart contract.\n\nAvailable to use on smart contracts that implement a `Claimable` interface, and follow either the `ERC721`or `ERC1155` standard.\n\n",
"remarks": null,
"examples": {
"javascript": "import { useContract, useClaimNFT, Web3Button } from \"@thirdweb-dev/react\";\n\nfunction App() {\n const { contract } = useContract(contractAddress);\n const { mutateAsync: claimNft, isLoading, error } = useClaimNFT(contract);\n\n return (\n <Web3Button\n contractAddress={contractAddress}\n action={() =>\n claimNft({\n to: \"{{wallet_address}}\", // Use useAddress hook to get current wallet address\n quantity: 1,\n })\n }\n >\n Claim NFT\n </Web3Button>\n );\n}"
},
"reference": {
"javascript": "https://docs.thirdweb.com/react/react.useclaimnft"
}
},
{
"name": "useResetClaimConditions",
"summary": "Hook for resetting the claim conditions on a drop contract.\n\nAvailable to use on contracts that implement [`ERC721ClaimableWithConditions`](https://portal.thirdweb.com/contracts/build/extensions/erc-721/ERC721ClaimConditions), [`ERC1155ClaimableWithConditions`](https://portal.thirdweb.com/contracts/build/extensions/erc-1155/ERC1155ClaimConditions) or [`ERC20ClaimableWithConditions`](https://portal.thirdweb.com/contracts/build/extensions/erc-20/ERC20ClaimConditions).\n\n",
"remarks": null,
"examples": {
"javascript": "import {\n useContract,\n useResetClaimConditions,\n Web3Button,\n} from \"@thirdweb-dev/react\";\n\nfunction App() {\n // Contract must be a drop contract that implements claim conditions\n const { contract } = useContract(contractAddress);\n const {\n mutateAsync: resetClaimConditions,\n isLoading,\n error,\n } = useResetClaimConditions(contract);\n\n return (\n <Web3Button\n contractAddress={contractAddress}\n action={() => resetClaimConditions()}\n >\n Reset Claim Conditions\n </Web3Button>\n );\n}"
},
"reference": {
"javascript": "https://docs.thirdweb.com/react/react.useresetclaimconditions"
}
}
],
"ERC20ClaimConditionsV1@token": [
{
"name": "useClaimToken",
"summary": "Hook for claiming a ERC20 tokens from a smart contract.\n\nAvailable to use on smart contracts that implement both the [ERC20](https://portal.thirdweb.com/contracts/build/extensions/erc-20/ERC20) interface and the [`claim`](https://portal.thirdweb.com/contracts/build/extensions/erc-721/ERC721Claimable) function, such as the [Token Drop](https://thirdweb.com/thirdweb.eth/DropERC20).\n\n",
"remarks": null,
"examples": {
"javascript": "import { useClaimToken, useContract, Web3Button } from \"@thirdweb-dev/react\";\n\nfunction App() {\n const { contract } = useContract(contractAddress);\n const { mutateAsync: claimToken, isLoading, error } = useClaimToken(contract);\n\n return (\n <Web3Button\n contractAddress={contractAddress}\n action={() =>\n claimToken({\n to: \"{{wallet_address}}\", // Use useAddress hook to get current wallet address\n amount: 100, // Amount of token to claim\n })\n }\n >\n Claim Token\n </Web3Button>\n );\n}"
},
"reference": {
"javascript": "https://docs.thirdweb.com/react/react.useclaimtoken"
}
}
],
"ContractMetadata\n\n@metadata": [
{
"name": "useContractMetadata",
"summary": "Get the metadata of given contract\n\n",
"remarks": null,
"examples": {
"javascript": "const { data: contractMetadata, isLoading } = useContractMetadata(contract);"
},
"reference": {
"javascript": "https://docs.thirdweb.com/react/react.usecontractmetadata"
}
},
{
"name": "useContractMetadataUpdate",
"summary": "Update the metadata of the given contract\n\n",
"remarks": null,
"examples": {
"javascript": "const Component = () => {\n const { contract } = useContract(\"{{contract_address}}\");\n const {\n mutate: updateContractMetadata,\n isLoading,\n error,\n } = useContractMetadataUpdate(contract);\n\n if (error) {\n console.error(\"failed to update contract metadata\", error);\n }\n\n return (\n <button\n disabled={isLoading}\n onClick={() => updateContractMetadata({ name: \"New name\", description: \"New description\" })}\n >\n Update contract metadata\n </button>\n );\n};"
},
"reference": {
"javascript": "https://docs.thirdweb.com/react/react.usecontractmetadataupdate"
}
}
],
"DirectListings": [
{
"name": "useCreateDirectListingBatch",
"summary": "Create multiple direct listings in one batch\n\n",
"remarks": null,
"examples": {
"javascript": "const Component = () => {\n const { contract } = useContract(\"{{contract_address}}\");\n const {\n mutate: createDirectListingBatch,\n isLoading,\n error,\n } = useCreateDirectListingBatch(contract);\n\n if (error) {\n console.error(\"failed to create direct listing batch\", error);\n }\n\n // Sample data\n const directListingData = [\n {\n assetContractAddress: \"nft-contract-address\",\n tokenId: \"token-id-1\",\n quantity: \"quantity-1\",\n currencyContractAddress: \"currency-address\",\n pricePerToken: 1\n },\n {\n assetContractAddress: \"nft-contract-address\",\n tokenId: \"token-id-2\",\n quantity: 1,\n currencyContractAddress: \"currency-address\",\n pricePerToken: 0\n },\n ];\n return (\n <button\n disabled={isLoading}\n onClick={() => createDirectListingBatch(directListingData)}\n >\n Create batch Direct Listing!\n </button>\n );\n};"
},
"reference": {
"javascript": "https://docs.thirdweb.com/react/react.usecreatedirectlistingbatch"
}
}
],
"Permissions": [
{
"name": "useGrantRole",
"summary": "Hook for granting a role on a smart contract.\n\nAvailable to use on smart contracts that implement the [`Permissions`](https://portal.thirdweb.com/contracts/build/extensions/general/Permissions) interface.\n\n",
"remarks": null,
"examples": {
"javascript": "import { useGrantRole, useContract, Web3Button } from \"@thirdweb-dev/react\";\n\nconst contractAddress = \"{{contract_address}}\";\nconst roleToGrant = \"{{role}}\";\nconst walletAddressToGrant = \"{{wallet_address}}\";\n\nfunction App() {\n const { contract } = useContract(contractAddress);\n const { mutateAsync: grantRole, isLoading, error } = useGrantRole(contract);\n\n return (\n <Web3Button\n contractAddress={contractAddress}\n action={() =>\n grantRole({\n role: roleToGrant, // name of your role.\n address: walletAddressToGrant, // address to grant the role to.\n })\n }\n >\n Grant Role\n </Web3Button>\n );\n}"
},
"reference": {
"javascript": "https://docs.thirdweb.com/react/react.usegrantrole"
}
}
],
"PermissionsEnumerable@permissionControl": [
{
"name": "useGrantRole",
"summary": "Hook for granting a role on a smart contract.\n\nAvailable to use on smart contracts that implement the [`Permissions`](https://portal.thirdweb.com/contracts/build/extensions/general/Permissions) interface.\n\n",
"remarks": null,
"examples": {
"javascript": "import { useGrantRole, useContract, Web3Button } from \"@thirdweb-dev/react\";\n\nconst contractAddress = \"{{contract_address}}\";\nconst roleToGrant = \"{{role}}\";\nconst walletAddressToGrant = \"{{wallet_address}}\";\n\nfunction App() {\n const { contract } = useContract(contractAddress);\n const { mutateAsync: grantRole, isLoading, error } = useGrantRole(contract);\n\n return (\n <Web3Button\n contractAddress={contractAddress}\n action={() =>\n grantRole({\n role: roleToGrant, // name of your role.\n address: walletAddressToGrant, // address to grant the role to.\n })\n }\n >\n Grant Role\n </Web3Button>\n );\n}"
},
"reference": {
"javascript": "https://docs.thirdweb.com/react/react.usegrantrole"
}
}
],
"ERC721LazyMintable": [
{
"name": "useLazyMint",
"summary": "Hook for lazy minting a batch of NFTs on a drop contract.\n\nAvailable to use on smart contracts that implement the \"Drop\" extension, and follow either the `ERC721` or `ERC1155` standard.\n\n",
"remarks": null,
"examples": {
"javascript": "import { useContract, useLazyMint, Web3Button } from \"@thirdweb-dev/react\";\n\nfunction App() {\n const { contract } = useContract(contractAddress);\n const { mutateAsync: lazyMint, isLoading, error } = useLazyMint(contract);\n\n return (\n <Web3Button\n contractAddress={contractAddress}\n action={() =>\n lazyMint({\n // Metadata of the NFTs to upload\n metadatas: [\n {\n name: \"My NFT\",\n description: \"An example NFT\",\n image: \"{{image_url}}\",\n },\n ],\n })\n }\n >\n Lazy Mint NFTs\n </Web3Button>\n );\n}"
},
"reference": {
"javascript": "https://docs.thirdweb.com/react/react.uselazymint"
}
}
],
"ERC1155LazyMintable@nftDrop": [
{
"name": "useLazyMint",
"summary": "Hook for lazy minting a batch of NFTs on a drop contract.\n\nAvailable to use on smart contracts that implement the \"Drop\" extension, and follow either the `ERC721` or `ERC1155` standard.\n\n",
"remarks": null,
"examples": {
"javascript": "import { useContract, useLazyMint, Web3Button } from \"@thirdweb-dev/react\";\n\nfunction App() {\n const { contract } = useContract(contractAddress);\n const { mutateAsync: lazyMint, isLoading, error } = useLazyMint(contract);\n\n return (\n <Web3Button\n contractAddress={contractAddress}\n action={() =>\n lazyMint({\n // Metadata of the NFTs to upload\n metadatas: [\n {\n name: \"My NFT\",\n description: \"An example NFT\",\n image: \"{{image_url}}\",\n },\n ],\n })\n }\n >\n Lazy Mint NFTs\n </Web3Button>\n );\n}"
},
"reference": {
"javascript": "https://docs.thirdweb.com/react/react.uselazymint"
}
}
],
"EnglishAuction\n\n@marketplace": [
{
"name": "useMinimumNextBid",
"summary": "Hook for getting the minimum value a bid must be to be valid in an auction listing on a `Marketplace` or [MarketplaceV3](https://thirdweb.com/thirdweb.eth/MarketplaceV3) contract.\n\nTakes into account the current highest bid, or the reserve price if there is no bid, and increments it by the bid buffer to calculate the minimum next bid.\n\n",
"remarks": null,
"examples": {
"javascript": "import { useContract, useMinimumNextBid } from \"@thirdweb-dev/react\";\n\nfunction App() {\n const { contract } = useContract(contractAddress, \"marketplace\");\n const { data, isLoading, error } = useMinimumNextBid(contract, listingId);\n}"
},
"reference": {
"javascript": "https://docs.thirdweb.com/react/react.useminimumnextbid"
}
}
],
"ERC721Mintable": [
{
"name": "useMintNFT",
"summary": "Hook for minting a new NFT on a smart contract.\n\nAvailable to use on smart contracts that implement the [`ERC721`](https://portal.thirdweb.com/contracts/build/extensions/erc-721/ERC721) or [`ERC1155`](https://portal.thirdweb.com/contracts/build/extensions/erc-1155/ERC1155) standard.\n\nBy default, the process uploads and pins the NFT metadata to IPFS before minting.\n\n",
"remarks": null,
"examples": {
"javascript": "import { useMintNFT, useContract, Web3Button } from \"@thirdweb-dev/react\";\n\nfunction App() {\n const { contract } = useContract(contractAddress);\n const { mutateAsync: mintNft, isLoading, error } = useMintNFT(contract);\n\n return (\n <Web3Button\n contractAddress={contractAddress}\n action={() =>\n mintNft({\n metadata: {\n name: \"My NFT\",\n description: \"This is my NFT\",\n image: \"ipfs://example.com/my-nft.png\", // Accepts any URL or File type\n },\n to: \"{{wallet_address}}\", // Use useAddress hook to get current wallet address\n })\n }\n >\n Mint NFT\n </Web3Button>\n );\n}"
},
"reference": {
"javascript": "https://docs.thirdweb.com/react/react.usemintnft"
}
}
],
"ERC1155Mintable@nft": [
{
"name": "useMintNFT",
"summary": "Hook for minting a new NFT on a smart contract.\n\nAvailable to use on smart contracts that implement the [`ERC721`](https://portal.thirdweb.com/contracts/build/extensions/erc-721/ERC721) or [`ERC1155`](https://portal.thirdweb.com/contracts/build/extensions/erc-1155/ERC1155) standard.\n\nBy default, the process uploads and pins the NFT metadata to IPFS before minting.\n\n",
"remarks": null,
"examples": {
"javascript": "import { useMintNFT, useContract, Web3Button } from \"@thirdweb-dev/react\";\n\nfunction App() {\n const { contract } = useContract(contractAddress);\n const { mutateAsync: mintNft, isLoading, error } = useMintNFT(contract);\n\n return (\n <Web3Button\n contractAddress={contractAddress}\n action={() =>\n mintNft({\n metadata: {\n name: \"My NFT\",\n description: \"This is my NFT\",\n image: \"ipfs://example.com/my-nft.png\", // Accepts any URL or File type\n },\n to: \"{{wallet_address}}\", // Use useAddress hook to get current wallet address\n })\n }\n >\n Mint NFT\n </Web3Button>\n );\n}"
},
"reference": {
"javascript": "https://docs.thirdweb.com/react/react.usemintnft"
}
}
],
"ERC1155Mintable\n\n@nft": [
{
"name": "useMintNFTSupply",
"summary": "Hook for minting additional supply to an _existing_ ERC-1155 token.\n\nAvailable to use on contracts that implement the [ERC1155Mintable](https://portal.thirdweb.com/contracts/build/extensions/erc-1155/ERC1155Mintable) interface, such as the [Edition](https://thirdweb.com/thirdweb.eth/TokenERC1155) or [Edition Drop](https://thirdweb.com/thirdweb.eth/DropERC1155).\n\nThe wallet address that initiates this transaction must have minting permissions on the contract.\n\n",
"remarks": null,
"examples": {
"javascript": "import { useContract, useMintNFTSupply, Web3Button } from \"@thirdweb-dev/react\";\n\nconst contractAddress = \"{{contract_address}}\";\nconst walletAddress = \"{{wallet_address}}\";\nconst tokenId = \"{{token_id}}\";\nconst additionalSupply = \"{{additional_supply}}\";\n\nfunction App() {\n // Contract must be an ERC-1155 contract that implements the ERC1155Mintable interface\n const { contract } = useContract(contractAddress);\n const {\n mutateAsync: mintNftSupply,\n isLoading,\n error,\n } = useMintNFTSupply(contract);\n\n return (\n <Web3Button\n contractAddress={contractAddress}\n action={() =>\n mintNftSupply({\n additionalSupply: additionalSupply, // Quantity to mint\n to: walletAddress, // Address to mint to\n tokenId: tokenId, // Token ID to add supply to\n })\n }\n >\n Mint NFT Supply\n </Web3Button>\n );\n}"
},
"reference": {
"javascript": "https://docs.thirdweb.com/react/react.usemintnftsupply"
}
}
],
"ERC20Mintable\n\n@token": [
{
"name": "useMintToken",
"summary": "Hook for minting new tokens in an ERC20 smart contract.\n\nAvailable to use on contracts that implement the [ERC20Mintable](https://portal.thirdweb.com/contracts/build/extensions/erc-20/ERC20BatchMintable) interface, such as the [Token](https://thirdweb.com/thirdweb.eth/TokenERC20) contract.\n\nThe wallet address that initiates this transaction must have minting permissions on the contract.\n\n",
"remarks": null,
"examples": {
"javascript": "import { useContract, useMintToken, Web3Button } from \"@thirdweb-dev/react\";\n\nconst contractAddress = \"{{contract_address}}\";\nconst walletAddress = \"{{wallet_address}}\";\nconst tokenAmount = \"{{token_amount}}\";\n\nfunction App() {\n // Contract must be an ERC-20 contract that implements the ERC20Mintable interface\n const { contract } = useContract(contractAddress, \"token\");\n const { mutateAsync: mintToken, isLoading, error } = useMintToken(contract);\n\n return (\n <Web3Button\n contractAddress={contractAddress}\n action={() =>\n mintToken({\n amount: tokenAmount, // Quantity to mint\n to: walletAddress, // Address to mint to\n })\n }\n >\n Mint Token\n </Web3Button>\n );\n}"
},
"reference": {
"javascript": "https://docs.thirdweb.com/react/react.useminttoken"
}
}
],
"ERC721": [
{
"name": "useNFT",
"summary": "Hook for fetching information about an NFT from a smart contract.\n\nAvailable to use on smart contracts that implement the [`ERC721`](https://portal.thirdweb.com/contracts/build/extensions/erc-721/ERC721) or [`ERC1155`](https://portal.thirdweb.com/contracts/build/extensions/erc-1155/ERC1155) standard.\n\nNFT metadata is automatically fetched from where the `tokenUri` is hosted (e.g. IPFS), and makes the `image` property available as a URL through our IPFS gateway (if the image is hosted on IPFS).\n\n",
"remarks": null,
"examples": {
"javascript": "import { useContract, useNFT } from \"@thirdweb-dev/react\";\n\n// The token ID of the NFT you want to fetch\nconst tokenId = 0;\n\nfunction App() {\n const { contract } = useContract(\"{{contract_address}}\");\n const { data: nft, isLoading, error } = useNFT(contract, tokenId);\n\n if (isLoading) return <div>Fetching NFT…</div>;\n if (error) return <div>Error fetching NFT</div>;\n if (!nft) return <div>NFT not found</div>;\n return <div>NFT: {nft.metadata.name}</div>;\n}"
},
"reference": {
"javascript": "https://docs.thirdweb.com/react/react.usenft"
}
},
{
"name": "useNFTBalance",
"summary": "Hook to get the quantity a user owns of a specific [ERC1155](https://portal.thirdweb.com/contracts/build/extensions/erc-1155/ERC1155) NFT.\n\nAvailable to use on smart contracts that implement the [`ERC1155`](https://portal.thirdweb.com/contracts/build/extensions/erc-1155/ERC1155) standard.\n\n",
"remarks": null,
"examples": {
"javascript": "import { useNFTBalance, useContract } from \"@thirdweb-dev/react\";\n\nfunction App() {\n const { contract } = useContract(contractAddress);\n const { isLoading, data, error } = useNFTBalance(\n contract,\n \"{{wallet_address}}\",\n \"{{token_id}}\",\n );\n}"
},
"reference": {
"javascript": "https://docs.thirdweb.com/react/react.usenftbalance"
}
},
{
"name": "useTransferNFT",
"summary": "Hook for transferring ERC721 or ERC1155 NFTs to another wallet address.\n\nAvailable to use on contracts that implement either the [ERC721](https://portal.thirdweb.com/contracts/build/extensions/erc-721/ERC721) and [ERC1155](https://portal.thirdweb.com/contracts/build/extensions/erc-1155/ERC1155) interfaces, such as the [Edition](https://thirdweb.com/thirdweb.eth/TokenERC1155) or [NFT Collection](https://thirdweb.com/thirdweb.eth/TokenERC721).\n\nThe wallet address that initiates this transaction must have transfer permissions on the contract (i.e. the tokens are not soulbound). It also must have the required amount of token(s) available to transfer.\n\n",
"remarks": null,
"examples": {
"javascript": "import { useContract, useTransferNFT, Web3Button } from \"@thirdweb-dev/react\";\n\n// Your NFT collection contract address\nconst contractAddress = \"{{contract_address}}\";\nconst walletAddress = \"{{wallet_address}}\";\nconst tokenId = \"{{token_id}}\";\n\nfunction App() {\n // Contract must be an ERC-721 or ERC-1155 contract\n const { contract } = useContract(contractAddress);\n const {\n mutateAsync: transferNFT,\n isLoading,\n error,\n } = useTransferNFT(contract);\n\n return (\n <Web3Button\n contractAddress={contractAddress}\n action={() =>\n transferNFT({\n to: walletAddress, // Address to transfer the token to\n tokenId: tokenId, // Token ID to transfer\n })\n }\n >\n Transfer\n </Web3Button>\n );\n}"
},
"reference": {
"javascript": "https://docs.thirdweb.com/react/react.usetransfernft"
}
}
],
"ERC1155@nft": [
{
"name": "useNFT",
"summary": "Hook for fetching information about an NFT from a smart contract.\n\nAvailable to use on smart contracts that implement the [`ERC721`](https://portal.thirdweb.com/contracts/build/extensions/erc-721/ERC721) or [`ERC1155`](https://portal.thirdweb.com/contracts/build/extensions/erc-1155/ERC1155) standard.\n\nNFT metadata is automatically fetched from where the `tokenUri` is hosted (e.g. IPFS), and makes the `image` property available as a URL through our IPFS gateway (if the image is hosted on IPFS).\n\n",
"remarks": null,
"examples": {
"javascript": "import { useContract, useNFT } from \"@thirdweb-dev/react\";\n\n// The token ID of the NFT you want to fetch\nconst tokenId = 0;\n\nfunction App() {\n const { contract } = useContract(\"{{contract_address}}\");\n const { data: nft, isLoading, error } = useNFT(contract, tokenId);\n\n if (isLoading) return <div>Fetching NFT…</div>;\n if (error) return <div>Error fetching NFT</div>;\n if (!nft) return <div>NFT not found</div>;\n return <div>NFT: {nft.metadata.name}</div>;\n}"
},
"reference": {
"javascript": "https://docs.thirdweb.com/react/react.usenft"
}
},
{
"name": "useNFTBalance",
"summary": "Hook to get the quantity a user owns of a specific [ERC1155](https://portal.thirdweb.com/contracts/build/extensions/erc-1155/ERC1155) NFT.\n\nAvailable to use on smart contracts that implement the [`ERC1155`](https://portal.thirdweb.com/contracts/build/extensions/erc-1155/ERC1155) standard.\n\n",
"remarks": null,
"examples": {
"javascript": "import { useNFTBalance, useContract } from \"@thirdweb-dev/react\";\n\nfunction App() {\n const { contract } = useContract(contractAddress);\n const { isLoading, data, error } = useNFTBalance(\n contract,\n \"{{wallet_address}}\",\n \"{{token_id}}\",\n );\n}"
},
"reference": {
"javascript": "https://docs.thirdweb.com/react/react.usenftbalance"
}
},
{
"name": "useTransferNFT",
"summary": "Hook for transferring ERC721 or ERC1155 NFTs to another wallet address.\n\nAvailable to use on contracts that implement either the [ERC721](https://portal.thirdweb.com/contracts/build/extensions/erc-721/ERC721) and [ERC1155](https://portal.thirdweb.com/contracts/build/extensions/erc-1155/ERC1155) interfaces, such as the [Edition](https://thirdweb.com/thirdweb.eth/TokenERC1155) or [NFT Collection](https://thirdweb.com/thirdweb.eth/TokenERC721).\n\nThe wallet address that initiates this transaction must have transfer permissions on the contract (i.e. the tokens are not soulbound). It also must have the required amount of token(s) available to transfer.\n\n",
"remarks": null,
"examples": {
"javascript": "import { useContract, useTransferNFT, Web3Button } from \"@thirdweb-dev/react\";\n\n// Your NFT collection contract address\nconst contractAddress = \"{{contract_address}}\";\nconst walletAddress = \"{{wallet_address}}\";\nconst tokenId = \"{{token_id}}\";\n\nfunction App() {\n // Contract must be an ERC-721 or ERC-1155 contract\n const { contract } = useContract(contractAddress);\n const {\n mutateAsync: transferNFT,\n isLoading,\n error,\n } = useTransferNFT(contract);\n\n return (\n <Web3Button\n contractAddress={contractAddress}\n action={() =>\n transferNFT({\n to: walletAddress, // Address to transfer the token to\n tokenId: tokenId, // Token ID to transfer\n })\n }\n >\n Transfer\n </Web3Button>\n );\n}"
},
"reference": {
"javascript": "https://docs.thirdweb.com/react/react.usetransfernft"
}
}
],
"ERC721Supply": [
{
"name": "useNFTs",
"summary": "Hook to query all NFTs associated with a smart contract.\n\nAvailable to use on smart contracts that implement the [`ERC721`](https://portal.thirdweb.com/contracts/build/extensions/erc-721/ERC721) or [`ERC1155`](https://portal.thirdweb.com/contracts/build/extensions/erc-1155/ERC1155) standard.\n\nNFT metadata is automatically fetched from where the `tokenUri` is hosted (e.g. IPFS), and makes the `image` property available as a URL through our IPFS gateway (if the image is hosted on IPFS).\n\nBy default, only returns the first `100` NFTs in the collection. You can use the `queryParams` argument to filter the NFTs that are returned or to paginate through the collection.\n\n",
"remarks": null,
"examples": {
"javascript": "import { useNFTs, useContract } from \"@thirdweb-dev/react\";\n\nfunction App() {\n const { contract } = useContract(contractAddress);\n const { data, isLoading, error } = useNFTs(contract);\n}"
},
"reference": {
"javascript": "https://docs.thirdweb.com/react/react.usenfts"
}
},
{
"name": "useTotalCirculatingSupply",
"summary": "Hook for fetching the total number of NFTs in circulation for a given smart contract.\n\nThis takes into account the increase in supply due to minting and the decrease in supply due to burning.\n\nAvailable to use on contracts that implement either the [ERC721](https://portal.thirdweb.com/contracts/build/extensions/erc-721/ERC721) or [ERC1155](https://portal.thirdweb.com/contracts/build/extensions/erc-1155/ERC1155) standard.\n\n",
"remarks": null,
"examples": {
"javascript": "import { useTotalCirculatingSupply, useContract } from \"@thirdweb-dev/react\";\n\nfunction App() {\n const { contract } = useContract(contractAddress);\n const { data, isLoading, error } = useTotalCirculatingSupply(contract);\n}"
},
"reference": {
"javascript": "https://docs.thirdweb.com/react/react.usetotalcirculatingsupply"
}
},
{
"name": "useTotalCount",
"summary": "Hook to get the total count of **unique** NFTs minted on a smart contract.\n\nAvailable to use on smart contracts that implement the [`ERC721`](https://portal.thirdweb.com/contracts/build/extensions/erc-721/ERC721) or [`ERC1155`](https://portal.thirdweb.com/contracts/build/extensions/erc-1155/ERC1155) standard.\n\nWhen used for ERC1155 contracts, the total count is the number of unique token IDs minted, _not_ the total supply of all tokens in circulation.\n\n",
"remarks": null,
"examples": {
"javascript": "import { useTotalCount, useContract } from \"@thirdweb-dev/react\";\n\nfunction App() {\n const { contract } = useContract(contractAddress);\n const { data: totalCount, isLoading, error } = useTotalCount(contract);\n}"
},
"reference": {
"javascript": "https://docs.thirdweb.com/react/react.usetotalcount"
}
}
],
"ERC721Enumerable": [
{
"name": "useNFTs",
"summary": "Hook to query all NFTs associated with a smart contract.\n\nAvailable to use on smart contracts that implement the [`ERC721`](https://portal.thirdweb.com/contracts/build/extensions/erc-721/ERC721) or [`ERC1155`](https://portal.thirdweb.com/contracts/build/extensions/erc-1155/ERC1155) standard.\n\nNFT metadata is automatically fetched from where the `tokenUri` is hosted (e.g. IPFS), and makes the `image` property available as a URL through our IPFS gateway (if the image is hosted on IPFS).\n\nBy default, only returns the first `100` NFTs in the collection. You can use the `queryParams` argument to filter the NFTs that are returned or to paginate through the collection.\n\n",
"remarks": null,
"examples": {
"javascript": "import { useNFTs, useContract } from \"@thirdweb-dev/react\";\n\nfunction App() {\n const { contract } = useContract(contractAddress);\n const { data, isLoading, error } = useNFTs(contract);\n}"
},
"reference": {
"javascript": "https://docs.thirdweb.com/react/react.usenfts"
}
},
{
"name": "useOwnedNFTs",
"summary": "Hook for accessing a list of NFTs owned by a single wallet address.\n\nAvailable to use on smart contracts that implement either ERC721Enumerable, ERC1155Enumerable, or ERC721Supply extensions.\n\n",
"remarks": null,
"examples": {
"javascript": "import { useOwnedNFTs, useContract, useAddress } from \"@thirdweb-dev/react\";\n\nfunction App() {\n const address = useAddress();\n const { contract } = useContract(contractAddress);\n const { data, isLoading, error } = useOwnedNFTs(contract, address);\n}"
},
"reference": {
"javascript": "https://docs.thirdweb.com/react/react.useownednfts"
}
}
],
"ERC1155Enumerable@nft": [
{
"name": "useNFTs",
"summary": "Hook to query all NFTs associated with a smart contract.\n\nAvailable to use on smart contracts that implement the [`ERC721`](https://portal.thirdweb.com/contracts/build/extensions/erc-721/ERC721) or [`ERC1155`](https://portal.thirdweb.com/contracts/build/extensions/erc-1155/ERC1155) standard.\n\nNFT metadata is automatically fetched from where the `tokenUri` is hosted (e.g. IPFS), and makes the `image` property available as a URL through our IPFS gateway (if the image is hosted on IPFS).\n\nBy default, only returns the first `100` NFTs in the collection. You can use the `queryParams` argument to filter the NFTs that are returned or to paginate through the collection.\n\n",
"remarks": null,
"examples": {
"javascript": "import { useNFTs, useContract } from \"@thirdweb-dev/react\";\n\nfunction App() {\n const { contract } = useContract(contractAddress);\n const { data, isLoading, error } = useNFTs(contract);\n}"
},
"reference": {
"javascript": "https://docs.thirdweb.com/react/react.usenfts"
}
},
{
"name": "useTotalCirculatingSupply",
"summary": "Hook for fetching the total number of NFTs in circulation for a given smart contract.\n\nThis takes into account the increase in supply due to minting and the decrease in supply due to burning.\n\nAvailable to use on contracts that implement either the [ERC721](https://portal.thirdweb.com/contracts/build/extensions/erc-721/ERC721) or [ERC1155](https://portal.thirdweb.com/contracts/build/extensions/erc-1155/ERC1155) standard.\n\n",
"remarks": null,
"examples": {
"javascript": "import { useTotalCirculatingSupply, useContract } from \"@thirdweb-dev/react\";\n\nfunction App() {\n const { contract } = useContract(contractAddress);\n const { data, isLoading, error } = useTotalCirculatingSupply(contract);\n}"
},
"reference": {
"javascript": "https://docs.thirdweb.com/react/react.usetotalcirculatingsupply"
}
},
{
"name": "useTotalCount",
"summary": "Hook to get the total count of **unique** NFTs minted on a smart contract.\n\nAvailable to use on smart contracts that implement the [`ERC721`](https://portal.thirdweb.com/contracts/build/extensions/erc-721/ERC721) or [`ERC1155`](https://portal.thirdweb.com/contracts/build/extensions/erc-1155/ERC1155) standard.\n\nWhen used for ERC1155 contracts, the total count is the number of unique token IDs minted, _not_ the total supply of all tokens in circulation.\n\n",
"remarks": null,
"examples": {
"javascript": "import { useTotalCount, useContract } from \"@thirdweb-dev/react\";\n\nfunction App() {\n const { contract } = useContract(contractAddress);\n const { data: totalCount, isLoading, error } = useTotalCount(contract);\n}"
},
"reference": {
"javascript": "https://docs.thirdweb.com/react/react.usetotalcount"
}
}
],
"ERC1155Enumerable": [
{
"name": "useOwnedNFTs",
"summary": "Hook for accessing a list of NFTs owned by a single wallet address.\n\nAvailable to use on smart contracts that implement either ERC721Enumerable, ERC1155Enumerable, or ERC721Supply extensions.\n\n",
"remarks": null,
"examples": {
"javascript": "import { useOwnedNFTs, useContract, useAddress } from \"@thirdweb-dev/react\";\n\nfunction App() {\n const address = useAddress();\n const { contract } = useContract(contractAddress);\n const { data, isLoading, error } = useOwnedNFTs(contract, address);\n}"
},
"reference": {
"javascript": "https://docs.thirdweb.com/react/react.useownednfts"
}
}
],
"ERC721Supply@nft": [
{
"name": "useOwnedNFTs",
"summary": "Hook for accessing a list of NFTs owned by a single wallet address.\n\nAvailable to use on smart contracts that implement either ERC721Enumerable, ERC1155Enumerable, or ERC721Supply extensions.\n\n",
"remarks": null,
"examples": {
"javascript": "import { useOwnedNFTs, useContract, useAddress } from \"@thirdweb-dev/react\";\n\nfunction App() {\n const address = useAddress();\n const { contract } = useContract(contractAddress);\n const { data, isLoading, error } = useOwnedNFTs(contract, address);\n}"
},
"reference": {
"javascript": "https://docs.thirdweb.com/react/react.useownednfts"
}
}
],
"PlatformFee\n\n@platformFees": [
{
"name": "usePlatformFees",
"summary": "Hook for getting the platform fee settings of a contract.\n\nAvailable to use on contracts that implement the [`PlatformFee`](https://portal.thirdweb.com/contracts/build/extensions/general/PlatformFee) interface.\n\n",
"remarks": null,
"examples": {
"javascript": "import { useContract, usePlatformFees } from \"@thirdweb-dev/react\";\n\nfunction App() {\n const { contract } = useContract(contractAddress);\n const { data, isLoading, error } = usePlatformFees(contract);\n}"
},
"reference": {
"javascript": "https://docs.thirdweb.com/react/react.useplatformfees"
}
}
],
"PrimarySale\n\n@platformFees": [
{
"name": "usePrimarySaleRecipient",
"summary": "Hook for getting the primary sales recipient of a smart contract.\n\nAvailable to use on contracts that implement the [`PrimarySale`](https://portal.thirdweb.com/contracts/build/extensions/general/PrimarySale) interface.\n\n",
"remarks": null,
"examples": {
"javascript": "import { useContract, usePrimarySaleRecipient } from \"@thirdweb-dev/react\";\n\nfunction App() {\n const { contract } = useContract(contractAddress);\n const { data, isLoading, error } = usePrimarySaleRecipient(contract);\n}"
},
"reference": {
"javascript": "https://docs.thirdweb.com/react/react.useprimarysalerecipient"
}
},
{
"name": "useUpdatePrimarySaleRecipient",
"summary": "Hook for updating the primary sale recipient on a smart contract.\n\nAvailable to use on smart contracts that implement the [`PrimarySale`](https://portal.thirdweb.com/contracts/build/extensions/general/PrimarySale) interface.\n\nThe wallet that initiates this transaction must have the required permissions to change the primary sale recipient (defaults to `\"admin\"` level).\n\n",
"remarks": null,
"examples": {
"javascript": "import {\n useUpdatePrimarySaleRecipient,\n useContract,\n Web3Button,\n} from \"@thirdweb-dev/react\";\n\nfunction App() {\n const { contract } = useContract(contractAddress);\n const {\n mutateAsync: updatePrimarySaleRecipient,\n isLoading,\n error,\n } = useUpdatePrimarySaleRecipient(contract);\n\n return (\n <Web3Button\n contractAddress={contractAddress}\n action={() => updatePrimarySaleRecipient(\"{{wallet_address}}\")}\n >\n Update Primary Sale Recipient\n </Web3Button>\n );\n}"
},
"reference": {
"javascript": "https://docs.thirdweb.com/react/react.useupdateprimarysalerecipient"
}
}
],
"Permissions\n\n@permissionControl": [
{
"name": "useRoleMembers",
"summary": "Hook for getting all wallet addresses that have a specific role in a smart contract.\n\nAvailable to use on contracts that implement the [`Permissions`](https://portal.thirdweb.com/contracts/build/extensions/general/Permissions) interface.\n\n",
"remarks": null,
"examples": {
"javascript": "import { useContract, useRoleMembers } from \"@thirdweb-dev/react\";\n\n// Your smart contract address (must implement permission controls)\nconst contractAddress = \"{{contract_address}}\";\n\nconst roleName = \"admin\";\n\nfunction App() {\n const { contract } = useContract(contractAddress);\n const { data, isLoading, error } = useRoleMembers(contract, roleName);\n}"
},
"reference": {
"javascript": "https://docs.thirdweb.com/react/react.userolemembers"
}
},
{
"name": "useSetAllRoleMembers",
"summary": "Overwrite the list of members for specific roles\n\n",
"remarks": null,
"examples": {
"javascript": "const Component = () => {\n const { contract } = useContract(\"{{contract_address}}\");\n const {\n mutate: overwriteRoles,\n isLoading,\n error,\n } = useSetAllRoleMembers(contract);\n\n if (error) {\n console.error(\"failed to overwrite roles\", error);\n }\n\n return (\n <button\n disabled={isLoading}\n onClick={() => overwriteRoles({ rolesWithAddresses: { minter: [\"{{wallet_address}\"] } })}\n >\n Overwrite Roles\n </button>\n );\n};"
},
"reference": {
"javascript": "https://docs.thirdweb.com/react/react.usesetallrolemembers"
}
}
],
"Royalty\n\n@platformFees": [
{
"name": "useRoyaltySettings",
"summary": "Hook for retrieving royalty settings of a smart contract.\n\nAvailable to use on contracts that implement the [`Royalty`](https://portal.thirdweb.com/contracts/build/extensions/general/Royalty) interface.\n\n",
"remarks": null,
"examples": {
"javascript": "import { useContract, useRoyaltySettings } from \"@thirdweb-dev/react\";\n\nfunction App() {\n const { contract } = useContract(contractAddress);\n const { data, isLoading, error } = useRoyaltySettings(contract);\n}"
},
"reference": {
"javascript": "https://docs.thirdweb.com/react/react.useroyaltysettings"
}
},
{
"name": "useUpdateRoyaltySettings",
"summary": "Hook for updating royalty settings on a smart contract.\n\nAvailable to use on smart contracts that implement the [`Royalty`](https://portal.thirdweb.com/contracts/build/extensions/general/Royalty) interface.\n\n",
"remarks": null,
"examples": {
"javascript": "import {\n useUpdateRoyaltySettings,\n useContract,\n Web3Button,\n} from \"@thirdweb-dev/react\";\n\nfunction App() {\n const { contract } = useContract(contractAddress);\n const {\n mutateAsync: updateRoyaltySettings,\n isLoading,\n error,\n } = useUpdateRoyaltySettings(contract);\n\n return (\n <Web3Button\n contractAddress={contractAddress}\n action={() =>\n updateRoyaltySettings({\n seller_fee_basis_points: 0,\n fee_recipient: \"{{wallet_address}}\",\n })\n }\n >\n Update Royalty Settings\n </Web3Button>\n );\n}"
},
"reference": {
"javascript": "https://docs.thirdweb.com/react/react.useupdateroyaltysettings"
}
}
],
"ERC721SharedMetadata\n\n@nft": [
{
"name": "useSharedMetadata",
"summary": "Get the shared metadata of an Open Edition NFT contract\n\n",
"remarks": null,
"examples": {
"javascript": "const { data: sharedMetadata, isLoading, error } = useSharedMetadata(contract);"
},
"reference": {
"javascript": "https://docs.thirdweb.com/react/react.usesharedmetadata"
}
}
],
"ERC20\n\n@token": [
{
"name": "useTokenBalance",
"summary": "Hook for fetching the balance a wallet has for a specific ERC20 token.\n\n__This hook is for _custom_ ERC20 tokens. For native tokens such as Ether, use `useBalance` or `useBalanceForAddress`__\n\nAvailable to use on contracts that implement the ERC20 interface.\n\n",
"remarks": null,
"examples": {
"javascript": "import { useTokenBalance, useContract } from \"@thirdweb-dev/react\";\n\nfunction App() {\n const { contract } = useContract(contractAddress, \"token\");\n const { data, isLoading, error } = useTokenBalance(contract, walletAddress);\n}"
},
"reference": {
"javascript": "https://docs.thirdweb.com/react/react.usetokenbalance"
}
},
{
"name": "useTokenDecimals",
"summary": "Hook for fetching the [decimals](https://docs.openzeppelin.com/contracts/3.x/erc20#a-note-on-decimals) of an [ERC20](https://portal.thirdweb.com/contracts/build/extensions/erc-20/ERC20) token.\n\nTokens usually opt for a value of `18`, imitating the relationship between Ether and Wei. Therefore, `18` is the default value returned by this function, unless your ERC20 contract explicitly overrides it.\n\n",
"remarks": null,
"examples": {
"javascript": "import { useTokenDecimals, useContract } from \"@thirdweb-dev/react\";\n\nfunction App() {\n const { contract } = useContract(contractAddress, \"token\");\n const { data, isLoading, error } = useTokenDecimals(contract);\n}"
},
"reference": {
"javascript": "https://docs.thirdweb.com/react/react.usetokendecimals"
}
},
{
"name": "useTokenSupply",
"summary": "Hook for fetching the total supply of an ERC20 token.\n\nThis takes into account the increase and decrease in supply when tokens are minted and burned.\n\n",
"remarks": null,
"examples": {
"javascript": "import { useTokenSupply } from \"@thirdweb-dev/react\";\n\nfunction App() {\n const { contract } = useContract(contractAddress);\n const { data, isLoading, error } = useTokenSupply(contract);\n}"
},
"reference": {
"javascript": "https://docs.thirdweb.com/react/react.usetokensupply"
}
},
{
"name": "useTransferBatchToken",
"summary": "Hook for transferring ERC20 tokens to multiple recipients in a single transaction (i.e. airdrop).\n\nAvailable to use on contracts that implement the [ERC20](https://portal.thirdweb.com/contracts/build/extensions/erc-20/ERC20) interface.\n\nThe wallet that initiates this transaction must have sufficient balance to cover the total amount of tokens being transferred and must have transfer permissions on the contract, i.e. tokens are not soulbound.\n\n",
"remarks": null,
"examples": {
"javascript": "import {\n useTransferBatchToken,\n useContract,\n Web3Button,\n} from \"@thirdweb-dev/react\";\n\nfunction App() {\n const { contract } = useContract(contractAddress, \"token\");\n const {\n mutateAsync: transferBatchToken,\n isLoading,\n error,\n } = useTransferBatchToken(contract);\n\n return (\n <Web3Button\n contractAddress={contractAddress}\n action={() =>\n transferBatchToken([\n {\n to: \"{{wallet_address}}\", // Transfer 10 tokens to a wallet\n amount: 10,\n },\n {\n to: \"{{wallet_address}}\", // Transfer 20 tokens to another wallet\n amount: 20,\n },\n ])\n }\n >\n Transfer Batch Tokens\n </Web3Button>\n );\n}"
},
"reference": {
"javascript": "https://docs.thirdweb.com/react/react.usetransferbatchtoken"
}
},
{
"name": "useTransferToken",
"summary": "Hook for transferring tokens on an ERC20 contract.\n\nAvailable to use on contracts that implement the [ERC20](https://portal.thirdweb.com/contracts/build/extensions/erc-20/ERC20) interface, such as the [Token](https://thirdweb.com/thirdweb.eth/TokenERC20) contract.\n\nThe wallet address that initiates this transaction must have a balance of tokens greater than or equal to the amount being transferred.\n\n",
"remarks": null,
"examples": {
"javascript": "import { useContract, useTransferToken, Web3Button } from \"@thirdweb-dev/react\";\n\nconst contractAddress = \"{{contract_address}}\";\nconst toAddress = \"{{to_address}}\";\nconst amount = \"{{amount}}\";\n\nfunction App() {\n const { contract } = useContract(contractAddress);\n const {\n mutate: transferTokens,\n isLoading,\n error,\n } = useTransferToken(contract);\n\n return (\n <Web3Button\n contractAddress={contractAddress}\n action={() =>\n transferTokens({\n to: toAddress, // Address to transfer to\n amount: amount, // Amount to transfer\n })\n }\n >\n Transfer\n </Web3Button>\n );\n}"
},
"reference": {
"javascript": "https://docs.thirdweb.com/react/react.usetransfertoken"
}
}
]
}