[{"_1":2,"_144":-5,"_145":-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,"_142":-5,"_133":-7,"_143":17},"appDetail",{"_14":15,"_16":17,"_18":19,"_20":21,"_22":23,"_24":25,"_26":27,"_28":27,"_29":30,"_32":33,"_34":35,"_36":37,"_38":39,"_40":41,"_42":43,"_44":45,"_5":46,"_58":59,"_60":61,"_62":61,"_63":64,"_65":61,"_66":61,"_67":61,"_68":61,"_69":61,"_70":61,"_71":17,"_72":17,"_73":19,"_74":75,"_76":77,"_78":79,"_80":81,"_98":-5,"_99":17,"_100":17,"_101":102,"_133":33,"_134":135,"_136":17,"_137":138},"id","6ffe1641c605190ffb67","isMyApp",false,"projectId","ByPXrvff3HFTshr2LAKAwVSSJjd1dPT3vqej1R9Tpump","name","lartscape","description","Your insanely rewarding Solana-powered art bazaar where every purchase fuels the LARTCOIN ecosystem! Sell physical masterpieces alongside digital oddities while the community decides what's actually worth seeing through brutally honest percentage ratings.","brief","","isLive",true,"isPublic","tags",[31],"👑","cover","https://cdn.dev.fun/snapshot/6ffe1641c605190ffb67/36917_73c8a662.webp","cdnUrl","https://cdn.dev.fun/app/6ffe1641c605190ffb67/36917","createdAt",["D",1742288650204],"updatedAt",["D",1742728526789],"lastCommitId",["B","36917"],"tier",1,"credits",116,{"_14":47,"_48":49,"_50":49,"_51":52,"_53":49,"_54":55,"_56":57},"64662430-e9f7-4087-bc66-68535224648e","uniqueId","LEONARDOARTSOL","username","solanaWallet","FJQwCAaDho5se7zGpnfxZXBGCXEfQj4ZTF2hcaAqaXD4","displayName","bio","10-year-old artist and dev passionate about drawing and tokenizing anime-style art and crypto memes","avatar","https://cdn.dev.fun/avatar/64662430-e9f7-4087-bc66-68535224648e/e7a0205d.webp","commitCount",66,"forkCount",0,"likeCount","runsCount",174,"downvoteCount","upvoteCount","upvoteRate","commentCount","reportCount","visitorCount","isArchived","isRenamed","contractAddress","code","import { useState, useEffect, createContext, useContext, useRef, useLayoutEffect } from 'react';\nimport { WalletMultiButton } from \"@solana/wallet-adapter-react-ui\";\nimport { useWallet, useConnection } from \"@solana/wallet-adapter-react\";\nimport { WalletAdapterNetwork } from \"@solana/wallet-adapter-base\";\nimport { PhantomWalletAdapter, SolflareWalletAdapter } from \"@solana/wallet-adapter-wallets\";\nimport { DevfunWalletAdapter } from \"@devfunlabs/wallet-adapter-devfun\";\nimport { io } from 'socket.io-client';\nimport { Moon, Sun, ArrowUpDown, Sparkles, Palette, Brush, Zap, Upload, DollarSign, PenTool, Trash2, Eye, Rocket, Heart, Coins, Send, MessageSquare, Users, CheckCheck, Check, ChevronLeft, MessageCircle, Search, X, Filter, ExternalLink, Globe, Clock, Star } from 'lucide-react';\nimport { ConnectionProvider, WalletProvider } from \"@solana/wallet-adapter-react\";\nimport { WalletModalProvider } from \"@solana/wallet-adapter-react-ui\";\nimport { clusterApiUrl, LAMPORTS_PER_SOL, PublicKey, Transaction, SystemProgram } from \"@solana/web3.js\";\nimport { HashRouter, Routes, Route, Link, useNavigate, useLocation } from 'react-router-dom';\nimport { StateClient } from '@devfunlabs/state-client';\nimport \"@solana/wallet-adapter-react-ui/styles.css\";\nconst stateClient = new StateClient({\n baseURL: 'https://state.dev.fun',\n appId: '6ffe1641c605190ffb67'\n});\nconst ThemeContext = createContext({\n theme: 'light',\n toggleTheme: () => {}\n});\nconst useTheme = () => useContext(ThemeContext);\nconst DEV_WALLET = new PublicKey(\"FJQwCAaDho5se7zGpnfxZXBGCXEfQj4ZTF2hcaAqaXD4\");\nconst TAX_PERCENTAGE = 5;\nconst CURRENCY_INFO = {\n SOL: {\n symbol: 'SOL',\n icon: DollarSign,\n color: 'text-green-400'\n },\n USDC: {\n symbol: 'USDC',\n icon: DollarSign,\n color: 'text-blue-400'\n },\n LARTCOIN: {\n symbol: 'LARTCOIN',\n icon: Coins,\n color: 'text-pink-400'\n }\n};\nconst SearchContext = createContext({\n searchTerm: '',\n setSearchTerm: () => {},\n searchResults: [],\n setSearchResults: () => {},\n isSearching: false,\n setIsSearching: () => {},\n metResults: [],\n setMetResults: () => {},\n isLoadingMet: false,\n setIsLoadingMet: () => {}\n});\nconst useSearch = () => useContext(SearchContext);\nconst SearchProvider = ({\n children\n}) => {\n const [searchTerm, setSearchTerm] = useState('');\n const [searchResults, setSearchResults] = useState([]);\n const [isSearching, setIsSearching] = useState(false);\n const [metResults, setMetResults] = useState([]);\n const [isLoadingMet, setIsLoadingMet] = useState(false);\n return \n {children}\n ;\n};\nconst ThemeProvider = ({\n children\n}) => {\n const [theme, setTheme] = useState(() => {\n const savedTheme = localStorage.getItem('lartscape-theme');\n if (savedTheme) {\n return savedTheme;\n }\n if (window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches) {\n return 'dark';\n }\n return 'light';\n });\n const [, forceRerender] = useState(0);\n useEffect(() => {\n if (theme === 'dark') {\n document.documentElement.classList.add('dark');\n document.documentElement.style.colorScheme = 'dark';\n document.body.classList.add('dark-theme');\n } else {\n document.documentElement.classList.remove('dark');\n document.documentElement.style.colorScheme = 'light';\n document.body.classList.remove('dark-theme');\n }\n localStorage.setItem('lartscape-theme', theme);\n document.documentElement.classList.add('theme-transition');\n const transitionTimeout = setTimeout(() => {\n document.documentElement.classList.remove('theme-transition');\n }, 500);\n return () => clearTimeout(transitionTimeout);\n }, [theme]);\n const toggleTheme = () => {\n setTheme(prevTheme => {\n const newTheme = prevTheme === 'light' ? 'dark' : 'light';\n setTimeout(() => forceRerender(n => n + 1), 50);\n return newTheme;\n });\n };\n return \n {children}\n ;\n};\nconst ScrollPositionContext = createContext({\n saveScrollPosition: () => {},\n restoreScrollPosition: () => {}\n});\nconst useScrollPosition = () => useContext(ScrollPositionContext);\nconst ScrollPositionProvider = ({\n children\n}) => {\n const [savedPosition, setSavedPosition] = useState(0);\n const saveScrollPosition = () => {\n setSavedPosition(window.scrollY);\n };\n const restoreScrollPosition = () => {\n setTimeout(() => {\n window.scrollTo({\n top: savedPosition,\n behavior: 'instant'\n });\n }, 0);\n };\n return \n {children}\n ;\n};\nconst AppWithProvider = () => {\n const network = WalletAdapterNetwork.Devnet;\n const endpoint = clusterApiUrl(network);\n const [loaded, setLoaded] = useState(false);\n const wallets = [new PhantomWalletAdapter(), new SolflareWalletAdapter(), new DevfunWalletAdapter()];\n useEffect(() => {\n window.dispatchEvent = function (event) {\n return false;\n };\n setLoaded(true);\n }, []);\n if (!loaded) {\n return null;\n }\n return \n \n \n \n \n \n \n \n \n \n \n \n \n \n ;\n};\nconst ThemeToggle = () => {\n const {\n theme,\n toggleTheme\n } = useTheme();\n const handleToggle = () => {\n if (navigator.vibrate) {\n navigator.vibrate(10);\n }\n toggleTheme();\n };\n return ;\n};\nconst fetchMetArtSearch = async query => {\n try {\n const encodedQuery = encodeURIComponent(query);\n const response = await fetch(`https://proxy.dev.fun?url=${encodeURIComponent(`https://collectionapi.metmuseum.org/public/collection/v1/search?q=${encodedQuery}`)}`, {\n method: 'GET',\n headers: {\n 'Accept': 'application/json'\n }\n });\n if (!response.ok) {\n throw new Error(`API request failed with status ${response.status}`);\n }\n const data = await response.json();\n return data;\n } catch (error) {\n console.error('Error fetching from Met API:', error);\n return {\n objectIDs: []\n };\n }\n};\nconst fetchMetArtObject = async objectID => {\n try {\n const response = await fetch(`https://proxy.dev.fun?url=${encodeURIComponent(`https://collectionapi.metmuseum.org/public/collection/v1/objects/${objectID}`)}`, {\n method: 'GET',\n headers: {\n 'Accept': 'application/json'\n }\n });\n if (!response.ok) {\n throw new Error(`API request failed with status ${response.status}`);\n }\n const data = await response.json();\n return data;\n } catch (error) {\n console.error('Error fetching object from Met API:', error);\n return null;\n }\n};\nconst SearchModal = () => {\n const {\n searchTerm,\n setSearchTerm,\n searchResults,\n setSearchResults,\n isSearching,\n setIsSearching,\n metResults,\n setMetResults,\n isLoadingMet,\n setIsLoadingMet\n } = useSearch();\n const navigate = useNavigate();\n const [loading, setLoading] = useState(false);\n const [filterType, setFilterType] = useState('all');\n const [searchMode, setSearchMode] = useState('both');\n const searchInputRef = useRef(null);\n const {\n saveScrollPosition,\n restoreScrollPosition\n } = useScrollPosition();\n useEffect(() => {\n if (isSearching) {\n setSearchMode('both');\n }\n }, [isSearching]);\n useEffect(() => {\n if (isSearching && searchInputRef.current) {\n searchInputRef.current.focus();\n }\n }, [isSearching]);\n useEffect(() => {\n const performSearch = async () => {\n saveScrollPosition();\n if (!searchTerm.trim()) {\n setSearchResults([]);\n setMetResults([]);\n restoreScrollPosition();\n return;\n }\n try {\n setLoading(true);\n if (searchMode === 'lartscape' || searchMode === 'both') {\n const allArtworks = await stateClient.getEntities('artworks');\n const filteredResults = allArtworks.filter(artwork => {\n const searchTermLower = searchTerm.toLowerCase();\n const titleMatch = artwork.title?.toLowerCase().includes(searchTermLower);\n const descriptionMatch = artwork.description?.toLowerCase().includes(searchTermLower);\n const categoryMatch = artwork.type?.toLowerCase().includes(searchTermLower);\n const creatorMatch = artwork.creatorName?.toLowerCase().includes(searchTermLower);\n const walletMatch = artwork.creatorWallet?.toLowerCase().includes(searchTermLower);\n if (filterType === 'all') {\n return titleMatch || descriptionMatch || categoryMatch || creatorMatch || walletMatch;\n } else if (filterType === 'title') {\n return titleMatch;\n } else if (filterType === 'category') {\n return categoryMatch;\n } else if (filterType === 'artist') {\n return creatorMatch;\n } else if (filterType === 'wallet') {\n return walletMatch;\n }\n return false;\n });\n setSearchResults(filteredResults);\n }\n if (searchMode === 'museum' || searchMode === 'both') {\n setIsLoadingMet(true);\n const metSearchResults = await fetchMetArtSearch(searchTerm);\n if (metSearchResults.objectIDs && metSearchResults.objectIDs.length > 0) {\n const limitedIds = metSearchResults.objectIDs.slice(0, 5);\n const objectDetailsPromises = limitedIds.map(id => fetchMetArtObject(id));\n const objectsDetails = await Promise.all(objectDetailsPromises);\n const validObjectsDetails = objectsDetails.filter(obj => obj !== null);\n setMetResults(validObjectsDetails);\n } else {\n setMetResults([]);\n }\n setIsLoadingMet(false);\n }\n } catch (error) {\n console.error('Search failed:', error);\n setSearchResults([]);\n setMetResults([]);\n } finally {\n setLoading(false);\n }\n };\n const debounceTimer = setTimeout(() => {\n performSearch();\n }, 500);\n return () => clearTimeout(debounceTimer);\n }, [searchTerm, filterType, searchMode, setSearchResults, setMetResults, setIsLoadingMet]);\n const handleSearch = e => {\n e.preventDefault();\n saveScrollPosition();\n navigate('/search');\n setIsSearching(false);\n restoreScrollPosition();\n };\n const handleCloseSearch = () => {\n saveScrollPosition();\n setIsSearching(false);\n setSearchTerm('');\n restoreScrollPosition();\n };\n if (!isSearching) return null;\n return

\n \n

\n Search in:\n \n \n \n

\n \n

\n \n Filter by:\n \n \n \n \n \n \n \n \n \n \n

\n \n

\n {loading || isLoadingMet ?

: searchResults.length > 0 || metResults.length > 0 ?

\n {}\n {searchResults.length > 0 && (searchMode === 'lartscape' || searchMode === 'both') &&

\n \n LARTSCAPE Gallery\n \n ({searchResults.length} result{searchResults.length !== 1 ? 's' : ''})\n \n

\n \n

\n {searchResults.slice(0, 6).map(artwork =>

{\n navigate('/search');\n setIsSearching(false);\n }}>\n

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

\n \n

}\n

{artwork.title}

by {artwork.creatorName}

\n {artwork.type}\n

\n \n {artwork.price} {artwork.currency || 'SOL'}\n

)}\n

\n \n {searchResults.length > 6 &&

\n \n

}\n

}\n \n {}\n {metResults.length > 0 && (searchMode === 'museum' || searchMode === 'both') &&

\n \n The Metropolitan Museum of Art\n \n ({metResults.length} result{metResults.length !== 1 ? 's' : ''})\n \n

\n \n

\n {metResults.map(artObject =>

\n {artObject.primaryImage ? {artObject.title}

\n \n

}\n

\n \n

{artObject.title}

\n \n

\n {artObject.artistDisplayName &&

\n Artist: {artObject.artistDisplayName}\n

}\n \n {artObject.objectDate &&

\n \n {artObject.objectDate}\n

}\n \n {artObject.medium &&

\n Medium: {artObject.medium}\n

}\n

\n \n

\n e.stopPropagation()}>\n \n View at Museum\n ✨\n \n

)}\n

}\n

