TokenFlightSDK

Appearance

ethers ​

This example uses the built-in @tokenflight/adapter-ethers package.

Live projectOpen in StackBlitz

Install ​

bash
npm install @tokenflight/swap @tokenflight/adapter-ethers ethers
bash
pnpm add @tokenflight/swap @tokenflight/adapter-ethers ethers
bash
yarn add @tokenflight/swap @tokenflight/adapter-ethers ethers
bash
bun add @tokenflight/swap @tokenflight/adapter-ethers ethers

Example ​

tsx
import { useEffect, useMemo } from 'react';
import { TokenFlightWidget } from '@tokenflight/swap';
import { EthersWalletAdapter } from '@tokenflight/adapter-ethers';

export default function App() {
  const walletAdapter = useMemo(() => {
    if (typeof window === 'undefined' || !window.ethereum) return null;
    return new EthersWalletAdapter(window.ethereum);
  }, []);

  useEffect(() => {
    if (!walletAdapter) return;

    const widget = new TokenFlightWidget({
      container: '#widget',
      config: {
        toToken: { chainId: 8453, address: '0x833589fCD6eDb6E08f4c7C32D4f71b54bdA02913' },
        amount: '100',
        tradeType: 'EXACT_OUTPUT',
        theme: 'light',
      },
      walletAdapter,
    });
    widget.initialize();
    return () => {
      widget.destroy();
      walletAdapter.destroy?.();
    };
  }, [walletAdapter]);

  return <div id="widget" style={{ minHeight: 560 }} />;
}

How It Works ​

  1. Check for window.ethereum — the ethers adapter requires an injected EIP-1193 provider (MetaMask, Brave Wallet, etc.). If no provider is found, the adapter is null and the widget won't mount.

  2. Create EthersWalletAdapter — wraps the provider to implement IWalletAdapter. EVM-only (no Solana support). Unlike wagmi and AppKit adapters, ethers does not auto-derive chain IDs — pass supportedChainIds explicitly if you want to restrict to specific chains.

  3. Guard with useMemo — avoids recreating the adapter on re-render.

With Explicit Chain Filtering ​

tsx
const walletAdapter = useMemo(() => {
  if (!window.ethereum) return null;
  return new EthersWalletAdapter(window.ethereum, {
    // Only show tokens and balances from these chains
    supportedChainIds: [1, 8453, 42161],
  });
}, []);

See Custom Wallet Adapter for details on supportedChainIds.