Skip to content

docs: rework UI flow sketches — browser chrome, URLs, extension layout, browser-wallet provider-connect steps#105

Merged
AquiGorka merged 1 commit into
mainfrom
docs/rework-ui-flow-sketches
May 29, 2026
Merged

docs: rework UI flow sketches — browser chrome, URLs, extension layout, browser-wallet provider-connect steps#105
AquiGorka merged 1 commit into
mainfrom
docs/rework-ui-flow-sketches

Conversation

@AquiGorka
Copy link
Copy Markdown
Contributor

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

…t, browser-wallet provider-connect steps

- wrap every web SPA screen in browser-window chrome (traffic-light dots + URL bar)
- wrap every browser-wallet screen in extension-popup chrome
- show the actual route in each URL bar, derived from each app's router
  (provider-console, council-console, network-dashboard, moonlight-pay)
- pin each page navbar flush at the top of its browser/extension container
- insert the provider-connect screen sequence (home → channel-picker →
  sign-request → home connected) into the 4 browser-wallet privacy flows:
  send-private-transfer, receive-private-address, deposit-and-activate,
  withdraw-to-public
- regenerate sketches/all-sketches-combined.excalidraw via
  sketches/scripts/regen-combined.py
- update sketches/README.md status block to reflect the rework
@AquiGorka AquiGorka merged commit 0ca9d61 into main May 29, 2026
7 checks passed
@AquiGorka AquiGorka deleted the docs/rework-ui-flow-sketches branch May 29, 2026 20:07
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

1 participant