feat: add first-time onboarding tour for Stellar flow#45
Conversation
- Install driver.js (6.4 KB gzipped, < 10 KB constraint) - Add i18n keys in src/i18n/en.json under onboardingTour.* - Implement useStellarTour hook with 5-step driver.js tour - Add data-tour attributes to wallet button, recipient input, amount input, and send button - Auto-start tour on /send when wraith.tourCompleted is unset - Add footer 'Take the tour' button to force-restart tour - Respect prefers-reduced-motion (disables animations) - No spotlight overlay (overlayOpacity: 0) — users can click freely - Add Playwright E2E tests covering happy path, dismissal persistence, no auto-fire on reload, and footer restart Closes wraith-protocol#17
|
@Dami24-hub is attempting to deploy a commit to the truthixify's projects Team on Vercel. A member of the Team first needs to authorize it. |
|
@Dami24-hub Great news! 🎉 Based on an automated assessment of this PR, the linked Wave issue(s) no longer count against your application limits. You can now already apply to more issues while waiting for a review of this PR. Keep up the great work! 🚀 |
|
Closing as duplicate. Issue #17 is being handled in #39 which was opened first (waiting on a rebase). If #39's content doesn't end up covering everything you have here (i18n strings, specific tour steps, custom mock approach), feel free to open a small follow-up PR after #39 lands. Otherwise, open Stellar Wave issues: https://github.com/wraith-protocol/demo/issues?q=is%3Aopen+label%3A%22Stellar+Wave%22 Thanks @Dami24-hub. |
This PR implements Issue #17: First-time user onboarding tour for Stellar flow. It introduces a lightweight, interactive, and fully accessible onboarding wizard to guide new users through the Stellar stealth payment flow, reducing immediate bounce rates and clarifying the platform's core UX mechanics.
A new Git branch
feature/stellar-onboarding-tourwas created and pushed to remote upstream prior to development.Problem Context
First-time visitors landing on the demo are often overwhelmed by the specialized stealth-address terminology, the wallet connection mechanics, and the overall UI. Without a clear step-by-step introduction, users struggle to build a proper mental model of how private Stellar payments function, leading to drop-offs.
Proposed Changes
Tour Implementation & Architecture
driver.jsdue to its ultra-lightweight footprint (<10 KB gzipped) and stellar accessibility compliance.localStorage.wraith.tourCompleted. The tour automatically triggers for new users on the home/send page and sets this flag totrueupon completion or manual dismissal, preventing annoying auto-relaunches.The 5-Step Guided Flow
All copy has been externalized to
src/i18n/en.jsonto preserve future localization capabilities:.wraithdomain name.Accessibility & UX Guardrails
Escto instantly dismiss).prefers-reduced-motionmedia query to disable animations gracefully for users with motion sensitivities.Technical Checklist
localStoragefully functional.src/i18n/en.json.Types of Changes
Testing & Verification
Automated Tests
tests/onboarding.spec.tscovering:Skipbutton and theEsckey.localStoragecorrectly persists and blocks auto-firing upon page reload.Manual Verification Checklist
Closes #17