fix tx views

lib/web3/client.ts

@@ -7,6 +7,7 @@ export const publicClient = (() => {
     return;
   }
 
+  try {
     return createPublicClient({
       chain: currentChain,
       transport: http(),
@@ -14,4 +15,5 @@ export const publicClient = (() => {
         multicall: true,
       },
     });
+  } catch (error) {}
 })();

ui/pages/Transaction.tsx

@@ -7,6 +7,7 @@ import config from 'configs/app';
 import { useAppContext } from 'lib/contexts/app';
 import throwOnResourceLoadError from 'lib/errors/throwOnResourceLoadError';
 import getQueryParamString from 'lib/router/getQueryParamString';
+import { publicClient } from 'lib/web3/client';
 import TextAd from 'ui/shared/ad/TextAd';
 import EntityTags from 'ui/shared/EntityTags';
 import PageTitle from 'ui/shared/Page/PageTitle';
@@ -33,7 +34,7 @@ const TransactionPageContent = () => {
   const txQuery = useTxQuery();
   const { data, isPlaceholderData, isError, error, errorUpdateCount } = txQuery;
 
-  const showDegradedView = (isError || isPlaceholderData) && errorUpdateCount > 0;
+  const showDegradedView = publicClient && (isError || isPlaceholderData) && errorUpdateCount > 0;
 
   const tabs: Array<RoutedTab> = (() => {
     const detailsComponent = showDegradedView ?
@@ -97,9 +98,11 @@ const TransactionPageContent = () => {
     return <RoutedTabs tabs={ tabs }/>;
   })();
 
-  if (error?.status === 422) {
+  if (isError && !showDegradedView) {
+    if (error?.status === 422 || error?.status === 404) {
       throwOnResourceLoadError({ resource: 'tx', error, isError: true });
     }
+  }
 
   return (
     <>

ui/tx/TxDetails.tsx

 import React from 'react';
 
 import TestnetWarning from 'ui/shared/alerts/TestnetWarning';
+import DataFetchAlert from 'ui/shared/DataFetchAlert';
 
 import TxInfo from './details/TxInfo';
 import type { TxQuery } from './useTxQuery';
@@ -10,6 +11,10 @@ interface Props {
 }
 
 const TxDetails = ({ txQuery }: Props) => {
+  if (txQuery.isError) {
+    return <DataFetchAlert/>;
+  }
+
   return (
     <>
       <TestnetWarning mb={ 6 } isLoading={ txQuery.isPlaceholderData }/>

ui/tx/TxDetailsDegraded.tsx

@@ -36,6 +36,10 @@ const TxDetailsDegraded = ({ hash, txQuery }: Props) => {
   const query = useQuery<RpcResponseType, unknown, Transaction | null>({
     queryKey: [ 'RPC', 'tx', { hash } ],
     queryFn: async() => {
+      if (!publicClient) {
+        throw new Error('No public RPC client');
+      }
+
       const tx = await publicClient.getTransaction({ hash: hash as `0x${ string }` });
 
       if (!tx) {

ui/tx/TxUserOps.tsx

@@ -2,6 +2,7 @@ import React from 'react';
 
 import { USER_OPS_ITEM } from 'stubs/userOps';
 import { generateListStub } from 'stubs/utils';
+import DataFetchAlert from 'ui/shared/DataFetchAlert';
 import useQueryWithPages from 'ui/shared/pagination/useQueryWithPages';
 import TxPendingAlert from 'ui/tx/TxPendingAlert';
 import TxSocketAlert from 'ui/tx/TxSocketAlert';
@@ -28,6 +29,10 @@ const TxUserOps = ({ txQuery }: Props) => {
     return txQuery.socketStatus ? <TxSocketAlert status={ txQuery.socketStatus }/> : <TxPendingAlert/>;
   }
 
+  if (txQuery.isError) {
+    return <DataFetchAlert/>;
+  }
+
   return <UserOpsContent query={ userOpsQuery } showTx={ false }/>;
 };