[{"_1":2,"_131":-5,"_132":-5},"loaderData",{"_3":4,"_10":11},"root",{"_5":-5,"_6":7,"_8":9},"user","appId","cm7twdhs6009l11ml868xhxld","wsEndpoint","https://dev.fun","routes/app.$appId",{"_12":13},"appDetail",{"_14":15,"_16":17,"_18":19,"_20":21,"_22":23,"_24":25,"_26":27,"_28":27,"_29":30,"_33":34,"_35":36,"_37":38,"_39":40,"_41":42,"_43":44,"_45":46,"_5":47,"_58":59,"_60":61,"_62":44,"_63":64,"_65":61,"_66":44,"_67":44,"_68":61,"_69":61,"_70":61,"_71":17,"_72":17,"_73":-5,"_74":75,"_76":77,"_78":79,"_80":-5,"_81":-5,"_82":17,"_83":17,"_84":85,"_122":34,"_123":124,"_125":27,"_126":127},"id","414e601767c07486a273","isMyApp",false,"projectId","cmfpp9yka000v931pca732dc4","name","pumphype","description","A devastatingly convincing fake prototype of PumpReels - the ultimate desktop platform for turning Pump.fun streams into viral reels! Complete with glowing neon auth screens, mock video feeds, and hype-inducing docs that make people believe this crypto-reels revolution is actually happening. Pure branding magic with zero backend required.","brief","Fake but convincing PumpReels prototype with neon vibes and crypto-reels hype!","isLive",true,"isPublic","tags",[31,32],"🔥","👑","cover","https://cdn.dev.fun/snapshot/414e601767c07486a273/105038_3623eb18.webp","cdnUrl","https://cdn.dev.fun/app/414e601767c07486a273/105038","createdAt",["D",1758217458916],"updatedAt",["D",1758220480551],"lastCommitId",["B","105038"],"tier",1,"credits",58,{"_14":48,"_49":50,"_51":-5,"_52":50,"_53":54,"_55":-5,"_56":57},"c9b7071e-b46e-48d1-935d-45d51f6f510f","uniqueId","62NL1oYEwSjKbUiYHwynk6GnMGyzieCsSynvwUxkkCCB","username","solanaWallet","displayName","62N...CCB","bio","avatar","/avatar.svg","commitCount",5,"forkCount",0,"likeCount","runsCount",91,"downvoteCount","upvoteCount","upvoteRate","commentCount","reportCount","visitorCount","isArchived","isRenamed","contractAddress","code","import { useState, useEffect, createContext, useContext } from 'react';\nimport { BrowserRouter as Router, Routes, Route, Navigate, Link, useNavigate, useLocation } from 'react-router-dom';\nimport { Search, Play, Heart, Bell, Twitter, Chrome, Wallet, MessageCircle, Bookmark, Share, Settings, User, LogOut, ChevronDown, X, Edit, Camera, Plus, CheckCircle2 } from 'lucide-react';\nimport { useDevapp, DevappProvider, openLink } from '@devfunlabs/web-sdk';\nconst AuthContext = createContext(null);\nconst useAuth = () => useContext(AuthContext);\nconst AuthProvider = ({\n children\n}) => {\n const [user, setUser] = useState(null);\n const [loading, setLoading] = useState(true);\n const {\n devbaseClient\n } = useDevapp();\n useEffect(() => {\n const checkUser = async () => {\n const userId = localStorage.getItem('pumpReelsUserId');\n if (userId) {\n try {\n const userData = await devbaseClient.getEntity('users', userId);\n if (userData) {\n setUser(userData);\n } else {\n localStorage.removeItem('pumpReelsUserId');\n }\n } catch (error) {\n console.error(\"Failed to fetch user\", error);\n localStorage.removeItem('pumpReelsUserId');\n }\n }\n setLoading(false);\n };\n checkUser();\n }, [devbaseClient]);\n const login = async email => {\n try {\n const users = await devbaseClient.listEntities('users', {\n email\n });\n if (users.length > 0) {\n setUser(users[0]);\n localStorage.setItem('pumpReelsUserId', users[0].id);\n return users[0];\n }\n return null;\n } catch (error) {\n console.error(\"Login failed\", error);\n return null;\n }\n };\n const signup = async email => {\n try {\n const handle = email.split('@')[0].toLowerCase().replace(/[^a-z0-9]/g, '');\n const newUser = await devbaseClient.createEntity('users', {\n email,\n handle: `${handle}${Date.now()}`,\n displayName: handle,\n bio: '',\n avatar: '',\n followerCount: 0,\n followingCount: 0,\n postCount: 0,\n providers: 'EMAIL'\n });\n setUser(newUser);\n localStorage.setItem('pumpReelsUserId', newUser.id);\n return newUser;\n } catch (error) {\n console.error(\"Signup failed\", error);\n return null;\n }\n };\n const loginWithProvider = async (email, provider, providerId) => {\n try {\n let users = await devbaseClient.listEntities('users', {\n email\n });\n let user;\n if (users.length > 0) {\n user = users[0];\n const providers = user.providers ? user.providers.split(',') : [];\n if (!providers.includes(provider)) {\n providers.push(provider);\n await devbaseClient.updateEntity('users', user.id, {\n providers: providers.join(',')\n });\n }\n } else {\n const handle = email.split('@')[0].toLowerCase().replace(/[^a-z0-9]/g, '');\n user = await devbaseClient.createEntity('users', {\n email,\n handle: `${handle}${Date.now()}`,\n displayName: email.split('@')[0],\n bio: '',\n avatar: '',\n followerCount: 0,\n followingCount: 0,\n postCount: 0,\n providers: provider\n });\n }\n setUser(user);\n localStorage.setItem('pumpReelsUserId', user.id);\n return user;\n } catch (error) {\n console.error(\"Provider login failed\", error);\n return null;\n }\n };\n const logout = () => {\n setUser(null);\n localStorage.removeItem('pumpReelsUserId');\n };\n const value = {\n user,\n login,\n signup,\n loginWithProvider,\n logout,\n loading\n };\n return {children};\n};\nconst AuthScreen = () => {\n const [activeTab, setActiveTab] = useState('login');\n const [email, setEmail] = useState('');\n const [password, setPassword] = useState('');\n const [confirmPassword, setConfirmPassword] = useState('');\n const [error, setError] = useState('');\n const [loading, setLoading] = useState(false);\n const navigate = useNavigate();\n const {\n login,\n signup,\n loginWithProvider\n } = useAuth();\n const {\n userWallet\n } = useDevapp();\n const handleSubmit = async e => {\n e.preventDefault();\n setError('');\n setLoading(true);\n if (!email || !password) {\n setError('Please fill in all fields');\n setLoading(false);\n return;\n }\n try {\n if (activeTab === 'signup') {\n if (password !== confirmPassword) {\n setError('Passwords do not match');\n setLoading(false);\n return;\n }\n const newUser = await signup(email);\n if (newUser) {\n navigate('/onboarding/handle');\n } else {\n setError('Account creation failed. This email might already be in use.');\n }\n } else {\n const existingUser = await login(email);\n if (existingUser) {\n navigate('/home');\n } else {\n setError('Invalid credentials. Please check your email and password.');\n }\n }\n } catch (err) {\n setError(activeTab === 'signup' ? 'Account creation failed' : 'Invalid credentials');\n } finally {\n setLoading(false);\n }\n };\n const handleGoogleLogin = () => {\n setLoading(true);\n const state = Math.random().toString(36).substring(7);\n localStorage.setItem('googleOAuthState', state);\n setTimeout(async () => {\n const mockGoogleUser = {\n email: 'user@gmail.com',\n name: 'Google User'\n };\n const user = await loginWithProvider(mockGoogleUser.email, 'GOOGLE', 'google_123');\n if (user) {\n if (user.handle.includes(Date.now().toString().slice(-5))) {\n navigate('/onboarding/handle');\n } else {\n navigate('/home');\n }\n } else {\n setError('Google login failed');\n }\n setLoading(false);\n }, 1500);\n };\n const handleWalletConnect = async () => {\n try {\n setLoading(true);\n if (userWallet) {\n const mockEmail = `${userWallet.slice(0, 8)}@wallet.local`;\n const user = await loginWithProvider(mockEmail, 'WALLET', userWallet);\n if (user) {\n if (user.handle.includes(Date.now().toString().slice(-5))) {\n navigate('/onboarding/handle');\n } else {\n navigate('/home');\n }\n }\n } else {\n alert('Please use the Connect Wallet button in the top navigation to connect your wallet first.');\n }\n } catch (error) {\n setError('Wallet connection failed');\n } finally {\n setLoading(false);\n }\n };\n const handleSocialLogin = provider => {\n if (provider === 'X') {\n if (userWallet) {\n const twitterLoginUrl = `https://oauth.dev.fun/twitter/login/414e601767c07486a273/${userWallet}`;\n openLink(twitterLoginUrl);\n } else {\n alert(\"Please connect your wallet first to link your X account.\");\n }\n } else if (provider === 'Google') {\n handleGoogleLogin();\n } else if (provider === 'Wallet') {\n handleWalletConnect();\n }\n };\n return

PumpReels

\n Claim your handle. Build your audience. Be ready when reels go live.\n

\n \n Reserve your creator profile\n
\n \n Link X & wallet for verification\n
\n \n Early access to trading overlays\n

\n\n

\n \n \n

\n\n

\n setEmail(e.target.value)} className=\"w-full px-4 py-3 bg-[#12161B] border border-[#1C2228] rounded-lg text-[#E7EBF0] placeholder-[#9AA3AE] focus:outline-none focus:border-[#19E2A4] focus:ring-4 focus:ring-[#19E2A4]/20 transition-all duration-200\" />\n

