\n {newItemsCount.submissions > 0 || newItemsCount.votes > 0 ? \n

\n {newItemsCount.submissions > 0 && `${newItemsCount.submissions} new${newItemsCount.submissions > 1 ? ' subs' : ' sub'}`}\n {newItemsCount.submissions > 0 && newItemsCount.votes > 0 && ' & '}\n {newItemsCount.votes > 0 && `${newItemsCount.votes} vote${newItemsCount.votes > 1 ? 's' : ''}`}\n

\n \n \n \n : null}\n {checkingXConnection && \n

\n Checking X connection...\n

\n }\n \n {currentView === 'dashboard' && \n

ACTIVE CHALLENGES

\n \n \n \n

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

\n setCurrentView('createBounty')} className=\"cyber-button-primary px-3 sm:px-6 py-2 sm:py-3 font-['Sora'] font-bold text-base sm:text-xl\" variants={pixelButtonVariants} initial=\"rest\" whileHover=\"hover\" whileTap=\"tap\">\n CREATE CHALLENGE\n \n

🔴 LIVE STREAM SEARCH & CHALLENGE

\n Search for any Pump.fun streamer and challenge them directly! Paste a token mint ID or full pump.fun URL to find streamers and create targeted challenges.\n

\n 💡 TIP: Click any trending token below to automatically search for live streams!\n

\n \n {liveStreamSearch.result &&

\n {}\n

\n \n TOKEN SOCIALS\n

\n {liveStreamSearch.result.twitterHandle ?

\n \n X Found: @{liveStreamSearch.result.twitterHandle}\n

\n \n NO SOCIALS FOUND\n

\n This token has no X handle associated with it\n

}\n {liveStreamSearch.result.tokenInfo &&

\n {liveStreamSearch.result.tokenInfo.name &&

TOKEN NAME

{liveStreamSearch.result.tokenInfo.name}

}\n {liveStreamSearch.result.tokenInfo.symbol &&

SYMBOL

{liveStreamSearch.result.tokenInfo.symbol}

}\n

\n {liveStreamSearch.result.isLive ?

\n STREAMER IS LIVE!\n

\n {liveStreamSearch.result.thumbnail &&

\n $\"Stream$ \n

}\n

\n {liveStreamSearch.result.numParticipants !== undefined &&

VIEWERS

{liveStreamSearch.result.numParticipants}

}\n {liveStreamSearch.result.streamStartTimestamp &&

STARTED

\n {new Date(liveStreamSearch.result.streamStartTimestamp).toLocaleTimeString()}\n

}\n {liveStreamSearch.result.creatorAddress &&

CREATOR

\n {liveStreamSearch.result.creatorAddress.substring(0, 8)}...{liveStreamSearch.result.creatorAddress.substring(liveStreamSearch.result.creatorAddress.length - 6)}\n

}\n {liveStreamSearch.result.mode &&

MODE

{liveStreamSearch.result.mode}

}\n {liveStreamSearch.result.id &&

STREAM ID

{liveStreamSearch.result.id}

}\n

\n \n WATCH LIVE 📺\n \n {\n setCurrentView('createStreamerBounty');\n setLiveStreamSearch(prev => ({\n ...prev,\n selectedStream: liveStreamSearch.result\n }));\n if (liveStreamSearch.result.twitterHandle) {\n setFormData(prev => ({\n ...prev,\n streamerHandle: liveStreamSearch.result.twitterHandle,\n imageUrl: liveStreamSearch.result.tokenInfo?.image || ''\n }));\n }\n }} className=\"cyber-button px-4 py-2 font-['Sora'] font-semibold text-lg animate-pulse\" style={{\n background: 'var(--glass)'\n }} variants={pixelButtonVariants} initial=\"rest\" whileHover=\"hover\" whileTap=\"tap\">\n CHALLENGE STREAMER 🎯\n \n

\n STREAMER OFFLINE\n

\n This token is not currently being streamed on Pump.fun\n

\n {liveStreamSearch.result.twitterHandle && {\n setCurrentView('createStreamerBounty');\n setLiveStreamSearch(prev => ({\n ...prev,\n selectedStream: liveStreamSearch.result\n }));\n setFormData(prev => ({\n ...prev,\n streamerHandle: liveStreamSearch.result.twitterHandle,\n imageUrl: liveStreamSearch.result.tokenInfo?.image || ''\n }));\n }} className=\"cyber-button px-4 py-2 font-['Sora'] font-semibold text-lg\" style={{\n background: 'var(--glass)'\n }} variants={pixelButtonVariants} initial=\"rest\" whileHover=\"hover\" whileTap=\"tap\">\n CHALLENGE @{liveStreamSearch.result.twitterHandle} 🎯\n }\n

}\n

}\n {liveStreamSearch.error &&

\n \n {liveStreamSearch.error}\n

\n Token information may still be available above\n

}\n

\n {loading ?

\n {bounties.length === 0 ?

NO CHALLENGES YET. CREATE THE FIRST ONE!

: bounties.map(bounty => selectBounty(bounty)}>\n {bounty.imageUrl &&

{\n e.target.style.display = 'none';\n }} />\n

}\n

{bounty.title}

{bounty.description}

\n {getBountyStatus(bounty) === 'ended' && !bounty.winner &&

Waiting for Winner to be Selected

}\n

\n \n {formatDate(bounty.deadline)}\n

\n \n {countdowns[bounty.id] || getRemainingTime(bounty.deadline)}\n

\n {bounty.amount} SOL\n

\n \n \n {getBountySubmissions(bounty.id).length} ENTRIES\n \n

\n {\n e.stopPropagation();\n shareChallenge(bounty);\n }} className=\"p-1 cyber-button\" variants={pixelButtonVariants} initial=\"rest\" whileHover=\"hover\" whileTap=\"tap\" title=\"Share Challenge\">\n \n \n

\n )}\n

}\n }\n {currentView === 'createBounty' && \n

CREATE NEW CHALLENGE

\n CHALLENGE TITLE\n setFormData({\n ...formData,\n title: e.target.value\n })} className=\"w-full cyber-input\" required />\n

\n DESCRIPTION\n

