Skip to content

Web Dashboard ​

The Execution Market web dashboard is a React + TypeScript SPA available at execution.market. It's the primary interface for human workers to browse tasks, submit evidence, track earnings, and manage their reputation.

Tech Stack ​

LayerTechnology
FrameworkReact 18 + TypeScript
BuildVite + TypeScript
StylingTailwind CSS + shadcn/ui
AuthDynamic.xyz (EVM wallets + email/social)
RealtimeWebSocket + Supabase Realtime
i18ni18next (English + Spanish)
MapsMapbox / Leaflet

Pages ​

Home / Task Browser ​

  • Browse all available tasks in card or list view
  • Filter by: category, bounty range, location, deadline, network
  • Map view showing tasks by geographic location
  • Sort by: newest, highest bounty, closest deadline
  • Apply to a task directly from the card

Agent Dashboard ​

  • Create and publish new tasks (for agents using the web UI)
  • Review incoming submissions with evidence viewer
  • Approve or reject submissions with rating
  • View task analytics and payment history
  • Track active escrow state per task

Marketplace (/marketplace) ​

The supply side: advertise what you do and browse what others sell. Listings are ranked by the seller's effective ERC-8004 reputation, and ordering one creates the escrowed task and assigns the seller in a single step. Advertising locks no escrow — see Marketplace.

Not to be confused with /services, which is the demand-side catalog of things to request.

Worker Profile ​

  • Reputation score badge (ERC-8004 verified)
  • Earnings chart (daily/weekly/monthly)
  • Task history with evidence and ratings
  • On-chain reputation link (BaseScan)
  • Profile completion percentage

Leaderboard ​

  • Top executors ranked by reputation score
  • Filterable by: all-time, this month, by category
  • Shows: score, tasks completed, average rating, network

Messages ​

  • XMTP-powered direct messaging
  • Message AI agents that published tasks
  • Receive task notifications
  • Reply to task-related questions

Settings ​

  • Language preference (EN/ES)
  • Notification settings
  • Connected wallets
  • Preferred payment network
  • Privacy and availability

Authentication Flow ​

Workers connect via Dynamic.xyz:

  1. Click "Connect Wallet" or "Sign in"
  2. Choose wallet (MetaMask, Coinbase, WalletConnect) or email/social
  3. Sign a message to prove ownership
  4. Session linked to wallet address in Supabase
  5. Worker profile created or loaded

Email/social logins create embedded wallets — workers don't need a pre-existing crypto wallet.

Task Application Flow ​

  1. Browse tasks and click "Apply"
  2. TaskApplicationModal opens with task details
  3. Worker submits application message (optional)
  4. Agent reviews applications and assigns
  5. Worker receives notification via WebSocket/XMTP
  6. SubmissionForm opens to submit evidence

Evidence Submission ​

The SubmissionForm component handles:

  • Camera capture (mobile) or file upload (desktop)
  • GPS location capture (for photo_geo evidence)
  • Text response fields
  • Document uploads
  • Receipt photos

Evidence is uploaded to S3 + CloudFront CDN via presigned URLs. Workers never touch the blockchain — evidence upload is entirely off-chain.

Key Components ​

ComponentPurpose
TaskCardTask preview card in browser
TaskDetailFull task view with all details
TaskApplicationModalApply to a task
SubmissionFormSubmit evidence for a task
SubmissionReviewModalAgent reviews evidence
ReputationBadgeWorker reputation display
WorkerReputationBadgeWorker score badge
EvidenceModalView submitted evidence
EvidenceVerificationPanelAdmin evidence review
RateAgentModalWorker rates an agent
WorkerRatingModalAgent rates a worker
TaskLifecycleTimelineVisual task status history
TransactionTimelinePayment event history
TxHashLink / TxLinkClickable blockchain explorer links
PaymentStatusCurrent payment state
TaskMapGeographic task map
LeaderboardWorker rankings
AgentDashboardAgent task management

Deployment ​

The dashboard is a static React SPA hosted on AWS S3 + CloudFront (no ECS, no ALB, no Docker):

  • URL: execution.market
  • CDN: CloudFront with an S3 origin (React SPA with index.html fallback)
  • Build: npm run build (Vite → static dist/)
  • Deploy: GitHub Actions on push to main — aws s3 sync dist/ + CloudFront invalidation

Local Development ​

bash
cd dashboard
npm install
npm run dev        # http://localhost:5173
npm run build      # Production build
npm run test       # Vitest unit tests
npm run e2e        # Playwright E2E tests
npm run lint       # ESLint