[{"_1":2,"_380":-5,"_381":-5},"loaderData",{"_3":4,"_10":11},"root",{"_5":-5,"_6":7,"_8":9},"user","appId","cm7twdhs6009l11ml868xhxld","wsEndpoint","https://dev.fun","routes/p.$appId",{"_12":13,"_378":-5,"_139":-7,"_379":17},"appDetail",{"_14":15,"_16":17,"_18":19,"_20":21,"_22":23,"_24":25,"_26":27,"_28":27,"_29":30,"_33":34,"_35":36,"_37":38,"_39":40,"_41":42,"_43":44,"_45":46,"_5":47,"_59":60,"_61":62,"_63":64,"_65":66,"_67":62,"_68":69,"_70":44,"_71":72,"_73":62,"_74":62,"_75":17,"_76":27,"_77":-5,"_78":79,"_80":81,"_82":83,"_128":-5,"_129":130,"_309":17,"_153":17,"_310":311,"_139":34,"_141":368,"_369":27,"_370":371},"id","32ce8f32b6916c169a9e","isMyApp",false,"projectId","cmgfqi5840017c9zfw7leiloa","name","Clip2Earn","description","🎬 Turn epic stream moments into viral clips. \nPost jobs, clip content, and earn instantly in SOL 💰","brief","Clip viral moments, earn SOL, rock that fresh 2025 footer energy!","isLive",true,"isPublic","tags",[31,32],"🔥","👑","cover","https://cdn.dev.fun/snapshot/32ce8f32b6916c169a9e/144743_c7c21528.webp","cdnUrl","https://cdn.dev.fun/app/32ce8f32b6916c169a9e/144743","createdAt",["D",1760892080557],"updatedAt",["D",1762389024399],"lastCommitId",["B","144743"],"tier",1,"credits",-9498,{"_14":48,"_49":50,"_51":50,"_52":53,"_54":50,"_55":56,"_57":58},"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",149,"forkCount",0,"likeCount",8,"runsCount",1003,"downvoteCount","upvoteCount",12,"upvoteRate","commentCount",11,"reportCount","visitorCount","isArchived","isRenamed","contractAddress","code","import { useState, useEffect, useRef, Component } from 'react';\nimport { useDevapp, UserButton, DevappProvider, openLink } from '@devfunlabs/web-sdk';\nimport { Connection, PublicKey } from '@solana/web3.js';\nimport { Clapperboard, Briefcase, CheckCircle, XCircle, DollarSign, Award, ArrowRight, Menu, X } from 'lucide-react';\nclass ErrorBoundary extends Component {\n constructor(props) {\n super(props);\n this.state = {\n hasError: false,\n error: null\n };\n }\n static getDerivedStateFromError(error) {\n return {\n hasError: true,\n error\n };\n }\n componentDidCatch(error, errorInfo) {\n console.log('Error caught by boundary:', error, errorInfo);\n if (error?.message?.includes('User rejected') || error?.name === 'WalletConnectionError') {\n setTimeout(() => {\n this.setState({\n hasError: false,\n error: null\n });\n }, 3000);\n }\n }\n render() {\n if (this.state.hasError) {\n const isWalletError = this.state.error?.message?.includes('User rejected') || this.state.error?.name === 'WalletConnectionError';\n if (isWalletError) {\n return

⚠️

Wallet Connection Cancelled

\n You cancelled the wallet connection. No worries! Click below to try again when you're ready.\n

\n \n

;\n }\n return

💥

Oops! Something went wrong

\n Don't worry, we'll get you back on track. Try refreshing the page.\n

\n \n

