From 5af1cc6f205f845d26864f58929b95e09cfb912b Mon Sep 17 00:00:00 2001
From: neumattock <152253273+newmattock@users.noreply.github.com>
Date: Tue, 26 May 2026 10:17:57 -0700
Subject: [PATCH] feat: add invoice PDF export

---
 app/governance/page.tsx                       |   8 +-
 app/pay/[id]/__tests__/PayInvoice.test.tsx    |  73 +++---
 app/pay/[id]/page.tsx                         |  16 +-
 package-lock.json                             | 217 ++++++++++++++++++
 package.json                                  |   1 +
 src/components/InvoicePdfDownloadButton.tsx   | 106 +++++++++
 .../InvoicePdfDownloadButton.test.tsx         |  65 ++++++
 src/utils/__tests__/invoicePdf.test.ts        |  68 ++++++
 src/utils/federation.ts                       |  12 +-
 src/utils/invoicePdf.ts                       |  40 ++++
 10 files changed, 563 insertions(+), 43 deletions(-)
 create mode 100644 src/components/InvoicePdfDownloadButton.tsx
 create mode 100644 src/components/__tests__/InvoicePdfDownloadButton.test.tsx
 create mode 100644 src/utils/__tests__/invoicePdf.test.ts
 create mode 100644 src/utils/invoicePdf.ts

diff --git a/app/governance/page.tsx b/app/governance/page.tsx
index 87a40dd..013ee7e 100644
--- a/app/governance/page.tsx
+++ b/app/governance/page.tsx
@@ -21,6 +21,7 @@ function StatusBadge({ status }: { status: ProposalStatus }) {
     Active: { color: "bg-emerald-500/15 text-emerald-500 border-emerald-500/30", icon: "fiber_manual_record" },
     Passed: { color: "bg-primary/15 text-primary border-primary/30", icon: "check_circle" },
     Failed: { color: "bg-red-500/15 text-red-500 border-red-500/30", icon: "cancel" },
+    Vetoed: { color: "bg-red-500/15 text-red-500 border-red-500/30", icon: "block" },
     Executed: { color: "bg-purple-500/15 text-purple-500 border-purple-500/30", icon: "rocket_launch" },
     Pending: { color: "bg-amber-500/15 text-amber-500 border-amber-500/30", icon: "schedule" },
   };
@@ -172,10 +173,13 @@ export default function GovernancePage() {
   }, []);
 
   useEffect(() => {
-    load();
+    const timeout = window.setTimeout(load, 0);
     // Refresh every 30 s for real-time vote counts
     const interval = setInterval(load, 30_000);
-    return () => clearInterval(interval);
+    return () => {
+      window.clearTimeout(timeout);
+      clearInterval(interval);
+    };
   }, [load]);
 
   const filtered =
diff --git a/app/pay/[id]/__tests__/PayInvoice.test.tsx b/app/pay/[id]/__tests__/PayInvoice.test.tsx
index f4c9ee7..73c4f60 100644
--- a/app/pay/[id]/__tests__/PayInvoice.test.tsx
+++ b/app/pay/[id]/__tests__/PayInvoice.test.tsx
@@ -1,33 +1,47 @@
 import { render, screen, waitFor, fireEvent } from '@testing-library/react';
-import { describe, it, expect, vi, beforeEach, afterEach } from 'vitest';
+import { describe, it, expect, vi, beforeEach } from 'vitest';
 import PayInvoicePage from '../page';
-import * as soroban from '../../../../utils/soroban';
-import { useWallet } from '../../../../context/WalletContext';
-import { useToast } from '../../../../context/ToastContext';
+import * as soroban from '@/utils/soroban';
+import { useWallet } from '@/context/WalletContext';
+import { useToast } from '@/context/ToastContext';
+import type { Invoice } from '@/utils/soroban';
 
 // Mock context and utils
