thirdweb API

https://portal.thirdweb.com/reference
Admin
thirdweb API provides a unified interface for Web3 development, enabling scalable blockchain...
Tokens:933,936
Snippets:8,369
Trust Score:10
Update:4 months ago
Show doc for...
Tokens:
Raw
### Get or Deploy Module Example

Source: https://portal.thirdweb.com/references/typescript/v5/getOrDeployModule

Use this snippet to get an existing module or deploy a new one. Ensure you have initialized `client`, `chain`, `account`, and `contractId`.

```typescript
import { getOrDeployModule } from "thirdweb/modules";

const module = await getOrDeployModule({
  client,
  chain,
  account,
  contractId,
  publisher,
});
```

--------------------------------

### Get Buy With Crypto Transaction Status Example

Source: https://portal.thirdweb.com/references/typescript/v5/getBuyWithCryptoStatus

This example demonstrates how to get a quote for a buy with crypto transaction, handle potential approvals, send the transaction, and then poll for its status using `getBuyWithCryptoStatus`. It requires importing `sendTransaction`, `getBuyWithCryptoStatus`, and `getBuyWithCryptoQuote` from the `thirdweb` and `thirdweb/pay` modules.

```typescript
import { sendTransaction } from "thirdweb";
import { getBuyWithCryptoStatus, getBuyWithCryptoQuote } from "thirdweb/pay";

// get a quote between two tokens
const quote = await getBuyWithCryptoQuote(quoteParams);

// if approval is required, send the approval transaction
if (quote.approval) {
 const txResult = await sendTransaction({
   transaction: quote.approval,
   account: account, // account from connected wallet
 });

 await waitForReceipt(txResult);
}

// send the quoted transaction
const swapTxResult = await sendTransaction({
   transaction: quote.transactionRequest,
   account: account, // account from connected wallet
 });

await waitForReceipt(swapTxResult);

// keep polling the status of the quoted transaction until it returns a success or failure status
const status = await getBuyWithCryptoStatus({
   client,
   transactionHash: swapTxResult.transactionHash,
});
```

--------------------------------

### Default ConnectButton Setup

Source: https://portal.thirdweb.com/references/typescript/v5/ConnectButton

Basic setup for the ConnectButton component. Requires a thirdweb client instance.

```typescript
import { createThirdwebClient } from "thirdweb";
import { ConnectButton } from "thirdweb/react";

const client = createThirdwebClient({ clientId: "YOUR_CLIENT_ID" });

<ConnectButton client={client} />;
```

--------------------------------

### Default ConnectEmbed Setup

Source: https://portal.thirdweb.com/references/typescript/v5/ConnectEmbed

Basic setup for the ConnectEmbed component. Requires a thirdweb client instance.

```typescript
import { createThirdwebClient } from "thirdweb";
import { ConnectEmbed } from "thirdweb/react";

const client = createThirdwebClient({ clientId: "YOUR_CLIENT_ID" });

<ConnectEmbed client={client} />;
```

--------------------------------

### Get Wallet Balance Example

Source: https://portal.thirdweb.com/references/typescript/v5/getWalletBalance

Use this snippet to fetch the balance of a token or native currency for a wallet. Ensure you have initialized the `client`, `chain`, and provided the `address` and optionally `tokenAddress`.

```typescript
import { getWalletBalance } from "thirdweb/wallets";
const balance = await getWalletBalance({
  address,
  client,
  chain,
  tokenAddress,
});
```

--------------------------------

### App Metadata Example

Source: https://portal.thirdweb.com/references/typescript/v5/UseConnectModalOptions

Provides an example of how to structure app metadata, including name, URL, description, and logo URL, which is recommended for display in wallets.

```typescript
{
 name: "My App",
 url: "https://my-app.com",
 description: "some description about your app",
 logoUrl: "https://path/to/my-app/logo.svg",
}
```

--------------------------------

### Install Options Type

Source: https://portal.thirdweb.com/references/typescript/v5/batchmetadataerc1155/install

Defines the structure of the `options` object required by the `install` function, including the account, contract, and optional parameters.

```typescript
let options: {
 account: Account;
 contract: Readonly;
 params?: { publisher?: string };
};
```

--------------------------------

### Switching Blockchain with useSwitchActiveWalletChain

Source: https://portal.thirdweb.com/references/typescript/v5/useSwitchActiveWalletChain

This example demonstrates how to use the `useSwitchActiveWalletChain` hook to get a function for switching the active wallet's chain. It shows a button that, when clicked, calls the switch function with the `sepolia` chain configuration.

```typescript
import { useSwitchActiveWalletChain } from "thirdweb/react";
import { sepolia } from "thirdweb/chains";

const switchChain = useSwitchActiveWalletChain();

// later in your code
<button onClick={() => switchChain(sepolia)}>Switch Chain</button>;
```

--------------------------------

### OpenEditionMetadataERC721.install

Source: https://portal.thirdweb.com/references/typescript/v5/openeditionmetadataerc721/install

Installs the OpenEditionMetadataERC721 module on a core contract. This function prepares a transaction that, when sent, will install the module.

```APIDOC
## OpenEditionMetadataERC721.install

### Description
Installs the OpenEditionMetadataERC721 module on a core contract.

### Method Signature
`function install(options: { account: Account; contract: Readonly; params?: { publisher?: string }; }): PreparedTransaction;`

### Parameters
#### options
- **account** (Account) - Required - The account to use for the transaction.
- **contract** (Readonly) - Required - The core contract to install the module on.
- **params** (object) - Optional - Additional parameters for the installation.
  - **publisher** (string) - Optional - The publisher of the module.

### Returns
- **PreparedTransaction** - The transaction to install the module.

### Example
```typescript
import { OpenEditionMetadataERC721 } from "thirdweb/modules";

const transaction = OpenEditionMetadataERC721.install({
  contract: coreContract,
  account: account,
});

await sendTransaction({
  transaction,
  account,
});
```
```

--------------------------------

### Specify Supported Wallets

Source: https://portal.thirdweb.com/references/typescript/v5/ConnectButtonProps

Provide an array of supported wallets to the `wallets` prop. If not provided, default wallets and all EIP-6963 compliant installed wallet extensions will be used. This example shows how to include in-app, MetaMask, Coinbase, and Rainbow wallets.

