fix block views

lib/web3/client.ts

@@ -2,10 +2,16 @@ import { createPublicClient, http } from 'viem';
 
 import currentChain from './currentChain';
 
-export const publicClient = createPublicClient({
+export const publicClient = (() => {
+  if (currentChain.rpcUrls.public.http.filter(Boolean).length === 0) {
+    return;
+  }
+
+  return createPublicClient({
     chain: currentChain,
     transport: http(),
     batch: {
       multicall: true,
     },
-});
+  });
+})();

ui/block/useBlockQuery.tsx

@@ -50,6 +50,10 @@ export default function useBlockQuery({ heightOrHash }: Params): BlockQuery {
   const rpcQuery = useQuery<RpcResponseType, unknown, Block | null>({
     queryKey: [ 'RPC', 'block', { heightOrHash } ],
     queryFn: async() => {
+      if (!publicClient) {
+        return null;
+      }
+
       const blockParams = heightOrHash.startsWith('0x') ? { blockHash: heightOrHash as `0x${ string }` } : { blockNumber: BigInt(heightOrHash) };
       return publicClient.getBlock(blockParams).catch(() => null);
     },
@@ -86,13 +90,13 @@ export default function useBlockQuery({ heightOrHash }: Params): BlockQuery {
       };
     },
     placeholderData: GET_BLOCK,
-    enabled: apiQuery.isError || apiQuery.errorUpdateCount > 0,
+    enabled: publicClient !== undefined && (apiQuery.isError || apiQuery.errorUpdateCount > 0),
     retry: false,
     refetchOnMount: false,
   });
 
   React.useEffect(() => {
-    if (apiQuery.isPlaceholderData) {
+    if (apiQuery.isPlaceholderData || !publicClient) {
       return;
     }
 
@@ -109,7 +113,7 @@ export default function useBlockQuery({ heightOrHash }: Params): BlockQuery {
     }
   }, [ rpcQuery.data, rpcQuery.isPlaceholderData ]);
 
-  const isRpcQuery = Boolean((apiQuery.isError || apiQuery.isPlaceholderData) && apiQuery.errorUpdateCount > 0 && rpcQuery.data);
+  const isRpcQuery = Boolean(publicClient && (apiQuery.isError || apiQuery.isPlaceholderData) && apiQuery.errorUpdateCount > 0 && rpcQuery.data);
   const query = isRpcQuery ? rpcQuery as UseQueryResult<Block, ResourceError<{ status: number }>> : apiQuery;
 
   return {

ui/block/useBlockTxQuery.tsx

@@ -63,6 +63,10 @@ export default function useBlockTxQuery({ heightOrHash, blockQuery, tab }: Param
   const rpcQuery = useQuery<RpcResponseType, unknown, BlockTransactionsResponse | null>({
     queryKey: [ 'RPC', 'block_txs', { heightOrHash } ],
     queryFn: async() => {
+      if (!publicClient) {
+        return null;
+      }
+
       const blockParams = heightOrHash.startsWith('0x') ?
         { blockHash: heightOrHash as `0x${ string }`, includeTransactions: true } :
         { blockNumber: BigInt(heightOrHash), includeTransactions: true };
@@ -125,13 +129,13 @@ export default function useBlockTxQuery({ heightOrHash, blockQuery, tab }: Param
       };
     },
     placeholderData: GET_BLOCK_WITH_TRANSACTIONS,
-    enabled: tab === 'txs' && (blockQuery.isDegradedData || apiQuery.isError || apiQuery.errorUpdateCount > 0),
+    enabled: publicClient !== undefined && tab === 'txs' && (blockQuery.isDegradedData || apiQuery.isError || apiQuery.errorUpdateCount > 0),
     retry: false,
     refetchOnMount: false,
   });
 
   React.useEffect(() => {
-    if (apiQuery.isPlaceholderData) {
+    if (apiQuery.isPlaceholderData || !publicClient) {
       return;
     }
 
@@ -151,7 +155,7 @@ export default function useBlockTxQuery({ heightOrHash, blockQuery, tab }: Param
   const isRpcQuery = Boolean((
     blockQuery.isDegradedData ||
     ((apiQuery.isError || apiQuery.isPlaceholderData) && apiQuery.errorUpdateCount > 0)
-  ) && rpcQuery.data);
+  ) && rpcQuery.data && publicClient);
 
   const rpcQueryWithPages: QueryWithPagesResult<'block_txs'> = React.useMemo(() => {
     return {

ui/block/useBlockWithdrawalsQuery.tsx

@@ -65,6 +65,10 @@ export default function useBlockWithdrawalsQuery({ heightOrHash, blockQuery, tab
   const rpcQuery = useQuery<RpcResponseType, unknown, BlockWithdrawalsResponse | null>({
     queryKey: [ 'RPC', 'block', { heightOrHash } ],
     queryFn: async() => {
+      if (!publicClient) {
+        return null;
+      }
+
       const blockParams = heightOrHash.startsWith('0x') ? { blockHash: heightOrHash as `0x${ string }` } : { blockNumber: BigInt(heightOrHash) };
       return publicClient.getBlock(blockParams).catch(() => null);
     },
@@ -89,6 +93,7 @@ export default function useBlockWithdrawalsQuery({ heightOrHash, blockQuery, tab
     },
     placeholderData: GET_BLOCK,
     enabled:
+      publicClient !== undefined &&
       tab === 'withdrawals' &&
       config.features.beaconChain.isEnabled &&
       (blockQuery.isDegradedData || apiQuery.isError || apiQuery.errorUpdateCount > 0),
@@ -97,7 +102,7 @@ export default function useBlockWithdrawalsQuery({ heightOrHash, blockQuery, tab
   });
 
   React.useEffect(() => {
-    if (apiQuery.isPlaceholderData) {
+    if (apiQuery.isPlaceholderData || !publicClient) {
       return;
     }
 
@@ -117,7 +122,7 @@ export default function useBlockWithdrawalsQuery({ heightOrHash, blockQuery, tab
   const isRpcQuery = Boolean((
     blockQuery.isDegradedData ||
     ((apiQuery.isError || apiQuery.isPlaceholderData) && apiQuery.errorUpdateCount > 0)
-  ) && rpcQuery.data);
+  ) && rpcQuery.data && publicClient);
 
   const rpcQueryWithPages: QueryWithPagesResult<'block_withdrawals'> = React.useMemo(() => {
     return {