> ## Documentation Index
> Fetch the complete documentation index at: https://docs.sei.io/llms.txt
> Use this file to discover all available pages before exploring further.

# In-App Swaps - Symphony Integration Guide

> Guide to integrating the Symphony swap widget into your Sei application for seamless token exchanges.

Integrating in-app swap functionality into your Sei application enables users to exchange tokens directly within your platform, enhancing user experience and engagement.

## 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

## Symphony Swap Widget

[Symphony](https://symph.ag) is a native DEX aggregator on Sei, offering the simplest integration via iframe embedding.

### Quick Start

```html theme={"dark"}
<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`
* **Minimum Height**: `650px` (recommended to prevent wallet modal scrolling)
* **Optimal Height**: `680-685px`

### URL Parameters

Customize the widget by appending query parameters:

#### Token Selection

| Parameter  | Description                   | Example                                               |
| ---------- | ----------------------------- | ----------------------------------------------------- |
| `tokenIn`  | Input token contract address  | `tokenIn=0xe15fC38F6D8c56aF07bbCBe3BAf5708A2Bf42392`  |
| `tokenOut` | Output token contract address | `tokenOut=0xE30feDd158A2e3b13e9badaeABaFc5516e95e8C7` |

<Info>Tokens can be changed by the user after the widget loads.</Info>

#### 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)                                      |

<Warning>For hex colors, use `%23` instead of `#` in the URL (e.g., `%23FFFFFF` for white).</Warning>

#### Features

| Parameter       | Description                  | Values                      |
| --------------- | ---------------------------- | --------------------------- |
| `notifications` | Show/hide notification cards | `true` (default) or `false` |

### Complete Example

<Tabs>
  <Tab title="HTML">
    ```html theme={"dark"}
    <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>
    ```
  </Tab>

  <Tab title="React">
    ```jsx theme={"dark"}
    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"
        />
      );
    }
    ```
  </Tab>

  <Tab title="Next.js">
    ```tsx theme={"dark"}
    '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" title="Symphony Swap" />
    </div>
    ); }

    ```
  </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) |

***

## Best Practices

### Security Considerations

<Warning>
  **Security Checklist**

  * ✅ Validate that iframe sources match official domains
  * ✅ Implement Content Security Policy (CSP) headers
</Warning>

### Performance Optimization

```tsx theme={"dark"}
// 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 " />,
  ssr: false
});
```

### Responsive Design

```css theme={"dark"}
/* 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 theme={"dark"}
import { useState } from 'react';

function SwapWidgetWithFallback() {
  const [error, setError] = useState(false);

  if (error) {
    return (
      <div className="p-6 bg-sei-maroon-200/20  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" />;
}
```

***

## Additional Resources

* [Symphony Swap Widget Documentation](https://docs.symph.ag/widget/symphony-swap-widget)