{
"": [
{
"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
Connected to {chain.name}
;\n }\n\n returnConnected to an unsupported network
;\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 returnLoading...
;\n if (connectionStatus === \"connecting\") returnConnecting...
;\n if (connectionStatus === \"connected\") returnYou are connected
;\n if (connectionStatus === \"disconnected\")\n returnYou are not connected to a wallet
;\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