NetworkSelectorProps
type NetworkSelectorProps = { chains?: Array<Chain>; onClose?: () => void; onCustomClick?: () => void; onSwitch?: (chain: Chain) => void; open: boolean; popularChains?: Array<Chain>; recentChains?: Array<Chain>; sections?: Array<{ chains: Array<Chain>; label: string }>;};
Array of chains to be displayed in the modal
type chains = Array<Chain>;
function onSwitch(chain: Chain): void;
Specify whether the Modal should be open or closed
type open = boolean;
Use sections prop instead
If sections prop is provided, this prop will be ignored
Array of chains to be displayed under "Popular" section
type popularChains = Array<Chain>;
Use sections prop instead
If sections prop is provided, this prop will be ignored
Array of chains to be displayed under "Recent" section
type recentChains = Array<Chain>;
Override how the chain button is rendered in the Modal
Specify sections of chains to be displayed in the Network Selector Modal
type sections = Array<{ chains: Array<Chain>; label: string }>;
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 { Polygon, Avalanche, Ethereum, Arbitrum,} from "@thirdweb-dev/chains"; const sections = [ { label: "Recently used", chains: [Polygon, Avalanche] }, { label: "Popular", chains: [Ethereum, Arbitrum] },];
Theme to use in Modal
Either specify string "dark" or "light" to use the default themes, or provide a custom theme object.
You can also use darkTheme or lightTheme functions to use the default themes as base and override it.
import { darkTheme } from "@thirdweb-dev/react"; <NetworkSelector open={true} theme={darkTheme({ colors: { modalBg: "#000000", }, })}/>;