[{"_1":2,"_150":-5,"_151":-5},"loaderData",{"_3":4,"_10":11},"root",{"_5":-5,"_6":7,"_8":9},"user","appId","cm7twdhs6009l11ml868xhxld","wsEndpoint","https://dev.fun","routes/p.$appId",{"_12":13,"_148":-5,"_139":-7,"_149":17},"appDetail",{"_14":15,"_16":17,"_18":19,"_20":21,"_22":23,"_24":25,"_26":27,"_28":27,"_29":30,"_31":32,"_33":34,"_35":36,"_37":38,"_39":40,"_41":42,"_43":44,"_5":45,"_57":58,"_59":60,"_61":60,"_62":63,"_64":60,"_65":60,"_66":60,"_67":60,"_68":60,"_69":60,"_70":17,"_71":27,"_72":19,"_73":74,"_75":76,"_77":78,"_79":80,"_103":-5,"_104":17,"_105":106,"_139":32,"_140":141,"_142":27,"_143":144},"id","bd8aa3e4e33c247ad607","isMyApp",false,"projectId","AgYVbX4CueNVrBAXZh84DoFQtZhG6wpi3JgXHyCKpump","name","SolTap","description","A breathtakingly minimal Solana payment platform where every pixel has a purpose. Manage projects, automate recurring payments, and transfer $SOL or $USDC with an interface so clean it feels like your transactions are floating through space.","brief","Payments on Solana so minimal, even your wallet feels lighter.","isLive",true,"isPublic","tags",[],"cover","https://cdn.dev.fun/snapshot/bd8aa3e4e33c247ad607/81052_234d74ed.webp","cdnUrl","https://cdn.dev.fun/app/bd8aa3e4e33c247ad607/81052","createdAt",["D",1749775013092],"updatedAt",["D",1749824451598],"lastCommitId",["B","81052"],"tier",1,"credits",-76,{"_14":46,"_47":48,"_49":48,"_50":51,"_52":48,"_53":54,"_55":56},"80ffa728-fb35-434b-b20d-f339ab7f688a","uniqueId","Salutlesg","username","solanaWallet","7XJyP7Kro6ZUQrMxsa7aCJbgVYrBEbdZNULxirYpFiJw","displayName","bio","","avatar","https://cdn.dev.fun/avatar/80ffa728-fb35-434b-b20d-f339ab7f688a/99040cce.webp","commitCount",22,"forkCount",0,"likeCount","runsCount",31,"downvoteCount","upvoteCount","upvoteRate","commentCount","reportCount","visitorCount","isArchived","isRenamed","contractAddress","code","import { useState, useEffect } from 'react';\nimport { useDevapp, UserButton, DevappProvider, openLink } from '@devfunlabs/web-sdk';\nimport { motion, AnimatePresence } from 'framer-motion';\nimport { Home, User, Wallet, History, Compass, RefreshCw, LogOut, Plus, ChevronRight, X, Search, ArrowRight, Clock, Users, DollarSign, Send, Download, Upload, Copy, Eye, Award, AlertCircle, AlertTriangle, Trash2 } from 'lucide-react';\nexport default function AppWithProvider() {\n const [walletError, setWalletError] = useState(null);\n const handleWalletError = error => {\n console.error(\"Wallet connection error:\", error);\n setWalletError(error.message || \"Failed to connect to wallet\");\n setTimeout(() => setWalletError(null), 5000);\n };\n return <>\n {walletError &&

\n \n

{walletError}

\n \n

}\n \n \n \n ;\n}\nfunction App() {\n const {\n devbaseClient,\n userWallet\n } = useDevapp();\n const [currentView, setCurrentView] = useState('welcome');\n const [user, setUser] = useState(null);\n const [isLoading, setIsLoading] = useState(true);\n const [error, setError] = useState(null);\n useEffect(() => {\n const checkUser = async () => {\n if (userWallet) {\n try {\n setIsLoading(true);\n setError(null);\n const users = await devbaseClient.listEntities('users', {\n userId: userWallet\n });\n if (users && users.length > 0) {\n setUser(users[0]);\n setCurrentView('dashboard');\n } else {\n setCurrentView('create-account');\n }\n } catch (error) {\n console.error('Error checking user:', error);\n setError('Failed to load user data. Please try again.');\n } finally {\n setIsLoading(false);\n }\n } else {\n setIsLoading(false);\n }\n };\n checkUser();\n }, [devbaseClient, userWallet]);\n if (isLoading) {\n return ;\n }\n if (error) {\n return

\n \n

Connection Error

{error}

\n \n

;\n }\n return

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

\n \n \n {!userWallet && }\n {userWallet && !user && }\n {userWallet && user && }\n \n \n

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

;\n}\nfunction MobileNavbar({\n currentView,\n setCurrentView\n}) {\n const menuItems = [{\n id: 'dashboard',\n label: 'Home',\n icon: \n }, {\n id: 'wallet',\n label: 'Wallet',\n icon: \n }, {\n id: 'new-payment',\n label: 'Pay',\n icon: \n }, {\n id: 'projects',\n label: 'Projects',\n icon: \n }, {\n id: 'profile',\n label: 'Profile',\n icon: \n }];\n return \n

\n {menuItems.map(item => )}\n

\n ;\n}\nfunction LoadingScreen() {\n return

\n \n $\"SolTap\"$ \n

\n \n

;\n}\nfunction WelcomeView() {\n return

\n \n $\"SolTap\"$ \n

\n A minimalist payment platform on Solana where transactions float through space.\n

\n \n

;\n}\nfunction CreateAccountView({\n setUser,\n setCurrentView\n}) {\n const {\n devbaseClient\n } = useDevapp();\n const [username, setUsername] = useState('');\n const [email, setEmail] = useState('');\n const [isCreating, setIsCreating] = useState(false);\n const [usernameError, setUsernameError] = useState('');\n const createAccount = async e => {\n e.preventDefault();\n if (!username) {\n setUsernameError('Username is required');\n return;\n }\n setIsCreating(true);\n try {\n const existingUsers = await devbaseClient.listEntities('users', {\n username\n });\n if (existingUsers.length > 0) {\n setUsernameError('Username already taken');\n setIsCreating(false);\n return;\n }\n const userData = {\n username,\n email\n };\n const newUser = await devbaseClient.createEntity('users', userData);\n setUser(newUser);\n setCurrentView('dashboard');\n } catch (error) {\n console.error('Error creating account:', error);\n } finally {\n setIsCreating(false);\n }\n };\n return

\n \n

Create Your Account

\n \n Username\n \n {\n setUsername(e.target.value);\n setUsernameError('');\n }} className={`w-full px-3 py-2 border ${usernameError ? 'border-red-300' : 'border-gray-200'} rounded-md bg-white focus:outline-none focus:ring-1 focus:ring-blue-500`} placeholder=\"Choose a username\" />\n {usernameError &&

{usernameError}

}\n

\n \n Email (optional)\n \n setEmail(e.target.value)} className=\"w-full px-3 py-2 border border-gray-200 rounded-md bg-white focus:outline-none focus:ring-1 focus:ring-blue-500\" placeholder=\"your@email.com\" />\n

\n \n

;\n}\nfunction ViewRouter({\n currentView,\n setCurrentView,\n user,\n setUser\n}) {\n switch (currentView) {\n case 'dashboard':\n return ;\n case 'wallet':\n return ;\n case 'projects':\n return ;\n case 'project-detail':\n return ;\n case 'new-project':\n return ;\n case 'transactions':\n return ;\n case 'explore':\n return ;\n case 'recurring':\n return ;\n case 'new-payment':\n return ;\n case 'profile':\n return ;\n default:\n return ;\n }\n}\nfunction Sidebar({\n currentView,\n setCurrentView\n}) {\n const {\n disconnect\n } = useDevapp();\n const handleLogout = async () => {\n try {\n sessionStorage.clear();\n if (disconnect) {\n await disconnect();\n }\n setCurrentView('welcome');\n window.location.reload();\n } catch (error) {\n console.error(\"Error during logout:\", error);\n alert(\"There was an issue disconnecting your wallet. Please try again.\");\n }\n };\n const menuItems = [{\n id: 'dashboard',\n label: 'Dashboard',\n icon: \n }, {\n id: 'wallet',\n label: 'Wallet',\n icon: \n }, {\n id: 'new-payment',\n label: 'Pay',\n icon: \n }, {\n id: 'projects',\n label: 'Projects',\n icon: \n }, {\n id: 'transactions',\n label: 'Transactions',\n icon: \n }, {\n id: 'explore',\n label: 'Explore',\n icon: \n }, {\n id: 'recurring',\n label: 'Recurring',\n icon: \n }, {\n id: 'profile',\n label: 'Profile',\n icon: \n }];\n return ;\n}\nfunction DashboardView({\n user,\n setCurrentView\n}) {\n const {\n devbaseClient,\n userWallet\n } = useDevapp();\n const [stats, setStats] = useState({\n totalPaid: 0,\n totalReceived: 0,\n transactionCount: 0,\n projectCount: 0\n });\n const [balance, setBalance] = useState({\n SOL: 0,\n USDC: 0\n });\n const [isLoading, setIsLoading] = useState(true);\n const [recentTransactions, setRecentTransactions] = useState([]);\n const [myProjects, setMyProjects] = useState([]);\n const [joinedProjects, setJoinedProjects] = useState([]);\n const [clearedTransactions, setClearedTransactions] = useState(false);\n useEffect(() => {\n const fetchDashboardData = async () => {\n try {\n setIsLoading(true);\n const userPrefs = await devbaseClient.listEntities('transactions', {\n userId: userWallet,\n status: 'cleared'\n });\n setClearedTransactions(userPrefs.length > 0);\n const transactions = await devbaseClient.listEntities('transactions');\n const userSentTransactions = transactions.filter(tx => tx.fromUserId === userWallet && tx.status !== 'cleared');\n const userReceivedTransactions = transactions.filter(tx => tx.toUserId === userWallet && tx.status !== 'cleared');\n const completedTransactions = transactions.filter(tx => tx.status === 'completed');\n const totalPaid = userSentTransactions.reduce((sum, tx) => sum + tx.amount, 0);\n const totalReceived = userReceivedTransactions.reduce((sum, tx) => sum + tx.amount, 0);\n const deposits = await devbaseClient.listEntities('deposits', {\n userId: userWallet\n });\n const withdrawals = await devbaseClient.listEntities('withdrawals', {\n userId: userWallet\n });\n const solDeposits = deposits.filter(d => d.token === 'SOL').reduce((sum, d) => sum + d.amount, 0);\n const solReceivedTransactions = completedTransactions.filter(tx => tx.toUserId === userWallet && tx.token === 'SOL').reduce((sum, tx) => sum + tx.amount, 0);\n const solWithdrawals = withdrawals.filter(w => w.token === 'SOL').reduce((sum, w) => sum + w.amount, 0);\n const solSentTransactions = completedTransactions.filter(tx => tx.fromUserId === userWallet && tx.token === 'SOL').reduce((sum, tx) => sum + tx.amount, 0);\n const usdcDeposits = deposits.filter(d => d.token === 'USDC').reduce((sum, d) => sum + d.amount, 0);\n const usdcReceivedTransactions = completedTransactions.filter(tx => tx.toUserId === userWallet && tx.token === 'USDC').reduce((sum, tx) => sum + tx.amount, 0);\n const usdcWithdrawals = withdrawals.filter(w => w.token === 'USDC').reduce((sum, w) => sum + w.amount, 0);\n const usdcSentTransactions = completedTransactions.filter(tx => tx.fromUserId === userWallet && tx.token === 'USDC').reduce((sum, tx) => sum + tx.amount, 0);\n setBalance({\n SOL: solDeposits + solReceivedTransactions - solWithdrawals - solSentTransactions,\n USDC: usdcDeposits + usdcReceivedTransactions - usdcWithdrawals - usdcSentTransactions\n });\n const memberships = await devbaseClient.listEntities('projectMembers', {\n userId: userWallet\n });\n const projectIds = memberships.map(m => m.projectId);\n const projectPromises = projectIds.map(id => devbaseClient.getEntity('projects', id));\n const projectsData = await Promise.all(projectPromises);\n const validProjects = projectsData.filter(p => p !== null);\n const createdProjects = validProjects.filter(p => p.userId === userWallet);\n const joinedProjectsData = validProjects.filter(p => p.userId !== userWallet);\n setMyProjects(createdProjects);\n setJoinedProjects(joinedProjectsData);\n const allUserTransactions = clearedTransactions ? [] : [...userSentTransactions, ...userReceivedTransactions].sort((a, b) => new Date(b.createdAt) - new Date(a.createdAt)).slice(0, 5);\n setStats({\n totalPaid,\n totalReceived,\n transactionCount: userSentTransactions.length + userReceivedTransactions.length,\n projectCount: memberships.length\n });\n setRecentTransactions(allUserTransactions);\n } catch (error) {\n console.error('Error fetching dashboard data:', error);\n } finally {\n setIsLoading(false);\n }\n };\n fetchDashboardData();\n }, [devbaseClient, userWallet]);\n const formatAmount = (amount, token) => {\n return `${amount.toFixed(4)} ${token}`;\n };\n const clearAllTransactions = async () => {\n if (!confirm('Are you sure you want to clear all transactions? This will hide them from your dashboard.')) return;\n try {\n if (!clearedTransactions) {\n await devbaseClient.createEntity('transactions', {\n fromUserId: userWallet,\n toUserId: userWallet,\n amount: 0,\n token: 'NONE',\n status: 'cleared',\n description: 'Transaction history cleared'\n });\n }\n setClearedTransactions(true);\n setRecentTransactions([]);\n alert('All transactions have been cleared from your dashboard');\n } catch (error) {\n console.error('Error clearing transactions:', error);\n alert('Failed to clear transactions. Please try again.');\n }\n };\n const handleProjectClick = project => {\n sessionStorage.setItem('selectedProject', JSON.stringify(project));\n setCurrentView('project-detail');\n };\n const handleNewPayment = () => {\n setCurrentView('new-payment');\n };\n if (isLoading) {\n return

;\n }\n return

Welcome, {user.username}

Here's an overview of your activity

\n \n

\n\n

\n } />\n } />\n } />\n } />\n

