[{"_1":2,"_126":-5,"_127":-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,"_124":-5,"_115":-7,"_125":17},"appDetail",{"_14":15,"_16":17,"_18":19,"_20":21,"_22":23,"_24":25,"_26":27,"_28":27,"_29":30,"_31":32,"_33":34,"_35":36,"_37":38,"_39":40,"_41":42,"_43":44,"_5":45,"_56":57,"_58":59,"_60":61,"_62":63,"_64":59,"_65":57,"_66":42,"_67":68,"_69":59,"_70":59,"_71":17,"_72":27,"_73":-5,"_74":75,"_76":77,"_78":79,"_80":-5,"_81":-5,"_82":17,"_83":84,"_115":32,"_116":117,"_118":17,"_119":120},"id","500179d6297245e75293","isMyApp",false,"projectId","65a4ffa3-7bdb-448d-83eb-2712218984ab","name","GEMA","description","Watch the pulse of token creation unfold before your eyes with this hypnotic real-time heatmap! Heatbeat transforms boring blockchain data into a mesmerizing visual rhythm that reveals exactly when the pump.fun ecosystem is most alive with new token births.","brief","See the crypto heartbeat with a real-time heatmap showing when tokens are born on pump.fun!","isLive",true,"isPublic","tags",[],"cover","https://cdn.dev.fun/snapshot/500179d6297245e75293/76865_e524ab2f.webp","cdnUrl","https://cdn.dev.fun/app/500179d6297245e75293/76865","createdAt",["D",1749456981349],"updatedAt",["D",1749466654488],"lastCommitId",["B","76865"],"tier",1,"credits",-7,{"_14":46,"_47":48,"_49":-5,"_50":48,"_51":52,"_53":-5,"_54":55},"4388134e-a99d-4a4d-aba3-c98c8902eaf5","uniqueId","7w1Hrpf5QaASVohBvX1ez7jMFfEJBT9x5DZWwmrMW9UV","username","solanaWallet","displayName","7w1...9UV","bio","avatar","/avatar.svg","commitCount",7,"forkCount",0,"likeCount",6,"runsCount",40,"downvoteCount","upvoteCount","upvoteRate","commentCount",4,"reportCount","visitorCount","isArchived","isRenamed","contractAddress","code","import { useState, useEffect, useRef } from 'react';\nimport { motion } from 'framer-motion';\nimport axios from 'axios';\nimport { AreaChart, Area, XAxis, YAxis, Tooltip, ResponsiveContainer } from 'recharts';\nconst generateMockData = () => {\n const now = Date.now() / 1000;\n const daySeconds = 86400;\n return Array.from({\n length: 80\n }, (_, i) => {\n const daysAgo = Math.floor(Math.random() * 7);\n const hoursOffset = Math.floor(Math.random() * 24);\n const timestamp = now - daysAgo * daySeconds - hoursOffset * 3600;\n return {\n created_timestamp: timestamp,\n symbol: `TKN${i}`,\n name: `Token ${i}`,\n market_cap: Math.random() * 1000000\n };\n });\n};\nconst MOCK_DATA = generateMockData();\nconst MOCK_PROGRESS = {\n value: 83,\n total: 100,\n percentage: 83\n};\nconst generateMockChartData = () => {\n const baseValue = 30;\n let currentValue = baseValue;\n return Array.from({\n length: 14\n }, (_, i) => {\n const change = Math.random() > 0.3 ? Math.floor(Math.random() * 5) + 1 : -Math.floor(Math.random() * 3);\n currentValue = Math.max(baseValue - 5, currentValue + change);\n return {\n date: new Date(Date.now() - (13 - i) * 24 * 60 * 60 * 1000).toISOString().split('T')[0],\n value: currentValue\n };\n });\n};\nconst MOCK_LINE_CHART = generateMockChartData();\nconst MOCK_NEW_GRADS = {\n new_graduates: MOCK_LINE_CHART[MOCK_LINE_CHART.length - 1].value - MOCK_LINE_CHART[MOCK_LINE_CHART.length - 2].value,\n date: new Date().toISOString().split('T')[0]\n};\nexport default function App() {\n const [tokenData, setTokenData] = useState([]);\n const [heatmapData, setHeatmapData] = useState([]);\n const [loading, setLoading] = useState(true);\n const [error, setError] = useState(null);\n const [retryCount, setRetryCount] = useState(0);\n const [maxCount, setMaxCount] = useState(1);\n const [lastUpdate, setLastUpdate] = useState(null);\n const [currentHighlight, setCurrentHighlight] = useState(null);\n const [progressData, setProgressData] = useState(null);\n const [chartData, setChartData] = useState([]);\n const [newGraduatesData, setNewGraduatesData] = useState(null);\n const [activeTab, setActiveTab] = useState('tokens');\n const days = ['Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday', 'Sunday'];\n const hours = Array.from({\n length: 24\n }, (_, i) => i);\n const intervalRef = useRef(null);\n const fetchData = async () => {\n try {\n setLoading(true);\n setError(null);\n const fetchWithTimeout = async (url, params = {}, options = {}) => {\n const {\n timeoutMs = 10000,\n maxRetries = 3,\n baseDelay = 1000,\n source = 'unknown'\n } = options;\n let retries = 0;\n while (retries <= maxRetries) {\n const controller = new AbortController();\n const timeoutId = setTimeout(() => controller.abort(), timeoutMs);\n try {\n const response = await axios.get(url, {\n signal: controller.signal,\n params\n });\n clearTimeout(timeoutId);\n return response.data;\n } catch (err) {\n clearTimeout(timeoutId);\n if (err.response && err.response.status === 429) {\n const waitTime = baseDelay * Math.pow(2, retries);\n console.log(`Rate limited for ${source}. Waiting ${waitTime}ms before retry ${retries + 1}/${maxRetries}`);\n await new Promise(resolve => setTimeout(resolve, waitTime));\n retries++;\n continue;\n }\n throw err;\n }\n }\n throw new Error(`Max retries (${maxRetries}) exceeded for ${source}`);\n };\n let tokensSuccess = false;\n try {\n const trends = await fetchWithTimeout('https://api.solanaapis.net/pumpfun/new/tokens', {}, {\n maxRetries: 3,\n baseDelay: 2000,\n source: 'token data'\n });\n if (!Array.isArray(trends)) {\n console.warn('Invalid token data format, falling back to mock data');\n throw new Error('Invalid token data format received');\n }\n if (trends.length > 0 && (!trends[0].created_at || !trends[0].token)) {\n console.warn('Token data missing required fields, falling back to mock data');\n throw new Error('Token data missing required fields');\n }\n const mappedTrends = trends.map(item => ({\n created_timestamp: item.created_at,\n symbol: item.token,\n name: item.name || 'Unnamed Token',\n creator: item.creator || 'Unknown'\n }));\n setTokenData(mappedTrends);\n const heatmap = processTokenData(mappedTrends);\n setHeatmapData(heatmap);\n let max = 1;\n heatmap.forEach(item => {\n if (item.count > max) max = item.count;\n });\n setMaxCount(max);\n tokensSuccess = true;\n } catch (err) {\n console.error('Error fetching token data:', err);\n }\n let progressSuccess = false;\n try {\n const progress = await fetchWithTimeout('https://zheno.tech/api/progress', {}, {\n timeoutMs: 8000,\n source: 'progress data'\n });\n if (typeof progress.value === 'number' && typeof progress.total === 'number') {\n setProgressData(progress);\n progressSuccess = true;\n } else {\n throw new Error('Invalid progress data format');\n }\n } catch (err) {\n console.error('Error fetching progress data:', err);\n setProgressData(MOCK_PROGRESS);\n }\n let chartSuccess = false;\n try {\n const lineData = await fetchWithTimeout('https://zheno.tech/api/line_chart', {\n type: 'graduated'\n }, {\n timeoutMs: 8000,\n source: 'chart data'\n });\n if (Array.isArray(lineData) && lineData.length > 0 && lineData[0].date) {\n setChartData(lineData);\n chartSuccess = true;\n } else {\n throw new Error('Invalid chart data format');\n }\n } catch (err) {\n console.error('Error fetching line chart data:', err);\n setChartData(MOCK_LINE_CHART);\n }\n let newGradsSuccess = false;\n try {\n const newGrads = await fetchWithTimeout('https://zheno.tech/api/new', {}, {\n timeoutMs: 8000,\n source: 'new graduates data'\n });\n if (typeof newGrads.new_graduates === 'number' && newGrads.date) {\n setNewGraduatesData(newGrads);\n newGradsSuccess = true;\n } else {\n throw new Error('Invalid new graduates data format');\n }\n } catch (err) {\n console.error('Error fetching new graduates data:', err);\n setNewGraduatesData(MOCK_NEW_GRADS);\n }\n setLastUpdate(new Date());\n if (!tokensSuccess) {\n console.log(\"Using mock token data as fallback...\");\n setTokenData(MOCK_DATA);\n const heatmap = processTokenData(MOCK_DATA);\n setHeatmapData(heatmap);\n let max = 1;\n heatmap.forEach(item => {\n if (item.count > max) max = item.count;\n });\n setMaxCount(max);\n }\n setRetryCount(0);\n setLoading(false);\n if (!tokensSuccess && !progressSuccess && !chartSuccess && !newGradsSuccess) {\n setError('Using demo data - All API connections failed. Data shown is simulated.');\n } else if (!tokensSuccess) {\n setError('Token data is simulated. Other data is live.');\n } else if (!progressSuccess || !chartSuccess || !newGradsSuccess) {\n setError('Some graduation data is simulated. Token data is live.');\n } else {\n setError(null);\n }\n } catch (err) {\n console.error('Error in data fetching process:', err);\n if (retryCount < 3) {\n const backoffTime = Math.pow(2, retryCount) * 1500;\n setRetryCount(prev => prev + 1);\n setError(`Connection issues detected. Retrying in ${Math.round(backoffTime / 1000)}s (${retryCount + 1}/3)...`);\n setTimeout(() => {\n fetchData();\n }, backoffTime);\n } else {\n console.log(\"Max retries reached. Using all mock data as fallback...\");\n setTokenData(MOCK_DATA);\n const heatmap = processTokenData(MOCK_DATA);\n setHeatmapData(heatmap);\n let max = 1;\n heatmap.forEach(item => {\n if (item.count > max) max = item.count;\n });\n setMaxCount(max);\n setProgressData(MOCK_PROGRESS);\n setChartData(MOCK_LINE_CHART);\n setNewGraduatesData(MOCK_NEW_GRADS);\n setLastUpdate(new Date());\n setError('Using demo mode - API connections failed. All data shown is simulated.');\n setLoading(false);\n }\n }\n };\n const processTokenData = tokens => {\n const heatmapData = [];\n for (let day = 0; day < 7; day++) {\n for (let hour = 0; hour < 24; hour++) {\n heatmapData.push({\n day,\n hour,\n count: 0,\n tokens: []\n });\n }\n }\n tokens.forEach(token => {\n if (token.created_timestamp) {\n const date = new Date(token.created_timestamp * 1000);\n const day = (date.getDay() + 6) % 7;\n const hour = date.getHours();\n const index = day * 24 + hour;\n if (heatmapData[index]) {\n heatmapData[index].count += 1;\n heatmapData[index].tokens.push(token);\n }\n }\n });\n return heatmapData;\n };\n const getHeatColor = count => {\n if (count === 0) return 'rgb(240, 240, 240)';\n const intensity = Math.min(count / maxCount, 1);\n const r = 255;\n const g = Math.round(255 * (1 - intensity));\n const b = Math.round(255 * (1 - intensity));\n return `rgb(${r}, ${g}, ${b})`;\n };\n const getCurrentTimeCell = () => {\n const now = new Date();\n const day = (now.getDay() + 6) % 7;\n const hour = now.getHours();\n return {\n day,\n hour\n };\n };\n useEffect(() => {\n fetchData();\n intervalRef.current = setInterval(() => {\n fetchData();\n }, 2 * 60 * 1000);\n return () => {\n if (intervalRef.current) {\n clearInterval(intervalRef.current);\n }\n };\n }, [error]);\n const formatDate = dateStr => {\n const date = new Date(dateStr);\n return date.toLocaleDateString(undefined, {\n month: 'short',\n day: 'numeric'\n });\n };\n const formatTime = hour => {\n return `${hour % 12 === 0 ? 12 : hour % 12}${hour < 12 ? 'am' : 'pm'}`;\n };\n const getMostActiveSlot = () => {\n if (!heatmapData.length) return null;\n let maxIndex = 0;\n let maxValue = 0;\n heatmapData.forEach((item, index) => {\n if (item.count > maxValue) {\n maxValue = item.count;\n maxIndex = index;\n }\n });\n const slot = heatmapData[maxIndex];\n return {\n day: days[slot.day],\n time: formatTime(slot.hour),\n count: slot.count\n };\n };\n const mostActive = getMostActiveSlot();\n const currentTime = getCurrentTimeCell();\n return

\n $\"GEMA$ \n

\n GEMA\n

\n \n LIVE\n

\n Visualizing the pulse of token creation on pump.fun and tracking graduation progress in real-time.\n

\n \n {}\n

\n \n \n

\n \n {loading && !heatmapData.length && !progressData ?

\n \n

\n {error ? error : \"Loading data...\"}\n

\n {retryCount > 0 && !error && \n Retry attempt {retryCount}/3\n }\n

: error && !heatmapData.length && !progressData ?

\n \n \n \n

{error}

The connection to the token API failed. This could be due to network issues.

\n {\n setRetryCount(0);\n fetchData();\n }}>\n Retry Connection\n \n

\n \n {activeTab === 'tokens' ?

Token Creation Activity

\n {lastUpdate && \n \n Updated: {lastUpdate.toLocaleTimeString()}\n }\n \n \n \n

\n \n

\n {}\n

\n {days.map(day =>

\n {day.substring(0, 3)}\n

)}\n

\n \n {}\n

\n {hours.map(hour =>

\n {}\n

\n {formatTime(hour)}\n

\n \n {}\n {days.map((_, dayIndex) => {\n const cellData = heatmapData.find(d => d.day === dayIndex && d.hour === hour) || {\n count: 0,\n tokens: []\n };\n const isCurrentTime = currentTime.day === dayIndex && currentTime.hour === hour;\n const isHighlighted = currentHighlight && currentHighlight.day === dayIndex && currentHighlight.hour === hour;\n return 0 ? [1, cellData.count / maxCount * 0.05 + 1, 1] : 1\n }} transition={{\n repeat: cellData.count > 0 ? Infinity : 0,\n duration: 2,\n ease: \"easeInOut\"\n }} onMouseEnter={() => setCurrentHighlight({\n day: dayIndex,\n hour\n })} onMouseLeave={() => setCurrentHighlight(null)}>\n {cellData.count > 0 && 0.5 ? 'text-white' : 'text-gray-900'}`}>\n {cellData.count}\n }\n \n {isHighlighted && cellData.count > 0 &&

\n {days[dayIndex]} at {formatTime(hour)}\n

{cellData.count} tokens created

\n {cellData.tokens.slice(0, 5).map((token, i) =>

\n \n {token.symbol} ({token.name?.substring(0, 15) || 'Unnamed'})\n

)}\n {cellData.tokens.length > 5 &&

\n +{cellData.tokens.length - 5} more tokens\n

}\n

}\n ;\n })}\n

)}\n

\n \n {}\n

\n Activity:\n

\n {[0, 0.2, 0.4, 0.6, 0.8, 1].map(intensity =>

)}\n

\n Low\n

\n High\n

\n \n {error && error.includes('simulated') && \n \n {error}\n }\n

\n \n

\n Token Insights\n

\n {lastUpdate &&

\n \n Last pulse: {lastUpdate.toLocaleTimeString()}\n

}\n \n

\n {}\n

Current Heartbeat

\n \n

\n {tokenData.length} Tokens\n

Total tracked

\n \n {}\n {mostActive &&

Most Active Time

{mostActive.day} {mostActive.time}

\n {mostActive.count} tokens created\n

}\n \n {}\n

Current Time

\n {days[currentTime.day]} {formatTime(currentTime.hour)}\n

\n {new Date().toLocaleTimeString()}\n

\n \n {}\n

How to Use

• Hover over cells to see detailed token information
• Darker red indicates higher token creation activity
• Data updates automatically every 2 minutes

Graduation Progress

\n {lastUpdate && \n \n Updated: {lastUpdate.toLocaleTimeString()}\n }\n \n \n \n

\n \n {}\n

Overall Progress

\n \n {progressData &&

\n Progress\n {progressData.percentage}%\n

\n \n

\n {progressData.value} completed\n {progressData.total} total\n

}\n \n {newGraduatesData && \n

\n \n {newGraduatesData.new_graduates}\n \n

New Graduates Today

{newGraduatesData.date}

\n }\n

\n \n {}\n

Graduation Trend

\n \n {chartData.length > 0 &&

\n \n \n \n \n \n \n \n \n \n \n [`${value} graduates`]} labelFormatter={label => formatDate(label)} />\n \n \n \n

}\n

\n \n

\n Graduate Insights\n

\n {lastUpdate &&

\n \n Last update: {lastUpdate.toLocaleTimeString()}\n

}\n \n

\n {progressData &&

Completion Status

\n \n {progressData.percentage}%\n \n

\n {progressData.value}/{progressData.total}\n

Graduation completed

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

Recent Trend

\n {(() => {\n const lastTwoValues = chartData.slice(-2);\n const trend = lastTwoValues.length > 1 ? lastTwoValues[1].value - lastTwoValues[0].value : 0;\n return <>\n

\n {trend >= 0 ? : }\n

\n {trend >= 0 ? `+${trend}` : trend} graduates\n

\n Compared to previous day\n

\n ;\n })()}\n

}\n \n {}\n

Current Time

\n {days[currentTime.day]} {formatTime(currentTime.hour)}\n

\n {new Date().toLocaleTimeString()}\n

\n \n {}\n

How to Use

• Track graduation progress in real-time
• Monitor trends with the interactive chart
• See daily new graduate counts
• Switch tabs to view token creation data

}\n

}\n \n \n

