[FE-12] Build Developers settings — API keys and webhooks management UI

[yusuftomilola]

Overview

API keys ([BE-24]) and webhooks ([BE-25]) need their admin UI — the "Developers" section of settings that every integratable platform has.

What to Build

A /settings/developers section (tab within the existing settings page or its own route):

• API keys panel: list (name, prefix, last used, status); create modal (name, optional expiry, scopes) showing the full key once with copy-to-clipboard and an explicit "you won't see this again" notice; revoke with confirm-dialog
• Webhooks panel: list subscriptions (URL, events, active, recent delivery status); create/edit modal (URL, event multi-select, generated signing secret shown once); enable/disable toggle; "send test" button surfacing the response code; per-subscription recent-deliveries drawer (timestamp, event, status, attempt)
• ADMIN-only section

Conventions to Follow

• API calls: add a typed client in frontend/lib/api/ (see frontend/lib/api/assets.ts for the pattern) — never call axios directly from components
• Data fetching: TanStack Query hooks in frontend/lib/query/hooks/ with keys registered in frontend/lib/query/keys.ts
• UI: reuse frontend/components/ui/ (button, input, confirm-dialog, toast) and the badge/modal patterns in frontend/components/assets/
• Route goes under frontend/app/(dashboard)/ and gets a sidebar entry in frontend/components/layout/sidebar.tsx
• Forms: React Hook Form + Zod resolver, matching the existing create-asset modal

References

• Blocked by [BE-24], [BE-25]
• Existing settings page to extend: frontend/app/(dashboard)/settings/page.tsx

Acceptance Criteria

• Key shown exactly once with working copy button; list shows prefix only afterwards
• Webhook CRUD + test delivery round-trip works
• Delivery history readable per subscription
• Section hidden from non-admins

[chadomuhammad80-arch]

@chadomuhammad80-arch has applied to work on this issue as part of the Stellar Wave Program's 8th wave.

please I will love to work on this task let me do it. Thank you very much

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

[BashMan11]

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

I'd like to work on this.

API keys ([BE-24]) and webhooks ([BE-25]) need their admin UI — the "Developers" section of settings that every integratable platform has.

I'll make sure each of these is covered:

• Key shown exactly once with working copy button; list shows prefix only afterwards
• Webhook CRUD + test delivery round-trip works
• Delivery history readable per subscription
• Section hidden from non-admins

I'll keep you posted on progress as I go.

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

[drips-wave]

Congratulations, @BashMan11! 🎉 Your application was accepted by the repo's maintainers, and the issue is due on August 31, 2026.

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

[drips-wave]

This issue has been completed by @BashMan11 as part of the Stellar Wave Program's 8th Wave 🥳

😎 @BashMan11: You earned 200 Points for completing this issue! After the current Wave ends, you'll be eligible for a percentage of the Wave's reward pool based on the percentage of total points you've earned. Learn more here. You can also Leave a review to share your experience working on this issue.

🧑‍💻 Repo maintainers: How'd the contributor do? Leave a review to share your experience working with them.

[grantfox-oss]

🎉 This issue has been marked as completed on GrantFox!

@BashMan11's PR #1366 was approved and merged by @yusuftomilola.

🏆 @BashMan11: You earned 35 FoxPoints for this contribution! Your current tier: Explorer (710 total points). Track your full progress on GrantFox.

👏 Great work, @BashMan11! Keep contributing to DistinctCodes.