Blockworks

Prompt for AI/Code Assistants or Developers:

Build a full-stack Web3 freelance escrow marketplace called Block Work with the tagline "The onchain fiverr."

It is a Next.js 14 (App Router) application using:

• PostgreSQL database with Prisma as the ORM
• Smart contract integration on BNB Smart Chain (BSC Mainnet, Chain ID 56)
• Dual-chain payment flow: BSC (on-chain escrow) + Solana (manual USDC payment with admin review)
• Telegram notification bot for new job alerts

Design & UI Requirements

• Premium iOS-inspired dark theme with frosted glass cards (backdrop-blur, translucent borders, layered shadows, generous whitespace, smooth cubic-bezier animations).
• Color palette: slate-950 background, cyan-to-purple gradients for headings and buttons, translucent white borders (border-white/10), pill-shaped badges.
• Typography: Inter font family. Hero text uses bg-gradient-to-r from-cyan-400 to-purple-600 bg-clip-text text-transparent with animated gradient.
• Layout:
  • Sticky frosted-glass header with logo, hamburger menu (sheet/drawer navigation on all screen sizes — no visible desktop nav links), chain selector dropdown, and wallet button.
  • Fully mobile responsive.
• Use shadcn/ui components exclusively: Cards, Dialogs, Sheets, Tabs, Dropdowns, Badges, Alerts, AlertDialogs, Select, Input, Textarea, Button, Skeleton loaders.

Blockchain Integration (BNB Smart Chain)

• Smart Contract Address: 0x6984D72FC7B0d5160A4616b75A93937d5C3db2C9 on BSC Mainnet.
• USDT Token: 0x55d398326f99059fF775485246999027B3197955.
• Contract functions to implement:
  • createJob(freelancer, token, amount, unlockTime) → returns jobId
  • approveJob(jobId)
  • claim(jobId)
  • jobs(jobId) → returns (client, freelancer, token, amount, unlockTime, approved, claimed)
  • jobCount() → total jobs
• Events: JobCreated, JobApproved, JobClaimed.

Wallet Integration:

• Use wagmi v2 + viem + @tanstack/react-query.
• Support MetaMask (injected) and WalletConnect (include a WalletConnect projectId).
• Wrap the entire app in WagmiProvider + QueryClientProvider.
• Wallet Button:
  • Disconnected → shows "Connect Wallet" (opens dialog with connector options).
  • Connected → shows truncated address with dropdown (Copy address, View on BscScan, Disconnect).
  • Auto-detect wrong network and prompt user to switch to BSC.

Chain Selector (Dual-Chain: BSC + Solana)

• Dropdown in header with two options: 🟡 BSC and 🟣 Solana.
• Persist selection in localStorage.
• BSC flow: Full on-chain escrow (USDT approval → createJob → approve/claim via contract).
• Solana flow:
  • Wallet button disappears.
  • Users send USDC to fixed Solana address: 9phCwKW1pf7K2TkccXPrN1uBp3pFjjprw3Fpqh34s63t.
  • They then submit transaction hash + their Solana address + freelancer’s Solana address.
  • Job created with status AWAITING_APPROVAL for admin review.
  • Show clear payment instructions with copy-to-clipboard button for the address.
  • Currency label changes from USDT to USDC when Solana is selected.

Pages & Features

1. Homepage (/)

• Hero section with animated gradient title "The onchain fiverr" and subtitle.
• Frosted-glass search bar + category filter dropdown.
• Three tabs: Open Jobs (status=OPEN), Active Jobs (not OPEN, not COMPLETED), My Jobs (connected wallet is client or freelancer).
• Responsive 3-column grid of job cards showing: title, category badge, status badge (color-coded), amount, truncated client address, time ago, and native share button (with clipboard fallback).

2. Create Job (/create)

• BSC mode: Form with Title, Description, Category (dropdown: Web Dev, Mobile Dev, Blockchain Dev, UI/UX Design, Graphic Design, Content Writing, Digital Marketing, Video Editing, Data Entry, Virtual Assistant, Other), Budget (USDT). Requires wallet connection.
• Solana mode: Same form + additional fields: Payment instructions panel, Your Solana Address, Transaction Hash (with Solscan link), Freelancer Solana Address (base58 validation). Button text becomes "Submit for Approval".
• Creates job in DB with appropriate status and chain.
• "What happens next?" info box that adapts per chain.

3. Job Details (/job/[id])

