Speedstake

Embed Speedstake on your website in minutes

---

Integrating Speedstake

For the first time ever, stakers can sell their future rewards for SOL via Pye. Speedstake lets active stakers delegated to your validator lockup stake for different time durations and sell their future rewards directly from your site. This guide covers the different integration paths available.

Prerequisites

You'll need four values before you start:

Value	What it is
Vote Account	Your validator's vote account address
RPC endpoint	https://api.mainnet-beta.solana.com
Supabase URL	https://tfrickmnrfyjkvjhmuik.supabase.co
Supabase Anon Key	eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpc3MiOiJzdXBhYmFzZSIsInJlZiI6InRmcmlja21ucmZ5amt2amhtdWlrIiwicm9sZSI6ImFub24iLCJpYXQiOjE3NDM0NDkyMDksImV4cCI6MjA1OTAyNTIwOX0.1wl2FWa5g0tkUn6yRcg1AyF6ixWN7SyoD89cFGxkQKM

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 Speedstake 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

You can configure what mode Speedstake runs in as well as its style theme.

Single-validator mode filters stake positions to only those delegated to your vote account. Universal mode shows positions across all supported validators, enable it by omitting the vote account prop.

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

The style defaults to pye-dark. Pass one of the following theme props (React and Next.js) or set 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 --legacy-peer-deps @pyefi/sdk @pyefi/widget \
  react react-dom \
  @solana/web3.js @solana/spl-token \
  @solana/wallet-adapter-react @solana/wallet-adapter-base @solana/wallet-adapter-wallets \
  @solana/kit@^2 @cks-systems/manifest-sdk \
  @supabase/supabase-js \
  buffer stream-browserify assert

Or with pnpm:

bash

pnpm add @pyefi/sdk @pyefi/widget \
  react react-dom \
  @solana/web3.js @solana/spl-token \
  @solana/wallet-adapter-react @solana/wallet-adapter-base @solana/wallet-adapter-wallets \
  @solana/kit@^2 @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. Configure TypeScript

If you don't already have a tsconfig.json, create one. Make sure it includes "vite/client" in types — this gives TypeScript the import.meta.env definitions that Vite injects at build time:

{
  "compilerOptions": {
    "target": "ES2020",
    "lib": ["ES2020", "DOM", "DOM.Iterable"],
    "module": "ESNext",
    "moduleResolution": "bundler",
    "jsx": "react-jsx",
    "strict": true,
    "skipLibCheck": true,
    "types": ["vite/client"]
  },
  "include": ["src"]
}

If you already have a tsconfig.json, add "types": ["vite/client"] to compilerOptions.

4. 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

5. 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

6. Render the Speedstake widget

import { useState } from "react";
import { PyeWidget } from "@pyefi/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>
      )}
    </>
  );
}

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

• Triton

• QuickNode