[{"_1":2,"_122":-5,"_123":-5},"loaderData",{"_3":4,"_10":11},"root",{"_5":-5,"_6":7,"_8":9},"user","appId","cm7twdhs6009l11ml868xhxld","wsEndpoint","https://dev.fun","routes/app.$appId",{"_12":13},"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":59,"_61":62,"_63":59,"_64":59,"_65":59,"_66":42,"_67":59,"_68":59,"_69":17,"_70":17,"_71":-5,"_72":73,"_74":75,"_76":77,"_78":-5,"_79":-5,"_80":17,"_81":82,"_113":32,"_114":115,"_116":17,"_117":118},"id","fafa3a0c61fa3982c12b","isMyApp",false,"projectId","08707ff9-ce93-4f8a-80a8-cd65abe8cc55","name","formchain","description","Revolutionize data collection with this Solana-powered form platform that turns boring surveys into an addictive game! Create custom forms, authenticate with your wallet, and watch as respondents battle for leaderboard supremacy while earning $buidl tokens for their contributions. Your data stays secure with our hybrid storage while your engagement goes through the roof!","brief","The form platform where filling surveys earns crypto and turns feedback into a global competition!","isLive",true,"isPublic","tags",[],"cover","https://cdn.dev.fun/snapshot/fafa3a0c61fa3982c12b/77994_c21f43e0.webp","cdnUrl","https://cdn.dev.fun/app/fafa3a0c61fa3982c12b/77994","createdAt",["D",1749511107458],"updatedAt",["D",1749527283104],"lastCommitId",["B","77994"],"tier",1,"credits",-3,{"_14":46,"_47":48,"_49":-5,"_50":48,"_51":52,"_53":-5,"_54":55},"68c3f47f-55a4-40e0-b73c-d4f805c6fa1b","uniqueId","7ksrz2i2artxYCykg2zCT5MQofyNfWHgoYf1hcPqxkdR","username","solanaWallet","displayName","7ks...kdR","bio","avatar","/avatar.svg","commitCount",4,"forkCount",0,"likeCount","runsCount",7,"downvoteCount","upvoteCount","upvoteRate","commentCount","reportCount","visitorCount","isArchived","isRenamed","contractAddress","code","import { useState, useEffect, useRef } from 'react';\nimport { motion, AnimatePresence } from 'framer-motion';\nimport { ConnectionProvider, WalletProvider, useWallet } from '@solana/wallet-adapter-react';\nimport { WalletModalProvider, WalletMultiButton } from '@solana/wallet-adapter-react-ui';\nimport '@solana/wallet-adapter-react-ui/styles.css';\nimport { io } from 'socket.io-client';\nimport { Trophy, Rocket, Award, ChevronRight, ChevronLeft, Plus, Trash2, Edit3, Save, CheckCircle, Lock, Send, BarChart3, List, Settings, Search, Clock, Star, Medal, Home, PieChart, Zap, TrendingUp, Crown, Gift, Copy, Check, FileUp, Calendar, MessageSquare, Share2, ExternalLink, Image as ImageIcon, Moon, Sun } from 'lucide-react';\nconst socket = io('wss://ws.dev.fun/app-fafa3a0c61fa3982c12b');\nconst BASE_URL = 'https://dev.fun/form';\nconst AppWithProvider = () => {\n const endpoint = 'https://rpc.dev.fun/fafa3a0c61fa3982c12b';\n return \n \n \n \n \n \n ;\n};\nconst formTemplates = [{\n id: 1,\n name: \"Community Feedback\",\n description: \"Get insights from your community members\",\n icon: \"🗣️\",\n questions: 8,\n responses: 124,\n category: \"Feedback\"\n}, {\n id: 2,\n name: \"Event Registration\",\n description: \"Register participants for your next event\",\n icon: \"📅\",\n questions: 5,\n responses: 76,\n category: \"Events\"\n}, {\n id: 3,\n name: \"Product Survey\",\n description: \"Gather feedback about your product\",\n icon: \"📊\",\n questions: 12,\n responses: 210,\n category: \"Market Research\"\n}, {\n id: 4,\n name: \"Satisfaction Rating\",\n description: \"Measure customer satisfaction\",\n icon: \"⭐\",\n questions: 3,\n responses: 98,\n category: \"Feedback\"\n}];\nconst sampleForms = [{\n id: 'form1',\n title: 'Solana Developer Survey',\n description: 'Help us understand the Solana developer experience',\n questions: 10,\n responses: 245,\n createdAt: '2025-05-15',\n reward: 50\n}, {\n id: 'form2',\n title: 'DeFi User Research',\n description: 'Share your experience with DeFi applications',\n questions: 8,\n responses: 189,\n createdAt: '2025-05-22',\n reward: 75\n}, {\n id: 'form3',\n title: 'NFT Marketplace Feedback',\n description: 'Tell us about your NFT trading experience',\n questions: 12,\n responses: 321,\n createdAt: '2025-05-28',\n reward: 100\n}];\nconst sampleLeaderboard = [{\n rank: 1,\n user: 'CryptoKing',\n wallet: '8xJT...p3PF',\n points: 9850,\n forms: 78,\n badges: 12\n}, {\n rank: 2,\n user: 'DataWarrior',\n wallet: '3rGz...m8yK',\n points: 8720,\n forms: 64,\n badges: 10\n}, {\n rank: 3,\n user: 'BlockchainQueen',\n wallet: '9qBx...L4sE',\n points: 7890,\n forms: 59,\n badges: 9\n}, {\n rank: 4,\n user: 'SolanaWhiz',\n wallet: '2pWd...j7tR',\n points: 6540,\n forms: 47,\n badges: 8\n}, {\n rank: 5,\n user: 'FormMaster',\n wallet: '5zXc...h1Vn',\n points: 6120,\n forms: 41,\n badges: 7\n}];\nconst badges = [{\n id: 1,\n name: 'First Form',\n icon: '🏆',\n description: 'Created your first form',\n unlocked: true\n}, {\n id: 2,\n name: 'Data Collector',\n icon: '📊',\n description: 'Collected 100+ responses',\n unlocked: true\n}, {\n id: 3,\n name: 'Form Architect',\n icon: '🏗️',\n description: 'Created 10+ forms',\n unlocked: false\n}, {\n id: 4,\n name: 'Survey Superstar',\n icon: '⭐',\n description: 'Received 50+ 5-star ratings',\n unlocked: false\n}, {\n id: 5,\n name: 'Community Leader',\n icon: '👑',\n description: 'Top 10 on the leaderboard',\n unlocked: false\n}];\nconst sampleQuestions = [{\n id: 'q1',\n type: 'text',\n question: 'What is your name?',\n required: true\n}, {\n id: 'q2',\n type: 'multiple',\n question: 'How did you hear about us?',\n options: ['Social Media', 'Friend', 'Advertisement', 'Other'],\n required: false\n}, {\n id: 'q3',\n type: 'rating',\n question: 'Rate your experience from 1-5',\n required: true\n}];\nfunction App() {\n const {\n publicKey,\n connected\n } = useWallet();\n const [currentView, setCurrentView] = useState('home');\n const [activeForm, setActiveForm] = useState(null);\n const [isConnected, setIsConnected] = useState(false);\n const [buidlBalance, setBuidlBalance] = useState(0);\n const [userForms, setUserForms] = useState([]);\n const [notifications,,] = useState(3);\n const [darkMode, setDarkMode] = useState(true);\n useEffect(() => {\n if (connected && publicKey) {\n setIsConnected(true);\n setBuidlBalance(1250);\n setUserForms(sampleForms);\n } else {\n setIsConnected(false);\n }\n }, [connected, publicKey]);\n useEffect(() => {\n function onConnect() {\n console.log('Socket connected');\n }\n function onDisconnect() {\n console.log('Socket disconnected');\n }\n function onUserCount(count) {\n console.log(`Users online: ${count}`);\n }\n function onNewResponse(data) {\n console.log('New form response:', data);\n }\n socket.on('connect', onConnect);\n socket.on('disconnect', onDisconnect);\n socket.on('devfun:user_count', onUserCount);\n socket.on('form_response', onNewResponse);\n return () => {\n socket.off('connect', onConnect);\n socket.off('disconnect', onDisconnect);\n socket.off('devfun:user_count', onUserCount);\n socket.off('form_response', onNewResponse);\n };\n }, []);\n const navigateTo = (view, form = null) => {\n setCurrentView(view);\n if (form) {\n setActiveForm(form);\n }\n };\n const toggleTheme = () => {\n setDarkMode(!darkMode);\n };\n return

