Skip to content

feat(frontend): add a welcome guide for connecting with Wallet Gateway - #229

Merged
gabitoesmiapodo merged 1 commit into
mainfrom
feat/222-connect-guide
Sep 24, 2026
Merged

gabitoesmiapodo merged 1 commit into
mainfrom
feat/222-connect-guide

Conversation

@gabitoesmiapodo

@gabitoesmiapodo gabitoesmiapodo commented Sep 23, 2026 •

Copy link
Copy Markdown
Collaborator

Summary

Closes #222

New visitors to the demo do not know which wallet to use or how to sign in. A short guide shows them the way.

Changes

  • A three-step welcome dialog opens on the first visit
  • Each step has a screenshot with the control to use highlighted
  • Closing the dialog is remembered, so it does not open again on its own
  • A ? button before the connect button opens it again at any time
  • The client secret unsafe can be copied with one click
  • The last step links to the Wallet Gateway set by VITE_WALLET_GATEWAY_URL

Notes

  • Covers only Wallet Gateway, the one wallet every demo visitor has available.

Acceptance criteria

  • First-time visitors see a popup explaining how to connect a wallet
  • Once closed, it only opens again from the ? button

Test plan

Automated tests

  1. Run pnpm install
  2. Run pnpm -C dapp/frontend test
  3. Expect all tests to pass

Manual verification

  1. Check out this branch and start the stack with ./scripts/dev-stack.sh up
  2. Open http://localhost:3012 in a private window
  3. Expect the Welcome dialog; step through it with Next and Back
  4. Close it and reload; expect it to stay closed
  5. Click ? in the header; expect the dialog again at step 1

Breaking changes

None.

Checklist

  • Self-reviewed my own diff
  • Tests added or updated
  • Docs updated (if applicable)
  • No unrelated changes bundled in

Screenshots

Screen.Recording.2026-09-23.at.17.42.20.mov

First-time visitors see a three-step dialog that shows how to connect
the demo through Wallet Gateway: pick it in the wallet picker, sign in
with the `unsafe` client secret, then change the primary party.

- `TopBar/ConnectGuide.tsx` renders the `?` button before the connect
  button and the dialog, built on `Modal` and Ark's steps.
- The dialog opens once on first load. Closing it saves
  `vesting.connectGuideSeen` in `localStorage`; the `?` button opens it
  again.
- The gateway link uses `WALLET_GATEWAY_UI_URL`, the origin of
  `VITE_WALLET_GATEWAY_URL`, so deployments link to their own gateway.
- `StepBar` moves to `components/` now that `CreateGrant` and the guide
  both use it.
- `ThemeToggle` exports `roundButtonClass` so both header buttons share
  one look.

Closes #222
@gabitoesmiapodo gabitoesmiapodo self-assigned this Sep 23, 2026
@vercel

vercel Bot commented Sep 23, 2026 •

Copy link
Copy Markdown

The latest updates on your projects. Learn more about Vercel for GitHub.

Project Deployment Actions Updated
components.canton-dappbooster Ready Ready Preview Sep 23, 2026 8:48pm UTC
demo.canton-dappbooster Ready Ready Preview Sep 23, 2026 8:48pm UTC

Request Review

@fernandomg fernandomg left a comment

Copy link
Copy Markdown
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

👨‍🏫

@gabitoesmiapodo
gabitoesmiapodo merged commit 1f2d2b7 into main Sep 24, 2026
17 checks passed
@gabitoesmiapodo
gabitoesmiapodo deleted the feat/222-connect-guide branch September 24, 2026 16:34

This branch was successfully deployed

2 active deployments
Preview – demo.canton-dappbooster — 20f1d563 Deployed Sep 23, 2026 by vercel[bot]
Preview – components.canton-dappbooster — 20f1d563 Deployed Sep 23, 2026 by vercel[bot]
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

Status: Done

Development

Successfully merging this pull request may close these issues.

Add welcome popup explaining which wallets can be used

2 participants