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

feat: mobile support + more skeletons

Browse source
This commit is contained in:
Face 2025-05-27 16:19:57 +03:00
parent ab6b6901db
commit 87d3b41e05
14 changed files with 589 additions and 367 deletions
Download patch file Download diff file Expand all files Collapse all files

4
website/src/routes/+page.svelte
View file

@ -66,13 +66,11 @@
{
key: 'marketCap',
label: 'Market Cap',
class: 'hidden md:table-cell',
render: (value: any) => formatMarketCap(value)
},
{
key: 'volume24h',
label: 'Volume (24h)',
class: 'hidden md:table-cell',
render: (value: any) => formatMarketCap(value)
}
];
@ -144,7 +142,7 @@
<div class="mt-12">
<h2 class="mb-4 text-2xl font-bold">Market Overview</h2>
<Card.Root>
<Card.Content class="p-0">
<Card.Content>
<DataTable
columns={marketColumns}
data={coins}

100
website/src/routes/coin/[coinSymbol]/+page.svelte
View file

@ -1,5 +1,6 @@
<script lang="ts">
import * as Card from '$lib/components/ui/card';
import * as Select from '$lib/components/ui/select';
import { Badge } from '$lib/components/ui/badge';
import { Button } from '$lib/components/ui/button';
import * as Avatar from '$lib/components/ui/avatar';
@ -37,6 +38,15 @@
let selectedTimeframe = $state('1m');
let lastPriceUpdateTime = 0;
const timeframeOptions = [
{ value: '1m', label: '1 minute' },
{ value: '5m', label: '5 minutes' },
{ value: '15m', label: '15 minutes' },
{ value: '1h', label: '1 hour' },
{ value: '4h', label: '4 hours' },
{ value: '1d', label: '1 day' }
];
onMount(async () => {
await loadCoinData();
await loadUserHolding();
@ -165,19 +175,10 @@
loading = false;
}
function generateVolumeData(candlestickData: any[], volumeData: any[]) {
return candlestickData.map((candle, index) => {
// Find corresponding volume data for this time period
const volumePoint = volumeData.find((v) => v.time === candle.time);
const volume = volumePoint ? volumePoint.volume : 0;
let currentTimeframeLabel = $derived(
timeframeOptions.find((option) => option.value === selectedTimeframe)?.label || '1 minute'
);
return {
time: candle.time,
value: volume,
color: candle.close >= candle.open ? '#26a69a' : '#ef5350'
};
});
}
let chartContainer = $state<HTMLDivElement>();
let chart: IChartApi | null = null;
let candlestickSeries: any = null;
@ -312,6 +313,20 @@
if (num >= 1e3) return `${(num / 1e3).toFixed(2)}K`;
return num.toLocaleString();
}
function generateVolumeData(candlestickData: any[], volumeData: any[]) {
return candlestickData.map((candle, index) => {
// Find corresponding volume data for this time period
const volumePoint = volumeData.find((v) => v.time === candle.time);
const volume = volumePoint ? volumePoint.volume : 0;
return {
time: candle.time,
value: volume,
color: candle.close >= candle.open ? '#26a69a' : '#ef5350'
};
});
}
</script>
<svelte:head>
@ -341,19 +356,19 @@
{:else}
<!-- Header Section -->
<header class="mb-8">
<div class="mb-4 flex items-start justify-between">
<div class="flex items-center gap-4">
<div class="mb-4 flex flex-col gap-4 sm:flex-row sm:items-start sm:justify-between">
<div class="flex items-center gap-3 sm:gap-4">
<CoinIcon
icon={coin.icon}
symbol={coin.symbol}
name={coin.name}
size={16}
class="border"
size={12}
class="border sm:size-16"
/>
<div>
<h1 class="text-4xl font-bold">{coin.name}</h1>
<div class="mt-1 flex items-center gap-2">
<Badge variant="outline" class="text-lg">*{coin.symbol}</Badge>
<div class="min-w-0 flex-1">
<h1 class="text-2xl font-bold sm:text-4xl">{coin.name}</h1>
<div class="mt-1 flex flex-wrap items-center gap-2">
<Badge variant="outline" class="text-sm sm:text-lg">*{coin.symbol}</Badge>
{#if $isConnectedStore}
<Badge
variant="outline"
@ -368,19 +383,19 @@
</div>
</div>
</div>
<div class="text-right">
<div class="flex flex-col items-start gap-2 sm:items-end sm:text-right">
<div class="relative">
<p class="text-3xl font-bold">
<p class="text-2xl font-bold sm:text-3xl">
${formatPrice(coin.currentPrice)}
</p>
</div>
<div class="mt-2 flex items-center gap-2">
<div class="flex items-center gap-2">
{#if coin.change24h >= 0}
<TrendingUp class="h-4 w-4 text-green-500" />
{:else}
<TrendingDown class="h-4 w-4 text-red-500" />
{/if}
<Badge variant={coin.change24h >= 0 ? 'success' : 'destructive'}>
<Badge variant={coin.change24h >= 0 ? 'success' : 'destructive'} class="text-sm">
{coin.change24h >= 0 ? '+' : ''}{Number(coin.change24h).toFixed(2)}%
</Badge>
</div>
@ -389,7 +404,7 @@
<!-- Creator Info -->
{#if coin.creatorName}
<div class="text-muted-foreground flex items-center gap-2 text-sm">
<div class="text-muted-foreground flex flex-wrap items-center gap-2 text-sm">
<span>Created by</span>
<HoverCard.Root>
@ -423,17 +438,26 @@
<ChartColumn class="h-5 w-5" />
Price Chart ({selectedTimeframe})
</Card.Title>
<div class="flex gap-1">
{#each ['1m', '5m', '15m', '1h', '4h', '1d'] as timeframe}
<Button
variant={selectedTimeframe === timeframe ? 'default' : 'outline'}
size="sm"
onclick={() => handleTimeframeChange(timeframe)}
disabled={loading}
>
{timeframe}
</Button>
{/each}
<div class="w-24">
<Select.Root
type="single"
bind:value={selectedTimeframe}
onValueChange={handleTimeframeChange}
disabled={loading}
>
<Select.Trigger class="w-full">
{currentTimeframeLabel}
</Select.Trigger>
<Select.Content>
<Select.Group>
{#each timeframeOptions as option}
<Select.Item value={option.value} label={option.label}>
{option.label}
</Select.Item>
{/each}
</Select.Group>
</Select.Content>
</Select.Root>
</div>
</div>
</Card.Header>
@ -581,7 +605,9 @@
</Card.Header>
<Card.Content class="pt-0">
<p class="text-xl font-bold">
{formatSupply(coin.circulatingSupply)}<span class="text-muted-foreground text-xs ml-1">
{formatSupply(coin.circulatingSupply)}<span
class="text-muted-foreground ml-1 text-xs"
>
of {formatSupply(coin.initialSupply)} total
</span>
</p>

76
website/src/routes/leaderboard/+page.svelte
View file

@ -201,14 +201,14 @@
<title>Leaderboard - Rugplay</title>
</svelte:head>
<div class="container mx-auto max-w-7xl p-6">
<header class="mb-8">
<div class="flex items-center justify-between">
<div class="container mx-auto max-w-7xl p-4 md:p-6">
<header class="mb-6 md:mb-8">
<div class="flex flex-col gap-4 sm:flex-row sm:items-center sm:justify-between">
<div>
<h1 class="text-3xl font-bold">Leaderboard</h1>
<p class="text-muted-foreground">Top performers and market activity</p>
<h1 class="text-2xl font-bold md:text-3xl">Leaderboard</h1>
<p class="text-muted-foreground text-sm md:text-base">Top performers and market activity</p>
</div>
<Button variant="outline" onclick={fetchLeaderboardData} disabled={loading}>
<Button variant="outline" onclick={fetchLeaderboardData} disabled={loading} class="w-fit">
<RefreshCw class="h-4 w-4" />
Refresh
</Button>
@ -220,24 +220,24 @@
{:else if !leaderboardData}
<div class="flex h-96 items-center justify-center">
<div class="text-center">
<div class="text-muted-foreground mb-4 text-xl">Failed to load leaderboard</div>
<div class="text-muted-foreground mb-4 text-lg md:text-xl">Failed to load leaderboard</div>
<Button onclick={fetchLeaderboardData}>Try Again</Button>
</div>
</div>
{:else}
<div class="grid gap-6 lg:grid-cols-2">
<div class="grid gap-4 md:gap-6 xl:grid-cols-2">
<!-- Top Profit Makers -->
<Card.Root>
<Card.Header>
<Card.Title class="flex items-center gap-2 text-red-600">
<Skull class="h-6 w-6" />
Top Rugpullers (24h)
<Card.Root class="overflow-hidden">
<Card.Header class="pb-3 md:pb-4">
<Card.Title class="flex items-center gap-2 text-lg text-red-600 md:text-xl">
<Skull class="h-5 w-5 md:h-6 md:w-6" />
<span class="truncate">Top Rugpullers (24h)</span>
</Card.Title>
<Card.Description>
<Card.Description class="text-xs md:text-sm">
Users who made the most profit from selling coins today
</Card.Description>
</Card.Header>
<Card.Content>
<Card.Content class="p-3 pt-0 md:p-6 md:pt-0">
<DataTable
columns={rugpullersColumns}
data={leaderboardData.topRugpullers}
@ -249,15 +249,17 @@
</Card.Root>
<!-- Biggest Losses -->
<Card.Root>
<Card.Header>
<Card.Title class="flex items-center gap-2 text-orange-600">
<TrendingDown class="h-6 w-6" />
Biggest Losses (24h)
<Card.Root class="overflow-hidden">
<Card.Header class="pb-3 md:pb-4">
<Card.Title class="flex items-center gap-2 text-lg text-orange-600 md:text-xl">
<TrendingDown class="h-5 w-5 md:h-6 md:w-6" />
<span class="truncate">Biggest Losses (24h)</span>
</Card.Title>
<Card.Description>Users who experienced the largest losses today</Card.Description>
<Card.Description class="text-xs md:text-sm"
>Users who experienced the largest losses today</Card.Description
>
</Card.Header>
<Card.Content>
<Card.Content class="p-3 pt-0 md:p-6 md:pt-0">
<DataTable
columns={losersColumns}
data={leaderboardData.biggestLosers}
@ -269,15 +271,17 @@
</Card.Root>
<!-- Top Cash Holders -->
<Card.Root>
<Card.Header>
<Card.Title class="flex items-center gap-2 text-green-600">
<Crown class="h-6 w-6" />
Top Cash Holders
<Card.Root class="overflow-hidden">
<Card.Header class="pb-3 md:pb-4">
<Card.Title class="flex items-center gap-2 text-lg text-green-600 md:text-xl">
<Crown class="h-5 w-5 md:h-6 md:w-6" />
<span class="truncate">Top Cash Holders</span>
</Card.Title>
<Card.Description>Users with the highest liquid cash balances</Card.Description>
<Card.Description class="text-xs md:text-sm"
>Users with the highest liquid cash balances</Card.Description
>
</Card.Header>
<Card.Content>
<Card.Content class="p-3 pt-0 md:p-6 md:pt-0">
<DataTable
columns={cashKingsColumns}
data={leaderboardData.cashKings}
@ -289,17 +293,17 @@
</Card.Root>
<!-- Top Portfolio Values -->
<Card.Root>
<Card.Header>
<Card.Title class="flex items-center gap-2 text-cyan-600">
<Trophy class="h-6 w-6" />
Highest Portfolio Values
<Card.Root class="overflow-hidden">
<Card.Header class="pb-3 md:pb-4">
<Card.Title class="flex items-center gap-2 text-lg text-cyan-600 md:text-xl">
<Trophy class="h-5 w-5 md:h-6 md:w-6" />
<span class="truncate">Highest Portfolio Values</span>
</Card.Title>
<Card.Description
<Card.Description class="text-xs md:text-sm"
>Users with the largest total portfolio valuations (including illiquid)</Card.Description
>
</Card.Header>
<Card.Content>
<Card.Content class="p-3 pt-0 md:p-6 md:pt-0">
<DataTable
columns={millionairesColumns}
data={leaderboardData.paperMillionaires}

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

@ -3,13 +3,13 @@
import { Badge } from '$lib/components/ui/badge';
import * as Avatar from '$lib/components/ui/avatar';
import * as HoverCard from '$lib/components/ui/hover-card';
import { Skeleton } from '$lib/components/ui/skeleton';
import { Activity, TrendingUp, TrendingDown, Clock } from 'lucide-svelte';
import { allTradesStore, isLoadingTrades } from '$lib/stores/websocket';
import { goto } from '$app/navigation';
import { formatQuantity, formatRelativeTime, formatValue, getPublicUrl } from '$lib/utils';
import CoinIcon from '$lib/components/self/CoinIcon.svelte';
import UserProfilePreview from '$lib/components/self/UserProfilePreview.svelte';
import LiveTradeSkeleton from '$lib/components/self/skeletons/LiveTradeSkeleton.svelte';
function handleUserClick(username: string) {
goto(`/user/${username}`);
@ -28,101 +28,63 @@
<div class="container mx-auto max-w-7xl p-6">
<header class="mb-8">
<div>
<h1 class="text-3xl font-bold">Live Trades</h1>
<p class="text-muted-foreground">Real-time trading activity for all trades</p>
<h1 class="text-2xl font-bold sm:text-3xl">Live Trades</h1>
<p class="text-muted-foreground text-sm sm:text-base">
Real-time trading activity for all trades
</p>
</div>
</header>
<Card>
<CardHeader>
<CardTitle class="flex items-center gap-2">
<Activity class="h-5 w-5" />
Stream
<CardTitle class="flex flex-col gap-2 sm:flex-row sm:items-center sm:gap-2">
<div class="flex items-center gap-2">
<Activity class="h-5 w-5" />
Stream
</div>
{#if $allTradesStore.length > 0}
<Badge variant="secondary" class="ml-auto">
<Badge variant="secondary" class="w-fit sm:ml-auto">
{$allTradesStore.length} trade{$allTradesStore.length !== 1 ? 's' : ''}
</Badge>
{/if}
</CardTitle>
</CardHeader>
<CardContent>
{#if $isLoadingTrades}
<div class="space-y-3">
{#each Array(8) as _, i}
<div class="flex items-center justify-between rounded-lg border p-4">
<div class="flex items-center gap-4">
<div class="flex items-center gap-2">
<Skeleton class="h-8 w-8 rounded-full" />
<Skeleton class="h-6 w-12" />
</div>
<div class="flex flex-col gap-2">
<div class="flex items-center gap-2">
<Skeleton class="h-6 w-6 rounded-full" />
<Skeleton class="h-4 w-24" />
<Skeleton class="h-4 w-16" />
<Skeleton class="h-5 w-5 rounded-full" />
<Skeleton class="h-4 w-20" />
</div>
<Skeleton class="h-3 w-32" />
</div>
</div>
<div class="flex items-center gap-2">
<Skeleton class="h-4 w-4" />
<Skeleton class="h-4 w-16" />
</div>
</div>
{/each}
</div>
{:else if $allTradesStore.length === 0}
<div class="flex flex-col items-center justify-center py-16 text-center">
<Activity class="text-muted-foreground/50 mb-4 h-16 w-16" />
<h3 class="mb-2 text-lg font-semibold">Waiting for trades...</h3>
<p class="text-muted-foreground">All trades will appear here in real-time.</p>
</div>
{:else}
<div class="space-y-3">
<div class="space-y-3">
{#if $isLoadingTrades}
<LiveTradeSkeleton />
{:else if $allTradesStore.length === 0}
<div class="flex flex-col items-center justify-center py-12 text-center sm:py-16">
<Activity class="text-muted-foreground/50 mb-4 h-12 w-12 sm:h-16 sm:w-16" />
<h3 class="mb-2 text-base font-semibold sm:text-lg">Waiting for trades...</h3>
<p class="text-muted-foreground text-sm sm:text-base">
All trades will appear here in real-time.
</p>
</div>
{:else}
{#each $allTradesStore as trade (trade.timestamp)}
<div
class="hover:bg-muted/50 flex items-center justify-between rounded-lg border p-4 transition-colors"
class="hover:bg-muted/50 flex flex-col gap-3 rounded-lg border p-3 transition-colors sm:flex-row sm:items-center sm:justify-between sm:p-4"
>
<div class="flex items-center gap-4">
<div class="flex items-center gap-2">
{#if trade.type === 'BUY'}
<div
class="flex h-8 w-8 items-center justify-center rounded-full bg-green-500/10"
>
<TrendingUp class="h-4 w-4 text-green-500" />
</div>
<Badge variant="outline" class="border-green-500 text-green-500">BUY</Badge>
{:else}
<div
class="flex h-8 w-8 items-center justify-center rounded-full bg-red-500/10"
>
<TrendingDown class="h-4 w-4 text-red-500" />
</div>
<Badge variant="outline" class="border-red-500 text-red-500">SELL</Badge>
{/if}
</div>
<div class="flex flex-col">
<div class="flex items-center gap-2">
<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-2 transition-opacity hover:underline hover:opacity-80"
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={6}
size={5}
class="sm:size-6"
/>
<span class="font-mono font-medium">
<span class="font-mono text-sm font-medium sm:text-base">
{formatQuantity(trade.amount)} *{trade.coinSymbol}
</span>
</button>
<span class="text-muted-foreground">
<span class="text-muted-foreground text-xs sm:text-sm">
{trade.type === 'BUY' ? 'bought by' : 'sold by'}
</span>
<HoverCard.Root>
@ -131,7 +93,7 @@
onclick={() => handleUserClick(trade.username)}
>
<div class="flex items-center gap-1">
<Avatar.Root class="h-5 w-5">
<Avatar.Root class="h-4 w-4 sm:h-5 sm:w-5">
<Avatar.Image
src={getPublicUrl(trade.userImage ?? null)}
alt={trade.username}
@ -140,7 +102,9 @@
>{trade.username.charAt(0).toUpperCase()}</Avatar.Fallback
>
</Avatar.Root>
<span>@{trade.username}</span>
<span class="max-w-[120px] truncate text-xs sm:max-w-none sm:text-sm"
>@{trade.username}</span
>
</div>
</HoverCard.Trigger>
<HoverCard.Content class="w-80" side="top" sideOffset={3}>
@ -148,20 +112,35 @@
</HoverCard.Content>
</HoverCard.Root>
</div>
<div class="text-muted-foreground text-sm">
Trade value: {formatValue(trade.totalValue)}
</div>
</div>
</div>
<div class="text-muted-foreground flex items-center gap-2 text-sm">
<Clock class="h-4 w-4" />
<span class="font-mono">{formatRelativeTime(new Date(trade.timestamp))}</span>
<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'}
<TrendingUp class="h-3.5 w-3.5 text-green-500 sm:h-4 sm:w-4" />
<span class="text-green-500">BUY</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>
</div>
<div
class="text-muted-foreground flex items-center gap-1 text-xs sm:gap-1 sm:text-sm"
>
<Clock class="h-3 w-3 sm:h-4 sm:w-4" />
<span class="whitespace-nowrap font-mono"
>{formatRelativeTime(new Date(trade.timestamp))}</span
>
</div>
</div>
</div>
{/each}
</div>
{/if}
{/if}
</div>
</CardContent>
</Card>
</div>

240
website/src/routes/portfolio/+page.svelte
View file

@ -1,9 +1,10 @@
<script lang="ts">
import * as Card from '$lib/components/ui/card';
import * as Table from '$lib/components/ui/table';
import { Badge } from '$lib/components/ui/badge';
import { Button } from '$lib/components/ui/button';
import CoinIcon from '$lib/components/self/CoinIcon.svelte';
import DataTable from '$lib/components/self/DataTable.svelte';
import PortfolioSkeleton from '$lib/components/self/skeletons/PortfolioSkeleton.svelte';
import { getPublicUrl, formatPrice, formatValue, formatQuantity, formatDate } from '$lib/utils';
import { onMount } from 'svelte';
import { toast } from 'svelte-sonner';
@ -54,6 +55,110 @@
let totalPortfolioValue = $derived(portfolioData ? portfolioData.totalValue : 0);
let hasHoldings = $derived(portfolioData && portfolioData.coinHoldings.length > 0);
let hasTransactions = $derived(transactions.length > 0);
let holdingsColumns = $derived([
{
key: 'coin',
label: 'Coin',
class: 'w-[30%] min-w-[120px] md:w-[12%]',
render: (value: any, row: any) => ({
component: 'coin',
icon: row.icon,
symbol: row.symbol,
name: `*${row.symbol}`,
size: 6
})
},
{
key: 'quantity',
label: 'Quantity',
class: 'w-[20%] min-w-[80px] md:w-[12%] font-mono',
render: (value: any) => formatQuantity(value)
},
{
key: 'currentPrice',
label: 'Price',
class: 'w-[15%] min-w-[70px] md:w-[12%] font-mono',
render: (value: any) => `$${formatPrice(value)}`
},
{
key: 'change24h',
label: '24h Change',
class: 'w-[20%] min-w-[80px] md:w-[12%]',
render: (value: any) => ({
component: 'badge',
variant: value >= 0 ? 'success' : 'destructive',
text: `${value >= 0 ? '+' : ''}${value.toFixed(2)}%`
})
},
{
key: 'value',
label: 'Value',
class: 'w-[15%] min-w-[70px] md:w-[12%] font-mono font-medium',
render: (value: any) => formatValue(value)
},
{
key: 'portfolioPercent',
label: 'Portfolio %',
class: 'hidden md:table-cell md:w-[12%]',
render: (value: any, row: any) => ({
component: 'badge',
variant: 'outline',
text: `${((row.value / totalPortfolioValue) * 100).toFixed(1)}%`
})
}
]);
// Column configurations for transactions table
let transactionsColumns = $derived([
{
key: 'type',
label: 'Type',
class: 'w-[15%] min-w-[60px] md:w-[10%]',
render: (value: any) => ({
component: 'badge',
variant: value === 'BUY' ? 'success' : 'destructive',
text: value === 'BUY' ? 'Buy' : 'Sell',
class: 'text-xs'
})
},
{
key: 'coin',
label: 'Coin',
class: 'w-[30%] min-w-[100px] md:w-[20%]',
render: (value: any, row: any) => ({
component: 'coin',
icon: row.coin.icon,
symbol: row.coin.symbol,
name: `*${row.coin.symbol}`,
size: 4
})
},
{
key: 'quantity',
label: 'Quantity',
class: 'w-[20%] min-w-[80px] md:w-[15%] font-mono text-sm',
render: (value: any) => formatQuantity(value)
},
{
key: 'pricePerCoin',
label: 'Price',
class: 'w-[15%] min-w-[70px] md:w-[15%] font-mono text-sm',
render: (value: any) => `$${formatPrice(value)}`
},
{
key: 'totalBaseCurrencyAmount',
label: 'Total',
class: 'w-[20%] min-w-[70px] md:w-[15%] font-mono text-sm font-medium',
render: (value: any) => formatValue(value)
},
{
key: 'timestamp',
label: 'Date',
class: 'hidden md:table-cell md:w-[25%] text-muted-foreground text-sm',
render: (value: any) => formatDate(value)
}
]);
</script>
<svelte:head>
@ -69,11 +174,7 @@
</header>
{#if loading}
<div class="flex h-96 items-center justify-center">
<div class="text-center">
<div class="mb-4 text-xl">Loading portfolio...</div>
</div>
</div>
<PortfolioSkeleton />
{:else if !portfolioData}
<div class="flex h-96 items-center justify-center">
<div class="text-center">
@ -160,52 +261,11 @@
<Card.Description>Current positions in your portfolio</Card.Description>
</Card.Header>
<Card.Content>
<Table.Root>
<Table.Header>
<Table.Row>
<Table.Head>Coin</Table.Head>
<Table.Head>Quantity</Table.Head>
<Table.Head>Price</Table.Head>
<Table.Head>24h Change</Table.Head>
<Table.Head>Value</Table.Head>
<Table.Head class="hidden md:table-cell">Portfolio %</Table.Head>
</Table.Row>
</Table.Header>
<Table.Body>
{#each portfolioData.coinHoldings as holding}
<Table.Row
class="hover:bg-muted/50 cursor-pointer transition-colors"
onclick={() => goto(`/coin/${holding.symbol}`)}
>
<Table.Cell class="font-medium">
<div class="flex items-center gap-2">
<CoinIcon icon={holding.icon} symbol={holding.symbol} size={6} />
<span>*{holding.symbol}</span>
</div>
</Table.Cell>
<Table.Cell class="font-mono">
{formatQuantity(holding.quantity)}
</Table.Cell>
<Table.Cell class="font-mono">
${formatPrice(holding.currentPrice)}
</Table.Cell>
<Table.Cell>
<Badge variant={holding.change24h >= 0 ? 'success' : 'destructive'}>
{holding.change24h >= 0 ? '+' : ''}{holding.change24h.toFixed(2)}%
</Badge>
</Table.Cell>
<Table.Cell class="font-mono font-medium">
{formatValue(holding.value)}
</Table.Cell>
<Table.Cell class="hidden md:table-cell">
<Badge variant="outline">
{((holding.value / totalPortfolioValue) * 100).toFixed(1)}%
</Badge>
</Table.Cell>
</Table.Row>
{/each}
</Table.Body>
</Table.Root>
<DataTable
columns={holdingsColumns}
data={portfolioData.coinHoldings}
onRowClick={(holding) => goto(`/coin/${holding.symbol}`)}
/>
</Card.Content>
</Card.Root>
{/if}
@ -229,74 +289,14 @@
</div>
</Card.Header>
<Card.Content>
{#if !hasTransactions}
<div class="py-8 text-center">
<div
class="bg-muted mx-auto mb-4 flex h-12 w-12 items-center justify-center rounded-full"
>
<Receipt class="text-muted-foreground h-6 w-6" />
</div>
<h3 class="mb-2 text-lg font-semibold">No transactions yet</h3>
<p class="text-muted-foreground mb-4">
You haven't made any trades yet. Start by buying or selling coins.
</p>
<Button variant="outline" onclick={() => goto('/')}>Browse Coins</Button>
</div>
{:else}
<Table.Root>
<Table.Header>
<Table.Row>
<Table.Head>Type</Table.Head>
<Table.Head>Coin</Table.Head>
<Table.Head>Quantity</Table.Head>
<Table.Head>Price</Table.Head>
<Table.Head>Total</Table.Head>
<Table.Head class="hidden md:table-cell">Date</Table.Head>
</Table.Row>
</Table.Header>
<Table.Body>
{#each transactions as tx}
<Table.Row
class="hover:bg-muted/50 cursor-pointer transition-colors"
onclick={() => goto(`/coin/${tx.coin.symbol}`)}
>
<Table.Cell>
<div class="flex items-center gap-2">
{#if tx.type === 'BUY'}
<TrendingUp class="h-4 w-4 text-green-500" />
<Badge variant="success" class="text-xs">Buy</Badge>
{:else}
<TrendingDown class="h-4 w-4 text-red-500" />
<Badge variant="destructive" class="text-xs">Sell</Badge>
{/if}
</div>
</Table.Cell>
<Table.Cell class="font-medium">
<div class="flex items-center gap-2">
<CoinIcon icon={tx.coin.icon} symbol={tx.coin.symbol} size={4} />
<span>*{tx.coin.symbol}</span>
</div>
</Table.Cell>
<Table.Cell class="font-mono text-sm">
{formatQuantity(tx.quantity)}
</Table.Cell>
<Table.Cell class="font-mono text-sm">
${formatPrice(tx.pricePerCoin)}
</Table.Cell>
<Table.Cell class="font-mono text-sm font-medium">
{formatValue(tx.totalBaseCurrencyAmount)}
</Table.Cell>
<Table.Cell class="text-muted-foreground hidden text-sm md:table-cell">
<div class="flex items-center gap-1">
<Clock class="h-3 w-3" />
{formatDate(tx.timestamp)}
</div>
</Table.Cell>
</Table.Row>
{/each}
</Table.Body>
</Table.Root>
{/if}
<DataTable
columns={transactionsColumns}
data={transactions}
onRowClick={(tx) => goto(`/coin/${tx.coin.symbol}`)}
emptyIcon={Receipt}
emptyTitle="No transactions yet"
emptyDescription="You haven't made any trades yet. Start by buying or selling coins."
/>
</Card.Content>
</Card.Root>
{/if}