From 8a7215e69f4e90a1a28399e260ed7529c01ba42e Mon Sep 17 00:00:00 2001
From: fretchen <polka.99gefiedert@icloud.com>
Date: Thu, 30 Jul 2026 22:42:36 +0200
Subject: [PATCH 1/7] Fix typing

---
 website/components/FacilitatorApproval.tsx    |  4 ++-
 website/components/ImageModal.tsx             |  2 +-
 website/components/MarkdownWithLatex.tsx      |  7 ++--
 website/components/Post.tsx                   |  2 +-
 website/components/SimpleCollectButton.tsx    |  2 +-
 website/components/TableOfContents.tsx        |  2 +-
 website/hooks/useConfiguredPublicClient.ts    |  4 +--
 website/hooks/useKaTeXRenderer.ts             |  3 +-
 website/hooks/useMultiChainNFTs.ts            |  6 ++--
 website/hooks/useNFTListedStatus.ts           |  4 +--
 website/hooks/useTableOfContents.ts           |  2 +-
 website/test/ContractChainSelection.test.ts   |  1 +
 website/test/FacilitatorApproval.test.tsx     |  2 +-
 website/test/GrowthPage.test.tsx              | 30 ++++++++---------
 .../test/ImageGenerator.fileUpload.test.tsx   |  4 +--
 website/test/Modal.test.tsx                   |  2 +-
 website/test/NFTCard.test.tsx                 |  2 ++
 website/test/NFTList.test.tsx                 |  7 ++++
 website/test/SupportChainModal.test.tsx       |  6 ++--
 website/test/WalletOptions.test.tsx           | 18 +++++------
 website/test/setup.ts                         | 32 +++++++++++++------
 website/test/useGrowthApi.test.ts             |  6 ++--
 website/test/useSupportAction.test.ts         | 26 +++++++--------
 website/test/useX402ImageGeneration.test.ts   | 10 +++---
 website/tsconfig.json                         |  6 +++-
 website/types/katex-auto-render.d.ts          |  8 +++++
 website/types/vike.d.ts                       | 10 ++++++
 website/utils/getChain.ts                     |  2 +-
 website/wagmi.config.ts                       | 12 +++++++
 29 files changed, 141 insertions(+), 81 deletions(-)
 create mode 100644 website/types/katex-auto-render.d.ts
 create mode 100644 website/types/vike.d.ts

