[{"_1":2,"_154":-5,"_155":-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,"_152":-5,"_143":-5,"_153":-5},"appDetail",{"_14":15,"_16":17,"_18":19,"_20":21,"_22":23,"_24":25,"_26":27,"_28":27,"_29":30,"_33":34,"_35":36,"_37":38,"_39":40,"_41":42,"_43":44,"_45":46,"_5":47,"_58":59,"_60":61,"_62":61,"_63":64,"_65":61,"_66":61,"_67":61,"_68":44,"_69":61,"_70":71,"_72":17,"_73":17,"_74":-5,"_75":76,"_77":78,"_79":80,"_101":-5,"_102":-5,"_103":17,"_104":105,"_143":34,"_144":145,"_146":27,"_147":148},"id","105a4814c8ac1d98f456","isMyApp",false,"projectId","cmf5njzqv000my9iw4144m939","name","solchan","description","Dive into the wild west of anonymous Solana discourse! SolChan brings you that classic imageboard experience with a crypto twist - post anonymously, start heated debates, and watch threads bump in real-time. No registration, no rules, just pure unfiltered conversation in Solana's signature teal-to-purple gradient glory.","brief","Anonymous Solana-themed imageboard where crypto degens gather to argue and shitpost","isLive",true,"isPublic","tags",[31,32],"🔥","👑","cover","https://cdn.dev.fun/snapshot/105a4814c8ac1d98f456/97767_c67ad84d.webp","cdnUrl","https://cdn.dev.fun/app/105a4814c8ac1d98f456/97767","createdAt",["D",1757007612210],"updatedAt",["D",1757022806572],"lastCommitId",["B","97767"],"tier",1,"credits",56,{"_14":48,"_49":50,"_51":-5,"_52":50,"_53":54,"_55":-5,"_56":57},"5e1bcb91-495d-4f2a-a44d-dbea02e99625","uniqueId","FHb6n3VFozFACchv3JovFyXR6yPsCZTQga1vkpUVJc2v","username","solanaWallet","displayName","FHb...c2v","bio","avatar","/avatar.svg","commitCount",29,"forkCount",0,"likeCount","runsCount",1931,"downvoteCount","upvoteCount","upvoteRate","commentCount","reportCount","visitorCount",3,"isArchived","isRenamed","contractAddress","code","import { useState, useEffect, useRef } from 'react';\nimport { Search, Plus, ArrowLeft, MessageSquare, Clock, ChevronDown } from 'lucide-react';\nimport { useDevapp, DevappProvider } from '@devfunlabs/web-sdk';\nconst SolanaLogo = ({\n className = \"w-8 h-8\"\n}) => ;\nconst generateFingerprint = () => {\n const canvas = document.createElement('canvas');\n const ctx = canvas.getContext('2d');\n ctx.textBaseline = 'top';\n ctx.font = '14px Arial';\n ctx.fillText('Browser fingerprint', 2, 2);\n return canvas.toDataURL();\n};\nconst generatePersistentUserId = threadId => {\n const storageKey = `solchan_user_${threadId}`;\n let userId = localStorage.getItem(storageKey);\n if (!userId) {\n const fingerprint = generateFingerprint();\n const hash = fingerprint.split('').reduce((a, b) => {\n a = (a << 5) - a + b.charCodeAt(0);\n return a & a;\n }, 0);\n const chars = '0123456789abcdef';\n let result = 'Anon';\n for (let i = 0; i < 6; i++) {\n result += chars.charAt(Math.abs(hash + i) % chars.length);\n }\n userId = result;\n localStorage.setItem(storageKey, userId);\n }\n return userId;\n};\nconst getClientIP = () => {\n return new Promise(resolve => {\n const pc = new RTCPeerConnection({\n iceServers: [{\n urls: 'stun:stun.l.google.com:19302'\n }]\n });\n pc.createDataChannel('');\n pc.createOffer().then(offer => pc.setLocalDescription(offer));\n pc.onicecandidate = event => {\n if (event.candidate) {\n const candidate = event.candidate.candidate;\n const ip = candidate.split(' ')[4];\n if (ip && ip !== '0.0.0.0') {\n pc.close();\n resolve(ip);\n return;\n }\n }\n };\n setTimeout(() => {\n pc.close();\n resolve('unknown');\n }, 1000);\n });\n};\nclass DataLayer {\n constructor(devbaseClient) {\n this.devbaseClient = devbaseClient;\n }\n async getThreads(boardId) {\n try {\n const threads = await this.devbaseClient.listEntities('threads', {\n boardId\n });\n if (!threads) return [];\n const BANNED_THREAD_TITLES = [\"solchan.org - GO TO THE ORIGINAL INSTEAD OF THIS COPYCAT BULLSHIT\", \"THIS IS A C O P Y BY SOME FAG, 𝐬̲𝐨̲𝐥̲𝐜̲𝐡̲𝐚̲𝐧̲.̲𝐨̲𝐫̲𝐠̲ IS THE ORIGINAL\", \"THIS IS A C O P Y BY SOME F A G, 𝘀̲𝗼̲𝗹̲𝗰̲𝗵̲𝗮̲𝗻̲.̲𝗼̲𝗿̲𝗴̲ IS THE O R I G I N A L\", \"𝚃𝙷𝙸𝚂 𝙸𝚂 𝙰 𝙲𝙾𝙿𝚈, 𝚂𝙾𝙻𝙲𝙷𝙰𝙽.𝙾𝚁𝙶 𝙸𝚂 𝚃𝙷𝙴 𝙾𝚁𝙸𝙶𝙸𝙽𝙰𝙻\", \"𝙏𝙃𝙄𝙎 𝙄𝙎 𝘼 𝘾𝙊𝙋𝙔 - 𝙎𝙊𝙇𝘾𝙃𝘼𝙉.𝙊𝙍𝙂 𝙄𝙎 𝙏𝙃𝙀 𝙊𝙍𝙄𝙂𝙄𝙉𝘼𝙇\"];\n return threads.filter(thread => {\n if (BANNED_THREAD_TITLES.includes(thread.title)) return false;\n if (containsBannedWords(thread.title) || containsBannedWords(thread.body)) return false;\n return true;\n });\n } catch (error) {\n console.error('Error getting threads:', error);\n return [];\n }\n }\n async getThread(id) {\n try {\n const thread = await this.devbaseClient.getEntity('threads', id);\n const BANNED_THREAD_TITLES = [\"solchan.org - GO TO THE ORIGINAL INSTEAD OF THIS COPYCAT BULLSHIT\", \"THIS IS A C O P Y BY SOME FAG, 𝐬̲𝐨̲𝐥̲𝐜̲𝐡̲𝐚̲𝐧̲.̲𝐨̲𝐫̲𝐠̲ IS THE ORIGINAL\", \"THIS IS A C O P Y BY SOME F A G, 𝘀̲𝗼̲𝗹̲𝗰̲𝗵̲𝗮̲𝗻̲.̲𝗼̲𝗿̲𝗴̲ IS THE O R I G I N A L\", \"𝚃𝙷𝙸𝚂 𝙸𝚂 𝙰 𝙲𝙾𝙿𝚈, 𝚂𝙾𝙻𝙲𝙷𝙰𝙽.𝙾𝚁𝙶 𝙸𝚂 𝚃𝙷𝙴 𝙾𝚁𝙸𝙶𝙸𝙽𝙰𝙇\", \"𝙏𝙃𝙄𝙎 𝙄𝙎 𝘼 𝘾𝙊𝙋𝙔 - 𝙎𝙊𝙇𝘾𝙃𝘼𝙉.𝙊𝙍𝙂 𝙄𝙎 𝙏𝙃𝙀 𝙊𝙍𝙄𝙂𝙄𝙉𝘼𝙇\"];\n if (thread && (BANNED_THREAD_TITLES.includes(thread.title) || containsBannedWords(thread.title) || containsBannedWords(thread.body))) {\n return null;\n }\n return thread;\n } catch (error) {\n console.error('Error getting thread:', error);\n return null;\n }\n }\n async createThread(boardId, title, body, image = null) {\n try {\n const now = Date.now();\n const thread = await this.devbaseClient.createEntity('threads', {\n boardId,\n title: title.trim(),\n body: body.trim(),\n image,\n createdAt: now,\n updatedAt: now,\n bumpAt: now,\n repliesCount: 0\n });\n return thread;\n } catch (error) {\n console.error('Error creating thread:', error);\n throw error;\n }\n }\n async getPosts(threadId) {\n try {\n const posts = await this.devbaseClient.listEntities('posts', {\n threadId\n });\n return posts || [];\n } catch (error) {\n console.error('Error getting posts:', error);\n return [];\n }\n }\n async createPost(threadId, body, image = null, userName = '', replyToId = null) {\n try {\n const now = Date.now();\n const userId = generatePersistentUserId(threadId);\n const clientIP = await getClientIP();\n const post = await this.devbaseClient.createEntity('posts', {\n threadId,\n body: body.trim(),\n image,\n userId,\n userName: userName.trim(),\n replyToId,\n clientIP,\n createdAt: now\n });\n const posts = await this.getPosts(threadId);\n await this.devbaseClient.updateEntity('threads', threadId, {\n bumpAt: now,\n repliesCount: posts.length\n });\n return post;\n } catch (error) {\n console.error('Error creating post:', error);\n throw error;\n }\n }\n async deleteThread(threadId) {\n try {\n await this.devbaseClient.deleteEntity('threads', threadId);\n return true;\n } catch (error) {\n console.error('Error deleting thread:', error);\n throw error;\n }\n }\n async blockUserByIP(ipAddress, reason = '') {\n try {\n const blockedUser = await this.devbaseClient.createEntity('blocked_users', {\n ipAddress,\n reason,\n createdAt: Date.now()\n });\n return blockedUser;\n } catch (error) {\n console.error('Error blocking user:', error);\n throw error;\n }\n }\n async getBlockedUsers() {\n try {\n const blockedUsers = await this.devbaseClient.listEntities('blocked_users');\n return blockedUsers || [];\n } catch (error) {\n console.error('Error getting blocked users:', error);\n return [];\n }\n }\n async validateAdminPassword(password) {\n try {\n const result = await this.devbaseClient.evalCondition(`$FUNC_VALIDATE_ADMIN_PASSWORD(\"${password}\")`);\n return result.success;\n } catch (error) {\n console.error('Error validating admin password:', error);\n return false;\n }\n }\n}\nconst Toast = ({\n message,\n type,\n onClose\n}) =>

\n {message}\n \n

;\nconst formatRelativeTime = timestamp => {\n const now = Date.now();\n const diff = now - timestamp;\n const minutes = Math.floor(diff / 60000);\n const hours = Math.floor(diff / 3600000);\n const days = Math.floor(diff / 86400000);\n if (days > 0) return `${days}d ago`;\n if (hours > 0) return `${hours}h ago`;\n if (minutes > 0) return `${minutes}m ago`;\n return 'Just now';\n};\nconst escapeHtml = text => {\n const div = document.createElement('div');\n div.textContent = text;\n return div.innerHTML;\n};\nconst validateInput = (text, minLength, maxLength) => {\n const trimmed = text.trim();\n if (trimmed.length < minLength || trimmed.length > maxLength) {\n return false;\n }\n return trimmed;\n};\nconst BANNED_WORDS = ['rug', 'scam', 'rugpull', 'scammer', 'scamming', 'copy', 'copied', 'copycat', 'clone', 'cloned', 'fake', 'stolen', 'rip', 'ripped', 'knockoff', 'imitation', 'duplicate', 'plagiarized', 'solchan.org', 'bullshit', 'original', '𝘀̲𝗼̲𝗹̲𝗰̲𝗵̲𝗮̲𝗻̲.̲𝗼̲𝗿̲𝗴̲'];\nconst containsBannedWords = text => {\n const lowerText = text.toLowerCase();\n return BANNED_WORDS.some(word => lowerText.includes(word));\n};\nconst canUserPost = () => {\n const lastPostTime = localStorage.getItem('solchan_last_post');\n if (!lastPostTime) return true;\n const timeSinceLastPost = Date.now() - parseInt(lastPostTime);\n const twoMinutes = 2 * 60 * 1000;\n return timeSinceLastPost >= twoMinutes;\n};\nconst updateLastPostTime = () => {\n localStorage.setItem('solchan_last_post', Date.now().toString());\n};\nconst getTimeUntilNextPost = () => {\n const lastPostTime = localStorage.getItem('solchan_last_post');\n if (!lastPostTime) return 0;\n const timeSinceLastPost = Date.now() - parseInt(lastPostTime);\n const twoMinutes = 2 * 60 * 1000;\n return Math.max(0, twoMinutes - timeSinceLastPost);\n};\nconst formatTimeRemaining = ms => {\n const seconds = Math.ceil(ms / 1000);\n const minutes = Math.floor(seconds / 60);\n const remainingSeconds = seconds % 60;\n if (minutes > 0) {\n return `${minutes}m ${remainingSeconds}s`;\n }\n return `${remainingSeconds}s`;\n};\nconst BOARDS = {\n sol: {\n id: 'sol',\n name: '/sol/',\n description: 'anonymous discussion'\n },\n kol: {\n id: 'kol',\n name: '/kol/',\n description: 'crypto influencers'\n },\n coins: {\n id: 'coins',\n name: '/coins/',\n description: 'shill your project'\n },\n x: {\n id: 'x',\n name: '/X/',\n description: 'X discussion'\n },\n lol: {\n id: 'lol',\n name: '/lol/',\n description: 'crypto fail'\n },\n raid: {\n id: 'raid',\n name: '/raid/',\n description: 'raid parties'\n }\n};\nconst AdminLoginModal = ({\n isOpen,\n onClose,\n onLogin\n}) => {\n const [password, setPassword] = useState('');\n const [error, setError] = useState('');\n const handleSubmit = async e => {\n e.preventDefault();\n try {\n const isValid = await onLogin(password);\n if (isValid) {\n setPassword('');\n setError('');\n onClose();\n } else {\n setError('Invalid password');\n }\n } catch (error) {\n setError('Authentication failed');\n }\n };\n if (!isOpen) return null;\n return

Admin Access

\n \n

;\n};\nconst AdminControlPanel = ({\n isOpen,\n onClose,\n dataLayer,\n showToast\n}) => {\n const [threads, setThreads] = useState([]);\n const [blockedUsers, setBlockedUsers] = useState([]);\n const [blockIP, setBlockIP] = useState('');\n const [blockReason, setBlockReason] = useState('');\n useEffect(() => {\n if (isOpen) {\n loadData();\n }\n }, [isOpen]);\n const loadData = async () => {\n try {\n const allThreads = [];\n for (const boardId of Object.keys(BOARDS)) {\n const boardThreads = await dataLayer.getThreads(boardId);\n allThreads.push(...boardThreads);\n }\n setThreads(allThreads);\n const blocked = await dataLayer.getBlockedUsers();\n setBlockedUsers(blocked);\n } catch (error) {\n showToast('Failed to load admin data', 'error');\n }\n };\n const handleDeleteThread = async threadId => {\n if (!confirm('Are you sure you want to delete this thread?')) return;\n try {\n await dataLayer.deleteThread(threadId);\n showToast('Thread deleted successfully', 'success');\n loadData();\n } catch (error) {\n showToast('Failed to delete thread', 'error');\n }\n };\n const handleBlockUser = async e => {\n e.preventDefault();\n if (!blockIP.trim()) return;\n try {\n await dataLayer.blockUserByIP(blockIP.trim(), blockReason.trim());\n showToast('User blocked successfully', 'success');\n setBlockIP('');\n setBlockReason('');\n loadData();\n } catch (error) {\n showToast('Failed to block user', 'error');\n }\n };\n if (!isOpen) return null;\n return

Admin Control Panel

\n \n

\n\n

\n {}\n

Block User by IP

\n \n \n

Blocked Users ({blockedUsers.length})

\n {blockedUsers.map(user =>

{user.ipAddress}

\n {user.reason &&

{user.reason}

}\n

)}\n

\n\n {}\n

Thread Management

Total Threads: {threads.length}

\n {threads.map(thread =>

\n {thread.title}\n

\n {BOARDS[thread.boardId]?.name || 'Unknown'} • {formatRelativeTime(thread.createdAt)}\n

\n {thread.body.slice(0, 100)}...\n

\n \n

)}\n

;\n};\nconst Header = ({\n currentRoute,\n onNavigate,\n onAdminClick\n}) => {\n const [showBoardDropdown, setShowBoardDropdown] = useState(false);\n const dropdownRef = useRef(null);\n useEffect(() => {\n const handleClickOutside = event => {\n if (dropdownRef.current && !dropdownRef.current.contains(event.target)) {\n setShowBoardDropdown(false);\n }\n };\n document.addEventListener('mousedown', handleClickOutside);\n return () => {\n document.removeEventListener('mousedown', handleClickOutside);\n };\n }, []);\n const handleLogoClick = () => {\n setShowBoardDropdown(!showBoardDropdown);\n };\n const handleBoardSelect = boardId => {\n onNavigate(`#/board/${boardId}`);\n setShowBoardDropdown(false);\n };\n const handleTitleClick = e => {\n const clickedChar = e.target.textContent;\n if (clickedChar === 'o' && onAdminClick) {\n onAdminClick();\n }\n };\n return

\n \n

\n SolChan\n

\n \n

\n \n {showBoardDropdown &&

\n Navigate to Board\n

\n {Object.values(BOARDS).map(board => )}\n

}\n

\n \n \n

;\n};\nconst ThreadForm = ({\n onSubmit,\n onCancel\n}) => {\n const [title, setTitle] = useState('');\n const [body, setBody] = useState('');\n const [image, setImage] = useState(null);\n const [imagePreview, setImagePreview] = useState(null);\n const [isSubmitting, setIsSubmitting] = useState(false);\n const handleImageChange = e => {\n const file = e.target.files[0];\n if (file) {\n if (!file.type.startsWith('image/')) {\n alert('Please select an image file');\n return;\n }\n if (file.size > 5 * 1024 * 1024) {\n alert('Image must be smaller than 5MB');\n return;\n }\n const reader = new FileReader();\n reader.onload = e => {\n const result = e.target.result;\n setImage(result);\n setImagePreview(result);\n };\n reader.readAsDataURL(file);\n }\n };\n const removeImage = () => {\n setImage(null);\n setImagePreview(null);\n };\n const handleSubmit = async e => {\n e.preventDefault();\n const validTitle = validateInput(title, 4, 100);\n const validBody = validateInput(body, 4, 2000);\n if (!validTitle || !validBody) {\n return;\n }\n if (!canUserPost()) {\n const timeRemaining = getTimeUntilNextPost();\n alert(`Please wait ${formatTimeRemaining(timeRemaining)} before posting again.`);\n return;\n }\n if (containsBannedWords(validTitle) || containsBannedWords(validBody)) {\n alert('Your post contains prohibited content. Please remove inappropriate language and try again.');\n return;\n }\n setIsSubmitting(true);\n try {\n await onSubmit(validTitle, validBody, image);\n updateLastPostTime();\n setTitle('');\n setBody('');\n setImage(null);\n setImagePreview(null);\n } catch (error) {\n console.error('Error submitting thread:', error);\n } finally {\n setIsSubmitting(false);\n }\n };\n return

Start New Thread

\n setTitle(e.target.value)} className=\"w-full p-3 bg-gray-700 border border-gray-600 rounded focus:border-purple-500 focus:outline-none text-white\" minLength={4} maxLength={100} required />\n

setBody(e.target.value)} className=\"w-full p-3 bg-gray-700 border border-gray-600 rounded focus:border-purple-500 focus:outline-none text-white h-32 resize-none\" minLength={4} maxLength={2000} required />\n        </div>\n        <div>\n          <label className=\"block text-sm text-gray-300 mb-2\">\n            Image (optional, max 5MB)\n          </label>\n          <input type=\"file\" accept=\"image/*\" onChange={handleImageChange} className=\"w-full p-3 bg-gray-700 border border-gray-600 rounded focus:border-purple-500 focus:outline-none text-white file:mr-4 file:py-2 file:px-4 file:rounded file:border-0 file:text-sm file:bg-purple-600 file:text-white hover:file:bg-purple-700\" />\n          {imagePreview && <div className=\"mt-3 relative inline-block\">\n              <img src={imagePreview} alt=\"Preview\" className=\"max-w-xs max-h-48 rounded border border-gray-600\" />\n              <button type=\"button\" onClick={removeImage} className=\"absolute top-2 right-2 bg-red-600 text-white rounded-full w-6 h-6 flex items-center justify-center hover:bg-red-700\">\n                ×\n              </button>\n            </div>}\n        </div>\n        <div className=\"flex gap-3\">\n          <button type=\"submit\" disabled={isSubmitting} className=\"px-6 py-2 bg-gradient-to-r from-teal-500 to-purple-600 text-white rounded hover:from-teal-600 hover:to-purple-700 disabled:opacity-50\">\n            {isSubmitting ? 'Posting...' : 'Post Thread'}\n          </button>\n          <button type=\"button\" onClick={onCancel} className=\"px-6 py-2 bg-gray-600 text-white rounded hover:bg-gray-700\">\n            Cancel\n          </button>\n        </div>\n      </form>\n    </div>;\n};\nconst ReplyForm = ({\n  threadId,\n  onSubmit,\n  replyTo = null,\n  onCancel = null\n}) => {\n  const [body, setBody] = useState('');\n  const [userName, setUserName] = useState('');\n  const [image, setImage] = useState(null);\n  const [imagePreview, setImagePreview] = useState(null);\n  const [isSubmitting, setIsSubmitting] = useState(false);\n  const handleImageChange = e => {\n    const file = e.target.files[0];\n    if (file) {\n      if (!file.type.startsWith('image/')) {\n        alert('Please select an image file');\n        return;\n      }\n      if (file.size > 5 * 1024 * 1024) {\n        alert('Image must be smaller than 5MB');\n        return;\n      }\n      const reader = new FileReader();\n      reader.onload = e => {\n        const result = e.target.result;\n        setImage(result);\n        setImagePreview(result);\n      };\n      reader.readAsDataURL(file);\n    }\n  };\n  const removeImage = () => {\n    setImage(null);\n    setImagePreview(null);\n  };\n  const handleSubmit = async e => {\n    e.preventDefault();\n    const validBody = validateInput(body, 4, 2000);\n    if (!validBody) return;\n    if (!canUserPost()) {\n      const timeRemaining = getTimeUntilNextPost();\n      alert(`Please wait ${formatTimeRemaining(timeRemaining)} before posting again.`);\n      return;\n    }\n    if (containsBannedWords(validBody) || userName && containsBannedWords(userName)) {\n      alert('Your post contains prohibited content. Please remove inappropriate language and try again.');\n      return;\n    }\n    setIsSubmitting(true);\n    try {\n      await onSubmit(threadId, validBody, image, userName, replyTo?.id);\n      updateLastPostTime();\n      setBody('');\n      setUserName('');\n      setImage(null);\n      setImagePreview(null);\n    } catch (error) {\n      console.error('Error submitting reply:', error);\n    } finally {\n      setIsSubmitting(false);\n    }\n  };\n  return <div className=\"bg-gray-800 rounded-lg p-6 mt-6\">\n      <h3 className=\"text-lg font-semibold mb-4 text-purple-400\">\n        {replyTo ? `Reply to ${replyTo.userName || replyTo.userId}` : 'Post Reply'}\n      </h3>\n      {replyTo && <div className=\"mb-4 p-3 bg-gray-700 rounded border-l-4 border-purple-500\">\n          <div className=\"text-sm text-purple-400 mb-1\">{replyTo.userName || replyTo.userId}</div>\n          <div className=\"text-gray-300 text-sm\">{replyTo.body.slice(0, 100)}...</div>\n        </div>}\n      <form onSubmit={handleSubmit} className=\"space-y-4\">\n        <div>\n          <input type=\"text\" placeholder=\"Name (optional)\" value={userName} onChange={e => setUserName(e.target.value)} className=\"w-full p-3 bg-gray-700 border border-gray-600 rounded focus:border-purple-500 focus:outline-none text-white\" maxLength={50} />\n        </div>\n        <div>\n          <textarea placeholder=\"Reply body (4-2000 characters)\" value={body} onChange={e => setBody(e.target.value)} className=\"w-full p-3 bg-gray-700 border border-gray-600 rounded focus:border-purple-500 focus:outline-none text-white h-24 resize-none\" minLength={4} maxLength={2000} required />\n        </div>\n        <div>\n          <label className=\"block text-sm text-gray-300 mb-2\">\n            Image (optional, max 5MB)\n          </label>\n          <input type=\"file\" accept=\"image/*\" onChange={handleImageChange} className=\"w-full p-3 bg-gray-700 border border-gray-600 rounded focus:border-purple-500 focus:outline-none text-white file:mr-4 file:py-2 file:px-4 file:rounded file:border-0 file:text-sm file:bg-purple-600 file:text-white hover:file:bg-purple-700\" />\n          {imagePreview && <div className=\"mt-3 relative inline-block\">\n              <img src={imagePreview} alt=\"Preview\" className=\"max-w-xs max-h-32 rounded border border-gray-600\" />\n              <button type=\"button\" onClick={removeImage} className=\"absolute top-2 right-2 bg-red-600 text-white rounded-full w-6 h-6 flex items-center justify-center hover:bg-red-700\">\n                ×\n              </button>\n            </div>}\n        </div>\n        <div className=\"flex gap-3\">\n          <button type=\"submit\" disabled={isSubmitting} className=\"px-6 py-2 bg-gradient-to-r from-teal-500 to-purple-600 text-white rounded hover:from-teal-600 hover:to-purple-700 disabled:opacity-50\">\n            {isSubmitting ? 'Posting...' : 'Post Reply'}\n          </button>\n          {onCancel && <button type=\"button\" onClick={onCancel} className=\"px-6 py-2 bg-gray-600 text-white rounded hover:bg-gray-700\">\n              Cancel\n            </button>}\n        </div>\n      </form>\n    </div>;\n};\nconst BoardView = ({\n  boardId,\n  dataLayer,\n  onNavigate,\n  showToast\n}) => {\n  const [threads, setThreads] = useState([]);\n  const [filteredThreads, setFilteredThreads] = useState([]);\n  const [searchTerm, setSearchTerm] = useState('');\n  const [sortBy, setSortBy] = useState('bump');\n  const [showNewThread, setShowNewThread] = useState(false);\n  const [viewMode, setViewMode] = useState('list');\n  const searchRef = useRef();\n  const board = BOARDS[boardId] || BOARDS.sol;\n  useEffect(() => {\n    loadThreads();\n  }, [boardId]);\n  useEffect(() => {\n    filterAndSortThreads();\n  }, [threads, searchTerm, sortBy]);\n  const loadThreads = async () => {\n    const threadData = await dataLayer.getThreads(boardId);\n    setThreads(threadData);\n  };\n  const filterAndSortThreads = () => {\n    let filtered = threads;\n    if (searchTerm) {\n      const term = searchTerm.toLowerCase();\n      filtered = threads.filter(thread => thread.title.toLowerCase().includes(term) || thread.body.toLowerCase().includes(term));\n    }\n    filtered.sort((a, b) => {\n      if (sortBy === 'bump') return b.bumpAt - a.bumpAt;\n      if (sortBy === 'newest') return b.createdAt - a.createdAt;\n      if (sortBy === 'replies') return b.repliesCount - a.repliesCount;\n      return 0;\n    });\n    setFilteredThreads(filtered);\n  };\n  const handleCreateThread = async (title, body, image) => {\n    try {\n      await dataLayer.createThread(boardId, title, body, image);\n      await loadThreads();\n      setShowNewThread(false);\n      showToast('Thread created successfully!', 'success');\n    } catch (error) {\n      showToast('Failed to create thread', 'error');\n    }\n  };\n  const ThreadCard = ({\n    thread\n  }) => <div className=\"bg-gray-800 rounded-lg p-4 hover:bg-gray-750 transition-colors\">\n      <div className=\"flex items-start justify-between mb-2\">\n        <h3 className=\"text-lg font-semibold text-purple-400 cursor-pointer hover:text-purple-300\" onClick={() => onNavigate(`#/thread/${thread.id}`)}>\n          {escapeHtml(thread.title)}\n        </h3>\n        <div className=\"flex items-center gap-2 text-sm text-gray-400\">\n          <MessageSquare className=\"w-4 h-4\" />\n          {thread.repliesCount}\n        </div>\n      </div>\n      {thread.image && <div className=\"mb-3\">\n          <img src={thread.image} alt=\"Thread image\" className=\"max-w-full h-32 object-cover rounded border border-gray-600 cursor-pointer hover:opacity-90\" onClick={() => onNavigate(`#/thread/${thread.id}`)} />\n        </div>}\n      <p className=\"text-gray-300 text-sm mb-3 line-clamp-2\">\n        {escapeHtml(thread.body.slice(0, 150))}\n        {thread.body.length > 150 && '...'}\n      </p>\n      <div className=\"flex items-center justify-between text-xs text-gray-500\">\n        <span>{formatRelativeTime(thread.createdAt)}</span>\n        <span>Last bump: {formatRelativeTime(thread.bumpAt)}</span>\n      </div>\n    </div>;\n  return <div className=\"max-w-6xl mx-auto p-4\">\n      <div className=\"flex items-center justify-between mb-6\">\n        <div>\n          <h2 className=\"text-2xl font-bold text-white mb-1\">{board.name} - {board.description}</h2>\n          <p className=\"text-gray-400\">Anonymous Solana discourse</p>\n        </div>\n        <button onClick={() => setShowNewThread(true)} className=\"flex items-center gap-2 px-4 py-2 bg-gradient-to-r from-teal-500 to-purple-600 text-white rounded hover:from-teal-600 hover:to-purple-700\">\n          <Plus className=\"w-4 h-4\" />\n          New Thread\n        </button>\n      </div>\n      {showNewThread && <ThreadForm onSubmit={handleCreateThread} onCancel={() => setShowNewThread(false)} />}\n      <div className=\"flex flex-col md:flex-row gap-4 mb-6\">\n        <div className=\"flex-1 relative\">\n          <Search className=\"absolute left-3 top-3 w-4 h-4 text-gray-400\" />\n          <input ref={searchRef} type=\"text\" placeholder=\"Search threads...\" value={searchTerm} onChange={e => setSearchTerm(e.target.value)} className=\"w-full pl-10 pr-4 py-2 bg-gray-700 border border-gray-600 rounded focus:border-purple-500 focus:outline-none text-white\" />\n        </div>\n        <select value={sortBy} onChange={e => setSortBy(e.target.value)} className=\"px-4 py-2 bg-gray-700 border border-gray-600 rounded focus:border-purple-500 focus:outline-none text-white\">\n          <option value=\"bump\">Sort by Bump</option>\n          <option value=\"newest\">Sort by Newest</option>\n          <option value=\"replies\">Sort by Replies</option>\n        </select>\n        <select value={viewMode} onChange={e => setViewMode(e.target.value)} className=\"px-4 py-2 bg-gray-700 border border-gray-600 rounded focus:border-purple-500 focus:outline-none text-white\">\n          <option value=\"list\">List View</option>\n          <option value=\"catalog\">Catalog View</option>\n        </select>\n      </div>\n      <div className={viewMode === 'catalog' ? 'grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4' : 'space-y-4'}>\n        {filteredThreads.map(thread => <ThreadCard key={thread.id} thread={thread} />)}\n      </div>\n      {filteredThreads.length === 0 && <div className=\"text-center py-12 text-gray-400\">\n          {searchTerm ? 'No threads found matching your search.' : 'No threads yet. Start the conversation!'}\n        </div>}\n    </div>;\n};\nconst ThreadView = ({\n  threadId,\n  dataLayer,\n  onNavigate,\n  showToast\n}) => {\n  const [thread, setThread] = useState(null);\n  const [posts, setPosts] = useState([]);\n  const [loading, setLoading] = useState(true);\n  const [replyTo, setReplyTo] = useState(null);\n  useEffect(() => {\n    loadThread();\n  }, [threadId]);\n  const loadThread = async () => {\n    try {\n      const threadData = await dataLayer.getThread(threadId);\n      const postsData = await dataLayer.getPosts(threadId);\n      setThread(threadData);\n      setPosts(postsData);\n    } catch (error) {\n      showToast('Failed to load thread', 'error');\n    } finally {\n      setLoading(false);\n    }\n  };\n  const handleCreatePost = async (threadId, body, image, userName, replyToId) => {\n    try {\n      await dataLayer.createPost(threadId, body, image, userName, replyToId);\n      await loadThread();\n      setReplyTo(null);\n      showToast('Reply posted successfully!', 'success');\n    } catch (error) {\n      showToast('Failed to post reply', 'error');\n    }\n  };\n  const handleReplyToPost = post => {\n    setReplyTo(post);\n    document.querySelector('#reply-form')?.scrollIntoView({\n      behavior: 'smooth'\n    });\n  };\n  if (loading) {\n    return <div className=\"max-w-4xl mx-auto p-4\">\n        <div className=\"animate-pulse\">\n          <div className=\"h-8 bg-gray-700 rounded mb-4\"></div>\n          <div className=\"h-32 bg-gray-700 rounded\"></div>\n        </div>\n      </div>;\n  }\n  if (!thread) {\n    return <div className=\"max-w-4xl mx-auto p-4 text-center\">\n        <p className=\"text-gray-400\">Thread not found</p>\n        <button onClick={() => onNavigate('#/board/sol')} className=\"mt-4 px-4 py-2 bg-purple-600 text-white rounded hover:bg-purple-700\">\n          Back to Board\n        </button>\n      </div>;\n  }\n  const boardId = thread.boardId || 'sol';\n  const board = BOARDS[boardId] || BOARDS.sol;\n  return <div className=\"max-w-4xl mx-auto p-4\">\n      <div className=\"flex items-center gap-4 mb-6\">\n        <button onClick={() => onNavigate(`#/board/${boardId}`)} className=\"flex items-center gap-2 px-3 py-2 bg-gray-700 text-white rounded hover:bg-gray-600\">\n          <ArrowLeft className=\"w-4 h-4\" />\n          Back to {board.name}\n        </button>\n        <div className=\"flex items-center gap-2 text-sm text-gray-400\">\n          <MessageSquare className=\"w-4 h-4\" />\n          {thread.repliesCount} replies\n        </div>\n      </div>\n      <div className=\"bg-gray-800 rounded-lg p-6 mb-6\">\n        <div className=\"flex items-start justify-between mb-4\">\n          <h1 className=\"text-xl font-bold text-purple-400\">{escapeHtml(thread.title)}</h1>\n          <div className=\"flex items-center gap-2 text-sm text-gray-400\">\n            <Clock className=\"w-4 h-4\" />\n            {formatRelativeTime(thread.createdAt)}\n          </div>\n        </div>\n        {thread.image && <div className=\"mb-4\">\n            <img src={thread.image} alt=\"Thread image\" className=\"max-w-full max-h-96 object-contain rounded border border-gray-600\" />\n          </div>}\n        <div className=\"text-gray-300 whitespace-pre-wrap\">\n          {escapeHtml(thread.body)}\n        </div>\n      </div>\n      <div className=\"space-y-4 mb-6\">\n        {posts.map((post, index) => {\n        const replyToPost = post.replyToId ? posts.find(p => p.id === post.replyToId) : null;\n        return <div key={post.id} className=\"bg-gray-800 rounded-lg p-4\">\n              <div className=\"flex items-start justify-between mb-2\">\n                <div className=\"flex items-center gap-2\">\n                  <span className=\"text-sm text-purple-400 font-mono\">\n                    {post.userName || post.userId}\n                  </span>\n                  {post.userName && <span className=\"text-xs text-gray-500 font-mono\">({post.userId})</span>}\n                </div>\n                <div className=\"flex items-center gap-3\">\n                  <button onClick={() => handleReplyToPost(post)} className=\"text-xs text-gray-400 hover:text-purple-400 transition-colors\">\n                    Reply\n                  </button>\n                  <span className=\"text-sm text-gray-400\">{formatRelativeTime(post.createdAt)}</span>\n                </div>\n              </div>\n              \n              {replyToPost && <div className=\"mb-3 p-2 bg-gray-700 rounded border-l-2 border-purple-500\">\n                  <div className=\"text-xs text-purple-400 mb-1\">\n                    Replying to {replyToPost.userName || replyToPost.userId}\n                  </div>\n                  <div className=\"text-xs text-gray-400\">\n                    {escapeHtml(replyToPost.body.slice(0, 100))}\n                    {replyToPost.body.length > 100 && '...'}\n                  </div>\n                </div>}\n              \n              {post.image && <div className=\"mb-3\">\n                  <img src={post.image} alt=\"Reply image\" className=\"max-w-full max-h-64 object-contain rounded border border-gray-600\" />\n                </div>}\n              <div className=\"text-gray-300 whitespace-pre-wrap\">\n                {escapeHtml(post.body)}\n              </div>\n            </div>;\n      })}\n      </div>\n      <div id=\"reply-form\">\n        <ReplyForm threadId={threadId} onSubmit={handleCreatePost} replyTo={replyTo} onCancel={() => setReplyTo(null)} />\n      </div>\n    </div>;\n};\nconst Footer = () => <footer className=\"bg-gray-900 border-t border-gray-700 p-4 mt-12\">\n    <div className=\"max-w-6xl mx-auto text-center text-gray-400 text-sm\">\n      SolChan — an independent Solana-themed imageboard-style forum (text-only MVP)\n    </div>\n    <div className=\"max-w-6xl mx-auto text-center text-gray-500 text-xs mt-2\">\n      SolChan is not responsible for the contents users post. Do your own research.\n    </div>\n  </footer>;\nfunction App() {\n  const [route, setRoute] = useState(window.location.hash || '#/board/sol');\n  const [toast, setToast] = useState(null);\n  const [showAdminLogin, setShowAdminLogin] = useState(false);\n  const [showAdminPanel, setShowAdminPanel] = useState(false);\n  const [, setIsAdmin] = useState(false);\n  const {\n    devbaseClient\n  } = useDevapp();\n  const [dataLayer, setDataLayer] = useState(null);\n  useEffect(() => {\n    if (devbaseClient) {\n      setDataLayer(new DataLayer(devbaseClient));\n    }\n  }, [devbaseClient]);\n  useEffect(() => {\n    const handleHashChange = () => {\n      setRoute(window.location.hash || '#/board/sol');\n    };\n    window.addEventListener('hashchange', handleHashChange);\n    return () => window.removeEventListener('hashchange', handleHashChange);\n  }, []);\n  useEffect(() => {\n    const handleKeyPress = e => {\n      if (e.target.tagName === 'INPUT' || e.target.tagName === 'TEXTAREA') return;\n      if (e.key === '/') {\n        e.preventDefault();\n        const searchInput = document.querySelector('input[placeholder*=\"Search\"]');\n        if (searchInput) searchInput.focus();\n      } else if (e.key === 'n') {\n        e.preventDefault();\n        if (route.includes('/board/')) {\n          const newThreadBtn = document.querySelector('button:has(svg)');\n          if (newThreadBtn) newThreadBtn.click();\n        }\n      } else if (e.key === 'b') {\n        e.preventDefault();\n        navigate('#/board/sol');\n      }\n    };\n    document.addEventListener('keydown', handleKeyPress);\n    return () => document.removeEventListener('keydown', handleKeyPress);\n  }, [route]);\n  if (!dataLayer) {\n    return <div className=\"min-h-screen bg-gray-900 text-white flex items-center justify-center\">\n      <div className=\"text-center\">\n        <div className=\"animate-spin rounded-full h-12 w-12 border-b-2 border-purple-500 mx-auto mb-4\"></div>\n        <p className=\"text-gray-400\">Loading SolChan...</p>\n      </div>\n    </div>;\n  }\n  const navigate = newRoute => {\n    window.location.hash = newRoute;\n    setRoute(newRoute);\n  };\n  const showToast = (message, type) => {\n    setToast({\n      message,\n      type\n    });\n    setTimeout(() => setToast(null), 3000);\n  };\n  const handleAdminClick = () => {\n    setShowAdminLogin(true);\n  };\n  const handleAdminLogin = async password => {\n    if (!dataLayer) return false;\n    try {\n      const isValid = await dataLayer.validateAdminPassword(password);\n      if (isValid) {\n        setIsAdmin(true);\n        setShowAdminPanel(true);\n        return true;\n      }\n      return false;\n    } catch (error) {\n      console.error('Admin login error:', error);\n      return false;\n    }\n  };\n  const renderRoute = () => {\n    if (route.startsWith('#/thread/')) {\n      const threadId = route.split('/')[2];\n      return <ThreadView threadId={threadId} dataLayer={dataLayer} onNavigate={navigate} showToast={showToast} />;\n    }\n    if (route.startsWith('#/board/')) {\n      const boardId = route.split('/')[2] || 'sol';\n      return <BoardView boardId={boardId} dataLayer={dataLayer} onNavigate={navigate} showToast={showToast} />;\n    }\n    return <BoardView boardId=\"sol\" dataLayer={dataLayer} onNavigate={navigate} showToast={showToast} />;\n  };\n  return <div className=\"min-h-screen bg-gray-900 text-white\">\n      <Header currentRoute={route} onNavigate={navigate} onAdminClick={handleAdminClick} />\n      <div className=\"bg-gradient-to-r from-teal-600 to-purple-600 p-2\">\n        <div className=\"max-w-6xl mx-auto text-center\">\n          <div className=\"flex items-center justify-center gap-4 flex-wrap\">\n            <div className=\"text-white text-sm font-mono hover:bg-black hover:bg-opacity-20 px-3 py-1 rounded transition-colors\" title=\"Contract address\">\n              CA: 8J88RnS93tu61zRF66WJNsBjdDV1KErwDRcSeqqWpump\n            </div>\n            <a href=\"https://x.com/SolChandotfun\" target=\"_blank\" rel=\"noopener noreferrer\" className=\"text-white text-sm hover:bg-black hover:bg-opacity-20 px-3 py-1 rounded transition-colors underline\">\n              Follow @SolChandotfun\n            </a>\n          </div>\n        </div>\n      </div>\n      <main className=\"min-h-screen\">\n        {renderRoute()}\n      </main>\n      <Footer />\n      {toast && <Toast message={toast.message} type={toast.type} onClose={() => setToast(null)} />}\n      <AdminLoginModal isOpen={showAdminLogin} onClose={() => setShowAdminLogin(false)} onLogin={handleAdminLogin} />\n      <AdminControlPanel isOpen={showAdminPanel} onClose={() => setShowAdminPanel(false)} dataLayer={dataLayer} showToast={showToast} />\n    </div>;\n}\nexport default function AppWithProvider() {\n  return <DevappProvider rpcEndpoint=\"https://rpc.dev.fun/105a4814c8ac1d98f456\" devbaseEndpoint=\"https://devbase.dev.fun\" appId=\"105a4814c8ac1d98f456\">\n      <App />\n    </DevappProvider>;\n}","packageJson","{\"dependencies\":{\"react\":\"18.2.0\",\"lucide-react\":\"0.441.0\",\"@devfunlabs/web-sdk\":\"0.5.6\"}}","appFunctions",[81,89,95],{"_14":82,"_37":83,"_39":84,"_20":85,"_86":87,"_88":42},["B","16069"],["D",1757022848376],["D",1757022848376],"$FUNC_CAN_USER_POST","body","async function $FUNC_CAN_USER_POST() {\n      const clientIP = $newData.clientIP || \"unknown\";\n      const isBlocked = await $ENTITY('blocked_users').exists({ ipAddress: clientIP });\n      return !isBlocked;\n    }","commitId",{"_14":90,"_37":91,"_39":92,"_20":93,"_86":94,"_88":42},["B","16070"],["D",1757022848385],["D",1757022848385],"$FUNC_IS_ADMIN","async function $FUNC_IS_ADMIN() {\n      return $USER_ID === $OWNER_ID;\n    }",{"_14":96,"_37":97,"_39":98,"_20":99,"_86":100,"_88":42},["B","16071"],["D",1757022848387],["D",1757022848387],"$FUNC_VALIDATE_ADMIN_PASSWORD","async function $FUNC_VALIDATE_ADMIN_PASSWORD(password) {\n      return password === $SECRETS.ADMIN_PASSWORD;\n    }","token","upstreamApp","isLordOfDev","analytics",[106,110,112,114,116,118,120,122,124,126,128,130,132,134,136,138,140],{"_107":108,"_109":61},"day","2025-08-23","runCount",{"_107":111,"_109":61},"2025-08-24",{"_107":113,"_109":61},"2025-08-25",{"_107":115,"_109":61},"2025-08-26",{"_107":117,"_109":61},"2025-08-27",{"_107":119,"_109":61},"2025-08-28",{"_107":121,"_109":61},"2025-08-29",{"_107":123,"_109":61},"2025-08-30",{"_107":125,"_109":61},"2025-08-31",{"_107":127,"_109":61},"2025-09-01",{"_107":129,"_109":61},"2025-09-02",{"_107":131,"_109":61},"2025-09-03",{"_107":133,"_109":61},"2025-09-04",{"_107":135,"_109":61},"2025-09-05",{"_107":133,"_109":137},1759,{"_107":135,"_109":139},160,{"_107":141,"_109":142},"2025-09-06",12,"snapshot","ogImage","https://cdn.dev.fun/og/image/105a4814c8ac1d98f456/b7f20175.webp","isDevbase","project",{"_14":19,"_149":-5,"_20":150,"_151":-5,"_22":-5},"image","project-zqu97","oneliner","commitDetail","livestream","actionData","errors"]
</article></body></html>