Skip to content

Add welcome modal for first-time users (resolves #13)#265

Open
OutstandingRetard wants to merge 3 commits into
capofficial:mainfrom
OutstandingRetard:welcome-modal-bounty-13
Open

Add welcome modal for first-time users (resolves #13)#265
OutstandingRetard wants to merge 3 commits into
capofficial:mainfrom
OutstandingRetard:welcome-modal-bounty-13

Conversation

@OutstandingRetard

Copy link
Copy Markdown

Closes #13

What

Adds a one-time welcome modal that appears the first time a user opens the dashboard. It explains the four main features of CAP v4 (perpetuals, pools, bridge, staking) and links directly to the bridge/Deposit modal.

The modal is gated by a localStorage flag so returning users don't see it. Users can dismiss it with Got it or Don't show again.

Files

  • src/components/modals/Welcome.svelte (new) — the modal component. Reuses the existing Modal.svelte and theme variables. No new dependencies.
  • src/lib/utils.js — adds localStorageStore(key, defaultValue) helper, a tiny SSR-safe Svelte writable that auto-persists to localStorage. Returns a regular writable so callers can use $store as usual.
  • src/components/layout/Modals.svelte — registers the new modal in the existing dispatcher alongside the other 14. No new pattern, no new file structure.

Why this approach

  • Fits existing patterns: matches the Connect.svelte / Settings.svelte / Deposit.svelte style exactly. No new abstraction.
  • No new deps: Svelte 3 already supports writable + subscribe. localStorage is a built-in.
  • Theme-aware: reuses --primary, --text0, --layer1dot5, etc.
  • One-time, non-intrusive: gated by cap_welcome_seen flag. Can be re-opened via showModal('Welcome') from anywhere — easy to wire to a help button later if you want.

Test

  1. npm i && npm run dev
  2. Open in incognito → welcome modal appears.
  3. Click Got it → modal closes.
  4. Reload → modal does NOT appear (gated).
  5. localStorage.removeItem('cap_welcome_seen') in DevTools + reload → modal appears again.
  6. showModal('Welcome') from the console → modal opens on demand.

Screenshots

Will add once maintainers confirm preferred size (520px width used; happy to adjust).

Bounty

I'm claiming the $500 bounty on this issue per the issue body rules. Comment on #13 requesting assignment was already posted.

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.

Welcome modal with integrated bridge and/or instructions

1 participant