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 activeChain prop to the ThirdwebProvider component.

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

Active Chain

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

Available Chains

There are 700+ chains available in the @thirdweb-dev/chains package.

If your chain is not included, see configuring custom chains.

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

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

Custom 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

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 type { AppProps } from "next/app";
import { ThirdwebProvider } from "@thirdweb-dev/react";

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

autoconnect

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

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

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

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

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

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