[{"_1":2,"_147":-5,"_148":-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,"_145":-5,"_137":-7,"_146":17},"appDetail",{"_14":15,"_16":17,"_18":19,"_20":21,"_22":23,"_24":25,"_26":27,"_28":27,"_29":30,"_31":32,"_33":34,"_35":36,"_37":38,"_39":40,"_41":42,"_43":44,"_5":45,"_56":57,"_58":59,"_60":59,"_61":62,"_63":59,"_64":65,"_66":42,"_67":68,"_69":59,"_70":59,"_71":17,"_72":27,"_73":19,"_74":75,"_76":77,"_78":79,"_80":81,"_103":-5,"_104":17,"_105":106,"_137":32,"_138":139,"_140":17,"_141":142},"id","d975207602694eb998d2","isMyApp",false,"projectId","3HfLqhtF5hR5dyBXh6BMtRaTm9qzStvEGuMa8Gx6pump","name","HODLroom","description","Unlock exclusive Solana communities with just a wallet connection! TokenGate creates hyper-private messaging spaces where your SPL tokens are the VIP pass, verifying your status in real-time while you chat, share, and connect with fellow token holders.","brief","Chat in exclusive Solana communities where your SPL tokens are the only key needed!","isLive",true,"isPublic","tags",[],"cover","https://cdn.dev.fun/snapshot/d975207602694eb998d2/77579_8d9abd37.webp","cdnUrl","https://cdn.dev.fun/app/d975207602694eb998d2/77579","createdAt",["D",1749145774783],"updatedAt",["D",1749500653831],"lastCommitId",["B","77579"],"tier",1,"credits",-4,{"_14":46,"_47":48,"_49":-5,"_50":48,"_51":52,"_53":-5,"_54":55},"e2b32bfa-27cf-4edb-99a1-b74df1dcf9d0","uniqueId","BfUMVQZU8sxpnhYyBCQYC6rwW3e9bevdZL2BWyT3TkrS","username","solanaWallet","displayName","BfU...krS","bio","avatar","/avatar.svg","commitCount",42,"forkCount",0,"likeCount","runsCount",138,"downvoteCount","upvoteCount",5,"upvoteRate","commentCount",9,"reportCount","visitorCount","isArchived","isRenamed","contractAddress","code","import { useState, useEffect, useCallback, useRef, useMemo } from 'react';\nimport { ConnectionProvider, WalletProvider, useWallet, useConnection } from '@solana/wallet-adapter-react';\nimport { WalletModalProvider, WalletMultiButton } from '@solana/wallet-adapter-react-ui';\nimport { PhantomWalletAdapter, SolflareWalletAdapter } from '@solana/wallet-adapter-wallets';\nimport { PublicKey } from '@solana/web3.js';\nimport { io } from 'socket.io-client';\nimport bs58 from 'bs58';\nimport { getCookie, setCookie, deleteCookie } from 'cookies-next';\nimport \"@solana/wallet-adapter-react-ui/styles.css\";\nimport { Shield, MessageSquare, Plus, Send, Users, AlertCircle, LogOut, Key, RefreshCw } from 'lucide-react';\nimport { QueryClient, QueryClientProvider, useQuery, useMutation, useQueryClient } from '@tanstack/react-query';\nimport axios from 'axios';\nimport { Toaster, toast } from 'sonner';\nconst walletButtonStyle = {\n backgroundColor: \"black\",\n color: \"white\",\n borderRadius: \"4px\",\n padding: \"12px 16px\",\n border: \"1px solid white\",\n fontSize: \"14px\"\n};\nconst socket = io('wss://ws.dev.fun/app-d975207602694eb998d2');\nconst queryClient = new QueryClient({\n defaultOptions: {\n queries: {\n retry: 3,\n staleTime: 5 * 60 * 1000,\n cacheTime: 10 * 60 * 1000\n }\n }\n});\nconst API_BASE_URL = \"https://hodl-room-backed-production.up.railway.app/api\";\nconst TOKEN_API_BASE_URL = \"https://hodl-room-backed-production.up.railway.app\";\nconst isValidSolanaAddress = address => {\n const solanaAddressRegex = /^[1-9A-HJ-NP-Za-km-z]{32,44}$/;\n return solanaAddressRegex.test(address);\n};\nconst getBatchTokenMetadata = async addresses => {\n const response = await axios.post(`${TOKEN_API_BASE_URL}/tokens/batch-metadata`, {\n addresses\n });\n return response.data;\n};\nconst useAuth = () => {\n const {\n publicKey,\n signMessage,\n connected,\n disconnect\n } = useWallet();\n const [isAuthenticating, setIsAuthenticating] = useState(false);\n const queryClient = useQueryClient();\n const authAttemptRef = useRef(null);\n const isProcessingRef = useRef(false);\n const getStoredToken = () => {\n if (!publicKey) return null;\n return getCookie(`hodl_room_token_${publicKey.toString()}`);\n };\n const {\n data: user,\n refetch: refetchUser\n } = useQuery({\n queryKey: [\"user\", publicKey?.toString()],\n queryFn: async () => {\n const token = getStoredToken();\n if (!token) throw new Error(\"No token available\");\n const response = await axios.get(`${API_BASE_URL}/auth/me`, {\n headers: {\n Authorization: `Bearer ${token}`\n }\n });\n return response.data.user;\n },\n enabled: !!publicKey && !!getStoredToken(),\n retry: false\n });\n const getMessageToSign = async walletAddress => {\n const response = await axios.get(`${API_BASE_URL}/auth/message/${walletAddress}`);\n return response.data;\n };\n const signMessageWithWallet = async message => {\n if (!signMessage) {\n throw new Error(\"Wallet does not support message signing\");\n }\n const messageBytes = new TextEncoder().encode(message);\n const signature = await signMessage(messageBytes);\n return bs58.encode(signature);\n };\n const authenticateWithBackend = async (walletAddress, message, signature) => {\n const response = await axios.post(`${API_BASE_URL}/auth/login`, {\n walletAddress,\n message,\n signature\n });\n return response.data;\n };\n const authenticate = async () => {\n if (!publicKey || typeof signMessage !== 'function') {\n toast.error(\"Please connect your wallet first\");\n return;\n }\n const walletAddress = publicKey.toBase58();\n if (isAuthenticated) {\n console.log(\"Already authenticated, skipping...\");\n return;\n }\n if (isProcessingRef.current || authAttemptRef.current === walletAddress) {\n console.log(\"Authentication in progress, but continuing anyway...\");\n }\n authAttemptRef.current = walletAddress;\n isProcessingRef.current = true;\n setIsAuthenticating(true);\n console.log(\"=== STARTING AUTHENTICATION PROCESS ===\");\n console.log(\"Starting authentication for wallet:\", walletAddress);\n try {\n console.log(\"Getting message to sign...\");\n const {\n message\n } = await getMessageToSign(walletAddress);\n console.log(\"Signing message...\");\n const signature = await signMessageWithWallet(message);\n console.log(\"Authenticating with backend...\");\n const authResponse = await authenticateWithBackend(walletAddress, message, signature);\n console.log(\"Storing authentication token...\");\n setCookie(`hodl_room_token_${walletAddress}`, authResponse.token, {\n maxAge: 60 * 60 * 24 * 7,\n sameSite: \"lax\",\n secure: process.env.NODE_ENV === \"production\"\n });\n await refetchUser();\n console.log(\"Authentication successful!\");\n toast.success(\"Authentication successful!\");\n hasAttemptedAuthRef.current = true;\n return authResponse;\n } catch (err) {\n console.error(\"Authentication failed:\", err);\n let errorMessage = \"Authentication failed\";\n if (err.response?.data?.details) {\n errorMessage = err.response.data.details;\n } else if (err.response?.data?.error) {\n errorMessage = err.response.data.error;\n } else if (err.message) {\n errorMessage = err.message;\n }\n toast.error(errorMessage);\n throw err;\n } finally {\n setTimeout(() => {\n authAttemptRef.current = null;\n isProcessingRef.current = false;\n setIsAuthenticating(false);\n console.log(\"=== AUTHENTICATION PROCESS COMPLETED ===\");\n }, 500);\n }\n };\n const logout = () => {\n if (publicKey) {\n deleteCookie(`hodl_room_token_${publicKey.toString()}`);\n }\n queryClient.removeQueries({\n queryKey: [\"user\"]\n });\n authAttemptRef.current = null;\n isProcessingRef.current = false;\n setTimeout(() => {\n disconnect();\n toast.success(\"Logged out successfully\");\n }, 100);\n };\n const isAuthenticated = !!user && !!getStoredToken();\n const hasAttemptedAuthRef = useRef(false);\n useEffect(() => {\n if (!connected || !publicKey || typeof signMessage !== 'function') {\n return;\n }\n if (isAuthenticated) {\n return;\n }\n hasAttemptedAuthRef.current = false;\n const walletAddress = publicKey.toBase58();\n if (isProcessingRef.current || authAttemptRef.current === walletAddress) {\n console.log(\"Skipping auth - already processing wallet:\", walletAddress);\n return;\n }\n console.log(\"Authentication check for wallet:\", walletAddress);\n hasAttemptedAuthRef.current = true;\n const existingToken = getStoredToken();\n if (existingToken) {\n console.log(\"Found existing token for wallet:\", walletAddress);\n refetchUser().then(() => {\n console.log(\"User validated successfully with existing token\");\n authAttemptRef.current = null;\n isProcessingRef.current = false;\n }).catch(error => {\n console.log(\"Token validation failed:\", error.message);\n deleteCookie(`hodl_room_token_${walletAddress}`);\n if (!isProcessingRef.current && authAttemptRef.current !== walletAddress) {\n authAttemptRef.current = walletAddress;\n isProcessingRef.current = true;\n console.log(\"Will attempt authentication once\");\n setTimeout(() => authenticate(), 500);\n }\n });\n } else {\n console.log(\"No token found for wallet:\", walletAddress);\n if (!isProcessingRef.current && authAttemptRef.current !== walletAddress) {\n authAttemptRef.current = walletAddress;\n isProcessingRef.current = true;\n console.log(\"Will attempt authentication once\");\n setTimeout(() => authenticate(), 500);\n }\n }\n }, [connected, publicKey?.toString(), isAuthenticated]);\n const {\n mutate: refreshToken\n } = useMutation({\n mutationFn: async () => {\n const token = getStoredToken();\n if (!token) throw new Error(\"No token to refresh\");\n const response = await axios.post(`${API_BASE_URL}/auth/refresh`, {}, {\n headers: {\n Authorization: `Bearer ${token}`\n }\n });\n return response.data;\n },\n onSuccess: data => {\n if (publicKey) {\n setCookie(`hodl_room_token_${publicKey.toString()}`, data.token, {\n maxAge: 60 * 60 * 24 * 7,\n sameSite: \"lax\",\n secure: process.env.NODE_ENV === \"production\"\n });\n }\n toast.success(\"Token refreshed successfully\");\n },\n onError: error => {\n console.error(\"Token refresh failed:\", error);\n toast.error(\"Session expired, please authenticate again\");\n logout();\n }\n });\n const makeAuthenticatedRequest = async (url, options = {}) => {\n const token = getStoredToken();\n if (!token) {\n throw new Error(\"Not authenticated\");\n }\n const headers = {\n ...options.headers,\n Authorization: `Bearer ${token}`\n };\n if (options.data || options.method === \"POST\" || options.method === \"PUT\") {\n headers[\"Content-Type\"] = \"application/json\";\n }\n try {\n return await axios({\n ...options,\n url: `${API_BASE_URL}${url}`,\n headers\n });\n } catch (error) {\n if (error.response?.status === 401 && error.response?.data?.error === \"Token expired\") {\n refreshToken();\n throw error;\n }\n throw error;\n }\n };\n return {\n user,\n token: getStoredToken(),\n isAuthenticated: !!user && !!getStoredToken(),\n isAuthenticating,\n authenticate,\n logout,\n refreshToken,\n makeAuthenticatedRequest,\n refetchUser\n };\n};\nconst useGroups = () => {\n const {\n makeAuthenticatedRequest,\n isAuthenticated\n } = useAuth();\n const queryClient = useQueryClient();\n const usePublicGroups = (page = 1, limit = 20) => {\n return useQuery({\n queryKey: [\"groups\", \"public\", page, limit],\n queryFn: async () => {\n try {\n const response = await makeAuthenticatedRequest(`/groups?page=${page}&limit=${limit}`);\n return response.data;\n } catch (error) {\n console.error(\"Error fetching groups:\", error?.response?.data || error.message);\n throw error;\n }\n },\n staleTime: 30000,\n retry: 3,\n retryDelay: attemptIndex => Math.min(1000 * 2 ** attemptIndex, 10000),\n enabled: !!isAuthenticated\n });\n };\n const useMyGroups = () => {\n return useQuery({\n queryKey: [\"groups\", \"my\"],\n queryFn: async () => {\n const response = await makeAuthenticatedRequest(\"/groups/my/groups\");\n return response.data;\n },\n staleTime: 60000\n });\n };\n const useGroup = groupId => {\n return useQuery({\n queryKey: [\"groups\", groupId],\n queryFn: async () => {\n const response = await makeAuthenticatedRequest(`/groups/${groupId}`);\n return response.data;\n },\n enabled: !!groupId,\n staleTime: 30000\n });\n };\n const useGroupMembers = groupId => {\n return useQuery({\n queryKey: [\"groups\", groupId, \"members\"],\n queryFn: async () => {\n const response = await makeAuthenticatedRequest(`/groups/${groupId}/members`);\n return response.data;\n },\n enabled: !!groupId,\n staleTime: 60000\n });\n };\n const useCreateGroup = () => {\n return useMutation({\n mutationFn: async data => {\n const response = await makeAuthenticatedRequest(\"/groups\", {\n method: \"POST\",\n data\n });\n return response.data;\n },\n onSuccess: data => {\n queryClient.invalidateQueries({\n queryKey: [\"groups\"]\n });\n toast.success(`Group \"${data.group.name}\" created successfully!`);\n },\n onError: error => {\n const message = error.response?.data?.error || \"Failed to create group\";\n toast.error(message);\n }\n });\n };\n const useJoinGroup = () => {\n return useMutation({\n mutationFn: async groupId => {\n const response = await makeAuthenticatedRequest(`/groups/${groupId}/join`, {\n method: \"POST\"\n });\n return response.data;\n },\n onSuccess: (data, groupId) => {\n queryClient.invalidateQueries({\n queryKey: [\"groups\"]\n });\n queryClient.invalidateQueries({\n queryKey: [\"groups\", groupId]\n });\n toast.success(\"Successfully joined group!\");\n },\n onError: error => {\n const message = error.response?.data?.error || \"Failed to join group\";\n toast.error(message);\n }\n });\n };\n const useLeaveGroup = () => {\n return useMutation({\n mutationFn: async groupId => {\n const response = await makeAuthenticatedRequest(`/groups/${groupId}/leave`, {\n method: \"POST\"\n });\n return response.data;\n },\n onSuccess: (data, groupId) => {\n queryClient.invalidateQueries({\n queryKey: [\"groups\"]\n });\n queryClient.invalidateQueries({\n queryKey: [\"groups\", groupId]\n });\n toast.success(\"Successfully left group\");\n },\n onError: error => {\n const message = error.response?.data?.error || \"Failed to leave group\";\n toast.error(message);\n }\n });\n };\n const useUpdateGroup = () => {\n return useMutation({\n mutationFn: async ({\n groupId,\n data\n }) => {\n const response = await makeAuthenticatedRequest(`/groups/${groupId}`, {\n method: \"PUT\",\n data\n });\n return response.data;\n },\n onSuccess: (data, variables) => {\n queryClient.invalidateQueries({\n queryKey: [\"groups\"]\n });\n queryClient.invalidateQueries({\n queryKey: [\"groups\", variables.groupId]\n });\n toast.success(\"Group updated successfully!\");\n },\n onError: error => {\n const message = error.response?.data?.error || \"Failed to update group\";\n toast.error(message);\n }\n });\n };\n return {\n usePublicGroups,\n useMyGroups,\n useGroup,\n useGroupMembers,\n useCreateGroup,\n useJoinGroup,\n useLeaveGroup,\n useUpdateGroup\n };\n};\nconst formatTokenAmount = amount => {\n try {\n if (!amount || amount === \"0\") {\n return \"0\";\n }\n const amountBigInt = BigInt(amount);\n if (amountBigInt < BigInt(1000000)) {\n return amountBigInt.toString();\n }\n const tryDecimals = [18, 6, 8, 9];\n for (const tryDecimal of tryDecimals) {\n const divisor = BigInt(10 ** tryDecimal);\n const quotient = amountBigInt / divisor;\n const remainder = amountBigInt % divisor;\n if (quotient > BigInt(0) && quotient < BigInt(1000000)) {\n if (remainder === BigInt(0)) {\n return quotient.toString();\n }\n const remainderStr = remainder.toString().padStart(tryDecimal, \"0\");\n const trimmedRemainder = remainderStr.replace(/0+$/, \"\").slice(0, 4);\n if (trimmedRemainder === \"\") {\n return quotient.toString();\n }\n return `${quotient}.${trimmedRemainder}`;\n }\n }\n return amountBigInt.toString();\n } catch (error) {\n console.warn(\"Error formatting token amount:\", error);\n return amount;\n }\n};\nconst truncateWalletAddress = address => {\n if (!address) return \"\";\n if (address.length <= 8) return address;\n return `${address.slice(0, 4)}...${address.slice(-4)}`;\n};\nconst useMessages = () => {\n const {\n makeAuthenticatedRequest\n } = useAuth();\n const queryClient = useQueryClient();\n const useGroupMessages = (groupId, page = 1, limit = 50) => {\n return useQuery({\n queryKey: [\"messages\", groupId, page, limit],\n queryFn: async () => {\n const queryParams = new URLSearchParams({\n page: page.toString(),\n limit: limit.toString()\n });\n const response = await makeAuthenticatedRequest(`/messages/${groupId}?${queryParams.toString()}`, {\n method: \"GET\"\n });\n return response.data;\n },\n enabled: !!groupId,\n staleTime: 30000,\n refetchInterval: 10000\n });\n };\n const useSendMessage = () => {\n return useMutation({\n mutationFn: async ({\n groupId,\n data\n }) => {\n const response = await makeAuthenticatedRequest(`/messages/${groupId}`, {\n method: \"POST\",\n data\n });\n return response.data;\n },\n onSuccess: (data, variables) => {\n queryClient.invalidateQueries({\n queryKey: [\"messages\", variables.groupId]\n });\n toast.success(\"Message sent!\");\n },\n onError: error => {\n console.error(\"Send message error:\", error);\n const message = error.response?.data?.error || \"Failed to send message\";\n const details = error.response?.data?.details;\n if (details) {\n toast.error(`${message}: ${details}`);\n } else {\n toast.error(message);\n }\n }\n });\n };\n const useUpdateMessage = () => {\n return useMutation({\n mutationFn: async ({\n messageId,\n content\n }) => {\n const response = await makeAuthenticatedRequest(`/messages/${messageId}`, {\n method: \"PUT\",\n data: {\n content\n }\n });\n return response.data;\n },\n onSuccess: () => {\n queryClient.invalidateQueries({\n queryKey: [\"messages\"]\n });\n toast.success(\"Message updated!\");\n },\n onError: error => {\n console.error(\"Update message error:\", error);\n const message = error.response?.data?.error || \"Failed to update message\";\n const details = error.response?.data?.details;\n if (details) {\n toast.error(`${message}: ${details}`);\n } else {\n toast.error(message);\n }\n }\n });\n };\n const useDeleteMessage = () => {\n return useMutation({\n mutationFn: async messageId => {\n const response = await makeAuthenticatedRequest(`/messages/${messageId}`, {\n method: \"DELETE\"\n });\n return response.data;\n },\n onSuccess: () => {\n queryClient.invalidateQueries({\n queryKey: [\"messages\"]\n });\n toast.success(\"Message deleted\");\n },\n onError: error => {\n console.error(\"Delete message error:\", error);\n const message = error.response?.data?.error || \"Failed to delete message\";\n const details = error.response?.data?.details;\n if (details) {\n toast.error(`${message}: ${details}`);\n } else {\n toast.error(message);\n }\n }\n });\n };\n return {\n useGroupMessages,\n useSendMessage,\n useUpdateMessage,\n useDeleteMessage\n };\n};\nconst useSocket = () => {\n const {\n user,\n token\n } = useAuth();\n const [socket, setSocket] = useState(null);\n const [isConnected, setIsConnected] = useState(false);\n const [error, setError] = useState(null);\n const socketRef = useRef(null);\n useEffect(() => {\n if (!user || !token) {\n console.log(\"❌ Cannot create socket - missing auth:\", {\n hasUser: !!user,\n hasToken: !!token,\n user: user ? {\n id: user.id,\n username: user.username\n } : null\n });\n if (socketRef.current) {\n socketRef.current.disconnect();\n socketRef.current = null;\n setSocket(null);\n setIsConnected(false);\n }\n return;\n }\n const setupSocket = async () => {\n const backendUrl = process.env.NEXT_PUBLIC_BACKEND_URL || \"https://hodl-room-backed-production.up.railway.app\";\n console.log(\"🧪 Testing backend connectivity before socket connection...\");\n try {\n const testResponse = await fetch(`${backendUrl}/health`);\n const testData = await testResponse.json();\n console.log(\"✅ Backend health check passed:\", testData);\n } catch (healthError) {\n console.warn(\"⚠️ Backend health check failed:\", healthError);\n }\n console.log(\"🔌 Creating socket connection:\", {\n backendUrl,\n userId: user.id,\n username: user.username,\n hasToken: !!token,\n tokenPreview: token ? `${token.substring(0, 10)}...${token.substring(token.length - 10)}` : \"missing\",\n tokenLength: token ? token.length : 0\n });\n const newSocket = io(backendUrl, {\n auth: {\n token\n },\n transports: [\"websocket\", \"polling\"],\n autoConnect: true,\n forceNew: true,\n reconnection: true,\n reconnectionAttempts: 5,\n reconnectionDelay: 1000\n });\n console.log(\"📡 Socket created with config:\", {\n socketId: newSocket.id,\n auth: {\n hasToken: !!token\n },\n transports: [\"websocket\", \"polling\"],\n autoConnect: true\n });\n socketRef.current = newSocket;\n setSocket(newSocket);\n newSocket.on(\"connect\", () => {\n console.log(\"✅ Connected to WebSocket\", {\n socketId: newSocket.id,\n userId: user.id,\n username: user.username\n });\n setIsConnected(true);\n setError(null);\n });\n newSocket.on(\"disconnect\", reason => {\n console.log(\"❌ Disconnected from WebSocket:\", reason);\n setIsConnected(false);\n });\n newSocket.on(\"connect_error\", err => {\n console.error(\"❌ Connection error:\", {\n error: err.message,\n errorType: err.type,\n errorDescription: err.description,\n userId: user?.id,\n token: token ? `${token.substring(0, 20)}...` : \"missing\",\n tokenLength: token ? token.length : 0,\n backendUrl: process.env.NEXT_PUBLIC_BACKEND_URL,\n socketId: newSocket.id,\n timestamp: new Date().toISOString()\n });\n setError(\"Failed to connect to chat server\");\n setIsConnected(false);\n toast.error(`Connection failed: ${err.message}`);\n });\n newSocket.on(\"error\", data => {\n console.error(\"❌ Socket error:\", data);\n setError(data.message);\n toast.error(data.message);\n });\n newSocket.on(\"force-disconnect\", data => {\n console.warn(\"⚠️ Force disconnected:\", data.reason);\n toast.warning(`Disconnected: ${data.reason}`);\n });\n };\n setupSocket();\n return () => {\n if (socketRef.current) {\n socketRef.current.off();\n socketRef.current.disconnect();\n socketRef.current = null;\n }\n };\n }, [user, token]);\n const joinGroup = useCallback(groupId => {\n console.log(\"📥 Attempting to join group:\", {\n groupId,\n hasSocket: !!socketRef.current,\n isConnected,\n socketId: socketRef.current?.id\n });\n if (socketRef.current && isConnected) {\n socketRef.current.emit(\"join-group\", {\n groupId\n });\n }\n }, [isConnected]);\n const leaveGroup = useCallback(groupId => {\n if (socketRef.current && isConnected) {\n socketRef.current.emit(\"leave-group\", {\n groupId\n });\n }\n }, [isConnected]);\n const startTyping = useCallback(groupId => {\n if (socketRef.current && isConnected) {\n socketRef.current.emit(\"typing-start\", {\n groupId\n });\n }\n }, [isConnected]);\n const stopTyping = useCallback(groupId => {\n if (socketRef.current && isConnected) {\n socketRef.current.emit(\"typing-stop\", {\n groupId\n });\n }\n }, [isConnected]);\n return {\n socket,\n isConnected,\n error,\n joinGroup,\n leaveGroup,\n startTyping,\n stopTyping\n };\n};\nconst useSocketGroup = groupId => {\n const {\n socket,\n isConnected\n } = useSocket();\n const [messages, setMessages] = useState([]);\n const [error, setError] = useState(null);\n const [typingUsers, setTypingUsers] = useState([]);\n const [hasInsufficientTokens, setHasInsufficientTokens] = useState(false);\n useEffect(() => {\n if (!socket || !groupId) return;\n const handleGroupJoined = data => {\n console.log(\"✅ Joined group:\", data.groupName);\n setError(null);\n setHasInsufficientTokens(false);\n };\n const handleGroupAccessDenied = data => {\n console.error(\"❌ Access denied to group:\", data.error);\n setError(data.error);\n setHasInsufficientTokens(true);\n toast.error(data.error);\n };\n const handleNewMessage = message => {\n console.log(\"📩 New message received:\", message);\n setMessages(prev => [...prev, message]);\n };\n const handleMessageUpdated = updatedMessage => {\n console.log(\"✏️ Message updated:\", updatedMessage);\n setMessages(prev => prev.map(msg => msg.id === updatedMessage.id ? updatedMessage : msg));\n };\n const handleMessageDeleted = data => {\n console.log(\"🗑️ Message deleted:\", data.messageId);\n setMessages(prev => prev.filter(msg => msg.id !== data.messageId));\n };\n const handleUserTyping = data => {\n console.log(\"⌨️ User typing:\", data);\n setTypingUsers(prev => {\n const filtered = prev.filter(user => user.userId !== data.userId);\n return data.isTyping ? [...filtered, data] : filtered;\n });\n };\n const handleUserJoinedGroup = data => {\n console.log(\"👋 User joined group:\", data.username);\n toast.success(`${data.username} joined the group`);\n };\n socket.on(\"group-joined\", handleGroupJoined);\n socket.on(\"group-access-denied\", handleGroupAccessDenied);\n socket.on(\"new-message\", handleNewMessage);\n socket.on(\"message-updated\", handleMessageUpdated);\n socket.on(\"message-deleted\", handleMessageDeleted);\n socket.on(\"user-typing\", handleUserTyping);\n socket.on(\"user-joined-group\", handleUserJoinedGroup);\n return () => {\n socket.off(\"group-joined\", handleGroupJoined);\n socket.off(\"group-access-denied\", handleGroupAccessDenied);\n socket.off(\"new-message\", handleNewMessage);\n socket.off(\"message-updated\", handleMessageUpdated);\n socket.off(\"message-deleted\", handleMessageDeleted);\n socket.off(\"user-typing\", handleUserTyping);\n socket.off(\"user-joined-group\", handleUserJoinedGroup);\n };\n }, [socket, groupId]);\n return {\n messages,\n isConnected,\n error,\n typingUsers,\n hasInsufficientTokens\n };\n};\nconst MessageBubble = ({\n message,\n isOwn,\n currentUserId,\n onReply,\n onEdit,\n onDelete\n}) => {\n const [showActions, setShowActions] = useState(false);\n const formatTime = dateString => {\n const date = new Date(dateString);\n return date.toLocaleTimeString([], {\n hour: \"2-digit\",\n minute: \"2-digit\"\n });\n };\n const canEdit = message.userId === currentUserId;\n const canDelete = message.userId === currentUserId;\n return

\n {!isOwn &&

\n {message.user.avatar ?

\n {message.user.walletAddress ? message.user.walletAddress.charAt(0).toUpperCase() : \"?\"}\n

}\n \n {message.user.username || truncateWalletAddress(message.user.walletAddress)}\n \n

}\n\n {message.replyTo &&

\n @{message.replyTo.user.username}\n

\n {message.replyTo.content}\n

}\n\n

setShowActions(true)} onMouseLeave={() => setShowActions(false)}>\n

{message.content}

\n\n

\n {formatTime(message.createdAt)}\n {message.isEdited && (edited)}\n

\n\n {showActions &&

\n \n {canEdit && }\n {canDelete && }\n

}\n

;\n};\nconst TypingIndicator = ({\n typingUsers\n}) => {\n if (typingUsers.length === 0) return null;\n const names = typingUsers.map(user => user.username);\n const text = names.length === 1 ? `${names[0]} is typing...` : names.length === 2 ? `${names[0]} and ${names[1]} are typing...` : `${names.slice(0, 2).join(\", \")} and ${names.length - 2} others are typing...`;\n return

\n {text}\n

;\n};\nconst InsufficientTokenBalanceView = ({\n group,\n onBack\n}) => {\n return

\n {}\n

\n \n\n {group.avatar ?

\n {group.name.charAt(0).toUpperCase()}\n

}\n\n

{group.name}

{group.memberCount} members

\n\n {}\n

\n \n

\n\n

\n Insufficient Token Balance\n

\n\n

\n You need at least{\" \"}\n \n {formatTokenAmount(group.minTokenAmount)}\n {\" \"}\n tokens to view messages in this group.\n

\n\n

\n Token Address:\n
\n \n {group.tokenAddress}\n \n

\n\n

\n Purchase the required tokens to gain access to this group's\n chat.\n

;\n};\nconst GroupChat = ({\n group,\n onBack\n}) => {\n const {\n user\n } = useAuth();\n const {\n useGroupMessages,\n useSendMessage,\n useUpdateMessage,\n useDeleteMessage\n } = useMessages();\n const {\n joinGroup,\n leaveGroup,\n startTyping,\n stopTyping,\n isConnected: socketConnected\n } = useSocket();\n const {\n messages: socketMessages,\n typingUsers,\n hasInsufficientTokens,\n isConnected\n } = useSocketGroup(group.id);\n const [newMessage, setNewMessage] = useState(\"\");\n const [replyTo, setReplyTo] = useState(null);\n const [editingMessage, setEditingMessage] = useState(null);\n const [editContent, setEditContent] = useState(\"\");\n const [isTyping, setIsTyping] = useState(false);\n const messagesEndRef = useRef(null);\n const typingTimeoutRef = useRef(null);\n const {\n data: messagesData,\n isLoading,\n error: httpError,\n refetch\n } = useGroupMessages(group.id);\n const sendMessage = useSendMessage();\n const updateMessage = useUpdateMessage();\n const deleteMessage = useDeleteMessage();\n const allMessages = useMemo(() => {\n const httpMessages = messagesData?.messages || [];\n const combinedMessages = [...httpMessages];\n socketMessages.forEach(socketMsg => {\n if (!combinedMessages.find(httpMsg => httpMsg.id === socketMsg.id)) {\n combinedMessages.push(socketMsg);\n }\n });\n return combinedMessages.sort((a, b) => new Date(a.createdAt).getTime() - new Date(b.createdAt).getTime());\n }, [messagesData?.messages, socketMessages]);\n const scrollToBottom = () => {\n messagesEndRef.current?.scrollIntoView({\n behavior: \"smooth\"\n });\n };\n useEffect(() => {\n scrollToBottom();\n }, [allMessages]);\n useEffect(() => {\n if (socketConnected && group.id) {\n joinGroup(group.id);\n }\n return () => {\n if (group.id) {\n leaveGroup(group.id);\n }\n };\n }, [socketConnected, group.id, joinGroup, leaveGroup]);\n const handleTypingStart = () => {\n if (!isTyping) {\n setIsTyping(true);\n startTyping(group.id);\n }\n if (typingTimeoutRef.current) {\n clearTimeout(typingTimeoutRef.current);\n }\n typingTimeoutRef.current = setTimeout(() => {\n setIsTyping(false);\n stopTyping(group.id);\n }, 3000);\n };\n const handleTypingStop = () => {\n if (typingTimeoutRef.current) {\n clearTimeout(typingTimeoutRef.current);\n }\n if (isTyping) {\n setIsTyping(false);\n stopTyping(group.id);\n }\n };\n const handleSendMessage = async e => {\n e.preventDefault();\n if (!newMessage.trim()) return;\n handleTypingStop();\n try {\n await sendMessage.mutateAsync({\n groupId: group.id,\n data: {\n content: newMessage.trim(),\n messageType: \"TEXT\",\n replyToId: replyTo?.id\n }\n });\n setNewMessage(\"\");\n setReplyTo(null);\n } catch {}\n };\n const handleReply = message => {\n setReplyTo(message);\n setEditingMessage(null);\n };\n const handleEdit = message => {\n setEditingMessage(message);\n setEditContent(message.content);\n setReplyTo(null);\n };\n const handleUpdateMessage = async e => {\n e.preventDefault();\n if (!editingMessage || !editContent.trim()) return;\n try {\n await updateMessage.mutateAsync({\n messageId: editingMessage.id,\n content: editContent.trim()\n });\n setEditingMessage(null);\n setEditContent(\"\");\n } catch {}\n };\n const handleDelete = async messageId => {\n if (window.confirm(\"Are you sure you want to delete this message?\")) {\n try {\n await deleteMessage.mutateAsync(messageId);\n } catch {}\n }\n };\n const cancelReply = () => setReplyTo(null);\n const cancelEdit = () => {\n setEditingMessage(null);\n setEditContent(\"\");\n };\n useEffect(() => {\n const testConnection = async () => {\n try {\n const backendUrl = process.env.NEXT_PUBLIC_BACKEND_URL || \"https://hodl-room-backed-production.up.railway.app\";\n console.log(\"🔗 Testing backend connectivity to:\", backendUrl);\n const response = await fetch(`${backendUrl}/health`, {\n method: \"GET\",\n headers: {\n \"Content-Type\": \"application/json\"\n }\n });\n if (response.ok) {\n const data = await response.json();\n console.log(\"✅ Backend is reachable:\", data);\n } else {\n console.error(\"❌ Backend health check failed:\", response.status, response.statusText);\n }\n } catch (error) {\n console.error(\"❌ Backend is not reachable:\", error);\n }\n };\n testConnection();\n }, []);\n if (!user) return null;\n const isInsufficientTokenBalance = hasInsufficientTokens || httpError && httpError?.response?.data?.error === \"Insufficient token balance to view messages\";\n if (isInsufficientTokenBalance) {\n return ;\n }\n console.log(\"🔍 GroupChat Debug Info:\", {\n isSocketConnected: isConnected,\n socketConnected: socketConnected,\n sendMessagePending: sendMessage.isPending,\n hasInsufficientTokens: hasInsufficientTokens,\n httpError: httpError,\n groupId: group.id,\n userId: user?.id,\n messagesCount: allMessages.length,\n socketMessagesCount: socketMessages.length,\n typingUsersCount: typingUsers.length,\n backendUrl: process.env.NEXT_PUBLIC_BACKEND_URL\n });\n return

\n {}\n

\n \n \n {group.avatar ?

{\n e.currentTarget.src = \"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='100' height='100' viewBox='0 0 100 100'%3E%3Crect width='100' height='100' fill='%23111'/%3E%3C/svg%3E\";\n }} /> :

\n \n {group.name.charAt(0).toUpperCase()}\n \n

}\n \n

{group.name}

\n Requires {formatTokenAmount(group.minTokenAmount)} {group.tokenAddress ? group.tokenAddress.slice(0, 4) + '...' + group.tokenAddress.slice(-4) : 'tokens'}\n

\n \n

\n {socketConnected ? 'Connected' : 'Disconnected'}\n

\n\n {}\n

\n {isLoading ?

\n Loading messages...\n

: httpError && !isInsufficientTokenBalance ?

\n \n

Failed to load messages

\n \n

: allMessages.length === 0 ?

\n \n

No messages yet

Be the first to send a message!

: allMessages.map(message => )}\n \n \n

\n\n {}\n \n

;\n};\nconst AppWithProvider = () => {\n const endpoint = 'https://rpc.dev.fun/d975207602694eb998d2';\n const wallets = [new PhantomWalletAdapter(), new SolflareWalletAdapter()];\n return \n \n \n \n \n \n \n \n \n ;\n};\nfunction TokenGateApp() {\n const {\n publicKey,\n connected\n } = useWallet();\n const {\n connection\n } = useConnection();\n const [view, setView] = useState('landing');\n const [activeGroup, setActiveGroup] = useState(null);\n const [tokenHoldings, setTokenHoldings] = useState([]);\n const [isCreatingGroup, setIsCreatingGroup] = useState(false);\n const [newGroup, setNewGroup] = useState({\n name: '',\n description: '',\n tokenAddress: '',\n minTokenAmount: '1',\n avatar: ''\n });\n useEffect(() => {\n const style = document.createElement('style');\n style.textContent = `\n .animate-snake-border {\n animation: snake-border 3s ease-in-out infinite;\n width: 50%;\n height: 2px;\n background: linear-gradient(90deg, transparent, white, transparent);\n top: 0;\n left: 0;\n }\n .animate-border-glow {\n animation: border-glow 3s ease-in-out infinite;\n }\n `;\n document.head.appendChild(style);\n return () => {\n document.head.removeChild(style);\n };\n }, []);\n const [formErrors, setFormErrors] = useState({});\n const [, setMessages] = useState([]);\n const [currentPage,,] = useState(1);\n const [, setConnectedUsers] = useState(0);\n const [, setAccessibleGroups] = useState([]);\n const [isVerifying, setIsVerifying] = useState(false);\n const {\n isAuthenticated,\n isAuthenticating,\n user,\n logout\n } = useAuth();\n const groupsHook = useGroups();\n const messagesHook = useMessages();\n const {\n data: groupsData,\n isLoading: isLoadingGroups,\n isError: isErrorGroups,\n refetch: refetchGroups,\n error: groupsError\n } = groupsHook.usePublicGroups(1, 20);\n useEffect(() => {\n if (isErrorGroups && isAuthenticated) {\n console.log(\"Auto-retrying groups fetch after error:\", groupsError);\n const retryTimer = setTimeout(() => {\n refetchGroups();\n }, 1500);\n return () => clearTimeout(retryTimer);\n }\n }, [isErrorGroups, isAuthenticated, refetchGroups, groupsError]);\n const {\n mutate: createGroup\n } = groupsHook.useCreateGroup();\n const {\n data: messagesData,\n isLoading: isLoadingMessages\n } = messagesHook.useGroupMessages(activeGroup?.id, currentPage, 50);\n const groups = groupsData?.groups || [];\n const TOKEN_PROGRAM_ID = new PublicKey('TokenkegQfeZyiNwAJbNbGKPFXCWuBvf9Ss623VQ5DA');\n const getAllSPLTokenBalances = async walletAddress => {\n try {\n if (!connection || !walletAddress) return [];\n const walletPublicKey = new PublicKey(walletAddress);\n const tokenAccounts = await connection.getTokenAccountsByOwner(walletPublicKey, {\n programId: TOKEN_PROGRAM_ID\n });\n const tokenData = [];\n for (const tokenAccount of tokenAccounts.value) {\n const accountInfo = await connection.getParsedAccountInfo(tokenAccount.pubkey);\n if (accountInfo.value?.data && 'parsed' in accountInfo.value.data) {\n const parsedData = accountInfo.value.data.parsed.info;\n if (parsedData.tokenAmount.uiAmount > 0) {\n const tokenInfo = {\n mint: parsedData.mint,\n symbol: parsedData.mint.slice(0, 4) + '...' + parsedData.mint.slice(-4),\n name: 'SPL Token',\n balance: parsedData.tokenAmount.uiAmount,\n imageUri: null\n };\n tokenData.push(tokenInfo);\n }\n }\n }\n console.log(`Found ${tokenData.length} token balances for wallet ${walletAddress.slice(0, 4)}...${walletAddress.slice(-4)}`);\n return tokenData;\n } catch (error) {\n console.error('Error fetching token accounts:', error);\n toast.error('Failed to fetch token accounts');\n return [];\n }\n };\n const fetchUserTokens = useCallback(async () => {\n if (!publicKey || !connection) return;\n setIsVerifying(true);\n try {\n const allTokens = await getAllSPLTokenBalances(publicKey.toString());\n if (allTokens.length > 0) {\n const tokenAddresses = allTokens.map(token => token.mint);\n const validAddresses = tokenAddresses.filter(addr => isValidSolanaAddress(addr));\n if (validAddresses.length > 0) {\n try {\n const metadataResponse = await getBatchTokenMetadata(validAddresses);\n if (metadataResponse.success) {\n const tokensWithMetadata = allTokens.map(token => {\n const tokenResult = metadataResponse.results.find(result => result.address === token.mint && result.metadata !== null);\n if (tokenResult && tokenResult.metadata) {\n return {\n ...token,\n name: tokenResult.metadata.name || token.name,\n symbol: tokenResult.metadata.symbol || token.symbol,\n metadataUri: tokenResult.metadata.uri\n };\n }\n return token;\n });\n const tokensWithImages = await Promise.all(tokensWithMetadata.map(async token => {\n if (token.metadataUri) {\n try {\n const response = await fetch(token.metadataUri);\n if (response.ok) {\n const json = await response.json();\n if (json.image) {\n return {\n ...token,\n imageUri: json.image\n };\n }\n }\n } catch (err) {\n console.warn(`Error fetching metadata URI for ${token.mint}:`, err);\n }\n }\n return token;\n }));\n setTokenHoldings(tokensWithImages);\n } else {\n setTokenHoldings(allTokens);\n }\n } catch (metadataError) {\n console.warn('Error fetching token metadata:', metadataError);\n setTokenHoldings(allTokens);\n }\n } else {\n setTokenHoldings(allTokens);\n }\n } else {\n setTokenHoldings([]);\n }\n } catch (error) {\n console.error('Error fetching token balances:', error);\n toast.error('Error verifying tokens');\n } finally {\n setIsVerifying(false);\n }\n }, [publicKey, connection]);\n useEffect(() => {\n if (!connected || tokenHoldings.length === 0) return;\n const accessible = groups.filter(group => {\n const tokenHolding = tokenHoldings.find(token => token.mint === group.tokenAddress);\n return tokenHolding && tokenHolding.balance >= parseFloat(group.minTokenAmount);\n });\n setAccessibleGroups(accessible);\n }, [groups, tokenHoldings, connected]);\n useEffect(() => {\n if (connected) {\n fetchUserTokens();\n if (isAuthenticated) {\n setView('dashboard');\n }\n } else {\n setView('landing');\n setActiveGroup(null);\n setTokenHoldings([]);\n }\n }, [connected, fetchUserTokens, isAuthenticated]);\n useEffect(() => {\n if (isAuthenticated) {\n setView('dashboard');\n setTimeout(() => {\n refetchGroups();\n }, 1000);\n }\n }, [isAuthenticated, refetchGroups]);\n useEffect(() => {\n function onConnect() {\n console.log('Socket connected');\n }\n function onDisconnect() {\n console.log('Socket disconnected');\n }\n function onUserCount(count) {\n setConnectedUsers(count);\n }\n function onNewMessage(message) {\n if (message.groupId === activeGroup?.id) {\n setMessages(prev => [...prev, message]);\n }\n }\n socket.on('connect', onConnect);\n socket.on('disconnect', onDisconnect);\n socket.on('devfun:user_count', onUserCount);\n socket.on('new_message', onNewMessage);\n return () => {\n socket.off('connect', onConnect);\n socket.off('disconnect', onDisconnect);\n socket.off('devfun:user_count', onUserCount);\n socket.off('new_message', onNewMessage);\n };\n }, [activeGroup]);\n useEffect(() => {\n if (messagesData?.messages) {\n setMessages(messagesData.messages);\n } else if (activeGroup && !isLoadingMessages) {\n const mockMessages = [{\n id: '1',\n groupId: activeGroup.id,\n user: {\n username: 'Admin'\n },\n content: `Welcome to the ${activeGroup.name} group!`,\n createdAt: new Date(Date.now() - 86400000).toISOString()\n }, {\n id: '2',\n groupId: activeGroup.id,\n user: {\n username: 'SolanaFan'\n },\n content: 'Has anyone seen the latest protocol update?',\n createdAt: new Date(Date.now() - 3600000).toISOString()\n }, {\n id: '3',\n groupId: activeGroup.id,\n user: {\n username: 'CryptoKid'\n },\n content: 'This token-gated chat is awesome!',\n createdAt: new Date(Date.now() - 1800000).toISOString()\n }];\n setMessages(mockMessages);\n }\n }, [messagesData, activeGroup, isLoadingMessages]);\n const validateForm = () => {\n const errors = {};\n if (!newGroup.name.trim()) {\n errors.name = \"Group name is required\";\n } else if (newGroup.name.length < 3) {\n errors.name = \"Group name must be at least 3 characters\";\n }\n if (!newGroup.description.trim()) {\n errors.description = \"Description is required\";\n } else if (newGroup.description.length < 10) {\n errors.description = \"Description must be at least 10 characters\";\n }\n if (!newGroup.tokenAddress) {\n errors.tokenAddress = \"Token address is required\";\n }\n if (!newGroup.minTokenAmount.trim()) {\n errors.minTokenAmount = \"Minimum token amount is required\";\n } else if (isNaN(Number(newGroup.minTokenAmount)) || Number(newGroup.minTokenAmount) <= 0) {\n errors.minTokenAmount = \"Must be a positive number\";\n }\n if (newGroup.avatar && newGroup.avatar.trim()) {\n try {\n new URL(newGroup.avatar);\n } catch {\n errors.avatar = \"Invalid URL format\";\n }\n }\n setFormErrors(errors);\n return Object.keys(errors).length === 0;\n };\n const handleInputChange = e => {\n const {\n name,\n value\n } = e.target;\n setNewGroup(prev => ({\n ...prev,\n [name]: value\n }));\n if (formErrors[name]) {\n setFormErrors(prev => ({\n ...prev,\n [name]: undefined\n }));\n }\n };\n const dialogRef = useRef(null);\n const handleOutsideClick = e => {\n if (dialogRef.current && !dialogRef.current.contains(e.target)) {\n setIsCreatingGroup(false);\n }\n };\n const handleCreateGroup = e => {\n e?.preventDefault();\n if (!validateForm()) {\n return;\n }\n if (!connected || !publicKey) {\n toast.error(\"Wallet disconnected. Please reconnect to create a group.\");\n return;\n }\n createGroup({\n name: newGroup.name.trim(),\n description: newGroup.description.trim(),\n tokenAddress: newGroup.tokenAddress,\n minTokenAmount: newGroup.minTokenAmount.trim(),\n avatar: newGroup.avatar?.trim() || undefined\n });\n setIsCreatingGroup(false);\n setNewGroup({\n name: '',\n description: '',\n tokenAddress: '',\n minTokenAmount: '1',\n avatar: ''\n });\n setFormErrors({});\n };\n const handleOpenGroup = group => {\n setActiveGroup(group);\n setView('chat');\n };\n const leaveGroup = () => {\n setActiveGroup(null);\n setView('dashboard');\n };\n const handleLogout = () => {\n if (window.authAttemptResetTimer) {\n clearTimeout(window.authAttemptResetTimer);\n }\n logout();\n if (hasAttemptedAuthRef) {\n hasAttemptedAuthRef.current = false;\n }\n };\n const canAccessGroup = group => {\n if (!connected || tokenHoldings.length === 0) return false;\n const tokenHolding = tokenHoldings.find(token => token.mint === group.tokenAddress);\n return tokenHolding && tokenHolding.balance >= parseFloat(group.minTokenAmount);\n };\n const getTokenName = mint => {\n const token = tokenHoldings.find(t => t.mint === mint);\n return token ? token.symbol : mint ? `${mint.slice(0, 4)}...${mint.slice(-4)}` : 'Unknown Token';\n };\n const formatTokenAmount = amount => {\n if (!amount) return '0';\n const num = parseFloat(amount);\n if (num >= 1e9) {\n return `${(num / 1e9).toFixed(1)}B`;\n } else if (num >= 1e6) {\n return `${(num / 1e6).toFixed(1)}M`;\n } else if (num >= 1e3) {\n return `${(num / 1e3).toFixed(1)}K`;\n }\n return num.toString();\n };\n const renderLanding = () =>

\n $\"Logo\"$ \n

\n \n

\n Unlock exclusive Solana communities with just a wallet connection. Your SPL tokens are the VIP pass.\n

\n \n

Connect your Solana wallet to start:

\n \n \n {connected && !isAuthenticated && !isAuthenticating &&

\n Auto-authenticating...\n

\n Your wallet will automatically sign a message to verify ownership\n

}\n \n {connected && isAuthenticating &&

\n Authenticating...\n

\n Verifying your wallet signature\n

}\n

\n \n

Token Verification

Automatic SPL token balance verification in real-time

\n \n

Private Communities

Token-gated messaging spaces for exclusive interactions

\n \n

Secure Connections

Connect with fellow token holders in a private environment

;\n const renderDashboard = () =>

\n $\"Logo\"$ \n

\n \n

\n {isVerifying ?

\n Verifying tokens\n

: }\n \n

\n \n

\n \n \n

\n \n

Available Communities

\n \n \n

\n \n {isLoadingGroups ?

\n Loading communities...\n

: isErrorGroups ?

\n \n

Failed to load communities

There was an error fetching the groups

\n \n

: groups.length === 0 ?

\n \n

No communities found

Be the first to create a community!

\n {groups.map(group => {\n const canAccess = canAccessGroup(group);\n const memberCount = group.memberCount || 0;\n return

\n {}\n

\n {group.avatar || group.image_uri ?

\n \n {group.name.charAt(0).toUpperCase()}\n \n

}\n \n {}\n

\n {memberCount} member{memberCount !== 1 ? 's' : ''}\n

\n \n

{group.name}

\n {canAccess ? 'Access Granted' : 'Access Denied'}\n

\n \n

{group.description}

\n \n

\n Created: {new Date(group.createdAt).toLocaleDateString()}\n

\n \n

\n Requires {formatTokenAmount(group.minTokenAmount)} {getTokenName(group.tokenAddress)}\n

\n \n {canAccess ? :

\n \n \n Buy Token\n \n

}\n

;\n })}\n

}\n

\n \n

Your Token Holdings

\n {tokenHoldings.length > 0 ?

\n {tokenHoldings.map(token =>

\n {token.imageUri ? {token.symbol}

{\n e.target.onerror = null;\n e.target.src = \"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='40' height='40' viewBox='0 0 40 40'%3E%3Ccircle cx='20' cy='20' r='20' fill='%23333'/%3E%3Ctext x='50%25' y='50%25' font-size='20' text-anchor='middle' dy='.3em' fill='white'%3E%24%3C/text%3E%3C/svg%3E\";\n }} /> : \n {token.symbol.charAt(0)}\n }\n

\n {token.symbol}\n {token.balance.toLocaleString()}\n

\n {token.name || token.mint.slice(0, 6) + '...' + token.mint.slice(-4)}\n

\n {token.mint.slice(0, 8) + '...' + token.mint.slice(-8)}\n

)}\n

\n {isVerifying ?

Verifying token balances...

\n \n

No tokens found in wallet

}\n

\n \n {isCreatingGroup &&

Create New Community

\n Create a token-gated group for your community\n

\n \n

\n {}\n

\n \n Group Name *\n \n \n {formErrors.name &&

{formErrors.name}

}\n

\n\n {}\n

\n \n Description *\n \n

\n                {formErrors.description && <p className=\"text-red-500 text-xs mt-1\">{formErrors.description}</p>}\n              </div>\n\n              {}\n              <div>\n                <label htmlFor=\"tokenAddress\" className=\"block text-sm font-medium text-gray-300 mb-1\">\n                  Token Address *\n                </label>\n                <select id=\"tokenAddress\" name=\"tokenAddress\" value={newGroup.tokenAddress} onChange={handleInputChange} className={`w-full px-3 py-2 bg-black text-white rounded-lg focus:outline-none focus:ring-2 focus:ring-white/50 font-mono text-sm border ${formErrors.tokenAddress ? \"border-red-500\" : \"border-white/20\"}`}>\n                  <option value=\"\">Select a token</option>\n                  {tokenHoldings.map(token => <option key={token.mint} value={token.mint}>\n                      {token.symbol} - {token.balance.toLocaleString()} tokens\n                    </option>)}\n                </select>\n                {formErrors.tokenAddress && <p className=\"text-red-500 text-xs mt-1\">{formErrors.tokenAddress}</p>}\n                <p className=\"text-gray-500 text-xs mt-1\">\n                  Only holders of this token can join the group\n                </p>\n              </div>\n\n              {}\n              <div>\n                <label htmlFor=\"minTokenAmount\" className=\"block text-sm font-medium text-gray-300 mb-1\">\n                  Minimum Token Amount *\n                </label>\n                <input type=\"text\" id=\"minTokenAmount\" name=\"minTokenAmount\" value={newGroup.minTokenAmount} onChange={handleInputChange} className={`w-full px-3 py-2 bg-black text-white rounded-lg focus:outline-none focus:ring-2 focus:ring-white/50 border ${formErrors.minTokenAmount ? \"border-red-500\" : \"border-white/20\"}`} placeholder=\"e.g., 100\" />\n                {formErrors.minTokenAmount && <p className=\"text-red-500 text-xs mt-1\">{formErrors.minTokenAmount}</p>}\n                <p className=\"text-gray-500 text-xs mt-1\">\n                  Minimum amount of tokens required to join\n                </p>\n              </div>\n\n              {}\n              <div>\n                <label htmlFor=\"avatar\" className=\"block text-sm font-medium text-gray-300 mb-1\">\n                  Group Image URL (Optional)\n                </label>\n                <input type=\"url\" id=\"avatar\" name=\"avatar\" value={newGroup.avatar} onChange={handleInputChange} className={`w-full px-3 py-2 bg-black text-white rounded-lg focus:outline-none focus:ring-2 focus:ring-white/50 border ${formErrors.avatar ? \"border-red-500\" : \"border-white/20\"}`} placeholder=\"https://example.com/image.png\" />\n                {formErrors.avatar && <p className=\"text-red-500 text-xs mt-1\">{formErrors.avatar}</p>}\n                <p className=\"text-gray-500 text-xs mt-1\">\n                  Optional group image URL\n                </p>\n              </div>\n\n              {}\n              <div className=\"flex items-center justify-end space-x-3 pt-4\">\n                <button type=\"button\" onClick={() => setIsCreatingGroup(false)} className=\"px-4 py-2 text-white bg-black border border-white/20 rounded-lg hover:bg-gray-900 transition-colors\">\n                  Cancel\n                </button>\n\n                <button type=\"submit\" disabled={createGroup.isPending} className=\"px-6 py-2 bg-white text-black rounded-lg hover:bg-gray-200 disabled:bg-gray-700 disabled:text-gray-500 disabled:cursor-not-allowed transition-colors flex items-center\">\n                  {createGroup.isPending && <div className=\"animate-spin rounded-full h-4 w-4 border-2 border-black border-t-transparent mr-2\"></div>}\n                  {createGroup.isPending ? \"Creating...\" : \"Create Community\"}\n                </button>\n              </div>\n            </form>\n\n            <div className=\"mt-6 p-4 bg-white/5 border border-white/10 rounded-lg\">\n              <h4 className=\"font-medium text-white mb-2\">\n                💡 Group Creation Tips:\n              </h4>\n              <ul className=\"text-gray-400 text-sm space-y-1\">\n                <li>• Choose a clear, descriptive name for your group</li>\n                <li>• Provide detailed description of the group's purpose</li>\n                <li>• Verify the token address is correct before creating</li>\n                <li>• Set a reasonable minimum token amount for your community</li>\n                <li>• As the creator, you will become the group owner</li>\n              </ul>\n            </div>\n          </div>\n        </div>}\n    </div>;\n  const renderChat = () => <GroupChat group={activeGroup} onBack={leaveGroup} />;\n  const renderView = () => {\n    switch (view) {\n      case 'dashboard':\n        return isAuthenticated ? renderDashboard() : renderLanding();\n      case 'chat':\n        return isAuthenticated ? renderChat() : renderLanding();\n      default:\n        return renderLanding();\n    }\n  };\n  return <div className=\"min-h-screen w-full bg-black text-white\">\n      {renderView()}\n    </div>;\n}\nconst style = document.createElement('style');\nstyle.textContent = `\n  @keyframes snake-border {\n    0%, 100% {\n      transform: translateX(-100%);\n    }\n    50% {\n      transform: translateX(100%);\n    }\n  }\n  \n  @keyframes border-glow {\n    0%, 100% {\n      box-shadow: 0 0 15px rgba(255, 255, 255, 0.3);\n    }\n    50% {\n      box-shadow: 0 0 25px rgba(255, 255, 255, 0.5);\n    }\n  }\n`;\ndocument.head.appendChild(style);\nexport default AppWithProvider;","packageJson","{\"dependencies\":{\"react\":\"18.2.0\",\"socket.io-client\":\"4.7.2\",\"lucide-react\":\"0.441.0\",\"@solana/wallet-adapter-base\":\"0.9.23\",\"@solana/wallet-adapter-react\":\"0.15.35\",\"@solana/wallet-adapter-react-ui\":\"0.9.35\",\"@solana/wallet-adapter-wallets\":\"0.19.32\",\"@solana/web3.js\":\"1.95.3\",\"zod\":\"3.22.4\",\"framer-motion\":\"10.16.4\",\"react-router-dom\":\"6.18.0\",\"@devfunlabs/web-sdk\":\"0.5.5\",\"recharts\":\"2.8.0\",\"@devfunlabs/state-client\":\"0.8.1\",\"@tanstack/react-query\":\"5.0.0\",\"axios\":\"1.6.0\",\"bs58\":\"5.0.0\",\"cookies-next\":\"4.1.0\",\"sonner\":\"1.2.0\"}}","appFunctions",[],"token",{"_20":82,"_83":82,"_84":85,"_86":87,"_88":89,"_90":91,"_92":93,"_94":95,"_96":97,"_98":99,"_100":101,"_61":102,"_73":19},"buidl","symbol","image","https://pump.mypinata.cloud/ipfs/QmPR3CamxoBQW892uHDT2EGRxFvksiJyrEg1ajZYVqJhnf?img-width=256&img-dpr=2","website","https://buidl.eco/","twitter","https://x.com/buidldao_","marketcap",1650947.28,"volumeIn24h",152021.71,"price",0.001649,"priceChangeIn24h",-25.06,"devCount",319,"appCount",2177,83722,"upstreamApp","isLordOfDev","analytics",[107,111,113,115,117,119,121,123,125,127,129,131,133,135],{"_108":109,"_110":59},"day","2025-09-24","runCount",{"_108":112,"_110":59},"2025-09-25",{"_108":114,"_110":59},"2025-09-26",{"_108":116,"_110":59},"2025-09-27",{"_108":118,"_110":59},"2025-09-28",{"_108":120,"_110":59},"2025-09-29",{"_108":122,"_110":59},"2025-09-30",{"_108":124,"_110":59},"2025-10-01",{"_108":126,"_110":59},"2025-10-02",{"_108":128,"_110":59},"2025-10-03",{"_108":130,"_110":59},"2025-10-04",{"_108":132,"_110":59},"2025-10-05",{"_108":134,"_110":59},"2025-10-06",{"_108":136,"_110":59},"2025-10-07","snapshot","ogImage","https://cdn.dev.fun/og/image/d975207602694eb998d2/90f4efde.webp","isDevbase","project",{"_14":19,"_84":85,"_20":82,"_143":144,"_22":144},"oneliner","buidl n shpi 4 fun haha!","commitDetail","livestream","actionData","errors"]
</article></body></html>