```typescript
import { AutoConnect } from "thirdweb/react";
import { createWallet, inAppWallet } from "thirdweb/wallets";

const wallets = [
 inAppWallet(),
 createWallet("io.metamask"),
 createWallet("com.coinbase.wallet"),
 createWallet("me.rainbow"),
];

function Example() {
 return <ConnectButton client={client} wallets={wallets} />;
}

```

--------------------------------

### installPublishedExtension

Source: https://portal.thirdweb.com/references/typescript/v5/installPublishedExtension

Installs a published extension onto a dynamic contract. This function prepares a transaction that can then be sent to execute the installation.

```APIDOC
## installPublishedExtension

Installs a published extension on a dynamic contract.

### Method

`installPublishedExtension(options: InstallPublishedExtensionOptions): PreparedTransaction<any, AbiFunction, PrepareTransactionOptions>`

### Parameters

#### options

The options for installing a published extension.

- **account** (Account) - Required - The account to use for the transaction.
- **constructorParams** (Record<string, unknown>) - Optional - Parameters for the extension's constructor.
- **contract** (ThirdwebContract) - Required - The dynamic contract to install the extension on.
- **extensionName** (string) - Required - The name of the extension to install.
- **publisher** (string) - Optional - The address of the publisher of the extension.
- **version** (string) - Optional - The version of the extension to install.

### Returns

A prepared transaction to send.

### Example

```typescript
import { installPublishedExtension } from "thirdweb/dynamic-contracts";

const transaction = installPublishedExtension({
  client,
  chain,
  account,
  contract,
  extensionName: "MyExtension",
  publisherAddress: "0x...",
});

await sendTransaction({ transaction, account });
```
```

--------------------------------

### Install Module Transaction

Source: https://portal.thirdweb.com/references/typescript/v5/modules/installModule

Use this snippet to prepare a transaction for installing a module. Ensure you have the necessary contract, module contract, and data. The transaction can then be sent using `sendTransaction`.

```typescript
import { sendTransaction } from "thirdweb";
import { installModule } from "thirdweb/extensions/modules";

const transaction = installModule({
 contract,
 moduleContract: ...,
 data: ...,
 overrides: {
 ...
 }
});

// Send the transaction
await sendTransaction({ transaction, account });

```

--------------------------------

### Example: Enabling Account Abstraction

Source: https://portal.thirdweb.com/references/typescript/v5/UseConnectModalOptions

Demonstrates how to enable account abstraction with specific factory address, chain, and gas sponsorship options when connecting a wallet.

```typescript
import { sepolia } from "thirdweb/chains";
import { createThirdwebClient } from "thirdweb";
import { useConnectModal } from "thirdweb/react";

function Example() {
 const { connect } = useConnectModal();
 const client = createThirdwebClient({ clientId: "<your_client_id>" });

 async function handleConnect() {
 await connect({
 client,
 accountAbstraction: {
 factoryAddress: "0x123...",
 chain: sepolia,
 sponsorGas: true
 }
 })
 }

 return (
 <button onClick={handleConnect}>
 Connect
 </button>
 )

}
```

--------------------------------

### Get Installed Wallets

Source: https://portal.thirdweb.com/references/typescript/v5/getInstalledWallets

Call this function to get a list of all installed browser extension wallets. It uses the EIP-6963 standard for discovery.

```typescript
import { getInstalledWallets } from "thirdweb/wallets";

const wallets = await getInstalledWallets();
```

--------------------------------

### Create Thirdweb Client Example

Source: https://portal.thirdweb.com/references/typescript/v5/BridgeWidgetProps

Demonstrates how to initialize a ThirdwebClient, which is required for most SDK operations. Ensure you replace '<your_client_id>' with your actual client ID.

```typescript
import { createThirdwebClient } from "thirdweb";

const client = createThirdwebClient({
  clientId: "<your_client_id>",
});
```

--------------------------------

### Encode Install Data for OpenEditionMetadataERC721

Source: https://portal.thirdweb.com/references/typescript/v5/openeditionmetadataerc721/encodeInstall

Call this function to get the encoded data required for installing the OpenEditionMetadataERC721 module. No arguments are needed.

```typescript
import { OpenEditionMetadataERC721 } from "@thirdweb-dev/contracts/prebuilts/OpenEditionMetadataERC721";

const encodedData = OpenEditionMetadataERC721.encodeInstall();
console.log(encodedData);
```

--------------------------------

### Basic ThirdwebProvider Setup

Source: https://portal.thirdweb.com/references/typescript/v5/ThirdwebProvider

This snippet shows the most basic way to wrap your application with the ThirdwebProvider. Ensure you import it from 'thirdweb/react'.

```typescript
import { ThirdwebProvider } from "thirdweb/react";

function Example() {
  return (
    <ThirdwebProvider>
      <App />
    </ThirdwebProvider>
  );
}
```

--------------------------------

### Get Installed Modules

Source: https://portal.thirdweb.com/references/typescript/v5/modules/getInstalledModules

Use this function to retrieve a list of all modules installed on a given contract. Ensure you have the 'contract' object initialized.

```typescript
import { getInstalledModules } from "thirdweb/extensions/modules";

const result = await getInstalledModules({
  contract,
});
```

--------------------------------

### Creating a Server Wallet Instance

Source: https://portal.thirdweb.com/references/typescript/v5/serverWallet

Demonstrates how to create a server wallet instance using the serverWallet function with a client and wallet address.

```typescript
import { thirdwebClient, serverWallet } from "thirdweb";

const client = thirdwebClient({
  secretKey: "<your-project-secret-key>",
});

const myServerWallet = serverWallet({
  client,
  address: "<your-server-wallet-address>",
});
```

--------------------------------

### Create Base Account Wallet with Options

Source: https://portal.thirdweb.com/references/typescript/v5/BaseAccountWalletCreationOptions

Demonstrates how to create a Base Account wallet using `createWallet` with specific `appMetadata` and `chains` options.

```typescript
import { createWallet } from "thirdweb/wallets";
import { base } from "thirdweb/chains";

const wallet = createWallet("org.base.account", {
  appMetadata: {
    name: "My App",
    logoUrl: "https://example.com/logo.png",
  },
  chains: [base],
});

```

--------------------------------

### BuyWidget Example with Custom Theme

Source: https://portal.thirdweb.com/references/typescript/v5/BuyWidgetProps

Demonstrates how to create and apply a custom theme to the BuyWidget component using the `lightTheme` function.

