Implement Single Claim Model Logic

[Benjtalkshow]

Implement Single Claim Model Logic in bounties details page (/bounty/[bountyId])

Add support for “Single Claim Model”.

What is Single Claim Model?

• Only ONE contributor can claim the bounty.
• After claim:
  • Status becomes claimed
  • Others cannot claim
  • Page shows “Claimed by @username”

Expected Data Types

type ClaimInfo = {
  claimedBy?: {
    userId: string
    username: string
    avatarUrl?: string
  }
  claimedAt?: string
}

UX Requirements

• Show claimant profile

• Disable claim button

• Display “Already Claimed” state

Acceptance Criteria

• Cannot claim if already claimed

• Claimed user displayed properly

[linear]

BOU-82

[Sam-Rytech]

@Sam-Rytech has applied to work on this issue as part of the Stellar Wave Program's 2nd wave.

I would like to work on this issue.

I have experience building claim-based workflows in React and handling conditional UI states based on complex data objects. I understand the importance of clear visual feedback to prevent user frustration when a bounty is no longer available.

ETA: 6hrs

Thank you for considering

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

[precious-akpan]

@precious-akpan has applied to work on this issue as part of the Stellar Wave Program's 2nd wave.

Hi boundlessfi team,

I’m interested in taking on the implementation of the Single Claim Model for the bounty details page. I’ve reviewed the requirements and am ready to implement the logic to ensure a "one contributor per bounty" workflow.

My Technical Approach:
State Management: I will integrate the ClaimInfo type into the bounty details fetch, ensuring the frontend correctly identifies if claimedBy is populated.

UI/UX Updates:

Implement a conditional check to disable the "Claim" button immediately if the bounty status is "claimed."

Add a Claimant Profile component to display the @username and avatar of the successful contributor.

Apply a clear "Already Claimed" visual state for other users to prevent confusion.

Validation: Ensure that the claim action is blocked on the client side if the claim state is active, complementing the backend logic.

Why me?
I have experience working with TypeScript and React-based bounty/financial platforms. I prioritize clean, type-safe code and ensure that the UX remains intuitive even when a user arrives "late" to a claimed bounty.

I can have this implemented and tested within 24 hours. Looking forward to contributing!

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

[Amas-01]

@Amas-01 has applied to work on this issue as part of the Stellar Wave Program's 2nd wave.

Hi Maintainer , I'm interested in working on this project, please grant my request
Thank you.

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

[Ejirowebfi]

@Ejirowebfi has applied to work on this issue as part of the Stellar Wave Program's 2nd wave.

Why I want to work on this

I’m interested in this issue because it involves high-stakes conditional rendering and state integrity. In a bounty system, the "First-to-Claim" logic must be handled with precision to ensure a fair experience. I am excited to:

Enforce Strict Logic: Ensure that once the ClaimInfo is populated, the UI reacts globally, preventing any "race conditions" where two users might try to click the button simultaneously.

Enhance Contributor Visibility: I want to make the "Claimed by" state feel like a badge of honor, properly showcasing the claimant’s profile and avatar to give credit where it's due.

Refine UX States: I prioritize clear communication, ensuring that the "Already Claimed" state is visually distinct so other contributors don't spend time on a task that is no longer available.

Relevant Experience

Conditional UI Architecture: I have extensive experience building React interfaces that rely on complex status flags (e.g., isClaimed, isPending, isCompleted).

TypeScript Mastery: I am comfortable working with specific types like ClaimInfo, ensuring that optional chaining and null-checks are used to prevent runtime errors when a bounty hasn't been claimed yet.

Access Control & Button Logic: I’ve implemented similar "Single-Action" patterns in e-commerce and booking platforms where an item must be "locked" once an action is taken.

Component Composition: I’m skilled at creating clean, reusable "Claimant Profile" components that integrate seamlessly into existing detail pages.

Summary

"I am a Frontend Developer with a strong focus on state-driven UX. I specialize in implementing strict business logic in React/Next.js, ensuring that mutually exclusive states—like a 'Single Claim'—are handled gracefully. I can ensure that the ClaimedInfo data is correctly displayed and that the claim button's lifecycle is perfectly managed to prevent duplicate claims and provide clear feedback to the community."

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

