feat: treemap, skeletons
This commit is contained in:
Face
parent
848eda70e4
commit
330ea7ad79
18 changed files with 1033 additions and 45 deletions
179
website/package-lock.json
generated
179
website/package-lock.json
generated
|
|
@ -13,6 +13,7 @@
|
|||
"@tailwindcss/postcss": "^4.1.7",
|
||||
"@tailwindcss/typography": "^0.5.16",
|
||||
"@visx/scale": "^3.12.0",
|
||||
"apexcharts": "^4.7.0",
|
||||
"better-auth": "^1.2.8",
|
||||
"drizzle-orm": "^0.33.0",
|
||||
"ioredis": "^5.6.1",
|
||||
|
|
@ -20,6 +21,7 @@
|
|||
"lucide-svelte": "^0.511.0",
|
||||
"mode-watcher": "^1.0.7",
|
||||
"postgres": "^3.4.4",
|
||||
"svelte-apexcharts": "^1.0.2",
|
||||
"svelte-lightweight-charts": "^2.2.0"
|
||||
},
|
||||
"devDependencies": {
|
||||
|
|
@ -1972,6 +1974,57 @@
|
|||
"vite": "^5.0.0"
|
||||
}
|
||||
},
|
||||
"node_modules/@svgdotjs/svg.draggable.js": {
|
||||
"version": "3.0.6",
|
||||
"resolved": "https://registry.npmjs.org/@svgdotjs/svg.draggable.js/-/svg.draggable.js-3.0.6.tgz",
|
||||
"integrity": "sha512-7iJFm9lL3C40HQcqzEfezK2l+dW2CpoVY3b77KQGqc8GXWa6LhhmX5Ckv7alQfUXBuZbjpICZ+Dvq1czlGx7gA==",
|
||||
"peerDependencies": {
|
||||
"@svgdotjs/svg.js": "^3.2.4"
|
||||
}
|
||||
},
|
||||
"node_modules/@svgdotjs/svg.filter.js": {
|
||||
"version": "3.0.9",
|
||||
"resolved": "https://registry.npmjs.org/@svgdotjs/svg.filter.js/-/svg.filter.js-3.0.9.tgz",
|
||||
"integrity": "sha512-/69XMRCDoam2HgC4ldHIaDgeQf1ViHIsa0Ld4uWgiXtZ+E24DWHe/9Ib6kbNiZ7WRIdlVokUDR1Fg0kjIpkfbw==",
|
||||
"dependencies": {
|
||||
"@svgdotjs/svg.js": "^3.2.4"
|
||||
},
|
||||
"engines": {
|
||||
"node": ">= 0.8.0"
|
||||
}
|
||||
},
|
||||
"node_modules/@svgdotjs/svg.js": {
|
||||
"version": "3.2.4",
|
||||
"resolved": "https://registry.npmjs.org/@svgdotjs/svg.js/-/svg.js-3.2.4.tgz",
|
||||
"integrity": "sha512-BjJ/7vWNowlX3Z8O4ywT58DqbNRyYlkk6Yz/D13aB7hGmfQTvGX4Tkgtm/ApYlu9M7lCQi15xUEidqMUmdMYwg==",
|
||||
"funding": {
|
||||
"type": "github",
|
||||
"url": "https://github.com/sponsors/Fuzzyma"
|
||||
}
|
||||
},
|
||||
"node_modules/@svgdotjs/svg.resize.js": {
|
||||
"version": "2.0.5",
|
||||
"resolved": "https://registry.npmjs.org/@svgdotjs/svg.resize.js/-/svg.resize.js-2.0.5.tgz",
|
||||
"integrity": "sha512-4heRW4B1QrJeENfi7326lUPYBCevj78FJs8kfeDxn5st0IYPIRXoTtOSYvTzFWgaWWXd3YCDE6ao4fmv91RthA==",
|
||||
"engines": {
|
||||
"node": ">= 14.18"
|
||||
},
|
||||
"peerDependencies": {
|
||||
"@svgdotjs/svg.js": "^3.2.4",
|
||||
"@svgdotjs/svg.select.js": "^4.0.1"
|
||||
}
|
||||
},
|
||||
"node_modules/@svgdotjs/svg.select.js": {
|
||||
"version": "4.0.3",
|
||||
"resolved": "https://registry.npmjs.org/@svgdotjs/svg.select.js/-/svg.select.js-4.0.3.tgz",
|
||||
"integrity": "sha512-qkMgso1sd2hXKd1FZ1weO7ANq12sNmQJeGDjs46QwDVsxSRcHmvWKL2NDF7Yimpwf3sl5esOLkPqtV2bQ3v/Jg==",
|
||||
"engines": {
|
||||
"node": ">= 14.18"
|
||||
},
|
||||
"peerDependencies": {
|
||||
"@svgdotjs/svg.js": "^3.2.4"
|
||||
}
|
||||
},
|
||||
"node_modules/@swc/helpers": {
|
||||
"version": "0.5.17",
|
||||
"resolved": "https://registry.npmjs.org/@swc/helpers/-/helpers-0.5.17.tgz",
|
||||
|
|
@ -2396,6 +2449,11 @@
|
|||
"node": ">=12"
|
||||
}
|
||||
},
|
||||
"node_modules/@yr/monotone-cubic-spline": {
|
||||
"version": "1.0.3",
|
||||
"resolved": "https://registry.npmjs.org/@yr/monotone-cubic-spline/-/monotone-cubic-spline-1.0.3.tgz",
|
||||
"integrity": "sha512-FQXkOta0XBSUPHndIKON2Y9JeQz5ZeMqLYZVVK93FliNBFm7LNMIZmY6FrMEB9XPcDbE2bekMbZD6kzDkxwYjA=="
|
||||
},
|
||||
"node_modules/acorn": {
|
||||
"version": "8.14.1",
|
||||
"license": "MIT",
|
||||
|
|
@ -2406,6 +2464,19 @@
|
|||
"node": ">=0.4.0"
|
||||
}
|
||||
},
|
||||
"node_modules/apexcharts": {
|
||||
"version": "4.7.0",
|
||||
"resolved": "https://registry.npmjs.org/apexcharts/-/apexcharts-4.7.0.tgz",
|
||||
"integrity": "sha512-iZSrrBGvVlL+nt2B1NpqfDuBZ9jX61X9I2+XV0hlYXHtTwhwLTHDKGXjNXAgFBDLuvSYCB/rq2nPWVPRv2DrGA==",
|
||||
"dependencies": {
|
||||
"@svgdotjs/svg.draggable.js": "^3.0.4",
|
||||
"@svgdotjs/svg.filter.js": "^3.0.8",
|
||||
"@svgdotjs/svg.js": "^3.2.4",
|
||||
"@svgdotjs/svg.resize.js": "^2.0.2",
|
||||
"@svgdotjs/svg.select.js": "^4.0.1",
|
||||
"@yr/monotone-cubic-spline": "^1.0.3"
|
||||
}
|
||||
},
|
||||
"node_modules/aria-query": {
|
||||
"version": "5.3.2",
|
||||
"license": "Apache-2.0",
|
||||
|
|
@ -3905,6 +3976,31 @@
|
|||
"node": ">=18"
|
||||
}
|
||||
},
|
||||
"node_modules/svelte-apexcharts": {
|
||||
"version": "1.0.2",
|
||||
"resolved": "https://registry.npmjs.org/svelte-apexcharts/-/svelte-apexcharts-1.0.2.tgz",
|
||||
"integrity": "sha512-6qlx4rE+XsonZ0FZudfwqOQ34Pq+3wpxgAD75zgEmGoYhYBJcwmikTuTf3o8ZBsZue9U/pAwhNy3ed1Bkq1gmA==",
|
||||
"dependencies": {
|
||||
"apexcharts": "^3.19.2"
|
||||
},
|
||||
"peerDependencies": {
|
||||
"apexcharts": "^3.19.2"
|
||||
}
|
||||
},
|
||||
"node_modules/svelte-apexcharts/node_modules/apexcharts": {
|
||||
"version": "3.54.1",
|
||||
"resolved": "https://registry.npmjs.org/apexcharts/-/apexcharts-3.54.1.tgz",
|
||||
"integrity": "sha512-E4et0h/J1U3r3EwS/WlqJCQIbepKbp6wGUmaAwJOMjHUP4Ci0gxanLa7FR3okx6p9coi4st6J853/Cb1NP0vpA==",
|
||||
"dependencies": {
|
||||
"@yr/monotone-cubic-spline": "^1.0.3",
|
||||
"svg.draggable.js": "^2.2.2",
|
||||
"svg.easing.js": "^2.0.0",
|
||||
"svg.filter.js": "^2.0.2",
|
||||
"svg.pathmorphing.js": "^0.1.3",
|
||||
"svg.resize.js": "^1.4.3",
|
||||
"svg.select.js": "^3.0.1"
|
||||
}
|
||||
},
|
||||
"node_modules/svelte-check": {
|
||||
"version": "4.2.1",
|
||||
"dev": true,
|
||||
|
|
@ -3984,6 +4080,89 @@
|
|||
"svelte": "^5.0.0"
|
||||
}
|
||||
},
|
||||
"node_modules/svg.draggable.js": {
|
||||
"version": "2.2.2",
|
||||
"resolved": "https://registry.npmjs.org/svg.draggable.js/-/svg.draggable.js-2.2.2.tgz",
|
||||
"integrity": "sha512-JzNHBc2fLQMzYCZ90KZHN2ohXL0BQJGQimK1kGk6AvSeibuKcIdDX9Kr0dT9+UJ5O8nYA0RB839Lhvk4CY4MZw==",
|
||||
"dependencies": {
|
||||
"svg.js": "^2.0.1"
|
||||
},
|
||||
"engines": {
|
||||
"node": ">= 0.8.0"
|
||||
}
|
||||
},
|
||||
"node_modules/svg.easing.js": {
|
||||
"version": "2.0.0",
|
||||
"resolved": "https://registry.npmjs.org/svg.easing.js/-/svg.easing.js-2.0.0.tgz",
|
||||
"integrity": "sha512-//ctPdJMGy22YoYGV+3HEfHbm6/69LJUTAqI2/5qBvaNHZ9uUFVC82B0Pl299HzgH13rKrBgi4+XyXXyVWWthA==",
|
||||
"dependencies": {
|
||||
"svg.js": ">=2.3.x"
|
||||
},
|
||||
"engines": {
|
||||
"node": ">= 0.8.0"
|
||||
}
|
||||
},
|
||||
"node_modules/svg.filter.js": {
|
||||
"version": "2.0.2",
|
||||
"resolved": "https://registry.npmjs.org/svg.filter.js/-/svg.filter.js-2.0.2.tgz",
|
||||
"integrity": "sha512-xkGBwU+dKBzqg5PtilaTb0EYPqPfJ9Q6saVldX+5vCRy31P6TlRCP3U9NxH3HEufkKkpNgdTLBJnmhDHeTqAkw==",
|
||||
"dependencies": {
|
||||
"svg.js": "^2.2.5"
|
||||
},
|
||||
"engines": {
|
||||
"node": ">= 0.8.0"
|
||||
}
|
||||
},
|
||||
"node_modules/svg.js": {
|
||||
"version": "2.7.1",
|
||||
"resolved": "https://registry.npmjs.org/svg.js/-/svg.js-2.7.1.tgz",
|
||||
"integrity": "sha512-ycbxpizEQktk3FYvn/8BH+6/EuWXg7ZpQREJvgacqn46gIddG24tNNe4Son6omdXCnSOaApnpZw6MPCBA1dODA=="
|
||||
},
|
||||
"node_modules/svg.pathmorphing.js": {
|
||||
"version": "0.1.3",
|
||||
"resolved": "https://registry.npmjs.org/svg.pathmorphing.js/-/svg.pathmorphing.js-0.1.3.tgz",
|
||||
"integrity": "sha512-49HWI9X4XQR/JG1qXkSDV8xViuTLIWm/B/7YuQELV5KMOPtXjiwH4XPJvr/ghEDibmLQ9Oc22dpWpG0vUDDNww==",
|
||||
"dependencies": {
|
||||
"svg.js": "^2.4.0"
|
||||
},
|
||||
"engines": {
|
||||
"node": ">= 0.8.0"
|
||||
}
|
||||
},
|
||||
"node_modules/svg.resize.js": {
|
||||
"version": "1.4.3",
|
||||
"resolved": "https://registry.npmjs.org/svg.resize.js/-/svg.resize.js-1.4.3.tgz",
|
||||
"integrity": "sha512-9k5sXJuPKp+mVzXNvxz7U0uC9oVMQrrf7cFsETznzUDDm0x8+77dtZkWdMfRlmbkEEYvUn9btKuZ3n41oNA+uw==",
|
||||
"dependencies": {
|
||||
"svg.js": "^2.6.5",
|
||||
"svg.select.js": "^2.1.2"
|
||||
},
|
||||
"engines": {
|
||||
"node": ">= 0.8.0"
|
||||
}
|
||||
},
|
||||
"node_modules/svg.resize.js/node_modules/svg.select.js": {
|
||||
"version": "2.1.2",
|
||||
"resolved": "https://registry.npmjs.org/svg.select.js/-/svg.select.js-2.1.2.tgz",
|
||||
"integrity": "sha512-tH6ABEyJsAOVAhwcCjF8mw4crjXSI1aa7j2VQR8ZuJ37H2MBUbyeqYr5nEO7sSN3cy9AR9DUwNg0t/962HlDbQ==",
|
||||
"dependencies": {
|
||||
"svg.js": "^2.2.5"
|
||||
},
|
||||
"engines": {
|
||||
"node": ">= 0.8.0"
|
||||
}
|
||||
},
|
||||
"node_modules/svg.select.js": {
|
||||
"version": "3.0.1",
|
||||
"resolved": "https://registry.npmjs.org/svg.select.js/-/svg.select.js-3.0.1.tgz",
|
||||
"integrity": "sha512-h5IS/hKkuVCbKSieR9uQCj9w+zLHoPh+ce19bBYyqF53g6mnPB8sAtIbe1s9dh2S2fCmYX2xel1Ln3PJBbK4kw==",
|
||||
"dependencies": {
|
||||
"svg.js": "^2.6.5"
|
||||
},
|
||||
"engines": {
|
||||
"node": ">= 0.8.0"
|
||||
}
|
||||
},
|
||||
"node_modules/tabbable": {
|
||||
"version": "6.2.0",
|
||||
"resolved": "https://registry.npmjs.org/tabbable/-/tabbable-6.2.0.tgz",
|
||||
|
|
|
|||
|
|
@ -44,6 +44,7 @@
|
|||
"@tailwindcss/postcss": "^4.1.7",
|
||||
"@tailwindcss/typography": "^0.5.16",
|
||||
"@visx/scale": "^3.12.0",
|
||||
"apexcharts": "^4.7.0",
|
||||
"better-auth": "^1.2.8",
|
||||
"drizzle-orm": "^0.33.0",
|
||||
"ioredis": "^5.6.1",
|
||||
|
|
@ -51,6 +52,7 @@
|
|||
"lucide-svelte": "^0.511.0",
|
||||
"mode-watcher": "^1.0.7",
|
||||
"postgres": "^3.4.4",
|
||||
"svelte-apexcharts": "^1.0.2",
|
||||
"svelte-lightweight-charts": "^2.2.0"
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -23,7 +23,8 @@
|
|||
Settings,
|
||||
Gift,
|
||||
Shield,
|
||||
Ticket
|
||||
Ticket,
|
||||
BarChart3
|
||||
} from 'lucide-svelte';
|
||||
import { mode, setMode } from 'mode-watcher';
|
||||
import type { HTMLAttributes } from 'svelte/elements';
|
||||
|
|
@ -44,6 +45,7 @@
|
|||
{ title: 'Market', url: '/market', icon: Store },
|
||||
{ title: 'Portfolio', url: '/portfolio', icon: BriefcaseBusiness },
|
||||
{ title: 'Leaderboard', url: '/leaderboard', icon: Trophy },
|
||||
{ title: 'Treemap', url: '/treemap', icon: BarChart3 },
|
||||
{ title: 'Create coin', url: '/coin/create', icon: Coins }
|
||||
]
|
||||
};
|
||||
|
|
|
|||
|
|
@ -1,6 +1,6 @@
|
|||
<script lang="ts">
|
||||
import { Button } from '$lib/components/ui/button';
|
||||
import { Gift, Clock, CheckCircle, Flame, Loader2 } from 'lucide-svelte';
|
||||
import { Gift, Clock, Loader2, CheckIcon } from 'lucide-svelte';
|
||||
import { USER_DATA } from '$lib/stores/user-data';
|
||||
import { fetchPortfolioData } from '$lib/stores/portfolio-data';
|
||||
import { toast } from 'svelte-sonner';
|
||||
|
|
@ -143,7 +143,7 @@
|
|||
<Loader2 class="h-4 w-4 animate-spin" />
|
||||
<span>{!rewardStatus ? 'Loading...' : 'Claiming...'}</span>
|
||||
{:else if claimState === 'success'}
|
||||
<CheckCircle class="h-4 w-4" />
|
||||
<CheckIcon class="h-4 w-4" />
|
||||
<span>Claimed!</span>
|
||||
{:else if rewardStatus.canClaim}
|
||||
<Gift class="h-4 w-4" />
|
||||
|
|
|
|||
163
website/src/lib/components/self/skeletons/CoinSkeleton.svelte
Normal file
163
website/src/lib/components/self/skeletons/CoinSkeleton.svelte
Normal file
|
|
@ -0,0 +1,163 @@
|
|||
<script lang="ts">
|
||||
import * as Card from '$lib/components/ui/card';
|
||||
import { Skeleton } from '$lib/components/ui/skeleton';
|
||||
</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>
|
||||
</div>
|
||||
</div>
|
||||
<div class="text-right">
|
||||
<Skeleton class="mb-2 h-8 w-32" />
|
||||
<div class="mt-2 flex items-center gap-2">
|
||||
<Skeleton class="h-4 w-4" />
|
||||
<Skeleton class="h-6 w-16" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Creator Info Skeleton -->
|
||||
<div class="text-muted-foreground flex 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" />
|
||||
</div>
|
||||
</header>
|
||||
|
||||
<div class="grid gap-6">
|
||||
<!-- Price Chart with Trading Actions -->
|
||||
<div class="grid grid-cols-1 gap-6 lg:grid-cols-3">
|
||||
<!-- Chart (2/3 width) -->
|
||||
<div class="lg:col-span-2">
|
||||
<Card.Root>
|
||||
<Card.Header class="pb-4">
|
||||
<div class="flex items-center justify-between">
|
||||
<Card.Title class="flex items-center gap-2">
|
||||
<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>
|
||||
</div>
|
||||
</Card.Header>
|
||||
<Card.Content class="pt-0">
|
||||
<Skeleton class="h-[500px] w-full" />
|
||||
</Card.Content>
|
||||
</Card.Root>
|
||||
</div>
|
||||
|
||||
<!-- Right side - Trading Actions + Liquidity Pool (1/3 width) -->
|
||||
<div class="space-y-6 lg:col-span-1">
|
||||
<!-- Trading Actions Skeleton -->
|
||||
<Card.Root>
|
||||
<Card.Header class="pb-4">
|
||||
<Card.Title>
|
||||
<Skeleton class="h-6 w-24" />
|
||||
</Card.Title>
|
||||
<Skeleton class="h-4 w-32" />
|
||||
</Card.Header>
|
||||
<Card.Content class="pt-0">
|
||||
<div class="space-y-3">
|
||||
<Skeleton class="h-11 w-full" />
|
||||
<Skeleton class="h-11 w-full" />
|
||||
</div>
|
||||
</Card.Content>
|
||||
</Card.Root>
|
||||
|
||||
<!-- Liquidity Pool Skeleton -->
|
||||
<Card.Root>
|
||||
<Card.Header class="pb-4">
|
||||
<Card.Title>
|
||||
<Skeleton class="h-6 w-28" />
|
||||
</Card.Title>
|
||||
</Card.Header>
|
||||
<Card.Content class="pt-0">
|
||||
<div class="space-y-4">
|
||||
<div>
|
||||
<Skeleton class="mb-3 h-5 w-32" />
|
||||
<div class="space-y-2">
|
||||
<div class="flex justify-between">
|
||||
<Skeleton class="h-4 w-16" />
|
||||
<Skeleton class="h-4 w-20" />
|
||||
</div>
|
||||
<div class="flex justify-between">
|
||||
<Skeleton class="h-4 w-24" />
|
||||
<Skeleton class="h-4 w-20" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
<Skeleton class="mb-3 h-5 w-20" />
|
||||
<div class="space-y-2">
|
||||
<div class="flex justify-between">
|
||||
<Skeleton class="h-4 w-24" />
|
||||
<Skeleton class="h-4 w-20" />
|
||||
</div>
|
||||
<div class="flex justify-between">
|
||||
<Skeleton class="h-4 w-20" />
|
||||
<Skeleton class="h-4 w-20" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</Card.Content>
|
||||
</Card.Root>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Statistics Grid Skeleton -->
|
||||
<div class="grid grid-cols-1 gap-4 md:grid-cols-2 lg:grid-cols-4">
|
||||
{#each Array(4) as _}
|
||||
<Card.Root>
|
||||
<Card.Header class="pb-2">
|
||||
<Card.Title class="flex items-center gap-2 text-sm font-medium">
|
||||
<Skeleton class="h-4 w-4" />
|
||||
<Skeleton class="h-4 w-20" />
|
||||
</Card.Title>
|
||||
</Card.Header>
|
||||
<Card.Content class="pt-0">
|
||||
<Skeleton class="mb-1 h-6 w-24" />
|
||||
<Skeleton class="h-3 w-16" />
|
||||
</Card.Content>
|
||||
</Card.Root>
|
||||
{/each}
|
||||
</div>
|
||||
|
||||
<!-- Comments Section Skeleton -->
|
||||
<Card.Root>
|
||||
<Card.Header class="pb-4">
|
||||
<Card.Title class="flex items-center gap-2">
|
||||
<Skeleton class="h-5 w-5" />
|
||||
<Skeleton class="h-6 w-20" />
|
||||
</Card.Title>
|
||||
</Card.Header>
|
||||
<Card.Content class="pt-0">
|
||||
<div class="space-y-4">
|
||||
{#each Array(3) as _}
|
||||
<div class="flex gap-3 border-b pb-4 last:border-b-0">
|
||||
<Skeleton class="h-8 w-8 rounded-full" />
|
||||
<div class="flex-1">
|
||||
<div class="mb-2 flex items-center gap-2">
|
||||
<Skeleton class="h-4 w-24" />
|
||||
<Skeleton class="h-3 w-16" />
|
||||
</div>
|
||||
<Skeleton class="h-4 w-full" />
|
||||
<Skeleton class="mt-1 h-4 w-3/4" />
|
||||
</div>
|
||||
</div>
|
||||
{/each}
|
||||
</div>
|
||||
</Card.Content>
|
||||
</Card.Root>
|
||||
</div>
|
||||
|
|
@ -0,0 +1,62 @@
|
|||
<script lang="ts">
|
||||
import * as Card from '$lib/components/ui/card';
|
||||
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>
|
||||
|
||||
<!-- Top Coins Grid Skeleton -->
|
||||
<div class="grid grid-cols-1 gap-6 md:grid-cols-2 lg:grid-cols-3">
|
||||
{#each Array(6) as _}
|
||||
<Card.Root class="h-full">
|
||||
<Card.Header>
|
||||
<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" />
|
||||
</div>
|
||||
<Skeleton class="h-6 w-16" />
|
||||
</Card.Title>
|
||||
<Card.Description>
|
||||
<Skeleton class="h-4 w-28" />
|
||||
</Card.Description>
|
||||
</Card.Header>
|
||||
<Card.Content>
|
||||
<div class="flex items-baseline justify-between">
|
||||
<Skeleton class="h-9 w-24" />
|
||||
<Skeleton class="h-4 w-20" />
|
||||
</div>
|
||||
</Card.Content>
|
||||
</Card.Root>
|
||||
{/each}
|
||||
</div>
|
||||
|
||||
<!-- Market Overview Skeleton -->
|
||||
<div class="mt-12">
|
||||
<Skeleton class="mb-4 h-8 w-40" />
|
||||
<Card.Root>
|
||||
<Card.Content class="p-0">
|
||||
<div class="p-6">
|
||||
{#each Array(10) 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>
|
||||
<Skeleton class="h-4 w-16" />
|
||||
<Skeleton class="h-4 w-16" />
|
||||
<Skeleton class="h-4 w-20" />
|
||||
<Skeleton class="h-4 w-20" />
|
||||
</div>
|
||||
{/each}
|
||||
</div>
|
||||
</Card.Content>
|
||||
</Card.Root>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -0,0 +1,36 @@
|
|||
<script lang="ts">
|
||||
import * as Card from '$lib/components/ui/card';
|
||||
import { Skeleton } from '$lib/components/ui/skeleton';
|
||||
</script>
|
||||
|
||||
<div class="grid gap-6 lg:grid-cols-2">
|
||||
{#each Array(4) as _}
|
||||
<Card.Root>
|
||||
<Card.Header>
|
||||
<Card.Title class="flex items-center gap-2">
|
||||
<Skeleton class="h-6 w-6" />
|
||||
<Skeleton class="h-6 w-40" />
|
||||
</Card.Title>
|
||||
<Card.Description>
|
||||
<Skeleton class="h-4 w-64" />
|
||||
</Card.Description>
|
||||
</Card.Header>
|
||||
<Card.Content>
|
||||
<div class="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>
|
||||
<Skeleton class="h-4 w-20" />
|
||||
<Skeleton class="h-5 w-16" />
|
||||
</div>
|
||||
{/each}
|
||||
</div>
|
||||
</Card.Content>
|
||||
</Card.Root>
|
||||
{/each}
|
||||
</div>
|
||||
|
|
@ -0,0 +1,65 @@
|
|||
<script lang="ts">
|
||||
import * as Card from '$lib/components/ui/card';
|
||||
import { Skeleton } from '$lib/components/ui/skeleton';
|
||||
import { MediaQuery } from 'svelte/reactivity';
|
||||
|
||||
const isDesktop = new MediaQuery('(min-width: 768px)');
|
||||
let perPage = $derived(isDesktop.current ? 12 : 9);
|
||||
</script>
|
||||
|
||||
<!-- Pagination Info Skeleton -->
|
||||
<div class="mb-4 flex items-center justify-between">
|
||||
<Skeleton class="h-5 w-48" />
|
||||
<Skeleton class="h-5 w-24" />
|
||||
</div>
|
||||
|
||||
<!-- Market Grid Skeleton -->
|
||||
<div class="grid grid-cols-1 gap-6 md:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4">
|
||||
{#each Array(perPage) as _}
|
||||
<Card.Root class="gap-1">
|
||||
<Card.Header>
|
||||
<div class="flex items-start justify-between">
|
||||
<div class="flex items-center gap-3">
|
||||
<Skeleton class="h-8 w-8 rounded-full" />
|
||||
<div>
|
||||
<Skeleton class="mb-1 h-5 w-24" />
|
||||
<Skeleton class="h-4 w-16" />
|
||||
</div>
|
||||
</div>
|
||||
<div class="text-right">
|
||||
<Skeleton class="h-3 w-8" />
|
||||
</div>
|
||||
</div>
|
||||
</Card.Header>
|
||||
|
||||
<Card.Content>
|
||||
<div class="space-y-3">
|
||||
<!-- Price -->
|
||||
<div>
|
||||
<Skeleton class="mb-2 h-8 w-24" />
|
||||
<div class="mt-1 flex items-center gap-2">
|
||||
<Skeleton class="h-5 w-12" />
|
||||
<Skeleton class="h-5 w-16" />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Stats -->
|
||||
<div class="space-y-4 text-sm">
|
||||
<div class="flex justify-between">
|
||||
<Skeleton class="h-4 w-16" />
|
||||
<Skeleton class="h-4 w-12" />
|
||||
</div>
|
||||
<div class="flex justify-between">
|
||||
<Skeleton class="h-4 w-20" />
|
||||
<Skeleton class="h-4 w-12" />
|
||||
</div>
|
||||
<div class="flex justify-between">
|
||||
<Skeleton class="h-4 w-12" />
|
||||
<Skeleton class="h-4 w-16" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</Card.Content>
|
||||
</Card.Root>
|
||||
{/each}
|
||||
</div>
|
||||
128
website/src/lib/components/self/skeletons/ProfileSkeleton.svelte
Normal file
128
website/src/lib/components/self/skeletons/ProfileSkeleton.svelte
Normal file
|
|
@ -0,0 +1,128 @@
|
|||
<script lang="ts">
|
||||
import * as Card from '$lib/components/ui/card';
|
||||
import { Skeleton } from '$lib/components/ui/skeleton';
|
||||
</script>
|
||||
|
||||
<!-- Profile Header Skeleton -->
|
||||
<Card.Root class="mb-6 py-0">
|
||||
<Card.Content class="p-6">
|
||||
<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" />
|
||||
</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" />
|
||||
</div>
|
||||
<Skeleton class="h-6 w-32" />
|
||||
</div>
|
||||
|
||||
<Skeleton class="mb-3 h-4 w-full max-w-2xl" />
|
||||
<Skeleton class="mb-6 h-4 w-96" />
|
||||
|
||||
<div class="flex items-center gap-2">
|
||||
<Skeleton class="h-4 w-4" />
|
||||
<Skeleton class="h-4 w-24" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</Card.Content>
|
||||
</Card.Root>
|
||||
|
||||
<!-- Main Portfolio Stats Skeleton -->
|
||||
<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-4" />
|
||||
</div>
|
||||
<Skeleton class="mt-1 h-8 w-32" />
|
||||
<Skeleton class="mt-1 h-3 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">
|
||||
{#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-4" />
|
||||
</div>
|
||||
<div class="mt-1">
|
||||
<Skeleton class="h-8 w-28" />
|
||||
<Skeleton class="mt-1 h-3 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" />
|
||||
</div>
|
||||
</Card.Content>
|
||||
</Card.Root>
|
||||
{/each}
|
||||
</div>
|
||||
|
||||
<!-- Created Coins Skeleton -->
|
||||
<Card.Root class="mb-6">
|
||||
<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" />
|
||||
</Card.Title>
|
||||
<Skeleton class="h-4 w-48" />
|
||||
</Card.Header>
|
||||
<Card.Content class="p-0">
|
||||
<div class="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>
|
||||
<Skeleton class="h-4 w-16" />
|
||||
<Skeleton class="h-4 w-20" />
|
||||
<Skeleton class="h-4 w-16" />
|
||||
</div>
|
||||
{/each}
|
||||
</div>
|
||||
</Card.Content>
|
||||
</Card.Root>
|
||||
|
||||
<!-- Recent Trading Activity Skeleton -->
|
||||
<Card.Root>
|
||||
<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" />
|
||||
</Card.Title>
|
||||
<Skeleton class="h-4 w-52" />
|
||||
</Card.Header>
|
||||
<Card.Content class="p-0">
|
||||
<div class="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>
|
||||
<Skeleton class="h-4 w-16" />
|
||||
<Skeleton class="h-4 w-16" />
|
||||
<Skeleton class="h-4 w-20" />
|
||||
</div>
|
||||
{/each}
|
||||
</div>
|
||||
</Card.Content>
|
||||
</Card.Root>
|
||||
|
|
@ -64,6 +64,16 @@ export function formatValue(value: number | string): string {
|
|||
if (numValue >= 1e9) return `$${(numValue / 1e9).toFixed(2)}B`;
|
||||
if (numValue >= 1e6) return `$${(numValue / 1e6).toFixed(2)}M`;
|
||||
if (numValue >= 1e3) return `$${(numValue / 1e3).toFixed(2)}K`;
|
||||
|
||||
if (numValue < 0.01) {
|
||||
const str = numValue.toString();
|
||||
const match = str.match(/^0\.0*(\d{2})/);
|
||||
if (match) {
|
||||
const zerosAfterDecimal = str.indexOf(match[1]) - 2;
|
||||
return `$${numValue.toFixed(zerosAfterDecimal + 2)}`;
|
||||
}
|
||||
}
|
||||
|
||||
return `$${numValue.toFixed(2)}`;
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -6,6 +6,7 @@
|
|||
import SignInConfirmDialog from '$lib/components/self/SignInConfirmDialog.svelte';
|
||||
import CoinIcon from '$lib/components/self/CoinIcon.svelte';
|
||||
import DataTable from '$lib/components/self/DataTable.svelte';
|
||||
import HomeSkeleton from '$lib/components/self/skeletons/HomeSkeleton.svelte';
|
||||
import { onMount } from 'svelte';
|
||||
import { toast } from 'svelte-sonner';
|
||||
import { goto } from '$app/navigation';
|
||||
|
|
@ -102,11 +103,7 @@
|
|||
</header>
|
||||
|
||||
{#if loading}
|
||||
<div class="flex h-96 items-center justify-center">
|
||||
<div class="text-center">
|
||||
<div class="mb-4 text-xl">Loading market data...</div>
|
||||
</div>
|
||||
</div>
|
||||
<HomeSkeleton />
|
||||
{:else if coins.length === 0}
|
||||
<div class="flex h-96 items-center justify-center">
|
||||
<div class="text-center">
|
||||
|
|
|
|||
|
|
@ -13,7 +13,7 @@
|
|||
import { Alert, AlertDescription } from '$lib/components/ui/alert';
|
||||
import { Badge } from '$lib/components/ui/badge';
|
||||
import { Skeleton } from '$lib/components/ui/skeleton';
|
||||
import { Plus, Ticket, Users, Calendar, CheckCircle, XCircle, Loader2 } from 'lucide-svelte';
|
||||
import { Plus, Ticket, Users, Calendar, XCircle, Loader2, CheckIcon } from 'lucide-svelte';
|
||||
import { USER_DATA } from '$lib/stores/user-data';
|
||||
import { formatDate, getExpirationDate } from '$lib/utils';
|
||||
import type { PromoCode } from '$lib/types/promo-code';
|
||||
|
|
@ -216,7 +216,7 @@
|
|||
class={createSuccess ? 'text-success' : ''}
|
||||
>
|
||||
{#if createSuccess}
|
||||
<CheckCircle class="h-4 w-4 text-green-600" />
|
||||
<CheckIcon class="h-4 w-4 text-green-600" />
|
||||
{:else}
|
||||
<XCircle class="h-4 w-4" />
|
||||
{/if}
|
||||
|
|
|
|||
|
|
@ -180,6 +180,13 @@ export async function POST({ params, request }) {
|
|||
updatedAt: new Date()
|
||||
})
|
||||
.where(eq(coin.id, coinData.id));
|
||||
|
||||
await redis.publish(`prices:${normalizedSymbol}`, JSON.stringify({
|
||||
currentPrice: newPrice,
|
||||
marketCap: Number(coinData.circulatingSupply) * newPrice,
|
||||
change24h: metrics.change24h,
|
||||
volume24h: metrics.volume24h
|
||||
}));
|
||||
});
|
||||
|
||||
// REDIS
|
||||
|
|
@ -313,6 +320,13 @@ export async function POST({ params, request }) {
|
|||
updatedAt: new Date()
|
||||
})
|
||||
.where(eq(coin.id, coinData.id));
|
||||
|
||||
await redis.publish(`prices:${normalizedSymbol}`, JSON.stringify({
|
||||
currentPrice: newPrice,
|
||||
marketCap: Number(coinData.circulatingSupply) * newPrice,
|
||||
change24h: metrics.change24h,
|
||||
volume24h: metrics.volume24h
|
||||
}));
|
||||
});
|
||||
|
||||
// REDIS
|
||||
|
|
|
|||
|
|
@ -7,6 +7,7 @@
|
|||
import TradeModal from '$lib/components/self/TradeModal.svelte';
|
||||
import CommentSection from '$lib/components/self/CommentSection.svelte';
|
||||
import UserProfilePreview from '$lib/components/self/UserProfilePreview.svelte';
|
||||
import CoinSkeleton from '$lib/components/self/skeletons/CoinSkeleton.svelte';
|
||||
import { TrendingUp, TrendingDown, DollarSign, Coins, ChartColumn } from 'lucide-svelte';
|
||||
import {
|
||||
createChart,
|
||||
|
|
@ -259,26 +260,17 @@
|
|||
onSuccess={handleTradeSuccess}
|
||||
/>
|
||||
{/if}
|
||||
|
||||
{#if loading}
|
||||
<div class="container mx-auto max-w-7xl p-6">
|
||||
<div class="flex h-96 items-center justify-center">
|
||||
<div class="text-center">
|
||||
<div class="mb-4 text-xl">Loading coin data...</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
{:else if !coin}
|
||||
<div class="container mx-auto max-w-7xl p-6">
|
||||
<div class="container mx-auto max-w-7xl p-6">
|
||||
{#if loading}
|
||||
<CoinSkeleton />
|
||||
{:else if !coin}
|
||||
<div class="flex h-96 items-center justify-center">
|
||||
<div class="text-center">
|
||||
<div class="text-muted-foreground mb-4 text-xl">Coin not found</div>
|
||||
<Button onclick={() => goto('/')}>Go Home</Button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
{:else}
|
||||
<div class="container mx-auto max-w-7xl p-6">
|
||||
{:else}
|
||||
<!-- Header Section -->
|
||||
<header class="mb-8">
|
||||
<div class="mb-4 flex items-start justify-between">
|
||||
|
|
@ -535,5 +527,5 @@
|
|||
<!-- Comments Section -->
|
||||
<CommentSection {coinSymbol} />
|
||||
</div>
|
||||
</div>
|
||||
{/if}
|
||||
{/if}
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -4,6 +4,7 @@
|
|||
import { Badge } from '$lib/components/ui/badge';
|
||||
import { Button } from '$lib/components/ui/button';
|
||||
import DataTable from '$lib/components/self/DataTable.svelte';
|
||||
import LeaderboardSkeleton from '$lib/components/self/skeletons/LeaderboardSkeleton.svelte';
|
||||
import { onMount } from 'svelte';
|
||||
import { toast } from 'svelte-sonner';
|
||||
import { goto } from '$app/navigation';
|
||||
|
|
@ -215,11 +216,7 @@
|
|||
</header>
|
||||
|
||||
{#if loading}
|
||||
<div class="flex h-96 items-center justify-center">
|
||||
<div class="text-center">
|
||||
<div class="mb-4 text-xl">Loading leaderboard...</div>
|
||||
</div>
|
||||
</div>
|
||||
<LeaderboardSkeleton />
|
||||
{:else if !leaderboardData}
|
||||
<div class="flex h-96 items-center justify-center">
|
||||
<div class="text-center">
|
||||
|
|
|
|||
|
|
@ -8,6 +8,7 @@
|
|||
import { Badge } from '$lib/components/ui/badge';
|
||||
import { Label } from '$lib/components/ui/label';
|
||||
import CoinIcon from '$lib/components/self/CoinIcon.svelte';
|
||||
import MarketSkeleton from '$lib/components/self/skeletons/MarketSkeleton.svelte';
|
||||
import { onMount } from 'svelte';
|
||||
import { toast } from 'svelte-sonner';
|
||||
import { goto } from '$app/navigation';
|
||||
|
|
@ -410,12 +411,7 @@
|
|||
|
||||
<!-- Market Grid -->
|
||||
{#if loading}
|
||||
<div class="flex h-96 items-center justify-center">
|
||||
<div class="text-center">
|
||||
<div class="mb-4 text-xl">Loading market data...</div>
|
||||
<div class="text-muted-foreground">Fetching the latest coin prices and chaos levels</div>
|
||||
</div>
|
||||
</div>
|
||||
<MarketSkeleton />
|
||||
{:else if coins.length === 0}
|
||||
<div class="flex h-96 items-center justify-center">
|
||||
<div class="text-center">
|
||||
|
|
|
|||
350
website/src/routes/treemap/+page.svelte
Normal file
350
website/src/routes/treemap/+page.svelte
Normal file
|
|
@ -0,0 +1,350 @@
|
|||
<script lang="ts">
|
||||
import { onMount } from 'svelte';
|
||||
import { chart } from 'svelte-apexcharts';
|
||||
import { Skeleton } from '$lib/components/ui/skeleton';
|
||||
import * as Card from '$lib/components/ui/card';
|
||||
import { Badge } from '$lib/components/ui/badge';
|
||||
import { Activity, ChartColumn, Maximize, Minimize } from 'lucide-svelte';
|
||||
import { formatValue } from '$lib/utils';
|
||||
import { allTradesStore } from '$lib/stores/websocket';
|
||||
import { Button } from '$lib/components/ui/button';
|
||||
|
||||
interface CoinData {
|
||||
symbol: string;
|
||||
name: string;
|
||||
currentPrice: number;
|
||||
marketCap: number;
|
||||
priceChange24h: number;
|
||||
volume24h: number;
|
||||
}
|
||||
|
||||
let coins: CoinData[] = $state([]);
|
||||
let isLoading = $state(true);
|
||||
let error = $state<string | null>(null);
|
||||
let lastUpdated = $state<Date>(new Date());
|
||||
let isLiveUpdatesEnabled = $state(true);
|
||||
let isFullscreen = $state(false);
|
||||
let fullscreenContainer: HTMLDivElement;
|
||||
|
||||
let treemapOptions = $derived({
|
||||
series: [
|
||||
{
|
||||
data: coins.map((coin) => {
|
||||
const change = coin.priceChange24h;
|
||||
|
||||
if (Math.abs(change) < 0.5) {
|
||||
return { x: coin.symbol, y: coin.marketCap, fillColor: 'rgba(107,114,128,0.3)' };
|
||||
}
|
||||
|
||||
const intensity = Math.min(Math.abs(change) / 100, 1);
|
||||
const alpha = 0.3 + intensity * 0.7;
|
||||
|
||||
const base = change >= 0 ? '16,163,74' : '220,38,38';
|
||||
return { x: coin.symbol, y: coin.marketCap, fillColor: `rgba(${base},${alpha})` };
|
||||
})
|
||||
}
|
||||
],
|
||||
chart: {
|
||||
height: isFullscreen ? window.innerHeight - 300 : 600,
|
||||
type: 'treemap',
|
||||
toolbar: {
|
||||
show: false
|
||||
},
|
||||
background: 'transparent',
|
||||
animations: {
|
||||
enabled: true,
|
||||
easing: 'easeinout',
|
||||
speed: 200
|
||||
}
|
||||
},
|
||||
dataLabels: {
|
||||
enabled: true,
|
||||
style: {
|
||||
fontSize: '12px',
|
||||
fontWeight: 'bold',
|
||||
colors: ['#ffffff']
|
||||
},
|
||||
formatter: function (text: string, op: any) {
|
||||
const coin = coins.find((c) => c.symbol === text);
|
||||
if (!coin) return [text];
|
||||
const changeSign = coin.priceChange24h >= 0 ? '+' : '';
|
||||
return [text, `${changeSign}${coin.priceChange24h.toFixed(2)}%`];
|
||||
},
|
||||
offsetY: -4
|
||||
},
|
||||
plotOptions: {
|
||||
treemap: {
|
||||
distributed: true,
|
||||
enableShades: false
|
||||
}
|
||||
},
|
||||
legend: {
|
||||
show: false
|
||||
},
|
||||
tooltip: {
|
||||
enabled: true,
|
||||
custom: function ({ seriesIndex, dataPointIndex }: any) {
|
||||
const coin = coins[dataPointIndex];
|
||||
if (!coin) return '';
|
||||
|
||||
const changeColor = coin.priceChange24h >= 0 ? '#22c55e' : '#ef4444';
|
||||
const changeSign = coin.priceChange24h >= 0 ? '+' : '';
|
||||
|
||||
return `
|
||||
<div class="p-3 bg-card border rounded-md shadow-lg">
|
||||
<div class="font-semibold text-lg mb-2">*${coin.symbol}</div>
|
||||
<div class="text-sm text-muted-foreground mb-1">${coin.name}</div>
|
||||
<div class="space-y-1 text-xs">
|
||||
<div>Price: <span class="font-mono">${formatValue(coin.currentPrice)}</span></div>
|
||||
<div>Market Cap: <span class="font-mono">${formatValue(coin.marketCap)}</span></div>
|
||||
<div>24h Volume: <span class="font-mono">${formatValue(coin.volume24h)}</span></div>
|
||||
<div>24h Change: <span class="font-mono" style="color: ${changeColor}">${changeSign}${coin.priceChange24h.toFixed(2)}%</span></div>
|
||||
</div>
|
||||
</div>
|
||||
`;
|
||||
}
|
||||
},
|
||||
theme: {
|
||||
mode: 'light'
|
||||
}
|
||||
});
|
||||
|
||||
$effect(() => {
|
||||
if ($allTradesStore.length > 0 && isLiveUpdatesEnabled) {
|
||||
const timeoutId = setTimeout(() => {
|
||||
fetchCoins();
|
||||
}, 2000);
|
||||
|
||||
return () => clearTimeout(timeoutId);
|
||||
}
|
||||
});
|
||||
|
||||
$effect(() => {
|
||||
function handleFullscreenChange() {
|
||||
isFullscreen = !!document.fullscreenElement;
|
||||
}
|
||||
|
||||
document.addEventListener('fullscreenchange', handleFullscreenChange);
|
||||
document.addEventListener('webkitfullscreenchange', handleFullscreenChange);
|
||||
document.addEventListener('mozfullscreenchange', handleFullscreenChange);
|
||||
document.addEventListener('MSFullscreenChange', handleFullscreenChange);
|
||||
|
||||
return () => {
|
||||
document.removeEventListener('fullscreenchange', handleFullscreenChange);
|
||||
document.removeEventListener('webkitfullscreenchange', handleFullscreenChange);
|
||||
document.removeEventListener('mozfullscreenchange', handleFullscreenChange);
|
||||
document.removeEventListener('MSFullscreenChange', handleFullscreenChange);
|
||||
};
|
||||
});
|
||||
|
||||
async function toggleFullscreen() {
|
||||
if (!document.fullscreenElement) {
|
||||
try {
|
||||
await fullscreenContainer.requestFullscreen();
|
||||
} catch (err) {
|
||||
console.error('Error attempting to enable fullscreen:', err);
|
||||
}
|
||||
} else {
|
||||
try {
|
||||
await document.exitFullscreen();
|
||||
} catch (err) {
|
||||
console.error('Error attempting to exit fullscreen:', err);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
async function fetchCoins() {
|
||||
try {
|
||||
if (coins.length === 0) {
|
||||
isLoading = true;
|
||||
}
|
||||
error = null;
|
||||
|
||||
const response = await fetch('/api/market?limit=100');
|
||||
if (!response.ok) {
|
||||
throw new Error('Failed to fetch coins data');
|
||||
}
|
||||
|
||||
const data = await response.json();
|
||||
coins =
|
||||
data.coins.map((coin: any) => ({
|
||||
symbol: coin.symbol,
|
||||
name: coin.name,
|
||||
currentPrice: coin.currentPrice,
|
||||
marketCap: coin.marketCap,
|
||||
priceChange24h: coin.change24h,
|
||||
volume24h: coin.volume24h
|
||||
})) || [];
|
||||
|
||||
lastUpdated = new Date();
|
||||
} catch (err) {
|
||||
error = err instanceof Error ? err.message : 'An error occurred';
|
||||
console.error('Error fetching coins:', err);
|
||||
} finally {
|
||||
isLoading = false;
|
||||
}
|
||||
}
|
||||
|
||||
onMount(() => {
|
||||
fetchCoins();
|
||||
});
|
||||
</script>
|
||||
|
||||
<svelte:head>
|
||||
<title>Treemap - Rugplay</title>
|
||||
<meta name="description" content="Cryptocurrency market treemap visualization" />
|
||||
</svelte:head>
|
||||
|
||||
<div
|
||||
bind:this={fullscreenContainer}
|
||||
class="treemap-container {isFullscreen ? 'fullscreen-mode' : ''}"
|
||||
>
|
||||
<div class="container mx-auto px-4 py-8 {isFullscreen ? 'fullscreen-content' : ''}">
|
||||
<div class="mb-6">
|
||||
<div class="mb-2 flex items-center justify-between">
|
||||
<div class="flex items-center gap-3">
|
||||
<ChartColumn class="h-6 w-6" />
|
||||
<h1 class="text-2xl font-bold">Market Treemap</h1>
|
||||
</div>
|
||||
<div class="flex items-center gap-2">
|
||||
<Button
|
||||
variant="outline"
|
||||
size="sm"
|
||||
onclick={() => (isLiveUpdatesEnabled = !isLiveUpdatesEnabled)}
|
||||
class={isLiveUpdatesEnabled
|
||||
? 'border-green-500 text-green-500'
|
||||
: 'border-red-500 text-red-500'}
|
||||
>
|
||||
{#if isLiveUpdatesEnabled}
|
||||
<Activity class="h-4 w-4" />
|
||||
Live
|
||||
{:else}
|
||||
<Activity class="h-4 w-4" />
|
||||
Paused
|
||||
{/if}
|
||||
</Button>
|
||||
<Button variant="outline" size="sm" onclick={toggleFullscreen}>
|
||||
{#if isFullscreen}
|
||||
<Minimize class="h-4 w-4" />
|
||||
Exit Fullscreen
|
||||
{:else}
|
||||
<Maximize class="h-4 w-4" />
|
||||
Fullscreen
|
||||
{/if}
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
<p class="text-muted-foreground">
|
||||
Visual representation of the cryptocurrency market. Size indicates market cap, color shows
|
||||
24h price change.
|
||||
</p>
|
||||
{#if coins.length > 0}
|
||||
<p class="text-muted-foreground mt-1 text-sm">
|
||||
Last updated: {lastUpdated.toLocaleTimeString()}
|
||||
</p>
|
||||
{/if}
|
||||
</div>
|
||||
|
||||
{#if isLoading && coins.length === 0}
|
||||
<Card.Root>
|
||||
<Card.Header>
|
||||
<Card.Title class="flex items-center gap-2">
|
||||
<Skeleton class="h-5 w-5" />
|
||||
<Skeleton class="h-6 w-48" />
|
||||
</Card.Title>
|
||||
<Card.Description>
|
||||
<Skeleton class="h-4 w-64" />
|
||||
</Card.Description>
|
||||
</Card.Header>
|
||||
<Card.Content>
|
||||
<Skeleton class="h-[600px] w-full" />
|
||||
</Card.Content>
|
||||
</Card.Root>
|
||||
{:else if error}
|
||||
<Card.Root>
|
||||
<Card.Content class="p-8 text-center">
|
||||
<div class="text-muted-foreground mb-4">
|
||||
<ChartColumn class="mx-auto mb-2 h-12 w-12 opacity-50" />
|
||||
<p class="text-lg font-medium">Failed to load treemap</p>
|
||||
<p class="text-sm">{error}</p>
|
||||
</div>
|
||||
<Button onclick={fetchCoins}>Try Again</Button>
|
||||
</Card.Content>
|
||||
</Card.Root>
|
||||
{:else if coins.length === 0}
|
||||
<Card.Root>
|
||||
<Card.Content class="p-8 text-center">
|
||||
<div class="text-muted-foreground">
|
||||
<ChartColumn class="mx-auto mb-2 h-12 w-12 opacity-50" />
|
||||
<p class="text-lg font-medium">No coins available</p>
|
||||
<p class="text-sm">Create some coins to see the treemap visualization.</p>
|
||||
</div>
|
||||
</Card.Content>
|
||||
</Card.Root>
|
||||
{:else}
|
||||
<Card.Root>
|
||||
<Card.Content class="p-6">
|
||||
<div class="text-muted-foreground mb-4 flex flex-wrap gap-4 text-sm">
|
||||
<div class="flex items-center gap-2">
|
||||
<div class="h-3 w-3 rounded bg-green-500"></div>
|
||||
<span>Positive 24h change</span>
|
||||
</div>
|
||||
<div class="flex items-center gap-2">
|
||||
<div class="h-3 w-3 rounded bg-red-500"></div>
|
||||
<span>Negative 24h change</span>
|
||||
</div>
|
||||
<Badge variant="outline" class="ml-auto">
|
||||
{coins.length} coins
|
||||
</Badge>
|
||||
</div>
|
||||
<div use:chart={treemapOptions}></div>
|
||||
</Card.Content>
|
||||
</Card.Root>
|
||||
{/if}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<style>
|
||||
.treemap-container.fullscreen-mode {
|
||||
background: hsl(var(--background));
|
||||
padding: 1rem;
|
||||
height: 100vh;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.treemap-container.fullscreen-mode .container {
|
||||
max-width: none;
|
||||
padding: 0;
|
||||
height: 100%;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.treemap-container.fullscreen-mode .fullscreen-content {
|
||||
height: 100%;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
padding: 1rem 0;
|
||||
}
|
||||
|
||||
.treemap-container.fullscreen-mode .mb-6 {
|
||||
margin-bottom: 1rem;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.treemap-container.fullscreen-mode :global(.card) {
|
||||
flex: 1;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.treemap-container.fullscreen-mode :global(.card .card-content) {
|
||||
flex: 1;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
:global(.fullscreen-mode) {
|
||||
z-index: 9999;
|
||||
}
|
||||
</style>
|
||||
|
|
@ -5,6 +5,7 @@
|
|||
import { Button } from '$lib/components/ui/button';
|
||||
import DataTable from '$lib/components/self/DataTable.svelte';
|
||||
import ProfileBadges from '$lib/components/self/ProfileBadges.svelte';
|
||||
import ProfileSkeleton from '$lib/components/self/skeletons/ProfileSkeleton.svelte';
|
||||
import { getPublicUrl, formatPrice, formatValue, formatQuantity, formatDate } from '$lib/utils';
|
||||
import { onMount } from 'svelte';
|
||||
import { toast } from 'svelte-sonner';
|
||||
|
|
@ -15,8 +16,7 @@
|
|||
TrendingDown,
|
||||
Coins,
|
||||
Receipt,
|
||||
Activity,
|
||||
RefreshCw
|
||||
Activity
|
||||
} from 'lucide-svelte';
|
||||
import { goto } from '$app/navigation';
|
||||
import type { UserProfileData } from '$lib/types/user-profile';
|
||||
|
|
@ -208,12 +208,7 @@
|
|||
|
||||
<div class="container mx-auto max-w-6xl p-6">
|
||||
{#if loading}
|
||||
<div class="flex h-96 items-center justify-center">
|
||||
<div class="text-center">
|
||||
<RefreshCw class="text-muted-foreground mx-auto mb-4 h-8 w-8 animate-spin" />
|
||||
<div class="text-xl">Loading profile...</div>
|
||||
</div>
|
||||
</div>
|
||||
<ProfileSkeleton />
|
||||
{:else if !profileData}
|
||||
<div class="flex h-96 items-center justify-center">
|
||||
<div class="text-center">
|
||||
|
|
|
|||
Reference in a new issue