feat: sending money / coins
This commit is contained in:
Face
parent
4e58d20e84
commit
de0987a007
14 changed files with 2825 additions and 325 deletions
316
website/src/lib/components/self/SendMoneyModal.svelte
Normal file
316
website/src/lib/components/self/SendMoneyModal.svelte
Normal 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>
|
||||
Reference in a new issue