AppKit

Use AppKit when you want WalletConnect UX plus optional multi-chain providers in one modal.

Live project Open in StackBlitz

Install

pnpm add @tokenflight/swap @tokenflight/adapter-appkit @reown/appkit @reown/appkit-adapter-wagmi wagmi viem

Example

import { useEffect, useMemo } from 'react';
import { createAppKit } from '@reown/appkit';
import { WagmiAdapter } from '@reown/appkit-adapter-wagmi';
import { mainnet, base } from '@reown/appkit/networks';
import { TokenFlightWidget } from '@tokenflight/swap';
import { AppKitWalletAdapter } from '@tokenflight/adapter-appkit';

// Get your project ID from https://cloud.reown.com
const projectId = import.meta.env.VITE_REOWN_PROJECT_ID;
const networks = [mainnet, base] as const;

const wagmiAdapter = new WagmiAdapter({
  projectId,
  networks: [...networks],
});

const appkit = createAppKit({
  adapters: [wagmiAdapter],
  networks: [...networks],
  projectId,
  metadata: {
    name: 'TokenFlight Example',
    description: 'TokenFlight + AppKit',
    url: window.location.origin,
    icons: [],
  },
});

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

  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 }} />;
}

Set VITE_REOWN_PROJECT_ID in your .env file. Get a project ID from cloud.reown.com.

How It Works

1. Create a wagmi adapter and AppKit instance — AppKit manages WalletConnect modal UI and multi-chain provider support. Pass your Reown project ID and the networks you want to support.

2. Create an AppKitWalletAdapter — wraps the AppKit instance to implement the IWalletAdapter interface that TokenFlight widgets expect. Supports both EVM and Solana chains. Chain IDs are auto-derived from getCaipNetworks().

3. Initialize with useEffect — mount the widget in a React effect to ensure the DOM container exists. Always return widget.destroy() in the cleanup function to prevent memory leaks.

4. Cache the adapter with useMemo — prevents the adapter from being recreated on every render, which would cause unnecessary wallet reconnections.

Adding Callbacks

    const widget = new TokenFlightWidget({
      container: '#widget',
      config: {
        toToken: { chainId: 8453, address: '0x833589fCD6eDb6E08f4c7C32D4f71b54bdA02913' },
        amount: '100',
        tradeType: 'EXACT_OUTPUT',
        theme: 'light',
      },
  walletAdapter,
  callbacks: {
    onSwapSuccess: (data) => {
      console.log('Payment completed:', data.orderId, data.txHash);
    },
    onSwapError: (error) => {
      console.error(`[${error.code}] ${error.message}`);
    },
    onWalletConnected: ({ address, chainType }) => {
      console.log(`Connected: ${address} (${chainType})`);
    },
  },
});

See Events & Callbacks for all available callbacks.