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
2026-04-21 22:27:55 +00:00 · 2026-02-26 19:03:59 +03:00
parent 31e768de45
commit 0b72cc4a4d
12 changed files with 322 additions and 188 deletions
@@ -1,12 +1,12 @@
 {
  "name": "pezkuwi-telegram-miniapp",
-  "version": "1.0.193",
+  "version": "1.0.221",
  "lockfileVersion": 3,
  "requires": true,
  "packages": {
    "": {
      "name": "pezkuwi-telegram-miniapp",
-      "version": "1.0.193",
+      "version": "1.0.221",
      "license": "MIT",
      "dependencies": {
        "@pezkuwi/api": "^16.5.36",
@@ -53,7 +53,7 @@
        "prettier": "^3.8.1",
        "tailwindcss": "^3.4.11",
        "tronweb": "^6.2.0",
-        "typescript": "^5.5.3",
+        "typescript": "^5.9.3",
        "vite": "^5.4.1",
        "vitest": "^4.0.18"
      },
@@ -1,6 +1,6 @@
 {
  "name": "pezkuwi-telegram-miniapp",
-  "version": "1.0.224",
+  "version": "1.0.225",
  "type": "module",
  "description": "Pezkuwichain Telegram Mini App - Forum, Announcements, Rewards",
  "author": "Pezkuwichain Team",
@@ -81,7 +81,7 @@
    "prettier": "^3.8.1",
    "tailwindcss": "^3.4.11",
    "tronweb": "^6.2.0",
-    "typescript": "^5.5.3",
+    "typescript": "^5.9.3",
    "vite": "^5.4.1",
    "vitest": "^4.0.18"
  },
@@ -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>

@@ -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>
@@ -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)}
@@ -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}
@@ -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}
@@ -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>
@@ -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>
  );
