feat: add navigation arrows to blob details page

Author: luis-herasme

apps/web/src/pages/blob/[hash].tsx

@@ -59,9 +59,24 @@ const Blob: NextPage = function () {
   );
 
   const { data: neighbors } = api.blob.getBlobNeighbours.useQuery(
-    {
-      commitment: blob ? blob.commitment : "",
-    },
+    blob &&
+      blob.transactions[0] &&
+      blob.transactions[0].from &&
+      blob.transactions[0].index !== undefined
+      ? {
+          txHash: blob.transactions[0].hash,
+          commitment: blob.commitment,
+          transactionIndex: blob.transactions[0].index,
+          senderAddress: blob.transactions[0].from,
+          blockNumber: blob.transactions[0].blockNumber,
+        }
+      : {
+          txHash: "",
+          commitment: "",
+          transactionIndex: 0,
+          senderAddress: "",
+          blockNumber: 0,
+        },
     {
       enabled: Boolean(router.isReady && blob && blob.transactions[0]),
     }

packages/api/src/routers/blob/getBlobNeighbours.ts

@@ -4,6 +4,10 @@ import { z } from "@blobscan/zod";
 import { publicProcedure } from "../../procedures";
 
 const inputSchema = z.object({
+  txHash: z.string(),
+  transactionIndex: z.number(),
+  senderAddress: z.string(),
+  blockNumber: z.number(),
   commitment: z.string(),
 });
 
@@ -61,36 +65,22 @@ async function getBlobNeighbor(
         // Next/prev transaction
         {
           transaction: {
-            fromId: blob.transaction.fromId,
-            OR:
-              blob.transaction.index !== null
-                ? [
-                    {
-                      blockNumber:
-                        direction === "next"
-                          ? { gt: blob.blockNumber }
-                          : { lt: blob.blockNumber },
-                    },
-                    {
-                      AND: [
-                        { blockNumber: blob.blockNumber },
-                        {
-                          index:
-                            direction === "next"
-                              ? { gt: blob.transaction.index }
-                              : { lt: blob.transaction.index },
-                        },
-                      ],
-                    },
-                  ]
-                : [
-                    {
-                      blockNumber:
-                        direction === "next"
-                          ? { gt: blob.blockNumber }
-                          : { lt: blob.blockNumber },
-                    },
-                  ],
+            fromId: input.senderAddress,
+            OR: [
+              {
+                blockNumber:
+                  direction === "next"
+                    ? { gt: input.blockNumber }
+                    : { lt: input.blockNumber },
+              },
+              {
+                blockNumber: input.blockNumber,
+                index:
+                  direction === "next"
+                    ? { gt: input.transactionIndex }
+                    : { lt: input.transactionIndex },
+              },
+            ],
           },
         },
       ],