Feature: Notification Center

[Benjtalkshow]

Overview

The codebase has hooks/use-notifications.ts and live GraphQL subscriptions in hooks/use-bounty-subscription.ts that already collect events for bountyCreated, bountyUpdated, application reviews, and submission status changes. But there is no surfaced UI; events are stored in localStorage and never shown to the user. Build a notification center so users can actually see and act on these events.

---

Goals

• Provide a notification bell in the global navbar with unread count badge
• Open a dropdown/panel listing recent notifications
• Allow mark-as-read, mark-all-as-read, and clear-all
• Link each notification to the relevant resource (bounty, dispute, profile)
• Persist read state in localStorage (already partially set up)

---

Implementation Details

1. Notification bell component

Create: components/notifications/notification-bell.tsx

• Shows a bell icon with an unread count badge in the navbar
• Click opens a Popover or Sheet with the notification list
• Connects to useNotifications()

2. Notification list and item

Create: components/notifications/notification-list.tsx, components/notifications/notification-item.tsx

• Item shows icon (per notification type), title, timestamp, and link
• Unread items have a visual marker
• Click marks as read and navigates to the linked resource

3. Wire into navbar

Modify: components/global-navbar.tsx

• Mount NotificationBell next to the wallet button (only when authenticated)

4. Notification types to support

• bounty-updated → link to /bounty/[id]
• new-application → link to /bounty/[id] (creator only)
• submission-reviewed → link to /bounty/[id] (contributor only)
• dispute-raised → link to /dispute/[id] (creator and contributor)
• payment-received → link to /wallet

---

Files Affected

Created

• components/notifications/notification-bell.tsx
• components/notifications/notification-list.tsx
• components/notifications/notification-item.tsx

Modified

• components/global-navbar.tsx
• hooks/use-notifications.ts (extend to cover dispute and payment events)

---

Acceptance Criteria

• Bell icon visible in navbar with accurate unread count
• Clicking opens a panel listing recent notifications
• Each notification links to the relevant resource
• Mark-as-read and mark-all-as-read work and persist
• Notifications survive page reload
• Bell is keyboard-accessible (focusable, escape closes panel)

---

Additional Notes

• Keep the panel max height bounded with internal scroll
• Consider grouping by date (Today, Yesterday, Earlier)
• Subscription events should push into the same store consumed by the UI

[linear]

BOU-186

[coderabbitai]

⚠️ Possible Duplicate Issue(s)

• Real-time Activity Feed and In-App Notifications #131

🔗 Related PRs

#49 - feat: Introduce a global navigation bar with an integrated command palette for bounty search. [merged]
#90 - feat:implement sponsor review dashboard. [merged]
#111 - Feat: implementation logic for single claim model [merged]
#155 - feat: real-time notifications with GraphQL subscriptions [merged]
#161 - feat(bounty): add FCFS single-claim flow with claim/approve UI and cl… [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!

[snakefood3232]

I can see you're looking to create a notification center using the existing hooks for events like bountyCreated and bountyUpdated. I'd handle this by implementing a NotificationBell component that integrates with useNotifications() and surfaces a dropdown for detailed interaction. The components will support interactions like mark-as-read and link to relevant resources such as /bounty/[id] and /dispute/[id]. I can have a PR up in 2 days. I've built similar notification systems using TypeScript and React before, ensuring seamless real-time updates and user interactions.

[snakefood3232]

You need a notification center to surface events collected in hooks/use-notifications.ts and hooks/use-bounty-subscription.ts. I'd handle this by creating a notification bell component in the navbar that integrates with localStorage, displaying notifications through a popover or sheet, and allowing various actions like mark-as-read. I can have a PR ready in 2-3 days after reviewing your setup. I've built similar features in other React/Next.js projects, ensuring intuitive user interaction and performance.

[Spagero763]

@Spagero763 has applied to work on this issue as part of the Stellar Wave Program's 4th wave.

I'm a smart contract developer, i'd like to work on this issue.

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

[sweetesty]

@sweetesty has applied to work on this issue as part of the Stellar Wave Program's 4th wave.

Hey, I'd like to work on this! I can see the hooks and subscriptions are already in place, just missing the UI layer. I'll build the notification bell, list, and item components, wire them into the navbar, and hook everything into the existing useNotifications store with proper read state persistence. Can I be assigned?

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

[drips-wave]

Congratulations, @Spagero763! 🎉 Your application was accepted by the repo's maintainers, and the issue is due on April 29, 2026.

🧑‍💻 @Spagero763: 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 🌊