Chain Components

Chain components help you manage network selection and display chain information.

ChainIcon

The ChainIcon component displays chain logos.

import { ChainIcon } from '@avalabs/builderkit';

// Basic usage
<ChainIcon chain_id={43114} />

Props

Prop	Type	Default	Description
`chain_id`	`number`	-	Chain ID to display
`className`	`string`	-	Additional CSS classes

ChainDropdown

The ChainDropdown component provides network selection functionality.

import { ChainDropdown } from '@avalabs/builderkit';

// Basic usage
<ChainDropdown
  selected={43114}
  list={[43114, 43113]}
  onSelectionChanged={(chainId) => {
    console.log('Selected chain:', chainId);
  }}
/>

Props

Prop	Type	Default	Description
`selected`	`number`	-	Currently selected chain ID
`list`	`number[]`	-	List of available chain IDs
`onSelectionChanged`	`(chain_id: number) => void`	-	Selection change callback
`className`	`string`	-	Additional CSS classes

ChainRow

The ChainRow component displays detailed chain information.

import { ChainRow } from '@avalabs/builderkit';

// Basic usage
<ChainRow
  chain_id={43114}
  name="Avalanche C-Chain"
/>

Props

Prop	Type	Default	Description
`chain_id`	`number`	-	Chain ID
`name`	`string`	-	Chain name
`className`	`string`	-	Additional CSS classes

Chain Components

Chain Components

ChainIcon

Props

ChainDropdown

Props

ChainRow

Props

On this page