explorer: Display error details on tx page (#25186)

explorer/src/pages/TransactionDetailsPage.tsx

@@ -30,6 +30,7 @@ import { TokenBalancesCard } from "components/transaction/TokenBalancesCard";
 import { InstructionsSection } from "components/transaction/InstructionsSection";
 import { ProgramLogSection } from "components/transaction/ProgramLogSection";
 import { clusterPath } from "utils/url";
+import { getTransactionInstructionError } from "utils/program-err";
 
 const AUTO_REFRESH_INTERVAL = 2000;
 const ZERO_CONFIRMATION_BAILOUT = 5;
@@ -171,20 +172,26 @@ function StatusCard({
 
   const { info } = status.data;
 
-  const renderResult = () => {
   let statusClass = "success";
   let statusText = "Success";
+  let errorReason = undefined;
+
   if (info.result.err) {
     statusClass = "warning";
     statusText = "Error";
+    if (typeof info.result.err === "string") {
+      errorReason = `Runtime Error: "${info.result.err}"`;
+    } else {
+      const programError = getTransactionInstructionError(info.result.err);
+      if (programError !== undefined) {
+        errorReason = `Program Error: "Instruction #${
+          programError.index + 1
+        } Failed"`;
+      } else {
+        errorReason = `Unknown Error: "${JSON.stringify(info.result.err)}"`;
+      }
+    }
   }
-
-    return (
-      <h3 className="mb-0">
-        <span className={`badge bg-${statusClass}-soft`}>{statusText}</span>
-      </h3>
-    );
-  };
 
   const fee = details?.data?.transaction?.meta?.fee;
   const transaction = details?.data?.transaction?.transaction;
@@ -239,9 +246,28 @@ function StatusCard({
 
         <tr>
           <td>Result</td>
-          <td className="text-lg-end">{renderResult()}</td>
+          <td className="text-lg-end">
+            <h3 className="mb-0">
+              <span className={`badge bg-${statusClass}-soft`}>
+                {statusText}
+              </span>
+            </h3>
+          </td>
         </tr>
 
+        {errorReason !== undefined && (
+          <tr>
+            <td>Error</td>
+            <td className="text-lg-end">
+              <h3 className="mb-0">
+                <span className={`badge bg-${statusClass}-soft`}>
+                  {errorReason}
+                </span>
+              </h3>
+            </td>
+          </tr>
+        )}
+
         <tr>
           <td>Timestamp</td>
           <td className="text-lg-end">