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

2
website/src/lib/components/self/AppSidebar.svelte
View file

@ -364,7 +364,7 @@
<Settings /> <Settings />
Settings Settings
</DropdownMenu.Item> </DropdownMenu.Item>
<DropdownMenu.Item onclick={() => (showPromoCode = true)}> <DropdownMenu.Item onclick={() => { showPromoCode = true; setOpenMobile(false); }}>
<Gift /> <Gift />
Promo code Promo code
</DropdownMenu.Item> </DropdownMenu.Item>

10
website/src/lib/components/self/CommentSection.svelte
View file

@ -226,7 +226,7 @@
<div class="flex items-center gap-2"> <div class="flex items-center gap-2">
<HoverCard.Root> <HoverCard.Root>
<HoverCard.Trigger <HoverCard.Trigger
class="cursor-pointer font-medium underline-offset-4 hover:underline focus-visible:outline-2 focus-visible:outline-offset-8" class="cursor-pointer font-medium underline-offset-4 hover:underline focus-visible:outline-2 focus-visible:outline-offset-8 truncate max-w-[120px] sm:max-w-none text-sm sm:text-base"
onclick={() => goto(`/user/${comment.userUsername}`)} onclick={() => goto(`/user/${comment.userUsername}`)}
> >
{comment.userName} {comment.userName}
@ -237,13 +237,13 @@
</HoverCard.Root> </HoverCard.Root>
<button <button
onclick={() => goto(`/user/${comment.userUsername}`)} onclick={() => goto(`/user/${comment.userUsername}`)}
class="cursor-pointer" class="cursor-pointer flex-shrink-0 max-w-[80px] sm:max-w-none"
> >
<Badge variant="outline" class="text-xs"> <Badge variant="outline" class="text-xs w-full justify-start">
@{comment.userUsername} <span class="truncate">@{comment.userUsername}</span>
</Badge> </Badge>
</button> </button>
<span class="text-muted-foreground text-xs"> <span class="text-muted-foreground whitespace-nowrap text-xs flex-shrink-0">
{formatTimeAgo(comment.createdAt)} {formatTimeAgo(comment.createdAt)}
</span> </span>
</div> </div>

12
website/src/lib/components/self/DataTable.svelte
View file

