[{"_1":2,"_115":-5,"_116":-5},"loaderData",{"_3":4,"_10":11},"root",{"_5":-5,"_6":7,"_8":9},"user","appId","cm7twdhs6009l11ml868xhxld","wsEndpoint","https://dev.fun","routes/app.$appId",{"_12":13},"appDetail",{"_14":15,"_16":17,"_18":19,"_20":21,"_22":23,"_24":25,"_26":25,"_27":28,"_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":17,"_69":-5,"_70":71,"_72":73,"_74":75,"_76":-5,"_77":-5,"_78":17,"_79":80,"_111":30,"_112":113,"_114":25},"id","4ef08f78d65f632dec88","isMyApp",false,"name","lorespot","description","Discover hidden stories tied to the very ground beneath your feet! Lorespot lets you unearth local tales as you wander, or leave your own narrative breadcrumbs for others to find, creating an invisible layer of storytelling that transforms ordinary places into magical realms of discovery.","brief","Uncover and create location-based stories that turn your neighborhood into a living storybook!","isLive",true,"isPublic","tags",[],"cover","https://cdn.dev.fun/snapshot/4ef08f78d65f632dec88/81962_15b5dd9f.webp","cdnUrl","https://cdn.dev.fun/app/4ef08f78d65f632dec88/81962","createdAt",["D",1749920541763],"updatedAt",["D",1749923197125],"lastCommitId",["B","81962"],"tier",1,"credits",110,{"_14":44,"_45":46,"_47":-5,"_48":46,"_49":50,"_51":-5,"_52":53},"d85a58a5-0a33-439b-9ce7-64c5ff57afdf","uniqueId","9pjg63SifGULUzn2EwgGDVmX2K3eT5QHPrgrsrPefTLp","username","solanaWallet","displayName","9pj...TLp","bio","avatar","/avatar.svg","commitCount",18,"forkCount",0,"likeCount","runsCount",6,"downvoteCount","upvoteCount","upvoteRate","commentCount","reportCount","visitorCount","isArchived","isRenamed","contractAddress","code","import { useState, useEffect, useRef } from 'react';\nimport { useDevapp, UserButton, DevappProvider } from '@devfunlabs/web-sdk';\nimport { MapPin, Book, UserCircle, PlusCircle, Heart, ArrowLeft, Camera, X, Sparkles, Compass, ZoomIn, ZoomOut, Crown, Coins, ChevronUp, BarChart, Tag, Eye, Map } from 'lucide-react';\nimport { motion, AnimatePresence } from 'framer-motion';\nexport default function AppWithProvider() {\n return \n \n ;\n}\nfunction App() {\n const {\n devbaseClient,\n userWallet\n } = useDevapp();\n const [view, setView] = useState('map');\n const [stories, setStories] = useState([]);\n const [userProfile, setUserProfile] = useState(null);\n const [currentStory, setCurrentStory] = useState(null);\n const [isLoading, setIsLoading] = useState(true);\n const [currentLocation, setCurrentLocation] = useState(null);\n const [nearbyStories, setNearbyStories] = useState([]);\n const [discoveryRadius, setDiscoveryRadius] = useState(1);\n const [, setMapLoaded] = useState(false);\n const [showTipModal, setShowTipModal] = useState(false);\n const [tipAmount, setTipAmount] = useState(0.01);\n const [isTipping, setIsTipping] = useState(false);\n const [isPremiumModalOpen, setIsPremiumModalOpen] = useState(false);\n const [isPremiumProcessing, setIsPremiumProcessing] = useState(false);\n const [storyAnalytics, setStoryAnalytics] = useState(null);\n const PAYMENT_WALLET = \"9pjg63SifGULUzn2EwgGDVmX2K3eT5QHPrgrsrPefTLp\";\n const FREE_STORY_LIMIT = 3;\n const [storyForm, setStoryForm] = useState({\n title: '',\n content: '',\n image: null,\n lat: null,\n lng: null,\n category: 'adventure',\n isPremium: false\n });\n const [error, setError] = useState(null);\n const mapRef = useRef(null);\n const mapInstanceRef = useRef(null);\n const [magicalEffect, setMagicalEffect] = useState(false);\n const [, setLocationPermissionStatus] = useState('pending');\n useEffect(() => {\n let watchId = null;\n const getLocation = () => {\n if (navigator.geolocation) {\n setLocationPermissionStatus('requesting');\n navigator.geolocation.getCurrentPosition(position => {\n setCurrentLocation({\n lat: position.coords.latitude,\n lng: position.coords.longitude\n });\n setLocationPermissionStatus('granted');\n }, () => {\n navigator.geolocation.getCurrentPosition(position => {\n setCurrentLocation({\n lat: position.coords.latitude,\n lng: position.coords.longitude\n });\n setLocationPermissionStatus('granted');\n }, err => {\n console.error(\"Error getting location:\", err);\n setCurrentLocation({\n lat: 37.7749,\n lng: -122.4194\n });\n }, {\n enableHighAccuracy: false,\n timeout: 10000,\n maximumAge: 30000\n });\n }, {\n enableHighAccuracy: true,\n timeout: 5000,\n maximumAge: 10000\n });\n watchId = navigator.geolocation.watchPosition(position => {\n setCurrentLocation({\n lat: position.coords.latitude,\n lng: position.coords.longitude\n });\n setLocationPermissionStatus('granted');\n }, err => {\n console.error(\"Watch position error:\", err);\n }, {\n enableHighAccuracy: true,\n distanceFilter: 10\n });\n } else {\n setLocationPermissionStatus('unavailable');\n setCurrentLocation({\n lat: 37.7749,\n lng: -122.4194\n });\n }\n };\n getLocation();\n return () => {\n if (watchId) {\n navigator.geolocation.clearWatch(watchId);\n }\n };\n }, []);\n useEffect(() => {\n if (userWallet && devbaseClient) {\n fetchStories();\n fetchUserProfile();\n if (userProfile && userProfile.isPremium && userProfile.premiumExpiry) {\n const now = Date.now();\n if (now > userProfile.premiumExpiry) {\n updatePremiumStatus(false);\n }\n }\n }\n }, [userWallet, devbaseClient]);\n useEffect(() => {}, []);\n useEffect(() => {\n if (currentLocation && mapRef.current && view === 'map') {\n if (mapInstanceRef.current) {\n mapInstanceRef.current.center = [currentLocation.lng, currentLocation.lat];\n const iframe = mapRef.current.querySelector('iframe');\n if (iframe) {\n const zoom = mapInstanceRef.current.zoom;\n iframe.src = `https://maps.google.com/maps?q=${currentLocation.lat},${currentLocation.lng}&z=${zoom}&output=embed`;\n }\n addStoryMarkersToMap();\n return;\n }\n const mapInstance = {\n center: [currentLocation.lng, currentLocation.lat],\n zoom: 14,\n markers: [],\n flyTo: options => {\n mapInstance.center = options.center || mapInstance.center;\n mapInstance.zoom = options.zoom || mapInstance.zoom;\n const iframe = mapRef.current.querySelector('iframe');\n if (iframe) {\n iframe.src = `https://maps.google.com/maps?q=${options.center ? options.center[1] : currentLocation.lat},${options.center ? options.center[0] : currentLocation.lng}&z=${options.zoom || mapInstance.zoom}&output=embed`;\n }\n addStoryMarkersToMap();\n },\n zoomIn: () => {\n mapInstance.zoom = Math.min(20, mapInstance.zoom + 1);\n const iframe = mapRef.current.querySelector('iframe');\n if (iframe) {\n iframe.src = `https://maps.google.com/maps?q=${currentLocation.lat},${currentLocation.lng}&z=${mapInstance.zoom}&output=embed`;\n }\n addStoryMarkersToMap();\n },\n zoomOut: () => {\n mapInstance.zoom = Math.max(1, mapInstance.zoom - 1);\n const iframe = mapRef.current.querySelector('iframe');\n if (iframe) {\n iframe.src = `https://maps.google.com/maps?q=${currentLocation.lat},${currentLocation.lng}&z=${mapInstance.zoom}&output=embed`;\n }\n addStoryMarkersToMap();\n }\n };\n mapInstanceRef.current = mapInstance;\n setMapLoaded(true);\n addStoryMarkersToMap();\n }\n }, [currentLocation, view]);\n const addStoryMarkersToMap = () => {\n if (!mapInstanceRef.current || stories.length === 0 || !mapRef.current || !currentLocation) return;\n setStoryMarkers(stories.map(story => {\n const isPremium = story.isPremium;\n const center = mapInstanceRef.current.center;\n const zoom = mapInstanceRef.current.zoom;\n const scale = Math.pow(2, zoom - 10);\n const latDiff = (story.lat - center[1]) * scale * 1000;\n const lngDiff = (story.lng - center[0]) * scale * 1000;\n const isVisible = Math.abs(latDiff) <= 400 && Math.abs(lngDiff) <= 400;\n const randomOffset = story.id ? parseInt(story.id.substring(0, 8), 16) % 10 - 5 : 0;\n return {\n id: story.id,\n story: story,\n latDiff: latDiff,\n lngDiff: lngDiff + randomOffset,\n isPremium: isPremium,\n isVisible: isVisible\n };\n }));\n };\n useEffect(() => {\n if (mapInstanceRef.current && view === 'map') {\n addStoryMarkersToMap();\n }\n }, [stories, currentLocation, view, discoveryRadius, mapInstanceRef.current?.zoom]);\n useEffect(() => {\n if (currentLocation && stories.length > 0) {\n const radiusInKm = discoveryRadius;\n const nearby = stories.filter(story => {\n const distance = calculateDistance(currentLocation.lat, currentLocation.lng, story.lat, story.lng);\n return distance <= radiusInKm;\n });\n setNearbyStories(nearby);\n setIsLoading(false);\n } else {\n if (currentLocation) {\n setIsLoading(false);\n }\n }\n }, [stories, currentLocation, discoveryRadius]);\n const calculateDistance = (lat1, lon1, lat2, lon2) => {\n const R = 6371;\n const dLat = deg2rad(lat2 - lat1);\n const dLon = deg2rad(lon2 - lon1);\n const a = Math.sin(dLat / 2) * Math.sin(dLat / 2) + Math.cos(deg2rad(lat1)) * Math.cos(deg2rad(lat2)) * Math.sin(dLon / 2) * Math.sin(dLon / 2);\n const c = 2 * Math.atan2(Math.sqrt(a), Math.sqrt(1 - a));\n const d = R * c;\n return d;\n };\n const deg2rad = deg => {\n return deg * (Math.PI / 180);\n };\n const fetchStories = async () => {\n try {\n const allStories = await devbaseClient.listEntities('stories');\n setStories(allStories);\n if (currentLocation) {\n setIsLoading(false);\n }\n } catch (err) {\n console.error(\"Error fetching stories:\", err);\n setError(\"Failed to load stories. Please try again.\");\n setIsLoading(false);\n setStories([]);\n }\n };\n const fetchUserProfile = async () => {\n if (!userWallet || !devbaseClient) {\n console.log(\"Cannot fetch profile - wallet or devbaseClient not available\");\n return;\n }\n try {\n const users = await devbaseClient.listEntities('users', {\n userId: userWallet\n });\n if (users && users.length > 0) {\n setUserProfile(users[0]);\n console.log(\"User profile loaded:\", users[0]);\n } else {\n console.log(\"No user profile found, creating new one\");\n const defaultUsername = `Explorer_${userWallet.substring(0, 4)}`;\n const newUser = await devbaseClient.createEntity('users', {\n userId: userWallet,\n username: defaultUsername,\n avatar_url: `https://api.dicebear.com/7.x/personas/svg?seed=${userWallet}`,\n isPremium: false,\n premiumExpiry: null,\n storyCount: 0,\n totalTips: 0\n });\n setUserProfile(newUser);\n console.log(\"Created new user profile:\", newUser);\n }\n } catch (err) {\n console.error(\"Error fetching user profile:\", err);\n const fallbackProfile = {\n userId: userWallet,\n username: `Explorer_${userWallet.substring(0, 4)}`,\n avatar_url: `https://api.dicebear.com/7.x/personas/svg?seed=${userWallet}`,\n isPremium: false,\n premiumExpiry: null,\n storyCount: 0,\n totalTips: 0\n };\n setUserProfile(fallbackProfile);\n console.log(\"Using fallback profile due to error\");\n }\n };\n const updatePremiumStatus = async isPremium => {\n try {\n if (!userProfile) return;\n const premiumExpiry = isPremium ? Date.now() + 30 * 24 * 60 * 60 * 1000 : null;\n const updatedProfile = await devbaseClient.updateEntity('users', userProfile.id, {\n ...userProfile,\n isPremium,\n premiumExpiry\n });\n setUserProfile(updatedProfile);\n if (isPremium) {\n setMagicalEffect(true);\n setTimeout(() => setMagicalEffect(false), 2000);\n }\n } catch (err) {\n console.error(\"Error updating premium status:\", err);\n setError(\"Failed to update premium status. Please try again.\");\n }\n };\n const centerMapOnUser = () => {\n if (mapInstanceRef.current && currentLocation) {\n mapInstanceRef.current.flyTo({\n center: [currentLocation.lng, currentLocation.lat],\n zoom: 15\n });\n }\n };\n const handleZoomIn = () => {\n if (mapInstanceRef.current) {\n mapInstanceRef.current.zoomIn();\n }\n };\n const handleZoomOut = () => {\n if (mapInstanceRef.current) {\n mapInstanceRef.current.zoomOut();\n }\n };\n const handleCreateStory = async () => {\n if (!storyForm.title || !storyForm.content) {\n setError(\"Please fill in all required fields!\");\n return;\n }\n if (!storyForm.lat || !storyForm.lng) {\n setError(\"Please tag a location for your story!\");\n return;\n }\n if (!userProfile) {\n setError(\"Please connect your wallet first!\");\n return;\n }\n if (!userProfile.isPremium) {\n const userStories = stories.filter(story => story.userId === userWallet);\n const currentMonth = new Date().getMonth();\n const currentYear = new Date().getFullYear();\n const storiesThisMonth = userStories.filter(story => {\n const storyDate = new Date(story.createdAt);\n return storyDate.getMonth() === currentMonth && storyDate.getFullYear() === currentYear;\n });\n if (storiesThisMonth.length >= FREE_STORY_LIMIT) {\n setError(`You've reached your limit of ${FREE_STORY_LIMIT} stories this month. Upgrade to premium for unlimited stories!`);\n setIsPremiumModalOpen(true);\n return;\n }\n }\n try {\n setIsLoading(true);\n const newStory = await devbaseClient.createEntity('stories', {\n userId: userWallet,\n title: storyForm.title,\n content: storyForm.content,\n image_url: storyForm.image || '',\n lat: storyForm.lat,\n lng: storyForm.lng,\n likes: 0,\n views: 0,\n tipAmount: 0,\n category: storyForm.category,\n isPremium: userProfile.isPremium && storyForm.isPremium\n });\n if (userProfile) {\n await devbaseClient.updateEntity('users', userProfile.id, {\n ...userProfile,\n storyCount: (userProfile.storyCount || 0) + 1\n });\n }\n setStories(prev => [...prev, newStory]);\n setStoryForm({\n title: '',\n content: '',\n image: null,\n lat: null,\n lng: null,\n category: 'adventure',\n isPremium: false\n });\n setMagicalEffect(true);\n setTimeout(() => {\n setMagicalEffect(false);\n setView('map');\n }, 2000);\n setIsLoading(false);\n } catch (err) {\n console.error(\"Error creating story:\", err);\n setError(\"Failed to create your story. Please try again.\");\n setIsLoading(false);\n }\n };\n const handleLikeStory = async storyId => {\n if (!userWallet) return;\n try {\n const story = await devbaseClient.getEntity('stories', storyId);\n if (!story) return;\n const updatedStory = await devbaseClient.updateEntity('stories', storyId, {\n ...story,\n likes: (story.likes || 0) + 1\n });\n setStories(prev => prev.map(s => s.id === storyId ? updatedStory : s));\n if (currentStory && currentStory.id === storyId) {\n setCurrentStory(updatedStory);\n }\n } catch (err) {\n console.error(\"Error liking story:\", err);\n }\n };\n const handleTipStory = async () => {\n if (!userWallet || !currentStory) return;\n try {\n setIsTipping(true);\n const {\n sendTransaction\n } = useDevapp();\n if (!sendTransaction) {\n setError(\"Wallet connection issue. Please reconnect and try again.\");\n setIsTipping(false);\n return;\n }\n const web3 = require('@solana/web3.js');\n const {\n SystemProgram,\n Transaction,\n PublicKey,\n LAMPORTS_PER_SOL\n } = web3;\n const platformFee = tipAmount * 0.1;\n const creatorAmount = tipAmount * 0.9;\n const transaction = new Transaction();\n transaction.add(SystemProgram.transfer({\n fromPubkey: new PublicKey(userWallet),\n toPubkey: new PublicKey(currentStory.userId),\n lamports: Math.floor(creatorAmount * LAMPORTS_PER_SOL)\n }));\n transaction.add(SystemProgram.transfer({\n fromPubkey: new PublicKey(userWallet),\n toPubkey: new PublicKey(PAYMENT_WALLET),\n lamports: Math.floor(platformFee * LAMPORTS_PER_SOL)\n }));\n const connection = new web3.Connection(web3.clusterApiUrl('mainnet-beta'));\n await sendTransaction(transaction, connection);\n const updatedStory = await devbaseClient.updateEntity('stories', currentStory.id, {\n ...currentStory,\n tipAmount: (currentStory.tipAmount || 0) + tipAmount\n });\n const creatorProfile = await devbaseClient.getEntity('users', currentStory.userId);\n if (creatorProfile) {\n await devbaseClient.updateEntity('users', creatorProfile.id, {\n ...creatorProfile,\n totalTips: (creatorProfile.totalTips || 0) + tipAmount\n });\n }\n setStories(prev => prev.map(s => s.id === currentStory.id ? updatedStory : s));\n setCurrentStory(updatedStory);\n setShowTipModal(false);\n setMagicalEffect(true);\n setTimeout(() => setMagicalEffect(false), 2000);\n } catch (err) {\n console.error(\"Error tipping story:\", err);\n setError(\"Failed to process your tip. Please try again.\");\n } finally {\n setIsTipping(false);\n }\n };\n const handleUpgradeToPremium = async () => {\n try {\n setIsPremiumProcessing(true);\n const {\n sendTransaction\n } = useDevapp();\n if (!sendTransaction) {\n setError(\"Wallet connection issue. Please reconnect and try again.\");\n setIsPremiumProcessing(false);\n return;\n }\n const web3 = require('@solana/web3.js');\n const {\n SystemProgram,\n Transaction,\n PublicKey,\n LAMPORTS_PER_SOL\n } = web3;\n const transaction = new Transaction().add(SystemProgram.transfer({\n fromPubkey: new PublicKey(userWallet),\n toPubkey: new PublicKey(PAYMENT_WALLET),\n lamports: 0.1 * LAMPORTS_PER_SOL\n }));\n const connection = new web3.Connection(web3.clusterApiUrl('mainnet-beta'));\n await sendTransaction(transaction, connection);\n await updatePremiumStatus(true);\n setIsPremiumModalOpen(false);\n } catch (err) {\n console.error(\"Error upgrading to premium:\", err);\n setError(\"Failed to process your premium upgrade. Please try again.\");\n } finally {\n setIsPremiumProcessing(false);\n }\n };\n const incrementStoryViews = async storyId => {\n if (!storyId) return;\n try {\n const story = await devbaseClient.getEntity('stories', storyId);\n if (!story) return;\n const updatedStory = await devbaseClient.updateEntity('stories', storyId, {\n ...story,\n views: (story.views || 0) + 1\n });\n setStories(prev => prev.map(s => s.id === storyId ? updatedStory : s));\n return updatedStory;\n } catch (err) {\n console.error(\"Error incrementing story views:\", err);\n return null;\n }\n };\n const fetchStoryAnalytics = async storyId => {\n if (!storyId) return;\n try {\n const story = await devbaseClient.getEntity('stories', storyId);\n if (!story) return;\n setStoryAnalytics({\n views: story.views || 0,\n likes: story.likes || 0,\n tips: story.tipAmount || 0\n });\n } catch (err) {\n console.error(\"Error fetching story analytics:\", err);\n }\n };\n const handleUseCurrentLocation = () => {\n if (currentLocation) {\n setStoryForm(prev => ({\n ...prev,\n lat: currentLocation.lat,\n lng: currentLocation.lng\n }));\n setError(null);\n } else {\n setError(\"Could not determine your location. Please try again.\");\n }\n };\n const handleImageUpload = e => {\n const file = e.target.files[0];\n if (!file) return;\n const reader = new FileReader();\n reader.onloadend = () => {\n setStoryForm(prev => ({\n ...prev,\n image: reader.result\n }));\n };\n reader.readAsDataURL(file);\n };\n const handleCameraCapture = async () => {\n try {\n if (!navigator.mediaDevices || !navigator.mediaDevices.getUserMedia) {\n setError(\"Your browser doesn't support camera access!\");\n return;\n }\n const videoElement = document.createElement('video');\n const canvasElement = document.createElement('canvas');\n const streamPromise = navigator.mediaDevices.getUserMedia({\n video: {\n facingMode: 'environment'\n }\n });\n const modal = document.createElement('div');\n modal.style.position = 'fixed';\n modal.style.top = '0';\n modal.style.left = '0';\n modal.style.right = '0';\n modal.style.bottom = '0';\n modal.style.backgroundColor = 'rgba(0, 0, 0, 0.9)';\n modal.style.zIndex = '9999';\n modal.style.display = 'flex';\n modal.style.flexDirection = 'column';\n modal.style.alignItems = 'center';\n modal.style.justifyContent = 'center';\n videoElement.style.width = '100%';\n videoElement.style.maxWidth = '500px';\n videoElement.style.borderRadius = '8px';\n videoElement.autoplay = true;\n const captureButton = document.createElement('button');\n captureButton.innerHTML = 'Capture Magic ✨';\n captureButton.style.marginTop = '16px';\n captureButton.style.padding = '10px 20px';\n captureButton.style.background = 'linear-gradient(to right, #9333ea, #ec4899)';\n captureButton.style.color = 'white';\n captureButton.style.border = 'none';\n captureButton.style.borderRadius = '8px';\n captureButton.style.cursor = 'pointer';\n captureButton.style.fontWeight = 'bold';\n const cancelButton = document.createElement('button');\n cancelButton.innerHTML = 'Cancel';\n cancelButton.style.marginTop = '8px';\n cancelButton.style.padding = '8px 16px';\n cancelButton.style.background = 'rgba(255, 255, 255, 0.2)';\n cancelButton.style.color = 'white';\n cancelButton.style.border = 'none';\n cancelButton.style.borderRadius = '8px';\n cancelButton.style.cursor = 'pointer';\n modal.appendChild(videoElement);\n modal.appendChild(captureButton);\n modal.appendChild(cancelButton);\n document.body.appendChild(modal);\n const stream = await streamPromise;\n videoElement.srcObject = stream;\n videoElement.onloadedmetadata = () => {\n canvasElement.width = videoElement.videoWidth;\n canvasElement.height = videoElement.videoHeight;\n };\n captureButton.onclick = () => {\n const context = canvasElement.getContext('2d');\n context.drawImage(videoElement, 0, 0, canvasElement.width, canvasElement.height);\n const imageDataUrl = canvasElement.toDataURL('image/jpeg');\n setStoryForm(prev => ({\n ...prev,\n image: imageDataUrl\n }));\n stream.getTracks().forEach(track => track.stop());\n document.body.removeChild(modal);\n setMagicalEffect(true);\n setTimeout(() => setMagicalEffect(false), 1000);\n };\n cancelButton.onclick = () => {\n stream.getTracks().forEach(track => track.stop());\n document.body.removeChild(modal);\n };\n } catch (err) {\n console.error(\"Camera access error:\", err);\n setError(\"Couldn't access your camera. Please check permissions or try uploading from your gallery instead.\");\n }\n };\n const [storyMarkers, setStoryMarkers] = useState([]);\n const renderMap = () => {\n return

\n \n

\n \n {}\n

\n\n {}\n {storyForm.lat && storyForm.lng && view === 'create' &&

\n \n

}\n \n {}\n {storyMarkers.map(marker => marker.isVisible &&

{\n setCurrentStory(marker.story);\n incrementStoryViews(marker.story.id);\n setView('story');\n }}>\n

\n \n {marker.isPremium &&

\n ★\n

}\n

\n \n

{marker.story.title} {marker.isPremium ? '★' : ''}

\n {marker.story.content.substring(0, 50)}\n {marker.story.content.length > 50 ? '...' : ''}\n

\n {marker.story.category &&

#{marker.story.category}

}\n

)}\n \n {}\n {isLoading &&

}\n

