MultiChainTokenInput

The MultiChainTokenInput component provides a token selection interface that allows users to select tokens from different chains.

Usage

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

// Basic usage
<MultiChainTokenInput 
  selected={{ 
    address: "0x1234...", 
    chain_id: 43114,
    symbol: "AVAX" 
  }}
  list={multiChainTokenList}
  onSelectionChanged={(token) => console.log('Selected token:', token)}
  showBalances={true}
/>

Props

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

Features

Token selection across multiple chains
Chain selection interface
Displays token with chain icon
Shows token balances (optional)
Searchable token list per chain
Responsive dialog design

Examples

Basic Multi-Chain Selection

<MultiChainTokenInput 
  selected={currentToken}
  list={allChainTokens}
  onSelectionChanged={handleTokenChange}
  showBalances={false}
/>

With Balances

<MultiChainTokenInput 
  selected={currentToken}
  list={allChainTokens}
  onSelectionChanged={handleTokenChange}
  showBalances={true}
  className="w-full max-w-sm"
/>

In a Cross-Chain Form

<form onSubmit={handleBridge}>
  <div className="space-y-4">
    <MultiChainTokenInput 
      selected={sourceToken}
      list={allTokens}
      onSelectionChanged={setSourceToken}
      showBalances={true}
    />
    <MultiChainTokenInput 
      selected={destinationToken}
      list={allTokens.filter(t => t.chain_id !== sourceToken.chain_id)}
      onSelectionChanged={setDestinationToken}
      showBalances={true}
    />
    <button type="submit">
      Bridge
    </button>
  </div>
</form>

Custom Styling

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

Component Structure

Trigger
- TokenChip with chain icon
- Chevron down indicator
- Click to open dialog
Dialog
- Header with back button
- Chain selection row
- Search input
- Chain-specific token list
- Token balances (if enabled)

Chain Selection

The component automatically extracts unique chain IDs from the token list and displays them as selectable options:

let chains = Array.from(new Set(list.map(t => t.chain_id)));

MultiChainTokenInput

On this page