[{"_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,"_31":32,"_33":34,"_35":36,"_37":38,"_39":40,"_41":42,"_43":44,"_5":45,"_57":58,"_59":60,"_61":62,"_63":64,"_65":66,"_67":66,"_68":66,"_69":66,"_70":66,"_71":66,"_72":17,"_73":17,"_74":75,"_76":77,"_78":79,"_80":81,"_82":83,"_100":-5,"_101":17,"_102":103,"_136":32,"_137":138,"_139":17},"id","97c5b292ba65b434435d","isMyApp",false,"name","berablast.lol","description","The most sophisticated 6-button DeFi experience featuring dancing bears and real-time market cap warfare between $BLAST and $BBLAST. Watch in HD glory as two bears groove to the moon while you obsessively track how close $BBLAST is to flipping its inspiration - it's like Bloomberg Terminal meets Bear Grylls meets absolute chaos.","brief","","isLive",true,"isPublic","tags",[29,30],"💰","👑","cover","https://cdn.dev.fun/snapshot/97c5b292ba65b434435d/18517_509e4eae.webp","cdnUrl","https://cdn.dev.fun/app/97c5b292ba65b434435d/18517","createdAt",["D",1739272247808],"updatedAt",["D",1739535917908],"lastCommitId",["B","18517"],"tier",1,"credits",-4,{"_14":46,"_47":48,"_49":48,"_50":51,"_52":48,"_53":54,"_55":56},"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",187,"forkCount",8,"likeCount",4,"runsCount",3218,"downvoteCount",0,"upvoteCount","upvoteRate","commentCount","reportCount","visitorCount","isArchived","isRenamed","contractAddress","3HfLqhtF5hR5dyBXh6BMtRaTm9qzStvEGuMa8Gx6pump","code","import React, { useState, useEffect, useCallback, useRef } from 'react';\nimport io from 'socket.io-client';\nimport { ShoppingCart } from 'lucide-react';\nconst fontStyle = `\n@import url('https://fonts.googleapis.com/css2?family=Press+Start+2P&display=swap');\n\n@keyframes glowPulse {\n 0% { box-shadow: 0 0 5px #fbbf24, 0 0 10px #fbbf24, 0 0 15px #fbbf24; }\n 50% { box-shadow: 0 0 10px #fbbf24, 0 0 20px #fbbf24, 0 0 30px #fbbf24; }\n 100% { box-shadow: 0 0 5px #fbbf24, 0 0 10px #fbbf24, 0 0 15px #fbbf24; }\n}\n\n@keyframes fallDiagonal {\n 0% { transform: translate(0, -50px) rotate(0deg); opacity: 1; }\n 50% { transform: translate(150px, 300px) rotate(180deg); opacity: 0.8; }\n 100% { transform: translate(300px, 600px) rotate(360deg); opacity: 0; }\n}\n\n@keyframes fallVertical {\n 0% { transform: translateY(-50px); opacity: 1; }\n 50% { transform: translateY(300px); opacity: 0.8; }\n 100% { transform: translateY(600px); opacity: 0; }\n}\n\n@keyframes sparkle {\n 0% { transform: scale(1); opacity: 1; }\n 50% { transform: scale(1.5); opacity: 0.8; }\n 100% { transform: scale(1); opacity: 0; }\n}\n\n@keyframes shimmer {\n 0% { background-position: 200% 0; }\n 100% { background-position: -200% 0; }\n}\n\n@keyframes shine {\n 0% { transform: translateX(-100%); }\n 100% { transform: translateX(100%); }\n}\n\n* {\n font-family: 'Press Start 2P', monospace;\n letter-spacing: 1px;\n line-height: 1.5;\n}\n\n.animate-shimmer {\n animation: shimmer 8s linear infinite;\n}\n\n.animate-shine {\n animation: shine 2s linear infinite;\n}\n\n.text-3xl {\n font-size: 1.5rem !important;\n}\n\n.text-2xl {\n font-size: 1.25rem !important;\n}\n\n.text-xl {\n font-size: 1.125rem !important;\n}\n\n.text-sm {\n font-size: 0.75rem !important;\n}\n\n.text-xs {\n font-size: 0.625rem !important;\n}\n`;\nconst styleSheet = document.createElement('style');\nstyleSheet.textContent = fontStyle;\ndocument.head.appendChild(styleSheet);\nconst GifPopup = ({\n onClose\n}) => {\n return

\n \n $\"Bear$ \n

;\n};\nexport default function App() {\n const socketRef = useRef(null);\n const [bblastPrice, setBblastPrice] = useState(0);\n const [blastPrice, setBlastPrice] = useState(0);\n const [isConnected, setIsConnected] = useState(false);\n useEffect(() => {\n socketRef.current = io('wss://ws.dev.fun/app-97c5b292ba65b434435d', {\n transports: ['websocket'],\n reconnection: true,\n reconnectionAttempts: 5,\n reconnectionDelay: 1000,\n timeout: 20000\n });\n const onConnect = () => setIsConnected(true);\n const onDisconnect = () => setIsConnected(false);\n socketRef.current.on('connect', onConnect);\n socketRef.current.on('disconnect', onDisconnect);\n return () => {\n if (socketRef.current) {\n socketRef.current.off('connect', onConnect);\n socketRef.current.off('disconnect', onDisconnect);\n socketRef.current.disconnect();\n }\n };\n }, []);\n const [bblastMcap, setBblastMcap] = useState(0);\n const [blastMcap, setBlastMcap] = useState(0);\n const [countdown, setCountdown] = useState(60);\n const [showBblastChart, setShowBblastChart] = useState(true);\n const [showBlastChart, setShowBlastChart] = useState(true);\n const [showGif, setShowGif] = useState(false);\n const [showFlip, setShowFlip] = useState(false);\n const [showBblastInfo, setShowBblastInfo] = useState(false);\n const [showBlastInfo, setShowBlastInfo] = useState(false);\n const [showSocial, setShowSocial] = useState(false);\n const [flipProgress, setFlipProgress] = useState(0);\n const [prevFlipProgress, setPrevFlipProgress] = useState(0);\n const [showRain, setShowRain] = useState(true);\n const [rainType, setRainType] = useState('BBLAST');\n const [rainIntensity, setRainIntensity] = useState(0.05);\n const BLAST_CIRCULATING_SUPPLY = 25.32 * 1000000000; // 25.32 billion\n const BBLAST_CIRCULATING_SUPPLY = 36 * 1000000000; // 36 billion\n\n // Dedicated useEffect for flip progress calculation and animation\n useEffect(() => {\n if (bblastMcap > 0 && blastMcap > 0) {\n const progress = bblastMcap / blastMcap * 100;\n const newProgress = Math.min(progress, 100);\n if (newProgress !== flipProgress) {\n const change = newProgress - prevFlipProgress;\n if (Math.abs(change) > 0.01) {\n setRainType(change > 0 ? 'BBLAST' : 'BLAST');\n setRainIntensity(change);\n setShowRain(true);\n setTimeout(() => setShowRain(false), 6000);\n }\n setPrevFlipProgress(flipProgress);\n setFlipProgress(newProgress);\n }\n }\n }, [bblastMcap, blastMcap, flipProgress, prevFlipProgress]);\n useEffect(() => {\n const timer = setInterval(() => {\n setCountdown(prev => prev > 0 ? prev - 1 : 60);\n }, 1000);\n return () => clearInterval(timer);\n }, []);\n useEffect(() => {\n const fetchPrices = async () => {\n try {\n // Fetch BBLAST price from Berachain\n const bblastResponse = await fetch('https://dev.fun/api/proxy?url=' + encodeURIComponent('https://api.dexscreener.com/latest/dex/pairs/berachain/0x553ba9f702b4de778c983d2ee60f8ae0b79f52a5'));\n const bblastData = await bblastResponse.json();\n if (bblastData.pair) {\n const bblastPrice = Number(bblastData.pair.priceUsd);\n setBblastPrice(bblastPrice);\n setBblastMcap(bblastPrice * BBLAST_CIRCULATING_SUPPLY);\n }\n\n // Fetch BLAST price from Blast\n const blastResponse = await fetch('https://dev.fun/api/proxy?url=' + encodeURIComponent('https://api.dexscreener.com/latest/dex/pairs/blast/0x9a0aa28d999a21d3cf6f2703cdbba9feaf4a32f7'));\n const blastData = await blastResponse.json();\n if (blastData.pair) {\n const blastPrice = Number(blastData.pair.priceUsd);\n setBlastPrice(blastPrice);\n const currentBlastMcap = blastPrice * BLAST_CIRCULATING_SUPPLY;\n setBlastMcap(currentBlastMcap);\n }\n } catch (error) {\n console.error('Error fetching prices:', error);\n }\n };\n fetchPrices();\n const interval = setInterval(fetchPrices, 60000); // Update every minute\n return () => clearInterval(interval);\n }, []);\n const RainEffect = ({\n type,\n intensity\n }) => {\n const containerRef = useRef(null);\n const spritesRef = useRef([]);\n const animationRef = useRef(null);\n const lastTimeRef = useRef(Date.now());\n const createSprite = () => ({\n id: Date.now(),\n x: Math.random() * window.innerWidth,\n y: -50,\n velocityY: 2 + Math.random() * 2,\n velocityX: (Math.random() - 0.5) * 2,\n rotation: Math.random() * 360,\n rotationSpeed: (Math.random() - 0.5) * 4,\n scale: 0.5 + Math.random() * 0.5,\n opacity: 0.8 + Math.random() * 0.2,\n settled: false\n });\n useEffect(() => {\n const spawnSprite = () => {\n spritesRef.current = [...spritesRef.current, createSprite()];\n console.log('Sprite created, total:', spritesRef.current.length);\n };\n\n // Spawn initial sprites\n for (let i = 0; i < 10; i++) {\n spawnSprite();\n }\n\n // Spawn a new sprite every 2-5 seconds\n const spawnInterval = setInterval(() => {\n if (Math.random() < 0.7) {\n // 70% chance to spawn\n spawnSprite();\n }\n }, 2000 + Math.random() * 3000);\n return () => {\n clearInterval(spawnInterval);\n spritesRef.current = [];\n };\n const animate = () => {\n const currentTime = Date.now();\n const deltaTime = (currentTime - lastTimeRef.current) / 16;\n lastTimeRef.current = currentTime;\n spritesRef.current = spritesRef.current.map(sprite => {\n if (sprite.settled) return sprite;\n const newY = sprite.y + sprite.velocityY * deltaTime;\n const newX = sprite.x + sprite.velocityX * deltaTime;\n const newRotation = sprite.rotation + sprite.rotationSpeed * deltaTime;\n\n // Check for bottom collision\n if (newY > window.innerHeight - 30) {\n return {\n ...sprite,\n y: window.innerHeight - 30,\n velocityY: 0,\n velocityX: 0,\n rotationSpeed: 0,\n settled: true\n };\n }\n return {\n ...sprite,\n x: newX,\n y: newY,\n rotation: newRotation\n };\n });\n\n // Keep all settled sprites, no removal\n spritesRef.current = spritesRef.current.filter(sprite => {\n if (sprite.settled) return true;\n return sprite.y < window.innerHeight + 100;\n });\n if (containerRef.current) {\n containerRef.current.style.transform = 'translate3d(0,0,0)';\n }\n animationRef.current = requestAnimationFrame(animate);\n };\n animationRef.current = requestAnimationFrame(animate);\n return () => {\n if (animationRef.current) {\n cancelAnimationFrame(animationRef.current);\n }\n };\n }, [type, intensity]);\n return

\n {spritesRef.current.map(sprite =>

say something