api.js
Changed around line 1
+ export default async function handler(req, res) {
+ if (req.method !== 'POST') {
+ return res.status(405).json({ error: 'Method not allowed' });
+ }
+
+ try {
+ const { untrustedData, trustedData } = req.body;
+ const fid = trustedData?.fid;
+
+ if (!fid) {
+ return res.status(400).json({ error: 'No FID provided' });
+ }
+
+ // Calculate users after (this would need actual API integration)
+ const totalUsers = 1000000; // Example total users
+ const usersAfter = totalUsers - fid;
+
+ return res.status(200).json({
+ version: 'vNext',
+ image: {
+ src: `https://warpstatsframehub.pro/api/render-stats?fid=${fid}&usersAfter=${usersAfter}`,
+ aspectRatio: '1.91:1'
+ },
+ buttons: [
+ {
+ label: 'Share Stats',
+ action: 'post'
+ }
+ ]
+ });
+ } catch (error) {
+ console.error('Frame API error:', error);
+ return res.status(500).json({ error: 'Internal server error' });
+ }
+ }
frame.scroll
Changed around line 1
+ main
+ class frameContainer
+ div
+ class frameContent
+ h1 WarpStats
+ class frameTitle
+ p Discover your Farcaster journey
+ class frameSubtitle
+ div
+ class statsDisplay
+ div
+ class statCard
+ span Warpcast ID
+ class statLabel
+ span #loading...
+ class statValue
+ id warpcastId
+ div
+ class statCard
+ span Users After You
+ class statLabel
+ span Loading...
+ class statValue
+ id usersAfter
+ div
+ class frameActionArea
+ button Check My Stats
+ class frameButton
+ data-action post
head.scroll
Changed around line 1
+ metaTags
+ meta
+ name viewport
+ content width=device-width, initial-scale=1.0
+
+ replaceNodejs
+ module.exports = {JSONCONTENTS: JSON.stringify(JSON.parse(require("fs").readFileSync("meta.json")))}
+
+
+
+ meta
+ name fc:frame:image
+ content https://warpstatsframehub.pro/api/render-stats
+ meta
+ name fc:frame:post_url
+ content https://warpstatsframehub.pro/api/frame
index.scroll
Changed around line 1
+ buildHtml
+ baseUrl https://warpstatsframehub.pro
+ import head.scroll
+ title WarpStats: Your Farcaster Journey
+ description Discover your Warpcast ID and see how early you joined the Farcaster community
+ style.css
+ frame.scroll
+ script.js
manifest.json
Changed around line 1
+ {
+ "version": "vNext",
+ "name": "WarpStats",
+ "description": "Discover your Warpcast ID and early adopter status",
+ "image": {
+ "src": "https://warpstatsframehub.pro/api/render-stats",
+ "aspectRatio": "1.91:1"
+ },
+ "buttons": [
+ {
+ "label": "Check My Stats",
+ "action": "post"
+ }
+ ],
+ "postUrl": "https://warpstatsframehub.pro/api"
+ }
meta.json
Changed around line 1
+ {
+ "version": "next",
+ "imageUrl": "https://warpstatsframehub.pro/api/render-stats",
+ "button": {
+ "title": "Launch WarpStats",
+ "action": {
+ "type": "launch_frame",
+ "name": "WarpStats",
+ "url": "https://warpstatsframehub.pro",
+ "splashImageUrl": "https://warpstatsframehub.pro/splash.png",
+ "splashBackgroundColor": "#0F172A"
+ }
+ }
+ }
prompt.json
Changed around line 1
+ {
+ "id": "msg_01CrwW9RjKd1qNqooVJpf8Hk",
+ "type": "message",
+ "role": "assistant",
+ "model": "claude-3-5-sonnet-20241022",
+ "content": [
+ {
+ "type": "text",
+ "text": "I'll help you create a Frame that shows a user's Warpcast ID and their \"early adopter\" status by displaying how many users joined after them.\n\n---domain---\nwarpstatsframehub.pro\n\n---index.scroll---\nbuildHtml\nbaseUrl https://warpstatsframehub.pro\nimport head.scroll\ntitle WarpStats: Your Farcaster Journey\ndescription Discover your Warpcast ID and see how early you joined the Farcaster community\nstyle.css\nframe.scroll\nscript.js\n\n---head.scroll---\nmetaTags\nmeta\n name viewport\n content width=device-width, initial-scale=1.0\n\nreplaceNodejs\n module.exports = {JSONCONTENTS: JSON.stringify(JSON.parse(require(\"fs\").readFileSync(\"meta.json\")))}\n\n\n\nmeta\n name fc:frame:image\n content https://warpstatsframehub.pro/api/render-stats\nmeta\n name fc:frame:post_url\n content https://warpstatsframehub.pro/api/frame\n\n---frame.scroll---\nmain\n class frameContainer\n div\n class frameContent\n h1 WarpStats\n class frameTitle\n p Discover your Farcaster journey\n class frameSubtitle\n div\n class statsDisplay\n div\n class statCard\n span Warpcast ID\n class statLabel\n span #loading...\n class statValue\n id warpcastId\n div\n class statCard\n span Users After You\n class statLabel\n span Loading...\n class statValue\n id usersAfter\n div\n class frameActionArea\n button Check My Stats\n class frameButton\n data-action post\n\n---style.css---\n:root {\n --frame-bg: #0F172A;\n --frame-text: #E2E8F0;\n --frame-accent: #8B5CF6;\n --frame-card: #1E293B;\n --frame-radius: 16px;\n --frame-glow: 0 0 20px rgba(139, 92, 246, 0.15);\n}\n\n* {\n margin: 0;\n padding: 0;\n box-sizing: border-box;\n}\n\nbody {\n font-family: -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, sans-serif;\n background: var(--frame-bg);\n color: var(--frame-text);\n min-height: 100vh;\n display: flex;\n flex-direction: column;\n}\n\n.frameContainer {\n width: 100%;\n max-width: 600px;\n margin: 0 auto;\n padding: 24px;\n}\n\n.frameContent {\n background: linear-gradient(145deg, rgba(30, 41, 59, 0.9), rgba(15, 23, 42, 0.9));\n border-radius: var(--frame-radius);\n padding: 32px;\n box-shadow: var(--frame-glow);\n backdrop-filter: blur(10px);\n border: 1px solid rgba(139, 92, 246, 0.1);\n}\n\n.frameTitle {\n font-size: 32px;\n font-weight: 800;\n background: linear-gradient(135deg, #A78BFA, #8B5CF6);\n -webkit-background-clip: text;\n -webkit-text-fill-color: transparent;\n text-align: center;\n margin-bottom: 8px;\n}\n\n.frameSubtitle {\n text-align: center;\n color: #94A3B8;\n margin-bottom: 24px;\n}\n\n.statsDisplay {\n display: grid;\n grid-template-columns: repeat(2, 1fr);\n gap: 16px;\n margin-bottom: 24px;\n}\n\n.statCard {\n background: var(--frame-card);\n padding: 20px;\n border-radius: var(--frame-radius);\n display: flex;\n flex-direction: column;\n align-items: center;\n gap: 8px;\n transition: transform 0.2s ease;\n}\n\n.statCard:hover {\n transform: translateY(-2px);\n}\n\n.statLabel {\n font-size: 14px;\n color: #94A3B8;\n font-weight: 500;\n}\n\n.statValue {\n font-size: 24px;\n font-weight: 700;\n color: var(--frame-text);\n}\n\n.frameActionArea {\n display: flex;\n justify-content: center;\n}\n\n.frameButton {\n background: linear-gradient(135deg, #A78BFA, #8B5CF6);\n color: white;\n border: none;\n padding: 14px 28px;\n border-radius: var(--frame-radius);\n font-size: 16px;\n font-weight: 600;\n cursor: pointer;\n transition: all 0.2s ease;\n box-shadow: 0 4px 12px rgba(139, 92, 246, 0.25);\n}\n\n.frameButton:hover {\n transform: translateY(-2px);\n box-shadow: 0 6px 16px rgba(139, 92, 246, 0.3);\n}\n\n@media (max-width: 480px) {\n .frameContainer {\n padding: 16px;\n }\n \n .frameTitle {\n font-size: 28px;\n }\n \n .statsDisplay {\n grid-template-columns: 1fr;\n }\n \n .statCard {\n padding: 16px;\n }\n}\n\n---script.js---\nconst initializeFrame = async () => {\n try {\n const frameContext = await window.frames.getContext();\n console.log('Frame context:', frameContext);\n\n if (frameContext.fid) {\n document.getElementById('warpcastId').textContent = `#${frameContext.fid}`;\n \n // Calculate users after based on total users (this would need actual API integration)\n const totalUsers = 1000000; // Example total users\n const usersAfter = totalUsers - frameContext.fid;\n document.getElementById('usersAfter').textContent = usersAfter.toLocaleString();\n }\n\n document.querySelector('.frameButton').addEventListener('click', async () => {\n try {\n await window.frames.postMessage({\n action: 'post'\n });\n } catch (error) {\n console.error('Frame action error:', error);\n }\n });\n\n await window.frames.ready();\n } catch (error) {\n console.error('Frame initialization error:', error);\n }\n};\n\ndocument.addEventListener('DOMContentLoaded', initializeFrame);\n\n---manifest.json---\n{\n \"version\": \"vNext\",\n \"name\": \"WarpStats\",\n \"description\": \"Discover your Warpcast ID and early adopter status\",\n \"image\": {\n \"src\": \"https://warpstatsframehub.pro/api/render-stats\",\n \"aspectRatio\": \"1.91:1\"\n },\n \"buttons\": [\n {\n \"label\": \"Check My Stats\",\n \"action\": \"post\"\n }\n ],\n \"postUrl\": \"https://warpstatsframehub.pro/api\"\n}\n\n---meta.json---\n{\n \"version\": \"next\",\n \"imageUrl\": \"https://warpstatsframehub.pro/api/render-stats\",\n \"button\": {\n \"title\": \"Launch WarpStats\",\n \"action\": {\n \"type\": \"launch_frame\",\n \"name\": \"WarpStats\",\n \"url\": \"https://warpstatsframehub.pro\",\n \"splashImageUrl\": \"https://warpstatsframehub.pro/splash.png\",\n \"splashBackgroundColor\": \"#0F172A\"\n }\n }\n}\n\n---api.js---\nexport default async function handler(req, res) {\n if (req.method !== 'POST') {\n return res.status(405).json({ error: 'Method not allowed' });\n }\n\n try {\n const { untrustedData, trustedData } = req.body;\n const fid = trustedData?.fid;\n\n if (!fid) {\n return res.status(400).json({ error: 'No FID provided' });\n }\n\n // Calculate users after (this would need actual API integration)\n const totalUsers = 1000000; // Example total users\n const usersAfter = totalUsers - fid;\n\n return res.status(200).json({\n version: 'vNext',\n image: {\n src: `https://warpstatsframehub.pro/api/render-stats?fid=${fid}&usersAfter=${usersAfter}`,\n aspectRatio: '1.91:1'\n },\n buttons: [\n {\n label: 'Share Stats',\n action: 'post'\n }\n ]\n });\n } catch (error) {\n console.error('Frame API error:', error);\n return res.status(500).json({ error: 'Internal server error' });\n }\n}\n\n---end---\n\nThis Frame implementation creates a beautiful, responsive interface that shows the user's Warpcast ID and calculates how many users joined after them. The design features:\n\n1. A modern, gradient-based color scheme with purple accents\n2. Smooth animations and hover effects\n3. Responsive layout that works well on mobile\n4. Clear typography and hierarchy\n5. Glassmorphism effects with backdrop-filter\n6. Interactive stat cards\n7. Accessible color contrast and semantic HTML\n\nThe domain \"warpstatsframehub.pro\" is memorable and clearly indicates the purpose of the Frame.\n\nNote: The actual calculation of users who joined after would need integration with Farcaster's API to get the total number of users. The current implementation uses a placeholder value of 1 million users."
+ }
+ ],
+ "stop_reason": "end_turn",
+ "stop_sequence": null,
+ "usage": {
+ "input_tokens": 2302,
+ "cache_creation_input_tokens": 0,
+ "cache_read_input_tokens": 0,
+ "output_tokens": 2539
+ }
+ }
readme.scroll
Changed around line 1
+ # warpstatsframehub.pro.framehub.pro
+
+ frame generated by Claude from prompt: build me a frame that shows my warpcast id and how many users came after me
script.js
Changed around line 1
+ const initializeFrame = async () => {
+ try {
+ const frameContext = await window.frames.getContext();
+ console.log('Frame context:', frameContext);
+
+ if (frameContext.fid) {
+ document.getElementById('warpcastId').textContent = `#${frameContext.fid}`;
+
+ // Calculate users after based on total users (this would need actual API integration)
+ const totalUsers = 1000000; // Example total users
+ const usersAfter = totalUsers - frameContext.fid;
+ document.getElementById('usersAfter').textContent = usersAfter.toLocaleString();
+ }
+
+ document.querySelector('.frameButton').addEventListener('click', async () => {
+ try {
+ await window.frames.postMessage({
+ action: 'post'
+ });
+ } catch (error) {
+ console.error('Frame action error:', error);
+ }
+ });
+
+ await window.frames.ready();
+ } catch (error) {
+ console.error('Frame initialization error:', error);
+ }
+ };
+
+ document.addEventListener('DOMContentLoaded', initializeFrame);
style.css
Changed around line 1
+ :root {
+ --frame-bg: #0F172A;
+ --frame-text: #E2E8F0;
+ --frame-accent: #8B5CF6;
+ --frame-card: #1E293B;
+ --frame-radius: 16px;
+ --frame-glow: 0 0 20px rgba(139, 92, 246, 0.15);
+ }
+
+ * {
+ margin: 0;
+ padding: 0;
+ box-sizing: border-box;
+ }
+
+ body {
+ font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
+ background: var(--frame-bg);
+ color: var(--frame-text);
+ min-height: 100vh;
+ display: flex;
+ flex-direction: column;
+ }
+
+ .frameContainer {
+ width: 100%;
+ max-width: 600px;
+ margin: 0 auto;
+ padding: 24px;
+ }
+
+ .frameContent {
+ background: linear-gradient(145deg, rgba(30, 41, 59, 0.9), rgba(15, 23, 42, 0.9));
+ border-radius: var(--frame-radius);
+ padding: 32px;
+ box-shadow: var(--frame-glow);
+ backdrop-filter: blur(10px);
+ border: 1px solid rgba(139, 92, 246, 0.1);
+ }
+
+ .frameTitle {
+ font-size: 32px;
+ font-weight: 800;
+ background: linear-gradient(135deg, #A78BFA, #8B5CF6);
+ -webkit-background-clip: text;
+ -webkit-text-fill-color: transparent;
+ text-align: center;
+ margin-bottom: 8px;
+ }
+
+ .frameSubtitle {
+ text-align: center;
+ color: #94A3B8;
+ margin-bottom: 24px;
+ }
+
+ .statsDisplay {
+ display: grid;
+ grid-template-columns: repeat(2, 1fr);
+ gap: 16px;
+ margin-bottom: 24px;
+ }
+
+ .statCard {
+ background: var(--frame-card);
+ padding: 20px;
+ border-radius: var(--frame-radius);
+ display: flex;
+ flex-direction: column;
+ align-items: center;
+ gap: 8px;
+ transition: transform 0.2s ease;
+ }
+
+ .statCard:hover {
+ transform: translateY(-2px);
+ }
+
+ .statLabel {
+ font-size: 14px;
+ color: #94A3B8;
+ font-weight: 500;
+ }
+
+ .statValue {
+ font-size: 24px;
+ font-weight: 700;
+ color: var(--frame-text);
+ }
+
+ .frameActionArea {
+ display: flex;
+ justify-content: center;
+ }
+
+ .frameButton {
+ background: linear-gradient(135deg, #A78BFA, #8B5CF6);
+ color: white;
+ border: none;
+ padding: 14px 28px;
+ border-radius: var(--frame-radius);
+ font-size: 16px;
+ font-weight: 600;
+ cursor: pointer;
+ transition: all 0.2s ease;
+ box-shadow: 0 4px 12px rgba(139, 92, 246, 0.25);
+ }
+
+ .frameButton:hover {
+ transform: translateY(-2px);
+ box-shadow: 0 6px 16px rgba(139, 92, 246, 0.3);
+ }
+
+ @media (max-width: 480px) {
+ .frameContainer {
+ padding: 16px;
+ }
+
+ .frameTitle {
+ font-size: 28px;
+ }
+
+ .statsDisplay {
+ grid-template-columns: 1fr;
+ }
+
+ .statCard {
+ padding: 16px;
+ }
+ }