[{"_1":2,"_250":-5,"_251":-5},"loaderData",{"_3":4,"_10":11},"root",{"_5":-5,"_6":7,"_8":9},"user","appId","cm7twdhs6009l11ml868xhxld","wsEndpoint","https://dev.fun","routes/p.$appId",{"_12":13,"_248":-5,"_91":-7,"_249":17},"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":43,"_67":43,"_68":61,"_69":61,"_70":61,"_71":17,"_72":27,"_73":-5,"_74":75,"_76":77,"_78":79,"_80":-5,"_81":82,"_198":17,"_105":17,"_199":200,"_91":33,"_93":238,"_239":27,"_240":241},"id","1a46d912451370d301e2","isMyApp",false,"projectId","cmh5hbfke008310nc9f6i34i8","name","Potdotfun","description","POT DOT FUN, THE WEB3 LOTTERY.\n\nPotDotFun brings the thrill of the lottery into the Web3 era; fast, transparent, and borderless. \n\nPlayers from all over the world join one global jackpot powered by blockchain technology. \n\nNo intermediaries, no waiting, instant payouts straight to your wallet.","brief","YESNODAO but completely silent - bet, win, celebrate using only emojis and icons 🔮✨","isLive",true,"isPublic","tags",[31],"👑","cover","https://cdn.dev.fun/snapshot/1a46d912451370d301e2/134122_5ebd593b.webp","cdnUrl","https://cdn.dev.fun/app/1a46d912451370d301e2/134122","createdAt",["D",1761348705948],"updatedAt",["D",1761435000478],"lastCommitId",["B","134122"],"tier",1,"credits",-1060,{"_14":47,"_48":49,"_50":49,"_51":52,"_53":49,"_54":55,"_56":57},"3d51f16b-ca1c-44cc-b193-48cb207057b2","uniqueId","anonbuilder","username","solanaWallet","5k31VJf2qQZqFy5p41MfP58t6Hdaw7yreM84rGG47vam","displayName","bio","enjoying the tools!","avatar","/avatar.svg","commitCount",269,"forkCount",0,"likeCount","runsCount",409,"downvoteCount","upvoteCount","upvoteRate","commentCount","reportCount","visitorCount","isArchived","isRenamed","contractAddress","code","import { useState, useEffect, useMemo } from 'react';\nimport { useDevapp, UserButton, DevappProvider, openLink } from '@devfunlabs/web-sdk';\nimport { PhantomWalletAdapter, SolflareWalletAdapter } from '@solana/wallet-adapter-wallets';\nimport { Connection, PublicKey, LAMPORTS_PER_SOL } from '@solana/web3.js';\nimport { motion } from 'framer-motion';\nexport default function AppWithProvider() {\n const wallets = useMemo(() => [new PhantomWalletAdapter(), new SolflareWalletAdapter()], []);\n return \n \n ;\n}\nfunction PixelatedText({\n children,\n className = \"\",\n size = \"md\"\n}) {\n const sizeClasses = {\n sm: \"text-sm\",\n md: \"text-lg\",\n lg: \"text-xl\",\n xl: \"text-2xl\",\n \"2xl\": \"text-3xl\"\n };\n return

\n {children}\n

