From 6539eb2f4f9c03e69b942ad80ba4d1d194ea88a0 Mon Sep 17 00:00:00 2001
From: Face <69168154+face-hh@users.noreply.github.com>
Date: Sun, 8 Jun 2025 21:58:40 +0300
Subject: [PATCH] send / received transactions in live trades

---
 .../src/lib/components/self/AppSidebar.svelte | 25 ++++--
 website/src/lib/stores/websocket.ts           |  2 +-
 .../src/routes/api/trades/recent/+server.ts   |  2 +-
 website/src/routes/live/+page.svelte          | 80 ++++++++++++++-----
 4 files changed, 82 insertions(+), 27 deletions(-)

diff --git a/website/src/lib/components/self/AppSidebar.svelte b/website/src/lib/components/self/AppSidebar.svelte
index 3ed737e..9379a94 100644
--- a/website/src/lib/components/self/AppSidebar.svelte
+++ b/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>
-										<span class="text-muted-foreground">*{trade.coinSymbol}</span>
-										<span class="text-muted-foreground">by</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>
diff --git a/website/src/lib/stores/websocket.ts b/website/src/lib/stores/websocket.ts
index a53ca7f..31071a4 100644
--- a/website/src/lib/stores/websocket.ts
+++ b/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;
diff --git a/website/src/routes/api/trades/recent/+server.ts b/website/src/routes/api/trades/recent/+server.ts
index 7fd00ca..bf10dd7 100644
--- a/website/src/routes/api/trades/recent/+server.ts
+++ b/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),
diff --git a/website/src/routes/live/+page.svelte b/website/src/routes/live/+page.svelte
index ad2b722..dfc8319 100644
--- a/website/src/routes/live/+page.svelte
+++ b/website/src/routes/live/+page.svelte
@@ -76,24 +76,55 @@
 							<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">
-										<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}
+										{#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"
+											>
+												<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 === 'BUY' ? 'bought by' : 'sold by'}
 											</span>
-										</button>
-										<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>
+										<span class="text-muted-foreground">|</span>
+										<span>{formatValue(trade.totalValue)}</span>
 									{/if}
-									<span class="text-muted-foreground">|</span>
-									<span>{formatValue(trade.totalValue)}</span>
 								</div>
 
 								<div