TokenFlightSDK

Appearance

Swap inside your product.

Read the docs

Presets

Style

Trade

Restrict which tokens the user can pick. Leave empty to allow all.

Shown beside the recipient badge. Falls back to the full address when a label is set but this is empty.

Set both, or leave both empty. bps = basis points (30 = 0.3%).

Sent as the X-Integrator-Id header for fee attribution. Register in the dashboard to obtain one.

Payment & Transfer

Appearance

Environment

Leave empty to use the selected preset. Non-official endpoints prompt a warning before the live preview connects.

Inherits the default transfer config. Pick a preset or paste a transfer-config-url.

CSS variables

Active: 0

Override the widget's theme variables. Edits apply live to the widget on the left. Untouched vars follow the active theme.

  • --tf-primaryPrimary brand color
  • --tf-primary-alphaPrimary at low alpha
  • --tf-primary-lightrgba(42,114,255,0.1)
  • --tf-primary-glowrgba(42,114,255,0.2)
  • --tf-bg#ffffff
  • --tf-bg-secondary#f8f9fb
  • --tf-bg-elevated#ffffff
  • --tf-surface#ffffff
  • --tf-surface-hover#f3f4f8
  • --tf-input-bg#f5f6f8
  • --tf-glassrgba(255,255,255,0.7)
  • --tf-skeleton#e8eaef
  • --tf-text#0f1419
  • --tf-text-secondary#5e6673
  • --tf-text-tertiary#9ba3af
  • --tf-text-on-primary#ffffff
  • --tf-border#e8eaef
  • --tf-border-light#f0f1f5
  • --tf-success#00C48C
  • --tf-success-bgrgba(0,196,140,0.08)
  • --tf-error#FF4757
  • --tf-error-bgrgba(255,71,87,0.08)
  • --tf-warning#FFAA00
  • --tf-warning-bgrgba(255,170,0,0.08)
  • --tf-radius-xs6px
  • --tf-radius-sm12px
  • --tf-radius16px
  • --tf-radius-lg20px
  • --tf-radius-xl26px
  • --tf-button-radiusvar(--tf-radius-lg)
  • --tf-shadow0 2px 16px rgba(0,0,0,0.06), 0 0 1px rgba(0,0,0,0.1)
  • --tf-shadow-lg0 8px 40px rgba(0,0,0,0.08), 0 0 1px rgba(0,0,0,0.1)

Text labels

Active: 0

Rename the widget's UI labels without switching locale. Edits apply live to the widget on the left. Untouched labels follow the active locale.

  • youPayYou pay
  • youReceiveYou receive
  • trackingSignTitleSign in wallet
  • trackingSignedTitleSigned in wallet
  • trackingSignSubtitleConfirm in your wallet...
  • trackingSignedSubtitleSignature submitted
  • trackingDepositTitleDeposit on {chain}
  • trackingDepositSubtitleWaiting for confirmation...
  • trackingDepositConfirmedSubtitleConfirmed on-chain
  • trackingFillTitleProvider filling your order
  • trackingFillSubtitleProcessing your order...
  • trackingCompleteTitleFilled on {chain}
  • trackingCompleteSubtitleTokens delivered
  • trackingPaymentTitleAwaiting payment
  • trackingPaymentConfirmedSubtitlePayment confirmed
  • trackingSwapTitleSwapping tokens
  • trackingPurchaseTitlePurchase complete
  • trackingDeliverySubtitleTokens delivered to your wallet

Built for every swap surface

A widget system that ships like product, not a plugin.

TokenFlight is designed for teams that want cross-chain swaps to feel native inside their app, wallet, or checkout flow.

Cross-chain embed

Explore, route, and settle from one surface.

Launch exact-input swaps, fixed-output receives, and deposit flows without rebuilding token search, price display, or chain routing from scratch.

Browse examples
EETHEthereum
$2,242.34
UUSDCUSD Coin
$1.00
SSOLSolana
$84.70
Wallet control

Bring your own wallet strategy.

AppKit, wagmi, ethers, or a custom adapter. TokenFlight handles the flow while your product keeps the connection model and trust surface.

Read adapter docs
Performance

< 70 KB. No heavy shell.

A single web component with shadow isolation, typed events, and low overhead for docs, product surfaces, and embedded flows.

White-label

Tune the UI until it feels in-house.

Set accent color, localize copy, style exposed parts, and keep the widget aligned with the visual language of your own app.

Open styling guide

Enterprise

Need a tailored rollout?

White-label styling, custom wallet adapters, and partner onboarding for production teams.

For product, wallet, and checkout teams shipping live flows.

Talk to the team