Token Components

Token components provide UI elements for displaying and interacting with tokens.

TokenIcon

The TokenIcon component displays token logos.

import { TokenIcon, TokenIconWithChain } from '@avalabs/builderkit';

// Basic usage
<TokenIcon address="0x1234..." />

// With chain information
<TokenIconWithChain 
  address="0x1234..."
  chain_id={43114}
/>

Props

Prop	Type	Default	Description
`address`	`string`	-	Token contract address
`className`	`string`	-	Additional CSS classes

TokenIconWithChain Props

Prop	Type	Default	Description
`address`	`string`	-	Token contract address
`chain_id`	`number`	-	Chain ID for the token
`className`	`string`	-	Additional CSS classes

TokenChip

The TokenChip component displays token information in a compact format.

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

// Basic usage
<TokenChip 
  chain_id={43114}
  address="0x1234..."
  symbol="AVAX"
/>

// With additional options
<TokenChip 
  chain_id={43114}
  address="0x1234..."
  symbol="AVAX"
  name="Avalanche"
  allowCopyToClipboard={true}
  showChainIcon={true}
  showName={true}
/>

Props

Prop	Type	Default	Description
`chain_id`	`number`	-	Chain ID for the token
`address`	`string`	-	Token contract address
`symbol`	`string`	-	Token symbol
`name`	`string`	-	Token name (optional)
`allowCopyToClipboard`	`boolean`	`false`	Enable copy address
`showChainIcon`	`boolean`	`false`	Show chain icon
`showName`	`boolean`	`false`	Show token name
`className`	`string`	-	Additional CSS classes

TokenRow

The TokenRow component displays detailed token information.

import { TokenRow } from '@avalabs/builderkit';
import { BigNumber } from 'bignumber.js';

// Basic usage
<TokenRow 
  chain_id={43114}
  address="0x1234..."
  name="Avalanche"
  symbol="AVAX"
/>

// With balance and click handler
<TokenRow 
  chain_id={43114}
  address="0x1234..."
  name="Avalanche"
  symbol="AVAX"
  balance={new BigNumber(100)}
  onClick={() => handleTokenSelect()}
/>

Props

Prop	Type	Default	Description
`chain_id`	`number`	-	Chain ID for 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

TokenBalance

The TokenBalance component displays token balances with automatic formatting and updates.

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

// Basic usage
<TokenBalance 
  address="0x1234567890123456789012345678901234567890"
  token="AVAX"
/>

// With custom formatting
<TokenBalance 
  address="0x1234..."
  token="0xB97EF9Ef8734C71904D8002F8b6Bc66Dd9c48a6E" // USDC
  decimals={6}
  format="currency"
/>

// Auto-updating balance
<TokenBalance 
  address="0x1234..."
  token="AVAX"
  refreshInterval={5000} // Update every 5 seconds
/>

Props

Prop	Type	Default	Description
`address`	`string`	-	Wallet address to check balance for
`token`	`string`	-	Token symbol or contract address
`decimals`	`number`	-	Token decimals (auto-detected if not provided)
`format`	`'standard' \| 'currency' \| 'compact'`	`'standard'`	Display format
`refreshInterval`	`number`	`0`	Auto-refresh interval in milliseconds
`className`	`string`	-	Additional CSS classes

TokenInput

The TokenInput component provides a form input for token amounts with validation and formatting.

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

// Basic usage
<TokenInput
  value={amount}
  onChange={setAmount}
  token="AVAX"
/>

// With balance validation
<TokenInput
  value={amount}
  onChange={setAmount}
  token="USDC"
  maxAmount={balance}
  showMax
/>

// With price conversion
<TokenInput
  value={amount}
  onChange={setAmount}
  token="AVAX"
  showUsdPrice
  priceOracle={priceOracle}
/>

Props

Prop	Type	Default	Description
`value`	`string`	-	Current input value
`onChange`	`(value: string) => void`	-	Change handler
`token`	`string`	-	Token symbol or address
`maxAmount`	`string`	-	Maximum allowed amount
`showMax`	`boolean`	`false`	Show max button
`showUsdPrice`	`boolean`	`false`	Show USD conversion
`priceOracle`	`(token: string) => Promise<number>`	-	Price oracle function
`className`	`string`	-	Additional CSS classes

Token Components

On this page