Merge pull request #274 from helius-labs/fix/devnet-txt-issue

[Fix] Devnet Transaction Issues
helius-labs · Jan 15, 2024 · adefbdb · adefbdb
2 parents 18a4a44 + d04dfc9
commit adefbdb
Show file tree

Hide file tree

Showing 8 changed files with 165 additions and 86 deletions.
diff --git a/src/lib/components/json.svelte b/src/lib/components/json.svelte
@@ -26,12 +26,12 @@
     <div class="mt-3 grid grid-cols-12 items-center gap-3 rounded-lg p-1">
         <div class="col-span-2 p-1 md:col-span-1">
             {#if label !== "token"}
-            <div class="center h-10 w-10 rounded-full bg-secondary">
-                <Icon
-                    id="json"
-                    size="sm"
-                />
-            </div>
+                <div class="center h-10 w-10 rounded-full bg-secondary">
+                    <Icon
+                        id="json"
+                        size="sm"
+                    />
+                </div>
             {/if}
         </div>
         <div
@@ -59,28 +59,26 @@
             </div>
             <div class="flex items-center">
                 {#if label === "token"}
-                <h3 class="text-xs mr-2">Copy JSON</h3>
+                    <h3 class="mr-2 text-xs">Copy JSON</h3>
                 {/if}
-                <CopyButton
-                    text={JSON.stringify(data, null, 2)}
-                />
+                <CopyButton text={JSON.stringify(data, null, 2)} />
                 {#if label !== "token"}
-                <button
-                    class="btn-ghost btn-sm btn"
-                    on:click={() => (showCode = !showCode)}
-                >
-                    {#if showCode}
-                        <Icon
-                            id="cancel"
-                            size="md"
-                        />
-                    {:else}
-                        <Icon
-                            id="fullscreen"
-                            size="sm"
-                        />
-                    {/if}
-                </button>
+                    <button
+                        class="btn-ghost btn-sm btn"
+                        on:click={() => (showCode = !showCode)}
+                    >
+                        {#if showCode}
+                            <Icon
+                                id="cancel"
+                                size="md"
+                            />
+                        {:else}
+                            <Icon
+                                id="fullscreen"
+                                size="sm"
+                            />
+                        {/if}
+                    </button>
                 {/if}
             </div>
         </div>

diff --git a/src/lib/trpc/routes/raw-transaction.ts b/src/lib/trpc/routes/raw-transaction.ts
@@ -11,18 +11,26 @@ import { HELIUS_API_KEY } from "$env/static/private";
 export const rawTransaction = t.procedure
     .input(z.tuple([z.string(), z.boolean()]))
     .query(async ({ input }) => {
-        const [signature, isMainnet] = input;
+        try {
+            const [signature, isMainnet] = input;
 
-        const connection = new Connection(
-            getRPCUrl(`?api-key=${HELIUS_API_KEY}`, isMainnet),
-            "confirmed"
-        );
+            const connection = new Connection(
+                getRPCUrl(`?api-key=${HELIUS_API_KEY}`, isMainnet),
+                "confirmed"
+            );
 
-        const transaction = await connection.getTransaction(signature, {
-            maxSupportedTransactionVersion: 0,
-        });
+            const transaction = await connection.getTransaction(signature, {
+                maxSupportedTransactionVersion: 0,
+            });
 
-        return {
-            transaction,
-        };
+            if (!transaction) {
+                return { data: null, error: "Raw transaction not found" };
+            }
+
+            return {
+                transaction,
+            };
+        } catch (error) {
+            return { data: null, error: "Server error" };
+        }
     });
diff --git a/src/lib/trpc/routes/transaction.ts b/src/lib/trpc/routes/transaction.ts
@@ -3,7 +3,6 @@ import type { EnrichedTransaction } from "helius-sdk";
 import { parseTransaction } from "$lib/xray";
 
 import { t } from "$lib/trpc/t";
-
 import { z } from "zod";
 import { getAPIUrl } from "$lib/util/get-api-url";
 
@@ -18,23 +17,36 @@ export const transaction = t.procedure
         })
     )
     .query(async ({ input }) => {
-        const url = getAPIUrl(
-            `/v0/transactions/?api-key=${HELIUS_API_KEY}`,
-            input.isMainnet
-        );
-        const response = await fetch(url, {
-            body: JSON.stringify({
-                transactions: [input?.transaction],
-            }),
+        try {
+            const url = getAPIUrl(
+                `/v0/transactions/?api-key=${HELIUS_API_KEY}`,
+                input.isMainnet
+            );
+
+            const response = await fetch(url, {
+                body: JSON.stringify({
+                    transactions: [input?.transaction],
+                }),
+
+                method: "POST",
+            });
+
+            if (!response.ok) {
+                return { data: null, error: "Transaction not found" };
+            }
 
-            method: "POST",
-        });
+            const [tx]: EnrichedTransaction[] = await response.json();
 
-        const [tx]: EnrichedTransaction[] = await response.json();
+            const parsed = parseTransaction(tx, input?.account);
 
-        const parsed = parseTransaction(tx, input?.account);
+            if (parsed === undefined) {
+                return { data: null, error: "Transaction not found" };
+            }
 
-        parsed.raw = tx;
+            parsed.raw = tx;
 
-        return parsed;
+            return parsed;
+        } catch (error) {
+            return { data: null, error: "Server error" };
+        }
     });
diff --git a/src/lib/util/get-api-url.ts b/src/lib/util/get-api-url.ts
@@ -1,6 +1,6 @@
 export function getAPIUrl(path: string, isMainnet: boolean) {
     const baseUrl = isMainnet
-        ? "https://api-mainnet.helius-rpc.com"
-        : "https://api-devnet.helius-rpc.com";
+        ? "https://api.helius.xyz"
+        : "https://api-devnet.helius.xyz";
     return `${baseUrl}${path}`;
 }
diff --git a/src/routes/account/[account]/+layout.svelte b/src/routes/account/[account]/+layout.svelte
@@ -39,22 +39,24 @@
     });
 
     onMount(async () => {
-        const response = await fetch(
-            `/api/fetchIdl?account=${account}&isMainnetValue=${isMainnetValue}`
-        );
+        try {
+            const response = await fetch(
+                `/api/fetchIdl?account=${account}&isMainnetValue=${isMainnetValue}`
+            );
 
-        if (response.ok) {
-            const data = await response.json();
+            if (response.ok) {
+                const data = await response.json();
 
-            if (data.idl) {
-                idlStore.set(data.idl);
+                if (data.idl) {
+                    idlStore.set(data.idl);
+                } else {
+                    programIDL = null;
+                }
             } else {
-                // eslint-disable-next-line no-console
-                console.error("IDL not found for the provided account");
+                programIDL = null;
             }
-        } else {
-            // eslint-disable-next-line no-console
-            console.error(`Failed to fetch IDL: ${response.status}`);
+        } catch (e) {
+            programIDL = null;
         }
     });
 

diff --git a/src/routes/api/fetchIdl/+server.ts b/src/routes/api/fetchIdl/+server.ts
@@ -9,7 +9,16 @@ export async function GET({ url }) {
     const { HELIUS_API_KEY } = process.env;
 
     if (!HELIUS_API_KEY || !account) {
-        throw error(500, "API key not set");
+        return new Response(
+            JSON.stringify({
+                error: "API key or account parameter not set",
+                success: false,
+            }),
+            {
+                headers: { "Content-Type": "application/json " },
+                status: 400,
+            }
+        );
     }
 
     try {
@@ -24,9 +33,27 @@ export async function GET({ url }) {
                 headers: { "Content-Type": "application/json" },
             });
         } else {
-            throw error(404, "IDL not found");
+            return new Response(
+                JSON.stringify({
+                    error: "IDL not found",
+                    success: false,
+                }),
+                {
+                    headers: { "Content-Type": "application/json " },
+                    status: 404,
+                }
+            );
         }
     } catch (err) {
-        throw error(500, "Failed to fetch IDL");
+        return new Response(
+            JSON.stringify({
+                error: "Failed to fetch IDL",
+                success: false,
+            }),
+            {
+                headers: { "Content-Type": "application/json " },
+                status: 500,
+            }
+        );
     }
 }
