feat: add username availability check API endpoint
feat: create user image retrieval API endpoint feat: enhance coin page with dynamic data fetching and improved UI feat: implement coin creation form with validation and submission logic feat: add user settings page with profile update functionality
This commit is contained in:
Face
parent
9aa4ba157b
commit
16ad425bb5
48 changed files with 3030 additions and 326 deletions
329
website/src/routes/coin/create/+page.svelte
Normal file
329
website/src/routes/coin/create/+page.svelte
Normal file
|
|
@ -0,0 +1,329 @@
|
|||
<script lang="ts">
|
||||
import { goto } from '$app/navigation';
|
||||
import { Button } from '$lib/components/ui/button';
|
||||
import { Input } from '$lib/components/ui/input';
|
||||
import { Label } from '$lib/components/ui/label';
|
||||
import { Card, CardContent, CardHeader, CardTitle } from '$lib/components/ui/card';
|
||||
import { Alert, AlertDescription } from '$lib/components/ui/alert';
|
||||
import { Separator } from '$lib/components/ui/separator';
|
||||
import { Info, Loader2, Coins, ImagePlus } from 'lucide-svelte';
|
||||
import { PORTFOLIO_DATA, fetchPortfolioData } from '$lib/stores/portfolio-data';
|
||||
import { onMount } from 'svelte';
|
||||
import { CREATION_FEE, INITIAL_LIQUIDITY, TOTAL_COST } from '$lib/data/constants';
|
||||
import { toast } from 'svelte-sonner';
|
||||
|
||||
let name = $state('');
|
||||
let symbol = $state('');
|
||||
let iconFile = $state<File | null>(null);
|
||||
let iconPreview = $state<string | null>(null);
|
||||
let isSubmitting = $state(false);
|
||||
let error = $state('');
|
||||
|
||||
onMount(() => {
|
||||
fetchPortfolioData();
|
||||
});
|
||||
|
||||
let nameError = $derived(
|
||||
name.length > 0 && (name.length < 2 || name.length > 255)
|
||||
? 'Name must be between 2 and 255 characters'
|
||||
: ''
|
||||
);
|
||||
|
||||
let symbolError = $derived(
|
||||
symbol.length > 0 && (symbol.length < 2 || symbol.length > 10)
|
||||
? 'Symbol must be between 2 and 10 characters'
|
||||
: ''
|
||||
);
|
||||
|
||||
let iconError = $derived(
|
||||
iconFile && iconFile.size > 1 * 1024 * 1024 ? 'Icon must be smaller than 1MB' : ''
|
||||
);
|
||||
|
||||
let isFormValid = $derived(
|
||||
name.length >= 2 && symbol.length >= 2 && !nameError && !symbolError && !iconError
|
||||
);
|
||||
|
||||
let hasEnoughFunds = $derived(
|
||||
$PORTFOLIO_DATA ? $PORTFOLIO_DATA.baseCurrencyBalance >= TOTAL_COST : false
|
||||
);
|
||||
|
||||
let canSubmit = $derived(isFormValid && hasEnoughFunds && !isSubmitting);
|
||||
|
||||
function handleIconChange(event: Event) {
|
||||
const target = event.target as HTMLInputElement;
|
||||
const file = target.files?.[0];
|
||||
|
||||
if (file) {
|
||||
if (file.type.startsWith('image/')) {
|
||||
iconFile = file;
|
||||
console.log(iconFile.size);
|
||||
const reader = new FileReader();
|
||||
reader.onload = (e) => {
|
||||
iconPreview = e.target?.result as string;
|
||||
};
|
||||
reader.readAsDataURL(file);
|
||||
} else {
|
||||
error = 'Please select a valid image file';
|
||||
target.value = '';
|
||||
}
|
||||
} else {
|
||||
iconFile = null;
|
||||
iconPreview = null;
|
||||
}
|
||||
}
|
||||
|
||||
async function handleSubmit(event: { preventDefault: () => void }) {
|
||||
event.preventDefault();
|
||||
|
||||
if (!canSubmit) return;
|
||||
|
||||
isSubmitting = true;
|
||||
error = '';
|
||||
|
||||
try {
|
||||
const formData = new FormData();
|
||||
formData.append('name', name);
|
||||
formData.append('symbol', symbol.toUpperCase());
|
||||
|
||||
if (iconFile) {
|
||||
formData.append('icon', iconFile);
|
||||
}
|
||||
|
||||
const response = await fetch('/api/coin/create', {
|
||||
method: 'POST',
|
||||
body: formData
|
||||
});
|
||||
|
||||
const result = await response.json();
|
||||
|
||||
if (!response.ok) {
|
||||
throw new Error(result.message || 'Failed to create coin');
|
||||
}
|
||||
|
||||
await fetchPortfolioData();
|
||||
|
||||
goto(`/coin/${result.coin.symbol}`);
|
||||
} catch (e) {
|
||||
toast.error('Failed to create coin', {
|
||||
description: (e as Error).message || 'An error occurred while creating the coin'
|
||||
});
|
||||
} finally {
|
||||
isSubmitting = false;
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<svelte:head>
|
||||
<title>Create Coin - Rugplay</title>
|
||||
</svelte:head>
|
||||
|
||||
<div class="container mx-auto max-w-5xl px-4 py-6">
|
||||
<div class="grid grid-cols-1 gap-6 lg:grid-cols-3">
|
||||
<!-- Main Form Column -->
|
||||
<div class="lg:col-span-2">
|
||||
<Card>
|
||||
<CardHeader>
|
||||
<CardTitle class="text-lg">Coin Details</CardTitle>
|
||||
</CardHeader>
|
||||
<CardContent>
|
||||
<form onsubmit={handleSubmit} class="space-y-6">
|
||||
<!-- Icon Upload -->
|
||||
<div>
|
||||
<Label for="icon">Coin Icon (Optional)</Label>
|
||||
<div class="mt-2 space-y-2">
|
||||
<label for="icon" class="block cursor-pointer">
|
||||
<div
|
||||
class="border-muted-foreground/25 bg-muted/50 hover:border-muted-foreground/50 group h-24 w-24 overflow-hidden rounded-full border-2 border-dashed transition-colors"
|
||||
>
|
||||
<Input
|
||||
id="icon"
|
||||
type="file"
|
||||
accept="image/*"
|
||||
onchange={handleIconChange}
|
||||
class="hidden"
|
||||
/>
|
||||
{#if iconPreview}
|
||||
<img src={iconPreview} alt="Preview" class="h-full w-full object-cover" />
|
||||
{:else}
|
||||
<div class="flex h-full items-center justify-center">
|
||||
<ImagePlus class="text-muted-foreground h-8 w-8" />
|
||||
</div>
|
||||
{/if}
|
||||
</div>
|
||||
</label>
|
||||
<p class="{iconError ? 'text-destructive' : 'text-muted-foreground'} text-sm">
|
||||
{#if iconError}
|
||||
{iconError}
|
||||
{:else if iconFile}
|
||||
{iconFile.name} ({(iconFile.size / 1024).toFixed(2)} KB)
|
||||
{:else}
|
||||
Click to upload your coin's icon (PNG or JPG, max 1MB)
|
||||
{/if}
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Name Input -->
|
||||
<div class="space-y-2">
|
||||
<Label for="name">Coin Name</Label>
|
||||
<Input id="name" type="text" bind:value={name} placeholder="e.g., Bitcoin" required />
|
||||
{#if nameError}
|
||||
<p class="text-destructive text-xs">{nameError}</p>
|
||||
{:else}
|
||||
<p class="text-muted-foreground text-sm">
|
||||
Choose a memorable name for your cryptocurrency
|
||||
</p>
|
||||
{/if}
|
||||
</div>
|
||||
|
||||
<!-- Symbol Input -->
|
||||
<div class="space-y-2">
|
||||
<Label for="symbol">Symbol</Label>
|
||||
<div class="relative">
|
||||
<span class="text-muted-foreground absolute left-3 top-1/2 -translate-y-1/2 text-sm"
|
||||
>*</span
|
||||
>
|
||||
<Input
|
||||
id="symbol"
|
||||
type="text"
|
||||
bind:value={symbol}
|
||||
placeholder="BTC"
|
||||
class="pl-8 uppercase"
|
||||
required
|
||||
/>
|
||||
</div>
|
||||
{#if symbolError}
|
||||
<p class="text-destructive text-xs">{symbolError}</p>
|
||||
{:else}
|
||||
<p class="text-muted-foreground text-sm">
|
||||
Short identifier for your coin (e.g., BTC for Bitcoin). Will be displayed as *{symbol ||
|
||||
'SYMBOL'}
|
||||
</p>
|
||||
{/if}
|
||||
</div>
|
||||
|
||||
<!-- Fair Launch Info -->
|
||||
<Alert variant="default" class="bg-muted/50">
|
||||
<Info class="h-4 w-4" />
|
||||
<AlertDescription class="space-y-2">
|
||||
<p class="font-medium">Fair Launch Settings</p>
|
||||
<div class="text-muted-foreground space-y-1 text-sm">
|
||||
<p>• Total Supply: <span class="font-medium">1,000,000,000 tokens</span></p>
|
||||
<p>• Starting Price: <span class="font-medium">$0.000001 per token</span></p>
|
||||
<p>• You receive <span class="font-medium">100%</span> of the supply</p>
|
||||
<p>• Initial Market Cap: <span class="font-medium">$1,000</span></p>
|
||||
<p class="mt-2 text-sm">
|
||||
These settings ensure a fair start for all traders. The price will increase
|
||||
naturally as people buy tokens.
|
||||
</p>
|
||||
</div>
|
||||
</AlertDescription>
|
||||
</Alert>
|
||||
|
||||
<!-- Submit Button -->
|
||||
<Button type="submit" disabled={!canSubmit} class="w-full" size="lg">
|
||||
{#if isSubmitting}
|
||||
<Loader2 class="h-4 w-4 animate-spin" />
|
||||
Creating...
|
||||
{:else}
|
||||
<Coins class="h-4 w-4" />
|
||||
Create Coin (${TOTAL_COST.toFixed(2)})
|
||||
{/if}
|
||||
</Button>
|
||||
</form>
|
||||
</CardContent>
|
||||
</Card>
|
||||
</div>
|
||||
|
||||
<!-- Right Column - Preview and Info -->
|
||||
<div class="space-y-4">
|
||||
<!-- Cost Summary Card -->
|
||||
{#if $PORTFOLIO_DATA}
|
||||
<Card>
|
||||
<CardHeader class="pb-2">
|
||||
<div class="flex items-center justify-between">
|
||||
<CardTitle class="text-base">Cost Summary</CardTitle>
|
||||
<div class="text-sm">
|
||||
<span class="text-muted-foreground">Balance: </span>
|
||||
<span class={hasEnoughFunds ? 'text-green-600' : 'text-destructive'}>
|
||||
${$PORTFOLIO_DATA.baseCurrencyBalance.toLocaleString()}
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</CardHeader>
|
||||
<CardContent class="space-y-2">
|
||||
<div class="flex justify-between text-sm">
|
||||
<span class="text-muted-foreground">Creation Fee</span>
|
||||
<span>${CREATION_FEE}</span>
|
||||
</div>
|
||||
<div class="flex justify-between text-sm">
|
||||
<span class="text-muted-foreground">Initial Liquidity</span>
|
||||
<span>${INITIAL_LIQUIDITY}</span>
|
||||
</div>
|
||||
<Separator class="my-2" />
|
||||
<div class="flex justify-between font-medium">
|
||||
<span>Total Cost</span>
|
||||
<span class="text-primary">${TOTAL_COST}</span>
|
||||
</div>
|
||||
</CardContent>
|
||||
</Card>
|
||||
{/if}
|
||||
|
||||
<!-- Info Card -->
|
||||
<Card>
|
||||
<CardHeader class="pb-2">
|
||||
<CardTitle class="text-base">What Happens After Launch?</CardTitle>
|
||||
</CardHeader>
|
||||
<CardContent class="space-y-4">
|
||||
<div class="space-y-3">
|
||||
<div class="flex gap-3">
|
||||
<div
|
||||
class="bg-primary/10 text-primary flex h-6 w-6 shrink-0 items-center justify-center rounded-full text-sm font-medium"
|
||||
>
|
||||
1
|
||||
</div>
|
||||
<div>
|
||||
<p class="font-medium">Fair Distribution</p>
|
||||
<p class="text-muted-foreground text-sm">
|
||||
Everyone starts buying at the same price - no pre-sales or hidden allocations
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="flex gap-3">
|
||||
<div
|
||||
class="bg-primary/10 text-primary flex h-6 w-6 shrink-0 items-center justify-center rounded-full text-sm font-medium"
|
||||
>
|
||||
2
|
||||
</div>
|
||||
<div>
|
||||
<p class="font-medium">Price Discovery</p>
|
||||
<p class="text-muted-foreground text-sm">
|
||||
Token price increases automatically as more people buy, following a bonding curve
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="flex gap-3">
|
||||
<div
|
||||
class="bg-primary/10 text-primary flex h-6 w-6 shrink-0 items-center justify-center rounded-full text-sm font-medium"
|
||||
>
|
||||
3
|
||||
</div>
|
||||
<div>
|
||||
<p class="font-medium">Instant Trading</p>
|
||||
<p class="text-muted-foreground text-sm">
|
||||
Trading begins immediately - buy, sell, or distribute your tokens as you wish
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</CardContent>
|
||||
</Card>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<style>
|
||||
.container {
|
||||
min-height: calc(100vh - 4rem);
|
||||
}
|
||||
</style>
|
||||
Reference in a new issue