feat: mobile support + more skeletons
This commit is contained in:
Face
parent
ab6b6901db
commit
87d3b41e05
14 changed files with 589 additions and 367 deletions
|
|
@ -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