[{"_1":2,"_164":-5,"_165":-5},"loaderData",{"_3":4,"_10":11},"root",{"_5":-5,"_6":7,"_8":9},"user","appId","cm7twdhs6009l11ml868xhxld","wsEndpoint","https://dev.fun","routes/app.$appId",{"_12":13},"appDetail",{"_14":15,"_16":17,"_18":19,"_20":21,"_22":23,"_24":25,"_26":25,"_27":28,"_31":32,"_33":34,"_35":36,"_37":38,"_39":40,"_41":42,"_43":44,"_5":45,"_57":58,"_59":60,"_61":60,"_62":63,"_64":60,"_65":42,"_66":42,"_67":60,"_68":60,"_69":60,"_70":17,"_71":17,"_72":73,"_74":75,"_76":77,"_78":79,"_100":101,"_116":-5,"_117":17,"_118":119,"_160":32,"_161":162,"_163":25},"id","2ba6787decdcd65d14b5","isMyApp",false,"name","predictpulse","description","Step into the future with the ultimate crystal ball for degens! PredictPulse transforms your hunches into pump.fun coin profits by letting you bet on everything from \"Will Elon tweet about aliens today?\" to \"Bitcoin $100K by midnight?\". Watch your predictions come alive with real-time AMM pricing, oracle-powered resolutions, and a leaderboard that crowns the true fortune tellers of Web3.","brief","Turn your predictions into pump.fun profits - the ultimate Web3 crystal ball for degens!","isLive",true,"isPublic","tags",[29,30],"🔥","👑","cover","https://cdn.dev.fun/snapshot/2ba6787decdcd65d14b5/96594_e588d61d.webp","cdnUrl","https://cdn.dev.fun/app/2ba6787decdcd65d14b5/96594","createdAt",["D",1756513320917],"updatedAt",["D",1756814980777],"lastCommitId",["B","96594"],"tier",1,"credits",123,{"_14":46,"_47":48,"_49":48,"_50":51,"_52":48,"_53":54,"_55":56},"d06e40fa-bf75-4c44-9927-f472200d72a4","uniqueId","UnclePhil","username","solanaWallet","7iwCLzF1RF38Z62GFmrThAfwFpEd4znveUvHok2QbWzj","displayName","bio","BuidL cool shit","avatar","https://cdn.dev.fun/avatar/d06e40fa-bf75-4c44-9927-f472200d72a4/3792a335.webp","commitCount",59,"forkCount",0,"likeCount","runsCount",41,"downvoteCount","upvoteCount","upvoteRate","commentCount","reportCount","visitorCount","isArchived","isRenamed","contractAddress","4WSgZYpTpHvDRc3FWcoLQ4pUJ7bHFmti5sG46epopump","code","import { useState, useEffect, useMemo, useRef } from 'react';\nimport { DevappProvider, useDevapp, UserButton, fetchPumpFunTrends } from '@devfunlabs/web-sdk';\nimport { TrendingUp, Clock, Users, Trophy, Plus, Target, Zap, Crown, Star, X, CheckCircle, AlertCircle, Brain, Tag, Image as ImageIcon, MessageCircle, Send, Smile, Reply, Camera, ExternalLink, LinkIcon } from 'lucide-react';\nfunction AppWithProvider() {\n const rpcEndpoint = 'https://rpc.dev.fun/2ba6787decdcd65d14b5';\n const appId = '2ba6787decdcd65d14b5';\n return \n \n ;\n}\nconst AIAnalysisModal = ({\n market,\n isOpen,\n onClose\n}) => {\n const [messages, setMessages] = useState([]);\n const [input, setInput] = useState('');\n const [isLoading, setIsLoading] = useState(false);\n useEffect(() => {\n if (isOpen && market && messages.length === 0) {\n setMessages([{\n id: 'system',\n role: 'assistant',\n content: `I'll help you analyze this prediction market: \"${market.question}\"\nKey factors to consider:\n• Market description: ${market.description}\n• Current voting pattern: ${market.totalBets || 0} total votes\n• Time remaining: Check the deadline carefully\n• Category: ${market.label}\nWhat specific aspect would you like me to analyze? I can help with:\n- Research relevant data and trends\n- Evaluate probability factors\n- Risk assessment\n- Historical context\n- Alternative perspectives\nAsk me anything about this prediction!`\n }]);\n }\n }, [isOpen, market]);\n const sendMessage = async () => {\n if (!input.trim() || isLoading) return;\n const userMessage = {\n id: Date.now(),\n role: 'user',\n content: input\n };\n setMessages(prev => [...prev, userMessage]);\n setInput('');\n setIsLoading(true);\n try {\n const systemPrompt = `You are an AI analyst helping users make informed predictions. \nCurrent market: \"${market?.question}\"\nDescription: \"${market?.description}\"\nCategory: ${market?.label}\nProvide thoughtful analysis based on:\n- Current market trends and data\n- Historical precedents \n- Risk factors and probability assessment\n- Multiple perspectives on the outcome\n- Relevant external factors\nBe objective, informative, and help the user make an educated decision. Do not give direct betting advice, but provide analysis to help them decide.`;\n const response = await fetch('https://chat.dev.fun/inference/2ba6787decdcd65d14b5', {\n method: 'POST',\n headers: {\n 'Content-Type': 'application/json'\n },\n body: JSON.stringify({\n messages: [{\n role: 'system',\n content: systemPrompt\n }, {\n role: 'user',\n content: input\n }]\n })\n });\n const data = await response.json();\n const aiMessage = {\n id: Date.now() + 1,\n role: 'assistant',\n content: data.text\n };\n setMessages(prev => [...prev, aiMessage]);\n } catch (error) {\n console.error('AI analysis failed:', error);\n const errorMessage = {\n id: Date.now() + 1,\n role: 'assistant',\n content: 'Sorry, I encountered an error. Please try again.'\n };\n setMessages(prev => [...prev, errorMessage]);\n } finally {\n setIsLoading(false);\n }\n };\n if (!isOpen) return null;\n return

\n \n AI Market Analysis\n

{market?.question?.slice(0, window.innerWidth < 640 ? 30 : 60)}...

\n \n

\n {messages.map(message =>

\n {message.role === 'assistant' &&

\n \n

}\n

{message.content}

\n {message.role === 'user' &&

\n U\n

}\n

)}\n {isLoading &&

\n \n

\n Analyzing...\n

}\n

\n setInput(e.target.value)} placeholder=\"Ask about market trends...\" className=\"flex-1 bg-gray-800/50 border border-gray-600/50 rounded-lg px-3 sm:px-4 py-2 text-white placeholder-gray-400 focus:border-[#BFE787] focus:outline-none text-sm sm:text-base\" onKeyPress={e => e.key === 'Enter' && sendMessage()} disabled={isLoading} />\n \n

;\n};\nconst CreateMarketModal = ({\n showCreateMarket,\n setShowCreateMarket,\n createMarket,\n showNotification\n}) => {\n const [question, setQuestion] = useState('');\n const [description, setDescription] = useState('');\n const [endTime, setEndTime] = useState('');\n const [votingPrice, setVotingPrice] = useState('');\n const [sentimentSuggestions, setSentimentSuggestions] = useState([]);\n const [loadingSentiment, setLoadingSentiment] = useState(false);\n const [label, setLabel] = useState('');\n const [imageUrl, setImageUrl] = useState('');\n const [uploadMethod, setUploadMethod] = useState('url');\n const [useOracle, setUseOracle] = useState(false);\n const [oracleSymbol, setOracleSymbol] = useState('');\n const [targetPrice, setTargetPrice] = useState('');\n const labels = useMemo(() => ['Crypto', 'Politics', 'Economics', 'Sports', 'Health', 'ICM', 'Blockchain', 'Music', 'Entertainments'], []);\n const handleFileUpload = event => {\n const file = event.target.files[0];\n if (file) {\n if (file.size > 5 * 1024 * 1024) {\n showNotification('Image size must be less than 5MB', 'error');\n return;\n }\n const reader = new FileReader();\n reader.onload = e => {\n setImageUrl(e.target.result);\n };\n reader.readAsDataURL(file);\n }\n };\n const getSentimentSuggestions = async () => {\n if (!question.trim()) return;\n setLoadingSentiment(true);\n try {\n const prompt = `Analyze this prediction market question for social sentiment and suggest 3 trending related prediction topics: \"${question}\". Respond with only a JSON array of 3 suggestion objects with \"question\" and \"description\" fields.`;\n const response = await fetch('https://chat.dev.fun/inference/2ba6787decdcd65d14b5', {\n method: 'POST',\n headers: {\n 'Content-Type': 'application/json'\n },\n body: JSON.stringify({\n messages: [{\n role: 'system',\n content: 'You are a market sentiment analyst. Return only valid JSON arrays.'\n }, {\n role: 'user',\n content: prompt\n }]\n })\n });\n const data = await response.json();\n try {\n const suggestions = JSON.parse(data.text);\n setSentimentSuggestions(suggestions.slice(0, 3));\n } catch {\n setSentimentSuggestions([]);\n }\n } catch (error) {\n console.error('Sentiment analysis failed:', error);\n } finally {\n setLoadingSentiment(false);\n }\n };\n const handleSubmit = e => {\n e.preventDefault();\n if (!question || !description || !endTime || !votingPrice || !label) {\n showNotification('Please fill all required fields, including a label.', 'error');\n return;\n }\n const priceValue = parseFloat(votingPrice);\n if (priceValue < 0.005) {\n showNotification('Minimum voting price is 0.005 SOL', 'error');\n return;\n }\n if (priceValue > 0.03) {\n showNotification('Maximum voting price is 0.03 SOL', 'error');\n return;\n }\n const marketData = {\n question,\n description,\n endTime: new Date(endTime).toISOString(),\n votingPrice: priceValue,\n label,\n imageUrl\n };\n if (useOracle && oracleSymbol && targetPrice) {\n marketData.oracleSymbol = oracleSymbol;\n marketData.targetPrice = parseFloat(targetPrice);\n marketData.useOracle = true;\n }\n createMarket(marketData);\n showNotification('Market created successfully!', 'success');\n setQuestion('');\n setDescription('');\n setEndTime('');\n setVotingPrice('');\n setSentimentSuggestions([]);\n setLabel('');\n setImageUrl('');\n setUploadMethod('url');\n setUseOracle(false);\n setOracleSymbol('');\n setTargetPrice('');\n };\n if (!showCreateMarket) return null;\n return

Create Prediction Market

Design your market and let others predict the future

\n Market Question\n setQuestion(e.target.value)} placeholder=\"Will SOL hit $500 before 2026?\" className=\"w-full bg-gray-800/50 backdrop-blur-sm border border-gray-600/50 rounded-2xl px-4 py-3 text-white placeholder-gray-400 focus:border-[#BFE787] focus:ring-2 focus:ring-[#BFE787]/20 focus:outline-none transition-all\" required />\n {question.trim() && }\n

\n {sentimentSuggestions.length > 0 &&

\n \n AI Sentiment Suggestions\n

\n {sentimentSuggestions.map((suggestion, index) => )}\n

}\n

\n Description & Resolution Criteria\n