-vi.mock('../../../../context/WalletContext', () => ({
+vi.mock('@/context/WalletContext', () => ({
   useWallet: vi.fn(),
 }));
 
-vi.mock('../../../../context/ToastContext', () => ({
+vi.mock('@/context/ToastContext', () => ({
   useToast: vi.fn(),
 }));
 
-vi.mock('../../../../utils/soroban', () => ({
+vi.mock('@/utils/soroban', () => ({
   getInvoice: vi.fn(),
   markPaid: vi.fn(),
   submitSignedTransaction: vi.fn(),
 }));
 
+vi.mock('@/components/InvoicePdfDownloadButton', () => ({
+  default: () => <button>Download PDF</button>,
+}));
+
+type ParamsPromise = Promise<{ id: string }> & { _resolvedValue?: { id: string } };
+
+function createParams(): ParamsPromise {
+  const params = Promise.resolve({ id: '1' }) as ParamsPromise;
+  params._resolvedValue = { id: '1' };
+  return params;
+}
+
 describe('PayInvoicePage', () => {
-  const mockInvoice = {
+  const mockInvoice: Invoice = {
     id: 1n,
     freelancer: 'GFREELANCER',
     payer: 'GPAYER',
     amount: 1000000000n,
     due_date: 1713960000n,
     status: 'Funded',
+    discount_rate: 300,
   };
 
   const mockToast = {
@@ -37,35 +51,32 @@ describe('PayInvoicePage', () => {
 
   beforeEach(() => {
     vi.clearAllMocks();
-    (useToast as any).mockReturnValue(mockToast);
-    (soroban.getInvoice as any).mockResolvedValue(mockInvoice);
+    vi.mocked(useToast).mockReturnValue(mockToast);
+    vi.mocked(soroban.getInvoice).mockResolvedValue(mockInvoice);
   });
 
   it('should render invoice summary without wallet connection', async () => {
-    (useWallet as any).mockReturnValue({
+    vi.mocked(useWallet).mockReturnValue({
       address: null,
       connect: vi.fn(),
-    });
+    } as ReturnType<typeof useWallet>);
 
-    const params = Promise.resolve({ id: '1' }) as any;
-    params._resolvedValue = { id: '1' };
-    render(<PayInvoicePage params={params} />);
+    render(<PayInvoicePage params={createParams()} />);
 
     await waitFor(() => {
       expect(screen.getByText(/100\s+USDC/)).toBeInTheDocument();
       expect(screen.getByText('Connect Wallet and Pay')).toBeInTheDocument();
+      expect(screen.getByRole('button', { name: /download pdf/i })).toBeInTheDocument();
     });
   });
 
   it('should show warning if connected wallet is not the payer', async () => {
-    (useWallet as any).mockReturnValue({
+    vi.mocked(useWallet).mockReturnValue({
       address: 'GWRONGWALLET',
       connect: vi.fn(),
-    });
+    } as ReturnType<typeof useWallet>);
 
-    const params = Promise.resolve({ id: '1' }) as any;
-    params._resolvedValue = { id: '1' };
-    render(<PayInvoicePage params={params} />);
+    render(<PayInvoicePage params={createParams()} />);
 
     await waitFor(() => {
       expect(screen.getByText('Address Mismatch')).toBeInTheDocument();
@@ -74,18 +85,16 @@ describe('PayInvoicePage', () => {
   });
 
   it('should show confirmation if invoice is already paid', async () => {
-    (soroban.getInvoice as any).mockResolvedValue({
+    vi.mocked(soroban.getInvoice).mockResolvedValue({
       ...mockInvoice,
       status: 'Paid',
     });
 
-    (useWallet as any).mockReturnValue({
+    vi.mocked(useWallet).mockReturnValue({
       address: 'GPAYER',
-    });
+    } as ReturnType<typeof useWallet>);
 
-    const params = Promise.resolve({ id: '1' }) as any;
-    params._resolvedValue = { id: '1' };
-    render(<PayInvoicePage params={params} />);
+    render(<PayInvoicePage params={createParams()} />);
 
     await waitFor(() => {
       expect(screen.getByText('Invoice settled')).toBeInTheDocument();
@@ -95,17 +104,15 @@ describe('PayInvoicePage', () => {
 
   it('should call markPaid when Settle button is clicked', async () => {
     const mockSignTx = vi.fn();
-    (useWallet as any).mockReturnValue({
+    vi.mocked(useWallet).mockReturnValue({
       address: 'GPAYER',
       signTx: mockSignTx,
-    });
+    } as ReturnType<typeof useWallet>);
 
-    (soroban.markPaid as any).mockResolvedValue('mock-tx');
-    (soroban.submitSignedTransaction as any).mockResolvedValue({ txHash: 'hash123' });
+    vi.mocked(soroban.markPaid).mockResolvedValue('mock-tx');
+    vi.mocked(soroban.submitSignedTransaction).mockResolvedValue({ txHash: 'hash123' });
 
-    const params = Promise.resolve({ id: '1' }) as any;
-    params._resolvedValue = { id: '1' };
-    render(<PayInvoicePage params={params} />);
+    render(<PayInvoicePage params={createParams()} />);
 
     await waitFor(() => {
       expect(screen.getByText('Settle Invoice Now')).toBeInTheDocument();
diff --git a/app/pay/[id]/page.tsx b/app/pay/[id]/page.tsx
index 49d1bf2..54950d3 100644
--- a/app/pay/[id]/page.tsx
+++ b/app/pay/[id]/page.tsx
@@ -5,8 +5,9 @@ import { getInvoice, markPaid, submitSignedTransaction, type Invoice } from "@/u
 import { formatUsdcFromStroops } from "@/utils/invoiceSubmission";
 import { useWallet } from "@/context/WalletContext";
 import { useToast } from "@/context/ToastContext";
-import { TESTNET_USDC_TOKEN_ID, NETWORK_NAME } from "@/constants";
+import { NETWORK_NAME } from "@/constants";
 import ActivityFeed from "@/components/ActivityFeed";
+import InvoicePdfDownloadButton from "@/components/InvoicePdfDownloadButton";
 
 type LoadState = "loading" | "success" | "error";
 
@@ -35,7 +36,8 @@ export default function PayInvoicePage({ params }: { params: Promise<{ id: strin
   }, [invoiceId]);
 
   useEffect(() => {
-    fetchInvoice();
+    const timeout = window.setTimeout(fetchInvoice, 0);
+    return () => window.clearTimeout(timeout);
   }, [fetchInvoice]);
 
   const handlePay = async () => {
@@ -59,12 +61,13 @@ export default function PayInvoicePage({ params }: { params: Promise<{ id: strin
       
       // Refresh invoice state
       fetchInvoice();
-    } catch (err: any) {
+    } catch (err: unknown) {
       console.error(err);
+      const message = err instanceof Error ? err.message : "An unexpected error occurred during payment.";
       updateToast(toastId, { 
         type: "error", 
         title: "Payment Failed", 
-        message: err.message || "An unexpected error occurred during payment." 
+        message,
       });
     } finally {
       setIsPaying(false);
@@ -130,7 +133,10 @@ export default function PayInvoicePage({ params }: { params: Promise<{ id: strin
         {/* ── Invoice Summary Card ───────────────────────────────────────── */}
         <section className="rounded-[24px] border border-outline-variant/15 bg-surface-container-lowest p-6 shadow-xl">
           <div className="mb-6">
-            <p className="text-xs font-bold uppercase tracking-[0.24em] text-on-surface-variant mb-4">Invoice Summary</p>
+            <div className="mb-4 flex flex-col gap-3 sm:flex-row sm:items-center sm:justify-between">
+              <p className="text-xs font-bold uppercase tracking-[0.24em] text-on-surface-variant">Invoice Summary</p>
+              <InvoicePdfDownloadButton invoice={invoice} />
+            </div>
             
             <div className="flex flex-col gap-4">
               <div className="flex justify-between items-center border-b border-outline-variant/10 pb-4">
diff --git a/package-lock.json b/package-lock.json
index 67ae34f..8148fa3 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -13,6 +13,7 @@
         "@tanstack/react-query": "^5.100.5",
         "i18next": "^26.0.8",
         "i18next-browser-languagedetector": "^8.2.1",
+        "jspdf": "^4.2.1",
         "lucide-react": "^1.16.0",
         "next": "16.2.4",
         "qrcode.react": "^4.2.0",
@@ -2544,6 +2545,19 @@
         "undici-types": "~6.21.0"
       }
     },
+    "node_modules/@types/pako": {
+      "version": "2.0.4",
+      "resolved": "https://registry.npmjs.org/@types/pako/-/pako-2.0.4.tgz",
+      "integrity": "sha512-VWDCbrLeVXJM9fihYodcLiIv0ku+AlOa/TQ1SvYOaBuyrSKgEcro95LJyIsJ4vSo6BXIxOKxiJAat04CmST9Fw==",
+      "license": "MIT"
+    },
+    "node_modules/@types/raf": {
+      "version": "3.4.3",
+      "resolved": "https://registry.npmjs.org/@types/raf/-/raf-3.4.3.tgz",
+      "integrity": "sha512-c4YAvMedbPZ5tEyxzQdMoOhhJ4RD3rngZIdwC2/qDN3d7JpEhB6fiBRKVY1lg5B7Wk+uPBjn5f39j1/2MY1oOw==",
+      "license": "MIT",
+      "optional": true
+    },
     "node_modules/@types/react": {
       "version": "19.2.14",
       "resolved": "https://registry.npmjs.org/@types/react/-/react-19.2.14.tgz",
@@ -2563,6 +2577,13 @@
         "@types/react": "^19.2.0"
       }
     },
+    "node_modules/@types/trusted-types": {
+      "version": "2.0.7",
+      "resolved": "https://registry.npmjs.org/@types/trusted-types/-/trusted-types-2.0.7.tgz",
+      "integrity": "sha512-ScaPdn1dQczgbl0QFTeTOmVHFULt394XJgOQNoyVhZ6r2vLnMLJfBPd53SB52T/3G36VI1/g2MZaX0cwDuXsfw==",
+      "license": "MIT",
+      "optional": true
+    },
     "node_modules/@typescript-eslint/eslint-plugin": {
       "version": "8.59.0",
       "resolved": "https://registry.npmjs.org/@typescript-eslint/eslint-plugin/-/eslint-plugin-8.59.0.tgz",
@@ -3604,6 +3625,16 @@
         "node": ">=0.12.0"
       }
     },
+    "node_modules/base64-arraybuffer": {
+      "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/base64-arraybuffer/-/base64-arraybuffer-1.0.2.tgz",
+      "integrity": "sha512-I3yl4r9QB5ZRY3XuJVEPfc2XhZO6YweFPI+UovAzn+8/hb3oJ6lnysaFcjVpkCPfVWFUDvoZ8kmVDP7WyRtYtQ==",
+      "license": "MIT",
+      "optional": true,
+      "engines": {
+        "node": ">= 0.6.0"
+      }
+    },
     "node_modules/base64-js": {
       "version": "1.5.1",
       "resolved": "https://registry.npmjs.org/base64-js/-/base64-js-1.5.1.tgz",
@@ -3814,6 +3845,26 @@
       ],
       "license": "CC-BY-4.0"
     },
+    "node_modules/canvg": {
+      "version": "3.0.11",
+      "resolved": "https://registry.npmjs.org/canvg/-/canvg-3.0.11.tgz",
+      "integrity": "sha512-5ON+q7jCTgMp9cjpu4Jo6XbvfYwSB2Ow3kzHKfIyJfaCAOHLbdKPQqGKgfED/R5B+3TFFfe8pegYA+b423SRyA==",
+      "license": "MIT",
+      "optional": true,
+      "dependencies": {
+        "@babel/runtime": "^7.12.5",
+        "@types/raf": "^3.4.0",
+        "core-js": "^3.8.3",
+        "raf": "^3.4.1",
+        "regenerator-runtime": "^0.13.7",
+        "rgbcolor": "^1.0.1",
+        "stackblur-canvas": "^2.0.0",
+        "svg-pathdata": "^6.0.3"
+      },
+      "engines": {
+        "node": ">=10.0.0"
+      }
+    },
     "node_modules/chai": {
       "version": "6.2.2",
       "resolved": "https://registry.npmjs.org/chai/-/chai-6.2.2.tgz",
@@ -3911,6 +3962,18 @@
       "dev": true,
       "license": "MIT"
     },
+    "node_modules/core-js": {
+      "version": "3.49.0",
+      "resolved": "https://registry.npmjs.org/core-js/-/core-js-3.49.0.tgz",
+      "integrity": "sha512-es1U2+YTtzpwkxVLwAFdSpaIMyQaq0PBgm3YD1W3Qpsn1NAmO3KSgZfu+oGSWVu6NvLHoHCV/aYcsE5wiB7ALg==",
+      "hasInstallScript": true,
+      "license": "MIT",
+      "optional": true,
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/core-js"
+      }
+    },
     "node_modules/cross-spawn": {
       "version": "7.0.6",
       "resolved": "https://registry.npmjs.org/cross-spawn/-/cross-spawn-7.0.6.tgz",
@@ -3926,6 +3989,16 @@
         "node": ">= 8"
       }
     },
+    "node_modules/css-line-break": {
+      "version": "2.1.0",
+      "resolved": "https://registry.npmjs.org/css-line-break/-/css-line-break-2.1.0.tgz",
+      "integrity": "sha512-FHcKFCZcAha3LwfVBhCQbW2nCNbkZXn7KVUJcsT5/P8YmfsVja0FMPJr0B903j/E69HUphKiV9iQArX8SDYA4w==",
+      "license": "MIT",
+      "optional": true,
+      "dependencies": {
+        "utrie": "^1.0.2"
+      }
+    },
     "node_modules/css-tree": {
       "version": "3.2.1",
       "resolved": "https://registry.npmjs.org/css-tree/-/css-tree-3.2.1.tgz",
@@ -4281,6 +4354,16 @@
         "csstype": "^3.0.2"
       }
     },
+    "node_modules/dompurify": {
+      "version": "3.4.6",
+      "resolved": "https://registry.npmjs.org/dompurify/-/dompurify-3.4.6.tgz",
+      "integrity": "sha512-+7gzEI8trIIQkVCvQ3ucGtNfH3nOmDgVTzc62rAAOlMxLth78pwpPoZCPc7CyRzAQF89MqcfPdEWkDwnjgqktg==",
+      "license": "(MPL-2.0 OR Apache-2.0)",
+      "optional": true,
+      "optionalDependencies": {
+        "@types/trusted-types": "^2.0.7"
+      }
+    },
     "node_modules/dunder-proto": {
       "version": "1.0.1",
       "resolved": "https://registry.npmjs.org/dunder-proto/-/dunder-proto-1.0.1.tgz",
@@ -5034,6 +5117,17 @@
       "dev": true,
       "license": "MIT"
     },
+    "node_modules/fast-png": {
+      "version": "6.4.0",
+      "resolved": "https://registry.npmjs.org/fast-png/-/fast-png-6.4.0.tgz",
+      "integrity": "sha512-kAqZq1TlgBjZcLr5mcN6NP5Rv4V2f22z00c3g8vRrwkcqjerx7BEhPbOnWCPqaHUl2XWQBJQvOT/FQhdMT7X/Q==",
+      "license": "MIT",
+      "dependencies": {
+        "@types/pako": "^2.0.3",
+        "iobuffer": "^5.3.2",
+        "pako": "^2.1.0"
+      }
+    },
     "node_modules/fastq": {
       "version": "1.20.1",
       "resolved": "https://registry.npmjs.org/fastq/-/fastq-1.20.1.tgz",
@@ -5053,6 +5147,12 @@
         "is-retry-allowed": "^3.0.0"
       }
     },
+    "node_modules/fflate": {
+      "version": "0.8.3",
+      "resolved": "https://registry.npmjs.org/fflate/-/fflate-0.8.3.tgz",
+      "integrity": "sha512-tbZNuJrLwGUp3zshBtdy4W+ORxZuIh8a5ilyIEQDC5rY1f3U20JMry0Ll3WBzU58EZKsEuJFXhb5gwv8CsPvgA==",
+      "license": "MIT"
+    },
     "node_modules/file-entry-cache": {
       "version": "8.0.0",
       "resolved": "https://registry.npmjs.org/file-entry-cache/-/file-entry-cache-8.0.0.tgz",
@@ -5502,6 +5602,20 @@
         "void-elements": "3.1.0"
       }
     },
+    "node_modules/html2canvas": {
+      "version": "1.4.1",
+      "resolved": "https://registry.npmjs.org/html2canvas/-/html2canvas-1.4.1.tgz",
+      "integrity": "sha512-fPU6BHNpsyIhr8yyMpTLLxAbkaK8ArIBcmZIRiBLiDhjeqvXolaEmDGmELFuX9I4xDcaKKcJl+TKZLqruBbmWA==",
+      "license": "MIT",
+      "optional": true,
+      "dependencies": {
+        "css-line-break": "^2.1.0",
+        "text-segmentation": "^1.0.3"
+      },
+      "engines": {
+        "node": ">=8.0.0"
+      }
+    },
     "node_modules/i18next": {
       "version": "26.0.8",
       "resolved": "https://registry.npmjs.org/i18next/-/i18next-26.0.8.tgz",
@@ -5636,6 +5750,12 @@
         "node": ">=12"
       }
     },
+    "node_modules/iobuffer": {
+      "version": "5.4.0",
+      "resolved": "https://registry.npmjs.org/iobuffer/-/iobuffer-5.4.0.tgz",
+      "integrity": "sha512-DRebOWuqDvxunfkNJAlc3IzWIPD5xVxwUNbHr7xKB8E6aLJxIPfNX3CoMJghcFjpv6RWQsrcJbghtEwSPoJqMA==",
+      "license": "MIT"
+    },
     "node_modules/is-array-buffer": {
       "version": "3.0.5",
       "resolved": "https://registry.npmjs.org/is-array-buffer/-/is-array-buffer-3.0.5.tgz",
@@ -6232,6 +6352,23 @@
         "node": ">=6"
       }
     },
+    "node_modules/jspdf": {
+      "version": "4.2.1",
+      "resolved": "https://registry.npmjs.org/jspdf/-/jspdf-4.2.1.tgz",
+      "integrity": "sha512-YyAXyvnmjTbR4bHQRLzex3CuINCDlQnBqoSYyjJwTP2x9jDLuKDzy7aKUl0hgx3uhcl7xzg32agn5vlie6HIlQ==",
+      "license": "MIT",
+      "dependencies": {
+        "@babel/runtime": "^7.28.6",
+        "fast-png": "^6.2.0",
+        "fflate": "^0.8.1"
+      },
+      "optionalDependencies": {
+        "canvg": "^3.0.11",
+        "core-js": "^3.6.0",
+        "dompurify": "^3.3.1",
+        "html2canvas": "^1.0.0-rc.5"
+      }
+    },
     "node_modules/jsx-ast-utils": {
       "version": "3.3.5",
       "resolved": "https://registry.npmjs.org/jsx-ast-utils/-/jsx-ast-utils-3.3.5.tgz",
@@ -7083,6 +7220,12 @@
         "url": "https://github.com/sponsors/sindresorhus"
       }
     },
+    "node_modules/pako": {
+      "version": "2.1.0",
+      "resolved": "https://registry.npmjs.org/pako/-/pako-2.1.0.tgz",
+      "integrity": "sha512-w+eufiZ1WuJYgPXbV/PO3NCMEc3xqylkKHzp8bxp1uW4qaSNQUkwmLLEc3kKsfz8lpV1F8Ht3U1Cm+9Srog2ug==",
+      "license": "(MIT AND Zlib)"
+    },
     "node_modules/parent-module": {
       "version": "1.0.1",
       "resolved": "https://registry.npmjs.org/parent-module/-/parent-module-1.0.1.tgz",
@@ -7143,6 +7286,13 @@
       "dev": true,
       "license": "MIT"
     },
+    "node_modules/performance-now": {
+      "version": "2.1.0",
+      "resolved": "https://registry.npmjs.org/performance-now/-/performance-now-2.1.0.tgz",
+      "integrity": "sha512-7EAHlyLHI56VEIdK57uwHdHKIaAGbnXPiw0yWbarQZOKaKpvUIgW0jWRVLiatnM+XXlSwsanIBH/hzGMJulMow==",
+      "license": "MIT",
+      "optional": true
+    },
     "node_modules/picocolors": {
       "version": "1.1.1",
       "resolved": "https://registry.npmjs.org/picocolors/-/picocolors-1.1.1.tgz",
@@ -7305,6 +7455,16 @@
       ],
       "license": "MIT"
     },
+    "node_modules/raf": {
+      "version": "3.4.1",
+      "resolved": "https://registry.npmjs.org/raf/-/raf-3.4.1.tgz",
+      "integrity": "sha512-Sq4CW4QhwOHE8ucn6J34MqtZCeWFP2aQSmrlroYgqAV1PjStIhJXxYuTgUIfkEk7zTLjmIjLmU5q+fbD1NnOJA==",
+      "license": "MIT",
+      "optional": true,
+      "dependencies": {
+        "performance-now": "^2.1.0"
+      }
+    },
     "node_modules/randombytes": {
       "version": "2.1.0",
       "resolved": "https://registry.npmjs.org/randombytes/-/randombytes-2.1.0.tgz",
@@ -7530,6 +7690,13 @@
         "url": "https://github.com/sponsors/ljharb"
       }
     },
+    "node_modules/regenerator-runtime": {
+      "version": "0.13.11",
+      "resolved": "https://registry.npmjs.org/regenerator-runtime/-/regenerator-runtime-0.13.11.tgz",
+      "integrity": "sha512-kY1AZVr2Ra+t+piVaJ4gxaFaReZVH40AKNo7UCX6W+dEwBo/2oZJzqfuN1qLq1oL45o56cPaTXELwrTh8Fpggg==",
+      "license": "MIT",
+      "optional": true
+    },
     "node_modules/regexp.prototype.flags": {
       "version": "1.5.4",
       "resolved": "https://registry.npmjs.org/regexp.prototype.flags/-/regexp.prototype.flags-1.5.4.tgz",
@@ -7616,6 +7783,16 @@
         "node": ">=0.10.0"
       }
     },
+    "node_modules/rgbcolor": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/rgbcolor/-/rgbcolor-1.0.1.tgz",
+      "integrity": "sha512-9aZLIrhRaD97sgVhtJOW6ckOEh6/GnvQtdVNfdZ6s67+3/XwLS9lBcQYzEEhYVeUowN7pRzMLsyGhK2i/xvWbw==",
+      "license": "MIT OR SEE LICENSE IN FEEL-FREE.md",
+      "optional": true,
+      "engines": {
+        "node": ">= 0.8.15"
+      }
+    },
     "node_modules/rolldown": {
       "version": "1.0.0-rc.16",
       "resolved": "https://registry.npmjs.org/rolldown/-/rolldown-1.0.0-rc.16.tgz",
@@ -8052,6 +8229,16 @@
       "dev": true,
       "license": "MIT"
     },
+    "node_modules/stackblur-canvas": {
+      "version": "2.7.0",
+      "resolved": "https://registry.npmjs.org/stackblur-canvas/-/stackblur-canvas-2.7.0.tgz",
+      "integrity": "sha512-yf7OENo23AGJhBriGx0QivY5JP6Y1HbrrDI6WLt6C5auYZXlQrheoY8hD4ibekFKz1HOfE48Ww8kMWMnJD/zcQ==",
+      "license": "MIT",
+      "optional": true,
+      "engines": {
+        "node": ">=0.1.14"
+      }
+    },
     "node_modules/std-env": {
       "version": "4.1.0",
       "resolved": "https://registry.npmjs.org/std-env/-/std-env-4.1.0.tgz",
@@ -8271,6 +8458,16 @@
         "url": "https://github.com/sponsors/ljharb"
       }
     },
+    "node_modules/svg-pathdata": {
+      "version": "6.0.3",
+      "resolved": "https://registry.npmjs.org/svg-pathdata/-/svg-pathdata-6.0.3.tgz",
+      "integrity": "sha512-qsjeeq5YjBZ5eMdFuUa4ZosMLxgr5RZ+F+Y1OrDhuOCEInRMA3x74XdBtggJcj9kOeInz0WE+LgCPDkZFlBYJw==",
+      "license": "MIT",
+      "optional": true,
+      "engines": {
+        "node": ">=12.0.0"
+      }
+    },
     "node_modules/symbol-tree": {
       "version": "3.2.4",
       "resolved": "https://registry.npmjs.org/symbol-tree/-/symbol-tree-3.2.4.tgz",
@@ -8299,6 +8496,16 @@
         "url": "https://opencollective.com/webpack"
       }
     },
+    "node_modules/text-segmentation": {
+      "version": "1.0.3",
+      "resolved": "https://registry.npmjs.org/text-segmentation/-/text-segmentation-1.0.3.tgz",
+      "integrity": "sha512-iOiPUo/BGnZ6+54OsWxZidGCsdU8YbE4PSpdPinp7DeMtUJNJBoJ/ouUSTJjHkh1KntHaltHl/gDs2FC4i5+Nw==",
+      "license": "MIT",
+      "optional": true,
+      "dependencies": {
+        "utrie": "^1.0.2"
+      }
+    },
     "node_modules/tiny-invariant": {
       "version": "1.3.3",
       "resolved": "https://registry.npmjs.org/tiny-invariant/-/tiny-invariant-1.3.3.tgz",
@@ -8762,6 +8969,16 @@
       "integrity": "sha512-HXgFDgDommxn5/bIv0cnQZsPhHDA90NPHD6+c/v21U5+Sx5hoP8+dP9IZXBU1gIfvdRfhG8cel9QNPeionfcCQ==",
       "license": "MIT"
     },
+    "node_modules/utrie": {
+      "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/utrie/-/utrie-1.0.2.tgz",
+      "integrity": "sha512-1MLa5ouZiOmQzUbjbu9VmjLzn1QLXBhwpUa7kdLUQK+KQ5KA9I1vk5U4YHe/X2Ch7PYnJfWuWT+VbuxbGwljhw==",
+      "license": "MIT",
+      "optional": true,
+      "dependencies": {
+        "base64-arraybuffer": "^1.0.2"
+      }
+    },
     "node_modules/victory-vendor": {
       "version": "36.9.2",
       "resolved": "https://registry.npmjs.org/victory-vendor/-/victory-vendor-36.9.2.tgz",
diff --git a/package.json b/package.json
index 98bce66..e5a777b 100644
--- a/package.json
+++ b/package.json
@@ -15,6 +15,7 @@
     "@tanstack/react-query": "^5.100.5",
     "i18next": "^26.0.8",
     "i18next-browser-languagedetector": "^8.2.1",
+    "jspdf": "^4.2.1",
     "lucide-react": "^1.16.0",
     "next": "16.2.4",
     "qrcode.react": "^4.2.0",
diff --git a/src/components/InvoicePdfDownloadButton.tsx b/src/components/InvoicePdfDownloadButton.tsx
new file mode 100644
index 0000000..933c3a9
--- /dev/null
+++ b/src/components/InvoicePdfDownloadButton.tsx
@@ -0,0 +1,106 @@
+"use client";
+
+import { useRef, useState } from "react";
+import { QRCodeCanvas } from "qrcode.react";
+import type { Invoice } from "@/utils/soroban";
+import {
+  getInvoicePageUrl,
+  getInvoicePdfFilename,
+  getInvoicePdfRows,
+} from "@/utils/invoicePdf";
+
+interface InvoicePdfDownloadButtonProps {
+  invoice: Invoice;
+}
+
+export default function InvoicePdfDownloadButton({ invoice }: InvoicePdfDownloadButtonProps) {
+  const qrCanvasRef = useRef<HTMLCanvasElement>(null);
+  const [isGenerating, setIsGenerating] = useState(false);
+  const origin = typeof window !== "undefined" ? window.location.origin : "";
+  const invoiceUrl = getInvoicePageUrl(invoice.id, origin);
+
+  const downloadPdf = async () => {
+    setIsGenerating(true);
+    try {
+      const { jsPDF } = await import("jspdf");
+      const doc = new jsPDF({ unit: "pt", format: "letter" });
+      const rows = getInvoicePdfRows(invoice);
+      const qrDataUrl = qrCanvasRef.current?.toDataURL("image/png");
+
+      doc.setFillColor(16, 24, 39);
+      doc.rect(0, 0, 612, 112, "F");
+      doc.setTextColor(255, 255, 255);
+      doc.setFont("helvetica", "bold");
+      doc.setFontSize(24);
+      doc.text("ILN Invoice", 48, 52);
+      doc.setFont("helvetica", "normal");
+      doc.setFontSize(11);
+      doc.text("Invoice Liquidity Network", 48, 76);
+
+      doc.setTextColor(17, 24, 39);
+      doc.setFont("helvetica", "bold");
+      doc.setFontSize(18);
+      doc.text(`Invoice #${invoice.id.toString()}`, 48, 154);
+
+      doc.setFontSize(10);
+      doc.setFont("helvetica", "normal");
+      doc.setTextColor(100, 116, 139);
+      doc.text("Generated client-side from the ILN invoice detail page.", 48, 174);
+
+      let y = 220;
+      rows.forEach((row) => {
+        doc.setTextColor(100, 116, 139);
+        doc.setFont("helvetica", "bold");
+        doc.setFontSize(9);
+        doc.text(row.label.toUpperCase(), 48, y);
+
+        doc.setTextColor(17, 24, 39);
+        doc.setFont("helvetica", "normal");
+        doc.setFontSize(11);
+        const wrapped = doc.splitTextToSize(row.value, 360);
+        doc.text(wrapped, 48, y + 18);
+        y += 42 + Math.max(0, wrapped.length - 1) * 14;
+      });
+
+      if (qrDataUrl) {
+        doc.setDrawColor(226, 232, 240);
+        doc.roundedRect(424, 142, 140, 166, 12, 12);
+        doc.addImage(qrDataUrl, "PNG", 444, 160, 100, 100);
+        doc.setTextColor(100, 116, 139);
+        doc.setFontSize(8);
+        doc.text("Scan to open invoice", 446, 282);
+      }
+
+      doc.setTextColor(71, 85, 105);
+      doc.setFontSize(9);
+      doc.text("Invoice page", 48, 720);
+      doc.setTextColor(37, 99, 235);
+      doc.text(invoiceUrl, 48, 736);
+
+      doc.save(getInvoicePdfFilename(invoice.id));
+    } finally {
+      setIsGenerating(false);
+    }
+  };
+
+  return (
+    <>
+      <QRCodeCanvas
+        ref={qrCanvasRef}
+        value={invoiceUrl}
+        size={160}
+        includeMargin
+        className="hidden"
+        aria-hidden="true"
+      />
+      <button
+        onClick={() => void downloadPdf()}
+        disabled={isGenerating}
+        className="inline-flex items-center justify-center gap-2 rounded-2xl border border-outline-variant/30 px-4 py-3 text-sm font-bold text-on-surface-variant transition-all hover:bg-surface-container-high disabled:cursor-not-allowed disabled:opacity-60"
+      >
+        <span className="material-symbols-outlined text-[18px]" aria-hidden="true">picture_as_pdf</span>
+        {isGenerating ? "Generating PDF..." : "Download PDF"}
+      </button>
+    </>
+  );
+}
diff --git a/src/components/__tests__/InvoicePdfDownloadButton.test.tsx b/src/components/__tests__/InvoicePdfDownloadButton.test.tsx
new file mode 100644
index 0000000..bc5e0c9
--- /dev/null
+++ b/src/components/__tests__/InvoicePdfDownloadButton.test.tsx
@@ -0,0 +1,65 @@
+import React from "react";
+import { fireEvent, render, screen, waitFor } from "@testing-library/react";
+import { beforeEach, describe, expect, it, vi } from "vitest";
+import InvoicePdfDownloadButton from "../InvoicePdfDownloadButton";
+import type { Invoice } from "@/utils/soroban";
+
+const save = vi.fn();
+const text = vi.fn();
+const addImage = vi.fn();
+
+vi.mock("qrcode.react", async () => {
+  const ReactModule = await vi.importActual<typeof React>("react");
+  const MockQRCodeCanvas = ReactModule.forwardRef<HTMLCanvasElement>((_props, ref) => (
+    <canvas ref={ref} aria-hidden="true" />
+  ));
+  MockQRCodeCanvas.displayName = "MockQRCodeCanvas";
+  return { QRCodeCanvas: MockQRCodeCanvas };
+});
+
+vi.mock("jspdf", () => ({
+  jsPDF: vi.fn(function MockJsPDF(this: Record<string, unknown>) {
+    this.setFillColor = vi.fn();
+    this.rect = vi.fn();
+    this.setTextColor = vi.fn();
+    this.setFont = vi.fn();
+    this.setFontSize = vi.fn();
+    this.text = text;
+    this.splitTextToSize = vi.fn((value: string) => [value]);
+    this.setDrawColor = vi.fn();
+    this.roundedRect = vi.fn();
+    this.addImage = addImage;
+    this.save = save;
+  }),
+}));
+
+const invoice: Invoice = {
+  id: 7n,
+  freelancer: "GFREELANCERAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA",
+  payer: "GPAYERBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBB",
+  amount: 1_000_000_000n,
+  due_date: 1_900_000_000n,
+  discount_rate: 300,
+  status: "Pending",
+};
+
+describe("InvoicePdfDownloadButton", () => {
+  beforeEach(() => {
+    vi.clearAllMocks();
+    Object.defineProperty(window.HTMLCanvasElement.prototype, "toDataURL", {
+      configurable: true,
+      value: vi.fn(() => "data:image/png;base64,qr"),
+    });
+  });
+
+  it("generates and saves the required invoice PDF filename", async () => {
+    render(<InvoicePdfDownloadButton invoice={invoice} />);
+
+    fireEvent.click(screen.getByRole("button", { name: /download pdf/i }));
+
+    await waitFor(() => expect(save).toHaveBeenCalledWith("ILN-Invoice-7.pdf"));
+    expect(addImage).toHaveBeenCalledWith("data:image/png;base64,qr", "PNG", 444, 160, 100, 100);
+    expect(text).toHaveBeenCalledWith("ILN Invoice", 48, 52);
+    expect(text).toHaveBeenCalledWith("Invoice page", 48, 720);
+  });
+});
diff --git a/src/utils/__tests__/invoicePdf.test.ts b/src/utils/__tests__/invoicePdf.test.ts
new file mode 100644
index 0000000..a9fc918
--- /dev/null
+++ b/src/utils/__tests__/invoicePdf.test.ts
@@ -0,0 +1,68 @@
+import { describe, expect, it } from "vitest";
+import { TESTNET_EURC_TOKEN_ID } from "@/constants";
+import {
+  getInvoicePageUrl,
+  getInvoicePdfFilename,
+  getInvoicePdfRows,
+} from "@/utils/invoicePdf";
+import type { Invoice } from "@/utils/soroban";
+
+const invoice: Invoice = {
+  id: 42n,
+  freelancer: "GFREELANCERAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA",
+  payer: "GPAYERBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBB",
+  amount: 125_500_000n,
+  due_date: 1_900_000_000n,
+  discount_rate: 275,
+  status: "Funded",
+  token: TESTNET_EURC_TOKEN_ID,
+};
+
+describe("invoice PDF helpers", () => {
+  it("uses the required ILN invoice PDF filename", () => {
+    expect(getInvoicePdfFilename(42n)).toBe("ILN-Invoice-42.pdf");
+  });
+
+  it("builds the shareable invoice page URL", () => {
+    expect(getInvoicePageUrl(42n, "https://iln.example/")).toBe("https://iln.example/pay/42");
+  });
+
+  it("serializes all required PDF fields", () => {
+    expect(getInvoicePdfRows(invoice)).toMatchInlineSnapshot(`
+      [
+        {
+          "label": "Invoice ID",
+          "value": "#42",
+        },
+        {
+          "label": "Submitter address",
+          "value": "GFREELANCERAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA",
+        },
+        {
+          "label": "Payer address",
+          "value": "GPAYERBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBB",
+        },
+        {
+          "label": "Amount",
+          "value": "12.55 EURC",
+        },
+        {
+          "label": "Token",
+          "value": "EURC",
+        },
+        {
+          "label": "Discount rate",
+          "value": "275 bps / 2.75%",
+        },
+        {
+          "label": "Due date",
+          "value": "March 17, 2030",
+        },
+        {
+          "label": "Current status",
+          "value": "Funded",
+        },
+      ]
+    `);
+  });
+});
diff --git a/src/utils/federation.ts b/src/utils/federation.ts
index 11922eb..391a8eb 100644
--- a/src/utils/federation.ts
+++ b/src/utils/federation.ts
@@ -4,6 +4,11 @@ import { RPC_URL } from "@/constants";
 const horizonServer = new rpc.Server(RPC_URL);
 const federationCache = new Map<string, string>();
 
+interface AccountHomeDomain {
+  home_domain?: string;
+  homeDomain?: string;
+}
+
 export async function resolveFederatedAddress(address: string): Promise<string> {
   if (!address) return address;
   const cached = federationCache.get(address);
@@ -11,10 +16,11 @@ export async function resolveFederatedAddress(address: string): Promise<string>
 
   try {
     const account = await horizonServer.getAccount(address);
-    const homeDomain = account.home_domain ?? (account as any).homeDomain;
-    if (!homeDomain) return address;
+    const { home_domain: homeDomain, homeDomain: camelHomeDomain } = account as AccountHomeDomain;
+    const resolvedHomeDomain = homeDomain ?? camelHomeDomain;
+    if (!resolvedHomeDomain) return address;
 
-    const stellarTomlResponse = await fetch(`https://${homeDomain}/.well-known/stellar.toml`);
+    const stellarTomlResponse = await fetch(`https://${resolvedHomeDomain}/.well-known/stellar.toml`);
     if (!stellarTomlResponse.ok) return address;
 
     const toml = await stellarTomlResponse.text();
diff --git a/src/utils/invoicePdf.ts b/src/utils/invoicePdf.ts
new file mode 100644
index 0000000..5874e87
--- /dev/null
+++ b/src/utils/invoicePdf.ts
@@ -0,0 +1,40 @@
+import { TESTNET_EURC_TOKEN_ID, TESTNET_USDC_TOKEN_ID } from "@/constants";
+import { formatTokenAmount } from "@/utils/format";
+import type { Invoice } from "@/utils/soroban";
+
+export interface InvoicePdfRow {
+  label: string;
+  value: string;
+}
+
+const TOKEN_META_BY_ID: Record<string, { symbol: string; decimals: number }> = {
+  [TESTNET_USDC_TOKEN_ID]: { symbol: "USDC", decimals: 7 },
+  [TESTNET_EURC_TOKEN_ID]: { symbol: "EURC", decimals: 7 },
+};
+
+export function getInvoicePdfFilename(invoiceId: bigint): string {
+  return `ILN-Invoice-${invoiceId.toString()}.pdf`;
+}
+
+export function getInvoicePageUrl(invoiceId: bigint, origin: string): string {
+  return `${origin.replace(/\/$/, "")}/pay/${invoiceId.toString()}`;
+}
+
+export function getInvoiceTokenMeta(invoice: Invoice): { symbol: string; decimals: number } {
+  return invoice.token ? TOKEN_META_BY_ID[invoice.token] ?? { symbol: "TOKEN", decimals: 7 } : { symbol: "USDC", decimals: 7 };
+}
+
+export function getInvoicePdfRows(invoice: Invoice): InvoicePdfRow[] {
+  const token = getInvoiceTokenMeta(invoice);
+
+  return [
+    { label: "Invoice ID", value: `#${invoice.id.toString()}` },
+    { label: "Submitter address", value: invoice.freelancer },
+    { label: "Payer address", value: invoice.payer },
+    { label: "Amount", value: formatTokenAmount(invoice.amount, token) },
+    { label: "Token", value: token.symbol },
+    { label: "Discount rate", value: `${invoice.discount_rate} bps / ${(invoice.discount_rate / 100).toFixed(2)}%` },
+    { label: "Due date", value: new Date(Number(invoice.due_date) * 1000).toLocaleDateString(undefined, { dateStyle: "long" }) },
+    { label: "Current status", value: invoice.status },
+  ];
+}