feat: live price updates on coin page

website/src/lib/components/self/TradeModal.svelte

@@ -5,7 +5,7 @@
 	import { Label } from '$lib/components/ui/label';
 	import { Badge } from '$lib/components/ui/badge';
 	import { TrendingUp, TrendingDown, Loader2 } from 'lucide-svelte';
-	import { USER_DATA } from '$lib/stores/user-data';
+	import { PORTFOLIO_DATA } from '$lib/stores/portfolio-data';
 	import { toast } from 'svelte-sonner';
 
 	let {
@@ -33,10 +33,9 @@
 			? Math.min(userHolding, Math.floor(Number(coin.poolCoinAmount) * 0.995))
 			: userHolding
 	);
-
 	let estimatedResult = $derived(calculateEstimate(numericAmount, type, currentPrice));
 	let hasValidAmount = $derived(numericAmount > 0);
-	let userBalance = $derived($USER_DATA ? Number($USER_DATA.baseCurrencyBalance) : 0);
+	let userBalance = $derived($PORTFOLIO_DATA ? $PORTFOLIO_DATA.baseCurrencyBalance : 0);
 	let hasEnoughFunds = $derived(
 		type === 'BUY' ? numericAmount <= userBalance : numericAmount <= userHolding
 	);
@@ -114,7 +113,7 @@
 	function setMaxAmount() {
 		if (type === 'SELL') {
 			amount = maxSellableAmount.toString();
-		} else if ($USER_DATA) {
+		} else if ($PORTFOLIO_DATA) {
 			// For BUY, max is user's balance
 			amount = userBalance.toString();
 		}
@@ -164,7 +163,7 @@
 							<br />Max sellable: {maxSellableAmount.toFixed(0)} {coin.symbol} (pool limit)
 						{/if}
 					</p>
-				{:else if $USER_DATA}
+				{:else if $PORTFOLIO_DATA}
 					<p class="text-muted-foreground text-xs">
 						Balance: ${userBalance.toFixed(6)}
 					</p>

website/src/lib/stores/websocket.ts

@@ -16,6 +16,16 @@ export interface LiveTrade {
     userImage?: string;
 }
 
+export interface PriceUpdate {
+    coinSymbol: string;
+    currentPrice: number;
+    marketCap: number;
+    change24h: number;
+    volume24h: number;
+    poolCoinAmount?: number;
+    poolBaseCurrencyAmount?: number;
+}
+
 // Constants
 const WEBSOCKET_URL = PUBLIC_WEBSOCKET_URL;
 const RECONNECT_DELAY = 5000;
@@ -32,10 +42,14 @@ export const liveTradesStore = writable<LiveTrade[]>([]);
 export const allTradesStore = writable<LiveTrade[]>([]);
 export const isConnectedStore = writable<boolean>(false);
 export const isLoadingTrades = writable<boolean>(false);
+export const priceUpdatesStore = writable<Record<string, PriceUpdate>>({});
 
 // Comment callbacks
 const commentSubscriptions = new Map<string, (message: any) => void>();
 
+// Price update callbacks
+const priceUpdateSubscriptions = new Map<string, (priceUpdate: PriceUpdate) => void>();
+
 async function loadInitialTrades(): Promise<void> {
     if (!browser) return;
 
@@ -115,6 +129,29 @@ function handleCommentMessage(message: any): void {
     }
 }
 
+function handlePriceUpdateMessage(message: any): void {
+    const priceUpdate: PriceUpdate = {
+        coinSymbol: message.coinSymbol,
+        currentPrice: message.currentPrice,
+        marketCap: message.marketCap,
+        change24h: message.change24h,
+        volume24h: message.volume24h,
+        poolCoinAmount: message.poolCoinAmount,
+        poolBaseCurrencyAmount: message.poolBaseCurrencyAmount
+    };
+
+    priceUpdatesStore.update(updates => ({
+        ...updates,
+        [message.coinSymbol]: priceUpdate
+    }));
+
+    // Call specific coin callback if subscribed
+    const callback = priceUpdateSubscriptions.get(message.coinSymbol);
+    if (callback) {
+        callback(priceUpdate);
+    }
+}
+
 function handleWebSocketMessage(event: MessageEvent): void {
     try {
         const message = JSON.parse(event.data);
@@ -125,6 +162,10 @@ function handleWebSocketMessage(event: MessageEvent): void {
                 handleTradeMessage(message);
                 break;
 
+            case 'price_update':
+                handlePriceUpdateMessage(message);
+                break;
+
             case 'ping':
                 sendMessage({ type: 'pong' });
                 break;
@@ -202,11 +243,21 @@ function unsubscribeFromComments(coinSymbol: string): void {
     commentSubscriptions.delete(coinSymbol);
 }
 
+function subscribeToPriceUpdates(coinSymbol: string, callback: (priceUpdate: PriceUpdate) => void): void {
+    priceUpdateSubscriptions.set(coinSymbol, callback);
+}
+
+function unsubscribeFromPriceUpdates(coinSymbol: string): void {
+    priceUpdateSubscriptions.delete(coinSymbol);
+}
+
 export const websocketController = {
     connect,
     disconnect,
     setCoin,
     subscribeToComments,
     unsubscribeFromComments,
+    subscribeToPriceUpdates,
+    unsubscribeFromPriceUpdates,
     loadInitialTrades
 };

website/src/lib/utils.ts

@@ -183,4 +183,23 @@ export function getExpirationDate(option: string): string | null {
     }
 }
 
+export function getTimeframeInSeconds(timeframe: string): number {
+    switch (timeframe) {
+        case '1m':
+            return 60;
+        case '5m':
+            return 300;
+        case '15m':
+            return 900;
+        case '1h':
+            return 3600;
+        case '4h':
+            return 14400;
+        case '1d':
+            return 86400;
+        default:
+            return 60;
+    }
+}
+
 export const formatMarketCap = formatValue;