[{"_1":2,"_132":-5,"_133":-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,"_131":-5,"_128":-5},"appDetail",{"_14":15,"_16":17,"_18":19,"_20":21,"_22":23,"_24":25,"_26":27,"_29":30,"_31":-5,"_32":33,"_34":35,"_36":37,"_38":39,"_40":41,"_5":42,"_53":54,"_55":56,"_57":58,"_59":60,"_61":56,"_62":17,"_63":17,"_64":65,"_66":67,"_68":69,"_70":71,"_86":-5,"_87":17,"_88":89,"_128":30,"_129":130},"id","5f6d83e181269bda535c","isMyApp",false,"name","memepump","description","Conjure the next viral crypto sensation with a click! This matte-black portal to absurd wealth generates hilariously convincing meme coins complete with logos that'll make VCs weep tears of FOMO.","brief","","isLive",true,"tags",[28],"👑","cover","https://cdn.dev.fun/snapshot/5f6d83e181269bda535c/22701_711a7469.webp","cdnUrl","createdAt",["D",1740870369976],"updatedAt",["D",1740952742491],"lastCommitId",["B","22701"],"tier",1,"credits",-30,{"_14":43,"_44":45,"_46":-5,"_47":45,"_48":49,"_50":-5,"_51":52},"0de4b4d7-562c-4211-bc12-a9a0e8de3671","uniqueId","HS9heoikxQNzvpJDJgEJXqZ3BR3QghgeKuCmVSuiLcV6","username","solanaWallet","displayName","HS9...cV6","bio","avatar","/avatar.svg","commitCount",58,"forkCount",0,"likeCount",5,"runsCount",4752,"visitorCount","isArchived","isRenamed","contractAddress","7tpdjoLezL36yneCd5Wj8E5VxT7gp9tsvqiJikJFpump","code","import { useState, useEffect, useRef } from 'react';\nimport { Sparkles, Rocket, Shuffle, Download, Share2, Volume2, VolumeX, Zap, RefreshCw, Trophy, ThumbsUp, ThumbsDown, ArrowLeft, Crown, Coins, MessageCircle, TrendingUp, Send, TrendingDown, Gamepad2, Users, X, ChevronLeft, ChevronRight, Award, Swords, Clock, Loader2 } from 'lucide-react';\nimport { useChat } from 'ai/react';\nimport { io } from 'socket.io-client';\nimport { StateClient } from '@devfunlabs/state-client';\n\n// Token Item Component to fix the hooks issue\nconst TokenItem = ({\n token,\n index,\n addTokenComment,\n voteCoin\n}) => {\n const [tokenCommentInput, setTokenCommentInput] = useState('');\n const [showCommentForm, setShowCommentForm] = useState(false);\n return

\n {/* Crown for top token */}\n {index === 0 && token.votes > 0 &&

\n \n

}\n \n

0 ? 'bg-yellow-400 text-black' : 'bg-[#333333] text-white'} w-6 h-6 rounded-full flex items-center justify-center mr-2`}>\n {index + 1}\n

\n Token #{index + 1}\n {index === 0 && token.votes > 0 && 👑}\n

\n \n {token.votes} votes\n \n \n \n

\n \n

\n {token.logoUrl &&

\n $\"Token$ \n

}\n

\n {token.contractAddress}\n

\n \n

\n \n {token.comment &&

{token.comment}

}\n \n {/* Token Comments Section */}\n {token.comments && token.comments.length > 0 &&

Comments:

\n {token.comments.map(comment =>

\n {comment.author}\n {new Date(comment.timestamp).toLocaleString()}\n

{comment.text}

)}\n

}\n \n {/* Comment Form */}\n {showCommentForm ?

\n setTokenCommentInput(e.target.value)} placeholder=\"Add your comment...\" className=\"flex-1 bg-[#333333] border border-gray-700 rounded-lg px-3 py-2 text-sm focus:outline-none focus:ring-1 focus:ring-[#A100FF]\" />\n \n \n

: }\n \n

Added by: {token.creator || 'Anonymous'}

{new Date(token.createdAt).toLocaleDateString()}

;\n};\n\n// Initialize socket connection for real-time features\nconst socket = io('wss://ws.dev.fun/app-5f6d83e181269bda535c');\n\n// Initialize state client for persistent storage\nconst stateClient = new StateClient({\n baseURL: 'https://state.dev.fun',\n appId: '5f6d83e181269bda535c'\n});\nfunction App() {\n // Main app state\n const [view, setView] = useState('generator'); // 'generator', 'gallery', 'chat', 'tokenlist', or 'memegame'\n const [coinInput, setCoinInput] = useState('');\n const [generating, setGenerating] = useState(false);\n const [extraMemeEnergy, setExtraMemeEnergy] = useState(false);\n const [soundEnabled, setSoundEnabled] = useState(false);\n const [showUpdateBanner, setShowUpdateBanner] = useState(true);\n const [selectedVibe, setSelectedVibe] = useState('');\n const [generatedCoin, setGeneratedCoin] = useState(null);\n const [logoLoading, setLogoLoading] = useState(false);\n const [showError, setShowError] = useState(false);\n const logoRef = useRef(null);\n const [logoEmojis, setLogoEmojis] = useState([]);\n const [sharedCoinLoaded, setSharedCoinLoaded] = useState(false);\n const [longLoading, setLongLoading] = useState(false); // New state for tracking long loading times\n const [generationTimeout, setGenerationTimeout] = useState(null); // Track timeout for generation\n\n // Chart state\n const [chartData, setChartData] = useState([]);\n const [isLoadingChart, setIsLoadingChart] = useState(true);\n const [chartError, setChartError] = useState(false);\n\n // Gallery state\n const [generatedCoins, setGeneratedCoins] = useState([]);\n const [isLoadingCoins, setIsLoadingCoins] = useState(true);\n\n // Chat state\n const [chatMessages, setChatMessages] = useState([]);\n const [chatInput, setChatInput] = useState('');\n const [usernameError, setUsernameError] = useState('');\n const [lastMessageTime, setLastMessageTime] = useState(0);\n const [chatCooldown, setChatCooldown] = useState(false);\n // Function to validate username (no \"dev\" allowed)\n const validateUsername = name => {\n if (name.toLowerCase().includes('dev') || name === \"DEV\") {\n return `User${Math.floor(Math.random() * 10000)}`;\n }\n return name;\n };\n const [username, setUsername] = useState(() => {\n const storedUsername = localStorage.getItem('memepump_username') || `User${Math.floor(Math.random() * 10000)}`;\n // Validate username from localStorage\n return validateUsername(storedUsername);\n });\n const chatEndRef = useRef(null);\n const [isLoadingChat, setIsLoadingChat] = useState(true);\n\n // Token list state\n const [tokenList, setTokenList] = useState([]);\n const [isLoadingTokens, setIsLoadingTokens] = useState(true);\n const [tokenCA, setTokenCA] = useState('');\n const [tokenComment, setTokenComment] = useState('');\n const [tokenError, setTokenError] = useState('');\n\n // Game state\n const [selectedGame, setSelectedGame] = useState(null); // 'pong', 'snake', 'tetris'\n const [gameRooms, setGameRooms] = useState([]);\n const [currentRoom, setCurrentRoom] = useState(null);\n const [gameState, setGameState] = useState(null);\n const [isWaiting, setIsWaiting] = useState(false);\n const [gameLeaderboard, setGameLeaderboard] = useState({});\n const [gameMessages, setGameMessages] = useState([]);\n const [gameMessageInput, setGameMessageInput] = useState('');\n const [gameView, setGameView] = useState('selection'); // 'selection', 'room', 'game'\n const [playerScore, setPlayerScore] = useState(0);\n const [opponentScore, setOpponentScore] = useState(0);\n const [isGameOver, setIsGameOver] = useState(false);\n const [winner, setWinner] = useState(null);\n const [isLoadingGames, setIsLoadingGames] = useState(true);\n const gameCanvasRef = useRef(null);\n const gameLoopRef = useRef(null);\n const gameMessagesEndRef = useRef(null);\n\n // Fetch chart data from GeckoTerminal\n useEffect(() => {\n const fetchChartData = async () => {\n try {\n setIsLoadingChart(true);\n setChartError(false);\n console.log(\"Fetching chart data...\");\n\n // Use proxy to avoid CORS issues\n const geckoTerminalUrl = \"https://www.geckoterminal.com/api/p1/solana/pools/8qNUf8jQ6Lz5gsjJjmiHa4k41UW8U4UMAHyKjfpKVeew/ohlcv\";\n const proxyUrl = `https://dev.fun/api/proxy?url=${encodeURIComponent(geckoTerminalUrl)}`;\n const response = await fetch(proxyUrl);\n if (!response.ok) {\n console.error(\"API response not OK:\", response.status);\n throw new Error('Failed to fetch chart data');\n }\n const data = await response.json();\n console.log(\"Chart data received:\", data);\n\n // Process the data for the chart\n if (data && data.data && data.data.attributes && data.data.attributes.ohlcv_list) {\n const ohlcvList = data.data.attributes.ohlcv_list;\n console.log(\"OHLCV list length:\", ohlcvList.length);\n const processedData = ohlcvList.map(item => ({\n time: new Date(item[0]).toLocaleDateString(),\n price: parseFloat(item[4]),\n // Close price\n volume: parseFloat(item[5]),\n // Add timestamp for sorting\n timestamp: new Date(item[0]).getTime()\n })).sort((a, b) => a.timestamp - b.timestamp) // Ensure chronological order\n .slice(-30); // Get last 30 data points\n\n console.log(\"Processed chart data:\", processedData);\n setChartData(processedData);\n } else {\n console.error(\"Invalid data structure:\", data);\n throw new Error('Invalid data structure from API');\n }\n } catch (error) {\n console.error(\"Error fetching chart data:\", error);\n setChartError(true);\n\n // Generate more realistic fake chart data for fallback\n const startDate = new Date();\n startDate.setDate(startDate.getDate() - 30);\n\n // Create a more realistic price trend with some volatility\n let basePrice = 0.00001 * (Math.random() * 5 + 10);\n const trend = Math.random() > 0.5 ? 1 : -1; // Random up or down trend\n\n const fakeData = Array.from({\n length: 30\n }, (_, i) => {\n // Add some random volatility to the price\n const volatility = Math.random() * 0.2 - 0.1; // -10% to +10%\n basePrice = basePrice * (1 + trend * 0.02 + volatility);\n const currentDate = new Date(startDate);\n currentDate.setDate(startDate.getDate() + i);\n return {\n time: currentDate.toLocaleDateString(),\n price: basePrice,\n volume: Math.random() * 10000 + 5000,\n timestamp: currentDate.getTime()\n };\n });\n console.log(\"Using fake chart data:\", fakeData);\n setChartData(fakeData);\n } finally {\n setIsLoadingChart(false);\n }\n };\n\n // Fetch immediately on mount\n fetchChartData();\n\n // Set up a refresh interval (every 5 minutes)\n const refreshInterval = setInterval(fetchChartData, 5 * 60 * 1000);\n\n // Clean up interval on unmount\n return () => clearInterval(refreshInterval);\n }, []);\n\n // Fetch all coins and chat history from the state API on component mount and check for shared coin in URL\n useEffect(() => {\n const fetchData = async () => {\n try {\n setIsLoadingCoins(true);\n setIsLoadingChat(true);\n setIsLoadingGames(true);\n setIsLoadingTokens(true);\n\n // Fetch gallery coins\n const galleryCoins = await stateClient.getEntities('gallery_coins');\n setGeneratedCoins(galleryCoins || []);\n\n // Fetch token list\n const tokensList = await stateClient.getEntities('token_list');\n console.log(\"Fetched token list:\", tokensList);\n if (Array.isArray(tokensList)) {\n setTokenList(tokensList);\n } else {\n console.warn(\"Token list is not an array:\", tokensList);\n setTokenList([]);\n }\n\n // Fetch chat history\n const chatHistory = await stateClient.getEntities('chat_messages');\n if (chatHistory && chatHistory.length > 0) {\n // Sort messages by timestamp to ensure chronological order\n const sortedMessages = chatHistory.sort((a, b) => new Date(a.timestamp) - new Date(b.timestamp));\n setChatMessages(sortedMessages);\n\n // Scroll to bottom after chat history is loaded\n setTimeout(() => {\n if (chatEndRef.current) {\n chatEndRef.current.scrollIntoView({\n behavior: 'auto'\n });\n }\n }, 300);\n }\n\n // Fetch game rooms\n const gameRoomsList = await stateClient.getEntities('game_rooms');\n setGameRooms(gameRoomsList || []);\n\n // Fetch game leaderboard\n const leaderboardData = await stateClient.getEntities('game_leaderboard');\n if (leaderboardData && leaderboardData.length > 0) {\n // Convert array to object with game types as keys\n const leaderboardObj = {};\n leaderboardData.forEach(item => {\n if (!leaderboardObj[item.game]) {\n leaderboardObj[item.game] = [];\n }\n leaderboardObj[item.game].push(item);\n });\n\n // Sort each game's leaderboard by score\n Object.keys(leaderboardObj).forEach(game => {\n leaderboardObj[game].sort((a, b) => b.score - a.score);\n });\n setGameLeaderboard(leaderboardObj);\n }\n } catch (error) {\n console.error(\"Error fetching data:\", error);\n } finally {\n setIsLoadingCoins(false);\n setIsLoadingChat(false);\n setIsLoadingGames(false);\n setIsLoadingTokens(false);\n }\n };\n fetchData();\n\n // Check if there's a shared coin in the URL\n const urlParams = new URLSearchParams(window.location.search);\n const sharedCoinData = urlParams.get('coin');\n if (sharedCoinData && !sharedCoinLoaded) {\n try {\n // Decode the base64 encoded coin data\n const decodedData = JSON.parse(atob(sharedCoinData));\n\n // Set the shared coin as the current generated coin\n setGeneratedCoin(decodedData);\n setLogoUrl(decodedData.logoUrl || '');\n setLogoEmojis(decodedData.logoEmojis || generateRandomEmojis(8));\n setSharedCoinLoaded(true);\n\n // Switch to generator view to show the shared coin\n setView('generator');\n\n // Add a notification that this is a shared coin\n setTimeout(() => {\n alert('Viewing a shared MEMEPUMP coin! 🚀');\n }, 500);\n } catch (error) {\n console.error(\"Error loading shared coin:\", error);\n }\n }\n }, [sharedCoinLoaded]);\n\n // Save username to localStorage\n useEffect(() => {\n localStorage.setItem('memepump_username', username);\n // Clear any username error when username is valid\n if (!username.toLowerCase().includes('dev')) {\n setUsernameError('');\n }\n }, [username]);\n\n // Socket.io event handlers for chat and live updates\n useEffect(() => {\n // Chat message handler\n function onChatMessage(message) {\n // Add the new message to the chat history\n setChatMessages(prev => [...prev, message]);\n\n // We don't need to save the message here as the sender already saved it\n // This just updates the UI for other connected users\n }\n\n // Token list update handler\n function onTokenListUpdate(updatedTokens) {\n console.log(\"Received token list update:\", updatedTokens);\n if (Array.isArray(updatedTokens) && updatedTokens.length > 0) {\n setTokenList(updatedTokens);\n setIsLoadingTokens(false);\n } else {\n // If we receive an empty or invalid update, refresh from the API\n const refreshTokenList = async () => {\n try {\n const freshTokens = await stateClient.getEntities('token_list');\n if (Array.isArray(freshTokens)) {\n setTokenList(freshTokens);\n }\n } catch (err) {\n console.error(\"Error refreshing token list:\", err);\n } finally {\n setIsLoadingTokens(false);\n }\n };\n refreshTokenList();\n }\n }\n\n // Gallery update handler\n function onGalleryUpdate(updatedGallery) {\n setGeneratedCoins(updatedGallery);\n }\n\n // Game room updates\n function onGameRoomsUpdate(rooms) {\n setGameRooms(rooms);\n }\n\n // Game state updates\n function onGameStateUpdate(state) {\n setGameState(state);\n if (state.player1Score !== undefined) {\n setPlayerScore(state.player1Score);\n setOpponentScore(state.player2Score);\n }\n if (state.gameOver) {\n setIsGameOver(true);\n setWinner(state.winner);\n }\n }\n\n // Game joined event\n function onGameJoined(roomData) {\n setCurrentRoom(roomData);\n setIsWaiting(false);\n setGameView('game');\n }\n\n // Game message handler\n function onGameMessage(message) {\n setGameMessages(prev => [...prev, message]);\n }\n\n // Game leaderboard update\n function onLeaderboardUpdate(leaderboard) {\n setGameLeaderboard(leaderboard);\n }\n socket.on('chat_message', onChatMessage);\n socket.on('token_list_update', onTokenListUpdate);\n socket.on('gallery_update', onGalleryUpdate);\n socket.on('game_rooms_update', onGameRoomsUpdate);\n socket.on('game_state_update', onGameStateUpdate);\n socket.on('game_joined', onGameJoined);\n socket.on('game_message', onGameMessage);\n socket.on('leaderboard_update', onLeaderboardUpdate);\n return () => {\n socket.off('chat_message', onChatMessage);\n socket.off('token_list_update', onTokenListUpdate);\n socket.off('gallery_update', onGalleryUpdate);\n socket.off('game_rooms_update', onGameRoomsUpdate);\n socket.off('game_state_update', onGameStateUpdate);\n socket.off('game_joined', onGameJoined);\n socket.off('game_message', onGameMessage);\n socket.off('leaderboard_update', onLeaderboardUpdate);\n };\n }, []);\n\n // Auto-scroll chat to bottom when new messages arrive or when switching to chat view\n useEffect(() => {\n if (chatEndRef.current) {\n chatEndRef.current.scrollIntoView({\n behavior: 'smooth'\n });\n }\n }, [chatMessages, view]);\n\n // Auto-scroll game chat to bottom when new messages arrive\n useEffect(() => {\n if (gameMessagesEndRef.current) {\n gameMessagesEndRef.current.scrollIntoView({\n behavior: 'smooth'\n });\n }\n }, [gameMessages]);\n\n // AI chat for generating coin details and logo\n const {\n messages,\n append,\n isLoading\n } = useChat({\n api: 'https://chat.dev.fun/chat/5f6d83e181269bda535c',\n initialMessages: [{\n id: 'system',\n role: 'system',\n content: `You are MEMEPUMP, the ultimate meme coin generator. Your job is to create COMPLETELY UNIQUE, hilarious, absurd, and viral-worthy meme coins based on user input.\n \n ULTRA IMPORTANT: You MUST use the user's input as the primary theme for the coin. The coin's name, ticker, description, and logo should all directly relate to what the user requested. NEVER use generic templates or default responses - every coin must be 100% custom and unique.\n \n When given a theme or concept, generate:\n 1. NAME: A catchy, meme-worthy name (2-3 words max) that DIRECTLY relates to the user's input theme. Be creative and avoid generic names.\n 2. TICKER: Exactly 7 characters, all caps, derived from the NAME or theme. Make it memorable and unique.\n 3. DESCRIPTION: A hilarious, over-the-top description (150-200 chars) with ridiculous promises and meme culture references that clearly incorporates the user's theme. Include specific numbers, percentages, and absurd claims.\n 4. LOGO_PROMPT: A detailed prompt to generate an OFFICIAL-LOOKING but ABSURD logo image that visually represents the user's theme. Be extremely specific about colors, style, elements, and professional design aspects. Make it look like a legitimate cryptocurrency logo but with a bizarre twist related to the user's input. If the theme involves people, explicitly mention human faces or portraits and how they should be incorporated into a professional-looking crypto logo.\n 5. RARITY: Assign a rarity tier: \"Common\", \"Rare\", \"Epic\", \"Legendary\", or \"God Tier\" based on how unique and creative the concept is.\n \n Format your response as a JSON object with these exact keys: name, ticker, description, logoPrompt, rarity.\n \n Make it absurd, make it funny, but make it look official enough that it could fool someone into thinking it's a real cryptocurrency that could 100x overnight despite being completely ridiculous. ALWAYS base your creation on the user's input theme and NEVER use generic templates.\n \n REMEMBER: Every coin must be completely unique - no default responses allowed!`\n }]\n });\n const vibeOptions = [{\n value: '',\n label: 'Choose a Vibe'\n }, {\n value: 'animal',\n label: '🐾 Animal'\n }, {\n value: 'food',\n label: '🍕 Food'\n }, {\n value: 'internet',\n label: '🌐 Internet Culture'\n }, {\n value: 'scifi',\n label: '🚀 Sci-Fi'\n }, {\n value: 'absurd',\n label: '🤪 Absurd'\n }, {\n value: 'finance',\n label: '💰 Finance'\n }, {\n value: 'tech',\n label: '💻 Tech'\n }, {\n value: 'gaming',\n label: '🎮 Gaming'\n }, {\n value: 'business',\n label: '💼 Business'\n }, {\n value: 'politics',\n label: '🏛️ Politics'\n }, {\n value: 'healthcare',\n label: '🏥 Healthcare'\n }, {\n value: 'education',\n label: '🎓 Education'\n }, {\n value: 'environment',\n label: '🌱 Environment'\n }, {\n value: 'luxury',\n label: '💎 Luxury'\n }];\n const rarityColors = {\n 'Common': 'text-gray-300',\n 'Rare': 'text-blue-400',\n 'Epic': 'text-purple-400',\n 'Legendary': 'text-yellow-400',\n 'God Tier': 'text-gradient-to-r from-pink-500 via-red-500 to-yellow-500'\n };\n const generateRandomTheme = () => {\n // Generate completely random and unique themes each time\n const subjects = ['cat', 'dog', 'frog', 'monkey', 'hamster', 'panda', 'fox', 'koala', 'axolotl', 'capybara', 'pizza', 'taco', 'burger', 'sushi', 'donut', 'banana', 'ramen', 'avocado', 'burrito', 'pretzel', 'robot', 'alien', 'zombie', 'ninja', 'pirate', 'wizard', 'astronaut', 'viking', 'samurai', 'cowboy', 'pixel', 'retro', 'neon', 'glitch', 'vaporwave', 'synthwave', 'cyberpunk', 'steampunk', 'dieselpunk', 'biopunk'];\n const modifiers = ['laser-eyed', 'time-traveling', 'dancing', 'exploding', 'flying', 'glowing', 'giant', 'tiny', 'invisible', 'rainbow', 'space', 'underwater', 'interdimensional', 'quantum', 'digital', 'holographic', 'galactic', 'cosmic', 'ethereal', 'astral', 'mecha', 'cyborg', 'bionic', 'mutant', 'genetically-modified', 'radioactive', 'psychic', 'telekinetic', 'shapeshifting', 'elemental', 'skateboarding', 'surfing', 'breakdancing', 'moonwalking', 'parkour', 'karate', 'kung-fu', 'yoga', 'meditating', 'levitating'];\n const contexts = ['on the moon', 'in space', 'in the metaverse', 'in a parallel universe', 'in the future', 'in ancient times', 'in a dystopian world', 'in a video game', 'in a meme', 'in a dream', 'in virtual reality', 'in a simulation', 'in a crypto wallet', 'on a blockchain', 'riding a rocket', 'surfing on lava', 'swimming in money', 'fighting inflation', 'mining bitcoin', 'hacking the mainframe', 'wearing a suit', 'with diamond hands', 'hodling forever', 'going to the moon', 'breaking the internet', 'becoming viral'];\n const randomSubject = subjects[Math.floor(Math.random() * subjects.length)];\n const randomModifier = modifiers[Math.floor(Math.random() * modifiers.length)];\n const randomContext = contexts[Math.floor(Math.random() * contexts.length)];\n return `a ${randomModifier} ${randomSubject} ${randomContext}`;\n };\n\n // Generate a completely custom fallback coin based on user input - optimized for immediate display\n const generateFallbackCoin = (userInput = '') => {\n // If we have user input, create a fully custom themed coin\n if (userInput) {\n // Create more creative variations for coin naming\n const inputWords = userInput.split(' ');\n const mainWord = inputWords[0].charAt(0).toUpperCase() + inputWords[0].slice(1);\n\n // Generate more creative name variations\n const nameVariations = [`${mainWord}${inputWords.length > 1 ? inputWords[1].charAt(0).toUpperCase() + inputWords[1].slice(1) : 'Verse'}`, `${mainWord}${['Inu', 'Moon', 'Rocket', 'Pump', 'Degen', 'Pepe', 'Elon', 'Dao', 'Swap', 'Verse', 'Chain', 'Coin'][Math.floor(Math.random() * 12)]}`, `${['Crypto', 'Degen', 'Based', 'Mega', 'Ultra', 'Hyper', 'Super', 'Giga', 'Alpha', 'Sigma', 'Omega'][Math.floor(Math.random() * 11)]}${mainWord}`, `${mainWord}${['X', 'AI', '3.0', 'DAO', 'Swap', 'Verse', 'Chain', 'Finance', 'Protocol'][Math.floor(Math.random() * 9)]}`];\n const name = nameVariations[Math.floor(Math.random() * nameVariations.length)];\n\n // Generate a unique ticker based on name with random elements\n const baseTicker = name.replace(/[^A-Z0-9]/gi, '').toUpperCase().substring(0, 3);\n const randomChars = 'ABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789';\n let ticker = baseTicker;\n while (ticker.length < 7) {\n ticker += randomChars.charAt(Math.floor(Math.random() * randomChars.length));\n }\n\n // Generate a more creative and varied description based on input\n const descriptionTemplates = [`The first ${userInput.toLowerCase()} powered token to revolutionize DeFi! Guaranteed 100x returns or your memes back! ${Math.floor(Math.random() * 1000)}% APY staking coming soon!`, `${userInput.charAt(0).toUpperCase() + userInput.slice(1)} meets blockchain technology! Early investors already up ${Math.floor(Math.random() * 500) + 100}%! Don't miss the next moonshot!`, `Bringing ${userInput.toLowerCase()} to Web3! Created by ex-${['Google', 'Amazon', 'Tesla', 'SpaceX', 'Apple', 'Microsoft'][Math.floor(Math.random() * 6)]} engineers. Presale sold out in ${Math.floor(Math.random() * 10) + 1} minutes!`, `The ultimate ${userInput.toLowerCase()} ecosystem token! Backed by ${Math.floor(Math.random() * 100) + 1} anonymous whales and a community of ${Math.floor(Math.random() * 100000) + 1000} diamond hands!`, `${userInput.charAt(0).toUpperCase() + userInput.slice(1)} technology meets meme culture! Deflationary tokenomics with ${Math.floor(Math.random() * 10) + 1}% burn on every transaction! To the moon!`];\n const description = descriptionTemplates[Math.floor(Math.random() * descriptionTemplates.length)];\n\n // Generate a rarity with weighted probabilities\n const rarityOptions = [{\n value: \"Common\",\n weight: 45\n }, {\n value: \"Rare\",\n weight: 30\n }, {\n value: \"Epic\",\n weight: 15\n }, {\n value: \"Legendary\",\n weight: 7\n }, {\n value: \"God Tier\",\n weight: 3\n }];\n\n // Weighted random selection\n const totalWeight = rarityOptions.reduce((sum, option) => sum + option.weight, 0);\n let random = Math.random() * totalWeight;\n let rarity = \"Common\";\n for (const option of rarityOptions) {\n random -= option.weight;\n if (random <= 0) {\n rarity = option.value;\n break;\n }\n }\n\n // Create the fully custom themed coin\n const themedCoin = {\n name,\n ticker: ticker.substring(0, 7),\n description,\n rarity,\n logoPrompt: `${userInput} crypto logo professional detailed high quality`\n };\n\n // Pre-generate a placeholder logo URL for instant display\n const placeholderLogo = generatePhotoPlaceholder(themedCoin.name, themedCoin.ticker);\n const newCoin = {\n ...themedCoin,\n id: Date.now().toString(),\n createdAt: new Date().toISOString(),\n votes: 0,\n launchVotes: 0,\n logoUrl: placeholderLogo,\n logoEmojis: [],\n creator: username,\n logoPrompt: themedCoin.logoPrompt\n };\n setGeneratedCoin(newCoin);\n setLogoEmojis([]);\n setLogoLoading(false);\n setLongLoading(false);\n\n // Generate better logo in background\n setTimeout(() => {\n generateLogo(newCoin.logoPrompt, newCoin.id);\n }, 100);\n\n // Play sound if enabled\n if (soundEnabled) {\n const audio = new Audio('data:audio/mp3;base64,SUQzBAAAAAAAI1RTU0UAAAAPAAADTGF2ZjU4Ljc2LjEwMAAAAAAAAAAAAAAA/+M4wAAAAAAAAAAAAEluZm8AAAAPAAAAAwAAAbAAkJCQkJCQkJCQkJCQkJCQwMDAwMDAwMDAwMDAwMDAwMD4+Pj4+Pj4+Pj4+Pj4+Pj4//////////////////////////8AAAAATGF2YzU4LjEzAAAAAAAAAAAAAAAAJAYHAAAAAAAAsNAxtOuAAAAAAAD/+8DEAAAGsAF19BEAJNpLL3nPMCJGaWFndXJlIDEuIFRoZSBsb2NhdGlvbiBvZiB0aGUgZGlmZmVyZW50IHNlY3Rpb25zIG9mIHRoZSBicmFpbiBpbiB0aGUgaHVtYW4gYm9keS4gVGhlIGJyYWluIGlzIGxvY2F0ZWQgaW4gdGhlIGhlYWQsIHByb3RlY3RlZCBieSB0aGUgc2t1bGwuIFRoZSBjZXJlYnJ1bSwgY2VyZWJlbGx1bSwgYW5kIGJyYWluc3RlbSBhcmUgdmlzaWJsZS4gVGhlIGNlcmVicnVtIGlzIHRoZSBsYXJnZXN0IHBhcnQgb2YgdGhlIGJyYWluIGFuZCBpcyBkaXZpZGVkIGludG8gdHdvIGhlbWlzcGhlcmVzLiBUaGUgY2VyZWJlbGx1bSBpcyBsb2NhdGVkIGF0IHRoZSBiYWNrIG9mIHRoZSBicmFpbiwgYW5kIHRoZSBicmFpbnN0ZW0gY29ubmVjdHMgdGhlIGJyYWluIHRvIHRoZSBzcGluYWwgY29yZC4=');\n audio.play();\n }\n return newCoin;\n } else {\n // If no user input, generate a completely random but unique coin\n // Generate random themes based on current trends and meme culture\n const randomThemeGenerators = [\n // Random animal themes\n () => {\n const animals = ['Cat', 'Dog', 'Frog', 'Ape', 'Shiba', 'Hamster', 'Penguin', 'Panda', 'Fox', 'Koala', 'Axolotl', 'Capybara'];\n const modifiers = ['Cyber', 'Space', 'Ninja', 'Wizard', 'Pirate', 'Samurai', 'Astro', 'Crypto', 'Pixel', 'Quantum', 'Laser', 'Mecha'];\n const animal = animals[Math.floor(Math.random() * animals.length)];\n const modifier = modifiers[Math.floor(Math.random() * modifiers.length)];\n return {\n theme: `${modifier} ${animal}`,\n name: `${modifier}${animal}`,\n ticker: `${animal.substring(0, 2).toUpperCase()}${modifier.substring(0, 2).toUpperCase()}${Math.floor(Math.random() * 1000).toString().padStart(3, '0')}`,\n description: `The first ${modifier.toLowerCase()} ${animal.toLowerCase()} in the metaverse! Each token grants access to exclusive ${animal.toLowerCase()} NFTs and ${Math.floor(Math.random() * 100) + 1}% APY staking rewards!`,\n logoPrompt: `${modifier.toLowerCase()} ${animal.toLowerCase()} crypto logo professional detailed`\n };\n },\n // Random food themes\n () => {\n const foods = ['Pizza', 'Taco', 'Burger', 'Sushi', 'Donut', 'Banana', 'Ramen', 'Avocado', 'Burrito', 'Pretzel', 'Waffle', 'Hotdog'];\n const effects = ['Exploding', 'Flying', 'Glowing', 'Dancing', 'Spinning', 'Flaming', 'Frozen', 'Golden', 'Cosmic', 'Hyper', 'Ultra', 'Mega'];\n const food = foods[Math.floor(Math.random() * foods.length)];\n const effect = effects[Math.floor(Math.random() * effects.length)];\n return {\n theme: `${effect} ${food}`,\n name: `${effect}${food}`,\n ticker: `${food.substring(0, 2).toUpperCase()}${effect.substring(0, 2).toUpperCase()}${Math.floor(Math.random() * 1000).toString().padStart(3, '0')}`,\n description: `The tastiest token in DeFi! Each ${food.toLowerCase()} token burns ${Math.floor(Math.random() * 5) + 1}% on transactions, feeding gains directly to holders! ${Math.floor(Math.random() * 1000) + 1000} holders already feasting!`,\n logoPrompt: `${effect.toLowerCase()} ${food.toLowerCase()} crypto logo professional detailed`\n };\n },\n // Random tech/finance themes\n () => {\n const techs = ['AI', 'Blockchain', 'Quantum', 'Neural', 'Cyber', 'Meta', 'Hyper', 'Nano', 'Fusion', 'Vector', 'Pixel', 'Crypto'];\n const concepts = ['Finance', 'Protocol', 'Network', 'Chain', 'Swap', 'Yield', 'Stake', 'DAO', 'Verse', 'Ledger', 'Wallet', 'Token'];\n const tech = techs[Math.floor(Math.random() * techs.length)];\n const concept = concepts[Math.floor(Math.random() * concepts.length)];\n return {\n theme: `${tech} ${concept}`,\n name: `${tech}${concept}`,\n ticker: `${tech.substring(0, 2).toUpperCase()}${concept.substring(0, 2).toUpperCase()}${Math.floor(Math.random() * 1000).toString().padStart(3, '0')}`,\n description: `Revolutionary ${tech.toLowerCase()} technology meets ${concept.toLowerCase()}! Created by anonymous ${['billionaires', 'geniuses', 'developers', 'hackers', 'visionaries'][Math.floor(Math.random() * 5)]} to disrupt ${['banking', 'finance', 'Web3', 'DeFi', 'the metaverse'][Math.floor(Math.random() * 5)]}!`,\n logoPrompt: `${tech.toLowerCase()} ${concept.toLowerCase()} crypto logo professional detailed futuristic`\n };\n },\n // Random meme culture themes\n () => {\n const memes = ['Pepe', 'Doge', 'Wojak', 'Chad', 'Stonks', 'Moon', 'Diamond', 'Wen', 'FOMO', 'HODL', 'Lambo', 'Rug'];\n const actions = ['Pump', 'Rocket', 'Launch', 'Flip', 'Blast', 'Surge', 'Moon', 'Yeet', 'Flex', 'Ape', 'Defi', 'Farm'];\n const meme = memes[Math.floor(Math.random() * memes.length)];\n const action = actions[Math.floor(Math.random() * actions.length)];\n return {\n theme: `${meme} ${action}`,\n name: `${meme}${action}`,\n ticker: `${meme.substring(0, 2).toUpperCase()}${action.substring(0, 2).toUpperCase()}${Math.floor(Math.random() * 1000).toString().padStart(3, '0')}`,\n description: `The ultimate ${meme.toLowerCase()} token for true ${action.toLowerCase()} enthusiasts! ${Math.floor(Math.random() * 100) + 1}% of supply locked for ${Math.floor(Math.random() * 10) + 1} years! Diamond hands only! 💎🙌`,\n logoPrompt: `${meme.toLowerCase()} ${action.toLowerCase()} crypto logo professional detailed meme style`\n };\n }];\n\n // Select a random theme generator and create a unique coin\n const randomGenerator = randomThemeGenerators[Math.floor(Math.random() * randomThemeGenerators.length)];\n const generatedTheme = randomGenerator();\n\n // Generate a rarity with weighted probabilities\n const rarityOptions = [{\n value: \"Common\",\n weight: 45\n }, {\n value: \"Rare\",\n weight: 30\n }, {\n value: \"Epic\",\n weight: 15\n }, {\n value: \"Legendary\",\n weight: 7\n }, {\n value: \"God Tier\",\n weight: 3\n }];\n\n // Weighted random selection\n const totalWeight = rarityOptions.reduce((sum, option) => sum + option.weight, 0);\n let random = Math.random() * totalWeight;\n let rarity = \"Common\";\n for (const option of rarityOptions) {\n random -= option.weight;\n if (random <= 0) {\n rarity = option.value;\n break;\n }\n }\n\n // Create a completely custom random coin\n const randomCoin = {\n name: generatedTheme.name,\n ticker: generatedTheme.ticker.substring(0, 7),\n description: generatedTheme.description,\n rarity: rarity,\n logoPrompt: generatedTheme.logoPrompt\n };\n // Pre-generate a placeholder logo URL for instant display\n const placeholderLogo = generatePhotoPlaceholder(randomCoin.name, randomCoin.ticker);\n const newCoin = {\n ...randomCoin,\n id: Date.now().toString(),\n createdAt: new Date().toISOString(),\n votes: 0,\n launchVotes: 0,\n logoUrl: placeholderLogo,\n logoEmojis: [],\n creator: username,\n logoPrompt: randomCoin.logoPrompt || randomCoin.name\n };\n setGeneratedCoin(newCoin);\n setLogoEmojis([]);\n setLogoLoading(false);\n setLongLoading(false);\n\n // Generate better logo in background\n setTimeout(() => {\n generateLogo(newCoin.logoPrompt || newCoin.name, newCoin.id);\n }, 100);\n\n // Play sound if enabled\n if (soundEnabled) {\n const audio = new Audio('data:audio/mp3;base64,SUQzBAAAAAAAI1RTU0UAAAAPAAADTGF2ZjU4Ljc2LjEwMAAAAAAAAAAAAAAA/+M4wAAAAAAAAAAAAEluZm8AAAAPAAAAAwAAAbAAkJCQkJCQkJCQkJCQkJCQwMDAwMDAwMDAwMDAwMDAwMD4+Pj4+Pj4+Pj4+Pj4+Pj4//////////////////////////8AAAAATGF2YzU4LjEzAAAAAAAAAAAAAAAAJAYHAAAAAAAAsNAxtOuAAAAAAAD/+8DEAAAGsAF19BEAJNpLL3nPMCJGaWFndXJlIDEuIFRoZSBsb2NhdGlvbiBvZiB0aGUgZGlmZmVyZW50IHNlY3Rpb25zIG9mIHRoZSBicmFpbiBpbiB0aGUgaHVtYW4gYm9keS4gVGhlIGJyYWluIGlzIGxvY2F0ZWQgaW4gdGhlIGhlYWQsIHByb3RlY3RlZCBieSB0aGUgc2t1bGwuIFRoZSBjZXJlYnJ1bSwgY2VyZWJlbGx1bSwgYW5kIGJyYWluc3RlbSBhcmUgdmlzaWJsZS4gVGhlIGNlcmVicnVtIGlzIHRoZSBsYXJnZXN0IHBhcnQgb2YgdGhlIGJyYWluIGFuZCBpcyBkaXZpZGVkIGludG8gdHdvIGhlbWlzcGhlcmVzLiBUaGUgY2VyZWJlbGx1bSBpcyBsb2NhdGVkIGF0IHRoZSBiYWNrIG9mIHRoZSBicmFpbiwgYW5kIHRoZSBicmFpbnN0ZW0gY29ubmVjdHMgdGhlIGJyYWluIHRvIHRoZSBzcGluYWwgY29yZC4=');\n audio.play();\n }\n return newCoin;\n }\n };\n // Generate photo-like placeholder - moved up for immediate use\n const generatePhotoPlaceholder = (coinName, ticker) => {\n // Extract first letters for the logo text\n const getInitials = text => {\n return text.split(' ').map(word => word.charAt(0).toUpperCase()).join('').substring(0, 3);\n };\n const initials = getInitials(coinName);\n const tickerText = (ticker || 'MEME').substring(0, 4);\n\n // Generate colors based on coin name and ticker\n const getColorFromString = str => {\n let hash = 0;\n for (let i = 0; i < str.length; i++) {\n hash = str.charCodeAt(i) + ((hash << 5) - hash);\n }\n const c = (hash & 0x00FFFFFF).toString(16).toUpperCase();\n return \"#\" + \"00000\".substring(0, 6 - c.length) + c;\n };\n const primaryColor = getColorFromString(coinName);\n const secondaryColor = getColorFromString(ticker || 'MEMECOIN');\n\n // Simplified SVG for faster rendering\n const simpleSvg = ``;\n\n // Convert SVG to data URL\n return `data:image/svg+xml;charset=utf-8,${encodeURIComponent(simpleSvg)}`;\n };\n const generateCoin = async input => {\n if (!input && !selectedVibe) {\n setShowError(true);\n setTimeout(() => setShowError(false), 3000);\n return;\n }\n\n // Start with a pre-generated fallback coin for instant feedback\n // Now using the input to create a more relevant fallback\n setGenerating(true);\n const instantCoin = generateFallbackCoin(input);\n\n // No need for loading states since we show something immediately\n setLogoLoading(false);\n setLongLoading(false);\n\n // Longer timeout (4 seconds) to give AI more time to generate a relevant coin\n const fallbackTimeout = setTimeout(() => {\n if (generating) {\n console.log(\"AI generation taking too long, using fallback coin\");\n setGenerating(false);\n }\n }, 4000);\n\n // Store the fallback timeout so we can clear it if AI responds in time\n setGenerationTimeout(fallbackTimeout);\n let prompt = input || generateRandomTheme();\n if (selectedVibe) {\n prompt += ` with a ${selectedVibe} vibe`;\n }\n if (extraMemeEnergy) {\n prompt += \" with EXTRA meme energy and absurdity\";\n }\n\n // Add a random seed to ensure uniqueness even with the same input\n const randomSeed = Math.floor(Math.random() * 10000);\n try {\n await append({\n role: 'user',\n content: `Generate a meme coin based on: ${prompt}. The coin MUST be directly related to \"${input}\" as the main theme. Make it unique and different from previous generations. Random seed: ${randomSeed}`\n });\n } catch (error) {\n console.error(\"Error generating coin:\", error);\n setGenerating(false);\n setLogoLoading(false);\n setLongLoading(false);\n clearTimeout(fallbackTimeout);\n\n // Generate a fallback coin instead of showing an error\n // Use the input to create a relevant fallback\n generateFallbackCoin(input);\n }\n };\n useEffect(() => {\n if (messages.length > 1 && messages[messages.length - 1].role === 'assistant') {\n try {\n // Clear the fallback timeout since we got a response\n if (generationTimeout) {\n clearTimeout(generationTimeout);\n setGenerationTimeout(null);\n }\n const lastMessage = messages[messages.length - 1].content;\n // Extract JSON from the message\n const jsonMatch = lastMessage.match(/\\{[\\s\\S]*\\}/);\n if (jsonMatch) {\n const coinData = JSON.parse(jsonMatch[0]);\n\n // Generate a random ticker if not provided or not 7 chars\n if (!coinData.ticker || coinData.ticker.length !== 7) {\n const baseTicker = coinData.name.replace(/[^A-Z0-9]/gi, '').toUpperCase().substring(0, 4);\n const randomChars = 'ABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789';\n let ticker = baseTicker;\n while (ticker.length < 7) {\n ticker += randomChars.charAt(Math.floor(Math.random() * randomChars.length));\n }\n coinData.ticker = ticker.substring(0, 7);\n }\n\n // Add creation timestamp and voting data\n const newCoin = {\n ...coinData,\n id: Date.now().toString(),\n createdAt: new Date().toISOString(),\n votes: 0,\n launchVotes: 0,\n logoUrl: '',\n logoEmojis: [],\n // No longer using emoji overlays\n // Removed hasVoted flag to allow unlimited voting\n creator: username\n };\n setGeneratedCoin(newCoin);\n setLogoEmojis([]); // Empty array as we're not using emojis anymore\n\n // Generate logo based on the prompt\n generateLogo(newCoin.logoPrompt || newCoin.name, newCoin.id);\n\n // Play sound if enabled\n if (soundEnabled) {\n const audio = new Audio('data:audio/mp3;base64,SUQzBAAAAAAAI1RTU0UAAAAPAAADTGF2ZjU4Ljc2LjEwMAAAAAAAAAAAAAAA/+M4wAAAAAAAAAAAAEluZm8AAAAPAAAAAwAAAbAAkJCQkJCQkJCQkJCQkJCQwMDAwMDAwMDAwMDAwMDAwMD4+Pj4+Pj4+Pj4+Pj4+Pj4//////////////////////////8AAAAATGF2YzU4LjEzAAAAAAAAAAAAAAAAJAYHAAAAAAAAsNAxtOuAAAAAAAD/+8DEAAAGsAF19BEAJNpLL3nPMCJGaWFndXJlIDEuIFRoZSBsb2NhdGlvbiBvZiB0aGUgZGlmZmVyZW50IHNlY3Rpb25zIG9mIHRoZSBicmFpbiBpbiB0aGUgaHVtYW4gYm9keS4gVGhlIGJyYWluIGlzIGxvY2F0ZWQgaW4gdGhlIGhlYWQsIHByb3RlY3RlZCBieSB0aGUgc2t1bGwuIFRoZSBjZXJlYnJ1bSwgY2VyZWJlbGx1bSwgYW5kIGJyYWluc3RlbSBhcmUgdmlzaWJsZS4gVGhlIGNlcmVicnVtIGlzIHRoZSBsYXJnZXN0IHBhcnQgb2YgdGhlIGJyYWluIGFuZCBpcyBkaXZpZGVkIGludG8gdHdvIGhlbWlzcGhlcmVzLiBUaGUgY2VyZWJlbGx1bSBpcyBsb2NhdGVkIGF0IHRoZSBiYWNrIG9mIHRoZSBicmFpbiwgYW5kIHRoZSBicmFpbnN0ZW0gY29ubmVjdHMgdGhlIGJyYWluIHRvIHRoZSBzcGluYWwgY29yZC4=');\n audio.play();\n }\n }\n } catch (error) {\n console.error(\"Error parsing coin data:\", error);\n // Generate fallback coin on parsing error\n generateFallbackCoin();\n }\n setGenerating(false);\n setLongLoading(false); // Reset long loading state when generation is complete\n setTimeout(() => setLogoLoading(false), 1000);\n }\n }, [messages, soundEnabled, username, generationTimeout]);\n const [logoUrl, setLogoUrl] = useState('');\n const [logoError, setLogoError] = useState(false);\n\n // This function has been removed as we no longer use emoji overlays\n const generateRandomEmojis = () => {\n return []; // Return empty array to maintain compatibility with existing code\n };\n\n // Ultra-optimized logo generation - now with pre-cached logos and instant display\n // Enhanced to create more relevant and unique logos based on user input\n const logoCache = {};\n const generateLogo = async (prompt, coinId = null) => {\n if (!prompt) return;\n\n // No loading states - we already have a placeholder\n setLogoError(false);\n setLongLoading(false);\n setLogoLoading(false);\n\n // Check cache first for instant loading\n const cacheKey = prompt.toLowerCase().trim();\n if (logoCache[cacheKey]) {\n console.log(\"Using cached logo\");\n setLogoUrl(logoCache[cacheKey]);\n\n // Update coin with cached logo\n if (coinId && generatedCoin) {\n setGeneratedCoin(prev => ({\n ...prev,\n logoUrl: logoCache[cacheKey]\n }));\n }\n return;\n }\n\n // Extract main subject from the prompt and enhance it for better logo generation\n const mainSubject = prompt.replace(/logo/gi, '').replace(/prompt/gi, '').trim();\n\n // Add random style variations to ensure uniqueness\n const styles = ['minimalist', 'geometric', 'gradient', 'flat design', 'retro', 'futuristic', 'neon', 'holographic', '3D', 'pixel art', 'hand-drawn', 'watercolor', 'glitch', 'vaporwave', 'cyberpunk', 'synthwave', 'abstract'];\n const colors = ['blue and purple', 'green and yellow', 'red and orange', 'pink and cyan', 'black and gold', 'white and blue', 'purple and teal', 'orange and blue', 'neon green and black', 'hot pink and electric blue', 'gold and silver'];\n\n // Select random style and color combination for uniqueness\n const randomStyle = styles[Math.floor(Math.random() * styles.length)];\n const randomColor = colors[Math.floor(Math.random() * colors.length)];\n\n // Add a unique seed and timestamp to prevent caching\n const uniqueSeed = Math.floor(Math.random() * 10000) + Date.now() % 1000;\n\n // Create a more specific image API URL to get a more relevant and unique logo\n const imageUrl = `https://image.pollinations.ai/prompt/${encodeURIComponent(mainSubject)}%20crypto%20logo%20professional%20${encodeURIComponent(randomStyle)}%20style%20${encodeURIComponent(randomColor)}%20colors%20high%20quality%20vector%20%23width=512%20%23height=512%20%23seed=${uniqueSeed}`;\n\n // We already have a placeholder, so no need to generate another one\n // Just try to load the better image in the background\n\n // Slightly longer timeout (2 seconds) to allow for better image generation\n const globalTimeout = setTimeout(() => {\n console.log(\"Image fetching timed out, keeping placeholder\");\n setLogoLoading(false);\n }, 2000);\n\n // Try to get a better image in the background without blocking\n try {\n // Start loading the image in the background\n const img = new Image();\n img.onload = () => {\n // Image loaded successfully, update the logo\n setLogoUrl(imageUrl);\n clearTimeout(globalTimeout);\n\n // Cache the successful image\n logoCache[cacheKey] = imageUrl;\n\n // Update coin logo URL if needed\n if (coinId) {\n setGeneratedCoins(prev => {\n return prev.map(coin => {\n if (coin.id === coinId) {\n return {\n ...coin,\n logoUrl: imageUrl,\n logoEmojis: []\n };\n }\n return coin;\n });\n });\n }\n\n // Also update the current generated coin\n if (generatedCoin) {\n setGeneratedCoin(prev => ({\n ...prev,\n logoUrl: imageUrl\n }));\n }\n };\n\n // Start loading the image\n img.src = imageUrl;\n } catch (err) {\n console.warn(\"Error in background image loading:\", err);\n // No need to do anything as we already have a placeholder\n }\n };\n const regenerateLogo = () => {\n // Generate a placeholder immediately for instant feedback\n if (generatedCoin) {\n const placeholderLogo = generatePhotoPlaceholder(generatedCoin.name, generatedCoin.ticker);\n setLogoUrl(placeholderLogo);\n\n // Update the coin with the placeholder\n setGeneratedCoin(prev => ({\n ...prev,\n logoUrl: placeholderLogo,\n logoEmojis: []\n }));\n\n // No loading states - show something immediately\n setLogoLoading(false);\n setLongLoading(false);\n\n // Add a random seed to ensure a different image each time\n const randomSeed = Math.floor(Math.random() * 10000);\n const directPrompt = `${generatedCoin.logoPrompt || generatedCoin.name} (variation ${randomSeed})`;\n\n // Generate better logo in background\n setTimeout(() => {\n generateLogo(directPrompt, generatedCoin.id);\n }, 100);\n }\n };\n\n // Save the current coin to the gallery (now using StateClient)\n const saveCoinToGallery = async () => {\n if (!generatedCoin) return;\n try {\n // Check if this coin is already in the gallery\n const existingCoin = generatedCoins.find(coin => coin.id === generatedCoin.id);\n if (!existingCoin) {\n // Prepare the coin with logo URL (no emojis)\n const coinToSave = {\n ...generatedCoin,\n logoUrl: logoUrl,\n logoEmojis: [] // No emojis\n };\n\n // Save to state API\n await stateClient.createEntity('gallery_coins', coinToSave);\n\n // Update local state\n setGeneratedCoins(prev => [coinToSave, ...prev]);\n\n // Notify other users\n socket.emit('gallery_update', [coinToSave, ...generatedCoins]);\n\n // Show a success message\n alert('Coin added to the gallery! 🚀');\n }\n } catch (error) {\n console.error(\"Error saving coin to gallery:\", error);\n alert('Failed to save coin. Please try again.');\n }\n };\n\n // Add a token to the token list\n const addToken = async e => {\n e.preventDefault();\n if (!tokenCA.trim()) {\n setTokenError('Please enter a contract address');\n return;\n }\n\n // Basic validation for Solana address format\n const solanaAddressRegex = /^[1-9A-HJ-NP-Za-km-z]{32,44}$/;\n if (!solanaAddressRegex.test(tokenCA.trim())) {\n setTokenError('Please enter a valid Solana contract address');\n return;\n }\n\n // Show loading state while adding token\n setIsLoadingTokens(true);\n try {\n // Check if this token is already in the list\n const existingToken = tokenList.find(token => token.contractAddress.toLowerCase() === tokenCA.toLowerCase());\n if (existingToken) {\n setTokenError('This token is already listed');\n setIsLoadingTokens(false);\n return;\n }\n\n // Generate a logo for the token based on its contract address\n const tokenName = `Token ${tokenCA.substring(0, 4)}...${tokenCA.substring(tokenCA.length - 4)}`;\n const tokenTicker = tokenCA.substring(0, 3).toUpperCase() + tokenCA.substring(tokenCA.length - 4, tokenCA.length - 1).toUpperCase();\n const tokenLogo = generatePhotoPlaceholder(tokenName, tokenTicker);\n\n // Create new token entry\n const newToken = {\n id: Date.now().toString(),\n contractAddress: tokenCA.trim(),\n comment: tokenComment.trim(),\n votes: 0,\n creator: username,\n createdAt: new Date().toISOString(),\n logoUrl: tokenLogo,\n comments: [] // Initialize comments array\n };\n\n // Save to state API\n await stateClient.createEntity('token_list', newToken);\n\n // Update local state immediately without waiting for API\n setTokenList(prevList => [newToken, ...prevList]);\n setIsLoadingTokens(false);\n\n // Notify other users\n socket.emit('token_list_update', [newToken, ...tokenList]);\n console.log(\"Emitted token list update:\", [newToken, ...tokenList]);\n\n // Reset form\n setTokenCA('');\n setTokenComment('');\n setTokenError('');\n\n // Show success message\n alert('Token added to the list! 🚀');\n } catch (error) {\n console.error(\"Error adding token:\", error);\n setTokenError('Failed to add token. Please try again.');\n setIsLoadingTokens(false);\n }\n };\n\n // Vote on a coin (now using StateClient)\n const voteCoin = async (coinId, voteType, coinType = 'gallery') => {\n try {\n if (coinType === 'gallery') {\n // Update gallery coins\n const updatedCoins = generatedCoins.map(coin => {\n if (coin.id === coinId) {\n // Update vote count based on vote type - no limit on votes\n const voteChange = voteType === 'up' ? 1 : -1;\n const updatedCoin = {\n ...coin,\n votes: coin.votes + voteChange\n // Removed hasVoted flag to allow multiple votes\n };\n\n // Update in state API\n stateClient.updateEntity('gallery_coins', coinId, updatedCoin);\n return updatedCoin;\n }\n return coin;\n });\n setGeneratedCoins(updatedCoins);\n socket.emit('gallery_update', updatedCoins);\n } else {\n // Update token list\n setIsLoadingTokens(true);\n const updatedTokens = tokenList.map(token => {\n if (token.id === coinId) {\n // Update vote count based on vote type - no limit on votes\n const voteChange = voteType === 'up' ? 1 : -1;\n const updatedToken = {\n ...token,\n votes: token.votes + voteChange\n };\n\n // Update in state API\n stateClient.updateEntity('token_list', coinId, updatedToken);\n return updatedToken;\n }\n return token;\n });\n setTokenList(updatedTokens);\n setIsLoadingTokens(false);\n socket.emit('token_list_update', updatedTokens);\n console.log(\"Emitted token list update after vote:\", updatedTokens);\n }\n } catch (error) {\n console.error(\"Error voting on coin:\", error);\n setIsLoadingTokens(false);\n }\n };\n\n // Get the top voted coin (Meme Coin Master)\n const getTopCoin = () => {\n if (generatedCoins.length === 0) return null;\n return generatedCoins.reduce((top, current) => current.votes > top.votes ? current : top, generatedCoins[0]);\n };\n\n // Get the top voted token (MEME KING)\n const getTopToken = () => {\n if (tokenList.length === 0) return null;\n const topToken = tokenList.reduce((top, current) => current.votes > top.votes ? current : top, tokenList[0]);\n // Only return if it has at least one vote\n return topToken.votes > 0 ? topToken : null;\n };\n\n // Add comment to an existing token\n const addTokenComment = async (tokenId, comment) => {\n if (!comment.trim() || !username) return;\n try {\n setIsLoadingTokens(true);\n // Find the token\n const token = tokenList.find(t => t.id === tokenId);\n if (!token) {\n setIsLoadingTokens(false);\n return false;\n }\n\n // Create comment object\n const newComment = {\n id: Date.now().toString(),\n text: comment,\n author: username,\n timestamp: new Date().toISOString()\n };\n\n // Add comment to token\n const comments = token.comments || [];\n const updatedToken = {\n ...token,\n comments: [...comments, newComment]\n };\n\n // Update in state API\n await stateClient.updateEntity('token_list', tokenId, updatedToken);\n\n // Update local state\n const updatedTokenList = tokenList.map(t => t.id === tokenId ? updatedToken : t);\n setTokenList(updatedTokenList);\n setIsLoadingTokens(false);\n\n // Notify other users\n socket.emit('token_list_update', updatedTokenList);\n console.log(\"Emitted token list update after comment:\", updatedTokenList);\n return true;\n } catch (error) {\n console.error(\"Error adding comment:\", error);\n setIsLoadingTokens(false);\n return false;\n }\n };\n const downloadCoinCard = () => {\n if (!generatedCoin) return;\n\n // In a real app, this would generate an image of the card\n // For now, we'll just create a text file with the coin details\n const coinData = `\nMEMEPUMP COIN CARD\n-----------------\nNAME: ${generatedCoin.name}\nTICKER: $${generatedCoin.ticker}\nDESCRIPTION: ${generatedCoin.description}\nRARITY: ${generatedCoin.rarity}\n `;\n const blob = new Blob([coinData], {\n type: 'text/plain'\n });\n const url = URL.createObjectURL(blob);\n const a = document.createElement('a');\n a.href = url;\n a.download = `${generatedCoin.ticker.toLowerCase()}_coin.txt`;\n document.body.appendChild(a);\n a.click();\n document.body.removeChild(a);\n URL.revokeObjectURL(url);\n };\n const shareCoin = () => {\n if (!generatedCoin) return;\n\n // Create a shareable link with coin data encoded in URL parameters\n const coinData = {\n id: generatedCoin.id,\n name: generatedCoin.name,\n ticker: generatedCoin.ticker,\n description: generatedCoin.description,\n rarity: generatedCoin.rarity,\n logoUrl: logoUrl,\n logoEmojis: logoEmojis\n };\n\n // Encode the coin data as a base64 string to make the URL cleaner\n const encodedData = btoa(JSON.stringify(coinData));\n\n // Create the shareable URL with the current location and the encoded data\n const shareableUrl = `${window.location.origin}${window.location.pathname}?coin=${encodedData}`;\n\n // Create share text with the link\n const text = `Check out this meme coin I created with MEMEPUMP: ${generatedCoin.ticker} - ${generatedCoin.name}! ${generatedCoin.description}`;\n if (navigator.share) {\n navigator.share({\n title: `${generatedCoin.ticker} - ${generatedCoin.name}`,\n text: text,\n url: shareableUrl\n }).catch(err => {\n console.error('Error sharing:', err);\n copyToClipboard(shareableUrl);\n });\n } else {\n copyToClipboard(shareableUrl);\n alert('Shareable link copied to clipboard! 🔗✨');\n }\n };\n const copyToClipboard = text => {\n navigator.clipboard.writeText(text).then(() => {\n alert('Copied to clipboard! 📋✨');\n }).catch(err => {\n console.error('Failed to copy:', err);\n // Fallback for browsers that don't support clipboard API\n const textArea = document.createElement('textarea');\n textArea.value = text;\n document.body.appendChild(textArea);\n textArea.focus();\n textArea.select();\n try {\n document.execCommand('copy');\n alert('Copied to clipboard! 📋✨');\n } catch (err) {\n console.error('Fallback copy failed:', err);\n alert('Failed to copy link. Please copy it manually: ' + text);\n }\n document.body.removeChild(textArea);\n });\n };\n\n // Function to censor inappropriate words\n const censorMessage = message => {\n // Words to censor\n const censoredWords = [\n // Sex-related terms (simplified list)\n 'sex', 'porn', 'xxx', 'nsfw', 'adult', 'explicit',\n // Crypto FUD terms\n 'fud', 'scam', 'fake', 'rug', 'rug pull', 'r u g'];\n\n // Replace censored words with asterisks\n let censoredMessage = message;\n censoredWords.forEach(word => {\n const regex = new RegExp(`\\\\b${word}\\\\b`, 'gi');\n censoredMessage = censoredMessage.replace(regex, '*'.repeat(word.length));\n });\n return censoredMessage;\n };\n\n // Send a chat message\n const sendChatMessage = async e => {\n e.preventDefault();\n if (!chatInput.trim()) return;\n\n // Check if username contains \"dev\" or is \"DEV\"\n if (username.toLowerCase().includes('dev') || username === \"DEV\") {\n setUsernameError('Username cannot contain \"dev\"');\n return;\n }\n\n // Check if 10 seconds have passed since the last message\n const now = Date.now();\n const timeSinceLastMessage = now - lastMessageTime;\n if (timeSinceLastMessage < 10000) {\n setChatCooldown(true);\n setTimeout(() => setChatCooldown(false), 2000);\n return;\n }\n\n // Censor the message\n const censoredMessage = censorMessage(chatInput);\n\n // Create message object\n const messageObj = {\n id: Date.now().toString(),\n sender: username,\n content: censoredMessage,\n timestamp: new Date().toISOString()\n };\n\n // Update last message time\n setLastMessageTime(now);\n try {\n // Save message to persistent storage\n await stateClient.createEntity('chat_messages', messageObj);\n\n // Add to local state\n setChatMessages(prev => [...prev, messageObj]);\n\n // Send to all users via socket\n socket.emit('chat_message', messageObj);\n\n // Clear input\n setChatInput('');\n\n // Force scroll to bottom after sending a message\n setTimeout(() => {\n if (chatEndRef.current) {\n chatEndRef.current.scrollIntoView({\n behavior: 'smooth'\n });\n }\n }, 100);\n } catch (error) {\n console.error(\"Error saving chat message:\", error);\n alert(\"Failed to send message. Please try again.\");\n }\n };\n\n // Format timestamp for chat\n const formatChatTime = timestamp => {\n const date = new Date(timestamp);\n return date.toLocaleTimeString([], {\n hour: '2-digit',\n minute: '2-digit'\n });\n };\n\n // Calculate remaining cooldown time in seconds\n const getRemainingCooldown = () => {\n if (lastMessageTime === 0) return 0;\n const elapsed = Date.now() - lastMessageTime;\n const remaining = Math.max(0, 10 - Math.floor(elapsed / 1000));\n return remaining;\n };\n\n // Format price with appropriate decimals\n const formatPrice = price => {\n if (price < 0.00001) return price.toExponential(2);\n if (price < 0.001) return price.toFixed(6);\n if (price < 1) return price.toFixed(4);\n return price.toFixed(2);\n };\n\n // Function to calculate time remaining for countdown\n const getTimeRemaining = () => {\n // Default values for countdown (not currently used in UI)\n return {\n days: 0,\n hours: 0,\n minutes: 0,\n seconds: 0,\n total: 0\n };\n };\n\n // Get time remaining for countdown\n const timeRemaining = getTimeRemaining();\n\n // Game functions\n const createGameRoom = async gameType => {\n if (!username) {\n alert('Please set a username first!');\n return;\n }\n try {\n const roomId = `${gameType}_${Date.now()}`;\n const newRoom = {\n id: roomId,\n game: gameType,\n creator: username,\n createdAt: new Date().toISOString(),\n status: 'waiting',\n player1: username,\n player2: null\n };\n\n // Save to state API\n await stateClient.createEntity('game_rooms', newRoom);\n\n // Update local state\n setGameRooms(prev => [newRoom, ...prev]);\n setCurrentRoom(newRoom);\n setIsWaiting(true);\n setGameView('room');\n\n // Notify other users\n socket.emit('create_game_room', newRoom);\n\n // Reset game state\n setPlayerScore(0);\n setOpponentScore(0);\n setIsGameOver(false);\n setWinner(null);\n setGameMessages([]);\n } catch (error) {\n console.error(\"Error creating game room:\", error);\n alert('Failed to create game room. Please try again.');\n }\n };\n const joinGameRoom = async roomId => {\n if (!username) {\n alert('Please set a username first!');\n return;\n }\n try {\n // Find the room\n const room = gameRooms.find(r => r.id === roomId);\n if (!room) {\n alert('Game room not found!');\n return;\n }\n\n // Check if room is full\n if (room.player2) {\n alert('This game room is already full!');\n return;\n }\n\n // Check if trying to join own room\n if (room.player1 === username) {\n setCurrentRoom(room);\n setIsWaiting(true);\n setGameView('room');\n return;\n }\n\n // Update room with player2\n const updatedRoom = {\n ...room,\n player2: username,\n status: 'playing'\n };\n\n // Save to state API\n await stateClient.updateEntity('game_rooms', roomId, updatedRoom);\n\n // Update local state\n setGameRooms(prev => prev.map(r => r.id === roomId ? updatedRoom : r));\n setCurrentRoom(updatedRoom);\n setGameView('game');\n\n // Notify other users\n socket.emit('join_game_room', {\n roomId,\n player2: username\n });\n\n // Reset game state\n setPlayerScore(0);\n setOpponentScore(0);\n setIsGameOver(false);\n setWinner(null);\n setGameMessages([]);\n } catch (error) {\n console.error(\"Error joining game room:\", error);\n alert('Failed to join game room. Please try again.');\n }\n };\n const leaveGameRoom = async () => {\n if (!currentRoom) return;\n try {\n // If player is creator and no one joined yet, delete the room\n if (currentRoom.player1 === username && !currentRoom.player2) {\n await stateClient.deleteEntity('game_rooms', currentRoom.id);\n setGameRooms(prev => prev.filter(r => r.id !== currentRoom.id));\n }\n // If player is creator and someone joined, make player2 the new creator\n else if (currentRoom.player1 === username && currentRoom.player2) {\n const updatedRoom = {\n ...currentRoom,\n player1: currentRoom.player2,\n player2: null,\n status: 'waiting'\n };\n await stateClient.updateEntity('game_rooms', currentRoom.id, updatedRoom);\n setGameRooms(prev => prev.map(r => r.id === currentRoom.id ? updatedRoom : r));\n }\n // If player is player2, just leave\n else if (currentRoom.player2 === username) {\n const updatedRoom = {\n ...currentRoom,\n player2: null,\n status: 'waiting'\n };\n await stateClient.updateEntity('game_rooms', currentRoom.id, updatedRoom);\n setGameRooms(prev => prev.map(r => r.id === currentRoom.id ? updatedRoom : r));\n }\n\n // Notify other users\n socket.emit('leave_game_room', {\n roomId: currentRoom.id,\n player: username\n });\n\n // Reset game state\n setCurrentRoom(null);\n setIsWaiting(false);\n setGameView('selection');\n setPlayerScore(0);\n setOpponentScore(0);\n setIsGameOver(false);\n setWinner(null);\n\n // Clear game loop if it exists\n if (gameLoopRef.current) {\n cancelAnimationFrame(gameLoopRef.current);\n gameLoopRef.current = null;\n }\n } catch (error) {\n console.error(\"Error leaving game room:\", error);\n }\n };\n const sendGameMessage = async e => {\n e.preventDefault();\n if (!gameMessageInput.trim() || !currentRoom) return;\n\n // Check if username contains \"dev\" or is \"DEV\"\n if (username.toLowerCase().includes('dev') || username === \"DEV\") {\n setUsernameError('Username cannot contain \"dev\"');\n return;\n }\n\n // Censor the message\n const censoredMessage = censorMessage(gameMessageInput);\n\n // Create message object\n const messageObj = {\n id: Date.now().toString(),\n roomId: currentRoom.id,\n sender: username,\n content: censoredMessage,\n timestamp: new Date().toISOString()\n };\n try {\n // Save message to persistent storage\n await stateClient.createEntity('game_messages', messageObj);\n\n // Add to local state\n setGameMessages(prev => [...prev, messageObj]);\n\n // Send to all users in the room via socket\n socket.emit('game_message', messageObj);\n\n // Clear input\n setGameMessageInput('');\n } catch (error) {\n console.error(\"Error sending game message:\", error);\n }\n };\n const updateGameScore = async (player, newScore) => {\n if (!currentRoom) return;\n try {\n // Update local state\n if (player === 'player1') {\n setPlayerScore(newScore);\n } else {\n setOpponentScore(newScore);\n }\n\n // Send to all users in the room via socket\n socket.emit('update_game_score', {\n roomId: currentRoom.id,\n player,\n score: newScore\n });\n } catch (error) {\n console.error(\"Error updating game score:\", error);\n }\n };\n const endGame = async winnerName => {\n if (!currentRoom) return;\n try {\n // Update room status\n const updatedRoom = {\n ...currentRoom,\n status: 'completed',\n winner: winnerName\n };\n\n // Save to state API\n await stateClient.updateEntity('game_rooms', currentRoom.id, updatedRoom);\n\n // Update local state\n setGameRooms(prev => prev.map(r => r.id === currentRoom.id ? updatedRoom : r));\n setIsGameOver(true);\n setWinner(winnerName);\n\n // Update leaderboard\n const leaderboardEntry = {\n id: `${currentRoom.id}_${winnerName}`,\n game: currentRoom.game,\n player: winnerName,\n score: winnerName === currentRoom.player1 ? playerScore : opponentScore,\n opponent: winnerName === currentRoom.player1 ? currentRoom.player2 : currentRoom.player1,\n timestamp: new Date().toISOString()\n };\n await stateClient.createEntity('game_leaderboard', leaderboardEntry);\n\n // Notify other users\n socket.emit('end_game', {\n roomId: currentRoom.id,\n winner: winnerName\n });\n\n // Clear game loop if it exists\n if (gameLoopRef.current) {\n cancelAnimationFrame(gameLoopRef.current);\n gameLoopRef.current = null;\n }\n } catch (error) {\n console.error(\"Error ending game:\", error);\n }\n };\n\n // Initialize Pong game\n const initPongGame = () => {\n if (!gameCanvasRef.current || !currentRoom) return;\n const canvas = gameCanvasRef.current;\n const ctx = canvas.getContext('2d');\n\n // Set canvas dimensions - bigger game area\n canvas.width = 800;\n canvas.height = 500;\n\n // Game objects\n const ball = {\n x: canvas.width / 2,\n y: canvas.height / 2,\n radius: 6,\n // Smaller ball for more reaction time\n speedX: 5,\n speedY: 5\n };\n const paddleHeight = 80;\n const paddleWidth = 10;\n const leftPaddle = {\n x: 10,\n y: canvas.height / 2 - paddleHeight / 2,\n width: paddleWidth,\n height: paddleHeight,\n speed: 8,\n score: 0\n };\n const rightPaddle = {\n x: canvas.width - paddleWidth - 10,\n y: canvas.height / 2 - paddleHeight / 2,\n width: paddleWidth,\n height: paddleHeight,\n speed: 8,\n score: 0\n };\n\n // Keyboard controls\n const keys = {\n ArrowUp: false,\n ArrowDown: false\n };\n const keyDownHandler = e => {\n if (e.key === 'ArrowUp' || e.key === 'ArrowDown') {\n keys[e.key] = true;\n }\n };\n const keyUpHandler = e => {\n if (e.key === 'ArrowUp' || e.key === 'ArrowDown') {\n keys[e.key] = false;\n }\n };\n window.addEventListener('keydown', keyDownHandler);\n window.addEventListener('keyup', keyUpHandler);\n\n // Game loop\n const gameLoop = () => {\n // Clear canvas\n ctx.fillStyle = '#222';\n ctx.fillRect(0, 0, canvas.width, canvas.height);\n\n // Draw center line\n ctx.beginPath();\n ctx.setLineDash([5, 15]);\n ctx.moveTo(canvas.width / 2, 0);\n ctx.lineTo(canvas.width / 2, canvas.height);\n ctx.strokeStyle = '#444';\n ctx.stroke();\n ctx.setLineDash([]);\n\n // Draw scores\n ctx.font = '32px Arial';\n ctx.fillStyle = '#A100FF';\n ctx.textAlign = 'center';\n ctx.fillText(leftPaddle.score.toString(), canvas.width / 4, 50);\n ctx.fillStyle = '#00FF66';\n ctx.fillText(rightPaddle.score.toString(), 3 * canvas.width / 4, 50);\n\n // Move paddles\n if (currentRoom.player1 === username) {\n if (keys.ArrowUp && leftPaddle.y > 0) {\n leftPaddle.y -= leftPaddle.speed;\n }\n if (keys.ArrowDown && leftPaddle.y < canvas.height - leftPaddle.height) {\n leftPaddle.y += leftPaddle.speed;\n }\n\n // Send paddle position to opponent\n socket.emit('update_paddle', {\n roomId: currentRoom.id,\n position: leftPaddle.y\n });\n } else if (currentRoom.player2 === username) {\n if (keys.ArrowUp && rightPaddle.y > 0) {\n rightPaddle.y -= rightPaddle.speed;\n }\n if (keys.ArrowDown && rightPaddle.y < canvas.height - rightPaddle.height) {\n rightPaddle.y += rightPaddle.speed;\n }\n\n // Send paddle position to opponent\n socket.emit('update_paddle', {\n roomId: currentRoom.id,\n position: rightPaddle.y\n });\n }\n\n // Move ball\n ball.x += ball.speedX;\n ball.y += ball.speedY;\n\n // Ball collision with top and bottom walls\n if (ball.y - ball.radius < 0 || ball.y + ball.radius > canvas.height) {\n ball.speedY = -ball.speedY;\n }\n\n // Ball collision with paddles\n if (ball.x - ball.radius < leftPaddle.x + leftPaddle.width && ball.y > leftPaddle.y && ball.y < leftPaddle.y + leftPaddle.height) {\n ball.speedX = -ball.speedX;\n ball.x = leftPaddle.x + leftPaddle.width + ball.radius;\n }\n if (ball.x + ball.radius > rightPaddle.x && ball.y > rightPaddle.y && ball.y < rightPaddle.y + rightPaddle.height) {\n ball.speedX = -ball.speedX;\n ball.x = rightPaddle.x - ball.radius;\n }\n\n // Ball out of bounds\n if (ball.x < 0) {\n // Right player scores\n rightPaddle.score++;\n updateGameScore('player2', rightPaddle.score);\n resetBall();\n\n // Check for game over\n if (rightPaddle.score >= 10) {\n endGame(currentRoom.player2);\n return;\n }\n } else if (ball.x > canvas.width) {\n // Left player scores\n leftPaddle.score++;\n updateGameScore('player1', leftPaddle.score);\n resetBall();\n\n // Check for game over\n if (leftPaddle.score >= 10) {\n endGame(currentRoom.player1);\n return;\n }\n }\n\n // Draw ball\n ctx.beginPath();\n ctx.arc(ball.x, ball.y, ball.radius, 0, Math.PI * 2);\n ctx.fillStyle = '#FFF';\n ctx.fill();\n ctx.closePath();\n\n // Draw paddles\n ctx.fillStyle = '#A100FF';\n ctx.fillRect(leftPaddle.x, leftPaddle.y, leftPaddle.width, leftPaddle.height);\n ctx.fillStyle = '#00FF66';\n ctx.fillRect(rightPaddle.x, rightPaddle.y, rightPaddle.width, rightPaddle.height);\n\n // Continue game loop\n if (!isGameOver) {\n gameLoopRef.current = requestAnimationFrame(gameLoop);\n }\n };\n\n // Reset ball to center\n const resetBall = () => {\n ball.x = canvas.width / 2;\n ball.y = canvas.height / 2;\n ball.speedX = -ball.speedX;\n ball.speedY = Math.random() > 0.5 ? 5 : -5;\n };\n\n // Start game loop\n gameLoopRef.current = requestAnimationFrame(gameLoop);\n\n // Cleanup function\n return () => {\n window.removeEventListener('keydown', keyDownHandler);\n window.removeEventListener('keyup', keyUpHandler);\n if (gameLoopRef.current) {\n cancelAnimationFrame(gameLoopRef.current);\n }\n };\n };\n\n // Initialize Snake game\n const initSnakeGame = () => {\n if (!gameCanvasRef.current || !currentRoom) return;\n const canvas = gameCanvasRef.current;\n const ctx = canvas.getContext('2d');\n\n // Set canvas dimensions\n canvas.width = 600;\n canvas.height = 400;\n const gridSize = 20;\n const gridWidth = canvas.width / gridSize;\n const gridHeight = canvas.height / gridSize;\n\n // Game objects\n let snake = [{\n x: 5,\n y: 5\n }];\n let food = {\n x: Math.floor(Math.random() * gridWidth),\n y: Math.floor(Math.random() * gridHeight)\n };\n let direction = 'right';\n let score = 0;\n let gameSpeed = 150; // ms\n let lastUpdateTime = 0;\n\n // Keyboard controls\n const keyDownHandler = e => {\n switch (e.key) {\n case 'ArrowUp':\n if (direction !== 'down') direction = 'up';\n break;\n case 'ArrowDown':\n if (direction !== 'up') direction = 'down';\n break;\n case 'ArrowLeft':\n if (direction !== 'right') direction = 'left';\n break;\n case 'ArrowRight':\n if (direction !== 'left') direction = 'right';\n break;\n }\n };\n window.addEventListener('keydown', keyDownHandler);\n\n // Game loop\n const gameLoop = timestamp => {\n if (!lastUpdateTime) lastUpdateTime = timestamp;\n const elapsed = timestamp - lastUpdateTime;\n if (elapsed > gameSpeed) {\n lastUpdateTime = timestamp;\n\n // Clear canvas\n ctx.fillStyle = '#222';\n ctx.fillRect(0, 0, canvas.width, canvas.height);\n\n // Move snake\n let newHead = {\n x: snake[0].x,\n y: snake[0].y\n };\n switch (direction) {\n case 'up':\n newHead.y--;\n break;\n case 'down':\n newHead.y++;\n break;\n case 'left':\n newHead.x--;\n break;\n case 'right':\n newHead.x++;\n break;\n }\n\n // Check for collisions\n if (newHead.x < 0 || newHead.x >= gridWidth || newHead.y < 0 || newHead.y >= gridHeight || snake.some(segment => segment.x === newHead.x && segment.y === newHead.y)) {\n // Game over\n updateGameScore('player1', score);\n endGame(currentRoom.player1);\n return;\n }\n\n // Check if snake eats food\n if (newHead.x === food.x && newHead.y === food.y) {\n // Increase score\n score++;\n updateGameScore('player1', score);\n\n // Generate new food\n food = {\n x: Math.floor(Math.random() * gridWidth),\n y: Math.floor(Math.random() * gridHeight)\n };\n\n // Increase speed\n if (gameSpeed > 50) {\n gameSpeed -= 5;\n }\n } else {\n // Remove tail\n snake.pop();\n }\n\n // Add new head\n snake.unshift(newHead);\n\n // Draw food\n ctx.fillStyle = '#A100FF';\n ctx.fillRect(food.x * gridSize, food.y * gridSize, gridSize, gridSize);\n\n // Draw snake\n ctx.fillStyle = '#00FF66';\n snake.forEach(segment => {\n ctx.fillRect(segment.x * gridSize, segment.y * gridSize, gridSize, gridSize);\n });\n\n // Draw score\n ctx.font = '24px Arial';\n ctx.fillStyle = '#FFF';\n ctx.textAlign = 'left';\n ctx.fillText(`Score: ${score}`, 10, 30);\n }\n\n // Continue game loop\n if (!isGameOver) {\n gameLoopRef.current = requestAnimationFrame(gameLoop);\n }\n };\n\n // Start game loop\n gameLoopRef.current = requestAnimationFrame(gameLoop);\n\n // Cleanup function\n return () => {\n window.removeEventListener('keydown', keyDownHandler);\n if (gameLoopRef.current) {\n cancelAnimationFrame(gameLoopRef.current);\n }\n };\n };\n\n // Initialize Tetris game\n const initTetrisGame = () => {\n if (!gameCanvasRef.current || !currentRoom) return;\n const canvas = gameCanvasRef.current;\n const ctx = canvas.getContext('2d');\n\n // Set canvas dimensions\n canvas.width = 300;\n canvas.height = 600;\n const blockSize = 30;\n const boardWidth = canvas.width / blockSize;\n const boardHeight = canvas.height / blockSize;\n\n // Create game board\n let board = Array.from({\n length: boardHeight\n }, () => Array(boardWidth).fill(0));\n\n // Tetromino shapes\n const shapes = [[[1, 1, 1, 1]],\n // I\n [[1, 1], [1, 1]],\n // O\n [[0, 1, 0], [1, 1, 1]],\n // T\n [[1, 0], [1, 0], [1, 1]],\n // L\n [[0, 1], [0, 1], [1, 1]],\n // J\n [[1, 1, 0], [0, 1, 1]],\n // Z\n [[0, 1, 1], [1, 1, 0]] // S\n ];\n\n // Colors for each shape\n const colors = ['#00FFFF',\n // Cyan\n '#FFFF00',\n // Yellow\n '#800080',\n // Purple\n '#FFA500',\n // Orange\n '#0000FF',\n // Blue\n '#FF0000',\n // Red\n '#00FF00' // Green\n ];\n let currentShape = null;\n let currentColor = '';\n let currentX = 0;\n let currentY = 0;\n let score = 0;\n let gameSpeed = 500; // ms\n let lastUpdateTime = 0;\n\n // Generate random shape\n const getRandomShape = () => {\n const randomIndex = Math.floor(Math.random() * shapes.length);\n return {\n shape: shapes[randomIndex],\n color: colors[randomIndex]\n };\n };\n\n // Initialize new tetromino\n const newTetromino = () => {\n const {\n shape,\n color\n } = getRandomShape();\n currentShape = shape;\n currentColor = color;\n currentX = Math.floor(boardWidth / 2) - Math.floor(currentShape[0].length / 2);\n currentY = 0;\n\n // Check if game over\n if (isCollision()) {\n updateGameScore('player1', score);\n endGame(currentRoom.player1);\n return false;\n }\n return true;\n };\n\n // Check for collision\n const isCollision = () => {\n for (let y = 0; y < currentShape.length; y++) {\n for (let x = 0; x < currentShape[y].length; x++) {\n if (currentShape[y][x]) {\n const boardX = currentX + x;\n const boardY = currentY + y;\n if (boardX < 0 || boardX >= boardWidth || boardY >= boardHeight || boardY >= 0 && board[boardY][boardX]) {\n return true;\n }\n }\n }\n }\n return false;\n };\n\n // Merge tetromino with board\n const mergeTetromino = () => {\n for (let y = 0; y < currentShape.length; y++) {\n for (let x = 0; x < currentShape[y].length; x++) {\n if (currentShape[y][x]) {\n const boardY = currentY + y;\n const boardX = currentX + x;\n if (boardY >= 0) {\n board[boardY][boardX] = currentColor;\n }\n }\n }\n }\n };\n\n // Clear completed rows\n const clearRows = () => {\n let rowsCleared = 0;\n for (let y = boardHeight - 1; y >= 0; y--) {\n if (board[y].every(cell => cell !== 0)) {\n // Clear row\n board.splice(y, 1);\n board.unshift(Array(boardWidth).fill(0));\n rowsCleared++;\n y++; // Check the same row again\n }\n }\n if (rowsCleared > 0) {\n // Update score\n const points = [0, 40, 100, 300, 1200][rowsCleared];\n score += points;\n updateGameScore('player1', score);\n\n // Increase speed\n if (gameSpeed > 100) {\n gameSpeed -= 20;\n }\n }\n };\n\n // Rotate tetromino\n const rotateTetromino = () => {\n const rotated = [];\n for (let x = 0; x < currentShape[0].length; x++) {\n const row = [];\n for (let y = currentShape.length - 1; y >= 0; y--) {\n row.push(currentShape[y][x]);\n }\n rotated.push(row);\n }\n const originalShape = currentShape;\n currentShape = rotated;\n if (isCollision()) {\n currentShape = originalShape;\n }\n };\n\n // Keyboard controls\n const keyDownHandler = e => {\n switch (e.key) {\n case 'ArrowLeft':\n currentX--;\n if (isCollision()) currentX++;\n break;\n case 'ArrowRight':\n currentX++;\n if (isCollision()) currentX--;\n break;\n case 'ArrowDown':\n currentY++;\n if (isCollision()) {\n currentY--;\n mergeTetromino();\n clearRows();\n if (!newTetromino()) return;\n }\n break;\n case 'ArrowUp':\n rotateTetromino();\n break;\n }\n };\n window.addEventListener('keydown', keyDownHandler);\n\n // Start with a new tetromino\n newTetromino();\n\n // Game loop\n const gameLoop = timestamp => {\n if (!lastUpdateTime) lastUpdateTime = timestamp;\n const elapsed = timestamp - lastUpdateTime;\n if (elapsed > gameSpeed) {\n lastUpdateTime = timestamp;\n\n // Move tetromino down\n currentY++;\n if (isCollision()) {\n currentY--;\n mergeTetromino();\n clearRows();\n if (!newTetromino()) return;\n }\n }\n\n // Clear canvas\n ctx.fillStyle = '#222';\n ctx.fillRect(0, 0, canvas.width, canvas.height);\n\n // Draw board\n for (let y = 0; y < boardHeight; y++) {\n for (let x = 0; x < boardWidth; x++) {\n if (board[y][x]) {\n ctx.fillStyle = board[y][x];\n ctx.fillRect(x * blockSize, y * blockSize, blockSize, blockSize);\n ctx.strokeStyle = '#222';\n ctx.strokeRect(x * blockSize, y * blockSize, blockSize, blockSize);\n }\n }\n }\n\n // Draw current tetromino\n ctx.fillStyle = currentColor;\n for (let y = 0; y < currentShape.length; y++) {\n for (let x = 0; x < currentShape[y].length; x++) {\n if (currentShape[y][x]) {\n ctx.fillRect((currentX + x) * blockSize, (currentY + y) * blockSize, blockSize, blockSize);\n ctx.strokeStyle = '#222';\n ctx.strokeRect((currentX + x) * blockSize, (currentY + y) * blockSize, blockSize, blockSize);\n }\n }\n }\n\n // Draw score\n ctx.font = '20px Arial';\n ctx.fillStyle = '#FFF';\n ctx.textAlign = 'left';\n ctx.fillText(`Score: ${score}`, 10, 25);\n\n // Continue game loop\n if (!isGameOver) {\n gameLoopRef.current = requestAnimationFrame(gameLoop);\n }\n };\n\n // Start game loop\n gameLoopRef.current = requestAnimationFrame(gameLoop);\n\n // Cleanup function\n return () => {\n window.removeEventListener('keydown', keyDownHandler);\n if (gameLoopRef.current) {\n cancelAnimationFrame(gameLoopRef.current);\n }\n };\n };\n\n // Initialize game based on type\n useEffect(() => {\n if (gameView === 'game' && currentRoom && gameCanvasRef.current) {\n // Clear any existing game loop\n if (gameLoopRef.current) {\n cancelAnimationFrame(gameLoopRef.current);\n gameLoopRef.current = null;\n }\n\n // Initialize the appropriate game\n switch (currentRoom.game) {\n case 'pong':\n initPongGame();\n break;\n case 'snake':\n initSnakeGame();\n break;\n case 'tetris':\n initTetrisGame();\n break;\n default:\n break;\n }\n }\n return () => {\n // Cleanup game loop on unmount\n if (gameLoopRef.current) {\n cancelAnimationFrame(gameLoopRef.current);\n gameLoopRef.current = null;\n }\n };\n }, [gameView, currentRoom]);\n return

