Configuration Reference

All settings are passed via the clientOptions object when calling QuickTradeWidget.createWidget({ … }).

Option	Type	Default	Description
`env`	`'testnet' \| 'mainnet'`	`'testnet'`	Backend environment & RPC selection
`defaultChainId`	`number`	`84532`	Chain the widget should connect to initially
`defaultCurrency`	`string`	`'GHS'`	Fiat currency code for pricing
`defaultToken`	`string`	`'USDC'`	ERC-20 symbol to trade against
`walletClient`	`WalletClient` (optional)	`undefined`	Inject a pre-connected viem WalletClient

Widget-specific props:

Prop	Type	Default	Description
`themeMode`	`'light' \| 'dark'`	`'light'`	Force theme; respects system if omitted
`style`	`React.CSSProperties`	`{}`	Custom styles for the outer container
`variant`	`'modal' \| 'embedded'`	`'modal'`	Rendering mode. Embedded requires a container.
`containerNodeOrSelector`	`HTMLElement \| string`	—	Only for `variant: 'embedded'` – target container

⚠️ Changing clientOptions after instantiation is not reactive. Destroy and recreate the widget to apply new values.

Example

const widget = QuickTradeWidget.createWidget({
  clientOptions: {
    env: "testnet",
    defaultChainId: 534353,
    defaultCurrency: "USD",
    defaultToken: "USDT",
  },
  themeMode: "dark",
  variant: "embedded",
  containerNodeOrSelector: "#iexchange-widget-container",
});