@hongming-wang/usdc-bridge-widget 0.1.0

package/src/__tests__/BridgeWidget.test.tsx

@@ -0,0 +1,310 @@
+import { describe, it, expect, vi, beforeEach } from "vitest";
+import { render, screen, fireEvent } from "@testing-library/react";
+import React from "react";
+import { BridgeWidget } from "../BridgeWidget";
+
+// Create mock functions that can be reconfigured
+const mockUseAccount = vi.fn();
+const mockUseChainId = vi.fn();
+const mockUseSwitchChain = vi.fn();
+const mockUseConnect = vi.fn();
+const mockUseWaitForTransactionReceipt = vi.fn();
+const mockUseUSDCBalance = vi.fn();
+const mockUseAllUSDCBalances = vi.fn();
+const mockUseUSDCAllowance = vi.fn();
+const mockUseBridge = vi.fn();
+
+// Mock wagmi hooks
+vi.mock("wagmi", () => ({
+  useAccount: () => mockUseAccount(),
+  useChainId: () => mockUseChainId(),
+  useSwitchChain: () => mockUseSwitchChain(),
+  useWaitForTransactionReceipt: () => mockUseWaitForTransactionReceipt(),
+  useConnect: () => mockUseConnect(),
+}));
+
+// Mock custom hooks
+vi.mock("../hooks", () => ({
+  useUSDCBalance: () => mockUseUSDCBalance(),
+  useAllUSDCBalances: () => mockUseAllUSDCBalances(),
+  useUSDCAllowance: () => mockUseUSDCAllowance(),
+}));
+
+// Mock useBridge hook
+vi.mock("../useBridge", () => ({
+  useBridge: () => mockUseBridge(),
+}));
+
+// Mock chains
+vi.mock("../chains", () => ({
+  DEFAULT_CHAIN_CONFIGS: [
+    {
+      chain: { id: 1, name: "Ethereum" },
+      usdcAddress: "0xA0b86991c6218b36c1d19D4a2e9Eb0cE3606eB48",
+      tokenMessengerAddress: "0x28b5a0e9C621a5BadaA536219b3a228C8168cf5d",
+      iconUrl: "https://example.com/eth.png",
+    },
+    {
+      chain: { id: 8453, name: "Base" },
+      usdcAddress: "0x833589fCD6eDb6E08f4c7C32D4f71b54bdA02913",
+      tokenMessengerAddress: "0x28b5a0e9C621a5BadaA536219b3a228C8168cf5d",
+      iconUrl: "https://example.com/base.png",
+    },
+  ],
+}));
+
+// Mock utils
+vi.mock("../utils", () => ({
+  formatNumber: vi.fn((value: string | number) => {
+    const num = typeof value === "string" ? parseFloat(value) : value;
+    return isNaN(num)
+      ? "0"
+      : num.toLocaleString("en-US", {
+          minimumFractionDigits: 2,
+          maximumFractionDigits: 2,
+        });
+  }),
+  getErrorMessage: vi.fn((error: unknown) => {
+    if (error instanceof Error) return error.message;
+    return "Unknown error";
+  }),
+  validateAmountInput: vi.fn((value: string) => {
+    // Simple validation mock
+    if (value === "" || /^[0-9]*\.?[0-9]*$/.test(value)) {
+      return { isValid: true, sanitized: value };
+    }
+    return { isValid: false, sanitized: "" };
+  }),
+  validateChainConfigs: vi.fn(() => ({ isValid: true, errors: [] })),
+}));
+
+// Mock constants
+vi.mock("../constants", () => ({
+  USDC_BRAND_COLOR: "#2775ca",
+}));
+
+// Default mock values
+function setupDefaultMocks() {
+  mockUseAccount.mockReturnValue({
+    address: "0x1234567890123456789012345678901234567890",
+    isConnected: true,
+  });
+  mockUseChainId.mockReturnValue(1);
+  mockUseSwitchChain.mockReturnValue({
+    switchChainAsync: vi.fn(),
+    isPending: false,
+  });
+  mockUseConnect.mockReturnValue({
+    connect: vi.fn(),
+    connectors: [],
+  });
+  mockUseWaitForTransactionReceipt.mockReturnValue({
+    isLoading: false,
+    isSuccess: false,
+  });
+  mockUseUSDCBalance.mockReturnValue({
+    balance: 1000000000n,
+    balanceFormatted: "1000.00",
+    isLoading: false,
+    refetch: vi.fn(),
+  });
+  mockUseAllUSDCBalances.mockReturnValue({
+    balances: {
+      1: { balance: 1000000000n, formatted: "1000.00" },
+      8453: { balance: 500000000n, formatted: "500.00" },
+    },
+    isLoading: false,
+    refetch: vi.fn(),
+  });
+  mockUseUSDCAllowance.mockReturnValue({
+    allowance: 0n,
+    allowanceFormatted: "0",
+    isLoading: false,
+    isApproving: false,
+    approve: vi.fn(),
+    needsApproval: vi.fn(() => true),
+    refetch: vi.fn(),
+    approvalError: null,
+  });
+  mockUseBridge.mockReturnValue({
+    bridge: vi.fn(),
+    state: { status: "idle", events: [] },
+    reset: vi.fn(),
+  });
+}
+
+describe("BridgeWidget", () => {
+  beforeEach(() => {
+    vi.clearAllMocks();
+    setupDefaultMocks();
+  });
+
+  it("renders the widget container", () => {
+    render(<BridgeWidget />);
+    const widget = screen.getByRole("region", { name: "USDC Bridge Widget" });
+    expect(widget).toBeDefined();
+  });
+
+  it("renders source and destination chain selectors", () => {
+    render(<BridgeWidget />);
+    expect(screen.getByText("From")).toBeDefined();
+    expect(screen.getByText("To")).toBeDefined();
+  });
+
+  it("renders the amount input", () => {
+    render(<BridgeWidget />);
+    expect(screen.getByText("Amount")).toBeDefined();
+    expect(screen.getByPlaceholderText("0.00")).toBeDefined();
+  });
+
+  it("renders balance display", () => {
+    render(<BridgeWidget />);
+    expect(screen.getByText(/Balance:/)).toBeDefined();
+  });
+
+  it("renders MAX button", () => {
+    render(<BridgeWidget />);
+    const maxButton = screen.getByRole("button", {
+      name: "Set maximum amount",
+    });
+    expect(maxButton).toBeDefined();
+  });
+
+  it("renders swap button", () => {
+    render(<BridgeWidget />);
+    const swapButton = screen.getByRole("button", {
+      name: "Swap source and destination chains",
+    });
+    expect(swapButton).toBeDefined();
+  });
+
+  it("shows Approve & Bridge button when approval needed", () => {
+    render(<BridgeWidget />);
+    // Enter an amount first
+    const input = screen.getByPlaceholderText("0.00");
+    fireEvent.change(input, { target: { value: "100" } });
+
+    expect(screen.getByText("Approve & Bridge USDC")).toBeDefined();
+  });
+
+  it("shows Enter Amount when no amount is entered", () => {
+    render(<BridgeWidget />);
+    expect(screen.getByText("Enter Amount")).toBeDefined();
+  });
+
+  it("rejects scientific notation in amount input", () => {
+    render(<BridgeWidget />);
+    const input = screen.getByPlaceholderText("0.00") as HTMLInputElement;
+
+    // Try to enter scientific notation
+    fireEvent.change(input, { target: { value: "1e6" } });
+    expect(input.value).toBe(""); // Should be rejected
+
+    // Valid decimal should work
+    fireEvent.change(input, { target: { value: "100.50" } });
+    expect(input.value).toBe("100.50");
+  });
+
+  it("applies custom className", () => {
+    render(<BridgeWidget className="custom-class" />);
+    const widget = screen.getByRole("region", { name: "USDC Bridge Widget" });
+    expect(widget.className).toBe("custom-class");
+  });
+
+  it("applies custom style", () => {
+    render(<BridgeWidget style={{ backgroundColor: "red" }} />);
+    const widget = screen.getByRole("region", { name: "USDC Bridge Widget" });
+    expect(widget.style.backgroundColor).toBe("red");
+  });
+
+  it("calls onBridgeStart when bridge is initiated", async () => {
+    const onBridgeStart = vi.fn();
+    render(<BridgeWidget onBridgeStart={onBridgeStart} />);
+
+    // Enter an amount
+    const input = screen.getByPlaceholderText("0.00");
+    fireEvent.change(input, { target: { value: "100" } });
+
+    // Click the bridge button
+    const bridgeButton = screen.getByText("Approve & Bridge USDC");
+    fireEvent.click(bridgeButton);
+
+    // onBridgeStart should be called with the default chains
+    expect(onBridgeStart).toHaveBeenCalledWith(
+      expect.objectContaining({
+        sourceChainId: 1,
+        amount: "100",
+      })
+    );
+  });
+});
+
+describe("BridgeWidget - Disconnected State", () => {
+  beforeEach(() => {
+    vi.clearAllMocks();
+    setupDefaultMocks();
+    // Override to disconnected state
+    mockUseAccount.mockReturnValue({
+      address: undefined,
+      isConnected: false,
+    });
+  });
+
+  it("shows Connect Wallet button when disconnected", () => {
+    render(<BridgeWidget />);
+    expect(screen.getByText("Connect Wallet")).toBeDefined();
+  });
+
+  it("calls onConnectWallet when Connect Wallet is clicked", () => {
+    const onConnectWallet = vi.fn();
+    render(<BridgeWidget onConnectWallet={onConnectWallet} />);
+
+    const connectButton = screen.getByText("Connect Wallet");
+    fireEvent.click(connectButton);
+
+    expect(onConnectWallet).toHaveBeenCalled();
+  });
+});
+
+describe("BridgeWidget - Chain Switch Required", () => {
+  beforeEach(() => {
+    vi.clearAllMocks();
+    setupDefaultMocks();
+    // Connected to Base (8453) but source is Ethereum (1)
+    mockUseChainId.mockReturnValue(8453);
+  });
+
+  it("shows Switch Chain button when on wrong network", () => {
+    render(<BridgeWidget />);
+    expect(screen.getByText(/Switch to/)).toBeDefined();
+  });
+});
+
+describe("BridgeWidget - Accessibility", () => {
+  beforeEach(() => {
+    vi.clearAllMocks();
+    setupDefaultMocks();
+  });
+
+  it("has accessible labels for chain selectors", () => {
+    render(<BridgeWidget />);
+
+    // Chain selector buttons should have proper aria attributes
+    const buttons = screen.getAllByRole("button");
+    const chainButtons = buttons.filter(
+      (btn) => btn.getAttribute("aria-haspopup") === "listbox"
+    );
+
+    expect(chainButtons.length).toBe(2);
+    chainButtons.forEach((btn) => {
+      expect(btn.getAttribute("aria-expanded")).toBeDefined();
+    });
+  });
+
+  it("has accessible amount input", () => {
+    render(<BridgeWidget />);
+    const input = screen.getByPlaceholderText("0.00");
+    expect(input.getAttribute("aria-labelledby")).toBeDefined();
+    expect(input.getAttribute("aria-describedby")).toBeDefined();
+  });
+});

