mirror of
https://github.com/placeholder-soft/web.git
synced 2026-06-15 01:19:38 +08:00
* 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>
138 lines
5.3 KiB
Markdown
138 lines
5.3 KiB
Markdown
---
|
||
title: thirdweb SDK
|
||
slug: /tools/thirdweb-sdk
|
||
description: 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.
|
||
keywords:
|
||
[
|
||
thirdweb SDK,
|
||
thirdweb,
|
||
Base,
|
||
Base mainnet,
|
||
Base testnet,
|
||
Base network,
|
||
web3 applications,
|
||
smart contracts,
|
||
React,
|
||
TypeScript,
|
||
]
|
||
hide_table_of_contents: 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](https://portal.thirdweb.com/react), [React Native](https://portal.thirdweb.com/react-native), [TypeScript](https://portal.thirdweb.com/typescript), [Python](https://portal.thirdweb.com/python), [Go](https://portal.thirdweb.com/go), and [Unity](https://portal.thirdweb.com/unity).
|
||
|
||
Visit the [thirdweb documentation](https://portal.thirdweb.com/cli) for more instructions on using the thirdweb SDKs.
|
||
|
||
---
|
||
|
||
## Install
|
||
|
||
To install the thirdweb SDK, run:
|
||
|
||
```bash
|
||
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:
|
||
|
||
```javascript
|
||
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](https://portal.thirdweb.com/react). The thirdweb SDKs are also available in [React Native](https://portal.thirdweb.com/react-native), [TypeScript](https://portal.thirdweb.com/typescript), [Python](https://portal.thirdweb.com/python), [Go](https://portal.thirdweb.com/go), and [Unity](https://portal.thirdweb.com/unity).
|
||
|
||
If alternatively you'd like to initialize the SDK with Base Sepolia (testnet), use the following code instead:
|
||
|
||
```javascript
|
||
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](https://portal.thirdweb.com/contractkit/extensions). This is the easiest way to read data and write transactions with your smart contracts.
|
||
|
||
For example, if your contract implements the [ERC721](https://portal.thirdweb.com/contractkit/erc721) extension, you can utilize all of the functions of the [corresponding erc721 standard](https://portal.thirdweb.com/sdk/interacting-with-contracts/erc721) in the SDK.
|
||
|
||
As an example, below is a code snippet that uses [`useOwnedNFTs`](https://portal.thirdweb.com/react/react.useownednfts) hook to get a list of NFTs owned by a single wallet address:
|
||
|
||
```javascript
|
||
import { useOwnedNFTs } from '@thirdweb-dev/react';
|
||
|
||
const { data, isLoading, error } = useOwnedNFTs(contract, '{{wallet_address}}');
|
||
```
|
||
|
||
#### Usage
|
||
|
||
```javascript
|
||
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](https://portal.thirdweb.com/sdk/interacting-with-contracts#using-contract-extensions).
|
||
|
||
### Reading contract data
|
||
|
||
If your contract doesn’t use any [extensions](https://portal.thirdweb.com/contractkit/extensions), or you want to directly call functions on your smart contract to read data, you can use the [`useContractRead`](https://portal.thirdweb.com/react/react.usecontractread) hook.
|
||
|
||
Read data on your contract from a connected wallet:
|
||
|
||
```javascript
|
||
const { contract } = useContract('{{contract_address}}');
|
||
const { data: myData, isLoading } = useContractRead(contract, 'myFunction');
|
||
```
|
||
|
||
### Writing transactions
|
||
|
||
If your contract doesn’t use any [extensions](https://portal.thirdweb.com/contractkit/extensions), or you want to directly call functions on your smart contract to write data, you can use the [`useContractWrite`](https://portal.thirdweb.com/react/react.usecontractwrite) hook.
|
||
|
||
Make transactions on your contract from a connected wallet:
|
||
|
||
```javascript
|
||
const { contract } = useContract('{{contract_address}}');
|
||
const { mutateAsync: myFunctionAsync } = useContractWrite(contract, 'myFunction');
|
||
const tx = await myFunctionAsync(['argument1', 'argument2']); // Call the function
|
||
```
|