\n {/* Update Banner */}\n {showUpdateBanner &&

\n \n

\n Dev is continually fixing bugs and adding updates in real time. Soon, more functionality will be incorporated into MEMEPUMP, including the ability to launch tokens directly from the app!\n

\n \n

}\n \n {/* Header */}\n

\n MEME\n PUMP\n \n

\n Conjure the next viral crypto sensation with a click! Generate hilariously convincing meme coins that'll make VCs weep tears of FOMO.\n

\n \n {/* View Toggle */}\n

\n \n \n \n \n \n

\n \n {view === 'memegame' ?\n // MEMEGAME View\n

\n \n \n

\n MEMEGAME Arcade\n

\n \n {gameView === 'selection' ?\n // Game Selection View\n

\n {/* Game Selection Cards */}\n

{\n setSelectedGame('pong');\n createGameRoom('pong');\n }} className=\"bg-[#222222] rounded-xl p-6 shadow-lg border border-gray-800 hover:border-[#A100FF] transition-all cursor-pointer hover:shadow-[0_0_15px_rgba(161,0,255,0.3)]\">\n

\n \n

Pong

The classic paddle game. First to 10 points wins!

\n \n

{\n setSelectedGame('snake');\n createGameRoom('snake');\n }} className=\"bg-[#222222] rounded-xl p-6 shadow-lg border border-gray-800 hover:border-[#00FF66] transition-all cursor-pointer hover:shadow-[0_0_15px_rgba(0,255,102,0.3)]\">\n

