Contract tab: finding matching bytecode states (#2680)

* Contract tab: finding matching bytecode states

Fixes #2678

* handle case when there is only one sub-tab on contract tab

* tests

* prevent calling the smart contract resource twice when opening the tab

* [wip] add debug logs

* change api host for op sepolia

* rollback debug and update screenshots

lib/socket/types.ts

@@ -35,7 +35,9 @@ SocketMessage.AddressTxsPending |
 SocketMessage.AddressTokenTransfer |
 SocketMessage.AddressChangedBytecode |
 SocketMessage.AddressFetchedBytecode |
+SocketMessage.EthBytecodeDbLookupStarted |
 SocketMessage.SmartContractWasVerified |
+SocketMessage.SmartContractWasNotVerified |
 SocketMessage.TokenTransfers |
 SocketMessage.TokenTotalSupply |
 SocketMessage.TokenInstanceMetadataFetched |
@@ -76,7 +78,9 @@ export namespace SocketMessage {
   export type AddressTokenTransfer = SocketMessageParamsGeneric<'token_transfer', { token_transfers: Array<TokenTransfer> }>;
   export type AddressChangedBytecode = SocketMessageParamsGeneric<'changed_bytecode', Record<string, never>>;
   export type AddressFetchedBytecode = SocketMessageParamsGeneric<'fetched_bytecode', { fetched_bytecode: string }>;
+  export type EthBytecodeDbLookupStarted = SocketMessageParamsGeneric<'eth_bytecode_db_lookup_started', Record<string, never>>;
   export type SmartContractWasVerified = SocketMessageParamsGeneric<'smart_contract_was_verified', Record<string, never>>;
+  export type SmartContractWasNotVerified = SocketMessageParamsGeneric<'smart_contract_was_not_verified', Record<string, never>>;
   export type TokenTransfers = SocketMessageParamsGeneric<'token_transfer', { token_transfer: number }>;
   export type TokenTotalSupply = SocketMessageParamsGeneric<'total_supply', { total_supply: number }>;
   export type TokenInstanceMetadataFetched = SocketMessageParamsGeneric<'fetched_token_instance_metadata', TokenInstanceMetadataSocketMessage>;

playwright/fixtures/socketServer.ts

@@ -73,7 +73,9 @@ export function sendMessage(socket: WebSocket, channel: Channel, msg: 'verificat
 export function sendMessage(socket: WebSocket, channel: Channel, msg: 'total_supply', payload: { total_supply: number }): void;
 export function sendMessage(socket: WebSocket, channel: Channel, msg: 'changed_bytecode', payload: Record<string, never>): void;
 export function sendMessage(socket: WebSocket, channel: Channel, msg: 'fetched_bytecode', payload: { fetched_bytecode: string }): void;
+export function sendMessage(socket: WebSocket, channel: Channel, msg: 'eth_bytecode_db_lookup_started', payload: Record<string, never>): void;
 export function sendMessage(socket: WebSocket, channel: Channel, msg: 'smart_contract_was_verified', payload: Record<string, never>): void;
+export function sendMessage(socket: WebSocket, channel: Channel, msg: 'smart_contract_was_not_verified', payload: Record<string, never>): void;
 export function sendMessage(socket: WebSocket, channel: Channel, msg: 'token_transfer', payload: { token_transfers: Array<TokenTransfer> }): void;
 export function sendMessage(socket: WebSocket, channel: Channel, msg: 'fetched_token_instance_metadata', payload: TokenInstanceMetadataSocketMessage): void;
 export function sendMessage(socket: WebSocket, channel: Channel, msg: string, payload: unknown): void {

toolkit/components/AdaptiveTabs/AdaptiveTabs.tsx

@@ -42,10 +42,6 @@ const AdaptiveTabs = (props: Props) => {
     }
   }, [ defaultValue ]);
 
-  if (tabs.length === 1) {
-    return <div>{ tabs[0].component }</div>;
-  }
-
   return (
     <TabsRoot
       position="relative"

toolkit/components/AdaptiveTabs/AdaptiveTabsList.tsx

@@ -86,6 +86,10 @@ const AdaptiveTabsList = (props: Props) => {
   const activeTabIndex = tabsList.findIndex((tab) => getTabValue(tab) === activeTab) ?? 0;
   useScrollToActiveTab({ activeTabIndex, listRef, tabsRefs, isMobile, isLoading });
 
+  if (tabs.length === 1 && !leftSlot && !rightSlot) {
+    return null;
+  }
+
   const isReady = !isLoading && tabsCut !== undefined;
 
   return (
@@ -133,7 +137,7 @@ const AdaptiveTabsList = (props: Props) => {
         </Box>
       )
       }
-      { tabsList.map((tab, index) => {
+      { tabs.length > 1 && tabsList.map((tab, index) => {
         const value = getTabValue(tab);
         const ref = tabsRefs[index];
 

ui/address/AddressContract.pw.tsx

@@ -7,27 +7,27 @@ import { ENVS_MAP } from 'playwright/fixtures/mockEnvs';
 import * as socketServer from 'playwright/fixtures/socketServer';
 import { test, expect } from 'playwright/lib';
 
-import AddressContract from './AddressContract.pwstory';
+import AddressContract from './AddressContract';
 
 const hash = addressMock.contract.hash;
 
-test.beforeEach(async({ mockApiResponse }) => {
-  await mockApiResponse('general:address', addressMock.contract, { pathParams: { hash } });
-  await mockApiResponse(
-    'general:contract',
-    { ...contractInfoMock.verified, abi: [ ...contractMethodsMock.read, ...contractMethodsMock.write ] },
-    { pathParams: { hash } },
-  );
-});
-
 test.describe('ABI functionality', () => {
+  test.beforeEach(async({ mockApiResponse }) => {
+    await mockApiResponse('general:address', addressMock.contract, { pathParams: { hash } });
+    await mockApiResponse(
+      'general:contract',
+      { ...contractInfoMock.verified, abi: [ ...contractMethodsMock.read, ...contractMethodsMock.write ] },
+      { pathParams: { hash } },
+    );
+  });
+
   test('read', async({ render, createSocket }) => {
     const hooksConfig = {
       router: {
         query: { hash, tab: 'read_contract' },
       },
     };
-    const component = await render(<AddressContract/>, { hooksConfig }, { withSocket: true });
+    const component = await render(<AddressContract addressData={ addressMock.contract }/>, { hooksConfig }, { withSocket: true });
     const socket = await createSocket();
     await socketServer.joinChannel(socket, 'addresses:' + addressMock.contract.hash.toLowerCase());
 
@@ -43,7 +43,7 @@ test.describe('ABI functionality', () => {
       },
     };
     await mockEnvs(ENVS_MAP.noWalletClient);
-    const component = await render(<AddressContract/>, { hooksConfig }, { withSocket: true });
+    const component = await render(<AddressContract addressData={ addressMock.contract }/>, { hooksConfig }, { withSocket: true });
     const socket = await createSocket();
     await socketServer.joinChannel(socket, 'addresses:' + addressMock.contract.hash.toLowerCase());
 
@@ -58,7 +58,7 @@ test.describe('ABI functionality', () => {
         query: { hash, tab: 'write_contract' },
       },
     };
-    const component = await render(<AddressContract/>, { hooksConfig }, { withSocket: true });
+    const component = await render(<AddressContract addressData={ addressMock.contract }/>, { hooksConfig }, { withSocket: true });
     const socket = await createSocket();
     await socketServer.joinChannel(socket, 'addresses:' + addressMock.contract.hash.toLowerCase());
 
@@ -80,7 +80,7 @@ test.describe('ABI functionality', () => {
     };
     await mockEnvs(ENVS_MAP.noWalletClient);
 
-    const component = await render(<AddressContract/>, { hooksConfig }, { withSocket: true });
+    const component = await render(<AddressContract addressData={ addressMock.contract }/>, { hooksConfig }, { withSocket: true });
     const socket = await createSocket();
     await socketServer.joinChannel(socket, 'addresses:' + addressMock.contract.hash.toLowerCase());
 
@@ -94,3 +94,65 @@ test.describe('ABI functionality', () => {
     await expect(component.getByLabel('5.').getByRole('button', { name: 'Write' })).toBeDisabled();
   });
 });
+
+test.describe('auto verification status', () => {
+  const addressData = { ...addressMock.contract, is_verified: false, implementations: [] };
+  let contractApiUrl: string;
+
+  test.beforeEach(async({ mockApiResponse }) => {
+    await mockApiResponse('general:address', addressData, { pathParams: { hash } });
+    contractApiUrl = await mockApiResponse('general:contract', contractInfoMock.nonVerified, { pathParams: { hash } });
+  });
+
+  test('base flow', async({ render, createSocket }) => {
+    const hooksConfig = {
+      router: {
+        query: { hash, tab: 'contract' },
+      },
+    };
+    const component = await render(<AddressContract addressData={ addressData }/>, { hooksConfig }, { withSocket: true });
+
+    const socket = await createSocket();
+    const channel = await socketServer.joinChannel(socket, 'addresses:' + addressData.hash.toLowerCase());
+
+    socketServer.sendMessage(socket, channel, 'eth_bytecode_db_lookup_started', { });
+    const tabs = component.getByRole('tablist').first();
+    await expect(tabs).toHaveScreenshot();
+  });
+
+  test('after verification will refetch contract data', async({ page, render, createSocket }) => {
+    const hooksConfig = {
+      router: {
+        query: { hash, tab: 'contract' },
+      },
+    };
+    await render(<AddressContract addressData={ addressData }/>, { hooksConfig }, { withSocket: true });
+
+    const socket = await createSocket();
+    const channel = await socketServer.joinChannel(socket, 'addresses:' + addressData.hash.toLowerCase());
+
+    socketServer.sendMessage(socket, channel, 'smart_contract_was_verified', { });
+
+    const contractRequest = await page.waitForRequest(contractApiUrl);
+    expect(contractRequest).toBeTruthy();
+  });
+
+  test('with one tab', async({ render, createSocket, mockEnvs }) => {
+    const hooksConfig = {
+      router: {
+        query: { hash, tab: 'contract' },
+      },
+    };
+    await mockEnvs([
+      [ 'NEXT_PUBLIC_IS_ACCOUNT_SUPPORTED', 'false' ],
+    ]);
+    const component = await render(<AddressContract addressData={ addressData }/>, { hooksConfig }, { withSocket: true });
+
+    const socket = await createSocket();
+    const channel = await socketServer.joinChannel(socket, 'addresses:' + addressData.hash.toLowerCase());
+
+    socketServer.sendMessage(socket, channel, 'smart_contract_was_not_verified', { });
+    const tabs = component.getByRole('tablist').first();
+    await expect(tabs).toHaveScreenshot();
+  });
+});

ui/address/AddressContract.pwstory.tsx

-import { useRouter } from 'next/router';
-import React from 'react';
-
-import useApiQuery from 'lib/api/useApiQuery';
-import getQueryParamString from 'lib/router/getQueryParamString';
-import useContractTabs from 'ui/address/contract/useContractTabs';
-
-import AddressContract from './AddressContract';
-
-const AddressContractPwStory = () => {
-  const router = useRouter();
-  const hash = getQueryParamString(router.query.hash);
-  const addressQuery = useApiQuery('general:address', { pathParams: { hash } });
-  const { tabs } = useContractTabs(addressQuery.data, false);
-  return <AddressContract tabs={ tabs } shouldRender={ true } isLoading={ false }/>;
-};
-
-export default AddressContractPwStory;

ui/address/AddressContract.tsx

+import { useQueryClient } from '@tanstack/react-query';
+import { useRouter } from 'next/router';
 import React from 'react';
 
-import type { TabItemRegular } from 'toolkit/components/AdaptiveTabs/types';
+import type { SocketMessage } from 'lib/socket/types';
+import type { Address } from 'types/api/address';
 
+import { getResourceKey } from 'lib/api/useApiQuery';
+import delay from 'lib/delay';
+import useIsMobile from 'lib/hooks/useIsMobile';
+import getQueryParamString from 'lib/router/getQueryParamString';
+import useSocketChannel from 'lib/socket/useSocketChannel';
+import useSocketMessage from 'lib/socket/useSocketMessage';
 import RoutedTabs from 'toolkit/components/RoutedTabs/RoutedTabs';
+import { SECOND } from 'toolkit/utils/consts';
+
+import type { TContractAutoVerificationStatus } from './contract/ContractAutoVerificationStatus';
+import ContractAutoVerificationStatus from './contract/ContractAutoVerificationStatus';
+import useContractTabs from './contract/useContractTabs';
+import { CONTRACT_TAB_IDS } from './contract/utils';
 
 interface Props {
-  tabs: Array<TabItemRegular>;
-  isLoading: boolean;
-  shouldRender?: boolean;
+  addressData: Address | undefined;
+  isLoading?: boolean;
+  hasMudTab?: boolean;
 }
 
-const AddressContract = ({ tabs, isLoading, shouldRender }: Props) => {
-  if (!shouldRender) {
+const AddressContract = ({ addressData, isLoading = false, hasMudTab }: Props) => {
+  const [ isQueryEnabled, setIsQueryEnabled ] = React.useState(false);
+  const [ autoVerificationStatus, setAutoVerificationStatus ] = React.useState<TContractAutoVerificationStatus | null>(null);
+
+  const router = useRouter();
+  const queryClient = useQueryClient();
+  const isMobile = useIsMobile();
+  const handleChannelJoin = React.useCallback(() => {
+    setIsQueryEnabled(true);
+  }, []);
+  const handleChannelError = React.useCallback(() => {
+    setIsQueryEnabled(true);
+  }, []);
+
+  const tab = getQueryParamString(router.query.tab);
+  const isSocketEnabled = Boolean(addressData?.hash) && addressData?.is_contract && !isLoading && CONTRACT_TAB_IDS.concat('contract' as never).includes(tab);
+
+  const channel = useSocketChannel({
+    topic: `addresses:${ addressData?.hash?.toLowerCase() }`,
+    isDisabled: !isSocketEnabled,
+    onJoin: handleChannelJoin,
+    onSocketError: handleChannelError,
+  });
+
+  const contractTabs = useContractTabs({
+    addressData,
+    isEnabled: isQueryEnabled,
+    hasMudTab,
+    channel,
+  });
+
+  const handleLookupStartedMessage: SocketMessage.EthBytecodeDbLookupStarted['handler'] = React.useCallback(() => {
+    setAutoVerificationStatus('pending');
+  }, []);
+
+  const handleContractWasVerifiedMessage: SocketMessage.SmartContractWasVerified['handler'] = React.useCallback(async() => {
+    setAutoVerificationStatus('success');
+    await queryClient.refetchQueries({
+      queryKey: getResourceKey('general:address', { pathParams: { hash: addressData?.hash } }),
+    });
+    await queryClient.refetchQueries({
+      queryKey: getResourceKey('general:contract', { pathParams: { hash: addressData?.hash } }),
+    });
+    setAutoVerificationStatus(null);
+  }, [ addressData?.hash, queryClient ]);
+
+  const handleContractWasNotVerifiedMessage: SocketMessage.SmartContractWasNotVerified['handler'] = React.useCallback(async() => {
+    setAutoVerificationStatus('failed');
+    await delay(10 * SECOND);
+    setAutoVerificationStatus(null);
+  }, []);
+
+  useSocketMessage({ channel, event: 'eth_bytecode_db_lookup_started', handler: handleLookupStartedMessage });
+  useSocketMessage({ channel, event: 'smart_contract_was_verified', handler: handleContractWasVerifiedMessage });
+  useSocketMessage({ channel, event: 'smart_contract_was_not_verified', handler: handleContractWasNotVerifiedMessage });
+
+  if (isLoading) {
     return null;
   }
 
+  const rightSlot = autoVerificationStatus ?
+    <ContractAutoVerificationStatus status={ autoVerificationStatus } mode={ isMobile && contractTabs.tabs.length > 1 ? 'tooltip' : 'inline' }/> :
+    null;
+
   return (
-    <RoutedTabs tabs={ tabs } variant="secondary" size="sm" isLoading={ isLoading }/>
+    <RoutedTabs
+      tabs={ contractTabs.tabs }
+      variant="secondary"
+      size="sm"
+      isLoading={ contractTabs.isLoading }
+      rightSlot={ rightSlot }
+      rightSlotProps={{ ml: contractTabs.tabs.length > 1 ? { base: 'auto', md: 6 } : 0 }}
+    />
   );
 };
 

ui/address/contract/ContractAutoVerificationStatus.tsx

+import { Box, HStack, Spinner } from '@chakra-ui/react';
+import React from 'react';
+
+import { Tooltip } from 'toolkit/chakra/tooltip';
+import IconSvg from 'ui/shared/IconSvg';
+
+const STATUS_MAP = {
+  pending: {
+    text: 'Checking contract verification',
+    leftElement: <Spinner size="sm"/>,
+  },
+  success: {
+    text: 'Contract successfully verified',
+    leftElement: <IconSvg name="verified_slim" boxSize={ 5 } color="green.500"/>,
+  },
+  failed: {
+    text: 'Contract not verified automatically. Please verify manually.',
+    leftElement: <IconSvg name="status/warning" boxSize={ 5 } color="orange.400"/>,
+  },
+};
+
+export type TContractAutoVerificationStatus = keyof typeof STATUS_MAP;
+
+interface Props {
+  status: TContractAutoVerificationStatus;
+  mode?: 'inline' | 'tooltip';
+}
+
+const ContractAutoVerificationStatus = ({ status, mode = 'inline' }: Props) => {
+  return (
+    <Tooltip content={ STATUS_MAP[status].text } disabled={ mode === 'inline' }>
+      <HStack gap={ 2 } whiteSpace="pre-wrap">
+        { STATUS_MAP[status].leftElement }
+        <Box display={ mode === 'inline' ? 'inline' : 'none' } textStyle="sm">{ STATUS_MAP[status].text }</Box>
+      </HStack>
+    </Tooltip>
+  );
+};
+
+export default React.memo(ContractAutoVerificationStatus);

ui/address/contract/ContractDetails.pw.tsx

@@ -18,13 +18,11 @@ const hooksConfig = {
 // test cases which use socket cannot run in parallel since the socket server always run on the same port
 test.describe.configure({ mode: 'serial' });
 
-let addressApiUrl: string;
-
 test.beforeEach(async({ mockApiResponse, page }) => {
   await page.route('https://cdn.jsdelivr.net/npm/monaco-editor@0.52.2/**', (route) => {
     route.abort();
   });
-  addressApiUrl = await mockApiResponse('general:address', addressMock.contract, { pathParams: { hash: addressMock.contract.hash } });
+  await mockApiResponse('general:address', addressMock.contract, { pathParams: { hash: addressMock.contract.hash } });
 });
 
 test.describe('full view', () => {
@@ -103,19 +101,6 @@ test.describe('mobile view', () => {
   });
 });
 
-test('verified via lookup in eth_bytecode_db', async({ render, mockApiResponse, createSocket, page }) => {
-  const contractApiUrl = await mockApiResponse('general:contract', contractMock.nonVerified, { pathParams: { hash: addressMock.contract.hash } });
-  await render(<ContractDetails/>, { hooksConfig }, { withSocket: true });
-
-  const socket = await createSocket();
-  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);
-
-  expect(request).toBeTruthy();
-});
-
 test('verified with multiple sources', async({ render, page, mockApiResponse, createSocket }) => {
   await mockApiResponse('general:contract', contractMock.withMultiplePaths, { pathParams: { hash: addressMock.contract.hash } });
   await render(<ContractDetails/>, { hooksConfig }, { withSocket: true });

ui/address/contract/ContractDetails.tsx

 import { Box } from '@chakra-ui/react';
 import type { UseQueryResult } from '@tanstack/react-query';
-import { useQueryClient } from '@tanstack/react-query';
 import { useRouter } from 'next/router';
 import type { Channel } from 'phoenix';
 import React from 'react';
 
-import type { SocketMessage } from 'lib/socket/types';
 import type { Address } from 'types/api/address';
 import type { AddressImplementation } from 'types/api/addressParams';
 import type { SmartContract } from 'types/api/contract';
 
 import type { ResourceError } from 'lib/api/resources';
-import useApiQuery, { getResourceKey } from 'lib/api/useApiQuery';
+import useApiQuery from 'lib/api/useApiQuery';
 import getQueryParamString from 'lib/router/getQueryParamString';
-import useSocketMessage from 'lib/socket/useSocketMessage';
 import * as stubs from 'stubs/contract';
 import RoutedTabs from 'toolkit/components/RoutedTabs/RoutedTabs';
 import DataFetchAlert from 'ui/shared/DataFetchAlert';
@@ -36,8 +33,6 @@ const ContractDetails = ({ addressData, channel, mainContractQuery }: Props) =>
   const router = useRouter();
   const sourceAddress = getQueryParamString(router.query.source_address);
 
-  const queryClient = useQueryClient();
-
   const sourceItems: Array<AddressImplementation> = React.useMemo(() => {
     const currentAddressDefaultName = addressData?.proxy_type === 'eip7702' ? 'Current address' : 'Current contract';
     const currentAddressItem = { address_hash: addressData.hash, name: addressData?.name || currentAddressDefaultName };
@@ -56,30 +51,15 @@ const ContractDetails = ({ addressData, channel, mainContractQuery }: Props) =>
   const contractQuery = useApiQuery('general:contract', {
     pathParams: { hash: selectedItem?.address_hash },
     queryOptions: {
-      enabled: Boolean(selectedItem?.address_hash && !mainContractQuery.isPlaceholderData),
+      enabled: Boolean(selectedItem?.address_hash && !mainContractQuery.isPlaceholderData && selectedItem.address_hash !== addressData.hash),
       refetchOnMount: false,
       placeholderData: addressData?.is_verified ? stubs.CONTRACT_CODE_VERIFIED : stubs.CONTRACT_CODE_UNVERIFIED,
     },
   });
-  const { data, isPlaceholderData, isError } = contractQuery;
+  const { data, isPlaceholderData, isError } = selectedItem.address_hash !== addressData.hash ? contractQuery : mainContractQuery;
 
   const tabs = useContractDetailsTabs({ data, isLoading: isPlaceholderData, addressData, sourceAddress: selectedItem.address_hash });
 
-  const handleContractWasVerifiedMessage: SocketMessage.SmartContractWasVerified['handler'] = React.useCallback(() => {
-    queryClient.refetchQueries({
-      queryKey: getResourceKey('general:address', { pathParams: { hash: addressData.hash } }),
-    });
-    queryClient.refetchQueries({
-      queryKey: getResourceKey('general:contract', { pathParams: { hash: addressData.hash } }),
-    });
-  }, [ addressData.hash, queryClient ]);
-
-  useSocketMessage({
-    channel,
-    event: 'smart_contract_was_verified',
-    handler: handleContractWasVerifiedMessage,
-  });
-
   if (isError) {
     return <DataFetchAlert/>;
   }

ui/address/contract/specs/ContractDetails.tsx

@@ -2,6 +2,7 @@ import { useRouter } from 'next/router';
 
 import useApiQuery from 'lib/api/useApiQuery';
 import getQueryParamString from 'lib/router/getQueryParamString';
+import useSocketChannel from 'lib/socket/useSocketChannel';
 
 import useContractTabs from '../useContractTabs';
 
@@ -9,7 +10,12 @@ const ContractDetails = () => {
   const router = useRouter();
   const hash = getQueryParamString(router.query.hash);
   const addressQuery = useApiQuery('general:address', { pathParams: { hash } });
-  const { tabs } = useContractTabs(addressQuery.data, false);
+  const channel = useSocketChannel({
+    topic: `addresses:${ hash?.toLowerCase() }`,
+    isDisabled: !addressQuery.data,
+  });
+
+  const { tabs } = useContractTabs({ addressData: addressQuery.data, isEnabled: true, channel });
   const content = tabs.find(({ id }) => id === 'contract_code')?.component;
   return content ?? null;
 };

ui/address/contract/useContractTabs.tsx

-import { useRouter } from 'next/router';
+import type { Channel } from 'phoenix';
 import React from 'react';
 
 import type { Address } from 'types/api/address';
 
 import config from 'configs/app';
 import useApiQuery from 'lib/api/useApiQuery';
-import getQueryParamString from 'lib/router/getQueryParamString';
-import useSocketChannel from 'lib/socket/useSocketChannel';
 import * as stubs from 'stubs/contract';
 import ContractDetails from 'ui/address/contract/ContractDetails';
 import ContractMethodsCustom from 'ui/address/contract/methods/ContractMethodsCustom';
@@ -16,7 +14,7 @@ import ContractMethodsRegular from 'ui/address/contract/methods/ContractMethodsR
 import ContentLoader from 'ui/shared/ContentLoader';
 
 import type { CONTRACT_MAIN_TAB_IDS } from './utils';
-import { CONTRACT_DETAILS_TAB_IDS, CONTRACT_TAB_IDS } from './utils';
+import { CONTRACT_DETAILS_TAB_IDS } from './utils';
 
 interface ContractTab {
   id: typeof CONTRACT_MAIN_TAB_IDS[number] | Array<typeof CONTRACT_MAIN_TAB_IDS[number]>;
@@ -30,54 +28,43 @@ interface ReturnType {
   isLoading: boolean;
 }
 
-export default function useContractTabs(data: Address | undefined, isPlaceholderData: boolean, hasMudTab: boolean = false): ReturnType {
-  const [ isQueryEnabled, setIsQueryEnabled ] = React.useState(false);
-
-  const router = useRouter();
-  const tab = getQueryParamString(router.query.tab);
-
-  const isEnabled = Boolean(data?.hash) && data?.is_contract && !isPlaceholderData && CONTRACT_TAB_IDS.concat('contract' as never).includes(tab);
-
-  const enableQuery = React.useCallback(() => {
-    setIsQueryEnabled(true);
-  }, []);
+interface Props {
+  addressData: Address | undefined;
+  isEnabled: boolean;
+  hasMudTab?: boolean;
+  channel: Channel | undefined;
+}
 
+export default function useContractTabs({ addressData, isEnabled, hasMudTab, channel }: Props): ReturnType {
   const contractQuery = useApiQuery('general:contract', {
-    pathParams: { hash: data?.hash },
+    pathParams: { hash: addressData?.hash },
     queryOptions: {
-      enabled: isEnabled && isQueryEnabled,
+      enabled: isEnabled,
       refetchOnMount: false,
-      placeholderData: data?.is_verified ? stubs.CONTRACT_CODE_VERIFIED : stubs.CONTRACT_CODE_UNVERIFIED,
+      placeholderData: addressData?.is_verified ? stubs.CONTRACT_CODE_VERIFIED : stubs.CONTRACT_CODE_UNVERIFIED,
     },
   });
 
   const mudSystemsQuery = useApiQuery('general:mud_systems', {
-    pathParams: { hash: data?.hash },
+    pathParams: { hash: addressData?.hash },
     queryOptions: {
-      enabled: isEnabled && isQueryEnabled && hasMudTab,
+      enabled: isEnabled && hasMudTab,
       refetchOnMount: false,
       placeholderData: stubs.MUD_SYSTEMS,
     },
   });
 
-  const channel = useSocketChannel({
-    topic: `addresses:${ data?.hash?.toLowerCase() }`,
-    isDisabled: !isEnabled,
-    onJoin: enableQuery,
-    onSocketError: enableQuery,
-  });
-
   const verifiedImplementations = React.useMemo(() => {
-    return data?.implementations?.filter(({ name, address_hash: addressHash }) => name && addressHash && addressHash !== data?.hash) || [];
-  }, [ data?.hash, data?.implementations ]);
+    return addressData?.implementations?.filter(({ name, address_hash: addressHash }) => name && addressHash && addressHash !== addressData?.hash) || [];
+  }, [ addressData?.hash, addressData?.implementations ]);
 
   return React.useMemo(() => {
     return {
       tabs: [
-        data && {
+        addressData && {
           id: 'contract_code' as const,
           title: 'Code',
-          component: <ContractDetails mainContractQuery={ contractQuery } channel={ channel } addressData={ data }/>,
+          component: <ContractDetails mainContractQuery={ contractQuery } channel={ channel } addressData={ addressData }/>,
           subTabs: CONTRACT_DETAILS_TAB_IDS as unknown as Array<string>,
         },
         contractQuery.data?.abi && {
@@ -92,7 +79,7 @@ export default function useContractTabs(data: Address | undefined, isPlaceholder
             <ContractMethodsProxy
               implementations={ verifiedImplementations }
               isLoading={ contractQuery.isPlaceholderData }
-              proxyType={ data?.proxy_type }
+              proxyType={ addressData?.proxy_type }
             />
           ),
         },
@@ -112,7 +99,7 @@ export default function useContractTabs(data: Address | undefined, isPlaceholder
       isLoading: contractQuery.isPlaceholderData,
     };
   }, [
-    data,
+    addressData,
     contractQuery,
     channel,
     verifiedImplementations,

ui/pages/Address.tsx

@@ -39,7 +39,6 @@ import AddressTokenTransfers from 'ui/address/AddressTokenTransfers';
 import AddressTxs from 'ui/address/AddressTxs';
 import AddressUserOps from 'ui/address/AddressUserOps';
 import AddressWithdrawals from 'ui/address/AddressWithdrawals';
-import useContractTabs from 'ui/address/contract/useContractTabs';
 import { CONTRACT_TAB_IDS } from 'ui/address/contract/utils';
 import AddressFavoriteButton from 'ui/address/details/AddressFavoriteButton';
 import AddressMetadataAlert from 'ui/address/details/AddressMetadataAlert';
@@ -172,12 +171,6 @@ const AddressPageContent = () => {
 
   const xStarQuery = useFetchXStarScore({ hash });
 
-  const contractTabs = useContractTabs(
-    addressQuery.data,
-    config.features.mudFramework.isEnabled ? (mudTablesCountQuery.isPlaceholderData || addressQuery.isPlaceholderData) : addressQuery.isPlaceholderData,
-    Boolean(config.features.mudFramework.isEnabled && mudTablesCountQuery.data && mudTablesCountQuery.data > 0),
-  );
-
   const tabs: Array<TabItemRegular> = React.useMemo(() => {
     return [
       {
@@ -203,9 +196,9 @@ const AddressPageContent = () => {
         },
         component: (
           <AddressContract
-            tabs={ contractTabs.tabs }
-            shouldRender={ !isTabsLoading }
-            isLoading={ contractTabs.isLoading }
+            addressData={ addressQuery.data }
+            isLoading={ isTabsLoading }
+            hasMudTab={ Boolean(config.features.mudFramework.isEnabled && mudTablesCountQuery.data && mudTablesCountQuery.data > 0) }
           />
         ),
         subTabs: CONTRACT_TAB_IDS,
@@ -309,7 +302,6 @@ const AddressPageContent = () => {
   }, [
     addressQuery,
     countersQuery,
-    contractTabs,
     addressTabsCountersQuery.data,
     userOpsAccountQuery.data,
     isTabsLoading,

ui/pages/Token.tsx

@@ -26,7 +26,6 @@ import Address3rdPartyWidgets from 'ui/address/Address3rdPartyWidgets';
 import useAddress3rdPartyWidgets from 'ui/address/address3rdPartyWidgets/useAddress3rdPartyWidgets';
 import AddressContract from 'ui/address/AddressContract';
 import AddressCsvExportLink from 'ui/address/AddressCsvExportLink';
-import useContractTabs from 'ui/address/contract/useContractTabs';
 import { CONTRACT_TAB_IDS } from 'ui/address/contract/utils';
 import TextAd from 'ui/shared/ad/TextAd';
 import IconSvg from 'ui/shared/IconSvg';
@@ -171,8 +170,6 @@ const TokenPageContent = () => {
     addressQuery.isPlaceholderData ||
     (address3rdPartyWidgets.isEnabled && address3rdPartyWidgets.configQuery.isPlaceholderData);
 
-  const contractTabs = useContractTabs(addressQuery.data, addressQuery.isPlaceholderData);
-
   const tabs: Array<TabItemRegular> = [
     hasInventoryTab ? {
       id: 'inventory',
@@ -203,7 +200,7 @@ const TokenPageContent = () => {
 
         return 'Contract';
       },
-      component: <AddressContract tabs={ contractTabs.tabs } isLoading={ contractTabs.isLoading } shouldRender={ !isLoading }/>,
+      component: <AddressContract addressData={ addressQuery.data } isLoading={ isLoading }/>,
       subTabs: CONTRACT_TAB_IDS,
     } : undefined,
     (address3rdPartyWidgets.isEnabled && address3rdPartyWidgets.items.length > 0) ? {