[{"_1":2,"_134":-5,"_135":-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,"_132":-5,"_128":-5,"_133":-5},"appDetail",{"_14":15,"_16":17,"_18":19,"_20":21,"_22":23,"_24":25,"_26":25,"_27":28,"_30":31,"_32":33,"_34":35,"_36":37,"_38":39,"_40":41,"_42":43,"_5":44,"_55":56,"_57":58,"_59":58,"_60":61,"_62":58,"_63":58,"_64":58,"_65":58,"_66":58,"_67":58,"_68":17,"_69":17,"_70":71,"_72":73,"_74":75,"_76":77,"_78":79,"_94":-5,"_95":17,"_96":97,"_128":31,"_129":130,"_131":17},"id","51c8240812b2f3912cfa","isMyApp",false,"name","solanasage","description","Level up your crypto knowledge with this mind-bending Solana quiz adventure! Challenge yourself through increasingly difficult levels while your progress gets immortalized on-chain, earning you XP that propels you up the leaderboard and bragging rights in the Solana universe.","brief","Master Solana, earn XP, and climb the leaderboard with your blockchain-verified quiz prowess!","isLive",true,"isPublic","tags",[29],"💰","cover","https://cdn.dev.fun/snapshot/51c8240812b2f3912cfa/78233_803e9ab7.webp","cdnUrl","https://cdn.dev.fun/app/51c8240812b2f3912cfa/78233","createdAt",["D",1749330322158],"updatedAt",["D",1749559172798],"lastCommitId",["B","78233"],"tier",1,"credits",-8,{"_14":45,"_46":47,"_48":-5,"_49":47,"_50":51,"_52":-5,"_53":54},"310cd755-9ba0-47a2-8e36-3c963aab8665","uniqueId","4MgC8k9YDmoeW3BhxBYajvqepe3E2de6DheZ1cxeaQVV","username","solanaWallet","displayName","4Mg...QVV","bio","avatar","/avatar.svg","commitCount",4,"forkCount",0,"likeCount","runsCount",14,"downvoteCount","upvoteCount","upvoteRate","commentCount","reportCount","visitorCount","isArchived","isRenamed","contractAddress","3HfLqhtF5hR5dyBXh6BMtRaTm9qzStvEGuMa8Gx6pump","code","import { useState, useEffect } from 'react';\nimport { WalletMultiButton } from \"@solana/wallet-adapter-react-ui\";\nimport { useWallet } from \"@solana/wallet-adapter-react\";\nimport { ConnectionProvider, WalletProvider } from \"@solana/wallet-adapter-react\";\nimport { WalletModalProvider } from \"@solana/wallet-adapter-react-ui\";\nimport { PhantomWalletAdapter, SolflareWalletAdapter } from '@solana/wallet-adapter-wallets';\nimport { StateClient } from '@devfunlabs/state-client';\nimport { motion, AnimatePresence } from 'framer-motion';\nimport { Brain, Award, ArrowRight, Zap, Home, Trophy, ChevronRight, RotateCcw, CheckCircle2, XCircle, Lock, Medal, Grid3X3, ArrowLeft } from 'lucide-react';\nimport \"@solana/wallet-adapter-react-ui/styles.css\";\nconst stateClient = new StateClient({\n baseURL: 'https://state.dev.fun',\n appId: '51c8240812b2f3912cfa'\n});\nconst quizLevels = {\n beginner: {\n name: \"Beginner\",\n description: \"Start your Solana journey here!\",\n levels: [{\n id: \"beginner-1\",\n name: \"Solana Basics\",\n badge: {\n name: \"Solana Novice\",\n image: \"🔰\",\n description: \"You've taken your first steps into the Solana ecosystem!\"\n },\n questions: [{\n question: \"What is Solana's native cryptocurrency?\",\n options: [\"SOL\", \"LUNA\", \"ETH\", \"BNB\"],\n correctAnswer: \"SOL\",\n explanation: \"SOL is the native cryptocurrency of the Solana blockchain.\"\n }, {\n question: \"What consensus mechanism does Solana use?\",\n options: [\"Proof of History\", \"Proof of Work\", \"Proof of Stake\", \"Proof of History + Proof of Stake\"],\n correctAnswer: \"Proof of History + Proof of Stake\",\n explanation: \"Solana uses a hybrid consensus mechanism combining Proof of History with Proof of Stake.\"\n }, {\n question: \"When was Solana launched?\",\n options: [\"2017\", \"2018\", \"2020\", \"2021\"],\n correctAnswer: \"2020\",\n explanation: \"Solana's mainnet beta launched in March 2020.\"\n }]\n }, {\n id: \"beginner-2\",\n name: \"Solana Tokens\",\n badge: {\n name: \"Token Explorer\",\n image: \"🪙\",\n description: \"You've mastered the basics of Solana tokens!\"\n },\n questions: [{\n question: \"What are Solana's transactions called?\",\n options: [\"Transfers\", \"Messages\", \"Transactions\", \"Airdrops\"],\n correctAnswer: \"Transactions\",\n explanation: \"Like most blockchains, operations on Solana are called transactions.\"\n }, {\n question: \"What programming language is primarily used for Solana development?\",\n options: [\"JavaScript\", \"Rust\", \"Python\", \"C++\"],\n correctAnswer: \"Rust\",\n explanation: \"Rust is the primary programming language used for Solana development.\"\n }, {\n question: \"What is the standard for tokens on Solana?\",\n options: [\"SPL Token\", \"ERC-20\", \"BEP-20\", \"SNIP-20\"],\n correctAnswer: \"SPL Token\",\n explanation: \"SPL Token is the standard for fungible tokens on Solana, similar to ERC-20 on Ethereum.\"\n }]\n }, {\n id: \"beginner-3\",\n name: \"Solana Wallets\",\n badge: {\n name: \"Wallet Wizard\",\n image: \"👛\",\n description: \"You understand how to manage your Solana assets!\"\n },\n questions: []\n }, {\n id: \"beginner-4\",\n name: \"Solana NFTs\",\n badge: {\n name: \"NFT Initiate\",\n image: \"🖼️\",\n description: \"You've learned the basics of Solana NFTs!\"\n },\n questions: []\n }, {\n id: \"beginner-5\",\n name: \"Solana DeFi Basics\",\n badge: {\n name: \"DeFi Dabbler\",\n image: \"💱\",\n description: \"You've entered the world of Solana DeFi!\"\n },\n questions: []\n }, {\n id: \"beginner-6\",\n name: \"Solana Ecosystem\",\n badge: {\n name: \"Ecosystem Explorer\",\n image: \"🌐\",\n description: \"You've discovered the vibrant Solana ecosystem!\"\n },\n questions: []\n }, {\n id: \"beginner-7\",\n name: \"Solana Staking\",\n badge: {\n name: \"Staking Starter\",\n image: \"📌\",\n description: \"You understand the basics of Solana staking!\"\n },\n questions: []\n }, {\n id: \"beginner-8\",\n name: \"Solana Security\",\n badge: {\n name: \"Security Scout\",\n image: \"🔒\",\n description: \"You've learned how to stay safe in the Solana ecosystem!\"\n },\n questions: []\n }, {\n id: \"beginner-9\",\n name: \"Solana Governance\",\n badge: {\n name: \"Governance Greenhorn\",\n image: \"🗳️\",\n description: \"You understand how decisions are made in Solana!\"\n },\n questions: []\n }, {\n id: \"beginner-10\",\n name: \"Solana History\",\n badge: {\n name: \"History Buff\",\n image: \"📜\",\n description: \"You know the origins and journey of Solana!\"\n },\n questions: []\n }]\n },\n intermediate: {\n name: \"Intermediate\",\n description: \"Ready for more challenging concepts?\",\n levels: [{\n id: \"intermediate-1\",\n name: \"Solana Architecture\",\n badge: {\n name: \"Architecture Apprentice\",\n image: \"🏗️\",\n description: \"You understand how Solana is structured!\"\n },\n questions: [{\n question: \"What is a unique feature of Solana that helps it achieve high throughput?\",\n options: [\"Sharding\", \"Proof of History\", \"Layer 2 solutions\", \"Sidechains\"],\n correctAnswer: \"Proof of History\",\n explanation: \"Proof of History is a unique feature that creates a historical record of when transactions occurred, helping Solana achieve high throughput.\"\n }, {\n question: \"What is Solana's throughput in transactions per second?\",\n options: [\"Up to 50,000\", \"Up to 5,000\", \"Up to 65,000\", \"Up to 20,000\"],\n correctAnswer: \"Up to 65,000\",\n explanation: \"Solana can theoretically process up to 65,000 transactions per second.\"\n }, {\n question: \"What is the Solana Program Library (SPL)?\",\n options: [\"A collection of on-chain programs\", \"An IDE for Solana development\", \"A wallet for SOL tokens\", \"A marketplace for Solana NFTs\"],\n correctAnswer: \"A collection of on-chain programs\",\n explanation: \"The Solana Program Library (SPL) is a collection of on-chain programs that serve as standards for the Solana ecosystem.\"\n }]\n }, {\n id: \"intermediate-2\",\n name: \"Solana Epochs\",\n badge: {\n name: \"Epoch Expert\",\n image: \"⏱️\",\n description: \"You understand Solana's time-based mechanisms!\"\n },\n questions: [{\n question: \"What is a Solana epoch?\",\n options: [\"A measure of time (approximately 2-3 days)\", \"A type of validator node\", \"A governance proposal\", \"A software update\"],\n correctAnswer: \"A measure of time (approximately 2-3 days)\",\n explanation: \"A Solana epoch is a measure of time (approximately 2-3 days) used for validator rewards and other network operations.\"\n }, {\n question: \"What does SPL stand for in Solana?\",\n options: [\"Solana Program Library\", \"Solana Protocol Language\", \"Standard Programming Language\", \"Solana Public Ledger\"],\n correctAnswer: \"Solana Program Library\",\n explanation: \"SPL stands for Solana Program Library, which is a collection of on-chain programs/smart contracts.\"\n }, {\n question: \"What is a slot in Solana?\",\n options: [\"A time period for a leader to produce a block\", \"A validator position\", \"A type of token\", \"A wallet interface\"],\n correctAnswer: \"A time period for a leader to produce a block\",\n explanation: \"In Solana, a slot is a time period (approximately 400ms) during which a leader validator is expected to produce a block.\"\n }]\n }, {\n id: \"intermediate-3\",\n name: \"Solana Programming I\",\n badge: {\n name: \"Code Cadet\",\n image: \"💻\",\n description: \"You've begun your journey into Solana development!\"\n },\n questions: []\n }, {\n id: \"intermediate-4\",\n name: \"Solana Programming II\",\n badge: {\n name: \"Program Pioneer\",\n image: \"👨‍💻\",\n description: \"You're advancing in Solana development skills!\"\n },\n questions: []\n }, {\n id: \"intermediate-5\",\n name: \"Solana DeFi Mechanics\",\n badge: {\n name: \"DeFi Detective\",\n image: \"🕵️\",\n description: \"You understand how DeFi works on Solana!\"\n },\n questions: []\n }, {\n id: \"intermediate-6\",\n name: \"Solana NFT Standards\",\n badge: {\n name: \"NFT Specialist\",\n image: \"🎭\",\n description: \"You've mastered NFT concepts on Solana!\"\n },\n questions: []\n }, {\n id: \"intermediate-7\",\n name: \"Solana Validator Operations\",\n badge: {\n name: \"Validator Virtuoso\",\n image: \"⚙️\",\n description: \"You understand how Solana validators work!\"\n },\n questions: []\n }, {\n id: \"intermediate-8\",\n name: \"Solana Economics\",\n badge: {\n name: \"Economics Enthusiast\",\n image: \"📊\",\n description: \"You understand Solana's economic model!\"\n },\n questions: []\n }, {\n id: \"intermediate-9\",\n name: \"Solana Bridges\",\n badge: {\n name: \"Bridge Builder\",\n image: \"🌉\",\n description: \"You understand cross-chain interactions with Solana!\"\n },\n questions: []\n }, {\n id: \"intermediate-10\",\n name: \"Solana Security II\",\n badge: {\n name: \"Security Specialist\",\n image: \"🛡️\",\n description: \"You've mastered advanced security concepts on Solana!\"\n },\n questions: []\n }]\n },\n advanced: {\n name: \"Advanced\",\n description: \"Test your deep knowledge of Solana!\",\n levels: [{\n id: \"advanced-1\",\n name: \"Solana Core Technologies\",\n badge: {\n name: \"Core Technologist\",\n image: \"⚛️\",\n description: \"You understand Solana's fundamental technologies!\"\n },\n questions: [{\n question: \"What is the term for Solana's ability to sequence transactions before consensus?\",\n options: [\"Tower BFT\", \"Gulf Stream\", \"Turbine\", \"Cloudbreak\"],\n correctAnswer: \"Gulf Stream\",\n explanation: \"Gulf Stream is Solana's mempool management system that forwards transactions to validators before the previous batch completes.\"\n }, {\n question: \"What's the maximum size of a Solana transaction?\",\n options: [\"1232 bytes\", \"512 bytes\", \"1 MB\", \"8 KB\"],\n correctAnswer: \"1232 bytes\",\n explanation: \"Solana transactions have a maximum size of 1232 bytes.\"\n }, {\n question: \"What protocol does Solana use to share blocks amongst validators?\",\n options: [\"Sealevel\", \"Turbine\", \"Pipelining\", \"Archivers\"],\n correctAnswer: \"Turbine\",\n explanation: \"Turbine is Solana's block propagation protocol that allows the network to scale to thousands of nodes.\"\n }]\n }, {\n id: \"advanced-2\",\n name: \"Solana Consensus\",\n badge: {\n name: \"Consensus Connoisseur\",\n image: \"🤝\",\n description: \"You understand how Solana reaches agreement!\"\n },\n questions: [{\n question: \"What is a 'stake' in Solana's consensus mechanism?\",\n options: [\"Voting power determined by SOL holdings\", \"A type of governance proposal\", \"A punishment for validators\", \"A network fee structure\"],\n correctAnswer: \"Voting power determined by SOL holdings\",\n explanation: \"In Solana, stake refers to the voting power of validators, determined by the amount of SOL delegated to them.\"\n }, {\n question: \"What is Solana's parallel processing engine called?\",\n options: [\"Turbine\", \"Sealevel\", \"Gulf Stream\", \"Cloudbreak\"],\n correctAnswer: \"Sealevel\",\n explanation: \"Sealevel is Solana's parallel processing runtime that allows for thousands of smart contracts to run concurrently.\"\n }, {\n question: \"What consensus mechanism does Solana use to finalize transactions?\",\n options: [\"Tower BFT\", \"Practical Byzantine Fault Tolerance\", \"Delegated Proof of Stake\", \"Raft Consensus\"],\n correctAnswer: \"Tower BFT\",\n explanation: \"Tower BFT is a modified version of PBFT that Solana uses to finalize transactions.\"\n }]\n }, {\n id: \"advanced-3\",\n name: \"Solana Virtual Machine\",\n badge: {\n name: \"VM Virtuoso\",\n image: \"🖥️\",\n description: \"You understand Solana's execution environment!\"\n },\n questions: []\n }, {\n id: \"advanced-4\",\n name: \"Solana Accounts Model\",\n badge: {\n name: \"Accounts Ace\",\n image: \"📒\",\n description: \"You've mastered Solana's unique accounts system!\"\n },\n questions: []\n }, {\n id: \"advanced-5\",\n name: \"Solana Tokenomics\",\n badge: {\n name: \"Tokenomics Tactician\",\n image: \"📈\",\n description: \"You understand the economic principles of Solana!\"\n },\n questions: []\n }, {\n id: \"advanced-6\",\n name: \"Solana Programming III\",\n badge: {\n name: \"Code Craftsman\",\n image: \"🛠️\",\n description: \"You can build advanced applications on Solana!\"\n },\n questions: []\n }, {\n id: \"advanced-7\",\n name: \"Solana Protocol Design\",\n badge: {\n name: \"Protocol Prodigy\",\n image: \"📝\",\n description: \"You understand how Solana's protocols are designed!\"\n },\n questions: []\n }, {\n id: \"advanced-8\",\n name: \"Solana Scaling Solutions\",\n badge: {\n name: \"Scaling Savant\",\n image: \"📏\",\n description: \"You understand how Solana achieves scale!\"\n },\n questions: []\n }, {\n id: \"advanced-9\",\n name: \"Solana Governance II\",\n badge: {\n name: \"Governance Guru\",\n image: \"⚖️\",\n description: \"You understand Solana's governance mechanisms deeply!\"\n },\n questions: []\n }, {\n id: \"advanced-10\",\n name: \"Solana Economics II\",\n badge: {\n name: \"Economic Enlightened\",\n image: \"💹\",\n description: \"You can analyze complex economic patterns on Solana!\"\n },\n questions: []\n }]\n },\n expert: {\n name: \"Expert\",\n description: \"Only true Solana Sages can master this!\",\n levels: [{\n id: \"expert-1\",\n name: \"Solana Runtime\",\n badge: {\n name: \"Runtime Ranger\",\n image: \"⚡\",\n description: \"You understand how Solana executes programs!\"\n },\n questions: [{\n question: \"What does the Solana runtime use to manage parallel transactions?\",\n options: [\"SIMD instructions\", \"Accounts and their ownership model\", \"Sharding\", \"ZK-rollups\"],\n correctAnswer: \"Accounts and their ownership model\",\n explanation: \"Solana's runtime uses account ownership to determine which transactions can be executed in parallel.\"\n }, {\n question: \"What is 'Proof of History' actually proving?\",\n options: [\"That a transaction happened before consensus\", \"The order of transactions before they're processed\", \"The state of accounts after transactions\", \"The validity of validator signatures\"],\n correctAnswer: \"The order of transactions before they're processed\",\n explanation: \"Proof of History proves the order of transactions, providing a historical record that can be verified before consensus.\"\n }, {\n question: \"How does Solana handle state bloat?\",\n options: [\"By using rent\", \"By sharding the state\", \"By compressing the state\", \"By pruning old state\"],\n correctAnswer: \"By using rent\",\n explanation: \"Solana uses a rent mechanism where accounts must maintain a minimum balance to stay active, helping to manage state bloat.\"\n }]\n }, {\n id: \"expert-2\",\n name: \"Solana Network Optimization\",\n badge: {\n name: \"Network Ninja\",\n image: \"🥷\",\n description: \"You understand how Solana optimizes its network!\"\n },\n questions: [{\n question: \"How does Solana's Turbine protocol relate to bandwidth requirements?\",\n options: [\"It increases bandwidth proportionally to validator count\", \"It keeps bandwidth requirements logarithmic to validator count\", \"It eliminates bandwidth concerns completely\", \"It quadratically increases bandwidth needs\"],\n correctAnswer: \"It keeps bandwidth requirements logarithmic to validator count\",\n explanation: \"Turbine keeps bandwidth requirements logarithmic to validator count by using a structured data propagation approach.\"\n }, {\n question: \"What structure does Solana use for its ledger storage?\",\n options: [\"Merkle trees\", \"Patricia tries\", \"Reed-Solomon erasure coding\", \"Directed acyclic graphs\"],\n correctAnswer: \"Reed-Solomon erasure coding\",\n explanation: \"Solana uses Reed-Solomon erasure coding for its ledger storage, which helps in data recovery and space efficiency.\"\n }, {\n question: \"What is a VDF in the context of Solana?\",\n options: [\"Verifiable Delay Function\", \"Virtual Development Framework\", \"Validator Distribution Function\", \"Vote Decision Factor\"],\n correctAnswer: \"Verifiable Delay Function\",\n explanation: \"A Verifiable Delay Function (VDF) is a cryptographic primitive used in Solana's Proof of History to create a trusted sequence of events.\"\n }]\n }, {\n id: \"expert-3\",\n name: \"Solana Cryptography\",\n badge: {\n name: \"Crypto Crusader\",\n image: \"🔐\",\n description: \"You understand the cryptographic foundations of Solana!\"\n },\n questions: []\n }, {\n id: \"expert-4\",\n name: \"Solana Security III\",\n badge: {\n name: \"Security Sage\",\n image: \"🔰\",\n description: \"You can identify and mitigate advanced security threats!\"\n },\n questions: []\n }, {\n id: \"expert-5\",\n name: \"Solana Programming IV\",\n badge: {\n name: \"Programming Paragon\",\n image: \"🧙\",\n description: \"You've reached the pinnacle of Solana development knowledge!\"\n },\n questions: []\n }, {\n id: \"expert-6\",\n name: \"Solana Ecosystem Architecture\",\n badge: {\n name: \"Ecosystem Engineer\",\n image: \"🏛️\",\n description: \"You understand how the entire Solana ecosystem fits together!\"\n },\n questions: []\n }, {\n id: \"expert-7\",\n name: \"Solana Future Roadmap\",\n badge: {\n name: \"Future Forecaster\",\n image: \"🔮\",\n description: \"You understand Solana's vision and future plans!\"\n },\n questions: []\n }, {\n id: \"expert-8\",\n name: \"Solana Comparative Analysis\",\n badge: {\n name: \"Blockchain Benchmarker\",\n image: \"⚖️\",\n description: \"You can compare Solana to other blockchains with precision!\"\n },\n questions: []\n }, {\n id: \"expert-9\",\n name: \"Solana Governance III\",\n badge: {\n name: \"Governance Grandmaster\",\n image: \"👑\",\n description: \"You understand the most complex governance aspects of Solana!\"\n },\n questions: []\n }, {\n id: \"expert-10\",\n name: \"Solana Sage\",\n badge: {\n name: \"Solana Sage\",\n image: \"🧠\",\n description: \"You've achieved the highest level of Solana knowledge!\"\n },\n questions: []\n }]\n }\n};\nconst xpRewards = {\n beginner: 10,\n intermediate: 20,\n advanced: 30,\n expert: 50\n};\nconst stageLevelRequirements = {\n beginner: 0,\n intermediate: 5,\n advanced: 5,\n expert: 5\n};\nconst AppWithProvider = () => {\n const endpoint = 'https://rpc.dev.fun/51c8240812b2f3912cfa';\n const wallets = [new PhantomWalletAdapter(), new SolflareWalletAdapter()];\n return \n \n \n \n \n \n ;\n};\nfunction App() {\n const {\n publicKey\n } = useWallet();\n const [view, setView] = useState('home');\n const [selectedStage, setSelectedStage] = useState(null);\n const [selectedLevel, setSelectedLevel] = useState(null);\n const [currentQuestionIndex, setCurrentQuestionIndex] = useState(0);\n const [userAnswers, setUserAnswers] = useState([]);\n const [userXP, setUserXP] = useState(0);\n const [userProgress, setUserProgress] = useState({});\n const [userBadges, setUserBadges] = useState([]);\n const [leaderboard, setLeaderboard] = useState([]);\n const [loadingProgress, setLoadingProgress] = useState(false);\n const [loadingLeaderboard, setLoadingLeaderboard] = useState(false);\n const [selectedAnswer, setSelectedAnswer] = useState(null);\n const [showExplanation, setShowExplanation] = useState(false);\n const [isAnswerCorrect, setIsAnswerCorrect] = useState(null);\n const [earnedBadge, setEarnedBadge] = useState(null);\n const levelColors = {\n beginner: 'from-green-500 to-blue-500',\n intermediate: 'from-blue-500 to-purple-500',\n advanced: 'from-purple-500 to-red-500',\n expert: 'from-red-500 to-yellow-500'\n };\n useEffect(() => {\n if (publicKey) {\n fetchUserProgress();\n fetchLeaderboard();\n }\n }, [publicKey]);\n const fetchUserProgress = async () => {\n if (!publicKey) return;\n setLoadingProgress(true);\n try {\n const userId = publicKey.toBase58();\n const userProgressData = await stateClient.getEntity('userProgress', userId);\n if (userProgressData) {\n setUserProgress(userProgressData);\n setUserXP(userProgressData.totalXP || 0);\n if (userProgressData.badges) {\n setUserBadges(userProgressData.badges);\n } else {\n setUserBadges([]);\n }\n } else {\n const newProgressData = {\n id: userId,\n walletAddress: userId,\n completedLevels: {},\n badges: [],\n totalXP: 0\n };\n await stateClient.createEntity('userProgress', newProgressData);\n setUserProgress(newProgressData);\n setUserBadges([]);\n }\n } catch (error) {\n console.error('Error fetching user progress:', error);\n } finally {\n setLoadingProgress(false);\n }\n };\n const fetchLeaderboard = async () => {\n setLoadingLeaderboard(true);\n try {\n const leaderboardData = await stateClient.getEntities('userProgress');\n const sortedLeaderboard = leaderboardData.sort((a, b) => (b.totalXP || 0) - (a.totalXP || 0)).slice(0, 10);\n setLeaderboard(sortedLeaderboard);\n } catch (error) {\n console.error('Error fetching leaderboard:', error);\n } finally {\n setLoadingLeaderboard(false);\n }\n };\n const saveUserProgress = async (stageId, levelId, score, earnedXP, badge) => {\n if (!publicKey) return;\n try {\n const userId = publicKey.toBase58();\n const currentProgress = {\n ...userProgress\n };\n currentProgress.completedLevels = currentProgress.completedLevels || {};\n currentProgress.badges = currentProgress.badges || [];\n if (!currentProgress.completedLevels[levelId] || score > currentProgress.completedLevels[levelId]) {\n currentProgress.completedLevels[levelId] = score;\n }\n currentProgress.totalXP = (currentProgress.totalXP || 0) + earnedXP;\n const hasBadge = currentProgress.badges.some(b => b.id === levelId);\n if (!hasBadge && score >= 70) {\n const newBadge = {\n id: levelId,\n name: badge.name,\n image: badge.image,\n description: badge.description,\n dateEarned: new Date().toISOString(),\n stage: stageId\n };\n currentProgress.badges.push(newBadge);\n setEarnedBadge(newBadge);\n }\n await stateClient.updateEntity('userProgress', userId, currentProgress);\n setUserProgress(currentProgress);\n setUserXP(currentProgress.totalXP);\n setUserBadges(currentProgress.badges);\n fetchLeaderboard();\n } catch (error) {\n console.error('Error saving user progress:', error);\n }\n };\n const startQuiz = (stage, levelId) => {\n const level = quizLevels[stage].levels.find(l => l.id === levelId);\n if (!level) return;\n setSelectedStage(stage);\n setSelectedLevel(level);\n setCurrentQuestionIndex(0);\n setUserAnswers([]);\n setEarnedBadge(null);\n setView('quiz');\n };\n const isLevelUnlocked = (stage, levelIndex) => {\n if (stage === 'beginner') return true;\n const prevStage = stage === 'intermediate' ? 'beginner' : stage === 'advanced' ? 'intermediate' : 'advanced';\n const requiredLevelsCompleted = stageLevelRequirements[stage];\n if (!userProgress.completedLevels) return false;\n const completedLevelsInPrevStage = Object.keys(userProgress.completedLevels).filter(levelId => levelId.startsWith(prevStage)).length;\n if (levelIndex === 0) {\n return completedLevelsInPrevStage >= requiredLevelsCompleted;\n } else {\n const prevLevelId = `${stage}-${levelIndex}`;\n return userProgress.completedLevels[prevLevelId] && userProgress.completedLevels[prevLevelId] >= 70;\n }\n };\n const isStageUnlocked = stage => {\n if (stage === 'beginner') return true;\n const prevStage = stage === 'intermediate' ? 'beginner' : stage === 'advanced' ? 'intermediate' : 'advanced';\n const requiredLevelsCompleted = stageLevelRequirements[stage];\n if (!userProgress.completedLevels) return false;\n const completedLevelsInPrevStage = Object.keys(userProgress.completedLevels).filter(levelId => levelId.startsWith(prevStage)).length;\n return completedLevelsInPrevStage >= requiredLevelsCompleted;\n };\n const handleAnswerSelect = answer => {\n setSelectedAnswer(answer);\n const currentQuestion = selectedLevel.questions[currentQuestionIndex];\n const isCorrect = answer === currentQuestion.correctAnswer;\n setIsAnswerCorrect(isCorrect);\n setShowExplanation(true);\n };\n const handleNextQuestion = () => {\n const isCorrect = selectedAnswer === selectedLevel.questions[currentQuestionIndex].correctAnswer;\n const updatedAnswers = [...userAnswers, {\n answer: selectedAnswer,\n isCorrect\n }];\n setUserAnswers(updatedAnswers);\n setSelectedAnswer(null);\n setShowExplanation(false);\n setIsAnswerCorrect(null);\n if (currentQuestionIndex < selectedLevel.questions.length - 1) {\n setCurrentQuestionIndex(currentQuestionIndex + 1);\n } else {\n const correctAnswers = updatedAnswers.filter(a => a.isCorrect).length;\n const totalQuestions = selectedLevel.questions.length;\n const score = Math.round(correctAnswers / totalQuestions * 100);\n const earnedXP = Math.round(correctAnswers / totalQuestions * xpRewards[selectedStage]);\n if (publicKey) {\n saveUserProgress(selectedStage, selectedLevel.id, score, earnedXP, selectedLevel.badge);\n }\n setView('results');\n }\n };\n const resetQuiz = () => {\n setCurrentQuestionIndex(0);\n setUserAnswers([]);\n setSelectedAnswer(null);\n setShowExplanation(false);\n setIsAnswerCorrect(null);\n };\n const calculateProgress = () => {\n return (currentQuestionIndex + (showExplanation ? 0.5 : 0)) / selectedLevel.questions.length * 100;\n };\n const renderHome = () => \n

\n SolanaSage\n

\n Level up your Solana knowledge with mind-bending quizzes. Earn XP, climb the leaderboard, and collect NFT badges!\n

\n \n {publicKey ?

\n \n

\n Your Journey\n

\n {loadingProgress ?

Loading your progress...

Total XP: {userXP}

Badges Collected: {userBadges.length} / 40

\n {Object.keys(quizLevels).map(stage => {\n const completedLevelsInStage = Object.keys(userProgress.completedLevels || {}).filter(levelId => levelId.startsWith(stage)).length;\n return

\n {stage}\n \n {completedLevelsInStage} / 10 levels\n \n

;\n })}\n

\n \n \n

}\n \n \n \n

\n Leaderboard\n

\n {loadingLeaderboard ?

Loading leaderboard...

\n {leaderboard.slice(0, 5).map((user, index) =>

\n \n {index === 0 ? '🥇 ' : index === 1 ? '🥈 ' : index === 2 ? '🥉 ' : `${index + 1}. `}\n {user.walletAddress.slice(0, 4)}...{user.walletAddress.slice(-4)}\n \n {user.totalXP || 0} XP\n

)}\n \n

}\n \n

Connect Wallet to Track Progress

Connect your Solana wallet to save your progress on-chain and earn NFT badges!

\n \n

}\n \n

\n {Object.keys(quizLevels).map(stage => {\n const stageData = quizLevels[stage];\n const stageUnlocked = isStageUnlocked(stage);\n const completedLevelsInStage = Object.keys(userProgress.completedLevels || {}).filter(levelId => levelId.startsWith(stage)).length;\n const completionPercentage = completedLevelsInStage / 10 * 100;\n return stageUnlocked && setView(`stage-${stage}`)} className={`relative overflow-hidden rounded-xl p-6 text-white text-left h-52 bg-gradient-to-br ${levelColors[stage]} shadow-lg ${!stageUnlocked ? 'opacity-70 cursor-not-allowed' : ''}`}>\n

{stageData.name}

{stageData.description}

\n \n {!stageUnlocked ?

\n \n Complete {stageLevelRequirements[stage]} {stage === 'intermediate' ? 'beginner' : stage === 'advanced' ? 'intermediate' : 'advanced'} levels\n

\n 10 Levels\n

\n \n Earn up to {xpRewards[stage] * 10} XP\n

\n \n {}\n

\n Progress\n {completedLevelsInStage}/10\n

}\n \n {stageUnlocked &&

\n \n

}\n

\n ;\n })}\n

