yusur/coinstorge
Archived
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

send / received transactions in live trades

Browse source
This commit is contained in:
Face 2025-06-08 21:58:40 +03:00
parent e4ba0c71ca
commit 6539eb2f4f
4 changed files with 82 additions and 27 deletions
Download patch file Download diff file Expand all files Collapse all files

2
website/src/routes/api/trades/recent/+server.ts
View file

@ -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),

80
website/src/routes/live/+page.svelte
View file

@ -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