From dfb20e514c55a2f9298f2b77a09d0f0e758000bf Mon Sep 17 00:00:00 2001
From: Niceguy <azukaolu@gmail.com>
Date: Tue, 29 Sep 2026 03:18:32 +0000
Subject: [PATCH] Keep feed socket stable while paused

---
 src/components/LiveActivityFeed.tsx | 15 +++++++++++----
 1 file changed, 11 insertions(+), 4 deletions(-)

diff --git a/src/components/LiveActivityFeed.tsx b/src/components/LiveActivityFeed.tsx
index d9848cb..6450da8 100644
--- a/src/components/LiveActivityFeed.tsx
+++ b/src/components/LiveActivityFeed.tsx
@@ -1,6 +1,6 @@
 'use client';
 
-import React, { useState, useEffect } from 'react';
+import React, { useState, useEffect, useRef } from 'react';
 import { AlertTriangle, Zap, Radio, Pause, Play } from 'lucide-react';
 import { getApiUrl, getWsUrl } from '@/lib/config';
 
@@ -14,6 +14,7 @@ export const LiveActivityFeed: React.FC<LiveActivityFeedProps> = ({
   const [feed, setFeed] = useState<any[]>([]);
   const [isPaused, setIsPaused] = useState(false);
   const [connected, setConnected] = useState(false);
+  const isPausedRef = useRef(false);
 
   // Initial Fetch & WebSocket setup
   useEffect(() => {
@@ -35,7 +36,7 @@ export const LiveActivityFeed: React.FC<LiveActivityFeedProps> = ({
     };
 
     ws.onmessage = (event) => {
-      if (isPaused) return;
+      if (isPausedRef.current) return;
       try {
         const payload = JSON.parse(event.data);
         if (payload.type === 'LIVE_TRANSACTION') {
@@ -51,7 +52,7 @@ export const LiveActivityFeed: React.FC<LiveActivityFeedProps> = ({
     return () => {
       ws.close();
     };
-  }, [isPaused]);
+  }, []);
 
   return (
     <div className="metallic-card rounded-2xl p-6 flex flex-col justify-between min-h-[420px] font-mono-tech">
@@ -74,7 +75,13 @@ export const LiveActivityFeed: React.FC<LiveActivityFeedProps> = ({
 
         <div className="flex items-center gap-2">
           <button
-            onClick={() => setIsPaused(!isPaused)}
+            onClick={() => {
+              setIsPaused((paused) => {
+                const nextPaused = !paused;
+                isPausedRef.current = nextPaused;
+                return nextPaused;
+              });
+            }}
             className="flex items-center gap-1.5 px-2.5 py-1 rounded bg-[var(--bg-secondary)] border border-[var(--border-subtle)] hover:border-[var(--accent-electric)] text-[11px] text-[var(--text-secondary)] hover:text-[var(--text-primary)] transition-all cursor-pointer"
           >
             {isPaused ? <Play className="w-3 h-3 text-[var(--accent-emerald)]" /> : <Pause className="w-3 h-3 text-[var(--accent-amber)]" />}