From 3b3046ab3d5064e46c3f0625e46c5f34bcae12b4 Mon Sep 17 00:00:00 2001
From: Justin Starry <justin@solana.com>
Date: Sun, 22 May 2022 01:24:25 +0800
Subject: [PATCH] explorer: Add support for new compute budget ixs (#25446)

---
 .../instruction/ComputeBudgetDetailsCard.tsx  | 68 +++++++++++++++++--
 explorer/src/utils/index.tsx                  | 30 +++++++-
 2 files changed, 93 insertions(+), 5 deletions(-)

diff --git a/explorer/src/components/instruction/ComputeBudgetDetailsCard.tsx b/explorer/src/components/instruction/ComputeBudgetDetailsCard.tsx
index 8125c0e88a..332c7ba0e0 100644
--- a/explorer/src/components/instruction/ComputeBudgetDetailsCard.tsx
+++ b/explorer/src/components/instruction/ComputeBudgetDetailsCard.tsx
@@ -5,7 +5,7 @@ import {
   TransactionInstruction,
 } from "@solana/web3.js";
 import { InstructionCard } from "./InstructionCard";
-import { SolBalance } from "utils";
+import { microLamportsToLamportsString, SolBalance } from "utils";
 import { Address } from "components/common/Address";
 import { reportError } from "utils/sentry";
 import { useCluster } from "providers/cluster";
@@ -37,7 +37,7 @@ export function ComputeBudgetDetailsCard({
             ix={ix}
             index={index}
             result={result}
-            title="Compute Budget Program: Request Units"
+            title="Compute Budget Program: Request Units (Deprecated)"
             innerCards={innerCards}
             childIndex={childIndex}
           >
@@ -50,7 +50,9 @@ export function ComputeBudgetDetailsCard({
 
             <tr>
               <td>Requested Compute Units</td>
-              <td className="text-lg-end">{units}</td>
+              <td className="text-lg-end font-monospace">{`${new Intl.NumberFormat(
+                "en-US"
+              ).format(units)} compute units`}</td>
             </tr>
 
             <tr>
@@ -82,7 +84,65 @@ export function ComputeBudgetDetailsCard({
 
             <tr>
               <td>Requested Heap Frame (Bytes)</td>
-              <td className="text-lg-end">{bytes}</td>
+              <td className="text-lg-end font-monospace">
+                {new Intl.NumberFormat("en-US").format(bytes)}
+              </td>
+            </tr>
+          </InstructionCard>
+        );
+      }
+      case "SetComputeUnitLimit": {
+        const { units } =
+          ComputeBudgetInstruction.decodeSetComputeUnitLimit(ix);
+        return (
+          <InstructionCard
+            ix={ix}
+            index={index}
+            result={result}
+            title="Compute Budget Program: Set Compute Unit Limit"
+            innerCards={innerCards}
+            childIndex={childIndex}
+          >
+            <tr>
+              <td>Program</td>
+              <td className="text-lg-end">
+                <Address pubkey={ix.programId} alignRight link />
+              </td>
+            </tr>
+
+            <tr>
+              <td>Compute Unit Limit</td>
+              <td className="text-lg-end font-monospace">{`${new Intl.NumberFormat(
+                "en-US"
+              ).format(units)} compute units`}</td>
+            </tr>
+          </InstructionCard>
+        );
+      }
+      case "SetComputeUnitPrice": {
+        const { microLamports } =
+          ComputeBudgetInstruction.decodeSetComputeUnitPrice(ix);
+        return (
+          <InstructionCard
+            ix={ix}
+            index={index}
+            result={result}
+            title="Compute Budget Program: Set Compute Unit Price"
+            innerCards={innerCards}
+            childIndex={childIndex}
+          >
+            <tr>
+              <td>Program</td>
+              <td className="text-lg-end">
+                <Address pubkey={ix.programId} alignRight link />
+              </td>
+            </tr>
+
+            <tr>
+              <td>Compute Unit Price</td>
+              <td className="text-lg-end font-monospace">{`${microLamportsToLamportsString(
+                microLamports
+              )} lamports per compute unit`}</td>
             </tr>
           </InstructionCard>
         );
diff --git a/explorer/src/utils/index.tsx b/explorer/src/utils/index.tsx
index ab87413af8..4eb7ee1508 100644
--- a/explorer/src/utils/index.tsx
+++ b/explorer/src/utils/index.tsx
@@ -6,7 +6,8 @@ import {
 import { PublicKey } from "@solana/web3.js";
 
 // Switch to web3 constant when web3 updates superstruct
-export const LAMPORTS_PER_SOL = 1000000000;
+export const LAMPORTS_PER_SOL = 1_000_000_000;
+export const MICRO_LAMPORTS_PER_LAMPORT = 1_000_000;
 
 export const NUM_TICKS_PER_SECOND = 160;
 export const DEFAULT_TICKS_PER_SLOT = 64;
@@ -28,6 +29,33 @@ export function normalizeTokenAmount(
   return rawTokens / Math.pow(10, decimals);
 }
 
+export function microLamportsToLamports(
+  microLamports: number | bigint
+): number {
+  if (typeof microLamports === "number") {
+    return microLamports / MICRO_LAMPORTS_PER_LAMPORT;
+  }
+
+  console.log(microLamports);
+  const microLamportsString = microLamports.toString().padStart(7, "0");
+  const splitIndex = microLamportsString.length - 6;
+  const lamportString =
+    microLamportsString.slice(0, splitIndex) +
+    "." +
+    microLamportsString.slice(splitIndex);
+  return parseFloat(lamportString);
+}
+
+export function microLamportsToLamportsString(
+  microLamports: number | bigint,
+  maximumFractionDigits: number = 6
+): string {
+  const lamports = microLamportsToLamports(microLamports);
+  return new Intl.NumberFormat("en-US", { maximumFractionDigits }).format(
+    lamports
+  );
+}
+
 export function lamportsToSol(lamports: number | BN): number {
   if (typeof lamports === "number") {
     return Math.abs(lamports) / LAMPORTS_PER_SOL;