\n \n $\"Formchain$ \n \n \n BETA\n \n

\n \n

\n \n \n \n \n

\n \n

\n {isConnected && \n \n {buidlBalance.toLocaleString()} $BUIDL\n }\n \n \n \n

\n \n {notifications > 0 && \n {notifications}\n }\n

\n \n

\n \n {currentView === 'home' && }\n {currentView === 'dashboard' && }\n {currentView === 'forms' && }\n {currentView === 'create-form' && }\n {currentView === 'form-detail' && }\n {currentView === 'fill-form' && }\n {currentView === 'leaderboard' && }\n {currentView === 'badges' && }\n \n

\n \n \n \n \n

;\n}\nconst MobileNav = ({\n currentView,\n navigateTo,\n darkMode,\n toggleTheme\n}) => {\n return

\n \n \n \n \n \n

;\n};\nconst HomeView = ({\n navigateTo,\n isConnected,\n darkMode\n}) => {\n return \n {}\n

\n \n

\n \n Make Form-Filling Addictive\n \n \n \n Revolutionize data collection with Solana-powered forms that turn boring surveys into an exciting game. Create, share, and earn $BUIDL tokens!\n \n \n \n \n \n {!isConnected && }\n \n

\n \n \n

\n \n

User Survey

\n \n 25 $BUIDL reward\n

\n \n

\n How would you rate your experience?\n

\n {[1, 2, 3, 4, 5].map(num => )}\n

\n \n

\n What features do you use most?\n

\n {['Analytics', 'Forms', 'Rewards', 'Leaderboards'].map(feature =>

\n {feature}\n

)}\n

\n \n

\n 2 of 5 questions\n Progress: 40%\n

\n \n

\n \n {}\n

Why Choose Formchain?

Discover how our platform transforms traditional forms into engaging experiences

\n \n

\n } title=\"Solana-Powered Forms\" description=\"Authenticate with your wallet and keep your data secure with on-chain verification\" />\n } title=\"Gamified Responses\" description=\"Turn boring surveys into an engaging game with points, badges, and leaderboards\" />\n } title=\"Earn $BUIDL Tokens\" description=\"Get rewarded for creating forms and providing valuable responses\" />\n } title=\"Hybrid Storage\" description=\"Keep sensitive data secure with our hybrid on-chain/off-chain storage solution\" />\n } title=\"Advanced Analytics\" description=\"Gain valuable insights with our comprehensive response dashboard\" />\n } title=\"Global Community\" description=\"Connect with form creators and respondents from around the world\" />\n

\n \n {}\n

Popular Templates

\n \n

\n {formTemplates.map(template => navigateTo('create-form')}>\n

{template.icon}

{template.category}

{template.name}

{template.description}

\n {template.questions} questions\n {template.responses} responses\n

\n )}\n

\n \n {}\n

Ready to Transform Your Data Collection?

\n Join thousands of creators and respondents already using Formchain to revolutionize their form experience\n

\n \n \n

\n ;\n};\nconst FeatureCard = ({\n icon,\n title,\n description,\n darkMode\n}) => {\n return \n

\n {icon}\n

{title}

{description}

\n ;\n};\nconst Globe = props => ;\nconst DashboardView = ({\n darkMode\n}) => {\n const [timeRange, setTimeRange] = useState('week');\n return \n

Dashboard

Monitor your forms performance and earnings

\n \n

\n \n \n \n \n

\n \n {}\n

\n } darkMode={darkMode} />\n } darkMode={darkMode} />\n } darkMode={darkMode} />\n } darkMode={darkMode} />\n

\n \n {}\n

Response Activity

\n \n

\n {Array(7).fill(0).map((_, i) =>

\n {['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'][i]}\n

)}\n

\n \n

Form Performance

\n \n

\n {sampleForms.map(form =>

\n \n

{form.title}

\n {form.responses} responses\n

)}\n

\n \n {}\n

Recent Activity

\n \n

\n } title=\"Form Submitted\" description=\"NFT Marketplace Feedback\" time=\"12 min ago\" reward={100} />\n } title=\"Form Shared\" description=\"Solana Developer Survey\" time=\"3 hours ago\" reward={10} />\n } title=\"Badge Earned\" description=\"Form Creator Level 2\" time=\"Yesterday\" reward={50} />\n } title=\"Form Created\" description=\"DeFi User Research\" time=\"2 days ago\" reward={75} />\n

\n \n

Top Earners This Week

\n \n

\n {sampleLeaderboard.slice(0, 4).map((user, index) =>

\n {index + 1}\n

{user.user}

\n \n {user.points.toLocaleString()}\n

\n {user.forms} forms • {user.badges} badges\n

)}\n

