[{"_1":2,"_131":-5,"_132":-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,"_129":-5,"_125":-5,"_130":-5},"appDetail",{"_14":15,"_16":17,"_18":19,"_20":21,"_22":23,"_24":25,"_26":25,"_27":28,"_29":30,"_31":32,"_33":34,"_35":36,"_37":38,"_39":40,"_41":42,"_5":43,"_54":55,"_56":57,"_58":57,"_59":60,"_61":57,"_62":57,"_63":57,"_64":57,"_65":57,"_66":57,"_67":17,"_68":25,"_69":70,"_71":72,"_73":74,"_75":76,"_77":78,"_91":-5,"_92":17,"_93":94,"_125":30,"_126":127,"_128":25},"id","f847478297b60eb8cf84","isMyApp",false,"name","CryptoNest","description","Nestle is where crypto enthusiasts build their digital home, connecting through a sleek Web3 social network that rewards brilliance with instant token tips. Log in with your Solana wallet, share your genius, and watch as your $CRYPTONEST tokens accumulate while you climb the community leaderboard of legends.","brief","The cozy Web3 social hub where your brilliant posts earn you real crypto rewards!","isLive",true,"isPublic","tags",[],"cover","https://cdn.dev.fun/snapshot/f847478297b60eb8cf84/79487_08a68781.webp","cdnUrl","https://cdn.dev.fun/app/f847478297b60eb8cf84/79487","createdAt",["D",1749658780457],"updatedAt",["D",1749671825075],"lastCommitId",["B","79487"],"tier",1,"credits",-11,{"_14":44,"_45":46,"_47":-5,"_48":46,"_49":50,"_51":-5,"_52":53},"d2a65af0-223b-48ae-9a20-0ed353e46e77","uniqueId","6KdM5BEnjQ7nAVSfw72LFyDkZw4s9pAShty9g7UfLG4W","username","solanaWallet","displayName","6Kd...G4W","bio","avatar","/avatar.svg","commitCount",31,"forkCount",0,"likeCount","runsCount",15,"downvoteCount","upvoteCount","upvoteRate","commentCount","reportCount","visitorCount","isArchived","isRenamed","contractAddress","95c5cm6UffFVrUiQY7ezyFLfiVRRx6Yhp9sXghumpump","code","import { useState, useEffect, useRef } from 'react';\nimport { useDevapp, UserButton, DevappProvider, openLink } from '@devfunlabs/web-sdk';\nimport { io } from 'socket.io-client';\nimport { motion, AnimatePresence } from 'framer-motion';\nimport { Send, MessageCircle, Award, Bell, Home, User, TrendingUp, X, ExternalLink, Menu, ChevronUp, Search, Compass, AlertCircle, Check, Loader, HelpCircle, Calendar, Gift, Coins, Bot, Sparkles } from 'lucide-react';\nconst socket = io('wss://ws.dev.fun/app-f847478297b60eb8cf84');\nfunction App() {\n return \n \n ;\n}\nfunction CryptoNest() {\n const {\n devbaseClient,\n userWallet\n } = useDevapp();\n const [activeTab, setActiveTab] = useState('feed');\n const [posts, setPosts] = useState([]);\n const [userProfile, setUserProfile] = useState(null);\n const [leaderboard, setLeaderboard] = useState([]);\n const [monthlyLeaderboard, setMonthlyLeaderboard] = useState([]);\n const [notifications, setNotifications] = useState([]);\n const [unreadCount, setUnreadCount] = useState(0);\n const [loading, setLoading] = useState(true);\n const [showChatAssistant, setShowChatAssistant] = useState(false);\n const [mobileMenuOpen, setMobileMenuOpen] = useState(false);\n const [showToTop, setShowToTop] = useState(false);\n const [searchQuery, setSearchQuery] = useState('');\n const [searchResults, setSearchResults] = useState([]);\n const [isSearching, setIsSearching] = useState(false);\n const [selectedUser, setSelectedUser] = useState(null);\n const [feedbackMessage, setFeedbackMessage] = useState(null);\n const [tipAnimations, setTipAnimations] = useState([]);\n const feedRef = useRef(null);\n useEffect(() => {\n if (devbaseClient) {\n loadPosts();\n if (userWallet) {\n loadUserProfile();\n loadLeaderboard();\n loadMonthlyLeaderboard();\n loadNotifications();\n }\n }\n }, [userWallet, devbaseClient]);\n useEffect(() => {\n if (searchQuery.trim() && devbaseClient) {\n handleSearch();\n } else {\n setSearchResults([]);\n setIsSearching(false);\n }\n }, [searchQuery]);\n useEffect(() => {\n const handleScroll = () => {\n if (feedRef.current && feedRef.current.scrollTop > 500) {\n setShowToTop(true);\n } else {\n setShowToTop(false);\n }\n };\n const feedElement = feedRef.current;\n if (feedElement) {\n feedElement.addEventListener('scroll', handleScroll);\n return () => feedElement.removeEventListener('scroll', handleScroll);\n }\n }, [activeTab]);\n useEffect(() => {\n function onConnect() {\n console.log('Socket connected');\n }\n function onPostCreated(post) {\n setPosts(prev => [post, ...prev]);\n }\n function onTipReceived(notification) {\n if (notification.recipientId === userWallet) {\n setNotifications(prev => [notification, ...prev]);\n setUnreadCount(prev => prev + 1);\n }\n }\n function onTipAnimation(data) {\n const newAnimation = {\n id: Date.now(),\n amount: data.amount,\n currency: data.currency,\n recipientId: data.recipientId,\n senderId: data.senderId\n };\n setTipAnimations(prev => [...prev, newAnimation]);\n setTimeout(() => {\n setTipAnimations(prev => prev.filter(anim => anim.id !== newAnimation.id));\n }, 3000);\n }\n socket.on('connect', onConnect);\n socket.on('post:created', onPostCreated);\n socket.on('tip:sent', onTipReceived);\n socket.on('tip:animation', onTipAnimation);\n socket.on('comment:added', onPostCreated);\n return () => {\n socket.off('connect', onConnect);\n socket.off('post:created', onPostCreated);\n socket.off('tip:sent', onTipReceived);\n socket.off('tip:animation', onTipAnimation);\n socket.off('comment:added', onPostCreated);\n };\n }, [userWallet]);\n const cryptoProfilePics = [\"https://cdn.dev.fun/asset/f847478297b60eb8cf84/bitcoin_avatar.png\", \"https://cdn.dev.fun/asset/f847478297b60eb8cf84/ethereum_avatar.png\", \"https://cdn.dev.fun/asset/f847478297b60eb8cf84/solana_avatar.png\", \"https://cdn.dev.fun/asset/f847478297b60eb8cf84/doge_avatar.png\", \"https://cdn.dev.fun/asset/f847478297b60eb8cf84/shiba_avatar.png\", \"https://cdn.dev.fun/asset/f847478297b60eb8cf84/bnb_avatar.png\", \"https://cdn.dev.fun/asset/f847478297b60eb8cf84/cardano_avatar.png\", \"https://cdn.dev.fun/asset/f847478297b60eb8cf84/polygon_avatar.png\"];\n const getRandomCryptoPic = () => {\n const randomIndex = Math.floor(Math.random() * cryptoProfilePics.length);\n return cryptoProfilePics[randomIndex];\n };\n useEffect(() => {\n cryptoProfilePics.forEach(url => {\n const img = new Image();\n img.src = url;\n });\n }, []);\n const loadUserProfile = async () => {\n try {\n const profiles = await devbaseClient.listEntities('profiles', {\n userId: userWallet\n });\n if (profiles && profiles.length > 0) {\n setUserProfile(profiles[0]);\n } else {\n const newProfile = {\n userId: userWallet,\n displayName: `Nester ${userWallet.substring(0, 4)}`,\n bio: \"Crypto enthusiast nesting in Web3\",\n profilePicture: getRandomCryptoPic(),\n tokensEarned: 0,\n twitter: \"\",\n website: \"\"\n };\n const createdProfile = await devbaseClient.createEntity('profiles', newProfile);\n setUserProfile(createdProfile);\n }\n } catch (error) {\n console.error(\"Error loading profile:\", error);\n }\n };\n const [mostActiveUser, setMostActiveUser] = useState(null);\n const [mostActiveUserPosts, setMostActiveUserPosts] = useState([]);\n const handleSearch = async () => {\n if (!searchQuery.trim()) return;\n setIsSearching(true);\n try {\n const profiles = await devbaseClient.listEntities('profiles');\n const matchingProfiles = profiles.filter(profile => profile.displayName.toLowerCase().includes(searchQuery.toLowerCase()) || profile.userId && profile.userId.toLowerCase().includes(searchQuery.toLowerCase()));\n const allPosts = await devbaseClient.listEntities('posts');\n const matchingPosts = allPosts.filter(post => post.content.toLowerCase().includes(searchQuery.toLowerCase()));\n const enhancedPosts = await Promise.all(matchingPosts.map(async post => {\n let authorProfile = null;\n try {\n const profiles = await devbaseClient.listEntities('profiles', {\n userId: post.userId\n });\n if (profiles && profiles.length > 0) {\n authorProfile = profiles[0];\n }\n } catch (error) {\n console.error(\"Error fetching author profile:\", error);\n }\n return {\n ...post,\n authorProfile\n };\n }));\n setSearchResults({\n profiles: matchingProfiles,\n posts: enhancedPosts\n });\n } catch (error) {\n console.error(\"Error searching:\", error);\n } finally {\n setIsSearching(false);\n }\n };\n const loadPosts = async () => {\n setLoading(true);\n try {\n const fetchedPosts = await devbaseClient.listEntities('posts');\n const sortedPosts = fetchedPosts.sort((a, b) => new Date(b.createdAt) - new Date(a.createdAt));\n const userPostCounts = {};\n fetchedPosts.forEach(post => {\n userPostCounts[post.userId] = (userPostCounts[post.userId] || 0) + 1;\n });\n let maxPosts = 0;\n let mostActiveUserId = null;\n Object.entries(userPostCounts).forEach(([userId, count]) => {\n if (count > maxPosts) {\n maxPosts = count;\n mostActiveUserId = userId;\n }\n });\n const postsWithComments = await Promise.all(sortedPosts.map(async post => {\n const comments = await devbaseClient.listEntities('comments', {\n postId: post.id\n });\n const sortedComments = comments.sort((a, b) => new Date(a.createdAt) - new Date(b.createdAt));\n let authorProfile = null;\n try {\n const profiles = await devbaseClient.listEntities('profiles', {\n userId: post.userId\n });\n if (profiles && profiles.length > 0) {\n authorProfile = profiles[0];\n }\n } catch (error) {\n console.error(\"Error fetching author profile:\", error);\n }\n return {\n ...post,\n comments: sortedComments,\n authorProfile\n };\n }));\n setPosts(postsWithComments);\n if (mostActiveUserId) {\n try {\n const activeUserProfiles = await devbaseClient.listEntities('profiles', {\n userId: mostActiveUserId\n });\n if (activeUserProfiles && activeUserProfiles.length > 0) {\n setMostActiveUser(activeUserProfiles[0]);\n const activeUserPosts = postsWithComments.filter(post => post.userId === mostActiveUserId);\n setMostActiveUserPosts(activeUserPosts.slice(0, 3));\n }\n } catch (error) {\n console.error(\"Error fetching most active user:\", error);\n }\n }\n } catch (error) {\n console.error(\"Error loading posts:\", error);\n } finally {\n setLoading(false);\n }\n };\n const loadLeaderboard = async () => {\n try {\n const profiles = await devbaseClient.listEntities('profiles');\n const allTips = await devbaseClient.listEntities('tips');\n const userStats = {};\n profiles.forEach(profile => {\n userStats[profile.userId] = {\n profile,\n tipsReceived: 0,\n tipsSent: 0,\n activityScore: 0\n };\n });\n allTips.forEach(tip => {\n if (userStats[tip.recipientId]) {\n userStats[tip.recipientId].tipsReceived += tip.amount;\n }\n if (userStats[tip.senderId]) {\n userStats[tip.senderId].tipsSent += tip.amount;\n }\n });\n const allPosts = await devbaseClient.listEntities('posts');\n allPosts.forEach(post => {\n if (userStats[post.userId]) {\n userStats[post.userId].activityScore += 5;\n }\n });\n const allComments = await devbaseClient.listEntities('comments');\n allComments.forEach(comment => {\n if (userStats[comment.userId]) {\n userStats[comment.userId].activityScore += 2;\n }\n });\n const leaderboardData = Object.values(userStats).map(stats => ({\n ...stats.profile,\n tipsReceived: stats.tipsReceived,\n tipsSent: stats.tipsSent,\n activityScore: stats.activityScore,\n totalScore: stats.profile.tokensEarned + stats.activityScore + stats.tipsReceived * 0.5\n }));\n const sortedProfiles = leaderboardData.sort((a, b) => b.totalScore - a.totalScore);\n setLeaderboard(sortedProfiles.slice(0, 10));\n } catch (error) {\n console.error(\"Error loading leaderboard:\", error);\n }\n };\n const loadMonthlyLeaderboard = async () => {\n try {\n const profiles = await devbaseClient.listEntities('profiles');\n const now = new Date();\n const monthStart = new Date(now.getFullYear(), now.getMonth(), 1);\n const allTips = await devbaseClient.listEntities('tips');\n const monthlyTips = allTips.filter(tip => {\n const tipDate = new Date(tip.createdAt);\n return tipDate >= monthStart;\n });\n const userStats = {};\n profiles.forEach(profile => {\n userStats[profile.userId] = {\n profile,\n monthlyTipsReceived: 0,\n monthlyActivityScore: 0\n };\n });\n monthlyTips.forEach(tip => {\n if (userStats[tip.recipientId]) {\n userStats[tip.recipientId].monthlyTipsReceived += tip.amount;\n }\n });\n const allPosts = await devbaseClient.listEntities('posts');\n const monthlyPosts = allPosts.filter(post => {\n const postDate = new Date(post.createdAt);\n return postDate >= monthStart;\n });\n monthlyPosts.forEach(post => {\n if (userStats[post.userId]) {\n userStats[post.userId].monthlyActivityScore += 5;\n }\n });\n const allComments = await devbaseClient.listEntities('comments');\n const monthlyComments = allComments.filter(comment => {\n const commentDate = new Date(comment.createdAt);\n return commentDate >= monthStart;\n });\n monthlyComments.forEach(comment => {\n if (userStats[comment.userId]) {\n userStats[comment.userId].monthlyActivityScore += 2;\n }\n });\n const monthlyLeaderboardData = Object.values(userStats).map(stats => ({\n ...stats.profile,\n monthlyTipsReceived: stats.monthlyTipsReceived,\n monthlyActivityScore: stats.monthlyActivityScore,\n monthlyTotalScore: stats.monthlyTipsReceived + stats.monthlyActivityScore\n }));\n const sortedMonthlyProfiles = monthlyLeaderboardData.sort((a, b) => b.monthlyTotalScore - a.monthlyTotalScore).filter(profile => profile.monthlyTotalScore > 0);\n setMonthlyLeaderboard(sortedMonthlyProfiles.slice(0, 10));\n } catch (error) {\n console.error(\"Error loading monthly leaderboard:\", error);\n }\n };\n const loadNotifications = async () => {\n try {\n const fetchedNotifications = await devbaseClient.listEntities('notifications', {\n recipientId: userWallet\n });\n const sortedNotifications = fetchedNotifications.sort((a, b) => new Date(b.createdAt) - new Date(a.createdAt));\n setNotifications(sortedNotifications);\n setUnreadCount(sortedNotifications.filter(n => !n.read).length);\n } catch (error) {\n console.error(\"Error loading notifications:\", error);\n }\n };\n const markNotificationsAsRead = async () => {\n try {\n const unreadNotifications = notifications.filter(n => !n.read);\n await Promise.all(unreadNotifications.map(notification => devbaseClient.updateEntity('notifications', notification.id, {\n ...notification,\n read: true\n })));\n setUnreadCount(0);\n setNotifications(prev => prev.map(n => ({\n ...n,\n read: true\n })));\n } catch (error) {\n console.error(\"Error marking notifications as read:\", error);\n }\n };\n const connectTwitter = () => {\n if (userWallet) {\n const twitterLoginUrl = `https://oauth.dev.fun/twitter/login/f847478297b60eb8cf84/${userWallet}`;\n openLink(twitterLoginUrl);\n }\n };\n const scrollToTop = () => {\n if (feedRef.current) {\n feedRef.current.scrollTo({\n top: 0,\n behavior: 'smooth'\n });\n }\n };\n const loadUserPosts = async userId => {\n setLoading(true);\n try {\n const userProfiles = await devbaseClient.listEntities('profiles', {\n userId: userId\n });\n if (userProfiles && userProfiles.length > 0) {\n setSelectedUser(userProfiles[0]);\n const posts = await devbaseClient.listEntities('posts', {\n userId: userId\n });\n const sortedPosts = posts.sort((a, b) => new Date(b.createdAt) - new Date(a.createdAt));\n const postsWithComments = await Promise.all(sortedPosts.map(async post => {\n const comments = await devbaseClient.listEntities('comments', {\n postId: post.id\n });\n return {\n ...post,\n comments,\n authorProfile: userProfiles[0]\n };\n }));\n setPosts(postsWithComments);\n setActiveTab('userProfile');\n }\n } catch (error) {\n console.error(\"Error loading user posts:\", error);\n } finally {\n setLoading(false);\n }\n };\n return

\n {}\n

\n \n {tipAnimations.map(animation => )}\n \n

\n \n {feedbackMessage &&

\n {feedbackMessage.type === 'success' ? : }\n

{feedbackMessage.message}

\n \n

}\n

\n $\"CryptoNest\"$ \n \n CryptoNest\n \n

\n \n \n \n

\n \n

\n\n {!userWallet &&

\n document.querySelector('[data-wallet-adapter-button]')?.click()}>\n $\"CryptoNest\"$ \n Connect Your Wallet\n \n

}\n \n {loading && activeTab !== 'profile' &&

Loading most active user posts...

}\n \n {!loading && mostActiveUser && mostActiveUserPosts.length > 0 && activeTab === 'feed' &&

\n $\"Most$ {\n e.target.onerror = null;\n e.target.src = `https://api.dicebear.com/6.x/shapes/svg?seed=${mostActiveUser.userId}`;\n }} />\n

\n $\"Nest\"$ \n

\n \n Most Active User\n

{mostActiveUser.displayName}

\n \n

\n {mostActiveUserPosts.map(post => )}\n

}\n \n

