Address code review feedback: fix retry logic, remove unused props, improve time tracking, throttle onRead calls, and add logging

Co-authored-by: 0xrinegade <[email protected]>

Author: Copilot

src/components/RewardDashboard.js

@@ -12,7 +12,7 @@ import {
     getRemainingFailedClaimCooldown,
     getCooldownStats 
 } from '../utils/rewardTransactions';
-import { useAutoClaimManager } from '../utils/autoClaimManager';
+import { useAutoClaimManager } from '../hooks/useAutoClaimManager';
 import { 
     REWARD_CONSTANTS, 
     CONVERSION_HELPERS, 

src/components/common/RealTimeFeedback.js

@@ -1,4 +1,4 @@
-import React, { useState, useEffect, useRef } from 'react';
+import React, { useState, useEffect, useRef, useCallback } from 'react';
 import PropTypes from 'prop-types';
 
 /**
@@ -27,77 +27,10 @@ const RealTimeFeedback = ({
 
   const intervalRef = useRef(null);
   const retryTimeoutRef = useRef(null);
-  const wsRef = useRef(null);
-
-  // Simulate WebSocket connection
-  useEffect(() => {
-    if (!transactionId && !networkEndpoint) return;
-
-    const connect = () => {
-      setConnectionStatus('connecting');
-      
-      // Simulate connection delay
-      setTimeout(() => {
-        setConnectionStatus('connected');
-        setRetryCount(0);
-        startPolling();
-      }, 500);
-    };
-
-    const disconnect = () => {
-      setConnectionStatus('disconnected');
-      stopPolling();
-    };
-
-    const reconnect = () => {
-      if (retryCount < maxRetries) {
-        setConnectionStatus('reconnecting');
-        setRetryCount(prev => prev + 1);
-        
-        retryTimeoutRef.current = setTimeout(() => {
-          connect();
-        }, retryDelay * Math.pow(2, retryCount)); // Exponential backoff
-      } else {
-        setConnectionStatus('failed');
-      }
-    };
-
-    connect();
-
-    return () => {
-      disconnect();
-      if (retryTimeoutRef.current) {
-        clearTimeout(retryTimeoutRef.current);
-      }
-    };
-  }, [transactionId, networkEndpoint, maxRetries, retryDelay, retryCount]);
-
-  // Polling simulation for real-time updates
-  const startPolling = () => {
-    if (intervalRef.current) return;
-
-    intervalRef.current = setInterval(() => {
-      // Simulate network status updates
-      updateNetworkStatus();
-      
-      // Simulate transaction updates if tracking a transaction
-      if (transactionId) {
-        updateTransactionStatus();
-      }
-      
-      setLastUpdate(new Date().toISOString());
-    }, updateInterval);
-  };
-
-  const stopPolling = () => {
-    if (intervalRef.current) {
-      clearInterval(intervalRef.current);
-      intervalRef.current = null;
-    }
-  };
+  const retryCountRef = useRef(0);
 
   // Simulate network status updates
-  const updateNetworkStatus = () => {
+  const updateNetworkStatus = useCallback(() => {
     const newNetworkStatus = {
       health: Math.max(85, Math.min(100, networkStatus.health + (Math.random() - 0.5) * 10)),
       latency: Math.max(10, Math.min(500, networkStatus.latency + (Math.random() - 0.5) * 50)),
@@ -110,10 +43,10 @@ const RealTimeFeedback = ({
     if (onNetworkChange) {
       onNetworkChange(newNetworkStatus);
     }
-  };
+  }, [networkStatus.health, networkStatus.latency, onNetworkChange]);
 
   // Simulate transaction status updates
-  const updateTransactionStatus = () => {
+  const updateTransactionStatus = useCallback(() => {
     const statuses = ['submitted', 'pending', 'confirming', 'confirmed', 'finalized'];
     const currentIndex = transactionStatus ? statuses.indexOf(transactionStatus.status) : -1;
 
@@ -156,7 +89,76 @@ const RealTimeFeedback = ({
         sendPushNotification(newStatus);
       }
     }
-  };
+  }, [transactionStatus, networkStatus.blockHeight, queuePosition, onStatusUpdate, enableSound, enablePushNotifications]);
+
+  // Polling simulation for real-time updates
+  const startPolling = useCallback(() => {
+    if (intervalRef.current) return;
+
+    intervalRef.current = setInterval(() => {
+      // Simulate network status updates
+      updateNetworkStatus();
+      
+      // Simulate transaction updates if tracking a transaction
+      if (transactionId) {
+        updateTransactionStatus();
+      }
+      
+      setLastUpdate(new Date().toISOString());
+    }, updateInterval);
+  }, [updateInterval, transactionId, updateNetworkStatus, updateTransactionStatus]);
+
+  const stopPolling = useCallback(() => {
+    if (intervalRef.current) {
+      clearInterval(intervalRef.current);
+      intervalRef.current = null;
+    }
+  }, []);
+
+  // Simulate WebSocket connection
+  useEffect(() => {
+    if (!transactionId && !networkEndpoint) return;
+
+    const connect = () => {
+      setConnectionStatus('connecting');
+      
+      // Simulate connection delay
+      setTimeout(() => {
+        setConnectionStatus('connected');
+        retryCountRef.current = 0;
+        setRetryCount(0);
+        startPolling();
+      }, 500);
+    };
+
+    const disconnect = () => {
+      setConnectionStatus('disconnected');
+      stopPolling();
+    };
+
+    const reconnect = () => {
+      if (retryCountRef.current < maxRetries) {
+        setConnectionStatus('reconnecting');
+        retryCountRef.current += 1;
+        setRetryCount(retryCountRef.current);
+        
+        retryTimeoutRef.current = setTimeout(() => {
+          connect();
+        }, retryDelay * Math.pow(2, retryCountRef.current - 1)); // Exponential backoff
+      } else {
+        setConnectionStatus('failed');
+      }
+    };
+
+    connect();
+
+    return () => {
+      disconnect();
+      if (retryTimeoutRef.current) {
+        clearTimeout(retryTimeoutRef.current);
+      }
+    };
+  }, [transactionId, networkEndpoint, maxRetries, retryDelay, startPolling, stopPolling]);
 
   // Play notification sound
   const playNotificationSound = () => {

src/components/common/TransactionAnalytics.js

@@ -7,10 +7,8 @@ import PropTypes from 'prop-types';
  * Provides transparency and builds user confidence
  */
 const TransactionAnalytics = ({
-  userStats = {},
   globalStats = {},
   recentTransactions = [],
-  showPersonalStats = true,
   showGlobalStats = true,
   showRecentActivity = true,
   timeframe = '7d',
@@ -314,7 +312,6 @@ const TransactionAnalytics = ({
 };
 
 TransactionAnalytics.propTypes = {
-  userStats: PropTypes.object,
   globalStats: PropTypes.object,
   recentTransactions: PropTypes.arrayOf(
     PropTypes.shape({
@@ -326,7 +323,6 @@ TransactionAnalytics.propTypes = {
       value: PropTypes.number
     })
   ),
-  showPersonalStats: PropTypes.bool,
   showGlobalStats: PropTypes.bool,
   showRecentActivity: PropTypes.bool,
   timeframe: PropTypes.oneOf(['24h', '7d', '30d', '90d']),

src/components/common/TransactionProgressIndicator.js

@@ -19,17 +19,20 @@ const TransactionProgressIndicator = ({
   showStepDetails = true,
   compact = false
 }) => {
-  const [elapsedTime, setElapsedTime] = useState(0);
   const [startTime] = useState(Date.now());
+  const [, forceRender] = useState({});
 
-  // Update elapsed time every second
+  // Force re-render every second to update elapsed time
   useEffect(() => {
     const interval = setInterval(() => {
-      setElapsedTime(Math.floor((Date.now() - startTime) / 1000));
+      forceRender({});
     }, 1000);
 
     return () => clearInterval(interval);
-  }, [startTime]);
+  }, []);
+
+  // Calculate elapsed time directly during render for accuracy
+  const elapsedTime = Math.floor((Date.now() - startTime) / 1000);
 
   // Calculate progress percentage
   const progressPercentage = totalSteps 

src/components/notifications/EnhancedNotification.js

@@ -1,4 +1,4 @@
-import React, { useState, useEffect } from 'react';
+import React, { useState, useEffect, useRef } from 'react';
 import PropTypes from 'prop-types';
 
 /**
@@ -33,6 +33,7 @@ const EnhancedNotification = ({
   const [isExpanded, setIsExpanded] = useState(expanded);
   const [isVisible, setIsVisible] = useState(true);
   const [timeRemaining, setTimeRemaining] = useState(autoClose ? autoCloseTime / 1000 : null);
+  const readCalledRef = useRef(false);
 
   // Auto-close timer
   useEffect(() => {
@@ -52,10 +53,15 @@ const EnhancedNotification = ({
     }
   }, [autoClose, persistent, type, read, id, onDelete]);
 
-  // Mark as read when interacted with
+  // Mark as read when interacted with (with throttling to prevent multiple calls)
   const handleRead = () => {
-    if (!read && onRead) {
+    if (!read && onRead && !readCalledRef.current) {
+      readCalledRef.current = true;
       onRead(id);
+      // Reset the flag after a short delay to allow future reads if needed
+      setTimeout(() => {
+        readCalledRef.current = false;
+      }, 100);
     }
   };
 

src/hooks/useAutoClaimManager.js

@@ -0,0 +1,32 @@
+/**
+ * React Hook for Auto-Claim Manager
+ * 
+ * Provides React hook interface for the AutoClaimManager class
+ */
+
+import { useEffect } from 'react';
+import { getAutoClaimManager } from '../utils/autoClaimManager';
+
+/**
+ * React hook for using auto-claim manager
+ */
+export const useAutoClaimManager = (wallet, connection) => {
+  const manager = getAutoClaimManager(wallet, connection);
+  
+  // Auto-start if enabled
+  useEffect(() => {
+    if (manager.getConfig().enabled && !manager.isRunning && wallet?.connected) {
+      manager.start();
+    }
+    
+    return () => {
+      if (manager.isRunning) {
+        manager.stop();
+      }
+    };
+  }, [manager, wallet?.connected]);
+  
+  return manager;
+};
+
+export default useAutoClaimManager;