ethers

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

Live project Open in StackBlitz

Install

pnpm add @tokenflight/swap @tokenflight/adapter-ethers ethers

Example

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]);

  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

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

See Custom Wallet Adapter for details on supportedChainIds.