Fix critical bugs: division by zero, infinite re-renders, mock data, and memory leaks

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

Author: Copilot

src/components/UserProfile.js

@@ -173,17 +173,20 @@ const UserProfile = ({ wallet: walletProp, network, initialTab = 'overview', onT
     }
   }, [isWalletConnected, reputationLoading, historyLoading]);
 
-  // Only fetch data when wallet or network changes
+  // Only fetch data when wallet connection status changes (not when loading states change)
   useEffect(() => {
     // Extra protection in case fetchProfileData changes between renders
     try {
-      fetchProfileData();
+      if (isWalletConnected) {
+        // Call fetchProfileData directly to avoid dependency warning
+        fetchProfileData();
+      }
     } catch (err) {
       console.error('[UserProfile] Error in fetchProfileData effect:', err);
       setError('An error occurred while loading your profile');
       setLoading(false);
     }
-  }, [fetchProfileData]);
+  }, [isWalletConnected, fetchProfileData]); // Include fetchProfileData to fix lint warning
 
   // Handle settings update - optimized with useCallback
   const handleSaveSettings = useCallback((newSettings) => {

src/components/UserStatistics.js

@@ -216,7 +216,7 @@ const UserStatistics = () => {
           {renderStatCard(
             'Completed Trades',
             completedTrades.length,
-            `${completedTrades.length > 0 ? ((completedTrades.length / safeHistory.length) * 100).toFixed(1) : 0}% completion rate`,
+            `${completedTrades.length > 0 && safeHistory.length > 0 ? ((completedTrades.length / safeHistory.length) * 100).toFixed(1) : 0}% completion rate`,
             'Successfully completed trades',
             'green'
           )}

src/hooks/useOnChainData.js

@@ -13,7 +13,7 @@ export const useOffers = (program, filters = {}) => {
   const [loading, setLoading] = useState(true);
   const [error, setError] = useState(null);
 
-  const fetchOffers = useCallback(async () => {
+  const fetchOffers = useCallback(async (abortSignal) => {
     if (!program) {
       setOffers([]);
       setLoading(false);
@@ -26,9 +26,21 @@ export const useOffers = (program, filters = {}) => {
     try {
       logger.info('Fetching offers from blockchain...');
 
+      // Check if operation was aborted
+      if (abortSignal?.aborted) {
+        logger.info('Fetch offers operation aborted');
+        return;
+      }
+      
       // Fetch all offer accounts
       const offerAccounts = await program.account.offer.all();
 
+      // Check again after async operation
+      if (abortSignal?.aborted) {
+        logger.info('Fetch offers operation aborted after blockchain query');
+        return;
+      }
+      
       const processedOffers = offerAccounts.map(({ account, publicKey }) => ({
         id: publicKey.toString(),
         seller: account.seller.toString(),
@@ -72,26 +84,48 @@ export const useOffers = (program, filters = {}) => {
         filteredOffers = filteredOffers.filter(offer => offer.solAmount <= filters.maxAmount);
       }
 
+      // Final abort check before setting state
+      if (abortSignal?.aborted) {
+        logger.info('Fetch offers operation aborted before setting state');
+        return;
+      }
+
       logger.info(`Fetched ${filteredOffers.length} offers from blockchain`, { 
         total: offerAccounts.length,
         filtered: filteredOffers.length 
       });
 
       setOffers(filteredOffers);
     } catch (err) {
+      if (abortSignal?.aborted) {
+        logger.info('Fetch offers operation aborted due to error:', err.message);
+        return;
+      }
       logger.error('Error fetching offers:', err);
       setError(`Failed to fetch offers: ${err.message}`);
       setOffers([]);
     } finally {
-      setLoading(false);
+      if (!abortSignal?.aborted) {
+        setLoading(false);
+      }
     }
   }, [program, filters]);
 
   useEffect(() => {
+    const abortController = new AbortController();
+    fetchOffers(abortController.signal);
+    
+    // Cleanup function
+    return () => {
+      abortController.abort();
+    };
+  }, [fetchOffers]);
+
+  const refetchOffers = useCallback(() => {
     fetchOffers();
   }, [fetchOffers]);
 
-  return { offers, loading, error, refetch: fetchOffers };
+  return { offers, loading, error, refetch: refetchOffers };
 };
 
 /**
@@ -175,10 +209,20 @@ export const useUserReputation = (program, userPublicKey) => {
   }, [program, userPublicKey]);
 
   useEffect(() => {
+    const abortController = new AbortController();
+    fetchReputation(abortController.signal);
+    
+    // Cleanup function
+    return () => {
+      abortController.abort();
+    };
+  }, [fetchReputation]);
+
+  const refetchReputation = useCallback(() => {
     fetchReputation();
   }, [fetchReputation]);
 
-  return { reputation, loading, error, refetch: fetchReputation };
+  return { reputation, loading, error, refetch: refetchReputation };
 };
 
 /**

src/utils/rewardQueries.js

@@ -143,18 +143,18 @@ export const fetchUserRewards = async (userPublicKey) => {
     }
 
     // Parse the account data (simplified - in reality would use Anchor IDL)
-    // For now, return mock data that represents realistic values with proper Date objects
-    const mockData = {
-      totalEarned: Math.floor(Math.random() * 2000) + 500,
-      totalClaimed: Math.floor(Math.random() * 1000) + 200,
-      unclaimedBalance: Math.floor(Math.random() * 500) + 50,
-      tradingVolume: Math.floor((Math.random() * 20 + 5) * CONVERSION_HELPERS.solToLamports(1)), // SOL to lamports
-      governanceVotes: Math.floor(Math.random() * 10) + 1,
-      lastTradeReward: new Date(Date.now() - Math.random() * 86400000 * 7), // Last week
-      lastVoteReward: new Date(Date.now() - Math.random() * 86400000 * 14), // Last 2 weeks
+    // Return default values instead of random mock data
+    const defaultRewardData = {
+      totalEarned: 0, // Start with 0 for new users
+      totalClaimed: 0,
+      unclaimedBalance: 0,
+      tradingVolume: 0,
+      governanceVotes: 0,
+      lastTradeReward: null, // No rewards initially
+      lastVoteReward: null,
     };
 
-    return mockData;
+    return defaultRewardData;
   } catch (error) {
     console.error('Error fetching user rewards:', error);
     throw new Error(`Failed to fetch user rewards: ${error.message}`);
@@ -170,8 +170,8 @@ export const fetchUserRewards = async (userPublicKey) => {
 export const fetchUserTokenBalance = async (userPublicKey, mintAddress) => {
   try {
     if (!getConnection) {
-      // Mock balance for test environment
-      return Math.floor(Math.random() * 1000);
+      // Return 0 balance for test environment instead of random
+      return 0;
     }
 
     const connection = getConnection();