chore: remove legacy Token Creator component (Task #172)
This commit is contained in:
@@ -1,142 +0,0 @@
|
||||
<script setup>
|
||||
import { ref } from 'vue';
|
||||
import { Coins, ArrowLeft, Rocket, Shield, Zap } from 'lucide-vue-next';
|
||||
|
||||
const emit = defineEmits(['back']);
|
||||
|
||||
const tokenName = ref('');
|
||||
const tokenSymbol = ref('');
|
||||
const decimals = ref(9);
|
||||
const totalSupply = ref(1000000000);
|
||||
const isCreating = ref(false);
|
||||
const success = ref(false);
|
||||
|
||||
const createToken = async () => {
|
||||
if (!tokenName.value || !tokenSymbol.value) return;
|
||||
|
||||
isCreating.value = true;
|
||||
// Simulate blockchain interaction
|
||||
await new Promise(resolve => setTimeout(resolve, 2000));
|
||||
|
||||
isCreating.value = false;
|
||||
success.value = true;
|
||||
};
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div class="flex-1 flex flex-col h-full bg-black/40 backdrop-blur-sm relative z-10 overflow-y-auto">
|
||||
<!-- Header -->
|
||||
<div class="h-12 border-b border-white/5 flex items-center px-4 shadow-sm bg-crypto-panel/50 sticky top-0 z-20">
|
||||
<button @click="emit('back')" class="mr-4 p-1.5 hover:bg-white/10 rounded-lg text-gray-400 hover:text-white transition-all">
|
||||
<ArrowLeft size="18" />
|
||||
</button>
|
||||
<div class="text-lg font-bold text-white flex items-center gap-2">
|
||||
<Coins size="20" class="text-violet-400" />
|
||||
Token Creator
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="p-8 max-w-2xl mx-auto w-full">
|
||||
<div v-if="!success" class="space-y-8 animate-fade-in">
|
||||
<div class="text-center mb-12">
|
||||
<h2 class="text-3xl font-bold text-white mb-2">Create your PLEXUS Token</h2>
|
||||
<p class="text-crypto-muted">Launch your own SPL token on Solana in seconds.</p>
|
||||
</div>
|
||||
|
||||
<div class="grid grid-cols-1 md:grid-cols-2 gap-6">
|
||||
<div class="space-y-2">
|
||||
<label class="text-xs font-bold text-crypto-muted uppercase tracking-wider ml-1">Token Name</label>
|
||||
<input
|
||||
v-model="tokenName"
|
||||
type="text"
|
||||
placeholder="e.g. Plexus Gold"
|
||||
class="w-full bg-crypto-dark/50 border border-white/10 rounded-xl px-4 py-3 text-white focus:outline-none focus:ring-2 focus:ring-violet-500/50 transition-all"
|
||||
/>
|
||||
</div>
|
||||
<div class="space-y-2">
|
||||
<label class="text-xs font-bold text-crypto-muted uppercase tracking-wider ml-1">Symbol</label>
|
||||
<input
|
||||
v-model="tokenSymbol"
|
||||
type="text"
|
||||
placeholder="e.g. PXG"
|
||||
class="w-full bg-crypto-dark/50 border border-white/10 rounded-xl px-4 py-3 text-white focus:outline-none focus:ring-2 focus:ring-violet-500/50 transition-all"
|
||||
/>
|
||||
</div>
|
||||
<div class="space-y-2">
|
||||
<label class="text-xs font-bold text-crypto-muted uppercase tracking-wider ml-1">Decimals</label>
|
||||
<input
|
||||
v-model="decimals"
|
||||
type="number"
|
||||
class="w-full bg-crypto-dark/50 border border-white/10 rounded-xl px-4 py-3 text-white focus:outline-none focus:ring-2 focus:ring-violet-500/50 transition-all"
|
||||
/>
|
||||
</div>
|
||||
<div class="space-y-2">
|
||||
<label class="text-xs font-bold text-crypto-muted uppercase tracking-wider ml-1">Total Supply</label>
|
||||
<input
|
||||
v-model="totalSupply"
|
||||
type="number"
|
||||
class="w-full bg-crypto-dark/50 border border-white/10 rounded-xl px-4 py-3 text-white focus:outline-none focus:ring-2 focus:ring-violet-500/50 transition-all"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="bg-violet-500/10 border border-violet-500/20 rounded-2xl p-6 space-y-4">
|
||||
<h3 class="font-bold text-white flex items-center gap-2">
|
||||
<Shield size="18" class="text-violet-400" />
|
||||
Security Features
|
||||
</h3>
|
||||
<div class="grid grid-cols-1 sm:grid-cols-2 gap-4 text-sm">
|
||||
<div class="flex items-center gap-3 text-gray-300">
|
||||
<Zap size="14" class="text-yellow-400" />
|
||||
Revoke Mint Authority
|
||||
</div>
|
||||
<div class="flex items-center gap-3 text-gray-300">
|
||||
<Zap size="14" class="text-yellow-400" />
|
||||
Revoke Freeze Authority
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<button
|
||||
@click="createToken"
|
||||
:disabled="isCreating || !tokenName || !tokenSymbol"
|
||||
class="w-full py-4 bg-gradient-to-r from-violet-600 to-indigo-600 hover:from-violet-500 hover:to-indigo-500 text-white rounded-2xl font-bold shadow-xl shadow-violet-600/20 transition-all transform hover:scale-[1.02] active:scale-[0.98] disabled:opacity-50 disabled:cursor-not-allowed flex items-center justify-center gap-3"
|
||||
>
|
||||
<Rocket v-if="!isCreating" size="20" />
|
||||
<span v-if="isCreating" class="animate-spin rounded-full h-5 w-5 border-2 border-white/30 border-t-white"></span>
|
||||
{{ isCreating ? 'Launching on Solana...' : 'Create Token' }}
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<div v-else class="text-center py-12 animate-bounce-in">
|
||||
<div class="w-24 h-24 bg-green-500/20 border border-green-500/50 rounded-full flex items-center justify-center mx-auto mb-6">
|
||||
<Rocket size="48" class="text-green-400" />
|
||||
</div>
|
||||
<h2 class="text-3xl font-bold text-white mb-2">Token Launched!</h2>
|
||||
<p class="text-crypto-muted mb-8">Your token <span class="text-white font-bold">${{ tokenSymbol }}</span> has been successfully created on the Solana blockchain.</p>
|
||||
<button @click="success = false; tokenName = ''; tokenSymbol = ''" class="px-8 py-3 bg-white/10 hover:bg-white/20 text-white rounded-xl font-medium transition-all">
|
||||
Create Another
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<style scoped>
|
||||
.animate-fade-in {
|
||||
animation: fadeIn 0.5s ease-out;
|
||||
}
|
||||
.animate-bounce-in {
|
||||
animation: bounceIn 0.6s cubic-bezier(0.68, -0.55, 0.265, 1.55);
|
||||
}
|
||||
@keyframes fadeIn {
|
||||
from { opacity: 0; transform: translateY(10px); }
|
||||
to { opacity: 1; transform: translateY(0); }
|
||||
}
|
||||
@keyframes bounceIn {
|
||||
0% { opacity: 0; transform: scale(0.3); }
|
||||
50% { opacity: 1; transform: scale(1.05); }
|
||||
70% { transform: scale(0.9); }
|
||||
100% { transform: scale(1); }
|
||||
}
|
||||
</style>
|
||||
Reference in New Issue
Block a user