Token Pre-selection

You can pre-select the source token (fromToken), destination token (toToken), or both, so users land on a ready-to-go screen.

Identifier Formats

Three formats are accepted anywhere a TokenIdentifier is expected:

Object Literal (Imperative API)

app.js

config: {
  fromToken: { chainId: 1, address: '0xA0b86991c6218b36c1d19D4a2e9Eb0cE3606eB48' },
  toToken: { chainId: 8453, address: '0x833589fCD6eDb6E08f4c7C32D4f71b54bdA02913' },
}

CAIP-10 String (HTML attributes & imperative)

eip155:<chainId>:<contractAddress>
solana:5eykt4UsFv8P8NJdTREpY1vzqKqZKvdp:<mintAddress>

index.html

<!-- EVM tokens -->
<tokenflight-widget
  to-token="eip155:8453:0x833589fCD6eDb6E08f4c7C32D4f71b54bdA02913"
  trade-type="EXACT_OUTPUT"
  amount="100"
  from-token="eip155:1:0xA0b86991c6218b36c1d19D4a2e9Eb0cE3606eB48"
></tokenflight-widget>

<!-- Solana token (USDC on Solana) -->
<tokenflight-widget
  to-token="solana:5eykt4UsFv8P8NJdTREpY1vzqKqZKvdp:EPjFWdd5AufqSSqeM2qN1xzybapC8G4wEGGkZwyTDt1v"
  trade-type="EXACT_OUTPUT"
  amount="100"
></tokenflight-widget>

JSON String

index.html

<tokenflight-widget
  to-token="eip155:8453:0x833589fCD6eDb6E08f4c7C32D4f71b54bdA02913"
  trade-type="EXACT_OUTPUT"
  amount="100"
  from-token='{"chainId":1,"address":"0xA0b86991c6218b36c1d19D4a2e9Eb0cE3606eB48"}'
></tokenflight-widget>

Supported Chains

CAIP-10 Prefix	Chain
eip155:1	Ethereum
eip155:137	Polygon
eip155:42161	Arbitrum One
eip155:8453	Base
eip155:10	Optimism
eip155:56	BNB Chain
eip155:43114	Avalanche C-Chain
solana:5eykt4UsFv8P8NJdTREpY1vzqKqZKvdp	Solana

Any EVM eip155:<chainId> reference is accepted — the table above lists chains with built-in shortcuts.

Examples

Receive: USDC on Base from ETH

app.js

const widget = new TokenFlightWidget({
  container: '#widget',
  config: {
    toToken: { chainId: 8453, address: '0x833589fCD6eDb6E08f4c7C32D4f71b54bdA02913' },
    tradeType: 'EXACT_OUTPUT',
    amount: '100',
    theme: 'dark',
    fromToken: { chainId: 1, address: '0x0000000000000000000000000000000000000000' },
  },
});
widget.initialize();

Receive: Pre-fill source token

app.js

const widget = new TokenFlightWidget({
  container: '#widget',
  config: {
    toToken: { chainId: 8453, address: '0x833589fCD6eDb6E08f4c7C32D4f71b54bdA02913' },
    tradeType: 'EXACT_OUTPUT',
    amount: '50',
    fromToken: 'eip155:1:0xA0b86991c6218b36c1d19D4a2e9Eb0cE3606eB48',
    theme: 'dark',
  },
});
widget.initialize();

Declarative: Full Pre-selection

index.html

<tokenflight-widget
  to-token="eip155:8453:0x833589fCD6eDb6E08f4c7C32D4f71b54bdA02913"
  trade-type="EXACT_OUTPUT"
  amount="100"
  theme="dark"
  from-token="eip155:1:0x0000000000000000000000000000000000000000"
></tokenflight-widget>

Native Token Addresses

Use the zero address to refer to a chain’s native token:

Chain	Native Address
EVM	0x0000000000000000000000000000000000000000
Solana	11111111111111111111111111111111