A component for displaying token information in a row layout with optional balance display.

TokenRow

The TokenRow component displays token information in a row layout, combining a TokenChip with optional balance information.

Usage

import { TokenRow } from '@avalabs/builderkit';
 
// Basic usage
<TokenRow 
  chain_id={43114}
  address="0x1234567890123456789012345678901234567890"
  name="Avalanche"
  symbol="AVAX"
/>
 
// With balance and click handler
<TokenRow 
  chain_id={43114}
  address="0x1234567890123456789012345678901234567890"
  name="Avalanche"
  symbol="AVAX"
  balance={new BigNumber("1.234")}
  onClick={() => handleTokenSelect()}
/>

Props

Prop	Type	Default	Description
`chain_id`	`number`	-	Chain ID of the token
`address`	`string`	-	Token contract address
`name`	`string`	-	Token name
`symbol`	`string`	-	Token symbol
`balance`	`BigNumber`	-	Token balance (optional)
`onClick`	`() => void`	-	Click handler (optional)
`className`	`string`	-	Additional CSS classes

Features

Displays token information using TokenChip
Shows token balance with 3 decimal places
Supports click interactions
Flexible styling with Tailwind CSS
Responsive layout with proper alignment

Examples

Basic Display

<TokenRow 
  chain_id={43114}
  address="0x1234567890123456789012345678901234567890"
  name="Avalanche"
  symbol="AVAX"
/>

With Balance

<TokenRow 
  chain_id={43114}
  address="0x1234567890123456789012345678901234567890"
  name="Avalanche"
  symbol="AVAX"
  balance={new BigNumber("1.234")}
/>

Interactive Row

<TokenRow 
  chain_id={43114}
  address="0x1234567890123456789012345678901234567890"
  name="Avalanche"
  symbol="AVAX"
  onClick={() => selectToken("AVAX")}
  className="hover:bg-gray-100 cursor-pointer"
/>

In a List

<div className="flex flex-col divide-y">
  <TokenRow 
    chain_id={43114}
    address="0x1234..."
    name="Avalanche"
    symbol="AVAX"
    balance={new BigNumber("1.234")}
  />
  <TokenRow 
    chain_id={43114}
    address="0x5678..."
    name="USD Coin"
    symbol="USDC"
    balance={new BigNumber("100.00")}
  />
</div>

Layout Structure

The component uses a flex layout with:

Left side: TokenChip (icon, name, and symbol)
Right side (if balance provided):
- Token balance (3 decimal places)
- USD value (currently hardcoded to $0)
Proper spacing and alignment
Optional hover and click interactions

TokenRow

On this page