Merge pull request #925 from LawalRahman/Withdraw-mutation-invalidates-immediately-against-lagging-indexer

ogazboiz · web-flow · commit a76874125eb7 · 2026-06-29T17:10:27.000+01:00
diff --git a/.gitignore b/.gitignore
@@ -8,4 +8,5 @@ coverage
 
 # Soroban test runner — auto-generated, never commit
 **/test_snapshots/
-fix.md
+fix.md
+.npm-cache/
diff --git a/frontend/src/__tests__/useStreamingAmount.test.tsx b/frontend/src/__tests__/useStreamingAmount.test.tsx
@@ -0,0 +1,88 @@
+import { describe, it, expect, vi, beforeEach, afterEach } from "vitest";
+import { renderHook, act } from "@testing-library/react";
+import { useStreamingAmount } from "../hooks/useStreamingAmount";
+
+describe("useStreamingAmount", () => {
+  let mockTimeMs = 1000 * 1000 * 1000; // t = 1,000,000s in ms
+
+  beforeEach(() => {
+    vi.useFakeTimers();
+    mockTimeMs = 1000 * 1000 * 1000;
+    
+    // Mock performance.now and Date.now to return our simulated clock
+    vi.spyOn(performance, "now").mockImplementation(() => mockTimeMs);
+    vi.spyOn(Date, "now").mockImplementation(() => mockTimeMs);
+
+    // Mock requestAnimationFrame and cancelAnimationFrame to run under fake timers
+    vi.spyOn(globalThis, "requestAnimationFrame").mockImplementation((cb) => {
+      return setTimeout(() => {
+        mockTimeMs += 16;
+        cb(mockTimeMs);
+      }, 16) as unknown as number;
+    });
+    vi.spyOn(globalThis, "cancelAnimationFrame").mockImplementation((id) => {
+      clearTimeout(id as unknown as NodeJS.Timeout);
+    });
+  });
+
+  afterEach(() => {
+    vi.useRealTimers();
+    vi.restoreAllMocks();
+  });
+
+  it("accurately streams amount, caps at deposited - withdrawn, and drops to 0 after withdraw update", () => {
+    const params = {
+      deposited: 1000,
+      withdrawn: 0,
+      ratePerSecond: 1,
+      startTime: 1000 * 1000 - 100, // started 100 seconds ago (at t = 999,900s)
+      isActive: true,
+    };
+
+    const { result, rerender } = renderHook(
+      (props) => useStreamingAmount(props),
+      { initialProps: params }
+    );
+
+    // Initial claimable (elapsed = 1,000,000 - 999,900 = 100s, rate = 1/sec)
+    expect(result.current).toBe(100);
+
+    // Advance time by 10 seconds (now at t = 1,000,010s)
+    act(() => {
+      vi.advanceTimersByTime(10000);
+    });
+    // Claimable should accrue 10 more to 110 (with minor tolerance for 16ms ticks)
+    expect(result.current).toBeCloseTo(110, 1);
+
+    // Simulate withdraw (optimistic update):
+    // withdrawn is bumped to 110 (pre-withdrawn + claimable)
+    // lastUpdateTime is bumped to current time (1,000,010s)
+    // startTime is removed/omitted to anchor on lastUpdateTime
+    const updatedParams = {
+      deposited: 1000,
+      withdrawn: 110,
+      ratePerSecond: 1,
+      lastUpdateTime: 1000 * 1000 + 10,
+      isActive: true,
+    };
+
+    rerender(updatedParams);
+
+    // Claimable must drop to 0 immediately (does not regress/jump back up)
+    expect(result.current).toBe(0);
+
+    // Advance time by 5 seconds (now at t = 1,000,015s)
+    act(() => {
+      vi.advanceTimersByTime(5000);
+    });
+    // Claimable should accrue from 0 since lastUpdateTime (elapsed = 1,000,015 - 1,000,010 = 5s, rate = 1/sec)
+    expect(result.current).toBeCloseTo(5, 1);
+
+    // Advance time past the remaining cap (cap = 1000 - 110 = 890)
+    act(() => {
+      vi.advanceTimersByTime(1000 * 1000);
+    });
+    // Claimable must be capped at 890
+    expect(result.current).toBe(890);
+  });
+});
diff --git a/frontend/src/app/streams/create/page.tsx b/frontend/src/app/streams/create/page.tsx
@@ -10,6 +10,7 @@ import {
   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";
@@ -38,13 +39,30 @@ export default function CreateStreamPage() {
       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");
 
@@ -94,6 +112,16 @@ export default function CreateStreamPage() {
     ? 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
@@ -118,11 +146,16 @@ export default function CreateStreamPage() {
             <input
               type="text"
               placeholder="G..."
-              className="w-full rounded-xl border border-slate-800 bg-slate-900/50 p-4 outline-none focus:border-accent transition-colors"
+              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">
@@ -150,7 +183,9 @@ export default function CreateStreamPage() {
                 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"
+                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;
@@ -176,33 +211,40 @@ export default function CreateStreamPage() {
             <input
               type="number"
               placeholder="30"
-              className="w-full rounded-xl border border-slate-800 bg-slate-900/50 p-4 outline-none focus:border-accent transition-colors"
+              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 
+                {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">
-                {new Date(nowTimestamp + Number(formData.duration || 0) * 86400000).toLocaleDateString()}
+                {formData.duration && Number(formData.duration) > 0
+                  ? new Date(nowTimestamp + Number(formData.duration) * 86400000).toLocaleDateString()
+                  : "—"}
               </span>
             </div>
           </div>
 
           <button
             type="submit"
-            disabled={loading || status !== "connected"}
+            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()}
diff --git a/frontend/src/components/stream-creation/ScheduleStep.tsx b/frontend/src/components/stream-creation/ScheduleStep.tsx
@@ -81,9 +81,12 @@ export const ScheduleStep: React.FC<ScheduleStepProps> = ({
   const ratePerDayPreview = useMemo(() => {
     if (!ratePerSecond) return null;
     const dailyRate = ratePerSecond * 86400;
-    if (token === "USDC" || token === "EURC") {
+    if (token === "USDC") {
       return `$${dailyRate.toFixed(2)} / day`;
     }
+    if (token === "EURC") {
+      return `€${dailyRate.toFixed(2)} / day`;
+    }
     return `${dailyRate.toFixed(4)} ${token || ""} / day`;
   }, [ratePerSecond, token]);
 
diff --git a/frontend/src/components/streams/IncomingStreamCard.tsx b/frontend/src/components/streams/IncomingStreamCard.tsx
@@ -41,7 +41,7 @@ export function IncomingStreamCard({
     deposited: stream.deposited,
     withdrawn: stream.withdrawn,
     ratePerSecond: stream.ratePerSecond,
-    startTime: stream.startTime,
+    lastUpdateTime: stream.lastUpdateTime,
     isActive: stream.isActive,
     isPaused: stream.isPaused,
     pausedAt: stream.pausedAt,
diff --git a/frontend/src/components/ui/Stepper.tsx b/frontend/src/components/ui/Stepper.tsx
@@ -13,16 +13,16 @@ export const Stepper: React.FC<StepperProps> = ({
   className = "",
 }) => {
   return (
-    <div className={`stepper ${className}`}>
-      <div className="stepper__container">
+    <nav className={`stepper ${className}`} aria-label="Progress">
+      <ol className="stepper__container">
         {steps.map((step, index) => {
           const stepNumber = index + 1;
           const isActive = stepNumber === currentStep;
           const isCompleted = stepNumber < currentStep;
 
           return (
             <React.Fragment key={step}>
-              <div className="stepper__step">
+              <li className="stepper__step" aria-current={isActive ? "step" : undefined}>
                 <div
                   className={`stepper__circle ${
                     isActive
@@ -60,19 +60,23 @@ export const Stepper: React.FC<StepperProps> = ({
                   }`}
                 >
                   {step}
+                  <span className="sr-only">
+                    {isActive ? " (current step)" : isCompleted ? " (completed)" : " (upcoming)"}
+                  </span>
                 </span>
-              </div>
+              </li>
               {index < steps.length - 1 && (
                 <div
                   className={`stepper__line ${
                     isCompleted ? "stepper__line--completed" : ""
                   }`}
+                  aria-hidden="true"
                 />
               )}
             </React.Fragment>
           );
         })}
-      </div>
-    </div>
+      </ol>
+    </nav>
   );
 };
diff --git a/frontend/src/hooks/useIncomingStreams.ts b/frontend/src/hooks/useIncomingStreams.ts
diff --git a/frontend/src/hooks/useStreamingAmount.ts b/frontend/src/hooks/useStreamingAmount.ts
diff --git a/package-lock.json b/package-lock.json