: searchTerm.trim() !== '' ?

\n \n

No results found

\n Try different keywords or browse the gallery\n

\n \n

Start typing to search

\n Search for artworks, artists, or items from The Metropolitan Museum of Art\n

}\n

\n \n

;\n};\nconst Header = () => {\n const {\n publicKey,\n connected,\n connecting,\n disconnect\n } = useWallet();\n const {\n theme\n } = useTheme();\n const {\n setIsSearching\n } = useSearch();\n const [showWelcome, setShowWelcome] = useState(false);\n const [showDisconnectConfirm, setShowDisconnectConfirm] = useState(false);\n useEffect(() => {\n if (connected && publicKey) {\n setShowWelcome(true);\n const timer = setTimeout(() => setShowWelcome(false), 5000);\n return () => clearTimeout(timer);\n }\n }, [connected, publicKey]);\n const handleDisconnect = () => {\n setShowDisconnectConfirm(true);\n };\n const confirmDisconnect = () => {\n disconnect();\n setShowDisconnectConfirm(false);\n };\n return

\n {showWelcome &&

\n \n Welcome to LARTSCAPE! Your wallet is connected!\n

}\n \n {}\n {showDisconnectConfirm &&

Disconnect Wallet?

Are you sure you want to disconnect your wallet from LARTSCAPE?

\n \n \n

}\n \n

\n \n \n LART\n SCAPE\n \n \n \n

\n \n Gallery\n \n \n Sell Art\n \n \n My Collection\n \n \n Chat\n \n \n \n Donate\n \n

\n \n \n

\n {connected &&

}\n {!connected ? :

\n \n {publicKey.toString().substring(0, 4)}...{publicKey.toString().substring(publicKey.toString().length - 4)}\n \n

\n Disconnect\n

}\n

;\n};\nconst Footer = () => {\n const {\n theme\n } = useTheme();\n return ;\n};\nconst ArtworkCard = ({\n artwork,\n onDelete\n}) => {\n const {\n publicKey,\n sendTransaction\n } = useWallet();\n const {\n connection\n } = useConnection();\n const navigate = useNavigate();\n const [isLoading, setIsLoading] = useState(false);\n const [isCreator, setIsCreator] = useState(false);\n const [showContactOptions, setShowContactOptions] = useState(false);\n const {\n saveScrollPosition,\n restoreScrollPosition\n } = useScrollPosition();\n useEffect(() => {\n if (publicKey && artwork.creatorWallet) {\n try {\n const walletStr = publicKey.toString().toLowerCase().trim();\n const creatorStr = typeof artwork.creatorWallet === 'string' ? artwork.creatorWallet.toLowerCase().trim() : artwork.creatorWallet.toString().toLowerCase().trim();\n setIsCreator(walletStr === creatorStr);\n } catch (error) {\n console.error(\"Error comparing wallet addresses:\", error);\n setIsCreator(false);\n }\n } else {\n setIsCreator(false);\n }\n }, [publicKey, artwork.creatorWallet]);\n const currency = artwork.currency || 'SOL';\n const currencyInfo = CURRENCY_INFO[currency] || CURRENCY_INFO.SOL;\n const CurrencyIcon = currencyInfo.icon;\n const imageUrl = artwork.imageUrl || '';\n const [showBuyConfirm, setShowBuyConfirm] = useState(false);\n const [authMessage, setAuthMessage] = useState(\"\");\n const [walletAuthenticated, setWalletAuthenticated] = useState(false);\n const handleBuy = async () => {\n saveScrollPosition();\n if (!publicKey) {\n alert(\"Please connect your wallet to purchase artwork!\");\n restoreScrollPosition();\n return;\n }\n setShowBuyConfirm(true);\n restoreScrollPosition();\n };\n const authenticateWallet = async () => {\n saveScrollPosition();\n try {\n setIsLoading(true);\n setAuthMessage(\"Authenticating wallet...\");\n const randomMessage = `LARTSCAPE Authentication: ${Math.floor(Math.random() * 1000000)}`;\n setAuthMessage(\"Please sign the message to verify wallet ownership\");\n await new Promise(resolve => setTimeout(resolve, 1500));\n setWalletAuthenticated(true);\n setAuthMessage(\"Wallet authenticated successfully!\");\n } catch (error) {\n console.error('Authentication failed:', error);\n setAuthMessage(`Authentication failed: ${error.message}`);\n setWalletAuthenticated(false);\n } finally {\n setIsLoading(false);\n restoreScrollPosition();\n }\n };\n const completePurchase = async () => {\n saveScrollPosition();\n try {\n setIsLoading(true);\n setAuthMessage(\"Processing payment...\");\n if (currency === 'SOL') {\n const priceInLamports = artwork.price * LAMPORTS_PER_SOL;\n const taxAmount = priceInLamports * (TAX_PERCENTAGE / 100);\n const sellerAmount = priceInLamports - taxAmount;\n let transaction = new Transaction().add(SystemProgram.transfer({\n fromPubkey: publicKey,\n toPubkey: new PublicKey(artwork.creatorWallet),\n lamports: sellerAmount\n }));\n if (taxAmount > 0) {\n transaction.add(SystemProgram.transfer({\n fromPubkey: publicKey,\n toPubkey: DEV_WALLET,\n lamports: taxAmount\n }));\n }\n try {\n const {\n blockhash\n } = await connection.getRecentBlockhash();\n transaction.recentBlockhash = blockhash;\n transaction.feePayer = publicKey;\n setAuthMessage(\"Requesting wallet signature...\");\n const signature = await sendTransaction(transaction, connection);\n setAuthMessage(`Transaction sent! Confirming payment...`);\n const confirmation = await connection.confirmTransaction(signature, 'confirmed');\n if (confirmation.value.err) {\n throw new Error(`Transaction failed: ${confirmation.value.err}`);\n }\n setAuthMessage(\"Payment confirmed! Finalizing purchase...\");\n } catch (txError) {\n console.error(\"Transaction error:\", txError);\n if (txError.message && txError.message.includes(\"Buffer\")) {\n throw new Error(\"Transaction processing error. Please try again with a different wallet.\");\n }\n throw txError;\n }\n } else if (currency === 'USDC' || currency === 'LARTCOIN') {\n setAuthMessage(`Creating ${currency} transfer...`);\n await new Promise(resolve => setTimeout(resolve, 800));\n setAuthMessage(`Requesting approval for ${artwork.price} ${currency}...`);\n await new Promise(resolve => setTimeout(resolve, 1200));\n setAuthMessage(`Transferring ${currency} tokens...`);\n await new Promise(resolve => setTimeout(resolve, 1000));\n setAuthMessage(\"Token transfer complete! Finalizing purchase...\");\n }\n try {\n const artworkImages = Array.isArray(artwork.images) && artwork.images.length > 0 ? [...artwork.images] : artwork.imageUrl ? [artwork.imageUrl] : [];\n await stateClient.updateEntity('artworks', artwork.id, {\n owner: publicKey.toString(),\n sold: true,\n images: artworkImages,\n imageUrl: artwork.imageUrl\n });\n setShowBuyConfirm(false);\n alert(`Congratulations! You've purchased \"${artwork.title}\" for ${artwork.price} ${currency} (${TAX_PERCENTAGE}% tax included)`);\n navigate('/profile');\n } catch (dbError) {\n console.error('Database update failed:', dbError);\n setAuthMessage(`Purchase record failed, but payment was sent. Please contact support.`);\n }\n } catch (error) {\n console.error('Purchase failed:', error);\n if (error.message && error.message.includes(\"Buffer\")) {\n setAuthMessage(`Purchase failed: Transaction processing error. Please try again or use a different wallet.`);\n } else {\n setAuthMessage(`Purchase failed: ${error.message}`);\n }\n } finally {\n setIsLoading(false);\n }\n };\n const cancelPurchase = () => {\n saveScrollPosition();\n setShowBuyConfirm(false);\n setWalletAuthenticated(false);\n setAuthMessage(\"\");\n restoreScrollPosition();\n };\n const handleDelete = e => {\n e.stopPropagation();\n e.preventDefault();\n saveScrollPosition();\n if (publicKey && artwork.creatorWallet) {\n const walletStr = publicKey.toString().toLowerCase().trim();\n const creatorStr = typeof artwork.creatorWallet === 'string' ? artwork.creatorWallet.toLowerCase().trim() : artwork.creatorWallet.toString().toLowerCase().trim();\n if (walletStr !== creatorStr) {\n alert(\"You can only delete artworks that you created!\");\n restoreScrollPosition();\n return;\n }\n } else {\n alert(\"You can only delete artworks that you created!\");\n restoreScrollPosition();\n return;\n }\n if (!window.confirm(\"Are you sure you want to delete this artwork from the gallery?\")) {\n restoreScrollPosition();\n return;\n }\n setIsLoading(true);\n try {\n setTimeout(() => {\n if (onDelete) {\n onDelete(artwork.id);\n }\n setIsLoading(false);\n restoreScrollPosition();\n }, 300);\n } catch (error) {\n console.error(\"Delete operation failed:\", error);\n alert(\"Failed to delete artwork. Please try again.\");\n setIsLoading(false);\n restoreScrollPosition();\n }\n };\n const handleMessageSeller = e => {\n e.stopPropagation();\n e.preventDefault();\n setShowContactOptions(false);\n if (!publicKey) {\n alert(\"Please connect your wallet to message the seller!\");\n return;\n }\n if (artwork.creatorWallet === publicKey.toString()) {\n alert(\"This is your own artwork!\");\n return;\n }\n navigate(`/chat?recipient=${artwork.creatorWallet}&name=${artwork.creatorName || 'Artist'}&artId=${artwork.id}`);\n };\n const {\n theme\n } = useTheme();\n return

\n {imageUrl ?

{\n console.error(`Failed to load image:`, imageUrl);\n e.target.src = \"https://via.placeholder.com/400x300?text=Image+Error\";\n }} />\n

\n \n

}\n \n {artwork.type &&

\n {artwork.type.toLowerCase() === \"physical\" && \"Physical\"}\n {artwork.type.toLowerCase() === \"digital\" && \"Digital\"}\n {artwork.type.toLowerCase() === \"anime\" && \"Anime\"}\n {artwork.type.toLowerCase() === \"meme\" && \"Meme\"}\n

}\n\n {publicKey && isCreator && }\n \n {publicKey && !isCreator && }\n \n {showContactOptions &&

\n \n

}\n

{artwork.title}

{artwork.description}

\n \n

\n \n {artwork.price} {currency}\n

\n By {artwork.creatorName?.substring(0, 6)}...\n

\n \n

\n {!artwork.sold ? :

\n Sold\n

}\n \n {}\n {showBuyConfirm &&

Confirm Purchase

\n \n

\n Artwork:\n {artwork.title}\n

\n Price:\n \n \n {artwork.price} {currency}\n \n

\n Tax ({TAX_PERCENTAGE}%):\n {(artwork.price * TAX_PERCENTAGE / 100).toFixed(3)} {currency}\n

\n Total:\n {artwork.price} {currency}\n

\n \n {!walletAuthenticated ?

{authMessage || \"Please authenticate your wallet to proceed with the purchase\"}

\n \n

{authMessage}

\n \n

}\n \n \n

}\n

;\n};\nconst SearchResultsPage = () => {\n const {\n searchTerm,\n searchResults,\n metResults,\n setSearchTerm\n } = useSearch();\n const [sortOption, setSortOption] = useState('recent');\n const [filterType, setFilterType] = useState('all');\n const [displayMode, setDisplayMode] = useState('all');\n const navigate = useNavigate();\n const handleClearSearch = () => {\n setSearchTerm('');\n navigate('/');\n };\n const sortedAndFilteredArtworks = [...searchResults].filter(art => {\n if (filterType === 'all') return true;\n if (!art.type) return false;\n return art.type.toLowerCase() === filterType.toLowerCase();\n }).sort((a, b) => {\n if (sortOption === 'recent') {\n return new Date(b.createdAt || 0) - new Date(a.createdAt || 0);\n } else if (sortOption === 'price-high') {\n return b.price - a.price;\n } else if (sortOption === 'price-low') {\n return a.price - b.price;\n }\n return 0;\n });\n return

\n Search Results\n

\n {displayMode === 'all' ? `${searchResults.length + metResults.length} total results` : displayMode === 'lartscape' ? `${searchResults.length} LARTSCAPE results` : `${metResults.length} museum results`} for \"{searchTerm}\"\n

\n \n

\n \n \n \n

\n \n \n

\n \n {}\n {(displayMode === 'all' || displayMode === 'lartscape') && searchResults.length > 0 &&

\n \n LARTSCAPE Gallery\n

\n \n

\n\n

\n \n

\n {sortedAndFilteredArtworks.map(artwork => )}\n

}\n \n {}\n {(displayMode === 'all' || displayMode === 'museum') && metResults.length > 0 &&

\n \n Metropolitan Museum Collection\n

\n \n

\n {metResults.map(artObject =>

\n {artObject.primaryImage ? {artObject.title}

\n \n

}\n

\n \n

{artObject.title}

\n \n

\n {artObject.artistDisplayName &&

\n Artist: \n {artObject.artistDisplayName}\n

}\n \n {artObject.objectDate &&

\n Date: \n {artObject.objectDate}\n

}\n \n {artObject.medium &&

\n Medium: \n {artObject.medium}\n

}\n \n {artObject.classification &&

\n Classification: \n {artObject.classification}\n

}\n \n {artObject.department &&

\n Department: \n {artObject.department}\n

}\n

\n \n

\n \n \n View at Museum\n ✨\n \n

)}\n

}\n \n {}\n {(displayMode === 'lartscape' && searchResults.length === 0 || displayMode === 'museum' && metResults.length === 0 || displayMode === 'all' && searchResults.length === 0 && metResults.length === 0) &&

\n \n

No matching results found

Try different search terms or filters

\n \n Browse All Art\n \n

}\n

;\n};\nconst Gallery = () => {\n const [artworks, setArtworks] = useState([]);\n const [loading, setLoading] = useState(true);\n const [sortOption, setSortOption] = useState('recent');\n const [filterType, setFilterType] = useState('all');\n const {\n publicKey\n } = useWallet();\n const {\n setIsSearching\n } = useSearch();\n const {\n saveScrollPosition,\n restoreScrollPosition\n } = useScrollPosition();\n useEffect(() => {\n loadArtworks();\n }, [publicKey]);\n const loadArtworks = async () => {\n saveScrollPosition();\n try {\n setLoading(true);\n const fetchedArtworks = await stateClient.getEntities('artworks');\n if (Array.isArray(fetchedArtworks)) {\n const normalizedArtworks = fetchedArtworks.map(artwork => {\n if (artwork.type) {\n artwork.type = artwork.type.toLowerCase();\n }\n return artwork;\n });\n setArtworks(normalizedArtworks);\n } else {\n console.warn('Fetched artworks is not an array:', fetchedArtworks);\n setArtworks([]);\n }\n } catch (error) {\n console.error('Failed to load artworks:', error);\n } finally {\n setLoading(false);\n restoreScrollPosition();\n }\n };\n const handleDeleteArtwork = async artworkId => {\n saveScrollPosition();\n try {\n setLoading(true);\n const artwork = artworks.find(art => art.id === artworkId);\n const userWallet = publicKey?.toString();\n const creatorWallet = artwork?.creatorWallet?.toString();\n console.log('Deleting artwork:', artworkId);\n console.log('User wallet:', userWallet);\n console.log('Creator wallet:', creatorWallet);\n if (!artwork) {\n alert(\"Artwork not found!\");\n restoreScrollPosition();\n return;\n }\n if (userWallet !== creatorWallet) {\n alert(\"You can only delete artworks that you created!\");\n restoreScrollPosition();\n return;\n }\n await stateClient.deleteEntity('artworks', artworkId);\n alert(\"Artwork deleted successfully!\");\n await loadArtworks();\n } catch (error) {\n console.error('Delete failed:', error);\n alert(`Delete failed: ${error.message || 'Unknown error'}`);\n } finally {\n setLoading(false);\n restoreScrollPosition();\n }\n };\n const sortedAndFilteredArtworks = [...artworks].filter(art => {\n if (filterType === 'all') return true;\n if (!art.type) return false;\n return art.type.toLowerCase() === filterType.toLowerCase();\n }).sort((a, b) => {\n if (sortOption === 'recent') {\n return new Date(b.createdAt || 0) - new Date(a.createdAt || 0);\n } else if (sortOption === 'price-high') {\n return b.price - a.price;\n } else if (sortOption === 'price-low') {\n return a.price - b.price;\n }\n return 0;\n });\n return

\n Discover Art \n Beta Version\n \n NEW!\n \n \n

\n\n

\n \n

\n\n

\n \n

\n\n {publicKey &&

\n \n See a trash icon? That means you can delete your own artworks directly from the gallery, even after they've been rated!\n

}\n\n {loading ?

: sortedAndFilteredArtworks.length === 0 ?

\n \n

No artworks found

Be the first to upload your masterpiece!

\n \n Upload Art\n \n

\n {sortedAndFilteredArtworks.map(artwork => )}\n

}\n\n {artworks.length > 0 &&

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

}\n

;\n};\nconst UploadPage = () => {\n const {\n publicKey\n } = useWallet();\n const navigate = useNavigate();\n const [formData, setFormData] = useState({\n title: '',\n description: '',\n price: 1,\n currency: 'SOL',\n type: 'digital',\n imageUrl: ''\n });\n const [isLoading, setIsLoading] = useState(false);\n const {\n saveScrollPosition,\n restoreScrollPosition\n } = useScrollPosition();\n const handleChange = e => {\n const {\n name,\n value\n } = e.target;\n setFormData(prev => ({\n ...prev,\n [name]: name === 'price' ? parseFloat(value) : value\n }));\n };\n const handleFileUpload = e => {\n const file = e.target.files[0];\n if (!file) return;\n if (!file.type.startsWith('image/')) {\n alert('Please upload an image file');\n return;\n }\n if (file.size > 5 * 1024 * 1024) {\n alert('File size must be less than 5MB');\n return;\n }\n const reader = new FileReader();\n reader.onload = event => {\n const dataUrl = event.target.result;\n setFormData(prev => ({\n ...prev,\n imageUrl: dataUrl\n }));\n };\n reader.readAsDataURL(file);\n };\n const handleSubmit = async e => {\n e.preventDefault();\n saveScrollPosition();\n if (!publicKey) {\n alert(\"Please connect your wallet to upload artwork!\");\n restoreScrollPosition();\n return;\n }\n if (!formData.imageUrl || !formData.title || !formData.description || !formData.price) {\n alert(\"Please fill in all required fields and add an image!\");\n restoreScrollPosition();\n return;\n }\n try {\n setIsLoading(true);\n const artworkId = Date.now().toString();\n const processedFormData = {\n ...formData,\n type: formData.type.toLowerCase()\n };\n const newArtwork = {\n id: artworkId,\n ...processedFormData,\n createdAt: new Date().toISOString(),\n creatorWallet: publicKey.toString(),\n creatorName: publicKey.toString().substring(0, 10) + '...',\n sold: false\n };\n await stateClient.createEntity('artworks', newArtwork);\n alert(\"Artwork uploaded successfully!\");\n navigate('/');\n } catch (error) {\n console.error('Upload failed:', error);\n alert(`Upload failed: ${error.message}`);\n restoreScrollPosition();\n } finally {\n setIsLoading(false);\n }\n };\n const currencyInfo = CURRENCY_INFO[formData.currency] || CURRENCY_INFO.SOL;\n const CurrencyIcon = currencyInfo.icon;\n return

\n Share Your Masterpiece\n

\n\n {!publicKey ?

\n \n

Connect Your Wallet

You need to connect your Solana wallet to upload and sell your artwork.

\n \n

\n Artwork Type\n

\n \n \n \n Physical\n \n \n \n \n Digital\n \n \n \n \n Anime\n \n \n \n \n Meme\n \n

\n\n

\n Title\n \n

\n\n

\n Description\n

\n            </div>\n            \n            <div className=\"mb-4\">\n              <label className=\"block text-gray-300 mb-2\">Price Currency</label>\n              <div className=\"grid grid-cols-3 gap-3\">\n                <label className={`flex items-center justify-center p-3 rounded-md cursor-pointer transition-all ${formData.currency === 'SOL' ? 'bg-green-600 text-white' : 'bg-gray-800 text-gray-400 hover:bg-gray-700'}`}>\n                  <input type=\"radio\" name=\"currency\" value=\"SOL\" checked={formData.currency === 'SOL'} onChange={handleChange} className=\"sr-only\" />\n                  <DollarSign className=\"mr-2 h-5 w-5 text-green-400\" />\n                  SOL\n                </label>\n                <label className={`flex items-center justify-center p-3 rounded-md cursor-pointer transition-all ${formData.currency === 'USDC' ? 'bg-blue-600 text-white' : 'bg-gray-800 text-gray-400 hover:bg-gray-700'}`}>\n                  <input type=\"radio\" name=\"currency\" value=\"USDC\" checked={formData.currency === 'USDC'} onChange={handleChange} className=\"sr-only\" />\n                  <DollarSign className=\"mr-2 h-5 w-5 text-blue-400\" />\n                  USDC\n                </label>\n                <label className={`flex items-center justify-center p-3 rounded-md cursor-pointer transition-all ${formData.currency === 'LARTCOIN' ? 'bg-pink-600 text-white' : 'bg-gray-800 text-gray-400 hover:bg-gray-700'}`}>\n                  <input type=\"radio\" name=\"currency\" value=\"LARTCOIN\" checked={formData.currency === 'LARTCOIN'} onChange={handleChange} className=\"sr-only\" />\n                  <Coins className=\"mr-2 h-5 w-5 text-pink-400\" />\n                  LARTCOIN\n                </label>\n              </div>\n            </div>\n\n            <div className=\"mb-4\">\n              <label htmlFor=\"price\" className=\"block text-gray-300 mb-2\">Price ({formData.currency})</label>\n              <input type=\"number\" step=\"0.01\" min=\"0.1\" id=\"price\" name=\"price\" value={formData.price} onChange={handleChange} className=\"w-full p-3 bg-gray-800 text-white rounded-md focus:outline-none focus:ring-2 focus:ring-purple-500\" required />\n              <p className=\"text-sm text-gray-500 mt-1\">5% of sales will go to LARTCOIN holders</p>\n            </div>\n\n            <div className=\"mb-6\">\n              <label className=\"block text-gray-300 mb-2\">Artwork Image</label>\n              <div className=\"mb-4\">\n                <div className={`p-3 border-2 border-dashed ${formData.imageUrl ? 'border-purple-500 bg-purple-900/20' : 'border-gray-700'} rounded-lg flex flex-col items-center justify-center cursor-pointer hover:border-purple-500 transition-all`} onClick={() => document.getElementById('file-upload').click()}>\n                  <input id=\"file-upload\" type=\"file\" accept=\"image/*\" className=\"hidden\" onChange={handleFileUpload} required />\n                  {formData.imageUrl ? <div className=\"relative w-full\">\n                      <img src={formData.imageUrl} alt=\"Preview\" className=\"w-full h-32 object-cover rounded-md\" />\n                      <button type=\"button\" onClick={e => {\n                  e.stopPropagation();\n                  setFormData(prev => ({\n                    ...prev,\n                    imageUrl: ''\n                  }));\n                }} className=\"absolute top-1 right-1 bg-red-500 text-white p-1 rounded-full\">\n                        <Trash2 className=\"h-4 w-4\" />\n                      </button>\n                    </div> : <>\n                      <Upload className=\"h-10 w-10 text-purple-500 mb-2\" />\n                      <p className=\"text-gray-400 text-center text-sm\">\n                        <span className=\"text-purple-500 font-bold\">Artwork Image (Required)</span><br />\n                        Click to upload or drag & drop\n                      </p>\n                    </>}\n                </div>\n              </div>\n              \n              <p className=\"text-sm text-gray-500 mt-3\">Add one image of your artwork (max 5MB).</p>\n            </div>\n\n            <button type=\"submit\" disabled={isLoading} className=\"w-full py-3 bg-gradient-to-r from-pink-500 to-orange-500 text-white rounded-md font-bold hover:from-orange-500 hover:to-pink-500 transition-all duration-300 disabled:opacity-50\">\n              {isLoading ? <span className=\"flex items-center justify-center\">\n                  <svg className=\"animate-spin -ml-1 mr-3 h-5 w-5 text-white\" xmlns=\"http://www.w3.org/2000/svg\" fill=\"none\" viewBox=\"0 0 24 24\">\n                    <circle className=\"opacity-25\" cx=\"12\" cy=\"12\" r=\"10\" stroke=\"currentColor\" strokeWidth=\"4\"></circle>\n                    <path className=\"opacity-75\" fill=\"currentColor\" d=\"M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z\"></path>\n                  </svg>\n                  Processing...\n                </span> : <span className=\"flex items-center justify-center\">\n                  <Upload className=\"mr-2\" />\n                  Upload Artwork\n                </span>}\n            </button>\n          </form>\n\n          <div className=\"bg-gray-900 p-6 rounded-lg shadow-xl\">\n            <h3 className=\"text-xl font-bold text-white mb-4\">Preview</h3>\n            <div className=\"bg-gradient-to-br from-gray-800 to-gray-900 p-4 rounded-lg\">\n              {formData.imageUrl ? <div className=\"relative rounded-lg overflow-hidden mb-4 max-h-[300px]\">\n                  <img src={formData.imageUrl} alt=\"Preview\" className=\"w-full object-contain\" />\n                </div> : <div className=\"flex items-center justify-center h-[300px] bg-gray-800 rounded-lg mb-4\">\n                  <div className=\"text-center\">\n                    <Eye className=\"h-16 w-16 mx-auto text-gray-600 mb-3\" />\n                    <p className=\"text-gray-500\">Image preview will appear here</p>\n                  </div>\n                </div>}\n\n              <div className=\"space-y-2\">\n                <div className=\"h-8 bg-gray-800 rounded-md overflow-hidden\">\n                  <div className=\"bg-purple-600 h-full\" style={{\n                width: formData.title ? '100%' : '0%',\n                transition: 'width 0.3s ease'\n              }}>\n                    {formData.title && <div className=\"p-1 px-3 text-white font-bold\">{formData.title}</div>}\n                  </div>\n                </div>\n\n                <div className=\"h-20 bg-gray-800 rounded-md overflow-hidden\">\n                  <div className=\"bg-purple-700 h-full p-2\" style={{\n                width: formData.description ? '100%' : '0%',\n                transition: 'width 0.3s ease'\n              }}>\n                    {formData.description && <div className=\"text-white text-sm truncate\">{formData.description}</div>}\n                  </div>\n                </div>\n\n                <div className=\"flex items-center justify-between\">\n                  <div className=\"flex items-center\">\n                    <CurrencyIcon className={`w-5 h-5 ${currencyInfo.color} mr-1`} />\n                    <span className=\"text-white font-bold\">{formData.price} {formData.currency}</span>\n                  </div>\n                  <div className=\"bg-pink-600 text-white px-2 py-1 rounded-md text-sm font-bold\">\n                    {formData.type.charAt(0).toUpperCase() + formData.type.slice(1)}\n                  </div>\n                </div>\n              </div>\n            </div>\n\n            <div className=\"mt-6 bg-gray-800 p-4 rounded-lg\">\n              <h4 className=\"text-lg font-bold text-white mb-2\">How it works</h4>\n              <ul className=\"space-y-3 text-gray-300\">\n                <li className=\"flex items-start\">\n                  <Rocket className=\"text-pink-500 h-5 w-5 mr-2 mt-1 flex-shrink-0\" />\n                  <span>Upload your art, set your price in SOL, USDC or LARTCOIN, and instantly be visible in the gallery.</span>\n                </li>\n                <li className=\"flex items-start\">\n                  <Zap className=\"text-yellow-500 h-5 w-5 mr-2 mt-1 flex-shrink-0\" />\n                  <span>Upload one high-quality image to showcase your art in the best possible way.</span>\n                </li>\n                <li className=\"flex items-start\">\n                  <Zap className=\"text-purple-500 h-5 w-5 mr-2 mt-1 flex-shrink-0\" />\n                  <span>5% of each sale goes to LARTCOIN token holders, distributed based on holdings.</span>\n                </li>\n                <li className=\"flex items-start\">\n                  <Trash2 className=\"text-red-500 h-5 w-5 mr-2 mt-1 flex-shrink-0\" />\n                  <span>Don't like what you uploaded? You can delete your own artwork anytime from the gallery.</span>\n                </li>\n              </ul>\n            </div>\n          </div>\n        </div>}\n    </div>;\n};\nconst DonationPage = () => {\n  const {\n    publicKey,\n    sendTransaction\n  } = useWallet();\n  const {\n    connection\n  } = useConnection();\n  const [amount, setAmount] = useState(1);\n  const [isLoading, setIsLoading] = useState(false);\n  const [donationSuccess, setDonationSuccess] = useState(false);\n  const [donationError, setDonationError] = useState(\"\");\n  const [recentDonations, setRecentDonations] = useState([]);\n  const COMMUNITY_WALLET = new PublicKey(\"D4GqCHphaWFb5tcFzh1MLMCXSbJHJZmWtaRi2jpDvMAJ\");\n  useEffect(() => {\n    loadRecentDonations();\n  }, []);\n  const loadRecentDonations = async () => {\n    try {\n      const donations = await stateClient.getEntities('donations');\n      setRecentDonations(donations || []);\n    } catch (error) {\n      console.error('Failed to load donations:', error);\n    }\n  };\n  const handleDonation = async () => {\n    if (!publicKey) {\n      alert(\"Please connect your wallet to donate!\");\n      return;\n    }\n    if (!amount || amount <= 0) {\n      alert(\"Please enter a valid donation amount!\");\n      return;\n    }\n    try {\n      setIsLoading(true);\n      setDonationError(\"\");\n      setDonationSuccess(false);\n      const transaction = new Transaction().add(SystemProgram.transfer({\n        fromPubkey: publicKey,\n        toPubkey: COMMUNITY_WALLET,\n        lamports: amount * LAMPORTS_PER_SOL\n      }));\n      const {\n        blockhash\n      } = await connection.getRecentBlockhash();\n      transaction.recentBlockhash = blockhash;\n      transaction.feePayer = publicKey;\n      const donationId = Date.now().toString();\n      const donationRecord = {\n        id: donationId,\n        donor: publicKey.toString(),\n        amount: amount,\n        timestamp: new Date().toISOString()\n      };\n      await stateClient.createEntity('donations', donationRecord);\n      setDonationSuccess(true);\n      setAmount(1);\n      loadRecentDonations();\n    } catch (error) {\n      console.error('Donation failed:', error);\n      setDonationError(error.message);\n    } finally {\n      setIsLoading(false);\n    }\n  };\n  return <div className=\"container mx-auto px-4 py-8\">\n      <h1 className=\"text-4xl font-extrabold mb-6 bg-gradient-to-r from-green-400 via-blue-500 to-purple-600 text-transparent bg-clip-text\">\n        Support the <span className=\"animate-pulse\">LART</span> Community\n      </h1>\n\n      <div className=\"grid grid-cols-1 lg:grid-cols-2 gap-8\">\n        <div className=\"bg-gradient-to-br from-gray-900 to-gray-800 rounded-lg p-6 shadow-xl\">\n          <h2 className=\"text-2xl font-bold text-white mb-4\">Make a Donation</h2>\n          <p className=\"text-gray-400 mb-6\">\n            Your donations support the LARTSCAPE community and help fund amazing new projects. \n            Every SOL counts towards building a vibrant art ecosystem!\n          </p>\n\n          {!publicKey ? <div className=\"text-center py-8\">\n              <Zap className=\"h-16 w-16 mx-auto text-yellow-400 mb-4\" />\n              <h3 className=\"text-xl font-bold text-white mb-3\">Connect Your Wallet to Donate</h3>\n              <WalletMultiButton className=\"!bg-gradient-to-r from-green-500 to-blue-500 !border-0 !rounded-md !text-white !font-bold hover:!from-blue-500 hover:!to-green-500 transition-all duration-300\" />\n            </div> : <>\n              <div className=\"mb-6\">\n                <label htmlFor=\"amount\" className=\"block text-gray-300 mb-2\">Donation Amount (SOL)</label>\n                <div className=\"flex\">\n                  <input type=\"number\" id=\"amount\" value={amount} onChange={e => setAmount(parseFloat(e.target.value))} min=\"0.1\" step=\"0.1\" className=\"w-full p-3 bg-gray-800 text-white rounded-l-md focus:outline-none focus:ring-2 focus:ring-blue-500\" />\n                  <span className=\"bg-gray-700 text-white px-4 flex items-center rounded-r-md font-bold\">\n                    SOL\n                  </span>\n                </div>\n              </div>\n\n              <button onClick={handleDonation} disabled={isLoading} className=\"w-full py-3 bg-gradient-to-r from-green-500 to-blue-500 text-white rounded-md font-bold hover:from-blue-500 hover:to-green-500 transition-all duration-300 disabled:opacity-50\">\n                {isLoading ? <span className=\"flex items-center justify-center\">\n                    <svg className=\"animate-spin -ml-1 mr-3 h-5 w-5 text-white\" xmlns=\"http://www.w3.org/2000/svg\" fill=\"none\" viewBox=\"0 0 24 24\">\n                      <circle className=\"opacity-25\" cx=\"12\" cy=\"12\" r=\"10\" stroke=\"currentColor\" strokeWidth=\"4\"></circle>\n                      <path className=\"opacity-75\" fill=\"currentColor\" d=\"M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z\"></path>\n                    </svg>\n                    Processing...\n                  </span> : <span className=\"flex items-center justify-center\">\n                    <Heart className=\"mr-2\" />\n                    Donate Now\n                  </span>}\n              </button>\n\n              {donationSuccess && <div className=\"mt-4 p-3 bg-green-900/50 border border-green-500 text-green-400 rounded-md\">\n                  Thank you for your donation! Your support helps the LARTSCAPE community thrive.\n                </div>}\n\n              {donationError && <div className=\"mt-4 p-3 bg-red-900/50 border border-red-500 text-red-400 rounded-md\">\n                  Error: {donationError}\n                </div>}\n            </>}\n          \n          <div className=\"mt-8 pt-6 border-t border-gray-700\">\n            <h3 className=\"text-lg font-bold text-white mb-3\">Community Wallet</h3>\n            <div className=\"p-3 bg-gray-800 rounded-md break-all text-sm text-gray-400\">\n              D4GqCHphaWFb5tcFzh1MLMCXSbJHJZmWtaRi2jpDvMAJ\n            </div>\n            <p className=\"mt-2 text-xs text-gray-500\">\n              All donations go directly to this community wallet and will be used for community initiatives.\n            </p>\n          </div>\n        </div>\n\n        <div className=\"bg-gradient-to-br from-gray-900 to-gray-800 rounded-lg p-6 shadow-xl\">\n          <h2 className=\"text-2xl font-bold text-white mb-4\">Recent Community Supporters</h2>\n          \n          {recentDonations.length === 0 ? <div className=\"text-center py-12\">\n              <Sparkles className=\"mx-auto h-12 w-12 text-gray-400 mb-4\" />\n              <h3 className=\"text-xl font-bold text-white mb-2\">Be the First Donor!</h3>\n              <p className=\"text-gray-400\">Make a donation and your name will appear here.</p>\n            </div> : <div className=\"space-y-4\">\n              {recentDonations.slice(0, 10).map(donation => <div key={donation.id} className=\"bg-gray-800 p-3 rounded-md\">\n                  <div className=\"flex justify-between items-center\">\n                    <div className=\"text-white font-medium\">\n                      {donation.donor.substring(0, 6)}...{donation.donor.substring(donation.donor.length - 4)}\n                    </div>\n                    <div className=\"flex items-center text-green-400 font-bold\">\n                      <DollarSign className=\"w-4 h-4 mr-1\" />\n                      {donation.amount} SOL\n                    </div>\n                  </div>\n                  <div className=\"text-gray-500 text-xs mt-1\">\n                    {new Date(donation.timestamp).toLocaleString()}\n                  </div>\n                </div>)}\n            </div>}\n          \n          <div className=\"mt-8 bg-gray-800 p-4 rounded-lg\">\n            <h4 className=\"text-lg font-bold text-white mb-3\">What Your Donations Support</h4>\n            <ul className=\"space-y-3 text-gray-300\">\n              <li className=\"flex items-start\">\n                <Palette className=\"text-pink-500 h-5 w-5 mr-2 mt-1 flex-shrink-0\" />\n                <span>Community art exhibitions and events</span>\n              </li>\n              <li className=\"flex items-start\">\n                <Brush className=\"text-blue-500 h-5 w-5 mr-2 mt-1 flex-shrink-0\" />\n                <span>Supporting emerging artists in the LARTSCAPE ecosystem</span>\n              </li>\n              <li className=\"flex items-start\">\n                <Rocket className=\"text-green-500 h-5 w-5 mr-2 mt-1 flex-shrink-0\" />\n                <span>Development of new features for the LARTSCAPE platform</span>\n              </li>\n              <li className=\"flex items-start\">\n                <Zap className=\"text-yellow-500 h-5 w-5 mr-2 mt-1 flex-shrink-0\" />\n                <span>LARTCOIN ecosystem growth and sustainability</span>\n              </li>\n            </ul>\n          </div>\n        </div>\n      </div>\n    </div>;\n};\nconst ProfilePage = () => {\n  const {\n    publicKey\n  } = useWallet();\n  const [myArtworks, setMyArtworks] = useState([]);\n  const [purchasedArtworks, setPurchasedArtworks] = useState([]);\n  const [loading, setLoading] = useState(true);\n  const [activeTab, setActiveTab] = useState('purchased');\n  useEffect(() => {\n    if (publicKey) {\n      loadUserArtworks();\n    }\n  }, [publicKey]);\n  const loadUserArtworks = async () => {\n    if (!publicKey) return;\n    try {\n      setLoading(true);\n      const allArtworks = await stateClient.getEntities('artworks');\n      const created = allArtworks.filter(art => art.creatorWallet === publicKey.toString());\n      const purchased = allArtworks.filter(art => art.owner === publicKey.toString() && art.creatorWallet !== publicKey.toString());\n      setMyArtworks(created);\n      setPurchasedArtworks(purchased);\n    } catch (error) {\n      console.error('Failed to load user artworks:', error);\n    } finally {\n      setLoading(false);\n    }\n  };\n  const handleDeleteArtwork = async artworkId => {\n    if (!confirm(\"Are you sure you want to delete this artwork?\")) {\n      return;\n    }\n    try {\n      const artwork = myArtworks.find(art => art.id === artworkId);\n      if (!artwork || artwork.creatorWallet !== publicKey?.toString()) {\n        alert(\"You can only delete artworks that you created!\");\n        return;\n      }\n      await stateClient.deleteEntity('artworks', artworkId);\n      alert(\"Artwork deleted successfully!\");\n      loadUserArtworks();\n    } catch (error) {\n      console.error('Delete failed:', error);\n      alert(`Delete failed: ${error.message}`);\n    }\n  };\n  if (!publicKey) {\n    return <div className=\"container mx-auto px-4 py-16 text-center\">\n        <Palette className=\"h-16 w-16 mx-auto text-purple-500 mb-4\" />\n        <h2 className=\"text-3xl font-bold text-white mb-4\">Connect Your Wallet</h2>\n        <p className=\"text-gray-400 mb-8 max-w-md mx-auto\">Connect your Solana wallet to view your collection and manage your artwork.</p>\n        <WalletMultiButton className=\"!bg-gradient-to-r from-purple-600 to-pink-500 !border-0 !rounded-md !text-white !font-bold hover:!from-pink-500 hover:!to-purple-600 transition-all duration-300\" />\n      </div>;\n  }\n  return <div className=\"container mx-auto px-4 py-8\">\n      <div className=\"bg-gradient-to-r from-gray-900 to-gray-800 rounded-lg p-6 mb-8\">\n        <div className=\"flex flex-col md:flex-row justify-between items-start md:items-center\">\n          <div>\n            <h1 className=\"text-3xl font-bold text-white mb-2\">My Collection</h1>\n            <p className=\"text-gray-400\">\n              Wallet: {publicKey.toString().substring(0, 8)}...{publicKey.toString().substring(publicKey.toString().length - 8)}\n            </p>\n          </div>\n          <Link to=\"/upload\" className=\"mt-4 md:mt-0 px-6 py-2 bg-gradient-to-r from-purple-600 to-pink-500 text-white rounded-md font-bold hover:from-pink-500 hover:to-purple-600 transition-all duration-300\">\n            <Upload className=\"inline-block mr-2\" />\n            Create New\n          </Link>\n        </div>\n      </div>\n\n      <div className=\"mb-6\">\n        <div className=\"flex border-b border-gray-700\">\n          <button className={`px-4 py-2 font-medium text-sm focus:outline-none ${activeTab === 'purchased' ? 'text-white border-b-2 border-purple-500' : 'text-gray-400 hover:text-white'}`} onClick={() => setActiveTab('purchased')}>\n            Purchased Art\n          </button>\n          <button className={`px-4 py-2 font-medium text-sm focus:outline-none ${activeTab === 'created' ? 'text-white border-b-2 border-pink-500' : 'text-gray-400 hover:text-white'}`} onClick={() => setActiveTab('created')}>\n            My Creations\n          </button>\n        </div>\n      </div>\n\n      {loading ? <div className=\"flex justify-center items-center h-64\">\n          <div className=\"animate-spin rounded-full h-16 w-16 border-t-2 border-b-2 border-purple-500\"></div>\n        </div> : activeTab === 'purchased' ? purchasedArtworks.length === 0 ? <div className=\"text-center py-16 bg-gray-900 rounded-lg\">\n            <Sparkles className=\"mx-auto h-12 w-12 text-gray-400 mb-4\" />\n            <h3 className=\"text-2xl font-bold text-white mb-2\">No purchased artworks yet</h3>\n            <p className=\"text-gray-400 mb-4\">Explore the gallery and find your first piece!</p>\n            <Link to=\"/\" className=\"px-6 py-3 bg-gradient-to-r from-purple-600 to-pink-500 text-white rounded-md font-bold hover:from-pink-500 hover:to-purple-600 transition-all duration-300\">\n              Browse Gallery\n            </Link>\n          </div> : <div className=\"grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-6\">\n            {purchasedArtworks.map(artwork => {\n        const currency = artwork.currency || 'SOL';\n        const currencyInfo = CURRENCY_INFO[currency] || CURRENCY_INFO.SOL;\n        const CurrencyIcon = currencyInfo.icon;\n        const artworkImages = Array.isArray(artwork.images) && artwork.images.length > 0 ? artwork.images : artwork.imageUrl ? [artwork.imageUrl] : [];\n        return <div key={artwork.id} className=\"bg-gradient-to-br from-gray-900 to-gray-800 rounded-lg overflow-hidden shadow-lg\">\n                <div className=\"relative h-64 overflow-hidden\">\n                  {artworkImages.length > 0 ? <img src={artworkImages[0]} alt={artwork.title} className=\"w-full h-full object-cover\" /> : <div className=\"w-full h-full flex items-center justify-center bg-gray-800\">\n                      <Palette className=\"text-gray-600 w-16 h-16\" />\n                    </div>}\n\n                  {artwork.type && <div className=\"absolute top-2 left-2 bg-black/70 text-white px-2 py-1 rounded-full text-sm font-bold\">\n                      {artwork.type === \"physical\" && \"Physical\"}\n                      {artwork.type === \"digital\" && \"Digital\"}\n                      {artwork.type === \"anime\" && \"Anime\"}\n                      {artwork.type === \"meme\" && \"Meme\"}\n                    </div>}\n                </div>\n                <div className=\"p-4\">\n                  <h3 className=\"text-xl font-bold text-white mb-2\">{artwork.title}</h3>\n                  <p className=\"text-gray-400 mb-3 h-12 overflow-hidden\">{artwork.description}</p>\n                  \n                  <div className=\"flex justify-between items-center\">\n                    <div className=\"flex items-center\">\n                      <CurrencyIcon className={`w-5 h-5 ${currencyInfo.color} mr-1`} />\n                      <span className=\"text-white font-bold\">{artwork.price} {currency}</span>\n                    </div>\n                    <div className=\"text-gray-400 text-sm\">\n                      By {artwork.creatorName?.substring(0, 6)}...\n                    </div>\n                  </div>\n                </div>\n              </div>;\n      })}\n          </div> : myArtworks.length === 0 ? <div className=\"text-center py-16 bg-gray-900 rounded-lg\">\n            <Brush className=\"mx-auto h-12 w-12 text-gray-400 mb-4\" />\n            <h3 className=\"text-2xl font-bold text-white mb-2\">You haven't created any art yet</h3>\n            <p className=\"text-gray-400 mb-4\">Share your masterpiece with the community!</p>\n            <Link to=\"/upload\" className=\"px-6 py-3 bg-gradient-to-r from-purple-600 to-pink-500 text-white rounded-md font-bold hover:from-pink-500 hover:to-purple-600 transition-all duration-300\">\n              Upload Artwork\n            </Link>\n          </div> : <div className=\"grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-6\">\n            {myArtworks.map(artwork => {\n        const currency = artwork.currency || 'SOL';\n        const currencyInfo = CURRENCY_INFO[currency] || CURRENCY_INFO.SOL;\n        const CurrencyIcon = currencyInfo.icon;\n        const artworkImages = Array.isArray(artwork.images) && artwork.images.length > 0 ? artwork.images : artwork.imageUrl ? [artwork.imageUrl] : [];\n        return <div key={artwork.id} className=\"bg-gradient-to-br from-gray-900 to-gray-800 rounded-lg overflow-hidden shadow-lg\">\n                <div className=\"relative h-64 overflow-hidden\">\n                  {artworkImages.length > 0 ? <img src={artworkImages[0]} alt={artwork.title} className=\"w-full h-full object-cover\" /> : <div className=\"w-full h-full flex items-center justify-center bg-gray-800\">\n                      <Palette className=\"text-gray-600 w-16 h-16\" />\n                    </div>}\n                  <div className=\"absolute top-2 right-2 bg-black/70 text-white px-2 py-1 rounded-full text-sm font-bold flex items-center\">\n                    <Star className=\"w-4 h-4 text-yellow-400 mr-1\" />\n                    {artwork.rating ? Math.round(artwork.rating) : 0}%\n                  </div>\n                  {artwork.type && <div className=\"absolute top-2 left-2 bg-black/70 text-white px-2 py-1 rounded-full text-sm font-bold\">\n                      {artwork.type === \"physical\" && \"Physical\"}\n                      {artwork.type === \"digital\" && \"Digital\"}\n                      {artwork.type === \"anime\" && \"Anime\"}\n                      {artwork.type === \"meme\" && \"Meme\"}\n                    </div>}\n                  <button onClick={() => handleDeleteArtwork(artwork.id)} className=\"absolute bottom-2 right-2 bg-red-500 hover:bg-red-600 text-white p-2 rounded-full shadow-lg z-50\" style={{\n              display: 'flex',\n              alignItems: 'center',\n              justifyContent: 'center'\n            }}>\n                    <Trash2 className=\"w-4 h-4\" />\n                  </button>\n                </div>\n                <div className=\"p-4\">\n                  <h3 className=\"text-xl font-bold text-white mb-2\">{artwork.title}</h3>\n                  <p className=\"text-gray-400 mb-3 h-12 overflow-hidden\">{artwork.description}</p>\n                  \n                  <div className=\"flex justify-between items-center\">\n                    <div className=\"flex items-center\">\n                      <CurrencyIcon className={`w-5 h-5 ${currencyInfo.color} mr-1`} />\n                      <span className=\"text-white font-bold\">{artwork.price} {currency}</span>\n                    </div>\n                    <div className=\"bg-purple-900 text-purple-300 px-2 py-1 rounded-md text-sm\">\n                      {artwork.sold ? 'Sold' : 'For Sale'}\n                    </div>\n                  </div>\n                  \n                  \n                </div>\n              </div>;\n      })}\n          </div>}\n    </div>;\n};\nconst WalletConnectBanner = () => {\n  const {\n    publicKey\n  } = useWallet();\n  const {\n    theme\n  } = useTheme();\n  if (publicKey) return null;\n  return <div className=\"bg-gradient-to-r from-blue-100 to-purple-100 dark:from-gray-800 dark:to-gray-900 p-4 shadow-lg border-b border-blue-200 dark:border-gray-700\">\n      <div className=\"container mx-auto flex flex-col md:flex-row items-center justify-between\">\n        <div className=\"flex items-center mb-4 md:mb-0\">\n          <Zap className=\"h-8 w-8 text-blue-500 dark:text-blue-400 mr-3 animate-pulse\" />\n          <div>\n            <h3 className=\"text-blue-800 dark:text-blue-300 font-bold text-lg\">Connect Your Solana Wallet</h3>\n            <p className=\"text-blue-600 dark:text-blue-400 text-sm\">Unlock the full LARTSCAPE experience to buy, sell and rate art</p>\n          </div>\n        </div>\n        <Link to=\"/\" className=\"px-6 py-3 bg-gradient-to-r from-blue-500 to-purple-500 dark:from-blue-600 dark:to-purple-600 rounded-md text-white font-bold hover:from-purple-500 hover:to-blue-500 dark:hover:from-purple-600 dark:hover:to-blue-600 transition-all duration-300\">\n          Connect in Header\n        </Link>\n      </div>\n    </div>;\n};\nconst ChatPage = () => {\n  const {\n    publicKey\n  } = useWallet();\n  const {\n    theme\n  } = useTheme();\n  const location = useLocation();\n  const navigate = useNavigate();\n  const [communityMessages, setCommunityMessages] = useState([]);\n  const [privateChats, setPrivateChats] = useState({});\n  const [activeChat, setActiveChat] = useState('community');\n  const [recipientName, setRecipientName] = useState('');\n  const [recipientWallet, setRecipientWallet] = useState('');\n  const [conversations, setConversations] = useState([]);\n  const [newMessage, setNewMessage] = useState('');\n  const [isConnected, setIsConnected] = useState(false);\n  const [onlineUsers, setOnlineUsers] = useState(0);\n  const [typingUsers, setTypingUsers] = useState([]);\n  const [readReceipts, setReadReceipts] = useState({});\n  const messagesEndRef = useRef(null);\n  const socketRef = useRef(null);\n  const {\n    saveScrollPosition,\n    restoreScrollPosition\n  } = useScrollPosition();\n  const vibrate = (pattern = [15]) => {\n    if (navigator.vibrate) {\n      navigator.vibrate(pattern);\n    }\n  };\n  useEffect(() => {\n    if (location.search) {\n      const params = new URLSearchParams(location.search);\n      const recipient = params.get('recipient');\n      const name = params.get('name');\n      const artId = params.get('artId');\n      if (recipient) {\n        setActiveChat(recipient);\n        setRecipientWallet(recipient);\n        setRecipientName(name || recipient.substring(0, 6) + '...');\n        navigate('/chat', {\n          replace: true\n        });\n      }\n    }\n  }, [location, navigate]);\n  useEffect(() => {\n    const loadConversations = async () => {\n      if (!publicKey) return;\n      try {\n        const userConversations = await stateClient.getEntities('private_conversations', {\n          participantId: publicKey.toString()\n        });\n        if (userConversations && userConversations.length) {\n          setConversations(userConversations);\n          for (const convo of userConversations) {\n            const chatId = convo.id;\n            const privateMessages = await stateClient.getEntities('private_messages', {\n              chatId\n            });\n            if (privateMessages && privateMessages.length) {\n              setPrivateChats(prev => ({\n                ...prev,\n                [convo.otherParticipantId]: privateMessages.sort((a, b) => new Date(a.timestamp) - new Date(b.timestamp))\n              }));\n            }\n          }\n        }\n      } catch (error) {\n        console.error('Failed to load conversations:', error);\n      }\n    };\n    loadConversations();\n  }, [publicKey]);\n  useEffect(() => {\n    if (!publicKey) return;\n    const userIdentifier = publicKey.toString();\n    const userName = `${userIdentifier.substring(0, 4)}...${userIdentifier.substring(userIdentifier.length - 4)}`;\n    socketRef.current = io('wss://ws.dev.fun/app-6ffe1641c605190ffb67');\n    socketRef.current.on('connect', () => {\n      setIsConnected(true);\n      vibrate([10, 5, 10]);\n      socketRef.current.emit('user_join', {\n        userId: userIdentifier,\n        userName: userName\n      });\n    });\n    socketRef.current.on('disconnect', () => {\n      setIsConnected(false);\n    });\n    socketRef.current.on('chat_message', message => {\n      setCommunityMessages(prev => [...prev, message]);\n      vibrate([8]);\n      if (message.userId !== userIdentifier) {\n        socketRef.current.emit('message_seen', {\n          messageId: message.id,\n          userId: userIdentifier\n        });\n      }\n    });\n    socketRef.current.on('private_message', message => {\n      const chatParticipant = message.senderId === userIdentifier ? message.receiverId : message.senderId;\n      setPrivateChats(prev => {\n        const existingMessages = prev[chatParticipant] || [];\n        return {\n          ...prev,\n          [chatParticipant]: [...existingMessages, message]\n        };\n      });\n      const conversationExists = conversations.some(c => c.otherParticipantId === chatParticipant);\n      if (!conversationExists) {\n        const newConversation = {\n          id: `chat_${userIdentifier}_${chatParticipant}`,\n          participantId: userIdentifier,\n          otherParticipantId: chatParticipant,\n          otherParticipantName: message.senderName || chatParticipant.substring(0, 6) + '...',\n          lastMessageAt: message.timestamp\n        };\n        setConversations(prev => [...prev, newConversation]);\n      }\n      vibrate([8]);\n      if (message.senderId !== userIdentifier) {\n        socketRef.current.emit('private_message_seen', {\n          messageId: message.id,\n          userId: userIdentifier\n        });\n      }\n    });\n    socketRef.current.on('message_seen', data => {\n      setReadReceipts(prev => ({\n        ...prev,\n        [data.messageId]: [...(prev[data.messageId] || []), data.userId]\n      }));\n    });\n    socketRef.current.on('private_message_seen', data => {\n      setReadReceipts(prev => ({\n        ...prev,\n        [data.messageId]: [...(prev[data.messageId] || []), data.userId]\n      }));\n    });\n    socketRef.current.on('user_count', count => {\n      setOnlineUsers(count);\n    });\n    socketRef.current.on('user_typing', user => {\n      if (user.userId !== userIdentifier) {\n        setTypingUsers(prev => {\n          if (!prev.some(u => u.userId === user.userId)) {\n            return [...prev, user];\n          }\n          return prev;\n        });\n        setTimeout(() => {\n          setTypingUsers(prev => prev.filter(u => u.userId !== user.userId));\n        }, 2000);\n      }\n    });\n    const loadMessages = async () => {\n      try {\n        const savedMessages = await stateClient.getEntities('chat_messages');\n        if (savedMessages && savedMessages.length) {\n          setCommunityMessages(savedMessages.sort((a, b) => new Date(a.timestamp) - new Date(b.timestamp)));\n        }\n      } catch (error) {\n        console.error('Failed to load chat messages:', error);\n      }\n    };\n    loadMessages();\n    return () => {\n      if (socketRef.current) {\n        socketRef.current.disconnect();\n      }\n    };\n  }, [publicKey]);\n  useEffect(() => {\n    messagesEndRef.current?.scrollIntoView({\n      behavior: 'smooth'\n    });\n  }, [communityMessages, privateChats, activeChat]);\n  const handleSendMessage = async e => {\n    e.preventDefault();\n    saveScrollPosition();\n    if (!newMessage.trim() || !publicKey || !socketRef.current) {\n      restoreScrollPosition();\n      return;\n    }\n    const userIdentifier = publicKey.toString();\n    const userName = `${userIdentifier.substring(0, 4)}...${userIdentifier.substring(userIdentifier.length - 4)}`;\n    const messageId = `${Date.now()}-${Math.random().toString(36).substr(2, 9)}`;\n    const timestamp = new Date().toISOString();\n    if (activeChat === 'community') {\n      const messageData = {\n        id: messageId,\n        userId: userIdentifier,\n        userName: userName,\n        content: newMessage,\n        timestamp,\n        seen: []\n      };\n      try {\n        await stateClient.createEntity('chat_messages', {\n          id: messageId,\n          ...messageData\n        });\n        socketRef.current.emit('chat_message', messageData);\n        setCommunityMessages(prev => [...prev, messageData]);\n      } catch (error) {\n        console.error('Failed to save message:', error);\n      }\n    } else {\n      const messageData = {\n        id: messageId,\n        chatId: `chat_${userIdentifier}_${activeChat}`,\n        senderId: userIdentifier,\n        senderName: userName,\n        receiverId: activeChat,\n        receiverName: recipientName,\n        content: newMessage,\n        timestamp,\n        seen: []\n      };\n      try {\n        await stateClient.createEntity('private_messages', {\n          id: messageId,\n          ...messageData\n        });\n        socketRef.current.emit('private_message', messageData);\n        setPrivateChats(prev => {\n          const existingMessages = prev[activeChat] || [];\n          return {\n            ...prev,\n            [activeChat]: [...existingMessages, messageData]\n          };\n        });\n        const conversationExists = conversations.some(c => c.otherParticipantId === activeChat);\n        if (!conversationExists) {\n          const newConversation = {\n            id: `chat_${userIdentifier}_${activeChat}`,\n            participantId: userIdentifier,\n            otherParticipantId: activeChat,\n            otherParticipantName: recipientName,\n            lastMessageAt: timestamp\n          };\n          setConversations(prev => [...prev, newConversation]);\n          try {\n            await stateClient.createEntity('private_conversations', newConversation);\n          } catch (error) {\n            console.error('Failed to save conversation:', error);\n          }\n        } else {\n          setConversations(prev => prev.map(c => c.otherParticipantId === activeChat ? {\n            ...c,\n            lastMessageAt: timestamp\n          } : c));\n        }\n      } catch (error) {\n        console.error('Failed to save private message:', error);\n      }\n    }\n    setNewMessage('');\n    vibrate([15, 10, 15]);\n    restoreScrollPosition();\n  };\n  const handleTyping = () => {\n    if (socketRef.current && publicKey) {\n      const userIdentifier = publicKey.toString();\n      const userName = `${userIdentifier.substring(0, 4)}...${userIdentifier.substring(userIdentifier.length - 4)}`;\n      socketRef.current.emit('user_typing', {\n        userId: userIdentifier,\n        userName: userName\n      });\n    }\n  };\n  const selectChat = (chatId, name = '') => {\n    saveScrollPosition();\n    setActiveChat(chatId);\n    setRecipientName(name);\n    setRecipientWallet(chatId);\n    restoreScrollPosition();\n  };\n  if (!publicKey) {\n    return <div className=\"container mx-auto px-4 py-16 text-center\">\n        <MessageSquare className=\"h-16 w-16 mx-auto text-blue-500 mb-4\" />\n        <h2 className=\"text-3xl font-bold text-white mb-4\">Connect Your Wallet to Chat</h2>\n        <p className=\"text-gray-400 mb-8 max-w-md mx-auto\">\n          Join the conversation with other LARTSCAPE community members.\n        </p>\n        <WalletMultiButton className=\"!bg-gradient-to-r from-blue-600 to-purple-500 !border-0 !rounded-md !text-white !font-bold hover:!from-purple-500 hover:!to-blue-600 transition-all duration-300\" />\n      </div>;\n  }\n  const currentMessages = activeChat === 'community' ? communityMessages : privateChats[activeChat] || [];\n  return <div className=\"container mx-auto px-4 py-8\">\n      <div className=\"flex flex-col md:flex-row justify-between items-center mb-8\">\n        <h1 className=\"text-4xl font-extrabold mb-4 md:mb-0 bg-gradient-to-r from-blue-600 via-purple-500 to-indigo-500 text-transparent bg-clip-text\">\n          LARTSCAPE <span className=\"animate-pulse\">Chat</span>\n        </h1>\n        \n        <div className=\"flex items-center space-x-2 bg-gradient-to-r from-blue-900/50 to-purple-900/50 px-4 py-2 rounded-full\">\n          <div className={`h-3 w-3 rounded-full ${isConnected ? 'bg-green-500 animate-pulse' : 'bg-red-500'}`}></div>\n          <span className=\"text-white text-sm font-medium\">\n            {isConnected ? `${onlineUsers} Online` : 'Connecting...'}\n          </span>\n        </div>\n      </div>\n\n      <div className=\"grid grid-cols-1 lg:grid-cols-4 gap-6\">\n        <div className=\"lg:col-span-1 order-2 lg:order-1\">\n          <div className=\"bg-gradient-to-br from-gray-900 to-gray-800 rounded-lg shadow-xl overflow-hidden\">\n            <div className=\"p-4 bg-gradient-to-r from-blue-900/30 to-purple-900/30 border-b border-gray-700\">\n              <h3 className=\"text-lg font-bold text-white flex items-center\">\n                <MessageSquare className=\"mr-2 h-5 w-5\" />\n                Chats\n              </h3>\n            </div>\n            \n            <div className=\"divide-y divide-gray-700\">\n              {}\n              <button onClick={() => selectChat('community')} className={`w-full text-left p-4 hover:bg-gray-800 transition-colors flex items-center ${activeChat === 'community' ? 'bg-blue-900/30' : ''}`}>\n                <div className=\"flex-shrink-0 w-10 h-10 bg-gradient-to-br from-blue-500 to-purple-500 rounded-full flex items-center justify-center text-white mr-3\">\n                  <Users className=\"h-5 w-5\" />\n                </div>\n                <div className=\"flex-1 min-w-0\">\n                  <p className=\"text-white font-medium truncate\">Community Chat</p>\n                  <p className=\"text-gray-400 text-sm truncate\">Public channel</p>\n                </div>\n                {activeChat === 'community' && <div className=\"w-2 h-2 bg-blue-500 rounded-full ml-2\"></div>}\n              </button>\n              \n              {}\n              {conversations.length > 0 && conversations.map(convo => <button key={convo.id} onClick={() => selectChat(convo.otherParticipantId, convo.otherParticipantName)} className={`w-full text-left p-4 hover:bg-gray-800 transition-colors flex items-center ${activeChat === convo.otherParticipantId ? 'bg-blue-900/30' : ''}`}>\n                  <div className=\"flex-shrink-0 w-10 h-10 bg-gradient-to-br from-green-500 to-blue-500 rounded-full flex items-center justify-center text-white mr-3\">\n                    <MessageCircle className=\"h-5 w-5\" />\n                  </div>\n                  <div className=\"flex-1 min-w-0\">\n                    <p className=\"text-white font-medium truncate\">{convo.otherParticipantName}</p>\n                    <p className=\"text-gray-400 text-sm truncate\">\n                      {new Date(convo.lastMessageAt).toLocaleDateString()}\n                    </p>\n                  </div>\n                  {activeChat === convo.otherParticipantId && <div className=\"w-2 h-2 bg-blue-500 rounded-full ml-2\"></div>}\n                </button>)}\n              \n              {conversations.length === 0 && <div className=\"p-4 text-center text-gray-500\">\n                  <MessageSquare className=\"h-8 w-8 mx-auto mb-2 opacity-50\" />\n                  <p>No private conversations yet</p>\n                  <p className=\"text-sm\">Click \"Message Seller\" on any artwork</p>\n                </div>}\n            </div>\n          </div>\n          \n          <div className=\"mt-6 bg-gradient-to-br from-gray-900 to-gray-800 rounded-lg shadow-xl p-4\">\n            <h3 className=\"text-lg font-bold text-white mb-3 flex items-center\">\n              <Users className=\"mr-2 h-5 w-5\" />\n              Chat Tips\n            </h3>\n            \n            <div className=\"text-gray-400 text-sm space-y-3\">\n              <p>\n                <span className=\"text-blue-400 font-bold\">Community Chat:</span> Connect with all LARTSCAPE members\n              </p>\n              <p>\n                <span className=\"text-green-400 font-bold\">Private Chat:</span> Message artists directly about their work\n              </p>\n              <div className=\"p-3 bg-blue-900/20 rounded-md\">\n                <p className=\"text-white font-medium mb-1\">How to start a private chat:</p>\n                <p>Click on any artwork, then the message icon (📬) in the bottom left corner.</p>\n              </div>\n            </div>\n          </div>\n        </div>\n        \n        <div className=\"lg:col-span-3 order-1 lg:order-2\">\n          <div className=\"bg-gradient-to-br from-gray-900 to-gray-800 rounded-lg shadow-xl overflow-hidden\">\n            {}\n            <div className=\"p-4 bg-gradient-to-r from-blue-900/30 to-purple-900/30 border-b border-gray-700 flex justify-between items-center\">\n              <div className=\"flex items-center space-x-2\">\n                {activeChat !== 'community' && <button onClick={() => selectChat('community')} className=\"mr-2 p-1 hover:bg-gray-700 rounded-full transition-colors\">\n                    <ChevronLeft className=\"h-5 w-5 text-gray-400\" />\n                  </button>}\n                \n                {activeChat === 'community' ? <>\n                    <MessageSquare className=\"text-blue-400\" />\n                    <h2 className=\"text-white font-bold\">Community Chat</h2>\n                    <div className=\"bg-blue-500/20 text-blue-300 text-xs px-2 py-1 rounded-full\">Public</div>\n                  </> : <>\n                    <MessageCircle className=\"text-green-400\" />\n                    <h2 className=\"text-white font-bold\">{recipientName}</h2>\n                    <div className=\"bg-green-500/20 text-green-300 text-xs px-2 py-1 rounded-full\">Private</div>\n                  </>}\n              </div>\n              \n              {activeChat === 'community' && <div className=\"flex items-center text-sm text-gray-400\">\n                  <Users className=\"h-4 w-4 mr-1\" />\n                  <span>{onlineUsers} online</span>\n                </div>}\n            </div>\n            \n            {}\n            <div className=\"h-[60vh] overflow-y-auto p-4 space-y-4\" style={{\n            scrollBehavior: 'smooth'\n          }}>\n              {currentMessages.length === 0 ? <div className=\"flex flex-col items-center justify-center h-full text-center\">\n                  <MessageSquare className=\"h-12 w-12 text-gray-600 mb-3\" />\n                  <p className=\"text-gray-500\">\n                    {activeChat === 'community' ? \"No messages yet. Be the first to start the conversation!\" : `Start a conversation with ${recipientName}`}\n                  </p>\n                </div> : <>\n                  {currentMessages.map(message => {\n                const isOwnMessage = activeChat === 'community' ? message.userId === publicKey.toString() : message.senderId === publicKey.toString();\n                const messageSeenBy = readReceipts[message.id] || [];\n                return <div key={message.id} className={`flex ${isOwnMessage ? 'justify-end' : 'justify-start'}`}>\n                        <div className={`max-w-[80%] rounded-lg p-3 ${isOwnMessage ? 'bg-gradient-to-r from-blue-600 to-purple-500 text-white' : 'bg-gray-800 text-white'}`}>\n                          <div className=\"flex justify-between items-start mb-1\">\n                            <span className={`font-bold text-sm ${isOwnMessage ? 'text-blue-200' : 'text-purple-400'}`}>\n                              {activeChat === 'community' ? message.userName : isOwnMessage ? 'You' : message.senderName || recipientName}\n                            </span>\n                            <span className=\"text-xs text-gray-400 ml-2\">\n                              {new Date(message.timestamp).toLocaleTimeString([], {\n                          hour: '2-digit',\n                          minute: '2-digit'\n                        })}\n                            </span>\n                          </div>\n                          <p className=\"break-words\">{message.content}</p>\n                          \n                          {isOwnMessage && <div className=\"flex justify-end mt-1\">\n                              {messageSeenBy.length > 0 ? <span className=\"flex items-center text-xs text-blue-300\">\n                                  <CheckCheck className=\"h-3 w-3 mr-1\" />\n                                  {messageSeenBy.length}\n                                </span> : <span className=\"flex items-center text-xs text-gray-400\">\n                                  <Check className=\"h-3 w-3\" />\n                                </span>}\n                            </div>}\n                        </div>\n                      </div>;\n              })}\n                  <div ref={messagesEndRef} />\n                </>}\n              \n              {typingUsers.length > 0 && activeChat === 'community' && <div className=\"flex items-center text-sm text-gray-400\">\n                  <div className=\"flex space-x-1 mr-2\">\n                    <div className=\"h-2 w-2 bg-gray-500 rounded-full animate-bounce\" style={{\n                  animationDelay: '0ms'\n                }}></div>\n                    <div className=\"h-2 w-2 bg-gray-500 rounded-full animate-bounce\" style={{\n                  animationDelay: '300ms'\n                }}></div>\n                    <div className=\"h-2 w-2 bg-gray-500 rounded-full animate-bounce\" style={{\n                  animationDelay: '600ms'\n                }}></div>\n                  </div>\n                  <span>\n                    {typingUsers.length === 1 ? `${typingUsers[0].userName} is typing...` : `${typingUsers.length} people are typing...`}\n                  </span>\n                </div>}\n            </div>\n            \n            {}\n            <form onSubmit={handleSendMessage} className=\"p-4 border-t border-gray-700 bg-gray-800\">\n              <div className=\"flex space-x-2\">\n                <input type=\"text\" value={newMessage} onChange={e => setNewMessage(e.target.value)} onKeyPress={() => handleTyping()} placeholder={activeChat === 'community' ? \"Type your message to the community...\" : `Type your message to ${recipientName}...`} className=\"flex-1 bg-gray-700 text-white rounded-l-md px-4 py-2 focus:outline-none focus:ring-2 focus:ring-blue-500\" />\n                <button type=\"submit\" disabled={!newMessage.trim()} className=\"bg-gradient-to-r from-blue-600 to-purple-500 text-white rounded-r-md px-4 py-2 font-medium hover:from-purple-500 hover:to-blue-600 transition-all duration-300 disabled:opacity-50 disabled:cursor-not-allowed\">\n                  <Send className=\"h-5 w-5\" />\n                </button>\n              </div>\n            </form>\n          </div>\n        </div>\n      </div>\n    </div>;\n};\nfunction App() {\n  const {\n    publicKey\n  } = useWallet();\n  const {\n    theme\n  } = useTheme();\n  const {\n    isSearching\n  } = useSearch();\n  const {\n    saveScrollPosition,\n    restoreScrollPosition\n  } = useScrollPosition();\n  useEffect(() => {\n    const style = document.createElement('style');\n    style.textContent = `\n      .theme-transition,\n      .theme-transition *,\n      .theme-transition *:before,\n      .theme-transition *:after {\n        transition: all 0.5s ease-out !important;\n        transition-delay: 0 !important;\n      }\n      \n      /* Force dark mode styles */\n      .dark-theme .dark\\\\:bg-gray-800,\n      .dark-theme .dark\\\\:bg-gray-900 {\n        background-color: rgba(31, 41, 55, var(--tw-bg-opacity)) !important;\n      }\n      \n      .dark-theme .dark\\\\:text-white,\n      .dark-theme .dark\\\\:text-gray-300,\n      .dark-theme .dark\\\\:text-gray-400,\n      .dark-theme .dark\\\\:text-blue-300,\n      .dark-theme .dark\\\\:text-blue-400 {\n        color: rgba(255, 255, 255, var(--tw-text-opacity)) !important;\n      }\n      \n      .dark-theme .dark\\\\:border-gray-700 {\n        border-color: rgba(55, 65, 81, var(--tw-border-opacity)) !important;\n      }\n      \n      /* Add smooth scrolling to the whole document */\n      html {\n        scroll-behavior: smooth;\n      }\n      \n      /* But allow instant scrolling when needed */\n      .instant-scroll {\n        scroll-behavior: auto !important;\n      }\n    `;\n    document.head.appendChild(style);\n    const currentTheme = localStorage.getItem('lartscape-theme') || (window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'light');\n    if (currentTheme === 'dark') {\n      document.body.classList.add('dark-theme');\n    } else {\n      document.body.classList.remove('dark-theme');\n    }\n    document.addEventListener('submit', e => {\n      saveScrollPosition();\n    });\n    return () => {\n      document.head.removeChild(style);\n      document.removeEventListener('submit', saveScrollPosition);\n    };\n  }, []);\n  useEffect(() => {\n    const handleEscapeKey = e => {\n      if (e.key === 'Escape') {\n        const menu = document.getElementById('social-share-menu');\n        if (menu && !menu.classList.contains('hidden')) {\n          menu.classList.add('hidden');\n        }\n      }\n    };\n    const handleClickOutside = e => {\n      const menu = document.getElementById('social-share-menu');\n      const button = document.querySelector('[data-social-share-trigger]');\n      if (menu && !menu.classList.contains('hidden') && !menu.contains(e.target) && !(button && button.contains(e.target))) {\n        menu.classList.add('hidden');\n      }\n    };\n    document.addEventListener('keydown', handleEscapeKey);\n    document.addEventListener('mousedown', handleClickOutside);\n    return () => {\n      document.removeEventListener('keydown', handleEscapeKey);\n      document.removeEventListener('mousedown', handleClickOutside);\n    };\n  }, []);\n  return <div className=\"min-h-screen bg-white dark:bg-gray-900 text-blue-600 dark:text-blue-300 transition-colors duration-500\">\n      <Header />\n      <WalletConnectBanner />\n      <main className=\"min-h-[calc(100vh-80px)] relative\">\n        <Routes>\n          <Route path=\"/\" element={<Gallery />} />\n          <Route path=\"/upload\" element={<UploadPage />} />\n          <Route path=\"/profile\" element={<ProfilePage />} />\n          <Route path=\"/chat\" element={<ChatPage />} />\n          <Route path=\"/donate\" element={<DonationPage />} />\n          <Route path=\"/search\" element={<SearchResultsPage />} />\n        </Routes>\n      </main>\n      <Footer />\n      <SearchModal />\n    </div>;\n}\nexport default AppWithProvider;","packageJson","{\"dependencies\":{\"react\":\"18.2.0\",\"react-router-dom\":\"6.18.0\",\"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\",\"@devfunlabs/state-client\":\"0.8.1\",\"@devfunlabs/wallet-adapter-devfun\":\"0.3.0\",\"socket.io-client\":\"4.7.1\",\"framer-motion\":\"10.16.4\",\"recharts\":\"2.8.0\",\"@devfunlabs/web-sdk\":\"0.2.2\",\"zod\":\"3.22.4\",\"react-dom\":\"18.2.0\"}}","appFunctions",[],"token",{"_20":82,"_83":84,"_85":86,"_87":-5,"_88":89,"_90":91,"_92":61,"_93":94,"_95":61,"_96":43,"_97":43,"_63":64,"_73":19},"Leonardo Art","symbol","LARTCOIN","image","https://pump.mypinata.cloud/ipfs/Qmf5jmGy4YsuR9Akh2x2nuMgrqkTzXW2gp8LsBoQxiS4hk?img-width=256&img-dpr=2","website","twitter","https://x.com/leonardoartsol","marketcap",4231.1787,"volumeIn24h","price",0.00000449,"priceChangeIn24h","devCount","appCount","upstreamApp","isLordOfDev","isExternalApp","analytics",[103,107,109,111,113,115,117,119,121,123,125,127,129,131],{"_104":105,"_106":61},"day","2025-10-25","runCount",{"_104":108,"_106":61},"2025-10-26",{"_104":110,"_106":61},"2025-10-27",{"_104":112,"_106":61},"2025-10-28",{"_104":114,"_106":61},"2025-10-29",{"_104":116,"_106":61},"2025-10-30",{"_104":118,"_106":61},"2025-10-31",{"_104":120,"_106":61},"2025-11-01",{"_104":122,"_106":61},"2025-11-02",{"_104":124,"_106":61},"2025-11-03",{"_104":126,"_106":61},"2025-11-04",{"_104":128,"_106":61},"2025-11-05",{"_104":130,"_106":61},"2025-11-06",{"_104":132,"_106":61},"2025-11-07","snapshot","ogImage","https://cdn.dev.fun/og/image/6ffe1641c605190ffb67/ba5f0f89.webp","isDevbase","project",{"_14":19,"_85":86,"_20":82,"_139":140,"_22":141},"oneliner","Hand-drawn crypto NFTs","I'm 10-year-old artist who loves drawing with a mission to draw every crypto meme on drawing paper and put it on the blockchain. Perhaps, I can draw you too!","commitDetail","livestream","actionData","errors"]
</article></body></html>