fix(app): handle missing packet hash in UI

Signed-off-by: Eric Hegnes <eric@hegnes.com>

Author: ehegnes

app2/src/lib/queries/transfer-by-hash.svelte.ts

@@ -1,7 +1,7 @@
 import { transferDetails } from "$lib/stores/transfer-details.svelte"
 import { createQueryGraphql } from "$lib/utils/queries"
 import { TransferDetails } from "@unionlabs/sdk/schema"
-import { Option, Schema } from "effect"
+import { Array as A, Option, pipe, Schema } from "effect"
 import { NoSuchElementException } from "effect/Cause"
 import { graphql } from "gql.tada"
 
@@ -50,12 +50,20 @@ export const transferByPacketHashQuery = (packetHash: string) =>
     `),
     variables: { packet_hash: packetHash },
     refetchInterval: "1 second",
-    writeData: data => {
-      if (data.pipe(Option.map(d => d.v2_transfers.length)).pipe(Option.getOrElse(() => 0)) === 0) {
-        transferDetails.error = Option.some(new NoSuchElementException())
-      }
-      transferDetails.data = data.pipe(Option.map(d => d.v2_transfers[0]))
-    },
+    writeData: (data) =>
+      pipe(
+        data,
+        Option.map(x => x.v2_transfers),
+        Option.flatMap(A.head),
+        Option.match({
+          onNone: () => {
+            transferDetails.error = Option.some(new NoSuchElementException())
+          },
+          onSome: (data) => {
+            transferDetails.data = Option.some(data)
+          },
+        }),
+      ),
     writeError: error => {
       transferDetails.error = error
     },

app2/src/routes/explorer/transfers/[packet_hash]/+page.svelte

@@ -5,6 +5,7 @@ import ChainComponent from "$lib/components/model/ChainComponent.svelte"
 import ErrorComponent from "$lib/components/model/ErrorComponent.svelte"
 import PacketComponent from "$lib/components/model/PacketComponent.svelte"
 import TokenComponent from "$lib/components/model/TokenComponent.svelte"
+import Anchor from "$lib/components/ui/A.svelte"
 import Card from "$lib/components/ui/Card.svelte"
 import DateTimeComponent from "$lib/components/ui/DateTimeComponent.svelte"
 import Label from "$lib/components/ui/Label.svelte"
@@ -354,6 +355,18 @@ const suggestTokenToWallet = async (chain_id: string, denom: TokenRawDenom) => {
             mode="transfer"
           />
         </div>
+      {:else}
+        <div class="flex flex-col gap-2 m-4">
+          <div>
+            Transfer not found for <code>{data.packetHash}</code>.
+          </div>
+          <div class="mt-2">
+            <Anchor
+              href={`/explorer/packets/${data.packetHash}`}
+              external={false}
+            >View packet details</Anchor>
+          </div>
+        </div>
       {/if}
     </div>
   </Card>