[{"_1":2,"_133":-5,"_134":-5},"loaderData",{"_3":4,"_10":11},"root",{"_5":-5,"_6":7,"_8":9},"user","appId","cm7twdhs6009l11ml868xhxld","wsEndpoint","https://dev.fun","routes/p.$appId",{"_12":13,"_132":-5,"_129":-5},"appDetail",{"_14":15,"_16":17,"_18":19,"_20":21,"_22":23,"_24":25,"_26":27,"_29":30,"_31":32,"_33":34,"_35":36,"_37":38,"_39":40,"_41":40,"_5":42,"_53":54,"_55":56,"_57":56,"_58":59,"_60":56,"_61":56,"_62":56,"_63":56,"_64":56,"_65":17,"_66":17,"_67":68,"_69":70,"_71":72,"_73":74,"_88":-5,"_89":17,"_90":91,"_129":30,"_130":131},"id","f4e3f2a1d31b4a5a2c76","isMyApp",false,"name","gork.fun","description","Smash your way into Web3 with this delightfully chaotic Phantom wallet integration! Gork.fun takes everything you loved about bonk.fun and supercharges it with seamless crypto connectivity, letting you bonk, boop, and blast with blockchain-backed abandon.","brief","Bonk things with crypto superpowers! Connect your Phantom wallet and chaos ensues.","isLive",true,"tags",[28],"👑","cover","https://cdn.dev.fun/snapshot/f4e3f2a1d31b4a5a2c76/61884_37a5f86d.webp","cdnUrl","https://cdn.dev.fun/app/f4e3f2a1d31b4a5a2c76/61884","createdAt",["D",1746127078517],"updatedAt",["D",1746196630850],"lastCommitId",["B","61884"],"tier",1,"credits",{"_14":43,"_44":45,"_46":-5,"_47":45,"_48":49,"_50":-5,"_51":52},"3ad0b652-8194-4d3a-af4e-bc28eaae6fa5","uniqueId","69vFUf8LuFFstU1QhusuhYV8fycQ9R4tVFMJaGfKyjap","username","solanaWallet","displayName","69v...jap","bio","avatar","/avatar.svg","commitCount",39,"forkCount",0,"likeCount","runsCount",93,"downvoteCount","upvoteCount","upvoteRate","commentCount","visitorCount","isArchived","isRenamed","contractAddress","pWnWY2A3NCBnsqknvRocN5xfNLPa8VdLJMHuFvmpump","code","import { Buffer } from 'buffer';\nif (typeof window !== 'undefined') {\n window.Buffer = Buffer;\n}\nif (typeof process === 'undefined') {\n window.process = {\n env: {}\n };\n}\nimport { useState, useEffect, useCallback, useRef } from 'react';\nimport { motion, AnimatePresence } from 'framer-motion';\nimport { ConnectionProvider, WalletProvider, useWallet } from '@solana/wallet-adapter-react';\nimport { WalletModalProvider, WalletMultiButton } from '@solana/wallet-adapter-react-ui';\nimport { PhantomWalletAdapter } from '@solana/wallet-adapter-wallets';\nimport { SolflareWalletAdapter } from '@solana/wallet-adapter-wallets';\nimport '@solana/wallet-adapter-react-ui/styles.css';\nimport { HashRouter, Routes, Route, useNavigate, useParams } from 'react-router-dom';\nimport { X, Upload, Globe, Send, Plus, Grid, List, Copy, Check, ArrowLeft, ExternalLink, Bell, BarChart3, Wallet, RefreshCw, ArrowDownUp, Settings, TrendingUp, Search, History } from 'lucide-react';\nimport { StateClient } from '@devfunlabs/state-client';\nimport * as web3 from '@solana/web3.js';\nimport { createAssociatedTokenAccountInstruction, getAssociatedTokenAddress, createTransferInstruction, TOKEN_PROGRAM_ID, createInitializeMintInstruction, createMintToInstruction } from '@solana/spl-token';\nimport { XAxis, YAxis, CartesianGrid, Tooltip, ResponsiveContainer, Area, AreaChart, Bar, BarChart, ComposedChart } from 'recharts';\nimport { io } from 'socket.io-client';\nconst GORK_MASCOT = \"https://cdn.dev.fun/asset/f4e3f2a1d31b4a5a2c76/gork1_9b02cb93.jpg\";\nconst SAMPLE_TOKENS = [{\n id: 'sample1',\n image: GORK_MASCOT,\n name: 'Gork Token',\n ticker: 'GORK',\n description: 'The official token of Gork.fun - a magical community token for the Gork universe.',\n website: 'https://gork.fun',\n twitter: 'gorkfun',\n telegram: 'gorkfun',\n createdAt: new Date().toISOString()\n}, {\n id: 'sample2',\n image: GORK_MASCOT,\n name: 'Magic Ball',\n ticker: 'MAGIC',\n description: 'A mystical token with predictions and fortune-telling powers. Consult the Magic Ball for guidance!',\n website: '',\n twitter: 'magicball',\n telegram: '',\n createdAt: new Date().toISOString()\n}];\nconst socket = io('wss://ws.dev.fun/app-f4e3f2a1d31b4a5a2c76', {\n reconnectionAttempts: 5,\n reconnectionDelay: 1000,\n timeout: 20000\n});\nsocket.on('connect_error', err => {\n console.error('Socket connection error:', err);\n});\nconst chalkStyle = {\n fontFamily: \"'Comic Sans MS', cursive, sans-serif\",\n textShadow: '0 0 3px rgba(255,255,255,0.7)',\n letterSpacing: '1px',\n fontWeight: 'normal',\n filter: 'drop-shadow(0 0 1px rgba(0,255,200,0.4))'\n};\nconst ChalkText = ({\n children,\n className,\n ...props\n}) =>

\n {children}\n

;\nconst LAUNCH_FEE = 0.02;\nconst TOKEN_SUPPLY = 1_000_000_000;\nconst BONDING_CURVE_SUPPLY_PERCENT = 0.75;\nconst BONDING_CURVE_MIGRATION_POINT = 70;\nconst PLATFORM_FEE_WALLET = '31CcsGtyP7E8zzdGzH8D7gbKFKyTk2xSNCozbsUEwk8d';\nconst generateTokenAddress = () => {\n const chars = '123456789ABCDEFGHJKLMNPQRSTUVWXYZabcdefghijkmnopqrstuvwxyz';\n let address = '';\n for (let i = 0; i < 38; i++) {\n address += chars.charAt(Math.floor(Math.random() * chars.length));\n }\n return address + 'gork';\n};\nconst calculateBondingPrice = solInPool => {\n return solInPool / (TOKEN_SUPPLY * BONDING_CURVE_SUPPLY_PERCENT);\n};\nconst calculateTokensFromSol = (solAmount, currentSolInPool) => {\n const startPrice = calculateBondingPrice(currentSolInPool);\n const endPrice = calculateBondingPrice(currentSolInPool + solAmount);\n const avgPrice = (startPrice + endPrice) / 2;\n return solAmount / avgPrice;\n};\nconst generateChartData = (basePrice = 0.0000001, points = 48, volatility = 0.2) => {\n const data = [];\n let price = basePrice;\n let timestamp = Date.now() - points * 15 * 60 * 1000;\n let volume = 0;\n for (let i = 0; i < points; i++) {\n const change = (Math.random() - 0.5) * volatility;\n price = Math.max(0.00000001, price * (1 + change));\n volume = Math.abs(Math.random() * 10000 * price);\n timestamp += 15 * 60 * 1000;\n data.push({\n time: new Date(timestamp).toISOString(),\n price: price,\n volume: volume,\n formattedTime: new Date(timestamp).toLocaleTimeString([], {\n hour: '2-digit',\n minute: '2-digit'\n })\n });\n }\n return data;\n};\nconst generateLiquidityData = (solAmount = 0.02, creatorPercent = 5) => {\n const initialSolInPool = solAmount;\n const initialTokenPrice = calculateBondingPrice(initialSolInPool);\n const adjustedBondingCurvePercent = BONDING_CURVE_SUPPLY_PERCENT - creatorPercent / 100;\n const tokensInPool = TOKEN_SUPPLY * adjustedBondingCurvePercent;\n const hasMigrated = initialSolInPool >= BONDING_CURVE_MIGRATION_POINT;\n const raydiumPoolAddress = hasMigrated ? `${Math.random().toString(36).substring(2, 10)}${Math.random().toString(36).substring(2, 10)}${Math.random().toString(36).substring(2, 10)}` : null;\n return {\n total: initialSolInPool.toFixed(2),\n tokenAmount: Math.floor(tokensInPool),\n solAmount: initialSolInPool.toFixed(4),\n currentPrice: initialTokenPrice,\n hasMigrated: hasMigrated,\n migrationPoint: BONDING_CURVE_MIGRATION_POINT,\n raydiumPoolAddress: raydiumPoolAddress,\n distribution: [{\n name: 'Creator',\n value: creatorPercent > 0 ? creatorPercent.toFixed(0) : 5\n }, {\n name: 'Liquidity Pool',\n value: Math.floor(adjustedBondingCurvePercent * 100)\n }, {\n name: 'Community',\n value: Math.floor(100 - creatorPercent - adjustedBondingCurvePercent * 100)\n }],\n depth: Array.from({\n length: 5\n }, (_, i) => {\n const multiplier = 0.8 + i * 0.1;\n const simulatedSol = initialSolInPool * multiplier;\n return {\n price: calculateBondingPrice(simulatedSol),\n volume: simulatedSol < BONDING_CURVE_MIGRATION_POINT ? tokensInPool * (1 - simulatedSol / BONDING_CURVE_MIGRATION_POINT) : 0\n };\n })\n };\n};\nconst generateTrades = (ticker, address, count = 20) => {\n const tradeTypes = ['buy', 'sell'];\n const wallets = ['8xDR4LqQJw47LQVxhFcQvzusQicsH81AZ9MpEKWEMFG7', '5HLxTpJqx1JKsZo7kK8nS6naq3N6KR3jCZvfZQQvdMhy', 'GrdLJ1YNMbj2QoYrZ8G9p2BeCkRPJWNkcKGBNVtfPHu7', 'CTuokFM9rReNhGUtG2gfeAQoVXTULzRRqVSw3HYXyMKx', 'FmJkZfABQJ5vVJRXTALhpJjwAuzxJkECvBYpSZnZBLzJ'];\n const trades = [];\n let timestamp = Date.now() - count * 2 * 60 * 1000;\n for (let i = 0; i < count; i++) {\n const type = tradeTypes[Math.floor(Math.random() * tradeTypes.length)];\n const amount = Math.floor(Math.random() * 10000) + 1000;\n const wallet = wallets[Math.floor(Math.random() * wallets.length)];\n timestamp += Math.floor(Math.random() * 5 * 60 * 1000);\n const priceImpact = (Math.random() * 2 - 1).toFixed(2);\n trades.push({\n id: `tx${i}${Date.now()}`,\n type,\n amount,\n ticker,\n wallet,\n timestamp,\n solAmount: (amount * 0.00000001).toFixed(6),\n priceImpact,\n txHash: `${Math.random().toString(36).substring(2, 10)}${Math.random().toString(36).substring(2, 10)}`\n });\n }\n return trades.sort((a, b) => b.timestamp - a.timestamp);\n};\nconst TokenLaunchModal = ({\n isOpen,\n onClose,\n onLaunch\n}) => {\n const [tokenImage, setTokenImage] = useState(null);\n const [tokenName, setTokenName] = useState('');\n const [tokenTicker, setTokenTicker] = useState('');\n const [tokenDescription, setTokenDescription] = useState('');\n const [tokenWebsite, setTokenWebsite] = useState('');\n const [tokenTwitter, setTokenTwitter] = useState('');\n const [tokenTelegram, setTokenTelegram] = useState('');\n const [previewUrl, setPreviewUrl] = useState('');\n const [errors, setErrors] = useState({});\n const [isLaunching, setIsLaunching] = useState(false);\n const [, setTxError] = useState('');\n const [, setLaunchFeeConfirmed] = useState(false);\n const [creatorPurchaseStep, setCreatorPurchaseStep] = useState(false);\n const [creatorPurchaseAmount, setCreatorPurchaseAmount] = useState(1.2);\n const [creatorTokenPercent, setCreatorTokenPercent] = useState(5);\n const navigate = useNavigate();\n const {\n publicKey,\n sendTransaction\n } = useWallet();\n const addNotification = notification => {\n const notificationEvent = {\n id: Date.now(),\n time: new Date().toLocaleTimeString(),\n ...notification\n };\n socket.emit('notification', notificationEvent);\n };\n const handleImageChange = e => {\n const file = e.target.files[0];\n if (!file) return;\n if (file.size > 1024 * 1024) {\n setErrors(prev => ({\n ...prev,\n image: 'Image must be less than 1MB'\n }));\n return;\n }\n const reader = new FileReader();\n reader.onload = event => {\n const img = new Image();\n img.onload = () => {\n if (img.width > 400 || img.height > 400) {\n setErrors(prev => ({\n ...prev,\n image: 'Image must be 400x400 or smaller'\n }));\n return;\n }\n setTokenImage(file);\n setPreviewUrl(event.target.result);\n setErrors(prev => ({\n ...prev,\n image: null\n }));\n };\n img.src = event.target.result;\n };\n reader.readAsDataURL(file);\n };\n const validate = () => {\n const newErrors = {};\n if (!tokenImage) newErrors.image = 'Token image is required';\n if (!tokenName.trim()) newErrors.name = 'Token name is required';\n if (!tokenTicker.trim()) {\n newErrors.ticker = 'Token ticker is required';\n } else if (tokenTicker.length > 10) {\n newErrors.ticker = 'Ticker must be 10 characters or less';\n }\n if (!tokenDescription.trim()) newErrors.description = 'Token description is required';\n setErrors(newErrors);\n return Object.keys(newErrors).length === 0;\n };\n const calculateCreatorTokenAmount = solAmount => {\n const referenceSOL = 1.2;\n const referencePercent = 5;\n const percent = solAmount / referenceSOL * referencePercent;\n return {\n percent: Math.min(50, percent),\n tokenAmount: Math.floor(Math.min(50, percent) / 100 * TOKEN_SUPPLY)\n };\n };\n useEffect(() => {\n const {\n percent\n } = calculateCreatorTokenAmount(creatorPurchaseAmount);\n setCreatorTokenPercent(percent);\n }, [creatorPurchaseAmount]);\n const endpoint = 'https://rpc.dev.fun/f4e3f2a1d31b4a5a2c76';\n const handleSubmit = async e => {\n e.preventDefault();\n if (!validate()) return;\n if (!publicKey) {\n setErrors({\n ...errors,\n wallet: 'Please connect your wallet to launch a token'\n });\n return;\n }\n if (!creatorPurchaseStep) {\n setCreatorPurchaseStep(true);\n return;\n }\n setIsLaunching(true);\n setTxError('');\n try {\n const mintKeypair = web3.Keypair.generate();\n const mintPublicKey = mintKeypair.publicKey;\n const connection = new web3.Connection(endpoint, 'confirmed');\n let {\n blockhash,\n lastValidBlockHeight\n } = await connection.getLatestBlockhash('confirmed');\n const lamportsForMint = await connection.getMinimumBalanceForRentExemption(82);\n const transaction = new web3.Transaction();\n transaction.add(web3.SystemProgram.createAccount({\n fromPubkey: publicKey,\n newAccountPubkey: mintPublicKey,\n space: 82,\n lamports: lamportsForMint,\n programId: TOKEN_PROGRAM_ID\n }));\n transaction.add(createInitializeMintInstruction(mintPublicKey, 9, publicKey, publicKey, TOKEN_PROGRAM_ID));\n const associatedTokenAccount = await getAssociatedTokenAddress(mintPublicKey, publicKey);\n transaction.add(createAssociatedTokenAccountInstruction(publicKey, associatedTokenAccount, publicKey, mintPublicKey));\n const creatorTokens = Math.floor(TOKEN_SUPPLY * (creatorTokenPercent / 100));\n transaction.add(createMintToInstruction(mintPublicKey, associatedTokenAccount, publicKey, BigInt(creatorTokens * 1e9)));\n const launchFeeLamports = LAUNCH_FEE * web3.LAMPORTS_PER_SOL;\n transaction.add(web3.SystemProgram.transfer({\n fromPubkey: publicKey,\n toPubkey: new web3.PublicKey(PLATFORM_FEE_WALLET),\n lamports: launchFeeLamports\n }));\n let bondingCurveAddress;\n let bondingCurveKeypair;\n if (creatorPurchaseAmount > 0) {\n bondingCurveKeypair = web3.Keypair.generate();\n bondingCurveAddress = bondingCurveKeypair.publicKey;\n const creatorPurchaseLamports = creatorPurchaseAmount * web3.LAMPORTS_PER_SOL;\n transaction.add(web3.SystemProgram.transfer({\n fromPubkey: publicKey,\n toPubkey: bondingCurveAddress,\n lamports: creatorPurchaseLamports\n }));\n } else {\n bondingCurveKeypair = web3.Keypair.generate();\n bondingCurveAddress = bondingCurveKeypair.publicKey;\n }\n try {\n addNotification({\n type: 'info',\n title: 'Creating Your Token...',\n message: 'Processing transaction. Please approve in your wallet.'\n });\n transaction.feePayer = publicKey;\n transaction.recentBlockhash = blockhash;\n transaction.lastValidBlockHeight = lastValidBlockHeight;\n const signature = await sendTransaction(transaction, connection, {\n signers: [mintKeypair]\n });\n addNotification({\n type: 'info',\n title: 'Transaction Submitted',\n message: 'Waiting for confirmation...'\n });\n addNotification({\n type: 'info',\n title: 'Transaction Submitted',\n message: 'Waiting for confirmation on the Solana blockchain...'\n });\n const confirmation = await connection.confirmTransaction({\n signature,\n blockhash,\n lastValidBlockHeight\n }, 'confirmed');\n if (confirmation.value.err) {\n throw new Error('Transaction confirmed but failed to execute');\n }\n addNotification({\n type: 'success',\n title: 'Token Created!',\n message: 'Your token has been successfully created on the Solana blockchain'\n });\n let finalTicker = tokenTicker.toUpperCase();\n const chartData = generateChartData();\n const trades = generateTrades(finalTicker, mintPublicKey.toString());\n const {\n percent,\n tokenAmount\n } = calculateCreatorTokenAmount(creatorPurchaseAmount);\n const bondingCurveAddressStr = bondingCurveAddress.toString();\n const initialLiquidity = creatorPurchaseAmount;\n const liquidityData = generateLiquidityData(initialLiquidity, percent);\n liquidityData.bondingCurveAddress = bondingCurveAddressStr;\n const currentPrice = liquidityData.currentPrice;\n const newToken = {\n id: Date.now(),\n image: previewUrl,\n name: tokenName,\n ticker: finalTicker,\n description: tokenDescription,\n website: tokenWebsite,\n twitter: tokenTwitter,\n telegram: tokenTelegram,\n createdAt: new Date().toISOString(),\n address: mintPublicKey.toString(),\n chartData,\n trades,\n totalSupply: TOKEN_SUPPLY,\n supplyInBondingCurve: TOKEN_SUPPLY * BONDING_CURVE_SUPPLY_PERCENT,\n marketCap: (currentPrice * TOKEN_SUPPLY).toFixed(2),\n holders: 1,\n volume24h: (Math.random() * 20000 + 1000).toFixed(2),\n liquidity: liquidityData,\n creator: publicKey.toString(),\n launchFee: LAUNCH_FEE,\n bondingCurveAddress: bondingCurveAddressStr,\n creatorPurchase: {\n solAmount: creatorPurchaseAmount,\n tokenAmount: tokenAmount,\n percent: percent\n },\n tokenMint: mintPublicKey.toString(),\n decimals: 9,\n associatedTokenAccount: associatedTokenAccount.toString(),\n transactionId: signature,\n onchainToken: true\n };\n onLaunch(newToken);\n navigate(`/token/${newToken.id}`);\n addNotification({\n type: 'success',\n title: '🚀 Token Launch Success!',\n message: `${finalTicker} created successfully. Taking you to your token page...`\n });\n socket.emit('token_launched', {\n token: newToken.ticker,\n creator: publicKey.toString().slice(0, 4) + '...' + publicKey.toString().slice(-4),\n time: new Date().toISOString()\n });\n onClose();\n } catch (error) {\n if (error.message && error.message.includes('User rejected')) {\n setErrors({\n ...errors,\n transaction: 'Transaction was rejected. Please try again and approve the transaction in your wallet.'\n });\n } else if (error.message && error.message.includes('timeout')) {\n console.error('Transaction confirmation timed out:', error);\n setErrors({\n ...errors,\n transaction: 'Transaction confirmation timed out. Check your wallet - the token may still be created.'\n });\n } else if (error.message && error.message.includes('block height exceeded')) {\n console.error('Transaction expired:', error);\n setErrors({\n ...errors,\n transaction: 'Transaction expired. Please try again with a new transaction.'\n });\n } else {\n console.error('Launch transaction failed:', error);\n setErrors({\n ...errors,\n transaction: `Transaction failed: ${error.message || 'Unknown error'}`\n });\n addNotification({\n type: 'error',\n title: 'Transaction Failed',\n message: `Error: ${error.message?.slice(0, 50) || 'Unknown error'}`\n });\n }\n }\n } catch (error) {\n console.error('Transaction setup failed:', error);\n setErrors({\n ...errors,\n transaction: `Failed to setup transaction: ${error.message || 'Unknown error'}`\n });\n } finally {\n setIsLaunching(false);\n setLaunchFeeConfirmed(false);\n }\n };\n if (!isOpen) return null;\n const creatorTokenAmount = Math.floor(creatorTokenPercent / 100 * TOKEN_SUPPLY);\n return

\n \n \n \n

\n $\"Gork\"$ \n

Create Your Token

\n\n

\n Token Image (400x400 max)\n

\n {previewUrl ? $\"Preview\"$ : }\n

\n \n

\n Browse Images\n

\n \n \n

\n {errors.image &&

{errors.image}

}\n

\n\n

\n Token Name\n setTokenName(e.target.value)} className={`w-full px-4 py-2 bg-black bg-opacity-50 rounded-lg text-white border ${errors.name ? 'border-red-500' : 'border-pink-500'}`} placeholder=\"e.g. Gork Token\" />\n {errors.name &&

{errors.name}

}\n

\n\n

\n Token Ticker\n {\n const value = e.target.value.toUpperCase();\n setTokenTicker(value);\n }} maxLength={10} className={`w-full px-4 py-2 bg-black bg-opacity-50 rounded-lg text-white border ${errors.ticker ? 'border-red-500' : 'border-pink-500'}`} placeholder=\"e.g. MEGA\" />\n {errors.ticker &&

