feat: update L1 origin block hash handling and add full L1 origin blo…

…ck hash field (#631)

* feat: update L1 origin block hash handling and add full L1 origin block hash field

* fix(api): prepend "0x" to partial hash in autocompleteBlockHash function

* feat(api): move autocompleteBlockHash function to optimism.ts and remove old file

* refactor(api): remove export from autocompleteBlockHash function in optimism.ts

* feat(tx): create BlockHash component for L1 origin block hash display

* chore: added changeset

* fix: update label to tooltipText for CopyToClipboard component

* fix: handle empty partialHash in autocompleteBlockHash function and improve logging for multiple block occurrences

.changeset/rich-beans-heal.md

@@ -0,0 +1,5 @@
+---
+"@blobscan/web": patch
+---
+
+Added a link to the L1 origin block if the full hash is found using the optimism decoded fields.

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

@@ -1,3 +1,4 @@
+import type { FC } from "react";
 import { useMemo } from "react";
 import type { NextPage } from "next";
 import { useRouter } from "next/router";
@@ -280,30 +281,15 @@ const Tx: NextPage = () => {
                 },
                 {
                   name: "Parent L2 block hash",
-                  value: (
-                    <div className="flex items-center gap-2">
-                      {"0x" + decodedData.parentL2BlockHash + "..."}
-                    </div>
-                  ),
+                  value: "0x" + decodedData.parentL2BlockHash + "...",
                 },
                 {
                   name: "L1 origin block hash",
                   value: (
-                    <div className="flex items-center gap-2">
-                      <Link
-                        href={
-                          "https://etherscan.io/block/" +
-                          "0x" +
-                          decodedData.l1OriginBlockHash
-                        }
-                      >
-                        {"0x" + decodedData.l1OriginBlockHash}
-                      </Link>
-                      <CopyToClipboard
-                        value={"0x" + decodedData.l1OriginBlockHash}
-                        tooltipText="Copy L1 origin block hash"
-                      />
-                    </div>
+                    <BlockHash
+                      fullHash={decodedData.fullL1OriginBlockHash}
+                      partialHash={decodedData.l1OriginBlockHash}
+                    />
                   ),
                 },
                 {
@@ -339,4 +325,29 @@ const Tx: NextPage = () => {
   );
 };
 
+type BlockHashProps = {
+  partialHash: string;
+  fullHash: string | undefined;
+};
+
+const BlockHash: FC<BlockHashProps> = ({ fullHash, partialHash }) => {
+  if (fullHash === undefined) {
+    return "0x" + partialHash + "...";
+  }
+
+  const prefixedFullHash = "0x" + fullHash;
+
+  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>
+  );
+};
+
 export default Tx;

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

@@ -1,9 +1,8 @@
 import { z } from "zod";
 
+import { prisma } from "@blobscan/db";
 import { logger } from "@blobscan/logger";
 
-import { autocompleteBlockHash } from "../utils/autocompleteBlockHash";
-
 export const OptimismDecodedDataSchema = z.object({
   timestampSinceL2Genesis: z.number(),
   lastL1OriginNumber: z.number(),
@@ -13,6 +12,7 @@ export const OptimismDecodedDataSchema = z.object({
   changedByL1Origin: z.number(),
   totalTxs: z.number(),
   contractCreationTxsNumber: z.number(),
+  fullL1OriginBlockHash: z.string().optional(),
 });
 
 type OptimismDecodedData = z.infer<typeof OptimismDecodedDataSchema>;
@@ -37,7 +37,7 @@ export async function parseOptimismDecodedData(
   const hash = await autocompleteBlockHash(decoded.data.l1OriginBlockHash);
 
   if (hash) {
-    decoded.data.l1OriginBlockHash = hash;
+    decoded.data.fullL1OriginBlockHash = hash;
   } else {
     logger.error(
       `Failed to get full block hash for L1 origin block hash: ${decoded.data.l1OriginBlockHash}`
@@ -46,3 +46,36 @@ export async function parseOptimismDecodedData(
 
   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;
+}