Process 403 error from address/token/contract handle (blockscout#2477)

* Process 403 error from address/token/contract handle

* review fix

Author: isstuev

icons/error-pages/403.svg

@@ -55,6 +55,7 @@
 	| "empty_search_result"
 	| "ENS_slim"
 	| "ENS"
+	| "error-pages/403"
 	| "error-pages/404"
 	| "error-pages/422"
 	| "error-pages/429"

public/icons/name.d.ts

@@ -25,6 +25,8 @@ interface Params {
   isEnabled?: boolean;
 }
 
+const NO_RPC_FALLBACK_ERROR_CODES = [ 403 ];
+
 export default function useAddressQuery({ hash, isEnabled = true }: Params): AddressQuery {
   const [ isRefetchEnabled, setRefetchEnabled ] = React.useState(false);
 
@@ -92,7 +94,7 @@ export default function useAddressQuery({ hash, isEnabled = true }: Params): Add
       };
     },
     placeholderData: [ GET_BALANCE ],
-    enabled: apiQuery.isError || apiQuery.errorUpdateCount > 0,
+    enabled: (apiQuery.isError || apiQuery.errorUpdateCount > 0) && !(apiQuery.error?.status && NO_RPC_FALLBACK_ERROR_CODES.includes(apiQuery.error?.status)),
     retry: false,
     refetchOnMount: false,
   });
@@ -107,15 +109,22 @@ export default function useAddressQuery({ hash, isEnabled = true }: Params): Add
     } else if (!apiQuery.isError) {
       setRefetchEnabled(false);
     }
-  }, [ apiQuery.errorUpdateCount, apiQuery.isError, apiQuery.isPlaceholderData ]);
+  }, [ apiQuery.errorUpdateCount, apiQuery.isError, apiQuery.isPlaceholderData, apiQuery.error?.status ]);
 
   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 isRpcQuery = Boolean(
+    (apiQuery.isError || apiQuery.isPlaceholderData) &&
+    !(apiQuery.error?.status && NO_RPC_FALLBACK_ERROR_CODES.includes(apiQuery.error?.status)) &&
+    apiQuery.errorUpdateCount > 0 &&
+    rpcQuery.data &&
+    publicClient,
+  );
+
   const query = isRpcQuery ? rpcQuery as UseQueryResult<Address, ResourceError<{ status: number }>> : apiQuery;
 
   return {

ui/address/utils/useAddressQuery.ts

@@ -20,6 +20,12 @@ test('status code 422', async({ render }) => {
   await expect(component).toHaveScreenshot();
 });
 
+test('status code 403', async({ render }) => {
+  const error = { message: 'Test', cause: { status: 403 } } as Error;
+  const component = await render(<AppError error={ error }/>);
+  await expect(component).toHaveScreenshot();
+});
+
 test('status code 500', async({ render }) => {
   const error = { message: 'Unknown error', cause: { status: 500 } } as Error;
   const component = await render(<AppError error={ error }/>);

ui/shared/AppError/AppError.pw.tsx

@@ -24,6 +24,10 @@ interface Props {
 }
 
 const ERROR_TEXTS: Record<string, { title: string; text: string }> = {
+  '403': {
+    title: 'Forbidden',
+    text: 'Access to this resource is restricted.',
+  },
   '404': {
     title: 'Page not found',
     text: 'This page is no longer explorable! If you are lost, use the search bar to find what you are looking for.',

ui/shared/AppError/AppError.tsx

@@ -4,6 +4,7 @@ import type { IconName } from 'ui/shared/IconSvg';
 import IconSvg from 'ui/shared/IconSvg';
 
 const ICONS: Record<string, IconName> = {
+  '403': 'error-pages/403',
   '404': 'error-pages/404',
   '422': 'error-pages/422',
   '429': 'error-pages/429',

ui/shared/AppError/AppErrorIcon.tsx

@@ -1,7 +1,7 @@
 import type { ResourceError } from 'lib/api/resources';
 
 // status codes when custom error screen should be shown
-const CUSTOM_STATUS_CODES = [ 404, 422, 429 ];
+const CUSTOM_STATUS_CODES = [ 403, 404, 422, 429 ];
 
 export default function isCustomAppError(error: ResourceError<unknown>) {
   return CUSTOM_STATUS_CODES.includes(error.status);