[{"_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/p.$appId",{"_12":13,"_154":-5,"_151":-5},"appDetail",{"_14":15,"_16":17,"_18":19,"_20":21,"_22":23,"_24":25,"_26":27,"_30":31,"_32":33,"_34":35,"_36":37,"_38":39,"_40":41,"_42":43,"_5":44,"_56":57,"_58":41,"_59":60,"_61":62,"_63":64,"_65":17,"_66":17,"_67":68,"_69":70,"_71":72,"_73":74,"_89":-5,"_90":25,"_91":92,"_151":31,"_152":153},"id","0769b0dd9378797565ec","isMyApp",false,"name","yapscan","description","Instantly visualize anyone's Yaps score with a sleek dashboard that turns boring API data into social media clout crystals! Watch as time-series metrics materialize before your eyes, making Twitter influence tangible enough to taste.","brief","","isLive",true,"tags",[28,29],"🔥","👑","cover","https://cdn.dev.fun/snapshot/0769b0dd9378797565ec/28725_a73fd486.webp","cdnUrl","https://cdn.dev.fun/app/0769b0dd9378797565ec/28725","createdAt",["D",1741693435363],"updatedAt",["D",1741696240338],"lastCommitId",["B","28725"],"tier",1,"credits",60,{"_14":45,"_46":47,"_48":47,"_49":50,"_51":47,"_52":53,"_54":55},"69ecd625-7e23-4f66-8d1e-bf684e47b38c","uniqueId","Fantardio","username","solanaWallet","45u887sPrVSQ1UTkpwakc2ocqUSRLYrwENbvhJPrhhAf","displayName","bio","I am Fantardio, a fantasy.top maxi turned vibe-coder. Follow me on X: \n\nhttps://x.com/Fantardio","avatar","https://cdn.dev.fun/avatar/69ecd625-7e23-4f66-8d1e-bf684e47b38c/3cb3d8e5.webp","commitCount",18,"forkCount","likeCount",9,"runsCount",3125,"visitorCount",6,"isArchived","isRenamed","contractAddress","3HfLqhtF5hR5dyBXh6BMtRaTm9qzStvEGuMa8Gx6pump","code","import { useState } from 'react';\nimport { Search, User, AlertCircle, TrendingUp, Clock, Sparkles, Zap, Users, Trophy, ArrowLeftRight, BarChart3 } from 'lucide-react';\nimport { motion, AnimatePresence } from 'framer-motion';\nexport default function App() {\n const [username, setUsername] = useState('');\n const [username2, setUsername2] = useState('');\n const [userData, setUserData] = useState(null);\n const [userData2, setUserData2] = useState(null);\n const [isCompareMode, setIsCompareMode] = useState(false);\n const [isLoading, setIsLoading] = useState(false);\n const [error, setError] = useState(null);\n const [searchHistory, setSearchHistory] = useState([]);\n const [showHistory, setShowHistory] = useState(false);\n const [showChart, setShowChart] = useState(false);\n const fetchUserData = async (searchUsername, isSecondUser = false) => {\n setIsLoading(true);\n setError(null);\n try {\n // Fetch user Yaps data\n const proxyUrl = `https://dev.fun/api/proxy?url=${encodeURIComponent(`https://api.kaito.ai/api/v1/yaps?username=${searchUsername}`)}`;\n const response = await fetch(proxyUrl);\n if (!response.ok) {\n throw new Error(`Error: ${response.status}`);\n }\n const data = await response.json();\n if (isSecondUser) {\n setUserData2(data);\n } else {\n setUserData(data);\n }\n\n // Add to search history if not already there\n if (!searchHistory.some(item => item.username === data.username)) {\n setSearchHistory(prev => [data, ...prev].slice(0, 5));\n }\n } catch (err) {\n setError(`Failed to fetch data: ${err.message}`);\n } finally {\n setIsLoading(false);\n }\n };\n const handleSearch = e => {\n e.preventDefault();\n if (isCompareMode) {\n if (username.trim() && username2.trim()) {\n fetchUserData(username.trim());\n fetchUserData(username2.trim(), true);\n }\n } else {\n if (username.trim()) {\n setUserData2(null); // Clear second user data when in single mode\n fetchUserData(username.trim());\n }\n }\n };\n const handleHistoryClick = (historyUsername, isSecondUser = false) => {\n if (isSecondUser) {\n setUsername2(historyUsername);\n } else {\n setUsername(historyUsername);\n }\n fetchUserData(historyUsername, isSecondUser);\n setShowHistory(false);\n };\n const toggleCompareMode = () => {\n setIsCompareMode(!isCompareMode);\n if (!isCompareMode) {\n setUserData2(null);\n }\n };\n\n // Get a friendly message based on the Yaps score\n const getScoreMessage = score => {\n if (score > 5000) return \"Legendary Influence! You're in the elite category.\";\n if (score > 2000) return \"Impressive reach! You're making waves.\";\n if (score > 500) return \"Growing influence! You're on the right track.\";\n if (score > 100) return \"Emerging voice! Keep building your presence.\";\n return \"Just getting started! Every journey begins somewhere.\";\n };\n\n // Calculate a color based on score\n const getScoreColor = score => {\n if (score > 5000) return \"#FF6B6B\";\n if (score > 2000) return \"#FFD166\";\n if (score > 500) return \"#06D6A0\";\n if (score > 100) return \"#118AB2\";\n return \"#073B4C\";\n };\n return

\n {/* Header */}\n

\n \n

\n YAPSCAN\n

\n \n \n Instantly find out anyones yap score and yap trends!\n \n

\n\n {/* Search Section */}\n

\n \n

Search for Yappers

\n \n

\n setUsername(e.target.value)} placeholder=\"Enter X/Twitter username...\" className=\"w-full px-4 py-3 pl-12 pr-16 rounded-lg bg-gray-900 border border-gray-700 text-white focus:outline-none focus:ring-2 focus:ring-green-500 focus:border-transparent\" />\n \n {!isCompareMode && }\n

\n \n {isCompareMode &&

\n setUsername2(e.target.value)} placeholder=\"Enter second username to compare...\" className=\"w-full px-4 py-3 pl-12 rounded-lg bg-gray-900 border border-gray-700 text-white focus:outline-none focus:ring-2 focus:ring-green-500 focus:border-transparent\" />\n \n

}\n

\n \n {isCompareMode && }\n \n {searchHistory.length > 0 && }\n \n \n {showHistory && \n {searchHistory.map((item, index) =>

\n \n {isCompareMode && }\n

)}\n }\n \n

\n \n

\n\n {/* Loading State */}\n \n {isLoading && \n

\n \n \n

Scanning the social sphere...

\n }\n \n\n {/* Error Message */}\n \n {error && \n

\n \n

Error Encountered

{error}

Try checking the username and try again.

\n }\n \n\n {/* Results Dashboard */}\n \n {userData && !isLoading && \n

\n {isCompareMode && userData2 &&

\n \n COMPARISON MODE\n

}\n \n setShowChart(!showChart)} className={`px-5 py-3 rounded-full font-medium flex items-center gap-2 shadow-lg transition-colors ${showChart ? 'bg-green-700 text-white' : 'bg-gradient-to-r from-green-900 to-gray-800 text-white'}`}>\n \n KAITO CHART\n \n

\n \n {showChart && \n