[NF-42] [FRONTEND] Onboarding Walkthrough

[wumibals]

Overview

The existing (once GF-17 merges) /learn page is static reference material a user has to seek out. This issue adds an interactive, step-by-step walkthrough shown at the moment it's actually useful — a first-time user's first deposit attempt.

Problem

There's no guided first-run experience anywhere in the app. A brand-new user landing on /deposit sees the same interface as a returning depositor, with no contextual explanation of what a share multiplier is, what happens at lock expiry, or what early exit costs, right at the point those concepts matter most.

Proposed Solution

• A dismissible, multi-step overlay/tooltip sequence (e.g. using a lightweight library like react-joyride or a small custom implementation) that triggers automatically on a wallet's first-ever visit to /deposit (tracked via localStorage, not requiring any backend).
• Steps walk through: tier selection and what the multiplier means, the amount step's projected-yield display, the confirmation step's fee/lock-expiry summary, explained inline rather than requiring a trip to /learn.
• A "Skip tour" option and a way to manually replay it later (e.g. a "Show me again" link, perhaps from /learn or a help icon in the nav).

Acceptance Criteria

• Walkthrough triggers automatically only on a wallet's first visit to /deposit, not on every visit
• Each step correctly highlights and explains the relevant part of the actual deposit UI (not a generic modal disconnected from the real page)
• "Skip tour" permanently dismisses it for that wallet
• Walkthrough can be manually replayed via a discoverable entry point
• Does not block or interfere with actually completing a deposit if the user starts interacting with the real form mid-tour

[elcabasa]

Hello, I would love to take on this issue to build the step-by-step onboarding walkthrough for first-time depositors.My Plan:Targeted Onboarding: Build an interactive overlay sequence that automatically triggers only on a wallet's first visit to /deposit by tracking exposure flags natively in localStorage.Contextual UI Steps: Wire up step highlights that pin directly onto live UI landmarks (tier multipliers, projected yields, and lock-expiry summaries) to keep instructions context-aware.Dismissal & Retention: Add a prominent "Skip tour" option to permanently silence the onboarding flow for that wallet session, alongside a reusable help-icon trigger for manual replays.Non-Blocking Control: Architect the tour overlay safely so that it never blocks, freezes, or intercepts underlying form interactions if a user chooses to submit a deposit mid-tour.I am highly experienced with building interactive UI walkthroughs and managing localized onboarding states. Please assign this issue to me! Best regards,

[shobhamerabacha-star]

Hello @maintainers,

I would like to resolve this issue. Here is my proposed execution plan:

• Implementation: Build [NF-42] [FRONTEND] Onboarding Walkthrough with clean React/Next.js components, responsive styling, and proper loading/error boundaries.
• Testing & Verification: Add component unit tests and ensure zero TypeScript/ESLint warnings.
• Delivery: Ready to ship a thoroughly tested PR within 12–24 hours with passing CI.

I am ready to start immediately—please assign this to me!