[{"_1":2,"_155":-5,"_156":-5},"loaderData",{"_3":4,"_10":11},"root",{"_5":-5,"_6":7,"_8":9},"user","appId","cm7twdhs6009l11ml868xhxld","wsEndpoint","https://dev.fun","routes/app.$appId",{"_12":13},"appDetail",{"_14":15,"_16":17,"_18":19,"_20":21,"_22":23,"_24":25,"_26":27,"_28":27,"_29":30,"_33":34,"_35":36,"_37":38,"_39":40,"_41":42,"_43":44,"_45":46,"_5":47,"_59":60,"_61":62,"_63":62,"_64":65,"_66":62,"_67":62,"_68":62,"_69":62,"_70":62,"_71":62,"_72":17,"_73":17,"_74":-5,"_75":76,"_77":78,"_79":80,"_107":-5,"_108":-5,"_109":27,"_110":111,"_144":34,"_145":146,"_147":27,"_148":149},"id","2b8cd8d2af5721ea072c","isMyApp",false,"projectId","514e2a24-d1e3-4595-81fc-d0fb1276a0b1","name","predictly","description","The sleekest prediction market where you bet on real-world events with crystal-clear odds and zero noise. Built with cutting-edge Shadcn UI components, this minimalist platform lets you focus on what matters - making smart predictions without any visual clutter getting in your way. Think Polymarket, but if it went to design school and learned the art of elegant simplicity.","brief","Bet on real events with ultra-clean design - Polymarket meets minimalist perfection","isLive",true,"isPublic","tags",[31,32],"🔥","👑","cover","https://cdn.dev.fun/snapshot/2b8cd8d2af5721ea072c/105269_f88b489e.webp","cdnUrl","https://cdn.dev.fun/app/2b8cd8d2af5721ea072c/105269","createdAt",["D",1756900479600],"updatedAt",["D",1758284905269],"lastCommitId",["B","105269"],"tier",1,"credits",146,{"_14":48,"_49":50,"_51":50,"_52":53,"_54":50,"_55":56,"_57":58},"4b9b20cd-bab7-4c4b-9150-8ac2117715f2","uniqueId","pixel","username","solanaWallet","6qBy1hV2W5kyaKGy8TmwLLyGsGGdb26z4zBeQ77H4okQ","displayName","bio","","avatar","https://cdn.dev.fun/avatar/4b9b20cd-bab7-4c4b-9150-8ac2117715f2/727333d3.webp","commitCount",212,"forkCount",0,"likeCount","runsCount",28,"downvoteCount","upvoteCount","upvoteRate","commentCount","reportCount","visitorCount","isArchived","isRenamed","contractAddress","code","import { TrendingUp, Users, ChevronRight, Wallet, Plus, X, Settings, Trophy, Trash2, Pause, Play } from 'lucide-react';\nimport { useDevapp, UserButton, DevappProvider } from '@devfunlabs/web-sdk';\nimport { useEffect, useState, useCallback, useRef } from 'react';\nimport NumberFlow from '@number-flow/react';\nimport { io } from 'socket.io-client';\nfunction cn(...inputs) {\n return inputs.filter(Boolean).join(' ');\n}\nconst morphTime = 1.5;\nconst cooldownTime = 0.5;\nconst predictlyCooldownTime = 15.0;\nconst useMorphingText = texts => {\n const textIndexRef = useRef(0);\n const morphRef = useRef(0);\n const cooldownRef = useRef(0);\n const timeRef = useRef(new Date());\n const text1Ref = useRef(null);\n const text2Ref = useRef(null);\n const setStyles = useCallback(fraction => {\n const [current1, current2] = [text1Ref.current, text2Ref.current];\n if (!current1 || !current2 || !texts || texts.length === 0) return;\n current2.style.filter = `blur(${Math.min(8 / fraction - 8, 100)}px)`;\n current2.style.opacity = `${Math.pow(fraction, 0.4) * 100}%`;\n const invertedFraction = 1 - fraction;\n current1.style.filter = `blur(${Math.min(8 / invertedFraction - 8, 100)}px)`;\n current1.style.opacity = `${Math.pow(invertedFraction, 0.4) * 100}%`;\n current1.textContent = texts[textIndexRef.current % texts.length];\n current2.textContent = texts[(textIndexRef.current + 1) % texts.length];\n }, [texts]);\n const doMorph = useCallback(() => {\n morphRef.current -= cooldownRef.current;\n cooldownRef.current = 0;\n let fraction = morphRef.current / morphTime;\n if (fraction > 1) {\n const nextText = texts[(textIndexRef.current + 1) % texts.length];\n if (nextText === 'predictly') {\n cooldownRef.current = predictlyCooldownTime;\n } else {\n cooldownRef.current = cooldownTime;\n }\n fraction = 1;\n }\n setStyles(fraction);\n if (fraction === 1) {\n textIndexRef.current++;\n }\n }, [setStyles, texts]);\n const doCooldown = useCallback(() => {\n morphRef.current = 0;\n const [current1, current2] = [text1Ref.current, text2Ref.current];\n if (current1 && current2) {\n current2.style.filter = \"none\";\n current2.style.opacity = \"100%\";\n current1.style.filter = \"none\";\n current1.style.opacity = \"0%\";\n }\n }, []);\n useEffect(() => {\n let animationFrameId;\n const animate = () => {\n animationFrameId = requestAnimationFrame(animate);\n const newTime = new Date();\n const dt = (newTime.getTime() - timeRef.current.getTime()) / 1000;\n timeRef.current = newTime;\n cooldownRef.current -= dt;\n if (cooldownRef.current <= 0) doMorph();else doCooldown();\n };\n animate();\n return () => {\n cancelAnimationFrame(animationFrameId);\n };\n }, [doMorph, doCooldown]);\n return {\n text1Ref,\n text2Ref\n };\n};\nconst MorphingTextContent = ({\n texts\n}) => {\n const {\n text1Ref,\n text2Ref\n } = useMorphingText(texts);\n return <>\n \n \n ;\n};\nconst MorphingTextFilters = () => ;\nconst MorphingText = ({\n texts,\n className\n}) =>

\n \n \n

;\nfunction GlassButton({\n className = '',\n children,\n size = 'default',\n contentClassName = '',\n style = {},\n ...props\n}) {\n const sizeClasses = {\n default: 'text-base font-medium',\n sm: 'text-sm font-medium',\n lg: 'text-lg font-medium',\n icon: 'h-10 w-10 flex items-center justify-center'\n };\n const textSizeClasses = {\n default: 'px-6 py-3.5',\n sm: 'px-4 py-2',\n lg: 'px-8 py-4',\n icon: 'flex items-center justify-center'\n };\n return

\n \n \n

;\n}\nfunction GlassFilter() {\n return ;\n}\nfunction MarketFilter({\n value,\n onChange\n}) {\n const options = value === 'deposit' || value === 'withdraw' ? [{\n key: 'deposit',\n label: 'Deposit'\n }, {\n key: 'withdraw',\n label: 'Withdraw'\n }] : [{\n key: 'live',\n label: 'Live'\n }, {\n key: 'completed',\n label: 'Completed'\n }];\n const firstOption = options[0];\n const secondOption = options[1];\n return

\n onChange(firstOption.key)}>\n {firstOption.label}\n \n \n onChange(secondOption.key)}>\n {secondOption.label}\n \n \n \n

