ThirdwebProvider

The ThirdwebProvider is a wrapper component that provides access to all of the SDK’s hooks and UI components. It utilizes the Provider Pattern to share data with all of the components that are nested within it.

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

Usage

If you are using one of our default chains, provide the name of the chain as a string to the activeChain prop.

For non-default chains, see configuring active chains or custom chains.

View default chains

Ethereum: "ethereum"
Goerli: "goerli"
Polygon: "polygon"
Mumbai: "mumbai"
Arbitrum One: "arbitrum"
Arbitrum Goerli: "arbitrum-goerli"
Optimism: "optimism"
Optimism Goerli Testnet: "optimism-goerli"
Binance SmartChain: "binance"
Binance SmartChain Testnet: "binance-testnet"
Fantom Opera: "fantom"
Fantom Testnet: "fantom-testnet"
Avalanche C Chain: "avalanche-fuji"
Avalanche Fuji Testnet: "avalanche-fuji-testnet"
Localhost: "localhost"

import { ThirdwebProvider } from "@thirdweb-dev/react";

function App() {
  return (
    <ThirdwebProvider activeChain="ethereum">
      <YourApp />
    </ThirdwebProvider>
  );
}

Configuration

activeChain (recommended)

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

There are 700+ chains available in the @thirdweb-dev/chains package. Import the chain you want to use from the package and pass it to the activeChain prop. If your chain is not included, see configuring custom chains.

Install Package

Install the @thirdweb-dev/chains package to use non-default chains.

npm
Yarn

npm install @thirdweb-dev/chains

yarn add @thirdweb-dev/chains

import { ThirdwebProvider } from "@thirdweb-dev/react";
import { Gnosis } from "@thirdweb-dev/chains";

function MyApp() {
  return (
    <ThirdwebProvider
      activeChain={Gnosis}
    >
      <YourApp />
    </ThirdwebProvider>
  );
}

Custom EVM Chains

If your chain is not included in the @thirdweb-dev/chains package, you can provide the chain information yourself to the activeChain prop.

import { ThirdwebProvider } from "@thirdweb-dev/react";

const App = () => {
  return (
    <ThirdwebProvider
      activeChain={{
        // === Required information for connecting to the network === \\
        chainId: 59140, // Chain ID of the network
        // Array of RPC URLs to use
        rpc: ["<your-rpc-url-here>"],

        // === Information for adding the network to your wallet (how it will appear for first time users) === \\
        // Information about the chains native currency (i.e. the currency that is used to pay for gas)
        nativeCurrency: {
          decimals: 18,
          name: "Consensys ETH",
          symbol: "crETH",
        },
        shortName: "czkevm", // Display value shown in the wallet UI
        slug: "consensys", // Display value shown in the wallet UI
        testnet: true, // Boolean indicating whether the chain is a testnet or mainnet
        chain: "ConsenSys", // Name of the network
        name: "ConsenSys zkEVM Testnet", // Name of the network
      }}
    >
      <YourApp />
    </ThirdwebProvider>
  );
};

Override Default Values

Override the default values (such as an RPC URL) for any given chain.

Optional

By default, the SDK provides free-to-use RPCs. No configuration required!

View the default RPC URLs for each network.

Using the spread syntax, you can override any properties of a chain, such as the rpc field.

import { ThirdwebProvider } from "@thirdweb-dev/react";
import { Dogechain } from "@thirdweb-dev/chains";

const App = () => {
  return (
    <ThirdwebProvider
      activeChain={{
        ...Dogechain,
        rpc: ["https://<your-rpc-to-use>.com"], // Override the "rpc" field.
        // ... Override any other fields you want to customize.
      }}
    >
      <YourApp />
    </ThirdwebProvider>
  );
};

authConfig (optional)

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

Property	Type	Description
`authUrl`	string	The backend URL of the authentication endpoints. For example, if your endpoints are at `/api/auth/login`, `/api/auth/logout`, etc. then this should be set to `/api/auth`.
`domain`	string	The frontend domain used to generate the login payload. This domain should match the domain used on your auth backend.

import { ThirdwebProvider } from "@thirdweb-dev/react";

function MyApp() {
  return (
    <ThirdwebProvider
      authConfig={{
        authUrl: "/api/auth",
        domain: "https://example.com",
      }}
    >
      <YourApp />
    </ThirdwebProvider>
  );
}

autoconnect (optional)

When the user has connected their wallet to your site before, this flag determines whether or not you want the SDK to automatically connect to the wallet on page load (requires the user to be logged in to the wallet).

Defaults to true.

import { ThirdwebProvider } from "@thirdweb-dev/react";

