\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 \n \n {currentView === 'dashboard' && \n

ACTIVE QUESTS

\n \n \n \n

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

\n 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 \n

\n {loading ?

\n {bounties.length === 0 ?

NO QUESTS YET. CREATE THE FIRST ONE!

: bounties.map(bounty => selectBounty(bounty)}>\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} $ZALA\n

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

\n )}\n

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

CREATE NEW QUEST

\n QUEST TITLE\n 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

\n DESCRIPTION\n

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-xl sm:text-3xl font-['Press_Start_2P'] text-[#0a3d62] mb-2 break-words\">{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-xl font-['Press_Start_2P'] text-[#0a3d62] mb-4\">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-2xl font-['Press_Start_2P'] text-[#0a3d62] mb-6\">EXTEND QUEST 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-2xl font-['Press_Start_2P'] text-[#0a3d62] mb-6\">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-3xl font-['Press_Start_2P'] text-[#0a3d62] mb-6\">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                    {}\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\">TWITTER 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\">\n                              <Twitter size={20} className=\"text-[#0a3d62] mr-2\" />\n                              <span className=\"font-['VT323'] text-xl text-[#0a3d62]\">@{twitterHandle}</span>\n                            </div>\n                            <p className=\"mt-2 text-[#0a3d62] font-['VT323']\">YOUR TWITTER 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 TWITTER ACCOUNT TO VERIFY OWNERSHIP OF YOUR SUBMISSIONS\n                          </p>\n                          <div className=\"flex items-center space-x-4\">\n                            <div className=\"flex-1\">\n                              <input type=\"text\" value={twitterFormData} onChange={e => {\n                        setTwitterFormData(e.target.value);\n                        setTwitterError('');\n                      }} placeholder=\"Your Twitter handle (without @)\" 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                              {twitterError && <p className=\"mt-1 text-[#ff3b30] font-['VT323']\">{twitterError}</p>}\n                            </div>\n                            <motion.button onClick={saveTwitterHandle} 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)]\" variants={pixelButtonVariants} initial=\"rest\" whileHover=\"hover\" whileTap=\"tap\">\n                              <Save size={20} className=\"mr-2\" />\n                              SAVE\n                            </motion.button>\n                          </div>\n                          {twitterHandle && <motion.button onClick={verifyTwitterHandle} 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 mt-4\" variants={pixelButtonVariants} initial=\"rest\" whileHover=\"hover\" whileTap=\"tap\">\n                              <Twitter size={20} className=\"mr-2\" />\n                              CONNECT TWITTER 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 TWITTER 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                  {}\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\n                  <div className=\"space-y-6\">\n                    <h3 className=\"text-2xl font-['Press_Start_2P'] text-[#0a3d62] mb-4\">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-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 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              \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            </motion.div>}\n        </AnimatePresence>\n      </main>\n    </div>;\n}","packageJson","{\"dependencies\":{\"react\":\"18.2.0\",\"@devfunlabs/web-sdk\":\"0.5.5\",\"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\"}}","appFunctions",[],"token",{"_18":83,"_84":85,"_86":87,"_88":89,"_90":91,"_92":93,"_94":95,"_96":97,"_98":99,"_73":74},"Z△L△ △I","symbol","ZALA","price",0.00009219,"marketcap",84060,"image","https://pump.mypinata.cloud/ipfs/QmUaDbuzVdFZy4uvH4tNsFq8byXnq2SiCfM1zudfQs1EhZ?img-width=256&img-dpr=2","website","https://dev.fun/p/65b6496d4f06da20c463","twitter","https://x.com/Zala_AI","devCount",22,"appCount",30,"upstreamApp","isLordOfDev","analytics",[104,108,110,112,114,116,118,120,122,124,126,128,130,132,134,135,136],{"_105":106,"_107":59},"day","2025-08-14","runCount",{"_105":109,"_107":59},"2025-08-15",{"_105":111,"_107":59},"2025-08-16",{"_105":113,"_107":59},"2025-08-17",{"_105":115,"_107":59},"2025-08-18",{"_105":117,"_107":59},"2025-08-19",{"_105":119,"_107":59},"2025-08-20",{"_105":121,"_107":59},"2025-08-21",{"_105":123,"_107":59},"2025-08-22",{"_105":125,"_107":59},"2025-08-23",{"_105":127,"_107":59},"2025-08-24",{"_105":129,"_107":59},"2025-08-25",{"_105":131,"_107":59},"2025-08-26",{"_105":133,"_107":59},"2025-08-27",{"_105":109,"_107":41},{"_105":113,"_107":41},{"_105":137,"_107":41},"2025-08-28","snapshot","ogImage","https://cdn.dev.fun/og/image/e3460cc72f66e0764f33/5477841d.webp","isDevbase","actionData","errors"]
</article></body></html>

\n ZALA Bounty Meme\n

⚠️ WARNING ⚠️

PROCESSING...

SUCCESS!

GAME OVER

ZALA Bounty

HOW IT WORKS

CREATE QUESTS

SUBMIT ENTRIES

UPVOTE & WIN

ACTIVE QUESTS

{bounty.title}

CREATE NEW QUEST

say something