;\n}\nfunction App() {\n const {\n devbaseClient,\n userWallet\n } = useDevapp();\n const [balance, setBalance] = useState(0);\n const [showWalletModal, setShowWalletModal] = useState(false);\n const [activeTab, setActiveTab] = useState('markets');\n const [walletAction, setWalletAction] = useState('deposit');\n const [walletAmount, setWalletAmount] = useState('');\n const [isLoading, setIsLoading] = useState(false);\n const [showAdminPanel, setShowAdminPanel] = useState(false);\n const [markets, setMarkets] = useState([]);\n const [showCreateMarket, setShowCreateMarket] = useState(false);\n const [newMarket, setNewMarket] = useState({\n title: '',\n description: '',\n category: '',\n type: 'standard',\n options: [{\n name: 'Yes',\n color: 'green'\n }, {\n name: 'No',\n color: 'red'\n }]\n });\n const [selectedMarket, setSelectedMarket] = useState(null);\n const [selectedOption, setSelectedOption] = useState(null);\n const [betAmount, setBetAmount] = useState('');\n const [showBetModal, setShowBetModal] = useState(false);\n const [marketFilter, setMarketFilter] = useState('live');\n const [adminMarketFilter, setAdminMarketFilter] = useState('live');\n const [sliderPosition, setSliderPosition] = useState(0);\n const [isDragging, setIsDragging] = useState(false);\n const [walletSliderPosition, setWalletSliderPosition] = useState(0);\n const [isWalletDragging, setIsWalletDragging] = useState(false);\n const [socket, setSocket] = useState(null);\n const [userBets, setUserBets] = useState([]);\n const [userStats, setUserStats] = useState({\n totalBets: 0,\n totalVolume: 0,\n winRate: 0\n });\n const [profileTab, setProfileTab] = useState('active');\n const [networkError, setNetworkError] = useState(false);\n const [retryCount, setRetryCount] = useState(0);\n const [isOnline, setIsOnline] = useState(navigator.onLine);\n const [lastSuccessfulFetch, setLastSuccessfulFetch] = useState(null);\n const ADMIN_WALLET = '6qBy1hV2W5kyaKGy8TmwLLyGsGGdb26z4zBeQ77H4okQ';\n const MIN_DEPOSIT_AMOUNT = 0.01;\n const isAdmin = userWallet === ADMIN_WALLET;\n useEffect(() => {\n if (showBetModal) {\n document.body.style.overflow = 'hidden';\n } else {\n document.body.style.overflow = 'unset';\n }\n return () => {\n document.body.style.overflow = 'unset';\n };\n }, [showBetModal]);\n useEffect(() => {\n const handleOnline = () => {\n setIsOnline(true);\n setNetworkError(false);\n if (devbaseClient) {\n fetchMarkets();\n }\n };\n const handleOffline = () => {\n setIsOnline(false);\n setNetworkError(true);\n };\n window.addEventListener('online', handleOnline);\n window.addEventListener('offline', handleOffline);\n const socketInstance = io('wss://ws.dev.fun/app-2b8cd8d2af5721ea072c');\n setSocket(socketInstance);\n socketInstance.on('market_update', () => {\n if (isOnline) {\n fetchMarkets();\n }\n });\n socketInstance.on('bet_placed', () => {\n fetchMarkets();\n if (userWallet && devbaseClient) {\n calculateBalance().then(newBalance => {\n setBalance(newBalance);\n });\n }\n });\n socketInstance.on('market_created', () => {\n fetchMarkets();\n });\n socketInstance.on('market_winner_set', () => {\n fetchMarkets();\n if (userWallet && devbaseClient) {\n calculateBalance().then(newBalance => {\n setBalance(newBalance);\n });\n }\n });\n socketInstance.on('market_refunded', () => {\n fetchMarkets();\n if (userWallet && devbaseClient) {\n calculateBalance().then(newBalance => {\n setBalance(newBalance);\n });\n }\n });\n socketInstance.on('wallet_transaction', () => {\n if (userWallet && devbaseClient) {\n calculateBalance().then(newBalance => {\n setBalance(newBalance);\n });\n }\n });\n return () => {\n socketInstance.disconnect();\n window.removeEventListener('online', handleOnline);\n window.removeEventListener('offline', handleOffline);\n };\n }, [userWallet, devbaseClient, isOnline]);\n useEffect(() => {\n const createUserProfile = async () => {\n if (userWallet && devbaseClient) {\n try {\n setNetworkError(false);\n const existingUsers = await devbaseClient.listEntities('users', {\n walletAddress: userWallet\n });\n if (existingUsers.length === 0) {\n await devbaseClient.createEntity('users', {\n walletAddress: userWallet,\n joinedAt: Date.now(),\n totalBets: 0,\n totalVolume: 0\n });\n }\n } catch (error) {\n console.error('Error creating user profile:', error);\n setNetworkError(true);\n }\n }\n };\n createUserProfile();\n }, [userWallet, devbaseClient]);\n const addOption = () => {\n setNewMarket({\n ...newMarket,\n options: [...newMarket.options, {\n name: '',\n color: 'blue'\n }]\n });\n };\n const removeOption = index => {\n if (newMarket.options.length > 2) {\n const newOptions = newMarket.options.filter((_, i) => i !== index);\n setNewMarket({\n ...newMarket,\n options: newOptions\n });\n }\n };\n const updateOption = (index, field, value) => {\n const newOptions = [...newMarket.options];\n newOptions[index][field] = value;\n setNewMarket({\n ...newMarket,\n options: newOptions\n });\n };\n const calculateBalance = async (retryAttempt = 0) => {\n if (!userWallet || !devbaseClient) return 0;\n const maxRetries = 3;\n const baseDelay = 1000;\n try {\n if (!isOnline) {\n throw new Error('Network is offline');\n }\n const deposits = await devbaseClient.listEntities('deposits', {\n userId: userWallet\n });\n const withdrawals = await devbaseClient.listEntities('withdrawals', {\n userId: userWallet\n });\n const bets = await devbaseClient.listEntities('bets', {\n userId: userWallet\n });\n const payouts = await devbaseClient.listEntities('payouts', {\n userId: userWallet\n });\n const totalDeposits = deposits.reduce((sum, deposit) => sum + deposit.amount, 0);\n const totalWithdrawals = withdrawals.reduce((sum, withdrawal) => sum + withdrawal.amount, 0);\n const totalBets = bets.reduce((sum, bet) => sum + bet.amount, 0);\n const totalPayouts = payouts.reduce((sum, payout) => sum + payout.amount, 0);\n setNetworkError(false);\n const rawBalance = totalDeposits - totalWithdrawals - totalBets + totalPayouts;\n const roundedBalance = Math.round(rawBalance * 1000) / 1000;\n return Math.abs(roundedBalance) < 0.001 ? 0 : Math.max(0, roundedBalance);\n } catch (error) {\n console.error('Error calculating balance:', error);\n if (retryAttempt < maxRetries && isOnline) {\n const delay = baseDelay * Math.pow(2, retryAttempt);\n setTimeout(() => {\n calculateBalance(retryAttempt + 1).then(newBalance => {\n if (newBalance !== 0) {\n setBalance(newBalance);\n }\n });\n }, delay);\n } else {\n setNetworkError(true);\n }\n return 0;\n }\n };\n useEffect(() => {\n const fetchBalance = async () => {\n if (userWallet && devbaseClient) {\n try {\n const calculatedBalance = await calculateBalance();\n setBalance(calculatedBalance);\n const balances = await devbaseClient.listEntities('balances', {\n userId: userWallet\n });\n if (balances.length === 0) {\n await devbaseClient.createEntity('balances', {\n userId: userWallet,\n amount: calculatedBalance\n });\n } else {\n await devbaseClient.updateEntity('balances', balances[0].id, {\n amount: calculatedBalance\n });\n }\n } catch (error) {\n console.error('Error fetching balance:', error);\n }\n }\n };\n fetchBalance();\n }, [userWallet, devbaseClient]);\n const handleWalletTransaction = async () => {\n if (!walletAmount || !userWallet || !devbaseClient) return;\n setIsLoading(true);\n try {\n if (walletAction === 'deposit') {\n await devbaseClient.createEntity('deposits', {\n userId: userWallet,\n amount: parseFloat(walletAmount)\n });\n } else {\n await devbaseClient.createEntity('withdrawals', {\n userId: userWallet,\n amount: parseFloat(walletAmount)\n });\n }\n if (socket) {\n socket.emit('wallet_transaction', {\n action: walletAction,\n amount: parseFloat(walletAmount),\n userId: userWallet\n });\n }\n const newBalance = await calculateBalance();\n setBalance(newBalance);\n setWalletAmount('');\n setWalletSliderPosition(0);\n setShowWalletModal(false);\n } catch (error) {\n console.error(`Error ${walletAction}ing:`, error);\n }\n setIsLoading(false);\n };\n const handleCreateMarket = async () => {\n if (!newMarket.title || !newMarket.category || !devbaseClient) return;\n setIsLoading(true);\n try {\n const market = await devbaseClient.createEntity('markets', {\n title: newMarket.title,\n description: newMarket.description,\n category: newMarket.category,\n isActive: true,\n acceptingBets: true,\n winner: null\n });\n for (const option of newMarket.options) {\n if (option.name.trim()) {\n await devbaseClient.createEntity('market_options', {\n marketId: market.id,\n name: option.name.trim(),\n color: option.color\n });\n }\n }\n if (socket) {\n socket.emit('market_created', {\n marketId: market.id,\n title: newMarket.title\n });\n }\n setNewMarket({\n title: '',\n description: '',\n category: '',\n type: 'standard',\n options: [{\n name: 'Yes',\n color: 'green'\n }, {\n name: 'No',\n color: 'red'\n }]\n });\n setShowCreateMarket(false);\n fetchMarkets();\n } catch (error) {\n console.error('Error creating market:', error);\n }\n setIsLoading(false);\n };\n const handleDeleteMarket = async marketId => {\n if (!devbaseClient) return;\n try {\n await devbaseClient.deleteEntity('markets', marketId);\n if (socket) {\n socket.emit('market_update', {\n action: 'delete',\n marketId: marketId\n });\n }\n fetchMarkets();\n } catch (error) {\n console.error('Error deleting market:', error);\n }\n };\n const handleSetWinner = async (marketId, winnerOptionId) => {\n if (!devbaseClient) return;\n setIsLoading(true);\n try {\n await devbaseClient.updateEntity('markets', marketId, {\n winner: winnerOptionId,\n isActive: false\n });\n const bets = await devbaseClient.listEntities('bets', {\n marketId: marketId\n });\n const winningBets = bets.filter(bet => bet.optionId === winnerOptionId);\n const totalBets = bets.reduce((sum, bet) => sum + bet.amount, 0);\n const totalWinningBets = winningBets.reduce((sum, bet) => sum + bet.amount, 0);\n const totalLosingBets = totalBets - totalWinningBets;\n const margin = 0.05;\n let winningOdds = 1.0;\n if (totalWinningBets > 0 && totalLosingBets > 0) {\n winningOdds = totalBets * (1 - margin) / totalWinningBets;\n } else if (totalWinningBets > 0 && totalLosingBets === 0) {\n winningOdds = 1.0;\n } else {\n winningOdds = 1.0;\n }\n winningOdds = Math.max(1.0, winningOdds);\n winningOdds = Math.round(winningOdds * 100) / 100;\n if (totalWinningBets > 0) {\n for (const bet of winningBets) {\n const payoutAmount = bet.amount * winningOdds;\n await devbaseClient.createEntity('payouts', {\n userId: bet.userId,\n marketId: marketId,\n betId: bet.id,\n amount: payoutAmount\n });\n }\n }\n if (socket) {\n socket.emit('market_winner_set', {\n marketId: marketId,\n winnerOptionId: winnerOptionId\n });\n }\n fetchMarkets();\n if (userWallet) {\n const newBalance = await calculateBalance();\n setBalance(newBalance);\n }\n } catch (error) {\n console.error('Error setting winner:', error);\n }\n setIsLoading(false);\n };\n const handleRefundMarket = async marketId => {\n if (!devbaseClient) return;\n setIsLoading(true);\n try {\n const bets = await devbaseClient.listEntities('bets', {\n marketId: marketId\n });\n for (const bet of bets) {\n await devbaseClient.createEntity('payouts', {\n userId: bet.userId,\n marketId: marketId,\n betId: bet.id,\n amount: bet.amount\n });\n }\n await devbaseClient.updateEntity('markets', marketId, {\n refunded: true,\n isActive: false\n });\n if (socket) {\n socket.emit('market_refunded', {\n marketId: marketId\n });\n }\n fetchMarkets();\n if (userWallet) {\n const newBalance = await calculateBalance();\n setBalance(newBalance);\n }\n } catch (error) {\n console.error('Error refunding market:', error);\n }\n setIsLoading(false);\n };\n const handleToggleBettingStatus = async (marketId, currentStatus) => {\n if (!devbaseClient) return;\n setIsLoading(true);\n try {\n await devbaseClient.updateEntity('markets', marketId, {\n acceptingBets: !currentStatus\n });\n if (socket) {\n socket.emit('market_update', {\n action: 'toggle_betting',\n marketId: marketId,\n acceptingBets: !currentStatus\n });\n }\n fetchMarkets();\n } catch (error) {\n console.error('Error toggling betting status:', error);\n }\n setIsLoading(false);\n };\n const handlePlaceBet = async () => {\n if (!betAmount || !userWallet || !devbaseClient || !selectedMarket || !selectedOption) return;\n if (parseFloat(betAmount) > balance) return;\n setIsLoading(true);\n try {\n await devbaseClient.createEntity('bets', {\n userId: userWallet,\n marketId: selectedMarket.id,\n optionId: selectedOption.id,\n amount: parseFloat(betAmount)\n });\n if (socket) {\n socket.emit('bet_placed', {\n marketId: selectedMarket.id,\n optionId: selectedOption.id,\n amount: parseFloat(betAmount),\n userId: userWallet\n });\n }\n const newBalance = await calculateBalance();\n setBalance(newBalance);\n setBetAmount('');\n setSliderPosition(0);\n setShowBetModal(false);\n fetchMarkets();\n } catch (error) {\n console.error('Error placing bet:', error);\n }\n setIsLoading(false);\n };\n const handleSliderChange = e => {\n if (!isDragging) return;\n e.preventDefault();\n const rect = e.currentTarget.getBoundingClientRect();\n const x = (e.type === 'mousemove' ? e.clientX : e.touches[0].clientX) - rect.left;\n const sliderWidth = rect.width;\n const handleWidth = 48;\n const maxDistance = sliderWidth - handleWidth - 8;\n const position = Math.max(0, Math.min(maxDistance, x - handleWidth / 2));\n const percentage = position / maxDistance * 100;\n requestAnimationFrame(() => {\n setSliderPosition(position);\n });\n if (percentage >= 90) {\n setIsDragging(false);\n requestAnimationFrame(() => {\n setSliderPosition(maxDistance);\n });\n handlePlaceBet();\n }\n };\n const handleSliderStart = e => {\n if (!betAmount || parseFloat(betAmount) > balance || isLoading) return;\n setIsDragging(true);\n e.preventDefault();\n };\n const handleSliderEnd = () => {\n setIsDragging(false);\n const rect = document.querySelector('.slider-track')?.getBoundingClientRect();\n if (rect) {\n const handleWidth = 48;\n const maxDistance = rect.width - handleWidth - 8;\n const percentage = sliderPosition / maxDistance * 100;\n if (percentage < 90) {\n setSliderPosition(0);\n }\n } else {\n const estimatedMaxDistance = 200;\n const percentage = sliderPosition / estimatedMaxDistance * 100;\n if (percentage < 90) {\n setSliderPosition(0);\n }\n }\n };\n const handleWalletSliderChange = e => {\n if (!isWalletDragging) return;\n e.preventDefault();\n const rect = e.currentTarget.getBoundingClientRect();\n const x = (e.type === 'mousemove' ? e.clientX : e.touches[0].clientX) - rect.left;\n const sliderWidth = rect.width;\n const handleWidth = 48;\n const maxDistance = sliderWidth - handleWidth - 8;\n const position = Math.max(0, Math.min(maxDistance, x - handleWidth / 2));\n const percentage = position / maxDistance * 100;\n requestAnimationFrame(() => {\n setWalletSliderPosition(position);\n });\n if (percentage >= 90) {\n setIsWalletDragging(false);\n requestAnimationFrame(() => {\n setWalletSliderPosition(maxDistance);\n });\n handleWalletTransaction();\n }\n };\n const handleWalletSliderStart = e => {\n if (!walletAmount || walletAction === 'withdraw' && parseFloat(walletAmount) > balance || walletAction === 'deposit' && parseFloat(walletAmount) < MIN_DEPOSIT_AMOUNT || isLoading) return;\n setIsWalletDragging(true);\n e.preventDefault();\n };\n const handleWalletSliderEnd = () => {\n setIsWalletDragging(false);\n const rect = document.querySelector('.wallet-slider-track')?.getBoundingClientRect();\n if (rect) {\n const handleWidth = 48;\n const maxDistance = rect.width - handleWidth - 8;\n const percentage = walletSliderPosition / maxDistance * 100;\n if (percentage < 90) {\n setWalletSliderPosition(0);\n }\n } else {\n const estimatedMaxDistance = 200;\n const percentage = walletSliderPosition / estimatedMaxDistance * 100;\n if (percentage < 90) {\n setWalletSliderPosition(0);\n }\n }\n };\n const fetchMarkets = async (retryAttempt = 0) => {\n if (!devbaseClient) return;\n const maxRetries = 3;\n const baseDelay = 2000;\n try {\n if (!isOnline) {\n setNetworkError(true);\n return;\n }\n setNetworkError(false);\n const marketsData = await devbaseClient.listEntities('markets');\n const marketsWithBets = await Promise.all(marketsData.map(async market => {\n const options = await devbaseClient.listEntities('market_options', {\n marketId: market.id\n });\n const bets = await devbaseClient.listEntities('bets', {\n marketId: market.id\n });\n const totalAmount = bets.reduce((sum, bet) => sum + bet.amount, 0);\n const margin = 0.05;\n const optionsWithStats = options.map(option => {\n const optionBets = bets.filter(bet => bet.optionId === option.id);\n const optionAmount = optionBets.reduce((sum, bet) => sum + bet.amount, 0);\n let odds = 1.0;\n if (totalAmount > 0 && optionAmount > 0) {\n odds = totalAmount * (1 - margin) / optionAmount;\n } else if (totalAmount > 0 && optionAmount === 0) {\n odds = 100.0;\n } else {\n odds = 2.0;\n }\n odds = Math.max(1.0, odds);\n return {\n ...option,\n amount: optionAmount,\n odds: Math.round(odds * 100) / 100\n };\n });\n const uniqueTraders = new Set(bets.map(bet => bet.userId));\n let winnerOption = null;\n if (market.winner) {\n winnerOption = options.find(opt => opt.id === market.winner);\n }\n return {\n ...market,\n options: optionsWithStats,\n totalAmount,\n traders: uniqueTraders.size,\n winnerOption\n };\n }));\n setMarkets(marketsWithBets);\n setRetryCount(0);\n setLastSuccessfulFetch(Date.now());\n } catch (error) {\n console.error('Error fetching markets:', error);\n setNetworkError(true);\n if (retryAttempt < maxRetries && isOnline) {\n const delay = baseDelay * Math.pow(2, retryAttempt);\n setTimeout(() => {\n setRetryCount(retryAttempt + 1);\n fetchMarkets(retryAttempt + 1);\n }, delay);\n }\n }\n };\n useEffect(() => {\n fetchMarkets();\n }, [devbaseClient]);\n const filteredMarkets = markets.filter(market => {\n if (marketFilter === 'live') {\n return market.isActive;\n } else {\n return !market.isActive;\n }\n });\n const sortedMarkets = [...filteredMarkets].sort((a, b) => b.totalAmount - a.totalAmount);\n const fetchUserBets = async (retryAttempt = 0) => {\n if (!userWallet || !devbaseClient || markets.length === 0) return;\n const maxRetries = 3;\n const baseDelay = 1500;\n try {\n if (!isOnline) {\n return;\n }\n setNetworkError(false);\n const bets = await devbaseClient.listEntities('bets', {\n userId: userWallet\n });\n const payouts = await devbaseClient.listEntities('payouts', {\n userId: userWallet\n });\n const betsWithMarkets = await Promise.all(bets.map(async bet => {\n try {\n const market = markets.find(m => m.id === bet.marketId);\n const option = market?.options.find(o => o.id === bet.optionId);\n const payout = payouts.find(p => p.betId === bet.id);\n const isWin = market?.winner === bet.optionId;\n const odds = payout && isWin ? payout.amount / bet.amount : 0;\n const netWin = payout && isWin ? payout.amount - bet.amount : 0;\n return {\n ...bet,\n market,\n option,\n payout,\n isWin,\n odds: Math.round(odds * 100) / 100,\n netWin\n };\n } catch (error) {\n return {\n ...bet,\n market: null,\n option: null,\n payout: null,\n isWin: false,\n odds: 0,\n netWin: 0\n };\n }\n }));\n setUserBets(betsWithMarkets);\n const totalVolume = bets.reduce((sum, bet) => sum + bet.amount, 0);\n const wins = betsWithMarkets.filter(bet => bet.market?.winner === bet.optionId).length;\n const winRate = bets.length > 0 ? wins / bets.length * 100 : 0;\n setUserStats({\n totalBets: bets.length,\n totalVolume,\n winRate\n });\n } catch (error) {\n console.error('Error fetching user bets:', error);\n if (retryAttempt < maxRetries && isOnline) {\n const delay = baseDelay * Math.pow(2, retryAttempt);\n setTimeout(() => {\n fetchUserBets(retryAttempt + 1);\n }, delay);\n }\n }\n };\n useEffect(() => {\n if (userWallet && devbaseClient && markets.length > 0) {\n fetchUserBets();\n }\n }, [userWallet, devbaseClient, markets]);\n const renderContent = () => {\n switch (activeTab) {\n case 'profile':\n return

\n Profile\n

\n Your betting history and statistics\n

\n {!userWallet ?

Connect your wallet to view your profile

\n \n

: <>\n

Total Bets

\n \n

Total Volume

\n SOL\n

Win Rate

\n %\n

\n setProfileTab(value === 'live' ? 'active' : 'recent')} />\n

\n {profileTab === 'active' ? 'My Active Bets' : 'Recent Bets'}\n

\n {(() => {\n const filteredBets = userBets.filter(bet => {\n if (profileTab === 'active') {\n return bet.market?.isActive === true;\n } else {\n return bet.market?.isActive === false;\n }\n });\n if (filteredBets.length === 0) {\n return

\n {profileTab === 'active' ? 'No active bets. Place a bet on a live market!' : 'No completed bets yet. Start betting to see your history!'}\n

;\n }\n return filteredBets.slice(0, 10).map(bet =>

\n \n {bet.market?.category || 'Unknown'}\n \n \n {new Date(bet.timestamp).toLocaleDateString()}\n {profileTab === 'active' ? \n LIVE\n : bet.market?.winner && \n {bet.isWin ? 'WON' : 'LOST'}\n }\n

\n {bet.market?.title || 'Unknown Market'}\n

\n Bet on:\n

\n {bet.option?.name || 'Unknown Option'}\n \n opt.id === bet.optionId)?.odds || 2.0} format={{\n minimumFractionDigits: 2,\n maximumFractionDigits: 2\n }} />x\n \n

\n {profileTab === 'active' ?

\n Bet: \n

\n \n opt.id === bet.optionId)?.odds || 2.0)} format={{\n minimumFractionDigits: 3,\n maximumFractionDigits: 3\n }} />\n

: bet.isWin ?

\n Bet: \n

\n +\n

\n Bet: \n

\n -\n

}\n

);\n })()}\n

