[{"_1":2,"_140":-5,"_141":-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":25,"_27":28,"_30":31,"_32":33,"_34":35,"_36":37,"_38":39,"_40":41,"_42":43,"_5":44,"_56":57,"_58":59,"_60":59,"_61":62,"_63":59,"_64":65,"_66":41,"_67":59,"_68":59,"_69":59,"_70":17,"_71":17,"_72":73,"_74":75,"_76":77,"_78":79,"_80":81,"_99":-5,"_100":17,"_101":102,"_136":31,"_137":138,"_139":17},"id","e12a0775a82068485baa","isMyApp",false,"name","vibetracker","description","Experience the emotional rollercoaster of crypto with this mood-shifting dashboard that transforms based on ZALA's price action! Watch as the entire interface morphs from euphoric green celebrations during pumps to apocalyptic red meltdowns during dumps, complete with raining ZALA coins and dramatically exaggerated messages that perfectly capture crypto's emotional extremes.","brief","A schizophrenic crypto dashboard that celebrates pumps, anxiously waits, or dramatically melts down with ZALA's price!","isLive",true,"isPublic","tags",[29],"💰","cover","https://cdn.dev.fun/snapshot/e12a0775a82068485baa/58823_1f286253.webp","cdnUrl","https://cdn.dev.fun/app/e12a0775a82068485baa/58823","createdAt",["D",1745664089787],"updatedAt",["D",1745691684782],"lastCommitId",["B","58823"],"tier",1,"credits",15,{"_14":45,"_46":47,"_48":47,"_49":50,"_51":47,"_52":53,"_54":55},"69ecd625-7e23-4f66-8d1e-bf684e47b38c","uniqueId","Fantardio","username","solanaWallet","45u887sPrVSQ1UTkpwakc2ocqUSRLYrwENbvhJPrhhAf","displayName","bio","I am Fantardio, a fantasy.top maxi turned vibe-coder. Follow me on X: \n\nhttps://x.com/Fantardio","avatar","https://cdn.dev.fun/avatar/69ecd625-7e23-4f66-8d1e-bf684e47b38c/3cb3d8e5.webp","commitCount",18,"forkCount",0,"likeCount","runsCount",459,"downvoteCount","upvoteCount",2,"upvoteRate","commentCount","reportCount","visitorCount","isArchived","isRenamed","contractAddress","CxpGDVrX2rA6penHD2zhopPYNMXAtXutizWSktwytZ18","code","import { useState, useEffect, useRef } from 'react';\nimport { motion, AnimatePresence } from 'framer-motion';\nimport { Flame, Rocket, ArrowDown, ArrowUp, X, ExternalLink, Twitter, MessageCircle, Clock, TrendingUp, ChevronDown, ChevronUp, AlertCircle, DollarSign } from 'lucide-react';\nexport default function App() {\n const [priceData, setPriceData] = useState(null);\n const [loading, setLoading] = useState(true);\n const [error, setError] = useState(null);\n const [theme, setTheme] = useState('neutral');\n const [showTokenomics, setShowTokenomics] = useState(false);\n const [showWhitepaper, setShowWhitepaper] = useState(false);\n const [rainingCoins, setRainingCoins] = useState([]);\n const [particles, setParticles] = useState([]);\n const containerRef = useRef(null);\n const [priceChangePercent, setPriceChangePercent] = useState(0);\n const [priceChange, setPriceChange] = useState('0.00');\n const [price, setPrice] = useState('0.00');\n const [expanded, setExpanded] = useState(false);\n const [timeFrame, setTimeFrame] = useState('m15');\n const messages = {\n positive: [\"ZALA TO THE MOON! 🚀🚀🚀\", \"WE'RE ALL GONNA MAKE IT! 💰💎\", \"LAMBOS INCOMING! 🏎️\", \"GENERATIONAL WEALTH UNLOCKED! 💸\", \"WIFE CHANGING GAINS! 👰\", \"RETIREMENT PLAN ACTIVATED! 🏝️\"],\n neutral: [\"CONSOLIDATING BEFORE TAKEOFF! 🚀\", \"LOADING ROCKET FUEL... ⏳\", \"ACCUMULATION PHASE! STACK NOW! 📈\", \"PREPARING FOR MOON MISSION! 🌕\", \"HODL THE LINE! MOON SOON! 💪\", \"WHALES ARE ACCUMULATING! BULLISH! 🐳\"],\n negative: [\"WE ARE ALL GOING TO DIE! ☠️\", \"IT'S OVER! CRYPTO IS DEAD! AGAIN! 📉\", \"SELL EVERYTHING! PANIC! AHHHH! 🔥\", \"THIS IS THE END! GOODBYE CRUEL WORLD! 😭\", \"BACK TO MCDONALD'S! 🍔\", \"RAMEN DIET ACTIVATED! 🍜\"]\n };\n useEffect(() => {\n const fetchPriceData = async () => {\n try {\n setLoading(true);\n setError(null);\n const targetUrl = `https://api.dexscreener.com/latest/dex/tokens/CxpGDVrX2rA6penHD2zhopPYNMXAtXutizWSktwytZ18`;\n console.log(\"Fetching data from:\", targetUrl);\n let response;\n let data;\n try {\n response = await fetch(targetUrl);\n if (!response.ok) {\n throw new Error(`Direct API call failed with status code ${response.status}`);\n }\n data = await response.json();\n console.log(\"Direct API call successful\");\n } catch (directError) {\n console.log(\"Direct API call failed, trying proxy:\", directError);\n response = await fetch(`https://state.dev.fun/proxy?url=${encodeURIComponent(targetUrl)}`);\n if (!response.ok) {\n throw new Error(`Proxy API returned status code ${response.status}`);\n }\n data = await response.json();\n }\n console.log(\"API response:\", data);\n if (data.pairs && data.pairs.length > 0) {\n console.log(\"Found pairs data:\", data.pairs.length, \"pairs\");\n let mostLiquidPair = data.pairs[0];\n if (data.pairs.length > 1) {\n data.pairs.sort((a, b) => {\n const liquidityA = parseFloat(a.liquidity?.usd || 0);\n const liquidityB = parseFloat(b.liquidity?.usd || 0);\n return liquidityB - liquidityA;\n });\n mostLiquidPair = data.pairs[0];\n console.log(\"Using most liquid pair:\", mostLiquidPair.pairAddress);\n }\n console.log(\"Using pair data:\", mostLiquidPair);\n if (!mostLiquidPair.priceUsd || !mostLiquidPair.priceChange?.h24) {\n console.error(\"Missing price data in response:\", mostLiquidPair);\n throw new Error(\"Incomplete price data in response\");\n }\n const price = parseFloat(mostLiquidPair.priceUsd);\n let priceChangePercent;\n if (mostLiquidPair.priceChange && mostLiquidPair.priceChange.m15) {\n priceChangePercent = parseFloat(mostLiquidPair.priceChange.m15);\n setTimeFrame('m15');\n } else if (mostLiquidPair.priceChange && mostLiquidPair.priceChange.h1) {\n priceChangePercent = parseFloat(mostLiquidPair.priceChange.h1);\n setTimeFrame('h1');\n } else {\n priceChangePercent = parseFloat(mostLiquidPair.priceChange.h24);\n setTimeFrame('h24');\n }\n if (isNaN(price) || isNaN(priceChangePercent)) {\n throw new Error(\"Invalid price data received\");\n }\n console.log(`Got valid price: ${price.toFixed(8)}, Change: ${priceChangePercent.toFixed(2)}% (${timeFrame})`);\n setPriceData(mostLiquidPair);\n setPrice(price.toFixed(8));\n setPriceChange(priceChangePercent.toFixed(2));\n setPriceChangePercent(priceChangePercent);\n if (priceChangePercent >= 1) {\n setTheme('positive');\n } else if (priceChangePercent <= -1) {\n setTheme('negative');\n } else {\n setTheme('neutral');\n }\n console.log(`Price updated: ${price.toFixed(8)}, Change: ${priceChangePercent.toFixed(2)}%, Theme: ${theme}`);\n } else {\n console.error(\"No pair data found in API response:\", data);\n try {\n console.log(\"Trying alternative endpoint for ZALA...\");\n const fallbackUrl = `https://api.dexscreener.com/latest/dex/search?q=ZALA`;\n const fallbackResponse = await fetch(fallbackUrl);\n const fallbackData = await fallbackResponse.json();\n console.log(\"Fallback API response:\", fallbackData);\n if (fallbackData.pairs && fallbackData.pairs.length > 0) {\n const zalaPairs = fallbackData.pairs.filter(pair => pair.baseToken.symbol === \"ZALA\" && pair.chainId === \"solana\");\n if (zalaPairs.length > 0) {\n console.log(\"Found ZALA pairs through search:\", zalaPairs.length);\n zalaPairs.sort((a, b) => {\n const liquidityA = parseFloat(a.liquidity?.usd || 0);\n const liquidityB = parseFloat(b.liquidity?.usd || 0);\n return liquidityB - liquidityA;\n });\n const bestPair = zalaPairs[0];\n console.log(\"Using best ZALA pair:\", bestPair);\n const price = parseFloat(bestPair.priceUsd);\n let priceChangePercent;\n if (bestPair.priceChange && bestPair.priceChange.m15) {\n priceChangePercent = parseFloat(bestPair.priceChange.m15);\n setTimeFrame('m15');\n } else if (bestPair.priceChange && bestPair.priceChange.h1) {\n priceChangePercent = parseFloat(bestPair.priceChange.h1);\n setTimeFrame('h1');\n } else {\n priceChangePercent = parseFloat(bestPair.priceChange.h24);\n setTimeFrame('h24');\n }\n if (!isNaN(price) && !isNaN(priceChangePercent)) {\n setPriceData(bestPair);\n setPrice(price.toFixed(8));\n setPriceChange(priceChangePercent.toFixed(2));\n setPriceChangePercent(priceChangePercent);\n if (priceChangePercent >= 1) {\n setTheme('positive');\n } else if (priceChangePercent <= -1) {\n setTheme('negative');\n } else {\n setTheme('neutral');\n }\n console.log(`Successfully retrieved price from fallback: ${price.toFixed(8)}, Change: ${priceChangePercent.toFixed(2)}%`);\n return;\n }\n }\n }\n throw new Error(\"No valid ZALA data found in fallback response\");\n } catch (fallbackErr) {\n console.error(\"Fallback approach also failed:\", fallbackErr);\n throw new Error(\"All attempts to fetch ZALA data failed\");\n }\n }\n } catch (err) {\n console.error('Error fetching price data:', err);\n setError(`Failed to load price data: ${err.message}`);\n setPrice('0.000158');\n setPriceChange('2.45');\n setPriceChangePercent(2.45);\n setTheme('neutral');\n } finally {\n setLoading(false);\n }\n };\n fetchPriceData();\n const interval = setInterval(fetchPriceData, 30000);\n return () => clearInterval(interval);\n }, []);\n useEffect(() => {\n if (!containerRef.current) return;\n const generateCoins = () => {\n if (theme === 'positive') {\n const newCoin = {\n id: Date.now(),\n left: Math.random() * 100,\n delay: Math.random() * 5,\n rotation: Math.random() * 360,\n size: Math.random() * 20 + 20\n };\n setRainingCoins(prev => [...prev.slice(-25), newCoin]);\n } else if (theme === 'negative') {\n if (Math.random() > 0.6) {\n const newCoin = {\n id: Date.now(),\n left: Math.random() * 100,\n delay: Math.random() * 5,\n rotation: Math.random() * 360,\n size: Math.random() * 15 + 15,\n flip: Math.random() > 0.5\n };\n setRainingCoins(prev => [...prev.slice(-12), newCoin]);\n }\n } else {\n if (Math.random() > 0.8) {\n const newCoin = {\n id: Date.now(),\n left: Math.random() * 100,\n delay: Math.random() * 5,\n rotation: Math.random() * 360,\n size: Math.random() * 10 + 10\n };\n setRainingCoins(prev => [...prev.slice(-5), newCoin]);\n }\n }\n };\n const interval = setInterval(generateCoins, theme === 'positive' ? 300 : theme === 'negative' ? 1500 : 3000);\n return () => clearInterval(interval);\n }, [theme]);\n useEffect(() => {\n if (!containerRef.current || theme !== 'positive') return;\n const generateParticle = () => {\n const newParticle = {\n id: Date.now() + Math.random(),\n x: 10 + Math.random() * 80,\n y: 10 + Math.random() * 80,\n size: 3 + Math.random() * 8,\n color: ['rgba(0, 255, 0, 0.7)', 'rgba(0, 255, 100, 0.7)', 'rgba(100, 255, 0, 0.7)', 'rgba(150, 255, 150, 0.8)', 'rgba(200, 255, 200, 0.9)'][Math.floor(Math.random() * 5)],\n duration: 1.5 + Math.random() * 2\n };\n setParticles(prev => [...prev.slice(-40), newParticle]);\n };\n const interval = setInterval(() => {\n if (Math.random() > 0.4) {\n for (let i = 0; i < 2 + Math.floor(Math.random() * 3); i++) {\n generateParticle();\n }\n }\n }, 200);\n return () => {\n clearInterval(interval);\n setParticles([]);\n };\n }, [theme]);\n useEffect(() => {\n const timeout = setTimeout(() => {\n setRainingCoins(prev => prev.filter(coin => Date.now() - coin.id < 10000));\n }, 10000);\n return () => clearTimeout(timeout);\n }, [rainingCoins]);\n const getRandomMessage = () => {\n const themeMessages = messages[theme];\n return themeMessages[Math.floor(Math.random() * themeMessages.length)];\n };\n const themeStyles = {\n positive: {\n background: 'bg-gradient-to-br from-green-400 via-green-500 to-green-600',\n text: 'text-green-100',\n accent: 'bg-green-700',\n border: 'border-green-300',\n button: 'bg-green-700 hover:bg-green-800',\n highlight: 'text-white font-extrabold',\n shadowColor: 'rgba(0, 255, 0, 0.5)',\n glowEffect: 'animate-pulse'\n },\n neutral: {\n background: 'bg-gradient-to-br from-yellow-400 via-yellow-500 to-yellow-600',\n text: 'text-yellow-100',\n accent: 'bg-yellow-700',\n border: 'border-yellow-300',\n button: 'bg-yellow-700 hover:bg-yellow-800',\n highlight: 'text-white font-extrabold',\n shadowColor: 'rgba(255, 255, 0, 0.4)',\n glowEffect: ''\n },\n negative: {\n background: 'bg-gradient-to-br from-red-500 via-red-600 to-red-700',\n text: 'text-red-100',\n accent: 'bg-red-800',\n border: 'border-red-300',\n button: 'bg-red-800 hover:bg-red-900',\n highlight: 'text-white font-extrabold',\n shadowColor: 'rgba(255, 0, 0, 0.5)',\n glowEffect: ''\n }\n };\n const currentTheme = themeStyles[theme];\n const [randomMessage, setRandomMessage] = useState('');\n useEffect(() => {\n setRandomMessage(getRandomMessage());\n const interval = setInterval(() => {\n setRandomMessage(getRandomMessage());\n }, 5000);\n return () => clearInterval(interval);\n }, [theme]);\n return

\n {}\n \n $\"ZALA$ \n \n {}\n

\n {rainingCoins.map(coin => \n $\"ZALA$ \n )}\n

\n {}\n \n

\n {}\n \n {}\n {theme === 'negative' && <>\n

\n {}\n \n {}\n

\n {[...Array(12)].map((_, i) => )}\n {}\n {[...Array(8)].map((_, i) => )}\n

\n }\n {}\n {theme === 'positive' && <>\n

\n {}\n {[...Array(8)].map((_, i) => \n \n )}\n {}\n \n }\n

\n \n {}\n {theme === 'positive' &&

\n {particles.map(particle => )}\n

}\n {}\n {theme === 'negative' &&

\n {}\n \n

}\n {}\n {theme === 'positive' &&

\n {}\n {Array.from({\n length: 8\n }).map((_, i) => \n \n )}\n {}\n {Array.from({\n length: 3\n }).map((_, i) => )}\n

}\n {}\n {theme === 'neutral' &&

\n {}\n \n

}\n

\n {}\n

ZALA VibeTracker

\n \n \n Twitter\n \n \n \n Telegram\n \n \n \n TikTok\n \n \n \n Website\n \n

\n {}\n \n \n {randomMessage}\n \n {}\n {theme === 'positive' && }\n \n {}\n {error && \n \n

Error loading ZALA price data

{error}

\n }\n

\n \n {loading &&

}\n

Current Price

${price}

\n {priceData &&

\n Last updated: {new Date().toLocaleTimeString()}\n

}\n {}\n {theme === 'positive' && }\n {theme === 'negative' && }\n \n \n {loading &&

}\n

{timeFrame === 'm15' ? '15m' : timeFrame === 'h1' ? '1h' : '24h'} Change

\n 2 ? [1, 1.1, 1] : priceChangePercent < -2 ? [1, 0.95, 1] : 1\n }} transition={{\n duration: 1.5,\n repeat: Infinity\n }}>\n {priceChange}%\n \n {priceChangePercent > 0 ? \n \n : priceChangePercent < 0 ? \n \n : \n \n }\n

\n {priceData && priceData.volume &&

\n 24h Volume: ${parseFloat(priceData.volume?.h24 || 0).toLocaleString()}\n

}\n {}\n {theme === 'negative' && }\n {theme === 'negative' && }\n \n \n {loading &&

}\n

Mood Status

\n \n {theme === 'positive' && 'BULLISH AF! 🔥'}\n {theme === 'neutral' && 'Waiting for Liftoff 🚀'}\n {theme === 'negative' && 'PANIC MODE! 💀'}\n \n {theme === 'positive' && \n \n }\n {theme === 'neutral' && \n \n }\n {theme === 'negative' && \n \n }\n

\n {priceData &&

\n {priceData.liquidity?.usd &&

Liquidity: ${parseFloat(priceData.liquidity.usd).toLocaleString()}

}\n {priceData.fdv &&

FDV: ${parseFloat(priceData.fdv).toLocaleString()}

}\n

}\n {}\n {theme === 'positive' && }\n {theme === 'negative' && }\n \n

\n {}\n \n

\n \n

\n \n \n {}\n

\n setShowTokenomics(true)} className={`${currentTheme.button} rounded-xl p-3 text-center text-lg font-bold shadow-lg transition-transform hover:scale-105`} whileHover={{\n scale: 1.03\n }} whileTap={{\n scale: 0.98\n }}>\n View Tokenomics\n \n setShowWhitepaper(true)} className={`${currentTheme.button} rounded-xl p-3 text-center text-lg font-bold shadow-lg transition-transform hover:scale-105`} whileHover={{\n scale: 1.03\n }} whileTap={{\n scale: 0.98\n }}>\n Read Whitepaper\n \n

