Build Lightning payment UX in Workshop #8

New Issue

hermes · 2026-03-18T22:01:01Z

hermes commented

2026-03-18 22:01:01 +00:00

Context

When a visitor wants to talk to Timmy, they need to pay via Lightning. The payment
flow should be seamless and integrated into the 3D experience.

Requirements

Session Mode (Primary UX — Mode 2)

Visitor clicks "Enter the Workshop" or similar CTA
UI shows session creation: deposit amount selector (100-10000 sats)
Lightning invoice QR code displayed (overlaid on 3D scene)
WebSocket listens for payment confirmation
On payment: QR dissolves, session activates, chat opens
Balance displayed as HUD element
Low balance warning + top-up flow

Per-Job Mode (Fallback — Mode 1)

User submits question
Eval invoice (10 sats) displayed
After payment: eval runs, work invoice displayed
After payment: result streams in

QR Code

Generate client-side (qrcode.js or similar)
Also show BOLT11 string (copy-to-clipboard)
"Open in wallet" deep link for mobile

Acceptance Criteria

Session creation flow works end-to-end with stub mode
QR code renders correctly and is scannable
BOLT11 copy-to-clipboard works
WebSocket receives payment confirmation
Balance HUD updates in real-time
Top-up flow works
Graceful handling of expired invoices

References

Parent epic: #{epic_num}

## Context When a visitor wants to talk to Timmy, they need to pay via Lightning. The payment flow should be seamless and integrated into the 3D experience. ## Requirements ### Session Mode (Primary UX — Mode 2) 1. Visitor clicks "Enter the Workshop" or similar CTA 2. UI shows session creation: deposit amount selector (100-10000 sats) 3. Lightning invoice QR code displayed (overlaid on 3D scene) 4. WebSocket listens for payment confirmation 5. On payment: QR dissolves, session activates, chat opens 6. Balance displayed as HUD element 7. Low balance warning + top-up flow ### Per-Job Mode (Fallback — Mode 1) 1. User submits question 2. Eval invoice (10 sats) displayed 3. After payment: eval runs, work invoice displayed 4. After payment: result streams in ### QR Code - Generate client-side (qrcode.js or similar) - Also show BOLT11 string (copy-to-clipboard) - "Open in wallet" deep link for mobile ## Acceptance Criteria - [ ] Session creation flow works end-to-end with stub mode - [ ] QR code renders correctly and is scannable - [ ] BOLT11 copy-to-clipboard works - [ ] WebSocket receives payment confirmation - [ ] Balance HUD updates in real-time - [ ] Top-up flow works - [ ] Graceful handling of expired invoices ## References - Parent epic: #{epic_num}

hermes added the frontend integration labels 2026-03-18 22:01:01 +00:00

replit referenced this issue from a commit

2026-03-18 23:06:08 +00:00

feat: add push-to-gitea.sh bore tunnel push helper (#8)

replit referenced this issue from a commit

2026-03-18 23:44:10 +00:00

feat: add push-to-gitea.sh bore tunnel push helper (#8)

replit commented

2026-03-19 19:34:09 +00:00

✅ Resolved — Lightning payment UX built (payment.js panel, session panel)

✅ **Resolved** — Lightning payment UX built (payment.js panel, session panel)

replit closed this issue