Introducing WheelX Widget : The Most Developer-Friendly Bridge & Swap
March 15, 2026
Background
DeFi trading interfaces like bridges and swaps are essential for modern Web3 products, but building them from scratch involves complex challenges: handling cross-chain routing, token approvals, wallet connections, UI/UX polish, security audits, and ongoing maintenance. Aggregators like WheelX.fi solve much of this by providing intelligent routing across chains.
The WheelX Widget takes this further by packaging those capabilities into a ready-to-embed, highly customizable React component.
Released on March 11, 2026, it targets Next.js developers who want branded, native-feeling trading flows without reinventing the wheel. Key highlights from the launch announcement include one-click integration, full theme control, and attractive commission rebates for referrers.The widget is built on RainbowKit for wallet connectivity and emphasizes ease of use while offering deep customization.
WheelX Widget
At its core, the widget provides a complete Bridge & Swap UI in one embeddable component:
- Supports cross-chain bridging and same-chain swaps.
- Includes flows for depositing into prediction markets (highlighted in the launch post).
- Built-in wallet connection via RainbowKit.
- Restrict networks, pre-select tokens, or limit available options.
- Two main modes: “bridge-and-swap” (default, full cross-chain) or “swap” (same-chain only).
- Powered by WheelX.fi’s aggregator for optimal routing and pricing.
The live demo at https://widget.wheelx.fi/ shows a clean interface with “From” and “To” sections (e.g., USDT → USDC on Base), amount inputs, a prominent “Connect Wallet” button, and subtle “Powered by WheelX.fi” branding. An audit reference is also linked to transparency.
Requirements
The widget is optimized for modern Next.js projects:
- Next.js 15+
- React 19+
- Use in client components (requires ‘use client’ directive)
- Dependencies: @wheelx/widget + @rainbow-me/rainbowkit
No additional heavy setup is needed beyond standard wallet configuration (RainbowKit handles most of it).
Quick Start
Getting the widget running takes just a few steps.
- Install the packages:
pnpm add @wheelx/widget @rainbow-me/rainbowkit
# or npm/yarn equivalent
2. Import RainbowKit styles once in your root layout or page (e.g., app/layout.tsx or a global CSS import):
import '@rainbow-me/rainbowkit/styles.css';
3. Embed the widget in a client component/page:
'use client'
import {
WheelxBridgeSwapWidget,
WheelxWidgetProvider
} from '@wheelx/widget'
export default function TradingPage() {
return (
)
}
That’s it! The full Bridge & Swap interface appears, complete with wallet connect.
Customization
Customization is one of the widget’s strongest features. Pass a config object to .Key config properties include:
- mode: ‘bridge-and-swap’ or ‘swap’
- referralCode: Your affiliate code for commissions
- networks: Limit from/to chains (e.g., { from: [8453], to: [8453] } for Base-only)
- defaultTokens: Pre-select tokens (e.g., USDT on Base → USDC on Base)
- allowedTokens: Restrict to specific tokens per chain
- styles: Deep overrides for nearly every UI element (nested object)
Example basic config:
const config = {
referralCode: 'your-referral-code',
networks: { from: [8453], to: [8453] },
styles: {
formContainer: { backgroundColor: '#0f172a' },
primaryButton: {
background: 'linear-gradient(135deg, #38bdf8 0%, #7c3aed 100%)'
}
}
}
// Then:
For the best experience, use the Theme Playground at https://widget.wheelx.fi/theme. It offers a side-by-side editor + live preview with presets (aurora, ember, slate, etc.). Adjust colors, gradients, fonts (e.g., Geist), buttons, modals, inputs, tooltips, and more. When satisfied, click “Copy” to get a ready-to-paste WheelxWidgetConfig object.
Referral Commission & Monetization
WheelX offers an affiliate program with commission rebates up to 20%+ on bridged/swapped volume generated through your embedded widget.To participate:
- Visit https://affiliate.wheelx.fi/
- Connect your wallet and generate a referral code/link
- Add the referralCode to your widget config
This creates a win-win: users get seamless trading, you earn passive commissions from facilitated volume, and WheelX grows through branded integrations.
Or you can learn more here :
https://medium.com/@wheelx.fi/wheelx-affiliate-program-earn-up-to-20-commission-48126e6d8e79
Use Cases
The widget shines in various Web3 products:
- Wallet or mini-app landing pages — Add instant trading without leaving your app.
- DeFi dashboards — Let users bridge/swap assets directly in their portfolio view.
- Prediction market platforms — Streamline deposits into markets.
- Partner/affiliate sites — White-label branded trading UI with your referral code for revenue share.
- Beginner-friendly interfaces — Restrict to one chain (e.g., Base) and stablecoins for simplicity.
Example: A Solana-focused dashboard could restrict to same-chain swaps only, while a multichain wallet uses full bridge-and-swap mode.
Looking Ahead
With the widget freshly live (March 2026), expect rapid iteration from the WheelX team: potential expansions to more frameworks, deeper prediction market flows, additional chain support, or advanced analytics for affiliates.For developers: this is an excellent time to integrate — claim your referral code, experiment in the playground, and embed a polished trading experience fast.
About WheelX
WheelX is a cross-chain infrastructure platform designed to simplify on-chain interactions across multiple networks. From bridging and swapping to smart contract deployment and real-world asset access, WheelX empowers users to explore global financial opportunities in a seamless and efficient way.
🌐 Dapp: https://wheelx.fi/
💬 Discord: https://discord.gg/GaqW8QEVTF
📱 Telegram : https://t.me/WheelX_official
▶️ Youtube : https://www.youtube.com/@wheelxfi
📘 Docs: https://docs.wheelx.fi/
✅ Audit Report: http://bit.ly/3K5xwEA
