fix: reuse shared csvExport utility in ActivityHistory export (#1266)

frontend/src/components/dashboard/ActivityHistory.test.tsx

@@ -0,0 +1,97 @@
+import { render, screen, fireEvent } from "@testing-library/react";
+import { describe, expect, it, vi, beforeEach } from "vitest";
+import type { BackendStreamEvent } from "@/lib/api-types";
+
+vi.mock("@/utils/csvExport", async (importOriginal) => {
+  const actual = await importOriginal<typeof import("@/utils/csvExport")>();
+  return {
+    ...actual,
+    downloadCSV: vi.fn(),
+  };
+});
+
+import { ActivityHistory } from "./ActivityHistory";
+import { convertArrayToCSV, downloadCSV } from "@/utils/csvExport";
+
+const makeEvent = (
+  overrides: Partial<BackendStreamEvent> = {}
+): BackendStreamEvent => ({
+  id: "evt-1",
+  streamId: 12345,
+  eventType: "CREATED",
+  amount: "10000000000",
+  transactionHash: "",
+  ledgerSequence: 1000,
+  timestamp: 1700000000,
+  metadata: null,
+  createdAt: "2026-01-01T00:00:00Z",
+  ...overrides,
+});
+
+describe("ActivityHistory CSV export", () => {
+  beforeEach(() => {
+    vi.mocked(downloadCSV).mockClear();
+  });
+
+  it("exports via the shared downloadCSV utility with a timestamped filename", () => {
+    render(<ActivityHistory events={[makeEvent()]} />);
+
+    fireEvent.click(screen.getByRole("button", { name: /export csv/i }));
+
+    expect(downloadCSV).toHaveBeenCalledTimes(1);
+    const [data, filename] = vi.mocked(downloadCSV).mock.calls[0]!;
+    expect(filename).toMatch(/^flowfi_activity_\d+\.csv$/);
+    expect(data).toEqual([
+      {
+        "Stream ID": 12345,
+        "Event Type": "CREATED",
+        "Amount": "1000",
+        "Timestamp": "2023-11-14T22:13:20.000Z",
+        "Tx Hash": "",
+      },
+    ]);
+  });
+
+  it("produces a correctly escaped, spreadsheet-safe CSV for fields containing commas and quotes", () => {
+    const events = [
+      makeEvent({
+        id: "evt-1",
+        streamId: 1,
+        eventType: "CREATED",
+        transactionHash: "",
+      }),
+      makeEvent({
+        id: "evt-2",
+        streamId: 2,
+        eventType: "TOPPED_UP",
+        transactionHash: 'abc,def"ghi',
+      }),
+    ];
+
+    render(<ActivityHistory events={events} />);
+
+    fireEvent.click(screen.getByRole("button", { name: /export csv/i }));
+
+    const [data] = vi.mocked(downloadCSV).mock.calls[0]!;
+    const csv = convertArrayToCSV(data);
+
+    const lines = csv.split("\n");
+    expect(lines[0]).toBe(
+      "Stream ID,Event Type,Amount,Timestamp,Tx Hash"
+    );
+    // Second row's Tx Hash contains a comma and double-quote and must be quoted + escaped.
+    expect(lines[2]).toContain('"abc,def""ghi"');
+    expect(csv).not.toContain(
+      'abc,def"ghi"'
+    );
+  });
+
+  it("disables the export button when there are no events", () => {
+    render(<ActivityHistory events={[]} />);
+
+    expect(
+      screen.getByRole("button", { name: /export csv/i })
+    ).toBeDisabled();
+    expect(downloadCSV).not.toHaveBeenCalled();
+  });
+});

frontend/src/components/dashboard/ActivityHistory.tsx

@@ -5,6 +5,7 @@ import Link from "next/link";
 import { useVirtualizer } from "@tanstack/react-virtual";
 import { BackendStreamEvent } from "@/lib/api-types";
 import { formatAmount } from "@/utils/amount";
+import { downloadCSV } from "@/utils/csvExport";
 import TransactionTracker from "@/components/TransactionTracker";
 import { Download, ExternalLink, Clock } from "lucide-react";
 import { Button } from "../ui/Button";
@@ -35,34 +36,15 @@ export const ActivityHistory: React.FC<ActivityHistoryProps> = ({
 
   const exportToCSV = useCallback(() => {
     setExportStatus("exporting");
-    const headers = [
-      "Stream ID",
-      "Event Type",
-      "Amount",
-      "Timestamp",
-      "Tx Hash",
-    ];
-    const rows = events.map((event) => [
-      event.streamId,
-      event.eventType,
-      event.amount ? formatAmount(BigInt(event.amount), 7) : "0",
-      new Date(event.timestamp * 1000).toISOString(),
-      event.transactionHash || "",
-    ]);
+    const rows = events.map((event) => ({
+      "Stream ID": event.streamId,
+      "Event Type": event.eventType,
+      "Amount": event.amount ? formatAmount(BigInt(event.amount), 7) : "0",
+      "Timestamp": new Date(event.timestamp * 1000).toISOString(),
+      "Tx Hash": event.transactionHash || "",
+    }));
 
-    const csvContent = [headers, ...rows].map((e) => e.join(",")).join("\n");
-    const blob = new Blob([csvContent], { type: "text/csv;charset=utf-8;" });
-    const link = document.createElement("a");
-    const url = URL.createObjectURL(blob);
-    link.setAttribute("href", url);
-    link.setAttribute(
-      "download",
-      `flowfi_activity_${new Date().getTime()}.csv`,
-    );
-    link.style.visibility = "hidden";
-    document.body.appendChild(link);
-    link.click();
-    document.body.removeChild(link);
+    downloadCSV(rows, `flowfi_activity_${new Date().getTime()}.csv`);
     setExportStatus("complete");
     // Reset after screen readers have had time to announce
     setTimeout(() => setExportStatus("idle"), 3000);