Explorer: Support parsed address lookup table responses (solana-labs#…

…28137)
lijunwangs · Sep 29, 2022 · f3fda46 · f3fda46
1 parent 7abc322
commit f3fda46
Show file tree

Hide file tree

Showing 3 changed files with 58 additions and 20 deletions.
diff --git a/explorer/src/components/account/address-lookup-table/AddressLookupTableAccountSection.tsx b/explorer/src/components/account/address-lookup-table/AddressLookupTableAccountSection.tsx
@@ -5,20 +5,31 @@ import { Account, useFetchAccountInfo } from "providers/accounts";
 import { Address } from "components/common/Address";
 import { AddressLookupTableAccount } from "@solana/web3.js";
 import { Slot } from "components/common/Slot";
+import { AddressLookupTableAccountInfo } from "validators/accounts/address-lookup-table";
 
-export function AddressLookupTableAccountSection({
-  account,
-  data,
-}: {
-  account: Account;
-  data: Uint8Array;
-}) {
-  const lookupTableAccount = React.useMemo(() => {
-    return new AddressLookupTableAccount({
-      key: account.pubkey,
-      state: AddressLookupTableAccount.deserialize(data),
-    });
-  }, [account, data]);
+export function AddressLookupTableAccountSection(
+  params:
+    | {
+        account: Account;
+        data: Uint8Array;
+      }
+    | {
+        account: Account;
+        lookupTableAccount: AddressLookupTableAccountInfo;
+      }
+) {
+  const account = params.account;
+  const lookupTableState = React.useMemo(() => {
+    if ("data" in params) {
+      return AddressLookupTableAccount.deserialize(params.data);
+    } else {
+      return params.lookupTableAccount;
+    }
+  }, [params]);
+  const lookupTableAccount = new AddressLookupTableAccount({
+    key: account.pubkey,
+    state: lookupTableState,
+  });
   const refresh = useFetchAccountInfo();
   return (
     <div className="card">

diff --git a/explorer/src/components/account/address-lookup-table/LookupTableEntriesCard.tsx b/explorer/src/components/account/address-lookup-table/LookupTableEntriesCard.tsx
@@ -2,15 +2,26 @@ import React from "react";
 
 import { AddressLookupTableAccount, PublicKey } from "@solana/web3.js";
 import { Address } from "components/common/Address";
+import { AddressLookupTableAccountInfo } from "validators/accounts/address-lookup-table";
 
-export function LookupTableEntriesCard({
-  lookupTableAccountData,
-}: {
-  lookupTableAccountData: Uint8Array;
-}) {
+export function LookupTableEntriesCard(
+  params:
+    | {
+        parsedLookupTable: AddressLookupTableAccountInfo;
+      }
+    | {
+        lookupTableAccountData: Uint8Array;
+      }
+) {
   const lookupTableState = React.useMemo(() => {
-    return AddressLookupTableAccount.deserialize(lookupTableAccountData);
-  }, [lookupTableAccountData]);
+    if ("lookupTableAccountData" in params) {
+      return AddressLookupTableAccount.deserialize(
+        params.lookupTableAccountData
+      );
+    } else {
+      return params.parsedLookupTable;
+    }
+  }, [params]);
 
   return (
     <div className="card">

diff --git a/explorer/src/pages/AccountDetailsPage.tsx b/explorer/src/pages/AccountDetailsPage.tsx
@@ -375,6 +375,17 @@ function InfoSection({ account }: { account: Account }) {
     return (
       <ConfigAccountSection account={account} configAccount={data.parsed} />
     );
+  } else if (
+    data &&
+    data.program === "address-lookup-table" &&
+    data.parsed.type === "lookupTable"
+  ) {
+    return (
+      <AddressLookupTableAccountSection
+        account={account}
+        lookupTableAccount={data.parsed.info}
+      />
+    );
   } else if (
     details?.rawData &&
     isAddressLookupTableAccount(details.owner, details.rawData)
@@ -514,6 +525,11 @@ function MoreSection({
         isAddressLookupTableAccount(details.owner, details.rawData) && (
           <LookupTableEntriesCard lookupTableAccountData={details?.rawData} />
         )}
+      {tab === "entries" &&
+        data?.program === "address-lookup-table" &&
+        data.parsed.type === "lookupTable" && (
+          <LookupTableEntriesCard parsedLookupTable={data.parsed.info} />
+        )}
     </>
   );
 }