[{"_1":2,"_145":-5,"_146":-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,"_143":-5,"_139":-5,"_144":-5},"appDetail",{"_14":15,"_16":17,"_18":19,"_20":21,"_22":23,"_24":25,"_26":25,"_27":28,"_29":30,"_31":32,"_33":34,"_35":36,"_37":38,"_39":40,"_41":42,"_5":43,"_54":55,"_56":57,"_58":57,"_59":60,"_61":57,"_62":57,"_63":57,"_64":57,"_65":57,"_66":57,"_67":17,"_68":17,"_69":70,"_71":72,"_73":74,"_75":76,"_85":86,"_101":-5,"_102":17,"_103":104,"_139":30,"_140":141,"_142":25},"id","52e40ce2e06e3f74d945","isMyApp",false,"name","erudifi","description","The world's first learn-to-earn dApp that transforms YouTube binge-watching into crypto gains! Connect your Solana wallet, watch educational videos from curated channels, and earn $ERUDI tokens for every minute of learning while climbing leaderboards and building your knowledge empire. It's like getting paid to become smarter, but with blockchain superpowers and anti-cheat mechanisms that would make Fort Knox jealous.","brief","Get paid in crypto for watching educational YouTube videos - learning has never been this profitable!","isLive",true,"isPublic","tags",[],"cover","https://cdn.dev.fun/snapshot/52e40ce2e06e3f74d945/88920_8feebbd6.webp","cdnUrl","https://cdn.dev.fun/app/52e40ce2e06e3f74d945/88920","createdAt",["D",1752879869829],"updatedAt",["D",1752890537296],"lastCommitId",["B","88920"],"tier",1,"credits",-5,{"_14":44,"_45":46,"_47":-5,"_48":46,"_49":50,"_51":-5,"_52":53},"98909278-ceb0-49b3-a402-5c01a1663a47","uniqueId","A1hGmTc1huzrnQDruVYnmec5gq1TnYymaFnudvRTmA2q","username","solanaWallet","displayName","A1h...A2q","bio","avatar","/avatar.svg","commitCount",11,"forkCount",0,"likeCount","runsCount",21,"downvoteCount","upvoteCount","upvoteRate","commentCount","reportCount","visitorCount","isArchived","isRenamed","contractAddress","dcY9Zf5pAxjApYdtRMCkj4jiyhoJxYp3SnGuRzZ2dev","code","import { useState, useEffect, useRef } from 'react';\nimport { useDevapp, UserButton, DevappProvider, openLink } from '@devfunlabs/web-sdk';\nimport { Trophy, Play, Users, Gift, Clock, Star, ExternalLink, Copy, Check, Twitter } from 'lucide-react';\nexport default function AppWithProvider() {\n return \n \n ;\n}\nfunction App() {\n const {\n devbaseClient,\n userWallet\n } = useDevapp();\n const [activeTab, setActiveTab] = useState('videos');\n const [videos, setVideos] = useState([]);\n const [userProfile, setUserProfile] = useState(null);\n const [leaderboard, setLeaderboard] = useState([]);\n const [watchHistory, setWatchHistory] = useState([]);\n const [loading, setLoading] = useState(true);\n const [videosLoading, setVideosLoading] = useState(true);\n const [, setCurrentVideo] = useState(null);\n const [watchStartTime, setWatchStartTime] = useState(null);\n const [copySuccess, setCopySuccess] = useState(false);\n const [twitterUsername, setTwitterUsername] = useState(null);\n const [isTwitterUser, setIsTwitterUser] = useState(false);\n const watchIntervalRef = useRef(null);\n useEffect(() => {\n checkUserAuth();\n }, [userWallet]);\n const checkUserAuth = async () => {\n try {\n const twitterUser = await devbaseClient.evalString('$USER_X_USERNAME');\n if (twitterUser && twitterUser !== 'null' && twitterUser !== '') {\n setTwitterUsername(twitterUser);\n setIsTwitterUser(true);\n initializeUser(twitterUser);\n loadVideos();\n loadLeaderboard();\n } else if (userWallet) {\n setIsTwitterUser(false);\n initializeUser();\n loadVideos();\n loadLeaderboard();\n } else {\n setLoading(false);\n }\n } catch (error) {\n console.error('Failed to check user auth:', error);\n if (userWallet) {\n setIsTwitterUser(false);\n initializeUser();\n loadVideos();\n loadLeaderboard();\n } else {\n setLoading(false);\n }\n }\n };\n const initializeUser = async (twitterUser = null) => {\n try {\n const userId = twitterUser || userWallet;\n const profiles = await devbaseClient.listEntities('profiles', {\n walletAddress: userId\n });\n if (profiles.length === 0) {\n const newProfile = await devbaseClient.createEntity('profiles', {\n walletAddress: userId,\n xp: 0,\n tokens: 0,\n level: 1,\n totalWatchTime: 0,\n twitterUsername: twitterUser || null\n });\n setUserProfile(newProfile);\n } else {\n if (twitterUser && !profiles[0].twitterUsername) {\n const updatedProfile = await devbaseClient.updateEntity('profiles', profiles[0].id, {\n ...profiles[0],\n twitterUsername: twitterUser\n });\n setUserProfile(updatedProfile);\n } else {\n setUserProfile(profiles[0]);\n }\n }\n const history = await devbaseClient.listEntities('watchSessions', {\n walletAddress: userId\n });\n setWatchHistory(history);\n } catch (error) {\n console.error('Failed to initialize user:', error);\n }\n setLoading(false);\n };\n const loadVideos = async () => {\n setVideosLoading(true);\n try {\n const videoList = await devbaseClient.evalString('$FUNC_GET_YOUTUBE_VIDEOS()');\n const parsedVideos = JSON.parse(videoList);\n if (parsedVideos && parsedVideos.length > 0) {\n setVideos(parsedVideos);\n } else {\n setVideos([]);\n }\n } catch (error) {\n console.error('Failed to load videos:', error);\n setVideos([]);\n } finally {\n setVideosLoading(false);\n }\n };\n const loadLeaderboard = async () => {\n try {\n const leaders = await devbaseClient.listEntities('profiles');\n const sortedLeaders = leaders.sort((a, b) => b.xp - a.xp).slice(0, 10).map((leader, index) => ({\n ...leader,\n rank: index + 1,\n displayAddress: leader.twitterUsername ? `@${leader.twitterUsername}` : `${leader.walletAddress.slice(0, 4)}...${leader.walletAddress.slice(-4)}`\n }));\n setLeaderboard(sortedLeaders);\n } catch (error) {\n console.error('Failed to load leaderboard:', error);\n }\n };\n const startWatching = video => {\n setCurrentVideo(video);\n setWatchStartTime(Date.now());\n watchIntervalRef.current = setInterval(() => {\n const watchTime = Date.now() - watchStartTime;\n if (watchTime >= 10 * 60 * 1000) {\n recordWatchSession(video, watchTime);\n }\n }, 30000);\n };\n const recordWatchSession = async (video, watchTimeMs) => {\n if (!userProfile) return;\n try {\n const watchTimeHours = watchTimeMs / (1000 * 60 * 60);\n const xpEarned = Math.floor(watchTimeHours * 100);\n const userId = twitterUsername || userWallet;\n await devbaseClient.createEntity('watchSessions', {\n walletAddress: userId,\n videoId: video.id,\n videoTitle: video.title,\n watchTime: Math.floor(watchTimeMs / 1000),\n xpEarned\n });\n const newXp = userProfile.xp + xpEarned;\n const newTokens = userProfile.tokens + Math.floor(newXp / 500) * 100 - Math.floor(userProfile.xp / 500) * 100;\n const newLevel = Math.floor(newXp / 1000) + 1;\n const updatedProfile = await devbaseClient.updateEntity('profiles', userProfile.id, {\n xp: newXp,\n tokens: newTokens,\n level: newLevel,\n totalWatchTime: userProfile.totalWatchTime + Math.floor(watchTimeMs / 1000)\n });\n setUserProfile(updatedProfile);\n loadLeaderboard();\n if (newTokens > userProfile.tokens) {\n showAchievement(`Earned ${newTokens - userProfile.tokens} $ERUDI tokens!`);\n }\n } catch (error) {\n console.error('Failed to record watch session:', error);\n }\n };\n const showAchievement = message => {\n const notification = document.createElement('div');\n notification.className = 'fixed top-4 right-4 bg-gradient-to-r from-yellow-400 to-orange-500 text-white px-6 py-3 rounded-lg shadow-lg z-50 animate-bounce';\n notification.innerHTML = `🎉 ${message}`;\n document.body.appendChild(notification);\n setTimeout(() => {\n document.body.removeChild(notification);\n }, 3000);\n };\n const generateReferralCode = () => {\n if (!userProfile) return '';\n return `ERUDI${userProfile.id.slice(-6).toUpperCase()}`;\n };\n const copyReferralLink = () => {\n const referralLink = `${window.location.origin}?ref=${generateReferralCode()}`;\n navigator.clipboard.writeText(referralLink);\n setCopySuccess(true);\n setTimeout(() => setCopySuccess(false), 2000);\n };\n const formatDuration = seconds => {\n const hours = Math.floor(seconds / 3600);\n const minutes = Math.floor(seconds % 3600 / 60);\n return hours > 0 ? `${hours}h ${minutes}m` : `${minutes}m`;\n };\n const getXPProgress = () => {\n if (!userProfile) return 0;\n const currentLevelXP = (userProfile.level - 1) * 1000;\n const nextLevelXP = userProfile.level * 1000;\n const progress = (userProfile.xp - currentLevelXP) / (nextLevelXP - currentLevelXP) * 100;\n return Math.min(progress, 100);\n };\n const handleTwitterLogin = () => {\n const twitterLoginUrl = `https://oauth.dev.fun/twitter/login/52e40ce2e06e3f74d945/${userWallet || 'guest'}`;\n openLink(twitterLoginUrl);\n };\n if (loading) {\n return

Loading your learning journey...

;\n }\n if (!userWallet && !twitterUsername) {\n return

\n {}\n

\n \n {}\n

\n\n

\n Erudifi\n

\n The world's first learn-to-earn dApp! Watch educational videos and earn $ERUDI tokens while building your knowledge empire.\n

Get Started

Connect with Solana Wallet

\n \n

\n or\n

\n \n

;\n }\n const displayName = twitterUsername ? `@${twitterUsername}` : `${userWallet.slice(0, 4)}...${userWallet.slice(-4)}`;\n return

\n {}\n

\n \n {}\n

\n\n {}\n

\n Erudifi\n

{userProfile?.xp || 0} XP

{userProfile?.tokens || 0} $ERUDI

\n {isTwitterUser ?

\n \n {displayName}\n

: }\n

\n\n {}\n

\n {[{\n id: 'videos',\n label: 'Videos',\n icon: Play\n }, {\n id: 'dashboard',\n label: 'Dashboard',\n icon: Star\n }, {\n id: 'leaderboard',\n label: 'Leaderboard',\n icon: Trophy\n }, {\n id: 'referrals',\n label: 'Referrals',\n icon: Users\n }].map(tab => {\n const Icon = tab.icon;\n return ;\n })}\n

\n\n {}\n {activeTab === 'videos' &&

Educational Videos

\n \n {}\n

Featured Learning Content

\n A\n

\n Erudifi\n

Get Started

\n Erudifi\n

Educational Videos

Featured Learning Content

First Featured Video