\n \n

Snake

Eat food, grow longer, don't hit the walls or yourself!

\n \n

{\n setSelectedGame('tetris');\n createGameRoom('tetris');\n }} className=\"bg-[#222222] rounded-xl p-6 shadow-lg border border-gray-800 hover:border-[#FF6B00] transition-all cursor-pointer hover:shadow-[0_0_15px_rgba(255,107,0,0.3)]\">\n

\n \n

Tetris

Stack blocks, clear lines, and rack up points!

\n \n

\n \n {/* Game Rooms */}\n

\n Active Game Rooms\n

\n \n {isLoadingGames ?

: gameRooms.filter(room => room.status === 'waiting').length === 0 ?

\n \n

No active game rooms. Start a new game!

\n {gameRooms.filter(room => room.status === 'waiting').map(room =>

{room.game.charAt(0).toUpperCase() + room.game.slice(1)}

Created by {room.creator}

\n \n

)}\n

}\n

\n \n {/* Leaderboard */}\n

\n Leaderboard\n

\n \n

\n {/* Pong Leaderboard */}\n

Pong Champions

\n {gameLeaderboard.pong && gameLeaderboard.pong.length > 0 ?

\n {gameLeaderboard.pong.slice(0, 5).map((entry, index) =>

\n {index + 1}.\n {entry.player}\n

\n {entry.score} pts\n

)}\n

No champions yet

}\n

