[{"_1":2,"_125":-5,"_126":-5},"loaderData",{"_3":4,"_10":11},"root",{"_5":-5,"_6":7,"_8":9},"user","appId","cm7twdhs6009l11ml868xhxld","wsEndpoint","https://dev.fun","routes/p.$appId",{"_12":13,"_123":-5,"_114":-7,"_124":17},"appDetail",{"_14":15,"_16":17,"_18":19,"_20":21,"_22":23,"_24":25,"_26":27,"_28":27,"_29":30,"_31":32,"_33":34,"_35":36,"_37":38,"_39":40,"_41":42,"_43":44,"_5":45,"_56":57,"_58":59,"_60":59,"_61":62,"_63":59,"_64":59,"_65":59,"_66":59,"_67":59,"_68":59,"_69":17,"_70":17,"_71":-5,"_72":73,"_74":75,"_76":77,"_78":-5,"_79":-5,"_80":17,"_81":82,"_114":32,"_115":116,"_117":27,"_118":119},"id","2d0f93112a077ba49dc1","isMyApp",false,"projectId","81e81151-55f5-475e-9c7b-b95af212bd66","name","memebrawl","description","Welcome to the ultimate digital colosseum where memes battle for supremacy across continental divisions! Mint your regional meme warriors, stake your tokens on crowd favorites, and watch as the blockchain immortalizes the victorious in a blaze of NFT glory. The winners don't just get bragging rights—they become legendary tradable assets in the memeverse!","brief","Global meme gladiators battle for NFT immortality while you stake tokens on the funniest to survive!","isLive",true,"isPublic","tags",[],"cover","https://cdn.dev.fun/snapshot/2d0f93112a077ba49dc1/82008_b773f9f6.webp","cdnUrl","https://cdn.dev.fun/app/2d0f93112a077ba49dc1/82008","createdAt",["D",1749924746564],"updatedAt",["D",1749925524678],"lastCommitId",["B","82008"],"tier",1,"credits",-43,{"_14":46,"_47":48,"_49":-5,"_50":48,"_51":52,"_53":-5,"_54":55},"b912dd0a-068a-47db-8383-dc7aa6c90837","uniqueId","6MXKXdBVx3U8Be9DnF2R4sYPGTeMTjtsT7spcwZ9LKnH","username","solanaWallet","displayName","6MX...KnH","bio","avatar","/avatar.svg","commitCount",2,"forkCount",0,"likeCount","runsCount",6,"downvoteCount","upvoteCount","upvoteRate","commentCount","reportCount","visitorCount","isArchived","isRenamed","contractAddress","code","import { useState, useEffect, useCallback } from 'react';\nimport { useDevapp, UserButton, DevappProvider } from '@devfunlabs/web-sdk';\nimport { motion, AnimatePresence } from 'framer-motion';\nimport { TrophyIcon, Flame, Sword, Shield, Globe, Upload, Crown, Trophy, Coins, GalleryVerticalEnd, Share2, Copy, BarChart3, CheckCircle, ArrowRight, Star, Gavel } from 'lucide-react';\nimport { io } from 'socket.io-client';\nconst socket = io('wss://ws.dev.fun/app-2d0f93112a077ba49dc1');\nexport default function AppWithProvider() {\n return \n \n ;\n}\nfunction App() {\n const {\n devbaseClient,\n userWallet,\n sendTransaction,\n signMessage\n } = useDevapp();\n const [currentPage, setCurrentPage] = useState('home');\n const [isUserConnected, setIsUserConnected] = useState(false);\n const [memes, setMemes] = useState([]);\n const [tournaments, setTournaments] = useState([]);\n const [activeTournament, setActiveTournament] = useState(null);\n const [userVotes, setUserVotes] = useState([]);\n const [userMemes, setUserMemes] = useState([]);\n const [isAdmin, setIsAdmin] = useState(false);\n const [leaderboard, setLeaderboard] = useState([]);\n const [realTimeVotes, setRealTimeVotes] = useState({});\n const [socketConnected, setSocketConnected] = useState(false);\n useEffect(() => {\n setIsUserConnected(!!userWallet);\n }, [userWallet]);\n useEffect(() => {\n const checkAdmin = async () => {\n if (devbaseClient && userWallet) {\n try {\n const {\n success\n } = await devbaseClient.evalCondition('$USER_ID === $OWNER_ID');\n setIsAdmin(success);\n } catch (error) {\n console.error('Error checking admin status:', error);\n }\n }\n };\n checkAdmin();\n }, [devbaseClient, userWallet]);\n useEffect(() => {\n function onConnect() {\n setSocketConnected(true);\n console.log('Socket connected');\n }\n function onDisconnect() {\n setSocketConnected(false);\n }\n function onVoteUpdate(data) {\n setRealTimeVotes(prev => ({\n ...prev,\n [data.memeId]: (prev[data.memeId] || 0) + data.amount\n }));\n }\n function onWinnerDeclared(data) {\n setMemes(prev => prev.map(meme => meme.id === data.memeId ? {\n ...meme,\n isWinner: true\n } : meme));\n }\n socket.on('connect', onConnect);\n socket.on('disconnect', onDisconnect);\n socket.on('vote_update', onVoteUpdate);\n socket.on('winner_declared', onWinnerDeclared);\n return () => {\n socket.off('connect', onConnect);\n socket.off('disconnect', onDisconnect);\n socket.off('vote_update', onVoteUpdate);\n socket.off('winner_declared', onWinnerDeclared);\n };\n }, []);\n useEffect(() => {\n const fetchData = async () => {\n if (devbaseClient && userWallet) {\n try {\n const fetchedTournaments = await devbaseClient.listEntities('tournaments');\n setTournaments(fetchedTournaments);\n if (fetchedTournaments.length > 0) {\n const activeTournamentData = fetchedTournaments.find(t => t.status === 'active') || fetchedTournaments[0];\n setActiveTournament(activeTournamentData);\n }\n const fetchedMemes = await devbaseClient.listEntities('memes');\n setMemes(fetchedMemes);\n const userMemesData = await devbaseClient.listEntities('memes', {\n userId: userWallet\n });\n setUserMemes(userMemesData);\n const userVotesData = await devbaseClient.listEntities('votes', {\n userId: userWallet\n });\n setUserVotes(userVotesData);\n const votesObj = {};\n for (const meme of fetchedMemes) {\n votesObj[meme.id] = meme.voteCount || 0;\n }\n setRealTimeVotes(votesObj);\n generateLeaderboard(fetchedMemes);\n } catch (error) {\n console.error('Error fetching initial data:', error);\n }\n }\n };\n fetchData();\n }, [devbaseClient, userWallet]);\n const generateLeaderboard = useCallback(memesData => {\n const creators = {};\n memesData.forEach(meme => {\n if (!creators[meme.userId]) {\n creators[meme.userId] = {\n userId: meme.userId,\n totalVotes: 0,\n winCount: 0,\n memeCount: 0,\n regions: new Set()\n };\n }\n creators[meme.userId].totalVotes += meme.voteCount || 0;\n creators[meme.userId].memeCount += 1;\n creators[meme.userId].regions.add(meme.region);\n if (meme.isWinner) {\n creators[meme.userId].winCount += 1;\n }\n });\n const leaderboardData = Object.values(creators).map(creator => ({\n ...creator,\n regions: Array.from(creator.regions)\n })).sort((a, b) => b.totalVotes - a.totalVotes);\n setLeaderboard(leaderboardData);\n }, []);\n useEffect(() => {\n generateLeaderboard(memes);\n }, [memes, generateLeaderboard]);\n const navigateTo = page => {\n setCurrentPage(page);\n };\n return

\n {}\n

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

\n\n {}\n

navigateTo('home')} role=\"button\">\n \n

