[{"_1":2,"_158":-5,"_159":-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":17,"_27":28,"_29":30,"_31":32,"_33":34,"_35":36,"_37":38,"_39":40,"_41":42,"_43":44,"_5":45,"_57":58,"_59":42,"_60":61,"_62":61,"_63":61,"_64":42,"_65":42,"_66":61,"_67":61,"_68":61,"_69":28,"_70":28,"_71":-5,"_72":73,"_74":75,"_76":77,"_110":-5,"_111":-5,"_112":17,"_113":17,"_114":115,"_146":32,"_147":148,"_149":28,"_150":151},"id","c963f4f3d3abb6580912","isMyApp",false,"projectId","cmgfqi5840017c9zfw7leiloa","name","clip2earn","description","Turn epic stream moments into viral clips. Post jobs, clip content, and earn instantly in SOL.","brief","Turn stream moments into money: streamers post bounties, clippers deliver viral clips, everyone wins.","isLive","isPublic",true,"tags",[],"cover","https://cdn.dev.fun/snapshot/c963f4f3d3abb6580912/129288_e7ec28e7.webp","cdnUrl","https://cdn.dev.fun/app/c963f4f3d3abb6580912/129288","createdAt",["D",1760481394207],"updatedAt",["D",1760886577333],"lastCommitId",["B","129288"],"tier",1,"credits",120,{"_14":46,"_47":48,"_49":48,"_50":51,"_52":48,"_53":54,"_55":56},"c5b08d9f-19da-4a38-b61e-d1f9833f027c","uniqueId","Sp3akerStelios","username","solanaWallet","4QUk9RNqFiFiwZECiczBZp8cDLvB6fViZtpAsiJaxNc6","displayName","bio","X: https://x.com/sp3akerstelios","avatar","https://cdn.dev.fun/avatar/c5b08d9f-19da-4a38-b61e-d1f9833f027c/4edd9f5c.webp","commitCount",141,"forkCount","likeCount",0,"runsCount","downvoteCount","upvoteCount","upvoteRate","commentCount","reportCount","visitorCount","isArchived","isRenamed","contractAddress","code","import { useState, useEffect, useRef } from 'react';\nimport { useDevapp, UserButton, DevappProvider, openLink } from '@devfunlabs/web-sdk';\nimport { Clapperboard, Briefcase, CheckCircle, XCircle, DollarSign, Award } from 'lucide-react';\nfunction ClipPreview({\n clipUrl,\n showPreview = true\n}) {\n const containerRef = useRef(null);\n const [tweetId, setTweetId] = useState(null);\n const [loading, setLoading] = useState(true);\n useEffect(() => {\n const extractTweetId = url => {\n const match = url.match(/status\\/(\\d+)/);\n return match ? match[1] : null;\n };\n const id = extractTweetId(clipUrl);\n setTweetId(id);\n if (id && !window.twttr) {\n const script = document.createElement('script');\n script.src = 'https://platform.twitter.com/widgets.js';\n script.async = true;\n script.onload = () => {\n setLoading(false);\n };\n document.body.appendChild(script);\n } else if (id && window.twttr) {\n setLoading(false);\n }\n }, [clipUrl]);\n useEffect(() => {\n if (tweetId && window.twttr && containerRef.current) {\n containerRef.current.innerHTML = '';\n const isMobile = window.innerWidth < 768;\n window.twttr.widgets.createTweet(tweetId, containerRef.current, {\n theme: 'dark',\n conversation: 'none',\n cards: 'visible',\n align: 'center',\n width: isMobile ? 280 : 438\n });\n }\n }, [tweetId, loading]);\n if (!tweetId || !showPreview) {\n return \n {clipUrl}\n ;\n }\n return

\n \n {clipUrl}\n \n

;\n}\nfunction App() {\n const {\n devbaseClient,\n userWallet\n } = useDevapp();\n const [view, setView] = useState('home');\n const [jobs, setJobs] = useState([]);\n const [, setMyJobs] = useState([]);\n const [, setMySubmissions] = useState([]);\n const [myProfileData, setMyProfileData] = useState(null);\n const [selectedJob, setSelectedJob] = useState(null);\n const [userTwitter, setUserTwitter] = useState('');\n const [loading, setLoading] = useState(false);\n const [isOwner, setIsOwner] = useState(false);\n const [isAuthenticated, setIsAuthenticated] = useState(false);\n const [passwordInput, setPasswordInput] = useState('');\n const [passwordError, setPasswordError] = useState('');\n const [xAccountError, setXAccountError] = useState('');\n const [, setLinkedWallet] = useState('');\n const OWNER_WALLET = '4QUk9RNqFiFiwZECiczBZp8cDLvB6fViZtpAsiJaxNc6';\n const INVITE_PASSWORD = 'firstwave';\n useEffect(() => {\n loadUserTwitter();\n checkIfOwner();\n }, [userWallet]);\n useEffect(() => {\n if (view === 'find-jobs') {\n loadJobs();\n } else if (view === 'my-profile') {\n loadMyProfileData();\n } else if (view === 'admin') {\n loadJobs();\n }\n }, [view, userWallet]);\n const checkIfOwner = () => {\n setIsOwner(userWallet === OWNER_WALLET);\n };\n const loadUserTwitter = async () => {\n if (!userWallet) return;\n try {\n console.log('[loadUserTwitter] Starting for wallet:', userWallet);\n const username = await devbaseClient.evalExpression('$USER_X_USERNAME');\n console.log('[loadUserTwitter] Retrieved username:', username);\n if (username) {\n const allAccounts = await devbaseClient.listEntities('xaccounts', {\n username: username\n });\n const linkedToOtherWallet = allAccounts?.find(account => account.walletAddress !== userWallet);\n if (linkedToOtherWallet) {\n setXAccountError(`This X account (@${username}) is already linked to another wallet: ${linkedToOtherWallet.walletAddress.slice(0, 4)}...${linkedToOtherWallet.walletAddress.slice(-4)}`);\n setLinkedWallet(linkedToOtherWallet.walletAddress);\n setUserTwitter('');\n return;\n }\n setXAccountError('');\n setLinkedWallet('');\n setUserTwitter(username);\n try {\n const existingAccounts = await devbaseClient.listEntities('xaccounts', {\n walletAddress: userWallet\n });\n if (existingAccounts && existingAccounts.length > 0) {\n const existingXAccount = existingAccounts[0];\n if (existingXAccount.username !== username) {\n await devbaseClient.updateEntity('xaccounts', existingXAccount.id, {\n username: username\n });\n }\n } else {\n await devbaseClient.createEntity('xaccounts', {\n username: username,\n walletAddress: userWallet\n });\n }\n } catch (error) {\n console.error('Error syncing X account:', error);\n }\n } else {\n setUserTwitter('');\n setXAccountError('');\n setLinkedWallet('');\n }\n } catch (error) {\n console.error('Error loading twitter:', error);\n }\n };\n const handlePasswordSubmit = e => {\n e.preventDefault();\n if (passwordInput === INVITE_PASSWORD) {\n setIsAuthenticated(true);\n setPasswordError('');\n } else {\n setPasswordError('Invalid password. Please try again.');\n setPasswordInput('');\n }\n };\n const connectTwitter = () => {\n if (!userWallet) return;\n const loginUrl = `https://oauth.dev.fun/twitter/login/c963f4f3d3abb6580912/${userWallet}`;\n openLink(loginUrl);\n };\n const loadJobs = async () => {\n try {\n setLoading(true);\n const allJobs = await devbaseClient.listEntities('jobs');\n setJobs(allJobs || []);\n } catch (error) {\n console.error('Error loading jobs:', error);\n } finally {\n setLoading(false);\n }\n };\n const loadMyJobs = async () => {\n if (!userWallet) return;\n try {\n setLoading(true);\n const allJobs = await devbaseClient.listEntities('jobs');\n const myJobs = (allJobs || []).filter(job => job.userId === userWallet);\n setMyJobs(myJobs);\n } catch (error) {\n console.error('Error loading my jobs:', error);\n } finally {\n setLoading(false);\n }\n };\n const loadMySubmissions = async () => {\n if (!userWallet) return;\n try {\n setLoading(true);\n const allSubmissions = await devbaseClient.listEntities('clips', {\n ogClipper: userWallet\n });\n setMySubmissions(allSubmissions || []);\n } catch (error) {\n console.error('Error loading submissions:', error);\n } finally {\n setLoading(false);\n }\n };\n const loadMyProfileData = async () => {\n if (!userWallet) return;\n try {\n const accounts = await devbaseClient.listEntities('xaccounts', {\n walletAddress: userWallet\n });\n if (accounts && accounts.length > 0) {\n setMyProfileData(accounts[0]);\n }\n } catch (error) {\n console.error('Error loading profile data:', error);\n }\n };\n const createJob = async (formData, calculatedAmounts) => {\n try {\n setLoading(true);\n console.log('[createJob] Starting job creation with data:', formData);\n console.log('[createJob] Calculated amounts:', calculatedAmounts);\n const job = await devbaseClient.createEntity('jobs', formData);\n console.log('[createJob] Job created successfully:', job);\n const vaultAddress = await devbaseClient.evalExpression('$VAULT_ADDRESS');\n console.log('[createJob] Vault address retrieved:', vaultAddress);\n return {\n success: true,\n jobId: job.id,\n totalBounty: calculatedAmounts.totalBounty,\n taxAmount: calculatedAmounts.taxAmount,\n totalCost: calculatedAmounts.totalCost,\n vaultAddress: vaultAddress\n };\n } catch (error) {\n console.error('[createJob] Error occurred:', error);\n console.error('[createJob] Error details:', {\n message: error.message,\n stack: error.stack,\n name: error.name\n });\n alert(`Error creating job: ${error.message || 'Unknown error'}. Make sure you have enough SOL for bounties + tax.`);\n return {\n success: false,\n error: error.message\n };\n } finally {\n setLoading(false);\n }\n };\n const extractXUsernameFromUrl = url => {\n try {\n const regex = /(?:https?:\\/\\/)?(?:www\\.)?(?:x\\.com|twitter\\.com)\\/([^\\/]+)\\/status\\/\\d+/i;\n const match = url.match(regex);\n return match ? match[1] : null;\n } catch (error) {\n return null;\n }\n };\n const submitClip = async (jobId, clipUrl) => {\n try {\n setLoading(true);\n const username = extractXUsernameFromUrl(clipUrl);\n if (!username) {\n alert('Invalid X/Twitter link. Please use a valid post URL (e.g., https://x.com/username/status/123456789)');\n setLoading(false);\n return;\n }\n if (username.toLowerCase() !== userTwitter.toLowerCase()) {\n alert(`This post is from @${username}, but you're connected as @${userTwitter}. Please submit posts from your own account.`);\n setLoading(false);\n return;\n }\n await devbaseClient.createEntity('clips', {\n jobId,\n clipUrl\n });\n setView('my-profile');\n loadMySubmissions();\n } catch (error) {\n alert('Error submitting clip');\n } finally {\n setLoading(false);\n }\n };\n const checkAndUpdateJobStatus = async jobId => {\n try {\n const job = await devbaseClient.getEntity('jobs', jobId);\n if (!job || job.status === 'filled') return;\n const clips = await devbaseClient.listEntities('clips', {\n jobId\n });\n const approvedOrPaidCount = (clips || []).filter(c => c.status === 'approved' || c.status === 'paid').length;\n if (approvedOrPaidCount >= job.clipsNeeded) {\n await devbaseClient.updateEntity('jobs', jobId, {\n status: 'filled'\n });\n }\n } catch (error) {\n console.error('Error checking job status:', error);\n }\n };\n const updateClipStatus = async (clipId, status) => {\n try {\n setLoading(true);\n const clip = await devbaseClient.getEntity('clips', clipId);\n await devbaseClient.updateEntity('clips', clipId, {\n status\n });\n if (clip && (status === 'approved' || status === 'paid')) {\n await checkAndUpdateJobStatus(clip.jobId);\n }\n if (view === 'my-profile') {\n loadMyJobs();\n }\n } catch (error) {\n console.error('Update clip status error:', error);\n alert(`Error updating clip status: ${error.message || 'Unknown error'}`);\n } finally {\n setLoading(false);\n }\n };\n const approveOrRejectClip = async (clipId, status) => {\n try {\n setLoading(true);\n const clip = await devbaseClient.getEntity('clips', clipId);\n await devbaseClient.updateEntity('clips', clipId, {\n status\n });\n if (clip && status === 'approved') {\n await checkAndUpdateJobStatus(clip.jobId);\n }\n if (view === 'my-profile') {\n loadMyJobs();\n }\n } catch (error) {\n console.error('Approve/Reject error:', error);\n alert(`Error updating clip status: ${error.message || 'Unknown error'}`);\n } finally {\n setLoading(false);\n }\n };\n const claimBounty = async clipId => {\n try {\n setLoading(true);\n const clip = await devbaseClient.getEntity('clips', clipId);\n await devbaseClient.createEntity('claims', {\n clipId\n });\n try {\n await devbaseClient.updateEntity('clips', clipId, {\n status: 'paid'\n });\n if (clip) {\n await checkAndUpdateJobStatus(clip.jobId);\n }\n } catch (updateError) {\n console.error('Error updating clip status to paid:', updateError);\n alert('Bounty claimed but failed to update clip status. Please contact support.');\n }\n if (view === 'my-profile') {\n loadMySubmissions();\n }\n } catch (error) {\n console.error('Claim error:', error);\n alert('Error claiming bounty. Make sure the clip is approved and you haven\\'t claimed it yet.');\n } finally {\n setLoading(false);\n }\n };\n const updateJobStatus = async (jobId, status) => {\n try {\n setLoading(true);\n await devbaseClient.updateEntity('jobs', jobId, {\n status\n });\n if (view === 'my-profile') {\n loadMyJobs();\n }\n } catch (error) {\n alert('Error updating job status');\n } finally {\n setLoading(false);\n }\n };\n const deleteClip = async clipId => {\n if (!confirm('Are you sure you want to delete this clip?')) return;\n try {\n setLoading(true);\n await devbaseClient.deleteEntity('clips', clipId);\n loadJobs();\n } catch (error) {\n alert('Error deleting clip');\n } finally {\n setLoading(false);\n }\n };\n const deleteJob = async jobId => {\n if (!confirm('Are you sure you want to delete this job?')) return;\n try {\n setLoading(true);\n await devbaseClient.deleteEntity('jobs', jobId);\n loadJobs();\n } catch (error) {\n alert('Error deleting job');\n } finally {\n setLoading(false);\n }\n };\n if (!isAuthenticated) {\n return

\n $\"Clip2Earn$ \n

The Future of Content Creation is Here

\n 🎬 Clip2Earn revolutionizes how streamers and clippers collaborate. We're not just another platform – we're building the bridge between epic gaming moments and viral social media content.\n

\n 💰 For Streamers: Turn your best moments into marketing gold. Post bounties, get premium clips, and watch your brand grow across social media. All powered by blockchain technology for instant, transparent payments.\n

\n ✂️ For Clippers: Your editing skills are worth real money. Hunt for the perfect moments, craft engaging clips, and get paid in SOL when your work gets approved. No middlemen, no delays – just pure creative hustle.\n

\n 🚀 Why Clip2Earn? We've combined the gig economy with Web3 to create a marketplace where creativity meets opportunity. Every clip is a chance to earn, every streamer is a potential client.\n

\n Ready to transform viral moments into cold hard cash? Let's go! 🔥\n

Welcome to Clip2Earn

\n 📧 Invite Only\n

\n \n

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

\n $\"Clip2Earn$ \n

Clip2Earn

Where viral moments meet cold hard cash

Connect your wallet to start posting jobs or hunting for bounties

\n \n

;\n }\n if (!userTwitter) {\n return

\n $\"Clip2Earn$ \n

Almost there!

Connect your X account to continue

\n {xAccountError &&

\n ⚠️\n

X Account Already Linked

{xAccountError}

\n Each X account can only be linked to one wallet. Please use a different X account or connect with the original wallet.\n

}\n

We need your X account to verify streamers and clippers

\n \n

;\n }\n return

\n $\"Clip2Earn$ \n

Clip2Earn

\n \n

\n @{userTwitter}\n \n

\n \n \n \n \n \n {isOwner && }\n

\n {view === 'home' && }\n {view === 'post-job' && }\n {view === 'find-jobs' && }\n {view === 'my-profile' && }\n {view === 'leaderboard' && }\n {view === 'about' && }\n {view === 'admin' && isOwner && }\n

\n \n

;\n}\nfunction OwnerProfile({\n xUsername,\n walletAddress,\n label,\n profileData,\n clipsCount = 0,\n hasEarlyClipperBadge = false,\n jobsPostedCount = 0\n}) {\n const shortWallet = walletAddress ? `${walletAddress.slice(0, 4)}...${walletAddress.slice(-4)}` : '';\n const formatAccountCreatedDate = dateString => {\n if (!dateString) return '';\n const date = new Date(dateString);\n return date.toLocaleDateString('en-US', {\n month: 'short',\n year: 'numeric'\n });\n };\n return

{\n e.target.src = `data:image/svg+xml,%3Csvg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 100 100\"%3E%3Ccircle cx=\"50\" cy=\"50\" r=\"50\" fill=\"%231a1a1a\"/%3E%3Ctext x=\"50\" y=\"50\" text-anchor=\"middle\" dy=\".3em\" font-size=\"40\" fill=\"%2322c55e\"%3E${xUsername.charAt(0).toUpperCase()}%3C/text%3E%3C/svg%3E`;\n }} />\n

{label}

\n \n @{xUsername}\n \n {profileData?.accountCreatedAt && \n {formatAccountCreatedDate(profileData.accountCreatedAt)}\n }\n

{shortWallet}

\n {hasEarlyClipperBadge &&

\n $\"Early$ \n

}\n

\n {profileData?.followersCount !== undefined &&

{profileData.followersCount.toLocaleString()}

Followers

{label === 'Job Owner' ? jobsPostedCount : clipsCount}

{label === 'Job Owner' ? 'Jobs Posted' : 'Clips Made'}

}\n

;\n}\nfunction HomeView({\n devbaseClient\n}) {\n const {\n userWallet\n } = useDevapp();\n const [stats, setStats] = useState({\n totalSOL: 0,\n totalClips: 0,\n totalTax: 0\n });\n const [latestJobs, setLatestJobs] = useState([]);\n const [latestClips, setLatestClips] = useState([]);\n const [loading, setLoading] = useState(true);\n const [profilesData, setProfilesData] = useState({});\n const [userClipsCounts, setUserClipsCounts] = useState({});\n const [userJobsCounts, setUserJobsCounts] = useState({});\n const [approvedMissions, setApprovedMissions] = useState({});\n const [viewingJob, setViewingJob] = useState(null);\n const [jobClips, setJobClips] = useState({});\n const [clipperTwitterNames, setClipperTwitterNames] = useState({});\n const [clipUrl, setClipUrl] = useState('');\n const [userTwitter, setUserTwitter] = useState('');\n const [submitting, setSubmitting] = useState(false);\n useEffect(() => {\n loadHomeData();\n loadMissions();\n }, []);\n useEffect(() => {\n loadUserTwitter();\n }, [userWallet]);\n const loadUserTwitter = async () => {\n if (!userWallet) return;\n try {\n const username = await devbaseClient.evalExpression('$USER_X_USERNAME');\n setUserTwitter(username || '');\n } catch (error) {\n console.error('Error loading twitter:', error);\n }\n };\n const loadHomeData = async () => {\n try {\n setLoading(true);\n const [allClaims, allClips, allJobs, allTaxes] = await Promise.all([devbaseClient.listEntities('claims'), devbaseClient.listEntities('clips'), devbaseClient.listEntities('jobs'), devbaseClient.listEntities('taxes')]);\n const clipsCounts = {};\n (allClips || []).forEach(clip => {\n const clipper = clip.ogClipper || clip.userId;\n clipsCounts[clipper] = (clipsCounts[clipper] || 0) + 1;\n });\n setUserClipsCounts(clipsCounts);\n const jobsCounts = {};\n (allJobs || []).forEach(job => {\n jobsCounts[job.userId] = (jobsCounts[job.userId] || 0) + 1;\n });\n setUserJobsCounts(jobsCounts);\n let totalSOL = 0;\n for (const claim of allClaims || []) {\n totalSOL += parseFloat(claim.amount) || 0;\n }\n let totalTax = 0;\n for (const tax of allTaxes || []) {\n totalTax += parseFloat(tax.amount) || 0;\n }\n const totalClips = (allClips || []).length;\n const sortedJobs = (allJobs || []).sort((a, b) => b.createdAt - a.createdAt).slice(0, 5);\n const sortedClips = (allClips || []).sort((a, b) => b.createdAt - a.createdAt).slice(0, 5);\n setStats({\n totalSOL,\n totalClips,\n totalTax\n });\n setLatestJobs(sortedJobs);\n setLatestClips(sortedClips);\n const uniqueUserIds = new Set();\n sortedJobs.forEach(job => uniqueUserIds.add(job.userId));\n sortedClips.forEach(clip => uniqueUserIds.add(clip.userId));\n for (const userId of uniqueUserIds) {\n if (userId) {\n loadProfileData(userId);\n }\n }\n } catch (error) {\n console.error('Error loading home data:', error);\n } finally {\n setLoading(false);\n }\n };\n const loadMissions = async () => {\n try {\n const missions = await devbaseClient.listEntities('missions');\n const approved = {};\n (missions || []).forEach(mission => {\n if (mission.status === 'approved' && mission.ogSubmitter) {\n approved[mission.ogSubmitter] = true;\n }\n });\n setApprovedMissions(approved);\n } catch (error) {\n console.error('Error loading missions:', error);\n }\n };\n const loadProfileData = async walletAddress => {\n try {\n const accounts = await devbaseClient.listEntities('xaccounts', {\n walletAddress: walletAddress\n });\n if (accounts && accounts.length > 0) {\n setProfilesData(prev => ({\n ...prev,\n [walletAddress]: accounts[0]\n }));\n }\n } catch (error) {\n console.error('Error loading profile data:', error);\n }\n };\n const loadClipsForJob = async jobId => {\n try {\n const clips = await devbaseClient.listEntities('clips', {\n jobId\n });\n setJobClips(prev => ({\n ...prev,\n [jobId]: clips || []\n }));\n for (const clip of clips || []) {\n if (clip.ogClipper && !clipperTwitterNames[clip.ogClipper]) {\n loadClipperTwitter(clip.ogClipper);\n }\n }\n } catch (error) {\n console.error('Error loading clips:', error);\n }\n };\n const loadClipperTwitter = async walletAddress => {\n try {\n const accounts = await devbaseClient.listEntities('xaccounts', {\n walletAddress: walletAddress\n });\n if (accounts && accounts.length > 0) {\n const account = accounts[0];\n setClipperTwitterNames(prev => ({\n ...prev,\n [walletAddress]: account.username\n }));\n setProfilesData(prev => ({\n ...prev,\n [walletAddress]: account\n }));\n }\n } catch (error) {\n if (!error.message?.includes('not found')) {\n console.error('Error loading clipper twitter:', error);\n }\n }\n };\n const getStatusColor = status => {\n switch (status) {\n case 'pending':\n return 'bg-yellow-500/20 text-yellow-500';\n case 'approved':\n return 'bg-green-500/20 text-green-500';\n case 'paid':\n return 'bg-blue-500/20 text-blue-500';\n case 'rejected':\n return 'bg-red-500/20 text-red-500';\n case 'open':\n return 'bg-green-500/20 text-green-500';\n case 'filled':\n return 'bg-gray-500/20 text-gray-400';\n default:\n return 'bg-gray-500/20 text-gray-400';\n }\n };\n const getApprovedOrPaidCount = jobId => {\n const clips = jobClips[jobId] || [];\n return clips.filter(c => c.status === 'approved' || c.status === 'paid').length;\n };\n const getPendingCount = jobId => {\n const clips = jobClips[jobId] || [];\n return clips.filter(c => c.status === 'pending').length;\n };\n const isSubmissionFrozen = job => {\n if (!job) return false;\n const approvedOrPaid = getApprovedOrPaidCount(job.id);\n const clipsStillNeeded = job.clipsNeeded - approvedOrPaid;\n const pendingCount = getPendingCount(job.id);\n return pendingCount >= clipsStillNeeded + 1;\n };\n const extractXUsernameFromUrl = url => {\n try {\n const regex = /(?:https?:\\/\\/)?(?:www\\.)?(?:x\\.com|twitter\\.com)\\/([^\\/]+)\\/status\\/\\d+/i;\n const match = url.match(regex);\n return match ? match[1] : null;\n } catch (error) {\n return null;\n }\n };\n const handleSubmitClip = async e => {\n e.preventDefault();\n if (!viewingJob || !clipUrl) return;\n try {\n setSubmitting(true);\n const username = extractXUsernameFromUrl(clipUrl);\n if (!username) {\n alert('Invalid X/Twitter link. Please use a valid post URL (e.g., https://x.com/username/status/123456789)');\n setSubmitting(false);\n return;\n }\n if (username.toLowerCase() !== userTwitter.toLowerCase()) {\n alert(`This post is from @${username}, but you're connected as @${userTwitter}. Please submit posts from your own account.`);\n setSubmitting(false);\n return;\n }\n await devbaseClient.createEntity('clips', {\n jobId: viewingJob.id,\n clipUrl\n });\n setClipUrl('');\n alert('Clip submitted successfully!');\n loadClipsForJob(viewingJob.id);\n } catch (error) {\n console.error('Error submitting clip:', error);\n alert('Error submitting clip');\n } finally {\n setSubmitting(false);\n }\n };\n if (viewingJob) {\n const job = viewingJob;\n const clips = jobClips[job.id] || [];\n const approvedCount = getApprovedOrPaidCount(job.id);\n const isFilled = approvedCount >= job.clipsNeeded;\n return

\n \n

{job.name}

\n {job.description &&

{job.description}

}\n

\n \n {job.status}\n \n \n {approvedCount}/{job.clipsNeeded} clips filled\n \n \n {clips.filter(c => c.status === 'approved').length} approved\n \n \n {clips.filter(c => c.status === 'paid').length} paid\n \n

{job.bountyPerClip} SOL

per clip

\n \n

\n Stream:{' '}\n \n {job.streamingUrl}\n \n

\n Clips needed: {job.clipsNeeded} • {clips.filter(c => c.status === 'pending').length} waiting approval • {clips.length} submissions\n

\n {(job.followersRequired > 0 || job.mentionHandle || job.hashtags) &&

\n PRO\n Professional Requirements\n

\n {job.followersRequired > 0 &&

\n Min. Followers: {job.followersRequired.toLocaleString()}\n

}\n {job.mentionHandle &&

\n Mention: {job.mentionHandle}\n

}\n {job.hashtags &&

\n Hashtags: {job.hashtags}\n

}\n

Submissions ({clips.length})

\n {clips.length === 0 ?

No submissions yet

: <>\n {clips.filter(c => c.status === 'pending').length > 0 &&

\n Pending Approval ({clips.filter(c => c.status === 'pending').length})\n

\n {clips.filter(c => c.status === 'pending').map(clip =>

\n \n {clip.ogClipper && clip.ogClipper !== clip.userId && }\n

\n \n

\n \n {clip.status}\n \n

)}\n

}\n {clips.filter(c => c.status === 'approved' || c.status === 'paid').length > 0 &&

\n Approved/Paid ({clips.filter(c => c.status === 'approved' || c.status === 'paid').length})\n

\n {clips.filter(c => c.status === 'approved' || c.status === 'paid').map(clip =>

\n \n

\n \n {clip.status}\n \n

)}\n

}\n }\n

\n {isSubmissionFrozen(job) && job.status === 'open' &&

\n ⏸️\n

Submissions Temporarily Frozen

\n This job has enough pending clips to fill all remaining slots. Submissions are frozen while the job owner reviews pending clips. \n \n {getPendingCount(job.id)} pending • {job.clipsNeeded - getApprovedOrPaidCount(job.id)} still needed\n \n

}\n {userWallet && job.status === 'open' && !isSubmissionFrozen(job) && }\n {!userWallet && job.status === 'open' &&

Connect your wallet to submit clips for this job

}\n

;\n }\n return

Welcome to Clip2Earn

\n The ultimate bounty marketplace where streamers pay clippers to turn their best moments into viral X content.\n

\n \n

For Streamers

Post jobs with bounties, hashtags, and requirements. Approve the best clips and grow your brand.

\n \n

For Clippers

Hunt for perfect moments, submit your work, and get paid once approved. Turn clips into cash.

\n \n

Total SOL Earned

\n {loading ? '...' : `${(stats.totalSOL || 0).toFixed(3)} SOL`}\n

Paid out to clippers across the platform

\n \n

Total Clips Made

\n {loading ? '...' : stats.totalClips}\n

Community clip submissions and counting

\n 🪙\n

Marketing Tax Collected

\n {loading ? '...' : `${(stats.totalTax || 0).toFixed(3)} SOL`}\n

0.5% tax for platform buybacks

Latest Jobs

\n {loading ?

: latestJobs.length === 0 ?

No jobs yet

\n {latestJobs.map(job =>

{\n setViewingJob(job);\n loadClipsForJob(job.id);\n }}>\n

{job.name}

\n \n {job.status}\n \n

{job.bountyPerClip} SOL

per clip

\n \n

)}\n

}\n

Latest Clips

\n {loading ?

: latestClips.length === 0 ?

No clips yet

\n {latestClips.map(clip =>

\n \n

\n \n {clip.status}\n \n

)}\n

}\n

;\n}\nfunction PostJobView({\n createJob,\n loading,\n setView\n}) {\n const [formData, setFormData] = useState({\n name: '',\n description: '',\n streamingUrl: '',\n hashtags: '',\n clipsNeeded: 1,\n bountyPerClip: 0.01,\n followersRequired: 0,\n mentionHandle: '',\n minAccountAge: 0\n });\n const [jobCreationSummary, setJobCreationSummary] = useState(null);\n const totalBounty = formData.bountyPerClip * formData.clipsNeeded;\n const hasPROFeatures = formData.followersRequired > 0 || formData.mentionHandle.trim() !== '' || formData.minAccountAge > 0;\n const taxRate = hasPROFeatures ? 0.025 : 0.005;\n const taxAmount = totalBounty * taxRate;\n const totalCost = totalBounty + taxAmount;\n const handleSubmit = async e => {\n e.preventDefault();\n const calculatedAmounts = {\n totalBounty,\n taxAmount,\n totalCost\n };\n const result = await createJob(formData, calculatedAmounts);\n if (result.success) {\n setJobCreationSummary(result);\n }\n };\n if (jobCreationSummary) {\n return

Job Posted Successfully! 🎉

Here's a breakdown of the transaction:

\n Total Bounty (Escrow for Clippers):\n {jobCreationSummary.totalBounty.toFixed(5)} SOL\n

This amount is held in escrow in the platform vault and will be paid to clippers upon approval.

\n\n

\n Platform Fee (Marketing Tax):\n {jobCreationSummary.taxAmount.toFixed(5)} SOL\n

This fee is held in the vault for platform development, marketing, and token buybacks.

\n\n

\n Total Sent to Vault:\n {jobCreationSummary.totalCost.toFixed(5)} SOL\n

\n Platform Vault Address: {jobCreationSummary.vaultAddress}\n

\n 💡 All funds (bounty + platform fee) are securely held in the vault with a single transaction. Clippers receive their bounties directly from the vault when approved. Platform fees remain in the vault for ecosystem growth.\n

\n \n

;\n }\n return

Post a Clip Job

\n Job Name\n setFormData({\n ...formData,\n name: e.target.value\n })} className=\"w-full bg-[#0a0a0a] border border-gray-700 rounded-lg px-4 py-3 text-white focus:outline-none focus:border-green-500\" placeholder=\"e.g., Epic Tournament Highlights\" />\n

\n Description\n \n

\n Streaming URL\n setFormData({\n ...formData,\n streamingUrl: e.target.value\n })} className=\"w-full bg-[#0a0a0a] border border-gray-700 rounded-lg px-4 py-3 text-white focus:outline-none focus:border-green-500\" placeholder=\"https://twitch.tv/...\" />\n

\n Clips Needed\n setFormData({\n ...formData,\n clipsNeeded: parseInt(e.target.value)\n })} className=\"w-full bg-[#0a0a0a] border border-gray-700 rounded-lg px-4 py-3 text-white focus:outline-none focus:border-green-500\" />\n

