From c17e54e3f68710f74b5e6baace5142ff83b50b3f Mon Sep 17 00:00:00 2001
From: man0s <95379755+losman0s@users.noreply.github.com>
Date: Sun, 16 Jan 2022 13:46:02 +0100
Subject: [PATCH] Add download bytecode button to explorer (#22459)

---
 .../UpgradeableLoaderAccountSection.tsx       | 10 ++++++-
 .../src/components/common/Downloadable.tsx    | 27 +++++++++++++++++++
 .../accounts/upgradeable-program.ts           |  4 ++-
 3 files changed, 39 insertions(+), 2 deletions(-)
 create mode 100644 explorer/src/components/common/Downloadable.tsx

diff --git a/explorer/src/components/account/UpgradeableLoaderAccountSection.tsx b/explorer/src/components/account/UpgradeableLoaderAccountSection.tsx
index 558fd0c02c..4e5ec1ca4d 100644
--- a/explorer/src/components/account/UpgradeableLoaderAccountSection.tsx
+++ b/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>
diff --git a/explorer/src/components/common/Downloadable.tsx b/explorer/src/components/common/Downloadable.tsx
new file mode 100644
index 0000000000..d36ca80ec7
--- /dev/null
+++ b/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}
+    </>
+  );
+}
diff --git a/explorer/src/validators/accounts/upgradeable-program.ts b/explorer/src/validators/accounts/upgradeable-program.ts
index e00183ed59..92ce4c3336 100644
--- a/explorer/src/validators/accounts/upgradeable-program.ts
+++ b/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(),
 });