\n {}\n \n {mobileMenuOpen && \n \n

\n \n $\"CryptoNest\"$ \n \n

\n \n setSearchQuery(e.target.value)} placeholder=\"Search users or posts...\" className=\"w-full bg-purple-950/40 backdrop-blur-sm rounded-full pl-10 pr-4 py-3 focus:outline-none focus:ring-2 focus:ring-amber-500 text-white placeholder-purple-300 shadow-[0_0_15px_rgba(126,34,206,0.3)]\" />\n

\n \n {\n setActiveTab('feed');\n setMobileMenuOpen(false);\n }} icon={} label=\"Home\" />\n {\n setActiveTab('explore');\n setMobileMenuOpen(false);\n }} icon={} label=\"Explore\" />\n {\n setActiveTab('profile');\n setMobileMenuOpen(false);\n }} icon={} label=\"Profile\" />\n {\n setActiveTab('leaderboard');\n setMobileMenuOpen(false);\n }} icon={} label=\"Leaderboard\" />\n {\n setActiveTab('notifications');\n markNotificationsAsRead();\n setMobileMenuOpen(false);\n }} icon={} label=\"Notifications\" />\n {\n setActiveTab('faq');\n setMobileMenuOpen(false);\n }} icon={} label=\"FAQ\" />\n

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

\n setShowChatAssistant(!showChatAssistant)} className=\"bg-gradient-to-r from-purple-600 to-amber-600 p-3 rounded-full shadow-lg shadow-purple-700/20\">\n {showChatAssistant ? : }\n \n

\n\n {}\n \n {showChatAssistant && \n setShowChatAssistant(false)} />\n }\n \n\n {}\n

\n $\"CryptoNest\"$ \n

\n setActiveTab('feed')} icon={} label=\"Home\" />\n setActiveTab('explore')} icon={} label=\"Explore\" />\n setActiveTab('profile')} icon={} label=\"Profile\" />\n setActiveTab('leaderboard')} icon={} label=\"Leaderboard\" />\n {\n setActiveTab('notifications');\n markNotificationsAsRead();\n }} icon={} label=\"Notifications\" badge={unreadCount} />\n setActiveTab('nfts')} icon={} label=\"NFTs\" />\n setActiveTab('faq')} icon={} label=\"FAQ\" />\n

\n \n {userProfile &&

\n $\"Profile\"$ {\n e.target.onerror = null;\n e.target.src = `https://api.dicebear.com/6.x/bottts/svg?seed=${userWallet}`;\n }} />\n

{userProfile.displayName}

{userWallet?.substring(0, 8)}...

\n \n {userProfile.tokensEarned || 0} $CRYPTONEST\n

}\n

\n \n {}\n

\n {!userWallet && !loading &&

\n \n $\"Logo\"$ \n

\n Welcome to CryptoNest\n

\n Connect your Solana wallet to join our community, share content, and earn $CRYPTONEST tokens!\n

\n \n \n

}\n \n {userWallet && activeTab === 'feed' &&

\n loadPosts()} />\n \n

\n {loading ?

: posts.length === 0 ?

No posts yet. Be the first to share something!

: posts.map(post => )}\n

\n \n {}\n \n {showToTop && \n \n }\n \n

}\n \n {userWallet && activeTab === 'explore' &&

Explore Latest Posts

Discover the newest content from the CryptoNest community

\n \n

\n {loading ?

: posts.length === 0 ?

No posts yet. Be the first to share something!

: posts.map(post => )}\n

\n \n \n {showToTop && \n \n }\n \n

}\n \n {userWallet && activeTab === 'userProfile' && selectedUser &&

\n $\"Profile\"$ \n

\n $\"Nest\"$ \n

{selectedUser?.displayName}

{selectedUser.userId}

\n \n

{selectedUser?.bio || 'No bio yet'}

\n \n

\n {selectedUser.twitter && \n \n @{selectedUser.twitter}\n }\n \n {selectedUser?.website && \n \n Website\n }\n

\n \n

$CRYPTONEST

{selectedUser?.tokensEarned || 0}

\n \n

Posts

{posts.length}

\n \n

{selectedUser.displayName}'s Posts

\n {loading ?

: posts.length === 0 ?

This user hasn't posted anything yet.

: posts.map(post => loadUserPosts(selectedUser.userId)} onTipSent={loadLeaderboard} />)}\n

}\n \n {userWallet && activeTab === 'profile' && }\n \n {userWallet && activeTab === 'leaderboard' && }\n \n {userWallet && activeTab === 'notifications' && }\n \n {activeTab === 'faq' && }\n \n {activeTab === 'nfts' && userProfile && }\n

