From e25b6429a32d136c08e23ea3f226180caf25ad29 Mon Sep 17 00:00:00 2001 From: Hermes Admin Date: Fri, 29 May 2026 06:09:45 +0800 Subject: [PATCH] feat: add welcome modal with onboarding guide and bridge integration (fixes #13) MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit - New Welcome modal component showing CAP onboarding steps (connect wallet → bridge funds → start trading) - Integrated Uniswap bridge link for buying CAP tokens on Arbitrum - Auto-shows on first visit (localStorage flag to dismiss permanently) - 'Don't show again' checkbox for user preference - Matches existing design system (dark theme, primary green accent) - Registered in Modals.svelte and triggered from App.svelte onMount --- src/App.svelte | 7 + src/components/layout/Modals.svelte | 7 +- src/components/modals/Welcome.svelte | 244 +++++++++++++++++++++++++++ 3 files changed, 257 insertions(+), 1 deletion(-) create mode 100644 src/components/modals/Welcome.svelte diff --git a/src/App.svelte b/src/App.svelte index 87c26f1..5b5f4fe 100644 --- a/src/App.svelte +++ b/src/App.svelte @@ -13,6 +13,7 @@ import { component, address, pageName, countryDisallowed } from '@lib/stores' import { hidePopoversOnKeydown, hidePopoversOnClick } from '@lib/ui' import { runAndInterval, hashString, getChainData } from '@lib/utils' + import { showModal } from '@lib/ui' import { getUserAssetBalances } from '@api/assets' import { listenToEvents } from '@api/listener' @@ -31,6 +32,12 @@ window.onpopstate = () => loadRoute(); getMarketPrices('all'); + + // Show welcome modal on first visit (if not dismissed) + if (!localStorage.getItem('cap_welcome_dismissed')) { + // Small delay to ensure UI is ready + setTimeout(() => showModal('Welcome'), 800); + } }); onDestroy(() => { diff --git a/src/components/layout/Modals.svelte b/src/components/layout/Modals.svelte index 03b829d..02dae91 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' @@ -66,5 +67,9 @@ {/if} {#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..3935727 --- /dev/null +++ b/src/components/modals/Welcome.svelte @@ -0,0 +1,244 @@ + + + + + + +
+ +
+

👋 Welcome to CAP Decentralized Perps

+

Trade perpetual futures with up to 100× leverage on Arbitrum — directly from your wallet.

+
+ +
+ +
+
1
+
+
Connect Your Wallet
+

Link MetaMask or WalletConnect to start trading. No sign-up needed.

+
+
+ +
+
2
+
+
Bridge Funds to Arbitrum
+

Bridge ETH or USDC from Ethereum mainnet or use USDC already on Arbitrum as collateral.

+
+
+ +
+
3
+
+
Start Trading
+

Choose a market, set your leverage, and open long or short positions instantly.

+
+
+ +
+ +
+

💰 Need CAP Tokens?

+

You can buy CAP on Uniswap (Arbitrum) or earn rewards by providing liquidity or staking.

+ + Buy CAP on Uniswap → + +
+ +
+ + +
+ +
+ +