refactor: migrate pairs list to useApi

README.md

@@ -33,6 +33,13 @@ The shared footer keeps the StableRoute tagline visible on every page, renders t
 
 The frontend communicates with the StableRoute API backend.
 
+### Data-fetching convention
+
+Data-backed pages should use the shared `useApi` hook from `src/lib/useApi.ts`
+for `loading` / `ok` / `error` state handling and unmount cancellation instead
+of hand-rolled `useEffect` fetch logic. This keeps live regions, error states,
+and cleanup behavior consistent across pages.
+
 ### Environment Variables
 
 - **`NEXT_PUBLIC_STABLEROUTE_API_BASE`**: Specifies the base URL of the StableRoute API backend (defaults to `http://localhost:3001` if unset).

src/app/pairs/Client.tsx

@@ -1,21 +1,15 @@
 "use client";
 
-import { useEffect, useState } from "react";
 import Link from "next/link";
-import { apiGet } from "@/lib/apiClient";
+import { useApi } from "@/lib/useApi";
 
 type Pair = { source: string; destination: string };
 
 export default function PairsClient() {
-  const [pairs, setPairs] = useState<Pair[] | null>(null);
-  const [error, setError] = useState<string | null>(null);
-  const isLoading = pairs === null && error === null;
-
-  useEffect(() => {
-    apiGet<{ pairs: Pair[] }>("/api/v1/pairs")
-      .then((b) => setPairs(b.pairs))
-      .catch((e) => setError(e.message));
-  }, []);
+  const pairsState = useApi<{ pairs: Pair[] }>("/api/v1/pairs");
+  const isLoading = pairsState.status === "loading";
+  const error = pairsState.status === "error" ? pairsState.error : null;
+  const pairs = pairsState.status === "ok" ? pairsState.data.pairs : null;
 
   return (
     <main

src/app/quote/Client.tsx

@@ -2,6 +2,7 @@
 
 import { useState } from "react";
 import type { ApiError } from "@/lib/apiClient";
+import { assetsDiffer, isValidAmount } from "@/lib/quote";
 
 type Quote = {
   source_asset: string;
@@ -38,11 +39,19 @@ export default function QuoteClient() {
     setRequestId(null);
     setQuote(null);
 
-    if (!assetsDiffer(sourceAsset, destAsset)) {
+    const normalizedSourceAsset = normalizeAssetCode(sourceAsset);
+    const normalizedDestAsset = normalizeAssetCode(destAsset);
+    const normalizedAmount = amount.trim();
+
+    if (!normalizedSourceAsset || !normalizedDestAsset) {
+      setError("Asset codes must be 1-12 letters or numbers.");
+      return;
+    }
+    if (!assetsDiffer(normalizedSourceAsset, normalizedDestAsset)) {
       setError("Source and destination assets must differ.");
       return;
     }
-    if (!isValidAmount(amount)) {
+    if (!isValidAmount(normalizedAmount)) {
       setError("Amount must be a positive integer (base units).");
       return;
     }