diff --git a/src/routes/token/[token]/+page.svelte b/src/routes/token/[token]/+page.svelte
@@ -475,11 +475,11 @@
                 </div>
             {/if}
 
-            <div class="mt-6 mb-6">
+            <div class="mb-6 mt-6">
                 <Collapse
-                sectionTitle="JSON Metadata"
-                iconId="json"
-                showDetails={false}
+                    sectionTitle="JSON Metadata"
+                    iconId="json"
+                    showDetails={false}
                 >
                     <JSON
                         data={metadata}

diff --git a/src/routes/tx/[tx]/+page.svelte b/src/routes/tx/[tx]/+page.svelte
@@ -1,4 +1,5 @@
 <script lang="ts">
+    // @ts-nocheck
     import type { ProtonTransaction } from "$lib/xray";
 
     import { onMount } from "svelte";
@@ -12,7 +13,6 @@
     import { trpcWithQuery } from "$lib/trpc/client";
 
     import Account from "$lib/components/account-data.svelte";
-    import shortenAddress from "$lib/util/shorten-string";
     import CopyButton from "$lib/components/copy-button.svelte";
     import IconCard from "$lib/components/icon-card.svelte";
     import Icon from "$lib/components/icon.svelte";
@@ -24,33 +24,65 @@
 
     let animate = false;
     let isLoading = true;
+    let isMounted = false;
 
     const signature = $page.params.tx;
 
     const client = trpcWithQuery($page);
     const params = new URLSearchParams(window.location.search);
     const network = params.get("network");
     const isMainnetValue = network !== "devnet";
-    const transaction = client.transaction.createQuery({
-        account: $page.url.searchParams
-            .get("ref")
-            ?.split("@")
-            .reduce(
-                (acc, ref) =>
-                    ref.startsWith("wallet") ? ref.split(":")[1] : acc,
-                ""
-            ),
-        isMainnet: isMainnetValue,
-        transaction: signature || "",
-    });
+    let transaction: object | null = null;
 
     const rawTransaction = client.rawTransaction.createQuery([
         signature || "",
         isMainnetValue,
     ]);
 
+    let error: any = null;
+
+    $: if (signature && isMounted) {
+        executeQuery();
+    }
+
+    async function executeQuery() {
+        isLoading = true;
+
+        try {
+            const result = await fetchTransactionData();
+            transaction = result;
+            error = null;
+        } catch (e) {
+            error = e;
+            transaction = null;
+        } finally {
+            isLoading = false;
+        }
+    }
+
+    async function fetchTransactionData() {
+        const result = client.transaction.createQuery({
+            account: $page.url.searchParams
+                .get("ref")
+                ?.split("@")
+                .reduce(
+                    (acc, ref) =>
+                        ref.startsWith("wallet") ? ref.split(":")[1] : acc,
+                    ""
+                ),
+            isMainnet: isMainnetValue,
+            transaction: signature || "",
+        });
+        return result;
+    }
+
     onMount(() => {
         animate = true;
+        isMounted = true;
+
+        return () => {
+            isMounted = false;
+        };
     });
 
     $: data = $transaction?.data