auth check in coin creation page
This commit is contained in:
Face
parent
1b2d60905c
commit
db9c133bbb
1 changed files with 215 additions and 190 deletions
|
|
@ -12,6 +12,7 @@
|
||||||
import { CREATION_FEE, INITIAL_LIQUIDITY, TOTAL_COST } from '$lib/data/constants';
|
import { CREATION_FEE, INITIAL_LIQUIDITY, TOTAL_COST } from '$lib/data/constants';
|
||||||
import { toast } from 'svelte-sonner';
|
import { toast } from 'svelte-sonner';
|
||||||
import SEO from '$lib/components/self/SEO.svelte';
|
import SEO from '$lib/components/self/SEO.svelte';
|
||||||
|
import SignInConfirmDialog from '$lib/components/self/SignInConfirmDialog.svelte';
|
||||||
|
|
||||||
let name = $state('');
|
let name = $state('');
|
||||||
let symbol = $state('');
|
let symbol = $state('');
|
||||||
|
|
@ -112,6 +113,8 @@
|
||||||
isSubmitting = false;
|
isSubmitting = false;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
let shouldSignIn = $state(false);
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<SEO
|
<SEO
|
||||||
|
|
@ -120,209 +123,231 @@
|
||||||
keywords="create virtual cryptocurrency, coin creation game, launch crypto simulation, virtual token creation, cryptocurrency game creator"
|
keywords="create virtual cryptocurrency, coin creation game, launch crypto simulation, virtual token creation, cryptocurrency game creator"
|
||||||
/>
|
/>
|
||||||
|
|
||||||
|
<SignInConfirmDialog bind:open={shouldSignIn} />
|
||||||
|
|
||||||
<div class="container mx-auto max-w-5xl px-4 py-6">
|
<div class="container mx-auto max-w-5xl px-4 py-6">
|
||||||
<div class="grid grid-cols-1 gap-6 lg:grid-cols-3">
|
{#if !$PORTFOLIO_DATA}
|
||||||
<!-- Main Form Column -->
|
<div class="flex h-96 items-center justify-center">
|
||||||
<div class="lg:col-span-2">
|
<div class="text-center">
|
||||||
<Card>
|
<div class="text-muted-foreground mb-4 text-xl">Sign in to create your own coin</div>
|
||||||
<CardHeader>
|
<p class="text-muted-foreground mb-4 text-sm">You need an account to create coins.</p>
|
||||||
<CardTitle class="text-lg">Coin Details</CardTitle>
|
<Button onclick={() => (shouldSignIn = true)} class="w-fit">
|
||||||
</CardHeader>
|
Sign in to continue
|
||||||
<CardContent>
|
</Button>
|
||||||
<form onsubmit={handleSubmit} class="space-y-6">
|
</div>
|
||||||
<!-- Icon Upload -->
|
</div>
|
||||||
<div>
|
{:else}
|
||||||
<Label for="icon">Coin Icon (Optional)</Label>
|
<div class="grid grid-cols-1 gap-6 lg:grid-cols-3">
|
||||||
<div class="mt-2 space-y-2">
|
<!-- Main Form Column -->
|
||||||
<label for="icon" class="block cursor-pointer">
|
<div class="lg:col-span-2">
|
||||||
<div
|
<Card>
|
||||||
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"
|
<CardHeader>
|
||||||
>
|
<CardTitle class="text-lg">Coin Details</CardTitle>
|
||||||
<Input
|
</CardHeader>
|
||||||
id="icon"
|
<CardContent>
|
||||||
type="file"
|
<form onsubmit={handleSubmit} class="space-y-6">
|
||||||
accept="image/*"
|
<!-- Icon Upload -->
|
||||||
onchange={handleIconChange}
|
<div>
|
||||||
class="hidden"
|
<Label for="icon">Coin Icon (Optional)</Label>
|
||||||
/>
|
<div class="mt-2 space-y-2">
|
||||||
{#if iconPreview}
|
<label for="icon" class="block cursor-pointer">
|
||||||
<img src={iconPreview} alt="Preview" class="h-full w-full object-cover" />
|
<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}
|
{:else}
|
||||||
<div class="flex h-full items-center justify-center">
|
Click to upload your coin's icon (PNG or JPG, max 1MB)
|
||||||
<ImagePlus class="text-muted-foreground h-8 w-8" />
|
|
||||||
</div>
|
|
||||||
{/if}
|
{/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>
|
</p>
|
||||||
</div>
|
</div>
|
||||||
</AlertDescription>
|
</div>
|
||||||
</Alert>
|
|
||||||
|
|
||||||
<!-- Submit Button -->
|
<!-- Name Input -->
|
||||||
<Button type="submit" disabled={!canSubmit} class="w-full" size="lg">
|
<div class="space-y-2">
|
||||||
{#if isSubmitting}
|
<Label for="name">Coin Name</Label>
|
||||||
<Loader2 class="h-4 w-4 animate-spin" />
|
<Input
|
||||||
Creating...
|
id="name"
|
||||||
{:else}
|
type="text"
|
||||||
<Coins class="h-4 w-4" />
|
bind:value={name}
|
||||||
Create Coin (${TOTAL_COST.toFixed(2)})
|
placeholder="e.g., Bitcoin"
|
||||||
{/if}
|
required
|
||||||
</Button>
|
/>
|
||||||
</form>
|
{#if nameError}
|
||||||
</CardContent>
|
<p class="text-destructive text-xs">{nameError}</p>
|
||||||
</Card>
|
{:else}
|
||||||
</div>
|
<p class="text-muted-foreground text-sm">
|
||||||
|
Choose a memorable name for your cryptocurrency
|
||||||
|
</p>
|
||||||
|
{/if}
|
||||||
|
</div>
|
||||||
|
|
||||||
<!-- Right Column - Preview and Info -->
|
<!-- Symbol Input -->
|
||||||
<div class="space-y-4">
|
<div class="space-y-2">
|
||||||
<!-- Cost Summary Card -->
|
<Label for="symbol">Symbol</Label>
|
||||||
{#if $PORTFOLIO_DATA}
|
<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>
|
<Card>
|
||||||
<CardHeader class="pb-2">
|
<CardHeader class="pb-2">
|
||||||
<div class="flex items-center justify-between">
|
<CardTitle class="text-base">What Happens After Launch?</CardTitle>
|
||||||
<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>
|
</CardHeader>
|
||||||
<CardContent class="space-y-2">
|
<CardContent class="space-y-4">
|
||||||
<div class="flex justify-between text-sm">
|
<div class="space-y-3">
|
||||||
<span class="text-muted-foreground">Creation Fee</span>
|
<div class="flex gap-3">
|
||||||
<span>${CREATION_FEE}</span>
|
<div
|
||||||
</div>
|
class="bg-primary/10 text-primary flex h-6 w-6 shrink-0 items-center justify-center rounded-full text-sm font-medium"
|
||||||
<div class="flex justify-between text-sm">
|
>
|
||||||
<span class="text-muted-foreground">Initial Liquidity</span>
|
1
|
||||||
<span>${INITIAL_LIQUIDITY}</span>
|
</div>
|
||||||
</div>
|
<div>
|
||||||
<Separator class="my-2" />
|
<p class="font-medium">Fair Distribution</p>
|
||||||
<div class="flex justify-between font-medium">
|
<p class="text-muted-foreground text-sm">
|
||||||
<span>Total Cost</span>
|
Everyone starts buying at the same price - no pre-sales or hidden allocations
|
||||||
<span class="text-primary">${TOTAL_COST}</span>
|
</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>
|
</div>
|
||||||
</CardContent>
|
</CardContent>
|
||||||
</Card>
|
</Card>
|
||||||
{/if}
|
</div>
|
||||||
|
|
||||||
<!-- 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>
|
{/if}
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<style>
|
<style>
|
||||||
|
|
|
||||||
Reference in a new issue