\n Bounty per Clip (SOL)\n setFormData({\n ...formData,\n bountyPerClip: parseFloat(e.target.value)\n })} className=\"w-full bg-[#0a0a0a] border border-gray-700 rounded-lg px-4 py-3 text-white focus:outline-none focus:border-green-500\" />\n

\n PRO\n Professional Requirements\n

\n Minimum Followers Required\n setFormData({\n ...formData,\n followersRequired: parseInt(e.target.value) || 0\n })} className=\"w-full bg-black/50 border border-gray-700 rounded-lg px-4 py-3 text-white focus:outline-none focus:border-purple-500\" placeholder=\"0 (no requirement)\" />\n

Only clippers with this many followers or more can submit

\n Minimum Account Age (months)\n setFormData({\n ...formData,\n minAccountAge: parseInt(e.target.value) || 0\n })} className=\"w-full bg-black/50 border border-gray-700 rounded-lg px-4 py-3 text-white focus:outline-none focus:border-purple-500\" placeholder=\"0 (no requirement)\" />\n

Require older, verified X accounts — e.g., 3 months or more.

\n \n X Handle to Mention\n Coming Soon\n \n \n

Clippers should mention this handle in their clips

\n \n Hashtags\n Coming Soon\n \n \n

Separate with spaces — these must appear in the post.

