feat(blocklist): renamed socket files

src/app/_components/BlockList/LayoutA/Paginated.tsx

@@ -6,7 +6,7 @@ import { Section } from '../../../../common/components/Section';
 import { ExplorerErrorBoundary } from '../../ErrorBoundary';
 import { useBlockListContext } from '../BlockListContext';
 import { BlockListProvider } from '../BlockListProvider';
-import { useBlockListWebSocket } from '../Sockets/useBlockListWebSocket';
+import { useBlockListWebSocketUIBlock } from '../Sockets/useBlockListWebSocketUIBlock';
 import { FADE_DURATION } from '../consts';
 import { UISingleBlock } from '../types';
 import { BlockListWithControls } from './BlockListWithControls';
@@ -33,7 +33,7 @@ function PaginatedBlockListLayoutABase() {
     return new Set(Object.keys(initialBurnBlocks));
   }, [initialBurnBlocks]);
 
-  const { latestUIBlocks, latestBlocksCount, clearLatestBlocks } = useBlockListWebSocket(
+  const { latestUIBlocks, latestBlocksCount, clearLatestBlocks } = useBlockListWebSocketUIBlock(
     initialBlockHashes,
     initialBurnBlockHashes
   );

src/app/_components/BlockList/LayoutA/useBlockList.ts

@@ -5,7 +5,7 @@ import { BurnBlock } from '@stacks/blockchain-api-client';
 import { NakamotoBlock } from '@stacks/blockchain-api-client/src/generated/models';
 
 import { useBlockListContext } from '../BlockListContext';
-import { useBlockListWebSocket } from '../Sockets/useBlockListWebSocket';
+import { useBlockListWebSocketUIBlock } from '../Sockets/useBlockListWebSocketUIBlock';
 import { FADE_DURATION } from '../consts';
 import { UIBlock, UIBlockType } from '../types';
 import { useInitialBlockList } from './useInitialBlockList';
@@ -78,7 +78,7 @@ export function useBlockList(length: number) {
     [lastBurnBlock, secondToLastBurnBlock]
   );
 
-  const { latestBlock, latestBlocksCount, clearLatestBlocks } = useBlockListWebSocket(
+  const { latestBlock, latestBlocksCount, clearLatestBlocks } = useBlockListWebSocketUIBlock(
     initialBlockHashes,
     initialBurnBlockHashes
   );

src/app/_components/BlockList/Sockets/useBlockListWebSocket.ts

@@ -1,69 +1,39 @@
-import { useCallback, useRef, useState } from 'react';
+import { useCallback, useEffect, useRef, useState } from 'react';
 
+import { Block } from '@stacks/blockchain-api-client';
 import { NakamotoBlock } from '@stacks/blockchain-api-client/src/generated/models';
 
-import { UIBlockType, UISingleBlock } from '../types';
 import { useSubscribeBlocks } from './useSubscribeBlocks';
 
-export function useBlockListWebSocket(
-  initialBlockHashes: Set<string>,
-  initialBurnBlockHashes: Set<string>
-) {
-  const [latestBlocks, setLatestBlocks] = useState<UISingleBlock[]>([]);
-  const [latestBlock, setLatestBlock] = useState<NakamotoBlock>();
-  const latestBlockHashes = useRef(new Set<string>());
-  const latestBurnBlockHashes = useRef(new Set<string>());
+export function useBlockListWebSocket(liveUpdates: boolean, initialStxBlockHashes: Set<string>) {
+  const [latestStxBlocks, setLatestStxBlocks] = useState<(NakamotoBlock | Block)[]>([]);
 
-  const handleBlock = useCallback(
-    (block: NakamotoBlock) => {
-      function updateLatestBlocks() {
-        if (latestBlockHashes.current.has(block.hash) || initialBlockHashes.has(block.hash)) {
-          return;
-        }
-        setLatestBlock(block);
-        latestBlockHashes.current.add(block.hash);
-        const isNewBurnBlock =
-          !initialBurnBlockHashes.has(block.burn_block_hash) &&
-          !latestBurnBlockHashes.current.has(block.burn_block_hash);
-        if (isNewBurnBlock) {
-          latestBurnBlockHashes.current.add(block.burn_block_hash);
-          setLatestBlocks(prevLatestBlocks => [
-            {
-              type: UIBlockType.BurnBlock,
-              height: block.burn_block_height,
-              hash: block.burn_block_hash,
-              timestamp: block.burn_block_time,
-            },
-            ...prevLatestBlocks,
-          ]);
-        }
-        setLatestBlocks(prevLatestBlocks => [
-          {
-            type: UIBlockType.Block,
-            height: block.height,
-            hash: block.hash,
-            timestamp: block.burn_block_time,
-            txsCount: block?.tx_count,
-          },
-          ...prevLatestBlocks,
-        ]);
-      }
+  const stxBlockHashes = useRef(new Set<string>(initialStxBlockHashes));
+  // update ref when initialStxBlockHashes changes
+  useEffect(() => {
+    stxBlockHashes.current = new Set(initialStxBlockHashes);
+  }, [initialStxBlockHashes]);
 
-      updateLatestBlocks();
-    },
-    [initialBurnBlockHashes, initialBlockHashes]
-  );
+  const handleBlock = useCallback((stxBlock: NakamotoBlock | Block) => {
+    // If the block is already in the list, don't add it again
+    if (stxBlockHashes.current.has(stxBlock.hash)) {
+      return;
+    }
 
-  useSubscribeBlocks(handleBlock);
+    // Otherwise, add it to the list
+    setLatestStxBlocks(prevLatestStxBlocks => [stxBlock, ...prevLatestStxBlocks]);
+    stxBlockHashes.current.add(stxBlock.hash);
+  }, []);
 
-  const clearLatestBlocks = () => {
-    setLatestBlocks([]);
+  useSubscribeBlocks(liveUpdates, handleBlock);
+
+  const clearLatestStxBlocks = () => {
+    setLatestStxBlocks([]);
   };
 
   return {
-    latestUIBlocks: latestBlocks,
-    latestBlock,
-    latestBlocksCount: latestBlocks.filter(block => block.type === UIBlockType.Block).length,
-    clearLatestBlocks,
+    latestStxBlocks,
+    latestStxBlocksCount: latestStxBlocks.length,
+    clearLatestStxBlocks,
   };
 }

src/app/_components/BlockList/Sockets/useBlockListWebSocketUIBlock.ts

@@ -0,0 +1,69 @@
+import { useCallback, useRef, useState } from 'react';
+
+import { NakamotoBlock } from '@stacks/blockchain-api-client/src/generated/models';
+
+import { UIBlockType, UISingleBlock } from '../types';
+import { useSubscribeBlocksUIBlock } from './useSubscribeBlocksUIBlock';
+
+export function useBlockListWebSocketUIBlock(
+  initialBlockHashes: Set<string>,
+  initialBurnBlockHashes: Set<string>
+) {
+  const [latestBlocks, setLatestBlocks] = useState<UISingleBlock[]>([]);
+  const [latestBlock, setLatestBlock] = useState<NakamotoBlock>();
+  const latestBlockHashes = useRef(new Set<string>());
+  const latestBurnBlockHashes = useRef(new Set<string>());
+
+  const handleBlock = useCallback(
+    (block: NakamotoBlock) => {
+      function updateLatestBlocks() {
+        if (latestBlockHashes.current.has(block.hash) || initialBlockHashes.has(block.hash)) {
+          return;
+        }
+        setLatestBlock(block);
+        latestBlockHashes.current.add(block.hash);
+        const isNewBurnBlock =
+          !initialBurnBlockHashes.has(block.burn_block_hash) &&
+          !latestBurnBlockHashes.current.has(block.burn_block_hash);
+        if (isNewBurnBlock) {
+          latestBurnBlockHashes.current.add(block.burn_block_hash);
+          setLatestBlocks(prevLatestBlocks => [
+            {
+              type: UIBlockType.BurnBlock,
+              height: block.burn_block_height,
+              hash: block.burn_block_hash,
+              timestamp: block.burn_block_time,
+            },
+            ...prevLatestBlocks,
+          ]);
+        }
+        setLatestBlocks(prevLatestBlocks => [
+          {
+            type: UIBlockType.Block,
+            height: block.height,
+            hash: block.hash,
+            timestamp: block.burn_block_time,
+            txsCount: block?.tx_count,
+          },
+          ...prevLatestBlocks,
+        ]);
+      }
+
+      updateLatestBlocks();
+    },
+    [initialBurnBlockHashes, initialBlockHashes]
+  );
+
+  useSubscribeBlocksUIBlock(handleBlock);
+
+  const clearLatestBlocks = () => {
+    setLatestBlocks([]);
+  };
+
+  return {
+    latestUIBlocks: latestBlocks,
+    latestBlock,
+    latestBlocksCount: latestBlocks.filter(block => block.type === UIBlockType.Block).length,
+    clearLatestBlocks,
+  };
+}

src/app/_components/BlockList/Sockets/useSubscribeBlocks.ts

@@ -1,6 +1,6 @@
 import { useEffect, useRef } from 'react';
 
-import { StacksApiSocketClient } from '@stacks/blockchain-api-client';
+import { Block, StacksApiSocketClient } from '@stacks/blockchain-api-client';
 import { NakamotoBlock } from '@stacks/blockchain-api-client/src/generated/models';
 
 import { useGlobalContext } from '../../../../common/context/useAppContext';
@@ -9,7 +9,10 @@ interface Subscription {
   unsubscribe(): void;
 }
 
-export function useSubscribeBlocks(handleBlock: (block: NakamotoBlock) => void) {
+export function useSubscribeBlocks(
+  liveUpdates: boolean,
+  handleBlock: (block: NakamotoBlock | Block) => void
+) {
   const subscription = useRef<Subscription | undefined>(undefined);
   const { stacksApiSocketClientInfo } = useGlobalContext();
   const { client, connect, disconnect } = stacksApiSocketClientInfo || {};
@@ -18,19 +21,22 @@ export function useSubscribeBlocks(handleBlock: (block: NakamotoBlock) => void)
     const subscribe = async (client: StacksApiSocketClient) => {
       subscription.current = client?.subscribeBlocks(block => {
         handleBlock({
-          ...(block as unknown as NakamotoBlock),
+          ...(block as Block),
           parent_index_block_hash: '',
           tx_count: 0,
         });
       });
     };
 
-    if (!client?.socket.connected) {
+    if (liveUpdates && !client?.socket.connected) {
       connect?.(client => subscribe(client));
     }
+    if (!liveUpdates && client?.socket.connected) {
+      disconnect?.();
+    }
     return () => {
       disconnect?.();
     };
-  }, [client, handleBlock, connect, disconnect]);
+  }, [client, handleBlock, connect, liveUpdates, disconnect]);
   return subscription;
 }

src/app/_components/BlockList/Sockets/useSubscribeBlocks2.ts → src/app/_components/BlockList/Sockets/useSubscribeBlocksUIBlock.ts

@@ -1,6 +1,6 @@
 import { useEffect, useRef } from 'react';
 
-import { Block, StacksApiSocketClient } from '@stacks/blockchain-api-client';
+import { StacksApiSocketClient } from '@stacks/blockchain-api-client';
 import { NakamotoBlock } from '@stacks/blockchain-api-client/src/generated/models';
 
 import { useGlobalContext } from '../../../../common/context/useAppContext';
@@ -9,10 +9,7 @@ interface Subscription {
   unsubscribe(): void;
 }
 
-export function useSubscribeBlocks2(
-  liveUpdates: boolean,
-  handleBlock: (block: NakamotoBlock | Block) => void
-) {
+export function useSubscribeBlocksUIBlock(handleBlock: (block: NakamotoBlock) => void) {
   const subscription = useRef<Subscription | undefined>(undefined);
   const { stacksApiSocketClientInfo } = useGlobalContext();
   const { client, connect, disconnect } = stacksApiSocketClientInfo || {};
@@ -21,22 +18,19 @@ export function useSubscribeBlocks2(
     const subscribe = async (client: StacksApiSocketClient) => {
       subscription.current = client?.subscribeBlocks(block => {
         handleBlock({
-          ...(block as Block),
+          ...(block as unknown as NakamotoBlock),
           parent_index_block_hash: '',
           tx_count: 0,
         });
       });
     };
 
-    if (liveUpdates && !client?.socket.connected) {
+    if (!client?.socket.connected) {
       connect?.(client => subscribe(client));
     }
-    if (!liveUpdates && client?.socket.connected) {
-      disconnect?.();
-    }
     return () => {
       disconnect?.();
     };
-  }, [client, handleBlock, connect, liveUpdates, disconnect]);
+  }, [client, handleBlock, connect, disconnect]);
   return subscription;
 }

src/app/_components/BlockList/UpdatedBlockList.tsx

@@ -24,7 +24,7 @@ import { StxIcon } from '../../../ui/icons';
 import { ExplorerErrorBoundary } from '../ErrorBoundary';
 import { BurnBlock } from './LayoutA/BurnBlock';
 import { StxBlock } from './LayoutA/StxBlock';
-import { useSubscribeBlocks2 } from './Sockets/useSubscribeBlocks2';
+import { useSubscribeBlocks } from './Sockets/useSubscribeBlocks';
 import { EnhancedBlock } from './types';
 
 export const animationDuration = 0.8;
@@ -124,7 +124,7 @@ function UpdatedBlocksListBase({
       ...prevLatestBlocks,
     ]);
   }, []);
