TokenRow
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
Is this guide helpful?