@ -51,7 +51,7 @@
<Table.Header> <Table.Header>
<Table.Row> <Table.Row>
{#each columns as column} {#each columns as column}
<Table.Head class={column.class}>{column.label}</Table.Head> <Table.Head class={column.class || 'min-w-[80px]'}>{column.label}</Table.Head>
{/each} {/each}
</Table.Row> </Table.Row>
</Table.Header> </Table.Header>
@ -114,20 +114,20 @@
<span class="font-mono text-sm">#{rendered.number}</span> <span class="font-mono text-sm">#{rendered.number}</span>
</div> </div>
{:else if rendered.component === 'coin'} {:else if rendered.component === 'coin'}
<div class="flex items-center gap-3"> <div class="flex min-w-0 items-center gap-2">
<CoinIcon <CoinIcon
icon={rendered.icon} icon={rendered.icon}
symbol={rendered.symbol} symbol={rendered.symbol}
name={rendered.name} name={rendered.name}
size={rendered.size || 8} size={rendered.size || 6}
/> />
<div> <div class="truncate">
<div class="font-medium">{rendered.name}</div> <div class="truncate font-medium">{rendered.name}</div>
<div class="text-muted-foreground text-sm">*{rendered.symbol}</div> <div class="text-muted-foreground text-sm">*{rendered.symbol}</div>
</div> </div>
</div> </div>
{:else if rendered.component === 'link'} {:else if rendered.component === 'link'}
<a href={rendered.href} class="flex items-center gap-2 hover:underline"> <a href={rendered.href} class="flex items-center gap-1 hover:underline">
<CoinIcon <CoinIcon
icon={rendered.content.icon} icon={rendered.content.icon}
symbol={rendered.content.symbol} symbol={rendered.content.symbol}

33
website/src/lib/components/self/skeletons/CoinSkeleton.svelte
View file

@ -4,28 +4,29 @@
</script> </script>
<header class="mb-8"> <header class="mb-8">
<div class="mb-6 flex items-start justify-between"> <div class="mb-4 flex flex-col gap-4 sm:flex-row sm:items-start sm:justify-between">
<div class="flex items-center gap-4"> <div class="flex items-center gap-3 sm:gap-4">
<Skeleton class="h-16 w-16 rounded-lg" /> <Skeleton class="h-12 w-12 rounded-lg sm:h-16 sm:w-16" />
<div> <div class="min-w-0 flex-1">
<Skeleton class="mb-2 h-10 w-48" /> <Skeleton class="mb-2 h-6 w-40 sm:h-10 sm:w-48" />
<div class="mt-1 flex items-center gap-2"> <div class="mt-1 flex flex-wrap items-center gap-2">
<Skeleton class="h-6 w-16" /> <Skeleton class="h-5 w-12 sm:h-6 sm:w-16" />
<Skeleton class="h-6 w-20" /> <Skeleton class="h-5 w-16 sm:h-6 sm:w-20" />
<Skeleton class="h-5 w-14" />
</div> </div>
</div> </div>
</div> </div>
<div class="text-right"> <div class="flex flex-col items-start gap-2 sm:items-end sm:text-right">
<Skeleton class="mb-2 h-8 w-32" /> <Skeleton class="h-6 w-28 sm:h-8 sm:w-32" />
<div class="mt-2 flex items-center gap-2"> <div class="flex items-center gap-2">
<Skeleton class="h-4 w-4" /> <Skeleton class="h-4 w-4" />
<Skeleton class="h-6 w-16" /> <Skeleton class="h-5 w-12 sm:h-6 sm:w-16" />
</div> </div>
</div> </div>
</div> </div>
<!-- Creator Info Skeleton --> <!-- Creator Info Skeleton -->
<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">
<Skeleton class="h-4 w-20" /> <Skeleton class="h-4 w-20" />
<Skeleton class="h-4 w-4 rounded-full" /> <Skeleton class="h-4 w-4 rounded-full" />
<Skeleton class="h-4 w-40" /> <Skeleton class="h-4 w-40" />
@ -44,10 +45,8 @@
<Skeleton class="h-5 w-5" /> <Skeleton class="h-5 w-5" />
<Skeleton class="h-6 w-32" /> <Skeleton class="h-6 w-32" />
</Card.Title> </Card.Title>
<div class="flex gap-1"> <div class="w-24">
{#each Array(6) as _} <Skeleton class="h-10 w-full" />
<Skeleton class="h-8 w-12" />
{/each}
</div> </div>
</div> </div>
</Card.Header> </Card.Header>

10
website/src/lib/components/self/skeletons/HomeSkeleton.svelte
View file

@ -3,13 +3,7 @@
import { Skeleton } from '$lib/components/ui/skeleton'; import { Skeleton } from '$lib/components/ui/skeleton';
</script> </script>
<div class="container mx-auto p-6"> <div class="container mx-auto">
<!-- Header Skeleton -->
<header class="mb-8">
<Skeleton class="mb-2 h-9 w-64" />
<Skeleton class="h-5 w-96" />
</header>
<!-- Top Coins Grid Skeleton --> <!-- Top Coins Grid Skeleton -->
<div class="grid grid-cols-1 gap-6 md:grid-cols-2 lg:grid-cols-3"> <div class="grid grid-cols-1 gap-6 md:grid-cols-2 lg:grid-cols-3">
{#each Array(6) as _} {#each Array(6) as _}
@ -18,7 +12,7 @@
<Card.Title class="flex items-center justify-between"> <Card.Title class="flex items-center justify-between">
<div class="flex items-center gap-2"> <div class="flex items-center gap-2">
<Skeleton class="h-6 w-6 rounded-full" /> <Skeleton class="h-6 w-6 rounded-full" />
<Skeleton class="h-6 w-32" /> <Skeleton class="h-6 max-w-2xl" />
</div> </div>
<Skeleton class="h-6 w-16" /> <Skeleton class="h-6 w-16" />
</Card.Title> </Card.Title>

32
website/src/lib/components/self/skeletons/LeaderboardSkeleton.svelte
View file

@ -3,30 +3,30 @@
import { Skeleton } from '$lib/components/ui/skeleton'; import { Skeleton } from '$lib/components/ui/skeleton';
</script> </script>
<div class="grid gap-6 lg:grid-cols-2"> <div class="grid gap-4 md:gap-6 xl:grid-cols-2">
{#each Array(4) as _} {#each Array(4) as _}
<Card.Root> <Card.Root class="overflow-hidden">
<Card.Header> <Card.Header class="pb-3 md:pb-4">
<Card.Title class="flex items-center gap-2"> <Card.Title class="flex items-center gap-2">
<Skeleton class="h-6 w-6" /> <Skeleton class="h-5 w-5 md:h-6 md:w-6" />
<Skeleton class="h-6 w-40" /> <Skeleton class="h-5 w-32 md:h-6 md:w-40" />
</Card.Title> </Card.Title>
<Card.Description> <Card.Description>
<Skeleton class="h-4 w-64" /> <Skeleton class="h-3 w-48 md:h-4 md:w-64" />
</Card.Description> </Card.Description>
</Card.Header> </Card.Header>
<Card.Content> <Card.Content class="p-3 pt-0 md:p-6 md:pt-0">
<div class="space-y-4"> <div class="space-y-3 md:space-y-4">
{#each Array(5) as _} {#each Array(5) as _}
<div class="flex items-center gap-4 border-b pb-4 last:border-b-0"> <div class="flex items-center gap-2 border-b pb-3 last:border-b-0 md:gap-4 md:pb-4">
<Skeleton class="h-6 w-8" /> <Skeleton class="h-5 w-6 md:h-6 md:w-8" />
<Skeleton class="h-8 w-8 rounded-full" /> <Skeleton class="h-6 w-6 rounded-full md:h-8 md:w-8" />
<div class="flex-1"> <div class="flex-1 min-w-0">
<Skeleton class="h-4 w-24" /> <Skeleton class="h-3 w-16 md:h-4 md:w-24" />
<Skeleton class="mt-1 h-3 w-16" /> <Skeleton class="mt-1 h-2 w-12 md:h-3 md:w-16" />
</div> </div>
<Skeleton class="h-4 w-20" /> <Skeleton class="h-3 w-12 md:h-4 md:w-20" />
<Skeleton class="h-5 w-16" /> <Skeleton class="h-4 w-12 md:h-5 md:w-16" />
</div> </div>
{/each} {/each}
</div> </div>

47
website/src/lib/components/self/skeletons/LiveTradeSkeleton.svelte Normal file
View file

@ -0,0 +1,47 @@
<script lang="ts">
import { Skeleton } from '$lib/components/ui/skeleton';
</script>
<Skeleton class="h-6 w-20 rounded-full sm:ml-auto" />
<!-- Trade items skeleton -->
{#each Array(8) as _}
<div
class="flex flex-col gap-3 rounded-lg border p-3 sm:flex-row sm:items-center sm:justify-between sm:p-4"
>
<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">
<!-- Coin icon and symbol -->
<div class="flex items-center gap-1.5">
<Skeleton class="h-5 w-5 rounded-full sm:h-6 sm:w-6" />
<Skeleton class="h-4 w-20 sm:h-5 sm:w-24" />
</div>
<!-- "bought by" / "sold by" text -->
<Skeleton class="h-3 w-12 sm:h-4 sm:w-16" />
<!-- User avatar and username -->
<div class="flex items-center gap-1">
<Skeleton class="h-4 w-4 rounded-full sm:h-5 sm:w-5" />
<Skeleton class="h-3 w-16 sm:h-4 sm:w-20" />
</div>
</div>
</div>
</div>
<div class="flex items-center justify-between gap-2">
<!-- Trade type and value -->
<div class="flex items-center gap-2">
<Skeleton class="h-3.5 w-3.5 sm:h-4 sm:w-4" />
<Skeleton class="h-4 w-8 sm:h-4 sm:w-10" />
<Skeleton class="h-4 w-1" />
<Skeleton class="h-4 w-12 sm:h-4 sm:w-16" />
</div>
<!-- Timestamp -->
<div class="flex items-center gap-1">
<Skeleton class="h-3 w-3 sm:h-4 sm:w-4" />
<Skeleton class="h-3 w-12 sm:h-4 sm:w-16" />
</div>
</div>
</div>
{/each}

167
website/src/lib/components/self/skeletons/PortfolioSkeleton.svelte Normal file
View file

@ -0,0 +1,167 @@
<script lang="ts">
import * as Card from '$lib/components/ui/card';
import * as Table from '$lib/components/ui/table';
import { Skeleton } from '$lib/components/ui/skeleton';
</script>
<div class="container mx-auto max-w-7xl">
<!-- Portfolio Summary Cards -->
<div class="mb-6 grid grid-cols-1 gap-4 md:mb-8 lg:grid-cols-3">
{#each Array(3) as _}
<Card.Root class="gap-1 overflow-hidden">
<Card.Header>
<Card.Title class="flex items-center gap-2">
<Skeleton class="h-4 w-4" />
<Skeleton class="h-4 w-16" />
</Card.Title>
</Card.Header>
<Card.Content>
<Skeleton class="h-8 w-24 md:h-9 md:w-32" />
<Skeleton class="mt-2 h-3 w-20 md:w-24" />
</Card.Content>
</Card.Root>
{/each}
</div>
<!-- Holdings Table -->
<Card.Root class="overflow-hidden">
<Card.Header class="pb-3 md:pb-4">
<Card.Title>
<Skeleton class="h-5 w-32 md:h-6 md:w-40" />
</Card.Title>
<Card.Description>
<Skeleton class="h-3 w-48 md:h-4 md:w-64" />
</Card.Description>
</Card.Header>
<Card.Content class="p-3 pt-0 md:p-6 md:pt-0">
<Table.Root>
<Table.Header>
<Table.Row>
<Table.Head class="w-[30%] min-w-[120px] md:w-[12%]">
<Skeleton class="h-4 w-16" />
</Table.Head>
<Table.Head class="w-[20%] min-w-[80px] md:w-[12%]">
<Skeleton class="h-4 w-16" />
</Table.Head>
<Table.Head class="w-[15%] min-w-[70px] md:w-[12%]">
<Skeleton class="h-4 w-16" />
</Table.Head>
<Table.Head class="w-[20%] min-w-[80px] md:w-[12%]">
<Skeleton class="h-4 w-16" />
</Table.Head>
<Table.Head class="w-[15%] min-w-[70px] md:w-[12%]">
<Skeleton class="h-4 w-16" />
</Table.Head>
<Table.Head class="hidden md:table-cell md:w-[12%]">
<Skeleton class="h-4 w-16" />
</Table.Head>
</Table.Row>
</Table.Header>
<Table.Body>
{#each Array(4) as _}
<Table.Row>
<Table.Cell>
<div class="flex items-center gap-2">
<Skeleton class="h-6 w-6 rounded-full" />
<div>
<Skeleton class="h-4 w-16" />
<Skeleton class="mt-1 h-3 w-12" />
</div>
</div>
</Table.Cell>
<Table.Cell>
<Skeleton class="h-4 w-16" />
</Table.Cell>
<Table.Cell>
<Skeleton class="h-4 w-12" />
</Table.Cell>
<Table.Cell>
<Skeleton class="h-5 w-14 rounded-md" />
</Table.Cell>
<Table.Cell>
<Skeleton class="h-4 w-16" />
</Table.Cell>
<Table.Cell class="hidden md:table-cell">
<Skeleton class="h-5 w-12 rounded-md" />
</Table.Cell>
</Table.Row>
{/each}
</Table.Body>
</Table.Root>
</Card.Content>
</Card.Root>
<!-- Recent Transactions -->
<Card.Root class="mt-6 overflow-hidden md:mt-8">
<Card.Header class="pb-3 md:pb-4">
<div class="flex items-center justify-between">
<div>
<Card.Title class="flex items-center gap-2">
<Skeleton class="h-5 w-5" />
<Skeleton class="h-5 w-32 md:h-6 md:w-40" />
</Card.Title>
<Card.Description class="mt-1">
<Skeleton class="h-3 w-40 md:h-4 md:w-48" />
</Card.Description>
</div>
<Skeleton class="h-8 w-16 rounded-md md:w-20" />
</div>
</Card.Header>
<Card.Content class="p-3 pt-0 md:p-6 md:pt-0">
<Table.Root>
<Table.Header>
<Table.Row>
<Table.Head class="w-[15%] min-w-[60px] md:w-[10%]">
<Skeleton class="h-4 w-12" />
</Table.Head>
<Table.Head class="w-[30%] min-w-[100px] md:w-[20%]">
<Skeleton class="h-4 w-12" />
</Table.Head>
<Table.Head class="w-[20%] min-w-[80px] md:w-[15%]">
<Skeleton class="h-4 w-16" />
</Table.Head>
<Table.Head class="w-[15%] min-w-[70px] md:w-[15%]">
<Skeleton class="h-4 w-12" />
</Table.Head>
<Table.Head class="w-[20%] min-w-[70px] md:w-[15%]">
<Skeleton class="h-4 w-12" />
</Table.Head>
<Table.Head class="hidden md:table-cell md:w-[25%]">
<Skeleton class="h-4 w-12" />
</Table.Head>
</Table.Row>
</Table.Header>
<Table.Body>
{#each Array(5) as _}
<Table.Row>
<Table.Cell>
<Skeleton class="h-5 w-10 rounded-md" />
</Table.Cell>
<Table.Cell>
<div class="flex items-center gap-2">
<Skeleton class="h-4 w-4 rounded-full" />
<div>
<Skeleton class="h-4 w-12" />
<Skeleton class="mt-1 h-3 w-10" />
</div>
</div>
</Table.Cell>
<Table.Cell>
<Skeleton class="h-4 w-16 font-mono" />
</Table.Cell>
<Table.Cell>
<Skeleton class="h-4 w-16" />
</Table.Cell>
<Table.Cell>
<Skeleton class="h-4 w-16" />
</Table.Cell>
<Table.Cell class="hidden md:table-cell">
<Skeleton class="h-4 w-24" />
</Table.Cell>
</Table.Row>
{/each}
</Table.Body>
</Table.Root>
</Card.Content>
</Card.Root>
</div>

84
website/src/lib/components/self/skeletons/ProfileSkeleton.svelte
View file

@ -9,25 +9,25 @@
<div class="flex flex-col gap-4 sm:flex-row sm:items-start"> <div class="flex flex-col gap-4 sm:flex-row sm:items-start">
<!-- Avatar Skeleton --> <!-- Avatar Skeleton -->
<div class="flex-shrink-0"> <div class="flex-shrink-0">
<Skeleton class="size-20 rounded-full sm:size-24" /> <Skeleton class="size-16 rounded-full sm:size-20 md:size-24" />
</div> </div>
<!-- Profile Info Skeleton --> <!-- Profile Info Skeleton -->
<div class="min-w-0 flex-1"> <div class="min-w-0 flex-1">
<div class="mb-3"> <div class="mb-3">
<div class="mb-1 flex flex-wrap items-center gap-2"> <div class="mb-1 flex flex-wrap items-center gap-2">
<Skeleton class="h-8 w-48 sm:h-9" /> <Skeleton class="h-6 w-32 sm:h-8 sm:w-48" />
<Skeleton class="h-6 w-16" /> <Skeleton class="h-5 w-12 sm:h-6 sm:w-16" />
</div> </div>
<Skeleton class="h-6 w-32" /> <Skeleton class="h-5 w-24 sm:h-6 sm:w-32" />
</div> </div>
<Skeleton class="mb-3 h-4 w-full max-w-2xl" /> <Skeleton class="mb-3 h-4 w-full max-w-2xl" />
<Skeleton class="mb-6 h-4 w-96" /> <Skeleton class="mb-6 h-4 max-w-2xl" />
<div class="flex items-center gap-2"> <div class="flex items-center gap-2">
<Skeleton class="h-4 w-4" /> <Skeleton class="h-4 w-4" />
<Skeleton class="h-4 w-24" /> <Skeleton class="h-4 w-20 sm:w-24" />
</div> </div>
</div> </div>
</div> </div>
@ -40,32 +40,32 @@
<Card.Root class="py-0"> <Card.Root class="py-0">
<Card.Content class="p-4"> <Card.Content class="p-4">
<div class="flex items-center justify-between"> <div class="flex items-center justify-between">
<Skeleton class="h-4 w-24" /> <Skeleton class="h-4 w-20 sm:w-24" />
<Skeleton class="h-4 w-4" /> <Skeleton class="h-4 w-4" />
</div> </div>
<Skeleton class="mt-1 h-8 w-32" /> <Skeleton class="mt-1 h-6 w-24 sm:h-8 sm:w-32" />
<Skeleton class="mt-1 h-3 w-20" /> <Skeleton class="mt-1 h-3 w-16 sm:w-20" />
</Card.Content> </Card.Content>
</Card.Root> </Card.Root>
{/each} {/each}
</div> </div>
<!-- Buy & Sell Activity Skeleton --> <!-- Buy & Sell Activity Skeleton -->
<div class="mb-6 grid grid-cols-1 gap-4 lg:grid-cols-4"> <div class="mb-6 grid grid-cols-1 gap-4 sm:grid-cols-2 lg:grid-cols-4">
{#each Array(4) as _} {#each Array(4) as _}
<Card.Root class="py-0"> <Card.Root class="py-0">
<Card.Content class="p-4"> <Card.Content class="p-4">
<div class="flex items-center justify-between"> <div class="flex items-center justify-between">
<Skeleton class="h-4 w-24" /> <Skeleton class="h-4 w-20 sm:w-24" />
<Skeleton class="h-4 w-4" /> <Skeleton class="h-4 w-4" />
</div> </div>
<div class="mt-1"> <div class="mt-1">
<Skeleton class="h-8 w-28" /> <Skeleton class="h-6 w-20 sm:h-8 sm:w-28" />
<Skeleton class="mt-1 h-3 w-24" /> <Skeleton class="mt-1 h-3 w-20 sm:w-24" />
</div> </div>
<div class="border-muted mt-3 border-t pt-3"> <div class="border-muted mt-3 border-t pt-3">
<Skeleton class="h-6 w-24" /> <Skeleton class="h-5 w-16 sm:h-6 sm:w-24" />
<Skeleton class="mt-1 h-3 w-20" /> <Skeleton class="mt-1 h-3 w-16 sm:w-20" />
</div> </div>
</Card.Content> </Card.Content>
</Card.Root> </Card.Root>
@ -77,22 +77,26 @@
<Card.Header class="pb-3"> <Card.Header class="pb-3">
<Card.Title class="flex items-center gap-2"> <Card.Title class="flex items-center gap-2">
<Skeleton class="h-5 w-5" /> <Skeleton class="h-5 w-5" />
<Skeleton class="h-6 w-32" /> <Skeleton class="h-5 w-24 sm:h-6 sm:w-32" />
</Card.Title> </Card.Title>
<Skeleton class="h-4 w-48" /> <Skeleton class="h-4 w-32 sm:w-48" />
</Card.Header> </Card.Header>
<Card.Content class="p-0"> <Card.Content class="p-0">
<div class="p-6"> <div class="p-4 sm:p-6">
{#each Array(3) as _} {#each Array(3) as _}
<div class="flex items-center gap-4 border-b py-4 last:border-b-0"> <div class="flex items-center gap-3 border-b py-3 last:border-b-0 sm:gap-4 sm:py-4">
<Skeleton class="h-8 w-8 rounded-full" /> <Skeleton class="h-6 w-6 rounded-full sm:h-8 sm:w-8" />
<div class="flex-1"> <div class="min-w-0 flex-1">
<Skeleton class="h-4 w-24" /> <Skeleton class="h-4 w-16 sm:w-24" />
<Skeleton class="mt-1 h-3 w-16" /> <Skeleton class="mt-1 h-3 w-12 sm:w-16" />
</div> </div>
<Skeleton class="h-4 w-16" /> <div class="hidden sm:block">
<Skeleton class="h-4 w-20" /> <Skeleton class="h-4 w-16" />
<Skeleton class="h-4 w-16" /> </div>
<div class="hidden md:block">
<Skeleton class="h-4 w-20" />
</div>
<Skeleton class="h-4 w-12 sm:w-16" />
</div> </div>
{/each} {/each}
</div> </div>
@ -104,23 +108,27 @@
<Card.Header class="pb-3"> <Card.Header class="pb-3">
<Card.Title class="flex items-center gap-2"> <Card.Title class="flex items-center gap-2">
<Skeleton class="h-5 w-5" /> <Skeleton class="h-5 w-5" />
<Skeleton class="h-6 w-40" /> <Skeleton class="h-5 w-32 sm:h-6 sm:w-40" />
</Card.Title> </Card.Title>
<Skeleton class="h-4 w-52" /> <Skeleton class="h-4 w-36 sm:w-52" />
</Card.Header> </Card.Header>
<Card.Content class="p-0"> <Card.Content class="p-0">
<div class="p-6"> <div class="p-4 sm:p-6">
{#each Array(5) as _} {#each Array(5) as _}
<div class="flex items-center gap-4 border-b py-4 last:border-b-0"> <div class="flex items-center gap-3 border-b py-3 last:border-b-0 sm:gap-4 sm:py-4">
<Skeleton class="h-6 w-12" /> <Skeleton class="h-5 w-10 sm:h-6 sm:w-12" />
<Skeleton class="h-8 w-8 rounded-full" /> <Skeleton class="h-6 w-6 rounded-full sm:h-8 sm:w-8" />
<div class="flex-1"> <div class="min-w-0 flex-1">
<Skeleton class="h-4 w-20" /> <Skeleton class="h-4 w-16 sm:w-20" />
<Skeleton class="mt-1 h-3 w-16" /> <Skeleton class="mt-1 h-3 w-12 sm:w-16" />
</div> </div>
<Skeleton class="h-4 w-16" /> <div class="hidden sm:block">
<Skeleton class="h-4 w-16" /> <Skeleton class="h-4 w-16" />
<Skeleton class="h-4 w-20" /> </div>
<div class="hidden md:block">
<Skeleton class="h-4 w-16" />
</div>
<Skeleton class="h-4 w-16 sm:w-20" />
</div> </div>
{/each} {/each}
</div> </div>

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

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

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

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

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

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

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

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

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

@ -1,9 +1,10 @@
<script lang="ts"> <script lang="ts">
import * as Card from '$lib/components/ui/card'; import * as Card from '$lib/components/ui/card';
import * as Table from '$lib/components/ui/table';
import { Badge } from '$lib/components/ui/badge'; import { Badge } from '$lib/components/ui/badge';
import { Button } from '$lib/components/ui/button'; import { Button } from '$lib/components/ui/button';
import CoinIcon from '$lib/components/self/CoinIcon.svelte'; 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 { getPublicUrl, formatPrice, formatValue, formatQuantity, formatDate } from '$lib/utils';
import { onMount } from 'svelte'; import { onMount } from 'svelte';
import { toast } from 'svelte-sonner'; import { toast } from 'svelte-sonner';
@ -54,6 +55,110 @@
let totalPortfolioValue = $derived(portfolioData ? portfolioData.totalValue : 0); let totalPortfolioValue = $derived(portfolioData ? portfolioData.totalValue : 0);
let hasHoldings = $derived(portfolioData && portfolioData.coinHoldings.length > 0); let hasHoldings = $derived(portfolioData && portfolioData.coinHoldings.length > 0);
let hasTransactions = $derived(transactions.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> </script>
<svelte:head> <svelte:head>
@ -69,11 +174,7 @@
</header> </header>
{#if loading} {#if loading}
<div class="flex h-96 items-center justify-center"> <PortfolioSkeleton />
<div class="text-center">
<div class="mb-4 text-xl">Loading portfolio...</div>
</div>
</div>
{:else if !portfolioData} {:else if !portfolioData}
<div class="flex h-96 items-center justify-center"> <div class="flex h-96 items-center justify-center">
<div class="text-center"> <div class="text-center">
@ -160,52 +261,11 @@
<Card.Description>Current positions in your portfolio</Card.Description> <Card.Description>Current positions in your portfolio</Card.Description>
</Card.Header> </Card.Header>
<Card.Content> <Card.Content>
<Table.Root> <DataTable
<Table.Header> columns={holdingsColumns}
<Table.Row> data={portfolioData.coinHoldings}
<Table.Head>Coin</Table.Head> onRowClick={(holding) => goto(`/coin/${holding.symbol}`)}
<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>
</Card.Content> </Card.Content>
</Card.Root> </Card.Root>
{/if} {/if}
@ -229,74 +289,14 @@
</div> </div>
</Card.Header> </Card.Header>
<Card.Content> <Card.Content>
{#if !hasTransactions} <DataTable
<div class="py-8 text-center"> columns={transactionsColumns}
<div data={transactions}
class="bg-muted mx-auto mb-4 flex h-12 w-12 items-center justify-center rounded-full" onRowClick={(tx) => goto(`/coin/${tx.coin.symbol}`)}
> emptyIcon={Receipt}
<Receipt class="text-muted-foreground h-6 w-6" /> emptyTitle="No transactions yet"
</div> emptyDescription="You haven't made any trades yet. Start by buying or selling coins."
<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}
</Card.Content> </Card.Content>
</Card.Root> </Card.Root>
{/if} {/if}