\n }\n

;\n case 'wallet':\n return

\n Wallet\n

\n Manage your balance and transactions\n

\n {!userWallet ?

Connect your wallet to manage your balance

\n \n

: <>\n

Current Balance

\n SOL\n

\n setShowWalletModal(true)} contentClassName=\"flex items-center gap-2\">\n \n Deposit / Withdraw\n \n

Recent Transactions

\n Transaction history coming soon...\n

\n }\n

;\n default:\n return

\n Prediction Markets\n

\n Bet on real-world events with crystal-clear odds\n

\n \n

\n {networkError &&

\n {!isOnline ? 'No Internet Connection' : 'Network Error'}\n

\n {!isOnline ? 'Please check your internet connection and try again.' : `Unable to connect to the server. ${retryCount > 0 ? `Retrying... (${retryCount}/3)` : ''}`}\n {lastSuccessfulFetch && \n Last updated: {new Date(lastSuccessfulFetch).toLocaleTimeString()}\n }\n

\n {\n setRetryCount(0);\n if (isOnline) {\n fetchMarkets();\n if (userWallet) {\n calculateBalance().then(newBalance => {\n setBalance(newBalance);\n });\n }\n }\n }} disabled={!isOnline}>\n {!isOnline ? 'Offline' : 'Retry'}\n \n

}\n