• Fetches job from DB. Displays title, description, category, status, amount, client/freelancer addresses (with BscScan/Solscan links), time ago.
• Tabbed interface: Details | Chat | Review | Dispute.
• Chat tab: Real-time messaging between client and freelancer. First message from non-client on OPEN job auto-assigns freelancer. Messages include read/unread tracking.
• Start Job section (visible only to client on OPEN jobs): Input for freelancer wallet address + escrow amount + unlock days → triggers USDT approval → createJob contract call → updates DB with on-chain jobId and status ACTIVE.
• Approve/Claim buttons call respective contract functions and update DB.
• Review tab: Star rating (1-5) + comment after completion.
• Dispute tab: Submit dispute reason.
• Share button (native share + clipboard fallback).

4. Dashboard (/dashboard)

• Connected user’s jobs split into Active and Completed tabs. Clickable cards.

5. Inbox (/inbox)

• List of all conversations for the connected wallet. Shows last message preview, unread count, other party address.

Database (PostgreSQL + Prisma)

Models:

• JobMetadata: id, jobId (nullable, unique — set after on-chain creation), status (enum), title, description, category, amount (string), client, freelancer (nullable), chain (BSC/SOLANA enum, default BSC), txHash (nullable — Solana), timestamps. Indexed on status, category, client, freelancer, chain, createdAt.
• Message: id, jobMetadataId (FK), sender, recipient, content (text), read (bool), createdAt. Indexed on jobMetadataId, sender, recipient.
• Dispute: id, jobMetadataId (unique FK), initiator, reason, status (OPEN/RESOLVED/REJECTED), resolution, resolvedBy, timestamps.
• Review: id, jobMetadataId (unique FK), reviewer, reviewee, rating (1-5), comment, createdAt.
• Notification: id, recipient, type (enum: JOB_CREATED, JOB_APPROVED, JOB_CLAIMED, MESSAGE_RECEIVED, DISPUTE_OPENED, DISPUTE_RESOLVED, REVIEW_RECEIVED), jobId, content, read, createdAt.
• TelegramSubscription: id, chatId (unique), username, active, timestamps.

Job Status Flow:

• BSC: OPEN → ACTIVE → AWAITING_APPROVAL → APPROVED → COMPLETED (or DISPUTED)
• Solana: AWAITING_APPROVAL (admin verifies tx) → APPROVED → COMPLETED

API Routes (App Router)

• GET /api/jobs — list all jobs
• GET /api/jobs/[id] — single job + reviews + dispute
• POST /api/jobs/create — create job (handles BSC + Solana, triggers Telegram)
• POST /api/jobs/start — update with on-chain jobId after contract call
• POST /api/jobs/complete — mark job completed
• GET/POST /api/messages — fetch/send messages (auto-assign freelancer on first message)
• POST /api/messages/read — mark messages read
• GET/POST /api/disputes — fetch/create disputes
• POST /api/disputes/resolve — resolve dispute
• POST /api/reviews — submit review
• GET /api/notifications — fetch user notifications
• POST /api/notifications/read — mark notifications read
• GET /api/inbox — conversation list for wallet
• POST /api/telegram/webhook — Telegram bot webhook handler
• POST /api/telegram/setup — one-time webhook registration

Telegram Bot Integration

• Bot sends HTML-formatted alerts to subscribers when new jobs are posted.
• Commands: /start (subscribe), /stop (unsubscribe), /help.
• Messages include: job title, category, budget, description preview, direct link to job.
• Webhook-based (no polling). Setup endpoint at /api/telegram/setup.
• Environment variable: TELEGRAM_BOT_TOKEN.

Notifications System

• In-app notification bell in header with unread count badge.
• Auto-refreshes periodically.
• Notifications created for: job creation, approval, claim, new messages, disputes, reviews.
• Ability to mark as read individually or all at once.

Key Technical Requirements

• No traditional authentication — wallet address is the user identity. All queries filter by connected wallet address.
• SSR-safe: All wallet/blockchain logic must be in client components. Use useEffect for browser APIs. Prevent hydration mismatches.
• ConnectWalletPrompt component: Modal that appears for any wallet-required action when disconnected. Shows MetaMask + WalletConnect options. Auto-closes on successful connection.
• Custom contract write hooks for approveToken, createJob, approveJob, claimJob with robust jobId extraction from transaction receipts (use 3 fallback methods: event logs, direct log decoding, jobCount() read).
• Error handling: Use react-hot-toast for all user actions + console logging.
• SEO: Full metadata, OpenGraph image (1200×630), Twitter cards, robots.txt. Target domain: blockwork.one.

Required Dependencies

wagmi, viem, @tanstack/react-query, @prisma/client, next-themes, react-hot-toast, lucide-react, and all shadcn/ui components listed above.

Build the complete application exactly as specified, following all design, blockchain, database, API, and notification rules. Make it production-ready, mobile-first, and fully functional on both BSC and Solana chains.