You are integrating the Velora Widget into an existing React 18+ app.
Requirements:
- Install `@velora-dex/widget` and `@tanstack/react-query` (peer dependency).
- Mount the widget at the `/swap` route via React Router or Next.js routing.
- Pass `config.partnerConfig.partner` (a `partner` identifier from env, e.g. `my-app-name`).
- Theme: the widget only supports `theme: "light" | "dark"` (omit to follow the
OS `prefers-color-scheme`). Drive the `theme` config field from the host app's
current light/dark mode so the two stay in sync. Do NOT attempt to pass brand
colors, fonts, or border-radius; there is no API for that.
- Memoize any non-primitive `config` value (objects/arrays) with `useMemo` or a
module-level constant, or the widget will re-render.
- Subscribe to widget events via the `events` prop and pipe them into the host's
analytics module. Use `onSwap` and branch on `event.name`:
`Swap:request` (start), `Swap:confirmed` (success), `Swap:failed` (error).
Reference these docs and follow them exactly:
- https://velora.xyz/docs/widget/install
- https://velora.xyz/docs/widget/configure
- https://velora.xyz/docs/widget/customize
- https://velora.xyz/docs/widget/events-and-callbacks
- https://velora.xyz/docs/widget/monetize
Load the `partner` identifier from env so different builds (staging, production,
white-label) can use different values.
