Socket updates: on-demand contract verification fix, indexing event rename (#2629)

* Contract verification not appearing as completed following the message from websocket

Fixes #2618

* fix tests

* Change indexing status event name

* Replace `optimism_deposits:new_deposits` socket topic with `optimism:new_deposits`

lib/socket/types.ts

@@ -49,13 +49,13 @@ interface SocketMessageParamsGeneric<Event extends string | undefined, Payload e
 
 export namespace SocketMessage {
   export type NewBlock = SocketMessageParamsGeneric<'new_block', NewBlockSocketResponse>;
-  export type BlocksIndexStatus = SocketMessageParamsGeneric<'block_index_status', { finished: boolean; ratio: string }>;
-  export type InternalTxsIndexStatus = SocketMessageParamsGeneric<'internal_txs_index_status', { finished: boolean; ratio: string }>;
+  export type BlocksIndexStatus = SocketMessageParamsGeneric<'index_status', { finished: boolean; ratio: string }>;
+  export type InternalTxsIndexStatus = SocketMessageParamsGeneric<'index_status', { finished: boolean; ratio: string }>;
   export type TxStatusUpdate = SocketMessageParamsGeneric<'collated', NewBlockSocketResponse>;
   export type TxRawTrace = SocketMessageParamsGeneric<'raw_trace', RawTracesResponse>;
   export type NewTx = SocketMessageParamsGeneric<'transaction', { transaction: number }>;
   export type NewPendingTx = SocketMessageParamsGeneric<'pending_transaction', { pending_transaction: number }>;
-  export type NewOptimisticDeposits = SocketMessageParamsGeneric<'deposits', { deposits: number }>;
+  export type NewOptimisticDeposits = SocketMessageParamsGeneric<'new_optimism_deposits', { deposits: number }>;
   export type NewArbitrumDeposits = SocketMessageParamsGeneric<'new_messages_to_rollup_amount', { new_messages_to_rollup_amount: number }>;
   export type AddressBalance = SocketMessageParamsGeneric<'balance', { balance: string; block_number: number; exchange_rate: string }>;
   export type AddressCurrentCoinBalance =

lib/socket/useSocketChannel.tsx

@@ -3,7 +3,7 @@ import { useEffect, useRef, useState } from 'react';
 
 import { useSocket } from './context';
 
-const CHANNEL_REGISTRY: Record<string, Channel> = {};
+const CHANNEL_REGISTRY: Record<string, { channel: Channel; subscribers: number }> = {};
 
 interface Params {
   topic: string | undefined;
@@ -53,11 +53,12 @@ export default function useSocketChannel({ topic, params, isDisabled, onJoin, on
 
     let ch: Channel;
     if (CHANNEL_REGISTRY[topic]) {
-      ch = CHANNEL_REGISTRY[topic];
+      ch = CHANNEL_REGISTRY[topic].channel;
+      CHANNEL_REGISTRY[topic].subscribers++;
       onJoinRef.current?.(ch, '');
     } else {
       ch = socket.channel(topic);
-      CHANNEL_REGISTRY[topic] = ch;
+      CHANNEL_REGISTRY[topic] = { channel: ch, subscribers: 1 };
       ch.join()
         .receive('ok', (message) => onJoinRef.current?.(ch, message))
         .receive('error', () => {
@@ -68,8 +69,14 @@ export default function useSocketChannel({ topic, params, isDisabled, onJoin, on
     setChannel(ch);
 
     return () => {
-      ch.leave();
-      delete CHANNEL_REGISTRY[topic];
+      if (CHANNEL_REGISTRY[topic]) {
+        CHANNEL_REGISTRY[topic].subscribers > 0 && CHANNEL_REGISTRY[topic].subscribers--;
+        if (CHANNEL_REGISTRY[topic].subscribers === 0) {
+          ch.leave();
+          delete CHANNEL_REGISTRY[topic];
+        }
+      }
+
       setChannel(undefined);
     };
   }, [ socket, topic, params, isDisabled, onSocketError ]);

ui/address/contract/ContractDetails.pw.tsx

@@ -40,7 +40,8 @@ test.describe('full view', () => {
       },
     };
     const component = await render(<ContractDetails/>, { hooksConfig }, { withSocket: true });
-    await createSocket();
+    const socket = await createSocket();
+    await socketServer.joinChannel(socket, `addresses:${ addressMock.contract.hash.toLowerCase() }`);
     await expect(component).toHaveScreenshot();
   });
 
@@ -51,7 +52,8 @@ test.describe('full view', () => {
       },
     };
     const component = await render(<ContractDetails/>, { hooksConfig }, { withSocket: true });
-    await createSocket();
+    const socket = await createSocket();
+    await socketServer.joinChannel(socket, `addresses:${ addressMock.contract.hash.toLowerCase() }`);
     await expect(component).toHaveScreenshot();
   });
 
@@ -62,7 +64,8 @@ test.describe('full view', () => {
       },
     };
     const component = await render(<ContractDetails/>, { hooksConfig }, { withSocket: true });
-    await createSocket();
+    const socket = await createSocket();
+    await socketServer.joinChannel(socket, `addresses:${ addressMock.contract.hash.toLowerCase() }`);
     await expect(component).toHaveScreenshot();
   });
 
@@ -73,7 +76,8 @@ test.describe('full view', () => {
       },
     };
     const component = await render(<ContractDetails/>, { hooksConfig }, { withSocket: true });
-    await createSocket();
+    const socket = await createSocket();
+    await socketServer.joinChannel(socket, `addresses:${ addressMock.contract.hash.toLowerCase() }`);
     await expect(component).toHaveScreenshot();
   });
 });
