Widget playground
Configure it. Try a trade. Make it yours.
Try the widget with funded demo balances. Every control updates this preview.
Bring this widget into your app
Your settings are already in the snippet below. Use it in a React 18 or 19 app, then connect your wallet provider.
1. Install the package
npm install aegis-swap-widget viem2. Add your component
Swap.tsxUpdates with your settings
// Install: pnpm add aegis-swap-widget (or npm i aegis-swap-widget)
import * as React from 'react'
import { AegisSwapWidget } from 'aegis-swap-widget'
import 'aegis-swap-widget/styles.css'
export function Swap() {
const [executionDetailsOpen, setExecutionDetailsOpen] = React.useState(false)
return (
<AegisSwapWidget
chainId={130}
theme="auto"
accentColor="#31d48a"
executionDetailsOpen={executionDetailsOpen}
onExecutionDetailsOpenChange={setExecutionDetailsOpen}
/>
)
}3. Connect your app
Connect your wallet provider and add callbacks for transaction updates. Demo balances and simulated trades stay in the playground.
Read the integration docs ↗Follow a transaction
Readable summaries from the widget’s callbacks. Check the sequence, inspect an error, or see when a quote changes.
Live · latest 50 events0 shown
Your next action starts the story
Return to the stage and enter a swap amount. Try the demo wallet to follow approvals and confirmation too.