Velora Widget React example

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 create vite@latest my-app -- --template react-ts
cd my-app
pnpm add @velora-dex/widget @tanstack/react-query

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

yarn create vite my-app --template react-ts
cd my-app
yarn 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

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.

​File tree

​Install

​src/App.tsx

​src/main.tsx

​Run it

​Next: wire in events and a partner identifier

​Related pages