From 7a5b9c8d1d1b725d497782f52e5615f672747b78 Mon Sep 17 00:00:00 2001
From: Noah Gundotra <ngundotra@users.noreply.github.com>
Date: Wed, 9 Oct 2024 13:39:23 -0400
Subject: [PATCH] IDL Fixes (#384)

* fix long byte array display for anchor ix arguments
* add option to download idl
* add badge to show IDL version
* add toggle for viewing expanded IDL (no more clicking manually to
expand)
---
 app/components/account/AnchorProgramCard.tsx  | 61 +++++++++++++++----
 .../UpgradeableLoaderAccountSection.tsx       |  6 +-
 app/components/common/Downloadable.tsx        | 44 ++++++++++++-
 app/components/common/IDLBadge.tsx            | 14 +++++
 app/types/react-json-view.d.ts                |  7 +++
 app/utils/anchor.tsx                          | 27 +++++++-
 app/utils/convertLegacyIdl.ts                 | 26 ++++----
 7 files changed, 156 insertions(+), 29 deletions(-)
 create mode 100644 app/components/common/IDLBadge.tsx
 create mode 100644 app/types/react-json-view.d.ts

diff --git a/app/components/account/AnchorProgramCard.tsx b/app/components/account/AnchorProgramCard.tsx
index d8bdd24e..26422295 100644
--- a/app/components/account/AnchorProgramCard.tsx
+++ b/app/components/account/AnchorProgramCard.tsx
@@ -2,31 +2,70 @@
 
 import { useAnchorProgram } from '@providers/anchor';
 import { useCluster } from '@providers/cluster';
+import { useState } from 'react';
 import ReactJson from 'react-json-view';
 
+import { getIdlSpecType } from '@/app/utils/convertLegacyIdl';
+
+import { DownloadableButton } from '../common/Downloadable';
+import { IDLBadge } from '../common/IDLBadge';
+
 export function AnchorProgramCard({ programId }: { programId: string }) {
     const { url } = useCluster();
     const { idl } = useAnchorProgram(programId, url);
+    const [collapsedValue, setCollapsedValue] = useState<boolean | number>(1);
 
     if (!idl) {
         return null;
     }
+    const spec = getIdlSpecType(idl);
 
     return (
-        <>
-            <div className="card">
-                <div className="card-header">
-                    <div className="row align-items-center">
-                        <div className="col">
-                            <h3 className="card-header-title">Anchor IDL</h3>
-                        </div>
+        <div className="card">
+            <div className="card-header">
+                <div className="row align-items-center">
+                    <div className="col">
+                        <h3 className="card-header-title">Anchor IDL</h3>
+                    </div>
+                    <div className="col-auto btn btn-sm btn-primary d-flex align-items-center">
+                        <DownloadableButton
+                            data={Buffer.from(JSON.stringify(idl, null, 2)).toString('base64')}
+                            filename={`${programId}-idl.json`}
+                            type="application/json"
+                        >
+                            Download IDL
+                        </DownloadableButton>
                     </div>
                 </div>
-
-                <div className="card metadata-json-viewer m-4">
-                    <ReactJson src={idl} theme={'solarized'} style={{ padding: 25 }} collapsed={1} name={null} />
+            </div>
+            <div className="card-body d-flex justify-content-between align-items-center">
+                <IDLBadge spec={spec} />
+                <div className="form-check form-switch">
+                    <input
+                        className="form-check-input"
+                        type="checkbox"
+                        id="expandToggle"
+                        onChange={e => setCollapsedValue(e.target.checked ? false : 1)}
+                    />
+                    <label className="form-check-label" htmlFor="expandToggle">
+                        Expand All
+                    </label>
                 </div>
             </div>
-        </>
+
+            <div className="card metadata-json-viewer m-4 mt-2">
+                <ReactJson
+                    src={idl}
+                    theme={'solarized'}
+                    style={{ padding: 25 }}
+                    name={null}
+                    enableClipboard={true}
+                    collapsed={collapsedValue}
+                    displayObjectSize={false}
+                    displayDataTypes={false}
+                    displayArrayKey={false}
+                />
+            </div>
+        </div>
     );
 }
diff --git a/app/components/account/UpgradeableLoaderAccountSection.tsx b/app/components/account/UpgradeableLoaderAccountSection.tsx
index 5c4b2af5..c14a4bdd 100644
--- a/app/components/account/UpgradeableLoaderAccountSection.tsx
+++ b/app/components/account/UpgradeableLoaderAccountSection.tsx
@@ -1,6 +1,6 @@
 import { UnknownAccountCard } from '@components/account/UnknownAccountCard';
 import { Address } from '@components/common/Address';
-import { Downloadable } from '@components/common/Downloadable';
+import { DownloadableIcon } from '@components/common/Downloadable';
 import { InfoTooltip } from '@components/common/InfoTooltip';
 import { SecurityTXTBadge } from '@components/common/SecurityTXTBadge';
 import { Slot } from '@components/common/Slot';
@@ -233,9 +233,9 @@ export function UpgradeableProgramDataSection({
                     <tr>
                         <td>Data Size (Bytes)</td>
                         <td className="text-lg-end">
-                            <Downloadable data={programData.data[0]} filename={`${account.pubkey.toString()}.bin`}>
+                            <DownloadableIcon data={programData.data[0]} filename={`${account.pubkey.toString()}.bin`}>
                                 <span className="me-2">{account.space}</span>
-                            </Downloadable>
+                            </DownloadableIcon>
                         </td>
                     </tr>
                 )}
diff --git a/app/components/common/Downloadable.tsx b/app/components/common/Downloadable.tsx
index 46836f9c..67b15da0 100644
--- a/app/components/common/Downloadable.tsx
+++ b/app/components/common/Downloadable.tsx
@@ -1,7 +1,15 @@
-import { ReactNode } from 'react';
-import { Download } from 'react-feather';
+import { ComponentType, ReactNode } from 'react';
+import { Download, IconProps } from 'react-feather';
 
-export function Downloadable({ data, filename, children }: { data: string; filename: string; children: ReactNode }) {
+export function DownloadableIcon({
+    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);
@@ -18,3 +26,33 @@ export function Downloadable({ data, filename, children }: { data: string; filen
         </>
     );
 }
+
+export function DownloadableButton({
+    data,
+    filename,
+    children,
+    type,
+    icon: Icon = Download as ComponentType<IconProps>,
+}: {
+    data: string;
+    filename: string;
+    children?: ReactNode;
+    type?: string;
+    icon?: ComponentType<IconProps>;
+}) {
+    const handleDownload = async () => {
+        const blob = new Blob([Buffer.from(data, 'base64')], type ? { type } : {});
+        const fileDownloadUrl = URL.createObjectURL(blob);
+        const tempLink = document.createElement('a');
+        tempLink.href = fileDownloadUrl;
+        tempLink.setAttribute('download', filename);
+        tempLink.click();
+    };
+
+    return (
+        <div onClick={handleDownload} style={{ alignItems: 'center', cursor: 'pointer', display: 'inline-flex' }}>
+            <Icon className="me-2" size={15} />
+            {children}
+        </div>
+    );
+}
diff --git a/app/components/common/IDLBadge.tsx b/app/components/common/IDLBadge.tsx
new file mode 100644
index 00000000..cdb847be
--- /dev/null
+++ b/app/components/common/IDLBadge.tsx
@@ -0,0 +1,14 @@
+import React from 'react';
+
+import { IdlSpec } from '@/app/utils/convertLegacyIdl';
+
+interface IDLBadgeProps {
+    spec: IdlSpec;
+}
+
+export function IDLBadge({ spec }: IDLBadgeProps) {
+    const badgeClass = spec === 'legacy' ? 'bg-warning' : 'bg-success';
+    const badgeText = spec === 'legacy' ? 'Legacy' : '0.30.1';
+
+    return <span className={`badge ${badgeClass}`}>{badgeText} Anchor IDL</span>;
+}
diff --git a/app/types/react-json-view.d.ts b/app/types/react-json-view.d.ts
new file mode 100644
index 00000000..20800da1
--- /dev/null
+++ b/app/types/react-json-view.d.ts
@@ -0,0 +1,7 @@
+import 'react-json-view';
+
+declare module 'react-json-view' {
+    interface ReactJsonViewProps {
+        displayArrayKey?: boolean;
+    }
+}
diff --git a/app/utils/anchor.tsx b/app/utils/anchor.tsx
index 00bccd85..e305793a 100644
--- a/app/utils/anchor.tsx
+++ b/app/utils/anchor.tsx
@@ -200,7 +200,7 @@ function mapField(key: string, value: any, type: IdlType, idl: Idl, keySuffix?:
                 <div>{numberWithSeparator(value.toString())}</div>
             </SimpleRow>
         );
-    } else if (type === 'bool' || type === 'bytes' || type === 'string') {
+    } else if (type === 'bool' || type === 'string') {
         return (
             <SimpleRow
                 key={keySuffix ? `${key}-${keySuffix}` : key}
@@ -212,6 +212,30 @@ function mapField(key: string, value: any, type: IdlType, idl: Idl, keySuffix?:
                 <div>{value.toString()}</div>
             </SimpleRow>
         );
+    } else if (type === 'bytes') {
+        return (
+            <SimpleRow
+                key={keySuffix ? `${key}-${keySuffix}` : key}
+                rawKey={key}
+                type={type}
+                keySuffix={keySuffix}
+                nestingLevel={nestingLevel}
+            >
+                <div
+                    className="text-lg-start"
+                    style={{
+                        fontSize: '0.85rem',
+                        lineHeight: '1.2',
+                        maxWidth: '100%',
+                        overflowWrap: 'break-word',
+                        whiteSpace: 'normal',
+                        wordBreak: 'break-all',
+                    }}
+                >
+                    {(value as Buffer).toString('base64')}
+                </div>
+            </SimpleRow>
+        );
     } else if (type === 'pubkey') {
         return (
             <SimpleRow
@@ -465,6 +489,7 @@ function typeDisplayName(
         case 'i256':
         case 'u256':
         case 'bytes':
+            return 'bytes (Base64)';
         case 'string':
             return type.toString();
         case 'pubkey':
diff --git a/app/utils/convertLegacyIdl.ts b/app/utils/convertLegacyIdl.ts
index 40287932..532b3bf5 100644
--- a/app/utils/convertLegacyIdl.ts
+++ b/app/utils/convertLegacyIdl.ts
@@ -430,17 +430,21 @@ function convertDefinedTypeArg(arg: LegacyIdlDefinedTypeArg): any {
     throw new Error(`Unsupported defined type arg: ${JSON.stringify(arg)}`);
 }
 
+export function getIdlSpecType(idl: any): IdlSpec {
+    return idl.metadata?.spec ?? 'legacy';
+}
+
+export type IdlSpec = '0.1.0' | 'legacy';
+
 export function formatIdl(idl: any, programAddress?: string): Idl {
-    const spec = idl.metadata?.spec;
-
-    if (spec) {
-        switch (spec) {
-            case '0.1.0':
-                return idl as Idl;
-            default:
-                throw new Error(`IDL spec not supported: ${spec}`);
-        }
-    } else {
-        return removeUnusedTypes(convertLegacyIdl(idl as LegacyIdl, programAddress));
+    const spec = getIdlSpecType(idl);
+
+    switch (spec) {
+        case '0.1.0':
+            return idl as Idl;
+        case 'legacy':
+            return removeUnusedTypes(convertLegacyIdl(idl as LegacyIdl, programAddress));
+        default:
+            throw new Error(`IDL spec not supported: ${spec}`);
     }
 }