ThirdwebProvider

[
  "ethereum",
  "goerli",
  "polygon",
  "arbitrum",
  "arbitrum-goerli",
  "optimism",
  "optimism-goerli",
  "binance",
  "binance-testnet",
  "fantom",
  "fantom-testnet",
  "avalanche-fuji",
  "avalanche-fuji-testnet",
  "localhost",
];

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

It defaults to "ethereum" if activeChain prop is not provided.

import { ThirdwebProvider } from "@thirdweb-dev/react";
import { Gnosis } from "@thirdweb-dev/chains";
 
function Example() {
  return (
    <ThirdwebProvider activeChain={Gnosis} clientId="your-client-id">
      <App />
    </ThirdwebProvider>
  );
}

[
  "ethereum",
  "goerli",
  "polygon",
  "arbitrum",
  "arbitrum-goerli",
  "optimism",
  "optimism-goerli",
  "binance",
  "binance-testnet",
  "fantom",
  "fantom-testnet",
  "avalanche-fuji",
  "avalanche-fuji-testnet",
  "localhost",
];

import { ThirdwebProvider } from "@thirdweb-dev/react";
 
function App() {
  return (
    <ThirdwebProvider
      activeChain="ethereum"
      clientId="your-client-id"
    >
      <YourApp />
    </ThirdwebProvider>
  );
}

import { ThirdwebProvider } from "@thirdweb-dev/react";
import { <chain_id> } from "@thirdweb-dev/chains";
 
function App() {
	return (
		<ThirdwebProvider activeChain={<chain_id>} clientId="your-client-id">
			<YourApp />
		</ThirdwebProvider>
	);
}

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

import { ThirdwebProvider } from "@thirdweb-dev/react";
 
const customChain = {
  // Required information for connecting to the network
  chainId: 59140, // Chain ID of the network
  rpc: ["<your-rpc-url-here>"], // Array of RPC URLs to use
 
  // Information for adding the network to your wallet (how it will appear for first time users) === \\
  // Information about the chain's 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
};
 
const App = () => {
  return (
    <ThirdwebProvider activeChain={customChain}>
      <YourApp />
    </ThirdwebProvider>
  );
};

import { ThirdwebProvider } from "@thirdweb-dev/react";
 
function MyApp() {
  return (
    <ThirdwebProvider activeChain="localhost">
      <YourApp />
    </ThirdwebProvider>
  );
}

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

import { ThirdwebProvider } from "@thirdweb-dev/react";
 
function MyApp() {
  return (
    <ThirdwebProvider
      authConfig={{
        authUrl: "/api/auth",
        domain: "https://example.com",
      }}
    >
      <YourApp />
    </ThirdwebProvider>
  );
}

When the user has connected their wallet to your site, this flag determines whether or not you want to automatically connect to the last connected wallet when user visits your site again in the future.

Defaults to true

import { ThirdwebProvider } from "@thirdweb-dev/react";
 
function MyApp() {
  return (
    <ThirdwebProvider autoConnect={true}>
      <YourApp />
    </ThirdwebProvider>
  );
}

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.

import { ThirdwebProvider } from "@thirdweb-dev/react";
 
function MyApp() {
  return (
    <ThirdwebProvider
      activeChain="ethereum"
      clientId="your-client-id"
    >
      <YourApp />
    </ThirdwebProvider>
  );
}

This Metadata is passed to the wallet. Some wallets use this information to display the metadata of the app to the user when a user is connecting the wallet to your app.

If no dAppMeta prop is set, it defaults to below object:

{
	name: "thirdweb powered dApp",
	url: "https://thirdweb.com",
};

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

locale object contains text used for all thirdweb components

it allows you to change the language used in UI components or override the texts used in the UI

React SDK comes out of the box with Spanish and Japanese locale functions, but you can add support for any language you want just by passing an object with the required strings

import { ThirdwebProvider, en } from "@thirdweb-dev/react";
 
const english = en();
 
<ThirdwebProvider locale={english}>
  <App />
</ThirdwebProvider>;

import { ThirdwebProvider, es } from "@thirdweb-dev/react";
 
const spanish = es();
 
<ThirdwebProvider locale={spanish}>
  <App />
</ThirdwebProvider>;

import { ThirdwebProvider, jp } from "@thirdweb-dev/react";
 
const japanese = jp();
 
<ThirdwebProvider locale={japanese}>
  <App />
</ThirdwebProvider>;

import { ThirdwebProvider, en } from "@thirdweb-dev/react";
 
// override some texts
const english = en({
  connectWallet: {
    confirmInWallet: "Confirm in your wallet",
  },
  wallets: {
    metamaskWallet: {
      connectionScreen: {
        inProgress: "Awaiting Confirmation",
        instruction:
          "Accept connection request in your MetaMask wallet",
      },
    },
  },
});
 
<ThirdwebProvider locale={english}>
  <App />
</ThirdwebProvider>;

import { ThirdwebProvider } from "@thirdweb-dev/react";
 
<ThirdwebProvider locale={{ .... }}>
  <App />
</ThirdwebProvider>;

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

Override any of the default values for the SDK.

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

import { ThirdwebProvider } from "@thirdweb-dev/react";
 
const sdkOptions = {
  readonlySettings: {
    rpcUrl: "<rpc-url>", // force read calls to go through your own RPC url
    chainId: 1, // reduce RPC calls by specifying 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
};
 
function Example() {
  return (
    <ThirdwebProvider sdkOptions={sdkOptions}>
      <App />
    </ThirdwebProvider>
  );
}

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.

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

An array of chains supported by your app.

You can import chains from @thirdweb-dev/chains which contains 1000+ chains.

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

If not provided, It defaults to below shown default chains.

[
  "ethereum",
  "goerli",
  "polygon",
  "arbitrum",
  "arbitrum-goerli",
  "optimism",
  "optimism-goerli",
  "binance",
  "binance-testnet",
  "fantom",
  "fantom-testnet",
  "avalanche-fuji",
  "avalanche-fuji-testnet",
  "localhost",
];

An array of wallets that your app supports.

Wallets provided here appear in the ConnectWallet Modal and allow you to use the wallet connection hooks.

Learn more about connecting wallets and the options available.

import {
  ThirdwebProvider,
  metamaskWallet,
  coinbaseWallet,
  walletConnect,
} from "@thirdweb-dev/react";
 
function MyApp() {
  return (
    <ThirdwebProvider
      supportedWallets={[
        metamaskWallet(),
        coinbaseWallet(),
        walletConnect(),
      ]}
      activeChain="ethereum"
      clientId="your-client-id"
    >
      <App />
    </ThirdwebProvider>
  );
}

Sets the theme for all thirdweb components.

By default it is set to "dark"

theme can be set to either "dark" or "light" or a custom Theme object.

You can also import the lightTheme or darkTheme functions from @thirdweb-dev/react to use the default themes as base and overrides parts of it.

import { ThirdwebProvider } from "@thirdweb-dev/react";
 
<ThirdwebProvider theme="light">
  <App />
</ThirdwebProvider>;

import { ThirdwebProvider, lightTheme } from "@thirdweb-dev/react";
 
const customTheme = lightTheme({
  colors: {
    modalBg: "red",
  },
});
 
<ThirdwebProvider theme={customTheme}>
  <App />
</ThirdwebProvider>;