Velora Widget React embed prompt

Prompt an AI agent to embed the Velora Widget into a React app, sync its light/dark theme with the host, and wire up partner attribution and events.

Outcome

A React component that mounts the Velora Widget. Its light/dark theme follows the host app, partnerConfig.partner attributes swaps to the host, and lifecycle events feed the host’s analytics.

The widget is a drop-in React component; there is no iframe build. You can switch between bundled light and dark themes (or follow system preference). See Customize.

Prompt

Claude Code

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.

End-state check

• Toggling the host app between light and dark flips the widget’s theme to match.
• A successful test swap fires the host’s analytics events (Swap:confirmed) with the expected payload.
• The partner identifier is present at runtime but not hardcoded in the source tree.