TokenInput

The TokenInput component provides a token selection interface with a modal dialog containing a searchable list of tokens.

Usage

import { TokenInput } from '@avalabs/builderkit';
 
// Basic usage
<TokenInput 
  selected={{ address: "0x1234...", symbol: "AVAX" }}
  chain_id={43114}
  list={tokenList}
  onSelectionChanged={(token) => console.log('Selected token:', token)}
  showBalances={true}
/>

Props

Prop	Type	Default	Description
`selected`	`{ address: string } & Partial<TokenItem>`	-	Currently selected token
`chain_id`	`number`	-	Chain ID for the token list
`list`	`TokenItem[]`	-	Array of available tokens
`onSelectionChanged`	`(token: TokenItem) => void`	-	Called when token selection changes
`showBalances`	`boolean`	-	Whether to show token balances
`className`	`string`	-	Additional CSS classes

Features

Token selection through modal dialog
Displays token icon and symbol
Shows token balances (optional)
Searchable token list
Uses TokenChip for selected token display
Responsive dialog design

Examples

Basic Token Selection

<TokenInput 
  selected={currentToken}
  chain_id={43114}
  list={availableTokens}
  onSelectionChanged={handleTokenChange}
  showBalances={false}
/>

With Balances

<TokenInput 
  selected={currentToken}
  chain_id={43114}
  list={availableTokens}
  onSelectionChanged={handleTokenChange}
  showBalances={true}
  className="w-full max-w-sm"
/>

In a Form

<form onSubmit={handleSwap}>
  <div className="space-y-4">
    <TokenInput 
      selected={fromToken}
      chain_id={43114}
      list={tokens}
      onSelectionChanged={setFromToken}
      showBalances={true}
    />
    <TokenInput 
      selected={toToken}
      chain_id={43114}
      list={tokens.filter(t => t.address !== fromToken.address)}
      onSelectionChanged={setToToken}
      showBalances={true}
    />
    <button type="submit">
      Swap
    </button>
  </div>
</form>

Custom Styling

<TokenInput 
  selected={token}
  chain_id={43114}
  list={tokens}
  onSelectionChanged={handleTokenChange}
  showBalances={true}
  className="bg-gray-100 rounded-lg p-2"
/>

Component Structure

Trigger
- TokenChip showing selected token
- Chevron down indicator
- Click to open dialog
Dialog
- Header with back button
- Search input
- Scrollable token list
- Token balances (if enabled)

Token Item Structure

type TokenItem = {
  chain_id: number;
  address: string;
  name: string;
  symbol: string;
  balance?: BigNumber;
}

TokenInput

On this page