From 987d5f0929553994edf1c8f96398ff69f46838bf Mon Sep 17 00:00:00 2001
From: Sikkra <159844544+Sikkra@users.noreply.github.com>
Date: Tue, 19 May 2026 06:58:31 -0500
Subject: [PATCH] Add trading dashboard welcome guide

---
 src/components/layout/Modals.svelte        |   7 +-
 src/components/modals/Welcome.svelte       | 109 +++++++++++++++++++++
 src/components/trade/Trade.svelte          |  10 +-
 src/components/trade/chart/ChartBar.svelte |  25 +++--
 4 files changed, 140 insertions(+), 11 deletions(-)
 create mode 100644 src/components/modals/Welcome.svelte

diff --git a/src/components/layout/Modals.svelte b/src/components/layout/Modals.svelte
index 03b829d..3acd1b8 100644
--- a/src/components/layout/Modals.svelte
+++ b/src/components/layout/Modals.svelte
@@ -14,9 +14,14 @@
 	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 == 'Welcome'}
+<Welcome />
+{/if}
+
 {#if $activeModal && $activeModal.name == 'Settings'}
 <Settings />
 {/if}
@@ -67,4 +72,4 @@
 
 {#if $activeModal && $activeModal.name == 'MarketInfo'}
 <MarketInfo data={$activeModal.data} />
-{/if}
\ No newline at end of file
+{/if}
diff --git a/src/components/modals/Welcome.svelte b/src/components/modals/Welcome.svelte
new file mode 100644
index 0000000..9f4afdb
--- /dev/null
+++ b/src/components/modals/Welcome.svelte
@@ -0,0 +1,109 @@
+<script>
+	import Modal from './Modal.svelte'
+	import Button from '@components/layout/Button.svelte'
+	import { hideModal, showModal } from '@lib/ui'
+
+	const bridgeUrl = 'https://bridge.arbitrum.io/';
+	const docsUrl = 'https://docs.cap.io/';
+
+	function openBridge() {
+		window.open(bridgeUrl, '_blank', 'noopener,noreferrer');
+	}
+</script>
+
+<style>
+	.intro {
+		color: var(--text200);
+		line-height: 1.418;
+		margin-bottom: var(--base-padding);
+	}
+
+	.steps {
+		display: grid;
+		grid-template-columns: repeat(3, 1fr);
+		gap: var(--semi-padding);
+		margin-bottom: var(--base-padding);
+	}
+
+	.step {
+		background-color: var(--layer50);
+		border: 1px solid var(--layer100);
+		border-radius: var(--base-radius);
+		padding: 14px;
+		min-height: 112px;
+	}
+
+	.step-title {
+		font-weight: 600;
+		margin-bottom: 8px;
+	}
+
+	.step-body {
+		color: var(--text300);
+		font-size: 90%;
+		line-height: 1.35;
+	}
+
+	.actions {
+		display: flex;
+		flex-wrap: wrap;
+		gap: var(--semi-padding);
+		align-items: center;
+	}
+
+	.link {
+		color: var(--primary);
+	}
+
+	.link-button {
+		padding: 0;
+		width: auto;
+		height: auto;
+		background: transparent;
+		color: var(--primary);
+		font: inherit;
+		font-weight: 400;
+	}
+
+	.link-button:hover:not(:active),
+	.link-button:active {
+		background: transparent;
+		color: var(--primary-hover);
+	}
+
+	@media all and (max-width: 600px) {
+		.steps {
+			grid-template-columns: 1fr;
+		}
+	}
+</style>
+
+<Modal title='Welcome to CAP' width={620}>
+	<div class='container'>
+		<div class='intro'>
+			CAP is a decentralized trading dashboard for opening leveraged long and short positions using ETH or USDC as margin. Connect a wallet on Arbitrum, bridge funds if needed, choose a market, then size the order in the trade panel.
+		</div>
+
+		<div class='steps'>
+			<div class='step'>
+				<div class='step-title'>1. Connect</div>
+				<div class='step-body'>Use the wallet button in the header to connect a supported wallet on Arbitrum.</div>
+			</div>
+			<div class='step'>
+				<div class='step-title'>2. Fund</div>
+				<div class='step-body'>Bridge ETH or USDC to Arbitrum, then deposit pool funds or keep collateral in your wallet for trading.</div>
+			</div>
+			<div class='step'>
+				<div class='step-title'>3. Trade</div>
+				<div class='step-body'>Select a market, choose direction and leverage, then review order details before submitting.</div>
+			</div>
+		</div>
+
+		<div class='actions'>
+			<Button noSubmit={true} label='Open Arbitrum Bridge' on:click={openBridge} />
+			<Button noSubmit={true} label='Connect Wallet' on:click={() => showModal('Connect')} />
+			<a class='link' href={docsUrl} target='_blank' rel='noopener noreferrer'>Read docs</a>
+			<button class='link-button' type='button' on:click={hideModal}>Start trading</button>
+		</div>
+	</div>
+</Modal>
diff --git a/src/components/trade/Trade.svelte b/src/components/trade/Trade.svelte
index 7e92dad..c2017d8 100644
--- a/src/components/trade/Trade.svelte
+++ b/src/components/trade/Trade.svelte
@@ -11,13 +11,19 @@
 	import { getMarketInfo } from '@api/markets'
 	import { connectSocket, closeSocket } from '@api/socket'
 	import { selectedMarketInfo, accountHeight } from '@lib/stores'
-	import { setLeverageForSelectedMarket } from '@lib/utils'
+	import { getUserSetting, saveUserSetting, setLeverageForSelectedMarket } from '@lib/utils'
+	import { showModal } from '@lib/ui'
 
 	$: setLeverageForSelectedMarket($selectedMarketInfo);
 
 	onMount(() => {
 		// Connect websocket
 		connectSocket();
+
+		if (!getUserSetting('welcomeModalSeen')) {
+			showModal('Welcome');
+			saveUserSetting('welcomeModalSeen', true);
+		}
 	});
 
 	onDestroy(() => {
@@ -153,4 +159,4 @@
 		<div class='sidebar'><NewOrder /></div>
 		<div class='account'><Account /></div>
 	{/if}
-</div>
\ No newline at end of file
+</div>
diff --git a/src/components/trade/chart/ChartBar.svelte b/src/components/trade/chart/ChartBar.svelte
index 25c82ca..ef5c5ce 100644
--- a/src/components/trade/chart/ChartBar.svelte
+++ b/src/components/trade/chart/ChartBar.svelte
@@ -3,6 +3,7 @@
 	import { setResolution } from '@lib/chart'
 	import { chartResolution, chartLoading } from '@lib/stores'
 	import { LOADING_ICON } from '@lib/icons'
+	import { showModal } from '@lib/ui'
 
 </script>
 
@@ -31,7 +32,7 @@
 		color: var(--primary);
 	}
 
-	.loading {
+	.loading .resolution {
 		pointer-events: none;
 	}
 
@@ -45,14 +46,22 @@
 		width: 18px;
 	}
 
+	.divider {
+		width: 1px;
+		height: 18px;
+		background-color: var(--layer200);
+	}
+
 </style>
 
 <div class='chart-bar' class:loading={$chartLoading}>
-	<a class:active={$chartResolution == 60} on:click={async () => {await setResolution(60)}}>1m</a>
-	<a class:active={$chartResolution == 300} on:click={async () => {await setResolution(300)}}>5m</a>
-	<a class:active={$chartResolution == 900} on:click={async () => {await setResolution(900)}}>15m</a>
-	<a class:active={$chartResolution == 3600} on:click={async () => {await setResolution(3600)}}>1h</a>
-	<a class:active={$chartResolution == 14400} on:click={async () => {await setResolution(14400)}}>4h</a>
-	<a class:active={$chartResolution == 86400} on:click={async () => {await setResolution(86400)}}>1D</a>
+	<a class='resolution' class:active={$chartResolution == 60} on:click={async () => {await setResolution(60)}}>1m</a>
+	<a class='resolution' class:active={$chartResolution == 300} on:click={async () => {await setResolution(300)}}>5m</a>
+	<a class='resolution' class:active={$chartResolution == 900} on:click={async () => {await setResolution(900)}}>15m</a>
+	<a class='resolution' class:active={$chartResolution == 3600} on:click={async () => {await setResolution(3600)}}>1h</a>
+	<a class='resolution' class:active={$chartResolution == 14400} on:click={async () => {await setResolution(14400)}}>4h</a>
+	<a class='resolution' class:active={$chartResolution == 86400} on:click={async () => {await setResolution(86400)}}>1D</a>
+	<div class='divider'></div>
+	<a on:click|stopPropagation={() => showModal('Welcome')}>Guide</a>
 	{#if $chartLoading}<div class='loading-icon'>{@html LOADING_ICON}</div>{/if}
-</div>
\ No newline at end of file
+</div>