\n \n {}\n

\n \n Exploring stories around you\n

\n {nearbyStories.length} stories within {discoveryRadius}km\n

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

\n {nearbyStories.length > 0 && nearbyStories.map(story => {\n setCurrentStory(story);\n incrementStoryViews(story.id);\n setView('story');\n }}>\n

\n {story.image_url ? {story.title}

\n \n

}\n

\n \n {calculateDistance(currentLocation.lat, currentLocation.lng, story.lat, story.lng).toFixed(1)} km\n

{story.title}

{story.content}

\n )}\n

;\n };\n const renderCreateStory = () => {\n return

\n \n

{}\n

\n Create a New Story\n

\n {error &&

\n {error}\n

}\n

\n Title\n setStoryForm(prev => ({\n ...prev,\n title: e.target.value\n }))} className=\"w-full p-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-purple-500 focus:border-transparent\" placeholder=\"What's your story called?\" />\n

\n Your Tale\n

setStoryForm(prev => ({\n              ...prev,\n              content: e.target.value\n            }))} className=\"w-full p-3 border border-gray-300 rounded-lg h-32 focus:ring-2 focus:ring-purple-500 focus:border-transparent\" placeholder=\"Share the magic you discovered here...\" />\n            </div>\n            \n            {userProfile && userProfile.isPremium && <>\n                <div>\n                  <label className=\"block text-sm font-medium text-gray-700 mb-1\">Category</label>\n                  <select value={storyForm.category} onChange={e => setStoryForm(prev => ({\n                ...prev,\n                category: e.target.value\n              }))} className=\"w-full p-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-purple-500 focus:border-transparent\">\n                    <option value=\"adventure\">Adventure</option>\n                    <option value=\"mystery\">Mystery</option>\n                    <option value=\"historical\">Historical</option>\n                    <option value=\"fantasy\">Fantasy</option>\n                    <option value=\"romance\">Romance</option>\n                    <option value=\"horror\">Horror</option>\n                    <option value=\"local\">Local Knowledge</option>\n                  </select>\n                </div>\n                \n                <div className=\"flex items-center\">\n                  <input type=\"checkbox\" id=\"premium-story\" checked={storyForm.isPremium} onChange={e => setStoryForm(prev => ({\n                ...prev,\n                isPremium: e.target.checked\n              }))} className=\"w-4 h-4 text-purple-600 focus:ring-purple-500\" />\n                  <label htmlFor=\"premium-story\" className=\"ml-2 flex items-center text-sm text-gray-700\">\n                    <Crown size={16} className=\"mr-1 text-yellow-500\" />\n                    Mark as Premium Story (priority placement)\n                  </label>\n                </div>\n              </>}\n            \n            <div>\n              <label className=\"block text-sm font-medium text-gray-700 mb-1\">Image</label>\n              <div className=\"relative border-2 border-dashed border-gray-300 rounded-lg p-4 text-center\">\n                {storyForm.image ? <div className=\"relative\">\n                    <img src={storyForm.image} alt=\"Preview\" className=\"max-h-48 mx-auto rounded\" />\n                    <button onClick={() => setStoryForm(prev => ({\n                  ...prev,\n                  image: null\n                }))} className=\"absolute top-1 right-1 bg-red-500 text-white rounded-full p-1\">\n                      <X size={16} />\n                    </button>\n                  </div> : <>\n                    <Camera className=\"mx-auto h-12 w-12 text-gray-400\" />\n                    <div className=\"mt-2 text-sm text-gray-600\">How would you like to add an image?</div>\n                    <div className=\"mt-4 flex justify-center gap-4\">\n                      <button onClick={handleCameraCapture} className=\"px-4 py-2 bg-gradient-to-r from-blue-500 to-purple-500 text-white rounded-lg flex items-center gap-2 hover:shadow-lg transition-all\">\n                        <Camera size={18} />\n                        Take Photo\n                      </button>\n                      <label className=\"px-4 py-2 bg-gradient-to-r from-purple-500 to-pink-500 text-white rounded-lg flex items-center gap-2 hover:shadow-lg transition-all cursor-pointer\">\n                        <Book size={18} />\n                        From Gallery\n                        <input type=\"file\" accept=\"image/*\" onChange={handleImageUpload} className=\"hidden\" />\n                      </label>\n                    </div>\n                  </>}\n              </div>\n            </div>\n            <div>\n              <label className=\"block text-sm font-medium text-gray-700 mb-1\">Location</label>\n              <div className=\"flex\">\n                <button onClick={handleUseCurrentLocation} className=\"flex-1 bg-blue-500 text-white py-3 px-4 rounded-lg flex items-center justify-center gap-2 hover:bg-blue-600\">\n                  <MapPin size={16} />\n                  Use My Current Location\n                </button>\n              </div>\n              {storyForm.lat && storyForm.lng && <div className=\"mt-2 text-sm text-green-600 flex items-center\">\n                  <MapPin size={14} className=\"mr-1\" />\n                  Location tagged at {storyForm.lat.toFixed(6)}, {storyForm.lng.toFixed(6)}\n                </div>}\n            </div>\n            \n            {!userProfile?.isPremium && <div className=\"mt-2 bg-amber-50 border border-amber-200 rounded-lg p-3\">\n                <div className=\"flex items-center text-amber-700\">\n                  <div className=\"mr-2\">\n                    <span className=\"text-xs font-medium\">FREE TIER</span>\n                  </div>\n                  <div className=\"text-xs\">\n                    {FREE_STORY_LIMIT - (userProfile?.storyCount || 0) > 0 ? `You have ${FREE_STORY_LIMIT - (userProfile?.storyCount || 0)} stories remaining this month` : `You've reached your limit of ${FREE_STORY_LIMIT} stories this month`}\n                  </div>\n                </div>\n              </div>}\n            \n            <div className=\"pt-4\">\n              <motion.button whileTap={{\n              scale: 0.95\n            }} onClick={handleCreateStory} disabled={isLoading} className=\"w-full py-3 px-4 bg-gradient-to-r from-purple-500 to-pink-500 text-white font-medium rounded-lg shadow-md hover:shadow-lg flex items-center justify-center gap-2\">\n                {isLoading ? <div className=\"h-5 w-5 border-2 border-white border-t-transparent rounded-full animate-spin\"></div> : <>\n                    <Sparkles size={16} />\n                    Plant Your Story Here\n                  </>}\n              </motion.button>\n            </div>\n          </div>\n        </div>\n      </div>;\n  };\n  useEffect(() => {\n    if (currentStory && userProfile && currentStory.userId === userWallet && userProfile.isPremium) {\n      fetchStoryAnalytics(currentStory.id);\n    }\n  }, [currentStory, userProfile, userWallet]);\n  const renderStoryDetail = () => {\n    if (!currentStory) return null;\n    return <div className=\"relative w-full h-[calc(100vh-13rem)] bg-white rounded-lg overflow-y-auto shadow-xl\">\n        <button onClick={() => {\n        setCurrentStory(null);\n        setView('map');\n      }} className=\"absolute top-4 left-4 z-20 p-2 bg-white/80 backdrop-blur-sm rounded-full text-gray-800 hover:bg-white\">\n          <ArrowLeft size={20} />\n        </button>\n        <div className=\"pt-8\"> {}\n        <div className=\"h-56 bg-gray-200 relative mt-4\">\n          {currentStory.image_url ? <img src={currentStory.image_url} alt={currentStory.title} className=\"w-full h-full object-cover\" /> : <div className=\"absolute inset-0 flex items-center justify-center bg-gradient-to-br from-blue-100 to-purple-100\">\n              <Book size={48} className=\"text-gray-400\" />\n            </div>}\n          \n          {currentStory.isPremium && <div className=\"absolute top-2 right-2 bg-yellow-500 text-white text-xs font-bold px-2 py-1 rounded-full flex items-center\">\n              <Crown size={12} className=\"mr-1\" />\n              Premium\n            </div>}\n          \n          {currentStory.category && <div className=\"absolute bottom-2 left-2 bg-white/80 backdrop-blur-sm text-purple-700 text-xs font-medium px-2 py-1 rounded-full flex items-center\">\n              <Tag size={12} className=\"mr-1\" />\n              {currentStory.category}\n            </div>}\n        </div>\n        </div>\n        <div className=\"p-5\">\n          <h1 className=\"text-2xl font-bold text-gray-800\">{currentStory.title}</h1>\n          <div className=\"flex items-center justify-between mt-2\">\n            <div className=\"flex items-center gap-2 text-sm text-gray-600\">\n              <MapPin size={14} />\n              <span>\n                {calculateDistance(currentLocation.lat, currentLocation.lng, currentStory.lat, currentStory.lng).toFixed(1)} km away\n              </span>\n            </div>\n            \n            <div className=\"flex items-center gap-2 text-sm text-gray-600\">\n              <Eye size={14} />\n              <span>{currentStory.views || 0} views</span>\n            </div>\n          </div>\n          \n          <p className=\"mt-4 text-gray-700 whitespace-pre-line\">{currentStory.content}</p>\n          \n          {}\n          {userProfile && userProfile.isPremium && currentStory.userId === userWallet && storyAnalytics && <div className=\"mt-6 p-3 bg-purple-50 rounded-lg\">\n              <div className=\"text-sm font-medium text-purple-700 mb-2 flex items-center\">\n                <BarChart size={16} className=\"mr-1\" />\n                Story Analytics\n              </div>\n              <div className=\"grid grid-cols-3 gap-2\">\n                <div className=\"flex flex-col items-center p-2 bg-white rounded-md\">\n                  <Eye size={16} className=\"text-blue-500 mb-1\" />\n                  <div className=\"text-xl font-bold\">{storyAnalytics.views}</div>\n                  <div className=\"text-xs text-gray-500\">Views</div>\n                </div>\n                <div className=\"flex flex-col items-center p-2 bg-white rounded-md\">\n                  <Heart size={16} className=\"text-pink-500 mb-1\" />\n                  <div className=\"text-xl font-bold\">{storyAnalytics.likes}</div>\n                  <div className=\"text-xs text-gray-500\">Likes</div>\n                </div>\n                <div className=\"flex flex-col items-center p-2 bg-white rounded-md\">\n                  <Coins size={16} className=\"text-yellow-500 mb-1\" />\n                  <div className=\"text-xl font-bold\">{storyAnalytics.tips.toFixed(2)}</div>\n                  <div className=\"text-xs text-gray-500\">SOL Tips</div>\n                </div>\n              </div>\n            </div>}\n          \n          <div className=\"mt-6 flex items-center justify-between\">\n            <div className=\"flex gap-3\">\n              <button onClick={() => handleLikeStory(currentStory.id)} className=\"flex items-center gap-1 text-pink-500 hover:text-pink-600\">\n                <Heart size={20} className={currentStory.likes > 0 ? \"fill-pink-500\" : \"\"} />\n                <span>{currentStory.likes || 0}</span>\n              </button>\n              \n              {currentStory.userId !== userWallet && <button onClick={() => setShowTipModal(true)} className=\"flex items-center gap-1 text-yellow-500 hover:text-yellow-600\">\n                  <Coins size={20} />\n                  <span>Tip Creator</span>\n                </button>}\n            </div>\n            \n            <div className=\"text-sm text-gray-500\">\n              {new Date(currentStory.createdAt).toLocaleDateString()}\n            </div>\n          </div>\n        </div>\n        \n        {}\n        <AnimatePresence>\n          {showTipModal && <motion.div initial={{\n          opacity: 0\n        }} animate={{\n          opacity: 1\n        }} exit={{\n          opacity: 0\n        }} className=\"fixed inset-0 z-50 flex items-center justify-center bg-black/50 backdrop-blur-sm p-4\">\n              <motion.div initial={{\n            scale: 0.9\n          }} animate={{\n            scale: 1\n          }} exit={{\n            scale: 0.9\n          }} className=\"bg-white rounded-xl p-6 max-w-md w-full shadow-2xl\">\n                <h3 className=\"text-xl font-bold text-gray-800 mb-4\">Tip the Creator</h3>\n                <p className=\"text-gray-600 mb-6\">Show your appreciation by sending some SOL to the creator of this story.</p>\n                \n                <div className=\"mb-6\">\n                  <label className=\"block text-sm font-medium text-gray-700 mb-2\">Amount (SOL)</label>\n                  <div className=\"flex gap-2\">\n                    {[0.01, 0.02, 0.05].map(amount => <button key={amount} onClick={() => setTipAmount(amount)} className={`px-4 py-2 rounded-lg flex-1 ${tipAmount === amount ? 'bg-yellow-500 text-white' : 'bg-gray-100 text-gray-700 hover:bg-gray-200'}`}>\n                        {amount} SOL\n                      </button>)}\n                  </div>\n                  \n                  <div className=\"mt-4 text-xs text-gray-500\">\n                    90% goes directly to the creator. 10% helps maintain Lorespot.\n                  </div>\n                </div>\n                \n                <div className=\"flex gap-3\">\n                  <button onClick={() => setShowTipModal(false)} className=\"flex-1 py-2 px-4 border border-gray-300 rounded-lg text-gray-700 hover:bg-gray-50\">\n                    Cancel\n                  </button>\n                  <button onClick={handleTipStory} disabled={isTipping} className=\"flex-1 py-2 px-4 bg-gradient-to-r from-yellow-400 to-yellow-600 text-white rounded-lg hover:shadow-lg flex items-center justify-center\">\n                    {isTipping ? <div className=\"h-5 w-5 border-2 border-white border-t-transparent rounded-full animate-spin\"></div> : <>\n                        <Coins size={16} className=\"mr-2\" />\n                        Send Tip\n                      </>}\n                  </button>\n                </div>\n              </motion.div>\n            </motion.div>}\n        </AnimatePresence>\n      </div>;\n  };\n  const renderProfile = () => {\n    const userStories = userWallet ? stories.filter(story => story.userId === userWallet) : [];\n    const currentMonth = new Date().getMonth();\n    const currentYear = new Date().getFullYear();\n    const storiesThisMonth = userStories.filter(story => {\n      if (!story.createdAt) return false;\n      const storyDate = new Date(story.createdAt);\n      return storyDate.getMonth() === currentMonth && storyDate.getFullYear() === currentYear;\n    });\n    const remainingStories = userProfile?.isPremium ? '∞' : Math.max(0, FREE_STORY_LIMIT - storiesThisMonth.length);\n    if (!userWallet) {\n      return <div className=\"w-full h-[calc(100vh-13rem)] bg-white rounded-lg flex items-center justify-center shadow-xl\">\n          <div className=\"text-center p-8\">\n            <UserCircle size={64} className=\"mx-auto mb-4 text-gray-300\" />\n            <h3 className=\"text-xl font-semibold text-gray-700 mb-4\">Connect Your Wallet</h3>\n            <p className=\"text-gray-600 mb-6\">Connect your wallet to view your profile and stories.</p>\n            <UserButton className=\"mx-auto\" />\n          </div>\n        </div>;\n    }\n    return <div className=\"w-full h-[calc(100vh-13rem)] bg-white rounded-lg overflow-y-auto shadow-xl\">\n        <div className=\"p-5 pt-8\"> {}\n          <button onClick={() => setView('map')} className=\"absolute top-4 left-4 z-20 p-2 text-gray-600 hover:text-gray-900\">\n            <ArrowLeft size={20} />\n          </button>\n          {userProfile ? <div className=\"mt-6 flex flex-col items-center\">\n              <div className=\"w-24 h-24 rounded-full overflow-hidden bg-gray-200 relative\">\n                <img src={userProfile.avatar_url || `https://api.dicebear.com/7.x/personas/svg?seed=${userWallet}`} alt=\"Profile\" className=\"w-full h-full object-cover\" />\n                {userProfile.isPremium && <div className=\"absolute -top-1 -right-1 bg-yellow-500 text-white p-1 rounded-full\">\n                    <Crown size={16} />\n                  </div>}\n              </div>\n              <h2 className=\"mt-4 text-xl font-bold text-gray-800\">\n                {userProfile.username || `Explorer_${userWallet.substring(0, 4)}`}\n              </h2>\n              <div className=\"mt-1 text-sm text-gray-500 flex items-center gap-1\">\n                <span>{userWallet.substring(0, 6)}...{userWallet.substring(userWallet.length - 4)}</span>\n              </div>\n              \n              {userProfile.isPremium ? <div className=\"mt-2 flex items-center gap-1 bg-gradient-to-r from-yellow-400 to-yellow-600 text-white text-xs px-3 py-1 rounded-full\">\n                  <Crown size={12} />\n                  <span>Premium Member</span>\n                </div> : <button onClick={() => setIsPremiumModalOpen(true)} className=\"mt-3 flex items-center gap-1 bg-gradient-to-r from-purple-500 to-pink-500 text-white text-sm px-4 py-2 rounded-lg hover:shadow-lg\">\n                  <Crown size={16} />\n                  <span>Upgrade to Premium</span>\n                </button>}\n              \n              {userProfile.totalTips > 0 && <div className=\"mt-3 flex items-center gap-1 text-yellow-600\">\n                  <Coins size={16} />\n                  <span>{userProfile.totalTips.toFixed(2)} SOL received in tips</span>\n                </div>}\n              \n              <div className=\"mt-6 w-full border-t border-gray-100 pt-4\">\n                <div className=\"flex justify-between items-center mb-4\">\n                  <h3 className=\"text-lg font-semibold text-gray-700\">Your Stories</h3>\n                  <div className=\"text-sm bg-purple-100 text-purple-700 px-2 py-1 rounded-lg flex items-center\">\n                    <span>{remainingStories}</span>\n                    <span className=\"ml-1\">stories remaining</span>\n                  </div>\n                </div>\n                \n                {userStories.length === 0 ? <div className=\"text-center py-8 text-gray-500\">\n                    <Book size={36} className=\"mx-auto mb-2 text-gray-300\" />\n                    <p>You haven't created any stories yet</p>\n                    <button onClick={() => setView('create')} className=\"mt-4 px-4 py-2 bg-purple-500 text-white rounded-lg hover:bg-purple-600\">\n                      Create Your First Story\n                    </button>\n                  </div> : <div className=\"space-y-4\">\n                    {userStories.map(story => <div key={story.id} className={`${story.isPremium ? 'bg-purple-50 border border-purple-100' : 'bg-gray-50'} rounded-lg p-4 cursor-pointer hover:bg-gray-100`} onClick={() => {\n                setCurrentStory(story);\n                setView('story');\n              }}>\n                        <div className=\"flex justify-between\">\n                          <h4 className=\"font-medium text-gray-800\">{story.title}</h4>\n                          {story.isPremium && <Crown size={16} className=\"text-yellow-500\" />}\n                        </div>\n                        <p className=\"mt-1 text-sm text-gray-600 line-clamp-2\">{story.content}</p>\n                        <div className=\"mt-2 flex items-center justify-between text-xs\">\n                          <div className=\"flex items-center gap-3\">\n                            <div className=\"flex items-center gap-1 text-gray-500\">\n                              <MapPin size={12} />\n                              <span>\n                                {calculateDistance(currentLocation.lat, currentLocation.lng, story.lat, story.lng).toFixed(1)} km\n                              </span>\n                            </div>\n                            <div className=\"flex items-center gap-1 text-pink-500\">\n                              <Heart size={12} />\n                              <span>{story.likes || 0}</span>\n                            </div>\n                            <div className=\"flex items-center gap-1 text-blue-500\">\n                              <Eye size={12} />\n                              <span>{story.views || 0}</span>\n                            </div>\n                          </div>\n                          {story.tipAmount > 0 && <div className=\"flex items-center gap-1 text-yellow-500\">\n                              <Coins size={12} />\n                              <span>{story.tipAmount.toFixed(2)}</span>\n                            </div>}\n                        </div>\n                        {story.category && <div className=\"mt-2 text-xs text-purple-600\">\n                            #{story.category}\n                          </div>}\n                      </div>)}\n                  </div>}\n              </div>\n            </div> : <div className=\"flex items-center justify-center h-64\">\n              <div className=\"animate-spin h-8 w-8 border-4 border-purple-500 border-t-transparent rounded-full\"></div>\n            </div>}\n        </div>\n      </div>;\n  };\n  return <div className=\"min-h-screen bg-gradient-to-br from-indigo-50 to-purple-50 p-4 md:p-8 flex flex-col\">\n      <div className=\"max-w-3xl w-full mx-auto relative flex-1 flex flex-col\">\n        <AnimatePresence>\n          {magicalEffect && <motion.div initial={{\n          opacity: 0\n        }} animate={{\n          opacity: 1\n        }} exit={{\n          opacity: 0\n        }} className=\"fixed inset-0 z-50 flex items-center justify-center bg-black/50 backdrop-blur-sm\">\n              <motion.div initial={{\n            scale: 0.8,\n            opacity: 0\n          }} animate={{\n            scale: 1,\n            opacity: 1,\n            rotate: [0, 5, -5, 0]\n          }} transition={{\n            duration: 0.5\n          }} className=\"bg-white rounded-2xl p-8 shadow-2xl text-center max-w-sm\">\n                <Sparkles size={48} className=\"mx-auto mb-4 text-purple-500\" />\n                <h2 className=\"text-2xl font-bold text-gray-800 mb-2\">Story Planted!</h2>\n                <p className=\"text-gray-600\">Your tale has been woven into the fabric of this location. Others who wander here will discover your story!</p>\n              </motion.div>\n            </motion.div>}\n        </AnimatePresence>\n        \n        {}\n        <AnimatePresence>\n          {isPremiumModalOpen && <motion.div initial={{\n          opacity: 0\n        }} animate={{\n          opacity: 1\n        }} exit={{\n          opacity: 0\n        }} className=\"fixed inset-0 z-50 flex items-center justify-center bg-black/50 backdrop-blur-sm p-4\">\n              <motion.div initial={{\n            scale: 0.9,\n            y: 20\n          }} animate={{\n            scale: 1,\n            y: 0\n          }} exit={{\n            scale: 0.9,\n            y: 20\n          }} className=\"bg-white rounded-xl p-6 max-w-md w-full shadow-2xl\">\n                <div className=\"flex justify-center mb-4\">\n                  <div className=\"p-3 bg-yellow-100 rounded-full\">\n                    <Crown size={32} className=\"text-yellow-500\" />\n                  </div>\n                </div>\n                <h3 className=\"text-xl font-bold text-center text-gray-800 mb-2\">Upgrade to Premium</h3>\n                <p className=\"text-center text-gray-600 mb-6\">Unlock unlimited story creation and premium features.</p>\n                \n                <div className=\"bg-purple-50 rounded-lg p-4 mb-6\">\n                  <h4 className=\"font-semibold text-purple-800 mb-2\">Premium Benefits:</h4>\n                  <ul className=\"space-y-2\">\n                    <li className=\"flex items-start\">\n                      <ChevronUp size={16} className=\"text-purple-500 mt-0.5 mr-2 flex-shrink-0\" />\n                      <span className=\"text-purple-700\">Unlimited story creation (no monthly limits)</span>\n                    </li>\n                    <li className=\"flex items-start\">\n                      <ChevronUp size={16} className=\"text-purple-500 mt-0.5 mr-2 flex-shrink-0\" />\n                      <span className=\"text-purple-700\">Priority story placement on the map</span>\n                    </li>\n                    <li className=\"flex items-start\">\n                      <ChevronUp size={16} className=\"text-purple-500 mt-0.5 mr-2 flex-shrink-0\" />\n                      <span className=\"text-purple-700\">Advanced story analytics (views, likes, tips)</span>\n                    </li>\n                    <li className=\"flex items-start\">\n                      <ChevronUp size={16} className=\"text-purple-500 mt-0.5 mr-2 flex-shrink-0\" />\n                      <span className=\"text-purple-700\">Custom story categories and tags</span>\n                    </li>\n                  </ul>\n                </div>\n                \n                <div className=\"text-center mb-6\">\n                  <div className=\"text-3xl font-bold text-gray-800\">0.1 SOL</div>\n                  <div className=\"text-gray-500\">per month</div>\n                </div>\n                \n                <div className=\"flex gap-3\">\n                  <button onClick={() => setIsPremiumModalOpen(false)} className=\"flex-1 py-2 px-4 border border-gray-300 rounded-lg text-gray-700 hover:bg-gray-50\">\n                    Not Now\n                  </button>\n                  <button onClick={handleUpgradeToPremium} disabled={isPremiumProcessing} className=\"flex-1 py-2 px-4 bg-gradient-to-r from-purple-500 to-pink-500 text-white rounded-lg hover:shadow-lg flex items-center justify-center\">\n                    {isPremiumProcessing ? <div className=\"h-5 w-5 border-2 border-white border-t-transparent rounded-full animate-spin\"></div> : <>\n                        <Crown size={16} className=\"mr-2\" />\n                        Upgrade Now\n                      </>}\n                  </button>\n                </div>\n              </motion.div>\n            </motion.div>}\n        </AnimatePresence>\n        <header className=\"sticky top-0 left-0 right-0 z-30 mb-4\">\n          <div className=\"bg-white/90 backdrop-blur-sm rounded-lg p-3 shadow-lg\">\n            <div className=\"flex justify-between items-center\">\n              <div className=\"text-lg font-bold text-purple-900\">\n                <span className=\"text-transparent bg-clip-text bg-gradient-to-r from-purple-600 to-pink-600\">Lorespot</span>\n              </div>\n              {view === 'map' && <div className=\"flex items-center mx-2\">\n                  <select value={discoveryRadius} onChange={e => setDiscoveryRadius(Number(e.target.value))} className=\"bg-white/80 backdrop-blur-sm text-sm border border-purple-200 rounded-lg px-2 py-1 focus:outline-none focus:ring-2 focus:ring-purple-300\">\n                    <option value={0.5}>500m radius</option>\n                    <option value={1}>1km radius</option>\n                    <option value={5}>5km radius</option>\n                    <option value={10}>10km radius</option>\n                  </select>\n                </div>}\n              <UserButton className=\"ml-auto\" />\n            </div>\n          </div>\n        </header>\n        <main className=\"flex-1 flex flex-col mb-16\">\n          {view === 'map' && renderMap()}\n          {view === 'create' && renderCreateStory()}\n          {view === 'story' && renderStoryDetail()}\n          {view === 'profile' && renderProfile()}\n          {view === 'map' && <div className=\"fixed bottom-24 right-6 flex flex-col gap-2 z-30\">\n              <motion.button whileTap={{\n            scale: 0.95\n          }} onClick={() => setView('create')} className=\"p-4 bg-gradient-to-br from-purple-500 to-pink-500 text-white rounded-full shadow-lg hover:shadow-xl\">\n                <PlusCircle size={24} />\n              </motion.button>\n              <motion.button whileTap={{\n            scale: 0.95\n          }} onClick={centerMapOnUser} className=\"p-4 bg-blue-500 text-white rounded-full shadow-lg hover:shadow-xl\">\n                <Compass size={24} />\n              </motion.button>\n              <motion.button whileTap={{\n            scale: 0.95\n          }} onClick={handleZoomIn} className=\"p-4 bg-gray-700 text-white rounded-full shadow-lg hover:shadow-xl\">\n                <ZoomIn size={24} />\n              </motion.button>\n              <motion.button whileTap={{\n            scale: 0.95\n          }} onClick={handleZoomOut} className=\"p-4 bg-gray-700 text-white rounded-full shadow-lg hover:shadow-xl\">\n                <ZoomOut size={24} />\n              </motion.button>\n            </div>}\n          </main>\n        <nav className=\"fixed bottom-4 left-4 right-4 max-w-3xl mx-auto bg-white rounded-lg shadow-lg p-1 z-30\">\n          <div className=\"flex justify-around\">\n            <button onClick={() => setView('map')} className={`flex-1 py-3 flex flex-col items-center ${view === 'map' ? 'text-purple-600' : 'text-gray-500'}`}>\n              <MapPin size={20} />\n              <span className=\"text-xs mt-1\">Explore</span>\n            </button>\n            <button onClick={() => setView('create')} className={`flex-1 py-3 flex flex-col items-center ${view === 'create' ? 'text-purple-600' : 'text-gray-500'}`}>\n              <PlusCircle size={20} />\n              <span className=\"text-xs mt-1\">Create</span>\n            </button>\n            <button onClick={() => setView('profile')} className={`flex-1 py-3 flex flex-col items-center ${view === 'profile' ? 'text-purple-600' : 'text-gray-500'}`}>\n              <UserCircle size={20} />\n              <span className=\"text-xs mt-1\">Profile</span>\n            </button>\n          </div>\n        </nav>\n      </div>\n    </div>;\n}","packageJson","{\"dependencies\":{\"react\":\"18.2.0\",\"@devfunlabs/web-sdk\":\"0.5.5\",\"lucide-react\":\"0.441.0\",\"framer-motion\":\"10.16.4\",\"react-router-dom\":\"6.18.0\",\"@solana/web3.js\":\"1.77.3\",\"zod\":\"3.22.4\"}}","appFunctions",[],"token","upstreamApp","isLordOfDev","analytics",[81,85,87,89,91,93,95,97,99,101,103,105,107,109],{"_82":83,"_84":57},"day","2025-07-12","runCount",{"_82":86,"_84":57},"2025-07-13",{"_82":88,"_84":57},"2025-07-14",{"_82":90,"_84":57},"2025-07-15",{"_82":92,"_84":57},"2025-07-16",{"_82":94,"_84":57},"2025-07-17",{"_82":96,"_84":57},"2025-07-18",{"_82":98,"_84":57},"2025-07-19",{"_82":100,"_84":57},"2025-07-20",{"_82":102,"_84":57},"2025-07-21",{"_82":104,"_84":57},"2025-07-22",{"_82":106,"_84":57},"2025-07-23",{"_82":108,"_84":57},"2025-07-24",{"_82":110,"_84":57},"2025-07-25","snapshot","ogImage","https://cdn.dev.fun/og/image/4ef08f78d65f632dec88/c3cedcd1.webp","isDevbase","actionData","errors"]
</article></body></html>

say something