Merge pull request #238 from helius-labs/fix/txt-with-no-logs

[Bug] Fix Valid Transaction Determination

package.json

@@ -97,6 +97,7 @@
         "json-viewer-js": "^1.0.8",
         "svelte-highlight": "^7.1.2",
         "svelte-intersection-observer": "^0.10.0",
+        "svelte-loading-spinners": "^0.3.4",
         "trpc-svelte-query-adapter": "^2.0.0",
         "trpc-sveltekit": "^3.3.1",
         "zod": "^3.20.6"

src/lib/components/log-messages.svelte

@@ -9,59 +9,54 @@
 </style>
 
 <script lang="ts">
-    import { txn } from "$lib/state/stores/txn";
     import { parseProgramLogs } from "$lib/util/program-logs";
-    import { onMount } from "svelte";
     export let logs: string[];
 
     const parsedLogs = parseProgramLogs(logs);
 
-    onMount(() => {
-        //@ts-ignore
-        if (parsedLogs == "") {
-            txn.set(false);
-        } else {
-            txn.set(true);
-        }
-    });
-
     const totalComputeUnits = parsedLogs.reduce(
         (sum, log) => sum + log.computeUnits,
         0
     );
+
+    // Check if there is at least one entry with non-empty logs
+    const hasNonEmptyLogs = parsedLogs.some(instruction => instruction.logs.length > 0);
 </script>
 
 <div class="pt-0">
-    {#each parsedLogs as instruction, idx}
-        {#if idx === 0}
-            <p class="px-3">
-                <span class="mb-1">
-                    {`#${idx + 1} - `}
-                </span>
+    {#if hasNonEmptyLogs}
+        {#each parsedLogs as instruction, idx}
+            {#if idx === 0}
+                <p class="px-3">
+                    <span class="mb-1">
+                        {`#${idx + 1} - `}
+                    </span>
 
-                <span>
-                    {`${instruction.invokedProgram} Instruction`}
-                </span>
-            </p>
-        {:else}
-            <p class="px-3 pb-1 pt-3">
-                <span class="mb-1">
-                    {`#${idx + 1} - `}
-                </span>
+                    <span>
+                        {`${instruction.invokedProgram} Instruction`}
+                    </span>
+                </p>
+            {:else}
+                <p class="px-3 pb-1 pt-3">
+                    <span class="mb-1">
+                        {`#${idx + 1} - `}
+                    </span>
 
-                <span>
-                    {`${instruction.invokedProgram} Instruction`}
-                </span>
-            </p>
-        {/if}
-        {#each instruction.logs as log}
-            <p class={`px-3 pb-1 text-sm text-${log.style}`}>
-                <span class={`mr-1 text-${log.style}`}>{log.prefix}</span><span
-                    class={``}>{log.text}</span
-                >
-            </p>
+                    <span>
+                        {`${instruction.invokedProgram} Instruction`}
+                    </span>
+                </p>
+            {/if}
+            {#each instruction.logs as log}
+                <p class={`px-3 pb-1 text-sm text-${log.style}`}>
+                    <span class={`mr-1 text-${log.style}`}>{log.prefix}</span
+                    ><span class={``}>{log.text}</span>
+                </p>
+            {/each}
         {/each}
-    {/each}
+    {:else}
+        <p class="px-3 pb-1 text-sm">This transaction does not have any logs</p>
+    {/if}
 </div>
 
 {#if totalComputeUnits > 0}

src/lib/components/transactions.svelte

@@ -32,15 +32,15 @@
     }) =>
         compressed
             ? client.cnftTransactions.createInfiniteQuery(input, {
-                getNextPageParam: (lastPage) => lastPage.oldest,
-                refetchOnMount: false,
-                refetchOnWindowFocus: false,
-            })
+                  getNextPageParam: (lastPage) => lastPage.oldest,
+                  refetchOnMount: false,
+                  refetchOnWindowFocus: false,
+              })
             : client.transactions.createInfiniteQuery(input, {
-                getNextPageParam: (lastPage) => lastPage.oldest,
-                refetchOnMount: false,
-                refetchOnWindowFocus: false,
-            });
+                  getNextPageParam: (lastPage) => lastPage.oldest,
+                  refetchOnMount: false,
+                  refetchOnWindowFocus: false,
+              });
 
     const loadMore = () => {
         $transactions.fetchNextPage();

src/routes/tx/[tx]/+page.svelte

@@ -7,11 +7,12 @@
 
     import { fly } from "svelte/transition";
 
+    import { Circle } from "svelte-loading-spinners";
+
     import { trpcWithQuery } from "$lib/trpc/client";
 
     import Account from "$lib/components/account-data.svelte";
     import shortenAddress from "$lib/util/shorten-string";
-    import { txn } from "$lib/state/stores/txn";
     import CopyButton from "$lib/components/copy-button.svelte";
     import IconCard from "$lib/components/icon-card.svelte";
     import Icon from "$lib/components/icon.svelte";
@@ -22,6 +23,7 @@
     import Network from "$lib/components/network.svelte";
 
     let animate = false;
+    let isLoading = true;
 
     const signature = $page.params.tx;
 
@@ -58,9 +60,23 @@
     $: rawData = $rawTransaction?.data;
 
     $: ({ raw, ...rest } = data || { raw: null });
+
+    $: isLoading = !$transaction || $transaction.data === undefined;
 </script>
 
-{#if $txn == true}
+{#if isLoading}
+    <div
+        class="flex content-center justify-center pt-4"
+        aria-label="Loading spinner"
+    >
+        <Circle
+            size="50"
+            color="#FFFFFF"
+            unit="px"
+            duration="1s"
+        />
+    </div>
+{:else if $transaction?.data?.signature}
     <div class="content mb-4 mt-4 flex justify-between px-3">
         <h1 class="text-xl font-bold">Transaction</h1>
         <div