From 7904ab0575a7df103d94d59f4327b81bc7db2cab Mon Sep 17 00:00:00 2001 From: exodusubuntu-tech Date: Sun, 5 Jul 2026 15:51:10 +0000 Subject: [PATCH] feat: Add welcome modal with bridge integration for new users - 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 #13 --- src/App.svelte | 13 +- src/components/layout/Modals.svelte | 7 +- src/components/modals/WelcomeModal.svelte | 548 ++++++++++++++++++++++ 3 files changed, 565 insertions(+), 3 deletions(-) create mode 100644 src/components/modals/WelcomeModal.svelte diff --git a/src/App.svelte b/src/App.svelte index 87c26f1..7cac87d 100644 --- a/src/App.svelte +++ b/src/App.svelte @@ -10,9 +10,9 @@ import { USD_CONVERSION_MARKETS } from '@lib/config' import { checkCountry, loadRoute, catchLinks, navigateTo } from '@lib/routing' - import { component, address, pageName, countryDisallowed } from '@lib/stores' + import { component, address, pageName, countryDisallowed, activeModal } from '@lib/stores' import { hidePopoversOnKeydown, hidePopoversOnClick } from '@lib/ui' - import { runAndInterval, hashString, getChainData } from '@lib/utils' + import { runAndInterval, hashString, getChainData, getUserSetting } from '@lib/utils' import { getUserAssetBalances } from '@api/assets' import { listenToEvents } from '@api/listener' @@ -31,6 +31,15 @@ window.onpopstate = () => loadRoute(); getMarketPrices('all'); + + // Show welcome modal for first-time users + const welcomeShown = getUserSetting('welcomeShown'); + if (!welcomeShown) { + // Small delay to let the app initialize + setTimeout(() => { + activeModal.set({ name: 'Welcome' }); + }, 500); + } }); onDestroy(() => { diff --git a/src/components/layout/Modals.svelte b/src/components/layout/Modals.svelte index 03b829d..2a52352 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 WelcomeModal from '../modals/WelcomeModal.svelte' @@ -67,4 +68,8 @@ {#if $activeModal && $activeModal.name == 'MarketInfo'} -{/if} \ No newline at end of file +{/if} + +{#if $activeModal && $activeModal.name == 'Welcome'} + +{/if} diff --git a/src/components/modals/WelcomeModal.svelte b/src/components/modals/WelcomeModal.svelte new file mode 100644 index 0000000..619707b --- /dev/null +++ b/src/components/modals/WelcomeModal.svelte @@ -0,0 +1,548 @@ + + + + +
+
+
+
+ +
+ +
+ +
+

{steps[currentStep].title}

+

{steps[currentStep].subtitle}

+ + {#if currentStep === 0} +
+
+
📈
+
+

Up to 100x Leverage

+

Trade crypto perpetuals with high leverage on a decentralized platform.

+
+
+
+
🔒
+
+

Non-Custodial

+

Your funds stay in your wallet. Trade directly from your connected account.

+
+
+
+
⚡
+
+

Low Fees

+

Competitive trading fees on Arbitrum with fast, cheap transactions.

+
+
+
+
🏆
+
+

Earn CAP Rewards

+

Trade to earn CAP tokens. Stake CAP to share in protocol fees.

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

Connect Your Wallet

+

Use MetaMask, WalletConnect, or Coinbase Wallet to connect to CAP.

+
+
+
+
2
+
+

Bridge Funds to Arbitrum

+

If your funds are on Ethereum or another chain, bridge USDC to Arbitrum.

+
+
+
+
3
+
+

Deposit to CAP

+

Deposit USDC from your wallet to your CAP trading account.

+
+
+
+
4
+
+

Start Trading

+

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

+
+
+
+ {:else if currentStep === 2} +
+ {#if $address} +
+
+ Wallet Connected: {$address.slice(0, 6)}...{$address.slice(-4)} +
+ {:else} + + {/if} +
+ +
+ + + {#if showBridge} +
+ + + + +
+ {/if} +
+ +
+ + 📚 Read the full documentation → + +
+ {/if} +
+ +
+
+ {#each steps as _, i} +
+ {/each} +
+
+ {#if currentStep > 0} + + {/if} + {#if currentStep < steps.length - 1} + + {:else} + + {/if} +
+
+
+