Implement Spark Credits UI

[0xdevcollins]

Feature: Implement Spark Credits UI

Overview

Spark Credits are application credits that prevent spam while ensuring quality contributors always have opportunities. Each FCFS bounty claim costs 1 Spark Credit. The Reputation Registry contract manages credits, but the frontend has no UI for viewing or spending them.

Depends on: #139 (TypeScript contract bindings)

---

Goals

• Display user's current Spark Credit balance
• Show credit cost before claiming bounties
• Warn when credits are low
• Display credit earning/spending history

---

Contract Methods Used

ReputationRegistry.get_credits(user: Address) → u64
ReputationRegistry.spend_credit(caller, user) → bool
  (called automatically by claim_bounty)
ReputationRegistry.award_credits(caller, user, amount)
  (called automatically on bounty completion)

---

Implementation Details

1. Credit Balance Widget

Create: components/reputation/credit-balance.tsx

• Show current Spark Credit count in navbar or profile sidebar
• Icon + number (e.g., ⚡ 5)
• Tooltip explaining what credits are for

2. Credit Gate on Claim

Modify: hooks/use-claim-bounty.ts (from #140)

• Before claim: check get_credits(user) ≥ 1
• If insufficient: show "Not enough Spark Credits" with guidance
• Show credit cost in claim confirmation dialog

3. Credit History

Create: components/reputation/credit-history.tsx

• List of credit events: earned (bounty completion) and spent (claims)
• Date, amount, source bounty
• Running balance

4. Earning Explainer

Create: components/reputation/credit-explainer.tsx

• How to earn credits (complete bounties, win competitions)
• Credit costs per action
• Tips for managing credits

---

Files Affected

Created

• hooks/use-spark-credits.ts
• components/reputation/credit-balance.tsx
• components/reputation/credit-history.tsx
• components/reputation/credit-explainer.tsx

Modified

• components/global-navbar.tsx (add credit balance)
• app/profile/[username]/page.tsx (add credit section)

---

Acceptance Criteria

• Credit balance displayed in navbar
• Claim flow checks credit balance before proceeding
• Insufficient credits show clear error with guidance
• Credit history shows earn/spend events
• Credits update after claiming or completing bounties

[linear]

BOU-154

[coderabbitai]

🔗 Related PRs

#17 - feat: Built BountyCard component with shadcn composition [merged]
#67 - feat: Implement a comprehensive reputation system [merged]
#88 - feat: Implement bounties detail page [merged]
#110 - feat: Implement Earnings & Payout Tracking [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!

[zhaog100]

/attempt

[zhaog100]

/attempt

[Oluwatos94]

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

Hi, I'm Tosin. A full stack developer with years of experience implementing backend technology. I would like to resolve this issue. I've gone through the description and I full understand the assignment. I'm confident in delivering requirement for the issue .

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

[legend4tech]

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

Hello, I’m Legend4Tech, a full-stack developer and top open-source contributor, previously a fellow at OnlyDust. I’m interested in contributing to this issue and would be happy to help implement a solution, fix bugs, or improve features as needed. I’m ready to follow the project’s workflow and coding standards to ensure smooth collaboration.

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

[Ekene001]

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

Hi, Can i work on this task?. I’ve worked on several reputation and credit-based systems for blockchain apps, so I know how to handle real-time balance updates and contract gates without slowing down the user experience and can have the Spark Credits UI fully integrated in under 24 hours.

My approach:

I’ll build the use-spark-credits.ts hook to pull the balance directly from the Reputation Registry and implement the credit balance widget for the navbar. I’ll also update the bounty claim hook to check for sufficient credits before a transaction starts, ensuring users get a clear warning if their balance is low. I’ll pay close attention to the credit history layout to make sure earning and spending events are easy to track, and I’ll provide a screen recording/screenshot of the mobile and desktop view to verify the UI and the claim gate logic.

Please assign this to me.

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

[drips-wave]

Congratulations, @Oluwatos94! 🎉 Your application was accepted by the repo's maintainers, and the issue is due on March 30, 2026.

🧑‍💻 @Oluwatos94: Please resolve the issue such that the repo's maintainers have enough time to review your contribution before the due date. You'll earn Points for completing the issue on-time, which will make you eligible for a share of the Stellar Wave Program's reward pool.

Warning

When opening a PR, please link it to this issue to ensure it gets tracked accurately. Points are awarded when this issue is marked as completed by the maintainer.

🤠 Repo maintainers: Please keep an eye on the contributor's progress and review their work before the due date. You can manage this issue, including adjusting its complexity and points, here.

🌊 Happy Wave 🌊