[Osuochasam]

@Osuochasam has applied to work on this issue as part of the Stellar Wave Program's 2nd wave.

Assign this issue to me and i'll get it done as fast as possible

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

[teethaking]

@teethaking has applied to work on this issue as part of the Stellar Wave Program's 2nd wave.

I am interested in implementing the Single Claim Model because it is a fundamental state-management challenge that directly affects platform fairness. Ensuring that a bounty correctly transitions to a claimed status and immediately reflects that state to all other users is critical for a smooth contributor experience. I enjoy building high-integrity systems where backend constraints and frontend UI states are perfectly synchronized.

Relevant Experience:

State Machine Implementation: Experienced in managing resource lifecycles (e.g., Open → Claimed → Completed) and preventing invalid state transitions.

Real-time UI Updates: Proficient in using tools like React Query or SWR to handle "stale-while-revalidate" patterns, ensuring users don't see an "Available" button on a bounty that was just claimed.

Conditional Rendering: Skilled at designing clean "Disabled" and "Occupied" UI states that provide clear feedback (e.g., displaying the claimant’s profile) rather than just hiding elements.

Concurrency Handling: Understands the importance of backend "optimistic locking" or atomic updates to ensure that even if two users click "Claim" at the same millisecond, only one succeeds.

Implementation Plan
I will ensure the following requirements are met:

Data Integrity: Use the ClaimInfo type to accurately map the claimant’s userId and username to the bounty details page.

Visual Feedback: Replace the active "Claim" button with a "Claimed by @username" badge, including the user's avatar for transparency.

State Guarding: Implement a frontend check that disables the claim action if claimedBy is present, paired with a backend check to return an error if a second claim is attempted.

UX Polish: Add a "Claimed At" timestamp to provide a clear audit trail for other contributors.

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

[Uyoxy]

@Uyoxy has applied to work on this issue as part of the Stellar Wave Program's 2nd wave.

Hello maintainers,

I’d like to work on #79 – Implement Single Claim Model Logic for the bounty details page.

I have experience implementing frontend logic and state handling for feature constraints like single-claim flows. I’ll ensure only one contributor can claim a bounty, disable the claim button after claim, and display the claimant profile with a clear “Already Claimed” state, following the required data structure.

I can start immediately and will follow the project standards.

Thank you!

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

[Lynndabel]

@Lynndabel has applied to work on this issue as part of the Stellar Wave Program's 2nd wave.

Can you assign me this issue please?

I’m a blockchain developer with a strong focus on Soroban smart contracts and frontend development, building user-friendly interfaces that interact seamlessly with decentralized systems on the Stellar ecosystem.

I work at the intersection of smart contract logic and frontend experience, translating on-chain functionality into intuitive, real-world applications. My experience spans writing and testing Soroban contracts, integrating them with modern frontend frameworks, and ensuring reliability, security, and clarity in decentralized applications.

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

[Franklivania]

@Franklivania has applied to work on this issue as part of the Stellar Wave Program's 2nd wave.

Hi, I am Franklin. I have implemented exclusive-claim logic in bounty and task-based systems where state transitions are enforced both at API and UI level to prevent race conditions. I’ve handled optimistic updates, disabled actions post-claim, and ensured consistent rendering of claimant metadata.

For this issue, I would:

• Extend the bounty detail page to consume and render ClaimInfo.
• Enforce single-claim restriction at API level and reflect status changes in UI.
• Disable the claim button once claimed and display “Claimed by @username” with profile info.
• Handle edge cases where concurrent claims occur.

ETA: 6–8 hours.

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

[drips-wave]

This issue has been added to the Stellar Wave Program and is worth 100 Points.

🧑‍💻 Interested in contributing? Apply to work on this issue on Drips Wave, earn points, and receive rewards.

Warning

Only applications submitted via the apply link above will be considered. Please do not apply by commenting on the issue or opening a PR directly.

🤠 Repo maintainers: You can manage this issue's Points and Complexity on your Maintainer Dashboard here. Please keep an eye on applications and respond quickly 💙

ℹ️ Learn more about Drips Wave