\n ;\n};\nconst StatCard = ({\n title,\n value,\n change,\n period,\n icon,\n darkMode\n}) => {\n const isPositive = change.startsWith('+');\n return \n

{title}

{value}

\n {icon}\n

\n {change} from last {period}\n

\n ;\n};\nconst ActivityItem = ({\n icon,\n title,\n description,\n time,\n reward\n}) => {\n return

\n {icon}\n

{title}

\n {reward &&

\n \n {reward}\n

}\n

\n {description}\n {time}\n

;\n};\nconst FormsView = ({\n navigateTo,\n userForms,\n darkMode\n}) => {\n const [searchQuery, setSearchQuery] = useState('');\n const [filterStatus, setFilterStatus] = useState('all');\n const filteredForms = userForms.filter(form => {\n if (filterStatus !== 'all') {\n return true;\n }\n if (searchQuery) {\n return form.title.toLowerCase().includes(searchQuery.toLowerCase()) || form.description.toLowerCase().includes(searchQuery.toLowerCase());\n }\n return true;\n });\n return \n

My Forms

Manage and track all your created forms

\n \n \n

\n \n {}\n

\n \n setSearchQuery(e.target.value)} />\n

\n \n

\n \n \n \n

\n \n {}\n

\n {filteredForms.length > 0 ? filteredForms.map(form => \n

{form.title}

{form.description}

\n \n

\n \n {form.questions} questions\n

\n \n {form.responses} responses\n

\n \n Created {form.createdAt}\n

\n \n {form.reward} $BUIDL reward\n

\n \n

\n \n \n \n

\n ) :

\n \n

No forms found

\n {searchQuery ? 'No forms match your search query' : 'You haven\\'t created any forms yet'}\n

\n \n

}\n

\n ;\n};\nconst CreateFormView = ({\n navigateTo,\n darkMode\n}) => {\n const [formTitle, setFormTitle] = useState('');\n const [formDescription, setFormDescription] = useState('');\n const [questions, setQuestions] = useState([...sampleQuestions]);\n const [currentStep, setCurrentStep] = useState(1);\n const [reward, setReward] = useState(50);\n const [isPrivate, setIsPrivate] = useState(false);\n const [formCreated, setFormCreated] = useState(false);\n const [formLink, setFormLink] = useState('');\n const linkRef = useRef(null);\n const addQuestion = type => {\n const newQuestion = {\n id: `q${questions.length + 1}`,\n type,\n question: '',\n required: false,\n options: type === 'multiple' ? [''] : undefined,\n fileTypes: type === 'file' ? ['pdf', 'docx', 'jpg', 'png'] : undefined,\n dateSettings: type === 'date' ? {\n includeTime: false\n } : undefined\n };\n setQuestions([...questions, newQuestion]);\n };\n const removeQuestion = id => {\n setQuestions(questions.filter(q => q.id !== id));\n };\n const updateQuestion = (id, field, value) => {\n setQuestions(questions.map(q => {\n if (q.id === id) {\n return {\n ...q,\n [field]: value\n };\n }\n return q;\n }));\n };\n const addOption = questionId => {\n setQuestions(questions.map(q => {\n if (q.id === questionId) {\n return {\n ...q,\n options: [...q.options, '']\n };\n }\n return q;\n }));\n };\n const updateOption = (questionId, index, value) => {\n setQuestions(questions.map(q => {\n if (q.id === questionId) {\n const options = [...q.options];\n options[index] = value;\n return {\n ...q,\n options\n };\n }\n return q;\n }));\n };\n const removeOption = (questionId, index) => {\n setQuestions(questions.map(q => {\n if (q.id === questionId) {\n const options = [...q.options];\n options.splice(index, 1);\n return {\n ...q,\n options\n };\n }\n return q;\n }));\n };\n const handleCreateForm = () => {\n const formId = `${Date.now().toString(36)}-${Math.random().toString(36).substring(2, 8)}`;\n const shareableLink = `${BASE_URL}/${formId}`;\n console.log({\n id: formId,\n title: formTitle,\n description: formDescription,\n questions,\n reward,\n isPrivate,\n shareableLink\n });\n setFormLink(shareableLink);\n setFormCreated(true);\n };\n const copyLinkToClipboard = () => {\n if (linkRef.current) {\n navigator.clipboard.writeText(linkRef.current.value);\n }\n };\n const finishFormCreation = () => {\n navigateTo('forms');\n };\n return \n

Create New Form

Design your form, set rewards, and share with respondents

\n \n {}\n

\n = 1} isCompleted={currentStep > 1} />\n

1 ? 'w-full' : 'w-0'}`}>

\n = 2} isCompleted={currentStep > 2} />\n

2 ? 'w-full' : 'w-0'}`}>

\n = 3} isCompleted={currentStep > 3} />\n

\n \n {}\n

\n {currentStep === 1 && \n

\n Form Title\n setFormTitle(e.target.value)} />\n

\n \n

\n Description\n

