ThirdwebSDKProvider

Defined in

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.

ThirdwebSDKProvider allows you to set a provider & signer to the thirdweb SDK.

Example

Wrap your app in the ThirdwebSDKProvider to access the SDK’s functionality from anywhere in your app.


import { ThirdwebSDKProvider } from "@thirdweb-dev/react";
import { ethers } from "ethers";
 
// Example shows how to get the signer from the injected provider ( wallet extension )
function Example() {
  return (
    <ThirdwebSDKProvider
      activeChain="ethereum"
      clientId="YOUR_CLIENT_ID"
      signer={new ethers.providers.Web3Provider(
        window.ethereum,
      ).getSigner()}
    >
      <App />
    </ThirdwebSDKProvider>
  );
}

Parameters

The props for the ThirdwebSDKProvider component

clientId (optional)

The clientId prop is required to use the thirdweb infrastructure services with the SDK.

activeChain (optional)

The activeChain prop determines which chain you want your app to be operating on.

There are 1000+ chains available in the @thirdweb-dev/chains package. Import the chain you want and pass it to the activeChain prop.

You can override the imported object or pass a custom chain object with required properties.

You can get a client ID by creating an API key on thirdweb dashboard

supportedChains (optional)

An array of chains supported by your app. There are 1000+ chains available in the @thirdweb-dev/chains package. You can import the chain you want and pass it to the supportedChains prop in an array.

If not provided, it will default to the default supported chains supported by the thirdweb SDK.


import { Ethereum, Polygon } from "@thirdweb-dev/chains";
 
function Example() {
  return (
    <ThirdwebSDKProvider
      supportedChains={[Ethereum, Polygon]}
      activeChain={Ethereum}
    >
      <App />
    </ThirdwebSDKProvider>
  );
}

signer (optional)

A signer is an abstraction of an Ethereum Account, which can be used to sign messages and initiate transactions.

Since the ThirdwebSDKProvider is used when you want to provide your own wallet connection logic, you will need to provide a signer prop to inform the SDK of the wallet you want to use to sign transactions.

Libraries such as ethers.js, web3.js, wagmi, etc. all provide ways to get a signer.

To use this signer with the SDK, pass it to the signer prop. If the signer is connected, the SDK will use this wallet to sign transactions for all write operations on the blockchain.

sdkOptions (optional)

The thirdweb SDK Options to pass to the thirdweb SDK which includes Gas settings, gasless transactions, RPC configuration, and more.

This Overrides any of the default values for the SDK. If not provided, it uses sensible defaults.

storageInterface (optional)

Override the default Storage interface used by the SDK.

It allows you to create an instance of ThirdwebStorage with your own customized config, and pass it to the SDK.

This requires the @thirdweb-dev/storage package to be installed.


import { ThirdwebSDKProvider } from "@thirdweb-dev/react";
import {
  ThirdwebStorage,
  StorageDownloader,
  IpfsUploader,
} from "@thirdweb-dev/storage";
 
// Configure a custom ThirdwebStorage instance
const gatewayUrls = {
  "ipfs://": [
    "https://gateway.ipfscdn.io/ipfs/",
    "https://cloudflare-ipfs.com/ipfs/",
    "https://ipfs.io/ipfs/",
  ],
};
const downloader = new StorageDownloader();
const uploader = new IpfsUploader();
const storage = new ThirdwebStorage({
  uploader,
  downloader,
  gatewayUrls,
});
 
// Provide the custom storage instance to the SDK
function MyApp() {
  return (
    <ThirdwebSDKProvider storageInterface={storage}>
      <YourApp />
    </ThirdwebSDKProvider>
  );
}

authConfig (optional)

The configuration object for setting up Auth ; allowing users to sign in with their wallet.

secretKey (optional)

secretKey for thirdweb services. This is only required if server side rendering is being used.

Type


let props: PropsWithChildren<ThirdwebSDKProviderProps<TChains>>;