Explorer: fix slot links and block details page on devnet (#13274)

explorer/src/components/account/BlockHistoryCard.tsx

@@ -6,32 +6,31 @@ import { Signature } from "components/common/Signature";
 import { ErrorCard } from "components/common/ErrorCard";
 import { LoadingCard } from "components/common/LoadingCard";
 import { Slot } from "components/common/Slot";
+import { ClusterStatus, useCluster } from "providers/cluster";
 
 export function BlockHistoryCard({ slot }: { slot: number }) {
   const confirmedBlock = useBlock(slot);
   const fetchBlock = useFetchBlock();
+  const { status } = useCluster();
   const refresh = () => fetchBlock(slot);
 
+  // Fetch block on load
   React.useEffect(() => {
-    if (!confirmedBlock) refresh();
-  }, [confirmedBlock, slot]); // eslint-disable-line react-hooks/exhaustive-deps
-
-  if (!confirmedBlock) {
-    return null;
-  }
-
-  if (confirmedBlock.data === undefined) {
-    if (confirmedBlock.status === FetchStatus.Fetching) {
-      return <LoadingCard message="Loading block" />;
-    }
+    if (!confirmedBlock && status === ClusterStatus.Connected) refresh();
+  }, [slot, status]); // eslint-disable-line react-hooks/exhaustive-deps
 
+  if (!confirmedBlock || confirmedBlock.status === FetchStatus.Fetching) {
+    return <LoadingCard message="Loading block" />;
+  } else if (
+    confirmedBlock.data === undefined ||
+    confirmedBlock.status === FetchStatus.FetchFailed
+  ) {
     return <ErrorCard retry={refresh} text="Failed to fetch block" />;
+  } else if (confirmedBlock.data.block === undefined) {
+    return <ErrorCard retry={refresh} text={`Block ${slot} was not found`} />;
   }
 
-  if (confirmedBlock.status === FetchStatus.FetchFailed) {
-    return <ErrorCard retry={refresh} text="Failed to fetch block" />;
-  }
-
+  const block = confirmedBlock.data.block;
   return (
     <>
       <div className="card">
@@ -44,31 +43,31 @@ export function BlockHistoryCard({ slot }: { slot: number }) {
           <tr>
             <td className="w-100">Slot</td>
             <td className="text-lg-right text-monospace">
-              <Slot slot={Number(slot)} />
+              <Slot slot={slot} />
             </td>
           </tr>
           <tr>
             <td className="w-100">Parent Slot</td>
             <td className="text-lg-right text-monospace">
-              <Slot slot={confirmedBlock.data.parentSlot} link />
+              <Slot slot={block.parentSlot} link />
             </td>
           </tr>
           <tr>
             <td className="w-100">Blockhash</td>
             <td className="text-lg-right text-monospace">
-              <span>{confirmedBlock.data.blockhash}</span>
+              <span>{block.blockhash}</span>
             </td>
           </tr>
           <tr>
             <td className="w-100">Previous Blockhash</td>
             <td className="text-lg-right text-monospace">
-              <span>{confirmedBlock.data.previousBlockhash}</span>
+              <span>{block.previousBlockhash}</span>
             </td>
           </tr>
         </TableCardBody>
       </div>
 
-      {confirmedBlock.data.transactions.length === 0 ? (
+      {block.transactions.length === 0 ? (
         <ErrorCard text="This block has no transactions" />
       ) : (
         <div className="card">
@@ -85,7 +84,7 @@ export function BlockHistoryCard({ slot }: { slot: number }) {
                 </tr>
               </thead>
               <tbody className="list">
-                {confirmedBlock.data.transactions.map((tx, i) => {
+                {block.transactions.map((tx, i) => {
                   let statusText;
                   let statusClass;
                   let signature: React.ReactNode;

explorer/src/components/common/Slot.tsx

@@ -1,5 +1,6 @@
 import React, { useState } from "react";
 import { Link } from "react-router-dom";
+import { clusterPath } from "utils/url";
 
 type CopyState = "copy" | "copied";
 type Props = {
@@ -30,7 +31,7 @@ export function Slot({ slot, link }: Props) {
   return link ? (
     <span className="text-monospace">
       {copyButton}
-      <Link className="" to={`/block/${slot}`}>
+      <Link to={clusterPath(`/block/${slot}`)}>
         {slot.toLocaleString("en-US")}
       </Link>
     </span>

explorer/src/providers/block.tsx

@@ -15,8 +15,12 @@ export enum ActionType {
   Clear,
 }
 
-type State = Cache.State<ConfirmedBlock>;
-type Dispatch = Cache.Dispatch<ConfirmedBlock>;
+type Block = {
+  block?: ConfirmedBlock;
+};
+
+type State = Cache.State<Block>;
+type Dispatch = Cache.Dispatch<Block>;
 
 const StateContext = React.createContext<State | undefined>(undefined);
 const DispatchContext = React.createContext<Dispatch | undefined>(undefined);
@@ -25,7 +29,7 @@ type BlockProviderProps = { children: React.ReactNode };
 
 export function BlockProvider({ children }: BlockProviderProps) {
   const { url } = useCluster();
-  const [state, dispatch] = Cache.useReducer<ConfirmedBlock>(url);
+  const [state, dispatch] = Cache.useReducer<Block>(url);
 
   React.useEffect(() => {
     dispatch({ type: ActionType.Clear, url });
@@ -40,9 +44,7 @@ export function BlockProvider({ children }: BlockProviderProps) {
   );
 }
 
-export function useBlock(
-  key: number
-): Cache.CacheEntry<ConfirmedBlock> | undefined {
+export function useBlock(key: number): Cache.CacheEntry<Block> | undefined {
   const context = React.useContext(StateContext);
 
   if (!context) {
@@ -66,18 +68,23 @@ export async function fetchBlock(
   });
 
   let status: FetchStatus;
-  let data: ConfirmedBlock | undefined;
+  let data: Block | undefined = undefined;
 
   try {
     const connection = new Connection(url, "max");
-    data = await connection.getConfirmedBlock(Number(key));
+    data = { block: await connection.getConfirmedBlock(Number(key)) };
     status = FetchStatus.Fetched;
-  } catch (error) {
-    console.log(error);
-    if (cluster !== Cluster.Custom) {
-      Sentry.captureException(error, { tags: { url } });
+  } catch (err) {
+    const error = err as Error;
+    if (error.message.includes("not found")) {
+      data = {} as Block;
+      status = FetchStatus.Fetched;
+    } else {
+      status = FetchStatus.FetchFailed;
+      if (cluster !== Cluster.Custom) {
+        Sentry.captureException(error, { tags: { url } });
+      }
     }
-    status = FetchStatus.FetchFailed;
   }
 
   dispatch({
@@ -90,14 +97,12 @@ export async function fetchBlock(
 }
 
 export function useFetchBlock() {
-  const { cluster, url } = useCluster();
-  const state = React.useContext(StateContext);
   const dispatch = React.useContext(DispatchContext);
-
-  if (!state || !dispatch) {
+  if (!dispatch) {
     throw new Error(`useFetchBlock must be used within a BlockProvider`);
   }
 
+  const { cluster, url } = useCluster();
   return React.useCallback(
     (key: number) => fetchBlock(dispatch, url, cluster, key),
     [dispatch, cluster, url]