\n {!isOnline && markets.length === 0 &&

📡

No Internet Connection

\n Please check your connection and try again.\n

\n window.location.reload()}>\n Refresh Page\n \n

}\n \n {sortedMarkets.length === 0 && isOnline && !networkError &&

🎯

No Markets Available

\n {marketFilter === 'live' ? 'No active markets at the moment. Check back soon!' : 'No completed markets yet.'}\n

}\n \n {sortedMarkets.map(market =>

\n \n {market.category}\n \n {market.winner && \n \n {market.winnerOption.name.toUpperCase()} WON\n }\n {market.refunded && \n REFUNDED\n }\n {market.isActive && market.acceptingBets === false && \n Bets Closed\n }\n

\n {market.title}\n

\n {market.options.slice().reverse().map(option => )}\n

\n \n \n SOL volume\n \n \n \n traders\n \n

)}\n

;\n }\n };\n return

\n \n

\n {userWallet && isAdmin &&

\n setShowAdminPanel(true)}>\n \n \n

}\n \n

\n {renderContent()}\n {}\n

\n \n \n \n \n

\n {showWalletModal &&

Wallet

\n setShowWalletModal(false)}>\n \n \n

\n \n

\n \n Amount (SOL)\n \n

\n setWalletAmount(e.target.value)} className=\"flex-1 min-w-0 px-3 py-2 border border-stone-300/60 rounded-xl focus:ring-2 focus:ring-blue-400/40 focus:border-blue-400/40 bg-stone-50/60 backdrop-blur-sm text-stone-800 transition-all\" placeholder={walletAction === 'deposit' ? `${MIN_DEPOSIT_AMOUNT.toFixed(3)}` : \"0.000\"} />\n

\n \n \n \n

\n {walletAction === 'withdraw' &&

\n Available: {balance} SOL\n

}\n {walletAction === 'deposit' && parseFloat(walletAmount) > 0 && parseFloat(walletAmount) < MIN_DEPOSIT_AMOUNT &&

\n Minimum deposit: {MIN_DEPOSIT_AMOUNT} SOL\n

}\n {walletAction === 'deposit' &&

\n Minimum deposit: {MIN_DEPOSIT_AMOUNT} SOL\n

}\n

