Skip to content

Commit ad3bf94

Browse files
author
Stack-Rocks
committed
Initial commit: StackPay stackpay-frontend scaffold
0 parents  commit ad3bf94

17 files changed

Lines changed: 305 additions & 0 deletions

‎.env.example‎

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,4 @@
1+
VITE_API_URL=http://localhost:4000
2+
VITE_RPC_URL=https://soroban-testnet.stellar.org
3+
VITE_NETWORK=testnet
4+
VITE_CONTRACT_PAYMENT=

‎.github/workflows/ci.yml‎

Lines changed: 16 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,16 @@
1+
name: CI
2+
on:
3+
push:
4+
branches: [main]
5+
pull_request:
6+
jobs:
7+
build:
8+
runs-on: ubuntu-latest
9+
steps:
10+
- uses: actions/checkout@v4
11+
- uses: actions/setup-node@v4
12+
with: { node-version: 20 }
13+
- run: npm ci
14+
- run: npm run lint
15+
- run: npm run build
16+
- run: npm run test

‎LICENSE‎

Lines changed: 21 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,21 @@
1+
MIT License
2+
3+
Copyright (c) 2026 Stack-Rocks
4+
5+
Permission is hereby granted, free of charge, to any person obtaining a copy
6+
of this software and associated documentation files (the "Software"), to deal
7+
in the Software without restriction, including without limitation the rights
8+
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
9+
copies of the Software, and to permit persons to whom the Software is
10+
furnished to do so, subject to the following conditions:
11+
12+
The above copyright notice and this permission notice shall be included in all
13+
copies or substantial portions of the Software.
14+
15+
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
16+
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
17+
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
18+
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
19+
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
20+
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
21+
SOFTWARE.

‎README.md‎

