A component for displaying chain information in a row layout with icon and name.

ChainRow

The ChainRow component displays chain information in a horizontal layout, combining a chain icon with its name.

Usage

import { ChainRow } from '@avalabs/builderkit';
 
// Basic usage
<ChainRow 
  chain_id={43114}
  name="Avalanche C-Chain"
/>
 
// With custom styling
<ChainRow 
  chain_id={43114}
  name="Avalanche C-Chain"
  className="bg-gray-100 p-2 rounded-lg"
/>

Props

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

Features

Combines ChainIcon with chain name
Horizontal layout with proper spacing
Flexible styling through className
Simple and lightweight implementation
Consistent alignment and spacing

Examples

Basic Chain Display

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

In a List

<div className="flex flex-col gap-2">
  <ChainRow 
    chain_id={43114}
    name="Avalanche C-Chain"
  />
  <ChainRow 
    chain_id={43113}
    name="Fuji Testnet"
  />
</div>

Interactive Row

<ChainRow 
  chain_id={43114}
  name="Avalanche C-Chain"
  className="hover:bg-gray-100 cursor-pointer"
/>

With Custom Styling

<ChainRow 
  chain_id={43114}
  name="Avalanche C-Chain"
  className="border border-gray-200 rounded-lg p-3 shadow-sm"
/>

Layout Structure

The component uses a flex layout with:

ChainIcon on the left
Chain name on the right
Gap between icon and name
Center alignment of items

ChainRow

On this page