feat: implement OptimismCard component for displaying decoded transaction fields and removes autocompleteBlockHash

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

@@ -3,6 +3,9 @@ import { useMemo } from "react";
 import type { NextPage } from "next";
 import { useRouter } from "next/router";
 
+import type { OptimismDecodedData } from "@blobscan/api/src/blob-parse/optimism";
+import type dayjs from "@blobscan/dayjs";
+
 import { RollupBadge } from "~/components/Badges/RollupBadge";
 import { Card } from "~/components/Cards/Card";
 import { BlobCard } from "~/components/Cards/SurfaceCards/BlobCard";
@@ -16,6 +19,7 @@ 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 NextError from "~/pages/_error";
 import type { TransactionWithExpandedBlockAndBlob } from "~/types";
 import {
@@ -256,62 +260,10 @@ const Tx: NextPage = () => {
       />
 
       {decodedData && (
-        <Card header="Decoded Fields">
-          <div>
-            <InfoGrid
-              fields={[
-                {
-                  name: "Timestamp since L2 genesis",
-                  value: (
-                    <div className="whitespace-break-spaces">
-                      {tx
-                        ? formatTimestamp(
-                            tx.blockTimestamp.subtract(
-                              decodedData.timestampSinceL2Genesis,
-                              "ms"
-                            )
-                          )
-                        : ""}
-                    </div>
-                  ),
-                },
-                {
-                  name: "Last L1 origin number",
-                  value: decodedData.lastL1OriginNumber,
-                },
-                {
-                  name: "Parent L2 block hash",
-                  value: "0x" + decodedData.parentL2BlockHash + "...",
-                },
-                {
-                  name: "L1 origin block hash",
-                  value: (
-                    <BlockHash
-                      fullHash={decodedData.fullL1OriginBlockHash}
-                      partialHash={decodedData.l1OriginBlockHash}
-                    />
-                  ),
-                },
-                {
-                  name: "Number of L2 blocks",
-                  value: decodedData.numberOfL2Blocks,
-                },
-                {
-                  name: "Changed by L1 origin",
-                  value: decodedData.changedByL1Origin,
-                },
-                {
-                  name: "Total transactions",
-                  value: decodedData.totalTxs,
-                },
-                {
-                  name: "Contract creation transactions",
-                  value: decodedData.contractCreationTxsNumber,
-                },
-              ]}
-            />
-          </div>
-        </Card>
+        <OptimismCard
+          decodedData={decodedData}
+          txTimestamp={tx ? tx.blockTimestamp : undefined}
+        />
       )}
 
       <Card header={`Blobs ${tx ? `(${tx.blobs.length})` : ""}`}>
@@ -325,28 +277,95 @@ const Tx: NextPage = () => {
   );
 };
 
-type BlockHashProps = {
-  partialHash: string;
-  fullHash: string | undefined;
+type OptimismCardProps = {
+  decodedData: OptimismDecodedData;
+  txTimestamp: dayjs.Dayjs | undefined;
 };
 
-const BlockHash: FC<BlockHashProps> = ({ fullHash, partialHash }) => {
-  if (fullHash === undefined) {
-    return "0x" + partialHash + "...";
-  }
+const OptimismCard: FC<OptimismCardProps> = ({ decodedData, txTimestamp }) => {
+  const { data: blockExists, isLoading } = api.block.checkBlockExists.useQuery({
+    blockNumber: decodedData.lastL1OriginNumber,
+  });
+
+  const blockLink = blockExists
+    ? `https://blobscan.com/block/${decodedData.lastL1OriginNumber}`
+    : `https://etherscan.io/block/${decodedData.lastL1OriginNumber}`;
+
+  const hash = `0x${decodedData.l1OriginBlockHash}...`;
+
+  const timestamp = txTimestamp
+    ? formatTimestamp(
+        txTimestamp.subtract(decodedData.timestampSinceL2Genesis, "ms")
+      )
+    : undefined;
 
-  const prefixedFullHash = "0x" + fullHash;
+  if (isLoading) {
+    return (
+      <Card header="Loading Decoded Fields...">
+        <div className="flex h-32 items-center justify-center">
+          <Loading className="h-8 w-8 animate-spin" />
+        </div>
+      </Card>
+    );
+  }
 
   return (
-    <div className="flex items-center gap-2">
-      <Link href={`https://blobscan.com/block/${prefixedFullHash}`}>
-        {prefixedFullHash}
-      </Link>
-      <CopyToClipboard
-        value={prefixedFullHash}
-        tooltipText="Copy L1 origin block hash"
-      />
-    </div>
+    <Card header="Decoded Fields">
+      <div>
+        <InfoGrid
+          fields={[
+            {
+              name: "Timestamp since L2 genesis",
+              value: <div className="whitespace-break-spaces">{timestamp}</div>,
+            },
+            {
+              name: "Last L1 origin number",
+              value: (
+                <div className="flex items-center gap-2">
+                  <Link href={blockLink}>{decodedData.lastL1OriginNumber}</Link>
+                  <CopyToClipboard
+                    value={decodedData.lastL1OriginNumber.toString()}
+                    tooltipText="Copy Last L1 origin number"
+                  />
+                </div>
+              ),
+            },
+            {
+              name: "Parent L2 block hash",
+              value: "0x" + decodedData.parentL2BlockHash + "...",
+            },
+            {
+              name: "L1 origin block hash",
+              value: (
+                <div className="flex items-center gap-2">
+                  <Link href={blockLink}>{hash}</Link>
+                  <CopyToClipboard
+                    value={hash}
+                    tooltipText="Copy L1 origin block hash"
+                  />
+                </div>
+              ),
+            },
+            {
+              name: "Number of L2 blocks",
+              value: decodedData.numberOfL2Blocks,
+            },
+            {
+              name: "Changed by L1 origin",
+              value: decodedData.changedByL1Origin,
+            },
+            {
+              name: "Total transactions",
+              value: decodedData.totalTxs,
+            },
+            {
+              name: "Contract creation transactions",
+              value: decodedData.contractCreationTxsNumber,
+            },
+          ]}
+        />
+      </div>
+    </Card>
   );
 };
 

packages/api/src/blob-parse/optimism.ts

@@ -1,8 +1,5 @@
 import { z } from "zod";
 
-import { prisma } from "@blobscan/db";
-import { logger } from "@blobscan/logger";
-
 export const OptimismDecodedDataSchema = z.object({
   timestampSinceL2Genesis: z.number(),
   lastL1OriginNumber: z.number(),
@@ -12,10 +9,9 @@ export const OptimismDecodedDataSchema = z.object({
   changedByL1Origin: z.number(),
   totalTxs: z.number(),
   contractCreationTxsNumber: z.number(),
-  fullL1OriginBlockHash: z.string().optional(),
 });
 
-type OptimismDecodedData = z.infer<typeof OptimismDecodedDataSchema>;
+export type OptimismDecodedData = z.infer<typeof OptimismDecodedDataSchema>;
 
 export async function parseOptimismDecodedData(
   data: string
@@ -34,48 +30,5 @@ export async function parseOptimismDecodedData(
     return null;
   }
 
-  const hash = await autocompleteBlockHash(decoded.data.l1OriginBlockHash);
-
-  if (hash) {
-    decoded.data.fullL1OriginBlockHash = hash;
-  } else {
-    logger.error(
-      `Failed to get full block hash for L1 origin block hash: ${decoded.data.l1OriginBlockHash}`
-    );
-  }
-
   return decoded.data;
 }
-
-/* Autocomplete a block hash from a truncated version of it.
-   @param partialHash - The first bytes of a block hash.
-   @returns The block hash, if there is a single ocurrence, or null.
- */
-async function autocompleteBlockHash(partialHash: string) {
-  if (!partialHash) {
-    return null;
-  }
-
-  const blocks = await prisma.block.findMany({
-    where: {
-      hash: {
-        startsWith: "0x" + partialHash,
-      },
-    },
-    select: {
-      hash: true,
-    },
-  });
-
-  if (blocks[0] === undefined) {
-    return null;
-  }
-
-  if (blocks.length > 1) {
-    logger.error(
-      `Found ${blocks.length} blocks while autocompleting block hash ${partialHash}`
-    );
-  }
-
-  return blocks[0].hash;
-}

packages/api/src/routers/block/checkBlobExists.ts

@@ -0,0 +1,22 @@
+import { z } from "@blobscan/zod";
+
+import { publicProcedure } from "../../procedures";
+
+export const checkBlockExists = publicProcedure
+  .input(
+    z.object({
+      blockNumber: z.number(),
+    })
+  )
+  .query(async ({ ctx: { prisma }, input }) => {
+    const block = await prisma.block.findFirst({
+      where: {
+        number: input.blockNumber,
+      },
+      select: {
+        number: true,
+      },
+    });
+
+    return Boolean(block);
+  });

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

@@ -1,4 +1,5 @@
 import { t } from "../../trpc-client";
+import { checkBlockExists } from "./checkBlobExists";
 import { getAll } from "./getAll";
 import { getByBlockId } from "./getByBlockId";
 import { getCount } from "./getCount";
@@ -9,4 +10,5 @@ export const blockRouter = t.router({
   getByBlockId,
   getCount,
   getLatestBlock,
+  checkBlockExists,
 });