React (Vite)

End-to-end widget integration for a Vite + React app: full file tree, install, and mount.

A minimal Vite + React app that mounts the Velora Widget. Copy each file and run pnpm dev (or npm run dev).

File tree

my-app/
├─ index.html
├─ package.json
├─ vite.config.ts
└─ src/
   ├─ main.tsx
   └─ App.tsx

Install

pnpm

pnpm create vite@latest my-app -- --template react-ts
cd my-app
pnpm add @velora-dex/widget @tanstack/react-query

src/App.tsx

import { useMemo } from "react";
import { Widget } from "@velora-dex/widget";

export default function App() {
  const config = useMemo(
    () => ({
      theme: "light" as const,
      partnerConfig: { partner: "my-app-name" },
    }),
    []
  );

  return (
    <div style={{ display: "flex", justifyContent: "center", padding: "2rem" }}>
      <Widget config={config} />
    </div>
  );
}

src/main.tsx

import { StrictMode } from "react";
import { createRoot } from "react-dom/client";
import App from "./App";

createRoot(document.getElementById("root")!).render(
  <StrictMode>
    <App />
  </StrictMode>
);

Run it

pnpm dev

Open the printed http://localhost:5173 URL. You should see the widget render with the Connect Wallet button and a swap form.

Next: wire in events and a partner identifier

import { Widget } from "@velora-dex/widget";

<Widget
  config={{
    theme: "light",
    partnerConfig: {
      partner: import.meta.env.VITE_VELORA_PARTNER,
      partnerFeeBps: 25,
    },
  }}
  events={{
    onSwap: ({ event }) => {
      if (event.name === "Swap:confirmed") {
        console.log("Swap confirmed", event.params.txHash);
      }
    },
  }}
/>;

Add the partner identifier to .env:

VITE_VELORA_PARTNER=my-app-name

Related pages

• Install — package install and the basic setup.
• Configure — restrict chains, modes, hide UI.
• Monetize — partner fees and referrer.
• Events & callbacks — every event you can subscribe to.