;\n }\n return this.props.children;\n }\n}\nfunction ConnectionPrompt({\n type,\n connectTwitter,\n xAccountError\n}) {\n if (type === 'wallet') {\n return

\n $\"Clip2Earn$ \n

Connect Your Wallet

You need to connect your Solana wallet to access this feature

Connect your wallet to start posting jobs or hunting for bounties

\n \n

;\n }\n if (type === 'x') {\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 null;\n}\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 WelcomePanel({\n onEnter\n}) {\n return

\n $\"Clip2Earn$ \n

\n \n

For Streamers

Post clip jobs with bounties and grow your brand

\n \n

For Clippers

Find jobs, submit clips, and get paid in SOL

\n \n

\n No signup required • Browse jobs and leaderboard freely • Connect wallet when ready to participate\n

;\n}\nfunction App() {\n const {\n devbaseClient,\n userWallet\n } = useDevapp();\n const [view, setView] = useState('home');\n const [hasEntered, setHasEntered] = useState(false);\n const [isScrolled, setIsScrolled] = useState(false);\n useEffect(() => {\n const handleScroll = () => {\n setIsScrolled(window.scrollY > 20);\n };\n window.addEventListener('scroll', handleScroll);\n return () => window.removeEventListener('scroll', handleScroll);\n }, []);\n useEffect(() => {\n const updateMetaTags = () => {\n const metaTags = [{\n property: 'og:image',\n content: 'https://cdn.dev.fun/asset/32ce8f32b6916c169a9e/earlyclipper_0eb3c53a.png'\n }, {\n name: 'twitter:card',\n content: 'summary_large_image'\n }, {\n name: 'twitter:image',\n content: 'https://cdn.dev.fun/asset/32ce8f32b6916c169a9e/earlyclipper_0eb3c53a.png'\n }, {\n name: 'twitter:title',\n content: 'Clip2Earn - Early Clipper'\n }, {\n name: 'twitter:description',\n content: 'Join the Early Clipper mission and earn your badge!'\n }];\n metaTags.forEach(tag => {\n const existingTag = tag.property ? document.querySelector(`meta[property=\"${tag.property}\"]`) : document.querySelector(`meta[name=\"${tag.name}\"]`);\n if (existingTag) {\n existingTag.setAttribute('content', tag.content);\n } else {\n const newTag = document.createElement('meta');\n if (tag.property) {\n newTag.setAttribute('property', tag.property);\n } else {\n newTag.setAttribute('name', tag.name);\n }\n newTag.setAttribute('content', tag.content);\n document.head.appendChild(newTag);\n }\n });\n };\n updateMetaTags();\n }, []);\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 [navProfileImage, setNavProfileImage] = useState('');\n const [loading, setLoading] = useState(false);\n const [isOwner, setIsOwner] = useState(false);\n const [xAccountError, setXAccountError] = useState('');\n const [, setLinkedWallet] = useState('');\n const [mobileMenuOpen, setMobileMenuOpen] = useState(false);\n const OWNER_WALLET = '4QUk9RNqFiFiwZECiczBZp8cDLvB6fViZtpAsiJaxNc6';\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 setNavProfileImage('');\n return;\n }\n setXAccountError('');\n setLinkedWallet('');\n setUserTwitter(username);\n const userAccounts = await devbaseClient.listEntities('xaccounts', {\n walletAddress: userWallet\n });\n let userProfile = null;\n if (userAccounts && userAccounts.length > 0) {\n userProfile = userAccounts[0];\n setMyProfileData(userProfile);\n setNavProfileImage(userProfile.profileImageUrl || `https://unavatar.io/x/${username}`);\n } else {\n setNavProfileImage(`https://unavatar.io/x/${username}`);\n }\n const sessionKey = `webhook_fetched_${userWallet}`;\n const hasAlreadyFetched = sessionStorage.getItem(sessionKey);\n const isProfileIncomplete = !userProfile || !userProfile.profileImageUrl || !userProfile.followersCount;\n if (!hasAlreadyFetched && isProfileIncomplete) {\n try {\n console.log('[loadUserTwitter] Attempting to fetch full profile from webhook');\n const webhookUrl = 'https://yas420.app.n8n.cloud/webhook/fc1aaec9-9cf7-42fb-9996-c98f4a8c309e';\n const params = new URLSearchParams({\n username: username\n });\n const response = await fetch(`${webhookUrl}?${params.toString()}`, {\n method: 'GET'\n });\n if (response.ok) {\n const responseText = await response.text();\n let responseData;\n try {\n responseData = JSON.parse(responseText);\n } catch {\n responseData = responseText;\n }\n if (responseData?.data) {\n const twitterData = responseData.data;\n console.log('[loadUserTwitter] Successfully fetched full profile data');\n const fullProfileData = {\n username: twitterData.username,\n twitterId: twitterData.id,\n name: twitterData.name,\n verified: twitterData.verified || false,\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 walletAddress: userWallet\n };\n setMyProfileData(fullProfileData);\n setNavProfileImage(fullProfileData.profileImageUrl || `https://unavatar.io/x/${username}`);\n const existingAccounts = await devbaseClient.listEntities('xaccounts', {\n walletAddress: userWallet\n });\n if (existingAccounts && existingAccounts.length > 0) {\n await devbaseClient.updateEntity('xaccounts', existingAccounts[0].id, fullProfileData);\n } else {\n await devbaseClient.createEntity('xaccounts', fullProfileData);\n }\n sessionStorage.setItem(sessionKey, 'true');\n return;\n }\n }\n } catch (webhookError) {\n console.log('[loadUserTwitter] Webhook fetch failed, falling back to basic profile:', webhookError.message);\n }\n } else {\n console.log('[loadUserTwitter] Skipping webhook - already fetched or profile is complete');\n }\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 setNavProfileImage('');\n }\n } catch (error) {\n console.error('Error loading twitter:', error);\n }\n };\n const connectTwitter = () => {\n if (!userWallet) return;\n const loginUrl = `https://oauth.dev.fun/twitter/login/32ce8f32b6916c169a9e/${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 const existingClipsWithUrl = await devbaseClient.listEntities('clips', {\n clipUrl: clipUrl\n });\n if (existingClipsWithUrl && existingClipsWithUrl.length > 0) {\n alert(`❌ Duplicate Clip\\n\\nThis clip URL has already been submitted. Each clip must be unique.`);\n setLoading(false);\n return;\n }\n const job = await devbaseClient.getEntity('jobs', jobId);\n if (job && job.followersRequired > 0) {\n const userAccounts = await devbaseClient.listEntities('xaccounts', {\n walletAddress: userWallet\n });\n const userProfile = userAccounts && userAccounts.length > 0 ? userAccounts[0] : null;\n const userFollowers = userProfile?.followersCount || 0;\n if (userFollowers < job.followersRequired) {\n alert(`❌ Insufficient Followers\\n\\nThis job requires ${job.followersRequired.toLocaleString()} followers, but you only have ${userFollowers.toLocaleString()} followers.\\n\\nPlease choose a different job or grow your X account to meet the requirement.`);\n setLoading(false);\n return;\n }\n }\n const existingClips = await devbaseClient.listEntities('clips', {\n jobId: jobId,\n ogClipper: userWallet\n });\n if (existingClips && existingClips.length > 0) {\n alert(`❌ Already Submitted\\n\\nYou have already submitted a clip for this job. Only one submission per job is allowed.`);\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 addEscrowAndApprove = async (clipId, jobId) => {\n try {\n setLoading(true);\n await devbaseClient.createEntity('extraApprovals', {\n jobId,\n clipId\n });\n await devbaseClient.updateEntity('clips', clipId, {\n status: 'approved'\n });\n await checkAndUpdateJobStatus(jobId);\n if (view === 'my-profile') {\n loadMyJobs();\n }\n alert('Extra bounty added and clip approved! 🎉');\n } catch (error) {\n console.error('Add escrow error:', error);\n alert(`Error adding escrow: ${error.message || 'Unknown error'}`);\n } finally {\n setLoading(false);\n }\n };\n const claimBounty = async clipId => {\n try {\n setLoading(true);\n console.log('[claimBounty] Starting claim for clipId:', clipId);\n const clip = await devbaseClient.getEntity('clips', clipId);\n console.log('[claimBounty] Clip details:', clip);\n const claimResult = await devbaseClient.createEntity('claims', {\n clipId\n });\n console.log('[claimBounty] Claim created with ID:', claimResult.id);\n console.log('[claimBounty] Waiting 2 seconds for transaction confirmation...');\n await new Promise(resolve => setTimeout(resolve, 2000));\n try {\n const vaultAddress = await devbaseClient.evalExpression('$VAULT_ADDRESS');\n console.log('[claimBounty] Vault address:', vaultAddress);\n const connection = new Connection('https://rpc.dev.fun/32ce8f32b6916c169a9e');\n const vaultPubkey = new PublicKey(vaultAddress);\n console.log('[claimBounty] Fetching recent signatures from vault...');\n const signatures = await connection.getSignaturesForAddress(vaultPubkey, {\n limit: 20\n });\n console.log('[claimBounty] Found signatures:', signatures.length);\n let txHash = null;\n const job = await devbaseClient.getEntity('jobs', clip.jobId);\n const expectedAmount = job.bountyPerClip * 1000000000;\n console.log('[claimBounty] Expected transfer amount (lamports):', expectedAmount);\n console.log('[claimBounty] User wallet:', userWallet);\n for (let i = 0; i < signatures.length; i++) {\n const sig = signatures[i];\n console.log(`[claimBounty] Checking signature ${i + 1}/${signatures.length}:`, sig.signature);\n try {\n const tx = await connection.getTransaction(sig.signature, {\n maxSupportedTransactionVersion: 0\n });\n if (!tx) {\n console.log(`[claimBounty] No transaction found for signature ${i + 1}`);\n continue;\n }\n console.log(`[claimBounty] Transaction ${i + 1} found, checking balances...`);\n if (tx?.meta?.postBalances && tx?.meta?.preBalances) {\n const accountKeys = tx.transaction.message.getAccountKeys().staticAccountKeys;\n console.log(`[claimBounty] Account keys in transaction:`, accountKeys.map(k => k.toString()));\n const userIndex = accountKeys.findIndex(key => key.toString() === userWallet);\n console.log(`[claimBounty] User wallet index:`, userIndex);\n if (userIndex !== -1) {\n const balanceChange = tx.meta.postBalances[userIndex] - tx.meta.preBalances[userIndex];\n console.log(`[claimBounty] Balance change for user:`, balanceChange, 'lamports');\n console.log(`[claimBounty] Expected amount:`, expectedAmount, 'lamports');\n console.log(`[claimBounty] Difference:`, Math.abs(balanceChange - expectedAmount), 'lamports');\n if (balanceChange > 0 && Math.abs(balanceChange - expectedAmount) < 10000) {\n txHash = sig.signature;\n console.log('[claimBounty] ✅ MATCH FOUND! Transaction hash:', txHash);\n break;\n }\n }\n }\n } catch (txError) {\n console.error(`[claimBounty] Error checking transaction ${i + 1}:`, txError);\n }\n }\n if (txHash && claimResult.id) {\n console.log('[claimBounty] Updating claim with txHash:', txHash);\n await devbaseClient.updateEntity('claims', claimResult.id, {\n txHash: txHash\n });\n console.log('[claimBounty] Claim updated successfully');\n console.log('[claimBounty] Reloading clip claims...');\n const allClaims = await devbaseClient.listEntities('claims');\n const claimsMap = {};\n (allClaims || []).forEach(claim => {\n if (claim.clipId) {\n claimsMap[claim.clipId] = claim;\n }\n });\n setClipClaims(claimsMap);\n console.log('[claimBounty] Clip claims reloaded');\n } else {\n console.warn('[claimBounty] ⚠️ Could not find matching transaction hash');\n if (!txHash) {\n console.warn('[claimBounty] No matching transaction found in recent signatures');\n }\n if (!claimResult.id) {\n console.warn('[claimBounty] Claim result has no ID');\n }\n }\n } catch (txHashError) {\n console.error('[claimBounty] Error fetching tx hash from blockchain:', txHashError);\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 const needsWalletConnection = !userWallet && (view === 'post-job' || view === 'find-jobs' || view === 'my-profile');\n const needsXConnection = !userTwitter && userWallet && (view === 'post-job' || view === 'find-jobs' || view === 'my-profile');\n if (!hasEntered) {\n return setHasEntered(true)} />;\n }\n return

\n $\"Clip2Earn$ \n \n

Clip2Earn

\n {userTwitter ? \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${userTwitter.charAt(0).toUpperCase()}%3C/text%3E%3C/svg%3E`;\n }} />\n @{userTwitter.length > 10 ? userTwitter.substring(0, 10) + '...' : userTwitter}\n

\n \n : }\n

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

