Inputs
ChainSelect
ChainSelect is the fast path to a production-grade network picker. It handles search, grouping, logos, and chain label formatting against the chain data exposed by AvaCloudKitProvider.
Data source
The component reads chain metadata from the shared app chains context.
Grouping
Results are organized automatically so large chain lists stay easy to scan.
Best use
Ideal for wallet setup, token transfer forms, activity filters, and settings screens.
Provider prerequisite
This component requires the AvaCloudKitProvider context to load chain data. If you have not wired the provider
yet, start with the Getting Started guide.
Basic usage
Render the full chain list with built-in search and grouped sections.
import { useState } from 'react';import { ChainSelect } from '@avalabs/avacloud-kit-ui-preview';export function Example() {const [selectedChainId, setSelectedChainId] = useState<string>();return ( <ChainSelect selectedChainId={selectedChainId} onSelect={setSelectedChainId} />);}Pre-selected chain
Start the picker from a known network when the product already has a preferred default.
<ChainSelectselectedChainId="43114"onSelect={setSelectedChainId}/>Disabled state
Use the disabled state while wallet context or app prerequisites are still loading.
<ChainSelectselectedChainId={selectedChainId}onSelect={setSelectedChainId}disabled/>Filtered chain set
Pass a restricted list when the UI should only target a known set of supported networks.
<ChainSelectselectedChainId={selectedChainId}onSelect={setSelectedChainId}chainIds={['43114', '43113']}placeholder="Select Avalanche chain"/>Props
Prop
Type
Context access
import { useAppChainsContext } from '@avalabs/avacloud-kit-ui-preview';
function MyComponent() {
const { evmChains, findChainByEvmChainId } = useAppChainsContext();
// Use chain data directly if needed
}