Integrate Queries with Bounty Components

[0xdevcollins]

Objective

Replace mock data with real API queries in bounty components using TanStack Query hooks.

Tasks

• Update app/page.tsx to use useBounties() hook
• Convert components/bounty/bounty-card.tsx to use real data
• Create components/bounty/bounty-list.tsx with query integration
• Add loading skeletons for query states
• Add error states with retry functionality
• Implement empty states for no results
• Add refetch on focus and reconnect

Implementation Details

• Remove all mock/hardcoded bounty data
• Add proper loading states (skeletons)
• Handle error states with toast notifications
• Show empty state when no bounties found
• Enable background refetching

Files to Modify

• app/page.tsx
• components/bounty/bounty-card.tsx
• components/bounty/bounty-list.tsx (new)

Files to Create

• components/bounty/bounty-skeleton.tsx
• components/bounty/bounty-error.tsx
• components/bounty/bounty-empty.tsx

Acceptance Criteria

• All components fetch real data from API
• Loading states show appropriate skeletons
• Errors display with retry options
• Empty states guide users appropriately
• Data automatically refetches on window focus

NOTE: Leave a guide on how to test with mock data and provide a screen record of your working implementation

[linear]

BOU-55

[drips-wave]

This issue has been added to the Stellar Wave Program and is worth 200 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

[coderabbitai]

📝 CodeRabbit Plan Mode

Generate an implementation plan and prompts that you can use with your favorite coding agent.

• Create Plan

Examples

• Example 1
• Example 2

---

🔗 Related PRs

#17 - feat: Built BountyCard component with shadcn composition [closed]
#19 - Implement Projects Discovery View (Projects tab) + build fixes (Tailwind v4 + UI typings) [merged]
#30 - feat: Implement React Query hooks for managing bounties [closed]

---

🧪 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!

[Dprof-in-tech]

@Dprof-in-tech has applied to work on this issue as part of the Stellar Wave Program's 1st wave.

Hello, please i would love to work on this issue

ℹ️ Repo Maintainers: To accept this application, review their application or assign @Dprof-in-tech to this issue.

[drips-wave]

Congratulations, @Dprof-in-tech! 🎉 Your application was accepted by the repo's maintainers, and the issue is due on January 31, 2026.

🧑‍💻 @Dprof-in-tech: 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 issued 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 🌊

[Dprof-in-tech]

Hello @0xdevcollins , thank you for assigning this issue. I have linked a PR to close this.