Wallet App

Wallet applications can integrate a full cross-chain swap experience as a native tab — no need to build swap infrastructure from scratch.

This example shows a swap widget embedded in a wallet’s “Swap” tab, styled to match the surrounding UI with noBackground, noBorder, and hideTitle for a seamless look.

My Wallet 0x7a3d...f29e

Total Balance $12,847.52

+3.24% 24h

Tokens Swap Activity

Home Swap History Explore

Layout

The wallet shell uses a fixed min-height (e.g. 700px) with a flexbox column layout. The swap tab content area takes flex: 1 and scrolls independently, keeping the header, tabs, and bottom nav pinned. Use noBackground: true and noBorder: true so the widget blends into the wallet’s own content area without extra borders or padding.

Integration Notes

• Use noBackground: true, noBorder: true, and hideTitle: true to make the widget blend into the wallet’s own UI shell.
• Pass the wallet’s existing adapter via the walletAdapter option — the widget will use it directly instead of showing its own “Connect Wallet” button.
• Preselect common pairs with fromToken / toToken to skip the token selection step for frequent swaps.
• Use setCustomColors() to match the wallet’s brand palette.

Code Snippet

import { TokenFlightSwap, registerElements } from '@tokenflight/swap';

registerElements();

const swap = new TokenFlightSwap({
  container: '#wallet-swap-tab',
  config: {
    theme: 'dark',
    hideTitle: true,
    noBorder: true,
    noBackground: true,
    fromToken: { chainId: 1, address: '0x0000000000000000000000000000000000000000' },
    toToken: {
      chainId: 8453,
      address: '0x833589fCD6eDb6E08f4c7C32D4f71b54bdA02913',
    },
  },
  // Re-use the wallet's own adapter
  walletAdapter: myWalletAdapter,
  callbacks: {
    onSwapSuccess: (data) => refreshBalances(),
    onSwapError: (err) => showErrorBanner(err),
  },
});
swap.initialize();

// Match the wallet's brand
swap.setCustomColors({
  accent: '#6C5CE7',
  accentText: '#FFFFFF',
});