package/src/__tests__/chains.test.ts

@@ -0,0 +1,131 @@
+import { describe, it, expect } from "vitest";
+import {
+  createChainConfig,
+  DEFAULT_CHAIN_CONFIGS,
+  unichain,
+  hyperEvm,
+  plume,
+  monad,
+  codex,
+  mainnet,
+} from "../chains";
+import { USDC_ADDRESSES, TOKEN_MESSENGER_V2_ADDRESS } from "../constants";
+
+describe("Custom Chain Definitions", () => {
+  it("unichain has correct chain ID", () => {
+    expect(unichain.id).toBe(130);
+    expect(unichain.name).toBe("Unichain");
+  });
+
+  it("hyperEvm has correct chain ID", () => {
+    expect(hyperEvm.id).toBe(999);
+    expect(hyperEvm.name).toBe("HyperEVM");
+  });
+
+  it("plume has correct chain ID", () => {
+    expect(plume.id).toBe(98866);
+    expect(plume.name).toBe("Plume");
+  });
+
+  it("monad has correct chain ID", () => {
+    expect(monad.id).toBe(10200);
+    expect(monad.name).toBe("Monad");
+  });
+
+  it("codex has correct chain ID", () => {
+    expect(codex.id).toBe(81224);
+    expect(codex.name).toBe("Codex");
+  });
+
+  it("all custom chains have valid RPC URLs", () => {
+    [unichain, hyperEvm, plume, monad, codex].forEach((chain) => {
+      expect(chain.rpcUrls.default.http).toBeDefined();
+      expect(chain.rpcUrls.default.http.length).toBeGreaterThan(0);
+    });
+  });
+});
+
+describe("createChainConfig", () => {
+  it("creates config with default addresses from constants", () => {
+    const config = createChainConfig(mainnet);
+    expect(config.chain).toBe(mainnet);
+    expect(config.usdcAddress).toBe(USDC_ADDRESSES[1]);
+    expect(config.tokenMessengerAddress).toBe(TOKEN_MESSENGER_V2_ADDRESS);
+  });
+
+  it("allows overriding USDC address", () => {
+    const customAddress = "0x1234567890123456789012345678901234567890" as const;
+    const config = createChainConfig(mainnet, { usdcAddress: customAddress });
+    expect(config.usdcAddress).toBe(customAddress);
+  });
+
+  it("allows overriding token messenger address", () => {
+    const customAddress = "0x1234567890123456789012345678901234567890" as const;
+    const config = createChainConfig(mainnet, {
+      tokenMessengerAddress: customAddress,
+    });
+    expect(config.tokenMessengerAddress).toBe(customAddress);
+  });
+
+  it("allows overriding icon URL", () => {
+    const customIcon = "https://example.com/icon.png";
+    const config = createChainConfig(mainnet, { iconUrl: customIcon });
+    expect(config.iconUrl).toBe(customIcon);
+  });
+});
+
+describe("DEFAULT_CHAIN_CONFIGS", () => {
+  it("has multiple chain configurations", () => {
+    expect(DEFAULT_CHAIN_CONFIGS.length).toBeGreaterThan(10);
+  });
+
+  it("all configs have valid chain objects", () => {
+    DEFAULT_CHAIN_CONFIGS.forEach((config) => {
+      expect(config.chain).toBeDefined();
+      expect(config.chain.id).toBeTypeOf("number");
+      expect(config.chain.name).toBeTypeOf("string");
+    });
+  });
+
+  it("all configs have valid USDC addresses", () => {
+    DEFAULT_CHAIN_CONFIGS.forEach((config) => {
+      expect(config.usdcAddress).toMatch(/^0x[a-fA-F0-9]{40}$/);
+    });
+  });
+
+  it("all configs have token messenger addresses", () => {
+    DEFAULT_CHAIN_CONFIGS.forEach((config) => {
+      expect(config.tokenMessengerAddress).toBeDefined();
+      expect(config.tokenMessengerAddress).toMatch(/^0x[a-fA-F0-9]{40}$/);
+    });
+  });
+
+  it("includes Ethereum mainnet", () => {
+    const ethereumConfig = DEFAULT_CHAIN_CONFIGS.find(
+      (c) => c.chain.id === 1
+    );
+    expect(ethereumConfig).toBeDefined();
+    expect(ethereumConfig?.chain.name).toBe("Ethereum");
+  });
+
+  it("includes all supported custom chains", () => {
+    // Note: Monad (10200) is not included as it's not yet supported by Circle Bridge Kit
+    const supportedCustomChainIds = [130, 999, 98866, 81224]; // unichain, hyperEvm, plume, codex
+    supportedCustomChainIds.forEach((id) => {
+      const config = DEFAULT_CHAIN_CONFIGS.find((c) => c.chain.id === id);
+      expect(config).toBeDefined();
+    });
+  });
+
+  it("monad chain is exported but not in defaults (not yet supported)", () => {
+    // Monad is defined for future use but not in DEFAULT_CHAIN_CONFIGS
+    const monadConfig = DEFAULT_CHAIN_CONFIGS.find((c) => c.chain.id === 10200);
+    expect(monadConfig).toBeUndefined();
+  });
+
+  it("has no duplicate chain IDs", () => {
+    const chainIds = DEFAULT_CHAIN_CONFIGS.map((c) => c.chain.id);
+    const uniqueIds = new Set(chainIds);
+    expect(uniqueIds.size).toBe(chainIds.length);
+  });
+});