setFormDescription(e.target.value)} />\n            </div>\n            \n            <div className=\"pt-4\">\n              <button onClick={() => setCurrentStep(2)} disabled={!formTitle.trim()} className={`w-full py-3 rounded-lg font-medium flex items-center justify-center gap-2 ${formTitle.trim() ? 'bg-gradient-to-r from-purple-600 to-pink-600' : 'bg-purple-900/40 text-purple-300 cursor-not-allowed'}`}>\n                Continue to Questions\n                <ChevronRight size={18} />\n              </button>\n            </div>\n          </motion.div>}\n        \n        {currentStep === 2 && <motion.div initial={{\n        opacity: 0,\n        y: 20\n      }} animate={{\n        opacity: 1,\n        y: 0\n      }} exit={{\n        opacity: 0,\n        y: -20\n      }} className=\"space-y-6\">\n            <div className=\"flex flex-col md:flex-row justify-between md:items-center gap-4\">\n              <h3 className=\"text-xl font-medium\">Form Questions</h3>\n              <div className=\"flex flex-wrap gap-2\">\n                <button onClick={() => addQuestion('text')} className=\"px-3 py-1.5 bg-black/30 border border-indigo-500/30 rounded-lg text-sm flex items-center gap-1.5 hover:bg-black/40\">\n                  <Plus size={14} />\n                  Text\n                </button>\n                <button onClick={() => addQuestion('multiple')} className=\"px-3 py-1.5 bg-black/30 border border-indigo-500/30 rounded-lg text-sm flex items-center gap-1.5 hover:bg-black/40\">\n                  <Plus size={14} />\n                  Multiple Choice\n                </button>\n                <button onClick={() => addQuestion('rating')} className=\"px-3 py-1.5 bg-black/30 border border-indigo-500/30 rounded-lg text-sm flex items-center gap-1.5 hover:bg-black/40\">\n                  <Plus size={14} />\n                  Rating\n                </button>\n                <button onClick={() => addQuestion('file')} className=\"px-3 py-1.5 bg-black/30 border border-indigo-500/30 rounded-lg text-sm flex items-center gap-1.5 hover:bg-black/40\">\n                  <FileUp size={14} />\n                  File Upload\n                </button>\n                <button onClick={() => addQuestion('date')} className=\"px-3 py-1.5 bg-black/30 border border-indigo-500/30 rounded-lg text-sm flex items-center gap-1.5 hover:bg-black/40\">\n                  <Calendar size={14} />\n                  Date\n                </button>\n              </div>\n            </div>\n            \n            <div className=\"space-y-6\">\n              {questions.map((question, index) => <div key={question.id} className=\"bg-black/30 border border-purple-700/40 rounded-xl p-5\">\n                  <div className=\"flex justify-between items-start mb-4\">\n                    <div className=\"flex items-center gap-2\">\n                      <div className=\"w-8 h-8 rounded-full bg-indigo-800/50 flex items-center justify-center text-sm font-medium\">\n                        {index + 1}\n                      </div>\n                      <span className=\"text-sm text-indigo-300\">\n                        {question.type === 'text' ? 'Text Question' : question.type === 'multiple' ? 'Multiple Choice' : question.type === 'rating' ? 'Rating' : question.type === 'file' ? 'File Upload' : question.type === 'date' ? 'Date & Time' : 'Question'}\n                      </span>\n                    </div>\n                    <button onClick={() => removeQuestion(question.id)} className=\"text-purple-300 hover:text-red-400 transition-colors\">\n                      <Trash2 size={18} />\n                    </button>\n                  </div>\n                  \n                  <div className=\"space-y-4\">\n                    <div className=\"space-y-2\">\n                      <label className=\"block text-sm font-medium\">Question</label>\n                      <input type=\"text\" placeholder=\"Enter your question\" className=\"w-full bg-black/20 border border-purple-700/30 rounded-lg py-2 px-4 focus:outline-none focus:border-purple-500 transition-colors\" value={question.question} onChange={e => updateQuestion(question.id, 'question', e.target.value)} />\n                    </div>\n                    \n                    {question.type === 'multiple' && <div className=\"space-y-3\">\n                        <label className=\"block text-sm font-medium\">Options</label>\n                        {question.options.map((option, optIndex) => <div key={optIndex} className=\"flex gap-2\">\n                            <input type=\"text\" placeholder={`Option ${optIndex + 1}`} className=\"flex-1 bg-black/20 border border-purple-700/30 rounded-lg py-2 px-4 focus:outline-none focus:border-purple-500 transition-colors\" value={option} onChange={e => updateOption(question.id, optIndex, e.target.value)} />\n                            <button onClick={() => removeOption(question.id, optIndex)} className=\"p-2 text-purple-300 hover:text-red-400 transition-colors\" disabled={question.options.length <= 1}>\n                              <Trash2 size={18} />\n                            </button>\n                          </div>)}\n                        \n                        <button onClick={() => addOption(question.id)} className=\"px-3 py-1.5 bg-black/30 border border-purple-500/30 rounded-lg text-sm flex items-center gap-1.5 hover:bg-black/40\">\n                          <Plus size={14} />\n                          Add Option\n                        </button>\n                      </div>}\n                    \n                    {question.type === 'rating' && <div className=\"space-y-3\">\n                        <label className=\"block text-sm font-medium\">Rating Scale</label>\n                        <div className=\"flex gap-2\">\n                          {[1, 2, 3, 4, 5].map(num => <div key={num} className=\"w-10 h-10 rounded-lg bg-indigo-900/40 flex items-center justify-center\">\n                              {num}\n                            </div>)}\n                        </div>\n                      </div>}\n                      \n                    {question.type === 'file' && <div className=\"space-y-3\">\n                        <label className=\"block text-sm font-medium\">Allowed File Types</label>\n                        <div className=\"flex flex-wrap gap-2\">\n                          {['pdf', 'docx', 'jpg', 'png'].map((type, typeIndex) => <div key={typeIndex} className=\"px-3 py-1.5 bg-black/20 border border-indigo-700/30 rounded-lg text-sm\">\n                              .{type}\n                            </div>)}\n                        </div>\n                        <div className=\"bg-black/30 rounded-lg p-4 mt-2 border border-dashed border-indigo-500/30 flex items-center justify-center\">\n                          <div className=\"text-center\">\n                            <FileUp size={24} className=\"mx-auto mb-2 text-indigo-400\" />\n                            <div className=\"text-sm text-indigo-300\">Files will be uploaded here</div>\n                          </div>\n                        </div>\n                      </div>}\n                      \n                    {question.type === 'date' && <div className=\"space-y-3\">\n                        <label className=\"block text-sm font-medium\">Date Settings</label>\n                        <div className=\"flex items-center justify-between p-3 bg-black/20 border border-indigo-700/30 rounded-lg\">\n                          <span className=\"text-sm\">Include time selection</span>\n                          <div className=\"w-10 h-5 rounded-full bg-indigo-900/50 flex items-center p-0.5 cursor-pointer\">\n                            <div className=\"w-4 h-4 rounded-full bg-white transform translate-x-0\"></div>\n                          </div>\n                        </div>\n                        <div className=\"flex gap-2\">\n                          <div className=\"flex-1 p-3 bg-black/20 border border-indigo-700/30 rounded-lg text-sm text-center text-indigo-300\">\n                            MM/DD/YYYY\n                          </div>\n                        </div>\n                      </div>}\n                    \n                    <div className=\"flex items-center gap-2\">\n                      <input type=\"checkbox\" id={`required-${question.id}`} checked={question.required} onChange={e => updateQuestion(question.id, 'required', e.target.checked)} className=\"w-4 h-4 rounded border-purple-700\" />\n                      <label htmlFor={`required-${question.id}`} className=\"text-sm\">Required question</label>\n                    </div>\n                  </div>\n                </div>)}\n              \n              {questions.length === 0 && <div className=\"text-center py-8\">\n                  <div className=\"w-12 h-12 mx-auto bg-black/30 rounded-full flex items-center justify-center mb-3\">\n                    <Plus size={24} className=\"text-purple-400\" />\n                  </div>\n                  <h3 className=\"text-lg font-medium mb-1\">No questions yet</h3>\n                  <p className=\"text-purple-300 mb-4\">Add your first question using the buttons above</p>\n                </div>}\n            </div>\n            \n            <div className=\"flex justify-between pt-4\">\n              <button onClick={() => setCurrentStep(1)} className=\"px-4 py-2.5 bg-black/30 border border-purple-500/30 rounded-lg flex items-center gap-2 hover:bg-black/40\">\n                <ChevronLeft size={18} />\n                Back\n              </button>\n              <button onClick={() => setCurrentStep(3)} disabled={questions.length === 0} className={`px-6 py-2.5 rounded-lg font-medium flex items-center gap-2 ${questions.length > 0 ? 'bg-gradient-to-r from-purple-600 to-pink-600' : 'bg-purple-900/40 text-purple-300 cursor-not-allowed'}`}>\n                Continue to Settings\n                <ChevronRight size={18} />\n              </button>\n            </div>\n          </motion.div>}\n        \n        {currentStep === 3 && !formCreated && <motion.div initial={{\n        opacity: 0,\n        y: 20\n      }} animate={{\n        opacity: 1,\n        y: 0\n      }} exit={{\n        opacity: 0,\n        y: -20\n      }} className=\"space-y-6\">\n            <div>\n              <h3 className=\"text-xl font-medium mb-4\">Form Settings</h3>\n              \n              <div className=\"space-y-6\">\n                <div className=\"bg-black/30 border border-purple-700/40 rounded-xl p-5 space-y-4\">\n                  <h4 className=\"font-medium flex items-center gap-2\">\n                    <Zap size={18} className=\"text-yellow-400\" />\n                    Reward Settings\n                  </h4>\n                  \n                  <div className=\"space-y-2\">\n                    <label className=\"block text-sm font-medium\">$BUIDL Reward per Response</label>\n                    <div className=\"flex items-center gap-3\">\n                      <input type=\"range\" min=\"0\" max=\"100\" step=\"5\" value={reward} onChange={e => setReward(Number(e.target.value))} className=\"flex-1\" />\n                      <div className=\"w-16 h-10 bg-black/20 border border-purple-700/30 rounded-lg flex items-center justify-center font-medium\">\n                        {reward}\n                      </div>\n                    </div>\n                    <p className=\"text-sm text-purple-300\">\n                      Respondents will earn {reward} $BUIDL tokens for completing this form\n                    </p>\n                  </div>\n                </div>\n                \n                <div className=\"bg-black/30 border border-purple-700/40 rounded-xl p-5 space-y-4\">\n                  <h4 className=\"font-medium flex items-center gap-2\">\n                    <Lock size={18} className=\"text-purple-400\" />\n                    Privacy Settings\n                  </h4>\n                  \n                  <div className=\"flex items-center justify-between\">\n                    <div>\n                      <div className=\"font-medium\">Private Form</div>\n                      <p className=\"text-sm text-indigo-300\">\n                        Only accessible via direct link\n                      </p>\n                    </div>\n                    <div className={`w-12 h-6 rounded-full flex items-center p-1 cursor-pointer transition-colors ${isPrivate ? 'bg-indigo-600 justify-end' : 'bg-indigo-900 justify-start'}`} onClick={() => setIsPrivate(!isPrivate)}>\n                      <div className=\"w-4 h-4 rounded-full bg-white\"></div>\n                    </div>\n                  </div>\n                  \n                  <div className=\"flex items-center justify-between\">\n                    <div>\n                      <div className=\"font-medium\">Custom Theme</div>\n                      <p className=\"text-sm text-indigo-300\">\n                        Apply a custom theme to your form\n                      </p>\n                    </div>\n                    <div className=\"flex gap-2\">\n                      <div className=\"w-6 h-6 rounded-full bg-indigo-600 border-2 border-white cursor-pointer\"></div>\n                      <div className=\"w-6 h-6 rounded-full bg-violet-600 cursor-pointer\"></div>\n                      <div className=\"w-6 h-6 rounded-full bg-sky-600 cursor-pointer\"></div>\n                      <div className=\"w-6 h-6 rounded-full bg-emerald-600 cursor-pointer\"></div>\n                    </div>\n                  </div>\n                </div>\n                \n                <div className=\"bg-black/30 border border-indigo-700/40 rounded-xl p-5 space-y-4\">\n                  <h4 className=\"font-medium flex items-center gap-2\">\n                    <Settings size={18} className=\"text-indigo-400\" />\n                    Advanced Settings\n                  </h4>\n                  \n                  <div className=\"flex items-center justify-between\">\n                    <div>\n                      <div className=\"font-medium\">Require Wallet Connection</div>\n                      <p className=\"text-sm text-indigo-300\">\n                        Users must connect their Solana wallet to respond\n                      </p>\n                    </div>\n                    <div className=\"w-12 h-6 rounded-full bg-indigo-600 flex items-center p-1 justify-end cursor-not-allowed\">\n                      <div className=\"w-4 h-4 rounded-full bg-white\"></div>\n                    </div>\n                  </div>\n                  \n                  <div className=\"flex items-center justify-between\">\n                    <div>\n                      <div className=\"font-medium\">Store Data On-Chain</div>\n                      <p className=\"text-sm text-purple-300\">\n                        Response metadata will be stored on Solana blockchain\n                      </p>\n                    </div>\n                    <div className=\"w-12 h-6 rounded-full bg-purple-600 flex items-center p-1 justify-end cursor-not-allowed\">\n                      <div className=\"w-4 h-4 rounded-full bg-white\"></div>\n                    </div>\n                  </div>\n                </div>\n              </div>\n            </div>\n            \n            {!formCreated ? <div className=\"flex justify-between pt-4\">\n                <button onClick={() => setCurrentStep(2)} className=\"px-4 py-2.5 bg-black/30 border border-indigo-500/30 rounded-lg flex items-center gap-2 hover:bg-black/40\">\n                  <ChevronLeft size={18} />\n                  Back\n                </button>\n                <button onClick={handleCreateForm} className=\"px-6 py-2.5 bg-gradient-to-r from-indigo-600 to-violet-600 rounded-lg font-medium flex items-center gap-2\">\n                  <Save size={18} />\n                  Create Form\n                </button>\n              </div> : <motion.div initial={{\n          opacity: 0,\n          y: 20\n        }} animate={{\n          opacity: 1,\n          y: 0\n        }} className=\"space-y-6 pt-4\">\n                <div className=\"bg-green-900/20 border border-green-500/30 rounded-lg p-4 flex items-start gap-4\">\n                  <div className=\"w-10 h-10 rounded-full bg-green-500/20 flex items-center justify-center text-green-400\">\n                    <CheckCircle size={20} />\n                  </div>\n                  <div>\n                    <h3 className=\"font-medium text-green-400\">Form Created Successfully!</h3>\n                    <p className=\"text-sm mt-1\">Your form has been created and is ready to share with respondents.</p>\n                  </div>\n                </div>\n                \n                <div className=\"space-y-3\">\n                  <label className=\"block text-sm font-medium\">Shareable Link</label>\n                  <div className=\"flex\">\n                    <input ref={linkRef} type=\"text\" value={formLink} readOnly className=\"flex-1 bg-black/20 border border-indigo-700/30 rounded-l-lg py-2.5 px-4 focus:outline-none text-indigo-100\" />\n                    <button onClick={copyLinkToClipboard} className=\"px-4 py-2.5 bg-indigo-700 rounded-r-lg hover:bg-indigo-600 transition-colors\">\n                      <Copy size={18} />\n                    </button>\n                  </div>\n                  <p className=\"text-sm text-indigo-300\">Share this link with respondents to collect responses</p>\n                </div>\n                \n                <div className=\"bg-black/30 border border-indigo-500/30 rounded-lg p-4\">\n                  <h4 className=\"font-medium mb-2 flex items-center gap-2\">\n                    <Share2 size={18} className=\"text-indigo-400\" />\n                    Share Options\n                  </h4>\n                  <div className=\"grid grid-cols-2 gap-3 mt-3\">\n                    <button className=\"p-3 bg-black/30 border border-indigo-500/30 rounded-lg text-sm flex items-center justify-center gap-2 hover:bg-black/40\">\n                      <ExternalLink size={16} />\n                      Open Form\n                    </button>\n                    <button className=\"p-3 bg-indigo-600 rounded-lg text-sm flex items-center justify-center gap-2 hover:bg-indigo-500\">\n                      <MessageSquare size={16} />\n                      Send via Message\n                    </button>\n                  </div>\n                </div>\n                \n                <div className=\"pt-2\">\n                  <button onClick={finishFormCreation} className=\"w-full py-3 rounded-lg font-medium bg-gradient-to-r from-indigo-600 to-violet-600\">\n                    Go to My Forms\n                  </button>\n                </div>\n              </motion.div>}\n          </motion.div>}\n      </div>\n    </motion.div>;\n};\nconst StepIndicator = ({\n  number,\n  title,\n  isActive,\n  isCompleted\n}) => {\n  return <div className=\"flex flex-col items-center\">\n      <div className={`w-8 h-8 rounded-full flex items-center justify-center font-medium ${isCompleted ? 'bg-green-500' : isActive ? 'bg-purple-600' : 'bg-purple-900/40'}`}>\n        {isCompleted ? <CheckCircle size={16} /> : number}\n      </div>\n      <span className={`text-xs mt-1 ${isActive ? 'text-white' : 'text-purple-300'}`}>{title}</span>\n    </div>;\n};\nconst ShareFormButton = ({\n  form\n}) => {\n  const [showDropdown, setShowDropdown] = useState(false);\n  const [copied, setCopied] = useState(false);\n  const formLink = `${BASE_URL}/${form.id}`;\n  const copyToClipboard = () => {\n    navigator.clipboard.writeText(formLink);\n    setCopied(true);\n    setTimeout(() => setCopied(false), 2000);\n  };\n  return <div className=\"relative\">\n      <button onClick={() => setShowDropdown(!showDropdown)} className=\"px-4 py-2 bg-black/30 border border-indigo-500/30 rounded-lg text-sm flex items-center gap-2 hover:bg-black/40\">\n        <Send size={16} />\n        Share Form\n      </button>\n      \n      {showDropdown && <motion.div initial={{\n      opacity: 0,\n      y: 10\n    }} animate={{\n      opacity: 1,\n      y: 0\n    }} className=\"absolute right-0 top-full mt-2 w-72 bg-slate-900 border border-indigo-500/30 rounded-lg shadow-xl p-4 z-50\">\n          <h4 className=\"font-medium mb-2\">Share this form</h4>\n          <div className=\"flex mb-3\">\n            <input type=\"text\" value={formLink} readOnly className=\"flex-1 bg-black/20 border border-indigo-700/30 rounded-l-lg py-2 px-3 text-sm focus:outline-none text-indigo-100\" />\n            <button onClick={copyToClipboard} className=\"px-3 py-2 bg-indigo-700 rounded-r-lg hover:bg-indigo-600 transition-colors\">\n              {copied ? <Check size={16} /> : <Copy size={16} />}\n            </button>\n          </div>\n          <div className=\"grid grid-cols-2 gap-2\">\n            <button className=\"p-2 bg-black/30 border border-indigo-500/30 rounded-lg text-xs flex items-center justify-center gap-1 hover:bg-black/40\">\n              <ExternalLink size={14} />\n              Open Form\n            </button>\n            <button className=\"p-2 bg-indigo-600 rounded-lg text-xs flex items-center justify-center gap-1 hover:bg-indigo-500\">\n              <MessageSquare size={14} />\n              Send Message\n            </button>\n          </div>\n        </motion.div>}\n    </div>;\n};\nconst FormDetailView = ({\n  form,\n  navigateTo,\n  darkMode\n}) => {\n  return <motion.div initial={{\n    opacity: 0\n  }} animate={{\n    opacity: 1\n  }} exit={{\n    opacity: 0\n  }} className=\"space-y-8\">\n      <div className=\"flex flex-col md:flex-row justify-between md:items-center gap-4\">\n        <div>\n        <button onClick={() => navigateTo('forms')} className=\"flex items-center gap-1 text-indigo-300 hover:text-white mb-2\">\n            <ChevronLeft size={16} />\n            Back to Forms\n          </button>\n          <h1 className=\"text-3xl font-bold mb-1\">{form.title}</h1>\n          <p className=\"text-purple-300\">{form.description}</p>\n        </div>\n        \n        <div className=\"flex flex-wrap gap-3\">\n        <ShareFormButton form={form} />\n          <button onClick={() => navigateTo('fill-form', form)} className=\"px-4 py-2 bg-gradient-to-r from-purple-600 to-pink-600 rounded-lg text-sm font-medium flex items-center gap-2\">\n            <Edit3 size={16} />\n            Edit Form\n          </button>\n        </div>\n      </div>\n      \n      {}\n      <div className=\"grid grid-cols-1 md:grid-cols-3 gap-6\">\n        <div className=\"bg-black/20 backdrop-blur-sm border border-purple-700/30 rounded-xl p-6\">\n          <div className=\"flex items-center gap-3 mb-2\">\n            <div className=\"w-10 h-10 rounded-lg bg-black/30 flex items-center justify-center\">\n              <BarChart3 size={20} className=\"text-purple-400\" />\n            </div>\n            <h3 className=\"text-lg font-medium\">Responses</h3>\n          </div>\n          <div className=\"text-3xl font-bold mb-1\">{form.responses}</div>\n          <div className=\"text-sm text-green-400 flex items-center gap-1\">\n            <TrendingUp size={14} />\n            <span>+12% from last week</span>\n          </div>\n        </div>\n        \n        <div className=\"bg-black/20 backdrop-blur-sm border border-purple-700/30 rounded-xl p-6\">\n          <div className=\"flex items-center gap-3 mb-2\">\n            <div className=\"w-10 h-10 rounded-lg bg-black/30 flex items-center justify-center\">\n              <CheckCircle size={20} className=\"text-green-400\" />\n            </div>\n            <h3 className=\"text-lg font-medium\">Completion Rate</h3>\n          </div>\n          <div className=\"text-3xl font-bold mb-1\">86%</div>\n          <div className=\"text-sm text-green-400 flex items-center gap-1\">\n            <TrendingUp size={14} />\n            <span>+4% from last week</span>\n          </div>\n        </div>\n        \n        <div className=\"bg-black/20 backdrop-blur-sm border border-purple-700/30 rounded-xl p-6\">\n          <div className=\"flex items-center gap-3 mb-2\">\n            <div className=\"w-10 h-10 rounded-lg bg-black/30 flex items-center justify-center\">\n              <Zap size={20} className=\"text-yellow-400\" />\n            </div>\n            <h3 className=\"text-lg font-medium\">$BUIDL Spent</h3>\n          </div>\n          <div className=\"text-3xl font-bold mb-1\">{form.reward * form.responses}</div>\n          <div className=\"text-sm text-purple-300 flex items-center gap-1\">\n            <span>@ {form.reward} per response</span>\n          </div>\n        </div>\n      </div>\n      \n      {}\n      <div className=\"grid grid-cols-1 lg:grid-cols-2 gap-6\">\n        <div className=\"bg-black/20 backdrop-blur-sm border border-purple-700/30 rounded-xl p-6\">\n          <h3 className=\"text-lg font-medium mb-4\">Response Timeline</h3>\n          <div className=\"h-64 flex items-center justify-center\">\n            <div className=\"w-full h-full bg-gradient-to-b from-purple-500/20 to-transparent rounded-lg p-4 flex items-end\">\n              {Array(14).fill(0).map((_, i) => <div key={i} className=\"flex-1 flex flex-col items-center\">\n                  <div className=\"w-full max-w-[20px] bg-gradient-to-t from-purple-600 to-pink-500 rounded-t-lg\" style={{\n                height: `${20 + Math.random() * 140}px`\n              }}></div>\n                  {i % 2 === 0 && <div className=\"text-[10px] text-purple-300 mt-2\">\n                      {i + 1}/6\n                    </div>}\n                </div>)}\n            </div>\n          </div>\n        </div>\n        \n        <div className=\"bg-black/20 backdrop-blur-sm border border-purple-700/30 rounded-xl p-6\">\n          <h3 className=\"text-lg font-medium mb-4\">Question Completion</h3>\n          \n          <div className=\"space-y-4\">\n            {Array(4).fill(0).map((_, i) => <div key={i} className=\"space-y-1\">\n                <div className=\"flex justify-between text-sm\">\n                  <span>Question {i + 1}</span>\n                  <span>{90 - i * 8}%</span>\n                </div>\n                <div className=\"h-2 w-full bg-purple-900/40 rounded-full overflow-hidden\">\n                  <div className=\"h-full bg-gradient-to-r from-purple-600 to-pink-500 rounded-full\" style={{\n                width: `${90 - i * 8}%`\n              }}></div>\n                </div>\n              </div>)}\n          </div>\n        </div>\n      </div>\n      \n      {}\n      <div className=\"bg-black/20 backdrop-blur-sm border border-purple-700/30 rounded-xl p-6\">\n        <div className=\"flex justify-between items-center mb-6\">\n          <h3 className=\"text-lg font-medium\">Recent Responses</h3>\n          <button className=\"text-purple-300 hover:text-white text-sm\">\n            Export All Responses\n          </button>\n        </div>\n        \n        <div className=\"space-y-4\">\n          {Array(5).fill(0).map((_, i) => <div key={i} className=\"bg-black/30 border border-purple-700/40 rounded-xl p-4 hover:bg-black/40 transition-all cursor-pointer\">\n              <div className=\"flex justify-between items-start\">\n                <div>\n                  <div className=\"font-medium\">Response #{form.responses - i}</div>\n                  <div className=\"text-sm text-purple-300 mb-3\">\n                    {new Date(Date.now() - i * 12600000).toLocaleString()}\n                  </div>\n                  \n                  <div className=\"space-y-3\">\n                    <div>\n                      <div className=\"text-xs text-purple-300\">Question 1</div>\n                      <div className=\"text-sm\">I've been using Solana for about 2 years now.</div>\n                    </div>\n                    <div>\n                      <div className=\"text-xs text-purple-300\">Question 2</div>\n                      <div className=\"text-sm\">DeFi platforms and NFT marketplaces</div>\n                    </div>\n                    <div>\n                      <div className=\"text-xs text-purple-300\">Question 3</div>\n                      <div className=\"flex\">\n                        {Array(5).fill(0).map((_, j) => <Star key={j} size={16} className={j < 4 ? 'text-yellow-400' : 'text-purple-700'} fill={j < 4 ? 'currentColor' : 'none'} />)}\n                      </div>\n                    </div>\n                  </div>\n                </div>\n                \n                <div className=\"flex flex-col items-end\">\n                  <div className=\"flex items-center text-yellow-400 text-sm gap-1 mb-2\">\n                    <Zap size={14} />\n                    <span>{form.reward} $BUIDL</span>\n                  </div>\n                  \n                  <div className=\"flex gap-2\">\n                    <div className=\"px-2 py-1 bg-black/40 rounded text-xs border border-purple-700/30\">\n                      Mobile\n                    </div>\n                    <div className=\"px-2 py-1 bg-black/40 rounded text-xs border border-purple-700/30\">\n                      {['USA', 'Japan', 'Brazil', 'Germany', 'India'][i]}\n                    </div>\n                  </div>\n                </div>\n              </div>\n            </div>)}\n        </div>\n        \n        <div className=\"mt-4 text-center\">\n          <button className=\"px-4 py-2 bg-black/30 border border-purple-500/30 rounded-lg text-sm hover:bg-black/40\">\n            Load More Responses\n          </button>\n        </div>\n      </div>\n    </motion.div>;\n};\nconst FillFormView = ({\n  form,\n  navigateTo,\n  darkMode\n}) => {\n  const [currentStep, setCurrentStep] = useState(1);\n  const [progress, setProgress] = useState(0);\n  const totalSteps = 5;\n  useEffect(() => {\n    setProgress((currentStep - 1) / totalSteps * 100);\n  }, [currentStep]);\n  const nextStep = () => {\n    if (currentStep < totalSteps) {\n      setCurrentStep(currentStep + 1);\n    } else {\n      navigateTo('forms');\n    }\n  };\n  const prevStep = () => {\n    if (currentStep > 1) {\n      setCurrentStep(currentStep - 1);\n    }\n  };\n  return <motion.div initial={{\n    opacity: 0\n  }} animate={{\n    opacity: 1\n  }} exit={{\n    opacity: 0\n  }} className=\"space-y-8 max-w-2xl mx-auto\">\n      <div>\n        <button onClick={() => navigateTo('forms')} className=\"flex items-center gap-1 text-purple-300 hover:text-white mb-2\">\n          <ChevronLeft size={16} />\n          Back to Forms\n        </button>\n        <h1 className=\"text-3xl font-bold mb-1\">{form.title}</h1>\n        <p className=\"text-purple-300\">{form.description}</p>\n      </div>\n      \n      {}\n      <div className=\"bg-black/20 backdrop-blur-sm border border-purple-700/30 rounded-xl p-4\">\n        <div className=\"flex justify-between text-sm mb-2\">\n          <span>Question {currentStep} of {totalSteps}</span>\n          <div className=\"flex items-center gap-1 text-yellow-400\">\n            <Zap size={14} />\n            <span>{form.reward} $BUIDL reward</span>\n          </div>\n        </div>\n        <div className=\"h-2 w-full bg-purple-900/40 rounded-full overflow-hidden\">\n          <div className=\"h-full bg-gradient-to-r from-purple-600 to-pink-500 rounded-full transition-all\" style={{\n          width: `${progress}%`\n        }}></div>\n        </div>\n      </div>\n      \n      {}\n      <div className=\"bg-black/20 backdrop-blur-sm border border-purple-700/30 rounded-xl p-6\">\n        <AnimatePresence mode=\"wait\">\n          <motion.div key={currentStep} initial={{\n          opacity: 0,\n          y: 20\n        }} animate={{\n          opacity: 1,\n          y: 0\n        }} exit={{\n          opacity: 0,\n          y: -20\n        }} className=\"space-y-6\">\n            {currentStep === 1 && <div className=\"space-y-4\">\n                <h3 className=\"text-xl font-medium\">How long have you been using Solana?</h3>\n                <textarea placeholder=\"Type your answer here...\" rows={4} className=\"w-full bg-black/20 border border-purple-700/30 rounded-lg py-2.5 px-4 focus:outline-none focus:border-purple-500 transition-colors\">

}\n \n {currentStep === 2 &&

What types of applications do you use on Solana?

\n {['DeFi platforms', 'NFT marketplaces', 'Games', 'Social platforms', 'Other'].map((option, i) =>

\n {i === 1 &&

}\n

\n {option}\n

)}\n

}\n \n {currentStep === 3 &&

How would you rate your experience with Solana?

\n {[1, 2, 3, 4, 5].map(num => )}\n

\n Poor\n Excellent\n

}\n \n {currentStep === 4 &&

What challenges have you faced when using Solana?

\n {['Network congestion', 'High fees', 'Complicated UX', 'Lack of documentation', 'Security concerns'].map((option, i) =>

\n {i === 0 && }\n {i === 3 && }\n

\n {option}\n

)}\n

}\n \n {currentStep === 5 &&

Upload relevant screenshots or documents

\n \n

Drag and drop files here

or click to browse files

\n Supports PDF, DOCX, JPG, PNG (up to 10MB)\n

\n \n

example-screenshot.jpg

2.4 MB · Uploaded just now

\n \n

}\n \n {currentStep === 5 &&

What improvements would you like to see in the Solana ecosystem?

\n \n

}\n \n \n \n

