coinstorge/website/src/routes/coin/create/+page.svelte

<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>