diff --git a/website/components/FacilitatorApproval.tsx b/website/components/FacilitatorApproval.tsx
index 163f9f119..b20c64d44 100644
--- a/website/components/FacilitatorApproval.tsx
+++ b/website/components/FacilitatorApproval.tsx
@@ -168,7 +168,9 @@ export function FacilitatorApproval({
   const [fetchError, setFetchError] = useState<string | null>(null);
 
   const networks = showTestnets ? APPROVAL_NETWORKS_WITH_TESTNETS : APPROVAL_NETWORKS;
-  const [selectedNetwork, setSelectedNetwork] = useState(networks[0].network);
+  const [selectedNetwork, setSelectedNetwork] = useState<(typeof APPROVAL_NETWORKS_WITH_TESTNETS)[number]["network"]>(
+    networks[0].network,
+  );
 
   const usdcConfig = getNetworkUSDCConfig(selectedNetwork);
   const targetChainId = usdcConfig ? usdcConfig.chainId : fromCAIP2(selectedNetwork);
diff --git a/website/components/ImageModal.tsx b/website/components/ImageModal.tsx
index 8105b7758..b82168c52 100644
--- a/website/components/ImageModal.tsx
+++ b/website/components/ImageModal.tsx
@@ -39,7 +39,7 @@ export function ImageModal({ image, onClose }: ImageModalProps) {
             {image.description && <p className={styles.nftCard.modalDescription}>{image.description}</p>}
             {image.network && <ChainInfoDisplay network={image.network} tokenId={image.tokenId} />}
             <div className={styles.nftCard.actions} style={{ justifyContent: "center", marginTop: "12px" }}>
-              <button onClick={handleDownload} className={`${styles.nftCard.actionButton} ${styles.primaryButton}`}>
+              <button onClick={handleDownload} className={`${styles.actionButton} ${styles.primaryButton}`}>
                 ⬇️ Download Full Size
               </button>
             </div>
diff --git a/website/components/MarkdownWithLatex.tsx b/website/components/MarkdownWithLatex.tsx
index 71c1a2cb2..75f9274c6 100644
--- a/website/components/MarkdownWithLatex.tsx
+++ b/website/components/MarkdownWithLatex.tsx
@@ -1,9 +1,9 @@
 import React from "react";
-import ReactMarkdown, { type Components } from "react-markdown";
+import ReactMarkdown, { type Components, type Options } from "react-markdown";
 
 interface MarkdownWithLatexProps {
   children: string;
-  remarkPlugins?: unknown[];
+  remarkPlugins?: Options["remarkPlugins"];
   components?: Partial<Components>;
 }
 
@@ -20,10 +20,9 @@ export const MarkdownWithLatex: React.FC<MarkdownWithLatexProps> = ({ children,
   // Client-side LaTeX rendering after content is mounted
   React.useEffect(() => {
     if (containerRef.current) {
-      type RenderMathInElement = (element: Element, options?: Record<string, unknown>) => void;
       import("katex/dist/contrib/auto-render")
         .then((module) => {
-          const renderMathInElement = (module as { default: RenderMathInElement }).default;
+          const renderMathInElement = module.default;
           if (containerRef.current) {
             renderMathInElement(containerRef.current, {
               delimiters: [
diff --git a/website/components/Post.tsx b/website/components/Post.tsx
index bdc61fcf0..9a3859c0e 100644
--- a/website/components/Post.tsx
+++ b/website/components/Post.tsx
@@ -19,7 +19,7 @@ import { CommentsSection } from "./CommentsSection";
 const ReactPostRenderer: React.FC<{
   componentPath: string;
   tokenID?: number;
-  contentRef: React.RefObject<HTMLDivElement>;
+  contentRef: React.RefObject<HTMLDivElement | null>;
   onReady?: () => void;
 }> = ({ componentPath, tokenID, contentRef, onReady }) => {
   const [Component, setComponent] = React.useState<React.ComponentType | null>(null);
diff --git a/website/components/SimpleCollectButton.tsx b/website/components/SimpleCollectButton.tsx
index ccb8c1cfe..4cc4461ed 100644
--- a/website/components/SimpleCollectButton.tsx
+++ b/website/components/SimpleCollectButton.tsx
@@ -144,7 +144,7 @@ export function SimpleCollectButton({ genImTokenId }: SimpleCollectButtonProps)
     <button
       onClick={handleCollect}
       disabled={!isConnected || !simulateMintData || isPending || isConfirming || isLoading}
-      className={`${styles.nftCard.actionButton} ${styles.primaryButton}`}
+      className={`${styles.actionButton} ${styles.primaryButton}`}
       title={`Collect this NFT (${getMintCount()} collected) | ${getPriceInfo()}`}
     >
       {isPending || isLoading
diff --git a/website/components/TableOfContents.tsx b/website/components/TableOfContents.tsx
index 6df055468..3356a9726 100644
--- a/website/components/TableOfContents.tsx
+++ b/website/components/TableOfContents.tsx
@@ -5,7 +5,7 @@ import { toc } from "../layouts/styles";
 
 interface TableOfContentsProps {
   /** Ref to the content container containing headings */
-  contentRef: RefObject<HTMLElement>;
+  contentRef: RefObject<HTMLElement | null>;
   /** Minimum number of headings required to show ToC (default: 2) */
   minHeadings?: number;
   /** Title shown above the ToC (default: "On this page") */
diff --git a/website/hooks/useConfiguredPublicClient.ts b/website/hooks/useConfiguredPublicClient.ts
index e27619116..5e11b60c2 100644
--- a/website/hooks/useConfiguredPublicClient.ts
+++ b/website/hooks/useConfiguredPublicClient.ts
@@ -1,6 +1,6 @@
 import { useMemo } from "react";
 import { getPublicClient } from "wagmi/actions";
-import { config } from "../wagmi.config";
+import { config, asConfiguredChainId } from "../wagmi.config";
 import { fromCAIP2 } from "@fretchen/chain-utils";
 
 /**
@@ -15,7 +15,7 @@ import { fromCAIP2 } from "@fretchen/chain-utils";
  */
 export function useConfiguredPublicClient(network: string) {
   return useMemo(() => {
-    const chainId = fromCAIP2(network);
+    const chainId = asConfiguredChainId(fromCAIP2(network));
     // Must pass chainId explicitly to get the correct chain's public client
     return getPublicClient(config, { chainId });
   }, [network]);
diff --git a/website/hooks/useKaTeXRenderer.ts b/website/hooks/useKaTeXRenderer.ts
index 4861f9870..4aa3d6a3e 100644
--- a/website/hooks/useKaTeXRenderer.ts
+++ b/website/hooks/useKaTeXRenderer.ts
@@ -16,11 +16,10 @@ export function useKaTeXRenderer(containerRef: React.RefObject<HTMLElement | nul
     // Delay to ensure content has fully rendered
     const timer = setTimeout(() => {
       // Dynamically import KaTeX only in the browser
-      type RenderMathInElement = (element: Element, options?: Record<string, unknown>) => void;
       Promise.all([import("katex"), import("katex/dist/contrib/auto-render")])
         .then(([katexModule, autoRenderModule]) => {
           const katex = katexModule.default;
-          const renderMathInElement = (autoRenderModule as { default: RenderMathInElement }).default;
+          const renderMathInElement = autoRenderModule.default;
 
           if (!containerRef.current) return;
 
diff --git a/website/hooks/useMultiChainNFTs.ts b/website/hooks/useMultiChainNFTs.ts
index 49849e011..491ee39d8 100644
--- a/website/hooks/useMultiChainNFTs.ts
+++ b/website/hooks/useMultiChainNFTs.ts
@@ -2,7 +2,7 @@ import { useMemo } from "react";
 import { useQuery } from "@tanstack/react-query";
 import { useAccount } from "wagmi";
 import { readContract } from "wagmi/actions";
-import { config } from "../wagmi.config";
+import { config, asConfiguredChainId } from "../wagmi.config";
 import { getGenAiNFTAddress, GenImNFTv4ABI, GENAI_NFT_NETWORKS, fromCAIP2, isTestnet } from "@fretchen/chain-utils";
 
 export interface MultiChainNFTToken {
@@ -23,7 +23,7 @@ interface UseMultiChainUserNFTsResult {
 
 async function fetchUserTokensOnNetwork(network: string, address: `0x${string}`): Promise<MultiChainNFTToken[]> {
   const contractAddress = getGenAiNFTAddress(network);
-  const chainId = fromCAIP2(network);
+  const chainId = asConfiguredChainId(fromCAIP2(network));
 
   const balance = await readContract(config, {
     address: contractAddress,
@@ -99,7 +99,7 @@ interface UseMultiChainPublicNFTsResult {
 
 async function fetchPublicTokensOnNetwork(network: string): Promise<MultiChainNFTToken[]> {
   const contractAddress = getGenAiNFTAddress(network);
-  const chainId = fromCAIP2(network);
+  const chainId = asConfiguredChainId(fromCAIP2(network));
 
   const tokenIds = (await readContract(config, {
     address: contractAddress,
diff --git a/website/hooks/useNFTListedStatus.ts b/website/hooks/useNFTListedStatus.ts
index b2abe5a8a..216cc9765 100644
--- a/website/hooks/useNFTListedStatus.ts
+++ b/website/hooks/useNFTListedStatus.ts
@@ -1,7 +1,7 @@
 import { useCallback } from "react";
 import { useQuery, useQueryClient } from "@tanstack/react-query";
 import { readContract } from "wagmi/actions";
-import { config } from "../wagmi.config";
+import { config, asConfiguredChainId } from "../wagmi.config";
 import { getGenAiNFTAddress, GenImNFTv4ABI, fromCAIP2 } from "@fretchen/chain-utils";
 
 export interface UseNFTListedStatusOptions {
@@ -24,7 +24,7 @@ export function useNFTListedStatus({
   enabled = true,
 }: UseNFTListedStatusOptions): UseNFTListedStatusResult {
   const queryClient = useQueryClient();
-  const chainId = fromCAIP2(network);
+  const chainId = asConfiguredChainId(fromCAIP2(network));
   const contractAddress = getGenAiNFTAddress(network);
   const tokenIdStr = tokenId.toString();
   const queryKey = ["nftListedStatus", tokenIdStr, network] as const;
diff --git a/website/hooks/useTableOfContents.ts b/website/hooks/useTableOfContents.ts
index 5c7b2edf5..993e69088 100644
--- a/website/hooks/useTableOfContents.ts
+++ b/website/hooks/useTableOfContents.ts
@@ -43,7 +43,7 @@ function slugify(text: string): string {
  * const headings = useTableOfContents(contentRef);
  * ```
  */
-export function useTableOfContents(contentRef: RefObject<HTMLElement>, isReady: boolean = true): TocItem[] {
+export function useTableOfContents(contentRef: RefObject<HTMLElement | null>, isReady: boolean = true): TocItem[] {
   const [headings, setHeadings] = useState<TocItem[]>([]);
 
   useEffect(() => {
diff --git a/website/test/ContractChainSelection.test.ts b/website/test/ContractChainSelection.test.ts
index 744dcef02..00d345daa 100644
--- a/website/test/ContractChainSelection.test.ts
+++ b/website/test/ContractChainSelection.test.ts
@@ -31,6 +31,7 @@ describe("Contract Chain Selection", () => {
     const chain = getViemChain(network);
     const client = getPublicClient({ ...config, chains: [chain] });
     expect(client).toBeDefined();
+    if (!client) throw new Error("client should be defined");
 
     // Try to read from contract using chain-utils
     const contractAddress = getGenAiNFTAddress(network);
diff --git a/website/test/FacilitatorApproval.test.tsx b/website/test/FacilitatorApproval.test.tsx
index ec006791f..6bc6dddfb 100644
--- a/website/test/FacilitatorApproval.test.tsx
+++ b/website/test/FacilitatorApproval.test.tsx
@@ -92,7 +92,7 @@ const MOCK_SUPPORTED_RESPONSE = {
 const FACILITATOR_ADDRESS = "0xFacilitatorAddress1234567890123456789012";
 
 describe("FacilitatorApproval", () => {
-  let mockWriteContract: ReturnType<typeof vi.fn>;
+  let mockWriteContract: ReturnType<typeof vi.fn<(...args: unknown[]) => unknown>>;
 
   beforeEach(() => {
     vi.clearAllMocks();
diff --git a/website/test/GrowthPage.test.tsx b/website/test/GrowthPage.test.tsx
index c226db005..6dc6d5193 100644
--- a/website/test/GrowthPage.test.tsx
+++ b/website/test/GrowthPage.test.tsx
@@ -83,7 +83,7 @@ describe("Growth Page", () => {
       address: undefined,
       isConnected: false,
       status: "disconnected",
-    } as ReturnType<typeof useAccount>);
+    } as unknown as ReturnType<typeof useAccount>);
 
     vi.mocked(useConnect).mockReturnValue({
       connectors: [{ name: "MetaMask" }],
@@ -99,7 +99,7 @@ describe("Growth Page", () => {
       address: undefined,
       isConnected: false,
       status: "disconnected",
-    } as ReturnType<typeof useAccount>);
+    } as unknown as ReturnType<typeof useAccount>);
 
     vi.mocked(useConnect).mockReturnValue({
       connectors: [{ name: "MetaMask" }],
@@ -115,7 +115,7 @@ describe("Growth Page", () => {
       address: "0x1111111111111111111111111111111111111111",
       isConnected: true,
       status: "connected",
-    } as ReturnType<typeof useAccount>);
+    } as unknown as ReturnType<typeof useAccount>);
 
     render(<Page />);
     expect(screen.getByText("This page is restricted to the site owner.")).toBeInTheDocument();
@@ -126,7 +126,7 @@ describe("Growth Page", () => {
       address: OWNER_ADDRESS,
       isConnected: true,
       status: "connected",
-    } as ReturnType<typeof useAccount>);
+    } as unknown as ReturnType<typeof useAccount>);
 
     render(<Page />);
 
@@ -144,7 +144,7 @@ describe("Growth Page", () => {
       address: OWNER_ADDRESS,
       isConnected: true,
       status: "connected",
-    } as ReturnType<typeof useAccount>);
+    } as unknown as ReturnType<typeof useAccount>);
 
     render(<Page />);
 
@@ -164,7 +164,7 @@ describe("Growth Page", () => {
       address: OWNER_ADDRESS,
       isConnected: true,
       status: "connected",
-    } as ReturnType<typeof useAccount>);
+    } as unknown as ReturnType<typeof useAccount>);
 
     render(<Page />);
 
@@ -193,7 +193,7 @@ describe("Growth Page", () => {
       address: OWNER_ADDRESS,
       isConnected: true,
       status: "connected",
-    } as ReturnType<typeof useAccount>);
+    } as unknown as ReturnType<typeof useAccount>);
 
     render(<Page />);
 
@@ -213,7 +213,7 @@ describe("Growth Page", () => {
       address: OWNER_ADDRESS,
       isConnected: true,
       status: "connected",
-    } as ReturnType<typeof useAccount>);
+    } as unknown as ReturnType<typeof useAccount>);
 
     render(<Page />);
 
@@ -235,7 +235,7 @@ describe("Growth Page", () => {
       address: OWNER_ADDRESS,
       isConnected: true,
       status: "connected",
-    } as ReturnType<typeof useAccount>);
+    } as unknown as ReturnType<typeof useAccount>);
 
     render(<Page />);
 
@@ -249,7 +249,7 @@ describe("Growth Page", () => {
       address: OWNER_ADDRESS,
       isConnected: true,
       status: "connected",
-    } as ReturnType<typeof useAccount>);
+    } as unknown as ReturnType<typeof useAccount>);
 
     render(<Page />);
 
@@ -275,7 +275,7 @@ describe("Growth Page", () => {
       address: OWNER_ADDRESS,
       isConnected: true,
       status: "connected",
-    } as ReturnType<typeof useAccount>);
+    } as unknown as ReturnType<typeof useAccount>);
 
     render(<Page />);
 
@@ -301,7 +301,7 @@ describe("Growth Page", () => {
       address: OWNER_ADDRESS,
       isConnected: true,
       status: "connected",
-    } as ReturnType<typeof useAccount>);
+    } as unknown as ReturnType<typeof useAccount>);
 
     render(<Page />);
 
@@ -318,7 +318,7 @@ describe("Growth Page", () => {
       address: OWNER_ADDRESS,
       isConnected: true,
       status: "connected",
-    } as ReturnType<typeof useAccount>);
+    } as unknown as ReturnType<typeof useAccount>);
 
     render(<Page />);
 
@@ -332,7 +332,7 @@ describe("Growth Page", () => {
       address: OWNER_ADDRESS,
       isConnected: true,
       status: "connected",
-    } as ReturnType<typeof useAccount>);
+    } as unknown as ReturnType<typeof useAccount>);
 
     render(<Page />);
 
@@ -358,7 +358,7 @@ describe("Growth Page", () => {
       address: OWNER_ADDRESS,
       isConnected: true,
       status: "connected",
-    } as ReturnType<typeof useAccount>);
+    } as unknown as ReturnType<typeof useAccount>);
 
     const { rerender } = render(<Page />);
 
diff --git a/website/test/ImageGenerator.fileUpload.test.tsx b/website/test/ImageGenerator.fileUpload.test.tsx
index ff49a776d..dc18678b9 100644
--- a/website/test/ImageGenerator.fileUpload.test.tsx
+++ b/website/test/ImageGenerator.fileUpload.test.tsx
@@ -93,7 +93,7 @@ describe("ImageGenerator Reference Image Integration", () => {
     it("sollte JPEG Dateien akzeptieren", () => {
       renderWithQuery(<ImageGenerator />);
 
-      const fileInput = screen.getByTestId("reference-image-input");
+      const fileInput = screen.getByTestId("reference-image-input") as HTMLInputElement;
 
       // Simuliere JPEG File Upload
       const jpegFile = new File(["jpeg content"], "test.jpg", { type: "image/jpeg" });
@@ -108,7 +108,7 @@ describe("ImageGenerator Reference Image Integration", () => {
     it("sollte PNG Dateien akzeptieren", () => {
       renderWithQuery(<ImageGenerator />);
 
-      const fileInput = screen.getByTestId("reference-image-input");
+      const fileInput = screen.getByTestId("reference-image-input") as HTMLInputElement;
 
       // Simuliere PNG File Upload
       const pngFile = new File(["png content"], "test.png", { type: "image/png" });
diff --git a/website/test/Modal.test.tsx b/website/test/Modal.test.tsx
index 81f9423de..db545c6ef 100644
--- a/website/test/Modal.test.tsx
+++ b/website/test/Modal.test.tsx
@@ -5,7 +5,7 @@ import React from "react";
 import "@testing-library/jest-dom";
 
 describe("Modal (shared shell)", () => {
-  let onClose: ReturnType<typeof vi.fn>;
+  let onClose: ReturnType<typeof vi.fn<() => void>>;
 
   beforeEach(() => {
     onClose = vi.fn();
diff --git a/website/test/NFTCard.test.tsx b/website/test/NFTCard.test.tsx
index 2ffea9811..68caddfdc 100644
--- a/website/test/NFTCard.test.tsx
+++ b/website/test/NFTCard.test.tsx
@@ -130,6 +130,7 @@ global.fetch = vi.fn();
 describe("NFTCard Component", () => {
   const mockProps: NFTCardProps = {
     tokenId: BigInt(1),
+    network: "eip155:10",
     onImageClick: vi.fn(),
     onNftBurned: vi.fn(),
     isHighlighted: false,
@@ -254,6 +255,7 @@ describe("NFTCard Component", () => {
   it("should handle missing optional callbacks", () => {
     const minimalProps = {
       tokenId: BigInt(1),
+      network: "eip155:10",
       onImageClick: vi.fn(),
       onNftBurned: vi.fn(),
     };
diff --git a/website/test/NFTList.test.tsx b/website/test/NFTList.test.tsx
index 0a7e4900b..f6ce13b4d 100644
--- a/website/test/NFTList.test.tsx
+++ b/website/test/NFTList.test.tsx
@@ -76,6 +76,7 @@ describe("NFTList Component", () => {
       newlyCreatedNFT: {
         tokenId: BigInt(123),
         imageUrl: "https://example.com/image.png",
+        network: "eip155:10",
         metadata: {
           name: "Test NFT",
           description: "A test NFT",
@@ -118,6 +119,7 @@ describe("NFTList Component", () => {
         newlyCreatedNFT: {
           tokenId,
           imageUrl: "https://example.com/image.png",
+          network: "eip155:10",
         },
       };
 
@@ -144,6 +146,7 @@ describe("NFTList Component", () => {
       newlyCreatedNFT: {
         tokenId: BigInt(456),
         imageUrl: "https://example.com/image.png",
+        network: "eip155:10",
         metadata: fullMetadata,
       },
     };
@@ -181,6 +184,7 @@ describe("NFTList Component", () => {
       newlyCreatedNFT: {
         tokenId: BigInt(1),
         imageUrl: "test.jpg",
+        network: "eip155:10",
         metadata: {
           name: "Test",
           description: "Test description",
@@ -211,6 +215,7 @@ describe("NFTList Component", () => {
       newlyCreatedNFT: {
         tokenId: BigInt(999),
         imageUrl: "https://example.com/no-metadata.png",
+        network: "eip155:10",
         // No metadata property
       },
     };
@@ -225,6 +230,7 @@ describe("NFTList Component", () => {
       newlyCreatedNFT: {
         tokenId: BigInt(777),
         imageUrl: "https://example.com/partial.png",
+        network: "eip155:10",
         metadata: {
           name: "Partial NFT",
           // Missing description and other optional fields
@@ -282,6 +288,7 @@ describe("NFTList Component", () => {
       const newNFT = {
         tokenId: 123n,
         imageUrl: "test.png",
+        network: "eip155:10",
         metadata: { name: "Test NFT", description: "Test", image: "test.png" },
       };
 
diff --git a/website/test/SupportChainModal.test.tsx b/website/test/SupportChainModal.test.tsx
index ec06afc86..07fef9a02 100644
--- a/website/test/SupportChainModal.test.tsx
+++ b/website/test/SupportChainModal.test.tsx
@@ -7,9 +7,9 @@ import "@testing-library/jest-dom";
 // useLocale is globally mocked (test/setup.ts) to echo the raw label key.
 
 describe("SupportChainModal — two states", () => {
-  let onClose: ReturnType<typeof vi.fn>;
-  let onSwitchNetwork: ReturnType<typeof vi.fn>;
-  let onRetry: ReturnType<typeof vi.fn>;
+  let onClose: ReturnType<typeof vi.fn<() => void>>;
+  let onSwitchNetwork: ReturnType<typeof vi.fn<() => void | Promise<void>>>;
+  let onRetry: ReturnType<typeof vi.fn<() => void | Promise<void>>>;
 
   beforeEach(() => {
     onClose = vi.fn();
diff --git a/website/test/WalletOptions.test.tsx b/website/test/WalletOptions.test.tsx
index e556bbfec..2216443ee 100644
--- a/website/test/WalletOptions.test.tsx
+++ b/website/test/WalletOptions.test.tsx
@@ -46,7 +46,7 @@ describe("WalletOptions Component", () => {
       isDisconnected: true,
       isReconnecting: false,
       status: "disconnected",
-    });
+    } as unknown as ReturnType<typeof wagmi.useAccount>);
 
     vi.mocked(wagmi.useEnsName).mockReturnValue({
       data: undefined,
@@ -58,7 +58,7 @@ describe("WalletOptions Component", () => {
       isRefetchError: false,
       isSuccess: false,
       isPlaceholderData: false,
-      status: "idle",
+      status: "pending",
       dataUpdatedAt: 0,
       errorUpdatedAt: 0,
       failureCount: 0,
@@ -72,7 +72,7 @@ describe("WalletOptions Component", () => {
       isStale: false,
       refetch: vi.fn(),
       queryKey: ["ensName"],
-    });
+    } as unknown as ReturnType<typeof wagmi.useEnsName>);
 
     vi.mocked(wagmi.useConnect).mockReturnValue({
       connectors: [],
@@ -92,7 +92,7 @@ describe("WalletOptions Component", () => {
       mutateAsync: vi.fn(),
       submittedAt: 0,
       variables: undefined,
-    });
+    } as unknown as ReturnType<typeof wagmi.useConnect>);
 
     vi.mocked(wagmi.useDisconnect).mockReturnValue({
       disconnect: vi.fn(),
@@ -111,7 +111,7 @@ describe("WalletOptions Component", () => {
       mutateAsync: vi.fn(),
       submittedAt: 0,
       variables: undefined,
-    });
+    } as unknown as ReturnType<typeof wagmi.useDisconnect>);
   });
 
   it("always shows 'Connect Account' initially (hydration safety)", () => {
@@ -131,7 +131,7 @@ describe("WalletOptions Component", () => {
       isDisconnected: false,
       isReconnecting: false,
       status: "connected",
-    });
+    } as unknown as ReturnType<typeof wagmi.useAccount>);
 
     render(<WalletOptions />);
 
@@ -154,7 +154,7 @@ describe("WalletOptions Component", () => {
       isDisconnected: false,
       isReconnecting: false,
       status: "connected",
-    });
+    } as unknown as ReturnType<typeof wagmi.useAccount>);
 
     vi.mocked(wagmi.useEnsName).mockReturnValue({
       data: "test.eth",
@@ -180,7 +180,7 @@ describe("WalletOptions Component", () => {
       isStale: false,
       refetch: vi.fn(),
       queryKey: ["ensName"],
-    });
+    } as unknown as ReturnType<typeof wagmi.useEnsName>);
 
     render(<WalletOptions />);
 
@@ -309,7 +309,7 @@ describe("WalletOptions Component", () => {
       isDisconnected: false,
       isReconnecting: false,
       status: "connected",
-    });
+    } as unknown as ReturnType<typeof wagmi.useAccount>);
 
     const disconnect = vi.fn();
     vi.mocked(wagmi.useDisconnect).mockReturnValue({
diff --git a/website/test/setup.ts b/website/test/setup.ts
index a6e06376a..5f8358da2 100644
--- a/website/test/setup.ts
+++ b/website/test/setup.ts
@@ -35,20 +35,33 @@ export const mockChainId = vi.fn(() => 10); // Default: Optimism
 export const mockSwitchChainAsync = vi.fn().mockResolvedValue(undefined);
 
 // Account Mocks
-export const mockAccountData = vi.fn(() => ({
-  address: "0x123456789abcdef" as `0x${string}`,
-  isConnected: false,
-  status: "disconnected" as const,
-  isConnecting: false,
-  isDisconnected: true,
-  isReconnecting: false,
-}));
+interface MockAccountData {
+  address: `0x${string}` | undefined;
+  isConnected: boolean;
+  status: "connected" | "reconnecting" | "connecting" | "disconnected";
+  isConnecting: boolean;
+  isDisconnected: boolean;
+  isReconnecting: boolean;
+  chainId?: number;
+}
+
+export const mockAccountData = vi.fn(
+  (): MockAccountData => ({
+    address: "0x123456789abcdef" as `0x${string}`,
+    isConnected: false,
+    status: "disconnected",
+    isConnecting: false,
+    isDisconnected: true,
+    isReconnecting: false,
+  }),
+);
 
 // Contract Mocks
 export const mockReadContractData = vi.fn(() => ({
-  data: undefined,
+  data: undefined as unknown,
   error: null,
   isPending: false,
+  isLoading: false,
   refetch: vi.fn(),
 }));
 
@@ -57,6 +70,7 @@ export const mockWriteContractData = vi.fn(() => ({
   writeContractAsync: vi.fn(),
   isPending: false,
   error: null,
+  data: undefined as unknown,
 }));
 
 // =============================================================================
diff --git a/website/test/useGrowthApi.test.ts b/website/test/useGrowthApi.test.ts
index cda616139..0e76a09d1 100644
--- a/website/test/useGrowthApi.test.ts
+++ b/website/test/useGrowthApi.test.ts
@@ -16,7 +16,7 @@ describe("useGrowthApi", () => {
     vi.mocked(useAccount).mockReturnValue({
       address: OWNER_ADDRESS,
       isConnected: true,
-    } as ReturnType<typeof useAccount>);
+    } as unknown as ReturnType<typeof useAccount>);
 
     vi.mocked(useSignMessage).mockReturnValue({
       signMessageAsync: mockSignMessageAsync,
@@ -151,7 +151,7 @@ describe("useGrowthApi", () => {
     vi.mocked(useAccount).mockReturnValue({
       address: undefined,
       isConnected: false,
-    } as ReturnType<typeof useAccount>);
+    } as unknown as ReturnType<typeof useAccount>);
 
     const { result } = renderHook(() => useGrowthApi());
     await expect(result.current.fetchDrafts()).rejects.toThrow("Wallet not connected");
@@ -221,7 +221,7 @@ describe("useGrowthApi", () => {
       vi.mocked(useAccount).mockReturnValue({
         address: "0x1111111111111111111111111111111111111111",
         isConnected: true,
-      } as ReturnType<typeof useAccount>);
+      } as unknown as ReturnType<typeof useAccount>);
       rerender();
 
       await result.current.fetchDrafts();
diff --git a/website/test/useSupportAction.test.ts b/website/test/useSupportAction.test.ts
index 184037dad..33ce3520c 100644
--- a/website/test/useSupportAction.test.ts
+++ b/website/test/useSupportAction.test.ts
@@ -93,7 +93,7 @@ describe("useSupportAction", () => {
       chainId: 10, // Optimism Mainnet
       address: "0x1234567890abcdef1234567890abcdef12345678",
       connector: { name: "MetaMask" },
-    } as ReturnType<typeof useAccount>);
+    } as unknown as ReturnType<typeof useAccount>);
 
     vi.mocked(useChainId).mockReturnValue(10);
 
@@ -143,7 +143,7 @@ describe("useSupportAction", () => {
         chainId: 10, // Optimism Mainnet
         address: "0x1234",
         connector: { name: "MetaMask" },
-      } as ReturnType<typeof useAccount>);
+      } as unknown as ReturnType<typeof useAccount>);
 
       const { result } = renderHook(() => useSupportAction("/blog/test"));
 
@@ -158,7 +158,7 @@ describe("useSupportAction", () => {
         chainId: 8453, // Base Mainnet
         address: "0x1234",
         connector: { name: "MetaMask" },
-      } as ReturnType<typeof useAccount>);
+      } as unknown as ReturnType<typeof useAccount>);
 
       const { result } = renderHook(() => useSupportAction("/blog/test"));
 
@@ -172,7 +172,7 @@ describe("useSupportAction", () => {
         chainId: 1, // Ethereum mainnet - not supported
         address: "0x1234",
         connector: { name: "MetaMask" },
-      } as ReturnType<typeof useAccount>);
+      } as unknown as ReturnType<typeof useAccount>);
 
       const { result } = renderHook(() => useSupportAction("/blog/test"));
 
@@ -221,7 +221,7 @@ describe("useSupportAction", () => {
         chainId: 10, // Optimism Mainnet
         address: "0x1234",
         connector: { name: "MetaMask" },
-      } as ReturnType<typeof useAccount>);
+      } as unknown as ReturnType<typeof useAccount>);
 
       const { result } = renderHook(() => useSupportAction("/blog/test"));
 
@@ -256,7 +256,7 @@ describe("useSupportAction", () => {
         chainId: 8453, // Base Mainnet
         address: "0x1234",
         connector: { name: "MetaMask" },
-      } as ReturnType<typeof useAccount>);
+      } as unknown as ReturnType<typeof useAccount>);
 
       const { result } = renderHook(() => useSupportAction("/blog/test"));
 
@@ -277,7 +277,7 @@ describe("useSupportAction", () => {
         chainId: 10,
         address: "0x1234",
         connector: { name: "MetaMask" },
-      } as ReturnType<typeof useAccount>);
+      } as unknown as ReturnType<typeof useAccount>);
 
       // Simulate wagmi surfacing a raw contract-revert error via useWriteContract's `error`
       vi.mocked(useWriteContract).mockReturnValue({
@@ -304,7 +304,7 @@ describe("useSupportAction", () => {
         chainId: 10,
         address: "0x1234",
         connector: { name: "MetaMask" },
-      } as ReturnType<typeof useAccount>);
+      } as unknown as ReturnType<typeof useAccount>);
 
       const rejection = new Error("User rejected the request.");
       rejection.name = "UserRejectedRequestError";
@@ -328,7 +328,7 @@ describe("useSupportAction", () => {
         chainId: 10,
         address: "0x1234",
         connector: { name: "MetaMask" },
-      } as ReturnType<typeof useAccount>);
+      } as unknown as ReturnType<typeof useAccount>);
       // wagmi's getWalletClient can throw (e.g. ConnectorNotConnectedError) instead of resolving falsy.
       vi.mocked(getWalletClient).mockRejectedValue(new Error("ConnectorNotConnectedError"));
 
@@ -348,7 +348,7 @@ describe("useSupportAction", () => {
         chainId: 1, // Ethereum mainnet (unsupported)
         address: "0x1234",
         connector: { name: "MetaMask" },
-      } as ReturnType<typeof useAccount>);
+      } as unknown as ReturnType<typeof useAccount>);
       vi.mocked(useChainId).mockReturnValue(1);
 
       const { result } = renderHook(() => useSupportAction("/blog/test"));
@@ -372,7 +372,7 @@ describe("useSupportAction", () => {
         chainId: 8453, // Base Mainnet (supported)
         address: "0x1234",
         connector: { name: "MetaMask" },
-      } as ReturnType<typeof useAccount>);
+      } as unknown as ReturnType<typeof useAccount>);
 
       const { result } = renderHook(() => useSupportAction("/blog/test"));
 
@@ -394,7 +394,7 @@ describe("useSupportAction", () => {
         chainId: 10,
         address: "0x1234",
         connector: { name: "MetaMask" },
-      } as ReturnType<typeof useAccount>);
+      } as unknown as ReturnType<typeof useAccount>);
 
       const { result } = renderHook(() => useSupportAction("/blog/test"));
 
@@ -414,7 +414,7 @@ describe("useSupportAction", () => {
         chainId: 10,
         address: "0x1234",
         connector: { name: "MetaMask" },
-      } as ReturnType<typeof useAccount>);
+      } as unknown as ReturnType<typeof useAccount>);
       vi.mocked(getWalletClient).mockResolvedValue(null as unknown as Awaited<ReturnType<typeof getWalletClient>>);
 
       const { result } = renderHook(() => useSupportAction("/blog/test"));
diff --git a/website/test/useX402ImageGeneration.test.ts b/website/test/useX402ImageGeneration.test.ts
index ed83d43b1..a2e9b774a 100644
--- a/website/test/useX402ImageGeneration.test.ts
+++ b/website/test/useX402ImageGeneration.test.ts
@@ -22,7 +22,7 @@ describe("useX402ImageGeneration", () => {
       vi.mocked(useAccount).mockReturnValue({
         isConnected: false,
         address: undefined,
-      } as ReturnType<typeof useAccount>);
+      } as unknown as ReturnType<typeof useAccount>);
 
       const { result } = renderHook(() => useX402ImageGeneration());
 
@@ -42,7 +42,7 @@ describe("useX402ImageGeneration", () => {
       vi.mocked(useAccount).mockReturnValue({
         isConnected: true,
         address: "0x1234567890123456789012345678901234567890",
-      } as ReturnType<typeof useAccount>);
+      } as unknown as ReturnType<typeof useAccount>);
 
       const { result } = renderHook(() => useX402ImageGeneration());
 
@@ -57,12 +57,13 @@ describe("useX402ImageGeneration", () => {
       vi.mocked(useAccount).mockReturnValue({
         isConnected: false,
         address: undefined,
-      } as ReturnType<typeof useAccount>);
+      } as unknown as ReturnType<typeof useAccount>);
 
       const { result } = renderHook(() => useX402ImageGeneration());
 
       const request: X402GenImgRequest = {
         prompt: "Test image",
+        network: "eip155:10",
       };
 
       await expect(result.current.generateImage(request)).rejects.toThrow("Wallet not connected");
@@ -80,7 +81,7 @@ describe("useX402ImageGeneration", () => {
       vi.mocked(useAccount).mockReturnValue({
         isConnected: true,
         address: "0x1234567890123456789012345678901234567890",
-      } as ReturnType<typeof useAccount>);
+      } as unknown as ReturnType<typeof useAccount>);
 
       const { result } = renderHook(() => useX402ImageGeneration());
 
@@ -99,6 +100,7 @@ describe("useX402ImageGeneration", () => {
     it("should accept valid request with prompt only", () => {
       const request: X402GenImgRequest = {
         prompt: "A beautiful sunset over mountains",
+        network: "eip155:10",
       };
 
       expect(request.prompt).toBeDefined();
diff --git a/website/tsconfig.json b/website/tsconfig.json
index b6d2aaec8..2da6d1260 100644
--- a/website/tsconfig.json
+++ b/website/tsconfig.json
@@ -15,7 +15,11 @@
     "lib": ["DOM", "DOM.Iterable", "ESNext"],
     "types": ["vite/client", "vike-react"],
     "jsx": "preserve",
-    "jsxImportSource": "react"
+    "jsxImportSource": "react",
+    "baseUrl": ".",
+    "paths": {
+      "@utils/*": ["./utils/*"]
+    }
   },
   "exclude": ["dist"]
 }
diff --git a/website/types/katex-auto-render.d.ts b/website/types/katex-auto-render.d.ts
new file mode 100644
index 000000000..a9af50c68
--- /dev/null
+++ b/website/types/katex-auto-render.d.ts
@@ -0,0 +1,8 @@
+/**
+ * The installed `katex` package ships no type declarations for this contrib subpath
+ * (only `.js`/`.mjs`, no `.d.ts`, in node_modules/katex/dist/contrib/) — this is the
+ * upstream gap, not a local mistake.
+ */
+declare module "katex/dist/contrib/auto-render" {
+  export default function renderMathInElement(element: Element, options?: Record<string, unknown>): void;
+}
diff --git a/website/types/vike.d.ts b/website/types/vike.d.ts
new file mode 100644
index 000000000..f1b737860
--- /dev/null
+++ b/website/types/vike.d.ts
@@ -0,0 +1,10 @@
+export {};
+
+declare global {
+  namespace Vike {
+    /** Set by pages/+onBeforeRoute.ts from the URL's locale prefix. https://vike.dev/pageContext#typescript */
+    interface PageContext {
+      locale?: string;
+    }
+  }
+}
diff --git a/website/utils/getChain.ts b/website/utils/getChain.ts
index 2e6865287..5aa1693b6 100644
--- a/website/utils/getChain.ts
+++ b/website/utils/getChain.ts
@@ -1,5 +1,5 @@
 import { optimism, optimismSepolia, base, baseSepolia } from "wagmi/chains";
-import SupportV2ABI from "../../eth/abi/contracts/SupportV2.json";
+import { SupportV2ABI } from "../../eth/abi/contracts/SupportV2";
 
 // ═══════════════════════════════════════════════════════════════
 // Chain utilities are now in @fretchen/chain-utils
diff --git a/website/wagmi.config.ts b/website/wagmi.config.ts
index 4f30438b4..335a2f43a 100644
--- a/website/wagmi.config.ts
+++ b/website/wagmi.config.ts
@@ -35,3 +35,15 @@ export const config = createConfig({
     [baseSepolia.id]: http(),
   },
 });
+
+/** The literal chain-id union wagmi derives from `config.chains` above. */
+export type ConfiguredChainId = (typeof config)["chains"][number]["id"];
+
+/**
+ * `fromCAIP2` (in @fretchen/chain-utils) is chain-agnostic shared code, so it can only return a
+ * plain `number` — it has no way to know which chains this app configured. Cast at this single,
+ * reviewed point rather than scattering the same cast at every call site.
+ */
+export function asConfiguredChainId(chainId: number): ConfiguredChainId {
+  return chainId as ConfiguredChainId;
+}

From 7eff1f8afd2c7310652c6b749743929ac7e986e4 Mon Sep 17 00:00:00 2001
From: fretchen <polka.99gefiedert@icloud.com>
Date: Thu, 30 Jul 2026 22:52:20 +0200
Subject: [PATCH 2/7] Further cleaning

---
 .github/workflows/ci.yml                        | 5 +++++
 website/components/Link.tsx                     | 2 +-
 website/package.json                            | 1 +
 website/test/ContractChainSelection.test.ts     | 1 +
 website/test/ImageGenerator.fileUpload.test.tsx | 4 ++--
 website/test/NFTCard.test.tsx                   | 1 +
 website/test/SimpleCollectButton.test.tsx       | 5 ++---
 website/test/useConfiguredPublicClient.test.ts  | 1 +
 website/test/useMultiChainNFTs.test.ts          | 1 +
 website/test/useNFTListedStatus.test.ts         | 1 +
 10 files changed, 16 insertions(+), 6 deletions(-)

diff --git a/.github/workflows/ci.yml b/.github/workflows/ci.yml
index 00ddcc998..9d014abb3 100644
--- a/.github/workflows/ci.yml
+++ b/.github/workflows/ci.yml
@@ -48,6 +48,11 @@ jobs:
           cd website
           npm run lint
 
+      - name: Typecheck
+        run: |
+          cd website
+          npm run typecheck
+
       - name: Test build
         run: |
           cd website
diff --git a/website/components/Link.tsx b/website/components/Link.tsx
index 5c42bd84b..ec8942e00 100644
--- a/website/components/Link.tsx
+++ b/website/components/Link.tsx
@@ -19,7 +19,7 @@ export function Link({
   const { urlPathname } = pageContext;
 
   if (!locale && pageContext.locale) {
-    locale = pageContext.locale as string;
+    locale = pageContext.locale;
   }
   if (!locale && !pageContext.locale) {
     locale = defaultLocale;
diff --git a/website/package.json b/website/package.json
index 2784b00a7..2568e4ad6 100644
--- a/website/package.json
+++ b/website/package.json
@@ -6,6 +6,7 @@
     "build:local": "vike build",
     "postbuild": "tsx ./utils/cleanVike.ts && tsx ./utils/generateSitemap.ts && tsx ./utils/checkChunkSizes.ts",
     "preview": "vike preview",
+    "typecheck": "tsc --noEmit",
     "lint": "eslint .",
     "lint:fix": "eslint --fix .",
     "test": "vitest run",
diff --git a/website/test/ContractChainSelection.test.ts b/website/test/ContractChainSelection.test.ts
index 00d345daa..cff122c7e 100644
--- a/website/test/ContractChainSelection.test.ts
+++ b/website/test/ContractChainSelection.test.ts
@@ -8,6 +8,7 @@ vi.mock("../wagmi.config", () => ({
     chains: [],
     transports: {},
   },
+  asConfiguredChainId: (id: number) => id,
 }));
 
 vi.mock("wagmi/actions", () => ({
diff --git a/website/test/ImageGenerator.fileUpload.test.tsx b/website/test/ImageGenerator.fileUpload.test.tsx
index dc18678b9..5f9b3d32d 100644
--- a/website/test/ImageGenerator.fileUpload.test.tsx
+++ b/website/test/ImageGenerator.fileUpload.test.tsx
@@ -93,7 +93,7 @@ describe("ImageGenerator Reference Image Integration", () => {
     it("sollte JPEG Dateien akzeptieren", () => {
       renderWithQuery(<ImageGenerator />);
 
-      const fileInput = screen.getByTestId("reference-image-input") as HTMLInputElement;
+      const fileInput = screen.getByTestId<HTMLInputElement>("reference-image-input");
 
       // Simuliere JPEG File Upload
       const jpegFile = new File(["jpeg content"], "test.jpg", { type: "image/jpeg" });
@@ -108,7 +108,7 @@ describe("ImageGenerator Reference Image Integration", () => {
     it("sollte PNG Dateien akzeptieren", () => {
       renderWithQuery(<ImageGenerator />);
 
-      const fileInput = screen.getByTestId("reference-image-input") as HTMLInputElement;
+      const fileInput = screen.getByTestId<HTMLInputElement>("reference-image-input");
 
       // Simuliere PNG File Upload
       const pngFile = new File(["png content"], "test.png", { type: "image/png" });
diff --git a/website/test/NFTCard.test.tsx b/website/test/NFTCard.test.tsx
index 68caddfdc..741c4f4ae 100644
--- a/website/test/NFTCard.test.tsx
+++ b/website/test/NFTCard.test.tsx
@@ -38,6 +38,7 @@ vi.mock("viem/chains", () => ({
 
 vi.mock("../wagmi.config", () => ({
   config: {},
+  asConfiguredChainId: (id: number) => id,
 }));
 
 // No need to mock getChain - it's just reading env vars and returning constants
diff --git a/website/test/SimpleCollectButton.test.tsx b/website/test/SimpleCollectButton.test.tsx
index 700a65f5a..31f604d0d 100644
--- a/website/test/SimpleCollectButton.test.tsx
+++ b/website/test/SimpleCollectButton.test.tsx
@@ -37,9 +37,8 @@ vi.mock("../utils/wagmi", () => ({
 }));
 
 vi.mock("../layouts/styles", () => ({
-  nftCard: {
-    actionButton: "action-button",
-  },
+  nftCard: {},
+  actionButton: "action-button",
   primaryButton: "primary-button",
 }));
 
diff --git a/website/test/useConfiguredPublicClient.test.ts b/website/test/useConfiguredPublicClient.test.ts
index bf4661cb4..fac0a8d15 100644
--- a/website/test/useConfiguredPublicClient.test.ts
+++ b/website/test/useConfiguredPublicClient.test.ts
@@ -16,6 +16,7 @@ vi.mock("../wagmi.config", () => ({
     chains: [],
     transports: {},
   },
+  asConfiguredChainId: (id: number) => id,
 }));
 
 vi.mock("wagmi/actions", () => ({
diff --git a/website/test/useMultiChainNFTs.test.ts b/website/test/useMultiChainNFTs.test.ts
index 9357ed61b..ab5744911 100644
--- a/website/test/useMultiChainNFTs.test.ts
+++ b/website/test/useMultiChainNFTs.test.ts
@@ -24,6 +24,7 @@ vi.mock("wagmi/actions", () => ({
 // Mock wagmi.config
 vi.mock("../wagmi.config", () => ({
   config: {},
+  asConfiguredChainId: (id: number) => id,
 }));
 
 // Mock chain-utils
diff --git a/website/test/useNFTListedStatus.test.ts b/website/test/useNFTListedStatus.test.ts
index 5b87dc291..677ee8aa0 100644
--- a/website/test/useNFTListedStatus.test.ts
+++ b/website/test/useNFTListedStatus.test.ts
@@ -19,6 +19,7 @@ vi.mock("wagmi/actions", () => ({
 // Mock the wagmi config
 vi.mock("../wagmi.config", () => ({
   config: { testConfig: true },
+  asConfiguredChainId: (id: number) => id,
 }));
 
 // Mock chain-utils

From e9c7f44dc0cbafb2a13bf646d13aea97a3016274 Mon Sep 17 00:00:00 2001
From: fretchen <polka.99gefiedert@icloud.com>
Date: Thu, 30 Jul 2026 23:10:36 +0200
Subject: [PATCH 3/7] Cleaner factory

---
 website/test/GrowthPage.test.tsx              | 103 +++------------
 .../test/ImageGenerator.fileUpload.test.tsx   |  34 ++---
 website/test/ImageGenerator.test.tsx          |  58 +++++----
 website/test/WalletOptions.test.tsx           | 105 +++++++++-------
 website/test/setup.ts                         |  59 +++++++++
 website/test/useGrowthApi.test.ts             |  18 +--
 website/test/useSupportAction.test.ts         | 118 ++++++------------
 website/test/useWalletAuth.test.ts            |  11 +-
 website/test/useWalletConnection.test.ts      |  10 +-
 website/test/useX402Chat.test.ts              |  25 ++--
 website/test/useX402ImageGeneration.test.ts   |  33 ++---
 11 files changed, 266 insertions(+), 308 deletions(-)

diff --git a/website/test/GrowthPage.test.tsx b/website/test/GrowthPage.test.tsx
index 6dc6d5193..8bfe84b2b 100644
--- a/website/test/GrowthPage.test.tsx
+++ b/website/test/GrowthPage.test.tsx
@@ -3,6 +3,7 @@ import { describe, it, expect, vi, beforeEach, afterEach } from "vitest";
 import { render, screen, fireEvent, waitFor, cleanup } from "@testing-library/react";
 import { useAccount, useConnect } from "wagmi";
 import { OWNER_ADDRESS } from "../utils/getChain";
+import { buildAccountData, buildConnectData } from "./setup";
 
 // Mock the new TQ-based growth hooks
 const mockUseGrowthDrafts = vi.fn();
@@ -79,54 +80,34 @@ describe("Growth Page", () => {
   });
 
   it("shows connect prompt when wallet is not connected", () => {
-    vi.mocked(useAccount).mockReturnValue({
-      address: undefined,
-      isConnected: false,
-      status: "disconnected",
-    } as unknown as ReturnType<typeof useAccount>);
+    vi.mocked(useAccount).mockReturnValue(buildAccountData({ address: undefined, isConnected: false, status: "disconnected" }));
 
-    vi.mocked(useConnect).mockReturnValue({
-      connectors: [{ name: "MetaMask" }],
-      connect: vi.fn(),
-    } as unknown as ReturnType<typeof useConnect>);
+    vi.mocked(useConnect).mockReturnValue(buildConnectData({ connectors: [{ name: "MetaMask" }] }));
 
     render(<Page />);
     expect(screen.getByText("Connect Wallet")).toBeInTheDocument();
   });
 
   it("prewarms the growth API on mount even when wallet is not connected", () => {
-    vi.mocked(useAccount).mockReturnValue({
-      address: undefined,
-      isConnected: false,
-      status: "disconnected",
-    } as unknown as ReturnType<typeof useAccount>);
+    vi.mocked(useAccount).mockReturnValue(buildAccountData({ address: undefined, isConnected: false, status: "disconnected" }));
 
-    vi.mocked(useConnect).mockReturnValue({
-      connectors: [{ name: "MetaMask" }],
-      connect: vi.fn(),
-    } as unknown as ReturnType<typeof useConnect>);
+    vi.mocked(useConnect).mockReturnValue(buildConnectData({ connectors: [{ name: "MetaMask" }] }));
 
     render(<Page />);
     expect(mockPrewarmGrowthApi).toHaveBeenCalledOnce();
   });
 
   it("shows owner-only message for wrong address", () => {
-    vi.mocked(useAccount).mockReturnValue({
-      address: "0x1111111111111111111111111111111111111111",
-      isConnected: true,
-      status: "connected",
-    } as unknown as ReturnType<typeof useAccount>);
+    vi.mocked(useAccount).mockReturnValue(
+      buildAccountData({ address: "0x1111111111111111111111111111111111111111", isConnected: true, status: "connected" }),
+    );
 
     render(<Page />);
     expect(screen.getByText("This page is restricted to the site owner.")).toBeInTheDocument();
   });
 
   it("fetches and renders drafts for owner wallet", async () => {
-    vi.mocked(useAccount).mockReturnValue({
-      address: OWNER_ADDRESS,
-      isConnected: true,
-      status: "connected",
-    } as unknown as ReturnType<typeof useAccount>);
+    vi.mocked(useAccount).mockReturnValue(buildAccountData({ address: OWNER_ADDRESS, isConnected: true, status: "connected" }));
 
     render(<Page />);
 
@@ -140,11 +121,7 @@ describe("Growth Page", () => {
   });
 
   it("toggles edit mode with textarea", async () => {
-    vi.mocked(useAccount).mockReturnValue({
-      address: OWNER_ADDRESS,
-      isConnected: true,
-      status: "connected",
-    } as unknown as ReturnType<typeof useAccount>);
+    vi.mocked(useAccount).mockReturnValue(buildAccountData({ address: OWNER_ADDRESS, isConnected: true, status: "connected" }));
 
     render(<Page />);
 
@@ -160,11 +137,7 @@ describe("Growth Page", () => {
   });
 
   it("calls approveDraft when approve flow is completed", async () => {
-    vi.mocked(useAccount).mockReturnValue({
-      address: OWNER_ADDRESS,
-      isConnected: true,
-      status: "connected",
-    } as unknown as ReturnType<typeof useAccount>);
+    vi.mocked(useAccount).mockReturnValue(buildAccountData({ address: OWNER_ADDRESS, isConnected: true, status: "connected" }));
 
     render(<Page />);
 
@@ -189,11 +162,7 @@ describe("Growth Page", () => {
   });
 
   it("calls rejectDraft when reject is clicked", async () => {
-    vi.mocked(useAccount).mockReturnValue({
-      address: OWNER_ADDRESS,
-      isConnected: true,
-      status: "connected",
-    } as unknown as ReturnType<typeof useAccount>);
+    vi.mocked(useAccount).mockReturnValue(buildAccountData({ address: OWNER_ADDRESS, isConnected: true, status: "connected" }));
 
     render(<Page />);
 
@@ -209,11 +178,7 @@ describe("Growth Page", () => {
   });
 
   it("shows empty state for tabs with no drafts", async () => {
-    vi.mocked(useAccount).mockReturnValue({
-      address: OWNER_ADDRESS,
-      isConnected: true,
-      status: "connected",
-    } as unknown as ReturnType<typeof useAccount>);
+    vi.mocked(useAccount).mockReturnValue(buildAccountData({ address: OWNER_ADDRESS, isConnected: true, status: "connected" }));
 
     render(<Page />);
 
@@ -231,11 +196,7 @@ describe("Growth Page", () => {
   it("shows error banner when API call fails", async () => {
     mockUseGrowthDrafts.mockReturnValue({ data: undefined, isPending: false, error: new Error("Network error") });
 
-    vi.mocked(useAccount).mockReturnValue({
-      address: OWNER_ADDRESS,
-      isConnected: true,
-      status: "connected",
-    } as unknown as ReturnType<typeof useAccount>);
+    vi.mocked(useAccount).mockReturnValue(buildAccountData({ address: OWNER_ADDRESS, isConnected: true, status: "connected" }));
 
     render(<Page />);
 
@@ -245,11 +206,7 @@ describe("Growth Page", () => {
   });
 
   it("shows character counter in edit mode", async () => {
-    vi.mocked(useAccount).mockReturnValue({
-      address: OWNER_ADDRESS,
-      isConnected: true,
-      status: "connected",
-    } as unknown as ReturnType<typeof useAccount>);
+    vi.mocked(useAccount).mockReturnValue(buildAccountData({ address: OWNER_ADDRESS, isConnected: true, status: "connected" }));
 
     render(<Page />);
 
@@ -271,11 +228,7 @@ describe("Growth Page", () => {
       error: null,
     });
 
-    vi.mocked(useAccount).mockReturnValue({
-      address: OWNER_ADDRESS,
-      isConnected: true,
-      status: "connected",
-    } as unknown as ReturnType<typeof useAccount>);
+    vi.mocked(useAccount).mockReturnValue(buildAccountData({ address: OWNER_ADDRESS, isConnected: true, status: "connected" }));
 
     render(<Page />);
 
@@ -297,11 +250,7 @@ describe("Growth Page", () => {
       error: null,
     });
 
-    vi.mocked(useAccount).mockReturnValue({
-      address: OWNER_ADDRESS,
-      isConnected: true,
-      status: "connected",
-    } as unknown as ReturnType<typeof useAccount>);
+    vi.mocked(useAccount).mockReturnValue(buildAccountData({ address: OWNER_ADDRESS, isConnected: true, status: "connected" }));
 
     render(<Page />);
 
@@ -314,11 +263,7 @@ describe("Growth Page", () => {
   });
 
   it("shows character count in view mode for owner", async () => {
-    vi.mocked(useAccount).mockReturnValue({
-      address: OWNER_ADDRESS,
-      isConnected: true,
-      status: "connected",
-    } as unknown as ReturnType<typeof useAccount>);
+    vi.mocked(useAccount).mockReturnValue(buildAccountData({ address: OWNER_ADDRESS, isConnected: true, status: "connected" }));
 
     render(<Page />);
 
@@ -328,11 +273,7 @@ describe("Growth Page", () => {
   });
 
   it("calls reset on all mutations when switching tabs", async () => {
-    vi.mocked(useAccount).mockReturnValue({
-      address: OWNER_ADDRESS,
-      isConnected: true,
-      status: "connected",
-    } as unknown as ReturnType<typeof useAccount>);
+    vi.mocked(useAccount).mockReturnValue(buildAccountData({ address: OWNER_ADDRESS, isConnected: true, status: "connected" }));
 
     render(<Page />);
 
@@ -354,11 +295,7 @@ describe("Growth Page", () => {
     // The "calls reset on all mutations" test above verifies reset() is actually invoked.
     mockApproveError = new Error("Approve failed");
 
-    vi.mocked(useAccount).mockReturnValue({
-      address: OWNER_ADDRESS,
-      isConnected: true,
-      status: "connected",
-    } as unknown as ReturnType<typeof useAccount>);
+    vi.mocked(useAccount).mockReturnValue(buildAccountData({ address: OWNER_ADDRESS, isConnected: true, status: "connected" }));
 
     const { rerender } = render(<Page />);
 
diff --git a/website/test/ImageGenerator.fileUpload.test.tsx b/website/test/ImageGenerator.fileUpload.test.tsx
index 5f9b3d32d..519da74b2 100644
--- a/website/test/ImageGenerator.fileUpload.test.tsx
+++ b/website/test/ImageGenerator.fileUpload.test.tsx
@@ -17,26 +17,30 @@ import { screen, fireEvent } from "@testing-library/react";
 import { renderWithQuery } from "./testUtils";
 import { ImageGenerator } from "../components/ImageGenerator";
 import { useAccount, useWalletClient } from "wagmi";
+import { buildAccountData, buildWalletClientData } from "./setup";
 
 // Override wagmi mock for this file to force connected state for all tests
 beforeAll(() => {
-  vi.mocked(useAccount).mockReturnValue({
-    address: "0x1234567890123456789012345678901234567890" as `0x${string}`,
-    isConnected: true,
-    status: "connected",
-    isConnecting: false,
-    isDisconnected: false,
-    isReconnecting: false,
-  } as ReturnType<typeof useAccount>);
+  vi.mocked(useAccount).mockReturnValue(
+    buildAccountData({
+      address: "0x1234567890123456789012345678901234567890" as `0x${string}`,
+      isConnected: true,
+      status: "connected",
+      isConnecting: false,
+      isDisconnected: false,
+      isReconnecting: false,
+    }),
+  );
 
   // Mock wallet client for x402 hook
-
-  vi.mocked(useWalletClient).mockReturnValue({
-    data: {
-      account: { address: "0x1234567890123456789012345678901234567890" },
-      signTypedData: vi.fn(),
-    },
-  } as ReturnType<typeof useWalletClient>);
+  vi.mocked(useWalletClient).mockReturnValue(
+    buildWalletClientData({
+      data: {
+        account: { address: "0x1234567890123456789012345678901234567890" },
+        signTypedData: vi.fn(),
+      },
+    }),
+  );
 });
 
 describe("ImageGenerator Reference Image Integration", () => {
diff --git a/website/test/ImageGenerator.test.tsx b/website/test/ImageGenerator.test.tsx
index 44c8dcf85..bffa00c49 100644
--- a/website/test/ImageGenerator.test.tsx
+++ b/website/test/ImageGenerator.test.tsx
@@ -35,6 +35,7 @@ import { screen, fireEvent } from "@testing-library/react";
 import { renderWithQuery } from "./testUtils";
 import { ImageGenerator } from "../components/ImageGenerator";
 import { useAccount, useConnect, useWalletClient } from "wagmi";
+import { buildAccountData, buildConnectData, buildWalletClientData } from "./setup";
 
 // No need to mock getChain - it's just reading env vars and returning constants
 // The real implementation works fine in tests
@@ -64,11 +65,9 @@ describe("ImageGenerator Component", () => {
   describe("Collapsed State (First-time visitors)", () => {
     it("should render collapsed state when wallet is not connected", () => {
       // Mock disconnected wallet to ensure collapsed state
-      vi.mocked(useAccount).mockReturnValueOnce({
-        address: undefined,
-        isConnected: false,
-        status: "disconnected",
-      } as ReturnType<typeof useAccount>);
+      vi.mocked(useAccount).mockReturnValueOnce(
+        buildAccountData({ address: undefined, isConnected: false, status: "disconnected" }),
+      );
 
       renderWithQuery(<ImageGenerator />);
 
@@ -93,11 +92,9 @@ describe("ImageGenerator Component", () => {
       };
 
       // Ensure disconnected state
-      vi.mocked(useAccount).mockReturnValueOnce({
-        address: undefined,
-        isConnected: false,
-        status: "disconnected",
-      } as ReturnType<typeof useAccount>);
+      vi.mocked(useAccount).mockReturnValueOnce(
+        buildAccountData({ address: undefined, isConnected: false, status: "disconnected" }),
+      );
 
       renderWithQuery(<ImageGenerator {...mockProps} />);
 
@@ -111,16 +108,13 @@ describe("ImageGenerator Component", () => {
       // Create a new mock that we can track
       const mockConnect = vi.fn();
 
-      vi.mocked(useAccount).mockReturnValue({
-        address: undefined,
-        isConnected: false,
-        status: "disconnected",
-      } as ReturnType<typeof useAccount>);
+      vi.mocked(useAccount).mockReturnValue(
+        buildAccountData({ address: undefined, isConnected: false, status: "disconnected" }),
+      );
 
-      vi.mocked(useConnect).mockReturnValue({
-        connect: mockConnect,
-        connectors: [{ id: "mockConnector", name: "Mock Wallet" }],
-      } as unknown as ReturnType<typeof useConnect>);
+      vi.mocked(useConnect).mockReturnValue(
+        buildConnectData({ connect: mockConnect, connectors: [{ id: "mockConnector", name: "Mock Wallet" }] }),
+      );
 
       renderWithQuery(<ImageGenerator />);
 
@@ -140,20 +134,24 @@ describe("ImageGenerator Component", () => {
   describe("Expanded State (Connected users)", () => {
     it("should render expanded state when wallet is connected", () => {
       // Mock connected wallet to ensure expanded state
-      vi.mocked(useAccount).mockReturnValue({
-        address: "0x1234567890123456789012345678901234567890" as `0x${string}`,
-        isConnected: true,
-        status: "connected",
-      } as ReturnType<typeof useAccount>);
+      vi.mocked(useAccount).mockReturnValue(
+        buildAccountData({
+          address: "0x1234567890123456789012345678901234567890" as `0x${string}`,
+          isConnected: true,
+          status: "connected",
+        }),
+      );
 
       // Mock wallet client for x402 hook
 
-      vi.mocked(useWalletClient).mockReturnValue({
-        data: {
-          account: { address: "0x1234567890123456789012345678901234567890" },
-          signTypedData: vi.fn(),
-        },
-      } as ReturnType<typeof useWalletClient>);
+      vi.mocked(useWalletClient).mockReturnValue(
+        buildWalletClientData({
+          data: {
+            account: { address: "0x1234567890123456789012345678901234567890" },
+            signTypedData: vi.fn(),
+          },
+        }),
+      );
 
       renderWithQuery(<ImageGenerator />);
 
diff --git a/website/test/WalletOptions.test.tsx b/website/test/WalletOptions.test.tsx
index 2216443ee..49111ab77 100644
--- a/website/test/WalletOptions.test.tsx
+++ b/website/test/WalletOptions.test.tsx
@@ -3,6 +3,7 @@ import { describe, it, expect, vi, beforeEach, afterEach } from "vitest";
 import { render, screen, waitFor, fireEvent, cleanup } from "@testing-library/react";
 import WalletOptions from "../components/WalletOptions";
 import * as wagmi from "wagmi";
+import { buildAccountData } from "./setup";
 
 // Mock wagmi hooks
 vi.mock("wagmi", () => ({
@@ -35,18 +36,20 @@ describe("WalletOptions Component", () => {
     vi.clearAllMocks();
 
     // Default mocks for hooks
-    vi.mocked(wagmi.useAccount).mockReturnValue({
-      address: undefined,
-      isConnected: false,
-      addresses: undefined,
-      chain: undefined,
-      chainId: undefined,
-      connector: undefined,
-      isConnecting: false,
-      isDisconnected: true,
-      isReconnecting: false,
-      status: "disconnected",
-    } as unknown as ReturnType<typeof wagmi.useAccount>);
+    vi.mocked(wagmi.useAccount).mockReturnValue(
+      buildAccountData({
+        address: undefined,
+        isConnected: false,
+        addresses: undefined,
+        chain: undefined,
+        chainId: undefined,
+        connector: undefined,
+        isConnecting: false,
+        isDisconnected: true,
+        isReconnecting: false,
+        status: "disconnected",
+      }),
+    );
 
     vi.mocked(wagmi.useEnsName).mockReturnValue({
       data: undefined,
@@ -120,18 +123,20 @@ describe("WalletOptions Component", () => {
   });
 
   it("prevents hydration mismatch when wallet is connected", async () => {
-    vi.mocked(wagmi.useAccount).mockReturnValue({
-      address: "0x1234567890abcdef1234567890abcdef12345678" as `0x${string}`,
-      isConnected: true,
-      addresses: ["0x1234567890abcdef1234567890abcdef12345678" as `0x${string}`],
-      chain: undefined,
-      chainId: undefined,
-      connector: undefined,
-      isConnecting: false,
-      isDisconnected: false,
-      isReconnecting: false,
-      status: "connected",
-    } as unknown as ReturnType<typeof wagmi.useAccount>);
+    vi.mocked(wagmi.useAccount).mockReturnValue(
+      buildAccountData({
+        address: "0x1234567890abcdef1234567890abcdef12345678" as `0x${string}`,
+        isConnected: true,
+        addresses: ["0x1234567890abcdef1234567890abcdef12345678" as `0x${string}`],
+        chain: undefined,
+        chainId: undefined,
+        connector: undefined,
+        isConnecting: false,
+        isDisconnected: false,
+        isReconnecting: false,
+        status: "connected",
+      }),
+    );
 
     render(<WalletOptions />);
 
@@ -143,18 +148,20 @@ describe("WalletOptions Component", () => {
   });
 
   it("shows ENS name when available after mount", async () => {
-    vi.mocked(wagmi.useAccount).mockReturnValue({
-      address: "0x1234567890abcdef1234567890abcdef12345678" as `0x${string}`,
-      isConnected: true,
-      addresses: ["0x1234567890abcdef1234567890abcdef12345678" as `0x${string}`],
-      chain: undefined,
-      chainId: undefined,
-      connector: undefined,
-      isConnecting: false,
-      isDisconnected: false,
-      isReconnecting: false,
-      status: "connected",
-    } as unknown as ReturnType<typeof wagmi.useAccount>);
+    vi.mocked(wagmi.useAccount).mockReturnValue(
+      buildAccountData({
+        address: "0x1234567890abcdef1234567890abcdef12345678" as `0x${string}`,
+        isConnected: true,
+        addresses: ["0x1234567890abcdef1234567890abcdef12345678" as `0x${string}`],
+        chain: undefined,
+        chainId: undefined,
+        connector: undefined,
+        isConnecting: false,
+        isDisconnected: false,
+        isReconnecting: false,
+        status: "connected",
+      }),
+    );
 
     vi.mocked(wagmi.useEnsName).mockReturnValue({
       data: "test.eth",
@@ -298,18 +305,20 @@ describe("WalletOptions Component", () => {
   });
 
   it("clicking disconnect calls disconnect", async () => {
-    vi.mocked(wagmi.useAccount).mockReturnValue({
-      address: "0x1234567890abcdef1234567890abcdef12345678" as `0x${string}`,
-      isConnected: true,
-      addresses: ["0x1234567890abcdef1234567890abcdef12345678" as `0x${string}`],
-      chain: undefined,
-      chainId: undefined,
-      connector: undefined,
-      isConnecting: false,
-      isDisconnected: false,
-      isReconnecting: false,
-      status: "connected",
-    } as unknown as ReturnType<typeof wagmi.useAccount>);
+    vi.mocked(wagmi.useAccount).mockReturnValue(
+      buildAccountData({
+        address: "0x1234567890abcdef1234567890abcdef12345678" as `0x${string}`,
+        isConnected: true,
+        addresses: ["0x1234567890abcdef1234567890abcdef12345678" as `0x${string}`],
+        chain: undefined,
+        chainId: undefined,
+        connector: undefined,
+        isConnecting: false,
+        isDisconnected: false,
+        isReconnecting: false,
+        status: "connected",
+      }),
+    );
 
     const disconnect = vi.fn();
     vi.mocked(wagmi.useDisconnect).mockReturnValue({
diff --git a/website/test/setup.ts b/website/test/setup.ts
index 5f8358da2..23e9cc943 100644
--- a/website/test/setup.ts
+++ b/website/test/setup.ts
@@ -1,6 +1,7 @@
 import "@testing-library/jest-dom";
 import { cleanup } from "@testing-library/react";
 import { afterEach, vi } from "vitest";
+import type { useAccount, useConnect, useWalletClient } from "wagmi";
 
 // =============================================================================
 // GLOBAL BROWSER API MOCKS
@@ -34,7 +35,65 @@ vi.stubGlobal("IntersectionObserver", MockIntersectionObserver);
 export const mockChainId = vi.fn(() => 10); // Default: Optimism
 export const mockSwitchChainAsync = vi.fn().mockResolvedValue(undefined);
 
+// =============================================================================
+// SHARED HOOK-RETURN BUILDERS
+// One typed shape per wagmi hook, built once here rather than re-declared as a
+// hand-rolled literal (+ its own `as unknown as ReturnType<typeof useX>` cast) in
+// every test file that mocks it. Callers pass only the fields that differ from the
+// default; the builder owns the cast.
+// =============================================================================
+
+export interface AccountDataOverrides {
+  address?: `0x${string}` | undefined;
+  isConnected?: boolean;
+  status?: "connected" | "reconnecting" | "connecting" | "disconnected";
+  isConnecting?: boolean;
+  isDisconnected?: boolean;
+  isReconnecting?: boolean;
+  chainId?: number;
+  connector?: { name: string } | undefined;
+  addresses?: readonly `0x${string}`[];
+  chain?: unknown;
+}
+
+export function buildAccountData(overrides: AccountDataOverrides = {}): ReturnType<typeof useAccount> {
+  return {
+    address: "0x123456789abcdef" as `0x${string}`,
+    isConnected: false,
+    status: "disconnected",
+    isConnecting: false,
+    isDisconnected: true,
+    isReconnecting: false,
+    ...overrides,
+  } as unknown as ReturnType<typeof useAccount>;
+}
+
+interface WalletClientDataOverrides {
+  data?: Record<string, unknown> | undefined;
+}
+
+export function buildWalletClientData(overrides: WalletClientDataOverrides = {}): ReturnType<typeof useWalletClient> {
+  return { data: undefined, ...overrides } as unknown as ReturnType<typeof useWalletClient>;
+}
+
+interface ConnectDataOverrides {
+  connectors?: unknown[];
+  connect?: ReturnType<typeof vi.fn>;
+}
+
+export function buildConnectData(overrides: ConnectDataOverrides = {}): ReturnType<typeof useConnect> {
+  return { connectors: [], connect: vi.fn(), ...overrides } as unknown as ReturnType<typeof useConnect>;
+}
+
 // Account Mocks
+//
+// `mockAccountData` deliberately keeps its own loose `MockAccountData` shape rather
+// than `ReturnType<typeof useAccount>`: it's consumed inside the untyped
+// `vi.mock("wagmi", ...)` factory below, and `.mockReturnValue()` on it is called
+// directly with plain literals (MOCK_CONNECTED_ACCOUNT, etc.) by this file and
+// others — those aren't checked against wagmi's real return type. `buildAccountData`
+// (above) is the strictly-typed one, for call sites that mock the real imported
+// `useAccount` hook directly via `vi.mocked(useAccount)`.
 interface MockAccountData {
   address: `0x${string}` | undefined;
   isConnected: boolean;
diff --git a/website/test/useGrowthApi.test.ts b/website/test/useGrowthApi.test.ts
index 0e76a09d1..43d9235b8 100644
--- a/website/test/useGrowthApi.test.ts
+++ b/website/test/useGrowthApi.test.ts
@@ -2,6 +2,7 @@ import { describe, it, expect, vi, beforeEach, afterEach } from "vitest";
 import { renderHook } from "@testing-library/react";
 import { useAccount, useSignMessage } from "wagmi";
 import { useGrowthApi, clearAuthCacheForTesting } from "../hooks/useGrowthApi";
+import { buildAccountData } from "./setup";
 
 const OWNER_ADDRESS = "0xAAEBC1441323B8ad6Bdf6793A8428166b510239C";
 
@@ -13,10 +14,7 @@ describe("useGrowthApi", () => {
     clearAuthCacheForTesting(); // isolate module-level cache between tests
     globalThis.fetch = vi.fn();
 
-    vi.mocked(useAccount).mockReturnValue({
-      address: OWNER_ADDRESS,
-      isConnected: true,
-    } as unknown as ReturnType<typeof useAccount>);
+    vi.mocked(useAccount).mockReturnValue(buildAccountData({ address: OWNER_ADDRESS, isConnected: true }));
 
     vi.mocked(useSignMessage).mockReturnValue({
       signMessageAsync: mockSignMessageAsync,
@@ -148,10 +146,7 @@ describe("useGrowthApi", () => {
   });
 
   it("throws when wallet not connected", async () => {
-    vi.mocked(useAccount).mockReturnValue({
-      address: undefined,
-      isConnected: false,
-    } as unknown as ReturnType<typeof useAccount>);
+    vi.mocked(useAccount).mockReturnValue(buildAccountData({ address: undefined, isConnected: false }));
 
     const { result } = renderHook(() => useGrowthApi());
     await expect(result.current.fetchDrafts()).rejects.toThrow("Wallet not connected");
@@ -218,10 +213,9 @@ describe("useGrowthApi", () => {
       expect(mockSignMessageAsync).toHaveBeenCalledTimes(1);
 
       // Switch wallet address
-      vi.mocked(useAccount).mockReturnValue({
-        address: "0x1111111111111111111111111111111111111111",
-        isConnected: true,
-      } as unknown as ReturnType<typeof useAccount>);
+      vi.mocked(useAccount).mockReturnValue(
+        buildAccountData({ address: "0x1111111111111111111111111111111111111111", isConnected: true }),
+      );
       rerender();
 
       await result.current.fetchDrafts();
diff --git a/website/test/useSupportAction.test.ts b/website/test/useSupportAction.test.ts
index 33ce3520c..1984ce780 100644
--- a/website/test/useSupportAction.test.ts
+++ b/website/test/useSupportAction.test.ts
@@ -4,6 +4,7 @@ import { useAccount, useWriteContract, useReadContracts, useSwitchChain, useChai
 import { getWalletClient } from "wagmi/actions";
 import { useSupportAction } from "../hooks/useSupportAction";
 import { getSupportV2Config, DEFAULT_SUPPORT_CHAIN, SUPPORT_RECIPIENT_ADDRESS } from "../utils/getChain";
+import { buildAccountData } from "./setup";
 
 // The hook fetches the signer on-demand via getWalletClient(config, { chainId }) from
 // wagmi/actions (avoids the reactive-useWalletClient race right after a chain switch).
@@ -88,12 +89,9 @@ describe("useSupportAction", () => {
     mockSignTypedData.mockResolvedValue(mockSignature);
 
     // Default mock implementations - use Optimism Mainnet (10)
-    vi.mocked(useAccount).mockReturnValue({
-      isConnected: true,
-      chainId: 10, // Optimism Mainnet
-      address: "0x1234567890abcdef1234567890abcdef12345678",
-      connector: { name: "MetaMask" },
-    } as unknown as ReturnType<typeof useAccount>);
+    vi.mocked(useAccount).mockReturnValue(
+      buildAccountData({ isConnected: true, chainId: 10, address: "0x1234567890abcdef1234567890abcdef12345678", connector: { name: "MetaMask" } }), // Optimism Mainnet
+    );
 
     vi.mocked(useChainId).mockReturnValue(10);
 
@@ -138,12 +136,9 @@ describe("useSupportAction", () => {
 
   describe("Chain Detection", () => {
     it("should initialize hook when on Optimism Mainnet", () => {
-      vi.mocked(useAccount).mockReturnValue({
-        isConnected: true,
-        chainId: 10, // Optimism Mainnet
-        address: "0x1234",
-        connector: { name: "MetaMask" },
-      } as unknown as ReturnType<typeof useAccount>);
+      vi.mocked(useAccount).mockReturnValue(
+        buildAccountData({ isConnected: true, chainId: 10, address: "0x1234", connector: { name: "MetaMask" } }), // Optimism Mainnet
+      );
 
       const { result } = renderHook(() => useSupportAction("/blog/test"));
 
@@ -153,12 +148,9 @@ describe("useSupportAction", () => {
     });
 
     it("should initialize hook when on Base Mainnet", () => {
-      vi.mocked(useAccount).mockReturnValue({
-        isConnected: true,
-        chainId: 8453, // Base Mainnet
-        address: "0x1234",
-        connector: { name: "MetaMask" },
-      } as unknown as ReturnType<typeof useAccount>);
+      vi.mocked(useAccount).mockReturnValue(
+        buildAccountData({ isConnected: true, chainId: 8453, address: "0x1234", connector: { name: "MetaMask" } }), // Base Mainnet
+      );
 
       const { result } = renderHook(() => useSupportAction("/blog/test"));
 
@@ -167,12 +159,9 @@ describe("useSupportAction", () => {
     });
 
     it("should initialize hook when on unsupported chain", () => {
-      vi.mocked(useAccount).mockReturnValue({
-        isConnected: true,
-        chainId: 1, // Ethereum mainnet - not supported
-        address: "0x1234",
-        connector: { name: "MetaMask" },
-      } as unknown as ReturnType<typeof useAccount>);
+      vi.mocked(useAccount).mockReturnValue(
+        buildAccountData({ isConnected: true, chainId: 1, address: "0x1234", connector: { name: "MetaMask" } }), // Ethereum mainnet - not supported
+      );
 
       const { result } = renderHook(() => useSupportAction("/blog/test"));
 
@@ -216,12 +205,9 @@ describe("useSupportAction", () => {
 
   describe("handleSupport", () => {
     it("should call writeContract with correct args on supported chain", async () => {
-      vi.mocked(useAccount).mockReturnValue({
-        isConnected: true,
-        chainId: 10, // Optimism Mainnet
-        address: "0x1234",
-        connector: { name: "MetaMask" },
-      } as unknown as ReturnType<typeof useAccount>);
+      vi.mocked(useAccount).mockReturnValue(
+        buildAccountData({ isConnected: true, chainId: 10, address: "0x1234", connector: { name: "MetaMask" } }), // Optimism Mainnet
+      );
 
       const { result } = renderHook(() => useSupportAction("/blog/test"));
 
@@ -251,12 +237,9 @@ describe("useSupportAction", () => {
     });
 
     it("should use Base Mainnet contract when on Base Mainnet", async () => {
-      vi.mocked(useAccount).mockReturnValue({
-        isConnected: true,
-        chainId: 8453, // Base Mainnet
-        address: "0x1234",
-        connector: { name: "MetaMask" },
-      } as unknown as ReturnType<typeof useAccount>);
+      vi.mocked(useAccount).mockReturnValue(
+        buildAccountData({ isConnected: true, chainId: 8453, address: "0x1234", connector: { name: "MetaMask" } }), // Base Mainnet
+      );
 
       const { result } = renderHook(() => useSupportAction("/blog/test"));
 
@@ -272,12 +255,9 @@ describe("useSupportAction", () => {
     });
 
     it("shows a friendly message instead of the raw on-chain revert error (e.g. insufficient USDC)", async () => {
-      vi.mocked(useAccount).mockReturnValue({
-        isConnected: true,
-        chainId: 10,
-        address: "0x1234",
-        connector: { name: "MetaMask" },
-      } as unknown as ReturnType<typeof useAccount>);
+      vi.mocked(useAccount).mockReturnValue(
+        buildAccountData({ isConnected: true, chainId: 10, address: "0x1234", connector: { name: "MetaMask" } }),
+      );
 
       // Simulate wagmi surfacing a raw contract-revert error via useWriteContract's `error`
       vi.mocked(useWriteContract).mockReturnValue({
@@ -299,12 +279,9 @@ describe("useSupportAction", () => {
     });
 
     it("maps a user-cancelled transaction to a 'cancelled' message, not 'no USDC'", async () => {
-      vi.mocked(useAccount).mockReturnValue({
-        isConnected: true,
-        chainId: 10,
-        address: "0x1234",
-        connector: { name: "MetaMask" },
-      } as unknown as ReturnType<typeof useAccount>);
+      vi.mocked(useAccount).mockReturnValue(
+        buildAccountData({ isConnected: true, chainId: 10, address: "0x1234", connector: { name: "MetaMask" } }),
+      );
 
       const rejection = new Error("User rejected the request.");
       rejection.name = "UserRejectedRequestError";
@@ -323,12 +300,9 @@ describe("useSupportAction", () => {
     });
 
     it("shows the friendly wallet-not-connected message when getWalletClient throws", async () => {
-      vi.mocked(useAccount).mockReturnValue({
-        isConnected: true,
-        chainId: 10,
-        address: "0x1234",
-        connector: { name: "MetaMask" },
-      } as unknown as ReturnType<typeof useAccount>);
+      vi.mocked(useAccount).mockReturnValue(
+        buildAccountData({ isConnected: true, chainId: 10, address: "0x1234", connector: { name: "MetaMask" } }),
+      );
       // wagmi's getWalletClient can throw (e.g. ConnectorNotConnectedError) instead of resolving falsy.
       vi.mocked(getWalletClient).mockRejectedValue(new Error("ConnectorNotConnectedError"));
 
@@ -343,12 +317,9 @@ describe("useSupportAction", () => {
     });
 
     it("should NOT auto-switch or donate on an unsupported chain — surfaces guidance instead", async () => {
-      vi.mocked(useAccount).mockReturnValue({
-        isConnected: true,
-        chainId: 1, // Ethereum mainnet (unsupported)
-        address: "0x1234",
-        connector: { name: "MetaMask" },
-      } as unknown as ReturnType<typeof useAccount>);
+      vi.mocked(useAccount).mockReturnValue(
+        buildAccountData({ isConnected: true, chainId: 1, address: "0x1234", connector: { name: "MetaMask" } }), // Ethereum mainnet (unsupported)
+      );
       vi.mocked(useChainId).mockReturnValue(1);
 
       const { result } = renderHook(() => useSupportAction("/blog/test"));
@@ -367,12 +338,9 @@ describe("useSupportAction", () => {
     });
 
     it("should NOT trigger chain switch on supported chain", async () => {
-      vi.mocked(useAccount).mockReturnValue({
-        isConnected: true,
-        chainId: 8453, // Base Mainnet (supported)
-        address: "0x1234",
-        connector: { name: "MetaMask" },
-      } as unknown as ReturnType<typeof useAccount>);
+      vi.mocked(useAccount).mockReturnValue(
+        buildAccountData({ isConnected: true, chainId: 8453, address: "0x1234", connector: { name: "MetaMask" } }), // Base Mainnet (supported)
+      );
 
       const { result } = renderHook(() => useSupportAction("/blog/test"));
 
@@ -389,12 +357,9 @@ describe("useSupportAction", () => {
       // Regression for the post-switch race: the reactive useWalletClient() is transiently
       // undefined right after a chain switch; getWalletClient resolves the correct client,
       // so no "wallet not connected" error should surface and the donation should proceed.
-      vi.mocked(useAccount).mockReturnValue({
-        isConnected: true,
-        chainId: 10,
-        address: "0x1234",
-        connector: { name: "MetaMask" },
-      } as unknown as ReturnType<typeof useAccount>);
+      vi.mocked(useAccount).mockReturnValue(
+        buildAccountData({ isConnected: true, chainId: 10, address: "0x1234", connector: { name: "MetaMask" } }),
+      );
 
       const { result } = renderHook(() => useSupportAction("/blog/test"));
 
@@ -409,12 +374,9 @@ describe("useSupportAction", () => {
     });
 
     it("shows wallet-not-connected only when no signer can be resolved", async () => {
-      vi.mocked(useAccount).mockReturnValue({
-        isConnected: true,
-        chainId: 10,
-        address: "0x1234",
-        connector: { name: "MetaMask" },
-      } as unknown as ReturnType<typeof useAccount>);
+      vi.mocked(useAccount).mockReturnValue(
+        buildAccountData({ isConnected: true, chainId: 10, address: "0x1234", connector: { name: "MetaMask" } }),
+      );
       vi.mocked(getWalletClient).mockResolvedValue(null as unknown as Awaited<ReturnType<typeof getWalletClient>>);
 
       const { result } = renderHook(() => useSupportAction("/blog/test"));
diff --git a/website/test/useWalletAuth.test.ts b/website/test/useWalletAuth.test.ts
index ac3ee1a40..105e29799 100644
--- a/website/test/useWalletAuth.test.ts
+++ b/website/test/useWalletAuth.test.ts
@@ -2,6 +2,7 @@ import { describe, it, expect, vi, beforeEach, afterEach } from "vitest";
 import { renderHook, act } from "@testing-library/react";
 import { useAccount, useSignMessage } from "wagmi";
 import { useWalletAuth, clearAuthCacheForTesting } from "../hooks/useWalletAuth";
+import { buildAccountData } from "./setup";
 
 // wagmi is globally mocked in test/setup.ts
 
@@ -15,10 +16,7 @@ describe("useWalletAuth", () => {
     clearAuthCacheForTesting();
     vi.clearAllMocks();
 
-    vi.mocked(useAccount).mockReturnValue({
-      address: TEST_ADDRESS,
-      isConnected: true,
-    } as ReturnType<typeof useAccount>);
+    vi.mocked(useAccount).mockReturnValue(buildAccountData({ address: TEST_ADDRESS, isConnected: true }));
 
     vi.mocked(useSignMessage).mockReturnValue({
       signMessageAsync: mockSign,
@@ -118,10 +116,7 @@ describe("useWalletAuth", () => {
   });
 
   it("throws when wallet is not connected (address is undefined)", async () => {
-    vi.mocked(useAccount).mockReturnValue({
-      address: undefined,
-      isConnected: false,
-    } as ReturnType<typeof useAccount>);
+    vi.mocked(useAccount).mockReturnValue(buildAccountData({ address: undefined, isConnected: false }));
 
     const { result } = renderHook(() => useWalletAuth("test-prefix"));
     await expect(result.current()).rejects.toThrow("Wallet not connected");
diff --git a/website/test/useWalletConnection.test.ts b/website/test/useWalletConnection.test.ts
index 31ccf2e48..4954b3c0c 100644
--- a/website/test/useWalletConnection.test.ts
+++ b/website/test/useWalletConnection.test.ts
@@ -2,17 +2,23 @@ import { describe, it, expect, vi, beforeEach } from "vitest";
 import { renderHook, waitFor } from "@testing-library/react";
 import { useAccount, useConnect } from "wagmi";
 import { useWalletConnection } from "../hooks/useWalletConnection";
+import { buildAccountData, buildConnectData, type AccountDataOverrides } from "./setup";
 
 const injectedConnector = { uid: "mm", name: "MetaMask", type: "injected" };
 const wcConnector = { uid: "wc", name: "WalletConnect", type: "walletConnect" };
 
 function mockConnect(connectors: unknown[], connect = vi.fn()) {
-  vi.mocked(useConnect).mockReturnValue({ connectors, connect } as unknown as ReturnType<typeof useConnect>);
+  vi.mocked(useConnect).mockReturnValue(buildConnectData({ connectors, connect }));
   return connect;
 }
 
 function mockAccount(status: string, address?: string) {
-  vi.mocked(useAccount).mockReturnValue({ status, address } as unknown as ReturnType<typeof useAccount>);
+  vi.mocked(useAccount).mockReturnValue(
+    buildAccountData({
+      status: status as AccountDataOverrides["status"],
+      address: address as AccountDataOverrides["address"],
+    }),
+  );
 }
 
 describe("useWalletConnection", () => {
diff --git a/website/test/useX402Chat.test.ts b/website/test/useX402Chat.test.ts
index d1b88701f..c6b62afca 100644
--- a/website/test/useX402Chat.test.ts
+++ b/website/test/useX402Chat.test.ts
@@ -13,6 +13,7 @@ import { renderHook, act } from "@testing-library/react";
 import { useWalletClient, useAccount } from "wagmi";
 import { useX402Chat, WebStorageClientChannelStorage } from "../hooks/useX402Chat";
 import type { X402ChatMessage } from "../types/x402";
+import { buildAccountData, buildWalletClientData } from "./setup";
 
 const mockRegister = vi.fn();
 const mockGetPaymentSettleResponse = vi.fn();
@@ -63,8 +64,8 @@ describe("useX402Chat", () => {
 
   describe("Initial State", () => {
     it("should not be ready when wallet not connected", () => {
-      vi.mocked(useWalletClient).mockReturnValue({ data: undefined } as ReturnType<typeof useWalletClient>);
-      vi.mocked(useAccount).mockReturnValue({ isConnected: false } as ReturnType<typeof useAccount>);
+      vi.mocked(useWalletClient).mockReturnValue(buildWalletClientData());
+      vi.mocked(useAccount).mockReturnValue(buildAccountData({ isConnected: false }));
 
       const { result } = renderHook(() => useX402Chat(NETWORK));
 
@@ -73,8 +74,8 @@ describe("useX402Chat", () => {
     });
 
     it("should be ready when wallet is connected", () => {
-      vi.mocked(useWalletClient).mockReturnValue({ data: mockWalletClient } as ReturnType<typeof useWalletClient>);
-      vi.mocked(useAccount).mockReturnValue({ isConnected: true } as ReturnType<typeof useAccount>);
+      vi.mocked(useWalletClient).mockReturnValue(buildWalletClientData({ data: mockWalletClient }));
+      vi.mocked(useAccount).mockReturnValue(buildAccountData({ isConnected: true }));
 
       const { result } = renderHook(() => useX402Chat(NETWORK));
 
@@ -84,8 +85,8 @@ describe("useX402Chat", () => {
 
   describe("Error Handling", () => {
     it("should throw when sendMessage called without a wallet", async () => {
-      vi.mocked(useWalletClient).mockReturnValue({ data: undefined } as ReturnType<typeof useWalletClient>);
-      vi.mocked(useAccount).mockReturnValue({ isConnected: false } as ReturnType<typeof useAccount>);
+      vi.mocked(useWalletClient).mockReturnValue(buildWalletClientData());
+      vi.mocked(useAccount).mockReturnValue(buildAccountData({ isConnected: false }));
 
       const { result } = renderHook(() => useX402Chat(NETWORK));
       const prompt: X402ChatMessage[] = [{ role: "user", content: "Hi" }];
@@ -96,8 +97,8 @@ describe("useX402Chat", () => {
 
   describe("Paid request (mocked SDK)", () => {
     beforeEach(() => {
-      vi.mocked(useWalletClient).mockReturnValue({ data: mockWalletClient } as ReturnType<typeof useWalletClient>);
-      vi.mocked(useAccount).mockReturnValue({ isConnected: true } as ReturnType<typeof useAccount>);
+      vi.mocked(useWalletClient).mockReturnValue(buildWalletClientData({ data: mockWalletClient }));
+      vi.mocked(useAccount).mockReturnValue(buildAccountData({ isConnected: true }));
     });
 
     it("registers the batch-settlement scheme on the requested network", async () => {
@@ -302,8 +303,8 @@ describe("useX402Chat", () => {
 
   describe("Agent URL targeting (open-agent-platform)", () => {
     beforeEach(() => {
-      vi.mocked(useWalletClient).mockReturnValue({ data: mockWalletClient } as ReturnType<typeof useWalletClient>);
-      vi.mocked(useAccount).mockReturnValue({ isConnected: true } as ReturnType<typeof useAccount>);
+      vi.mocked(useWalletClient).mockReturnValue(buildWalletClientData({ data: mockWalletClient }));
+      vi.mocked(useAccount).mockReturnValue(buildAccountData({ isConnected: true }));
     });
 
     it("POSTs to the provided agentUrl", async () => {
@@ -337,8 +338,8 @@ describe("useX402Chat", () => {
 
   describe("Reset Functionality", () => {
     it("should reset state to initial values", () => {
-      vi.mocked(useWalletClient).mockReturnValue({ data: mockWalletClient } as ReturnType<typeof useWalletClient>);
-      vi.mocked(useAccount).mockReturnValue({ isConnected: true } as ReturnType<typeof useAccount>);
+      vi.mocked(useWalletClient).mockReturnValue(buildWalletClientData({ data: mockWalletClient }));
+      vi.mocked(useAccount).mockReturnValue(buildAccountData({ isConnected: true }));
 
       const { result } = renderHook(() => useX402Chat(NETWORK));
 
diff --git a/website/test/useX402ImageGeneration.test.ts b/website/test/useX402ImageGeneration.test.ts
index a2e9b774a..a20acab55 100644
--- a/website/test/useX402ImageGeneration.test.ts
+++ b/website/test/useX402ImageGeneration.test.ts
@@ -10,6 +10,7 @@ import { renderHook, act } from "@testing-library/react";
 import { useX402ImageGeneration } from "../hooks/useX402ImageGeneration";
 import { useWalletClient, useAccount } from "wagmi";
 import type { X402GenImgRequest } from "../types/x402";
+import { buildAccountData, buildWalletClientData } from "./setup";
 
 describe("useX402ImageGeneration", () => {
   beforeEach(() => {
@@ -18,11 +19,8 @@ describe("useX402ImageGeneration", () => {
 
   describe("Initial State", () => {
     it("should initialize with idle status when wallet not connected", () => {
-      vi.mocked(useWalletClient).mockReturnValue({ data: undefined } as ReturnType<typeof useWalletClient>);
-      vi.mocked(useAccount).mockReturnValue({
-        isConnected: false,
-        address: undefined,
-      } as unknown as ReturnType<typeof useAccount>);
+      vi.mocked(useWalletClient).mockReturnValue(buildWalletClientData());
+      vi.mocked(useAccount).mockReturnValue(buildAccountData({ isConnected: false, address: undefined }));
 
       const { result } = renderHook(() => useX402ImageGeneration());
 
@@ -38,11 +36,10 @@ describe("useX402ImageGeneration", () => {
         signTypedData: vi.fn(),
       };
 
-      vi.mocked(useWalletClient).mockReturnValue({ data: mockWalletClient } as ReturnType<typeof useWalletClient>);
-      vi.mocked(useAccount).mockReturnValue({
-        isConnected: true,
-        address: "0x1234567890123456789012345678901234567890",
-      } as unknown as ReturnType<typeof useAccount>);
+      vi.mocked(useWalletClient).mockReturnValue(buildWalletClientData({ data: mockWalletClient }));
+      vi.mocked(useAccount).mockReturnValue(
+        buildAccountData({ isConnected: true, address: "0x1234567890123456789012345678901234567890" }),
+      );
 
       const { result } = renderHook(() => useX402ImageGeneration());
 
@@ -53,11 +50,8 @@ describe("useX402ImageGeneration", () => {
 
   describe("Error Handling", () => {
     it("should throw error when generateImage called without wallet", async () => {
-      vi.mocked(useWalletClient).mockReturnValue({ data: undefined } as ReturnType<typeof useWalletClient>);
-      vi.mocked(useAccount).mockReturnValue({
-        isConnected: false,
-        address: undefined,
-      } as unknown as ReturnType<typeof useAccount>);
+      vi.mocked(useWalletClient).mockReturnValue(buildWalletClientData());
+      vi.mocked(useAccount).mockReturnValue(buildAccountData({ isConnected: false, address: undefined }));
 
       const { result } = renderHook(() => useX402ImageGeneration());
 
@@ -77,11 +71,10 @@ describe("useX402ImageGeneration", () => {
         signTypedData: vi.fn(),
       };
 
-      vi.mocked(useWalletClient).mockReturnValue({ data: mockWalletClient } as ReturnType<typeof useWalletClient>);
-      vi.mocked(useAccount).mockReturnValue({
-        isConnected: true,
-        address: "0x1234567890123456789012345678901234567890",
-      } as unknown as ReturnType<typeof useAccount>);
+      vi.mocked(useWalletClient).mockReturnValue(buildWalletClientData({ data: mockWalletClient }));
+      vi.mocked(useAccount).mockReturnValue(
+        buildAccountData({ isConnected: true, address: "0x1234567890123456789012345678901234567890" }),
+      );
 
       const { result } = renderHook(() => useX402ImageGeneration());
 

From f6f89f295e501db89da5c268651e0251caf3bb39 Mon Sep 17 00:00:00 2001
From: fretchen <polka.99gefiedert@icloud.com>
Date: Thu, 30 Jul 2026 23:12:17 +0200
Subject: [PATCH 4/7] lint

---
 website/test/GrowthPage.test.tsx      | 62 ++++++++++++++++++++-------
 website/test/useSupportAction.test.ts |  7 ++-
 2 files changed, 53 insertions(+), 16 deletions(-)

diff --git a/website/test/GrowthPage.test.tsx b/website/test/GrowthPage.test.tsx
index 8bfe84b2b..5219d10a6 100644
--- a/website/test/GrowthPage.test.tsx
+++ b/website/test/GrowthPage.test.tsx
@@ -80,7 +80,9 @@ describe("Growth Page", () => {
   });
 
   it("shows connect prompt when wallet is not connected", () => {
-    vi.mocked(useAccount).mockReturnValue(buildAccountData({ address: undefined, isConnected: false, status: "disconnected" }));
+    vi.mocked(useAccount).mockReturnValue(
+      buildAccountData({ address: undefined, isConnected: false, status: "disconnected" }),
+    );
 
     vi.mocked(useConnect).mockReturnValue(buildConnectData({ connectors: [{ name: "MetaMask" }] }));
 
@@ -89,7 +91,9 @@ describe("Growth Page", () => {
   });
 
   it("prewarms the growth API on mount even when wallet is not connected", () => {
-    vi.mocked(useAccount).mockReturnValue(buildAccountData({ address: undefined, isConnected: false, status: "disconnected" }));
+    vi.mocked(useAccount).mockReturnValue(
+      buildAccountData({ address: undefined, isConnected: false, status: "disconnected" }),
+    );
 
     vi.mocked(useConnect).mockReturnValue(buildConnectData({ connectors: [{ name: "MetaMask" }] }));
 
@@ -99,7 +103,11 @@ describe("Growth Page", () => {
 
   it("shows owner-only message for wrong address", () => {
     vi.mocked(useAccount).mockReturnValue(
-      buildAccountData({ address: "0x1111111111111111111111111111111111111111", isConnected: true, status: "connected" }),
+      buildAccountData({
+        address: "0x1111111111111111111111111111111111111111",
+        isConnected: true,
+        status: "connected",
+      }),
     );
 
     render(<Page />);
@@ -107,7 +115,9 @@ describe("Growth Page", () => {
   });
 
   it("fetches and renders drafts for owner wallet", async () => {
-    vi.mocked(useAccount).mockReturnValue(buildAccountData({ address: OWNER_ADDRESS, isConnected: true, status: "connected" }));
+    vi.mocked(useAccount).mockReturnValue(
+      buildAccountData({ address: OWNER_ADDRESS, isConnected: true, status: "connected" }),
+    );
 
     render(<Page />);
 
@@ -121,7 +131,9 @@ describe("Growth Page", () => {
   });
 
   it("toggles edit mode with textarea", async () => {
-    vi.mocked(useAccount).mockReturnValue(buildAccountData({ address: OWNER_ADDRESS, isConnected: true, status: "connected" }));
+    vi.mocked(useAccount).mockReturnValue(
+      buildAccountData({ address: OWNER_ADDRESS, isConnected: true, status: "connected" }),
+    );
 
     render(<Page />);
 
@@ -137,7 +149,9 @@ describe("Growth Page", () => {
   });
 
   it("calls approveDraft when approve flow is completed", async () => {
-    vi.mocked(useAccount).mockReturnValue(buildAccountData({ address: OWNER_ADDRESS, isConnected: true, status: "connected" }));
+    vi.mocked(useAccount).mockReturnValue(
+      buildAccountData({ address: OWNER_ADDRESS, isConnected: true, status: "connected" }),
+    );
 
     render(<Page />);
 
@@ -162,7 +176,9 @@ describe("Growth Page", () => {
   });
 
   it("calls rejectDraft when reject is clicked", async () => {
-    vi.mocked(useAccount).mockReturnValue(buildAccountData({ address: OWNER_ADDRESS, isConnected: true, status: "connected" }));
+    vi.mocked(useAccount).mockReturnValue(
+      buildAccountData({ address: OWNER_ADDRESS, isConnected: true, status: "connected" }),
+    );
 
     render(<Page />);
 
@@ -178,7 +194,9 @@ describe("Growth Page", () => {
   });
 
   it("shows empty state for tabs with no drafts", async () => {
-    vi.mocked(useAccount).mockReturnValue(buildAccountData({ address: OWNER_ADDRESS, isConnected: true, status: "connected" }));
+    vi.mocked(useAccount).mockReturnValue(
+      buildAccountData({ address: OWNER_ADDRESS, isConnected: true, status: "connected" }),
+    );
 
     render(<Page />);
 
@@ -196,7 +214,9 @@ describe("Growth Page", () => {
   it("shows error banner when API call fails", async () => {
     mockUseGrowthDrafts.mockReturnValue({ data: undefined, isPending: false, error: new Error("Network error") });
 
-    vi.mocked(useAccount).mockReturnValue(buildAccountData({ address: OWNER_ADDRESS, isConnected: true, status: "connected" }));
+    vi.mocked(useAccount).mockReturnValue(
+      buildAccountData({ address: OWNER_ADDRESS, isConnected: true, status: "connected" }),
+    );
 
     render(<Page />);
 
@@ -206,7 +226,9 @@ describe("Growth Page", () => {
   });
 
   it("shows character counter in edit mode", async () => {
-    vi.mocked(useAccount).mockReturnValue(buildAccountData({ address: OWNER_ADDRESS, isConnected: true, status: "connected" }));
+    vi.mocked(useAccount).mockReturnValue(
+      buildAccountData({ address: OWNER_ADDRESS, isConnected: true, status: "connected" }),
+    );
 
     render(<Page />);
 
@@ -228,7 +250,9 @@ describe("Growth Page", () => {
       error: null,
     });
 
-    vi.mocked(useAccount).mockReturnValue(buildAccountData({ address: OWNER_ADDRESS, isConnected: true, status: "connected" }));
+    vi.mocked(useAccount).mockReturnValue(
+      buildAccountData({ address: OWNER_ADDRESS, isConnected: true, status: "connected" }),
+    );
 
     render(<Page />);
 
@@ -250,7 +274,9 @@ describe("Growth Page", () => {
       error: null,
     });
 
-    vi.mocked(useAccount).mockReturnValue(buildAccountData({ address: OWNER_ADDRESS, isConnected: true, status: "connected" }));
+    vi.mocked(useAccount).mockReturnValue(
+      buildAccountData({ address: OWNER_ADDRESS, isConnected: true, status: "connected" }),
+    );
 
     render(<Page />);
 
@@ -263,7 +289,9 @@ describe("Growth Page", () => {
   });
 
   it("shows character count in view mode for owner", async () => {
-    vi.mocked(useAccount).mockReturnValue(buildAccountData({ address: OWNER_ADDRESS, isConnected: true, status: "connected" }));
+    vi.mocked(useAccount).mockReturnValue(
+      buildAccountData({ address: OWNER_ADDRESS, isConnected: true, status: "connected" }),
+    );
 
     render(<Page />);
 
@@ -273,7 +301,9 @@ describe("Growth Page", () => {
   });
 
   it("calls reset on all mutations when switching tabs", async () => {
-    vi.mocked(useAccount).mockReturnValue(buildAccountData({ address: OWNER_ADDRESS, isConnected: true, status: "connected" }));
+    vi.mocked(useAccount).mockReturnValue(
+      buildAccountData({ address: OWNER_ADDRESS, isConnected: true, status: "connected" }),
+    );
 
     render(<Page />);
 
@@ -295,7 +325,9 @@ describe("Growth Page", () => {
     // The "calls reset on all mutations" test above verifies reset() is actually invoked.
     mockApproveError = new Error("Approve failed");
 
-    vi.mocked(useAccount).mockReturnValue(buildAccountData({ address: OWNER_ADDRESS, isConnected: true, status: "connected" }));
+    vi.mocked(useAccount).mockReturnValue(
+      buildAccountData({ address: OWNER_ADDRESS, isConnected: true, status: "connected" }),
+    );
 
     const { rerender } = render(<Page />);
 
diff --git a/website/test/useSupportAction.test.ts b/website/test/useSupportAction.test.ts
index 1984ce780..ed403080d 100644
--- a/website/test/useSupportAction.test.ts
+++ b/website/test/useSupportAction.test.ts
@@ -90,7 +90,12 @@ describe("useSupportAction", () => {
 
     // Default mock implementations - use Optimism Mainnet (10)
     vi.mocked(useAccount).mockReturnValue(
-      buildAccountData({ isConnected: true, chainId: 10, address: "0x1234567890abcdef1234567890abcdef12345678", connector: { name: "MetaMask" } }), // Optimism Mainnet
+      buildAccountData({
+        isConnected: true,
+        chainId: 10,
+        address: "0x1234567890abcdef1234567890abcdef12345678",
+        connector: { name: "MetaMask" },
+      }), // Optimism Mainnet
     );
 
     vi.mocked(useChainId).mockReturnValue(10);

From 6edb7e01591e643bd7374dd4cd5c7cc404f441f9 Mon Sep 17 00:00:00 2001
From: fretchen <polka.99gefiedert@icloud.com>
Date: Thu, 30 Jul 2026 23:25:18 +0200
Subject: [PATCH 5/7] clean

---
 comment_service/comments.ts           | 4 ++--
 comment_service/package.json          | 3 ++-
 comment_service/test/comments.test.ts | 5 +++--
 eth/tsconfig.json                     | 3 ++-
 shared/chain-utils/package.json       | 3 ++-
 5 files changed, 11 insertions(+), 7 deletions(-)

diff --git a/comment_service/comments.ts b/comment_service/comments.ts
index d223338c0..206fd1079 100644
--- a/comment_service/comments.ts
+++ b/comment_service/comments.ts
@@ -7,7 +7,7 @@ import crypto from "crypto";
 
 // ── Types ───────────────────────────────────────────────────────────────
 
-interface ScalewayEvent {
+export interface ScalewayEvent {
   httpMethod: string;
   headers?: Record<string, string>;
   queryStringParameters?: Record<string, string>;
@@ -30,7 +30,7 @@ interface CommentPostBody {
   website?: string; // honeypot field
 }
 
-interface HandlerResponse {
+export interface HandlerResponse {
   statusCode: number;
   headers: Record<string, string>;
   body: string;
diff --git a/comment_service/package.json b/comment_service/package.json
index ae21dc7d2..1c2fbda2c 100644
--- a/comment_service/package.json
+++ b/comment_service/package.json
@@ -13,7 +13,8 @@
     "lint:fix": "eslint . --fix",
     "format": "prettier --write \"**/*.{ts,js,json,md}\"",
     "format:check": "prettier --check \"**/*.{ts,js,json,md}\"",
-    "check": "npm run lint && npm run format:check && npm run test:coverage",
+    "typecheck": "tsc --noEmit",
+    "check": "npm run lint && npm run format:check && npm run typecheck && npm run test:coverage",
     "predeploy": "npm run build",
     "deploy": "serverless deploy",
     "info": "serverless info",
diff --git a/comment_service/test/comments.test.ts b/comment_service/test/comments.test.ts
index 37e5daf97..971afa4c6 100644
--- a/comment_service/test/comments.test.ts
+++ b/comment_service/test/comments.test.ts
@@ -3,6 +3,7 @@
  */
 
 import { describe, test, expect, beforeAll, beforeEach, afterEach, vi } from "vitest";
+import type { ScalewayEvent, HandlerResponse } from "../comments";
 
 // Mock the shared S3 client
 const mockListObjects = vi.fn();
@@ -19,10 +20,10 @@ vi.mock("@fretchen/s3-utils", () => ({
 global.fetch = vi.fn() as any;
 
 describe("comments.ts", () => {
-  let handle: (event: Record<string, any>, context: unknown) => Promise<any>;
+  let handle: (event: ScalewayEvent, context: unknown) => Promise<HandlerResponse>;
 
   beforeAll(async () => {
-    const module = await import("../comments.ts");
+    const module = await import("../comments");
     handle = module.handle;
   });
 
diff --git a/eth/tsconfig.json b/eth/tsconfig.json
index 5dde441f0..897642b6c 100644
--- a/eth/tsconfig.json
+++ b/eth/tsconfig.json
@@ -8,5 +8,6 @@
     "strict": true,
     "skipLibCheck": true,
     "resolveJsonModule": true
-  }
+  },
+  "exclude": ["node_modules", "archive"]
 }
diff --git a/shared/chain-utils/package.json b/shared/chain-utils/package.json
index e8951f6cf..49233eb88 100644
--- a/shared/chain-utils/package.json
+++ b/shared/chain-utils/package.json
@@ -17,10 +17,11 @@
   "scripts": {
     "build": "tsc",
     "clean": "rm -rf dist",
+    "typecheck": "tsc --noEmit",
     "lint": "eslint .",
     "format": "prettier --check .",
     "format:fix": "prettier --write .",
-    "check": "npm run lint && npm run format && npm run test:coverage",
+    "check": "npm run lint && npm run format && npm run typecheck && npm run test:coverage",
     "test": "vitest run",
     "test:watch": "vitest",
     "test:coverage": "vitest run --coverage"

From 00c79a125b115de6fca2ed6b583385e8fe0c2cc8 Mon Sep 17 00:00:00 2001
From: fretchen <polka.99gefiedert@icloud.com>
Date: Thu, 30 Jul 2026 23:31:42 +0200
Subject: [PATCH 6/7] clean

---
 website/test/setup.ts | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/website/test/setup.ts b/website/test/setup.ts
index 23e9cc943..0376ee6b9 100644
--- a/website/test/setup.ts
+++ b/website/test/setup.ts
@@ -68,7 +68,7 @@ export function buildAccountData(overrides: AccountDataOverrides = {}): ReturnTy
   } as unknown as ReturnType<typeof useAccount>;
 }
 
-interface WalletClientDataOverrides {
+export interface WalletClientDataOverrides {
   data?: Record<string, unknown> | undefined;
 }
 
@@ -76,7 +76,7 @@ export function buildWalletClientData(overrides: WalletClientDataOverrides = {})
   return { data: undefined, ...overrides } as unknown as ReturnType<typeof useWalletClient>;
 }
 
-interface ConnectDataOverrides {
+export interface ConnectDataOverrides {
   connectors?: unknown[];
   connect?: ReturnType<typeof vi.fn>;
 }

From 4654552ad3e2bf0c4413d6110ac8e32e216c5272 Mon Sep 17 00:00:00 2001
From: fretchen <polka.99gefiedert@icloud.com>
Date: Thu, 30 Jul 2026 23:34:52 +0200
Subject: [PATCH 7/7] clean

---
 website/test/KaTeXRenderer.test.tsx  | 104 +++++++++++++++++++++++++++
 website/test/blog/post_with_math.mdx |  18 +++++
 website/types/mdx.d.ts               |  13 ++++
 3 files changed, 135 insertions(+)
 create mode 100644 website/test/KaTeXRenderer.test.tsx
 create mode 100644 website/test/blog/post_with_math.mdx
 create mode 100644 website/types/mdx.d.ts

diff --git a/website/test/KaTeXRenderer.test.tsx b/website/test/KaTeXRenderer.test.tsx
new file mode 100644
index 000000000..5596798f4
--- /dev/null
+++ b/website/test/KaTeXRenderer.test.tsx
@@ -0,0 +1,104 @@
+/**
+ * LaTeX rendering tests.
+ *
+ * The math pipeline has two halves that can break independently: remark-math turns `$…$`
+ * and `$$…$$` in .mdx into `<code class="language-math">` at build time, and
+ * `useKaTeXRenderer` swaps those for KaTeX markup in the browser. A page that ships the
+ * first half without the second shows raw LaTeX source to the reader, so both are asserted
+ * here — against a fixture in test/blog, never against a real lecture, so that editing
+ * quantum/amo content can never turn this red.
+ */
+import React from "react";
+import { describe, it, expect, vi, afterEach } from "vitest";
+import { render, waitFor } from "@testing-library/react";
+import MathPost from "./blog/post_with_math.mdx";
+import { useKaTeXRenderer } from "../hooks/useKaTeXRenderer";
+
+/** Mirrors how pages/blog/@id/+Page.tsx wires the hook: one ref, rendered once loaded. */
+function MathHarness({ isReady = true }: { isReady?: boolean }) {
+  const ref = React.useRef<HTMLDivElement>(null);
+  useKaTeXRenderer(ref, isReady);
+  return (
+    <div ref={ref} data-testid="content">
+      <MathPost />
+    </div>
+  );
+}
+
+const WAIT = { timeout: 5000 }; // the hook waits 300ms, then dynamically imports katex
+
+afterEach(() => vi.restoreAllMocks());
+
+describe("MDX math authoring (remark-math)", () => {
+  it("compiles $$…$$ and $…$ into math code elements rather than literal dollar signs", () => {
+    // isReady=false keeps the KaTeX pass from running, so this sees the raw build output.
+    const { getByTestId } = render(<MathHarness isReady={false} />);
+    const content = getByTestId("content");
+
+    expect(content.querySelectorAll("code.language-math.math-display").length).toBe(2);
+    expect(content.querySelectorAll("code.language-math.math-inline").length).toBe(2);
+    expect(content.textContent).not.toContain("$");
+  });
+});
+
+describe("useKaTeXRenderer", () => {
+  it("replaces every math element with rendered KaTeX", async () => {
+    const { getByTestId } = render(<MathHarness />);
+    const content = getByTestId("content");
+
+    await waitFor(() => expect(content.querySelector(".katex")).not.toBeNull(), WAIT);
+    await waitFor(() => expect(content.querySelector("code.language-math")).toBeNull(), WAIT);
+
+    // Display and inline math must not collapse into the same mode: the block formula is
+    // the only one that gets .katex-display, the two inline ones stay in the text flow.
+    expect(content.querySelectorAll(".katex-display").length).toBe(1);
+    expect(content.querySelectorAll(".katex").length).toBe(3);
+  });
+
+  it("keeps the surrounding prose intact", async () => {
+    const { getByTestId, getByRole } = render(<MathHarness />);
+    const content = getByTestId("content");
+
+    await waitFor(() => expect(content.querySelector(".katex")).not.toBeNull(), WAIT);
+
+    expect(getByRole("heading", { name: "Harmonic oscillator" })).toBeInTheDocument();
+    expect(content.textContent).toContain("do not commute");
+  });
+
+  it("renders the valid formulas even when one formula is malformed", async () => {
+    // throwOnError: false is the reason a typo in one lecture cannot blank the whole page:
+    // the bad formula degrades to a .katex-error span, its neighbours still render.
+    const { getByTestId } = render(<MathHarness />);
+    const content = getByTestId("content");
+
+    await waitFor(() => expect(content.querySelectorAll(".katex-display").length).toBe(1), WAIT);
+    expect(content.querySelectorAll(".katex-error").length).toBe(1);
+    expect(content.querySelector("code.language-math")).toBeNull(); // nothing left unprocessed
+  });
+
+  it("does nothing until isReady flips true", async () => {
+    const { getByTestId, rerender } = render(<MathHarness isReady={false} />);
+    const content = getByTestId("content");
+
+    await new Promise((resolve) => setTimeout(resolve, 400)); // past the hook's own delay
+    expect(content.querySelector(".katex")).toBeNull();
+    expect(content.querySelectorAll("code.language-math").length).toBe(4);
+
+    rerender(<MathHarness isReady={true} />);
+    await waitFor(() => expect(content.querySelector(".katex")).not.toBeNull(), WAIT);
+  });
+
+  it("drops its pending work when the reader navigates away before it fires", async () => {
+    // Without the cleanup, the timeout would fire against a detached container and React
+    // would log an update-on-unmounted-component error.
+    const error = vi.spyOn(console, "error").mockImplementation(() => {});
+    const { container, unmount } = render(<MathHarness />);
+    const content = container.querySelector("[data-testid='content']")!;
+
+    unmount(); // well inside the hook's 300ms delay
+    await new Promise((resolve) => setTimeout(resolve, 500));
+
+    expect(content.querySelector(".katex")).toBeNull();
+    expect(error).not.toHaveBeenCalled();
+  });
+});
diff --git a/website/test/blog/post_with_math.mdx b/website/test/blog/post_with_math.mdx
new file mode 100644
index 000000000..f89376599
--- /dev/null
+++ b/website/test/blog/post_with_math.mdx
@@ -0,0 +1,18 @@
+---
+publishing_date: 2025-01-15
+title: A Post With Math
+---
+
+## Harmonic oscillator
+
+The two variables $\hat{p}$ and $\hat{x}$ do not commute.
+
+$$
+\hat{H} = \frac{\hat{p}^2}{2m} + \frac{1}{2} m \omega^2 \hat{x}^2
+$$
+
+Broken on purpose, to pin down that a bad formula does not take the page down:
+
+$$
+\frac{1}{
+$$
diff --git a/website/types/mdx.d.ts b/website/types/mdx.d.ts
new file mode 100644
index 000000000..51f3d1e7d
--- /dev/null
+++ b/website/types/mdx.d.ts
@@ -0,0 +1,13 @@
+/**
+ * `.mdx` files are turned into React components by @mdx-js/rollup at build time
+ * (see vite.config.ts / vitest.config.ts). `tsc` has no such plugin, so without this
+ * declaration every direct `import Post from "./foo.mdx"` fails typecheck with TS2307
+ * even though the same import resolves fine in dev, build and vitest.
+ */
+declare module "*.mdx" {
+  import type { MDXProps } from "mdx/types";
+
+  export const frontmatter: Record<string, unknown> | undefined;
+  const MDXComponent: (props: MDXProps) => JSX.Element;
+  export default MDXComponent;
+}