Social Feed

Social platforms can embed cross-chain swap widgets directly in the feed — users interact with DeFi without leaving the timeline.

This example shows two common patterns:

• Swap post: A project promotes token bridging with a swap widget attached to a post
• Receive post: A merchant accepts crypto payments via a receive widget, letting users pay from any chain

TF

TokenFlight @tokenflight · 2h

Bridge your ETH to Base in seconds. Try our embedded swap widget — works right in your feed. No redirects, no popups.

42 128 3.2K

DS

DeFi Store @defi_store · 5h

Accept crypto payments for your next purchase. Pay with any token from any chain — we receive USDC on Base. Powered by @tokenflight

89 256 5.8K

Layout

The feed container uses a fixed height (e.g. 800px) with overflow-y: auto so the timeline scrolls naturally when multiple widget posts push the content beyond the viewport. Each widget card sits inside a post embed — give the container a fixed width (e.g. max-width: 600px) to match typical feed column widths.

Integration Notes

• The widget fits naturally inside a card/embed container. Set noBorder and noBackground if the host card already provides its own chrome.
• Use fromToken / toToken presets to guide users toward a specific swap pair, or leave them open for free selection.
• The onSwapSuccess callback can trigger in-app notifications (e.g. “Payment confirmed!”) without navigating away from the feed.

Code Snippet

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

registerElements();

// Swap widget inside a feed card
const swap = new TokenFlightSwap({
  container: '#post-swap-widget',
  config: {
    theme: 'dark',
    fromToken: { chainId: 1, address: '0x0000000000000000000000000000000000000000' },
    toToken:   { chainId: 8453, address: '0x0000000000000000000000000000000000000000' },
  },
  callbacks: {
    onSwapSuccess: (data) => showToast('Swap completed!'),
  },
});
swap.initialize();

// Receive widget for payment posts
const receive = new TokenFlightReceive({
  container: '#post-receive-widget',
  config: {
    target: { chainId: 8453, address: '0x833589fCD6eDb6E08f4c7C32D4f71b54bdA02913' },
    amount: '25',
    theme: 'dark',
  },
  callbacks: {
    onSwapSuccess: (data) => showToast('Payment received!'),
  },
});
receive.initialize();