[{"_1":2,"_128":-5,"_129":-5},"loaderData",{"_3":4,"_10":11},"root",{"_5":-5,"_6":7,"_8":9},"user","appId","cm7twdhs6009l11ml868xhxld","wsEndpoint","https://dev.fun","routes/app.$appId",{"_12":13},"appDetail",{"_14":15,"_16":17,"_18":19,"_20":21,"_22":23,"_24":25,"_26":27,"_28":27,"_29":30,"_32":33,"_34":35,"_36":37,"_38":39,"_40":41,"_42":43,"_44":45,"_5":46,"_58":59,"_60":61,"_62":61,"_63":64,"_65":61,"_66":61,"_67":61,"_68":61,"_69":61,"_70":61,"_71":17,"_72":27,"_73":-5,"_74":75,"_76":77,"_78":79,"_80":-5,"_81":-5,"_82":27,"_83":17,"_84":85,"_118":33,"_119":120,"_121":17,"_122":123},"id","98a95af384a1eed0bcd5","isMyApp",false,"projectId","cmhtyr4gy000x1367yavrx8sh","name","crowdcast","description","Crowdcast is a real-time weather system for Solana’s memecoin market, visualizing token launches, liquidity shifts, and social hype as a dynamic, interactive live map.","brief","Real-time memecoin weather radar—see launches, liquidity, and hype flow like storms across Solana","isLive",true,"isPublic","tags",[31],"👑","cover","https://cdn.dev.fun/snapshot/98a95af384a1eed0bcd5/152009_7ea47846.webp","cdnUrl","https://cdn.dev.fun/app/98a95af384a1eed0bcd5/152009","createdAt",["D",1762829629170],"updatedAt",["D",1763017937608],"lastCommitId",["B","152009"],"tier",1,"credits",-2,{"_14":47,"_48":49,"_50":49,"_51":52,"_53":49,"_54":55,"_56":57},"936e7083-a3b8-4efb-abf1-1eae6d707131","uniqueId","smiley","username","solanaWallet","BsRbJowuJJ7SPxta2wc9AxgRiEzLUrpR8YZReibXSZTE","displayName","bio","","avatar","/avatar.svg","commitCount",86,"forkCount",0,"likeCount","runsCount",13,"downvoteCount","upvoteCount","upvoteRate","commentCount","reportCount","visitorCount","isArchived","isRenamed","contractAddress","code","import { useState, useEffect, useRef } from 'react';\nimport { CloudRain, Wind, Zap, Shield, Droplets, Sun, TrendingUp, ExternalLink, RefreshCw, Filter, Sparkles, Clock, Rocket, DollarSign } from 'lucide-react';\nimport { fetchPumpFunTrends, fetchTokenInfoByAddress } from '@devfunlabs/web-sdk';\nimport { io } from 'socket.io-client';\nconst SOURCES = {\n pumpfun: {\n color: '#00D26A',\n ring: 'dashed',\n glyph: '⚡',\n logo: 'https://cdn.dev.fun/asset/98a95af384a1eed0bcd5/Pump-Fun-Logo_a5c7ff56.png',\n name: 'Pump.fun',\n url: 'https://pump.fun',\n getTokenUrl: mint => `https://pump.fun/${mint}`\n },\n bonkfun: {\n color: '#FF9E2C',\n ring: 'toothed',\n glyph: '🦴',\n logo: 'https://cdn.dev.fun/asset/98a95af384a1eed0bcd5/BonkFun_fa6252c6.png',\n name: 'Bonk.fun',\n url: 'https://bonk.fun',\n getTokenUrl: mint => `https://bonk.fun/token/${mint}`\n },\n jupiter: {\n color: '#00C3FF',\n ring: 'double',\n glyph: '⟂',\n logo: 'https://cdn.dev.fun/asset/98a95af384a1eed0bcd5/jupiter_lfg1712227396228_a3d9499f.png',\n name: 'Jupiter LFG',\n url: 'https://lfg.jup.ag',\n getTokenUrl: mint => `https://lfg.jup.ag/token/${mint}`\n },\n raydium: {\n color: '#9945FF',\n ring: 'hex',\n glyph: '◇',\n logo: 'https://cdn.dev.fun/asset/98a95af384a1eed0bcd5/raydium-ray-logo_1634422a.png',\n name: 'Raydium',\n url: 'https://raydium.io/swap',\n getTokenUrl: mint => `https://dexscreener.com/solana/${mint}`\n },\n orca: {\n color: '#FFD84A',\n ring: 'solid',\n glyph: '●',\n logo: 'https://cdn.dev.fun/asset/98a95af384a1eed0bcd5/orca logo_42e5795d.png',\n name: 'Orca',\n url: 'https://www.orca.so',\n getTokenUrl: mint => `https://dexscreener.com/solana/${mint}`\n },\n meteora: {\n color: '#E63946',\n ring: 'dotted',\n glyph: '✦',\n logo: 'https://cdn.dev.fun/asset/98a95af384a1eed0bcd5/meteora logo_52c812b3.png',\n name: 'Meteora',\n url: 'https://app.meteora.ag/pools',\n getTokenUrl: mint => `https://dexscreener.com/solana/${mint}`\n },\n dexscreener: {\n color: '#FFFFFF',\n ring: 'solid',\n glyph: '📊',\n logo: 'https://cdn.dev.fun/asset/98a95af384a1eed0bcd5/dexscreener logo 2 (2)_c4dc45d3.png',\n name: 'DexScreener',\n url: 'https://dexscreener.com/solana',\n getTokenUrl: mint => `https://dexscreener.com/solana/${mint}`\n }\n};\nconst LAYERS = [{\n id: 'radar',\n name: 'Launch Radar',\n icon: Zap,\n color: '#ffeb3b'\n}, {\n id: 'liquidity',\n name: 'Liquidity Temp',\n icon: Droplets,\n color: '#2196f3'\n}, {\n id: 'wind',\n name: 'Wallet Wind',\n icon: Wind,\n color: '#9c27b0'\n}, {\n id: 'volume',\n name: 'Volume Rain',\n icon: CloudRain,\n color: '#4caf50'\n}, {\n id: 'hype',\n name: 'Hype UV',\n icon: Sun,\n color: '#ff9800'\n}, {\n id: 'safety',\n name: 'Safety Cloud',\n icon: Shield,\n color: '#f44336'\n}];\nconst NEW_LAUNCH_THRESHOLD = 3600000;\nconst FINAL_STRETCH_PCT = 0.95;\nconst calculateMomentum = token => {\n const buyScore = Math.min(100, token.buyers / 10 * 100);\n const volumeScore = Math.min(100, token.volume24h / 500000 * 100);\n const hypeScore = token.hype;\n const walletScore = Math.min(100, token.uniqueWallets / 5 * 100);\n return buyScore * 0.35 + volumeScore * 0.25 + hypeScore * 0.25 + walletScore * 0.15;\n};\nconst getMomentumLevel = momentum => {\n if (momentum >= 75) return 'hot';\n if (momentum >= 50) return 'trending';\n return 'normal';\n};\nconst fetchDexScreenerTokens = async () => {\n try {\n console.log('🔍 Fetching real tokens from DexScreener API...');\n const [trendingResponse, raydiumResponse, orcaResponse] = await Promise.all([fetch('https://api.dexscreener.com/latest/dex/tokens/So11111111111111111111111111111111111111112'), fetch('https://api.dexscreener.com/latest/dex/search/?q=raydium').catch(() => null), fetch('https://api.dexscreener.com/latest/dex/search/?q=orca').catch(() => null)]);\n if (!trendingResponse.ok) {\n console.error(`❌ DexScreener API error: ${trendingResponse.status}`);\n return [];\n }\n const trendingData = await trendingResponse.json();\n let allPairs = trendingData.pairs || [];\n if (raydiumResponse && raydiumResponse.ok) {\n const raydiumData = await raydiumResponse.json();\n if (raydiumData.pairs) {\n allPairs = [...allPairs, ...raydiumData.pairs.slice(0, 20)];\n }\n }\n if (orcaResponse && orcaResponse.ok) {\n const orcaData = await orcaResponse.json();\n if (orcaData.pairs) {\n allPairs = [...allPairs, ...orcaData.pairs.slice(0, 20)];\n }\n }\n if (allPairs.length === 0) {\n console.log('⚠️ No pairs found from DexScreener');\n return [];\n }\n console.log(`📊 DexScreener returned ${allPairs.length} total pairs`);\n const data = {\n pairs: allPairs\n };\n const tokens = data.pairs.filter(pair => {\n if (pair.chainId !== 'solana') return false;\n const isBaseTokenSol = pair.baseToken?.address === 'So11111111111111111111111111111111111111112';\n return !isBaseTokenSol;\n }).slice(0, 100).map(pair => {\n const dexId = pair.dexId?.toLowerCase() || 'unknown';\n const url = pair.url?.toLowerCase() || '';\n let source = 'dexscreener';\n if (dexId.includes('raydium') || url.includes('raydium')) {\n source = 'raydium';\n } else if (dexId.includes('orca') || url.includes('orca')) {\n source = 'orca';\n } else if (dexId.includes('meteora') || url.includes('meteora')) {\n source = 'meteora';\n } else if (dexId.includes('jupiter') || url.includes('jupiter')) {\n source = 'jupiter';\n } else if (pair.labels?.includes('v3') || pair.labels?.includes('concentrated')) {\n source = 'raydium';\n }\n const tokenAddress = pair.baseToken?.address || '';\n const created = pair.pairCreatedAt || Date.now();\n return {\n mint: tokenAddress,\n symbol: pair.baseToken?.symbol || 'UNKNOWN',\n name: pair.baseToken?.name || pair.baseToken?.symbol || 'Unknown',\n image_uri: pair.info?.imageUrl || '',\n created_timestamp: created,\n market_cap: pair.fdv || pair.marketCap || 0,\n liquidity: pair.liquidity?.usd || 0,\n volume24h: pair.volume?.h24 || 0,\n priceChange24h: pair.priceChange?.h24 || 0,\n source: source,\n dexId: pair.dexId || source,\n complete: true\n };\n }).filter(token => {\n if (!token.mint || token.mint.length < 32) return false;\n if (token.symbol === 'UNKNOWN') return false;\n if (token.symbol === 'SOL' || token.symbol === 'WSOL') return false;\n return true;\n });\n console.log(`✅ Fetched ${tokens.length} real tokens from DexScreener`);\n const sourceCount = tokens.reduce((acc, t) => {\n acc[t.source] = (acc[t.source] || 0) + 1;\n return acc;\n }, {});\n console.log('📊 DexScreener source breakdown:', sourceCount);\n if (tokens.length > 0) {\n console.log('📝 Sample tokens:', tokens.slice(0, 3).map(t => ({\n symbol: t.symbol,\n source: t.source,\n mc: t.market_cap\n })));\n }\n return tokens;\n } catch (error) {\n console.error('❌ Error fetching DexScreener tokens:', error.message);\n console.error('Stack:', error.stack);\n return [];\n }\n};\nconst fetchBonkFunTokens = async () => {\n try {\n console.log('🔍 Fetching Bonk.fun featured tokens...');\n const endpoints = ['https://api.bonk.fun/tokens/featured', 'https://bonk.fun/api/tokens/featured', 'https://api.bonk.fun/featured', 'https://bonk.fun/api/featured'];\n for (const endpoint of endpoints) {\n try {\n console.log(`🔍 Trying Bonk.fun API: ${endpoint}`);\n const response = await fetch(endpoint);\n if (response.ok) {\n const data = await response.json();\n console.log(`✅ Success! Got response from ${endpoint}`);\n const tokens = (Array.isArray(data) ? data : data.tokens || data.featured || []).slice(0, 15).map(token => ({\n mint: token.mint || token.address || token.contract_address || '',\n symbol: token.symbol || 'BONK',\n name: token.name || token.symbol || 'Bonk Token',\n image_uri: token.image || token.image_uri || token.logo || '',\n created_timestamp: token.created_timestamp || token.createdAt || Date.now(),\n market_cap: token.market_cap || token.marketCap || token.fdv || 0,\n liquidity: token.liquidity || token.liquidityUsd || 0,\n volume24h: token.volume24h || token.volume || 0,\n priceChange24h: token.priceChange24h || token.priceChange || 0,\n source: 'bonkfun',\n complete: token.complete || false\n })).filter(t => t.mint && t.mint.length >= 32);\n if (tokens.length > 0) {\n console.log(`✅ Found ${tokens.length} featured tokens from Bonk.fun API`);\n return tokens;\n }\n }\n } catch (e) {\n console.log(`⚠️ Failed to fetch from ${endpoint}: ${e.message}`);\n }\n }\n console.log('🔍 Falling back to DexScreener for Bonk.fun tokens...');\n const searches = ['bonk', 'bonkfun', 'bonk.fun'];\n let allBonkTokens = [];\n for (const searchTerm of searches) {\n try {\n const response = await fetch(`https://api.dexscreener.com/latest/dex/search/?q=${searchTerm}`);\n if (response.ok) {\n const data = await response.json();\n const bonkTokens = data.pairs?.filter(pair => {\n if (pair.chainId !== 'solana') return false;\n const hasWebsite = pair.info?.websites?.some(w => w.url?.toLowerCase().includes('bonk.fun') || w.url?.toLowerCase().includes('bonkfun'));\n const hasSocial = pair.info?.socials?.some(s => s.url?.toLowerCase().includes('bonk'));\n const symbolMatch = pair.baseToken?.symbol?.toLowerCase().includes('bonk');\n return hasWebsite || hasSocial || symbolMatch;\n }) || [];\n allBonkTokens = [...allBonkTokens, ...bonkTokens];\n }\n } catch (e) {\n console.log(`⚠️ DexScreener search failed for ${searchTerm}`);\n }\n }\n const uniqueBonkTokens = Array.from(new Map(allBonkTokens.map(pair => [pair.baseToken?.address, pair])).values());\n if (uniqueBonkTokens.length > 0) {\n console.log(`✅ Found ${uniqueBonkTokens.length} Bonk-related tokens from DexScreener`);\n const bonkTokens = uniqueBonkTokens.slice(0, 15).map(pair => ({\n mint: pair.baseToken?.address || '',\n symbol: pair.baseToken?.symbol || 'BONK',\n name: pair.baseToken?.name || 'Bonk Token',\n image_uri: pair.info?.imageUrl || '',\n created_timestamp: pair.pairCreatedAt || Date.now(),\n market_cap: pair.fdv || 0,\n liquidity: pair.liquidity?.usd || 0,\n volume24h: pair.volume?.h24 || 0,\n priceChange24h: pair.priceChange?.h24 || 0,\n source: 'bonkfun',\n complete: true\n })).filter(t => t.mint && t.mint.length >= 32);\n if (bonkTokens.length > 0) {\n console.log(`✅ Returning ${bonkTokens.length} Bonk tokens from DexScreener fallback`);\n return bonkTokens;\n }\n }\n } catch (error) {\n console.error('❌ Error fetching Bonk.fun tokens:', error.message);\n }\n return [];\n};\nconst fetchJupiterTokens = async () => {\n try {\n console.log('🔍 Fetching Jupiter tokens...');\n const searches = ['jupiter', 'jup', 'jupiter lfg'];\n let allJupTokens = [];\n for (const searchTerm of searches) {\n try {\n const response = await fetch(`https://api.dexscreener.com/latest/dex/search/?q=${searchTerm}`);\n if (response.ok) {\n const data = await response.json();\n const jupTokens = data.pairs?.filter(pair => {\n if (pair.chainId !== 'solana') return false;\n const dexIsJupiter = pair.dexId?.toLowerCase().includes('jupiter');\n const hasWebsite = pair.info?.websites?.some(w => w.url?.toLowerCase().includes('jup.ag') || w.url?.toLowerCase().includes('jupiter'));\n return dexIsJupiter || hasWebsite;\n }) || [];\n allJupTokens = [...allJupTokens, ...jupTokens];\n }\n } catch (e) {\n console.log(`⚠️ Search failed for ${searchTerm}`);\n }\n }\n const uniqueJupTokens = Array.from(new Map(allJupTokens.map(pair => [pair.baseToken?.address, pair])).values());\n if (uniqueJupTokens.length > 0) {\n console.log(`✅ Found ${uniqueJupTokens.length} Jupiter-related tokens`);\n const jupTokens = uniqueJupTokens.slice(0, 15).map(pair => ({\n mint: pair.baseToken?.address || '',\n symbol: pair.baseToken?.symbol || 'JUP',\n name: pair.baseToken?.name || 'Jupiter Token',\n image_uri: pair.info?.imageUrl || '',\n created_timestamp: pair.pairCreatedAt || Date.now(),\n market_cap: pair.fdv || 0,\n liquidity: pair.liquidity?.usd || 0,\n volume24h: pair.volume?.h24 || 0,\n priceChange24h: pair.priceChange?.h24 || 0,\n source: 'jupiter',\n complete: true\n })).filter(t => t.mint && t.mint.length >= 32) || [];\n if (jupTokens.length > 0) {\n console.log(`✅ Found ${jupTokens.length} Jupiter tokens`);\n }\n return jupTokens;\n }\n } catch (error) {\n console.error('❌ Error fetching Jupiter tokens:', error.message);\n }\n return [];\n};\nconst fetchDexTokens = async () => {\n try {\n console.log('🔍 Fetching additional DEX tokens (Meteora, etc.)...');\n const meteoraResponse = await fetch('https://api.dexscreener.com/latest/dex/search/?q=meteora');\n if (meteoraResponse.ok) {\n const meteoraData = await meteoraResponse.json();\n const meteoraTokens = meteoraData.pairs?.filter(pair => {\n if (pair.chainId !== 'solana') return false;\n const dexIsMeteora = pair.dexId?.toLowerCase().includes('meteora');\n const hasWebsite = pair.info?.websites?.some(w => w.url?.toLowerCase().includes('meteora'));\n return dexIsMeteora || hasWebsite;\n }).slice(0, 15).map(pair => ({\n mint: pair.baseToken?.address || '',\n symbol: pair.baseToken?.symbol || 'UNKNOWN',\n name: pair.baseToken?.name || pair.baseToken?.symbol || 'Unknown',\n image_uri: pair.info?.imageUrl || '',\n created_timestamp: pair.pairCreatedAt || Date.now(),\n market_cap: pair.fdv || pair.marketCap || 0,\n liquidity: pair.liquidity?.usd || 0,\n volume24h: pair.volume?.h24 || 0,\n priceChange24h: pair.priceChange?.h24 || 0,\n source: 'meteora',\n dexId: pair.dexId || 'meteora',\n complete: true\n })).filter(t => t.mint && t.mint.length >= 32) || [];\n if (meteoraTokens.length > 0) {\n console.log(`✅ Found ${meteoraTokens.length} Meteora tokens`);\n return meteoraTokens;\n }\n }\n } catch (error) {\n console.error('❌ Error fetching additional DEX tokens:', error.message);\n }\n return [];\n};\nconst WEBSOCKET_ENDPOINT = 'wss://ws.dev.fun/app-98a95af384a1eed0bcd5';\nexport default function App() {\n const [tokens, setTokens] = useState([]);\n const [loading, setLoading] = useState(true);\n const socketRef = useRef(null);\n const [activeLayers, setActiveLayers] = useState(['radar', 'liquidity', 'wind']);\n const [activePlatforms, setActivePlatforms] = useState(Object.keys(SOURCES));\n const [showNewLaunches, setShowNewLaunches] = useState(true);\n const [showExisting, setShowExisting] = useState(true);\n const [selectedToken, setSelectedToken] = useState(null);\n const [selectedTokenDetails, setSelectedTokenDetails] = useState(null);\n const [hoveredToken, setHoveredToken] = useState(null);\n const [showPlatformFilter, setShowPlatformFilter] = useState(false);\n const [activeCategories, setActiveCategories] = useState(['trending', 'new', 'migrating']);\n const [activeStatuses, setActiveStatuses] = useState(['new', 'final_stretch', 'migrated']);\n const [activeMomentumLevels, setActiveMomentumLevels] = useState(['hot', 'trending', 'normal']);\n const [showLeaderboard, setShowLeaderboard] = useState(true);\n const [showLegend, setShowLegend] = useState(false);\n const [mousePos, setMousePos] = useState({\n x: 0,\n y: 0\n });\n const [, setLastUpdate] = useState(Date.now());\n const canvasRef = useRef(null);\n const animationRef = useRef(null);\n const particlesRef = useRef([]);\n const orbiterRef = useRef([]);\n const lastTimeRef = useRef(Date.now());\n const refreshIntervalRef = useRef(null);\n const initialLoadDone = useRef(false);\n const logoImagesRef = useRef({});\n const [viewport, setViewport] = useState({\n x: 0,\n y: 0,\n scale: 1\n });\n const [isDragging, setIsDragging] = useState(false);\n const [dragStart, setDragStart] = useState({\n x: 0,\n y: 0\n });\n const [lastViewport, setLastViewport] = useState({\n x: 0,\n y: 0\n });\n const [touchStartDistance, setTouchStartDistance] = useState(null);\n const [lastTouchCenter, setLastTouchCenter] = useState(null);\n const [touchMoved, setTouchMoved] = useState(false);\n const [touchStartPos, setTouchStartPos] = useState(null);\n useEffect(() => {\n const saved = localStorage.getItem('crowdcast-state');\n if (saved) {\n try {\n const state = JSON.parse(saved);\n if (state.activeLayers) setActiveLayers(state.activeLayers);\n if (state.activePlatforms) setActivePlatforms(state.activePlatforms);\n if (state.showNewLaunches !== undefined) setShowNewLaunches(state.showNewLaunches);\n if (state.showExisting !== undefined) setShowExisting(state.showExisting);\n if (state.viewport) setViewport(state.viewport);\n if (state.activeCategories) setActiveCategories(state.activeCategories);\n if (state.activeStatuses) setActiveStatuses(state.activeStatuses);\n if (state.activeMomentumLevels) setActiveMomentumLevels(state.activeMomentumLevels);\n if (state.showLeaderboard !== undefined) setShowLeaderboard(state.showLeaderboard);\n } catch (e) {\n console.error('Failed to load saved state:', e);\n }\n }\n }, []);\n useEffect(() => {\n const state = {\n activeLayers,\n activePlatforms,\n showNewLaunches,\n showExisting,\n viewport,\n activeCategories,\n activeStatuses,\n activeMomentumLevels,\n showLeaderboard\n };\n localStorage.setItem('crowdcast-state', JSON.stringify(state));\n }, [activeLayers, activePlatforms, showNewLaunches, showExisting, viewport, activeCategories, activeStatuses, activeMomentumLevels, showLeaderboard]);\n useEffect(() => {\n Object.entries(SOURCES).forEach(([key, source]) => {\n const img = new Image();\n img.crossOrigin = 'anonymous';\n img.src = source.logo;\n img.onload = () => {\n logoImagesRef.current[key] = img;\n };\n });\n socketRef.current = io(WEBSOCKET_ENDPOINT);\n socketRef.current.on('connect', () => {\n console.log('🔌 WebSocket connected');\n });\n socketRef.current.on('disconnect', () => {\n console.log('🔌 WebSocket disconnected');\n });\n socketRef.current.on('LAUNCHPAD_BONKFUN_PROGRAM', data => {\n console.log('🦴 Bonk.fun launch event:', data);\n handleBonkFunLaunch(data);\n });\n socketRef.current.on('LAUNCHPAD_JUPITER_LFG_PROGRAM', data => {\n console.log('⟂ Jupiter LFG launch event:', data);\n handleJupiterLFGLaunch(data);\n });\n socketRef.current.on('DEX_RAYDIUM_PROGRAM', data => {\n console.log('◇ Raydium pool create:', data);\n handleDexPoolCreate('raydium', data);\n });\n socketRef.current.on('DEX_ORCA_WHIRLPOOLS_PROGRAM', data => {\n console.log('● Orca pool create:', data);\n handleDexPoolCreate('orca', data);\n });\n socketRef.current.on('DEX_METEORA_DLMM_PROGRAM', data => {\n console.log('✦ Meteora pool create:', data);\n handleDexPoolCreate('meteora', data);\n });\n loadTokens(true);\n refreshIntervalRef.current = setInterval(() => {\n loadTokens(false);\n setLastUpdate(Date.now());\n }, 30000);\n return () => {\n if (refreshIntervalRef.current) clearInterval(refreshIntervalRef.current);\n if (socketRef.current) {\n socketRef.current.disconnect();\n }\n };\n }, []);\n const handleBonkFunLaunch = data => {\n const {\n mint,\n symbol,\n name,\n creator,\n timestamp,\n image_uri\n } = data;\n if (!mint) return;\n const newToken = {\n mint,\n symbol: symbol || 'BONK',\n name: name || symbol || 'Bonk Token',\n created_timestamp: timestamp || Date.now(),\n creator: creator || '',\n image_uri: image_uri || '',\n source: 'bonkfun',\n x: Math.random() * 100,\n y: Math.random() * 100,\n market_cap: 0,\n marketcap: 0,\n liquidity: 0,\n volume24h: 0,\n buyers: 0,\n uniqueWallets: 0,\n hype: 50,\n risk: Math.random() * 100,\n age: 0,\n priceChange: 0,\n volatility: 0,\n pulseStart: Date.now(),\n flows: [],\n category: 'new',\n status: 'new',\n bondingPct: 0,\n momentum: 0,\n complete: false\n };\n setTokens(prev => {\n const exists = prev.find(t => t.mint === mint);\n if (exists) return prev;\n console.log(`✅ Added Bonk.fun token: ${symbol || mint}`);\n return [...prev, newToken];\n });\n };\n const handleJupiterLFGLaunch = data => {\n const {\n mint,\n symbol,\n name,\n creator,\n timestamp,\n image_uri\n } = data;\n if (!mint) return;\n const newToken = {\n mint,\n symbol: symbol || 'JUP',\n name: name || symbol || 'Jupiter Token',\n created_timestamp: timestamp || Date.now(),\n creator: creator || '',\n image_uri: image_uri || '',\n source: 'jupiter',\n x: Math.random() * 100,\n y: Math.random() * 100,\n market_cap: 0,\n marketcap: 0,\n liquidity: 0,\n volume24h: 0,\n buyers: 0,\n uniqueWallets: 0,\n hype: 50,\n risk: Math.random() * 100,\n age: 0,\n priceChange: 0,\n volatility: 0,\n pulseStart: Date.now(),\n flows: [],\n category: 'new',\n status: 'new',\n bondingPct: 0,\n momentum: 0,\n complete: false\n };\n setTokens(prev => {\n const exists = prev.find(t => t.mint === mint);\n if (exists) return prev;\n console.log(`✅ Added Jupiter LFG token: ${symbol || mint}`);\n return [...prev, newToken];\n });\n };\n const handleDexPoolCreate = (dexName, data) => {\n const {\n mintA,\n mintB,\n timestamp,\n liquidity\n } = data;\n if (!mintA || !mintB) return;\n const BASE_TOKENS = ['So11111111111111111111111111111111111111112', 'EPjFWdd5AufqSSqeM2qN1xzybapC8G4wEGGkZwyTDt1v', 'Es9vMFrzaCERmJfrF4H2FYD4KCoNkY11McCe8BenwNYB'];\n const memeMint = BASE_TOKENS.includes(mintA) ? mintB : BASE_TOKENS.includes(mintB) ? mintA : mintA;\n setTokens(prev => {\n const tokenIndex = prev.findIndex(t => t.mint === memeMint);\n if (tokenIndex === -1) {\n const newToken = {\n mint: memeMint,\n symbol: 'UNKNOWN',\n name: 'Unknown Token',\n created_timestamp: timestamp || Date.now(),\n source: dexName,\n x: Math.random() * 100,\n y: Math.random() * 100,\n market_cap: 0,\n marketcap: 0,\n liquidity: liquidity || 0,\n volume24h: 0,\n buyers: 0,\n uniqueWallets: 0,\n hype: 30,\n risk: Math.random() * 100,\n age: 0,\n priceChange: 0,\n volatility: 0,\n pulseStart: null,\n flows: [],\n category: 'trending',\n status: 'migrated',\n bondingPct: 1,\n firstPoolAt: timestamp || Date.now(),\n poolDex: dexName,\n momentum: 0,\n complete: true\n };\n console.log(`✅ Added ${dexName} pool token: ${memeMint}`);\n return [...prev, newToken];\n } else {\n const updated = [...prev];\n const token = updated[tokenIndex];\n if (!token.firstPoolAt || timestamp && timestamp < token.firstPoolAt) {\n token.firstPoolAt = timestamp || Date.now();\n token.poolDex = dexName;\n token.status = 'migrated';\n token.bondingPct = 1;\n token.complete = true;\n if (liquidity) token.liquidity = liquidity;\n console.log(`✅ Linked ${dexName} pool to token: ${token.symbol || memeMint}`);\n }\n return updated;\n }\n });\n };\n const loadTokens = async (isInitial = false) => {\n try {\n if (isInitial) setLoading(true);\n console.log('🚀 Starting token fetch cycle...');\n let trending = [];\n try {\n trending = await fetchPumpFunTrends();\n } catch (error) {\n if (error?.response?.status === 429) {\n console.log('⚠️ Rate limited on Pump.fun API - using cached data');\n } else {\n console.error('❌ Error fetching Pump.fun trends:', error.message);\n }\n }\n const [dexScreenerTokensFresh, bonkFunTokensFresh, jupiterTokensFresh, dexTokensFresh] = await Promise.all([fetchDexScreenerTokens(), fetchBonkFunTokens(), fetchJupiterTokens(), fetchDexTokens()]);\n console.log(`📊 Fetch results:`);\n console.log(` - Pump.fun: ${trending.length}`);\n console.log(` - DexScreener: ${dexScreenerTokensFresh.length}`);\n console.log(` - Bonk.fun: ${bonkFunTokensFresh.length}`);\n console.log(` - Jupiter: ${jupiterTokensFresh.length}`);\n console.log(` - Additional DEX: ${dexTokensFresh.length}`);\n if (trending.length === 0 && !isInitial && initialLoadDone.current) {\n console.log('ℹ️ No new Pump.fun data available, keeping existing tokens');\n return;\n }\n if (isInitial || !initialLoadDone.current) {\n console.log('🎬 INITIAL LOAD - processing all tokens...');\n console.log(`📈 Token counts - Pump.fun: ${trending.length}, DexScreener: ${dexScreenerTokensFresh.length}, Bonk.fun: ${bonkFunTokensFresh.length}`);\n if (bonkFunTokensFresh.length === 0) {\n console.log('ℹ️ Note: Bonk.fun tokens will appear via WebSocket events');\n }\n const detailedTokens = await Promise.all(trending.map(async token => {\n try {\n const info = await fetchTokenInfoByAddress(token.mint);\n return {\n ...token,\n marketcap: info?.marketcap || token.market_cap\n };\n } catch {\n return {\n ...token,\n marketcap: token.market_cap\n };\n }\n }));\n const pumpfunTokens = detailedTokens.map((token, idx) => {\n const age = Date.now() - token.created_timestamp;\n const isNew = age < NEW_LAUNCH_THRESHOLD;\n const isMigrating = token.marketcap > 50000 && !token.complete;\n let category = 'trending';\n if (isNew) category = 'new';else if (isMigrating) category = 'migrating';\n const bondingPct = Math.min(0.99, (token.marketcap || 0) / 85000);\n let status = 'new';\n let firstPoolAt = undefined;\n let poolDex = undefined;\n if (token.complete || bondingPct >= 1) {\n status = 'migrated';\n firstPoolAt = token.created_timestamp + Math.random() * 7200000;\n poolDex = 'pumpswap';\n } else if (bondingPct >= FINAL_STRETCH_PCT) {\n status = 'final_stretch';\n }\n return {\n ...token,\n market_cap: token.marketcap,\n x: Math.random() * 100,\n y: Math.random() * 100,\n source: 'pumpfun',\n liquidity: token.marketcap * (0.8 + Math.random() * 0.4),\n volume24h: token.marketcap * (0.3 + Math.random() * 0.5),\n buyers: Math.floor(Math.random() * 1000),\n uniqueWallets: Math.floor(Math.random() * 500),\n hype: Math.random() * 100,\n risk: Math.random() * 100,\n age: age,\n priceChange: (Math.random() - 0.5) * 200,\n volatility: Math.random() * 100,\n pulseStart: isNew ? Date.now() : null,\n flows: [],\n category: category,\n status: status,\n bondingPct: bondingPct,\n firstPoolAt: firstPoolAt,\n poolDex: poolDex,\n momentum: 0\n };\n });\n const dexTokens = dexScreenerTokensFresh.map((token, idx) => {\n const age = Date.now() - token.created_timestamp;\n const isNew = age < NEW_LAUNCH_THRESHOLD;\n return {\n ...token,\n x: Math.random() * 100,\n y: Math.random() * 100,\n buyers: Math.floor((token.volume24h || 0) / 1000),\n uniqueWallets: Math.floor((token.volume24h || 0) / 2000),\n hype: Math.min(100, (token.priceChange24h || 0) > 0 ? (token.priceChange24h || 0) * 2 : 0),\n risk: Math.abs(token.priceChange24h || 0) > 50 ? 80 : 40,\n age: age,\n priceChange: token.priceChange24h || 0,\n volatility: Math.abs(token.priceChange24h || 0),\n pulseStart: isNew ? Date.now() : null,\n flows: [],\n category: 'trending',\n status: 'migrated',\n bondingPct: 1,\n firstPoolAt: token.created_timestamp,\n poolDex: token.dexId || 'raydium',\n momentum: 0\n };\n });\n const bonkTokens = bonkFunTokensFresh.map((token, idx) => {\n const age = Date.now() - token.created_timestamp;\n const isNew = age < NEW_LAUNCH_THRESHOLD;\n const bondingPct = Math.min(0.99, (token.market_cap || 0) / 85000);\n let status = 'new';\n let firstPoolAt = undefined;\n let poolDex = undefined;\n if (token.complete || bondingPct >= 1) {\n status = 'migrated';\n firstPoolAt = token.created_timestamp + Math.random() * 7200000;\n poolDex = 'raydium';\n } else if (bondingPct >= FINAL_STRETCH_PCT) {\n status = 'final_stretch';\n }\n return {\n ...token,\n x: Math.random() * 100,\n y: Math.random() * 100,\n buyers: Math.floor((token.volume24h || 0) / 1000),\n uniqueWallets: Math.floor((token.volume24h || 0) / 2000),\n hype: Math.min(100, (token.priceChange24h || 0) > 0 ? (token.priceChange24h || 0) * 2 : 0),\n risk: Math.random() * 100,\n age: age,\n priceChange: token.priceChange24h || 0,\n volatility: Math.abs(token.priceChange24h || 0),\n pulseStart: isNew ? Date.now() : null,\n flows: [],\n category: isNew ? 'new' : 'trending',\n status: status,\n bondingPct: bondingPct,\n firstPoolAt: firstPoolAt,\n poolDex: poolDex,\n momentum: 0\n };\n });\n const jupiterTokens = jupiterTokensFresh.map((token, idx) => {\n const age = Date.now() - token.created_timestamp;\n const isNew = age < NEW_LAUNCH_THRESHOLD;\n return {\n ...token,\n x: Math.random() * 100,\n y: Math.random() * 100,\n buyers: Math.floor((token.volume24h || 0) / 1000),\n uniqueWallets: Math.floor((token.volume24h || 0) / 2000),\n hype: Math.min(100, (token.priceChange24h || 0) > 0 ? (token.priceChange24h || 0) * 2 : 0),\n risk: Math.random() * 100,\n age: age,\n priceChange: token.priceChange24h || 0,\n volatility: Math.abs(token.priceChange24h || 0),\n pulseStart: isNew ? Date.now() : null,\n flows: [],\n category: isNew ? 'new' : 'trending',\n status: 'migrated',\n bondingPct: 1,\n firstPoolAt: token.created_timestamp,\n poolDex: 'jupiter',\n momentum: 0\n };\n });\n const platformDexTokens = dexTokensFresh.map((token, idx) => {\n const age = Date.now() - token.created_timestamp;\n const isNew = age < NEW_LAUNCH_THRESHOLD;\n return {\n ...token,\n x: Math.random() * 100,\n y: Math.random() * 100,\n buyers: Math.floor((token.volume24h || 0) / 1000),\n uniqueWallets: Math.floor((token.volume24h || 0) / 2000),\n hype: Math.min(100, (token.priceChange24h || 0) > 0 ? (token.priceChange24h || 0) * 2 : 0),\n risk: Math.random() * 100,\n age: age,\n priceChange: token.priceChange24h || 0,\n volatility: Math.abs(token.priceChange24h || 0),\n pulseStart: isNew ? Date.now() : null,\n flows: [],\n category: 'trending',\n status: 'migrated',\n bondingPct: 1,\n firstPoolAt: token.created_timestamp,\n poolDex: token.dexId || token.source,\n momentum: 0\n };\n });\n const allTokens = [...pumpfunTokens, ...dexTokens, ...bonkTokens, ...jupiterTokens, ...platformDexTokens];\n console.log(`\\n✅ TOTAL TOKENS PREPARED: ${allTokens.length}`);\n console.log(`━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━`);\n console.log(` - Pump.fun: ${pumpfunTokens.length}`);\n console.log(` - DexScreener: ${dexTokens.length}`);\n console.log(` - Bonk.fun: ${bonkTokens.length}`);\n console.log(` - Jupiter LFG: ${jupiterTokens.length}`);\n console.log(` - Platform DEX: ${platformDexTokens.length}`);\n console.log(`━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━\\n`);\n const sourceBreakdown = allTokens.reduce((acc, token) => {\n acc[token.source] = (acc[token.source] || 0) + 1;\n return acc;\n }, {});\n console.log('📊 Final source breakdown:', sourceBreakdown);\n const nonPumpfunCount = allTokens.filter(t => t.source !== 'pumpfun').length;\n if (nonPumpfunCount > 0) {\n console.log(`✅ SUCCESS: ${nonPumpfunCount} non-Pumpfun tokens loaded!`);\n } else {\n console.warn(`⚠️ WARNING: No non-Pumpfun tokens found. Check API responses.`);\n }\n allTokens.forEach(token => {\n token.momentum = calculateMomentum(token);\n });\n allTokens.forEach((token, i) => {\n const numFlows = Math.floor(Math.random() * 2);\n for (let j = 0; j < numFlows; j++) {\n const targetIdx = Math.floor(Math.random() * allTokens.length);\n if (targetIdx !== i) {\n token.flows.push({\n to: targetIdx,\n strength: Math.random(),\n fromSource: token.source,\n toSource: allTokens[targetIdx].source\n });\n }\n }\n });\n setTokens(allTokens);\n particlesRef.current = Array.from({\n length: 300\n }, () => ({\n x: Math.random() * 100,\n y: Math.random() * 100,\n vx: (Math.random() - 0.5) * 0.5,\n vy: (Math.random() - 0.5) * 0.5,\n life: Math.random(),\n source: Object.keys(SOURCES)[Math.floor(Math.random() * Object.keys(SOURCES).length)]\n }));\n orbiterRef.current = allTokens.flatMap((token, idx) => {\n const count = Math.min(6, Math.floor(token.buyers / 200));\n return Array.from({\n length: count\n }, (_, i) => ({\n tokenIdx: idx,\n angle: i / count * Math.PI * 2,\n speed: 0.5 + Math.random() * 0.5,\n distance: 15 + Math.random() * 5,\n source: token.source\n }));\n });\n console.log(`✅ Initial load complete with ${allTokens.length} tokens from Pump.fun`);\n initialLoadDone.current = true;\n if (isInitial) setLoading(false);\n } else {\n console.log('🔄 UPDATE CYCLE - merging fresh tokens...');\n console.log(`📈 Fresh token counts - Pump.fun: ${trending.length}, DexScreener: ${dexScreenerTokensFresh.length}, Bonk.fun: ${bonkFunTokensFresh.length}`);\n const detailedTrendingUpdates = await Promise.all(trending.map(async token => {\n try {\n const info = await fetchTokenInfoByAddress(token.mint);\n return {\n ...token,\n marketcap: info?.marketcap || token.market_cap\n };\n } catch {\n return {\n ...token,\n marketcap: token.market_cap\n };\n }\n }));\n setTokens(prevTokens => {\n const existingTokensMap = new Map(prevTokens.map(t => [t.mint, t]));\n const updatedTokensMap = new Map();\n const addOrUpdateToken = (mint, tokenData) => {\n updatedTokensMap.set(mint, tokenData);\n };\n detailedTrendingUpdates.forEach(freshData => {\n const prevToken = existingTokensMap.get(freshData.mint);\n if (prevToken) {\n const age = Date.now() - freshData.created_timestamp;\n const isNew = age < NEW_LAUNCH_THRESHOLD;\n const isMigrating = freshData.market_cap > 50000 && !freshData.complete;\n let category = 'trending';\n if (isNew) category = 'new';else if (isMigrating) category = 'migrating';\n const bondingPct = Math.min(0.99, (freshData.market_cap || 0) / 85000);\n let status = prevToken.status || 'new';\n let firstPoolAt = prevToken.firstPoolAt;\n let poolDex = prevToken.poolDex;\n if (freshData.complete || bondingPct >= 1) {\n if (status !== 'migrated') {\n status = 'migrated';\n firstPoolAt = Date.now();\n poolDex = 'pumpswap';\n }\n } else if (bondingPct >= FINAL_STRETCH_PCT && status === 'new') {\n status = 'final_stretch';\n }\n const realMarketCap = freshData.marketcap || freshData.market_cap;\n addOrUpdateToken(freshData.mint, {\n ...prevToken,\n market_cap: realMarketCap,\n marketcap: realMarketCap,\n liquidity: realMarketCap * (0.8 + Math.random() * 0.4),\n volume24h: realMarketCap * (0.3 + Math.random() * 0.5),\n buyers: Math.floor(Math.random() * 1000),\n uniqueWallets: Math.floor(Math.random() * 500),\n hype: Math.random() * 100,\n risk: Math.random() * 100,\n age: age,\n category: category,\n status: status,\n bondingPct: bondingPct,\n firstPoolAt: firstPoolAt,\n poolDex: poolDex,\n momentum: calculateMomentum({\n ...prevToken,\n market_cap: realMarketCap,\n liquidity: realMarketCap * (0.8 + Math.random() * 0.4),\n volume24h: realMarketCap * (0.3 + Math.random() * 0.5),\n buyers: Math.floor(Math.random() * 1000),\n uniqueWallets: Math.floor(Math.random() * 500),\n hype: Math.random() * 100\n })\n });\n } else {\n const age = Date.now() - freshData.created_timestamp;\n const isNew = age < NEW_LAUNCH_THRESHOLD;\n const isMigrating = freshData.market_cap > 50000 && !freshData.complete;\n let category = 'trending';\n if (isNew) category = 'new';else if (isMigrating) category = 'migrating';\n const bondingPct = Math.min(0.99, (freshData.market_cap || 0) / 85000);\n let status = 'new';\n let firstPoolAt = undefined;\n let poolDex = undefined;\n if (freshData.complete || bondingPct >= 1) {\n status = 'migrated';\n firstPoolAt = freshData.created_timestamp + Math.random() * 7200000;\n poolDex = 'pumpswap';\n } else if (bondingPct >= FINAL_STRETCH_PCT) {\n status = 'final_stretch';\n }\n const realMarketCap = freshData.marketcap || freshData.market_cap;\n const newToken = {\n ...freshData,\n market_cap: realMarketCap,\n marketcap: realMarketCap,\n x: Math.random() * 100,\n y: Math.random() * 100,\n source: 'pumpfun',\n liquidity: realMarketCap * (0.8 + Math.random() * 0.4),\n volume24h: realMarketCap * (0.3 + Math.random() * 0.5),\n buyers: Math.floor(Math.random() * 1000),\n uniqueWallets: Math.floor(Math.random() * 500),\n hype: Math.random() * 100,\n risk: Math.random() * 100,\n age: age,\n priceChange: (Math.random() - 0.5) * 200,\n volatility: Math.random() * 100,\n pulseStart: isNew ? Date.now() : null,\n flows: [],\n category: category,\n status: status,\n bondingPct: bondingPct,\n firstPoolAt: firstPoolAt,\n poolDex: poolDex,\n momentum: 0\n };\n newToken.momentum = calculateMomentum(newToken);\n addOrUpdateToken(freshData.mint, newToken);\n }\n });\n dexScreenerTokensFresh.forEach(freshData => {\n const prevToken = existingTokensMap.get(freshData.mint);\n if (prevToken) {\n const dexMarketCap = freshData.market_cap || 0;\n addOrUpdateToken(freshData.mint, {\n ...prevToken,\n market_cap: dexMarketCap,\n marketcap: dexMarketCap,\n liquidity: freshData.liquidity,\n volume24h: freshData.volume24h,\n buyers: Math.floor((freshData.volume24h || 0) / 1000),\n uniqueWallets: Math.floor((freshData.volume24h || 0) / 2000),\n hype: Math.min(100, (freshData.priceChange24h || 0) > 0 ? (freshData.priceChange24h || 0) * 2 : 0),\n priceChange: freshData.priceChange24h || 0,\n momentum: calculateMomentum({\n ...prevToken,\n market_cap: dexMarketCap,\n volume24h: freshData.volume24h,\n buyers: Math.floor((freshData.volume24h || 0) / 1000),\n uniqueWallets: Math.floor((freshData.volume24h || 0) / 2000),\n hype: Math.min(100, (freshData.priceChange24h || 0) > 0 ? (freshData.priceChange24h || 0) * 2 : 0)\n })\n });\n } else {\n const age = Date.now() - freshData.created_timestamp;\n const isNew = age < NEW_LAUNCH_THRESHOLD;\n const dexId = freshData.dexId || 'dexscreener';\n const mappedSource = dexId.toLowerCase().includes('raydium') ? 'raydium' : dexId.toLowerCase().includes('orca') ? 'orca' : dexId.toLowerCase().includes('meteora') ? 'meteora' : dexId.toLowerCase().includes('jupiter') ? 'jupiter' : freshData.source || 'dexscreener';\n const newToken = {\n ...freshData,\n source: mappedSource,\n x: Math.random() * 100,\n y: Math.random() * 100,\n buyers: Math.floor((freshData.volume24h || 0) / 1000),\n uniqueWallets: Math.floor((freshData.volume24h || 0) / 2000),\n hype: Math.min(100, (freshData.priceChange24h || 0) > 0 ? (freshData.priceChange24h || 0) * 2 : 0),\n risk: Math.abs(freshData.priceChange24h || 0) > 50 ? 80 : 40,\n age: age,\n priceChange: freshData.priceChange24h || 0,\n volatility: Math.abs(freshData.priceChange24h || 0),\n pulseStart: isNew ? Date.now() : null,\n flows: [],\n category: 'trending',\n status: 'migrated',\n bondingPct: 1,\n firstPoolAt: freshData.created_timestamp,\n poolDex: dexId || mappedSource,\n momentum: 0\n };\n newToken.momentum = calculateMomentum(newToken);\n addOrUpdateToken(freshData.mint, newToken);\n }\n });\n bonkFunTokensFresh.forEach(freshData => {\n const prevToken = existingTokensMap.get(freshData.mint);\n if (prevToken) {\n const age = Date.now() - freshData.created_timestamp;\n const bonkMarketCap = freshData.market_cap || 0;\n const bondingPct = Math.min(0.99, bonkMarketCap / 85000);\n let status = prevToken.status || 'new';\n let firstPoolAt = prevToken.firstPoolAt;\n let poolDex = prevToken.poolDex;\n if (freshData.complete || bondingPct >= 1) {\n if (status !== 'migrated') {\n status = 'migrated';\n firstPoolAt = Date.now();\n poolDex = 'raydium';\n }\n } else if (bondingPct >= FINAL_STRETCH_PCT && status === 'new') {\n status = 'final_stretch';\n }\n addOrUpdateToken(freshData.mint, {\n ...prevToken,\n market_cap: bonkMarketCap,\n marketcap: bonkMarketCap,\n liquidity: freshData.liquidity || prevToken.liquidity,\n volume24h: freshData.volume24h || prevToken.volume24h,\n buyers: Math.floor((freshData.volume24h || 0) / 1000),\n uniqueWallets: Math.floor((freshData.volume24h || 0) / 2000),\n hype: Math.min(100, (freshData.priceChange24h || 0) > 0 ? (freshData.priceChange24h || 0) * 2 : 0),\n priceChange: freshData.priceChange24h || 0,\n age: age,\n status: status,\n bondingPct: bondingPct,\n firstPoolAt: firstPoolAt,\n poolDex: poolDex,\n momentum: calculateMomentum({\n ...prevToken,\n market_cap: bonkMarketCap,\n volume24h: freshData.volume24h || prevToken.volume24h,\n buyers: Math.floor((freshData.volume24h || 0) / 1000),\n uniqueWallets: Math.floor((freshData.volume24h || 0) / 2000),\n hype: Math.min(100, (freshData.priceChange24h || 0) > 0 ? (freshData.priceChange24h || 0) * 2 : 0)\n })\n });\n } else {\n const age = Date.now() - freshData.created_timestamp;\n const isNew = age < NEW_LAUNCH_THRESHOLD;\n const bondingPct = Math.min(0.99, (freshData.market_cap || 0) / 85000);\n let status = 'new';\n let firstPoolAt = undefined;\n let poolDex = undefined;\n if (freshData.complete || bondingPct >= 1) {\n status = 'migrated';\n firstPoolAt = freshData.created_timestamp + Math.random() * 7200000;\n poolDex = 'raydium';\n } else if (bondingPct >= FINAL_STRETCH_PCT) {\n status = 'final_stretch';\n }\n const newToken = {\n ...freshData,\n source: 'bonkfun',\n x: Math.random() * 100,\n y: Math.random() * 100,\n buyers: Math.floor((freshData.volume24h || 0) / 1000),\n uniqueWallets: Math.floor((freshData.volume24h || 0) / 2000),\n hype: Math.min(100, (freshData.priceChange24h || 0) > 0 ? (freshData.priceChange24h || 0) * 2 : 0),\n risk: Math.random() * 100,\n age: age,\n priceChange: freshData.priceChange24h || 0,\n volatility: Math.abs(freshData.priceChange24h || 0),\n pulseStart: isNew ? Date.now() : null,\n flows: [],\n category: isNew ? 'new' : 'trending',\n status: status,\n bondingPct: bondingPct,\n firstPoolAt: firstPoolAt,\n poolDex: poolDex,\n momentum: 0\n };\n newToken.momentum = calculateMomentum(newToken);\n addOrUpdateToken(freshData.mint, newToken);\n }\n });\n jupiterTokensFresh.forEach(freshData => {\n const prevToken = existingTokensMap.get(freshData.mint);\n if (prevToken) {\n const jupMarketCap = freshData.market_cap || 0;\n addOrUpdateToken(freshData.mint, {\n ...prevToken,\n market_cap: jupMarketCap,\n marketcap: jupMarketCap,\n liquidity: freshData.liquidity || prevToken.liquidity,\n volume24h: freshData.volume24h || prevToken.volume24h,\n buyers: Math.floor((freshData.volume24h || 0) / 1000),\n uniqueWallets: Math.floor((freshData.volume24h || 0) / 2000),\n hype: Math.min(100, (freshData.priceChange24h || 0) > 0 ? (freshData.priceChange24h || 0) * 2 : 0),\n priceChange: freshData.priceChange24h || 0,\n momentum: calculateMomentum({\n ...prevToken,\n market_cap: jupMarketCap,\n volume24h: freshData.volume24h || prevToken.volume24h,\n buyers: Math.floor((freshData.volume24h || 0) / 1000),\n uniqueWallets: Math.floor((freshData.volume24h || 0) / 2000),\n hype: Math.min(100, (freshData.priceChange24h || 0) > 0 ? (freshData.priceChange24h || 0) * 2 : 0)\n })\n });\n } else {\n const age = Date.now() - freshData.created_timestamp;\n const isNew = age < NEW_LAUNCH_THRESHOLD;\n const newToken = {\n ...freshData,\n source: 'jupiter',\n x: Math.random() * 100,\n y: Math.random() * 100,\n buyers: Math.floor((freshData.volume24h || 0) / 1000),\n uniqueWallets: Math.floor((freshData.volume24h || 0) / 2000),\n hype: Math.min(100, (freshData.priceChange24h || 0) > 0 ? (freshData.priceChange24h || 0) * 2 : 0),\n risk: Math.random() * 100,\n age: age,\n priceChange: freshData.priceChange24h || 0,\n volatility: Math.abs(freshData.priceChange24h || 0),\n pulseStart: isNew ? Date.now() : null,\n flows: [],\n category: isNew ? 'new' : 'trending',\n status: 'migrated',\n bondingPct: 1,\n firstPoolAt: freshData.created_timestamp,\n poolDex: 'jupiter',\n momentum: 0\n };\n newToken.momentum = calculateMomentum(newToken);\n addOrUpdateToken(freshData.mint, newToken);\n }\n });\n dexTokensFresh.forEach(freshData => {\n const prevToken = existingTokensMap.get(freshData.mint);\n if (prevToken) {\n const dexMarketCap = freshData.market_cap || 0;\n addOrUpdateToken(freshData.mint, {\n ...prevToken,\n market_cap: dexMarketCap,\n marketcap: dexMarketCap,\n liquidity: freshData.liquidity,\n volume24h: freshData.volume24h,\n buyers: Math.floor((freshData.volume24h || 0) / 1000),\n uniqueWallets: Math.floor((freshData.volume24h || 0) / 2000),\n hype: Math.min(100, (freshData.priceChange24h || 0) > 0 ? (freshData.priceChange24h || 0) * 2 : 0),\n priceChange: freshData.priceChange24h || 0,\n momentum: calculateMomentum({\n ...prevToken,\n market_cap: dexMarketCap,\n volume24h: freshData.volume24h,\n buyers: Math.floor((freshData.volume24h || 0) / 1000),\n uniqueWallets: Math.floor((freshData.volume24h || 0) / 2000),\n hype: Math.min(100, (freshData.priceChange24h || 0) > 0 ? (freshData.priceChange24h || 0) * 2 : 0)\n })\n });\n } else {\n const age = Date.now() - freshData.created_timestamp;\n const isNew = age < NEW_LAUNCH_THRESHOLD;\n const newToken = {\n ...freshData,\n x: Math.random() * 100,\n y: Math.random() * 100,\n buyers: Math.floor((freshData.volume24h || 0) / 1000),\n uniqueWallets: Math.floor((freshData.volume24h || 0) / 2000),\n hype: Math.min(100, (freshData.priceChange24h || 0) > 0 ? (freshData.priceChange24h || 0) * 2 : 0),\n risk: Math.random() * 100,\n age: age,\n priceChange: freshData.priceChange24h || 0,\n volatility: Math.abs(freshData.priceChange24h || 0),\n pulseStart: isNew ? Date.now() : null,\n flows: [],\n category: 'trending',\n status: 'migrated',\n bondingPct: 1,\n firstPoolAt: freshData.created_timestamp,\n poolDex: freshData.dexId || freshData.source,\n momentum: 0\n };\n newToken.momentum = calculateMomentum(newToken);\n addOrUpdateToken(freshData.mint, newToken);\n }\n });\n existingTokensMap.forEach((token, mint) => {\n if (!updatedTokensMap.has(mint)) {\n updatedTokensMap.set(mint, token);\n }\n });\n const finalTokens = Array.from(updatedTokensMap.values());\n const countBySource = finalTokens.reduce((acc, token) => {\n acc[token.source] = (acc[token.source] || 0) + 1;\n return acc;\n }, {});\n console.log(`✅ Update complete - Total: ${finalTokens.length}`);\n console.log('📊 Final source breakdown:', countBySource);\n return finalTokens;\n });\n }\n } catch (error) {\n console.error('❌ Error in loadTokens:', error);\n console.log('ℹ️ Continuing with available data...');\n if (isInitial) setLoading(false);\n }\n };\n const filteredTokens = tokens.filter(token => {\n if (!activePlatforms.includes(token.source)) return false;\n if (!activeCategories.includes(token.category)) return false;\n if (!activeStatuses.includes(token.status)) return false;\n const momentumLevel = getMomentumLevel(token.momentum || 0);\n if (!activeMomentumLevels.includes(momentumLevel)) return false;\n const isNew = Date.now() - token.created_timestamp < NEW_LAUNCH_THRESHOLD;\n if (isNew && !showNewLaunches) return false;\n if (!isNew && !showExisting) return false;\n return true;\n });\n useEffect(() => {\n if (!canvasRef.current || tokens.length === 0) return;\n const canvas = canvasRef.current;\n const ctx = canvas.getContext('2d');\n const dpr = window.devicePixelRatio || 1;\n const resize = () => {\n const rect = canvas.getBoundingClientRect();\n canvas.width = rect.width * dpr;\n canvas.height = rect.height * dpr;\n ctx.scale(dpr, dpr);\n };\n resize();\n window.addEventListener('resize', resize);\n const handleWheel = e => {\n e.preventDefault();\n const delta = e.deltaY > 0 ? 0.9 : 1.1;\n const newScale = Math.max(0.5, Math.min(5, viewport.scale * delta));\n const rect = canvas.getBoundingClientRect();\n const mouseX = e.clientX - rect.left;\n const mouseY = e.clientY - rect.top;\n const worldX = (mouseX - viewport.x) / viewport.scale;\n const worldY = (mouseY - viewport.y) / viewport.scale;\n const newX = mouseX - worldX * newScale;\n const newY = mouseY - worldY * newScale;\n setViewport({\n x: newX,\n y: newY,\n scale: newScale\n });\n };\n const handleMouseDown = e => {\n setIsDragging(true);\n setDragStart({\n x: e.clientX,\n y: e.clientY\n });\n setLastViewport({\n x: viewport.x,\n y: viewport.y\n });\n };\n const handleMouseMove = e => {\n setMousePos({\n x: e.clientX,\n y: e.clientY\n });\n if (isDragging) {\n const dx = e.clientX - dragStart.x;\n const dy = e.clientY - dragStart.y;\n setViewport({\n ...viewport,\n x: lastViewport.x + dx,\n y: lastViewport.y + dy\n });\n } else {\n const rect = canvas.getBoundingClientRect();\n const x = (e.clientX - rect.left - viewport.x) / viewport.scale / rect.width * 100;\n const y = (e.clientY - rect.top - viewport.y) / viewport.scale / rect.height * 100;\n const hovered = filteredTokens.find(token => {\n const dx = token.x - x;\n const dy = token.y - y;\n return Math.sqrt(dx * dx + dy * dy) < 3;\n });\n setHoveredToken(hovered || null);\n }\n };\n const handleMouseUp = () => {\n setIsDragging(false);\n };\n const getTouchDistance = (touch1, touch2) => {\n const dx = touch1.clientX - touch2.clientX;\n const dy = touch1.clientY - touch2.clientY;\n return Math.sqrt(dx * dx + dy * dy);\n };\n const getTouchCenter = (touch1, touch2) => {\n return {\n x: (touch1.clientX + touch2.clientX) / 2,\n y: (touch1.clientY + touch2.clientY) / 2\n };\n };\n const handleTouchStart = e => {\n e.preventDefault();\n if (e.touches.length === 1) {\n setIsDragging(true);\n setTouchMoved(false);\n const startPos = {\n x: e.touches[0].clientX,\n y: e.touches[0].clientY\n };\n setDragStart(startPos);\n setTouchStartPos(startPos);\n setLastViewport({\n x: viewport.x,\n y: viewport.y\n });\n } else if (e.touches.length === 2) {\n const distance = getTouchDistance(e.touches[0], e.touches[1]);\n setTouchStartDistance(distance);\n const center = getTouchCenter(e.touches[0], e.touches[1]);\n setLastTouchCenter(center);\n }\n };\n const handleTouchMove = e => {\n e.preventDefault();\n if (e.touches.length === 1 && isDragging) {\n const dx = e.touches[0].clientX - dragStart.x;\n const dy = e.touches[0].clientY - dragStart.y;\n if (Math.abs(dx) > 10 || Math.abs(dy) > 10) {\n setTouchMoved(true);\n }\n setViewport({\n ...viewport,\n x: lastViewport.x + dx,\n y: lastViewport.y + dy\n });\n } else if (e.touches.length === 2) {\n const currentDistance = getTouchDistance(e.touches[0], e.touches[1]);\n const currentCenter = getTouchCenter(e.touches[0], e.touches[1]);\n if (touchStartDistance && lastTouchCenter) {\n const scale = currentDistance / touchStartDistance;\n const newScale = Math.max(0.5, Math.min(5, viewport.scale * scale));\n const rect = canvas.getBoundingClientRect();\n const centerX = currentCenter.x - rect.left;\n const centerY = currentCenter.y - rect.top;\n const worldX = (centerX - viewport.x) / viewport.scale;\n const worldY = (centerY - viewport.y) / viewport.scale;\n const newX = centerX - worldX * newScale;\n const newY = centerY - worldY * newScale;\n setViewport({\n x: newX,\n y: newY,\n scale: newScale\n });\n setTouchStartDistance(currentDistance);\n setLastTouchCenter(currentCenter);\n }\n }\n };\n const handleTouchEnd = e => {\n e.preventDefault();\n if (e.touches.length === 0 && touchStartPos && !touchMoved) {\n const rect = canvasRef.current.getBoundingClientRect();\n const x = (touchStartPos.x - rect.left - viewport.x) / viewport.scale / rect.width * 100;\n const y = (touchStartPos.y - rect.top - viewport.y) / viewport.scale / rect.height * 100;\n const tapped = filteredTokens.find(token => {\n const dx = token.x - x;\n const dy = token.y - y;\n return Math.sqrt(dx * dx + dy * dy) < 3;\n });\n if (tapped) {\n setSelectedToken(tapped);\n const isValidSolanaAddress = /^[1-9A-HJ-NP-Za-km-z]{32,44}$/.test(tapped.mint);\n if (tapped.source === 'pumpfun' && isValidSolanaAddress) {\n fetchTokenInfoByAddress(tapped.mint).then(details => setSelectedTokenDetails(details)).catch(() => setSelectedTokenDetails(null));\n } else {\n setSelectedTokenDetails(null);\n }\n } else {\n setSelectedToken(null);\n setSelectedTokenDetails(null);\n }\n }\n if (e.touches.length === 0) {\n setIsDragging(false);\n setTouchStartDistance(null);\n setLastTouchCenter(null);\n setTouchStartPos(null);\n setTouchMoved(false);\n } else if (e.touches.length === 1) {\n setTouchStartDistance(null);\n setLastTouchCenter(null);\n setIsDragging(true);\n setDragStart({\n x: e.touches[0].clientX,\n y: e.touches[0].clientY\n });\n setLastViewport({\n x: viewport.x,\n y: viewport.y\n });\n }\n };\n canvas.addEventListener('wheel', handleWheel, {\n passive: false\n });\n canvas.addEventListener('touchstart', handleTouchStart, {\n passive: false\n });\n canvas.addEventListener('touchmove', handleTouchMove, {\n passive: false\n });\n canvas.addEventListener('touchend', handleTouchEnd, {\n passive: false\n });\n canvas.addEventListener('mousedown', handleMouseDown);\n canvas.addEventListener('mousemove', handleMouseMove);\n canvas.addEventListener('mouseup', handleMouseUp);\n canvas.addEventListener('mouseleave', handleMouseUp);\n const drawRing = (ctx, x, y, radius, source, lineWidth) => {\n const sourceData = SOURCES[source];\n ctx.strokeStyle = sourceData.color;\n ctx.lineWidth = lineWidth;\n if (sourceData.ring === 'dashed') {\n ctx.setLineDash([3, 3]);\n } else if (sourceData.ring === 'dotted') {\n ctx.setLineDash([1, 2]);\n } else if (sourceData.ring === 'double') {\n ctx.setLineDash([]);\n ctx.beginPath();\n ctx.arc(x, y, radius, 0, Math.PI * 2);\n ctx.stroke();\n ctx.beginPath();\n ctx.arc(x, y, radius + 3, 0, Math.PI * 2);\n ctx.stroke();\n return;\n } else if (sourceData.ring === 'hex') {\n ctx.setLineDash([]);\n ctx.beginPath();\n for (let i = 0; i < 6; i++) {\n const angle = i / 6 * Math.PI * 2 - Math.PI / 2;\n const px = x + Math.cos(angle) * radius;\n const py = y + Math.sin(angle) * radius;\n if (i === 0) ctx.moveTo(px, py);else ctx.lineTo(px, py);\n }\n ctx.closePath();\n ctx.stroke();\n return;\n } else {\n ctx.setLineDash([]);\n }\n ctx.beginPath();\n ctx.arc(x, y, radius, 0, Math.PI * 2);\n ctx.stroke();\n ctx.setLineDash([]);\n };\n const animate = () => {\n const now = Date.now();\n const dt = (now - lastTimeRef.current) / 1000;\n lastTimeRef.current = now;\n const rect = canvas.getBoundingClientRect();\n const w = rect.width;\n const h = rect.height;\n ctx.fillStyle = '#070B15';\n ctx.fillRect(0, 0, w, h);\n for (let i = 0; i < 100; i++) {\n const x = Math.random() * w;\n const y = Math.random() * h;\n ctx.fillStyle = `rgba(199, 210, 229, ${Math.random() * 0.3})`;\n ctx.fillRect(x, y, 1, 1);\n }\n ctx.save();\n ctx.translate(viewport.x, viewport.y);\n ctx.scale(viewport.scale, viewport.scale);\n if (activeLayers.includes('liquidity')) {\n filteredTokens.forEach(token => {\n const x = token.x / 100 * w;\n const y = token.y / 100 * h;\n const intensity = Math.min(1, token.liquidity / 100000);\n const radius = Math.max(25, intensity * 60);\n const sourceColor = SOURCES[token.source].color;\n const r = parseInt(sourceColor.slice(1, 3), 16);\n const g = parseInt(sourceColor.slice(3, 5), 16);\n const b = parseInt(sourceColor.slice(5, 7), 16);\n const gradient = ctx.createRadialGradient(x, y, 0, x, y, radius);\n gradient.addColorStop(0, `rgba(${r}, ${g}, ${b}, ${intensity * 0.25})`);\n gradient.addColorStop(0.5, `rgba(${r}, ${g}, ${b}, ${intensity * 0.12})`);\n gradient.addColorStop(1, `rgba(${r}, ${g}, ${b}, 0)`);\n ctx.fillStyle = gradient;\n ctx.fillRect(x - radius, y - radius, radius * 2, radius * 2);\n });\n }\n if (activeLayers.includes('hype')) {\n ctx.globalCompositeOperation = 'lighter';\n filteredTokens.forEach(token => {\n const x = token.x / 100 * w;\n const y = token.y / 100 * h;\n const intensity = token.hype / 100;\n if (intensity > 0.4) {\n const radius = Math.max(25, intensity * 100);\n const gradient = ctx.createRadialGradient(x, y, 0, x, y, radius);\n gradient.addColorStop(0, `rgba(255, 152, 0, ${intensity * 0.6})`);\n gradient.addColorStop(0.5, `rgba(255, 152, 0, ${intensity * 0.3})`);\n gradient.addColorStop(1, 'rgba(255, 152, 0, 0)');\n ctx.fillStyle = gradient;\n ctx.fillRect(x - radius, y - radius, radius * 2, radius * 2);\n ctx.strokeStyle = `rgba(255, 152, 0, ${intensity * 0.4})`;\n ctx.lineWidth = 1;\n for (let i = 1; i <= 3; i++) {\n ctx.beginPath();\n ctx.arc(x, y, radius * 0.4 * i, 0, Math.PI * 2);\n ctx.stroke();\n }\n }\n });\n ctx.globalCompositeOperation = 'source-over';\n }\n if (activeLayers.includes('safety')) {\n filteredTokens.forEach(token => {\n if (token.risk > 60) {\n const x = token.x / 100 * w;\n const y = token.y / 100 * h;\n const intensity = token.risk / 100;\n const radius = Math.max(20, intensity * 60);\n const gradient = ctx.createRadialGradient(x, y, 0, x, y, radius);\n gradient.addColorStop(0, `rgba(244, 67, 54, ${intensity * 0.4})`);\n gradient.addColorStop(0.6, `rgba(244, 67, 54, ${intensity * 0.2})`);\n gradient.addColorStop(1, 'rgba(244, 67, 54, 0)');\n ctx.fillStyle = gradient;\n ctx.fillRect(x - radius, y - radius, radius * 2, radius * 2);\n }\n });\n }\n if (activeLayers.includes('wind')) {\n ctx.globalCompositeOperation = 'lighter';\n filteredTokens.forEach((token, i) => {\n token.flows.forEach(flow => {\n const target = tokens[flow.to];\n if (!target || !activePlatforms.includes(target.source)) return;\n const x1 = token.x / 100 * w;\n const y1 = token.y / 100 * h;\n const x2 = target.x / 100 * w;\n const y2 = target.y / 100 * h;\n const progress = now / 2000 % 1;\n const curveOffset = 30;\n const midX = (x1 + x2) / 2 + (y2 - y1) / Math.hypot(x2 - x1, y2 - y1) * curveOffset;\n const midY = (y1 + y2) / 2 - (x2 - x1) / Math.hypot(x2 - x1, y2 - y1) * curveOffset;\n const fromColor = SOURCES[flow.fromSource].color;\n const toColor = SOURCES[flow.toSource].color;\n const gradient = ctx.createLinearGradient(x1, y1, x2, y2);\n gradient.addColorStop(0, `${fromColor}80`);\n gradient.addColorStop(0.5, `${fromColor}40`);\n gradient.addColorStop(0.5, `${toColor}40`);\n gradient.addColorStop(1, `${toColor}80`);\n ctx.strokeStyle = gradient;\n ctx.lineWidth = flow.strength * 2;\n ctx.beginPath();\n ctx.moveTo(x1, y1);\n ctx.quadraticCurveTo(midX, midY, x2, y2);\n ctx.stroke();\n const t = progress;\n const tracerX = (1 - t) * (1 - t) * x1 + 2 * (1 - t) * t * midX + t * t * x2;\n const tracerY = (1 - t) * (1 - t) * y1 + 2 * (1 - t) * t * midY + t * t * y2;\n ctx.beginPath();\n ctx.arc(tracerX, tracerY, 3, 0, Math.PI * 2);\n ctx.fillStyle = '#fff';\n ctx.fill();\n });\n });\n particlesRef.current.forEach(p => {\n if (!activePlatforms.includes(p.source)) return;\n p.x += p.vx;\n p.y += p.vy;\n p.life -= dt * 0.3;\n if (p.x < 0 || p.x > 100 || p.y < 0 || p.y > 100 || p.life <= 0) {\n p.x = Math.random() * 100;\n p.y = Math.random() * 100;\n p.life = 1;\n }\n const px = p.x / 100 * w;\n const py = p.y / 100 * h;\n const sourceColor = SOURCES[p.source].color;\n ctx.beginPath();\n ctx.arc(px, py, 2, 0, Math.PI * 2);\n ctx.fillStyle = `${sourceColor}${Math.floor(p.life * 153).toString(16).padStart(2, '0')}`;\n ctx.fill();\n const angle = Math.atan2(p.vy, p.vx);\n const len = 8;\n ctx.beginPath();\n ctx.moveTo(px, py);\n ctx.lineTo(px - Math.cos(angle) * len, py - Math.sin(angle) * len);\n ctx.strokeStyle = `${sourceColor}${Math.floor(p.life * 0.4 * 255).toString(16).padStart(2, '0')}`;\n ctx.lineWidth = 1;\n ctx.stroke();\n });\n ctx.globalCompositeOperation = 'source-over';\n }\n if (activeLayers.includes('volume')) {\n filteredTokens.forEach(token => {\n const intensity = token.volume24h / 500000;\n if (intensity > 0.2) {\n const x = token.x / 100 * w;\n const y = token.y / 100 * h;\n const drops = Math.floor(intensity * 8);\n const rainSpeed = now / 50 % 100;\n for (let i = 0; i < drops; i++) {\n const offset = i / drops * 100;\n const dropY = (rainSpeed + offset) % 100 / 100 * 60 - 30;\n const angle = i / drops * Math.PI * 2;\n const dist = 15 + i % 3 * 8;\n const dx = Math.cos(angle) * dist;\n const alpha = Math.min(0.6, intensity * 0.8);\n ctx.beginPath();\n ctx.moveTo(x + dx, y + dropY);\n ctx.lineTo(x + dx, y + dropY + 8);\n ctx.strokeStyle = `rgba(76, 175, 80, ${alpha})`;\n ctx.lineWidth = 1.5;\n ctx.stroke();\n ctx.beginPath();\n ctx.arc(x + dx, y + dropY, 1, 0, Math.PI * 2);\n ctx.fillStyle = `rgba(76, 175, 80, ${alpha * 0.8})`;\n ctx.fill();\n }\n if (intensity > 0.6) {\n const ripple = now / 400 % 1;\n ctx.beginPath();\n ctx.arc(x, y, 15 + ripple * 15, 0, Math.PI * 2);\n ctx.strokeStyle = `rgba(76, 175, 80, ${(1 - ripple) * 0.3})`;\n ctx.lineWidth = 2;\n ctx.stroke();\n }\n }\n });\n }\n orbiterRef.current.forEach(orb => {\n const token = tokens[orb.tokenIdx];\n if (!token || !activePlatforms.includes(token.source)) return;\n const isNew = Date.now() - token.created_timestamp < NEW_LAUNCH_THRESHOLD;\n if (isNew && !showNewLaunches || !isNew && !showExisting) return;\n orb.angle += orb.speed * dt;\n const x = token.x / 100 * w + Math.cos(orb.angle) * orb.distance;\n const y = token.y / 100 * h + Math.sin(orb.angle) * orb.distance;\n ctx.beginPath();\n ctx.arc(x, y, 2, 0, Math.PI * 2);\n ctx.fillStyle = SOURCES[orb.source].color;\n ctx.fill();\n });\n filteredTokens.forEach(token => {\n const x = token.x / 100 * w;\n const y = token.y / 100 * h;\n const size = 6;\n const lpDepth = token.liquidity / 1000000;\n const ringThickness = Math.max(1, Math.min(6, lpDepth * 6));\n const hypeGlow = token.hype / 100 * 20;\n const momentum = token.momentum || 0;\n const momentumLevel = getMomentumLevel(momentum);\n if (activeLayers.includes('radar') && token.pulseStart && now - token.pulseStart < 3000) {\n const pulseProgress = (now - token.pulseStart) / 3000;\n const pulseRadius = size + pulseProgress * 50;\n const pulseAlpha = (1 - pulseProgress) * 0.9;\n ctx.beginPath();\n ctx.arc(x, y, pulseRadius, 0, Math.PI * 2);\n ctx.strokeStyle = `${SOURCES[token.source].color}${Math.floor(pulseAlpha * 255).toString(16).padStart(2, '0')}`;\n ctx.lineWidth = 3;\n ctx.stroke();\n const innerPulseRadius = size + pulseProgress * 25;\n const innerPulseAlpha = (1 - pulseProgress) * 0.6;\n ctx.beginPath();\n ctx.arc(x, y, innerPulseRadius, 0, Math.PI * 2);\n ctx.strokeStyle = `${SOURCES[token.source].color}${Math.floor(innerPulseAlpha * 255).toString(16).padStart(2, '0')}`;\n ctx.lineWidth = 2;\n ctx.stroke();\n }\n if (momentumLevel === 'hot') {\n const hotPulse = Math.sin(now / 200) * 0.5 + 0.5;\n ctx.globalCompositeOperation = 'lighter';\n const hotGradient = ctx.createRadialGradient(x, y, 0, x, y, 35 + hotPulse * 15);\n hotGradient.addColorStop(0, `rgba(255, 100, 50, ${hotPulse * 0.8})`);\n hotGradient.addColorStop(0.5, `rgba(255, 150, 50, ${hotPulse * 0.4})`);\n hotGradient.addColorStop(1, 'rgba(255, 100, 50, 0)');\n ctx.fillStyle = hotGradient;\n ctx.beginPath();\n ctx.arc(x, y, 35 + hotPulse * 15, 0, Math.PI * 2);\n ctx.fill();\n ctx.globalCompositeOperation = 'source-over';\n ctx.strokeStyle = `rgba(255, 100, 50, ${0.6 + hotPulse * 0.4})`;\n ctx.lineWidth = 3;\n ctx.beginPath();\n ctx.arc(x, y, size + 20 + hotPulse * 8, 0, Math.PI * 2);\n ctx.stroke();\n } else if (momentumLevel === 'trending') {\n const trendPulse = Math.sin(now / 400) * 0.3 + 0.7;\n ctx.strokeStyle = `rgba(100, 200, 255, ${trendPulse * 0.5})`;\n ctx.lineWidth = 2;\n ctx.beginPath();\n ctx.arc(x, y, size + 16, 0, Math.PI * 2);\n ctx.stroke();\n }\n if (token.status === 'final_stretch') {\n const finalPulse = Math.sin(now / 300) * 0.5 + 0.5;\n ctx.beginPath();\n ctx.arc(x, y, size + 18 + finalPulse * 8, 0, Math.PI * 2);\n ctx.strokeStyle = `${SOURCES[token.source].color}${Math.floor(finalPulse * 180).toString(16).padStart(2, '0')}`;\n ctx.lineWidth = 3;\n ctx.stroke();\n }\n if (hypeGlow > 5) {\n ctx.globalCompositeOperation = 'lighter';\n const gradient = ctx.createRadialGradient(x, y, 0, x, y, hypeGlow);\n gradient.addColorStop(0, `${SOURCES[token.source].color}60`);\n gradient.addColorStop(1, `${SOURCES[token.source].color}00`);\n ctx.fillStyle = gradient;\n ctx.beginPath();\n ctx.arc(x, y, hypeGlow, 0, Math.PI * 2);\n ctx.fill();\n ctx.globalCompositeOperation = 'source-over';\n }\n const momentumRingBonus = momentumLevel === 'hot' ? 2 : momentumLevel === 'trending' ? 1 : 0;\n drawRing(ctx, x, y, size + 8, token.source, ringThickness + momentumRingBonus);\n if (token.status === 'migrated') {\n drawRing(ctx, x, y, size + 14, token.source, 2);\n }\n ctx.beginPath();\n ctx.arc(x, y, size, 0, Math.PI * 2);\n ctx.fillStyle = '#E9EEF7';\n ctx.fill();\n const logoImg = logoImagesRef.current[token.source];\n if (logoImg && logoImg.complete) {\n const logoSize = size * 1.5;\n ctx.drawImage(logoImg, x - logoSize / 2, y - logoSize / 2, logoSize, logoSize);\n } else {\n ctx.font = '10px sans-serif';\n ctx.textAlign = 'center';\n ctx.textBaseline = 'middle';\n ctx.fillStyle = '#070B15';\n ctx.fillText(SOURCES[token.source].glyph, x, y);\n }\n if (momentumLevel === 'hot') {\n ctx.font = 'bold 14px sans-serif';\n ctx.textAlign = 'center';\n ctx.textBaseline = 'middle';\n ctx.fillStyle = '#fff';\n ctx.shadowColor = 'rgba(255, 100, 50, 0.8)';\n ctx.shadowBlur = 8;\n ctx.fillText('🔥', x, y - size - 18);\n ctx.shadowBlur = 0;\n } else if (momentumLevel === 'trending') {\n ctx.font = '12px sans-serif';\n ctx.textAlign = 'center';\n ctx.textBaseline = 'middle';\n ctx.fillStyle = '#fff';\n ctx.fillText('⚡', x, y - size - 16);\n }\n if (hoveredToken?.mint === token.mint) {\n drawRing(ctx, x, y, size + 8, token.source, ringThickness + 1);\n }\n if (selectedToken?.mint === token.mint) {\n ctx.beginPath();\n ctx.arc(x, y, size + 14, 0, Math.PI * 2);\n ctx.strokeStyle = '#fff';\n ctx.lineWidth = 3;\n ctx.stroke();\n }\n });\n ctx.restore();\n animationRef.current = requestAnimationFrame(animate);\n };\n animate();\n return () => {\n window.removeEventListener('resize', resize);\n canvas.removeEventListener('wheel', handleWheel);\n canvas.removeEventListener('mousedown', handleMouseDown);\n canvas.removeEventListener('mousemove', handleMouseMove);\n canvas.removeEventListener('mouseup', handleMouseUp);\n canvas.removeEventListener('mouseleave', handleMouseUp);\n canvas.removeEventListener('touchstart', handleTouchStart);\n canvas.removeEventListener('touchmove', handleTouchMove);\n canvas.removeEventListener('touchend', handleTouchEnd);\n if (animationRef.current) {\n cancelAnimationFrame(animationRef.current);\n }\n };\n }, [tokens, activeLayers, selectedToken, hoveredToken, viewport, isDragging, activePlatforms, showNewLaunches, showExisting, filteredTokens]);\n const toggleLayer = layerId => {\n setActiveLayers(prev => prev.includes(layerId) ? prev.filter(id => id !== layerId) : [...prev, layerId]);\n };\n const togglePlatform = platformId => {\n setActivePlatforms(prev => prev.includes(platformId) ? prev.filter(id => id !== platformId) : [...prev, platformId]);\n };\n const toggleCategory = categoryId => {\n setActiveCategories(prev => prev.includes(categoryId) ? prev.filter(id => id !== categoryId) : [...prev, categoryId]);\n };\n const toggleStatus = statusId => {\n setActiveStatuses(prev => prev.includes(statusId) ? prev.filter(id => id !== statusId) : [...prev, statusId]);\n };\n const toggleMomentumLevel = level => {\n setActiveMomentumLevels(prev => prev.includes(level) ? prev.filter(l => l !== level) : [...prev, level]);\n };\n const handleCanvasClick = async e => {\n if (isDragging) return;\n const rect = canvasRef.current.getBoundingClientRect();\n const x = (e.clientX - rect.left - viewport.x) / viewport.scale / rect.width * 100;\n const y = (e.clientY - rect.top - viewport.y) / viewport.scale / rect.height * 100;\n const clicked = filteredTokens.find(token => {\n const dx = token.x - x;\n const dy = token.y - y;\n return Math.sqrt(dx * dx + dy * dy) < 3;\n });\n if (clicked) {\n setSelectedToken(clicked);\n const isValidSolanaAddress = /^[1-9A-HJ-NP-Za-km-z]{32,44}$/.test(clicked.mint);\n if (clicked.source === 'pumpfun' && isValidSolanaAddress) {\n try {\n const details = await fetchTokenInfoByAddress(clicked.mint);\n setSelectedTokenDetails(details);\n } catch (error) {\n setSelectedTokenDetails(null);\n }\n } else {\n setSelectedTokenDetails(null);\n }\n } else {\n setSelectedToken(null);\n setSelectedTokenDetails(null);\n }\n };\n const formatMC = mc => {\n if (!mc || mc === 0) return '$0';\n if (mc >= 1000000) return `$${(mc / 1000000).toFixed(2)}M`;\n if (mc >= 1000) return `$${(mc / 1000).toFixed(1)}K`;\n return `$${mc.toFixed(2)}`;\n };\n const formatAge = timestamp => {\n const seconds = Math.floor((Date.now() - timestamp) / 1000);\n if (seconds < 60) return `${seconds}s ago`;\n const minutes = Math.floor(seconds / 60);\n if (minutes < 60) return `${minutes}m ago`;\n const hours = Math.floor(seconds / 3600);\n if (hours < 24) return `${hours}h ago`;\n const days = Math.floor(seconds / 86400);\n return `${days}d ago`;\n };\n return

\n $\"Crowdcast\"$ \n \n

\n \n \n \n \n \n $\"Gitbook\"$ \n \n \n $\"X\"$ \n \n \n $\"Telegram\"$ \n \n \n

\n {LAYERS.map(layer => {\n const Icon = layer.icon;\n const isActive = activeLayers.includes(layer.id);\n return ;\n })}\n

\n {showLeaderboard &&

\n 🔥 LEADERBOARD\n

\n ({filteredTokens.length})\n

\n \n

\n {filteredTokens.sort((a, b) => (b.momentum || 0) - (a.momentum || 0)).slice(0, 10).map((token, index) => {\n const momentumLevel = getMomentumLevel(token.momentum || 0);\n return

{\n setSelectedToken(token);\n fetchTokenInfoByAddress(token.mint).then(details => setSelectedTokenDetails(details)).catch(() => setSelectedTokenDetails(null));\n }} className=\"flex items-center gap-2 p-2 rounded-lg bg-white/5 hover:bg-white/10 transition-all cursor-pointer border border-white/10 hover:border-orange-500/50\">\n

\n {index + 1}\n

{token.symbol}

\n {momentumLevel === 'hot' &&

🔥

}\n {momentumLevel === 'trending' &&

⚡

}\n

{formatMC(token.market_cap)}

\n {(token.momentum || 0).toFixed(0)}\n

;\n })}\n

\n {filteredTokens.length === 0 &&

\n No tokens match current filters\n

}\n

}\n {showPlatformFilter &&

Platform Filters

\n \n

\n {Object.entries(SOURCES).map(([key, source]) => )}\n

Token Status (Lifecycle)

\n \n \n \n

Token Categories

\n \n \n \n

Momentum Level

\n \n \n \n

Token State

\n \n \n

}\n {loading ?

Loading memecoin weather...

: <>\n

say something