setDescription(e.target.value)} placeholder=\"Provide context and clear resolution criteria for your market...\" className=\"w-full bg-gray-800/50 backdrop-blur-sm border border-gray-600/50 rounded-2xl px-4 py-3 text-white placeholder-gray-400 focus:border-[#BFE787] focus:ring-2 focus:ring-[#BFE787]/20 focus:outline-none h-24 resize-none transition-all\" required />\n          </div>\n          <div className=\"grid grid-cols-1 sm:grid-cols-2 gap-4 sm:gap-6\">\n            <div className=\"space-y-2\">\n              <label className=\"block text-gray-300 font-medium\">Category</label>\n              <select value={label} onChange={e => setLabel(e.target.value)} className=\"w-full bg-gray-800/50 backdrop-blur-sm border border-gray-600/50 rounded-2xl px-4 py-3 text-white focus:border-[#BFE787] focus:ring-2 focus:ring-[#BFE787]/20 focus:outline-none transition-all\" required>\n                <option value=\"\">Choose a category...</option>\n                {labels.map(l => <option key={l}>{l}</option>)}\n              </select>\n            </div>\n            <div className=\"space-y-2\">\n              <label className=\"block text-gray-300 font-medium\">Voting Price (SOL)</label>\n              <input type=\"number\" value={votingPrice} onChange={e => setVotingPrice(e.target.value)} placeholder=\"0.005\" step=\"0.001\" min=\"0.005\" max=\"0.03\" className=\"w-full bg-gray-800/50 backdrop-blur-sm border border-gray-600/50 rounded-2xl px-4 py-3 text-white placeholder-gray-400 focus:border-[#BFE787] focus:ring-2 focus:ring-[#BFE787]/20 focus:outline-none transition-all\" required />\n              <p className=\"text-gray-500 text-xs\">Range: 0.005 SOL - 0.03 SOL</p>\n            </div>\n          </div>\n          <div className=\"space-y-2\">\n            <label className=\"block text-gray-300 font-medium\">Market End Time</label>\n            <input type=\"datetime-local\" value={endTime} onChange={e => setEndTime(e.target.value)} className=\"w-full bg-gray-800/50 backdrop-blur-sm border border-gray-600/50 rounded-2xl px-4 py-3 text-white focus:border-[#BFE787] focus:ring-2 focus:ring-[#BFE787]/20 focus:outline-none transition-all\" required />\n          </div>\n          <div className=\"space-y-2\">\n            <label className=\"block text-gray-300 font-medium\">Market Image (Optional)</label>\n            <div className=\"space-y-3\">\n              <div className=\"flex gap-2\">\n                <button type=\"button\" onClick={() => setUploadMethod('url')} className={`px-4 py-2 text-sm rounded-lg font-medium transition-all ${uploadMethod === 'url' ? 'bg-[#BFE787] text-black shadow-lg' : 'bg-gray-700 text-gray-300 hover:bg-gray-600'}`}>\n                  Image URL\n                </button>\n                <button type=\"button\" onClick={() => setUploadMethod('upload')} className={`px-4 py-2 text-sm rounded-lg font-medium transition-all ${uploadMethod === 'upload' ? 'bg-[#BFE787] text-black shadow-lg' : 'bg-gray-700 text-gray-300 hover:bg-gray-600'}`}>\n                  Upload File\n                </button>\n              </div>\n              {uploadMethod === 'url' ? <input type=\"text\" value={imageUrl} onChange={e => setImageUrl(e.target.value)} placeholder=\"https://example.com/image.png\" className=\"w-full bg-gray-800/50 backdrop-blur-sm border border-gray-600/50 rounded-2xl px-4 py-3 text-white placeholder-gray-400 focus:border-[#BFE787] focus:ring-2 focus:ring-[#BFE787]/20 focus:outline-none transition-all\" /> : <input type=\"file\" accept=\"image/*\" onChange={handleFileUpload} className=\"w-full bg-gray-800/50 backdrop-blur-sm border border-gray-600/50 rounded-2xl px-4 py-3 text-white file:bg-[#BFE787] file:text-black file:border-none file:rounded-lg file:px-4 file:py-2 file:mr-4 file:cursor-pointer transition-all\" />}\n              {imageUrl && <div className=\"mt-3\">\n                  <img src={imageUrl} alt=\"Preview\" className=\"w-24 h-24 object-cover rounded-xl border-2 border-gray-600 shadow-lg\" />\n                </div>}\n            </div>\n          </div>\n          <div className=\"border border-gray-700 rounded-xl p-4 space-y-3\">\n            <div className=\"flex items-center gap-3\">\n              <input type=\"checkbox\" id=\"useOracle\" checked={useOracle} onChange={e => setUseOracle(e.target.checked)} className=\"w-4 h-4 text-[#BFE787] bg-gray-800 border-gray-600 rounded focus:ring-[#BFE787]\" />\n              <label htmlFor=\"useOracle\" className=\"text-gray-300 flex items-center gap-2\">\n                <LinkIcon className=\"w-4 h-4\" />\n                Use Price Oracle for Auto-Resolution\n              </label>\n            </div>\n            {useOracle && <div className=\"space-y-3\">\n                <div>\n                  <label className=\"block text-gray-400 mb-1 text-sm\">Crypto Symbol</label>\n                  <select value={oracleSymbol} onChange={e => setOracleSymbol(e.target.value)} className=\"w-full bg-gray-800/50 border border-gray-600/50 rounded-lg px-3 py-2 text-white focus:border-[#BFE787] focus:outline-none\">\n                    <option value=\"\">Select crypto...</option>\n                    <option value=\"BTC/USD\">Bitcoin (BTC/USD)</option>\n                    <option value=\"ETH/USD\">Ethereum (ETH/USD)</option>\n                    <option value=\"SOL/USD\">Solana (SOL/USD)</option>\n                    <option value=\"ADA/USD\">Cardano (ADA/USD)</option>\n                    <option value=\"MATIC/USD\">Polygon (MATIC/USD)</option>\n                  </select>\n                </div>\n                <div>\n                  <label className=\"block text-gray-400 mb-1 text-sm\">Target Price (USD)</label>\n                  <input type=\"number\" value={targetPrice} onChange={e => setTargetPrice(e.target.value)} placeholder=\"100000\" step=\"0.01\" className=\"w-full bg-gray-800/50 border border-gray-600/50 rounded-lg px-3 py-2 text-white placeholder-gray-400 focus:border-[#BFE787] focus:outline-none\" />\n                </div>\n                <p className=\"text-gray-500 text-xs\">\n                  Market will auto-resolve based on real-time price data at end time\n                </p>\n              </div>}\n          </div>\n          </form>\n        </div>\n        <div className=\"p-4 sm:p-8 pt-4 border-t border-gray-700/50\">\n          <div className=\"flex flex-col sm:flex-row gap-3 sm:gap-4\">\n            <button type=\"button\" onClick={() => setShowCreateMarket(false)} className=\"flex-1 bg-gray-700/50 backdrop-blur-sm hover:bg-gray-600/50 text-white py-3 rounded-xl sm:rounded-2xl font-medium transition-all order-2 sm:order-1\">\n              Cancel\n            </button>\n            <button type=\"submit\" form=\"create-market-form\" className=\"flex-1 bg-gradient-to-r from-[#BFE787] to-[#BFE787]/80 hover:from-[#BFE787]/90 hover:to-[#BFE787]/70 text-black py-3 rounded-xl sm:rounded-2xl font-medium transition-all shadow-lg order-1 sm:order-2\">\n              Create Market\n            </button>\n          </div>\n        </div>\n      </div>\n    </div>;\n};\nconst EditMarketModal = ({\n  showEditMarket,\n  setShowEditMarket,\n  markets,\n  updateMarketEndTime\n}) => {\n  const market = markets.find(m => m.id === showEditMarket);\n  const [endTime, setEndTime] = useState(market ? market.endTime.slice(0, 16) : '');\n  const handleSubmit = e => {\n    e.preventDefault();\n    if (!endTime) return;\n    updateMarketEndTime(showEditMarket, new Date(endTime).toISOString());\n  };\n  if (!showEditMarket) return null;\n  return <div className=\"fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50 p-4\">\n      <div className=\"bg-gray-900 rounded-xl p-6 w-full max-w-md border border-gray-800\">\n        <h2 className=\"text-2xl font-bold text-white mb-6\">Update Market End Date</h2>\n        <form onSubmit={handleSubmit} className=\"space-y-4\">\n          <div>\n            <label className=\"block text-gray-300 mb-2\">Question</label>\n            <div className=\"w-full bg-gray-800 border border-gray-700 rounded-lg px-3 py-2 text-white\">\n              {market?.question}\n            </div>\n          </div>\n          <div>\n            <label className=\"block text-gray-300 mb-2\">New End Time</label>\n            <input type=\"datetime-local\" value={endTime} onChange={e => setEndTime(e.target.value)} className=\"w-full bg-gray-800 border border-gray-700 rounded-lg px-3 py-2 text-white focus:border-purple-500 focus:outline-none\" required />\n          </div>\n          <div className=\"flex gap-3 pt-4\">\n            <button type=\"button\" onClick={() => setShowEditMarket(null)} className=\"flex-1 bg-gray-700 text-white py-2 rounded-lg font-medium hover:bg-gray-600 transition-colors\">\n              Cancel\n            </button>\n            <button type=\"submit\" className=\"flex-1 bg-gradient-to-r from-purple-600 to-pink-600 text-white py-2 rounded-lg font-medium hover:from-purple-700 hover:to-pink-700 transition-all\">\n              Update Date\n            </button>\n          </div>\n        </form>\n      </div>\n    </div>;\n};\nconst ChatPanel = ({\n  market,\n  isOpen,\n  onClose,\n  userWallet,\n  devbaseClient,\n  showNotification,\n  scrollToMessageId\n}) => {\n  const [messages, setMessages] = useState([]);\n  const [newMessage, setNewMessage] = useState('');\n  const [loading, setLoading] = useState(false);\n  const [showEmojiPicker, setShowEmojiPicker] = useState(false);\n  const [replyingTo, setReplyingTo] = useState(null);\n  const [imageUrl, setImageUrl] = useState('');\n  const emojis = ['😀', '😂', '😍', '🤔', '👍', '👎', '❤️', '🚀', '💎', '🔥', '💯', '🎯'];\n  useEffect(() => {\n    if (isOpen && market) {\n      loadMessages();\n    }\n  }, [isOpen, market, devbaseClient]);\n  useEffect(() => {\n    if (scrollToMessageId && messages.length > 0) {\n      const messageElement = document.getElementById(`message-${scrollToMessageId}`);\n      if (messageElement) {\n        messageElement.scrollIntoView({\n          behavior: 'smooth',\n          block: 'center'\n        });\n        messageElement.classList.add('bg-[#BFE787]/20', 'border', 'border-[#BFE787]/50', 'rounded-lg');\n        setTimeout(() => {\n          messageElement.classList.remove('bg-[#BFE787]/20', 'border', 'border-[#BFE787]/50', 'rounded-lg');\n        }, 3000);\n      }\n    }\n  }, [scrollToMessageId, messages]);\n  const loadMessages = async () => {\n    if (!devbaseClient || !market) return;\n    try {\n      const messagesData = await devbaseClient.listEntities('messages', {\n        marketId: market.id\n      });\n      setMessages(messagesData.sort((a, b) => new Date(a.createdAt) - new Date(b.createdAt)));\n    } catch (error) {\n      console.error('Failed to load messages:', error);\n    }\n  };\n  const sendMessage = async () => {\n    if (!devbaseClient || !userWallet || !newMessage.trim() && !imageUrl) return;\n    try {\n      setLoading(true);\n      const messageData = {\n        marketId: market.id,\n        userId: userWallet,\n        message: newMessage.trim(),\n        imageUrl: imageUrl,\n        replyToId: replyingTo?.id || null\n      };\n      await devbaseClient.createEntity('messages', messageData);\n      setNewMessage('');\n      setImageUrl('');\n      setReplyingTo(null);\n      showNotification('Message sent!', 'success');\n      await loadMessages();\n    } catch (error) {\n      console.error('Failed to send message:', error);\n      showNotification('Failed to send message', 'error');\n    } finally {\n      setLoading(false);\n    }\n  };\n  const addEmoji = emoji => {\n    setNewMessage(prev => prev + emoji);\n    setShowEmojiPicker(false);\n  };\n  const handleReply = message => {\n    setReplyingTo(message);\n  };\n  const formatMessageTime = timestamp => {\n    return new Date(timestamp).toLocaleTimeString([], {\n      hour: '2-digit',\n      minute: '2-digit'\n    });\n  };\n  const handleImageUpload = event => {\n    const file = event.target.files[0];\n    if (file) {\n      if (file.size > 5 * 1024 * 1024) {\n        showNotification('Image size must be less than 5MB', 'error');\n        return;\n      }\n      const reader = new FileReader();\n      reader.onload = e => {\n        setImageUrl(e.target.result);\n      };\n      reader.readAsDataURL(file);\n    }\n  };\n  if (!isOpen) return null;\n  return <div className={`fixed right-0 top-0 h-full ${isOpen ? 'w-full sm:w-80 lg:w-96' : 'w-0'} bg-gray-900/95 backdrop-blur-xl border-l border-gray-700/50 z-50 flex flex-col transition-all duration-300 ${isOpen ? 'animate-slide-in-right' : ''}`}>\n      {}\n      <div className=\"p-4 border-b border-gray-700/50 flex items-center justify-between\">\n        <div>\n          <h3 className=\"text-white font-medium text-sm\">{market?.question?.slice(0, 50)}...</h3>\n          <p className=\"text-gray-400 text-xs\">Market Chat</p>\n        </div>\n        <button onClick={onClose} className=\"text-gray-400 hover:text-white transition-colors p-1\">\n          <X className=\"w-5 h-5\" />\n        </button>\n      </div>\n      {}\n      <div className=\"flex-1 overflow-y-auto p-4 space-y-3\">\n        {messages.map(message => <div key={message.id} id={`message-${message.id}`} className=\"group transition-all duration-300\">\n            {message.replyToId && <div className=\"text-xs text-gray-500 mb-1 ml-8 border-l-2 border-gray-700 pl-2\">\n                Replying to: {messages.find(m => m.id === message.replyToId)?.message?.slice(0, 30)}...\n              </div>}\n            <div className=\"flex gap-2\">\n              <div className=\"w-8 h-8 bg-[#BFE787]/20 rounded-full flex items-center justify-center text-[#BFE787] text-xs font-bold\">\n                {message.userId.slice(0, 2).toUpperCase()}\n              </div>\n              <div className=\"flex-1\">\n                <div className=\"flex items-center gap-2 mb-1\">\n                  <span className=\"text-white text-sm font-medium\">\n                    {message.userId.slice(0, 6)}...{message.userId.slice(-4)}\n                  </span>\n                  <span className=\"text-gray-500 text-xs\">\n                    {formatMessageTime(message.createdAt)}\n                  </span>\n                </div>\n                <div className=\"bg-gray-800/50 rounded-lg p-3\">\n                  {message.imageUrl && <img src={message.imageUrl} alt=\"Shared image\" className=\"w-full max-w-48 rounded-lg mb-2\" />}\n                  {message.message && <p className=\"text-gray-300 text-sm\">{message.message}</p>}\n                </div>\n                <button onClick={() => handleReply(message)} className=\"text-gray-500 hover:text-[#BFE787] text-xs flex items-center gap-1 mt-1 opacity-0 group-hover:opacity-100 transition-opacity\">\n                  <Reply className=\"w-3 h-3\" />\n                  Reply\n                </button>\n              </div>\n            </div>\n          </div>)}\n      </div>\n      {}\n      {replyingTo && <div className=\"px-4 py-2 bg-gray-800/50 border-t border-gray-700/50 flex items-center gap-2\">\n          <Reply className=\"w-4 h-4 text-[#BFE787]\" />\n          <span className=\"text-xs text-gray-400\">\n            Replying to: {replyingTo.message?.slice(0, 30)}...\n          </span>\n          <button onClick={() => setReplyingTo(null)} className=\"text-gray-500 hover:text-white ml-auto\">\n            <X className=\"w-4 h-4\" />\n          </button>\n        </div>}\n      {}\n      {imageUrl && <div className=\"px-4 py-2 bg-gray-800/50 border-t border-gray-700/50\">\n          <div className=\"relative inline-block\">\n            <img src={imageUrl} alt=\"Preview\" className=\"w-16 h-16 object-cover rounded\" />\n            <button onClick={() => setImageUrl('')} className=\"absolute -top-1 -right-1 bg-red-500 text-white rounded-full w-4 h-4 flex items-center justify-center text-xs\">\n              ×\n            </button>\n          </div>\n        </div>}\n      {}\n      {showEmojiPicker && <div className=\"px-4 py-2 bg-gray-800/50 border-t border-gray-700/50\">\n          <div className=\"grid grid-cols-6 gap-2\">\n            {emojis.map(emoji => <button key={emoji} onClick={() => addEmoji(emoji)} className=\"text-lg hover:bg-gray-700 rounded p-1 transition-colors\">\n                {emoji}\n              </button>)}\n          </div>\n        </div>}\n      {}\n      <div className=\"p-4 border-t border-gray-700/50\">\n        <div className=\"flex items-center gap-2\">\n          <input type=\"text\" value={newMessage} onChange={e => setNewMessage(e.target.value)} placeholder=\"Type a message...\" className=\"flex-1 bg-gray-800/50 border border-gray-600/50 rounded-lg px-3 py-2 text-white placeholder-gray-400 focus:border-[#BFE787] focus:outline-none text-sm\" onKeyPress={e => e.key === 'Enter' && sendMessage()} disabled={loading} />\n          <button onClick={() => setShowEmojiPicker(!showEmojiPicker)} className=\"text-gray-400 hover:text-[#BFE787] transition-colors p-2\">\n            <Smile className=\"w-4 h-4\" />\n          </button>\n          <input type=\"file\" accept=\"image/*\" onChange={handleImageUpload} className=\"hidden\" id=\"chat-image-upload\" />\n          <label htmlFor=\"chat-image-upload\" className=\"text-gray-400 hover:text-[#BFE787] transition-colors p-2 cursor-pointer\">\n            <Camera className=\"w-4 h-4\" />\n          </label>\n          <button onClick={sendMessage} disabled={loading || !newMessage.trim() && !imageUrl} className=\"bg-[#BFE787] text-black p-2 rounded-lg hover:bg-[#BFE787]/80 transition-colors disabled:opacity-50 disabled:cursor-not-allowed\">\n            <Send className=\"w-4 h-4\" />\n          </button>\n        </div>\n      </div>\n    </div>;\n};\nconst TokenListingsPage = () => {\n  const [tokens, setTokens] = useState([]);\n  const [loading, setLoading] = useState(false);\n  const [error, setError] = useState(null);\n  useEffect(() => {\n    loadTokens();\n  }, []);\n  const loadTokens = async () => {\n    try {\n      setLoading(true);\n      setError(null);\n      const trendingTokens = await fetchPumpFunTrends();\n      setTokens(trendingTokens);\n    } catch (error) {\n      console.error('Failed to load tokens:', error);\n      setError('Failed to load token data');\n    } finally {\n      setLoading(false);\n    }\n  };\n  const formatNumber = num => {\n    if (num >= 1e9) return `${(num / 1e9).toFixed(2)}B`;\n    if (num >= 1e6) return `${(num / 1e6).toFixed(2)}M`;\n    if (num >= 1e3) return `${(num / 1e3).toFixed(2)}K`;\n    return `${num?.toFixed(2) || '0'}`;\n  };\n  const formatDate = timestamp => {\n    return new Date(timestamp * 1000).toLocaleDateString();\n  };\n  if (loading) {\n    return <div className=\"text-center py-12\">\n        <div className=\"animate-spin w-8 h-8 border-2 border-[#BFE787] border-t-transparent rounded-full mx-auto\"></div>\n        <p className=\"text-gray-400 mt-4\">Loading trending tokens...</p>\n      </div>;\n  }\n  if (error) {\n    return <div className=\"text-center py-12\">\n        <AlertCircle className=\"w-16 h-16 mx-auto mb-4 opacity-50 text-red-400\" />\n        <h3 className=\"text-xl font-bold text-white mb-2\">Failed to Load Tokens</h3>\n        <p className=\"text-gray-400 mb-6\">{error}</p>\n        <button onClick={loadTokens} className=\"bg-[#BFE787] text-black px-6 py-2 rounded-lg font-medium hover:bg-[#BFE787]/80 transition-all\">\n          Try Again\n        </button>\n      </div>;\n  }\n  return <div>\n      <div className=\"mb-8\">\n        <h2 className=\"text-3xl font-bold text-white mb-2 flex items-center gap-3\">\n          <TrendingUp className=\"w-8 h-8 text-[#BFE787]\" />\n          Trending Tokens\n        </h2>\n        <p className=\"text-gray-400\">Latest trending tokens from PumpFun on Solana</p>\n        <button onClick={loadTokens} className=\"mt-4 bg-gray-800 hover:bg-gray-700 text-white px-4 py-2 rounded-lg text-sm transition-colors\">\n          Refresh Data\n        </button>\n      </div>\n      <div className=\"bg-gray-800/50 backdrop-blur-sm rounded-2xl border border-gray-700/50 overflow-hidden\">\n        <div className=\"overflow-x-auto\">\n          <table className=\"w-full min-w-[800px]\">\n            <thead className=\"bg-gray-700/50\">\n              <tr>\n                <th className=\"px-3 sm:px-6 py-3 sm:py-4 text-left text-xs font-medium text-gray-300 uppercase tracking-wider\">Token</th>\n                <th className=\"px-3 sm:px-6 py-3 sm:py-4 text-left text-xs font-medium text-gray-300 uppercase tracking-wider\">Symbol</th>\n                <th className=\"px-3 sm:px-6 py-3 sm:py-4 text-left text-xs font-medium text-gray-300 uppercase tracking-wider\">Market Cap</th>\n                <th className=\"px-3 sm:px-6 py-3 sm:py-4 text-left text-xs font-medium text-gray-300 uppercase tracking-wider\">Creator</th>\n                <th className=\"px-3 sm:px-6 py-3 sm:py-4 text-left text-xs font-medium text-gray-300 uppercase tracking-wider\">Created</th>\n                <th className=\"px-3 sm:px-6 py-3 sm:py-4 text-left text-xs font-medium text-gray-300 uppercase tracking-wider\">Status</th>\n                <th className=\"px-3 sm:px-6 py-3 sm:py-4 text-left text-xs font-medium text-gray-300 uppercase tracking-wider\">Links</th>\n              </tr>\n            </thead>\n            <tbody className=\"divide-y divide-gray-700/50\">\n              {tokens.map((token, index) => <tr key={token.mint} className=\"hover:bg-gray-700/30 transition-colors\">\n                  <td className=\"px-3 sm:px-6 py-3 sm:py-4 whitespace-nowrap\">\n                    <div className=\"flex items-center gap-2 sm:gap-3\">\n                      <img src={token.image_uri} alt={token.name} className=\"w-8 h-8 sm:w-10 sm:h-10 rounded-full object-cover flex-shrink-0\" onError={e => {\n                    e.target.src = `data:image/svg+xml,<svg xmlns=\"http://www.w3.org/2000/svg\" width=\"40\" height=\"40\" viewBox=\"0 0 40 40\"><rect width=\"40\" height=\"40\" fill=\"%23BFE787\"/><text x=\"20\" y=\"25\" text-anchor=\"middle\" font-size=\"16\" fill=\"black\">${token.symbol?.charAt(0) || '?'}</text></svg>`;\n                  }} />\n                      <div className=\"min-w-0\">\n                        <div className=\"text-white font-medium text-sm sm:text-base truncate\">{token.name}</div>\n                        <div className=\"text-gray-400 text-xs sm:text-sm truncate hidden sm:block\">{token.description?.slice(0, 30)}...</div>\n                      </div>\n                    </div>\n                  </td>\n                  <td className=\"px-3 sm:px-6 py-3 sm:py-4 whitespace-nowrap\">\n                    <span className=\"text-[#BFE787] font-bold text-sm sm:text-base\">{token.symbol}</span>\n                  </td>\n                  <td className=\"px-3 sm:px-6 py-3 sm:py-4 whitespace-nowrap\">\n                    <span className=\"text-white font-medium text-sm sm:text-base\">{formatNumber(token.market_cap)}</span>\n                  </td>\n                  <td className=\"px-3 sm:px-6 py-3 sm:py-4 whitespace-nowrap\">\n                    <span className=\"text-gray-400 font-mono text-xs sm:text-sm\">\n                      {token.creator.slice(0, 4)}...{token.creator.slice(-4)}\n                    </span>\n                  </td>\n                  <td className=\"px-3 sm:px-6 py-3 sm:py-4 whitespace-nowrap\">\n                    <span className=\"text-gray-400 text-xs sm:text-sm\">{formatDate(token.created_timestamp)}</span>\n                  </td>\n                  <td className=\"px-3 sm:px-6 py-3 sm:py-4 whitespace-nowrap\">\n                    <span className={`inline-flex items-center px-2 py-0.5 rounded-full text-xs font-medium ${token.complete ? 'bg-green-100 text-green-800' : 'bg-yellow-100 text-yellow-800'}`}>\n                      {token.complete ? 'Complete' : 'Active'}\n                    </span>\n                  </td>\n                  <td className=\"px-3 sm:px-6 py-3 sm:py-4 whitespace-nowrap\">\n                    <div className=\"flex items-center gap-1 sm:gap-2\">\n                      {token.website && <a href={token.website} target=\"_blank\" rel=\"noopener noreferrer\" className=\"text-gray-400 hover:text-[#BFE787] transition-colors\">\n                          <ExternalLink className=\"w-3 h-3 sm:w-4 sm:h-4\" />\n                        </a>}\n                      {token.twitter && <a href={`https://twitter.com/${token.twitter}`} target=\"_blank\" rel=\"noopener noreferrer\" className=\"text-gray-400 hover:text-blue-400 transition-colors\">\n                          <svg className=\"w-3 h-3 sm:w-4 sm:h-4\" 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\" />\n                          </svg>\n                        </a>}\n                      {token.telegram && <a href={`https://t.me/${token.telegram}`} target=\"_blank\" rel=\"noopener noreferrer\" className=\"text-gray-400 hover:text-blue-400 transition-colors\">\n                          <svg className=\"w-3 h-3 sm:w-4 sm:h-4\" fill=\"currentColor\" viewBox=\"0 0 24 24\">\n                            <path d=\"M11.944 0A12 12 0 0 0 0 12a12 12 0 0 0 12 12 12 12 0 0 0 12-12A12 12 0 0 0 12 0a12 12 0 0 0-.056 0zm4.962 7.224c.1-.002.321.023.465.14a.506.506 0 0 1 .171.325c.016.093.036.306.02.472-.18 1.898-.962 6.502-1.36 8.627-.168.9-.499 1.201-.82 1.23-.696.065-1.225-.46-1.9-.902-1.056-.693-1.653-1.124-2.678-1.8-1.185-.78-.417-1.21.258-1.91.177-.184 3.247-2.977 3.307-3.23.007-.032.014-.15-.056-.212s-.174-.041-.249-.024c-.106.024-1.793 1.14-5.061 3.345-.48.33-.913.49-1.302.48-.428-.008-1.252-.241-1.865-.44-.752-.245-1.349-.374-1.297-.789.027-.216.325-.437.893-.663 3.498-1.524 5.83-2.529 6.998-3.014 3.332-1.386 4.025-1.627 4.476-1.635z\" />\n                          </svg>\n                        </a>}\n                    </div>\n                  </td>\n                </tr>)}\n            </tbody>\n          </table>\n        </div>\n      </div>\n    </div>;\n};\nconst MarketCard = ({\n  market,\n  userBets,\n  allBets,\n  userPayouts,\n  userWallet,\n  placeBet,\n  resolveMarket,\n  claimPayout,\n  setShowEditMarket,\n  formatTimeLeft,\n  onOpenChat,\n  unreadCount,\n  hasReply,\n  pythPrices,\n  onOpenAIAnalysis\n}) => {\n  const userBetsOnMarket = userBets.filter(bet => bet.marketId === market.id);\n  const hasUserVoted = userBetsOnMarket.length > 0;\n  const isMarketEnded = new Date(market.endTime) <= new Date();\n  const userCanClaim = market.resolved && market.winningOutcome && userBetsOnMarket.some(bet => bet.outcome === market.winningOutcome) && !userPayouts.some(payout => payout.marketId === market.id);\n  const allMarketBets = allBets.filter(bet => bet.marketId === market.id);\n  const totalBets = allMarketBets.length;\n  const yesBets = allMarketBets.filter(bet => bet.outcome === 'yes').length;\n  const noBets = allMarketBets.filter(bet => bet.outcome === 'no').length;\n  const shareOnTwitter = () => {\n    const marketUrl = 'dev.fun/app/2ba6787decdcd65d14b5';\n    const betAmount = market.votingPrice || 0;\n    const tweetText = `🔮 Check out this prediction market on PredictPulse!\\n\\n${market.question}\\n\\n💰 Bet Amount: ${betAmount} SOL\\n📊 Current Votes: ${totalBets}\\n\\nJoin the prediction and earn rewards! 🚀\\n\\n${marketUrl}`;\n    const twitterUrl = `https://twitter.com/intent/tweet?text=${encodeURIComponent(tweetText)}`;\n    window.open(twitterUrl, '_blank');\n  };\n  return <div className=\"bg-gray-800/50 backdrop-blur-sm rounded-2xl border border-gray-700/50 hover:border-[#BFE787]/30 transition-all duration-300 flex flex-col overflow-hidden group\">\n      <div className=\"relative\">\n        {market.imageUrl ? <img src={market.imageUrl} alt={market.question} className=\"w-full h-32 object-cover group-hover:scale-105 transition-transform duration-300\" /> : <div className=\"w-full h-32 bg-gradient-to-tr from-[#BFE787]/20 to-[#BFE787]/10 flex items-center justify-center\">\n            <ImageIcon className=\"w-10 h-10 text-[#BFE787] opacity-50\" />\n          </div>}\n        <div className=\"absolute top-2 left-2 bg-black/50 backdrop-blur-sm text-white text-xs font-bold py-1 px-2 rounded-full flex items-center gap-1\">\n          <Tag className=\"w-3 h-3\" /> {market.label}\n        </div>\n      </div>\n      <div className=\"p-4 flex flex-col flex-grow\">\n        <h3 className=\"text-md font-bold text-white mb-2 flex-grow\">{market.question}</h3>\n        <div className=\"text-xs text-gray-500 mb-2\">\n          Created by: <span className=\"font-mono\">{market.creatorId.slice(0, 4)}...{market.creatorId.slice(-4)}</span>\n        </div>\n        <div className=\"flex items-center justify-between text-sm mb-3\">\n          <div className=\"flex items-center gap-1 text-green-400\">\n            <Clock className=\"w-4 h-4\" />\n            {formatTimeLeft(market.endTime)}\n          </div>\n          <div className=\"flex items-center gap-1 text-blue-400\">\n            <Users className=\"w-4 h-4\" />\n            {totalBets}\n          </div>\n          <div className=\"text-[#BFE787] font-bold\">{market.totalVolume.toFixed(2)} SOL</div>\n        </div>\n        <div className=\"flex justify-between items-center mb-4 bg-gray-800 rounded-lg p-2\">\n          <div className=\"text-center flex-1\">\n            <div className=\"text-green-400 font-bold text-lg\">{yesBets}</div>\n            <div className=\"text-gray-400 text-xs\">YES</div>\n          </div>\n          <div className=\"w-px bg-gray-600 h-6\"></div>\n          <div className=\"text-center flex-1\">\n            <div className=\"text-red-400 font-bold text-lg\">{noBets}</div>\n            <div className=\"text-gray-400 text-xs\">NO</div>\n          </div>\n        </div>\n        {!market.resolved && new Date(market.endTime) > new Date() && userWallet && <div className=\"space-y-2\">\n            {hasUserVoted ? <div className=\"bg-gray-800 rounded-lg p-2 text-center\">\n                <div className=\"text-yellow-400 font-medium text-sm\">You have voted</div>\n              </div> : <div className=\"flex gap-2\">\n                <button onClick={() => placeBet(market.id, 'yes')} className=\"flex-1 bg-green-600 text-white py-2 rounded-lg font-medium hover:bg-green-700 transition-all text-sm\">\n                  Vote YES\n                </button>\n                <button onClick={() => placeBet(market.id, 'no')} className=\"flex-1 bg-red-600 text-white py-2 rounded-lg font-medium hover:bg-red-700 transition-all text-sm\">\n                  Vote NO\n                </button>\n              </div>}\n          </div>}\n        {market.resolved && <div className=\"bg-gray-800 rounded-lg p-2\">\n            <div className=\"text-center\">\n              <div className=\"text-green-400 font-medium text-sm mb-1\">Winner: {market.winningOutcome.toUpperCase()}</div>\n              {userCanClaim && <button onClick={() => claimPayout(market.id)} className=\"w-full bg-gradient-to-r from-[#BFE787] to-[#BFE787]/80 text-black py-2 rounded-lg font-medium hover:from-[#BFE787]/90 hover:to-[#BFE787]/70 transition-all flex items-center justify-center gap-2 text-sm\">\n                  <Trophy className=\"w-4 h-4\" />\n                  Claim\n                </button>}\n            </div>\n          </div>}\n      {isMarketEnded && !market.resolved && market.useOracle && market.oracleSymbol && market.targetPrice && pythPrices[market.oracleSymbol] && <div className=\"bg-gray-800 rounded-lg p-2\">\n            <div className=\"text-[#BFE787] font-medium text-center text-sm mb-2\">\n              Auto-resolving with Price Oracle...\n            </div>\n            <div className=\"text-xs text-gray-400 text-center\">\n              Current {market.oracleSymbol}: ${pythPrices[market.oracleSymbol]?.toFixed(2)}\n            </div>\n          </div>}\n        {isMarketEnded && !market.resolved && market.useOracle && (!market.oracleSymbol || !market.targetPrice) && <div className=\"bg-gray-800 rounded-lg p-2\">\n            <div className=\"text-[#BFE787] font-medium text-center text-sm mb-2\">\n              Auto-resolving with AI Oracle...\n            </div>\n            <div className=\"text-xs text-gray-400 text-center\">\n              Analyzing market outcome...\n            </div>\n          </div>}\n        {isMarketEnded && !market.resolved && market.creatorId === userWallet && <div className=\"bg-gray-800 rounded-lg p-2 space-y-2\">\n            <div className=\"text-yellow-400 font-medium text-center text-sm\">\n              {market.useOracle ? 'Oracle pending - Manual resolve:' : 'Resolve outcome:'}\n            </div>\n            <div className=\"flex gap-2\">\n              <button onClick={() => resolveMarket(market.id, 'yes', false, true, false)} className=\"flex-1 bg-[#BFE787] text-black py-2 rounded-lg font-medium hover:bg-[#BFE787]/80 transition-all text-sm\">\n                YES\n              </button>\n              <button onClick={() => resolveMarket(market.id, 'no', false, true, false)} className=\"flex-1 bg-red-600 text-white py-2 rounded-lg font-medium hover:bg-red-700 transition-all text-sm\">\n                NO\n              </button>\n            </div>\n          </div>}\n        <div className=\"flex justify-between items-center mt-3 gap-2\">\n          <div className=\"flex gap-1\">\n            <button onClick={() => onOpenChat(market)} className=\"relative flex items-center gap-1 bg-gray-700 hover:bg-gray-600 text-white px-2 py-1 rounded-lg text-xs font-medium transition-colors\">\n              <MessageCircle className=\"w-3 h-3\" />\n              <span className=\"hidden sm:inline\">Chat</span>\n              {(unreadCount > 0 || hasReply) && <div className=\"absolute -top-2 -right-2 min-w-[16px] h-4 flex items-center justify-center\">\n                  {hasReply ? <div className=\"bg-[#BFE787] text-black rounded-full w-4 h-4 flex items-center justify-center text-xs font-bold\">\n                      @\n                    </div> : <div className=\"bg-red-500 text-white rounded-full min-w-[16px] h-4 flex items-center justify-center text-xs font-bold px-1\">\n                      {unreadCount > 99 ? '99+' : unreadCount}\n                    </div>}\n                </div>}\n            </button>\n            <button onClick={() => onOpenAIAnalysis(market)} className=\"flex items-center gap-1 bg-[#BFE787]/20 hover:bg-[#BFE787]/30 text-[#BFE787] px-2 py-1 rounded-lg text-xs font-medium transition-colors\">\n              <Brain className=\"w-3 h-3\" />\n              <span className=\"hidden sm:inline\">AI</span>\n            </button>\n          </div>\n          <button onClick={shareOnTwitter} className=\"flex items-center gap-1 bg-blue-500 hover:bg-blue-600 text-white px-2 py-1 rounded-lg text-xs font-medium transition-colors\">\n            <svg className=\"w-3 h-3\" 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\" />\n            </svg>\n            <span className=\"hidden sm:inline\">Share</span>\n          </button>\n        </div>\n      </div>\n    </div>;\n};\nfunction App() {\n  const {\n    devbaseClient,\n    userWallet\n  } = useDevapp();\n  const [activeTab, setActiveTab] = useState('markets');\n  const [markets, setMarkets] = useState([]);\n  const [userBets, setUserBets] = useState([]);\n  const [allBets, setAllBets] = useState([]);\n  const [leaderboard, setLeaderboard] = useState([]);\n  const [userProfile, setUserProfile] = useState(null);\n  const [showCreateMarket, setShowCreateMarket] = useState(false);\n  const [showEditMarket, setShowEditMarket] = useState(null);\n  const [loading, setLoading] = useState(false);\n  const [userPayouts, setUserPayouts] = useState([]);\n  const [marketFilter, setMarketFilter] = useState('all');\n  const [labelFilter, setLabelFilter] = useState('all');\n  const [notifications, setNotifications] = useState([]);\n  const [currentTime, setCurrentTime] = useState(new Date());\n  const [chatPanelOpen, setChatPanelOpen] = useState(false);\n  const [selectedMarket, setSelectedMarket] = useState(null);\n  const [unreadMessages, setUnreadMessages] = useState({});\n  const [lastReadMessages, setLastReadMessages] = useState({});\n  const [replyNotifications, setReplyNotifications] = useState({});\n  const [scrollToMessageId, setScrollToMessageId] = useState(null);\n  const [pythPrices, setPythPrices] = useState({});\n  const [showAIAnalysis, setShowAIAnalysis] = useState(false);\n  const [selectedMarketForAI, setSelectedMarketForAI] = useState(null);\n  const marketsRef = useRef(markets);\n  marketsRef.current = markets;\n  const pythPricesRef = useRef(pythPrices);\n  pythPricesRef.current = pythPrices;\n  const lastReadMessagesRef = useRef(lastReadMessages);\n  lastReadMessagesRef.current = lastReadMessages;\n  const labels = useMemo(() => ['All', 'Crypto', 'Politics', 'Economics', 'Sports', 'Health', 'ICM', 'Blockchain', 'Music', 'Entertainments'], []);\n  useEffect(() => {\n    loadData();\n    fetchPrices();\n  }, [devbaseClient, userWallet]);\n  useEffect(() => {\n    const interval = setInterval(() => {\n      setCurrentTime(new Date());\n    }, 5000);\n    return () => clearInterval(interval);\n  }, []);\n  useEffect(() => {\n    if (userWallet && devbaseClient) {\n      const interval = setInterval(() => {\n        try {\n          checkForNewMessages();\n          checkOracleResolutions();\n        } catch (error) {\n          console.error('Interval error:', error);\n        }\n      }, 15000);\n      return () => clearInterval(interval);\n    }\n  }, [userWallet, devbaseClient]);\n  useEffect(() => {\n    const interval = setInterval(() => {\n      try {\n        fetchPrices();\n      } catch (error) {\n        console.error('Price fetch error:', error);\n      }\n    }, 60000);\n    return () => clearInterval(interval);\n  }, []);\n  const loadData = async () => {\n    if (!devbaseClient) return;\n    try {\n      setLoading(true);\n      const marketsData = await devbaseClient.listEntities('markets');\n      setMarkets(marketsData.sort((a, b) => b.totalVolume - a.totalVolume));\n      const allBetsData = await devbaseClient.listEntities('bets');\n      setAllBets(allBetsData);\n      if (userWallet) {\n        const betsData = await devbaseClient.listEntities('bets', {\n          userId: userWallet\n        });\n        setUserBets(betsData);\n        const payoutsData = await devbaseClient.listEntities('payouts', {\n          userId: userWallet\n        });\n        setUserPayouts(payoutsData);\n        await updateUserProfile(betsData, payoutsData, marketsData);\n        const leaderboardData = await devbaseClient.listEntities('profiles');\n        const uniqueProfiles = Object.values(leaderboardData.reduce((acc, profile) => {\n          if (!acc[profile.userId] || profile.createdAt > acc[profile.userId].createdAt) {\n            acc[profile.userId] = profile;\n          }\n          return acc;\n        }, {}));\n        setLeaderboard(uniqueProfiles.sort((a, b) => b.winRate - a.winRate).slice(0, 10));\n      }\n    } catch (error) {\n      console.error('Failed to load data:', error);\n    } finally {\n      setLoading(false);\n    }\n  };\n  const fetchPrices = async () => {\n    try {\n      const controller = new AbortController();\n      const timeoutId = setTimeout(() => controller.abort(), 15000);\n      const pricePromises = [fetch('https://api.coingecko.com/api/v3/simple/price?ids=bitcoin,ethereum,solana,cardano,polygon&vs_currencies=usd', {\n        signal: controller.signal\n      }).then(res => {\n        if (!res.ok) throw new Error('Network response was not ok');\n        return res.json();\n      }).then(data => ({\n        'BTC/USD': data.bitcoin?.usd,\n        'ETH/USD': data.ethereum?.usd,\n        'SOL/USD': data.solana?.usd,\n        'ADA/USD': data.cardano?.usd,\n        'MATIC/USD': data.polygon?.usd\n      })).catch(() => null), Promise.race([fetch('https://frontend-api.pump.fun/coins/So11111111111111111111111111111111111111112', {\n        signal: controller.signal\n      }).then(res => {\n        if (!res.ok) throw new Error('Pump.fun API error');\n        return res.json();\n      }).then(data => ({\n        'SOL/USD': data.usd_market_cap / data.total_supply\n      })), new Promise((_, reject) => setTimeout(() => reject(new Error('Pump.fun timeout')), 10000))]).catch(() => null)];\n      const results = await Promise.allSettled(pricePromises);\n      clearTimeout(timeoutId);\n      const prices = {};\n      results.forEach(result => {\n        if (result.status === 'fulfilled' && result.value) {\n          Object.assign(prices, result.value);\n        }\n      });\n      if (Object.keys(prices).length === 0) {\n        prices['BTC/USD'] = 45000;\n        prices['ETH/USD'] = 2500;\n        prices['SOL/USD'] = 100;\n        prices['ADA/USD'] = 0.5;\n        prices['MATIC/USD'] = 1.0;\n      }\n      setPythPrices(prevPrices => ({\n        ...prevPrices,\n        ...prices\n      }));\n    } catch (error) {\n      console.error('Failed to fetch prices:', error);\n    }\n  };\n  const checkOracleResolutions = async () => {\n    if (!devbaseClient) return;\n    try {\n      const endedMarkets = marketsRef.current.filter(market => !market.resolved && new Date(market.endTime) <= new Date()).slice(0, 3);\n      for (const market of endedMarkets) {\n        try {\n          if (market.useOracle && market.oracleSymbol && market.targetPrice && pythPricesRef.current[market.oracleSymbol] !== undefined) {\n            const currentPrice = pythPricesRef.current[market.oracleSymbol];\n            const outcome = currentPrice >= market.targetPrice ? 'yes' : 'no';\n            await Promise.race([resolveMarket(market.id, outcome, true, false, true), new Promise((_, reject) => setTimeout(() => reject(new Error('Resolve timeout')), 5000))]);\n            continue;\n          }\n          if (market.useOracle || !market.oracleSymbol) {\n            const aiOutcome = await Promise.race([determineMarketOutcomeWithAI(market.id), new Promise((_, reject) => setTimeout(() => reject(new Error('AI timeout')), 8000))]);\n            if (aiOutcome) {\n              await resolveMarket(market.id, aiOutcome, true, false, false);\n            }\n          }\n        } catch (marketError) {\n          console.error(`Failed to resolve market ${market.id}:`, marketError);\n          continue;\n        }\n      }\n    } catch (error) {\n      console.error('Failed to check oracle resolutions:', error);\n    }\n  };\n  const updateUserProfile = async (betsData, payoutsData, marketsData) => {\n    try {\n      const totalBets = betsData.length;\n      const winningBets = betsData.filter(bet => {\n        const market = marketsData.find(m => m.id === bet.marketId);\n        return market && market.resolved && market.winningOutcome === bet.outcome;\n      });\n      const totalWins = winningBets.length;\n      const totalVolume = betsData.reduce((sum, bet) => sum + bet.amount, 0);\n      const winRate = totalBets > 0 ? totalWins / totalBets * 100 : 0;\n      let profile = await devbaseClient.listEntities('profiles', {\n        userId: userWallet\n      });\n      const profileData = {\n        userId: userWallet,\n        totalBets,\n        totalWins,\n        winRate,\n        totalVolume\n      };\n      if (profile.length === 0) {\n        profile = await devbaseClient.createEntity('profiles', profileData);\n        setUserProfile(profile);\n      } else {\n        const updatedProfile = await devbaseClient.updateEntity('profiles', profile[0].id, profileData);\n        setUserProfile(updatedProfile);\n      }\n    } catch (error) {\n      console.error('Failed to update user profile:', error);\n    }\n  };\n  const showNotification = (message, type = 'success') => {\n    const id = Date.now();\n    const notification = {\n      id,\n      message,\n      type\n    };\n    setNotifications(prev => [...prev, notification]);\n    setTimeout(() => {\n      setNotifications(prev => prev.filter(n => n.id !== id));\n    }, 4000);\n  };\n  const removeNotification = id => {\n    setNotifications(prev => prev.filter(n => n.id !== id));\n  };\n  const checkForNewMessages = async () => {\n    if (!devbaseClient || !userWallet || marketsRef.current.length === 0) return;\n    try {\n      const controller = new AbortController();\n      const timeoutId = setTimeout(() => controller.abort(), 10000);\n      const allMessages = await Promise.race([devbaseClient.listEntities('messages'), new Promise((_, reject) => setTimeout(() => reject(new Error('Timeout')), 8000))]);\n      clearTimeout(timeoutId);\n      if (!allMessages || allMessages.length === 0) return;\n      const unreadCounts = {};\n      const replyNotifs = {};\n      const messagesByMarket = {};\n      const recentMessages = allMessages.filter(msg => new Date(msg.createdAt).getTime() > Date.now() - 24 * 60 * 60 * 1000);\n      recentMessages.forEach(msg => {\n        if (!messagesByMarket[msg.marketId]) {\n          messagesByMarket[msg.marketId] = [];\n        }\n        messagesByMarket[msg.marketId].push(msg);\n      });\n      const marketsToCheck = marketsRef.current.slice(0, 10);\n      for (const market of marketsToCheck) {\n        const messages = messagesByMarket[market.id] || [];\n        const lastRead = lastReadMessagesRef.current[market.id] || 0;\n        const newMessages = messages.filter(msg => new Date(msg.createdAt).getTime() > lastRead);\n        if (newMessages.length > 0) {\n          unreadCounts[market.id] = Math.min(newMessages.length, 99);\n          const hasReplyToUser = newMessages.some(msg => msg.replyToId && messages.find(originalMsg => originalMsg.id === msg.replyToId && originalMsg.userId === userWallet));\n          if (hasReplyToUser) {\n            const replyMessage = newMessages.find(msg => msg.replyToId && messages.find(originalMsg => originalMsg.id === msg.replyToId && originalMsg.userId === userWallet));\n            replyNotifs[market.id] = replyMessage?.id;\n          }\n        }\n      }\n      setUnreadMessages(prev => ({\n        ...prev,\n        ...unreadCounts\n      }));\n      setReplyNotifications(prev => ({\n        ...prev,\n        ...replyNotifs\n      }));\n    } catch (error) {\n      console.error('Failed to check for new messages:', error);\n    }\n  };\n  const handleOpenChat = market => {\n    setSelectedMarket(market);\n    setChatPanelOpen(true);\n    if (replyNotifications[market.id]) {\n      setScrollToMessageId(replyNotifications[market.id]);\n    }\n    setUnreadMessages(prev => ({\n      ...prev,\n      [market.id]: 0\n    }));\n    setReplyNotifications(prev => ({\n      ...prev,\n      [market.id]: null\n    }));\n    setLastReadMessages(prev => ({\n      ...prev,\n      [market.id]: new Date().getTime()\n    }));\n  };\n  const handleCloseChat = () => {\n    setChatPanelOpen(false);\n    setSelectedMarket(null);\n    setScrollToMessageId(null);\n  };\n  const handleOpenAIAnalysis = market => {\n    setSelectedMarketForAI(market);\n    setShowAIAnalysis(true);\n  };\n  const handleCloseAIAnalysis = () => {\n    setShowAIAnalysis(false);\n    setSelectedMarketForAI(null);\n  };\n  const determineMarketOutcomeWithAI = async marketId => {\n    try {\n      const market = marketsRef.current.find(m => m.id === marketId);\n      if (!market) return null;\n      const controller = new AbortController();\n      const timeoutId = setTimeout(() => controller.abort(), 12000);\n      const prompt = `As an AI oracle system, analyze this prediction market and determine the correct outcome:\n      Question: \"${market.question}\"\n      Description: \"${market.description}\"\n      Market Label: \"${market.label}\"\n      End Time: \"${market.endTime}\"\n      Based on current real-world data and facts, determine if this prediction should resolve as YES or NO.\n      Respond with ONLY one of the following:\n      - \"YES\" if the prediction is true/correct\n      - \"NO\" if the prediction is false/incorrect  \n      - \"UNCERTAIN\" if you cannot determine the outcome with confidence\n      Do not include any explanation, just the single word.`;\n      const response = await Promise.race([fetch('https://chat.dev.fun/inference/2ba6787decdcd65d14b5', {\n        method: 'POST',\n        headers: {\n          'Content-Type': 'application/json'\n        },\n        body: JSON.stringify({\n          messages: [{\n            role: 'system',\n            content: 'You are an AI oracle system for prediction markets. Determine outcomes based on facts.'\n          }, {\n            role: 'user',\n            content: prompt\n          }]\n        }),\n        signal: controller.signal\n      }), new Promise((_, reject) => setTimeout(() => reject(new Error('AI API timeout')), 10000))]);\n      clearTimeout(timeoutId);\n      if (!response.ok) {\n        throw new Error(`AI API error: ${response.status}`);\n      }\n      const data = await response.json();\n      const result = data.text?.trim().toUpperCase();\n      if (result === 'YES') return 'yes';\n      if (result === 'NO') return 'no';\n      return null;\n    } catch (error) {\n      console.error('AI outcome determination failed:', error);\n      return null;\n    }\n  };\n  const createMarket = async marketData => {\n    if (!devbaseClient || !userWallet) return;\n    try {\n      const newMarket = await devbaseClient.createEntity('markets', {\n        ...marketData,\n        creatorId: userWallet,\n        totalVolume: 0,\n        resolved: false,\n        winningOutcome: null\n      });\n      setMarkets(prev => [newMarket, ...prev]);\n      setShowCreateMarket(false);\n    } catch (error) {\n      console.error('Failed to create market:', error);\n    }\n  };\n  const placeBet = async (marketId, outcome) => {\n    if (!devbaseClient || !userWallet) return;\n    try {\n      setLoading(true);\n      const market = markets.find(m => m.id === marketId);\n      if (!market) return;\n      const amount = market.votingPrice;\n      const shares = calculateShares(amount, outcome);\n      await devbaseClient.createEntity('bets', {\n        marketId,\n        userId: userWallet,\n        outcome,\n        amount: amount,\n        shares\n      });\n      await devbaseClient.updateEntity('markets', marketId, {\n        totalVolume: market.totalVolume + amount\n      });\n      showNotification(`Successfully voted ${outcome.toUpperCase()} for ${amount} SOL!`, 'success');\n      await loadData();\n    } catch (error) {\n      console.error('Failed to place bet:', error);\n      showNotification('Failed to place vote. Please try again.', 'error');\n    } finally {\n      setLoading(false);\n    }\n  };\n  const calculateShares = (amount, outcome) => {\n    const basePrice = 0.5;\n    const shares = parseFloat(amount) / basePrice;\n    return shares;\n  };\n  const updateMarketEndTime = async (marketId, newEndTime) => {\n    if (!devbaseClient || !userWallet) return;\n    try {\n      await devbaseClient.updateEntity('markets', marketId, {\n        endTime: newEndTime\n      });\n      await loadData();\n      setShowEditMarket(null);\n    } catch (error) {\n      console.error('Failed to update market:', error);\n    }\n  };\n  const resolveMarket = async (marketId, winningOutcome, isOracleResolution = false, isManualResolution = false, isPriceOracle = false) => {\n    if (!devbaseClient || !userWallet) return;\n    try {\n      await devbaseClient.updateEntity('markets', marketId, {\n        resolved: true,\n        winningOutcome: winningOutcome,\n        resolvedByOracle: isOracleResolution\n      });\n      if (isOracleResolution) {\n        if (isPriceOracle) {\n          showNotification(`Market auto-resolved by Price Oracle: ${winningOutcome.toUpperCase()}`, 'success');\n        } else {\n          showNotification(`Market auto-resolved by AI Oracle: ${winningOutcome.toUpperCase()}`, 'success');\n        }\n      } else {\n        showNotification(`Market manually resolved: ${winningOutcome.toUpperCase()}`, 'success');\n      }\n      await loadData();\n    } catch (error) {\n      console.error('Failed to resolve market:', error);\n      showNotification('Failed to resolve market. Please try again.', 'error');\n    }\n  };\n  const claimPayout = async marketId => {\n    if (!devbaseClient || !userWallet) return;\n    try {\n      await devbaseClient.createEntity('payouts', {\n        marketId,\n        userId: userWallet\n      });\n      showNotification('Successfully claimed your winnings!', 'success');\n      await loadData();\n    } catch (error) {\n      console.error('Failed to claim payout:', error);\n      showNotification('Failed to claim payout. Please try again.', 'error');\n    }\n  };\n  const formatTimeLeft = endTime => {\n    const end = new Date(endTime);\n    const diff = end - currentTime;\n    if (diff <= 0) return 'Ended';\n    const days = Math.floor(diff / (1000 * 60 * 60 * 24));\n    const hours = Math.floor(diff % (1000 * 60 * 60 * 24) / (1000 * 60 * 60));\n    const minutes = Math.floor(diff % (1000 * 60 * 60) / (1000 * 60));\n    const seconds = Math.floor(diff % (1000 * 60) / 1000);\n    const addSuffix = num => {\n      if (num === 1) return `${num}st`;\n      if (num === 2) return `${num}nd`;\n      if (num === 3) return `${num}rd`;\n      return `${num}th`;\n    };\n    return `${addSuffix(days)}|${hours.toString().padStart(2, '0')}h|${minutes.toString().padStart(2, '0')}m|${seconds.toString().padStart(2, '0')}s`;\n  };\n  const getFilteredMarkets = () => {\n    let filtered = markets;\n    if (marketFilter === 'ongoing') {\n      filtered = filtered.filter(market => new Date(market.endTime) > new Date() && !market.resolved);\n    } else if (marketFilter === 'ended') {\n      filtered = filtered.filter(market => new Date(market.endTime) <= new Date() || market.resolved);\n    }\n    if (labelFilter !== 'all' && labelFilter !== 'All') {\n      filtered = filtered.filter(market => market.label === labelFilter);\n    }\n    return filtered;\n  };\n  const NotificationContainer = () => {\n    if (notifications.length === 0) return null;\n    return <div className=\"fixed top-4 right-4 z-50 space-y-2\">\n        {notifications.map(notification => <div key={notification.id} className={`flex items-center gap-3 px-4 py-3 rounded-lg shadow-lg border backdrop-blur-sm transition-all duration-300 ${notification.type === 'success' ? 'bg-green-900/90 border-green-500/50 text-green-100' : 'bg-red-900/90 border-red-500/50 text-red-100'}`}>\n            {notification.type === 'success' ? <CheckCircle className=\"w-5 h-5 text-green-400\" /> : <AlertCircle className=\"w-5 h-5 text-red-400\" />}\n            <span className=\"text-sm font-medium\">{notification.message}</span>\n            <button onClick={() => removeNotification(notification.id)} className=\"ml-2 text-gray-400 hover:text-white transition-colors\">\n              <X className=\"w-4 h-4\" />\n            </button>\n          </div>)}\n      </div>;\n  };\n  const Dashboard = () => <div className=\"space-y-6\">\n      {}\n      {userProfile && <div>\n          <h2 className=\"text-2xl font-bold text-white mb-4\">Your Performance</h2>\n          <div className=\"grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-4\">\n            <div className=\"bg-gradient-to-br from-purple-600 to-pink-600 rounded-xl p-6 text-white\">\n              <div className=\"flex items-center gap-3 mb-2\">\n                <Target className=\"w-6 h-6\" />\n                <span className=\"font-medium\">Total Bets</span>\n              </div>\n              <div className=\"text-2xl font-bold\">{userProfile.totalBets}</div>\n            </div>\n            <div className=\"bg-gradient-to-br from-green-600 to-emerald-600 rounded-xl p-6 text-white\">\n              <div className=\"flex items-center gap-3 mb-2\">\n                <Trophy className=\"w-6 h-6\" />\n                <span className=\"font-medium\">Total Wins</span>\n              </div>\n              <div className=\"text-2xl font-bold\">{userProfile.totalWins}</div>\n            </div>\n            <div className=\"bg-gradient-to-br from-blue-600 to-cyan-600 rounded-xl p-6 text-white\">\n              <div className=\"flex items-center gap-3 mb-2\">\n                <Zap className=\"w-6 h-6\" />\n                <span className=\"font-medium\">Win Rate</span>\n              </div>\n              <div className=\"text-2xl font-bold\">{userProfile.winRate.toFixed(1)}%</div>\n            </div>\n            <div className=\"bg-gradient-to-br from-orange-600 to-red-600 rounded-xl p-6 text-white\">\n              <div className=\"flex items-center gap-3 mb-2\">\n                <Star className=\"w-6 h-6\" />\n                <span className=\"font-medium\">Volume</span>\n              </div>\n              <div className=\"text-2xl font-bold\">{userProfile.totalVolume.toFixed(2)} SOL</div>\n            </div>\n          </div>\n        </div>}\n      <div>\n        <h2 className=\"text-2xl font-bold text-white mb-6\">Your Active Bets</h2>\n        {userBets.length === 0 ? <div className=\"text-center py-12 text-gray-400\">\n            <Target className=\"w-16 h-16 mx-auto mb-4 opacity-50\" />\n            <p>No active bets yet. Start predicting to see your portfolio!</p>\n          </div> : <div className=\"grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-2 xl:grid-cols-3 gap-4 sm:gap-6\">\n          {userBets.map(bet => {\n          const market = markets.find(m => m.id === bet.marketId);\n          if (!market) return null;\n          return <div key={bet.id} className=\"bg-gray-900 rounded-xl p-6 border border-gray-800\">\n                  <h3 className=\"text-lg font-bold text-white mb-2\">{market.question}</h3>\n                  <div className=\"space-y-2 text-sm\">\n                    <div className=\"flex justify-between\">\n                      <span className=\"text-gray-400\">Your Prediction:</span>\n                      <span className={`font-medium ${bet.outcome === 'yes' ? 'text-green-400' : 'text-red-400'}`}>\n                        {bet.outcome.toUpperCase()}\n                      </span>\n                    </div>\n                    <div className=\"flex justify-between\">\n                      <span className=\"text-gray-400\">Amount Bet:</span>\n                      <span className=\"text-white\">${bet.amount.toFixed(2)}</span>\n                    </div>\n                    <div className=\"flex justify-between\">\n                      <span className=\"text-gray-400\">Shares:</span>\n                      <span className=\"text-white\">{bet.shares.toFixed(2)}</span>\n                    </div>\n                    <div className=\"flex justify-between\">\n                      <span className=\"text-gray-400\">Status:</span>\n                      <span className=\"text-purple-400\">\n                        {market.resolved ? 'Resolved' : 'Active'}\n                      </span>\n                    </div>\n                  </div>\n                </div>;\n        })}\n          </div>}\n      </div>\n    </div>;\n  const Leaderboard = () => <div>\n      <h2 className=\"text-2xl font-bold text-white mb-6 flex items-center gap-3\">\n        <Crown className=\"w-8 h-8 text-yellow-500\" />\n        Top Predictors\n      </h2>\n      <div className=\"space-y-4\">\n        {leaderboard.map((user, index) => <div key={user.id} className=\"bg-gray-900 rounded-xl p-6 border border-gray-800 flex items-center gap-4\">\n            <div className={`w-12 h-12 rounded-full flex items-center justify-center font-bold text-lg ${index === 0 ? 'bg-yellow-500 text-black' : index === 1 ? 'bg-gray-400 text-black' : index === 2 ? 'bg-orange-500 text-black' : 'bg-gray-700 text-white'}`}>\n              {index + 1}\n            </div>\n            <div className=\"flex-1\">\n              <div className=\"text-white font-medium\">\n                {user.userId.slice(0, 6)}...{user.userId.slice(-4)}\n              </div>\n              <div className=\"text-gray-400 text-sm\">\n                {user.totalBets} bets • ${user.totalVolume.toFixed(2)} volume\n              </div>\n            </div>\n            <div className=\"text-right\">\n              <div className=\"text-green-400 font-bold text-lg\">{user.winRate.toFixed(1)}%</div>\n              <div className=\"text-gray-400 text-sm\">win rate</div>\n            </div>\n          </div>)}\n      </div>\n    </div>;\n  return <div className=\"min-h-screen bg-[#0C0D15] text-white\" style={{\n    fontFamily: '\"Epunda Slab\", serif',\n    fontOpticalSizing: 'auto',\n    fontWeight: 400,\n    fontStyle: 'normal'\n  }}>\n      <style>\n        {`\n          @import url('https://fonts.googleapis.com/css2?family=Epunda+Slab:ital,wght@0,300..900;1,300..900&display=swap');\n        `}\n      </style>\n      <header className=\"border-b border-gray-800/50 bg-gray-900/80 backdrop-blur-xl sticky top-0 z-40\">\n        <div className=\"max-w-7xl mx-auto px-4 py-4\">\n          <div className=\"flex items-center justify-between\">\n            <div className=\"flex items-center gap-2 sm:gap-3 min-w-0\">\n              <div className=\"bg-gradient-to-r from-[#BFE787] to-[#BFE787]/80 p-2 rounded-xl flex-shrink-0\">\n                <TrendingUp className=\"w-5 h-5 sm:w-6 sm:h-6 text-black\" />\n              </div>\n              <div className=\"min-w-0\">\n                <h1 className=\"text-lg sm:text-2xl font-bold bg-gradient-to-r from-[#BFE787] to-[#BFE787]/80 bg-clip-text text-transparent truncate\">\n                  PredictPulse\n                </h1>\n                <p className=\"text-gray-400 text-xs sm:text-sm hidden sm:block\">Predict the future, earn rewards</p>\n              </div>\n            </div>\n            <div className=\"flex items-center gap-2 sm:gap-4 flex-shrink-0\">\n              {userWallet && <button onClick={() => setShowCreateMarket(true)} className=\"bg-gradient-to-r from-[#BFE787] to-[#BFE787]/80 text-black px-3 sm:px-6 py-2 sm:py-2.5 rounded-lg sm:rounded-xl font-medium hover:from-[#BFE787]/90 hover:to-[#BFE787]/70 transition-all flex items-center gap-1 sm:gap-2 shadow-lg text-sm sm:text-base\">\n                  <Plus className=\"w-4 h-4\" />\n                  <span className=\"hidden sm:inline\">Create Market</span>\n                  <span className=\"sm:hidden\">Create</span>\n                </button>}\n              <UserButton />\n            </div>\n          </div>\n        </div>\n      </header>\n      {}\n      <nav className=\"border-b border-gray-800/50 bg-gray-900/30 backdrop-blur-sm\">\n        <div className=\"max-w-7xl mx-auto px-4\">\n          <div className=\"flex gap-4 sm:gap-8 overflow-x-auto scrollbar-hide\">\n            <button onClick={() => setActiveTab('markets')} className={`py-4 px-2 sm:px-4 border-b-2 font-medium transition-colors whitespace-nowrap text-sm sm:text-base ${activeTab === 'markets' ? 'border-[#BFE787] text-[#BFE787]' : 'border-transparent text-gray-400 hover:text-white'}`}>\n              Markets\n            </button>\n            <button onClick={() => setActiveTab('tokens')} className={`py-4 px-2 sm:px-4 border-b-2 font-medium transition-colors whitespace-nowrap text-sm sm:text-base ${activeTab === 'tokens' ? 'border-[#BFE787] text-[#BFE787]' : 'border-transparent text-gray-400 hover:text-white'}`}>\n              Tokens\n            </button>\n            {userWallet && <button onClick={() => setActiveTab('dashboard')} className={`py-4 px-2 sm:px-4 border-b-2 font-medium transition-colors whitespace-nowrap text-sm sm:text-base ${activeTab === 'dashboard' ? 'border-[#BFE787] text-[#BFE787]' : 'border-transparent text-gray-400 hover:text-white'}`}>\n                Dashboard\n              </button>}\n            <button onClick={() => setActiveTab('leaderboard')} className={`py-4 px-2 sm:px-4 border-b-2 font-medium transition-colors whitespace-nowrap text-sm sm:text-base ${activeTab === 'leaderboard' ? 'border-[#BFE787] text-[#BFE787]' : 'border-transparent text-gray-400 hover:text-white'}`}>\n              Leaderboard\n            </button>\n          </div>\n        </div>\n      </nav>\n      {}\n      <main className={`max-w-7xl mx-auto px-4 py-4 sm:py-8 transition-all duration-300 ${chatPanelOpen ? 'lg:mr-96' : ''}`}>\n        {!userWallet && activeTab !== 'markets' && activeTab !== 'leaderboard' && activeTab !== 'tokens' && <div className=\"text-center py-12\">\n            <Target className=\"w-16 h-16 mx-auto mb-4 opacity-50 text-gray-400\" />\n            <h2 className=\"text-2xl font-bold text-white mb-2\">Connect Your Wallet</h2>\n            <p className=\"text-gray-400 mb-6\">Connect your Solana wallet to start predicting and earning!</p>\n            <UserButton />\n          </div>}\n      {activeTab === 'markets' && <div>\n            <div className=\"mb-8\">\n              <div>\n                <h2 className=\"text-3xl font-bold text-white mb-2\">Prediction Markets</h2>\n                <p className=\"text-gray-400\">Bet on the future and earn rewards for accurate predictions</p>\n              </div>\n              {}\n              <div className=\"mt-6 flex flex-wrap gap-2 sm:gap-3\">\n                <button onClick={() => setMarketFilter('all')} className={`px-3 sm:px-4 py-2 rounded-lg font-medium transition-all text-sm sm:text-base ${marketFilter === 'all' ? 'bg-[#BFE787] text-black' : 'bg-gray-800 text-gray-300 hover:bg-gray-700'}`}>\n                  All Markets\n                </button>\n                <button onClick={() => setMarketFilter('ongoing')} className={`px-3 sm:px-4 py-2 rounded-lg font-medium transition-all text-sm sm:text-base ${marketFilter === 'ongoing' ? 'bg-[#BFE787] text-black' : 'bg-gray-800 text-gray-300 hover:bg-gray-700'}`}>\n                  Ongoing\n                </button>\n                <button onClick={() => setMarketFilter('ended')} className={`px-3 sm:px-4 py-2 rounded-lg font-medium transition-all text-sm sm:text-base ${marketFilter === 'ended' ? 'bg-red-600 text-white' : 'bg-gray-800 text-gray-300 hover:bg-gray-700'}`}>\n                  Ended\n                </button>\n              </div>\n              <div className=\"mt-4 flex flex-wrap gap-1 sm:gap-2\">\n                {labels.map(label => <button key={label} onClick={() => setLabelFilter(label)} className={`px-2 sm:px-3 py-1 text-xs sm:text-sm rounded-full font-medium transition-all ${labelFilter === label ? 'bg-[#BFE787] text-black' : 'bg-gray-800 text-gray-300 hover:bg-gray-700'}`}>\n                    {label}\n                  </button>)}\n              </div>\n            </div>\n            {loading ? <div className=\"text-center py-12\">\n                <div className=\"animate-spin w-8 h-8 border-2 border-[#BFE787] border-t-transparent rounded-full mx-auto\"></div>\n                <p className=\"text-gray-400 mt-4\">Loading markets...</p>\n              </div> : markets.length === 0 ? <div className=\"text-center py-12\">\n                <TrendingUp className=\"w-16 h-16 mx-auto mb-4 opacity-50 text-gray-400\" />\n                <h3 className=\"text-xl font-bold text-white mb-2\">No Markets Yet</h3>\n                <p className=\"text-gray-400 mb-6\">Be the first to create a prediction market!</p>\n                {userWallet && <button onClick={() => setShowCreateMarket(true)} className=\"bg-gradient-to-r from-[#BFE787] to-[#BFE787]/80 text-black px-6 py-3 rounded-lg font-medium hover:from-[#BFE787]/90 hover:to-[#BFE787]/70 transition-all\">\n                    Create First Market\n                  </button>}\n              </div> : getFilteredMarkets().length === 0 ? <div className=\"text-center py-12\">\n                <TrendingUp className=\"w-16 h-16 mx-auto mb-4 opacity-50 text-gray-400\" />\n                <h3 className=\"text-xl font-bold text-white mb-2\">\n                  No markets found for \"{labelFilter}\" in {marketFilter}\n                </h3>\n                <p className=\"text-gray-400 mb-6\">\n                  Try a different filter combination or create a new market!\n                </p>\n              </div> : <div className=\"grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-6\">\n                {getFilteredMarkets().map(market => <MarketCard key={market.id} market={market} userBets={userBets} allBets={allBets} userPayouts={userPayouts} userWallet={userWallet} placeBet={placeBet} resolveMarket={resolveMarket} claimPayout={claimPayout} setShowEditMarket={setShowEditMarket} formatTimeLeft={formatTimeLeft} onOpenChat={handleOpenChat} unreadCount={unreadMessages[market.id] || 0} hasReply={!!replyNotifications[market.id]} pythPrices={pythPrices} onOpenAIAnalysis={handleOpenAIAnalysis} />)}\n              </div>}\n          </div>}\n        {activeTab === 'tokens' && <TokenListingsPage />}\n        {activeTab === 'dashboard' && userWallet && <Dashboard />}\n        {activeTab === 'leaderboard' && <Leaderboard />}\n      </main>\n      {}\n      <CreateMarketModal showCreateMarket={showCreateMarket} setShowCreateMarket={setShowCreateMarket} createMarket={createMarket} showNotification={showNotification} />\n      <EditMarketModal showEditMarket={showEditMarket} setShowEditMarket={setShowEditMarket} markets={markets} updateMarketEndTime={updateMarketEndTime} />\n      <ChatPanel market={selectedMarket} isOpen={chatPanelOpen} onClose={handleCloseChat} userWallet={userWallet} devbaseClient={devbaseClient} showNotification={showNotification} scrollToMessageId={scrollToMessageId} />\n      <AIAnalysisModal market={selectedMarketForAI} isOpen={showAIAnalysis} onClose={handleCloseAIAnalysis} />\n      <NotificationContainer />\n      <style>\n        {`\n          @keyframes slide-in-right {\n            from {\n              transform: translateX(100%);\n            }\n            to {\n              transform: translateX(0);\n            }\n          }\n          .animate-slide-in-right {\n            animation: slide-in-right 0.3s ease-out;\n          }\n          .scrollbar-hide {\n            -ms-overflow-style: none;\n            scrollbar-width: none;\n          }\n          .scrollbar-hide::-webkit-scrollbar {\n            display: none;\n          }\n        `}\n      </style>\n    </div>;\n}\nexport default AppWithProvider;","packageJson","{\"dependencies\":{\"react\":\"18.2.0\",\"lucide-react\":\"0.441.0\",\"@devfunlabs/web-sdk\":\"0.5.6\",\"zod\":\"3.22.4\",\"recharts\":\"2.8.0\",\"react-router-dom\":\"6.18.0\",\"framer-motion\":\"10.16.4\",\"socket.io-client\":\"4.7.1\",\"@solana/web3.js\":\"1.95.3\"}}","appFunctions",[80,88,94],{"_14":81,"_35":82,"_37":83,"_18":84,"_85":86,"_87":40},["B","14102"],["D",1756814993251],["D",1756814993251],"$FUNC_CALCULATE_PAYOUT","body","async function $FUNC_CALCULATE_PAYOUT(marketId) {\n  const market = await $ENTITY('markets').get(marketId);\n  const allBets = await $ENTITY('bets').list({ marketId: marketId });\n  const winningBets = await $ENTITY('bets').list({ \n    marketId: marketId, \n    outcome: market.winningOutcome \n  });\n  const userWinningBets = await $ENTITY('bets').list({ \n    userId: $USER_ID, \n    marketId: marketId, \n    outcome: market.winningOutcome \n  });\n  \n  if (winningBets.length === 0 || userWinningBets.length === 0) return 0;\n  \n  const totalPot = allBets.reduce((sum, bet) => sum + bet.amount, 0);\n  const userWinningAmount = userWinningBets.reduce((sum, bet) => sum + bet.amount, 0);\n  const totalWinningAmount = winningBets.reduce((sum, bet) => sum + bet.amount, 0);\n  \n  const userShare = userWinningAmount / totalWinningAmount;\n  return totalPot * userShare;\n}","commitId",{"_14":89,"_35":90,"_37":91,"_18":92,"_85":93,"_87":40},["B","14103"],["D",1756814993253],["D",1756814993253],"$FUNC_CAN_CLAIM_PAYOUT","async function $FUNC_CAN_CLAIM_PAYOUT(marketId) {\n  const market = await $ENTITY('markets').get(marketId);\n  if (!market || !market.resolved || !market.winningOutcome) return false;\n  \n  const userBet = await $ENTITY('bets').list({ \n    userId: $USER_ID, \n    marketId: marketId, \n    outcome: market.winningOutcome \n  });\n  \n  if (userBet.length === 0) return false;\n  \n  const existingPayout = await $ENTITY('payouts').exists({ \n    userId: $USER_ID, \n    marketId: marketId \n  });\n  \n  return !existingPayout;\n}",{"_14":95,"_35":96,"_37":97,"_18":98,"_85":99,"_87":40},["B","14104"],["D",1756814993254],["D",1756814993254],"$FUNC_MARKET_ACTIVE","async function $FUNC_MARKET_ACTIVE(marketId) {\n  const market = await $ENTITY('markets').get(marketId);\n  if (!market) return false;\n  if (market.resolved) return false;\n  const endTime = new Date(market.endTime);\n  const now = new Date();\n  return endTime > now;\n}","token",{"_18":102,"_103":104,"_105":106,"_107":108,"_109":110,"_111":-5,"_112":-5,"_113":114,"_115":114,"_72":73},"rock paper scissors","symbol","RPS","price",0.00000578,"marketcap",5835.74852865,"image","https://pump.mypinata.cloud/ipfs/bafybeiclhpltoy2pf4xnrszottgyny3h7ulibo2nqqcscdth2saynj64we?img-width=256&img-dpr=2","website","twitter","devCount",2,"appCount","upstreamApp","isLordOfDev","analytics",[120,124,126,128,130,132,134,136,138,140,142,144,146,148,150,152,154,156,158],{"_121":122,"_123":60},"day","2025-08-20","runCount",{"_121":125,"_123":60},"2025-08-21",{"_121":127,"_123":60},"2025-08-22",{"_121":129,"_123":60},"2025-08-23",{"_121":131,"_123":60},"2025-08-24",{"_121":133,"_123":60},"2025-08-25",{"_121":135,"_123":60},"2025-08-26",{"_121":137,"_123":60},"2025-08-27",{"_121":139,"_123":60},"2025-08-28",{"_121":141,"_123":60},"2025-08-29",{"_121":143,"_123":60},"2025-08-30",{"_121":145,"_123":60},"2025-08-31",{"_121":147,"_123":60},"2025-09-01",{"_121":149,"_123":60},"2025-09-02",{"_121":143,"_123":151},5,{"_121":145,"_123":153},7,{"_121":147,"_123":155},14,{"_121":149,"_123":157},13,{"_121":159,"_123":114},"2025-09-03","snapshot","ogImage","https://cdn.dev.fun/og/image/2ba6787decdcd65d14b5/d4a30861.webp","isDevbase","actionData","errors"]
</article></body></html>

say something