Customer-facing Web3 checkout for FreClean: connect a wallet, pay with a supported Celo stablecoin through CeloHT, and track the payment from request through verified confirmation.
Part of the FreClean ecosystem. Talks to freclean-api's /api/payments and /api/assets endpoints.
In development. Wallet connection currently supports an injected provider only (see Known limitations). No mock transactions are shown as real — if freclean-api has no enabled asset in its Supported Assets Registry, checkout correctly shows "No Celo asset is enabled for payment yet" rather than a fake option.
| Page | Route | Purpose |
|---|---|---|
| Home | / |
Explains the flow, primary connect CTA |
| Checkout | /checkout |
Amount + asset selection, creates a payment request |
| Transaction status | /status/:id |
Polls and displays the payment lifecycle: requested → pending → detected → verified → confirmed (or failed/expired/refunded) |
| History | /history |
Payments made from the connected wallet |
| Learn | /learn |
"What is Celo?", "What is a stablecoin?", "How do I pay?", "How do I use Valora?", "How is my payment verified?" |
React 18 + TypeScript + Vite, Tailwind CSS, React Router. No wallet SDK dependency yet — see src/lib/wallet.tsx for the injected-provider abstraction and what a real WalletConnect/Valora integration would replace.
npm install
cp .env.example .env # set VITE_API_URL
npm run dev # http://localhost:5174npm run lint
npm run typecheck
npm run build- Auth mismatch:
freclean-api's/api/paymentsand/api/assetscurrently require a staff-authenticated token. This dApp is customer-facing and doesn't have one, so checkout and history calls will fail against a real API instance today. Next step: add a public, rate-limited/public/checkoutsurface tofreclean-payment/freclean-apithat this dApp calls instead. - Wallet connection only detects an injected provider (desktop extension or a wallet's in-app browser). Scanning a QR from a separate phone (the most common Valora flow) needs a WalletConnect v2 session — not yet implemented.
- No transaction submission is triggered by this dApp — it only creates a payment request record and displays status. The actual on-chain transfer happens in the user's wallet; detecting it on Celo is
freclean-payment's job.
No private keys or seed phrases are ever requested, stored, or logged. See SECURITY.md.
Not provided.