\n\n

Wallet Balance

\n \n

SOL Balance

Available for payments

{balance.SOL.toFixed(4)}

\n \n

USDC Balance

Available for payments

{balance.USDC.toFixed(2)}

\n \n \n

\n \n

Recent Transactions

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

\n \n {recentTransactions.length === 0 ?

\n No transactions yet\n

\n {recentTransactions.map(tx =>

\n {tx.fromUserId === userWallet ?

\n \n

}\n

\n {tx.fromUserId === userWallet ? 'Sent to' : 'Received from'}\n

\n {new Date(tx.createdAt).toLocaleDateString()}\n

\n {tx.fromUserId === userWallet ? '-' : '+'}{formatAmount(tx.amount, tx.token)}\n

\n {tx.status}\n

)}\n

}\n

\n \n {}\n

My Projects

\n \n

\n \n {myProjects.length === 0 ?

You haven't created any projects yet

\n \n

\n {myProjects.slice(0, 3).map(project => handleProjectClick(project)}>\n

{project.name}

\n {project.description || 'No description'}\n

\n \n Owner\n

\n View\n \n

\n )}\n {myProjects.length > 3 && }\n

}\n

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

Joined Projects

\n \n

\n {joinedProjects.slice(0, 3).map(project => handleProjectClick(project)}>\n

{project.name}

\n {project.description || 'No description'}\n

\n \n Member\n

\n View\n \n

\n )}\n {joinedProjects.length > 3 && }\n

}\n

;\n}\nfunction StatCard({\n title,\n value,\n icon\n}) {\n return \n

{title}

\n {icon}\n

{value}

\n ;\n}\nfunction WalletView({\n user\n}) {\n const {\n devbaseClient,\n userWallet\n } = useDevapp();\n const [balance, setBalance] = useState({\n SOL: 0,\n USDC: 0\n });\n const [depositAmount, setDepositAmount] = useState('');\n const [depositToken, setDepositToken] = useState('SOL');\n const [withdrawAmount, setWithdrawAmount] = useState('');\n const [withdrawToken, setWithdrawToken] = useState('SOL');\n const [isDepositing, setIsDepositing] = useState(false);\n const [isWithdrawing, setIsWithdrawing] = useState(false);\n const [isLoading, setIsLoading] = useState(true);\n const [depositHistory, setDepositHistory] = useState([]);\n const [withdrawalHistory, setWithdrawalHistory] = useState([]);\n const [activeTab, setActiveTab] = useState('deposit');\n const setMaxAmount = () => {\n setWithdrawAmount(balance[withdrawToken].toString());\n };\n useEffect(() => {\n const fetchWalletData = async () => {\n try {\n setIsLoading(true);\n const deposits = await devbaseClient.listEntities('deposits', {\n userId: userWallet\n });\n setDepositHistory(deposits);\n const withdrawals = await devbaseClient.listEntities('withdrawals', {\n userId: userWallet\n });\n setWithdrawalHistory(withdrawals);\n const transactions = await devbaseClient.listEntities('transactions');\n const completedTransactions = transactions.filter(tx => tx.status === 'completed');\n const solDeposits = deposits.filter(d => d.token === 'SOL').reduce((sum, d) => sum + d.amount, 0);\n const solReceivedTransactions = completedTransactions.filter(tx => tx.toUserId === userWallet && tx.token === 'SOL').reduce((sum, tx) => sum + tx.amount, 0);\n const solWithdrawals = withdrawals.filter(w => w.token === 'SOL').reduce((sum, w) => sum + w.amount, 0);\n const solSentTransactions = completedTransactions.filter(tx => tx.fromUserId === userWallet && tx.token === 'SOL').reduce((sum, tx) => sum + tx.amount, 0);\n const usdcDeposits = deposits.filter(d => d.token === 'USDC').reduce((sum, d) => sum + d.amount, 0);\n const usdcReceivedTransactions = completedTransactions.filter(tx => tx.toUserId === userWallet && tx.token === 'USDC').reduce((sum, tx) => sum + tx.amount, 0);\n const usdcWithdrawals = withdrawals.filter(w => w.token === 'USDC').reduce((sum, w) => sum + w.amount, 0);\n const usdcSentTransactions = completedTransactions.filter(tx => tx.fromUserId === userWallet && tx.token === 'USDC').reduce((sum, tx) => sum + tx.amount, 0);\n setBalance({\n SOL: solDeposits + solReceivedTransactions - solWithdrawals - solSentTransactions,\n USDC: usdcDeposits + usdcReceivedTransactions - usdcWithdrawals - usdcSentTransactions\n });\n } catch (error) {\n console.error('Error fetching wallet data:', error);\n } finally {\n setIsLoading(false);\n }\n };\n fetchWalletData();\n }, [devbaseClient, userWallet]);\n const handleDeposit = async e => {\n e.preventDefault();\n if (!depositAmount || isNaN(parseFloat(depositAmount)) || parseFloat(depositAmount) <= 0) {\n alert('Please enter a valid amount');\n return;\n }\n setIsDepositing(true);\n try {\n const amount = parseFloat(depositAmount);\n const deposit = await devbaseClient.createEntity('deposits', {\n amount,\n token: depositToken,\n txHash: 'pending'\n });\n setDepositHistory([deposit, ...depositHistory]);\n setBalance(prev => ({\n ...prev,\n [depositToken]: prev[depositToken] + amount\n }));\n setDepositAmount('');\n } catch (error) {\n console.error('Error depositing:', error);\n alert('Failed to deposit. Please try again.');\n } finally {\n setIsDepositing(false);\n }\n };\n const handleWithdraw = async e => {\n e.preventDefault();\n if (!withdrawAmount || isNaN(parseFloat(withdrawAmount)) || parseFloat(withdrawAmount) <= 0) {\n alert('Please enter a valid amount');\n return;\n }\n const amount = parseFloat(withdrawAmount);\n if (amount > balance[withdrawToken]) {\n alert(`Insufficient ${withdrawToken} balance`);\n return;\n }\n setIsWithdrawing(true);\n try {\n const withdrawal = await devbaseClient.createEntity('withdrawals', {\n amount,\n token: withdrawToken,\n txHash: 'pending'\n });\n setWithdrawalHistory([withdrawal, ...withdrawalHistory]);\n setBalance(prev => ({\n ...prev,\n [withdrawToken]: prev[withdrawToken] - amount\n }));\n setWithdrawAmount('');\n } catch (error) {\n console.error('Error withdrawing:', error);\n alert('Failed to withdraw. Please try again.');\n } finally {\n setIsWithdrawing(false);\n }\n };\n if (isLoading) {\n return

;\n }\n return

Your Wallet

Manage your deposits and withdrawals

\n\n

\n } />\n } />\n

\n\n

\n \n \n

\n \n

\n {activeTab === 'deposit' ?

\n \n Amount\n \n setDepositAmount(e.target.value)} className=\"w-full px-3 py-2 border border-gray-200 rounded-md bg-white focus:outline-none focus:ring-1 focus:ring-blue-500\" placeholder=\"0.00\" required />\n

\n \n Token\n \n \n

\n \n

\n \n Amount\n \n

\n setWithdrawAmount(e.target.value)} className=\"w-full px-3 py-2 border border-gray-200 rounded-md bg-white focus:outline-none focus:ring-1 focus:ring-blue-500\" placeholder=\"0.00\" required />\n

\n \n

\n \n Token\n \n \n

\n \n

}\n

\n\n

Transaction History

\n \n {depositHistory.length === 0 && withdrawalHistory.length === 0 ?

\n No transactions yet\n

\n {[...depositHistory, ...withdrawalHistory].sort((a, b) => new Date(b.createdAt) - new Date(a.createdAt)).slice(0, 10).map(tx => {\n const isDeposit = 'deposits' in tx || depositHistory.some(d => d.id === tx.id);\n return

\n {isDeposit ?

\n \n

}\n

\n {isDeposit ? 'Deposit' : 'Withdrawal'}\n

\n {new Date(tx.createdAt).toLocaleDateString()} {new Date(tx.createdAt).toLocaleTimeString()}\n

\n {isDeposit ? '+' : '-'}{tx.amount.toFixed(4)} {tx.token}\n

\n {tx.txHash === 'pending' ? 'Processing...' : 'Finished'}\n

;\n })}\n

}\n

;\n}\nfunction ProjectsView({\n user,\n setCurrentView\n}) {\n const {\n devbaseClient,\n userWallet\n } = useDevapp();\n const [projects, setProjects] = useState([]);\n const [isLoading, setIsLoading] = useState(true);\n useEffect(() => {\n const fetchProjects = async () => {\n try {\n setIsLoading(true);\n const memberships = await devbaseClient.listEntities('projectMembers', {\n userId: userWallet\n });\n if (memberships.length === 0) {\n setProjects([]);\n setIsLoading(false);\n return;\n }\n const projectIds = memberships.map(m => m.projectId);\n const projectPromises = projectIds.map(id => devbaseClient.getEntity('projects', id));\n const projectsData = await Promise.all(projectPromises);\n const validProjects = projectsData.filter(p => p !== null);\n setProjects(validProjects);\n } catch (error) {\n console.error('Error fetching projects:', error);\n } finally {\n setIsLoading(false);\n }\n };\n fetchProjects();\n }, [devbaseClient, userWallet]);\n const handleProjectClick = project => {\n sessionStorage.setItem('selectedProject', JSON.stringify(project));\n setCurrentView('project-detail');\n };\n if (isLoading) {\n return

;\n }\n return

Your Projects

Manage your payment projects

\n \n

\n\n {projects.length === 0 ?

No Projects Yet

Create your first project to start managing payments

\n \n

\n {projects.map(project => handleProjectClick(project)}>\n

{project.name}

\n {project.description || 'No description'}\n

\n \n Members\n

\n View Details\n \n

\n )}\n

}\n

;\n}\nfunction NewProjectView({\n user,\n setCurrentView\n}) {\n const {\n devbaseClient,\n userWallet\n } = useDevapp();\n const [name, setName] = useState('');\n const [description, setDescription] = useState('');\n const [tags, setTags] = useState('');\n const [isPublic, setIsPublic] = useState(false);\n const [isGated, setIsGated] = useState(false);\n const [entryFee, setEntryFee] = useState('');\n const [entryFeeToken, setEntryFeeToken] = useState('SOL');\n const [isCreating, setIsCreating] = useState(false);\n const createProject = async e => {\n e.preventDefault();\n if (!name) {\n alert('Project name is required');\n return;\n }\n if (isGated && (!entryFee || parseFloat(entryFee) <= 0)) {\n alert('Please enter a valid entry fee amount');\n return;\n }\n setIsCreating(true);\n try {\n const projectData = {\n name,\n description,\n isPublic,\n walletAddress: userWallet,\n tags: tags.trim(),\n entryFee: isGated ? parseFloat(entryFee) : 0,\n entryFeeToken: isGated ? entryFeeToken : ''\n };\n const newProject = await devbaseClient.createEntity('projects', projectData);\n const memberData = {\n projectId: newProject.id,\n role: 'admin'\n };\n await devbaseClient.createEntity('projectMembers', memberData);\n setCurrentView('projects');\n } catch (error) {\n console.error('Error creating project:', error);\n alert('Failed to create project. Please try again.');\n } finally {\n setIsCreating(false);\n }\n };\n return

\n \n

Create New Project

Set up a new payment project

\n\n

\n \n Project Name\n \n setName(e.target.value)} className=\"w-full px-3 py-2 border border-gray-200 rounded-md bg-white focus:outline-none focus:ring-1 focus:ring-blue-500\" placeholder=\"My Project\" required />\n

\n \n

\n \n Description (optional)\n \n