;\n}\nfunction EmojiText({\n children,\n className = \"\",\n size = \"md\"\n}) {\n const sizeClasses = {\n sm: \"text-xl\",\n md: \"text-2xl\",\n lg: \"text-3xl\",\n xl: \"text-4xl\",\n \"2xl\": \"text-5xl\"\n };\n return

\n {children}\n

;\n}\nfunction PixelButton({\n children,\n onClick,\n color = \"blue\",\n disabled = false,\n className = \"\"\n}) {\n const colorClasses = {\n blue: \"bg-[#3498db] hover:bg-[#33e6ff] border-b-4 border-[#0a3d62] hover:border-[#33e6ff] text-white\",\n green: \"bg-[#4cd964] hover:bg-[#4cd964] border-b-4 border-[#2ecc71] hover:border-[#27ae60] text-white\",\n red: \"bg-[#ff3b30] hover:bg-[#ff3b30] border-b-4 border-[#c0392b] hover:border-[#e74c3c] text-white\",\n yellow: \"bg-[#ffde00] hover:bg-[#ffde00] border-b-4 border-[#f39c12] hover:border-[#f1c40f] text-black\",\n purple: \"bg-[#6c5ce7] hover:bg-[#6c5ce7] border-b-4 border-[#5b48d0] hover:border-[#4834d4] text-white\",\n pink: \"bg-[#ff69b4] hover:bg-[#ff69b4] border-b-4 border-[#e84393] hover:border-[#fd79a8] text-white\"\n };\n return \n {children}\n ;\n}\nfunction PixelCard({\n children,\n className = \"\"\n}) {\n return

\n {children}\n

;\n}\nfunction Confetti() {\n return

\n {Array.from({\n length: 50\n }).map((_, index) => {\n const size = Math.random() * 10 + 5;\n const colors = [\"#ff69b4\", \"#ffde00\", \"#33e6ff\", \"#3498db\", \"#6c5ce7\", \"#4cd964\"];\n const color = colors[Math.floor(Math.random() * colors.length)];\n const left = Math.random() * 100;\n const animationDuration = Math.random() * 3 + 2;\n const delay = Math.random();\n return ;\n })}\n

;\n}\nfunction PixelImage({\n src,\n alt,\n className = \"\"\n}) {\n const [loaded, setLoaded] = useState(false);\n const [error, setError] = useState(false);\n return

\n {!loaded && !error &&

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

}\n {error ?

\n ❌🖼️\n

setLoaded(true)} onError={() => setError(true)} />}\n

;\n}\nfunction QuestionCard({\n question,\n onVote,\n userWallet,\n onClaim\n}) {\n const [userVote, setUserVote] = useState(null);\n const [showShareButton, setShowShareButton] = useState(false);\n const isExpired = new Date(question.expiresAt) < new Date();\n const isResolved = question.outcome !== null;\n const totalVotes = question.yesVotes + question.noVotes;\n const yesPercentage = totalVotes === 0 ? 0 : Math.round(question.yesVotes / totalVotes * 100);\n const noPercentage = totalVotes === 0 ? 0 : Math.round(question.noVotes / totalVotes * 100);\n const userVotedCorrectly = userVote === question.outcome;\n const hasUserClaimed = question.claimedBy && question.claimedBy.includes(userWallet);\n const canClaim = isResolved && userVotedCorrectly && !hasUserClaimed && userWallet;\n useEffect(() => {\n if (question.votes && userWallet) {\n const vote = question.votes.find(v => v.userId === userWallet);\n if (vote) {\n setUserVote(vote.prediction);\n setShowShareButton(true);\n } else {\n setUserVote(null);\n setShowShareButton(false);\n }\n } else {\n setUserVote(null);\n setShowShareButton(false);\n }\n }, [question.votes, userWallet]);\n const handleShare = () => {\n const baseUrl = \"https://twitter.com/intent/tweet\";\n const text = `I just predicted \"${userVote.toUpperCase()}\" on \"${question.title}\" at YesNoDAO! Join me and predict the future to get paid for it! yesnodao.fun built with @devfunpump`;\n const url = `${baseUrl}?text=${encodeURIComponent(text)}`;\n openLink(url);\n };\n const formatDate = dateString => {\n const date = new Date(dateString);\n return date.toLocaleString();\n };\n const getRewardAmount = () => {\n if (!isResolved || !userVotedCorrectly) return 0;\n const totalCorrectVotes = question.outcome === \"yes\" ? question.yesVotes : question.noVotes;\n if (totalCorrectVotes <= 0) return 0;\n const voteAmount = question.voteAmount || 0.001;\n const poolAmount = question.totalPool || question.votes?.length * voteAmount || 0;\n if (poolAmount <= 0) return 0;\n const reward = poolAmount * 0.95 / totalCorrectVotes;\n const flooredReward = Math.floor(reward * 10000) / 10000;\n return isNaN(flooredReward) || flooredReward <= 0 ? \"0.0000\" : flooredReward.toFixed(4);\n };\n return \n

\n 🎯 {question.title}\n

\n 💰 {question.totalPool.toFixed(3)} SOL\n \n 🗳️ {question.voteAmount || 0.001} SOL\n \n

\n \n {isExpired ? isResolved ? \"✅\" : \"⏳\" : `⏰ ${formatDate(question.expiresAt)}`}\n \n

\n {question.imageUrl &&

\n \n

}\n {question.description &&

\n 📝 {question.description}\n

}\n {!isExpired &&

\n {userVote ?

\n \n {userVote === \"yes\" ? \"✅\" : \"❌\"}\n \n

: <>\n \n 💸 {question.voteAmount || 0.001} SOL\n \n

\n onVote(question.id, \"yes\")} disabled={!userWallet || userVote !== null}>\n ✅\n \n onVote(question.id, \"no\")} disabled={!userWallet || userVote !== null}>\n ❌\n \n

\n }\n

}\n

\n ✅ {question.yesVotes}\n ❌ {question.noVotes}\n

\n {yesPercentage}%\n {noPercentage}%\n

\n {showShareButton && userVote && \n \n \n 🐦\n \n }\n

\n {isResolved &&

\n \n {question.outcome === \"yes\" ? \"✅\" : \"❌\"}\n \n

}\n {userVotedCorrectly && isResolved &&

\n 🎉\n \n 💎 {getRewardAmount()} SOL\n \n {canClaim && onClaim(question.id)} className=\"mt-2\">\n 💰\n }\n {hasUserClaimed && \n ✨\n }\n

}\n ;\n}\nfunction CreatePredictionModal({\n isOpen,\n onClose,\n onSubmit\n}) {\n const [title, setTitle] = useState(\"\");\n const [description, setDescription] = useState(\"\");\n const [expiresAt, setExpiresAt] = useState(\"\");\n const [imageUrl, setImageUrl] = useState(\"\");\n const [voteAmount, setVoteAmount] = useState(\"0.001\");\n const [plFixtures, setPlFixtures] = useState([]);\n const [plTeams, setPlTeams] = useState([]);\n const [, setSelectedFixture] = useState(\"\");\n const [loadingFixtures, setLoadingFixtures] = useState(false);\n const [showFixtureSelection, setShowFixtureSelection] = useState(false);\n const fetchPLData = async () => {\n setLoadingFixtures(true);\n try {\n const corsProxy = 'https://corsproxy.io/?';\n const [bootstrapResponse, fixturesResponse] = await Promise.all([fetch(`${corsProxy}${encodeURIComponent('https://fantasy.premierleague.com/api/bootstrap-static/')}`), fetch(`${corsProxy}${encodeURIComponent('https://fantasy.premierleague.com/api/fixtures/')}`)]);\n const bootstrapData = await bootstrapResponse.json();\n const fixturesData = await fixturesResponse.json();\n setPlTeams(bootstrapData.teams);\n const now = new Date();\n const upcomingFixtures = fixturesData.filter(fixture => {\n const kickoffTime = new Date(fixture.kickoff_time);\n return kickoffTime > now && fixture.finished === false;\n }).slice(0, 50).sort((a, b) => new Date(a.kickoff_time) - new Date(b.kickoff_time));\n setPlFixtures(upcomingFixtures);\n } catch (error) {\n console.error('Error fetching PL data:', error);\n } finally {\n setLoadingFixtures(false);\n }\n };\n const handleFixtureSelect = fixtureId => {\n const fixture = plFixtures.find(f => f.id.toString() === fixtureId);\n if (!fixture) return;\n const homeTeam = plTeams.find(t => t.id === fixture.team_h);\n const awayTeam = plTeams.find(t => t.id === fixture.team_a);\n if (homeTeam && awayTeam) {\n const kickoffTime = new Date(fixture.kickoff_time);\n const expireTime = new Date(kickoffTime.getTime() - 60 * 60 * 1000);\n setTitle(`Will ${homeTeam.name} beat ${awayTeam.name}?`);\n setDescription(`Premier League Gameweek ${fixture.event || 'TBD'} - ${homeTeam.name} vs ${awayTeam.name}`);\n setImageUrl(`https://resources.premierleague.com/premierleague/badges/t${homeTeam.code}.png`);\n setExpiresAt(expireTime.toISOString().slice(0, 16));\n }\n setSelectedFixture(fixtureId);\n setShowFixtureSelection(false);\n };\n const handleSubmit = e => {\n e.preventDefault();\n onSubmit({\n title,\n description,\n imageUrl,\n expiresAt: new Date(expiresAt).toISOString(),\n outcome: null,\n totalPool: 0,\n resolvedAt: null,\n voteAmount: parseFloat(voteAmount)\n });\n setTitle(\"\");\n setDescription(\"\");\n setImageUrl(\"\");\n setExpiresAt(\"\");\n setVoteAmount(\"0.001\");\n setSelectedFixture(\"\");\n setShowFixtureSelection(false);\n };\n const resetForm = () => {\n setTitle(\"\");\n setDescription(\"\");\n setImageUrl(\"\");\n setExpiresAt(\"\");\n setVoteAmount(\"0.001\");\n setSelectedFixture(\"\");\n setShowFixtureSelection(false);\n };\n if (!isOpen) return null;\n return

\n \n \n

\n 🎯\n {\n resetForm();\n onClose();\n }} className=\"text-[#0a3d62] hover:text-[#ff3b30] w-8 h-8 flex items-center justify-center\" whileHover={{\n scale: 1.1\n }} whileTap={{\n scale: 0.9\n }}>\n \n \n

\n {\n if (plFixtures.length === 0) fetchPLData();\n setShowFixtureSelection(!showFixtureSelection);\n }} className=\"w-full mb-4\">\n {showFixtureSelection ? '🔽' : '⚽'}\n \n {showFixtureSelection &&

\n {loadingFixtures ?

\n ⏳\n

: plFixtures.length === 0 ?

\n 🚫\n

: plFixtures.map(fixture => {\n const homeTeam = plTeams.find(t => t.id === fixture.team_h);\n const awayTeam = plTeams.find(t => t.id === fixture.team_a);\n const kickoffTime = new Date(fixture.kickoff_time);\n return

handleFixtureSelect(fixture.id.toString())}>\n \n {homeTeam?.name || 'TBD'} vs {awayTeam?.name || 'TBD'}\n \n \n GW{fixture.event || '?'} - {kickoffTime.toLocaleDateString()} {kickoffTime.toLocaleTimeString()}\n \n

;\n })}\n

}\n

\n \n 📝\n \n setTitle(e.target.value)} className=\"w-full px-3 py-2 border-2 border-black rounded-lg focus:outline-none focus:ring-2 focus:ring-[#6c5ce7] shadow-[2px_2px_0px_0px_rgba(0,0,0,0.8)] font-body\" required />\n

\n \n 💬\n \n

setDescription(e.target.value)} className=\"w-full px-3 py-2 border-2 border-black rounded-lg focus:outline-none focus:ring-2 focus:ring-[#6c5ce7] shadow-[2px_2px_0px_0px_rgba(0,0,0,0.8)] font-body\" rows=\"3\" required />\n            </div>\n            <div className=\"mb-4\">\n              <label className=\"block mb-2\">\n                <EmojiText size=\"md\">🖼️</EmojiText>\n              </label>\n              <input type=\"url\" value={imageUrl} onChange={e => setImageUrl(e.target.value)} placeholder=\"https://...\" className=\"w-full px-3 py-2 border-2 border-black rounded-lg focus:outline-none focus:ring-2 focus:ring-[#6c5ce7] shadow-[2px_2px_0px_0px_rgba(0,0,0,0.8)] font-body\" />\n            </div>\n            <div className=\"mb-4\">\n              <label className=\"block mb-2\">\n                <EmojiText size=\"md\">⏰</EmojiText>\n              </label>\n              <input type=\"datetime-local\" value={expiresAt} onChange={e => setExpiresAt(e.target.value)} className=\"w-full px-3 py-2 border-2 border-black rounded-lg focus:outline-none focus:ring-2 focus:ring-[#6c5ce7] shadow-[2px_2px_0px_0px_rgba(0,0,0,0.8)] font-body\" required />\n            </div>\n            <div className=\"mb-6\">\n              <label className=\"block mb-2\">\n                <EmojiText size=\"md\">💸</EmojiText>\n              </label>\n              <input type=\"number\" step=\"0.001\" min=\"0.001\" value={voteAmount} onChange={e => setVoteAmount(e.target.value)} className=\"w-full px-3 py-2 border-2 border-black rounded-lg focus:outline-none focus:ring-2 focus:ring-[#6c5ce7] shadow-[2px_2px_0px_0px_rgba(0,0,0,0.8)] font-body\" required />\n            </div>\n            <div className=\"flex justify-end gap-3\">\n              <PixelButton color=\"red\" onClick={() => {\n              resetForm();\n            }} type=\"button\">\n                🗑️\n              </PixelButton>\n              <PixelButton color=\"pink\" className=\"flex-1\">\n                ➕\n              </PixelButton>\n            </div>\n          </form>\n        </PixelCard>\n      </motion.div>\n    </div>;\n}\nfunction AdminMetricsCard({\n  questions,\n  votes,\n  claims\n}) {\n  const totalPredictions = questions.length;\n  const activePredictions = questions.filter(q => q.outcome === null).length;\n  const resolvedPredictions = questions.filter(q => q.outcome !== null).length;\n  const totalVotes = votes.length;\n  const totalYesVotes = votes.filter(v => v.prediction === \"yes\").length;\n  const totalNoVotes = votes.filter(v => v.prediction === \"no\").length;\n  const totalPoolAmount = questions.reduce((total, q) => total + (q.totalPool || 0), 0);\n  const totalClaimedAmount = claims.reduce((total, c) => total + (c.amount || 0), 0);\n  return <PixelCard className=\"mb-8 border-[#6c5ce7]\">\n      <EmojiText size=\"xl\" className=\"text-[#6c5ce7] mb-4\">👑</EmojiText>\n      <div className=\"grid grid-cols-1 sm:grid-cols-2 gap-4 mb-4\">\n        <div className=\"bg-[#33e6ff] bg-opacity-20 rounded-lg p-3 border-2 border-[#33e6ff] shadow-[2px_2px_0px_0px_rgba(0,0,0,0.8)]\">\n          <EmojiText size=\"md\" className=\"mb-2\">🎯</EmojiText>\n          <div className=\"grid grid-cols-2 gap-2\">\n            <div>\n              <EmojiText size=\"sm\" className=\"opacity-80\">📊</EmojiText>\n              <PixelatedText size=\"lg\" className=\"text-[#0a3d62]\">{totalPredictions}</PixelatedText>\n            </div>\n            <div>\n              <EmojiText size=\"sm\" className=\"opacity-80\">⚡</EmojiText>\n              <PixelatedText size=\"lg\" className=\"text-[#0a3d62]\">{activePredictions}</PixelatedText>\n            </div>\n            <div>\n              <EmojiText size=\"sm\" className=\"opacity-80\">✅</EmojiText>\n              <PixelatedText size=\"lg\" className=\"text-[#0a3d62]\">{resolvedPredictions}</PixelatedText>\n            </div>\n          </div>\n        </div>\n        <div className=\"bg-[#ff69b4] bg-opacity-20 rounded-lg p-3 border-2 border-[#ff69b4] shadow-[2px_2px_0px_0px_rgba(0,0,0,0.8)]\">\n          <EmojiText size=\"md\" className=\"mb-2\">🗳️</EmojiText>\n          <div className=\"grid grid-cols-2 gap-2\">\n            <div>\n              <EmojiText size=\"sm\" className=\"opacity-80\">📈</EmojiText>\n              <PixelatedText size=\"lg\" className=\"text-[#0a3d62]\">{totalVotes}</PixelatedText>\n            </div>\n            <div>\n              <PixelatedText size=\"sm\" className=\"text-[#0a3d62] opacity-80\">✅/❌</PixelatedText>\n              <PixelatedText size=\"lg\" className=\"text-[#0a3d62]\">{totalYesVotes}/{totalNoVotes}</PixelatedText>\n            </div>\n          </div>\n        </div>\n      </div>\n      <div className=\"bg-[#ffde00] bg-opacity-20 rounded-lg p-3 border-2 border-[#ffde00] shadow-[2px_2px_0px_0px_rgba(0,0,0,0.8)]\">\n        <EmojiText size=\"md\" className=\"mb-2\">💰</EmojiText>\n        <div className=\"grid grid-cols-2 gap-4\">\n          <div>\n            <EmojiText size=\"sm\" className=\"opacity-80\">💵</EmojiText>\n            <PixelatedText size=\"lg\" className=\"text-[#0a3d62]\">{totalPoolAmount.toFixed(3)} SOL</PixelatedText>\n          </div>\n          <div>\n            <EmojiText size=\"sm\" className=\"opacity-80\">💎</EmojiText>\n            <PixelatedText size=\"lg\" className=\"text-[#0a3d62]\">{totalClaimedAmount.toFixed(3)} SOL</PixelatedText>\n          </div>\n        </div>\n      </div>\n    </PixelCard>;\n}\nfunction ResolveQuestionModal({\n  isOpen,\n  onClose,\n  onResolve,\n  question\n}) {\n  if (!isOpen || !question) return null;\n  return <div className=\"fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50 p-4\">\n      <motion.div initial={{\n      scale: 0.8,\n      opacity: 0\n    }} animate={{\n      scale: 1,\n      opacity: 1\n    }} exit={{\n      scale: 0.8,\n      opacity: 0\n    }} className=\"w-full max-w-md\">\n        <PixelCard className=\"w-full\">\n          <div className=\"flex justify-between items-center mb-4\">\n            <EmojiText size=\"xl\">🎲</EmojiText>\n            <motion.button onClick={onClose} className=\"text-[#0a3d62] hover:text-[#ff3b30] w-8 h-8 flex items-center justify-center\" whileHover={{\n            scale: 1.1\n          }} whileTap={{\n            scale: 0.9\n          }}>\n              <svg width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" strokeWidth=\"2\" strokeLinecap=\"round\" strokeLinejoin=\"round\">\n                <line x1=\"18\" y1=\"6\" x2=\"6\" y2=\"18\"></line>\n                <line x1=\"6\" y1=\"6\" x2=\"18\" y2=\"18\"></line>\n              </svg>\n            </motion.button>\n          </div>\n          {question.imageUrl && <div className=\"mb-4\">\n              <PixelImage src={question.imageUrl} alt={question.title} className=\"w-full\" />\n            </div>}\n          <div className=\"mb-6\">\n            <EmojiText size=\"lg\" className=\"mb-2\">🎯 {question.title}</EmojiText>\n            <EmojiText size=\"sm\" className=\"opacity-80\">📝 {question.description}</EmojiText>\n          </div>\n          <div className=\"flex justify-center space-x-4\">\n            <PixelButton color=\"green\" onClick={() => onResolve(question.id, \"yes\")}>\n              ✅\n            </PixelButton>\n            <PixelButton color=\"red\" onClick={() => onResolve(question.id, \"no\")}>\n              ❌\n            </PixelButton>\n          </div>\n        </PixelCard>\n      </motion.div>\n    </div>;\n}\nfunction JackpotInfoModal({\n  isOpen,\n  onClose\n}) {\n  if (!isOpen) return null;\n  return <div className=\"fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50 p-2 sm:p-4\">\n      <motion.div initial={{\n      scale: 0.8,\n      opacity: 0\n    }} animate={{\n      scale: 1,\n      opacity: 1\n    }} exit={{\n      scale: 0.8,\n      opacity: 0\n    }} className=\"w-full max-w-md\">\n        <PixelCard className=\"w-full\">\n          <div className=\"flex justify-between items-center mb-3\">\n            <PixelatedText size=\"md\">💰 JACKPOT Vault</PixelatedText>\n            <motion.button onClick={onClose} className=\"text-[#0a3d62] hover:text-[#ff3b30] w-8 h-8 flex items-center justify-center\" whileHover={{\n            scale: 1.1\n          }} whileTap={{\n            scale: 0.9\n          }}>\n              <svg width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" strokeWidth=\"2\" strokeLinecap=\"round\" strokeLinejoin=\"round\">\n                <line x1=\"18\" y1=\"6\" x2=\"6\" y2=\"18\"></line>\n                <line x1=\"6\" y1=\"6\" x2=\"18\" y2=\"18\"></line>\n              </svg>\n            </motion.button>\n          </div>\n          <div className=\"bg-[#ffde00] bg-opacity-20 border-2 border-[#ffde00] p-3 rounded-lg text-center\">\n            <PixelatedText size=\"sm\" className=\"text-[#0a3d62] break-all\">\n              6sc4cyJjWRNE5aZ1ubbLRG7SG9NPUWgk7jSvwLvRXMJW\n            </PixelatedText>\n          </div>\n        </PixelCard>\n      </motion.div>\n    </div>;\n}\nfunction InfoModal({\n  isOpen,\n  onClose\n}) {\n  if (!isOpen) return null;\n  return <div className=\"fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50 p-4\">\n      <motion.div initial={{\n      scale: 0.8,\n      opacity: 0\n    }} animate={{\n      scale: 1,\n      opacity: 1\n    }} exit={{\n      scale: 0.8,\n      opacity: 0\n    }} className=\"w-full max-w-md max-h-[90vh] flex flex-col overflow-hidden\">\n        <PixelCard className=\"w-full flex flex-col max-h-full p-4 overflow-hidden\">\n          <div className=\"flex justify-between items-center mb-3 flex-shrink-0\">\n            <PixelatedText size=\"sm\" className=\"text-base\">How It Works</PixelatedText>\n            <motion.button onClick={onClose} className=\"text-[#0a3d62] hover:text-[#ff3b30] w-8 h-8 flex items-center justify-center\" whileHover={{\n            scale: 1.1\n          }} whileTap={{\n            scale: 0.9\n          }}>\n              <svg width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" strokeWidth=\"2\" strokeLinecap=\"round\" strokeLinejoin=\"round\">\n                <line x1=\"18\" y1=\"6\" x2=\"6\" y2=\"18\"></line>\n                <line x1=\"6\" y1=\"6\" x2=\"18\" y2=\"18\"></line>\n              </svg>\n            </motion.button>\n          </div>\n          <div className=\"space-y-2 overflow-y-auto pr-1 flex-1 mobile-scroll\">\n            <div className=\"bg-[#ff69b4] bg-opacity-20 border-2 border-[#ff69b4] rounded p-2 text-center\">\n              <PixelatedText size=\"sm\" className=\"mb-1 text-sm leading-tight\">Pick</PixelatedText>\n              <PixelatedText size=\"sm\" className=\"text-[#0a3d62] leading-tight text-xs\">Choose 4 numbers between 1 and 20, buy your ticket (cost a small amount of sol)</PixelatedText>\n            </div>\n            <div className=\"bg-[#4cd964] bg-opacity-20 border-2 border-[#4cd964] rounded p-2 text-center\">\n              <PixelatedText size=\"sm\" className=\"mb-1 text-sm leading-tight\">Wait</PixelatedText>\n              <PixelatedText size=\"sm\" className=\"text-[#0a3d62] leading-tight text-xs\">Each draw is made by grok on X for total neutrality. Check the timer!</PixelatedText>\n            </div>\n            <div className=\"bg-[#ffde00] bg-opacity-20 border-2 border-[#ffde00] rounded p-2 text-center\">\n              <PixelatedText size=\"sm\" className=\"mb-1 text-sm leading-tight\">WIN</PixelatedText>\n              <PixelatedText size=\"sm\" className=\"text-[#0a3d62] leading-tight text-xs\">You have the 4 correct numbers, the jackpot is already on your wallet! Enjoy</PixelatedText>\n              <PixelatedText size=\"sm\" className=\"text-[#0a3d62] opacity-70 mt-1 text-[8px] leading-tight\">* if there are multiple winners, the rewards are shared.</PixelatedText>\n            </div>\n            <div className=\"bg-[#6c5ce7] bg-opacity-20 border-2 border-[#6c5ce7] rounded p-2 text-center\">\n              <PixelatedText size=\"sm\" className=\"mb-1 text-sm leading-tight\">NEXT</PixelatedText>\n              <PixelatedText size=\"sm\" className=\"text-[#0a3d62] leading-tight text-xs\">If there is no winner, 95% of the jackpot is put back in play</PixelatedText>\n            </div>\n            <div className=\"bg-[#33e6ff] bg-opacity-20 border-2 border-[#33e6ff] p-2 rounded text-center\">\n              <PixelatedText size=\"sm\" className=\"text-black font-bold text-xs leading-tight\">\n                Every Draw\n              </PixelatedText>\n              <PixelatedText size=\"sm\" className=\"text-[#0a3d62] mt-1 leading-tight text-xs\">\n                5% fees collected\n              </PixelatedText>\n              <PixelatedText size=\"sm\" className=\"text-[#0a3d62] leading-tight text-xs\">\n                • 3% reinvested into $POT\n              </PixelatedText>\n              <PixelatedText size=\"sm\" className=\"text-[#0a3d62] leading-tight text-xs\">\n                • 2% development\n              </PixelatedText>\n            </div>\n          </div>\n        </PixelCard>\n      </motion.div>\n    </div>;\n}\nfunction TransactionProgress({\n  isVisible\n}) {\n  if (!isVisible) return null;\n  return <div className=\"fixed inset-0 bg-black bg-opacity-30 flex items-center justify-center z-50\">\n      <div className=\"bg-white p-4 rounded-lg border-2 border-black shadow-[3px_3px_0px_0px_rgba(0,0,0,0.8)] max-w-sm w-full\">\n        <div className=\"mb-4 text-center\">\n          <PixelatedText size=\"lg\" className=\"text-center\" style={{\n          color: '#FFD700',\n          WebkitTextStroke: '3px #000',\n          textShadow: '3px 3px 0 #000, -3px -3px 0 #000, 3px -3px 0 #000, -3px 3px 0 #000'\n        }}>\n            PROCESSING\n          </PixelatedText>\n        </div>\n        <div className=\"h-6 bg-[#0a3d62] bg-opacity-20 rounded-full overflow-hidden border-2 border-black relative\">\n          <motion.div className=\"h-full bg-gradient-to-r from-[#4cd964] via-[#33e6ff] to-[#ff69b4]\" initial={{\n          width: \"0%\"\n        }} animate={{\n          width: [\"0%\", \"30%\", \"70%\", \"90%\"],\n          x: [0, 4, -4, 0]\n        }} transition={{\n          duration: 2,\n          times: [0, 0.3, 0.6, 0.9],\n          repeat: Infinity,\n          repeatType: \"loop\"\n        }} />\n          <div className=\"absolute inset-0 scanlines opacity-30\"></div>\n          <div className=\"absolute inset-0 flex items-center justify-center\">\n            <div className=\"flex space-x-2\">\n              {[0, 1, 2].map(i => <motion.div key={i} className=\"w-2 h-2 bg-white rounded-sm\" animate={{\n              opacity: [0, 1, 0]\n            }} transition={{\n              duration: 1.5,\n              repeat: Infinity,\n              delay: i * 0.3\n            }} />)}\n            </div>\n          </div>\n        </div>\n        <div className=\"mt-4 text-center\">\n          <PixelatedText size=\"md\" style={{\n          color: '#FFD700',\n          WebkitTextStroke: '3px #000',\n          textShadow: '3px 3px 0 #000, -3px -3px 0 #000, 3px -3px 0 #000, -3px 3px 0 #000'\n        }}>\n            PROCESSING\n          </PixelatedText>\n        </div>\n      </div>\n    </div>;\n}\nfunction TestJackpotModal({\n  isOpen,\n  onClose,\n  lotteryTickets,\n  totalJackpot\n}) {\n  const [winningNumbers, setWinningNumbers] = useState([]);\n  const [winners, setWinners] = useState([]);\n  const [showResults, setShowResults] = useState(false);\n  const [searchAddress, setSearchAddress] = useState('');\n  const [searchedTickets, setSearchedTickets] = useState([]);\n  const [showSearchResults, setShowSearchResults] = useState(false);\n  const generateWinningNumbers = () => {\n    const numbers = [];\n    while (numbers.length < 4) {\n      const num = Math.floor(Math.random() * 20) + 1;\n      if (!numbers.includes(num)) {\n        numbers.push(num);\n      }\n    }\n    numbers.sort((a, b) => a - b);\n    setWinningNumbers(numbers);\n    checkWinners(numbers);\n  };\n  const checkWinners = winNums => {\n    const foundWinners = [];\n    lotteryTickets.forEach(ticket => {\n      const ticketNumbers = ticket.numbers.split(',').map(Number);\n      if (winNums.every(num => ticketNumbers.includes(num))) {\n        foundWinners.push({\n          userId: ticket.userId,\n          numbers: ticketNumbers,\n          id: ticket.id\n        });\n      }\n    });\n    setWinners(foundWinners);\n    setShowResults(true);\n  };\n  const resetTest = () => {\n    setWinningNumbers([]);\n    setWinners([]);\n    setShowResults(false);\n    setSearchAddress('');\n    setSearchedTickets([]);\n    setShowSearchResults(false);\n  };\n  const handleSearchAddress = () => {\n    if (!searchAddress.trim()) {\n      alert('Please enter a wallet address');\n      return;\n    }\n    const userTickets = lotteryTickets.filter(ticket => ticket.userId.toLowerCase() === searchAddress.toLowerCase());\n    if (userTickets.length === 0) {\n      setSearchedTickets([]);\n      setShowSearchResults(true);\n      return;\n    }\n    const ticketsWithStatus = userTickets.map(ticket => {\n      const ticketNumbers = ticket.numbers.split(',').map(Number);\n      const isWinner = winningNumbers.length === 4 && winningNumbers.every(num => ticketNumbers.includes(num));\n      return {\n        ...ticket,\n        ticketNumbers,\n        isWinner\n      };\n    });\n    setSearchedTickets(ticketsWithStatus);\n    setShowSearchResults(true);\n  };\n  if (!isOpen) return null;\n  const rewardPerWinner = winners.length > 0 ? totalJackpot * 0.95 / winners.length : 0;\n  return <div className=\"fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50 p-2 sm:p-4\">\n      <motion.div initial={{\n      scale: 0.8,\n      opacity: 0\n    }} animate={{\n      scale: 1,\n      opacity: 1\n    }} exit={{\n      scale: 0.8,\n      opacity: 0\n    }} className=\"w-full max-w-2xl max-h-[90vh] overflow-y-auto\">\n        <PixelCard className=\"w-full border-4 border-[#ffde00]\">\n          <div className=\"flex justify-between items-center mb-4\">\n            <PixelatedText size=\"xl\">🧪 TEST JACKPOT</PixelatedText>\n            <motion.button onClick={onClose} className=\"text-[#0a3d62] hover:text-[#ff3b30] w-8 h-8 flex items-center justify-center\" whileHover={{\n            scale: 1.1\n          }} whileTap={{\n            scale: 0.9\n          }}>\n              <svg width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" strokeWidth=\"2\" strokeLinecap=\"round\" strokeLinejoin=\"round\">\n                <line x1=\"18\" y1=\"6\" x2=\"6\" y2=\"18\"></line>\n                <line x1=\"6\" y1=\"6\" x2=\"18\" y2=\"18\"></line>\n              </svg>\n            </motion.button>\n          </div>\n          <div className=\"mb-6 bg-[#ffde00] bg-opacity-20 border-2 border-[#ffde00] rounded-lg p-4\">\n            <PixelatedText size=\"md\" className=\"mb-2\">💰 JACKPOT: {totalJackpot.toFixed(4)} SOL</PixelatedText>\n            <PixelatedText size=\"sm\" className=\"text-[#0a3d62]\">\n              🎟️ Total Tickets: {lotteryTickets.length}\n            </PixelatedText>\n          </div>\n          <div className=\"mb-6 bg-[#3498db] bg-opacity-20 border-2 border-[#3498db] rounded-lg p-4\">\n            <PixelatedText size=\"md\" className=\"mb-3 text-center text-[#0a3d62]\">🔍 Find Address</PixelatedText>\n            <input type=\"text\" value={searchAddress} onChange={e => setSearchAddress(e.target.value)} placeholder=\"Enter wallet address...\" className=\"w-full px-3 py-2 border-2 border-black rounded-lg focus:outline-none focus:ring-2 focus:ring-[#6c5ce7] shadow-[2px_2px_0px_0px_rgba(0,0,0,0.8)] font-body mb-3\" />\n            <PixelButton color=\"blue\" onClick={handleSearchAddress} className=\"w-full\">\n              🔎 SEARCH\n            </PixelButton>\n            {showSearchResults && <div className=\"mt-4\">\n                {searchedTickets.length === 0 ? <div className=\"bg-[#ff3b30] bg-opacity-20 border-2 border-[#ff3b30] rounded-lg p-3 text-center\">\n                    <PixelatedText size=\"sm\" className=\"text-[#0a3d62]\">\n                      ❌ No tickets found for this address\n                    </PixelatedText>\n                  </div> : <div className=\"space-y-3\">\n                    <PixelatedText size=\"sm\" className=\"text-[#0a3d62] text-center\">\n                      Found {searchedTickets.length} ticket{searchedTickets.length > 1 ? 's' : ''}\n                    </PixelatedText>\n                    {searchedTickets.map((ticket, idx) => <div key={idx} className={`rounded-lg p-3 border-2 ${ticket.isWinner ? 'bg-[#4cd964] bg-opacity-20 border-[#4cd964]' : 'bg-white border-black'}`}>\n                        <div className=\"flex gap-2 justify-center mb-2\">\n                          {ticket.ticketNumbers.map((num, numIdx) => <div key={numIdx} className={`w-10 h-10 rounded-lg flex items-center justify-center border-2 ${winningNumbers.includes(num) && winningNumbers.length === 4 ? 'border-[#4cd964] bg-gradient-to-br from-[#FFD700] to-[#FFA500]' : 'border-black bg-white'}`}>\n                              <PixelatedText size=\"sm\" className=\"text-black\">\n                                {num}\n                              </PixelatedText>\n                            </div>)}\n                        </div>\n                        {ticket.isWinner && <PixelatedText size=\"sm\" className=\"text-center text-[#4cd964]\">\n                            🎉 WINNER!\n                          </PixelatedText>}\n                      </div>)}\n                  </div>}\n              </div>}\n          </div>\n          {!showResults ? <div className=\"text-center\">\n              <PixelButton color=\"pink\" onClick={generateWinningNumbers} className=\"mb-4\">\n                🎲 DRAW WINNING NUMBERS\n              </PixelButton>\n            </div> : <>\n              <div className=\"mb-6 bg-gradient-to-r from-[#FFD700] via-[#FFA500] to-[#FFD700] border-2 border-black rounded-lg p-4\">\n                <PixelatedText size=\"md\" className=\"mb-3 text-center text-black\">🎯 WINNING NUMBERS</PixelatedText>\n                <div className=\"flex justify-center gap-3\">\n                  {winningNumbers.map((num, idx) => <motion.div key={idx} className=\"w-14 h-14 rounded-lg flex items-center justify-center border-2 border-black shadow-[3px_3px_0px_0px_rgba(0,0,0,0.8)] bg-white\" initial={{\n                scale: 0,\n                rotate: -180\n              }} animate={{\n                scale: 1,\n                rotate: 0\n              }} transition={{\n                delay: idx * 0.2\n              }}>\n                      <PixelatedText size=\"lg\" className=\"text-black\">{num}</PixelatedText>\n                    </motion.div>)}\n                </div>\n              </div>\n              {winners.length > 0 ? <motion.div initial={{\n            opacity: 0,\n            y: 20\n          }} animate={{\n            opacity: 1,\n            y: 0\n          }} className=\"mb-6\">\n                  <div className=\"bg-[#4cd964] bg-opacity-20 border-2 border-[#4cd964] rounded-lg p-4 mb-4\">\n                    <PixelatedText size=\"xl\" className=\"mb-3 text-center text-[#4cd964]\">\n                      🎉 {winners.length} WINNER{winners.length > 1 ? 'S' : ''}! 🎉\n                    </PixelatedText>\n                    <PixelatedText size=\"md\" className=\"text-center text-[#0a3d62]\">\n                      💎 {rewardPerWinner.toFixed(4)} SOL each\n                    </PixelatedText>\n                  </div>\n                  <div className=\"space-y-3 max-h-64 overflow-y-auto mobile-scroll\">\n                    {winners.map((winner, idx) => <div key={idx} className=\"bg-white border-2 border-black rounded-lg p-3 shadow-[2px_2px_0px_0px_rgba(0,0,0,0.8)]\">\n                        <PixelatedText size=\"sm\" className=\"mb-2 text-[#0a3d62] break-all\">\n                          👤 {winner.userId.slice(0, 8)}...{winner.userId.slice(-6)}\n                        </PixelatedText>\n                        <div className=\"flex gap-2\">\n                          {winner.numbers.map((num, numIdx) => <div key={numIdx} className=\"w-10 h-10 rounded-lg flex items-center justify-center border-2 border-black bg-gradient-to-br from-[#FFD700] to-[#FFA500]\">\n                              <PixelatedText size=\"sm\" className=\"text-black\">{num}</PixelatedText>\n                            </div>)}\n                        </div>\n                      </div>)}\n                  </div>\n                </motion.div> : <motion.div initial={{\n            opacity: 0,\n            y: 20\n          }} animate={{\n            opacity: 1,\n            y: 0\n          }} className=\"bg-[#ff3b30] bg-opacity-20 border-2 border-[#ff3b30] rounded-lg p-6 text-center mb-6\">\n                  <EmojiText size=\"xl\" className=\"mb-3\">😢</EmojiText>\n                  <PixelatedText size=\"lg\" className=\"text-[#0a3d62]\">\n                    NO WINNERS\n                  </PixelatedText>\n                  <PixelatedText size=\"sm\" className=\"text-[#0a3d62] mt-2\">\n                    95% of jackpot goes to next draw\n                  </PixelatedText>\n                </motion.div>}\n              <div className=\"flex gap-3\">\n                <PixelButton color=\"blue\" onClick={resetTest} className=\"flex-1\">\n                  🔄 NEW TEST\n                </PixelButton>\n                <PixelButton color=\"red\" onClick={onClose} className=\"flex-1\">\n                  ❌ CLOSE\n                </PixelButton>\n              </div>\n            </>}\n        </PixelCard>\n      </motion.div>\n    </div>;\n}\nfunction MegapotCard() {\n  return <PixelCard className=\"mb-8 border-[#6c5ce7]\">\n      <div className=\"bg-gradient-to-r from-[#6c5ce7] via-[#ff69b4] to-[#3498db] -m-4 mb-4 p-4 border-b-2 border-black\">\n        <div className=\"flex items-center justify-center gap-3 mb-2\">\n          <PixelatedText size=\"xl\" className=\"text-center text-black\">MEGAPOT (soon)</PixelatedText>\n        </div>\n      </div>\n      <div className=\"text-center p-4\">\n        <PixelatedText size=\"lg\" className=\"text-black mb-2\">\n          The weekly event: one draw,\n        </PixelatedText>\n        <PixelatedText size=\"lg\" className=\"text-black mb-4\">\n          massive winnings.\n        </PixelatedText>\n        <PixelatedText size=\"sm\" className=\"text-[#0a3d62] opacity-70 mt-4\">\n          Stay tuned for a chance to win big!\n        </PixelatedText>\n      </div>\n    </PixelCard>;\n}\nfunction JackpotCard({\n  totalJackpot,\n  onInfoClick\n}) {\n  const lastWinners = [{\n    address: '11111111111111111111111111111111',\n    twitter: '@a1lon9',\n    txHash: 'abc123def456'\n  }];\n  return <PixelCard className=\"mb-8 border-[#ffde00]\">\n      <div className=\"bg-gradient-to-r from-[#6c5ce7] via-[#ff69b4] to-[#3498db] -m-4 mb-4 p-4 border-b-2 border-black\">\n      <div className=\"flex items-center justify-center gap-3 mb-2\">\n          <PixelatedText size=\"xl\" className=\"text-center text-black\">JACKPOT</PixelatedText>\n          <motion.button onClick={onInfoClick} className=\"w-5 h-5 rounded-full bg-white border-2 border-black flex items-center justify-center shadow-[1px_1px_0px_0px_rgba(0,0,0,0.8)] hover:bg-[#33e6ff] transition-colors ml-1\" whileHover={{\n          scale: 1.1\n        }} whileTap={{\n          scale: 0.9\n        }}>\n            <span className=\"text-black leading-none font-sans\" style={{\n            fontSize: '12px',\n            fontWeight: 'bold'\n          }}>i</span>\n          </motion.button>\n        </div>\n        <div className=\"bg-black bg-opacity-30 rounded-lg p-4 border-2 border-black\">\n          <motion.div animate={{\n          textShadow: ['0 0 2px #FFD700, 0 0 4px #FFD700, 0 0 6px #FFD700', '0 0 3px #FFA500, 0 0 5px #FFA500, 0 0 7px #FFA500', '0 0 2px #FFD700, 0 0 4px #FFD700, 0 0 6px #FFD700']\n        }} transition={{\n          duration: 2,\n          repeat: Infinity,\n          ease: \"easeInOut\"\n        }}>\n            <PixelatedText size=\"2xl\" className=\"text-center font-mono tracking-wider bg-gradient-to-r from-[#FFD700] via-[#FFA500] to-[#FFD700] bg-clip-text text-transparent\">\n              {totalJackpot.toFixed(4)} SOL\n            </PixelatedText>\n          </motion.div>\n        </div>\n      </div>\n      <div className=\"bg-gradient-to-r from-[#87CEEB] via-[#6BB6FF] to-[#87CEEB] rounded-lg p-2 sm:p-3 border-2 border-black shadow-[2px_2px_0px_0px_rgba(0,0,0,0.8)] mx-2 sm:mx-4 mb-3 sm:mb-4\">\n        <PixelatedText size=\"sm\" className=\"text-center text-black text-xs sm:text-base\">\n          This is where your dream begins!\n        </PixelatedText>\n      </div>\n      {lastWinners.length > 0 && <div className=\"mx-2 sm:mx-4 mb-3 sm:mb-4\">\n          <div className=\"bg-gradient-to-r from-[#90EE90] via-[#7FD77F] to-[#90EE90] rounded-lg p-2 sm:p-3 border-2 border-black shadow-[3px_3px_0px_0px_rgba(0,0,0,0.8)]\">\n            <PixelatedText size=\"lg\" className=\"text-center text-black mb-2 sm:mb-3 text-sm sm:text-lg\">\n              LAST WINNERS\n            </PixelatedText>\n            <div className=\"space-y-2\">\n              {lastWinners.map((winner, index) => <div key={index} className=\"bg-white bg-opacity-90 rounded-lg p-2 border-2 border-black shadow-[2px_2px_0px_0px_rgba(0,0,0,0.8)]\">\n                  <div className=\"flex flex-col sm:flex-row items-center justify-between gap-2\">\n                    <PixelatedText size=\"sm\" className=\"text-[#0a3d62] text-xs truncate flex-shrink-0\">\n                      69 SOL\n                    </PixelatedText>\n                    <motion.a href={`https://x.com/${winner.twitter.replace('@', '')}`} target=\"_blank\" rel=\"noopener noreferrer\" className=\"text-[#4cd964] hover:text-[#ff69b4] transition-colors flex-shrink-0\" whileHover={{\n                scale: 1.05\n              }} whileTap={{\n                scale: 0.95\n              }}>\n                      <PixelatedText size=\"sm\" className=\"text-xs\">\n                        {winner.twitter}\n                      </PixelatedText>\n                    </motion.a>\n                    <motion.button onClick={() => openLink(`https://solscan.io/tx/${winner.txHash}`)} className=\"px-2 py-1 bg-[#3498db] hover:bg-[#33e6ff] border-2 border-black rounded-lg shadow-[2px_2px_0px_0px_rgba(0,0,0,0.8)] transition-colors flex-shrink-0\" whileHover={{\n                scale: 1.05\n              }} whileTap={{\n                scale: 0.95\n              }}>\n                      <PixelatedText size=\"sm\" className=\"text-white text-xs whitespace-nowrap\">\n                        🔗 VIEW TX\n                      </PixelatedText>\n                    </motion.button>\n                  </div>\n                </div>)}\n            </div>\n          </div>\n        </div>}\n    </PixelCard>;\n}\nfunction IntroCard() {\n  return <PixelCard className=\"mb-8\">\n      <div className=\"bg-gradient-to-r from-[#6c5ce7] via-[#ff69b4] to-[#3498db] -m-4 mb-4 p-4 border-b-2 border-black\">\n        <PixelatedText size=\"xl\" className=\"text-center text-black\">Dream Big. Play Anywhere.</PixelatedText>\n      </div>\n      <div className=\"text-center p-4 space-y-4\">\n        <PixelatedText size=\"sm\" className=\"text-black\">\n          Millions of players on Earth\n        </PixelatedText>\n        <PixelatedText size=\"sm\" className=\"text-black\">\n          imagine all of them here, all chasing the POT.\n        </PixelatedText>\n        <PixelatedText size=\"sm\" className=\"text-black\">\n          Back then, it was a ticket at the corner store.\n        </PixelatedText>\n        <PixelatedText size=\"sm\" className=\"text-black\">\n          Today, your dream is just one tap away.\n        </PixelatedText>\n        <PixelatedText size=\"sm\" className=\"text-black font-black tracking-wider\">\n          Play instantly from your phone —\n        </PixelatedText>\n        <PixelatedText size=\"sm\" className=\"text-black\">\n          no gas station, no lottery retailer needed.\n        </PixelatedText>\n        <PixelatedText size=\"sm\" className=\"text-black font-black tracking-wider\">\n          Welcome to the Web3 Lottery.\n        </PixelatedText>\n        <div className=\"space-y-2 pt-2\">\n          <PixelatedText size=\"sm\" className=\"text-black\">\n            POT et MEGAPOTS.\n          </PixelatedText>\n          <PixelatedText size=\"sm\" className=\"text-black\">\n            Instant Payouts.\n          </PixelatedText>\n          <PixelatedText size=\"sm\" className=\"text-black\">\n            Totally Decentralized.\n          </PixelatedText>\n        </div>\n        <PixelatedText size=\"sm\" className=\"text-black pt-2\">\n          Play. Win. Repeat.\n        </PixelatedText>\n      </div>\n    </PixelCard>;\n}\nfunction CountdownTimer() {\n  const [timeLeft, setTimeLeft] = useState(60 * 60);\n  const [isWaiting, setIsWaiting] = useState(false);\n  const [waitTimeLeft, setWaitTimeLeft] = useState(0);\n  const calculateTimerState = () => {\n    const referenceTime = new Date('2025-10-25T05:00:00-04:00').getTime();\n    const now = Date.now();\n    const cycleDuration = 70 * 60 * 1000;\n    const drawDuration = 60 * 60 * 1000;\n    const elapsedSinceReference = now - referenceTime;\n    const cyclePosition = elapsedSinceReference % cycleDuration;\n    if (cyclePosition < drawDuration) {\n      const remaining = Math.floor((drawDuration - cyclePosition) / 1000);\n      return {\n        isWaiting: false,\n        timeLeft: remaining,\n        waitTimeLeft: 0\n      };\n    } else {\n      const remaining = Math.floor((cycleDuration - cyclePosition) / 1000);\n      return {\n        isWaiting: true,\n        timeLeft: 0,\n        waitTimeLeft: remaining\n      };\n    }\n  };\n  useEffect(() => {\n    const updateTimer = () => {\n      const state = calculateTimerState();\n      setIsWaiting(state.isWaiting);\n      setTimeLeft(state.timeLeft);\n      setWaitTimeLeft(state.waitTimeLeft);\n    };\n    updateTimer();\n    const interval = setInterval(updateTimer, 1000);\n    return () => clearInterval(interval);\n  }, []);\n  const formatTime = seconds => {\n    const mins = Math.floor(seconds / 60);\n    const secs = seconds % 60;\n    return `${mins.toString().padStart(2, '0')}:${secs.toString().padStart(2, '0')}`;\n  };\n  const currentTime = isWaiting ? waitTimeLeft : timeLeft;\n  const displayText = isWaiting ? 'Next draw starting soon...' : 'Next Draw';\n  return <PixelCard className=\"mb-8 border-[#6c5ce7]\">\n      <div className=\"bg-gradient-to-r from-[#6c5ce7] via-[#ff69b4] to-[#3498db] -m-4 mb-4 p-4 border-b-2 border-black\">\n        <div className=\"flex items-center justify-center gap-3 mb-2\">\n          <PixelatedText size=\"xl\" className=\"text-center text-black\">{displayText}</PixelatedText>\n        </div>\n        <div className=\"bg-black bg-opacity-30 rounded-lg p-4 border-2 border-black\">\n          <PixelatedText size=\"2xl\" className=\"text-center text-[#ffa500] font-mono tracking-wider\">\n            {formatTime(currentTime)}\n          </PixelatedText>\n      </div>\n    </div>\n    <div className=\"bg-gradient-to-r from-[#87CEEB] via-[#6BB6FF] to-[#87CEEB] rounded-lg p-2 sm:p-3 border-2 border-black shadow-[2px_2px_0px_0px_rgba(0,0,0,0.8)] mx-2 sm:mx-4 mb-3 sm:mb-4\">\n      <PixelatedText size=\"sm\" className=\"text-center text-black text-xs sm:text-base\">\n        Every second could change your life!\n      </PixelatedText>\n    </div>\n    <div className=\"bg-gradient-to-r from-[#90EE90] via-[#7FD77F] to-[#90EE90] rounded-lg p-2 sm:p-3 border-2 border-black shadow-[3px_3px_0px_0px_rgba(0,0,0,0.8)] mx-2 sm:mx-4 mb-3 sm:mb-4\">\n      <div className=\"flex flex-col sm:flex-row justify-between items-center gap-2 sm:gap-8 px-2 sm:px-4\">\n        <PixelatedText size=\"md\" className=\"text-black text-sm sm:text-base\">\n          DRAW 0:\n        </PixelatedText>\n        <PixelatedText size=\"md\" className=\"text-black text-sm sm:text-base\">\n          NUMBERS 1 2 3 4\n        </PixelatedText>\n      </div>\n    </div>\n    <div className=\"bg-gradient-to-r from-[#90EE90] via-[#7FD77F] to-[#90EE90] rounded-lg p-2 sm:p-3 border-2 border-black shadow-[3px_3px_0px_0px_rgba(0,0,0,0.8)] mx-2 sm:mx-4 mb-3 sm:mb-4\">\n      <div className=\"flex flex-col sm:flex-row justify-between items-center gap-2 sm:gap-8 px-2 sm:px-4\">\n        <PixelatedText size=\"md\" className=\"text-black text-sm sm:text-base\">\n          DRAW 1:\n        </PixelatedText>\n        <div className=\"flex items-center gap-2\">\n          <PixelatedText size=\"md\" className=\"text-black text-sm sm:text-base\">\n            NUMBERS 6 10 11 5\n          </PixelatedText>\n          <motion.button onClick={() => openLink('https://x.com/grok/status/1982095099179024413')} className=\"flex items-center justify-center w-6 h-6 bg-white border-2 border-black rounded-full shadow-[2px_2px_0px_0px_rgba(0,0,0,0.8)] hover:bg-[#ffde00] transition-colors\" whileHover={{\n            scale: 1.1\n          }} whileTap={{\n            scale: 0.9\n          }}>\n            <svg width=\"12\" height=\"12\" viewBox=\"0 0 24 24\" fill=\"#0a3d62\" stroke=\"none\">\n              <path d=\"M18.244 2.25h3.308l-7.227 8.26 8.502 11.24H16.17l-5.214-6.817L4.99 21.75H1.68l7.73-8.835L1.254 2.25H8.08l4.713 6.231zm-1.161 17.52h1.833L7.084 4.126H5.117z\" />\n            </svg>\n          </motion.button>\n        </div>\n      </div>\n    </div>\n    <div className=\"bg-gradient-to-r from-[#90EE90] via-[#7FD77F] to-[#90EE90] rounded-lg p-2 sm:p-3 border-2 border-black shadow-[3px_3px_0px_0px_rgba(0,0,0,0.8)] mx-2 sm:mx-4 mb-3 sm:mb-4\">\n      <div className=\"flex flex-col sm:flex-row justify-between items-center gap-2 sm:gap-8 px-2 sm:px-4\">\n        <PixelatedText size=\"md\" className=\"text-black text-sm sm:text-base\">\n          DRAW 2:\n        </PixelatedText>\n        <div className=\"flex items-center gap-2\">\n          <PixelatedText size=\"md\" className=\"text-black text-sm sm:text-base\">\n            NUMBERS 17 14 4 3\n          </PixelatedText>\n          <motion.button onClick={() => openLink('https://x.com/grok/status/1982153746542125170')} className=\"flex items-center justify-center w-6 h-6 bg-white border-2 border-black rounded-full shadow-[2px_2px_0px_0px_rgba(0,0,0,0.8)] hover:bg-[#ffde00] transition-colors\" whileHover={{\n            scale: 1.1\n          }} whileTap={{\n            scale: 0.9\n          }}>\n            <svg width=\"12\" height=\"12\" viewBox=\"0 0 24 24\" fill=\"#0a3d62\" stroke=\"none\">\n              <path d=\"M18.244 2.25h3.308l-7.227 8.26 8.502 11.24H16.17l-5.214-6.817L4.99 21.75H1.68l7.73-8.835L1.254 2.25H8.08l4.713 6.231zm-1.161 17.52h1.833L7.084 4.126H5.117z\" />\n            </svg>\n          </motion.button>\n        </div>\n      </div>\n    </div>\n    </PixelCard>;\n}\nfunction LotteryTicketCard({\n  userWallet,\n  onPurchase\n}) {\n  const TICKET_PRICE = 0.005;\n  const [selectedNumbers, setSelectedNumbers] = useState([]);\n  const [lastClickedIndex, setLastClickedIndex] = useState(-1);\n  const toggleNumber = num => {\n    if (selectedNumbers.includes(num)) {\n      setSelectedNumbers(selectedNumbers.filter(n => n !== num));\n      setLastClickedIndex(-1);\n    } else if (selectedNumbers.length < 4) {\n      const newIndex = selectedNumbers.length;\n      setLastClickedIndex(newIndex);\n      setSelectedNumbers([...selectedNumbers, num]);\n      setTimeout(() => setLastClickedIndex(-1), 300);\n    }\n  };\n  const handlePurchase = () => {\n    if (selectedNumbers.length === 4) {\n      onPurchase(selectedNumbers, TICKET_PRICE);\n      setSelectedNumbers([]);\n    }\n  };\n  return <PixelCard className=\"mb-8 border-[#ffde00]\">\n      <div className=\"bg-gradient-to-r from-[#6c5ce7] via-[#ff69b4] to-[#3498db] -m-4 mb-4 p-4 border-b-2 border-black\">\n        <PixelatedText size=\"xl\" className=\"text-center text-black mb-2\">Create your Ticket</PixelatedText>\n        <PixelatedText size=\"sm\" className=\"text-center text-black\">\n          Choose 4 numbers between 1 and 20,\n        </PixelatedText>\n        <PixelatedText size=\"sm\" className=\"text-center text-black\">\n          buy your ticket (3$)\n        </PixelatedText>\n      </div>\n    <div className=\"mb-6\">\n        <div className=\"bg-gradient-to-br from-[#BFBFBF] via-[#F5F5F5] to-[#9E9E9E] border-2 border-black rounded-lg p-2 sm:p-4 shadow-[4px_4px_0px_0px_rgba(0,0,0,0.8)] relative overflow-hidden\">\n          <div className=\"absolute inset-0 bg-gradient-to-br from-white to-transparent opacity-40\"></div>\n          <div className=\"absolute top-0 left-0 w-full h-1 bg-gradient-to-r from-transparent via-white to-transparent opacity-90\"></div>\n          <div className=\"flex justify-center gap-2 sm:gap-3 relative z-10\">\n            {[0, 1, 2, 3].map(boxIdx => {\n            const hasNumber = boxIdx < selectedNumbers.length;\n            const number = hasNumber ? selectedNumbers[boxIdx] : null;\n            const isJustAdded = boxIdx === lastClickedIndex;\n            return <motion.div key={boxIdx} className={`w-12 h-12 sm:w-14 sm:h-14 rounded-lg flex items-center justify-center border-2 border-black shadow-[3px_3px_0px_0px_rgba(0,0,0,0.8)] ${hasNumber ? 'bg-gradient-to-br from-[#F5F5F5] via-[#C0C0C0] to-[#A8A8A8]' : 'bg-gradient-to-br from-[#F5F5F5] via-[#C0C0C0] to-[#A8A8A8]'} relative overflow-hidden`} animate={isJustAdded ? {\n              scale: [0.5, 1.2, 1],\n              rotate: [0, 10, 0]\n            } : {}} transition={isJustAdded ? {\n              duration: 0.3,\n              ease: \"easeOut\"\n            } : {}}>\n                  {hasNumber ? <div className=\"text-xl sm:text-2xl font-pixel text-black\" style={{\n                textShadow: '2px 2px 0px rgba(255,255,255,0.3)'\n              }}>{number}</div> : <div className=\"text-xl sm:text-2xl font-pixel text-black opacity-40\">?</div>}\n            </motion.div>;\n          })}\n          </div>\n        </div>\n      </div>\n    <div className=\"mb-4 sm:mb-6\">\n          <div className=\"grid grid-cols-4 sm:grid-cols-10 gap-2 sm:gap-2\">\n            {[...Array(20)].map((_, i) => {\n          const num = i + 1;\n          const isSelected = selectedNumbers.includes(num);\n          const isDisabled = !userWallet || !isSelected && selectedNumbers.length >= 4;\n          const handleClick = e => {\n            e.preventDefault();\n            e.stopPropagation();\n            if (!isDisabled) {\n              toggleNumber(num);\n            }\n          };\n          return <motion.button key={num} onClick={handleClick} onTouchEnd={handleClick} className={`aspect-square border-2 border-black rounded-lg shadow-[2px_2px_0px_0px_rgba(0,0,0,0.8)] flex items-center justify-center relative overflow-hidden min-h-[48px] sm:min-h-0 touch-manipulation ${isSelected ? 'bg-gradient-to-br from-[#F5F5F5] via-[#C0C0C0] to-[#A8A8A8]' : 'bg-gradient-to-br from-[#E8E8E8] via-[#C0C0C0] to-[#A8A8A8] active:from-[#F5F5F5] active:to-[#B0B0B0]'}`} whileTap={{\n            scale: 0.85,\n            rotate: isSelected ? 0 : 15\n          }} animate={isSelected ? {\n            boxShadow: ['0 0 0 0 rgba(76, 217, 100, 0.7)', '0 0 0 8px rgba(76, 217, 100, 0)', '0 0 0 0 rgba(76, 217, 100, 0)']\n          } : {}} transition={isSelected ? {\n            duration: 0.6,\n            repeat: Infinity,\n            repeatDelay: 0.5\n          } : {}} disabled={isDisabled} style={{\n            WebkitTapHighlightColor: 'transparent'\n          }}>\n                  <div className=\"absolute inset-0 bg-gradient-to-br from-white to-transparent opacity-20\"></div>\n                  <PixelatedText size=\"sm\" className={`relative z-10 text-sm sm:text-base ${isSelected ? 'text-white' : 'text-black'}`}>{num}</PixelatedText>\n                </motion.button>;\n        })}\n          </div>\n        </div>\n      {selectedNumbers.length === 4 && <div className=\"flex gap-3 justify-center mb-4\">\n          <PixelButton color=\"yellow\" onClick={handlePurchase} className=\"min-h-[48px] px-6\">\n            BUY\n          </PixelButton>\n        </div>}\n      <div className=\"mt-3 sm:mt-4 text-center px-1 space-y-1 sm:space-y-2\">\n        <PixelatedText size=\"sm\" className=\"text-[#0a3d62] text-xs leading-tight sm:text-base\">\n          * Connect your wallet first to pick your number.\n        </PixelatedText>\n        <PixelatedText size=\"sm\" className=\"text-[#0a3d62] text-xs leading-tight sm:text-base\">\n          ** There is no ticket limit, you can make as many as you want!\n        </PixelatedText>\n      </div>\n    </PixelCard>;\n}\nfunction App() {\n  const {\n    devbaseClient,\n    userWallet\n  } = useDevapp();\n  const [questions, setQuestions] = useState([]);\n  const [loading, setLoading] = useState(true);\n  const [error, setError] = useState(null);\n  const [showCelebration, setShowCelebration] = useState(false);\n  const [activeTab,,] = useState(\"active\");\n  const [showCreateModal, setShowCreateModal] = useState(false);\n  const [showResolveModal, setShowResolveModal] = useState(false);\n  const [showInfoModal, setShowInfoModal] = useState(false);\n  const [showJackpotInfoModal, setShowJackpotInfoModal] = useState(false);\n  const [showTestJackpotModal, setShowTestJackpotModal] = useState(false);\n  const [transactionInProgress, setTransactionInProgress] = useState(false);\n  const [selectedQuestion, setSelectedQuestion] = useState(null);\n  const [allVotes, setAllVotes] = useState([]);\n  const [allClaims, setAllClaims] = useState([]);\n  const [lotteryTickets, setLotteryTickets] = useState([]);\n  const [totalJackpot, setTotalJackpot] = useState(0);\n  const [currentWinningNumbers,,] = useState([]);\n  const isAdmin = userWallet === '6SxLVfFovSjR2LAFcJ5wfT6RFjc8GxsscRekGnLq8BMe';\n  const fetchVaultBalance = async () => {\n    try {\n      const connection = new Connection('https://rpc.dev.fun/1a46d912451370d301e2');\n      const vaultAddress = new PublicKey('6sc4cyJjWRNE5aZ1ubbLRG7SG9NPUWgk7jSvwLvRXMJW');\n      const balance = await connection.getBalance(vaultAddress);\n      const solBalance = balance / LAMPORTS_PER_SOL;\n      setTotalJackpot(solBalance);\n    } catch (error) {\n      console.error('Error fetching vault balance:', error);\n      setTotalJackpot(0.0450);\n    }\n  };\n  useEffect(() => {\n    fetchQuestions();\n    fetchVaultBalance();\n    const interval = setInterval(() => {\n      fetchQuestions();\n      fetchVaultBalance();\n    }, 30000);\n    return () => clearInterval(interval);\n  }, [userWallet, devbaseClient]);\n  const fetchQuestions = async () => {\n    if (!devbaseClient) return;\n    try {\n      setLoading(true);\n      const fetchedQuestions = await devbaseClient.listEntities(\"questions\");\n      const fetchedVotes = await devbaseClient.listEntities(\"votes\");\n      const fetchedClaims = await devbaseClient.listEntities(\"claims\");\n      const fetchedLotteryTickets = await devbaseClient.listEntities(\"lottery_tickets\");\n      setAllVotes(fetchedVotes);\n      setAllClaims(fetchedClaims);\n      setLotteryTickets(fetchedLotteryTickets);\n      const questionsWithVotes = await Promise.all(fetchedQuestions.map(async question => {\n        const votes = fetchedVotes.filter(vote => vote.questionId === question.id);\n        const claims = fetchedClaims.filter(claim => claim.questionId === question.id);\n        const yesVotes = votes.filter(vote => vote.prediction === \"yes\").length;\n        const noVotes = votes.filter(vote => vote.prediction === \"no\").length;\n        const claimedBy = claims.map(claim => claim.userId);\n        const calculatedPool = votes.reduce((total, vote) => total + (vote.amount || 0.001), 0);\n        if (question.totalPool !== calculatedPool) {\n          if (userWallet === '6SxLVfFovSjR2LAFcJ5wfT6RFjc8GxsscRekGnLq8BMe') {\n            try {\n              await devbaseClient.updateEntity(\"questions\", question.id, {\n                totalPool: calculatedPool\n              });\n              question.totalPool = calculatedPool;\n            } catch (err) {\n              console.error(\"Error updating question pool during fetch:\", err);\n            }\n          } else {\n            question.totalPool = calculatedPool;\n          }\n        }\n        return {\n          ...question,\n          votes,\n          yesVotes,\n          noVotes,\n          claimedBy\n        };\n      }));\n      questionsWithVotes.sort((a, b) => {\n        if (a.outcome === null && b.outcome !== null) return -1;\n        if (a.outcome !== null && b.outcome === null) return 1;\n        if (a.outcome === null) {\n          return new Date(b.expiresAt) - new Date(a.expiresAt);\n        } else {\n          return new Date(b.resolvedAt) - new Date(a.resolvedAt);\n        }\n      });\n      setQuestions(questionsWithVotes);\n    } catch (err) {\n      console.error(\"Error fetching questions:\", err);\n      setError(\"Failed to load prediction questions. Please try again later.\");\n    } finally {\n      setLoading(false);\n    }\n  };\n  const handleVote = async (questionId, prediction) => {\n    if (!userWallet) {\n      alert(\"Please connect your wallet first!\");\n      return;\n    }\n    try {\n      const question = questions.find(q => q.id === questionId);\n      if (!question) {\n        alert(\"Question not found. Please refresh and try again.\");\n        return;\n      }\n      const existingVote = question.votes.find(v => v.userId === userWallet);\n      if (existingVote) {\n        alert(\"You have already voted on this prediction!\");\n        return;\n      }\n      const existingVotes = await devbaseClient.listEntities(\"votes\", {\n        questionId,\n        userId: userWallet\n      });\n      if (existingVotes && existingVotes.length > 0) {\n        alert(\"You have already voted on this prediction!\");\n        await fetchQuestions();\n        return;\n      }\n      const voteAmount = question.voteAmount || 0.001;\n      setTransactionInProgress(true);\n      await devbaseClient.createEntity(\"votes\", {\n        questionId,\n        userId: userWallet,\n        prediction,\n        amount: voteAmount\n      });\n      const updatedVotes = await devbaseClient.listEntities(\"votes\", {\n        questionId,\n        userId: userWallet\n      });\n      if (updatedVotes && updatedVotes.length > 0) {\n        try {\n          const allVotes = await devbaseClient.listEntities(\"votes\", {\n            questionId\n          });\n          const question = questions.find(q => q.id === questionId);\n          const voteAmount = question.voteAmount || 0.001;\n          const calculatedPool = allVotes.reduce((total, vote) => total + (vote.amount || voteAmount), 0);\n          await devbaseClient.updateEntity(\"questions\", questionId, {\n            totalPool: calculatedPool\n          });\n        } catch (poolError) {\n          if (!poolError.message?.includes(\"rejected\")) {\n            console.error(\"Error updating pool total:\", poolError);\n          }\n        }\n        setTransactionInProgress(false);\n        setShowCelebration(true);\n        setTimeout(() => setShowCelebration(false), 3000);\n        fetchQuestions();\n      } else {\n        setTransactionInProgress(false);\n        setShowCelebration(false);\n        alert(\"Failed to submit your vote. Please try again.\");\n      }\n    } catch (err) {\n      setTransactionInProgress(false);\n      setShowCelebration(false);\n      const errorMessage = err.message || err.toString();\n      const isUserRejection = errorMessage.includes(\"User rejected\") || errorMessage.includes(\"user rejected\") || errorMessage.includes(\"rejected the request\") || err.name === \"WalletSignTransactionError\" || err.name === \"WalletConnectionError\";\n      if (isUserRejection) {\n        return;\n      }\n      try {\n        const updatedVotes = await devbaseClient.listEntities(\"votes\", {\n          questionId,\n          userId: userWallet\n        });\n        if (updatedVotes && updatedVotes.length > 0) {\n          try {\n            const allVotes = await devbaseClient.listEntities(\"votes\", {\n              questionId\n            });\n            const question = questions.find(q => q.id === questionId);\n            const voteAmount = question.voteAmount || 0.001;\n            const calculatedPool = allVotes.reduce((total, vote) => total + (vote.amount || voteAmount), 0);\n            await devbaseClient.updateEntity(\"questions\", questionId, {\n              totalPool: calculatedPool\n            });\n          } catch (poolError) {\n            if (!poolError.message?.includes(\"rejected\")) {\n              console.error(\"Error updating pool total on retry:\", poolError);\n            }\n          }\n          setShowCelebration(true);\n          setTimeout(() => setShowCelebration(false), 3000);\n          fetchQuestions();\n        } else {\n          alert(\"Failed to submit your vote. Please try again.\");\n        }\n      } catch (checkErr) {\n        if (!checkErr.message?.includes(\"rejected\")) {\n          console.error(\"Error checking vote status:\", checkErr);\n          alert(\"Failed to submit your vote. Please try again.\");\n        }\n      }\n    }\n  };\n  const handleClaim = async questionId => {\n    if (!userWallet) {\n      alert(\"Please connect your wallet first!\");\n      return;\n    }\n    try {\n      setTransactionInProgress(true);\n      const freshQuestion = await devbaseClient.getEntity(\"questions\", questionId);\n      if (!freshQuestion) {\n        setTransactionInProgress(false);\n        alert(\"Question not found. Please refresh the page and try again.\");\n        return;\n      }\n      if (!freshQuestion.outcome) {\n        setTransactionInProgress(false);\n        alert(\"This prediction hasn't been resolved yet. Please wait for the outcome.\");\n        return;\n      }\n      const existingClaims = await devbaseClient.listEntities(\"claims\", {\n        questionId,\n        userId: userWallet\n      });\n      if (existingClaims && existingClaims.length > 0) {\n        setTransactionInProgress(false);\n        alert(\"You have already claimed your reward for this question!\");\n        return;\n      }\n      const allVotes = await devbaseClient.listEntities(\"votes\", {\n        questionId\n      });\n      const correctVotes = allVotes.filter(vote => vote.prediction === freshQuestion.outcome);\n      const userCorrectVote = correctVotes.find(vote => vote.userId === userWallet);\n      if (userCorrectVote) {\n        const totalCorrectVotes = correctVotes.length;\n        let poolAmount = freshQuestion.totalPool || 0;\n        if (poolAmount <= 0) {\n          poolAmount = allVotes.reduce((total, vote) => total + (vote.amount || 0.001), 0);\n        }\n        const poolShare = poolAmount * 0.95 / totalCorrectVotes;\n        const finalReward = Math.floor(poolShare * 1000000) / 1000000;\n        if (finalReward <= 0 || isNaN(finalReward)) {\n          setTransactionInProgress(false);\n          alert(\"Error calculating reward amount. Please try again later.\");\n          return;\n        }\n        setShowCelebration(true);\n        await devbaseClient.createEntity(\"claims\", {\n          questionId,\n          amount: finalReward,\n          userId: userWallet\n        });\n        setTransactionInProgress(false);\n        setTimeout(() => setShowCelebration(false), 5000);\n        await fetchQuestions();\n        alert(`🎉 Congratulations! You've claimed ${finalReward.toFixed(4)} SOL!`);\n        return;\n      }\n      const userVotes = await devbaseClient.listEntities(\"votes\", {\n        userId: userWallet,\n        questionId\n      });\n      if (!userVotes || userVotes.length === 0) {\n        setTransactionInProgress(false);\n        alert(\"You did not vote on this prediction.\");\n        return;\n      }\n      setTransactionInProgress(false);\n      alert(`You did not vote correctly on this prediction. The outcome was \"${freshQuestion.outcome}\".`);\n    } catch (err) {\n      setTransactionInProgress(false);\n      setShowCelebration(false);\n      const errorMessage = err.message || err.toString();\n      const isUserRejection = errorMessage.includes(\"User rejected\") || errorMessage.includes(\"user rejected\") || errorMessage.includes(\"rejected the request\") || err.name === \"WalletSignTransactionError\" || err.name === \"WalletConnectionError\";\n      if (isUserRejection) {\n        return;\n      }\n      try {\n        const finalCheck = await devbaseClient.listEntities(\"claims\", {\n          questionId,\n          userId: userWallet\n        });\n        if (finalCheck && finalCheck.length > 0) {\n          setShowCelebration(true);\n          setTimeout(() => setShowCelebration(false), 3000);\n          await fetchQuestions();\n          alert(\"🎉 Claim successful! Your reward has been processed.\");\n        } else {\n          alert(\"Failed to claim your reward. Please try again.\");\n        }\n      } catch (checkErr) {\n        if (!checkErr.message?.includes(\"rejected\")) {\n          console.error(\"Error in final verification:\", checkErr);\n          alert(\"Failed to claim your reward. Please try again.\");\n        }\n      }\n    }\n  };\n  const handleCreatePrediction = async predictionData => {\n    try {\n      setTransactionInProgress(true);\n      await devbaseClient.createEntity(\"questions\", predictionData);\n      setShowCreateModal(false);\n      setTransactionInProgress(false);\n      fetchQuestions();\n      alert(\"Prediction created successfully!\");\n    } catch (err) {\n      setTransactionInProgress(false);\n      const errorMessage = err.message || err.toString();\n      const isUserRejection = errorMessage.includes(\"User rejected\") || errorMessage.includes(\"user rejected\") || errorMessage.includes(\"rejected the request\") || err.name === \"WalletSignTransactionError\" || err.name === \"WalletConnectionError\";\n      if (isUserRejection) {\n        return;\n      }\n      console.error(\"Error creating prediction:\", err);\n      alert(\"Failed to create prediction. Please try again.\");\n    }\n  };\n  const handleResolvePrediction = async (questionId, outcome) => {\n    try {\n      setTransactionInProgress(true);\n      await devbaseClient.updateEntity(\"questions\", questionId, {\n        outcome,\n        resolvedAt: new Date().toISOString()\n      });\n      const question = questions.find(q => q.id === questionId);\n      if (question && question.totalPool > 0) {\n        await devbaseClient.createEntity(\"protocol_fees\", {\n          questionId,\n          userId: userWallet,\n          amount: question.totalPool * 0.05\n        });\n      }\n      setTransactionInProgress(false);\n      setShowResolveModal(false);\n      setSelectedQuestion(null);\n      fetchQuestions();\n      alert(`Prediction resolved as ${outcome.toUpperCase()}!`);\n    } catch (err) {\n      setTransactionInProgress(false);\n      const errorMessage = err.message || err.toString();\n      const isUserRejection = errorMessage.includes(\"User rejected\") || errorMessage.includes(\"user rejected\") || errorMessage.includes(\"rejected the request\") || err.name === \"WalletSignTransactionError\" || err.name === \"WalletConnectionError\";\n      if (isUserRejection) {\n        return;\n      }\n      console.error(\"Error resolving prediction:\", err);\n      alert(\"Failed to resolve prediction. Please try again.\");\n    }\n  };\n  const handleDeletePrediction = async questionId => {\n    if (!confirm(\"Are you sure you want to delete this prediction? This cannot be undone.\")) {\n      return;\n    }\n    try {\n      setTransactionInProgress(true);\n      await devbaseClient.updateEntity(\"questions\", questionId, {\n        isDeleted: true,\n        title: `[DELETED] ${questions.find(q => q.id === questionId)?.title || ''}`\n      });\n      setTransactionInProgress(false);\n      fetchQuestions();\n      alert(\"Prediction deleted successfully!\");\n    } catch (err) {\n      setTransactionInProgress(false);\n      const errorMessage = err.message || err.toString();\n      const isUserRejection = errorMessage.includes(\"User rejected\") || errorMessage.includes(\"user rejected\") || errorMessage.includes(\"rejected the request\") || err.name === \"WalletSignTransactionError\" || err.name === \"WalletConnectionError\";\n      if (isUserRejection) {\n        return;\n      }\n      console.error(\"Error deleting prediction:\", err);\n      alert(\"Failed to delete prediction. Please try again.\");\n    }\n  };\n  const handlePurchaseLottery = async (numbers, ticketPrice) => {\n    if (!userWallet) {\n      alert(\"Please connect your wallet first!\");\n      return;\n    }\n    try {\n      setTransactionInProgress(true);\n      await devbaseClient.createEntity(\"lottery_tickets\", {\n        userId: userWallet,\n        numbers: numbers.join(','),\n        amount: ticketPrice\n      });\n      setTransactionInProgress(false);\n      setShowCelebration(true);\n      setTimeout(() => setShowCelebration(false), 3000);\n      fetchQuestions();\n      alert(`🎟️ Lottery ticket purchased! Your numbers: ${numbers.join(', ')}`);\n    } catch (err) {\n      setTransactionInProgress(false);\n      const errorMessage = err.message || err.toString();\n      const isUserRejection = errorMessage.includes(\"User rejected\") || errorMessage.includes(\"user rejected\") || errorMessage.includes(\"rejected the request\") || err.name === \"WalletSignTransactionError\" || err.name === \"WalletConnectionError\";\n      if (isUserRejection) {\n        return;\n      }\n      console.error(\"Error purchasing lottery ticket:\", err);\n      alert(\"Failed to purchase lottery ticket. Please try again.\");\n    }\n  };\n  const handleSharePrediction = question => {\n    const baseUrl = \"https://twitter.com/intent/tweet\";\n    const text = `YESNODAO Prediction: ${question.title}\\n\\nPlace your bets now! 🎯\\n\\nyesnodao.fun`;\n    const url = `${baseUrl}?text=${encodeURIComponent(text)}`;\n    openLink(url);\n  };\n  const openResolveModal = question => {\n    setSelectedQuestion(question);\n    setShowResolveModal(true);\n  };\n  const filteredQuestions = questions.filter(q => {\n    if (q.isDeleted) return false;\n    const isExpired = new Date(q.expiresAt) < new Date();\n    const isResolved = q.outcome !== null;\n    if (activeTab === \"active\") {\n      return !isExpired || isExpired && !isResolved;\n    } else {\n      return isResolved;\n    }\n  });\n  const expiredUnresolvedQuestions = isAdmin ? questions.filter(q => {\n    const isExpired = new Date(q.expiresAt) < new Date();\n    return isExpired && q.outcome === null;\n  }) : [];\n  return <div className=\"min-h-screen bg-gradient-to-b from-[#3498db] to-[#6c5ce7] pb-20 relative overflow-visible\">\n      <div className=\"absolute inset-0 scanlines pointer-events-none opacity-20\"></div>\n      {showCelebration && <Confetti />}\n      {showCreateModal && <CreatePredictionModal isOpen={showCreateModal} onClose={() => setShowCreateModal(false)} onSubmit={handleCreatePrediction} />}\n      {showResolveModal && <ResolveQuestionModal isOpen={showResolveModal} onClose={() => setShowResolveModal(false)} onResolve={handleResolvePrediction} question={selectedQuestion} />}\n      {showInfoModal && <InfoModal isOpen={showInfoModal} onClose={() => setShowInfoModal(false)} />}\n      {showJackpotInfoModal && <JackpotInfoModal isOpen={showJackpotInfoModal} onClose={() => setShowJackpotInfoModal(false)} />}\n      {showTestJackpotModal && <TestJackpotModal isOpen={showTestJackpotModal} onClose={() => setShowTestJackpotModal(false)} lotteryTickets={lotteryTickets} totalJackpot={totalJackpot} />}\n      {transactionInProgress && <TransactionProgress isVisible={transactionInProgress} />}\n      <header className=\"bg-gradient-to-r from-[#6c5ce7] via-[#ff69b4] to-[#3498db] py-3 sm:py-6 px-3 sm:px-8 lg:px-[100px] mb-4 sm:mb-8 shadow-lg border-b-2 border-black relative overflow-visible\">\n        <div className=\"absolute inset-0 bg-[url('data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNjAiIGhlaWdodD0iNjAiIHZpZXdCb3g9IjAgMCA2MCA2MCIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj48ZyBmaWxsPSJub25lIiBmaWxsLXJ1bGU9ImV2ZW5vZGQiPjxwYXRoIGQ9Ik0zNiAxOGMzLjMxNCAwIDYtMi42ODYgNi02cy0yLjY4Ni02LTYtNmMtMy4zMTQgMC02IDIuNjg2LTYgNnMyLjY4NiA2IDYgNnptMC04YzEuMTA1IDAgMiAuODk1IDIgMnMtLjg5NSAyLTIgMi0yLS44OTUtMi0yIC44OTUtMiAyLTJ6IiBmaWxsPSJyZ2JhKDI1NSwyNTUsMjU1LDAuMDUpIi8+PC9nPjwvc3ZnPg==')] opacity-5\"></div>\n        <div className=\"max-w-full mx-auto flex flex-col sm:flex-row justify-between items-center gap-2 sm:gap-0 relative z-10\">\n          <div className=\"cursor-pointer text-center sm:text-left w-full sm:w-auto\" onClick={() => currentView === 'profile' ? setCurrentView('main') : null}>\n            <motion.div initial={{\n            opacity: 0,\n            y: -20\n          }} animate={{\n            opacity: 1,\n            y: 0\n          }} transition={{\n            delay: 0.2\n          }}>\n              <PixelatedText size=\"2xl\" className=\"text-white text-2xl sm:text-5xl\">Pot.fun</PixelatedText>\n            </motion.div>\n            <motion.div initial={{\n            opacity: 0,\n            y: 20\n          }} animate={{\n            opacity: 1,\n            y: 0\n          }} transition={{\n            delay: 0.4\n          }}>\n              <PixelatedText size=\"sm\" className=\"mt-0.5 sm:mt-2 text-white text-center sm:text-left text-xs sm:text-base\">one ticket, endless dream.</PixelatedText>\n            </motion.div>\n          </div>\n          <div className=\"flex flex-wrap items-center justify-center gap-2 sm:gap-4\">\n            {isAdmin && <motion.div whileHover={{\n            scale: 1.05\n          }} whileTap={{\n            scale: 0.95\n          }}>\n                <PixelButton color=\"yellow\" onClick={() => setShowCreateModal(true)} className=\"relative overflow-hidden\">\n                  <span className=\"relative z-10\">➕</span>\n                  <motion.div className=\"absolute inset-0 opacity-30\" animate={{\n                backgroundPosition: ['0% 0%', '100% 100%'],\n                backgroundSize: ['100% 100%', '200% 200%']\n              }} transition={{\n                repeat: Infinity,\n                repeatType: \"reverse\",\n                duration: 1.5\n              }} style={{\n                backgroundImage: 'radial-gradient(circle, rgba(255,255,255,0.8) 0%, rgba(255,255,255,0) 70%)'\n              }} />\n                </PixelButton>\n              </motion.div>}\n            {isAdmin && <motion.div whileHover={{\n            scale: 1.05\n          }} whileTap={{\n            scale: 0.95\n          }}>\n                <PixelButton color=\"purple\" onClick={() => setShowTestJackpotModal(true)} className=\"relative overflow-hidden\">\n                  <span className=\"relative z-10\">🤓</span>\n                </PixelButton>\n              </motion.div>}\n            <motion.button onClick={() => setShowInfoModal(true)} className=\"flex items-center justify-center px-3 py-2 sm:px-4 sm:py-2 bg-white border-2 border-black rounded-lg shadow-[2px_2px_0px_0px_rgba(0,0,0,0.8)] hover:bg-[#33e6ff] transition-colors min-h-[44px]\" whileHover={{\n            scale: 1.1\n          }} whileTap={{\n            scale: 0.9\n          }} aria-label=\"How it works\">\n              <PixelatedText size=\"sm\" className=\"text-xs sm:text-base\">How It Works</PixelatedText>\n            </motion.button>\n            <div className=\"relative z-[9999] min-w-[120px] sm:min-w-[140px]\">\n              <UserButton bgColor=\"#6c5ce7\" hoverBgColor=\"#3498db\" radius=\"8px\" height=\"52px\" className=\"w-full min-h-[52px] touch-manipulation active:scale-95 transition-transform\" />\n            </div>\n          </div>\n        </div>\n      </header>\n      <main className=\"max-w-full mx-auto px-3 sm:px-8 lg:px-[100px]\">\n        {isAdmin && <AdminMetricsCard questions={questions} votes={allVotes} claims={allClaims} />}\n        {isAdmin && <PixelCard className=\"mb-8 border-[#6c5ce7]\">\n            <div className=\"flex justify-center\">\n              <PixelButton color=\"purple\" onClick={() => setShowTestJackpotModal(true)}>\n                🧪 TEST JACKPOT DRAW\n              </PixelButton>\n            </div>\n          </PixelCard>}\n        <JackpotCard totalJackpot={totalJackpot} onInfoClick={() => setShowJackpotInfoModal(true)} />\n        <IntroCard />\n        <CountdownTimer />\n        <LotteryTicketCard userWallet={userWallet} onPurchase={handlePurchaseLottery} />\n        <PixelCard className=\"mb-8 border-[#3498db]\">\n          <div className=\"bg-gradient-to-r from-[#6c5ce7] via-[#ff69b4] to-[#3498db] -m-4 mb-4 p-4 border-b-2 border-black\">\n            <PixelatedText size=\"xl\" className=\"text-center text-black\">Players Activity</PixelatedText>\n          </div>\n          <div className=\"bg-gradient-to-r from-[#87CEEB] via-[#6BB6FF] to-[#87CEEB] rounded-lg p-2 sm:p-3 border-2 border-black shadow-[2px_2px_0px_0px_rgba(0,0,0,0.8)] mb-3 sm:mb-4\">\n            <PixelatedText size=\"sm\" className=\"text-center text-black text-xs sm:text-base\">\n              These guys are all like: 'Let's bet this'!\n            </PixelatedText>\n          </div>\n          <div className=\"relative\">\n            <div className=\"hidden sm:block space-y-3 max-h-[320px] overflow-y-auto pr-2 scrollbar-thin scrollbar-thumb-[#6c5ce7] scrollbar-track-gray-200 mobile-scroll\">\n              {lotteryTickets.length === 0 ? <div className=\"text-center py-8\">\n                  <PixelatedText size=\"sm\" className=\"text-[#0a3d62]\">\n                    No tickets yet. Be the first to play!\n                  </PixelatedText>\n                </div> : lotteryTickets.slice().reverse().map((ticket, idx) => {\n              const ticketNumbers = ticket.numbers.split(',').map(Number);\n              const isWinner = currentWinningNumbers.length === 4 && currentWinningNumbers.every(num => ticketNumbers.includes(num));\n              return <motion.div key={idx} className={`border-2 rounded-lg p-3 shadow-[2px_2px_0px_0px_rgba(0,0,0,0.8)] ${isWinner ? 'bg-gradient-to-r from-[#ff3b30] via-[#ff6b6b] to-[#ff3b30] border-[#ff3b30]' : 'bg-gradient-to-r from-[#90EE90] via-[#7FD77F] to-[#90EE90] border-black'}`} animate={isWinner ? {\n                boxShadow: ['0 0 10px rgba(255, 59, 48, 0.5)', '0 0 20px rgba(255, 59, 48, 0.8)', '0 0 10px rgba(255, 59, 48, 0.5)']\n              } : {}} transition={isWinner ? {\n                duration: 1.5,\n                repeat: Infinity,\n                ease: \"easeInOut\"\n              } : {}}>\n                  <div className=\"flex flex-col gap-2\">\n                    {isWinner && <PixelatedText size=\"md\" className=\"text-white text-center animate-pulse\">\n                        🎉 WINNER! 🎉\n                      </PixelatedText>}\n                    <div className=\"flex flex-row items-center justify-between gap-2\">\n                      <PixelatedText size=\"sm\" className={`break-all flex-shrink-0 ${isWinner ? 'text-white' : 'text-black'}`}>\n                        {ticket.userId.slice(0, 8)}...{ticket.userId.slice(-6)}\n                      </PixelatedText>\n                      <div className=\"flex gap-1 flex-shrink-0\">\n                        {ticketNumbers.map((num, numIdx) => <div key={numIdx} className={`w-7 h-7 rounded-lg flex items-center justify-center border-2 ${isWinner ? 'border-white bg-white' : 'border-black bg-gradient-to-br from-[#C0C0C0] via-[#E8E8E8] to-[#A8A8A8]'}`}>\n                            <PixelatedText size=\"sm\" className={`text-xs ${isWinner ? 'text-[#ff3b30]' : 'text-black'}`}>\n                              {num}\n                            </PixelatedText>\n                          </div>)}\n                      </div>\n                      <PixelatedText size=\"sm\" className={`flex-shrink-0 ${isWinner ? 'text-white' : 'text-black'}`}>\n                        {ticket.amount} SOL\n                      </PixelatedText>\n                      <motion.button onClick={() => openLink(`https://solscan.io/account/${ticket.userId}`)} className={`px-2 py-1 border-2 rounded-lg shadow-[2px_2px_0px_0px_rgba(0,0,0,0.8)] transition-colors flex-shrink-0 ${isWinner ? 'bg-white hover:bg-[#f0f0f0] border-white' : 'bg-[#3498db] hover:bg-[#33e6ff] border-black'}`} whileHover={{\n                      scale: 1.05\n                    }} whileTap={{\n                      scale: 0.95\n                    }}>\n                        <PixelatedText size=\"sm\" className={`text-xs ${isWinner ? 'text-[#ff3b30]' : 'text-white'}`}>\n                          TX\n                        </PixelatedText>\n                      </motion.button>\n                    </div>\n                  </div>\n                </motion.div>;\n            })}\n            </div>\n            <div className=\"sm:hidden space-y-3 max-h-[320px] overflow-y-auto mobile-scroll scrollbar-thin scrollbar-thumb-[#6c5ce7] scrollbar-track-gray-200\">\n              {lotteryTickets.length === 0 ? <div className=\"text-center py-8 w-full\">\n                  <PixelatedText size=\"sm\" className=\"text-[#0a3d62]\">\n                    No tickets yet. Be the first to play!\n                  </PixelatedText>\n                </div> : lotteryTickets.slice().reverse().map((ticket, idx) => {\n              const ticketNumbers = ticket.numbers.split(',').map(Number);\n              const isWinner = currentWinningNumbers.length === 4 && currentWinningNumbers.every(num => ticketNumbers.includes(num));\n              return <motion.div key={idx} className={`border-2 rounded-lg p-3 shadow-[2px_2px_0px_0px_rgba(0,0,0,0.8)] ${isWinner ? 'bg-gradient-to-r from-[#ff3b30] via-[#ff6b6b] to-[#ff3b30] border-[#ff3b30]' : 'bg-gradient-to-r from-[#90EE90] via-[#7FD77F] to-[#90EE90] border-black'}`} animate={isWinner ? {\n                boxShadow: ['0 0 10px rgba(255, 59, 48, 0.5)', '0 0 20px rgba(255, 59, 48, 0.8)', '0 0 10px rgba(255, 59, 48, 0.5)']\n              } : {}} transition={isWinner ? {\n                duration: 1.5,\n                repeat: Infinity,\n                ease: \"easeInOut\"\n              } : {}}>\n                  <div className=\"flex flex-col gap-2\">\n                    {isWinner && <PixelatedText size=\"md\" className=\"text-white text-center animate-pulse\">\n                        🎉 WINNER! 🎉\n                      </PixelatedText>}\n                    <div className=\"flex flex-col gap-2\">\n                      <PixelatedText size=\"sm\" className={`break-all ${isWinner ? 'text-white' : 'text-black'}`}>\n                        {ticket.userId.slice(0, 8)}...{ticket.userId.slice(-6)}\n                      </PixelatedText>\n                      <div className=\"flex gap-1 justify-center\">\n                        {ticketNumbers.map((num, numIdx) => <div key={numIdx} className={`w-9 h-9 rounded-lg flex items-center justify-center border-2 ${isWinner ? 'border-white bg-white' : 'border-black bg-gradient-to-br from-[#C0C0C0] via-[#E8E8E8] to-[#A8A8A8]'}`}>\n                            <PixelatedText size=\"sm\" className={isWinner ? 'text-[#ff3b30]' : 'text-black'}>\n                              {num}\n                            </PixelatedText>\n                          </div>)}\n                      </div>\n                      <div className=\"flex justify-between items-center\">\n                        <PixelatedText size=\"sm\" className={isWinner ? 'text-white' : 'text-black'}>\n                          {ticket.amount} SOL\n                        </PixelatedText>\n                        <motion.button onClick={() => openLink(`https://solscan.io/account/${ticket.userId}`)} className={`px-2 py-1 border-2 rounded-lg shadow-[2px_2px_0px_0px_rgba(0,0,0,0.8)] transition-colors ${isWinner ? 'bg-white hover:bg-[#f0f0f0] border-white' : 'bg-[#3498db] hover:bg-[#33e6ff] border-black'}`} whileHover={{\n                        scale: 1.05\n                      }} whileTap={{\n                        scale: 0.95\n                      }}>\n                          <PixelatedText size=\"sm\" className={`text-xs ${isWinner ? 'text-[#ff3b30]' : 'text-white'}`}>\n                            TX\n                          </PixelatedText>\n                        </motion.button>\n                      </div>\n                    </div>\n                  </div>\n                </motion.div>;\n            })}\n            </div>\n            {lotteryTickets.length > 5 && <div className=\"hidden sm:block absolute bottom-0 left-0 right-0 h-8 bg-gradient-to-t from-white to-transparent pointer-events-none rounded-b-lg\"></div>}\n          </div>\n        </PixelCard>\n        <MegapotCard />\n        {isAdmin && activeTab === \"active\" && filteredQuestions.length > 0 && <div className=\"mb-8\">\n            <PixelCard className=\"border-[#3498db]\">\n              <PixelatedText size=\"xl\" className=\"mb-4 text-center text-[#0a3d62]\">Share Predictions</PixelatedText>\n              <div className=\"space-y-4\">\n                {filteredQuestions.map(question => <div key={question.id} className=\"flex flex-row justify-between items-center border-b-2 border-[#33e6ff] border-opacity-30 pb-3 gap-3\">\n                    <div className=\"flex-1\">\n                      <EmojiText size=\"md\" className=\"break-words\">🎯 {question.title}</EmojiText>\n                      <PixelatedText size=\"sm\" className=\"text-[#0a3d62] opacity-80\">\n                        ⏰ {new Date(question.expiresAt).toLocaleString()}\n                      </PixelatedText>\n                    </div>\n                    <PixelButton color=\"blue\" onClick={() => handleSharePrediction(question)} className=\"flex items-center gap-2\">\n                      <svg width=\"16\" height=\"16\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" strokeWidth=\"2\" strokeLinecap=\"round\" strokeLinejoin=\"round\">\n                        <path d=\"M22 4s-.7 2.1-2 3.4c1.6 10-9.4 17.3-18 11.6 2.2.1 4.4-.6 6-2C3 15.5.5 9.6 3 5c2.2 2.6 5.6 4.1 9 4-.9-4.2 4-6.6 7-3.8 1.1 0 3-1.2 3-1.2z\" />\n                      </svg>\n                      🐦\n                    </PixelButton>\n                  </div>)}\n              </div>\n            </PixelCard>\n          </div>}\n        {isAdmin && expiredUnresolvedQuestions.length > 0 && <div className=\"mb-8\">\n            <PixelCard className=\"border-[#ffde00]\">\n              <PixelatedText size=\"xl\" className=\"mb-4 text-center text-[#0a3d62]\">Resolve Predictions</PixelatedText>\n              <div className=\"space-y-4\">\n                {expiredUnresolvedQuestions.map(question => <div key={question.id} className=\"flex flex-row justify-between items-center border-b-2 border-[#33e6ff] pb-3 gap-3\">\n                    <div>\n                      <EmojiText size=\"md\">🎯 {question.title}</EmojiText>\n                      <PixelatedText size=\"sm\" className=\"text-[#0a3d62] opacity-80\">⌛ {new Date(question.expiresAt).toLocaleString()}</PixelatedText>\n                    </div>\n                    <PixelButton color=\"purple\" onClick={() => openResolveModal(question)}>\n                      🎲\n                    </PixelButton>\n                  </div>)}\n              </div>\n            </PixelCard>\n          </div>}\n            {isAdmin && activeTab === \"resolved\" && <div className=\"mb-8\">\n                <PixelCard className=\"border-[#ff3b30]\">\n                  <PixelatedText size=\"xl\" className=\"mb-4 text-center text-[#0a3d62]\">Delete Predictions</PixelatedText>\n                  <div className=\"space-y-4\">\n                    {questions.filter(q => q.outcome !== null).map(question => <div key={question.id} className=\"flex flex-row justify-between items-center border-b-2 border-[#ff3b30] border-opacity-30 pb-3 gap-3\">\n                        <div className=\"flex-1\">\n                          <EmojiText size=\"md\" className=\"break-words\">🎯 {question.title}</EmojiText>\n                          <PixelatedText size=\"sm\" className=\"text-[#0a3d62] opacity-80\">\n                            ✅ {question.resolvedAt ? new Date(question.resolvedAt).toLocaleString() : '?'} - \n                            <span className={question.outcome === \"yes\" ? \"text-[#4cd964]\" : \"text-[#ff3b30]\"}>\n                              {question.outcome === \"yes\" ? \" ✅\" : \" ❌\"}\n                            </span>\n                          </PixelatedText>\n                        </div>\n                        <PixelButton color=\"red\" onClick={() => handleDeletePrediction(question.id)}>\n                          🗑️\n                        </PixelButton>\n                      </div>)}\n                  </div>\n                </PixelCard>\n              </div>}\n            {loading ? <div className=\"text-center py-10\">\n                <div className=\"inline-block animate-bounce mx-1 w-4 h-4 bg-[#6c5ce7] rounded-full\"></div>\n                <div className=\"inline-block animate-bounce mx-1 w-4 h-4 bg-[#ff69b4] rounded-full\" style={{\n          animationDelay: \"0.2s\"\n        }}></div>\n                <div className=\"inline-block animate-bounce mx-1 w-4 h-4 bg-[#33e6ff] rounded-full\" style={{\n          animationDelay: \"0.4s\"\n        }}></div>\n                <EmojiText size=\"xl\" className=\"mt-4 text-white\">⏳</EmojiText>\n              </div> : error ? <div className=\"text-center py-10\">\n                <EmojiText size=\"xl\" className=\"text-[#ff3b30]\">❌</EmojiText>\n              </div> : filteredQuestions.length === 0 ? null : <div className=\"grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-4 sm:gap-6\">\n                {filteredQuestions.map(question => <QuestionCard key={question.id} question={question} onVote={handleVote} onClaim={handleClaim} userWallet={userWallet} />)}\n              </div>}\n      </main>\n      <footer className=\"w-full pt-6 sm:pt-10 pb-4 sm:pb-6 relative\">\n        <div className=\"max-w-full mx-auto px-3 sm:px-8 lg:px-[100px]\">\n          <PixelatedText size=\"md\" className=\"text-center text-white mb-3 sm:mb-4 text-sm sm:text-base\">\n            Follow Us!\n          </PixelatedText>\n          <div className=\"flex justify-center\">\n            <a href=\"https://x.com/potdotfun\" target=\"_blank\" rel=\"noopener noreferrer\" className=\"flex items-center justify-center w-12 h-12 sm:w-10 sm:h-10 bg-white border-2 border-black rounded-full shadow-[2px_2px_0px_0px_rgba(0,0,0,0.8)] hover:bg-[#ffde00] transition-colors\">\n            <svg width=\"20\" height=\"20\" viewBox=\"0 0 24 24\" fill=\"#0a3d62\" stroke=\"none\">\n              <path d=\"M18.244 2.25h3.308l-7.227 8.26 8.502 11.24H16.17l-5.214-6.817L4.99 21.75H1.68l7.73-8.835L1.254 2.25H8.08l4.713 6.231zm-1.161 17.52h1.833L7.084 4.126H5.117z\" />\n            </svg>\n          </a>\n          </div>\n        </div>\n      </footer>\n      <style jsx global>{`\n        @import url('https://fonts.googleapis.com/css2?family=Press+Start+2P&family=VT323&display=swap');\n        :root {\n          --primary-blue: #3498db;\n          --secondary-cyan: #33e6ff;\n          --accent-yellow: #ffde00;\n          --action-pink: #ff69b4;\n          --battle-green: #4cd964;\n          --text-dark-blue: #0a3d62;\n          --live-red: #ff3b30;\n          --wallet-purple: #6c5ce7;\n          --pixel-shadow: 3px 3px 0 rgba(0,0,0,0.8);\n          --pixel-border: 2px solid #000;\n        }\n        * {\n          cursor: pointer !important;\n        }\n        body {\n          overflow-x: hidden;\n          position: relative;\n          cursor: pointer !important;\n        }\n        \n        .touch-manipulation {\n          touch-action: manipulation;\n          -webkit-tap-highlight-color: transparent;\n          user-select: none;\n        }\n        .scrollbar-thin::-webkit-scrollbar {\n          width: 4px;\n          height: 4px;\n        }\n        .scrollbar-thin::-webkit-scrollbar-track {\n          background: #e5e7eb;\n          border-radius: 4px;\n        }\n.scrollbar-thin::-webkit-scrollbar-thumb {\n          background: #FF8C00;\n          border-radius: 4px;\n          box-shadow: 0 0 8px #FF8C00;\n        }\n        .scrollbar-thin::-webkit-scrollbar-thumb:hover {\n          background: #FFA500;\n          border-radius: 4px;\n          box-shadow: 0 0 12px #FFA500;\n        }\n        .mobile-scroll {\n          -webkit-overflow-scrolling: touch;\n          overflow-y: auto;\n          touch-action: pan-y;\n        }\n        .font-pixel {\n          font-family: 'Press Start 2P', monospace;\n          image-rendering: pixelated;\n          text-transform: uppercase;\n          letter-spacing: 1px;\n        }\n        .font-button {\n          font-family: 'VT323', monospace;\n        }\n        .font-body {\n          font-family: 'Courier New', monospace;\n        }\n        .pixel-text {\n          font-family: 'Press Start 2P', monospace;\n          image-rendering: pixelated;\n          text-transform: uppercase;\n          letter-spacing: 1px;\n          line-height: 1.4;\n        }\n        button {\n          image-rendering: pixelated;\n          transition: all 0.1s;\n        }\n        .text-shadow-\\[0_2px_0_\\#000\\] {\n          text-shadow: 0 2px 0 #000;\n        }\n        .text-shadow-\\[0_1px_0_\\#000\\] {\n          text-shadow: 0 1px 0 #000;\n        }\n        .scanlines {\n          background: linear-gradient(\n            to bottom,\n            transparent 50%,\n            rgba(0, 0, 0, 0.1) 50%\n          );\n          background-size: 100% 4px;\n          pointer-events: none;\n        }\n      `}</style>\n    </div>;\n}","packageJson","{\"dependencies\":{\"react\":\"18.2.0\",\"framer-motion\":\"10.16.4\",\"lucide-react\":\"0.441.0\",\"@devfunlabs/web-sdk\":\"0.5.6\",\"react-router-dom\":\"6.18.0\",\"recharts\":\"2.8.0\",\"@solana/web3.js\":\"1.95.3\",\"socket.io-client\":\"4.7.1\",\"@solana/wallet-adapter-base\":\"0.9.23\",\"@solana/wallet-adapter-react\":\"0.15.35\",\"@solana/wallet-adapter-react-ui\":\"0.9.35\",\"@solana/wallet-adapter-wallets\":\"0.19.32\",\"zod\":\"3.22.4\"}}","appFunctions",[],"token","upstreamApp",{"_14":83,"_36":84,"_38":85,"_86":87,"_20":88,"_22":89,"_24":90,"_91":92,"_93":94,"_34":95,"_96":97,"_42":43,"_44":98,"_99":100,"_101":17,"_28":27,"_71":17,"_72":27,"_102":17,"_103":17,"_104":27,"_105":17,"_58":106,"_60":43,"_62":43,"_63":107,"_68":61,"_66":108,"_65":61,"_109":110,"_111":-5,"_40":112,"_18":113,"_114":115,"_196":17,"_26":27,"_67":43,"_29":197},"27906a144d55a012351a",["D",1748550565206],["D",1761593768802],"template","web","YESNODAO","Place your bets in this adorable pixel-art prediction market where you stake 0.001 SOL on daily yes/no questions! Watch your pixelated fortune grow as correct guessers split the pot, with cute animations celebrating your winning predictions in vibrant Disney-inspired colors.","Stake tiny SOL bets on daily predictions in a pixel-perfect Disney-bright fortune-telling game!","snapshot","https://cdn.dev.fun/snapshot/27906a144d55a012351a/130155_4f86603c.webp","ogImage","https://cdn.dev.fun/og/image/27906a144d55a012351a/013bed76.webp","https://cdn.dev.fun/app/27906a144d55a012351a/130155","category","gaming",-50,"featureScore","0.00980392","isAutomated","isTagHot","isTagMoney","isTagCrown","isExternalApp",50,777,2,"userId","1eaec144-69a9-4224-b940-fffc75be6107","upstreamAppId",["B","130155"],"AgYVbX4CueNVrBAXZh84DoFQtZhG6wpi3JgXHyCKpump","lastCommit",{"_14":112,"_36":116,"_117":118,"_119":120,"_74":121,"_76":122,"_123":124,"_125":126,"_127":120,"_91":92,"_34":95,"_128":17,"_129":17,"_130":27,"_86":87,"_131":-5,"_132":133,"_191":192,"_6":83,"_109":110,"_193":194,"_78":195},["D",1760974901636],"input","in the share messages replaces, https://dev.fun/p/27906a144d55a012351a with yesnodao.fun","output","<<<<<<< OLD\n  const handleShare = () => {\n    const baseUrl = \"https://twitter.com/intent/tweet\";\n    const text = `I just predicted \"${userVote.toUpperCase()}\" on \"${question.title}\" at YesNoDAO! Join me and predict the future to get paid for it! https://dev.fun/p/27906a144d55a012351a built with @devfunpump`;\n    const url = `${baseUrl}?text=${encodeURIComponent(text)}`;\n    openLink(url);\n  };\n=======\n  const handleShare = () => {\n    const baseUrl = \"https://twitter.com/intent/tweet\";\n    const text = `I just predicted \"${userVote.toUpperCase()}\" on \"${question.title}\" at YesNoDAO! Join me and predict the future to get paid for it! yesnodao.fun built with @devfunpump`;\n    const url = `${baseUrl}?text=${encodeURIComponent(text)}`;\n    openLink(url);\n  };\n>>>>>>> NEW\n\n<<<<<<< OLD\n          <div className=\"flex justify-center mt-4\">\n            <PixelButton color=\"blue\" onClick={() => {\n            const text = `I've made ${userStats.totalVotes} predictions on YesNoDAO with a ${userStats.correctVotes > 0 ? Math.round(userStats.correctVotes / (userStats.correctVotes + userStats.incorrectVotes) * 100) : 0}% win rate! Join me to predict the future and get paid for it! https://dev.fun/p/27906a144d55a012351a built with @devfunpump`;\n            const url = `https://twitter.com/intent/tweet?text=${encodeURIComponent(text)}`;\n            openLink(url);\n          }} className=\"flex items-center gap-2\">\n=======\n          <div className=\"flex justify-center mt-4\">\n            <PixelButton color=\"blue\" onClick={() => {\n            const text = `I've made ${userStats.totalVotes} predictions on YesNoDAO with a ${userStats.correctVotes > 0 ? Math.round(userStats.correctVotes / (userStats.correctVotes + userStats.incorrectVotes) * 100) : 0}% win rate! Join me to predict the future and get paid for it! yesnodao.fun built with @devfunpump`;\n            const url = `https://twitter.com/intent/tweet?text=${encodeURIComponent(text)}`;\n            openLink(url);\n          }} className=\"flex items-center gap-2\">\n>>>>>>> NEW","import { useState, useEffect } from 'react';\nimport { useDevapp, UserButton, DevappProvider, openLink } from '@devfunlabs/web-sdk';\nimport { motion } from 'framer-motion';\nexport default function AppWithProvider() {\n  return <DevappProvider rpcEndpoint=\"https://rpc.dev.fun/27906a144d55a012351a\" devbaseEndpoint=\"https://devbase.dev.fun\" appId=\"27906a144d55a012351a\">\n      <App />\n    </DevappProvider>;\n}\nfunction PixelatedText({\n  children,\n  className = \"\",\n  size = \"md\"\n}) {\n  const sizeClasses = {\n    sm: \"text-xs md:text-sm\",\n    md: \"text-sm md:text-lg\",\n    lg: \"text-base md:text-xl\",\n    xl: \"text-lg md:text-2xl\",\n    \"2xl\": \"text-xl md:text-3xl\"\n  };\n  return <div className={`font-pixel ${sizeClasses[size]} ${className} pixel-text`}>\n      {children}\n    </div>;\n}\nfunction PixelButton({\n  children,\n  onClick,\n  color = \"blue\",\n  disabled = false,\n  className = \"\"\n}) {\n  const colorClasses = {\n    blue: \"bg-[#3498db] hover:bg-[#33e6ff] border-b-4 border-[#0a3d62] hover:border-[#33e6ff] text-white\",\n    green: \"bg-[#4cd964] hover:bg-[#4cd964] border-b-4 border-[#2ecc71] hover:border-[#27ae60] text-white\",\n    red: \"bg-[#ff3b30] hover:bg-[#ff3b30] border-b-4 border-[#c0392b] hover:border-[#e74c3c] text-white\",\n    yellow: \"bg-[#ffde00] hover:bg-[#ffde00] border-b-4 border-[#f39c12] hover:border-[#f1c40f] text-black\",\n    purple: \"bg-[#6c5ce7] hover:bg-[#6c5ce7] border-b-4 border-[#5b48d0] hover:border-[#4834d4] text-white\",\n    pink: \"bg-[#ff69b4] hover:bg-[#ff69b4] border-b-4 border-[#e84393] hover:border-[#fd79a8] text-white\"\n  };\n  return <motion.button onClick={onClick} disabled={disabled} whileHover={{\n    scale: 1.05,\n    boxShadow: \"0 0 8px 2px #ffde00\"\n  }} whileTap={{\n    y: 2\n  }} className={`${colorClasses[color]} px-2 sm:px-4 py-1 sm:py-2 rounded-lg font-button transform transition-all active:translate-y-1 active:border-b-2 disabled:opacity-50 disabled:cursor-not-allowed shadow-[2px_2px_0px_0px_rgba(0,0,0,0.8)] sm:shadow-[3px_3px_0px_0px_rgba(0,0,0,0.8)] border-2 border-black text-xs sm:text-base ${className}`}>\n      <PixelatedText size=\"md\">{children}</PixelatedText>\n    </motion.button>;\n}\nfunction PixelCard({\n  children,\n  className = \"\"\n}) {\n  return <div className={`bg-white border-2 border-black rounded-lg p-4 shadow-[3px_3px_0px_0px_rgba(0,0,0,0.8)] relative overflow-hidden ${className}`}>\n      <div className=\"absolute inset-0 pointer-events-none scanlines opacity-10\"></div>\n      {children}\n    </div>;\n}\nfunction Confetti() {\n  return <div className=\"fixed inset-0 pointer-events-none z-50\">\n      {Array.from({\n      length: 50\n    }).map((_, index) => {\n      const size = Math.random() * 10 + 5;\n      const colors = [\"#ff69b4\", \"#ffde00\", \"#33e6ff\", \"#3498db\", \"#6c5ce7\", \"#4cd964\"];\n      const color = colors[Math.floor(Math.random() * colors.length)];\n      const left = Math.random() * 100;\n      const animationDuration = Math.random() * 3 + 2;\n      const delay = Math.random();\n      return <motion.div key={index} className=\"absolute w-2 h-2 rounded-sm\" style={{\n        backgroundColor: color,\n        width: size,\n        height: size,\n        left: `${left}%`,\n        top: -20\n      }} initial={{\n        top: -20\n      }} animate={{\n        top: \"120%\",\n        rotate: [0, 360],\n        x: [0, Math.random() * 100 - 50]\n      }} transition={{\n        duration: animationDuration,\n        delay: delay,\n        ease: \"linear\",\n        repeat: Infinity,\n        repeatDelay: 0\n      }} />;\n    })}\n    </div>;\n}\nfunction PixelImage({\n  src,\n  alt,\n  className = \"\"\n}) {\n  const [loaded, setLoaded] = useState(false);\n  const [error, setError] = useState(false);\n  return <div className={`relative overflow-hidden rounded-lg border-2 border-black shadow-[2px_2px_0px_0px_rgba(0,0,0,0.8)] ${className}`}>\n      {!loaded && !error && <div className=\"absolute inset-0 bg-[#0a3d62] bg-opacity-10 flex items-center justify-center min-h-[6rem]\">\n          <motion.div className=\"w-12 h-12 grid grid-cols-4 grid-rows-4 gap-1\" initial={{\n        opacity: 0.6\n      }} animate={{\n        opacity: 1\n      }}>\n            {Array.from({\n          length: 16\n        }).map((_, i) => <motion.div key={i} className=\"bg-[#33e6ff]\" initial={{\n          opacity: 0\n        }} animate={{\n          opacity: 1\n        }} transition={{\n          duration: 0.3,\n          delay: i * 0.05,\n          repeat: Infinity,\n          repeatType: \"reverse\"\n        }} />)}\n          </motion.div>\n        </div>}\n      {error ? <div className=\"w-full h-24 bg-[#0a3d62] bg-opacity-10 flex items-center justify-center\">\n          <PixelatedText size=\"sm\" className=\"text-[#0a3d62]\">Image not available</PixelatedText>\n        </div> : <img src={src} alt={alt} className={`w-full object-contain transition-opacity duration-300 ${loaded ? 'opacity-100' : 'opacity-0'}`} style={{\n      imageRendering: 'pixelated'\n    }} onLoad={() => setLoaded(true)} onError={() => setError(true)} />}\n      <div className=\"absolute inset-0 pointer-events-none scanlines opacity-30\"></div>\n    </div>;\n}\nfunction QuestionCard({\n  question,\n  onVote,\n  userWallet,\n  onClaim\n}) {\n  const [userVote, setUserVote] = useState(null);\n  const [showShareButton, setShowShareButton] = useState(false);\n  const isExpired = new Date(question.expiresAt) < new Date();\n  const isResolved = question.outcome !== null;\n  const totalVotes = question.yesVotes + question.noVotes;\n  const yesPercentage = totalVotes === 0 ? 0 : Math.round(question.yesVotes / totalVotes * 100);\n  const noPercentage = totalVotes === 0 ? 0 : Math.round(question.noVotes / totalVotes * 100);\n  const userVotedCorrectly = userVote === question.outcome;\n  const hasUserClaimed = question.claimedBy && question.claimedBy.includes(userWallet);\n  const canClaim = isResolved && userVotedCorrectly && !hasUserClaimed && userWallet;\n  useEffect(() => {\n    if (question.votes && userWallet) {\n      const vote = question.votes.find(v => v.userId === userWallet);\n      if (vote) {\n        setUserVote(vote.prediction);\n        setShowShareButton(true);\n      } else {\n        setUserVote(null);\n        setShowShareButton(false);\n      }\n    } else {\n      setUserVote(null);\n      setShowShareButton(false);\n    }\n  }, [question.votes, userWallet]);\n  const handleShare = () => {\n    const baseUrl = \"https://twitter.com/intent/tweet\";\n    const text = `I just predicted \"${userVote.toUpperCase()}\" on \"${question.title}\" at YesNoDAO! Join me and predict the future to get paid for it! yesnodao.fun built with @devfunpump`;\n    const url = `${baseUrl}?text=${encodeURIComponent(text)}`;\n    openLink(url);\n  };\n  const formatDate = dateString => {\n    const date = new Date(dateString);\n    return date.toLocaleString();\n  };\n  const getOutcomeLabel = () => {\n    if (!isResolved) return \"Pending...\";\n    return question.outcome === \"yes\" ? \"YES!\" : \"NO!\";\n  };\n  const getRewardAmount = () => {\n    if (!isResolved || !userVotedCorrectly) return 0;\n    const totalCorrectVotes = question.outcome === \"yes\" ? question.yesVotes : question.noVotes;\n    if (totalCorrectVotes <= 0) return 0;\n    const voteAmount = question.voteAmount || 0.001;\n    const poolAmount = question.totalPool || question.votes?.length * voteAmount || 0;\n    if (poolAmount <= 0) return 0;\n    const reward = poolAmount * 0.95 / totalCorrectVotes;\n    const flooredReward = Math.floor(reward * 10000) / 10000;\n    return isNaN(flooredReward) || flooredReward <= 0 ? \"0.0000\" : flooredReward.toFixed(4);\n  };\n  return <PixelCard className=\"w-full h-full overflow-hidden\">\n      <div className=\"bg-gradient-to-r from-[#ff69b4] via-[#6c5ce7] to-[#3498db] -m-4 mb-4 p-2 sm:p-4 border-b-2 border-black\">\n        <PixelatedText size=\"lg\" className=\"text-white mb-2\">{question.title}</PixelatedText>\n        <div className=\"flex flex-col sm:flex-row sm:justify-between text-white gap-1\">\n          <div className=\"flex flex-col sm:flex-row sm:items-center gap-1 sm:gap-3\">\n            <PixelatedText size=\"sm\">Pool: {question.totalPool.toFixed(3)} SOL</PixelatedText>\n            <PixelatedText size=\"sm\" className=\"sm:border-l sm:border-white sm:border-opacity-30 sm:pl-3\">\n              Vote Cost: {question.voteAmount || 0.001} SOL\n            </PixelatedText>\n          </div>\n          <PixelatedText size=\"sm\">\n            {isExpired ? isResolved ? \"Resolved\" : \"Awaiting Result\" : `Ends: ${formatDate(question.expiresAt)}`}\n          </PixelatedText>\n        </div>\n      </div>\n      {question.imageUrl && <div className=\"mb-4 flex justify-center\">\n          <PixelImage src={question.imageUrl} alt={question.title} className=\"w-2/3 max-w-sm\" />\n        </div>}\n      <div className=\"mb-4\">\n        <PixelatedText className=\"font-body text-[#0a3d62] text-sm sm:text-base\">{question.description}</PixelatedText>\n      </div>\n      {!isExpired && <div className=\"flex flex-col items-center mb-4\">\n          {userVote ? <div className=\"bg-[#33e6ff] bg-opacity-20 border-2 border-[#33e6ff] rounded-lg p-3 text-center shadow-[2px_2px_0px_0px_rgba(0,0,0,0.8)]\">\n              <PixelatedText size=\"md\" className=\"text-[#0a3d62]\">\n                You voted: <span className={userVote === \"yes\" ? \"text-[#4cd964]\" : \"text-[#ff3b30]\"}>{userVote.toUpperCase()}</span>\n              </PixelatedText>\n            </div> : <>\n              <PixelatedText size=\"sm\" className=\"text-[#0a3d62] mb-2 bg-[#ffde00] bg-opacity-20 py-1 px-3 rounded-lg border border-[#ffde00]\">\n                Cost to vote: {question.voteAmount || 0.001} SOL\n              </PixelatedText>\n              <div className=\"flex space-x-3 sm:space-x-4\">\n                <PixelButton color=\"green\" onClick={() => onVote(question.id, \"yes\")} disabled={!userWallet || userVote !== null}>\n                  YES\n                </PixelButton>\n                <PixelButton color=\"red\" onClick={() => onVote(question.id, \"no\")} disabled={!userWallet || userVote !== null}>\n                  NO\n                </PixelButton>\n              </div>\n            </>}\n        </div>}\n      {}\n      <div className=\"mb-4\">\n        <div className=\"flex justify-between mb-1\">\n          <PixelatedText size=\"sm\" className=\"text-[#4cd964]\">YES: {question.yesVotes}</PixelatedText>\n          <PixelatedText size=\"sm\" className=\"text-[#ff3b30]\">NO: {question.noVotes}</PixelatedText>\n        </div>\n        <div className=\"h-5 sm:h-6 bg-[#0a3d62] bg-opacity-20 rounded-full overflow-hidden border-2 border-black\">\n          <div className=\"h-full bg-gradient-to-r from-[#4cd964] to-[#33e6ff]\" style={{\n          width: `${yesPercentage}%`\n        }}></div>\n        </div>\n        <div className=\"flex justify-between mt-1\">\n          <PixelatedText size=\"sm\" className=\"text-[#0a3d62]\">{yesPercentage}%</PixelatedText>\n          <PixelatedText size=\"sm\" className=\"text-[#0a3d62]\">{noPercentage}%</PixelatedText>\n        </div>\n        {showShareButton && userVote && <motion.div initial={{\n        opacity: 0,\n        y: 10\n      }} animate={{\n        opacity: 1,\n        y: 0\n      }} className=\"mt-3 flex justify-center\">\n            <PixelButton color=\"blue\" onClick={handleShare} className=\"flex items-center gap-2\">\n              <svg width=\"16\" height=\"16\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" strokeWidth=\"2\" strokeLinecap=\"round\" strokeLinejoin=\"round\">\n                <path d=\"M22 4s-.7 2.1-2 3.4c1.6 10-9.4 17.3-18 11.6 2.2.1 4.4-.6 6-2C3 15.5.5 9.6 3 5c2.2 2.6 5.6 4.1 9 4-.9-4.2 4-6.6 7-3.8 1.1 0 3-1.2 3-1.2z\" />\n              </svg>\n              Share on X\n            </PixelButton>\n          </motion.div>}\n      </div>\n      {isResolved && <div className={`p-3 rounded-lg mb-4 text-center border-2 shadow-[2px_2px_0px_0px_rgba(0,0,0,0.8)] ${question.outcome === \"yes\" ? \"bg-[#4cd964] bg-opacity-20 border-[#4cd964]\" : \"bg-[#ff3b30] bg-opacity-20 border-[#ff3b30]\"}`}>\n          <PixelatedText size=\"lg\" className={question.outcome === \"yes\" ? \"text-[#4cd964]\" : \"text-[#ff3b30]\"}>\n            Outcome: {getOutcomeLabel()}\n          </PixelatedText>\n        </div>}\n      {userVotedCorrectly && isResolved && <div className=\"bg-[#ffde00] bg-opacity-20 border-2 border-[#ffde00] rounded-lg p-3 mb-4 text-center shadow-[2px_2px_0px_0px_rgba(0,0,0,0.8)]\">\n          <PixelatedText size=\"md\" className=\"text-[#0a3d62]\">\n            You win! Reward: {getRewardAmount()} SOL\n          </PixelatedText>\n          {canClaim && <PixelButton color=\"yellow\" onClick={() => onClaim(question.id)} className=\"mt-2\">\n              Claim Reward\n            </PixelButton>}\n          {hasUserClaimed && <PixelatedText size=\"sm\" className=\"text-[#0a3d62] mt-2\">\n              Reward claimed!\n            </PixelatedText>}\n        </div>}\n    </PixelCard>;\n}\nfunction CreatePredictionModal({\n  isOpen,\n  onClose,\n  onSubmit\n}) {\n  const [title, setTitle] = useState(\"\");\n  const [description, setDescription] = useState(\"\");\n  const [expiresAt, setExpiresAt] = useState(\"\");\n  const [imageUrl, setImageUrl] = useState(\"\");\n  const [voteAmount, setVoteAmount] = useState(\"0.001\");\n  const [plFixtures, setPlFixtures] = useState([]);\n  const [plTeams, setPlTeams] = useState([]);\n  const [, setSelectedFixture] = useState(\"\");\n  const [loadingFixtures, setLoadingFixtures] = useState(false);\n  const [showFixtureSelection, setShowFixtureSelection] = useState(false);\n  const fetchPLData = async () => {\n    setLoadingFixtures(true);\n    try {\n      const corsProxy = 'https://corsproxy.io/?';\n      const [bootstrapResponse, fixturesResponse] = await Promise.all([fetch(`${corsProxy}${encodeURIComponent('https://fantasy.premierleague.com/api/bootstrap-static/')}`), fetch(`${corsProxy}${encodeURIComponent('https://fantasy.premierleague.com/api/fixtures/')}`)]);\n      const bootstrapData = await bootstrapResponse.json();\n      const fixturesData = await fixturesResponse.json();\n      setPlTeams(bootstrapData.teams);\n      const now = new Date();\n      const upcomingFixtures = fixturesData.filter(fixture => {\n        const kickoffTime = new Date(fixture.kickoff_time);\n        return kickoffTime > now && fixture.finished === false;\n      }).slice(0, 50).sort((a, b) => new Date(a.kickoff_time) - new Date(b.kickoff_time));\n      setPlFixtures(upcomingFixtures);\n    } catch (error) {\n      console.error('Error fetching PL data:', error);\n    } finally {\n      setLoadingFixtures(false);\n    }\n  };\n  const handleFixtureSelect = fixtureId => {\n    const fixture = plFixtures.find(f => f.id.toString() === fixtureId);\n    if (!fixture) return;\n    const homeTeam = plTeams.find(t => t.id === fixture.team_h);\n    const awayTeam = plTeams.find(t => t.id === fixture.team_a);\n    if (homeTeam && awayTeam) {\n      const kickoffTime = new Date(fixture.kickoff_time);\n      const expireTime = new Date(kickoffTime.getTime() - 60 * 60 * 1000);\n      setTitle(`Will ${homeTeam.name} beat ${awayTeam.name}?`);\n      setDescription(`Premier League Gameweek ${fixture.event || 'TBD'} - ${homeTeam.name} vs ${awayTeam.name}`);\n      setImageUrl(`https://resources.premierleague.com/premierleague/badges/t${homeTeam.code}.png`);\n      setExpiresAt(expireTime.toISOString().slice(0, 16));\n    }\n    setSelectedFixture(fixtureId);\n    setShowFixtureSelection(false);\n  };\n  const handleSubmit = e => {\n    e.preventDefault();\n    onSubmit({\n      title,\n      description,\n      imageUrl,\n      expiresAt: new Date(expiresAt).toISOString(),\n      outcome: null,\n      totalPool: 0,\n      resolvedAt: null,\n      voteAmount: parseFloat(voteAmount)\n    });\n    setTitle(\"\");\n    setDescription(\"\");\n    setImageUrl(\"\");\n    setExpiresAt(\"\");\n    setVoteAmount(\"0.001\");\n    setSelectedFixture(\"\");\n    setShowFixtureSelection(false);\n  };\n  const resetForm = () => {\n    setTitle(\"\");\n    setDescription(\"\");\n    setImageUrl(\"\");\n    setExpiresAt(\"\");\n    setVoteAmount(\"0.001\");\n    setSelectedFixture(\"\");\n    setShowFixtureSelection(false);\n  };\n  if (!isOpen) return null;\n  return <div className=\"fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50 p-2 sm:p-4\">\n      <motion.div initial={{\n      scale: 0.8,\n      opacity: 0\n    }} animate={{\n      scale: 1,\n      opacity: 1\n    }} exit={{\n      scale: 0.8,\n      opacity: 0\n    }} className=\"w-full max-w-lg max-h-[90vh] overflow-y-auto\">\n        <PixelCard className=\"w-full\">\n          <div className=\"flex justify-between items-center mb-4\">\n            <PixelatedText size=\"lg\" className=\"text-[#6c5ce7]\">Create Prediction</PixelatedText>\n            <motion.button onClick={() => {\n            resetForm();\n            onClose();\n          }} className=\"text-[#0a3d62] hover:text-[#ff3b30]\" whileHover={{\n            scale: 1.1\n          }} whileTap={{\n            scale: 0.9\n          }}>\n              <PixelatedText>✕</PixelatedText>\n            </motion.button>\n          </div>\n\n          <div className=\"mb-4\">\n            <PixelButton color=\"blue\" onClick={() => {\n            if (plFixtures.length === 0) fetchPLData();\n            setShowFixtureSelection(!showFixtureSelection);\n          }} className=\"w-full mb-4\">\n              {showFixtureSelection ? 'Hide' : 'Select'} Premier League Fixture\n            </PixelButton>\n            \n            {showFixtureSelection && <div className=\"mb-4 max-h-60 overflow-y-auto border-2 border-black rounded-lg bg-white\">\n                {loadingFixtures ? <div className=\"p-4 text-center\">\n                    <PixelatedText size=\"sm\" className=\"text-[#0a3d62]\">Loading fixtures...</PixelatedText>\n                  </div> : plFixtures.length === 0 ? <div className=\"p-4 text-center\">\n                    <PixelatedText size=\"sm\" className=\"text-[#0a3d62]\">No upcoming fixtures found</PixelatedText>\n                  </div> : plFixtures.map(fixture => {\n              const homeTeam = plTeams.find(t => t.id === fixture.team_h);\n              const awayTeam = plTeams.find(t => t.id === fixture.team_a);\n              const kickoffTime = new Date(fixture.kickoff_time);\n              return <div key={fixture.id} className=\"p-3 border-b border-gray-200 hover:bg-[#33e6ff] hover:bg-opacity-20 cursor-pointer transition-colors\" onClick={() => handleFixtureSelect(fixture.id.toString())}>\n                        <PixelatedText size=\"sm\" className=\"text-[#0a3d62]\">\n                          {homeTeam?.name || 'TBD'} vs {awayTeam?.name || 'TBD'}\n                        </PixelatedText>\n                        <PixelatedText size=\"sm\" className=\"text-[#0a3d62] opacity-70\">\n                          GW{fixture.event || '?'} - {kickoffTime.toLocaleDateString()} {kickoffTime.toLocaleTimeString()}\n                        </PixelatedText>\n                      </div>;\n            })}\n              </div>}\n          </div>\n          <form onSubmit={handleSubmit}>\n            <div className=\"mb-4\">\n              <label className=\"block mb-2\">\n                <PixelatedText size=\"sm\" className=\"text-[#0a3d62]\">Question Title</PixelatedText>\n              </label>\n              <input type=\"text\" value={title} onChange={e => setTitle(e.target.value)} className=\"w-full px-3 py-2 border-2 border-black rounded-lg focus:outline-none focus:ring-2 focus:ring-[#6c5ce7] shadow-[2px_2px_0px_0px_rgba(0,0,0,0.8)] font-body\" required />\n            </div>\n            <div className=\"mb-4\">\n              <label className=\"block mb-2\">\n                <PixelatedText size=\"sm\" className=\"text-[#0a3d62]\">Description</PixelatedText>\n              </label>\n              <textarea value={description} onChange={e => setDescription(e.target.value)} className=\"w-full px-3 py-2 border-2 border-black rounded-lg focus:outline-none focus:ring-2 focus:ring-[#6c5ce7] shadow-[2px_2px_0px_0px_rgba(0,0,0,0.8)] font-body\" rows=\"3\" required />\n            </div>\n            <div className=\"mb-4\">\n              <label className=\"block mb-2\">\n                <PixelatedText size=\"sm\" className=\"text-[#0a3d62]\">Image URL (Optional)</PixelatedText>\n              </label>\n              <input type=\"url\" value={imageUrl} onChange={e => setImageUrl(e.target.value)} placeholder=\"https://example.com/image.png\" className=\"w-full px-3 py-2 border-2 border-black rounded-lg focus:outline-none focus:ring-2 focus:ring-[#6c5ce7] shadow-[2px_2px_0px_0px_rgba(0,0,0,0.8)] font-body\" />\n            </div>\n            <div className=\"mb-4\">\n              <label className=\"block mb-2\">\n                <PixelatedText size=\"sm\" className=\"text-[#0a3d62]\">Expires At</PixelatedText>\n              </label>\n              <input type=\"datetime-local\" value={expiresAt} onChange={e => setExpiresAt(e.target.value)} className=\"w-full px-3 py-2 border-2 border-black rounded-lg focus:outline-none focus:ring-2 focus:ring-[#6c5ce7] shadow-[2px_2px_0px_0px_rgba(0,0,0,0.8)] font-body\" required />\n            </div>\n            <div className=\"mb-6\">\n              <label className=\"block mb-2\">\n                <PixelatedText size=\"sm\" className=\"text-[#0a3d62]\">Vote Amount (SOL)</PixelatedText>\n              </label>\n              <input type=\"number\" step=\"0.001\" min=\"0.001\" value={voteAmount} onChange={e => setVoteAmount(e.target.value)} className=\"w-full px-3 py-2 border-2 border-black rounded-lg focus:outline-none focus:ring-2 focus:ring-[#6c5ce7] shadow-[2px_2px_0px_0px_rgba(0,0,0,0.8)] font-body\" required />\n              <p className=\"mt-1 text-xs text-[#0a3d62] opacity-70 font-body\">Amount users will pay to vote on this prediction</p>\n            </div>\n            <div className=\"flex justify-end gap-3\">\n              <PixelButton color=\"red\" onClick={() => {\n              resetForm();\n            }} type=\"button\">\n                Clear Form\n              </PixelButton>\n              <PixelButton color=\"pink\" className=\"flex-1\">\n                Create Prediction\n              </PixelButton>\n            </div>\n          </form>\n        </PixelCard>\n      </motion.div>\n    </div>;\n}\nfunction AdminMetricsCard({\n  questions,\n  votes,\n  claims\n}) {\n  const totalPredictions = questions.length;\n  const activePredictions = questions.filter(q => q.outcome === null).length;\n  const resolvedPredictions = questions.filter(q => q.outcome !== null).length;\n  const totalVotes = votes.length;\n  const totalYesVotes = votes.filter(v => v.prediction === \"yes\").length;\n  const totalNoVotes = votes.filter(v => v.prediction === \"no\").length;\n  const totalPoolAmount = questions.reduce((total, q) => total + (q.totalPool || 0), 0);\n  const totalClaimedAmount = claims.reduce((total, c) => total + (c.amount || 0), 0);\n  return <PixelCard className=\"mb-8 border-[#6c5ce7]\">\n      <PixelatedText size=\"xl\" className=\"text-[#6c5ce7] mb-4\">Admin Dashboard</PixelatedText>\n      <div className=\"grid grid-cols-1 sm:grid-cols-2 gap-4 mb-4\">\n        <div className=\"bg-[#33e6ff] bg-opacity-20 rounded-lg p-3 border-2 border-[#33e6ff] shadow-[2px_2px_0px_0px_rgba(0,0,0,0.8)]\">\n          <PixelatedText size=\"md\" className=\"text-[#0a3d62] mb-2\">Predictions</PixelatedText>\n          <div className=\"grid grid-cols-2 gap-2\">\n            <div>\n              <PixelatedText size=\"sm\" className=\"text-[#0a3d62] opacity-80\">Total</PixelatedText>\n              <PixelatedText size=\"lg\" className=\"text-[#0a3d62]\">{totalPredictions}</PixelatedText>\n            </div>\n            <div>\n              <PixelatedText size=\"sm\" className=\"text-[#0a3d62] opacity-80\">Active</PixelatedText>\n              <PixelatedText size=\"lg\" className=\"text-[#0a3d62]\">{activePredictions}</PixelatedText>\n            </div>\n            <div>\n              <PixelatedText size=\"sm\" className=\"text-[#0a3d62] opacity-80\">Resolved</PixelatedText>\n              <PixelatedText size=\"lg\" className=\"text-[#0a3d62]\">{resolvedPredictions}</PixelatedText>\n            </div>\n          </div>\n        </div>\n        <div className=\"bg-[#ff69b4] bg-opacity-20 rounded-lg p-3 border-2 border-[#ff69b4] shadow-[2px_2px_0px_0px_rgba(0,0,0,0.8)]\">\n          <PixelatedText size=\"md\" className=\"text-[#0a3d62] mb-2\">Votes</PixelatedText>\n          <div className=\"grid grid-cols-2 gap-2\">\n            <div>\n              <PixelatedText size=\"sm\" className=\"text-[#0a3d62] opacity-80\">Total</PixelatedText>\n              <PixelatedText size=\"lg\" className=\"text-[#0a3d62]\">{totalVotes}</PixelatedText>\n            </div>\n            <div>\n              <PixelatedText size=\"sm\" className=\"text-[#0a3d62] opacity-80\">Yes/No</PixelatedText>\n              <PixelatedText size=\"lg\" className=\"text-[#0a3d62]\">{totalYesVotes}/{totalNoVotes}</PixelatedText>\n            </div>\n          </div>\n        </div>\n      </div>\n      <div className=\"bg-[#ffde00] bg-opacity-20 rounded-lg p-3 border-2 border-[#ffde00] shadow-[2px_2px_0px_0px_rgba(0,0,0,0.8)]\">\n        <PixelatedText size=\"md\" className=\"text-[#0a3d62] mb-2\">Financials</PixelatedText>\n        <div className=\"grid grid-cols-2 gap-4\">\n          <div>\n            <PixelatedText size=\"sm\" className=\"text-[#0a3d62] opacity-80\">Total Pool</PixelatedText>\n            <PixelatedText size=\"lg\" className=\"text-[#0a3d62]\">{totalPoolAmount.toFixed(3)} SOL</PixelatedText>\n          </div>\n          <div>\n            <PixelatedText size=\"sm\" className=\"text-[#0a3d62] opacity-80\">Total Claimed</PixelatedText>\n            <PixelatedText size=\"lg\" className=\"text-[#0a3d62]\">{totalClaimedAmount.toFixed(3)} SOL</PixelatedText>\n          </div>\n        </div>\n      </div>\n    </PixelCard>;\n}\nfunction ResolveQuestionModal({\n  isOpen,\n  onClose,\n  onResolve,\n  question\n}) {\n  if (!isOpen || !question) return null;\n  return <div className=\"fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50 p-4\">\n      <motion.div initial={{\n      scale: 0.8,\n      opacity: 0\n    }} animate={{\n      scale: 1,\n      opacity: 1\n    }} exit={{\n      scale: 0.8,\n      opacity: 0\n    }} className=\"w-full max-w-md\">\n        <PixelCard className=\"w-full\">\n          <div className=\"flex justify-between items-center mb-4\">\n            <PixelatedText size=\"lg\" className=\"text-[#6c5ce7]\">Resolve Prediction</PixelatedText>\n            <motion.button onClick={onClose} className=\"text-[#0a3d62] hover:text-[#ff3b30]\" whileHover={{\n            scale: 1.1\n          }} whileTap={{\n            scale: 0.9\n          }}>\n              <PixelatedText>✕</PixelatedText>\n            </motion.button>\n          </div>\n          {question.imageUrl && <div className=\"mb-4\">\n              <PixelImage src={question.imageUrl} alt={question.title} className=\"w-full\" />\n            </div>}\n          <div className=\"mb-6\">\n            <PixelatedText className=\"mb-2 text-[#0a3d62]\">{question.title}</PixelatedText>\n            <PixelatedText size=\"sm\" className=\"text-[#0a3d62] opacity-80\">{question.description}</PixelatedText>\n          </div>\n          <div className=\"flex justify-center space-x-4\">\n            <PixelButton color=\"green\" onClick={() => onResolve(question.id, \"yes\")}>\n              YES\n            </PixelButton>\n            <PixelButton color=\"red\" onClick={() => onResolve(question.id, \"no\")}>\n              NO\n            </PixelButton>\n          </div>\n        </PixelCard>\n      </motion.div>\n    </div>;\n}\nfunction WelcomeModal({\n  isOpen,\n  onClose\n}) {\n  if (!isOpen) return null;\n  return <div className=\"fixed inset-0 bg-black bg-opacity-60 flex items-center justify-center z-50 p-2 sm:p-4\">\n      <motion.div initial={{\n      scale: 0.5,\n      opacity: 0,\n      rotate: -10\n    }} animate={{\n      scale: 1,\n      opacity: 1,\n      rotate: 0\n    }} exit={{\n      scale: 0.5,\n      opacity: 0,\n      rotate: 10\n    }} transition={{\n      type: \"spring\",\n      stiffness: 200,\n      damping: 20\n    }} className=\"w-full max-w-lg\">\n        <PixelCard className=\"w-full border-4 border-[#ffde00]\">\n          <div className=\"bg-gradient-to-r from-[#ff69b4] via-[#6c5ce7] to-[#3498db] -m-4 mb-4 p-4 border-b-4 border-black\">\n            <motion.div initial={{\n            y: -20\n          }} animate={{\n            y: 0\n          }} transition={{\n            delay: 0.2\n          }}>\n              <PixelatedText size=\"xl\" className=\"text-white text-center mb-2\">WELCOME TO</PixelatedText>\n              <PixelatedText size=\"2xl\" className=\"text-white text-center text-[#ffde00]\">YesNoDAO</PixelatedText>\n            </motion.div>\n          </div>\n          <div className=\"space-y-4\">\n            <motion.div initial={{\n            x: -50,\n            opacity: 0\n          }} animate={{\n            x: 0,\n            opacity: 1\n          }} transition={{\n            delay: 0.3\n          }} className=\"bg-[#ff69b4] bg-opacity-20 border-2 border-[#ff69b4] rounded-lg p-3\">\n              <PixelatedText size=\"md\" className=\"text-[#ff69b4] mb-2\">📊 PREDICT</PixelatedText>\n              <PixelatedText size=\"sm\" className=\"text-[#0a3d62]\">\n                Vote YES or NO on daily questions. Each vote costs a small amount of SOL.\n              </PixelatedText>\n            </motion.div>\n            <motion.div initial={{\n            x: 50,\n            opacity: 0\n          }} animate={{\n            x: 0,\n            opacity: 1\n          }} transition={{\n            delay: 0.5\n          }} className=\"bg-[#4cd964] bg-opacity-20 border-2 border-[#4cd964] rounded-lg p-3\">\n              <PixelatedText size=\"md\" className=\"text-[#4cd964] mb-2\">⏰ WAIT</PixelatedText>\n              <PixelatedText size=\"sm\" className=\"text-[#0a3d62]\">\n                Questions resolve after expiration. Admins set the final outcome.\n              </PixelatedText>\n            </motion.div>\n            <motion.div initial={{\n            x: -50,\n            opacity: 0\n          }} animate={{\n            x: 0,\n            opacity: 1\n          }} transition={{\n            delay: 0.7\n          }} className=\"bg-[#ffde00] bg-opacity-20 border-2 border-[#ffde00] rounded-lg p-3\">\n              <PixelatedText size=\"md\" className=\"text-[#ffde00] mb-2\">💰 WIN</PixelatedText>\n              <PixelatedText size=\"sm\" className=\"text-[#0a3d62]\">\n                Correct guessers split 95% of the pool. Claim your rewards!\n              </PixelatedText>\n            </motion.div>\n            <motion.div initial={{\n            scale: 0.8,\n            opacity: 0\n          }} animate={{\n            scale: 1,\n            opacity: 1\n          }} transition={{\n            delay: 0.9\n          }} className=\"bg-[#33e6ff] bg-opacity-20 border-2 border-[#33e6ff] p-3 rounded-lg\">\n              <PixelatedText size=\"sm\" className=\"text-[#0a3d62] text-center\">\n                🎯 ONE VOTE PER QUESTION - CHOOSE WISELY!\n              </PixelatedText>\n            </motion.div>\n          </div>\n          <motion.div initial={{\n          y: 20,\n          opacity: 0\n        }} animate={{\n          y: 0,\n          opacity: 1\n        }} transition={{\n          delay: 1.1\n        }} className=\"mt-6 flex justify-center\">\n            <PixelButton color=\"pink\" onClick={onClose} className=\"px-8\">\n              LET'S GO!\n            </PixelButton>\n          </motion.div>\n        </PixelCard>\n      </motion.div>\n    </div>;\n}\nfunction InfoModal({\n  isOpen,\n  onClose\n}) {\n  if (!isOpen) return null;\n  return <div className=\"fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50 p-2 sm:p-4\">\n      <motion.div initial={{\n      scale: 0.8,\n      opacity: 0\n    }} animate={{\n      scale: 1,\n      opacity: 1\n    }} exit={{\n      scale: 0.8,\n      opacity: 0\n    }} className=\"w-full max-w-md\">\n        <PixelCard className=\"w-full\">\n          <div className=\"flex justify-between items-center mb-4\">\n            <PixelatedText size=\"lg\" className=\"text-[#6c5ce7]\">How It Works</PixelatedText>\n            <motion.button onClick={onClose} className=\"text-[#0a3d62] hover:text-[#ff3b30]\" whileHover={{\n            scale: 1.1\n          }} whileTap={{\n            scale: 0.9\n          }}>\n              <PixelatedText>✕</PixelatedText>\n            </motion.button>\n          </div>\n          <div className=\"space-y-4\">\n            <div>\n              <PixelatedText size=\"md\" className=\"text-[#ff69b4] mb-2\">1. Make a Prediction</PixelatedText>\n              <PixelatedText size=\"sm\" className=\"text-[#0a3d62]\">\n                Each question has its own vote cost in SOL. Choose YES or NO on any open question.\n              </PixelatedText>\n            </div>\n            <div>\n              <PixelatedText size=\"md\" className=\"text-[#4cd964] mb-2\">2. Wait for Resolution</PixelatedText>\n              <PixelatedText size=\"sm\" className=\"text-[#0a3d62]\">\n                Questions are resolved after their expiration date.\n              </PixelatedText>\n            </div>\n            <div>\n              <PixelatedText size=\"md\" className=\"text-[#ffde00] mb-2\">3. Claim Rewards</PixelatedText>\n              <PixelatedText size=\"sm\" className=\"text-[#0a3d62]\">\n                If you voted correctly, you'll split the pool with other winners.\n                95% of the pool goes to winners, 5% to protocol fees.\n              </PixelatedText>\n            </div>\n            <div className=\"bg-[#33e6ff] bg-opacity-20 border-2 border-[#33e6ff] p-3 rounded-lg mt-4\">\n              <PixelatedText size=\"sm\" className=\"text-[#0a3d62]\">\n                You can only vote ONCE per question. Choose wisely!\n              </PixelatedText>\n            </div>\n          </div>\n        </PixelCard>\n      </motion.div>\n    </div>;\n}\nfunction TransactionProgress({\n  isVisible\n}) {\n  if (!isVisible) return null;\n  return <div className=\"fixed inset-0 bg-black bg-opacity-30 flex items-center justify-center z-50\">\n      <div className=\"bg-white p-4 rounded-lg border-2 border-black shadow-[3px_3px_0px_0px_rgba(0,0,0,0.8)] max-w-sm w-full\">\n        <PixelatedText size=\"md\" className=\"text-[#0a3d62] mb-4 text-center\">\n          Processing Transaction\n        </PixelatedText>\n        <div className=\"h-6 bg-[#0a3d62] bg-opacity-20 rounded-full overflow-hidden border-2 border-black relative\">\n          <motion.div className=\"h-full bg-gradient-to-r from-[#4cd964] via-[#33e6ff] to-[#ff69b4]\" initial={{\n          width: \"0%\"\n        }} animate={{\n          width: [\"0%\", \"30%\", \"70%\", \"90%\"],\n          x: [0, 4, -4, 0]\n        }} transition={{\n          duration: 2,\n          times: [0, 0.3, 0.6, 0.9],\n          repeat: Infinity,\n          repeatType: \"loop\"\n        }} />\n          <div className=\"absolute inset-0 scanlines opacity-30\"></div>\n          <div className=\"absolute inset-0 flex items-center justify-center\">\n            <div className=\"flex space-x-2\">\n              {[0, 1, 2].map(i => <motion.div key={i} className=\"w-2 h-2 bg-white rounded-sm\" animate={{\n              opacity: [0, 1, 0]\n            }} transition={{\n              duration: 1.5,\n              repeat: Infinity,\n              delay: i * 0.3\n            }} />)}\n            </div>\n          </div>\n        </div>\n        <PixelatedText size=\"sm\" className=\"text-[#0a3d62] mt-4 text-center opacity-80\">\n          Please wait while your vote is being processed\n        </PixelatedText>\n      </div>\n    </div>;\n}\nfunction ProfilePage({\n  userWallet,\n  questions,\n  allVotes,\n  allClaims\n}) {\n  const [userStats, setUserStats] = useState({\n    totalVotes: 0,\n    correctVotes: 0,\n    incorrectVotes: 0,\n    pendingVotes: 0,\n    totalEarned: 0,\n    voteHistory: []\n  });\n  useEffect(() => {\n    if (!userWallet || !questions.length || !allVotes.length) return;\n    const userVotes = allVotes.filter(vote => vote.userId === userWallet);\n    const userClaims = allClaims.filter(claim => claim.userId === userWallet);\n    const totalEarned = userClaims.reduce((sum, claim) => sum + (claim.amount || 0), 0);\n    const voteHistory = userVotes.map(vote => {\n      const question = questions.find(q => q.id === vote.questionId);\n      let status = 'pending';\n      if (question && question.outcome !== null) {\n        status = vote.prediction === question.outcome ? 'correct' : 'incorrect';\n      }\n      return {\n        questionId: vote.questionId,\n        prediction: vote.prediction,\n        status,\n        questionTitle: question ? question.title : 'Unknown Question',\n        resolvedAt: question ? question.resolvedAt : null,\n        claimed: userClaims.some(claim => claim.questionId === vote.questionId)\n      };\n    });\n    const correctVotes = voteHistory.filter(v => v.status === 'correct').length;\n    const incorrectVotes = voteHistory.filter(v => v.status === 'incorrect').length;\n    const pendingVotes = voteHistory.filter(v => v.status === 'pending').length;\n    setUserStats({\n      totalVotes: userVotes.length,\n      correctVotes,\n      incorrectVotes,\n      pendingVotes,\n      totalEarned,\n      voteHistory\n    });\n  }, [userWallet, questions, allVotes, allClaims]);\n  const getStatusColor = status => {\n    switch (status) {\n      case 'correct':\n        return 'text-[#4cd964]';\n      case 'incorrect':\n        return 'text-[#ff3b30]';\n      default:\n        return 'text-[#ffde00]';\n    }\n  };\n  const getStatusIcon = status => {\n    switch (status) {\n      case 'correct':\n        return '✓';\n      case 'incorrect':\n        return '✗';\n      default:\n        return '?';\n    }\n  };\n  const getVoteColor = vote => {\n    return vote === 'yes' ? 'bg-[#4cd964] bg-opacity-20 border-[#4cd964]' : 'bg-[#ff3b30] bg-opacity-20 border-[#ff3b30]';\n  };\n  const getVoteTextColor = vote => {\n    return vote === 'yes' ? 'text-[#4cd964]' : 'text-[#ff3b30]';\n  };\n  return <div className=\"max-w-full mx-auto px-[100px]\">\n      <PixelCard className=\"mb-8 border-[#ff69b4]\">\n        <div className=\"bg-gradient-to-r from-[#ff69b4] via-[#6c5ce7] to-[#3498db] -m-4 mb-4 p-4 border-b-2 border-black\">\n          <PixelatedText size=\"xl\" className=\"text-white\">User Profile</PixelatedText>\n          <PixelatedText size=\"sm\" className=\"text-white mt-2 break-all\">{userWallet}</PixelatedText>\n        </div>\n        <div className=\"grid grid-cols-1 sm:grid-cols-2 gap-6 mb-6\">\n          <div className=\"bg-[#33e6ff] bg-opacity-20 rounded-lg p-4 border-2 border-[#33e6ff] shadow-[2px_2px_0px_0px_rgba(0,0,0,0.8)]\">\n            <PixelatedText size=\"md\" className=\"text-[#0a3d62] mb-3\">Prediction Stats</PixelatedText>\n            <div className=\"grid grid-cols-2 gap-3\">\n              <div>\n                <PixelatedText size=\"sm\" className=\"text-[#0a3d62] opacity-80\">Total Votes</PixelatedText>\n                <PixelatedText size=\"lg\" className=\"text-[#0a3d62]\">{userStats.totalVotes}</PixelatedText>\n              </div>\n              <div>\n                <PixelatedText size=\"sm\" className=\"text-[#0a3d62] opacity-80\">Correct</PixelatedText>\n                <PixelatedText size=\"lg\" className=\"text-[#4cd964]\">{userStats.correctVotes}</PixelatedText>\n              </div>\n              <div>\n                <PixelatedText size=\"sm\" className=\"text-[#0a3d62] opacity-80\">Incorrect</PixelatedText>\n                <PixelatedText size=\"lg\" className=\"text-[#ff3b30]\">{userStats.incorrectVotes}</PixelatedText>\n              </div>\n              <div>\n                <PixelatedText size=\"sm\" className=\"text-[#0a3d62] opacity-80\">Pending</PixelatedText>\n                <PixelatedText size=\"lg\" className=\"text-[#ffde00]\">{userStats.pendingVotes}</PixelatedText>\n              </div>\n            </div>\n          </div>\n          <div className=\"bg-[#ffde00] bg-opacity-20 rounded-lg p-4 border-2 border-[#ffde00] shadow-[2px_2px_0px_0px_rgba(0,0,0,0.8)]\">\n            <PixelatedText size=\"md\" className=\"text-[#0a3d62] mb-3\">Earnings</PixelatedText>\n            <div className=\"flex flex-col justify-center h-full\">\n              <PixelatedText size=\"sm\" className=\"text-[#0a3d62] opacity-80\">Total Earned</PixelatedText>\n              <PixelatedText size=\"2xl\" className=\"text-[#0a3d62] mt-2\">{userStats.totalEarned.toFixed(4)} SOL</PixelatedText>\n              {userStats.correctVotes > 0 && <PixelatedText size=\"sm\" className=\"text-[#0a3d62] mt-3\">\n                  Win Rate: {Math.round(userStats.correctVotes / (userStats.correctVotes + userStats.incorrectVotes) * 100)}%\n                </PixelatedText>}\n            </div>\n          </div>\n        </div>\n        <div className=\"mb-4\">\n          <PixelatedText size=\"lg\" className=\"text-[#6c5ce7] mb-4\">Prediction History</PixelatedText>\n          {userStats.voteHistory.length === 0 ? <div className=\"text-center py-8 bg-[#0a3d62] bg-opacity-10 rounded-lg border-2 border-dashed border-[#0a3d62] border-opacity-30\">\n              <PixelatedText size=\"md\" className=\"text-[#0a3d62] opacity-70\">No predictions yet!</PixelatedText>\n              <PixelatedText size=\"sm\" className=\"text-[#0a3d62] opacity-70 mt-2\">\n                Make your first prediction to start building your history\n              </PixelatedText>\n            </div> : <div className=\"space-y-4\">\n              {userStats.voteHistory.map((vote, index) => <div key={index} className=\"border-2 border-[#0a3d62] border-opacity-30 rounded-lg p-3 transition-all hover:shadow-[3px_3px_0px_0px_rgba(0,0,0,0.5)]\">\n                  <div className=\"flex justify-between items-start mb-2\">\n                    <PixelatedText size=\"md\" className=\"text-[#0a3d62] flex-1\">{vote.questionTitle}</PixelatedText>\n                    <div className={`flex items-center justify-center w-8 h-8 ${getStatusColor(vote.status)} rounded-full border-2 border-black`}>\n                      <PixelatedText size=\"sm\">{getStatusIcon(vote.status)}</PixelatedText>\n                    </div>\n                  </div>\n                  <div className=\"flex flex-wrap gap-3 mt-3\">\n                    <div className={`px-3 py-1 rounded-lg border-2 ${getVoteColor(vote.prediction)}`}>\n                      <PixelatedText size=\"sm\" className={getVoteTextColor(vote.prediction)}>\n                        Voted: {vote.prediction.toUpperCase()}\n                      </PixelatedText>\n                    </div>\n                    {vote.status !== 'pending' && <div className=\"px-3 py-1 rounded-lg border-2 border-[#0a3d62] border-opacity-30 bg-[#0a3d62] bg-opacity-10\">\n                        <PixelatedText size=\"sm\" className=\"text-[#0a3d62]\">\n                          {vote.status === 'correct' ? 'You won!' : 'You lost'}\n                        </PixelatedText>\n                      </div>}\n                    {vote.claimed && <div className=\"px-3 py-1 rounded-lg border-2 border-[#ffde00] bg-[#ffde00] bg-opacity-20\">\n                        <PixelatedText size=\"sm\" className=\"text-[#0a3d62]\">\n                          Claimed\n                        </PixelatedText>\n                      </div>}\n                  </div>\n                  {vote.resolvedAt && <PixelatedText size=\"sm\" className=\"text-[#0a3d62] opacity-60 mt-2\">\n                      Resolved: {new Date(vote.resolvedAt).toLocaleDateString()}\n                    </PixelatedText>}\n                </div>)}\n            </div>}\n        </div>\n        <div className=\"mt-8 bg-[#ff69b4] bg-opacity-20 rounded-lg p-4 border-2 border-[#ff69b4]\">\n          <PixelatedText size=\"md\" className=\"text-center text-[#0a3d62]\">\n            Share your predictions on X to compete with friends!\n          </PixelatedText>\n          <div className=\"flex justify-center mt-4\">\n            <PixelButton color=\"blue\" onClick={() => {\n            const text = `I've made ${userStats.totalVotes} predictions on YesNoDAO with a ${userStats.correctVotes > 0 ? Math.round(userStats.correctVotes / (userStats.correctVotes + userStats.incorrectVotes) * 100) : 0}% win rate! Join me to predict the future and get paid for it! yesnodao.fun built with @devfunpump`;\n            const url = `https://twitter.com/intent/tweet?text=${encodeURIComponent(text)}`;\n            openLink(url);\n          }} className=\"flex items-center gap-2\">\n              <svg width=\"16\" height=\"16\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" strokeWidth=\"2\" strokeLinecap=\"round\" strokeLinejoin=\"round\">\n                <path d=\"M22 4s-.7 2.1-2 3.4c1.6 10-9.4 17.3-18 11.6 2.2.1 4.4-.6 6-2C3 15.5.5 9.6 3 5c2.2 2.6 5.6 4.1 9 4-.9-4.2 4-6.6 7-3.8 1.1 0 3-1.2 3-1.2z\" />\n              </svg>\n              Share Stats on X\n            </PixelButton>\n          </div>\n        </div>\n      </PixelCard>\n    </div>;\n}\nfunction App() {\n  const {\n    devbaseClient,\n    userWallet\n  } = useDevapp();\n  const [questions, setQuestions] = useState([]);\n  const [loading, setLoading] = useState(true);\n  const [error, setError] = useState(null);\n  const [showCelebration, setShowCelebration] = useState(false);\n  const [activeTab, setActiveTab] = useState(\"active\");\n  const [showCreateModal, setShowCreateModal] = useState(false);\n  const [showResolveModal, setShowResolveModal] = useState(false);\n  const [showInfoModal, setShowInfoModal] = useState(false);\n  const [showWelcomeModal, setShowWelcomeModal] = useState(false);\n  const [transactionInProgress, setTransactionInProgress] = useState(false);\n  const [selectedQuestion, setSelectedQuestion] = useState(null);\n  const [allVotes, setAllVotes] = useState([]);\n  const [allClaims, setAllClaims] = useState([]);\n  const [currentView, setCurrentView] = useState('main');\n  const isAdmin = userWallet === '6SxLVfFovSjR2LAFcJ5wfT6RFjc8GxsscRekGnLq8BMe';\n  useEffect(() => {\n    const hasSeenWelcome = localStorage.getItem('yesnodao_welcome_seen');\n    if (!hasSeenWelcome) {\n      setShowWelcomeModal(true);\n    }\n  }, []);\n  useEffect(() => {\n    fetchQuestions();\n    const interval = setInterval(() => {\n      fetchQuestions();\n    }, 30000);\n    return () => clearInterval(interval);\n  }, [userWallet, devbaseClient]);\n  const fetchQuestions = async () => {\n    if (!devbaseClient) return;\n    try {\n      setLoading(true);\n      const fetchedQuestions = await devbaseClient.listEntities(\"questions\");\n      const fetchedVotes = await devbaseClient.listEntities(\"votes\");\n      const fetchedClaims = await devbaseClient.listEntities(\"claims\");\n      setAllVotes(fetchedVotes);\n      setAllClaims(fetchedClaims);\n      const questionsWithVotes = await Promise.all(fetchedQuestions.map(async question => {\n        const votes = fetchedVotes.filter(vote => vote.questionId === question.id);\n        const claims = fetchedClaims.filter(claim => claim.questionId === question.id);\n        const yesVotes = votes.filter(vote => vote.prediction === \"yes\").length;\n        const noVotes = votes.filter(vote => vote.prediction === \"no\").length;\n        const claimedBy = claims.map(claim => claim.userId);\n        const calculatedPool = votes.reduce((total, vote) => total + (vote.amount || 0.001), 0);\n        if (question.totalPool !== calculatedPool) {\n          if (userWallet === '6SxLVfFovSjR2LAFcJ5wfT6RFjc8GxsscRekGnLq8BMe') {\n            try {\n              await devbaseClient.updateEntity(\"questions\", question.id, {\n                totalPool: calculatedPool\n              });\n              question.totalPool = calculatedPool;\n            } catch (err) {\n              console.error(\"Error updating question pool during fetch:\", err);\n            }\n          } else {\n            question.totalPool = calculatedPool;\n          }\n        }\n        return {\n          ...question,\n          votes,\n          yesVotes,\n          noVotes,\n          claimedBy\n        };\n      }));\n      questionsWithVotes.sort((a, b) => {\n        if (a.outcome === null && b.outcome !== null) return -1;\n        if (a.outcome !== null && b.outcome === null) return 1;\n        if (a.outcome === null) {\n          return new Date(b.expiresAt) - new Date(a.expiresAt);\n        } else {\n          return new Date(b.resolvedAt) - new Date(a.resolvedAt);\n        }\n      });\n      setQuestions(questionsWithVotes);\n    } catch (err) {\n      console.error(\"Error fetching questions:\", err);\n      setError(\"Failed to load prediction questions. Please try again later.\");\n    } finally {\n      setLoading(false);\n    }\n  };\n  const handleVote = async (questionId, prediction) => {\n    if (!userWallet) {\n      alert(\"Please connect your wallet first!\");\n      return;\n    }\n    try {\n      const question = questions.find(q => q.id === questionId);\n      if (!question) {\n        alert(\"Question not found. Please refresh and try again.\");\n        return;\n      }\n      const existingVote = question.votes.find(v => v.userId === userWallet);\n      if (existingVote) {\n        alert(\"You have already voted on this prediction!\");\n        return;\n      }\n      const existingVotes = await devbaseClient.listEntities(\"votes\", {\n        questionId,\n        userId: userWallet\n      });\n      if (existingVotes && existingVotes.length > 0) {\n        alert(\"You have already voted on this prediction!\");\n        await fetchQuestions();\n        return;\n      }\n      const voteAmount = question.voteAmount || 0.001;\n      setTransactionInProgress(true);\n      await devbaseClient.createEntity(\"votes\", {\n        questionId,\n        userId: userWallet,\n        prediction,\n        amount: voteAmount\n      });\n      const updatedVotes = await devbaseClient.listEntities(\"votes\", {\n        questionId,\n        userId: userWallet\n      });\n      if (updatedVotes && updatedVotes.length > 0) {\n        try {\n          const allVotes = await devbaseClient.listEntities(\"votes\", {\n            questionId\n          });\n          const question = questions.find(q => q.id === questionId);\n          const voteAmount = question.voteAmount || 0.001;\n          const calculatedPool = allVotes.reduce((total, vote) => total + (vote.amount || voteAmount), 0);\n          await devbaseClient.updateEntity(\"questions\", questionId, {\n            totalPool: calculatedPool\n          });\n        } catch (poolError) {\n          console.error(\"Error updating pool total:\", poolError);\n        }\n        setTransactionInProgress(false);\n        setShowCelebration(true);\n        setTimeout(() => setShowCelebration(false), 3000);\n        fetchQuestions();\n      } else {\n        setTransactionInProgress(false);\n        setShowCelebration(false);\n        alert(\"Failed to submit your vote. Please try again.\");\n      }\n    } catch (err) {\n      console.error(\"Error voting:\", err);\n      try {\n        const updatedVotes = await devbaseClient.listEntities(\"votes\", {\n          questionId,\n          userId: userWallet\n        });\n        if (updatedVotes && updatedVotes.length > 0) {\n          try {\n            const allVotes = await devbaseClient.listEntities(\"votes\", {\n              questionId\n            });\n            const question = questions.find(q => q.id === questionId);\n            const voteAmount = question.voteAmount || 0.001;\n            const calculatedPool = allVotes.reduce((total, vote) => total + (vote.amount || voteAmount), 0);\n            await devbaseClient.updateEntity(\"questions\", questionId, {\n              totalPool: calculatedPool\n            });\n          } catch (poolError) {\n            console.error(\"Error updating pool total on retry:\", poolError);\n          }\n          setTransactionInProgress(false);\n          setShowCelebration(true);\n          setTimeout(() => setShowCelebration(false), 3000);\n          fetchQuestions();\n        } else {\n          setTransactionInProgress(false);\n          setShowCelebration(false);\n          alert(\"Failed to submit your vote. Please try again.\");\n        }\n      } catch (checkErr) {\n        console.error(\"Error checking vote status:\", checkErr);\n        setTransactionInProgress(false);\n        setShowCelebration(false);\n        alert(\"Failed to submit your vote. Please try again.\");\n      }\n    }\n  };\n  const handleClaim = async questionId => {\n    if (!userWallet) {\n      alert(\"Please connect your wallet first!\");\n      return;\n    }\n    try {\n      setTransactionInProgress(true);\n      console.log(\"🎮 Starting claim process for question:\", questionId);\n      const freshQuestion = await devbaseClient.getEntity(\"questions\", questionId);\n      if (!freshQuestion) {\n        console.error(\"❌ Question not found:\", questionId);\n        setTransactionInProgress(false);\n        alert(\"Question not found. Please refresh the page and try again.\");\n        return;\n      }\n      if (!freshQuestion.outcome) {\n        console.error(\"❌ Question has no outcome yet:\", questionId);\n        setTransactionInProgress(false);\n        alert(\"This prediction hasn't been resolved yet. Please wait for the outcome.\");\n        return;\n      }\n      const existingClaims = await devbaseClient.listEntities(\"claims\", {\n        questionId,\n        userId: userWallet\n      });\n      if (existingClaims && existingClaims.length > 0) {\n        console.log(\"⚠️ User already claimed reward for this question\");\n        setTransactionInProgress(false);\n        alert(\"You have already claimed your reward for this question!\");\n        return;\n      }\n      const allVotes = await devbaseClient.listEntities(\"votes\", {\n        questionId\n      });\n      const correctVotes = allVotes.filter(vote => vote.prediction === freshQuestion.outcome);\n      const userCorrectVote = correctVotes.find(vote => vote.userId === userWallet);\n      if (userCorrectVote) {\n        console.log(\"✅ User has claimable reward, processing directly:\", userCorrectVote);\n        const totalCorrectVotes = correctVotes.length;\n        let poolAmount = freshQuestion.totalPool || 0;\n        if (poolAmount <= 0) {\n          poolAmount = allVotes.reduce((total, vote) => total + (vote.amount || 0.001), 0);\n        }\n        console.log(`💰 Pool: ${poolAmount} SOL, Correct votes: ${totalCorrectVotes}`);\n        const poolShare = poolAmount * 0.95 / totalCorrectVotes;\n        const finalReward = Math.floor(poolShare * 1000000) / 1000000;\n        if (finalReward <= 0 || isNaN(finalReward)) {\n          console.error(\"❌ Invalid reward amount:\", finalReward);\n          setTransactionInProgress(false);\n          alert(\"Error calculating reward amount. Please try again later.\");\n          return;\n        }\n        console.log(`💎 Final reward: ${finalReward} SOL`);\n        setShowCelebration(true);\n        const claimResult = await devbaseClient.createEntity(\"claims\", {\n          questionId,\n          amount: finalReward,\n          userId: userWallet\n        });\n        console.log(\"✅ Claim transaction completed:\", claimResult);\n        setTransactionInProgress(false);\n        setTimeout(() => setShowCelebration(false), 5000);\n        await fetchQuestions();\n        alert(`🎉 Congratulations! You've claimed ${finalReward.toFixed(4)} SOL!`);\n        return;\n      }\n      const userVotes = await devbaseClient.listEntities(\"votes\", {\n        userId: userWallet,\n        questionId\n      });\n      if (!userVotes || userVotes.length === 0) {\n        console.log(\"❌ User did not vote on this prediction\");\n        setTransactionInProgress(false);\n        alert(\"You did not vote on this prediction.\");\n        return;\n      }\n      console.log(\"❌ User voted incorrectly. User votes:\", userVotes, \"Outcome:\", freshQuestion.outcome);\n      setTransactionInProgress(false);\n      alert(`You did not vote correctly on this prediction. The outcome was \"${freshQuestion.outcome}\".`);\n    } catch (err) {\n      console.error(\"❌ Error in claim process:\", err);\n      try {\n        const finalCheck = await devbaseClient.listEntities(\"claims\", {\n          questionId,\n          userId: userWallet\n        });\n        if (finalCheck && finalCheck.length > 0) {\n          console.log(\"✅ Claim was successful despite error\");\n          setTransactionInProgress(false);\n          setShowCelebration(true);\n          setTimeout(() => setShowCelebration(false), 3000);\n          await fetchQuestions();\n          alert(\"🎉 Claim successful! Your reward has been processed.\");\n        } else {\n          setTransactionInProgress(false);\n          setShowCelebration(false);\n          alert(\"Failed to claim your reward. Please try again.\");\n        }\n      } catch (checkErr) {\n        console.error(\"❌ Error in final verification:\", checkErr);\n        setTransactionInProgress(false);\n        setShowCelebration(false);\n        alert(\"Failed to claim your reward. Please try again.\");\n      }\n    }\n  };\n  const handleCreatePrediction = async predictionData => {\n    try {\n      setTransactionInProgress(true);\n      await devbaseClient.createEntity(\"questions\", predictionData);\n      setShowCreateModal(false);\n      setTransactionInProgress(false);\n      fetchQuestions();\n      alert(\"Prediction created successfully!\");\n    } catch (err) {\n      setTransactionInProgress(false);\n      console.error(\"Error creating prediction:\", err);\n      alert(\"Failed to create prediction. Please try again.\");\n    }\n  };\n  const handleResolvePrediction = async (questionId, outcome) => {\n    try {\n      setTransactionInProgress(true);\n      await devbaseClient.updateEntity(\"questions\", questionId, {\n        outcome,\n        resolvedAt: new Date().toISOString()\n      });\n      const question = questions.find(q => q.id === questionId);\n      if (question && question.totalPool > 0) {\n        await devbaseClient.createEntity(\"protocol_fees\", {\n          questionId,\n          userId: userWallet,\n          amount: question.totalPool * 0.05\n        });\n      }\n      setTransactionInProgress(false);\n      setShowResolveModal(false);\n      setSelectedQuestion(null);\n      fetchQuestions();\n      alert(`Prediction resolved as ${outcome.toUpperCase()}!`);\n    } catch (err) {\n      setTransactionInProgress(false);\n      console.error(\"Error resolving prediction:\", err);\n      alert(\"Failed to resolve prediction. Please try again.\");\n    }\n  };\n  const handleDeletePrediction = async questionId => {\n    if (!confirm(\"Are you sure you want to delete this prediction? This cannot be undone.\")) {\n      return;\n    }\n    try {\n      setTransactionInProgress(true);\n      await devbaseClient.updateEntity(\"questions\", questionId, {\n        isDeleted: true,\n        title: `[DELETED] ${questions.find(q => q.id === questionId)?.title || ''}`\n      });\n      setTransactionInProgress(false);\n      fetchQuestions();\n      alert(\"Prediction deleted successfully!\");\n    } catch (err) {\n      setTransactionInProgress(false);\n      console.error(\"Error deleting prediction:\", err);\n      alert(\"Failed to delete prediction. Please try again.\");\n    }\n  };\n  const handleSharePrediction = question => {\n    const baseUrl = \"https://twitter.com/intent/tweet\";\n    const text = `YESNODAO Prediction: ${question.title}\\n\\nPlace your bets now! 🎯\\n\\nyesnodao.fun`;\n    const url = `${baseUrl}?text=${encodeURIComponent(text)}`;\n    openLink(url);\n  };\n  const openResolveModal = question => {\n    setSelectedQuestion(question);\n    setShowResolveModal(true);\n  };\n  const filteredQuestions = questions.filter(q => {\n    if (q.isDeleted) return false;\n    const isExpired = new Date(q.expiresAt) < new Date();\n    const isResolved = q.outcome !== null;\n    if (activeTab === \"active\") {\n      return !isExpired || isExpired && !isResolved;\n    } else {\n      return isResolved;\n    }\n  });\n  const expiredUnresolvedQuestions = isAdmin ? questions.filter(q => {\n    const isExpired = new Date(q.expiresAt) < new Date();\n    return isExpired && q.outcome === null;\n  }) : [];\n  return <div className=\"min-h-screen bg-gradient-to-b from-[#3498db] to-[#6c5ce7] pb-20 relative overflow-visible\">\n      <div className=\"absolute inset-0 scanlines pointer-events-none opacity-20\"></div>\n      {showCelebration && <Confetti />}\n      {showCreateModal && <CreatePredictionModal isOpen={showCreateModal} onClose={() => setShowCreateModal(false)} onSubmit={handleCreatePrediction} />}\n      {showResolveModal && <ResolveQuestionModal isOpen={showResolveModal} onClose={() => setShowResolveModal(false)} onResolve={handleResolvePrediction} question={selectedQuestion} />}\n      {showWelcomeModal && <WelcomeModal isOpen={showWelcomeModal} onClose={() => {\n      setShowWelcomeModal(false);\n      localStorage.setItem('yesnodao_welcome_seen', 'true');\n    }} />}\n      {showInfoModal && <InfoModal isOpen={showInfoModal} onClose={() => setShowInfoModal(false)} />}\n      {transactionInProgress && <TransactionProgress isVisible={transactionInProgress} />}\n      <header className=\"bg-gradient-to-r from-[#6c5ce7] via-[#ff69b4] to-[#3498db] py-4 sm:py-6 px-[100px] mb-6 sm:mb-8 shadow-lg border-b-2 border-black relative overflow-visible\">\n        <div className=\"absolute inset-0 bg-[url('data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNjAiIGhlaWdodD0iNjAiIHZpZXdCb3g9IjAgMCA2MCA2MCIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj48ZyBmaWxsPSJub25lIiBmaWxsLXJ1bGU9ImV2ZW5vZGQiPjxwYXRoIGQ9Ik0zNiAxOGMzLjMxNCAwIDYtMi42ODYgNi02cy0yLjY4Ni02LTYtNmMtMy4zMTQgMC02IDIuNjg2LTYgNnMyLjY4NiA2IDYgNnptMC04YzEuMTA1IDAgMiAuODk1IDIgMnMtLjg5NSAyLTIgMi0yLS44OTUtMi0yIC44OTUtMiAyLTJ6IiBmaWxsPSJyZ2JhKDI1NSwyNTUsMjU1LDAuMDUpIi8+PC9nPjwvc3ZnPg==')] opacity-5\"></div>\n        <div className=\"max-w-full mx-auto flex flex-col md:flex-row justify-between items-center relative z-10\">\n          <div className=\"mb-4 md:mb-0 cursor-pointer\" onClick={() => currentView === 'profile' ? setCurrentView('main') : null}>\n            <motion.h1 initial={{\n            opacity: 0,\n            y: -20\n          }} animate={{\n            opacity: 1,\n            y: 0\n          }} transition={{\n            delay: 0.2\n          }} className=\"text-2xl sm:text-4xl md:text-5xl text-white font-bold pixel-text transform -rotate-2 text-shadow-[0_2px_0_#000]\">\n              YesNoDAO\n            </motion.h1>\n            <motion.p initial={{\n            opacity: 0,\n            y: 20\n          }} animate={{\n            opacity: 1,\n            y: 0\n          }} transition={{\n            delay: 0.4\n          }} className=\"text-white text-sm sm:text-lg mt-1 sm:mt-2 pixel-text text-shadow-[0_1px_0_#000]\">\n              PREDICT THE FUTURE. GET PAID FOR IT.\n            </motion.p>\n          </div>\n          <div className=\"flex flex-wrap items-center gap-2 sm:gap-4\">\n            {userWallet && <motion.div whileHover={{\n            scale: 1.05\n          }} whileTap={{\n            scale: 0.95\n          }}>\n                <PixelButton color=\"purple\" onClick={() => setCurrentView(currentView === 'main' ? 'profile' : 'main')} className=\"relative overflow-hidden\">\n                  <span className=\"relative z-10\">{currentView === 'main' ? 'My Profile' : 'Home'}</span>\n                  <motion.div className=\"absolute inset-0 opacity-30\" animate={{\n                backgroundPosition: ['0% 0%', '100% 100%'],\n                backgroundSize: ['100% 100%', '200% 200%']\n              }} transition={{\n                repeat: Infinity,\n                repeatType: \"reverse\",\n                duration: 1.5\n              }} style={{\n                backgroundImage: 'radial-gradient(circle, rgba(255,255,255,0.8) 0%, rgba(255,255,255,0) 70%)'\n              }} />\n                </PixelButton>\n              </motion.div>}\n            {isAdmin && <motion.div whileHover={{\n            scale: 1.05\n          }} whileTap={{\n            scale: 0.95\n          }}>\n                <PixelButton color=\"yellow\" onClick={() => setShowCreateModal(true)} className=\"relative overflow-hidden\">\n                  <span className=\"relative z-10\">Create Prediction</span>\n                  <motion.div className=\"absolute inset-0 opacity-30\" animate={{\n                backgroundPosition: ['0% 0%', '100% 100%'],\n                backgroundSize: ['100% 100%', '200% 200%']\n              }} transition={{\n                repeat: Infinity,\n                repeatType: \"reverse\",\n                duration: 1.5\n              }} style={{\n                backgroundImage: 'radial-gradient(circle, rgba(255,255,255,0.8) 0%, rgba(255,255,255,0) 70%)'\n              }} />\n                </PixelButton>\n              </motion.div>}\n            <motion.button onClick={() => setShowInfoModal(true)} className=\"flex items-center justify-center w-10 h-10 bg-white border-2 border-black rounded-full shadow-[2px_2px_0px_0px_rgba(0,0,0,0.8)] hover:bg-[#33e6ff] transition-colors\" whileHover={{\n            scale: 1.1\n          }} whileTap={{\n            scale: 0.9\n          }} aria-label=\"How it works\">\n              <svg width=\"20\" height=\"20\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"#0a3d62\" strokeWidth=\"2\" strokeLinecap=\"round\" strokeLinejoin=\"round\">\n                <circle cx=\"12\" cy=\"12\" r=\"10\"></circle>\n                <line x1=\"12\" y1=\"16\" x2=\"12\" y2=\"12\"></line>\n                <line x1=\"12\" y1=\"8\" x2=\"12.01\" y2=\"8\"></line>\n              </svg>\n            </motion.button>\n            <div className=\"relative z-[100] mt-1 mb-2 md:mt-0 md:mb-0\">\n              <UserButton className=\"bg-[#6c5ce7] px-4 py-2 rounded-lg border-2 border-black shadow-[3px_3px_0px_0px_rgba(0,0,0,0.8)]\" />\n            </div>\n          </div>\n        </div>\n      </header>\n      <main className=\"max-w-full mx-auto px-[100px]\">\n        {currentView === 'profile' && userWallet ? <ProfilePage userWallet={userWallet} questions={questions} allVotes={allVotes} allClaims={allClaims} /> : <>\n            <div className=\"flex justify-center mb-4 sm:mb-6\">\n              <div className=\"bg-white rounded-full p-1 border-2 border-black shadow-[2px_2px_0px_0px_rgba(0,0,0,0.8)] sm:shadow-[3px_3px_0px_0px_rgba(0,0,0,0.8)] flex\">\n                <motion.button className={`px-3 sm:px-6 py-1 sm:py-2 rounded-full transition-all ${activeTab === \"active\" ? \"bg-[#ff69b4] text-white\" : \"text-[#0a3d62]\"}`} onClick={() => setActiveTab(\"active\")} whileHover={{\n              scale: activeTab !== \"active\" ? 1.05 : 1\n            }} whileTap={{\n              scale: 0.95\n            }}>\n                  <PixelatedText size=\"sm\">Active</PixelatedText>\n                </motion.button>\n                <motion.button className={`px-3 sm:px-6 py-1 sm:py-2 rounded-full transition-all ${activeTab === \"resolved\" ? \"bg-[#6c5ce7] text-white\" : \"text-[#0a3d62]\"}`} onClick={() => setActiveTab(\"resolved\")} whileHover={{\n              scale: activeTab !== \"resolved\" ? 1.05 : 1\n            }} whileTap={{\n              scale: 0.95\n            }}>\n                  <PixelatedText size=\"sm\">Resolved</PixelatedText>\n                </motion.button>\n              </div>\n            </div>\n        {isAdmin && <AdminMetricsCard questions={questions} votes={allVotes} claims={allClaims} />}\n        \n        {isAdmin && activeTab === \"active\" && filteredQuestions.length > 0 && <div className=\"mb-8\">\n            <PixelCard className=\"border-[#3498db]\">\n              <PixelatedText size=\"lg\" className=\"text-[#0a3d62] mb-4\">Admin Controls: Share Active Predictions</PixelatedText>\n              <div className=\"space-y-4\">\n                {filteredQuestions.map(question => <div key={question.id} className=\"flex flex-col sm:flex-row sm:justify-between sm:items-center border-b-2 border-[#33e6ff] border-opacity-30 pb-3 gap-3\">\n                    <div className=\"flex-1\">\n                      <PixelatedText size=\"md\" className=\"text-[#0a3d62] break-words\">{question.title}</PixelatedText>\n                      <PixelatedText size=\"sm\" className=\"text-[#0a3d62] opacity-80\">\n                        Expires: {new Date(question.expiresAt).toLocaleString()}\n                      </PixelatedText>\n                    </div>\n                    <PixelButton color=\"blue\" onClick={() => handleSharePrediction(question)} className=\"flex items-center gap-2\">\n                      <svg width=\"16\" height=\"16\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" strokeWidth=\"2\" strokeLinecap=\"round\" strokeLinejoin=\"round\">\n                        <path d=\"M22 4s-.7 2.1-2 3.4c1.6 10-9.4 17.3-18 11.6 2.2.1 4.4-.6 6-2C3 15.5.5 9.6 3 5c2.2 2.6 5.6 4.1 9 4-.9-4.2 4-6.6 7-3.8 1.1 0 3-1.2 3-1.2z\" />\n                      </svg>\n                      Share\n                    </PixelButton>\n                  </div>)}\n              </div>\n            </PixelCard>\n          </div>}\n\n        {isAdmin && expiredUnresolvedQuestions.length > 0 && <div className=\"mb-8\">\n            <PixelCard className=\"border-[#ffde00]\">\n              <PixelatedText size=\"lg\" className=\"text-[#0a3d62] mb-4\">Admin Controls: Resolve Predictions</PixelatedText>\n              <div className=\"space-y-4\">\n                {expiredUnresolvedQuestions.map(question => <div key={question.id} className=\"flex flex-col sm:flex-row sm:justify-between sm:items-center border-b-2 border-[#33e6ff] pb-3 gap-3\">\n                    <div>\n                      <PixelatedText size=\"md\" className=\"text-[#0a3d62]\">{question.title}</PixelatedText>\n                      <PixelatedText size=\"sm\" className=\"text-[#0a3d62] opacity-80\">Expired: {new Date(question.expiresAt).toLocaleString()}</PixelatedText>\n                    </div>\n                    <PixelButton color=\"purple\" onClick={() => openResolveModal(question)}>\n                      Resolve\n                    </PixelButton>\n                  </div>)}\n              </div>\n            </PixelCard>\n          </div>}\n            {isAdmin && activeTab === \"resolved\" && <div className=\"mb-8\">\n                <PixelCard className=\"border-[#ff3b30]\">\n                  <PixelatedText size=\"lg\" className=\"text-[#0a3d62] mb-4\">Admin Controls: Delete Resolved Predictions</PixelatedText>\n                  <div className=\"space-y-4\">\n                    {questions.filter(q => q.outcome !== null).map(question => <div key={question.id} className=\"flex flex-col sm:flex-row sm:justify-between sm:items-center border-b-2 border-[#ff3b30] border-opacity-30 pb-3 gap-3\">\n                        <div className=\"flex-1\">\n                          <PixelatedText size=\"md\" className=\"text-[#0a3d62] break-words\">{question.title}</PixelatedText>\n                          <PixelatedText size=\"sm\" className=\"text-[#0a3d62] opacity-80\">\n                            Resolved: {question.resolvedAt ? new Date(question.resolvedAt).toLocaleString() : 'Unknown'} - \n                            Outcome: <span className={question.outcome === \"yes\" ? \"text-[#4cd964]\" : \"text-[#ff3b30]\"}>\n                              {question.outcome?.toUpperCase()}\n                            </span>\n                          </PixelatedText>\n                        </div>\n                        <PixelButton color=\"red\" onClick={() => handleDeletePrediction(question.id)}>\n                          Delete\n                        </PixelButton>\n                      </div>)}\n                  </div>\n                </PixelCard>\n              </div>}\n            {loading ? <div className=\"text-center py-10\">\n                <div className=\"inline-block animate-bounce mx-1 w-4 h-4 bg-[#6c5ce7] rounded-full\"></div>\n                <div className=\"inline-block animate-bounce mx-1 w-4 h-4 bg-[#ff69b4] rounded-full\" style={{\n            animationDelay: \"0.2s\"\n          }}></div>\n                <div className=\"inline-block animate-bounce mx-1 w-4 h-4 bg-[#33e6ff] rounded-full\" style={{\n            animationDelay: \"0.4s\"\n          }}></div>\n                <PixelatedText className=\"mt-4 text-white\">Loading predictions...</PixelatedText>\n              </div> : error ? <div className=\"text-center py-10\">\n                <PixelatedText className=\"text-[#ff3b30]\">{error}</PixelatedText>\n              </div> : filteredQuestions.length === 0 ? <div className=\"text-center py-10\">\n                <PixelatedText className=\"text-white\">\n                  {activeTab === \"active\" ? \"No active predictions right now. Check back soon!\" : \"No resolved predictions yet.\"}\n                </PixelatedText>\n              </div> : <div className=\"grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-4 lg:gap-6\">\n                {filteredQuestions.map(question => <QuestionCard key={question.id} question={question} onVote={handleVote} onClaim={handleClaim} userWallet={userWallet} />)}\n              </div>}\n          </>}\n      </main>\n      <footer className=\"w-full pt-10 pb-6 relative\">\n        <div className=\"max-w-full mx-auto px-[100px] flex justify-center\">\n          <a href=\"https://x.com/yesnodao\" target=\"_blank\" rel=\"noopener noreferrer\" className=\"flex items-center justify-center w-10 h-10 bg-white border-2 border-black rounded-full shadow-[2px_2px_0px_0px_rgba(0,0,0,0.8)] hover:bg-[#ffde00] transition-colors\">\n            <svg width=\"20\" height=\"20\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"#0a3d62\" strokeWidth=\"2\" strokeLinecap=\"round\" strokeLinejoin=\"round\">\n              <path d=\"M22 4s-.7 2.1-2 3.4c1.6 10-9.4 17.3-18 11.6 2.2.1 4.4-.6 6-2C3 15.5.5 9.6 3 5c2.2 2.6 5.6 4.1 9 4-.9-4.2 4-6.6 7-3.8 1.1 0 3-1.2 3-1.2z\" />\n            </svg>\n          </a>\n        </div>\n      </footer>\n      <style jsx global>{`\n        @import url('https://fonts.googleapis.com/css2?family=Press+Start+2P&family=VT323&display=swap');\n        :root {\n          --primary-blue: #3498db;\n          --secondary-cyan: #33e6ff;\n          --accent-yellow: #ffde00;\n          --action-pink: #ff69b4;\n          --battle-green: #4cd964;\n          --text-dark-blue: #0a3d62;\n          --live-red: #ff3b30;\n          --wallet-purple: #6c5ce7;\n          --pixel-shadow: 3px 3px 0 rgba(0,0,0,0.8);\n          --pixel-border: 2px solid #000;\n        }\n        body {\n          overflow-x: hidden;\n          position: relative;\n        }\n        /* Fix for wallet dropdown */\n        .wallet-adapter-dropdown {\n          position: relative;\n          z-index: 9999;\n        }\n        .wallet-adapter-dropdown-list {\n          position: absolute;\n          z-index: 9999;\n          transform: translateY(10px);\n          min-width: 200px;\n        }\n        .font-pixel {\n          font-family: 'Press Start 2P', monospace;\n          image-rendering: pixelated;\n          text-transform: uppercase;\n          letter-spacing: 1px;\n        }\n        .font-button {\n          font-family: 'VT323', monospace;\n        }\n        .font-body {\n          font-family: 'Courier New', monospace;\n        }\n        .pixel-text {\n          font-family: 'Press Start 2P', monospace;\n          image-rendering: pixelated;\n          text-transform: uppercase;\n          letter-spacing: 1px;\n          line-height: 1.4;\n        }\n        button {\n          image-rendering: pixelated;\n          transition: all 0.1s;\n        }\n        .text-shadow-\\[0_2px_0_\\#000\\] {\n          text-shadow: 0 2px 0 #000;\n        }\n        .text-shadow-\\[0_1px_0_\\#000\\] {\n          text-shadow: 0 1px 0 #000;\n        }\n        .scanlines {\n          background: linear-gradient(\n            to bottom,\n            transparent 50%,\n            rgba(0, 0, 0, 0.1) 50%\n          );\n          background-size: 100% 4px;\n          pointer-events: none;\n        }\n      `}</style>\n    </div>;\n}","{\"dependencies\":{\"react\":\"18.2.0\",\"framer-motion\":\"10.16.4\",\"lucide-react\":\"0.441.0\",\"@devfunlabs/web-sdk\":\"0.5.6\",\"react-router-dom\":\"6.18.0\",\"recharts\":\"2.8.0\",\"@solana/web3.js\":\"1.95.3\"}}","thinking","The user wants to replace all instances of \"https://dev.fun/p/27906a144d55a012351a\" with \"yesnodao.fun\" in the share messages throughout the app.\n\nLet me search for all occurrences of this URL in the code:\n\n1. In the `QuestionCard` component, in the `handleShare` function:\n```javascript\nconst text = `I just predicted \"${userVote.toUpperCase()}\" on \"${question.title}\" at YesNoDAO! Join me and predict the future to get paid for it! https://dev.fun/p/27906a144d55a012351a built with @devfunpump`;\n```\n\n2. In the `ProfilePage` component, in the share button onClick:\n```javascript\nconst text = `I've made ${userStats.totalVotes} predictions on YesNoDAO with a ${userStats.correctVotes > 0 ? Math.round(userStats.correctVotes / (userStats.correctVotes + userStats.incorrectVotes) * 100) : 0}% win rate! Join me to predict the future and get paid for it! https://dev.fun/p/27906a144d55a012351a built with @devfunpump`;\n```\n\n3. In the `App` component, in the `handleSharePrediction` function:\n```javascript\nconst text = `YESNODAO Prediction: ${question.title}\\n\\nPlace your bets now! 🎯\\n\\nyesnodao.fun`;\n```\n\nWait, the third one already has \"yesnodao.fun\", so I only need to update the first two.\n\nLet me create the changes using git conflict markers.","changelog","Updated all share messages to use yesnodao.fun instead of the dev.fun link!\nNow your social sharing will point to the official YesNoDAO domain! 🐦✨","diff","isRephrased","isDebug","isSuccess","error","devbaseSchema",{"_134":135,"_164":165,"_171":172,"_183":184},"votes",{"_136":137,"_146":147,"_153":154},"rules",{"_138":139,"_140":139,"_141":142,"_143":144,"_145":144},"get","true","list","create","$USER_ID === $newData.userId","delete","false","update","fields",{"_148":149,"_150":151,"_152":151},"amount","Number","prediction","String","questionId","actions",{"_141":155},{"_156":157},"transfer",{"_158":159,"_160":161,"_80":162,"_148":163},"to","$VAULT_ADDRESS","from","$USER_ID","$TOKEN_SOL","$newData.amount","claims",{"_136":166,"_146":167,"_153":168},{"_138":139,"_140":139,"_141":142,"_143":144,"_145":144},{"_148":149,"_109":151,"_152":151},{"_141":169},{"_156":170},{"_158":161,"_160":159,"_80":162,"_148":163},"questions",{"_136":173,"_146":175},{"_138":139,"_140":139,"_141":174,"_143":144,"_145":174},"$USER_ID === '6SxLVfFovSjR2LAFcJ5wfT6RFjc8GxsscRekGnLq8BMe'",{"_176":151,"_177":151,"_178":151,"_179":151,"_180":149,"_181":151,"_182":149,"_22":151},"title","outcome","imageUrl","expiresAt","totalPool","resolvedAt","voteAmount","protocol_fees",{"_136":185,"_146":186,"_153":187},{"_138":139,"_140":139,"_141":174,"_143":144,"_145":144},{"_148":149,"_152":151},{"_141":188},{"_156":189},{"_158":190,"_160":159,"_80":162,"_148":163},"6SxLVfFovSjR2LAFcJ5wfT6RFjc8GxsscRekGnLq8BMe","devbaseInsight","This Devbase schema describes a prediction market or betting application, likely built on Solana, where users can vote on outcomes of questions, and an administrator manages the questions and collects fees.\n\n## Votes Entity\n### Purpose:\nRecords a user's prediction on a specific question.\n### Fields:\n- **amount (Number)**: The amount of SOL (or other token) the user bets on their prediction.\n- **prediction (String)**: The user's chosen outcome for the question (e.g., \"Yes\", \"No\", \"Team A wins\").\n- **questionId (String)**: Links this vote to a specific question.\n### Permissions:\n- **Public View**: Anyone can see all votes.\n- **User-Specific Creation**: Only the user making the prediction can create a vote for themselves.\n- **Immutable**: Votes cannot be changed or deleted once cast.\n### On-chain Actions:\n- **Betting**: When a vote is created, the specified `amount` of SOL is automatically transferred from the user's wallet to a central application vault (`$VAULT_ADDRESS`).\n\n## Claims Entity\n### Purpose:\nRecords a user's withdrawal of winnings after a question has been resolved.\n### Fields:\n- **amount (Number)**: The amount of SOL (or other token) the user is claiming.\n- **userId (String)**: The ID of the user making the claim.\n- **questionId (String)**: Links this claim to the question it's related to.\n### Permissions:\n- **Public View**: Anyone can see all claims.\n- **User-Specific Creation**: Only the user who is entitled to the winnings can create a claim for themselves.\n- **Immutable**: Claims cannot be changed or deleted once made.\n### On-chain Actions:\n- **Withdrawal**: When a claim is created, the specified `amount` of SOL is automatically transferred from the central application vault (`$VAULT_ADDRESS`) to the claiming user's wallet.\n\n## Questions Entity\n### Purpose:\nDefines the prediction questions that users can vote on.\n### Fields:\n- **title (String)**: The main text of the question (e.g., \"Will BTC hit $100k by year-end?\").\n- **outcome (String)**: The final, resolved outcome of the question (set by the admin).\n- **imageUrl (String)**: An optional image associated with the question.\n- **expiresAt (String)**: The date/time when voting for the question closes.\n- **totalPool (Number)**: The total amount of funds (SOL) currently pooled for this question.\n- **resolvedAt (String)**: The date/time when the question was officially resolved.\n- **voteAmount (Number)**: (Likely intended to be the total amount of votes or total value of votes, but named `voteAmount`).\n- **description (String)**: More details about the question.\n### Permissions:\n- **Public View**: Anyone can see all questions.\n- **Admin-Only Management**: Only a specific administrator (identified by the wallet address `6SxLVfFovSjR2LAFcJ5wfT6RFjc8GxsscRekGnLq8BMe`) can create or update questions.\n- **Immutable**: Questions cannot be deleted.\n\n## Protocol Fees Entity\n### Purpose:\nRecords the collection of fees by the application administrator.\n### Fields:\n- **amount (Number)**: The amount of SOL (or other token) collected as a fee.\n- **questionId (String)**: Links this fee to a specific question, indicating where the fee originated.\n### Permissions:\n- **Public View**: Anyone can see all protocol fees.\n- **Admin-Only Creation**: Only the specific administrator (`6SxLVfFovSjR2LAFcJ5wfT6RFjc8GxsscRekGnLq8BMe`) can create a fee record.\n- **Immutable**: Fee records cannot be changed or deleted.\n### On-chain Actions:\n- **Fee Collection**: When a fee record is created, the specified `amount` of SOL is automatically transferred from the central application vault (`$VAULT_ADDRESS`) to the administrator's wallet (`6SxLVfFovSjR2LAFcJ5wfT6RFjc8GxsscRekGnLq8BMe`).\n\n## Key Behaviors:\n-   **Prediction Market**: Users bet on the outcome of questions created by an administrator.\n-   **Centralized Funds**: All user bets are pooled into a central application vault.\n-   **Admin Control**: A designated administrator has exclusive control over creating and resolving questions, and collecting platform fees.\n-   **Winnings Distribution**: Users can claim their winnings from the vault once a question is resolved.\n-   **Immutable Records**: All votes, claims, and fee collections are permanent and cannot be altered or removed.","messageId",["B","202595"],[],"isDraft",[31],"isLordOfDev","analytics",[201,205,207,209,211,213,215,217,219,221,223,225,227,229,231,233,235],{"_202":203,"_204":61},"day","2025-10-13","runCount",{"_202":206,"_204":61},"2025-10-14",{"_202":208,"_204":61},"2025-10-15",{"_202":210,"_204":61},"2025-10-16",{"_202":212,"_204":61},"2025-10-17",{"_202":214,"_204":61},"2025-10-18",{"_202":216,"_204":61},"2025-10-19",{"_202":218,"_204":61},"2025-10-20",{"_202":220,"_204":61},"2025-10-21",{"_202":222,"_204":61},"2025-10-22",{"_202":224,"_204":61},"2025-10-23",{"_202":226,"_204":61},"2025-10-24",{"_202":228,"_204":61},"2025-10-25",{"_202":230,"_204":61},"2025-10-26",{"_202":228,"_204":232},383,{"_202":230,"_204":234},20,{"_202":236,"_204":237},"2025-10-27",6,"https://cdn.dev.fun/og/image/1a46d912451370d301e2/7ba39504.webp","isDevbase","project",{"_14":19,"_242":243,"_20":244,"_245":246,"_22":247},"image","https://cdn.dev.fun/upload/96f493b0.jpg","$pot","oneliner","POT DOT FUN, THE WEB3 LOTTERY.","PotDotFun brings the thrill of the lottery into the Web3 era; fast, transparent, and borderless. \nPlayers from all over the world join one global jackpot powered by blockchain technology. \n","commitDetail","livestream","actionData","errors"]
</article></body></html>