Migrate the pairs list off the inline fetch effect onto the shared useApi hook

[mikewheeleer]

Migrate the pairs list off the inline fetch effect onto the shared useApi hook

Description

src/app/pairs/Client.tsx hand-rolls its own useEffect + useState fetch against /api/v1/pairs, duplicating exactly the loading/ok/error machinery that src/lib/useApi.ts already provides (including cancellation on unmount, which the inline version lacks). This issue migrates the page onto useApi for consistent state handling and built-in cancellation.

Requirements and context

• Repository scope: StableRoute-Org/Stableroute-frontend only.
• Replace the inline effect with useApi<{ pairs: Pair[] }>("/api/v1/pairs") and derive loading/empty/list/error UI from the returned discriminated state.
• Preserve current markup and aria-live semantics; the empty and error messages must stay identical.
• Gain the hook's unmount cancellation that the current code does not implement.

Suggested execution

• Fork the repo and create a branch
• git checkout -b refactor/pairs-use-api-hook
• Implement changes
  • Write code in: src/app/pairs/Client.tsx using src/lib/useApi.ts.
  • Write comprehensive tests in: src/app/pairs/page.test.tsx — loading, populated list, empty state, and error state.
  • Add documentation: note that data pages standardize on useApi in README.md.
  • Validate accessibility: live region and roles unchanged.
• Test and commit

Test and commit

• Run npm run lint, npm test, and npm run build.

Example commit message

refactor: migrate pairs list onto the shared useApi hook

Guidelines

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

Community & contribution rewards

• 💬 Join the StableRoute community on Discord for questions, reviews, and faster merges: https://discord.gg/37aCpusvx
• ⭐ 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.

[gloskull]

Hi, I’d love to work on this issue. I have 4 years of experience across backend, frontend, full-stack, and smart contract development. I understand the task clearly and can deliver a clean, efficient, well-tested solution on time, with strong focus on code quality and maintainability. My PR will be submitted in under 10 hours.