```typescript
import {
  lightTheme
} from "thirdweb/react";

const customTheme = lightTheme({
  colors: {
    modalBg: "red",
  },
});

function Example() {
 return <BuyWidget client={client} theme={customTheme} />;
}
```

--------------------------------

### Encode Install Data for TransferableERC1155

Source: https://portal.thirdweb.com/references/typescript/v5/transferableerc1155/encodeInstall

Use this function to get the encoded data required for installing the TransferableERC1155 module. It returns a string representing the encoded data.

```typescript
function encodeInstall(): string;
```

```typescript
let returnType: string;
```

--------------------------------

### Encode Install Data for BatchMetadataERC1155

Source: https://portal.thirdweb.com/references/typescript/v5/batchmetadataerc1155/encodeInstall

Use this function to get the encoded installation data for the BatchMetadataERC1155 module. The function returns a string representing the encoded data.

```typescript
function encodeInstall(): string;
```

--------------------------------

### Using v0.7 Entrypoint with Smart Wallet

Source: https://portal.thirdweb.com/references/typescript/v5/smartWallet

Configure the smart wallet to use the v0.7 ERC4337 Entrypoint by specifying a compatible account factory, such as the predeployed DEFAULT_ACCOUNT_FACTORY_V0_7.

```typescript
import {
  smartWallet,
  DEFAULT_ACCOUNT_FACTORY_V0_7,
} from "thirdweb/wallets/smart";
import { sepolia } from "thirdweb/chains";

const wallet = smartWallet({
  chain: sepolia,
  sponsorGas: true, // enable sponsored transactions
  factoryAddress: DEFAULT_ACCOUNT_FACTORY_V0_7, // 0.7 factory address
});
```

--------------------------------

### Wallet ID Example

Source: https://portal.thirdweb.com/references/typescript/v5/Wallet

Demonstrates how to get the unique identifier for a connected wallet.

```typescript
const wallet = createWallet("io.metamask");
console.log(wallet.id); // "io.metamask"
```

--------------------------------

### Install MintableERC20 Module

Source: https://portal.thirdweb.com/references/typescript/v5/mintableerc20/install

Use this snippet to install the MintableERC20 module onto a core contract. Ensure you have the core contract and account objects initialized.

```typescript
import { MintableERC20 } from "thirdweb/modules";

const transaction = MintableERC20.install({
 contract: coreContract,
 account: account,
 params: {
    primarySaleRecipient: ...,
 },
});

await sendTransaction({
 transaction,
 account,
});
```

--------------------------------

### Get All Valid Offers

Source: https://portal.thirdweb.com/references/typescript/v5/marketplace/getAllValidOffers

Fetches up to 10 valid offers from the marketplace contract, starting from the first offer.

```typescript
import { getAllValidOffers } from "thirdweb/extensions/marketplace";

const validOffers = await getAllValidOffers({
  contract,
  start: 0,
  count: 10,
});
```

--------------------------------

### Simulate Transaction Example

Source: https://portal.thirdweb.com/references/typescript/v5/useSimulateTransaction

Import and use the useSimulateTransaction hook to get a mutate function for simulating transactions. The result can then be awaited.

```typescript
import { useSimulateTransaction } from "thirdweb/react";
const { mutate: simulateTx } = useSimulateTransaction();

// later
const result = await simulateTx(tx);
```

--------------------------------

### Shares Example

Source: https://portal.thirdweb.com/references/typescript/v5/SplitContractParams

An example of how to format the `shares` array, which contains bigint values representing the percentage distribution for each payee. The length must match the `payees` array.

```typescript
[
 5100n, // 51%
 4900n, // 49%
];
```

--------------------------------

### Wallet Event Subscription Example

Source: https://portal.thirdweb.com/references/typescript/v5/Wallet

Shows how to subscribe to various wallet events such as chain changes, account changes, and disconnections.

```typescript
wallet.subscribe("chainChanged", (chain) => {
  console.log("wallet is now connected to network:", chain);
});

wallet.subscribe("accountChanged", (account) => {
  console.log("wallet is now connected to account:", account);
});

wallet.subscribe("disconnect", () => {
  console.log("wallet is disconnected");
});
```

--------------------------------

### Get All Auctions

Source: https://portal.thirdweb.com/references/typescript/v5/marketplace/getAllAuctions

Fetches a list of all English auctions from a marketplace contract. Specify the starting index and the number of auctions to retrieve.

```typescript
import { getAllAuctions } from "thirdweb/extensions/marketplace";

const listings = await getAllAuctions({
  contract,
  start: 0,
  count: 10,
});
```

--------------------------------

### Client Initialization for BuyWidget

Source: https://portal.thirdweb.com/references/typescript/v5/BuyWidgetProps

Demonstrates how to create a ThirdwebClient instance, which is required for the BuyWidget. Ensure you provide either a clientId for client-side or secretKey for server-side usage.

```typescript
import { createThirdwebClient } from "thirdweb";

const client = createThirdwebClient({
  clientId: "<your_client_id>",
});

```

--------------------------------

### Get ERC1155 NFTs

Source: https://portal.thirdweb.com/references/typescript/v5/erc1155/getNFTs

Fetches a list of ERC1155 NFTs from a contract. Specify the starting index and the number of NFTs to retrieve.

```typescript
import { getNFTs } from "thirdweb/extensions/erc1155";

const nfts = await getNFTs({
  contract,
  start: 0,
  count: 10,
});
```

--------------------------------

### Call contractType

Source: https://portal.thirdweb.com/references/typescript/v5/thirdweb/contractType

Example of how to call the `contractType` function to get the contract's type. Ensure the `contract` object is properly initialized.

```typescript
import { contractType } from "thirdweb/extensions/thirdweb";

const result = await contractType({
  contract,
});
```

--------------------------------

### Viem WalletClient fromViem Method

Source: https://portal.thirdweb.com/references/typescript/v5/viemAdapter

This snippet shows how to create a viem WalletClient instance using the `fromViem` method, which is essential for integrating viem with Thirdweb.

