Add disclaimer stating oldest available slot (#136)

explorer/package-lock.json

@@ -1269,9 +1269,9 @@
       "integrity": "sha512-DetpxZw1fzPD5xUBrIAoplLChO2VB8DlL5Gg+I1IR9b2wPqYIca2WSUxL5g1vLeR4MsQq1NeWriXAVffV+U1Fw=="
     },
     "@solana/web3.js": {
-      "version": "0.55.0",
+      "version": "0.56.0",
-      "resolved": "https://registry.npmjs.org/@solana/web3.js/-/web3.js-0.55.0.tgz",
+      "resolved": "https://registry.npmjs.org/@solana/web3.js/-/web3.js-0.56.0.tgz",
-      "integrity": "sha512-1VfcfeI8nNJSlFA8ZZpyoaZHeftyvmBfE9dRyPtqsZszPfbtyA6NeOvydRBaSSU7XDC7hQZnKP4QFIf6uef8Mw==",
+      "integrity": "sha512-Vys4PY7wksHXLyMbjpTLJGMSs58zRGdDPaBmlxeTXfwjv27W5xcjanuC+sNQ8CaeKjUy9Rd0ptU2qSjBHp/rNw==",
       "requires": {
         "@babel/runtime": "^7.3.1",
         "bn.js": "^5.0.0",

explorer/package.json

@@ -3,7 +3,7 @@
   "version": "0.1.0",
   "private": true,
   "dependencies": {
-    "@solana/web3.js": "^0.55.0",
+    "@solana/web3.js": "^0.56.0",
     "@testing-library/jest-dom": "^4.2.4",
     "@testing-library/react": "^9.3.2",
     "@testing-library/user-event": "^7.1.2",

explorer/src/components/TransactionDetails.tsx

@@ -101,12 +101,22 @@ function StatusCard({ signature }: Props) {
   const status = useTransactionStatus(signature);
   const refresh = useFetchTransactionStatus();
   const details = useTransactionDetails(signature);
+  const { firstAvailableBlock } = useCluster();
 
   if (!status || status.fetchStatus === FetchStatus.Fetching) {
     return <LoadingCard />;
   } else if (status?.fetchStatus === FetchStatus.FetchFailed) {
     return <ErrorCard retry={() => refresh(signature)} text="Fetch Failed" />;
   } else if (!status.info) {
+    if (firstAvailableBlock !== undefined) {
+      return (
+        <ErrorCard
+          retry={() => refresh(signature)}
+          text="Not Found"
+          subtext={`Note: Transactions processed before block ${firstAvailableBlock} are not available at this time`}
+        />
+      );
+    }
     return <ErrorCard retry={() => refresh(signature)} text="Not Found" />;
   }
 

explorer/src/components/common/ErrorCard.tsx

@@ -3,11 +3,13 @@ import React from "react";
 export default function ErrorCard({
   retry,
   retryText,
-  text
+  text,
+  subtext
 }: {
   retry?: () => void;
   retryText?: string;
   text: string;
+  subtext?: string;
 }) {
   const buttonText = retryText || "Try Again";
   return (
@@ -23,11 +25,16 @@ export default function ErrorCard({
               {buttonText}
             </span>
             <div className="d-block d-md-none mt-4">
-              <hr></hr>
+              <span className="btn btn-white w-100" onClick={retry}>
-              <span className="btn btn-white" onClick={retry}>
                 {buttonText}
               </span>
             </div>
+            {subtext && (
+              <div className="text-muted">
+                <hr></hr>
+                {subtext}
+              </div>
+            )}
           </>
         )}
       </div>

explorer/src/providers/cluster.tsx

@@ -58,6 +58,7 @@ export const DEFAULT_CUSTOM_URL = "http://localhost:8899";
 interface State {
   cluster: Cluster;
   customUrl: string;
+  firstAvailableBlock?: number;
   status: ClusterStatus;
 }
 
@@ -65,6 +66,7 @@ interface Action {
   status: ClusterStatus;
   cluster: Cluster;
   customUrl: string;
+  firstAvailableBlock?: number;
 }
 
 type Dispatch = (action: Action) => void;
@@ -192,8 +194,13 @@ async function updateCluster(
 
   try {
     const connection = new Connection(clusterUrl(cluster, customUrl));
-    await connection.getRecentBlockhash();
+    const firstAvailableBlock = await connection.getFirstAvailableBlock();
-    dispatch({ status: ClusterStatus.Connected, cluster, customUrl });
+    dispatch({
+      status: ClusterStatus.Connected,
+      cluster,
+      customUrl,
+      firstAvailableBlock
+    });
   } catch (error) {
     console.error("Failed to update cluster", error);
     dispatch({ status: ClusterStatus.Failure, cluster, customUrl });