Integrate the DEX Widget: Fast, Customizable, and Secure DeFi Trading Solution

Decentralized exchanges (DEXs) are transforming how users trade digital assets, offering greater control, transparency, and security. One of the most powerful tools developers can use to embed seamless trading experiences into their platforms is the DEX Widget — a lightweight, customizable interface that enables instant swap and cross-chain bridge functionality.

With just 30 minutes of integration time, you can launch a fully functional trading interface powered by deep liquidity and multi-chain support. This guide walks you through setting up the @okxweb3/dex-widget, customizing its parameters, handling wallet connections, and optimizing user experience — all while maintaining full control over design and functionality.

Whether you're building a Web3 dashboard, DeFi aggregator, or NFT marketplace, embedding a DEX widget enhances user retention by keeping transactions in-app.

👉 Discover how easy it is to integrate powerful trading tools today.

Getting Started with the DEX Widget

The DEX Widget is designed for developers using modern JavaScript frameworks like React. To get started:

1. Install the package:

   npm install @okxweb3/dex-widget

2. Import and render the component:

   import { DEXWidget } from '@okxweb3/dex-widget';
   
   function App() {
     return <DEXWidget width={450} theme="light" lang="en_us" />;
   }

For hands-on examples, explore the React CRA demo on GitHub. You can also view a live demo at https://okx.github.io/dex-widget/.

This lightweight integration supports both swap and bridge modes, automatically adapting based on user needs.

Wallet Provider Integration

To enable wallet connectivity within your app, pass the provider object directly to the widget. This allows users to trade without leaving your platform.

EVM Chains (Ethereum, BNB Chain, etc.)

Providers must comply with EIP-1193 standards to ensure compatibility across networks like Ethereum, Arbitrum, and Polygon.

Solana Support

For Solana-based applications, inject the wallet provider from your app context. The widget will recognize SOLANA as the providerType.

Example implementation using RainbowKit or similar libraries:

const provider = window.ethereum; // or solana object
<DEXWidget provider={provider} providerType="EVM" />

You can also listen for the ON_CONNECT_WALLET event to trigger your app’s connection flow when users click "Connect Wallet" inside the widget.

👉 Enable seamless wallet integration in your dApp now.

Configuration Parameters

Customize the widget behavior using these key parameters:

Multilingual Support

Reach global users with built-in language options:

• en_us: English (default)
• zh_cn: Simplified Chinese
• zh_tw: Traditional Chinese
• fr_fr: French (Africa)
• id_id: Indonesian
• ru_ru: Russian
• tr_tr: Turkish
• vi_vn: Vietnamese
• de_de: German
• it_it: Italian
• pl_pl: Polish
• pt_pt: Portuguese (Portugal)
• es_es: Spanish (Spain)
• pt_br: Portuguese (Brazil)
• es_419: Spanish (Latin America)
• Additional support for Czech, Romanian, Ukrainian, Arabic, Dutch

Set the desired language via the lang parameter to match your audience.

Supported Chain IDs

The DEX Widget supports major EVM and non-EVM chains:

Use chainIds to restrict available networks or pre-select default chains.

Default Token Pair Configuration

Control initial trading pairs for better UX alignment:

• Swap default: Ethereum → USDC (ETH to USDC)
• Bridge default: Ethereum → BNB Chain (ETH to BNB)

Define your own using:

interface ITokenPair {
  fromChain: string;   // e.g., "1" for Ethereum
  fromToken: string;   // Contract address or native token ID
  toChain: string;     // Target chain ID
  toToken: string;     // Target token address
}

This ensures users land on relevant markets instantly.

Custom Fee Configuration

Earn revenue by adding a referral fee to trades executed through your embedded widget.

Enable this with the feeConfig parameter:

{
  chainId: "1",
  feePercent: 50, // 0.5% = 50 BPS
  referrerAddress: "0xYourWalletAddress"
}

Understanding BPS

Fees are measured in basis points (BPS):

• 1 BPS = 0.01%
• Max allowed: 300 BPS (3%)

On Solana:

• SOL fees go to a wallet address.
• SPL token fees require a token account.

Ensure the referrerAddress exists on the target network.

Dynamic Updates & Lifecycle Methods

updateParams

Change visual settings dynamically:

• theme
• lang
• width

Useful for theme toggles or responsive layouts.

updateProvider

Switch between EVM and Solana providers at runtime. Required if switching chains or reconnecting wallets.

Include walletName to identify Phantom, MetaMask, etc., for analytics.

updateListeners

Add or modify event listeners after initialization:

widget.updateListeners({
  [OkxEvents.ON_FROM_CHAIN_CHANGE]: (payload) => {
    console.log("Chain changed:", payload.chainId);
  }
});

Supported events:

• ON_CONNECT_WALLET: Trigger external wallet connection.
• ON_FROM_CHAIN_CHANGE: React to source chain changes.
• ON_SUBMIT_TX: Receive transaction hash post-trade (v1.3.16+).

destroy

Always call destroy() before unmounting to remove event listeners and prevent memory leaks or duplicate transaction requests.

Event Listening Guide

Capture real-time actions inside the widget:

• ON_CONNECT_WALLET: User clicks “Connect Wallet” — respond by launching your app's modal.
• ON_FROM_CHAIN_CHANGE: Source chain changes — update UI or fetch new data.
• ON_SUBMIT_TX: Transaction confirmed — log hash, show success toast, track conversions.

These events allow deep integration between your app logic and the widget’s internal state.

👉 Start tracking user actions and boost engagement today.

Frequently Asked Questions (FAQ)

Q: How long does integration take?
A: Most developers complete setup in under 30 minutes using the npm package and React example.

Q: Can I customize the look and feel?
A: Yes! Adjust width, theme (light/dark), and language. Full branding alignment is possible within iframe constraints.

Q: Which blockchains are supported?
A: Major EVM chains (Ethereum, BNB Chain, Arbitrum, etc.) and Solana. More added regularly.

Q: Can I earn fees from trades?
A: Absolutely. Use feeConfig to set referral fees up to 3%, paid in the traded token.

Q: Is Solana fully supported?
A: Yes. Pass the Solana provider object and set providerType="SOLANA" for full functionality.

Q: Do I need backend infrastructure?
A: No. The widget runs client-side and connects directly to decentralized liquidity sources.

Core Keywords:

DEX Widget, DeFi trading, swap and bridge, cross-chain trading, referral fee integration, multichain support, wallet integration, customizable trading interface