stackpay-frontend 🪨

React + Vite dApp for StackPay — create & share payment requests, pay with a Stellar wallet, and track status in real time.

The user-facing app for StackPay. It talks to the deployed Soroban contract (stackpay-contracts) and the stackpay-backend API.

---

Table of contents

• Features
• Tech stack
• Getting started
• Configuration
• Project structure
• Wallet connect
• Pages & flows
• Styling
• Testing
• Production build
• Contributing
• License

---

Features

• 🔐 Stellar wallet login (Freighter, Albedo) — non-custodial.
• ➕ Create a request — payee (you), asset, amount, memo; get a shareable link.
• 🔗 Request page — anyone with the link can pay from their wallet.
• 📊 Live status — Open / Paid / Cancelled with real-time updates.
• 🧾 Payment proof — on-chain Paid status = receipt.
• 🌐 Testnet / Mainnet toggle.

Tech stack

React 18 + TypeScript · Vite · Tailwind CSS · @stellar/stellar-sdk + @stellar/freighter-api · TanStack Query · Socket.IO client · React Router · Zod.

Getting started

git clone https://github.com/Stack-Rocks/stackpay-frontend.git
cd stackpay-frontend
cp .env.example .env
npm install
npm run dev

Open http://localhost:5173.

Configuration

See .env.example:

Variable	Description
VITE_API_URL	Backend API base.
VITE_RPC_URL	Soroban RPC endpoint.
VITE_NETWORK	testnet | mainnet.
VITE_CONTRACT_PAYMENT	PaymentRequest contract id.

Project structure

src/
+-- main.tsx            # entry
+-- App.tsx             # router + providers
+-- lib/stellar.ts      # wallet connect + tx helpers
+-- lib/api.ts          # backend REST client
+-- hooks/useWallet.ts  # wallet state
+-- hooks/useRequests.ts# queries + live updates
+-- components/         # Navbar, RequestCard, CreateForm, PayButton
+-- pages/              # Dashboard, Create, Request

Wallet connect

import { connectFreighter } from "./lib/stellar";
const pubkey = await connectFreighter(); // prompts Freighter

Pages & flows

1. Dashboard — your requests (as payee) + received totals.
2. Create — form to make a request; shows the shareable link.
3. Request — public page: pay button + live status.

Styling

Tailwind with a custom theme (tailwind.config.js) using Stack-Rocks' slate/amber palette. Responsive + accessible.

Testing

npm run test       # vitest + RTL
npm run test:e2e   # playwright (wallet mocked)

Production build

npm run build && npm run preview

Deploy dist/ to any static host (Vercel, Netlify, GitHub Pages, IPFS).

Contributing

Part of the Stellar Wave Program on Drips. Look for Stellar Wave / Good first issue. Run npm run lint && npm run build && npm run test before a PR.

License

MIT.