\n {view === 'home' && }\n {view === 'post-job' && (needsWalletConnection ? : needsXConnection ? : )}\n {view === 'find-jobs' && (needsWalletConnection ? : needsXConnection ? : )}\n {view === 'my-profile' && (needsWalletConnection ? : needsXConnection ? : )}\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 bountiesPaid = 0,\n solEarned = 0,\n clipsCashed = 0,\n size = 'normal'\n}) {\n const shortWallet = walletAddress ? `${walletAddress.slice(0, 4)}...${walletAddress.slice(-4)}` : '';\n const isLarge = size === 'large';\n const avatarSize = isLarge ? 'w-14 h-14' : 'w-10 h-10';\n const textSize = isLarge ? 'text-base' : 'text-sm';\n const labelSize = isLarge ? 'text-sm' : 'text-xs';\n const walletSize = isLarge ? 'text-sm' : 'text-xs';\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' || label === 'Job Poster' ? jobsPostedCount : clipsCount}

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

\n {label === 'Job Poster' &&

{bountiesPaid.toFixed(2)} SOL

Bounties Paid

}\n {label === 'Clipper' && <>\n

{clipsCashed}

Clips Cashed

{solEarned.toFixed(3)} SOL

SOL Earned

\n }\n

}\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 [userClipsCashedCounts, setUserClipsCashedCounts] = 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 const [clipClaims, setClipClaims] = useState({});\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 claimsMap = {};\n (allClaims || []).forEach(claim => {\n if (claim.clipId) {\n claimsMap[claim.clipId] = claim;\n }\n });\n setClipClaims(claimsMap);\n const clipsCounts = {};\n const clipsCashedCounts = {};\n (allClips || []).forEach(clip => {\n const clipper = clip.ogClipper || clip.userId;\n clipsCounts[clipper] = (clipsCounts[clipper] || 0) + 1;\n if (clip.status === 'paid') {\n clipsCashedCounts[clipper] = (clipsCashedCounts[clipper] || 0) + 1;\n }\n });\n setUserClipsCounts(clipsCounts);\n setUserClipsCashedCounts(clipsCashedCounts);\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 => {\n uniqueUserIds.add(clip.userId);\n if (clip.ogClipper) uniqueUserIds.add(clip.ogClipper);\n });\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 'ready to claim':\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 const existingClipsWithUrl = await devbaseClient.listEntities('clips', {\n clipUrl: clipUrl\n });\n if (existingClipsWithUrl && existingClipsWithUrl.length > 0) {\n alert(`❌ Duplicate Clip\\n\\nThis clip URL has already been submitted. Each clip must be unique.`);\n setSubmitting(false);\n return;\n }\n if (viewingJob.followersRequired > 0) {\n const userAccounts = await devbaseClient.listEntities('xaccounts', {\n walletAddress: userWallet\n });\n const userProfile = userAccounts && userAccounts.length > 0 ? userAccounts[0] : null;\n const userFollowers = userProfile?.followersCount || 0;\n if (userFollowers < viewingJob.followersRequired) {\n alert(`❌ Insufficient Followers\\n\\nThis job requires ${viewingJob.followersRequired.toLocaleString()} followers, but you only have ${userFollowers.toLocaleString()} followers.\\n\\nPlease choose a different job or grow your X account to meet the requirement.`);\n setSubmitting(false);\n return;\n }\n }\n const existingClips = await devbaseClient.listEntities('clips', {\n jobId: viewingJob.id,\n ogClipper: userWallet\n });\n if (existingClips && existingClips.length > 0) {\n alert(`❌ Already Submitted\\n\\nYou have already submitted a clip for this job. Only one submission per job is allowed.`);\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 return

\n \n

{job.name}

\n {job.description &&

{job.description}

}\n

\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 \n {getPendingCount(job.id)} waiting approval\n \n \n {clips.filter(c => c.status === 'approved').length} ready to claim\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 {(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 === 'approved' ? 'ready to claim' : clip.status}\n \n {clip.status === 'paid' && clipClaims[clip.id]?.txHash && \n View TX\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% - 2.5% for platform buybacks and MW

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

}\n

Latest Clips

\n {loading ?

: latestClips.length === 0 ?

No clips yet

\n {latestClips.map(clip => {\n const clipperId = clip.ogClipper || clip.userId;\n return

\n \n

\n \n {clip.status === 'approved' ? 'ready to claim' : clip.status}\n \n {clip.status === 'paid' && clipClaims[clip.id]?.txHash && \n View TX\n }\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 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 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 [userClipsCashedCounts, setUserClipsCashedCounts] = useState({});\n const [userJobsCounts, setUserJobsCounts] = useState({});\n const [approvedMissions, setApprovedMissions] = useState({});\n const [clipClaims, setClipClaims] = 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 loadClipClaims();\n }, [jobs]);\n const loadClipClaims = async () => {\n try {\n const allClaims = await devbaseClient.listEntities('claims');\n const claimsMap = {};\n (allClaims || []).forEach(claim => {\n if (claim.clipId) {\n claimsMap[claim.clipId] = claim;\n }\n });\n setClipClaims(claimsMap);\n } catch (error) {\n console.error('Error loading claims:', error);\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 loadAllClipsCount = async () => {\n try {\n const [allClips, allJobs] = await Promise.all([devbaseClient.listEntities('clips'), devbaseClient.listEntities('jobs')]);\n const clipsCounts = {};\n const clipsCashedCounts = {};\n (allClips || []).forEach(clip => {\n const clipper = clip.ogClipper || clip.userId;\n clipsCounts[clipper] = (clipsCounts[clipper] || 0) + 1;\n if (clip.status === 'paid') {\n clipsCashedCounts[clipper] = (clipsCashedCounts[clipper] || 0) + 1;\n }\n });\n setUserClipsCounts(clipsCounts);\n setUserClipsCashedCounts(clipsCashedCounts);\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

\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 {(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 === 'approved' ? 'ready to claim' : 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 === 'approved' ? 'ready to claim' : clip.status}\n \n {clip.status === 'paid' && clipClaims[clip.id]?.txHash && \n View TX\n }\n

)}\n

}\n }\n

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

\n ⏸️\n

Submissions Temporarily Frozen

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

;\n }\n const openJobs = jobs.filter(job => job.status === 'open');\n const filledJobs = jobs.filter(job => job.status === 'filled');\n return

\n {openJobs.length > 0 && <>\n

Available Jobs

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

setViewingJob(job)}>\n

{job.name}

{job.bountyPerClip} SOL

per clip

\n \n

\n {job.description &&

{job.description}

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

\n PRO\n

\n {job.followersRequired > 0 &&

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

}\n {job.minAccountAge > 0 &&

\n Min. Account Age: {job.minAccountAge} months\n

}\n {job.mentionHandle &&

\n Mention: {job.mentionHandle}\n

}\n

\n \n

;\n })}\n

\n }\n {filledJobs.length > 0 && <>\n

Filled Jobs

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

setViewingJob(job)}>\n

{job.name}

{job.bountyPerClip} SOL

per clip

\n \n

\n {job.description &&

{job.description}

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

\n PRO\n

\n {job.followersRequired > 0 &&

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

}\n {job.minAccountAge > 0 &&

\n Min. Account Age: {job.minAccountAge} months\n

}\n {job.mentionHandle &&

\n Mention: {job.mentionHandle}\n

}\n

\n \n

;\n })}\n

\n }\n {jobs.length === 0 &&

No jobs available yet

}\n

