@@ -44,10 +45,8 @@
-
- {#each Array(6) as _}
-
- {/each}
+
+
diff --git a/website/src/lib/components/self/skeletons/HomeSkeleton.svelte b/website/src/lib/components/self/skeletons/HomeSkeleton.svelte
index 30d45c5..1a44589 100644
--- a/website/src/lib/components/self/skeletons/HomeSkeleton.svelte
+++ b/website/src/lib/components/self/skeletons/HomeSkeleton.svelte
@@ -3,13 +3,7 @@
import { Skeleton } from '$lib/components/ui/skeleton';
-
-
-
-
+
{#each Array(6) as _}
@@ -18,7 +12,7 @@
-
+
diff --git a/website/src/lib/components/self/skeletons/LeaderboardSkeleton.svelte b/website/src/lib/components/self/skeletons/LeaderboardSkeleton.svelte
index 62030ab..7682b61 100644
--- a/website/src/lib/components/self/skeletons/LeaderboardSkeleton.svelte
+++ b/website/src/lib/components/self/skeletons/LeaderboardSkeleton.svelte
@@ -3,30 +3,30 @@
import { Skeleton } from '$lib/components/ui/skeleton';
-
+
{#each Array(4) as _}
-
-
+
+
-
-
+
+
-
+
-
-
+
+
{#each Array(5) as _}
-
-
-
-
diff --git a/website/src/lib/components/self/skeletons/LiveTradeSkeleton.svelte b/website/src/lib/components/self/skeletons/LiveTradeSkeleton.svelte
new file mode 100644
index 0000000..1d04f7c
--- /dev/null
+++ b/website/src/lib/components/self/skeletons/LiveTradeSkeleton.svelte
@@ -0,0 +1,47 @@
+
+
+
+
+
+{#each Array(8) as _}
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+{/each}
diff --git a/website/src/lib/components/self/skeletons/PortfolioSkeleton.svelte b/website/src/lib/components/self/skeletons/PortfolioSkeleton.svelte
new file mode 100644
index 0000000..d4b92cb
--- /dev/null
+++ b/website/src/lib/components/self/skeletons/PortfolioSkeleton.svelte
@@ -0,0 +1,167 @@
+
+
+
+
+
+ {#each Array(3) as _}
+
+
+
+
+
+
+
+
+
+
+
+
+ {/each}
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ {#each Array(4) as _}
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ {/each}
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ {#each Array(5) as _}
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ {/each}
+
+
+
+
+
diff --git a/website/src/lib/components/self/skeletons/ProfileSkeleton.svelte b/website/src/lib/components/self/skeletons/ProfileSkeleton.svelte
index c69f23c..2612f28 100644
--- a/website/src/lib/components/self/skeletons/ProfileSkeleton.svelte
+++ b/website/src/lib/components/self/skeletons/ProfileSkeleton.svelte
@@ -9,25 +9,25 @@
@@ -40,32 +40,32 @@
-
+
-
-
+
+
{/each}
-
+
{#each Array(4) as _}
-
+
-
-
+
+
-
-
+
+
@@ -77,22 +77,26 @@
-
+
-
+
-
+
{#each Array(3) as _}
-
-
-
-
-
+
+
+
+
+
-
-
-
+
+
+
+
+
+
+
{/each}
@@ -104,23 +108,27 @@
-
+
-
+
-
+
{#each Array(5) as _}
-
-
-
-
-
-
+
+
+
+
+
+
-
-
-
+
+
+
+
+
+
+
{/each}
diff --git a/website/src/routes/+page.svelte b/website/src/routes/+page.svelte
index 6bcde8f..dff987d 100644
--- a/website/src/routes/+page.svelte
+++ b/website/src/routes/+page.svelte
@@ -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 @@
Market Overview
-
+
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();
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'
+ };
+ });
+ }
@@ -341,19 +356,19 @@
{:else}
-
-
+
+
-
-
{coin.name}
-
-
*{coin.symbol}
+
+
{coin.name}
+
+ *{coin.symbol}
{#if $isConnectedStore}
-
+
-
+
${formatPrice(coin.currentPrice)}
-
+
{#if coin.change24h >= 0}
{:else}
{/if}
- = 0 ? 'success' : 'destructive'}>
+ = 0 ? 'success' : 'destructive'} class="text-sm">
{coin.change24h >= 0 ? '+' : ''}{Number(coin.change24h).toFixed(2)}%
@@ -389,7 +404,7 @@
{#if coin.creatorName}
-
+
Created by
@@ -423,17 +438,26 @@
Price Chart ({selectedTimeframe})
-
- {#each ['1m', '5m', '15m', '1h', '4h', '1d'] as timeframe}
-
- {/each}
+
+
+
+ {currentTimeframeLabel}
+
+
+
+ {#each timeframeOptions as option}
+
+ {option.label}
+
+ {/each}
+
+
+
- {formatSupply(coin.circulatingSupply)}
+ {formatSupply(coin.circulatingSupply)}
of {formatSupply(coin.initialSupply)} total
diff --git a/website/src/routes/leaderboard/+page.svelte b/website/src/routes/leaderboard/+page.svelte
index 0fe946e..4b3013d 100644
--- a/website/src/routes/leaderboard/+page.svelte
+++ b/website/src/routes/leaderboard/+page.svelte
@@ -201,14 +201,14 @@
Leaderboard - Rugplay
-
-
-
+
+
+
-
Leaderboard
-
Top performers and market activity
+
Leaderboard
+
Top performers and market activity
-