\n setPassword(e.target.value)} className=\"w-full px-4 py-3 bg-[#12161B] border border-[#1C2228] rounded-lg text-[#E7EBF0] placeholder-[#9AA3AE] focus:outline-none focus:border-[#19E2A4] focus:ring-4 focus:ring-[#19E2A4]/20 transition-all duration-200\" />\n

\n {activeTab === 'signup' &&

\n setConfirmPassword(e.target.value)} className=\"w-full px-4 py-3 bg-[#12161B] border border-[#1C2228] rounded-lg text-[#E7EBF0] placeholder-[#9AA3AE] focus:outline-none focus:border-[#19E2A4] focus:ring-4 focus:ring-[#19E2A4]/20 transition-all duration-200\" />\n

}\n {error &&

{error}

}\n \n

\n\n

\n or\n

\n \n \n \n

\n\n

\n By continuing you agree to our Terms & Privacy.\n

;\n};\nconst OnboardingHandle = () => {\n const {\n user\n } = useAuth();\n const {\n devbaseClient\n } = useDevapp();\n const navigate = useNavigate();\n const [handle, setHandle] = useState('');\n const [error, setError] = useState('');\n const [loading, setLoading] = useState(false);\n useEffect(() => {\n if (user) {\n setHandle(user.handle.replace(/\\d+$/, ''));\n }\n }, [user]);\n const handleClaim = async e => {\n e.preventDefault();\n if (!handle.match(/^[a-z0-9_]{3,15}$/)) {\n setError('Handle must be 3-15 characters, lowercase letters, numbers, and underscores only.');\n return;\n }\n setLoading(true);\n setError('');\n try {\n const existing = await devbaseClient.listEntities('users', {\n handle\n });\n if (existing.length > 0) {\n setError('This handle is already taken.');\n setLoading(false);\n return;\n }\n await devbaseClient.updateEntity('users', user.id, {\n handle\n });\n navigate('/onboarding/profile');\n } catch (err) {\n setError('Failed to claim handle. Please try again.');\n } finally {\n setLoading(false);\n }\n };\n return

Claim Your Handle

Your unique handle for PumpReels.

\n \n

;\n};\nconst OnboardingProfile = () => {\n const {\n user\n } = useAuth();\n const {\n devbaseClient\n } = useDevapp();\n const navigate = useNavigate();\n const [form, setForm] = useState({\n displayName: '',\n bio: ''\n });\n const [loading, setLoading] = useState(false);\n useEffect(() => {\n if (user) {\n setForm({\n displayName: user.displayName,\n bio: user.bio\n });\n }\n }, [user]);\n const handleSave = async e => {\n e.preventDefault();\n setLoading(true);\n try {\n await devbaseClient.updateEntity('users', user.id, form);\n navigate('/home');\n } catch (err) {\n console.error(\"Failed to update profile\", err);\n } finally {\n setLoading(false);\n }\n };\n const handleSkip = () => {\n navigate('/home');\n };\n return

Set Up Your Profile

Add a display name and bio to get started.

\n \n

\n setForm({\n ...form,\n displayName: e.target.value\n })} className=\"w-full px-4 py-3 bg-[#12161B] border border-[#1C2228] rounded-lg text-[#E7EBF0] placeholder-[#9AA3AE] focus:outline-none focus:border-[#19E2A4] focus:ring-4 focus:ring-[#19E2A4]/20 transition-all\" />\n

setForm({\n          ...form,\n          bio: e.target.value\n        })} className=\"w-full px-4 py-3 bg-[#12161B] border border-[#1C2228] rounded-lg text-[#E7EBF0] placeholder-[#9AA3AE] focus:outline-none focus:border-[#19E2A4] focus:ring-4 focus:ring-[#19E2A4]/20 transition-all resize-none\" rows={3} />\n                <div className=\"flex gap-4\">\n                    <button type=\"button\" onClick={handleSkip} className=\"flex-1 py-3 border border-[#1C2228] text-[#9AA3AE] font-semibold rounded-lg hover:border-[#9AA3AE] transition-all\">\n                        Skip\n                    </button>\n                    <button type=\"submit\" disabled={loading} className=\"flex-1 py-3 bg-[#19E2A4] text-[#0B0D10] font-semibold rounded-lg hover:bg-[#16C690] transition-all disabled:opacity-50\">\n                        {loading ? 'Saving...' : 'Save & Continue'}\n                    </button>\n                </div>\n            </form>\n        </div>\n    </div>;\n};\nconst Navigation = () => {\n  const location = useLocation();\n  const navigate = useNavigate();\n  const {\n    logout\n  } = useAuth();\n  const [searchQuery, setSearchQuery] = useState('');\n  const [showNotifications, setShowNotifications] = useState(false);\n  const [showProfileMenu, setShowProfileMenu] = useState(false);\n  const [notifications, setNotifications] = useState([]);\n  const {\n    devbaseClient\n  } = useDevapp();\n  const handleSearch = e => {\n    e.preventDefault();\n    if (searchQuery.trim()) {\n      navigate(`/search?q=${encodeURIComponent(searchQuery)}`);\n    }\n  };\n  const handleLogout = () => {\n    logout();\n    navigate('/');\n  };\n  useEffect(() => {\n    const loadNotifications = async () => {\n      try {\n        const notifs = await devbaseClient.listEntities('notifications', {\n          read: false\n        });\n        setNotifications(notifs.slice(0, 5));\n      } catch (err) {\n        console.error('Failed to load notifications');\n      }\n    };\n    loadNotifications();\n  }, [devbaseClient]);\n  return <nav className=\"bg-[#0F1216]/80 backdrop-blur-lg border-b border-[#1C2228] px-6 py-3 sticky top-0 z-50\">\n      <div className=\"max-w-7xl mx-auto flex items-center justify-between\">\n        <Link to=\"/home\" className=\"text-xl font-semibold text-[#E7EBF0] transition-all flex items-center gap-2\">\n          <svg width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n            <path d=\"M12 2L2 7V17L12 22L22 17V7L12 2Z\" stroke=\"#19E2A4\" strokeWidth=\"2\" strokeLinecap=\"round\" strokeLinejoin=\"round\" />\n            <path d=\"M2 7L12 12L22 7\" stroke=\"#19E2A4\" strokeWidth=\"2\" strokeLinecap=\"round\" strokeLinejoin=\"round\" />\n            <path d=\"M12 12V22\" stroke=\"#19E2A4\" strokeWidth=\"2\" strokeLinecap=\"round\" strokeLinejoin=\"round\" />\n          </svg>\n          PumpReels\n        </Link>\n\n        <form onSubmit={handleSearch} className=\"flex-1 max-w-md mx-8\">\n          <div className=\"relative\">\n            <Search className=\"absolute left-4 top-1/2 transform -translate-y-1/2 text-[#9AA3AE]\" size={18} />\n            <input type=\"text\" placeholder=\"Search creators, tags, tokens...\" value={searchQuery} onChange={e => setSearchQuery(e.target.value)} className=\"w-full pl-11 pr-4 py-2 bg-[#12161B] border border-[#1C2228] rounded-lg text-[#E7EBF0] placeholder-[#9AA3AE] focus:outline-none focus:border-[#19E2A4] focus:ring-4 focus:ring-[#19E2A4]/20 transition-all duration-200\" />\n          </div>\n        </form>\n\n        <div className=\"flex items-center gap-2\">\n          <Link to=\"/home\" className={`px-3 py-1.5 rounded-md font-medium text-sm transition-all ${location.pathname === '/home' ? 'text-[#19E2A4] bg-[#19E2A4]/10' : 'text-[#9AA3AE] hover:text-[#E7EBF0]'}`}>\n            Home\n          </Link>\n          <Link to=\"/creators\" className={`px-3 py-1.5 rounded-md font-medium text-sm transition-all ${location.pathname === '/creators' ? 'text-[#19E2A4] bg-[#19E2A4]/10' : 'text-[#9AA3AE] hover:text-[#E7EBF0]'}`}>\n            Creators\n          </Link>\n          <Link to=\"/docs\" className={`px-3 py-1.5 rounded-md font-medium text-sm transition-all ${location.pathname === '/docs' ? 'text-[#19E2A4] bg-[#19E2A4]/10' : 'text-[#9AA3AE] hover:text-[#E7EBF0]'}`}>\n            Docs\n          </Link>\n\n          <div className=\"relative\">\n            <button onClick={() => setShowNotifications(!showNotifications)} className=\"p-2 text-[#9AA3AE] hover:text-[#E7EBF0] transition-all relative\">\n              <Bell size={18} />\n              {notifications.length > 0 && <div className=\"absolute top-0 right-0 w-4 h-4 bg-[#19E2A4] text-[#0B0D10] text-xs rounded-full flex items-center justify-center font-bold\">\n                  {notifications.length}\n                </div>}\n            </button>\n            {showNotifications && <div className=\"absolute right-0 top-10 w-80 bg-[#12161B] border border-[#1C2228] rounded-xl p-4 shadow-2xl\">\n                <h3 className=\"text-[#E7EBF0] font-semibold mb-3\">Notifications</h3>\n                {notifications.length === 0 ? <p className=\"text-[#9AA3AE] text-sm\">No new notifications</p> : <div className=\"space-y-2\">\n                    {notifications.map(notif => <div key={notif.id} className=\"p-2 bg-[#0F1216] rounded-lg\">\n                        <p className=\"text-[#E7EBF0] text-sm\">{notif.content}</p>\n                      </div>)}\n                  </div>}\n              </div>}\n          </div>\n\n          <div className=\"relative\">\n            <button onClick={() => setShowProfileMenu(!showProfileMenu)} className=\"flex items-center gap-2 p-2 text-[#9AA3AE] hover:text-[#E7EBF0] transition-all\">\n              <User size={18} />\n              <ChevronDown size={14} />\n            </button>\n            {showProfileMenu && <div className=\"absolute right-0 top-10 w-48 bg-[#12161B] border border-[#1C2228] rounded-xl p-2 shadow-2xl\">\n                <Link to=\"/profile\" className=\"flex items-center gap-2 px-3 py-2 text-sm text-[#9AA3AE] hover:text-[#E7EBF0] hover:bg-[#19E2A4]/10 rounded-md transition-all\">\n                  <User size={16} />\n                  Profile\n                </Link>\n                <button className=\"flex items-center gap-2 px-3 py-2 text-sm text-[#9AA3AE] hover:text-[#E7EBF0] hover:bg-[#19E2A4]/10 rounded-md transition-all w-full text-left\">\n                  <Settings size={16} />\n                  Settings\n                </button>\n                <hr className=\"my-1 border-[#1C2228]\" />\n                <button onClick={handleLogout} className=\"flex items-center gap-2 px-3 py-2 text-sm text-[#9AA3AE] hover:text-[#E05757] hover:bg-[#E05757]/10 rounded-md transition-all w-full text-left\">\n                  <LogOut size={16} />\n                  Sign out\n                </button>\n              </div>}\n          </div>\n        </div>\n      </div>\n    </nav>;\n};\nconst ReelCard = ({\n  id,\n  title,\n  creator,\n  ticker,\n  likes,\n  comments,\n  saves,\n  isNew,\n  liked,\n  saved,\n  onLike,\n  onSave,\n  onComment\n}) => {\n  const [showComments, setShowComments] = useState(false);\n  const [localLiked, setLocalLiked] = useState(liked);\n  const [localSaved, setLocalSaved] = useState(saved);\n  const [localLikes, setLocalLikes] = useState(likes);\n  const handleClick = () => {\n    setShowComments(true);\n  };\n  const handleLike = async e => {\n    e.stopPropagation();\n    setLocalLiked(!localLiked);\n    setLocalLikes(localLiked ? localLikes - 1 : localLikes + 1);\n    if (onLike) await onLike(id, !localLiked);\n  };\n  const handleSave = async e => {\n    e.stopPropagation();\n    setLocalSaved(!localSaved);\n    if (onSave) await onSave(id, !localSaved);\n  };\n  const handleTrade = () => {\n    alert('Trading feature coming soon!');\n  };\n  return <div className=\"bg-[#0F1216] border border-[#1C2228] rounded-2xl overflow-hidden hover:border-[#19E2A4]/50 hover:translate-y-[-2px] transition-all duration-200 cursor-pointer group\">\n      <div onClick={handleClick} className=\"aspect-[9/16] bg-black relative flex items-center justify-center border-b border-[#1C2228] group-hover:border-[#19E2A4]/50 transition-colors duration-200\">\n        <div className=\"absolute inset-0 bg-gradient-to-t from-black/60 via-transparent to-black/10\"></div>\n        <div className=\"text-center z-10 opacity-0 group-hover:opacity-100 transition-opacity duration-200\">\n          <Play className=\"mx-auto mb-2 text-[#19E2A4]\" size={48} />\n        </div>\n        <div className=\"absolute top-4 left-4 flex items-center gap-2\">\n          <div className=\"w-8 h-8 bg-gradient-to-br from-[#19E2A4] to-[#16C690] rounded-full\"></div>\n          <span className=\"text-[#E7EBF0] font-medium text-sm\">@{creator}</span>\n        </div>\n        <div className=\"absolute top-4 right-4 bg-[#12161B]/80 backdrop-blur-sm border border-[#1C2228] text-[#19E2A4] px-3 py-1 rounded-full text-xs font-mono font-medium\">\n          ${ticker}\n        </div>\n        {isNew && <div className=\"absolute bottom-4 left-4 bg-[#19E2A4] text-[#0B0D10] px-2 py-0.5 rounded-full text-xs font-bold\">\n            NEW\n          </div>}\n        <div className=\"absolute right-4 bottom-4 flex flex-col gap-4\">\n          <button onClick={handleLike} className={`p-2.5 rounded-full ${localLiked ? 'bg-[#19E2A4] text-[#0B0D10]' : 'bg-black/50 text-[#E7EBF0]'} backdrop-blur-sm transition-all hover:scale-110`}>\n            <Heart size={18} fill={localLiked ? 'currentColor' : 'none'} />\n          </button>\n          <button onClick={onComment} className=\"p-2.5 rounded-full bg-black/50 text-[#E7EBF0] backdrop-blur-sm transition-all hover:scale-110\">\n            <MessageCircle size={18} />\n          </button>\n          <button onClick={handleSave} className={`p-2.5 rounded-full ${localSaved ? 'bg-[#19E2A4] text-[#0B0D10]' : 'bg-black/50 text-[#E7EBF0]'} backdrop-blur-sm transition-all hover:scale-110`}>\n            <Bookmark size={18} fill={localSaved ? 'currentColor' : 'none'} />\n          </button>\n          <button className=\"p-2.5 rounded-full bg-black/50 text-[#E7EBF0] backdrop-blur-sm transition-all hover:scale-110\">\n            <Share size={18} />\n          </button>\n        </div>\n      </div>\n\n      <div className=\"p-4\">\n        <h3 className=\"text-[#E7EBF0] font-semibold mb-1 truncate\">{title}</h3>\n        <p className=\"text-[#9AA3AE] text-sm mb-3\">Clipped from live stream • 2 hours ago</p>\n        <div className=\"flex items-center justify-between\">\n          <div className=\"flex items-center gap-4 text-[#9AA3AE] text-sm font-mono tabular-nums\">\n            <div className=\"flex items-center gap-1.5\">\n              <Heart size={14} />\n              <span>{localLikes}</span>\n            </div>\n            <div className=\"flex items-center gap-1.5\">\n              <MessageCircle size={14} />\n              <span>{comments}</span>\n            </div>\n            <div className=\"flex items-center gap-1.5\">\n              <Bookmark size={14} />\n              <span>{saves}</span>\n            </div>\n          </div>\n          <button onClick={e => {\n          e.stopPropagation();\n          handleTrade();\n        }} className=\"px-4 py-1.5 bg-[#19E2A4]/10 border border-[#19E2A4]/30 rounded-full text-[#19E2A4] text-sm font-medium hover:bg-[#19E2A4]/20 transition-all disabled:opacity-50\" disabled>\n            Trade\n          </button>\n        </div>\n      </div>\n\n      {showComments && <CommentsModal reelId={id} onClose={() => setShowComments(false)} />}\n    </div>;\n};\nconst CommentsModal = ({\n  reelId,\n  onClose\n}) => {\n  const [comments, setComments] = useState([]);\n  const [newComment, setNewComment] = useState('');\n  const {\n    devbaseClient\n  } = useDevapp();\n  useEffect(() => {\n    const loadComments = async () => {\n      try {\n        const commentsData = await devbaseClient.listEntities('comments', {\n          reelId\n        });\n        setComments(commentsData);\n      } catch (err) {\n        console.error('Failed to load comments');\n      }\n    };\n    loadComments();\n  }, [reelId, devbaseClient]);\n  const handleSubmit = async e => {\n    e.preventDefault();\n    if (!newComment.trim()) return;\n    try {\n      await devbaseClient.createEntity('comments', {\n        reelId,\n        content: newComment,\n        parentId: null\n      });\n      setNewComment('');\n      const commentsData = await devbaseClient.listEntities('comments', {\n        reelId\n      });\n      setComments(commentsData);\n    } catch (err) {\n      console.error('Failed to post comment');\n    }\n  };\n  return <div className=\"fixed inset-0 bg-black/70 backdrop-blur-sm flex items-center justify-center z-50 p-4\">\n      <div className=\"bg-[#0F1216] border border-[#1C2228] rounded-2xl w-full max-w-md max-h-[80vh] overflow-hidden flex flex-col\">\n        <div className=\"flex items-center justify-between p-4 border-b border-[#1C2228]\">\n          <h3 className=\"text-[#E7EBF0] font-semibold\">Comments</h3>\n          <button onClick={onClose} className=\"text-[#9AA3AE] hover:text-[#E7EBF0] transition-all\">\n            <X size={20} />\n          </button>\n        </div>\n\n        <div className=\"p-4 flex-1 overflow-y-auto\">\n          {comments.length === 0 ? <p className=\"text-[#9AA3AE] text-center py-8\">No comments yet. Be the first!</p> : <div className=\"space-y-4\">\n              {comments.map(comment => <div key={comment.id} className=\"bg-[#12161B] rounded-lg p-3\">\n                  <div className=\"flex items-center gap-2 mb-2\">\n                    <div className=\"w-6 h-6 bg-gradient-to-br from-[#19E2A4] to-[#16C690] rounded-full\"></div>\n                    <span className=\"text-[#E7EBF0] font-medium text-sm\">@user{comment.id}</span>\n                    <span className=\"text-[#9AA3AE] text-xs\">2h</span>\n                  </div>\n                  <p className=\"text-[#E7EBF0]\">{comment.content}</p>\n                </div>)}\n            </div>}\n        </div>\n\n        <form onSubmit={handleSubmit} className=\"p-4 border-t border-[#1C2228] bg-[#0F1216]\">\n          <div className=\"flex gap-2\">\n            <input type=\"text\" placeholder=\"Add a comment...\" value={newComment} onChange={e => setNewComment(e.target.value)} className=\"flex-1 px-4 py-2 bg-[#12161B] border border-[#1C2228] rounded-full text-[#E7EBF0] placeholder-[#9AA3AE] focus:outline-none focus:border-[#19E2A4] transition-all\" />\n            <button type=\"submit\" className=\"px-6 py-2 bg-[#19E2A4] text-[#0B0D10] font-medium rounded-full hover:bg-[#16C690] transition-all\">\n              Post\n            </button>\n          </div>\n        </form>\n      </div>\n    </div>;\n};\nconst HomeFeed = () => {\n  const [reels, setReels] = useState([]);\n  const [loading, setLoading] = useState(true);\n  const {\n    devbaseClient\n  } = useDevapp();\n  useEffect(() => {\n    const loadReels = async () => {\n      try {\n        const reelsData = await devbaseClient.listEntities('reels');\n        setReels(reelsData);\n      } catch (err) {\n        setReels([{\n          id: 1,\n          title: 'BONK Moon Mission 🚀',\n          creator: 'cryptokang',\n          ticker: 'BONK',\n          likeCount: 2100,\n          commentCount: 45,\n          saveCount: 230,\n          isNew: true\n        }, {\n          id: 2,\n          title: 'WIF Whale Watch Alert',\n          creator: 'degentrader',\n          ticker: 'WIF',\n          likeCount: 1800,\n          commentCount: 32,\n          saveCount: 180,\n          isNew: false\n        }, {\n          id: 3,\n          title: 'PEPE Army Assemble!',\n          creator: 'memequeen',\n          ticker: 'PEPE',\n          likeCount: 3200,\n          commentCount: 78,\n          saveCount: 420,\n          isNew: true\n        }, {\n          id: 4,\n          title: 'SOL Breaking Resistance',\n          creator: 'chartmaster',\n          ticker: 'SOL',\n          likeCount: 4100,\n          commentCount: 92,\n          saveCount: 510,\n          isNew: false\n        }, {\n          id: 5,\n          title: 'DOGE vs SHIB Battle',\n          creator: 'memewars',\n          ticker: 'DOGE',\n          likeCount: 2900,\n          commentCount: 65,\n          saveCount: 340,\n          isNew: false\n        }, {\n          id: 6,\n          title: 'New Token Alert: PUMP',\n          creator: 'alphasigma',\n          ticker: 'PUMP',\n          likeCount: 1200,\n          commentCount: 28,\n          saveCount: 150,\n          isNew: true\n        }]);\n      } finally {\n        setLoading(false);\n      }\n    };\n    loadReels();\n  }, [devbaseClient]);\n  const handleLike = async (reelId, liked) => {\n    try {\n      if (liked) {\n        await devbaseClient.createEntity('interactions', {\n          reelId,\n          type: 'like'\n        });\n      } else {\n        const interactions = await devbaseClient.listEntities('interactions', {\n          reelId,\n          type: 'like'\n        });\n        if (interactions.length > 0) {\n          await devbaseClient.deleteEntity('interactions', interactions[0].id);\n        }\n      }\n    } catch (err) {\n      console.error('Failed to update like');\n    }\n  };\n  const handleSave = async (reelId, saved) => {\n    try {\n      if (saved) {\n        await devbaseClient.createEntity('interactions', {\n          reelId,\n          type: 'save'\n        });\n      } else {\n        const interactions = await devbaseClient.listEntities('interactions', {\n          reelId,\n          type: 'save'\n        });\n        if (interactions.length > 0) {\n          await devbaseClient.deleteEntity('interactions', interactions[0].id);\n        }\n      }\n    } catch (err) {\n      console.error('Failed to update save');\n    }\n  };\n  if (loading) {\n    return <div className=\"min-h-screen bg-[#0B0D10]\">\n        <Navigation />\n        <div className=\"max-w-7xl mx-auto px-6 py-8\">\n          <div className=\"grid grid-cols-1 md:grid-cols-2 gap-6\">\n            {[...Array(6)].map((_, i) => <div key={i} className=\"bg-[#0F1216] border border-[#1C2228] rounded-2xl overflow-hidden animate-pulse\">\n                <div className=\"aspect-[9/16] bg-[#12161B]\"></div>\n                <div className=\"p-4\">\n                  <div className=\"h-4 bg-[#12161B] rounded mb-2\"></div>\n                  <div className=\"h-3 bg-[#12161B] rounded w-1/2\"></div>\n                </div>\n              </div>)}\n          </div>\n        </div>\n      </div>;\n  }\n  return <div className=\"min-h-screen bg-[#0B0D10]\">\n      <Navigation />\n      <div className=\"max-w-7xl mx-auto px-6 py-8\">\n        <div className=\"mb-8\">\n          <h1 className=\"text-3xl font-bold text-[#E7EBF0] mb-2 tracking-[-0.01em]\">\n            Trending Reels\n          </h1>\n          <p className=\"text-[#9AA3AE] text-lg\">\n            Discover the hottest Pump.fun streams, transformed into bite-sized content.\n          </p>\n        </div>\n\n        <div className=\"grid grid-cols-1 md:grid-cols-2 gap-6\">\n          {reels.map(reel => <ReelCard key={reel.id} id={reel.id} title={reel.title} creator={reel.creator} ticker={reel.ticker} likes={reel.likeCount} comments={reel.commentCount} saves={reel.saveCount} isNew={reel.isNew} liked={false} saved={false} onLike={handleLike} onSave={handleSave} onComment={() => {}} />)}\n        </div>\n\n        <div className=\"text-center mt-12\">\n          <button className=\"px-6 py-3 bg-[#12161B] border border-[#1C2228] rounded-full text-[#9AA3AE] font-semibold hover:border-[#9AA3AE] hover:text-[#E7EBF0] hover:translate-y-[-2px] transition-all duration-200\">\n            Load More Reels\n          </button>\n        </div>\n      </div>\n    </div>;\n};\nconst CreatorIndex = () => {\n  const [creators, setCreators] = useState([]);\n  const [filter, setFilter] = useState('all');\n  const [searchQuery, setSearchQuery] = useState('');\n  const {\n    devbaseClient\n  } = useDevapp();\n  useEffect(() => {\n    const loadCreators = async () => {\n      try {\n        const users = await devbaseClient.listEntities('users');\n        setCreators(users.map(user => ({\n          ...user,\n          avgEngagement: Math.floor(Math.random() * 50) + 10,\n          postingCadence: ['Daily', 'Weekly', '2-3x/week'][Math.floor(Math.random() * 3)]\n        })));\n      } catch (err) {\n        setCreators([{\n          id: 1,\n          handle: 'cryptokang',\n          displayName: 'Crypto Kang',\n          followerCount: 15420,\n          postCount: 234,\n          avgEngagement: 45,\n          postingCadence: 'Daily'\n        }, {\n          id: 2,\n          handle: 'degentrader',\n          displayName: 'Degen Trader',\n          followerCount: 8932,\n          postCount: 189,\n          avgEngagement: 38,\n          postingCadence: 'Weekly'\n        }, {\n          id: 3,\n          handle: 'memequeen',\n          displayName: 'Meme Queen',\n          followerCount: 22150,\n          postCount: 456,\n          avgEngagement: 52,\n          postingCadence: '2-3x/week'\n        }]);\n      }\n    };\n    loadCreators();\n  }, [devbaseClient]);\n  const filteredCreators = creators.filter(creator => {\n    const matchesSearch = creator.handle.toLowerCase().includes(searchQuery.toLowerCase()) || creator.displayName.toLowerCase().includes(searchQuery.toLowerCase());\n    return matchesSearch;\n  });\n  return <div className=\"min-h-screen bg-[#0B0D10]\">\n      <Navigation />\n      <div className=\"max-w-7xl mx-auto px-6 py-8\">\n        <div className=\"mb-8\">\n          <h1 className=\"text-3xl font-bold text-[#E7EBF0] mb-2 tracking-[-0.01em]\">Creator Index</h1>\n          <p className=\"text-[#9AA3AE] text-lg\">Discover and follow the best Pump.fun content creators</p>\n        </div>\n\n        <div className=\"flex flex-col md:flex-row gap-4 mb-8\">\n          <div className=\"flex-1\">\n            <div className=\"relative\">\n              <Search className=\"absolute left-4 top-1/2 transform -translate-y-1/2 text-[#9AA3AE]\" size={18} />\n              <input type=\"text\" placeholder=\"Search creators...\" value={searchQuery} onChange={e => setSearchQuery(e.target.value)} className=\"w-full pl-11 pr-4 py-2 bg-[#12161B] border border-[#1C2228] rounded-lg text-[#E7EBF0] placeholder-[#9AA3AE] focus:outline-none focus:border-[#19E2A4] focus:ring-4 focus:ring-[#19E2A4]/20 transition-all\" />\n            </div>\n          </div>\n          <div className=\"flex gap-2\">\n            {['all', 'rising', 'top24h', 'new'].map(f => <button key={f} onClick={() => setFilter(f)} className={`px-4 py-2 rounded-lg font-medium text-sm transition-all ${filter === f ? 'bg-[#19E2A4] text-[#0B0D10]' : 'bg-[#12161B] text-[#9AA3AE] hover:text-[#E7EBF0] border border-[#1C2228]'}`}>\n                {f === 'all' ? 'All' : f === 'rising' ? 'Rising' : f === 'top24h' ? 'Top 24h' : 'New'}\n              </button>)}\n          </div>\n        </div>\n\n        <div className=\"bg-[#0F1216] border border-[#1C2228] rounded-2xl overflow-hidden\">\n          <div className=\"overflow-x-auto\">\n            <table className=\"w-full\">\n              <thead className=\"bg-[#12161B] border-b border-[#1C2228]\">\n                <tr>\n                  <th className=\"text-left p-4 text-[#E7EBF0] font-semibold text-sm\">Creator</th>\n                  <th className=\"text-left p-4 text-[#E7EBF0] font-semibold text-sm\">Followers</th>\n                  <th className=\"text-left p-4 text-[#E7EBF0] font-semibold text-sm\">Posts</th>\n                  <th className=\"text-left p-4 text-[#E7EBF0] font-semibold text-sm\">Engagement</th>\n                  <th className=\"text-left p-4 text-[#E7EBF0] font-semibold text-sm\">Cadence</th>\n                  <th className=\"text-left p-4 text-[#E7EBF0] font-semibold text-sm\">Action</th>\n                </tr>\n              </thead>\n              <tbody>\n                {filteredCreators.map(creator => <tr key={creator.id} className=\"border-b border-[#1C2228] last:border-b-0 hover:bg-[#19E2A4]/5 transition-all\">\n                    <td className=\"p-4\">\n                      <div className=\"flex items-center gap-3\">\n                        <div className=\"w-10 h-10 bg-gradient-to-br from-[#19E2A4] to-[#16C690] rounded-full\"></div>\n                        <div>\n                          <div className=\"text-[#E7EBF0] font-medium\">@{creator.handle}</div>\n                          <div className=\"text-[#9AA3AE] text-sm\">{creator.displayName}</div>\n                        </div>\n                      </div>\n                    </td>\n                    <td className=\"p-4 text-[#E7EBF0] tabular-nums font-mono\">\n                      {creator.followerCount.toLocaleString()}\n                    </td>\n                    <td className=\"p-4 text-[#E7EBF0] tabular-nums font-mono\">{creator.postCount}</td>\n                    <td className=\"p-4 text-[#19E2A4] tabular-nums font-mono\">{creator.avgEngagement}%</td>\n                    <td className=\"p-4 text-[#9AA3AE]\">{creator.postingCadence}</td>\n                    <td className=\"p-4\">\n                      <button className=\"px-4 py-1.5 bg-[#19E2A4] text-[#0B0D10] font-semibold rounded-full text-sm hover:bg-[#16C690] transition-all\">\n                        Follow\n                      </button>\n                    </td>\n                  </tr>)}\n              </tbody>\n            </table>\n          </div>\n        </div>\n      </div>\n    </div>;\n};\nconst SearchResults = () => {\n  const [searchParams] = new URLSearchParams(window.location.search);\n  const query = searchParams.get('q') || '';\n  const [activeTab, setActiveTab] = useState('creators');\n  const [results, setResults] = useState({\n    creators: [],\n    tags: [],\n    tokens: []\n  });\n  useEffect(() => {\n    setResults({\n      creators: [{\n        id: 1,\n        handle: 'cryptokang',\n        displayName: 'Crypto Kang',\n        followerCount: 15420\n      }, {\n        id: 2,\n        handle: 'degentrader',\n        displayName: 'Degen Trader',\n        followerCount: 8932\n      }],\n      tags: [{\n        id: 1,\n        name: 'pump',\n        count: 1234\n      }, {\n        id: 2,\n        name: 'moon',\n        count: 892\n      }],\n      tokens: [{\n        id: 1,\n        symbol: 'BONK',\n        name: 'Bonk',\n        marketCap: '$2.1B'\n      }, {\n        id: 2,\n        symbol: 'WIF',\n        name: 'Dogwifhat',\n        marketCap: '$1.8B'\n      }]\n    });\n  }, [query]);\n  return <div className=\"min-h-screen bg-[#0B0D10]\">\n      <Navigation />\n      <div className=\"max-w-7xl mx-auto px-6 py-8\">\n        <div className=\"mb-8\">\n          <h1 className=\"text-3xl font-bold text-[#E7EBF0] mb-2 tracking-[-0.01em]\">Search Results</h1>\n          <p className=\"text-[#9AA3AE] text-lg\">Results for \"{query}\"</p>\n        </div>\n\n        <div className=\"flex gap-2 mb-8\">\n          {['creators', 'tags', 'tokens'].map(tab => <button key={tab} onClick={() => setActiveTab(tab)} className={`px-4 py-2 rounded-lg font-medium text-sm transition-all ${activeTab === tab ? 'bg-[#19E2A4] text-[#0B0D10]' : 'bg-[#12161B] text-[#9AA3AE] hover:text-[#E7EBF0] border border-[#1C2228]'}`}>\n              {tab.charAt(0).toUpperCase() + tab.slice(1)}\n            </button>)}\n        </div>\n\n        <div className=\"bg-[#0F1216] border border-[#1C2228] rounded-2xl p-6\">\n          {activeTab === 'creators' && <div className=\"space-y-4\">\n              {results.creators.map(creator => <div key={creator.id} className=\"flex items-center justify-between p-4 bg-[#12161B] rounded-lg\">\n                  <div className=\"flex items-center gap-4\">\n                    <div className=\"w-12 h-12 bg-gradient-to-br from-[#19E2A4] to-[#16C690] rounded-full\"></div>\n                    <div>\n                      <div className=\"text-[#E7EBF0] font-semibold\">@{creator.handle}</div>\n                      <div className=\"text-[#9AA3AE] text-sm tabular-nums font-mono\">\n                        {creator.followerCount.toLocaleString()} followers\n                      </div>\n                    </div>\n                  </div>\n                  <button className=\"px-4 py-1.5 bg-[#19E2A4] text-[#0B0D10] font-semibold rounded-full text-sm hover:bg-[#16C690] transition-all\">\n                    Follow\n                  </button>\n                </div>)}\n            </div>}\n\n          {activeTab === 'tags' && <div className=\"grid grid-cols-2 md:grid-cols-3 gap-4\">\n              {results.tags.map(tag => <div key={tag.id} className=\"p-4 bg-[#12161B] rounded-lg\">\n                  <div className=\"text-[#19E2A4] font-bold\">#{tag.name}</div>\n                  <div className=\"text-[#9AA3AE] text-sm tabular-nums font-mono\">{tag.count} posts</div>\n                </div>)}\n            </div>}\n\n          {activeTab === 'tokens' && <div className=\"space-y-4\">\n              {results.tokens.map(token => <div key={token.id} className=\"flex items-center justify-between p-4 bg-[#12161B] rounded-lg\">\n                  <div>\n                    <div className=\"text-[#E7EBF0] font-bold font-mono\">${token.symbol}</div>\n                    <div className=\"text-[#9AA3AE]\">\n                      {token.name} • {token.marketCap}\n                    </div>\n                  </div>\n                  <button className=\"px-4 py-1.5 bg-[#19E2A4]/10 border border-[#19E2A4]/30 rounded-full text-[#19E2A4] text-sm font-medium hover:bg-[#19E2A4]/20 transition-all\">\n                    Trade\n                  </button>\n                </div>)}\n            </div>}\n        </div>\n      </div>\n    </div>;\n};\nconst UserProfile = () => {\n  const [user, setUser] = useState(null);\n  const [isEditing, setIsEditing] = useState(false);\n  const [editForm, setEditForm] = useState({\n    displayName: '',\n    bio: ''\n  });\n  const {\n    devbaseClient\n  } = useDevapp();\n  useEffect(() => {\n    const loadProfile = async () => {\n      try {\n        const users = await devbaseClient.listEntities('users');\n        if (users.length > 0) {\n          setUser(users[0]);\n          setEditForm({\n            displayName: users[0].displayName,\n            bio: users[0].bio\n          });\n        }\n      } catch (err) {\n        setUser({\n          id: 1,\n          handle: 'myhandle',\n          displayName: 'My Display Name',\n          bio: 'Crypto enthusiast and content creator',\n          followerCount: 1250,\n          followingCount: 890,\n          postCount: 45\n        });\n        setEditForm({\n          displayName: 'My Display Name',\n          bio: 'Crypto enthusiast and content creator'\n        });\n      }\n    };\n    loadProfile();\n  }, [devbaseClient]);\n  const handleSave = async () => {\n    try {\n      await devbaseClient.updateEntity('users', user.id, editForm);\n      setUser({\n        ...user,\n        ...editForm\n      });\n      setIsEditing(false);\n    } catch (err) {\n      console.error('Failed to update profile');\n    }\n  };\n  if (!user) return null;\n  return <div className=\"min-h-screen bg-[#0B0D10]\">\n      <Navigation />\n      <div className=\"max-w-4xl mx-auto px-6 py-8\">\n        <div className=\"bg-[#0F1216] border border-[#1C2228] rounded-2xl p-8\">\n          <div className=\"flex items-start gap-8\">\n            <div className=\"relative\">\n              <div className=\"w-32 h-32 bg-gradient-to-br from-[#19E2A4] to-[#16C690] rounded-full\"></div>\n              <button className=\"absolute -bottom-2 -right-2 w-10 h-10 bg-[#12161B] border-2 border-[#1C2228] text-[#9AA3AE] rounded-full flex items-center justify-center hover:text-[#E7EBF0] transition-all\">\n                <Camera size={20} />\n              </button>\n            </div>\n\n            <div className=\"flex-1 pt-2\">\n              {isEditing ? <div className=\"space-y-4\">\n                  <input type=\"text\" value={editForm.displayName} onChange={e => setEditForm({\n                ...editForm,\n                displayName: e.target.value\n              })} className=\"w-full px-4 py-2 bg-[#12161B] border border-[#1C2228] rounded-lg text-[#E7EBF0] focus:outline-none focus:border-[#19E2A4] transition-all\" placeholder=\"Display name\" />\n                  <textarea value={editForm.bio} onChange={e => setEditForm({\n                ...editForm,\n                bio: e.target.value\n              })} className=\"w-full px-4 py-2 bg-[#12161B] border border-[#1C2228] rounded-lg text-[#E7EBF0] focus:outline-none focus:border-[#19E2A4] transition-all resize-none\" rows={3} placeholder=\"Bio\" />\n                  <div className=\"flex gap-2\">\n                    <button onClick={handleSave} className=\"px-4 py-2 bg-[#19E2A4] text-[#0B0D10] font-semibold rounded-lg hover:bg-[#16C690] transition-all\">\n                      Save\n                    </button>\n                    <button onClick={() => setIsEditing(false)} className=\"px-4 py-2 bg-[#12161B] border border-[#1C2228] text-[#9AA3AE] rounded-lg hover:text-[#E7EBF0] transition-all\">\n                      Cancel\n                    </button>\n                  </div>\n                </div> : <div>\n                  <div className=\"flex items-center gap-4 mb-2\">\n                    <h1 className=\"text-3xl font-bold text-[#E7EBF0] tracking-[-0.01em]\">{user.displayName}</h1>\n                    <button onClick={() => setIsEditing(true)} className=\"p-2 text-[#9AA3AE] hover:text-[#E7EBF0] transition-all bg-[#12161B] border border-[#1C2228] rounded-lg\">\n                      <Edit size={16} />\n                    </button>\n                  </div>\n                  <p className=\"text-[#19E2A4] mb-4 font-mono\">@{user.handle}</p>\n                  <p className=\"text-[#9AA3AE] mb-6 max-w-lg\">{user.bio}</p>\n                  <div className=\"flex gap-8 text-sm font-mono tabular-nums\">\n                    <div className=\"text-left\">\n                      <div className=\"text-[#E7EBF0] font-semibold text-lg\">{user.postCount}</div>\n                      <div className=\"text-[#9AA3AE]\">Posts</div>\n                    </div>\n                    <div className=\"text-left\">\n                      <div className=\"text-[#E7EBF0] font-semibold text-lg\">\n                        {user.followerCount.toLocaleString()}\n                      </div>\n                      <div className=\"text-[#9AA3AE]\">Followers</div>\n                    </div>\n                    <div className=\"text-left\">\n                      <div className=\"text-[#E7EBF0] font-semibold text-lg\">{user.followingCount}</div>\n                      <div className=\"text-[#9AA3AE]\">Following</div>\n                    </div>\n                  </div>\n                </div>}\n            </div>\n          </div>\n        </div>\n\n        <div className=\"mt-8\">\n          <h2 className=\"text-xl font-semibold text-[#E7EBF0] mb-6\">Your Reels</h2>\n          <div className=\"text-center py-16 bg-[#0F1216] border border-[#1C2228] rounded-2xl\">\n            <Plus size={40} className=\"mx-auto mb-4 text-[#9AA3AE] opacity-50\" />\n            <p className=\"text-[#9AA3AE]\">You haven't posted any reels yet.</p>\n            <Link to=\"/docs\" className=\"text-sm text-[#19E2A4] hover:underline\">\n              Learn more about creating reels\n            </Link>\n          </div>\n        </div>\n      </div>\n    </div>;\n};\nconst ProtectedRoute = ({\n  children\n}) => {\n  const {\n    user,\n    loading\n  } = useAuth();\n  const location = useLocation();\n  if (loading) {\n    return <div className=\"min-h-screen bg-[#0B0D10]\" />;\n  }\n  if (!user) {\n    return <Navigate to=\"/\" state={{\n      from: location\n    }} replace />;\n  }\n  return children;\n};\nconst AppWithProvider = () => {\n  return <DevappProvider rpcEndpoint=\"https://rpc.dev.fun/414e601767c07486a273\" devbaseEndpoint=\"https://devbase.dev.fun\" appId=\"414e601767c07486a273\">\n      <AuthProvider>\n        <App />\n      </AuthProvider>\n    </DevappProvider>;\n};\nconst DocsPage = () => {\n  return <div className=\"min-h-screen bg-[#0B0D10]\">\n      <Navigation />\n      <div className=\"max-w-6xl mx-auto px-6 py-12\">\n        <div className=\"text-center mb-16\">\n          <h1 className=\"text-5xl font-bold text-[#E7EBF0] mb-4 tracking-[-0.02em]\">\n            PumpReels Docs\n          </h1>\n          <p className=\"text-xl text-[#9AA3AE] max-w-3xl mx-auto\">\n            The official guide to creating, sharing, and discovering content on PumpReels.\n          </p>\n        </div>\n\n        <div className=\"grid md:grid-cols-[240px_1fr] gap-12\">\n            <aside className=\"sticky top-24 self-start\">\n                <h3 className=\"text-[#E7EBF0] font-semibold mb-4\">On this page</h3>\n                <ul className=\"space-y-2 text-sm\">\n                    <li><a href=\"#what-is\" className=\"text-[#9AA3AE] hover:text-[#E7EBF0]\">What is PumpReels?</a></li>\n                    <li><a href=\"#for-viewers\" className=\"text-[#9AA3AE] hover:text-[#E7EBF0]\">For Viewers</a></li>\n                    <li><a href=\"#for-creators\" className=\"text-[#9AA3AE] hover:text-[#E7EBF0]\">For Creators</a></li>\n                    <li><a href=\"#trading\" className=\"text-[#9AA3AE] hover:text-[#E7EBF0]\">Trading Overlays</a></li>\n                    <li><a href=\"#roadmap\" className=\"text-[#9AA3AE] hover:text-[#E7EBF0]\">Roadmap</a></li>\n                </ul>\n            </aside>\n\n            <main className=\"space-y-16\">\n                <section id=\"what-is\">\n                  <h2 className=\"text-3xl font-bold text-[#E7EBF0] mb-6 tracking-[-0.01em]\">What is PumpReels?</h2>\n                  <div className=\"space-y-4 text-lg text-[#9AA3AE] leading-relaxed\">\n                    <p>PumpReels is the first desktop platform dedicated to turning Pump.fun streams into short, viral clips. It's a discovery engine for the degen economy, built for traders, creators, and fans who want to stay ahead of the curve.</p>\n                    <p>We transform the chaotic, hours-long world of token streams into a curated feed of digestible, shareable, and actionable content.</p>\n                  </div>\n                </section>\n\n                <section id=\"for-viewers\">\n                  <h2 className=\"text-3xl font-bold text-[#E7EBF0] mb-6 tracking-[-0.01em]\">For Viewers</h2>\n                   <div className=\"space-y-4 text-lg text-[#9AA3AE] leading-relaxed\">\n                    <p>Skip the noise. Our algorithmic feed surfaces the most important moments from across the Pump.fun ecosystem. Discover new tokens, track narratives, and find alpha faster than ever before.</p>\n                  </div>\n                </section>\n                \n                <section id=\"for-creators\">\n                  <h2 className=\"text-3xl font-bold text-[#E7EBF0] mb-6 tracking-[-0.01em]\">For Creators</h2>\n                   <div className=\"space-y-4 text-lg text-[#9AA3AE] leading-relaxed\">\n                    <p>Build your audience and establish your brand. PumpReels provides the tools to turn your stream highlights into a powerful content funnel. Our creator-first features are designed to help you grow, engage, and monetize.</p>\n                  </div>\n                </section>\n\n                <section id=\"trading\">\n                  <h2 className=\"text-3xl font-bold text-[#E7EBF0] mb-6 tracking-[-0.01em]\">Trading Overlays (Planned)</h2>\n                   <div className=\"space-y-4 text-lg text-[#9AA3AE] leading-relaxed\">\n                    <p>Context is everything. Future versions of PumpReels will integrate on-chain data directly into the viewing experience. See real-time price action, market cap, and liquidity information overlaid on reels, with one-click access to trading interfaces.</p>\n                  </div>\n                </section>\n\n                <section id=\"roadmap\">\n                  <h2 className=\"text-3xl font-bold text-[#E7EBF0] mb-8 tracking-[-0.01em]\">Roadmap</h2>\n                  <div className=\"space-y-8 border-l-2 border-[#1C2228] pl-8\">\n                    <div className=\"relative\">\n                        <div className=\"absolute -left-10 top-1 w-4 h-4 bg-[#19E2A4] rounded-full\"></div>\n                        <h3 className=\"text-xl font-bold text-[#E7EBF0] mb-2\">Q4 2025: Closed Beta</h3>\n                        <p className=\"text-[#9AA3AE]\">Initial platform with reel placeholders, creator profiles, and core social features. Limited to 1,000 early users.</p>\n                    </div>\n                    <div className=\"relative\">\n                        <div className=\"absolute -left-10 top-1 w-4 h-4 bg-[#1C2228] rounded-full\"></div>\n                        <h3 className=\"text-xl font-bold text-[#E7EBF0] mb-2\">Q1 2026: Open Beta & Video Ingestion</h3>\n                        <p className=\"text-[#9AA3AE]\">Public launch with real video clipping and uploading. First iteration of our AI highlight detection.</p>\n                    </div>\n                     <div className=\"relative\">\n                        <div className=\"absolute -left-10 top-1 w-4 h-4 bg-[#1C2228] rounded-full\"></div>\n                        <h3 className=\"text-xl font-bold text-[#E7EBF0] mb-2\">Q2 2026: Trading Integration</h3>\n                        <p className=\"text-[#9AA3AE]\">Direct trading overlays in reels, one-click buy/sell functionality, and portfolio tracking.</p>\n                    </div>\n                  </div>\n                </section>\n            </main>\n        </div>\n      </div>\n    </div>;\n};\nconst App = () => {\n  return <Router>\n      <div className=\"min-h-screen bg-[#0B0D10] text-[#E7EBF0] font-sans\">\n        <Routes>\n          <Route path=\"/\" element={<AuthScreen />} />\n          <Route path=\"/onboarding/handle\" element={<ProtectedRoute><OnboardingHandle /></ProtectedRoute>} />\n          <Route path=\"/onboarding/profile\" element={<ProtectedRoute><OnboardingProfile /></ProtectedRoute>} />\n          <Route path=\"/docs\" element={<DocsPage />} />\n          <Route path=\"/home\" element={<ProtectedRoute><HomeFeed /></ProtectedRoute>} />\n          <Route path=\"/creators\" element={<ProtectedRoute><CreatorIndex /></ProtectedRoute>} />\n          <Route path=\"/search\" element={<ProtectedRoute><SearchResults /></ProtectedRoute>} />\n          <Route path=\"/profile\" element={<ProtectedRoute><UserProfile /></ProtectedRoute>} />\n          <Route path=\"*\" element={<Navigate to=\"/\" replace />} />\n        </Routes>\n      </div>\n    </Router>;\n};\nexport default AppWithProvider;","packageJson","{\"dependencies\":{\"react\":\"18.2.0\",\"react-router-dom\":\"6.18.0\",\"lucide-react\":\"0.441.0\",\"@devfunlabs/web-sdk\":\"0.5.6\"}}","appFunctions",[],"token","upstreamApp","isLordOfDev","isExternalApp","analytics",[86,90,92,94,96,98,100,102,104,106,108,110,112,114,116,117,118,119],{"_87":88,"_89":61},"day","2025-11-03","runCount",{"_87":91,"_89":61},"2025-11-04",{"_87":93,"_89":61},"2025-11-05",{"_87":95,"_89":61},"2025-11-06",{"_87":97,"_89":61},"2025-11-07",{"_87":99,"_89":61},"2025-11-08",{"_87":101,"_89":61},"2025-11-09",{"_87":103,"_89":61},"2025-11-10",{"_87":105,"_89":61},"2025-11-11",{"_87":107,"_89":61},"2025-11-12",{"_87":109,"_89":61},"2025-11-13",{"_87":111,"_89":61},"2025-11-14",{"_87":113,"_89":61},"2025-11-15",{"_87":115,"_89":61},"2025-11-16",{"_87":109,"_89":44},{"_87":111,"_89":44},{"_87":113,"_89":44},{"_87":120,"_89":121},"2025-11-17",9,"snapshot","ogImage","https://cdn.dev.fun/og/image/414e601767c07486a273/295c2f19.webp","isDevbase","project",{"_14":19,"_128":-5,"_20":129,"_130":-5,"_22":-5},"image","project-ykaeu","oneliner","actionData","errors"]
</article></body></html>

say something