Files
web/apps/base-docs/docs/tools/thirdweb-sdk.md
taycaldwell 47ca5b7b77 Docs Site Revamp: Tutorials (#370)
* 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>
2024-03-28 11:33:18 -07:00

138 lines
5.3 KiB
Markdown
Raw Permalink 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.

---
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 doesnt 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 doesnt 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
```