Explorer: Add toggle for raw tx logs (#29765)

Add toggle for raw tx logs

explorer/src/components/transaction/ProgramLogSection.tsx

@@ -4,8 +4,10 @@ import { useTransactionDetails } from "providers/transactions";
 import { ProgramLogsCardBody } from "components/ProgramLogsCardBody";
 import { parseProgramLogs } from "utils/program-logs";
 import { useCluster } from "providers/cluster";
+import { TableCardBody } from "components/common/TableCardBody";
 
 export function ProgramLogSection({ signature }: SignatureProps) {
+  const [showRaw, setShowRaw] = React.useState(false);
   const { cluster, url } = useCluster();
   const details = useTransactionDetails(signature);
 
@@ -26,14 +28,27 @@ export function ProgramLogSection({ signature }: SignatureProps) {
       <div className="card">
         <div className="card-header">
           <h3 className="card-header-title">Program Instruction Logs</h3>
+          <button
+            className={`btn btn-sm d-flex ${
+              showRaw ? "btn-black active" : "btn-white"
+            }`}
+            onClick={() => setShowRaw((r) => !r)}
+          >
+            <span className="fe fe-code me-1"></span>
+            Raw
+          </button>
         </div>
         {prettyLogs !== null ? (
-          <ProgramLogsCardBody
-            message={message}
-            logs={prettyLogs}
-            cluster={cluster}
-            url={url}
-          />
+          showRaw ? (
+            <RawProgramLogs raw={logMessages!} />
+          ) : (
+            <ProgramLogsCardBody
+              message={message}
+              logs={prettyLogs}
+              cluster={cluster}
+              url={url}
+            />
+          )
         ) : (
           <div className="card-body">
             Logs not supported for this transaction
@@ -43,3 +58,15 @@ export function ProgramLogSection({ signature }: SignatureProps) {
     </>
   );
 }
+
+const RawProgramLogs = ({ raw }: { raw: string[] }) => {
+  return (
+    <TableCardBody>
+      <tr>
+        <td>
+          <pre className="text-start">{JSON.stringify(raw, null, 2)}</pre>
+        </td>
+      </tr>
+    </TableCardBody>
+  );
+};