explorer: parse compute budget instructions (#24703)

explorer/src/components/instruction/ComputeBudgetDetailsCard.tsx

@@ -0,0 +1,109 @@
+import React from "react";
+import {
+  ComputeBudgetInstruction,
+  SignatureResult,
+  TransactionInstruction,
+} from "@solana/web3.js";
+import { InstructionCard } from "./InstructionCard";
+import { SolBalance } from "utils";
+import { Address } from "components/common/Address";
+import { reportError } from "utils/sentry";
+import { useCluster } from "providers/cluster";
+
+export function ComputeBudgetDetailsCard({
+  ix,
+  index,
+  result,
+  signature,
+  innerCards,
+  childIndex,
+}: {
+  ix: TransactionInstruction;
+  index: number;
+  result: SignatureResult;
+  signature: string;
+  innerCards?: JSX.Element[];
+  childIndex?: number;
+}) {
+  const { url } = useCluster();
+  try {
+    const type = ComputeBudgetInstruction.decodeInstructionType(ix);
+    switch (type) {
+      case "RequestUnits": {
+        const { units, additionalFee } =
+          ComputeBudgetInstruction.decodeRequestUnits(ix);
+        return (
+          <InstructionCard
+            ix={ix}
+            index={index}
+            result={result}
+            title="Compute Budget Program: Request Units"
+            innerCards={innerCards}
+            childIndex={childIndex}
+          >
+            <tr>
+              <td>Program</td>
+              <td className="text-lg-end">
+                <Address pubkey={ix.programId} alignRight link />
+              </td>
+            </tr>
+
+            <tr>
+              <td>Requested Compute Units</td>
+              <td className="text-lg-end">{units}</td>
+            </tr>
+
+            <tr>
+              <td>Additional Fee (SOL)</td>
+              <td className="text-lg-end">
+                <SolBalance lamports={additionalFee} />
+              </td>
+            </tr>
+          </InstructionCard>
+        );
+      }
+      case "RequestHeapFrame": {
+        const { bytes } = ComputeBudgetInstruction.decodeRequestHeapFrame(ix);
+        return (
+          <InstructionCard
+            ix={ix}
+            index={index}
+            result={result}
+            title="Compute Budget Program: Request Heap Frame"
+            innerCards={innerCards}
+            childIndex={childIndex}
+          >
+            <tr>
+              <td>Program</td>
+              <td className="text-lg-end">
+                <Address pubkey={ix.programId} alignRight link />
+              </td>
+            </tr>
+
+            <tr>
+              <td>Requested Heap Frame (Bytes)</td>
+              <td className="text-lg-end">{bytes}</td>
+            </tr>
+          </InstructionCard>
+        );
+      }
+    }
+  } catch (error) {
+    reportError(error, {
+      url: url,
+      signature: signature,
+    });
+  }
+
+  return (
+    <InstructionCard
+      ix={ix}
+      index={index}
+      result={result}
+      title="Compute Budget Program: Unknown"
+      innerCards={innerCards}
+      childIndex={childIndex}
+      defaultRaw
+    />
+  );
+}

explorer/src/components/transaction/InstructionsSection.tsx

@@ -1,6 +1,7 @@
 import React from "react";
 import { ErrorCard } from "components/common/ErrorCard";
 import {
+  ComputeBudgetProgram,
   ParsedInnerInstruction,
   ParsedInstruction,
   ParsedTransaction,
@@ -46,6 +47,7 @@ import { isMangoInstruction } from "../instruction/mango/types";
 import { useAnchorProgram } from "providers/anchor";
 import { LoadingCard } from "components/common/LoadingCard";
 import { ErrorBoundary } from "@sentry/react";
+import { ComputeBudgetDetailsCard } from "components/instruction/ComputeBudgetDetailsCard";
 
 export type InstructionDetailsProps = {
   tx: ParsedTransaction;
@@ -236,6 +238,8 @@ function InstructionCard({
     return <WormholeDetailsCard key={key} {...props} />;
   } else if (isPythInstruction(transactionIx)) {
     return <PythDetailsCard key={key} {...props} />;
+  } else if (ComputeBudgetProgram.programId.equals(transactionIx.programId)) {
+    return <ComputeBudgetDetailsCard key={key} {...props} />;
   } else if (anchorProgram) {
     return (
       <ErrorBoundary fallback={<UnknownDetailsCard {...props} />}>

explorer/src/utils/tx.ts

@@ -24,6 +24,7 @@ import { TokenInfoMap } from "@solana/spl-token-registry";
 export enum PROGRAM_NAMES {
   // native built-ins
   ADDRESS_MAP = "Address Map Program",
+  COMPUTE_BUDGET = "Compute Budget Program",
   CONFIG = "Config Program",
   STAKE = "Stake Program",
   SYSTEM = "System Program",
@@ -116,6 +117,10 @@ export const PROGRAM_INFO_BY_ID: { [address: string]: ProgramInfo } = {
     name: PROGRAM_NAMES.ADDRESS_MAP,
     deployments: ALL_CLUSTERS,
   },
+  ComputeBudget111111111111111111111111111111: {
+    name: PROGRAM_NAMES.COMPUTE_BUDGET,
+    deployments: ALL_CLUSTERS,
+  },
   Config1111111111111111111111111111111111111: {
     name: PROGRAM_NAMES.CONFIG,
     deployments: ALL_CLUSTERS,