add button to download idl

solana-labs · Oct 9, 2024 · de498ac · de498ac
1 parent 3293f99
commit de498ac
Show file tree

Hide file tree

Showing 3 changed files with 48 additions and 6 deletions.
diff --git a/app/components/account/AnchorProgramCard.tsx b/app/components/account/AnchorProgramCard.tsx
@@ -4,6 +4,8 @@ import { useAnchorProgram } from '@providers/anchor';
 import { useCluster } from '@providers/cluster';
 import ReactJson from 'react-json-view';
 
+import { DownloadableButton } from '../common/Downloadable';
+
 export function AnchorProgramCard({ programId }: { programId: string }) {
     const { url } = useCluster();
     const { idl } = useAnchorProgram(programId, url);
@@ -20,6 +22,15 @@ export function AnchorProgramCard({ programId }: { programId: string }) {
                         <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>
 

diff --git 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
@@ -1,7 +1,7 @@
-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 +18,34 @@ 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>
+    );
+}
+