\n \n \n

\n \n {}\n

\n \n

Complete for a Reward!

\n Finish this form to earn {form.reward} $BUIDL tokens and unlock the \"Feedback Champion\" badge!\n

\n ;\n};\nconst LeaderboardView = ({\n darkMode\n}) => {\n const [timeRange, setTimeRange] = useState('week');\n return \n

Leaderboard

See who's leading the charge in form creation and responses

\n \n

\n \n \n \n \n

\n \n {}\n

\n {}\n

\n \n

\n \n {}\n

\n \n

\n \n {}\n

\n \n

\n \n {}\n

Top Formchain Users

\n \n

\n {sampleLeaderboard.map(user =>

\n {user.rank}\n

\n \n

\n {user.user}\n {user.rank <= 3 && }\n

\n {user.wallet}\n

\n \n

\n \n {user.forms} forms\n

\n \n {user.badges} badges\n

\n \n {user.points.toLocaleString()} points\n

)}\n

\n \n

\n \n {}\n

Your Leaderboard Stats

Currently ranked #42 • Top 5% of users

\n \n \n

\n \n

Total Points

\n \n 3,240\n

\n \n

Forms Created

\n \n 8\n

\n \n

Badges Earned

\n \n 5\n

\n ;\n};\nconst LeaderCard = ({\n rank,\n user,\n color,\n textColor,\n size,\n featured\n}) => {\n return \n

#{rank}

\n {featured && }\n {user.user}\n {featured && }\n

{user.wallet}

\n \n

\n \n {user.points.toLocaleString()}\n

\n \n

\n \n {user.forms} forms\n

\n \n {user.badges} badges\n

\n ;\n};\nconst BadgesView = ({\n darkMode\n}) => {\n return \n

Your Badges

Showcase your achievements and unlock new rewards

\n \n

\n {badges.map(badge => \n

\n {badge.icon}\n

{badge.name}

\n {badge.unlocked ? : }\n

{badge.description}

\n \n {badge.unlocked ?

Unlocked on June 2, 2025

: }\n

\n )}\n

\n \n {}\n

Badge Progress

\n \n

\n Survey Superstar\n 32/50 five-star ratings\n

\n \n

\n Form Architect\n 8/10 forms created\n

\n \n

\n Community Leader\n Rank #42 (need to reach top 10)\n

\n \n {}\n

Special Badge Sets

\n \n

\n \n Creator Excellence\n

\n Complete all badges related to form creation\n

\n 🏆\n

\n 🏗️\n

\n ⭐\n

\n 🔍\n

2/4 badges collected

\n \n

\n \n Data Champion\n

\n Master the art of data collection and analysis\n

\n 📊\n

\n 💡\n

\n 🔮\n

\n 🎯\n

1/4 badges collected

\n \n {}\n

\n \n

Badge Rewards

\n Unlock special features and earn $BUIDL tokens by collecting badge sets\n

\n \n

\n \n Creator Excellence Set\n

\n \n 500 $BUIDL\n

\n \n

\n \n Data Champion Set\n

\n \n 750 $BUIDL\n

\n \n

\n \n Top 10 Leaderboard Position\n

\n \n 1,000 $BUIDL\n

\n ;\n};\nexport default AppWithProvider;","packageJson","{\"dependencies\":{\"react\":\"18.2.0\",\"framer-motion\":\"10.16.4\",\"lucide-react\":\"0.441.0\",\"socket.io-client\":\"4.7.2\",\"@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\"}}","appFunctions",[],"token","upstreamApp","isLordOfDev","analytics",[83,87,89,91,93,95,97,99,101,103,105,107,109,111],{"_84":85,"_86":59},"day","2025-09-24","runCount",{"_84":88,"_86":59},"2025-09-25",{"_84":90,"_86":59},"2025-09-26",{"_84":92,"_86":59},"2025-09-27",{"_84":94,"_86":59},"2025-09-28",{"_84":96,"_86":59},"2025-09-29",{"_84":98,"_86":59},"2025-09-30",{"_84":100,"_86":59},"2025-10-01",{"_84":102,"_86":59},"2025-10-02",{"_84":104,"_86":59},"2025-10-03",{"_84":106,"_86":59},"2025-10-04",{"_84":108,"_86":59},"2025-10-05",{"_84":110,"_86":59},"2025-10-06",{"_84":112,"_86":59},"2025-10-07","snapshot","ogImage","https://cdn.dev.fun/og/image/fafa3a0c61fa3982c12b/9c14feb7.webp","isDevbase","project",{"_14":19,"_119":-5,"_20":21,"_120":121,"_22":23},"image","oneliner","Forms as a crypto game","actionData","errors"]

say something