Add download bytecode button to explorer (#22459)

explorer/src/components/account/UpgradeableLoaderAccountSection.tsx

@@ -14,6 +14,7 @@ import { addressLabel } from "utils/tx";
 import { useCluster } from "providers/cluster";
 import { ErrorCard } from "components/common/ErrorCard";
 import { UnknownAccountCard } from "components/account/UnknownAccountCard";
+import { Downloadable } from "components/common/Downloadable";
 
 export function UpgradeableLoaderAccountSection({
   account,
@@ -179,7 +180,14 @@ export function UpgradeableProgramDataSection({
         {account.details?.space !== undefined && (
           <tr>
             <td>Data (Bytes)</td>
-            <td className="text-lg-end">{account.details.space}</td>
+            <td className="text-lg-end">
+              <Downloadable
+                data={programData.data[0]}
+                filename={`${account.pubkey.toString()}.bin`}
+              >
+                <span className="me-2">{account.details.space}</span>
+              </Downloadable>
+            </td>
           </tr>
         )}
         <tr>

explorer/src/components/common/Downloadable.tsx

@@ -0,0 +1,27 @@
+import { ReactNode } from "react";
+
+export function Downloadable({
+  data,
+  filename,
+  children,
+}: {
+  data: string;
+  filename: string;
+  children: ReactNode;
+}) {
+  const handleClick = async () => {
+    const blob = new Blob([Buffer.from(data, "base64")]);
+    const fileDownloadUrl = URL.createObjectURL(blob);
+    const tempLink = document.createElement("a");
+    tempLink.href = fileDownloadUrl;
+    tempLink.setAttribute("download", filename);
+    tempLink.click();
+  };
+
+  return (
+    <>
+      <span className="fe fe-download c-pointer me-2" onClick={handleClick} />
+      {children}
+    </>
+  );
+}

explorer/src/validators/accounts/upgradeable-program.ts

@@ -10,6 +10,8 @@ import {
   coerce,
   create,
   any,
+  string,
+  tuple,
 } from "superstruct";
 import { ParsedInfo } from "validators";
 import { PublicKeyFromString } from "validators/pubkey";
@@ -28,7 +30,7 @@ export const ProgramAccount = type({
 export type ProgramDataAccountInfo = Infer<typeof ProgramDataAccountInfo>;
 export const ProgramDataAccountInfo = type({
   authority: nullable(PublicKeyFromString),
-  // don't care about data yet
+  data: tuple([string(), literal("base64")]),
   slot: number(),
 });