docs: add lofi UI flow sketches for the 5 frontend apps#102
Merged
Conversation
26 Excalidraw flows (one per primary user flow) covering provider-console, council-console, network-dashboard, moonlight-pay, and browser-wallet. Generated from a read of each frontend's current source — first-cut for design review and stakeholder communication. Refine in place as the apps evolve. - sketches/<app>/<flow>.excalidraw — one file per flow. - sketches/all-sketches-combined.excalidraw — single canvas with all 26 flows arranged for review-at-a-glance. - sketches/scripts/regen-combined.py — regenerates the combined view from the per-flow files; re-run after editing any flow. - sketches/README.md — what these are, viewing/editing, conventions.
AquiGorka
added a commit
that referenced
this pull request
May 29, 2026
…t, browser-wallet provider-connect steps (#105) ## Summary Reworks the 26 lofi UI flow sketches from `#102` per PM design review. Each screen now sits inside a browser-window or extension-popup container so the wireframes read as actual rendered pages. ## Changes by category - **Browser-window chrome (4 web SPAs — provider-console, council-console, network-dashboard, moonlight-pay):** every screen wrapped in a chrome rectangle (light-gray border, semi-transparent) with traffic-light dots + an address bar showing the URL the screen renders. Containers larger than the inner page with visible inner padding; navbar pinned flush against the URL bar at the top. - **Extension-popup chrome (browser-wallet, 6 flows):** every screen wrapped in a rounded popup-shaped container with a small extension-toolbar icon at top-right; navbar pinned flush at the top. - **URLs in address bars (4 web apps):** derived directly from each app's router config — - provider-console: `#/login`, `#/home`, `#/setup/metadata`, `#/setup/fund`, `#/setup/join`, `#/recover`, `#/provider/:pk` - council-console: `#/login`, `#/`, `#/council`, `#/create-council/{metadata,fund,create,assets,invite}`, `#/recover-council`, `#/join` - network-dashboard: single root URL (no router) — every flow-state shares it, drilldowns annotated via state captions - moonlight-pay: `#/login`, `#/`, `#/admin`, `#/onboarding/{account,treasury}`, `#/pay/:merchant?amount=…&description=…` - Modal-overlay screens keep the underlying route's URL (modals don't change the URL). - **Browser-wallet provider-connect screens added:** 4 flows × 4 new screens = 16 new screens. The 4 flows that previously jumped straight from home to form now show the connect sequence first: - `send-private-transfer.excalidraw` — home (no privacy provider) → channel-picker (open) → sign-request (provider auth) → home (provider connected) → send - `receive-private-address.excalidraw` — same sequence before receive - `deposit-and-activate.excalidraw` — same sequence inserted between ramp and the deposit form - `withdraw-to-public.excalidraw` — same sequence before withdraw - **Combined canvas regenerated:** `sketches/all-sketches-combined.excalidraw` rebuilt via `python3 sketches/scripts/regen-combined.py`. The regen script picks up the wider chrome boxes mechanically; no script change required. - **README updated:** status block reflects the rework. ## URL host derivation Host strings use the testnet variants `*-testnet.moonlightprotocol.io` (provider-testnet, council-testnet, dashboard-testnet, pay-testnet) per PM Phase 0 confirmation. The original first-cut's per-screen labels (e.g. `/login`, `/setup/metadata`) carried over unchanged as the URL paths. ## Test plan - [ ] Open each per-flow `.excalidraw` and confirm the chrome wraps the screen with the URL string in the address bar - [ ] Verify the 4 browser-wallet privacy flows show the provider-connect sequence before the form - [ ] Open `all-sketches-combined.excalidraw` and confirm all 5 app rows render
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
1 participant
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Summary
Adds 26 Excalidraw lofi user-flow wireframes covering the 5 frontend apps (
provider-console,council-console,network-dashboard,moonlight-pay,browser-wallet), plus a combined-canvas view and regen script for the combined view.sketches/<app>/<flow>.excalidraw— one file per primary user flow (5 + 5 + 5 + 5 + 6 = 26).sketches/all-sketches-combined.excalidraw— single canvas, 5 app rows × up to 6 flows per row, generated from the per-flow files.sketches/scripts/regen-combined.py— regenerates the combined view; re-run after editing any flow.sketches/README.md— what these are, status (first-cut), viewing/editing, conventions, regeneration.Status
First-cut — generated 2026-05-28 from a read of each frontend's current source (routes, views, navigation). Intended as a starting point for design review and partner/marketing communication. Refine in place as the apps evolve; the user-flow understanding is more durable than the literal box positions.
Test plan
python3 sketches/scripts/regen-combined.pyregeneratesall-sketches-combined.excalidrawwithout error..excalidrawopens in excalidraw.com.