wagmi

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

EVM only

The wagmi adapter supports EVM chains only (no Solana). For Solana support, use AppKit instead.

Live project Open in StackBlitz

Install

pnpm add @tokenflight/swap @tokenflight/adapter-wagmi @wagmi/core wagmi viem

Example

import { useEffect, useMemo } from 'react';
import { TokenFlightWidget } from '@tokenflight/swap';
import { WagmiWalletAdapter } from '@tokenflight/adapter-wagmi';
import { createConfig, http } from '@wagmi/core';
import { mainnet, base } from '@wagmi/core/chains';
import { injected } from 'wagmi/connectors';

const wagmiConfig = createConfig({
  chains: [mainnet, base],
  connectors: [injected()],
  transports: {
    [mainnet.id]: http(),
    [base.id]: http(),
  },
});

export default function App() {
  const walletAdapter = useMemo(() => new WagmiWalletAdapter(wagmiConfig), []);

  useEffect(() => {
    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. Configure wagmi — define your chains, connectors (injected, WalletConnect, Coinbase, etc.), and transports. The WagmiWalletAdapter auto-derives supportedChainIds from wagmiConfig.chains.

2. Wrap with WagmiWalletAdapter — creates an IWalletAdapter that delegates to wagmi for wallet connections and transaction signing. EVM-only (no Solana support).

3. Mount in useEffect — always initialize after the DOM container is available. Return widget.destroy() for cleanup.

Adding Callbacks and Token Pre-selection

const widget = new TokenFlightWidget({
  container: '#widget',
  config: {
    toToken: { chainId: 8453, address: '0x833589fCD6eDb6E08f4c7C32D4f71b54bdA02913' }, // USDC on Base
    amount: '100',
    tradeType: 'EXACT_OUTPUT',
    theme: 'dark',
  },
  walletAdapter,
  callbacks: {
    onSwapSuccess: (data) => console.log('Done:', data),
    onSwapError: (error) => console.error(error.code, error.message),
  },
});

See Events & Callbacks for all available callbacks.