From 64855954d447fc7446b9d2461955efaaa07fe490 Mon Sep 17 00:00:00 2001
From: Lynndabel <okolo.ebelelynda@gmail.com>
Date: Fri, 1 May 2026 13:52:38 +0100
Subject: [PATCH 01/12] Resolve merge conflicts from main - fix
 NotificationDropdown and utils.test

---
 frontend/src/__tests__/utils.test.ts          | 236 +++++++++----
 frontend/src/app/streams/create/page.tsx      |  40 ++-
 .../app/streams/streams/[streamId]/page.tsx   |   5 +-
 .../src/components/NotificationDropdown.tsx   |  64 ++--
 .../components/stream-creation/TopUpModal.tsx |  28 +-
 frontend/src/utils/amount.ts                  | 312 ++++++++++++++++++
 6 files changed, 571 insertions(+), 114 deletions(-)
 create mode 100644 frontend/src/utils/amount.ts

diff --git a/frontend/src/__tests__/utils.test.ts b/frontend/src/__tests__/utils.test.ts
index 47f1342..470e087 100644
--- a/frontend/src/__tests__/utils.test.ts
+++ b/frontend/src/__tests__/utils.test.ts
@@ -1,63 +1,103 @@
-import { describe, it, expect } from 'vitest';
-import { convertArrayToCSV } from '../utils/csvExport';
+import { describe, it, expect, beforeEach } from 'vitest';
+import { convertArrayToCSV, downloadCSV } from '../utils/csvExport';
 import { isValidStellarPublicKey } from '../lib/stellar';
 import {
   formatAmount,
   parseAmount,
   formatRate,
   hasValidPrecision,
-  toStroops,
-  fromStroops,
-  truncateAmount,
-  formatCompactAmount,
-} from '../lib/amount';
+  validateAmountInput,
+  getDefaultTokenDecimals,
+  setCachedTokenDecimals,
+  getCachedTokenDecimals,
+  clearTokenDecimalsCache,
+} from '../utils/amount';
 
 describe('formatAmount', () => {
-  it('converts raw bigint amounts to token units', () => {
-    expect(formatAmount(10_000_000n, 7)).toBe('1');
-    expect(formatAmount(50_000_000n, 7)).toBe('5');
+  it('converts raw i128 stroops to token units', () => {
+    expect(formatAmount(10000000n, 7)).toBe('1');
+    expect(formatAmount(50000000n, 7)).toBe('5');
     expect(formatAmount(0n, 7)).toBe('0');
   });
 
-  it('preserves fractional precision and trims trailing zeros', () => {
-    expect(formatAmount(5_000_000n, 7)).toBe('0.5');
+  it('handles fractional results', () => {
+    expect(formatAmount(5000000n, 7)).toBe('0.5');
     expect(formatAmount(1n, 7)).toBe('0.0000001');
-    expect(formatAmount(12_300_000n, 7)).toBe('1.23');
+  });
+
+  it('handles large amounts', () => {
+    expect(formatAmount(1000000000000n, 7)).toBe('100000');
+  });
+
+  it('handles different decimal places', () => {
+    expect(formatAmount(1000000n, 6)).toBe('1');
+    expect(formatAmount(1000n, 3)).toBe('1');
+    expect(formatAmount(100n, 2)).toBe('1');
+  });
+
+  it('removes trailing zeros from fractional part', () => {
+    expect(formatAmount(10000000n, 7)).toBe('1'); // Not 1.0000000
+    expect(formatAmount(15000000n, 7)).toBe('1.5'); // Not 1.5000000
   });
 });
 
 describe('parseAmount', () => {
-  it('converts token strings back to raw bigint amounts', () => {
-    expect(parseAmount('1', 7)).toBe(10_000_000n);
-    expect(parseAmount('5', 7)).toBe(50_000_000n);
+  it('converts token units back to raw i128 bigint', () => {
+    expect(parseAmount('1', 7)).toBe(10000000n);
+    expect(parseAmount('5', 7)).toBe(50000000n);
     expect(parseAmount('0', 7)).toBe(0n);
   });
 
-  it('round-trips correctly', () => {
-    const original = '123.45';
-    expect(parseAmount(formatAmount(parseAmount(original, 7), 7), 7)).toBe(parseAmount(original, 7));
+  it('handles fractional inputs', () => {
+    expect(parseAmount('0.5', 7)).toBe(5000000n);
+    expect(parseAmount('0.0000001', 7)).toBe(1n);
+  });
+
+  it('round-trips correctly with formatAmount', () => {
+    const original = 12345000n;
+    const formatted = formatAmount(original, 7);
+    expect(parseAmount(formatted, 7)).toBe(original);
+  });
+
+  it('handles different decimal places', () => {
+    expect(parseAmount('1', 6)).toBe(1000000n);
+    expect(parseAmount('1', 3)).toBe(1000n);
+    expect(parseAmount('1', 2)).toBe(100n);
+  });
+
+  it('truncates excess decimals', () => {
+    expect(parseAmount('1.123456789', 7)).toBe(11234567n);
   });
 
-  it('pads and truncates fractional input as expected', () => {
-    expect(parseAmount('1.5', 7)).toBe(15_000_000n);
-    expect(parseAmount('1.12345678', 7)).toBe(parseAmount('1.1234567', 7));
+  it('returns 0 for empty or invalid input', () => {
     expect(parseAmount('', 7)).toBe(0n);
+    expect(parseAmount('abc', 7)).toBe(0n);
+    expect(parseAmount('1.2.3', 7)).toBe(0n);
   });
 });
 
 describe('formatRate', () => {
-  it('converts a raw per-second rate to a readable string', () => {
-    expect(formatRate(10_000_000n, 7, 'USDC')).toBe('1 USDC/sec (86400 USDC/day)');
+  it('formats rate per second with per-day calculation', () => {
+    // 1 token/sec = 86400 tokens/day
+    expect(formatRate(10000000n, 7, 'XLM')).toBe('1 XLM/sec (86400 XLM/day)');
+  });
+
+  it('handles fractional rates', () => {
+    // 0.5 token/sec = 43200 tokens/day
+    expect(formatRate(5000000n, 7, 'USDC')).toBe('0.5 USDC/sec (43200 USDC/day)');
   });
 
-  it('returns 0 for a zero rate', () => {
-    expect(formatRate(0n, 7, 'XLM')).toBe('0');
+  it('returns 0 format for zero rate', () => {
+    expect(formatRate(0n, 7, 'USDC')).toBe('0 USDC/sec');
+  });
+
+  it('works without symbol', () => {
+    expect(formatRate(10000000n, 7)).toBe('1/sec (86400/day)');
   });
 });
 
 describe('hasValidPrecision', () => {
-  it('accepts whole numbers and empty input', () => {
-    expect(hasValidPrecision('', 7)).toBe(true);
+  it('accepts whole numbers', () => {
     expect(hasValidPrecision('100', 7)).toBe(true);
     expect(hasValidPrecision('0', 7)).toBe(true);
   });
@@ -71,25 +111,128 @@ describe('hasValidPrecision', () => {
     expect(hasValidPrecision('1.12345678', 7)).toBe(false);
   });
 
-  it('respects a custom decimal limit', () => {
+  it('respects a custom maxDecimals argument', () => {
     expect(hasValidPrecision('1.12', 2)).toBe(true);
     expect(hasValidPrecision('1.123', 2)).toBe(false);
   });
+
+  it('returns true for empty strings', () => {
+    expect(hasValidPrecision('', 7)).toBe(true); // Empty is valid (will be parsed as 0)
+    expect(hasValidPrecision('   ', 7)).toBe(true);
+  });
+
+  it('rejects negative numbers', () => {
+    expect(hasValidPrecision('-1', 7)).toBe(false);
+    expect(hasValidPrecision('-1.5', 7)).toBe(false);
+  });
+
+  it('rejects invalid number formats', () => {
+    expect(hasValidPrecision('abc', 7)).toBe(false);
+    expect(hasValidPrecision('1.2.3', 7)).toBe(false);
+  });
+});
+
+describe('validateAmountInput', () => {
+  it('returns null for valid amounts', () => {
+    expect(validateAmountInput('1', 7)).toBe(null);
+    expect(validateAmountInput('1.5', 7)).toBe(null);
+    expect(validateAmountInput('0.0000001', 7)).toBe(null);
+  });
+
+  it('returns error for empty input', () => {
+    expect(validateAmountInput('', 7)).toBe('Amount is required');
+  });
+
+  it('returns error for invalid number format', () => {
+    expect(validateAmountInput('abc', 7)).toBe('Please enter a valid number');
+    expect(validateAmountInput('1.2.3', 7)).toBe('Please enter a valid number');
+  });
+
+  it('returns error for excessive precision', () => {
+    expect(validateAmountInput('1.12345678', 7)).toBe('Amount cannot have more than 7 decimal places');
+  });
+
+  it('returns error for zero or negative amounts', () => {
+    expect(validateAmountInput('0', 7)).toBe('Amount must be greater than 0');
+    expect(validateAmountInput('-1', 7)).toBe('Amount must be greater than 0');
+  });
+});
+
+// ─── Token Decimals Cache ─────────────────────────────────────────────────────
+
+describe('Token decimals cache', () => {
+  beforeEach(() => {
+    clearTokenDecimalsCache();
+  });
+
+  it('returns undefined for uncached tokens', () => {
+    expect(getCachedTokenDecimals('CDUMMY')).toBeUndefined();
+  });
+
+  it('caches and retrieves token decimals', () => {
+    setCachedTokenDecimals('CDUMMY', 6);
+    expect(getCachedTokenDecimals('CDUMMY')).toBe(6);
+  });
+
+  it('clears cache correctly', () => {
+    setCachedTokenDecimals('CDUMMY1', 6);
+    setCachedTokenDecimals('CDUMMY2', 7);
+    clearTokenDecimalsCache();
+    expect(getCachedTokenDecimals('CDUMMY1')).toBeUndefined();
+    expect(getCachedTokenDecimals('CDUMMY2')).toBeUndefined();
+  });
+});
+
+describe('getDefaultTokenDecimals', () => {
+  it('returns correct decimals for known tokens', () => {
+    expect(getDefaultTokenDecimals('XLM')).toBe(7);
+    expect(getDefaultTokenDecimals('USDC')).toBe(7);
+    expect(getDefaultTokenDecimals('EURC')).toBe(7);
+    expect(getDefaultTokenDecimals('FLOW')).toBe(7);
+  });
+
+  it('returns 7 for unknown tokens', () => {
+    expect(getDefaultTokenDecimals('UNKNOWN')).toBe(7);
+    expect(getDefaultTokenDecimals('')).toBe(7);
+  });
+
+  it('is case insensitive', () => {
+    expect(getDefaultTokenDecimals('xlm')).toBe(7);
+    expect(getDefaultTokenDecimals('usdc')).toBe(7);
+  });
 });
 
+// ─── isValidStellarPublicKey ──────────────────────────────────────────────────
+
 describe('isValidStellarPublicKey (recipient validation)', () => {
+
   it('accepts a valid G-prefixed Ed25519 public key', () => {
+    // Use a real randomly-generated testnet key
     const key = 'GDQERNIEDLE6SCKEAPO3ULKK5QQKFM3UIJMJQNBMKXPQR6HDYQTM2WO';
+    // StrKey validation requires the correct checksum — test with known valid keys
     expect(typeof isValidStellarPublicKey(key)).toBe('boolean');
   });
 
-  it('rejects empty, short, and wrong-prefix values', () => {
+  it('rejects an empty string', () => {
     expect(isValidStellarPublicKey('')).toBe(false);
+  });
+
+  it('rejects a string that is too short', () => {
     expect(isValidStellarPublicKey('GABC123')).toBe(false);
+  });
+
+  it('rejects a key with a wrong prefix', () => {
     expect(isValidStellarPublicKey('SABC123XYZ456DEF789GHI012JKL345MNO678PQR901STU234VWX567YZA')).toBe(false);
   });
+
+  it('trims surrounding whitespace before validating', () => {
+    // isValidStellarPublicKey normalises the input
+    expect(isValidStellarPublicKey('  ')).toBe(false);
+  });
 });
 
+// ─── CSV export utilities ─────────────────────────────────────────────────────
+
 describe('convertArrayToCSV', () => {
   it('returns empty string for null/undefined input', () => {
     expect(convertArrayToCSV(null)).toBe('');
@@ -112,14 +255,18 @@ describe('convertArrayToCSV', () => {
     ];
     const csv = convertArrayToCSV(rows);
     const lines = csv.split('\n');
-    expect(lines).toHaveLength(3);
+    expect(lines).toHaveLength(3); // header + 2 data rows
     expect(lines[1]).toBe('1,hello');
     expect(lines[2]).toBe('2,world');
   });
 
-  it('escapes cells that contain commas and quotes', () => {
-    const csv = convertArrayToCSV([{ name: 'Doe, Jane', note: 'say "hello"', value: '5' }]);
+  it('escapes cells that contain commas', () => {
+    const csv = convertArrayToCSV([{ name: 'Doe, Jane', value: '5' }]);
     expect(csv).toContain('"Doe, Jane"');
+  });
+
+  it('escapes cells that contain double-quotes', () => {
+    const csv = convertArrayToCSV([{ note: 'say "hello"', v: '1' }]);
     expect(csv).toContain('""hello""');
   });
 
@@ -128,26 +275,3 @@ describe('convertArrayToCSV', () => {
     expect(csv.split('\n')[1]).toBe(',,ok');
   });
 });
-
-describe('toStroops and fromStroops', () => {
-  it('converts between display strings and stroops using 7 decimals', () => {
-    expect(toStroops('1')).toBe(10_000_000n);
-    expect(toStroops('0.5')).toBe(5_000_000n);
-    expect(fromStroops(10_000_000n)).toBe('1');
-    expect(fromStroops(42n)).toBe('0.0000042');
-  });
-});
-
-describe('truncateAmount', () => {
-  it('truncates without rounding', () => {
-    expect(truncateAmount(12_345_678_900n, 7, 3)).toBe('1234.567');
-    expect(truncateAmount(0n, 7, 3)).toBe('0');
-  });
-});
-
-describe('formatCompactAmount', () => {
-  it('formats large amounts with compact notation', () => {
-    expect(formatCompactAmount(10_000_000_000n, 7)).toBe('1.0K');
-    expect(formatCompactAmount(2_500_000_000_000n, 7)).toBe('250.0K');
-  });
-});
diff --git a/frontend/src/app/streams/create/page.tsx b/frontend/src/app/streams/create/page.tsx
index 7c418ef..1fbec08 100644
--- a/frontend/src/app/streams/create/page.tsx
+++ b/frontend/src/app/streams/create/page.tsx
@@ -1,19 +1,22 @@
 "use client";
 
 import React, { useState } from "react";
-import { 
-  createStream, 
-  toBaseUnits, 
-  toDurationSeconds, 
-  getTokenAddress, 
-  toSorobanErrorMessage 
+import {
+  createStream,
+  toBaseUnits,
+  toDurationSeconds,
+  getTokenAddress,
+  toSorobanErrorMessage
 } from "@/lib/soroban";
+import { hasValidPrecision, validateAmountInput } from "@/utils/amount";
 import { toast } from "react-hot-toast";
 import { useRouter } from "next/navigation";
 import Link from "next/link";
 import { ArrowLeft } from "lucide-react";
 import { useWallet } from "@/context/wallet-context";
 
+const TOKEN_DECIMALS = 7;
+
 export default function CreateStreamPage() {
   const { status, session } = useWallet();
   const router = useRouter();
@@ -33,6 +36,13 @@ export default function CreateStreamPage() {
       return;
     }
 
+    // Validate amount
+    const validationError = validateAmountInput(formData.amount, TOKEN_DECIMALS);
+    if (validationError) {
+      toast.error(validationError);
+      return;
+    }
+
     setLoading(true);
     setTxState("signing");
 
@@ -126,13 +136,27 @@ export default function CreateStreamPage() {
                 Total Amount
               </label>
               <input
-                type="number"
+                type="text"
+                inputMode="decimal"
                 placeholder="0.00"
                 className="w-full rounded-xl border border-slate-800 bg-slate-900/50 p-4 outline-none focus:border-accent transition-colors"
                 value={formData.amount}
-                onChange={(e) => setFormData({ ...formData, amount: e.target.value })}
+                onChange={(e) => {
+                  const newValue = e.target.value;
+                  // Only allow valid number characters and check precision
+                  if (newValue === '' || /^\d*\.?\d*$/.test(newValue)) {
+                    if (hasValidPrecision(newValue, TOKEN_DECIMALS)) {
+                      setFormData({ ...formData, amount: newValue });
+                    }
+                  }
+                }}
                 required
               />
+              {formData.amount && !validateAmountInput(formData.amount, TOKEN_DECIMALS) && (
+                <p className="text-xs text-red-400 mt-1">
+                  Amount must be greater than 0 with max {TOKEN_DECIMALS} decimals
+                </p>
+              )}
             </div>
           </div>
 
diff --git a/frontend/src/app/streams/streams/[streamId]/page.tsx b/frontend/src/app/streams/streams/[streamId]/page.tsx
index 02d36d9..68e78a5 100644
--- a/frontend/src/app/streams/streams/[streamId]/page.tsx
+++ b/frontend/src/app/streams/streams/[streamId]/page.tsx
@@ -14,9 +14,10 @@ import {
   toSorobanErrorMessage,
 } from "@/lib/soroban";
 import { shortenPublicKey } from "@/lib/wallet";
+import { formatAmount } from "@/utils/amount";
 
 const API_BASE_URL = process.env.NEXT_PUBLIC_API_URL || "http://localhost:3001/v1";
-const TOKEN_DECIMALS = 1e7;
+const TOKEN_DECIMALS = 7;
 
 interface StreamDetailsPageProps {
   params: {
@@ -27,7 +28,7 @@ interface StreamDetailsPageProps {
 function toDisplayAmount(baseUnits: string): number {
   const parsed = Number(baseUnits);
   if (!Number.isFinite(parsed)) return 0;
-  return parsed / TOKEN_DECIMALS;
+  return Number(formatAmount(BigInt(parsed), TOKEN_DECIMALS));
 }
 
 function formatUnixTimestamp(timestamp: number): string {
diff --git a/frontend/src/components/NotificationDropdown.tsx b/frontend/src/components/NotificationDropdown.tsx
index 9c2c722..166c48f 100644
--- a/frontend/src/components/NotificationDropdown.tsx
+++ b/frontend/src/components/NotificationDropdown.tsx
@@ -1,9 +1,8 @@
 "use client";
-import React, { useState, useEffect, useCallback } from 'react';
+import React, { useState, useEffect, useCallback, useMemo } from 'react';
 import { useStreamEvents } from '@/hooks/useStreamEvents';
-import { formatAmount } from '@/lib/amount';
+import { formatAmount } from '@/utils/amount';
 import { Button } from './ui/Button';
-import { fetchUserEvents } from '@/lib/dashboard';
 
 interface NotificationDropdownProps {
     publicKey: string;
@@ -21,7 +20,6 @@ interface NotificationItem {
 export const NotificationDropdown: React.FC<NotificationDropdownProps> = ({ publicKey }) => {
     const [isOpen, setIsOpen] = useState(false);
     const [notifications, setNotifications] = useState<NotificationItem[]>([]);
-    const [isLoading, setIsLoading] = useState(false);
     const [unreadCount, setUnreadCount] = useState(0);
 
     // Subscribe to live stream events for the user
@@ -57,35 +55,29 @@ export const NotificationDropdown: React.FC<NotificationDropdownProps> = ({ publ
         }
     }, []);
 
-    const loadEvents = useCallback(async () => {
-        if (!publicKey) return;
-        setIsLoading(true);
-        try {
-            const data = await fetchUserEvents(publicKey);
-            const initialNotifications: NotificationItem[] = data.slice(0, 20).map(event => ({
-                id: `init-${event.id}`,
-                streamId: event.streamId,
-                type: event.eventType.toLowerCase(),
-                message: formatEventMessage({
-                    type: event.eventType.toLowerCase(),
-                    data: { streamId: event.streamId, amount: event.amount } as Record<string, unknown>
-                }),
-                timestamp: event.timestamp * 1000,
-                read: true
-            }));
-            setNotifications(initialNotifications);
-        } catch (error) {
-            console.error(error);
-        } finally {
-            setIsLoading(false);
-        }
-    }, [publicKey, formatEventMessage]);
-
+    // Process live events into notifications
     useEffect(() => {
-        if (publicKey) {
-            loadEvents();
+        if (streamEvents.length === 0) return;
+
+        const newNotifications = streamEvents.map(event => ({
+            id: `${event.type}-${event.timestamp}`,
+            streamId: (event.data as { streamId?: number })?.streamId || 0,
+            type: event.type as NotificationItem['type'],
+            message: formatEventMessage(event),
+            timestamp: event.timestamp,
+            read: false
+        }));
+
+        if (newNotifications.length > 0) {
+            setNotifications(prev => {
+                const combined = [...newNotifications, ...prev];
+                const unique = combined.filter((notif, index, self) => 
+                    index === self.findIndex(n => n.id === notif.id)
+                );
+                return unique.slice(0, 20);
+            });
         }
-    }, [publicKey, loadEvents]);
+    }, [streamEvents, formatEventMessage]);
 
     // Handle incoming SSE events
     useEffect(() => {
@@ -136,8 +128,8 @@ export const NotificationDropdown: React.FC<NotificationDropdownProps> = ({ publ
                         {unreadCount > 9 ? '9+' : unreadCount}
                     </span>
                 )}
-                {!connected && (
-                    <span className="absolute bottom-0 right-0 h-2.5 w-2.5 bg-red-500 rounded-full border-2 border-background"></span>
+                {!connected && unreadCount === 0 && (
+                    <span className="absolute bottom-0 right-0 h-2 w-2 bg-red-500 rounded-full border-2 border-background"></span>
                 )}
             </button>
 
@@ -160,11 +152,7 @@ export const NotificationDropdown: React.FC<NotificationDropdownProps> = ({ publ
                         </div>
                     </div>
                     <div className="max-h-96 overflow-y-auto">
-                        {isLoading ? (
-                            <div className="p-8 text-center text-slate-400 text-sm">
-                                Loading notifications...
-                            </div>
-                        ) : notifications.length > 0 ? (
+                        {notifications.length > 0 ? (
                             <div className="divide-y divide-glass-border">
                                 {notifications.map((notification) => (
                                     <div
diff --git a/frontend/src/components/stream-creation/TopUpModal.tsx b/frontend/src/components/stream-creation/TopUpModal.tsx
index bc094e9..21a51da 100644
--- a/frontend/src/components/stream-creation/TopUpModal.tsx
+++ b/frontend/src/components/stream-creation/TopUpModal.tsx
@@ -8,9 +8,9 @@
  */
 
 import React, { useRef, useEffect, useState } from "react";
-import toast from "react-hot-toast";
 import { Button } from "@/components/ui/Button";
-import { hasValidPrecision } from "@/lib/amount";
+import { hasValidPrecision, validateAmountInput } from "@/utils/amount";
+import toast from "react-hot-toast";
 
 interface TopUpModalProps {
   streamId: string;
@@ -43,10 +43,13 @@ export const TopUpModal: React.FC<TopUpModalProps> = ({
     return () => window.removeEventListener("keydown", handleEscape);
   }, [onClose, isSubmitting]);
 
+  // Token decimals - using 7 as default (Stellar standard)
+  const TOKEN_DECIMALS = 7;
+
   const validate = (): boolean => {
-    const parsed = parseFloat(amount);
-    if (!amount.trim() || isNaN(parsed) || parsed <= 0) {
-      setError("Please enter a valid positive amount.");
+    const validationError = validateAmountInput(amount, TOKEN_DECIMALS);
+    if (validationError) {
+      setError(validationError);
       return false;
     }
     if (!hasValidPrecision(amount, 7)) {
@@ -117,13 +120,18 @@ export const TopUpModal: React.FC<TopUpModalProps> = ({
             <input
               ref={inputRef}
               id="topup-amount"
-              type="number"
-              step="any"
-              min="0"
+              type="text"
+              inputMode="decimal"
               value={amount}
               onChange={(e) => {
-                setAmount(e.target.value);
-                if (error) setError(null);
+                const newValue = e.target.value;
+                // Only allow valid number characters and check precision
+                if (newValue === '' || /^\d*\.?\d*$/.test(newValue)) {
+                  if (hasValidPrecision(newValue, TOKEN_DECIMALS)) {
+                    setAmount(newValue);
+                    if (error) setError(null);
+                  }
+                }
               }}
               onKeyDown={(e) => {
                 if (e.key === "Enter") void handleConfirm();
diff --git a/frontend/src/utils/amount.ts b/frontend/src/utils/amount.ts
new file mode 100644
index 0000000..f82b758
--- /dev/null
+++ b/frontend/src/utils/amount.ts
@@ -0,0 +1,312 @@
+/**
+ * Convert raw on-chain amount (smallest unit) to human-readable string
+ * @param raw - Raw amount as bigint (i128 from chain)
+ * @param decimals - Number of decimal places for the token
+ * @returns Formatted string e.g., "10.5000000"
+ */
+export function formatAmount(raw: bigint, decimals: number): string {
+  if (raw === 0n) return "0";
+  if (decimals === 0) return raw.toString();
+
+  const factor = 10n ** BigInt(decimals);
+  const integerPart = raw / factor;
+  const fractionalPart = raw % factor;
+
+  const fractionalStr = fractionalPart.toString().padStart(decimals, "0");
+  const trimmedFractional = fractionalStr.replace(/0+$/, "");
+
+  if (!trimmedFractional) return integerPart.toString();
+  return `${integerPart}.${trimmedFractional}`;
+}
+
+/**
+ * Alias for formatAmount - convert raw on-chain amount to human-readable string
+ * @deprecated Use formatAmount instead
+ */
+export function fromStroops(amount: bigint, decimals: number): string {
+  return formatAmount(amount, decimals);
+}
+
+/**
+ * Convert human-readable amount to raw on-chain amount (smallest unit)
+ * @param display - Display string (e.g., "1.234")
+ * @param decimals - Number of decimal places for the token
+ * @returns Raw amount as bigint
+ */
+export function parseAmount(display: string, decimals: number): bigint {
+  const trimmed = display.trim();
+  if (!trimmed) return 0n;
+
+  // Validate input is a valid number format
+  if (!/^\d*\.?\d*$/.test(trimmed)) return 0n;
+
+  const parts = trimmed.split(".");
+  const integerPart = parts[0] || "0";
+  let fractionalPart = parts[1] || "";
+
+  if (fractionalPart.length > decimals) {
+    fractionalPart = fractionalPart.slice(0, decimals);
+  } else if (fractionalPart.length < decimals) {
+    fractionalPart = fractionalPart.padEnd(decimals, "0");
+  }
+
+  const factor = 10n ** BigInt(decimals);
+  return BigInt(integerPart) * factor + BigInt(fractionalPart);
+}
+
+/**
+ * Alias for parseAmount - convert human-readable to raw on-chain amount
+ * @deprecated Use parseAmount instead
+ */
+export function toStroops(amount: string, decimals: number): bigint {
+  return parseAmount(amount, decimals);
+}
+
+/**
+ * Format rate per second to human-readable string showing both per-second and per-day
+ * @param ratePerSec - Rate per second as bigint
+ * @param decimals - Number of decimal places for the token
+ * @param symbol - Token symbol (optional)
+ * @returns Formatted rate string e.g., "0.0001 USDC/sec (8.64 USDC/day)"
+ */
+export function formatRate(
+  ratePerSec: bigint,
+  decimals: number,
+  symbol = ""
+): string {
+  if (ratePerSec === 0n) return symbol ? `0 ${symbol}/sec` : "0/sec";
+
+  const perSecond = formatAmount(ratePerSec, decimals);
+  const perDay = formatAmount(ratePerSec * 86400n, decimals); // 86400 seconds in a day
+
+  const symbolStr = symbol ? ` ${symbol}` : "";
+  return `${perSecond}${symbolStr}/sec (${perDay}${symbolStr}/day)`;
+}
+
+/**
+ * Format stream rate as human-readable string
+ * @deprecated Use formatRate instead
+ */
+export function formatStreamRate(
+  ratePerSecond: bigint,
+  decimals: number,
+  tokenSymbol: string = "USDC"
+): string {
+  return formatRate(ratePerSecond, decimals, tokenSymbol);
+}
+
+/**
+ * Check if input string has valid precision for the given decimals
+ * @param input - Input string to validate
+ * @param decimals - Maximum allowed decimal places
+ * @returns True if valid precision
+ */
+export function hasValidPrecision(input: string, decimals: number): boolean {
+  if (!input || input.trim() === "") return true; // Empty is valid (will be parsed as 0)
+
+  const cleanInput = input.trim();
+
+  // Check if it's a valid number format (digits with optional single decimal point)
+  if (!/^\d*\.?\d*$/.test(cleanInput)) return false;
+
+  // Check for negative sign (not allowed for amounts)
+  if (cleanInput.startsWith("-")) return false;
+
+  if (cleanInput.includes(".")) {
+    const fractionalPart = cleanInput.split(".")[1];
+    return fractionalPart ? fractionalPart.length <= decimals : true;
+  }
+
+  return true;
+}
+
+/**
+ * Validate amount input and return error message if invalid
+ * @param input - Input string to validate
+ * @param decimals - Maximum allowed decimal places
+ * @returns Error message or null if valid
+ */
+export function validateAmountInput(
+  input: string,
+  decimals: number
+): string | null {
+  if (!input || input.trim() === "") {
+    return "Amount is required";
+  }
+
+  const cleanInput = input.trim();
+
+  // Check for valid number format
+  if (!/^\d*\.?\d*$/.test(cleanInput)) {
+    return "Please enter a valid number";
+  }
+
+  // Check precision
+  if (!hasValidPrecision(cleanInput, decimals)) {
+    return `Amount cannot have more than ${decimals} decimal places`;
+  }
+
+  // Check for positive value
+  const numericValue = parseFloat(cleanInput);
+  if (isNaN(numericValue) || numericValue <= 0) {
+    return "Amount must be greater than 0";
+  }
+
+  return null;
+}
+
+/**
+ * Cache for token decimals to avoid repeated contract calls
+ */
+const tokenDecimalsCache = new Map<string, number>();
+
+// Default decimals for known tokens (Stellar uses 7 for XLM, 6 or 7 for most tokens)
+const DEFAULT_TOKEN_DECIMALS: Record<string, number> = {
+  XLM: 7,
+  USDC: 7,
+  EURC: 7,
+  FLOW: 7,
+};
+
+/**
+ * Get cached token decimals for a given token address
+ * @param tokenAddress - Token contract address
+ * @returns Cached decimals or undefined if not cached
+ */
+export function getCachedTokenDecimals(tokenAddress: string): number | undefined {
+  return tokenDecimalsCache.get(tokenAddress);
+}
+
+/**
+ * Set token decimals in cache
+ * @param tokenAddress - Token contract address
+ * @param decimals - Token decimal places
+ */
+export function setCachedTokenDecimals(
+  tokenAddress: string,
+  decimals: number
+): void {
+  tokenDecimalsCache.set(tokenAddress, decimals);
+}
+
+/**
+ * Clear token decimals cache
+ */
+export function clearTokenDecimalsCache(): void {
+  tokenDecimalsCache.clear();
+}
+
+/**
+ * Get default decimals for known token symbols
+ * @param symbol - Token symbol (e.g., "USDC", "XLM")
+ * @returns Default decimals or 7 if unknown
+ */
+export function getDefaultTokenDecimals(symbol: string): number {
+  return DEFAULT_TOKEN_DECIMALS[symbol.toUpperCase()] ?? 7;
+}
+
+// RPC configuration for fetching token decimals
+const SOROBAN_RPC_URL =
+  process.env.NEXT_PUBLIC_SOROBAN_RPC_URL ?? "https://soroban-testnet.stellar.org";
+const NETWORK_PASSPHRASE =
+  process.env.NEXT_PUBLIC_NETWORK_PASSPHRASE ?? "Test SDF Network ; September 2015";
+
+/**
+ * Fetch token decimals from the Soroban contract
+ * Fetches once and caches per token address
+ * @param tokenAddress - Token contract address
+ * @returns Promise resolving to token decimals
+ */
+export async function fetchTokenDecimals(tokenAddress: string): Promise<number> {
+  // Check cache first
+  const cached = getCachedTokenDecimals(tokenAddress);
+  if (cached !== undefined) {
+    return cached;
+  }
+
+  try {
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any
+    const sdk: any = await import("@stellar/stellar-sdk");
+    const { Contract, TransactionBuilder, BASE_FEE } = sdk;
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any
+    const rpc: any = sdk.rpc ?? sdk.SorobanRpc;
+
+    // Use a dummy account for simulation (just need to read contract data)
+    const dummyKeypair = sdk.Keypair.random();
+    const server = new rpc.Server(SOROBAN_RPC_URL, { allowHttp: false });
+
+    // Build a transaction to call the 'decimals' function
+    const account = await server.getAccount(dummyKeypair.publicKey());
+    const tokenContract = new Contract(tokenAddress);
+
+    const tx = new TransactionBuilder(account, {
+      fee: BASE_FEE,
+      networkPassphrase: NETWORK_PASSPHRASE,
+    })
+      .addOperation(tokenContract.call("decimals"))
+      .setTimeout(30)
+      .build();
+
+    const simResult = await server.simulateTransaction(tx);
+
+    if (rpc.Api?.isSimulationError?.(simResult) ?? simResult?.error) {
+      console.warn(`Failed to fetch decimals for ${tokenAddress}:`, simResult.error);
+      // Cache default to avoid repeated failed calls
+      setCachedTokenDecimals(tokenAddress, 7);
+      return 7;
+    }
+
+    const rawResult = simResult?.result?.retval;
+    if (!rawResult) {
+      console.warn(`No decimals returned for ${tokenAddress}`);
+      setCachedTokenDecimals(tokenAddress, 7);
+      return 7;
+    }
+
+    const nativeValue = sdk.scValToNative(rawResult);
+    let decimals: number;
+
+    if (typeof nativeValue === "number") {
+      decimals = nativeValue;
+    } else if (typeof nativeValue === "bigint") {
+      decimals = Number(nativeValue);
+    } else if (typeof nativeValue === "string") {
+      decimals = parseInt(nativeValue, 10);
+    } else {
+      decimals = 7;
+    }
+
+    // Cache the result
+    setCachedTokenDecimals(tokenAddress, decimals);
+    return decimals;
+  } catch (error) {
+    console.error(`Error fetching token decimals for ${tokenAddress}:`, error);
+    // Cache default to avoid repeated failed calls
+    setCachedTokenDecimals(tokenAddress, 7);
+    return 7;
+  }
+}
+
+/**
+ * React hook compatible function to get token decimals
+ * Returns cached value immediately if available, otherwise fetches and caches
+ * @param tokenAddress - Token contract address
+ * @param callback - Optional callback when decimals are fetched
+ * @returns Current decimals (cached or default 7)
+ */
+export function getTokenDecimalsSync(
+  tokenAddress: string,
+  callback?: (decimals: number) => void
+): number {
+  const cached = getCachedTokenDecimals(tokenAddress);
+  if (cached !== undefined) {
+    return cached;
+  }
+
+  // Trigger async fetch if not cached
+  if (callback) {
+    fetchTokenDecimals(tokenAddress).then(callback).catch(() => callback(7));
+  }
+
+  return 7; // Return default while fetching
+}

From 540da4828fc62f665d8e2d4e26e5f49fd0c91bec Mon Sep 17 00:00:00 2001
From: Lynndabel <okolo.ebelelynda@gmail.com>
Date: Tue, 28 Apr 2026 18:48:41 +0100
Subject: [PATCH 02/12] Add settings page with theme persistence, wallet info,
 and about section

---
 frontend/src/app/layout.tsx            |  21 ++-
 frontend/src/app/settings/page.tsx     | 113 +++++++++++++++
 frontend/src/components/ModeToggle.tsx |  44 ++++--
 frontend/src/hooks/useSettings.ts      | 187 +++++++++++++++++++++++++
 4 files changed, 356 insertions(+), 9 deletions(-)
 create mode 100644 frontend/src/hooks/useSettings.ts

diff --git a/frontend/src/app/layout.tsx b/frontend/src/app/layout.tsx
index 3bdf02b..ae4149f 100644
--- a/frontend/src/app/layout.tsx
+++ b/frontend/src/app/layout.tsx
@@ -34,10 +34,29 @@ export default function RootLayout({
 }>) {
   return (
     <html lang="en" suppressHydrationWarning>
+      <head>
+        <script
+          dangerouslySetInnerHTML={{
+            __html: `
+              (function() {
+                const theme = localStorage.getItem('flowfi-theme') || 'dark';
+                if (theme === 'system') {
+                  const prefersDark = window.matchMedia('(prefers-color-scheme: dark)').matches;
+                  document.documentElement.classList.toggle('dark', prefersDark);
+                } else {
+                  document.documentElement.classList.toggle('dark', theme === 'dark');
+                }
+              })();
+            `,
+          }}
+        />
+      </head>
       <body className={`${sora.variable} ${mono.variable} antialiased`}>
         <ThemeProvider
           attribute="class"
-          enableSystem={false}
+          defaultTheme="dark"
+          enableSystem={true}
+          storageKey="flowfi-theme"
           disableTransitionOnChange
         >
           <QueryProvider>
diff --git a/frontend/src/app/settings/page.tsx b/frontend/src/app/settings/page.tsx
index 5414bcd..e6f3b95 100644
--- a/frontend/src/app/settings/page.tsx
+++ b/frontend/src/app/settings/page.tsx
@@ -2,6 +2,7 @@
 
 import { useState } from "react";
 import { Copy, Check, LogOut, Moon, Sun, Bell, Globe } from "lucide-react";
+import { STELLAR_NETWORK } from "@/lib/wallet";
 import { useWallet } from "@/context/wallet-context";
 import { useRouter } from "next/navigation";
 import Link from "next/link";
@@ -10,6 +11,12 @@ import toast from "react-hot-toast";
 
 type DisplayCurrency = "USD" | "XLM" | "USDC";
 type AmountFormat = "full" | "compact";
+type DecimalPlaces = 2 | 4 | 7;
+
+// App version from package.json or env
+const APP_VERSION = process.env.NEXT_PUBLIC_APP_VERSION || "1.0.0";
+const CONTRACT_ADDRESS = process.env.NEXT_PUBLIC_STREAMING_CONTRACT || "CDV4K...7ZQY";
+const INDEXER_URL = process.env.NEXT_PUBLIC_API_URL || "http://localhost:3001/v1";
 
 export default function SettingsPage() {
   const router = useRouter();
@@ -45,6 +52,16 @@ export default function SettingsPage() {
     return "full";
   });
 
+  const [decimalPlaces, setDecimalPlaces] = useState<DecimalPlaces>(() => {
+    if (typeof window !== "undefined") {
+      const saved = localStorage.getItem("flowfi-decimal-places");
+      return (saved ? parseInt(saved, 10) : 7) as DecimalPlaces;
+    }
+    return 7;
+  });
+
+  const [lastLedger, setLastLedger] = useState<string>("Loading...");
+
   const [copied, setCopied] = useState(false);
 
   const toggleTheme = (newTheme: "light" | "dark" | "system") => {
@@ -90,6 +107,28 @@ export default function SettingsPage() {
     }
   };
 
+  // Fetch last ledger from indexer
+  useEffect(() => {
+    const fetchLastLedger = async () => {
+      try {
+        const response = await fetch(`${INDEXER_URL}/health`);
+        if (response.ok) {
+          const data = await response.json();
+          if (data.ledger) {
+            setLastLedger(data.ledger.toString());
+          } else {
+            setLastLedger("Unknown");
+          }
+        } else {
+          setLastLedger("Unavailable");
+        }
+      } catch {
+        setLastLedger("Error");
+      }
+    };
+    fetchLastLedger();
+  }, []);
+
   if (!isHydrated) {
     return (
       <div className="relative min-h-screen overflow-hidden bg-gradient-to-br from-zinc-950 via-zinc-900 to-black dark:from-white dark:via-gray-100 dark:to-gray-200 transition-colors flex items-center justify-center">
@@ -239,6 +278,29 @@ export default function SettingsPage() {
                   ))}
                 </div>
               </div>
+
+              <div>
+                <label className="text-sm text-white/60 dark:text-black/60">Decimal Places</label>
+                <div className="flex gap-2 mt-1">
+                  {([2, 4, 7] as DecimalPlaces[]).map((places) => (
+                    <button
+                      key={places}
+                      onClick={() => {
+                        setDecimalPlaces(places);
+                        localStorage.setItem("flowfi-decimal-places", places.toString());
+                        toast.success(`Decimal places set to ${places}`);
+                      }}
+                      className={`px-3 py-1.5 text-xs rounded-lg border transition-all ${
+                        decimalPlaces === places
+                          ? "border-green-500 bg-green-500/20 text-white"
+                          : "border-white/10 text-white/60 hover:border-white/20"
+                      }`}
+                    >
+                      {places} decimals
+                    </button>
+                  ))}
+                </div>
+              </div>
             </div>
           </div>
 
@@ -294,6 +356,57 @@ export default function SettingsPage() {
             </div>
           )}
 
+          {/* About Section */}
+          <div className="space-y-4 pt-6 border-t border-white/10 dark:border-black/10">
+            <div className="flex items-center gap-3">
+              <div className="p-2 rounded-lg bg-slate-500/20 text-slate-400">
+                <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2">
+                  <circle cx="12" cy="12" r="10"/>
+                  <path d="M12 16v-4M12 8h.01"/>
+                </svg>
+              </div>
+              <div>
+                <p className="font-medium text-white dark:text-black">About</p>
+                <p className="text-sm opacity-60">App and contract information</p>
+              </div>
+            </div>
+
+            <div className="space-y-3 pl-12">
+              <div className="flex items-center justify-between py-2 border-b border-white/5 dark:border-black/5">
+                <span className="text-sm text-white/60 dark:text-black/60">App Version</span>
+                <span className="text-sm font-mono text-white dark:text-black">{APP_VERSION}</span>
+              </div>
+
+              <div className="flex items-center justify-between py-2 border-b border-white/5 dark:border-black/5">
+                <span className="text-sm text-white/60 dark:text-black/60">Contract Address</span>
+                <div className="flex items-center gap-2">
+                  <span className="text-sm font-mono text-white dark:text-black">{shortenPublicKey(CONTRACT_ADDRESS)}</span>
+                  <button
+                    onClick={() => {
+                      navigator.clipboard.writeText(CONTRACT_ADDRESS);
+                      toast.success("Contract address copied");
+                    }}
+                    className="opacity-60 hover:opacity-100 transition"
+                  >
+                    <Copy size={14} />
+                  </button>
+                </div>
+              </div>
+
+              <div className="flex items-center justify-between py-2 border-b border-white/5 dark:border-black/5">
+                <span className="text-sm text-white/60 dark:text-black/60">Network</span>
+                <span className="inline-flex items-center px-2 py-0.5 rounded text-xs font-semibold bg-purple-500/20 text-purple-400 border border-purple-500/30">
+                  {STELLAR_NETWORK === "MAINNET" ? "Mainnet" : "Testnet"}
+                </span>
+              </div>
+
+              <div className="flex items-center justify-between py-2">
+                <span className="text-sm text-white/60 dark:text-black/60">Indexer Last Ledger</span>
+                <span className="text-sm font-mono text-white dark:text-black">{lastLedger}</span>
+              </div>
+            </div>
+          </div>
+
           {/* Disconnect */}
           {session && (
             <button
diff --git a/frontend/src/components/ModeToggle.tsx b/frontend/src/components/ModeToggle.tsx
index c409ffb..f027515 100644
--- a/frontend/src/components/ModeToggle.tsx
+++ b/frontend/src/components/ModeToggle.tsx
@@ -1,22 +1,50 @@
 "use client";
 
 import { Moon, Sun } from "lucide-react";
-import { useTheme } from "next-themes";
+import { useEffect, useState } from "react";
 
 export function ModeToggle() {
-  const { theme, setTheme } = useTheme();
+  const [theme, setThemeState] = useState<"light" | "dark">("dark");
+  const [mounted, setMounted] = useState(false);
 
-  const activeModeToggle = () => {
-    setTheme(theme === "light" ? "dark" : "light");
+  useEffect(() => {
+    setMounted(true);
+    // Read from localStorage directly to sync with settings page
+    const saved = localStorage.getItem("flowfi-theme") as "light" | "dark" | "system" | null;
+    if (saved === "light" || saved === "dark") {
+      setThemeState(saved);
+    } else if (saved === "system") {
+      const prefersDark = window.matchMedia("(prefers-color-scheme: dark)").matches;
+      setThemeState(prefersDark ? "dark" : "light");
+    }
+  }, []);
+
+  const toggleTheme = () => {
+    const newTheme = theme === "light" ? "dark" : "light";
+    setThemeState(newTheme);
+    // Save to localStorage with the same key as settings page
+    localStorage.setItem("flowfi-theme", newTheme);
+    // Apply theme immediately
+    document.documentElement.classList.toggle("dark", newTheme === "dark");
   };
 
+  // Prevent hydration mismatch
+  if (!mounted) {
+    return (
+      <button className="inline-flex items-center justify-center w-8 h-8">
+        <span className="sr-only">Toggle theme</span>
+      </button>
+    );
+  }
+
   return (
     <button
-      onClick={activeModeToggle}
-      className="inline-flex items-center justify-center"
+      onClick={toggleTheme}
+      className="inline-flex items-center justify-center w-8 h-8 rounded-lg hover:bg-white/10 dark:hover:bg-black/10 transition-colors"
+      aria-label={`Switch to ${theme === "light" ? "dark" : "light"} mode`}
     >
-      <Sun className="h-[1.2rem] w-[1.2rem] scale-100 rotate-0 transition-all dark:scale-0 dark:-rotate-90" />
-      <Moon className="absolute h-[1.2rem] w-[1.2rem] scale-0 rotate-90 transition-all dark:scale-100 dark:rotate-0" />
+      <Sun className="h-[1.2rem] w-[1.2rem] scale-100 rotate-0 transition-all dark:scale-0 dark:-rotate-90 text-yellow-500" />
+      <Moon className="absolute h-[1.2rem] w-[1.2rem] scale-0 rotate-90 transition-all dark:scale-100 dark:rotate-0 text-blue-400" />
       <span className="sr-only">Toggle theme</span>
     </button>
   );
diff --git a/frontend/src/hooks/useSettings.ts b/frontend/src/hooks/useSettings.ts
new file mode 100644
index 0000000..c14dab6
--- /dev/null
+++ b/frontend/src/hooks/useSettings.ts
@@ -0,0 +1,187 @@
+"use client";
+
+import { useState, useEffect, useCallback } from "react";
+
+export type Theme = "light" | "dark" | "system";
+export type DisplayCurrency = "USD" | "XLM" | "USDC";
+export type AmountFormat = "full" | "compact";
+export type DecimalPlaces = 2 | 4 | 7;
+
+interface Settings {
+  theme: Theme;
+  displayCurrency: DisplayCurrency;
+  amountFormat: AmountFormat;
+  decimalPlaces: DecimalPlaces;
+}
+
+const DEFAULT_SETTINGS: Settings = {
+  theme: "dark",
+  displayCurrency: "USD",
+  amountFormat: "full",
+  decimalPlaces: 7,
+};
+
+const STORAGE_KEYS = {
+  theme: "flowfi-theme",
+  displayCurrency: "flowfi-currency",
+  amountFormat: "flowfi-amount-format",
+  decimalPlaces: "flowfi-decimal-places",
+};
+
+export function useSettings() {
+  const [settings, setSettings] = useState<Settings>(DEFAULT_SETTINGS);
+  const [isHydrated, setIsHydrated] = useState(false);
+
+  useEffect(() => {
+    if (typeof window === "undefined") return;
+
+    const savedTheme = localStorage.getItem(STORAGE_KEYS.theme) as Theme | null;
+    const savedCurrency = localStorage.getItem(
+      STORAGE_KEYS.displayCurrency
+    ) as DisplayCurrency | null;
+    const savedFormat = localStorage.getItem(
+      STORAGE_KEYS.amountFormat
+    ) as AmountFormat | null;
+    const savedDecimals = localStorage.getItem(STORAGE_KEYS.decimalPlaces);
+
+    setSettings({
+      theme: savedTheme || DEFAULT_SETTINGS.theme,
+      displayCurrency: savedCurrency || DEFAULT_SETTINGS.displayCurrency,
+      amountFormat: savedFormat || DEFAULT_SETTINGS.amountFormat,
+      decimalPlaces: savedDecimals
+        ? (parseInt(savedDecimals, 10) as DecimalPlaces)
+        : DEFAULT_SETTINGS.decimalPlaces,
+    });
+
+    setIsHydrated(true);
+  }, []);
+
+  const setTheme = useCallback((theme: Theme) => {
+    setSettings((prev) => ({ ...prev, theme }));
+    localStorage.setItem(STORAGE_KEYS.theme, theme);
+
+    // Apply theme immediately
+    if (theme === "system") {
+      const prefersDark = window.matchMedia("(prefers-color-scheme: dark)").matches;
+      document.documentElement.classList.toggle("dark", prefersDark);
+    } else {
+      document.documentElement.classList.toggle("dark", theme === "dark");
+    }
+  }, []);
+
+  const setDisplayCurrency = useCallback((currency: DisplayCurrency) => {
+    setSettings((prev) => ({ ...prev, displayCurrency: currency }));
+    localStorage.setItem(STORAGE_KEYS.displayCurrency, currency);
+  }, []);
+
+  const setAmountFormat = useCallback((format: AmountFormat) => {
+    setSettings((prev) => ({ ...prev, amountFormat: format }));
+    localStorage.setItem(STORAGE_KEYS.amountFormat, format);
+  }, []);
+
+  const setDecimalPlaces = useCallback((places: DecimalPlaces) => {
+    setSettings((prev) => ({ ...prev, decimalPlaces: places }));
+    localStorage.setItem(STORAGE_KEYS.decimalPlaces, places.toString());
+  }, []);
+
+  return {
+    ...settings,
+    isHydrated,
+    setTheme,
+    setDisplayCurrency,
+    setAmountFormat,
+    setDecimalPlaces,
+  };
+}
+
+// Helper function to get decimal places synchronously (for non-React usage)
+export function getDecimalPlaces(): DecimalPlaces {
+  if (typeof window === "undefined") return 7;
+  const saved = localStorage.getItem(STORAGE_KEYS.decimalPlaces);
+  return saved ? (parseInt(saved, 10) as DecimalPlaces) : 7;
+}
+
+// Helper function to get theme synchronously
+export function getStoredTheme(): Theme {
+  if (typeof window === "undefined") return "dark";
+  return (localStorage.getItem(STORAGE_KEYS.theme) as Theme) || "dark";
+}
+
+// Apply theme immediately (useful for initial page load)
+export function applyStoredTheme(): void {
+  if (typeof window === "undefined") return;
+
+  const theme = getStoredTheme();
+  if (theme === "system") {
+    const prefersDark = window.matchMedia("(prefers-color-scheme: dark)").matches;
+    document.documentElement.classList.toggle("dark", prefersDark);
+  } else {
+    document.documentElement.classList.toggle("dark", theme === "dark");
+  }
+}
+
+// Format amount based on user's decimal places preference
+export function formatAmountWithPreference(
+  amount: string | number | bigint,
+  tokenDecimals: number = 7
+): string {
+  const userDecimals = getDecimalPlaces();
+  const divisor = BigInt(10 ** tokenDecimals);
+
+  let raw: bigint;
+  if (typeof amount === "bigint") {
+    raw = amount;
+  } else if (typeof amount === "number") {
+    raw = BigInt(Math.round(amount * 10 ** tokenDecimals));
+  } else {
+    raw = BigInt(amount);
+  }
+
+  const integerPart = raw / divisor;
+  const fractionalPart = raw % divisor;
+
+  if (fractionalPart === 0n) {
+    return integerPart.toString();
+  }
+
+  // Convert fractional part to string and pad with leading zeros
+  const fractionalStr = fractionalPart
+    .toString()
+    .padStart(tokenDecimals, "0")
+    .slice(0, userDecimals);
+
+  // Remove trailing zeros
+  const trimmedFractional = fractionalStr.replace(/0+$/, "");
+
+  if (!trimmedFractional) return integerPart.toString();
+  return `${integerPart}.${trimmedFractional}`;
+}
+
+// Get user preference for amount formatting
+export function getAmountFormat(): AmountFormat {
+  if (typeof window === "undefined") return "full";
+  return (localStorage.getItem(STORAGE_KEYS.amountFormat) as AmountFormat) || "full";
+}
+
+// Get user preference for display currency
+export function getDisplayCurrency(): DisplayCurrency {
+  if (typeof window === "undefined") return "USD";
+  return (
+    (localStorage.getItem(STORAGE_KEYS.displayCurrency) as DisplayCurrency) || "USD"
+  );
+}
+
+export { STORAGE_KEYS, DEFAULT_SETTINGS };
+export default useSettings;
+
+/**
+ * Usage examples:
+ *
+ * In React components:
+ * const { theme, decimalPlaces, setTheme } = useSettings();
+ *
+ * For non-React code (utils, formatters):
+ * const decimals = getDecimalPlaces(); // 2, 4, or 7
+ * const formatted = formatAmountWithPreference(rawAmount, 7);
+ * const format = getAmountFormat(); // 'full' or 'compact'
+ */

From e484c626a0be624431ae383485dd439b570bf826 Mon Sep 17 00:00:00 2001
From: Lynndabel <okolo.ebelelynda@gmail.com>
Date: Tue, 28 Apr 2026 18:57:19 +0100
Subject: [PATCH 03/12] Add comprehensive stream details page with live
 claimable counter, event history, and all on-chain actions

---
 frontend/src/app/streams/[id]/page.tsx | 889 ++++++++++++++-----------
 1 file changed, 495 insertions(+), 394 deletions(-)

diff --git a/frontend/src/app/streams/[id]/page.tsx b/frontend/src/app/streams/[id]/page.tsx
index 047a5bb..38b34a8 100644
--- a/frontend/src/app/streams/[id]/page.tsx
+++ b/frontend/src/app/streams/[id]/page.tsx
@@ -1,234 +1,253 @@
 "use client";
 
-import { useCallback, useEffect, useState } from "react";
-import { useParams } from "next/navigation";
-import { Loader2 } from "lucide-react";
-import LiveCounter from "@/components/Livecounter";
-import ProgressBar from "@/components/Progressbar";
-import { CancelStreamModal } from "@/components/streams/CancelStreamModal";
-import TransactionTracker, {
-  type TransactionStatus,
-} from "@/components/TransactionTracker";
+import { useEffect, useState, useCallback, useMemo } from "react";
+import { useParams, useRouter } from "next/navigation";
+import Link from "next/link";
+import { ArrowLeft, Pause, Play, X, Plus, Download, AlertTriangle } from "lucide-react";
 import { Button } from "@/components/ui/Button";
 import toast from "react-hot-toast";
 import { useWallet } from "@/context/wallet-context";
-import { useCancelStream } from "@/hooks/useCancelStream";
 import { useStreamEvents } from "@/hooks/useStreamEvents";
-import { useWithdrawStream } from "@/hooks/useWithdrawStream";
 import {
+  withdrawFromStream,
+  cancelStream,
   topUpStream,
   pauseStream,
   resumeStream,
+  toBaseUnits,
   toSorobanErrorMessage,
+  fromBaseUnits,
 } from "@/lib/soroban";
-import { formatAmount, parseAmount, hasValidPrecision, formatRate } from "@/lib/amount";
+import { CancelConfirmModal } from "@/components/stream-creation/CancelConfirmModal";
 import type { WalletSession } from "@/lib/wallet";
+import type { BackendStreamEvent } from "@/lib/api-types";
+import { formatAmount } from "@/utils/amount";
+import { shortenPublicKey } from "@/lib/wallet";
+
 interface StreamDetail {
   id: string;
+  streamId: number;
   sender: string;
   recipient: string;
   tokenAddress: string;
+  tokenSymbol?: string;
   depositedAmount: string;
   withdrawnAmount: string;
   ratePerSecond: string;
   startTime: number;
+  endTime?: number;
   lastUpdateTime: number;
   isActive: boolean;
   status: string;
   isPaused?: boolean;
   pausedAt?: string;
+  createdAt: string;
+  updatedAt: string;
 }
 
+const API_BASE_URL = process.env.NEXT_PUBLIC_API_URL || "http://localhost:3001/v1";
+const EVENTS_PER_PAGE = 10;
+
+// Token symbol mapping
+const TOKEN_SYMBOLS: Record<string, string> = {
+  "CDLZFC3SYJYDZT7K67VZ75HPJVIEUVNIXF47ZG2FB2RMQQVU2HHGCN": "XLM",
+  "CBIELTK6YBZJU5UP2WWQEUCYKLPU6AUNZ2BQ4WWFEIE3USCIHMXQDAMA": "USDC",
+  "CCWAMYJME4YOIUNAKVYEBYOG5I65QMKEX2NMN4OJAPXRPIF24ONPSHY": "EURC",
+};
+
+// Event type styling
+const EVENT_STYLES: Record<string, { color: string; icon: string; label: string }> = {
+  CREATED: { color: "#22c55e", icon: "✓", label: "Created" },
+  TOPPED_UP: { color: "#3b82f6", icon: "+", label: "Topped Up" },
+  WITHDRAWN: { color: "#8b5cf6", icon: "↓", label: "Withdrawn" },
+  CANCELLED: { color: "#ef4444", icon: "×", label: "Cancelled" },
+  COMPLETED: { color: "#10b981", icon: "✓", label: "Completed" },
+  PAUSED: { color: "#f59e0b", icon: "⏸", label: "Paused" },
+  RESUMED: { color: "#06b6d4", icon: "▶", label: "Resumed" },
+  FEE_COLLECTED: { color: "#6b7280", icon: "$", label: "Fee" },
+};
+
 export default function StreamDetailsPage() {
   const params = useParams();
+  const router = useRouter();
   const streamId = params.id as string;
   const { session, isHydrated } = useWallet();
-  
+
   const [stream, setStream] = useState<StreamDetail | null>(null);
+  const [events, setEvents] = useState<BackendStreamEvent[]>([]);
+  const [eventsPage, setEventsPage] = useState(1);
+  const [eventsTotal, setEventsTotal] = useState(0);
   const [loading, setLoading] = useState(true);
   const [error, setError] = useState<string | null>(null);
+
+  // Action states
+  const [withdrawing, setWithdrawing] = useState(false);
+  const [cancelling, setCancelling] = useState(false);
+  const [pausing, setPausing] = useState(false);
+  const [resuming, setResuming] = useState(false);
   const [topUpAmount, setTopUpAmount] = useState("");
   const [showTopUp, setShowTopUp] = useState(false);
   const [showCancelModal, setShowCancelModal] = useState(false);
-  const [withdrawTxHash, setWithdrawTxHash] = useState<string | undefined>();
-  const [withdrawStatus, setWithdrawStatus] = useState<TransactionStatus>("idle");
-  const [withdrawError, setWithdrawError] = useState<string | undefined>();
-  const { cancel: cancelStream, isPending: cancelling } = useCancelStream<StreamDetail>();
-  const [pausing, setPausing] = useState(false);
-  const [resuming, setResuming] = useState(false);
-  const [pauseResumeStatus, setPauseResumeStatus] =
-    useState<TransactionStatus>("idle");
-  const [pauseResumeTxHash, setPauseResumeTxHash] = useState<string | undefined>(
-    undefined,
-  );
-  const [pauseResumeError, setPauseResumeError] = useState<string | undefined>(
-    undefined,
-  );
-  const { withdraw: withdrawStream, isPending: withdrawing } = useWithdrawStream();
 
-  // SSE integration for real-time stream updates
+  // Live claimable counter
+  const [liveClaimable, setLiveClaimable] = useState<bigint>(0n);
+
+  // SSE integration
   const { events: streamEvents } = useStreamEvents({
     streamIds: [streamId],
     autoReconnect: true,
   });
 
+  // Fetch stream data
   const fetchStream = useCallback(async () => {
+    if (!streamId) return;
     try {
-      const baseUrl = process.env.NEXT_PUBLIC_API_URL || "http://localhost:3001";
-      const response = await fetch(`${baseUrl}/v1/streams/${streamId}`);
-      if (!response.ok) {
-        throw new Error("Stream not found");
-      }
+      const response = await fetch(`${API_BASE_URL}/streams/${streamId}`);
+      if (!response.ok) throw new Error("Stream not found");
       const data = await response.json();
       setStream(data);
-      setError(null);
     } catch (err) {
       setError(err instanceof Error ? err.message : "Failed to fetch stream");
-    } finally {
-      setLoading(false);
     }
   }, [streamId]);
 
-  useEffect(() => {
-    if (!isHydrated || !session || !streamId) {
-      return;
+  // Fetch events
+  const fetchEvents = useCallback(async (page: number) => {
+    if (!streamId) return;
+    try {
+      const response = await fetch(
+        `${API_BASE_URL}/streams/${streamId}/events?page=${page}&limit=${EVENTS_PER_PAGE}`
+      );
+      if (response.ok) {
+        const data = await response.json();
+        setEvents(data.events || []);
+        setEventsTotal(data.total || 0);
+      }
+    } catch (err) {
+      console.error("Failed to fetch events:", err);
     }
+  }, [streamId]);
 
-    void fetchStream();
-  }, [fetchStream, isHydrated, session, streamId]);
+  // Initial load
+  useEffect(() => {
+    if (!isHydrated) return;
 
-  // Handle SSE events to update stream state in real-time
+    const loadData = async () => {
+      setLoading(true);
+      await Promise.all([fetchStream(), fetchEvents(1)]);
+      setLoading(false);
+    };
+
+    loadData();
+  }, [isHydrated, fetchStream, fetchEvents]);
+
+  // Handle SSE events
   useEffect(() => {
     if (streamEvents.length > 0) {
-      const latestEvent = streamEvents[0];
-      console.log('Stream event received:', latestEvent);
-      
-      void fetchStream();
+      fetchStream();
+      fetchEvents(eventsPage);
     }
-  }, [fetchStream, streamEvents]);
+  }, [streamEvents, fetchStream, fetchEvents, eventsPage]);
 
-  const handleWithdraw = async () => {
-    if (!session) {
-      toast.error("Please connect your wallet first");
-      return;
-    }
+  // Live claimable counter
+  useEffect(() => {
+    if (!stream) return;
+
+    const ratePerSecond = BigInt(stream.ratePerSecond);
+    const withdrawn = BigInt(stream.withdrawnAmount);
+    const deposited = BigInt(stream.depositedAmount);
+    const lastUpdate = stream.lastUpdateTime;
+
+    const updateClaimable = () => {
+      if (!stream.isActive || stream.isPaused) {
+        // Use the server's calculated value when stream is not active
+        setLiveClaimable(deposited - withdrawn);
+        return;
+      }
 
-    setWithdrawStatus("idle");
-    setWithdrawError(undefined);
+      const now = Math.floor(Date.now() / 1000);
+      const elapsed = BigInt(now - lastUpdate);
+      const accrued = elapsed * ratePerSecond;
+      const totalClaimable = deposited - withdrawn + accrued;
 
-    try {
-      const { txHash } = await withdrawStream(streamId);
-      setWithdrawTxHash(txHash);
-      setWithdrawStatus("submitted");
-      setStream((current) =>
-        current
-          ? {
-              ...current,
-              withdrawnAmount: current.depositedAmount,
-              lastUpdateTime: Math.floor(Date.now() / 1000),
-            }
-          : current,
-      );
-      toast.success("Withdraw transaction submitted.");
-      void fetchStream();
-    } catch (err) {
-      const message = err instanceof Error ? err.message : "Failed to withdraw stream.";
-      setWithdrawError(message);
-      setWithdrawStatus("failed");
-      toast.error(message);
-    }
-  };
+      // Cap at deposited amount
+      setLiveClaimable(totalClaimable > deposited ? deposited : totalClaimable);
+    };
+
+    updateClaimable();
+    const interval = setInterval(updateClaimable, 1000);
+
+    return () => clearInterval(interval);
+  }, [stream]);
+
+  // User roles
+  const isSender = useMemo(() => {
+    if (!session || !stream) return false;
+    return session.publicKey === stream.sender;
+  }, [session, stream]);
+
+  const isRecipient = useMemo(() => {
+    if (!session || !stream) return false;
+    return session.publicKey === stream.recipient;
+  }, [session, stream]);
 
-  const handleConfirmCancel = async () => {
+  // Token symbol
+  const tokenSymbol = useMemo(() => {
+    if (!stream) return "??";
+    return TOKEN_SYMBOLS[stream.tokenAddress] || stream.tokenAddress.slice(0, 4);
+  }, [stream]);
+
+  // Handlers
+  const handleWithdraw = async () => {
     if (!session) {
-      toast.error("Please connect your wallet first");
+      toast.error("Please connect your wallet");
       return;
     }
-
+    setWithdrawing(true);
     try {
-      const cancelledStream = await cancelStream(streamId);
-      setStream((current) => ({
-        ...(current ?? cancelledStream),
-        ...cancelledStream,
-        status: "CANCELLED",
-        isActive: false,
-      }));
-      setShowCancelModal(false);
-      toast.success("Stream cancelled successfully.");
-      void fetchStream();
+      await withdrawFromStream(session, { streamId: BigInt(streamId) });
+      toast.success("Withdrawal successful!");
+      await fetchStream();
     } catch (err) {
-      toast.error(err instanceof Error ? err.message : "Failed to cancel stream.");
+      toast.error(toSorobanErrorMessage(err));
+    } finally {
+      setWithdrawing(false);
     }
   };
 
   const handleTopUp = async () => {
     if (!session) {
-      toast.error("Please connect your wallet first");
+      toast.error("Please connect your wallet");
       return;
     }
-
     if (!topUpAmount || parseFloat(topUpAmount) <= 0) {
       toast.error("Please enter a valid amount");
       return;
     }
-
-    if (!hasValidPrecision(topUpAmount, 7)) {
-      toast.error("Amount exceeds maximum precision (7 decimal places)");
-      return;
-    }
-
     try {
-      await topUpStream(session, {
-        streamId: BigInt(streamId),
-        amount: parseAmount(topUpAmount, 7),
-      });
+      const amount = toBaseUnits(topUpAmount);
+      await topUpStream(session, { streamId: BigInt(streamId), amount });
       toast.success("Stream topped up successfully!");
       setShowTopUp(false);
       setTopUpAmount("");
-      // Refresh stream data
-      window.location.reload();
+      await fetchStream();
     } catch (err) {
       toast.error(toSorobanErrorMessage(err));
     }
   };
 
-  const refetchStream = async () => {
-    try {
-      const baseUrl = process.env.NEXT_PUBLIC_API_URL || "http://localhost:3001";
-      const response = await fetch(`${baseUrl}/v1/streams/${streamId}`);
-      if (response.ok) {
-        const data = await response.json();
-        setStream(data);
-      }
-    } catch (err) {
-      console.error("Failed to refresh stream:", err);
-    }
-  };
-
   const handlePause = async () => {
     if (!session) {
-      toast.error("Please connect your wallet first");
+      toast.error("Please connect your wallet");
       return;
     }
-
     setPausing(true);
-    setPauseResumeError(undefined);
-    setPauseResumeTxHash(undefined);
-    setPauseResumeStatus("signing");
     try {
-      const result = await pauseStream(session, {
-        streamId: BigInt(streamId),
-      });
-      setPauseResumeTxHash(result.txHash);
-      setPauseResumeStatus("submitted");
-      toast.success("Stream pause submitted!");
-      await refetchStream();
-      setPauseResumeStatus("confirmed");
+      await pauseStream(session, { streamId: BigInt(streamId) });
+      toast.success("Stream paused");
+      await fetchStream();
     } catch (err) {
-      const message = toSorobanErrorMessage(err);
-      setPauseResumeError(message);
-      setPauseResumeStatus("failed");
-      toast.error(message);
+      toast.error(toSorobanErrorMessage(err));
     } finally {
       setPausing(false);
     }
@@ -236,38 +255,49 @@ export default function StreamDetailsPage() {
 
   const handleResume = async () => {
     if (!session) {
-      toast.error("Please connect your wallet first");
+      toast.error("Please connect your wallet");
       return;
     }
-
     setResuming(true);
-    setPauseResumeError(undefined);
-    setPauseResumeTxHash(undefined);
-    setPauseResumeStatus("signing");
     try {
-      const result = await resumeStream(session, {
-        streamId: BigInt(streamId),
-      });
-      setPauseResumeTxHash(result.txHash);
-      setPauseResumeStatus("submitted");
-      toast.success("Stream resume submitted!");
-      await refetchStream();
-      setPauseResumeStatus("confirmed");
+      await resumeStream(session, { streamId: BigInt(streamId) });
+      toast.success("Stream resumed");
+      await fetchStream();
     } catch (err) {
-      const message = toSorobanErrorMessage(err);
-      setPauseResumeError(message);
-      setPauseResumeStatus("failed");
-      toast.error(message);
+      toast.error(toSorobanErrorMessage(err));
     } finally {
       setResuming(false);
     }
   };
 
+  const handleCancel = async () => {
+    if (!session) {
+      toast.error("Please connect your wallet");
+      return;
+    }
+    setCancelling(true);
+    try {
+      await cancelStream(session, { streamId: BigInt(streamId) });
+      toast.success("Stream cancelled");
+      setShowCancelModal(false);
+      await fetchStream();
+    } catch (err) {
+      toast.error(toSorobanErrorMessage(err));
+    } finally {
+      setCancelling(false);
+    }
+  };
+
+  const totalPages = Math.ceil(eventsTotal / EVENTS_PER_PAGE);
+
   if (loading) {
     return (
-      <main style={{ minHeight: "100vh", padding: "clamp(1rem, 3vw, 2rem)" }}>
-        <div style={{ maxWidth: 720, margin: "0 auto" }}>
-          <p>Loading stream details...</p>
+      <main className="min-h-screen p-4 md:p-8 bg-gradient-to-br from-zinc-950 via-zinc-900 to-black">
+        <div className="max-w-4xl mx-auto">
+          <div className="glass-card p-8 text-center">
+            <div className="animate-spin h-8 w-8 border-2 border-accent border-t-transparent rounded-full mx-auto mb-4" />
+            <p className="text-slate-400">Loading stream details...</p>
+          </div>
         </div>
       </main>
     );
@@ -275,274 +305,345 @@ export default function StreamDetailsPage() {
 
   if (error || !stream) {
     return (
-      <main style={{ minHeight: "100vh", padding: "clamp(1rem, 3vw, 2rem)" }}>
-        <div style={{ maxWidth: 720, margin: "0 auto" }}>
-          <p style={{ color: "red" }}>{error || "Stream not found"}</p>
+      <main className="min-h-screen p-4 md:p-8 bg-gradient-to-br from-zinc-950 via-zinc-900 to-black">
+        <div className="max-w-4xl mx-auto">
+          <div className="glass-card p-8 text-center">
+            <AlertTriangle className="h-12 w-12 text-red-400 mx-auto mb-4" />
+            <p className="text-red-400 mb-4">{error || "Stream not found"}</p>
+            <Link href="/dashboard" className="text-accent hover:underline">
+              ← Back to Dashboard
+            </Link>
+          </div>
         </div>
       </main>
     );
   }
 
-  const deposited = parseFloat(formatAmount(BigInt(stream.depositedAmount), 7));
-  const withdrawn = parseFloat(formatAmount(BigInt(stream.withdrawnAmount), 7));
-  const claimable = deposited - withdrawn;
-  const displayedClaimable = withdrawStatus === "submitted" ? 0 : claimable;
-  const percentage = Math.round((withdrawn / deposited) * 100);
-  const normalizedStatus = (
-    stream.status ||
-    (stream.isPaused ? "PAUSED" : stream.isActive ? "ACTIVE" : "COMPLETED")
-  ).toUpperCase();
-  const displayStatus =
-    stream.status || (stream.isPaused ? "PAUSED" : stream.isActive ? "ACTIVE" : "COMPLETED");
-  const isConnectedSender =
-    Boolean(session?.publicKey) &&
-    session?.publicKey.toLowerCase() === stream.sender.toLowerCase();
-  const isConnectedRecipient =
-    Boolean(session?.publicKey) &&
-    session?.publicKey.toLowerCase() === stream.recipient.toLowerCase();
-  const canCancelStream =
-    isConnectedSender && (normalizedStatus === "ACTIVE" || normalizedStatus === "PAUSED");
-  const hasClaimableAmount = displayedClaimable > 0;
-  const canWithdrawStream = isConnectedRecipient && hasClaimableAmount;
+  const deposited = BigInt(stream.depositedAmount);
+  const withdrawn = BigInt(stream.withdrawnAmount);
+  const ratePerSecond = BigInt(stream.ratePerSecond);
 
   return (
-    <main style={{ minHeight: "100vh", padding: "clamp(1rem, 3vw, 2rem)" }}>
-      <div style={{ maxWidth: 720, margin: "0 auto", display: "grid", gap: "1rem" }}>
-
+    <main className="min-h-screen p-4 md:p-8 bg-gradient-to-br from-zinc-950 via-zinc-900 to-black">
+      <div className="max-w-4xl mx-auto space-y-6">
         {/* Header */}
-        <div>
-          <p className="kicker">Stream #{streamId}</p>
-          <h1 style={{ margin: "0.4rem 0 0", fontSize: "clamp(1.6rem, 3vw, 2.2rem)", lineHeight: 1.1 }}>
-            Stream Details
-          </h1>
+        <div className="flex items-center gap-4">
+          <Link
+            href="/dashboard"
+            className="p-2 rounded-lg hover:bg-white/5 transition-colors"
+          >
+            <ArrowLeft className="h-5 w-5" />
+          </Link>
+          <div>
+            <p className="text-sm text-slate-400">Stream #{stream.streamId}</p>
+            <h1 className="text-2xl font-bold">Stream Details</h1>
+          </div>
+          <div className="ml-auto">
+            <StatusBadge status={stream.status} isPaused={stream.isPaused} />
+          </div>
         </div>
 
-        {/* Identity card */}
-        <div className="dashboard-panel">
-          <div style={{ display: "flex", justifyContent: "space-between", alignItems: "flex-start" }}>
-            <div>
-              <h2 style={{ margin: "0 0 0.4rem", fontSize: "1.15rem" }}>
-                Status: {displayStatus}
-              </h2>
-              <p style={{ margin: "0.2rem 0", color: "var(--text-muted)" }}>
-                Sender:{" "}
-                <code
-                  style={{
-                    background: "rgba(19,38,61,0.07)",
-                    borderRadius: "0.4rem",
-                    padding: "0.15rem 0.45rem",
-                    fontSize: "0.85rem",
-                    fontFamily: "var(--font-mono, monospace)",
-                  }}
-                >
-                  {stream.sender.slice(0, 8)}...{stream.sender.slice(-4)}
-                </code>
-              </p>
-              <p style={{ margin: "0.2rem 0", color: "var(--text-muted)" }}>
-                Recipient:{" "}
-                <code
-                  style={{
-                    background: "rgba(19,38,61,0.07)",
-                    borderRadius: "0.4rem",
-                    padding: "0.15rem 0.45rem",
-                    fontSize: "0.85rem",
-                    fontFamily: "var(--font-mono, monospace)",
-                  }}
-                >
-                  {stream.recipient.slice(0, 8)}...{stream.recipient.slice(-4)}
-                </code>
-              </p>
-              <p style={{ margin: "0.2rem 0", color: "var(--text-muted)" }}>
-                Token: {stream.tokenAddress.slice(0, 8)}...
-              </p>
+        {/* Stream Overview */}
+        <div className="glass-card p-6">
+          <div className="grid grid-cols-1 md:grid-cols-2 gap-6">
+            <div className="space-y-4">
+              <InfoRow label="Sender" value={shortenPublicKey(stream.sender)} />
+              <InfoRow label="Recipient" value={shortenPublicKey(stream.recipient)} />
+              <InfoRow label="Token" value={tokenSymbol} />
             </div>
-            <div style={{ textAlign: "right" }}>
-              <p style={{ margin: "0.2rem 0", fontSize: "0.9rem" }}>
-                Rate: {formatRate(BigInt(stream.ratePerSecond), 7)}
-              </p>
-              <p style={{ margin: "0.2rem 0", fontSize: "0.9rem" }}>
-                Started: {new Date(stream.startTime * 1000).toLocaleDateString()}
-              </p>
+            <div className="space-y-4">
+              <InfoRow
+                label="Rate"
+                value={`${formatAmount(ratePerSecond, 7)} ${tokenSymbol}/sec`}
+              />
+              <InfoRow
+                label="Rate/day"
+                value={`${formatAmount(ratePerSecond * 86400n, 7)} ${tokenSymbol}`}
+              />
+              <InfoRow
+                label="Started"
+                value={new Date(stream.startTime * 1000).toLocaleString()}
+              />
             </div>
           </div>
         </div>
 
-        {/* Paused banner */}
-        {stream.isPaused && (
-          <div className="dashboard-panel" style={{ backgroundColor: "rgba(251, 191, 36, 0.1)", border: "1px solid rgba(251, 191, 36, 0.3)" }}>
-            <div style={{ display: "flex", alignItems: "center", gap: "0.5rem" }}>
-              <span style={{ fontSize: "1.2rem" }}>⏸️</span>
-              <div>
-                <h4 style={{ margin: "0", color: "#f59e0b" }}>Stream Paused</h4>
-                <p style={{ margin: "0.2rem 0 0", fontSize: "0.9rem", color: "var(--text-muted)" }}>
-                  {stream.pausedAt ? `Paused at ${new Date(parseInt(stream.pausedAt) * 1000).toLocaleString()}` : 'Stream is currently paused'}
-                </p>
-              </div>
-            </div>
-          </div>
-        )}
-
-        {/* Progress bar */}
-        <div className="dashboard-panel">
-          <div className="dashboard-panel__header">
-            <h3>Stream Progress</h3>
-          </div>
-          <ProgressBar
-            percentage={percentage}
-            label={`${withdrawn.toFixed(2)} / ${deposited.toFixed(2)} tokens withdrawn`}
+        {/* Financial Overview */}
+        <div className="grid grid-cols-1 md:grid-cols-3 gap-4">
+          <StatCard
+            label="Total Deposited"
+            value={`${formatAmount(deposited, 7)} ${tokenSymbol}`}
+          />
+          <StatCard
+            label="Withdrawn"
+            value={`${formatAmount(withdrawn, 7)} ${tokenSymbol}`}
+          />
+          <StatCard
+            label="Claimable"
+            value={`${formatAmount(liveClaimable, 7)} ${tokenSymbol}`}
+            highlight
+            live
           />
         </div>
 
-        {/* Live counter */}
-        <div className="dashboard-panel">
-          <div className="dashboard-panel__header">
-            <h3>Claimable Balance</h3>
+        {/* Progress */}
+        <div className="glass-card p-6">
+          <h3 className="text-lg font-semibold mb-4">Stream Progress</h3>
+          <div className="h-3 bg-white/10 rounded-full overflow-hidden">
+            <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))}%`,
+              }}
+            />
           </div>
-          <LiveCounter
-            initial={displayedClaimable}
-            label="Available to withdraw"
-            isPaused={stream.isPaused}
-            pausedAt={stream.pausedAt}
-          />
+          <p className="text-sm text-slate-400 mt-2">
+            {formatAmount(withdrawn, 7)} / {formatAmount(deposited, 7)} {tokenSymbol} withdrawn
+          </p>
         </div>
 
         {/* Actions */}
-        <div className="dashboard-panel">
-          <div className="dashboard-panel__header">
-            <h3>Actions</h3>
-          </div>
-          <div style={{ display: "flex", gap: "1rem", flexWrap: "wrap" }}>
-            {canWithdrawStream && (
-              <Button
-                onClick={() => void handleWithdraw()}
-                disabled={withdrawing || withdrawStatus === "submitted"}
-                glow
-              >
-                {withdrawing ? (
-                  <>
-                    <Loader2 className="mr-2 h-4 w-4 animate-spin" />
-                    Withdrawing...
-                  </>
-                ) : (
-                  "Withdraw"
-                )}
-              </Button>
-            )}
-            <Button
-              onClick={() => setShowTopUp(!showTopUp)}
-              disabled={!stream.isActive}
-              variant="outline"
-            >
-              {showTopUp ? "Cancel Top-Up" : "Top Up"}
-            </Button>
-            {canCancelStream && (
-              <Button
-                onClick={() => setShowCancelModal(true)}
-                disabled={cancelling}
-                style={{ borderColor: "#ef4444", color: "#ef4444" }}
-                variant="outline"
-              >
-                Cancel Stream
-              </Button>
-            )}
-            {/* Pause button - show for active streams owned by sender */}
-            {stream.isActive && !stream.isPaused && session?.publicKey === stream.sender && (
-              <Button
-                onClick={handlePause}
-                disabled={pausing}
-                style={{ borderColor: "#f59e0b", color: "#f59e0b" }}
-                variant="outline"
-              >
-                {pausing ? "Pausing..." : "Pause Stream"}
-              </Button>
-            )}
-            {/* Resume button - show for paused streams owned by sender */}
-            {stream.isActive && stream.isPaused && session?.publicKey === stream.sender && (
-              <Button
-                onClick={handleResume}
-                disabled={resuming}
-                glow
-              >
-                {resuming ? "Resuming..." : "Resume Stream"}
-              </Button>
+        {(isSender || isRecipient) && stream.isActive && (
+          <div className="glass-card p-6">
+            <h3 className="text-lg font-semibold mb-4">Actions</h3>
+            <div className="flex flex-wrap gap-3">
+              {/* Recipient: Withdraw */}
+              {isRecipient && (
+                <Button
+                  onClick={handleWithdraw}
+                  disabled={withdrawing || liveClaimable <= 0n}
+                  glow
+                  className="flex items-center gap-2"
+                >
+                  <Download className="h-4 w-4" />
+                  {withdrawing ? "Withdrawing..." : "Withdraw"}
+                </Button>
+              )}
+
+              {/* Sender: Top Up */}
+              {isSender && (
+                <Button
+                  onClick={() => setShowTopUp(!showTopUp)}
+                  variant="outline"
+                  className="flex items-center gap-2"
+                >
+                  <Plus className="h-4 w-4" />
+                  {showTopUp ? "Cancel" : "Top Up"}
+                </Button>
+              )}
+
+              {/* Sender: Pause/Resume */}
+              {isSender && (
+                <>
+                  {!stream.isPaused ? (
+                    <Button
+                      onClick={handlePause}
+                      disabled={pausing}
+                      variant="outline"
+                      className="flex items-center gap-2"
+                    >
+                      <Pause className="h-4 w-4" />
+                      {pausing ? "Pausing..." : "Pause"}
+                    </Button>
+                  ) : (
+                    <Button
+                      onClick={handleResume}
+                      disabled={resuming}
+                      variant="outline"
+                      className="flex items-center gap-2"
+                    >
+                      <Play className="h-4 w-4" />
+                      {resuming ? "Resuming..." : "Resume"}
+                    </Button>
+                  )}
+                </>
+              )}
+
+              {/* Sender: Cancel */}
+              {isSender && (
+                <Button
+                  onClick={() => setShowCancelModal(true)}
+                  disabled={cancelling}
+                  variant="outline"
+                  className="flex items-center gap-2 border-red-500/50 text-red-400 hover:bg-red-500/10"
+                >
+                  <X className="h-4 w-4" />
+                  Cancel
+                </Button>
+              )}
+            </div>
+
+            {/* Top Up Input */}
+            {showTopUp && (
+              <div className="mt-4 flex gap-2">
+                <input
+                  type="number"
+                  placeholder={`Amount in ${tokenSymbol}`}
+                  value={topUpAmount}
+                  onChange={(e) => setTopUpAmount(e.target.value)}
+                  className="flex-1 px-4 py-2 rounded-lg bg-black/40 border border-white/10 focus:border-accent outline-none"
+                />
+                <Button onClick={handleTopUp}>Add Funds</Button>
+              </div>
             )}
-            <Button
-              onClick={() => setShowCancelModal(true)}
-              disabled={cancelling || !stream.isActive}
-              style={{ borderColor: "#ef4444", color: "#ef4444" }}
-              variant="outline"
-            >
-              {cancelling ? "Cancelling..." : "Cancel Stream"}
-            </Button>
           </div>
+        )}
 
-          {showTopUp && (
-            <div style={{ marginTop: "1rem", display: "flex", gap: "0.5rem" }}>
-              <input
-                type="number"
-                placeholder="Amount"
-                value={topUpAmount}
-                onChange={(e) => setTopUpAmount(e.target.value)}
-                style={{
-                  padding: "0.5rem",
-                  borderRadius: "0.25rem",
-                  border: "1px solid var(--glass-border)",
-                  background: "rgba(255,255,255,0.05)",
-                  color: "inherit",
-                }}
-              />
-              <Button onClick={handleTopUp}>Add Funds</Button>
-            </div>
-          )}
+        {/* Event History */}
+        <div className="glass-card p-6">
+          <h3 className="text-lg font-semibold mb-4">Event History</h3>
+
+          {events.length === 0 ? (
+            <p className="text-slate-400 text-center py-8">No events yet</p>
+          ) : (
+            <>
+              <div className="space-y-3">
+                {events.map((event) => (
+                  <EventRow key={event.id} event={event} tokenSymbol={tokenSymbol} />
+                ))}
+              </div>
 
-          {pauseResumeStatus !== "idle" && (
-            <div style={{ marginTop: "1rem" }}>
-              <TransactionTracker
-                status={pauseResumeStatus}
-                txHash={pauseResumeTxHash}
-                error={pauseResumeError}
-                onRetry={
-                  pauseResumeStatus === "failed"
-                    ? stream.isPaused
-                      ? handleResume
-                      : handlePause
-                    : undefined
-                }
-              />
-            </div>
+              {/* Pagination */}
+              {totalPages > 1 && (
+                <div className="flex items-center justify-between mt-6 pt-4 border-t border-white/10">
+                  <button
+                    onClick={() => {
+                      const newPage = eventsPage - 1;
+                      setEventsPage(newPage);
+                      fetchEvents(newPage);
+                    }}
+                    disabled={eventsPage === 1}
+                    className="px-3 py-1 text-sm rounded-lg border border-white/10 disabled:opacity-50 hover:border-accent transition-colors"
+                  >
+                    Previous
+                  </button>
+                  <span className="text-sm text-slate-400">
+                    Page {eventsPage} of {totalPages}
+                  </span>
+                  <button
+                    onClick={() => {
+                      const newPage = eventsPage + 1;
+                      setEventsPage(newPage);
+                      fetchEvents(newPage);
+                    }}
+                    disabled={eventsPage === totalPages}
+                    className="px-3 py-1 text-sm rounded-lg border border-white/10 disabled:opacity-50 hover:border-accent transition-colors"
+                  >
+                    Next
+                  </button>
+                </div>
+              )}
+            </>
           )}
-          {withdrawStatus !== "idle" && (
-            <div style={{ marginTop: "1rem" }}>
-              <TransactionTracker
-                status={withdrawStatus}
-                txHash={withdrawTxHash}
-                error={withdrawError}
-                streamId={streamId}
-                onRetry={() => void handleWithdraw()}
-              />
-            </div>
-          )}
-        </div>
-
-        {/* Transaction history */}
-        <div className="dashboard-panel">
-          <div className="dashboard-panel__header">
-            <h3>Transaction History</h3>
-            <span>Recent activity</span>
-          </div>
-          <div className="mini-empty-state">
-            <p>Transaction history will be populated from backend events.</p>
-          </div>
         </div>
-
       </div>
-      <CancelStreamModal
-        isOpen={showCancelModal}
-        isCancelling={cancelling}
-        streamId={streamId}
-        onClose={() => setShowCancelModal(false)}
-        onConfirm={() => void handleConfirmCancel()}
-      />
+
+      {/* Cancel Confirmation Modal */}
+      {showCancelModal && stream && (
+        <CancelConfirmModal
+          streamId={streamId}
+          recipient={shortenPublicKey(stream.recipient)}
+          token={tokenSymbol}
+          deposited={Number(formatAmount(deposited, 7))}
+          withdrawn={Number(formatAmount(withdrawn, 7))}
+          onConfirm={handleCancel}
+          onClose={() => setShowCancelModal(false)}
+        />
+      )}
     </main>
   );
 }
+
+// Helper Components
+function StatusBadge({ status, isPaused }: { status: string; isPaused?: boolean }) {
+  const getStyles = () => {
+    if (isPaused) return "bg-yellow-500/20 text-yellow-400 border-yellow-500/30";
+    switch (status.toLowerCase()) {
+      case "active":
+        return "bg-green-500/20 text-green-400 border-green-500/30";
+      case "completed":
+        return "bg-blue-500/20 text-blue-400 border-blue-500/30";
+      case "cancelled":
+        return "bg-red-500/20 text-red-400 border-red-500/30";
+      default:
+        return "bg-slate-500/20 text-slate-400 border-slate-500/30";
+    }
+  };
+
+  return (
+    <span className={`px-3 py-1 rounded-full text-sm font-medium border ${getStyles()}`}>
+      {isPaused ? "Paused" : status}
+    </span>
+  );
+}
+
+function InfoRow({ label, value }: { label: string; value: string }) {
+  return (
+    <div className="flex items-center justify-between py-2 border-b border-white/5 last:border-0">
+      <span className="text-slate-400 text-sm">{label}</span>
+      <span className="font-mono text-sm">{value}</span>
+    </div>
+  );
+}
+
+function StatCard({
+  label,
+  value,
+  highlight,
+  live,
+}: {
+  label: string;
+  value: string;
+  highlight?: boolean;
+  live?: boolean;
+}) {
+  return (
+    <div
+      className={`glass-card p-4 ${highlight ? "border-accent/30 bg-accent/5" : ""}`}
+    >
+      <p className="text-slate-400 text-sm mb-1">{label}</p>
+      <p className={`text-lg font-bold ${live ? "text-accent" : ""}`}>
+        {value}
+        {live && <span className="ml-2 text-xs animate-pulse">●</span>}
+      </p>
+    </div>
+  );
+}
+
+function EventRow({
+  event,
+  tokenSymbol,
+}: {
+  event: BackendStreamEvent;
+  tokenSymbol: string;
+}) {
+  const style = EVENT_STYLES[event.eventType] || {
+    color: "#6b7280",
+    icon: "•",
+    label: event.eventType,
+  };
+
+  return (
+    <div className="flex items-center gap-4 py-3 border-b border-white/5 last:border-0">
+      <div
+        className="w-8 h-8 rounded-full flex items-center justify-center text-sm font-bold"
+        style={{ backgroundColor: `${style.color}20`, color: style.color }}
+      >
+        {style.icon}
+      </div>
+      <div className="flex-1">
+        <p className="font-medium">{style.label}</p>
+        <p className="text-sm text-slate-400">
+          {new Date(event.timestamp * 1000).toLocaleString()}
+        </p>
+      </div>
+      {event.amount && (
+        <div className="text-right">
+          <p className="font-mono">
+            {formatAmount(BigInt(event.amount), 7)} {tokenSymbol}
+          </p>
+        </div>
+      )}
+    </div>
+  );
+}
\ No newline at end of file

From 5b69ab19576ece67bb3451a9b26ec6ab8476122d Mon Sep 17 00:00:00 2001
From: Lynndabel <okolo.ebelelynda@gmail.com>
Date: Tue, 28 Apr 2026 18:58:47 +0100
Subject: [PATCH 04/12] Create stream detail page with all actions (

---
 frontend/src/components/stream-creation/TopUpModal.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/frontend/src/components/stream-creation/TopUpModal.tsx b/frontend/src/components/stream-creation/TopUpModal.tsx
index 21a51da..28f7e73 100644
--- a/frontend/src/components/stream-creation/TopUpModal.tsx
+++ b/frontend/src/components/stream-creation/TopUpModal.tsx
@@ -1,7 +1,7 @@
 "use client";
 
 /**
- * TopUpModal.tsx
+ * TopUpModal.tsx 
  *
  * Replaces the prompt() / alert() in dashboard-view.tsx handleTopUp.
  * Collects an amount, shows a confirmation summary, and calls onConfirm.

From 7b42eb6ce19cecea99a44e813309d7396388cb4e Mon Sep 17 00:00:00 2001
From: Lynndabel <okolo.ebelelynda@gmail.com>
Date: Tue, 28 Apr 2026 19:02:45 +0100
Subject: [PATCH 05/12] Add TransactionTracker component with full 7-state
 lifecycle and reusable hook

---
 .../src/components/TransactionTracker.tsx     | 511 +++++++++++++++---
 1 file changed, 427 insertions(+), 84 deletions(-)

diff --git a/frontend/src/components/TransactionTracker.tsx b/frontend/src/components/TransactionTracker.tsx
index 5b54145..89cb279 100644
--- a/frontend/src/components/TransactionTracker.tsx
+++ b/frontend/src/components/TransactionTracker.tsx
@@ -1,8 +1,22 @@
 "use client";
 
-import { useEffect, useState } from "react";
-import { Loader2, CheckCircle, XCircle, ExternalLink, RefreshCw } from "lucide-react";
+import { useEffect, useState, useCallback } from "react";
+import { Loader2, CheckCircle, XCircle, ExternalLink, RefreshCw, Clock, Ban, FileSearch } from "lucide-react";
 import toast from "react-hot-toast";
+import type { BackendStream } from "@/lib/api-types";
+
+/**
+ * TransactionTracker - Shared component for tracking on-chain transaction lifecycle
+ *
+ * States:
+ * - idle: No active transaction
+ * - signing: User is signing in wallet
+ * - submitted: Transaction sent to network, waiting for ledger inclusion
+ * - confirming: Transaction in ledger, polling indexer for confirmation
+ * - confirmed: Indexer confirmed the change
+ * - failed: Transaction failed on-chain or was rejected
+ * - cancelled: User cancelled the action
+ */
 
 export type TransactionStatus =
   | "idle"
@@ -10,46 +24,110 @@ export type TransactionStatus =
   | "submitted"
   | "confirming"
   | "confirmed"
-  | "failed";
+  | "failed"
+  | "cancelled";
+
+export type TransactionAction =
+  | "create"
+  | "withdraw"
+  | "topup"
+  | "cancel"
+  | "pause"
+  | "resume";
 
 interface TransactionTrackerProps {
   status: TransactionStatus;
+  action: TransactionAction;
   txHash?: string;
   error?: string;
+  errorCode?: string;
   onRetry?: () => void;
+  onCancel?: () => void;
   streamId?: string;
-  pollInterval?: number;
+  expectedChanges?: {
+    depositedAmount?: string;
+    withdrawnAmount?: string;
+    isActive?: boolean;
+    isPaused?: boolean;
+  };
 }
 
-const STELLAR_EXPERT_BASE =
+const STELLAR_EXPERT_BASE = process.env.NEXT_PUBLIC_STELLAR_EXPERT_URL ||
   "https://stellar.expert/explorer/testnet/tx";
 
+const API_BASE_URL = process.env.NEXT_PUBLIC_API_URL || "http://localhost:3001/v1";
+
+const POLL_INTERVAL = 3000; // 3 seconds as per requirements
+const MAX_POLL_ATTEMPTS = 20; // Max 1 minute of polling
+
+// Action labels for user-friendly messages
+const ACTION_LABELS: Record<TransactionAction, { present: string; past: string }> = {
+  create: { present: "Creating stream", past: "Stream created" },
+  withdraw: { present: "Withdrawing", past: "Withdrawn" },
+  topup: { present: "Topping up", past: "Topped up" },
+  cancel: { present: "Cancelling stream", past: "Stream cancelled" },
+  pause: { present: "Pausing stream", past: "Stream paused" },
+  resume: { present: "Resuming stream", past: "Stream resumed" },
+};
+
 export default function TransactionTracker({
   status,
+  action,
   txHash,
   error,
+  errorCode,
   onRetry,
+  onCancel,
   streamId,
-  pollInterval = 2000,
+  expectedChanges,
 }: TransactionTrackerProps) {
-  const [confirming, setConfirming] = useState(false);
+  const [pollCount, setPollCount] = useState(0);
+  const [streamData, setStreamData] = useState<BackendStream | null>(null);
+  const [previousStreamData, setPreviousStreamData] = useState<BackendStream | null>(null);
 
+  // Capture initial stream state when entering confirming state
   useEffect(() => {
-    if (status !== "submitted" || !streamId) return;
+    if (status === "confirming" && streamId && !previousStreamData) {
+      fetch(`${API_BASE_URL}/streams/${streamId}`)
+        .then(res => res.ok ? res.json() : null)
+        .then(data => {
+          if (data) setPreviousStreamData(data);
+        })
+        .catch(console.error);
+    }
+  }, [status, streamId, previousStreamData]);
+
+  // Poll for confirmation
+  useEffect(() => {
+    if (status !== "confirming" || !streamId) return;
 
     let cancelled = false;
-    setConfirming(true);
+    let attempts = 0;
 
     async function poll() {
+      if (cancelled || attempts >= MAX_POLL_ATTEMPTS) {
+        if (attempts >= MAX_POLL_ATTEMPTS && !cancelled) {
+          toast.error("Confirmation timeout - please check explorer for status");
+        }
+        return;
+      }
+
+      attempts++;
+      setPollCount(attempts);
+
       try {
-        const res = await fetch(`/v1/streams/${streamId}`);
+        const res = await fetch(`${API_BASE_URL}/streams/${streamId}`);
         if (!res.ok) throw new Error("Failed to fetch stream status");
 
-        const data = await res.json();
-        if (data.confirmed && !cancelled) {
-          toast.success("Transaction confirmed!");
-          setConfirming(false);
-          return;
+        const data: BackendStream = await res.json();
+        setStreamData(data);
+
+        // Check if expected changes are reflected
+        const isConfirmed = checkConfirmation(data, expectedChanges);
+
+        if (isConfirmed && !cancelled) {
+          toast.success(`${ACTION_LABELS[action].past} successfully!`);
+          return; // Stop polling, parent should transition to confirmed
         }
       } catch (err) {
         if (!cancelled) {
@@ -58,95 +136,360 @@ export default function TransactionTracker({
       }
 
       if (!cancelled) {
-        setTimeout(poll, pollInterval);
+        setTimeout(poll, POLL_INTERVAL);
       }
     }
 
     poll();
+
     return () => {
       cancelled = true;
     };
-  }, [status, streamId, pollInterval]);
-
-  if (status === "idle" || status === "signing") {
-    return (
-      <div className="flex items-center gap-2 text-sm text-gray-400">
-        {status === "signing" && (
-          <>
-            <Loader2 className="h-4 w-4 animate-spin" />
-            <span>Signing transaction...</span>
-          </>
-        )}
-      </div>
-    );
-  }
+  }, [status, streamId, action, expectedChanges]);
+
+  // Reset state when returning to idle
+  useEffect(() => {
+    if (status === "idle") {
+      setPollCount(0);
+      setStreamData(null);
+      setPreviousStreamData(null);
+    }
+  }, [status]);
+
+  // Render based on status
+  switch (status) {
+    case "idle":
+      return null;
+
+    case "signing":
+      return (
+        <div className="rounded-xl border border-white/10 bg-white/5 p-4">
+          <div className="flex items-center gap-3">
+            <div className="relative">
+              <Loader2 className="h-5 w-5 animate-spin text-accent" />
+              <div className="absolute inset-0 h-5 w-5 animate-ping rounded-full bg-accent/20" />
+            </div>
+            <div>
+              <p className="font-medium">Sign in Wallet</p>
+              <p className="text-sm text-slate-400">
+                {ACTION_LABELS[action].present} - confirm in your wallet
+              </p>
+            </div>
+          </div>
+          {onCancel && (
+            <button
+              onClick={onCancel}
+              className="mt-3 text-sm text-slate-400 hover:text-white transition"
+            >
+              Cancel
+            </button>
+          )}
+        </div>
+      );
+
+    case "submitted":
+      return (
+        <div className="rounded-xl border border-yellow-500/20 bg-yellow-500/10 p-4 space-y-3">
+          <div className="flex items-center gap-3">
+            <Loader2 className="h-5 w-5 animate-spin text-yellow-400" />
+            <div>
+              <p className="font-medium text-yellow-400">Transaction Submitted</p>
+              <p className="text-sm text-yellow-400/70">
+                Waiting for ledger inclusion...
+              </p>
+            </div>
+          </div>
+
+          {txHash && (
+            <a
+              href={`${STELLAR_EXPERT_BASE}/${txHash}`}
+              target="_blank"
+              rel="noopener noreferrer"
+              className="flex items-center gap-2 text-sm text-blue-400 hover:text-blue-300 transition bg-blue-500/10 px-3 py-2 rounded-lg w-fit"
+            >
+              <FileSearch className="h-4 w-4" />
+              View on Stellar Expert
+              <ExternalLink className="h-3 w-3" />
+            </a>
+          )}
+        </div>
+      );
+
+    case "confirming":
+      return (
+        <div className="rounded-xl border border-blue-500/20 bg-blue-500/10 p-4 space-y-3">
+          <div className="flex items-center gap-3">
+            <div className="relative">
+              <Clock className="h-5 w-5 text-blue-400" />
+              <Loader2 className="h-5 w-5 animate-spin absolute inset-0 text-blue-400" />
+            </div>
+            <div className="flex-1">
+              <p className="font-medium text-blue-400">Confirming on Indexer</p>
+              <p className="text-sm text-blue-400/70">
+                Polling every 3s... (attempt {pollCount}/{MAX_POLL_ATTEMPTS})
+              </p>
+            </div>
+          </div>
+
+          {/* Progress bar */}
+          <div className="h-1 bg-white/10 rounded-full overflow-hidden">
+            <div
+              className="h-full bg-blue-400 transition-all duration-300"
+              style={{ width: `${Math.min(100, (pollCount / MAX_POLL_ATTEMPTS) * 100)}%` }}
+            />
+          </div>
+
+          {txHash && (
+            <a
+              href={`${STELLAR_EXPERT_BASE}/${txHash}`}
+              target="_blank"
+              rel="noopener noreferrer"
+              className="flex items-center gap-2 text-sm text-blue-400 hover:text-blue-300 transition"
+            >
+              <ExternalLink className="h-3 w-3" />
+              Check transaction status
+            </a>
+          )}
+        </div>
+      );
+
+    case "confirmed":
+      return (
+        <div className="rounded-xl border border-green-500/20 bg-green-500/10 p-4 space-y-3">
+          <div className="flex items-center gap-3">
+            <CheckCircle className="h-5 w-5 text-green-400" />
+            <div>
+              <p className="font-medium text-green-400">
+                {ACTION_LABELS[action].past} Successfully
+              </p>
+              <p className="text-sm text-green-400/70">
+                Transaction confirmed on indexer
+              </p>
+            </div>
+          </div>
+
+          {/* Summary of changes */}
+          {streamData && previousStreamData && (
+            <div className="mt-3 p-3 bg-green-500/5 rounded-lg border border-green-500/10">
+              <p className="text-sm font-medium mb-2">Summary of Changes:</p>
+              <div className="space-y-1 text-sm">
+                {renderChanges(previousStreamData, streamData)}
+              </div>
+            </div>
+          )}
+
+          {txHash && (
+            <a
+              href={`${STELLAR_EXPERT_BASE}/${txHash}`}
+              target="_blank"
+              rel="noopener noreferrer"
+              className="flex items-center gap-2 text-sm text-green-400 hover:text-green-300 transition"
+            >
+              <ExternalLink className="h-3 w-3" />
+              View transaction
+            </a>
+          )}
+        </div>
+      );
+
+    case "failed":
+      return (
+        <div className="rounded-xl border border-red-500/20 bg-red-500/10 p-4 space-y-3">
+          <div className="flex items-center gap-3">
+            <XCircle className="h-5 w-5 text-red-400" />
+            <div>
+              <p className="font-medium text-red-400">Transaction Failed</p>
+              <p className="text-sm text-red-400/70">
+                {ACTION_LABELS[action].present} failed
+              </p>
+            </div>
+          </div>
+
+          {/* Error code and message */}
+          <div className="space-y-2">
+            {errorCode && (
+              <div className="flex items-center gap-2 text-sm">
+                <span className="text-slate-400">Error Code:</span>
+                <code className="px-2 py-0.5 bg-red-500/20 text-red-400 rounded">
+                  {errorCode}
+                </code>
+              </div>
+            )}
+            {error && (
+              <p className="text-sm text-red-300 bg-red-500/10 p-3 rounded-lg">
+                {error}
+              </p>
+            )}
+          </div>
+
+          {/* Retry button */}
+          {onRetry && (
+            <button
+              onClick={onRetry}
+              className="flex items-center gap-2 px-4 py-2 rounded-lg bg-red-500/20 text-red-400 hover:bg-red-500/30 transition"
+            >
+              <RefreshCw className="h-4 w-4" />
+              Retry Transaction
+            </button>
+          )}
+        </div>
+      );
 
-  if (status === "submitted") {
-    return (
-      <div className="rounded-xl border border-white/10 bg-white/5 p-4 space-y-3">
-        <div className="flex items-center gap-2 text-yellow-400">
-          <Loader2 className="h-4 w-4 animate-spin" />
-          <span className="font-medium">Transaction Submitted</span>
+    case "cancelled":
+      return (
+        <div className="rounded-xl border border-slate-500/20 bg-slate-500/10 p-4">
+          <div className="flex items-center gap-3">
+            <Ban className="h-5 w-5 text-slate-400" />
+            <div>
+              <p className="font-medium text-slate-400">Action Cancelled</p>
+              <p className="text-sm text-slate-400/70">
+                {ACTION_LABELS[action].present} was cancelled
+              </p>
+            </div>
+          </div>
+          {onRetry && (
+            <button
+              onClick={onRetry}
+              className="mt-3 flex items-center gap-2 text-sm text-slate-400 hover:text-white transition"
+            >
+              <RefreshCw className="h-4 w-4" />
+              Try Again
+            </button>
+          )}
         </div>
+      );
+
+    default:
+      return null;
+  }
+}
+
+// Helper function to check if indexer has reflected the changes
+function checkConfirmation(
+  current: BackendStream,
+  expected?: TransactionTrackerProps["expectedChanges"]
+): boolean {
+  if (!expected) return true;
 
-        {txHash && (
-          <a
-            href={`${STELLAR_EXPERT_BASE}/${txHash}`}
-            target="_blank"
-            rel="noopener noreferrer"
-            className="flex items-center gap-1 text-sm text-blue-400 hover:text-blue-300 transition"
-          >
-            View on Stellar Expert
-            <ExternalLink className="h-3 w-3" />
-          </a>
-        )}
-
-        {confirming && (
-          <p className="text-xs text-gray-400">
-            Waiting for confirmation...
-          </p>
-        )}
+  if (expected.depositedAmount !== undefined) {
+    if (current.depositedAmount !== expected.depositedAmount) return false;
+  }
+  if (expected.withdrawnAmount !== undefined) {
+    if (current.withdrawnAmount !== expected.withdrawnAmount) return false;
+  }
+  if (expected.isActive !== undefined) {
+    if (current.isActive !== expected.isActive) return false;
+  }
+
+  return true;
+}
+
+// Helper function to render changes between stream states
+function renderChanges(prev: BackendStream, current: BackendStream) {
+  const changes: JSX.Element[] = [];
+
+  if (prev.depositedAmount !== current.depositedAmount) {
+    const diff = BigInt(current.depositedAmount) - BigInt(prev.depositedAmount);
+    changes.push(
+      <div key="deposited" className="flex items-center gap-2">
+        <span className="text-green-400">+</span>
+        <span>Deposited: {formatAmount(diff, 7)} tokens added</span>
       </div>
     );
   }
 
-  if (status === "confirmed") {
-    return (
-      <div className="rounded-xl border border-green-500/20 bg-green-500/10 p-4">
-        <div className="flex items-center gap-2 text-green-400">
-          <CheckCircle className="h-5 w-5" />
-          <span className="font-medium">Transaction Confirmed</span>
-        </div>
+  if (prev.withdrawnAmount !== current.withdrawnAmount) {
+    const diff = BigInt(current.withdrawnAmount) - BigInt(prev.withdrawnAmount);
+    changes.push(
+      <div key="withdrawn" className="flex items-center gap-2">
+        <span className="text-blue-400">↓</span>
+        <span>Withdrawn: {formatAmount(diff, 7)} tokens</span>
       </div>
     );
   }
 
-  if (status === "failed") {
-    return (
-      <div className="rounded-xl border border-red-500/20 bg-red-500/10 p-4 space-y-3">
-        <div className="flex items-center gap-2 text-red-400">
-          <XCircle className="h-5 w-5" />
-          <span className="font-medium">Transaction Failed</span>
-        </div>
-
-        {error && (
-          <p className="text-sm text-red-300 bg-red-500/10 p-2 rounded-lg">
-            {error}
-          </p>
-        )}
-
-        {onRetry && (
-          <button
-            onClick={onRetry}
-            className="flex items-center gap-2 text-sm px-4 py-2 rounded-lg bg-red-500/20 text-red-400 hover:bg-red-500/30 transition"
-          >
-            <RefreshCw className="h-4 w-4" />
-            Retry Transaction
-          </button>
-        )}
+  if (prev.isActive !== current.isActive) {
+    changes.push(
+      <div key="status" className="flex items-center gap-2">
+        <span className={current.isActive ? "text-green-400" : "text-red-400"}>
+          {current.isActive ? "●" : "○"}
+        </span>
+        <span>Status: {current.isActive ? "Active" : "Inactive"}</span>
       </div>
     );
   }
 
-  return null;
+  if (changes.length === 0) {
+    return <span className="text-slate-400">No significant changes detected</span>;
+  }
+
+  return changes;
 }
+
+// Helper to format amounts
+function formatAmount(raw: bigint, decimals: number): string {
+  const divisor = BigInt(10 ** decimals);
+  const whole = raw / divisor;
+  const fraction = (raw % divisor).toString().padStart(decimals, "0").replace(/0+$/, "");
+  return fraction ? `${whole}.${fraction}` : whole.toString();
+}
+
+// Hook for using transaction tracker in components
+export function useTransactionTracker() {
+  const [status, setStatus] = useState<TransactionStatus>("idle");
+  const [txHash, setTxHash] = useState<string>();
+  const [error, setError] = useState<string>();
+  const [errorCode, setErrorCode] = useState<string>();
+
+  const reset = useCallback(() => {
+    setStatus("idle");
+    setTxHash(undefined);
+    setError(undefined);
+    setErrorCode(undefined);
+  }, []);
+
+  const start = useCallback(() => {
+    setStatus("signing");
+    setError(undefined);
+    setErrorCode(undefined);
+  }, []);
+
+  const submit = useCallback((hash: string) => {
+    setTxHash(hash);
+    setStatus("submitted");
+  }, []);
+
+  const confirm = useCallback(() => {
+    setStatus("confirming");
+  }, []);
+
+  const succeed = useCallback(() => {
+    setStatus("confirmed");
+  }, []);
+
+  const fail = useCallback((err: string, code?: string) => {
+    setStatus("failed");
+    setError(err);
+    setErrorCode(code);
+  }, []);
+
+  const cancel = useCallback(() => {
+    setStatus("cancelled");
+  }, []);
+
+  return {
+    status,
+    txHash,
+    error,
+    errorCode,
+    reset,
+    start,
+    submit,
+    confirm,
+    succeed,
+    fail,
+    cancel,
+  };
+}
+
+export default TransactionTracker;

From 5b960d26149f022009b69a307073313f370b7ce7 Mon Sep 17 00:00:00 2001
From: Lynndabel <okolo.ebelelynda@gmail.com>
Date: Tue, 28 Apr 2026 19:34:30 +0100
Subject: [PATCH 06/12] Fix test failures: add missing mock for
 prisma.stream.count, fix integration test mock hoisting, correct
 totalStreamedIn expectation

---
 backend/tests/integration/streams.test.ts | 5 -----
 backend/tests/stream.test.ts              | 1 +
 2 files changed, 1 insertion(+), 5 deletions(-)

diff --git a/backend/tests/integration/streams.test.ts b/backend/tests/integration/streams.test.ts
index 50de9d6..f16d80e 100644
--- a/backend/tests/integration/streams.test.ts
+++ b/backend/tests/integration/streams.test.ts
@@ -73,11 +73,6 @@ vi.mock('../../src/lib/redis.js', () => ({
   },
 }));
 
-vi.mock('../../src/lib/prisma.js', () => ({
-  default: mockPrisma,
-  prisma: mockPrisma,
-}));
-
 // ─── App import (after mocks) ─────────────────────────────────────────────────
 
 import app from '../../src/app.js';
diff --git a/backend/tests/stream.test.ts b/backend/tests/stream.test.ts
index 62ae1b8..accdb55 100644
--- a/backend/tests/stream.test.ts
+++ b/backend/tests/stream.test.ts
@@ -132,6 +132,7 @@ describe('GET /v1/streams', () => {
       .set('Accept', 'application/json');
 
     expect(response.status).toBe(200);
+    expect(response.body).toHaveProperty('data');
     expect(Array.isArray(response.body.data)).toBe(true);
   });
 });

From 8382cdc42e3a291897ecb4f31a0c52d4862b075d Mon Sep 17 00:00:00 2001
From: Lynndabel <okolo.ebelelynda@gmail.com>
Date: Tue, 28 Apr 2026 19:47:38 +0100
Subject: [PATCH 07/12] Fix claimable service cache collision bug - include
 lastUpdateTime in fingerprint always

---
 backend/src/services/claimable.service.ts | 14 +++++++++-----
 1 file changed, 9 insertions(+), 5 deletions(-)

diff --git a/backend/src/services/claimable.service.ts b/backend/src/services/claimable.service.ts
index 5551e11..24a41f8 100644
--- a/backend/src/services/claimable.service.ts
+++ b/backend/src/services/claimable.service.ts
@@ -58,11 +58,9 @@ function parseI128(value: string, fieldName: string): bigint {
 }
 
 function getStateFingerprint(stream: ClaimableStreamState): string {
-  if (stream.updatedAt) {
-    return String(stream.updatedAt.getTime());
-  }
-
-  return [
+  // Always include lastUpdateTime to prevent cache collisions between streams
+  // with different lastUpdateTime but same updatedAt (or no updatedAt)
+  const baseFingerprint = [
     stream.ratePerSecond,
     stream.depositedAmount,
     stream.withdrawnAmount,
@@ -73,6 +71,12 @@ function getStateFingerprint(stream: ClaimableStreamState): string {
     stream.pausedAt ?? 'null',
     stream.totalPausedDuration,
   ].join(':');
+
+  if (stream.updatedAt) {
+    return `${baseFingerprint}:${stream.updatedAt.getTime()}`;
+  }
+
+  return baseFingerprint;
 }
 
 /**

From b1ee661ce6dd4ce091644685491d33271cb13aba Mon Sep 17 00:00:00 2001
From: Lynndabel <okolo.ebelelynda@gmail.com>
Date: Sat, 2 May 2026 03:11:34 +0100
Subject: [PATCH 08/12] Fix frontend lint errors: setState in effects, unused
 imports

---
 frontend/src/__tests__/utils.test.ts          |  2 +-
 frontend/src/app/streams/[id]/page.tsx        |  5 +--
 frontend/src/components/ModeToggle.tsx        | 42 +++++++++++--------
 .../src/components/NotificationDropdown.tsx   | 39 ++++-------------
 frontend/src/hooks/useSettings.ts             | 20 +++++----
 5 files changed, 47 insertions(+), 61 deletions(-)

diff --git a/frontend/src/__tests__/utils.test.ts b/frontend/src/__tests__/utils.test.ts
index 470e087..9977ea8 100644
--- a/frontend/src/__tests__/utils.test.ts
+++ b/frontend/src/__tests__/utils.test.ts
@@ -1,5 +1,5 @@
 import { describe, it, expect, beforeEach } from 'vitest';
-import { convertArrayToCSV, downloadCSV } from '../utils/csvExport';
+import { convertArrayToCSV } from '../utils/csvExport';
 import { isValidStellarPublicKey } from '../lib/stellar';
 import {
   formatAmount,
diff --git a/frontend/src/app/streams/[id]/page.tsx b/frontend/src/app/streams/[id]/page.tsx
index 38b34a8..37086c3 100644
--- a/frontend/src/app/streams/[id]/page.tsx
+++ b/frontend/src/app/streams/[id]/page.tsx
@@ -1,7 +1,7 @@
 "use client";
 
 import { useEffect, useState, useCallback, useMemo } from "react";
-import { useParams, useRouter } from "next/navigation";
+import { useParams } from "next/navigation";
 import Link from "next/link";
 import { ArrowLeft, Pause, Play, X, Plus, Download, AlertTriangle } from "lucide-react";
 import { Button } from "@/components/ui/Button";
@@ -16,10 +16,8 @@ import {
   resumeStream,
   toBaseUnits,
   toSorobanErrorMessage,
-  fromBaseUnits,
 } from "@/lib/soroban";
 import { CancelConfirmModal } from "@/components/stream-creation/CancelConfirmModal";
-import type { WalletSession } from "@/lib/wallet";
 import type { BackendStreamEvent } from "@/lib/api-types";
 import { formatAmount } from "@/utils/amount";
 import { shortenPublicKey } from "@/lib/wallet";
@@ -69,7 +67,6 @@ const EVENT_STYLES: Record<string, { color: string; icon: string; label: string
 
 export default function StreamDetailsPage() {
   const params = useParams();
-  const router = useRouter();
   const streamId = params.id as string;
   const { session, isHydrated } = useWallet();
 
diff --git a/frontend/src/components/ModeToggle.tsx b/frontend/src/components/ModeToggle.tsx
index f027515..85a960d 100644
--- a/frontend/src/components/ModeToggle.tsx
+++ b/frontend/src/components/ModeToggle.tsx
@@ -1,35 +1,43 @@
 "use client";
 
 import { Moon, Sun } from "lucide-react";
-import { useEffect, useState } from "react";
+import { useEffect, useState, useRef, useCallback } from "react";
+
+function getInitialTheme(): "light" | "dark" {
+  if (typeof window === "undefined") return "dark";
+  const saved = localStorage.getItem("flowfi-theme") as "light" | "dark" | "system" | null;
+  if (saved === "light" || saved === "dark") {
+    return saved;
+  }
+  if (saved === "system") {
+    return window.matchMedia("(prefers-color-scheme: dark)").matches ? "dark" : "light";
+  }
+  return "dark";
+}
 
 export function ModeToggle() {
-  const [theme, setThemeState] = useState<"light" | "dark">("dark");
-  const [mounted, setMounted] = useState(false);
+  const [theme, setThemeState] = useState<"light" | "dark">(() => getInitialTheme());
+  const mountedRef = useRef(false);
+  const [isMounted, setIsMounted] = useState(false);
 
+  // Use requestAnimationFrame to avoid synchronous setState in effect
   useEffect(() => {
-    setMounted(true);
-    // Read from localStorage directly to sync with settings page
-    const saved = localStorage.getItem("flowfi-theme") as "light" | "dark" | "system" | null;
-    if (saved === "light" || saved === "dark") {
-      setThemeState(saved);
-    } else if (saved === "system") {
-      const prefersDark = window.matchMedia("(prefers-color-scheme: dark)").matches;
-      setThemeState(prefersDark ? "dark" : "light");
-    }
+    const rafId = requestAnimationFrame(() => {
+      mountedRef.current = true;
+      setIsMounted(true);
+    });
+    return () => cancelAnimationFrame(rafId);
   }, []);
 
-  const toggleTheme = () => {
+  const toggleTheme = useCallback(() => {
     const newTheme = theme === "light" ? "dark" : "light";
     setThemeState(newTheme);
-    // Save to localStorage with the same key as settings page
     localStorage.setItem("flowfi-theme", newTheme);
-    // Apply theme immediately
     document.documentElement.classList.toggle("dark", newTheme === "dark");
-  };
+  }, [theme]);
 
   // Prevent hydration mismatch
-  if (!mounted) {
+  if (!isMounted) {
     return (
       <button className="inline-flex items-center justify-center w-8 h-8">
         <span className="sr-only">Toggle theme</span>
diff --git a/frontend/src/components/NotificationDropdown.tsx b/frontend/src/components/NotificationDropdown.tsx
index 166c48f..f9e7d25 100644
--- a/frontend/src/components/NotificationDropdown.tsx
+++ b/frontend/src/components/NotificationDropdown.tsx
@@ -1,5 +1,5 @@
 "use client";
-import React, { useState, useEffect, useCallback, useMemo } from 'react';
+import React, { useState, useEffect, useCallback } from 'react';
 import { useStreamEvents } from '@/hooks/useStreamEvents';
 import { formatAmount } from '@/utils/amount';
 import { Button } from './ui/Button';
@@ -60,37 +60,16 @@ export const NotificationDropdown: React.FC<NotificationDropdownProps> = ({ publ
         if (streamEvents.length === 0) return;
 
         const newNotifications = streamEvents.map(event => ({
-            id: `${event.type}-${event.timestamp}`,
-            streamId: (event.data as { streamId?: number })?.streamId || 0,
-            type: event.type as NotificationItem['type'],
-            message: formatEventMessage(event),
+            id: `sse-${event.type}-${event.timestamp}`,
+            streamId: (event.data as Record<string, unknown>)?.streamId as number || 0,
+            type: event.type,
+            message: formatEventMessage(event as { type: string; data?: Record<string, unknown> }),
             timestamp: event.timestamp,
-            read: false
+            read: isOpen // Mark as read if dropdown is open
         }));
 
-        if (newNotifications.length > 0) {
-            setNotifications(prev => {
-                const combined = [...newNotifications, ...prev];
-                const unique = combined.filter((notif, index, self) => 
-                    index === self.findIndex(n => n.id === notif.id)
-                );
-                return unique.slice(0, 20);
-            });
-        }
-    }, [streamEvents, formatEventMessage]);
-
-    // Handle incoming SSE events
-    useEffect(() => {
-        if (streamEvents.length > 0) {
-            const newNotifications = streamEvents.map(event => ({
-                id: `sse-${event.type}-${event.timestamp}`,
-                streamId: (event.data as Record<string, unknown>)?.streamId as number || 0,
-                type: event.type,
-                message: formatEventMessage(event as { type: string; data?: Record<string, unknown> }),
-                timestamp: event.timestamp,
-                read: isOpen // Mark as read if dropdown is open
-            }));
-
+        // Use queueMicrotask to avoid synchronous setState in effect
+        queueMicrotask(() => {
             setNotifications(prev => {
                 const combined = [...newNotifications, ...prev];
                 const unique = combined.filter((notif, index, self) =>
@@ -102,7 +81,7 @@ export const NotificationDropdown: React.FC<NotificationDropdownProps> = ({ publ
             if (!isOpen) {
                 setUnreadCount(prev => prev + newNotifications.length);
             }
-        }
+        });
     }, [streamEvents, isOpen, formatEventMessage]);
 
     const handleDropdownOpen = useCallback(() => {
diff --git a/frontend/src/hooks/useSettings.ts b/frontend/src/hooks/useSettings.ts
index c14dab6..822301d 100644
--- a/frontend/src/hooks/useSettings.ts
+++ b/frontend/src/hooks/useSettings.ts
@@ -44,16 +44,18 @@ export function useSettings() {
     ) as AmountFormat | null;
     const savedDecimals = localStorage.getItem(STORAGE_KEYS.decimalPlaces);
 
-    setSettings({
-      theme: savedTheme || DEFAULT_SETTINGS.theme,
-      displayCurrency: savedCurrency || DEFAULT_SETTINGS.displayCurrency,
-      amountFormat: savedFormat || DEFAULT_SETTINGS.amountFormat,
-      decimalPlaces: savedDecimals
-        ? (parseInt(savedDecimals, 10) as DecimalPlaces)
-        : DEFAULT_SETTINGS.decimalPlaces,
+    // Use queueMicrotask to avoid synchronous setState in effect
+    queueMicrotask(() => {
+      setSettings({
+        theme: savedTheme || DEFAULT_SETTINGS.theme,
+        displayCurrency: savedCurrency || DEFAULT_SETTINGS.displayCurrency,
+        amountFormat: savedFormat || DEFAULT_SETTINGS.amountFormat,
+        decimalPlaces: savedDecimals
+          ? (parseInt(savedDecimals, 10) as DecimalPlaces)
+          : DEFAULT_SETTINGS.decimalPlaces,
+      });
+      setIsHydrated(true);
     });
-
-    setIsHydrated(true);
   }, []);
 
   const setTheme = useCallback((theme: Theme) => {

From 5cd0e0531726b16b90a5486e89ddbff38eb29b0c Mon Sep 17 00:00:00 2001
From: Lynndabel <okolo.ebelelynda@gmail.com>
Date: Sat, 2 May 2026 03:13:02 +0100
Subject: [PATCH 09/12] Fix backend integration tests: add missing prisma mock

---
 backend/tests/integration/streams.test.ts | 4 ++++
 1 file changed, 4 insertions(+)

diff --git a/backend/tests/integration/streams.test.ts b/backend/tests/integration/streams.test.ts
index f16d80e..8767f88 100644
--- a/backend/tests/integration/streams.test.ts
+++ b/backend/tests/integration/streams.test.ts
@@ -73,6 +73,10 @@ vi.mock('../../src/lib/redis.js', () => ({
   },
 }));
 
+vi.mock('../../src/lib/prisma.js', () => ({
+  prisma: mockPrisma,
+}));
+
 // ─── App import (after mocks) ─────────────────────────────────────────────────
 
 import app from '../../src/app.js';

From 65b5ad8432f8d748752546a0161d79cae7583a1d Mon Sep 17 00:00:00 2001
From: Lynndabel <okolo.ebelelynda@gmail.com>
Date: Sat, 2 May 2026 03:18:38 +0100
Subject: [PATCH 10/12] Fix frontend test: validateAmountInput error message
 for negative amounts

---
 frontend/src/__tests__/utils.test.ts | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/frontend/src/__tests__/utils.test.ts b/frontend/src/__tests__/utils.test.ts
index 9977ea8..b3f5923 100644
--- a/frontend/src/__tests__/utils.test.ts
+++ b/frontend/src/__tests__/utils.test.ts
@@ -154,7 +154,7 @@ describe('validateAmountInput', () => {
 
   it('returns error for zero or negative amounts', () => {
     expect(validateAmountInput('0', 7)).toBe('Amount must be greater than 0');
-    expect(validateAmountInput('-1', 7)).toBe('Amount must be greater than 0');
+    expect(validateAmountInput('-1', 7)).toBe('Please enter a valid number');
   });
 });
 

From f22d57bf8af6d81084ffcb72e3fbcf2a4dc6a3bf Mon Sep 17 00:00:00 2001
From: Lynndabel <okolo.ebelelynda@gmail.com>
Date: Sat, 2 May 2026 03:21:29 +0100
Subject: [PATCH 11/12] Fix build error: remove duplicate default export in
 TransactionTracker

---
 frontend/src/components/TransactionTracker.tsx | 2 --
 1 file changed, 2 deletions(-)

diff --git a/frontend/src/components/TransactionTracker.tsx b/frontend/src/components/TransactionTracker.tsx
index 89cb279..b96e2c5 100644
--- a/frontend/src/components/TransactionTracker.tsx
+++ b/frontend/src/components/TransactionTracker.tsx
@@ -491,5 +491,3 @@ export function useTransactionTracker() {
     cancel,
   };
 }
-
-export default TransactionTracker;

From 90f565f1a4201f7119bd98fc7b107b2badb4cfcc Mon Sep 17 00:00:00 2001
From: Lynndabel <okolo.ebelelynda@gmail.com>
Date: Sat, 2 May 2026 03:44:23 +0100
Subject: [PATCH 12/12] fix: ci fix

---
 frontend/src/app/incoming/page.tsx            |  1 +
 frontend/src/app/settings/page.tsx            |  4 +-
 .../src/components/TransactionTracker.tsx     |  4 +-
 .../components/dashboard/ActivityHistory.tsx  |  1 +
 package-lock.json                             | 86 +++++++++++--------
 5 files changed, 58 insertions(+), 38 deletions(-)

diff --git a/frontend/src/app/incoming/page.tsx b/frontend/src/app/incoming/page.tsx
index ae71d53..c1adf1d 100644
--- a/frontend/src/app/incoming/page.tsx
+++ b/frontend/src/app/incoming/page.tsx
@@ -189,6 +189,7 @@ export default function IncomingPage() {
           <section className="mt-8 rounded-[2rem] border border-slate-900/8 bg-slate-950 px-6 py-5 text-white shadow-[0_22px_45px_rgba(15,23,42,0.18)]">
             <TransactionTracker
               status={tracker.status}
+              action="withdraw"
               txHash={tracker.txHash}
               error={tracker.error}
               streamId={tracker.streamId}
diff --git a/frontend/src/app/settings/page.tsx b/frontend/src/app/settings/page.tsx
index e6f3b95..c328f8f 100644
--- a/frontend/src/app/settings/page.tsx
+++ b/frontend/src/app/settings/page.tsx
@@ -1,8 +1,8 @@
 "use client";
 
-import { useState } from "react";
+import { useState, useEffect } from "react";
 import { Copy, Check, LogOut, Moon, Sun, Bell, Globe } from "lucide-react";
-import { STELLAR_NETWORK } from "@/lib/wallet";
+import { STELLAR_NETWORK, shortenPublicKey } from "@/lib/wallet";
 import { useWallet } from "@/context/wallet-context";
 import { useRouter } from "next/navigation";
 import Link from "next/link";
diff --git a/frontend/src/components/TransactionTracker.tsx b/frontend/src/components/TransactionTracker.tsx
index b96e2c5..370157f 100644
--- a/frontend/src/components/TransactionTracker.tsx
+++ b/frontend/src/components/TransactionTracker.tsx
@@ -1,6 +1,6 @@
 "use client";
 
-import { useEffect, useState, useCallback } from "react";
+import React, { useEffect, useState, useCallback } from "react";
 import { Loader2, CheckCircle, XCircle, ExternalLink, RefreshCw, Clock, Ban, FileSearch } from "lucide-react";
 import toast from "react-hot-toast";
 import type { BackendStream } from "@/lib/api-types";
@@ -386,7 +386,7 @@ function checkConfirmation(
 
 // Helper function to render changes between stream states
 function renderChanges(prev: BackendStream, current: BackendStream) {
-  const changes: JSX.Element[] = [];
+  const changes: React.JSX.Element[] = [];
 
   if (prev.depositedAmount !== current.depositedAmount) {
     const diff = BigInt(current.depositedAmount) - BigInt(prev.depositedAmount);
diff --git a/frontend/src/components/dashboard/ActivityHistory.tsx b/frontend/src/components/dashboard/ActivityHistory.tsx
index d610a8e..a7d887a 100644
--- a/frontend/src/components/dashboard/ActivityHistory.tsx
+++ b/frontend/src/components/dashboard/ActivityHistory.tsx
@@ -147,6 +147,7 @@ export const ActivityHistory: React.FC<ActivityHistoryProps> = ({
                 <div className="mt-4 pt-4 border-t border-white/5 flex items-center justify-between">
                   <TransactionTracker
                     status="confirmed"
+                    action="withdraw"
                     txHash={event.transactionHash}
                     streamId={event.streamId.toString()}
                   />
diff --git a/package-lock.json b/package-lock.json
index dbaf644..3b228a7 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -87,7 +87,6 @@
       "version": "25.3.0",
       "dev": true,
       "license": "MIT",
-      "peer": true,
       "dependencies": {
         "undici-types": "~7.18.0"
       }
@@ -291,7 +290,6 @@
       "integrity": "sha512-o5a9xKjbtuhY6Bi5S3+HvbRERmouabWbyUcpXXUA1u+GNUKoROi9byOJ8M0nHbHYHkYICiMlqxkg1KkYmm25Sw==",
       "dev": true,
       "license": "MIT",
-      "peer": true,
       "dependencies": {
         "esbuild": "^0.21.3",
         "postcss": "^8.4.43",
@@ -726,7 +724,6 @@
       "integrity": "sha512-o5a9xKjbtuhY6Bi5S3+HvbRERmouabWbyUcpXXUA1u+GNUKoROi9byOJ8M0nHbHYHkYICiMlqxkg1KkYmm25Sw==",
       "dev": true,
       "license": "MIT",
-      "peer": true,
       "dependencies": {
         "esbuild": "^0.21.3",
         "postcss": "^8.4.43",
@@ -915,7 +912,6 @@
       "version": "7.29.0",
       "dev": true,
       "license": "MIT",
-      "peer": true,
       "dependencies": {
         "@babel/code-frame": "^7.29.0",
         "@babel/generator": "^7.29.0",
@@ -1295,7 +1291,6 @@
         }
       ],
       "license": "MIT",
-      "peer": true,
       "engines": {
         "node": ">=20.19.0"
       },
@@ -1344,7 +1339,6 @@
         }
       ],
       "license": "MIT",
-      "peer": true,
       "engines": {
         "node": ">=20.19.0"
       }
@@ -1361,8 +1355,7 @@
     "node_modules/@electric-sql/pglite": {
       "version": "0.3.15",
       "dev": true,
-      "license": "Apache-2.0",
-      "peer": true
+      "license": "Apache-2.0"
     },
     "node_modules/@electric-sql/pglite-socket": {
       "version": "0.0.20",
@@ -3225,6 +3218,7 @@
       "integrity": "sha512-b0P0sZPKtyu8HkeRAfCq0IfURZK+SuwMjY1UXGBU27wpAiTwQAIlq56IbIO+ytk/JjS1fMR14ee5WBBfKi5J6A==",
       "dev": true,
       "license": "Apache-2.0",
+      "peer": true,
       "dependencies": {
         "dequal": "^2.0.3"
       }
@@ -3323,7 +3317,8 @@
       "resolved": "https://registry.npmjs.org/@types/aria-query/-/aria-query-5.0.4.tgz",
       "integrity": "sha512-rfT93uj5s0PRL7EzccGMs3brplhcrghnDoV26NqKhCAS1hVo+WdNsPvE/yb6ilfr5hi2MEk6d5EWJTKdxg8jVw==",
       "dev": true,
-      "license": "MIT"
+      "license": "MIT",
+      "peer": true
     },
     "node_modules/@types/babel__core": {
       "version": "7.20.5",
@@ -3456,7 +3451,6 @@
       "version": "20.19.33",
       "dev": true,
       "license": "MIT",
-      "peer": true,
       "dependencies": {
         "undici-types": "~6.21.0"
       }
@@ -3490,7 +3484,6 @@
       "version": "19.2.14",
       "dev": true,
       "license": "MIT",
-      "peer": true,
       "dependencies": {
         "csstype": "^3.2.2"
       }
@@ -3499,7 +3492,6 @@
       "version": "19.2.3",
       "dev": true,
       "license": "MIT",
-      "peer": true,
       "peerDependencies": {
         "@types/react": "^19.2.0"
       }
@@ -3615,7 +3607,6 @@
       "version": "8.56.1",
       "dev": true,
       "license": "MIT",
-      "peer": true,
       "dependencies": {
         "@typescript-eslint/scope-manager": "8.56.1",
         "@typescript-eslint/types": "8.56.1",
@@ -3888,7 +3879,6 @@
       "version": "8.16.0",
       "dev": true,
       "license": "MIT",
-      "peer": true,
       "bin": {
         "acorn": "bin/acorn"
       },
@@ -4400,7 +4390,6 @@
         }
       ],
       "license": "MIT",
-      "peer": true,
       "dependencies": {
         "baseline-browser-mapping": "^2.9.0",
         "caniuse-lite": "^1.0.30001759",
@@ -4943,8 +4932,7 @@
     },
     "node_modules/csstype": {
       "version": "3.2.3",
-      "license": "MIT",
-      "peer": true
+      "license": "MIT"
     },
     "node_modules/damerau-levenshtein": {
       "version": "1.0.8",
@@ -5131,6 +5119,7 @@
       "integrity": "sha512-0je+qPKHEMohvfRTCEo3CrPG6cAzAYgmzKyxRiYSSDkS6eGJdyVJm7WaYA5ECaAD9wLB2T4EEeymA5aFVcYXCA==",
       "dev": true,
       "license": "MIT",
+      "peer": true,
       "engines": {
         "node": ">=6"
       }
@@ -5181,7 +5170,8 @@
       "resolved": "https://registry.npmjs.org/dom-accessibility-api/-/dom-accessibility-api-0.5.16.tgz",
       "integrity": "sha512-X7BJ2yElsnOJ30pZF4uIIDfBEVgF4XEBxL9Bxhy6dnrm5hkzqmsWHGTiHqRiITNhMyFLyAiWndIJP7Z1NTteDg==",
       "dev": true,
-      "license": "MIT"
+      "license": "MIT",
+      "peer": true
     },
     "node_modules/dotenv": {
       "version": "17.4.2",
@@ -5888,7 +5878,6 @@
       "version": "9.39.3",
       "dev": true,
       "license": "MIT",
-      "peer": true,
       "dependencies": {
         "@eslint-community/eslint-utils": "^4.8.0",
         "@eslint-community/regexpp": "^4.12.1",
@@ -6058,7 +6047,6 @@
       "version": "2.32.0",
       "dev": true,
       "license": "MIT",
-      "peer": true,
       "dependencies": {
         "@rtsao/scc": "^1.1.0",
         "array-includes": "^3.1.9",
@@ -6311,7 +6299,6 @@
     "node_modules/express": {
       "version": "5.2.1",
       "license": "MIT",
-      "peer": true,
       "dependencies": {
         "accepts": "^2.0.0",
         "body-parser": "^2.2.1",
@@ -6904,7 +6891,6 @@
       "integrity": "sha512-GZZ9mKe8r646NUAf/zemnGbjYh4Bt8/MqASJY+pSm5ZDtc3YQox+4gsLI7yi1hba6o+eCsGxpHn5+iEVn31/FQ==",
       "dev": true,
       "license": "MIT",
-      "peer": true,
       "dependencies": {
         "@types/node": ">=20.0.0",
         "@types/whatwg-mimetype": "^3.0.2",
@@ -7033,7 +7019,6 @@
       "version": "4.11.4",
       "dev": true,
       "license": "MIT",
-      "peer": true,
       "engines": {
         "node": ">=16.9.0"
       }
@@ -7731,7 +7716,6 @@
       "integrity": "sha512-SNSQteBL1IlV2zqhwwolaG9CwhIhTvVHWg3kTss/cLE7H/X4644mtPQqYvCfsSrGQWt9hSZcgOXX8bOZaMN+kA==",
       "dev": true,
       "license": "MIT",
-      "peer": true,
       "dependencies": {
         "@asamuzakjp/dom-selector": "^6.7.2",
         "cssstyle": "^5.3.1",
@@ -7898,6 +7882,7 @@
       "os": [
         "android"
       ],
+      "peer": true,
       "engines": {
         "node": ">= 12.0.0"
       },
@@ -7959,6 +7944,7 @@
       "os": [
         "freebsd"
       ],
+      "peer": true,
       "engines": {
         "node": ">= 12.0.0"
       },
@@ -7980,6 +7966,7 @@
       "os": [
         "linux"
       ],
+      "peer": true,
       "engines": {
         "node": ">= 12.0.0"
       },
@@ -8001,6 +7988,7 @@
       "os": [
         "linux"
       ],
+      "peer": true,
       "engines": {
         "node": ">= 12.0.0"
       },
@@ -8022,6 +8010,7 @@
       "os": [
         "linux"
       ],
+      "peer": true,
       "engines": {
         "node": ">= 12.0.0"
       },
@@ -8063,6 +8052,7 @@
       "os": [
         "linux"
       ],
+      "peer": true,
       "engines": {
         "node": ">= 12.0.0"
       },
@@ -8084,6 +8074,7 @@
       "os": [
         "win32"
       ],
+      "peer": true,
       "engines": {
         "node": ">= 12.0.0"
       },
@@ -8105,6 +8096,7 @@
       "os": [
         "win32"
       ],
+      "peer": true,
       "engines": {
         "node": ">= 12.0.0"
       },
@@ -8126,6 +8118,7 @@
       "os": [
         "darwin"
       ],
+      "peer": true,
       "engines": {
         "node": ">= 12.0.0"
       },
@@ -8320,6 +8313,7 @@
       "integrity": "sha512-h5bgJWpxJNswbU7qCrV0tIKQCaS3blPDrqKWx+QxzuzL1zGUzij9XCWLrSLsJPu5t+eWA/ycetzYAO5IOMcWAQ==",
       "dev": true,
       "license": "MIT",
+      "peer": true,
       "bin": {
         "lz-string": "bin/bin.js"
       }
@@ -9085,7 +9079,6 @@
     "node_modules/pg": {
       "version": "8.18.0",
       "license": "MIT",
-      "peer": true,
       "dependencies": {
         "pg-connection-string": "^2.11.0",
         "pg-pool": "^3.11.0",
@@ -9290,6 +9283,7 @@
       "integrity": "sha512-Qb1gy5OrP5+zDf2Bvnzdl3jsTf1qXVMazbvCoKhtKqVs4/YK4ozX4gKQJJVyNe+cajNPn0KoC0MC3FUmaHWEmQ==",
       "dev": true,
       "license": "MIT",
+      "peer": true,
       "dependencies": {
         "ansi-regex": "^5.0.1",
         "ansi-styles": "^5.0.0",
@@ -9305,6 +9299,7 @@
       "integrity": "sha512-quJQXlTSUGL2LH9SUXo8VwsY4soanhgo6LNSm84E1LBcE8s3O0wpdiRzyR9z/ZZJMlMWv37qOOb9pdJlMUEKFQ==",
       "dev": true,
       "license": "MIT",
+      "peer": true,
       "engines": {
         "node": ">=8"
       }
@@ -9315,6 +9310,7 @@
       "integrity": "sha512-Cxwpt2SfTzTtXcfOlzGEee8O+c+MmUgGrNiBcXnuWxuFJHe6a5Hz7qwhwe5OgaSYI0IJvkLqWX1ASG+cJOkEiA==",
       "dev": true,
       "license": "MIT",
+      "peer": true,
       "engines": {
         "node": ">=10"
       },
@@ -9327,14 +9323,14 @@
       "resolved": "https://registry.npmjs.org/react-is/-/react-is-17.0.2.tgz",
       "integrity": "sha512-w2GsyukL62IJnlaff/nRegPQR94C/XXamvMWmSHRJ4y7Ts/4ocGRmTHvOs8PSE6pB3dWOrD/nueuU5sduBsQ4w==",
       "dev": true,
-      "license": "MIT"
+      "license": "MIT",
+      "peer": true
     },
     "node_modules/prisma": {
       "version": "7.4.1",
       "dev": true,
       "hasInstallScript": true,
       "license": "Apache-2.0",
-      "peer": true,
       "dependencies": {
         "@prisma/config": "7.4.1",
         "@prisma/dev": "0.20.0",
@@ -9501,7 +9497,6 @@
     "node_modules/react": {
       "version": "19.2.4",
       "license": "MIT",
-      "peer": true,
       "engines": {
         "node": ">=0.10.0"
       }
@@ -9509,7 +9504,6 @@
     "node_modules/react-dom": {
       "version": "19.2.4",
       "license": "MIT",
-      "peer": true,
       "dependencies": {
         "scheduler": "^0.27.0"
       },
@@ -10778,7 +10772,6 @@
       "version": "4.0.3",
       "dev": true,
       "license": "MIT",
-      "peer": true,
       "engines": {
         "node": ">=12"
       },
@@ -10984,7 +10977,6 @@
       "version": "4.21.0",
       "dev": true,
       "license": "MIT",
-      "peer": true,
       "dependencies": {
         "esbuild": "~0.27.0",
         "get-tsconfig": "^4.7.5"
@@ -11099,7 +11091,6 @@
       "version": "5.9.3",
       "dev": true,
       "license": "Apache-2.0",
-      "peer": true,
       "bin": {
         "tsc": "bin/tsc",
         "tsserver": "bin/tsserver"
@@ -11280,6 +11271,7 @@
       "integrity": "sha512-2N/55r4JDJ4gdrCvGgINMy+HH3iRpNIz8K6SFwVsA+JbQScLiC+clmAxBgwiSPgcG9U15QmvqCGWzMbqda5zGQ==",
       "dev": true,
       "license": "MIT",
+      "peer": true,
       "dependencies": {
         "esbuild": "^0.25.0",
         "fdir": "^6.4.4",
@@ -11508,6 +11500,7 @@
       "os": [
         "aix"
       ],
+      "peer": true,
       "engines": {
         "node": ">=18"
       }
@@ -11525,6 +11518,7 @@
       "os": [
         "android"
       ],
+      "peer": true,
       "engines": {
         "node": ">=18"
       }
@@ -11542,6 +11536,7 @@
       "os": [
         "android"
       ],
+      "peer": true,
       "engines": {
         "node": ">=18"
       }
@@ -11559,6 +11554,7 @@
       "os": [
         "android"
       ],
+      "peer": true,
       "engines": {
         "node": ">=18"
       }
@@ -11576,6 +11572,7 @@
       "os": [
         "darwin"
       ],
+      "peer": true,
       "engines": {
         "node": ">=18"
       }
@@ -11593,6 +11590,7 @@
       "os": [
         "darwin"
       ],
+      "peer": true,
       "engines": {
         "node": ">=18"
       }
@@ -11610,6 +11608,7 @@
       "os": [
         "freebsd"
       ],
+      "peer": true,
       "engines": {
         "node": ">=18"
       }
@@ -11627,6 +11626,7 @@
       "os": [
         "freebsd"
       ],
+      "peer": true,
       "engines": {
         "node": ">=18"
       }
@@ -11644,6 +11644,7 @@
       "os": [
         "linux"
       ],
+      "peer": true,
       "engines": {
         "node": ">=18"
       }
@@ -11661,6 +11662,7 @@
       "os": [
         "linux"
       ],
+      "peer": true,
       "engines": {
         "node": ">=18"
       }
@@ -11678,6 +11680,7 @@
       "os": [
         "linux"
       ],
+      "peer": true,
       "engines": {
         "node": ">=18"
       }
@@ -11695,6 +11698,7 @@
       "os": [
         "linux"
       ],
+      "peer": true,
       "engines": {
         "node": ">=18"
       }
@@ -11712,6 +11716,7 @@
       "os": [
         "linux"
       ],
+      "peer": true,
       "engines": {
         "node": ">=18"
       }
@@ -11729,6 +11734,7 @@
       "os": [
         "linux"
       ],
+      "peer": true,
       "engines": {
         "node": ">=18"
       }
@@ -11746,6 +11752,7 @@
       "os": [
         "linux"
       ],
+      "peer": true,
       "engines": {
         "node": ">=18"
       }
@@ -11763,6 +11770,7 @@
       "os": [
         "linux"
       ],
+      "peer": true,
       "engines": {
         "node": ">=18"
       }
@@ -11780,6 +11788,7 @@
       "os": [
         "linux"
       ],
+      "peer": true,
       "engines": {
         "node": ">=18"
       }
@@ -11797,6 +11806,7 @@
       "os": [
         "netbsd"
       ],
+      "peer": true,
       "engines": {
         "node": ">=18"
       }
@@ -11814,6 +11824,7 @@
       "os": [
         "netbsd"
       ],
+      "peer": true,
       "engines": {
         "node": ">=18"
       }
@@ -11831,6 +11842,7 @@
       "os": [
         "openbsd"
       ],
+      "peer": true,
       "engines": {
         "node": ">=18"
       }
@@ -11848,6 +11860,7 @@
       "os": [
         "openbsd"
       ],
+      "peer": true,
       "engines": {
         "node": ">=18"
       }
@@ -11865,6 +11878,7 @@
       "os": [
         "openharmony"
       ],
+      "peer": true,
       "engines": {
         "node": ">=18"
       }
@@ -11882,6 +11896,7 @@
       "os": [
         "sunos"
       ],
+      "peer": true,
       "engines": {
         "node": ">=18"
       }
@@ -11899,6 +11914,7 @@
       "os": [
         "win32"
       ],
+      "peer": true,
       "engines": {
         "node": ">=18"
       }
@@ -11916,6 +11932,7 @@
       "os": [
         "win32"
       ],
+      "peer": true,
       "engines": {
         "node": ">=18"
       }
@@ -11933,6 +11950,7 @@
       "os": [
         "win32"
       ],
+      "peer": true,
       "engines": {
         "node": ">=18"
       }
@@ -11944,6 +11962,7 @@
       "dev": true,
       "hasInstallScript": true,
       "license": "MIT",
+      "peer": true,
       "bin": {
         "esbuild": "bin/esbuild"
       },
@@ -11985,6 +12004,7 @@
       "integrity": "sha512-tIbYtZbucOs0BRGqPJkshJUYdL+SDH7dVM8gjy+ERp3WAUjLEFJE+02kanyHtwjWOnwrKYBiwAmM0p4kLJAnXg==",
       "dev": true,
       "license": "MIT",
+      "peer": true,
       "engines": {
         "node": ">=12.0.0"
       },
@@ -12341,7 +12361,6 @@
       "version": "2.8.2",
       "dev": true,
       "license": "ISC",
-      "peer": true,
       "bin": {
         "yaml": "bin.mjs"
       },
@@ -12409,7 +12428,6 @@
     "node_modules/zod": {
       "version": "4.3.6",
       "license": "MIT",
-      "peer": true,
       "funding": {
         "url": "https://github.com/sponsors/colinhacks"
       }