package/src/__tests__/constants.test.ts

@@ -0,0 +1,77 @@
+import { describe, it, expect } from "vitest";
+import {
+  USDC_DECIMALS,
+  USDC_ADDRESSES,
+  TOKEN_MESSENGER_V2_ADDRESS,
+  TOKEN_MESSENGER_ADDRESSES,
+  CHAIN_ICONS,
+  MAX_USDC_AMOUNT,
+  MIN_USDC_AMOUNT,
+  DEFAULT_LOCALE,
+} from "../constants";
+
+describe("USDC Constants", () => {
+  it("has correct USDC decimals", () => {
+    expect(USDC_DECIMALS).toBe(6);
+  });
+
+  it("has USDC address for Ethereum mainnet", () => {
+    expect(USDC_ADDRESSES[1]).toBe(
+      "0xA0b86991c6218b36c1d19D4a2e9Eb0cE3606eB48"
+    );
+  });
+
+  it("all USDC addresses are valid hex strings", () => {
+    Object.values(USDC_ADDRESSES).forEach((address) => {
+      expect(address).toMatch(/^0x[a-fA-F0-9]{40}$/);
+    });
+  });
+});
+
+describe("Token Messenger Constants", () => {
+  it("has valid V2 address", () => {
+    expect(TOKEN_MESSENGER_V2_ADDRESS).toMatch(/^0x[a-fA-F0-9]{40}$/);
+  });
+
+  it("all chain messenger addresses use V2 address", () => {
+    Object.values(TOKEN_MESSENGER_ADDRESSES).forEach((address) => {
+      expect(address).toBe(TOKEN_MESSENGER_V2_ADDRESS);
+    });
+  });
+
+  it("has messenger addresses for all USDC chains", () => {
+    Object.keys(USDC_ADDRESSES).forEach((chainId) => {
+      expect(TOKEN_MESSENGER_ADDRESSES[Number(chainId)]).toBeDefined();
+    });
+  });
+});
+
+describe("Chain Icons", () => {
+  it("has icon URLs for major chains", () => {
+    expect(CHAIN_ICONS[1]).toBeDefined(); // Ethereum
+    expect(CHAIN_ICONS[42161]).toBeDefined(); // Arbitrum
+    expect(CHAIN_ICONS[8453]).toBeDefined(); // Base
+  });
+
+  it("all icon URLs are valid URLs", () => {
+    Object.values(CHAIN_ICONS).forEach((url) => {
+      expect(url).toMatch(/^https?:\/\/.+/);
+    });
+  });
+});
+
+describe("Amount Constants", () => {
+  it("MAX_USDC_AMOUNT is a reasonable value (100 billion)", () => {
+    expect(MAX_USDC_AMOUNT).toBe("100000000000");
+    expect(parseFloat(MAX_USDC_AMOUNT)).toBe(100_000_000_000);
+  });
+
+  it("MIN_USDC_AMOUNT is smallest USDC unit", () => {
+    expect(MIN_USDC_AMOUNT).toBe("0.000001");
+    expect(parseFloat(MIN_USDC_AMOUNT)).toBe(0.000001);
+  });
+
+  it("DEFAULT_LOCALE is en-US for consistent financial display", () => {
+    expect(DEFAULT_LOCALE).toBe("en-US");
+  });
+});

