fix(frontend): guard stream progress bar against BigInt divide-by-zero (#550)

frontend/package.json

@@ -25,6 +25,7 @@
   "devDependencies": {
     "@eslint/eslintrc": "^3.3.5",
     "@tailwindcss/postcss": "^4",
+    "@testing-library/dom": "^10.4.1",
     "@testing-library/jest-dom": "^6.9.1",
     "@testing-library/react": "^16.3.2",
     "@testing-library/user-event": "^14.6.1",

frontend/src/__tests__/utils.test.ts

@@ -3,6 +3,7 @@ import { convertArrayToCSV } from '../utils/csvExport';
 import { isValidStellarPublicKey } from '../lib/stellar';
 import {
   formatAmount,
+  streamProgressPercent,
   parseAmount,
   formatRate,
   hasValidPrecision,
@@ -41,6 +42,29 @@ describe('formatAmount', () => {
   });
 });
 
+describe('streamProgressPercent', () => {
+  it('computes percentage withdrawn of the deposit', () => {
+    expect(streamProgressPercent(0n, 100n)).toBe(0);
+    expect(streamProgressPercent(25n, 100n)).toBe(25);
+    expect(streamProgressPercent(100n, 100n)).toBe(100);
+  });
+
+  it('does not throw and returns 0 when nothing was deposited', () => {
+    // Regression: BigInt division by zero used to throw RangeError and crash
+    // the stream-detail page render (issue #550).
+    expect(() => streamProgressPercent(0n, 0n)).not.toThrow();
+    expect(streamProgressPercent(0n, 0n)).toBe(0);
+  });
+
+  it('returns 100 when withdrawn but deposit is zero', () => {
+    expect(streamProgressPercent(50n, 0n)).toBe(100);
+  });
+
+  it('clamps to 100 when withdrawn exceeds deposited', () => {
+    expect(streamProgressPercent(150n, 100n)).toBe(100);
+  });
+});
+
 describe('parseAmount', () => {
   it('converts token units back to raw i128 bigint', () => {
     expect(parseAmount('1', 7)).toBe(10000000n);

frontend/src/app/streams/[id]/page.tsx

@@ -19,7 +19,7 @@ import {
 } from "@/lib/soroban";
 import { CancelConfirmModal } from "@/components/stream-creation/CancelConfirmModal";
 import type { BackendStreamEvent } from "@/lib/api-types";
-import { formatAmount } from "@/utils/amount";
+import { formatAmount, streamProgressPercent } from "@/utils/amount";
 import { shortenPublicKey } from "@/lib/wallet";
 
 interface StreamDetail {
@@ -328,6 +328,7 @@ export default function StreamDetailsPage() {
   const deposited = BigInt(stream.depositedAmount);
   const withdrawn = BigInt(stream.withdrawnAmount);
   const ratePerSecond = BigInt(stream.ratePerSecond);
+  const progressPercent = streamProgressPercent(withdrawn, deposited);
 
   return (
     <main className="min-h-screen p-4 md:p-8 bg-gradient-to-br from-zinc-950 via-zinc-900 to-black">
@@ -399,7 +400,7 @@ export default function StreamDetailsPage() {
             <div
               className="h-full bg-gradient-to-r from-accent to-accent/70 transition-all duration-500"
               style={{
-                width: `${Math.min(100, Number((withdrawn * 100n) / deposited))}%`,
+                width: `${progressPercent}%`,
               }}
             />
           </div>

frontend/src/hooks/useModalDialog.ts

@@ -71,10 +71,10 @@ export function useModalDialog({
       }
     };
 
-    document.addEventListener("keydown", handleKeyDown);
+    window.addEventListener("keydown", handleKeyDown);
 
     return () => {
-      document.removeEventListener("keydown", handleKeyDown);
+      window.removeEventListener("keydown", handleKeyDown);
       document.body.style.overflow = "";
       previouslyFocusedRef.current?.focus();
     };

frontend/src/utils/amount.ts

@@ -19,6 +19,22 @@ export function formatAmount(raw: bigint, decimals: number): string {
   return `${integerPart}.${trimmedFractional}`;
 }
 
+/**
+ * Compute stream withdrawal progress as a percentage (0–100).
+ *
+ * Guards against a BigInt divide-by-zero when nothing was deposited (e.g. a
+ * freshly indexed stream, or a fee that consumed the full deposit). When
+ * `deposited` is 0 the bar reads 100% if anything was withdrawn, otherwise 0%.
+ *
+ * @param withdrawn - Amount withdrawn so far (smallest unit)
+ * @param deposited - Total amount deposited (smallest unit)
+ * @returns Progress percentage clamped to the range [0, 100]
+ */
+export function streamProgressPercent(withdrawn: bigint, deposited: bigint): number {
+  if (deposited === 0n) return withdrawn > 0n ? 100 : 0;
+  return Math.min(100, Number((withdrawn * 100n) / deposited));
+}
+
 /**
  * Alias for formatAmount - convert raw on-chain amount to human-readable string
  * @deprecated Use formatAmount instead