{errors.ticker}

}\n

\n\n

\n Description\n

setTokenDescription(e.target.value)} className={`w-full px-4 py-2 bg-black bg-opacity-50 rounded-lg text-white border ${errors.description ? 'border-red-500' : 'border-pink-500'} min-h-[100px]`} placeholder=\"Describe your awesome token...\" />\n            {errors.description && <p className=\"text-red-400 text-sm mt-1\">{errors.description}</p>}\n          </div>\n\n          <div className=\"mb-6\">\n            <label className=\"block text-pink-300 font-bold mb-2\">Social Links (Optional)</label>\n            \n            <div className=\"flex items-center mb-2\">\n              <Globe size={20} className=\"text-pink-300 mr-2\" />\n              <input type=\"url\" value={tokenWebsite} onChange={e => setTokenWebsite(e.target.value)} className=\"flex-1 px-4 py-2 bg-black bg-opacity-50 rounded-lg text-white border border-pink-500\" placeholder=\"Website URL\" />\n            </div>\n            \n            <div className=\"flex items-center mb-2\">\n              <div className=\"text-pink-300 mr-2 flex items-center justify-center w-5 h-5 font-bold\">𝕏</div>\n              <input type=\"text\" value={tokenTwitter} onChange={e => setTokenTwitter(e.target.value)} className=\"flex-1 px-4 py-2 bg-black bg-opacity-50 rounded-lg text-white border border-pink-500\" placeholder=\"X handle (without @)\" />\n            </div>\n            \n            <div className=\"flex items-center\">\n              <Send size={20} className=\"text-pink-300 mr-2\" />\n              <input type=\"text\" value={tokenTelegram} onChange={e => setTokenTelegram(e.target.value)} className=\"flex-1 px-4 py-2 bg-black bg-opacity-50 rounded-lg text-white border border-pink-500\" placeholder=\"Telegram group\" />\n            </div>\n          </div>\n\n          {errors.wallet && <p className=\"text-red-400 text-sm mb-4\">{errors.wallet}</p>}\n\n          {errors.transaction && <p className=\"text-red-400 text-sm mb-4\">{errors.transaction}</p>}\n\n          {}\n          {creatorPurchaseStep && !isLaunching && <div className=\"mb-6 bg-black bg-opacity-30 p-4 rounded-lg border border-pink-500 relative\">\n              <button onClick={() => setCreatorPurchaseStep(false)} className=\"absolute top-3 right-3 text-gray-400 hover:text-white\">\n                <X size={18} />\n              </button>\n              \n              <h3 className=\"text-white text-xl font-bold mb-3\">Purchase Creator Tokens</h3>\n              <p className=\"text-gray-300 mb-4\">\n                Choose how much SOL you want to spend to purchase your own token supply.\n                <span className=\"block mt-2 text-pink-300\">Reference: 1.2 SOL = 5% of supply</span>\n              </p>\n              \n              <div className=\"mb-4\">\n                <div className=\"flex justify-between text-sm text-gray-400 mb-1\">\n                  <span>SOL Amount:</span>\n                  <span>{creatorPurchaseAmount.toFixed(2)} SOL</span>\n                </div>\n                <input type=\"range\" min=\"0\" max=\"12\" step=\"0.1\" value={creatorPurchaseAmount} onChange={e => setCreatorPurchaseAmount(parseFloat(e.target.value))} className=\"w-full h-2 bg-zinc-700 rounded-lg appearance-none cursor-pointer\" />\n              </div>\n              \n              <div className=\"flex justify-between mb-4 bg-zinc-800 p-3 rounded-lg\">\n                <div>\n                  <div className=\"text-gray-400 text-sm\">You'll receive:</div>\n                  <div className=\"text-white text-xl font-bold\">{creatorTokenAmount.toLocaleString()} Tokens</div>\n                </div>\n                <div>\n                  <div className=\"text-gray-400 text-sm\">Percentage:</div>\n                  <div className=\"text-green-400 text-xl font-bold\">{creatorTokenPercent.toFixed(2)}%</div>\n                </div>\n              </div>\n              \n              <p className=\"text-xs text-gray-400 mb-4\">\n                The remaining {(100 - creatorTokenPercent).toFixed(2)}% of tokens will be distributed according to the bonding curve\n                and other allocations.\n              </p>\n              \n              <div className=\"bg-black bg-opacity-60 p-3 rounded-lg mb-2 border border-yellow-600\">\n                <div className=\"flex items-start\">\n                  <div className=\"text-yellow-400 mr-2\">⚠️</div>\n                  <p className=\"text-xs text-yellow-300\">\n                    Your creator tokens purchase amount will be added to the token's bonding curve pool. This is different from the 0.02 SOL platform fee.\n                  </p>\n                </div>\n              </div>\n            </div>}\n\n          <button type=\"submit\" disabled={isLaunching} className=\"w-full bg-gradient-to-r from-pink-600 to-purple-600 hover:from-pink-500 hover:to-purple-500 text-white font-bold py-3 px-4 rounded-lg flex items-center justify-center\">\n            {isLaunching ? <>\n                <RefreshCw size={20} className=\"mr-2 animate-spin\" />\n                Creating Token...\n              </> : creatorPurchaseStep ? <>\n                <span className=\"mr-2 text-lg\">🚀</span>\n                Launch Token ({(LAUNCH_FEE + creatorPurchaseAmount).toFixed(2)} SOL)\n              </> : <>\n                <span className=\"mr-2 text-lg\">✨</span>\n                Create and Launch\n              </>}\n          </button>\n        </form>\n      </motion.div>\n    </div>;\n};\nconst CopyButton = ({\n  text\n}) => {\n  const [copied, setCopied] = useState(false);\n  const handleCopy = () => {\n    navigator.clipboard.writeText(text);\n    setCopied(true);\n    setTimeout(() => setCopied(false), 2000);\n  };\n  return <button onClick={handleCopy} className=\"flex items-center text-xs text-pink-300 hover:text-pink-100\">\n      {copied ? <Check size={14} /> : <Copy size={14} />}\n      <span className=\"ml-1\">{copied ? 'Copied!' : 'Copy'}</span>\n    </button>;\n};\nconst TokenMiniChart = ({\n  data\n}) => {\n  if (!data || data.length === 0) return null;\n  return <div className=\"h-16 w-full\">\n      <ResponsiveContainer width=\"100%\" height=\"100%\">\n        <AreaChart data={data.slice(-15)} margin={{\n        top: 0,\n        right: 0,\n        left: 0,\n        bottom: 0\n      }}>\n          <defs>\n            <linearGradient id=\"colorPrice\" x1=\"0\" y1=\"0\" x2=\"0\" y2=\"1\">\n              <stop offset=\"5%\" stopColor=\"#D946EF\" stopOpacity={0.3} />\n              <stop offset=\"95%\" stopColor=\"#D946EF\" stopOpacity={0} />\n            </linearGradient>\n          </defs>\n          <Area type=\"monotone\" dataKey=\"price\" stroke=\"#D946EF\" strokeWidth={2} fillOpacity={1} fill=\"url(#colorPrice)\" />\n        </AreaChart>\n      </ResponsiveContainer>\n    </div>;\n};\nconst TokenCard = ({\n  token\n}) => {\n  const navigate = useNavigate();\n  const formattedMarketCap = parseFloat(token.marketCap).toLocaleString('en-US', {\n    style: 'currency',\n    currency: 'USD',\n    maximumFractionDigits: 0\n  });\n  const priceChangePercent = token.chartData ? ((token.chartData[token.chartData.length - 1].price - token.chartData[0].price) / token.chartData[0].price * 100).toFixed(2) : 0;\n  const isPriceUp = parseFloat(priceChangePercent) >= 0;\n  return <motion.div initial={{\n    opacity: 0,\n    y: 20\n  }} animate={{\n    opacity: 1,\n    y: 0\n  }} onClick={() => navigate(`/token/${token.id}`)} className=\"bg-zinc-900 border-2 border-purple-500 rounded-xl overflow-hidden shadow-lg hover:shadow-purple-500/30 hover:border-purple-400 transition-all duration-300 cursor-pointer\">\n      <div className=\"p-4\">\n        <div className=\"flex items-center mb-3\">\n          <img src={token.image} alt={token.name} className=\"w-12 h-12 rounded-full mr-3 border-2 border-pink-500 bg-black\" />\n          <div>\n            <ChalkText className=\"text-xl mb-1\">{token.name}</ChalkText>\n            <div className=\"flex flex-col\">\n              <p className=\"text-pink-300 font-mono\">${token.ticker}</p>\n              <div className=\"flex items-center\">\n                <p className=\"text-emerald-400 text-xs font-mono mr-2\">{formattedMarketCap}</p>\n                <div className={`text-xs px-1.5 py-0.5 rounded ${isPriceUp ? 'bg-green-900 text-green-400' : 'bg-red-900 text-red-400'}`}>\n                  {isPriceUp ? '+' : ''}{priceChangePercent}%\n                </div>\n              </div>\n            </div>\n          </div>\n        </div>\n        \n        {token.chartData && <TokenMiniChart data={token.chartData} />}\n        \n        <p className=\"text-gray-300 text-sm mb-4 line-clamp-2 mt-2\">{token.description}</p>\n        \n        <div className=\"flex items-center justify-between text-xs\">\n          <span className=\"text-gray-400\">\n            {new Date(token.createdAt).toLocaleDateString()}\n          </span>\n          \n          <div className=\"flex space-x-2\">\n            {token.website && <a href={token.website} target=\"_blank\" rel=\"noopener noreferrer\" onClick={e => e.stopPropagation()} className=\"text-pink-300 hover:text-pink-100\">\n                <Globe size={16} />\n              </a>}\n            \n            {token.twitter && <a href={`https://x.com/${token.twitter}`} target=\"_blank\" rel=\"noopener noreferrer\" onClick={e => e.stopPropagation()} className=\"text-pink-300 hover:text-pink-100\">\n                <div className=\"text-pink-300 flex items-center justify-center w-4 h-4 font-bold\">𝕏</div>\n              </a>}\n            \n            {token.telegram && <a href={`https://t.me/${token.telegram}`} target=\"_blank\" rel=\"noopener noreferrer\" onClick={e => e.stopPropagation()} className=\"text-pink-300 hover:text-pink-100\">\n                <Send size={16} />\n              </a>}\n          </div>\n        </div>\n      </div>\n    </motion.div>;\n};\nconst NotificationItem = ({\n  notification,\n  onClose\n}) => {\n  const getIcon = () => {\n    if (notification.type === 'whale') return <Wallet size={16} className=\"text-purple-400\" />;\n    if (notification.type === 'price') return <TrendingUp size={16} className={notification.change > 0 ? 'text-green-400' : 'text-red-400'} />;\n    return <Bell size={16} className=\"text-pink-400\" />;\n  };\n  return <motion.div initial={{\n    opacity: 0,\n    x: 100\n  }} animate={{\n    opacity: 1,\n    x: 0\n  }} exit={{\n    opacity: 0,\n    x: 100\n  }} className=\"bg-zinc-900 border border-purple-500 rounded-lg p-3 mb-2 flex items-start\">\n      <div className=\"mr-2 mt-0.5\">\n        {getIcon()}\n      </div>\n      <div className=\"flex-1\">\n        <div className=\"flex justify-between items-start\">\n          <div className=\"font-bold text-pink-300\">{notification.title}</div>\n          <button onClick={() => onClose(notification.id)} className=\"text-gray-400 hover:text-white\">\n            <X size={14} />\n          </button>\n        </div>\n        <p className=\"text-sm text-gray-300\">{notification.message}</p>\n        <div className=\"text-xs text-gray-400 mt-1\">{notification.time}</div>\n      </div>\n    </motion.div>;\n};\nconst Notifications = ({\n  notifications,\n  onClose\n}) => {\n  return <div className=\"fixed right-4 top-20 z-50 w-80\">\n      <AnimatePresence>\n        {notifications.map(notification => <NotificationItem key={notification.id} notification={notification} onClose={onClose} />)}\n      </AnimatePresence>\n    </div>;\n};\nconst SwapInterface = ({\n  token,\n  onSwap\n}) => {\n  const [tokenAmount, setTokenAmount] = useState('');\n  const [solAmount, setSolAmount] = useState('');\n  const [swapType, setSwapType] = useState('buy');\n  const [inputMode, setInputMode] = useState('token');\n  const [slippage, setSlippage] = useState(1);\n  const [showSettings, setShowSettings] = useState(false);\n  const [isLoading, setIsLoading] = useState(false);\n  const [txError, setTxError] = useState('');\n  const [txSuccess, setTxSuccess] = useState('');\n  const {\n    publicKey,\n    sendTransaction\n  } = useWallet();\n  useEffect(() => {\n    setTxError('');\n  }, []);\n  const currentPrice = token.chartData[token.chartData.length - 1].price;\n  const estimatedPrice = swapType === 'buy' ? currentPrice * (1 + slippage / 100) : currentPrice * (1 - slippage / 100);\n  const priceImpact = (Math.random() * slippage * (swapType === 'buy' ? 1 : -1)).toFixed(2);\n  const handleTokenAmountChange = value => {\n    setTokenAmount(value);\n    setInputMode('token');\n    if (value && !isNaN(parseFloat(value))) {\n      const calculatedSolAmount = (parseFloat(value) * currentPrice).toFixed(6);\n      setSolAmount(calculatedSolAmount);\n    } else {\n      setSolAmount('');\n    }\n  };\n  const handleSolAmountChange = value => {\n    setSolAmount(value);\n    setInputMode('sol');\n    if (value && !isNaN(parseFloat(value))) {\n      const calculatedTokenAmount = (parseFloat(value) / currentPrice).toFixed(2);\n      setTokenAmount(calculatedTokenAmount);\n    } else {\n      setTokenAmount('');\n    }\n  };\n  const handleSwap = async () => {\n    if (!publicKey) return;\n    if (!tokenAmount || parseFloat(tokenAmount) <= 0 || !solAmount || parseFloat(solAmount) <= 0) return;\n    setIsLoading(true);\n    setTxError('');\n    setTxSuccess('');\n    try {\n      const connection = new web3.Connection('https://rpc.dev.fun/f4e3f2a1d31b4a5a2c76', 'confirmed');\n      const {\n        blockhash,\n        lastValidBlockHeight\n      } = await connection.getLatestBlockhash('confirmed');\n      if (swapType === 'buy') {\n        const transaction = new web3.Transaction();\n        transaction.recentBlockhash = blockhash;\n        transaction.lastValidBlockHeight = lastValidBlockHeight;\n        transaction.feePayer = publicKey;\n        const tokenMint = new web3.PublicKey(token.address);\n        const associatedTokenAccount = await getAssociatedTokenAddress(tokenMint, publicKey);\n        const accountInfo = await connection.getAccountInfo(associatedTokenAccount);\n        if (!accountInfo) {\n          transaction.add(createAssociatedTokenAccountInstruction(publicKey, associatedTokenAccount, publicKey, tokenMint));\n        }\n        const lamports = Math.floor(parseFloat(solAmount) * web3.LAMPORTS_PER_SOL);\n        const bondingCurveAddress = new web3.PublicKey(token.liquidity?.bondingCurveAddress || token.bondingCurveAddress || token.creator || PLATFORM_FEE_WALLET);\n        transaction.add(web3.SystemProgram.transfer({\n          fromPubkey: publicKey,\n          toPubkey: bondingCurveAddress,\n          lamports: lamports\n        }));\n        try {\n          const signature = await sendTransaction(transaction, connection);\n          await connection.confirmTransaction({\n            signature,\n            blockhash,\n            lastValidBlockHeight\n          }, 'confirmed');\n          setTxSuccess(`Transaction confirmed! ${tokenAmount} ${token.ticker} purchased.`);\n          onSwap({\n            type: swapType,\n            tokenAmount: parseFloat(tokenAmount),\n            solAmount,\n            priceImpact,\n            timestamp: Date.now(),\n            wallet: publicKey.toString()\n          });\n          setTokenAmount('');\n          setSolAmount('');\n        } catch (error) {\n          if (error.message && error.message.includes('User rejected')) {\n            setTxError('Transaction was rejected. Please try again and approve the transaction in your wallet.');\n          } else {\n            console.error('Buy transaction error:', error);\n            setTxError(`Transaction failed: ${error.message || 'Unknown error'}`);\n          }\n        }\n      } else {\n        const transaction = new web3.Transaction();\n        transaction.recentBlockhash = blockhash;\n        transaction.lastValidBlockHeight = lastValidBlockHeight;\n        transaction.feePayer = publicKey;\n        const tokenMint = new web3.PublicKey(token.address);\n        const sourceAccount = await getAssociatedTokenAddress(tokenMint, publicKey);\n        transaction.add(createTransferInstruction(sourceAccount, sourceAccount, publicKey, Math.floor(parseFloat(tokenAmount) * Math.pow(10, 9)), [], TOKEN_PROGRAM_ID));\n        try {\n          const signature = await sendTransaction(transaction, connection);\n          await connection.confirmTransaction({\n            signature,\n            blockhash,\n            lastValidBlockHeight\n          }, 'confirmed');\n          setTxSuccess(`Transaction confirmed! ${tokenAmount} ${token.ticker} sold.`);\n          onSwap({\n            type: swapType,\n            tokenAmount: parseFloat(tokenAmount),\n            solAmount,\n            priceImpact,\n            timestamp: Date.now(),\n            wallet: publicKey.toString()\n          });\n          setTokenAmount('');\n          setSolAmount('');\n        } catch (error) {\n          if (error.message && error.message.includes('User rejected')) {\n            setTxError('Transaction was rejected. Please try again and approve the transaction in your wallet.');\n          } else {\n            console.error('Sell transaction error:', error);\n            setTxError(`Transaction failed: ${error.message || 'Unknown error'}`);\n          }\n        }\n      }\n    } catch (error) {\n      console.error('Transaction setup error:', error);\n      setTxError(`Failed to setup transaction: ${error.message || 'Unknown error'}`);\n    } finally {\n      setIsLoading(false);\n    }\n  };\n  const toggleSwapType = () => {\n    setSwapType(swapType === 'buy' ? 'sell' : 'buy');\n  };\n  return <div className=\"bg-zinc-900 rounded-xl p-4 border border-purple-800\">\n      <div className=\"flex items-center justify-between mb-4\">\n        <div className=\"flex items-center\">\n          <ChalkText className=\"text-xl\">Swap</ChalkText>\n          {token?.liquidity?.hasMigrated && <span className=\"ml-2 bg-green-900 text-green-300 text-xs px-2 py-0.5 rounded-full\">\n              Via Raydium CPMM\n            </span>}\n        </div>\n        <button onClick={() => setShowSettings(!showSettings)} className=\"text-gray-400 hover:text-pink-300\">\n          <Settings size={18} />\n        </button>\n      </div>\n      \n      {txSuccess && <div className=\"bg-green-900 text-green-300 p-3 rounded-lg mb-4 text-sm\">\n          {txSuccess}\n        </div>}\n      \n      {txError && <div className=\"bg-red-900 text-red-300 p-3 rounded-lg mb-4 text-sm\">\n          {txError}\n        </div>}\n      \n      <div className=\"flex justify-between items-center mb-4\">\n        <div className=\"flex items-center space-x-2 bg-zinc-800 p-1 rounded-lg\">\n          <button onClick={() => setSwapType('buy')} className={`px-4 py-1.5 rounded-md text-sm font-medium transition-colors ${swapType === 'buy' ? 'bg-green-700 text-white' : 'bg-transparent text-gray-300 hover:text-white'}`}>\n            Buy\n          </button>\n          <button onClick={() => setSwapType('sell')} className={`px-4 py-1.5 rounded-md text-sm font-medium transition-colors ${swapType === 'sell' ? 'bg-red-700 text-white' : 'bg-transparent text-gray-300 hover:text-white'}`}>\n            Sell\n          </button>\n        </div>\n      </div>\n      \n      {showSettings && <div className=\"bg-zinc-800 rounded-lg p-3 mb-4\">\n          <div className=\"text-sm text-gray-300 mb-2\">Slippage Tolerance</div>\n          <div className=\"flex gap-2\">\n            {[0.5, 1, 2, 5].map(value => <button key={value} onClick={() => setSlippage(value)} className={`px-3 py-1 text-sm rounded ${slippage === value ? 'bg-purple-700' : 'bg-zinc-700'}`}>\n                {value}%\n              </button>)}\n          </div>\n        </div>}\n      \n      <div className=\"space-y-4\">\n        <div className=\"bg-black bg-opacity-40 rounded-lg p-3\">\n          <div className=\"flex justify-between text-sm text-gray-400 mb-1\">\n            <span>{swapType === 'buy' ? 'Pay' : 'Receive'}</span>\n            <span className=\"flex items-center\">\n              <span>SOL</span>\n              <button onClick={() => setInputMode('sol')} className={`ml-2 px-2 py-0.5 text-xs rounded ${inputMode === 'sol' ? 'bg-blue-700 text-white' : 'bg-zinc-700 text-gray-300 hover:bg-zinc-600'}`}>\n                Edit\n              </button>\n            </span>\n          </div>\n          <div className=\"flex items-center\">\n            <input type=\"number\" placeholder=\"0.0\" value={solAmount} onChange={e => handleSolAmountChange(e.target.value)} disabled={inputMode !== 'sol'} className={`bg-transparent text-white text-xl flex-1 focus:outline-none ${inputMode === 'sol' ? 'opacity-100' : 'opacity-70'}`} />\n          </div>\n        </div>\n        \n        <div className=\"flex justify-center\">\n          <button onClick={toggleSwapType} className=\"bg-zinc-800 hover:bg-zinc-700 rounded-full p-2 transform transition-all\">\n            <ArrowDownUp size={20} className={`${swapType === 'buy' ? 'text-green-400' : 'text-red-400'}`} />\n          </button>\n        </div>\n        \n        <div className=\"bg-black bg-opacity-40 rounded-lg p-3\">\n          <div className=\"flex justify-between text-sm text-gray-400 mb-1\">\n            <span>{swapType === 'buy' ? 'Receive' : 'Pay'}</span>\n            <span className=\"flex items-center\">\n              <span>${token.ticker}</span>\n              <button onClick={() => setInputMode('token')} className={`ml-2 px-2 py-0.5 text-xs rounded ${inputMode === 'token' ? 'bg-blue-700 text-white' : 'bg-zinc-700 text-gray-300 hover:bg-zinc-600'}`}>\n                Edit\n              </button>\n            </span>\n          </div>\n          <div className=\"flex items-center\">\n            <input type=\"number\" placeholder=\"0.0\" value={tokenAmount} onChange={e => handleTokenAmountChange(e.target.value)} disabled={inputMode !== 'token'} className={`bg-transparent text-white text-xl flex-1 focus:outline-none ${inputMode === 'token' ? 'opacity-100' : 'opacity-70'}`} />\n          </div>\n        </div>\n        \n        <div className=\"text-sm text-gray-400 space-y-1 bg-black bg-opacity-20 p-3 rounded-lg\">\n          <div className=\"flex justify-between\">\n            <span>Current Price:</span>\n            <span className=\"text-white\">{currentPrice.toFixed(8)} SOL</span>\n          </div>\n          <div className=\"flex justify-between\">\n            <span>Estimated Price:</span>\n            <span className=\"text-white\">{estimatedPrice.toFixed(8)} SOL</span>\n          </div>\n          <div className=\"flex justify-between\">\n            <span>Price Impact:</span>\n            <span className={parseFloat(priceImpact) > 2 ? 'text-red-400' : 'text-green-400'}>\n              {parseFloat(priceImpact) >= 0 ? '+' : ''}{priceImpact}%\n            </span>\n          </div>\n          <div className=\"flex justify-between\">\n            <span>Swap Rate:</span>\n            <span className=\"text-white\">1 {token.ticker} = {currentPrice.toFixed(8)} SOL</span>\n          </div>\n        </div>\n        \n        <button onClick={handleSwap} disabled={!publicKey || !tokenAmount || parseFloat(tokenAmount) <= 0 || !solAmount || parseFloat(solAmount) <= 0 || isLoading} className={`w-full py-3 rounded-lg font-bold \n            ${!publicKey ? 'bg-zinc-700 text-zinc-500' : isLoading ? 'bg-purple-800 text-white cursor-wait' : swapType === 'buy' ? 'bg-green-700 hover:bg-green-600 text-white' : 'bg-red-700 hover:bg-red-600 text-white'}`}>\n          {!publicKey ? 'Connect Wallet to Swap' : isLoading ? <div className=\"flex items-center justify-center\">\n              <RefreshCw size={16} className=\"animate-spin mr-2\" />\n              Processing...\n            </div> : swapType === 'buy' ? `Buy ${parseFloat(tokenAmount).toLocaleString()} ${token.ticker}` : `Sell ${parseFloat(tokenAmount).toLocaleString()} ${token.ticker}`}\n        </button>\n      </div>\n    </div>;\n};\nconst LiquidityPoolInfo = ({\n  liquidity\n}) => {\n  return <div className=\"bg-zinc-900 rounded-xl p-4 border border-purple-800 mb-6\">\n      <ChalkText className=\"text-xl mb-3\">\n        {liquidity.hasMigrated ? \"Raydium CPMM Pool\" : \"Bonding Curve Pool\"}\n      </ChalkText>\n      \n      <div className=\"grid grid-cols-2 gap-4 mb-4\">\n        <div>\n          <div className=\"text-gray-400 text-sm\">Total Liquidity</div>\n          <div className=\"text-white font-bold\">{liquidity.solAmount} SOL</div>\n        </div>\n        <div>\n          <div className=\"text-gray-400 text-sm\">Tokens In Pool</div>\n          <div className=\"text-white\">{liquidity.tokenAmount.toLocaleString()}</div>\n        </div>\n        <div>\n          <div className=\"text-gray-400 text-sm\">Current Price</div>\n          <div className=\"text-white\">{liquidity.currentPrice.toFixed(8)} SOL</div>\n        </div>\n        <div>\n          <div className=\"text-gray-400 text-sm\">\n            {liquidity.hasMigrated ? \"Pool Type\" : \"Migration Status\"}\n          </div>\n          <div className={liquidity.hasMigrated ? \"text-green-400\" : \"text-yellow-400\"}>\n            {liquidity.hasMigrated ? <div className=\"flex items-center\">\n                <span>Raydium CPMM</span>\n                {liquidity.raydiumPoolAddress && <a href={`https://raydium.io/liquidity/?ammId=${liquidity.raydiumPoolAddress}`} target=\"_blank\" rel=\"noopener noreferrer\" onClick={e => e.stopPropagation()} className=\"ml-2 text-pink-300 hover:text-pink-100\">\n                    <ExternalLink size={12} />\n                  </a>}\n              </div> : `${liquidity.solAmount}/${liquidity.migrationPoint} SOL`}\n          </div>\n        </div>\n      </div>\n      \n      {liquidity.bondingCurveAddress && <div className=\"mb-4\">\n          <div className=\"text-gray-400 text-sm\">Bonding Curve Address</div>\n          <div className=\"flex items-center justify-between\">\n            <div className=\"text-white font-mono text-xs truncate max-w-[70%]\">\n              {liquidity.bondingCurveAddress}\n            </div>\n            <CopyButton text={liquidity.bondingCurveAddress} />\n          </div>\n        </div>}\n      \n      <div className=\"mb-4\">\n        <div className=\"text-gray-400 text-sm mb-2\">\n          {liquidity.hasMigrated ? \"Liquidity Pool Depth\" : \"Bonding Curve\"}\n        </div>\n        <div className=\"h-24 w-full\">\n          <ResponsiveContainer width=\"100%\" height=\"100%\">\n            <BarChart data={liquidity.depth} margin={{\n            top: 5,\n            right: 5,\n            left: 5,\n            bottom: 5\n          }}>\n              <CartesianGrid stroke=\"#374151\" strokeDasharray=\"3 3\" />\n              <XAxis dataKey=\"price\" tick={{\n              fill: '#9CA3AF'\n            }} tickFormatter={value => value.toFixed(8)} />\n              <YAxis tick={{\n              fill: '#9CA3AF'\n            }} />\n              <Tooltip contentStyle={{\n              backgroundColor: '#111827',\n              border: '1px solid #4B5563'\n            }} formatter={(value, name, props) => [value.toLocaleString(), 'Available Tokens']} labelFormatter={label => `Price: ${parseFloat(label).toFixed(8)} SOL`} />\n              <Bar dataKey=\"volume\" fill={liquidity.hasMigrated ? \"#64B5F6\" : \"#D946EF\"} />\n            </BarChart>\n          </ResponsiveContainer>\n        </div>\n        <div className=\"text-xs text-gray-400 mt-1 italic\">\n          {!liquidity.hasMigrated ? `Token will migrate at ${liquidity.migrationPoint} SOL in the bonding curve` : \"Token has migrated to Raydium CPMM DEX with constant product formula x*y=k\"}\n        </div>\n      </div>\n      \n      <div>\n        <div className=\"text-gray-400 text-sm mb-2\">LP Distribution</div>\n        <div className=\"flex items-center h-6 rounded-full overflow-hidden bg-zinc-800\">\n          {liquidity.distribution.map((item, index) => <div key={index} style={{\n          width: `${item.value}%`\n        }} className={`h-full ${index === 0 ? 'bg-purple-600' : index === 1 ? 'bg-pink-600' : 'bg-indigo-600'}`}></div>)}\n        </div>\n        <div className=\"flex mt-2 text-xs\">\n          {liquidity.distribution.map((item, index) => <div key={index} className=\"flex items-center mr-4\">\n              <div className={`w-3 h-3 rounded-full mr-1 ${index === 0 ? 'bg-purple-600' : index === 1 ? 'bg-pink-600' : 'bg-indigo-600'}`}></div>\n              <span>{item.name}: {item.value}%</span>\n            </div>)}\n        </div>\n      </div>\n    </div>;\n};\nconst TokenDetail = () => {\n  const {\n    tokenId\n  } = useParams();\n  const navigate = useNavigate();\n  const [token, setToken] = useState(null);\n  const [loading, setLoading] = useState(true);\n  const [timeRange, setTimeRange] = useState('1d');\n  const [volumeVisible, setVolumeVisible] = useState(true);\n  const [tradeFilter, setTradeFilter] = useState('all');\n  const [notifications, setNotifications] = useState([]);\n  const {\n    publicKey\n  } = useWallet();\n  const addNotification = notification => {\n    const id = Date.now();\n    setNotifications(prev => [{\n      id,\n      time: new Date().toLocaleTimeString(),\n      ...notification\n    }, ...prev]);\n    setTimeout(() => {\n      setNotifications(prev => prev.filter(n => n.id !== id));\n    }, 5000);\n  };\n  const removeNotification = id => {\n    setNotifications(prev => prev.filter(n => n.id !== id));\n  };\n  useEffect(() => {\n    const allTokens = [...GorkTokenStore.getTokens(), ...SAMPLE_TOKENS];\n    const foundToken = allTokens.find(t => t.id.toString() === tokenId);\n    if (foundToken) {\n      if (!foundToken.chartData) {\n        foundToken.chartData = generateChartData();\n      }\n      if (!foundToken.trades) {\n        foundToken.trades = generateTrades(foundToken.ticker, foundToken.address || generateTokenAddress());\n      }\n      if (!foundToken.address) {\n        foundToken.address = generateTokenAddress();\n      }\n      if (!foundToken.marketCap) {\n        foundToken.marketCap = (Math.random() * 500000 + 50000).toFixed(2);\n      }\n      if (!foundToken.holders) {\n        foundToken.holders = Math.floor(Math.random() * 500) + 50;\n      }\n      if (!foundToken.volume24h) {\n        foundToken.volume24h = (Math.random() * 20000 + 1000).toFixed(2);\n      }\n      if (!foundToken.liquidity) {\n        const currentPrice = foundToken.chartData[foundToken.chartData.length - 1].price;\n        foundToken.liquidity = generateLiquidityData(currentPrice);\n      }\n      setToken(foundToken);\n    }\n    setLoading(false);\n    socket.on('trade', data => {\n      if (data.token === foundToken?.ticker) {\n        addTrade(data);\n        if (data.amount > 50000) {\n          addNotification({\n            type: 'whale',\n            title: 'Whale Alert! 🐋',\n            message: `${data.type === 'buy' ? 'Buy' : 'Sell'} of ${data.amount.toLocaleString()} ${foundToken.ticker} detected!`\n          });\n        }\n      }\n    });\n    socket.on('token_migrated', data => {\n      if (data.token === foundToken?.ticker) {\n        addNotification({\n          type: 'migration',\n          title: '🚀 Token Migration Complete!',\n          message: `${foundToken.ticker} has migrated to Raydium CPMM DEX`\n        });\n      }\n    });\n    socket.on('price_alert', data => {\n      if (data.token === foundToken?.ticker) {\n        addNotification({\n          type: 'price',\n          title: `Price ${data.change > 0 ? 'Increase' : 'Decrease'} 📈`,\n          message: `$${foundToken.ticker} ${data.change > 0 ? 'up' : 'down'} by ${Math.abs(data.change)}% in the last hour`,\n          change: data.change\n        });\n      }\n    });\n    return () => {\n      socket.off('trade');\n      socket.off('price_alert');\n    };\n  }, [tokenId]);\n  useEffect(() => {\n    if (!token) return;\n    const updateInterval = setInterval(() => {\n      const lastPrice = token.chartData[token.chartData.length - 1].price;\n      const priceChange = (Math.random() - 0.5) * 0.02;\n      const newPrice = Math.max(0.00000001, lastPrice * (1 + priceChange));\n      const newDataPoint = {\n        time: new Date().toISOString(),\n        price: newPrice,\n        volume: Math.random() * 5000 + 1000,\n        formattedTime: new Date().toLocaleTimeString([], {\n          hour: '2-digit',\n          minute: '2-digit'\n        })\n      };\n      if (Math.random() > 0.7) {\n        const tradeType = Math.random() > 0.5 ? 'buy' : 'sell';\n        const tradeAmount = Math.floor(Math.random() * 10000) + 1000;\n        const wallet = publicKey ? Math.random() > 0.8 ? publicKey.toString() : GorkTokenStore.getRandomWallet() : GorkTokenStore.getRandomWallet();\n        const priceImpact = (Math.random() * 2 - 1).toFixed(2);\n        const newTrade = {\n          id: `tx${Date.now()}${Math.random().toString(36).substring(2, 6)}`,\n          type: tradeType,\n          amount: tradeAmount,\n          ticker: token.ticker,\n          wallet,\n          timestamp: Date.now(),\n          solAmount: (tradeAmount * newPrice).toFixed(6),\n          priceImpact,\n          txHash: `${Math.random().toString(36).substring(2, 10)}${Math.random().toString(36).substring(2, 10)}`\n        };\n        socket.emit('trade', {\n          token: token.ticker,\n          type: tradeType,\n          amount: tradeAmount,\n          wallet: wallet.slice(0, 4) + '...' + wallet.slice(-4),\n          price: newPrice.toFixed(8)\n        });\n        if (tradeAmount > 50000) {\n          addNotification({\n            type: 'whale',\n            title: 'Whale Alert! 🐋',\n            message: `${tradeType === 'buy' ? 'Buy' : 'Sell'} of ${tradeAmount.toLocaleString()} $${token.ticker} detected!`\n          });\n        }\n        setToken(prevToken => ({\n          ...prevToken,\n          chartData: [...prevToken.chartData.slice(1), newDataPoint],\n          trades: [newTrade, ...prevToken.trades.slice(0, 99)],\n          marketCap: (newPrice * (parseFloat(prevToken.marketCap) / lastPrice)).toFixed(2)\n        }));\n      } else {\n        setToken(prevToken => ({\n          ...prevToken,\n          chartData: [...prevToken.chartData.slice(1), newDataPoint],\n          marketCap: (newPrice * (parseFloat(prevToken.marketCap) / lastPrice)).toFixed(2)\n        }));\n      }\n      if (Math.random() > 0.95) {\n        const changePercent = Math.random() * 10 * (Math.random() > 0.5 ? 1 : -1);\n        socket.emit('price_alert', {\n          token: token.ticker,\n          change: changePercent.toFixed(2)\n        });\n        addNotification({\n          type: 'price',\n          title: `Price ${changePercent > 0 ? 'Increase' : 'Decrease'} 📈`,\n          message: `$${token.ticker} ${changePercent > 0 ? 'up' : 'down'} by ${Math.abs(changePercent).toFixed(2)}% in the last hour`,\n          change: changePercent\n        });\n      }\n    }, 5000);\n    return () => clearInterval(updateInterval);\n  }, [token, publicKey]);\n  const addTrade = useCallback(trade => {\n    if (!token) return;\n    const newTrade = {\n      id: `tx${Date.now()}${Math.random().toString(36).substring(2, 6)}`,\n      type: trade.type,\n      amount: trade.amount,\n      ticker: token.ticker,\n      wallet: trade.wallet,\n      timestamp: Date.now(),\n      solAmount: trade.solAmount || (trade.amount * token.chartData[token.chartData.length - 1].price).toFixed(6),\n      priceImpact: trade.priceImpact || (Math.random() * 2 - 1).toFixed(2),\n      txHash: `${Math.random().toString(36).substring(2, 10)}${Math.random().toString(36).substring(2, 10)}`\n    };\n    setToken(prevToken => ({\n      ...prevToken,\n      trades: [newTrade, ...prevToken.trades.slice(0, 99)]\n    }));\n  }, [token]);\n  const handleSwap = swapData => {\n    addTrade(swapData);\n    addNotification({\n      type: swapData.type === 'buy' ? 'success' : 'info',\n      title: `${swapData.type === 'buy' ? 'Purchase' : 'Sale'} Successful`,\n      message: `${swapData.type === 'buy' ? 'Bought' : 'Sold'} ${swapData.tokenAmount.toLocaleString()} $${token.ticker} for ${swapData.solAmount} SOL`\n    });\n  };\n  const getPriceChange = () => {\n    if (!token?.chartData || token.chartData.length < 2) return 0;\n    const firstPrice = token.chartData[0].price;\n    const lastPrice = token.chartData[token.chartData.length - 1].price;\n    return (lastPrice - firstPrice) / firstPrice * 100;\n  };\n  const filteredTrades = token?.trades?.filter(trade => {\n    if (tradeFilter === 'all') return true;\n    return trade.type === tradeFilter;\n  }) || [];\n  const priceChange = token ? getPriceChange() : 0;\n  const isPriceUp = priceChange >= 0;\n  if (loading) {\n    return <div className=\"min-h-screen bg-black flex items-center justify-center\">\n        <div className=\"text-purple-500 text-xl flex items-center\">\n                  <RefreshCw size={20} className=\"mr-2 animate-spin\" />\n                  Loading token data...\n                </div>\n      </div>;\n  }\n  if (!token) {\n    return <div className=\"min-h-screen bg-black flex flex-col items-center justify-center gap-4\">\n        <div className=\"text-purple-500 text-xl\">Token not found</div>\n        <button onClick={() => navigate('/')} className=\"bg-purple-800 hover:bg-purple-700 text-white px-4 py-2 rounded-lg flex items-center\">\n          <ArrowLeft size={16} className=\"mr-2\" />\n          Back to Home\n        </button>\n      </div>;\n  }\n  const currentPrice = token.chartData[token.chartData.length - 1].price.toFixed(8);\n  return <div className=\"min-h-screen bg-black text-white\">\n      <header className=\"w-full py-4 px-6 border-b border-purple-800 flex items-center\">\n        <button onClick={() => navigate('/')} className=\"bg-purple-800 hover:bg-purple-700 text-white px-2 py-1 rounded-lg flex items-center mr-4\">\n          <ArrowLeft size={16} className=\"mr-1\" />\n          Back\n        </button>\n        \n        <div className=\"flex items-center gap-3\">\n          <img src={token.image} alt={token.name} className=\"w-10 h-10 rounded-full border-2 border-purple-500\" />\n          <div>\n            <ChalkText className=\"text-xl md:text-2xl\">{token.name}</ChalkText>\n            <div className=\"flex items-center\">\n              <span className=\"text-pink-300 font-mono mr-2\">${token.ticker}</span>\n              <div className={`text-xs px-2 py-0.5 rounded ${isPriceUp ? 'bg-green-900 text-green-400' : 'bg-red-900 text-red-400'}`}>\n                {isPriceUp ? '+' : ''}{priceChange.toFixed(2)}%\n              </div>\n            </div>\n          </div>\n        </div>\n      </header>\n      \n      <Notifications notifications={notifications} onClose={removeNotification} />\n      \n      <div className=\"container mx-auto p-4 md:p-6\">\n        <div className=\"grid grid-cols-1 lg:grid-cols-3 gap-6\">\n          <div className=\"lg:col-span-2 space-y-6\">\n            <div className=\"bg-zinc-900 rounded-xl p-4 border border-purple-800\">\n              <div className=\"flex items-center justify-between mb-4\">\n                <div>\n                  <ChalkText className=\"text-xl\">Price Chart</ChalkText>\n                  <div className=\"text-3xl font-mono font-bold text-white\">${currentPrice}</div>\n                </div>\n                \n                <div className=\"flex gap-2\">\n                  <button onClick={() => setTimeRange('5m')} className={`px-3 py-1 rounded-lg ${timeRange === '5m' ? 'bg-purple-800' : 'bg-zinc-800 hover:bg-zinc-700'}`}>\n                    5M\n                  </button>\n                  <button onClick={() => setTimeRange('15m')} className={`px-3 py-1 rounded-lg ${timeRange === '15m' ? 'bg-purple-800' : 'bg-zinc-800 hover:bg-zinc-700'}`}>\n                    15M\n                  </button>\n                  <button onClick={() => setTimeRange('1h')} className={`px-3 py-1 rounded-lg ${timeRange === '1h' ? 'bg-purple-800' : 'bg-zinc-800 hover:bg-zinc-700'}`}>\n                    1H\n                  </button>\n                  <button onClick={() => setTimeRange('4h')} className={`px-3 py-1 rounded-lg ${timeRange === '4h' ? 'bg-purple-800' : 'bg-zinc-800 hover:bg-zinc-700'}`}>\n                    4H\n                  </button>\n                  <button onClick={() => setTimeRange('1d')} className={`px-3 py-1 rounded-lg ${timeRange === '1d' ? 'bg-purple-800' : 'bg-zinc-800 hover:bg-zinc-700'}`}>\n                    1D\n                  </button>\n                </div>\n              </div>\n              \n              <div className=\"flex items-center mb-4\">\n                <button onClick={() => setVolumeVisible(!volumeVisible)} className={`flex items-center px-3 py-1 rounded-lg text-sm ${volumeVisible ? 'bg-purple-800' : 'bg-zinc-800 hover:bg-zinc-700'}`}>\n                  <BarChart3 size={14} className=\"mr-1\" />\n                  Volume\n                </button>\n              </div>\n              \n              <div className=\"h-64 w-full\">\n                <ResponsiveContainer width=\"100%\" height=\"100%\">\n                  <ComposedChart data={token.chartData} margin={{\n                  top: 10,\n                  right: 10,\n                  left: 0,\n                  bottom: 0\n                }}>\n                    <defs>\n                      <linearGradient id=\"colorPrice\" x1=\"0\" y1=\"0\" x2=\"0\" y2=\"1\">\n                        <stop offset=\"5%\" stopColor=\"#D946EF\" stopOpacity={0.4} />\n                        <stop offset=\"95%\" stopColor=\"#D946EF\" stopOpacity={0} />\n                      </linearGradient>\n                    </defs>\n                    <XAxis dataKey=\"formattedTime\" tick={{\n                    fill: '#9CA3AF'\n                  }} axisLine={{\n                    stroke: '#4B5563'\n                  }} />\n                    <YAxis domain={['auto', 'auto']} tick={{\n                    fill: '#9CA3AF'\n                  }} axisLine={{\n                    stroke: '#4B5563'\n                  }} tickFormatter={value => value.toFixed(8)} />\n                    {volumeVisible && <YAxis yAxisId=\"right\" orientation=\"right\" tick={{\n                    fill: '#9CA3AF'\n                  }} axisLine={{\n                    stroke: '#4B5563'\n                  }} />}\n                    <CartesianGrid stroke=\"#374151\" strokeDasharray=\"3 3\" />\n                    <Tooltip contentStyle={{\n                    backgroundColor: '#111827',\n                    border: '1px solid #4B5563'\n                  }} formatter={value => [`${parseFloat(value).toFixed(8)}`, 'Price']} labelFormatter={label => `Time: ${label}`} />\n                    <Area type=\"monotone\" dataKey=\"price\" stroke=\"#D946EF\" fill=\"url(#colorPrice)\" strokeWidth={2} />\n                    {volumeVisible && <Bar dataKey=\"volume\" fill=\"#8A3FFC\" yAxisId=\"right\" opacity={0.5} />}\n                  </ComposedChart>\n                </ResponsiveContainer>\n              </div>\n            </div>\n            \n            <div className=\"bg-zinc-900 rounded-xl p-4 border border-purple-800\">\n              <div className=\"flex items-center justify-between mb-4\">\n                <ChalkText className=\"text-xl\">Live Transactions</ChalkText>\n                <div className=\"flex gap-2\">\n                  <button onClick={() => setTradeFilter('all')} className={`px-3 py-1 rounded-lg text-sm ${tradeFilter === 'all' ? 'bg-purple-800' : 'bg-zinc-800 hover:bg-zinc-700'}`}>\n                    All\n                  </button>\n                  <button onClick={() => setTradeFilter('buy')} className={`px-3 py-1 rounded-lg text-sm ${tradeFilter === 'buy' ? 'bg-green-800' : 'bg-zinc-800 hover:bg-zinc-700'}`}>\n                    Buys\n                  </button>\n                  <button onClick={() => setTradeFilter('sell')} className={`px-3 py-1 rounded-lg text-sm ${tradeFilter === 'sell' ? 'bg-red-800' : 'bg-zinc-800 hover:bg-zinc-700'}`}>\n                    Sells\n                  </button>\n                </div>\n              </div>\n              \n              <div className=\"overflow-x-auto\">\n                <table className=\"w-full\">\n                  <thead>\n                    <tr className=\"text-left text-gray-400 border-b border-zinc-800\">\n                      <th className=\"pb-2\">Type</th>\n                      <th className=\"pb-2\">Amount</th>\n                      <th className=\"pb-2\">Price</th>\n                      <th className=\"pb-2\">Wallet</th>\n                      <th className=\"pb-2\">Impact</th>\n                      <th className=\"pb-2\">Time</th>\n                    </tr>\n                  </thead>\n                  <tbody className=\"text-sm\">\n                    {filteredTrades.slice(0, 10).map(trade => <tr key={trade.id} className=\"border-b border-zinc-800 hover:bg-zinc-800\">\n                        <td className={`py-3 ${trade.type === 'buy' ? 'text-green-400' : trade.type === 'sell' ? 'text-red-400' : trade.type === 'migration' ? 'text-blue-400' : 'text-gray-400'}`}>\n                          {trade.type === 'buy' ? 'BUY' : trade.type === 'sell' ? 'SELL' : trade.type === 'migration' ? 'MIGRATE' : trade.type.toUpperCase()}\n                        </td>\n                        <td className=\"py-3\">{trade.amount.toLocaleString()} ${token.ticker}</td>\n                        <td className=\"py-3 font-mono\">{parseFloat(trade.solAmount).toFixed(6)} SOL</td>\n                        <td className=\"py-3\">\n                          <div className=\"flex items-center\">\n                            <span className=\"truncate w-20\">{trade.wallet.slice(0, 4)}...{trade.wallet.slice(-4)}</span>\n                            <a href={`https://solscan.io/tx/${trade.txHash}`} target=\"_blank\" rel=\"noopener noreferrer\" className=\"ml-1 text-pink-400 hover:text-pink-300\" onClick={e => e.stopPropagation()}>\n                              <ExternalLink size={12} />\n                            </a>\n                          </div>\n                        </td>\n                        <td className={`py-3 ${trade.type === 'migration' ? 'text-blue-400' : parseFloat(trade.priceImpact) > 0 ? 'text-green-400' : parseFloat(trade.priceImpact) < 0 ? 'text-red-400' : 'text-gray-400'}`}>\n                          {trade.type === 'migration' ? 'CPMM' : parseFloat(trade.priceImpact) > 0 ? '+' + trade.priceImpact + '%' : trade.priceImpact + '%'}\n                        </td>\n                        <td className=\"py-3 text-gray-400\">\n                          {new Date(trade.timestamp).toLocaleTimeString([], {\n                        hour: '2-digit',\n                        minute: '2-digit',\n                        second: '2-digit'\n                      })}\n                        </td>\n                      </tr>)}\n                  </tbody>\n                </table>\n              </div>\n            </div>\n          </div>\n          \n          <div className=\"space-y-6\">\n            <div className=\"bg-zinc-900 rounded-xl p-4 border border-purple-800\">\n              <ChalkText className=\"text-xl mb-3\">Token Information</ChalkText>\n              \n              <div className=\"space-y-3\">\n                <div>\n                  <div className=\"text-gray-400 text-sm\">Token Address</div>\n                  <div className=\"flex items-center justify-between\">\n                    <div className=\"text-white font-mono text-sm truncate max-w-[70%]\">\n                      {token.address}\n                    </div>\n                    <CopyButton text={token.address} />\n                  </div>\n                </div>\n                \n                {token.creatorPurchase && <div>\n                    <div className=\"text-gray-400 text-sm\">Creator Allocation</div>\n                    <div className=\"text-white\">{token.creatorPurchase.tokenAmount.toLocaleString()} {token.ticker} ({token.creatorPurchase.percent.toFixed(2)}%)</div>\n                  </div>}\n                \n                <div>\n                  <div className=\"text-gray-400 text-sm\">Total Supply</div>\n                  <div className=\"text-white\">{TOKEN_SUPPLY.toLocaleString()} {token.ticker}</div>\n                </div>\n                \n                {token.liquidity && !token.liquidity.hasMigrated && <div>\n                    <div className=\"flex justify-between items-center text-sm mb-1\">\n                      <span className=\"text-gray-400\">Bonding Curve Migration</span>\n                      <span className=\"text-white\">\n                        {parseFloat(token.liquidity.solAmount).toFixed(2)}/{BONDING_CURVE_MIGRATION_POINT} SOL\n                      </span>\n                    </div>\n                    <div className=\"w-full bg-zinc-800 rounded-full h-2.5\">\n                      <div className=\"bg-gradient-to-r from-purple-600 to-pink-500 h-2.5 rounded-full\" style={{\n                    width: `${Math.min(100, parseFloat(token.liquidity.solAmount) / BONDING_CURVE_MIGRATION_POINT * 100)}%`\n                  }}>\n                      </div>\n                    </div>\n                  </div>}\n                \n                <div className=\"grid grid-cols-2 gap-4\">\n                  <div>\n                    <div className=\"text-gray-400 text-sm\">Market Cap</div>\n                    <div className=\"text-white\">${parseFloat(token.marketCap).toLocaleString()}</div>\n                  </div>\n                  <div>\n                    <div className=\"text-gray-400 text-sm\">Holders</div>\n                    <div className=\"text-white\">{token.holders}</div>\n                  </div>\n                  <div>\n                    <div className=\"text-gray-400 text-sm\">24h Volume</div>\n                    <div className=\"text-white\">${parseFloat(token.volume24h).toLocaleString()}</div>\n                  </div>\n                  <div>\n                    <div className=\"text-gray-400 text-sm\">Price Change 24h</div>\n                    <div className={isPriceUp ? 'text-green-400' : 'text-red-400'}>\n                      {isPriceUp ? '+' : ''}{priceChange.toFixed(2)}%\n                    </div>\n                  </div>\n                  <div>\n                    <div className=\"text-gray-400 text-sm\">Bonding Status</div>\n                    <div className={token.liquidity && token.liquidity.hasMigrated ? 'text-green-400' : 'text-yellow-400'}>\n                      {token.liquidity && token.liquidity.hasMigrated ? 'Migrated' : 'In Bonding Curve'}\n                    </div>\n                  </div>\n                  <div>\n                    <div className=\"text-gray-400 text-sm\">Launch Fee</div>\n                    <div className=\"text-white\">{token.launchFee || LAUNCH_FEE} SOL</div>\n                  </div>\n                </div>\n                \n                <div className=\"pt-2\">\n                  <div className=\"text-gray-400 text-sm mb-1\">Social Links</div>\n                  <div className=\"flex gap-3\">\n                    {token.website && <a href={token.website} target=\"_blank\" rel=\"noopener noreferrer\" className=\"text-pink-300 hover:text-pink-100 flex items-center\">\n                        <Globe size={16} className=\"mr-1\" />\n                        <span>Website</span>\n                        <ExternalLink size={12} className=\"ml-1\" />\n                      </a>}\n                    \n                    {token.twitter && <a href={`https://x.com/${token.twitter}`} target=\"_blank\" rel=\"noopener noreferrer\" className=\"text-pink-300 hover:text-pink-100 flex items-center\">\n                        <div className=\"text-pink-300 mr-1 flex items-center justify-center w-4 h-4 font-bold\">𝕏</div>\n                        <span>X</span>\n                        <ExternalLink size={12} className=\"ml-1\" />\n                      </a>}\n                    \n                    {token.telegram && <a href={`https://t.me/${token.telegram}`} target=\"_blank\" rel=\"noopener noreferrer\" className=\"text-pink-300 hover:text-pink-100 flex items-center\">\n                        <Send size={16} className=\"mr-1\" />\n                        <span>Telegram</span>\n                        <ExternalLink size={12} className=\"ml-1\" />\n                      </a>}\n                  </div>\n                </div>\n                \n                {token.liquidity && !token.liquidity.hasMigrated && <div className=\"mt-4 p-3 bg-yellow-900 bg-opacity-30 rounded-lg border border-yellow-800\">\n                    <div className=\"flex items-start\">\n                      <div className=\"text-yellow-300 mr-2 text-xl\">⚠️</div>\n                      <div>\n                        <div className=\"text-yellow-300 font-bold\">Bonding Curve Active</div>\n                        <p className=\"text-sm text-gray-300\">\n                          This token is using a bonding curve model and will migrate to Raydium CPMM DEX when it reaches {BONDING_CURVE_MIGRATION_POINT} SOL in the pool.\n                        </p>\n                      </div>\n                    </div>\n                  </div>}\n      \n      {token.liquidity && token.liquidity.hasMigrated && <div className=\"mt-4 p-3 bg-green-900 bg-opacity-30 rounded-lg border border-green-800\">\n                    <div className=\"flex items-start\">\n                      <div className=\"text-green-300 mr-2 text-xl\">✅</div>\n                      <div>\n                        <div className=\"text-green-300 font-bold\">Raydium CPMM Active</div>\n                        <p className=\"text-sm text-gray-300\">\n                          This token has successfully migrated to Raydium CPMM DEX. You can now trade with normal AMM liquidity pools.\n                        </p>\n                        {token.liquidity.raydiumPoolAddress && <a href={`https://raydium.io/liquidity/?ammId=${token.liquidity.raydiumPoolAddress}`} target=\"_blank\" rel=\"noopener noreferrer\" className=\"text-pink-300 hover:text-pink-100 text-sm flex items-center mt-2\">\n                            View on Raydium\n                            <ExternalLink size={12} className=\"ml-1\" />\n                          </a>}\n                      </div>\n                    </div>\n                  </div>}\n              </div>\n            </div>\n            \n            <LiquidityPoolInfo liquidity={token.liquidity} />\n            \n            <SwapInterface token={token} onSwap={handleSwap} />\n          </div>\n        </div>\n      </div>\n    </div>;\n};\nconst stateClient = new StateClient({\n  baseURL: 'https://state.dev.fun',\n  appId: 'f4e3f2a1d31b4a5a2c76'\n});\nconst safeStateCall = async apiCall => {\n  try {\n    return await apiCall();\n  } catch (error) {\n    console.error(\"API call failed:\", error);\n    return null;\n  }\n};\nconst GorkTokenStore = {\n  tokens: [],\n  setTokens: function (newTokens) {\n    this.tokens = newTokens;\n  },\n  getTokens: function () {\n    return this.tokens;\n  },\n  addToken: function (token) {\n    this.tokens = [token, ...this.tokens];\n    safeStateCall(() => stateClient.createEntity('tokens', {\n      id: token.id.toString(),\n      ...token\n    })).catch(error => console.error('Failed to store token:', error));\n  },\n  getTokenByAddress: function (address) {\n    return this.tokens.find(token => token.address.toLowerCase() === address.toLowerCase());\n  },\n  getTokensBySearch: function (query) {\n    query = query.toLowerCase();\n    return this.tokens.filter(token => token.name.toLowerCase().includes(query) || token.ticker.toLowerCase().includes(query) || token.address.toLowerCase().includes(query));\n  },\n  loadTokensFromStorage: async function () {\n    try {\n      const storedTokens = await safeStateCall(() => stateClient.getEntities('tokens'));\n      if (storedTokens && storedTokens.length > 0) {\n        this.tokens = storedTokens;\n      }\n      return storedTokens || [];\n    } catch (error) {\n      console.error('Failed to load tokens from storage:', error);\n      return [];\n    }\n  },\n  getRandomWallet: function () {\n    const wallets = ['8xDR4LqQJw47LQVxhFcQvzusQicsH81AZ9MpEKWEMFG7', '5HLxTpJqx1JKsZo7kK8nS6naq3N6KR3jCZvfZQQvdMhy', 'GrdLJ1YNMbj2QoYrZ8G9p2BeCkRPJWNkcKGBNVtfPHu7', 'CTuokFM9rReNhGUtG2gfeAQoVXTULzRRqVSw3HYXyMKx', 'FmJkZfABQJ5vVJRXTALhpJjwAuzxJkECvBYpSZnZBLzJ'];\n    return wallets[Math.floor(Math.random() * wallets.length)];\n  },\n  getFeeReceiver: function () {\n    return PLATFORM_FEE_WALLET;\n  }\n};\nconst simulateTrade = token => {\n  if (!token.chartData || token.chartData.length === 0) return token;\n  const tokenCopy = {\n    ...token\n  };\n  let currentSolInPool = parseFloat(tokenCopy.liquidity.solAmount);\n  let hasMigrated = currentSolInPool >= BONDING_CURVE_MIGRATION_POINT;\n  let tradeType, tradeAmount, newSolInPool, newPrice;\n  let justMigrated = false;\n  if (hasMigrated) {\n    const changePercent = (Math.random() - 0.5) * 0.1;\n    const currentPrice = tokenCopy.chartData[tokenCopy.chartData.length - 1].price;\n    newPrice = Math.max(0.00000001, currentPrice * (1 + changePercent));\n    tradeType = Math.random() > 0.5 ? 'buy' : 'sell';\n    tradeAmount = Math.floor(Math.random() * 10000) + 1000;\n  } else {\n    tradeType = Math.random() > 0.7 ? 'buy' : 'sell';\n    if (tradeType === 'buy') {\n      const solToAdd = Math.random() * 0.5 + 0.01;\n      newSolInPool = currentSolInPool + solToAdd;\n      newPrice = calculateBondingPrice(newSolInPool);\n      tradeAmount = Math.floor(calculateTokensFromSol(solToAdd, currentSolInPool));\n      tokenCopy.liquidity.solAmount = newSolInPool.toFixed(4);\n      tokenCopy.liquidity.currentPrice = newPrice;\n      if (newSolInPool >= BONDING_CURVE_MIGRATION_POINT && !tokenCopy.liquidity.hasMigrated) {\n        tokenCopy.liquidity.hasMigrated = true;\n        tokenCopy.liquidity.raydiumPoolAddress = `${Math.random().toString(36).substring(2, 10)}${Math.random().toString(36).substring(2, 10)}${Math.random().toString(36).substring(2, 10)}`;\n        justMigrated = true;\n      }\n    } else {\n      const maxSolToRemove = Math.max(0, currentSolInPool - LAUNCH_FEE);\n      const solToRemove = Math.min(maxSolToRemove, Math.random() * 0.2);\n      newSolInPool = currentSolInPool - solToRemove;\n      newPrice = calculateBondingPrice(newSolInPool);\n      tradeAmount = Math.floor(calculateTokensFromSol(solToRemove, newSolInPool));\n      tokenCopy.liquidity.solAmount = newSolInPool.toFixed(4);\n      tokenCopy.liquidity.currentPrice = newPrice;\n    }\n  }\n  const newDataPoint = {\n    time: new Date().toISOString(),\n    price: newPrice,\n    volume: Math.random() * 5000 + 1000,\n    formattedTime: new Date().toLocaleTimeString([], {\n      hour: '2-digit',\n      minute: '2-digit'\n    })\n  };\n  tokenCopy.chartData = [...tokenCopy.chartData.slice(1), newDataPoint];\n  tokenCopy.marketCap = (newPrice * TOKEN_SUPPLY).toFixed(2);\n  if (tokenCopy.trades) {\n    const priceImpact = (Math.random() * 2 - 1).toFixed(2);\n    const solAmount = tradeType === 'buy' ? (tradeAmount * newPrice).toFixed(6) : (tradeAmount * tokenCopy.liquidity.currentPrice).toFixed(6);\n    const newTrade = {\n      id: `tx${Date.now()}${Math.random().toString(36).substring(2, 6)}`,\n      type: tradeType,\n      amount: tradeAmount,\n      ticker: tokenCopy.ticker,\n      wallet: GorkTokenStore.getRandomWallet(),\n      timestamp: Date.now(),\n      solAmount,\n      priceImpact,\n      txHash: `${Math.random().toString(36).substring(2, 10)}${Math.random().toString(36).substring(2, 10)}`\n    };\n    if (justMigrated) {\n      const migrationTrade = {\n        id: `tx${Date.now()}${Math.random().toString(36).substring(2, 6)}-migration`,\n        type: 'migration',\n        amount: tokenCopy.supplyInBondingCurve || Math.floor(TOKEN_SUPPLY * BONDING_CURVE_SUPPLY_PERCENT),\n        ticker: tokenCopy.ticker,\n        wallet: \"RaydiumMigration11111111111111111111111111\",\n        timestamp: Date.now() - 1000,\n        solAmount: tokenCopy.liquidity.solAmount,\n        priceImpact: \"0.00\",\n        txHash: `${Math.random().toString(36).substring(2, 10)}${Math.random().toString(36).substring(2, 10)}`,\n        note: \"Migrated to Raydium CPMM DEX\"\n      };\n      tokenCopy.trades = [newTrade, migrationTrade, ...tokenCopy.trades.slice(0, 48)];\n      socket.emit('token_migrated', {\n        token: tokenCopy.ticker,\n        time: new Date().toISOString(),\n        poolAddress: tokenCopy.liquidity.raydiumPoolAddress\n      });\n    } else {\n      tokenCopy.trades = [newTrade, ...tokenCopy.trades.slice(0, 49)];\n    }\n    tokenCopy.liquidity.depth = Array.from({\n      length: 5\n    }, (_, i) => {\n      const multiplier = 0.8 + i * 0.1;\n      const simulatedSol = parseFloat(tokenCopy.liquidity.solAmount) * multiplier;\n      return {\n        price: calculateBondingPrice(simulatedSol),\n        volume: simulatedSol < BONDING_CURVE_MIGRATION_POINT ? tokenCopy.supplyInBondingCurve * (1 - simulatedSol / BONDING_CURVE_MIGRATION_POINT) : 0\n      };\n    });\n  }\n  return tokenCopy;\n};\nconst KingOfTheGork = ({\n  kingToken,\n  history,\n  onViewToken\n}) => {\n  const hasKing = kingToken !== null;\n  return <div className=\"bg-zinc-900 rounded-xl p-4 border border-purple-800 mb-6 relative overflow-hidden\">\n      <div className=\"absolute top-0 left-0 w-full h-1 bg-gradient-to-r from-yellow-400 via-yellow-300 to-yellow-400\"></div>\n      \n      <div className=\"flex items-center justify-between mb-3\">\n        <ChalkText className=\"text-xl flex items-center\">\n          <span className=\"mr-2\">👑</span>\n          King of the Gork\n        </ChalkText>\n        <div className=\"bg-yellow-800 bg-opacity-50 text-yellow-300 text-xs px-2 py-1 rounded-full\">\n          30k+ Marketcap\n        </div>\n      </div>\n      \n      {hasKing ? <motion.div initial={{\n      scale: 0.95,\n      opacity: 0\n    }} animate={{\n      scale: 1,\n      opacity: 1\n    }} transition={{\n      duration: 0.3\n    }} className=\"p-4 rounded-lg bg-gradient-to-br from-yellow-900/40 to-purple-900/40 border-2 border-yellow-600 relative\">\n          <div className=\"absolute -top-3 -right-3 bg-yellow-500 text-black font-bold text-xs px-2 py-1 rounded-full\">\n            CURRENT KING\n          </div>\n          \n          <div className=\"flex items-center\">\n            <img src={kingToken.image} alt={kingToken.name} className=\"w-16 h-16 rounded-full mr-4 border-2 border-yellow-400 shadow-lg shadow-yellow-500/20\" />\n            <div>\n              <h3 className=\"text-xl font-bold text-white\">{kingToken.name}</h3>\n              <div className=\"flex items-center\">\n                <span className=\"text-yellow-300 text-lg font-mono mr-2\">${kingToken.ticker}</span>\n                <span className=\"bg-yellow-900/50 text-yellow-300 text-xs px-2 py-0.5 rounded-full\">\n                  ${parseFloat(kingToken.marketCap).toLocaleString()}\n                </span>\n              </div>\n              <p className=\"text-gray-300 text-sm mt-1 line-clamp-2\">{kingToken.description}</p>\n            </div>\n          </div>\n          \n          <div className=\"mt-3 flex justify-between items-center\">\n            <div className=\"text-xs text-gray-400\">\n              Crowned: {new Date(kingToken.kingCrownedAt || kingToken.createdAt).toLocaleString()}\n            </div>\n            <button onClick={() => onViewToken(kingToken.id)} className=\"bg-yellow-700 hover:bg-yellow-600 text-white text-xs px-3 py-1 rounded-full\">\n              View Token\n            </button>\n          </div>\n        </motion.div> : <div className=\"p-6 text-center bg-black bg-opacity-30 rounded-lg border border-dashed border-yellow-700\">\n          <div className=\"text-xl text-yellow-300 mb-2\">👑</div>\n          <p className=\"text-gray-300\">\n            No token has claimed the throne yet!<br />\n            The first token to reach 30k marketcap will become the King.\n          </p>\n        </div>}\n      \n      {history.length > 0 && <div className=\"mt-4\">\n          <div className=\"text-sm text-yellow-300 mb-2\">Kingdom History</div>\n          <div className=\"space-y-2 max-h-[200px] overflow-y-auto px-1\">\n            {history.map(item => <div key={item.id} className=\"p-2 rounded-lg bg-black bg-opacity-40 border border-zinc-800\">\n                <div className=\"flex items-center\">\n                  <div className=\"mr-2 text-sm\">\n                    {item.action === 'crowned' ? '👑' : '⚔️'}\n                  </div>\n                  <div>\n                    <div className=\"font-bold text-yellow-300\">\n                      {item.action === 'crowned' ? `${item.token} was crowned!` : `${item.token} dethroned ${item.prevToken}!`}\n                    </div>\n                    <div className=\"text-gray-400 text-xs mt-1\">\n                      {new Date(item.time).toLocaleString()}\n                    </div>\n                  </div>\n                </div>\n              </div>)}\n          </div>\n        </div>}\n    </div>;\n};\nconst SearchBar = ({\n  onSearch\n}) => {\n  const [searchQuery, setSearchQuery] = useState('');\n  const handleSearch = e => {\n    if (e.key === 'Enter' || e.type === 'click') {\n      onSearch(searchQuery);\n    }\n  };\n  return <div className=\"w-full max-w-md flex items-center bg-zinc-900 rounded-lg border border-purple-800 overflow-hidden\">\n      <input type=\"text\" value={searchQuery} onChange={e => setSearchQuery(e.target.value)} onKeyDown={handleSearch} placeholder=\"Search by name, ticker or address...\" className=\"flex-1 bg-transparent text-white px-4 py-2 focus:outline-none\" />\n      <button onClick={handleSearch} className=\"bg-purple-800 hover:bg-purple-700 p-2 text-white\">\n        <Search size={18} />\n      </button>\n    </div>;\n};\nconst SearchResults = ({\n  results,\n  onClose,\n  navigate\n}) => {\n  if (results.length === 0) return null;\n  return <div className=\"absolute top-full left-0 w-full mt-2 bg-zinc-900 border border-purple-800 rounded-lg shadow-xl z-50 max-h-96 overflow-y-auto\">\n      <div className=\"flex justify-between items-center p-3 border-b border-purple-800\">\n        <h3 className=\"font-bold text-pink-300\">Search Results ({results.length})</h3>\n        <button onClick={onClose} className=\"text-gray-400 hover:text-white\">\n          <X size={18} />\n        </button>\n      </div>\n      <div className=\"p-2\">\n        {results.map(token => <div key={token.id} onClick={() => {\n        navigate(`/token/${token.id}`);\n        onClose();\n      }} className=\"flex items-center p-2 hover:bg-zinc-800 rounded-lg cursor-pointer\">\n            <img src={token.image} alt={token.name} className=\"w-10 h-10 rounded-full mr-3\" />\n            <div className=\"flex-1\">\n              <div className=\"font-bold text-white\">{token.name}</div>\n              <div className=\"text-sm text-pink-300\">${token.ticker}</div>\n            </div>\n            <div className=\"text-xs text-gray-400\">\n              {token.address.slice(0, 6)}...{token.address.slice(-4)}\n            </div>\n          </div>)}\n      </div>\n    </div>;\n};\nconst TokenHistory = ({\n  tokens,\n  isButton = false,\n  onClick\n}) => {\n  if (isButton) {\n    return <button onClick={onClick} className=\"flex items-center gap-2 bg-zinc-900 hover:bg-zinc-800 text-white px-3 py-1.5 rounded-lg border border-purple-800 transition-colors\">\n        <History size={16} className=\"text-pink-300\" />\n        <span>My Tokens</span>\n      </button>;\n  }\n  return <div className=\"bg-zinc-900 rounded-xl p-4 border border-purple-800 mb-6\">\n      <div className=\"flex items-center justify-between mb-3\">\n        <ChalkText className=\"text-xl\">My Tokens</ChalkText>\n        <div className=\"text-pink-300\">\n          <History size={18} />\n        </div>\n      </div>\n      \n      <div className=\"space-y-2 max-h-[300px] overflow-y-auto px-1\">\n        {tokens.length === 0 ? <div className=\"text-center text-gray-400 py-4\">No tokens launched yet</div> : tokens.map(token => <div key={token.id} className=\"p-2 rounded-lg bg-black bg-opacity-40 border border-zinc-800\">\n              <div className=\"flex items-center\">\n                <img src={token.image} alt={token.name} className=\"w-8 h-8 rounded-full mr-2\" />\n                <div>\n                  <div className=\"font-bold text-pink-300\">${token.ticker}</div>\n                  <div className=\"text-xs text-gray-400\">\n                    Created: {new Date(token.createdAt).toLocaleDateString()}\n                  </div>\n                  <div className=\"text-xs truncate max-w-[200px]\">\n                    <span className=\"text-gray-400\">Address: </span>\n                    <span className=\"text-white\">{token.address.slice(0, 6)}...{token.address.slice(-4)}</span>\n                  </div>\n                </div>\n              </div>\n            </div>)}\n      </div>\n    </div>;\n};\nconst HomePage = () => {\n  const [launchModalOpen, setLaunchModalOpen] = useState(false);\n  const [showMyTokens, setShowMyTokens] = useState(false);\n  const [tokens, setTokens] = useState([]);\n  const [viewMode, setViewMode] = useState('grid');\n  const [kingToken, setKingToken] = useState(null);\n  const [kingHistory, setKingHistory] = useState([]);\n  const [notifications, setNotifications] = useState([]);\n  const [searchResults, setSearchResults] = useState([]);\n  const [showSearchResults, setShowSearchResults] = useState(false);\n  const [isLoading, setIsLoading] = useState(true);\n  const searchContainerRef = useRef(null);\n  const navigate = useNavigate();\n  const {\n    publicKey\n  } = useWallet();\n  const addNotification = notification => {\n    const id = Date.now();\n    setNotifications(prev => [{\n      id,\n      time: new Date().toLocaleTimeString(),\n      ...notification\n    }, ...prev]);\n    setTimeout(() => {\n      setNotifications(prev => prev.filter(n => n.id !== id));\n    }, 5000);\n  };\n  const removeNotification = id => {\n    setNotifications(prev => prev.filter(n => n.id !== id));\n  };\n  useEffect(() => {\n    const loadData = async () => {\n      setIsLoading(true);\n      try {\n        const storedTokens = await GorkTokenStore.loadTokensFromStorage();\n        if (storedTokens.length > 0) {\n          setTokens(storedTokens);\n          GorkTokenStore.setTokens(storedTokens);\n          const kingCandidate = storedTokens.filter(token => parseFloat(token.marketCap) >= 30000).sort((a, b) => {\n            if (a.kingCrownedAt && !b.kingCrownedAt) return -1;\n            if (!a.kingCrownedAt && b.kingCrownedAt) return 1;\n            return parseFloat(b.marketCap) - parseFloat(a.marketCap);\n          })[0];\n          if (kingCandidate) {\n            setKingToken(kingCandidate);\n          }\n        } else {\n          setTokens(GorkTokenStore.getTokens());\n        }\n      } catch (err) {\n        console.error(\"Failed to load tokens:\", err);\n        setTokens(GorkTokenStore.getTokens());\n      } finally {\n        setIsLoading(false);\n      }\n    };\n    loadData();\n    setKingHistory([{\n      id: Date.now() - 1000,\n      action: 'crowned',\n      token: 'GORK',\n      time: new Date(Date.now() - 5 * 60 * 1000).toISOString()\n    }]);\n    const tradeInterval = setInterval(() => {\n      const allTokens = [...GorkTokenStore.getTokens(), ...SAMPLE_TOKENS];\n      const numTokensToUpdate = Math.floor(Math.random() * 3) + 1;\n      const tokensToUpdate = new Set();\n      for (let i = 0; i < numTokensToUpdate && i < allTokens.length; i++) {\n        const randomIndex = Math.floor(Math.random() * allTokens.length);\n        tokensToUpdate.add(randomIndex);\n      }\n      const updatedTokens = allTokens.map((token, index) => tokensToUpdate.has(index) ? simulateTrade(token) : token);\n      GorkTokenStore.setTokens(updatedTokens.filter(t => !SAMPLE_TOKENS.some(s => s.id === t.id)));\n      setTokens(prevTokens => {\n        if (tokensToUpdate.size > 0) {\n          return [...GorkTokenStore.getTokens()];\n        }\n        return prevTokens;\n      });\n    }, 5000);\n    socket.on('token_launched', data => {\n      addNotification({\n        type: 'success',\n        title: 'New Token Launch! 🚀',\n        message: `${data.token} has been launched by ${data.creator}!`\n      });\n    });\n    const checkForNewKing = updatedTokens => {\n      const kingCandidates = updatedTokens.filter(token => parseFloat(token.marketCap) >= 30000).sort((a, b) => parseFloat(b.marketCap) - parseFloat(a.marketCap));\n      if (kingCandidates.length === 0) return;\n      const topCandidate = kingCandidates[0];\n      if (!kingToken) {\n        topCandidate.kingCrownedAt = new Date().toISOString();\n        setKingToken(topCandidate);\n        const newHistoryEntry = {\n          id: Date.now(),\n          action: 'crowned',\n          token: topCandidate.ticker,\n          time: new Date().toISOString()\n        };\n        setKingHistory(prev => [newHistoryEntry, ...prev.slice(0, 19)]);\n        addNotification({\n          type: 'success',\n          title: '👑 New King Crowned!',\n          message: `${topCandidate.ticker} is now the King of the Gork!`\n        });\n        socket.emit('king_crowned', {\n          token: topCandidate.ticker,\n          marketCap: topCandidate.marketCap,\n          time: new Date().toISOString()\n        });\n        return;\n      }\n      if (topCandidate.id !== kingToken.id && parseFloat(topCandidate.marketCap) > parseFloat(kingToken.marketCap)) {\n        topCandidate.kingCrownedAt = new Date().toISOString();\n        const newHistoryEntry = {\n          id: Date.now(),\n          action: 'dethroned',\n          token: topCandidate.ticker,\n          prevToken: kingToken.ticker,\n          time: new Date().toISOString()\n        };\n        setKingHistory(prev => [newHistoryEntry, ...prev.slice(0, 19)]);\n        addNotification({\n          type: 'warning',\n          title: '⚔️ King Dethroned!',\n          message: `${topCandidate.ticker} has dethroned ${kingToken.ticker}!`\n        });\n        socket.emit('king_dethroned', {\n          token: topCandidate.ticker,\n          prevToken: kingToken.ticker,\n          marketCap: topCandidate.marketCap,\n          time: new Date().toISOString()\n        });\n        setKingToken(topCandidate);\n      }\n    };\n    socket.on('king_crowned', data => {\n      const newHistoryEntry = {\n        id: Date.now(),\n        action: 'crowned',\n        token: data.token,\n        time: data.time\n      };\n      setKingHistory(prev => [newHistoryEntry, ...prev.slice(0, 19)]);\n    });\n    socket.on('king_dethroned', data => {\n      const newHistoryEntry = {\n        id: Date.now(),\n        action: 'dethroned',\n        token: data.token,\n        prevToken: data.prevToken,\n        time: data.time\n      };\n      setKingHistory(prev => [newHistoryEntry, ...prev.slice(0, 19)]);\n    });\n    const kingCheckInterval = setInterval(() => {\n      checkForNewKing([...GorkTokenStore.getTokens(), ...SAMPLE_TOKENS]);\n    }, 10000);\n    return () => {\n      clearInterval(tradeInterval);\n      clearInterval(kingCheckInterval);\n      socket.off('token_launched');\n      socket.off('king_crowned');\n      socket.off('king_dethroned');\n    };\n  }, []);\n  const handleLaunchToken = newToken => {\n    GorkTokenStore.addToken(newToken);\n    setTokens(GorkTokenStore.getTokens());\n    if (parseFloat(newToken.marketCap) >= 30000) {\n      if (!kingToken || parseFloat(newToken.marketCap) > parseFloat(kingToken.marketCap)) {\n        newToken.kingCrownedAt = new Date().toISOString();\n        const newHistoryEntry = {\n          id: Date.now(),\n          action: kingToken ? 'dethroned' : 'crowned',\n          token: newToken.ticker,\n          prevToken: kingToken?.ticker,\n          time: new Date().toISOString()\n        };\n        setKingHistory(prev => [newHistoryEntry, ...prev.slice(0, 19)]);\n        socket.emit(kingToken ? 'king_dethroned' : 'king_crowned', {\n          token: newToken.ticker,\n          prevToken: kingToken?.ticker,\n          marketCap: newToken.marketCap,\n          time: new Date().toISOString()\n        });\n        setKingToken(newToken);\n        addNotification({\n          type: 'success',\n          title: kingToken ? '⚔️ New King Dethroned!' : '👑 New King Crowned!',\n          message: kingToken ? `${newToken.ticker} has dethroned ${kingToken.ticker}!` : `${newToken.ticker} is now the King of the Gork!`\n        });\n      }\n    }\n  };\n  const sortedTokens = [...(tokens.length > 0 ? tokens : SAMPLE_TOKENS)].sort((a, b) => {\n    return parseFloat(b.marketCap) - parseFloat(a.marketCap);\n  });\n  const displayTokens = sortedTokens;\n  useEffect(() => {\n    const handleClickOutside = event => {\n      if (searchContainerRef.current && !searchContainerRef.current.contains(event.target)) {\n        setShowSearchResults(false);\n      }\n    };\n    document.addEventListener('mousedown', handleClickOutside);\n    return () => {\n      document.removeEventListener('mousedown', handleClickOutside);\n    };\n  }, []);\n  const handleSearch = query => {\n    if (!query.trim()) {\n      setSearchResults([]);\n      setShowSearchResults(false);\n      return;\n    }\n    const results = GorkTokenStore.getTokensBySearch(query);\n    setSearchResults(results);\n    setShowSearchResults(true);\n  };\n  return <div className=\"min-h-screen bg-black text-white overflow-hidden\">\n      <header className=\"w-full py-4 px-6 flex flex-col md:flex-row justify-between items-center border-b border-purple-800 gap-4\">\n        <div className=\"flex items-center gap-3\">\n          <img src={GORK_MASCOT} alt=\"Gork\" className=\"w-12 h-12 rounded-full border-2 border-purple-500 glow-effect\" />\n          <ChalkText className=\"text-3xl md:text-4xl\">\n            GORK.FUN\n          </ChalkText>\n        </div>\n        \n        <div ref={searchContainerRef} className=\"relative w-full md:w-auto flex-1 max-w-md mx-auto md:mx-0\">\n          <SearchBar onSearch={handleSearch} />\n          {showSearchResults && <SearchResults results={searchResults} onClose={() => setShowSearchResults(false)} navigate={navigate} />}\n        </div>\n        \n        <div className=\"flex items-center gap-2\">\n          {publicKey && <div className=\"hidden md:flex items-center bg-zinc-900 px-3 py-1 rounded-lg text-sm border border-purple-800\">\n              <span className=\"text-green-400 mr-1\">Connected: </span>\n              <span className=\"text-white\">\n                {publicKey.toString().slice(0, 4)}...{publicKey.toString().slice(-4)}\n              </span>\n            </div>}\n          <TokenHistory tokens={tokens} isButton={true} onClick={() => setShowMyTokens(true)} />\n          <WalletMultiButton className=\"!bg-purple-800 hover:!bg-purple-700\" />\n        </div>\n      </header>\n\n      <Notifications notifications={notifications} onClose={removeNotification} />\n\n      <main className=\"container mx-auto p-6\">\n        <div className=\"mb-10 text-center\">\n          <ChalkText className=\"text-2xl md:text-4xl mb-3\">\n            Token Launcher\n          </ChalkText>\n          <p className=\"text-gray-400 max-w-2xl mx-auto\">\n            Create your own custom token on the Solana blockchain with a few simple steps.\n            Add your image, name, ticker, and socials to launch your magical token into the cryptoverse!\n          </p>\n        </div>\n\n        <div className=\"flex flex-col md:flex-row justify-between items-center mb-8 gap-4\">\n          <button onClick={() => setLaunchModalOpen(true)} className=\"w-full md:w-auto flex items-center justify-center gap-2 bg-gradient-to-r from-purple-700 to-pink-600 hover:from-purple-600 hover:to-pink-500 text-white font-bold py-3 px-6 rounded-lg transition-all duration-300 shadow-lg hover:shadow-purple-500/40\">\n            <Plus size={20} />\n            Launch New Token\n          </button>\n          \n          <div className=\"flex items-center bg-zinc-900 p-1 rounded-lg border border-purple-800\">\n            <button onClick={() => setViewMode('grid')} className={`p-2 rounded ${viewMode === 'grid' ? 'bg-purple-800' : 'hover:bg-purple-900'}`}>\n              <Grid size={18} />\n            </button>\n            <button onClick={() => setViewMode('list')} className={`p-2 rounded ${viewMode === 'list' ? 'bg-purple-800' : 'hover:bg-purple-900'}`}>\n              <List size={18} />\n            </button>\n          </div>\n        </div>\n\n        <div className=\"grid grid-cols-1 lg:grid-cols-3 gap-6\">\n          {isLoading ? <div className=\"lg:col-span-2 flex justify-center items-center py-12\">\n              <div className=\"flex items-center space-x-2\">\n                <RefreshCw size={24} className=\"animate-spin text-purple-500\" />\n                <span>Loading tokens...</span>\n              </div>\n            </div> : <div className={`lg:col-span-2 ${viewMode === 'grid' ? \"grid grid-cols-1 sm:grid-cols-2 gap-6\" : \"flex flex-col gap-4\"}`}>\n              {displayTokens.length > 0 ? displayTokens.map(token => <TokenCard key={token.id} token={token} />) : <div className=\"col-span-full text-center py-12 bg-zinc-900 rounded-xl\">\n                  <ChalkText className=\"text-xl mb-4\">No Tokens Found</ChalkText>\n                  <p className=\"text-gray-400\">Launch your first token to get started!</p>\n                </div>}\n            </div>}\n          \n          <div>\n            <KingOfTheGork kingToken={kingToken} history={kingHistory} onViewToken={id => navigate(`/token/${id}`)} />\n          </div>\n        </div>\n\n        <AnimatePresence>\n          {launchModalOpen && <TokenLaunchModal isOpen={launchModalOpen} onClose={() => setLaunchModalOpen(false)} onLaunch={handleLaunchToken} />}\n          {showMyTokens && <div className=\"fixed inset-0 bg-black bg-opacity-70 flex items-center justify-center z-50 p-4\">\n              <motion.div initial={{\n            scale: 0.9,\n            opacity: 0\n          }} animate={{\n            scale: 1,\n            opacity: 1\n          }} exit={{\n            scale: 0.9,\n            opacity: 0\n          }} className=\"bg-gradient-to-br from-purple-900 to-pink-800 rounded-xl p-6 w-full max-w-md relative overflow-y-auto max-h-[90vh]\">\n                <button onClick={() => setShowMyTokens(false)} className=\"absolute top-4 right-4 text-white hover:text-pink-300\">\n                  <X size={24} />\n                </button>\n                <div className=\"flex items-center mb-6\">\n                  <History size={24} className=\"text-pink-300 mr-3\" />\n                  <ChalkText className=\"text-2xl\">My Tokens</ChalkText>\n                </div>\n                <div className=\"space-y-3\">\n                  <TokenHistory tokens={tokens} />\n                </div>\n              </motion.div>\n            </div>}\n        </AnimatePresence>\n      </main>\n\n      <footer className=\"mt-12 py-6 px-4 border-t border-purple-800 text-center\">\n        <p className=\"text-gray-400\">\n          {!publicKey ? \"Connect your Phantom wallet to start creating and launching tokens for just 0.02 SOL!\" : \"Create and browse community tokens! Tokens use a bonding curve with 75% of supply and migrate at 70 SOL.\"}\n        </p>\n        <div className=\"flex items-center justify-center mt-4 gap-4\">\n          <a href=\"https://x.com/gorkdotfunn\" target=\"_blank\" rel=\"noopener noreferrer\" className=\"text-white hover:text-pink-300 transition-colors flex items-center gap-2\">\n            <div className=\"text-white flex items-center justify-center w-6 h-6 font-bold\">𝕏</div>\n            <span>@gorkdotfunn</span>\n          </a>\n        </div>\n        \n        <button onClick={() => {\n        const element = document.createElement(\"a\");\n        const file = new Blob([document.querySelector('body').innerText], {\n          type: 'text/plain'\n        });\n        element.href = URL.createObjectURL(file);\n        element.download = \"gork_fun_source_code.js\";\n        document.body.appendChild(element);\n        element.click();\n        document.body.removeChild(element);\n      }} className=\"mt-6 inline-flex items-center gap-2 bg-gradient-to-r from-purple-700 to-pink-600 hover:from-purple-600 hover:to-pink-500 text-white font-bold py-2 px-4 rounded-lg transition-all duration-300 shadow-lg hover:shadow-purple-500/40\">\n          <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" strokeWidth=\"2\" strokeLinecap=\"round\" strokeLinejoin=\"round\">\n            <path d=\"M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4\" />\n            <polyline points=\"7 10 12 15 17 10\" />\n            <line x1=\"12\" y1=\"15\" x2=\"12\" y2=\"3\" />\n          </svg>\n          Download Source Code\n        </button>\n        \n        <ChalkText className=\"mt-2 text-sm\">GORK.FUN © 2025</ChalkText>\n      </footer>\n    </div>;\n};\nexport default function App() {\n  const endpoint = 'https://rpc.dev.fun/f4e3f2a1d31b4a5a2c76';\n  const wallets = [new PhantomWalletAdapter(), new SolflareWalletAdapter()];\n  return <ConnectionProvider endpoint={endpoint} config={{\n    commitment: 'confirmed',\n    confirmTransactionInitialTimeout: 60000\n  }}>\n      <WalletProvider wallets={wallets} autoConnect>\n        <WalletModalProvider>\n          <div className=\"bg-black\">\n            <style>{`\n              body {\n                background-color: black;\n                font-family: 'Roboto', sans-serif;\n              }\n              .glow-effect {\n                box-shadow: 0 0 15px rgba(168, 85, 247, 0.5);\n              }\n              .font-comic {\n                font-family: 'Comic Sans MS', cursive, sans-serif;\n                letter-spacing: 1px;\n              }\n            `}</style>\n            <div className=\"fixed top-0 left-0 w-full bg-red-600 text-white text-center font-bold py-2 z-[9999] animate-pulse\">\n              ⚠️ DO NOT DEPLOY, IN BETA ⚠️\n            </div>\n            <HashRouter>\n              <Routes>\n                <Route path=\"/\" element={<HomePage />} />\n                <Route path=\"/token/:tokenId\" element={<TokenDetail />} />\n              </Routes>\n            </HashRouter>\n          </div>\n        </WalletModalProvider>\n      </WalletProvider>\n    </ConnectionProvider>;\n}","packageJson","{\"dependencies\":{\"react\":\"18.2.0\",\"framer-motion\":\"10.16.4\",\"@solana/wallet-adapter-base\":\"0.9.23\",\"@solana/wallet-adapter-react\":\"0.15.35\",\"@solana/wallet-adapter-react-ui\":\"0.9.35\",\"@solana/wallet-adapter-wallets\":\"0.19.32\",\"@solana/web3.js\":\"1.95.3\",\"@devfunlabs/wallet-adapter-devfun\":\"0.3.0\",\"lucide-react\":\"0.441.0\",\"react-router-dom\":\"6.18.0\",\"recharts\":\"2.8.0\",\"socket.io-client\":\"4.7.1\",\"@devfunlabs/state-client\":\"0.8.1\",\"@devfunlabs/web-sdk\":\"0.2.2\",\"react-dom\":\"18.2.0\",\"@solana/spl-token\":\"0.3.11\",\"buffer\":\"6.0.3\"}}","token",{"_18":75,"_76":77,"_78":79,"_80":81,"_82":83,"_84":-5,"_85":-5,"_86":40,"_87":40,"_67":68},"Gork.fun","symbol","GORKFUN","price",0.00000454,"marketcap",4464.60827048,"image","https://pump.mypinata.cloud/ipfs/Qmen193SVseS2X3KTQQRv2CEEhLCGRH1wm6Gpk2Za6wNtc?img-width=256&img-dpr=2","website","twitter","devCount","appCount","upstreamApp","isLordOfDev","analytics",[92,96,98,100,102,104,106,108,110,112,114,116,118,120,122,124,126,128],{"_93":94,"_95":56},"day","2025-04-21","runCount",{"_93":97,"_95":56},"2025-04-22",{"_93":99,"_95":56},"2025-04-23",{"_93":101,"_95":56},"2025-04-24",{"_93":103,"_95":56},"2025-04-25",{"_93":105,"_95":56},"2025-04-26",{"_93":107,"_95":56},"2025-04-27",{"_93":109,"_95":56},"2025-04-28",{"_93":111,"_95":56},"2025-04-29",{"_93":113,"_95":56},"2025-04-30",{"_93":115,"_95":56},"2025-05-01",{"_93":117,"_95":56},"2025-05-02",{"_93":119,"_95":56},"2025-05-03",{"_93":121,"_95":56},"2025-05-04",{"_93":115,"_95":123},68,{"_93":117,"_95":125},21,{"_93":119,"_95":127},3,{"_93":121,"_95":40},"snapshot","ogImage","https://cdn.dev.fun/og/image/f4e3f2a1d31b4a5a2c76/9f0fe1bd.webp","commitDetail","actionData","errors"]
</article></body></html>