feat: add navigation arrows to blob details page

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

@@ -17,8 +17,10 @@ import type { DropdownProps, Option } from "~/components/Dropdown";
 import type { DetailsLayoutProps } from "~/components/Layouts/DetailsLayout";
 import { DetailsLayout } from "~/components/Layouts/DetailsLayout";
 import { Link } from "~/components/Link";
+import { NavArrows } from "~/components/NavArrows";
 import { BlockStatus } from "~/components/Status";
 import { api } from "~/api-client";
+import Loading from "~/icons/loading.svg";
 import type { Rollup } from "~/types";
 import {
   buildBlockRoute,
@@ -56,6 +58,21 @@ const Blob: NextPage = function () {
     (blobViewMode) => ({ value: blobViewMode })
   );
 
+  const enabled = Boolean(router.isReady && blob && blob.transactions[0]);
+
+  const { data: neighbors } = api.blob.getBlobNeighbours.useQuery(
+    blob && blob.transactions[0]
+      ? {
+          commitment: blob.commitment,
+        }
+      : {
+          commitment: "",
+        },
+    {
+      enabled,
+    }
+  );
+
   useEffect(() => {
     if (!decoder) {
       return;
@@ -167,7 +184,25 @@ const Blob: NextPage = function () {
   return (
     <>
       <DetailsLayout
-        header="Blob Details"
+        header={
+          <div className="flex items-center justify-start gap-4">
+            Blob Details
+            {neighbors ? (
+              <NavArrows
+                prev={{
+                  href: neighbors?.prev ? `/blob/${neighbors.prev}` : undefined,
+                  tooltip: "Previous blob from this sender",
+                }}
+                next={{
+                  href: neighbors?.next ? `/blob/${neighbors.next}` : undefined,
+                  tooltip: "Next blob from this sender",
+                }}
+              />
+            ) : (
+              <Loading className="h-5 w-5 animate-spin" />
+            )}
+          </div>
+        }
         fields={blob ? detailsFields : undefined}
       />
       <Card

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

@@ -0,0 +1,101 @@
+import { prisma } from "@blobscan/db";
+import { z } from "@blobscan/zod";
+
+import { publicProcedure } from "../../procedures";
+
+const inputSchema = z.object({
+  commitment: z.string(),
+});
+
+type Input = z.infer<typeof inputSchema>;
+
+export const getBlobNeighbours = publicProcedure
+  .input(inputSchema)
+  .query(async ({ input }) => {
+    const [next, prev] = await Promise.all([
+      getBlobNeighbor(input, "next"),
+      getBlobNeighbor(input, "prev"),
+    ]);
+
+    return {
+      next,
+      prev,
+    };
+  });
+
+async function getBlobNeighbor(
+  input: Input,
+  direction: "next" | "prev"
+): Promise<string | null> {
+  const blob = await prisma.blobsOnTransactions.findFirst({
+    where: {
+      blob: {
+        commitment: input.commitment,
+      },
+    },
+    select: {
+      index: true,
+      blockNumber: true,
+      transaction: {
+        select: {
+          hash: true,
+          fromId: true,
+          index: true,
+        },
+      },
+    },
+  });
+
+  if (!blob) {
+    return null;
+  }
+
+  const nextBlobInTx = await prisma.blobsOnTransactions.findFirst({
+    where: {
+      OR: [
+        // Same transaction
+        {
+          txHash: blob.transaction.hash,
+          index: direction === "next" ? { gt: blob.index } : { lt: blob.index },
+        },
+        // Different transaction same block
+        blob.transaction.index
+          ? {
+              blockNumber: blob.blockNumber,
+              transaction: {
+                fromId: blob.transaction.fromId,
+              },
+              txIndex:
+                direction === "next"
+                  ? { gt: blob.transaction.index }
+                  : { lt: blob.transaction.index },
+            }
+          : {},
+        // Different block
+        {
+          blockNumber:
+            direction === "next"
+              ? { gt: blob.blockNumber }
+              : { lt: blob.blockNumber },
+          transaction: {
+            fromId: blob.transaction.fromId,
+          },
+        },
+      ],
+    },
+    select: {
+      blobHash: true,
+      txIndex: true,
+    },
+    orderBy:
+      direction === "next"
+        ? [{ blockNumber: "asc" }, { index: "asc" }, { txIndex: "asc" }]
+        : [{ blockNumber: "desc" }, { index: "desc" }, { txIndex: "desc" }],
+  });
+
+  if (nextBlobInTx) {
+    return nextBlobInTx.blobHash;
+  }
+
+  return null;
+}

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

@@ -1,12 +1,14 @@
 import { t } from "../../trpc-client";
 import { getAll } from "./getAll";
 import { getBlobDataByBlobId } from "./getBlobDataByBlobId";
+import { getBlobNeighbours } from "./getBlobNeighbours";
 import { getByBlobId } from "./getByBlobId";
 import { getCount } from "./getCount";
 
 export const blobRouter = t.router({
   getAll,
   getByBlobId,
+  getBlobNeighbours,
   getBlobDataByBlobId,
   getCount,
 });