refactor(app): render money and time only through the shared components

ROADMAP.md

@@ -4,7 +4,7 @@
 
 | | |
 |---|---|
-| **Last updated** | 2026-10-08 (W-05 resolved; 17 Wave issues seeded with seven new rows; issue format proofed against Drips' maintainer guide; the three pre-format issues triaged — app #16 re-emitted, app #15 and registry #7 closed as superseded; repo-side Changelog lines unioned back into canonical by `scripts/roadmap-merge`; that merge's ADR-link normalization anchored so quoted prose cannot be rewritten) |
+| **Last updated** | 2026-10-17 (Routed in-scope money and time displays through AmountDisplay, AssetLabel, and DateTimeDisplay, built format-usage guard test in lib/i18n/format-usage.test.ts for #40; M3-15 remains IN PROGRESS for money-action routes) |
 | **Docs baseline** | v0.3, worldwide scope (`PRD.md`, `ARCHITECTURE.md`, `ARCHITECTURE_ESSENTIALS.md`, `AGENTS.md`, `CLAUDE.md`, `project_structure.md`) |
 | **Current phase** | Phase 0 (Foundations) → starting Phase 1 (M0 Validate) |
 | **Readiness** | See [§3](#3-progress-snapshot) |
@@ -535,6 +535,7 @@ Newest first. One entry per PR. Required for every contribution (see §2).
 
 | Date | PR / ref | Repo | Rows touched | Summary |
 |---|---|---|---|---|
+| 2026-10-17 | `refactor/money-time-shared-components` | app | M3-15 (IN PROGRESS) | Routed money display in RequestForm and ReceiptResult through AmountDisplay/AssetLabel, made AmountDisplay assetCode/issuer optional for fallback safety, converted SavedClaimLinks to DateTimeDisplay, added format-usage guard test (lib/i18n/format-usage.test.ts) enforcing all money/time displays in app/ and components/ route through shared components. Closes #40. |
 | 2026-10-08 | `chore/roadmap-copy-back` (#44) | app | no row changes | Copy-back run: `ROADMAP.md` replaced with the merged canonical (`.github` main as of #31) in repo-root link form, and §3 recomputed with `scripts/roadmap-progress`. This is the step `roadmap-merge`'s header requires after every merge and that was skipped between 2026-10-06 and 2026-10-08, which is how the seven copies reached 92 divergent statuses. Verified in this checkout: the file equals canonical byte for byte apart from this entry and the ADR link prefix, `W-05` reads `DONE`, the seven Wave rows are present, duplicate row-ID scan is 0. No row, status, priority, dependency or **Done when** was authored in this repo. |
 | 2026-10-08 | `fix/roadmap-merge-link-anchor` | org | no row changes | Found while preparing the copy-back. `roadmap-merge`'s read normalization rewrote the docs-rooted ADR link form into the root-relative one on every copy so the two depths compare equal — correct for links, wrong for prose: the union entry above quotes both forms, so reading that line collapsed its own quote and emitted a Changelog entry contradicting itself, in a copy that no longer matched canonical line for line. Fixed by anchoring the replace on the numeric ADR filename that always follows the slash, so only real links are rewritten, and by re-wording the union entry to name the two forms as `docs/adr/` and `adr/` rather than spelling them as link text: **an entry that describes this rewrite must not itself be a string the rewrite can act on.** Verified: the anchored read leaves a quoted form byte-identical where the blanket replace corrupted it; a full `roadmap-merge` over all five copies against `b12d290` exits 0 with **0 lines** differing from canonical, which also confirms the union is complete; the one real link (`ADR-0026`) still normalizes both ways. No row, status, priority, dependency or **Done when** in this diff. |
 | 2026-10-08 | `chore/roadmap-changelog-union` | org | no row changes | Second `scripts/roadmap-merge` run now that the Wave-format PRs have merged (`.github` #26 and #27, contracts #31, sdk #38, app #43, registry #18). Three-way against `b12d290`, the revision where all five copies were last identical. The merge's **entire** output is four lines: the repo-side `docs/wave-issue-format` Changelog rows that each repo wrote into its own copy and canonical never saw. No row ID, status, priority, dependency or **Done when** moved — the seven new rows went in byte-identically, and `W-05`'s `TODO` → `DONE` stayed on the `org` row in canonical as §12 requires, so the repo copies' deliberately-untouched `TODO` was not merged back over it. §3 verified unchanged by `roadmap-progress`: 211 rows, 75 `DONE`, 40%. **Not in this PR:** the copy-back. Each repo's `ROADMAP.md` must be rewritten from the merged canonical, with the ADR links rewritten for the repo-root location, so all five copies are byte-identical again — that invariant is what makes `--ancestor` meaningful next time, and it needs four repo PRs that can only be cut after this lands. |

app/request/RequestForm.tsx

@@ -1,17 +1,19 @@
 "use client";
 
 import { useId } from "react";
+import { AmountDisplay } from "@/components/money/AmountDisplay";
 import { DateTimeDisplay } from "@/components/time/DateTimeDisplay";
-import { MAX_TRANCHES } from "@/lib/constants";
-import { formatTokenAmount } from "@/lib/i18n/format";
+import { ASSET_CODE, MAX_TRANCHES } from "@/lib/constants";
 import { t } from "@/lib/i18n/messages";
+import { publicConfig } from "@/lib/sdk";
 import { unixSecondsOf } from "./schedule";
 import { useRequestForm } from "./useRequestForm";
 
 /** The payee's request form. Markup only; state lives in useRequestForm. */
 export function RequestForm({ payees }: { payees: { payeeId: string; label: string }[] }) {
   const ids = { payee: useId(), reference: useId(), referenceHint: useId() };
   const f = useRequestForm(payees[0]?.payeeId ?? "");
+  const usdc = publicConfig();
   return (
     <form onSubmit={f.create} className="mt-6 flex flex-col gap-4" noValidate>
       <label htmlFor={ids.payee} className="flex flex-col gap-1">
@@ -93,7 +95,13 @@ export function RequestForm({ payees }: { payees: { payeeId: string; label: stri
 
       {f.total ? (
         <p>
-          {t("pages.request.total")}: {formatTokenAmount(f.total, f.locale)}
+          {t("pages.request.total")}:{" "}
+          <AmountDisplay
+            decimal={f.total}
+            assetCode={ASSET_CODE}
+            issuer={usdc.NEXT_PUBLIC_USDC_ISSUER}
+            locale={f.locale}
+          />
         </p>
       ) : null}
 

components/claim-links/SavedClaimLinks.tsx

@@ -1,5 +1,6 @@
 "use client";
 
+import { DateTimeDisplay } from "@/components/time/DateTimeDisplay";
 import { t } from "@/lib/i18n/messages";
 import { useSavedClaimLinks } from "./useSavedClaimLinks";
 
@@ -22,9 +23,10 @@ export function SavedClaimLinks() {
             </span>
             <span className="text-sm">
               {t("claimLinks.savedAt")}:{" "}
-              <time dateTime={link.savedAt}>
-                {link.savedAt.replace("T", " ").slice(0, 16)} {t("time.utc")}
-              </time>
+              <DateTimeDisplay
+                unixSeconds={BigInt(Math.floor(Date.parse(link.savedAt) / 1000))}
+                locale={s.locale}
+              />
             </span>
             <span className="flex gap-3">
               <button type="button" onClick={() => s.copy(link)} className="underline">

components/claim-links/useSavedClaimLinks.ts

@@ -13,6 +13,7 @@ export function useSavedClaimLinks() {
   const [available, setAvailable] = useState(true);
   const [links, setLinks] = useState<SavedClaimLink[]>([]);
   const [copiedLockId, setCopiedLockId] = useState<string | null>(null);
+  const [locale, setLocale] = useState("en");
 
   const refresh = useCallback(() => {
     const store = browserStore();
@@ -22,6 +23,7 @@ export function useSavedClaimLinks() {
 
   useEffect(() => {
     refresh();
+    setLocale(navigator.language);
     // Another tab saving a link updates this list too.
     window.addEventListener("storage", refresh);
     return () => window.removeEventListener("storage", refresh);
@@ -53,5 +55,5 @@ export function useSavedClaimLinks() {
     URL.revokeObjectURL(url);
   }
 
-  return { available, links, copiedLockId, copy, remove, exportAll };
+  return { available, links, copiedLockId, copy, remove, exportAll, locale };
 }

components/money/AmountDisplay.tsx

@@ -10,16 +10,21 @@ import { RateNotice } from "./RateNotice";
 export function AmountDisplay(props: {
   /** Exact decimal string from the SDK's fromBaseUnits. */
   decimal: string;
-  assetCode: string;
-  issuer: string;
+  assetCode?: string;
+  issuer?: string;
   locale: string;
   /** The payee's ISO 4217 currency from registry data, if any. */
   localCurrency?: string;
 }) {
   return (
     <span className="amount">
-      <span className="amount-value">{formatTokenAmount(props.decimal, props.locale)}</span>{" "}
-      <AssetLabel code={props.assetCode} issuer={props.issuer} />
+      <span className="amount-value">{formatTokenAmount(props.decimal, props.locale)}</span>
+      {props.assetCode && props.issuer ? (
+        <>
+          {" "}
+          <AssetLabel code={props.assetCode} issuer={props.issuer} />
+        </>
+      ) : null}
       {props.localCurrency ? <RateNotice hasRate={false} /> : null}
     </span>
   );

components/receipts/ReceiptResult.tsx

@@ -73,7 +73,7 @@ function Details({
             locale={locale}
           />
         ) : (
-          fromBaseUnits(receipt.amount)
+          <AmountDisplay decimal={fromBaseUnits(receipt.amount)} locale={locale} />
         )}
       </dd>
       {receipt.trancheIndex !== undefined ? (

lib/i18n/format-usage.test.ts

@@ -0,0 +1,86 @@
+import { readdirSync, readFileSync, statSync } from "node:fs";
+import { join } from "node:path";
+import { describe, expect, it } from "vitest";
+
+/**
+ * Money and time must only be rendered through shared components: AmountDisplay, AssetLabel,
+ * and DateTimeDisplay (AGENTS.md §8.3, roadmap M3-15, Issue #40).
+ * Hand-rolled formatters, direct Intl calls, or direct calls to lib/i18n/format helpers
+ * are strictly forbidden across app/ and components/.
+ */
+const roots = ["app", "components"];
+
+const codeFiles = (dir: string): string[] =>
+  readdirSync(dir).flatMap((name) => {
+    const path = join(dir, name);
+    if (statSync(path).isDirectory()) return codeFiles(path);
+    return path.endsWith(".ts") || path.endsWith(".tsx") ? [path] : [];
+  });
+
+const forbiddenPatterns = [
+  /\bIntl\.NumberFormat\b/,
+  /\bIntl\.DateTimeFormat\b/,
+  /\.toLocaleString\(/,
+  /\.toFixed\(/,
+  /\bformatTokenAmount\(/,
+  /\bformatDateTimeUtcAndLocal\(/,
+  /\bformatLocalCurrency\(/,
+];
+
+const isAllowlisted = (filePath: string): boolean => {
+  const normalized = filePath.replace(/\\/g, "/");
+  return (
+    normalized.startsWith("components/money/") ||
+    normalized.startsWith("components/time/") ||
+    normalized === "lib/i18n/format.ts"
+  );
+};
+
+const findFormattingViolations = (source: string): string[] => {
+  const violations: string[] = [];
+  for (const pattern of forbiddenPatterns) {
+    if (pattern.test(source)) {
+      violations.push(pattern.source);
+    }
+  }
+  return violations;
+};
+
+describe("money and time display format guard", () => {
+  const files = roots
+    .flatMap(codeFiles)
+    .filter((f) => !f.includes(".test.") && !f.includes(".spec."));
+
+  it("scans the app and components trees", () => {
+    expect(files.length).toBeGreaterThan(10);
+  });
+
+  it.each(files)("%s routes money/time only through shared components", (file) => {
+    if (isAllowlisted(file)) return;
+    const content = readFileSync(file, "utf8");
+    const violations = findFormattingViolations(content);
+    expect(violations).toEqual([]);
+  });
+
+  it("would catch a hand-rolled formatter or direct helper call", () => {
+    expect(findFormattingViolations("const n = new Intl.NumberFormat('en');")).toContain(
+      "\\bIntl\\.NumberFormat\\b",
+    );
+    expect(findFormattingViolations("const d = new Intl.DateTimeFormat('en');")).toContain(
+      "\\bIntl\\.DateTimeFormat\\b",
+    );
+    expect(findFormattingViolations("const s = (123).toLocaleString();")).toContain(
+      "\\.toLocaleString\\(",
+    );
+    expect(findFormattingViolations("const s = amount.toFixed(2);")).toContain("\\.toFixed\\(");
+    expect(findFormattingViolations("const s = formatTokenAmount('10', 'en');")).toContain(
+      "\\bformatTokenAmount\\(",
+    );
+    expect(findFormattingViolations("const s = formatDateTimeUtcAndLocal(10n, 'en');")).toContain(
+      "\\bformatDateTimeUtcAndLocal\\(",
+    );
+    expect(findFormattingViolations("const s = formatLocalCurrency('10', 'USD', 'en');")).toContain(
+      "\\bformatLocalCurrency\\(",
+    );
+  });
+});