capofficial · Jiangzhewen · May 12, 2026
diff --git a/src/App.svelte b/src/App.svelte
@@ -1,6 +1,7 @@
 <script>
 
 	import { onMount, onDestroy } from 'svelte'
+	import { get } from 'svelte/store'
 
 	import Modals from '@components/layout/Modals.svelte'
 	import Errors from '@components/layout/Errors.svelte'
@@ -11,24 +12,40 @@
 	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'
 	import { getMarketPrices } from '@api/prices'
 
 	let interval1;
+	let welcomeModalShown = false;
+	let countryChecked = false;
 
-	onMount(async () => {
+	function showWelcomeModalOnFirstDashboardVisit() {
+		if (!countryChecked || get(countryDisallowed) || welcomeModalShown || location.pathname == '/' || getUserSetting('welcomeModalDismissed')) return;
+		welcomeModalShown = true;
+		setTimeout(() => showModal('Welcome'), 0);
+	}
 
-		checkCountry();
+	onMount(async () => {
 
 		loadRoute();
-		catchLinks((path) => navigateTo(path));
+		checkCountry().finally(() => {
+			countryChecked = true;
+			showWelcomeModalOnFirstDashboardVisit();
+		});
+		catchLinks((path) => {
+			navigateTo(path);
+			showWelcomeModalOnFirstDashboardVisit();
+		});
 
 		// For back button functionality
-		window.onpopstate = () => loadRoute();
+		window.onpopstate = () => {
+			loadRoute();
+			showWelcomeModalOnFirstDashboardVisit();
+		};
 
 		getMarketPrices('all');
 	});
@@ -257,4 +274,4 @@
 <Header />
 {/if}
 
-<svelte:component this={$component}/>
+<svelte:component this={$component}/>
diff --git a/src/components/header/Nav.svelte b/src/components/header/Nav.svelte
@@ -5,11 +5,17 @@
 	import Rewards from './Rewards.svelte'
 
 	import { pageName, showMobileNav } from '@lib/stores'
+	import { showModal } from '@lib/ui'
 	import { TROPHY_ICON, BULLET_LIST_ICON } from '@lib/icons'
 
 	function toggleMobileNav() {
 		showMobileNav.set(!$showMobileNav);
 	}
+
+	function openWelcomeModal() {
+		showMobileNav.set(false);
+		showModal('Welcome');
+	}
 </script>
 
 
@@ -121,6 +127,7 @@
 	<a class:active={$pageName == 'Trade'} href='/trade'>Trade</a>
 	<a class:active={$pageName == 'Pool'} href='/pool'>Pool</a>
 	<a class:active={$pageName == 'Stake'} href='/stake'>Stake</a>
+	<a href='/guide' on:click|preventDefault|stopPropagation={openWelcomeModal}>Guide</a>
 	<a on:click|stopPropagation={toggleMobileNav} class:active={$showMobileNav}>…</a>
 </div>
 
@@ -132,6 +139,7 @@
 	<a on:click={toggleMobileNav} href='/trade'>Trade</a>
 	<a on:click={toggleMobileNav} href='/pool'>Pool</a>
 	<a on:click={toggleMobileNav} href='/stake'>Stake</a>
+	<a href='/guide' on:click|preventDefault|stopPropagation={openWelcomeModal}>Guide</a>
 	<a on:click={toggleMobileNav} href='https://docs.cap.io' target='_blank' class='display-desktop'>Docs</a>
 </div>
 {/if}
@@ -140,4 +148,4 @@
 	{@html BULLET_LIST_ICON}
 </div>
 
-<Rewards/>
+<Rewards/>
diff --git a/src/components/layout/Modals.svelte b/src/components/layout/Modals.svelte
@@ -14,13 +14,18 @@
 	import UnstakeCAP from '../modals/UnstakeCAP.svelte'
 	import HistoryOrderStatus from '../modals/HistoryOrderStatus.svelte'
 	import Settings from '../modals/Settings.svelte'
+	import Welcome from '../modals/Welcome.svelte'
 
 </script>
 
 {#if $activeModal && $activeModal.name == 'Settings'}
 <Settings />
 {/if}
 
+{#if $activeModal && $activeModal.name == 'Welcome'}
+<Welcome />
+{/if}
+
 {#if $activeModal && $activeModal.name == 'AssetSelect'}
 <AssetSelect />
 {/if}
@@ -67,4 +72,4 @@
 
 {#if $activeModal && $activeModal.name == 'MarketInfo'}
 <MarketInfo data={$activeModal.data} />
-{/if}
+{/if}
diff --git a/src/components/modals/Welcome.svelte b/src/components/modals/Welcome.svelte
@@ -0,0 +1,195 @@
+<script>
+
+	import { onDestroy } from 'svelte'
+
+	import Button from '@components/layout/Button.svelte'
+	import Modal from './Modal.svelte'
+
+	import { navigateTo } from '@lib/routing'
+	import { hideModal } from '@lib/ui'
+	import { saveUserSetting } from '@lib/utils'
+
+	const guideItems = [
+		{
+			title: 'Trade',
+			copy: 'Open long or short perpetual positions, then manage active orders and position risk from the account panel.',
+			href: '/trade'
+		},
+		{
+			title: 'Pool',
+			copy: 'Deposit assets into CAP pools or withdraw available liquidity from the pool dashboard.',
+			href: '/pool'
+		},
+		{
+			title: 'Stake',
+			copy: 'Stake CAP, review rewards, and manage unstaking from the staking dashboard.',
+			href: '/stake'
+		}
+	];
+
+	function closeWelcomeModal() {
+		saveUserSetting('welcomeModalDismissed', true);
+		hideModal();
+	}
+
+	function navigateFromWelcomeModal(path) {
+		navigateTo(path);
+		closeWelcomeModal();
+	}
+
+	onDestroy(() => {
+		saveUserSetting('welcomeModalDismissed', true);
+	});
+
+</script>
+
+<style>
+
+	.content {
+		padding: var(--base-padding);
+	}
+
+	.lede {
+		margin: 0 0 var(--base-padding);
+		color: var(--text200);
+		line-height: 1.45;
+	}
+
+	.section {
+		border-top: 1px solid var(--layer200);
+		padding-top: var(--base-padding);
+		margin-top: var(--base-padding);
+	}
+
+	.section-title {
+		font-size: 14px;
+		font-weight: 600;
+		color: var(--text0);
+		margin-bottom: var(--semi-padding);
+	}
+
+	.guide-list {
+		display: grid;
+		grid-template-columns: 1fr;
+		gap: 0;
+		border: 1px solid var(--layer200);
+		border-radius: var(--base-radius);
+		overflow: hidden;
+	}
+
+	.guide-item {
+		display: grid;
+		grid-template-columns: 82px 1fr auto;
+		gap: var(--semi-padding);
+		align-items: center;
+		padding: 14px;
+		background-color: var(--layer50);
+		border-bottom: 1px solid var(--layer200);
+	}
+
+	.guide-item:last-child {
+		border-bottom: 0;
+	}
+
+	.guide-name {
+		font-weight: 600;
+		color: var(--text0);
+	}
+
+	.guide-copy {
+		color: var(--text300);
+		font-size: 13px;
+		line-height: 1.35;
+	}
+
+	a {
+		color: var(--primary);
+		text-decoration: none;
+		cursor: pointer;
+	}
+
+	.bridge-actions {
+		display: flex;
+		flex-wrap: wrap;
+		gap: var(--semi-padding);
+	}
+
+	.bridge-link {
+		display: flex;
+		align-items: center;
+		justify-content: center;
+		min-height: 38px;
+		padding: 0 16px;
+		border-radius: var(--base-radius);
+		background-color: var(--layer100);
+		font-weight: 600;
+	}
+
+	.bridge-link.primary {
+		color: var(--primary-darkest);
+		background-color: var(--primary);
+	}
+
+	.bridge-note {
+		margin-top: var(--semi-padding);
+		color: var(--text400);
+		font-size: 12px;
+		line-height: 1.35;
+	}
+
+	.footer {
+		display: flex;
+		justify-content: flex-end;
+		margin-top: var(--base-padding);
+	}
+
+	@media all and (max-width: 600px) {
+		.guide-item {
+			grid-template-columns: 1fr;
+		}
+		.bridge-actions {
+			flex-direction: column;
+		}
+		.bridge-link {
+			width: 100%;
+			box-sizing: border-box;
+		}
+	}
+
+</style>
+
+<Modal title='Welcome to CAP' width={560}>
+	<div class='content'>
+		<p class='lede'>
+			CAP is a decentralized trading dashboard for perpetual markets, liquidity pools, and CAP staking on Arbitrum One.
+		</p>
+
+		<div class='section'>
+			<div class='section-title'>Dashboard</div>
+			<div class='guide-list'>
+				{#each guideItems as item}
+					<div class='guide-item'>
+						<div class='guide-name'>{item.title}</div>
+						<div class='guide-copy'>{item.copy}</div>
+						<a href={item.href} on:click|preventDefault={() => navigateFromWelcomeModal(item.href)}>Open</a>
+					</div>
+				{/each}
+			</div>
+		</div>
+
+		<div class='section'>
+			<div class='section-title'>Bridge</div>
+			<div class='bridge-actions'>
+				<a class='bridge-link primary' href='https://portal.arbitrum.io/bridge' target='_blank' rel='noreferrer'>Open Arbitrum Bridge</a>
+				<a class='bridge-link' href='https://docs.cap.io/intro/setting-up-your-wallet' target='_blank' rel='noreferrer'>Wallet Setup</a>
+			</div>
+			<div class='bridge-note'>
+				Use the official Arbitrum portal or CAP docs when moving funds. Always verify the destination chain before confirming a wallet transaction.
+			</div>
+		</div>
+
+		<div class='footer'>
+			<Button label='Got it' noSubmit={true} on:click={closeWelcomeModal} />
+		</div>
+	</div>
+</Modal>