```typescript
fromViem: (options: { walletClient: { account: undefined | (Account); addChain: (args: AddChainParameters) => Promise<void>; batch?: { multicall?: boolean | ({ batchSize?: number; deployless?: boolean; wait?: number }) }; cacheTime: number; ccipRead?: false | ({ request?: (parameters: CcipRequestParameters) => Promise<`0x${...}`> }); chain: undefined | (Chain); deployContract: (args: DeployContractParameters<abi, undefined | (Chain), undefined | (Account), chainOverride>) => Promise<`0x${string}`>; experimental_blockTag?: BlockTag; extend: (fn: (client: Client<Transport, undefined | (Chain), undefined | (Account), WalletRpcSchema, WalletActions<undefined | (Chain), undefined | (Account)>>) => client) => Client<Transport, undefined | (Chain), undefined | (Account), WalletRpcSchema, ({[K in string | number | symbol] : client[K]}) & (WalletActions<undefined | (Chain), undefined | (Account)>)>; getAddresses: () => Promise<GetAddressesReturnType>; getCallsStatus: (parameters: GetCallsStatusParameters) => Promise<{ atomic: boolean; capabilities?: ({  }) | ({  }); chainId: number; id: string; receipts?: Array<WalletCallReceipt<..., ...>>; status: undefined | "pending" | "success" | "failure"; statusCode: number; version: string }>; getCapabilities: (parameters?: GetCapabilitiesParameters<chainId>) => Promise<{[K in string | number | symbol] : chainId extends number ? { atomic?: ...; paymasterService?: ...; unstable_addSubAccount?: ... } : ChainIdToCapabilities<..., ...>[K]}>; getChainId: () => Promise<number>; getPermissions: () => Promise<GetPermissionsReturnType>; key: string; name: string; pollingInterval: number; prepareAuthorization: (parameters: PrepareAuthorizationParameters<undefined | (Account)>) => Promise<PrepareAuthorizationReturnType>; prepareTransactionRequest: (args: PrepareTransactionRequestParameters<undefined | (Chain), undefined | (Account), chainOverride, accountOverride, request>) => Promise<{[K in string | number | symbol] : (UnionRequiredBy<..., ...>) & (... extends ... ? ... : ...)[K]}>; request: EIP1193RequestFn<WalletRpcSchema>; requestAddresses: () => Promise<RequestAddressesReturnType>; requestPermissions: (args: { eth_accounts: Record<string, any> }) => Promise<RequestPermissionsReturnType>; sendCalls: (parameters: SendCallsParameters<undefined | (Chain), undefined | (Account), chainOverride, calls>) => Promise<{ capabilities?: {  }; id: string }>; sendCallsSync: (parameters: SendCallsSyncParameters<undefined | (Chain), undefined | (Account), chainOverride, calls>) => Promise<{ atomic: boolean; capabilities?: ({  }) | ({  }); chainId: number; id: string; receipts?: Array<WalletCallReceipt<..., ...>>; status: undefined | "pending" | "success" | "failure"; statusCode: number; version: string }>; sendRawTransaction: (args: SendRawTransactionParameters) => Promise<`0x${string}`>; sendRawTransactionSync: (args: SendRawTransactionSyncParameters) => Promise<TransactionReceipt>; sendTransaction: (args: SendTransactionParameters<undefined | (Chain), undefined | (Account), chainOverride, request>) => Promise<`0x${string}`>; sendTransactionSync: (args: SendTransactionSyncParameters<undefined | (Chain), undefined | (Account), chainOverride, request>) => Promise<TransactionReceipt>; showCallsStatus: (parameters: ShowCallsStatusParameters) => Promise<void>; signAuthorization: (parameters: SignAuthorizationParameters<undefined | (Account)>) => Promise<SignAut
```

--------------------------------

### Get All Offers

Source: https://portal.thirdweb.com/references/typescript/v5/marketplace/getAllOffers

Retrieves a list of offers from the marketplace contract. Specify the contract object and pagination options like `start` and `count`.

```typescript
import { getAllOffers } from "thirdweb/extensions/marketplace";

const listings = await getAllOffers({
  contract,
  start: 0,
  count: 10,
});
```

--------------------------------

### Get ENS Avatar

Source: https://portal.thirdweb.com/references/typescript/v5/ens/useEnsAvatar

Example of how to use the useEnsAvatar hook to fetch an ENS avatar. Requires a thirdweb client and an ENS name.

```typescript
import { useEnsAvatar } from "thirdweb/react";

const { data: ensAvatar } = useEnsAvatar({
  client,
  ensName: "my-ens-name.eth",
});
```

--------------------------------

### Configure Wallet Connection in BuyWidget

Source: https://portal.thirdweb.com/references/typescript/v5/BuyWidget

Customizes the wallet connection experience using the `connectOptions` prop. This example sets the modal size to 'compact' and the title to 'Sign in'.

```typescript
<BuyWidget
 client={client}
 chain={ethereum}
 amount="0.1"
 connectOptions={{
    connectModal: {
      size: "compact",
      title: "Sign in",
    },
  }}
/>;
```

--------------------------------

### Create and Use RPC Client

Source: https://portal.thirdweb.com/references/typescript/v5/getRpcClient

Demonstrates how to create an RPC client using `createThirdwebClient` and `getRpcClient`, and then make a JSON-RPC request to get the block number.

```typescript
import { createThirdwebClient } from "thirdweb";
import { getRpcClient } from "thirdweb/rpc";
import { ethereum } from "thirdweb/chains";

const client = createThirdwebClient({ clientId: "..." });
const rpcRequest = getRpcClient({ client, chain: ethereum });

const blockNumber = await rpcRequest({
  method: "eth_blockNumber",
});
```

--------------------------------

### Get Votes Example

Source: https://portal.thirdweb.com/references/typescript/v5/vote/getVotes

Demonstrates how to call the getVotes function to retrieve vote counts from a contract. Requires contract, account, and optionally blockNumber.

```typescript
import { getVotes } from "thirdweb/extensions/vote";

const result = await getVotes({
 contract,
 account: ...,
 blockNumber: ...,
});
```

--------------------------------

### Install Published Extension

Source: https://portal.thirdweb.com/references/typescript/v5/installPublishedExtension

Use this snippet to install a published extension on a dynamic contract. Ensure you have the necessary client, chain, account, and contract objects. The `extensionName` and `publisherAddress` are required.

```typescript
import { installPublishedExtension } from "thirdweb/dynamic-contracts";
const transaction = installPublishedExtension({
  client,
  chain,
  account,
  contract,
  extensionName: "MyExtension",
  publisherAddress: "0x...",
});
await sendTransaction({ transaction, account });
```

