Configure

Restrict chains, pick trade modes, choose a theme, and hide UI elements via the config prop.

The widget accepts a config prop of type WidgetConfig. Every field is optional; omit a field to fall back to its default.

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

<Widget
  config={{
    theme: "dark",
    enableDelta: true,
    enableCrossChain: true,
    srcChains: [1, 137],
    tradeModes: ["swap", "limit"],
  }}
/>;

Memoize non-primitive config values. Arrays and objects passed inline (like srcChains: [1, 137]) get a new reference on every render and force the widget to re-render its state. Move them to useMemo or to a module-level constant.

Configuration options

Field	Type	Default	Purpose
theme	"light" | "dark"	system preference	Color theme. See Customize.
enableDelta	boolean	true	Enable Delta intents (gasless, MEV-protected).
enableCrossChain	boolean	true	Enable crosschain swaps.
srcChains	SupportedChainId[]	all supported	Restrict source-chain picker.
destChains	SupportedChainId[]	all supported	Restrict destination-chain picker.
tradeModes	TradeMode[]	all four modes	Limit which forms appear ("swap" | "limit" | "otc" | "twap").
tokenLists	string[]	curated defaults	Token-list URLs to populate token pickers.
excludeUI	WidgetElements[]	[]	Hide UI chunks ("wallet-management" | "activities" | "snackbars").
enableDegenMode	boolean	true	Allow users to bypass high-price-impact warnings.
widgetMode	"standalone" | "dapp"	"standalone"	Who owns the wallet connection. See Wallet management.
debug	boolean	false	Verbose console logging.
partnerConfig	PartnerConfig	—	Partner fee/revenue config. See Monetize.
referrerConfig	ReferrerConfig	—	Referrer revenue config. See Monetize.
privyAppId	string	—	Optional. Adds Privy to the connector list in standalone mode. See Wallet management.
privyClientId	string	—	Optional. Only effective when privyAppId is set.

Each field is detailed below.

---

Chains and routes

srcChains, destChains

Restrict the chain dropdowns to a subset. Useful when your integration only services specific networks.

import { useMemo } from "react";
import { Widget, defaults } from "@velora-dex/widget";

function MyWidget() {
  const config = useMemo(
    () => ({
      srcChains: [1, 137],                       // Ethereum + Polygon
      destChains: defaults.chainIds.filter((id) => id !== 1), // everywhere but Ethereum
    }),
    []
  );
  return <Widget config={config} />;
}

How chain selection behaves:

• An empty array or one containing only invalid chain IDs falls back to all default chains.
• Invalid IDs in an otherwise valid list are dropped (with console.warn).
• Not all source chains can bridge to all destination chains; unsupported pairs are filtered out at runtime.
• Same-chain swaps (source == destination) are always allowed for any chain in srcChains.

enableCrossChain

<Widget config={{ enableCrossChain: false }} />

Disables the crosschain swap path entirely: users can only swap within a single chain.

enableDelta

<Widget config={{ enableDelta: false }} />

When false, hides Delta-mode swaps and Delta-only trade modes (limit, TWAP). The widget falls back to Market-API swaps only.

---

Trade modes

tradeModes

const tradeModes = ["swap", "limit"];

<Widget config={{ tradeModes }} />;

Restricts which trading forms are visible. Accepts any subset of "swap" | "limit" | "otc" | "twap".

Similar fallback rules apply here:

• An empty array or one with only invalid modes falls back to all default modes.
• If the currently selected mode becomes disabled, the widget switches to the first enabled mode.
• limit and twap are Delta-only. If enableDelta: false (or the user disables Delta in Settings) and your tradeModes list contains only Delta-only modes, the widget falls back to swap.

---

Theme

theme

<Widget config={{ theme: "dark" }} />   // forced dark
<Widget config={{ theme: "light" }} />  // forced light
<Widget />                              // follows system preference

See Customize for CSS scoping details.

---

Hiding UI

excludeUI

Hide specific UI chunks when your host app provides its own equivalents.

Key	Hides
"wallet-management"	The wallet button in the header
"activities"	The activity / transaction history panel
"snackbars"	In-widget toast notifications

const excludeUI = ["wallet-management", "snackbars"];

<Widget config={{ excludeUI }} />;

---

Token lists

tokenLists

Add custom token-list URLs. The widget merges them with curated defaults if you spread them.

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

const tokenLists = [
  ...defaults.tokenLists,
  "https://example.com/my-tokens.json",
];

<Widget config={{ tokenLists }} />;

If you replace defaults entirely (omit the spread), users will only see your tokens.

---

Behavior flags

enableDegenMode

<Widget config={{ enableDegenMode: false }} />

When true (default), users can toggle Degen Mode in Trading Parameters to trade tokens with high price impact or missing USD price data. When false, the toggle is hidden and users can’t bypass price-impact warnings.

debug

<Widget config={{ debug: true }} />

Logs extra diagnostic info to the console. Don’t ship enabled to production.

---

Pre-filling the form

Use the input prop (not config) to pre-select tokens, amounts, and form type, for example to support deep links into a specific trade.

<Widget
  input={{
    selectedForm: "swap",
    tokenFromAddress: "0xA0b86991c6218b36c1d19D4a2e9Eb0cE3606eB48", // USDC
    srcChainId: 1,
    sendAmount: "100",
  }}
/>

Related pages

• Customize — theme details and CSS scoping.
• Wallet management — widgetMode, provider, optional privyAppId.
• Monetize — partnerConfig and referrerConfig.
• Widget API reference — full type definitions.