explorer: Restore readonly / signer raw insturction fields (#13909)

This is a follow up to #13855 It consolidates the RawParsedDetails and
RawDetails fields so that readonly/ signer instruction fields are
availalbe to parsed-raw instructions

explorer/src/components/instruction/InstructionCard.tsx

@@ -11,6 +11,7 @@ import {
   useTransactionDetails,
   useFetchRawTransaction,
 } from "providers/transactions/details";
+import { Address } from "components/common/Address";
 
 type InstructionProps = {
   title: string;
@@ -73,11 +74,21 @@ export function InstructionCard({
         <table className="table table-sm table-nowrap card-table">
           <tbody className="list">
             {showRaw ? (
-              "parsed" in ix ? (
+              <>
-                <RawParsedDetails ix={ix} raw={raw} />
+                <tr>
-              ) : (
+                  <td>Program</td>
-                <RawDetails ix={ix} />
+                  <td className="text-lg-right">
-              )
+                    <Address pubkey={ix.programId} alignRight link />
+                  </td>
+                </tr>
+                {"parsed" in ix ? (
+                  <RawParsedDetails ix={ix}>
+                    {raw ? <RawDetails ix={raw} /> : null}
+                  </RawParsedDetails>
+                ) : (
+                  <RawDetails ix={ix} />
+                )}
+              </>
             ) : (
               children
             )}

explorer/src/components/instruction/RawDetails.tsx

@@ -7,13 +7,6 @@ export function RawDetails({ ix }: { ix: TransactionInstruction }) {
   const data = wrap(ix.data.toString("hex"), 50);
   return (
     <>
-      <tr>
-        <td>Program</td>
-        <td className="text-lg-right">
-          <Address pubkey={ix.programId} alignRight link />
-        </td>
-      </tr>
-
       {ix.keys.map(({ pubkey, isSigner, isWritable }, keyIndex) => (
         <tr key={keyIndex}>
           <td>

explorer/src/components/instruction/RawParsedDetails.tsx

@@ -1,47 +1,16 @@
 import React from "react";
-import { ParsedInstruction, TransactionInstruction } from "@solana/web3.js";
+import { ParsedInstruction } from "@solana/web3.js";
-import { Address } from "components/common/Address";
-import { wrap } from "utils";
 
-type RawParsedDetailsProps = {
+export function RawParsedDetails({
+  ix,
+  children,
+}: {
   ix: ParsedInstruction;
-  raw?: TransactionInstruction;
+  children?: React.ReactNode;
-};
+}) {
-
-export function RawParsedDetails({ ix, raw }: RawParsedDetailsProps) {
-  let hex = null;
-  let b64 = null;
-  if (raw) {
-    hex = wrap(raw.data.toString("hex"), 50);
-    b64 = wrap(raw.data.toString("base64"), 50);
-  }
-
   return (
     <>
-      <tr>
+      {children}
-        <td>Program</td>
-        <td className="text-lg-right">
-          <Address pubkey={ix.programId} alignRight link />
-        </td>
-      </tr>
-
-      {hex ? (
-        <tr>
-          <td>Instruction Data (Hex)</td>
-          <td className="text-lg-right">
-            <pre className="d-inline-block text-left mb-0">{hex}</pre>
-          </td>
-        </tr>
-      ) : null}
-
-      {b64 ? (
-        <tr>
-          <td>Instruction Data (Base64)</td>
-          <td className="text-lg-right">
-            <pre className="d-inline-block text-left mb-0">{b64}</pre>
-          </td>
-        </tr>
-      ) : null}
 
       <tr>
         <td>Instruction Data (JSON)</td>

explorer/src/providers/transactions/details.tsx

@@ -128,34 +128,25 @@ async function fetchRawTransaction(
   cluster: Cluster,
   url: string
 ) {
-  dispatch({
-    type: ActionType.Update,
-    status: FetchStatus.Fetching,
-    key: signature,
-    url,
-  });
-
   let fetchStatus;
   let transaction;
   try {
     transaction = await new Connection(url).getConfirmedTransaction(signature);
     fetchStatus = FetchStatus.Fetched;
+    dispatch({
+      type: ActionType.Update,
+      status: fetchStatus,
+      key: signature,
+      data: {
+        raw: transaction,
+      },
+      url,
+    });
   } catch (error) {
     if (cluster !== Cluster.Custom) {
       reportError(error, { url });
     }
-    fetchStatus = FetchStatus.FetchFailed;
   }
-
-  dispatch({
-    type: ActionType.Update,
-    status: fetchStatus,
-    key: signature,
-    data: {
-      raw: transaction,
-    },
-    url,
-  });
 }
 
 export function useFetchRawTransaction() {