latest batches socket

lib/api/resources.ts

@@ -504,7 +504,7 @@ export const RESOURCES = {
     pathParams: [ 'number' as const ],
   },
   zkevm_l2_txn_batch_txs: {
-    path: 'api/v2/transactions/zkevm-batch/:number',
+    path: '/api/v2/transactions/zkevm-batch/:number',
     pathParams: [ 'number' as const ],
     filterFields: [],
   },

mocks/zkevmL2txnBatches/zkevmL2txnBatches.ts

@@ -15,7 +15,7 @@ export const txnBatchesData: ZkEvmL2TxnBatchesResponse = {
       status: 'Unfinalized',
       verify_tx_hash: null,
       sequence_tx_hash: null,
-      number: 5218590,
+      number: 5218591,
       tx_count: 9,
     },
   ],

types/api/zkEvmL2TxnBatches.ts

@@ -37,4 +37,4 @@ export type ZkEvmL2TxnBatchTxs = {
   next_page_params: null;
 }
 
-export type NewZkEvmBatchSocketResponse = { batch: ZkEvmL2TxnBatch };
+export type NewZkEvmBatchSocketResponse = { batch: ZkEvmL2TxnBatchesItem };

ui/home/LatestZkEvmL2Batches.tsx

@@ -1,18 +1,17 @@
 import { Box, Heading, Flex, Text, VStack } from '@chakra-ui/react';
-// import { useQueryClient } from '@tanstack/react-query';
-// import { AnimatePresence } from 'framer-motion';
+import { useQueryClient } from '@tanstack/react-query';
+import { AnimatePresence } from 'framer-motion';
 import React from 'react';
 
-// import type { SocketMessage } from 'lib/socket/types';
-// import type { ZkEvmL2TxnBatch } from 'types/api/zkEvmL2TxnBatches';
+import type { SocketMessage } from 'lib/socket/types';
+import type { ZkEvmL2TxnBatchesItem } from 'types/api/zkEvmL2TxnBatches';
 
 import { route } from 'nextjs-routes';
 
-// import useApiQuery, { getResourceKey } from 'lib/api/useApiQuery';
-import useApiQuery from 'lib/api/useApiQuery';
+import useApiQuery, { getResourceKey } from 'lib/api/useApiQuery';
 import useIsMobile from 'lib/hooks/useIsMobile';
-// import useSocketChannel from 'lib/socket/useSocketChannel';
-// import useSocketMessage from 'lib/socket/useSocketMessage';
+import useSocketChannel from 'lib/socket/useSocketChannel';
+import useSocketMessage from 'lib/socket/useSocketMessage';
 import { ZKEVM_L2_TXN_BATCHES_ITEM } from 'stubs/zkEvmL2';
 import LinkInternal from 'ui/shared/LinkInternal';
 
@@ -21,36 +20,35 @@ import LatestZkevmL2BatchItem from './LatestZkevmL2BatchItem';
 const LatestZkEvmL2Batches = () => {
   const isMobile = useIsMobile();
   const batchesMaxCount = isMobile ? 2 : 5;
-  // const queryClient = useQueryClient();
+  const queryClient = useQueryClient();
 
   const { data, isPlaceholderData, isError } = useApiQuery('homepage_zkevm_l2_batches', {
     queryOptions: {
       placeholderData: { items: Array(batchesMaxCount).fill(ZKEVM_L2_TXN_BATCHES_ITEM) },
     },
   });
 
-  // const handleNewBatchMessage: SocketMessage.NewZkEvmL2Batch['handler'] = React.useCallback((payload) => {
-  //   queryClient.setQueryData(getResourceKey('homepage_zkevm_l2_batches'), (prevData: Array<ZkEvmL2TxnBatch> | undefined) => {
+  const handleNewBatchMessage: SocketMessage.NewZkEvmL2Batch['handler'] = React.useCallback((payload) => {
+    queryClient.setQueryData(getResourceKey('homepage_zkevm_l2_batches'), (prevData: { items: Array<ZkEvmL2TxnBatchesItem> } | undefined) => {
+      const newItems = prevData?.items ? [ ...prevData.items ] : [];
 
-  //     const newData = prevData ? [ ...prevData ] : [];
+      if (newItems.some((batch => batch.number === payload.batch.number))) {
+        return { items: newItems };
+      }
 
-  //     if (newData.some((batch => batch.number === payload.batch.number))) {
-  //       return newData;
-  //     }
+      return { items: [ payload.batch, ...newItems ].sort((b1, b2) => b2.number - b1.number).slice(0, batchesMaxCount) };
+    });
+  }, [ queryClient, batchesMaxCount ]);
 
-  //     return [ payload.batch, ...newData ].sort((b1, b2) => b2.number - b1.number).slice(0, batchesMaxCount);
-  //   });
-  // }, [ queryClient, batchesMaxCount ]);
-
-  // const channel = useSocketChannel({
-  //   topic: 'zkevm_batches:new_zkevm_confirmed_batch',
-  //   isDisabled: isPlaceholderData || isError,
-  // });
-  // useSocketMessage({
-  //   channel,
-  //   event: 'new_zkevm_confirmed_batch',
-  //   handler: handleNewBatchMessage,
-  // });
+  const channel = useSocketChannel({
+    topic: 'zkevm_batches:new_zkevm_confirmed_batch',
+    isDisabled: isPlaceholderData || isError,
+  });
+  useSocketMessage({
+    channel,
+    event: 'new_zkevm_confirmed_batch',
+    handler: handleNewBatchMessage,
+  });
 
   let content;
 
@@ -64,15 +62,15 @@ const LatestZkEvmL2Batches = () => {
     content = (
       <>
         <VStack spacing={ 3 } mb={ 4 } overflow="hidden" alignItems="stretch">
-          { /* <AnimatePresence initial={ false } > */ }
-          { dataToShow.map(((batch, index) => (
-            <LatestZkevmL2BatchItem
-              key={ batch.number + (isPlaceholderData ? String(index) : '') }
-              batch={ batch }
-              isLoading={ isPlaceholderData }
-            />
-          ))) }
-          { /* </AnimatePresence> */ }
+          <AnimatePresence initial={ false } >
+            { dataToShow.map(((batch, index) => (
+              <LatestZkevmL2BatchItem
+                key={ batch.number + (isPlaceholderData ? String(index) : '') }
+                batch={ batch }
+                isLoading={ isPlaceholderData }
+              />
+            ))) }
+          </AnimatePresence>
         </VStack>
         <Flex justifyContent="center">
           <LinkInternal fontSize="sm" href={ route({ pathname: '/zkevm-l2-txn-batches' }) }>View all batches</LinkInternal>