Developer API Keys Management Portal with Usage Analytics

[JamesEjembi]

Problem Statement

Developers integrating with VeriNode APIs need to create and manage API keys with scoped permissions, view usage analytics, and test endpoints. A developer portal must be built with API key CRUD, permission scopes, usage dashboard (requests, latency, errors), and interactive API playground.

Technical Bounds

• API key CRUD: create key with name + scope checkboxes, copy on creation, revoke, list all keys.
• Scopes: node:read, node:write, staking:read, governance:read, governance:write, admin.
• Usage dashboard: per-key request count, error rate, p50/p95 latency, top endpoints over 1d/7d/30d.
• API playground: embedded Swagger UI with pre-filled API key for live testing.
• Rate limit display: current vs limit gauge per key tier.

Steps

1. Build ApiKeyList component: table with name, scopes, created date, last used, status, revoke button.
2. Build ApiKeyCreate form: name input, scope checkboxes, create button; display key once in modal with copy button.
3. Build UsageDashboard with time range selector, request count line chart, latency heatmap, error rate gauge.
4. Integrate Swagger UI component with dynamic Authorization header from selected API key.
5. Build RateLimitGauge showing usage vs limit (e.g., 450/1000 req/min).
6. Add webhook tester: POST /api/v1/dev/webhook stores and displays received webhooks in real-time.