UseNetworkSwitcherModalOptions

A client is the entry point to the thirdweb SDK. It is required for all other actions. You can create a client using the createThirdwebClient function. Refer to the Creating a Client documentation for more information.

You must provide a clientId or secretKey in order to initialize a client. Pass clientId if you want for client-side usage and secretKey for server-side usage.

import { createThirdwebClient } from "thirdweb";
 
const client = createThirdwebClient({
  clientId: "<your_client_id>",
});

type client = ThirdwebClient;

By default - NetworkSwitcher UI uses the en-US locale for english language users.

You can customize the language used in the ConnectButton UI by setting the locale prop.

Refer to the LocaleId type for supported locales.

type locale = LocaleId;

Override how the chain button is rendered in the Modal

type renderChain = React.FC<NetworkSelectorChainProps>;

Specify sections of chains to be displayed in the Network Selector Modal

type sections = Array<ChainSection>;

To display "Polygon", "Avalanche" chains under "Recently used" section and "Ethereum", "Arbitrum" chains under "Popular" section, you can set the prop with the following value

import { arbitrum, base, ethereum, polygon } from "thirdweb/chains";
 
const sections = [
  { label: "Recently used", chains: [arbitrum, polygon] },
  { label: "Popular", chains: [base, ethereum] },
];

Set the theme for the NetworkSwitcher Modal. By default it is set to "dark"

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

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

type theme = Theme | "dark" | "light";

import { lightTheme } from "thirdweb/react";
 
const customTheme = lightTheme({
  colors: {
    modalBg: "red",
  },
});