--------------------------------

### Get Contract Events Example

Source: https://portal.thirdweb.com/references/typescript/v5/getContractEvents-2

Demonstrates how to fetch decoded event logs from a contract. Ensure you have initialized `client` and defined `sepolia` and `transferEvent()`.

```typescript
import { Insight } from "thirdweb";

const events = await Insight.getContractEvents({
  client,
  chains: [sepolia],
  contractAddress: "0x1234567890123456789012345678901234567890",
  event: transferEvent(),
  decodeLogs: true,
});
```

--------------------------------

### Install ClaimableERC721 Module

Source: https://portal.thirdweb.com/references/typescript/v5/claimableerc721/install

Use this snippet to install the ClaimableERC721 module. Ensure you have the core contract, account, and primary sale recipient defined. The transaction is then sent using `sendTransaction`.

```typescript
import { ClaimableERC721 } from "thirdweb/modules";

const transaction = ClaimableERC721.install({
 contract: coreContract,
 account: account,
 params: {
 primarySaleRecipient: ..., 
 },
});

await sendTransaction({
 transaction,
 account,
});
```

--------------------------------

### Example Usage of PayEmbed with Connect Options

Source: https://portal.thirdweb.com/references/typescript/v5/PayEmbedConnectOptions

Demonstrates how to use the PayEmbed component with custom connection options, specifically configuring the connect modal's size and title.

```typescript
<PayEmbed
 client={client}
 connectOptions={{
    connectModal: {
      size: "compact",
      title: "Sign in",
    },
  }}
/>;
```

--------------------------------

### Get Auth Token for Wallet

Source: https://portal.thirdweb.com/references/typescript/v5/inAppWallet

Retrieve the authentication token for the wallet after connecting, which can be used for backend authentication. This example connects using Google OAuth.

```typescript
import { inAppWallet } from "thirdweb/wallets";

const wallet = inAppWallet();

await wallet.connect({
  client,
  strategy: "google",
});

const authToken = await wallet.getAuthToken(); // this will return a JWT token that can be used to authenticate the user in the backend
console.log(authToken);
```

--------------------------------

### Private Key Environment Variable Example

Source: https://portal.thirdweb.com/references/typescript/v5/PrivateKeyToAccountOptions

Shows how to securely load a private key from environment variables. Avoid committing private keys directly into code.

```typescript
const privateKey = process.env.PRIVATE_KEY;
```

--------------------------------

### Get NFTs with Options

Source: https://portal.thirdweb.com/references/typescript/v5/erc721/getNFTs

Use this snippet to retrieve a list of NFTs from an ERC721 contract by specifying the contract object, a starting index, and the count of NFTs to fetch.

```typescript
import { getNFTs } from "thirdweb/extensions/erc721";

const nfts = await getNFTs({
  contract,
  start: 0,
  count: 10,
});
```

--------------------------------

### Get Wallet Info using useWalletInfo

Source: https://portal.thirdweb.com/references/typescript/v5/useWalletInfo

This snippet demonstrates how to import and use the useWalletInfo hook to fetch and log the name of a wallet. Ensure you have the 'thirdweb/react' package installed.

```typescript
import { useWalletInfo } from "thirdweb/react";
 
const { data: walletInfo } = useWalletInfo("io.metamask");
console.log("wallet name", walletInfo?.name);

```

--------------------------------

### Connect Wallet with useConnect

Source: https://portal.thirdweb.com/references/typescript/v5/useConnect

Use the useConnect hook to initiate a wallet connection. This example demonstrates connecting a MetaMask wallet. Ensure you have instantiated the thirdweb client and imported necessary functions.

```typescript
import { createThirdwebClient } from "thirdweb";
import { useConnect } from "thirdweb/react";
import { createWallet } from "thirdweb/wallets";

const client = createThirdwebClient({
  clientId: "YOUR_CLIENT_ID",
});

function Example() {
 const { connect, isConnecting, error } = useConnect();
 return (
    <button
 onClick={() =>
 connect(async () => {
 // instantiate wallet
 const wallet = createWallet("io.metamask");
 // connect wallet
 await wallet.connect({
            client,
          });
 // return the wallet
 return wallet;
        })
 }
    >
      Connect
    </button>
  );
}
```

--------------------------------

### Get All Valid Auctions

Source: https://portal.thirdweb.com/references/typescript/v5/marketplace/getAllValidAuctions

Use this function to retrieve a list of all valid auctions from the marketplace. Ensure you have the contract object and specify the desired start index and count for pagination.

```typescript
import { getAllValidAuctions } from "thirdweb/extensions/marketplace";

const validAuctions = await getAllValidAuctions({
  contract,
  start: 0,
  count: 10,
});
```

--------------------------------

### Get All Listings

Source: https://portal.thirdweb.com/references/typescript/v5/marketplace/getAllListings

Use this snippet to retrieve a paginated list of direct listings from a marketplace contract. Specify the contract object and the desired range of listings using `start` and `count`.

```typescript
import { getAllListings } from "thirdweb/extensions/marketplace";

const listings = await getAllListings({
  contract,
  start: 0,
  count: 10,
});
```

--------------------------------

### Custom Theme Example

Source: https://portal.thirdweb.com/references/typescript/v5/BridgeWidgetProps

Shows how to create a custom theme for the widget by extending the default light theme. You can override specific properties like colors.

```typescript
import { lightTheme } from "thirdweb/react";

const customTheme = lightTheme({
  colors: { modalBg: "red" },
});
```

--------------------------------

### Viem Adapter Methods

Source: https://portal.thirdweb.com/references/typescript/v5/viemAdapter

This section details the various methods available through the viemAdapter for interacting with Viem wallet clients.

