⚡Quick Start

This page walks through the minimum setup required to embed the WheelX Widget inside a Next.js app.

✅ Requirements

Before installing, make sure your host app matches the current package requirements:

Item	Required Version
Node.js	>= 20
pnpm	>= 10
Next.js	>= 15
React	19.x
React DOM	19.x

📥 Install

pnpm add @wheelx/widget @rainbow-me/rainbowkit

If your app does not already include RainbowKit styles, import them once in your app entry:

import '@rainbow-me/rainbowkit/styles.css'

🧱 Minimal Integration

'use client'

import {
  WheelxBridgeSwapWidget,
  WheelxWidgetProvider
} from '@wheelx/widget'

export default function Page() {
  return (
    <WheelxWidgetProvider>
      <WheelxBridgeSwapWidget />
    </WheelxWidgetProvider>
  )
}

This is the fastest way to get a working widget on screen.

⚙️ Add Config

Once the base widget is mounted, pass a config object to control mode, defaults, supported assets, or theme:

'use client'

import {
  WheelxBridgeSwapWidget,
  WheelxWidgetProvider,
  type WheelxWidgetConfig
} from '@wheelx/widget'

const widgetConfig: WheelxWidgetConfig = {
  mode: 'bridge-and-swap',
  referralCode: 'your-affiliate-code'
}

export default function Page() {
  return (
    <WheelxWidgetProvider>
      <WheelxBridgeSwapWidget config={widgetConfig} />
    </WheelxWidgetProvider>
  )
}

🛠️ Next Step

After the minimal integration works, continue with:

• chain restriction

• token restriction

• theme customization

• referral setup

Those are covered in the next pages.