A searchable list component for displaying and selecting tokens with optional balance information.

TokenList

The TokenList component provides a searchable list of tokens with support for balance display and token selection.

Usage

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

// Basic usage
<TokenList 
  chain_id={43114}
  list={[
    {
      chain_id: 43114,
      address: "0x1234567890123456789012345678901234567890",
      name: "Avalanche",
      symbol: "AVAX"
    },
    // ... more tokens
  ]}
  onClick={(address) => console.log('Selected token:', address)}
/>

// With balances and selected token
<TokenList 
  chain_id={43114}
  list={tokens}
  showBalances={true}
  selected={{ address: selectedTokenAddress }}
  onClick={handleTokenSelect}
/>

Props

Prop	Type	Default	Description
`chain_id`	`number`	-	Chain ID for the token list
`list`	`TokenItem[]`	-	Array of tokens to display
`onClick`	`(address: string) => void`	-	Callback when a token is selected
`selected`	`{ address: string }`	-	Currently selected token (optional)
`showBalances`	`boolean`	`false`	Whether to show token balances
`className`	`string`	-	Additional CSS classes

Features

Search by token name, symbol, or contract address
Displays token balances (optional)
Highlights selected token
Supports token whitelisting
Responsive scrollable list
Search input with clear functionality

Examples

Basic Token List

<TokenList 
  chain_id={43114}
  list={tokens}
  onClick={handleTokenSelect}
/>

With Balances

<TokenList 
  chain_id={43114}
  list={tokens}
  showBalances={true}
  onClick={handleTokenSelect}
/>

With Selected Token

<TokenList 
  chain_id={43114}
  list={tokens}
  selected={{ address: selectedToken.address }}
  onClick={handleTokenSelect}
  className="max-h-[400px]"
/>

Token Item Structure

Each token in the list should follow this structure:

type TokenItem = {
  chain_id: number;
  address: string;
  name: string;
  symbol: string;
  balance?: BigNumber; // Optional, used when showBalances is true
  whitelisted?: boolean; // Optional, for token verification
}

States

Loading: Shows loading state when fetching balances
Empty Search: Displays all tokens in the list
Search Results: Shows filtered tokens based on search input
Selected: Highlights the currently selected token
Non-whitelisted: Shows warning for non-whitelisted tokens

Search Functionality

The component supports searching by:

Token name
Token symbol
Exact contract address

When searching by contract address:

Must be a valid Ethereum address
Shows token details if found in the list
Can show import option for non-whitelisted tokens

TokenList

On this page