\n ✨ PRO features will be free for token holders post TGE\n

Payment Breakdown

\n Total Bounty ({formData.clipsNeeded} clips × {formData.bountyPerClip} SOL)\n {totalBounty.toFixed(5)} SOL\n

\n \n Marketing Tax ({hasPROFeatures ? '2.5%' : '0.5%'}){hasPROFeatures && + 2% PRO}\n \n {taxAmount.toFixed(5)} SOL\n

\n {hasPROFeatures &&

\n ✨ PRO features enabled: Additional 2% tax applied\n

}\n

\n Total Cost\n {totalCost.toFixed(5)} SOL\n

\n \n

;\n}\nfunction FindJobsView({\n jobs,\n loading,\n onSelectJob,\n selectedJob,\n onSubmit\n}) {\n const {\n devbaseClient\n } = useDevapp();\n const [clipUrl, setClipUrl] = useState('');\n const [profilesData, setProfilesData] = useState({});\n const [jobClips, setJobClips] = useState({});\n const [loadingClips, setLoadingClips] = useState({});\n const [clipperTwitterNames, setClipperTwitterNames] = useState({});\n const [viewingJob, setViewingJob] = useState(null);\n const [userClipsCounts, setUserClipsCounts] = useState({});\n const [userJobsCounts, setUserJobsCounts] = useState({});\n const [approvedMissions, setApprovedMissions] = useState({});\n const getStatusColor = status => {\n switch (status) {\n case 'pending':\n return 'bg-yellow-500/20 text-yellow-500';\n case 'approved':\n return 'bg-green-500/20 text-green-500';\n case 'paid':\n return 'bg-blue-500/20 text-blue-500';\n case 'rejected':\n return 'bg-red-500/20 text-red-500';\n case 'open':\n return 'bg-green-500/20 text-green-500';\n case 'filled':\n return 'bg-gray-500/20 text-gray-400';\n default:\n return 'bg-gray-500/20 text-gray-400';\n }\n };\n const getApprovedOrPaidCount = jobId => {\n const clips = jobClips[jobId] || [];\n return clips.filter(c => c.status === 'approved' || c.status === 'paid').length;\n };\n const getPendingCount = jobId => {\n const clips = jobClips[jobId] || [];\n return clips.filter(c => c.status === 'pending').length;\n };\n const isSubmissionFrozen = job => {\n if (!job) return false;\n const approvedOrPaid = getApprovedOrPaidCount(job.id);\n const clipsStillNeeded = job.clipsNeeded - approvedOrPaid;\n const pendingCount = getPendingCount(job.id);\n return pendingCount >= clipsStillNeeded + 1;\n };\n useEffect(() => {\n jobs.forEach(job => {\n if (job.userId && !profilesData[job.userId]) {\n loadProfileData(job.userId);\n }\n loadClipsForJob(job.id);\n });\n loadAllClipsCount();\n loadMissions();\n }, [jobs]);\n const loadMissions = async () => {\n try {\n const missions = await devbaseClient.listEntities('missions');\n const approved = {};\n (missions || []).forEach(mission => {\n if (mission.status === 'approved' && mission.ogSubmitter) {\n approved[mission.ogSubmitter] = true;\n }\n });\n setApprovedMissions(approved);\n } catch (error) {\n console.error('Error loading missions:', error);\n }\n };\n const loadAllClipsCount = async () => {\n try {\n const [allClips, allJobs] = await Promise.all([devbaseClient.listEntities('clips'), devbaseClient.listEntities('jobs')]);\n const clipsCounts = {};\n (allClips || []).forEach(clip => {\n const clipper = clip.ogClipper || clip.userId;\n clipsCounts[clipper] = (clipsCounts[clipper] || 0) + 1;\n });\n setUserClipsCounts(clipsCounts);\n const jobsCounts = {};\n (allJobs || []).forEach(job => {\n jobsCounts[job.userId] = (jobsCounts[job.userId] || 0) + 1;\n });\n setUserJobsCounts(jobsCounts);\n } catch (error) {\n console.error('Error loading clips count:', error);\n }\n };\n const loadClipsForJob = async jobId => {\n try {\n setLoadingClips(prev => ({\n ...prev,\n [jobId]: true\n }));\n const clips = await devbaseClient.listEntities('clips', {\n jobId\n });\n setJobClips(prev => ({\n ...prev,\n [jobId]: clips || []\n }));\n for (const clip of clips || []) {\n if (clip.ogClipper && !clipperTwitterNames[clip.ogClipper]) {\n loadClipperTwitter(clip.ogClipper);\n }\n }\n } catch (error) {\n console.error('Error loading clips:', error);\n } finally {\n setLoadingClips(prev => ({\n ...prev,\n [jobId]: false\n }));\n }\n };\n const loadClipperTwitter = async walletAddress => {\n try {\n const accounts = await devbaseClient.listEntities('xaccounts', {\n walletAddress: walletAddress\n });\n if (accounts && accounts.length > 0) {\n const account = accounts[0];\n setClipperTwitterNames(prev => ({\n ...prev,\n [walletAddress]: account.username\n }));\n setProfilesData(prev => ({\n ...prev,\n [walletAddress]: account\n }));\n }\n } catch (error) {\n if (!error.message?.includes('not found')) {\n console.error('Error loading clipper twitter:', error);\n }\n }\n };\n const loadProfileData = async walletAddress => {\n try {\n const accounts = await devbaseClient.listEntities('xaccounts', {\n walletAddress: walletAddress\n });\n if (accounts && accounts.length > 0) {\n setProfilesData(prev => ({\n ...prev,\n [walletAddress]: accounts[0]\n }));\n }\n } catch (error) {\n console.error('Error loading profile data:', error);\n }\n };\n const handleSubmit = e => {\n e.preventDefault();\n if (selectedJob && clipUrl) {\n onSubmit(selectedJob.id, clipUrl);\n setClipUrl('');\n onSelectJob(null);\n }\n };\n if (loading) {\n return

Loading jobs...

;\n }\n if (viewingJob) {\n const job = viewingJob;\n const clips = jobClips[job.id] || [];\n const approvedCount = getApprovedOrPaidCount(job.id);\n const isFilled = approvedCount >= job.clipsNeeded;\n return

\n \n

{job.name}

\n {job.description &&

{job.description}

}\n

{job.bountyPerClip} SOL

per clip

\n \n

\n Stream:{' '}\n \n {job.streamingUrl}\n \n

\n Clips needed: {job.clipsNeeded} • {clips.filter(c => c.status === 'pending').length} waiting approval • {clips.length} submissions\n

\n {(job.followersRequired > 0 || job.mentionHandle || job.hashtags) &&

\n PRO\n Professional Requirements\n

\n {job.followersRequired > 0 &&

\n Min. Followers: {job.followersRequired.toLocaleString()}\n

}\n {job.mentionHandle &&

\n Mention: {job.mentionHandle}\n

}\n {job.hashtags &&

\n Hashtags: {job.hashtags}\n

}\n

Submissions ({clips.length})

\n {loadingClips[job.id] ?

Loading submissions...

: clips.length === 0 ?

No submissions yet

: <>\n {clips.filter(c => c.status === 'pending').length > 0 &&

\n Pending Approval ({clips.filter(c => c.status === 'pending').length})\n

\n {clips.filter(c => c.status === 'pending').map(clip =>

\n \n {clip.ogClipper && clip.ogClipper !== clip.userId && }\n

\n \n

\n \n {clip.status}\n \n

)}\n

}\n {clips.filter(c => c.status === 'approved' || c.status === 'paid').length > 0 &&

\n Approved/Paid ({clips.filter(c => c.status === 'approved' || c.status === 'paid').length})\n

\n {clips.filter(c => c.status === 'approved' || c.status === 'paid').map(clip =>

\n \n

\n \n {clip.status}\n \n

)}\n

}\n }\n

\n {isSubmissionFrozen(job) && job.status === 'open' &&

\n ⏸️\n

Submissions Temporarily Frozen

}\n {selectedJob?.id === job.id ? : }\n

;\n }\n return

Available Jobs

\n {jobs.length === 0 ?

No jobs available yet

\n {jobs.map(job => {\n const frozen = isSubmissionFrozen(job);\n return

setViewingJob(job)}>\n

{job.name}

\n \n {job.status}\n \n = job.clipsNeeded ? 'bg-blue-500/20 text-blue-500' : 'bg-gray-500/20 text-gray-400'}`}>\n {getApprovedOrPaidCount(job.id)}/{job.clipsNeeded} clips filled\n \n {frozen && job.status === 'open' && \n ⏸️ frozen\n }\n

{job.bountyPerClip} SOL

per clip

\n \n

\n {job.description &&

{job.description}

}\n

\n Clips needed: {job.clipsNeeded} • {(jobClips[job.id] || []).filter(c => c.status === 'pending').length} waiting approval • {(jobClips[job.id] || []).length} submissions\n

\n {(job.followersRequired > 0 || job.mentionHandle) &&

\n PRO\n

\n {job.followersRequired > 0 &&

\n Min. Followers: {job.followersRequired.toLocaleString()}\n

}\n {job.mentionHandle &&

\n Mention: {job.mentionHandle}\n

}\n

;\n })}\n

}\n

;\n}\nfunction AdminView({\n jobs,\n loading,\n devbaseClient,\n onUpdateClipStatus,\n onDeleteClip,\n onDeleteJob,\n onUpdateJobStatus\n}) {\n const [allClips, setAllClips] = useState([]);\n const [clipJobs, setClipJobs] = useState({});\n const [loadingClips, setLoadingClips] = useState(false);\n const [editingClip, setEditingClip] = useState(null);\n const [newStatus, setNewStatus] = useState('');\n const [userJobsCounts,,] = useState({});\n const [editingJob, setEditingJob] = useState(null);\n const [newJobStatus, setNewJobStatus] = useState('');\n const [clipperTwitterNames, setClipperTwitterNames] = useState({});\n const [xAccounts, setXAccounts] = useState([]);\n const [loadingXAccounts, setLoadingXAccounts] = useState(false);\n const [webhookUrl, setWebhookUrl] = useState('');\n const [sendingWebhook, setSendingWebhook] = useState({});\n const [webhookResponses, setWebhookResponses] = useState({});\n const [editingXAccount, setEditingXAccount] = useState(null);\n const [editXAccountData, setEditXAccountData] = useState({});\n const [cleaningDatabase, setCleaningDatabase] = useState(false);\n const [profilesData, setProfilesData] = useState({});\n const [missions, setMissions] = useState([]);\n const [loadingMissions, setLoadingMissions] = useState(false);\n const [userClipsCounts, setUserClipsCounts] = useState({});\n useEffect(() => {\n loadAllClips();\n loadXAccounts();\n loadMissions();\n }, []);\n const loadMissions = async () => {\n try {\n setLoadingMissions(true);\n const allMissions = await devbaseClient.listEntities('missions');\n setMissions(allMissions || []);\n } catch (error) {\n console.error('Error loading missions:', error);\n } finally {\n setLoadingMissions(false);\n }\n };\n const updateMissionStatus = async (missionId, status) => {\n try {\n await devbaseClient.updateEntity('missions', missionId, {\n status\n });\n loadMissions();\n } catch (error) {\n console.error('Error updating mission status:', error);\n alert('Failed to update mission status.');\n }\n };\n const loadXAccounts = async () => {\n try {\n setLoadingXAccounts(true);\n const accounts = await devbaseClient.listEntities('xaccounts');\n setXAccounts(accounts || []);\n } catch (error) {\n console.error('Error loading X accounts:', error);\n } finally {\n setLoadingXAccounts(false);\n }\n };\n const handleEditXAccount = account => {\n setEditingXAccount(account.walletAddress);\n setEditXAccountData({\n username: account.username || '',\n name: account.name || '',\n walletAddress: account.walletAddress || '',\n twitterId: account.twitterId || '',\n profileImageUrl: account.profileImageUrl || '',\n followersCount: account.followersCount || 0,\n followingCount: account.followingCount || 0,\n tweetCount: account.tweetCount || 0,\n likeCount: account.likeCount || 0,\n listedCount: account.listedCount || 0,\n mediaCount: account.mediaCount || 0,\n accountCreatedAt: account.accountCreatedAt || ''\n });\n };\n const handleSaveXAccount = async accountWalletAddress => {\n try {\n const accounts = await devbaseClient.listEntities('xaccounts', {\n walletAddress: accountWalletAddress\n });\n if (accounts && accounts.length > 0) {\n await devbaseClient.updateEntity('xaccounts', accounts[0].id, editXAccountData);\n }\n setEditingXAccount(null);\n setEditXAccountData({});\n loadXAccounts();\n } catch (error) {\n console.error('Error updating X account:', error);\n alert(`Error updating account: ${error.message || 'Unknown error'}`);\n }\n };\n const handleDeleteXAccount = async accountWalletAddress => {\n if (!confirm('Are you sure you want to delete this X account?')) return;\n try {\n const accounts = await devbaseClient.listEntities('xaccounts', {\n walletAddress: accountWalletAddress\n });\n if (accounts && accounts.length > 0) {\n await devbaseClient.deleteEntity('xaccounts', accounts[0].id);\n }\n loadXAccounts();\n } catch (error) {\n console.error('Error deleting X account:', error);\n alert(`Error deleting account: ${error.message || 'Unknown error'}`);\n }\n };\n const cleanDatabase = async () => {\n if (!confirm('⚠️ WARNING: This will delete ALL data including jobs, clips, claims, and X accounts. This action CANNOT be undone. Are you absolutely sure?')) {\n return;\n }\n try {\n setCleaningDatabase(true);\n const allJobs = await devbaseClient.listEntities('jobs');\n for (const job of allJobs || []) {\n await devbaseClient.deleteEntity('jobs', job.id);\n }\n const allClips = await devbaseClient.listEntities('clips');\n for (const clip of allClips || []) {\n await devbaseClient.deleteEntity('clips', clip.id);\n }\n const allClaims = await devbaseClient.listEntities('claims');\n for (const claim of allClaims || []) {\n await devbaseClient.deleteEntity('claims', claim.id);\n }\n const allXAccounts = await devbaseClient.listEntities('xaccounts');\n for (const account of allXAccounts || []) {\n await devbaseClient.deleteEntity('xaccounts', account.id);\n }\n alert('✅ Database cleaned successfully!');\n loadAllClips();\n loadXAccounts();\n } catch (error) {\n console.error('Error cleaning database:', error);\n alert(`Error cleaning database: ${error.message || 'Unknown error'}`);\n } finally {\n setCleaningDatabase(false);\n }\n };\n const handleSendWebhook = async account => {\n if (!webhookUrl.trim()) {\n alert('Please enter a webhook URL');\n return;\n }\n try {\n setSendingWebhook(prev => ({\n ...prev,\n [account.walletAddress]: true\n }));\n setWebhookResponses(prev => ({\n ...prev,\n [account.walletAddress]: null\n }));\n const params = new URLSearchParams({\n username: account.username\n });\n const response = await fetch(`${webhookUrl}?${params.toString()}`, {\n method: 'GET'\n });\n const responseText = await response.text();\n let responseData;\n try {\n responseData = JSON.parse(responseText);\n } catch {\n responseData = responseText;\n }\n setWebhookResponses(prev => ({\n ...prev,\n [account.walletAddress]: {\n status: response.status,\n statusText: response.statusText,\n data: responseData\n }\n }));\n if (response.ok && responseData?.data) {\n const twitterData = responseData.data;\n try {\n const accounts = await devbaseClient.listEntities('xaccounts', {\n walletAddress: account.walletAddress\n });\n if (accounts && accounts.length > 0) {\n await devbaseClient.updateEntity('xaccounts', accounts[0].id, {\n username: twitterData.username,\n twitterId: twitterData.id,\n name: twitterData.name,\n profileImageUrl: twitterData.profile_image_url,\n followersCount: twitterData.public_metrics?.followers_count || 0,\n followingCount: twitterData.public_metrics?.following_count || 0,\n tweetCount: twitterData.public_metrics?.tweet_count || 0,\n listedCount: twitterData.public_metrics?.listed_count || 0,\n likeCount: twitterData.public_metrics?.like_count || 0,\n mediaCount: twitterData.public_metrics?.media_count || 0,\n accountCreatedAt: twitterData.created_at\n });\n }\n loadXAccounts();\n } catch (updateError) {\n console.error('Error updating account data:', updateError);\n }\n }\n } catch (error) {\n console.error(`Error sending webhook for ${account.username}:`, error);\n setWebhookResponses(prev => ({\n ...prev,\n [account.walletAddress]: {\n error: error.message || 'Failed to send webhook'\n }\n }));\n } finally {\n setSendingWebhook(prev => ({\n ...prev,\n [account.walletAddress]: false\n }));\n }\n };\n const loadAllClips = async () => {\n try {\n setLoadingClips(true);\n const clips = await devbaseClient.listEntities('clips');\n setAllClips(clips || []);\n const clipsCounts = {};\n (clips || []).forEach(clip => {\n const clipper = clip.ogClipper || clip.userId;\n clipsCounts[clipper] = (clipsCounts[clipper] || 0) + 1;\n });\n setUserClipsCounts(clipsCounts);\n for (const clip of clips || []) {\n loadClipJobDetails(clip.jobId);\n if (clip.ogClipper && !clipperTwitterNames[clip.ogClipper]) {\n loadClipperTwitter(clip.ogClipper);\n }\n }\n } catch (error) {\n console.error('Error loading clips:', error);\n } finally {\n setLoadingClips(false);\n }\n };\n const loadClipperTwitter = async walletAddress => {\n try {\n const accounts = await devbaseClient.listEntities('xaccounts', {\n walletAddress: walletAddress\n });\n if (accounts && accounts.length > 0) {\n const account = accounts[0];\n setClipperTwitterNames(prev => ({\n ...prev,\n [walletAddress]: account.username\n }));\n setProfilesData(prev => ({\n ...prev,\n [walletAddress]: account\n }));\n }\n } catch (error) {\n if (!error.message?.includes('not found')) {\n console.error('Error loading clipper twitter:', error);\n }\n }\n };\n const loadClipJobDetails = async jobId => {\n if (clipJobs[jobId]) return;\n try {\n const job = await devbaseClient.getEntity('jobs', jobId);\n setClipJobs(prev => ({\n ...prev,\n [jobId]: job\n }));\n } catch (error) {\n console.error('Error loading job:', error);\n }\n };\n const handleEditClip = clip => {\n setEditingClip(clip);\n setNewStatus(clip.status);\n };\n const handleEditJob = job => {\n setEditingJob(job);\n setNewJobStatus(job.status);\n };\n const handleSaveJobStatus = async () => {\n if (!editingJob) return;\n await onUpdateJobStatus(editingJob.id, newJobStatus);\n setEditingJob(null);\n };\n const handleSaveClipStatus = async () => {\n if (!editingClip) return;\n await onUpdateClipStatus(editingClip.id, newStatus);\n setEditingClip(null);\n loadAllClips();\n };\n const getStatusColor = status => {\n switch (status) {\n case 'pending':\n return 'bg-yellow-500/20 text-yellow-500';\n case 'approved':\n return 'bg-green-500/20 text-green-500';\n case 'paid':\n return 'bg-blue-500/20 text-blue-500';\n case 'rejected':\n return 'bg-red-500/20 text-red-500';\n default:\n return 'bg-gray-500/20 text-gray-400';\n }\n };\n return

Admin Panel

Mission Entries ({missions.length})

\n {loadingMissions ?

Loading missions...

: missions.length === 0 ?

No mission entries yet

\n {missions.map(mission =>

\n \n

@{mission.username}

\n \n {mission.status}\n \n

\n \n {mission.postUrl}\n \n

\n Submitted: {new Date(mission.createdAt).toLocaleString()}\n

\n {mission.status === 'pending' &&

\n \n \n

}\n \n

)}\n

}\n

⚠️ Danger Zone

\n Clean the entire database to start fresh. This action cannot be undone!\n

\n \n

Linked X Accounts ({xAccounts.length})

\n {xAccounts.length > 0 &&

Webhook Configuration

\n setWebhookUrl(e.target.value)} placeholder=\"Enter webhook URL (e.g., https://example.com/webhook)\" className=\"w-full bg-[#0a0a0a] border border-gray-700 rounded-lg px-4 py-3 text-white focus:outline-none focus:border-green-500\" />\n

\n GET request will be sent with username and wallet parameters\n

}\n {loadingXAccounts ?

Loading X accounts...

: xAccounts.length === 0 ?

No X accounts linked yet

\n {xAccounts.map(account =>

\n {editingXAccount === account.walletAddress ?

\n Username\n setEditXAccountData({\n ...editXAccountData,\n username: e.target.value\n })} className=\"w-full bg-[#0a0a0a] border border-gray-700 rounded-lg px-4 py-2 text-white focus:outline-none focus:border-green-500\" placeholder=\"Twitter username\" />\n

\n Display Name\n setEditXAccountData({\n ...editXAccountData,\n name: e.target.value\n })} className=\"w-full bg-[#0a0a0a] border border-gray-700 rounded-lg px-4 py-2 text-white focus:outline-none focus:border-green-500\" placeholder=\"Display name\" />\n

\n Wallet Address (Read-only)\n \n

\n Twitter ID\n setEditXAccountData({\n ...editXAccountData,\n twitterId: e.target.value\n })} className=\"w-full bg-[#0a0a0a] border border-gray-700 rounded-lg px-4 py-2 text-white focus:outline-none focus:border-green-500\" placeholder=\"Twitter ID\" />\n

\n Profile Image URL\n setEditXAccountData({\n ...editXAccountData,\n profileImageUrl: e.target.value\n })} className=\"w-full bg-[#0a0a0a] border border-gray-700 rounded-lg px-4 py-2 text-white focus:outline-none focus:border-green-500 text-sm\" placeholder=\"Profile image URL\" />\n

\n Followers\n setEditXAccountData({\n ...editXAccountData,\n followersCount: parseInt(e.target.value) || 0\n })} className=\"w-full bg-[#0a0a0a] border border-gray-700 rounded-lg px-4 py-2 text-white focus:outline-none focus:border-green-500\" placeholder=\"0\" />\n

\n Following\n setEditXAccountData({\n ...editXAccountData,\n followingCount: parseInt(e.target.value) || 0\n })} className=\"w-full bg-[#0a0a0a] border border-gray-700 rounded-lg px-4 py-2 text-white focus:outline-none focus:border-green-500\" placeholder=\"0\" />\n

\n Tweets\n setEditXAccountData({\n ...editXAccountData,\n tweetCount: parseInt(e.target.value) || 0\n })} className=\"w-full bg-[#0a0a0a] border border-gray-700 rounded-lg px-4 py-2 text-white focus:outline-none focus:border-green-500\" placeholder=\"0\" />\n

\n Likes\n setEditXAccountData({\n ...editXAccountData,\n likeCount: parseInt(e.target.value) || 0\n })} className=\"w-full bg-[#0a0a0a] border border-gray-700 rounded-lg px-4 py-2 text-white focus:outline-none focus:border-green-500\" placeholder=\"0\" />\n

\n Media\n setEditXAccountData({\n ...editXAccountData,\n mediaCount: parseInt(e.target.value) || 0\n })} className=\"w-full bg-[#0a0a0a] border border-gray-700 rounded-lg px-4 py-2 text-white focus:outline-none focus:border-green-500\" placeholder=\"0\" />\n

\n Listed\n setEditXAccountData({\n ...editXAccountData,\n listedCount: parseInt(e.target.value) || 0\n })} className=\"w-full bg-[#0a0a0a] border border-gray-700 rounded-lg px-4 py-2 text-white focus:outline-none focus:border-green-500\" placeholder=\"0\" />\n

\n Account Created At\n setEditXAccountData({\n ...editXAccountData,\n accountCreatedAt: e.target.value\n })} className=\"w-full bg-[#0a0a0a] border border-gray-700 rounded-lg px-4 py-2 text-white focus:outline-none focus:border-green-500\" placeholder=\"2022-03-16T01:48:48.000Z\" />\n

Format: YYYY-MM-DDTHH:mm:ss.000Z

\n \n \n

: <>\n

{\n e.target.src = `data:image/svg+xml,%3Csvg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 100 100\"%3E%3Ccircle cx=\"50\" cy=\"50\" r=\"50\" fill=\"%231a1a1a\"/%3E%3Ctext x=\"50\" y=\"50\" text-anchor=\"middle\" dy=\".3em\" font-size=\"40\" fill=\"%2322c55e\"%3E${account.username.charAt(0).toUpperCase()}%3C/text%3E%3C/svg%3E`;\n }} />\n

{account.name || account.username}

\n {account.twitterId && ID: {account.twitterId}}\n

\n \n @{account.username}\n \n

\n {account.walletAddress}\n

\n }\n {account.followersCount !== undefined &&

{account.followersCount.toLocaleString()}

Followers

{account.followingCount.toLocaleString()}

Following

{account.tweetCount.toLocaleString()}

Tweets

}\n {!editingXAccount || editingXAccount !== account.walletAddress ? <>\n {account.accountCreatedAt &&

\n Account created: {new Date(account.accountCreatedAt).toLocaleDateString()}\n

}\n

\n \n

\n \n \n

\n : null}\n {webhookResponses[account.walletAddress] &&

Webhook Response:

\n {webhookResponses[account.walletAddress].error ?

\n Error: {webhookResponses[account.walletAddress].error}\n

\n Status:{' '}\n \n {webhookResponses[account.walletAddress].status} {webhookResponses[account.walletAddress].statusText}\n \n

\n Response:\n

\n                            {typeof webhookResponses[account.walletAddress].data === 'object' ? JSON.stringify(webhookResponses[account.walletAddress].data, null, 2) : webhookResponses[account.walletAddress].data}\n

}\n

)}\n

}\n

All Jobs ({jobs.length})

\n {loading ?

Loading jobs...

: jobs.length === 0 ?

No jobs found

\n {jobs.map(job =>

\n \n

{job.name}

\n \n {job.status}\n \n

\n {job.description &&

{job.description}

}\n

\n Bounty: {job.bountyPerClip} SOL per clip\n

\n Clips needed: {job.clipsNeeded}\n

\n Hashtags: {job.hashtags}\n

\n {(job.followersRequired > 0 || job.mentionHandle) &&

\n PRO\n

\n {job.followersRequired > 0 &&

\n Min. Followers: {job.followersRequired.toLocaleString()}\n

}\n {job.mentionHandle &&

\n Mention: {job.mentionHandle}\n

}\n

\n {editingJob?.id === job.id ?

\n \n \n \n

\n \n \n

}\n

)}\n

}\n

All Clips ({allClips.length})

\n {loadingClips ?

Loading clips...

: allClips.length === 0 ?

No clips found

\n {allClips.map(clip => {\n const job = clipJobs[clip.jobId];\n return

\n {job &&

{job.name}

Bounty: {job.bountyPerClip} SOL

\n \n

}\n

\n \n {clip.ogClipper && clip.ogClipper !== clip.userId && }\n

\n \n

\n \n {clip.status}\n \n

\n {editingClip?.id === clip.id ? <>\n \n \n \n : <>\n \n \n }\n

;\n })}\n

}\n

;\n}\nfunction LeaderboardView({\n devbaseClient\n}) {\n const [topClippers, setTopClippers] = useState([]);\n const [topJobPosters, setTopJobPosters] = useState([]);\n const [loading, setLoading] = useState(true);\n const [profilesData, setProfilesData] = useState({});\n const [userClipsCounts, setUserClipsCounts] = useState({});\n const [userJobsCounts, setUserJobsCounts] = useState({});\n const [approvedMissions, setApprovedMissions] = useState({});\n const [viewingProfile, setViewingProfile] = useState(null);\n const [userJobs, setUserJobs] = useState([]);\n const [userClips, setUserClips] = useState([]);\n const [loadingProfile, setLoadingProfile] = useState(false);\n useEffect(() => {\n loadLeaderboards();\n loadMissions();\n }, []);\n const loadMissions = async () => {\n try {\n const missions = await devbaseClient.listEntities('missions');\n const approved = {};\n (missions || []).forEach(mission => {\n if (mission.status === 'approved' && mission.ogSubmitter) {\n approved[mission.ogSubmitter] = true;\n }\n });\n setApprovedMissions(approved);\n } catch (error) {\n console.error('Error loading missions:', error);\n }\n };\n const loadLeaderboards = async () => {\n try {\n setLoading(true);\n const [allClips, allJobs] = await Promise.all([devbaseClient.listEntities('clips'), devbaseClient.listEntities('jobs')]);\n const jobsMap = {};\n (allJobs || []).forEach(job => {\n jobsMap[job.id] = job;\n });\n const clipperStats = {};\n (allClips || []).forEach(clip => {\n if (clip.status === 'approved' || clip.status === 'paid') {\n const clipper = clip.ogClipper || clip.userId;\n if (!clipperStats[clipper]) {\n clipperStats[clipper] = {\n userId: clipper,\n approvedClips: 0,\n paidClips: 0,\n totalClips: 0,\n totalEarned: 0\n };\n }\n clipperStats[clipper].totalClips++;\n if (clip.status === 'approved') clipperStats[clipper].approvedClips++;\n if (clip.status === 'paid') {\n clipperStats[clipper].paidClips++;\n const job = jobsMap[clip.jobId];\n if (job) {\n clipperStats[clipper].totalEarned += job.bountyPerClip;\n }\n }\n }\n });\n const posterStats = {};\n (allJobs || []).forEach(job => {\n if (!posterStats[job.userId]) {\n posterStats[job.userId] = {\n userId: job.userId,\n totalJobs: 0,\n openJobs: 0,\n filledJobs: 0,\n totalBounty: 0\n };\n }\n posterStats[job.userId].totalJobs++;\n if (job.status === 'open') posterStats[job.userId].openJobs++;\n if (job.status === 'filled') posterStats[job.userId].filledJobs++;\n posterStats[job.userId].totalBounty += job.bountyPerClip * job.clipsNeeded;\n });\n const sortedClippers = Object.values(clipperStats).sort((a, b) => b.totalClips - a.totalClips).slice(0, 10);\n const sortedPosters = Object.values(posterStats).sort((a, b) => b.totalJobs - a.totalJobs).slice(0, 10);\n setTopClippers(sortedClippers);\n setTopJobPosters(sortedPosters);\n const clipsCounts = {};\n (allClips || []).forEach(clip => {\n const clipper = clip.ogClipper || clip.userId;\n clipsCounts[clipper] = (clipsCounts[clipper] || 0) + 1;\n });\n setUserClipsCounts(clipsCounts);\n const jobsCounts = {};\n (allJobs || []).forEach(job => {\n jobsCounts[job.userId] = (jobsCounts[job.userId] || 0) + 1;\n });\n setUserJobsCounts(jobsCounts);\n const allUserIds = new Set([...sortedClippers.map(c => c.userId), ...sortedPosters.map(p => p.userId)]);\n for (const userId of allUserIds) {\n if (userId) {\n loadProfileData(userId);\n }\n }\n } catch (error) {\n console.error('Error loading leaderboards:', error);\n } finally {\n setLoading(false);\n }\n };\n const loadProfileData = async walletAddress => {\n try {\n const accounts = await devbaseClient.listEntities('xaccounts', {\n walletAddress: walletAddress\n });\n if (accounts && accounts.length > 0) {\n setProfilesData(prev => ({\n ...prev,\n [walletAddress]: accounts[0]\n }));\n }\n } catch (error) {\n console.error('Error loading profile data:', error);\n }\n };\n const getRankMedal = index => {\n if (index === 0) return '🥇';\n if (index === 1) return '🥈';\n if (index === 2) return '🥉';\n return `#${index + 1}`;\n };\n const loadUserProfile = async userId => {\n try {\n setLoadingProfile(true);\n setViewingProfile(userId);\n const [allJobs, allClips,,] = await Promise.all([devbaseClient.listEntities('jobs'), devbaseClient.listEntities('clips'), devbaseClient.listEntities('claims')]);\n const jobs = (allJobs || []).filter(job => job.userId === userId);\n const clips = (allClips || []).filter(clip => (clip.ogClipper || clip.userId) === userId);\n setUserJobs(jobs);\n setUserClips(clips);\n for (const clip of clips) {\n if (clip.jobId) {\n const job = (allJobs || []).find(j => j.id === clip.jobId);\n if (job && !profilesData[job.userId]) {\n loadProfileData(job.userId);\n }\n }\n }\n } catch (error) {\n console.error('Error loading user profile:', error);\n } finally {\n setLoadingProfile(false);\n }\n };\n const getStatusColor = status => {\n switch (status) {\n case 'pending':\n return 'bg-yellow-500/20 text-yellow-500';\n case 'approved':\n return 'bg-green-500/20 text-green-500';\n case 'paid':\n return 'bg-blue-500/20 text-blue-500';\n case 'rejected':\n return 'bg-red-500/20 text-red-500';\n case 'open':\n return 'bg-green-500/20 text-green-500';\n case 'filled':\n return 'bg-gray-500/20 text-gray-400';\n default:\n return 'bg-gray-500/20 text-gray-400';\n }\n };\n if (loading) {\n return

Loading leaderboards...

;\n }\n if (viewingProfile) {\n const profile = profilesData[viewingProfile];\n const clipperStats = topClippers.find(c => c.userId === viewingProfile);\n const posterStats = topJobPosters.find(p => p.userId === viewingProfile);\n const totalSolEarned = clipperStats?.totalEarned || 0;\n const totalSolSpent = posterStats?.totalBounty || 0;\n return

\n \n

{\n e.target.src = `data:image/svg+xml,%3Csvg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 100 100\"%3E%3Ccircle cx=\"50\" cy=\"50\" r=\"50\" fill=\"%231a1a1a\"/%3E%3Ctext x=\"50\" y=\"50\" text-anchor=\"middle\" dy=\".3em\" font-size=\"40\" fill=\"%2322c55e\"%3E${profile?.username?.charAt(0).toUpperCase()}%3C/text%3E%3C/svg%3E`;\n }} />\n

{profile?.name || `@${profile?.username}`}

\n {approvedMissions[viewingProfile] && $\"Early$ }\n

\n \n @{profile?.username}\n \n {profile?.accountCreatedAt &&

\n Joined X: {new Date(profile.accountCreatedAt).toLocaleDateString('en-US', {\n month: 'short',\n year: 'numeric'\n })}\n

}\n

{profile?.followersCount?.toLocaleString() || 0}

Followers

{profile?.followingCount?.toLocaleString() || 0}

Following

{profile?.tweetCount?.toLocaleString() || 0}

Tweets

{profile?.likeCount?.toLocaleString() || 0}

Likes

\n {clipperStats &&

\n 🎬 Clipper Stats\n

\n Total Clips:\n {clipperStats.totalClips}\n

\n Approved Clips:\n {clipperStats.approvedClips}\n

\n Paid Clips:\n {clipperStats.paidClips}\n

\n Total Earned:\n {totalSolEarned.toFixed(3)} SOL\n

}\n {posterStats &&

\n 💼 Job Poster Stats\n

\n Total Jobs:\n {posterStats.totalJobs}\n

\n Open Jobs:\n {posterStats.openJobs}\n

\n Filled Jobs:\n {posterStats.filledJobs}\n

\n Total Spent:\n {totalSolSpent.toFixed(3)} SOL\n

}\n

\n {approvedMissions[viewingProfile] &&

\n $\"Early$ \n

\n Early Clipper Badge\n

\n Pioneer of the Clip2Earn revolution\n

}\n

\n {loadingProfile ?

Loading profile data...

: <>\n {userJobs.length > 0 &&

Posted Jobs ({userJobs.length})

\n {userJobs.map(job =>

{job.name}

\n {job.description &&

{job.description}

}\n

{job.bountyPerClip} SOL

per clip

\n \n {job.status}\n \n \n {job.clipsNeeded} clips needed\n \n

)}\n

}\n {userClips.length > 0 &&

Submitted Clips ({userClips.length})

\n {userClips.map(clip =>

\n \n

\n \n {clip.status}\n \n

)}\n

}\n }\n

;\n }\n return

Leaderboard

\n 🎬 Top Clippers\n

\n {topClippers.length === 0 ?

No clippers yet

\n {topClippers.map((clipper, index) => {\n const profile = profilesData[clipper.userId];\n return

loadUserProfile(clipper.userId)}>\n

\n {getRankMedal(index)}\n

\n \n

{clipper.totalEarned.toFixed(3)}

SOL earned

\n {clipper.totalClips} clips created • {clipper.approvedClips} approved • {clipper.paidClips} paid\n

;\n })}\n

}\n

\n 💼 Top Job Posters\n

\n {topJobPosters.length === 0 ?

No job posters yet

\n {topJobPosters.map((poster, index) => {\n const profile = profilesData[poster.userId];\n return

loadUserProfile(poster.userId)}>\n

\n {getRankMedal(index)}\n

\n \n

{poster.totalJobs}

jobs

\n {poster.totalBounty.toFixed(2)} SOL total\n

\n {poster.openJobs} open • {poster.filledJobs} filled\n

;\n })}\n

}\n