\n ;\n const renderStage = stage => {\n const stageData = quizLevels[stage];\n if (!stageData) return null;\n return \n

Leaderboard

\n \n

\n {stageData.levels.map((level, index) => {\n const levelUnlocked = isLevelUnlocked(stage, index);\n const completed = userProgress.completedLevels && userProgress.completedLevels[level.id];\n const hasBadge = userBadges.some(badge => badge.id === level.id);\n return \n

\n \n

{level.name}

\n \n {hasBadge ?

\n {level.badge.image}\n

: completed ? : !levelUnlocked ? : null}\n

\n \n

\n \n {xpRewards[stage]} XP\n

\n \n {completed &&

\n Score: {userProgress.completedLevels[level.id]}%\n

}\n

\n \n {levelUnlocked ? :

\n \n {index === 0 ? `Complete ${stageLevelRequirements[stage]} ${stage === 'intermediate' ? 'beginner' : stage === 'advanced' ? 'intermediate' : 'advanced'} levels` : 'Complete previous level'}\n

}\n

\n ;\n })}\n

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

Your NFT Badge Collection

\n \n

Badges Earned: {userBadges.length} / 40

\n Progress:\n

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

\n \n

You haven't earned any badges yet. Complete quizzes to collect them!

\n {Object.keys(quizLevels).map(stage => {\n const stageBadges = userBadges.filter(badge => badge.stage === stage);\n if (stageBadges.length === 0) return null;\n return

\n {stage} Badges ({stageBadges.length}/10)\n

\n {stageBadges.map((badge, index) => \n

{badge.image}

{badge.name}

{new Date(badge.dateEarned).toLocaleDateString()}

\n )}\n

;\n })}\n

}\n