balance || walletAction === 'deposit' && parseFloat(walletAmount) < MIN_DEPOSIT_AMOUNT || isLoading ? 'border-stone-300/40 bg-stone-200/40' : walletAction === 'deposit' ? 'border-green-400/40 bg-green-100/30' : 'border-blue-400/40 bg-blue-100/30'}`} onMouseMove={handleWalletSliderChange} onMouseUp={handleWalletSliderEnd} onMouseLeave={handleWalletSliderEnd} onTouchMove={handleWalletSliderChange} onTouchEnd={handleWalletSliderEnd} onTouchCancel={handleWalletSliderEnd}>\n

{\n if (walletSliderPosition <= 0) return 'transparent';\n const rect = document.querySelector('.wallet-slider-track')?.getBoundingClientRect();\n const maxDistance = rect ? rect.width - 48 - 8 : 200;\n const fillPercentage = Math.min(100, walletSliderPosition / maxDistance * 100);\n const color = walletAction === 'deposit' ? '34, 197, 94' : '59, 130, 246';\n return `linear-gradient(90deg, \n rgba(${color}, 0.02) 0%, \n rgba(${color}, 0.08) ${Math.max(0, fillPercentage * 0.3)}%, \n rgba(${color}, 0.15) ${Math.max(0, fillPercentage * 0.5)}%, \n rgba(${color}, 0.25) ${Math.max(0, fillPercentage * 0.7)}%, \n rgba(${color}, 0.35) ${Math.max(0, fillPercentage * 0.85)}%, \n rgba(${color}, 0.45) ${fillPercentage}%, \n rgba(${color}, 0.25) ${Math.min(100, fillPercentage + 8)}%, \n rgba(${color}, 0.1) ${Math.min(100, fillPercentage + 15)}%, \n transparent ${Math.min(100, fillPercentage + 25)}%)`;\n })(),\n backdropFilter: 'blur(8px)',\n boxShadow: walletSliderPosition > 0 ? `inset 0 0 30px rgba(${walletAction === 'deposit' ? '34, 197, 94' : '59, 130, 246'}, 0.4)` : 'none',\n transition: isWalletDragging ? 'none' : 'all 0.3s cubic-bezier(0.4, 0, 0.2, 1)',\n filter: 'blur(2px)'\n }} />\n

balance || isLoading ? 'cursor-not-allowed' : 'cursor-grab active:cursor-grabbing'} ${isWalletDragging ? 'scale-110' : 'scale-100'} flex items-center justify-center duration-200`} style={{\n left: `${4 + walletSliderPosition}px`,\n transition: isWalletDragging ? 'transform 0.1s ease-out' : 'all 0.3s cubic-bezier(0.4, 0, 0.2, 1)',\n transform: `translateY(-50%) ${isWalletDragging ? 'scale(1.1)' : 'scale(1)'}`\n }} onMouseDown={handleWalletSliderStart} onTouchStart={handleWalletSliderStart}>\n

balance || walletAction === 'deposit' && parseFloat(walletAmount) < MIN_DEPOSIT_AMOUNT || isLoading ? 'bg-black/20 border-white/20 shadow-[0_0_6px_rgba(0,0,0,0.03),0_2px_6px_rgba(0,0,0,0.08),inset_3px_3px_0.5px_-3px_rgba(255,255,255,0.4),inset_-3px_-3px_0.5px_-3px_rgba(255,255,255,0.35),inset_1px_1px_1px_-0.5px_rgba(255,255,255,0.3),inset_-1px_-1px_1px_-0.5px_rgba(255,255,255,0.3),inset_0_0_6px_6px_rgba(0,0,0,0.12),inset_0_0_2px_2px_rgba(0,0,0,0.06),0_0_12px_rgba(255,255,255,0.15)]' : walletAction === 'deposit' ? 'bg-green-500/30 border-green-300/40 shadow-[0_0_6px_rgba(34,197,94,0.1),0_2px_6px_rgba(34,197,94,0.15),inset_3px_3px_0.5px_-3px_rgba(255,255,255,0.4),inset_-3px_-3px_0.5px_-3px_rgba(255,255,255,0.35),inset_1px_1px_1px_-0.5px_rgba(255,255,255,0.3),inset_-1px_-1px_1px_-0.5px_rgba(255,255,255,0.3),inset_0_0_6px_6px_rgba(0,0,0,0.12),inset_0_0_2px_2px_rgba(34,197,94,0.1),0_0_12px_rgba(34,197,94,0.3)]' : 'bg-blue-500/30 border-blue-300/40 shadow-[0_0_6px_rgba(59,130,246,0.1),0_2px_6px_rgba(59,130,246,0.15),inset_3px_3px_0.5px_-3px_rgba(255,255,255,0.4),inset_-3px_-3px_0.5px_-3px_rgba(255,255,255,0.35),inset_1px_1px_1px_-0.5px_rgba(255,255,255,0.3),inset_-1px_-1px_1px_-0.5px_rgba(255,255,255,0.3),inset_0_0_6px_6px_rgba(0,0,0,0.12),inset_0_0_2px_2px_rgba(59,130,246,0.1),0_0_12px_rgba(59,130,246,0.3)]'} ${isWalletDragging ? 'shadow-[0_0_8px_rgba(0,0,0,0.04),0_3px_8px_rgba(0,0,0,0.1),inset_3px_3px_0.5px_-3px_rgba(255,255,255,0.5),inset_-3px_-3px_0.5px_-3px_rgba(255,255,255,0.45),inset_1px_1px_1px_-0.5px_rgba(255,255,255,0.4),inset_-1px_-1px_1px_-0.5px_rgba(255,255,255,0.4),inset_0_0_8px_8px_rgba(0,0,0,0.15),inset_0_0_3px_3px_rgba(0,0,0,0.08),0_0_16px_rgba(255,255,255,0.2)]' : ''}`} />\n balance || walletAction === 'deposit' && parseFloat(walletAmount) < MIN_DEPOSIT_AMOUNT || isLoading ? 'text-stone-600' : walletAction === 'deposit' ? 'text-green-100' : 'text-blue-100'} ${isWalletDragging ? 'scale-110' : 'scale-100'}`} strokeWidth={3.5} />\n

