chore: fix transaction page

app/transactions/hash/[id]/page.tsx

@@ -17,12 +17,20 @@ import LnPayment from "../../../../components/transactions/ln-payment"
 export default async function TransactionDetails({ params }: { params: { id: string } }) {
   const id = params.id
 
-  const data = await getClient().query<TransactionsByHashQuery>({
-    query: TransactionsByHashDocument,
-    variables: { hash: id },
-  })
+  let txs: any
 
-  const txs = data.data.transactionsByHash
+  try {
+    const data = await getClient().query<TransactionsByHashQuery>({
+      query: TransactionsByHashDocument,
+      variables: { hash: id },
+    })
+
+    txs = data.data.transactionsByHash
+  } catch (err) {
+    // ignore
+    // no transactions attached to this hash
+    console.log(err)
+  }
 
   let invoice: LightningInvoice | undefined
 
@@ -39,7 +47,7 @@ export default async function TransactionDetails({ params }: { params: { id: str
     console.log(err)
   }
 
-  let payment: LightningPayment
+  let payment: LightningPayment | undefined
 
   try {
     const data = await getClient().query<LightningPaymentQuery>({
@@ -49,31 +57,36 @@ export default async function TransactionDetails({ params }: { params: { id: str
 
     payment = data.data?.lightningPayment
   } catch (err) {
-    const message = err instanceof Error ? err.message : "Unknown error"
-    return { message: `Failed to fetch: ${message}` }
+    // ignore
+    // no payment attached to this hash
+    console.log(err)
   }
 
   return (
     <>
-      <h1 className="mx-6 mt-6 text-2xl font-semibold text-gray-700">
-        Transaction details
-      </h1>
-      <div className="grid gap-6 mb-8 md:grid-cols-1 p-6">
-        {txs && <TransactionList transactions={txs} />}
-      </div>
+      {txs && (
+        <>
+          <h1 className="mx-6 mt-6 text-2xl font-semibold text-gray-700">
+            Transaction details
+          </h1>
+          <div className="grid gap-6 mb-8 md:grid-cols-1 p-6">
+            <TransactionList transactions={txs} />
+          </div>
+        </>
+      )}
       {invoice && (
         <>
           <h1 className="mx-6 mt-6 text-2xl font-semibold text-gray-700">Invoice</h1>
           <div className="grid gap-6 mb-8 md:grid-cols-1 p-6">
-            {invoice && <LnInvoice invoice={invoice} />}
+            <LnInvoice invoice={invoice} />
           </div>
         </>
       )}
       {payment && (
         <>
-          <h1 className="mx-6 mt-6 text-2xl font-semibold text-gray-700">Invoice</h1>
+          <h1 className="mx-6 mt-6 text-2xl font-semibold text-gray-700">Payment</h1>
           <div className="grid gap-6 mb-8 md:grid-cols-1 p-6">
-            {payment && <LnPayment payment={payment} />}
+            <LnPayment payment={payment} />
           </div>
         </>
       )}

components/transactions/list.tsx

@@ -1,7 +1,7 @@
 import { formatDate, formatNumber } from "../../app/utils"
 
 type Props = {
-  transactions: any
+  transactions: unknown[]
 }
 
 /* eslint @typescript-eslint/ban-ts-comment: "off" */