A dropdown component for selecting Avalanche chains with visual chain information.

ChainDropdown

The ChainDropdown component provides a styled dropdown menu for selecting between different Avalanche chains.

Usage

import { ChainDropdown } from '@avalabs/builderkit';
 
// Basic usage
<ChainDropdown 
  selected={43114}
  list={[43114, 43113]}
  onSelectionChanged={(chainId) => console.log('Selected chain:', chainId)}
/>
 
// With custom styling
<ChainDropdown 
  selected={43114}
  list={[43114, 43113]}
  onSelectionChanged={handleChainChange}
  className="w-64"
/>

Props

Prop	Type	Default	Description
`selected`	`number`	-	Currently selected chain ID
`list`	`number[]`	-	Array of available chain IDs
`onSelectionChanged`	`(chain_id: number) => void`	-	Callback when selection changes
`className`	`string`	-	Additional CSS classes

Features

Displays chain information using ChainRow component
Maintains selected state internally
Styled dropdown with Tailwind CSS
Uses common Select components for consistent UI
Automatic chain information lookup

Examples

Basic Chain Selection

<ChainDropdown 
  selected={43114}
  list={[43114, 43113]}
  onSelectionChanged={handleChainChange}
/>

With Network Switching

<ChainDropdown 
  selected={currentChainId}
  list={supportedChainIds}
  onSelectionChanged={async (chainId) => {
    try {
      await switchNetwork(chainId);
    } catch (error) {
      console.error('Failed to switch network:', error);
    }
  }}
/>

Custom Styling

<ChainDropdown 
  selected={43114}
  list={[43114, 43113]}
  onSelectionChanged={handleChainChange}
  className="w-full max-w-sm bg-gray-100"
/>

With Chain Filtering

<ChainDropdown 
  selected={43114}
  list={chains.filter(id => supportedChains.includes(id))}
  onSelectionChanged={handleChainChange}
/>

Component Structure

The dropdown consists of:

Trigger: Shows currently selected chain
Content: List of available chains
Items: Individual chain rows with icons and names

Visual States

Default: Shows selected chain
Open: Displays list of available chains
Hover: Highlights chain under cursor
Selected: Indicates current selection

Chain Information

The component uses the useChains hook to fetch chain information, which includes:

Chain ID
Chain name
Chain icon (via ChainRow component)

Styling

Default styling includes:

Primary background color
Contrasting text color
Rounded corners
Proper padding and spacing
Hover and focus states

ChainDropdown

On this page