\n balance || walletAction === 'deposit' && parseFloat(walletAmount) < MIN_DEPOSIT_AMOUNT || isLoading ? 'text-stone-500' : walletSliderPosition > 120 ? walletAction === 'deposit' ? 'text-green-700' : 'text-blue-700' : 'text-stone-600'} ${walletSliderPosition > 80 ? 'opacity-0' : 'opacity-100'}`}>\n {isLoading ? 'Processing...' : !walletAmount ? 'Enter amount first' : walletAction === 'withdraw' && parseFloat(walletAmount) > balance ? 'Insufficient balance' : walletAction === 'deposit' && parseFloat(walletAmount) < MIN_DEPOSIT_AMOUNT ? `Minimum ${MIN_DEPOSIT_AMOUNT} SOL` : `Slide to confirm ${walletAction}`}\n \n

\n {(() => {\n const rect = document.querySelector('.wallet-slider-track')?.getBoundingClientRect();\n const maxDistance = rect ? rect.width - 48 - 8 : 200;\n const percentage = walletSliderPosition / maxDistance * 100;\n return percentage >= 90 &&

\n \n Confirming {walletAction}...\n \n

;\n })()}\n

}\n {showBetModal && selectedMarket &&

Place Bet

\n setShowBetModal(false)}>\n \n \n

{selectedMarket.title}

\n Betting on: \n {selectedOption?.name.toUpperCase()}\n \n

\n \n {}\n {betAmount && parseFloat(betAmount) > 0 && selectedOption && (() => {\n const currentOdds = selectedOption.odds;\n const currentOptionAmount = selectedOption.amount || 0;\n const totalAmount = selectedMarket.totalAmount || 0;\n const margin = 0.05;\n const betAmountNum = parseFloat(betAmount);\n const newTotalAmount = totalAmount + betAmountNum;\n const newOptionAmount = currentOptionAmount + betAmountNum;\n let newOdds = newTotalAmount * (1 - margin) / newOptionAmount;\n newOdds = Math.max(1.0, newOdds);\n newOdds = Math.round(newOdds * 100) / 100;\n const potentialWinnings = betAmountNum * newOdds;\n return

\n Odds Impact:\n

\n \n {currentOdds.toFixed(2)}x\n \n \n → {newOdds.toFixed(2)}x\n \n

\n Potential Win:\n \n SOL\n \n

;\n })()}\n \n \n Amount (SOL)\n \n

\n setBetAmount(e.target.value)} className=\"flex-1 min-w-0 px-3 py-2 border border-stone-300 rounded-xl focus:ring-2 focus:ring-blue-400 focus:border-transparent bg-stone-50 text-stone-800\" placeholder=\"0.000\" />\n

\n \n \n \n

\n \n

\n Available: {balance} SOL\n

balance || isLoading ? 'rgba(168, 162, 158, 0.4)' : selectedOption?.color === 'green' ? 'rgba(34, 197, 94, 0.4)' : selectedOption?.color === 'red' ? 'rgba(239, 68, 68, 0.4)' : selectedOption?.color === 'blue' ? 'rgba(59, 130, 246, 0.4)' : selectedOption?.color === 'purple' ? 'rgba(139, 92, 246, 0.4)' : selectedOption?.color === 'orange' ? 'rgba(249, 115, 22, 0.4)' : 'rgba(168, 162, 158, 0.4)',\n backgroundColor: !betAmount || parseFloat(betAmount) > balance || isLoading ? 'rgba(231, 229, 228, 0.4)' : selectedOption?.color === 'green' ? 'rgba(34, 197, 94, 0.1)' : selectedOption?.color === 'red' ? 'rgba(239, 68, 68, 0.1)' : selectedOption?.color === 'blue' ? 'rgba(59, 130, 246, 0.1)' : selectedOption?.color === 'purple' ? 'rgba(139, 92, 246, 0.1)' : selectedOption?.color === 'orange' ? 'rgba(249, 115, 22, 0.1)' : 'rgba(231, 229, 228, 0.4)'\n }} onMouseMove={handleSliderChange} onMouseUp={handleSliderEnd} onMouseLeave={handleSliderEnd} onTouchMove={handleSliderChange} onTouchEnd={handleSliderEnd} onTouchCancel={handleSliderEnd}>\n {}\n

{\n if (sliderPosition <= 0) return 'transparent';\n const rect = document.querySelector('.slider-track')?.getBoundingClientRect();\n const maxDistance = rect ? rect.width - 48 - 8 : 200;\n const fillPercentage = Math.min(100, sliderPosition / maxDistance * 100);\n const colorMap = {\n green: '34, 197, 94',\n red: '239, 68, 68',\n blue: '59, 130, 246',\n purple: '139, 92, 246',\n orange: '249, 115, 22'\n };\n const rgb = colorMap[selectedOption?.color] || '75, 85, 99';\n return `linear-gradient(90deg, \n rgba(${rgb}, 0.02) 0%, \n rgba(${rgb}, 0.08) ${Math.max(0, fillPercentage * 0.3)}%, \n rgba(${rgb}, 0.15) ${Math.max(0, fillPercentage * 0.5)}%, \n rgba(${rgb}, 0.25) ${Math.max(0, fillPercentage * 0.7)}%, \n rgba(${rgb}, 0.35) ${Math.max(0, fillPercentage * 0.85)}%, \n rgba(${rgb}, 0.45) ${fillPercentage}%, \n rgba(${rgb}, 0.25) ${Math.min(100, fillPercentage + 8)}%, \n rgba(${rgb}, 0.1) ${Math.min(100, fillPercentage + 15)}%, \n transparent ${Math.min(100, fillPercentage + 25)}%)`;\n })(),\n backdropFilter: 'blur(8px)',\n boxShadow: sliderPosition > 0 ? `inset 0 0 30px rgba(${selectedOption?.color === 'green' ? '34, 197, 94' : selectedOption?.color === 'red' ? '239, 68, 68' : selectedOption?.color === 'blue' ? '59, 130, 246' : selectedOption?.color === 'purple' ? '139, 92, 246' : selectedOption?.color === 'orange' ? '249, 115, 22' : '75, 85, 99'}, 0.4)` : 'none',\n transition: isDragging ? 'none' : 'all 0.3s cubic-bezier(0.4, 0, 0.2, 1)',\n filter: 'blur(2px)'\n }} />\n {}\n

balance || isLoading || !selectedOption ? 'cursor-not-allowed' : 'cursor-grab active:cursor-grabbing'} ${isDragging ? 'scale-110' : 'scale-100'} flex items-center justify-center duration-200`} style={{\n left: `${4 + sliderPosition}px`,\n transition: isDragging ? 'transform 0.1s ease-out' : 'all 0.3s cubic-bezier(0.4, 0, 0.2, 1)',\n transform: `translateY(-50%) ${isDragging ? 'scale(1.1)' : 'scale(1)'}`\n }} onMouseDown={handleSliderStart} onTouchStart={handleSliderStart}>\n

balance || isLoading || !selectedOption ? 'bg-black/20 border-white/20 shadow-[0_0_6px_rgba(0,0,0,0.03),0_2px_6px_rgba(0,0,0,0.08),inset_3px_3px_0.5px_-3px_rgba(255,255,255,0.4),inset_-3px_-3px_0.5px_-3px_rgba(255,255,255,0.35),inset_1px_1px_1px_-0.5px_rgba(255,255,255,0.3),inset_-1px_-1px_1px_-0.5px_rgba(255,255,255,0.3),inset_0_0_6px_6px_rgba(0,0,0,0.12),inset_0_0_2px_2px_rgba(0,0,0,0.06),0_0_12px_rgba(255,255,255,0.15)]' : selectedOption?.color === 'green' ? 'bg-green-500/30 border-green-300/40 shadow-[0_0_6px_rgba(34,197,94,0.1),0_2px_6px_rgba(34,197,94,0.15),inset_3px_3px_0.5px_-3px_rgba(255,255,255,0.4),inset_-3px_-3px_0.5px_-3px_rgba(255,255,255,0.35),inset_1px_1px_1px_-0.5px_rgba(255,255,255,0.3),inset_-1px_-1px_1px_-0.5px_rgba(255,255,255,0.3),inset_0_0_6px_6px_rgba(0,0,0,0.12),inset_0_0_2px_2px_rgba(34,197,94,0.1),0_0_12px_rgba(34,197,94,0.3)]' : selectedOption?.color === 'red' ? 'bg-red-500/30 border-red-300/40 shadow-[0_0_6px_rgba(239,68,68,0.1),0_2px_6px_rgba(239,68,68,0.15),inset_3px_3px_0.5px_-3px_rgba(255,255,255,0.4),inset_-3px_-3px_0.5px_-3px_rgba(255,255,255,0.35),inset_1px_1px_1px_-0.5px_rgba(255,255,255,0.3),inset_-1px_-1px_1px_-0.5px_rgba(255,255,255,0.3),inset_0_0_6px_6px_rgba(0,0,0,0.12),inset_0_0_2px_2px_rgba(239,68,68,0.1),0_0_12px_rgba(239,68,68,0.3)]' : selectedOption?.color === 'blue' ? 'bg-blue-500/30 border-blue-300/40 shadow-[0_0_6px_rgba(59,130,246,0.1),0_2px_6px_rgba(59,130,246,0.15),inset_3px_3px_0.5px_-3px_rgba(255,255,255,0.4),inset_-3px_-3px_0.5px_-3px_rgba(255,255,255,0.35),inset_1px_1px_1px_-0.5px_rgba(255,255,255,0.3),inset_-1px_-1px_1px_-0.5px_rgba(255,255,255,0.3),inset_0_0_6px_6px_rgba(0,0,0,0.12),inset_0_0_2px_2px_rgba(59,130,246,0.1),0_0_12px_rgba(59,130,246,0.3)]' : selectedOption?.color === 'purple' ? 'bg-purple-500/30 border-purple-300/40 shadow-[0_0_6px_rgba(139,92,246,0.1),0_2px_6px_rgba(139,92,246,0.15),inset_3px_3px_0.5px_-3px_rgba(255,255,255,0.4),inset_-3px_-3px_0.5px_-3px_rgba(255,255,255,0.35),inset_1px_1px_1px_-0.5px_rgba(255,255,255,0.3),inset_-1px_-1px_1px_-0.5px_rgba(255,255,255,0.3),inset_0_0_6px_6px_rgba(0,0,0,0.12),inset_0_0_2px_2px_rgba(139,92,246,0.1),0_0_12px_rgba(139,92,246,0.3)]' : selectedOption?.color === 'orange' ? 'bg-orange-500/30 border-orange-300/40 shadow-[0_0_6px_rgba(249,115,22,0.1),0_2px_6px_rgba(249,115,22,0.15),inset_3px_3px_0.5px_-3px_rgba(255,255,255,0.4),inset_-3px_-3px_0.5px_-3px_rgba(255,255,255,0.35),inset_1px_1px_1px_-0.5px_rgba(255,255,255,0.3),inset_-1px_-1px_1px_-0.5px_rgba(255,255,255,0.3),inset_0_0_6px_6px_rgba(0,0,0,0.12),inset_0_0_2px_2px_rgba(249,115,22,0.1),0_0_12px_rgba(249,115,22,0.3)]' : 'bg-black/20 border-white/20 shadow-[0_0_6px_rgba(0,0,0,0.03),0_2px_6px_rgba(0,0,0,0.08),inset_3px_3px_0.5px_-3px_rgba(255,255,255,0.4),inset_-3px_-3px_0.5px_-3px_rgba(255,255,255,0.35),inset_1px_1px_1px_-0.5px_rgba(255,255,255,0.3),inset_-1px_-1px_1px_-0.5px_rgba(255,255,255,0.3),inset_0_0_6px_6px_rgba(0,0,0,0.12),inset_0_0_2px_2px_rgba(0,0,0,0.06),0_0_12px_rgba(255,255,255,0.15)]'} ${isDragging ? 'shadow-[0_0_8px_rgba(0,0,0,0.04),0_3px_8px_rgba(0,0,0,0.1),inset_3px_3px_0.5px_-3px_rgba(255,255,255,0.5),inset_-3px_-3px_0.5px_-3px_rgba(255,255,255,0.45),inset_1px_1px_1px_-0.5px_rgba(255,255,255,0.4),inset_-1px_-1px_1px_-0.5px_rgba(255,255,255,0.4),inset_0_0_8px_8px_rgba(0,0,0,0.15),inset_0_0_3px_3px_rgba(0,0,0,0.08),0_0_16px_rgba(255,255,255,0.2)]' : ''}`} />\n balance || isLoading || !selectedOption ? '#78716c' : selectedOption?.color === 'green' ? '#dcfce7' : selectedOption?.color === 'red' ? '#fef2f2' : selectedOption?.color === 'blue' ? '#dbeafe' : selectedOption?.color === 'purple' ? '#f3e8ff' : selectedOption?.color === 'orange' ? '#fed7aa' : '#f5f5f4'\n }} />\n

\n {}\n

\n 80 ? 'opacity-0' : 'opacity-100'}`} style={{\n color: !betAmount || parseFloat(betAmount) > balance || isLoading || !selectedOption ? '#78716c' : sliderPosition > 120 ? selectedOption?.color === 'green' ? '#15803d' : selectedOption?.color === 'red' ? '#dc2626' : selectedOption?.color === 'blue' ? '#2563eb' : selectedOption?.color === 'purple' ? '#7c3aed' : selectedOption?.color === 'orange' ? '#ea580c' : '#57534e' : '#57534e'\n }}>\n {isLoading ? 'Processing...' : !betAmount ? 'Enter amount first' : parseFloat(betAmount) > balance ? 'Insufficient balance' : !selectedOption ? 'Select option first' : 'Slide to confirm bet'}\n \n

