In-App Swaps - Symphony 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.

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 is a native DEX aggregator on Sei, offering the simplest integration via iframe embedding.

Quick Start

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

Live Demo

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`

Tokens can be changed by the user 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 (e.g., %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

✅ Validate that iframe sources match official domains
✅ Implement 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