\n \n {/* Snake Leaderboard */}\n

Snake Masters

\n {gameLeaderboard.snake && gameLeaderboard.snake.length > 0 ?

\n {gameLeaderboard.snake.slice(0, 5).map((entry, index) =>

\n {index + 1}.\n {entry.player}\n

\n {entry.score} pts\n

)}\n

No masters yet

}\n

\n \n {/* Tetris Leaderboard */}\n

Tetris Kings

\n {gameLeaderboard.tetris && gameLeaderboard.tetris.length > 0 ?

\n {gameLeaderboard.tetris.slice(0, 5).map((entry, index) =>

\n {index + 1}.\n {entry.player}\n

\n {entry.score} pts\n

)}\n

No kings yet

}\n

: gameView === 'room' ?\n // Waiting Room View\n

\n {currentRoom.game === 'pong' ? : currentRoom.game === 'snake' ? : }\n

\n \n

\n Waiting for opponent...\n

\n \n

\n Game will start when another player joins\n

\n \n

Game Info

Game:

{currentRoom.game.charAt(0).toUpperCase() + currentRoom.game.slice(1)}

Room ID:

{currentRoom.id}

Created by:

{currentRoom.creator}

\n \n \n

:\n // Active Game View\n

\n {/* Game Canvas */}\n

