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

* Process 403 error from address/token/contract handle

* review fix

icons/error-pages/403.svg

+<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 199 100">
+  <path fill="#101112" fill-opacity=".8" fill-rule="evenodd" d="M127.992 76.12q0 4.952-1.9 9.294-1.832 4.341-5.088 7.598t-7.598 5.156Q109.064 100 104.111 100h-4.138q-4.953 0-9.362-1.832-4.343-1.9-7.599-5.156t-5.156-7.598q-1.832-4.342-1.832-9.295V23.881q0-4.953 1.832-9.295 1.9-4.342 5.156-7.598Q86.27 3.732 90.611 1.9 95.02 0 99.973 0h4.138q4.953 0 9.295 1.9 4.341 1.83 7.598 5.088 3.257 3.255 5.088 7.598 1.9 4.342 1.9 9.295zm-8.752-52.24q0-3.256-1.221-6.037-1.221-2.85-3.324-4.953t-4.953-3.324q-2.781-1.221-6.038-1.221h-3.324q-3.256 0-6.106 1.22a16.7 16.7 0 0 0-4.952 3.325q-2.103 2.103-3.325 4.953-1.22 2.781-1.22 6.038v52.238q0 3.257 1.22 6.106a16.7 16.7 0 0 0 3.325 4.953 16.7 16.7 0 0 0 4.952 3.324q2.85 1.221 6.106 1.221h3.324q3.257 0 6.038-1.221 2.85-1.221 4.953-3.324a16.7 16.7 0 0 0 3.324-4.953q1.221-2.85 1.221-6.106zM47.829 81.819v16.825a8.75 8.75 0 0 1-8.752-8.752v-8.073H3.275a3.275 3.275 0 0 1-2.85-4.89L42.38 2.836a2.914 2.914 0 0 1 5.45 1.436v69.203h8.345a8.345 8.345 0 0 1-8.345 8.344m-8.752-56.513L12.28 73.474h26.797zm157.989 59.4q1.862-4.254 1.862-9.108v-6.516q0-3.39-.931-6.449a21.8 21.8 0 0 0-2.526-5.784 22.3 22.3 0 0 0-3.856-4.787 21.6 21.6 0 0 0-5.053-3.657 24.5 24.5 0 0 0 5.053-3.656 23.8 23.8 0 0 0 3.856-4.854 22 22 0 0 0 2.526-5.718q.931-3.125.931-6.515v-3.258q0-4.854-1.862-9.109-1.794-4.254-4.986-7.446t-7.446-4.986Q180.379 1 175.525 1h-4.056q-4.853 0-9.175 1.862-4.254 1.794-7.446 4.986t-5.053 7.446Q148 19.55 148 24.403a2.89 2.89 0 0 0 2.428 2.855l2.343.382a3.28 3.28 0 0 0 3.806-3.237q0-3.192 1.196-5.917 1.197-2.793 3.258-4.854a16.4 16.4 0 0 1 4.854-3.258q2.792-1.196 5.983-1.196h3.258q3.192 0 5.917 1.196 2.793 1.197 4.854 3.258t3.258 4.854q1.197 2.726 1.196 5.917v4.654q0 3.192-1.196 5.984a15.5 15.5 0 0 1-3.258 4.787q-2.061 2.061-4.854 3.258-2.725 1.196-5.917 1.196h-2.294a4.088 4.088 0 0 0 0 8.178h2.294q3.192 0 5.917 1.197 2.793 1.197 4.854 3.258t3.258 4.853q1.197 2.726 1.196 5.917v7.912q0 3.192-1.196 5.984a16.4 16.4 0 0 1-3.258 4.853q-2.061 2.061-4.854 3.258-2.725 1.197-5.917 1.197h-3.258q-3.191 0-5.983-1.197a16.4 16.4 0 0 1-4.854-3.258 16.4 16.4 0 0 1-3.258-4.853q-1.196-2.792-1.196-5.984a3.248 3.248 0 0 0-3.745-3.21l-2.401.373A2.87 2.87 0 0 0 148 75.597q0 4.854 1.795 9.109 1.861 4.254 5.053 7.446 3.192 3.191 7.446 5.053Q166.616 99 171.469 99h4.056q4.854 0 9.109-1.795 4.255-1.861 7.446-5.053 3.192-3.192 4.986-7.446" clip-rule="evenodd"/>
+</svg>

public/icons/name.d.ts

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

ui/address/utils/useAddressQuery.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,7 +109,7 @@ 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) {
@@ -115,7 +117,14 @@ export default function useAddressQuery({ hash, isEnabled = true }: Params): Add
     }
   }, [ 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/shared/AppError/AppError.pw.tsx

@@ -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.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/AppErrorIcon.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/isCustomAppError.ts

 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);