;\n}\nfunction AboutView() {\n return

About Clip2Earn

What is Clip2Earn?

\n Clip2Earn is the ultimate bounty marketplace where streamers and content creators connect with talented clippers to create viral X (Twitter) content. Think of it as TaskRabbit meets Twitch, but everyone's chasing internet fame and cold hard cash in SOL.\n

\n Streamers post clip jobs with specific requirements, hashtags, and bounties. Clippers hunt through streams for the perfect moments, craft engaging clips, and submit them for approval. Once approved, clippers claim their bounty in SOL. It's a win-win: streamers get quality content, clippers get paid.\n

How It Works

For Streamers (Job Posters)

Post a clip job with bounty amount, number of clips needed, hashtags, and stream URL
Pay upfront: Total bounty + 0.5% marketing tax (deposited to vault)
Review submitted clips from clippers
Approve the best clips that meet your requirements
Approved clippers claim their bounties directly from the vault

For Clippers

Browse available jobs and find opportunities that match your skills
Watch streams and capture the perfect moments
Create engaging clips and post them on your X account
Submit your X post URL (must be from your connected account)
Wait for approval from the job poster
Once approved, claim your bounty in SOL!

Payment & Tax Structure

Bounty Payments

\n When posting a job, streamers pay the full bounty amount upfront (bounty per clip × number of clips needed). This amount is held securely in the platform vault until clippers claim their rewards.\n

Marketing Tax (0.5%)

\n A small 0.5% tax is charged on the total bounty amount when posting jobs. This tax goes toward platform development, marketing, and token buybacks to support the ecosystem.\n

\n Example: 10 clips × 0.1 SOL = 1 SOL bounty + 0.005 SOL tax = 1.005 SOL total cost\n

Claiming Bounties

\n Once your clip is approved, you can claim your bounty anytime from the \"My Submissions\" page. The full bounty amount (no deductions) is transferred directly to your wallet. Only the original clipper (OG Clipper) can claim the bounty.\n

Clip Submission Statuses

\n Pending\n

Your clip has been submitted and is awaiting review from the job poster. Be patient!

\n Approved\n

Congrats! The job poster loved your clip. You can now claim your bounty from the \"My Submissions\" page.

\n Paid\n

You've successfully claimed your bounty. The SOL is in your wallet. Time to celebrate! 🎉

\n Rejected\n

Unfortunately, your clip didn't meet the job requirements. Don't give up - learn and improve for the next one!

Job Statuses

\n Open\n

The job is actively accepting clip submissions. Get clipping!

\n Filled\n

The required number of clips have been approved. No more submissions are needed for this job.

Important Notes

\n •\n

You must connect both your Solana wallet and X (Twitter) account to use the platform

\n •\n

All clip submissions must be posted from your connected X account - we verify this automatically

\n •\n

Once a job is posted and paid for, the bounty is locked in the vault until claimed by approved clippers

\n •\n

Streamers can approve multiple clips from different clippers for the same job

\n •\n

Check the Leaderboard to see top performing clippers and job posters in the community

\n •\n

All payments are final - make sure to review clips carefully before approving

Ready to Start?

\n Join the community of streamers and clippers turning viral moments into cash!\n

\n \n \n Follow us on X\n \n

;\n}\nfunction MyProfileView({\n devbaseClient,\n onApproveOrReject,\n onUpdateJobStatus,\n onClaimBounty,\n profileData,\n loadMyJobs,\n loadMySubmissions\n}) {\n const {\n userWallet\n } = useDevapp();\n const [activeTab, setActiveTab] = useState('jobs');\n const [jobs, setJobs] = useState([]);\n const [submissions, setSubmissions] = useState([]);\n const [loading, setLoading] = useState(false);\n const [jobClips, setJobClips] = useState({});\n const [loadingClips, setLoadingClips] = useState({});\n const [clipperTwitterNames, setClipperTwitterNames] = useState({});\n const [profilesData, setProfilesData] = useState({});\n const [submissionJobDetails, setSubmissionJobDetails] = useState({});\n const [userJobsCounts, setUserJobsCounts] = useState({});\n const [userTwitter, setUserTwitter] = useState('');\n const [userStats, setUserStats] = useState({\n totalClips: 0,\n totalEarned: 0\n });\n const [userClipsCounts, setUserClipsCounts] = useState({});\n const [missionText, setMissionText] = useState('');\n const [generatingText, setGeneratingText] = useState(false);\n const [missionPostUrl, setMissionPostUrl] = useState('');\n const [submittingMission, setSubmittingMission] = useState(false);\n const [missionStatus, setMissionStatus] = useState(null);\n const generateMissionText = async () => {\n if (!userTwitter) return;\n try {\n setGeneratingText(true);\n const response = await fetch('https://chat.dev.fun/inference/c963f4f3d3abb6580912', {\n method: 'POST',\n headers: {\n 'Content-Type': 'application/json'\n },\n body: JSON.stringify({\n messages: [{\n role: 'system',\n content: 'You are a professional content creator who writes engaging and authentic tweets. Create unique, polished tweets about joining clip2earn (@c2e_app). Each tweet should feel personal and professional. Include relevant emojis and hashtags #pumpfun #clippers. Keep it under 280 characters. Make it exciting yet professional each time. Avoid overly casual slang like \"OMG\", \"LFG\", \"degen\" - keep it accessible and professional.'\n }, {\n role: 'user',\n content: `Generate a professional yet engaging tweet for @${userTwitter} announcing they just joined clip2earn where they can turn viral clips into SOL. Make it feel personal and exciting while maintaining a professional tone!`\n }]\n })\n });\n const data = await response.json();\n setMissionText(data.text || `Excited to join @c2e_app - the future of content creation! 🎬\\n\\nTurning viral clips into SOL rewards 💰\\n\\nStreamers and clippers connecting on the blockchain. Let's build together! 🚀\\n\\n#pumpfun #clippers`);\n } catch (error) {\n console.error('Error generating mission text:', error);\n setMissionText(`Excited to join @c2e_app - the future of content creation! 🎬\\n\\nTurning viral clips into SOL rewards 💰\\n\\nStreamers and clippers connecting on the blockchain. Let's build together! 🚀\\n\\n#pumpfun #clippers`);\n } finally {\n setGeneratingText(false);\n }\n };\n const handleShareMission = () => {\n if (!missionText) return;\n const tweetUrl = `https://twitter.com/intent/tweet?text=${encodeURIComponent(missionText)}`;\n openLink(tweetUrl);\n };\n const handleSubmitMission = async () => {\n if (!missionPostUrl.trim()) {\n alert('Please enter your post URL');\n return;\n }\n try {\n setSubmittingMission(true);\n await devbaseClient.createEntity('missions', {\n postUrl: missionPostUrl\n });\n alert('Mission submitted for approval! 🎉');\n checkMissionStatus();\n } catch (error) {\n console.error('Error submitting mission:', error);\n alert('Error submitting mission. Please try again.');\n } finally {\n setSubmittingMission(false);\n }\n };\n const checkMissionStatus = async () => {\n if (!userWallet) return;\n try {\n const missions = await devbaseClient.listEntities('missions', {\n ogSubmitter: userWallet\n });\n if (missions && missions.length > 0) {\n setMissionStatus(missions[0].status);\n } else {\n setMissionStatus(null);\n }\n } catch (error) {\n console.error('Error checking mission status:', error);\n }\n };\n useEffect(() => {\n loadUserTwitter();\n loadUserStats();\n checkMissionStatus();\n }, [userWallet]);\n useEffect(() => {\n if (userTwitter && !missionText && !generatingText) {\n generateMissionText();\n }\n }, [userTwitter]);\n useEffect(() => {\n if (activeTab === 'jobs') {\n loadJobsData();\n } else if (activeTab === 'submissions') {\n loadSubmissionsData();\n }\n }, [activeTab, userWallet]);\n const loadUserTwitter = async () => {\n if (!userWallet) return;\n try {\n console.log('[MyProfile.loadUserTwitter] Loading for wallet:', userWallet);\n const username = await devbaseClient.evalExpression('$USER_X_USERNAME');\n console.log('[MyProfile.loadUserTwitter] Retrieved username:', username);\n setUserTwitter(username || '');\n } catch (error) {\n console.error('Error loading twitter:', error);\n }\n };\n const loadUserStats = async () => {\n if (!userWallet) return;\n try {\n const allClips = await devbaseClient.listEntities('clips', {\n ogClipper: userWallet\n });\n const allClaims = await devbaseClient.listEntities('claims');\n const totalClips = (allClips || []).length;\n let totalEarned = 0;\n for (const claim of allClaims || []) {\n const clip = (allClips || []).find(c => c.id === claim.clipId);\n if (clip) {\n totalEarned += parseFloat(claim.amount) || 0;\n }\n }\n setUserStats({\n totalClips,\n totalEarned\n });\n } catch (error) {\n console.error('Error loading user stats:', error);\n }\n };\n const loadJobsData = async () => {\n if (!userWallet) return;\n try {\n setLoading(true);\n const [allJobs, allClips] = await Promise.all([devbaseClient.listEntities('jobs'), devbaseClient.listEntities('clips')]);\n const myJobs = (allJobs || []).filter(job => job.userId === userWallet);\n setJobs(myJobs);\n myJobs.forEach(job => {\n loadClipsForJob(job.id);\n });\n const clipsCounts = {};\n (allClips || []).forEach(clip => {\n const clipper = clip.ogClipper || clip.userId;\n clipsCounts[clipper] = (clipsCounts[clipper] || 0) + 1;\n });\n setUserClipsCounts(clipsCounts);\n const jobsCounts = {};\n (allJobs || []).forEach(job => {\n jobsCounts[job.userId] = (jobsCounts[job.userId] || 0) + 1;\n });\n setUserJobsCounts(jobsCounts);\n } catch (error) {\n console.error('Error loading my jobs:', error);\n } finally {\n setLoading(false);\n }\n };\n const loadSubmissionsData = async () => {\n if (!userWallet) return;\n try {\n setLoading(true);\n const [allSubmissions, allClips, allJobs] = await Promise.all([devbaseClient.listEntities('clips', {\n ogClipper: userWallet\n }), devbaseClient.listEntities('clips'), devbaseClient.listEntities('jobs')]);\n setSubmissions(allSubmissions || []);\n (allSubmissions || []).forEach(clip => {\n loadSubmissionJobDetails(clip.jobId);\n });\n const clipsCounts = {};\n (allClips || []).forEach(clip => {\n const clipper = clip.ogClipper || clip.userId;\n clipsCounts[clipper] = (clipsCounts[clipper] || 0) + 1;\n });\n setUserClipsCounts(clipsCounts);\n const jobsCounts = {};\n (allJobs || []).forEach(job => {\n jobsCounts[job.userId] = (jobsCounts[job.userId] || 0) + 1;\n });\n setUserJobsCounts(jobsCounts);\n } catch (error) {\n console.error('Error loading submissions:', error);\n } finally {\n setLoading(false);\n }\n };\n const loadClipsForJob = async jobId => {\n try {\n setLoadingClips(prev => ({\n ...prev,\n [jobId]: true\n }));\n const clips = await devbaseClient.listEntities('clips', {\n jobId\n });\n setJobClips(prev => ({\n ...prev,\n [jobId]: clips || []\n }));\n for (const clip of clips || []) {\n if (clip.ogClipper && !clipperTwitterNames[clip.ogClipper]) {\n loadClipperTwitter(clip.ogClipper);\n }\n }\n } catch (error) {\n console.error('Error loading clips:', error);\n } finally {\n setLoadingClips(prev => ({\n ...prev,\n [jobId]: false\n }));\n }\n };\n const loadClipperTwitter = async walletAddress => {\n try {\n const accounts = await devbaseClient.listEntities('xaccounts', {\n walletAddress: walletAddress\n });\n if (accounts && accounts.length > 0) {\n const account = accounts[0];\n setClipperTwitterNames(prev => ({\n ...prev,\n [walletAddress]: account.username\n }));\n setProfilesData(prev => ({\n ...prev,\n [walletAddress]: account\n }));\n }\n } catch (error) {\n if (!error.message?.includes('not found')) {\n console.error('Error loading clipper twitter:', error);\n }\n }\n };\n const loadSubmissionJobDetails = async jobId => {\n if (submissionJobDetails[jobId]) return;\n try {\n const job = await devbaseClient.getEntity('jobs', jobId);\n setSubmissionJobDetails(prev => ({\n ...prev,\n [jobId]: job\n }));\n if (job.userId && !profilesData[job.userId]) {\n loadProfileData(job.userId);\n }\n } catch (error) {\n console.error('Error loading job:', error);\n }\n };\n const loadProfileData = async walletAddress => {\n try {\n const accounts = await devbaseClient.listEntities('xaccounts', {\n walletAddress: walletAddress\n });\n if (accounts && accounts.length > 0) {\n setProfilesData(prev => ({\n ...prev,\n [walletAddress]: accounts[0]\n }));\n }\n } catch (error) {\n console.error('Error loading profile data:', error);\n }\n };\n const getStatusColor = status => {\n switch (status) {\n case 'pending':\n return 'bg-yellow-500/20 text-yellow-500';\n case 'approved':\n return 'bg-green-500/20 text-green-500';\n case 'paid':\n return 'bg-blue-500/20 text-blue-500';\n case 'rejected':\n return 'bg-red-500/20 text-red-500';\n default:\n return 'bg-gray-500/20 text-gray-400';\n }\n };\n const getApprovedOrPaidCount = jobId => {\n const clips = jobClips[jobId] || [];\n return clips.filter(c => c.status === 'approved' || c.status === 'paid').length;\n };\n const MissionStatusDisplay = () => {\n if (missionStatus === 'approved') {\n return

\n 🎉 Mission Approved! You're officially an Early Clipper!\n

;\n }\n if (missionStatus === 'pending') {\n return

\n ⏳ Your submission is pending approval.\n

;\n }\n if (missionStatus === 'rejected') {\n return

\n ❌ Your submission was rejected. Please try again.\n

;\n }\n return <>\n

\n {generatingText ?

\n Generating your unique mission text...\n

\n {missionText || 'Loading...'}\n

}\n

\n \n

\n After posting, share your post URL to complete the mission:\n setMissionPostUrl(e.target.value)} placeholder=\"https://x.com/yourname/status/...\" className=\"w-full bg-[#0a0a0a] border border-gray-700 rounded-lg px-4 py-3 text-white focus:outline-none focus:border-purple-500\" />\n \n

\n ;\n };\n return