\n \n {currentRoom.game.charAt(0).toUpperCase() + currentRoom.game.slice(1)} Game\n

\n \n

\n {currentRoom.player1} vs {currentRoom.player2}\n

\n \n

\n \n {/* Score Display */}\n

{playerScore}

{opponentScore}

\n \n {/* Game Canvas */}\n

\n \n {/* Game Over Overlay */}\n {isGameOver &&

\n {winner === username ? 'You Won! 🏆' : 'You Lost! 😢'}\n

\n Final Score: {playerScore} - {opponentScore}\n

\n \n

}\n \n {/* Game Controls Help */}\n

\n {currentRoom.game === 'pong' ?

Use ↑ and ↓ arrow keys to move your paddle

: currentRoom.game === 'snake' ?

Use ↑ ↓ ← → arrow keys to control the snake

Use ↑ to rotate, ← → to move, ↓ to drop faster

}\n

\n \n {/* Game Chat */}\n

\n {/* Chat Header */}\n

\n Game Chat\n

\n \n {/* Chat Messages */}\n

\n {gameMessages.length === 0 ?

\n \n

No messages yet. Start the conversation!

: gameMessages.map(msg =>

\n \n {msg.sender === username ? 'You' : msg.sender}\n \n \n {formatChatTime(msg.timestamp)}\n \n

{msg.content}

)}\n