;\n}\nfunction AdminView({\n jobs,\n loading,\n devbaseClient,\n onUpdateClipStatus,\n onDeleteClip,\n onDeleteJob,\n onUpdateJobStatus\n}) {\n const [activeTab, setActiveTab] = useState('wallets');\n const [allClips, setAllClips] = useState([]);\n const [allWallets, setAllWallets] = useState([]);\n const [loadingWallets, setLoadingWallets] = useState(false);\n const [viewingWallet, setViewingWallet] = useState(null);\n const [walletData, setWalletData] = useState({});\n const [editingWalletData, setEditingWalletData] = 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 [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 [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 const [, setUserClipsCashedCounts] = useState({});\n const [userJobsCounts, setUserJobsCounts] = useState({});\n const [claimedTaxes, setClaimedTaxes] = useState({});\n const [claimingTax, setClaimingTax] = useState({});\n const [clipClaims, setClipClaims] = useState({});\n const [transactions, setTransactions] = useState([]);\n const [loadingTransactions, setLoadingTransactions] = useState(false);\n const [, setVaultAddress] = useState('');\n const [webhookUrl, setWebhookUrl] = useState('https://yas420.app.n8n.cloud/webhook/fc1aaec9-9cf7-42fb-9996-c98f4a8c309e');\n useEffect(() => {\n if (activeTab === 'missions') {\n loadMissions();\n } else if (activeTab === 'accounts') {\n loadXAccounts();\n } else if (activeTab === 'wallets') {\n loadAllWallets();\n } else if (activeTab === 'jobs') {} else if (activeTab === 'clips') {\n loadAllClips();\n } else if (activeTab === 'transactions') {\n loadTransactions();\n }\n loadClaimedTaxes();\n loadClipClaims();\n }, [activeTab]);\n const loadTransactions = async () => {\n try {\n setLoadingTransactions(true);\n const [allJobs, allClaims, allTaxes, allClips, allXAccounts, vaultAddr] = await Promise.all([devbaseClient.listEntities('jobs'), devbaseClient.listEntities('claims'), devbaseClient.listEntities('taxes'), devbaseClient.listEntities('clips'), devbaseClient.listEntities('xaccounts'), devbaseClient.evalExpression('$VAULT_ADDRESS')]);\n setVaultAddress(vaultAddr);\n const jobsMap = new Map((allJobs || []).map(j => [j.id, j]));\n const clipsMap = new Map((allClips || []).map(c => [c.id, c]));\n const accountsMap = new Map((allXAccounts || []).map(a => [a.walletAddress, a]));\n const deposits = (allJobs || []).map(job => {\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 const taxAmount = totalBounty * taxRate;\n const totalCost = totalBounty + taxAmount;\n const userAccount = accountsMap.get(job.userId);\n return {\n id: job.id,\n type: 'Deposit',\n date: job.createdAt,\n amount: totalCost,\n from: job.userId,\n to: vaultAddr,\n description: `Job Creation: \"${job.name}\"`,\n details: {\n jobId: job.id,\n bounty: totalBounty,\n tax: taxAmount\n },\n user: {\n wallet: job.userId,\n username: userAccount?.username,\n profileImageUrl: userAccount?.profileImageUrl\n }\n };\n });\n const withdrawals = (allClaims || []).map(claim => {\n const clip = clipsMap.get(claim.clipId);\n if (!clip) return null;\n const job = jobsMap.get(clip.jobId);\n const userAccount = accountsMap.get(clip.ogClipper);\n return {\n id: claim.id,\n type: 'Withdrawal',\n date: claim.createdAt,\n amount: parseFloat(claim.amount) || 0,\n from: vaultAddr,\n to: clip.ogClipper,\n description: `Bounty Claim for job: \"${job?.name || 'N/A'}\"`,\n details: {\n claimId: claim.id,\n clipId: claim.clipId,\n jobId: clip.jobId,\n txHash: claim.txHash\n },\n user: {\n wallet: clip.ogClipper,\n username: userAccount?.username,\n profileImageUrl: userAccount?.profileImageUrl\n }\n };\n }).filter(Boolean);\n const taxPayouts = (allTaxes || []).map(tax => {\n const job = jobsMap.get(tax.jobId);\n return {\n id: tax.id,\n type: 'Tax Payout',\n date: tax.createdAt,\n amount: parseFloat(tax.amount) || 0,\n from: vaultAddr,\n to: '3eGYU6Yt8CCRHR9kXnDHrpHj1YZd3s6QiGa49R8S22UA',\n description: `Marketing Tax for job: \"${job?.name || 'N/A'}\"`,\n details: {\n taxId: tax.id,\n jobId: tax.jobId\n },\n user: null\n };\n });\n const allTransactions = [...deposits, ...withdrawals, ...taxPayouts].sort((a, b) => b.date - a.date);\n setTransactions(allTransactions);\n } catch (error) {\n console.error('Error loading transactions:', error);\n } finally {\n setLoadingTransactions(false);\n }\n };\n const loadClipClaims = async () => {\n try {\n const allClaims = await devbaseClient.listEntities('claims');\n const claimsMap = {};\n (allClaims || []).forEach(claim => {\n if (claim.clipId) {\n claimsMap[claim.clipId] = claim;\n }\n });\n setClipClaims(claimsMap);\n } catch (error) {\n console.error('Error loading claims:', error);\n }\n };\n const loadClaimedTaxes = async () => {\n try {\n const allTaxes = await devbaseClient.listEntities('taxes');\n const claimed = {};\n (allTaxes || []).forEach(tax => {\n if (tax.jobId) {\n claimed[tax.jobId] = true;\n }\n });\n setClaimedTaxes(claimed);\n } catch (error) {\n console.error('Error loading claimed taxes:', error);\n }\n };\n const handleClaimTax = async jobId => {\n try {\n setClaimingTax(prev => ({\n ...prev,\n [jobId]: true\n }));\n await devbaseClient.createEntity('taxes', {\n jobId\n });\n await loadClaimedTaxes();\n alert('Tax claimed successfully!');\n } catch (error) {\n console.error('Error claiming tax:', error);\n alert(`Error claiming tax: ${error.message || 'Unknown error'}`);\n } finally {\n setClaimingTax(prev => ({\n ...prev,\n [jobId]: false\n }));\n }\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 loadAllWallets = async () => {\n try {\n setLoadingWallets(true);\n const [allJobs, allClips, allXAccounts] = await Promise.all([devbaseClient.listEntities('jobs'), devbaseClient.listEntities('clips'), devbaseClient.listEntities('xaccounts')]);\n const walletSet = new Set();\n (allJobs || []).forEach(job => {\n if (job.userId) walletSet.add(job.userId);\n });\n (allClips || []).forEach(clip => {\n if (clip.userId) walletSet.add(clip.userId);\n if (clip.ogClipper) walletSet.add(clip.ogClipper);\n });\n (allXAccounts || []).forEach(account => {\n if (account.walletAddress) walletSet.add(account.walletAddress);\n });\n const wallets = Array.from(walletSet).map(wallet => {\n const xAccount = (allXAccounts || []).find(acc => acc.walletAddress === wallet);\n const jobsCount = (allJobs || []).filter(job => job.userId === wallet).length;\n const clipsCount = (allClips || []).filter(clip => clip.userId === wallet || clip.ogClipper === wallet).length;\n return {\n address: wallet,\n username: xAccount?.username,\n profileImageUrl: xAccount?.profileImageUrl,\n jobsCount,\n clipsCount,\n hasXAccount: !!xAccount\n };\n });\n wallets.sort((a, b) => b.jobsCount + b.clipsCount - (a.jobsCount + a.clipsCount));\n setAllWallets(wallets);\n } catch (error) {\n console.error('Error loading wallets:', error);\n } finally {\n setLoadingWallets(false);\n }\n };\n const loadWalletDetails = async walletAddress => {\n try {\n setViewingWallet(walletAddress);\n const accounts = await devbaseClient.listEntities('xaccounts', {\n walletAddress: walletAddress\n });\n if (accounts && accounts.length > 0) {\n const account = accounts[0];\n setWalletData(account);\n setEditingWalletData({\n username: account.username || '',\n name: account.name || '',\n verified: account.verified || false,\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 inviteCode: account.inviteCode || '',\n invitedBy: account.invitedBy || ''\n });\n } else {\n setWalletData(null);\n setEditingWalletData({\n username: '',\n name: '',\n verified: false,\n walletAddress: walletAddress,\n twitterId: '',\n profileImageUrl: '',\n followersCount: 0,\n followingCount: 0,\n tweetCount: 0,\n likeCount: 0,\n listedCount: 0,\n mediaCount: 0,\n accountCreatedAt: '',\n inviteCode: '',\n invitedBy: ''\n });\n }\n } catch (error) {\n console.error('Error loading wallet details:', error);\n }\n };\n const handleSaveWalletData = async () => {\n try {\n const accounts = await devbaseClient.listEntities('xaccounts', {\n walletAddress: editingWalletData.walletAddress\n });\n if (accounts && accounts.length > 0) {\n await devbaseClient.updateEntity('xaccounts', accounts[0].id, editingWalletData);\n alert('Wallet data updated successfully!');\n } else {\n await devbaseClient.createEntity('xaccounts', editingWalletData);\n alert('X account created for wallet successfully!');\n }\n setViewingWallet(null);\n loadAllWallets();\n } catch (error) {\n console.error('Error saving wallet data:', error);\n alert(`Error saving wallet data: ${error.message || 'Unknown error'}`);\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 verified: account.verified || false,\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 inviteCode: account.inviteCode || '',\n invitedBy: account.invitedBy || ''\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 verified: twitterData.verified || false,\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, allJobs] = await Promise.all([devbaseClient.listEntities('clips'), devbaseClient.listEntities('jobs')]);\n setAllClips(clips || []);\n const clipsCounts = {};\n const clipsCashedCounts = {};\n (allClips || []).forEach(clip => {\n const clipper = clip.ogClipper || clip.userId;\n clipsCounts[clipper] = (clipsCounts[clipper] || 0) + 1;\n if (clip.status === 'paid') {\n clipsCashedCounts[clipper] = (clipsCashedCounts[clipper] || 0) + 1;\n }\n });\n setUserClipsCounts(clipsCounts);\n setUserClipsCashedCounts(clipsCashedCounts);\n const jobsCounts = {};\n (allJobs || []).forEach(job => {\n jobsCounts[job.userId] = (jobsCounts[job.userId] || 0) + 1;\n });\n setUserJobsCounts(jobsCounts);\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 const renderTabContent = () => {\n switch (activeTab) {\n case 'wallets':\n if (viewingWallet) {\n return

\n \n\n

\n Edit Wallet Data\n

\n \n

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

\n\n

\n \n X Username\n \n setEditingWalletData({\n ...editingWalletData,\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=\"username\" />\n

\n\n

\n \n Display Name\n \n setEditingWalletData({\n ...editingWalletData,\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\n

\n \n Verified Status\n \n

\n \n setEditingWalletData({\n ...editingWalletData,\n verified: true\n })} className=\"w-4 h-4 text-green-500\" />\n Verified\n \n \n setEditingWalletData({\n ...editingWalletData,\n verified: false\n })} className=\"w-4 h-4 text-gray-500\" />\n Not Verified\n \n

\n\n

\n \n Twitter ID\n \n setEditingWalletData({\n ...editingWalletData,\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\n

\n \n Profile Image URL\n \n setEditingWalletData({\n ...editingWalletData,\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\n

\n \n Followers\n \n setEditingWalletData({\n ...editingWalletData,\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\n

\n \n Following\n \n setEditingWalletData({\n ...editingWalletData,\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\n

\n \n Tweets\n \n setEditingWalletData({\n ...editingWalletData,\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\n

\n \n Likes\n \n setEditingWalletData({\n ...editingWalletData,\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\n

\n \n Media\n \n setEditingWalletData({\n ...editingWalletData,\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\n

\n \n Listed\n \n setEditingWalletData({\n ...editingWalletData,\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\n

\n \n Account Created At\n \n setEditingWalletData({\n ...editingWalletData,\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

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

\n\n

\n \n Invite Code\n \n setEditingWalletData({\n ...editingWalletData,\n inviteCode: 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=\"ABC123\" />\n

\n User's unique invite code\n

\n\n

\n \n Invited By\n \n setEditingWalletData({\n ...editingWalletData,\n invitedBy: 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=\"XYZ789\" />\n

\n Invite code that invited this user\n

\n\n

\n \n \n

;\n }\n return

All Wallets ({allWallets.length})

\n {loadingWallets ?

Loading wallets...

: allWallets.length === 0 ?

No wallets found

\n {allWallets.map(wallet =>

loadWalletDetails(wallet.address)}>\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${(wallet.username || wallet.address).charAt(0).toUpperCase()}%3C/text%3E%3C/svg%3E`;\n }} />\n

\n {wallet.username ?

@{wallet.username}

{wallet.address}

No X account linked

}\n

{wallet.jobsCount}

Jobs

{wallet.clipsCount}

Clips

\n {!wallet.hasXAccount &&

\n No X Account\n

}\n

)}\n

}\n

;\n case 'transactions':\n return

Transaction Log ({transactions.length})

\n {loadingTransactions ?

Loading transactions...

: transactions.length === 0 ?

No transactions found

\n {transactions.map(tx => {\n const typeColor = tx.type === 'Deposit' ? 'bg-green-500/20 text-green-500' : tx.type === 'Withdrawal' ? 'bg-blue-500/20 text-blue-500' : 'bg-purple-500/20 text-purple-500';\n const shortFrom = tx.from ? `${tx.from.slice(0, 4)}...${tx.from.slice(-4)}` : 'N/A';\n const shortTo = tx.to ? `${tx.to.slice(0, 4)}...${tx.to.slice(-4)}` : 'N/A';\n return

\n \n {tx.type}\n \n {new Date(tx.date).toLocaleString()}\n

{tx.description}

\n {shortFrom}\n \n {shortTo}\n

\n {tx.user && tx.user.username &&

{\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${tx.user.username.charAt(0).toUpperCase()}%3C/text%3E%3C/svg%3E`;\n }} />\n \n @{tx.user.username}\n \n

}\n

\n {tx.type === 'Deposit' ? '+' : '-'}{tx.amount.toFixed(5)} SOL\n

\n {tx.details.txHash && \n View TX\n }\n

Details

\n {Object.entries(tx.details).map(([key, value]) =>

\n {key}: \n {value}\n

)}\n

;\n })}\n

}\n

;\n case 'missions':\n return

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

;\n case 'accounts':\n return

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 Verified Status\n

\n \n setEditXAccountData({\n ...editXAccountData,\n verified: true\n })} className=\"w-4 h-4 text-green-500\" />\n Verified\n \n \n setEditXAccountData({\n ...editXAccountData,\n verified: false\n })} className=\"w-4 h-4 text-gray-500\" />\n Not Verified\n \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 Invite Code\n setEditXAccountData({\n ...editXAccountData,\n inviteCode: 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=\"ABC123\" />\n

User's unique invite code

\n Invited By\n setEditXAccountData({\n ...editXAccountData,\n invitedBy: 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=\"XYZ789\" />\n

Invite code that invited this user

\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.verified && ✓}\n {account.twitterId && ID: {account.twitterId}}\n

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

\n {account.walletAddress}\n

\n }\n {!editingXAccount || editingXAccount !== account.walletAddress ? <>\n {(account.inviteCode || account.invitedBy) &&

\n {account.inviteCode &&

\n Invite Code:\n {account.inviteCode}\n

}\n {account.invitedBy &&

\n Invited By:\n {account.invitedBy}\n

}\n

}\n : null}\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 {account.inviteCode &&

\n Invite Code:\n {account.inviteCode}\n

}\n {account.invitedBy &&

\n Invited By:\n {account.invitedBy}\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

;\n case 'jobs':\n return

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.minAccountAge > 0 &&

\n Min. Account Age: {job.minAccountAge} months\n

}\n {job.mentionHandle &&

\n Mention: {job.mentionHandle}\n

}\n

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

\n \n \n \n

\n {!claimedTaxes[job.id] && }\n {claimedTaxes[job.id] &&

\n ✓ Tax Claimed\n

}\n

\n \n \n

}\n

)}\n

}\n

;\n case 'clips':\n return

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 === 'approved' ? 'ready to claim' : clip.status}\n \n {clip.status === 'paid' && clipClaims[clip.id]?.txHash && \n View TX\n }\n

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

;\n })}\n

}\n

;\n case 'settings':\n return

⚠️ Danger Zone

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

\n \n

;\n default:\n return null;\n }\n };\n return

Admin Panel

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

\n {renderTabContent()}\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 [userClipsCashedCounts, setUserClipsCashedCounts] = 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 const [clipClaims, setClipClaims] = useState({});\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.paidClips - a.paidClips).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 const clipsCashedCounts = {};\n (allClips || []).forEach(clip => {\n const clipper = clip.ogClipper || clip.userId;\n clipsCounts[clipper] = (clipsCounts[clipper] || 0) + 1;\n if (clip.status === 'paid') {\n clipsCashedCounts[clipper] = (clipsCashedCounts[clipper] || 0) + 1;\n }\n });\n setUserClipsCounts(clipsCounts);\n setUserClipsCashedCounts(clipsCashedCounts);\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, allClaims] = await Promise.all([devbaseClient.listEntities('jobs'), devbaseClient.listEntities('clips'), devbaseClient.listEntities('claims')]);\n const claimsMap = {};\n (allClaims || []).forEach(claim => {\n if (claim.clipId) {\n claimsMap[claim.clipId] = claim;\n }\n });\n setClipClaims(claimsMap);\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 {clip.status === 'paid' && clipClaims[clip.id]?.txHash && \n View TX\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 })}\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 marketplace where streamers hire clippers to turn live moments into viral X 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 onAddEscrowAndApprove,\n profileData,\n loadMyJobs,\n loadMySubmissions\n}) {\n const {\n userWallet\n } = useDevapp();\n const [activeTab, setActiveTab] = useState('submissions');\n const [generatingInviteCode, setGeneratingInviteCode] = useState(false);\n const [jobs, setJobs] = useState([]);\n const [submissions, setSubmissions] = useState([]);\n const [loading, setLoading] = useState(false);\n const [claimingClips, setClaimingClips] = useState({});\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 [userClipsCashedCounts, setUserClipsCashedCounts] = useState({});\n const missionTextVariations = ['🎬 Joined the Early Clipper mission on #clip2earn!\\nEarly access secured — getting ready to clip the best of pumpfun streams 💚\\n@c2e_app, build on @devfunpump', '🎬 I\\'m officially an Early Clipper on @c2e_app!\\nFirst wave of clippers joining the pumpfun stream era 💚\\nBuild on @devfunpump', '🎬 Just joined @c2e_app, the clippers job app on @devfunpump as an Early Clipper 👀\\nCan\\'t wait to catch pumpfun stream moments and build from the start 💚', '🎬 Early Clipper access unlocked on @c2e_app 💚\\nDay one of the pumpfun stream era — let\\'s go ⚡\\n#clip2earn - Build on @devfunpump'];\n const [selectedVariation, setSelectedVariation] = useState(0);\n const [missionPostUrl, setMissionPostUrl] = useState('');\n const [submittingMission, setSubmittingMission] = useState(false);\n const [missionStatus, setMissionStatus] = useState(null);\n const [clipClaims, setClipClaims] = useState({});\n const handleShareMission = () => {\n const missionText = missionTextVariations[selectedVariation];\n if (!missionText) return;\n const tweetUrl = `https://twitter.com/intent/tweet?text=${encodeURIComponent(missionText)}`;\n window.open(tweetUrl, '_blank');\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 (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 handleGenerateInviteCode = async () => {\n if (!userWallet) return;\n try {\n setGeneratingInviteCode(true);\n const inviteCode = Math.random().toString(36).substring(2, 8).toUpperCase();\n const accounts = await devbaseClient.listEntities('xaccounts', {\n walletAddress: userWallet\n });\n if (accounts && accounts.length > 0) {\n await devbaseClient.updateEntity('xaccounts', accounts[0].id, {\n inviteCode: inviteCode\n });\n window.location.reload();\n }\n } catch (error) {\n console.error('Error generating invite code:', error);\n alert('Error generating invite code. Please try again.');\n } finally {\n setGeneratingInviteCode(false);\n }\n };\n const loadUserStats = async () => {\n if (!userWallet) return;\n try {\n const [allClips, allJobs] = await Promise.all([devbaseClient.listEntities('clips', {\n ogClipper: userWallet\n }), devbaseClient.listEntities('jobs')]);\n const jobsMap = {};\n (allJobs || []).forEach(job => {\n jobsMap[job.id] = job;\n });\n const totalClips = (allClips || []).length;\n let totalEarned = 0;\n for (const clip of allClips || []) {\n if (clip.status === 'approved' || clip.status === 'paid') {\n const job = jobsMap[clip.jobId];\n if (job) {\n totalEarned += job.bountyPerClip;\n }\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 const clipsCashedCounts = {};\n (allClips || []).forEach(clip => {\n const clipper = clip.ogClipper || clip.userId;\n clipsCounts[clipper] = (clipsCounts[clipper] || 0) + 1;\n if (clip.status === 'paid') {\n clipsCashedCounts[clipper] = (clipsCashedCounts[clipper] || 0) + 1;\n }\n });\n setUserClipsCounts(clipsCounts);\n setUserClipsCashedCounts(clipsCashedCounts);\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, allClaims] = await Promise.all([devbaseClient.listEntities('clips', {\n ogClipper: userWallet\n }), devbaseClient.listEntities('clips'), devbaseClient.listEntities('jobs'), devbaseClient.listEntities('claims')]);\n setSubmissions(allSubmissions || []);\n const claimsMap = {};\n (allClaims || []).forEach(claim => {\n if (claim.clipId) {\n claimsMap[claim.clipId] = claim;\n }\n });\n setClipClaims(claimsMap);\n (allSubmissions || []).forEach(clip => {\n loadSubmissionJobDetails(clip.jobId);\n });\n const clipsCounts = {};\n const clipsCashedCounts = {};\n (allClips || []).forEach(clip => {\n const clipper = clip.ogClipper || clip.userId;\n clipsCounts[clipper] = (clipsCounts[clipper] || 0) + 1;\n if (clip.status === 'paid') {\n clipsCashedCounts[clipper] = (clipsCashedCounts[clipper] || 0) + 1;\n }\n });\n setUserClipsCounts(clipsCounts);\n setUserClipsCashedCounts(clipsCashedCounts);\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 Choose your tweet style:\n

\n {['Balanced', 'Builder', 'Degen', 'Viral'].map((label, index) => )}\n

\n {missionTextVariations[selectedVariation]}\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 &&

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

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

\n Has verified X:\n {profileData?.verified ?

\n ✓\n Verified Account\n

\n Not Verified\n

}\n

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

\n $\"Early$ \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

Invite Code

\n {!profileData?.inviteCode ?

\n Generate your unique invite code to share Clip2Earn with friends!\n

\n \n

\n Share your unique code with friends to invite them to Clip2Earn.\n

\n 💡 Invite rewards coming soon! Generate your code now and be ready to earn when we launch our referral program.\n

\n Your Invite Code\n {profileData.inviteCode}\n

\n \n

\n {profileData?.invitedBy &&

\n Invited by:\n {profileData.invitedBy}\n

}\n

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

\n Early Clipper Mission Badge - Completed\n

\n 🎉 You're officially an Early Clipper. Thanks for helping spread the word about clip2earn.\n

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

\n $\"Early$ \n

\n 🎯 Mission: Early Clipper\n

\n Post about clip2earn on X to 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 const isJobFilled = isFilled;\n const pendingClipsCount = clips.filter(c => c.status === 'pending').length;\n const canAddExtraEscrow = isJobFilled && pendingClipsCount === 1;\n const handleApproveClick = async (clipId, status) => {\n await onApproveOrReject(clipId, status);\n await loadClipsForJob(job.id);\n };\n const handleAddEscrowClick = async (clipId, jobId) => {\n await onAddEscrowAndApprove(clipId, jobId);\n await loadClipsForJob(job.id);\n };\n return

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

\n \n

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

\n {canAddExtraEscrow ?

\n 💡 Job is filled! Add extra escrow to approve this clip.\n

\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 === 'approved' ? 'ready to claim' : clip.status}\n \n {clip.status === 'paid' && clipClaims[clip.id]?.txHash && \n View TX\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.minAccountAge > 0 &&

\n Min. Account Age: {job.minAccountAge} months\n

}\n {job.mentionHandle &&

\n Mention: {job.mentionHandle}\n

}\n

}\n \n

}\n

\n \n

\n \n {clip.status}\n \n {clip.status === 'paid' && clipClaims[clip.id]?.txHash && \n View TX\n }\n

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

✓ Bounty claimed!

\n {clipClaims[clip.id]?.txHash && \n View transaction on Solscan\n }\n

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

\n ✗ Submission rejected\n

}\n

;\n })}\n

}\n

;\n}\nexport default function AppWithProvider() {\n return \n \n \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",[84,92,98,104,110,116,122],{"_14":85,"_37":86,"_39":87,"_20":88,"_89":90,"_91":42},["B","115519"],["D",1762389044693],["D",1762389044693],"$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":93,"_37":94,"_39":95,"_20":96,"_89":97,"_91":42},["B","115520"],["D",1762389044696],["D",1762389044696],"$FUNC_CAN_CREATE_EXTRA_APPROVAL","async function $FUNC_CAN_CREATE_EXTRA_APPROVAL(jobId, clipId) {\n const job = await $ENTITY('jobs').get(jobId);\n if (!job || job.userId !== $USER_ID) {\n return false;\n }\n const clip = await $ENTITY('clips').get(clipId);\n if (!clip || clip.jobId !== jobId || clip.status !== 'pending') {\n return false;\n }\n const allClips = await $ENTITY('clips').list({ jobId: jobId });\n const approvedOrPaid = allClips.filter(c => c.status === 'approved' || c.status === 'paid').length;\n if (approvedOrPaid < job.clipsNeeded) {\n return false;\n }\n const pendingClips = allClips.filter(c => c.status === 'pending');\n if (pendingClips.length !== 1 || pendingClips[0].id !== clipId) {\n return false;\n }\n return true;\n }",{"_14":99,"_37":100,"_39":101,"_20":102,"_89":103,"_91":42},["B","115521"],["D",1762389044698],["D",1762389044698],"$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":105,"_37":106,"_39":107,"_20":108,"_89":109,"_91":42},["B","115522"],["D",1762389044706],["D",1762389044706],"$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":111,"_37":112,"_39":113,"_20":114,"_89":115,"_91":42},["B","115523"],["D",1762389044707],["D",1762389044707],"$FUNC_GET_EXTRA_BOUNTY_AMOUNT","async function $FUNC_GET_EXTRA_BOUNTY_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":117,"_37":118,"_39":119,"_20":120,"_89":121,"_91":42},["B","115524"],["D",1762389044709],["D",1762389044709],"$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":123,"_37":124,"_39":125,"_20":126,"_89":127,"_91":42},["B","115525"],["D",1762389044711],["D",1762389044711],"$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",{"_14":131,"_37":132,"_39":133,"_134":135,"_20":136,"_22":137,"_24":138,"_139":140,"_141":142,"_35":143,"_144":145,"_43":44,"_45":146,"_147":148,"_149":17,"_28":27,"_75":27,"_76":27,"_150":17,"_151":17,"_152":17,"_153":17,"_59":154,"_61":44,"_63":62,"_65":62,"_71":62,"_68":44,"_67":62,"_155":48,"_156":-5,"_41":157,"_18":19,"_158":159,"_307":17,"_26":17,"_70":44,"_29":308},"c963f4f3d3abb6580912",["D",1760481394207],["D",1762833204075],"template","web","clip2earn","Turn epic stream moments into viral clips. Post jobs, clip content, and earn instantly in SOL.","Turn stream moments into money: streamers post bounties, clippers deliver viral clips, everyone wins.","snapshot","https://cdn.dev.fun/snapshot/c963f4f3d3abb6580912/129288_e7ec28e7.webp","ogImage","https://cdn.dev.fun/og/image/c963f4f3d3abb6580912/92e7d693.webp","https://cdn.dev.fun/app/c963f4f3d3abb6580912/129288","category","money",120,"featureScore","0","isAutomated","isTagHot","isTagMoney","isTagCrown","isExternalApp",141,"userId","upstreamAppId",["B","129288"],"lastCommit",{"_14":157,"_37":160,"_161":162,"_163":164,"_78":165,"_80":81,"_166":167,"_168":169,"_170":-5,"_139":140,"_35":143,"_171":17,"_172":27,"_173":27,"_134":135,"_174":-5,"_175":176,"_277":278,"_6":131,"_155":48,"_279":280,"_82":281},["D",1760886577333],"input","The app is throwing the following errors:\nError loading twitter: TypeError: devbaseClient.evalString is not a function\n at loadUserTwitter (https://2-19-8-sandpack.codesandbox.io/App.js:867:44)\n at eval (https://2-19-8-sandpack.codesandbox.io/App.js:862:5)\n at commitHookEffectListMount (https://2-19-8-sandpack.codesandbox.io/node_modules/react-dom/cjs/react-dom.development.js:23150:26)\n at commitPassiveMountOnFiber (https://2-19-8-sandpack.codesandbox.io/node_modules/react-dom/cjs/react-dom.development.js:24926:13)\n at commitPassiveMountEffects_complete (https://2-19-8-sandpack.codesandbox.io/node_modules/react-dom/cjs/react-dom.development.js:24891:9)\n at commitPassiveMountEffects_begin (https://2-19-8-sandpack.codesandbox.io/node_modules/react-dom/cjs/react-dom.development.js:24878:7)\n at commitPassiveMountEffects (https://2-19-8-sandpack.codesandbox.io/node_modules/react-dom/cjs/react-dom.development.js:24866:3)\n at flushPassiveEffectsImpl (https://2-19-8-sandpack.codesandbox.io/node_modules/react-do\nPlease fix the errors and try again.","output","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';\n\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}\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}\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}\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

{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 {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}\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 \n

;\n }\n return

Post a Clip Job

\n Description\n \n

\n PRO\n Professional Requirements\n

Only clippers with this many followers or more can submit

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}\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

{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}

{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}\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 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 Wallet Address (Read-only)\n \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}\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

{\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}\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

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

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

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}\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 ;\n };\n return

My Profile

\n {userTwitter &&

{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}\n\nexport default function AppWithProvider() {\n return \n \n ;\n}","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 🚀 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 \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

{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 {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

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 \n

;\n }\n return

Post a Clip Job

\n Description\n \n

\n PRO\n Professional Requirements\n

Only clippers with this many followers or more can submit

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

{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}

{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 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 Wallet Address (Read-only)\n \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

{\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?

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

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

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 ;\n };\n return

My Profile

\n {userTwitter &&

{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}","thinking","Looking at the error, it says `devbaseClient.evalString is not a function`. Based on the message history, there was a previous issue where `evalString` was replaced with `evalExpression` throughout the code. However, looking at the current code, I can see that in the `MyProfileView` component, there's still a call to `evalString`:\n\n```javascript\nconst loadUserTwitter = async () => {\n if (!userWallet) return;\n try {\n console.log('[MyProfile.loadUserTwitter] Loading for wallet:', userWallet);\n const username = await devbaseClient.evalString('$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```\n\nThis needs to be changed to `evalExpression` to match the rest of the code.\n\nLet me scan through the entire code to find all instances of `evalString` and replace them with `evalExpression`.\n\nFound instances:\n1. In `MyProfileView` component's `loadUserTwitter` function - line with `const username = await devbaseClient.evalString('$USER_X_USERNAME');`\n\nAll other instances seem to already use `evalExpression`. Let me make sure by checking the entire code again.\n\nActually, I see the issue is in the `MyProfileView` component. The fix is simple - just replace `evalString` with `evalExpression`.","changelog","Fixed the evalString error! Changed the remaining evalString call to evalExpression in the MyProfileView component. The app should now load the Twitter username correctly without throwing errors.","diff","isRephrased","isDebug","isSuccess","error","devbaseSchema",{"_177":178,"_218":219,"_230":231,"_241":242,"_252":253,"_261":262},"jobs",{"_179":180,"_189":190,"_202":203},"rules",{"_181":182,"_183":184,"_185":186,"_187":188},"list","true","create","$USER_X_USERNAME !== ''","delete","$USER_ID === $OWNER_ID","update","$USER_ID === $data.userId","fields",{"_20":191,"_192":191,"_193":191,"_194":195,"_22":191,"_196":191,"_197":195,"_198":191,"_199":195,"_200":191,"_201":195},"String","status","hashtags","clipsNeeded","Number","streamingUrl","bountyPerClip","mentionHandle","minAccountAge","ownerXUsername","followersRequired","actions",{"_183":204},{"_205":206,"_209":210},"compute",{"_192":207,"_200":208},"`open`","$USER_X_USERNAME","transfer",{"_211":212,"_213":214,"_128":215,"_216":217},"to","$VAULT_ADDRESS","from","$USER_ID","$TOKEN_SOL","amount","$FUNC_GET_TOTAL_WITH_TAX($newData.bountyPerClip, $newData.clipsNeeded, $newData.followersRequired, $newData.mentionHandle, $newData.minAccountAge)","clips",{"_179":220,"_189":222,"_202":226},{"_181":182,"_183":184,"_185":186,"_187":221},"$FUNC_CAN_UPDATE_CLIP($data.id, $newData.status)",{"_223":191,"_192":191,"_224":191,"_225":191,"_200":191},"jobId","clipUrl","ogClipper",{"_183":227},{"_205":228},{"_192":229,"_225":214,"_200":208},"`pending`","taxes",{"_179":232,"_189":233,"_202":234},{"_181":182,"_183":182},{"_223":191,"_216":195},{"_183":235},{"_205":236,"_209":238},{"_216":237},"$FUNC_GET_TAX_AMOUNT($newData.jobId)",{"_211":239,"_213":212,"_128":215,"_216":240},"$OWNER_ID","$newData.amount","claims",{"_179":243,"_189":245,"_202":247},{"_181":182,"_183":244},"$FUNC_CAN_CLAIM($newData.clipId)",{"_246":191},"clipId",{"_183":248},{"_205":249,"_209":251},{"_216":250},"$FUNC_GET_CLAIM_AMOUNT($newData.clipId)",{"_211":214,"_213":212,"_128":215,"_216":240},"missions",{"_179":254,"_189":255,"_202":258},{"_181":182,"_183":184,"_185":186,"_187":186},{"_192":191,"_256":191,"_51":191,"_257":191},"postUrl","ogSubmitter",{"_183":259},{"_205":260},{"_192":229,"_51":208,"_257":214},"xaccounts",{"_179":263,"_189":264,"_202":274},{"_181":182,"_183":182,"_185":186,"_187":182},{"_20":191,"_51":191,"_63":195,"_265":191,"_266":195,"_267":195,"_268":195,"_269":191,"_270":195,"_271":195,"_272":191,"_273":191},"twitterId","mediaCount","tweetCount","listedCount","walletAddress","followersCount","followingCount","profileImageUrl","accountCreatedAt",{"_183":275},{"_205":276},{"_51":208,"_269":214},"devbaseInsight","This Devbase schema describes a platform for managing content creation jobs, specifically focusing on short video clips (like TikTok or YouTube Shorts) related to X (formerly Twitter) content. It involves job posting, clip submission, reward claiming, and tracking user X accounts.\n\n## Jobs Entity\n### Purpose:\nDefines a content creation task that users can fulfill by submitting clips.\n### Fields:\n- `name`: The title of the job.\n- `status`: The current state of the job (e.g., `open`). Automatically set to `open` when created.\n- `hashtags`: Relevant hashtags for the job.\n- `clipsNeeded`: The number of clips required for this job.\n- `description`: A detailed explanation of the job.\n- `streamingUrl`: A link to the content to be clipped.\n- `bountyPerClip`: The reward amount for each approved clip.\n- `mentionHandle`: An X (Twitter) handle to be mentioned in the clips.\n- `minAccountAge`: Minimum age of an X account required to participate.\n- `ownerXUsername`: The X username of the job creator. Automatically set when created.\n- `followersRequired`: Minimum number of followers an X account needs to participate.\n### Permissions:\n- **View (list):** Anyone can see all available jobs.\n- **Create:** Only users who have connected their X (Twitter) account can create new jobs.\n- **Update:** Only the user who created a job can modify it.\n- **Delete:** Only the application owner can delete jobs.\n### Onchain Actions:\n- **When creating a job:**\n - The total bounty (calculated based on `bountyPerClip`, `clipsNeeded`, and other job parameters, potentially including a tax) is transferred from the job creator's wallet to the application's secure vault. This ensures funds are available for rewards.\n\n## Clips Entity\n### Purpose:\nRepresents a submitted clip by a content creator for a specific job.\n### Fields:\n- `jobId`: The ID of the job this clip is associated with.\n- `status`: The current state of the clip (e.g., `pending`, `approved`, `rejected`). Automatically set to `pending` when created.\n- `clipUrl`: The URL where the clip is hosted.\n- `ogClipper`: The user ID of the original creator who submitted the clip. Automatically set when created.\n- `ownerXUsername`: The X username of the user who submitted the clip. Automatically set when created.\n### Permissions:\n- **View (list):** Anyone can see all submitted clips.\n- **Create:** Only users who have connected their X (Twitter) account can submit new clips.\n- **Update:** Whether a clip can be updated depends on its current status and the proposed new status, determined by a custom function (`$FUNC_CAN_UPDATE_CLIP`).\n- **Delete:** Only the application owner can delete clips.\n\n## Taxes Entity\n### Purpose:\nRecords tax payments associated with jobs.\n### Fields:\n- `jobId`: The ID of the job for which tax is being recorded.\n- `amount`: The amount of tax paid.\n### Permissions:\n- **View (list):** Anyone can see tax records.\n- **Create:** Anyone can create a tax record (though the actual creation is likely triggered by an internal process).\n### Onchain Actions:\n- **When creating a tax record:**\n - The tax `amount` is calculated by a function (`$FUNC_GET_TAX_AMOUNT`) based on the `jobId`.\n - This calculated tax amount is then transferred from the application's vault to the application owner's wallet.\n\n## Claims Entity\n### Purpose:\nAllows content creators to claim their rewards for approved clips.\n### Fields:\n- `clipId`: The ID of the clip for which the reward is being claimed.\n### Permissions:\n- **View (list):** Anyone can see claim records.\n- **Create:** A custom function (`$FUNC_CAN_CLAIM`) determines if a user is eligible to claim a reward for a specific clip (e.g., checking if the clip is approved and not already claimed).\n### Onchain Actions:\n- **When creating a claim:**\n - The reward `amount` for the clip is calculated by a function (`$FUNC_GET_CLAIM_AMOUNT`).\n - This calculated reward amount is transferred from the application's vault to the user's wallet.\n\n## Missions Entity\n### Purpose:\nDefines another type of task or submission, possibly related to X (Twitter) posts or other content.\n### Fields:\n- `status`: The current state of the mission (e.g., `pending`). Automatically set to `pending` when created.\n- `postUrl`: The URL of the X post or other content related to the mission.\n- `username`: The X username of the user who submitted the mission. Automatically set when created.\n- `ogSubmitter`: The user ID of the original submitter of the mission. Automatically set when created.\n### Permissions:\n- **View (list):** Anyone can see all missions.\n- **Create:** Only users who have connected their X (Twitter) account can create new missions.\n- **Update:** Only the application owner can update missions.\n- **Delete:** Only the application owner can delete missions.\n\n## XAccounts Entity\n### Purpose:\nStores information about connected X (Twitter) accounts.\n### Fields:\n- `name`: The display name of the X account.\n- `username`: The X username. Automatically set when created.\n- `likeCount`: Number of likes on the X account.\n- `twitterId`: The unique ID of the X account.\n- `mediaCount`: Number of media items posted.\n- `tweetCount`: Total number of tweets.\n- `listedCount`: Number of lists the account is on.\n- `walletAddress`: The wallet address associated with this X account. Automatically set to the user's wallet when created.\n- `followersCount`: Number of followers.\n- `followingCount`: Number of accounts followed.\n- `profileImageUrl`: URL of the profile picture.\n- `accountCreatedAt`: Date when the X account was created.\n### Permissions:\n- **View (list):** Anyone can see X account information.\n- **Create:** Anyone can create an X account record (likely happens automatically when a user connects their X account).\n- **Update:** Anyone can update X account information.\n- **Delete:** Only the application owner can delete X account records.\n\n## Key Behaviors:\n- **Job-based Content Creation:** Users can post jobs requiring specific clips, and other users can submit clips to fulfill these jobs.\n- **Escrow System for Bounties:** Funds for jobs are held in a secure vault upon job creation, ensuring creators are paid for approved work.\n- **Automated Tax Collection:** A portion of job funds (taxes) can be automatically transferred from the vault to the app owner.\n- **Claiming Rewards:** Creators can claim their bounty for approved clips, with funds transferred from the vault to their wallet.\n- **X (Twitter) Integration:** Many actions (creating jobs, submitting clips, creating missions) require users to be connected via their X account, and X account details are tracked.\n- **Role-Based Access:** The application owner has full control (delete jobs, clips, missions), while job creators can update their own jobs, and clip submitters can update their clips under specific conditions.","messageId",["B","201627"],[282,287,292,297,302],{"_14":283,"_37":284,"_39":285,"_20":88,"_89":286,"_91":157},["B","81773"],["D",1760887705263],["D",1760887705263],"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}",{"_14":288,"_37":289,"_39":290,"_20":102,"_89":291,"_91":157},["B","81774"],["D",1760887705267],["D",1760887705267],"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":293,"_37":294,"_39":295,"_20":108,"_89":296,"_91":157},["B","81775"],["D",1760887705268],["D",1760887705268],"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":298,"_37":299,"_39":300,"_20":120,"_89":301,"_91":157},["B","81776"],["D",1760887705269],["D",1760887705269],"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":303,"_37":304,"_39":305,"_20":126,"_89":306,"_91":157},["B","81777"],["D",1760887705270],["D",1760887705270],"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}","isDraft",[],"isLordOfDev","analytics",[312,316,318,320,322,324,326,328,330,332,334,336,338,340,342,344,346,348,350,352,353,355,356,358,360,361,363,364,366],{"_313":314,"_315":62},"day","2025-10-28","runCount",{"_313":317,"_315":62},"2025-10-29",{"_313":319,"_315":62},"2025-10-30",{"_313":321,"_315":62},"2025-10-31",{"_313":323,"_315":62},"2025-11-01",{"_313":325,"_315":62},"2025-11-02",{"_313":327,"_315":62},"2025-11-03",{"_313":329,"_315":62},"2025-11-04",{"_313":331,"_315":62},"2025-11-05",{"_313":333,"_315":62},"2025-11-06",{"_313":335,"_315":62},"2025-11-07",{"_313":337,"_315":62},"2025-11-08",{"_313":339,"_315":62},"2025-11-09",{"_313":341,"_315":62},"2025-11-10",{"_313":314,"_315":343},75,{"_313":317,"_315":345},32,{"_313":319,"_315":347},30,{"_313":321,"_315":349},37,{"_313":323,"_315":351},20,{"_313":325,"_315":351},{"_313":327,"_315":354},7,{"_313":329,"_315":354},{"_313":331,"_315":357},5,{"_313":333,"_315":359},13,{"_313":335,"_315":64},{"_313":337,"_315":362},29,{"_313":339,"_315":362},{"_313":341,"_315":365},31,{"_313":367,"_315":44},"2025-11-11","https://cdn.dev.fun/og/image/32ce8f32b6916c169a9e/6d9d364b.webp","isDevbase","project",{"_14":19,"_372":373,"_20":374,"_375":376,"_22":377},"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","commitDetail","livestream","actionData","errors"]