From a6b4a4c211d2da2d54db7b5f17998c1f9c78335e Mon Sep 17 00:00:00 2001
From: Justin Starry <justin@solana.com>
Date: Fri, 12 Aug 2022 14:42:49 +0100
Subject: [PATCH] Explorer: Display address lookup table instruction type

---
 .../AddressLookupTableDetailsCard.tsx         | 46 +++++++++++++++++++
 .../instruction/address-lookup-table/types.ts | 33 +++++++++++++
 .../transaction/InstructionsSection.tsx       |  6 ++-
 3 files changed, 84 insertions(+), 1 deletion(-)
 create mode 100644 explorer/src/components/instruction/AddressLookupTableDetailsCard.tsx
 create mode 100644 explorer/src/components/instruction/address-lookup-table/types.ts

diff --git a/explorer/src/components/instruction/AddressLookupTableDetailsCard.tsx b/explorer/src/components/instruction/AddressLookupTableDetailsCard.tsx
new file mode 100644
index 00000000000000..c0e905206525d5
--- /dev/null
+++ b/explorer/src/components/instruction/AddressLookupTableDetailsCard.tsx
@@ -0,0 +1,46 @@
+import React from "react";
+import { TransactionInstruction, SignatureResult } from "@solana/web3.js";
+import { InstructionCard } from "./InstructionCard";
+import { useCluster } from "providers/cluster";
+import { reportError } from "utils/sentry";
+import { parseAddressLookupTableInstructionTitle } from "./address-lookup-table/types";
+
+export function AddressLookupTableDetailsCard({
+  ix,
+  index,
+  result,
+  signature,
+  innerCards,
+  childIndex,
+}: {
+  ix: TransactionInstruction;
+  index: number;
+  result: SignatureResult;
+  signature: string;
+  innerCards?: JSX.Element[];
+  childIndex?: number;
+}) {
+  const { url } = useCluster();
+
+  let title;
+  try {
+    title = parseAddressLookupTableInstructionTitle(ix);
+  } catch (error) {
+    reportError(error, {
+      url: url,
+      signature: signature,
+    });
+  }
+
+  return (
+    <InstructionCard
+      ix={ix}
+      index={index}
+      result={result}
+      title={`Address Lookup Table: ${title || "Unknown"}`}
+      innerCards={innerCards}
+      childIndex={childIndex}
+      defaultRaw
+    />
+  );
+}
diff --git a/explorer/src/components/instruction/address-lookup-table/types.ts b/explorer/src/components/instruction/address-lookup-table/types.ts
new file mode 100644
index 00000000000000..4b1f01b794ad9a
--- /dev/null
+++ b/explorer/src/components/instruction/address-lookup-table/types.ts
@@ -0,0 +1,33 @@
+import { TransactionInstruction } from "@solana/web3.js";
+
+export const PROGRAM_IDS: string[] = [
+  "AddressLookupTab1e1111111111111111111111111",
+];
+
+const INSTRUCTION_LOOKUP: { [key: number]: string } = {
+  0: "Create Lookup Table",
+  1: "Freeze Lookup Table",
+  2: "Extend Lookup Table",
+  3: "Deactivate Lookup Table",
+  4: "Close Lookup Table",
+};
+
+export function isAddressLookupTableInstruction(
+  instruction: TransactionInstruction
+): boolean {
+  return PROGRAM_IDS.includes(instruction.programId.toBase58());
+}
+
+export function parseAddressLookupTableInstructionTitle(
+  instruction: TransactionInstruction
+): string {
+  const code = instruction.data[0];
+
+  if (!(code in INSTRUCTION_LOOKUP)) {
+    throw new Error(
+      `Unrecognized Address Lookup Table instruction code: ${code}`
+    );
+  }
+
+  return INSTRUCTION_LOOKUP[code];
+}
diff --git a/explorer/src/components/transaction/InstructionsSection.tsx b/explorer/src/components/transaction/InstructionsSection.tsx
index d37fbc7fc8f57a..7f284b8af1012d 100644
--- a/explorer/src/components/transaction/InstructionsSection.tsx
+++ b/explorer/src/components/transaction/InstructionsSection.tsx
@@ -25,6 +25,7 @@ import {
   SignatureProps,
 } from "pages/TransactionDetailsPage";
 import { intoTransactionInstruction } from "utils/tx";
+import { isAddressLookupTableInstruction } from "components/instruction/address-lookup-table/types";
 import { isSerumInstruction } from "components/instruction/serum/types";
 import { isTokenLendingInstruction } from "components/instruction/token-lending/types";
 import { isTokenSwapInstruction } from "components/instruction/token-swap/types";
@@ -48,6 +49,7 @@ import { useAnchorProgram } from "providers/anchor";
 import { LoadingCard } from "components/common/LoadingCard";
 import { ErrorBoundary } from "@sentry/react";
 import { ComputeBudgetDetailsCard } from "components/instruction/ComputeBudgetDetailsCard";
+import { AddressLookupTableDetailsCard } from "components/instruction/AddressLookupTableDetailsCard";
 
 export type InstructionDetailsProps = {
   tx: ParsedTransaction;
@@ -224,7 +226,9 @@ function InstructionCard({
     childIndex,
   };
 
-  if (isBonfidaBotInstruction(transactionIx)) {
+  if (isAddressLookupTableInstruction(transactionIx)) {
+    return <AddressLookupTableDetailsCard key={key} {...props} />;
+  } else if (isBonfidaBotInstruction(transactionIx)) {
     return <BonfidaBotDetailsCard key={key} {...props} />;
   } else if (isMangoInstruction(transactionIx)) {
     return <MangoDetailsCard key={key} {...props} />;