\n \n {/* Chat Input */}\n \n

}\n

: view === 'generator' ? <>\n {/* Input Section */}\n

\n setCoinInput(e.target.value)} placeholder=\"Describe your meme coin (e.g., 'a space cat coin')\" className=\"flex-1 bg-[#333333] border border-gray-700 rounded-lg px-4 py-3 focus:outline-none focus:ring-2 focus:ring-[#A100FF] placeholder-gray-500\" />\n \n \n

\n \n {showError &&

\n Bruh, give me something to pump! 🤦‍♂️\n

}\n \n

\n \n \n \n \n {generatedCoin && coinInput && }\n

\n \n

\n setExtraMemeEnergy(!extraMemeEnergy)} className=\"mr-2 h-4 w-4 accent-[#A100FF]\" />\n \n \n Extra Meme Energy\n \n

\n \n \n

\n \n {/* MEMEPUMP Code Box */}\n

\n \n

\n 7tpdjoLezL36yneCd5Wj8E5VxT7gp9tsvqiJikJFpump\n

\n \n

\n \n {/* MEMEPUMP Price Display */}\n

\n \n

MEMEPUMP Price

\n {chartData.length > 0 &&

chartData[0].price ? 'text-green-400' : 'text-red-400'} flex items-center`}>\n {chartData[chartData.length - 1].price > chartData[0].price ? : }\n ${chartData[chartData.length - 1].price.toFixed(8)}\n

}\n

\n \n {isLoadingChart ?

: chartData.length > 0 &&

\n 24h Change:\n chartData[0].price ? 'text-green-400' : 'text-red-400'}`}>\n {((chartData[chartData.length - 1].price - chartData[0].price) / chartData[0].price * 100).toFixed(2)}%\n \n

