Pre-built and customizable flow for transferring tokens between Avalanche chains.

Inter-Chain Token Transfer (ICTT)

The ICTT (Inter-Chain Token Transfer) flow provides a complete and customizable interface for transferring tokens between different Avalanche chains.

Basic Usage

import { ICTT } from '@avalabs/builderkit';
 
function App() {
  const tokens = [
    // Array of tokens following the ICTTToken interface
    // See /docs/builderkit/tokens for configuration details
    [...]
  ];
 
  return (
    <ICTT 
      tokens={tokens}
      token_in="0x1234..."  // Address of the input token
      source_chain_id={43113}
      destination_chain_id={173750}
    />
  );
}

Configuration

Required Props

Prop	Type	Description
`tokens`	`ICTTToken[]`	List of supported tokens with their mirror configurations
`source_chain_id`	`number`	ID of the source chain
`destination_chain_id`	`number`	ID of the destination chain
`token_in`	`string`	Address of the input token

Token Configuration

Each token in the tokens array should have the following structure:

interface ICTTToken {
  // Basic token information
  address: string;          // Token contract address
  name: string;            // Token name
  symbol: string;          // Token symbol
  decimals: number;        // Token decimals
  chain_id: number;        // Chain ID where token exists
  
  // ICTT specific fields
  supports_ictt: boolean;  // Whether token supports ICTT
  transferer?: string;     // Transferer contract address
  is_transferer?: boolean; // Whether token is a transferer
  
  // Mirror tokens on other chains
  mirrors: {
    address: string;       // Mirror token address
    transferer: string;    // Mirror token transferer
    chain_id: number;      // Mirror token chain ID
    decimals: number;      // Mirror token decimals
    home?: boolean;        // Whether this is the home chain
  }[];
}

Optional Props

Prop	Type	Default	Description
`className`	`string`	-	Additional CSS classes

Features

The ICTT flow includes:

Chain selection for source and destination
Token selection with balance display
Amount input with validation
Gas fee estimation
Transaction status tracking
Bridge transaction confirmation

Advanced Usage

Building Custom Flows

The ICTT flow exposes individual components that you can use to build your own custom transfer interface:

import { 
  ICTTProvider,
  ChainSelector, 
  TokenSelector,
  AmountInput,
  TransferButton,
  TransferStatus 
} from '@avalabs/builderkit/ictt/components';
 
function CustomICTT() {
  const tokens = [
    // Array of tokens following the ICTTToken interface
    // See /docs/builderkit/tokens for configuration details
    [...]
  ];
 
  return (
    <ICTTProvider
      tokens={tokens}
      token_in="0x1234..."
      source_chain_id={43113}
      destination_chain_id={173750}
    >
      <div className="space-y-4">
        <ChainSelector label="From Chain" onSelect={handleSourceChainSelect} />
        <TokenSelector chainId={sourceChainId} onSelect={handleTokenSelect} />
        <AmountInput value={amount} onChange={setAmount} token={selectedToken} />
        <ChainSelector label="To Chain" onSelect={handleDestChainSelect} />
        <TransferButton />
        <TransferStatus />
      </div>
    </ICTTProvider>
  );
}

ICTT Flow