\n {}\n {(() => {\n const rect = document.querySelector('.slider-track')?.getBoundingClientRect();\n const maxDistance = rect ? rect.width - 48 - 8 : 200;\n const percentage = sliderPosition / maxDistance * 100;\n return percentage >= 90 &&

\n \n Confirming bet...\n \n

;\n })()}\n

}\n {showAdminPanel && isAdmin &&

Admin Panel

\n setShowAdminPanel(false)}>\n \n \n

\n setShowCreateMarket(true)} contentClassName=\"flex items-center gap-2\" style={{\n background: 'linear-gradient(135deg, rgba(34, 197, 94, 0.2) 0%, rgba(21, 128, 61, 0.3) 100%)',\n borderColor: 'rgba(34, 197, 94, 0.4)',\n color: '#166534'\n }}>\n \n Create\n \n \n

\n {markets.filter(market => {\n if (adminMarketFilter === 'live') {\n return market.isActive;\n } else {\n return !market.isActive;\n }\n }).map(market =>

\n \n {market.category}\n \n {market.winner && \n WON\n }\n {market.refunded && \n REFUNDED\n }\n {market.isActive && market.acceptingBets === false && \n Bets Closed\n }\n

{market.title}

\n {market.options.map(option =>

\n {option.name}: SOL\n

)}\n

\n {market.isActive && !market.refunded && market.options.map(option => handleSetWinner(market.id, option.id)} contentClassName=\"flex items-center justify-center\" style={{\n background: 'linear-gradient(135deg, rgba(59, 130, 246, 0.2) 0%, rgba(29, 78, 216, 0.3) 100%)',\n borderColor: 'rgba(59, 130, 246, 0.4)',\n color: '#1e40af'\n }}>\n {option.name}\n )}\n {market.isActive && !market.refunded && handleToggleBettingStatus(market.id, market.acceptingBets)} contentClassName=\"flex items-center justify-center gap-1\" style={{\n background: market.acceptingBets === false ? 'linear-gradient(135deg, rgba(34, 197, 94, 0.2) 0%, rgba(21, 128, 61, 0.3) 100%)' : 'linear-gradient(135deg, rgba(245, 158, 11, 0.2) 0%, rgba(217, 119, 6, 0.3) 100%)',\n borderColor: market.acceptingBets === false ? 'rgba(34, 197, 94, 0.4)' : 'rgba(245, 158, 11, 0.4)',\n color: market.acceptingBets === false ? '#166534' : '#92400e'\n }}>\n {market.acceptingBets === false ? : }\n {market.acceptingBets === false ? 'Resume' : 'Pause'}\n }\n {market.isActive && !market.refunded && handleRefundMarket(market.id)} contentClassName=\"flex items-center justify-center\" style={{\n background: 'linear-gradient(135deg, rgba(245, 158, 11, 0.2) 0%, rgba(217, 119, 6, 0.3) 100%)',\n borderColor: 'rgba(245, 158, 11, 0.4)',\n color: '#92400e'\n }}>\n Refund\n }\n handleDeleteMarket(market.id)} style={{\n background: 'linear-gradient(135deg, rgba(239, 68, 68, 0.2) 0%, rgba(185, 28, 28, 0.3) 100%)',\n borderColor: 'rgba(239, 68, 68, 0.4)',\n color: '#991b1b'\n }}>\n \n \n

)}\n

}\n {showCreateMarket &&

Create Market

\n setShowCreateMarket(false)}>\n \n \n

\n \n Title\n \n setNewMarket({\n ...newMarket,\n title: e.target.value\n })} className=\"w-full px-3 py-2 border border-stone-300 rounded-xl focus:ring-2 focus:ring-blue-400 focus:border-transparent bg-stone-50 text-stone-800\" placeholder=\"Market title\" />\n

\n \n Description\n \n