\n ;\n };\n const renderQuiz = () => {\n if (!selectedLevel || !selectedStage) return null;\n const questions = selectedLevel.questions;\n if (!questions || questions.length === 0) {\n return

Coming Soon!

This level is still being developed. Check back later for exciting new questions!

\n \n

;\n }\n const currentQuestion = questions[currentQuestionIndex];\n return \n

\n {selectedLevel.name}\n

\n Question {currentQuestionIndex + 1} of {questions.length}\n \n {xpRewards[selectedStage]} XP\n

\n \n

{currentQuestion.question}

\n \n

\n {currentQuestion.options.map((option, index) => handleAnswerSelect(option)} className={`w-full text-left p-4 rounded-lg transition-colors ${selectedAnswer === option ? selectedAnswer === currentQuestion.correctAnswer ? 'bg-green-500/20 border-2 border-green-500' : 'bg-red-500/20 border-2 border-red-500' : showExplanation && option === currentQuestion.correctAnswer ? 'bg-green-500/20 border-2 border-green-500' : 'bg-gray-800 hover:bg-gray-700 border-2 border-gray-700'}`}>\n

\n {option}\n {showExplanation && option === currentQuestion.correctAnswer && }\n {showExplanation && selectedAnswer === option && option !== currentQuestion.correctAnswer && }\n

\n )}\n

