fix(explorer): pass through tendermint error responses from usefetch (#5507)

apps/explorer/src/app/routes/blocks/id/block.tsx

@@ -54,7 +54,7 @@ const Block = () => {
               </Button>
             </Link>
           </div>
-          {blockData && (
+          {blockData && 'result' in blockData && (
             <>
               <TableWithTbody className="mb-8">
                 <TableRow modifier="bordered">

apps/governance/src/routes/proposals/protocol-upgrade/protocol-upgrade-proposal-container.tsx

@@ -95,7 +95,7 @@ export const ProtocolUpgradeProposalContainer = () => {
           time={
             pending && time ? (
               convertToCountdownString(time, '0:00:00:00')
-            ) : blockInfo?.result ? (
+            ) : blockInfo && 'result' in blockInfo && blockInfo?.result ? (
               <span title={blockInfo.result.block.header.time}>
                 {formatDateWithLocalTimezone(
                   new Date(blockInfo.result.block.header.time)

libs/proposals/src/lib/protocol-upgrade-proposals/use-block-rising.ts

@@ -68,10 +68,13 @@ export const useBlockRising = (skip = false) => {
         }
       );
 
-      const heights = compact([
+      const heights = compact([...results.map((r) => r?.blockHeight)]);
-        ...results.map((r) => r?.blockHeight),
+
-        blockInfo?.result.block.header.height,
+      // Handles TendermintErrorResponses
-      ]);
+      if (blockInfo && 'result' in blockInfo) {
+        heights.push(blockInfo.result.block.header.height);
+      }
+
       const current = max(heights);
       if (current && Number(current) > prev) {
         setBlock(Number(current));

libs/react-helpers/src/hooks/use-fetch.ts

@@ -76,16 +76,26 @@ export const useFetch = <T>(
             ...options,
             body: body ? body : options?.body,
           });
-          if (!response.ok) {
+
+          data = (await response.json()) as T;
+
+          if (!response.ok && !data) {
             throw new Error(response.statusText);
           }
 
-          data = (await response.json()) as T;
           // @ts-ignore - 'error' in data
-          if (data && 'error' in data) {
+          if (data && data.error) {
+            // Explicit check for TendermintErrorResponse style error
+            // @ts-ignore - 'error' in data
+            if (data.error.data) {
+              // @ts-ignore - 'error' in data
+
+              throw new Error(data.error.data);
+            }
             // @ts-ignore - data.error
             throw new Error(data.error);
           }
+
           if (cancelRequest.current) return;
 
           dispatch({ type: ActionType.FETCHED, payload: data });

libs/tendermint/src/lib/use-block-info.ts

@@ -1,6 +1,11 @@
 import { useEnvironment } from '@vegaprotocol/environment';
 import { useFetch } from '@vegaprotocol/react-helpers';
-import { type TendermintBlockResponse } from '../types';
+import type {
+  TendermintBlockResponse,
+  TendermintErrorResponse,
+} from '../types';
+
+type TendermintResponse = TendermintBlockResponse | TendermintErrorResponse;
 
 export const useBlockInfo = (blockHeight?: number, canFetch = true) => {
   const { TENDERMINT_URL } = useEnvironment();
@@ -10,7 +15,7 @@ export const useBlockInfo = (blockHeight?: number, canFetch = true) => {
     TENDERMINT_URL && blockHeight && !isNaN(blockHeight) && canFetch
   );
 
-  const { state, refetch } = useFetch<TendermintBlockResponse>(
+  const { state, refetch } = useFetch<TendermintResponse>(
     url,
     { cache: 'force-cache' },
     canFetchData

libs/tendermint/src/types.ts

@@ -7,6 +7,16 @@ export type TendermintBlockResponse = {
   };
 };
 
+export type TendermintErrorResponse = {
+  jsonrpc: string;
+  id: number;
+  error: {
+    code: number;
+    message: string;
+    data: string;
+  };
+};
+
 type Id = {
   hash: string;
   parts: {
@@ -34,7 +44,7 @@ type Header = {
   proposer_address: string;
 };
 
-type Block = {
+export type Block = {
   header: Header;
   data: {
     txs: string[];