From c08f2aa0ff16efb43d9129290984784803841750 Mon Sep 17 00:00:00 2001
From: Henrichy <henrynzekwe25@gmail.com>
Date: Mon, 29 Jun 2026 18:56:36 +0100
Subject: [PATCH 1/4] fix: improve StreamDetailsModal accessibility by using
 useModalDialog

---
 .../dashboard/StreamDetailsModal.tsx          | 22 +++++++++----------
 1 file changed, 11 insertions(+), 11 deletions(-)

diff --git a/frontend/src/components/dashboard/StreamDetailsModal.tsx b/frontend/src/components/dashboard/StreamDetailsModal.tsx
index e960fc21..999891c2 100644
--- a/frontend/src/components/dashboard/StreamDetailsModal.tsx
+++ b/frontend/src/components/dashboard/StreamDetailsModal.tsx
@@ -1,7 +1,8 @@
 "use client";
 
-import React, { useEffect } from "react";
+import React from "react";
 import { Button } from "@/components/ui/Button";
+import { useModalDialog } from "@/hooks/useModalDialog";
 import type { Stream } from "@/lib/dashboard";
 
 interface StreamDetailsModalProps {
@@ -17,14 +18,7 @@ export const StreamDetailsModal: React.FC<StreamDetailsModalProps> = ({
     onCancelClick,
     onTopUpClick,
 }) => {
-    // Escape key support
-    useEffect(() => {
-        const handleEscape = (e: KeyboardEvent) => {
-            if (e.key === "Escape") onClose();
-        };
-        window.addEventListener("keydown", handleEscape);
-        return () => window.removeEventListener("keydown", handleEscape);
-    }, [onClose]);
+    const dialogRef = useModalDialog({ onClose });
 
     const progress = stream.deposited > 0 ? Math.min(100, Math.max(0, (stream.withdrawn / stream.deposited) * 100)) : 0;
     const remaining = stream.deposited - stream.withdrawn;
@@ -32,15 +26,21 @@ export const StreamDetailsModal: React.FC<StreamDetailsModalProps> = ({
     return (
         <div
             className="fixed inset-0 z-50 flex items-center justify-center bg-black/60 backdrop-blur-md"
+            role="dialog"
+            aria-modal="true"
+            aria-labelledby="stream-details-modal-title"
             onClick={(e) => {
                 if (e.target === e.currentTarget) onClose();
             }}
         >
-            <div className="glass-card relative w-full max-w-2xl mx-4 rounded-3xl border border-glass-border p-8 shadow-2xl animate-in fade-in zoom-in-95">
+            <div
+                ref={dialogRef}
+                className="glass-card relative w-full max-w-2xl mx-4 rounded-3xl border border-glass-border p-8 shadow-2xl animate-in fade-in zoom-in-95"
+            >
                 {/* Header */}
                 <div className="flex items-center justify-between mb-8">
                     <div>
-                        <h2 className="text-2xl font-black tracking-tight">Stream Details</h2>
+                        <h2 id="stream-details-modal-title" className="text-2xl font-black tracking-tight">Stream Details</h2>
                         <p className="text-sm text-slate-400 font-mono">ID: {stream.id}</p>
                     </div>
                     <button

From 5692bfc89b201ccdf549cb71bef3e9b0f0773e0a Mon Sep 17 00:00:00 2001
From: Henrichy <henrynzekwe25@gmail.com>
Date: Mon, 29 Jun 2026 19:14:43 +0100
Subject: [PATCH 2/4] fix: resolve TypeScript errors in useIncomingStreams and
 tsconfig

---
 frontend/src/hooks/useIncomingStreams.ts | 18 ++++++++++++++----
 frontend/tsconfig.json                   |  2 +-
 2 files changed, 15 insertions(+), 5 deletions(-)

diff --git a/frontend/src/hooks/useIncomingStreams.ts b/frontend/src/hooks/useIncomingStreams.ts
index dd10e078..fa0b61b6 100644
--- a/frontend/src/hooks/useIncomingStreams.ts
+++ b/frontend/src/hooks/useIncomingStreams.ts
@@ -48,7 +48,9 @@ export function useWithdrawIncomingStream(
       });
     },
     onMutate: async (stream) => {
-      if (!publicKey) return;
+      if (!publicKey) {
+        return {};
+      }
 
       // Cancel any outgoing refetches (so they don't overwrite our optimistic update)
       await queryClient.cancelQueries({
@@ -94,7 +96,11 @@ export function useWithdrawIncomingStream(
     },
     onSuccess: async (result, stream, _variables, context) => {
       if (publicKey) {
-        const targetWithdrawn = context?.expectedWithdrawn ?? stream.withdrawn;
+        const ctx = context as {
+          previousStreams?: IncomingStreamRecord[];
+          expectedWithdrawn?: number;
+        };
+        const targetWithdrawn = ctx.expectedWithdrawn ?? stream.withdrawn;
         // Start polling in the background without blocking the mutation
         pollIndexerForWithdraw(
           publicKey,
@@ -108,10 +114,14 @@ export function useWithdrawIncomingStream(
       await options?.onSuccess?.(result, stream);
     },
     onError: (error, stream, context) => {
-      if (publicKey && context?.previousStreams) {
+      const ctx = context as {
+        previousStreams?: IncomingStreamRecord[];
+        expectedWithdrawn?: number;
+      };
+      if (publicKey && ctx?.previousStreams) {
         queryClient.setQueryData(
           incomingStreamsQueryKey(publicKey),
-          context.previousStreams,
+          ctx.previousStreams,
         );
       }
       options?.onError?.(error, stream);
diff --git a/frontend/tsconfig.json b/frontend/tsconfig.json
index 86b8d82c..1216787e 100644
--- a/frontend/tsconfig.json
+++ b/frontend/tsconfig.json
@@ -34,5 +34,5 @@
     ".next/dev/types/**/*.ts",
     "**/*.mts"
   ],
-  "exclude": ["node_modules", "vitest.config.ts"]
+  "exclude": ["node_modules", "vitest.config.ts", "vitest.config.mts"]
 }

From 2c39ad40c18195e719fc5f3178cd300e0a7f9372 Mon Sep 17 00:00:00 2001
From: Henrichy <henrynzekwe25@gmail.com>
Date: Mon, 29 Jun 2026 22:16:11 +0100
Subject: [PATCH 3/4] Updated

---
 frontend/src/__tests__/setup.ts               | 29 +++++++++++++++++++
 .../stream-creation/StreamCreationWizard.tsx  |  6 ++--
 frontend/src/test-setup.ts                    | 29 +++++++++++++++++++
 3 files changed, 62 insertions(+), 2 deletions(-)

diff --git a/frontend/src/__tests__/setup.ts b/frontend/src/__tests__/setup.ts
index 7b0828bf..3310558c 100644
--- a/frontend/src/__tests__/setup.ts
+++ b/frontend/src/__tests__/setup.ts
@@ -1 +1,30 @@
 import '@testing-library/jest-dom';
+import { vi } from 'vitest';
+
+const localStorageMock = (() => {
+  let store: Record<string, string> = {};
+  return {
+    getItem: vi.fn((key: string) => store[key] || null),
+    setItem: vi.fn((key: string, value: string) => {
+      store[key] = value.toString();
+    }),
+    clear: vi.fn(() => {
+      store = {};
+    }),
+    removeItem: vi.fn((key: string) => {
+      delete store[key];
+    }),
+    key: vi.fn((index: number) => Object.keys(store)[index] || null),
+    length: 0,
+  };
+})();
+
+vi.stubGlobal('localStorage', localStorageMock);
+if (typeof window !== 'undefined') {
+  Object.defineProperty(window, 'localStorage', {
+    value: localStorageMock,
+    configurable: true,
+    writable: true,
+  });
+}
+
diff --git a/frontend/src/components/stream-creation/StreamCreationWizard.tsx b/frontend/src/components/stream-creation/StreamCreationWizard.tsx
index 1d620e9f..26ad2a80 100644
--- a/frontend/src/components/stream-creation/StreamCreationWizard.tsx
+++ b/frontend/src/components/stream-creation/StreamCreationWizard.tsx
@@ -321,7 +321,7 @@ export const StreamCreationWizard: React.FC<StreamCreationWizardProps> = ({
         setCurrentStep(currentStep + 1);
         // Scroll to top when moving to next step
         const modal = document.querySelector('.glass-card');
-        if (modal) {
+        if (modal && typeof modal.scrollTo === 'function') {
           modal.scrollTo({ top: 0, behavior: 'smooth' });
         }
       }
@@ -338,7 +338,9 @@ export const StreamCreationWizard: React.FC<StreamCreationWizardProps> = ({
     if (currentStep > 1) {
       setCurrentStep(currentStep - 1);
       // Scroll to top when going back
-      window.scrollTo({ top: 0, behavior: 'smooth' });
+      if (typeof window.scrollTo === 'function') {
+        window.scrollTo({ top: 0, behavior: 'smooth' });
+      }
     }
   };
 
diff --git a/frontend/src/test-setup.ts b/frontend/src/test-setup.ts
index 7b0828bf..3310558c 100644
--- a/frontend/src/test-setup.ts
+++ b/frontend/src/test-setup.ts
@@ -1 +1,30 @@
 import '@testing-library/jest-dom';
+import { vi } from 'vitest';
+
+const localStorageMock = (() => {
+  let store: Record<string, string> = {};
+  return {
+    getItem: vi.fn((key: string) => store[key] || null),
+    setItem: vi.fn((key: string, value: string) => {
+      store[key] = value.toString();
+    }),
+    clear: vi.fn(() => {
+      store = {};
+    }),
+    removeItem: vi.fn((key: string) => {
+      delete store[key];
+    }),
+    key: vi.fn((index: number) => Object.keys(store)[index] || null),
+    length: 0,
+  };
+})();
+
+vi.stubGlobal('localStorage', localStorageMock);
+if (typeof window !== 'undefined') {
+  Object.defineProperty(window, 'localStorage', {
+    value: localStorageMock,
+    configurable: true,
+    writable: true,
+  });
+}
+

From 9dbe6136ab7cac917aee821c320235625b22c409 Mon Sep 17 00:00:00 2001
From: Henrichy <henrynzekwe25@gmail.com>
Date: Mon, 29 Jun 2026 22:40:12 +0100
Subject: [PATCH 4/4] Update2

---
 frontend/src/app/streams/create/page.tsx      | 259 ------------------
 .../components/dashboard/dashboard-view.tsx   |   7 +-
 2 files changed, 2 insertions(+), 264 deletions(-)

diff --git a/frontend/src/app/streams/create/page.tsx b/frontend/src/app/streams/create/page.tsx
index f1c7cfd9..66164f65 100644
--- a/frontend/src/app/streams/create/page.tsx
+++ b/frontend/src/app/streams/create/page.tsx
@@ -8,263 +8,4 @@ export const metadata: Metadata = {
 
 export default function CreateStreamPage() {
   return <CreateStreamContent />;
-import React, { useState } from "react";
-import {
-  createStream,
-  toBaseUnits,
-  toDurationSeconds,
-  getTokenAddress,
-  toSorobanErrorMessage,
-  TOKEN_ADDRESSES
-} from "@/lib/soroban";
-import { hasValidPrecision, validateAmountInput } from "@/utils/amount";
-import { isValidStellarPublicKey } from "@/lib/stellar";
-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();
-  const [nowTimestamp] = useState(() => Date.now());
-  const [loading, setLoading] = useState(false);
-  const [txState, setTxState] = useState<"idle" | "signing" | "submitted" | "confirming">("idle");
-  const [formData, setFormData] = useState({
-    recipient: "",
-    token: "XLM",
-    amount: "",
-    duration: "30", // days
-  });
-
-  const handleSubmit = async (e: React.FormEvent) => {
-    e.preventDefault();
-    if (status !== "connected" || !session) {
-      toast.error("Please connect your wallet first.");
-      return;
-    }
-
-    // Validate recipient
-    if (!formData.recipient.trim()) {
-      toast.error("Recipient address is required");
-      return;
-    }
-    if (!isValidStellarPublicKey(formData.recipient)) {
-      toast.error("Invalid Stellar public key format");
-      return;
-    }
-
-    // Validate amount
-    const validationError = validateAmountInput(formData.amount, TOKEN_DECIMALS);
-    if (validationError) {
-      toast.error(validationError);
-      return;
-    }
-
-    // Validate duration
-    const durationNum = parseFloat(formData.duration);
-    if (isNaN(durationNum) || durationNum <= 0) {
-      toast.error("Duration must be a positive number");
-      return;
-    }
-
-    setLoading(true);
-    setTxState("signing");
-
-    try {
-      const amountBigInt = toBaseUnits(formData.amount);
-      const durationBigInt = toDurationSeconds(formData.duration, "days");
-      const tokenAddress = getTokenAddress(formData.token);
-
-      const result = await createStream(session, {
-        recipient: formData.recipient,
-        tokenAddress,
-        amount: amountBigInt,
-        durationSeconds: durationBigInt,
-      });
-
-      if (result.success) {
-        setTxState("confirming");
-        toast.success("Stream created successfully!");
-        // Small delay to allow indexer to catch up
-        setTimeout(() => {
-          router.push("/dashboard");
-        }, 2000);
-      }
-    } catch (error) {
-      console.error("Stream creation failed:", error);
-      toast.error(toSorobanErrorMessage(error));
-    } finally {
-      setLoading(false);
-      setTxState("idle");
-    }
-  };
-
-  const getButtonText = () => {
-    if (!loading) return "Start Streaming";
-    switch (txState) {
-      case "signing": return "Confirm in Wallet...";
-      case "submitted": return "Submitting to Network...";
-      case "confirming": return "Finalizing Stream...";
-      default: return "Processing...";
-    }
-  };
-
-  // Inline validation feedback for the amount field. validateAmountInput
-  // returns an error message when invalid and null when valid. Only show it
-  // once the user has typed something — the empty case is handled on submit.
-  const amountError = formData.amount
-    ? validateAmountInput(formData.amount, TOKEN_DECIMALS)
-    : null;
-
-  const recipientError = formData.recipient
-    ? (!isValidStellarPublicKey(formData.recipient) ? "Invalid Stellar public key format" : null)
-    : null;
-
-  const durationError = formData.duration
-    ? (isNaN(Number(formData.duration)) || Number(formData.duration) <= 0
-      ? "Duration must be a positive number"
-      : null)
-    : null;
-
-  return (
-    <div className="container mx-auto max-w-2xl px-4 py-12">
-      <Link
-        href="/dashboard"
-        className="mb-8 inline-flex items-center text-sm font-medium text-slate-400 hover:text-white transition-colors"
-      >
-        <ArrowLeft className="mr-2 h-4 w-4" />
-        Back to Dashboard
-      </Link>
-
-      <div className="glass-card rounded-3xl border-slate-800 p-8">
-        <h1 className="mb-2 text-3xl font-bold">Create New Stream</h1>
-        <p className="mb-8 text-slate-400">
-          Set up a real-time payment stream to any Stellar address.
-        </p>
-
-        <form onSubmit={handleSubmit} className="space-y-6">
-          <div className="space-y-2">
-            <label className="text-sm font-medium text-slate-300">
-              Recipient Address
-            </label>
-            <input
-              type="text"
-              placeholder="G..."
-              className={`w-full rounded-xl border ${
-                recipientError ? "border-red-500 focus:border-red-500" : "border-slate-800 focus:border-accent"
-              } bg-slate-900/50 p-4 outline-none transition-colors`}
-              value={formData.recipient}
-              onChange={(e) => setFormData({ ...formData, recipient: e.target.value })}
-              required
-            />
-            {recipientError && (
-              <p className="text-xs text-red-400 mt-1">{recipientError}</p>
-            )}
-          </div>
-
-          <div className="grid grid-cols-2 gap-4">
-            <div className="space-y-2">
-              <label className="text-sm font-medium text-slate-300">
-                Token
-              </label>
-              <select
-                className="w-full rounded-xl border border-slate-800 bg-slate-900/50 p-4 outline-none focus:border-accent transition-colors appearance-none"
-                value={formData.token}
-                onChange={(e) => setFormData({ ...formData, token: e.target.value })}
-              >
-                {Object.keys(TOKEN_ADDRESSES).map((symbol) => (
-                  <option key={symbol} value={symbol}>
-                    {symbol}
-                  </option>
-                ))}
-              </select>
-            </div>
-            <div className="space-y-2">
-              <label className="text-sm font-medium text-slate-300">
-                Total Amount
-              </label>
-              <input
-                type="text"
-                inputMode="decimal"
-                placeholder="0.00"
-                className={`w-full rounded-xl border ${
-                  amountError ? "border-red-500 focus:border-red-500" : "border-slate-800 focus:border-accent"
-                } bg-slate-900/50 p-4 outline-none transition-colors`}
-                value={formData.amount}
-                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
-              />
-              {amountError && (
-                <p className="text-xs text-red-400 mt-1">{amountError}</p>
-              )}
-            </div>
-          </div>
-
-          <div className="space-y-2">
-            <label className="text-sm font-medium text-slate-300">
-              Duration (Days)
-            </label>
-            <input
-              type="number"
-              placeholder="30"
-              className={`w-full rounded-xl border ${
-                durationError ? "border-red-500 focus:border-red-500" : "border-slate-800 focus:border-accent"
-              } bg-slate-900/50 p-4 outline-none transition-colors`}
-              value={formData.duration}
-              onChange={(e) => setFormData({ ...formData, duration: e.target.value })}
-              required
-            />
-            {durationError && (
-              <p className="text-xs text-red-400 mt-1">{durationError}</p>
-            )}
-          </div>
-
-          <div className="rounded-2xl bg-accent/5 p-6 space-y-4">
-            <div className="flex justify-between items-center text-sm">
-              <span className="text-slate-400">Streaming Rate</span>
-              <span className="font-mono font-medium text-accent">
-                {formData.amount && formData.duration && Number(formData.duration) > 0
-                  ? (Number(formData.amount) / (Number(formData.duration) * 86400)).toFixed(8)
-                  : "0.00000000"} {formData.token}/sec
-              </span>
-            </div>
-            <div className="flex justify-between items-center text-sm">
-              <span className="text-slate-400">Estimated End Date</span>
-              <span className="font-medium">
-                {formData.duration && Number(formData.duration) > 0
-                  ? new Date(nowTimestamp + Number(formData.duration) * 86400000).toLocaleDateString()
-                  : "—"}
-              </span>
-            </div>
-          </div>
-
-          <button
-            type="submit"
-            disabled={loading || status !== "connected" || !!amountError || !!recipientError || !!durationError}
-            className="w-full rounded-xl bg-accent py-4 text-lg font-bold text-background transition-all hover:opacity-90 disabled:opacity-50 active:scale-[0.98]"
-          >
-            {getButtonText()}
-          </button>
-          
-          {status !== "connected" && (
-            <p className="text-center text-sm text-red-400">
-              Please connect your wallet to create a stream.
-            </p>
-          )}
-        </form>
-      </div>
-    </div>
-  );
 }
diff --git a/frontend/src/components/dashboard/dashboard-view.tsx b/frontend/src/components/dashboard/dashboard-view.tsx
index 9247431c..3bbc810c 100644
--- a/frontend/src/components/dashboard/dashboard-view.tsx
+++ b/frontend/src/components/dashboard/dashboard-view.tsx
@@ -108,11 +108,8 @@ const SIDEBAR_ITEMS: SidebarItem[] = [
 /** Shimmer card used as a placeholder while data loads */
 function SkeletonCard({ className = "" }: { className?: string }) {
   return (
-    <Skeleton
-      className={`rounded-2xl ${className}`}
-      aria-hidden="true"
-    />
-    >
+    <div className={`relative overflow-hidden rounded-2xl ${className}`} aria-hidden="true">
+      <Skeleton className="w-full h-full" />
       {/* shimmer sweep */}
       <div className="absolute inset-0 -translate-x-full animate-shimmer bg-gradient-to-r from-transparent via-white/10 to-transparent" />
     </div>