```APIDOC
## signMessage

### Description
Signs a message using the wallet.

### Method
`signMessage(args: SignMessageParameters<undefined | (Account)>) => Promise<`0x${string}`>`

## signTransaction

### Description
Signs a transaction.

### Method
`signTransaction(args: SignTransactionParameters<undefined | (Chain), undefined | (Account), chainOverride, request>) => Promise<TransactionSerialized<...>>`

## signTypedData

### Description
Signs typed data.

### Method
`signTypedData(args: SignTypedDataParameters<typedData, primaryType, undefined | (Account)>) => Promise<`0x${string}`>`

## switchChain

### Description
Switches the current chain of the wallet.

### Method
`switchChain(args: SwitchChainParameters) => Promise<void>`

## transport

### Description
Provides the transport configuration for the Viem client.

### Method
`transport: (TransportConfig<string, EIP1193RequestFn>) & (Record<string, any>)`

## type

### Description
The type of the adapter.

### Method
`type: string`

## uid

### Description
The unique identifier for the adapter.

### Method
`uid: string`

## waitForCallsStatus

### Description
Waits for the status of specific calls.

### Method
`waitForCallsStatus(parameters: WaitForCallsStatusParameters) => Promise<{ atomic: boolean; capabilities?: ({  }) | ({  }); chainId: number; id: string; receipts?: Array<WalletCallReceipt<..., ...>>; status: undefined | "pending" | "success" | "failure"; statusCode: number; version: string }>`

## watchAsset

### Description
Watches an asset in the user's wallet.

### Method
`watchAsset(args: WatchAssetParams) => Promise<boolean>`

## writeContract

### Description
Writes to a smart contract.

### Method
`writeContract(args: WriteContractParameters<abi, functionName, args, undefined | (Chain), undefined | (Account), chainOverride>) => Promise<`0x${string}`>`

## writeContractSync

### Description
Writes to a smart contract synchronously.

### Method
`writeContractSync(args: WriteContractSyncParameters<abi, functionName, args, undefined | (Chain), undefined | (Account), chainOverride>) => Promise<TransactionReceipt>`

## toViem

### Description
Converts the adapter to a Viem wallet client.

### Method
`toViem(options: ToViemWalletClientOptions) => { account: undefined | (Account); addChain: (args: AddChainParameters) => Promise<void>; batch?: { multicall?: boolean | ({ batchSize?: number; deployless?: boolean; wait?: number }) }; cacheTime: number; ccipRead?: false | ({ request?: (parameters: CcipRequestParameters) => Promise<`0x${string}`> }); chain: undefined | (Chain); deployContract: (args: DeployContractParameters<abi, undefined | (Chain), undefined | (Account), chainOverride>) => Promise<`0x${string}`>; experimental_blockTag?: BlockTag; extend: (fn: (client: Client<Transport, undefined | (Chain), undefined | (Account), WalletRpcSchema, WalletActions<undefined | (Chain), undefined | (Account)>>) => client) => Client<Transport, undefined | (Chain), undefined | (Account), WalletRpcSchema, ({[K in string | number | symbol] : client[K]}) & (WalletActions<undefined | (Chain), undefined | (Account)>)>; getAddresses: () => Promise<GetAddressesReturnType>; getCallsStatus: (parameters: GetCallsStatusParameters) => Promise<{ atomic: boolean; capabilities?: ({  }) | ({  }); chainId: number; id: string; receipts?: Array<WalletCallReceipt<bigint, (...) | (...)>>; status: undefined | "pending" | "success" | "failure"; statusCode: number; version: string }>; getCapabilities: (parameters?: GetCapabilitiesParameters<chainId>) => Promise<{[K in string | number | symbol] : chainId extends number ? { atomic?: (...) | (...); paymasterService?: (...) | (...); unstable_addSubAccount?: (...) | (...) } : ChainIdToCapabilities<Capabilities<...>, number>[K]}>; getChainId: () => Promise<number>; getPermissions: () => Promise<GetPermissionsReturnType>; key: string; name: string; pollingInterval: number; prepareAuthorization: (parameters: PrepareAuthorizationParameters<undefined | (Account)>) => Promise<PrepareAuthorizationReturnType>; prepareTransactionRequest: (args: PrepareTransactionRequestParameters<undefined | (Chain), undefined | (Account), chainOverride, accountOverride, request>) => Promise<{[K in string | number | symbol] : (UnionRequiredBy<(...) & (...), ParameterTypeToParameters<...>>) & (unknown extends ...[...] ? {  } : Pick<..., ...>)[K]}>; request: EIP1193RequestFn<WalletRpcSchema>; requestAddresses: () => Promise<RequestAddressesReturnType>; requestPermissions: (args: { eth_accounts: Record<string, any> }) => Promise<RequestPermissionsReturnType>; sendCalls: (parameters: SendCallsParameters<undefined | (Chain), undefined | (Account), chainOverride, calls>) => Promise<{ capabilities?: {  }; id: string }>; sendCallsSync: (parameters: SendCallsSyncParameters<undefined | (Chain), undefined | (Account), chainOverride, calls>) => Promise<{ atomic: boolean; capabilities?: ({  }) | ({  }); chainId: number; id: string; receipts?: Array<WalletCallReceipt<bigint, (...) | (...)>>; status: undefined | "pending" | "success" | "failure"; statusCode: number; version: string }>; sendRawTransaction: (args: SendRawTransactionParameters) => Promise<`0x${string}`>; sendRawTransactionSync: (args: SendRawTransactionSyncParameters) => Promise<TransactionReceipt>; sendTransaction: (args: SendTran`
```

--------------------------------

### Get a Buy Quote with Max Steps

Source: https://portal.thirdweb.com/references/typescript/v5/buy/quote

This example shows how to limit the quote to routes with a specific maximum number of steps. This can be useful for optimizing or filtering potential transaction paths.

```typescript
const quote = await Bridge.Buy.quote({
  originChainId: 1,
  originTokenAddress: NATIVE_TOKEN_ADDRESS,
  destinationChainId: 10,
  destinationTokenAddress: NATIVE_TOKEN_ADDRESS,
  amount: toWei("0.01"),
  maxSteps: 2, // Will only return a quote for routes with 2 or fewer steps
  client: thirdwebClient,
});
```

--------------------------------

### Generate Mint Signature and Mint Tokens

Source: https://portal.thirdweb.com/references/typescript/v5/mintableerc20/generateMintSignature

This example demonstrates the complete process of generating a mint signature, preparing the transaction, and sending it. It highlights the typical server-side generation of the signature and client-side execution.

```typescript
import { MintableERC20 } from "thirdweb/modules";

// generate the payload and signature, this is typically done on the server
// requires to be generated with a wallet that has the MINTER_ROLE
const { payload, signature } = 
 await MintableERC20.generateMintSignature({
    account,
    contract,
    mintRequest: {
      recipient: "0x...",
      quantity: "10",
    },
  });

// prepare the transaction, this is typically done on the client
// can be executed by any wallet
const transaction = MintableERC20.mintWithSignature({
  contract,
  payload,
  signature,
});

// Send the transaction
await sendTransaction({ transaction, account });

```

--------------------------------

### Using useAuthToken in a Component

Source: https://portal.thirdweb.com/references/typescript/v5/useAuthToken

This example shows how to use the useAuthToken hook within a React component to fetch data with an authorization header. Ensure you have the necessary setup for the hook to return a token.

```typescript
function MyComponent() {
 const authToken = useAuthToken();
 
 const fetchData = async () => {
 const response = await fetch("https://api.example.com/data", {
      headers: {
        Authorization: `Bearer ${authToken}`,
      },
    });
 // ... handle response
  };
}
```

--------------------------------

### Basic WalletProvider Usage

Source: https://portal.thirdweb.com/references/typescript/v5/WalletProvider

Demonstrates how to wrap child components with WalletProvider to access wallet data. Requires importing WalletProvider, WalletIcon, and WalletName from "thirdweb/react".

```typescript
import {
  WalletProvider,
  WalletIcon,
  WalletName,
} from "thirdweb/react";

<WalletProvider id="io.metamask">
  <WalletIcon />
  <WalletName />
</WalletProvider>;
```

--------------------------------

### Get All ERC721 Owners

Source: https://portal.thirdweb.com/references/typescript/v5/erc721/getAllOwners

Use this function to retrieve the owners of ERC721 tokens within a specified range. Ensure you have the contract object and specify the start index and count of tokens to query.

```typescript
import { getAllOwners } from "thirdweb/extensions/erc721";
const owners = await getAllOwners({
  contract,
  start: 0,
  count: 10,
});
```

--------------------------------

### Inferring CreateWalletArgs for MetaMask

Source: https://portal.thirdweb.com/references/typescript/v5/CreateWalletArgs

Example demonstrating how to use `CreateWalletArgs` to infer the argument types for creating a MetaMask wallet.

```typescript
type X = CreateWalletArgs<"io.metamask">;
```

--------------------------------

### Using useConnectModal to Open Connect UI

Source: https://portal.thirdweb.com/references/typescript/v5/useConnectModal

This example demonstrates how to use the `useConnectModal` hook to open a modal for wallet connection. It requires creating a Thirdweb client and then calling the `connect` function returned by the hook.

```typescript
import { createThirdwebClient } from "thirdweb";
import { useConnectModal } from "thirdweb/react";

const client = createThirdwebClient({
  clientId: "<your_client_id>",
});

function Example() {
 const { connect, isConnecting } = useConnectModal();

 async function handleConnect() {
 const wallet = await connect({ client }); // opens the connect modal
    console.log("connected to", wallet);
  }

 return <button onClick={handleConnect}> Connect </button>;
}
```

--------------------------------

### Polling Fiat Purchase Status

Source: https://portal.thirdweb.com/references/typescript/v5/getBuyWithFiatStatus

This example demonstrates how to poll the status of a fiat purchase. After getting a quote and opening the on-ramp link, repeatedly call `getBuyWithFiatStatus` until the status indicates completion or failure.

```typescript
import { ThirdwebClient } from "@thirdweb-dev/sdk";
import { getBuyWithFiatQuote, getBuyWithFiatStatus } from "@thirdweb-dev/sdk";

// Assume client and fiatQuoteParams are already defined
const client: ThirdwebClient = {} as any;
const fiatQuoteParams = {};

// step 1 - get a quote
const fiatQuote = await getBuyWithFiatQuote(fiatQuoteParams);

// step 2 - open the on-ramp provider UI
window.open(fiatQuote.onRampLink, "_blank");

// step 3 - keep calling getBuyWithFiatStatus while the status is in one of the pending states
let fiatStatus;
while (
  fiatStatus?.status === "NONE" ||
  fiatStatus?.status === "PENDING_PAYMENT" ||
  fiatStatus?.status === "ON_RAMP_TRANSFER_IN_PROGRESS" ||
  fiatStatus?.status === "CRYPTO_SWAP_IN_PROGRESS"
) {
  fiatStatus = await getBuyWithFiatStatus({
    client,
    intentId: fiatQuote.intentId,
  });
  // Optional: Add a delay before polling again to avoid excessive requests
  await new Promise(resolve => setTimeout(resolve, 5000)); // Poll every 5 seconds
}

// when the fiatStatus.status is "ON_RAMP_TRANSFER_COMPLETED" - the process is complete
console.log("Fiat purchase status:", fiatStatus);

```

--------------------------------

### Create a Server Wallet

Source: https://portal.thirdweb.com/references/typescript/v5/createServerWallet

Use this snippet to create a new server wallet. Ensure you have initialized the `client` object beforehand. The wallet will provide its address and predicted smart account address.

```typescript
import { Engine } from "thirdweb";

const serverWallet = await Engine.createServerWallet({
  client,
  label: "My Server Wallet",
});
console.log(serverWallet.address);
console.log(serverWallet.smartAccountAddress);
```

--------------------------------

### Get Accounts with ERC4337 Extension

Source: https://portal.thirdweb.com/references/typescript/v5/erc4337/getAccounts

Use this snippet to retrieve account addresses from an ERC4337 contract. Ensure the 'contract' object is properly initialized and provide the 'start' and 'end' block numbers for the query.

```typescript
import { getAccounts } from "thirdweb/extensions/erc4337";

const result = await getAccounts({
 contract,
 start: ..., 
 end: ...,
});
```

--------------------------------

### Upto Payment Scheme Example

Source: https://portal.thirdweb.com/references/typescript/v5/settlePayment

Demonstrates using the 'upto' payment scheme with settlePayment for dynamic pricing based on usage. The price specified is the maximum amount payable.

```typescript
const result = await settlePayment({
 ...paymentArgs,
  scheme: "upto",
  price: "$0.10", // max payable amount
});
```

--------------------------------

### Get Post On-Ramp Quote Example

Source: https://portal.thirdweb.com/references/typescript/v5/getPostOnRampQuote

Demonstrates how to use `getPostOnRampQuote` after an on-ramp requires a crypto swap. It first fetches the buy with fiat status and then, if a swap is needed, retrieves the crypto swap quote.

```typescript
import {
  getPostOnRampQuote,
  getBuyWithFiatStatus,
} from "thirdweb/pay";

// previous steps
const fiatQuote = await getBuyWithFiatQuote(fiatQuoteParams);
window.open(fiatQuote.onRampLink, "_blank");
const buyWithFiatStatus = await getBuyWithFiatStatus({
  client,
  intentId,
}); // keep calling this until status is "settled" state

// when a swap is required after onramp
if (buyWithFiatStatus.status === "CRYPTO_SWAP_REQUIRED") {
 const buyWithCryptoQuote = await getPostOnRampQuote({
    client,
    buyWithFiatStatus,
  });
}
```

--------------------------------

### Viem Adapter Methods

Source: https://portal.thirdweb.com/references/typescript/v5/viemAdapter

This section outlines the core methods exposed by the viemAdapter for interacting with wallets and performing blockchain operations.

```APIDOC
## Viem Adapter Methods

This section outlines the core methods exposed by the viemAdapter for interacting with wallets and performing blockchain operations.

### `toViem(options: WalletToViemOptions)`

Converts a wallet instance to a viem-compatible client.

### Methods

- **`addChain(args: AddChainParameters)`**: Adds a new chain to the wallet.
- **`getAddresses()`**: Retrieves the addresses associated with the wallet.
- **`getChainId()`**: Gets the current chain ID the wallet is connected to.
- **`getPermissions()`**: Retrieves the permissions granted to the application by the wallet.
- **`requestAddresses()`**: Requests the user to grant access to their addresses.
- **`requestPermissions(args: { eth_accounts: Record<string, any> })`**: Requests specific permissions from the wallet.
- **`sendRawTransaction(args: SendRawTransactionParameters)`**: Sends a raw, signed transaction to the network.
- **`sendTransaction(args: SendTransactionParameters)`**: Sends a transaction to the network.
- **`signMessage(args: SignMessageParameters)`**: Signs a message with the wallet's private key.
- **`signTransaction(args: SignTransactionParameters)`**: Signs a transaction with the wallet's private key without sending it.
- **`watchAsset(args: WatchAssetParams)`**: Prompts the user to watch a specific asset (e.g., ERC20 token) in their wallet.
- **`writeContract(args: WriteContractParameters)`**: Writes data to a smart contract.
- **`writeContractSync(args: WriteContractSyncParameters)`**: Synchronously writes data to a smart contract.
- **`deployContract(args: DeployContractParameters)`**: Deploys a smart contract.
- **`sendRawTransactionSync(args: SendRawTransactionSyncParameters)`**: Synchronously sends a raw, signed transaction.
- **`sendTransactionSync(args: SendTransactionSyncParameters)`**: Synchronously sends a transaction.
- **`sendCalls(parameters: SendCallsParameters)`**: Sends a batch of calls to the wallet.
- **`sendCallsSync(parameters: SendCallsSyncParameters)`**: Synchronously sends a batch of calls.
- **`getCallsStatus(parameters: GetCallsStatusParameters)`**: Retrieves the status of previously sent calls.
- **`showCallsStatus(parameters: ShowCallsStatusParameters)`**: Displays the status of calls to the user.
- **`getCapabilities(parameters?: GetCapabilitiesParameters)`**: Retrieves the capabilities of the wallet for a given chain.
- **`prepareTransactionRequest(args: PrepareTransactionRequestParameters)`**: Prepares a transaction request without sending it.
- **`prepareAuthorization(parameters: PrepareAuthorizationParameters)`**: Prepares an authorization request.
- **`signAuthorization(parameters: SignAuthorizationParameters)`**: Signs an authorization request.

### Properties

- **`key`**: string - Unique identifier for the wallet.
- **`name`**: string - Name of the wallet.
- **`cacheTime`**: number - Time in milliseconds to cache data.
- **`pollingInterval`**: number - Interval in milliseconds for polling.
- **`batch`**: object | undefined - Configuration for batching operations.
- **`ccipRead`**: false | object | undefined - Configuration for CCIP read requests.
- **`experimental_blockTag`**: BlockTag | undefined - Experimental block tag for queries.

### Events

- **`extend(fn)`**: Extends the viem client with custom actions.
```

--------------------------------

### Get Buy with Fiat History

Source: https://portal.thirdweb.com/references/typescript/v5/getBuyWithFiatHistory

Fetches the latest 'Buy with fiat' transactions for a given wallet address. Ensure you have initialized the thirdweb client and provided the necessary wallet address, start index, and count.

```typescript
import { createThirdwebClient } from "thirdweb";
import { getBuyWithFiatHistory } from "thirdweb/pay";

const client = createThirdwebClient({ clientId: "..." });

// get the 10 latest "Buy with fiat" transactions dony by the wallet
const history = await getBuyWithFiatHistory({
  client: client,
  walletAddress: "0x...",
  start: 0,
  count: 10,
});
```

--------------------------------

### Example Usage of sections Prop

Source: https://portal.thirdweb.com/references/typescript/v5/NetworkSelectorProps

Demonstrates how to configure the 'sections' prop to display specific chains under 'Recently used' and 'Popular' categories.

```typescript
import { arbitrum, base, ethereum, polygon } from "thirdweb/chains";

const sections = [
  { label: "Recently used", chains: [arbitrum, polygon] },
  { label: "Popular", chains: [base, ethereum] },
];
```

--------------------------------

### Basic Usage of useWalletDetailsModal

Source: https://portal.thirdweb.com/references/typescript/v5/useWalletDetailsModal

Demonstrates how to open the Wallet Details Modal with a light theme. Ensure you have created a Thirdweb client.

```typescript
import {
  createThirdwebClient
} from "thirdweb";
import { useWalletDetailsModal } from "thirdweb/react";

const client = createThirdwebClient({
  clientId: "<your_client_id>",
});

function Example() {
 const detailsModal = useWalletDetailsModal();

 function handleClick() {
    detailsModal.open({ client, theme: "light" });
  }

 return <button onClick={handleClick}> Show Wallet Details </button>;
}
```

--------------------------------

### Create WalletConnect Client

Source: https://portal.thirdweb.com/references/typescript/v5/createWalletConnectClient

Basic usage of `createWalletConnectClient` to initialize a client. Ensure you have a `wallet` and `client` instance available.

```typescript
import { createWalletConnectClient } from "thirdweb/wallets";

const client = await createWalletConnectClient({
  wallet: wallet,
  client: client,
});
```
Tokens:
Raw