From b885882958ff513c55c41b7d9da71d44eafbca20 Mon Sep 17 00:00:00 2001 From: rebel117 <> Date: Sat, 16 May 2026 10:54:33 +0800 Subject: [PATCH] Add welcome modal for new users - 5-step guided walkthrough: Welcome, Getting Started, Funding, Trading, Tips - Auto-shows on first visit (detected via localStorage) - Step indicator with dots, back/next navigation - Bridge links to Arbitrum and Across for funding - Dismiss sets hasSeenWelcome in user settings - Can be reopened from settings if needed --- src/App.svelte | 9 +- src/components/layout/Modals.svelte | 5 + src/components/modals/Welcome.svelte | 237 +++++++++++++++++++++++++++ 3 files changed, 249 insertions(+), 2 deletions(-) create mode 100644 src/components/modals/Welcome.svelte diff --git a/src/App.svelte b/src/App.svelte index 87c26f1..9867e38 100644 --- a/src/App.svelte +++ b/src/App.svelte @@ -11,8 +11,8 @@ import { USD_CONVERSION_MARKETS } from '@lib/config' import { checkCountry, loadRoute, catchLinks, navigateTo } from '@lib/routing' import { component, address, pageName, countryDisallowed } from '@lib/stores' - import { hidePopoversOnKeydown, hidePopoversOnClick } from '@lib/ui' - import { runAndInterval, hashString, getChainData } from '@lib/utils' + import { hidePopoversOnKeydown, hidePopoversOnClick, showModal } from '@lib/ui' + import { runAndInterval, hashString, getChainData, getUserSetting } from '@lib/utils' import { getUserAssetBalances } from '@api/assets' import { listenToEvents } from '@api/listener' @@ -31,6 +31,11 @@ window.onpopstate = () => loadRoute(); getMarketPrices('all'); + + // Show welcome modal on first visit + if (!getUserSetting('hasSeenWelcome')) { + setTimeout(() => showModal('Welcome'), 500); + } }); onDestroy(() => { diff --git a/src/components/layout/Modals.svelte b/src/components/layout/Modals.svelte index 03b829d..07aba99 100644 --- a/src/components/layout/Modals.svelte +++ b/src/components/layout/Modals.svelte @@ -14,6 +14,7 @@ import UnstakeCAP from '../modals/UnstakeCAP.svelte' import HistoryOrderStatus from '../modals/HistoryOrderStatus.svelte' import Settings from '../modals/Settings.svelte' + import Welcome from '../modals/Welcome.svelte' @@ -67,4 +68,8 @@ {#if $activeModal && $activeModal.name == 'MarketInfo'} +{/if} + +{#if $activeModal && $activeModal.name == 'Welcome'} + {/if} \ No newline at end of file diff --git a/src/components/modals/Welcome.svelte b/src/components/modals/Welcome.svelte new file mode 100644 index 0000000..26fb0e9 --- /dev/null +++ b/src/components/modals/Welcome.svelte @@ -0,0 +1,237 @@ + + + + + + +
+ +
+ {#each steps as _, i} +
+ {/each} +
+ +
+ {#if step === 0} +

Welcome to CAP

+

CAP is a decentralized perpetuals exchange on Arbitrum. Trade with low fees, deep liquidity, and no sign-up required.

+
+
+
⚡
+
Fast
+
+
+
🔒
+
Non-custodial
+
+
+
💰
+
Low fees
+
+
+

Connect your wallet to get started. This quick walkthrough covers the basics.

+ + {:else if step === 1} +

Getting Started

+
    +
  • Connect your wallet using the button in the top right
    • +
  • Make sure you're on the Arbitrum network
    • +
  • You'll need ETH for trading and gas fees, or USDC for trading stablecoin pairs
    • +
+
+ CAP supports MetaMask, WalletConnect, Coinbase Wallet, and other popular wallets. +
+ + {:else if step === 2} +

Funding Your Account

+
    +
  • Bridge funds to Arbitrum using the official bridge at bridge.arbitrum.io
    • +
  • Or use Across for faster bridging
    • +
  • Once on Arbitrum, deposit into the CAP trading account from the Pools page
    • +
+
+ Tip: Bridging ETH to Arbitrum usually takes a few minutes. USDC bridging may take longer depending on the bridge. +
+ + {:else if step === 3} +

Trading

+
    +
  • Choose a market from the top bar (BTC, ETH, etc.)
    • +
  • Select Long or Short
    • +
  • Set your size and leverage
    • +
  • Set optional Take Profit and Stop Loss levels
    • +
  • Click Submit Order to open your position
    • +
+

Monitor your positions in the dashboard below the chart.

+ + {:else if step === 4} +

Tips for Success

+
    +
  • Start with small positions to learn the interface
    • +
  • Always set a stop loss to manage risk
    • +
  • Check the Pool page to see available liquidity
    • +
  • Use the Settings gear icon to customize your dashboard
    • +
  • Your History tab tracks all past trades and P/L
    • +
+
+ Need help? Join the community on Discord or check the FAQ. +
+ {/if} +
+ +
+ +
+ +
+ {#if step > 0} +
+
+ + \ No newline at end of file