Adopt the useApi hook across data-fetching pages to remove duplicated state machines

[mikewheeleer]

Refactor list pages to use the useApi hook

Description

src/lib/useApi.ts implements a clean loading | error | ok state machine with cancellation, yet no page imports it — instead src/app/services/page.tsx, src/app/events/page.tsx, and src/app/changelog/page.tsx each re-implement useState + useEffect + manual error handling. This issue consolidates the simplest read-only pages onto useApi, reducing duplication and getting cancellation for free.

Requirements and context

• Repository scope: Agentpay-Org/Agentpay-frontend only.
• Migrate at least the changelog and events list fetches to useApi<T>(path) and branch on state.status.
• Render loading with Spinner, error with role="alert", and ok with the existing list markup.
• Do not change observable behaviour for the happy path; only the implementation.
• Leave pages that need polling or mutations (stats, admin, usage) as-is for this issue.

Suggested execution

• Fork the repo and create a branch
• git checkout -b refactor/api-client-14-adopt-useapi
• Implement changes
  • Write code in: src/app/changelog/page.tsx and src/app/events/page.tsx (and others where trivial).
  • Write comprehensive tests in: create src/app/changelog/page.test.tsx — mock @/lib/apiClient, assert loading→ok and loading→error transitions.
  • Add documentation: add a usage example to a JSDoc block in src/lib/useApi.ts.
  • Validate the cancellation cleanup is exercised by an unmount test.
• Test and commit

Test and commit

• Run npm run lint, npm run typecheck, npm test, and npm run build.
• Cover edge cases: unmount during fetch (no state-after-unmount warning), error message fallback, and empty data.
• Include the npm test output.

Example commit message

refactor(pages): adopt useApi hook for read-only list pages with tests

Guidelines

• Minimum 95 percent test coverage for the changed modules.
• Clear, reviewer-focused documentation.
• Timeframe: 96 hours.

Community & contribution rewards

• 💬 Join the AgentPay community on Discord for questions, reviews, and faster merges: https://discord.gg/eXvRKkgcv
• ⭐ This is a GrantFox OSS / Official Campaign task and may be rewarded. When your PR is merged you'll be prompted to rate the project — if this issue and the maintainers helped you ship, we'd be grateful for a 5-star rating. Clear questions in Discord and tidy, well-tested PRs are the fastest path to a merge and a reward.