change socket model

lib/socket/types.ts

@@ -49,9 +49,9 @@ export namespace SocketMessage {
   SocketMessageParamsGeneric<'current_coin_balance', { coin_balance: string; block_number: number; exchange_rate: string }>;
   export type AddressTokenBalance = SocketMessageParamsGeneric<'token_balance', { block_number: number }>;
   export type AddressCoinBalance = SocketMessageParamsGeneric<'coin_balance', { coin_balance: AddressCoinBalanceHistoryItem }>;
-  export type AddressTxs = SocketMessageParamsGeneric<'transaction', { transaction: Transaction }>;
-  export type AddressTxsPending = SocketMessageParamsGeneric<'pending_transaction', { transaction: Transaction }>;
-  export type AddressTokenTransfer = SocketMessageParamsGeneric<'token_transfer', { token_transfer: TokenTransfer }>;
+  export type AddressTxs = SocketMessageParamsGeneric<'transaction', { transactions: Array<Transaction> }>;
+  export type AddressTxsPending = SocketMessageParamsGeneric<'pending_transaction', { transactions: Array<Transaction> }>;
+  export type AddressTokenTransfer = SocketMessageParamsGeneric<'token_transfer', { token_transfers: Array<TokenTransfer> }>;
   export type AddressChangedBytecode = SocketMessageParamsGeneric<'changed_bytecode', Record<string, never>>;
   export type TokenTransfers = SocketMessageParamsGeneric<'token_transfer', {token_transfer: number }>;
   export type TokenTotalSupply = SocketMessageParamsGeneric<'total_supply', {total_supply: number }>;

ui/address/AddressTokenTransfers.tsx

@@ -117,11 +117,21 @@ const AddressTokenTransfers = ({ scrollRef }: {scrollRef?: React.RefObject<HTMLD
   const handleNewSocketMessage: SocketMessage.AddressTokenTransfer['handler'] = (payload) => {
     setSocketAlert('');
 
-    if (data?.items && data.items.length >= OVERLOAD_COUNT) {
-      if (matchFilters(filters, payload.token_transfer, currentAddress)) {
-        setNewItemsCount(prev => prev + 1);
+    const newItems: Array<TokenTransfer> = [];
+
+    payload.token_transfers.forEach(transfer => {
+      if (data?.items && data.items.length + newItems.length >= OVERLOAD_COUNT) {
+        if (matchFilters(filters, transfer, currentAddress)) {
+          setNewItemsCount(prev => prev + 1);
+        }
+      } else {
+        if (matchFilters(filters, transfer, currentAddress)) {
+          newItems.push(transfer);
+        }
       }
-    } else {
+    });
+
+    if (newItems.length > 0) {
       queryClient.setQueryData(
         getResourceKey('address_token_transfers', { pathParams: { hash: currentAddress }, queryParams: { ...filters } }),
         (prevData: AddressTokenTransferResponse | undefined) => {
@@ -129,19 +139,17 @@ const AddressTokenTransfers = ({ scrollRef }: {scrollRef?: React.RefObject<HTMLD
             return;
           }
 
-          if (!matchFilters(filters, payload.token_transfer, currentAddress)) {
-            return prevData;
-          }
-
           return {
             ...prevData,
             items: [
-              payload.token_transfer,
+              ...newItems,
               ...prevData.items,
             ],
           };
-        });
+        },
+      );
     }
+
   };
 
   const handleSocketClose = React.useCallback(() => {

ui/address/AddressTxs.tsx

@@ -62,16 +62,6 @@ const AddressTxs = ({ scrollRef }: {scrollRef?: React.RefObject<HTMLDivElement>}
   const handleNewSocketMessage: SocketMessage.AddressTxs['handler'] = (payload) => {
     setSocketAlert('');
 
-    if (addressTxsQuery.data?.items && addressTxsQuery.data.items.length >= OVERLOAD_COUNT) {
-      if (
-        !filterValue ||
-        (filterValue === 'from' && payload.transaction.from.hash === currentAddress) ||
-        (filterValue === 'to' && payload.transaction.to?.hash === currentAddress)
-      ) {
-        setNewItemsCount(prev => prev + 1);
-      }
-    }
-
     queryClient.setQueryData(
       getResourceKey('address_txs', { pathParams: { hash: currentAddress }, queryParams: { filter: filterValue } }),
       (prevData: AddressTransactionsResponse | undefined) => {
@@ -79,32 +69,30 @@ const AddressTxs = ({ scrollRef }: {scrollRef?: React.RefObject<HTMLDivElement>}
           return;
         }
 
-        const currIndex = prevData.items.findIndex((tx) => tx.hash === payload.transaction.hash);
-
-        if (currIndex > -1) {
-          prevData.items[currIndex] = payload.transaction;
-          return prevData;
-        }
-
-        if (prevData.items.length >= OVERLOAD_COUNT) {
-          return prevData;
-        }
-
-        if (filterValue) {
-          if (
-            (filterValue === 'from' && payload.transaction.from.hash !== currentAddress) ||
-              (filterValue === 'to' && payload.transaction.to?.hash !== currentAddress)
-          ) {
-            return prevData;
+        const newItems = [ ...prevData.items ];
+
+        payload.transactions.forEach(tx => {
+          const currIndex = newItems.findIndex((item) => item.hash === tx.hash);
+
+          if (currIndex > -1) {
+            newItems[currIndex] = tx;
+          } else {
+            if (!filterValue ||
+                (filterValue === 'from' && tx.from.hash === currentAddress) ||
+                (filterValue === 'to' && tx.to?.hash === currentAddress)
+            ) {
+              if (newItems.length >= OVERLOAD_COUNT) {
+                setNewItemsCount(prev => prev + 1);
+              } else {
+                newItems.unshift(tx);
+              }
+            }
           }
-        }
+        });
 
         return {
           ...prevData,
-          items: [
-            payload.transaction,
-            ...prevData.items,
-          ],
+          items: newItems,
         };
       });
   };