[{"_1":2,"_133":-5,"_134":-5},"loaderData",{"_3":4,"_10":11},"root",{"_5":-5,"_6":7,"_8":9},"user","appId","cm7twdhs6009l11ml868xhxld","wsEndpoint","https://dev.fun","routes/app.$appId",{"_12":13},"appDetail",{"_14":15,"_16":17,"_18":19,"_20":21,"_22":23,"_24":25,"_26":25,"_27":28,"_29":30,"_31":32,"_33":34,"_35":36,"_37":38,"_39":40,"_41":42,"_5":43,"_55":56,"_57":58,"_59":40,"_60":61,"_62":58,"_63":58,"_64":58,"_65":58,"_66":58,"_67":58,"_68":17,"_69":17,"_70":71,"_72":73,"_74":75,"_76":77,"_78":79,"_95":-5,"_96":17,"_97":98,"_129":30,"_130":131,"_132":17},"id","a4cd7c71a6c8a8dc5f54","isMyApp",false,"name","clicktopia","description","The ultimate web3 degen paradise where you can smash a giant, shiny button to increment an on-chain counter for absolutely no reason whatsoever! Watch as confetti explodes, random memes appear, and your wallet address climbs the leaderboard of pointless achievements while sarcastic messages mock your life choices.","brief","Waste transactions clicking a shiny button for zero utility but maximum degen street cred!","isLive",true,"isPublic","tags",[],"cover","https://cdn.dev.fun/snapshot/a4cd7c71a6c8a8dc5f54/77330_aaa4f7cd.webp","cdnUrl","https://cdn.dev.fun/app/a4cd7c71a6c8a8dc5f54/77330","createdAt",["D",1749485778146],"updatedAt",["D",1749488084537],"lastCommitId",["B","77330"],"tier",1,"credits",-1,{"_14":44,"_45":46,"_47":46,"_48":49,"_50":46,"_51":52,"_53":54},"57caf028-9b9c-4b1f-978d-f4bd263f897a","uniqueId","akashi","username","solanaWallet","U6xkSm97NzaYzyNzL6gbChUjWeibFXkqvdhGteh3GZ3","displayName","bio","","avatar","/avatar.svg","commitCount",5,"forkCount",0,"likeCount","runsCount",11,"downvoteCount","upvoteCount","upvoteRate","commentCount","reportCount","visitorCount","isArchived","isRenamed","contractAddress","3FS6NniKvhNtMDCNS98jgNfRF7zZD6exRT1xAf3kpump","code","import { useState, useEffect, useCallback, useRef } from 'react';\nimport { WalletMultiButton } from \"@solana/wallet-adapter-react-ui\";\nimport { useWallet, ConnectionProvider, WalletProvider } from \"@solana/wallet-adapter-react\";\nimport { WalletModalProvider } from \"@solana/wallet-adapter-react-ui\";\nimport { StateClient } from '@devfunlabs/state-client';\nimport { motion, AnimatePresence } from 'framer-motion';\nimport confetti from 'canvas-confetti';\nimport \"@solana/wallet-adapter-react-ui/styles.css\";\nconst client = new StateClient({\n baseURL: 'https://state.dev.fun',\n appId: 'a4cd7c71a6c8a8dc5f54'\n});\nconst generatePseudonym = () => {\n const prefixes = ['Bagholder', 'DiamondHands', 'PaperHands', 'Degen', 'Ape', 'MoonBoi', 'FOMO', 'FUD', 'Rekt', 'Whale', 'Rugpull', 'Lambo', 'ExitLiquidity', 'WenMoon', 'LiquidatedAgain', 'BuyTheTop', 'SellTheBottom', 'YoloTrader', 'SafeMoon', 'Hodler'];\n const suffixes = ['420', '69', 'WAGMI', 'GigaBrain', 'DumpIt', 'PampIt', 'Maxi', 'ToTheMoon', '3000X', 'Anon', 'WenLambo', 'Wen$1', 'NotFinancialAdvice', 'NGMI', 'HFSP', 'MaxLeverage', 'GoodEntry', 'ShortSqueeze'];\n const prefix = prefixes[Math.floor(Math.random() * prefixes.length)];\n const suffix = suffixes[Math.floor(Math.random() * suffixes.length)];\n return `${prefix}${Math.floor(Math.random() * 100)}${suffix}`;\n};\nconst filterMessage = message => {\n const badWords = ['fuck', 'shit', 'ass', 'bitch', 'cunt', 'dick', 'pussy', 'nigga', 'nigger', 'faggot'];\n let filteredMessage = message;\n badWords.forEach(word => {\n const regex = new RegExp(word, 'gi');\n filteredMessage = filteredMessage.replace(regex, '*'.repeat(word.length));\n });\n return filteredMessage;\n};\nconst getCurrentDate = () => {\n const now = new Date();\n return `${now.getFullYear()}-${String(now.getMonth() + 1).padStart(2, '0')}-${String(now.getDate()).padStart(2, '0')}`;\n};\nconst AppWithProvider = () => {\n const endpoint = 'https://rpc.dev.fun/a4cd7c71a6c8a8dc5f54';\n return \n \n \n \n \n \n ;\n};\nfunction App() {\n const {\n publicKey\n } = useWallet();\n const [totalClicks, setTotalClicks] = useState(0);\n const [userClicks, setUserClicks] = useState(0);\n const [message, setMessage] = useState('');\n const [leaderboard, setLeaderboard] = useState([]);\n const [streakLeaderboard, setStreakLeaderboard] = useState([]);\n const [showCelebration, setShowCelebration] = useState(false);\n const [celebrationText, setCelebrationText] = useState('');\n const [isButtonPulsing, setIsButtonPulsing] = useState(false);\n const [showMeme, setShowMeme] = useState(false);\n const [memeIndex, setMemeIndex] = useState(0);\n const [userStreak, setUserStreak] = useState(0);\n const [brokeStreak, setBrokeStreak] = useState(false);\n const [showChatForm, setShowChatForm] = useState(false);\n const [chatMessage, setChatMessage] = useState('');\n const [chatMessages, setChatMessages] = useState([]);\n const [lastMessageTime, setLastMessageTime] = useState(0);\n const [canSendMessage, setCanSendMessage] = useState(true);\n const [messageCountdown, setMessageCountdown] = useState(0);\n const [soundEnabled, setSoundEnabled] = useState(true);\n const [comboCount, setComboCount] = useState(0);\n const [showCombo, setShowCombo] = useState(false);\n const [comboTimeout, setComboTimeout] = useState(null);\n const [showMilestone, setShowMilestone] = useState(false);\n const [milestoneMessage, setMilestoneMessage] = useState('');\n const buttonRef = useRef(null);\n const audioRef = useRef(null);\n const comboRef = useRef(null);\n const degenMessages = [\"You just wasted a transaction. Nice.\", \"Degens click. Chads build.\", \"Number go up, IQ go down.\", \"Nothing happened. Try again.\", \"You are now 0.0001% more degen.\", \"Your family is proud.\", \"Degens unite. For what? Unsure.\", \"Achievement unlocked: Pointless Transaction\", \"Mom: 'Are ya winning son?' You: *clicking button*\", \"Your wallet is crying right now\", \"This is what peak degeneracy looks like\", \"Wen utility? Never.\", \"Imagine explaining this to your grandparents\", \"What if the real gains were the clicks we made along the way?\", \"Up only. Click only.\", \"The SEC is watching your clicks\", \"Satoshi didn't die for this\", \"Vitalik sheds a tear with every click\", \"This is technically web3, somehow\", \"WAGMI (We All Get Meaningless Interactions)\"];\n const memeUrls = [\"https://i.imgur.com/sMOsgCA.png\", \"https://i.imgur.com/XqADbJd.png\", \"https://i.imgur.com/mwClxaY.jpg\", \"https://i.imgur.com/k5cTSVc.png\", \"https://i.imgur.com/FcVvVNz.jpg\", \"https://i.imgur.com/3hmL5aX.jpg\", \"https://i.imgur.com/D5nlcMH.jpg\", \"https://i.imgur.com/mDa3Mpp.jpg\", \"https://i.imgur.com/tAjml1f.jpg\", \"https://i.imgur.com/IEuqL1B.jpg\"];\n const celebrationSounds = [\"https://assets.mixkit.co/sfx/preview/mixkit-animated-small-group-applause-523.mp3\", \"https://assets.mixkit.co/sfx/preview/mixkit-winning-chimes-2015.mp3\", \"https://assets.mixkit.co/sfx/preview/mixkit-game-level-completed-2059.mp3\"];\n const clickSounds = [\"https://assets.mixkit.co/sfx/preview/mixkit-arcade-game-jump-coin-216.mp3\", \"https://assets.mixkit.co/sfx/preview/mixkit-plastic-bubble-click-1124.mp3\", \"https://assets.mixkit.co/sfx/preview/mixkit-classic-click-1117.mp3\", \"https://assets.mixkit.co/sfx/preview/mixkit-quick-win-video-game-notification-269.mp3\", \"https://assets.mixkit.co/sfx/preview/mixkit-game-ball-tap-2073.mp3\"];\n const milestoneMessages = [\"You unlocked nothing! Congrats on 1,000 pointless clicks!\", \"Your fingers deserve a holiday. But they won't get one.\", \"1,000 clicks later, and you're still here. Impressive dedication to nothing.\", \"Achievement Unlocked: Advanced Time Waster\", \"Congrats! You've now clicked enough times to have mined 0.00000 BTC!\", \"Your significant other is definitely proud of this milestone.\", \"If only your portfolio pumped as much as your clicking finger.\", \"You could have learned a new skill instead of clicking this button 1,000 times.\", \"This is definitely going on your resume, right?\", \"1,000 clicks = 1 imaginary token. Current value: $0.00\"];\n const fetchData = useCallback(async () => {\n try {\n let clicksData = await client.getEntity('clicksCounter', 'global');\n if (!clicksData) {\n clicksData = await client.createEntity('clicksCounter', {\n id: 'global',\n count: 0\n });\n }\n setTotalClicks(clicksData.count);\n if (publicKey) {\n const walletAddress = publicKey.toString();\n let userClicksData = await client.getEntity('clicksCounter', walletAddress);\n if (userClicksData) {\n setUserClicks(userClicksData.count);\n if (userClicksData.streak !== undefined) {\n setUserStreak(userClicksData.streak);\n }\n if (userClicksData.brokeStreak) {\n setBrokeStreak(true);\n } else {\n setBrokeStreak(false);\n }\n } else {\n setUserClicks(0);\n setUserStreak(0);\n }\n }\n const allClicks = await client.getEntities('clicksCounter');\n const filteredClicks = allClicks.filter(item => item.id !== 'global').sort((a, b) => b.count - a.count).slice(0, 5);\n setLeaderboard(filteredClicks);\n const streakLeaders = allClicks.filter(item => item.id !== 'global' && item.streak !== undefined).sort((a, b) => (b.streak || 0) - (a.streak || 0)).slice(0, 5);\n setStreakLeaderboard(streakLeaders);\n const messages = await client.getEntities('degenChat');\n const sortedMessages = messages.sort((a, b) => b.timestamp - a.timestamp).slice(0, 50);\n setChatMessages(sortedMessages);\n } catch (error) {\n console.error(\"Error fetching data:\", error);\n }\n }, [publicKey]);\n useEffect(() => {\n fetchData();\n const intervalId = setInterval(() => {\n fetchData();\n }, 10000);\n const pulseInterval = setInterval(() => {\n setIsButtonPulsing(prev => !prev);\n }, 2000);\n const countdownInterval = setInterval(() => {\n if (messageCountdown > 0) {\n setMessageCountdown(prev => prev - 1);\n } else if (!canSendMessage) {\n setCanSendMessage(true);\n }\n }, 1000);\n const savedSoundPref = localStorage.getItem('clicktopiaSoundEnabled');\n if (savedSoundPref !== null) {\n setSoundEnabled(savedSoundPref === 'true');\n }\n const preloadedSounds = clickSounds.map(soundUrl => {\n const audio = new Audio();\n audio.src = soundUrl;\n audio.preload = 'auto';\n return audio;\n });\n audioRef.current = {\n preloadedSounds,\n currentSound: null\n };\n memeUrls.forEach(imageUrl => {\n const img = new Image();\n img.src = imageUrl;\n });\n return () => {\n clearInterval(pulseInterval);\n clearInterval(intervalId);\n clearInterval(countdownInterval);\n if (comboTimeout) {\n clearTimeout(comboTimeout);\n }\n };\n }, [fetchData, messageCountdown, canSendMessage, comboTimeout]);\n const triggerConfetti = () => {\n const canvasConfetti = confetti.create(document.getElementById('confetti-canvas'), {\n resize: true,\n useWorker: true\n });\n const buttonRect = buttonRef.current?.getBoundingClientRect();\n let originX = 0.5;\n let originY = 0.5;\n if (buttonRect) {\n originX = (buttonRect.left + buttonRect.width / 2) / window.innerWidth;\n originY = (buttonRect.top + buttonRect.height / 2) / window.innerHeight;\n }\n canvasConfetti({\n particleCount: 200,\n spread: 160,\n origin: {\n x: originX,\n y: originY\n },\n gravity: 1.2,\n drift: 0,\n ticks: 300,\n shapes: ['circle', 'square'],\n colors: ['#FFD700', '#00FF00', '#FF00FF', '#00FFFF', '#FF0000', '#8A2BE2', '#FFA500'],\n scalar: 1.2\n });\n setTimeout(() => {\n canvasConfetti({\n particleCount: 50,\n angle: 130,\n spread: 70,\n origin: {\n x: originX,\n y: originY\n },\n gravity: 1,\n drift: 0.2,\n ticks: 250,\n shapes: ['circle'],\n colors: ['#FFD700'],\n scalar: 2\n });\n }, 100);\n setTimeout(() => {\n canvasConfetti({\n particleCount: 40,\n angle: 50,\n spread: 50,\n origin: {\n x: originX,\n y: originY\n },\n gravity: 0.8,\n startVelocity: 25,\n ticks: 200,\n colors: ['#FFFFFF', '#FFA500'],\n scalar: 0.6\n });\n }, 200);\n };\n const playClickSound = () => {\n if (soundEnabled && audioRef.current) {\n if (audioRef.current.currentSound) {\n audioRef.current.currentSound.pause();\n audioRef.current.currentSound.currentTime = 0;\n }\n const randomIndex = Math.floor(Math.random() * audioRef.current.preloadedSounds.length);\n const sound = audioRef.current.preloadedSounds[randomIndex];\n sound.volume = 0.7;\n sound.currentTime = 0;\n audioRef.current.currentSound = sound;\n sound.play().catch(e => console.error(\"Audio playback failed:\", e));\n }\n };\n const incrementCombo = () => {\n if (comboTimeout) {\n clearTimeout(comboTimeout);\n }\n setComboCount(prev => prev + 1);\n if (comboCount + 1 >= 3) {\n setShowCombo(true);\n setTimeout(() => setShowCombo(false), 1500);\n }\n const timeout = setTimeout(() => {\n setComboCount(0);\n setShowCombo(false);\n }, 2000);\n setComboTimeout(timeout);\n };\n const toggleSound = () => {\n const newSoundState = !soundEnabled;\n setSoundEnabled(newSoundState);\n localStorage.setItem('clicktopiaSoundEnabled', newSoundState.toString());\n };\n const showRandomMilestone = () => {\n const message = milestoneMessages[Math.floor(Math.random() * milestoneMessages.length)];\n setMilestoneMessage(message);\n setShowMilestone(true);\n };\n const showRandomMeme = () => {\n const newIndex = Math.floor(Math.random() * memeUrls.length);\n setMemeIndex(newIndex);\n setShowMeme(true);\n setTimeout(() => setShowMeme(false), 2000);\n };\n const checkForImageSurprise = clickCount => {\n const isRandomMilestone = clickCount % 25 === 0;\n const isSpecificMilestone = [50, 100, 200, 500, 1000].includes(clickCount);\n const isRandomSurprise = Math.random() < 0.1 && clickCount > 10;\n return isRandomMilestone || isSpecificMilestone || isRandomSurprise;\n };\n const handleClick = async () => {\n playClickSound();\n incrementCombo();\n if (!publicKey) {\n setMessage(\"Connect your wallet to record clicks, degen!\");\n triggerConfetti();\n showRandomMeme();\n return;\n }\n try {\n let globalClicks = await client.getEntity('clicksCounter', 'global');\n if (!globalClicks) {\n globalClicks = await client.createEntity('clicksCounter', {\n id: 'global',\n count: 1\n });\n } else {\n globalClicks = await client.updateEntity('clicksCounter', 'global', {\n count: globalClicks.count + 1\n });\n }\n setTotalClicks(globalClicks.count);\n const walletAddress = publicKey.toString();\n let userClicksData = await client.getEntity('clicksCounter', walletAddress);\n let newUserClicks = 0;\n let currentStreak = 0;\n const today = getCurrentDate();\n if (!userClicksData) {\n userClicksData = await client.createEntity('clicksCounter', {\n id: walletAddress,\n count: 1,\n address: walletAddress.slice(0, 4) + '...' + walletAddress.slice(-4),\n lastClickDate: today,\n streak: 1,\n brokeStreak: false\n });\n newUserClicks = 1;\n currentStreak = 1;\n } else {\n newUserClicks = userClicksData.count + 1;\n if (newUserClicks % 1000 === 0) {\n showRandomMilestone();\n }\n if (checkForImageSurprise(newUserClicks)) {\n showRandomMeme();\n }\n if (userClicksData.lastClickDate) {\n const lastClick = new Date(userClicksData.lastClickDate);\n const now = new Date(today);\n const diffTime = Math.abs(now - lastClick);\n const diffDays = Math.floor(diffTime / (1000 * 60 * 60 * 24));\n if (diffDays === 0 && userClicksData.lastClickDate === today) {\n currentStreak = userClicksData.streak || 0;\n } else if (diffDays === 1 || diffDays === 0 && userClicksData.lastClickDate !== today) {\n currentStreak = (userClicksData.streak || 0) + 1;\n } else if (diffDays > 1) {\n currentStreak = 1;\n userClicksData = await client.updateEntity('clicksCounter', walletAddress, {\n brokeStreak: true\n });\n setBrokeStreak(true);\n } else {\n currentStreak = userClicksData.streak || 0;\n }\n } else {\n currentStreak = 1;\n }\n userClicksData = await client.updateEntity('clicksCounter', walletAddress, {\n count: newUserClicks,\n address: walletAddress.slice(0, 4) + '...' + walletAddress.slice(-4),\n lastClickDate: today,\n streak: currentStreak,\n brokeStreak: false\n });\n }\n setUserClicks(newUserClicks);\n setUserStreak(currentStreak);\n const randomMessage = degenMessages[Math.floor(Math.random() * degenMessages.length)];\n setMessage(randomMessage);\n triggerConfetti();\n showRandomMeme();\n if (newUserClicks === 100 || newUserClicks === 1000 || newUserClicks === 10000) {\n setCelebrationText(`TRUE DEGEN UNLOCKED! ${newUserClicks} CLICKS!`);\n setShowCelebration(true);\n if (audioRef.current) {\n audioRef.current.src = celebrationSounds[Math.floor(Math.random() * celebrationSounds.length)];\n audioRef.current.play().catch(e => console.error(\"Audio playback failed:\", e));\n }\n setTimeout(() => setShowCelebration(false), 5000);\n }\n setShowChatForm(true);\n await fetchData();\n } catch (error) {\n console.error(\"Error incrementing clicks:\", error);\n setMessage(\"Error recording click. Even your failures are on-chain now.\");\n }\n };\n const handleShare = () => {\n const emojis = ['🔥', '🚀', '🧻', '🖱️', '💸', '🤑', '🧠'];\n const randomEmojis = [emojis[Math.floor(Math.random() * emojis.length)], emojis[Math.floor(Math.random() * emojis.length)]];\n const tweetText = `I just smashed the click button in $CLICKTOPIA ${randomEmojis[0]}${randomEmojis[1]}\\nDegens only. Try it yourself: https://dev.fun/p/a4cd7c71a6c8a8dc5f54`;\n const twitterWindow = window.open(`https://twitter.com/intent/tweet?text=${encodeURIComponent(tweetText)}`, '_blank');\n if (!twitterWindow || twitterWindow.closed || typeof twitterWindow.closed === 'undefined') {\n navigator.clipboard.writeText(tweetText).then(() => {\n setMessage(\"Tweet copied to clipboard! Ready to share your degen flex!\");\n }).catch(err => {\n console.error('Failed to copy: ', err);\n setMessage(\"Couldn't open Twitter or copy to clipboard. Such degen, much fail.\");\n });\n }\n };\n const handleSubmitMessage = async e => {\n e.preventDefault();\n if (!publicKey) {\n setMessage(\"Connect your wallet to leave your degen wisdom!\");\n return;\n }\n if (!chatMessage.trim()) {\n return;\n }\n if (!canSendMessage) {\n setMessage(`Slow down, degen! Wait ${messageCountdown} seconds to post again.`);\n return;\n }\n if (chatMessage.length > 120) {\n setMessage(\"Your wisdom is too powerful! Keep it under 120 characters.\");\n return;\n }\n try {\n const now = Date.now();\n const walletAddress = publicKey.toString();\n if (now - lastMessageTime < 60000) {\n setCanSendMessage(false);\n setMessageCountdown(60);\n setMessage(\"Slow down, degen! One message per minute.\");\n return;\n }\n const filteredContent = filterMessage(chatMessage);\n const pseudonym = generatePseudonym();\n await client.createEntity('degenChat', {\n id: `${walletAddress}-${now}`,\n message: filteredContent,\n pseudonym: pseudonym,\n timestamp: now,\n walletAddress: walletAddress\n });\n setLastMessageTime(now);\n setChatMessage(\"\");\n setShowChatForm(false);\n setMessage(\"Your degen wisdom has been immortalized!\");\n await fetchData();\n } catch (error) {\n console.error(\"Error posting message:\", error);\n setMessage(\"Failed to share your wisdom. Even your failures are on-chain now.\");\n }\n };\n return

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

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

\n ↑\n

)}\n

\n\n {}\n

\n CLICKTOPIA\n

\n {celebrationText}\n

\n Total Degen Clicks: {totalClicks}\n

LATEST DEGEN WISDOM

DEGEN LEADERBOARD

TOP DEGEN STREAKS

\n 🔥 MILESTONE UNLOCKED 🔥\n

say something