feat: sending money / coins

This commit is contained in:
Face 2025-05-31 16:26:51 +03:00
parent 4e58d20e84
commit de0987a007
14 changed files with 2825 additions and 325 deletions

View file

@ -6,7 +6,7 @@
import CoinIcon from './CoinIcon.svelte';
import UserProfilePreview from './UserProfilePreview.svelte';
import { getPublicUrl } from '$lib/utils';
import { ArrowUp, ArrowDown } from 'lucide-svelte';
interface Column {
key: string;
label: string;
@ -34,13 +34,63 @@
emptyDescription?: string;
enableUserPreview?: boolean;
} = $props();
function renderCell(column: any, row: any, value: any, index: number) {
if (column.render) {
const rendered = column.render(value, row, index);
if (rendered?.component === 'badge') {
return {
type: 'badge',
variant: rendered.variant || 'default',
text: rendered.text,
icon: rendered.icon,
class: rendered.class || ''
};
}
if (rendered?.component === 'coin') {
return {
type: 'coin',
icon: rendered.icon,
symbol: rendered.symbol,
name: rendered.name,
size: rendered.size || 6
};
}
if (rendered?.component === 'text') {
return {
type: 'text',
text: rendered.text,
class: rendered.class || ''
};
}
if (rendered?.component === 'rank') {
return {
type: 'rank',
icon: rendered.icon,
color: rendered.color,
number: rendered.number
};
}
if (rendered?.component === 'user') {
return {
type: 'user',
image: rendered.image,
name: rendered.name,
username: rendered.username
};
}
if (typeof rendered === 'string') {
return { type: 'text', text: rendered };
}
}
return { type: 'text', text: value };
}
</script>
{#if data.length === 0}
<div class="py-12 text-center">
{#if emptyIcon}
<div class="bg-muted mx-auto mb-4 flex h-12 w-12 items-center justify-center rounded-full">
<svelte:component this={emptyIcon} class="text-muted-foreground h-6 w-6" />
<emptyIcon class="text-muted-foreground h-6 w-6"></emptyIcon>
</div>
{/if}
<h3 class="mb-2 text-lg font-semibold">{emptyTitle}</h3>
@ -50,99 +100,79 @@
<Table.Root>
<Table.Header>
<Table.Row>
{#each columns as column}
{#each columns as column (column.key)}
<Table.Head class={column.class || 'min-w-[80px]'}>{column.label}</Table.Head>
{/each}
</Table.Row>
</Table.Header>
<Table.Body>
{#each data as row, index}
</Table.Header><Table.Body>
{#each data as row, index (row.symbol || row.id || index)}
<Table.Row
class={onRowClick ? 'hover:bg-muted/50 cursor-pointer transition-colors' : ''}
onclick={onRowClick ? () => onRowClick(row) : undefined}
>
{#each columns as column}
{#each columns as column (column.key)}
<Table.Cell class={column.class}>
{#if column.render}
{@const rendered = column.render(row[column.key], row, index)}
{#if typeof rendered === 'object' && rendered !== null}
{#if rendered.component === 'badge'}
<Badge variant={rendered.variant} class={rendered.class}>
{rendered.text}
</Badge>
{:else if rendered.component === 'user'}
{#if enableUserPreview}
<HoverCard.Root>
<HoverCard.Trigger>
<div class="flex items-center gap-2">
<Avatar.Root class="h-6 w-6">
<Avatar.Image
src={getPublicUrl(rendered.image)}
alt={rendered.name}
/>
<Avatar.Fallback class="bg-muted text-muted-foreground text-xs">
{rendered.name?.charAt(0) || '?'}
</Avatar.Fallback>
</Avatar.Root>
<div>
<p class="text-sm font-medium">{rendered.name}</p>
<p class="text-muted-foreground text-xs">@{rendered.username}</p>
</div>
</div>
</HoverCard.Trigger>
<HoverCard.Content class="w-80" side="right" sideOffset={10}>
<UserProfilePreview userId={row.userId || row.id} />
</HoverCard.Content>
</HoverCard.Root>
{:else}
{@const cellData = renderCell(column, row, row[column.key], index)}
{#if cellData.type === 'badge'}
<Badge variant={cellData.variant} class={cellData.class}>
{#if cellData.icon === 'arrow-up'}
<ArrowUp class="mr-1 h-3 w-3" />
{:else if cellData.icon === 'arrow-down'}
<ArrowDown class="mr-1 h-3 w-3" />
{/if}
{cellData.text}
</Badge>
{:else if cellData.type === 'coin'}
<div class="flex items-center gap-2">
<CoinIcon icon={cellData.icon} symbol={cellData.symbol} size={cellData.size} />
<span class="font-medium">{cellData.name}</span>
</div>
{:else if cellData.type === 'rank'}
<div class="flex items-center gap-2">
<div
class={`${cellData.color} flex h-7 w-7 items-center justify-center rounded-full text-xs font-medium`}
>
<svelte:component this={cellData.icon} class="h-3.5 w-3.5" />
</div>
<span class="text-sm font-medium">#{cellData.number}</span>
</div>
{:else if cellData.type === 'user'}
{#if enableUserPreview}
<HoverCard.Root>
<HoverCard.Trigger>
<div class="flex items-center gap-2">
<Avatar.Root class="h-6 w-6">
<Avatar.Image src={getPublicUrl(rendered.image)} alt={rendered.name} />
<Avatar.Fallback class="bg-muted text-muted-foreground text-xs">
{rendered.name?.charAt(0) || '?'}
<Avatar.Root class="h-7 w-7">
<Avatar.Image src={getPublicUrl(cellData.image)} alt={cellData.name} />
<Avatar.Fallback class="text-xs">
{cellData.name?.charAt(0) || '?'}
</Avatar.Fallback>
</Avatar.Root>
<div>
<p class="text-sm font-medium">{rendered.name}</p>
<p class="text-muted-foreground text-xs">@{rendered.username}</p>
<div class="flex flex-col items-start">
<span class="text-sm font-medium">{cellData.name}</span>
<span class="text-muted-foreground text-xs">@{cellData.username}</span>
</div>
</div>
{/if}
{:else if rendered.component === 'rank'}
<div class="flex items-center gap-2">
<svelte:component this={rendered.icon} class="h-4 w-4 {rendered.color}" />
<span class="font-mono text-sm">#{rendered.number}</span>
</div>
{:else if rendered.component === 'coin'}
<div class="flex min-w-0 items-center gap-2">
<CoinIcon
icon={rendered.icon}
symbol={rendered.symbol}
name={rendered.name}
size={rendered.size || 6}
/>
<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-1 hover:underline">
<CoinIcon
icon={rendered.content.icon}
symbol={rendered.content.symbol}
name={rendered.content.name}
size={4}
/>
{rendered.content.name}
<span class="text-muted-foreground">(*{rendered.content.symbol})</span>
</a>
{/if}
</HoverCard.Trigger>
<HoverCard.Content class="w-80">
<UserProfilePreview userId={row.userId} />
</HoverCard.Content>
</HoverCard.Root>
{:else}
{rendered}
<div class="flex items-center gap-2">
<Avatar.Root class="h-7 w-7">
<Avatar.Image src={getPublicUrl(cellData.image)} alt={cellData.name} />
<Avatar.Fallback class="text-xs"
>{cellData.name?.charAt(0) || '?'}</Avatar.Fallback
>
</Avatar.Root>
<div class="flex flex-col items-start">
<span class="text-sm font-medium">{cellData.name}</span>
<span class="text-muted-foreground text-xs">@{cellData.username}</span>
</div>
</div>
{/if}
{:else}
{row[column.key]}
{:else if cellData.type === 'text'}
<span class={cellData.class}>{cellData.text}</span>
{/if}
</Table.Cell>
{/each}

View file

@ -0,0 +1,316 @@
<script lang="ts">
import * as Dialog from '$lib/components/ui/dialog';
import * as Select from '$lib/components/ui/select';
import { Button } from '$lib/components/ui/button';
import { Input } from '$lib/components/ui/input';
import { Label } from '$lib/components/ui/label';
import { Badge } from '$lib/components/ui/badge';
import { Send, DollarSign, Coins, Loader2 } from 'lucide-svelte';
import { PORTFOLIO_DATA } from '$lib/stores/portfolio-data';
import { toast } from 'svelte-sonner';
let {
open = $bindable(false),
onSuccess,
prefilledUsername = ''
} = $props<{
open?: boolean;
onSuccess?: () => void;
prefilledUsername?: string;
}>();
let recipientUsername = $state('');
let transferType = $state('CASH');
let amount = $state('');
let selectedCoinSymbol = $state('');
let loading = $state(false);
let numericAmount = $derived(parseFloat(amount) || 0);
let hasValidAmount = $derived(numericAmount > 0);
let hasValidRecipient = $derived(recipientUsername.trim().length > 0);
let userBalance = $derived($PORTFOLIO_DATA ? $PORTFOLIO_DATA.baseCurrencyBalance : 0);
let coinHoldings = $derived($PORTFOLIO_DATA ? $PORTFOLIO_DATA.coinHoldings : []);
let selectedCoinHolding = $derived(
coinHoldings.find((holding) => holding.symbol === selectedCoinSymbol)
);
let maxAmount = $derived(
transferType === 'CASH' ? userBalance : selectedCoinHolding ? selectedCoinHolding.quantity : 0
);
let hasEnoughFunds = $derived(
transferType === 'CASH'
? numericAmount <= userBalance
: selectedCoinHolding
? numericAmount <= selectedCoinHolding.quantity
: false
);
let canSend = $derived(
hasValidAmount &&
hasValidRecipient &&
hasEnoughFunds &&
!loading &&
(transferType === 'CASH' || selectedCoinSymbol.length > 0)
);
function handleClose() {
open = false;
recipientUsername = '';
transferType = 'CASH';
amount = '';
selectedCoinSymbol = '';
loading = false;
}
function setMaxAmount() {
amount = maxAmount.toString();
}
function handleTypeChange(value: string) {
transferType = value;
if (value === 'CASH') {
selectedCoinSymbol = '';
} else if (coinHoldings.length > 0) {
selectedCoinSymbol = coinHoldings[0].symbol;
}
amount = '';
}
$effect(() => {
if (open && prefilledUsername) {
recipientUsername = prefilledUsername;
}
});
async function handleSend() {
if (!canSend) return;
loading = true;
try {
const response = await fetch('/api/transfer', {
method: 'POST',
headers: {
'Content-Type': 'application/json'
},
body: JSON.stringify({
recipientUsername: recipientUsername.trim(),
type: transferType,
amount: numericAmount,
coinSymbol: transferType === 'COIN' ? selectedCoinSymbol : undefined
})
});
const result = await response.json();
if (!response.ok) {
throw new Error(result.error || 'Transfer failed');
}
if (result.type === 'CASH') {
toast.success('Money sent successfully!', {
description: `Sent $${result.amount.toFixed(2)} to @${result.recipient}`
});
} else {
const estimatedValueForToast = estimatedValue;
toast.success('Coins sent successfully!', {
description: `Sent ${result.amount.toFixed(6)} ${result.coinSymbol} (≈$${estimatedValueForToast.toFixed(2)}) to @${result.recipient}`
});
}
onSuccess?.();
handleClose();
} catch (e) {
toast.error('Transfer failed', {
description: (e as Error).message
});
} finally {
loading = false;
}
}
let transferTypeOptions = [
{ value: 'CASH', label: 'Cash ($)' },
{ value: 'COIN', label: 'Coins' }
];
let currentTransferTypeLabel = $derived(
transferTypeOptions.find((option) => option.value === transferType)?.label ||
'Select transfer type'
);
let currentCoinLabel = $derived(
!selectedCoinSymbol
? 'Select coin to send'
: (() => {
const holding = coinHoldings.find((h) => h.symbol === selectedCoinSymbol);
return holding
? `*${holding.symbol} (${holding.quantity.toFixed(6)} available)`
: selectedCoinSymbol;
})()
);
let estimatedValue = $derived(
transferType === 'COIN' && selectedCoinHolding && numericAmount > 0
? numericAmount * selectedCoinHolding.currentPrice
: 0
);
function handleCoinChange(value: string) {
selectedCoinSymbol = value;
}
</script>
<Dialog.Root bind:open>
<Dialog.Content class="sm:max-w-md">
<Dialog.Header>
<Dialog.Title class="flex items-center gap-2">
<Send class="h-5 w-5" />
Send
</Dialog.Title>
<Dialog.Description>Send cash or coins to another user</Dialog.Description>
</Dialog.Header>
<div class="space-y-4">
<!-- Recipient Username -->
<div class="space-y-2">
<Label for="recipient">Recipient</Label>
<Input
id="recipient"
type="text"
bind:value={recipientUsername}
placeholder="Enter username (without @)"
class="flex-1"
/>
</div>
<!-- Transfer Type -->
<div class="space-y-2">
<Label>Type</Label>
<Select.Root type="single" bind:value={transferType} onValueChange={handleTypeChange}>
<Select.Trigger class="w-full">
{currentTransferTypeLabel}
</Select.Trigger>
<Select.Content>
<Select.Group>
<Select.Item value="CASH" label="Cash ($)">
<div class="flex items-center gap-2">
<DollarSign class="h-4 w-4" />
Cash ($)
</div>
</Select.Item>
<Select.Item value="COIN" label="Coins" disabled={coinHoldings.length === 0}>
<div class="flex items-center gap-2">
<Coins class="h-4 w-4" />
Coins
</div>
</Select.Item>
</Select.Group>
</Select.Content>
</Select.Root>
</div>
<!-- Coin Selection (if coin transfer) -->
{#if transferType === 'COIN'}
<div class="space-y-2">
<Label>Select Coin</Label>
<Select.Root
type="single"
bind:value={selectedCoinSymbol}
onValueChange={handleCoinChange}
>
<Select.Trigger class="w-full">
{currentCoinLabel}
</Select.Trigger>
<Select.Content>
<Select.Group>
{#each coinHoldings as holding}
<Select.Item value={holding.symbol} label="*{holding.symbol}">
*{holding.symbol} ({holding.quantity.toFixed(6)} available)
</Select.Item>
{/each}
</Select.Group>
</Select.Content>
</Select.Root>
</div>
{/if}
<!-- Amount Input -->
<div class="space-y-2">
<Label for="amount">
{transferType === 'CASH' ? 'Amount ($)' : `Amount (${selectedCoinSymbol})`}
</Label>
<div class="flex gap-2">
<Input
id="amount"
type="number"
step={transferType === 'CASH' ? '0.01' : '0.000001'}
min="0"
bind:value={amount}
placeholder="0.00"
class="flex-1"
/>
<Button variant="outline" size="sm" onclick={setMaxAmount}>Max</Button>
</div>
<div class="flex justify-between text-xs">
<p class="text-muted-foreground">
Available: {transferType === 'CASH'
? `$${userBalance.toFixed(2)}`
: selectedCoinHolding
? `${selectedCoinHolding.quantity.toFixed(6)} ${selectedCoinSymbol}`
: '0'}
</p>
{#if transferType === 'COIN' && estimatedValue > 0}
<p class="text-muted-foreground">
≈ ${estimatedValue.toFixed(2)}
</p>
{/if}
</div>
</div>
{#if !hasEnoughFunds && hasValidAmount}
<Badge variant="destructive" class="text-xs">
Insufficient {transferType === 'CASH' ? 'funds' : 'coins'}
</Badge>
{/if}
{#if hasValidAmount && hasEnoughFunds && hasValidRecipient}
<div class="bg-muted/50 rounded-lg p-3">
<div class="flex items-center justify-between">
<span class="text-sm font-medium">You're sending:</span>
<div class="text-right">
<span class="block font-bold">
{transferType === 'CASH'
? `$${numericAmount.toFixed(2)}`
: `${numericAmount.toFixed(6)} ${selectedCoinSymbol}`}
</span>
{#if transferType === 'COIN' && estimatedValue > 0}
<span class="text-muted-foreground text-xs">
≈ ${estimatedValue.toFixed(2)} USD
</span>
{/if}
</div>
</div>
<div class="flex items-center justify-between">
<span class="text-sm font-medium">To:</span>
<span class="font-bold">@{recipientUsername}</span>
</div>
</div>
{/if}
</div>
<Dialog.Footer class="flex gap-2">
<Button variant="outline" onclick={handleClose} disabled={loading}>Cancel</Button>
<Button onclick={handleSend} disabled={!canSend}>
{#if loading}
<Loader2 class="h-4 w-4 animate-spin" />
Sending...
{:else}
<Send class="h-4 w-4" />
Send
{/if}
</Button>
</Dialog.Footer>
</Dialog.Content>
</Dialog.Root>

View file

@ -1,7 +1,7 @@
import { pgTable, text, timestamp, boolean, decimal, serial, varchar, integer, primaryKey, pgEnum, index, unique, check } from "drizzle-orm/pg-core";
import { sql } from "drizzle-orm";
export const transactionTypeEnum = pgEnum('transaction_type', ['BUY', 'SELL']);
export const transactionTypeEnum = pgEnum('transaction_type', ['BUY', 'SELL', 'TRANSFER_IN', 'TRANSFER_OUT']);
export const predictionMarketEnum = pgEnum('prediction_market_status', ['ACTIVE', 'RESOLVED', 'CANCELLED']);
export const user = pgTable("user", {
@ -110,6 +110,8 @@ export const transaction = pgTable("transaction", {
pricePerCoin: decimal("price_per_coin", { precision: 20, scale: 8 }).notNull(),
totalBaseCurrencyAmount: decimal("total_base_currency_amount", { precision: 30, scale: 8 }).notNull(),
timestamp: timestamp("timestamp", { withTimezone: true }).notNull().defaultNow(),
recipientUserId: integer('recipient_user_id').references(() => user.id, { onDelete: 'set null' }),
senderUserId: integer('sender_user_id').references(() => user.id, { onDelete: 'set null' }),
});
export const priceHistory = pgTable("price_history", {