Chain Select
A network switcher. Testnets are labelled and grouped below mainnets — transacting on the wrong network is the most expensive user error in this space, and an unlabelled list invites it.
src/components/ui/chain-select.tsxAbout
From the component's own source, where it was written.
A network switcher.
Testnets are labelled, always, and grouped below mainnets. The single most expensive user error in this space is transacting on the wrong network, and an unlabelled list where Sepolia sits between Ethereum and Arbitrum invites exactly that.
An unsupported chain is a first-class state rather than an empty trigger: a wallet connected to a network the app does not handle must say so, since every balance and address on screen is then meaningless.
Install
npx astralyx-ui add chain-select
Usage
import { ChainSelect } from '@/components/ui/chain-select'
<ChainSelect chains={chains} value={chainId} onValueChange={switchChain} />Composer
Change the props and the source below follows.
<ChainSelect chains={chains} value={chainId} onValueChange={switchChain} />Examples
Networks
<ChainSelect chains={chains} value={chainId} />API
Generated from the source, so it cannot fall behind the code. One table per exported component, then hooks, functions and types.
ChainSelect
Extends Omit<ComponentProps<'div'>, 'onChange'>.
| Prop | Type | Default | Description |
|---|---|---|---|
| chains | Chain[] | required | { id, name, color?, testnet?, icon?, symbol? }. |
| value | number | — | Chain id. An id absent from the list renders the unsupported state rather than an empty trigger. |
| onValueChange | (id: number) => void | — | — |
| size | keyof typeof fieldSize | 'md' | — |
| disabled | boolean | false | — |
| unsupportedLabel | string | 'Unsupported network' | — |
| testnetLabel | ReactNode | 'testnet' | Badge on a test network. |
| listLabel | string | 'Networks' | Accessible name for the listbox. |
| testnetGroupLabel | ReactNode | 'Test networks' | Heading over the test networks, which sort last. |
Types
Chain
A network switcher.
| Field | Type | Description |
|---|---|---|
| id | number | — |
| name | string | — |
| color? | string | Brand colour for the dot. |
| testnet? | boolean | — |
| icon? | ReactNode | — |
| symbol? | string | Native currency symbol, shown beside the name. |
Behaviour
| Topic | Detail | Description |
|---|---|---|
| ordering | mainnets first | Testnets are sorted below and given their own heading, so one never sits between two production chains. |