fix: resolve Badge dark theme colors, chart sort NaN bug, and use-ref TS error

Author: StellarStream Dev

frontend/components/stream/balance-projection-chart.tsx

@@ -40,7 +40,13 @@ export function BalanceProjectionChart({ stream }: BalanceProjectionChartProps)
     const endTime = new Date(stream.endTime).getTime();
     const now = Date.now();
     const totalDuration = endTime - startTime;
-    const points: { time: string; streamed: number; projected?: number }[] = [];
+    type ChartPoint = {
+      time: string;
+      timeMs: number;
+      streamed: number | null;
+      projected: number | null;
+    };
+    const points: ChartPoint[] = [];
 
     // Generate ~12 time points across the stream duration
     const intervals = 12;
@@ -58,12 +64,13 @@ export function BalanceProjectionChart({ stream }: BalanceProjectionChartProps)
           month: "short",
           day: "numeric",
         }),
-        streamed: isPast ? expectedStreamed : undefined as unknown as number,
-        projected: !isPast ? expectedStreamed : undefined,
+        timeMs: t,
+        streamed: isPast ? expectedStreamed : null,
+        projected: !isPast ? expectedStreamed : null,
       });
     }
 
-    // Add current point
+    // Add current point (always in the "past" so it renders on the streamed line)
     const currentElapsed = now - startTime;
     const currentStreamed = Math.min(
       currentElapsed * stream.ratePerSecond,
@@ -72,14 +79,13 @@ export function BalanceProjectionChart({ stream }: BalanceProjectionChartProps)
 
     points.push({
       time: "Now",
+      timeMs: now,
       streamed: currentStreamed,
+      projected: null,
     });
 
-    // Sort by time
-    return points.sort(
-      (a, b) =>
-        new Date(a.time).getTime() - new Date(b.time).getTime(),
-    );
+    // Sort by timestamp to ensure correct chronological order
+    return points.sort((a, b) => a.timeMs - b.timeMs);
   }, [stream]);
 
   const CustomTooltip = ({

frontend/components/ui/Badge.tsx

@@ -1,51 +1,63 @@
-'use client';
+"use client";
 
-import React from 'react';
-import { cn } from '@/lib/utils';
+import React from "react";
+import { cn } from "@/lib/utils";
 
 interface BadgeProps extends React.HTMLAttributes<HTMLSpanElement> {
-  variant?: 'default' | 'success' | 'warning' | 'error' | 'info' | 'neutral';
-  size?: 'sm' | 'md' | 'lg';
+  variant?: "default" | "success" | "warning" | "error" | "info" | "neutral";
+  size?: "sm" | "md" | "lg";
   outline?: boolean;
   dot?: boolean;
 }
 
 /**
- * Badge component for status indicators
+ * Badge component for status indicators — moon-theme (dark) optimized.
  * @example
  * <Badge variant="success">Active</Badge>
  * <Badge variant="error" outline>Failed</Badge>
  */
 export const Badge = React.forwardRef<HTMLSpanElement, BadgeProps>(
-  ({ variant = 'default', size = 'md', outline = false, dot = false, className, children, ...props }, ref) => {
+  (
+    {
+      variant = "default",
+      size = "md",
+      outline = false,
+      dot = false,
+      className,
+      children,
+      ...props
+    },
+    ref,
+  ) => {
     const variantStyles = {
       default: outline
-        ? 'bg-transparent text-neutral-700 border border-neutral-300'
-        : 'bg-neutral-200 text-neutral-800',
+        ? "bg-transparent text-white/40 border border-white/10"
+        : "bg-white/10 text-white/70",
       success: outline
-        ? 'bg-transparent text-green-700 border border-green-300'
-        : 'bg-green-100 text-green-800',
+        ? "bg-transparent text-emerald-400 border border-emerald-500/30"
+        : "bg-emerald-500/10 text-emerald-400",
       warning: outline
-        ? 'bg-transparent text-amber-700 border border-amber-300'
-        : 'bg-amber-100 text-amber-800',
+        ? "bg-transparent text-amber-400 border border-amber-500/30"
+        : "bg-amber-500/10 text-amber-400",
       error: outline
-        ? 'bg-transparent text-red-700 border border-red-300'
-        : 'bg-red-100 text-red-800',
+        ? "bg-transparent text-red-400 border border-red-500/30"
+        : "bg-red-500/10 text-red-400",
       info: outline
-        ? 'bg-transparent text-sky-700 border border-sky-300'
-        : 'bg-sky-100 text-sky-800',
+        ? "bg-transparent text-sky-400 border border-sky-500/30"
+        : "bg-sky-500/10 text-sky-400",
       neutral: outline
-        ? 'bg-transparent text-neutral-600 border border-neutral-300'
-        : 'bg-neutral-100 text-neutral-700',
+        ? "bg-transparent text-white/30 border border-white/10"
+        : "bg-white/5 text-white/50",
     };
 
     const sizeStyles = {
-      sm: 'px-2 py-0.5 text-xs font-medium',
-      md: 'px-2.5 py-0.5 text-sm font-medium',
-      lg: 'px-3 py-1 text-base font-medium',
+      sm: "px-2 py-0.5 text-[10px] font-medium",
+      md: "px-2.5 py-0.5 text-xs font-medium",
+      lg: "px-3 py-1 text-sm font-medium",
     };
 
-    const baseStyles = 'inline-flex items-center gap-1.5 rounded-full whitespace-nowrap';
+    const baseStyles =
+      "inline-flex items-center gap-1.5 rounded-full whitespace-nowrap";
 
     return (
       <span
@@ -56,24 +68,28 @@ export const Badge = React.forwardRef<HTMLSpanElement, BadgeProps>(
         {dot && (
           <span
             className={cn(
-              'inline-block rounded-full',
-              variant === 'success'
-                ? 'bg-green-600'
-                : variant === 'warning'
-                  ? 'bg-amber-600'
-                  : variant === 'error'
-                    ? 'bg-red-600'
-                    : variant === 'info'
-                      ? 'bg-sky-600'
-                      : 'bg-neutral-600',
-              size === 'sm' ? 'w-1.5 h-1.5' : size === 'lg' ? 'w-2.5 h-2.5' : 'w-2 h-2'
+              "inline-block rounded-full",
+              variant === "success"
+                ? "bg-emerald-400"
+                : variant === "warning"
+                  ? "bg-amber-400"
+                  : variant === "error"
+                    ? "bg-red-400"
+                    : variant === "info"
+                      ? "bg-sky-400"
+                      : "bg-white/30",
+              size === "sm"
+                ? "h-1.5 w-1.5"
+                : size === "lg"
+                  ? "h-2.5 w-2.5"
+                  : "h-2 w-2",
             )}
           />
         )}
         {children}
       </span>
     );
-  }
+  },
 );
 
-Badge.displayName = 'Badge';
+Badge.displayName = "Badge";

frontend/lib/hooks/use-transaction-feed.ts

@@ -47,7 +47,7 @@ export const useTransactionFeed = (): UseTransactionFeedReturn => {
   const [socket, setSocket] = useState<Socket | null>(null);
   const reconnectTimeoutRef = useRef<NodeJS.Timeout | null>(null);
 
-  const attemptReconnectRef = useRef<(attempt?: number) => void>();
+  const attemptReconnectRef = useRef<((attempt?: number) => void) | null>(null);
 
   /**
    * Attempt to reconnect with exponential back-off.