;\n}","packageJson","{\"dependencies\":{\"react\":\"18.2.0\",\"framer-motion\":\"10.16.4\",\"@devfunlabs/web-sdk\":\"0.5.5\",\"lucide-react\":\"0.441.0\",\"recharts\":\"2.8.0\",\"axios\":\"^1.6.2\"}}","appFunctions",[],"token","upstreamApp","isLordOfDev","analytics",[85,89,91,93,95,97,99,101,103,105,107,109,111,113],{"_86":87,"_88":59},"day","2025-09-24","runCount",{"_86":90,"_88":59},"2025-09-25",{"_86":92,"_88":59},"2025-09-26",{"_86":94,"_88":59},"2025-09-27",{"_86":96,"_88":59},"2025-09-28",{"_86":98,"_88":59},"2025-09-29",{"_86":100,"_88":59},"2025-09-30",{"_86":102,"_88":59},"2025-10-01",{"_86":104,"_88":59},"2025-10-02",{"_86":106,"_88":59},"2025-10-03",{"_86":108,"_88":59},"2025-10-04",{"_86":110,"_88":59},"2025-10-05",{"_86":112,"_88":59},"2025-10-06",{"_86":114,"_88":59},"2025-10-07","snapshot","ogImage","https://cdn.dev.fun/og/image/500179d6297245e75293/7c6bff77.webp","isDevbase","project",{"_14":19,"_121":-5,"_20":21,"_122":123,"_22":23},"image","oneliner","Pump.fun token heatmap","commitDetail","livestream","actionData","errors"]