-  useSubscribeBlocks2(isLive, handleBlock);
+  useSubscribeBlocks(isLive, handleBlock);
   useEffect(() => {
     if (!isLive) return;
     setLatestBlocks([]);

src/app/_components/BlockList/data/useBlocksPageBlockListGrouped.tsx

@@ -1,7 +1,7 @@
 import { useCallback, useEffect, useRef, useState } from 'react';
 
 import { useBlockListContext } from '../BlockListContext';
-import { useBlockListWebSocket2 } from '../Sockets/useBlockListWebSocket2';
+import { useBlockListWebSocket } from '../Sockets/useBlockListWebSocket';
 import { BlockListData, generateBlockList, mergeBlockLists, waitForFadeAnimation } from '../utils';
 import { useBlocksGroupedInitialBlockList } from './useBlocksPageGroupedInitialBlockList';
 
@@ -28,7 +28,7 @@ export function useBlocksPageBlockListGrouped(btcBlockLimit: number = 3) {
     latestStxBlocks: latestStxBlocksFromWebSocket,
     latestStxBlocksCount: latestStxBlocksCountFromWebSocket,
     clearLatestStxBlocks: clearLatestStxBlocksFromWebSocket,
-  } = useBlockListWebSocket2(liveUpdates, initialStxBlockHashes);
+  } = useBlockListWebSocket(liveUpdates, initialStxBlockHashes);
 
   // manually update the block list with block list updates from the websocket
   const updateBlockListManually = useCallback(

src/app/_components/BlockList/data/useBlocksPageBlockListUngrouped.ts

@@ -3,7 +3,7 @@
 import { useCallback, useEffect, useRef, useState } from 'react';
 
 import { useBlockListContext } from '../BlockListContext';
-import { useBlockListWebSocket2 } from '../Sockets/useBlockListWebSocket2';
+import { useBlockListWebSocket } from '../Sockets/useBlockListWebSocket';
 import { BlockListData, generateBlockList, mergeBlockLists, waitForFadeAnimation } from '../utils';
 import { useBlocksPageUngroupedInitialBlockList } from './useBlocksPageUngroupedInitialBlockList';
 
@@ -30,7 +30,7 @@ export function useBlocksPageBlockListUngrouped(btcBlockLimit: number = 3) {
     latestStxBlocks: latestStxBlocksFromWebSocket,
     latestStxBlocksCount: latestStxBlocksCountFromWebSocket,
     clearLatestStxBlocks: clearLatestStxBlocksFromWebSocket,
-  } = useBlockListWebSocket2(liveUpdates, initialStxBlocksHashes);
+  } = useBlockListWebSocket(liveUpdates, initialStxBlocksHashes);
 
   // manually update the block list with block list updates from the websocket
   const updateBlockListManually = useCallback(