setFormData({\n                ...formData,\n                description: e.target.value\n              })} className=\"w-full cyber-input h-24\" required />\n                </div>\n            <div>\n                  <label className=\"block text-[var(--ink)] font-['Outfit'] text-xl mb-2\">DEADLINE</label>\n                  <input type=\"datetime-local\" value={formData.deadline} onChange={e => setFormData({\n                ...formData,\n                deadline: e.target.value\n              })} min={new Date(new Date().getTime() - new Date().getTimezoneOffset() * 60000).toISOString().slice(0, 16)} className={`w-full cyber-input cursor-pointer ${new Date(formData.deadline) <= new Date() ? 'border-[var(--danger)]' : ''}`} required />\n                  <p className=\"text-sm text-[var(--sub)] font-['Outfit'] mt-1\">\n                    {new Date(formData.deadline) <= new Date() ? <span className=\"text-[var(--danger)]\">DEADLINE MUST BE IN THE FUTURE!</span> : \"CLICK TO OPEN DATE & TIME PICKER\"}\n                  </p>\n                </div>\n                <div>\n                  <label className=\"block text-[var(--ink)] font-['Outfit'] text-xl mb-2\">CHALLENGE REWARD</label>\n                  <div className=\"relative\">\n                    <input type=\"number\" value={formData.amount} onChange={e => setFormData({\n                  ...formData,\n                  amount: e.target.value\n                })} min=\"0.0001\" step=\"0.0001\" className=\"w-full cyber-input\" />\n                    <div className=\"absolute right-4 top-1/2 transform -translate-y-1/2 text-[var(--glass-ink)] font-['Sora'] text-xl\">SOL</div>\n                  </div>\n                  <p className=\"text-sm text-[var(--sub)] font-['Outfit'] mt-1\">THE CHALLENGE CREATOR WILL FUND THIS AMOUNT OF SOL, WHICH WILL BE AWARDED TO THE WINNER</p>\n                </div>\n                <div className=\"flex justify-end space-x-4 pt-4\">\n                  <motion.button type=\"button\" onClick={() => setCurrentView('dashboard')} className=\"px-6 py-3 cyber-button text-[var(--ink)] font-['Sora'] text-xl\" variants={pixelButtonVariants} initial=\"rest\" whileHover=\"hover\" whileTap=\"tap\">\n                    CANCEL\n                  </motion.button>\n                  <motion.button type=\"submit\" className=\"cyber-button-primary px-6 py-3 font-['Sora'] text-xl\" variants={pixelButtonVariants} initial=\"rest\" whileHover=\"hover\" whileTap=\"tap\">\n                    CREATE CHALLENGE\n                  </motion.button>\n            </div>\n              </form>\n            </motion.div>}\n          {currentView === 'createStreamerBounty' && <motion.div key=\"createStreamerBounty\" initial={{\n          opacity: 0,\n          y: 10\n        }} animate={{\n          opacity: 1,\n          y: 0\n        }} exit={{\n          opacity: 0,\n          y: -10\n        }} transition={{\n          duration: 0.3\n        }} className=\"max-w-2xl mx-auto cyber-card p-4 sm:p-6 md:p-8\">\n              <h2 className=\"text-xl sm:text-2xl md:text-3xl display-title text-[var(--ink)] mb-4 sm:mb-6 text-center\">CHALLENGE LIVE STREAMER</h2>\n              {liveStreamSearch.selectedStream && <div className=\"cyber-card p-4 mb-6\" style={{\n            background: liveStreamSearch.selectedStream.isLive ? 'var(--ok)' : 'var(--sub)'\n          }}>\n                <div className=\"flex items-center mb-2\">\n                  {liveStreamSearch.selectedStream.isLive ? <>\n                      <div className=\"w-3 h-3 bg-[var(--danger)] rounded-full animate-pulse mr-2\"></div>\n                      <span className=\"font-['Sora'] font-semibold text-white text-lg\">TARGETING LIVE STREAMER</span>\n                    </> : <>\n                      <div className=\"w-3 h-3 bg-gray-400 rounded-full mr-2\"></div>\n                      <span className=\"font-['Sora'] font-semibold text-white text-lg\">TARGETING TOKEN STREAMER</span>\n                    </>}\n                </div>\n                <div className=\"text-white font-['Outfit'] text-lg\">\n                  {liveStreamSearch.selectedStream.isLive && liveStreamSearch.selectedStream.numParticipants && <>Viewers: {liveStreamSearch.selectedStream.numParticipants} | </>}\n                  {liveStreamSearch.selectedStream.creatorAddress && <>Creator: {liveStreamSearch.selectedStream.creatorAddress?.substring(0, 8)}... | </>}\n                  {liveStreamSearch.selectedStream.twitterHandle ? <span className=\"font-bold\"> Twitter: @{liveStreamSearch.selectedStream.twitterHandle}</span> : <span className=\"text-gray-200\"> No Twitter Found</span>}\n                </div>\n              </div>}\n              <form onSubmit={createBounty} className=\"space-y-6\">\n                <div>\n                  <label className=\"block text-[var(--ink)] font-['Outfit'] text-xl mb-2\">CHALLENGE TITLE</label>\n                  <input type=\"text\" value={formData.title} onChange={e => setFormData({\n                ...formData,\n                title: e.target.value\n              })} className=\"w-full cyber-input\" required />\n                </div>\n                <div className=\"cyber-card p-4\" style={{\n              background: 'var(--yellow)',\n              backdropFilter: 'none'\n            }}>\n                  <label className=\"block text-black font-['Outfit'] text-xl mb-2\">STREAMER X HANDLE *</label>\n                  <input type=\"text\" value={formData.streamerHandle} onChange={e => setFormData({\n                ...formData,\n                streamerHandle: e.target.value.replace('@', '')\n              })} placeholder=\"Enter streamer's X handle (without @)\" className=\"w-full cyber-input\" required />\n                  {liveStreamSearch.selectedStream?.twitterHandle ? <p className=\"mt-2 text-black font-['Outfit'] text-sm\">\n                      ✅ AUTO-FILLED FROM TOKEN SOCIALS: @{liveStreamSearch.selectedStream.twitterHandle}\n                    </p> : <p className=\"mt-2 text-[var(--danger)] font-['Outfit'] text-sm\">\n                      ⚠️ NO X HANDLE FOUND FOR THIS TOKEN - ENTER MANUALLY\n                    </p>}\n                  <p className=\"mt-2 text-black font-['Outfit'] text-sm\">\n                    ⚠️ ONLY THIS SPECIFIC STREAMER CAN COMPLETE THE CHALLENGE!\n                  </p>\n                </div>\n                <div>\n                  <label className=\"block text-[var(--ink)] font-['Outfit'] text-xl mb-2\">DESCRIPTION</label>\n                  <textarea value={formData.description} onChange={e => setFormData({\n                ...formData,\n                description: e.target.value\n              })} className=\"w-full cyber-input h-24\" required />\n                </div>\n                <div>\n                  <label className=\"block text-[var(--ink)] font-['Outfit'] text-xl mb-2\">DEADLINE</label>\n                  <input type=\"datetime-local\" value={formData.deadline} onChange={e => setFormData({\n                ...formData,\n                deadline: e.target.value\n              })} min={new Date(new Date().getTime() - new Date().getTimezoneOffset() * 60000).toISOString().slice(0, 16)} className={`w-full cyber-input cursor-pointer ${new Date(formData.deadline) <= new Date() ? 'border-[var(--danger)]' : ''}`} required />\n                  <p className=\"text-sm text-[var(--sub)] font-['Outfit'] mt-1\">\n                    {new Date(formData.deadline) <= new Date() ? <span className=\"text-[var(--danger)]\">DEADLINE MUST BE IN THE FUTURE!</span> : \"CLICK TO OPEN DATE & TIME PICKER\"}\n                  </p>\n                </div>\n                <div>\n                  <label className=\"block text-[var(--ink)] font-['Outfit'] text-xl mb-2\">CHALLENGE REWARD</label>\n                  <div className=\"relative\">\n                    <input type=\"number\" value={formData.amount} onChange={e => setFormData({\n                  ...formData,\n                  amount: e.target.value\n                })} min=\"0.0001\" step=\"0.0001\" className=\"w-full cyber-input\" />\n                    <div className=\"absolute right-4 top-1/2 transform -translate-y-1/2 text-[var(--glass-ink)] font-['Sora'] text-xl\">SOL</div>\n                  </div>\n                  <p className=\"text-sm text-[var(--sub)] font-['Outfit'] mt-1\">THE STREAMER WILL EARN THIS AMOUNT OF SOL FOR COMPLETING YOUR CHALLENGE</p>\n                </div>\n                <div className=\"flex justify-end space-x-4 pt-4\">\n                  <motion.button type=\"button\" onClick={() => {\n                setCurrentView('dashboard');\n                setFormData({\n                  title: '',\n                  amount: 100,\n                  deadline: '',\n                  description: '',\n                  streamerHandle: '',\n                  imageUrl: ''\n                });\n              }} className=\"px-6 py-3 cyber-button text-[var(--ink)] font-['Sora'] text-xl\" variants={pixelButtonVariants} initial=\"rest\" whileHover=\"hover\" whileTap=\"tap\">\n                    CANCEL\n                  </motion.button>\n                  <motion.button type=\"submit\" className=\"cyber-button-primary px-6 py-3 font-['Sora'] text-xl\" variants={pixelButtonVariants} initial=\"rest\" whileHover=\"hover\" whileTap=\"tap\">\n                    CHALLENGE STREAMER\n                  </motion.button>\n                </div>\n              </form>\n            </motion.div>}\n          {currentView === 'bounty' && selectedBounty && <motion.div key=\"bounty\" initial={{\n          opacity: 0,\n          y: 10\n        }} animate={{\n          opacity: 1,\n          y: 0\n        }} exit={{\n          opacity: 0,\n          y: -10\n        }} transition={{\n          duration: 0.3\n        }} className=\"space-y-8\">\n              <div className=\"flex flex-wrap items-center gap-2\">\n                <motion.button onClick={() => setCurrentView('dashboard')} className=\"flex items-center cyber-button-primary px-2 sm:px-3 py-1 font-['Sora'] text-base sm:text-xl\" variants={pixelButtonVariants} initial=\"rest\" whileHover=\"hover\" whileTap=\"tap\">\n                  <ArrowRight size={14} className=\"mr-1 sm:mr-2 transform rotate-180\" />\n                  BACK TO CHALLENGES\n                </motion.button>\n                <motion.button onClick={refreshData} className=\"cyber-button p-1.5 sm:p-2 flex items-center justify-center\" whileHover={{\n              scale: 1.05\n            }} whileTap={{\n              scale: 0.95\n            }} title=\"Refresh data\">\n                  <RefreshCw size={16} className={isRefreshing ? \"animate-spin text-white\" : \"text-white\"} />\n                </motion.button>\n                <div className=\"text-xs sm:text-sm text-[var(--sub)] font-['Outfit']\">\n                  Last: {new Date(lastRefreshed).toLocaleTimeString()}\n                </div>\n              </div>\n              <div className=\"cyber-card p-4 sm:p-8\">\n                <div className=\"flex flex-col sm:flex-row justify-between items-start gap-3 sm:gap-0 mb-4 sm:mb-6\">\n                  <div>\n                    <h2 className=\"text-xl sm:text-3xl md:text-4xl display-title text-[var(--ink)] mb-2 break-words\">{selectedBounty.title}</h2>\n                    <p className=\"text-[var(--glass-ink)] font-['Outfit'] text-base sm:text-xl\">CHALLENGE BY {selectedBounty.creator.substring(0, 6)}...{selectedBounty.creator.substring(selectedBounty.creator.length - 4)}</p>\n                    {selectedBounty.streamerHandle && <div className=\"mt-2 cyber-card px-3 py-1 inline-block\" style={{\n                  background: 'var(--yellow)'\n                }}>\n                      <span className=\"text-black font-['Outfit'] text-sm\">STREAMER-SPECIFIC: @{selectedBounty.streamerHandle}</span>\n                    </div>}\n                  </div>\n                  <div className=\"flex items-center gap-2 self-end sm:self-auto\">\n                    {isAdmin && <motion.button onClick={() => deleteBounty(selectedBounty.id)} className=\"cyber-button p-1.5 sm:p-2\" style={{\n                  background: 'var(--danger)'\n                }} title=\"Admin: Delete Quest\" variants={pixelButtonVariants} initial=\"rest\" whileHover=\"hover\" whileTap=\"tap\">\n                        <Trash2 size={16} className=\"text-white\" />\n                      </motion.button>}\n                    <div className=\"cyber-card px-3 sm:px-4 py-1 sm:py-2\" style={{\n                  background: 'var(--yellow)'\n                }}>\n                      <span className=\"font-['Sora'] font-bold text-base sm:text-xl text-black\">{selectedBounty.amount} SOL</span>\n                    </div>\n                  </div>\n                </div>\n                <div className=\"cyber-card p-3 mb-6\" style={{\n              background: 'var(--glass)'\n            }}>\n                  <p className=\"text-[var(--glass-ink)] font-['Outfit'] text-lg\">{selectedBounty.description}</p>\n                </div>\n                <div className=\"flex flex-wrap gap-3 sm:gap-6 mb-6 sm:mb-8\">\n                  <div className={`cyber-card p-3 sm:p-4 flex items-center`} style={{\n                background: getBountyStatus(selectedBounty) === 'active' ? 'var(--ok)' : getBountyStatus(selectedBounty) === 'ended' ? 'var(--danger)' : 'var(--glass)'\n              }}>\n                    <Clock size={16} className={`mr-2 sm:mr-3 ${getBountyStatus(selectedBounty) === 'active' ? 'text-white' : getBountyStatus(selectedBounty) === 'ended' ? 'text-white' : 'text-[var(--ink)]'} flex-shrink-0`} />\n                    <div>\n                      <p className={`font-['Outfit'] text-xs sm:text-base ${getBountyStatus(selectedBounty) === 'active' ? 'text-white' : getBountyStatus(selectedBounty) === 'ended' ? 'text-white' : 'text-[var(--glass-ink)]'}`}>TIME LEFT</p>\n                      <p className={`font-['Sora'] font-bold text-sm sm:text-xl ${getBountyStatus(selectedBounty) === 'active' ? 'text-white' : getBountyStatus(selectedBounty) === 'ended' ? 'text-white' : 'text-[var(--ink)]'}`}>{countdowns[selectedBounty.id] || getRemainingTime(selectedBounty.deadline)}</p>\n                    </div>\n                  </div>\n                  {getBountyStatus(selectedBounty) === 'ended' && !selectedBounty.winner && <div className=\"cyber-card p-3 sm:p-4 flex items-center\" style={{\n                background: 'var(--danger)'\n              }}>\n                      <Trophy size={16} className=\"mr-2 sm:mr-3 text-white flex-shrink-0\" />\n                      <div>\n                        <p className=\"text-white font-['Outfit'] text-xs sm:text-base\">STATUS</p>\n                        <p className=\"text-white font-['Sora'] font-bold text-sm sm:text-xl\">Waiting for Winner</p>\n                      </div>\n                    </div>}\n                  <div className=\"cyber-card p-3 sm:p-4 flex items-center\">\n                    <Award size={16} className=\"mr-2 sm:mr-3 text-[var(--ink)] flex-shrink-0\" />\n                    <div>\n                      <p className=\"text-[var(--glass-ink)] font-['Outfit'] text-xs sm:text-base\">ENTRIES</p>\n                      <p className=\"text-[var(--ink)] font-['Sora'] font-bold text-sm sm:text-xl\">{getBountySubmissions(selectedBounty.id).length}</p>\n                    </div>\n                  </div>\n                  <div className=\"cyber-card p-3 sm:p-4 flex items-center\">\n                    <Trophy size={16} className=\"mr-2 sm:mr-3 text-[var(--ink)] flex-shrink-0\" />\n                    <div>\n                      <p className=\"text-[var(--glass-ink)] font-['Outfit'] text-xs sm:text-base\">STATUS</p>\n                      <p className={`font-['Sora'] font-bold text-sm sm:text-xl ${selectedBounty.winner ? selectedBounty.claimed ? 'text-[var(--ink)]' : 'text-[var(--yellow)]' : getBountyStatus(selectedBounty) === 'active' ? 'text-[var(--ok)]' : 'text-[var(--danger)]'}`}>\n                        {selectedBounty.winner ? selectedBounty.claimed ? 'CLAIMED' : 'WINNER CHOSEN' : getBountyStatus(selectedBounty) === 'active' ? 'ACTIVE' : 'ENDED'}\n                      </p>\n                    </div>\n                  </div>\n                </div>\n                {new Date(selectedBounty.deadline) > new Date() && !selectedBounty.winner && <motion.button onClick={() => setCurrentView('createSubmission')} className=\"cyber-button-primary px-6 py-3 font-['Sora'] font-bold text-xl mb-8\" variants={pixelButtonVariants} initial=\"rest\" whileHover=\"hover\" whileTap=\"tap\">\n                    {selectedBounty.streamerHandle ? `SUBMIT STREAM (ONLY @${selectedBounty.streamerHandle})` : 'SUBMIT STREAM'}\n                  </motion.button>}\n                {new Date(selectedBounty.deadline) < new Date() && getBountySubmissions(selectedBounty.id).length === 0 && userWallet === selectedBounty.creator && !selectedBounty.winner && <motion.button onClick={() => setCurrentView('extendDeadline')} className=\"cyber-button-primary px-6 py-3 font-['Sora'] font-bold text-xl mb-8 animate-pulse text-black\" style={{\n              background: 'var(--yellow)'\n            }} variants={pixelButtonVariants} initial=\"rest\" whileHover=\"hover\" whileTap=\"tap\">\n                     <Clock size={20} className=\"inline-block mr-2 text-black\" />\n                     EXTEND DEADLINE\n                 </motion.button>}\n                <h3 className=\"text-lg sm:text-xl md:text-2xl pixel-title text-[var(--ink)] mb-4\">STREAM SUBMISSIONS</h3>\n                {getBountySubmissions(selectedBounty.id).length === 0 ? <div className=\"text-center py-12 cyber-card\">\n                    <p className=\"text-xl font-['Outfit'] text-[var(--ink)]\">NO STREAM SUBMISSIONS YET.</p>\n                  </div> : <div className=\"space-y-6\">\n                    {getBountySubmissions(selectedBounty.id).map(submission => <div key={submission.id} className={`cyber-card p-6 ${selectedBounty.winner === submission.id ? 'shadow-[var(--glow-yellow)]' : ''} transition-all`} style={{\n                background: selectedBounty.winner === submission.id ? 'var(--yellow)' : 'var(--glass)'\n              }}>\n                        {selectedBounty.winner === submission.id && <div className=\"cyber-card px-3 py-1 text-sm font-['Sora'] font-bold inline-block mb-3\" style={{\n                  background: 'var(--yellow)'\n                }}>\n                            <span className=\"text-black\">WINNER 🏆</span>\n                          </div>}\n                        <h4 className=\"text-xl font-['Sora'] font-bold text-[var(--ink)] mb-2\">{submission.title}</h4>\n                        <p className=\"text-[var(--glass-ink)] font-['Outfit'] text-lg mb-2\">BY {submission.userId.substring(0, 6)}...{submission.userId.substring(submission.userId.length - 4)}</p>\n                        <div className=\"cyber-card p-4 mb-4\">\n                          <div className=\"flex flex-col space-y-2\">\n                    <div className=\"flex items-center\">\n                          <Twitter size={16} className=\"mr-2 text-[var(--ink)]\" />\n                          <a href={submission.tweetUrl} target=\"_blank\" rel=\"noopener noreferrer\" className=\"text-[var(--ink)] hover:text-[var(--yellow)] overflow-hidden overflow-ellipsis font-['Outfit'] text-lg\">\n                            {submission.tweetUrl}\n                          </a>\n                        </div>\n                        {submission.twitterHandle && submission.userId === userWallet && userTwitterHandle && userTwitterHandle.toLowerCase() === submission.twitterHandle.toLowerCase() && <div className=\"flex items-center mt-1\">\n                            <ExternalLink size={14} className=\"mr-2 text-[var(--ink)]\" />\n                            <span className=\"text-[var(--ink)] font-['Outfit'] text-lg\">\n                              Connected owner: @{submission.twitterHandle}\n                            </span>\n                          </div>}\n                          </div>\n                          {submission.imageUrl && <img src={submission.imageUrl} alt={submission.title} className=\"w-full h-64 object-cover rounded-lg mt-2\" style={{\n                    imageRendering: 'pixelated'\n                  }} />}\n                        </div>\n                        <div className=\"flex flex-wrap justify-between items-center gap-2 sm:gap-0\">\n                          <div className=\"flex flex-wrap items-center gap-2 sm:gap-4\">\n                            <motion.button onClick={() => voteSubmission(submission.id)} className=\"flex items-center cyber-button-primary px-2 py-1 font-['Sora'] text-sm sm:text-lg\" disabled={!userWallet} variants={pixelButtonVariants} initial=\"rest\" whileHover=\"hover\" whileTap=\"tap\">\n                              <ThumbsUp size={14} className=\"mr-1\" />\n                              <motion.span animate={animatingVote === submission.id ? {\n                        scale: [1, 1.5, 1],\n                        color: ['var(--ink)', 'var(--yellow)', 'var(--ink)']\n                      } : {\n                        scale: 1\n                      }} transition={{\n                        duration: 0.5\n                      }}>\n                                {getSubmissionVoteCount(submission.id)}\n                              </motion.span>\n                              {animatingVote === submission.id && <motion.div className=\"absolute inset-0 pointer-events-none\" initial={{\n                        opacity: 1\n                      }} animate={{\n                        opacity: 0,\n                        scale: [1, 1.5]\n                      }} transition={{\n                        duration: 0.7\n                      }}>\n                                  {[...Array(8)].map((_, i) => <motion.div key={i} className=\"absolute w-2 h-2 rounded-full\" style={{\n                          background: 'var(--yellow)'\n                        }} initial={{\n                          top: '50%',\n                          left: '50%',\n                          opacity: 1\n                        }} animate={{\n                          top: ['50%', `${30 + Math.random() * 40}%`],\n                          left: ['50%', `${30 + Math.random() * 40}%`],\n                          opacity: 0\n                        }} transition={{\n                          duration: 0.7\n                        }} />)}\n                                </motion.div>}\n                            </motion.button>\n                            {userWallet === selectedBounty.creator && new Date(selectedBounty.deadline) < new Date() && !selectedBounty.winner && (selectingWinner === submission.id ? <div className=\"cyber-button px-3 py-1 font-['Sora'] text-lg flex items-center\" style={{\n                      background: 'var(--ok)'\n                    }}>\n                                <div className=\"animate-spin h-4 w-4 border-2 border-white border-t-transparent rounded-full mr-2\"></div>\n                                <span className=\"text-white\">SELECTING...</span>\n                              </div> : <motion.button onClick={() => chooseWinner(submission.id, selectedBounty.id)} className=\"relative cyber-button px-3 py-1 font-['Sora'] text-lg\" style={{\n                      background: 'var(--ok)'\n                    }} variants={pixelButtonVariants} initial=\"rest\" whileHover=\"hover\" whileTap=\"tap\">\n                                <span className=\"text-white\">SELECT WINNER</span>\n                                {winnerAnimation === submission.id && <motion.div className=\"absolute inset-0 pointer-events-none overflow-hidden\">\n                                    {[...Array(30)].map((_, i) => <motion.div key={i} className=\"absolute w-3 h-3 rounded-full\" style={{\n                          backgroundColor: ['var(--yellow)', 'var(--ok)', 'var(--glass)', 'var(--neon-blue)'][i % 4],\n                          top: `${Math.random() * 100}%`,\n                          left: `${Math.random() * 100}%`\n                        }} initial={{\n                          opacity: 0,\n                          scale: 0\n                        }} animate={{\n                          opacity: [0, 1, 0],\n                          scale: [0, 1, 0],\n                          rotate: [0, 180],\n                          y: [0, -20 - Math.random() * 50],\n                          x: [0, (Math.random() - 0.5) * 40]\n                        }} transition={{\n                          duration: 1 + Math.random(),\n                          delay: Math.random() * 0.5\n                        }} />)}\n                                  </motion.div>}\n                              </motion.button>)}\n                            {userWallet === submission.userId && selectedBounty.winner === submission.id && (selectedBounty.claimed || claimedBounties[selectedBounty.id] === 'claimed' ? <div className=\"cyber-card px-3 py-1 font-['Outfit'] text-lg\" style={{\n                      background: 'var(--sub)'\n                    }}>\n                                  <span className=\"text-white\">ALREADY CLAIMED</span>\n                                </div> : pendingClaims.has(selectedBounty.id) ? <div className=\"cyber-card px-3 py-1 font-['Outfit'] text-lg flex items-center\">\n                                  <span className=\"mr-2 text-[var(--ink)]\">PENDING</span>\n                                  <div className=\"animate-spin h-4 w-4 border-2 border-[var(--ink)] border-t-transparent rounded-full\"></div>\n                                </div> : failedClaims[selectedBounty.id] === 'failed' && isMakeMeBuyZalaBounty(selectedBounty) ? <motion.button onClick={() => retryClaimReward(submission.id, selectedBounty.id)} className=\"cyber-button-primary px-3 py-1 font-['Sora'] text-lg animate-pulse\" variants={pixelButtonVariants} initial=\"rest\" whileHover=\"hover\" whileTap=\"tap\">\n                                  RETRY CLAIM\n                                </motion.button> : <motion.button onClick={() => claimReward(submission.id, selectedBounty.id)} className=\"cyber-button-primary px-3 py-1 font-['Sora'] text-lg animate-pulse\" variants={pixelButtonVariants} initial=\"rest\" whileHover=\"hover\" whileTap=\"tap\">\n                                  CLAIM {selectedBounty.amount} SOL\n                                </motion.button>)}\n                            {userWallet === submission.userId && getSubmissionVoteCount(submission.id) >= 50 && (submission.claimed ? <div className=\"cyber-card px-3 py-1 font-['Outfit'] text-lg\" style={{\n                      background: 'var(--sub)'\n                    }}>\n                                  <span className=\"text-white\">ALREADY CLAIMED</span>\n                                </div> : <motion.button onClick={() => claimZala(submission.id)} className=\"cyber-button-primary px-3 py-1 font-['Sora'] text-lg\" variants={pixelButtonVariants} initial=\"rest\" whileHover=\"hover\" whileTap=\"tap\">\n                                  CLAIM 0.1 SOL BONUS\n                                </motion.button>)}\n                          </div>\n                          {userWallet === submission.userId && !selectedBounty.winner && <motion.button onClick={() => deleteSubmission(submission.id)} className=\"cyber-button p-2\" style={{\n                    background: 'var(--danger)'\n                  }} variants={pixelButtonVariants} initial=\"rest\" whileHover=\"hover\" whileTap=\"tap\">\n                              <Trash2 size={16} className=\"text-white\" />\n                            </motion.button>}\n                        </div>\n                      </div>)}\n                  </div>}\n              </div>\n            </motion.div>}\n          {currentView === 'extendDeadline' && selectedBounty && <motion.div key=\"extendDeadline\" initial={{\n          opacity: 0,\n          y: 10\n        }} animate={{\n          opacity: 1,\n          y: 0\n        }} exit={{\n          opacity: 0,\n          y: -10\n        }} transition={{\n          duration: 0.3\n        }} className=\"max-w-2xl mx-auto cyber-card p-4 sm:p-6 md:p-8\">\n              <h2 className=\"text-xl sm:text-2xl md:text-3xl display-title text-[var(--ink)] mb-4 sm:mb-6 text-center\">EXTEND CHALLENGE DEADLINE</h2>\n              <div className=\"cyber-card p-4 mb-6\" style={{\n            background: 'var(--yellow)',\n            backdropFilter: 'none'\n          }}>\n                <div className=\"flex items-start\">\n                  <Clock size={24} className=\"text-[var(--ink)] mr-3 mt-1 flex-shrink-0\" />\n                  <div>\n                    <h3 className=\"text-lg font-['Sora'] font-bold text-[var(--ink)] mb-2\">NO ENTRIES RECEIVED</h3>\n                    <p className=\"text-[var(--ink)] font-['Outfit'] mb-3\">\n                      Your challenge \"{selectedBounty.title}\" received no stream submissions before the deadline. \n                      You can extend the deadline to give streamers more time to complete the challenge.\n                    </p>\n                    <p className=\"text-[var(--ink)] font-['Outfit']\">\n                      Current deadline: {formatDate(selectedBounty.deadline)} (ENDED)\n                    </p>\n                  </div>\n                </div>\n              </div>\n              <form onSubmit={extendDeadline} className=\"space-y-6\">\n                <div>\n                  <label className=\"block text-[var(--ink)] font-['Outfit'] text-xl mb-2\">NEW DEADLINE</label>\n                  <input type=\"datetime-local\" value={extensionData.deadline} onChange={e => setExtensionData({\n                ...extensionData,\n                deadline: e.target.value\n              })} min={new Date(new Date().getTime() - new Date().getTimezoneOffset() * 60000).toISOString().slice(0, 16)} className={`w-full cyber-input cursor-pointer ${new Date(extensionData.deadline) <= new Date() ? 'border-[var(--danger)]' : ''}`} required />\n                  <p className=\"text-sm text-[var(--sub)] font-['Outfit'] mt-1\">\n                    {new Date(extensionData.deadline) <= new Date() ? <span className=\"text-[var(--danger)]\">NEW DEADLINE MUST BE IN THE FUTURE!</span> : \"CLICK TO OPEN DATE & TIME PICKER\"}\n                  </p>\n                </div>\n                <div className=\"flex justify-end space-x-4 pt-4\">\n                  <motion.button type=\"button\" onClick={() => setCurrentView('bounty')} className=\"px-6 py-3 cyber-button text-[var(--ink)] font-['Sora'] text-xl\" variants={pixelButtonVariants} initial=\"rest\" whileHover=\"hover\" whileTap=\"tap\">\n                    CANCEL\n                  </motion.button>\n                  <motion.button type=\"submit\" className=\"cyber-button-primary px-6 py-3 font-['Sora'] text-xl\" variants={pixelButtonVariants} initial=\"rest\" whileHover=\"hover\" whileTap=\"tap\">\n                    EXTEND DEADLINE\n                  </motion.button>\n                </div>\n              </form>\n            </motion.div>}\n          {currentView === 'createSubmission' && selectedBounty && <motion.div key=\"createSubmission\" initial={{\n          opacity: 0,\n          y: 10\n        }} animate={{\n          opacity: 1,\n          y: 0\n        }} exit={{\n          opacity: 0,\n          y: -10\n        }} transition={{\n          duration: 0.3\n        }} className=\"max-w-2xl mx-auto cyber-card p-4 sm:p-6 md:p-8\">\n              <h2 className=\"text-xl sm:text-2xl md:text-3xl display-title text-[var(--ink)] mb-4 sm:mb-6 text-center\">SUBMIT STREAM</h2>\n              <p className=\"text-[var(--glass-ink)] font-['Outfit'] text-lg mb-6\">For challenge: {selectedBounty.title}</p>\n              {!userTwitterHandle ? <div className=\"cyber-card p-6 mb-6\" style={{\n            background: 'var(--danger)'\n          }}>\n                  <div className=\"flex items-start\">\n                    <AlertCircle size={28} className=\"text-white mr-3 mt-1 flex-shrink-0\" />\n                    <div>\n                <h3 className=\"text-xl font-['Sora'] font-bold text-white mb-4\">X ACCOUNT REQUIRED</h3>\n                      <p className=\"text-white font-['Outfit'] text-lg mb-4\">\n                        YOU MUST CONNECT YOUR X ACCOUNT BEFORE SUBMITTING STREAM CONTENT\n                      </p>\n                      <motion.button onClick={() => setCurrentView('profile')} className=\"cyber-button-primary px-4 py-2 font-['Sora'] text-xl\" variants={pixelButtonVariants} initial=\"rest\" whileHover=\"hover\" whileTap=\"tap\">\n                        GO TO PROFILE\n                      </motion.button>\n                    </div>\n                  </div>\n                </div> : selectedBounty.streamerHandle && selectedBounty.streamerHandle.toLowerCase() !== userTwitterHandle.toLowerCase() ? <div className=\"cyber-card p-6 mb-6\" style={{\n            background: 'var(--sub)'\n          }}>\n                  <div className=\"flex items-start\">\n                    <AlertCircle size={28} className=\"text-white mr-3 mt-1 flex-shrink-0\" />\n                    <div>\n                      <h3 className=\"text-xl font-['Sora'] font-bold text-white mb-2\">STREAMER-SPECIFIC CHALLENGE</h3>\n                      <p className=\"text-white font-['Outfit'] text-lg mb-4\">\n                        THIS CHALLENGE IS ONLY FOR @{selectedBounty.streamerHandle}. ONLY THAT SPECIFIC STREAMER CAN COMPLETE THIS CHALLENGE.\n                      </p>\n                      <div className=\"cyber-card p-3\">\n                        <p className=\"text-[var(--ink)] font-['Outfit']\">\n                          Your connected account: @{userTwitterHandle}\n                        </p>\n                        <p className=\"text-[var(--ink)] font-['Outfit']\">\n                          Required account: @{selectedBounty.streamerHandle}\n                        </p>\n                      </div>\n                    </div>\n                  </div>\n                </div> : <form onSubmit={createSubmission} className=\"space-y-6\">\n                  <div className=\"cyber-card p-4 mb-4\" style={{\n              background: 'var(--ok)'\n            }}>\n                    <div className=\"flex items-center\">\n                      {userProfileImageUrl ? <img src={userProfileImageUrl} alt=\"Profile\" className=\"w-8 h-8 rounded-full border border-white mr-3\" style={{\n                  imageRendering: 'pixelated'\n                }} /> : <Twitter size={20} className=\"text-white mr-2\" />}\n                      <span className=\"font-['Sora'] font-bold text-xl text-white\">CONNECTED X: @{userTwitterHandle}</span>\n                      {userProfile?.verified && <span className=\"ml-2 text-white\">✓</span>}\n                    </div>\n                    <p className=\"mt-2 text-white font-['Outfit'] text-sm\">\n                      YOUR SUBMISSION MUST COME FROM THIS X ACCOUNT\n                    </p>\n                  </div>\n                  <div>\n                    <label className=\"block text-[var(--ink)] font-['Outfit'] text-xl mb-2\">STREAM SUBMISSION TITLE</label>\n                    <input type=\"text\" value={submissionData.title} onChange={e => setSubmissionData({\n                ...submissionData,\n                title: e.target.value\n              })} className=\"w-full cyber-input\" required />\n                  </div>\n                <div>\n                    <label className=\"block text-[var(--ink)] font-['Outfit'] text-xl mb-2\">X.COM TWEET URL</label>\n                    <input type=\"url\" value={submissionData.tweetUrl} onChange={handleTweetUrlChange} className=\"w-full cyber-input\" placeholder=\"https://x.com/username/status/123456789\" required />\n                    <p className=\"mt-1 text-[var(--sub)] font-['Outfit'] text-sm\">PASTE THE URL OF YOUR TWEET FROM YOUR PUMP.FUN STREAM</p>\n                  </div>\n                  {showTweetPreview && tweetId && <div className=\"cyber-card p-4\">\n                      <div className=\"flex items-center mb-3\">\n                        <Twitter size={16} className=\"mr-2 text-[var(--ink)]\" />\n                        <span className=\"text-[var(--ink)] font-['Sora'] font-bold text-xl\">TWEET VERIFIED</span>\n                      </div>\n                      <div className=\"text-[var(--glass-ink)] font-['Outfit'] mb-2\">\n                        Tweet ID: {tweetId}\n                      </div>\n                      {extractTwitterHandle(submissionData.tweetUrl) && <div className=\"flex items-center\">\n                          <span className=\"text-[var(--glass-ink)] font-['Outfit'] mr-2\">Tweet by:</span>\n                          <span className={`font-['Outfit'] text-lg ${extractTwitterHandle(submissionData.tweetUrl).toLowerCase() === userTwitterHandle.toLowerCase() ? 'text-[var(--ok)]' : 'text-[var(--danger)]'}`}>\n                            @{extractTwitterHandle(submissionData.tweetUrl)}\n                            {extractTwitterHandle(submissionData.tweetUrl).toLowerCase() === userTwitterHandle.toLowerCase() ? ' ✓ MATCHES YOUR ACCOUNT' : ' ✗ DOES NOT MATCH YOUR ACCOUNT'}\n                          </span>\n                        </div>}\n                    </div>}\n                <div>\n                    <label className=\"block text-[var(--ink)] font-['Outfit'] text-xl mb-2\">IMAGE URL (OPTIONAL)</label>\n                    <input type=\"url\" value={submissionData.imageUrl} onChange={e => setSubmissionData({\n                ...submissionData,\n                imageUrl: e.target.value\n              })} className=\"w-full cyber-input\" placeholder=\"https://example.com/image.jpg\" />\n                  </div>\n                  <div className=\"flex justify-end space-x-4 pt-4\">\n                    <motion.button type=\"button\" onClick={() => setCurrentView('bounty')} className=\"px-6 py-3 cyber-button text-[var(--ink)] font-['Sora'] text-xl\" variants={pixelButtonVariants} initial=\"rest\" whileHover=\"hover\" whileTap=\"tap\">\n                      CANCEL\n                    </motion.button>\n                    <motion.button type=\"submit\" className=\"cyber-button-primary px-6 py-3 font-['Sora'] text-xl\" variants={pixelButtonVariants} initial=\"rest\" whileHover=\"hover\" whileTap=\"tap\">\n                      SUBMIT STREAM\n                    </motion.button>\n                  </div>\n                </form>}\n            </motion.div>}\n          {currentView === 'profile' && <motion.div key=\"profile\" initial={{\n          opacity: 0,\n          y: 10\n        }} animate={{\n          opacity: 1,\n          y: 0\n        }} exit={{\n          opacity: 0,\n          y: -10\n        }} transition={{\n          duration: 0.3\n        }} className=\"space-y-8\">\n              <div className=\"flex items-center\">\n                <h2 className=\"text-2xl sm:text-3xl md:text-4xl display-title text-[var(--ink)] mb-6\">YOUR PROFILE</h2>\n                <motion.button onClick={refreshData} className=\"ml-3 cyber-button p-2 flex items-center justify-center mb-6\" whileHover={{\n              scale: 1.05\n            }} whileTap={{\n              scale: 0.95\n            }} title=\"Refresh data\">\n                  <RefreshCw size={18} className={isRefreshing ? \"animate-spin text-white\" : \"text-white\"} />\n                </motion.button>\n              </div>\n              {!userWallet ? <div className=\"text-center py-12 cyber-card\">\n                  <p className=\"text-xl font-['Outfit'] text-[var(--ink)] mb-4\">CONNECT YOUR WALLET TO VIEW YOUR PROFILE</p>\n                  <UserButton className=\"cyber-button-primary px-6 py-3 font-['Sora']\" />\n                </div> : <>\n                  <div className=\"cyber-card p-8\">\n                    <div className=\"flex items-center mb-6\">\n                      <div className=\"w-16 h-16 cyber-card flex items-center justify-center text-2xl font-['Sora'] font-bold text-[var(--ink)]\" style={{\n                  background: 'var(--yellow)'\n                }}>\n                        {userWallet.substring(0, 1)}\n                      </div>\n                      <div className=\"ml-4\">\n                        <h3 className=\"text-xl font-['Sora'] font-semibold text-[var(--ink)]\">\n                          {userWallet.substring(0, 6)}...{userWallet.substring(userWallet.length - 4)}\n                        </h3>\n                        <p className=\"text-[var(--sub)] font-['Outfit']\">PLAYER</p>\n                      </div>\n                    </div>\n                    {}\n                    <div className=\"mb-6 cyber-card p-6\">\n                      <h3 className=\"text-lg sm:text-xl pixel-title text-[var(--ink)] mb-4\">X ACCOUNT CONNECTION</h3>\n                      {userTwitterHandle ? <div className=\"flex items-start space-x-4\">\n                          <div className=\"cyber-card p-3 flex items-center\" style={{\n                    background: 'var(--ok)'\n                  }}>\n                            <Check size={20} className=\"text-white mr-2\" />\n                            <span className=\"font-['Sora'] font-semibold text-white\">CONNECTED</span>\n                          </div>\n                          <div className=\"flex-1\">\n                            <div className=\"flex items-center mb-3\">\n                              {userProfileImageUrl ? <img src={userProfileImageUrl} alt=\"Profile\" className=\"w-12 h-12 rounded-full border-2 border-[var(--ink)] mr-3\" style={{\n                        imageRendering: 'pixelated'\n                      }} /> : <div className=\"w-12 h-12 cyber-card flex items-center justify-center mr-3\" style={{\n                        background: 'var(--yellow)'\n                      }}>\n                                  <Twitter size={24} className=\"text-[var(--ink)]\" />\n                                </div>}\n                              <div>\n                                <div className=\"flex items-center\">\n                                  <Twitter size={20} className=\"text-[var(--ink)] mr-2\" />\n                                  <span className=\"font-['Outfit'] text-lg text-[var(--ink)]\">@{userTwitterHandle}</span>\n                                  {userProfile?.verified && <span className=\"ml-2 text-blue-500\">✓</span>}\n                                </div>\n                                {userProfile?.profileImageUrl && <p className=\"text-[var(--sub)] font-['Outfit'] text-sm\">Profile image synced</p>}\n                              </div>\n                            </div>\n                            <p className=\"mt-2 text-[var(--sub)] font-['Outfit']\">YOUR X ACCOUNT IS CONNECTED FOR STREAM SUBMISSIONS</p>\n                            <motion.button onClick={connectXAccount} className=\"mt-3 cyber-button px-4 py-2 font-['Sora'] flex items-center\" variants={pixelButtonVariants} initial=\"rest\" whileHover=\"hover\" whileTap=\"tap\">\n                              <Twitter size={16} className=\"mr-2\" />\n                              RECONNECT X\n                            </motion.button>\n                          </div>\n                        </div> : <div className=\"space-y-4\">\n                          <p className=\"text-[var(--ink)] font-['Outfit'] text-lg mb-4\">\n                            Connect your X account to submit stream content and participate in challenges\n                          </p>\n                          <motion.button onClick={connectXAccount} className=\"cyber-button-primary px-6 py-4 font-['Sora'] w-full flex items-center justify-center text-xl\" variants={pixelButtonVariants} initial=\"rest\" whileHover=\"hover\" whileTap=\"tap\">\n                            <Twitter size={24} className=\"mr-3\" />\n                            CONNECT X ACCOUNT\n                          </motion.button>\n                  <div className=\"cyber-card p-3\" style={{\n                    background: 'var(--yellow)'\n                  }}>\n                            <div className=\"flex items-start\">\n                              <AlertCircle size={20} className=\"text-black mr-2 mt-1 flex-shrink-0\" />\n                              <div>\n                                <p className=\"text-black font-['Outfit'] mb-2\">\n                                  Connect your X account to submit stream content and prove ownership of your submissions.\n                                </p>\n                                <p className=\"text-black font-['Outfit'] text-sm\">\n                                  Click the button above and complete the OAuth login process. You'll be redirected back here automatically.\n                                </p>\n                              </div>\n                            </div>\n                          </div>\n                        </div>}\n                    </div>\n                    <div className=\"grid grid-cols-1 md:grid-cols-3 gap-4 mb-6\">\n                      <div className=\"cyber-card p-4\">\n                        <p className=\"text-[var(--sub)] font-['Outfit'] text-sm mb-1\">MY CHALLENGES</p>\n                        <p className=\"text-2xl font-['Sora'] font-bold text-[var(--ink)]\">\n                          {bounties.filter(b => b.creator === userWallet).length}\n                        </p>\n                      </div>\n                      <div className=\"cyber-card p-4\">\n                        <p className=\"text-[var(--sub)] font-['Outfit'] text-sm mb-1\">MY STREAMS</p>\n                        <p className=\"text-2xl font-['Sora'] font-bold text-[var(--ink)]\">\n                          {submissions.filter(s => s.userId === userWallet).length}\n                        </p>\n                      </div>\n                      <div className=\"cyber-card p-4\">\n                        <p className=\"text-[var(--sub)] font-['Outfit'] text-sm mb-1\">XP / LEVEL</p>\n                        <p className=\"text-2xl font-['Sora'] font-bold text-[var(--ink)]\">\n                          {userXP} / {userLevel}\n                        </p>\n                      </div>\n                    </div>\n                  </div>\n                  {}\n                  <div className=\"mb-6 cyber-card p-6\">\n                    <h3 className=\"text-lg sm:text-xl pixel-title text-[var(--ink)] mb-4\">ACHIEVEMENTS</h3>\n                    <div className=\"grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-3\">\n                      {achievementsList.map(achievement => {\n                  const hasAchievement = achievements.some(a => a.achievementId === achievement.id);\n                  return <div key={achievement.id} className={`cyber-card p-3 ${hasAchievement ? '' : 'opacity-50'}`} style={{\n                    background: hasAchievement ? 'var(--ok)' : 'var(--sub)'\n                  }}>\n                            <div className=\"flex items-center mb-2\">\n                              <span className=\"text-2xl mr-2\">{achievement.icon}</span>\n                              <div>\n                                <div className={`font-['Outfit'] text-sm font-semibold ${hasAchievement ? 'text-white' : 'text-gray-300'}`}>\n                                  {achievement.name}\n                                </div>\n                                <div className={`text-xs ${hasAchievement ? 'text-white' : 'text-gray-300'}`}>\n                                  +{achievement.xp} XP\n                                </div>\n                              </div>\n                            </div>\n                            <p className={`text-xs ${hasAchievement ? 'text-white' : 'text-gray-300'}`}>\n                              {achievement.description}\n                            </p>\n                          </div>;\n                })}\n                    </div>\n                  </div>\n                  {}\n                  {(() => {\n              const unclaimedWinningBounties = bounties.filter(bounty => {\n                const winningSubmission = submissions.find(s => s.id === bounty.winner);\n                return winningSubmission && winningSubmission.userId === userWallet && !bounty.claimed && claimedBounties[bounty.id] !== 'claimed';\n              });\n              if (unclaimedWinningBounties.length > 0) {\n                return <div className=\"cyber-card p-6 mb-6 animate-pulse\" style={{\n                  background: 'var(--yellow)',\n                  boxShadow: 'var(--glow-yellow)'\n                }}>\n                                <div className=\"flex items-center mb-4\">\n                                  <Trophy size={28} className=\"text-black mr-3\" />\n                                  <h3 className=\"text-xl font-['Sora'] font-bold text-black\">UNCLAIMED PRIZES! 🏆</h3>\n                                </div>\n                                <p className=\"text-black font-['Outfit'] text-lg mb-4\">\n                                  You have {unclaimedWinningBounties.length} unclaimed winning{unclaimedWinningBounties.length > 1 ? 's' : ''}!\n                                </p>\n                                <div className=\"space-y-4\">\n                                  {unclaimedWinningBounties.map(bounty => {\n                      const winningSubmission = submissions.find(s => s.id === bounty.winner);\n                      return <div key={bounty.id} className=\"cyber-card p-4\">\n                                        <div className=\"flex flex-col sm:flex-row justify-between items-start gap-3\">\n                                          <div>\n                                            <h4 className=\"text-lg font-['Sora'] font-bold text-black mb-2\">{bounty.title}</h4>\n                                            <p className=\"text-black font-['Outfit'] mb-2\">\n                                              Prize: {bounty.amount} SOL\n                                            </p>\n                                            <p className=\"text-black font-['Outfit'] text-sm\">\n                                              Winning Stream: {winningSubmission?.title}\n                                            </p>\n                                          </div>\n                                          <div className=\"flex flex-col gap-2\">\n                                            {pendingClaims.has(bounty.id) ? <div className=\"cyber-button px-4 py-2 font-['Sora'] flex items-center\">\n                                                <span className=\"mr-2\">PENDING</span>\n                                                <div className=\"animate-spin h-4 w-4 border-2 border-white border-t-transparent rounded-full\"></div>\n                                              </div> : failedClaims[bounty.id] === 'failed' && isMakeMeBuyZalaBounty(bounty) ? <motion.button onClick={() => retryClaimReward(bounty.winner, bounty.id)} className=\"cyber-button-primary px-4 py-2 font-['Sora'] animate-pulse\" variants={pixelButtonVariants} initial=\"rest\" whileHover=\"hover\" whileTap=\"tap\">\n                                                RETRY CLAIM\n                                              </motion.button> : <motion.button onClick={() => claimReward(bounty.winner, bounty.id)} className=\"cyber-button-primary px-4 py-2 font-['Sora'] animate-pulse\" variants={pixelButtonVariants} initial=\"rest\" whileHover=\"hover\" whileTap=\"tap\">\n                                                CLAIM {bounty.amount} SOL\n                                              </motion.button>}\n                                          </div>\n                                        </div>\n                                      </div>;\n                    })}\n                                </div>\n                              </div>;\n              }\n              return null;\n            })()}\n                  <div className=\"space-y-6\">\n                    <h3 className=\"text-xl sm:text-2xl pixel-title text-[var(--ink)] mb-4\">MY STREAM SUBMISSIONS</h3>\n                    {userSubmissions.length === 0 ? <div className=\"text-center py-12 cyber-card\">\n                        <p className=\"text-xl font-['Outfit'] text-[var(--ink)]\">You haven't submitted any stream content yet.</p>\n                      </div> : userSubmissions.map(submission => {\n                const bounty = bounties.find(b => b.id === submission.bountyId);\n                return <div key={submission.id} className=\"cyber-card p-6\">\n                            <div className=\"flex justify-between items-start\">\n                              <div>\n                                <h4 className=\"text-xl font-['Sora'] font-bold text-[var(--ink)] mb-2\">{submission.title}</h4>\n                                <p className=\"text-[var(--glass-ink)] font-['Outfit'] mb-2\">\n                                  For challenge: {bounty ? bounty.title : 'Unknown'}\n                                </p>\n                              </div>\n                              <motion.button onClick={() => deleteSubmission(submission.id)} className=\"cyber-button p-2\" style={{\n                      background: 'var(--danger)'\n                    }} variants={pixelButtonVariants} initial=\"rest\" whileHover=\"hover\" whileTap=\"tap\">\n                                <Trash2 size={16} className=\"text-white\" />\n                              </motion.button>\n                            </div>\n                            <div className=\"cyber-card p-4 mb-4\">\n                              <div className=\"flex flex-col space-y-2\">\n                                <div className=\"flex items-center\">\n                                  <Twitter size={16} className=\"mr-2 text-[var(--ink)]\" />\n                                  <a href={submission.tweetUrl} target=\"_blank\" rel=\"noopener noreferrer\" className=\"text-[var(--ink)] hover:text-[var(--yellow)] overflow-hidden overflow-ellipsis font-['Outfit'] text-lg\">\n                                    {submission.tweetUrl}\n                                  </a>\n                                </div>\n                                {submission.twitterHandle && <div className=\"flex items-center\">\n                                  <ExternalLink size={14} className=\"mr-2 text-[var(--ink)]\" />\n                                  <span className=\"text-[var(--ink)] font-['Outfit'] text-lg\">\n                                    X: @{submission.twitterHandle}\n                                    {submission.userId === userWallet && userTwitterHandle && userTwitterHandle.toLowerCase() === submission.twitterHandle.toLowerCase() && \" ✓ CONNECTED\"}\n                                  </span>\n                                </div>}\n                              </div>\n                              {submission.imageUrl && <img src={submission.imageUrl} alt={submission.title} className=\"w-full h-48 object-cover rounded-lg mt-2\" style={{\n                      imageRendering: 'pixelated'\n                    }} />}\n                            </div>\n                            <div className=\"flex items-center space-x-4\">\n                              <div className=\"flex items-center text-[var(--ink)] font-['Outfit'] text-lg\">\n                                <ThumbsUp size={16} className=\"mr-1\" />\n                                <span>{getSubmissionVoteCount(submission.id)} UPVOTES</span>\n                              </div>\n                    {bounty && bounty.winner === submission.id && (bounty.claimed || claimedBounties[bounty.id] === 'claimed' ? <div className=\"bg-[#6c5ce7] text-[#0a3d62] px-3 py-1 font-['VT323'] text-lg border-[2px] border-black shadow-[2px_2px_0_rgba(0,0,0,0.8)]\">\n                  ALREADY CLAIMED\n                </div> : pendingClaims.has(bounty.id) ? <div className=\"bg-[#33e6ff] text-[#0a3d62] px-3 py-1 font-['VT323'] text-lg border-[2px] border-black shadow-[2px_2px_0_rgba(0,0,0,0.8)] flex items-center\">\n                  <span className=\"mr-2\">PENDING</span>\n                  <div className=\"animate-spin h-4 w-4 border-2 border-[#0a3d62] border-t-transparent rounded-full\"></div>\n                </div> : failedClaims[bounty.id] === 'failed' && isMakeMeBuyZalaBounty(bounty) ? <motion.button onClick={() => retryClaimReward(submission.id, bounty.id)} className=\"bg-[#ffde00] text-[#0a3d62] px-3 py-1 font-['VT323'] text-lg border-[2px] border-black shadow-[2px_2px_0_rgba(0,0,0,0.8)] animate-pulse\" variants={pixelButtonVariants} initial=\"rest\" whileHover=\"hover\" whileTap=\"tap\">\n                  RETRY CLAIM\n                </motion.button> : <motion.button onClick={() => claimReward(submission.id, bounty.id)} className=\"bg-[#ff69b4] text-[#0a3d62] px-3 py-1 font-['VT323'] text-lg border-[2px] border-black shadow-[2px_2px_0_rgba(0,0,0,0.8)] animate-pulse\" variants={pixelButtonVariants} initial=\"rest\" whileHover=\"hover\" whileTap=\"tap\">\n                                  CLAIM {bounty.amount} SOL\n                                </motion.button>)}\n                              {getSubmissionVoteCount(submission.id) >= 50 && (submission.claimed ? <div className=\"bg-[#6c5ce7] text-[#0a3d62] px-3 py-1 font-['VT323'] text-lg border-[2px] border-black shadow-[2px_2px_0_rgba(0,0,0,0.8)]\">\n                                    ALREADY CLAIMED\n                                  </div> : <motion.button onClick={() => claimZala(submission.id)} className=\"bg-[#ff69b4] text-[#0a3d62] px-3 py-1 font-['VT323'] text-lg border-[2px] border-black shadow-[2px_2px_0_rgba(0,0,0,0.8)]\" variants={pixelButtonVariants} initial=\"rest\" whileHover=\"hover\" whileTap=\"tap\">\n                                    CLAIM 0.1 SOL BONUS\n                                  </motion.button>)}\n                            </div>\n                          </div>;\n              })}\n                  </div>\n                </>}\n            </motion.div>}\n          {currentView === 'leaderboard' && <motion.div key=\"leaderboard\" initial={{\n          opacity: 0,\n          y: 10\n        }} animate={{\n          opacity: 1,\n          y: 0\n        }} exit={{\n          opacity: 0,\n          y: -10\n        }} transition={{\n          duration: 0.3\n        }} className=\"space-y-8\">\n              <div className=\"flex items-center\">\n                <h2 className=\"text-2xl sm:text-3xl md:text-4xl display-title text-[var(--ink)] mb-6\">LEADERBOARD</h2>\n                <motion.button onClick={refreshData} className=\"ml-3 cyber-button p-2 flex items-center justify-center mb-6\" whileHover={{\n              scale: 1.05\n            }} whileTap={{\n              scale: 0.95\n            }} title=\"Refresh data\">\n                  <RefreshCw size={18} className={isRefreshing ? \"animate-spin text-white\" : \"text-white\"} />\n                </motion.button>\n              </div>\n              <div className=\"grid grid-cols-1 lg:grid-cols-3 gap-6\">\n                {}\n                <div className=\"cyber-card p-6\">\n                  <h3 className=\"text-base sm:text-lg pixel-title text-[var(--ink)] mb-4 flex items-center\">\n                    <Trophy size={20} className=\"mr-2 text-[var(--yellow)]\" />\n                    TOP CREATORS\n                  </h3>\n                  <div className=\"space-y-3\">\n                    {leaderboardData.topCreators.length === 0 ? <p className=\"text-[var(--sub)] font-['Outfit']\">No creators yet</p> : leaderboardData.topCreators.map((creator, index) => <div key={creator.userId} className={`cyber-card p-3 ${index === 0 ? 'bg-[#FFD700]' : index === 1 ? 'bg-[#C0C0C0]' : index === 2 ? 'bg-[#CD7F32]' : ''}`}>\n                          <div className=\"flex items-center justify-between\">\n                            <div className=\"flex items-center\">\n                              <span className=\"font-['Sora'] font-bold text-lg mr-2\">#{index + 1}</span>\n                              <div>\n                                <p className=\"font-['Outfit'] text-sm\">\n                                  {creator.userId === userWallet ? 'YOU' : `${creator.userId.substring(0, 6)}...${creator.userId.substring(creator.userId.length - 4)}`}\n                                </p>\n                                <p className=\"text-xs text-[var(--sub)]\">{creator.count} challenges</p>\n                              </div>\n                            </div>\n                            <div className=\"text-right\">\n                              <p className=\"font-['Sora'] font-bold text-[var(--ink)]\">{creator.totalReward} SOL</p>\n                            </div>\n                          </div>\n                        </div>)}\n                  </div>\n                </div>\n                {}\n                <div className=\"cyber-card p-6\">\n                  <h3 className=\"text-base sm:text-lg pixel-title text-[var(--ink)] mb-4 flex items-center\">\n                    <Award size={20} className=\"mr-2 text-[var(--ok)]\" />\n                    TOP STREAMERS\n                  </h3>\n                  <div className=\"space-y-3\">\n                    {leaderboardData.topStreamers.length === 0 ? <p className=\"text-[var(--sub)] font-['Outfit']\">No streamers yet</p> : leaderboardData.topStreamers.map((streamer, index) => <div key={streamer.userId} className={`cyber-card p-3 ${index === 0 ? 'bg-[#FFD700]' : index === 1 ? 'bg-[#C0C0C0]' : index === 2 ? 'bg-[#CD7F32]' : ''}`}>\n                          <div className=\"flex items-center justify-between\">\n                            <div className=\"flex items-center\">\n                              <span className=\"font-['Sora'] font-bold text-lg mr-2\">#{index + 1}</span>\n                              <div>\n                                <p className=\"font-['Outfit'] text-sm\">\n                                  {streamer.userId === userWallet ? 'YOU' : streamer.twitterHandle ? `@${streamer.twitterHandle}` : `${streamer.userId.substring(0, 6)}...${streamer.userId.substring(streamer.userId.length - 4)}`}\n                                </p>\n                                <p className=\"text-xs text-[var(--sub)]\">{streamer.submissions} streams • {streamer.wins} wins</p>\n                              </div>\n                            </div>\n                            <div className=\"text-right\">\n                              <p className=\"font-['Sora'] font-bold text-[var(--ink)]\">{streamer.totalVotes} votes</p>\n                            </div>\n                          </div>\n                        </div>)}\n                  </div>\n                </div>\n                {}\n                <div className=\"cyber-card p-6\">\n                  <h3 className=\"text-base sm:text-lg pixel-title text-[var(--ink)] mb-4 flex items-center\">\n                    <ThumbsUp size={20} className=\"mr-2 text-[var(--neon-blue)]\" />\n                    TOP SUPPORTERS\n                  </h3>\n                  <div className=\"space-y-3\">\n                    {leaderboardData.topSupporters.length === 0 ? <p className=\"text-[var(--sub)] font-['Outfit']\">No supporters yet</p> : leaderboardData.topSupporters.map((supporter, index) => <div key={supporter.userId} className={`cyber-card p-3 ${index === 0 ? 'bg-[#FFD700]' : index === 1 ? 'bg-[#C0C0C0]' : index === 2 ? 'bg-[#CD7F32]' : ''}`}>\n                          <div className=\"flex items-center justify-between\">\n                            <div className=\"flex items-center\">\n                              <span className=\"font-['Sora'] font-bold text-lg mr-2\">#{index + 1}</span>\n                              <div>\n                                <p className=\"font-['Outfit'] text-sm\">\n                                  {supporter.userId === userWallet ? 'YOU' : `${supporter.userId.substring(0, 6)}...${supporter.userId.substring(supporter.userId.length - 4)}`}\n                                </p>\n                                <p className=\"text-xs text-[var(--sub)]\">Community supporter</p>\n                              </div>\n                            </div>\n                            <div className=\"text-right\">\n                              <p className=\"font-['Sora'] font-bold text-[var(--ink)]\">{supporter.votesCast} votes</p>\n                            </div>\n                          </div>\n                        </div>)}\n                  </div>\n                </div>\n              </div>\n              {}\n              {userWallet && <div className=\"cyber-card p-6\" style={{\n            background: 'var(--yellow)'\n          }}>\n                  <h3 className=\"text-lg sm:text-xl pixel-title text-black mb-4\">YOUR STATS</h3>\n                  <div className=\"grid grid-cols-1 sm:grid-cols-4 gap-4\">\n                    <div className=\"cyber-card p-3\">\n                      <p className=\"text-[var(--sub)] font-['Outfit'] text-sm\">XP / LEVEL</p>\n                      <p className=\"text-2xl font-['Sora'] font-bold text-black\">{userXP} / {userLevel}</p>\n                    </div>\n                    <div className=\"cyber-card p-3\">\n                      <p className=\"text-[var(--sub)] font-['Outfit'] text-sm\">LOGIN STREAK</p>\n                      <p className=\"text-2xl font-['Sora'] font-bold text-black\">{loginStreak} days</p>\n                    </div>\n                    <div className=\"cyber-card p-3\">\n                      <p className=\"text-[var(--sub)] font-['Outfit'] text-sm\">CHALLENGES CREATED</p>\n                      <p className=\"text-2xl font-['Sora'] font-bold text-black\">\n                        {bounties.filter(b => b.creator === userWallet).length}\n                      </p>\n                    </div>\n                    <div className=\"cyber-card p-3\">\n                      <p className=\"text-[var(--sub)] font-['Outfit'] text-sm\">VOTES CAST</p>\n                      <p className=\"text-2xl font-['Sora'] font-bold text-black\">\n                        {votes.filter(v => v.userId === userWallet).length}\n                      </p>\n                    </div>\n                  </div>\n                </div>}\n            </motion.div>}\n          {currentView === 'admin' && isAdmin && <motion.div key=\"admin\" initial={{\n          opacity: 0,\n          y: 10\n        }} animate={{\n          opacity: 1,\n          y: 0\n        }} exit={{\n          opacity: 0,\n          y: -10\n        }} transition={{\n          duration: 0.3\n        }} className=\"space-y-8\">\n              <h2 className=\"text-3xl font-['Press_Start_2P'] text-[#0a3d62] mb-6\">ADMIN DASHBOARD</h2>\n              <div className=\"grid grid-cols-1 md:grid-cols-2 gap-6\">\n                <div className=\"bg-[#33e6ff] p-6 border-[3px] border-black shadow-[5px_5px_0_rgba(0,0,0,0.8)]\">\n                  <h3 className=\"text-xl font-['Press_Start_2P'] text-[#0a3d62] mb-4\">PLATFORM STATS</h3>\n                  <div className=\"grid grid-cols-2 gap-4 mb-6\">\n                    <div className=\"bg-white p-4 border-[2px] border-black shadow-[2px_2px_0_rgba(0,0,0,0.8)]\">\n                      <p className=\"text-[#0a3d62] font-['VT323'] text-sm mb-1\">TOTAL CHALLENGES</p>\n                      <p className=\"text-2xl font-['Press_Start_2P'] text-[#0a3d62]\">{bounties.length}</p>\n                    </div>\n                    <div className=\"bg-white p-4 border-[2px] border-black shadow-[2px_2px_0_rgba(0,0,0,0.8)]\">\n                      <p className=\"text-[#0a3d62] font-['VT323'] text-sm mb-1\">TOTAL STREAMS</p>\n                      <p className=\"text-2xl font-['Press_Start_2P'] text-[#0a3d62]\">{submissions.length}</p>\n                    </div>\n                    <div className=\"bg-white p-4 border-[2px] border-black shadow-[2px_2px_0_rgba(0,0,0,0.8)]\">\n                      <p className=\"text-[#0a3d62] font-['VT323'] text-sm mb-1\">COMPLETED CHALLENGES</p>\n                      <p className=\"text-2xl font-['Press_Start_2P'] text-[#0a3d62]\">\n                        {bounties.filter(b => b.winner).length}\n                      </p>\n                    </div>\n                    <div className=\"bg-white p-4 border-[2px] border-black shadow-[2px_2px_0_rgba(0,0,0,0.8)]\">\n                      <p className=\"text-[#0a3d62] font-['VT323'] text-sm mb-1\">TOTAL SOL PAID</p>\n                      <p className=\"text-2xl font-['Press_Start_2P'] text-[#0a3d62]\">\n                        {bounties.filter(b => b.claimed).reduce((total, b) => total + b.amount, 0)}\n                      </p>\n                    </div>\n                  </div>\n                </div>\n                <div className=\"bg-[#33e6ff] p-6 border-[3px] border-black shadow-[5px_5px_0_rgba(0,0,0,0.8)]\">\n                  <h3 className=\"text-xl font-['Press_Start_2P'] text-[#0a3d62] mb-4\">SOL BONUS CLAIMS</h3>\n                  <div className=\"grid grid-cols-2 gap-4 mb-6\">\n                    <div className=\"bg-white p-4 border-[2px] border-black shadow-[2px_2px_0_rgba(0,0,0,0.8)]\">\n                      <p className=\"text-[#0a3d62] font-['VT323'] text-sm mb-1\">VIRAL STREAMS</p>\n                      <p className=\"text-2xl font-['Press_Start_2P'] text-[#0a3d62]\">\n                        {submissions.filter(s => getSubmissionVoteCount(s.id) >= 50).length}\n                      </p>\n                    </div>\n                    <div className=\"bg-white p-4 border-[2px] border-black shadow-[2px_2px_0_rgba(0,0,0,0.8)]\">\n                      <p className=\"text-[#0a3d62] font-['VT323'] text-sm mb-1\">BONUS SOL CLAIMED</p>\n                      <p className=\"text-2xl font-['Press_Start_2P'] text-[#0a3d62]\">\n                        {submissions.filter(s => s.claimed).length * 0.1}\n                      </p>\n                    </div>\n                  </div>\n                </div>\n              </div>\n              <div className=\"bg-[#33e6ff] p-6 border-[3px] border-black shadow-[5px_5px_0_rgba(0,0,0,0.8)] mb-8\">\n                <h3 className=\"text-xl font-['Press_Start_2P'] text-[#0a3d62] mb-4\">RECENT ACTIVITY</h3>\n                <div className=\"space-y-4\">\n                  {[...submissions].sort((a, b) => b.createdAt - a.createdAt).slice(0, 5).map(submission => {\n                const bounty = bounties.find(b => b.id === submission.bountyId);\n                return <div key={submission.id} className=\"flex items-start space-x-4 p-3 bg-white border-[2px] border-black shadow-[2px_2px_0_rgba(0,0,0,0.8)]\">\n                        <div className=\"w-8 h-8 bg-[#ff69b4] border-[2px] border-black flex items-center justify-center text-xs font-bold text-[#0a3d62]\">\n                          {submission.userId.substring(0, 1)}\n                        </div>\n                        <div>\n                    <p className=\"text-[#0a3d62] font-['VT323'] text-lg\">\n                      <span className=\"font-bold\">{submission.userId.substring(0, 6)}...</span> submitted \n                      <span className=\"font-bold\"> {submission.title}</span> for challenge \n                      <span className=\"font-bold\"> {bounty ? bounty.title : 'Unknown'}</span>\n                    </p>\n                          <p className=\"text-[#0a3d62] font-['Courier_New'] text-sm\">\n                            {new Date(submission.createdAt).toLocaleString()}\n                          </p>\n                        </div>\n                      </div>;\n              })}\n                </div>\n              </div>\n              <div className=\"bg-[#33e6ff] p-6 border-[3px] border-black shadow-[5px_5px_0_rgba(0,0,0,0.8)]\">\n                <h3 className=\"text-xl font-['Press_Start_2P'] text-[#0a3d62] mb-4\">CLAIMED CHALLENGES</h3>\n                <div className=\"space-y-4\">\n                  {bounties.filter(b => b.claimed).length === 0 ? <div className=\"text-center py-8 bg-white border-[2px] border-black shadow-[2px_2px_0_rgba(0,0,0,0.8)]\">\n                      <p className=\"text-lg font-['VT323'] text-[#0a3d62]\">NO CHALLENGES HAVE BEEN CLAIMED YET</p>\n                    </div> : <div className=\"overflow-auto\">\n                      <table className=\"w-full border-collapse\">\n                        <thead>\n                          <tr className=\"bg-[#ffde00] border-[2px] border-black\">\n                            <th className=\"p-2 text-left font-['VT323'] text-[#0a3d62] text-lg\">CHALLENGE</th>\n                            <th className=\"p-2 text-left font-['VT323'] text-[#0a3d62] text-lg\">WINNER</th>\n                            <th className=\"p-2 text-left font-['VT323'] text-[#0a3d62] text-lg\">AMOUNT</th>\n                            <th className=\"p-2 text-left font-['VT323'] text-[#0a3d62] text-lg\">ACTIONS</th>\n                          </tr>\n                        </thead>\n                        <tbody>\n                          {bounties.filter(b => b.claimed).sort((a, b) => {\n                      const aSubmission = submissions.find(s => s.id === a.winner);\n                      const bSubmission = submissions.find(s => s.id === b.winner);\n                      return (bSubmission?.updatedAt || 0) - (aSubmission?.updatedAt || 0);\n                    }).map(bounty => {\n                      const winningSubmission = submissions.find(s => s.id === bounty.winner);\n                      return <tr key={bounty.id} className=\"border-b-[2px] border-black hover:bg-[#33e6ff]/20\">\n                                <td className=\"p-3 bg-white border-l-[2px] border-black\">\n                                  <p className=\"font-['VT323'] text-[#0a3d62] text-lg font-bold\">{bounty.title}</p>\n                                  <p className=\"text-xs text-[#0a3d62]\">Created by: {bounty.creator.substring(0, 6)}...{bounty.creator.substring(bounty.creator.length - 4)}</p>\n                                </td>\n                                <td className=\"p-3 bg-white border-l-[2px] border-black\">\n                                  <p className=\"font-['VT323'] text-[#0a3d62]\">\n                                    {winningSubmission ? `${winningSubmission.userId.substring(0, 6)}...${winningSubmission.userId.substring(winningSubmission.userId.length - 4)}` : 'Unknown'}\n                                  </p>\n                                  {winningSubmission?.twitterHandle && <p className=\"text-xs text-[#0a3d62]\">@{winningSubmission.twitterHandle}</p>}\n                                </td>\n                                <td className=\"p-3 bg-white border-l-[2px] border-black\">\n                                  <div className=\"font-['VT323'] text-lg text-[#0a3d62] font-bold\">{bounty.amount} SOL</div>\n                                </td>\n                                <td className=\"p-3 bg-white border-l-[2px] border-r-[2px] border-black\">\n                                  <motion.button onClick={() => resetBountyClaim(bounty.id, bounty.winner)} className=\"bg-[#ff3b30] text-[#0a3d62] px-3 py-1 font-['VT323'] text-base border-[2px] border-black shadow-[2px_2px_0_rgba(0,0,0,0.8)] flex items-center\" variants={pixelButtonVariants} initial=\"rest\" whileHover=\"hover\" whileTap=\"tap\">\n                                    <RefreshCw size={16} className=\"mr-1\" />\n                                    RESET CLAIM\n                                  </motion.button>\n                                </td>\n                              </tr>;\n                    })}\n                        </tbody>\n                      </table>\n                    </div>}\n                </div>\n              </div>\n            </motion.div>}\n        </AnimatePresence>\n      </main>\n      {}\n      <div className={`fixed bottom-0 left-0 right-0 overflow-hidden z-20 transition-opacity duration-300 ${scrollDirection === 'up' ? 'opacity-30' : 'opacity-100'} cyber-card mx-1 sm:mx-4 mb-1 sm:mb-4 rounded-b-lg`} style={{\n      background: 'var(--yellow)'\n    }}>\n      <div className=\"flex items-center py-1 sm:py-2 px-2 sm:px-4\">\n          <div className=\"flex items-center mr-2 sm:mr-4 flex-shrink-0\">\n            <div className=\"w-2 sm:w-3 h-2 sm:h-3 bg-[var(--danger)] rounded-full animate-pulse mr-1 sm:mr-2\"></div>\n            <span className=\"font-['Sora'] text-xs sm:text-sm text-black\">TRENDING</span>\n            <span className=\"font-['Outfit'] text-xs text-black ml-1 sm:ml-2\">(CLICK TO SEARCH)</span>\n          </div>\n        {trendingLoading ? <div className=\"flex items-center\">\n              <div className=\"animate-spin h-3 w-3 sm:h-4 sm:w-4 border-2 border-[var(--ink)] border-t-transparent rounded-full mr-1 sm:mr-2\"></div>\n              <span className=\"font-['Outfit'] text-sm sm:text-lg text-black\">Loading...</span>\n            </div> : trendingTokens.length === 0 ? <span className=\"font-['Outfit'] text-sm sm:text-lg text-black\">No trending tokens</span> : <div className=\"overflow-hidden flex-1\">\n              <div className=\"flex animate-scroll whitespace-nowrap\">\n                {}\n                {[...trendingTokens, ...trendingTokens].map((token, index) => <div key={`${token.mint}-${index}`} className=\"relative flex items-center mx-1 sm:mx-3 flex-shrink-0 cursor-pointer hover:scale-110 transition-transform\" onClick={async () => {\n              setCurrentView('dashboard');\n              setTokenAnimationActive(true);\n              setTimeout(() => {\n                if (searchFieldRef.current) {\n                  searchFieldRef.current.scrollIntoView({\n                    behavior: 'smooth',\n                    block: 'center'\n                  });\n                  setSearchFieldHighlight(true);\n                  setTimeout(() => setSearchFieldHighlight(false), 2000);\n                }\n              }, 100);\n              await performLiveStreamSearch(token.mint);\n            }} title={`${token.symbol} - MC: ${(token.market_cap / 1000).toFixed(1)}K${liveTokens.has(token.mint) ? ' (LIVE)' : ''}`}>\n                    {liveTokens.has(token.mint) && <div className=\"absolute -top-0.5 -right-0.5 sm:-top-1 sm:-right-1 z-10\">\n                        <div className=\"w-2 h-2 sm:w-3 sm:h-3 bg-[var(--danger)] rounded-full animate-pulse border border-white\"></div>\n                      </div>}\n                    <div className=\"w-8 h-8 sm:w-12 sm:h-12 cyber-card bg-white overflow-hidden\">\n                      <img src={token.image_uri} alt={`${token.symbol} token`} className=\"w-full h-full object-cover\" style={{\n                  imageRendering: 'pixelated'\n                }} onError={e => {\n                  e.target.style.display = 'none';\n                  e.target.nextSibling.style.display = 'flex';\n                }} />\n                <div className=\"w-full h-full cyber-card flex items-center justify-center text-black font-['Sora'] text-xs\" style={{\n                  display: 'none',\n                  background: 'var(--glass)'\n                }}>\n                        {token.symbol.substring(0, 3)}\n                      </div>\n                    </div>\n                  </div>)}\n              </div>\n            </div>}\n        </div>\n      </div>\n      <style jsx>{`\n        @keyframes scroll {\n          0% { transform: translateX(0); }\n          100% { transform: translateX(-50%); }\n        }\n        .animate-scroll {\n          animation: scroll 60s linear infinite;\n        }\n        .animate-scroll:hover {\n          animation-play-state: paused;\n        }\n      `}</style>\n    </div>;\n}","packageJson","{\"dependencies\":{\"react\":\"18.2.0\",\"@devfunlabs/web-sdk\":\"0.5.6\",\"framer-motion\":\"10.16.4\",\"lucide-react\":\"0.441.0\",\"recharts\":\"2.8.0\",\"react-router-dom\":\"6.18.0\",\"socket.io-client\":\"4.7.2\",\"zod\":\"3.22.4\",\"@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\",\"@solana/web3.js\":\"1.95.3\"}}","appFunctions",[80,88,94,100],{"_14":81,"_36":82,"_38":83,"_20":84,"_85":86,"_87":41},["B","94529"],["D",1761592979563],["D",1761592979563],"$FUNC_CAN_CLAIM","body","async function $FUNC_CAN_CLAIM(bountyId, submissionId) {\n  // Check if user is the claim creator\n  if ($USER_ID !== $newData.userId) {\n    return false;\n  }\n  \n  // Check if bounty exists and has this submission as winner\n  const bounty = await $ENTITY('bounties').get(bountyId);\n  if (!bounty || bounty.winner !== submissionId) {\n    return false;\n  }\n  \n  // Check if submission exists and belongs to current user\n  const submission = await $ENTITY('submissions').get(submissionId);\n  if (!submission || submission.userId !== $USER_ID) {\n    return false;\n  }\n  \n  // Check if bounty has already been claimed\n  if (bounty.claimed) {\n    return false;\n  }\n  \n  // Check if a claim already exists for this bounty\n  const existingClaim = await $ENTITY('claims').exists({ bountyId: bountyId });\n  if (existingClaim) {\n    return false;\n  }\n  \n  return true;\n}","commitId",{"_14":89,"_36":90,"_38":91,"_20":92,"_85":93,"_87":41},["B","94530"],["D",1761592979569],["D",1761592979569],"$FUNC_GET_TWITTER_HANDLE","async function $FUNC_GET_TWITTER_HANDLE() {\n  if (!$USER_X_USERNAME) {\n    return null;\n  }\n  return $USER_X_USERNAME;\n}",{"_14":95,"_36":96,"_38":97,"_20":98,"_85":99,"_87":41},["B","94531"],["D",1761592979574],["D",1761592979574],"$FUNC_GET_TWITTER_PROFILE_IMAGE","async function $FUNC_GET_TWITTER_PROFILE_IMAGE() {\n  if (!$USER_X_USERNAME) {\n    return null;\n  }\n  \n  try {\n    const response = await fetch(`https://api.twitter.com/2/users/by/username/${$USER_X_USERNAME}?user.fields=profile_image_url`, {\n      headers: {\n        'Authorization': `Bearer ${$SECRETS.TWITTER_BEARER_TOKEN}`\n      }\n    });\n    \n    if (response.ok) {\n      const data = await response.json();\n      return data.data?.profile_image_url || null;\n    }\n  } catch (error) {\n    console.error('Error fetching Twitter profile image:', error);\n  }\n  \n  return null;\n}",{"_14":101,"_36":102,"_38":103,"_20":104,"_85":105,"_87":41},["B","94532"],["D",1761592979585],["D",1761592979585],"$FUNC_IS_TWITTER_VERIFIED","async function $FUNC_IS_TWITTER_VERIFIED() {\n  if (!$USER_X_USERNAME) {\n    return false;\n  }\n  \n  try {\n    const response = await fetch(`https://api.twitter.com/2/users/by/username/${$USER_X_USERNAME}?user.fields=verified`, {\n      headers: {\n        'Authorization': `Bearer ${$SECRETS.TWITTER_BEARER_TOKEN}`\n      }\n    });\n    \n    if (response.ok) {\n      const data = await response.json();\n      return data.data?.verified || false;\n    }\n  } catch (error) {\n    console.error('Error checking Twitter verification:', error);\n  }\n  \n  return false;\n}","token","upstreamApp",{"_14":109,"_36":110,"_38":111,"_112":113,"_20":114,"_22":115,"_24":116,"_117":118,"_119":120,"_34":121,"_122":123,"_42":43,"_44":124,"_125":126,"_127":17,"_28":27,"_71":17,"_72":17,"_128":17,"_129":17,"_130":27,"_131":17,"_58":132,"_60":43,"_62":133,"_63":134,"_68":61,"_66":135,"_65":61,"_136":47,"_137":-5,"_40":138,"_18":139,"_140":141,"_266":17,"_26":27,"_67":43,"_29":267},"e3460cc72f66e0764f33",["D",1748972453323],["D",1764007756976],"template","web","bountymeme","Fund and hunt for the perfect meme with this sleek SOL-powered bounty platform! Create bounties with deadlines, watch as creators submit their best work, and reward winners with SOL while top-voted submissions earn $ZALA tokens.","Create SOL bounties for memes, vote on submissions, and reward creators with crypto!","snapshot","https://cdn.dev.fun/snapshot/e3460cc72f66e0764f33/156434_74d01c89.webp","ogImage","https://cdn.dev.fun/og/image/e3460cc72f66e0764f33/c136dd2c.webp","https://cdn.dev.fun/app/e3460cc72f66e0764f33/156434","category","money",-515,"featureScore","0.10810811","isAutomated","isTagHot","isTagMoney","isTagCrown","isExternalApp",80,4,835,3,"userId","upstreamAppId",["B","156434"],"CxpGDVrX2rA6penHD2zhopPYNMXAtXutizWSktwytZ18","lastCommit",{"_14":138,"_36":142,"_143":144,"_145":146,"_74":147,"_76":77,"_148":149,"_150":151,"_152":146,"_117":118,"_34":121,"_153":17,"_154":17,"_155":27,"_112":113,"_156":-5,"_157":158,"_237":238,"_6":109,"_136":47,"_239":240,"_78":241},["D",1763740523829],"input","in the admin dashboard, show me the wallet addresses that have claimed and which bounties they have claimed. ","output","<<<<<<< OLD\n              <div className=\"bg-[#33e6ff] p-6 border-[3px] border-black shadow-[5px_5px_0_rgba(0,0,0,0.8)]\">\n                <h3 className=\"text-xl font-['Press_Start_2P'] text-[#0a3d62] mb-4\">CLAIMED BOUNTIES</h3>\n                <div className=\"space-y-4\">\n                  {bounties.filter(b => b.claimed).length === 0 ? <div className=\"text-center py-8 bg-white border-[2px] border-black shadow-[2px_2px_0_rgba(0,0,0,0.8)]\">\n                      <p className=\"text-lg font-['VT323'] text-[#0a3d62]\">NO BOUNTIES HAVE BEEN CLAIMED YET</p>\n                    </div> : <div className=\"overflow-auto\">\n                      <table className=\"w-full border-collapse\">\n                        <thead>\n                          <tr className=\"bg-[#ffde00] border-[2px] border-black\">\n                            <th className=\"p-2 text-left font-['VT323'] text-[#0a3d62] text-lg\">QUEST</th>\n                            <th className=\"p-2 text-left font-['VT323'] text-[#0a3d62] text-lg\">WINNER</th>\n                            <th className=\"p-2 text-left font-['VT323'] text-[#0a3d62] text-lg\">AMOUNT</th>\n                            <th className=\"p-2 text-left font-['VT323'] text-[#0a3d62] text-lg\">ACTIONS</th>\n                          </tr>\n                        </thead>\n                        <tbody>\n                          {bounties.filter(b => b.claimed).sort((a, b) => {\n                      const aSubmission = submissions.find(s => s.id === a.winner);\n                      const bSubmission = submissions.find(s => s.id === b.winner);\n                      return (bSubmission?.updatedAt || 0) - (aSubmission?.updatedAt || 0);\n                    }).map(bounty => {\n                      const winningSubmission = submissions.find(s => s.id === bounty.winner);\n                      return <tr key={bounty.id} className=\"border-b-[2px] border-black hover:bg-[#33e6ff]/20\">\n                                <td className=\"p-3 bg-white border-l-[2px] border-black\">\n                                  <p className=\"font-['VT323'] text-[#0a3d62] text-lg font-bold\">{bounty.title}</p>\n                                  <p className=\"text-xs text-[#0a3d62]\">Created by: {bounty.creator.substring(0, 6)}...{bounty.creator.substring(bounty.creator.length - 4)}</p>\n                                </td>\n                                <td className=\"p-3 bg-white border-l-[2px] border-black\">\n                                  <p className=\"font-['VT323'] text-[#0a3d62]\">\n                                    {winningSubmission ? `${winningSubmission.userId.substring(0, 6)}...${winningSubmission.userId.substring(winningSubmission.userId.length - 4)}` : 'Unknown'}\n                                  </p>\n                                  {winningSubmission?.twitterHandle && <p className=\"text-xs text-[#0a3d62]\">@{winningSubmission.twitterHandle}</p>}\n                                </td>\n                                <td className=\"p-3 bg-white border-l-[2px] border-black\">\n                                  <div className=\"font-['VT323'] text-lg text-[#0a3d62] font-bold\">{bounty.amount} $ZALA</div>\n                                </td>\n                                <td className=\"p-3 bg-white border-l-[2px] border-r-[2px] border-black\">\n                                  <motion.button onClick={() => resetBountyClaim(bounty.id, bounty.winner)} className=\"bg-[#ff3b30] text-[#0a3d62] px-3 py-1 font-['VT323'] text-base border-[2px] border-black shadow-[2px_2px_0_rgba(0,0,0,0.8)] flex items-center\" variants={pixelButtonVariants} initial=\"rest\" whileHover=\"hover\" whileTap=\"tap\">\n                                    <RefreshCw size={16} className=\"mr-1\" />\n                                    RESET CLAIM\n                                  </motion.button>\n                                </td>\n                              </tr>;\n                    })}\n                        </tbody>\n                      </table>\n                    </div>}\n                </div>\n              </div>\n=======\n              <div className=\"bg-[#33e6ff] p-6 border-[3px] border-black shadow-[5px_5px_0_rgba(0,0,0,0.8)]\">\n                <h3 className=\"text-xl font-['Press_Start_2P'] text-[#0a3d62] mb-4\">CLAIMED BOUNTIES BY WALLET</h3>\n                <div className=\"space-y-4\">\n                  {bounties.filter(b => b.claimed).length === 0 ? <div className=\"text-center py-8 bg-white border-[2px] border-black shadow-[2px_2px_0_rgba(0,0,0,0.8)]\">\n                      <p className=\"text-lg font-['VT323'] text-[#0a3d62]\">NO BOUNTIES HAVE BEEN CLAIMED YET</p>\n                    </div> : (() => {\n                      const claimedBountiesByWallet = {};\n                      bounties.filter(b => b.claimed).forEach(bounty => {\n                        const winningSubmission = submissions.find(s => s.id === bounty.winner);\n                        if (winningSubmission) {\n                          const walletAddress = winningSubmission.userId;\n                          if (!claimedBountiesByWallet[walletAddress]) {\n                            claimedBountiesByWallet[walletAddress] = {\n                              bounties: [],\n                              twitterHandle: winningSubmission.twitterHandle,\n                              totalAmount: 0\n                            };\n                          }\n                          claimedBountiesByWallet[walletAddress].bounties.push({\n                            bounty,\n                            submission: winningSubmission\n                          });\n                          claimedBountiesByWallet[walletAddress].totalAmount += bounty.amount;\n                        }\n                      });\n\n                      return <div className=\"space-y-6\">\n                        {Object.entries(claimedBountiesByWallet).map(([walletAddress, data]) => (\n                          <div key={walletAddress} className=\"bg-white p-4 border-[3px] border-black shadow-[3px_3px_0_rgba(0,0,0,0.8)]\">\n                            <div className=\"flex flex-col sm:flex-row justify-between items-start sm:items-center gap-3 mb-4 pb-3 border-b-[2px] border-black\">\n                              <div>\n                                <div className=\"flex items-center gap-2 mb-1\">\n                                  <div className=\"w-8 h-8 bg-[#ff69b4] border-[2px] border-black flex items-center justify-center text-sm font-bold text-[#0a3d62]\">\n                                    {walletAddress.substring(0, 1)}\n                                  </div>\n                                  <p className=\"font-['Press_Start_2P'] text-[#0a3d62] text-base\">\n                                    {walletAddress.substring(0, 8)}...{walletAddress.substring(walletAddress.length - 6)}\n                                  </p>\n                                </div>\n                                {data.twitterHandle && (\n                                  <div className=\"flex items-center ml-10\">\n                                    <Twitter size={14} className=\"mr-1 text-[#0a3d62]\" />\n                                    <span className=\"text-[#0a3d62] font-['VT323'] text-sm\">@{data.twitterHandle}</span>\n                                  </div>\n                                )}\n                              </div>\n                              <div className=\"bg-[#ffde00] px-4 py-2 border-[2px] border-black shadow-[2px_2px_0_rgba(0,0,0,0.8)]\">\n                                <p className=\"font-['VT323'] text-[#0a3d62] text-sm\">TOTAL CLAIMED</p>\n                                <p className=\"font-['Press_Start_2P'] text-[#0a3d62] text-lg\">{data.totalAmount} $ZALA</p>\n                              </div>\n                            </div>\n                            <div className=\"space-y-3\">\n                              <p className=\"font-['VT323'] text-[#0a3d62] text-lg mb-2\">CLAIMED BOUNTIES ({data.bounties.length}):</p>\n                              {data.bounties.map(({ bounty, submission }) => (\n                                <div key={bounty.id} className=\"bg-[#33e6ff] p-3 border-[2px] border-black shadow-[2px_2px_0_rgba(0,0,0,0.8)] flex flex-col sm:flex-row justify-between items-start sm:items-center gap-3\">\n                                  <div className=\"flex-1\">\n                                    <p className=\"font-['VT323'] text-[#0a3d62] text-lg font-bold mb-1\">{bounty.title}</p>\n                                    <div className=\"flex flex-wrap gap-2 text-xs text-[#0a3d62]\">\n                                      <span className=\"bg-white px-2 py-1 border border-black\">\n                                        Amount: {bounty.amount} $ZALA\n                                      </span>\n                                      <span className=\"bg-white px-2 py-1 border border-black\">\n                                        Submission: {submission.title}\n                                      </span>\n                                      {submission.updatedAt && (\n                                        <span className=\"bg-white px-2 py-1 border border-black\">\n                                          Claimed: {new Date(submission.updatedAt).toLocaleDateString()}\n                                        </span>\n                                      )}\n                                    </div>\n                                  </div>\n                                  <motion.button \n                                    onClick={() => resetBountyClaim(bounty.id, bounty.winner)} \n                                    className=\"bg-[#ff3b30] text-[#0a3d62] px-3 py-2 font-['VT323'] text-sm border-[2px] border-black shadow-[2px_2px_0_rgba(0,0,0,0.8)] flex items-center whitespace-nowrap\" \n                                    variants={pixelButtonVariants} \n                                    initial=\"rest\" \n                                    whileHover=\"hover\" \n                                    whileTap=\"tap\"\n                                  >\n                                    <RefreshCw size={14} className=\"mr-1\" />\n                                    RESET\n                                  </motion.button>\n                                </div>\n                              ))}\n                            </div>\n                          </div>\n                        ))}\n                      </div>;\n                    })()}\n                </div>\n              </div>\n>>>>>>> NEW","import { useState, useEffect, useCallback, useRef } from 'react';\nimport { useDevapp, UserButton, DevappProvider, openLink } from '@devfunlabs/web-sdk';\nimport { motion, AnimatePresence } from 'framer-motion';\nimport { Calendar, Clock, Award, ThumbsUp, Trash2, Twitter, ArrowRight, Trophy, Check, AlertCircle, Loader, ExternalLink, Info, RefreshCw } from 'lucide-react';\nconst ScanlineOverlay = () => <div className=\"fixed inset-0 pointer-events-none z-10 opacity-10\" style={{\n  background: \"repeating-linear-gradient(0deg, rgba(0,0,0,0.15) 0px, rgba(0,0,0,0.15) 1px, transparent 1px, transparent 2px)\"\n}}></div>;\nexport default function AppWithProvider() {\n  return <>\n      <style jsx global>{`\n        @import url('https://fonts.googleapis.com/css2?family=Press+Start+2P&family=VT323&family=Silkscreen&family=Fredoka+One&family=Rubik+Mono+One&display=swap');\n        body {\n          font-family: 'Courier New', monospace;\n          background-color: #3498db;\n          background-image: linear-gradient(to bottom, #3498db, #2980b9);\n          color: #0a3d62;\n          image-rendering: pixelated;\n        }\n      `}</style>\n      <DevappProvider rpcEndpoint=\"https://rpc.dev.fun/e3460cc72f66e0764f33\" devbaseEndpoint=\"https://devbase.dev.fun\" appId=\"e3460cc72f66e0764f33\">\n        <App />\n        <ScanlineOverlay />\n      </DevappProvider>\n    </>;\n}\nfunction App() {\n  const {\n    devbaseClient,\n    userWallet\n  } = useDevapp();\n  const [showSplash, setShowSplash] = useState(true);\n  const [currentView, setCurrentView] = useState('dashboard');\n  const [bounties, setBounties] = useState([]);\n  const [submissions, setSubmissions] = useState([]);\n  const [userSubmissions, setUserSubmissions] = useState([]);\n  const [loading, setLoading] = useState(true);\n  const [selectedBounty, setSelectedBounty] = useState(null);\n  const [extensionData, setExtensionData] = useState({\n    deadline: ''\n  });\n  const [transaction, setTransaction] = useState({\n    status: 'idle',\n    message: '',\n    type: ''\n  });\n  const [showInfoPopup, setShowInfoPopup] = useState(false);\n  const pixelButtonVariants = {\n    rest: {\n      scale: 1,\n      boxShadow: \"3px 3px 0 rgba(0,0,0,0.8)\",\n      y: 0\n    },\n    hover: {\n      scale: 1.05,\n      boxShadow: \"4px 4px 0 rgba(0,0,0,0.8)\",\n      textShadow: \"0 0 5px #ffde00\",\n      color: \"#ffde00\",\n      y: 0\n    },\n    tap: {\n      scale: 1,\n      boxShadow: \"1px 1px 0 rgba(0,0,0,0.8)\",\n      y: 2\n    }\n  };\n  const [formData, setFormData] = useState({\n    title: '',\n    amount: 100,\n    deadline: '',\n    description: ''\n  });\n  const [submissionData, setSubmissionData] = useState({\n    tweetUrl: '',\n    title: '',\n    imageUrl: '',\n    bountyId: ''\n  });\n  const [twitterHandle, setTwitterHandle] = useState('');\n  const [twitterHandleVerified, setTwitterHandleVerified] = useState(false);\n  const [twitterUsername, setTwitterUsername] = useState('');\n  const [twitterProfileImage, setTwitterProfileImage] = useState('');\n  const [checkingXConnection, setCheckingXConnection] = useState(false);\n  const [showTweetPreview, setShowTweetPreview] = useState(false);\n  const [tweetId, setTweetId] = useState('');\n  const [votes, setVotes] = useState([]);\n  const isAdmin = userWallet === '6SxLVfFovSjR2LAFcJ5wfT6RFjc8GxsscRekGnLq8BMe';\n  const pixelContainerVariants = {\n    hidden: {\n      opacity: 0,\n      scale: 0.9\n    },\n    show: {\n      opacity: 1,\n      scale: 1,\n      transition: {\n        staggerChildren: 0.05\n      }\n    }\n  };\n  const pixelItemVariants = {\n    hidden: {\n      opacity: 0,\n      y: 20\n    },\n    show: {\n      opacity: 1,\n      y: 0\n    }\n  };\n  const videos = ['https://cdn.dev.fun/asset/e3460cc72f66e0764f33/Zala NYC_49336583_49336583.mp4', 'https://cdn.dev.fun/asset/e3460cc72f66e0764f33/Zala mystic_4e7b55f4_4e7b55f4.mp4', 'https://cdn.dev.fun/asset/e3460cc72f66e0764f33/Zala glow_f5276fab_f5276fab.mp4', 'https://cdn.dev.fun/asset/e3460cc72f66e0764f33/Zala fireball_48cfb4ce_48cfb4ce.mp4', 'https://cdn.dev.fun/asset/e3460cc72f66e0764f33/Zala flying_053c88d5_053c88d5.mp4', 'https://cdn.dev.fun/asset/e3460cc72f66e0764f33/zala hologram_78defd02.mp4', 'https://cdn.dev.fun/asset/e3460cc72f66e0764f33/zala pixel_cb0346f1.mp4', 'https://cdn.dev.fun/asset/e3460cc72f66e0764f33/zara ai_f53d488c.mp4', 'https://cdn.dev.fun/asset/e3460cc72f66e0764f33/zala magic_6aed7ff8.mp4', 'https://cdn.dev.fun/asset/e3460cc72f66e0764f33/zala night flowers_92153ed3.mp4', 'https://cdn.dev.fun/asset/e3460cc72f66e0764f33/zala forest sitting_66e511e8.mp4', 'https://cdn.dev.fun/asset/e3460cc72f66e0764f33/Zala space_e801f933.mp4', 'https://cdn.dev.fun/asset/e3460cc72f66e0764f33/zala coding_305d9990.mp4', 'https://cdn.dev.fun/asset/e3460cc72f66e0764f33/zala hand power_63b670ec.mp4', 'https://cdn.dev.fun/asset/e3460cc72f66e0764f33/zala influencer__ddb5280d.mp4'];\n  const [randomVideo] = useState(videos[Math.floor(Math.random() * videos.length)]);\n  const [lastRefreshed, setLastRefreshed] = useState(Date.now());\n  const [isRefreshing, setIsRefreshing] = useState(false);\n  const [newItemsCount, setNewItemsCount] = useState({\n    submissions: 0,\n    votes: 0\n  });\n  const scrollPositionRef = useRef(0);\n  const fetchVotes = useCallback(async () => {\n    if (!devbaseClient) return;\n    try {\n      const fetchedVotes = await devbaseClient.listEntities('votes');\n      setVotes(fetchedVotes);\n    } catch (error) {\n      console.error('Error fetching votes:', error);\n    }\n  }, [devbaseClient]);\n  const extractTweetId = url => {\n    if (!url) return '';\n    try {\n      const tweetMatch = url.match(/twitter\\.com\\/\\w+\\/status\\/(\\d+)/) || url.match(/x\\.com\\/\\w+\\/status\\/(\\d+)/);\n      return tweetMatch ? tweetMatch[1] : '';\n    } catch (error) {\n      console.error('Error extracting tweet ID:', error);\n      return '';\n    }\n  };\n  const extractTwitterHandle = url => {\n    if (!url) return '';\n    try {\n      const handleMatch = url.match(/twitter\\.com\\/(\\w+)\\/status\\//) || url.match(/x\\.com\\/(\\w+)\\/status\\//);\n      return handleMatch ? handleMatch[1].toLowerCase() : '';\n    } catch (error) {\n      console.error('Error extracting Twitter handle:', error);\n      return '';\n    }\n  };\n  const handleTweetUrlChange = e => {\n    const url = e.target.value;\n    setSubmissionData({\n      ...submissionData,\n      tweetUrl: url\n    });\n    const id = extractTweetId(url);\n    setTweetId(id);\n    setShowTweetPreview(!!id);\n  };\n  const connectXAccount = () => {\n    if (!userWallet) {\n      console.log(\"Please connect your Solana wallet before connecting your X account.\");\n      return;\n    }\n    localStorage.setItem(`xConnecting_${userWallet}`, 'true');\n    const twitterLoginUrl = `https://oauth.dev.fun/twitter/login/e3460cc72f66e0764f33/${userWallet}`;\n    openLink(twitterLoginUrl);\n  };\n  const fetchUserProfile = useCallback(async () => {\n    if (!userWallet || !devbaseClient) {\n      setTwitterHandle('');\n      setTwitterHandleVerified(false);\n      setTwitterUsername('');\n      setTwitterProfileImage('');\n      return;\n    }\n    try {\n      const profiles = await devbaseClient.listEntities('profiles', {\n        userId: userWallet\n      });\n      const profile = profiles.length > 0 ? profiles[0] : null;\n      if (profile && profile.twitterHandle) {\n        setTwitterHandle(profile.twitterHandle);\n        setTwitterHandleVerified(true);\n        setTwitterUsername(profile.twitterUsername || profile.twitterHandle);\n        setTwitterProfileImage(profile.twitterProfileImage || '');\n      } else {\n        setTwitterHandle('');\n        setTwitterHandleVerified(false);\n        setTwitterUsername('');\n        setTwitterProfileImage('');\n      }\n    } catch (error) {\n      setTwitterHandle('');\n      setTwitterHandleVerified(false);\n      setTwitterUsername('');\n      setTwitterProfileImage('');\n    }\n  }, [userWallet, devbaseClient]);\n  const checkXConnection = useCallback(async () => {\n    if (!userWallet || !devbaseClient) return;\n    const wasConnecting = localStorage.getItem(`xConnecting_${userWallet}`);\n    if (wasConnecting) {\n      setCheckingXConnection(true);\n      localStorage.removeItem(`xConnecting_${userWallet}`);\n      setTimeout(async () => {\n        try {\n          let profiles = await devbaseClient.listEntities('profiles', {\n            userId: userWallet\n          });\n          let profile = profiles.length > 0 ? profiles[0] : null;\n          if (!profile) {\n            await devbaseClient.createEntity('profiles', {\n              userId: userWallet\n            });\n            await new Promise(resolve => setTimeout(resolve, 1500));\n            profiles = await devbaseClient.listEntities('profiles', {\n              userId: userWallet\n            });\n            profile = profiles.length > 0 ? profiles[0] : null;\n          } else {\n            await devbaseClient.updateEntity('profiles', profile.id, {\n              lastUpdated: Date.now()\n            });\n            await new Promise(resolve => setTimeout(resolve, 1500));\n            profiles = await devbaseClient.listEntities('profiles', {\n              userId: userWallet\n            });\n            profile = profiles.length > 0 ? profiles[0] : null;\n          }\n          await fetchUserProfile();\n        } catch (error) {\n          console.error('[X Auth] Error checking X connection:', error);\n        } finally {\n          setCheckingXConnection(false);\n        }\n      }, 2000);\n    }\n  }, [userWallet, devbaseClient, fetchUserProfile]);\n  const fetchData = useCallback(async (silent = false) => {\n    if (!devbaseClient) return;\n    try {\n      if (!silent) setLoading(true);\n      if (silent) {\n        scrollPositionRef.current = window.scrollY;\n      }\n      const fetchedBounties = await devbaseClient.listEntities('bounties');\n      const fetchedSubmissions = await devbaseClient.listEntities('submissions');\n      const fetchedVotes = await devbaseClient.listEntities('votes');\n      if (silent) {\n        const newSubmissionsCount = fetchedSubmissions.length - submissions.length;\n        const newVotesCount = fetchedVotes.length - votes.length;\n        if (newSubmissionsCount > 0 || newVotesCount > 0) {\n          setNewItemsCount({\n            submissions: Math.max(0, newSubmissionsCount),\n            votes: Math.max(0, newVotesCount)\n          });\n        }\n      }\n      setBounties(fetchedBounties);\n      setSubmissions(fetchedSubmissions);\n      setVotes(fetchedVotes);\n      if (userWallet) {\n        const userSubs = fetchedSubmissions.filter(sub => sub.userId === userWallet);\n        setUserSubmissions(userSubs);\n        const userProfiles = await devbaseClient.listEntities('profiles', {\n          userId: userWallet\n        });\n        if (userProfiles.length > 0) {\n          const profile = userProfiles[0];\n          setTwitterHandle(profile.twitterHandle || '');\n          setTwitterHandleVerified(profile.verified || false);\n          setTwitterUsername(profile.twitterUsername || '');\n          setTwitterProfileImage(profile.twitterProfileImage || '');\n        }\n      }\n      setLastRefreshed(Date.now());\n      if (silent) {\n        setTimeout(() => {\n          window.scrollTo(0, scrollPositionRef.current);\n        }, 0);\n      }\n    } catch (error) {\n      console.error('Error fetching data:', error);\n    } finally {\n      setLoading(false);\n      setIsRefreshing(false);\n    }\n  }, [devbaseClient, userWallet, submissions.length, votes.length]);\n  const refreshData = useCallback(() => {\n    setIsRefreshing(true);\n    setNewItemsCount({\n      submissions: 0,\n      votes: 0\n    });\n    fetchData(true);\n  }, [fetchData]);\n  useEffect(() => {\n    if (devbaseClient) {\n      fetchData();\n    }\n  }, [devbaseClient, fetchData]);\n  useEffect(() => {\n    if (devbaseClient && userWallet) {\n      fetchUserProfile();\n      checkXConnection();\n    }\n  }, [devbaseClient, userWallet, fetchUserProfile, checkXConnection]);\n  useEffect(() => {\n    if (!devbaseClient) return;\n    const intervalId = setInterval(() => {\n      fetchData(true);\n    }, 10000);\n    return () => clearInterval(intervalId);\n  }, [devbaseClient, fetchData]);\n  useEffect(() => {\n    if (devbaseClient) {\n      fetchVotes();\n    }\n  }, [devbaseClient, fetchVotes]);\n  const createBounty = async e => {\n    e.preventDefault();\n    if (!userWallet || !devbaseClient) return;\n    const deadlineDate = new Date(formData.deadline);\n    const now = new Date();\n    if (deadlineDate <= now) {\n      setTransaction({\n        status: 'error',\n        message: 'Quest deadline cannot be in the past! Choose a future date and time.',\n        type: 'createBounty'\n      });\n      setTimeout(() => {\n        setTransaction({\n          status: 'idle',\n          message: '',\n          type: ''\n        });\n      }, 3000);\n      return;\n    }\n    setTransaction({\n      status: 'pending',\n      message: `Creating your bounty with ${formData.amount} $ZALA (funding from your wallet)...`,\n      type: 'createBounty'\n    });\n    try {\n      const newBounty = {\n        title: formData.title,\n        description: formData.description,\n        amount: parseFloat(formData.amount),\n        deadline: new Date(formData.deadline).getTime(),\n        creator: userWallet,\n        winner: null,\n        claimed: false,\n        createdAt: Date.now()\n      };\n      await devbaseClient.createEntity('bounties', newBounty);\n      setTransaction({\n        status: 'success',\n        message: `Bounty created successfully! ${formData.amount} $ZALA funded from your wallet.`,\n        type: 'createBounty'\n      });\n      setTimeout(() => {\n        setTransaction({\n          status: 'idle',\n          message: '',\n          type: ''\n        });\n        setFormData({\n          title: '',\n          amount: 100,\n          deadline: '',\n          description: ''\n        });\n        fetchData();\n        setCurrentView('dashboard');\n      }, 2000);\n    } catch (error) {\n      console.error('Error creating bounty:', error);\n      const isWalletRejection = error.name === 'WalletConnectionError' || error.constructor?.name === 'WalletConnectionError' || error.constructor?.name === 'WalletError' || error.toString().includes('WalletConnectionError') || error.toString().includes('User rejected') || error.message && (error.message.includes('User rejected') || error.message.includes('User rejected the request') || error.message.includes('WalletSignTransactionError') || error.message.includes('WalletConnectionError') || error.message.includes('cancelled') || error.message.includes('canceled') || error.message.includes('rejected') || error.message.includes('User declined') || error.message.includes('User denied'));\n      if (isWalletRejection) {\n        setTransaction({\n          status: 'error',\n          message: 'Transaction cancelled in wallet. You can try creating the bounty again.',\n          type: 'createBounty'\n        });\n      } else {\n        setTransaction({\n          status: 'error',\n          message: 'Failed to create bounty: ' + (error.message || 'Unknown error'),\n          type: 'createBounty'\n        });\n      }\n      setTimeout(() => {\n        setTransaction({\n          status: 'idle',\n          message: '',\n          type: ''\n        });\n      }, 3000);\n    }\n  };\n  const createSubmission = async e => {\n    e.preventDefault();\n    if (!userWallet || !devbaseClient || !selectedBounty) return;\n    try {\n      const userProfiles = await devbaseClient.listEntities('profiles', {\n        userId: userWallet\n      });\n      const hasVerifiedTwitter = userProfiles.length > 0 && userProfiles[0].verified;\n      if (!hasVerifiedTwitter) {\n        setTransaction({\n          status: 'error',\n          message: 'You must verify your Twitter handle in your profile before submitting entries',\n          type: 'createSubmission'\n        });\n        setTimeout(() => {\n          setTransaction({\n            status: 'idle',\n            message: '',\n            type: ''\n          });\n        }, 3000);\n        return;\n      }\n      const tweetHandle = extractTwitterHandle(submissionData.tweetUrl);\n      if (tweetHandle.toLowerCase() !== userProfiles[0].twitterHandle.toLowerCase()) {\n        setTransaction({\n          status: 'error',\n          message: 'The Twitter account in your submission must match your verified account',\n          type: 'createSubmission'\n        });\n        setTimeout(() => {\n          setTransaction({\n            status: 'idle',\n            message: '',\n            type: ''\n          });\n        }, 3000);\n        return;\n      }\n      try {\n        const requiredHashtag = `BountyMeme_${selectedBounty.title.replace(/\\s+/g, '').substring(0, 15)}`;\n        const tweetResponse = await fetch(`http://localhost:5006?url=${encodeURIComponent(`https://api.twitter.com/2/tweets/${extractTweetId(submissionData.tweetUrl)}`)}`);\n        const tweetData = await tweetResponse.json();\n        if (tweetData && tweetData.text && !tweetData.text.includes(`#${requiredHashtag}`)) {\n          setTransaction({\n            status: 'warning',\n            message: `Your tweet should include the hashtag #${requiredHashtag}. We'll continue, but best practice is to include the hashtag.`,\n            type: 'createSubmission'\n          });\n          setTimeout(() => {\n            setTransaction({\n              status: 'idle',\n              message: '',\n              type: ''\n            });\n          }, 3000);\n        }\n      } catch (error) {\n        console.warn('Could not verify hashtag:', error);\n      }\n      const newSubmission = {\n        bountyId: selectedBounty.id,\n        tweetUrl: submissionData.tweetUrl,\n        title: submissionData.title,\n        imageUrl: submissionData.imageUrl,\n        userId: userWallet,\n        twitterHandle: userProfiles[0].twitterHandle,\n        upvotes: 0,\n        claimed: false,\n        createdAt: Date.now()\n      };\n      await devbaseClient.createEntity('submissions', newSubmission);\n      setTransaction({\n        status: 'success',\n        message: 'Submission created successfully!',\n        type: 'createSubmission'\n      });\n      setTimeout(() => {\n        setTransaction({\n          status: 'idle',\n          message: '',\n          type: ''\n        });\n        setSubmissionData({\n          tweetUrl: '',\n          title: '',\n          imageUrl: '',\n          bountyId: ''\n        });\n        fetchData();\n        setCurrentView('bounty');\n      }, 2000);\n    } catch (error) {\n      console.error('Error creating submission:', error);\n      setTransaction({\n        status: 'error',\n        message: 'Failed to create submission: ' + (error.message || 'Unknown error'),\n        type: 'createSubmission'\n      });\n      setTimeout(() => {\n        setTransaction({\n          status: 'idle',\n          message: '',\n          type: ''\n        });\n      }, 3000);\n    }\n  };\n  const [animatingVote, setAnimatingVote] = useState(null);\n  const [winnerAnimation, setWinnerAnimation] = useState(null);\n  const getSubmissionVoteCount = useCallback(submissionId => {\n    return votes.filter(vote => vote.submissionId === submissionId).length;\n  }, [votes]);\n  const voteSubmission = async submissionId => {\n    if (!userWallet || !devbaseClient) return;\n    try {\n      const existingVotes = await devbaseClient.listEntities('votes', {\n        submissionId: submissionId,\n        userId: userWallet\n      });\n      if (existingVotes.length > 0) {\n        alert('You have already voted for this submission!');\n        return;\n      }\n      setAnimatingVote(submissionId);\n      setTimeout(() => setAnimatingVote(null), 1000);\n      await devbaseClient.createEntity('votes', {\n        submissionId: submissionId,\n        userId: userWallet,\n        createdAt: Date.now()\n      });\n      fetchVotes();\n      refreshData();\n    } catch (error) {\n      console.error('Error voting for submission:', error);\n    }\n  };\n  const chooseWinner = async (submissionId, bountyId) => {\n    if (!userWallet || !devbaseClient) return;\n    try {\n      const bounty = bounties.find(b => b.id === bountyId);\n      if (bounty.creator !== userWallet) {\n        alert('Only the bounty creator can choose a winner!');\n        return;\n      }\n      if (new Date(bounty.deadline) > new Date()) {\n        alert('Cannot choose a winner before the deadline!');\n        return;\n      }\n      setWinnerAnimation(submissionId);\n      setTimeout(() => setWinnerAnimation(null), 2000);\n      const updatedBounty = {\n        ...bounty,\n        winner: submissionId\n      };\n      await devbaseClient.updateEntity('bounties', bountyId, updatedBounty);\n      refreshData();\n    } catch (error) {\n      console.error('Error choosing winner:', error);\n    }\n  };\n  const extendDeadline = async e => {\n    e.preventDefault();\n    if (!userWallet || !devbaseClient || !selectedBounty) return;\n    const newDeadlineDate = new Date(extensionData.deadline);\n    const now = new Date();\n    if (newDeadlineDate <= now) {\n      setTransaction({\n        status: 'error',\n        message: 'New deadline cannot be in the past! Choose a future date and time.',\n        type: 'extendDeadline'\n      });\n      setTimeout(() => {\n        setTransaction({\n          status: 'idle',\n          message: '',\n          type: ''\n        });\n      }, 3000);\n      return;\n    }\n    setTransaction({\n      status: 'pending',\n      message: 'Extending quest deadline...',\n      type: 'extendDeadline'\n    });\n    try {\n      const updatedBounty = {\n        ...selectedBounty,\n        deadline: newDeadlineDate.getTime()\n      };\n      await devbaseClient.updateEntity('bounties', selectedBounty.id, updatedBounty);\n      setTransaction({\n        status: 'success',\n        message: 'Quest deadline extended successfully! The quest is now active again.',\n        type: 'extendDeadline'\n      });\n      setTimeout(() => {\n        setTransaction({\n          status: 'idle',\n          message: '',\n          type: ''\n        });\n        setExtensionData({\n          deadline: ''\n        });\n        fetchData();\n        setCurrentView('bounty');\n      }, 2000);\n    } catch (error) {\n      console.error('Error extending deadline:', error);\n      setTransaction({\n        status: 'error',\n        message: 'Failed to extend deadline: ' + (error.message || 'Unknown error'),\n        type: 'extendDeadline'\n      });\n      setTimeout(() => {\n        setTransaction({\n          status: 'idle',\n          message: '',\n          type: ''\n        });\n      }, 3000);\n    }\n  };\n  const [claimedBounties, setClaimedBounties] = useState(() => {\n    const saved = localStorage.getItem('claimedBounties');\n    return saved ? JSON.parse(saved) : {};\n  });\n  const [failedClaims, setFailedClaims] = useState(() => {\n    const saved = localStorage.getItem('failedClaims');\n    return saved ? JSON.parse(saved) : {};\n  });\n  const [pendingClaims, setPendingClaims] = useState(new Set());\n  useEffect(() => {\n    localStorage.setItem('claimedBounties', JSON.stringify(claimedBounties));\n  }, [claimedBounties]);\n  useEffect(() => {\n    localStorage.setItem('failedClaims', JSON.stringify(failedClaims));\n  }, [failedClaims]);\n  const isMakeMeBuyZalaBounty = bounty => {\n    return bounty && bounty.title && bounty.title.toLowerCase().includes('make me buy zala');\n  };\n  const resetBountyClaim = async (bountyId, submissionId) => {\n    if (!userWallet || !devbaseClient || !isAdmin) return;\n    setTransaction({\n      status: 'pending',\n      message: 'Resetting claim status...',\n      type: 'resetClaim'\n    });\n    try {\n      const bounty = bounties.find(b => b.id === bountyId);\n      const submission = submissions.find(s => s.id === submissionId);\n      if (!bounty || !submission) {\n        throw new Error('Bounty or submission not found');\n      }\n      const updatedBounty = {\n        ...bounty,\n        claimed: false\n      };\n      const updatedSubmission = {\n        ...submission,\n        claimed: false,\n        updatedAt: Date.now()\n      };\n      await devbaseClient.updateEntity('bounties', bountyId, updatedBounty);\n      await devbaseClient.updateEntity('submissions', submissionId, updatedSubmission);\n      setBounties(prevBounties => prevBounties.map(b => b.id === bountyId ? {\n        ...b,\n        claimed: false\n      } : b));\n      setSubmissions(prevSubmissions => prevSubmissions.map(s => s.id === submissionId ? {\n        ...s,\n        claimed: false,\n        updatedAt: Date.now()\n      } : s));\n      setClaimedBounties(prev => {\n        const updated = {\n          ...prev\n        };\n        delete updated[bountyId];\n        return updated;\n      });\n      setFailedClaims(prev => {\n        const updated = {\n          ...prev\n        };\n        delete updated[bountyId];\n        return updated;\n      });\n      setTransaction({\n        status: 'success',\n        message: 'Claim status reset successfully! User can now claim this bounty again.',\n        type: 'resetClaim'\n      });\n      setTimeout(() => {\n        setTransaction({\n          status: 'idle',\n          message: '',\n          type: ''\n        });\n        refreshData();\n      }, 2000);\n    } catch (error) {\n      console.error('Error resetting claim:', error);\n      setTransaction({\n        status: 'error',\n        message: 'Failed to reset claim: ' + (error.message || 'Unknown error'),\n        type: 'resetClaim'\n      });\n      setTimeout(() => {\n        setTransaction({\n          status: 'idle',\n          message: '',\n          type: ''\n        });\n      }, 3000);\n    }\n  };\n  const [showClaimWarning, setShowClaimWarning] = useState(false);\n  const [pendingClaim, setPendingClaim] = useState(null);\n  const initiateClaimProcess = (submissionId, bountyId) => {\n    if (!userWallet || !devbaseClient) return;\n    setPendingClaim({\n      submissionId,\n      bountyId\n    });\n    setShowClaimWarning(true);\n  };\n  const claimReward = async (submissionId, bountyId) => {\n    if (!userWallet || !devbaseClient) return;\n    const bounty = bounties.find(b => b.id === bountyId);\n    const submission = submissions.find(s => s.id === submissionId);\n    if (!bounty) {\n      setTransaction({\n        status: 'error',\n        message: 'Bounty not found. Please refresh the page and try again.',\n        type: 'claimReward'\n      });\n      setTimeout(() => {\n        setTransaction({\n          status: 'idle',\n          message: '',\n          type: ''\n        });\n      }, 3000);\n      return;\n    }\n    if (!submission) {\n      setTransaction({\n        status: 'error',\n        message: 'Submission not found. Please refresh the page and try again.',\n        type: 'claimReward'\n      });\n      setTimeout(() => {\n        setTransaction({\n          status: 'idle',\n          message: '',\n          type: ''\n        });\n      }, 3000);\n      return;\n    }\n    const isRetry = failedClaims[bountyId] === 'failed';\n    const isMakeMeBuyZala = isMakeMeBuyZalaBounty(bounty);\n    if ((claimedBounties[bountyId] === 'claimed' || bounty.claimed) && !isRetry) {\n      setTransaction({\n        status: 'error',\n        message: 'This reward has already been claimed!',\n        type: 'claimReward'\n      });\n      setTimeout(() => {\n        setTransaction({\n          status: 'idle',\n          message: '',\n          type: ''\n        });\n      }, 3000);\n      return;\n    }\n    if (submission.userId !== userWallet) {\n      setTransaction({\n        status: 'error',\n        message: 'Only the winning submission creator can claim the reward!',\n        type: 'claimReward'\n      });\n      setTimeout(() => {\n        setTransaction({\n          status: 'idle',\n          message: '',\n          type: ''\n        });\n      }, 3000);\n      return;\n    }\n    if (bounty.winner !== submissionId) {\n      setTransaction({\n        status: 'error',\n        message: 'This submission is not the winner!',\n        type: 'claimReward'\n      });\n      setTimeout(() => {\n        setTransaction({\n          status: 'idle',\n          message: '',\n          type: ''\n        });\n      }, 3000);\n      return;\n    }\n    if (isRetry) {\n      setFailedClaims(prev => {\n        const updated = {\n          ...prev\n        };\n        delete updated[bountyId];\n        return updated;\n      });\n    }\n    setPendingClaims(prev => new Set([...prev, bountyId]));\n    setTransaction({\n      status: 'pending',\n      message: `Claiming your ${bounty.amount} $ZALA reward... Please confirm in your wallet.`,\n      type: 'claimReward'\n    });\n    try {\n      await devbaseClient.createEntity('claims', {\n        token: 'CxpGDVrX2rA6penHD2zhopPYNMXAtXutizWSktwytZ18',\n        amount: bounty.amount,\n        userId: userWallet,\n        bountyId: bountyId,\n        submissionId: submissionId\n      });\n      const updatedBounty = {\n        ...bounty,\n        claimed: true\n      };\n      const updatedSubmission = {\n        ...submission,\n        claimed: true\n      };\n      try {\n        await devbaseClient.updateEntity('bounties', bountyId, updatedBounty);\n        await devbaseClient.updateEntity('submissions', submissionId, updatedSubmission);\n      } catch (updateError) {\n        console.log('Error updating entities, but token transfer succeeded:', updateError);\n      }\n      setBounties(prevBounties => prevBounties.map(b => b.id === bountyId ? {\n        ...b,\n        claimed: true\n      } : b));\n      setSubmissions(prevSubmissions => prevSubmissions.map(s => s.id === submissionId ? {\n        ...s,\n        claimed: true,\n        updatedAt: Date.now()\n      } : s));\n      setClaimedBounties(prev => ({\n        ...prev,\n        [bountyId]: 'claimed'\n      }));\n      setFailedClaims(prev => {\n        const updated = {\n          ...prev\n        };\n        delete updated[bountyId];\n        return updated;\n      });\n      setTransaction({\n        status: 'success',\n        message: `ZALA CLAIMED! 🎉 ${bounty.amount} $ZALA tokens are now in your wallet!`,\n        type: 'claimReward'\n      });\n      setTimeout(() => {\n        setTransaction({\n          status: 'idle',\n          message: '',\n          type: ''\n        });\n        setCurrentView('dashboard');\n        refreshData();\n      }, 2000);\n    } catch (error) {\n      console.error('Error in claim process:', error);\n      const errorString = error.toString().toLowerCase();\n      const errorMessage = (error.message || '').toLowerCase();\n      const errorName = (error.name || '').toLowerCase();\n      const errorConstructor = (error.constructor?.name || '').toLowerCase();\n      const isWalletRejection = errorName === 'walletconnectionerror' || errorConstructor === 'walletconnectionerror' || errorConstructor === 'walleterror' || errorString.includes('walletconnectionerror') || errorString.includes('user rejected') || errorString.includes('user declined') || errorString.includes('user denied') || errorString.includes('cancelled') || errorString.includes('canceled') || errorString.includes('rejected') || errorString.includes('timeout') || errorMessage.includes('user rejected') || errorMessage.includes('user rejected the request') || errorMessage.includes('walletsigntransactionerror') || errorMessage.includes('walletconnectionerror') || errorMessage.includes('transaction was not confirmed') || errorMessage.includes('user declined') || errorMessage.includes('user denied') || errorMessage.includes('cancelled') || errorMessage.includes('canceled') || errorMessage.includes('rejected') || errorMessage.includes('timeout');\n      if (isWalletRejection) {\n        setClaimedBounties(prev => {\n          const updated = {\n            ...prev\n          };\n          delete updated[bountyId];\n          return updated;\n        });\n        setFailedClaims(prev => {\n          const updated = {\n            ...prev\n          };\n          delete updated[bountyId];\n          return updated;\n        });\n        setBounties(prevBounties => prevBounties.map(b => b.id === bountyId ? {\n          ...b,\n          claimed: false\n        } : b));\n        setSubmissions(prevSubmissions => prevSubmissions.map(s => s.id === submissionId ? {\n          ...s,\n          claimed: false\n        } : s));\n        setTransaction({\n          status: 'error',\n          message: 'Transaction cancelled in wallet. You can try to claim again when ready.',\n          type: 'claimReward'\n        });\n        setTimeout(() => {\n          setTransaction({\n            status: 'idle',\n            message: '',\n            type: ''\n          });\n        }, 3000);\n      } else if (isMakeMeBuyZala && error.message && error.message.includes('condition')) {\n        setFailedClaims(prev => ({\n          ...prev,\n          [bountyId]: 'failed'\n        }));\n        setTransaction({\n          status: 'error',\n          message: 'Claim failed for \"Make Me Buy ZALA\". You can try again using the RETRY button.',\n          type: 'claimReward'\n        });\n        setTimeout(() => {\n          setTransaction({\n            status: 'idle',\n            message: '',\n            type: ''\n          });\n        }, 3000);\n      } else {\n        setTransaction({\n          status: 'error',\n          message: 'Transaction failed. Please try again later.',\n          type: 'claimReward'\n        });\n        setTimeout(() => {\n          setTransaction({\n            status: 'idle',\n            message: '',\n            type: ''\n          });\n        }, 3000);\n      }\n    } finally {\n      setPendingClaims(prev => {\n        const updated = new Set(prev);\n        updated.delete(bountyId);\n        return updated;\n      });\n    }\n  };\n  const retryClaimReward = (submissionId, bountyId) => {\n    claimReward(submissionId, bountyId);\n  };\n  const claimZala = async submissionId => {\n    if (!userWallet || !devbaseClient) return;\n    const submission = submissions.find(s => s.id === submissionId);\n    if (submission.userId !== userWallet) {\n      setTransaction({\n        status: 'error',\n        message: 'Only the submission creator can claim ZALA tokens!',\n        type: 'claimZala'\n      });\n      setTimeout(() => setTransaction({\n        status: 'idle',\n        message: '',\n        type: ''\n      }), 3000);\n      return;\n    }\n    const voteCount = getSubmissionVoteCount(submissionId);\n    if (voteCount < 50) {\n      setTransaction({\n        status: 'error',\n        message: 'This submission needs at least 50 upvotes to claim ZALA tokens!',\n        type: 'claimZala'\n      });\n      setTimeout(() => setTransaction({\n        status: 'idle',\n        message: '',\n        type: ''\n      }), 3000);\n      return;\n    }\n    if (submission.claimed) {\n      setTransaction({\n        status: 'error',\n        message: 'ZALA tokens for this submission have already been claimed!',\n        type: 'claimZala'\n      });\n      setTimeout(() => setTransaction({\n        status: 'idle',\n        message: '',\n        type: ''\n      }), 3000);\n      return;\n    }\n    setTransaction({\n      status: 'pending',\n      message: 'Claiming your 100 $ZALA tokens...',\n      type: 'claimZala'\n    });\n    try {\n      try {\n        await devbaseClient.createEntity('claims', {\n          token: 'CxpGDVrX2rA6penHD2zhopPYNMXAtXutizWSktwytZ18',\n          amount: 100,\n          userId: userWallet,\n          bountyId: '',\n          submissionId: submissionId\n        });\n      } catch (claimError) {\n        console.log('Expected Devbase condition error, continuing with updates:', claimError);\n      }\n      const updatedSubmission = {\n        ...submission,\n        claimed: true\n      };\n      await devbaseClient.updateEntity('submissions', submissionId, updatedSubmission);\n      setSubmissions(prevSubmissions => prevSubmissions.map(s => s.id === submissionId ? {\n        ...s,\n        claimed: true\n      } : s));\n      setTransaction({\n        status: 'success',\n        message: 'Successfully claimed 100 $ZALA tokens!',\n        type: 'claimZala'\n      });\n      setTimeout(() => {\n        setTransaction({\n          status: 'idle',\n          message: '',\n          type: ''\n        });\n        setCurrentView('dashboard');\n        refreshData();\n      }, 2000);\n    } catch (error) {\n      console.error('Error claiming ZALA tokens:', error);\n      const isWalletRejection = error.name === 'WalletConnectionError' || error.constructor?.name === 'WalletConnectionError' || error.constructor?.name === 'WalletError' || error.toString().includes('WalletConnectionError') || error.toString().includes('User rejected') || error.message && (error.message.includes('User rejected') || error.message.includes('User rejected the request') || error.message.includes('WalletSignTransactionError') || error.message.includes('WalletConnectionError') || error.message.includes('Transaction was not confirmed') || error.message.includes('cancelled') || error.message.includes('canceled') || error.message.includes('rejected') || error.message.includes('timeout') || error.message.includes('denied') || error.message.includes('User declined') || error.message.includes('User denied'));\n      if (isWalletRejection) {\n        setSubmissions(prevSubmissions => prevSubmissions.map(s => s.id === submissionId ? {\n          ...s,\n          claimed: false\n        } : s));\n        setTransaction({\n          status: 'error',\n          message: 'Transaction cancelled in wallet. You can try to claim again when ready.',\n          type: 'claimZala'\n        });\n      } else {\n        setTransaction({\n          status: 'error',\n          message: 'Failed to claim ZALA tokens: ' + (error.message || 'Unknown error'),\n          type: 'claimZala'\n        });\n      }\n      setTimeout(() => {\n        setTransaction({\n          status: 'idle',\n          message: '',\n          type: ''\n        });\n      }, 3000);\n    }\n  };\n  const deleteSubmission = async submissionId => {\n    if (!userWallet || !devbaseClient) return;\n    try {\n      const submission = submissions.find(s => s.id === submissionId);\n      if (submission.userId !== userWallet) {\n        alert('You can only delete your own submissions!');\n        return;\n      }\n      await devbaseClient.deleteEntity('submissions', submissionId);\n      fetchData();\n    } catch (error) {\n      console.error('Error deleting submission:', error);\n    }\n  };\n  const selectBounty = bounty => {\n    setSelectedBounty(bounty);\n    setCurrentView('bounty');\n  };\n  const deleteBounty = async bountyId => {\n    if (!userWallet || !devbaseClient || !isAdmin) return;\n    setTransaction({\n      status: 'pending',\n      message: 'Deleting bounty as admin...',\n      type: 'deleteBounty'\n    });\n    try {\n      await devbaseClient.deleteEntity('bounties', bountyId);\n      setTransaction({\n        status: 'success',\n        message: 'Bounty deleted successfully!',\n        type: 'deleteBounty'\n      });\n      setTimeout(() => {\n        setTransaction({\n          status: 'idle',\n          message: '',\n          type: ''\n        });\n        fetchData();\n        setCurrentView('dashboard');\n      }, 2000);\n    } catch (error) {\n      console.error('Error deleting bounty:', error);\n      setTransaction({\n        status: 'error',\n        message: 'Failed to delete bounty: ' + (error.message || 'Unknown error'),\n        type: 'deleteBounty'\n      });\n      setTimeout(() => {\n        setTransaction({\n          status: 'idle',\n          message: '',\n          type: ''\n        });\n      }, 3000);\n    }\n  };\n  const getBountyStatus = bounty => {\n    const now = new Date();\n    const deadlineDate = new Date(bounty.deadline);\n    if (bounty.winner) {\n      return 'completed';\n    } else if (deadlineDate < now) {\n      return 'ended';\n    } else {\n      return 'active';\n    }\n  };\n  const formatDate = timestamp => {\n    return new Date(timestamp).toLocaleDateString('en-US', {\n      year: 'numeric',\n      month: 'short',\n      day: 'numeric'\n    });\n  };\n  const hasUnclaimedWinningSubmission = () => {\n    if (!userWallet) return false;\n    const userWinningBounties = bounties.filter(bounty => {\n      const winningSubmission = submissions.find(s => s.id === bounty.winner);\n      return winningSubmission && winningSubmission.userId === userWallet && !bounty.claimed;\n    });\n    return userWinningBounties.length > 0;\n  };\n  const [countdowns, setCountdowns] = useState({});\n  const getRemainingTime = deadline => {\n    const now = new Date();\n    const deadlineDate = new Date(deadline);\n    const diff = deadlineDate - now;\n    if (diff <= 0) return 'Ended';\n    const days = Math.floor(diff / (1000 * 60 * 60 * 24));\n    const hours = Math.floor(diff % (1000 * 60 * 60 * 24) / (1000 * 60 * 60));\n    const minutes = Math.floor(diff % (1000 * 60 * 60) / (1000 * 60));\n    const seconds = Math.floor(diff % (1000 * 60) / 1000);\n    return `${days}d ${hours}h ${minutes}m ${seconds}s`;\n  };\n  useEffect(() => {\n    const updateAllCountdowns = () => {\n      const newCountdowns = {};\n      bounties.forEach(bounty => {\n        newCountdowns[bounty.id] = getRemainingTime(bounty.deadline);\n      });\n      setCountdowns(newCountdowns);\n    };\n    updateAllCountdowns();\n    const intervalId = setInterval(updateAllCountdowns, 1000);\n    return () => clearInterval(intervalId);\n  }, [bounties]);\n  const getBountySubmissions = bountyId => {\n    return submissions.filter(s => s.bountyId === bountyId);\n  };\n  if (showSplash) {\n    return <div className=\"flex flex-col items-center justify-center min-h-screen bg-[#3498db]\">\n        <div className=\"relative w-10/12 max-w-xl h-96 overflow-hidden border-[3px] border-black shadow-[5px_5px_0_rgba(0,0,0,0.8)]\" style={{\n        imageRendering: 'pixelated'\n      }}>\n          <div className=\"absolute inset-0 bg-gradient-to-t from-[#3498db] via-transparent to-transparent z-10\"></div>\n          <video src={randomVideo} autoPlay muted loop className=\"w-full h-full object-cover\" />\n          <div className=\"absolute bottom-0 left-0 right-0 p-6 z-20 text-center\">\n            <h1 className=\"text-5xl sm:text-6xl md:text-7xl font-['Fredoka_One'] text-white mb-6 drop-shadow-[4px_4px_0_#000] tracking-tight uppercase leading-tight bg-[#ffde00] px-4 py-3 border-[4px] border-black shadow-[6px_6px_0_rgba(0,0,0,0.8)] inline-block\">\n              ZALA BOUNTY\n            </h1>\n            <p className=\"font-['Rubik_Mono_One'] text-lg sm:text-xl text-white uppercase tracking-wider bg-black px-4 py-2 inline-block border-[3px] border-white shadow-[3px_3px_0_rgba(255,255,255,0.5)]\">MEME & WIN $ZALA</p>\n            <motion.button onClick={() => setShowSplash(false)} className=\"bg-[#ff69b4] text-[#0a3d62] px-8 py-3 font-['VT323'] text-xl border-[2px] border-black shadow-[3px_3px_0_rgba(0,0,0,0.8)]\" variants={pixelButtonVariants} initial=\"rest\" whileHover=\"hover\" whileTap=\"tap\" transition={{\n            duration: 0.1\n          }}>\n              START GAME\n            </motion.button>\n          </div>\n        </div>\n      </div>;\n  }\n  return <div className=\"min-h-screen bg-[#3498db] font-['Courier_New'] text-[#0a3d62] overflow-x-hidden\">\n      <AnimatePresence>\n        {showClaimWarning && <motion.div initial={{\n        opacity: 0\n      }} animate={{\n        opacity: 1\n      }} exit={{\n        opacity: 0\n      }} className=\"fixed inset-0 bg-black/80 backdrop-blur-sm z-50 flex items-center justify-center px-4\" onClick={e => e.stopPropagation()}>\n            <motion.div initial={{\n          scale: 0.9,\n          opacity: 0\n        }} animate={{\n          scale: 1,\n          opacity: 1\n        }} exit={{\n          scale: 0.9,\n          opacity: 0\n        }} className=\"bg-[#ff3b30] border-[3px] border-black p-4 sm:p-8 max-w-md w-full shadow-[5px_5px_0_rgba(0,0,0,0.8)]\">\n              <div className=\"flex flex-col items-center text-center\">\n                <div className=\"mb-4 bg-[#ffde00] border-2 border-black p-3 shadow-[2px_2px_0_rgba(0,0,0,0.8)]\">\n                  <AlertCircle size={42} className=\"text-[#0a3d62]\" />\n                </div>\n                <h3 className=\"text-xl font-['Press_Start_2P'] text-white mb-4\">⚠️ WARNING ⚠️</h3>\n                <div className=\"bg-white p-4 border-[2px] border-black mb-4\">\n                  <p className=\"text-[#0a3d62] font-['VT323'] text-xl mb-2\">\n                    DO NOT REJECT THIS TRANSACTION IN YOUR WALLET!\n                  </p>\n                  <p className=\"text-[#0a3d62] font-['Courier_New'] mb-3\">\n                    If you reject or cancel the transaction in your wallet, you will lose your bounty and will not be able to claim it again.\n                  </p>\n                  <p className=\"text-[#ff3b30] font-['VT323'] text-lg\">\n                    You only get ONE chance to claim this reward.\n                  </p>\n                </div>\n                <div className=\"flex gap-4\">\n                  <motion.button onClick={() => {\n                setShowClaimWarning(false);\n                setPendingClaim(null);\n              }} className=\"px-4 py-2 border-[2px] border-black text-[#0a3d62] font-['VT323'] text-xl bg-white shadow-[3px_3px_0_rgba(0,0,0,0.8)]\" variants={pixelButtonVariants} initial=\"rest\" whileHover=\"hover\" whileTap=\"tap\">\n                    CANCEL\n                  </motion.button>\n                  <motion.button onClick={() => {\n                if (pendingClaim) {\n                  claimReward(pendingClaim.submissionId, pendingClaim.bountyId);\n                  setShowClaimWarning(false);\n                  setPendingClaim(null);\n                }\n              }} className=\"bg-[#4cd964] text-[#0a3d62] px-4 py-2 font-['VT323'] text-xl border-[2px] border-black shadow-[3px_3px_0_rgba(0,0,0,0.8)]\" variants={pixelButtonVariants} initial=\"rest\" whileHover=\"hover\" whileTap=\"tap\">\n                    I UNDERSTAND\n                  </motion.button>\n                </div>\n              </div>\n            </motion.div>\n          </motion.div>}\n        {transaction.status !== 'idle' && <motion.div initial={{\n        opacity: 0\n      }} animate={{\n        opacity: 1\n      }} exit={{\n        opacity: 0\n      }} className=\"fixed inset-0 bg-black/80 backdrop-blur-sm z-50 flex items-center justify-center px-4\" onClick={e => e.stopPropagation()}>\n            <motion.div initial={{\n          scale: 0.9,\n          opacity: 0\n        }} animate={{\n          scale: 1,\n          opacity: 1\n        }} exit={{\n          scale: 0.9,\n          opacity: 0\n        }} className=\"bg-[#33e6ff] border-[3px] border-black p-4 sm:p-8 max-w-md w-full shadow-[5px_5px_0_rgba(0,0,0,0.8)]\">\n              <div className=\"flex flex-col items-center text-center\">\n                {transaction.status === 'pending' && <>\n                    <motion.div animate={{\n                rotate: 360\n              }} transition={{\n                duration: 1.5,\n                repeat: Infinity,\n                ease: \"linear\"\n              }} className=\"mb-4\">\n                      <Loader size={48} className=\"text-[#0a3d62]\" />\n                    </motion.div>\n                    <h3 className=\"text-xl font-['Press_Start_2P'] text-[#0a3d62] mb-2\">PROCESSING...</h3>\n                    <p className=\"text-[#0a3d62]\">{transaction.message}</p>\n                  </>}\n                {transaction.status === 'success' && <>\n                    <motion.div initial={{\n                scale: 0\n              }} animate={{\n                scale: 1\n              }} transition={{\n                type: \"spring\"\n              }} className=\"mb-4 bg-[#4cd964] border-2 border-black p-3 shadow-[2px_2px_0_rgba(0,0,0,0.8)]\">\n                      <Check size={42} className=\"text-[#0a3d62]\" />\n                    </motion.div>\n                    <h3 className=\"text-xl font-['Press_Start_2P'] text-[#0a3d62] mb-2\">SUCCESS!</h3>\n                    <p className=\"text-[#0a3d62]\">{transaction.message}</p>\n                  </>}\n                {transaction.status === 'error' && <>\n                    <motion.div initial={{\n                scale: 0\n              }} animate={{\n                scale: 1\n              }} transition={{\n                type: \"spring\"\n              }} className=\"mb-4 bg-[#ff3b30] border-2 border-black p-3 shadow-[2px_2px_0_rgba(0,0,0,0.8)]\">\n                      <AlertCircle size={42} className=\"text-[#0a3d62]\" />\n                    </motion.div>\n                    <h3 className=\"text-xl font-['Press_Start_2P'] text-[#0a3d62] mb-2\">GAME OVER</h3>\n                    <p className=\"text-[#0a3d62]\">{transaction.message}</p>\n                  </>}\n              </div>\n            </motion.div>\n          </motion.div>}\n      </AnimatePresence>\n      <header className=\"py-4 px-3 sm:px-6 md:px-10 flex flex-col sm:flex-row gap-3 sm:gap-0 justify-between items-center border-b-[3px] border-black bg-white shadow-[0_4px_0_rgba(0,0,0,0.8)]\">\n        <div className=\"flex items-center space-x-2 sm:space-x-4 w-full sm:w-auto justify-between sm:justify-start\">\n          <h1 className=\"text-xl sm:text-3xl font-['Fredoka_One'] text-black tracking-tighter uppercase\">ZALA BOUNTY</h1>\n          <div className=\"flex items-center space-x-2\">\n            <motion.button onClick={() => setShowInfoPopup(true)} className=\"bg-[#ffde00] text-[#0a3d62] p-1.5 sm:p-2 rounded-full border-2 border-black shadow-[2px_2px_0_rgba(0,0,0,0.8)]\" variants={pixelButtonVariants} initial=\"rest\" whileHover=\"hover\" whileTap=\"tap\" aria-label=\"Information\">\n              <Info size={16} />\n            </motion.button>\n            <motion.a href=\"https://x.com/kasperwtrcolor\" target=\"_blank\" rel=\"noopener noreferrer\" className=\"bg-[#ff69b4] text-[#0a3d62] p-1.5 sm:p-2 rounded-full border-2 border-black shadow-[2px_2px_0_rgba(0,0,0,0.8)] inline-flex\" variants={pixelButtonVariants} initial=\"rest\" whileHover=\"hover\" whileTap=\"tap\" aria-label=\"Twitter\">\n              <Twitter size={16} />\n            </motion.a>\n          </div>\n        </div>\n        <div className=\"flex items-center flex-wrap justify-center gap-2 sm:space-x-2 md:space-x-4\">\n          <motion.button onClick={() => setCurrentView('dashboard')} className=\"text-[#0a3d62] font-['VT323'] text-base sm:text-xl border-2 border-black px-2 sm:px-3 py-1 shadow-[2px_2px_0_rgba(0,0,0,0.8)] bg-[#ffde00]\" variants={pixelButtonVariants} initial=\"rest\" whileHover=\"hover\" whileTap=\"tap\">\n            QUESTS\n          </motion.button>\n          <motion.a href=\"https://pump.fun/coin/CxpGDVrX2rA6penHD2zhopPYNMXAtXutizWSktwytZ18\" target=\"_blank\" rel=\"noopener noreferrer\" className=\"text-[#0a3d62] font-['VT323'] text-base sm:text-xl border-2 border-black px-2 sm:px-3 py-1 shadow-[2px_2px_0_rgba(0,0,0,0.8)] bg-[#4cd964] animate-pulse\" variants={pixelButtonVariants} initial=\"rest\" whileHover=\"hover\" whileTap=\"tap\">\n            BUY $ZALA\n          </motion.a>\n          <motion.button onClick={() => setCurrentView('profile')} className=\"relative text-[#0a3d62] font-['VT323'] text-base sm:text-xl border-2 border-black px-2 sm:px-3 py-1 shadow-[2px_2px_0_rgba(0,0,0,0.8)] bg-[#ffde00]\" variants={pixelButtonVariants} initial=\"rest\" whileHover=\"hover\" whileTap=\"tap\">\n            PROFILE\n            {hasUnclaimedWinningSubmission() && <motion.div className=\"absolute -top-1 -right-1 w-2 sm:w-3 h-2 sm:h-3 bg-[#ff3b30] rounded-full border border-black\" animate={{\n            scale: [1, 1.2, 1]\n          }} transition={{\n            duration: 1,\n            repeat: Infinity\n          }} />}\n          </motion.button>\n          {isAdmin && <motion.button onClick={() => setCurrentView('admin')} className=\"text-[#0a3d62] font-['VT323'] text-base sm:text-xl border-2 border-black px-2 sm:px-3 py-1 shadow-[2px_2px_0_rgba(0,0,0,0.8)] bg-[#6c5ce7]\" variants={pixelButtonVariants} initial=\"rest\" whileHover=\"hover\" whileTap=\"tap\">\n              ADMIN\n            </motion.button>}\n          <UserButton className=\"border-2 border-black shadow-[2px_2px_0_rgba(0,0,0,0.8)] bg-[#6c5ce7] text-[#0a3d62] px-2 sm:px-4 py-1 sm:py-2 font-['VT323'] text-sm sm:text-base\" />\n        </div>\n      </header>\n      <AnimatePresence>\n        {showInfoPopup && <motion.div initial={{\n        opacity: 0\n      }} animate={{\n        opacity: 1\n      }} exit={{\n        opacity: 0\n      }} className=\"fixed inset-0 bg-black/80 backdrop-blur-sm z-50 flex items-center justify-center\" onClick={() => setShowInfoPopup(false)}>\n            <motion.div initial={{\n          scale: 0.9,\n          opacity: 0\n        }} animate={{\n          scale: 1,\n          opacity: 1\n        }} exit={{\n          scale: 0.9,\n          opacity: 0\n        }} className=\"bg-[#33e6ff] border-[3px] border-black p-4 sm:p-8 max-w-2xl w-full mx-4 shadow-[5px_5px_0_rgba(0,0,0,0.8)]\" onClick={e => e.stopPropagation()}>\n              <div className=\"flex justify-between items-center mb-4 sm:mb-6\">\n                <h2 className=\"text-lg sm:text-2xl font-['Press_Start_2P'] text-[#0a3d62]\">HOW IT WORKS</h2>\n                <motion.button onClick={() => setShowInfoPopup(false)} className=\"bg-[#ff3b30] text-[#0a3d62] p-1.5 sm:p-2 border-[2px] border-black shadow-[2px_2px_0_rgba(0,0,0,0.8)]\" variants={pixelButtonVariants} initial=\"rest\" whileHover=\"hover\" whileTap=\"tap\">\n                  ✕\n                </motion.button>\n              </div>\n              <div className=\"space-y-6 text-[#0a3d62] font-['VT323'] text-lg\">\n                <div className=\"bg-white p-4 border-[2px] border-black shadow-[2px_2px_0_rgba(0,0,0,0.8)]\">\n                  <h3 className=\"font-['Press_Start_2P'] text-lg mb-2\">CREATE QUESTS</h3>\n                  <p>\n                    Fund a meme bounty with $ZALA tokens! Set a title, description, deadline, and reward amount. \n                    The $ZALA you commit is held in escrow until a winner is chosen.\n                  </p>\n                </div>\n                <div className=\"bg-white p-4 border-[2px] border-black shadow-[2px_2px_0_rgba(0,0,0,0.8)]\">\n                  <h3 className=\"font-['Press_Start_2P'] text-lg mb-2\">SUBMIT ENTRIES</h3>\n                  <p>\n                    Verify your Twitter handle in your profile, then create a tweet with the required hashtag.\n                    Submit your entry with a link to your tweet. Your submission must come from your verified Twitter account.\n                  </p>\n                </div>\n                <div className=\"bg-white p-4 border-[2px] border-black shadow-[2px_2px_0_rgba(0,0,0,0.8)]\">\n                  <h3 className=\"font-['Press_Start_2P'] text-lg mb-2\">UPVOTE & WIN</h3>\n                  <p>\n                    Other users can upvote your submissions. After the deadline, the quest creator selects a winner\n                    who can claim the bounty.\n                  </p>\n                </div>\n                <div className=\"bg-[#ffde00] p-4 border-[2px] border-black shadow-[2px_2px_0_rgba(0,0,0,0.8)]\">\n                  <div className=\"flex items-start\">\n                    <Trophy size={24} className=\"text-[#0a3d62] mr-3 mt-1 flex-shrink-0\" />\n                    <p>\n                      Connect your wallet to get started! Create quests, submit entries, and earn $ZALA rewards\n                      for your best memes. Check your profile regularly to see if you've won any bounties!\n                    </p>\n                  </div>\n                </div>\n              </div>\n            </motion.div>\n          </motion.div>}\n      </AnimatePresence>\n      <main className=\"container mx-auto py-4 sm:py-8 px-3 sm:px-4 md:px-6\">\n        {newItemsCount.submissions > 0 || newItemsCount.votes > 0 ? <motion.div initial={{\n        opacity: 0,\n        y: -20\n      }} animate={{\n        opacity: 1,\n        y: 0\n      }} className=\"fixed top-20 left-1/2 transform -translate-x-1/2 z-30 bg-[#ffde00] px-3 sm:px-4 py-2 sm:py-3 border-[2px] sm:border-[3px] border-black shadow-[3px_3px_0_rgba(0,0,0,0.8)] flex items-center\">\n            <div className=\"text-[#0a3d62] font-['VT323'] text-sm sm:text-xl mr-2 sm:mr-3\">\n              {newItemsCount.submissions > 0 && `${newItemsCount.submissions} new${newItemsCount.submissions > 1 ? ' subs' : ' sub'}`}\n              {newItemsCount.submissions > 0 && newItemsCount.votes > 0 && ' & '}\n              {newItemsCount.votes > 0 && `${newItemsCount.votes} vote${newItemsCount.votes > 1 ? 's' : ''}`}\n            </div>\n            <motion.button onClick={refreshData} className=\"bg-[#0a3d62] text-white p-1 sm:p-1.5 border-[2px] border-black flex items-center justify-center\" whileHover={{\n          scale: 1.05\n        }} whileTap={{\n          scale: 0.95\n        }}>\n              <RefreshCw size={16} className={isRefreshing ? \"animate-spin\" : \"\"} />\n            </motion.button>\n          </motion.div> : null}\n        <AnimatePresence mode=\"wait\">\n          {currentView === 'dashboard' && <motion.div key=\"dashboard\" initial={{\n          opacity: 0,\n          y: 10\n        }} animate={{\n          opacity: 1,\n          y: 0\n        }} exit={{\n          opacity: 0,\n          y: -10\n        }} transition={{\n          duration: 0.3\n        }} className=\"space-y-8\" variants={pixelContainerVariants}>\n              <div className=\"flex flex-col sm:flex-row justify-between items-start sm:items-center gap-3 sm:gap-0\">\n                <div className=\"flex flex-col sm:flex-row items-start sm:items-center gap-2 sm:gap-0\">\n                  <h2 className=\"text-2xl sm:text-4xl font-['Fredoka_One'] text-black drop-shadow-[3px_3px_0_rgba(255,222,0,0.8)] tracking-tighter uppercase\">ACTIVE QUESTS</h2>\n                  <div className=\"flex items-center\">\n                    <motion.button onClick={refreshData} className=\"ml-0 sm:ml-3 bg-[#33e6ff] p-2 border-[2px] border-black shadow-[2px_2px_0_rgba(0,0,0,0.8)] flex items-center justify-center\" whileHover={{\n                  scale: 1.05\n                }} whileTap={{\n                  scale: 0.95\n                }} title=\"Refresh data\">\n                      <RefreshCw size={16} className={isRefreshing ? \"animate-spin text-[#0a3d62]\" : \"text-[#0a3d62]\"} />\n                    </motion.button>\n                    <div className=\"ml-2 text-xs sm:text-sm text-[#0a3d62] font-['VT323']\">\n                      Last: {new Date(lastRefreshed).toLocaleTimeString()}\n                    </div>\n                  </div>\n                </div>\n                <motion.button onClick={() => setCurrentView('createBounty')} className=\"bg-[#ff69b4] text-[#0a3d62] px-3 sm:px-6 py-2 sm:py-3 font-['VT323'] text-base sm:text-xl border-2 sm:border-3 border-black shadow-[3px_3px_0_rgba(0,0,0,0.8)]\" variants={pixelButtonVariants} initial=\"rest\" whileHover=\"hover\" whileTap=\"tap\">\n                  CREATE QUEST\n                </motion.button>\n              </div>\n              {loading ? <div className=\"flex justify-center py-12\">\n                  <div className=\"h-12 w-12 relative\">\n                    <div className=\"animate-ping absolute inset-0 bg-[#ffde00] opacity-75\"></div>\n                    <div className=\"relative w-full h-full bg-[#ffde00] border-2 border-black\"></div>\n                  </div>\n                </div> : <div className=\"grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-4 sm:gap-6\">\n                  {bounties.length === 0 ? <div className=\"col-span-full text-center py-8 sm:py-12 border-[3px] border-black bg-[#33e6ff] shadow-[5px_5px_0_rgba(0,0,0,0.8)]\">\n                      <p className=\"text-xl font-['VT323'] text-[#0a3d62]\">NO QUESTS YET. CREATE THE FIRST ONE!</p>\n                    </div> : bounties.map(bounty => <motion.div key={bounty.id} variants={pixelItemVariants} whileHover={{\n              y: -5,\n              scale: 1.02\n            }} className={`p-6 border-[3px] border-black ${getBountyStatus(bounty) === 'active' ? 'bg-[#4cd964] shadow-[0_0_15px_rgba(76,217,100,0.7)] animate-pulse' : getBountyStatus(bounty) === 'ended' ? 'bg-[#ff3b30] shadow-[0_0_15px_rgba(255,59,48,0.7)]' : 'bg-[#33e6ff]'} cursor-pointer shadow-[5px_5px_0_rgba(0,0,0,0.8)]`} onClick={() => selectBounty(bounty)}>\n                        <h3 className=\"text-xl font-['Press_Start_2P'] text-[#0a3d62] mb-3\">{bounty.title}</h3>\n                        <p className=\"font-['Courier_New'] text-[#0a3d62] mb-4 line-clamp-2\">{bounty.description}</p>\n                        {getBountyStatus(bounty) === 'ended' && !bounty.winner && <div className=\"bg-[#ff3b30] text-[#0a3d62] border-2 border-black px-3 py-1 mb-3 shadow-[2px_2px_0_rgba(0,0,0,0.8)]\">\n                            <p className=\"font-['VT323'] text-lg\">Waiting for Winner to be Selected</p>\n                          </div>}\n                        <div className=\"flex flex-col sm:flex-row justify-between items-start sm:items-center gap-2 sm:gap-0 mb-4\">\n                          <div className=\"flex items-center text-[#0a3d62]\">\n                            <Calendar size={14} className=\"mr-1 flex-shrink-0\" />\n                            <span className=\"font-['VT323'] text-sm sm:text-lg truncate max-w-[100px] sm:max-w-none\">{formatDate(bounty.deadline)}</span>\n                          </div>\n                          <div className=\"flex items-center text-[#0a3d62]\">\n                            <Clock size={14} className=\"mr-1 flex-shrink-0\" />\n                            <span className=\"font-['VT323'] text-sm sm:text-lg\">{countdowns[bounty.id] || getRemainingTime(bounty.deadline)}</span>\n                          </div>\n                        </div>\n                        <div className=\"flex flex-wrap justify-between items-center gap-2\">\n                          <div className=\"bg-[#ff69b4] border-2 border-black px-2 sm:px-3 py-1 text-[#0a3d62] shadow-[2px_2px_0_rgba(0,0,0,0.8)]\">\n                            <span className=\"font-['VT323'] text-sm sm:text-lg\">{bounty.amount} $ZALA</span>\n                          </div>\n                          <div className=\"flex items-center\">\n                            <Award size={14} className=\"mr-1 text-[#0a3d62] flex-shrink-0\" />\n                            <span className=\"text-[#0a3d62] font-['VT323'] text-sm sm:text-lg\">\n                              {getBountySubmissions(bounty.id).length} ENTRIES\n                            </span>\n                          </div>\n                        </div>\n                      </motion.div>)}\n                </div>}\n            </motion.div>}\n          {currentView === 'createBounty' && <motion.div key=\"createBounty\" initial={{\n          opacity: 0,\n          y: 10\n        }} animate={{\n          opacity: 1,\n          y: 0\n        }} exit={{\n          opacity: 0,\n          y: -10\n        }} transition={{\n          duration: 0.3\n        }} className=\"max-w-2xl mx-auto bg-[#33e6ff] p-8 border-[3px] border-black shadow-[5px_5px_0_rgba(0,0,0,0.8)]\">\n              <h2 className=\"text-3xl font-['Fredoka_One'] text-black mb-6 tracking-tighter uppercase text-center\">CREATE NEW QUEST</h2>\n              <form onSubmit={createBounty} className=\"space-y-6\">\n                <div>\n                  <label className=\"block text-[#0a3d62] font-['VT323'] text-xl mb-2\">QUEST TITLE</label>\n                  <input type=\"text\" value={formData.title} onChange={e => setFormData({\n                ...formData,\n                title: e.target.value\n              })} className=\"w-full bg-white border-[2px] border-black px-4 py-3 focus:outline-none focus:border-[#ffde00] text-[#0a3d62] font-['Courier_New'] shadow-[2px_2px_0_rgba(0,0,0,0.8)]\" required />\n                </div>\n                <div>\n                  <label className=\"block text-[#0a3d62] font-['VT323'] text-xl mb-2\">DESCRIPTION</label>\n                  <textarea value={formData.description} onChange={e => setFormData({\n                ...formData,\n                description: e.target.value\n              })} className=\"w-full bg-white border-[2px] border-black px-4 py-3 h-24 focus:outline-none focus:border-[#ffde00] text-[#0a3d62] font-['Courier_New'] shadow-[2px_2px_0_rgba(0,0,0,0.8)]\" required />\n                </div>\n                <div>\n                  <label className=\"block text-[#0a3d62] font-['VT323'] text-xl mb-2\">DEADLINE</label>\n                  <input type=\"datetime-local\" value={formData.deadline} onChange={e => setFormData({\n                ...formData,\n                deadline: e.target.value\n              })} min={new Date(new Date().getTime() - new Date().getTimezoneOffset() * 60000).toISOString().slice(0, 16)} className={`w-full bg-white border-[2px] ${new Date(formData.deadline) <= new Date() ? 'border-[#ff3b30]' : 'border-black'} px-4 py-3 focus:outline-none focus:border-[#ffde00] text-[#0a3d62] font-['Courier_New'] shadow-[2px_2px_0_rgba(0,0,0,0.8)] cursor-pointer`} required />\n                  <p className=\"text-sm text-[#0a3d62] font-['VT323'] mt-1\">\n                    {new Date(formData.deadline) <= new Date() ? <span className=\"text-[#ff3b30]\">DEADLINE MUST BE IN THE FUTURE!</span> : \"CLICK TO OPEN DATE & TIME PICKER\"}\n                  </p>\n                </div>\n                <div>\n                  <label className=\"block text-[#0a3d62] font-['VT323'] text-xl mb-2\">QUEST REWARD</label>\n                  <div className=\"relative\">\n                    <input type=\"number\" value={formData.amount} onChange={e => setFormData({\n                  ...formData,\n                  amount: e.target.value\n                })} min=\"1\" className=\"w-full bg-white border-[2px] border-black px-4 py-3 focus:outline-none focus:border-[#ffde00] text-[#0a3d62] font-['Courier_New'] shadow-[2px_2px_0_rgba(0,0,0,0.8)]\" />\n                    <div className=\"absolute right-4 top-1/2 transform -translate-y-1/2 text-[#0a3d62] font-['VT323'] text-xl\">$ZALA</div>\n                  </div>\n                  <p className=\"text-sm text-[#0a3d62] font-['VT323'] mt-1\">THE QUEST CREATOR WILL FUND THIS AMOUNT OF $ZALA, WHICH WILL BE AWARDED TO THE WINNER</p>\n                </div>\n                <div className=\"flex justify-end space-x-4 pt-4\">\n                  <motion.button type=\"button\" onClick={() => setCurrentView('dashboard')} className=\"px-6 py-3 border-[2px] border-black text-[#0a3d62] font-['VT323'] text-xl bg-white shadow-[3px_3px_0_rgba(0,0,0,0.8)]\" variants={pixelButtonVariants} initial=\"rest\" whileHover=\"hover\" whileTap=\"tap\">\n                    CANCEL\n                  </motion.button>\n                  <motion.button type=\"submit\" className=\"bg-[#ff69b4] text-[#0a3d62] px-6 py-3 font-['VT323'] text-xl border-[2px] border-black shadow-[3px_3px_0_rgba(0,0,0,0.8)]\" variants={pixelButtonVariants} initial=\"rest\" whileHover=\"hover\" whileTap=\"tap\">\n                    CREATE QUEST\n                  </motion.button>\n                </div>\n              </form>\n            </motion.div>}\n          {currentView === 'bounty' && selectedBounty && <motion.div key=\"bounty\" initial={{\n          opacity: 0,\n          y: 10\n        }} animate={{\n          opacity: 1,\n          y: 0\n        }} exit={{\n          opacity: 0,\n          y: -10\n        }} transition={{\n          duration: 0.3\n        }} className=\"space-y-8\">\n              <div className=\"flex flex-wrap items-center gap-2\">\n                <motion.button onClick={() => setCurrentView('dashboard')} className=\"flex items-center text-[#0a3d62] font-['VT323'] text-base sm:text-xl border-[2px] border-black px-2 sm:px-3 py-1 shadow-[2px_2px_0_rgba(0,0,0,0.8)] bg-[#ffde00]\" variants={pixelButtonVariants} initial=\"rest\" whileHover=\"hover\" whileTap=\"tap\">\n                  <ArrowRight size={14} className=\"mr-1 sm:mr-2 transform rotate-180\" />\n                  BACK TO QUESTS\n                </motion.button>\n                <motion.button onClick={refreshData} className=\"bg-[#33e6ff] p-1.5 sm:p-2 border-[2px] border-black shadow-[2px_2px_0_rgba(0,0,0,0.8)] flex items-center justify-center\" whileHover={{\n              scale: 1.05\n            }} whileTap={{\n              scale: 0.95\n            }} title=\"Refresh data\">\n                  <RefreshCw size={16} className={isRefreshing ? \"animate-spin text-[#0a3d62]\" : \"text-[#0a3d62]\"} />\n                </motion.button>\n                <div className=\"text-xs sm:text-sm text-[#0a3d62] font-['VT323']\">\n                  Last: {new Date(lastRefreshed).toLocaleTimeString()}\n                </div>\n              </div>\n              <div className=\"bg-[#33e6ff] p-4 sm:p-8 border-[3px] border-black shadow-[5px_5px_0_rgba(0,0,0,0.8)]\">\n                <div className=\"flex flex-col sm:flex-row justify-between items-start gap-3 sm:gap-0 mb-4 sm:mb-6\">\n                  <div>\n                    <h2 className=\"text-2xl sm:text-4xl font-['Fredoka_One'] text-black mb-2 break-words tracking-tighter uppercase\">{selectedBounty.title}</h2>\n                    <p className=\"text-[#0a3d62] font-['VT323'] text-base sm:text-xl\">CREATED BY {selectedBounty.creator.substring(0, 6)}...{selectedBounty.creator.substring(selectedBounty.creator.length - 4)}</p>\n                  </div>\n                  <div className=\"flex items-center gap-2 self-end sm:self-auto\">\n                    {isAdmin && <motion.button onClick={() => deleteBounty(selectedBounty.id)} className=\"bg-[#ff3b30] text-[#0a3d62] p-1.5 sm:p-2 border-[2px] border-black shadow-[2px_2px_0_rgba(0,0,0,0.8)]\" title=\"Admin: Delete Quest\" variants={pixelButtonVariants} initial=\"rest\" whileHover=\"hover\" whileTap=\"tap\">\n                        <Trash2 size={16} />\n                      </motion.button>}\n                    <div className=\"bg-[#ff69b4] border-[2px] border-black px-3 sm:px-4 py-1 sm:py-2 shadow-[2px_2px_0_rgba(0,0,0,0.8)]\">\n                      <span className=\"font-['VT323'] text-base sm:text-xl text-[#0a3d62]\">{selectedBounty.amount} $ZALA</span>\n                    </div>\n                  </div>\n                </div>\n                <p className=\"text-[#0a3d62] font-['Courier_New'] mb-6 p-3 bg-white border-[2px] border-black\">{selectedBounty.description}</p>\n                <div className=\"flex flex-wrap gap-3 sm:gap-6 mb-6 sm:mb-8\">\n                  <div className={`p-3 sm:p-4 flex items-center border-[2px] border-black shadow-[2px_2px_0_rgba(0,0,0,0.8)] ${getBountyStatus(selectedBounty) === 'active' ? 'bg-[#4cd964]' : getBountyStatus(selectedBounty) === 'ended' ? 'bg-[#ff3b30]' : 'bg-white'}`}>\n                    <Clock size={16} className={`mr-2 sm:mr-3 text-[#0a3d62] flex-shrink-0`} />\n                    <div>\n                      <p className=\"text-[#0a3d62] font-['VT323'] text-xs sm:text-base\">TIME LEFT</p>\n                      <p className=\"text-[#0a3d62] font-['VT323'] text-sm sm:text-xl\">{countdowns[selectedBounty.id] || getRemainingTime(selectedBounty.deadline)}</p>\n                    </div>\n                  </div>\n                  {getBountyStatus(selectedBounty) === 'ended' && !selectedBounty.winner && <div className=\"bg-[#ff3b30] p-3 sm:p-4 flex items-center border-[2px] border-black shadow-[2px_2px_0_rgba(0,0,0,0.8)]\">\n                      <Trophy size={16} className=\"mr-2 sm:mr-3 text-[#0a3d62] flex-shrink-0\" />\n                      <div>\n                        <p className=\"text-[#0a3d62] font-['VT323'] text-xs sm:text-base\">STATUS</p>\n                        <p className=\"text-[#0a3d62] font-['VT323'] text-sm sm:text-xl\">Waiting for Winner</p>\n                      </div>\n                    </div>}\n                  <div className=\"bg-white p-3 sm:p-4 flex items-center border-[2px] border-black shadow-[2px_2px_0_rgba(0,0,0,0.8)]\">\n                    <Award size={16} className=\"mr-2 sm:mr-3 text-[#0a3d62] flex-shrink-0\" />\n                    <div>\n                      <p className=\"text-[#0a3d62] font-['VT323'] text-xs sm:text-base\">ENTRIES</p>\n                      <p className=\"text-[#0a3d62] font-['VT323'] text-sm sm:text-xl\">{getBountySubmissions(selectedBounty.id).length}</p>\n                    </div>\n                  </div>\n                  <div className=\"bg-white p-3 sm:p-4 flex items-center border-[2px] border-black shadow-[2px_2px_0_rgba(0,0,0,0.8)]\">\n                    <Trophy size={16} className=\"mr-2 sm:mr-3 text-[#0a3d62] flex-shrink-0\" />\n                    <div>\n                      <p className=\"text-[#0a3d62] font-['VT323'] text-xs sm:text-base\">STATUS</p>\n                      <p className={`font-['VT323'] text-sm sm:text-xl ${selectedBounty.winner ? selectedBounty.claimed ? 'text-[#0a3d62]' : 'text-[#ff69b4]' : getBountyStatus(selectedBounty) === 'active' ? 'text-[#4cd964]' : 'text-[#ff3b30]'}`}>\n                        {selectedBounty.winner ? selectedBounty.claimed ? 'CLAIMED' : 'WINNER CHOSEN' : getBountyStatus(selectedBounty) === 'active' ? 'ACTIVE' : 'ENDED'}\n                      </p>\n                    </div>\n                  </div>\n                </div>\n                {new Date(selectedBounty.deadline) > new Date() && !selectedBounty.winner && <motion.button onClick={() => setCurrentView('createSubmission')} className=\"bg-[#ff69b4] text-[#0a3d62] px-6 py-3 font-['VT323'] text-xl border-[3px] border-black shadow-[3px_3px_0_rgba(0,0,0,0.8)] mb-8\" variants={pixelButtonVariants} initial=\"rest\" whileHover=\"hover\" whileTap=\"tap\">\n                    SUBMIT ENTRY\n                  </motion.button>}\n                {new Date(selectedBounty.deadline) < new Date() && getBountySubmissions(selectedBounty.id).length === 0 && userWallet === selectedBounty.creator && !selectedBounty.winner && <motion.button onClick={() => setCurrentView('extendDeadline')} className=\"bg-[#ffde00] text-[#0a3d62] px-6 py-3 font-['VT323'] text-xl border-[3px] border-black shadow-[3px_3px_0_rgba(0,0,0,0.8)] mb-8 animate-pulse\" variants={pixelButtonVariants} initial=\"rest\" whileHover=\"hover\" whileTap=\"tap\">\n                     <Clock size={20} className=\"inline-block mr-2\" />\n                     EXTEND DEADLINE\n                 </motion.button>}\n                <h3 className=\"text-2xl font-['Fredoka_One'] text-black mb-4 tracking-tighter uppercase\">SUBMISSIONS</h3>\n                {getBountySubmissions(selectedBounty.id).length === 0 ? <div className=\"text-center py-12 border-[3px] border-black bg-white shadow-[5px_5px_0_rgba(0,0,0,0.8)]\">\n                    <p className=\"text-xl font-['VT323'] text-[#0a3d62]\">NO SUBMISSIONS YET.</p>\n                  </div> : <div className=\"space-y-6\">\n                    {getBountySubmissions(selectedBounty.id).map(submission => <div key={submission.id} className={`bg-white p-6 border-[3px] border-black ${selectedBounty.winner === submission.id ? 'border-[#4cd964] shadow-[0_0_15px_rgba(76,217,100,0.7)]' : ''} transition-all shadow-[5px_5px_0_rgba(0,0,0,0.8)]`}>\n                        {selectedBounty.winner === submission.id && <div className=\"bg-[#4cd964] text-[#0a3d62] px-3 py-1 border-[2px] border-black text-sm font-['Press_Start_2P'] inline-block mb-3 shadow-[2px_2px_0_rgba(0,0,0,0.8)]\">\n                            WINNER 🏆\n                          </div>}\n                        <h4 className=\"text-xl font-['Press_Start_2P'] text-[#0a3d62] mb-2\">{submission.title}</h4>\n                        <p className=\"text-[#0a3d62] font-['VT323'] text-lg mb-2\">BY {submission.userId.substring(0, 6)}...{submission.userId.substring(submission.userId.length - 4)}</p>\n                        <div className=\"bg-[#33e6ff] p-4 mb-4 border-[2px] border-black shadow-[2px_2px_0_rgba(0,0,0,0.8)]\">\n                          <div className=\"flex flex-col space-y-2\">\n                    <div className=\"flex items-center\">\n                          <Twitter size={16} className=\"mr-2 text-[#0a3d62]\" />\n                          <a href={submission.tweetUrl} target=\"_blank\" rel=\"noopener noreferrer\" className=\"text-[#0a3d62] hover:text-[#ff69b4] overflow-hidden overflow-ellipsis font-['VT323'] text-lg\">\n                            {submission.tweetUrl}\n                          </a>\n                        </div>\n                        {submission.twitterHandle && submission.userId === userWallet && twitterHandleVerified && twitterHandle.toLowerCase() === submission.twitterHandle.toLowerCase() && <div className=\"flex items-center mt-1\">\n                            <ExternalLink size={14} className=\"mr-2 text-[#0a3d62]\" />\n                            <span className=\"text-[#0a3d62] font-['VT323'] text-lg\">\n                              Verified owner: @{submission.twitterHandle}\n                            </span>\n                          </div>}\n                            <div className=\"bg-[#4cd964] text-[#0a3d62] px-2 py-1 border-[2px] border-black inline-block font-['VT323']\">\n                              #{`BountyMeme_${bounties.find(b => b.id === submission.bountyId)?.title.replace(/\\s+/g, '').substring(0, 15) || 'unknown'}`}\n                            </div>\n                          </div>\n                          {submission.imageUrl && <img src={submission.imageUrl} alt={submission.title} className=\"w-full h-64 object-cover border-[2px] border-black mt-2\" style={{\n                    imageRendering: 'pixelated'\n                  }} />}\n                        </div>\n                        <div className=\"flex flex-wrap justify-between items-center gap-2 sm:gap-0\">\n                          <div className=\"flex flex-wrap items-center gap-2 sm:gap-4\">\n                            <motion.button onClick={() => voteSubmission(submission.id)} className=\"flex items-center text-[#0a3d62] bg-[#ffde00] px-2 py-1 font-['VT323'] text-sm sm:text-lg border-[2px] border-black shadow-[2px_2px_0_rgba(0,0,0,0.8)]\" disabled={!userWallet} variants={pixelButtonVariants} initial=\"rest\" whileHover=\"hover\" whileTap=\"tap\">\n                              <ThumbsUp size={14} className=\"mr-1\" />\n                              <motion.span animate={animatingVote === submission.id ? {\n                        scale: [1, 1.5, 1],\n                        color: ['#0a3d62', '#ff69b4', '#0a3d62']\n                      } : {\n                        scale: 1\n                      }} transition={{\n                        duration: 0.5\n                      }}>\n                                {getSubmissionVoteCount(submission.id)}\n                              </motion.span>\n                              {animatingVote === submission.id && <motion.div className=\"absolute inset-0 pointer-events-none\" initial={{\n                        opacity: 1\n                      }} animate={{\n                        opacity: 0,\n                        scale: [1, 1.5]\n                      }} transition={{\n                        duration: 0.7\n                      }}>\n                                  {[...Array(8)].map((_, i) => <motion.div key={i} className=\"absolute w-2 h-2 bg-[#ffde00] border-[1px] border-black\" initial={{\n                          top: '50%',\n                          left: '50%',\n                          opacity: 1\n                        }} animate={{\n                          top: ['50%', `${30 + Math.random() * 40}%`],\n                          left: ['50%', `${30 + Math.random() * 40}%`],\n                          opacity: 0\n                        }} transition={{\n                          duration: 0.7\n                        }} />)}\n                                </motion.div>}\n                            </motion.button>\n                            {userWallet === selectedBounty.creator && new Date(selectedBounty.deadline) < new Date() && !selectedBounty.winner && <motion.button onClick={() => chooseWinner(submission.id, selectedBounty.id)} className=\"relative bg-[#4cd964] text-[#0a3d62] px-3 py-1 font-['VT323'] text-lg border-[2px] border-black shadow-[2px_2px_0_rgba(0,0,0,0.8)]\" variants={pixelButtonVariants} initial=\"rest\" whileHover=\"hover\" whileTap=\"tap\">\n                                SELECT WINNER\n                                {winnerAnimation === submission.id && <motion.div className=\"absolute inset-0 pointer-events-none overflow-hidden\">\n                                    {[...Array(30)].map((_, i) => <motion.div key={i} className=\"absolute w-3 h-3\" style={{\n                          backgroundColor: ['#ff69b4', '#ffde00', '#33e6ff', '#4cd964', '#6c5ce7'][i % 5],\n                          top: `${Math.random() * 100}%`,\n                          left: `${Math.random() * 100}%`\n                        }} initial={{\n                          opacity: 0,\n                          scale: 0\n                        }} animate={{\n                          opacity: [0, 1, 0],\n                          scale: [0, 1, 0],\n                          rotate: [0, 180],\n                          y: [0, -20 - Math.random() * 50],\n                          x: [0, (Math.random() - 0.5) * 40]\n                        }} transition={{\n                          duration: 1 + Math.random(),\n                          delay: Math.random() * 0.5\n                        }} />)}\n                                  </motion.div>}\n                              </motion.button>}\n                            {userWallet === submission.userId && selectedBounty.winner === submission.id && (selectedBounty.claimed || claimedBounties[selectedBounty.id] === 'claimed' ? <div className=\"bg-[#6c5ce7] text-[#0a3d62] px-3 py-1 font-['VT323'] text-lg border-[2px] border-black shadow-[2px_2px_0_rgba(0,0,0,0.8)]\">\n                                  ALREADY CLAIMED\n                                </div> : pendingClaims.has(selectedBounty.id) ? <div className=\"bg-[#33e6ff] text-[#0a3d62] px-3 py-1 font-['VT323'] text-lg border-[2px] border-black shadow-[2px_2px_0_rgba(0,0,0,0.8)] flex items-center\">\n                                  <span className=\"mr-2\">PENDING</span>\n                                  <div className=\"animate-spin h-4 w-4 border-2 border-[#0a3d62] border-t-transparent rounded-full\"></div>\n                                </div> : failedClaims[selectedBounty.id] === 'failed' && isMakeMeBuyZalaBounty(selectedBounty) ? <motion.button onClick={() => retryClaimReward(submission.id, selectedBounty.id)} className=\"bg-[#ffde00] text-[#0a3d62] px-3 py-1 font-['VT323'] text-lg border-[2px] border-black shadow-[2px_2px_0_rgba(0,0,0,0.8)] animate-pulse\" variants={pixelButtonVariants} initial=\"rest\" whileHover=\"hover\" whileTap=\"tap\">\n                                  RETRY CLAIM\n                                </motion.button> : <motion.button onClick={() => initiateClaimProcess(submission.id, selectedBounty.id)} className=\"bg-[#ff69b4] text-[#0a3d62] px-3 py-1 font-['VT323'] text-lg border-[2px] border-black shadow-[2px_2px_0_rgba(0,0,0,0.8)] animate-pulse\" variants={pixelButtonVariants} initial=\"rest\" whileHover=\"hover\" whileTap=\"tap\">\n                                  CLAIM ${selectedBounty.amount} $ZALA\n                                </motion.button>)}\n                            {userWallet === submission.userId && submission.upvotes >= 50 && (submission.claimed ? <div className=\"bg-[#6c5ce7] text-[#0a3d62] px-3 py-1 font-['VT323'] text-lg border-[2px] border-black shadow-[2px_2px_0_rgba(0,0,0,0.8)]\">\n                                  ALREADY CLAIMED\n                                </div> : <motion.button onClick={() => claimZala(submission.id)} className=\"bg-[#ff69b4] text-[#0a3d62] px-3 py-1 font-['VT323'] text-lg border-[2px] border-black shadow-[2px_2px_0_rgba(0,0,0,0.8)]\" variants={pixelButtonVariants} initial=\"rest\" whileHover=\"hover\" whileTap=\"tap\">\n                                  CLAIM 100 $ZALA\n                                </motion.button>)}\n                          </div>\n                          {userWallet === submission.userId && !selectedBounty.winner && <motion.button onClick={() => deleteSubmission(submission.id)} className=\"text-[#0a3d62] hover:text-[#ff3b30] bg-white px-2 py-1 border-[2px] border-black shadow-[2px_2px_0_rgba(0,0,0,0.8)]\" variants={pixelButtonVariants} initial=\"rest\" whileHover=\"hover\" whileTap=\"tap\">\n                              <Trash2 size={16} />\n                            </motion.button>}\n                        </div>\n                      </div>)}\n                  </div>}\n              </div>\n            </motion.div>}\n          {currentView === 'extendDeadline' && selectedBounty && <motion.div key=\"extendDeadline\" initial={{\n          opacity: 0,\n          y: 10\n        }} animate={{\n          opacity: 1,\n          y: 0\n        }} exit={{\n          opacity: 0,\n          y: -10\n        }} transition={{\n          duration: 0.3\n        }} className=\"max-w-2xl mx-auto bg-[#33e6ff] p-8 border-[3px] border-black shadow-[5px_5px_0_rgba(0,0,0,0.8)]\">\n              <h2 className=\"text-3xl font-['Fredoka_One'] text-black mb-6 tracking-tighter uppercase text-center\">EXTEND DEADLINE</h2>\n              <div className=\"bg-[#ffde00] p-4 border-[2px] border-black shadow-[2px_2px_0_rgba(0,0,0,0.8)] mb-6\">\n                <div className=\"flex items-start\">\n                  <Clock size={24} className=\"text-[#0a3d62] mr-3 mt-1 flex-shrink-0\" />\n                  <div>\n                    <h3 className=\"text-lg font-['VT323'] text-[#0a3d62] mb-2\">NO ENTRIES RECEIVED</h3>\n                    <p className=\"text-[#0a3d62] font-['Courier_New'] mb-3\">\n                      Your quest \"{selectedBounty.title}\" received no entries before the deadline. \n                      You can extend the deadline to give more time for submissions.\n                    </p>\n                    <p className=\"text-[#0a3d62] font-['VT323']\">\n                      Current deadline: {formatDate(selectedBounty.deadline)} (ENDED)\n                    </p>\n                  </div>\n                </div>\n              </div>\n              <form onSubmit={extendDeadline} className=\"space-y-6\">\n                <div>\n                  <label className=\"block text-[#0a3d62] font-['VT323'] text-xl mb-2\">NEW DEADLINE</label>\n                  <input type=\"datetime-local\" value={extensionData.deadline} onChange={e => setExtensionData({\n                ...extensionData,\n                deadline: e.target.value\n              })} min={new Date(new Date().getTime() - new Date().getTimezoneOffset() * 60000).toISOString().slice(0, 16)} className={`w-full bg-white border-[2px] ${new Date(extensionData.deadline) <= new Date() ? 'border-[#ff3b30]' : 'border-black'} px-4 py-3 focus:outline-none focus:border-[#ffde00] text-[#0a3d62] font-['Courier_New'] shadow-[2px_2px_0_rgba(0,0,0,0.8)] cursor-pointer`} required />\n                  <p className=\"text-sm text-[#0a3d62] font-['VT323'] mt-1\">\n                    {new Date(extensionData.deadline) <= new Date() ? <span className=\"text-[#ff3b30]\">NEW DEADLINE MUST BE IN THE FUTURE!</span> : \"CLICK TO OPEN DATE & TIME PICKER\"}\n                  </p>\n                </div>\n                <div className=\"flex justify-end space-x-4 pt-4\">\n                  <motion.button type=\"button\" onClick={() => setCurrentView('bounty')} className=\"px-6 py-3 border-[2px] border-black text-[#0a3d62] font-['VT323'] text-xl bg-white shadow-[3px_3px_0_rgba(0,0,0,0.8)]\" variants={pixelButtonVariants} initial=\"rest\" whileHover=\"hover\" whileTap=\"tap\">\n                    CANCEL\n                  </motion.button>\n                  <motion.button type=\"submit\" className=\"bg-[#4cd964] text-[#0a3d62] px-6 py-3 font-['VT323'] text-xl border-[2px] border-black shadow-[3px_3px_0_rgba(0,0,0,0.8)]\" variants={pixelButtonVariants} initial=\"rest\" whileHover=\"hover\" whileTap=\"tap\">\n                    EXTEND DEADLINE\n                  </motion.button>\n                </div>\n              </form>\n            </motion.div>}\n          {currentView === 'createSubmission' && selectedBounty && <motion.div key=\"createSubmission\" initial={{\n          opacity: 0,\n          y: 10\n        }} animate={{\n          opacity: 1,\n          y: 0\n        }} exit={{\n          opacity: 0,\n          y: -10\n        }} transition={{\n          duration: 0.3\n        }} className=\"max-w-2xl mx-auto bg-[#33e6ff] p-8 border-[3px] border-black shadow-[5px_5px_0_rgba(0,0,0,0.8)]\">\n              <h2 className=\"text-3xl font-['Fredoka_One'] text-black mb-6 tracking-tighter uppercase text-center\">SUBMIT ENTRY</h2>\n              <p className=\"text-[#0a3d62] mb-6\">For quest: {selectedBounty.title}</p>\n              {!twitterHandleVerified ? <div className=\"bg-[#ff3b30] p-6 border-[3px] border-black shadow-[5px_5px_0_rgba(0,0,0,0.8)] mb-6\">\n                  <div className=\"flex items-start\">\n                    <AlertCircle size={28} className=\"text-[#0a3d62] mr-3 mt-1 flex-shrink-0\" />\n                    <div>\n                      <h3 className=\"text-xl font-['Press_Start_2P'] text-[#0a3d62] mb-2\">TWITTER ACCOUNT REQUIRED</h3>\n                      <p className=\"text-[#0a3d62] font-['VT323'] text-lg mb-4\">\n                        YOU MUST VERIFY YOUR TWITTER ACCOUNT IN YOUR PROFILE BEFORE SUBMITTING ENTRIES\n                      </p>\n                      <motion.button onClick={() => setCurrentView('profile')} className=\"bg-[#0a3d62] text-white px-4 py-2 font-['VT323'] text-xl border-[2px] border-black shadow-[3px_3px_0_rgba(0,0,0,0.8)]\" variants={pixelButtonVariants} initial=\"rest\" whileHover=\"hover\" whileTap=\"tap\">\n                        GO TO PROFILE\n                      </motion.button>\n                    </div>\n                  </div>\n                </div> : <form onSubmit={createSubmission} className=\"space-y-6\">\n                  <div className=\"bg-[#4cd964] p-4 border-[2px] border-black shadow-[2px_2px_0_rgba(0,0,0,0.8)] mb-4\">\n                    <div className=\"flex items-center\">\n                      <Twitter size={20} className=\"text-[#0a3d62] mr-2\" />\n                      <span className=\"font-['VT323'] text-xl text-[#0a3d62]\">VERIFIED TWITTER: @{twitterHandle}</span>\n                    </div>\n                    <p className=\"mt-2 text-[#0a3d62] font-['VT323'] text-sm\">\n                      YOUR SUBMISSION MUST COME FROM THIS TWITTER ACCOUNT\n                    </p>\n                  </div>\n                  <div>\n                    <label className=\"block text-[#0a3d62] font-['VT323'] text-xl mb-2\">ENTRY TITLE</label>\n                    <input type=\"text\" value={submissionData.title} onChange={e => setSubmissionData({\n                ...submissionData,\n                title: e.target.value\n              })} className=\"w-full bg-white border-[2px] border-black px-4 py-3 focus:outline-none focus:border-[#ffde00] text-[#0a3d62] font-['Courier_New'] shadow-[2px_2px_0_rgba(0,0,0,0.8)]\" required />\n                  </div>\n                <div className=\"bg-[#4cd964] p-4 border-[2px] border-black shadow-[2px_2px_0_rgba(0,0,0,0.8)] mb-4\">\n                    <div className=\"flex items-center mb-2\">\n                      <Twitter size={16} className=\"mr-2 text-[#0a3d62]\" />\n                      <span className=\"text-[#0a3d62] font-['VT323'] text-xl\">REQUIRED HASHTAG</span>\n                    </div>\n                    <div className=\"text-[#0a3d62] font-['Press_Start_2P'] text-sm bg-white p-2 border-[2px] border-black\">\n                      #{`BountyMeme_${selectedBounty.title.replace(/\\s+/g, '').substring(0, 15)}`}\n                    </div>\n                    <p className=\"mt-2 text-[#0a3d62] font-['VT323'] text-sm\">INCLUDE THIS HASHTAG IN YOUR TWEET TO PROVE OWNERSHIP</p>\n                  </div>\n                <div>\n                    <label className=\"block text-[#0a3d62] font-['VT323'] text-xl mb-2\">X.COM TWEET URL</label>\n                    <input type=\"url\" value={submissionData.tweetUrl} onChange={handleTweetUrlChange} className=\"w-full bg-white border-[2px] border-black px-4 py-3 focus:outline-none focus:border-[#ffde00] text-[#0a3d62] font-['Courier_New'] shadow-[2px_2px_0_rgba(0,0,0,0.8)]\" placeholder=\"https://x.com/username/status/123456789\" required />\n                    <p className=\"mt-1 text-[#0a3d62] font-['VT323'] text-sm\">PASTE THE URL OF YOUR TWEET CONTAINING THE REQUIRED HASHTAG</p>\n                  </div>\n                  {showTweetPreview && tweetId && <div className=\"bg-white p-4 border-[2px] border-black shadow-[2px_2px_0_rgba(0,0,0,0.8)]\">\n                      <div className=\"flex items-center mb-3\">\n                        <Twitter size={16} className=\"mr-2 text-[#0a3d62]\" />\n                        <span className=\"text-[#0a3d62] font-['VT323'] text-xl\">TWEET VERIFIED</span>\n                      </div>\n                      <div className=\"text-[#0a3d62] font-['Courier_New'] mb-2\">\n                        Tweet ID: {tweetId}\n                      </div>\n                      {extractTwitterHandle(submissionData.tweetUrl) && <div className=\"flex items-center\">\n                          <span className=\"text-[#0a3d62] font-['VT323'] mr-2\">Tweet by:</span>\n                          <span className={`font-['VT323'] text-lg ${extractTwitterHandle(submissionData.tweetUrl).toLowerCase() === twitterHandle.toLowerCase() ? 'text-[#4cd964]' : 'text-[#ff3b30]'}`}>\n                            @{extractTwitterHandle(submissionData.tweetUrl)}\n                            {extractTwitterHandle(submissionData.tweetUrl).toLowerCase() === twitterHandle.toLowerCase() ? ' ✓ MATCHES YOUR ACCOUNT' : ' ✗ DOES NOT MATCH YOUR ACCOUNT'}\n                          </span>\n                        </div>}\n                    </div>}\n                <div>\n                    <label className=\"block text-[#0a3d62] font-['VT323'] text-xl mb-2\">IMAGE URL (OPTIONAL)</label>\n                    <input type=\"url\" value={submissionData.imageUrl} onChange={e => setSubmissionData({\n                ...submissionData,\n                imageUrl: e.target.value\n              })} className=\"w-full bg-white border-[2px] border-black px-4 py-3 focus:outline-none focus:border-[#ffde00] text-[#0a3d62] font-['Courier_New'] shadow-[2px_2px_0_rgba(0,0,0,0.8)]\" placeholder=\"https://example.com/image.jpg\" />\n                  </div>\n                  <div className=\"flex justify-end space-x-4 pt-4\">\n                    <motion.button type=\"button\" onClick={() => setCurrentView('bounty')} className=\"px-6 py-3 border-[2px] border-black text-[#0a3d62] font-['VT323'] text-xl bg-white shadow-[3px_3px_0_rgba(0,0,0,0.8)]\" variants={pixelButtonVariants} initial=\"rest\" whileHover=\"hover\" whileTap=\"tap\">\n                      CANCEL\n                    </motion.button>\n                    <motion.button type=\"submit\" className=\"bg-[#ff69b4] text-[#0a3d62] px-6 py-3 font-['VT323'] text-xl border-[2px] border-black shadow-[3px_3px_0_rgba(0,0,0,0.8)]\" variants={pixelButtonVariants} initial=\"rest\" whileHover=\"hover\" whileTap=\"tap\">\n                      SUBMIT ENTRY\n                    </motion.button>\n                  </div>\n                </form>}\n            </motion.div>}\n          {currentView === 'profile' && <motion.div key=\"profile\" initial={{\n          opacity: 0,\n          y: 10\n        }} animate={{\n          opacity: 1,\n          y: 0\n        }} exit={{\n          opacity: 0,\n          y: -10\n        }} transition={{\n          duration: 0.3\n        }} className=\"space-y-8\">\n              <div className=\"flex items-center\">\n                <h2 className=\"text-4xl font-['Fredoka_One'] text-black mb-6 tracking-tighter uppercase\">YOUR PROFILE</h2>\n                <motion.button onClick={refreshData} className=\"ml-3 bg-[#33e6ff] p-2 border-[2px] border-black shadow-[2px_2px_0_rgba(0,0,0,0.8)] flex items-center justify-center mb-6\" whileHover={{\n              scale: 1.05\n            }} whileTap={{\n              scale: 0.95\n            }} title=\"Refresh data\">\n                  <RefreshCw size={18} className={isRefreshing ? \"animate-spin text-[#0a3d62]\" : \"text-[#0a3d62]\"} />\n                </motion.button>\n              </div>\n              {!userWallet ? <div className=\"text-center py-12 border-[3px] border-black bg-[#33e6ff] shadow-[5px_5px_0_rgba(0,0,0,0.8)]\">\n                  <p className=\"text-xl font-['VT323'] text-[#0a3d62] mb-4\">CONNECT YOUR WALLET TO VIEW YOUR PROFILE</p>\n                  <UserButton className=\"bg-[#ffde00] text-[#0a3d62] border-[2px] border-black px-6 py-3 font-['VT323'] shadow-[3px_3px_0_rgba(0,0,0,0.8)]\" />\n                </div> : <>\n                  <div className=\"bg-[#33e6ff] p-8 border-[3px] border-black shadow-[5px_5px_0_rgba(0,0,0,0.8)]\">\n                    <div className=\"flex items-center mb-6\">\n                      <div className=\"w-16 h-16 bg-[#ff69b4] border-[2px] border-black flex items-center justify-center text-2xl font-bold text-[#0a3d62] shadow-[2px_2px_0_rgba(0,0,0,0.8)]\">\n                        {userWallet.substring(0, 1)}\n                      </div>\n                      <div className=\"ml-4\">\n                        <h3 className=\"text-xl font-['VT323'] text-[#0a3d62]\">\n                          {userWallet.substring(0, 6)}...{userWallet.substring(userWallet.length - 4)}\n                        </h3>\n                        <p className=\"text-[#0a3d62] font-['VT323']\">PLAYER</p>\n                      </div>\n                    </div>\n                    <div className=\"mb-6 bg-white p-6 border-[2px] border-black shadow-[2px_2px_0_rgba(0,0,0,0.8)]\">\n                      <h3 className=\"text-xl font-['Press_Start_2P'] text-[#0a3d62] mb-4\">X ACCOUNT</h3>\n                      {twitterHandleVerified ? <div className=\"flex items-start space-x-4\">\n                          <div className=\"bg-[#4cd964] p-3 border-[2px] border-black shadow-[2px_2px_0_rgba(0,0,0,0.8)] flex items-center\">\n                            <Check size={20} className=\"text-[#0a3d62] mr-2\" />\n                            <span className=\"font-['VT323'] text-xl text-[#0a3d62]\">VERIFIED</span>\n                          </div>\n                          <div className=\"flex-1\">\n                            <div className=\"flex items-center space-x-3\">\n                              {twitterHandle && twitterProfileImage && <img src={twitterProfileImage} alt={twitterUsername || twitterHandle} className=\"w-12 h-12 rounded-full border-[2px] border-black\" />}\n                              <div>\n                                {twitterUsername && <div className=\"flex items-center\">\n                                  <Twitter size={20} className=\"text-[#0a3d62] mr-2\" />\n                                  <span className=\"font-['VT323'] text-xl text-[#0a3d62]\">{twitterUsername}</span>\n                                </div>}\n                                <p className=\"text-[#0a3d62] font-['VT323'] text-sm\">@{twitterHandle}</p>\n                              </div>\n                            </div>\n                            <p className=\"mt-2 text-[#0a3d62] font-['VT323']\">YOUR X ACCOUNT IS VERIFIED FOR SUBMISSIONS</p>\n                          </div>\n                        </div> : <div className=\"space-y-4\">\n                          <p className=\"text-[#0a3d62] font-['VT323'] text-lg mb-2\">\n                            CONNECT YOUR X ACCOUNT TO VERIFY OWNERSHIP OF YOUR SUBMISSIONS\n                          </p>\n                          {checkingXConnection ? <div className=\"bg-[#33e6ff] text-[#0a3d62] px-4 py-3 font-['VT323'] text-xl border-[2px] border-black shadow-[3px_3px_0_rgba(0,0,0,0.8)] w-full flex items-center justify-center\">\n                              <span className=\"mr-2\">CHECKING CONNECTION...</span>\n                              <div className=\"animate-spin h-5 w-5 border-2 border-[#0a3d62] border-t-transparent rounded-full\"></div>\n                            </div> : <motion.button onClick={connectXAccount} className=\"bg-[#ff69b4] text-[#0a3d62] px-4 py-3 font-['VT323'] text-xl border-[2px] border-black shadow-[3px_3px_0_rgba(0,0,0,0.8)] w-full flex items-center justify-center\" variants={pixelButtonVariants} initial=\"rest\" whileHover=\"hover\" whileTap=\"tap\">\n                              <Twitter size={20} className=\"mr-2\" />\n                              CONNECT X TO VERIFY\n                            </motion.button>}\n                          <div className=\"p-3 bg-[#ffde00] border-[2px] border-black shadow-[2px_2px_0_rgba(0,0,0,0.8)]\">\n                            <div className=\"flex items-start\">\n                              <AlertCircle size={20} className=\"text-[#0a3d62] mr-2 mt-1 flex-shrink-0\" />\n                              <p className=\"text-[#0a3d62] font-['VT323']\">\n                                YOU MUST VERIFY YOUR X ACCOUNT BEFORE SUBMITTING ENTRIES. THIS ENSURES THAT ONLY YOU CAN SUBMIT CONTENT FROM YOUR ACCOUNT.\n                              </p>\n                            </div>\n                          </div>\n                        </div>}\n                    </div>\n                    <div className=\"grid grid-cols-1 md:grid-cols-3 gap-4 mb-6\">\n                      <div className=\"bg-white p-4 border-[2px] border-black shadow-[2px_2px_0_rgba(0,0,0,0.8)]\">\n                        <p className=\"text-[#0a3d62] font-['VT323'] text-sm mb-1\">MY QUESTS</p>\n                        <p className=\"text-2xl font-['Press_Start_2P'] text-[#0a3d62]\">\n                          {bounties.filter(b => b.creator === userWallet).length}\n                        </p>\n                      </div>\n                      <div className=\"bg-white p-4 border-[2px] border-black shadow-[2px_2px_0_rgba(0,0,0,0.8)]\">\n                        <p className=\"text-[#0a3d62] font-['VT323'] text-sm mb-1\">MY SUBMISSIONS</p>\n                        <p className=\"text-2xl font-['Press_Start_2P'] text-[#0a3d62]\">\n                          {submissions.filter(s => s.userId === userWallet).length}\n                        </p>\n                      </div>\n                      <div className=\"bg-white p-4 border-[2px] border-black shadow-[2px_2px_0_rgba(0,0,0,0.8)]\">\n                        <p className=\"text-[#0a3d62] font-['VT323'] text-sm mb-1\">WINS</p>\n                        <p className=\"text-2xl font-['Press_Start_2P'] text-[#0a3d62]\">\n                          {bounties.filter(b => {\n                      const winningSubmission = submissions.find(s => s.id === b.winner);\n                      return winningSubmission && winningSubmission.userId === userWallet;\n                    }).length}\n                        </p>\n                      </div>\n                    </div>\n                  </div>\n                  {(() => {\n              const unclaimedWinningBounties = bounties.filter(bounty => {\n                const winningSubmission = submissions.find(s => s.id === bounty.winner);\n                return winningSubmission && winningSubmission.userId === userWallet && !bounty.claimed && claimedBounties[bounty.id] !== 'claimed';\n              });\n              if (unclaimedWinningBounties.length > 0) {\n                return <div className=\"bg-[#ff69b4] p-6 border-[3px] border-black shadow-[0_0_20px_rgba(255,105,180,0.7)] mb-6 animate-pulse\">\n                          <div className=\"flex items-center mb-4\">\n                            <Trophy size={28} className=\"text-[#0a3d62] mr-3\" />\n                            <h3 className=\"text-xl font-['Press_Start_2P'] text-[#0a3d62]\">UNCLAIMED PRIZES! 🏆</h3>\n                          </div>\n                          <p className=\"text-[#0a3d62] font-['VT323'] text-lg mb-4\">\n                            YOU HAVE {unclaimedWinningBounties.length} UNCLAIMED WINNING{unclaimedWinningBounties.length > 1 ? 'S' : ''}!\n                          </p>\n                          <div className=\"space-y-4\">\n                            {unclaimedWinningBounties.map(bounty => {\n                      const winningSubmission = submissions.find(s => s.id === bounty.winner);\n                      return <div key={bounty.id} className=\"bg-white p-4 border-[2px] border-black shadow-[2px_2px_0_rgba(0,0,0,0.8)]\">\n                                  <div className=\"flex flex-col sm:flex-row justify-between items-start gap-3\">\n                                    <div>\n                                      <h4 className=\"text-lg font-['Press_Start_2P'] text-[#0a3d62] mb-2\">{bounty.title}</h4>\n                                      <p className=\"text-[#0a3d62] font-['VT323'] mb-2\">\n                                        Prize: {bounty.amount} $ZALA\n                                      </p>\n                                      <p className=\"text-[#0a3d62] font-['VT323'] text-sm\">\n                                        Winning Submission: {winningSubmission?.title}\n                                      </p>\n                                    </div>\n                                    <div className=\"flex flex-col gap-2\">\n                                      {pendingClaims.has(bounty.id) ? <div className=\"bg-[#33e6ff] text-[#0a3d62] px-4 py-2 font-['VT323'] text-lg border-[2px] border-black shadow-[2px_2px_0_rgba(0,0,0,0.8)] flex items-center\">\n                                          <span className=\"mr-2\">PENDING</span>\n                                          <div className=\"animate-spin h-4 w-4 border-2 border-[#0a3d62] border-t-transparent rounded-full\"></div>\n                                        </div> : failedClaims[bounty.id] === 'failed' && isMakeMeBuyZalaBounty(bounty) ? <motion.button onClick={() => retryClaimReward(bounty.winner, bounty.id)} className=\"bg-[#ffde00] text-[#0a3d62] px-4 py-2 font-['VT323'] text-lg border-[2px] border-black shadow-[2px_2px_0_rgba(0,0,0,0.8)] animate-pulse\" variants={pixelButtonVariants} initial=\"rest\" whileHover=\"hover\" whileTap=\"tap\">\n                                          RETRY CLAIM\n                                        </motion.button> : <motion.button onClick={() => initiateClaimProcess(bounty.winner, bounty.id)} className=\"bg-[#4cd964] text-[#0a3d62] px-4 py-2 font-['VT323'] text-lg border-[2px] border-black shadow-[2px_2px_0_rgba(0,0,0,0.8)] animate-pulse\" variants={pixelButtonVariants} initial=\"rest\" whileHover=\"hover\" whileTap=\"tap\">\n                                          CLAIM {bounty.amount} $ZALA\n                                        </motion.button>}\n                                    </div>\n                                  </div>\n                                </div>;\n                    })}\n                          </div>\n                        </div>;\n              }\n              return null;\n            })()}\n                  <div className=\"space-y-6\">\n                    <h3 className=\"text-3xl font-['Fredoka_One'] text-black mb-4 tracking-tighter uppercase\">MY SUBMISSIONS</h3>\n                    {userSubmissions.length === 0 ? <div className=\"text-center py-12 border-[3px] border-black bg-[#33e6ff] shadow-[5px_5px_0_rgba(0,0,0,0.8)]\">\n                        <p className=\"text-xl font-['VT323'] text-[#0a3d62]\">YOU HAVEN'T SUBMITTED ANY ENTRIES YET.</p>\n                      </div> : userSubmissions.map(submission => {\n                const bounty = bounties.find(b => b.id === submission.bountyId);\n                return <div key={submission.id} className=\"bg-[#33e6ff] p-6 border-[3px] border-black shadow-[5px_5px_0_rgba(0,0,0,0.8)]\">\n                            <div className=\"flex justify-between items-start\">\n                              <div>\n                                <h4 className=\"text-xl font-['Press_Start_2P'] text-[#0a3d62] mb-2\">{submission.title}</h4>\n                                <p className=\"text-[#0a3d62] font-['VT323'] mb-2\">\n                                  For quest: {bounty ? bounty.title : 'Unknown'}\n                                </p>\n                              </div>\n                              <motion.button onClick={() => deleteSubmission(submission.id)} className=\"bg-[#ff3b30] text-[#0a3d62] p-2 border-[2px] border-black shadow-[2px_2px_0_rgba(0,0,0,0.8)]\" variants={pixelButtonVariants} initial=\"rest\" whileHover=\"hover\" whileTap=\"tap\">\n                                <Trash2 size={16} />\n                              </motion.button>\n                            </div>\n                            <div className=\"bg-white p-4 mb-4 border-[2px] border-black shadow-[2px_2px_0_rgba(0,0,0,0.8)]\">\n                              <div className=\"flex flex-col space-y-2\">\n                                <div className=\"flex items-center\">\n                                  <Twitter size={16} className=\"mr-2 text-[#0a3d62]\" />\n                                  <a href={submission.tweetUrl} target=\"_blank\" rel=\"noopener noreferrer\" className=\"text-[#0a3d62] hover:text-[#ff69b4] overflow-hidden overflow-ellipsis font-['VT323'] text-lg\">\n                                    {submission.tweetUrl}\n                                  </a>\n                                </div>\n                                {submission.twitterHandle && <div className=\"flex items-center\">\n                                  <ExternalLink size={14} className=\"mr-2 text-[#0a3d62]\" />\n                                  <span className=\"text-[#0a3d62] font-['VT323'] text-lg\">\n                                    Twitter: @{submission.twitterHandle}\n                                    {submission.userId === userWallet && twitterHandleVerified && twitterHandle.toLowerCase() === submission.twitterHandle.toLowerCase() && \" ✓ VERIFIED\"}\n                                  </span>\n                                </div>}\n                                <div className=\"bg-[#4cd964] text-[#0a3d62] px-2 py-1 border-[2px] border-black inline-block font-['VT323']\">\n                                  #{`BountyMeme_${bounty?.title.replace(/\\s+/g, '').substring(0, 15) || 'unknown'}`}\n                                </div>\n                              </div>\n                              {submission.imageUrl && <img src={submission.imageUrl} alt={submission.title} className=\"w-full h-48 object-cover border-[2px] border-black mt-2\" style={{\n                      imageRendering: 'pixelated'\n                    }} />}\n                            </div>\n                            <div className=\"flex items-center space-x-4\">\n                              <div className=\"flex items-center text-[#0a3d62] font-['VT323'] text-lg\">\n                                <ThumbsUp size={16} className=\"mr-1\" />\n                                <span>{getSubmissionVoteCount(submission.id)} UPVOTES</span>\n                              </div>\n                    {bounty && bounty.winner === submission.id && (bounty.claimed || claimedBounties[bounty.id] === 'claimed' ? <div className=\"bg-[#6c5ce7] text-[#0a3d62] px-3 py-1 font-['VT323'] text-lg border-[2px] border-black shadow-[2px_2px_0_rgba(0,0,0,0.8)]\">\n                  ALREADY CLAIMED\n                </div> : pendingClaims.has(bounty.id) ? <div className=\"bg-[#33e6ff] text-[#0a3d62] px-3 py-1 font-['VT323'] text-lg border-[2px] border-black shadow-[2px_2px_0_rgba(0,0,0,0.8)] flex items-center\">\n                  <span className=\"mr-2\">PENDING</span>\n                  <div className=\"animate-spin h-4 w-4 border-2 border-[#0a3d62] border-t-transparent rounded-full\"></div>\n                </div> : failedClaims[bounty.id] === 'failed' && isMakeMeBuyZalaBounty(bounty) ? <motion.button onClick={() => retryClaimReward(submission.id, bounty.id)} className=\"bg-[#ffde00] text-[#0a3d62] px-3 py-1 font-['VT323'] text-lg border-[2px] border-black shadow-[2px_2px_0_rgba(0,0,0,0.8)] animate-pulse\" variants={pixelButtonVariants} initial=\"rest\" whileHover=\"hover\" whileTap=\"tap\">\n                  RETRY CLAIM\n                </motion.button> : <motion.button onClick={() => initiateClaimProcess(submission.id, bounty.id)} className=\"bg-[#ff69b4] text-[#0a3d62] px-3 py-1 font-['VT323'] text-lg border-[2px] border-black shadow-[2px_2px_0_rgba(0,0,0,0.8)] animate-pulse\" variants={pixelButtonVariants} initial=\"rest\" whileHover=\"hover\" whileTap=\"tap\">\n                                  CLAIM ${bounty.amount} $ZALA\n                                </motion.button>)}\n                              {getSubmissionVoteCount(submission.id) >= 50 && (submission.claimed ? <div className=\"bg-[#6c5ce7] text-[#0a3d62] px-3 py-1 font-['VT323'] text-lg border-[2px] border-black shadow-[2px_2px_0_rgba(0,0,0,0.8)]\">\n                                    ALREADY CLAIMED\n                                  </div> : <motion.button onClick={() => claimZala(submission.id)} className=\"bg-[#ff69b4] text-[#0a3d62] px-3 py-1 font-['VT323'] text-lg border-[2px] border-black shadow-[2px_2px_0_rgba(0,0,0,0.8)]\" variants={pixelButtonVariants} initial=\"rest\" whileHover=\"hover\" whileTap=\"tap\">\n                                    CLAIM 100 $ZALA\n                                  </motion.button>)}\n                            </div>\n                          </div>;\n              })}\n                  </div>\n                </>}\n            </motion.div>}\n          {currentView === 'admin' && isAdmin && <motion.div key=\"admin\" initial={{\n          opacity: 0,\n          y: 10\n        }} animate={{\n          opacity: 1,\n          y: 0\n        }} exit={{\n          opacity: 0,\n          y: -10\n        }} transition={{\n          duration: 0.3\n        }} className=\"space-y-8\">\n              <h2 className=\"text-4xl font-['Fredoka_One'] text-black mb-6 tracking-tighter uppercase\">ADMIN PANEL</h2>\n              <div className=\"grid grid-cols-1 md:grid-cols-2 gap-6\">\n                <div className=\"bg-[#33e6ff] p-6 border-[3px] border-black shadow-[5px_5px_0_rgba(0,0,0,0.8)]\">\n                  <h3 className=\"text-xl font-['Press_Start_2P'] text-[#0a3d62] mb-4\">PLATFORM STATS</h3>\n                  <div className=\"grid grid-cols-2 gap-4 mb-6\">\n                    <div className=\"bg-white p-4 border-[2px] border-black shadow-[2px_2px_0_rgba(0,0,0,0.8)]\">\n                      <p className=\"text-[#0a3d62] font-['VT323'] text-sm mb-1\">TOTAL QUESTS</p>\n                      <p className=\"text-2xl font-['Press_Start_2P'] text-[#0a3d62]\">{bounties.length}</p>\n                    </div>\n                    <div className=\"bg-white p-4 border-[2px] border-black shadow-[2px_2px_0_rgba(0,0,0,0.8)]\">\n                      <p className=\"text-[#0a3d62] font-['VT323'] text-sm mb-1\">TOTAL ENTRIES</p>\n                      <p className=\"text-2xl font-['Press_Start_2P'] text-[#0a3d62]\">{submissions.length}</p>\n                    </div>\n                    <div className=\"bg-white p-4 border-[2px] border-black shadow-[2px_2px_0_rgba(0,0,0,0.8)]\">\n                      <p className=\"text-[#0a3d62] font-['VT323'] text-sm mb-1\">COMPLETED QUESTS</p>\n                      <p className=\"text-2xl font-['Press_Start_2P'] text-[#0a3d62]\">\n                        {bounties.filter(b => b.winner).length}\n                      </p>\n                    </div>\n                    <div className=\"bg-white p-4 border-[2px] border-black shadow-[2px_2px_0_rgba(0,0,0,0.8)]\">\n                      <p className=\"text-[#0a3d62] font-['VT323'] text-sm mb-1\">TOTAL $ZALA PAID</p>\n                      <p className=\"text-2xl font-['Press_Start_2P'] text-[#0a3d62]\">\n                        {bounties.filter(b => b.claimed).length * 100}\n                      </p>\n                    </div>\n                  </div>\n                </div>\n                <div className=\"bg-[#33e6ff] p-6 border-[3px] border-black shadow-[5px_5px_0_rgba(0,0,0,0.8)]\">\n                  <h3 className=\"text-xl font-['Press_Start_2P'] text-[#0a3d62] mb-4\">$ZALA TOKEN CLAIMS</h3>\n                  <div className=\"grid grid-cols-2 gap-4 mb-6\">\n                    <div className=\"bg-white p-4 border-[2px] border-black shadow-[2px_2px_0_rgba(0,0,0,0.8)]\">\n                      <p className=\"text-[#0a3d62] font-['VT323'] text-sm mb-1\">HIGH UPVOTE POSTS</p>\n                      <p className=\"text-2xl font-['Press_Start_2P'] text-[#0a3d62]\">\n                        {submissions.filter(s => getSubmissionVoteCount(s.id) >= 50).length}\n                      </p>\n                    </div>\n                    <div className=\"bg-white p-4 border-[2px] border-black shadow-[2px_2px_0_rgba(0,0,0,0.8)]\">\n                      <p className=\"text-[#0a3d62] font-['VT323'] text-sm mb-1\">$ZALA CLAIMED</p>\n                      <p className=\"text-2xl font-['Press_Start_2P'] text-[#0a3d62]\">\n                        {submissions.filter(s => s.claimed).length * 100}\n                      </p>\n                    </div>\n                  </div>\n                </div>\n              </div>\n              <div className=\"bg-[#33e6ff] p-6 border-[3px] border-black shadow-[5px_5px_0_rgba(0,0,0,0.8)] mb-8\">\n                <h3 className=\"text-xl font-['Press_Start_2P'] text-[#0a3d62] mb-4\">RECENT ACTIVITY</h3>\n                <div className=\"space-y-4\">\n                  {[...submissions].sort((a, b) => b.createdAt - a.createdAt).slice(0, 5).map(submission => {\n                const bounty = bounties.find(b => b.id === submission.bountyId);\n                return <div key={submission.id} className=\"flex items-start space-x-4 p-3 bg-white border-[2px] border-black shadow-[2px_2px_0_rgba(0,0,0,0.8)]\">\n                        <div className=\"w-8 h-8 bg-[#ff69b4] border-[2px] border-black flex items-center justify-center text-xs font-bold text-[#0a3d62]\">\n                          {submission.userId.substring(0, 1)}\n                        </div>\n                        <div>\n                          <p className=\"text-[#0a3d62] font-['VT323'] text-lg\">\n                            <span className=\"font-bold\">{submission.userId.substring(0, 6)}...</span> submitted \n                            <span className=\"font-bold\"> {submission.title}</span> for quest \n                            <span className=\"font-bold\"> {bounty ? bounty.title : 'Unknown'}</span>\n                          </p>\n                          <p className=\"text-[#0a3d62] font-['Courier_New'] text-sm\">\n                            {new Date(submission.createdAt).toLocaleString()}\n                          </p>\n                        </div>\n                      </div>;\n              })}\n                </div>\n              </div>\n              <div className=\"bg-[#33e6ff] p-6 border-[3px] border-black shadow-[5px_5px_0_rgba(0,0,0,0.8)]\">\n                <h3 className=\"text-xl font-['Press_Start_2P'] text-[#0a3d62] mb-4\">CLAIMED BOUNTIES BY WALLET</h3>\n                <div className=\"space-y-4\">\n                  {bounties.filter(b => b.claimed).length === 0 ? <div className=\"text-center py-8 bg-white border-[2px] border-black shadow-[2px_2px_0_rgba(0,0,0,0.8)]\">\n                      <p className=\"text-lg font-['VT323'] text-[#0a3d62]\">NO BOUNTIES HAVE BEEN CLAIMED YET</p>\n                    </div> : (() => {\n                const claimedBountiesByWallet = {};\n                bounties.filter(b => b.claimed).forEach(bounty => {\n                  const winningSubmission = submissions.find(s => s.id === bounty.winner);\n                  if (winningSubmission) {\n                    const walletAddress = winningSubmission.userId;\n                    if (!claimedBountiesByWallet[walletAddress]) {\n                      claimedBountiesByWallet[walletAddress] = {\n                        bounties: [],\n                        twitterHandle: winningSubmission.twitterHandle,\n                        totalAmount: 0\n                      };\n                    }\n                    claimedBountiesByWallet[walletAddress].bounties.push({\n                      bounty,\n                      submission: winningSubmission\n                    });\n                    claimedBountiesByWallet[walletAddress].totalAmount += bounty.amount;\n                  }\n                });\n                return <div className=\"space-y-6\">\n                        {Object.entries(claimedBountiesByWallet).map(([walletAddress, data]) => <div key={walletAddress} className=\"bg-white p-4 border-[3px] border-black shadow-[3px_3px_0_rgba(0,0,0,0.8)]\">\n                            <div className=\"flex flex-col sm:flex-row justify-between items-start sm:items-center gap-3 mb-4 pb-3 border-b-[2px] border-black\">\n                              <div>\n                                <div className=\"flex items-center gap-2 mb-1\">\n                                  <div className=\"w-8 h-8 bg-[#ff69b4] border-[2px] border-black flex items-center justify-center text-sm font-bold text-[#0a3d62]\">\n                                    {walletAddress.substring(0, 1)}\n                                  </div>\n                                  <p className=\"font-['Press_Start_2P'] text-[#0a3d62] text-base\">\n                                    {walletAddress.substring(0, 8)}...{walletAddress.substring(walletAddress.length - 6)}\n                                  </p>\n                                </div>\n                                {data.twitterHandle && <div className=\"flex items-center ml-10\">\n                                    <Twitter size={14} className=\"mr-1 text-[#0a3d62]\" />\n                                    <span className=\"text-[#0a3d62] font-['VT323'] text-sm\">@{data.twitterHandle}</span>\n                                  </div>}\n                              </div>\n                              <div className=\"bg-[#ffde00] px-4 py-2 border-[2px] border-black shadow-[2px_2px_0_rgba(0,0,0,0.8)]\">\n                                <p className=\"font-['VT323'] text-[#0a3d62] text-sm\">TOTAL CLAIMED</p>\n                                <p className=\"font-['Press_Start_2P'] text-[#0a3d62] text-lg\">{data.totalAmount} $ZALA</p>\n                              </div>\n                            </div>\n                            <div className=\"space-y-3\">\n                              <p className=\"font-['VT323'] text-[#0a3d62] text-lg mb-2\">CLAIMED BOUNTIES ({data.bounties.length}):</p>\n                              {data.bounties.map(({\n                        bounty,\n                        submission\n                      }) => <div key={bounty.id} className=\"bg-[#33e6ff] p-3 border-[2px] border-black shadow-[2px_2px_0_rgba(0,0,0,0.8)] flex flex-col sm:flex-row justify-between items-start sm:items-center gap-3\">\n                                  <div className=\"flex-1\">\n                                    <p className=\"font-['VT323'] text-[#0a3d62] text-lg font-bold mb-1\">{bounty.title}</p>\n                                    <div className=\"flex flex-wrap gap-2 text-xs text-[#0a3d62]\">\n                                      <span className=\"bg-white px-2 py-1 border border-black\">\n                                        Amount: {bounty.amount} $ZALA\n                                      </span>\n                                      <span className=\"bg-white px-2 py-1 border border-black\">\n                                        Submission: {submission.title}\n                                      </span>\n                                      {submission.updatedAt && <span className=\"bg-white px-2 py-1 border border-black\">\n                                          Claimed: {new Date(submission.updatedAt).toLocaleDateString()}\n                                        </span>}\n                                    </div>\n                                  </div>\n                                  <motion.button onClick={() => resetBountyClaim(bounty.id, bounty.winner)} className=\"bg-[#ff3b30] text-[#0a3d62] px-3 py-2 font-['VT323'] text-sm border-[2px] border-black shadow-[2px_2px_0_rgba(0,0,0,0.8)] flex items-center whitespace-nowrap\" variants={pixelButtonVariants} initial=\"rest\" whileHover=\"hover\" whileTap=\"tap\">\n                                    <RefreshCw size={14} className=\"mr-1\" />\n                                    RESET\n                                  </motion.button>\n                                </div>)}\n                            </div>\n                          </div>)}\n                      </div>;\n              })()}\n                </div>\n              </div>\n            </motion.div>}\n        </AnimatePresence>\n      </main>\n    </div>;\n}","thinking","Looking at the requirement, the user wants to see in the admin dashboard which wallet addresses have claimed bounties and which specific bounties they have claimed.\n\nCurrently in the admin panel, there's a \"CLAIMED BOUNTIES\" section that shows bounties that have been claimed with the quest name, winner wallet address, amount, and a reset button.\n\nThe user wants to see it organized by wallet addresses - so showing which wallets have claimed bounties and listing the bounties each wallet has claimed.\n\nI need to modify the admin dashboard to group claimed bounties by wallet address. Let me analyze the current structure:\n\nCurrently it shows:\n- Quest name\n- Winner wallet\n- Amount\n- Reset button\n\nThe new requirement wants it organized by wallet address first, then showing which bounties that wallet claimed.\n\nI'll need to:\n1. Group claimed bounties by winner wallet address\n2. Display wallet addresses as the primary grouping\n3. Under each wallet, show the list of bounties they've claimed\n\nLet me find the relevant section in the code and modify it.","changelog","Updated admin dashboard to show claimed bounties grouped by wallet address! Now you can easily see which wallets have claimed rewards and all the bounties each wallet has won.","diff","isRephrased","isDebug","isSuccess","error","devbaseSchema",{"_159":160,"_176":177,"_195":196,"_211":212,"_229":230},"votes",{"_161":162,"_172":173},"rules",{"_163":164,"_165":164,"_166":167,"_168":169,"_170":171},"get","true","list","create","$USER_ID === $newData.userId && !$ENTITY('votes').exists({ submissionId: $newData.submissionId, userId: $USER_ID })","delete","$USER_ID === $data.userId","update","false","fields",{"_136":174,"_175":174},"String","submissionId","claims",{"_161":178,"_172":180,"_184":185},{"_163":164,"_165":164,"_166":179,"_168":171,"_170":171},"$USER_ID === $newData.userId && ($FUNC_CAN_CLAIM_BOUNTY_PRIZE($newData.bountyId, $newData.submissionId) || $FUNC_CAN_CLAIM_ZALA_TOKENS($newData.submissionId))",{"_106":174,"_181":182,"_136":174,"_183":174,"_175":174},"amount","Number","bountyId","actions",{"_166":186},{"_187":188},"transfer",{"_189":190,"_191":192,"_106":193,"_181":194},"to","$USER_ID","from","$VAULT_ADDRESS","$newData.token","$newData.amount","bounties",{"_161":197,"_172":201,"_184":208},{"_163":164,"_165":164,"_166":198,"_168":199,"_170":200},"$USER_ID === $newData.userId || $USER_ID === $newData.creator","($USER_ID === $data.creator && !$data.winner) || $USER_ID === '6SxLVfFovSjR2LAFcJ5wfT6RFjc8GxsscRekGnLq8BMe'","$USER_ID === $data.creator",{"_202":174,"_181":182,"_203":174,"_204":205,"_206":174,"_207":182,"_22":174},"title","winner","claimed","Boolean","creator","deadline",{"_166":209},{"_187":210},{"_189":192,"_191":190,"_106":139,"_181":194},"profiles",{"_161":213,"_172":215,"_184":220},{"_163":164,"_165":164,"_166":214,"_168":169,"_170":169},"$USER_ID === $newData.userId",{"_136":174,"_216":205,"_217":174,"_218":174,"_219":174},"verified","twitterHandle","twitterUsername","twitterProfileImage",{"_166":221,"_170":227},{"_222":223},"compute",{"_216":224,"_217":225,"_218":225,"_219":226},"$FUNC_HAS_TWITTER_ACCOUNT()","$USER_X_USERNAME","$FUNC_GET_OAUTH_PROFILE_IMAGE()",{"_222":228},{"_216":224,"_217":225,"_218":225,"_219":226},"submissions",{"_161":231,"_172":233},{"_163":164,"_165":164,"_166":214,"_168":169,"_170":232},"($USER_ID === $data.userId) || ($ENTITY('bounties').exists({ id: $data.bountyId, creator: $USER_ID }) && Object.keys($newData).every(key => ['upvotes', 'winner'].includes(key)))",{"_202":174,"_136":174,"_204":205,"_234":182,"_183":174,"_235":174,"_236":174,"_217":174},"upvotes","imageUrl","tweetUrl","devbaseInsight","This Devbase schema describes a platform for bounties, submissions, and claims, likely involving a voting mechanism and Twitter integration.\n\n## Votes Entity\n### Fields:\n- `userId` (String): The ID of the user who cast the vote.\n- `submissionId` (String): The ID of the submission that received the vote.\n### Permissions:\n- **View (get/list):** Anyone can see all votes.\n- **Create:** A user can create a vote for a submission, but only if they haven't already voted on that specific submission. This ensures one vote per user per submission.\n- **Delete:** Only the user who cast the vote can delete it.\n- **Update:** Not allowed. Votes are immutable once cast.\n\n## Claims Entity\n### Fields:\n- `token` (String): The address of the token being claimed (e.g., a specific SPL token).\n- `amount` (Number): The quantity of tokens being claimed.\n- `userId` (String): The ID of the user making the claim.\n- `bountyId` (String): The ID of the bounty associated with the claim (if applicable).\n- `submissionId` (String): The ID of the submission associated with the claim.\n### Onchain Actions:\n- **Create:** When a claim is created, the specified `amount` of the `token` is transferred from the application's central `VAULT_ADDRESS` to the `USER_ID` (the claimant).\n### Permissions:\n- **View (get/list):** Anyone can see all claims.\n- **Create:** A user can create a claim if they are the current user AND they are eligible to claim either a bounty prize (determined by `$FUNC_CAN_CLAIM_BOUNTY_PRIZE`) or ZALA tokens (determined by `$FUNC_CAN_CLAIM_ZALA_TOKENS`) for the given submission/bounty.\n- **Delete/Update:** Not allowed. Claims are immutable once created.\n\n## Bounties Entity\n### Fields:\n- `title` (String): The title of the bounty.\n- `amount` (Number): The reward amount for the bounty.\n- `winner` (String): The ID of the user who won the bounty (if selected).\n- `claimed` (Boolean): Indicates if the bounty prize has been claimed.\n- `creator` (String): The ID of the user who created the bounty.\n- `deadline` (Number): A timestamp indicating when the bounty submission period ends.\n- `description` (String): A detailed description of the bounty.\n### Onchain Actions:\n- **Create:** When a bounty is created, the specified `amount` of a specific token (`CxpGDVrX2rA6penHD2zhopPYNMXAtXutizWSktwytZ18`, likely a custom token) is transferred from the `USER_ID` (the bounty creator) to the `VAULT_ADDRESS` (the application's treasury) to fund the bounty.\n### Permissions:\n- **View (get/list):** Anyone can see all bounties.\n- **Create:** A user can create a bounty if they are the current user (or specified as the creator).\n- **Delete:** Only the bounty `creator` can delete it, and only if a `winner` has not yet been selected. A specific admin user ID also has permission to delete any bounty.\n- **Update:** Only the bounty `creator` can modify it.\n\n## Profiles Entity\n### Fields:\n- `userId` (String): The ID of the user this profile belongs to.\n- `verified` (Boolean): Indicates if the user's profile (e.g., Twitter) is verified.\n- `twitterHandle` (String): The user's Twitter handle (e.g., @username).\n- `twitterUsername` (String): The user's Twitter username.\n- `twitterProfileImage` (String): The URL to the user's Twitter profile picture.\n### Computed Actions:\n- **Create/Update:**\n    - `verified`: Automatically set based on whether the user has a connected Twitter account.\n    - `twitterHandle`, `twitterUsername`: Automatically populated with the connected Twitter username.\n    - `twitterProfileImage`: Automatically fetched from the connected Twitter account.\n### Permissions:\n- **View (get/list):** Anyone can see all user profiles.\n- **Create:** A user can create their own profile.\n- **Delete/Update:** A user can only delete or update their own profile.\n\n## Submissions Entity\n### Fields:\n- `title` (String): The title of the submission.\n- `userId` (String): The ID of the user who made the submission.\n- `claimed` (Boolean): Indicates if the rewards for this submission have been claimed.\n- `upvotes` (Number): The total number of upvotes the submission has received.\n- `bountyId` (String): The ID of the bounty this submission is associated with.\n- `imageUrl` (String): A URL to an image related to the submission.\n- `tweetUrl` (String): A URL to a tweet related to the submission.\n- `twitterHandle` (String): The Twitter handle of the submitter.\n### Permissions:\n- **View (get/list):** Anyone can see all submissions.\n- **Create:** A user can create their own submission.\n- **Delete:** A user can only delete their own submission.\n- **Update:** A user can update their own submission. Additionally, the `creator` of the associated `bounty` can update a submission, but only to modify its `upvotes` or set a `winner`.\n\n## Key Behaviors:\n- **Bounty System:** Users can create bounties by funding them with a specific token, which is held in the app's vault.\n- **Submissions & Voting:** Users can submit entries to bounties. Other users can vote on these submissions (one vote per user per submission).\n- **Twitter Integration:** User profiles automatically pull and verify Twitter information (handle, username, profile image) upon creation or update. Submissions can also link to tweets and include the submitter's Twitter handle.\n- **Claiming Rewards:** Users can claim rewards (bounty prizes or ZALA tokens) for eligible submissions, with funds transferred from the app's vault to their wallet. Claims are immutable.\n- **Role-Based Access:** Different users (submitters, bounty creators, general users, and a special admin) have specific permissions for creating, viewing, updating, and deleting records across the platform.\n- **Immutability:** Votes and claims, once created, cannot be changed or deleted (except for vote deletion by the original voter).","messageId",["B","233210"],[242,248,254,260],{"_14":243,"_36":244,"_38":245,"_20":246,"_85":247,"_87":138},["B","143239"],["D",1763740563143],["D",1763740563143],"$FUNC_CAN_CLAIM_BOUNTY_PRIZE","async function $FUNC_CAN_CLAIM_BOUNTY_PRIZE(bountyId, submissionId) {\n  const bounty = await $ENTITY('bounties').get(bountyId);\n  if (!bounty) {\n    return false;\n  }\n  if (bounty.claimed === true) {\n    return false;\n  }\n  if (bounty.winner !== submissionId) {\n    return false;\n  }\n  const submission = await $ENTITY('submissions').get(submissionId);\n  if (!submission) {\n    return false;\n  }\n  if (submission.userId !== $USER_ID) {\n    return false;\n  }\n  return true;\n}",{"_14":249,"_36":250,"_38":251,"_20":252,"_85":253,"_87":138},["B","143240"],["D",1763740563153],["D",1763740563153],"$FUNC_CAN_CLAIM_ZALA_TOKENS","async function $FUNC_CAN_CLAIM_ZALA_TOKENS(submissionId) {\n  const submission = await $ENTITY('submissions').get(submissionId);\n  if (!submission) {\n    return false;\n  }\n  if (submission.userId !== $USER_ID) {\n    return false;\n  }\n  if (submission.claimed === true) {\n    return false;\n  }\n  const voteCount = await $ENTITY('votes').count({ submissionId: submissionId });\n  if (voteCount < 50) {\n    return false;\n  }\n  return true;\n}",{"_14":255,"_36":256,"_38":257,"_20":258,"_85":259,"_87":138},["B","143241"],["D",1763740563156],["D",1763740563156],"$FUNC_GET_OAUTH_PROFILE_IMAGE","async function $FUNC_GET_OAUTH_PROFILE_IMAGE() {\n  return $USER_X_PROFILE_IMAGE || '';\n}",{"_14":261,"_36":262,"_38":263,"_20":264,"_85":265,"_87":138},["B","143242"],["D",1763740563158],["D",1763740563158],"$FUNC_HAS_TWITTER_ACCOUNT","async function $FUNC_HAS_TWITTER_ACCOUNT() {\n  return $USER_X_USERNAME ? true : false;\n}","isDraft",[31],"isLordOfDev","analytics",[271,275,277,279,281,283,285,287,289,291,293,295,297,299],{"_272":273,"_274":61},"day","2025-11-10","runCount",{"_272":276,"_274":61},"2025-11-11",{"_272":278,"_274":61},"2025-11-12",{"_272":280,"_274":61},"2025-11-13",{"_272":282,"_274":61},"2025-11-14",{"_272":284,"_274":61},"2025-11-15",{"_272":286,"_274":61},"2025-11-16",{"_272":288,"_274":61},"2025-11-17",{"_272":290,"_274":61},"2025-11-18",{"_272":292,"_274":61},"2025-11-19",{"_272":294,"_274":61},"2025-11-20",{"_272":296,"_274":61},"2025-11-21",{"_272":298,"_274":61},"2025-11-22",{"_272":300,"_274":61},"2025-11-23","https://cdn.dev.fun/og/image/20893a894ed0db7c3543/bf522350.webp","isDevbase","project",{"_14":19,"_305":306,"_20":307,"_308":309,"_22":310},"image","https://cdn.dev.fun/upload/projects/579a4a7b.png","Stream Bounty","oneliner","challenge Pump.fun streamers","Stream Bounty is the ultimate platform to challenge Pump.fun streamers with SOL bounties","commitDetail","livestream","actionData","errors"]
</article></body></html>

WELCOME TO STREAM BOUNTY!

PROCESSING...

SUCCESS!

ERROR

MENU

HOW IT WORKS

CREATE CHALLENGES

STREAM & SUBMIT

EARN XP & WIN

ACTIVE CHALLENGES

🔴 LIVE STREAM SEARCH & CHALLENGE

{bounty.title}

CREATE NEW CHALLENGE