@@ -126,9 +126,7 @@ async function callEdgeFunction<T>(

 // ─── Balance ─────────────────────────────────────────────────

-export async function getInternalBalance(
-  sessionToken: string
-): Promise<InternalBalance[]> {
+export async function getInternalBalance(sessionToken: string): Promise<InternalBalance[]> {
  const result = await callEdgeFunction<{ success: boolean; balances: InternalBalance[] }>(
    'get-internal-balance',
    { sessionToken }
@@ -172,14 +170,18 @@ export async function getP2POffers(params: GetOffersParams): Promise<GetOffersRe
    'get-p2p-offers',
    params as unknown as Record<string, unknown>
  );
-  return { offers: result.offers || [], total: result.total || 0, page: result.page || 1, limit: result.limit || 20 };
+  return {
+    offers: result.offers || [],
+    total: result.total || 0,
+    page: result.page || 1,
+    limit: result.limit || 20,
+  };
 }

 export async function getMyOffers(sessionToken: string): Promise<P2POffer[]> {
-  const result = await callEdgeFunction<{ success: boolean; offers: P2POffer[] }>(
-    'get-my-offers',
-    { sessionToken }
-  );
+  const result = await callEdgeFunction<{ success: boolean; offers: P2POffer[] }>('get-my-offers', {
+    sessionToken,
+  });
  return result.offers || [];
 }

@@ -192,7 +194,9 @@ interface AcceptOfferParams {
  buyerWallet: string;
 }

-export async function acceptP2POffer(params: AcceptOfferParams): Promise<{ tradeId: string; trade: P2PTrade }> {
+export async function acceptP2POffer(
+  params: AcceptOfferParams
+): Promise<{ tradeId: string; trade: P2PTrade }> {
  return callEdgeFunction<{ success: boolean; tradeId: string; trade: P2PTrade }>(
    'accept-p2p-offer',
    params as unknown as Record<string, unknown>
@@ -215,7 +219,9 @@ interface CreateOfferParams {
  adType?: 'buy' | 'sell';
 }

-export async function createP2POffer(params: CreateOfferParams): Promise<{ offerId: string; offer: P2POffer }> {
+export async function createP2POffer(
+  params: CreateOfferParams
+): Promise<{ offerId: string; offer: P2POffer }> {
  const result = await callEdgeFunction<{ success: boolean; offer_id: string; offer: P2POffer }>(
    'create-offer-telegram',
    params as unknown as Record<string, unknown>
@@ -239,26 +245,37 @@ export async function getP2PTrades(
 // ─── Trade Actions ───────────────────────────────────────────

 export async function markTradePaid(sessionToken: string, tradeId: string): Promise<P2PTrade> {
-  const result = await callEdgeFunction<{ success: boolean; trade: P2PTrade }>(
-    'trade-action',
-    { sessionToken, tradeId, action: 'mark_paid' }
-  );
+  const result = await callEdgeFunction<{ success: boolean; trade: P2PTrade }>('trade-action', {
+    sessionToken,
+    tradeId,
+    action: 'mark_paid',
+  });
  return result.trade;
 }

-export async function confirmTradePayment(sessionToken: string, tradeId: string): Promise<P2PTrade> {
-  const result = await callEdgeFunction<{ success: boolean; trade: P2PTrade }>(
-    'trade-action',
-    { sessionToken, tradeId, action: 'confirm' }
-  );
+export async function confirmTradePayment(
+  sessionToken: string,
+  tradeId: string
+): Promise<P2PTrade> {
+  const result = await callEdgeFunction<{ success: boolean; trade: P2PTrade }>('trade-action', {
+    sessionToken,
+    tradeId,
+    action: 'confirm',
+  });
  return result.trade;
 }

-export async function cancelTrade(sessionToken: string, tradeId: string, reason?: string): Promise<P2PTrade> {
-  const result = await callEdgeFunction<{ success: boolean; trade: P2PTrade }>(
-    'trade-action',
-    { sessionToken, tradeId, action: 'cancel', payload: { reason } }
-  );
+export async function cancelTrade(
+  sessionToken: string,
+  tradeId: string,
+  reason?: string
+): Promise<P2PTrade> {
+  const result = await callEdgeFunction<{ success: boolean; trade: P2PTrade }>('trade-action', {
+    sessionToken,
+    tradeId,
+    action: 'cancel',
+    payload: { reason },
+  });
  return result.trade;
 }

@@ -268,10 +285,12 @@ export async function rateTrade(
  rating: number,
  review?: string
 ): Promise<void> {
-  await callEdgeFunction<{ success: boolean }>(
-    'trade-action',
-    { sessionToken, tradeId, action: 'rate', payload: { rating, review } }
-  );
+  await callEdgeFunction<{ success: boolean }>('trade-action', {
+    sessionToken,
+    tradeId,
+    action: 'rate',
+    payload: { rating, review },
+  });
 }

 // ─── Messages ────────────────────────────────────────────────
@@ -281,10 +300,12 @@ export async function sendTradeMessage(
  tradeId: string,
  message: string
 ): Promise<string> {
-  const result = await callEdgeFunction<{ success: boolean; messageId: string }>(
-    'p2p-messages',
-    { sessionToken, action: 'send', tradeId, message }
-  );
+  const result = await callEdgeFunction<{ success: boolean; messageId: string }>('p2p-messages', {
+    sessionToken,
+    action: 'send',
+    tradeId,
+    message,
+  });
  return result.messageId;
 }

@@ -307,10 +328,13 @@ export async function openDispute(
  reason: string,
  category: string
 ): Promise<P2PDispute> {
-  const result = await callEdgeFunction<{ success: boolean; dispute: P2PDispute }>(
-    'p2p-dispute',
-    { sessionToken, action: 'open', tradeId, reason, category }
-  );
+  const result = await callEdgeFunction<{ success: boolean; dispute: P2PDispute }>('p2p-dispute', {
+    sessionToken,
+    action: 'open',
+    tradeId,
+    reason,
+    category,
+  });
  return result.dispute;
 }

@@ -321,8 +345,12 @@ export async function addDisputeEvidence(
  evidenceType: string,
  description?: string
 ): Promise<void> {
-  await callEdgeFunction<{ success: boolean }>(
-    'p2p-dispute',
-    { sessionToken, action: 'add_evidence', tradeId, evidenceUrl, evidenceType, description }
-  );
+  await callEdgeFunction<{ success: boolean }>('p2p-dispute', {
+    sessionToken,
+    action: 'add_evidence',
+    tradeId,
+    evidenceUrl,
+    evidenceType,
+    description,
+  });
 }
@@ -40,23 +40,33 @@ export function P2PSection() {

  const fetchMyTrades = useCallback(async () => {
    if (!sessionToken) return;
+    setMyDataLoading(true);
    try {
      const trades = await getP2PTrades(sessionToken, 'all');
      setMyTrades(trades);
    } catch (err) {
      console.error('Failed to fetch my trades:', err);
+    } finally {
+      setMyDataLoading(false);
    }
  }, [sessionToken]);

+  const fetchMyOffersFull = useCallback(async () => {
+    setMyDataLoading(true);
+    try {
+      await fetchMyOffers();
+    } finally {
+      setMyDataLoading(false);
+    }
+  }, [fetchMyOffers]);
+
  useEffect(() => {
    if (activeTab === 'myAds') {
-      setMyDataLoading(true);
-      fetchMyOffers().finally(() => setMyDataLoading(false));
+      fetchMyOffersFull();
    } else if (activeTab === 'myTrades') {
-      setMyDataLoading(true);
-      fetchMyTrades().finally(() => setMyDataLoading(false));
+      fetchMyTrades();
    }
-  }, [activeTab, fetchMyOffers, fetchMyTrades]);
+  }, [activeTab, fetchMyOffersFull, fetchMyTrades]);

  const handleTabChange = (tab: Tab) => {
    hapticImpact('light');
@@ -81,10 +91,7 @@ export function P2PSection() {
  if (activeTradeId) {
    return (
      <div className="h-full overflow-y-auto p-4 safe-area-top">
-        <TradeView
-          tradeId={activeTradeId}
-          onBack={() => setActiveTradeId(null)}
-        />
+        <TradeView tradeId={activeTradeId} onBack={() => setActiveTradeId(null)} />
      </div>
    );
  }
@@ -98,13 +105,21 @@ export function P2PSection() {

  const statusColor = (s: string) => {
    switch (s) {
-      case 'open': return 'text-green-400';
-      case 'pending': return 'text-amber-400';
-      case 'payment_sent': return 'text-blue-400';
-      case 'completed': return 'text-green-400';
-      case 'cancelled': case 'refunded': return 'text-red-400';
-      case 'disputed': return 'text-orange-400';
-      default: return 'text-muted-foreground';
+      case 'open':
+        return 'text-green-400';
+      case 'pending':
+        return 'text-amber-400';
+      case 'payment_sent':
+        return 'text-blue-400';
+      case 'completed':
+        return 'text-green-400';
+      case 'cancelled':
+      case 'refunded':
+        return 'text-red-400';
+      case 'disputed':
+        return 'text-orange-400';
+      default:
+        return 'text-muted-foreground';
    }
  };

@@ -118,7 +133,10 @@ export function P2PSection() {
        <div className="flex items-center justify-between">
          <h1 className="text-xl font-bold text-foreground">{t('p2p.title')}</h1>
          <button
-            onClick={() => { hapticImpact('medium'); setShowCreateOffer(true); }}
+            onClick={() => {
+              hapticImpact('medium');
+              setShowCreateOffer(true);
+            }}
            className="flex items-center gap-1 px-3 py-1.5 bg-cyan-500 hover:bg-cyan-600 text-white text-sm font-medium rounded-lg transition-colors"
          >
            <Plus className="w-4 h-4" />
@@ -137,9 +155,7 @@ export function P2PSection() {
              onClick={() => handleTabChange(tab.id)}
              className={cn(
                'flex-1 py-2 text-xs font-medium rounded-lg transition-colors',
-                activeTab === tab.id
-                  ? 'bg-card text-foreground shadow-sm'
-                  : 'text-muted-foreground'
+                activeTab === tab.id ? 'bg-card text-foreground shadow-sm' : 'text-muted-foreground'
              )}
            >
              {tab.label}
@@ -159,8 +175,8 @@ export function P2PSection() {
        )}

        {/* My Ads */}
-        {activeTab === 'myAds' && (
-          myDataLoading ? (
+        {activeTab === 'myAds' &&
+          (myDataLoading ? (
            <div className="flex items-center justify-center py-8">
              <Loader2 className="w-6 h-6 text-primary animate-spin" />
            </div>
@@ -177,13 +193,20 @@ export function P2PSection() {
          ) : (
            <div className="space-y-2">
              {myOffers.map((offer) => (
-                <div key={offer.id} className="bg-card rounded-xl border border-border p-3 space-y-1">
+                <div
+                  key={offer.id}
+                  className="bg-card rounded-xl border border-border p-3 space-y-1"
+                >
                  <div className="flex items-center justify-between">
                    <div className="flex items-center gap-2">
-                      <span className={cn(
-                        'text-xs font-medium px-2 py-0.5 rounded-full',
-                        offer.ad_type === 'sell' ? 'bg-red-500/10 text-red-400' : 'bg-green-500/10 text-green-400'
-                      )}>
+                      <span
+                        className={cn(
+                          'text-xs font-medium px-2 py-0.5 rounded-full',
+                          offer.ad_type === 'sell'
+                            ? 'bg-red-500/10 text-red-400'
+                            : 'bg-green-500/10 text-green-400'
+                        )}
+                      >
                        {offer.ad_type === 'sell' ? t('p2p.sell') : t('p2p.buy')}
                      </span>
                      <span className="text-sm font-bold text-foreground">{offer.token}</span>
@@ -193,18 +216,21 @@ export function P2PSection() {
                    </span>
                  </div>
                  <div className="flex justify-between text-xs text-muted-foreground">
-                    <span>{offer.remaining_amount}/{offer.amount_crypto} {offer.token}</span>
-                    <span>{offer.price_per_unit?.toLocaleString()} {offer.fiat_currency}</span>
+                    <span>
+                      {offer.remaining_amount}/{offer.amount_crypto} {offer.token}
+                    </span>
+                    <span>
+                      {offer.price_per_unit?.toLocaleString()} {offer.fiat_currency}
+                    </span>
                  </div>
                </div>
              ))}
            </div>
-          )
-        )}
+          ))}

        {/* My Trades */}
-        {activeTab === 'myTrades' && (
-          myDataLoading ? (
+        {activeTab === 'myTrades' &&
+          (myDataLoading ? (
            <div className="flex items-center justify-center py-8">
              <Loader2 className="w-6 h-6 text-primary animate-spin" />
            </div>
@@ -218,7 +244,10 @@ export function P2PSection() {
              {myTrades.map((trade) => (
                <button
                  key={trade.id}
-                  onClick={() => { hapticImpact('light'); setActiveTradeId(trade.id); }}
+                  onClick={() => {
+                    hapticImpact('light');
+                    setActiveTradeId(trade.id);
+                  }}
                  className="w-full text-left bg-card rounded-xl border border-border p-3 space-y-1 hover:border-cyan-500/50 transition-colors"
                >
                  <div className="flex items-center justify-between">
@@ -230,14 +259,15 @@ export function P2PSection() {
                    </span>
                  </div>
                  <div className="flex justify-between text-xs text-muted-foreground">
-                    <span>{trade.fiat_amount?.toLocaleString()} {trade.fiat_currency || ''}</span>
+                    <span>
+                      {trade.fiat_amount?.toLocaleString()} {trade.fiat_currency || ''}
+                    </span>
                    <span>{new Date(trade.created_at).toLocaleDateString()}</span>
                  </div>
                </button>
              ))}
            </div>
-          )
-        )}
+          ))}
      </div>

      {/* Trade Accept Modal */}
@@ -1,5 +1,5 @@
 {
-  "version": "1.0.224",
-  "buildTime": "2026-02-25T16:46:10.349Z",
-  "buildNumber": 1772037970349
+  "version": "1.0.225",
+  "buildTime": "2026-02-26T14:51:09.120Z",
+  "buildNumber": 1772117469121
 }