My Profile

\n {userTwitter &&

{\n e.target.src = `data:image/svg+xml,%3Csvg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 100 100\"%3E%3Ccircle cx=\"50\" cy=\"50\" r=\"50\" fill=\"%231a1a1a\"/%3E%3Ctext x=\"50\" y=\"50\" text-anchor=\"middle\" dy=\".3em\" font-size=\"40\" fill=\"%2322c55e\"%3E${userTwitter.charAt(0).toUpperCase()}%3C/text%3E%3C/svg%3E`;\n }} />\n

{profileData?.name || `@${userTwitter}`}

\n @{userTwitter}\n {profileData?.accountCreatedAt && ` - joined ${new Date(profileData.accountCreatedAt).toLocaleDateString('en-US', {\n month: 'short',\n year: 'numeric'\n })}`}\n

\n {missionStatus === 'approved' &&

\n $\"Early$ \n

}\n \n View on X\n \n

\n {profileData?.followersCount !== undefined &&

{profileData.followersCount.toLocaleString()}

Followers

{profileData.followingCount?.toLocaleString() || 0}

Following

{profileData.tweetCount?.toLocaleString() || 0}

Tweets

{profileData.likeCount?.toLocaleString() || 0}

Likes

{userStats.totalClips}

Clips Made

{userStats.totalEarned.toFixed(3)}

SOL Earned

}\n

}\n {missionStatus === 'approved' &&

\n Early Clipper Mission Badge - Completed\n

\n 🎉 Congratulations! You're officially an Early Clipper. You've joined the revolution and helped spread the word about clip2earn. This badge marks you as a true pioneer in the community!\n

}\n {missionStatus !== 'approved' &&

\n \n

\n 🎯 Mission: Early Clipper\n

\n Join the revolution and let the world know you're part of the clip2earn movement! Share your journey on X and earn your early adopter badge.\n

\n \n

}\n

