diff --git a/app/components/account/AnchorProgramCard.tsx b/app/components/account/AnchorProgramCard.tsx
index d8bdd24e..58a753f7 100644
--- 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 }) {
Anchor IDL
+
+
+ Download IDL
+
+
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({
Data Size (Bytes) |
-
+
{account.space}
-
+
|
)}
diff --git a/app/components/common/Downloadable.tsx b/app/components/common/Downloadable.tsx
index 46836f9c..d3c93aa0 100644
--- 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
+}: {
+ data: string;
+ filename: string;
+ children?: ReactNode;
+ type?: string;
+ icon?: ComponentType
+}) {
+ 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 (
+
+
+ {children}
+
+ );
+}
+