@@ -85,7 +89,8 @@ test.describe('mobile view', () => {
     await mockApiResponse('contract', contractMock.withChangedByteCode, { pathParams: { hash: addressMock.contract.hash } });
     await mockApiResponse('contract', contractMock.withChangedByteCode, { pathParams: { hash: addressMock.contract.implementations?.[0].address as string } });
     const component = await render(<ContractDetails/>, { hooksConfig }, { withSocket: true });
-    await createSocket();
+    const socket = await createSocket();
+    await socketServer.joinChannel(socket, `addresses:${ addressMock.contract.hash.toLowerCase() }`);
     await expect(component).toHaveScreenshot();
   });
 });
@@ -95,7 +100,7 @@ test('verified via lookup in eth_bytecode_db', async({ render, mockApiResponse,
   await render(<ContractDetails/>, { hooksConfig }, { withSocket: true });
 
   const socket = await createSocket();
-  const channel = await socketServer.joinChannel(socket, 'addresses:' + addressMock.contract.hash.toLowerCase());
+  const channel = await socketServer.joinChannel(socket, `addresses:${ addressMock.contract.hash.toLowerCase() }`);
   await page.waitForResponse(contractApiUrl);
   socketServer.sendMessage(socket, channel, 'smart_contract_was_verified', {});
   const request = await page.waitForRequest(addressApiUrl);
@@ -103,9 +108,11 @@ test('verified via lookup in eth_bytecode_db', async({ render, mockApiResponse,
   expect(request).toBeTruthy();
 });
 
-test('verified with multiple sources', async({ render, page, mockApiResponse }) => {
+test('verified with multiple sources', async({ render, page, mockApiResponse, createSocket }) => {
   await mockApiResponse('contract', contractMock.withMultiplePaths, { pathParams: { hash: addressMock.contract.hash } });
   await render(<ContractDetails/>, { hooksConfig }, { withSocket: true });
+  const socket = await createSocket();
+  await socketServer.joinChannel(socket, `addresses:${ addressMock.contract.hash.toLowerCase() }`);
 
   const section = page.locator('section', { hasText: 'Contract source code' });
   await expect(section).toHaveScreenshot();
@@ -117,7 +124,7 @@ test('verified with multiple sources', async({ render, page, mockApiResponse })
   await expect(section).toHaveScreenshot();
 });
 
-test('self destructed', async({ render, mockApiResponse, page }) => {
+test('self destructed', async({ render, mockApiResponse, page, createSocket }) => {
   const hooksConfig = {
     router: {
       query: { hash: addressMock.contract.hash, tab: 'contract_bytecode' },
@@ -125,15 +132,19 @@ test('self destructed', async({ render, mockApiResponse, page }) => {
   };
   await mockApiResponse('contract', contractMock.selfDestructed, { pathParams: { hash: addressMock.contract.hash } });
   await render(<ContractDetails/>, { hooksConfig }, { withSocket: true });
+  const socket = await createSocket();
+  await socketServer.joinChannel(socket, `addresses:${ addressMock.contract.hash.toLowerCase() }`);
 
   const section = page.locator('section', { hasText: 'Contract creation code' });
   await expect(section).toHaveScreenshot();
 });
 
-test('non verified', async({ render, mockApiResponse }) => {
+test('non verified', async({ render, mockApiResponse, createSocket }) => {
   await mockApiResponse('address', { ...addressMock.contract, name: null }, { pathParams: { hash: addressMock.contract.hash } });
   await mockApiResponse('contract', contractMock.nonVerified, { pathParams: { hash: addressMock.contract.hash } });
   const component = await render(<ContractDetails/>, { hooksConfig }, { withSocket: true });
+  const socket = await createSocket();
+  await socketServer.joinChannel(socket, `addresses:${ addressMock.contract.hash.toLowerCase() }`);
 
   await expect(component).toHaveScreenshot();
 });

ui/address/contract/ContractDetails.tsx

@@ -57,7 +57,7 @@ const ContractDetails = ({ addressHash, channel, mainContractQuery }: Props) =>
   const contractQuery = useApiQuery('contract', {
     pathParams: { hash: selectedItem?.address },
     queryOptions: {
-      enabled: Boolean(selectedItem?.address),
+      enabled: Boolean(selectedItem?.address && !mainContractQuery.isPlaceholderData),
       refetchOnMount: false,
       placeholderData: addressInfo?.is_verified ? stubs.CONTRACT_CODE_VERIFIED : stubs.CONTRACT_CODE_UNVERIFIED,
     },

ui/home/latestDeposits/LatestOptimisticDeposits.tsx

@@ -37,7 +37,7 @@ const LatestOptimisticDeposits = () => {
   }, [ setNum ]);
 
   const channel = useSocketChannel({
-    topic: 'optimism_deposits:new_deposits',
+    topic: 'optimism:new_deposits',
     onSocketClose: handleSocketClose,
     onSocketError: handleSocketError,
     isDisabled: false,
@@ -45,7 +45,7 @@ const LatestOptimisticDeposits = () => {
 
   useSocketMessage({
     channel,
-    event: 'deposits',
+    event: 'new_optimism_deposits',
     handler: handleNewDepositMessage,
   });
 

ui/snippets/footer/IntTxsIndexingStatus.tsx

@@ -39,7 +39,7 @@ const IntTxsIndexingStatus = () => {
 
   useSocketMessage({
     channel: internalTxsIndexingChannel,
-    event: 'internal_txs_index_status',
+    event: 'index_status',
     handler: handleInternalTxsIndexStatus,
   });
 

ui/snippets/header/alerts/IndexingBlocksAlert.tsx

@@ -51,7 +51,7 @@ const IndexingBlocksAlert = () => {
 
   useSocketMessage({
     channel: blockIndexingChannel,
-    event: 'block_index_status',
+    event: 'index_status',
     handler: handleBlocksIndexStatus,
   });