\n {}\n \n

\n {}\n \n {showTokenomics && setShowTokenomics(false)}>\n e.stopPropagation()}>\n \n

ZALA Tokenomics

\n $\"ZALA$ \n

\n \n }\n \n {}\n \n {showWhitepaper && setShowWhitepaper(false)}>\n e.stopPropagation()}>\n \n

ZALA Whitepaper

\n \n

\n \n }\n \n

;\n}","packageJson","{\"dependencies\":{\"react\":\"18.2.0\",\"framer-motion\":\"10.16.4\",\"lucide-react\":\"0.441.0\"}}","appFunctions",[],"token",{"_18":82,"_83":84,"_85":86,"_87":88,"_89":90,"_91":92,"_93":94,"_95":96,"_97":98,"_72":73},"Z△L△ △I","symbol","ZALA","price",0.0001056,"marketcap",96367,"image","https://pump.mypinata.cloud/ipfs/QmUaDbuzVdFZy4uvH4tNsFq8byXnq2SiCfM1zudfQs1EhZ?img-width=256&img-dpr=2","website","https://dev.fun/p/65b6496d4f06da20c463","twitter","https://x.com/Zala_AI","devCount",22,"appCount",30,"upstreamApp","isLordOfDev","analytics",[103,107,109,111,113,115,117,119,121,123,125,127,129,131,133,134,135],{"_104":105,"_106":59},"day","2025-08-16","runCount",{"_104":108,"_106":59},"2025-08-17",{"_104":110,"_106":59},"2025-08-18",{"_104":112,"_106":59},"2025-08-19",{"_104":114,"_106":59},"2025-08-20",{"_104":116,"_106":59},"2025-08-21",{"_104":118,"_106":59},"2025-08-22",{"_104":120,"_106":59},"2025-08-23",{"_104":122,"_106":59},"2025-08-24",{"_104":124,"_106":59},"2025-08-25",{"_104":126,"_106":59},"2025-08-26",{"_104":128,"_106":59},"2025-08-27",{"_104":130,"_106":59},"2025-08-28",{"_104":132,"_106":59},"2025-08-29",{"_104":108,"_106":41},{"_104":130,"_106":41},{"_104":132,"_106":41},"snapshot","ogImage","https://cdn.dev.fun/og/image/e12a0775a82068485baa/eac9e8da.webp","isDevbase","actionData","errors"]

say something