send / received transactions in live trades

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

@@ -28,9 +28,7 @@
 		TrendingUpDown,
 		Scale,
 		ShieldCheck,
-
 		Hammer
-
 	} from 'lucide-svelte';
 	import { mode, setMode } from 'mode-watcher';
 	import type { HTMLAttributes } from 'svelte/elements';
@@ -249,7 +247,15 @@
 								class="hover:bg-muted/50 flex w-full cursor-pointer items-center gap-2 rounded px-1 py-1 text-left text-xs transition-colors"
 							>
 								<div class="flex items-center gap-1">
-									{#if trade.type === 'BUY'}
+									{#if trade.type === 'TRANSFER_IN' || trade.type === 'TRANSFER_OUT'}
+										<Activity class="h-3 w-3 text-blue-500" />
+										<Badge
+											variant="outline"
+											class="h-4 border-blue-500 px-1 py-0 text-[10px] text-blue-500"
+										>
+											{trade.type === 'TRANSFER_IN' ? 'REC' : 'SENT'}
+										</Badge>
+									{:else if trade.type === 'BUY'}
 										<TrendingUp class="h-3 w-3 text-green-500" />
 										<Badge
 											variant="outline"
@@ -272,8 +278,17 @@
 										<span class="text-foreground font-medium">
 											{formatValue(trade.totalValue)}
 										</span>
+										{#if trade.type === 'TRANSFER_IN' || trade.type === 'TRANSFER_OUT'}
+											{#if trade.amount > 0}
+												<span class="text-muted-foreground">*{trade.coinSymbol}</span>
+											{/if}
+											<span class="text-muted-foreground">
+												{trade.type === 'TRANSFER_IN' ? 'to' : 'from'}
+											</span>
+										{:else}
 											<span class="text-muted-foreground">*{trade.coinSymbol}</span>
 											<span class="text-muted-foreground">by</span>
+										{/if}
 										<span class="text-muted-foreground">@{trade.username}</span>
 									</div>
 								</div>

website/src/lib/stores/websocket.ts

@@ -3,7 +3,7 @@ import { browser } from '$app/environment';
 import { PUBLIC_WEBSOCKET_URL } from '$env/static/public';
 
 export interface LiveTrade {
-    type: 'BUY' | 'SELL';
+    type: 'BUY' | 'SELL' | 'TRANSFER_IN' | 'TRANSFER_OUT';
     username: string;
     amount: number;
     coinSymbol: string;

website/src/routes/api/trades/recent/+server.ts

@@ -37,7 +37,7 @@ export async function GET({ url }) {
             .limit(limit);
 
         const formattedTrades = trades.map(trade => ({
-            type: trade.type as 'BUY' | 'SELL',
+            type: trade.type as 'BUY' | 'SELL' | 'TRANSFER_IN' | 'TRANSFER_OUT',
             username: trade.username,
             userImage: trade.userImage,
             amount: Number(trade.amount),

website/src/routes/live/+page.svelte

@@ -76,6 +76,35 @@
 							<div class="flex items-center gap-3 sm:gap-4">
 								<div class="min-w-0 flex-1">
 									<div class="flex flex-wrap items-center gap-1 sm:gap-2">
+										{#if trade.type === 'TRANSFER_IN' || trade.type === 'TRANSFER_OUT'}
+											{#if trade.amount > 0}
+												<button
+													onclick={() => handleCoinClick(trade.coinSymbol)}
+													class="flex cursor-pointer items-center gap-1.5 transition-opacity hover:underline hover:opacity-80"
+												>
+													<CoinIcon
+														icon={trade.coinIcon}
+														symbol={trade.coinSymbol}
+														name={trade.coinName || trade.coinSymbol}
+														size={5}
+														class="sm:size-6"
+													/>
+													<span class="font-mono text-sm font-medium sm:text-base">
+														{formatQuantity(trade.amount)} *{trade.coinSymbol}
+													</span>
+												</button>
+												<span class="text-muted-foreground text-xs sm:text-sm">
+													{trade.type === 'TRANSFER_IN' ? 'received by' : 'sent by'}
+												</span>
+											{:else}
+												<span class="font-mono text-sm font-medium sm:text-base">
+													{formatValue(trade.totalValue)}
+												</span>
+												<span class="text-muted-foreground text-xs sm:text-sm">
+													{trade.type === 'TRANSFER_IN' ? 'received by' : 'sent by'}
+												</span>
+											{/if}
+										{:else}
 											<button
 												onclick={() => handleCoinClick(trade.coinSymbol)}
 												class="flex cursor-pointer items-center gap-1.5 transition-opacity hover:underline hover:opacity-80"
@@ -94,6 +123,8 @@
 											<span class="text-muted-foreground text-xs sm:text-sm">
 												{trade.type === 'BUY' ? 'bought by' : 'sold by'}
 											</span>
+										{/if}
+
 										<HoverCard.Root>
 											<HoverCard.Trigger
 												class="cursor-pointer font-medium underline-offset-4 hover:underline"
@@ -124,15 +155,24 @@
 
 							<div class="flex items-center justify-between gap-2">
 								<div class="flex items-center gap-2 font-mono text-xs sm:text-sm">
-									{#if trade.type === 'BUY'}
+									{#if trade.type === 'TRANSFER_IN' || trade.type === 'TRANSFER_OUT'}
+										<Activity class="h-3.5 w-3.5 text-blue-500 sm:h-4 sm:w-4" />
+										<span class="text-blue-500">
+											{trade.type === 'TRANSFER_IN' ? 'RECEIVED' : 'SENT'}
+										</span>
+										<span class="text-muted-foreground">|</span>
+										<span>{formatValue(trade.totalValue)}</span>
+									{:else if trade.type === 'BUY'}
 										<TrendingUp class="h-3.5 w-3.5 text-green-500 sm:h-4 sm:w-4" />
 										<span class="text-green-500">BUY</span>
+										<span class="text-muted-foreground">|</span>
+										<span>{formatValue(trade.totalValue)}</span>
 									{:else}
 										<TrendingDown class="h-3.5 w-3.5 text-red-500 sm:h-4 sm:w-4" />
 										<span class="text-red-500">SELL</span>
-									{/if}
 										<span class="text-muted-foreground">|</span>
 										<span>{formatValue(trade.totalValue)}</span>
+									{/if}
 								</div>
 
 								<div