Merge branch 'pr-165'

Author: mikewheeleer

README.md

@@ -21,9 +21,10 @@ describe("ApiKeysPage", () => {
   it("renders api keys in a single polite live region", async () => {
     global.fetch = jest.fn().mockResolvedValueOnce({
       ok: true,
-      text: async () => JSON.stringify({
-        items: [{ prefix: "sk_abc", label: "Production", createdAt: Date.now() }],
-      }),
+      text: async () =>
+        JSON.stringify({
+          items: [{ prefix: "sk_abc", label: "Production", createdAt: Date.now() }],
+        }),
     } as unknown as Response);
 
     render(<ApiKeysPage />);

src/app/api-keys/page.test.tsx

@@ -22,9 +22,10 @@ describe("EventsPage", () => {
   it("renders events in a single polite live region", async () => {
     global.fetch = jest.fn().mockResolvedValueOnce({
       ok: true,
-      text: async () => JSON.stringify({
-        items: [{ id: "evt1", ts: Date.now(), type: "pair.registered", payload: {} }],
-      }),
+      text: async () =>
+        JSON.stringify({
+          items: [{ id: "evt1", ts: Date.now(), type: "pair.registered", payload: {} }],
+        }),
     } as unknown as Response);
 
     render(<EventsPage />);

src/app/events/page.test.tsx

@@ -0,0 +1,143 @@
+import { fireEvent, render, screen, waitFor } from "@testing-library/react";
+import NewPairPage from "./page";
+
+const mockPush = jest.fn();
+
+jest.mock("next/navigation", () => ({
+  useRouter: () => ({ push: mockPush }),
+}));
+
+describe("NewPairPage", () => {
+  let originalFetch: typeof globalThis.fetch;
+
+  beforeEach(() => {
+    originalFetch = globalThis.fetch;
+    mockPush.mockReset();
+  });
+
+  afterEach(() => {
+    globalThis.fetch = originalFetch;
+  });
+
+  function submitPair(source: string, destination: string) {
+    fireEvent.change(screen.getByLabelText("Source"), {
+      target: { value: source },
+    });
+    fireEvent.change(screen.getByLabelText("Destination"), {
+      target: { value: destination },
+    });
+    fireEvent.submit(screen.getByRole("button", { name: /Register pair/i }).closest("form")!);
+  }
+
+  it("normalizes lowercase and surrounding whitespace before submit", async () => {
+    const mockFetch = jest.fn().mockResolvedValueOnce({
+      ok: true,
+      text: async () => "{}",
+    } as unknown as Response);
+    globalThis.fetch = mockFetch as unknown as typeof globalThis.fetch;
+
+    render(<NewPairPage />);
+    submitPair(" usdc ", " eurc ");
+
+    await waitFor(() => {
+      expect(mockPush).toHaveBeenCalledWith("/pairs");
+    });
+    const requestInit = mockFetch.mock.calls[0][1] as RequestInit;
+    expect(requestInit.method).toBe("POST");
+    expect(JSON.parse(requestInit.body as string)).toEqual({
+      source: "USDC",
+      destination: "EURC",
+    });
+  });
+
+  it.each(["USD-C", "USD C", "ABCDEFGHIJKLM"])(
+    "rejects invalid source asset code %s with accessible field errors",
+    async (code) => {
+      const mockFetch = jest.fn();
+      globalThis.fetch = mockFetch as unknown as typeof globalThis.fetch;
+
+      render(<NewPairPage />);
+      submitPair(code, "EURC");
+
+      const sourceInput = document.getElementById("source");
+      await waitFor(() => {
+        expect(screen.getByRole("alert")).toHaveTextContent(/ASCII letters or numbers/i);
+      });
+      expect(sourceInput).toHaveAttribute("aria-invalid", "true");
+      expect(sourceInput).toHaveAttribute("aria-describedby", "source-err");
+      expect(mockFetch).not.toHaveBeenCalled();
+    }
+  );
+
+  it("rejects pairs that are identical after trimming and uppercasing", async () => {
+    const mockFetch = jest.fn();
+    globalThis.fetch = mockFetch as unknown as typeof globalThis.fetch;
+
+    render(<NewPairPage />);
+    submitPair(" usdc ", "USDC");
+
+    const destinationInput = document.getElementById("destination");
+    await waitFor(() => {
+      expect(screen.getByRole("alert")).toHaveTextContent(/must differ/i);
+    });
+    expect(destinationInput).toHaveAttribute("aria-invalid", "true");
+    expect(destinationInput).toHaveAttribute("aria-describedby", "destination-err");
+    expect(mockFetch).not.toHaveBeenCalled();
+  });
+
+  it("validates empty fields with inline errors instead of native browser validation", async () => {
+    const mockFetch = jest.fn();
+    globalThis.fetch = mockFetch as unknown as typeof globalThis.fetch;
+
+    render(<NewPairPage />);
+    fireEvent.submit(screen.getByRole("button", { name: /Register pair/i }).closest("form")!);
+
+    await waitFor(() => {
+      expect(screen.getAllByRole("alert")).toHaveLength(2);
+    });
+    expect(document.getElementById("source")).toHaveAttribute("aria-invalid", "true");
+    expect(document.getElementById("destination")).toHaveAttribute("aria-invalid", "true");
+    expect(mockFetch).not.toHaveBeenCalled();
+  });
+
+  it("clears an identical-pair error when source changes", async () => {
+    const mockFetch = jest.fn();
+    globalThis.fetch = mockFetch as unknown as typeof globalThis.fetch;
+
+    render(<NewPairPage />);
+    submitPair("USDC", "USDC");
+
+    await waitFor(() => {
+      expect(screen.getByRole("alert")).toHaveTextContent(/must differ/i);
+    });
+    fireEvent.change(screen.getByLabelText("Source"), {
+      target: { value: "XLM" },
+    });
+
+    expect(screen.queryByRole("alert")).not.toBeInTheDocument();
+  });
+
+  it("surfaces backend errors without losing the normalized request body", async () => {
+    const mockFetch = jest.fn().mockResolvedValueOnce({
+      ok: false,
+      text: async () =>
+        JSON.stringify({
+          error: "invalid_request",
+          message: "Pair already exists",
+        }),
+    } as unknown as Response);
+    globalThis.fetch = mockFetch as unknown as typeof globalThis.fetch;
+
+    render(<NewPairPage />);
+    submitPair("xlm", "usdc");
+
+    await waitFor(() => {
+      expect(screen.getByRole("alert")).toHaveTextContent(/Pair already exists/i);
+    });
+    const requestInit = mockFetch.mock.calls[0][1] as RequestInit;
+    expect(JSON.parse(requestInit.body as string)).toEqual({
+      source: "XLM",
+      destination: "USDC",
+    });
+  });
+});

src/app/pairs/new/page.test.tsx

@@ -1,30 +1,73 @@
 "use client";
 
-import { useState } from "react";
+import { type FormEvent, useState } from "react";
 import { useRouter } from "next/navigation";
+import { TextField } from "@/components/TextField";
 import { apiPost } from "@/lib/apiClient";
 import { assetsDiffer } from "@/lib/quote";
 
+const ASSET_CODE_RE = /^[A-Za-z0-9]{1,12}$/;
+const ASSET_CODE_ERROR = "Use 1-12 ASCII letters or numbers.";
+
+type FormErrors = {
+  source?: string;
+  destination?: string;
+  form?: string;
+};
+
+/**
+ * Trims and normalizes Stellar asset codes after validating the raw code
+ * characters are ASCII alphanumeric only.
+ */
+function normalizeAssetCode(value: string): string | null {
+  const trimmed = value.trim();
+  return ASSET_CODE_RE.test(trimmed) ? trimmed.toUpperCase() : null;
+}
+
 export default function NewPairPage() {
   const router = useRouter();
   const [source, setSource] = useState("");
   const [destination, setDestination] = useState("");
-  const [error, setError] = useState<string | null>(null);
+  const [errors, setErrors] = useState<FormErrors>({});
   const [loading, setLoading] = useState(false);
 
-  const onSubmit = async (e: React.FormEvent) => {
+  const onSubmit = async (e: FormEvent) => {
     e.preventDefault();
-    setError(null);
-    if (!assetsDiffer(source, destination)) {
-      setError("Source and destination must differ.");
+    const normalizedSource = normalizeAssetCode(source);
+    const normalizedDestination = normalizeAssetCode(destination);
+    const nextErrors: FormErrors = {};
+
+    if (!normalizedSource) {
+      nextErrors.source = ASSET_CODE_ERROR;
+    }
+    if (!normalizedDestination) {
+      nextErrors.destination = ASSET_CODE_ERROR;
+    }
+    if (
+      normalizedSource &&
+      normalizedDestination &&
+      normalizedSource === normalizedDestination
+    ) {
+      nextErrors.destination = "Source and destination must differ.";
+    }
+
+    if (Object.keys(nextErrors).length > 0 || !normalizedSource || !normalizedDestination) {
+      setErrors(nextErrors);
       return;
     }
+
+    setErrors({});
+    setSource(normalizedSource);
+    setDestination(normalizedDestination);
     setLoading(true);
     try {
-      await apiPost("/api/v1/pairs", { source, destination });
+      await apiPost("/api/v1/pairs", {
+        source: normalizedSource,
+        destination: normalizedDestination,
+      });
       router.push("/pairs");
     } catch (err) {
-      setError((err as Error).message);
+      setErrors({ form: (err as Error).message });
     } finally {
       setLoading(false);
     }
@@ -37,35 +80,53 @@ export default function NewPairPage() {
       className="mx-auto flex min-h-[60vh] max-w-xl flex-col gap-6 p-8 focus:outline-none"
     >
       <h1 className="text-3xl font-semibold tracking-tight">New pair</h1>
-      <form onSubmit={onSubmit} className="flex flex-col gap-3">
-        <label className="flex flex-col gap-1 text-sm">
-          <span>Source</span>
-          <input
-            required
-            maxLength={12}
-            value={source}
-            onChange={(e) => setSource(e.target.value)}
-            className="rounded-md border border-neutral-300 px-3 py-2 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-blue-500 dark:border-neutral-700 dark:bg-neutral-900"
-          />
-        </label>
-        <label className="flex flex-col gap-1 text-sm">
-          <span>Destination</span>
-          <input
-            required
-            maxLength={12}
-            value={destination}
-            onChange={(e) => setDestination(e.target.value)}
-            className="rounded-md border border-neutral-300 px-3 py-2 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-blue-500 dark:border-neutral-700 dark:bg-neutral-900"
-          />
-        </label>
+      <form onSubmit={onSubmit} className="flex flex-col gap-3" noValidate>
+        <TextField
+          id="source"
+          label="Source"
+          required
+          value={source}
+          onChange={(e) => {
+            setSource(e.target.value);
+            setErrors((current) => ({
+              ...current,
+              source: undefined,
+              destination:
+                current.destination === "Source and destination must differ."
+                  ? undefined
+                  : current.destination,
+              form: undefined,
+            }));
+          }}
+          error={errors.source}
+        />
+        <TextField
+          id="destination"
+          label="Destination"
+          required
+          value={destination}
+          onChange={(e) => {
+            setDestination(e.target.value);
+            setErrors((current) => ({
+              ...current,
+              destination: undefined,
+              form: undefined,
+            }));
+          }}
+          error={errors.destination}
+        />
         <button
           type="submit"
           disabled={loading}
           className="self-start rounded-full bg-black px-5 py-2 text-sm font-medium text-white disabled:opacity-50 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-blue-500"
         >
           {loading ? "Saving…" : "Register pair"}
         </button>
-        {error && <p role="alert" className="text-sm text-rose-600">{error}</p>}
+        {errors.form && (
+          <p role="alert" className="text-sm text-rose-600">
+            {errors.form}
+          </p>
+        )}
       </form>
     </main>
   );

src/app/pairs/new/page.tsx

@@ -21,9 +21,17 @@ describe("WebhooksPage", () => {
   it("renders webhooks in a single polite live region", async () => {
     global.fetch = jest.fn().mockResolvedValueOnce({
       ok: true,
-      text: async () => JSON.stringify({
-        items: [{ id: "wh1", url: "https://example.com/hook", events: ["pair.registered"], createdAt: Date.now() }],
-      }),
+      text: async () =>
+        JSON.stringify({
+          items: [
+            {
+              id: "wh1",
+              url: "https://example.com/hook",
+              events: ["pair.registered"],
+              createdAt: Date.now(),
+            },
+          ],
+        }),
     } as unknown as Response);
 
     render(<WebhooksPage />);