package/src/__tests__/hooks.test.ts

@@ -0,0 +1,127 @@
+import { describe, it, expect, vi, beforeEach } from "vitest";
+import { renderHook } from "@testing-library/react";
+import { useFormatNumber, useAllUSDCBalances } from "../hooks";
+import type { BridgeChainConfig } from "../types";
+
+// Create mock functions
+const mockUseReadContracts = vi.fn();
+
+// Mock wagmi hooks
+vi.mock("wagmi", () => ({
+  useAccount: vi.fn(() => ({ address: "0x1234567890123456789012345678901234567890" })),
+  useReadContract: vi.fn(() => ({
+    data: 1000000000n,
+    isLoading: false,
+    refetch: vi.fn(),
+  })),
+  useReadContracts: () => mockUseReadContracts(),
+  useWriteContract: vi.fn(() => ({
+    writeContractAsync: vi.fn(),
+    isPending: false,
+  })),
+  useWaitForTransactionReceipt: vi.fn(() => ({
+    isLoading: false,
+    isSuccess: false,
+  })),
+}));
+
+describe("useFormatNumber", () => {
+  it("returns a formatting function", () => {
+    const { result } = renderHook(() => useFormatNumber());
+    expect(typeof result.current).toBe("function");
+  });
+
+  it("formats numbers correctly", () => {
+    const { result } = renderHook(() => useFormatNumber());
+    expect(result.current(1000, 2)).toBe("1,000.00");
+  });
+
+  it("returns stable function reference", () => {
+    const { result, rerender } = renderHook(() => useFormatNumber());
+    const firstRef = result.current;
+    rerender();
+    expect(result.current).toBe(firstRef);
+  });
+});
+
+describe("useAllUSDCBalances", () => {
+  const mockChainConfigs: BridgeChainConfig[] = [
+    {
+      chain: { id: 1, name: "Ethereum" } as BridgeChainConfig["chain"],
+      usdcAddress: "0xA0b86991c6218b36c1d19D4a2e9Eb0cE3606eB48",
+    },
+    {
+      chain: { id: 8453, name: "Base" } as BridgeChainConfig["chain"],
+      usdcAddress: "0x833589fCD6eDb6E08f4c7C32D4f71b54bdA02913",
+    },
+  ];
+
+  beforeEach(() => {
+    vi.clearAllMocks();
+    mockUseReadContracts.mockReturnValue({
+      data: [
+        { status: "success", result: 1000000000n },
+        { status: "success", result: 500000000n },
+      ],
+      isLoading: false,
+      refetch: vi.fn(),
+    });
+  });
+
+  it("returns balances for all chains", () => {
+    const { result } = renderHook(() => useAllUSDCBalances(mockChainConfigs));
+
+    expect(result.current.balances[1]).toBeDefined();
+    expect(result.current.balances[8453]).toBeDefined();
+    expect(result.current.balances[1].balance).toBe(1000000000n);
+    expect(result.current.balances[8453].balance).toBe(500000000n);
+  });
+
+  it("formats balances correctly", () => {
+    const { result } = renderHook(() => useAllUSDCBalances(mockChainConfigs));
+
+    expect(result.current.balances[1].formatted).toBe("1000");
+    expect(result.current.balances[8453].formatted).toBe("500");
+  });
+
+  it("returns loading state", () => {
+    mockUseReadContracts.mockReturnValue({
+      data: undefined,
+      isLoading: true,
+      refetch: vi.fn(),
+    });
+
+    const { result } = renderHook(() => useAllUSDCBalances(mockChainConfigs));
+    expect(result.current.isLoading).toBe(true);
+  });
+
+  it("handles empty results", () => {
+    mockUseReadContracts.mockReturnValue({
+      data: undefined,
+      isLoading: false,
+      refetch: vi.fn(),
+    });
+
+    const { result } = renderHook(() => useAllUSDCBalances(mockChainConfigs));
+    expect(result.current.balances).toEqual({});
+  });
+
+  it("handles failed contract calls", () => {
+    mockUseReadContracts.mockReturnValue({
+      data: [
+        { status: "failure", error: new Error("Failed") },
+        { status: "success", result: 500000000n },
+      ],
+      isLoading: false,
+      refetch: vi.fn(),
+    });
+
+    const { result } = renderHook(() => useAllUSDCBalances(mockChainConfigs));
+
+    // Failed call should return 0
+    expect(result.current.balances[1].balance).toBe(0n);
+    expect(result.current.balances[1].formatted).toBe("0");
+    // Successful call should work
+    expect(result.current.balances[8453].balance).toBe(500000000n);
+  });
+});