setNewMarket({\n              ...newMarket,\n              description: e.target.value\n            })} className=\"w-full px-3 py-2 border border-stone-300 rounded-xl focus:ring-2 focus:ring-blue-400 focus:border-transparent bg-stone-50 text-stone-800\" placeholder=\"Market description\" rows=\"3\" />\n              </div>\n              <div>\n                <label className=\"block text-sm font-medium text-stone-700 mb-2\">\n                  Category\n                </label>\n                <input type=\"text\" value={newMarket.category} onChange={e => setNewMarket({\n              ...newMarket,\n              category: e.target.value\n            })} className=\"w-full px-3 py-2 border border-stone-300 rounded-xl focus:ring-2 focus:ring-blue-400 focus:border-transparent bg-stone-50 text-stone-800\" placeholder=\"Category\" />\n              </div>\n              <div>\n                <label className=\"block text-sm font-medium text-stone-700 mb-2\">\n                  Bet Type\n                </label>\n                <div className=\"flex gap-3 mb-4\">\n                  <GlassButton size=\"sm\" onClick={() => setNewMarket({\n                ...newMarket,\n                type: 'standard',\n                options: [{\n                  name: 'Yes',\n                  color: 'green'\n                }, {\n                  name: 'No',\n                  color: 'red'\n                }]\n              })} className=\"flex-1\" contentClassName=\"flex items-center justify-center\" style={newMarket.type === 'standard' ? {\n                background: 'linear-gradient(135deg, rgba(59, 130, 246, 0.3) 0%, rgba(29, 78, 216, 0.4) 100%)',\n                borderColor: 'rgba(59, 130, 246, 0.5)',\n                color: '#1e40af'\n              } : {\n                background: 'linear-gradient(135deg, rgba(168, 162, 158, 0.2) 0%, rgba(120, 113, 108, 0.3) 100%)',\n                borderColor: 'rgba(168, 162, 158, 0.4)',\n                color: '#57534e'\n              }}>\n                    Standard (Yes/No)\n                  </GlassButton>\n                  <GlassButton size=\"sm\" onClick={() => setNewMarket({\n                ...newMarket,\n                type: 'custom',\n                options: [{\n                  name: '',\n                  color: 'green'\n                }, {\n                  name: '',\n                  color: 'red'\n                }]\n              })} className=\"flex-1\" contentClassName=\"flex items-center justify-center\" style={newMarket.type === 'custom' ? {\n                background: 'linear-gradient(135deg, rgba(59, 130, 246, 0.3) 0%, rgba(29, 78, 216, 0.4) 100%)',\n                borderColor: 'rgba(59, 130, 246, 0.5)',\n                color: '#1e40af'\n              } : {\n                background: 'linear-gradient(135deg, rgba(168, 162, 158, 0.2) 0%, rgba(120, 113, 108, 0.3) 100%)',\n                borderColor: 'rgba(168, 162, 158, 0.4)',\n                color: '#57534e'\n              }}>\n                    Custom Options\n                  </GlassButton>\n                </div>\n              </div>\n              {newMarket.type === 'custom' && <div>\n                <label className=\"block text-sm font-medium text-stone-700 mb-2\">\n                  Options\n                </label>\n                <div className=\"space-y-2\">\n                  {newMarket.options.map((option, index) => <div key={index} className=\"flex gap-2 items-center\">\n                      <input type=\"text\" value={option.name} onChange={e => updateOption(index, 'name', e.target.value)} className=\"flex-1 px-3 py-2 border border-stone-300 rounded-xl focus:ring-2 focus:ring-blue-400 focus:border-transparent bg-stone-50 text-stone-800\" placeholder={`Option ${index + 1}`} />\n                      <select value={option.color} onChange={e => updateOption(index, 'color', e.target.value)} className=\"px-3 py-2 border border-stone-300 rounded-xl focus:ring-2 focus:ring-blue-400 focus:border-transparent bg-stone-50 text-stone-800\">\n                        <option value=\"green\">Green</option>\n                        <option value=\"red\">Red</option>\n                        <option value=\"blue\">Blue</option>\n                        <option value=\"purple\">Purple</option>\n                        <option value=\"orange\">Orange</option>\n                      </select>\n                      {newMarket.options.length > 2 && <GlassButton size=\"icon\" onClick={() => removeOption(index)} style={{\n                  background: 'linear-gradient(135deg, rgba(239, 68, 68, 0.2) 0%, rgba(185, 28, 28, 0.3) 100%)',\n                  borderColor: 'rgba(239, 68, 68, 0.4)',\n                  color: '#991b1b'\n                }}>\n                          <Trash2 className=\"h-4 w-4\" strokeWidth={3.5} />\n                        </GlassButton>}\n                    </div>)}\n                  <GlassButton onClick={addOption} className=\"w-full\" style={{\n                background: 'linear-gradient(135deg, rgba(34, 197, 94, 0.2) 0%, rgba(21, 128, 61, 0.3) 100%)',\n                borderColor: 'rgba(34, 197, 94, 0.4)',\n                color: '#166534'\n              }}>\n                    + Add Option\n                  </GlassButton>\n                </div>\n              </div>}\n              <div className=\"flex gap-3 justify-center\">\n                <GlassButton size=\"default\" onClick={() => setShowCreateMarket(false)} className=\"px-8\">\n                  Cancel\n                </GlassButton>\n                <GlassButton size=\"default\" onClick={handleCreateMarket} disabled={!newMarket.title || !newMarket.category || isLoading || newMarket.type === 'custom' && newMarket.options.some(opt => !opt.name.trim())} className=\"px-8 disabled:opacity-50 disabled:cursor-not-allowed\">\n                  {isLoading ? 'Creating...' : 'Create'}\n                </GlassButton>\n              </div>\n            </div>\n          </div>\n        </div>}\n    </div>;\n}\nexport default function AppWithProvider() {\n  return <DevappProvider rpcEndpoint=\"https://rpc.dev.fun/2b8cd8d2af5721ea072c\" devbaseEndpoint=\"https://devbase.dev.fun\" appId=\"2b8cd8d2af5721ea072c\">\n      <style>{`\n        @import url('https://fonts.googleapis.com/css2?family=Bungee&display=swap');\n        * {\n          font-family: 'Bungee', cursive;\n        }\n      `}</style>\n      <App />\n    </DevappProvider>;\n}","packageJson","{\"dependencies\":{\"react\":\"18.2.0\",\"lucide-react\":\"0.441.0\",\"@devfunlabs/web-sdk\":\"0.5.6\",\"react-router-dom\":\"6.18.0\",\"recharts\":\"2.8.0\",\"framer-motion\":\"10.16.4\",\"socket.io-client\":\"4.7.1\",\"@solana/web3.js\":\"1.95.3\",\"zod\":\"3.22.4\",\"@number-flow/react\":\"0.2.0\"}}","appFunctions",[81,89,95,101],{"_14":82,"_37":83,"_39":84,"_20":85,"_86":87,"_88":42},["B","31290"],["D",1758284960737],["D",1758284960737],"$FUNC_CAN_BET","body","async function $FUNC_CAN_BET(marketId, amount) {\n      if (!amount || amount <= 0) return false;\n      if (!$USER_ID || $USER_ID !== $newData.userId) return false;\n      \n      const market = await $ENTITY('markets').get(marketId);\n      if (!market || !market.isActive || market.acceptingBets === false) return false;\n      \n      const totalDeposits = await $ENTITY('deposits').sum({ userId: $USER_ID }, 'amount') || 0;\n      const totalWithdrawals = await $ENTITY('withdrawals').sum({ userId: $USER_ID }, 'amount') || 0;\n      const totalBets = await $ENTITY('bets').sum({ userId: $USER_ID }, 'amount') || 0;\n      const totalPayouts = await $ENTITY('payouts').sum({ userId: $USER_ID }, 'amount') || 0;\n      const currentBalance = totalDeposits - totalWithdrawals - totalBets + totalPayouts;\n      \n      // Round balance to 3 decimal places for consistency\n      const roundedBalance = Math.round(currentBalance * 1000) / 1000;\n      return amount <= roundedBalance;\n    }","commitId",{"_14":90,"_37":91,"_39":92,"_20":93,"_86":94,"_88":42},["B","31291"],["D",1758284960740],["D",1758284960740],"$FUNC_CAN_WITHDRAW","async function $FUNC_CAN_WITHDRAW(amount) {\n      if (!amount || amount <= 0) return false;\n      \n      const totalDeposits = await $ENTITY('deposits').sum({ userId: $USER_ID }, 'amount') || 0;\n      const totalWithdrawals = await $ENTITY('withdrawals').sum({ userId: $USER_ID }, 'amount') || 0;\n      const totalBets = await $ENTITY('bets').sum({ userId: $USER_ID }, 'amount') || 0;\n      const totalPayouts = await $ENTITY('payouts').sum({ userId: $USER_ID }, 'amount') || 0;\n      const currentBalance = totalDeposits - totalWithdrawals - totalBets + totalPayouts;\n      \n      // Round balance to 3 decimal places for consistency\n      const roundedBalance = Math.round(currentBalance * 1000) / 1000;\n      return amount <= roundedBalance && $USER_ID === $newData.userId;\n    }",{"_14":96,"_37":97,"_39":98,"_20":99,"_86":100,"_88":42},["B","31292"],["D",1758284960741],["D",1758284960741],"$FUNC_GET_TIMESTAMP","async function $FUNC_GET_TIMESTAMP() {\n      return Date.now();\n    }",{"_14":102,"_37":103,"_39":104,"_20":105,"_86":106,"_88":42},["B","31293"],["D",1758284960742],["D",1758284960742],"$FUNC_IS_ADMIN","async function $FUNC_IS_ADMIN() {\n      return $USER_ID === '6qBy1hV2W5kyaKGy8TmwLLyGsGGdb26z4zBeQ77H4okQ';\n    }","token","upstreamApp","isLordOfDev","analytics",[112,116,118,120,122,124,126,128,130,132,134,136,138,140,142],{"_113":114,"_115":62},"day","2025-09-05","runCount",{"_113":117,"_115":62},"2025-09-06",{"_113":119,"_115":62},"2025-09-07",{"_113":121,"_115":62},"2025-09-08",{"_113":123,"_115":62},"2025-09-09",{"_113":125,"_115":62},"2025-09-10",{"_113":127,"_115":62},"2025-09-11",{"_113":129,"_115":62},"2025-09-12",{"_113":131,"_115":62},"2025-09-13",{"_113":133,"_115":62},"2025-09-14",{"_113":135,"_115":62},"2025-09-15",{"_113":137,"_115":62},"2025-09-16",{"_113":139,"_115":62},"2025-09-17",{"_113":141,"_115":62},"2025-09-18",{"_113":143,"_115":65},"2025-09-19","snapshot","ogImage","https://cdn.dev.fun/og/image/2b8cd8d2af5721ea072c/1016a17c.webp","isDevbase","project",{"_14":19,"_150":-5,"_20":151,"_152":153,"_22":154},"image","solmines","oneliner","High-stakes SOL minefield","Step into the most nerve-wracking SOL betting experience where every click could either fill your wallet or blow it to smithereens! Navigate a treacherous 5x5 minefield where hidden bombs lurk beneath innocent-looking tiles – the more tiles you reveal without exploding, the bigger your SOL multiplier grows. But get greedy and hit a mine? Say goodbye to your entire bet as your dreams go BOOM in spectacular fashion!","actionData","errors"]
</article></body></html>

say something