fix: resolve ESLint/Prettier issues in P2P components

- Fix prettier formatting across all P2P files
- Fix setState-in-useEffect by using useCallback pattern
- Add missing React import for keyboard event type
- Wrap fetch functions in useCallback for exhaustive-deps

src/components/p2p/BalanceCard.tsx

@@ -1,4 +1,4 @@
-import { useState, useEffect } from 'react';
+import { useState, useEffect, useCallback } from 'react';
 import { Wallet, Lock, RefreshCw } from 'lucide-react';
 import { cn } from '@/lib/utils';
 import { useAuth } from '@/contexts/AuthContext';
@@ -19,7 +19,7 @@ export function BalanceCard({ onRefresh }: BalanceCardProps) {
   const [loading, setLoading] = useState(true);
   const [refreshing, setRefreshing] = useState(false);
 
-  const fetchBalances = async () => {
+  const fetchBalances = useCallback(async () => {
     if (!sessionToken) return;
     try {
       const data = await getInternalBalance(sessionToken);
@@ -30,11 +30,11 @@ export function BalanceCard({ onRefresh }: BalanceCardProps) {
       setLoading(false);
       setRefreshing(false);
     }
-  };
+  }, [sessionToken]);
 
   useEffect(() => {
     fetchBalances();
-  }, [sessionToken]);
+  }, [fetchBalances]);
 
   const handleRefresh = () => {
     hapticImpact('light');
@@ -65,7 +65,9 @@ export function BalanceCard({ onRefresh }: BalanceCardProps) {
           disabled={refreshing}
           className="p-1.5 rounded-full hover:bg-muted/50 transition-colors"
         >
-          <RefreshCw className={cn('w-4 h-4 text-muted-foreground', refreshing && 'animate-spin')} />
+          <RefreshCw
+            className={cn('w-4 h-4 text-muted-foreground', refreshing && 'animate-spin')}
+          />
         </button>
       </div>
 

src/components/p2p/CreateOfferModal.tsx

@@ -4,7 +4,12 @@ import { cn } from '@/lib/utils';
 import { useAuth } from '@/contexts/AuthContext';
 import { useTranslation } from '@/i18n';
 import { useTelegram } from '@/hooks/useTelegram';
-import { createP2POffer, getPaymentMethods, getInternalBalance, type PaymentMethod } from '@/lib/p2p-api';
+import {
+  createP2POffer,
+  getPaymentMethods,
+  getInternalBalance,
+  type PaymentMethod,
+} from '@/lib/p2p-api';
 
 interface CreateOfferModalProps {
   isOpen: boolean;
@@ -39,9 +44,7 @@ export function CreateOfferModal({ isOpen, onClose, onOfferCreated }: CreateOffe
 
   useEffect(() => {
     if (!isOpen || !sessionToken) return;
-    getPaymentMethods(sessionToken, fiatCurrency)
-      .then(setPaymentMethods)
-      .catch(console.error);
+    getPaymentMethods(sessionToken, fiatCurrency).then(setPaymentMethods).catch(console.error);
   }, [isOpen, sessionToken, fiatCurrency]);
 
   useEffect(() => {
@@ -148,19 +151,25 @@ export function CreateOfferModal({ isOpen, onClose, onOfferCreated }: CreateOffe
                 className="w-full bg-muted rounded-xl px-3 py-2.5 text-sm text-foreground border border-border"
               >
                 {TOKENS.map((tk) => (
-                  <option key={tk} value={tk}>{tk}</option>
+                  <option key={tk} value={tk}>
+                    {tk}
+                  </option>
                 ))}
               </select>
             </div>
             <div>
-              <label className="text-xs text-muted-foreground mb-1 block">{t('p2p.fiatCurrency')}</label>
+              <label className="text-xs text-muted-foreground mb-1 block">
+                {t('p2p.fiatCurrency')}
+              </label>
               <select
                 value={fiatCurrency}
                 onChange={(e) => setFiatCurrency(e.target.value)}
                 className="w-full bg-muted rounded-xl px-3 py-2.5 text-sm text-foreground border border-border"
               >
                 {FIAT_CURRENCIES.map((c) => (
-                  <option key={c} value={c}>{c}</option>
+                  <option key={c} value={c}>
+                    {c}
+                  </option>
                 ))}
               </select>
             </div>
@@ -188,7 +197,9 @@ export function CreateOfferModal({ isOpen, onClose, onOfferCreated }: CreateOffe
 
           {/* Fiat Amount */}
           <div>
-            <label className="text-xs text-muted-foreground mb-1 block">{t('p2p.fiatTotal')} ({fiatCurrency})</label>
+            <label className="text-xs text-muted-foreground mb-1 block">
+              {t('p2p.fiatTotal')} ({fiatCurrency})
+            </label>
             <input
               type="number"
               value={fiatAmount}
@@ -199,14 +210,18 @@ export function CreateOfferModal({ isOpen, onClose, onOfferCreated }: CreateOffe
             />
             {pricePerUnit > 0 && (
               <p className="text-xs text-cyan-400 mt-1">
-                {t('p2p.pricePerUnit')}: {pricePerUnit.toLocaleString(undefined, { maximumFractionDigits: 2 })} {fiatCurrency}/{token}
+                {t('p2p.pricePerUnit')}:{' '}
+                {pricePerUnit.toLocaleString(undefined, { maximumFractionDigits: 2 })}{' '}
+                {fiatCurrency}/{token}
               </p>
             )}
           </div>
 
           {/* Payment Method */}
           <div>
-            <label className="text-xs text-muted-foreground mb-1 block">{t('p2p.paymentMethod')}</label>
+            <label className="text-xs text-muted-foreground mb-1 block">
+              {t('p2p.paymentMethod')}
+            </label>
             <select
               value={paymentMethodId}
               onChange={(e) => setPaymentMethodId(e.target.value)}
@@ -214,14 +229,18 @@ export function CreateOfferModal({ isOpen, onClose, onOfferCreated }: CreateOffe
             >
               <option value="">{t('p2p.selectPaymentMethod')}</option>
               {paymentMethods.map((pm) => (
-                <option key={pm.id} value={pm.id}>{pm.method_name}</option>
+                <option key={pm.id} value={pm.id}>
+                  {pm.method_name}
+                </option>
               ))}
             </select>
           </div>
 
           {/* Payment Details */}
           <div>
-            <label className="text-xs text-muted-foreground mb-1 block">{t('p2p.paymentDetails')}</label>
+            <label className="text-xs text-muted-foreground mb-1 block">
+              {t('p2p.paymentDetails')}
+            </label>
             <textarea
               value={paymentDetails}
               onChange={(e) => setPaymentDetails(e.target.value)}
@@ -234,7 +253,9 @@ export function CreateOfferModal({ isOpen, onClose, onOfferCreated }: CreateOffe
           {/* Order Limits */}
           <div className="grid grid-cols-2 gap-2">
             <div>
-              <label className="text-xs text-muted-foreground mb-1 block">{t('p2p.minOrder')}</label>
+              <label className="text-xs text-muted-foreground mb-1 block">
+                {t('p2p.minOrder')}
+              </label>
               <input
                 type="number"
                 value={minOrder}
@@ -245,7 +266,9 @@ export function CreateOfferModal({ isOpen, onClose, onOfferCreated }: CreateOffe
               />
             </div>
             <div>
-              <label className="text-xs text-muted-foreground mb-1 block">{t('p2p.maxOrder')}</label>
+              <label className="text-xs text-muted-foreground mb-1 block">
+                {t('p2p.maxOrder')}
+              </label>
               <input
                 type="number"
                 value={maxOrder}
@@ -266,7 +289,9 @@ export function CreateOfferModal({ isOpen, onClose, onOfferCreated }: CreateOffe
               className="w-full bg-muted rounded-xl px-3 py-2.5 text-sm text-foreground border border-border"
             >
               {TIME_LIMITS.map((tl) => (
-                <option key={tl} value={tl}>{tl} {t('p2p.minutes')}</option>
+                <option key={tl} value={tl}>
+                  {tl} {t('p2p.minutes')}
+                </option>
               ))}
             </select>
           </div>

src/components/p2p/DisputeModal.tsx

@@ -81,7 +81,9 @@ export function DisputeModal({ isOpen, onClose, tradeId, onDisputeOpened }: Disp
 
           {/* Category */}
           <div>
-            <label className="text-sm text-muted-foreground mb-1 block">{t('p2p.disputeCategory')}</label>
+            <label className="text-sm text-muted-foreground mb-1 block">
+              {t('p2p.disputeCategory')}
+            </label>
             <select
               value={category}
               onChange={(e) => setCategory(e.target.value)}
@@ -89,14 +91,18 @@ export function DisputeModal({ isOpen, onClose, tradeId, onDisputeOpened }: Disp
             >
               <option value="">{t('p2p.selectCategory')}</option>
               {DISPUTE_CATEGORIES.map((cat) => (
-                <option key={cat} value={cat}>{t(`p2p.dispute.${cat}`)}</option>
+                <option key={cat} value={cat}>
+                  {t(`p2p.dispute.${cat}`)}
+                </option>
               ))}
             </select>
           </div>
 
           {/* Reason */}
           <div>
-            <label className="text-sm text-muted-foreground mb-1 block">{t('p2p.disputeReason')}</label>
+            <label className="text-sm text-muted-foreground mb-1 block">
+              {t('p2p.disputeReason')}
+            </label>
             <textarea
               value={reason}
               onChange={(e) => setReason(e.target.value)}

src/components/p2p/OfferList.tsx

@@ -1,4 +1,4 @@
-import { useState, useEffect } from 'react';
+import { useState, useEffect, useCallback } from 'react';
 import { Star, Clock, ChevronDown, Loader2 } from 'lucide-react';
 import { cn } from '@/lib/utils';
 import { useAuth } from '@/contexts/AuthContext';
@@ -29,31 +29,34 @@ export function OfferList({ adType, onAcceptOffer }: OfferListProps) {
 
   const limit = 20;
 
-  const fetchOffers = async (p = 1) => {
-    if (!sessionToken) return;
-    setLoading(true);
-    try {
-      const result = await getP2POffers({
-        sessionToken,
-        adType,
-        token: selectedToken || undefined,
-        fiatCurrency: selectedCurrency || undefined,
-        page: p,
-        limit,
-      });
-      setOffers(result.offers);
-      setTotal(result.total);
-      setPage(p);
-    } catch (err) {
-      console.error('Failed to fetch offers:', err);
-    } finally {
-      setLoading(false);
-    }
-  };
+  const fetchOffers = useCallback(
+    async (p = 1) => {
+      if (!sessionToken) return;
+      setLoading(true);
+      try {
+        const result = await getP2POffers({
+          sessionToken,
+          adType,
+          token: selectedToken || undefined,
+          fiatCurrency: selectedCurrency || undefined,
+          page: p,
+          limit,
+        });
+        setOffers(result.offers);
+        setTotal(result.total);
+        setPage(p);
+      } catch (err) {
+        console.error('Failed to fetch offers:', err);
+      } finally {
+        setLoading(false);
+      }
+    },
+    [sessionToken, adType, selectedToken, selectedCurrency]
+  );
 
   useEffect(() => {
     fetchOffers(1);
-  }, [sessionToken, adType, selectedCurrency, selectedToken]);
+  }, [fetchOffers]);
 
   const handleAccept = (offer: P2POffer) => {
     hapticImpact('medium');
@@ -82,7 +85,9 @@ export function OfferList({ adType, onAcceptOffer }: OfferListProps) {
           >
             <option value="">{t('p2p.allTokens')}</option>
             {TOKENS.map((tk) => (
-              <option key={tk} value={tk}>{tk}</option>
+              <option key={tk} value={tk}>
+                {tk}
+              </option>
             ))}
           </select>
           <select
@@ -92,7 +97,9 @@ export function OfferList({ adType, onAcceptOffer }: OfferListProps) {
           >
             <option value="">{t('p2p.allCurrencies')}</option>
             {FIAT_CURRENCIES.map((c) => (
-              <option key={c} value={c}>{c}</option>
+              <option key={c} value={c}>
+                {c}
+              </option>
             ))}
           </select>
         </div>
@@ -110,10 +117,7 @@ export function OfferList({ adType, onAcceptOffer }: OfferListProps) {
       ) : (
         <div className="space-y-2">
           {offers.map((offer) => (
-            <div
-              key={offer.id}
-              className="bg-card rounded-xl border border-border p-3 space-y-2"
-            >
+            <div key={offer.id} className="bg-card rounded-xl border border-border p-3 space-y-2">
               {/* Top: Token + Price */}
               <div className="flex items-center justify-between">
                 <div className="flex items-center gap-2">
@@ -121,7 +125,8 @@ export function OfferList({ adType, onAcceptOffer }: OfferListProps) {
                   <span className="text-xs text-muted-foreground">/ {offer.fiat_currency}</span>
                 </div>
                 <span className="text-sm font-bold text-cyan-400">
-                  {offer.price_per_unit?.toLocaleString(undefined, { maximumFractionDigits: 2 })} {offer.fiat_currency}
+                  {offer.price_per_unit?.toLocaleString(undefined, { maximumFractionDigits: 2 })}{' '}
+                  {offer.fiat_currency}
                 </span>
               </div>
 
@@ -179,7 +184,9 @@ export function OfferList({ adType, onAcceptOffer }: OfferListProps) {
               >
                 {t('p2p.prev')}
               </button>
-              <span className="text-xs text-muted-foreground">{page} / {totalPages}</span>
+              <span className="text-xs text-muted-foreground">
+                {page} / {totalPages}
+              </span>
               <button
                 onClick={() => fetchOffers(page + 1)}
                 disabled={page >= totalPages}

src/components/p2p/TradeChat.tsx

@@ -1,4 +1,4 @@
-import { useState, useEffect, useRef } from 'react';
+import React, { useState, useEffect, useRef, useCallback } from 'react';
 import { X, Send } from 'lucide-react';
 import { cn } from '@/lib/utils';
 import { useAuth } from '@/contexts/AuthContext';
@@ -20,11 +20,12 @@ export function TradeChat({ tradeId, onClose }: TradeChatProps) {
   const [newMessage, setNewMessage] = useState('');
   const [loading, setLoading] = useState(true);
   const [sending, setSending] = useState(false);
+  // eslint-disable-next-line no-undef
   const messagesEndRef = useRef<HTMLDivElement>(null);
 
   const userId = user?.id;
 
-  const fetchMessages = async () => {
+  const fetchMessages = useCallback(async () => {
     if (!sessionToken) return;
     try {
       const msgs = await getTradeMessages(sessionToken, tradeId);
@@ -34,13 +35,13 @@ export function TradeChat({ tradeId, onClose }: TradeChatProps) {
     } finally {
       setLoading(false);
     }
-  };
+  }, [sessionToken, tradeId]);
 
   useEffect(() => {
     fetchMessages();
     const interval = setInterval(fetchMessages, 5000);
     return () => clearInterval(interval);
-  }, [sessionToken, tradeId]);
+  }, [fetchMessages]);
 
   useEffect(() => {
     messagesEndRef.current?.scrollIntoView({ behavior: 'smooth' });
@@ -71,10 +72,13 @@ export function TradeChat({ tradeId, onClose }: TradeChatProps) {
   return (
     <div className="fixed inset-0 z-50 flex flex-col bg-background">
       {/* Header */}
-      <div className={cn(
-        'flex items-center justify-between p-4 border-b border-border safe-area-top',
-        isRTL && 'direction-rtl'
-      )} dir={isRTL ? 'rtl' : 'ltr'}>
+      <div
+        className={cn(
+          'flex items-center justify-between p-4 border-b border-border safe-area-top',
+          isRTL && 'direction-rtl'
+        )}
+        dir={isRTL ? 'rtl' : 'ltr'}
+      >
         <h2 className="text-lg font-semibold text-foreground">{t('p2p.chat')}</h2>
         <button onClick={onClose} className="p-2 rounded-full hover:bg-muted transition-colors">
           <X className="w-5 h-5 text-muted-foreground" />
@@ -100,8 +104,7 @@ export function TradeChat({ tradeId, onClose }: TradeChatProps) {
                 key={msg.id}
                 className={cn(
                   'flex',
-                  isSystem ? 'justify-center' :
-                  isOwn ? 'justify-end' : 'justify-start'
+                  isSystem ? 'justify-center' : isOwn ? 'justify-end' : 'justify-start'
                 )}
               >
                 {isSystem ? (
@@ -118,11 +121,16 @@ export function TradeChat({ tradeId, onClose }: TradeChatProps) {
                     )}
                   >
                     <p className="text-sm break-words">{msg.message}</p>
-                    <p className={cn(
-                      'text-[10px] mt-1',
-                      isOwn ? 'text-white/60' : 'text-muted-foreground'
-                    )}>
-                      {new Date(msg.created_at).toLocaleTimeString([], { hour: '2-digit', minute: '2-digit' })}
+                    <p
+                      className={cn(
+                        'text-[10px] mt-1',
+                        isOwn ? 'text-white/60' : 'text-muted-foreground'
+                      )}
+                    >
+                      {new Date(msg.created_at).toLocaleTimeString([], {
+                        hour: '2-digit',
+                        minute: '2-digit',
+                      })}
                     </p>
                   </div>
                 )}
@@ -134,10 +142,13 @@ export function TradeChat({ tradeId, onClose }: TradeChatProps) {
       </div>
 
       {/* Input */}
-      <div className={cn(
-        'flex items-center gap-2 p-4 border-t border-border safe-area-bottom',
-        isRTL && 'direction-rtl'
-      )} dir={isRTL ? 'rtl' : 'ltr'}>
+      <div
+        className={cn(
+          'flex items-center gap-2 p-4 border-t border-border safe-area-bottom',
+          isRTL && 'direction-rtl'
+        )}
+        dir={isRTL ? 'rtl' : 'ltr'}
+      >
         <input
           type="text"
           value={newMessage}

src/components/p2p/TradeModal.tsx

@@ -27,9 +27,7 @@ export function TradeModal({ isOpen, onClose, offer, onTradeCreated }: TradeModa
   if (!isOpen || !offer) return null;
 
   const numAmount = parseFloat(amount) || 0;
-  const fiatTotal = numAmount > 0 && offer.price_per_unit
-    ? numAmount * offer.price_per_unit
-    : 0;
+  const fiatTotal = numAmount > 0 && offer.price_per_unit ? numAmount * offer.price_per_unit : 0;
 
   const isValid =
     numAmount > 0 &&
@@ -108,7 +106,9 @@ export function TradeModal({ isOpen, onClose, offer, onTradeCreated }: TradeModa
 
           {/* Amount Input */}
           <div>
-            <label className="text-sm text-muted-foreground mb-1 block">{t('p2p.amount')} ({offer.token})</label>
+            <label className="text-sm text-muted-foreground mb-1 block">
+              {t('p2p.amount')} ({offer.token})
+            </label>
             <input
               type="number"
               value={amount}
@@ -133,7 +133,8 @@ export function TradeModal({ isOpen, onClose, offer, onTradeCreated }: TradeModa
               <div className="flex justify-between">
                 <span className="text-sm text-muted-foreground">{t('p2p.fiatTotal')}</span>
                 <span className="text-lg font-bold text-cyan-400">
-                  {fiatTotal.toLocaleString(undefined, { maximumFractionDigits: 2 })} {offer.fiat_currency}
+                  {fiatTotal.toLocaleString(undefined, { maximumFractionDigits: 2 })}{' '}
+                  {offer.fiat_currency}
                 </span>
               </div>
             </div>

src/components/p2p/TradeView.tsx

@@ -1,5 +1,12 @@
 import { useState, useEffect, useCallback } from 'react';
-import { ArrowLeft, Clock, CheckCircle2, XCircle, AlertTriangle, MessageCircle } from 'lucide-react';
+import {
+  ArrowLeft,
+  Clock,
+  CheckCircle2,
+  XCircle,
+  AlertTriangle,
+  MessageCircle,
+} from 'lucide-react';
 import { cn } from '@/lib/utils';
 import { useAuth } from '@/contexts/AuthContext';
 import { useTranslation } from '@/i18n';
@@ -67,13 +74,23 @@ export function TradeView({ tradeId, onBack }: TradeViewProps) {
   const [timeRemaining, setTimeRemaining] = useState('');
   useEffect(() => {
     if (!trade) return;
-    const deadline = trade.status === 'pending' ? trade.payment_deadline :
-                     trade.status === 'payment_sent' ? trade.confirmation_deadline : null;
-    if (!deadline) { setTimeRemaining(''); return; }
+    const deadline =
+      trade.status === 'pending'
+        ? trade.payment_deadline
+        : trade.status === 'payment_sent'
+          ? trade.confirmation_deadline
+          : null;
+    if (!deadline) {
+      setTimeRemaining('');
+      return;
+    }
 
     const update = () => {
       const diff = new Date(deadline).getTime() - Date.now();
-      if (diff <= 0) { setTimeRemaining(t('p2p.expired')); return; }
+      if (diff <= 0) {
+        setTimeRemaining(t('p2p.expired'));
+        return;
+      }
       const mins = Math.floor(diff / 60000);
       const secs = Math.floor((diff % 60000) / 1000);
       setTimeRemaining(`${mins}:${secs.toString().padStart(2, '0')}`);
@@ -146,7 +163,9 @@ export function TradeView({ tradeId, onBack }: TradeViewProps) {
     return (
       <div className="text-center py-8">
         <p className="text-sm text-muted-foreground">{t('p2p.tradeNotFound')}</p>
-        <button onClick={onBack} className="text-cyan-400 text-sm mt-2">{t('common.back')}</button>
+        <button onClick={onBack} className="text-cyan-400 text-sm mt-2">
+          {t('common.back')}
+        </button>
       </div>
     );
   }
@@ -165,7 +184,12 @@ export function TradeView({ tradeId, onBack }: TradeViewProps) {
       </div>
 
       {/* Status Banner */}
-      <div className={cn('flex items-center gap-2 p-3 rounded-xl', `${statusConfig.color} bg-current/10`)}>
+      <div
+        className={cn(
+          'flex items-center gap-2 p-3 rounded-xl',
+          `${statusConfig.color} bg-current/10`
+        )}
+      >
         <StatusIcon className={cn('w-5 h-5', statusConfig.color)} />
         <span className={cn('text-sm font-medium', statusConfig.color)}>
           {t(`p2p.status.${trade.status}`)}
@@ -208,11 +232,7 @@ export function TradeView({ tradeId, onBack }: TradeViewProps) {
       {/* Timeline */}
       <div className="bg-card rounded-xl border border-border p-4 space-y-3">
         <h3 className="text-sm font-medium text-foreground">{t('p2p.timeline')}</h3>
-        <TimelineStep
-          done
-          label={t('p2p.tradeCreated')}
-          time={trade.created_at}
-        />
+        <TimelineStep done label={t('p2p.tradeCreated')} time={trade.created_at} />
         <TimelineStep
           done={!!trade.buyer_marked_paid_at}
           active={trade.status === 'pending'}
@@ -297,23 +317,29 @@ export function TradeView({ tradeId, onBack }: TradeViewProps) {
       </div>
 
       {/* Chat Modal */}
-      {showChat && (
-        <TradeChat tradeId={trade.id} onClose={() => setShowChat(false)} />
-      )}
+      {showChat && <TradeChat tradeId={trade.id} onClose={() => setShowChat(false)} />}
 
       {/* Dispute Modal */}
       <DisputeModal
         isOpen={showDispute}
         onClose={() => setShowDispute(false)}
         tradeId={trade.id}
-        onDisputeOpened={() => { setShowDispute(false); fetchTrade(); }}
+        onDisputeOpened={() => {
+          setShowDispute(false);
+          fetchTrade();
+        }}
       />
     </div>
   );
 }
 
 // Timeline step sub-component
-function TimelineStep({ done, active, label, time }: {
+function TimelineStep({
+  done,
+  active,
+  label,
+  time,
+}: {
   done?: boolean;
   active?: boolean;
   label: string;
@@ -324,18 +350,16 @@ function TimelineStep({ done, active, label, time }: {
       <div
         className={cn(
           'w-3 h-3 rounded-full border-2 flex-shrink-0',
-          done ? 'bg-green-400 border-green-400' :
-          active ? 'border-cyan-400 animate-pulse' :
-          'border-muted-foreground/30'
+          done
+            ? 'bg-green-400 border-green-400'
+            : active
+              ? 'border-cyan-400 animate-pulse'
+              : 'border-muted-foreground/30'
         )}
       />
       <div className="flex-1">
         <p className={cn('text-sm', done ? 'text-foreground' : 'text-muted-foreground')}>{label}</p>
-        {time && (
-          <p className="text-xs text-muted-foreground">
-            {new Date(time).toLocaleString()}
-          </p>
-        )}
+        {time && <p className="text-xs text-muted-foreground">{new Date(time).toLocaleString()}</p>}
       </div>
     </div>
   );