{
+ try {
+ const img = new Image();
+ img.crossOrigin = "Anonymous";
+ const dataUrl: string = await new Promise((resolve, reject) => {
+ img.onload = () => {
+ try {
+ const canvas = document.createElement("canvas");
+ canvas.width = img.width;
+ canvas.height = img.height;
+ const ctx = canvas.getContext("2d");
+ if (!ctx) return reject(new Error("Canvas not supported"));
+ ctx.drawImage(img, 0, 0);
+ resolve(canvas.toDataURL("image/png"));
+ } catch (e) {
+ reject(e);
+ }
+ };
+ img.onerror = () => reject(new Error("Failed to load logo"));
+ img.src = path;
+ });
+ return dataUrl;
+ } catch {
+ return null;
+ }
+}
+
+export async function exportEscrowReport(organized: OrganizedEscrowData, network: NetworkTag) {
+ const doc = new jsPDF({ unit: "pt", format: "a4" });
+ const pageWidth = doc.internal.pageSize.getWidth();
+ const margin = 64; // add more outer spacing
+ let y = margin;
+ const logoDataUrl = await loadLogoDataUrl("/logo.png");
+
+ const line = (height = 16) => {
+ y += height;
+ if (y > doc.internal.pageSize.getHeight() - margin) {
+ doc.addPage();
+ y = margin;
+ renderHeader(logoDataUrl || undefined);
+ }
+ };
+
+ const text = (
+ content: string,
+ opts?: { size?: number; bold?: boolean; lineHeight?: number }
+ ) => {
+ if (opts?.bold) doc.setFont(DEFAULT_FONT, "bold");
+ else doc.setFont(DEFAULT_FONT, "normal");
+ if (opts?.size) doc.setFontSize(opts.size);
+ const maxWidth = pageWidth - margin * 2;
+ const wrapped = doc.splitTextToSize(content, maxWidth);
+ const lh = opts?.lineHeight ?? 16;
+ wrapped.forEach((lineText: string, idx: number) => {
+ doc.text(lineText, margin, y);
+ if (idx < wrapped.length - 1) {
+ line(lh);
+ }
+ });
+ };
+
+ const rightText = (content: string, opts?: { size?: number }) => {
+ if (opts?.size) doc.setFontSize(opts.size);
+ const textWidth = doc.getTextWidth(content);
+ doc.text(content, pageWidth - margin - textWidth, y);
+ };
+
+ const renderHeader = (logoDataUrl?: string) => {
+ doc.setFontSize(18);
+ doc.setFont(DEFAULT_FONT, "bold");
+ // Logo (if available)
+ if (logoDataUrl) {
+ const logoHeight = 24;
+ const logoWidth = 24;
+ doc.addImage(logoDataUrl, "PNG", margin, y - 16, logoWidth, logoHeight);
+ doc.text("Trustless Work — Escrow Audit Report", margin + logoWidth + 8, y);
+ } else {
+ doc.text("Trustless Work — Escrow Audit Report", margin, y);
+ }
+ rightText(network === "mainnet" ? "Mainnet" : "Testnet", { size: 12 });
+ line(20);
+ doc.setDrawColor(41, 98, 255);
+ doc.setLineWidth(1);
+ doc.line(margin, y, pageWidth - margin, y);
+ line(16);
+ };
+
+ const renderFooter = () => {
+ const footerY = doc.internal.pageSize.getHeight() - margin / 2;
+ doc.setFontSize(10);
+ doc.setFont(DEFAULT_FONT, "normal");
+ doc.setTextColor(120);
+ doc.text(
+ "https://viewer.trustlesswork.com • Source: https://github.com/trustlesswork/escrow-viewer",
+ margin,
+ footerY
+ );
+ doc.setTextColor(0);
+ };
+
+ renderHeader(logoDataUrl || undefined);
+
+ // Report meta
+ doc.setFontSize(12);
+ doc.setFont(DEFAULT_FONT, "normal");
+ text(`Generated: ${new Date().toISOString()}`);
+ line(20);
+
+ // Title & description
+ doc.setFontSize(16);
+ doc.setFont(DEFAULT_FONT, "bold");
+ text(organized.title || "Escrow");
+ line(16);
+ doc.setFontSize(12);
+ doc.setFont(DEFAULT_FONT, "normal");
+ text(organized.description || "");
+ line(12);
+
+ // Properties
+ doc.setFontSize(14);
+ doc.setFont(DEFAULT_FONT, "bold");
+ text("Escrow Details");
+ line(14);
+ doc.setFontSize(12);
+ doc.setFont(DEFAULT_FONT, "normal");
+
+ const props = organized.properties;
+ const details: Array<[string, string]> = [
+ ["Escrow ID", props.escrow_id],
+ ["Engagement ID", String(props.engagement_id || "-")],
+ ["Amount", String(props.amount || "-")],
+ ["Balance", String(props.balance || "-")],
+ ["Platform Fee", String(props.platform_fee || "-")],
+ ["Asset (trustline)", String(props.trustline || "-")],
+ ];
+
+ details.forEach(([k, v]) => {
+ text(`${k}: ${v}`);
+ line(14);
+ });
+
+ line(6);
+
+ // Roles
+ doc.setFontSize(14);
+ doc.setFont(DEFAULT_FONT, "bold");
+ text("Assigned Roles");
+ line(14);
+ doc.setFontSize(12);
+ doc.setFont(DEFAULT_FONT, "normal");
+ Object.entries(organized.roles).forEach(([key, value]) => {
+ const label = ROLE_MAPPING[key] || key.replace(/_/g, " ");
+ text(`${label}: ${value}`);
+ line(14);
+ });
+
+ line(6);
+
+ // Milestones
+ doc.setFontSize(14);
+ doc.setFont(DEFAULT_FONT, "bold");
+ text("Milestones");
+ line(14);
+ doc.setFontSize(12);
+ doc.setFont(DEFAULT_FONT, "normal");
+
+ if (organized.milestones.length === 0) {
+ text("No milestones found");
+ line(14);
+ } else {
+ organized.milestones.forEach((m, idx) => {
+ text(`${idx + 1}. ${m.title}` , { bold: true });
+ line(14);
+ text(`Status: ${m.status}${m.approved ? " (approved)" : ""}`);
+ line(14);
+ if (m.amount) {
+ text(`Amount: ${m.amount}`);
+ line(14);
+ }
+ if (typeof m.signer === "string") {
+ text(`Signer: ${m.signer}`);
+ line(14);
+ }
+ if (typeof m.approver === "string") {
+ text(`Approver: ${m.approver}`);
+ line(14);
+ }
+ line(8);
+ });
+ }
+
+ // Footer on last page
+ renderFooter();
+
+ // Save
+ const filename = `trustlesswork-escrow-${props.escrow_id}-${network}.pdf`;
+ doc.save(filename);
+}
From 2fa85e2051826463fbfb0a0e970d4b51c24d6de6 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E2=80=9CPeteroche=E2=80=9D?=
<“petergoddey08l@gmail.com”>
Date: Sat, 8 Nov 2025 13:24:00 +0100
Subject: [PATCH 2/2] fix: coderabbit review
---
src/components/escrow/escrow-content.tsx | 34 +-
src/utils/pdf/exportEscrowReport.ts | 390 +++++++++++++----------
2 files changed, 258 insertions(+), 166 deletions(-)
diff --git a/src/components/escrow/escrow-content.tsx b/src/components/escrow/escrow-content.tsx
index 0192191..30713da 100644
--- a/src/components/escrow/escrow-content.tsx
+++ b/src/components/escrow/escrow-content.tsx
@@ -1,4 +1,5 @@
import { motion, AnimatePresence } from "framer-motion"
+import { useState } from "react"
import type { OrganizedEscrowData } from "@/mappers/escrow-mapper";
import { staggerContainer } from "@/utils/animations/animation-variants"
import { LoadingLogo } from "@/components/shared/loading-logo"
@@ -10,7 +11,8 @@ import error from "next/error"
import { useNetwork } from "@/contexts/NetworkContext"; // Add this line
import { Button } from "@/components/ui/button"
import { exportEscrowReport } from "@/utils/pdf/exportEscrowReport"
-import { FileDown } from "lucide-react"
+import { FileDown, Loader2 } from "lucide-react"
+import { toast } from "sonner"
interface EscrowContentProps {
@@ -25,6 +27,7 @@ export const EscrowContent = ({
isMobile,
}: EscrowContentProps) => {
const { currentNetwork } = useNetwork(); // Get network from context
+ const [exporting, setExporting] = useState(false)
return (
@@ -69,10 +72,33 @@ export const EscrowContent = ({
variant="default"
size="lg"
aria-label="Export escrow as PDF"
- onClick={() => exportEscrowReport(organized, currentNetwork)}
+ disabled={exporting}
+ onClick={async () => {
+ if (!organized) return
+ setExporting(true)
+ try {
+ await exportEscrowReport(organized, currentNetwork)
+ toast.success("PDF exported successfully")
+ } catch (e) {
+ const errorMessage = e instanceof Error ? e.message : "Failed to export PDF"
+ console.error("PDF export error:", e)
+ toast.error(`Failed to export PDF: ${errorMessage}`)
+ } finally {
+ setExporting(false)
+ }
+ }}
>
-
- Export to PDF
+ {exporting ? (
+ <>
+
+ Exporting…
+
+ ) : (
+ <>
+
+ Export to PDF
+
+ )}
diff --git a/src/utils/pdf/exportEscrowReport.ts b/src/utils/pdf/exportEscrowReport.ts
index b3c439b..2a987df 100644
--- a/src/utils/pdf/exportEscrowReport.ts
+++ b/src/utils/pdf/exportEscrowReport.ts
@@ -7,200 +7,266 @@ const DEFAULT_FONT = "helvetica";
export type NetworkTag = "mainnet" | "testnet";
async function loadLogoDataUrl(path: string): Promise {
+ let img: HTMLImageElement | null = null;
+ let timeoutId: ReturnType | null = null;
+ let settled = false;
+
try {
- const img = new Image();
+ img = new Image();
img.crossOrigin = "Anonymous";
- const dataUrl: string = await new Promise((resolve, reject) => {
- img.onload = () => {
+
+ // Capture img in a local constant so TypeScript knows it's non-null
+ const imageElement: HTMLImageElement = img;
+
+ const loadPromise = new Promise((resolve, reject) => {
+ const cleanup = () => {
+ imageElement.onload = null;
+ imageElement.onerror = null;
+ // Abort image loading to prevent leaks
+ try {
+ imageElement.src = "";
+ } catch {}
+ if (timeoutId) {
+ clearTimeout(timeoutId);
+ timeoutId = null;
+ }
+ };
+
+ imageElement.onload = () => {
+ if (settled) return;
+ settled = true;
try {
const canvas = document.createElement("canvas");
- canvas.width = img.width;
- canvas.height = img.height;
+ canvas.width = imageElement.width;
+ canvas.height = imageElement.height;
const ctx = canvas.getContext("2d");
- if (!ctx) return reject(new Error("Canvas not supported"));
- ctx.drawImage(img, 0, 0);
- resolve(canvas.toDataURL("image/png"));
+ if (!ctx) throw new Error("Canvas not supported");
+ ctx.drawImage(imageElement, 0, 0);
+ const url = canvas.toDataURL("image/png");
+ cleanup();
+ resolve(url);
} catch (e) {
+ cleanup();
reject(e);
}
};
- img.onerror = () => reject(new Error("Failed to load logo"));
- img.src = path;
+
+ imageElement.onerror = () => {
+ if (settled) return;
+ settled = true;
+ cleanup();
+ reject(new Error("Failed to load logo"));
+ };
+
+ // Set timeout to race against image load (5s timeout)
+ timeoutId = setTimeout(() => {
+ if (settled) return;
+ settled = true;
+ cleanup();
+ reject(new Error("Logo load timeout"));
+ }, 5000);
+
+ // Start loading last to avoid race with handlers
+ imageElement.src = path;
});
+
+ const dataUrl = await loadPromise;
return dataUrl;
} catch {
+ // On timeout or any error, return null so export doesn't hang
+ if (img) {
+ try {
+ img.onload = null;
+ img.onerror = null;
+ img.src = "";
+ } catch {}
+ }
+ if (timeoutId) {
+ clearTimeout(timeoutId);
+ }
return null;
}
}
export async function exportEscrowReport(organized: OrganizedEscrowData, network: NetworkTag) {
- const doc = new jsPDF({ unit: "pt", format: "a4" });
- const pageWidth = doc.internal.pageSize.getWidth();
- const margin = 64; // add more outer spacing
- let y = margin;
- const logoDataUrl = await loadLogoDataUrl("/logo.png");
-
- const line = (height = 16) => {
- y += height;
- if (y > doc.internal.pageSize.getHeight() - margin) {
- doc.addPage();
- y = margin;
- renderHeader(logoDataUrl || undefined);
- }
- };
-
- const text = (
- content: string,
- opts?: { size?: number; bold?: boolean; lineHeight?: number }
- ) => {
- if (opts?.bold) doc.setFont(DEFAULT_FONT, "bold");
- else doc.setFont(DEFAULT_FONT, "normal");
- if (opts?.size) doc.setFontSize(opts.size);
- const maxWidth = pageWidth - margin * 2;
- const wrapped = doc.splitTextToSize(content, maxWidth);
- const lh = opts?.lineHeight ?? 16;
- wrapped.forEach((lineText: string, idx: number) => {
- doc.text(lineText, margin, y);
- if (idx < wrapped.length - 1) {
- line(lh);
+ try {
+ const doc = new jsPDF({ unit: "pt", format: "a4" });
+ const pageWidth = doc.internal.pageSize.getWidth();
+ const margin = 64; // add more outer spacing
+ let y = margin;
+ const logoDataUrl = await loadLogoDataUrl("/logo.png");
+
+ const line = (height = 16) => {
+ y += height;
+ if (y > doc.internal.pageSize.getHeight() - margin) {
+ // add footer to current page before breaking
+ renderFooter();
+ doc.addPage();
+ y = margin;
+ renderHeader(logoDataUrl || undefined);
}
- });
- };
+ };
+
+ const text = (
+ content: string,
+ opts?: { size?: number; bold?: boolean; lineHeight?: number }
+ ) => {
+ if (opts?.bold) doc.setFont(DEFAULT_FONT, "bold");
+ else doc.setFont(DEFAULT_FONT, "normal");
+ if (opts?.size) doc.setFontSize(opts.size);
+ const maxWidth = pageWidth - margin * 2;
+ const wrapped = doc.splitTextToSize(content, maxWidth);
+ const lh = opts?.lineHeight ?? 16;
+ wrapped.forEach((lineText: string, idx: number) => {
+ doc.text(lineText, margin, y);
+ if (idx < wrapped.length - 1) {
+ line(lh);
+ }
+ });
+ };
- const rightText = (content: string, opts?: { size?: number }) => {
- if (opts?.size) doc.setFontSize(opts.size);
- const textWidth = doc.getTextWidth(content);
- doc.text(content, pageWidth - margin - textWidth, y);
- };
+ const rightText = (content: string, opts?: { size?: number }) => {
+ if (opts?.size) doc.setFontSize(opts.size);
+ const textWidth = doc.getTextWidth(content);
+ doc.text(content, pageWidth - margin - textWidth, y);
+ };
- const renderHeader = (logoDataUrl?: string) => {
- doc.setFontSize(18);
- doc.setFont(DEFAULT_FONT, "bold");
- // Logo (if available)
- if (logoDataUrl) {
- const logoHeight = 24;
- const logoWidth = 24;
- doc.addImage(logoDataUrl, "PNG", margin, y - 16, logoWidth, logoHeight);
- doc.text("Trustless Work — Escrow Audit Report", margin + logoWidth + 8, y);
- } else {
- doc.text("Trustless Work — Escrow Audit Report", margin, y);
- }
- rightText(network === "mainnet" ? "Mainnet" : "Testnet", { size: 12 });
+ const renderHeader = (logoDataUrl?: string) => {
+ doc.setFontSize(18);
+ doc.setFont(DEFAULT_FONT, "bold");
+ // Logo (if available)
+ if (logoDataUrl) {
+ const logoHeight = 24;
+ const logoWidth = 24;
+ doc.addImage(logoDataUrl, "PNG", margin, y - 16, logoWidth, logoHeight);
+ doc.text("Trustless Work — Escrow Audit Report", margin + logoWidth + 8, y);
+ } else {
+ doc.text("Trustless Work — Escrow Audit Report", margin, y);
+ }
+ rightText(network === "mainnet" ? "Mainnet" : "Testnet", { size: 12 });
+ line(20);
+ doc.setDrawColor(41, 98, 255);
+ doc.setLineWidth(1);
+ doc.line(margin, y, pageWidth - margin, y);
+ line(16);
+ };
+
+ const renderFooter = () => {
+ const footerY = doc.internal.pageSize.getHeight() - margin / 2;
+ doc.setFontSize(10);
+ doc.setFont(DEFAULT_FONT, "normal");
+ doc.setTextColor(120);
+ doc.text(
+ "https://viewer.trustlesswork.com • Source: https://github.com/trustlesswork/escrow-viewer",
+ margin,
+ footerY
+ );
+ doc.setTextColor(0);
+ };
+
+ renderHeader(logoDataUrl || undefined);
+
+ // Report meta
+ doc.setFontSize(12);
+ doc.setFont(DEFAULT_FONT, "normal");
+ text(`Generated: ${new Date().toISOString()}`);
line(20);
- doc.setDrawColor(41, 98, 255);
- doc.setLineWidth(1);
- doc.line(margin, y, pageWidth - margin, y);
- line(16);
- };
- const renderFooter = () => {
- const footerY = doc.internal.pageSize.getHeight() - margin / 2;
- doc.setFontSize(10);
+ // Title & description
+ doc.setFontSize(16);
+ doc.setFont(DEFAULT_FONT, "bold");
+ text(organized.title || "Escrow");
+ line(16);
+ doc.setFontSize(12);
doc.setFont(DEFAULT_FONT, "normal");
- doc.setTextColor(120);
- doc.text(
- "https://viewer.trustlesswork.com • Source: https://github.com/trustlesswork/escrow-viewer",
- margin,
- footerY
- );
- doc.setTextColor(0);
- };
-
- renderHeader(logoDataUrl || undefined);
-
- // Report meta
- doc.setFontSize(12);
- doc.setFont(DEFAULT_FONT, "normal");
- text(`Generated: ${new Date().toISOString()}`);
- line(20);
-
- // Title & description
- doc.setFontSize(16);
- doc.setFont(DEFAULT_FONT, "bold");
- text(organized.title || "Escrow");
- line(16);
- doc.setFontSize(12);
- doc.setFont(DEFAULT_FONT, "normal");
- text(organized.description || "");
- line(12);
-
- // Properties
- doc.setFontSize(14);
- doc.setFont(DEFAULT_FONT, "bold");
- text("Escrow Details");
- line(14);
- doc.setFontSize(12);
- doc.setFont(DEFAULT_FONT, "normal");
-
- const props = organized.properties;
- const details: Array<[string, string]> = [
- ["Escrow ID", props.escrow_id],
- ["Engagement ID", String(props.engagement_id || "-")],
- ["Amount", String(props.amount || "-")],
- ["Balance", String(props.balance || "-")],
- ["Platform Fee", String(props.platform_fee || "-")],
- ["Asset (trustline)", String(props.trustline || "-")],
- ];
-
- details.forEach(([k, v]) => {
- text(`${k}: ${v}`);
- line(14);
- });
-
- line(6);
-
- // Roles
- doc.setFontSize(14);
- doc.setFont(DEFAULT_FONT, "bold");
- text("Assigned Roles");
- line(14);
- doc.setFontSize(12);
- doc.setFont(DEFAULT_FONT, "normal");
- Object.entries(organized.roles).forEach(([key, value]) => {
- const label = ROLE_MAPPING[key] || key.replace(/_/g, " ");
- text(`${label}: ${value}`);
+ text(organized.description || "");
+ line(12);
+
+ // Properties
+ doc.setFontSize(14);
+ doc.setFont(DEFAULT_FONT, "bold");
+ text("Escrow Details");
line(14);
- });
+ doc.setFontSize(12);
+ doc.setFont(DEFAULT_FONT, "normal");
+
+ const props = organized.properties;
+ const details: Array<[string, string]> = [
+ ["Escrow ID", props.escrow_id],
+ ["Engagement ID", String(props.engagement_id || "-")],
+ ["Amount", String(props.amount || "-")],
+ ["Balance", String(props.balance || "-")],
+ ["Platform Fee", String(props.platform_fee || "-")],
+ ["Asset (trustline)", String(props.trustline || "-")],
+ ];
- line(6);
+ details.forEach(([k, v]) => {
+ text(`${k}: ${v}`);
+ line(14);
+ });
- // Milestones
- doc.setFontSize(14);
- doc.setFont(DEFAULT_FONT, "bold");
- text("Milestones");
- line(14);
- doc.setFontSize(12);
- doc.setFont(DEFAULT_FONT, "normal");
+ line(6);
- if (organized.milestones.length === 0) {
- text("No milestones found");
+ // Roles
+ doc.setFontSize(14);
+ doc.setFont(DEFAULT_FONT, "bold");
+ text("Assigned Roles");
line(14);
- } else {
- organized.milestones.forEach((m, idx) => {
- text(`${idx + 1}. ${m.title}` , { bold: true });
+ doc.setFontSize(12);
+ doc.setFont(DEFAULT_FONT, "normal");
+ Object.entries(organized.roles).forEach(([key, value]) => {
+ const label = ROLE_MAPPING[key] || key.replace(/_/g, " ");
+ text(`${label}: ${value}`);
line(14);
- text(`Status: ${m.status}${m.approved ? " (approved)" : ""}`);
+ });
+
+ line(6);
+
+ // Milestones
+ doc.setFontSize(14);
+ doc.setFont(DEFAULT_FONT, "bold");
+ text("Milestones");
+ line(14);
+ doc.setFontSize(12);
+ doc.setFont(DEFAULT_FONT, "normal");
+
+ if (organized.milestones.length === 0) {
+ text("No milestones found");
line(14);
- if (m.amount) {
- text(`Amount: ${m.amount}`);
- line(14);
- }
- if (typeof m.signer === "string") {
- text(`Signer: ${m.signer}`);
+ } else {
+ organized.milestones.forEach((m, idx) => {
+ text(`${idx + 1}. ${m.title}` , { bold: true });
line(14);
- }
- if (typeof m.approver === "string") {
- text(`Approver: ${m.approver}`);
+ if (m.description) {
+ text(`Description: ${m.description}`);
+ line(14);
+ }
+ text(`Status: ${m.status}${m.approved ? " (approved)" : ""}`);
line(14);
- }
- line(8);
- });
- }
+ if (m.amount) {
+ text(`Amount: ${m.amount}`);
+ line(14);
+ }
+ if (typeof m.signer === "string") {
+ text(`Signer: ${m.signer}`);
+ line(14);
+ }
+ if (typeof m.approver === "string") {
+ text(`Approver: ${m.approver}`);
+ line(14);
+ }
+ line(8);
+ });
+ }
- // Footer on last page
- renderFooter();
+ // Footer on last page
+ renderFooter();
- // Save
- const filename = `trustlesswork-escrow-${props.escrow_id}-${network}.pdf`;
- doc.save(filename);
+ // Save
+ const filename = `trustlesswork-escrow-${props.escrow_id}-${network}.pdf`;
+ doc.save(filename);
+ } catch (error) {
+ console.error("PDF generation failed:", error);
+ throw new Error("Failed to generate PDF report");
+ }
}