fix: add missing useEffect dependencies in P2P components

web/src/components/p2p/InternalBalanceCard.tsx

@@ -1,4 +1,4 @@
-import { useState, useEffect } from 'react';
+import { useState, useEffect, useCallback } from 'react';
 import { useTranslation } from 'react-i18next';
 import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card';
 import { Button } from '@/components/ui/button';
@@ -27,7 +27,7 @@ export function InternalBalanceCard({ onDeposit, onWithdraw }: InternalBalanceCa
   const [isLoading, setIsLoading] = useState(true);
   const [isRefreshing, setIsRefreshing] = useState(false);
 
-  const fetchBalances = async () => {
+  const fetchBalances = useCallback(async () => {
     if (!userId) return;
     try {
       const data = await getInternalBalances(userId);
@@ -38,11 +38,11 @@ export function InternalBalanceCard({ onDeposit, onWithdraw }: InternalBalanceCa
       setIsLoading(false);
       setIsRefreshing(false);
     }
-  };
+  }, [userId]);
 
   useEffect(() => {
     fetchBalances();
-  }, [userId]);
+  }, [fetchBalances]);
 
   const handleRefresh = async () => {
     setIsRefreshing(true);

web/src/components/p2p/MerchantApplication.tsx

@@ -1,4 +1,4 @@
-import { useState, useEffect } from 'react';
+import { useState, useEffect, useCallback } from 'react';
 import { useTranslation } from 'react-i18next';
 import { supabase } from '@/lib/supabase';
 import { useP2PIdentity } from '@/contexts/P2PIdentityContext';
@@ -117,12 +117,7 @@ export function MerchantApplication() {
   const [selectedTier, setSelectedTier] = useState<MerchantTier | null>(null);
   const [applying, setApplying] = useState(false);
 
-  // Fetch data
+  const fetchData = useCallback(async () => {
-  useEffect(() => {
-    fetchData();
-  }, []);
-
-  const fetchData = async () => {
     setLoading(true);
     try {
       if (!userId) return;
@@ -172,7 +167,12 @@ export function MerchantApplication() {
     } finally {
       setLoading(false);
     }
-  };
+  }, [userId]);
+
+  // Fetch data
+  useEffect(() => {
+    fetchData();
+  }, [fetchData]);
 
   // Calculate progress for a requirement
   const calculateProgress = (current: number, required: number): number => {

web/src/components/p2p/WithdrawModal.tsx

@@ -1,4 +1,4 @@
-import { useState, useEffect } from 'react';
+import { useState, useEffect, useCallback } from 'react';
 import { useTranslation } from 'react-i18next';
 import {
   Dialog,
@@ -68,18 +68,7 @@ export function WithdrawModal({ isOpen, onClose, onSuccess }: WithdrawModalProps
   const NETWORK_FEE = 0.01;
   const MIN_WITHDRAWAL = 0.1;
 
-  // Fetch balances and pending requests on mount
+  const fetchData = useCallback(async () => {
-  useEffect(() => {
-    if (isOpen) {
-      fetchData();
-      // Pre-fill wallet address from connected account
-      if (selectedAccount?.address) {
-        setWalletAddress(selectedAccount.address);
-      }
-    }
-  }, [isOpen, selectedAccount]);
-
-  const fetchData = async () => {
     setLoading(true);
     try {
       if (!userId) return;
@@ -97,7 +86,18 @@ export function WithdrawModal({ isOpen, onClose, onSuccess }: WithdrawModalProps
     } finally {
       setLoading(false);
     }
-  };
+  }, [userId]);
+
+  // Fetch balances and pending requests on mount
+  useEffect(() => {
+    if (isOpen) {
+      fetchData();
+      // Pre-fill wallet address from connected account
+      if (selectedAccount?.address) {
+        setWalletAddress(selectedAccount.address);
+      }
+    }
+  }, [isOpen, selectedAccount, fetchData]);
 
   const resetModal = () => {
     setStep('form');