function MyApp() {
  return (
    <ThirdwebProvider
      autoConnect={false}
    >
      <YourApp />
    </ThirdwebProvider>
  );
}

dAppMeta (optional)

Metadata to pass to WalletConnect, shown in mobile wallets that support it.

Defaults to thirdweb powered dApp.

Property	Type	Description
`name`	string	the name of your app
`description`	string	optional - a description of your app
`logoUrl`	string	optional - a url that points to a logo (or favicon) of your app
`url`	string	optional - the url where your app is hosted
`isDarkMode`	boolean	optional - whether to show the connect dialog in darkmode or not

import { ThirdwebProvider } from "@thirdweb-dev/react";

function MyApp() {
  return (
    <ThirdwebProvider
      dAppMeta={{
        name: "My App",
        description: "My app description",
        logoUrl: "https://example.com/logo.png",
        url: "https://example.com",
        isDarkMode: true,
      }}
    >
      <YourApp />
    </ThirdwebProvider>
  );
}

sdkOptions (optional)

Override any of the default values for the SDK.

Gas settings, gasless transactions, RPC configuration, and more.

import { ThirdwebProvider } from "@thirdweb-dev/react";

function MyApp() {
  return (
    <ThirdwebProvider
      sdkOptions={{
        readonlySettings: {
          rpcUrl: "<rpc-url>", // force read calls to go through your own RPC url
          chainId: 1, // reduce RPC calls by sepcifying your chain ID
        },
        gasSettings: {
          maxPriceInGwei: 123, // Maximum gas price for transactions (default 300 gwei)
          speed: "fastest", // the tx speed setting: 'standard'|'fast|'fastest' (default: 'fastest')
        },
        gasless: {
          // By specifying a gasless configuration - all transactions will get forwarded to enable gasless transactions
          openzeppelin: {
            relayerUrl: "<open-zeppelin-relayer-url>", // your OZ Defender relayer URL
            relayerForwarderAddress: "<open-zeppelin-forwarder-address>", // the OZ defender relayer address (defaults to the standard one)
          },
          biconomy: {
            apiId: "biconomy-api-id", // your Biconomy API Id
            apiKey: "biconomy-api-key", // your Biconomy API Key
            deadlineSeconds: 123, // your Biconomy timeout preference
          },
        },
        infuraApiKey: "<infura-api-key>", // your Infura API key
        alchemyApiKey: "<alchemy-api-key>", // your Alchemy API key
        thirdwebApiKey: "<thirdweb-api-key>", // your thirdweb API key
      }}
    >
      <YourApp />
    </ThirdwebProvider>
  );
}

walletConnectors (optional)

An array of connector types (strings) or wallet connector objects that your app supports.

If not provided, defaults to MetaMask (injected), WalletConnect and Coinbase Wallet.

Useful if you want to add support for Gnosis Safe or Magic Link.

Magic Link example
import { ThirdwebProvider } from "@thirdweb-dev/react";
import { MagicConnector } from "@thirdweb-dev/react/evm/connectors/magic";
import { Mumbai } from "@thirdweb-dev/chains";

const magicLinkConnector = new MagicConnector({
  options: {
    apiKey: "<your-magic-link-public-key>" as string,
    rpcUrls: {
      [Mumbai.chainId]: "https://mumbai.magic.io/rpc",
    },
  },
});

function MyApp() {
  return (
    <ThirdwebProvider
      walletConnectors={[magicLinkConnector, "metamask", "walletConnect", "coinbaseWallet"]}
      activeChain={"mumbai"}
    >
      <YourApp />
    </ThirdwebProvider>
  );
}

export default MyApp;

storageInterface (optional)

Override the default Storage interface used by the SDK.

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

Storage

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

Learn more about Storage

import { ThirdwebProvider } 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 (
    <ThirdwebProvider
      storageInterface={storage}
    >
      <YourApp />
    </ThirdwebProvider>
  );
}

queryClient (optional)

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

import { ThirdwebProvider } from "@thirdweb-dev/react";
import { QueryClient, QueryClientProvider } from "@tanstack/react-query";

function MyApp() {
  // Your React Query client (or client from other library such as wagmi)
  const queryClient = new QueryClient();

  return (
    <QueryClientProvider client={queryClient}>
      <ThirdwebProvider
        queryClient={queryClient}
      >
        <YourApp />
      </ThirdwebProvider>
    </QueryClientProvider>
  );
}

Usage​

Configuration​

activeChain (recommended)​

Custom EVM Chains​

Override Default Values​

authConfig (optional)​

autoconnect (optional)​

dAppMeta (optional)​

sdkOptions (optional)​

walletConnectors (optional)​

storageInterface (optional)​

queryClient (optional)​