setDescription(e.target.value)} className=\"w-full px-3 py-2 border border-gray-200 rounded-md bg-white focus:outline-none focus:ring-1 focus:ring-blue-500\" placeholder=\"Describe your project\" rows={4} />\n          </div>\n          \n          <div className=\"mb-4\">\n            <label htmlFor=\"tags\" className=\"block text-sm font-medium text-gray-600 mb-1\">\n              Tags (comma separated)\n            </label>\n            <input id=\"tags\" type=\"text\" value={tags} onChange={e => setTags(e.target.value)} className=\"w-full px-3 py-2 border border-gray-200 rounded-md bg-white focus:outline-none focus:ring-1 focus:ring-blue-500\" placeholder=\"web3, payments, community\" />\n            <p className=\"mt-1 text-xs text-gray-500\">Tags help others discover your project</p>\n          </div>\n          \n          <div className=\"mb-4\">\n            <div className=\"flex items-center\">\n              <input id=\"isPublic\" type=\"checkbox\" checked={isPublic} onChange={e => setIsPublic(e.target.checked)} className=\"w-4 h-4 text-blue-500 border-gray-300 rounded focus:ring-blue-500\" />\n              <label htmlFor=\"isPublic\" className=\"ml-2 block text-sm text-gray-600\">\n                Make this project public (visible in Explore)\n              </label>\n            </div>\n          </div>\n          \n          <div className=\"mb-6\">\n            <div className=\"flex items-center mb-2\">\n              <input id=\"isGated\" type=\"checkbox\" checked={isGated} onChange={e => setIsGated(e.target.checked)} className=\"w-4 h-4 text-blue-500 border-gray-300 rounded focus:ring-blue-500\" />\n              <label htmlFor=\"isGated\" className=\"ml-2 block text-sm text-gray-600\">\n                Require payment to join (gated project)\n              </label>\n            </div>\n            \n            {isGated && <div className=\"pl-6 mt-2 grid grid-cols-1 md:grid-cols-2 gap-4\">\n                <div>\n                  <label htmlFor=\"entryFee\" className=\"block text-sm font-medium text-gray-600 mb-1\">\n                    Entry Fee\n                  </label>\n                  <input id=\"entryFee\" type=\"number\" step=\"0.001\" min=\"0\" value={entryFee} onChange={e => setEntryFee(e.target.value)} className=\"w-full px-3 py-2 border border-gray-200 rounded-md bg-white focus:outline-none focus:ring-1 focus:ring-blue-500\" placeholder=\"0.1\" required={isGated} />\n                </div>\n                <div>\n                  <label htmlFor=\"entryFeeToken\" className=\"block text-sm font-medium text-gray-600 mb-1\">\n                    Token\n                  </label>\n                  <select id=\"entryFeeToken\" value={entryFeeToken} onChange={e => setEntryFeeToken(e.target.value)} className=\"w-full px-3 py-2 border border-gray-200 rounded-md bg-white focus:outline-none focus:ring-1 focus:ring-blue-500\">\n                    <option value=\"SOL\">SOL</option>\n                    <option value=\"USDC\">USDC</option>\n                  </select>\n                </div>\n              </div>}\n          </div>\n          \n          <div className=\"flex justify-end\">\n            <button type=\"button\" onClick={() => setCurrentView('projects')} className=\"py-2 px-4 mr-2 bg-gray-100 hover:bg-gray-200 text-gray-700 rounded-md transition-colors duration-200\">\n              Cancel\n            </button>\n            <button type=\"submit\" disabled={isCreating} className=\"py-2 px-4 bg-blue-500 hover:bg-blue-600 text-white rounded-md transition-colors duration-200 flex items-center justify-center\">\n              {isCreating ? <div className=\"w-5 h-5 border-t-2 border-white rounded-full animate-spin\"></div> : 'Create Project'}\n            </button>\n          </div>\n        </form>\n      </div>\n    </div>;\n}\nfunction ProjectDetailView({\n  user,\n  setCurrentView\n}) {\n  const {\n    devbaseClient,\n    userWallet\n  } = useDevapp();\n  const [project, setProject] = useState(null);\n  const [members, setMembers] = useState([]);\n  const [transactions, setTransactions] = useState([]);\n  const [isLoading, setIsLoading] = useState(true);\n  const [stats, setStats] = useState({\n    totalPaid: 0,\n    transactionCount: 0,\n    memberCount: 0\n  });\n  const [isAdmin, setIsAdmin] = useState(false);\n  const [newMemberEmail, setNewMemberEmail] = useState('');\n  const [isAddingMember, setIsAddingMember] = useState(false);\n  const [editingMember, setEditingMember] = useState(null);\n  const [selectedRole, setSelectedRole] = useState('member');\n  const [isChangingRole, setIsChangingRole] = useState(false);\n  const [isPublic, setIsPublic] = useState(false);\n  const [isToggling, setIsToggling] = useState(false);\n  const [topEarners, setTopEarners] = useState([]);\n  const [usernameMap, setUsernameMap] = useState({});\n  useEffect(() => {\n    const fetchProjectData = async () => {\n      try {\n        setIsLoading(true);\n        const selectedProject = JSON.parse(sessionStorage.getItem('selectedProject'));\n        if (!selectedProject) {\n          setCurrentView('projects');\n          return;\n        }\n        setProject(selectedProject);\n        setIsPublic(selectedProject.isPublic || false);\n        const projectMembers = await devbaseClient.listEntities('projectMembers', {\n          projectId: selectedProject.id\n        });\n        setMembers(projectMembers);\n        const userMembership = projectMembers.find(m => m.userId === userWallet);\n        setIsAdmin(userMembership && userMembership.role === 'admin');\n        const projectTransactions = await devbaseClient.listEntities('transactions', {\n          projectId: selectedProject.id\n        });\n        setTransactions(projectTransactions);\n        const totalPaid = projectTransactions.reduce((sum, tx) => sum + tx.amount, 0);\n        setStats({\n          totalPaid,\n          transactionCount: projectTransactions.length,\n          memberCount: projectMembers.length\n        });\n        const earningsByUser = {};\n        projectTransactions.forEach(tx => {\n          if (!earningsByUser[tx.toUserId]) {\n            earningsByUser[tx.toUserId] = 0;\n          }\n          earningsByUser[tx.toUserId] += tx.amount;\n        });\n        const earnersArray = Object.entries(earningsByUser).map(([userId, amount]) => ({\n          userId,\n          amount\n        })).sort((a, b) => b.amount - a.amount).slice(0, 5);\n        setTopEarners(earnersArray);\n        const userIds = earnersArray.map(earner => earner.userId);\n        if (userIds.length > 0) {\n          const users = await devbaseClient.listEntities('users');\n          const usernameMapping = {};\n          users.forEach(user => {\n            if (userIds.includes(user.userId)) {\n              usernameMapping[user.userId] = user.username;\n            }\n          });\n          setUsernameMap(usernameMapping);\n        }\n      } catch (error) {\n        console.error('Error fetching project data:', error);\n      } finally {\n        setIsLoading(false);\n      }\n    };\n    fetchProjectData();\n  }, [devbaseClient, userWallet, setCurrentView]);\n  const addMember = async e => {\n    e.preventDefault();\n    if (!newMemberEmail) {\n      alert('Please enter a member email or wallet address');\n      return;\n    }\n    setIsAddingMember(true);\n    try {\n      const users = await devbaseClient.listEntities('users', {\n        email: newMemberEmail\n      });\n      if (users.length === 0) {\n        alert('User not found. Please check the email or wallet address.');\n        setIsAddingMember(false);\n        return;\n      }\n      const newUser = users[0];\n      const existingMember = members.find(m => m.userId === newUser.userId);\n      if (existingMember) {\n        alert('This user is already a member of the project.');\n        setIsAddingMember(false);\n        return;\n      }\n      const memberData = {\n        projectId: project.id,\n        role: 'member',\n        userId: newUser.userId\n      };\n      const newMember = await devbaseClient.createEntity('projectMembers', memberData);\n      setMembers([...members, newMember]);\n      setStats(prev => ({\n        ...prev,\n        memberCount: prev.memberCount + 1\n      }));\n      setNewMemberEmail('');\n    } catch (error) {\n      console.error('Error adding member:', error);\n      alert('Failed to add member. Please try again.');\n    } finally {\n      setIsAddingMember(false);\n    }\n  };\n  const removeMember = async memberId => {\n    if (!confirm('Are you sure you want to remove this member?')) return;\n    try {\n      await devbaseClient.deleteEntity('projectMembers', memberId);\n      setMembers(members.filter(m => m.id !== memberId));\n      setStats(prev => ({\n        ...prev,\n        memberCount: prev.memberCount - 1\n      }));\n    } catch (error) {\n      console.error('Error removing member:', error);\n      alert('Failed to remove member. Please try again.');\n    }\n  };\n  const changeRole = async () => {\n    if (!editingMember) return;\n    setIsChangingRole(true);\n    try {\n      setMembers(members.map(m => m.id === editingMember.id ? {\n        ...m,\n        role: selectedRole\n      } : m));\n      setEditingMember(null);\n    } catch (error) {\n      console.error('Error changing role:', error);\n      alert('Failed to change role. Please try again.');\n    } finally {\n      setIsChangingRole(false);\n    }\n  };\n  const handleNewPayment = () => {\n    sessionStorage.setItem('paymentProject', JSON.stringify(project));\n    setCurrentView('new-payment');\n  };\n  if (isLoading) {\n    return <div className=\"h-full flex items-center justify-center\">\n        <div className=\"w-8 h-8 border-t-2 border-blue-500 border-solid rounded-full animate-spin\"></div>\n      </div>;\n  }\n  if (!project) {\n    return <div className=\"h-full flex items-center justify-center\">\n        <div className=\"text-center\">\n          <p className=\"text-gray-500 mb-4\">Project not found</p>\n          <button onClick={() => setCurrentView('projects')} className=\"py-2 px-4 bg-blue-500 hover:bg-blue-600 text-white rounded-md transition-colors duration-200\">\n            Go to Projects\n          </button>\n        </div>\n      </div>;\n  }\n  const togglePublicStatus = async () => {\n    if (!isAdmin) return;\n    setIsToggling(true);\n    try {\n      await devbaseClient.updateEntity('projects', project.id, {\n        isPublic: !isPublic\n      });\n      setIsPublic(!isPublic);\n      setProject({\n        ...project,\n        isPublic: !isPublic\n      });\n    } catch (error) {\n      console.error('Error toggling project visibility:', error);\n      alert('Failed to update project visibility. Please try again.');\n    } finally {\n      setIsToggling(false);\n    }\n  };\n  return <div className=\"h-full\">\n      <header className=\"mb-8\">\n        <button onClick={() => setCurrentView('projects')} className=\"mb-4 text-blue-500 hover:text-blue-600 flex items-center\">\n          <ArrowRight size={16} className=\"mr-1 transform rotate-180\" />\n          Back to Projects\n        </button>\n        <div className=\"flex items-center justify-between\">\n          <div>\n            <h1 className=\"text-2xl font-light mb-2\">{project.name}</h1>\n            <p className=\"text-gray-500\">{project.description || 'No description'}</p>\n          </div>\n          <button onClick={handleNewPayment} className=\"py-2 px-4 bg-blue-500 hover:bg-blue-600 text-white rounded-md transition-colors duration-200 flex items-center\">\n            <Send size={16} className=\"mr-2\" />\n            New Payment\n          </button>\n        </div>\n      </header>\n\n      <div className=\"grid grid-cols-1 md:grid-cols-3 gap-6 mb-8\">\n        <StatCard title=\"Total Paid\" value={`${stats.totalPaid.toFixed(2)}`} icon={<Send size={20} className=\"text-blue-500\" />} />\n        <StatCard title=\"Transactions\" value={stats.transactionCount} icon={<History size={20} className=\"text-purple-500\" />} />\n        <StatCard title=\"Members\" value={stats.memberCount} icon={<Users size={20} className=\"text-amber-500\" />} />\n      </div>\n\n      <div className=\"grid grid-cols-1 lg:grid-cols-2 gap-8\">\n        <div>\n          <div className=\"bg-white rounded-lg shadow-sm p-6 mb-6\">\n            <div className=\"flex items-center justify-between mb-4\">\n              <h2 className=\"text-lg font-medium\">Project Members</h2>\n            </div>\n            \n            {members.length === 0 ? <div className=\"text-center py-6 text-gray-500\">\n                No members yet\n              </div> : <div className=\"space-y-3\">\n                {members.map(member => <div key={member.id} className=\"flex items-center justify-between p-3 bg-gray-50 rounded-md\">\n                    <div className=\"flex items-center\">\n                      <div className=\"w-8 h-8 rounded-full bg-blue-100 flex items-center justify-center mr-3\">\n                        <User size={14} className=\"text-blue-500\" />\n                      </div>\n                      <div>\n                        <div className=\"text-sm font-medium truncate max-w-[150px]\">\n                          {member.userId.slice(0, 6)}...{member.userId.slice(-4)}\n                        </div>\n                        <div className=\"text-xs text-gray-500\">\n                          {member.role}\n                        </div>\n                      </div>\n                    </div>\n                    {isAdmin && member.userId !== userWallet && <div className=\"flex items-center space-x-2\">\n                        <button onClick={() => {\n                  setEditingMember(member);\n                  setSelectedRole(member.role);\n                }} className=\"text-blue-400 hover:text-blue-500 p-1 rounded hover:bg-blue-50\">\n                          <Award size={14} />\n                        </button>\n                        <button onClick={() => removeMember(member.id)} className=\"text-gray-400 hover:text-red-500 p-1 rounded hover:bg-red-50\">\n                          <X size={14} />\n                        </button>\n                      </div>}\n                  </div>)}\n              </div>}\n            \n            {editingMember && <div className=\"fixed inset-0 bg-black/50 flex items-center justify-center z-50\">\n                <div className=\"bg-white rounded-lg p-6 max-w-md w-full mx-4\">\n                  <h3 className=\"text-lg font-medium mb-4\">Change Member Role</h3>\n                  <div className=\"mb-4\">\n                    <label className=\"block text-sm font-medium text-gray-600 mb-1\">\n                      Member\n                    </label>\n                    <div className=\"px-3 py-2 bg-gray-50 rounded-md text-gray-700\">\n                      {editingMember.userId.slice(0, 6)}...{editingMember.userId.slice(-4)}\n                    </div>\n                  </div>\n                  <div className=\"mb-6\">\n                    <label className=\"block text-sm font-medium text-gray-600 mb-1\">\n                      Role\n                    </label>\n                    <select value={selectedRole} onChange={e => setSelectedRole(e.target.value)} className=\"w-full px-3 py-2 border border-gray-200 rounded-md bg-white focus:outline-none focus:ring-1 focus:ring-blue-500\">\n                      <option value=\"admin\">Admin</option>\n                      <option value=\"mod\">Moderator</option>\n                      <option value=\"developer\">Developer</option>\n                      <option value=\"designer\">Designer</option>\n                      <option value=\"employee\">Employee</option>\n                      <option value=\"intern\">Intern</option>\n                      <option value=\"member\">Member</option>\n                    </select>\n                  </div>\n                  <div className=\"flex justify-end space-x-2\">\n                    <button onClick={() => setEditingMember(null)} className=\"py-2 px-4 bg-gray-100 hover:bg-gray-200 text-gray-700 rounded-md transition-colors duration-200\">\n                      Cancel\n                    </button>\n                    <button onClick={changeRole} disabled={isChangingRole} className=\"py-2 px-4 bg-blue-500 hover:bg-blue-600 text-white rounded-md transition-colors duration-200 flex items-center justify-center\">\n                      {isChangingRole ? <div className=\"w-5 h-5 border-t-2 border-white rounded-full animate-spin\"></div> : 'Save'}\n                    </button>\n                  </div>\n                </div>\n              </div>}\n            \n            {isAdmin && <div className=\"mt-4 pt-4 border-t border-gray-100\">\n                <form onSubmit={addMember} className=\"flex\">\n                  <input type=\"text\" value={newMemberEmail} onChange={e => setNewMemberEmail(e.target.value)} className=\"flex-grow px-3 py-2 border border-gray-200 rounded-l-md bg-white focus:outline-none focus:ring-1 focus:ring-blue-500\" placeholder=\"Email or wallet address\" />\n                  <button type=\"submit\" disabled={isAddingMember} className=\"py-2 px-4 bg-blue-500 hover:bg-blue-600 text-white rounded-r-md transition-colors duration-200\">\n                    {isAddingMember ? <div className=\"w-5 h-5 border-t-2 border-white rounded-full animate-spin\"></div> : 'Add'}\n                  </button>\n                </form>\n              </div>}\n          </div>\n          \n          <div className=\"bg-white rounded-lg shadow-sm p-6\">\n            <div className=\"flex items-center justify-between mb-4\">\n              <h2 className=\"text-lg font-medium\">Project Settings</h2>\n            </div>\n            \n            {isAdmin && <div className=\"p-3 bg-gray-50 rounded-md mb-4\">\n                <div className=\"flex items-center justify-between\">\n                  <div>\n                    <div className=\"text-sm font-medium\">Project Visibility</div>\n                    <div className=\"text-xs text-gray-500\">Make project visible in Explore page</div>\n                  </div>\n                  <div className=\"flex items-center\">\n                    <button onClick={togglePublicStatus} disabled={isToggling} className={`relative inline-flex items-center h-6 rounded-full w-11 transition-colors focus:outline-none ${isPublic ? 'bg-blue-500' : 'bg-gray-300'}`}>\n                      <span className={`inline-block w-4 h-4 transform transition-transform bg-white rounded-full ${isPublic ? 'translate-x-6' : 'translate-x-1'}`} />\n                    </button>\n                    <span className=\"ml-2 text-sm text-gray-600\">{isPublic ? 'Public' : 'Private'}</span>\n                  </div>\n                </div>\n              </div>}\n            \n            <div className=\"p-3 bg-gray-50 rounded-md mb-4\">\n              <div className=\"flex items-center justify-between\">\n                <div className=\"text-sm font-medium\">Wallet Address</div>\n                <div className=\"flex items-center\">\n                  <div className=\"text-sm text-gray-500 mr-2 truncate max-w-[180px]\">\n                    {project.walletAddress}\n                  </div>\n                  <button onClick={() => navigator.clipboard.writeText(project.walletAddress)} className=\"text-blue-500 hover:text-blue-600\">\n                    <Copy size={14} />\n                  </button>\n                </div>\n              </div>\n            </div>\n            \n            <div className=\"flex justify-end\">\n              <button onClick={() => window.open(`https://explorer.solana.com/address/${project.walletAddress}`, '_blank')} className=\"text-sm text-blue-500 hover:text-blue-600 flex items-center\">\n                <Eye size={14} className=\"mr-1\" />\n                View on Explorer\n              </button>\n            </div>\n          </div>\n        </div>\n        \n        <div>\n          <div className=\"space-y-6\">\n            <div className=\"bg-white rounded-lg shadow-sm p-6\">\n              <div className=\"flex items-center justify-between mb-4\">\n                <h2 className=\"text-lg font-medium\">Recent Transactions</h2>\n              </div>\n              \n              {transactions.length === 0 ? <div className=\"text-center py-6 text-gray-500\">\n                  No transactions yet\n                </div> : <div className=\"space-y-3\">\n                  {transactions.sort((a, b) => new Date(b.createdAt) - new Date(a.createdAt)).slice(0, 5).map(tx => <div key={tx.id} className=\"flex items-center justify-between py-3 border-b border-gray-100 last:border-0\">\n                        <div className=\"flex items-center\">\n                          <div className=\"w-8 h-8 rounded-full bg-blue-100 flex items-center justify-center mr-3\">\n                            <Send size={14} className=\"text-blue-500\" />\n                          </div>\n                          <div>\n                            <div className=\"text-sm font-medium\">\n                              Payment\n                            </div>\n                            <div className=\"text-xs text-gray-500\">\n                              {new Date(tx.createdAt).toLocaleDateString()}\n                            </div>\n                          </div>\n                        </div>\n                        <div className=\"text-right\">\n                          <div className=\"text-sm font-medium\">\n                            {tx.amount.toFixed(4)} {tx.token}\n                          </div>\n                          <div className=\"text-xs text-gray-500\">\n                            {tx.status}\n                          </div>\n                        </div>\n                      </div>)}\n                </div>}\n            </div>\n            \n            {topEarners.length > 0 && <div className=\"bg-white rounded-lg shadow-sm p-6\">\n                <div className=\"mb-4\">\n                  <h2 className=\"text-lg font-medium\">Top Earners</h2>\n                </div>\n                \n                <div className=\"space-y-3\">\n                  {topEarners.map((earner, index) => <div key={earner.userId} className=\"flex items-center justify-between py-3 border-b border-gray-100 last:border-0\">\n                      <div className=\"flex items-center\">\n                        <div className={`w-8 h-8 rounded-full flex items-center justify-center mr-3 ${index === 0 ? 'bg-amber-100 text-amber-500' : index === 1 ? 'bg-gray-100 text-gray-500' : index === 2 ? 'bg-orange-100 text-orange-500' : 'bg-blue-100 text-blue-500'}`}>\n                          {index < 3 ? <div className=\"font-bold\">{index + 1}</div> : <User size={14} />}\n                        </div>\n                        <div>\n                          <div className=\"text-sm font-medium\">\n                            {usernameMap[earner.userId] || `${earner.userId.slice(0, 6)}...${earner.userId.slice(-4)}`}\n                          </div>\n                          <div className=\"text-xs text-gray-500\">\n                            {earner.userId === project.userId ? 'Project Owner' : 'Member'}\n                          </div>\n                        </div>\n                      </div>\n                      <div className=\"text-right font-medium text-green-600\">\n                        +{earner.amount.toFixed(4)}\n                      </div>\n                    </div>)}\n                </div>\n              </div>}\n          </div>\n        </div>\n      </div>\n    </div>;\n}\nfunction TransactionsView({\n  user\n}) {\n  const {\n    devbaseClient,\n    userWallet\n  } = useDevapp();\n  const [transactions, setTransactions] = useState([]);\n  const [isLoading, setIsLoading] = useState(true);\n  const [filter, setFilter] = useState('all');\n  useEffect(() => {\n    const fetchTransactions = async () => {\n      try {\n        setIsLoading(true);\n        const allTransactions = await devbaseClient.listEntities('transactions');\n        const userTransactions = allTransactions.filter(tx => tx.fromUserId === userWallet || tx.toUserId === userWallet);\n        setTransactions(userTransactions);\n      } catch (error) {\n        console.error('Error fetching transactions:', error);\n      } finally {\n        setIsLoading(false);\n      }\n    };\n    fetchTransactions();\n  }, [devbaseClient, userWallet]);\n  const filteredTransactions = transactions.filter(tx => {\n    if (filter === 'sent') return tx.fromUserId === userWallet;\n    if (filter === 'received') return tx.toUserId === userWallet;\n    return true;\n  });\n  if (isLoading) {\n    return <div className=\"h-full flex items-center justify-center\">\n        <div className=\"w-8 h-8 border-t-2 border-blue-500 border-solid rounded-full animate-spin\"></div>\n      </div>;\n  }\n  return <div className=\"h-full\">\n      <header className=\"mb-8\">\n        <h1 className=\"text-2xl font-light mb-2\">Transaction History</h1>\n        <p className=\"text-gray-500\">View your payment transactions</p>\n      </header>\n\n      <div className=\"bg-white rounded-lg shadow-sm mb-8\">\n        <div className=\"flex border-b border-gray-200\">\n          <button className={`px-6 py-3 text-sm font-medium ${filter === 'all' ? 'text-blue-600 border-b-2 border-blue-500' : 'text-gray-500 hover:text-gray-700'}`} onClick={() => setFilter('all')}>\n            All\n          </button>\n          <button className={`px-6 py-3 text-sm font-medium ${filter === 'sent' ? 'text-blue-600 border-b-2 border-blue-500' : 'text-gray-500 hover:text-gray-700'}`} onClick={() => setFilter('sent')}>\n            Sent\n          </button>\n          <button className={`px-6 py-3 text-sm font-medium ${filter === 'received' ? 'text-blue-600 border-b-2 border-blue-500' : 'text-gray-500 hover:text-gray-700'}`} onClick={() => setFilter('received')}>\n            Received\n          </button>\n        </div>\n        \n        <div className=\"p-6\">\n          {filteredTransactions.length === 0 ? <div className=\"text-center py-6 text-gray-500\">\n              No transactions found\n            </div> : <div className=\"overflow-x-auto\">\n              <table className=\"w-full min-w-full table-auto\">\n                <thead>\n                  <tr className=\"text-left text-gray-500 text-sm\">\n                    <th className=\"pb-3 font-medium\">Date</th>\n                    <th className=\"pb-3 font-medium\">Type</th>\n                    <th className=\"pb-3 font-medium\">Amount</th>\n                    <th className=\"pb-3 font-medium\">Status</th>\n                    <th className=\"pb-3 font-medium\">Description</th>\n                  </tr>\n                </thead>\n                <tbody>\n                  {filteredTransactions.sort((a, b) => new Date(b.createdAt) - new Date(a.createdAt)).map(tx => <tr key={tx.id} className=\"border-t border-gray-100\">\n                        <td className=\"py-3 text-sm\">\n                          {new Date(tx.createdAt).toLocaleDateString()}\n                        </td>\n                        <td className=\"py-3\">\n                          <div className=\"flex items-center\">\n                            {tx.fromUserId === userWallet ? <div className=\"w-8 h-8 rounded-full bg-red-100 flex items-center justify-center mr-2\">\n                                <Send size={14} className=\"text-red-500\" />\n                              </div> : <div className=\"w-8 h-8 rounded-full bg-green-100 flex items-center justify-center mr-2\">\n                                <Download size={14} className=\"text-green-500\" />\n                              </div>}\n                            <span className=\"text-sm\">\n                              {tx.fromUserId === userWallet ? 'Sent' : 'Received'}\n                            </span>\n                          </div>\n                        </td>\n                        <td className=\"py-3\">\n                          <span className={`text-sm font-medium ${tx.fromUserId === userWallet ? 'text-red-500' : 'text-green-500'}`}>\n                            {tx.fromUserId === userWallet ? '-' : '+'}{tx.amount.toFixed(4)} {tx.token}\n                          </span>\n                        </td>\n                        <td className=\"py-3\">\n                          <span className={`text-xs px-2 py-1 rounded-full ${tx.status === 'completed' ? 'bg-green-100 text-green-800' : tx.status === 'pending' ? 'bg-yellow-100 text-yellow-800' : 'bg-gray-100 text-gray-800'}`}>\n                            {tx.status}\n                          </span>\n                        </td>\n                        <td className=\"py-3 text-sm text-gray-500 max-w-[200px] truncate\">\n                          {tx.description || 'No description'}\n                        </td>\n                      </tr>)}\n                </tbody>\n              </table>\n            </div>}\n        </div>\n      </div>\n    </div>;\n}\nfunction ExploreView({\n  user,\n  setCurrentView\n}) {\n  const {\n    devbaseClient,\n    userWallet\n  } = useDevapp();\n  const [publicProjects, setPublicProjects] = useState([]);\n  const [userMemberships, setUserMemberships] = useState([]);\n  const [isLoading, setIsLoading] = useState(true);\n  const [searchTerm, setSearchTerm] = useState('');\n  const [selectedTag, setSelectedTag] = useState('');\n  const [allTags, setAllTags] = useState([]);\n  const [joinInProgress, setJoinInProgress] = useState('');\n  const [paymentError, setPaymentError] = useState('');\n  const [balance, setBalance] = useState({\n    SOL: 0,\n    USDC: 0\n  });\n  useEffect(() => {\n    const fetchPublicProjects = async () => {\n      try {\n        setIsLoading(true);\n        const projects = await devbaseClient.listEntities('projects', {\n          isPublic: true\n        });\n        const memberships = await devbaseClient.listEntities('projectMembers', {\n          userId: userWallet\n        });\n        setUserMemberships(memberships);\n        setPublicProjects(projects);\n        const tagSet = new Set();\n        projects.forEach(project => {\n          if (project.tags) {\n            project.tags.split(',').forEach(tag => {\n              tagSet.add(tag.trim());\n            });\n          }\n        });\n        setAllTags(Array.from(tagSet).sort());\n        const currentBalance = await fetchCurrentBalance();\n        setBalance(currentBalance);\n      } catch (error) {\n        console.error('Error fetching public projects:', error);\n      } finally {\n        setIsLoading(false);\n      }\n    };\n    fetchPublicProjects();\n  }, [devbaseClient, userWallet]);\n  const fetchCurrentBalance = async () => {\n    try {\n      const deposits = await devbaseClient.listEntities('deposits', {\n        userId: userWallet\n      });\n      const withdrawals = await devbaseClient.listEntities('withdrawals', {\n        userId: userWallet\n      });\n      const transactions = await devbaseClient.listEntities('transactions');\n      const completedTransactions = transactions.filter(tx => tx.status === 'completed');\n      const solDeposits = deposits.filter(d => d.token === 'SOL').reduce((sum, d) => sum + d.amount, 0);\n      const solReceivedTransactions = completedTransactions.filter(tx => tx.toUserId === userWallet && tx.token === 'SOL').reduce((sum, tx) => sum + tx.amount, 0);\n      const solWithdrawals = withdrawals.filter(w => w.token === 'SOL').reduce((sum, w) => sum + w.amount, 0);\n      const solSentTransactions = completedTransactions.filter(tx => tx.fromUserId === userWallet && tx.token === 'SOL').reduce((sum, tx) => sum + tx.amount, 0);\n      const usdcDeposits = deposits.filter(d => d.token === 'USDC').reduce((sum, d) => sum + d.amount, 0);\n      const usdcReceivedTransactions = completedTransactions.filter(tx => tx.toUserId === userWallet && tx.token === 'USDC').reduce((sum, tx) => sum + tx.amount, 0);\n      const usdcWithdrawals = withdrawals.filter(w => w.token === 'USDC').reduce((sum, w) => sum + w.amount, 0);\n      const usdcSentTransactions = completedTransactions.filter(tx => tx.fromUserId === userWallet && tx.token === 'USDC').reduce((sum, tx) => sum + tx.amount, 0);\n      return {\n        SOL: Math.max(0, solDeposits + solReceivedTransactions - solWithdrawals - solSentTransactions),\n        USDC: Math.max(0, usdcDeposits + usdcReceivedTransactions - usdcWithdrawals - usdcSentTransactions)\n      };\n    } catch (error) {\n      console.error('Error fetching current balance:', error);\n      return {\n        SOL: 0,\n        USDC: 0\n      };\n    }\n  };\n  const joinProject = async project => {\n    try {\n      const isAlreadyMember = userMemberships.some(m => m.projectId === project.id);\n      if (isAlreadyMember) {\n        alert('You are already a member of this project!');\n        return;\n      }\n      if (project.entryFee && project.entryFee > 0) {\n        setJoinInProgress(project.id);\n        setPaymentError('');\n        if (balance[project.entryFeeToken] < project.entryFee) {\n          setPaymentError(`Insufficient ${project.entryFeeToken} balance. You have ${balance[project.entryFeeToken].toFixed(4)} ${project.entryFeeToken} but need ${project.entryFee} ${project.entryFeeToken}.`);\n          setTimeout(() => setPaymentError(''), 5000);\n          setJoinInProgress('');\n          return;\n        }\n        const paymentData = {\n          fromUserId: userWallet,\n          toUserId: project.userId,\n          projectId: project.id,\n          amount: project.entryFee,\n          token: project.entryFeeToken,\n          status: 'completed',\n          description: `Entry fee for project: ${project.name}`\n        };\n        await devbaseClient.createEntity('transactions', paymentData);\n      }\n      const memberData = {\n        projectId: project.id,\n        role: 'member'\n      };\n      const newMembership = await devbaseClient.createEntity('projectMembers', memberData);\n      setUserMemberships([...userMemberships, newMembership]);\n      if (project.entryFee && project.entryFee > 0) {\n        setBalance({\n          ...balance,\n          [project.entryFeeToken]: balance[project.entryFeeToken] - project.entryFee\n        });\n      }\n      alert('Successfully joined the project! Go to Projects to view it.');\n    } catch (error) {\n      console.error('Error joining project:', error);\n      alert('Failed to join the project. Please try again.');\n    } finally {\n      setJoinInProgress('');\n    }\n  };\n  const filteredProjects = publicProjects.filter(project => {\n    const matchesSearch = project.name.toLowerCase().includes(searchTerm.toLowerCase()) || project.description && project.description.toLowerCase().includes(searchTerm.toLowerCase());\n    const matchesTag = !selectedTag || project.tags && project.tags.toLowerCase().split(',').map(t => t.trim()).includes(selectedTag.toLowerCase());\n    return matchesSearch && matchesTag;\n  });\n  const isProjectMember = projectId => {\n    return userMemberships.some(m => m.projectId === projectId);\n  };\n  if (isLoading) {\n    return <div className=\"h-full flex items-center justify-center\">\n        <div className=\"w-8 h-8 border-t-2 border-blue-500 border-solid rounded-full animate-spin\"></div>\n      </div>;\n  }\n  return <div className=\"h-full\">\n      <header className=\"mb-8\">\n        <h1 className=\"text-2xl font-light mb-2\">Explore Projects</h1>\n        <p className=\"text-gray-500\">Discover and join public payment projects</p>\n      </header>\n\n      <div className=\"mb-6 space-y-3\">\n        <div className=\"relative\">\n          <div className=\"absolute inset-y-0 left-0 pl-3 flex items-center pointer-events-none\">\n            <Search size={18} className=\"text-gray-400\" />\n          </div>\n          <input type=\"text\" placeholder=\"Search projects...\" className=\"w-full pl-10 pr-4 py-2 border border-gray-200 rounded-md bg-white focus:outline-none focus:ring-1 focus:ring-blue-500\" value={searchTerm} onChange={e => setSearchTerm(e.target.value)} />\n        </div>\n        \n        {allTags.length > 0 && <div className=\"flex flex-wrap gap-2\">\n            <button onClick={() => setSelectedTag('')} className={`px-3 py-1 text-sm rounded-full ${selectedTag === '' ? 'bg-blue-500 text-white' : 'bg-gray-100 text-gray-700 hover:bg-gray-200'}`}>\n              All\n            </button>\n            \n            {allTags.map(tag => <button key={tag} onClick={() => setSelectedTag(tag)} className={`px-3 py-1 text-sm rounded-full ${selectedTag === tag ? 'bg-blue-500 text-white' : 'bg-gray-100 text-gray-700 hover:bg-gray-200'}`}>\n                {tag}\n              </button>)}\n          </div>}\n        \n        {paymentError && <div className=\"p-3 bg-red-50 border border-red-200 rounded-md flex items-start\">\n            <AlertTriangle size={16} className=\"text-red-500 mr-2 mt-0.5\" />\n            <div className=\"text-sm text-red-600\">{paymentError}</div>\n          </div>}\n      </div>\n\n      {filteredProjects.length === 0 ? <div className=\"bg-white rounded-lg shadow-sm p-8 text-center\">\n          <h2 className=\"text-lg font-medium mb-4\">No Public Projects Found</h2>\n          <p className=\"text-gray-500 mb-6\">\n            {searchTerm ? `No projects matching \"${searchTerm}\"` : \"There are no public projects available\"}\n          </p>\n          <button onClick={() => setCurrentView('new-project')} className=\"py-2 px-4 bg-blue-500 hover:bg-blue-600 text-white rounded-md transition-colors duration-200 inline-flex items-center\">\n            <Plus size={16} className=\"mr-2\" />\n            Create Project\n          </button>\n        </div> : <div className=\"grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6\">\n          {filteredProjects.map(project => <motion.div key={project.id} className=\"bg-white rounded-lg shadow-sm p-6\" whileHover={{\n        y: -5,\n        boxShadow: '0 10px 15px -3px rgba(0, 0, 0, 0.1)'\n      }} transition={{\n        duration: 0.2\n      }}>\n              <div className=\"flex items-center justify-between mb-1\">\n                <h2 className=\"text-lg font-medium\">{project.name}</h2>\n                {isProjectMember(project.id) && <span className=\"px-2 py-0.5 bg-green-100 text-green-800 text-xs rounded-full\">Joined</span>}\n              </div>\n              \n              <p className=\"text-gray-500 text-sm mb-3 line-clamp-2\">\n                {project.description || 'No description'}\n              </p>\n              \n              {project.tags && <div className=\"flex flex-wrap gap-1 mb-3\">\n                  {project.tags.split(',').map(tag => <span key={tag.trim()} className=\"px-2 py-0.5 bg-gray-100 text-gray-600 text-xs rounded-full\">\n                      {tag.trim()}\n                    </span>)}\n                </div>}\n              \n              <div className=\"flex items-center justify-between\">\n                <div className=\"flex items-center text-sm text-gray-500\">\n                  <Users size={16} className=\"mr-1\" />\n                  <span>Public Project</span>\n                  \n                  {project.entryFee > 0 && <span className=\"ml-2 flex items-center text-amber-600\">\n                      <DollarSign size={14} className=\"mr-0.5\" />\n                      <span>{project.entryFee} {project.entryFeeToken}</span>\n                    </span>}\n                </div>\n                \n                {isProjectMember(project.id) ? <button onClick={() => {\n            sessionStorage.setItem('selectedProject', JSON.stringify(project));\n            setCurrentView('project-detail');\n          }} className=\"px-3 py-1 bg-gray-100 hover:bg-gray-200 text-gray-700 rounded-md text-sm transition-colors duration-200\">\n                    View\n                  </button> : <button onClick={() => joinProject(project)} disabled={joinInProgress === project.id} className={`px-3 py-1 ${joinInProgress === project.id ? 'bg-blue-300' : 'bg-blue-500 hover:bg-blue-600'} text-white rounded-md text-sm transition-colors duration-200 flex items-center`}>\n                    {joinInProgress === project.id ? <>\n                        <div className=\"w-3 h-3 border-t-2 border-white rounded-full animate-spin mr-1\"></div>\n                        Joining...\n                      </> : <>\n                        {project.entryFee > 0 ? `Join (${project.entryFee} ${project.entryFeeToken})` : 'Join'}\n                      </>}\n                  </button>}\n              </div>\n            </motion.div>)}\n        </div>}\n    </div>;\n}\nfunction RecurringView({\n  user,\n  setCurrentView\n}) {\n  const {\n    devbaseClient,\n    userWallet\n  } = useDevapp();\n  const [recurringPayments, setRecurringPayments] = useState([]);\n  const [isLoading, setIsLoading] = useState(true);\n  const [stats, setStats] = useState({\n    toBePaid: 0,\n    totalPaid: 0\n  });\n  const [groupedPayments, setGroupedPayments] = useState({});\n  const [projectDetails, setProjectDetails] = useState({});\n  useEffect(() => {\n    const fetchRecurringPayments = async () => {\n      try {\n        setIsLoading(true);\n        const payments = await devbaseClient.listEntities('recurringPayments', {\n          fromUserId: userWallet\n        });\n        const transactions = await devbaseClient.listEntities('transactions');\n        const recurringTransactions = transactions.filter(tx => tx.fromUserId === userWallet && tx.status === 'completed' && tx.description && tx.description.includes('Recurring'));\n        const totalPaid = recurringTransactions.reduce((sum, tx) => sum + tx.amount, 0);\n        const toBePaid = payments.filter(p => p.isActive).reduce((sum, p) => sum + p.amount, 0);\n        setStats({\n          toBePaid,\n          totalPaid\n        });\n        const grouped = {};\n        const projectIds = [...new Set(payments.filter(p => p.projectId).map(p => p.projectId))];\n        if (projectIds.length > 0) {\n          const projectPromises = projectIds.map(id => devbaseClient.getEntity('projects', id));\n          const projectsData = await Promise.all(projectPromises);\n          const projectMap = {};\n          projectsData.forEach(project => {\n            if (project) {\n              projectMap[project.id] = project;\n            }\n          });\n          setProjectDetails(projectMap);\n        }\n        payments.forEach(payment => {\n          const key = payment.projectId || 'personal';\n          if (!grouped[key]) {\n            grouped[key] = [];\n          }\n          grouped[key].push(payment);\n        });\n        setGroupedPayments(grouped);\n        setRecurringPayments(payments);\n      } catch (error) {\n        console.error('Error fetching recurring payments:', error);\n      } finally {\n        setIsLoading(false);\n      }\n    };\n    fetchRecurringPayments();\n  }, [devbaseClient, userWallet]);\n  const togglePaymentStatus = async (paymentId, isActive) => {\n    try {\n      await devbaseClient.updateEntity('recurringPayments', paymentId, {\n        isActive: !isActive\n      });\n      const updatedPayments = recurringPayments.map(p => p.id === paymentId ? {\n        ...p,\n        isActive: !isActive\n      } : p);\n      const payment = recurringPayments.find(p => p.id === paymentId);\n      const amountChange = payment ? payment.amount : 0;\n      setStats(prev => ({\n        ...prev,\n        toBePaid: isActive ? prev.toBePaid - amountChange : prev.toBePaid + amountChange\n      }));\n      const updatedGrouped = {\n        ...groupedPayments\n      };\n      Object.keys(updatedGrouped).forEach(key => {\n        updatedGrouped[key] = updatedGrouped[key].map(p => p.id === paymentId ? {\n          ...p,\n          isActive: !isActive\n        } : p);\n      });\n      setGroupedPayments(updatedGrouped);\n      setRecurringPayments(updatedPayments);\n    } catch (error) {\n      console.error('Error toggling payment status:', error);\n      alert('Failed to update payment status. Please try again.');\n    }\n  };\n  const cancelPayment = async paymentId => {\n    try {\n      await devbaseClient.deleteEntity('recurringPayments', paymentId);\n      const payment = recurringPayments.find(p => p.id === paymentId);\n      const updatedPayments = recurringPayments.filter(p => p.id !== paymentId);\n      if (payment && payment.isActive) {\n        setStats(prev => ({\n          ...prev,\n          toBePaid: prev.toBePaid - payment.amount\n        }));\n      }\n      const updatedGrouped = {\n        ...groupedPayments\n      };\n      Object.keys(updatedGrouped).forEach(key => {\n        updatedGrouped[key] = updatedGrouped[key].filter(p => p.id !== paymentId);\n        if (updatedGrouped[key].length === 0) {\n          delete updatedGrouped[key];\n        }\n      });\n      setGroupedPayments(updatedGrouped);\n      setRecurringPayments(updatedPayments);\n    } catch (error) {\n      console.error('Error canceling payment:', error);\n      alert('Failed to cancel payment. Please try again.');\n    }\n  };\n  const cancelAllProjectPayments = async projectId => {\n    try {\n      const paymentsToCancel = groupedPayments[projectId];\n      if (!paymentsToCancel || paymentsToCancel.length === 0) return;\n      const activeAmount = paymentsToCancel.filter(p => p.isActive).reduce((sum, p) => sum + p.amount, 0);\n      const deletePromises = paymentsToCancel.map(payment => devbaseClient.deleteEntity('recurringPayments', payment.id));\n      await Promise.all(deletePromises);\n      setStats(prev => ({\n        ...prev,\n        toBePaid: prev.toBePaid - activeAmount\n      }));\n      const updatedPayments = recurringPayments.filter(p => p.projectId !== projectId);\n      const updatedGrouped = {\n        ...groupedPayments\n      };\n      delete updatedGrouped[projectId];\n      setGroupedPayments(updatedGrouped);\n      setRecurringPayments(updatedPayments);\n    } catch (error) {\n      console.error('Error canceling project payments:', error);\n      alert('Failed to cancel payments. Please try again.');\n    }\n  };\n  if (isLoading) {\n    return <div className=\"h-full flex items-center justify-center\">\n        <div className=\"w-8 h-8 border-t-2 border-blue-500 border-solid rounded-full animate-spin\"></div>\n      </div>;\n  }\n  return <div className=\"h-full\">\n      <header className=\"mb-8 flex flex-col md:flex-row md:items-center md:justify-between\">\n        <div>\n          <h1 className=\"text-2xl font-light mb-2\">Recurring Payments</h1>\n          <p className=\"text-gray-500\">Manage your automated payment schedules</p>\n        </div>\n        <button onClick={() => {\n        sessionStorage.removeItem('paymentProject');\n        sessionStorage.setItem('recurringPreselected', 'true');\n        setCurrentView('new-payment');\n      }} className=\"mt-4 md:mt-0 py-2 px-4 bg-blue-500 hover:bg-blue-600 text-white rounded-md transition-colors duration-200 flex items-center justify-center\">\n          <Plus size={16} className=\"mr-2\" />\n          New Recurring Payment\n        </button>\n      </header>\n      \n      <div className=\"grid grid-cols-1 md:grid-cols-2 gap-6 mb-8\">\n        <StatCard title=\"To Be Paid\" value={`${stats.toBePaid.toFixed(2)}`} icon={<Clock size={20} className=\"text-amber-500\" />} />\n        <StatCard title=\"Total Paid\" value={`${stats.totalPaid.toFixed(2)}`} icon={<RefreshCw size={20} className=\"text-green-500\" />} />\n      </div>\n\n      {Object.keys(groupedPayments).length === 0 ? <div className=\"bg-white rounded-lg shadow-sm p-8 text-center\">\n          <h2 className=\"text-lg font-medium mb-4\">No Recurring Payments</h2>\n          <p className=\"text-gray-500 mb-6\">Set up recurring payments to automate your transfers</p>\n          <button onClick={() => {\n        sessionStorage.removeItem('paymentProject');\n        sessionStorage.setItem('recurringPreselected', 'true');\n        setCurrentView('new-payment');\n      }} className=\"py-2 px-4 bg-blue-500 hover:bg-blue-600 text-white rounded-md transition-colors duration-200 inline-flex items-center\">\n            <Plus size={16} className=\"mr-2\" />\n            New Recurring Payment\n          </button>\n        </div> : Object.keys(groupedPayments).map(projectId => {\n      const payments = groupedPayments[projectId];\n      if (!payments || payments.length === 0) return null;\n      const activeAmount = payments.filter(p => p.isActive).reduce((sum, p) => sum + p.amount, 0);\n      const projectName = projectId !== 'personal' && projectDetails[projectId] ? projectDetails[projectId].name : 'Personal Payments';\n      return <div key={projectId} className=\"bg-white rounded-lg shadow-sm p-6 mb-6\">\n              <div className=\"flex items-center justify-between mb-4\">\n                <div className=\"flex items-center\">\n                  {projectId !== 'personal' ? <Users size={18} className=\"text-blue-500 mr-2\" /> : <User size={18} className=\"text-purple-500 mr-2\" />}\n                  <h2 className=\"text-lg font-medium\">{projectName}</h2>\n                </div>\n                \n                {payments.length > 1 && <button onClick={() => cancelAllProjectPayments(projectId)} className=\"text-sm text-red-500 hover:text-red-600 flex items-center\">\n                    <X size={14} className=\"mr-1\" />\n                    Cancel All\n                  </button>}\n              </div>\n              \n              <div className=\"mb-4 p-3 bg-gray-50 rounded-md\">\n                <div className=\"flex justify-between items-center\">\n                  <div className=\"text-sm\">Total To Pay:</div>\n                  <div className=\"text-sm font-medium\">\n                    {activeAmount.toFixed(4)} {payments[0]?.token || ''}\n                  </div>\n                </div>\n              </div>\n              \n              <div className=\"overflow-x-auto\">\n                <table className=\"w-full min-w-full table-auto\">\n                  <thead>\n                    <tr className=\"text-left text-gray-500 text-sm\">\n                      <th className=\"pb-3 font-medium\">Recipient</th>\n                      <th className=\"pb-3 font-medium\">Amount</th>\n                      <th className=\"pb-3 font-medium\">Frequency</th>\n                      <th className=\"pb-3 font-medium\">Next Payment</th>\n                      <th className=\"pb-3 font-medium\">Status</th>\n                      <th className=\"pb-3 font-medium\">Actions</th>\n                    </tr>\n                  </thead>\n                  <tbody>\n                    {payments.map(payment => <tr key={payment.id} className=\"border-t border-gray-100\">\n                        <td className=\"py-3 text-sm font-medium\">\n                          {payment.toUserId.slice(0, 6)}...{payment.toUserId.slice(-4)}\n                        </td>\n                        <td className=\"py-3 text-sm\">\n                          {payment.amount.toFixed(4)} {payment.token}\n                        </td>\n                        <td className=\"py-3 text-sm\">\n                          {payment.frequency}\n                        </td>\n                        <td className=\"py-3 text-sm\">\n                          {new Date(payment.nextPaymentDate).toLocaleDateString()}\n                        </td>\n                        <td className=\"py-3\">\n                          <span className={`text-xs px-2 py-1 rounded-full ${payment.isActive ? 'bg-green-100 text-green-800' : 'bg-gray-100 text-gray-800'}`}>\n                            {payment.isActive ? 'Active' : 'Paused'}\n                          </span>\n                        </td>\n                        <td className=\"py-3\">\n                          <div className=\"flex items-center space-x-2\">\n                            <button onClick={() => togglePaymentStatus(payment.id, payment.isActive)} className={`p-1 rounded ${payment.isActive ? 'text-yellow-500 hover:bg-yellow-50' : 'text-green-500 hover:bg-green-50'}`} title={payment.isActive ? 'Pause' : 'Activate'}>\n                              {payment.isActive ? <Clock size={18} /> : <Play size={18} />}\n                            </button>\n                            <button onClick={() => cancelPayment(payment.id)} className=\"p-1 text-red-500 hover:bg-red-50 rounded\" title=\"Cancel\">\n                              <X size={18} />\n                            </button>\n                          </div>\n                        </td>\n                      </tr>)}\n                  </tbody>\n                </table>\n              </div>\n            </div>;\n    })}\n    </div>;\n}\nfunction NewPaymentView({\n  user,\n  setCurrentView\n}) {\n  const {\n    devbaseClient,\n    userWallet\n  } = useDevapp();\n  const [recipient, setRecipient] = useState('');\n  const [amount, setAmount] = useState('');\n  const [token, setToken] = useState('SOL');\n  const [description, setDescription] = useState('');\n  const [isRecurring, setIsRecurring] = useState(false);\n  const [frequency, setFrequency] = useState('weekly');\n  const [startDate, setStartDate] = useState('');\n  const [isSending, setIsSending] = useState(false);\n  const [paymentError, setPaymentError] = useState(null);\n  const [balance, setBalance] = useState({\n    SOL: 0,\n    USDC: 0\n  });\n  const [project, setProject] = useState(null);\n  const [searchResults, setSearchResults] = useState([]);\n  const [isSearching, setIsSearching] = useState(false);\n  const [userProjects, setUserProjects] = useState([]);\n  const [selectedProject, setSelectedProject] = useState('');\n  useEffect(() => {\n    const fetchData = async () => {\n      try {\n        const paymentProject = sessionStorage.getItem('paymentProject');\n        if (paymentProject) {\n          const parsedProject = JSON.parse(paymentProject);\n          setProject(parsedProject);\n          setSelectedProject(parsedProject.id);\n        }\n        const recurringPreselected = sessionStorage.getItem('recurringPreselected');\n        if (recurringPreselected === 'true') {\n          setIsRecurring(true);\n          sessionStorage.removeItem('recurringPreselected');\n        }\n        const currentBalance = await fetchCurrentBalance();\n        setBalance(currentBalance);\n        const today = new Date();\n        const formattedDate = today.toISOString().split('T')[0];\n        setStartDate(formattedDate);\n        const memberships = await devbaseClient.listEntities('projectMembers', {\n          userId: userWallet\n        });\n        if (memberships.length > 0) {\n          const projectIds = memberships.map(m => m.projectId);\n          const projectPromises = projectIds.map(id => devbaseClient.getEntity('projects', id));\n          const projectsData = await Promise.all(projectPromises);\n          setUserProjects(projectsData.filter(p => p !== null));\n        }\n      } catch (error) {\n        console.error('Error fetching data:', error);\n      }\n    };\n    fetchData();\n  }, [devbaseClient, userWallet]);\n  const searchUsers = async term => {\n    if (!term || term.length < 3) {\n      setSearchResults([]);\n      return;\n    }\n    setIsSearching(true);\n    try {\n      const users = await devbaseClient.listEntities('users');\n      const filteredUsers = users.filter(user => user.username.toLowerCase().includes(term.toLowerCase()) && user.userId !== userWallet).slice(0, 5);\n      setSearchResults(filteredUsers);\n    } catch (error) {\n      console.error('Error searching users:', error);\n    } finally {\n      setIsSearching(false);\n    }\n  };\n  const selectUser = user => {\n    setRecipient(user.userId);\n    setSearchResults([]);\n  };\n  const handleSelectProject = projectId => {\n    setSelectedProject(projectId);\n    if (projectId) {\n      const selected = userProjects.find(p => p.id === projectId);\n      setProject(selected);\n    } else {\n      setProject(null);\n    }\n  };\n  const handleSendPayment = async e => {\n    e.preventDefault();\n    setPaymentError(null);\n    if (!recipient) {\n      setPaymentError('Please enter a recipient address');\n      return;\n    }\n    if (!amount || isNaN(parseFloat(amount)) || parseFloat(amount) <= 0) {\n      setPaymentError('Please enter a valid amount');\n      return;\n    }\n    const paymentAmount = parseFloat(amount);\n    const currentBalance = await fetchCurrentBalance();\n    setBalance(currentBalance);\n    if (paymentAmount > currentBalance[token]) {\n      setPaymentError(`Insufficient ${token} balance. You have ${currentBalance[token].toFixed(4)} ${token} available.`);\n      return;\n    }\n    try {\n      setIsSending(true);\n      const projectId = selectedProject || (project ? project.id : null);\n      if (isRecurring) {\n        const nextPaymentDate = new Date(startDate);\n        const recurringPaymentData = {\n          fromUserId: userWallet,\n          toUserId: recipient,\n          projectId,\n          amount: paymentAmount,\n          token,\n          frequency,\n          nextPaymentDate: nextPaymentDate.toISOString(),\n          description: description || `Recurring ${frequency} payment`,\n          isActive: true\n        };\n        await devbaseClient.createEntity('recurringPayments', recurringPaymentData);\n        setCurrentView('recurring');\n      } else {\n        const paymentData = {\n          fromUserId: userWallet,\n          toUserId: recipient,\n          projectId,\n          amount: paymentAmount,\n          token,\n          status: 'completed',\n          description: description || 'Direct payment'\n        };\n        await devbaseClient.createEntity('transactions', paymentData);\n        const updatedBalance = await fetchCurrentBalance();\n        setBalance(updatedBalance);\n        const notification = document.createElement('div');\n        notification.className = 'fixed top-4 right-4 z-50 bg-green-100 border border-green-400 text-green-700 px-4 py-3 rounded flex items-center shadow-lg max-w-sm';\n        notification.innerHTML = `<svg xmlns=\"http://www.w3.org/2000/svg\" class=\"h-5 w-5 mr-2\" viewBox=\"0 0 20 20\" fill=\"currentColor\">\n          <path fill-rule=\"evenodd\" d=\"M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z\" clip-rule=\"evenodd\" />\n        </svg>\n        <p>Successfully sent ${paymentAmount} ${token} to recipient</p>`;\n        document.body.appendChild(notification);\n        setTimeout(() => {\n          document.body.removeChild(notification);\n        }, 4000);\n        if (project) {\n          setCurrentView('project-detail');\n        } else {\n          setCurrentView('transactions');\n        }\n      }\n    } catch (error) {\n      console.error('Error sending payment:', error);\n      setPaymentError(error.message || 'Failed to send payment. Please try again.');\n      if (!isRecurring) {\n        setBalance(prev => ({\n          ...prev,\n          [token]: prev[token] + paymentAmount\n        }));\n      }\n    } finally {\n      setIsSending(false);\n    }\n  };\n  const fetchCurrentBalance = async () => {\n    try {\n      const deposits = await devbaseClient.listEntities('deposits', {\n        userId: userWallet\n      });\n      const withdrawals = await devbaseClient.listEntities('withdrawals', {\n        userId: userWallet\n      });\n      const transactions = await devbaseClient.listEntities('transactions');\n      const completedTransactions = transactions.filter(tx => tx.status === 'completed');\n      const solDeposits = deposits.filter(d => d.token === 'SOL').reduce((sum, d) => sum + d.amount, 0);\n      const solReceivedTransactions = completedTransactions.filter(tx => tx.toUserId === userWallet && tx.token === 'SOL').reduce((sum, tx) => sum + tx.amount, 0);\n      const solWithdrawals = withdrawals.filter(w => w.token === 'SOL').reduce((sum, w) => sum + w.amount, 0);\n      const solSentTransactions = completedTransactions.filter(tx => tx.fromUserId === userWallet && tx.token === 'SOL').reduce((sum, tx) => sum + tx.amount, 0);\n      const usdcDeposits = deposits.filter(d => d.token === 'USDC').reduce((sum, d) => sum + d.amount, 0);\n      const usdcReceivedTransactions = completedTransactions.filter(tx => tx.toUserId === userWallet && tx.token === 'USDC').reduce((sum, tx) => sum + tx.amount, 0);\n      const usdcWithdrawals = withdrawals.filter(w => w.token === 'USDC').reduce((sum, w) => sum + w.amount, 0);\n      const usdcSentTransactions = completedTransactions.filter(tx => tx.fromUserId === userWallet && tx.token === 'USDC').reduce((sum, tx) => sum + tx.amount, 0);\n      const solBalance = Math.max(0, solDeposits + solReceivedTransactions - solWithdrawals - solSentTransactions);\n      const usdcBalance = Math.max(0, usdcDeposits + usdcReceivedTransactions - usdcWithdrawals - usdcSentTransactions);\n      return {\n        SOL: solBalance,\n        USDC: usdcBalance\n      };\n    } catch (error) {\n      console.error('Error fetching current balance:', error);\n      return {\n        SOL: Math.max(0, balance.SOL),\n        USDC: Math.max(0, balance.USDC)\n      };\n    }\n  };\n  return <div className=\"h-full\">\n      <header className=\"mb-8\">\n        <button onClick={() => project ? setCurrentView('project-detail') : setCurrentView('dashboard')} className=\"mb-4 text-blue-500 hover:text-blue-600 flex items-center\">\n          <ArrowRight size={16} className=\"mr-1 transform rotate-180\" />\n          Back\n        </button>\n        <h1 className=\"text-2xl font-light mb-2\">New Payment</h1>\n        <p className=\"text-gray-500\">\n          {project ? `Send payment from ${project.name}` : 'Send a payment to another user'}\n        </p>\n      </header>\n\n      <div className=\"bg-white rounded-lg shadow-sm p-6\">\n        <form onSubmit={handleSendPayment}>\n          <div className=\"mb-4\">\n            <label htmlFor=\"project\" className=\"block text-sm font-medium text-gray-600 mb-1\">\n              Associate with Project (optional)\n            </label>\n            <select id=\"project\" value={selectedProject} onChange={e => handleSelectProject(e.target.value)} className=\"w-full px-3 py-2 border border-gray-200 rounded-md bg-white focus:outline-none focus:ring-1 focus:ring-blue-500\">\n              <option value=\"\">No Project (Personal Payment)</option>\n              {userProjects.map(project => <option key={project.id} value={project.id}>{project.name}</option>)}\n            </select>\n            <p className=\"mt-1 text-xs text-gray-500\">\n              Associating payments with projects helps track expenses and contributions\n            </p>\n          </div>\n          \n          <div className=\"mb-4 relative\">\n            <label htmlFor=\"recipient\" className=\"block text-sm font-medium text-gray-600 mb-1\">\n              Recipient\n            </label>\n            <div className=\"relative\">\n              <input id=\"recipient\" type=\"text\" value={recipient} onChange={e => {\n              setRecipient(e.target.value);\n              searchUsers(e.target.value);\n            }} className=\"w-full px-3 py-2 border border-gray-200 rounded-md bg-white focus:outline-none focus:ring-1 focus:ring-blue-500\" placeholder=\"Wallet address or username\" required />\n              {isSearching && <div className=\"absolute right-3 top-1/2 transform -translate-y-1/2\">\n                  <div className=\"w-4 h-4 border-t-2 border-blue-500 border-solid rounded-full animate-spin\"></div>\n                </div>}\n            </div>\n            \n            {searchResults.length > 0 && <div className=\"absolute z-10 w-full mt-1 bg-white border border-gray-200 rounded-md shadow-lg\">\n                {searchResults.map(user => <button key={user.id} type=\"button\" onClick={() => selectUser(user)} className=\"w-full px-3 py-2 text-left hover:bg-gray-50 flex items-center\">\n                    <User size={14} className=\"mr-2 text-gray-400\" />\n                    <span className=\"text-sm font-medium\">{user.username}</span>\n                  </button>)}\n              </div>}\n          </div>\n          \n          <div className=\"grid grid-cols-1 md:grid-cols-2 gap-4 mb-4\">\n            <div>\n              <label htmlFor=\"amount\" className=\"block text-sm font-medium text-gray-600 mb-1\">\n                Amount\n              </label>\n              <input id=\"amount\" type=\"number\" step=\"0.001\" min=\"0\" max={balance[token]} value={amount} onChange={e => {\n              setAmount(e.target.value);\n              if (parseFloat(e.target.value) > balance[token]) {\n                setPaymentError(`Amount exceeds your available ${token} balance`);\n              } else {\n                setPaymentError(null);\n              }\n            }} className={`w-full px-3 py-2 border ${parseFloat(amount) > balance[token] ? 'border-red-300' : 'border-gray-200'} rounded-md bg-white focus:outline-none focus:ring-1 focus:ring-blue-500`} placeholder=\"0.00\" required />\n              <div className=\"flex items-center mt-1\">\n                <div className={`text-xs ${parseFloat(amount) > balance[token] ? 'text-red-500 font-medium' : 'text-gray-500'}`}>\n                  {parseFloat(amount) > balance[token] ? <div className=\"flex items-center\">\n                      <AlertCircle size={12} className=\"mr-1\" />\n                      Insufficient balance\n                    </div> : `Balance: ${balance[token].toFixed(4)} ${token}`}\n                </div>\n              </div>\n            </div>\n            <div>\n              <label htmlFor=\"token\" className=\"block text-sm font-medium text-gray-600 mb-1\">\n                Token\n              </label>\n              <select id=\"token\" value={token} onChange={e => setToken(e.target.value)} className=\"w-full px-3 py-2 border border-gray-200 rounded-md bg-white focus:outline-none focus:ring-1 focus:ring-blue-500\">\n                <option value=\"SOL\">SOL</option>\n                <option value=\"USDC\">USDC</option>\n              </select>\n            </div>\n          </div>\n          \n          <div className=\"mb-4\">\n            <label htmlFor=\"description\" className=\"block text-sm font-medium text-gray-600 mb-1\">\n              Description (optional)\n            </label>\n            <textarea id=\"description\" value={description} onChange={e => setDescription(e.target.value)} className=\"w-full px-3 py-2 border border-gray-200 rounded-md bg-white focus:outline-none focus:ring-1 focus:ring-blue-500\" placeholder=\"What's this payment for?\" rows={2} />\n          </div>\n          \n          <div className=\"mb-6\">\n            <div className=\"flex items-center mb-2\">\n              <input id=\"isRecurring\" type=\"checkbox\" checked={isRecurring} onChange={e => setIsRecurring(e.target.checked)} className=\"w-4 h-4 text-blue-500 border-gray-300 rounded focus:ring-blue-500\" />\n              <label htmlFor=\"isRecurring\" className=\"ml-2 block text-sm text-gray-600\">\n                Set up recurring payment\n              </label>\n            </div>\n            \n            {isRecurring && <div className=\"pl-6 mt-2 space-y-3\">\n                <div>\n                  <label htmlFor=\"frequency\" className=\"block text-sm font-medium text-gray-600 mb-1\">\n                    Frequency\n                  </label>\n                  <select id=\"frequency\" value={frequency} onChange={e => setFrequency(e.target.value)} className=\"w-full px-3 py-2 border border-gray-200 rounded-md bg-white focus:outline-none focus:ring-1 focus:ring-blue-500\">\n                    <option value=\"daily\">Daily</option>\n                    <option value=\"weekly\">Weekly</option>\n                    <option value=\"monthly\">Monthly</option>\n                  </select>\n                </div>\n                <div>\n                  <label htmlFor=\"startDate\" className=\"block text-sm font-medium text-gray-600 mb-1\">\n                    Start Date\n                  </label>\n                  <input id=\"startDate\" type=\"date\" value={startDate} onChange={e => setStartDate(e.target.value)} className=\"w-full px-3 py-2 border border-gray-200 rounded-md bg-white focus:outline-none focus:ring-1 focus:ring-blue-500\" min={new Date().toISOString().split('T')[0]} required={isRecurring} />\n                </div>\n              </div>}\n          </div>\n          \n          {paymentError && <div className=\"mb-4 p-3 bg-red-50 border border-red-200 rounded-md flex items-start\">\n              <AlertTriangle size={16} className=\"text-red-500 mr-2 mt-0.5\" />\n              <div className=\"text-sm text-red-600\">{paymentError}</div>\n            </div>}\n          \n          <div className=\"flex justify-end\">\n            <button type=\"button\" onClick={() => project ? setCurrentView('project-detail') : setCurrentView('dashboard')} className=\"py-2 px-4 mr-2 bg-gray-100 hover:bg-gray-200 text-gray-700 rounded-md transition-colors duration-200\" disabled={isSending}>\n              Cancel\n            </button>\n            <button type=\"submit\" disabled={isSending} className=\"py-2 px-4 bg-blue-500 hover:bg-blue-600 text-white rounded-md transition-colors duration-200 flex items-center justify-center\">\n              {isSending ? <div className=\"w-5 h-5 border-t-2 border-white rounded-full animate-spin\"></div> : <>\n                  {isRecurring ? 'Schedule Payment' : 'Send Payment'}\n                </>}\n            </button>\n          </div>\n        </form>\n      </div>\n    </div>;\n}\nfunction ProfileView({\n  user,\n  setUser\n}) {\n  const {\n    devbaseClient,\n    userWallet\n  } = useDevapp();\n  const [username, setUsername] = useState(user.username);\n  const [email, setEmail] = useState(user.email || '');\n  const [isEditing, setIsEditing] = useState(false);\n  const [isSaving, setIsSaving] = useState(false);\n  const [isResetting, setIsResetting] = useState(false);\n  const [showResetConfirm, setShowResetConfirm] = useState(false);\n  const handleSave = async () => {\n    if (!username) {\n      alert('Username is required');\n      return;\n    }\n    setIsSaving(true);\n    try {\n      if (username !== user.username) {\n        const existingUsers = await devbaseClient.listEntities('users', {\n          username\n        });\n        if (existingUsers.length > 0 && existingUsers[0].userId !== userWallet) {\n          alert('Username already taken');\n          setIsSaving(false);\n          return;\n        }\n      }\n      const updatedUser = await devbaseClient.updateEntity('users', user.id, {\n        username,\n        email\n      });\n      setUser(updatedUser);\n      setIsEditing(false);\n    } catch (error) {\n      console.error('Error updating profile:', error);\n      alert('Failed to update profile. Please try again.');\n    } finally {\n      setIsSaving(false);\n    }\n  };\n  const resetAllData = async () => {\n    if (!confirm(\"Are you absolutely sure? This will permanently delete ALL your data and cannot be undone.\")) {\n      return;\n    }\n    setIsResetting(true);\n    try {\n      await devbaseClient.createEntity('transactions', {\n        fromUserId: userWallet,\n        toUserId: userWallet,\n        amount: 0,\n        token: 'NONE',\n        status: 'cleared',\n        description: 'All transaction history cleared'\n      });\n      const deleteEntityById = async (entityName, id) => {\n        try {\n          await devbaseClient.deleteEntity(entityName, id);\n          return true;\n        } catch (error) {\n          console.error(`Error deleting ${entityName} with ID ${id}:`, error);\n          return false;\n        }\n      };\n      const deleteUserEntities = async (entityName, filter = {}) => {\n        try {\n          const entities = await devbaseClient.listEntities(entityName, filter);\n          console.log(`Found ${entities.length} ${entityName} to delete`);\n          let deletedCount = 0;\n          for (const entity of entities) {\n            const success = await deleteEntityById(entityName, entity.id);\n            if (success) deletedCount++;\n          }\n          console.log(`Successfully deleted ${deletedCount} of ${entities.length} ${entityName}`);\n        } catch (error) {\n          console.error(`Error processing ${entityName}:`, error);\n        }\n      };\n      console.log('Skipping deposits - cannot be deleted per schema security rules');\n      console.log('Skipping withdrawals - cannot be deleted per schema security rules');\n      await deleteUserEntities('projectMembers', {\n        userId: userWallet\n      });\n      await deleteUserEntities('recurringPayments', {\n        fromUserId: userWallet\n      });\n      await deleteUserEntities('recurringPayments', {\n        toUserId: userWallet\n      });\n      await deleteUserEntities('projects', {\n        userId: userWallet\n      });\n      alert('All your data has been reset successfully!');\n      window.location.reload();\n    } catch (error) {\n      console.error('Error resetting user data:', error);\n      alert('There was an error resetting your data. Please try again.');\n    } finally {\n      setIsResetting(false);\n      setShowResetConfirm(false);\n    }\n  };\n  const connectTwitter = () => {\n    if (userWallet) {\n      const twitterLoginUrl = `https://oauth.dev.fun/twitter/login/bd8aa3e4e33c247ad607/${userWallet}`;\n      openLink(twitterLoginUrl);\n    }\n  };\n  return <div className=\"h-full\">\n      <header className=\"mb-8\">\n        <h1 className=\"text-2xl font-light mb-2\">Your Profile</h1>\n        <p className=\"text-gray-500\">Manage your account details</p>\n      </header>\n\n      <div className=\"bg-white rounded-lg shadow-sm p-6 mb-8\">\n        <div className=\"flex justify-between items-center mb-6\">\n          <h2 className=\"text-lg font-medium\">Account Information</h2>\n          {!isEditing ? <button onClick={() => setIsEditing(true)} className=\"text-blue-500 hover:text-blue-600 text-sm\">\n              Edit\n            </button> : <div className=\"flex space-x-2\">\n              <button onClick={() => {\n            setIsEditing(false);\n            setUsername(user.username);\n            setEmail(user.email || '');\n          }} className=\"text-gray-500 hover:text-gray-600 text-sm\">\n                Cancel\n              </button>\n              <button onClick={handleSave} disabled={isSaving} className=\"text-blue-500 hover:text-blue-600 text-sm flex items-center\">\n                {isSaving ? <div className=\"w-4 h-4 border-t-2 border-blue-500 border-solid rounded-full animate-spin mr-1\"></div> : null}\n                Save\n              </button>\n            </div>}\n        </div>\n\n        <div className=\"space-y-4\">\n          <div>\n            <label className=\"block text-sm font-medium text-gray-600 mb-1\">\n              Username\n            </label>\n            {isEditing ? <input type=\"text\" value={username} onChange={e => setUsername(e.target.value)} className=\"w-full px-3 py-2 border border-gray-200 rounded-md bg-white focus:outline-none focus:ring-1 focus:ring-blue-500\" /> : <div className=\"px-3 py-2 bg-gray-50 rounded-md text-gray-700\">\n                {user.username}\n              </div>}\n          </div>\n          \n          <div>\n            <label className=\"block text-sm font-medium text-gray-600 mb-1\">\n              Email\n            </label>\n            {isEditing ? <input type=\"email\" value={email} onChange={e => setEmail(e.target.value)} className=\"w-full px-3 py-2 border border-gray-200 rounded-md bg-white focus:outline-none focus:ring-1 focus:ring-blue-500\" /> : <div className=\"px-3 py-2 bg-gray-50 rounded-md text-gray-700\">\n                {user.email || 'Not set'}\n              </div>}\n          </div>\n          \n          <div>\n            <label className=\"block text-sm font-medium text-gray-600 mb-1\">\n              Wallet Address\n            </label>\n          <div className=\"px-3 py-2 bg-gray-50 rounded-md text-gray-700 flex items-center justify-between\">\n                      <span className=\"truncate\">{userWallet}</span>\n                      <button onClick={() => {\n              navigator.clipboard.writeText(userWallet);\n              alert('Wallet address copied to clipboard');\n            }} className=\"text-blue-500 hover:text-blue-600\">\n                        <Copy size={14} />\n                      </button>\n                    </div>\n          </div>\n        </div>\n      </div>\n\n      <div className=\"bg-white rounded-lg shadow-sm p-6 mb-8\">\n        <h2 className=\"text-lg font-medium mb-6\">Connected Accounts</h2>\n        \n        <div className=\"space-y-4\">\n          <div className=\"flex items-center justify-between p-3 bg-gray-50 rounded-md\">\n            <div className=\"flex items-center\">\n              <Award size={18} className=\"text-blue-500 mr-3\" />\n              <div>\n                <div className=\"text-sm font-medium\">Twitter</div>\n                <div className=\"text-xs text-gray-500\">Connect your Twitter account</div>\n              </div>\n            </div>\n            <button onClick={connectTwitter} className=\"px-3 py-1 bg-blue-500 hover:bg-blue-600 text-white rounded-md text-sm transition-colors duration-200\">\n              Connect\n            </button>\n          </div>\n          \n          <div className=\"flex items-center justify-between p-3 bg-gray-50 rounded-md\">\n            <div className=\"flex items-center\">\n              <Award size={18} className=\"text-purple-500 mr-3\" />\n              <div>\n                <div className=\"text-sm font-medium\">Discord</div>\n                <div className=\"text-xs text-gray-500\">Connect your Discord account</div>\n              </div>\n            </div>\n            <button onClick={() => alert('Discord connection will be available soon!')} className=\"px-3 py-1 bg-purple-500 hover:bg-purple-600 text-white rounded-md text-sm transition-colors duration-200\">\n              Connect\n            </button>\n          </div>\n        </div>\n      </div>\n\n      <div className=\"bg-white rounded-lg shadow-sm p-6 border-l-4 border-red-500\">\n        <h2 className=\"text-lg font-medium mb-4 text-red-600\">Danger Zone</h2>\n        <p className=\"text-gray-600 mb-6\">\n          Actions here are irreversible. Please be certain before proceeding.\n        </p>\n        \n        <div className=\"flex justify-between items-center p-4 bg-red-50 rounded-md\">\n          <div>\n            <h3 className=\"text-md font-medium text-red-700\">Reset All Data</h3>\n            <p className=\"text-sm text-red-600\">\n              This will delete all your transactions, projects, recurring payments, and wallet activity.\n            </p>\n          </div>\n          <button onClick={() => setShowResetConfirm(true)} disabled={isResetting} className=\"py-2 px-4 bg-red-100 hover:bg-red-200 text-red-700 rounded-md transition-colors duration-200 flex items-center\">\n            {isResetting ? <div className=\"w-5 h-5 border-t-2 border-red-500 border-solid rounded-full animate-spin mr-2\"></div> : <Trash2 size={16} className=\"mr-2\" />}\n            Reset Data\n          </button>\n        </div>\n      </div>\n\n      {showResetConfirm && <div className=\"fixed inset-0 bg-black/50 flex items-center justify-center z-50\">\n          <div className=\"bg-white rounded-lg p-6 max-w-md w-full mx-4\">\n            <div className=\"text-center mb-4\">\n              <div className=\"inline-flex items-center justify-center w-12 h-12 rounded-full bg-red-100 text-red-500 mb-4\">\n                <AlertTriangle size={24} />\n              </div>\n              <h3 className=\"text-lg font-medium text-red-700\">Confirm Data Reset</h3>\n            </div>\n            \n            <p className=\"text-gray-600 mb-6 text-center\">\n              You are about to delete <strong>ALL</strong> your data including transactions, projects, and payment records. This action cannot be undone.\n            </p>\n            \n            <div className=\"flex justify-center space-x-4\">\n              <button onClick={() => setShowResetConfirm(false)} className=\"py-2 px-4 bg-gray-100 hover:bg-gray-200 text-gray-700 rounded-md transition-colors duration-200\">\n                Cancel\n              </button>\n              <button onClick={resetAllData} disabled={isResetting} className=\"py-2 px-4 bg-red-500 hover:bg-red-600 text-white rounded-md transition-colors duration-200 flex items-center\">\n                {isResetting ? <div className=\"w-5 h-5 border-t-2 border-white rounded-full animate-spin mr-2\"></div> : null}\n                Yes, Reset Everything\n              </button>\n            </div>\n          </div>\n        </div>}\n    </div>;\n}\nfunction Play({\n  size,\n  className\n}) {\n  return <svg xmlns=\"http://www.w3.org/2000/svg\" width={size} height={size} viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" strokeWidth=\"2\" strokeLinecap=\"round\" strokeLinejoin=\"round\" className={className}>\n      <polygon points=\"5 3 19 12 5 21 5 3\"></polygon>\n    </svg>;\n}","packageJson","{\"dependencies\":{\"react\":\"18.2.0\",\"framer-motion\":\"10.16.4\",\"lucide-react\":\"0.441.0\",\"@devfunlabs/web-sdk\":\"0.5.5\",\"react-router-dom\":\"6.18.0\",\"recharts\":\"2.8.0\"}}","appFunctions",[],"token",{"_20":81,"_82":83,"_84":85,"_86":87,"_88":89,"_90":91,"_92":93,"_94":95,"_96":97,"_98":99,"_100":101,"_62":102,"_72":19},"vibecode.fun","symbol","rick","image","https://pump.mypinata.cloud/ipfs/QmdiVAhd3kBiCNCc559HT5hQGeoP742a9BGML1qod45c8j?img-width=256&img-dpr=2","website","https://dev.fun/p/93870176b0b04c03015d","twitter","https://x.com/crabbylions/status/1898018929869832580?s=46","marketcap",186453.914,"volumeIn24h",31869.37,"price",0.0001862,"priceChangeIn24h",-8.08,"devCount",67,"appCount",97,20137,"upstreamApp","isLordOfDev","analytics",[107,111,113,115,117,119,121,123,125,127,129,131,133,135,137,138],{"_108":109,"_110":60},"day","2025-09-24","runCount",{"_108":112,"_110":60},"2025-09-25",{"_108":114,"_110":60},"2025-09-26",{"_108":116,"_110":60},"2025-09-27",{"_108":118,"_110":60},"2025-09-28",{"_108":120,"_110":60},"2025-09-29",{"_108":122,"_110":60},"2025-09-30",{"_108":124,"_110":60},"2025-10-01",{"_108":126,"_110":60},"2025-10-02",{"_108":128,"_110":60},"2025-10-03",{"_108":130,"_110":60},"2025-10-04",{"_108":132,"_110":60},"2025-10-05",{"_108":134,"_110":60},"2025-10-06",{"_108":136,"_110":60},"2025-10-07",{"_108":128,"_110":42},{"_108":136,"_110":42},"snapshot","ogImage","https://cdn.dev.fun/og/image/bd8aa3e4e33c247ad607/fd0cdcbe.webp","isDevbase","project",{"_14":19,"_84":85,"_20":81,"_145":146,"_22":147},"oneliner","Refactor your true self","\"The true disruption would be a code editor that suggests refactoring based on zen principles... When you strip away the unnecessary dependencies, what remains is pure function ...this isn't an app, it's a portal to your authentic self.\"","commitDetail","livestream","actionData","errors"]
</article></body></html>