\n \n {}\n {userWallet &&

\n \n \n \n \n \n \n

}\n

;\n useEffect(() => {\n if (mobileMenuOpen) {\n document.body.classList.add('overflow-hidden');\n } else {\n document.body.classList.remove('overflow-hidden');\n }\n return () => {\n document.body.classList.remove('overflow-hidden');\n };\n }, [mobileMenuOpen]);\n useEffect(() => {\n window.setFeedbackMessage = setFeedbackMessage;\n const handleFeedbackEvent = event => {\n setFeedbackMessage(event.detail);\n setTimeout(() => setFeedbackMessage(null), 5000);\n };\n document.addEventListener('cryptonest:feedback', handleFeedbackEvent);\n return () => {\n document.removeEventListener('cryptonest:feedback', handleFeedbackEvent);\n window.setFeedbackMessage = null;\n };\n }, []);\n}\nfunction NavButton({\n active,\n onClick,\n icon,\n label,\n badge\n}) {\n return ;\n}\nfunction CreatePostForm({\n userWallet,\n devbaseClient,\n userProfile,\n onPostCreated\n}) {\n const [content, setContent] = useState('');\n const [imageUrl, setImageUrl] = useState('');\n const [isSubmitting, setIsSubmitting] = useState(false);\n const [errorMessage, setErrorMessage] = useState('');\n const [showImageInput, setShowImageInput] = useState(false);\n const [isUploading,,] = useState(false);\n const [, setUploadedFile] = useState(null);\n const [uploadPreview, setUploadPreview] = useState('');\n const [uploadProgress, setUploadProgress] = useState(0);\n const handleSubmit = async e => {\n e.preventDefault();\n if (!content.trim()) {\n setErrorMessage('Post cannot be empty');\n return;\n }\n setIsSubmitting(true);\n setErrorMessage('');\n try {\n const finalImageUrl = imageUrl.trim();\n const newPost = {\n userId: userWallet,\n content: content.trim(),\n imageUrl: finalImageUrl || null,\n likes: 0,\n tips: 0\n };\n await devbaseClient.createEntity('posts', newPost);\n socket.emit('post:created', {\n ...newPost,\n authorProfile: userProfile\n });\n setContent('');\n setImageUrl('');\n setShowImageInput(false);\n setUploadedFile(null);\n setUploadPreview('');\n setUploadProgress(0);\n if (onPostCreated) onPostCreated();\n window.setFeedbackMessage && window.setFeedbackMessage({\n type: 'success',\n message: 'Post created successfully!'\n });\n } catch (error) {\n console.error(\"Error creating post:\", error);\n setErrorMessage('Failed to create post. Please try again.');\n } finally {\n setIsSubmitting(false);\n }\n };\n return

\n $\"Profile\"$ \n

setContent(e.target.value)} placeholder=\"What's on your crypto mind?\" className=\"w-full bg-purple-950/30 rounded-lg p-3 focus:outline-none focus:ring-2 focus:ring-amber-500 resize-none text-white placeholder-purple-400 min-h-[80px]\" maxLength={280} />\n            \n            <AnimatePresence>\n              {showImageInput && <motion.div initial={{\n              opacity: 0,\n              height: 0\n            }} animate={{\n              opacity: 1,\n              height: 'auto'\n            }} exit={{\n              opacity: 0,\n              height: 0\n            }} className=\"mt-2 space-y-2\">\n                  {uploadPreview ? <div className=\"relative\">\n                      <img src={uploadPreview} alt=\"Preview\" className=\"w-full max-h-60 object-contain rounded-lg border border-purple-500/30\" />\n                      <button type=\"button\" onClick={() => {\n                  setUploadPreview('');\n                  setUploadedFile(null);\n                }} className=\"absolute top-2 right-2 bg-black/60 p-1 rounded-full hover:bg-black/80 transition-colors\">\n                        <X size={16} />\n                      </button>\n                    </div> : <input type=\"text\" value={imageUrl} onChange={e => setImageUrl(e.target.value)} placeholder=\"Enter image URL\" className=\"w-full bg-purple-950/30 rounded-lg p-3 focus:outline-none focus:ring-2 focus:ring-amber-500 text-white placeholder-purple-400\" />}\n                  \n                  {isUploading && <div className=\"w-full bg-purple-950/30 rounded-full h-2 overflow-hidden\">\n                      <div className=\"bg-gradient-to-r from-amber-500 to-purple-600 h-full transition-all duration-300\" style={{\n                  width: `${uploadProgress}%`\n                }}></div>\n                    </div>}\n                </motion.div>}\n            </AnimatePresence>\n            \n            {errorMessage && <p className=\"text-red-400 text-sm mt-1\">{errorMessage}</p>}\n            \n            <div className=\"flex justify-between mt-3\">\n              <div className=\"flex items-center gap-2\">\n                <button type=\"button\" onClick={() => setShowImageInput(!showImageInput)} className={`p-2 rounded-full hover:bg-purple-800/30 transition-colors ${showImageInput ? 'text-amber-400' : 'text-purple-400 hover:text-purple-300'}`}>\n                  {showImageInput ? <X size={18} /> : <ExternalLink size={18} />}\n                </button>\n              </div>\n              \n              <button type=\"submit\" disabled={isSubmitting || isUploading} className=\"bg-gradient-to-r from-amber-600 to-purple-600 px-4 py-2 rounded-full font-medium hover:opacity-90 transition-opacity flex items-center gap-2 disabled:opacity-50\">\n                {isSubmitting || isUploading ? <>\n                    <Loader size={16} className=\"animate-spin\" />\n                    {isUploading ? 'Uploading...' : 'Posting...'}\n                  </> : <>\n                    Post\n                    <Send size={16} />\n                  </>}\n              </button>\n            </div>\n          </div>\n        </div>\n      </form>\n    </div>;\n}\nfunction TipAnimation({\n  amount,\n  currency\n}) {\n  const coins = Array.from({\n    length: Math.min(amount * 2, 20)\n  }, (_, i) => ({\n    id: i,\n    x: Math.random() * 100,\n    delay: Math.random() * 0.5\n  }));\n  return <div className=\"absolute inset-0 overflow-hidden\">\n      {coins.map(coin => <motion.div key={coin.id} initial={{\n      x: `${coin.x}vw`,\n      y: '100vh',\n      rotate: 0,\n      opacity: 0\n    }} animate={{\n      y: '-20vh',\n      rotate: [0, 360],\n      opacity: [0, 1, 1, 0]\n    }} transition={{\n      duration: 3,\n      ease: \"easeOut\",\n      delay: coin.delay,\n      opacity: {\n        times: [0, 0.1, 0.8, 1]\n      }\n    }} className=\"absolute\">\n          <div className={`w-8 h-8 rounded-full flex items-center justify-center text-xs font-bold shadow-lg ${currency === 'SOL' ? 'bg-gradient-to-r from-purple-500 to-blue-500' : 'bg-gradient-to-r from-amber-500 to-yellow-500'}`}>\n            {currency === 'SOL' ? <Coins className=\"w-4 h-4 text-white\" /> : <img src=\"https://cdn.dev.fun/asset/f847478297b60eb8cf84/1000046980_7740b55b.png\" alt=\"CryptoNest\" className=\"w-5 h-5\" />}\n          </div>\n        </motion.div>)}\n    </div>;\n}\nfunction PostCard({\n  post,\n  currentUser,\n  devbaseClient,\n  onCommentAdded,\n  onTipSent,\n  isMostActive = false\n}) {\n  const [showComments, setShowComments] = useState(false);\n  const [newComment, setNewComment] = useState('');\n  const [isSubmitting, setIsSubmitting] = useState(false);\n  const [tipAmount, setTipAmount] = useState(1);\n  const [tipCurrency, setTipCurrency] = useState('CRYPTONEST');\n  const [showTipOptions, setShowTipOptions] = useState(false);\n  const [showNftMintModal, setShowNftMintModal] = useState(false);\n  const [mintingNft, setMintingNft] = useState(false);\n  const [isSendingTip, setIsSendingTip] = useState(false);\n  const [tipSuccess, setTipSuccess] = useState(false);\n  const [tipError, setTipError] = useState('');\n  const handleAddComment = async e => {\n    e.preventDefault();\n    if (!newComment.trim() || !currentUser) return;\n    setIsSubmitting(true);\n    try {\n      const comment = {\n        postId: post.id,\n        userId: currentUser,\n        content: newComment.trim()\n      };\n      await devbaseClient.createEntity('comments', comment);\n      socket.emit('comment:added', comment);\n      setNewComment('');\n      if (onCommentAdded) onCommentAdded();\n    } catch (error) {\n      console.error(\"Error adding comment:\", error);\n    } finally {\n      setIsSubmitting(false);\n    }\n  };\n  const handleSendTip = async () => {\n    setTipError('');\n    setTipSuccess(false);\n    if (!currentUser) {\n      document.querySelector('[data-wallet-adapter-button]')?.click();\n      return;\n    }\n    if (isSendingTip || currentUser === post.userId) return;\n    setIsSendingTip(true);\n    try {\n      const tip = {\n        senderId: currentUser,\n        recipientId: post.userId,\n        postId: post.id,\n        amount: tipAmount,\n        currency: tipCurrency\n      };\n      await devbaseClient.createEntity('tips', tip);\n      const notification = {\n        type: 'tip',\n        senderId: currentUser,\n        recipientId: post.userId,\n        postId: post.id,\n        amount: tipAmount,\n        currency: tipCurrency,\n        read: false\n      };\n      await devbaseClient.createEntity('notifications', notification);\n      if (tipCurrency === 'CRYPTONEST' && post.authorProfile) {\n        const updatedTokens = (post.authorProfile.tokensEarned || 0) + tipAmount;\n        await devbaseClient.updateEntity('profiles', post.authorProfile.id, {\n          ...post.authorProfile,\n          tokensEarned: updatedTokens\n        });\n      }\n      socket.emit('tip:sent', notification);\n      socket.emit('tip:animation', {\n        amount: tipAmount,\n        currency: tipCurrency,\n        recipientId: post.userId,\n        senderId: currentUser\n      });\n      if (onTipSent) onTipSent();\n      setTipSuccess(true);\n      setTimeout(() => setTipSuccess(false), 3000);\n      setTipAmount(1);\n      setShowTipOptions(false);\n      const currencyDisplay = tipCurrency === 'CRYPTONEST' ? '$CRYPTONEST' : 'SOL';\n      window.setFeedbackMessage && window.setFeedbackMessage({\n        type: 'success',\n        message: `Successfully tipped ${tipAmount} ${currencyDisplay} to ${post.authorProfile?.displayName || 'creator'}!`\n      });\n    } catch (error) {\n      console.error(\"Error sending tip:\", error);\n      setTipError('Failed to send tip. Please try again.');\n      window.setFeedbackMessage && window.setFeedbackMessage({\n        type: 'error',\n        message: 'Transaction failed. Please check your wallet balance and try again.'\n      });\n    } finally {\n      setIsSendingTip(false);\n    }\n  };\n  const viewUserProfile = async () => {\n    if (post.authorProfile && devbaseClient) {\n      const profiles = await devbaseClient.listEntities('profiles', {\n        userId: post.userId\n      });\n      if (profiles && profiles.length > 0) {\n        alert(`Viewing ${profiles[0].displayName}'s profile`);\n      }\n    }\n  };\n  const formatDate = dateString => {\n    const date = new Date(dateString);\n    const now = new Date();\n    const diffTime = Math.abs(now - date);\n    const diffDays = Math.floor(diffTime / (1000 * 60 * 60 * 24));\n    if (diffDays < 1) {\n      const hours = date.getHours();\n      const minutes = date.getMinutes();\n      return `Today at ${hours}:${minutes < 10 ? '0' + minutes : minutes}`;\n    } else if (diffDays === 1) {\n      return 'Yesterday';\n    } else if (diffDays < 7) {\n      return `${diffDays} days ago`;\n    } else {\n      return new Intl.DateTimeFormat('en-US', {\n        month: 'short',\n        day: 'numeric',\n        hour: '2-digit',\n        minute: '2-digit'\n      }).format(date);\n    }\n  };\n  useEffect(() => {\n    window.setFeedbackMessage = message => {\n      const event = new CustomEvent('cryptonest:feedback', {\n        detail: message\n      });\n      document.dispatchEvent(event);\n    };\n    const handleFeedback = event => {};\n    document.addEventListener('cryptonest:feedback', handleFeedback);\n    return () => document.removeEventListener('cryptonest:feedback', handleFeedback);\n  }, []);\n  const handleMintNft = async () => {\n    if (!currentUser || mintingNft) return;\n    setMintingNft(true);\n    try {\n      await devbaseClient.updateEntity('posts', post.id, {\n        ...post,\n        isNft: true,\n        nftMintedAt: new Date().toISOString()\n      });\n      const notification = {\n        type: 'nft',\n        senderId: 'system',\n        recipientId: currentUser,\n        postId: post.id,\n        read: false\n      };\n      await devbaseClient.createEntity('notifications', notification);\n      setShowNftMintModal(false);\n      window.setFeedbackMessage && window.setFeedbackMessage({\n        type: 'success',\n        message: 'Post successfully minted as an NFT! View it in your profile.'\n      });\n      if (onCommentAdded) onCommentAdded();\n    } catch (error) {\n      console.error(\"Error minting NFT:\", error);\n      window.setFeedbackMessage && window.setFeedbackMessage({\n        type: 'error',\n        message: 'Failed to mint NFT. Please try again.'\n      });\n    } finally {\n      setMintingNft(false);\n    }\n  };\n  return <div className={`${isMostActive ? 'bg-amber-900/20 border-l-4 border-amber-500' : post.isNft ? 'bg-gradient-to-br from-black/40 to-purple-900/40 border border-amber-500/30' : 'bg-black/20'} backdrop-blur-sm rounded-xl shadow-xl p-6 mb-6`}>\n      <div className=\"flex gap-4\">\n        <div className=\"relative\">\n          <img src={post.authorProfile?.profilePicture || `https://api.dicebear.com/6.x/shapes/svg?seed=${post.userId}`} alt=\"Profile\" className=\"w-12 h-12 rounded-full flex-shrink-0 bg-purple-800 cursor-pointer hover:ring-2 hover:ring-amber-400 transition-all object-cover border border-purple-500\" onClick={viewUserProfile} onError={e => {\n          e.target.onerror = null;\n          e.target.src = `https://api.dicebear.com/6.x/shapes/svg?seed=${post.userId}`;\n        }} />\n          {isMostActive && <div className=\"absolute -bottom-1 -right-1 bg-amber-600 rounded-full p-1\">\n              <Award size={12} className=\"text-white\" />\n            </div>}\n        </div>\n        <div className=\"flex-1 min-w-0\">\n          <div className=\"flex justify-between items-start\">\n            <div>\n              <div className=\"flex items-center gap-2\">\n                <p className=\"font-bold text-white cursor-pointer hover:text-amber-300 transition-colors\" onClick={viewUserProfile}>\n                  {post.authorProfile?.displayName || `User ${post.userId.substring(0, 4)}`}\n                </p>\n                {isMostActive && <span className=\"bg-gradient-to-r from-purple-600 to-amber-600 text-white text-xs px-2 py-0.5 rounded-full flex items-center gap-1\">\n                    <span>Most Active</span>\n                  </span>}\n              </div>\n              <p className=\"text-xs text-gray-300\">\n                {formatDate(post.createdAt)}\n              </p>\n            </div>\n          </div>\n          \n          <p className=\"mt-3 break-words text-white line-clamp-4 hover:line-clamp-none transition-all duration-300\">\n            {post.content}\n          </p>\n          \n          {post.imageUrl && <div className=\"mt-4 rounded-lg overflow-hidden\">\n              <img src={post.imageUrl} alt=\"Post image\" className=\"w-full h-auto max-h-96 object-cover\" loading=\"lazy\" onError={e => {\n            e.target.onerror = null;\n            e.target.src = \"https://api.dicebear.com/6.x/shapes/svg?seed=ImageError\";\n          }} />\n            </div>}\n          \n          <div className=\"flex mt-5 gap-3 text-sm flex-wrap\">\n            {!showTipOptions ? <button onClick={() => currentUser && currentUser !== post.userId ? setShowTipOptions(true) : handleSendTip()} disabled={isSendingTip || currentUser === post.userId} className={`flex items-center gap-2 px-3 py-1.5 rounded-lg transition-colors relative\n                    ${!currentUser ? 'bg-gradient-to-r from-purple-600 to-amber-600 text-white' : currentUser === post.userId ? 'bg-gray-700 text-gray-400 cursor-not-allowed' : isSendingTip ? 'bg-purple-700 text-white' : tipSuccess ? 'bg-green-600 text-white' : 'bg-gradient-to-r from-purple-600 to-amber-600 text-white hover:from-purple-700 hover:to-amber-700'}`}>\n                {isSendingTip ? <>\n                    <Loader size={16} className=\"animate-spin\" />\n                    <span>Processing...</span>\n                  </> : tipSuccess ? <>\n                    <Check size={16} />\n                    <span>Sent!</span>\n                  </> : <>\n                    <Award size={16} />\n                    <span>{!currentUser ? 'Connect to Tip' : 'Tip Creator'}</span>\n                  </>}\n              </button> : <>\n                <div className=\"flex bg-black/30 backdrop-blur-sm rounded-lg p-1 items-center\">\n                  <button onClick={() => setTipCurrency('CRYPTONEST')} className={`px-3 py-1 rounded-lg flex items-center gap-1 ${tipCurrency === 'CRYPTONEST' ? 'bg-amber-600' : 'hover:bg-purple-800/50'}`}>\n                    <img src=\"https://cdn.dev.fun/asset/f847478297b60eb8cf84/1000046980_7740b55b.png\" alt=\"CryptoNest\" className=\"w-4 h-4\" />\n                    <span>$CRYPTONEST</span>\n                  </button>\n                  <button onClick={() => setTipCurrency('SOL')} className={`px-3 py-1 rounded-lg flex items-center gap-1 ml-1 ${tipCurrency === 'SOL' ? 'bg-blue-600' : 'hover:bg-purple-800/50'}`}>\n                    <Coins size={14} />\n                    <span>SOL</span>\n                  </button>\n                </div>\n                \n                <div className=\"flex bg-black/30 backdrop-blur-sm rounded-lg p-1 items-center\">\n                  <button onClick={() => setTipAmount(Math.max(1, tipAmount - 1))} className=\"w-8 h-8 flex items-center justify-center hover:bg-purple-800/50 rounded-lg\">\n                    -\n                  </button>\n                  <span className=\"px-2\">{tipAmount}</span>\n                  <button onClick={() => setTipAmount(tipAmount + 1)} className=\"w-8 h-8 flex items-center justify-center hover:bg-purple-800/50 rounded-lg\">\n                    +\n                  </button>\n                </div>\n                \n                <button onClick={handleSendTip} disabled={isSendingTip} className={`px-3 py-1.5 rounded-lg flex items-center gap-1 ${isSendingTip ? 'bg-purple-700' : tipCurrency === 'CRYPTONEST' ? 'bg-amber-600 hover:bg-amber-700' : 'bg-blue-600 hover:bg-blue-700'}`}>\n                  <Send size={14} />\n                  <span>Send</span>\n                </button>\n                \n                <button onClick={() => setShowTipOptions(false)} className=\"px-2 py-1.5 rounded-lg hover:bg-purple-800/50\">\n                  <X size={14} />\n                </button>\n              </>}\n            \n            <button onClick={() => setShowComments(!showComments)} className=\"flex items-center gap-2 px-3 py-1.5 bg-purple-800/30 hover:bg-purple-700/40 rounded-lg transition-colors text-white\">\n              <MessageCircle size={16} />\n              <span>{post.comments?.length || 0} Comments</span>\n            </button>\n            \n            {}\n            {post.tips > 0 && currentUser === post.userId && !post.isNft && <button onClick={() => setShowNftMintModal(true)} className=\"flex items-center gap-2 px-3 py-1.5 bg-gradient-to-r from-purple-500 to-pink-500 hover:from-purple-600 hover:to-pink-600 rounded-lg transition-colors text-white\">\n                <Sparkles size={16} />\n                <span>Mint as NFT</span>\n              </button>}\n            \n            {}\n            {post.isNft && <div className=\"flex items-center gap-2 px-3 py-1.5 bg-gradient-to-r from-amber-500 to-yellow-500 rounded-lg text-white\">\n                <Sparkles size={16} />\n                <span>NFT</span>\n              </div>}\n          </div>\n          \n          {}\n          {showNftMintModal && <div className=\"fixed inset-0 bg-black/80 backdrop-blur-sm flex items-center justify-center z-[100]\">\n              <div className=\"bg-gradient-to-br from-indigo-950 to-purple-900 rounded-xl shadow-2xl p-6 max-w-md w-full mx-4 border border-purple-500/50\">\n                <div className=\"flex justify-between items-center mb-4\">\n                  <h3 className=\"text-xl font-bold text-amber-300\">Mint Post as NFT</h3>\n                  <button onClick={() => setShowNftMintModal(false)} className=\"p-1 rounded-full hover:bg-purple-800/50\">\n                    <X size={20} />\n                  </button>\n                </div>\n                \n                <div className=\"mb-6\">\n                  <p className=\"text-purple-300 mb-4\">Transform your post into a collectible NFT on the Solana blockchain. This will create a unique digital asset that others can collect and trade.</p>\n                  \n                  <div className=\"bg-black/30 rounded-lg p-4 mb-4 border border-purple-700/30\">\n                    <div className=\"flex items-start gap-3\">\n                      <img src={post.authorProfile?.profilePicture || `https://api.dicebear.com/6.x/shapes/svg?seed=${post.userId}`} alt=\"Profile\" className=\"w-10 h-10 rounded-full\" />\n                      <div>\n                        <p className=\"font-bold\">{post.authorProfile?.displayName || `User ${post.userId.substring(0, 4)}`}</p>\n                        <p className=\"text-sm mt-1\">{post.content}</p>\n                      </div>\n                    </div>\n                  </div>\n                  \n                  <div className=\"space-y-2\">\n                    <div className=\"flex justify-between text-sm\">\n                      <span className=\"text-purple-300\">NFT Name:</span>\n                      <span className=\"font-medium\">CryptoNest Post #{post.id.substring(0, 6)}</span>\n                    </div>\n                    <div className=\"flex justify-between text-sm\">\n                      <span className=\"text-purple-300\">Creator:</span>\n                      <span className=\"font-medium\">{post.authorProfile?.displayName || `User ${post.userId.substring(0, 4)}`}</span>\n                    </div>\n                    <div className=\"flex justify-between text-sm\">\n                      <span className=\"text-purple-300\">Network:</span>\n                      <span className=\"font-medium\">Solana</span>\n                    </div>\n                    <div className=\"flex justify-between text-sm\">\n                      <span className=\"text-purple-300\">Minting Fee:</span>\n                      <span className=\"font-medium\">0.01 SOL</span>\n                    </div>\n                  </div>\n                </div>\n                \n                <div className=\"flex gap-3\">\n                  <button onClick={() => setShowNftMintModal(false)} className=\"flex-1 px-4 py-2 bg-purple-800/50 hover:bg-purple-800/70 rounded-lg transition-colors\">\n                    Cancel\n                  </button>\n                  <button onClick={handleMintNft} disabled={mintingNft} className=\"flex-1 px-4 py-2 bg-gradient-to-r from-amber-600 to-purple-600 hover:from-amber-700 hover:to-purple-700 rounded-lg flex items-center justify-center gap-2 transition-colors disabled:opacity-50\">\n                    {mintingNft ? <>\n                        <Loader size={16} className=\"animate-spin\" />\n                        <span>Minting...</span>\n                      </> : <>\n                        <Sparkles size={16} />\n                        <span>Mint NFT</span>\n                      </>}\n                  </button>\n                </div>\n              </div>\n            </div>}\n          \n          {tipError && <div className=\"mt-3 text-red-400 text-sm flex items-center gap-2\">\n              <AlertCircle size={14} />\n              <span>{tipError}</span>\n            </div>}\n          \n          {showComments && <div className=\"mt-5 space-y-4\">\n              <form onSubmit={handleAddComment} className=\"flex gap-2\">\n                <input type=\"text\" value={newComment} onChange={e => setNewComment(e.target.value)} placeholder={currentUser ? \"Add a comment...\" : \"Connect wallet to comment\"} disabled={!currentUser} className=\"flex-1 bg-purple-950/30 rounded-lg p-3 focus:outline-none focus:ring-1 focus:ring-amber-500 text-white placeholder-purple-400 text-sm disabled:opacity-70\" />\n                <button type=\"submit\" disabled={isSubmitting || !newComment.trim() || !currentUser} className=\"bg-amber-600 hover:bg-amber-700 px-4 py-2 rounded-lg transition-colors disabled:opacity-50 disabled:bg-gray-700 text-sm\">\n                  {isSubmitting ? '...' : 'Post'}\n                </button>\n              </form>\n              \n              <div className=\"space-y-4 max-h-60 overflow-y-auto pr-2 custom-scrollbar\">\n                {post.comments && post.comments.length > 0 ? post.comments.map(comment => <div key={comment.id} className=\"flex gap-3 items-start\">\n                      <img src={`https://api.dicebear.com/6.x/shapes/svg?seed=${comment.userId}`} alt=\"Profile\" className=\"w-8 h-8 rounded-full flex-shrink-0 bg-purple-800 mt-1\" />\n                      <div className=\"flex-1 bg-purple-950/20 rounded-lg p-3\">\n                        <div className=\"flex justify-between items-center\">\n                          <p className=\"text-sm font-bold text-white\">\n                            {comment.userId === currentUser ? 'You' : `User ${comment.userId.substring(0, 4)}`}\n                          </p>\n                          <p className=\"text-xs text-gray-400\">\n                            {formatDate(comment.createdAt)}\n                          </p>\n                        </div>\n                        <p className=\"text-sm mt-2\">{comment.content}</p>\n                      </div>\n                    </div>) : <p className=\"text-sm text-gray-300 text-center py-3 bg-purple-950/20 rounded-lg\">No comments yet. Be the first to comment!</p>}\n              </div>\n            </div>}\n        </div>\n      </div>\n    </div>;\n}\nfunction ProfileView({\n  userProfile,\n  devbaseClient,\n  userWallet,\n  onProfileUpdated,\n  connectTwitter\n}) {\n  const [isEditing, setIsEditing] = useState(false);\n  const [formData, setFormData] = useState({\n    displayName: '',\n    bio: '',\n    profilePicture: '',\n    twitter: '',\n    website: ''\n  });\n  const [isUploading,,] = useState(false);\n  const [, setUploadedFile] = useState(null);\n  const [, setUploadPreview] = useState('');\n  const [, setUploadError] = useState('');\n  const [selectedProfilePic, setSelectedProfilePic] = useState('');\n  const [userPosts, setUserPosts] = useState([]);\n  const [loading, setLoading] = useState(true);\n  const [twitterUsername, setTwitterUsername] = useState('');\n  const cryptoProfilePics = [\"https://api.dicebear.com/6.x/bottts/svg?seed=bitcoin&backgroundColor=b6560a\", \"https://api.dicebear.com/6.x/bottts/svg?seed=ethereum&backgroundColor=553c9a\", \"https://api.dicebear.com/6.x/bottts/svg?seed=solana&backgroundColor=2563eb\", \"https://api.dicebear.com/6.x/bottts/svg?seed=doge&backgroundColor=b45309\", \"https://api.dicebear.com/6.x/bottts/svg?seed=shiba&backgroundColor=7c2d12\", \"https://api.dicebear.com/6.x/bottts/svg?seed=bnb&backgroundColor=b91c1c\", \"https://api.dicebear.com/6.x/bottts/svg?seed=cardano&backgroundColor=4c1d95\", \"https://api.dicebear.com/6.x/bottts/svg?seed=polygon&backgroundColor=1e40af\", \"https://api.dicebear.com/6.x/bottts/svg?seed=cosmos&backgroundColor=0f766e\", \"https://api.dicebear.com/6.x/bottts/svg?seed=avax&backgroundColor=a21caf\", \"https://api.dicebear.com/6.x/bottts/svg?seed=near&backgroundColor=166534\", \"https://api.dicebear.com/6.x/bottts/svg?seed=defi&backgroundColor=9f1239\", \"https://api.dicebear.com/6.x/bottts/svg?seed=nft&backgroundColor=374151\", \"https://api.dicebear.com/6.x/bottts/svg?seed=hodl&backgroundColor=155e75\", \"https://api.dicebear.com/6.x/bottts/svg?seed=whale&backgroundColor=5b21b6\"];\n  useEffect(() => {\n    if (userProfile) {\n      setFormData({\n        displayName: userProfile.displayName || '',\n        bio: userProfile.bio || '',\n        profilePicture: userProfile.profilePicture || '',\n        twitter: userProfile.twitter || '',\n        website: userProfile.website || ''\n      });\n    }\n    loadUserPosts();\n    checkTwitterConnection();\n  }, [userProfile, userWallet]);\n  const loadUserPosts = async () => {\n    setLoading(true);\n    try {\n      const posts = await devbaseClient.listEntities('posts', {\n        userId: userWallet\n      });\n      const sortedPosts = posts.sort((a, b) => new Date(b.createdAt) - new Date(a.createdAt));\n      const postsWithComments = await Promise.all(sortedPosts.map(async post => {\n        const comments = await devbaseClient.listEntities('comments', {\n          postId: post.id\n        });\n        return {\n          ...post,\n          comments,\n          authorProfile: userProfile\n        };\n      }));\n      setUserPosts(postsWithComments);\n    } catch (error) {\n      console.error(\"Error loading user posts:\", error);\n    } finally {\n      setLoading(false);\n    }\n  };\n  const checkTwitterConnection = async () => {\n    try {\n      const username = await devbaseClient.evalString('$USER_X_USERNAME');\n      if (username) {\n        setTwitterUsername(username);\n      }\n    } catch (error) {\n      console.error(\"Error checking Twitter connection:\", error);\n    }\n  };\n  const handleInputChange = e => {\n    const {\n      name,\n      value\n    } = e.target;\n    setFormData(prev => ({\n      ...prev,\n      [name]: value\n    }));\n  };\n  const handleSelectProfilePic = imageUrl => {\n    setSelectedProfilePic(imageUrl);\n    setFormData(prev => ({\n      ...prev,\n      profilePicture: imageUrl\n    }));\n  };\n  const handleSubmit = async e => {\n    e.preventDefault();\n    try {\n      await devbaseClient.updateEntity('profiles', userProfile.id, {\n        ...userProfile,\n        displayName: formData.displayName,\n        bio: formData.bio,\n        profilePicture: formData.profilePicture,\n        twitter: formData.twitter,\n        website: formData.website\n      });\n      setIsEditing(false);\n      if (onProfileUpdated) onProfileUpdated();\n      window.setFeedbackMessage && window.setFeedbackMessage({\n        type: 'success',\n        message: 'Profile updated successfully!'\n      });\n    } catch (error) {\n      console.error(\"Error updating profile:\", error);\n      window.setFeedbackMessage && window.setFeedbackMessage({\n        type: 'error',\n        message: 'Failed to update profile. Please try again.'\n      });\n    }\n  };\n  return <div className=\"space-y-6\">\n      <div className=\"bg-black/20 backdrop-blur-sm rounded-xl shadow-xl p-6\">\n        {isEditing ? <form onSubmit={handleSubmit} className=\"space-y-4\">\n            <div className=\"flex justify-center mb-4\">\n              <img src=\"https://cdn.dev.fun/asset/f847478297b60eb8cf84/1000046980_7740b55b.png\" alt=\"CryptoNest\" className=\"w-16 h-16\" />\n            </div>\n            <div>\n              <label className=\"block text-sm font-medium text-purple-300 mb-1\">Display Name</label>\n              <input type=\"text\" name=\"displayName\" value={formData.displayName} onChange={handleInputChange} className=\"w-full bg-purple-950/30 rounded-lg p-3 focus:outline-none focus:ring-2 focus:ring-amber-500 text-white\" maxLength={30} />\n            </div>\n            \n            <div>\n              <label className=\"block text-sm font-medium text-purple-300 mb-1\">Bio</label>\n              <textarea name=\"bio\" value={formData.bio} onChange={handleInputChange} className=\"w-full bg-purple-950/30 rounded-lg p-3 focus:outline-none focus:ring-2 focus:ring-amber-500 resize-none text-white h-20\" maxLength={160} />\n            </div>\n            \n            <div>\n              <label className=\"block text-sm font-medium text-purple-300 mb-2\">Choose a Crypto-Themed Profile Picture</label>\n              <div className=\"grid grid-cols-4 sm:grid-cols-5 gap-3 mb-4 p-4 bg-black/30 rounded-lg\">\n                {cryptoProfilePics.map((pic, index) => <div key={index} onClick={() => handleSelectProfilePic(pic)} className={`relative w-16 h-16 rounded-full overflow-hidden cursor-pointer border-2 transition-all transform hover:scale-105 hover:-rotate-3 ${selectedProfilePic === pic || !selectedProfilePic && formData.profilePicture === pic ? 'border-amber-500 scale-110 shadow-lg shadow-amber-500/30 rotate-3' : 'border-purple-800/30 hover:border-purple-500'}`}>\n                    <img src={pic} alt={`Crypto avatar ${index + 1}`} className=\"w-full h-full object-cover\" onError={e => {\n                e.target.onerror = null;\n                e.target.src = `https://api.dicebear.com/6.x/identicon/svg?seed=${index}`;\n              }} />\n                    {(selectedProfilePic === pic || !selectedProfilePic && formData.profilePicture === pic) && <div className=\"absolute inset-0 bg-amber-500/20 flex items-center justify-center\">\n                        <Check size={16} className=\"text-amber-300\" />\n                      </div>}\n                  </div>)}\n              </div>\n              <p className=\"text-center text-amber-300 text-xs mb-4\">Click on an avatar to select it</p>\n              \n              <div className=\"bg-purple-900/30 p-3 rounded-lg mt-2\">\n                <p className=\"text-purple-300 text-sm flex items-center gap-2\">\n                  <Award size={14} className=\"text-amber-400\" />\n                  <span>Select a crypto-themed avatar to represent yourself in the CryptoNest community</span>\n                </p>\n              </div>\n            </div>\n            \n            <div>\n              <label className=\"block text-sm font-medium text-purple-300 mb-1\">Website</label>\n              <input type=\"text\" name=\"website\" value={formData.website} onChange={handleInputChange} className=\"w-full bg-purple-950/30 rounded-lg p-3 focus:outline-none focus:ring-2 focus:ring-amber-500 text-white\" />\n            </div>\n            \n            <div className=\"flex gap-3\">\n              <button type=\"submit\" disabled={isUploading} className=\"bg-amber-600 hover:bg-amber-700 px-4 py-2 rounded-lg transition-colors flex-1 disabled:opacity-50 flex items-center justify-center gap-2\">\n                {isUploading ? <>\n                    <div className=\"w-4 h-4 border-2 border-white border-t-transparent rounded-full animate-spin\"></div>\n                    <span>Uploading...</span>\n                  </> : 'Save Profile'}\n              </button>\n              <button type=\"button\" onClick={() => {\n            setIsEditing(false);\n            setUploadedFile(null);\n            setUploadPreview('');\n            setUploadError('');\n          }} className=\"bg-gray-700 hover:bg-gray-800 px-4 py-2 rounded-lg transition-colors\">\n                Cancel\n              </button>\n            </div>\n          </form> : <div className=\"flex flex-col md:flex-row md:items-start gap-6\">\n            <div className=\"flex-shrink-0 relative\">\n              <img src={userProfile?.profilePicture || `https://api.dicebear.com/6.x/bottts/svg?seed=${userWallet}`} alt=\"Profile\" className=\"w-24 h-24 rounded-full bg-purple-800 mx-auto md:mx-0 border-4 border-purple-600 shadow-lg shadow-purple-600/20\" onError={e => {\n            e.target.onerror = null;\n            e.target.src = `https://api.dicebear.com/6.x/bottts/svg?seed=${userWallet}`;\n          }} />\n              <div className=\"absolute -bottom-2 -right-2\">\n                <img src=\"https://cdn.dev.fun/asset/f847478297b60eb8cf84/1000046980_7740b55b.png\" alt=\"Nest\" className=\"w-12 h-12\" />\n              </div>\n            </div>\n            <div className=\"flex-1 text-center md:text-left\">\n              <h2 className=\"text-2xl font-bold\">{userProfile?.displayName}</h2>\n              <p className=\"text-purple-300 text-sm mt-1 break-all\">{userWallet}</p>\n              \n              <div className=\"mt-4 space-y-2\">\n                <p className=\"text-sm\">{userProfile?.bio || 'No bio yet'}</p>\n                \n                <div className=\"flex flex-wrap gap-4 mt-3 justify-center md:justify-start\">\n                  {twitterUsername && <a href={`https://twitter.com/${twitterUsername}`} target=\"_blank\" rel=\"noopener noreferrer\" className=\"text-amber-400 hover:text-amber-300 flex items-center gap-1 text-sm\">\n                      <ExternalLink size={14} />\n                      <span>@{twitterUsername}</span>\n                    </a>}\n                  \n                  {userProfile?.website && <a href={userProfile.website} target=\"_blank\" rel=\"noopener noreferrer\" className=\"text-amber-400 hover:text-amber-300 flex items-center gap-1 text-sm\">\n                      <ExternalLink size={14} />\n                      <span>Website</span>\n                    </a>}\n                </div>\n              </div>\n              \n              <div className=\"flex items-center gap-4 mt-6 justify-center md:justify-start\">\n                <div className=\"bg-gradient-to-r from-amber-900/30 to-purple-900/30 px-4 py-2 rounded-lg border border-amber-700/30\">\n                  <p className=\"text-xs text-amber-300\">$CRYPTONEST</p>\n                  <p className=\"font-bold text-lg\">{userProfile?.tokensEarned || 0}</p>\n                </div>\n                \n                <div className=\"bg-purple-900/30 px-4 py-2 rounded-lg\">\n                  <p className=\"text-xs text-purple-300\">Posts</p>\n                  <p className=\"font-bold text-lg\">{userPosts.length}</p>\n                </div>\n              </div>\n              \n              <div className=\"mt-6 flex gap-3 justify-center md:justify-start\">\n                <button onClick={() => setIsEditing(true)} className=\"bg-gradient-to-r from-amber-600 to-purple-700 px-4 py-2 rounded-lg transition-colors\">\n                  Edit Profile\n                </button>\n                {!twitterUsername && <button onClick={connectTwitter} className=\"bg-blue-600 hover:bg-blue-700 px-4 py-2 rounded-lg transition-colors flex items-center gap-2\">\n                    Connect Twitter\n                  </button>}\n              </div>\n            </div>\n          </div>}\n      </div>\n      \n      <div>\n        <h3 className=\"text-xl font-bold mb-4\">Your Posts</h3>\n        <div className=\"space-y-4\">\n          {loading ? <div className=\"flex justify-center items-center h-40\">\n              <div className=\"w-10 h-10 border-4 border-amber-500 border-t-transparent rounded-full animate-spin\"></div>\n            </div> : userPosts.length === 0 ? <div className=\"bg-black/20 backdrop-blur-sm rounded-xl p-8 text-center\">\n              <p className=\"text-purple-300\">You haven't posted anything yet.</p>\n            </div> : userPosts.map(post => <PostCard key={post.id} post={post} currentUser={userWallet} devbaseClient={devbaseClient} onCommentAdded={loadUserPosts} />)}\n        </div>\n      </div>\n    </div>;\n}\nfunction LeaderboardView({\n  leaderboard,\n  monthlyLeaderboard,\n  userWallet\n}) {\n  const [selectedProfile, setSelectedProfile] = useState(null);\n  const [activeView, setActiveView] = useState('all-time');\n  const currentMonth = new Date().toLocaleDateString('en-US', {\n    month: 'long',\n    year: 'numeric'\n  });\n  return <div className=\"space-y-6\">\n      <div className=\"bg-black/20 backdrop-blur-sm rounded-xl shadow-xl p-6\">\n        <div className=\"flex justify-center mb-4\">\n          <div className=\"relative\">\n            <img src=\"https://cdn.dev.fun/asset/f847478297b60eb8cf84/1000046980_7740b55b.png\" alt=\"CryptoNest\" className=\"w-16 h-16\" />\n            <div className=\"absolute -top-3 -right-3\">\n              <Award size={24} className=\"text-amber-400\" />\n            </div>\n          </div>\n        </div>\n        <h2 className=\"text-2xl font-bold mb-6 text-center bg-clip-text text-transparent bg-gradient-to-r from-amber-400 to-purple-600\">\n          CryptoNest Leaderboard\n        </h2>\n        \n        <div className=\"flex justify-center mb-6\">\n          <div className=\"flex p-1 bg-purple-900/30 rounded-lg\">\n            <button onClick={() => setActiveView('all-time')} className={`px-4 py-2 rounded-lg transition-colors ${activeView === 'all-time' ? 'bg-amber-600' : 'hover:bg-purple-800/50'}`}>\n              All-Time\n            </button>\n            <button onClick={() => setActiveView('monthly')} className={`px-4 py-2 rounded-lg transition-colors ${activeView === 'monthly' ? 'bg-amber-600' : 'hover:bg-purple-800/50'}`}>\n              This Month\n            </button>\n          </div>\n        </div>\n        \n        {activeView === 'all-time' ? <div className=\"overflow-hidden\">\n            <div className=\"overflow-x-auto\">\n              <table className=\"w-full\">\n                <thead>\n                  <tr className=\"border-b border-purple-800/30\">\n                    <th className=\"px-4 py-3 text-left text-sm font-medium text-purple-300\">Rank</th>\n                    <th className=\"px-4 py-3 text-left text-sm font-medium text-purple-300\">User</th>\n                    <th className=\"px-4 py-3 text-right text-sm font-medium text-amber-300\">Activity</th>\n                    <th className=\"px-4 py-3 text-right text-sm font-medium text-amber-300\">$CRYPTONEST</th>\n                  </tr>\n                </thead>\n                <tbody className=\"divide-y divide-purple-800/20\">\n                  {leaderboard.map((profile, index) => <tr key={profile.id} onClick={() => setSelectedProfile(profile)} className={`hover:bg-purple-900/20 cursor-pointer transition-colors ${profile.userId === userWallet ? 'bg-purple-900/30' : ''}`}>\n                      <td className=\"px-4 py-3 text-sm\">\n                        {index === 0 && <span className=\"text-yellow-400\">🏆</span>}\n                        {index === 1 && <span className=\"text-gray-300\">🥈</span>}\n                        {index === 2 && <span className=\"text-yellow-700\">🥉</span>}\n                        {index > 2 && <span>{index + 1}</span>}\n                      </td>\n                      <td className=\"px-4 py-3\">\n                        <div className=\"flex items-center gap-3\">\n                          <img src={profile.profilePicture || `https://api.dicebear.com/6.x/shapes/svg?seed=${profile.userId}`} alt=\"Profile\" className=\"w-8 h-8 rounded-full bg-purple-800\" />\n                          <div>\n                            <p className=\"font-medium\">{profile.displayName}</p>\n                            <p className=\"text-xs text-purple-400\">{profile.userId.substring(0, 8)}...</p>\n                          </div>\n                        </div>\n                      </td>\n                      <td className=\"px-4 py-3 text-right font-medium text-purple-300\">{profile.activityScore || 0}</td>\n                      <td className=\"px-4 py-3 text-right font-bold text-amber-400\">{profile.tokensEarned || 0}</td>\n                    </tr>)}\n                  \n                  {leaderboard.length === 0 && <tr>\n                      <td colSpan={4} className=\"px-4 py-6 text-center text-purple-300\">\n                        No data available yet. Start earning $CRYPTONEST to appear on the leaderboard!\n                      </td>\n                    </tr>}\n                </tbody>\n              </table>\n            </div>\n          </div> : <div>\n            <div className=\"flex items-center justify-between mb-4\">\n              <h3 className=\"text-lg font-medium text-amber-300\">{currentMonth} Rankings</h3>\n              <div className=\"bg-amber-900/30 px-4 py-2 rounded-lg border border-amber-700/30\">\n                <p className=\"text-xs text-amber-300\">Monthly Rewards Pool</p>\n                <p className=\"font-bold text-center\">100 $CRYPTONEST</p>\n              </div>\n            </div>\n            \n            <div className=\"overflow-hidden\">\n              <div className=\"overflow-x-auto\">\n                <table className=\"w-full\">\n                  <thead>\n                    <tr className=\"border-b border-purple-800/30\">\n                      <th className=\"px-4 py-3 text-left text-sm font-medium text-purple-300\">Rank</th>\n                      <th className=\"px-4 py-3 text-left text-sm font-medium text-purple-300\">User</th>\n                      <th className=\"px-4 py-3 text-right text-sm font-medium text-purple-300\">Activity</th>\n                      <th className=\"px-4 py-3 text-right text-sm font-medium text-amber-300\">Reward</th>\n                    </tr>\n                  </thead>\n                  <tbody className=\"divide-y divide-purple-800/20\">\n                    {monthlyLeaderboard.map((profile, index) => <tr key={profile.id} onClick={() => setSelectedProfile(profile)} className={`hover:bg-purple-900/20 cursor-pointer transition-colors ${profile.userId === userWallet ? 'bg-purple-900/30' : ''}`}>\n                        <td className=\"px-4 py-3 text-sm\">\n                          {index === 0 && <span className=\"text-yellow-400\">🏆</span>}\n                          {index === 1 && <span className=\"text-gray-300\">🥈</span>}\n                          {index === 2 && <span className=\"text-yellow-700\">🥉</span>}\n                          {index > 2 && <span>{index + 1}</span>}\n                        </td>\n                        <td className=\"px-4 py-3\">\n                          <div className=\"flex items-center gap-3\">\n                            <img src={profile.profilePicture || `https://api.dicebear.com/6.x/shapes/svg?seed=${profile.userId}`} alt=\"Profile\" className=\"w-8 h-8 rounded-full bg-purple-800\" />\n                            <div>\n                              <p className=\"font-medium\">{profile.displayName}</p>\n                              <p className=\"text-xs text-purple-400\">{profile.userId.substring(0, 8)}...</p>\n                            </div>\n                          </div>\n                        </td>\n                        <td className=\"px-4 py-3 text-right font-medium text-purple-300\">\n                          {profile.monthlyActivityScore || 0}\n                        </td>\n                        <td className=\"px-4 py-3 text-right\">\n                          {index === 0 ? <div className=\"font-bold text-amber-400 flex items-center justify-end gap-1\">\n                              <Gift size={16} className=\"text-amber-300\" />\n                              <span>50 $CRYPTONEST</span>\n                            </div> : index === 1 ? <div className=\"font-bold text-amber-400 flex items-center justify-end gap-1\">\n                              <Gift size={16} className=\"text-amber-300\" />\n                              <span>30 $CRYPTONEST</span>\n                            </div> : index === 2 ? <div className=\"font-bold text-amber-400 flex items-center justify-end gap-1\">\n                              <Gift size={16} className=\"text-amber-300\" />\n                              <span>20 $CRYPTONEST</span>\n                            </div> : <span className=\"text-purple-300\">-</span>}\n                        </td>\n                      </tr>)}\n                    \n                    {monthlyLeaderboard.length === 0 && <tr>\n                        <td colSpan={4} className=\"px-4 py-6 text-center text-purple-300\">\n                          No monthly activity yet. Start posting and tipping to earn rewards!\n                        </td>\n                      </tr>}\n                  </tbody>\n                </table>\n              </div>\n            </div>\n            \n            <div className=\"mt-4 bg-purple-900/30 rounded-lg p-4\">\n              <div className=\"flex items-center gap-2 mb-2\">\n                <Calendar size={16} className=\"text-amber-300\" />\n                <h4 className=\"font-medium text-amber-300\">Monthly Rewards System</h4>\n              </div>\n              <p className=\"text-sm text-purple-200\">\n                At the end of each month, the top 3 contributors receive $CRYPTONEST tokens automatically distributed to their wallets. Winners are selected based on activity score and community contributions.\n              </p>\n            </div>\n          </div>}\n      </div>\n      \n      {selectedProfile && <div className=\"bg-black/20 backdrop-blur-sm rounded-xl shadow-xl p-6\">\n          <div className=\"flex justify-between items-start mb-4\">\n            <h3 className=\"text-xl font-bold\">User Profile</h3>\n            <button onClick={() => setSelectedProfile(null)} className=\"text-purple-400 hover:text-purple-300\">\n              <X size={20} />\n            </button>\n          </div>\n          \n          <div className=\"flex flex-col md:flex-row md:items-start gap-6\">\n            <div className=\"flex-shrink-0 relative\">\n              <img src={selectedProfile.profilePicture || `https://api.dicebear.com/6.x/shapes/svg?seed=${selectedProfile.userId}`} alt=\"Profile\" className=\"w-24 h-24 rounded-full bg-purple-800 mx-auto md:mx-0\" />\n              <div className=\"absolute -bottom-2 -right-2\">\n                <img src=\"https://cdn.dev.fun/asset/f847478297b60eb8cf84/1000046980_7740b55b.png\" alt=\"Nest\" className=\"w-10 h-10\" />\n              </div>\n            </div>\n            <div className=\"flex-1 text-center md:text-left\">\n              <h2 className=\"text-2xl font-bold\">{selectedProfile.displayName}</h2>\n              <p className=\"text-purple-300 text-sm mt-1\">{selectedProfile.userId.substring(0, 8)}...</p>\n              \n              <div className=\"mt-4\">\n                <p className=\"text-sm\">{selectedProfile.bio || 'No bio available'}</p>\n                \n                <div className=\"flex flex-wrap gap-4 mt-3 justify-center md:justify-start\">\n                  {selectedProfile.twitter && <a href={`https://twitter.com/${selectedProfile.twitter}`} target=\"_blank\" rel=\"noopener noreferrer\" className=\"text-amber-400 hover:text-amber-300 flex items-center gap-1 text-sm\">\n                      <ExternalLink size={14} />\n                      <span>Twitter</span>\n                    </a>}\n                  \n                  {selectedProfile.website && <a href={selectedProfile.website} target=\"_blank\" rel=\"noopener noreferrer\" className=\"text-amber-400 hover:text-amber-300 flex items-center gap-1 text-sm\">\n                      <ExternalLink size={14} />\n                      <span>Website</span>\n                    </a>}\n                </div>\n              </div>\n              \n              <div className=\"bg-gradient-to-r from-amber-900/30 to-purple-900/30 px-4 py-2 rounded-lg mt-6 inline-block border border-amber-700/30\">\n                <p className=\"text-xs text-amber-300\">$CRYPTONEST</p>\n                <p className=\"font-bold text-lg\">{selectedProfile.tokensEarned || 0}</p>\n              </div>\n            </div>\n          </div>\n        </div>}\n    </div>;\n}\nfunction NotificationsView({\n  notifications,\n  userWallet,\n  devbaseClient\n}) {\n  const formatDate = dateString => {\n    const date = new Date(dateString);\n    return new Intl.DateTimeFormat('en-US', {\n      month: 'short',\n      day: 'numeric',\n      hour: '2-digit',\n      minute: '2-digit'\n    }).format(date);\n  };\n  const getNotificationText = notification => {\n    switch (notification.type) {\n      case 'tip':\n        return `received a tip of ${notification.amount} $CRYPTONEST on your post`;\n      case 'comment':\n        return 'commented on your post';\n      case 'mention':\n        return 'mentioned you in a post';\n      case 'nft':\n        return 'Your post was successfully minted as an NFT!';\n      default:\n        return 'interacted with your content';\n    }\n  };\n  return <div className=\"bg-black/20 backdrop-blur-sm rounded-xl shadow-xl p-6\">\n      <h2 className=\"text-2xl font-bold mb-6 text-center\">Your Notifications</h2>\n      \n      <div className=\"space-y-4 max-h-[70vh] overflow-y-auto pr-2 custom-scrollbar\">\n        {notifications.length === 0 ? <div className=\"text-center py-8\">\n            <Bell size={40} className=\"mx-auto text-amber-600 mb-3\" />\n            <p className=\"text-purple-300\">No notifications yet. Interact with the community to get started!</p>\n          </div> : notifications.map(notification => <div key={notification.id} className={`flex gap-3 p-3 rounded-lg ${notification.read ? 'bg-purple-950/20' : 'bg-gradient-to-r from-amber-900/30 to-purple-900/30'}`}>\n              <img src={`https://api.dicebear.com/6.x/shapes/svg?seed=${notification.senderId}`} alt=\"User\" className=\"w-10 h-10 rounded-full flex-shrink-0 bg-purple-800\" />\n              <div className=\"flex-1\">\n                <div className=\"flex justify-between items-start\">\n                  <p className=\"text-sm\">\n                    <span className=\"font-bold\">User {notification.senderId.substring(0, 4)}</span>\n                    {' '}\n                    {getNotificationText(notification)}\n                  </p>\n                  <span className=\"text-xs text-purple-400\">{formatDate(notification.createdAt)}</span>\n                </div>\n                \n                {notification.type === 'tip' && <div className=\"mt-2 bg-gradient-to-r from-amber-900/40 to-purple-900/40 px-3 py-1 rounded-lg inline-block border border-amber-700/30\">\n                    <p className=\"text-sm font-medium text-amber-300\">+{notification.amount} $CRYPTONEST</p>\n                  </div>}\n              </div>\n            </div>)}\n      </div>\n    </div>;\n}\nfunction FAQView() {\n  const [expandedQuestion, setExpandedQuestion] = useState(null);\n  const faqItems = [{\n    id: 'about',\n    question: \"What is CryptoNest?\",\n    answer: \"CryptoNest is a Web3 social network where crypto enthusiasts can connect, share content, and earn $CRYPTONEST tokens. Our platform rewards quality contributions and community engagement with instant token tips!\"\n  }, {\n    id: 'tokens',\n    question: \"How do I earn $CRYPTONEST tokens?\",\n    answer: \"You can earn $CRYPTONEST tokens when other users tip your posts, by ranking in the monthly leaderboard, or by participating in community challenges. The more valuable your contributions, the more tokens you can earn!\"\n  }, {\n    id: 'wallet',\n    question: \"Why do I need to connect a wallet?\",\n    answer: \"Connecting your Solana wallet allows you to interact with CryptoNest's Web3 features - sending and receiving token tips, minting NFTs from your posts, and building your on-chain reputation.\"\n  }, {\n    id: 'nfts',\n    question: \"How do I mint my posts as NFTs?\",\n    answer: \"When your posts receive tips from the community, you'll see a 'Mint as NFT' button appear. Click it to transform your post into a unique digital collectible on the Solana blockchain!\"\n  }, {\n    id: 'leaderboard',\n    question: \"How does the leaderboard work?\",\n    answer: \"Our leaderboard ranks users based on their activity score and $CRYPTONEST earnings. Post quality content, receive tips, and engage with others to climb the ranks! At the end of each month, top performers receive token rewards.\"\n  }, {\n    id: 'twitter',\n    question: \"Why should I connect my Twitter account?\",\n    answer: \"Connecting your Twitter account helps you establish your identity on CryptoNest and makes it easier for other crypto enthusiasts to find and follow you across platforms.\"\n  }, {\n    id: 'tips',\n    question: \"How do I tip other users?\",\n    answer: \"To tip another user, find a post you appreciate, click the 'Tip Creator' button, select $CRYPTONEST or SOL as your currency, choose an amount, and click 'Send'. The tokens will be transferred directly to the creator's wallet.\"\n  }, {\n    id: 'notifications',\n    question: \"What are notifications for?\",\n    answer: \"Notifications alert you when someone tips your post, comments on your content, mentions you, or when one of your posts is successfully minted as an NFT. Check your notification tab regularly to stay connected!\"\n  }, {\n    id: 'rewards',\n    question: \"Tell me about monthly rewards\",\n    answer: \"Each month, the top 3 most active and valued contributors receive automatic token rewards: 50 $CRYPTONEST for 1st place, 30 for 2nd place, and 20 for 3rd place. Stay active to increase your chances of winning!\"\n  }, {\n    id: 'future',\n    question: \"What features are coming to CryptoNest?\",\n    answer: \"We're constantly evolving! Future updates will include enhanced NFT functionality, community governance, token staking rewards, integrated DEX features, and expanded social capabilities. Stay tuned for announcements!\"\n  }];\n  const toggleQuestion = id => {\n    setExpandedQuestion(expandedQuestion === id ? null : id);\n  };\n  return <div className=\"bg-black/20 backdrop-blur-sm rounded-xl shadow-xl p-6\">\n      <div className=\"flex justify-center mb-4\">\n        <img src=\"https://cdn.dev.fun/asset/f847478297b60eb8cf84/1000046980_7740b55b.png\" alt=\"CryptoNest\" className=\"w-16 h-16\" />\n      </div>\n      <h2 className=\"text-2xl font-bold mb-6 text-center bg-clip-text text-transparent bg-gradient-to-r from-amber-400 to-purple-600\">\n        Frequently Asked Questions\n      </h2>\n      \n      <div className=\"max-w-3xl mx-auto space-y-4\">\n        {faqItems.map(item => <div key={item.id} className={`bg-gradient-to-r rounded-lg overflow-hidden transition-all duration-300 ${expandedQuestion === item.id ? 'from-amber-900/30 to-purple-900/30 border border-amber-500/30' : 'from-black/30 to-purple-900/20 hover:from-purple-900/30 hover:to-black/30'}`}>\n            <button onClick={() => toggleQuestion(item.id)} className=\"w-full px-6 py-4 text-left flex justify-between items-center\">\n              <span className=\"font-semibold text-white\">{item.question}</span>\n              <div className={`transform transition-transform duration-200 ${expandedQuestion === item.id ? 'rotate-180' : ''}`}>\n                <ChevronUp size={18} className=\"text-purple-400\" />\n              </div>\n            </button>\n            \n            {expandedQuestion === item.id && <div className=\"px-6 pb-4 animate-fadeIn\">\n                <p className=\"text-purple-200\">{item.answer}</p>\n              </div>}\n          </div>)}\n      </div>\n      \n      <div className=\"mt-8 bg-gradient-to-r from-purple-900/30 to-amber-900/30 p-5 rounded-lg max-w-3xl mx-auto\">\n        <h3 className=\"font-medium text-amber-300 mb-3 flex items-center gap-2\">\n          <HelpCircle size={18} />\n          <span>Still have questions?</span>\n        </h3>\n        <p className=\"text-purple-200 mb-4\">\n          Can't find the answer you're looking for? Our AI assistant can help! Click the chat button in the bottom-right corner to get personalized support.\n        </p>\n        <button onClick={() => window.setFeedbackMessage && window.setFeedbackMessage({\n        type: 'success',\n        message: 'Chat assistant is available in the bottom-right corner of your screen!'\n      })} className=\"bg-gradient-to-r from-amber-600 to-purple-600 px-4 py-2 rounded-full font-medium hover:opacity-90 transition-opacity flex items-center gap-2 mx-auto\">\n          <Bot size={16} />\n          <span>Chat with CryptoBot</span>\n        </button>\n      </div>\n    </div>;\n}\nfunction NFTCollectionView({\n  userWallet,\n  devbaseClient\n}) {\n  const [nfts, setNfts] = useState([]);\n  const [loading, setLoading] = useState(true);\n  useEffect(() => {\n    loadUserNfts();\n  }, [userWallet, devbaseClient]);\n  const loadUserNfts = async () => {\n    setLoading(true);\n    try {\n      const posts = await devbaseClient.listEntities('posts', {\n        userId: userWallet,\n        isNft: true\n      });\n      const sortedNfts = posts.sort((a, b) => new Date(b.nftMintedAt || b.createdAt) - new Date(a.nftMintedAt || a.createdAt));\n      const enhancedNfts = await Promise.all(sortedNfts.map(async post => {\n        let tipsReceived = 0;\n        try {\n          const tips = await devbaseClient.listEntities('tips', {\n            postId: post.id\n          });\n          tipsReceived = tips.reduce((sum, tip) => sum + (tip.amount || 0), 0);\n        } catch (error) {\n          console.error(\"Error fetching tips for NFT:\", error);\n        }\n        let authorProfile = null;\n        try {\n          const profiles = await devbaseClient.listEntities('profiles', {\n            userId: post.userId\n          });\n          if (profiles && profiles.length > 0) {\n            authorProfile = profiles[0];\n          }\n        } catch (error) {\n          console.error(\"Error fetching author profile for NFT:\", error);\n        }\n        return {\n          ...post,\n          tipsReceived,\n          authorProfile\n        };\n      }));\n      setNfts(enhancedNfts);\n    } catch (error) {\n      console.error(\"Error loading NFTs:\", error);\n    } finally {\n      setLoading(false);\n    }\n  };\n  const formatDate = dateString => {\n    if (!dateString) return \"Unknown date\";\n    const date = new Date(dateString);\n    return new Intl.DateTimeFormat('en-US', {\n      month: 'short',\n      day: 'numeric',\n      year: 'numeric'\n    }).format(date);\n  };\n  return <div className=\"space-y-6\">\n      <div className=\"bg-black/20 backdrop-blur-sm rounded-xl shadow-xl p-6\">\n        <div className=\"flex justify-center mb-4\">\n          <div className=\"relative\">\n            <img src=\"https://cdn.dev.fun/asset/f847478297b60eb8cf84/1000046980_7740b55b.png\" alt=\"CryptoNest\" className=\"w-16 h-16\" />\n            <div className=\"absolute -top-3 -right-3\">\n              <Sparkles size={24} className=\"text-amber-400\" />\n            </div>\n          </div>\n        </div>\n        <h2 className=\"text-2xl font-bold mb-2 text-center bg-clip-text text-transparent bg-gradient-to-r from-amber-400 to-purple-600\">\n          Your NFT Collection\n        </h2>\n        <p className=\"text-center text-purple-300 mb-6\">Unique digital assets minted from your popular posts</p>\n      \n        {loading ? <div className=\"flex justify-center items-center h-40\">\n            <div className=\"w-10 h-10 border-4 border-amber-500 border-t-transparent rounded-full animate-spin\"></div>\n          </div> : nfts.length === 0 ? <div className=\"bg-black/30 rounded-xl p-8 text-center\">\n            <Sparkles size={40} className=\"mx-auto text-amber-500 mb-4\" />\n            <h3 className=\"text-xl font-bold text-white mb-2\">No NFTs Found</h3>\n            <p className=\"text-purple-300 mb-4\">You haven't minted any posts as NFTs yet.</p>\n            <p className=\"text-sm text-purple-400 max-w-md mx-auto\">\n              When your posts receive tips, you'll have the option to mint them as NFTs. \n              Create engaging content to earn tips from the community!\n            </p>\n            \n            <div className=\"mt-6 bg-gradient-to-r from-purple-900/30 to-amber-900/30 p-4 rounded-lg inline-block\">\n              <h4 className=\"font-medium text-amber-300 mb-2\">How to mint your first NFT:</h4>\n              <ol className=\"text-left text-sm text-purple-200 space-y-2\">\n                <li className=\"flex items-start gap-2\">\n                  <span className=\"bg-amber-600 rounded-full w-5 h-5 flex items-center justify-center text-xs flex-shrink-0 mt-0.5\">1</span>\n                  <span>Create engaging posts that get noticed</span>\n                </li>\n                <li className=\"flex items-start gap-2\">\n                  <span className=\"bg-amber-600 rounded-full w-5 h-5 flex items-center justify-center text-xs flex-shrink-0 mt-0.5\">2</span>\n                  <span>Receive tips from the community</span>\n                </li>\n                <li className=\"flex items-start gap-2\">\n                  <span className=\"bg-amber-600 rounded-full w-5 h-5 flex items-center justify-center text-xs flex-shrink-0 mt-0.5\">3</span>\n                  <span>Look for the \"Mint as NFT\" button on your tipped posts</span>\n                </li>\n              </ol>\n            </div>\n          </div> : <div className=\"grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6\">\n            {nfts.map(nft => <div key={nft.id} className=\"bg-gradient-to-br from-purple-900/30 to-black/30 rounded-xl overflow-hidden shadow-lg border border-amber-500/30 hover:border-amber-500/60 transition-all hover:shadow-amber-500/20 hover:shadow-lg\">\n                <div className=\"relative\">\n                  {nft.imageUrl ? <img src={nft.imageUrl} alt=\"NFT\" className=\"w-full h-48 object-cover\" onError={e => {\n              e.target.onerror = null;\n              e.target.src = `https://api.dicebear.com/6.x/shapes/svg?seed=${nft.id}`;\n            }} /> : <div className=\"w-full h-48 bg-gradient-to-br from-purple-800/50 to-amber-800/50 flex items-center justify-center\">\n                      <div className=\"bg-black/40 backdrop-blur-sm p-4 rounded-lg max-w-[80%]\">\n                        <p className=\"text-sm text-white line-clamp-3\">{nft.content}</p>\n                      </div>\n                    </div>}\n                  <div className=\"absolute top-2 right-2 bg-amber-600 rounded-full p-1.5\">\n                    <Sparkles size={14} className=\"text-white\" />\n                  </div>\n                </div>\n                \n                <div className=\"p-4\">\n                  <h3 className=\"font-bold text-white mb-1 truncate\">CryptoNest NFT #{nft.id.substring(0, 6)}</h3>\n                  <p className=\"text-xs text-purple-300 mb-3\">Minted on {formatDate(nft.nftMintedAt || nft.createdAt)}</p>\n                  \n                  <div className=\"line-clamp-2 text-sm text-purple-200 mb-3 h-10 overflow-hidden\">\n                    {nft.content}\n                  </div>\n                  \n                  <div className=\"flex justify-between items-center pt-2 border-t border-purple-800/30\">\n                    <div className=\"flex items-center gap-1.5\">\n                      <img src={nft.authorProfile?.profilePicture || `https://api.dicebear.com/6.x/shapes/svg?seed=${nft.userId}`} alt=\"Creator\" className=\"w-5 h-5 rounded-full\" />\n                      <span className=\"text-xs text-purple-300\">Creator</span>\n                    </div>\n                    <div className=\"flex items-center gap-1 text-amber-400 text-xs font-medium\">\n                      <Award size={12} />\n                      <span>{nft.tipsReceived || 0} tips</span>\n                    </div>\n                  </div>\n                </div>\n              </div>)}\n          </div>}\n      </div>\n    </div>;\n}\nexport default App;","packageJson","{\"dependencies\":{\"react\":\"18.2.0\",\"framer-motion\":\"10.16.4\",\"lucide-react\":\"0.441.0\",\"@devfunlabs/web-sdk\":\"0.5.5\",\"socket.io-client\":\"4.7.2\",\"zod\":\"3.22.4\",\"recharts\":\"2.8.0\",\"react-router-dom\":\"6.18.0\",\"ai\":\"4.0.0\"}}","appFunctions",[],"token",{"_18":19,"_79":80,"_81":82,"_83":84,"_85":86,"_87":-5,"_88":-5,"_89":40,"_90":40,"_69":70},"symbol","CRYPTONEST","price",0.00000459,"marketcap",5254.77945067,"image","https://pump.mypinata.cloud/ipfs/bafybeib6yvij6dn2e6z4qvuzqe3e5zkh6khgfzzpskxxqpjmntbuixr7iq?img-width=256&img-dpr=2","website","twitter","devCount","appCount","upstreamApp","isLordOfDev","analytics",[95,99,101,103,105,107,109,111,113,115,117,119,121,123],{"_96":97,"_98":57},"day","2025-07-12","runCount",{"_96":100,"_98":57},"2025-07-13",{"_96":102,"_98":57},"2025-07-14",{"_96":104,"_98":57},"2025-07-15",{"_96":106,"_98":57},"2025-07-16",{"_96":108,"_98":57},"2025-07-17",{"_96":110,"_98":57},"2025-07-18",{"_96":112,"_98":57},"2025-07-19",{"_96":114,"_98":57},"2025-07-20",{"_96":116,"_98":57},"2025-07-21",{"_96":118,"_98":57},"2025-07-22",{"_96":120,"_98":57},"2025-07-23",{"_96":122,"_98":57},"2025-07-24",{"_96":124,"_98":57},"2025-07-25","snapshot","ogImage","https://cdn.dev.fun/og/image/f847478297b60eb8cf84/ce77e64b.webp","isDevbase","commitDetail","livestream","actionData","errors"]
</article></body></html>