From 10ea7a4da34025f2097dfe2f63ba75635cef0e3d Mon Sep 17 00:00:00 2001
From: alexander-sei <alexander@seifdn.org>
Date: Fri, 9 Jan 2026 03:28:13 +0100
Subject: [PATCH 1/3] Add in app swaps page

---
 content/evm/_meta.js         |   1 +
 content/evm/in-app-swaps.mdx | 516 +++++++++++++++++++++++++++++++++++
 2 files changed, 517 insertions(+)
 create mode 100644 content/evm/in-app-swaps.mdx

diff --git a/content/evm/_meta.js b/content/evm/_meta.js
index fe7b1f5a..8905aa7c 100644
--- a/content/evm/_meta.js
+++ b/content/evm/_meta.js
@@ -27,6 +27,7 @@ export default {
 		title: 'Sei Global Wallet'
 	},
 	'building-a-frontend': 'Building a Frontend',
+	'in-app-swaps': 'In-App Swaps',
 
 	'-- Smart Contracts': {
 		type: 'separator',
diff --git a/content/evm/in-app-swaps.mdx b/content/evm/in-app-swaps.mdx
new file mode 100644
index 00000000..ea80ce82
--- /dev/null
+++ b/content/evm/in-app-swaps.mdx
@@ -0,0 +1,516 @@
+---
+title: 'In-App Swaps - Complete Integration Guide'
+description: 'Comprehensive guide to integrating swap widgets into your Sei application. Learn how to embed Symphony, Swing, Squid, Thirdweb, and other swap solutions.'
+keywords:
+  - swap widget
+  - in-app swaps
+  - token exchange
+  - dex integration
+  - symphony
+  - swing
+  - squid
+  - thirdweb
+---
+
+import { Callout, Tabs } from 'nextra/components';
+
+# In-App Swaps Integration Guide
+
+Integrating in-app swap functionality into your Sei application enables users to exchange tokens directly within your platform, enhancing user experience and engagement. This guide covers a broad range of available swap widgets compatible with Sei that you can use to integrate into your dApp to enable in-app swaps.
+
+## Overview
+
+Swap widgets are embeddable UI components that abstract the complexity of interacting with decentralized exchanges (DEXs) and liquidity aggregators. They provide:
+
+- **Seamless UX**: Users can swap tokens without leaving your app
+- **Reduced Friction**: No need to redirect users to external DEX interfaces
+- **Revenue Opportunities**: Many providers offer fee-sharing mechanisms
+- **Cross-Chain Support**: Some widgets enable bridging assets from other chains
+
+## Available Swap Widgets
+
+| Provider                          | Type       | Cross-Chain | Integration    | Best For                         |
+| --------------------------------- | ---------- | ----------- | -------------- | -------------------------------- |
+| [Symphony](#symphony-swap-widget) | Native DEX | ❌          | iframe         | Simple Sei-native swaps          |
+| [Swing](#swing-widget)            | Aggregator | ✅          | React/iframe   | Cross-chain with 30+ networks    |
+| [Thirdweb](#thirdweb-payments)    | Payments   | ✅          | React          | Full payment stack with onramps  |
+| [LI.FI](#lifi-widget)             | Aggregator | ✅          | React/Web Comp | Extensive cross-chain routing    |
+| [deBridge](#debridge-widget)      | Bridge     | ✅          | iframe         | Fast cross-chain transfers (DLN) |
+
+---
+
+## Symphony Swap Widget
+
+[Symphony](https://symph.ag) is a native DEX on Sei, offering the simplest integration via iframe embedding.
+
+### Quick Start
+
+```html
+<iframe src="https://symph.ag/embed"></iframe>
+```
+
+### Size Requirements
+
+- **Minimum Width**: `377px`
+- **Minimum Height**: `650px` (recommended to prevent wallet modal scrolling)
+- **Optimal Height**: `680-685px`
+
+### URL Parameters
+
+Customize the widget by appending query parameters:
+
+| Parameter       | Description                   | Example                                               |
+| --------------- | ----------------------------- | ----------------------------------------------------- |
+| `tokenIn`       | Input token contract address  | `tokenIn=0xe15fC38F6D8c56aF07bbCBe3BAf5708A2Bf42392`  |
+| `tokenOut`      | Output token contract address | `tokenOut=0xE30feDd158A2e3b13e9badaeABaFc5516e95e8C7` |
+| `bgColor`       | Background color              | `bgColor=%23FFFFFF` or `bgColor=white`                |
+| `theme`         | Widget theme                  | `theme=light` or `theme=dark`                         |
+| `notifications` | Show notifications            | `notifications=true` or `notifications=false`         |
+
+<Callout type="warning">For hex colors, use `%23` instead of `#` in the URL (e.g., `%23FFFFFF` for white).</Callout>
+
+### Complete Example
+
+<Tabs items={['HTML', 'React', 'Next.js']}>
+<Tabs.Tab>
+```html
+<iframe
+  src="https://symph.ag/embed?tokenIn=0xe15fC38F6D8c56aF07bbCBe3BAf5708A2Bf42392&tokenOut=0xE30feDd158A2e3b13e9badaeABaFc5516e95e8C7&bgColor=white&theme=light&notifications=false"
+  style="width: 100%; min-height: 650px; border: none; border-radius: 12px;"
+  title="Symphony Swap Widget"
+></iframe>
+```
+</Tabs.Tab>
+<Tabs.Tab>
+```jsx
+function SwapWidget() {
+  const tokenIn = "0xe15fC38F6D8c56aF07bbCBe3BAf5708A2Bf42392";
+  const tokenOut = "0xE30feDd158A2e3b13e9badaeABaFc5516e95e8C7";
+  
+  return (
+    <iframe
+      src={`https://symph.ag/embed?tokenIn=${tokenIn}&tokenOut=${tokenOut}&theme=dark`}
+      style={{
+        width: '100%',
+        minHeight: '650px',
+        border: 'none',
+        borderRadius: '12px'
+      }}
+      title="Symphony Swap Widget"
+    />
+  );
+}
+```
+</Tabs.Tab>
+<Tabs.Tab>
+```tsx
+'use client';
+
+export default function SwapPage() {
+  const params = new URLSearchParams({
+    tokenIn: '0xe15fC38F6D8c56aF07bbCBe3BAf5708A2Bf42392',
+    tokenOut: '0xE30feDd158A2e3b13e9badaeABaFc5516e95e8C7',
+    theme: 'dark',
+    notifications: 'true'
+  });
+
+return (
+<div className="max-w-md mx-auto">
+<iframe
+src={`https://symph.ag/embed?${params.toString()}`}
+className="w-full min-h-[650px] border-0 rounded-xl"
+title="Symphony Swap"
+/>
+</div>
+);
+}
+
+````
+</Tabs.Tab>
+</Tabs>
+
+### Popular Sei Token Addresses (Mainnet)
+
+| Token | Address |
+|-------|---------|
+| WSEI | [`0xE30feDd158A2e3b13e9badaeABaFc5516e95e8C7`](https://seiscan.io/address/0xE30feDd158A2e3b13e9badaeABaFc5516e95e8C7) |
+| USDC (native) | [`0xe15fC38F6D8c56aF07bbCBe3BAf5708A2Bf42392`](https://seiscan.io/address/0xe15fC38F6D8c56aF07bbCBe3BAf5708A2Bf42392) |
+| USDT0 | [`0x9151434b16b9763660705744891fA906F660EcC5`](https://seiscan.io/address/0x9151434b16b9763660705744891fA906F660EcC5) |
+
+📚 [Symphony Documentation](https://docs.symph.ag/widget/symphony-swap-widget)
+
+---
+
+## Swing Widget
+
+[Swing](https://swing.xyz) provides cross-chain bridging and swapping across 30+ blockchains with smart routing.
+
+### Features
+
+- Cross-chain swaps across 30+ blockchains
+- Chain-agnostic smart routing
+- Support for 100+ wallets
+- Real-time transaction tracking
+- Customizable themes
+
+### Installation
+
+```bash
+npm install @swing.xyz/ui
+````
+
+### React Integration
+
+```tsx
+import { Swap } from '@swing.xyz/ui';
+import '@swing.xyz/ui/theme.css';
+
+function SwapWidget() {
+  return <Swap projectId="your-swing-project-id" debug={false} />;
+}
+```
+
+### Advanced Configuration
+
+```tsx
+import { Swap } from '@swing.xyz/ui';
+import '@swing.xyz/ui/theme.css';
+
+function SwapWidget() {
+  return (
+    <Swap
+      projectId="your-swing-project-id"
+      environment="production"
+      theme={{
+        mode: 'dark',
+        accent: '#0ea5e9'
+      }}
+    />
+  );
+}
+```
+
+<Callout type="info">For chain/token defaults and routing configuration, Swing recommends configuring your project in the Swing Platform and using its `projectId`. See [Swing “Use with React”](https://developers.swing.xyz/reference/widget/swaps/with-react).</Callout>
+
+### Web Component (Non-React)
+
+```html
+<script src="https://cdn.swing.xyz/widget/v1/swing-widget.min.js"></script>
+
+<div id="swing-widget"></div>
+
+<script>
+  SwingWidget.init({
+    target: '#swing-widget',
+    projectId: 'your-swing-project-id',
+    environment: 'production',
+    defaultFromChain: 'sei',
+    defaultToChain: 'ethereum'
+  });
+</script>
+```
+
+<Callout type="info">Get your project ID by creating a project on the [Swing Platform](https://platform.swing.xyz).</Callout>
+
+📚 [Swing Widget Documentation](https://developers.swing.xyz/reference/widget)
+
+---
+
+## Thirdweb Payments
+
+[Thirdweb Payments](https://thirdweb.com/payments) provides a comprehensive payment solution including onramps, swaps, and bridging.
+
+### Features
+
+- Universal EVM chain support
+- Automatic cross-chain routing
+- Fiat onramps integrated
+- Fee-sharing for developers
+- Ready-made React components
+
+### Installation
+
+```bash
+npm install thirdweb
+```
+
+### React Integration
+
+```tsx
+import { createThirdwebClient } from 'thirdweb';
+import { PayEmbed } from 'thirdweb/react';
+import { sei } from 'thirdweb/chains';
+
+const client = createThirdwebClient({
+  clientId: 'your-thirdweb-client-id'
+});
+
+function PaymentWidget() {
+  return (
+    <PayEmbed
+      client={client}
+      payOptions={{
+        mode: 'fund_wallet',
+        prefillBuy: {
+          chain: sei,
+          amount: '0.01'
+        }
+      }}
+    />
+  );
+}
+```
+
+### Direct Swap Mode
+
+```tsx
+import { createThirdwebClient } from 'thirdweb';
+import { PayEmbed } from 'thirdweb/react';
+import { sei } from 'thirdweb/chains';
+
+const client = createThirdwebClient({
+  clientId: 'your-thirdweb-client-id'
+});
+
+function SwapWidget() {
+  return (
+    <PayEmbed
+      client={client}
+      payOptions={{
+        mode: 'direct_payment',
+        paymentInfo: {
+          chain: sei,
+          token: {
+            address: '0xe15fC38F6D8c56aF07bbCBe3BAf5708A2Bf42392', // USDC on Sei
+            name: 'USDC',
+            symbol: 'USDC'
+          },
+          amount: '100'
+        }
+      }}
+      theme="dark"
+    />
+  );
+}
+```
+
+### Transaction Mode
+
+For payments to specific contracts or transactions:
+
+```tsx
+import { createThirdwebClient } from 'thirdweb';
+import { PayEmbed } from 'thirdweb/react';
+import { sei } from 'thirdweb/chains';
+
+const client = createThirdwebClient({
+  clientId: 'your-thirdweb-client-id'
+});
+
+function NFTPurchaseWidget() {
+  return (
+    <PayEmbed
+      client={client}
+      payOptions={{
+        mode: 'transaction',
+        transaction: {
+          chain: sei,
+          to: '0xYourNFTContract',
+          data: '0x...', // Encoded function call
+          value: '1000000000000000000' // 1 SEI in wei
+        },
+        metadata: {
+          name: 'NFT Purchase',
+          image: 'https://your-nft-image.png'
+        }
+      }}
+    />
+  );
+}
+```
+
+📚 [Thirdweb Payments Documentation](https://portal.thirdweb.com/payments)
+
+---
+
+## LI.FI Widget
+
+[LI.FI](https://li.fi) powers many popular applications (like Jumper.exchange) with its advanced bridge and DEX aggregation widget.
+
+### Features
+
+- Aggregates multiple bridges and DEXs
+- Highly customizable UI
+- Extensive cross-chain support
+- Wallet management included
+- SDK and Widget options
+
+### Installation
+
+```bash
+npm install @lifi/widget
+```
+
+### React Integration
+
+```tsx
+import { LiFiWidget, WidgetConfig } from '@lifi/widget';
+
+const widgetConfig: WidgetConfig = {
+  integrator: 'your-dapp-name',
+  containerStyle: {
+    border: '1px solid rgb(234, 234, 234)',
+    borderRadius: '16px'
+  },
+  fromChain: 1, // Ethereum
+  toChain: 1329 // Sei
+};
+
+export const SwapWidget = () => {
+  return <LiFiWidget config={widgetConfig} />;
+};
+```
+
+📚 [LI.FI Widget Documentation](https://docs.li.fi/widget/overview)
+
+---
+
+## deBridge Widget
+
+[deBridge](https://debridge.finance) offers the DLN (deBridge Liquidity Network) for high-performance cross-chain trading.
+
+### Features
+
+- **High Speed**: Near-instant finality for many pairs
+- **Zero Slippage**: Limit orders and MEV protection
+- **Deep Liquidity**: Access to global liquidity pools
+- **Iframe Support**: Easy embedding
+
+### Integration
+
+You can configure and generate a widget via the [deBridge Widget Builder](https://app.debridge.finance/widget).
+
+```html
+<iframe src="https://app.debridge.finance/widget?v=1&inputChain=1&outputChain=1329&inputCurrency=&outputCurrency=&lang=en&mode=simple" width="100%" height="700" frameborder="0" allow="clipboard-write"></iframe>
+```
+
+📚 [deBridge Documentation](https://docs.debridge.finance)
+
+---
+
+## Best Practices
+
+### Security Considerations
+
+<Callout type="warning">**Security Checklist** - ✅ Only use widgets from reputable, audited providers - ✅ Keep widget scripts updated to latest versions - ✅ Validate that iframe sources match official domains - ✅ Implement Content Security Policy (CSP) headers - ✅ Never expose API keys in client-side code (use environment variables)</Callout>
+
+### Performance Optimization
+
+```tsx
+// Lazy load swap widgets to improve initial page load
+import dynamic from 'next/dynamic';
+
+const SwapWidget = dynamic(() => import('./SwapWidget'), {
+  loading: () => <div className="animate-pulse h-[650px] bg-gray-800 rounded-xl" />,
+  ssr: false
+});
+```
+
+### Responsive Design
+
+```css
+/* Ensure swap widgets are responsive */
+.swap-container {
+  width: 100%;
+  max-width: 420px;
+  margin: 0 auto;
+}
+
+.swap-container iframe {
+  width: 100%;
+  min-height: 650px;
+  border: none;
+  border-radius: 12px;
+}
+
+@media (max-width: 480px) {
+  .swap-container {
+    max-width: 100%;
+    padding: 0 16px;
+  }
+}
+```
+
+### Error Handling
+
+```tsx
+import { useState } from 'react';
+
+function SwapWidgetWithFallback() {
+  const [error, setError] = useState(false);
+
+  if (error) {
+    return (
+      <div className="p-6 bg-red-900/20 rounded-xl text-center">
+        <p>Swap widget failed to load.</p>
+        <a href="https://symph.ag" target="_blank" rel="noopener noreferrer" className="text-blue-400 underline">
+          Open Symphony directly →
+        </a>
+      </div>
+    );
+  }
+
+  return <iframe src="https://symph.ag/embed" onError={() => setError(true)} style={{ width: '100%', minHeight: '650px', border: 'none' }} title="Swap Widget" />;
+}
+```
+
+---
+
+## Comparison Matrix
+
+| Feature          | Symphony | Swing | Thirdweb | LI.FI | deBridge |
+| ---------------- | -------- | ----- | -------- | ----- | -------- |
+| **Supports Sei** | ✅       | ✅    | ✅       | ✅    | ✅       |
+| **Cross-Chain**  | ❌       | ✅    | ✅       | ✅    | ✅       |
+| **Fiat Onramp**  | ❌       | ❌    | ✅       | ❌    | ❌       |
+| **React SDK**    | ❌       | ✅    | ✅       | ✅    | ❌       |
+| **iframe**       | ✅       | ✅    | ❌       | ❌    | ✅       |
+| **Fee Sharing**  | ❓       | ✅    | ✅       | ✅    | ✅       |
+
+---
+
+## Choosing the Right Widget
+
+### Use Symphony if:
+
+- You only need Sei-native token swaps
+- You want the simplest possible integration
+- Your users are already on the Sei network
+
+### Use Swing or LI.FI if:
+
+- You need deep cross-chain swaps and aggregation
+- Your users are coming from other networks
+- You want robust React components with customization
+
+### Use Thirdweb if:
+
+- You need a complete payment solution
+- You want fiat onramps + swaps in one widget
+- You're building a full-featured dApp with other Thirdweb tools
+
+### Use deBridge if:
+
+- You prefer simple iframe integrations
+- You need support for many chains
+- You want fast cross-chain execution with DLN
+
+---
+
+## Additional Resources
+
+- [Symphony Swap Widget Documentation](https://docs.symph.ag/widget/symphony-swap-widget)
+- [Swing Widget Documentation](https://developers.swing.xyz/reference/widget)
+- [Thirdweb Payments Documentation](https://portal.thirdweb.com/payments)
+- [LI.FI Widget Docs](https://docs.li.fi/widget/overview)
+- [deBridge Widget Builder](https://app.debridge.finance/widget)

From 2bdd6bc2e7a96bb85dd92e02681367fbb7a16721 Mon Sep 17 00:00:00 2001
From: alexander-sei <alexander@seifdn.org>
Date: Sat, 10 Jan 2026 02:12:59 +0100
Subject: [PATCH 2/3] compactify tutorial

---
 content/evm/in-app-swaps.mdx | 351 ++---------------------------------
 1 file changed, 16 insertions(+), 335 deletions(-)

diff --git a/content/evm/in-app-swaps.mdx b/content/evm/in-app-swaps.mdx
index ea80ce82..a433601f 100644
--- a/content/evm/in-app-swaps.mdx
+++ b/content/evm/in-app-swaps.mdx
@@ -1,22 +1,14 @@
 ---
-title: 'In-App Swaps - Complete Integration Guide'
-description: 'Comprehensive guide to integrating swap widgets into your Sei application. Learn how to embed Symphony, Swing, Squid, Thirdweb, and other swap solutions.'
-keywords:
-  - swap widget
-  - in-app swaps
-  - token exchange
-  - dex integration
-  - symphony
-  - swing
-  - squid
-  - thirdweb
+title: 'In-App Swaps - Symphony Integration Guide'
+description: 'Guide to integrating the Symphony swap widget into your Sei application for seamless token exchanges.'
+keywords: ['swap widget', 'in-app swaps', 'token exchange', 'dex integration', 'symphony']
 ---
 
 import { Callout, Tabs } from 'nextra/components';
 
 # In-App Swaps Integration Guide
 
-Integrating in-app swap functionality into your Sei application enables users to exchange tokens directly within your platform, enhancing user experience and engagement. This guide covers a broad range of available swap widgets compatible with Sei that you can use to integrate into your dApp to enable in-app swaps.
+Integrating in-app swap functionality into your Sei application enables users to exchange tokens directly within your platform, enhancing user experience and engagement.
 
 ## Overview
 
@@ -27,18 +19,6 @@ Swap widgets are embeddable UI components that abstract the complexity of intera
 - **Revenue Opportunities**: Many providers offer fee-sharing mechanisms
 - **Cross-Chain Support**: Some widgets enable bridging assets from other chains
 
-## Available Swap Widgets
-
-| Provider                          | Type       | Cross-Chain | Integration    | Best For                         |
-| --------------------------------- | ---------- | ----------- | -------------- | -------------------------------- |
-| [Symphony](#symphony-swap-widget) | Native DEX | ❌          | iframe         | Simple Sei-native swaps          |
-| [Swing](#swing-widget)            | Aggregator | ✅          | React/iframe   | Cross-chain with 30+ networks    |
-| [Thirdweb](#thirdweb-payments)    | Payments   | ✅          | React          | Full payment stack with onramps  |
-| [LI.FI](#lifi-widget)             | Aggregator | ✅          | React/Web Comp | Extensive cross-chain routing    |
-| [deBridge](#debridge-widget)      | Bridge     | ✅          | iframe         | Fast cross-chain transfers (DLN) |
-
----
-
 ## Symphony Swap Widget
 
 [Symphony](https://symph.ag) is a native DEX on Sei, offering the simplest integration via iframe embedding.
@@ -131,270 +111,11 @@ title="Symphony Swap"
 
 ### Popular Sei Token Addresses (Mainnet)
 
-| Token | Address |
-|-------|---------|
-| WSEI | [`0xE30feDd158A2e3b13e9badaeABaFc5516e95e8C7`](https://seiscan.io/address/0xE30feDd158A2e3b13e9badaeABaFc5516e95e8C7) |
-| USDC (native) | [`0xe15fC38F6D8c56aF07bbCBe3BAf5708A2Bf42392`](https://seiscan.io/address/0xe15fC38F6D8c56aF07bbCBe3BAf5708A2Bf42392) |
-| USDT0 | [`0x9151434b16b9763660705744891fA906F660EcC5`](https://seiscan.io/address/0x9151434b16b9763660705744891fA906F660EcC5) |
-
-📚 [Symphony Documentation](https://docs.symph.ag/widget/symphony-swap-widget)
-
----
-
-## Swing Widget
-
-[Swing](https://swing.xyz) provides cross-chain bridging and swapping across 30+ blockchains with smart routing.
-
-### Features
-
-- Cross-chain swaps across 30+ blockchains
-- Chain-agnostic smart routing
-- Support for 100+ wallets
-- Real-time transaction tracking
-- Customizable themes
-
-### Installation
-
-```bash
-npm install @swing.xyz/ui
-````
-
-### React Integration
-
-```tsx
-import { Swap } from '@swing.xyz/ui';
-import '@swing.xyz/ui/theme.css';
-
-function SwapWidget() {
-  return <Swap projectId="your-swing-project-id" debug={false} />;
-}
-```
-
-### Advanced Configuration
-
-```tsx
-import { Swap } from '@swing.xyz/ui';
-import '@swing.xyz/ui/theme.css';
-
-function SwapWidget() {
-  return (
-    <Swap
-      projectId="your-swing-project-id"
-      environment="production"
-      theme={{
-        mode: 'dark',
-        accent: '#0ea5e9'
-      }}
-    />
-  );
-}
-```
-
-<Callout type="info">For chain/token defaults and routing configuration, Swing recommends configuring your project in the Swing Platform and using its `projectId`. See [Swing “Use with React”](https://developers.swing.xyz/reference/widget/swaps/with-react).</Callout>
-
-### Web Component (Non-React)
-
-```html
-<script src="https://cdn.swing.xyz/widget/v1/swing-widget.min.js"></script>
-
-<div id="swing-widget"></div>
-
-<script>
-  SwingWidget.init({
-    target: '#swing-widget',
-    projectId: 'your-swing-project-id',
-    environment: 'production',
-    defaultFromChain: 'sei',
-    defaultToChain: 'ethereum'
-  });
-</script>
-```
-
-<Callout type="info">Get your project ID by creating a project on the [Swing Platform](https://platform.swing.xyz).</Callout>
-
-📚 [Swing Widget Documentation](https://developers.swing.xyz/reference/widget)
-
----
-
-## Thirdweb Payments
-
-[Thirdweb Payments](https://thirdweb.com/payments) provides a comprehensive payment solution including onramps, swaps, and bridging.
-
-### Features
-
-- Universal EVM chain support
-- Automatic cross-chain routing
-- Fiat onramps integrated
-- Fee-sharing for developers
-- Ready-made React components
-
-### Installation
-
-```bash
-npm install thirdweb
-```
-
-### React Integration
-
-```tsx
-import { createThirdwebClient } from 'thirdweb';
-import { PayEmbed } from 'thirdweb/react';
-import { sei } from 'thirdweb/chains';
-
-const client = createThirdwebClient({
-  clientId: 'your-thirdweb-client-id'
-});
-
-function PaymentWidget() {
-  return (
-    <PayEmbed
-      client={client}
-      payOptions={{
-        mode: 'fund_wallet',
-        prefillBuy: {
-          chain: sei,
-          amount: '0.01'
-        }
-      }}
-    />
-  );
-}
-```
-
-### Direct Swap Mode
-
-```tsx
-import { createThirdwebClient } from 'thirdweb';
-import { PayEmbed } from 'thirdweb/react';
-import { sei } from 'thirdweb/chains';
-
-const client = createThirdwebClient({
-  clientId: 'your-thirdweb-client-id'
-});
-
-function SwapWidget() {
-  return (
-    <PayEmbed
-      client={client}
-      payOptions={{
-        mode: 'direct_payment',
-        paymentInfo: {
-          chain: sei,
-          token: {
-            address: '0xe15fC38F6D8c56aF07bbCBe3BAf5708A2Bf42392', // USDC on Sei
-            name: 'USDC',
-            symbol: 'USDC'
-          },
-          amount: '100'
-        }
-      }}
-      theme="dark"
-    />
-  );
-}
-```
-
-### Transaction Mode
-
-For payments to specific contracts or transactions:
-
-```tsx
-import { createThirdwebClient } from 'thirdweb';
-import { PayEmbed } from 'thirdweb/react';
-import { sei } from 'thirdweb/chains';
-
-const client = createThirdwebClient({
-  clientId: 'your-thirdweb-client-id'
-});
-
-function NFTPurchaseWidget() {
-  return (
-    <PayEmbed
-      client={client}
-      payOptions={{
-        mode: 'transaction',
-        transaction: {
-          chain: sei,
-          to: '0xYourNFTContract',
-          data: '0x...', // Encoded function call
-          value: '1000000000000000000' // 1 SEI in wei
-        },
-        metadata: {
-          name: 'NFT Purchase',
-          image: 'https://your-nft-image.png'
-        }
-      }}
-    />
-  );
-}
-```
-
-📚 [Thirdweb Payments Documentation](https://portal.thirdweb.com/payments)
-
----
-
-## LI.FI Widget
-
-[LI.FI](https://li.fi) powers many popular applications (like Jumper.exchange) with its advanced bridge and DEX aggregation widget.
-
-### Features
-
-- Aggregates multiple bridges and DEXs
-- Highly customizable UI
-- Extensive cross-chain support
-- Wallet management included
-- SDK and Widget options
-
-### Installation
-
-```bash
-npm install @lifi/widget
-```
-
-### React Integration
-
-```tsx
-import { LiFiWidget, WidgetConfig } from '@lifi/widget';
-
-const widgetConfig: WidgetConfig = {
-  integrator: 'your-dapp-name',
-  containerStyle: {
-    border: '1px solid rgb(234, 234, 234)',
-    borderRadius: '16px'
-  },
-  fromChain: 1, // Ethereum
-  toChain: 1329 // Sei
-};
-
-export const SwapWidget = () => {
-  return <LiFiWidget config={widgetConfig} />;
-};
-```
-
-📚 [LI.FI Widget Documentation](https://docs.li.fi/widget/overview)
-
----
-
-## deBridge Widget
-
-[deBridge](https://debridge.finance) offers the DLN (deBridge Liquidity Network) for high-performance cross-chain trading.
-
-### Features
-
-- **High Speed**: Near-instant finality for many pairs
-- **Zero Slippage**: Limit orders and MEV protection
-- **Deep Liquidity**: Access to global liquidity pools
-- **Iframe Support**: Easy embedding
-
-### Integration
-
-You can configure and generate a widget via the [deBridge Widget Builder](https://app.debridge.finance/widget).
-
-```html
-<iframe src="https://app.debridge.finance/widget?v=1&inputChain=1&outputChain=1329&inputCurrency=&outputCurrency=&lang=en&mode=simple" width="100%" height="700" frameborder="0" allow="clipboard-write"></iframe>
-```
-
-📚 [deBridge Documentation](https://docs.debridge.finance)
+| Token         | Address                                                                                                                  |
+| ------------- | ------------------------------------------------------------------------------------------------------------------------ |
+| WSEI          | [`0xE30feDd158A2e3b13e9badaeABaFc5516e95e8C7`](https://seiscan.io/address/0xE30feDd158A2e3b13e9badaeABaFc5516e95e8C7)     |
+| USDC (native) | [`0xe15fC38F6D8c56aF07bbCBe3BAf5708A2Bf42392`](https://seiscan.io/address/0xe15fC38F6D8c56aF07bbCBe3BAf5708A2Bf42392)     |
+| USDT0         | [`0x9151434b16b9763660705744891fA906F660EcC5`](https://seiscan.io/address/0x9151434b16b9763660705744891fA906F660EcC5)     |
 
 ---
 
@@ -402,7 +123,12 @@ You can configure and generate a widget via the [deBridge Widget Builder](https:
 
 ### Security Considerations
 
-<Callout type="warning">**Security Checklist** - ✅ Only use widgets from reputable, audited providers - ✅ Keep widget scripts updated to latest versions - ✅ Validate that iframe sources match official domains - ✅ Implement Content Security Policy (CSP) headers - ✅ Never expose API keys in client-side code (use environment variables)</Callout>
+<Callout type="warning">
+**Security Checklist**
+
+- ✅ Validate that iframe sources match official domains
+- ✅ Implement Content Security Policy (CSP) headers
+</Callout>
 
 ### Performance Optimization
 
@@ -414,7 +140,7 @@ const SwapWidget = dynamic(() => import('./SwapWidget'), {
   loading: () => <div className="animate-pulse h-[650px] bg-gray-800 rounded-xl" />,
   ssr: false
 });
-```
+````
 
 ### Responsive Design
 
@@ -466,51 +192,6 @@ function SwapWidgetWithFallback() {
 
 ---
 
-## Comparison Matrix
-
-| Feature          | Symphony | Swing | Thirdweb | LI.FI | deBridge |
-| ---------------- | -------- | ----- | -------- | ----- | -------- |
-| **Supports Sei** | ✅       | ✅    | ✅       | ✅    | ✅       |
-| **Cross-Chain**  | ❌       | ✅    | ✅       | ✅    | ✅       |
-| **Fiat Onramp**  | ❌       | ❌    | ✅       | ❌    | ❌       |
-| **React SDK**    | ❌       | ✅    | ✅       | ✅    | ❌       |
-| **iframe**       | ✅       | ✅    | ❌       | ❌    | ✅       |
-| **Fee Sharing**  | ❓       | ✅    | ✅       | ✅    | ✅       |
-
----
-
-## Choosing the Right Widget
-
-### Use Symphony if:
-
-- You only need Sei-native token swaps
-- You want the simplest possible integration
-- Your users are already on the Sei network
-
-### Use Swing or LI.FI if:
-
-- You need deep cross-chain swaps and aggregation
-- Your users are coming from other networks
-- You want robust React components with customization
-
-### Use Thirdweb if:
-
-- You need a complete payment solution
-- You want fiat onramps + swaps in one widget
-- You're building a full-featured dApp with other Thirdweb tools
-
-### Use deBridge if:
-
-- You prefer simple iframe integrations
-- You need support for many chains
-- You want fast cross-chain execution with DLN
-
----
-
 ## Additional Resources
 
 - [Symphony Swap Widget Documentation](https://docs.symph.ag/widget/symphony-swap-widget)
-- [Swing Widget Documentation](https://developers.swing.xyz/reference/widget)
-- [Thirdweb Payments Documentation](https://portal.thirdweb.com/payments)
-- [LI.FI Widget Docs](https://docs.li.fi/widget/overview)
-- [deBridge Widget Builder](https://app.debridge.finance/widget)

From 547ec0278aa8c92b1b39c9ad043f10db99a88e2d Mon Sep 17 00:00:00 2001
From: alexander-sei <alexander@seifdn.org>
Date: Sat, 10 Jan 2026 13:24:07 +0100
Subject: [PATCH 3/3] Add demo

---
 content/evm/in-app-swaps.mdx | 46 ++++++++++++++++++++++++------------
 1 file changed, 31 insertions(+), 15 deletions(-)

diff --git a/content/evm/in-app-swaps.mdx b/content/evm/in-app-swaps.mdx
index a433601f..85d72121 100644
--- a/content/evm/in-app-swaps.mdx
+++ b/content/evm/in-app-swaps.mdx
@@ -21,7 +21,7 @@ Swap widgets are embeddable UI components that abstract the complexity of intera
 
 ## Symphony Swap Widget
 
-[Symphony](https://symph.ag) is a native DEX on Sei, offering the simplest integration via iframe embedding.
+[Symphony](https://symph.ag) is a native DEX aggregator on Sei, offering the simplest integration via iframe embedding.
 
 ### Quick Start
 
@@ -29,6 +29,12 @@ Swap widgets are embeddable UI components that abstract the complexity of intera
 <iframe src="https://symph.ag/embed"></iframe>
 ```
 
+### Live Demo
+
+<div style={{ display: 'flex', justifyContent: 'center' }}>
+  <iframe src="https://symph.ag/embed" style={{ width: '100%', maxWidth: '420px', minWidth: '377px', minHeight: '680px', border: 'none', borderRadius: '12px' }} title="Symphony Swap Widget Demo" />
+</div>
+
 ### Size Requirements
 
 - **Minimum Width**: `377px`
@@ -39,16 +45,30 @@ Swap widgets are embeddable UI components that abstract the complexity of intera
 
 Customize the widget by appending query parameters:
 
-| Parameter       | Description                   | Example                                               |
-| --------------- | ----------------------------- | ----------------------------------------------------- |
-| `tokenIn`       | Input token contract address  | `tokenIn=0xe15fC38F6D8c56aF07bbCBe3BAf5708A2Bf42392`  |
-| `tokenOut`      | Output token contract address | `tokenOut=0xE30feDd158A2e3b13e9badaeABaFc5516e95e8C7` |
-| `bgColor`       | Background color              | `bgColor=%23FFFFFF` or `bgColor=white`                |
-| `theme`         | Widget theme                  | `theme=light` or `theme=dark`                         |
-| `notifications` | Show notifications            | `notifications=true` or `notifications=false`         |
+#### Token Selection
+
+| Parameter  | Description                   | Example                                               |
+| ---------- | ----------------------------- | ----------------------------------------------------- |
+| `tokenIn`  | Input token contract address  | `tokenIn=0xe15fC38F6D8c56aF07bbCBe3BAf5708A2Bf42392`  |
+| `tokenOut` | Output token contract address | `tokenOut=0xE30feDd158A2e3b13e9badaeABaFc5516e95e8C7` |
+
+<Callout type="info">Tokens can be changed by the user after the widget loads.</Callout>
+
+#### Appearance
+
+| Parameter | Description               | Supported Formats                                                                            |
+| --------- | ------------------------- | -------------------------------------------------------------------------------------------- |
+| `bgColor` | Background color          | Hex (`%23FFFFFF`), Named (`white`), RGB (`rgb(255,255,255)`), RGBA (`rgba(255,255,255,0.9)`) |
+| `theme`   | Color theme of the widget | `light` or `dark` (defaults to `dark` if not specified)                                      |
 
 <Callout type="warning">For hex colors, use `%23` instead of `#` in the URL (e.g., `%23FFFFFF` for white).</Callout>
 
+#### Features
+
+| Parameter       | Description                  | Values                      |
+| --------------- | ---------------------------- | --------------------------- |
+| `notifications` | Show/hide notification cards | `true` (default) or `false` |
+
 ### Complete Example
 
 <Tabs items={['HTML', 'React', 'Next.js']}>
@@ -95,15 +115,11 @@ export default function SwapPage() {
   });
 
 return (
+
 <div className="max-w-md mx-auto">
-<iframe
-src={`https://symph.ag/embed?${params.toString()}`}
-className="w-full min-h-[650px] border-0 rounded-xl"
-title="Symphony Swap"
-/>
+  <iframe src={`https://symph.ag/embed?${params.toString()}`} className="w-full min-h-[650px] border-0 rounded-xl" title="Symphony Swap" />
 </div>
-);
-}
+); }
 
 ````
 </Tabs.Tab>