[{"_1":2,"_146":-5,"_147":-5},"loaderData",{"_3":4,"_10":11},"root",{"_5":-5,"_6":7,"_8":9},"user","appId","cm7twdhs6009l11ml868xhxld","wsEndpoint","https://dev.fun","routes/app.$appId",{"_12":13},"appDetail",{"_14":15,"_16":17,"_18":19,"_20":21,"_22":23,"_24":25,"_26":25,"_27":28,"_31":32,"_33":34,"_35":36,"_37":38,"_39":40,"_41":42,"_43":44,"_5":45,"_57":58,"_59":60,"_61":42,"_62":63,"_64":60,"_65":66,"_67":42,"_68":60,"_69":60,"_70":60,"_71":17,"_72":25,"_73":74,"_75":76,"_77":78,"_79":80,"_81":82,"_100":-5,"_101":17,"_102":103,"_142":32,"_143":144,"_145":25},"id","27906a144d55a012351a","isMyApp",false,"name","YESNODAO","description","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.","brief","Stake tiny SOL bets on daily predictions in a pixel-perfect Disney-bright fortune-telling game!","isLive",true,"isPublic","tags",[29,30],"💰","👑","cover","https://cdn.dev.fun/snapshot/27906a144d55a012351a/87725_7d06a719.webp","cdnUrl","https://cdn.dev.fun/app/27906a144d55a012351a/87725","createdAt",["D",1748550565206],"updatedAt",["D",1752446359967],"lastCommitId",["B","87725"],"tier",1,"credits",39,{"_14":46,"_47":48,"_49":48,"_50":51,"_52":48,"_53":54,"_55":56},"1eaec144-69a9-4224-b940-fffc75be6107","uniqueId","kasper","username","solanaWallet","6SxLVfFovSjR2LAFcJ5wfT6RFjc8GxsscRekGnLq8BMe","displayName","bio","i paint pictures in my mind\nhttps://x.com/kasperwtrcolor","avatar","https://cdn.dev.fun/avatar/1eaec144-69a9-4224-b940-fffc75be6107/fe34aaaa.webp","commitCount",38,"forkCount",0,"likeCount","runsCount",341,"downvoteCount","upvoteCount",2,"upvoteRate","commentCount","reportCount","visitorCount","isArchived","isRenamed","contractAddress","AgYVbX4CueNVrBAXZh84DoFQtZhG6wpi3JgXHyCKpump","code","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 \n \n ;\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

\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 Image not available\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! https://dev.fun/p/27906a144d55a012351a 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 \n

\n {question.title}\n

\n Pool: {question.totalPool.toFixed(3)} SOL\n \n Vote Cost: {question.voteAmount || 0.001} SOL\n \n

\n \n {isExpired ? isResolved ? \"Resolved\" : \"Awaiting Result\" : `Ends: ${formatDate(question.expiresAt)}`}\n \n

\n {question.imageUrl &&

\n \n

}\n

\n {question.description}\n

\n {!isExpired &&

\n {userVote ?

\n \n You voted: {userVote.toUpperCase()}\n \n

: <>\n \n Cost to vote: {question.voteAmount || 0.001} SOL\n \n

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

\n }\n

}\n {}\n

\n YES: {question.yesVotes}\n NO: {question.noVotes}\n

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

\n {showShareButton && userVote && \n \n \n Share on X\n \n }\n

\n {isResolved &&

\n \n Outcome: {getOutcomeLabel()}\n \n

}\n {userVotedCorrectly && isResolved &&

\n \n You win! Reward: {getRewardAmount()} SOL\n \n {canClaim && onClaim(question.id)} className=\"mt-2\">\n Claim Reward\n }\n {hasUserClaimed && \n Reward claimed!\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 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 };\n if (!isOpen) return null;\n return

\n \n \n

\n Create Prediction\n \n ✕\n \n

\n \n Question Title\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 Description\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                <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\">\n              <PixelButton color=\"pink\" className=\"w-full\">\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 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 vote costs 0.001 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-5xl mx-auto px-4\">\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! 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              <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 [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    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        });\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 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      {transactionInProgress && <TransactionProgress isVisible={transactionInProgress} />}\n      <header className=\"bg-gradient-to-r from-[#6c5ce7] via-[#ff69b4] to-[#3498db] py-4 sm:py-6 px-3 sm:px-4 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-5xl 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-5xl mx-auto px-4\">\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        {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 && 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 justify-between items-center border-b-2 border-[#33e6ff] pb-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> : filteredQuestions.map(question => <QuestionCard key={question.id} question={question} onVote={handleVote} onClaim={handleClaim} userWallet={userWallet} />)}\n          </>}\n      </main>\n      <footer className=\"w-full pt-10 pb-6 relative\">\n        <div className=\"max-w-5xl mx-auto px-4 flex justify-center\">\n          <a href=\"https://x.com/kasperwtrcolor\" 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}","packageJson","{\"dependencies\":{\"react\":\"18.2.0\",\"framer-motion\":\"10.16.4\",\"lucide-react\":\"0.441.0\",\"@devfunlabs/web-sdk\":\"0.5.5\",\"react-router-dom\":\"6.18.0\",\"recharts\":\"2.8.0\"}}","appFunctions",[],"token",{"_18":83,"_84":85,"_86":87,"_88":89,"_90":91,"_92":93,"_94":95,"_96":97,"_98":99,"_73":74},"vibecode.fun","symbol","rick","price",0.00008784,"marketcap",87847,"image","https://pump.mypinata.cloud/ipfs/QmdiVAhd3kBiCNCc559HT5hQGeoP742a9BGML1qod45c8j?img-width=256&img-dpr=2","website","https://dev.fun/p/93870176b0b04c03015d","twitter","https://x.com/crabbylions/status/1898018929869832580?s=46","devCount",66,"appCount",96,"upstreamApp","isLordOfDev","analytics",[104,108,110,112,114,116,118,120,122,124,126,128,130,132,134,136,137,138,139,140,141],{"_105":106,"_107":60},"day","2025-08-09","runCount",{"_105":109,"_107":60},"2025-08-10",{"_105":111,"_107":60},"2025-08-11",{"_105":113,"_107":60},"2025-08-12",{"_105":115,"_107":60},"2025-08-13",{"_105":117,"_107":60},"2025-08-14",{"_105":119,"_107":60},"2025-08-15",{"_105":121,"_107":60},"2025-08-16",{"_105":123,"_107":60},"2025-08-17",{"_105":125,"_107":60},"2025-08-18",{"_105":127,"_107":60},"2025-08-19",{"_105":129,"_107":60},"2025-08-20",{"_105":131,"_107":60},"2025-08-21",{"_105":133,"_107":60},"2025-08-22",{"_105":106,"_107":135},4,{"_105":109,"_107":66},{"_105":111,"_107":66},{"_105":113,"_107":42},{"_105":115,"_107":42},{"_105":125,"_107":66},{"_105":131,"_107":66},"snapshot","ogImage","https://cdn.dev.fun/og/image/27906a144d55a012351a/54982359.webp","isDevbase","actionData","errors"]
</article></body></html>

say something