* Add discord, twitter, and github icons. * Update docusaurus. * Move security page to sidebar. * Remove copyright from site footers. * Add caret icons for dropdown css override. * Build and style custom docs navbar. * Resolve Icon merge conflict. * Change Developers dropdown to Builders. * lint: Remove unused variable * Add tutorials; initial commit * Add and display new frontmatter * Convert tutorials to single page pt. 1 * Update tutorial data; fix paths * Ecopage - rubyscore + lore logos (#373) * Update ecosystem.json (#374) * Fix incorrectly rendering open graph metadata (#369) * feat(web): Serve dynamic og:metadata server-side * feat(docs): Serve dynamic og:metadata server-side * fix(web): Resolve linting errors * fix(web): Linting * fix(web): Additional linting corrections * fix(web): Resolve Typescript-related syntax error * refactor(web): Add ogData to data structure * fix(ecosystem): Typo in partner image name (#375) * feat(bridge): Add planned paused note to top of page (#376) * Update hyperframes to use state (#377) * Update hyperframes to use state * Respond to feedback * fix(bridge): Add default open graph metadata (#378) * Added Moralis to data indexers (#371) * Added Moralis to data indexers * typos * Update copy * Remove superlatives --------- Co-authored-by: taycaldwell <taylor.lee.caldwell@gmail.com> * docs(bridge): Update bridge pause to new date (#381) * mention setting `OP_NODE_L1_BEACON` (#380) * feat(docs): Add Uniswap V3 Base Sepolia contracts (#382) * Improve loading experience on jobs page (#389) * Docs Site Revamp: Navbar, Sidebar, and Doc Page (#379) * Add discord, twitter, and github icons. * Update docusaurus. * Move security page to sidebar. * Remove copyright from site footers. * Add caret icons for dropdown css override. * Build and style custom docs navbar. * Resolve Icon merge conflict. * Change Developers dropdown to Builders. * lint: Remove unused variable * Re-add node polyfills required for cookie manager to work. * Disable DocFeedback component. * Disable paginator and table of contents. * Add collapse icons for css override. * Fix Modal overlay styles. * Adjust DocChat floating button position. * Reorganize and restyle sidebar for new design. * Update gray0 and modal overlay styles. * Add stylesheet for new doc page styles. * Remove TODO. Add sidebar link hover styles. * Move responsive styles to bottom. * Disable breadcrumb component. Update layout spacing. --------- Co-authored-by: taycaldwell <taylor.lee.caldwell@gmail.com> * refactor(bridge): Drop bridge maintenance notice (#390) * Add tutorials; initial commit * Add and display new frontmatter * Update tutorial data * Fix frontmatter * Update TOC * Update tutorials page * Update toc margin * fix nested categories in sidebar * Add all tutorials back link --------- Co-authored-by: Jacob Moore <jacob.moore@coinbase.com> Co-authored-by: Kathryn <kathryn.snow@coinbase.com> Co-authored-by: wbnns <hello@wbnns.com> Co-authored-by: Brian Doyle <brian.doyle@coinbase.com> Co-authored-by: Filip Martinsson <martinsson.filip@gmail.com> Co-authored-by: abhi <abhijeet.bhagat@gmx.com> Co-authored-by: Matthew Bunday <matthew.bunday@coinbase.com>
5.3 KiB
title, slug, description, keywords, hide_table_of_contents
| title | slug | description | keywords | hide_table_of_contents | ||||||||||
|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|
| thirdweb SDK | /tools/thirdweb-sdk | Documentation for using the thirdweb SDK for building web3 applications and interacting with smart contracts on Base. This page covers installation, initialization, and functionalities in various programming languages. |
|
true |
thirdweb SDK
thirdweb SDK is a library that enables developers to build web3 applications and interact with any EVM-compatible blockchain.
You can use the thirdweb SDK to build apps and interact with smart contracts deployed on the Base network.
The thirdweb SDK is available in various programming languages, including: React, React Native, TypeScript, Python, Go, and Unity.
Visit the thirdweb documentation for more instructions on using the thirdweb SDKs.
Install
To install the thirdweb SDK, run:
npm install @thirdweb-dev/sdk ethers@5
Initializing the SDK with Base
To get started using the SDK, you must first initialize an instance of ThirdWebSDK, and connect to the Base network by passing in the Base chain.
To initialize the SDK with the Base network and get a contract:
import { Base } from '@thirdweb-dev/chains';
import { ThirdwebSDK } from '@thirdweb-dev/sdk/evm';
const sdk = new ThirdwebSDK(Base);
const contract = await sdk.getContract('0x0000000000000000000000000000000000000000');
:::info
The code snippet above uses the React SDK. The thirdweb SDKs are also available in React Native, TypeScript, Python, Go, and Unity.
If alternatively you'd like to initialize the SDK with Base Sepolia (testnet), use the following code instead:
import { BaseSepoliaTestnet } from '@thirdweb-dev/chains';
import { ThirdwebSDK } from '@thirdweb-dev/sdk/evm';
const sdk = new ThirdwebSDK(BaseSepoliaTestnet);
const contract = await sdk.getContract('0x0000000000000000000000000000000000000000');
:::
Interacting with smart contracts
Once you initialize the SDK and connect to a smart contract deployed to Base, you can start calling functions on it using the SDK.
:::info
Any interaction you make with a smart contract will be made from the connected wallet automatically.
:::
Using contract extension functions
The thirdweb SDK provides convenience functions when your smart contract uses extensions. This is the easiest way to read data and write transactions with your smart contracts.
For example, if your contract implements the ERC721 extension, you can utilize all of the functions of the corresponding erc721 standard in the SDK.
As an example, below is a code snippet that uses useOwnedNFTs hook to get a list of NFTs owned by a single wallet address:
import { useOwnedNFTs } from '@thirdweb-dev/react';
const { data, isLoading, error } = useOwnedNFTs(contract, '{{wallet_address}}');
Usage
import { useOwnedNFTs, useContract, useAddress } from '@thirdweb-dev/react';
// Your smart contract address
const contractAddress = '{{contract_address}}';
function App() {
const address = useAddress();
const { contract } = useContract(contractAddress);
const { data, isLoading, error } = useOwnedNFTs(contract, address);
}
For more examples on using contract extension functions, visit the thirdweb developer documentation.
Reading contract data
If your contract doesn’t use any extensions, or you want to directly call functions on your smart contract to read data, you can use the useContractRead hook.
Read data on your contract from a connected wallet:
const { contract } = useContract('{{contract_address}}');
const { data: myData, isLoading } = useContractRead(contract, 'myFunction');
Writing transactions
If your contract doesn’t use any extensions, or you want to directly call functions on your smart contract to write data, you can use the useContractWrite hook.
Make transactions on your contract from a connected wallet:
const { contract } = useContract('{{contract_address}}');
const { mutateAsync: myFunctionAsync } = useContractWrite(contract, 'myFunction');
const tx = await myFunctionAsync(['argument1', 'argument2']); // Call the function