Skip to content

feat: Add welcome modal with bridge integration for new users#266

Open
BWM0223 wants to merge 1 commit into
capofficial:mainfrom
BWM0223:feature/welcome-modal
Open

feat: Add welcome modal with bridge integration for new users#266
BWM0223 wants to merge 1 commit into
capofficial:mainfrom
BWM0223:feature/welcome-modal

Conversation

@BWM0223

@BWM0223 BWM0223 commented Jul 5, 2026

Copy link
Copy Markdown

Summary

This PR implements the welcome modal with integrated bridge instructions as requested in #13.

Features

3-Step Welcome Flow:

Step 1 - Welcome:

  • Brief introduction to CAP
  • Key features highlighted (100x leverage, non-custodial, low fees, CAP rewards)

Step 2 - How It Works:

  • Step-by-step guide: Connect → Bridge → Deposit → Trade

Step 3 - Get Started:

  • Wallet connection button (integrates with existing web3-onboard)
  • Collapsible bridge section with 4 bridge options:
    • Arbitrum Bridge (Official)
    • Synapse Protocol (Fast)
    • Stargate Finance (Multi-chain)
    • Hop Protocol (Low fees)
  • Link to full documentation

Technical Details

  • Uses localStorage via getUserSetting/setUserSetting to track if welcome has been shown
  • Modal only shows once per browser
  • Matches existing design system (colors, typography, components)
  • Fully responsive
  • Accessible (keyboard navigation, focus management)

Files Changed

  • src/components/modals/WelcomeModal.svelte - New component
  • src/components/layout/Modals.svelte - Register modal
  • src/App.svelte - Auto-show on first visit

Testing

  • Clear localStorage and verify modal appears
  • Complete flow and verify modal does not reappear
  • Test wallet connection from modal
  • Test all bridge links open correctly
  • Verify responsive design on mobile

I would like to claim the $500 bounty for this issue.

Closes #13

- Adds a 3-step welcome modal that shows on first visit
- Step 1: Welcome with key features (100x leverage, non-custodial, low fees, CAP rewards)
- Step 2: How it works guide (connect, bridge, deposit, trade)
- Step 3: Wallet connection + bridge options (Arbitrum Bridge, Synapse, Stargate, Hop)
- Persists 'welcomeShown' to localStorage to only show once
- Accessible design with smooth animations
- Link to full documentation

Closes capofficial#13
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