Try Implementing IDL Fetch

package.json

@@ -78,6 +78,7 @@
         "vite": "^4.3.9"
     },
     "dependencies": {
+        "@coral-xyz/anchor": "^0.29.0",
         "@lottiefiles/svelte-lottie-player": "^0.3.0",
         "@onsol/tldparser": "^0.5.3",
         "@solana/spl-account-compression": "^0.1.8",

src/lib/util/stores/idl.ts

@@ -0,0 +1,4 @@
+import { writable } from "svelte/store";
+import type { Idl } from "@coral-xyz/anchor";
+
+export const idlStore = writable<Idl | null>(null);

src/lib/util/stores/idlStore.ts

@@ -0,0 +1,64 @@
+/* eslint-disable no-console */
+/* eslint-disable this/no-this */
+import { writable, type Writable } from "svelte/store";
+import { PublicKey, Keypair, Connection } from "@solana/web3.js";
+import * as anchor from "@coral-xyz/anchor";
+import { getRPCUrl } from "../get-rpc-url";
+
+// Define the internal state type
+type IdlState = anchor.Idl | null;
+
+class IdlStore {
+    private store: Writable<IdlState>;
+
+    constructor() {
+        this.store = writable<IdlState>(null);
+    }
+
+    // Method to get the store's subscription method
+    subscribe(run: (value: IdlState) => void) {
+        return this.store.subscribe(run);
+    }
+
+    // Method to manually set the store's state
+    set(idl: IdlState) {
+        this.store.set(idl);
+    }
+
+    // Method to update the store's state
+    update(updater: (value: IdlState) => IdlState) {
+        this.store.update(updater);
+    }
+}
+
+// Create an instance of the custom store
+export const idlStore = new IdlStore();
+
+// Function to fetch IDL and update the store
+export async function grabIdl(
+    accountAddress: string,
+    isMainnetValue: boolean,
+    apiKey: string
+) {
+    try {
+        const connection = new Connection(
+            getRPCUrl(`?api-key=${apiKey}`, isMainnetValue),
+            "confirmed"
+        );
+        const aWallet = new anchor.Wallet(Keypair.generate());
+        const provider = new anchor.AnchorProvider(
+            connection,
+            aWallet,
+            anchor.AnchorProvider.defaultOptions()
+        );
+
+        const accountPubkey = new PublicKey(accountAddress);
+        const idl = await anchor.Program.fetchIdl(accountPubkey, provider);
+
+        // Directly use the idlStore instance to set the IDL
+        idlStore.set(idl);
+    } catch (error) {
+        console.error("Error fetching IDL:", error);
+        idlStore.set(null);
+    }
+}

src/routes/account/[account]/+layout.svelte

@@ -1,12 +1,22 @@
 <script lang="ts">
     import { page } from "$app/stores";
+    // @ts-ignore
+    import { idlStore, grabIdl } from "$lib/util/stores/idl";
+
+
+    import type { Idl } from "@coral-xyz/anchor";
+
+
+    import { PROGRAM_ID as ACCOUNT_COMPRESSION_ID } from "@solana/spl-account-compression";
 
-    import Icon from "$lib/components/icon.svelte";
 
+    import Icon from "$lib/components/icon.svelte";
     import AccountHeader from "$lib/components/account-header.svelte";
     import { showModal } from "$lib/state/stores/modals";
     import { trpcWithQuery } from "$lib/trpc/client";
-    import { PROGRAM_ID as ACCOUNT_COMPRESSION_ID } from "@solana/spl-account-compression";
+    import { onMount } from "svelte";
+
+    const api = import.meta.env.VITE_HELIUS_API_KEY;
 
     const client = trpcWithQuery($page);
 
@@ -27,6 +37,18 @@
 
     $: endsWith = (str: string) => $page.url.pathname.endsWith(str);
     $: hasAssets = $assets?.data?.total > 0;
+
+    let programIDL: Idl | null = null;
+
+    onMount(() => {
+        if (account) {
+            grabIdl(account, isMainnetValue, api);
+            // Subscribe to idlStore to update programIDL
+            idlStore.subscribe((idl) => {
+                programIDL = idl;
+            });
+        }
+    });
 </script>
 
 <div class="relative mx-auto w-full max-w-2xl pb-32">
@@ -75,6 +97,13 @@
                     <Icon id="settings" />
                 </button>
             {/if}
+            {#if programIDL}
+                <a
+                    href={`/account/${account}/assets?${selectedNetwork}`}
+                    class="tab-bordered tab"
+                    class:tab-active={endsWith("/idl")}>IDL</a
+                >
+            {/if}
         </div>
     </div>
 

src/routes/account/[account]/idl/+page.svelte

@@ -0,0 +1,27 @@
+<script lang="ts">
+    import { idlStore } from "$lib/util/stores/idl";
+    // @ts-ignore
+    import formatHighlight from "json-format-highlight";
+
+    let idl: string;
+    let idlData = $idlStore;
+
+    $: if (idlData) {
+        idl = formatHighlight(JSON.stringify(idlData, null, 2), {
+            keyColor: "#a5a3a",
+            numberColor: "#e8a034",
+            stringColor: "#24ae67",
+        });
+    }
+
+</script>
+
+<div>
+    <div class="relative mx-auto w-full max-w-2xl pb-32">
+        {#if idlData}
+        <div class="code col-span-12 w-full overflow-hidden px-3">
+            <pre><code class="text-xs">{@html idl}</code></pre>
+        </div>
+        {/if}
+    </div>
+</div>