From b56760b22e46b64f927610a60c875f33a0bac956 Mon Sep 17 00:00:00 2001
From: Kurdistan Tech Ministry <info@pezkuwichain.io>
Date: Fri, 27 Feb 2026 02:11:53 +0300
Subject: [PATCH] fix: chat message alignment + auto-refresh for all P2P
 screens

- TradeChat: use authUserId for sender matching (fixes all messages
  appearing on left side instead of bubble alignment)
- BalanceCard: auto-refresh every 30s
- OfferList: auto-refresh every 15s
- MyOffers/MyTrades: auto-refresh every 15s when tab is active
---
 src/components/p2p/BalanceCard.tsx | 2 ++
 src/components/p2p/OfferList.tsx   | 2 ++
 src/components/p2p/TradeChat.tsx   | 6 ++----
 src/sections/P2P.tsx               | 4 ++++
 4 files changed, 10 insertions(+), 4 deletions(-)

diff --git a/src/components/p2p/BalanceCard.tsx b/src/components/p2p/BalanceCard.tsx
index a9418e7..49361e7 100644
--- a/src/components/p2p/BalanceCard.tsx
+++ b/src/components/p2p/BalanceCard.tsx
@@ -43,6 +43,8 @@ export function BalanceCard({
 
   useEffect(() => {
     fetchBalances();
+    const interval = setInterval(fetchBalances, 30000);
+    return () => clearInterval(interval);
   }, [fetchBalances]);
 
   const handleRefresh = () => {
diff --git a/src/components/p2p/OfferList.tsx b/src/components/p2p/OfferList.tsx
index d75ff8c..80a8f9b 100644
--- a/src/components/p2p/OfferList.tsx
+++ b/src/components/p2p/OfferList.tsx
@@ -56,6 +56,8 @@ export function OfferList({ adType, onAcceptOffer }: OfferListProps) {
 
   useEffect(() => {
     fetchOffers(1);
+    const interval = setInterval(() => fetchOffers(1), 15000);
+    return () => clearInterval(interval);
   }, [fetchOffers]);
 
   const handleAccept = (offer: P2POffer) => {
diff --git a/src/components/p2p/TradeChat.tsx b/src/components/p2p/TradeChat.tsx
index 891bea3..8307899 100644
--- a/src/components/p2p/TradeChat.tsx
+++ b/src/components/p2p/TradeChat.tsx
@@ -12,7 +12,7 @@ interface TradeChatProps {
 }
 
 export function TradeChat({ tradeId, onClose }: TradeChatProps) {
-  const { sessionToken, user } = useAuth();
+  const { sessionToken, authUserId } = useAuth();
   const { t, isRTL } = useTranslation();
   const { hapticImpact } = useTelegram();
 
@@ -23,8 +23,6 @@ export function TradeChat({ tradeId, onClose }: TradeChatProps) {
   // eslint-disable-next-line no-undef
   const messagesEndRef = useRef<HTMLDivElement>(null);
 
-  const userId = user?.id;
-
   const fetchMessages = useCallback(async () => {
     if (!sessionToken) return;
     try {
@@ -97,7 +95,7 @@ export function TradeChat({ tradeId, onClose }: TradeChatProps) {
           </div>
         ) : (
           messages.map((msg) => {
-            const isOwn = msg.sender_id === userId;
+            const isOwn = msg.sender_id === authUserId;
             const isSystem = msg.message_type === 'system';
             return (
               <div
diff --git a/src/sections/P2P.tsx b/src/sections/P2P.tsx
index 4e8cdc7..9a901e2 100644
--- a/src/sections/P2P.tsx
+++ b/src/sections/P2P.tsx
@@ -99,8 +99,12 @@ export function P2PSection() {
   useEffect(() => {
     if (activeTab === 'myAds') {
       fetchMyOffersFull();
+      const interval = setInterval(fetchMyOffersFull, 15000);
+      return () => clearInterval(interval);
     } else if (activeTab === 'myTrades') {
       fetchMyTrades();
+      const interval = setInterval(fetchMyTrades, 15000);
+      return () => clearInterval(interval);
     }
   }, [activeTab, fetchMyOffersFull, fetchMyTrades]);