Rewards Widget

Embed the Pye Widget on your validator website so users can forward-sell future staking rewards. Supports React (Vite), Next.js, and plain HTML via CDN.

---

Integrating the Rewards Widget

The Rewards Widget lets stakers delegated to your validator sell their future rewards for SOL, directly from your site. You keep the delegation. They get paid up front. This guide covers the three supported integration paths: React, Next.js, and a plain HTML/CDN drop-in.

Prerequisites

You'll need four values before you start:

Value	What it is
Vote Account	Your validator's vote account address
An RPC endpoint	The public Solana endpoint works for development but recommend a dedicated endpoint for production
Supabase URL	Request access
Supabase Anon Key	Request access

Finding your vote account address

Your vote account is the on-chain address that receives staking rewards. It's not your identity account or withdraw authority. Using the wrong one will cause the widget to show no stake positions.

Where you can find it:

• stakewhiz — search your validator name; the vote account appears on your profile page.

• Solana Explorer — search by validator name or identity key.

• Solana CLI — solana validators | grep <your-name>

Configuration

Two things to configure before you drop the widget in: which mode it runs in, and which theme it uses.

Mode. Single-validator mode filters stake positions to only those delegated to your vote account. That's what you want on your own site. Universal mode shows positions across all supported validators. Use it by omitting the vote account.

Mode	What it shows	How to configure
Single-validator	Only stake accounts delegated to your validator	Pass voteAccount
Universal	All Pye-compatible stake accounts for the connected wallet	Omit voteAccount

Theme. The widget ships with pye-dark. Pass it as the theme prop (React and Next.js) or the data-theme attribute (CDN).

Value	Appearance
pye-light	Light background, purple accent
pye-dark	Dark background, purple accent
graphite	Dark background, neutral grey accent

Installation

React (Vite)

1. Install packages

bash

npm install @pye/sdk @pye/widget \
  react react-dom \
  @solana/web3.js @solana/spl-token \
  @solana/wallet-adapter-react @solana/wallet-adapter-react-ui \
  @solana/kit @cks-systems/manifest-sdk \
  @supabase/supabase-js \
  buffer stream-browserify assert

Or with pnpm:

bash

pnpm add @pye/sdk @pye/widget \
  react react-dom \
  @solana/web3.js @solana/spl-token \
  @solana/wallet-adapter-react @solana/wallet-adapter-react-ui \
  @solana/kit @cks-systems/manifest-sdk \
  @supabase/supabase-js \
  buffer stream-browserify assert

Note — buffer, stream-browserify, and assert are runtime polyfills required by Solana packages in a browser Vite build.

2. Configure Vite

Update vite.config.ts to polyfill the Node.js globals that Solana packages depend on:

typescript

import { defineConfig } from "vite";
import react from "@vitejs/plugin-react";

export default defineConfig({
  plugins: [react()],
  define: {
    "process.env": {},
    "process.version": JSON.stringify("v18.0.0"),
    "process.browser": true,
  },
  resolve: {
    alias: {
      stream: "stream-browserify",
      assert: "assert",
    },
  },
});

3. Add the Buffer polyfill

Warning — These two lines must be the very first lines of your app entry file (e.g. src/main.tsx), before any other imports. If they run after Solana packages load, the polyfill won't take effect.

import { Buffer } from "buffer";
(window as any).Buffer = Buffer;

// ...rest of your imports

4. Set environment variables

Create .env.local:

bash

VITE_RPC_URL=https://mainnet.helius-rpc.com/?api-key=YOUR_KEY
VITE_SUPABASE_URL=https://YOUR_PROJECT.supabase.co
VITE_SUPABASE_ANON_KEY=YOUR_ANON_KEY
VITE_VOTE_ACCOUNT=YOUR_VOTE_ACCOUNT

5. Render the widget

import { useState } from "react";
import { PyeWidget } from "@pye/widget";
import type { WidgetTheme } from "@pye/widget";

export default function App() {
  const [open, setOpen] = useState(false);

  return (
    <>
      <button onClick={() => setOpen(true)}>Get paid now</button>

      {open && (
        <div
          style={{
            position: "fixed", inset: 0,
            display: "flex", alignItems: "center", justifyContent: "center",
            background: "rgba(0,0,0,0.5)", backdropFilter: "blur(8px)",
            zIndex: 9999,
          }}
          onClick={(e) => { if (e.target === e.currentTarget) setOpen(false); }}
        >
          <PyeWidget
            rpcUrl={import.meta.env.VITE_RPC_URL}
            supabaseUrl={import.meta.env.VITE_SUPABASE_URL}
            supabaseAnonKey={import.meta.env.VITE_SUPABASE_ANON_KEY}
            voteAccount={import.meta.env.VITE_VOTE_ACCOUNT}
            theme="pye-dark"
            onClose={() => setOpen(false)}
          />
        </div>
      )}
    </>
  );
}

Universal mode — Omit the voteAccount prop and the VITE_VOTE_ACCOUNT env variable.

Next.js (App Router)

HTML/CDN

RPC endpoint

Important — The public endpoint (https://api.mainnet-beta.solana.com) works for development but has rate limits that will cause wallet and balance fetches to fail under normal production usage. Use a dedicated provider in production.

Recommended providers:

• Helius — https://mainnet.helius-rpc.com/?api-key=YOUR_KEY

• Triton

• QuickNode