feat: mobile support + more skeletons
This commit is contained in:
Face
parent
ab6b6901db
commit
87d3b41e05
14 changed files with 589 additions and 367 deletions
|
|
@ -364,7 +364,7 @@
|
|||
<Settings />
|
||||
Settings
|
||||
</DropdownMenu.Item>
|
||||
<DropdownMenu.Item onclick={() => (showPromoCode = true)}>
|
||||
<DropdownMenu.Item onclick={() => { showPromoCode = true; setOpenMobile(false); }}>
|
||||
<Gift />
|
||||
Promo code
|
||||
</DropdownMenu.Item>
|
||||
|
|
|
|||
|
|
@ -226,7 +226,7 @@
|
|||
<div class="flex items-center gap-2">
|
||||
<HoverCard.Root>
|
||||
<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}`)}
|
||||
>
|
||||
{comment.userName}
|
||||
|
|
@ -237,13 +237,13 @@
|
|||
</HoverCard.Root>
|
||||
<button
|
||||
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">
|
||||
@{comment.userUsername}
|
||||
<Badge variant="outline" class="text-xs w-full justify-start">
|
||||
<span class="truncate">@{comment.userUsername}</span>
|
||||
</Badge>
|
||||
</button>
|
||||
<span class="text-muted-foreground text-xs">
|
||||
<span class="text-muted-foreground whitespace-nowrap text-xs flex-shrink-0">
|
||||
{formatTimeAgo(comment.createdAt)}
|
||||
</span>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -51,7 +51,7 @@
|
|||
<Table.Header>
|
||||
<Table.Row>
|
||||
{#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}
|
||||
</Table.Row>
|
||||
</Table.Header>
|
||||
|
|
@ -114,20 +114,20 @@
|
|||
<span class="font-mono text-sm">#{rendered.number}</span>
|
||||
</div>
|
||||
{:else if rendered.component === 'coin'}
|
||||
<div class="flex items-center gap-3">
|
||||
<div class="flex min-w-0 items-center gap-2">
|
||||
<CoinIcon
|
||||
icon={rendered.icon}
|
||||
symbol={rendered.symbol}
|
||||
name={rendered.name}
|
||||
size={rendered.size || 8}
|
||||
size={rendered.size || 6}
|
||||
/>
|
||||
<div>
|
||||
<div class="font-medium">{rendered.name}</div>
|
||||
<div class="truncate">
|
||||
<div class="truncate font-medium">{rendered.name}</div>
|
||||
<div class="text-muted-foreground text-sm">*{rendered.symbol}</div>
|
||||
</div>
|
||||
</div>
|
||||
{: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
|
||||
icon={rendered.content.icon}
|
||||
symbol={rendered.content.symbol}
|
||||
|
|
|
|||
|
|
@ -4,28 +4,29 @@
|
|||
</script>
|
||||
|
||||
<header class="mb-8">
|
||||
<div class="mb-6 flex items-start justify-between">
|
||||
<div class="flex items-center gap-4">
|
||||
<Skeleton class="h-16 w-16 rounded-lg" />
|
||||
<div>
|
||||
<Skeleton class="mb-2 h-10 w-48" />
|
||||
<div class="mt-1 flex items-center gap-2">
|
||||
<Skeleton class="h-6 w-16" />
|
||||
<Skeleton class="h-6 w-20" />
|
||||
<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">
|
||||
<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-16 sm:h-6 sm:w-20" />
|
||||
<Skeleton class="h-5 w-14" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="text-right">
|
||||
<Skeleton class="mb-2 h-8 w-32" />
|
||||
<div class="mt-2 flex items-center gap-2">
|
||||
<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-6 w-16" />
|
||||
<Skeleton class="h-5 w-12 sm:h-6 sm:w-16" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 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-4 rounded-full" />
|
||||
<Skeleton class="h-4 w-40" />
|
||||
|
|
@ -44,10 +45,8 @@
|
|||
<Skeleton class="h-5 w-5" />
|
||||
<Skeleton class="h-6 w-32" />
|
||||
</Card.Title>
|
||||
<div class="flex gap-1">
|
||||
{#each Array(6) as _}
|
||||
<Skeleton class="h-8 w-12" />
|
||||
{/each}
|
||||
<div class="w-24">
|
||||
<Skeleton class="h-10 w-full" />
|
||||
</div>
|
||||
</div>
|
||||
</Card.Header>
|
||||
|
|
|
|||
|
|
@ -3,13 +3,7 @@
|
|||
import { Skeleton } from '$lib/components/ui/skeleton';
|
||||
</script>
|
||||
|
||||
<div class="container mx-auto p-6">
|
||||
<!-- Header Skeleton -->
|
||||
<header class="mb-8">
|
||||
<Skeleton class="mb-2 h-9 w-64" />
|
||||
<Skeleton class="h-5 w-96" />
|
||||
</header>
|
||||
|
||||
<div class="container mx-auto">
|
||||
<!-- Top Coins Grid Skeleton -->
|
||||
<div class="grid grid-cols-1 gap-6 md:grid-cols-2 lg:grid-cols-3">
|
||||
{#each Array(6) as _}
|
||||
|
|
@ -18,7 +12,7 @@
|
|||
<Card.Title class="flex items-center justify-between">
|
||||
<div class="flex items-center gap-2">
|
||||
<Skeleton class="h-6 w-6 rounded-full" />
|
||||
<Skeleton class="h-6 w-32" />
|
||||
<Skeleton class="h-6 max-w-2xl" />
|
||||
</div>
|
||||
<Skeleton class="h-6 w-16" />
|
||||
</Card.Title>
|
||||
|
|
|
|||
|
|
@ -3,30 +3,30 @@
|
|||
import { Skeleton } from '$lib/components/ui/skeleton';
|
||||
</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 _}
|
||||
<Card.Root>
|
||||
<Card.Header>
|
||||
<Card.Root class="overflow-hidden">
|
||||
<Card.Header class="pb-3 md:pb-4">
|
||||
<Card.Title class="flex items-center gap-2">
|
||||
<Skeleton class="h-6 w-6" />
|
||||
<Skeleton class="h-6 w-40" />
|
||||
<Skeleton class="h-5 w-5 md:h-6 md:w-6" />
|
||||
<Skeleton class="h-5 w-32 md:h-6 md:w-40" />
|
||||
</Card.Title>
|
||||
<Card.Description>
|
||||
<Skeleton class="h-4 w-64" />
|
||||
<Skeleton class="h-3 w-48 md:h-4 md:w-64" />
|
||||
</Card.Description>
|
||||
</Card.Header>
|
||||
<Card.Content>
|
||||
<div class="space-y-4">
|
||||
<Card.Content class="p-3 pt-0 md:p-6 md:pt-0">
|
||||
<div class="space-y-3 md:space-y-4">
|
||||
{#each Array(5) as _}
|
||||
<div class="flex items-center gap-4 border-b pb-4 last:border-b-0">
|
||||
<Skeleton class="h-6 w-8" />
|
||||
<Skeleton class="h-8 w-8 rounded-full" />
|
||||
<div class="flex-1">
|
||||
<Skeleton class="h-4 w-24" />
|
||||
<Skeleton class="mt-1 h-3 w-16" />
|
||||
<div class="flex items-center gap-2 border-b pb-3 last:border-b-0 md:gap-4 md:pb-4">
|
||||
<Skeleton class="h-5 w-6 md:h-6 md:w-8" />
|
||||
<Skeleton class="h-6 w-6 rounded-full md:h-8 md:w-8" />
|
||||
<div class="flex-1 min-w-0">
|
||||
<Skeleton class="h-3 w-16 md:h-4 md:w-24" />
|
||||
<Skeleton class="mt-1 h-2 w-12 md:h-3 md:w-16" />
|
||||
</div>
|
||||
<Skeleton class="h-4 w-20" />
|
||||
<Skeleton class="h-5 w-16" />
|
||||
<Skeleton class="h-3 w-12 md:h-4 md:w-20" />
|
||||
<Skeleton class="h-4 w-12 md:h-5 md:w-16" />
|
||||
</div>
|
||||
{/each}
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -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}
|
||||
|
|
@ -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>
|
||||
|
|
@ -9,25 +9,25 @@
|
|||
<div class="flex flex-col gap-4 sm:flex-row sm:items-start">
|
||||
<!-- Avatar Skeleton -->
|
||||
<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>
|
||||
|
||||
<!-- Profile Info Skeleton -->
|
||||
<div class="min-w-0 flex-1">
|
||||
<div class="mb-3">
|
||||
<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-16" />
|
||||
<Skeleton class="h-6 w-32 sm:h-8 sm:w-48" />
|
||||
<Skeleton class="h-5 w-12 sm:h-6 sm:w-16" />
|
||||
</div>
|
||||
<Skeleton class="h-6 w-32" />
|
||||
<Skeleton class="h-5 w-24 sm:h-6 sm:w-32" />
|
||||
</div>
|
||||
|
||||
<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">
|
||||
<Skeleton class="h-4 w-4" />
|
||||
<Skeleton class="h-4 w-24" />
|
||||
<Skeleton class="h-4 w-20 sm:w-24" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -40,32 +40,32 @@
|
|||
<Card.Root class="py-0">
|
||||
<Card.Content class="p-4">
|
||||
<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" />
|
||||
</div>
|
||||
<Skeleton class="mt-1 h-8 w-32" />
|
||||
<Skeleton class="mt-1 h-3 w-20" />
|
||||
<Skeleton class="mt-1 h-6 w-24 sm:h-8 sm:w-32" />
|
||||
<Skeleton class="mt-1 h-3 w-16 sm:w-20" />
|
||||
</Card.Content>
|
||||
</Card.Root>
|
||||
{/each}
|
||||
</div>
|
||||
|
||||
<!-- 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 _}
|
||||
<Card.Root class="py-0">
|
||||
<Card.Content class="p-4">
|
||||
<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" />
|
||||
</div>
|
||||
<div class="mt-1">
|
||||
<Skeleton class="h-8 w-28" />
|
||||
<Skeleton class="mt-1 h-3 w-24" />
|
||||
<Skeleton class="h-6 w-20 sm:h-8 sm:w-28" />
|
||||
<Skeleton class="mt-1 h-3 w-20 sm:w-24" />
|
||||
</div>
|
||||
<div class="border-muted mt-3 border-t pt-3">
|
||||
<Skeleton class="h-6 w-24" />
|
||||
<Skeleton class="mt-1 h-3 w-20" />
|
||||
<Skeleton class="h-5 w-16 sm:h-6 sm:w-24" />
|
||||
<Skeleton class="mt-1 h-3 w-16 sm:w-20" />
|
||||
</div>
|
||||
</Card.Content>
|
||||
</Card.Root>
|
||||
|
|
@ -77,22 +77,26 @@
|
|||
<Card.Header class="pb-3">
|
||||
<Card.Title class="flex items-center gap-2">
|
||||
<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>
|
||||
<Skeleton class="h-4 w-48" />
|
||||
<Skeleton class="h-4 w-32 sm:w-48" />
|
||||
</Card.Header>
|
||||
<Card.Content class="p-0">
|
||||
<div class="p-6">
|
||||
<div class="p-4 sm:p-6">
|
||||
{#each Array(3) as _}
|
||||
<div class="flex items-center gap-4 border-b py-4 last:border-b-0">
|
||||
<Skeleton class="h-8 w-8 rounded-full" />
|
||||
<div class="flex-1">
|
||||
<Skeleton class="h-4 w-24" />
|
||||
<Skeleton class="mt-1 h-3 w-16" />
|
||||
<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-6 rounded-full sm:h-8 sm:w-8" />
|
||||
<div class="min-w-0 flex-1">
|
||||
<Skeleton class="h-4 w-16 sm:w-24" />
|
||||
<Skeleton class="mt-1 h-3 w-12 sm:w-16" />
|
||||
</div>
|
||||
<Skeleton class="h-4 w-16" />
|
||||
<Skeleton class="h-4 w-20" />
|
||||
<Skeleton class="h-4 w-16" />
|
||||
<div class="hidden sm:block">
|
||||
<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>
|
||||
{/each}
|
||||
</div>
|
||||
|
|
@ -104,23 +108,27 @@
|
|||
<Card.Header class="pb-3">
|
||||
<Card.Title class="flex items-center gap-2">
|
||||
<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>
|
||||
<Skeleton class="h-4 w-52" />
|
||||
<Skeleton class="h-4 w-36 sm:w-52" />
|
||||
</Card.Header>
|
||||
<Card.Content class="p-0">
|
||||
<div class="p-6">
|
||||
<div class="p-4 sm:p-6">
|
||||
{#each Array(5) as _}
|
||||
<div class="flex items-center gap-4 border-b py-4 last:border-b-0">
|
||||
<Skeleton class="h-6 w-12" />
|
||||
<Skeleton class="h-8 w-8 rounded-full" />
|
||||
<div class="flex-1">
|
||||
<Skeleton class="h-4 w-20" />
|
||||
<Skeleton class="mt-1 h-3 w-16" />
|
||||
<div class="flex items-center gap-3 border-b py-3 last:border-b-0 sm:gap-4 sm:py-4">
|
||||
<Skeleton class="h-5 w-10 sm:h-6 sm:w-12" />
|
||||
<Skeleton class="h-6 w-6 rounded-full sm:h-8 sm:w-8" />
|
||||
<div class="min-w-0 flex-1">
|
||||
<Skeleton class="h-4 w-16 sm:w-20" />
|
||||
<Skeleton class="mt-1 h-3 w-12 sm:w-16" />
|
||||
</div>
|
||||
<Skeleton class="h-4 w-16" />
|
||||
<Skeleton class="h-4 w-16" />
|
||||
<Skeleton class="h-4 w-20" />
|
||||
<div class="hidden sm:block">
|
||||
<Skeleton class="h-4 w-16" />
|
||||
</div>
|
||||
<div class="hidden md:block">
|
||||
<Skeleton class="h-4 w-16" />
|
||||
</div>
|
||||
<Skeleton class="h-4 w-16 sm:w-20" />
|
||||
</div>
|
||||
{/each}
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -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}
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
|
|
|
|||
|
|
@ -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}
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
|
|
|
|||
|
|
@ -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}
|
||||
|
|
|
|||
Reference in a new issue