Lines changed: 105 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,105 @@
1+
# stackpay-frontend 🪨
2+
3+
> React + Vite dApp for **StackPay** — create & share payment requests, pay with a Stellar wallet, and track status in real time.
4+
5+
[![CI](https://github.com/Stack-Rocks/stackpay-frontend/actions/workflows/ci.yml/badge.svg)](https://github.com/Stack-Rocks/stackpay-frontend/actions)
6+
![React](https://img.shields.io/badge/framework-React-61DAFB)
7+
![Vite](https://img.shields.io/badge/build-Vite-646CFF)
8+
![Tailwind](https://img.shields.io/badge/styling-Tailwind-38B2AC)
9+
![License: MIT](https://img.shields.io/badge/license-MIT-green)
10+
11+
The user-facing app for StackPay. It talks to the deployed Soroban contract ([`stackpay-contracts`](https://github.com/Stack-Rocks/stackpay-contracts)) and the [`stackpay-backend`](https://github.com/Stack-Rocks/stackpay-backend) API.
12+
13+
---
14+
15+
## Table of contents
16+
- [Features](#features)
17+
- [Tech stack](#tech-stack)
18+
- [Getting started](#getting-started)
19+
- [Configuration](#configuration)
20+
- [Project structure](#project-structure)
21+
- [Wallet connect](#wallet-connect)
22+
- [Pages & flows](#pages--flows)
23+
- [Styling](#styling)
24+
- [Testing](#testing)
25+
- [Production build](#production-build)
26+
- [Contributing](#contributing)
27+
- [License](#license)
28+
29+
---
30+
31+
## Features
32+
- 🔐 **Stellar wallet login** (Freighter, Albedo) — non-custodial.
33+
- ➕ **Create a request** — payee (you), asset, amount, memo; get a shareable link.
34+
- 🔗 **Request page** — anyone with the link can pay from their wallet.
35+
- 📊 **Live status** — Open / Paid / Cancelled with real-time updates.
36+
- 🧾 **Payment proof** — on-chain `Paid` status = receipt.
37+
- 🌐 **Testnet / Mainnet** toggle.
38+
39+
## Tech stack
40+
React 18 + TypeScript · Vite · Tailwind CSS · `@stellar/stellar-sdk` + `@stellar/freighter-api` · TanStack Query · Socket.IO client · React Router · Zod.
41+
42+
## Getting started
43+
```bash
44+
git clone https://github.com/Stack-Rocks/stackpay-frontend.git
45+
cd stackpay-frontend
46+
cp .env.example .env
47+
npm install
48+
npm run dev
49+
```
50+
Open `http://localhost:5173`.
51+
52+
## Configuration
53+
See [`.env.example`](./.env.example):
54+
55+
| Variable | Description |
56+
| --- | --- |
57+
| `VITE_API_URL` | Backend API base. |
58+
| `VITE_RPC_URL` | Soroban RPC endpoint. |
59+
| `VITE_NETWORK` | `testnet` \| `mainnet`. |
60+
| `VITE_CONTRACT_PAYMENT` | PaymentRequest contract id. |
61+
62+
## Project structure
63+
```
64+
src/
65+
+-- main.tsx # entry
66+
+-- App.tsx # router + providers
67+
+-- lib/stellar.ts # wallet connect + tx helpers
68+
+-- lib/api.ts # backend REST client
69+
+-- hooks/useWallet.ts # wallet state
70+
+-- hooks/useRequests.ts# queries + live updates
71+
+-- components/ # Navbar, RequestCard, CreateForm, PayButton
72+
+-- pages/ # Dashboard, Create, Request
73+
```
74+
75+
## Wallet connect
76+
```ts
77+
import { connectFreighter } from "./lib/stellar";
78+
const pubkey = await connectFreighter(); // prompts Freighter
79+
```
80+
81+
## Pages & flows
82+
1. **Dashboard** — your requests (as payee) + received totals.
83+
2. **Create** — form to make a request; shows the shareable link.
84+
3. **Request** — public page: pay button + live status.
85+
86+
## Styling
87+
Tailwind with a custom theme (`tailwind.config.js`) using Stack-Rocks' slate/amber palette. Responsive + accessible.
88+
89+
## Testing
90+
```bash
91+
npm run test # vitest + RTL
92+
npm run test:e2e # playwright (wallet mocked)
93+
```
94+
95+
## Production build
96+
```bash
97+
npm run build && npm run preview
98+
```
99+
Deploy `dist/` to any static host (Vercel, Netlify, GitHub Pages, IPFS).
100+
101+
## Contributing
102+
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.
103+
104+
## License
105+
[MIT](./LICENSE).

‎index.html‎

Lines changed: 12 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,12 @@
1+
<!doctype html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="UTF-8" />
5+
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
6+
<title>StackPay — request payments on Stellar</title>
7+
</head>
8+
<body>
9+
<div id="root"></div>
10+
<script type="module" src="/src/main.tsx"></script>
11+
</body>
12+
</html>

‎package.json‎

Lines changed: 34 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,34 @@
1+
{
2+
"name": "stackpay-frontend",
3+
"version": "0.1.0",
4+
"private": true,
5+
"license": "MIT",
6+
"type": "module",
7+
"scripts": {
8+
"dev": "vite",
9+
"build": "tsc && vite build",
10+
"preview": "vite preview",
11+
"lint": "eslint . --ext .ts,.tsx",
12+
"test": "vitest run"
13+
},
14+
"dependencies": {
15+
"@stellar/stellar-sdk": "^12.0.0",
16+
"@tanstack/react-query": "^5.51.0",
17+
"react": "^18.3.1",
18+
"react-dom": "^18.3.1",
19+
"react-router-dom": "^6.25.0",
20+
"socket.io-client": "^4.7.5",
21+
"zod": "^3.23.8"
22+
},
23+
"devDependencies": {
24+
"@types/react": "^18.3.3",
25+
"@types/react-dom": "^18.3.0",
26+
"@vitejs/plugin-react": "^4.3.1",
27+
"autoprefixer": "^10.4.19",
28+
"postcss": "^8.4.39",
29+
"tailwindcss": "^3.4.6",
30+
"typescript": "^5.5.0",
31+
"vite": "^5.3.0",
32+
"vitest": "^2.0.0"
33+
}
34+
}

‎postcss.config.js‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1 @@
1+
export default { plugins: { tailwindcss: {}, autoprefixer: {} } };

‎src/App.tsx‎

Lines changed: 20 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,20 @@
1+
import { Routes, Route } from "react-router-dom";
2+
import Navbar from "./components/Navbar";
3+
import Dashboard from "./pages/Dashboard";
4+
import Create from "./pages/Create";
5+
import RequestPage from "./pages/Request";
6+
7+
export default function App() {
8+
return (
9+
<div className="min-h-screen bg-rock-900 text-white">
10+
<Navbar />
11+
<main className="max-w-5xl mx-auto p-6">
12+
<Routes>
13+
<Route path="/" element={<Dashboard />} />
14+
<Route path="/create" element={<Create />} />
15+
<Route path="/request/:id" element={<RequestPage />} />
16+
</Routes>
17+
</main>
18+
</div>
19+
);
20+
}

‎src/components/Navbar.tsx‎

Lines changed: 12 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,12 @@
1+
import { Link } from "react-router-dom";
2+
export default function Navbar() {
3+
return (
4+
<nav className="flex items-center justify-between px-6 py-4 border-b border-rock-700">
5+
<Link to="/" className="text-xl font-bold text-amber-glow">🪨 StackPay</Link>
6+
<div className="space-x-4">
7+
<Link to="/" className="hover:text-amber-ember">Dashboard</Link>
8+
<Link to="/create" className="hover:text-amber-ember">Create</Link>
9+
</div>
10+
</nav>
11+
);
12+
}

‎src/lib/stellar.ts‎

Lines changed: 9 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,9 @@
1+
import { FreighterWallet, Wallet } from "@stellar/stellar-sdk";
2+
const wallet: Wallet = new FreighterWallet();
3+
export async function connectWallet(): Promise<string> {
4+
if (!(await wallet.isConnected())) throw new Error("Freighter not available");
5+
return (await wallet.getUserInfo()).address;
6+
}
7+
export async function signAndSend(txXdr: string): Promise<string> {
8+
return wallet.signTransaction(txXdr);
9+
}

0 commit comments

Comments
 (0)