\n \n \n

\n {loading ?

: activeTab === 'jobs' ?

\n {jobs.length === 0 ?

You haven't posted any jobs yet

\n {jobs.map(job => {\n const clips = jobClips[job.id] || [];\n const approvedCount = getApprovedOrPaidCount(job.id);\n const isFilled = approvedCount >= job.clipsNeeded;\n return

{job.name}

\n \n {job.status}\n \n \n {approvedCount}/{job.clipsNeeded} clips filled\n \n

{job.bountyPerClip} SOL

per clip

\n {isFilled && job.status === 'open' && }\n

Submissions ({clips.length})

\n {loadingClips[job.id] ?

Loading submissions...

: clips.length === 0 ?

No submissions yet

: <>\n {clips.filter(c => c.status === 'pending').length > 0 &&

\n Pending Approval ({clips.filter(c => c.status === 'pending').length})\n

\n {clips.filter(c => c.status === 'pending').map(clip =>

\n \n {clip.ogClipper && clip.ogClipper !== clip.userId && }\n

\n \n

\n \n {clip.status}\n \n

\n \n \n

)}\n

}\n {clips.filter(c => c.status === 'approved' || c.status === 'paid').length > 0 &&

\n Approved/Paid ({clips.filter(c => c.status === 'approved' || c.status === 'paid').length})\n

\n {clips.filter(c => c.status === 'approved' || c.status === 'paid').map(clip =>

\n \n

\n \n {clip.status}\n \n

)}\n

}\n {clips.filter(c => c.status === 'rejected').length > 0 &&

\n Rejected ({clips.filter(c => c.status === 'rejected').length})\n

\n {clips.filter(c => c.status === 'rejected').map(clip =>

\n \n {clip.ogClipper && clip.ogClipper !== clip.userId && }\n

\n \n

\n \n {clip.status}\n \n

)}\n

}\n }\n

;\n })}\n

}\n

\n {submissions.length === 0 ?

You haven't submitted any clips yet

\n {submissions.map(clip => {\n const job = submissionJobDetails[clip.jobId];\n return

\n {job &&

{job.name}

\n {job.description &&

{job.description}

}\n

\n {job.bountyPerClip} SOL\n •\n {job.hashtags}\n

\n {(job.followersRequired > 0 || job.mentionHandle) &&

\n PRO\n

\n {job.followersRequired > 0 &&

\n Min. Followers: {job.followersRequired.toLocaleString()}\n

}\n {job.mentionHandle &&

\n Mention: {job.mentionHandle}\n

}\n

}\n \n

}\n

\n \n

\n \n {clip.status}\n \n

\n {clip.status === 'approved' && job && }\n {clip.status === 'paid' &&

\n ✓ Bounty claimed!\n

}\n {clip.status === 'rejected' &&

\n ✗ Submission rejected\n

}\n

;\n })}\n

}\n

;\n}\nexport default function AppWithProvider() {\n return \n \n ;\n}","packageJson","{\"dependencies\":{\"react\":\"18.2.0\",\"lucide-react\":\"0.441.0\",\"@devfunlabs/web-sdk\":\"0.5.6\",\"react-router-dom\":\"6.18.0\",\"@solana/web3.js\":\"1.95.3\",\"@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\",\"framer-motion\":\"10.16.4\",\"socket.io-client\":\"4.7.1\",\"recharts\":\"2.8.0\",\"@react-three/fiber\":\"8.15.19\",\"@react-three/drei\":\"9.99.7\",\"three\":\"0.162.0\",\"zod\":\"3.22.4\"}}","appFunctions",[78,86,92,98,104],{"_14":79,"_35":80,"_37":81,"_20":82,"_83":84,"_85":40},["B","81773"],["D",1760887705263],["D",1760887705263],"$FUNC_CAN_CLAIM","body","async function $FUNC_CAN_CLAIM(clipId) {\n const clip = await $ENTITY('clips').get(clipId);\n if (!clip) {\n return false;\n }\n if (clip.ogClipper !== $USER_ID) {\n return false;\n }\n if (clip.status !== 'approved') {\n return false;\n }\n const existingClaim = await $ENTITY('claims').exists({ clipId: clipId });\n if (existingClaim) {\n return false;\n }\n return true;\n}","commitId",{"_14":87,"_35":88,"_37":89,"_20":90,"_83":91,"_85":40},["B","81774"],["D",1760887705267],["D",1760887705267],"$FUNC_CAN_UPDATE_CLIP","async function $FUNC_CAN_UPDATE_CLIP(clipId, newStatus) {\n const clip = await $ENTITY('clips').get(clipId);\n if (!clip) {\n return false;\n }\n const job = await $ENTITY('jobs').get(clip.jobId);\n if (!job) {\n return false;\n }\n if ($USER_ID === $OWNER_ID) {\n return true;\n }\n if (newStatus === 'approved' || newStatus === 'rejected') {\n return $USER_ID === job.userId && clip.status !== 'paid';\n }\n if (newStatus === 'paid') {\n return $USER_ID === clip.ogClipper && clip.status === 'approved';\n }\n return false;\n}",{"_14":93,"_35":94,"_37":95,"_20":96,"_83":97,"_85":40},["B","81775"],["D",1760887705268],["D",1760887705268],"$FUNC_GET_CLAIM_AMOUNT","async function $FUNC_GET_CLAIM_AMOUNT(clipId) {\n const clip = await $ENTITY('clips').get(clipId);\n const job = await $ENTITY('jobs').get(clip.jobId);\n return job.bountyPerClip;\n}",{"_14":99,"_35":100,"_37":101,"_20":102,"_83":103,"_85":40},["B","81776"],["D",1760887705269],["D",1760887705269],"$FUNC_GET_TAX_AMOUNT","async function $FUNC_GET_TAX_AMOUNT(jobId) {\n const job = await $ENTITY('jobs').get(jobId);\n if (!job) {\n return 0;\n }\n const totalBounty = job.bountyPerClip * job.clipsNeeded;\n const hasPROFeatures = job.followersRequired > 0 || (job.mentionHandle && job.mentionHandle !== '') || job.minAccountAge > 0;\n const taxRate = hasPROFeatures ? 0.025 : 0.005;\n return totalBounty * taxRate;\n}",{"_14":105,"_35":106,"_37":107,"_20":108,"_83":109,"_85":40},["B","81777"],["D",1760887705270],["D",1760887705270],"$FUNC_GET_TOTAL_WITH_TAX","async function $FUNC_GET_TOTAL_WITH_TAX(bountyPerClip, clipsNeeded, followersRequired, mentionHandle, minAccountAge) {\n const totalBounty = bountyPerClip * clipsNeeded;\n const hasPROFeatures = followersRequired > 0 || (mentionHandle && mentionHandle !== '') || minAccountAge > 0;\n const taxRate = hasPROFeatures ? 0.025 : 0.005;\n const tax = totalBounty * taxRate;\n return totalBounty + tax;\n}","token","upstreamApp","isLordOfDev","isExternalApp","analytics",[116,120,122,124,126,128,130,132,134,136,138,140,142,144],{"_117":118,"_119":61},"day","2025-10-31","runCount",{"_117":121,"_119":61},"2025-11-01",{"_117":123,"_119":61},"2025-11-02",{"_117":125,"_119":61},"2025-11-03",{"_117":127,"_119":61},"2025-11-04",{"_117":129,"_119":61},"2025-11-05",{"_117":131,"_119":61},"2025-11-06",{"_117":133,"_119":61},"2025-11-07",{"_117":135,"_119":61},"2025-11-08",{"_117":137,"_119":61},"2025-11-09",{"_117":139,"_119":61},"2025-11-10",{"_117":141,"_119":61},"2025-11-11",{"_117":143,"_119":61},"2025-11-12",{"_117":145,"_119":61},"2025-11-13","snapshot","ogImage","https://cdn.dev.fun/og/image/c963f4f3d3abb6580912/92e7d693.webp","isDevbase","project",{"_14":19,"_152":153,"_20":154,"_155":156,"_22":157},"image","https://cdn.dev.fun/upload/projects/b2c0fd25.png","Clip 2 Earn","oneliner","Clipping Capital Markets","Streamer? Post clipping jobs - Grow your brand\nTrencher? Get paid to clip - Make your content worth","actionData","errors"]

say something