ThirdwebProviderCoreProps

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.

type activeChain =
  | Chain
  | (number & {})
  | (string & {})
  | TChains[number]["chainId"]
  | TChains[number]["slug"];

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

type authConfig = ThirdwebAuthConfig;

Whether or not to attempt auto-connect to a wallet.

type autoConnect = boolean;

Timeout for auto-connecting wallet in milliseconds

If wallet fails to connect in this time, it will stop trying to connect and user will have to manually connect

By default, it is set to 15000 milliseconds (15 seconds)

type autoConnectTimeout = number;

Whether or not to automatically switch to wallet's network to active chain

type autoSwitch = boolean;

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

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

type clientId = string;

Metadata to pass to wallet connect and walletlink wallet connect. (Used to show which dApp is being connected to in mobile wallets that support it) Defaults to just the name being passed as thirdweb powered dApp .

type dAppMeta = DAppMetaData;

If you are using React Query and have your own QueryClient , you can pass it as the queryClient prop to use that instead of the SDK's default client.

type queryClient = QueryClient;

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.

type sdkOptions = Omit<undefined | {}, "chains">;

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

type secretKey = string;

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.

type storageInterface = IThirdwebStorage;

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>
  );
}

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.

type supportedChains = TChains;

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

An array of wallets that the dApp supports If not provided, will default to Metamask (injected), Coinbase wallet and Device wallet

type supportedWallets = Array<WalletConfig>;

You can Import the wallets you want to support from @thirdweb-dev/wallets and pass them to supportedWallets

import { ThirdwebProvider } from "@thirdweb-dev/react";
 
const App = () => {
  return (
    <ThirdwebProvider>
      <YourApp />
    </ThirdwebProvider>
  );
};