feat: sending money / coins
This commit is contained in:
Face
parent
4e58d20e84
commit
de0987a007
14 changed files with 2825 additions and 325 deletions
|
|
@ -1,16 +0,0 @@
|
|||
import { auth } from '$lib/auth';
|
||||
import { redirect } from '@sveltejs/kit';
|
||||
|
||||
export async function load({ request }) {
|
||||
const session = await auth.api.getSession({
|
||||
headers: request.headers
|
||||
});
|
||||
|
||||
if (!session?.user) {
|
||||
throw redirect(302, '/');
|
||||
}
|
||||
|
||||
return {
|
||||
user: session.user
|
||||
};
|
||||
}
|
||||
|
|
@ -1,23 +1,23 @@
|
|||
<script lang="ts">
|
||||
import * as Card from '$lib/components/ui/card';
|
||||
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 SEO from '$lib/components/self/SEO.svelte';
|
||||
import { getPublicUrl, formatPrice, formatValue, formatQuantity, formatDate } from '$lib/utils';
|
||||
import { formatPrice, formatValue, formatQuantity, formatDate } from '$lib/utils';
|
||||
import { onMount } from 'svelte';
|
||||
import { toast } from 'svelte-sonner';
|
||||
import { TrendingUp, DollarSign, Wallet, TrendingDown, Clock, Receipt } from 'lucide-svelte';
|
||||
import { TrendingUp, DollarSign, Wallet, Receipt, Send } from 'lucide-svelte';
|
||||
import { goto } from '$app/navigation';
|
||||
import { USER_DATA } from '$lib/stores/user-data';
|
||||
import SendMoneyModal from '$lib/components/self/SendMoneyModal.svelte';
|
||||
|
||||
let { data } = $props();
|
||||
|
||||
// TODO: add type definitions
|
||||
let portfolioData = $state<any>(null);
|
||||
let transactions = $state<any[]>([]);
|
||||
let loading = $state(true);
|
||||
let error = $state<string | null>(null);
|
||||
let sendMoneyModalOpen = $state(false);
|
||||
|
||||
onMount(async () => {
|
||||
await Promise.all([fetchPortfolioData(), fetchRecentTransactions()]);
|
||||
|
|
@ -125,51 +125,100 @@
|
|||
{
|
||||
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'
|
||||
})
|
||||
class: 'w-[12%] min-w-[60px] md:w-[8%]',
|
||||
render: (value: any, row: any) => {
|
||||
if (row.isTransfer) {
|
||||
return {
|
||||
component: 'badge',
|
||||
variant: 'default',
|
||||
text: row.isIncoming ? 'Received' : 'Sent',
|
||||
class: 'text-xs'
|
||||
};
|
||||
}
|
||||
return {
|
||||
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%]',
|
||||
class: 'w-[20%] min-w-[100px] md:w-[12%]',
|
||||
render: (value: any, row: any) => {
|
||||
if (row.isTransfer) {
|
||||
if (row.isCoinTransfer && row.coin) {
|
||||
return {
|
||||
component: 'coin',
|
||||
icon: row.coin.icon,
|
||||
symbol: row.coin.symbol,
|
||||
name: `*${row.coin.symbol}`,
|
||||
size: 4
|
||||
};
|
||||
}
|
||||
return { component: 'text', text: '-' };
|
||||
}
|
||||
return {
|
||||
component: 'coin',
|
||||
icon: row.coin.icon,
|
||||
symbol: row.coin.symbol,
|
||||
name: `*${row.coin.symbol}`,
|
||||
size: 4
|
||||
};
|
||||
}
|
||||
},
|
||||
{
|
||||
key: 'sender',
|
||||
label: 'Sender',
|
||||
class: 'w-[12%] min-w-[70px] md:w-[10%]',
|
||||
render: (value: any, row: any) => ({
|
||||
component: 'coin',
|
||||
icon: row.coin.icon,
|
||||
symbol: row.coin.symbol,
|
||||
name: `*${row.coin.symbol}`,
|
||||
size: 4
|
||||
component: 'text',
|
||||
text: row.isTransfer ? row.sender || 'Unknown' : '-',
|
||||
class:
|
||||
row.isTransfer && row.sender && row.sender !== 'Unknown'
|
||||
? 'font-medium'
|
||||
: 'text-muted-foreground'
|
||||
})
|
||||
},
|
||||
{
|
||||
key: 'recipient',
|
||||
label: 'Receiver',
|
||||
class: 'w-[12%] min-w-[70px] md:w-[10%]',
|
||||
render: (value: any, row: any) => ({
|
||||
component: 'text',
|
||||
text: row.isTransfer ? row.recipient || 'Unknown' : '-',
|
||||
class:
|
||||
row.isTransfer && row.recipient && row.recipient !== 'Unknown'
|
||||
? 'font-medium'
|
||||
: 'text-muted-foreground'
|
||||
})
|
||||
},
|
||||
{
|
||||
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)}`
|
||||
class: 'w-[12%] min-w-[70px] md:w-[10%] font-mono text-sm',
|
||||
render: (value: any, row: any) =>
|
||||
row.isTransfer && value === 0 ? '-' : formatQuantity(value)
|
||||
},
|
||||
{
|
||||
key: 'totalBaseCurrencyAmount',
|
||||
label: 'Total',
|
||||
class: 'w-[20%] min-w-[70px] md:w-[15%] font-mono text-sm font-medium',
|
||||
label: 'Amount',
|
||||
class: 'w-[12%] min-w-[70px] md:w-[10%] 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',
|
||||
class: 'hidden md:table-cell md:w-[18%] text-muted-foreground text-sm',
|
||||
render: (value: any) => formatDate(value)
|
||||
}
|
||||
]);
|
||||
|
||||
async function handleTransferSuccess() {
|
||||
await Promise.all([fetchPortfolioData(), fetchRecentTransactions()]);
|
||||
}
|
||||
</script>
|
||||
|
||||
<SEO
|
||||
|
|
@ -179,14 +228,9 @@
|
|||
keywords="virtual portfolio management, crypto holdings game, trading performance simulator, investment tracking game"
|
||||
/>
|
||||
|
||||
<div class="container mx-auto max-w-7xl p-6">
|
||||
<header class="mb-8">
|
||||
<div>
|
||||
<h1 class="text-3xl font-bold">Portfolio</h1>
|
||||
<p class="text-muted-foreground">View your holdings and portfolio performance</p>
|
||||
</div>
|
||||
</header>
|
||||
<SendMoneyModal bind:open={sendMoneyModalOpen} onSuccess={handleTransferSuccess} />
|
||||
|
||||
<div class="container mx-auto max-w-7xl p-6">
|
||||
{#if loading}
|
||||
<PortfolioSkeleton />
|
||||
{:else if error}
|
||||
|
|
@ -196,122 +240,148 @@
|
|||
<Button onclick={retryFetch}>Try Again</Button>
|
||||
</div>
|
||||
</div>
|
||||
{:else}
|
||||
<!-- Portfolio Summary Cards -->
|
||||
<div class="mb-8 grid grid-cols-1 gap-4 lg:grid-cols-3">
|
||||
<!-- Total Portfolio Value -->
|
||||
<Card.Root class="text-success gap-1">
|
||||
<Card.Header>
|
||||
<Card.Title class="flex items-center gap-2 text-sm font-medium">
|
||||
<Wallet class="h-4 w-4" />
|
||||
Total
|
||||
</Card.Title>
|
||||
</Card.Header>
|
||||
<Card.Content>
|
||||
<p class="text-3xl font-bold">{formatValue(totalPortfolioValue)}</p>
|
||||
</Card.Content>
|
||||
</Card.Root>
|
||||
|
||||
<!-- Base Currency Balance -->
|
||||
<Card.Root class="gap-1">
|
||||
<Card.Header>
|
||||
<Card.Title class="flex items-center gap-2 text-sm font-medium">
|
||||
<DollarSign class="h-4 w-4" />
|
||||
Cash Balance
|
||||
</Card.Title>
|
||||
</Card.Header>
|
||||
<Card.Content>
|
||||
<p class="text-3xl font-bold">
|
||||
{formatValue(portfolioData.baseCurrencyBalance)}
|
||||
</p>
|
||||
<p class="text-muted-foreground text-xs">
|
||||
{totalPortfolioValue > 0
|
||||
? `${((portfolioData.baseCurrencyBalance / totalPortfolioValue) * 100).toFixed(1)}% of portfolio`
|
||||
: '100% of portfolio'}
|
||||
</p>
|
||||
</Card.Content>
|
||||
</Card.Root>
|
||||
|
||||
<!-- Coin Holdings Value -->
|
||||
<Card.Root class="gap-1">
|
||||
<Card.Header>
|
||||
<Card.Title class="flex items-center gap-2 text-sm font-medium">
|
||||
<TrendingUp class="h-4 w-4" />
|
||||
Coin Holdings
|
||||
</Card.Title>
|
||||
</Card.Header>
|
||||
<Card.Content>
|
||||
<p class="text-3xl font-bold">{formatValue(portfolioData.totalCoinValue)}</p>
|
||||
<p class="text-muted-foreground text-xs">
|
||||
{portfolioData.coinHoldings.length} positions
|
||||
</p>
|
||||
</Card.Content>
|
||||
</Card.Root>
|
||||
{:else if !$USER_DATA}
|
||||
<div class="flex h-96 items-center justify-center">
|
||||
<div class="text-center">
|
||||
<div class="text-muted-foreground mb-4 text-xl">
|
||||
You need to be logged in to view your portfolio
|
||||
</div>
|
||||
<Button onclick={() => goto('/login')}>Log In</Button>
|
||||
</div>
|
||||
</div>
|
||||
{:else}
|
||||
<!-- Portfolio Overview -->
|
||||
<div class="mb-8">
|
||||
<div class="mb-6 flex flex-col items-start justify-between gap-4 sm:flex-row sm:items-center">
|
||||
<div>
|
||||
<h1 class="text-3xl font-bold">Portfolio</h1>
|
||||
<p class="text-muted-foreground">Manage your investments and transactions</p>
|
||||
</div>
|
||||
<div class="flex gap-2">
|
||||
<Button onclick={() => (sendMoneyModalOpen = true)}>
|
||||
<Send class="h-4 w-4" />
|
||||
Send Money
|
||||
</Button>
|
||||
<!-- ...existing buttons... -->
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{#if !hasHoldings}
|
||||
<!-- Empty State -->
|
||||
<Card.Root>
|
||||
<Card.Content class="py-16 text-center">
|
||||
<div
|
||||
class="bg-muted mx-auto mb-4 flex h-16 w-16 items-center justify-center rounded-full"
|
||||
>
|
||||
<Wallet class="text-muted-foreground h-8 w-8" />
|
||||
</div>
|
||||
<h3 class="mb-2 text-lg font-semibold">No coin holdings</h3>
|
||||
<p class="text-muted-foreground mb-6">
|
||||
You haven't invested in any coins yet. Start by buying existing coins.
|
||||
</p>
|
||||
<div class="flex justify-center">
|
||||
<Button variant="outline" onclick={() => goto('/')}>Browse Coins</Button>
|
||||
</div>
|
||||
</Card.Content>
|
||||
</Card.Root>
|
||||
{:else}
|
||||
<!-- Holdings Table -->
|
||||
<Card.Root>
|
||||
<!-- Portfolio Summary Cards -->
|
||||
<div class="mb-8 grid grid-cols-1 gap-4 lg:grid-cols-3">
|
||||
<!-- Total Portfolio Value -->
|
||||
<Card.Root class="text-success gap-1">
|
||||
<Card.Header>
|
||||
<Card.Title class="flex items-center gap-2 text-sm font-medium">
|
||||
<Wallet class="h-4 w-4" />
|
||||
Total
|
||||
</Card.Title>
|
||||
</Card.Header>
|
||||
<Card.Content>
|
||||
<p class="text-3xl font-bold">{formatValue(totalPortfolioValue)}</p>
|
||||
</Card.Content>
|
||||
</Card.Root>
|
||||
|
||||
<!-- Base Currency Balance -->
|
||||
<Card.Root class="gap-1">
|
||||
<Card.Header>
|
||||
<Card.Title class="flex items-center gap-2 text-sm font-medium">
|
||||
<DollarSign class="h-4 w-4" />
|
||||
Cash Balance
|
||||
</Card.Title>
|
||||
</Card.Header>
|
||||
<Card.Content>
|
||||
<p class="text-3xl font-bold">
|
||||
{formatValue(portfolioData.baseCurrencyBalance)}
|
||||
</p>
|
||||
<p class="text-muted-foreground text-xs">
|
||||
{totalPortfolioValue > 0
|
||||
? `${((portfolioData.baseCurrencyBalance / totalPortfolioValue) * 100).toFixed(1)}% of portfolio`
|
||||
: '100% of portfolio'}
|
||||
</p>
|
||||
</Card.Content>
|
||||
</Card.Root>
|
||||
|
||||
<!-- Coin Holdings Value -->
|
||||
<Card.Root class="gap-1">
|
||||
<Card.Header>
|
||||
<Card.Title class="flex items-center gap-2 text-sm font-medium">
|
||||
<TrendingUp class="h-4 w-4" />
|
||||
Coin Holdings
|
||||
</Card.Title>
|
||||
</Card.Header>
|
||||
<Card.Content>
|
||||
<p class="text-3xl font-bold">{formatValue(portfolioData.totalCoinValue)}</p>
|
||||
<p class="text-muted-foreground text-xs">
|
||||
{portfolioData.coinHoldings.length} positions
|
||||
</p>
|
||||
</Card.Content>
|
||||
</Card.Root>
|
||||
</div>
|
||||
|
||||
{#if !hasHoldings}
|
||||
<!-- Empty State -->
|
||||
<Card.Root>
|
||||
<Card.Content class="py-16 text-center">
|
||||
<div
|
||||
class="bg-muted mx-auto mb-4 flex h-16 w-16 items-center justify-center rounded-full"
|
||||
>
|
||||
<Wallet class="text-muted-foreground h-8 w-8" />
|
||||
</div>
|
||||
<h3 class="mb-2 text-lg font-semibold">No coin holdings</h3>
|
||||
<p class="text-muted-foreground mb-6">
|
||||
You haven't invested in any coins yet. Start by buying existing coins.
|
||||
</p>
|
||||
<div class="flex justify-center">
|
||||
<Button variant="outline" onclick={() => goto('/')}>Browse Coins</Button>
|
||||
</div>
|
||||
</Card.Content>
|
||||
</Card.Root>
|
||||
{:else}
|
||||
<!-- Holdings Table -->
|
||||
<Card.Root>
|
||||
<Card.Header>
|
||||
<Card.Title>Your Holdings</Card.Title>
|
||||
<Card.Description>Current positions in your portfolio</Card.Description>
|
||||
</Card.Header>
|
||||
<Card.Content>
|
||||
<DataTable
|
||||
columns={holdingsColumns}
|
||||
data={portfolioData.coinHoldings}
|
||||
onRowClick={(holding) => goto(`/coin/${holding.symbol}`)}
|
||||
/>
|
||||
</Card.Content>
|
||||
</Card.Root>
|
||||
{/if}
|
||||
|
||||
<!-- Recent Transactions -->
|
||||
<Card.Root class="mt-8">
|
||||
<Card.Header>
|
||||
<Card.Title>Your Holdings</Card.Title>
|
||||
<Card.Description>Current positions in your portfolio</Card.Description>
|
||||
<div class="flex items-center justify-between">
|
||||
<div>
|
||||
<Card.Title class="flex items-center gap-2">
|
||||
<Receipt class="h-5 w-5" />
|
||||
Recent Transactions
|
||||
</Card.Title>
|
||||
<Card.Description>Your latest trading activity</Card.Description>
|
||||
</div>
|
||||
{#if hasTransactions}
|
||||
<Button variant="outline" size="sm" onclick={() => goto('/transactions')}>
|
||||
View All
|
||||
</Button>
|
||||
{/if}
|
||||
</div>
|
||||
</Card.Header>
|
||||
<Card.Content>
|
||||
<DataTable
|
||||
columns={holdingsColumns}
|
||||
data={portfolioData.coinHoldings}
|
||||
onRowClick={(holding) => goto(`/coin/${holding.symbol}`)}
|
||||
columns={transactionsColumns}
|
||||
data={transactions}
|
||||
onRowClick={(tx) => !tx.isTransfer && 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}
|
||||
|
||||
<!-- Recent Transactions -->
|
||||
<Card.Root class="mt-8">
|
||||
<Card.Header>
|
||||
<div class="flex items-center justify-between">
|
||||
<div>
|
||||
<Card.Title class="flex items-center gap-2">
|
||||
<Receipt class="h-5 w-5" />
|
||||
Recent Transactions
|
||||
</Card.Title>
|
||||
<Card.Description>Your latest trading activity</Card.Description>
|
||||
</div>
|
||||
{#if hasTransactions}
|
||||
<Button variant="outline" size="sm" onclick={() => goto('/transactions')}>
|
||||
View All
|
||||
</Button>
|
||||
{/if}
|
||||
</div>
|
||||
</Card.Header>
|
||||
<Card.Content>
|
||||
<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>
|
||||
</div>
|
||||
{/if}
|
||||
</div>
|
||||
|
|
|
|||
Reference in a new issue