\n \n \n {showExplanation && \n

\n {isAnswerCorrect ? 'Correct!' : 'Incorrect!'}\n

{currentQuestion.explanation}

\n \n {currentQuestionIndex < questions.length - 1 ? <>Next Question : <>Finish Quiz }\n \n }\n \n

\n \n

\n \n \n

\n ;\n };\n const renderResults = () => {\n if (!selectedLevel || !selectedStage) return null;\n const correctAnswers = userAnswers.filter(a => a.isCorrect).length;\n const totalQuestions = selectedLevel.questions.length;\n const score = Math.round(correctAnswers / totalQuestions * 100);\n const earnedXP = Math.round(correctAnswers / totalQuestions * xpRewards[selectedStage]);\n let resultMessage = '';\n if (score >= 90) resultMessage = 'Incredible! You are truly a Solana Sage!';else if (score >= 70) resultMessage = 'Great job! Your Solana knowledge is impressive!';else if (score >= 50) resultMessage = 'Good effort! Keep learning more about Solana!';else resultMessage = 'Keep studying! Solana has more secrets to reveal!';\n return \n

Level Completed!

{score}%

{resultMessage}

\n Earned:\n \n {earnedXP} XP\n

\n \n \n {earnedBadge && score >= 70 && \n

\n {earnedBadge.image}\n

New Badge!

{earnedBadge.name}

\n }\n \n

\n \n {earnedBadge && score >= 70 && \n

\n NFT Badge Unlocked!\n

\n {earnedBadge.image}\n

{earnedBadge.name}

{earnedBadge.description}

\n \n }\n \n

Question Summary

\n {selectedLevel.questions.map((question, index) =>

\n {userAnswers[index]?.isCorrect ? : }\n

{question.question}

\n Your answer: \n \n {userAnswers[index]?.answer || 'Not answered'}\n \n {!userAnswers[index]?.isCorrect && (Correct: {question.correctAnswer})}\n

)}\n

\n \n

\n \n \n

\n ;\n };\n const renderLeaderboard = () => \n

