Implement FCFS (Single Claim) Bounty Flow

[0xdevcollins]

Feature: Implement FCFS (Single Claim) Bounty Flow

Overview

The documentation describes 4 bounty claiming models, but the frontend only partially implements the Application model. The FCFS (First-Come-First-Served) / Single Claim model — where the first contributor to click "Claim" gets exclusive rights — is completely missing from the UI.

This maps directly to the claim_bounty() and approve_fcfs() methods on the Bounty Registry smart contract.

Depends on: #139 (TypeScript contract bindings)

---

Goals

• Allow contributors to instantly claim FCFS bounties with one click
• Spend 1 Spark Credit on claim (via Reputation Registry contract)
• Lock bounty to the claiming contributor's wallet
• Show "Already Claimed" state to other users
• Enable bounty creator to approve completed FCFS work

---

Contract Methods Used

BountyRegistry.claim_bounty(contributor: Address, bounty_id: u64)
  → Spends 1 SparkCredit from Reputation Registry
  → Locks escrow pool and defines release slot

BountyRegistry.approve_fcfs(creator: Address, bounty_id: u64, points: u32)
  → Releases escrow to contributor
  → Awards 1 credit + reputation points

---

Implementation Details

1. FCFS Claim Button

Modify: app/bounty/[bountyId]/page.tsx

• Show "Claim Bounty" button for FCFS-type bounties with status Open
• On click:
  • Check user has ≥1 Spark Credit (read get_credits())
  • Build unsigned claim_bounty transaction
  • Prompt passkey signing
  • Submit signed transaction
  • Optimistically update UI to "Claimed" state
• Show "Already Claimed by @user" when bounty is InProgress

2. FCFS Approval Flow

Modify: app/bounty/[bountyId]/page.tsx

• For bounty creator, when bounty is InReview:
  • Show submission details
  • "Approve & Release Payment" button
  • Calls approve_fcfs(creator, bounty_id, points)
  • Triggers escrow release

3. Anti-Squatting Display

• Show countdown timer for auto-release (7 days no milestone, 3 days no response)
• Show abandonment warning to claimant
• Creator override: "Unclaim" button with justification

4. Create Hook

Create: hooks/use-claim-bounty.ts

• Wraps claim_bounty contract call
• Handles transaction building, signing, submission
• Invalidates bounty query cache on success

---

Files Affected

Modified

• app/bounty/[bountyId]/page.tsx
• components/bounty/bounty-card.tsx (show "Claimed" badge)

Created

• hooks/use-claim-bounty.ts
• components/bounty/fcfs-claim-button.tsx
• components/bounty/fcfs-approval-panel.tsx

---

Acceptance Criteria

• FCFS bounties show "Claim" button for eligible contributors
• Claiming spends 1 Spark Credit and locks bounty
• Other users see "Already Claimed" state
• Creator can approve FCFS work and release payment
• Auto-release timers displayed for anti-squatting
• Optimistic UI updates on claim/approve

[linear]

BOU-150

[coderabbitai]

🔗 Related PRs

#54 - feat-add claiming model support [merged]
#55 - feat-Implement Bounty Status Logic & Anti-Squatting [merged]
#60 - feat: Implement Model-Specific Claim/Apply/Join Actions [merged]
#88 - feat: Implement bounties detail page [merged]
#111 - Feat: implementation logic for single claim model [merged]

---

📝 Issue Planner

_{Check the box below or use the @coderabbitai plan command to generate an implementation plan and prompts that you can use with your favorite coding assistant.}

• Create Plan

---

🧪 Issue enrichment is currently in open beta.

You can configure auto-planning by selecting labels in the issue_enrichment configuration.

To disable automatic issue enrichment, add the following to your .coderabbit.yaml:

issue_enrichment:
  auto_enrich:
    enabled: false

💬 Have feedback or questions? Drop into our discord!

[Josetic224]

@Josetic224 has applied to work on this issue as part of the Stellar Wave Program's 3rd wave.

Hi , I’d like to pick this up. The FCFS model needs to feel fast, so I’ll focus on the Reputation Registry check and the Passkey integration to keep the "one-click" promise.

My Implementation Plan:

Reactive FCFS Hook: I’ll build use-claim-bounty.ts to pre-fetch the user's Spark Credits using get_credits(). This allows us to disable the "Claim" button immediately if they’re at zero, avoiding failed transaction fees.

Passkey Signature Flow: I’ll integrate the signing prompt for claim_bounty and approve_fcfs, ensuring the UI handles the "Waiting for Wallet" state gracefully without freezing the countdown timers.

Anti-Squatting Visuals: For the page.tsx modifications, I’ll add a high-visibility 7-day countdown. I’ll implement an "Abandonment Warning" that triggers when the auto-release window is 24 hours away to nudge the claimant.

Optimistic State Management: I'll use SWR/React Query cache invalidation so that the moment the claim_bounty transaction is submitted, the "Claim" button swaps to "Already Claimed" globally for that user session.

Creator Approval Panel: I’ll build the fcfs-approval-panel.tsx to explicitly handle the points parameter, giving the creator a simple slider to award reputation alongside the escrow release.

I can have the hooks and the primary claim button ready for review in 48 hours. Can you assign this to me?

ℹ️ Repo Maintainers: To accept this application, review their application or assign @Josetic224 to this issue.

[zhaog100]

Hi! I'd like to work on this bounty.

My Plan:

• Analyze the requirements
• Implement the solution
• Submit PR within 24-48 hours

Payment Address:

• Platform: OKX
• Token: USDT (TRC20)
• Address: TGu4W5T6q4KvLAbmXmZSRpUBNRCxr2aFTP

Let's get this done! 🚀

[zhaog100]

/attempt

[zhaog100]

/attempt

[zhaog100]

Hi! I'd like to work on this bounty.

My Plan:

• Analyze the requirements
• Implement the solution
• Submit PR within 24-48 hours

Payment Address:

• Platform: OKX
• Token: USDT (TRC20)
• Address: TGu4W5T6q4KvLAbmXmZSRpUBNRCxr2aFTP

Let's get this done! 🚀

[wheval]

@wheval has applied to work on this issue as part of the Stellar Wave Program's 3rd wave.

Hello, i would love to work on this.

ETA: 4 hours

ℹ️ Repo Maintainers: To accept this application, review their application or assign @wheval to this issue.