\n 24h High:\n \n ${Math.max(...chartData.map(d => d.price)).toFixed(8)}\n \n

\n 24h Low:\n \n ${Math.min(...chartData.map(d => d.price)).toFixed(8)}\n \n

}\n \n

\n Data from GeckoTerminal • Pool: 8qNUf8jQ6Lz5gsjJjmiHa4k41UW8U4UMAHyKjfpKVeew\n {!isLoadingChart && }\n

\n \n {/* Generated Coin Card */}\n {generatedCoin &&

\n \n \n {generatedCoin.rarity}\n \n

\n \n

\n {/* Logo - Always shows something immediately */}\n

\n {logoUrl && {generatedCoin.name}

{\n // If image fails to load, generate a new placeholder\n console.log(\"Image failed to load, using placeholder\");\n const placeholderLogo = generatePhotoPlaceholder(generatedCoin.name, generatedCoin.ticker);\n setLogoUrl(placeholderLogo);\n }} />}\n {logoLoading &&

}\n

\n \n \n

\n \n {/* Coin Details */}\n

{generatedCoin.name}

\n ${generatedCoin.ticker}\n

\n \n

DESCRIPTION

{generatedCoin.description}

\n \n

\n \n \n \n \n \n \n \n

}\n : view === 'gallery' ?\n // Gallery View\n

\n \n \n

\n Meme Coin Gallery\n

\n \n \n \n {/* Meme Coin Master Section */}\n {getTopCoin() && getTopCoin().votes > 0 &&

\n Meme Coin Master\n

\n {getTopCoin().votes} Votes\n

\n \n

\n {getTopCoin().logoUrl ? {getTopCoin().name}

No Image

}\n \n {/* Crown for top coin */}\n

\n 👑\n

\n \n

{getTopCoin().name}

\n ${getTopCoin().ticker}\n

\n \n

{getTopCoin().description}

\n \n

\n 🏆 Eligible for MEMEPUMP airdrops! 🏆\n

\n \n

\n Created by: {getTopCoin().creator || 'Anonymous'}\n

}\n \n {/* Gallery Grid */}\n {isLoadingCoins ?

: generatedCoins.length === 0 ?

No coins in the gallery yet!

\n \n

\n Showing coins in chronological order with newest at the top\n

\n {[...generatedCoins].sort((a, b) => new Date(b.createdAt) - new Date(a.createdAt)).map(coin =>

\n {/* Coin Logo with enhanced effects */}\n

\n {coin.logoUrl ? {coin.name}

No Image

}\n

\n \n {/* Coin Details */}\n

{coin.name}

\n ${coin.ticker}\n

\n \n {coin.rarity}\n \n

\n \n

{coin.description}

\n \n {/* Voting */}\n

\n \n {coin.votes}\n \n \n \n

\n \n

\n {coin === getTopCoin() && coin.votes > 0 &&

\n Master\n

}\n

\n by {coin.creator || 'Anonymous'} • {new Date(coin.createdAt).toLocaleDateString()}\n

)}\n

}\n

: view === 'chat' ?\n // Chat View\n

\n {/* Chat Header */}\n

\n MEMEPUMP Chat\n

\n Your name:\n

\n {\n const newUsername = e.target.value;\n if (newUsername.toLowerCase().includes('dev') || newUsername === \"DEV\") {\n setUsernameError('Username cannot contain \"dev\"');\n } else {\n setUsernameError('');\n }\n setUsername(newUsername);\n }} className={`bg-[#333333] border ${usernameError ? 'border-red-500' : 'border-gray-700'} rounded-lg px-2 py-1 text-sm focus:outline-none focus:ring-1 focus:ring-[#A100FF] max-w-[150px]`} placeholder=\"Username\" />\n {usernameError &&

\n {usernameError}\n

}\n

\n \n {/* Chat Disclaimer */}\n

\n WARNING: Users in the uncensored chat will try to FUD, JEET, and LIE because they are most likely from the country of India. Dev is working on IP banning ALL of India, and will address chat to fix bugs and announce updates as needed. Welcome to the internet and crypto in the 21st century!\n

\n \n {/* Chat Messages */}\n

\n {isLoadingChat ?

: chatMessages.length === 0 ?

\n \n

No messages yet. Start the conversation!

: <>\n

\n Showing all messages. Chat history is saved permanently.\n

\n {chatMessages.map(msg =>

\n \n {msg.sender === username ? 'You' : msg.sender}\n \n \n {formatChatTime(msg.timestamp)}\n \n

{msg.content}

)}\n }\n

\n \n {/* Chat Input */}\n \n

:\n // Token List View\n

\n \n \n

\n PumpFun Token List\n

\n \n {/* Add Token Form */}\n

\n Add Your Token\n

\n \n

\n \n Contract Address (CA)\n \n setTokenCA(e.target.value)} placeholder=\"Paste your PumpFun token contract address...\" className=\"w-full bg-[#333333] border border-gray-700 rounded-lg px-4 py-3 focus:outline-none focus:ring-2 focus:ring-[#00FF66] placeholder-gray-500\" />\n

\n \n

\n \n Comment (optional)\n \n

setTokenComment(e.target.value)} placeholder=\"Tell others about this token...\" className=\"w-full bg-[#333333] border border-gray-700 rounded-lg px-4 py-3 focus:outline-none focus:ring-2 focus:ring-[#00FF66] placeholder-gray-500 min-h-[80px]\" />\n                </div>\n                \n                {tokenError && <div className=\"text-red-400 text-sm\">{tokenError}</div>}\n                \n                <button type=\"submit\" className=\"bg-[#00FF66] hover:bg-[#00D455] text-black font-bold py-3 px-6 rounded-lg flex items-center justify-center transition-all\">\n                  <Coins className=\"mr-2\" /> Add Token to List\n                </button>\n              </form>\n            </div>\n          </div>\n          \n          {/* Top Voted Token - MEME KING */}\n          {getTopToken() && <div className=\"mb-8 bg-gradient-to-r from-[#FFD700] via-[#FFA500] to-[#FF8C00] p-1 rounded-xl animate-pulse\" style={{\n        animationDuration: '3s'\n      }}>\n              <div className=\"bg-[#222222] rounded-lg p-6 relative overflow-hidden\">\n                {/* Crown background effect */}\n                <div className=\"absolute top-0 right-0 w-32 h-32 opacity-10\">\n                  <Crown size={128} className=\"text-yellow-400\" />\n                </div>\n                \n                <div className=\"flex items-center justify-between mb-4\">\n                  <h3 className=\"text-xl font-bold flex items-center\">\n                    <Crown className=\"mr-2 text-yellow-400\" /> MEME KING 👑\n                  </h3>\n                  <div className=\"bg-yellow-400 text-black px-3 py-1 rounded-full text-sm font-bold flex items-center\">\n                    <Trophy size={14} className=\"mr-1\" /> {getTopToken().votes} Votes\n                  </div>\n                </div>\n                \n                <div className=\"flex flex-col gap-4\">\n                  <div className=\"flex items-center justify-between\">\n                    <div className=\"flex items-center flex-1\">\n                      {getTopToken().logoUrl && <div className=\"w-12 h-12 rounded-lg overflow-hidden mr-3 flex-shrink-0 border-2 border-yellow-400 shadow-lg shadow-yellow-400/20\">\n                          <img src={getTopToken().logoUrl} alt=\"Token Logo\" className=\"w-full h-full object-cover\" />\n                        </div>}\n                      <div className=\"font-mono bg-[#333333] px-3 py-2 rounded-lg text-[#00FF66] flex-1 overflow-hidden overflow-ellipsis\">\n                        {getTopToken().contractAddress}\n                      </div>\n                    </div>\n                    <button onClick={() => {\n                navigator.clipboard.writeText(getTopToken().contractAddress);\n                alert('Contract address copied to clipboard! 📋');\n              }} className=\"ml-2 bg-[#A100FF] hover:bg-[#8A00D4] text-white p-2 rounded-lg\">\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                        <rect x=\"9\" y=\"9\" width=\"13\" height=\"13\" rx=\"2\" ry=\"2\"></rect>\n                        <path d=\"M5 15H4a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v1\"></path>\n                      </svg>\n                    </button>\n                  </div>\n                  \n                  {getTopToken().comment && <div className=\"bg-[#2A2A2A] p-4 rounded-lg\">\n                      <p className=\"text-white\">{getTopToken().comment}</p>\n                    </div>}\n                  \n                  <div className=\"flex justify-between items-center text-sm text-gray-400\">\n                    <div>Added by: {getTopToken().creator || 'Anonymous'}</div>\n                    <div>{new Date(getTopToken().createdAt).toLocaleDateString()}</div>\n                  </div>\n                  \n                  <div className=\"text-center text-yellow-400 text-sm mt-2\">\n                    🏆 This token has been crowned MEME KING! 🏆\n                  </div>\n                </div>\n              </div>\n            </div>}\n          \n          {/* Token List */}\n          {isLoadingTokens ? <div className=\"flex justify-center items-center py-20\">\n              <div className=\"animate-spin h-12 w-12 border-4 border-t-[#00FF66] border-r-[#A100FF] border-b-[#00FF66] border-l-[#A100FF] rounded-full\"></div>\n              <p className=\"ml-4 text-gray-400\">Loading tokens...</p>\n            </div> : tokenList.length === 0 ? <div className=\"text-center py-12 bg-[#222222] rounded-xl\">\n              <p className=\"text-gray-400 mb-4\">No tokens have been listed yet!</p>\n              <p className=\"text-gray-400\">Be the first to add a PumpFun token to the list.</p>\n            </div> : <div className=\"space-y-4\">\n              <div className=\"bg-[#222222] rounded-xl overflow-hidden\">\n                <div className=\"p-4 border-b border-gray-800 text-gray-400 text-sm font-bold flex justify-between items-center\">\n                  <div>\n                    <h3 className=\"text-lg\">All Listed Tokens</h3>\n                    <p className=\"text-xs text-gray-500\">Sorted by most votes</p>\n                  </div>\n                  <div className=\"text-xs bg-[#333333] px-3 py-1 rounded-full\">\n                    {tokenList.length} tokens listed\n                  </div>\n                </div>\n                \n                <div className=\"divide-y divide-gray-800\">\n                  {/* Sort by votes */}\n                  {[...tokenList].sort((a, b) => b.votes - a.votes).map((token, index) => <TokenItem key={token.id} token={token} index={index} addTokenComment={addTokenComment} voteCoin={voteCoin} />)}\n            })}\n                </div>\n              </div>\n              \n              <div className=\"text-center text-sm text-gray-500 mt-4\">\n                <p>This is a community-curated list. DYOR before investing in any token.</p>\n              </div>\n            </div>}\n        </div>}\n      \n      {/* Shared Coin Banner - Only shows when viewing a shared coin */}\n      {sharedCoinLoaded && generatedCoin && <div className=\"fixed bottom-4 left-1/2 transform -translate-x-1/2 bg-gradient-to-r from-[#A100FF] to-[#00FF66] p-1 rounded-full z-50 animate-pulse\">\n          <div className=\"bg-black px-4 py-2 rounded-full text-white text-sm flex items-center\">\n            <Share2 size={14} className=\"mr-2\" />\n            Viewing a shared coin! Create your own by clicking \"Generate Coin\"\n          </div>\n        </div>}\n      \n      \n      \n      {/* Footer */}\n      <div className=\"mt-auto pt-8 text-center text-gray-500 text-sm\">\n        <p>Not financial advice. These coins don't actually exist... yet. 👀</p>\n        <p className=\"mt-1\">© 2025 MEMEPUMP • The ultimate meme coin generator</p>\n      </div>\n    </div>;\n}\nexport default App;","packageJson","{\"dependencies\":{\"react\":\"18.2.0\",\"ai\":\"4.0.0\",\"zod\":\"3.22.4\",\"recharts\":\"2.8.0\",\"lucide-react\":\"0.441.0\",\"socket.io-client\":\"4.7.1\",\"@devfunlabs/state-client\":\"0.8.1\"}}","token",{"_18":72,"_73":72,"_74":75,"_76":77,"_78":79,"_80":81,"_82":83,"_84":39,"_85":39,"_64":65},"MEMEPUMP","symbol","price",0.00000318,"marketcap",4345.5149,"image","https://pump.mypinata.cloud/ipfs/QmUB4Z8DEWkDH5mmm8FJpiHQ8uXcphk2YwjEvSkfNVeozH?img-width=256&img-dpr=2","website","https://dev.fun/p/5f6d83e181269bda535c","twitter","https://x.com/MEMEPUMPsol","devCount","appCount","upstreamApp","isLordOfDev","analytics",[90,94,96,98,100,102,104,106,108,110,112,114,116,118,120,122,123,124,125,127],{"_91":92,"_93":56},"day","2025-04-05","runCount",{"_91":95,"_93":56},"2025-04-06",{"_91":97,"_93":56},"2025-04-07",{"_91":99,"_93":56},"2025-04-08",{"_91":101,"_93":56},"2025-04-09",{"_91":103,"_93":56},"2025-04-10",{"_91":105,"_93":56},"2025-04-11",{"_91":107,"_93":56},"2025-04-12",{"_91":109,"_93":56},"2025-04-13",{"_91":111,"_93":56},"2025-04-14",{"_91":113,"_93":56},"2025-04-15",{"_91":115,"_93":56},"2025-04-16",{"_91":117,"_93":56},"2025-04-17",{"_91":119,"_93":56},"2025-04-18",{"_91":92,"_93":121},3,{"_91":95,"_93":39},{"_91":99,"_93":121},{"_91":109,"_93":39},{"_91":111,"_93":126},4,{"_91":115,"_93":39},"snapshot","ogImage","https://cdn.dev.fun/og/image/5f6d83e181269bda535c/cff2180e.webp","commitDetail","actionData","errors"]
</article></body></html>