Widget overview

Embed the Velora swap widget in your React app with @velora-dex/widget. Multi-chain swaps, limit orders, OTC, and TWAP in a single drop-in component.

The Velora Widget is a React component that gives your users a complete trading interface (swaps, limit orders, OTC, and TWAP) across every chain Velora supports. Drop <Widget /> into your app and you have a working DEX inside your product.

Try it live

Open the widget playground

Configure chains, tokens, theme, and partner fees in a live preview. Opens in a new tab.

What you get

Multi-chain swaps

Same-chain and crosschain across Ethereum, Polygon, BNB, Avalanche, Arbitrum, Optimism, Base, Gnosis, and Unichain.

Limit, OTC, and TWAP orders

Powered by Delta. Gasless and MEV-protected.

Wallet integration

Built-in wagmi connectors out of the box, or bring your own EIP-1193 provider.

Partner fees

Take a fee or a surplus share on every trade. See Monetize.

Theming

Light and dark themes with automatic system-preference detection. CSS scoped under .velora-widget to avoid leaking.

Type safety

Full TypeScript types for config, events, and form state.

Quick example

import { Widget } from "@velora-dex/widget";

export default function App() {
  return (
    <Widget
      config={{
        theme: "light",
        partnerConfig: { partner: "my-app-name" },
      }}
    />
  );
}

How it works

The widget is a single React component shipped as @velora-dex/widget:

• Quotes come from the same Delta API and Market API you’d hit from the SDK; there’s no separate widget backend.
• Wallet uses either the widget’s built-in wagmi connectors (default, widgetMode: "standalone") or an EIP-1193 provider you pass (widgetMode: "dapp").
• Styles are auto-injected on import and scoped under .velora-widget so they don’t leak into your app.
• State is owned by the widget, but every important transition fires through the events prop so you can sync analytics or your own UI.

Pick your starting point

Install

Add @velora-dex/widget and render the component.

Configure

Restrict chains, pick trade modes, hide UI elements.

Wallet management

Built-in connectors vs bring-your-own EIP-1193 provider.

Monetize

Take a fee or surplus share on every swap.

Events & callbacks

Hook into every lifecycle event for analytics and host-app sync.

React example

A minimal Vite + React integration.