feat: add Top Holders

website/bun.lock

@@ -26,6 +26,7 @@
         "svelte-lightweight-charts": "^2.2.0",
       },
       "devDependencies": {
+        "@internationalized/date": "^3.8.1",
         "@lucide/svelte": "^0.482.0",
         "@sveltejs/adapter-auto": "^3.0.0",
         "@sveltejs/kit": "^2.0.0",
@@ -33,7 +34,7 @@
         "@types/canvas-confetti": "^1.9.0",
         "@types/node": "^22.15.21",
         "autoprefixer": "^10.4.20",
-        "bits-ui": "^2.1.0",
+        "bits-ui": "^2.5.0",
         "clsx": "^2.1.1",
         "drizzle-kit": "^0.22.0",
         "prettier": "^3.3.2",
@@ -515,7 +516,7 @@
 
     "better-call": ["better-call@1.0.9", "", { "dependencies": { "@better-fetch/fetch": "^1.1.4", "rou3": "^0.5.1", "set-cookie-parser": "^2.7.1", "uncrypto": "^0.1.3" } }, "sha512-Qfm0gjk0XQz0oI7qvTK1hbqTsBY4xV2hsHAxF8LZfUYl3RaECCIifXuVqtPpZJWvlCCMlQSvkvhhyuApGUba6g=="],
 
-    "bits-ui": ["bits-ui@2.2.0", "", { "dependencies": { "@floating-ui/core": "^1.7.0", "@floating-ui/dom": "^1.7.0", "css.escape": "^1.5.1", "esm-env": "^1.1.2", "runed": "^0.28.0", "svelte-toolbelt": "^0.9.1", "tabbable": "^6.2.0" }, "peerDependencies": { "@internationalized/date": "^3.8.1", "svelte": "^5.33.0" } }, "sha512-Jo3PIWpMMAeT4rs5f3X3S5Qdu1MWyjz3YV5DhTJRtLI3UZn8A5YkZyHbIaPsAkKIxjLMNAqAa2FAMfDJ8DdXjw=="],
+    "bits-ui": ["bits-ui@2.5.0", "", { "dependencies": { "@floating-ui/core": "^1.7.0", "@floating-ui/dom": "^1.7.0", "css.escape": "^1.5.1", "esm-env": "^1.1.2", "runed": "^0.28.0", "svelte-toolbelt": "^0.9.1", "tabbable": "^6.2.0" }, "peerDependencies": { "@internationalized/date": "^3.8.1", "svelte": "^5.33.0" } }, "sha512-PbjylA1UWd4A/c5AYqie/EVxQ1/8uugmJKLg9whLoBBHbfPEBGhK09dCPrahK9kA6DRHhMmij0XXIUGIfrmNow=="],
 
     "body-parser": ["body-parser@2.2.0", "", { "dependencies": { "bytes": "^3.1.2", "content-type": "^1.0.5", "debug": "^4.4.0", "http-errors": "^2.0.0", "iconv-lite": "^0.6.3", "on-finished": "^2.4.1", "qs": "^6.14.0", "raw-body": "^3.0.0", "type-is": "^2.0.0" } }, "sha512-02qvAaxv8tp7fBa/mw1ga98OGm+eCbqzJOKoRt70sLmfEEi+jyBYVTDGfCL/k06/4EMk/z01gCe7HoCH/f2LTg=="],
 

website/components.json

@@ -1,5 +1,5 @@
 {
-	"$schema": "https://next.shadcn-svelte.com/schema.json",
+	"$schema": "https://shadcn-svelte.com/schema.json",
 	"tailwind": {
 		"css": "src\\app.css",
 		"baseColor": "slate"
@@ -12,5 +12,5 @@
 		"lib": "$lib"
 	},
 	"typescript": true,
-	"registry": "https://next.shadcn-svelte.com/registry"
+	"registry": "https://shadcn-svelte.com/registry"
 }

website/package.json

@@ -16,6 +16,7 @@
 		"db:studio": "drizzle-kit studio"
 	},
 	"devDependencies": {
+		"@internationalized/date": "^3.8.1",
 		"@lucide/svelte": "^0.482.0",
 		"@sveltejs/adapter-auto": "^3.0.0",
 		"@sveltejs/kit": "^2.0.0",
@@ -23,7 +24,7 @@
 		"@types/canvas-confetti": "^1.9.0",
 		"@types/node": "^22.15.21",
 		"autoprefixer": "^10.4.20",
-		"bits-ui": "^2.1.0",
+		"bits-ui": "^2.5.0",
 		"clsx": "^2.1.1",
 		"drizzle-kit": "^0.22.0",
 		"prettier": "^3.3.2",

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

@@ -0,0 +1,230 @@
+<script lang="ts">
+	import * as Card from '$lib/components/ui/card';
+	import * as Dialog from '$lib/components/ui/dialog';
+	import * as Avatar from '$lib/components/ui/avatar';
+	import * as HoverCard from '$lib/components/ui/hover-card';
+	import { ScrollArea } from '$lib/components/ui/scroll-area/index.js';
+	import { Badge } from '$lib/components/ui/badge';
+	import { Skeleton } from '$lib/components/ui/skeleton';
+	import { Users } from 'lucide-svelte';
+	import { goto } from '$app/navigation';
+	import { toast } from 'svelte-sonner';
+	import { getPublicUrl, formatQuantity, formatValue } from '$lib/utils';
+	import UserProfilePreview from './UserProfilePreview.svelte';
+	import DataTable from './DataTable.svelte';
+	import HoldersSkeleton from './skeletons/HoldersSkeleton.svelte';
+
+	interface Holder {
+		rank: number;
+		userId: number;
+		username: string;
+		name: string;
+		image: string | null;
+		quantity: number;
+		percentage: number;
+		liquidationValue: number;
+	}
+
+	interface HoldersData {
+		coinSymbol: string;
+		totalHolders: number;
+		circulatingSupply: number;
+		poolInfo: {
+			coinAmount: number;
+			baseCurrencyAmount: number;
+			currentPrice: number;
+		};
+		holders: Holder[];
+	}
+
+	let { coinSymbol } = $props<{ coinSymbol: string }>();
+
+	let loading = $state(true);
+	let holdersData = $state<HoldersData | null>(null);
+	let modalOpen = $state(false);
+
+	async function fetchHolders() {
+		try {
+			const response = await fetch(`/api/coin/${coinSymbol}/holders?limit=50`);
+
+			if (!response.ok) {
+				if (response.status === 404) {
+					return;
+				}
+				throw new Error('Failed to fetch holders');
+			}
+
+			const result = await response.json();
+			holdersData = result;
+		} catch (e) {
+			console.error('Failed to fetch holders:', e);
+			toast.error('Failed to load top holders');
+		} finally {
+			loading = false;
+		}
+	}
+
+	$effect(() => {
+		if (coinSymbol) {
+			loading = true;
+			holdersData = null;
+			fetchHolders();
+		}
+	});
+
+	let holdersColumns = $derived([
+		{
+			key: 'rank',
+			label: 'Rank',
+			class: 'w-[10%] min-w-[60px]',
+			render: (value: any) => `#${value}`
+		},
+		{
+			key: 'user',
+			label: 'User',
+			class: 'w-[35%] min-w-[150px]',
+			render: (value: any, row: any) => ({
+				component: 'user',
+				image: row.image,
+				name: row.name || 'Anonymous',
+				username: row.username
+			})
+		},
+		{
+			key: 'quantity',
+			label: 'Quantity',
+			class: 'w-[20%] min-w-[100px] font-mono',
+			sortable: false,
+			render: (value: any) => formatQuantity(value)
+		},
+		{
+			key: 'percentage',
+			label: '%',
+			class: 'w-[12%] min-w-[70px]',
+			sortable: false,
+			render: (value: any) => ({
+				component: 'badge',
+				variant: 'secondary',
+				text: `${value.toFixed(1)}%`
+			})
+		},
+		{
+			key: 'liquidationValue',
+			label: 'Value',
+			class: 'w-[23%] min-w-[90px] font-mono font-medium',
+			sortable: true,
+			defaultSort: 'desc' as const,
+			render: (value: any) => formatValue(value)
+		}
+	]);
+</script>
+
+<Card.Root
+	class="gap-2 {holdersData && holdersData.holders.length > 3
+		? 'hover:bg-card/90 cursor-pointer transition-colors'
+		: ''}"
+	onclick={() => holdersData && holdersData.holders.length > 3 && (modalOpen = true)}
+>
+	<Card.Header>
+		<Card.Title class="flex items-center gap-2">Top Holders</Card.Title>
+	</Card.Header>
+	<Card.Content class="relative">
+		{#if loading}
+            <HoldersSkeleton />
+		{:else if !holdersData || holdersData.holders.length === 0}
+			<div class="py-4 text-center">
+				<Users class="text-muted-foreground mx-auto mb-2 h-8 w-8" />
+				<p class="text-muted-foreground text-sm">No holders found</p>
+			</div>
+		{:else}
+			<div class="space-y-3">
+				{#each holdersData.holders.slice(0, 3) as holder}
+					<div class="flex items-center gap-2">
+						<div
+							class="flex min-w-0 flex-1 cursor-pointer items-center gap-3 border-none bg-transparent p-0 text-left"
+						>
+							<Avatar.Root class="h-8 w-8 flex-shrink-0">
+								<Avatar.Image
+									src={getPublicUrl(holder.image)}
+									alt={holder.name || holder.username}
+								/>
+								<Avatar.Fallback class="text-xs">
+									{(holder.name || holder.username).charAt(0)}
+								</Avatar.Fallback>
+							</Avatar.Root>
+							<div class="min-w-0 flex-1">
+								<p class="truncate text-sm font-medium">
+									{holder.name || 'Anonymous'}
+								</p>
+								<p class="text-muted-foreground truncate text-xs">
+									@{holder.username}
+								</p>
+							</div>
+						</div>
+
+						<div class="flex flex-shrink-0 items-center gap-1.5 text-right">
+							<div class="hidden sm:block">
+								<Badge variant="secondary" class="text-xs">
+									{holder.percentage.toFixed(1)}%
+								</Badge>
+							</div>
+							<div class="flex flex-col items-end gap-0.5">
+								<p class="text-muted-foreground font-mono text-xs">
+									{formatQuantity(holder.quantity)}
+								</p>
+								<p class="text-muted-foreground/80 font-mono text-xs font-medium">
+									{formatValue(holder.liquidationValue)}
+								</p>
+							</div>
+						</div>
+					</div>
+				{/each}
+			</div>
+		{/if}
+
+		{#if holdersData && holdersData.holders.length > 3}
+			<div
+				class="from-card/80 pointer-events-none absolute inset-0 bg-gradient-to-t via-transparent to-transparent"
+			></div>
+		{/if}
+	</Card.Content>
+</Card.Root>
+
+<Dialog.Root bind:open={modalOpen}>
+	<Dialog.Content
+		class="flex max-h-[90vh] w-full max-w-[calc(100%-2rem)] flex-col sm:max-w-[800px] md:max-w-2xl"
+	>
+		<Dialog.Header class="flex-shrink-0">
+			<Dialog.Title class="flex items-center gap-2">
+				<Users class="h-5 w-5" />
+				Top Holders (*{holdersData?.coinSymbol})
+			</Dialog.Title>
+			<Dialog.Description>This list is limited to the top 50 holders.</Dialog.Description>
+		</Dialog.Header>
+
+		<div class="min-h-0 flex-1">
+			{#if holdersData && holdersData.holders.length > 0}
+				<ScrollArea class="h-[600px] rounded-md border">
+					<div class="bg-card p-2">
+						<DataTable
+							columns={holdersColumns}
+							data={holdersData.holders}
+							onRowClick={(holder) => goto(`/user/${holder.username}`)}
+							enableUserPreview={true}
+							emptyTitle="No holders found"
+							emptyDescription="This coin doesn't have any holders yet."
+						/>
+					</div>
+				</ScrollArea>
+			{:else}
+				<div class="flex h-full items-center justify-center py-12 text-center">
+					<div>
+						<Users class="text-muted-foreground mx-auto mb-4 h-12 w-12" />
+						<h3 class="mb-2 text-lg font-semibold">No holders found</h3>
+						<p class="text-muted-foreground">This coin doesn't have any holders yet.</p>
+					</div>
+				</div>
+			{/if}
+		</div>
+	</Dialog.Content>
+</Dialog.Root>

website/src/lib/components/self/skeletons/CoinSkeleton.svelte

@@ -1,32 +1,30 @@
 <script lang="ts">
 	import * as Card from '$lib/components/ui/card';
 	import { Skeleton } from '$lib/components/ui/skeleton';
+	import HoldersSkeleton from './HoldersSkeleton.svelte';
 </script>
 
 <header class="mb-8">
-	<div class="mb-4 flex flex-col gap-4 sm:flex-row sm:items-start sm:justify-between">
+	<div class="mb-4 flex flex-col gap-5 sm:flex-row sm:items-start sm:justify-between">
 		<div class="flex items-center gap-3 sm:gap-4">
 			<Skeleton class="h-12 w-12 rounded-lg sm:h-16 sm:w-16" />
 			<div class="min-w-0 flex-1">
 				<Skeleton class="mb-2 h-6 w-40 sm:h-10 sm:w-48" />
 				<div class="mt-1 flex flex-wrap items-center gap-2">
-					<Skeleton class="h-5 w-12 sm:h-6 sm:w-16" />
+					<Skeleton class="h-5 w-12 sm:h-6 sm:w-24" />
-					<Skeleton class="h-5 w-16 sm:h-6 sm:w-20" />
-					<Skeleton class="h-5 w-14" />
 				</div>
 			</div>
 		</div>
 		<div class="flex flex-col items-start gap-2 sm:items-end sm:text-right">
 			<Skeleton class="h-6 w-28 sm:h-8 sm:w-32" />
 			<div class="flex items-center gap-2">
-				<Skeleton class="h-4 w-4" />
+				<Skeleton class="h-5 w-12 sm:h-6 sm:w-24" />
-				<Skeleton class="h-5 w-12 sm:h-6 sm:w-16" />
 			</div>
 		</div>
 	</div>
 
 	<!-- Creator Info Skeleton -->
-	<div class="text-muted-foreground flex flex-wrap items-center gap-2 text-sm">
+	<div class="text-muted-foreground mt-6 flex flex-wrap items-center gap-2 text-sm">
 		<Skeleton class="h-4 w-20" />
 		<Skeleton class="h-4 w-4 rounded-full" />
 		<Skeleton class="h-4 w-40" />
@@ -38,7 +36,7 @@
 	<div class="grid grid-cols-1 gap-6 lg:grid-cols-3">
 		<!-- Chart (2/3 width) -->
 		<div class="lg:col-span-2">
-			<Card.Root>
+			<Card.Root class="flex h-full flex-col">
 				<Card.Header class="pb-4">
 					<div class="flex items-center justify-between">
 						<Card.Title class="flex items-center gap-2">
@@ -50,23 +48,22 @@
 						</div>
 					</div>
 				</Card.Header>
-				<Card.Content class="pt-0">
+				<Card.Content class="flex-1 pt-0">
-					<Skeleton class="h-[500px] w-full" />
+					<Skeleton class="h-full min-h-[500px] w-full" />
 				</Card.Content>
 			</Card.Root>
 		</div>
 
-		<!-- Right side - Trading Actions + Liquidity Pool (1/3 width) -->
+		<!-- Right side - Trading Actions + Liquidity Pool + Top Holders (1/3 width) -->
 		<div class="space-y-6 lg:col-span-1">
 			<!-- Trading Actions Skeleton -->
-			<Card.Root>
+			<Card.Root class="gap-3">
-				<Card.Header class="pb-4">
+				<Card.Header>
 					<Card.Title>
 						<Skeleton class="h-6 w-24" />
 					</Card.Title>
-					<Skeleton class="h-4 w-32" />
 				</Card.Header>
-				<Card.Content class="pt-0">
+				<Card.Content>
 					<div class="space-y-3">
 						<Skeleton class="h-11 w-full" />
 						<Skeleton class="h-11 w-full" />
@@ -76,16 +73,11 @@
 
 			<!-- Liquidity Pool Skeleton -->
 			<Card.Root>
-				<Card.Header class="pb-4">
+				<Card.Content>
-					<Card.Title>
+					<div class="space-y-5">
-						<Skeleton class="h-6 w-28" />
-					</Card.Title>
-				</Card.Header>
-				<Card.Content class="pt-0">
-					<div class="space-y-4">
 						<div>
 							<Skeleton class="mb-3 h-5 w-32" />
-							<div class="space-y-2">
+							<div class="mt-4 space-y-3">
 								<div class="flex justify-between">
 									<Skeleton class="h-4 w-16" />
 									<Skeleton class="h-4 w-20" />
@@ -98,7 +90,7 @@
 						</div>
 						<div>
 							<Skeleton class="mb-3 h-5 w-20" />
-							<div class="space-y-2">
+							<div class="mt-4 space-y-3">
 								<div class="flex justify-between">
 									<Skeleton class="h-4 w-24" />
 									<Skeleton class="h-4 w-20" />
@@ -112,20 +104,30 @@
 					</div>
 				</Card.Content>
 			</Card.Root>
+
+			<!-- Top Holders Section Skeleton -->
+			<Card.Root class="gap-2">
+				<Card.Header>
+					<Card.Title class="flex items-center gap-2">Top Holders</Card.Title>
+				</Card.Header>
+				<Card.Content class="relative">
+					<HoldersSkeleton />
+				</Card.Content>
+			</Card.Root>
 		</div>
 	</div>
 
 	<!-- Statistics Grid Skeleton -->
 	<div class="grid grid-cols-1 gap-4 md:grid-cols-2 lg:grid-cols-4">
 		{#each Array(4) as _}
-			<Card.Root>
+			<Card.Root class="gap-1">
-				<Card.Header class="pb-2">
+				<Card.Header>
 					<Card.Title class="flex items-center gap-2 text-sm font-medium">
 						<Skeleton class="h-4 w-4" />
 						<Skeleton class="h-4 w-20" />
 					</Card.Title>
 				</Card.Header>
-				<Card.Content class="pt-0">
+				<Card.Content>
 					<Skeleton class="mb-1 h-6 w-24" />
 					<Skeleton class="h-3 w-16" />
 				</Card.Content>
@@ -135,13 +137,13 @@
 
 	<!-- Comments Section Skeleton -->
 	<Card.Root>
-		<Card.Header class="pb-4">
+		<Card.Header>
 			<Card.Title class="flex items-center gap-2">
 				<Skeleton class="h-5 w-5" />
 				<Skeleton class="h-6 w-20" />
 			</Card.Title>
 		</Card.Header>
-		<Card.Content class="pt-0">
+		<Card.Content>
 			<div class="space-y-4">
 				{#each Array(3) as _}
 					<div class="flex gap-3 border-b pb-4 last:border-b-0">

website/src/lib/components/self/skeletons/HoldersSkeleton.svelte

@@ -0,0 +1,27 @@
+<script lang="ts">
+	import { Skeleton } from '$lib/components/ui/skeleton';
+</script>
+
+<div class="space-y-4">
+	{#each Array(3) as _}
+		<div class="flex items-center gap-2">
+			<div class="flex min-w-0 flex-1 items-center gap-3">
+				<Skeleton class="h-8 w-8 flex-shrink-0 rounded-full" />
+				<div class="min-w-0 flex-1 space-y-1">
+					<Skeleton class="h-4 w-24" />
+					<Skeleton class="h-3 w-16" />
+				</div>
+			</div>
+
+			<div class="flex flex-shrink-0 items-center gap-1.5">
+				<div class="hidden sm:block">
+					<Skeleton class="h-5 w-12 rounded-full" />
+				</div>
+				<div class="flex flex-col items-end gap-0.5">
+					<Skeleton class="h-3 w-16" />
+					<Skeleton class="h-3 w-12" />
+				</div>
+			</div>
+		</div>
+	{/each}
+</div>

website/src/lib/components/ui/scroll-area/index.ts

@@ -0,0 +1,10 @@
+import Scrollbar from "./scroll-area-scrollbar.svelte";
+import Root from "./scroll-area.svelte";
+
+export {
+	Root,
+	Scrollbar,
+	//,
+	Root as ScrollArea,
+	Scrollbar as ScrollAreaScrollbar,
+};

website/src/lib/components/ui/scroll-area/scroll-area-scrollbar.svelte

@@ -0,0 +1,31 @@
+<script lang="ts">
+	import { ScrollArea as ScrollAreaPrimitive } from "bits-ui";
+	import { cn, type WithoutChild } from "$lib/utils.js";
+
+	let {
+		ref = $bindable(null),
+		class: className,
+		orientation = "vertical",
+		children,
+		...restProps
+	}: WithoutChild<ScrollAreaPrimitive.ScrollbarProps> = $props();
+</script>
+
+<ScrollAreaPrimitive.Scrollbar
+	bind:ref
+	data-slot="scroll-area-scrollbar"
+	{orientation}
+	class={cn(
+		"flex touch-none select-none p-px transition-colors",
+		orientation === "vertical" && "h-full w-2.5 border-l border-l-transparent",
+		orientation === "horizontal" && "h-2.5 flex-col border-t border-t-transparent",
+		className
+	)}
+	{...restProps}
+>
+	{@render children?.()}
+	<ScrollAreaPrimitive.Thumb
+		data-slot="scroll-area-thumb"
+		class="bg-border relative flex-1 rounded-full"
+	/>
+</ScrollAreaPrimitive.Scrollbar>

website/src/lib/components/ui/scroll-area/scroll-area.svelte

@@ -0,0 +1,40 @@
+<script lang="ts">
+	import { ScrollArea as ScrollAreaPrimitive } from "bits-ui";
+	import { Scrollbar } from "./index.js";
+	import { cn, type WithoutChild } from "$lib/utils.js";
+
+	let {
+		ref = $bindable(null),
+		class: className,
+		orientation = "vertical",
+		scrollbarXClasses = "",
+		scrollbarYClasses = "",
+		children,
+		...restProps
+	}: WithoutChild<ScrollAreaPrimitive.RootProps> & {
+		orientation?: "vertical" | "horizontal" | "both" | undefined;
+		scrollbarXClasses?: string | undefined;
+		scrollbarYClasses?: string | undefined;
+	} = $props();
+</script>
+
+<ScrollAreaPrimitive.Root
+	bind:ref
+	data-slot="scroll-area"
+	class={cn("relative", className)}
+	{...restProps}
+>
+	<ScrollAreaPrimitive.Viewport
+		data-slot="scroll-area-viewport"
+		class="ring-ring/10 dark:ring-ring/20 dark:outline-ring/40 outline-ring/50 size-full rounded-[inherit] transition-[color,box-shadow] focus-visible:outline-1 focus-visible:ring-4"
+	>
+		{@render children?.()}
+	</ScrollAreaPrimitive.Viewport>
+	{#if orientation === "vertical" || orientation === "both"}
+		<Scrollbar orientation="vertical" class={scrollbarYClasses} />
+	{/if}
+	{#if orientation === "horizontal" || orientation === "both"}
+		<Scrollbar orientation="horizontal" class={scrollbarXClasses} />
+	{/if}
+	<ScrollAreaPrimitive.Corner />
+</ScrollAreaPrimitive.Root>

website/src/lib/stores/websocket.ts

@@ -52,7 +52,7 @@ const commentSubscriptions = new Map<string, (message: any) => void>();
 // Price update callbacks
 const priceUpdateSubscriptions = new Map<string, (priceUpdate: PriceUpdate) => void>();
 
-async function loadInitialTrades(): Promise<void> {
+export async function loadInitialTrades(mode: 'preview' | 'expanded' = 'preview'): Promise<void> {
     if (!browser) return;
 
     if (!hasLoadedInitialTrades) {
@@ -60,20 +60,26 @@ async function loadInitialTrades(): Promise<void> {
     }
 
     try {
-        const [largeTradesResponse, allTradesResponse] = await Promise.all([
+        const params = new URLSearchParams();
-            fetch('/api/trades/recent?limit=5&minValue=1000'),
-            fetch('/api/trades/recent?limit=100')
-        ]);
 
-        if (largeTradesResponse.ok) {
+        if (mode === 'preview') {
-            const { trades } = await largeTradesResponse.json();
+            params.set('limit', '5');
-            liveTradesStore.set(trades);
+            params.set('minValue', '1000');
+        } else {
+            params.set('limit', '100');
         }
 
-        if (allTradesResponse.ok) {
+        const response = await fetch(`/api/trades/recent?${params.toString()}`);
-            const { trades } = await allTradesResponse.json();
+
+        if (response.ok) {
+            const { trades } = await response.json();
+
+            if (mode === 'preview') {
+                liveTradesStore.set(trades);
+            } else {
                 allTradesStore.set(trades);
             }
+        }
 
         hasLoadedInitialTrades = true;
     } catch (error) {

website/src/routes/api/coin/[coinSymbol]/holders/+server.ts

@@ -0,0 +1,107 @@
+import { error, json } from '@sveltejs/kit';
+import { db } from '$lib/server/db';
+import { coin, userPortfolio, user } from '$lib/server/db/schema';
+import { eq, desc } from 'drizzle-orm';
+import { validateSearchParams } from '$lib/utils/validation';
+
+function calculateLiquidationValue(tokensToSell: number, poolCoinAmount: number, poolBaseCurrencyAmount: number): number {
+    if (tokensToSell <= 0 || poolCoinAmount <= 0 || poolBaseCurrencyAmount <= 0) {
+        return 0;
+    }
+
+    const maxSellable = poolCoinAmount * 0.995;
+    const actualTokensToSell = Math.min(tokensToSell, maxSellable);
+    const k = poolCoinAmount * poolBaseCurrencyAmount;
+    const newPoolCoin = poolCoinAmount + actualTokensToSell;
+    const newPoolBaseCurrency = k / newPoolCoin;
+    const baseCurrencyReceived = poolBaseCurrencyAmount - newPoolBaseCurrency;
+
+    return Math.max(0, baseCurrencyReceived);
+}
+
+export async function GET({ params, url }) {
+    const coinSymbol = params.coinSymbol?.toUpperCase();
+    const validator = validateSearchParams(url.searchParams);
+    const limit = validator.getPositiveInt('limit', 50);
+
+    if (!coinSymbol) {
+        throw error(400, 'Coin symbol is required');
+    }
+
+    if (limit > 200) {
+        throw error(400, 'Limit cannot exceed 200');
+    }
+
+    try {
+        const [coinData] = await db
+            .select({
+                id: coin.id,
+                symbol: coin.symbol,
+                circulatingSupply: coin.circulatingSupply,
+                poolCoinAmount: coin.poolCoinAmount,
+                poolBaseCurrencyAmount: coin.poolBaseCurrencyAmount,
+                currentPrice: coin.currentPrice
+            })
+            .from(coin)
+            .where(eq(coin.symbol, coinSymbol))
+            .limit(1);
+
+        if (!coinData) {
+            throw error(404, 'Coin not found');
+        }
+
+        const holders = await db
+            .select({
+                userId: user.id,
+                username: user.username,
+                name: user.name,
+                image: user.image,
+                quantity: userPortfolio.quantity
+            })
+            .from(userPortfolio)
+            .innerJoin(user, eq(userPortfolio.userId, user.id))
+            .where(eq(userPortfolio.coinId, coinData.id))
+            .orderBy(desc(userPortfolio.quantity))
+            .limit(limit);
+
+        const totalCirculating = Number(coinData.circulatingSupply);
+        const poolCoinAmount = Number(coinData.poolCoinAmount);
+        const poolBaseCurrencyAmount = Number(coinData.poolBaseCurrencyAmount);
+
+        const processedHolders = holders.map((holder, index) => {
+            const quantity = Number(holder.quantity);
+            const percentage = totalCirculating > 0 ? (quantity / totalCirculating) * 100 : 0;
+            const liquidationValue = calculateLiquidationValue(quantity, poolCoinAmount, poolBaseCurrencyAmount);
+
+            return {
+                rank: index + 1,
+                userId: holder.userId,
+                username: holder.username,
+                name: holder.name,
+                image: holder.image,
+                quantity,
+                percentage,
+                liquidationValue
+            };
+        });
+
+        return json({
+            coinSymbol: coinData.symbol,
+            totalHolders: holders.length,
+            circulatingSupply: totalCirculating,
+            poolInfo: {
+                coinAmount: poolCoinAmount,
+                baseCurrencyAmount: poolBaseCurrencyAmount,
+                currentPrice: Number(coinData.currentPrice)
+            },
+            holders: processedHolders
+        });
+
+    } catch (e) {
+        if (e && typeof e === 'object' && 'status' in e) {
+            throw e;
+        }
+        console.error('Unexpected error in holders API:', e);
+        throw error(500, 'Internal server error');
+    }
+}

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

@@ -9,6 +9,7 @@
 	import CommentSection from '$lib/components/self/CommentSection.svelte';
 	import UserProfilePreview from '$lib/components/self/UserProfilePreview.svelte';
 	import CoinSkeleton from '$lib/components/self/skeletons/CoinSkeleton.svelte';
+	import TopHolders from '$lib/components/self/TopHolders.svelte';
 	import { TrendingUp, TrendingDown, DollarSign, Coins, ChartColumn } from 'lucide-svelte';
 	import {
 		createChart,
@@ -469,7 +470,7 @@
 			<div class="grid grid-cols-1 gap-6 lg:grid-cols-3">
 				<!-- Chart (2/3 width) -->
 				<div class="lg:col-span-2">
-					<Card.Root>
+					<Card.Root class="flex h-full flex-col">
 						<Card.Header class="pb-4">
 							<div class="flex items-center justify-between">
 								<Card.Title class="flex items-center gap-2">
@@ -499,23 +500,23 @@
 								</div>
 							</div>
 						</Card.Header>
-						<Card.Content class="pt-0">
+						<Card.Content class="flex-1 pt-0">
 							{#if chartData.length === 0}
-								<div class="flex h-[500px] items-center justify-center">
+								<div class="flex h-full min-h-[500px] items-center justify-center">
 									<p class="text-muted-foreground">No trading data available yet</p>
 								</div>
 							{:else}
-								<div class="h-[500px] w-full" bind:this={chartContainer}></div>
+								<div class="h-full min-h-[500px] w-full" bind:this={chartContainer}></div>
 							{/if}
 						</Card.Content>
 					</Card.Root>
 				</div>
 
-				<!-- Right side - Trading Actions + Liquidity Pool (1/3 width) -->
+				<!-- Right side - Trading Actions + Liquidity Pool + Top Holders (1/3 width) -->
 				<div class="space-y-6 lg:col-span-1">
 					<!-- Trading Actions -->
 					<Card.Root>
-						<Card.Header class="pb-4">
+						<Card.Header>
 							<Card.Title>Trade {coin.symbol}</Card.Title>
 							{#if userHolding > 0}
 								<p class="text-muted-foreground text-sm">
@@ -524,7 +525,7 @@
 								</p>
 							{/if}
 						</Card.Header>
-						<Card.Content class="pt-0">
+						<Card.Content>
 							{#if $USER_DATA}
 								<div class="space-y-3">
 									<Button
@@ -558,10 +559,7 @@
 					</Card.Root>
 					<!-- Liquidity Pool -->
 					<Card.Root>
-						<Card.Header class="pb-4">
+						<Card.Content>
-							<Card.Title class="flex items-center gap-2">Liquidity Pool</Card.Title>
-						</Card.Header>
-						<Card.Content class="pt-0">
 							<div class="space-y-4">
 								<div>
 									<h4 class="mb-3 font-medium">Pool Composition</h4>
@@ -598,6 +596,8 @@
 							</div>
 						</Card.Content>
 					</Card.Root>
+					<!-- Top Holders -->
+					<TopHolders coinSymbol={coin.symbol} />
 				</div>
 			</div>
 
@@ -611,7 +611,7 @@
 							Market Cap
 						</Card.Title>
 					</Card.Header>
-					<Card.Content class="pt-0">
+					<Card.Content>
 						<p class="text-xl font-bold">
 							{formatMarketCap(coin.marketCap)}
 						</p>
@@ -626,7 +626,7 @@
 							24h Volume
 						</Card.Title>
 					</Card.Header>
-					<Card.Content class="pt-0">
+					<Card.Content>
 						<p class="text-xl font-bold">
 							{formatMarketCap(coin.volume24h)}
 						</p>
@@ -641,7 +641,7 @@
 							Circulating Supply
 						</Card.Title>
 					</Card.Header>
-					<Card.Content class="pt-0">
+					<Card.Content>
 						<p class="text-xl font-bold">
 							{formatSupply(coin.circulatingSupply)}<span
 								class="text-muted-foreground ml-1 text-xs"
@@ -657,7 +657,7 @@
 					<Card.Header>
 						<Card.Title class="text-sm font-medium">24h Change</Card.Title>
 					</Card.Header>
-					<Card.Content class="pt-0">
+					<Card.Content>
 						<div class="flex items-center gap-2">
 							{#if coin.change24h >= 0}
 								<TrendingUp class="h-4 w-4 text-green-500" />

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

@@ -4,13 +4,14 @@
 	import * as Avatar from '$lib/components/ui/avatar';
 	import * as HoverCard from '$lib/components/ui/hover-card';
 	import { Activity, TrendingUp, TrendingDown, Clock } from 'lucide-svelte';
-	import { allTradesStore, isLoadingTrades } from '$lib/stores/websocket';
+	import { allTradesStore, isLoadingTrades, loadInitialTrades } 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';
 	import SEO from '$lib/components/self/SEO.svelte';
+	import { onMount } from 'svelte';
 
 	function handleUserClick(username: string) {
 		goto(`/user/${username}`);
@@ -19,6 +20,10 @@
 	function handleCoinClick(coinSymbol: string) {
 		goto(`/coin/${coinSymbol.toLowerCase()}`);
 	}
+
+	onMount(() => {
+		loadInitialTrades("expanded");
+	})
 </script>
 
 <SEO