In-App Swaps - Symphony Integration Guide

In-app swaps let users exchange tokens directly in your Sei dApp.

Overview

Swap widgets are embeddable UI components that hide the complexity of interacting with decentralized exchanges (DEXs) and liquidity aggregators. They have these benefits:

Users can swap tokens without leaving your dApp.
You do not need to redirect users to external DEX interfaces.
Many providers offer fee-sharing mechanisms, which can give you revenue.
Some widgets let users bridge assets from other chains.

Symphony is a native DEX aggregator on Sei. It offers the simplest integration: an embedded iframe.

Quick start

<iframe src="https://symph.ag/embed"></iframe>

Live demo

Size requirements

Minimum width: 377px
Minimum height: 650px (recommended to prevent scrolling in the wallet modal)
Optimal height: 680-685px

URL parameters

To customize the widget, append query parameters to the URL:

Token selection

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

Users can change the tokens after the widget loads.

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)

For hex colors, use %23 instead of # in the URL. For example, use %23FFFFFF for white.

Features

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

Complete example

HTML
React
Next.js

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

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"
    />
  );
}

'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>
); }

Popular Sei token addresses (Mainnet)

Token	Address
WSEI	`0xE30feDd158A2e3b13e9badaeABaFc5516e95e8C7`
USDC (native)	`0xe15fC38F6D8c56aF07bbCBe3BAf5708A2Bf42392`
USDT0	`0x9151434b16b9763660705744891fA906F660EcC5`

Best practices

Security considerations

Security checklist

Check that iframe sources match the official domains.
Add Content Security Policy (CSP) headers.

Performance optimization

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

/* 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

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

Overview

Essentials

seid CLI

Frontend Development

Smart Contracts

sei-js Library

Videos

Ecosystem Tutorials

Reference

Hardware Wallets

In-App Swaps - Symphony Integration Guide

Overview

Symphony swap widget

Quick start

Live demo

Size requirements

URL parameters

Token selection

Appearance

Features

Complete example

Popular Sei token addresses (Mainnet)

Best practices

Security considerations

Performance optimization

Responsive design

Error handling

Additional resources

​Overview

​Symphony swap widget

​Quick start

​Live demo

​Size requirements

​URL parameters

​Token selection

​Appearance

​Features

​Complete example

​Popular Sei token addresses (Mainnet)

​Best practices

​Security considerations

​Performance optimization

​Responsive design

​Error handling

​Additional resources

Overview

Symphony swap widget

Quick start

Live demo

Size requirements

URL parameters

Token selection

Appearance

Features

Complete example

Popular Sei token addresses (Mainnet)

Best practices

Security considerations

Performance optimization

Responsive design

Error handling

Additional resources