Leaderboard

\n \n

\n {loadingLeaderboard ?

Loading leaderboard data...

\n {leaderboard.length === 0 ?

No users on the leaderboard yet. Be the first!

Rank

Wallet

\n {leaderboard.map((user, index) => \n

\n {index === 0 ? 🥇 : index === 1 ? 🥈 : index === 2 ? 🥉 : {index + 1}}\n

\n {user.walletAddress.slice(0, 6)}...{user.walletAddress.slice(-4)}\n {publicKey && user.walletAddress === publicKey.toBase58() && You}\n

\n \n {user.totalXP || 0}\n

\n )}\n

}\n

\n ;\n return

\n \n

\n SolanaSage\n

\n {view !== 'home' && view !== 'leaderboard' && view !== 'badges' && !view.startsWith('stage-') && }\n {userBadges.length > 0 && view !== 'badges' && view !== 'home' && }\n \n

\n \n

\n \n {view === 'home' && renderHome()}\n {view === 'quiz' && renderQuiz()}\n {view === 'results' && renderResults()}\n {view === 'leaderboard' && renderLeaderboard()}\n {view === 'badges' && renderBadges()}\n {view === 'stage-beginner' && renderStage('beginner')}\n {view === 'stage-intermediate' && renderStage('intermediate')}\n {view === 'stage-advanced' && renderStage('advanced')}\n {view === 'stage-expert' && renderStage('expert')}\n \n

\n \n \n

;\n}\nexport default AppWithProvider;","packageJson","{\"dependencies\":{\"react\":\"18.2.0\",\"framer-motion\":\"10.16.4\",\"lucide-react\":\"0.441.0\",\"@solana/wallet-adapter-base\":\"0.9.23\",\"@solana/wallet-adapter-react\":\"0.15.35\",\"@solana/wallet-adapter-react-ui\":\"0.9.35\",\"@solana/wallet-adapter-wallets\":\"0.19.32\",\"@solana/web3.js\":\"1.95.3\",\"@devfunlabs/state-client\":\"0.8.1\",\"react-dom\":\"18.2.0\"}}","appFunctions",[],"token",{"_18":80,"_81":80,"_82":83,"_84":85,"_86":87,"_88":-5,"_89":-5,"_90":91,"_92":93,"_70":71},"buidl","symbol","price",0.002912,"marketcap",1550577,"image","https://pump.mypinata.cloud/ipfs/QmPR3CamxoBQW892uHDT2EGRxFvksiJyrEg1ajZYVqJhnf?img-width=256&img-dpr=2","website","twitter","devCount",321,"appCount",2184,"upstreamApp","isLordOfDev","analytics",[98,102,104,106,108,110,112,114,116,118,120,122,124,126],{"_99":100,"_101":58},"day","2025-07-12","runCount",{"_99":103,"_101":58},"2025-07-13",{"_99":105,"_101":58},"2025-07-14",{"_99":107,"_101":58},"2025-07-15",{"_99":109,"_101":58},"2025-07-16",{"_99":111,"_101":58},"2025-07-17",{"_99":113,"_101":58},"2025-07-18",{"_99":115,"_101":58},"2025-07-19",{"_99":117,"_101":58},"2025-07-20",{"_99":119,"_101":58},"2025-07-21",{"_99":121,"_101":58},"2025-07-22",{"_99":123,"_101":58},"2025-07-23",{"_99":125,"_101":58},"2025-07-24",{"_99":127,"_101":58},"2025-07-25","snapshot","ogImage","https://cdn.dev.fun/og/image/51c8240812b2f3912cfa/1aa8aff8.webp","isDevbase","commitDetail","livestream","actionData","errors"]