Graceful service degradation: address page (#1580)

* Graceful service degradation: address page

Fixes #1579

* fix ts

* [skip ci] check if public client was initialized

stubs/RPC.ts

@@ -53,6 +53,10 @@ export const GET_TRANSACTION_RECEIPT: TransactionReceipt = {
 
 export const GET_TRANSACTION_CONFIRMATIONS = BigInt(420);
 
+export const GET_BALANCE = BigInt(42_000_000_000_000);
+
+export const GET_TRANSACTIONS_COUNT = 42;
+
 export const GET_BLOCK: GetBlockReturnType<Chain, false, 'latest'> = {
   baseFeePerGas: BigInt(11),
   difficulty: BigInt(111),

types/api/address.ts

@@ -39,7 +39,7 @@ export interface Address extends UserTags {
 export interface AddressCounters {
   transactions_count: string;
   token_transfers_count: string;
-  gas_usage_count: string;
+  gas_usage_count: string | null;
   validations_count: string | null;
 }
 

ui/address/AddressDetails.pw.tsx

 import { test, expect } from '@playwright/experimental-ct-react';
-import type { UseQueryResult } from '@tanstack/react-query';
 import React from 'react';
 import type { WindowProvider } from 'wagmi';
 
-import type { Address } from 'types/api/address';
-
-import type { ResourceError } from 'lib/api/resources';
 import * as addressMock from 'mocks/address/address';
 import * as countersMock from 'mocks/address/counters';
 import * as tokensMock from 'mocks/address/tokens';
@@ -15,6 +11,7 @@ import * as configs from 'playwright/utils/configs';
 
 import AddressDetails from './AddressDetails';
 import MockAddressPage from './testUtils/MockAddressPage';
+import type { AddressQuery } from './utils/useAddressQuery';
 
 const ADDRESS_HASH = addressMock.hash;
 const API_URL_ADDRESS = buildApiUrl('address', { hash: ADDRESS_HASH });
@@ -40,7 +37,7 @@ test('contract +@mobile', async({ mount, page }) => {
 
   const component = await mount(
     <TestApp>
-      <AddressDetails addressQuery={{ data: addressMock.contract } as UseQueryResult<Address, ResourceError>}/>
+      <AddressDetails addressQuery={{ data: addressMock.contract } as AddressQuery}/>
     </TestApp>,
     { hooksConfig },
   );
@@ -82,7 +79,7 @@ test('token', async({ mount, page }) => {
   const component = await mount(
     <TestApp>
       <MockAddressPage>
-        <AddressDetails addressQuery={{ data: addressMock.token } as UseQueryResult<Address, ResourceError>}/>
+        <AddressDetails addressQuery={{ data: addressMock.token } as AddressQuery}/>
       </MockAddressPage>
     </TestApp>,
     { hooksConfig },
@@ -106,7 +103,7 @@ test('validator +@mobile', async({ mount, page }) => {
 
   const component = await mount(
     <TestApp>
-      <AddressDetails addressQuery={{ data: addressMock.validator } as UseQueryResult<Address, ResourceError>}/>
+      <AddressDetails addressQuery={{ data: addressMock.validator } as AddressQuery}/>
     </TestApp>,
     { hooksConfig },
   );

ui/address/AddressDetails.tsx

 import { Box, Text, Grid } from '@chakra-ui/react';
-import type { UseQueryResult } from '@tanstack/react-query';
 import { useRouter } from 'next/router';
 import React from 'react';
 
-import type { Address as TAddress } from 'types/api/address';
-
-import type { ResourceError } from 'lib/api/resources';
-import useApiQuery from 'lib/api/useApiQuery';
 import throwOnResourceLoadError from 'lib/errors/throwOnResourceLoadError';
 import getQueryParamString from 'lib/router/getQueryParamString';
-import { ADDRESS_COUNTERS } from 'stubs/address';
 import AddressCounterItem from 'ui/address/details/AddressCounterItem';
+import ServiceDegradationWarning from 'ui/shared/alerts/ServiceDegradationWarning';
 import DataFetchAlert from 'ui/shared/DataFetchAlert';
 import DetailsInfoItem from 'ui/shared/DetailsInfoItem';
 import DetailsSponsoredItem from 'ui/shared/DetailsSponsoredItem';
@@ -21,9 +16,11 @@ import TxEntity from 'ui/shared/entities/tx/TxEntity';
 import AddressBalance from './details/AddressBalance';
 import AddressNameInfo from './details/AddressNameInfo';
 import TokenSelect from './tokenSelect/TokenSelect';
+import useAddressCountersQuery from './utils/useAddressCountersQuery';
+import type { AddressQuery } from './utils/useAddressQuery';
 
 interface Props {
-  addressQuery: UseQueryResult<TAddress, ResourceError>;
+  addressQuery: AddressQuery;
   scrollRef?: React.RefObject<HTMLDivElement>;
 }
 
@@ -32,12 +29,9 @@ const AddressDetails = ({ addressQuery, scrollRef }: Props) => {
 
   const addressHash = getQueryParamString(router.query.hash);
 
-  const countersQuery = useApiQuery('address_counters', {
-    pathParams: { hash: addressHash },
-    queryOptions: {
-      enabled: Boolean(addressHash) && Boolean(addressQuery.data),
-      placeholderData: ADDRESS_COUNTERS,
-    },
+  const countersQuery = useAddressCountersQuery({
+    hash: addressHash,
+    addressQuery,
   });
 
   const handleCounterItemClick = React.useCallback(() => {
@@ -47,7 +41,7 @@ const AddressDetails = ({ addressQuery, scrollRef }: Props) => {
     }, 500);
   }, [ scrollRef ]);
 
-  const errorData = React.useMemo(() => ({
+  const error404Data = React.useMemo(() => ({
     hash: addressHash || '',
     is_contract: false,
     implementation_name: null,
@@ -76,142 +70,151 @@ const AddressDetails = ({ addressQuery, scrollRef }: Props) => {
     return <DataFetchAlert/>;
   }
 
-  const data = addressQuery.isError ? errorData : addressQuery.data;
+  const data = addressQuery.isError ? error404Data : addressQuery.data;
 
   if (!data) {
     return null;
   }
 
   return (
-    <Grid
-      columnGap={ 8 }
-      rowGap={{ base: 1, lg: 3 }}
-      templateColumns={{ base: 'minmax(0, 1fr)', lg: 'auto minmax(0, 1fr)' }} overflow="hidden"
-    >
-      <AddressNameInfo data={ data } isLoading={ addressQuery.isPlaceholderData }/>
-      { data.is_contract && data.creation_tx_hash && data.creator_address_hash && (
-        <DetailsInfoItem
-          title="Creator"
-          hint="Transaction and address of creation"
-          isLoading={ addressQuery.isPlaceholderData }
-        >
-          <AddressEntity
-            address={{ hash: data.creator_address_hash }}
-            truncation="constant"
-            noIcon
-          />
-          <Text whiteSpace="pre"> at txn </Text>
-          <TxEntity hash={ data.creation_tx_hash } truncation="constant" noIcon noCopy={ false }/>
-        </DetailsInfoItem>
-      ) }
-      { data.is_contract && data.implementation_address && (
-        <DetailsInfoItem
-          title="Implementation"
-          hint="Implementation address of the proxy contract"
-          columnGap={ 1 }
-        >
-          <AddressEntity
-            address={{ hash: data.implementation_address, name: data.implementation_name, is_contract: true }}
-            isLoading={ addressQuery.isPlaceholderData }
-            noIcon
-          />
-        </DetailsInfoItem>
-      ) }
-      <AddressBalance data={ data } isLoading={ addressQuery.isPlaceholderData }/>
-      { data.has_tokens && (
-        <DetailsInfoItem
-          title="Tokens"
-          hint="All tokens in the account and total value"
-          alignSelf="center"
-          py={ 0 }
-        >
-          { addressQuery.data ? <TokenSelect onClick={ handleCounterItemClick }/> : <Box py="6px">0</Box> }
-        </DetailsInfoItem>
-      ) }
-      <DetailsInfoItem
-        title="Transactions"
-        hint="Number of transactions related to this address"
-        isLoading={ addressQuery.isPlaceholderData || countersQuery.isPlaceholderData }
+    <>
+      { addressQuery.isDegradedData && <ServiceDegradationWarning isLoading={ addressQuery.isPlaceholderData } mb={ 6 }/> }
+      <Grid
+        columnGap={ 8 }
+        rowGap={{ base: 1, lg: 3 }}
+        templateColumns={{ base: 'minmax(0, 1fr)', lg: 'auto minmax(0, 1fr)' }} overflow="hidden"
       >
-        { addressQuery.data ? (
-          <AddressCounterItem
-            prop="transactions_count"
-            query={ countersQuery }
-            address={ data.hash }
-            onClick={ handleCounterItemClick }
-            isAddressQueryLoading={ addressQuery.isPlaceholderData }
-          />
-        ) :
-          0 }
-      </DetailsInfoItem>
-      { data.has_token_transfers && (
-        <DetailsInfoItem
-          title="Transfers"
-          hint="Number of transfers to/from this address"
-          isLoading={ addressQuery.isPlaceholderData || countersQuery.isPlaceholderData }
-        >
-          { addressQuery.data ? (
-            <AddressCounterItem
-              prop="token_transfers_count"
-              query={ countersQuery }
-              address={ data.hash }
-              onClick={ handleCounterItemClick }
-              isAddressQueryLoading={ addressQuery.isPlaceholderData }
+        <AddressNameInfo data={ data } isLoading={ addressQuery.isPlaceholderData }/>
+        { data.is_contract && data.creation_tx_hash && data.creator_address_hash && (
+          <DetailsInfoItem
+            title="Creator"
+            hint="Transaction and address of creation"
+            isLoading={ addressQuery.isPlaceholderData }
+          >
+            <AddressEntity
+              address={{ hash: data.creator_address_hash }}
+              truncation="constant"
+              noIcon
             />
-          ) :
-            0 }
-        </DetailsInfoItem>
-      ) }
-      <DetailsInfoItem
-        title="Gas used"
-        hint="Gas used by the address"
-        isLoading={ addressQuery.isPlaceholderData || countersQuery.isPlaceholderData }
-      >
-        { addressQuery.data ? (
-          <AddressCounterItem
-            prop="gas_usage_count"
-            query={ countersQuery }
-            address={ data.hash }
-            onClick={ handleCounterItemClick }
-            isAddressQueryLoading={ addressQuery.isPlaceholderData }
-          />
-        ) :
-          0 }
-      </DetailsInfoItem>
-      { data.has_validated_blocks && (
+            <Text whiteSpace="pre"> at txn </Text>
+            <TxEntity hash={ data.creation_tx_hash } truncation="constant" noIcon noCopy={ false }/>
+          </DetailsInfoItem>
+        ) }
+        { data.is_contract && data.implementation_address && (
+          <DetailsInfoItem
+            title="Implementation"
+            hint="Implementation address of the proxy contract"
+            columnGap={ 1 }
+          >
+            <AddressEntity
+              address={{ hash: data.implementation_address, name: data.implementation_name, is_contract: true }}
+              isLoading={ addressQuery.isPlaceholderData }
+              noIcon
+            />
+          </DetailsInfoItem>
+        ) }
+        <AddressBalance data={ data } isLoading={ addressQuery.isPlaceholderData }/>
+        { data.has_tokens && (
+          <DetailsInfoItem
+            title="Tokens"
+            hint="All tokens in the account and total value"
+            alignSelf="center"
+            py={ 0 }
+          >
+            { addressQuery.data ? <TokenSelect onClick={ handleCounterItemClick }/> : <Box py="6px">0</Box> }
+          </DetailsInfoItem>
+        ) }
         <DetailsInfoItem
-          title="Blocks validated"
-          hint="Number of blocks validated by this validator"
+          title="Transactions"
+          hint="Number of transactions related to this address"
           isLoading={ addressQuery.isPlaceholderData || countersQuery.isPlaceholderData }
         >
           { addressQuery.data ? (
             <AddressCounterItem
-              prop="validations_count"
+              prop="transactions_count"
               query={ countersQuery }
               address={ data.hash }
               onClick={ handleCounterItemClick }
               isAddressQueryLoading={ addressQuery.isPlaceholderData }
+              isDegradedData={ addressQuery.isDegradedData }
             />
           ) :
             0 }
         </DetailsInfoItem>
-      ) }
-      { data.block_number_balance_updated_at && (
-        <DetailsInfoItem
-          title="Last balance update"
-          hint="Block number in which the address was updated"
-          alignSelf="center"
-          py={{ base: '2px', lg: 1 }}
-          isLoading={ addressQuery.isPlaceholderData }
-        >
-          <BlockEntity
-            number={ data.block_number_balance_updated_at }
+        { data.has_token_transfers && (
+          <DetailsInfoItem
+            title="Transfers"
+            hint="Number of transfers to/from this address"
+            isLoading={ addressQuery.isPlaceholderData || countersQuery.isPlaceholderData }
+          >
+            { addressQuery.data ? (
+              <AddressCounterItem
+                prop="token_transfers_count"
+                query={ countersQuery }
+                address={ data.hash }
+                onClick={ handleCounterItemClick }
+                isAddressQueryLoading={ addressQuery.isPlaceholderData }
+                isDegradedData={ addressQuery.isDegradedData }
+              />
+            ) :
+              0 }
+          </DetailsInfoItem>
+        ) }
+        { countersQuery.data?.gas_usage_count && (
+          <DetailsInfoItem
+            title="Gas used"
+            hint="Gas used by the address"
+            isLoading={ addressQuery.isPlaceholderData || countersQuery.isPlaceholderData }
+          >
+            { addressQuery.data ? (
+              <AddressCounterItem
+                prop="gas_usage_count"
+                query={ countersQuery }
+                address={ data.hash }
+                onClick={ handleCounterItemClick }
+                isAddressQueryLoading={ addressQuery.isPlaceholderData }
+                isDegradedData={ addressQuery.isDegradedData }
+              />
+            ) :
+              0 }
+          </DetailsInfoItem>
+        ) }
+        { data.has_validated_blocks && (
+          <DetailsInfoItem
+            title="Blocks validated"
+            hint="Number of blocks validated by this validator"
+            isLoading={ addressQuery.isPlaceholderData || countersQuery.isPlaceholderData }
+          >
+            { addressQuery.data ? (
+              <AddressCounterItem
+                prop="validations_count"
+                query={ countersQuery }
+                address={ data.hash }
+                onClick={ handleCounterItemClick }
+                isAddressQueryLoading={ addressQuery.isPlaceholderData }
+                isDegradedData={ addressQuery.isDegradedData }
+              />
+            ) :
+              0 }
+          </DetailsInfoItem>
+        ) }
+        { data.block_number_balance_updated_at && (
+          <DetailsInfoItem
+            title="Last balance update"
+            hint="Block number in which the address was updated"
+            alignSelf="center"
+            py={{ base: '2px', lg: 1 }}
             isLoading={ addressQuery.isPlaceholderData }
-          />
-        </DetailsInfoItem>
-      ) }
-      <DetailsSponsoredItem isLoading={ addressQuery.isPlaceholderData }/>
-    </Grid>
+          >
+            <BlockEntity
+              number={ data.block_number_balance_updated_at }
+              isLoading={ addressQuery.isPlaceholderData }
+            />
+          </DetailsInfoItem>
+        ) }
+        <DetailsSponsoredItem isLoading={ addressQuery.isPlaceholderData }/>
+      </Grid>
+    </>
   );
 };
 

ui/address/details/AddressCounterItem.tsx

@@ -16,6 +16,7 @@ interface Props {
   address: string;
   onClick: () => void;
   isAddressQueryLoading: boolean;
+  isDegradedData: boolean;
 }
 
 const PROP_TO_TAB = {
@@ -24,7 +25,7 @@ const PROP_TO_TAB = {
   validations_count: 'blocks_validated',
 };
 
-const AddressCounterItem = ({ prop, query, address, onClick, isAddressQueryLoading }: Props) => {
+const AddressCounterItem = ({ prop, query, address, onClick, isAddressQueryLoading, isDegradedData }: Props) => {
   if (query.isPlaceholderData || isAddressQueryLoading) {
     return <Skeleton h={ 5 } w="80px" borderRadius="full"/>;
   }
@@ -44,6 +45,11 @@ const AddressCounterItem = ({ prop, query, address, onClick, isAddressQueryLoadi
       if (data === '0') {
         return <span>0</span>;
       }
+
+      if (isDegradedData) {
+        return <span>{ Number(data).toLocaleString() }</span>;
+      }
+
       return (
         <LinkInternal href={ route({ pathname: '/address/[hash]', query: { hash: address, tab: PROP_TO_TAB[prop] } }) } onClick={ onClick }>
           { Number(data).toLocaleString() }

ui/address/utils/useAddressCountersQuery.ts

+import type { UseQueryResult } from '@tanstack/react-query';
+import { useQuery } from '@tanstack/react-query';
+
+import type { AddressCounters } from 'types/api/address';
+
+import type { ResourceError } from 'lib/api/resources';
+import useApiQuery from 'lib/api/useApiQuery';
+import { publicClient } from 'lib/web3/client';
+import { ADDRESS_COUNTERS } from 'stubs/address';
+import { GET_TRANSACTIONS_COUNT } from 'stubs/RPC';
+
+import type { AddressQuery } from './useAddressQuery';
+
+type RpcResponseType = [
+  number | null,
+];
+
+export type AddressCountersQuery = UseQueryResult<AddressCounters, ResourceError<{ status: number }>> & {
+  isDegradedData: boolean;
+};
+
+interface Params {
+  hash: string;
+  addressQuery: AddressQuery;
+}
+
+export default function useAddressQuery({ hash, addressQuery }: Params): AddressCountersQuery {
+  const enabled = Boolean(hash) && !addressQuery.isPlaceholderData;
+
+  const apiQuery = useApiQuery<'address_counters', { status: number }>('address_counters', {
+    pathParams: { hash },
+    queryOptions: {
+      enabled: enabled && !addressQuery.isDegradedData,
+      placeholderData: ADDRESS_COUNTERS,
+      refetchOnMount: false,
+    },
+  });
+
+  const rpcQuery = useQuery<RpcResponseType, unknown, AddressCounters | null>({
+    queryKey: [ 'RPC', 'address_counters', { hash } ],
+    queryFn: async() => {
+      const txCount = publicClient.getTransactionCount({ address: hash as `0x${ string }` }).catch(() => null);
+
+      return Promise.all([
+        txCount,
+      ]);
+    },
+    select: (response) => {
+      const [ txCount ] = response;
+      return {
+        transactions_count: txCount?.toString() ?? '0',
+        token_transfers_count: '0',
+        gas_usage_count: null,
+        validations_count: null,
+      };
+    },
+    placeholderData: [ GET_TRANSACTIONS_COUNT ],
+    enabled: enabled && (addressQuery.isDegradedData || apiQuery.isError),
+    retry: false,
+    refetchOnMount: false,
+  });
+
+  const isRpcQuery = Boolean((addressQuery.isDegradedData || apiQuery.isError) && rpcQuery.data);
+  const query = isRpcQuery ? rpcQuery as UseQueryResult<AddressCounters, ResourceError<{ status: number }>> : apiQuery;
+
+  return {
+    ...query,
+    isDegradedData: isRpcQuery,
+  };
+}

ui/address/utils/useAddressQuery.ts

+import type { UseQueryResult } from '@tanstack/react-query';
+import { useQuery } from '@tanstack/react-query';
+import React from 'react';
+
+import type { Address } from 'types/api/address';
+
+import type { ResourceError } from 'lib/api/resources';
+import useApiQuery from 'lib/api/useApiQuery';
+import { retry } from 'lib/api/useQueryClientConfig';
+import { SECOND } from 'lib/consts';
+import { publicClient } from 'lib/web3/client';
+import { ADDRESS_INFO } from 'stubs/address';
+import { GET_BALANCE } from 'stubs/RPC';
+
+type RpcResponseType = [
+    bigint | null,
+];
+
+export type AddressQuery = UseQueryResult<Address, ResourceError<{ status: number }>> & {
+  isDegradedData: boolean;
+};
+
+interface Params {
+  hash: string;
+}
+
+export default function useAddressQuery({ hash }: Params): AddressQuery {
+  const [ isRefetchEnabled, setRefetchEnabled ] = React.useState(false);
+
+  const apiQuery = useApiQuery<'address', { status: number }>('address', {
+    pathParams: { hash },
+    queryOptions: {
+      enabled: Boolean(hash),
+      placeholderData: ADDRESS_INFO,
+      refetchOnMount: false,
+      retry: (failureCount, error) => {
+        if (isRefetchEnabled) {
+          return false;
+        }
+
+        return retry(failureCount, error);
+      },
+      refetchInterval: (): number | false => {
+        return isRefetchEnabled ? 15 * SECOND : false;
+      },
+    },
+  });
+
+  const rpcQuery = useQuery<RpcResponseType, unknown, Address | null>({
+    queryKey: [ 'RPC', 'address', { hash } ],
+    queryFn: async() => {
+      if (!publicClient) {
+        throw new Error('No public RPC client');
+      }
+
+      const balance = publicClient.getBalance({ address: hash as `0x${ string }` }).catch(() => null);
+
+      return Promise.all([
+        balance,
+      ]);
+    },
+    select: (response) => {
+      const [ balance ] = response;
+
+      if (!balance) {
+        return null;
+      }
+
+      return {
+        hash,
+        block_number_balance_updated_at: null,
+        coin_balance: balance.toString(),
+        creator_address_hash: null,
+        creation_tx_hash: null,
+        exchange_rate: null,
+        ens_domain_name: null,
+        has_custom_methods_read: false,
+        has_custom_methods_write: false,
+        has_decompiled_code: false,
+        has_logs: false,
+        has_methods_read: false,
+        has_methods_read_proxy: false,
+        has_methods_write: false,
+        has_methods_write_proxy: false,
+        has_token_transfers: false,
+        has_tokens: false,
+        has_validated_blocks: false,
+        implementation_address: null,
+        implementation_name: null,
+        is_contract: false,
+        is_verified: false,
+        name: null,
+        token: null,
+        watchlist_address_id: null,
+        private_tags: null,
+        public_tags: null,
+        watchlist_names: null,
+      };
+    },
+    placeholderData: [ GET_BALANCE ],
+    enabled: apiQuery.isError || apiQuery.errorUpdateCount > 0,
+    retry: false,
+    refetchOnMount: false,
+  });
+
+  React.useEffect(() => {
+    if (apiQuery.isPlaceholderData || !publicClient) {
+      return;
+    }
+
+    if (apiQuery.isError && apiQuery.errorUpdateCount === 1) {
+      setRefetchEnabled(true);
+    } else if (!apiQuery.isError) {
+      setRefetchEnabled(false);
+    }
+  }, [ apiQuery.errorUpdateCount, apiQuery.isError, apiQuery.isPlaceholderData ]);
+
+  React.useEffect(() => {
+    if (!rpcQuery.isPlaceholderData && !rpcQuery.data) {
+      setRefetchEnabled(false);
+    }
+  }, [ rpcQuery.data, rpcQuery.isPlaceholderData ]);
+
+  const isRpcQuery = Boolean((apiQuery.isError || apiQuery.isPlaceholderData) && apiQuery.errorUpdateCount > 0 && rpcQuery.data && publicClient);
+  const query = isRpcQuery ? rpcQuery as UseQueryResult<Address, ResourceError<{ status: number }>> : apiQuery;
+
+  return {
+    ...query,
+    isDegradedData: isRpcQuery,
+  };
+}

ui/pages/Address.tsx

@@ -10,7 +10,7 @@ import { useAppContext } from 'lib/contexts/app';
 import useContractTabs from 'lib/hooks/useContractTabs';
 import useIsSafeAddress from 'lib/hooks/useIsSafeAddress';
 import getQueryParamString from 'lib/router/getQueryParamString';
-import { ADDRESS_INFO, ADDRESS_TABS_COUNTERS } from 'stubs/address';
+import { ADDRESS_TABS_COUNTERS } from 'stubs/address';
 import { USER_OPS_ACCOUNT } from 'stubs/userOps';
 import AddressBlocksValidated from 'ui/address/AddressBlocksValidated';
 import AddressCoinBalance from 'ui/address/AddressCoinBalance';
@@ -27,6 +27,7 @@ import AddressFavoriteButton from 'ui/address/details/AddressFavoriteButton';
 import AddressQrCode from 'ui/address/details/AddressQrCode';
 import AddressEnsDomains from 'ui/address/ensDomains/AddressEnsDomains';
 import SolidityscanReport from 'ui/address/SolidityscanReport';
+import useAddressQuery from 'ui/address/utils/useAddressQuery';
 import AccountActionsMenu from 'ui/shared/AccountActionsMenu/AccountActionsMenu';
 import TextAd from 'ui/shared/ad/TextAd';
 import AddressAddToWallet from 'ui/shared/address/AddressAddToWallet';
@@ -48,13 +49,7 @@ const AddressPageContent = () => {
   const tabsScrollRef = React.useRef<HTMLDivElement>(null);
   const hash = getQueryParamString(router.query.hash);
 
-  const addressQuery = useApiQuery('address', {
-    pathParams: { hash },
-    queryOptions: {
-      enabled: Boolean(hash),
-      placeholderData: ADDRESS_INFO,
-    },
-  });
+  const addressQuery = useAddressQuery({ hash });
 
   const addressTabsCountersQuery = useApiQuery('address_tabs_counters', {
     pathParams: { hash },
@@ -176,7 +171,7 @@ const AddressPageContent = () => {
     />
   );
 
-  const content = addressQuery.isError ? null : <RoutedTabs tabs={ tabs } tabListProps={{ mt: 8 }}/>;
+  const content = (addressQuery.isError || addressQuery.isDegradedData) ? null : <RoutedTabs tabs={ tabs } tabListProps={{ mt: 8 }}/>;
 
   const backLink = React.useMemo(() => {
     const hasGoBackLink = appProps.referrer && appProps.referrer.includes('/accounts');