\n MEMEBRAWL\n

\n \n

\n \n \n \n \n \n {isAdmin && }\n

\n \n

\n {socketConnected &&

\n Live\n

}\n \n

\n\n {}\n

\n \n \n \n \n \n {isAdmin && }\n

\n\n {}\n

\n \n {currentPage === 'home' && }\n \n {currentPage === 'mint' && }\n \n {currentPage === 'profile' && }\n \n {currentPage === 'hall-of-fame' && }\n\n {currentPage === 'leaderboard' && }\n\n {currentPage === 'admin' && isAdmin && }\n \n

;\n}\nfunction HomePage({\n navigateTo,\n isUserConnected,\n tournaments,\n activeTournament,\n memes,\n userVotes,\n devbaseClient,\n userWallet,\n setUserVotes,\n sendTransaction,\n realTimeVotes,\n socket\n}) {\n const [selectedRegion, setSelectedRegion] = useState('all');\n const regions = ['all', 'africa', 'asia', 'india', 'europe'];\n const [currentRound] = useState(1);\n const [brackets, setBrackets] = useState([]);\n const [isLoading, setIsLoading] = useState(false);\n const [stakeAmount, setStakeAmount] = useState(0.01);\n const [showStakeModal, setShowStakeModal] = useState(false);\n const [selectedMeme, setSelectedMeme] = useState(null);\n useEffect(() => {\n if (activeTournament) {\n const tournamentMemes = memes.filter(meme => meme.tournamentId === activeTournament.id && (selectedRegion === 'all' || meme.region === selectedRegion));\n const bracketPairs = [];\n for (let i = 0; i < tournamentMemes.length; i += 2) {\n if (i + 1 < tournamentMemes.length) {\n bracketPairs.push([tournamentMemes[i], tournamentMemes[i + 1]]);\n } else {\n bracketPairs.push([tournamentMemes[i], null]);\n }\n }\n setBrackets(bracketPairs);\n }\n }, [activeTournament, memes, selectedRegion]);\n const openStakeModal = meme => {\n setSelectedMeme(meme);\n setShowStakeModal(true);\n };\n const closeStakeModal = () => {\n setShowStakeModal(false);\n setSelectedMeme(null);\n setStakeAmount(0.01);\n };\n const handleVote = async () => {\n if (!isUserConnected || !devbaseClient || !userWallet || !selectedMeme) {\n alert(\"Please connect your wallet to vote!\");\n return;\n }\n setIsLoading(true);\n try {\n const voteData = {\n userId: userWallet,\n memeId: selectedMeme.id,\n amount: stakeAmount,\n tournamentId: activeTournament.id,\n timestamp: Date.now()\n };\n const newVote = await devbaseClient.createEntity('votes', voteData);\n setUserVotes(prev => [...prev, newVote]);\n socket.emit('vote_update', {\n memeId: selectedMeme.id,\n amount: stakeAmount,\n userId: userWallet,\n tournamentId: activeTournament.id\n });\n closeStakeModal();\n setIsLoading(false);\n } catch (error) {\n console.error('Error voting:', error);\n setIsLoading(false);\n alert('Failed to submit vote. Please try again.');\n }\n };\n const hasVotedForMeme = memeId => {\n return userVotes.some(vote => vote.memeId === memeId);\n };\n const getVoteCount = memeId => {\n return realTimeVotes[memeId] || 0;\n };\n return \n {}\n

\n \n

\n WELCOME TO THE
MEME COLOSSEUM\n

\n Mint regional meme warriors, stake tokens on crowd favorites, and watch as winners become legendary NFTs!\n

\n \n {!isUserConnected &&

Connect your wallet to start battling in the arena!

\n \n

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

\n \n

\n \n {}\n {activeTournament &&

\n \n Current Tournament: {activeTournament.name}\n

Round {currentRound} • {activeTournament.status === 'active' ? 'Voting Open' : 'Closed'}

\n \n

\n {regions.map(region => )}\n

\n \n {}\n

\n {brackets.map((bracketPair, index) =>

\n \n Matchup #{index + 1}\n

\n \n

\n {bracketPair.map((meme, memeIndex) => meme &&

\n {meme.imageUrl ? {meme.title}

\n No Image\n

}\n

\n \n

{meme.title}

\n \n {meme.region}\n

\n \n

\n \n {getVoteCount(meme.id)} votes\n

\n \n \n

)}\n \n {}\n {bracketPair.length === 1 &&

Waiting for opponent

}\n

)}\n

\n \n {brackets.length === 0 &&

No matchups available for this region

\n \n

}\n \n {}\n

Want to join the battle?

\n \n

}\n\n {}\n {showStakeModal && selectedMeme &&

\n \n

Stake & Vote

Staking tokens for:

\n {selectedMeme.imageUrl && {selectedMeme.title}

}\n

{selectedMeme.title}

{selectedMeme.region}

\n \n

\n Stake Amount (SOL)\n

\n setStakeAmount(parseFloat(e.target.value) || 0.001)} min=\"0.001\" step=\"0.001\" className=\"flex-grow bg-gray-800 border border-pink-500/30 rounded-l-lg px-4 py-3 text-white focus:outline-none\" />\n

\n SOL\n

\n \n \n \n

\n \n

\n \n \n

\n \n

}\n ;\n}\nfunction MintPage({\n navigateTo,\n isUserConnected,\n devbaseClient,\n userWallet,\n setMemes,\n setUserMemes,\n sendTransaction\n}) {\n const [memeTitle, setMemeTitle] = useState('');\n const [memeDescription, setMemeDescription] = useState('');\n const [selectedRegion, setSelectedRegion] = useState('');\n const [imageUrl, setImageUrl] = useState('');\n const [isUploading, setIsUploading] = useState(false);\n const [isSubmitting, setIsSubmitting] = useState(false);\n const [mintStatus, setMintStatus] = useState('');\n const regions = ['africa', 'asia', 'india', 'europe'];\n const handleImageUpload = e => {\n const file = e.target.files[0];\n if (!file) return;\n setIsUploading(true);\n setTimeout(() => {\n setImageUrl(`https://source.unsplash.com/random/800x800/?meme,${selectedRegion || 'funny'}`);\n setIsUploading(false);\n }, 1500);\n };\n const handleSubmit = async e => {\n e.preventDefault();\n if (!isUserConnected || !devbaseClient || !userWallet) {\n alert(\"Please connect your wallet to mint a meme!\");\n return;\n }\n if (!memeTitle || !selectedRegion) {\n alert(\"Please fill out all required fields\");\n return;\n }\n setIsSubmitting(true);\n setMintStatus('Creating metadata...');\n try {\n const tournaments = await devbaseClient.listEntities('tournaments');\n const activeTournament = tournaments.find(t => t.status === 'active');\n if (!activeTournament) {\n alert(\"No active tournament found\");\n setIsSubmitting(false);\n return;\n }\n const finalImageUrl = imageUrl || `https://source.unsplash.com/random/800x800/?meme,${selectedRegion}`;\n setMintStatus('Minting on-chain NFT...');\n const memeData = {\n userId: userWallet,\n title: memeTitle,\n description: memeDescription,\n region: selectedRegion,\n imageUrl: finalImageUrl,\n tournamentId: activeTournament.id,\n mintTimestamp: Date.now(),\n voteCount: 0,\n round: 1,\n isWinner: false\n };\n const newMeme = await devbaseClient.createEntity('memes', memeData);\n setMemes(prev => [...prev, newMeme]);\n setUserMemes(prev => [...prev, newMeme]);\n setMemeTitle('');\n setMemeDescription('');\n setSelectedRegion('');\n setImageUrl('');\n setIsSubmitting(false);\n setMintStatus('');\n navigateTo('home');\n } catch (error) {\n console.error('Error minting meme:', error);\n setIsSubmitting(false);\n setMintStatus('');\n alert('Failed to mint meme. Please try again.');\n }\n };\n if (!isUserConnected) {\n return \n

Connect Wallet to Mint

You need to connect your wallet to mint your meme fighter for the tournament.

\n \n ;\n }\n return \n

\n \n Mint Your Meme Fighter\n

Create a legendary meme warrior to compete in the arena

\n \n

\n Meme Title *\n setMemeTitle(e.target.value)} className=\"w-full bg-gray-900/50 border border-pink-500/30 rounded-lg px-4 py-3 text-white focus:outline-none focus:ring-2 focus:ring-pink-500/50\" placeholder=\"Give your meme a catchy name\" required />\n

\n \n

\n Description\n

setMemeDescription(e.target.value)} className=\"w-full bg-gray-900/50 border border-pink-500/30 rounded-lg px-4 py-3 text-white focus:outline-none focus:ring-2 focus:ring-pink-500/50 min-h-[120px]\" placeholder=\"Tell us about your meme (optional)\" />\n                </div>\n                \n                <div>\n                  <label className=\"block text-gray-300 mb-2\">Region *</label>\n                  <div className=\"grid grid-cols-2 gap-3\">\n                    {regions.map(region => <button key={region} type=\"button\" onClick={() => setSelectedRegion(region)} className={`px-4 py-3 rounded-lg capitalize flex items-center justify-center gap-2 transition-all ${selectedRegion === region ? 'bg-pink-600 text-white font-medium border-2 border-pink-400' : 'bg-gray-800/50 hover:bg-gray-700/50 text-gray-300 border border-gray-700'}`}>\n                        <Globe className=\"h-4 w-4\" />\n                        {region}\n                      </button>)}\n                  </div>\n                </div>\n              </div>\n              \n              <div>\n                <label className=\"block text-gray-300 mb-2\">Meme Image</label>\n                <div className=\"border-2 border-dashed border-pink-500/30 rounded-lg overflow-hidden bg-gray-900/30 aspect-square flex flex-col items-center justify-center p-4\">\n                  {imageUrl ? <div className=\"relative w-full h-full\">\n                      <img src={imageUrl} alt=\"Meme preview\" className=\"w-full h-full object-cover rounded-lg\" />\n                      <button type=\"button\" onClick={() => setImageUrl('')} className=\"absolute top-2 right-2 bg-black/60 rounded-full p-2 text-white hover:bg-black/80 transition-all\">\n                        ×\n                      </button>\n                    </div> : <>\n                      {isUploading ? <div className=\"text-center\">\n                          <div className=\"inline-block animate-spin rounded-full h-8 w-8 border-t-2 border-pink-500 border-r-2 border-pink-500 border-b-2 border-transparent mb-2\"></div>\n                          <p>Uploading...</p>\n                        </div> : <>\n                          <Upload className=\"h-12 w-12 text-pink-500/50 mb-4\" />\n                          <p className=\"text-center text-gray-400 mb-4\">Drag and drop your meme image here or click to browse</p>\n                          <label className=\"px-4 py-2 bg-pink-600 hover:bg-pink-500 rounded-full cursor-pointer transition-all\">\n                            Upload Image\n                            <input type=\"file\" accept=\"image/*\" onChange={handleImageUpload} className=\"hidden\" />\n                          </label>\n                        </>}\n                    </>}\n                </div>\n                <p className=\"text-sm text-gray-400 mt-2\">\n                  If you don't upload an image, we'll generate one based on your region.\n                </p>\n              </div>\n            </div>\n            \n            <div className=\"flex justify-end gap-4 pt-4 border-t border-pink-500/20\">\n              <button type=\"button\" onClick={() => navigateTo('home')} className=\"px-6 py-3 bg-gray-800 hover:bg-gray-700 rounded-lg transition-all\">\n                Cancel\n              </button>\n              <button type=\"submit\" disabled={isSubmitting} className=\"px-6 py-3 bg-gradient-to-r from-pink-600 to-purple-600 hover:from-pink-500 hover:to-purple-500 rounded-lg font-medium transition-all shadow-lg shadow-pink-900/30 flex items-center gap-2\">\n                {isSubmitting ? <>\n                    <div className=\"h-4 w-4 border-2 border-white border-t-transparent rounded-full animate-spin\"></div>\n                    {mintStatus || 'Processing...'}\n                  </> : <>\n                    <Sword className=\"h-5 w-5\" />\n                    Mint Meme Fighter\n                  </>}\n              </button>\n            </div>\n          </form>\n        </div>\n      </div>\n    </motion.div>;\n}\nfunction ProfilePage({\n  navigateTo,\n  isUserConnected,\n  userMemes,\n  userVotes,\n  memes\n}) {\n  const [activeTab, setActiveTab] = useState('memes');\n  if (!isUserConnected) {\n    return <motion.div initial={{\n      opacity: 0,\n      y: 20\n    }} animate={{\n      opacity: 1,\n      y: 0\n    }} exit={{\n      opacity: 0,\n      y: -20\n    }} transition={{\n      duration: 0.3\n    }} className=\"max-w-lg mx-auto text-center py-16\">\n        <h2 className=\"text-3xl font-bold mb-6\">Connect Wallet to View Profile</h2>\n        <p className=\"text-gray-300 mb-8\">You need to connect your wallet to view your meme fighters and voting history.</p>\n        <UserButton height=\"48px\" primaryColor=\"#ec4899\" radius=\"8px\" bgColor=\"#3d0764\" textColor=\"#ffffff\" hoverBgColor=\"#4c0a7c\" />\n      </motion.div>;\n  }\n  const getMemeById = memeId => {\n    return memes.find(m => m.id === memeId);\n  };\n  return <motion.div initial={{\n    opacity: 0,\n    y: 20\n  }} animate={{\n    opacity: 1,\n    y: 0\n  }} exit={{\n    opacity: 0,\n    y: -20\n  }} transition={{\n    duration: 0.3\n  }}>\n      <h2 className=\"text-3xl font-bold mb-2 flex items-center gap-2\">\n        <GalleryVerticalEnd className=\"h-7 w-7 text-pink-500\" />\n        My Meme Vault\n      </h2>\n      <p className=\"text-gray-300 mb-8\">Manage your meme fighters and voting history</p>\n      \n      <div className=\"bg-black/40 backdrop-blur-sm rounded-xl border border-pink-500/20 overflow-hidden\">\n        <div className=\"border-b border-pink-500/20\">\n          <div className=\"flex\">\n            <button onClick={() => setActiveTab('memes')} className={`px-6 py-4 font-medium transition-all relative ${activeTab === 'memes' ? 'text-pink-400' : 'text-gray-400 hover:text-gray-200'}`}>\n              My Meme Fighters\n              {activeTab === 'memes' && <motion.div layoutId=\"activeTabIndicator\" className=\"absolute bottom-0 left-0 right-0 h-0.5 bg-pink-500\" />}\n            </button>\n            <button onClick={() => setActiveTab('votes')} className={`px-6 py-4 font-medium transition-all relative ${activeTab === 'votes' ? 'text-pink-400' : 'text-gray-400 hover:text-gray-200'}`}>\n              My Votes\n              {activeTab === 'votes' && <motion.div layoutId=\"activeTabIndicator\" className=\"absolute bottom-0 left-0 right-0 h-0.5 bg-pink-500\" />}\n            </button>\n          </div>\n        </div>\n        \n        <div className=\"p-6\">\n          {activeTab === 'memes' && <div className=\"space-y-6\">\n              {userMemes.length > 0 ? <div className=\"grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 gap-6\">\n                  {userMemes.map(meme => <div key={meme.id} className=\"bg-gray-900/50 border border-pink-500/20 rounded-lg overflow-hidden\">\n                      <div className=\"aspect-square bg-black/50\">\n                        {meme.imageUrl && <img src={meme.imageUrl} alt={meme.title} className=\"w-full h-full object-cover\" />}\n                      </div>\n                      <div className=\"p-4\">\n                        <h3 className=\"font-bold text-lg mb-1\">{meme.title}</h3>\n                        <div className=\"flex items-center justify-between text-sm mb-3\">\n                          <span className=\"text-gray-400 capitalize\">{meme.region}</span>\n                          <span className=\"bg-pink-500/10 text-pink-300 px-2 py-0.5 rounded-full\">\n                            {meme.voteCount} votes\n                          </span>\n                        </div>\n                        {meme.isWinner && <div className=\"flex items-center gap-1 text-yellow-400 text-sm font-medium bg-yellow-400/10 px-2 py-1 rounded-full w-fit\">\n                            <Crown className=\"h-4 w-4\" />\n                            Winner\n                          </div>}\n                      </div>\n                    </div>)}\n                </div> : <div className=\"text-center py-12\">\n                  <p className=\"text-xl text-gray-400 mb-6\">You haven't minted any meme fighters yet</p>\n                  <button onClick={() => navigateTo('mint')} className=\"px-6 py-3 bg-pink-600 hover:bg-pink-500 rounded-full transition-all\">\n                    Mint Your First Meme\n                  </button>\n                </div>}\n            </div>}\n          \n          {activeTab === 'votes' && <div className=\"space-y-6\">\n              {userVotes.length > 0 ? <div className=\"divide-y divide-pink-500/10\">\n                  {userVotes.map(vote => {\n              const votedMeme = getMemeById(vote.memeId);\n              return votedMeme && <div key={vote.id} className=\"py-4 flex items-center gap-4\">\n                        <div className=\"w-16 h-16 rounded-lg overflow-hidden bg-black/50 flex-shrink-0\">\n                          {votedMeme.imageUrl && <img src={votedMeme.imageUrl} alt={votedMeme.title} className=\"w-full h-full object-cover\" />}\n                        </div>\n                        <div className=\"flex-grow\">\n                          <h3 className=\"font-medium\">{votedMeme.title}</h3>\n                          <p className=\"text-sm text-gray-400 capitalize\">{votedMeme.region}</p>\n                        </div>\n                        <div className=\"text-right\">\n                          <div className=\"text-sm font-medium text-pink-400\">{vote.amount} SOL</div>\n                          <div className=\"text-xs text-gray-500\">\n                            {new Date(vote.timestamp).toLocaleDateString()}\n                          </div>\n                        </div>\n                      </div>;\n            })}\n                </div> : <div className=\"text-center py-12\">\n                  <p className=\"text-xl text-gray-400 mb-6\">You haven't voted for any memes yet</p>\n                  <button onClick={() => navigateTo('home')} className=\"px-6 py-3 bg-pink-600 hover:bg-pink-500 rounded-full transition-all\">\n                    Go to Arena\n                  </button>\n                </div>}\n            </div>}\n        </div>\n      </div>\n    </motion.div>;\n}\nfunction HallOfFamePage({\n  navigateTo,\n  tournaments,\n  memes,\n  devbaseClient,\n  userWallet,\n  sendTransaction\n}) {\n  const completedTournaments = tournaments.filter(t => t.status === 'completed');\n  const [selectedTournament, setSelectedTournament] = useState(completedTournaments[0]?.id || '');\n  const winnerMemes = memes.filter(meme => meme.isWinner && (!selectedTournament || meme.tournamentId === selectedTournament));\n  const [isBuying, setIsBuying] = useState(false);\n  const [selectedMeme, setSelectedMeme] = useState(null);\n  const [shareModalOpen, setShareModalOpen] = useState(false);\n  const handleBuyNFT = async meme => {\n    if (!userWallet) {\n      alert(\"Please connect your wallet to purchase this NFT\");\n      return;\n    }\n    setIsBuying(true);\n    setSelectedMeme(meme);\n    try {\n      setTimeout(() => {\n        alert(`Successfully purchased ${meme.title} NFT!`);\n        setIsBuying(false);\n        setSelectedMeme(null);\n      }, 2000);\n    } catch (error) {\n      console.error('Error purchasing NFT:', error);\n      alert('Failed to purchase NFT. Please try again.');\n      setIsBuying(false);\n      setSelectedMeme(null);\n    }\n  };\n  const handleShare = meme => {\n    setSelectedMeme(meme);\n    setShareModalOpen(true);\n  };\n  const copyShareLink = () => {\n    if (!selectedMeme) return;\n    const shareUrl = `https://memebrawl.dev.fun/meme/${selectedMeme.id}`;\n    navigator.clipboard.writeText(shareUrl);\n    alert('Share link copied to clipboard!');\n  };\n  const shareToTwitter = () => {\n    if (!selectedMeme) return;\n    const shareText = `Check out this legendary meme \"${selectedMeme.title}\" from the ${selectedMeme.region} region that won the MEMEBRAWL tournament! 🏆`;\n    const shareUrl = `https://memebrawl.dev.fun/meme/${selectedMeme.id}`;\n    const twitterUrl = `https://twitter.com/intent/tweet?text=${encodeURIComponent(shareText)}&url=${encodeURIComponent(shareUrl)}`;\n    window.open(twitterUrl, '_blank');\n  };\n  return <motion.div initial={{\n    opacity: 0,\n    y: 20\n  }} animate={{\n    opacity: 1,\n    y: 0\n  }} exit={{\n    opacity: 0,\n    y: -20\n  }} transition={{\n    duration: 0.3\n  }}>\n      <h2 className=\"text-3xl font-bold mb-2 flex items-center gap-2\">\n        <TrophyIcon className=\"h-7 w-7 text-yellow-400\" />\n        Hall of Fame\n      </h2>\n      <p className=\"text-gray-300 mb-8\">Legendary meme fighters immortalized on the blockchain</p>\n      \n      {completedTournaments.length > 0 ? <>\n          <div className=\"flex justify-end mb-6\">\n            <select value={selectedTournament} onChange={e => setSelectedTournament(e.target.value)} className=\"bg-gray-900/70 border border-pink-500/30 rounded-lg px-4 py-2 text-white focus:outline-none focus:ring-2 focus:ring-pink-500/50\">\n              <option value=\"\">All Tournaments</option>\n              {completedTournaments.map(tournament => <option key={tournament.id} value={tournament.id}>\n                  {tournament.name}\n                </option>)}\n            </select>\n          </div>\n          \n          {winnerMemes.length > 0 ? <div className=\"grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 gap-8\">\n              {winnerMemes.map(meme => {\n          const tournament = tournaments.find(t => t.id === meme.tournamentId);\n          return <motion.div key={meme.id} whileHover={{\n            y: -5\n          }} className=\"bg-gradient-to-b from-yellow-500/20 to-pink-500/20 rounded-xl overflow-hidden border border-yellow-500/30\">\n                    <div className=\"relative aspect-square\">\n                      {meme.imageUrl && <img src={meme.imageUrl} alt={meme.title} className=\"w-full h-full object-cover\" />}\n                      <div className=\"absolute top-3 left-3 bg-black/60 backdrop-blur-sm px-3 py-1 rounded-full text-xs font-medium flex items-center gap-1\">\n                        <Trophy className=\"h-3 w-3 text-yellow-400\" />\n                        <span className=\"text-yellow-300\">Champion</span>\n                      </div>\n                    </div>\n                    <div className=\"p-5\">\n                      <h3 className=\"font-bold text-xl mb-1\">{meme.title}</h3>\n                      <p className=\"text-gray-400 text-sm mb-3 capitalize\">\n                        Region: {meme.region}\n                      </p>\n                      {tournament && <p className=\"text-pink-300 text-sm mb-4\">\n                          Tournament: {tournament.name}\n                        </p>}\n                      <div className=\"flex justify-between items-center\">\n                        <div className=\"bg-yellow-500/10 text-yellow-300 px-3 py-1 rounded-full text-sm\">\n                          {meme.voteCount} votes\n                        </div>\n                        <div className=\"flex gap-2\">\n                          <button onClick={() => handleShare(meme)} className=\"text-sm p-1.5 bg-blue-600 hover:bg-blue-500 rounded-full transition-all\">\n                            <Share2 className=\"h-4 w-4\" />\n                          </button>\n                          <button onClick={() => handleBuyNFT(meme)} disabled={isBuying && selectedMeme?.id === meme.id} className=\"text-sm px-4 py-1.5 bg-pink-600 hover:bg-pink-500 rounded-full transition-all flex items-center gap-1\">\n                            {isBuying && selectedMeme?.id === meme.id ? <div className=\"h-3 w-3 border-2 border-white border-t-transparent rounded-full animate-spin\"></div> : <>Buy NFT</>}\n                          </button>\n                        </div>\n                      </div>\n                    </div>\n                  </motion.div>;\n        })}\n            </div> : <div className=\"text-center py-16 bg-black/30 rounded-xl border border-pink-500/20\">\n              <p className=\"text-xl text-gray-400\">No winners found for this tournament</p>\n              {selectedTournament && <button onClick={() => setSelectedTournament('')} className=\"mt-4 px-6 py-2 bg-pink-600 hover:bg-pink-500 rounded-full transition-all\">\n                  View All Winners\n                </button>}\n            </div>}\n        </> : <div className=\"text-center py-16 bg-black/30 rounded-xl border border-pink-500/20\">\n          <h3 className=\"text-2xl font-bold mb-4\">No Completed Tournaments Yet</h3>\n          <p className=\"text-gray-400 mb-6\">\n            The battle has just begun! Winners will be immortalized here after tournaments are completed.\n          </p>\n          <button onClick={() => navigateTo('home')} className=\"px-6 py-3 bg-pink-600 hover:bg-pink-500 rounded-full transition-all\">\n            Back to Arena\n          </button>\n        </div>}\n\n      {}\n      {shareModalOpen && selectedMeme && <div className=\"fixed inset-0 bg-black/70 backdrop-blur-sm flex items-center justify-center z-50\">\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-gray-900 border border-pink-500/30 rounded-xl p-6 max-w-md w-full mx-4\">\n            <h3 className=\"text-2xl font-bold mb-4\">Share this Legendary Meme</h3>\n            <div className=\"mb-6\">\n              <div className=\"flex items-center gap-3 bg-black/30 p-3 rounded-lg mb-4\">\n                <div className=\"w-16 h-16 rounded-lg overflow-hidden flex-shrink-0\">\n                  {selectedMeme.imageUrl && <img src={selectedMeme.imageUrl} alt={selectedMeme.title} className=\"w-full h-full object-cover\" />}\n                </div>\n                <div>\n                  <h4 className=\"font-bold\">{selectedMeme.title}</h4>\n                  <p className=\"text-sm text-gray-400 capitalize\">{selectedMeme.region}</p>\n                </div>\n              </div>\n              \n              <div className=\"p-3 bg-black/30 rounded-lg text-gray-300 text-sm mb-4 flex items-center justify-between\">\n                <span className=\"truncate\">https://memebrawl.dev.fun/meme/{selectedMeme.id}</span>\n                <button onClick={copyShareLink} className=\"ml-2 p-1.5 bg-gray-800 hover:bg-gray-700 rounded-lg text-white flex-shrink-0\">\n                  <Copy className=\"h-4 w-4\" />\n                </button>\n              </div>\n            </div>\n            \n            <div className=\"grid grid-cols-2 gap-3 mb-6\">\n              <button onClick={shareToTwitter} className=\"flex items-center justify-center gap-2 py-3 bg-blue-600 hover:bg-blue-500 rounded-lg transition-all\">\n                <svg className=\"h-5 w-5\" fill=\"currentColor\" viewBox=\"0 0 24 24\">\n                  <path d=\"M18.244 2.25h3.308l-7.227 8.26 8.502 11.24H16.17l-5.214-6.817L4.99 21.75H1.68l7.73-8.835L1.254 2.25H8.08l4.713 6.231zm-1.161 17.52h1.833L7.084 4.126H5.117z\"></path>\n                </svg>\n                Share on Twitter\n              </button>\n              <button onClick={() => setShareModalOpen(false)} className=\"py-3 bg-gray-800 hover:bg-gray-700 rounded-lg transition-all\">\n                Close\n              </button>\n            </div>\n            \n            <div className=\"flex items-center text-center text-xs text-gray-400 mt-4\">\n              <div className=\"flex-grow border-t border-gray-700\"></div>\n              <span className=\"px-3\">Share this legendary meme with the world!</span>\n              <div className=\"flex-grow border-t border-gray-700\"></div>\n            </div>\n          </motion.div>\n        </div>}\n    </motion.div>;\n}\nfunction LeaderboardPage({\n  navigateTo,\n  leaderboard,\n  userWallet\n}) {\n  return <motion.div initial={{\n    opacity: 0,\n    y: 20\n  }} animate={{\n    opacity: 1,\n    y: 0\n  }} exit={{\n    opacity: 0,\n    y: -20\n  }} transition={{\n    duration: 0.3\n  }}>\n      <h2 className=\"text-3xl font-bold mb-2 flex items-center gap-2\">\n        <BarChart3 className=\"h-7 w-7 text-pink-500\" />\n        Meme Creator Leaderboard\n      </h2>\n      <p className=\"text-gray-300 mb-8\">The top meme creators ranked by total votes received</p>\n      \n      <div className=\"bg-black/40 backdrop-blur-sm rounded-xl border border-pink-500/20 overflow-hidden\">\n        <div className=\"p-4 bg-gradient-to-r from-pink-500/10 to-purple-500/10 border-b border-pink-500/20\">\n          <div className=\"grid grid-cols-8 text-sm font-medium text-gray-300\">\n            <div className=\"col-span-1\">Rank</div>\n            <div className=\"col-span-3\">Creator</div>\n            <div className=\"col-span-1 text-center\">Memes</div>\n            <div className=\"col-span-1 text-center\">Regions</div>\n            <div className=\"col-span-1 text-center\">Wins</div>\n            <div className=\"col-span-1 text-center\">Votes</div>\n          </div>\n        </div>\n        \n        <div className=\"divide-y divide-pink-500/10\">\n          {leaderboard.length > 0 ? leaderboard.map((creator, index) => <div key={creator.userId} className={`p-4 grid grid-cols-8 items-center ${creator.userId === userWallet ? 'bg-pink-500/10' : index % 2 === 0 ? 'bg-black/20' : ''}`}>\n                <div className=\"col-span-1 flex items-center\">\n                  {index < 3 ? <div className={`w-8 h-8 rounded-full flex items-center justify-center text-black font-bold ${index === 0 ? 'bg-yellow-400' : index === 1 ? 'bg-gray-300' : 'bg-amber-600'}`}>\n                      {index + 1}\n                    </div> : <div className=\"text-gray-400 font-medium ml-3\">\n                      {index + 1}\n                    </div>}\n                </div>\n                <div className=\"col-span-3 font-medium flex items-center\">\n                  <div className=\"truncate\">\n                    {creator.userId === userWallet ? <span className=\"text-pink-400\">You</span> : `${creator.userId.slice(0, 6)}...${creator.userId.slice(-4)}`}\n                  </div>\n                  {creator.userId === userWallet && <div className=\"ml-2 px-2 py-0.5 bg-pink-500/20 text-pink-300 rounded-full text-xs\">\n                      You\n                    </div>}\n                </div>\n                <div className=\"col-span-1 text-center\">\n                  {creator.memeCount}\n                </div>\n                <div className=\"col-span-1 text-center\">\n                  {creator.regions.length}\n                </div>\n                <div className=\"col-span-1 text-center font-medium text-yellow-400\">\n                  {creator.winCount}\n                </div>\n                <div className=\"col-span-1 text-center font-medium text-pink-400\">\n                  {creator.totalVotes}\n                </div>\n              </div>) : <div className=\"py-16 text-center\">\n              <p className=\"text-xl text-gray-400\">No creators yet. Be the first!</p>\n              <button onClick={() => navigateTo('mint')} className=\"mt-4 px-6 py-2 bg-pink-600 hover:bg-pink-500 rounded-full transition-all\">\n                Mint a Meme\n              </button>\n            </div>}\n        </div>\n      </div>\n      \n      <div className=\"mt-8 text-center\">\n        <p className=\"text-gray-300 mb-4\">Want to climb the leaderboard?</p>\n        <div className=\"flex flex-wrap gap-4 justify-center\">\n          <button onClick={() => navigateTo('mint')} className=\"px-6 py-3 bg-pink-600 hover:bg-pink-500 rounded-full transition-all flex items-center gap-2\">\n            <Upload className=\"h-5 w-5\" />\n            Mint New Memes\n          </button>\n          <button onClick={() => navigateTo('home')} className=\"px-6 py-3 bg-indigo-600 hover:bg-indigo-500 rounded-full transition-all flex items-center gap-2\">\n            <Flame className=\"h-5 w-5\" />\n            Join Active Battles\n          </button>\n        </div>\n      </div>\n    </motion.div>;\n}\nfunction AdminPage({\n  navigateTo,\n  tournaments,\n  memes,\n  devbaseClient,\n  userWallet,\n  signMessage,\n  socket\n}) {\n  const [selectedTournament, setSelectedTournament] = useState('');\n  const [selectedRegion, setSelectedRegion] = useState('all');\n  const [isProcessing, setIsProcessing] = useState(false);\n  const [selectedMeme, setSelectedMeme] = useState(null);\n  const regions = ['all', 'africa', 'asia', 'india', 'europe'];\n  const activeTournaments = tournaments.filter(t => t.status === 'active');\n  const filteredMemes = memes.filter(meme => (selectedTournament === '' || meme.tournamentId === selectedTournament) && (selectedRegion === 'all' || meme.region === selectedRegion));\n  const tournamentMemes = {};\n  filteredMemes.forEach(meme => {\n    if (!tournamentMemes[meme.tournamentId]) {\n      tournamentMemes[meme.tournamentId] = [];\n    }\n    tournamentMemes[meme.tournamentId].push(meme);\n  });\n  const handleDeclareWinner = async meme => {\n    if (!userWallet || !signMessage) {\n      alert(\"Please connect your wallet to perform admin actions\");\n      return;\n    }\n    setIsProcessing(true);\n    setSelectedMeme(meme);\n    try {\n      const message = new TextEncoder().encode(`I declare meme ${meme.id} as winner`);\n      await signMessage(message);\n      const updatedMeme = {\n        ...meme,\n        isWinner: true\n      };\n      await devbaseClient.updateEntity('memes', meme.id, updatedMeme);\n      socket.emit('winner_declared', {\n        memeId: meme.id\n      });\n      alert(`Successfully declared \"${meme.title}\" as a winner!`);\n      setIsProcessing(false);\n      setSelectedMeme(null);\n    } catch (error) {\n      console.error('Error declaring winner:', error);\n      alert('Failed to declare winner. Please try again.');\n      setIsProcessing(false);\n      setSelectedMeme(null);\n    }\n  };\n  const handleAdvanceRound = async tournamentId => {\n    if (!userWallet || !signMessage) {\n      alert(\"Please connect your wallet to perform admin actions\");\n      return;\n    }\n    setIsProcessing(true);\n    try {\n      const tournament = tournaments.find(t => t.id === tournamentId);\n      if (!tournament) {\n        throw new Error(\"Tournament not found\");\n      }\n      const message = new TextEncoder().encode(`I advance tournament ${tournamentId} to next round`);\n      await signMessage(message);\n      const updatedTournament = {\n        ...tournament,\n        currentRound: tournament.currentRound + 1,\n        status: tournament.currentRound + 1 >= tournament.totalRounds ? 'completed' : 'active'\n      };\n      await devbaseClient.updateEntity('tournaments', tournamentId, updatedTournament);\n      alert(`Successfully advanced tournament to round ${updatedTournament.currentRound}!`);\n      setIsProcessing(false);\n    } catch (error) {\n      console.error('Error advancing round:', error);\n      alert('Failed to advance round. Please try again.');\n      setIsProcessing(false);\n    }\n  };\n  return <motion.div initial={{\n    opacity: 0,\n    y: 20\n  }} animate={{\n    opacity: 1,\n    y: 0\n  }} exit={{\n    opacity: 0,\n    y: -20\n  }} transition={{\n    duration: 0.3\n  }}>\n      <div className=\"flex items-center justify-between\">\n        <div>\n          <h2 className=\"text-3xl font-bold mb-2 flex items-center gap-2\">\n            <Gavel className=\"h-7 w-7 text-yellow-400\" />\n            Admin Panel\n          </h2>\n          <p className=\"text-gray-300 mb-8\">Manage tournaments, declare winners, and advance rounds</p>\n        </div>\n        <div className=\"bg-yellow-500/20 px-3 py-1 rounded-full text-yellow-300 text-sm font-medium flex items-center gap-1\">\n          <Crown className=\"h-4 w-4\" />\n          Admin Mode\n        </div>\n      </div>\n      \n      <div className=\"bg-black/40 backdrop-blur-sm rounded-xl border border-yellow-500/20 overflow-hidden mb-8\">\n        <div className=\"p-4 bg-gradient-to-r from-yellow-500/10 to-orange-500/10 border-b border-yellow-500/20\">\n          <h3 className=\"text-xl font-bold\">Tournament Controls</h3>\n        </div>\n        \n        <div className=\"p-6 space-y-6\">\n          <div className=\"flex flex-wrap gap-4\">\n            <div className=\"bg-black/30 rounded-lg p-4 flex-grow\">\n              <h4 className=\"font-medium mb-2\">Filter by Tournament</h4>\n              <select value={selectedTournament} onChange={e => setSelectedTournament(e.target.value)} className=\"w-full bg-gray-900/70 border border-yellow-500/30 rounded-lg px-4 py-2 text-white focus:outline-none\">\n                <option value=\"\">All Tournaments</option>\n                {activeTournaments.map(tournament => <option key={tournament.id} value={tournament.id}>\n                    {tournament.name} (Round {tournament.currentRound}/{tournament.totalRounds})\n                  </option>)}\n              </select>\n            </div>\n            \n            <div className=\"bg-black/30 rounded-lg p-4 flex-grow\">\n              <h4 className=\"font-medium mb-2\">Filter by Region</h4>\n              <div className=\"flex flex-wrap gap-2\">\n                {regions.map(region => <button key={region} onClick={() => setSelectedRegion(region)} className={`px-3 py-1 rounded-full capitalize text-sm ${selectedRegion === region ? 'bg-yellow-500 text-black font-medium' : 'bg-gray-800/50 hover:bg-gray-700/50 text-gray-300'}`}>\n                    {region}\n                  </button>)}\n              </div>\n            </div>\n          </div>\n          \n          {activeTournaments.length > 0 && <div className=\"space-y-4\">\n              <h4 className=\"font-medium\">Active Tournaments</h4>\n              <div className=\"grid gap-4 grid-cols-1 md:grid-cols-2\">\n                {activeTournaments.map(tournament => <div key={tournament.id} className=\"bg-black/30 border border-yellow-500/30 rounded-lg p-4\">\n                    <div className=\"flex justify-between items-start mb-3\">\n                      <div>\n                        <h5 className=\"font-bold text-lg\">{tournament.name}</h5>\n                        <p className=\"text-sm text-gray-400\">\n                          Round {tournament.currentRound} of {tournament.totalRounds}\n                        </p>\n                      </div>\n                      <div className=\"bg-green-500/20 text-green-300 px-2 py-0.5 rounded-full text-xs\">\n                        Active\n                      </div>\n                    </div>\n                    \n                    <div className=\"mb-4\">\n                      <div className=\"h-2 bg-gray-800 rounded-full overflow-hidden\">\n                        <div className=\"h-full bg-gradient-to-r from-yellow-500 to-orange-500\" style={{\n                    width: `${tournament.currentRound / tournament.totalRounds * 100}%`\n                  }}></div>\n                      </div>\n                      <div className=\"flex justify-between text-xs text-gray-400 mt-1\">\n                        <span>Start</span>\n                        <span>End</span>\n                      </div>\n                    </div>\n                    \n                    <button onClick={() => handleAdvanceRound(tournament.id)} disabled={isProcessing} className=\"w-full py-2 bg-yellow-600 hover:bg-yellow-500 rounded-lg transition-all flex items-center justify-center gap-2\">\n                      {isProcessing ? <>\n                          <div className=\"h-4 w-4 border-2 border-white border-t-transparent rounded-full animate-spin\"></div>\n                          Processing...\n                        </> : <>\n                          <ArrowRight className=\"h-4 w-4\" />\n                          Advance to Next Round\n                        </>}\n                    </button>\n                  </div>)}\n              </div>\n            </div>}\n        </div>\n      </div>\n      \n      <div className=\"bg-black/40 backdrop-blur-sm rounded-xl border border-yellow-500/20 overflow-hidden\">\n        <div className=\"p-4 bg-gradient-to-r from-yellow-500/10 to-orange-500/10 border-b border-yellow-500/20\">\n          <h3 className=\"text-xl font-bold\">Meme Judging</h3>\n        </div>\n        \n        <div className=\"p-6\">\n          {Object.keys(tournamentMemes).length > 0 ? Object.entries(tournamentMemes).map(([tournamentId, memes]) => {\n          const tournament = tournaments.find(t => t.id === tournamentId);\n          return <div key={tournamentId} className=\"mb-8 last:mb-0\">\n                  {tournament && <h4 className=\"text-lg font-medium mb-4\">{tournament.name}</h4>}\n                  \n                  <div className=\"grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 gap-4\">\n                    {memes.map(meme => <div key={meme.id} className=\"bg-black/30 border border-yellow-500/20 rounded-lg overflow-hidden\">\n                        <div className=\"aspect-square\">\n                          {meme.imageUrl && <img src={meme.imageUrl} alt={meme.title} className=\"w-full h-full object-cover\" />}\n                        </div>\n                        <div className=\"p-4\">\n                          <h5 className=\"font-bold mb-1\">{meme.title}</h5>\n                          <div className=\"flex justify-between text-sm mb-3\">\n                            <span className=\"text-gray-400 capitalize\">{meme.region}</span>\n                            <span className=\"bg-pink-500/10 text-pink-300 px-2 py-0.5 rounded-full\">\n                              {meme.voteCount} votes\n                            </span>\n                          </div>\n                          {meme.isWinner ? <div className=\"flex items-center gap-1 text-yellow-400 text-sm font-medium bg-yellow-400/10 px-2 py-1 rounded-full w-fit\">\n                              <CheckCircle className=\"h-4 w-4\" />\n                              Winner\n                            </div> : <button onClick={() => handleDeclareWinner(meme)} disabled={isProcessing && selectedMeme?.id === meme.id} className=\"w-full py-2 bg-yellow-600 hover:bg-yellow-500 rounded-lg transition-all flex items-center justify-center gap-2\">\n                              {isProcessing && selectedMeme?.id === meme.id ? <>\n                                  <div className=\"h-4 w-4 border-2 border-white border-t-transparent rounded-full animate-spin\"></div>\n                                  Processing...\n                                </> : <>\n                                  <Star className=\"h-4 w-4\" />\n                                  Declare Winner\n                                </>}\n                            </button>}\n                        </div>\n                      </div>)}\n                  </div>\n                </div>;\n        }) : <div className=\"text-center py-12\">\n              <p className=\"text-xl text-gray-400\">No memes match your filter criteria</p>\n              <button onClick={() => {\n            setSelectedTournament('');\n            setSelectedRegion('all');\n          }} className=\"mt-4 px-6 py-2 bg-yellow-600 hover:bg-yellow-500 rounded-full transition-all\">\n                Reset Filters\n              </button>\n            </div>}\n        </div>\n      </div>\n    </motion.div>;\n}","packageJson","{\"dependencies\":{\"react\":\"18.2.0\",\"framer-motion\":\"10.16.4\",\"lucide-react\":\"0.441.0\",\"@devfunlabs/web-sdk\":\"0.5.5\",\"socket.io-client\":\"4.7.2\"}}","appFunctions",[],"token","upstreamApp","isLordOfDev","analytics",[83,87,89,91,93,95,97,99,101,103,105,107,109,111,113],{"_84":85,"_86":59},"day","2025-09-24","runCount",{"_84":88,"_86":59},"2025-09-25",{"_84":90,"_86":59},"2025-09-26",{"_84":92,"_86":59},"2025-09-27",{"_84":94,"_86":59},"2025-09-28",{"_84":96,"_86":59},"2025-09-29",{"_84":98,"_86":59},"2025-09-30",{"_84":100,"_86":59},"2025-10-01",{"_84":102,"_86":59},"2025-10-02",{"_84":104,"_86":59},"2025-10-03",{"_84":106,"_86":59},"2025-10-04",{"_84":108,"_86":59},"2025-10-05",{"_84":110,"_86":59},"2025-10-06",{"_84":112,"_86":59},"2025-10-07",{"_84":104,"_86":42},"snapshot","ogImage","https://cdn.dev.fun/og/image/2d0f93112a077ba49dc1/f1ba034a.webp","isDevbase","project",{"_14":19,"_120":-5,"_20":21,"_121":122,"_22":23},"image","oneliner","Meme NFT battle royale","commitDetail","livestream","actionData","errors"]
</article></body></html>

\n WELCOME TO THEMEME COLOSSEUM\n

\n \n Current Tournament: {activeTournament.name}\n

\n \n Matchup #{index + 1}\n

{meme.title}

Stake & Vote

{selectedMeme.title}

Connect Wallet to Mint

\n \n Mint Your Meme Fighter\n

\n WELCOME TO THE
MEME COLOSSEUM\n