Add help tooltip block (#665)

* feat: adds a help tooltip to each field in the block details page * chore: add changeset * Update .changeset/olive-ligers-watch.md Co-authored-by: 0xelessar.eth <[email protected]> * feat: replace SVG icon with Heroicons InformationCircleIcon in InfoField component * Update apps/web/src/pages/block/[id].tsx Co-authored-by: 0xelessar.eth <[email protected]> * Update apps/web/src/pages/block/[id].tsx Co-authored-by: 0xelessar.eth <[email protected]> * Update apps/web/src/pages/block/[id].tsx Co-authored-by: 0xelessar.eth <[email protected]> * Update apps/web/src/pages/block/[id].tsx Co-authored-by: 0xelessar.eth <[email protected]> * Update apps/web/src/pages/block/[id].tsx Co-authored-by: 0xelessar.eth <[email protected]> * Update apps/web/src/pages/block/[id].tsx Co-authored-by: 0xelessar.eth <[email protected]> * Refactor InfoField and InfoGrid components to accept ReactNode for descriptions and add helpText support in InfoGrid * Update apps/web/src/pages/block/[id].tsx Co-authored-by: Pablo Castellano <[email protected]> * Update apps/web/src/pages/block/[id].tsx Co-authored-by: Pablo Castellano <[email protected]> * Update apps/web/src/pages/block/[id].tsx Co-authored-by: Pablo Castellano <[email protected]> * Update apps/web/src/pages/block/[id].tsx Co-authored-by: Pablo Castellano <[email protected]> * Update helpText for Blob Gas Used to include target blob gas value --------- Co-authored-by: 0xelessar.eth <[email protected]> Co-authored-by: Pablo Castellano <[email protected]>
Blobscan · Jan 13, 2025 · a0f594f · a0f594f
1 parent 0703ea2
commit a0f594f
Show file tree

Hide file tree

Showing 4 changed files with 61 additions and 5 deletions.
diff --git a/.changeset/olive-ligers-watch.md b/.changeset/olive-ligers-watch.md
@@ -0,0 +1,5 @@
+---
+"@blobscan/web": minor
+---
+
+Added a help tooltip to each field in the block details page
diff --git a/apps/web/src/components/InfoField.tsx b/apps/web/src/components/InfoField.tsx
@@ -0,0 +1,23 @@
+import type { FC, ReactNode } from "react";
+import { InformationCircleIcon } from "@heroicons/react/24/solid";
+
+import { Tooltip, TooltipContent, TooltipTrigger } from "~/components/Tooltip";
+
+type InfoFieldProps = {
+  children: ReactNode;
+  description: ReactNode;
+};
+
+export const InfoField: FC<InfoFieldProps> = ({ children, description }) => {
+  return (
+    <div className="flex flex-row items-center gap-2">
+      <Tooltip>
+        <TooltipContent className="max-w-[240px]">{description}</TooltipContent>
+        <TooltipTrigger>
+          <InformationCircleIcon className="h-4 w-4 opacity-80" />
+        </TooltipTrigger>
+      </Tooltip>
+      {children}
+    </div>
+  );
+};
diff --git a/apps/web/src/components/InfoGrid.tsx b/apps/web/src/components/InfoGrid.tsx
@@ -5,9 +5,14 @@ import "react-loading-skeleton/dist/skeleton.css";
 import Skeleton from "react-loading-skeleton";
 
 import { useBreakpoint } from "~/hooks/useBreakpoint";
+import { InfoField } from "./InfoField";
 
 export type InfoGridProps = {
-  fields?: { name: ReactNode; value: ReactNode }[];
+  fields?: {
+    name: ReactNode;
+    value: ReactNode;
+    helpText?: ReactNode;
+  }[];
 };
 
 export const InfoGrid: React.FC<InfoGridProps> = function ({ fields }) {
@@ -31,10 +36,14 @@ export const InfoGrid: React.FC<InfoGridProps> = function ({ fields }) {
               </div>
             </Fragment>
           ))
-        : fields.map(({ name, value }, i) => (
+        : fields.map(({ name, value, helpText }, i) => (
             <Fragment key={i}>
               <div className="col-span-4 font-semibold dark:text-coolGray-400 md:col-span-1">
-                {name}
+                {helpText ? (
+                  <InfoField description={helpText}>{name}</InfoField>
+                ) : (
+                  name
+                )}
               </div>
               <div className="col-span-4 break-words text-sm md:col-span-3">
                 {value}

diff --git a/apps/web/src/pages/block/[id].tsx b/apps/web/src/pages/block/[id].tsx
@@ -29,6 +29,7 @@ import {
   MAX_BLOBS_PER_BLOCK,
   performDiv,
   pluralize,
+  TARGET_BLOB_GAS_PER_BLOCK,
 } from "~/utils";
 
 function performBlockQuery(router: NextRouter) {
@@ -86,6 +87,8 @@ const Block: NextPage = function () {
     detailsFields = [
       {
         name: "Block Height",
+        helpText:
+          "Also referred to as the Block Number, the block height represents the length of the blockchain and increases with each newly added block.",
         value: (
           <div className="flex items-center justify-start gap-4">
             {blockData.number}
@@ -110,13 +113,19 @@ const Block: NextPage = function () {
           </div>
         ),
       },
-      { name: "Status", value: <BlockStatus blockNumber={blockData.number} /> },
+      {
+        name: "Status",
+        helpText: "The finality status of the block.",
+        value: <BlockStatus blockNumber={blockData.number} />,
+      },
       {
         name: "Hash",
+        helpText: "The hash of the block header.",
         value: <Copyable value={blockData.hash} tooltipText="Copy Hash" />,
       },
       {
         name: "Timestamp",
+        helpText: "The time at which the block was created.",
         value: (
           <div className="whitespace-break-spaces">
             {formatTimestamp(blockData.timestamp)}
@@ -125,14 +134,16 @@ const Block: NextPage = function () {
       },
       {
         name: "Slot",
+        helpText: "The slot number of the block.",
         value: (
           <Link href={buildSlotExternalUrl(blockData.slot)} isExternal>
             {blockData.slot}
           </Link>
         ),
       },
       {
-        name: "Blob Size",
+        name: "Blob size",
+        helpText: "Total amount of space used for blobs in this block.",
         value: (
           <div>
             {formatBytes(totalBlockBlobSize)}
@@ -145,14 +156,20 @@ const Block: NextPage = function () {
       },
       {
         name: "Blob Gas Price",
+        helpText:
+          "The cost per unit of blob gas used by the blobs in this block.",
         value: <EtherUnitDisplay amount={blockData.blobGasPrice} />,
       },
       {
         name: "Blob Gas Used",
+        helpText: `The total blob gas used by the blobs in this block, along with its percentage relative to both the total blob gas limit and the blob gas target (${(
+          TARGET_BLOB_GAS_PER_BLOCK / 1024
+        ).toFixed(0)} KB).`,
         value: <BlobGasUsageDisplay blobGasUsed={blockData.blobGasUsed} />,
       },
       {
         name: "Blob Gas Limit",
+        helpText: "The maximum blob gas limit for this block.",
         value: (
           <div>
             {formatNumber(BLOB_GAS_LIMIT_PER_BLOCK)}
@@ -165,6 +182,8 @@ const Block: NextPage = function () {
       },
       {
         name: "Blob As Calldata Gas",
+        helpText:
+          "The total gas that would have been used in this block if the blobs were sent as calldata.",
         value: (
           <div>
             {formatNumber(blockData.blobAsCalldataGasUsed)}