Merge branch 'main' into feat/payment-certificate-deadline-suggester-source-bar-version-history-95-96-97-98

Author: Buildwithlevo

jest.config.js

@@ -11,6 +11,8 @@ const config = {
   },
   testMatch: ["**/__tests__/**/*.(test|spec).(ts|tsx)"],
   testPathIgnorePatterns: ["/node_modules/", "/src/app/search/__tests__/"],
+  collectCoverageFrom: ["src/components/**/*.{ts,tsx}", "!src/components/**/*.d.ts"],
+  coverageThreshold: { global: { branches: 80, functions: 80, lines: 80, statements: 80 } },
 };
 
 module.exports = createJestConfig(config);

next.config.js

@@ -1,3 +1,7 @@
+const withBundleAnalyzer = require("@next/bundle-analyzer")({
+  enabled: process.env.ANALYZE === "true",
+});
+
 /** @type {import('next').NextConfig} */
 const nextConfig = {
   async headers() {
@@ -36,4 +40,4 @@ const nextConfig = {
   },
 };
 
-module.exports = nextConfig;
+module.exports = withBundleAnalyzer(nextConfig);

package-lock.json

@@ -13,6 +13,7 @@
   "dependencies": {
     "@stellar-split/sdk": "^0.1.0",
     "@stellar/freighter-api": "^3.0.0",
+    "@tanstack/react-query": "^5.17.0",
     "canvas-confetti": "^1.9.3",
     "html2canvas": "^1.4.1",
     "next": "14.2.3",
@@ -22,13 +23,10 @@
     "recharts": "^2.12.7"
   },
   "devDependencies": {
+    "@next/bundle-analyzer": "^14.2.3",
     "@playwright/test": "^1.40.0",
     "@testing-library/jest-dom": "^6.9.1",
     "@testing-library/react": "^16.3.2",
-    "@types/canvas-confetti": "^1.9.0",
-    "@types/html2canvas": "^1.0.0",
-    "@types/jest": "^30.0.0",
-    "@types/node": "^20.0.0",
     "@types/react": "^18.3.0",
     "@types/react-dom": "^18.3.0",
     "@testing-library/jest-dom": "^6.4.0",

package.json

@@ -0,0 +1,49 @@
+import { render, screen } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
+import Button from '@/components/Button';
+
+describe('Button', () => {
+  it('renders children', () => {
+    render(<Button>Click me</Button>);
+    expect(screen.getByRole('button', { name: 'Click me' })).toBeInTheDocument();
+  });
+
+  it('is disabled when disabled prop is true', () => {
+    render(<Button disabled>Click me</Button>);
+    const btn = screen.getByRole('button');
+    expect(btn).toBeDisabled();
+    expect(btn).toHaveAttribute('aria-disabled', 'true');
+  });
+
+  it('shows Loading… and disables when isLoading', () => {
+    render(<Button isLoading>Click me</Button>);
+    const btn = screen.getByRole('button');
+    expect(btn).toHaveTextContent('Loading…');
+    expect(btn).toBeDisabled();
+    expect(btn).toHaveAttribute('aria-disabled', 'true');
+  });
+
+  it('calls onClick when clicked', async () => {
+    const onClick = jest.fn();
+    render(<Button onClick={onClick}>Go</Button>);
+    await userEvent.click(screen.getByRole('button'));
+    expect(onClick).toHaveBeenCalledTimes(1);
+  });
+
+  it('does not call onClick when disabled', async () => {
+    const onClick = jest.fn();
+    render(<Button disabled onClick={onClick}>Go</Button>);
+    await userEvent.click(screen.getByRole('button'));
+    expect(onClick).not.toHaveBeenCalled();
+  });
+
+  it('applies primary variant classes by default', () => {
+    render(<Button>Primary</Button>);
+    expect(screen.getByRole('button')).toHaveClass('bg-indigo-600');
+  });
+
+  it('applies secondary variant classes', () => {
+    render(<Button variant="secondary">Secondary</Button>);
+    expect(screen.getByRole('button')).toHaveClass('bg-gray-700');
+  });
+});

src/__tests__/Button.test.tsx

@@ -0,0 +1,36 @@
+import { act, render, screen } from "@testing-library/react";
+import CountdownTimer from "@/components/CountdownTimer";
+
+describe("CountdownTimer", () => {
+  beforeEach(() => {
+    jest.useFakeTimers();
+    jest.setSystemTime(new Date("2026-06-30T14:00:00.000Z"));
+  });
+
+  afterEach(() => {
+    jest.useRealTimers();
+  });
+
+  it("renders a human-readable countdown and updates every second", () => {
+    const deadline = Math.floor(new Date("2026-07-01T15:00:00.000Z").getTime() / 1000);
+
+    render(<CountdownTimer deadline={deadline} />);
+
+    expect(screen.getByText("1d 1h 0m 0s remaining")).toBeInTheDocument();
+
+    act(() => {
+      jest.advanceTimersByTime(1000);
+    });
+
+    expect(screen.getByText("1d 0h 59m 59s remaining")).toBeInTheDocument();
+  });
+
+  it("shows the absolute expiration date in the tooltip", () => {
+    const deadline = Math.floor(new Date("2026-07-01T15:00:00.000Z").getTime() / 1000);
+
+    render(<CountdownTimer deadline={deadline} />);
+
+    const timer = screen.getByText("1d 1h 0m 0s remaining");
+    expect(timer).toHaveAttribute("title", "Expires July 1, 2026 at 15:00 UTC");
+  });
+});

src/__tests__/CountdownTimer.test.tsx

@@ -0,0 +1,58 @@
+import { render, screen } from '@testing-library/react';
+import PaymentProgress from '@/components/PaymentProgress';
+import type { Invoice } from '@stellar-split/sdk';
+
+jest.mock('@stellar-split/sdk', () => ({
+  formatAmount: (n: bigint) => `${n}`,
+}));
+
+const makeInvoice = (funded: bigint, amount: bigint): Invoice =>
+  ({
+    id: '1',
+    funded,
+    status: 'Pending',
+    deadline: 0,
+    recipients: [{ address: 'GABC', amount }],
+  } as unknown as Invoice);
+
+describe('PaymentProgress', () => {
+  it('renders progressbar role', () => {
+    render(<PaymentProgress funded={0n} total={100n} />);
+    expect(screen.getByRole('progressbar')).toBeInTheDocument();
+  });
+
+  it('shows 0% when nothing funded', () => {
+    render(<PaymentProgress funded={0n} total={100n} />);
+    expect(screen.getByRole('progressbar')).toHaveAttribute('aria-valuenow', '0');
+  });
+
+  it('shows 50% when half funded', () => {
+    render(<PaymentProgress funded={50n} total={100n} />);
+    expect(screen.getByRole('progressbar')).toHaveAttribute('aria-valuenow', '50');
+  });
+
+  it('clamps at 100%', () => {
+    render(<PaymentProgress funded={200n} total={100n} />);
+    expect(screen.getByRole('progressbar')).toHaveAttribute('aria-valuenow', '100');
+  });
+
+  it('shows 0% when total is 0', () => {
+    render(<PaymentProgress funded={0n} total={0n} />);
+    expect(screen.getByRole('progressbar')).toHaveAttribute('aria-valuenow', '0');
+  });
+
+  it('derives amounts from invoice prop', () => {
+    render(<PaymentProgress invoice={makeInvoice(25n, 100n)} />);
+    expect(screen.getByRole('progressbar')).toHaveAttribute('aria-valuenow', '25');
+  });
+
+  it('shows funded/total text when invoice is provided', () => {
+    render(<PaymentProgress invoice={makeInvoice(40n, 200n)} />);
+    expect(screen.getByText(/40.*200.*USDC funded/)).toBeInTheDocument();
+  });
+
+  it('does not show funded text without invoice', () => {
+    render(<PaymentProgress funded={50n} total={100n} />);
+    expect(screen.queryByText(/USDC funded/)).not.toBeInTheDocument();
+  });
+});

src/__tests__/FundingProgress.test.tsx

@@ -0,0 +1,66 @@
+import { render, screen } from '@testing-library/react';
+import InvoiceCard from '@/components/InvoiceCard';
+import type { Invoice } from '@stellar-split/sdk';
+
+jest.mock('@stellar-split/sdk', () => ({
+  formatAmount: (n: bigint) => `${n}`,
+  truncateAddress: (s: string) => `${s.slice(0, 4)}...${s.slice(-4)}`,
+}));
+
+jest.mock('@/components/PaymentProgress', () => () => <div data-testid="payment-progress" />);
+jest.mock('@/components/CountdownTimer', () => () => <div data-testid="countdown-timer" />);
+
+const invoice: Invoice = {
+  id: '42',
+  funded: 50n,
+  status: 'Pending',
+  deadline: 0,
+  recipients: [
+    { address: 'GABCDEF1234', amount: 100n },
+    { address: 'GXYZ9876WXYZ', amount: 100n },
+  ],
+} as unknown as Invoice;
+
+describe('InvoiceCard', () => {
+  it('renders invoice id', () => {
+    render(<InvoiceCard invoice={invoice} />);
+    expect(screen.getByText(/Invoice #42/)).toBeInTheDocument();
+  });
+
+  it('renders status badge', () => {
+    render(<InvoiceCard invoice={invoice} />);
+    expect(screen.getByText('Pending')).toBeInTheDocument();
+  });
+
+  it('renders truncated recipient addresses', () => {
+    render(<InvoiceCard invoice={invoice} />);
+    expect(screen.getByText('GABC...1234')).toBeInTheDocument();
+    expect(screen.getByText('GXYZ...WXYZ')).toBeInTheDocument();
+  });
+
+  it('renders funded amount', () => {
+    render(<InvoiceCard invoice={invoice} />);
+    expect(screen.getByText(/50.*USDC funded/)).toBeInTheDocument();
+  });
+
+  it('renders PaymentProgress', () => {
+    render(<InvoiceCard invoice={invoice} />);
+    expect(screen.getByTestId('payment-progress')).toBeInTheDocument();
+  });
+
+  it('renders displayNumber when provided', () => {
+    render(<InvoiceCard invoice={invoice} displayNumber="INV-001" />);
+    expect(screen.getByText('(INV-001)')).toBeInTheDocument();
+  });
+
+  it('renders CountdownTimer when deadline > 0', () => {
+    const withDeadline = { ...invoice, deadline: Math.floor(Date.now() / 1000) + 3600 };
+    render(<InvoiceCard invoice={withDeadline} />);
+    expect(screen.getByTestId('countdown-timer')).toBeInTheDocument();
+  });
+
+  it('does not render CountdownTimer when deadline is 0', () => {
+    render(<InvoiceCard invoice={invoice} />);
+    expect(screen.queryByTestId('countdown-timer')).not.toBeInTheDocument();
+  });
+});

src/__tests__/InvoiceCard.test.tsx

@@ -0,0 +1,80 @@
+import React from "react";
+import { fireEvent, render, screen, waitFor } from "@testing-library/react";
+import PayModal, { getPaymentErrorMessage } from "@/components/PayModal";
+import type { Invoice } from "@stellar-split/sdk";
+
+const SCALE = 10_000_000n;
+
+jest.mock("@stellar-split/sdk", () => ({
+  formatAmount: (value: bigint) => (Number(value) / 10_000_000).toFixed(2),
+  parseAmount: (value: string) => BigInt(Math.round(Number(value) * 10_000_000)),
+}));
+
+jest.mock("@/lib/stellar", () => ({
+  USDC_CONTRACT_ID: "CUSDC",
+  fetchUsdcBalance: jest.fn().mockResolvedValue(1_000_000_000n),
+}));
+
+jest.mock("@/components/FocusTrap", () => ({
+  __esModule: true,
+  default: function FocusTrap({ children }: { children: React.ReactNode }) {
+    return <>{children}</>;
+  },
+}));
+
+const invoice: Invoice = {
+  id: "inv-286",
+  creator: "GCREATOR",
+  recipients: [{ address: "GPAYER", amount: 50n * SCALE }],
+  token: "CUSDC",
+  deadline: 0,
+  funded: 25n * SCALE,
+  status: "Pending",
+  payments: [{ payer: "GPAYER", amount: 10n * SCALE }],
+};
+
+describe("PayModal", () => {
+  it("defaults to remaining share, shows balance, pays with tip, and renders explorer link", async () => {
+    const onPay = jest.fn().mockResolvedValue({ txHash: "abc123hash" });
+
+    render(
+      <PayModal
+        invoice={invoice}
+        total={100n * SCALE}
+        publicKey="GPAYER"
+        onPay={onPay}
+        onClose={jest.fn()}
+      />
+    );
+
+    const amountInput = await screen.findByLabelText(/amount \(usdc\)/i);
+    expect(amountInput).toHaveValue(40);
+    expect(await screen.findByText(/100.00 USDC available/i)).toBeInTheDocument();
+
+    fireEvent.change(screen.getByLabelText(/tip \(optional\)/i), {
+      target: { value: "2" },
+    });
+    fireEvent.click(screen.getByLabelText(/donate on failure/i));
+    fireEvent.click(screen.getByRole("button", { name: /review & pay/i }));
+    fireEvent.click(screen.getByRole("button", { name: /confirm & pay/i }));
+
+    await waitFor(() =>
+      expect(onPay).toHaveBeenCalledWith(
+        42n * SCALE,
+        undefined,
+        expect.objectContaining({ tip: 2n * SCALE, donateOnFailure: true })
+      )
+    );
+    expect(await screen.findByText(/payment confirmed/i)).toBeInTheDocument();
+    expect(screen.getByRole("link", { name: /view on stellar expert/i })).toHaveAttribute(
+      "href",
+      expect.stringContaining("/abc123hash")
+    );
+  });
+
+  it("maps known payment errors to human-readable messages", () => {
+    expect(getPaymentErrorMessage("insufficient balance")).toMatch(/balance is too low/i);
+    expect(getPaymentErrorMessage("invoice closed")).toMatch(/no longer accepting payments/i);
+    expect(getPaymentErrorMessage("user rejected request")).toMatch(/signing request was cancelled/i);
+  });
+});

src/__tests__/PayModal.test.tsx

@@ -0,0 +1,24 @@
+import { render, screen } from '@testing-library/react';
+import StatusBadge from '@/components/StatusBadge';
+
+describe('StatusBadge', () => {
+  it.each(['Pending', 'Released', 'Refunded'] as const)('renders %s status', (status) => {
+    render(<StatusBadge status={status} />);
+    expect(screen.getByText(status)).toBeInTheDocument();
+  });
+
+  it('applies yellow styles for Pending', () => {
+    render(<StatusBadge status="Pending" />);
+    expect(screen.getByText('Pending')).toHaveClass('text-yellow-600');
+  });
+
+  it('applies green styles for Released', () => {
+    render(<StatusBadge status="Released" />);
+    expect(screen.getByText('Released')).toHaveClass('text-green-600');
+  });
+
+  it('applies gray styles for Refunded', () => {
+    render(<StatusBadge status="Refunded" />);
+    expect(screen.getByText('Refunded')).toHaveClass('text-gray-600');
+  });
+});