fix presence

src/components/Grids/OngoingTrades.tsx

@@ -1,4 +1,4 @@
-import React, { useCallback, useContext, useEffect, useRef, useState } from 'react';
+import React, { useCallback, useContext, useEffect, useMemo, useRef, useState } from 'react';
 import { AgGridReact } from 'ag-grid-react';
 import { ColDef, RowClassParams, RowStyle, SizeColumnsToContentStrategy } from 'ag-grid-community';
 import 'ag-grid-community/styles/ag-grid.css';
@@ -13,7 +13,9 @@ export const OngoingTrades = () => {
     const { onGoingTrades, getCoinLabel, selectedCoin } = useContext(gameContext);
     const gridRef = useRef<any>(null)
 
-   
+    const filteredOngoingTrades = useMemo(()=> {
+        return onGoingTrades?.filter((item)=> item?.tradeInfo?.foreignBlockchain === selectedCoin)
+      }, [onGoingTrades, selectedCoin])
   
     const onGridReady = useCallback((params: any) => {
         // params.api.sizeColumnsToFit(); // Adjust columns to fit the grid width
@@ -80,14 +82,14 @@ export const OngoingTrades = () => {
  
 
     return (
-        <div className="ag-theme-alpine-dark" style={{ height: 225, width: '100%' }}>
+        <div className="ag-theme-alpine-dark" style={{ height: 225, width: '100%', display: filteredOngoingTrades?.length === 0 && 'none' }}>
             <AgGridReact
                     onGridReady={onGridReady}
                     ref={gridRef}
 
                 columnDefs={columnDefs}
                 defaultColDef={defaultColDef}
-                rowData={onGoingTrades?.filter((item)=> item?.tradeInfo?.foreignBlockchain === selectedCoin)}
+                rowData={filteredOngoingTrades}
                 // onRowClicked={onRowClicked}
                 rowSelection="single"
                 getRowId={getRowId}

src/components/Grids/TradeOffers.tsx

@@ -11,8 +11,8 @@ import { subscribeToEvent, unsubscribeFromEvent } from '../../utils/events';
 import { useModal } from '../common/useModal';
 import FileSaver from 'file-saver';
 
-// export const baseLocalHost = window.location.host
-export const baseLocalHost = '127.0.0.1:12391'
+export const baseLocalHost = window.location.host
+// export const baseLocalHost = '127.0.0.1:12391'
 
 interface RowData {
   amountQORT: number;
@@ -54,8 +54,10 @@ export const TradeOffers: React.FC<any> = ({foreignCoinBalance}:any) => {
     return offers.filter((item)=> !listOfOngoingTradesAts.includes(item.qortalAtAddress))
   }, [listOfOngoingTradesAts, offers])
   const initiatedFetchPresence = useRef(false)
- 
-  
+  const initiatedFetchPresenceSocket = useRef(false)
+
+  const socketRef = useRef(null)
+  const socketPresenceRef = useRef(null)
   const [selectedOffer, setSelectedOffer] = useState<any>(null)
   const [selectedOffers, setSelectedOffers] = useState<any>([])
   const [record, setRecord] = useState(null)
@@ -270,29 +272,33 @@ export const TradeOffers: React.FC<any> = ({foreignCoinBalance}:any) => {
     }
     
    
-    const socket = new WebSocket(socketLink)
-    socket.onopen = () => {
+    socketPresenceRef.current = new WebSocket(socketLink)
+    socketPresenceRef.current.onopen = () => {
       setTimeout(pingSocket, 50)
     }
-    socket.onmessage = (e) => {
-      tradePresenceTxns.current = JSON.parse(e.data)
+    socketPresenceRef.current.onmessage = (e) => {
+      tradePresenceTxns.current = !initiatedFetchPresenceSocket.current ? JSON.parse(e.data) : [...tradePresenceTxns.current, ...JSON.parse(e.data)]
+      initiatedFetchPresenceSocket.current = true
       processOffersWithPresence()
       restarted = false
     }
-    socket.onclose = () => {
+    socketPresenceRef.current.onclose = (event) => {
       clearTimeout(socketTimeout)
+      if (event.reason === 'forced') {
+        return
+      }
       restartTradePresenceWebSocket()
     }
-    socket.onerror = (e) => {
+    socketPresenceRef.current.onerror = (e) => {
       clearTimeout(socketTimeout)
       restartTradePresenceWebSocket()
     }
     const pingSocket = () => {
-      socket.send('ping')
+      socketPresenceRef.current.send('ping')
       socketTimeout = setTimeout(pingSocket, 295000)
     }
   }
-  const socketRef = useRef(null)
+
 
   const restartTradeOffers = ()=> {
     if (socketRef.current) {
@@ -304,6 +310,13 @@ export const TradeOffers: React.FC<any> = ({foreignCoinBalance}:any) => {
     setSelectedOffer(null)
   }
 
+  const restartPresence = ()=> {
+    if (socketPresenceRef.current) {
+      socketPresenceRef.current.close(1000, 'forced'); // Close with a custom reason
+      socketPresenceRef.current = null
+    }
+  }
+
   const initTradeOffersWebSocket = (restarted = false) => {
 
     if(socketRef.current) return
@@ -352,6 +365,10 @@ export const TradeOffers: React.FC<any> = ({foreignCoinBalance}:any) => {
     }
     getNewBlockedTrades()
     const intervalBlockTrades = setInterval(() => {
+      
+      initiatedFetchPresenceSocket.current = false
+      restartPresence()
+      initTradePresenceWebSocket()
       getNewBlockedTrades()
     }, 150000)
 

src/pages/Home/Home.tsx

@@ -1,4 +1,4 @@
-import { FC, useContext, useEffect, useState } from "react";
+import { FC, useContext, useEffect, useMemo, useState } from "react";
 import { AppContainer } from "../../App-styles";
 
 import axios from "axios";
@@ -30,10 +30,14 @@ export const HomePage: FC<IsInstalledProps> = ({}) => {
     setIsAuthenticated,
     OAuthLoading,
     setOAuthLoading,
+    onGoingTrades,
+    selectedCoin
   } = useContext(gameContext);
   const { setNotification } = useContext(NotificationContext);
   const [mode, setMode] = useState("buy");
-
+  const filteredOngoingTrades = useMemo(()=> {
+    return onGoingTrades?.filter((item)=> item?.tradeInfo?.foreignBlockchain === selectedCoin)
+  }, [onGoingTrades, selectedCoin])
   const checkIfAuthenticated = async () => {
     try {
       setOAuthLoading(true);
@@ -76,7 +80,7 @@ export const HomePage: FC<IsInstalledProps> = ({}) => {
               fontSize: "16px",
             }}
           >
-            My Pending Orders
+            {`My Pending Orders: ${filteredOngoingTrades?.length}`}
           </TextTableTitle>
         </Box>
         <Spacer height="10px" />