Glyph

Appearance

ChainSelector ​

A dropdown component that allows users to switch between supported blockchain networks or view balances across all chains.

Import ​

tsx
import { ChainSelector } from "@use-glyph/sdk-react";

Usage ​

tsx
import { ChainSelector } from "@use-glyph/sdk-react";

function Header() {
	return (
		<nav>
			<ChainSelector />
		</nav>
	);
}

Description ​

The ChainSelector component renders a compact chain-switching dropdown:

  • Displays the current chain's icon and a chevron indicator.
  • When clicked, opens a dropdown listing all supported chains.
  • Includes an "All Supported Chains" option at the top, which enables multi-chain balance mode (fetchForAllNetworks).
  • Selecting a specific chain calls switchChainAsync from wagmi and disables multi-chain mode.
  • When only a single chain is supported, the component renders just the chain icon without the dropdown.

Behavior ​

ActionEffect
Click "All Supported Chains"Sets fetchForAllNetworks to true; balances are aggregated across all chains.
Click a specific chainSwitches to that chain via wagmi and sets fetchForAllNetworks to false.
Single chain configuredRenders the chain icon only, without a dropdown.

Notes ​

  • Must be rendered inside a GlyphProvider (or GlyphPrivyProvider / GlyphWalletProvider).
  • Uses the useGlyph hook internally to access fetchForAllNetworks and setFetchForAllNetworks.
  • Chain icons are sourced from the Relay Protocol chain configuration.