Blobscan · PJColombo · Dec 22, 2023 · Nov 28, 2023 · Nov 28, 2023 · Nov 28, 2023
diff --git a/apps/web/package.json b/apps/web/package.json
@@ -16,7 +16,6 @@
   "dependencies": {
     "@blobscan/api": "^0.0.1",
     "@blobscan/dayjs": "^0.0.1",
-    "@blobscan/db": "^0.0.1",
     "@blobscan/open-telemetry": "^0.0.1",
     "@blobscan/tailwind-config": "^0.0.1",
     "@fontsource/inter": "^4.5.15",

diff --git a/apps/web/src/components/BlobGasUsage.tsx b/apps/web/src/components/BlobGasUsage.tsx
@@ -0,0 +1,58 @@
+import type { FC } from "react";
+
+import {
+  BLOB_GAS_LIMIT_PER_BLOCK,
+  TARGET_BLOB_GAS_PER_BLOCK,
+  calculateBlobGasTarget,
+  calculatePercentage,
+  formatNumber,
+} from "~/utils";
+import { PercentageBar } from "./PercentageBar";
+
+type BlobGasUsageProps = {
+  blobGasUsed: bigint;
+};
+
+export const BlobGasUsage: FC<BlobGasUsageProps> = function ({ blobGasUsed }) {
+  const blobGasUsedPercentage = calculatePercentage(
+    blobGasUsed,
+    BigInt(BLOB_GAS_LIMIT_PER_BLOCK)
+  );
+  const blobGasTarget = calculateBlobGasTarget(blobGasUsed);
+  const targetSign = blobGasUsed < TARGET_BLOB_GAS_PER_BLOCK ? "-" : "+";
+  const isPositive = targetSign === "+";
+
+  return (
+    <div className="flex gap-2">
+      <div>
+        {formatNumber(blobGasUsed)}
+        <span className="ml-1 text-contentTertiary-light dark:text-contentTertiary-dark">
+          (
+          {formatNumber(blobGasUsedPercentage, "standard", {
+            maximumFractionDigits: 2,
+          })}
+          %)
+        </span>
+      </div>
+      <div className={`flex items-center gap-1`}>
+        <PercentageBar
+          className={
+            isPositive
+              ? "bg-positive-light dark:bg-positive-dark"
+              : "bg-negative-light dark:bg-negative-dark"
+          }
+          percentage={blobGasUsedPercentage / 100}
+        />
+        <span
+          className={
+            isPositive
+              ? "text-positive-light dark:text-positive-dark"
+              : "text-negative-light dark:text-negative-dark"
+          }
+        >
+          {targetSign} {blobGasTarget.toFixed(2)}% Blob Gas Target
+        </span>
+      </div>
+    </div>
+  );
+};
diff --git a/apps/web/src/components/Charts/Block/DailyAvgBlobFeeChart.tsx b/apps/web/src/components/Charts/Block/DailyAvgBlobFeeChart.tsx
@@ -23,7 +23,7 @@ export const DailyAvgBlobFeeChart: FC<Partial<DailyAvgBlobFeeChartProps>> =
       ...buildTimeSeriesOptions({
         dates: days,
         axisFormatters: {
-          yAxisTooltip: (value) => `${formatNumber(value)} gwei`,
+          yAxisTooltip: (value) => `${formatNumber(value)} Gwei`,
         },
         yUnit: "ethereum",
       }),

diff --git a/apps/web/src/components/Charts/Block/DailyAvgBlobGasPriceChart.tsx b/apps/web/src/components/Charts/Block/DailyAvgBlobGasPriceChart.tsx
@@ -23,7 +23,7 @@ export const DailyAvgBlobGasPriceChart: FC<
     ...buildTimeSeriesOptions({
       dates: days,
       axisFormatters: {
-        yAxisTooltip: (value) => `${formatNumber(value)} gwei`,
+        yAxisTooltip: (value) => `${formatNumber(value)} Gwei`,
       },
       yUnit: "ethereum",
     }),

diff --git a/apps/web/src/components/Charts/Block/DailyBlobFeeChart.tsx b/apps/web/src/components/Charts/Block/DailyBlobFeeChart.tsx
@@ -22,7 +22,7 @@ export const DailyBlobFeeChart: FC<Partial<DailyBlobFeeChartProps>> =
       ...buildTimeSeriesOptions({
         dates: days,
         axisFormatters: {
-          yAxisTooltip: (value) => `${formatNumber(value)} gwei`,
+          yAxisTooltip: (value) => `${formatNumber(value)} Gwei`,
         },
         yUnit: "ethereum",
       }),

diff --git a/apps/web/src/components/PercentageBar.tsx b/apps/web/src/components/PercentageBar.tsx
@@ -0,0 +1,30 @@
+import type { FC, HTMLAttributes } from "react";
+import { animated, useSpring } from "@react-spring/web";
+
+export type PercentageBarProps = {
+  className?: HTMLAttributes<HTMLDivElement>["className"];
+  percentage: number;
+};
+
+export const PercentageBar: FC<PercentageBarProps> = function ({
+  percentage,
+  className,
+}) {
+  const percentageProps = useSpring({
+    value: percentage * 96,
+    from: { value: 0 },
+    cancel: !percentage,
+  });
+
+  return (
+    <div className="relative">
+      <div className="h-1.5 w-24 rounded-md bg-primary-200 dark:bg-primary-800" />
+      <animated.div
+        className={`absolute top-0 h-1.5 rounded-md ${className}`}
+        style={{
+          width: percentageProps.value.to((x) => `${x}px`),
+        }}
+      />
+    </div>
+  );
+};
diff --git a/apps/web/src/pages/block/[id].tsx b/apps/web/src/pages/block/[id].tsx
@@ -4,6 +4,7 @@ import NextError from "next/error";
 import { useRouter } from "next/router";
 import type { NextRouter } from "next/router";
 
+import { BlobGasUsage } from "~/components/BlobGasUsage";
 import { Card } from "~/components/Cards/Card";
 import { BlobTransactionCard } from "~/components/Cards/SurfaceCards/BlobTransactionCard";
 import { DetailsLayout } from "~/components/Layouts/DetailsLayout";
@@ -16,6 +17,10 @@ import {
   formatNumber,
   formatTimestamp,
   formatWei,
+  GAS_PER_BLOB,
+  MAX_BLOBS_PER_BLOCK,
+  performDiv,
+  pluralize,
 } from "~/utils";
 
 function performBlockQuery(router: NextRouter) {
@@ -79,7 +84,7 @@ const Block: NextPage = function () {
         fields={
           blockData
             ? [
-                { name: "Block Height", value: formatNumber(blockData.number) },
+                { name: "Block Height", value: blockData.number },
                 { name: "Hash", value: blockData.hash },
                 {
                   name: "Timestamp",
@@ -96,33 +101,62 @@ const Block: NextPage = function () {
                       href={buildSlotExternalUrl(blockData.slot)}
                       isExternal
                     >
-                      {formatNumber(blockData.slot)}
+                      {blockData.slot}
                     </Link>
                   ),
                 },
                 {
-                  name: "Total Blob Size",
-                  value: formatBytes(totalBlobSize),
+                  name: "Blob Size",
+                  value: (
+                    <div>
+                      {formatBytes(totalBlobSize)}
+                      <span className="ml-1 text-contentTertiary-light dark:text-contentTertiary-dark">
+                        ({formatNumber(totalBlobSize / GAS_PER_BLOB)}{" "}
+                        {pluralize("blob", totalBlobSize / GAS_PER_BLOB)})
+                      </span>
+                    </div>
+                  ),
                 },
                 {
                   name: "Blob Gas Price",
-                  value: formatWei(blockData.blobGasPrice),
+                  value: (
+                    <div>
+                      {formatWei(blockData.blobGasPrice, { toUnit: "ether" })}
+                      <span className="ml-1 text-contentTertiary-light dark:text-contentTertiary-dark">
+                        ({formatWei(blockData.blobGasPrice)})
+                      </span>
+                    </div>
+                  ),
+                },
+                {
+                  name: "Blob Gas Used",
+                  value: <BlobGasUsage blobGasUsed={blockData.blobGasUsed} />,
                 },
                 {
-                  name: "Total Blob Gas Used",
-                  value: formatNumber(blockData.blobGasUsed),
+                  name: "Blob Gas Limit",
+                  value: (
+                    <div>
+                      {formatNumber(MAX_BLOBS_PER_BLOCK)}
+                      <span className="ml-1 text-contentTertiary-light dark:text-contentTertiary-dark">
+                        ({formatNumber(MAX_BLOBS_PER_BLOCK)}{" "}
+                        {pluralize("blob", MAX_BLOBS_PER_BLOCK)} per block)
+                      </span>
+                    </div>
+                  ),
                 },
                 {
-                  name: "Total Blob As Calldata Gas",
+                  name: "Blob As Calldata Gas",
                   value: (
                     <div>
                       {formatNumber(blockData.blobAsCalldataGasUsed)}
-                      <span className="ml-1">
+                      <span className="ml-1 text-contentTertiary-light dark:text-contentTertiary-dark">
                         (
                         <strong>
                           {formatNumber(
-                            blockData.blobAsCalldataGasUsed /
-                              blockData.blobGasUsed,
+                            performDiv(
+                              blockData.blobAsCalldataGasUsed,
+                              blockData.blobGasUsed
+                            ),
                             "standard",
                             { maximumFractionDigits: 2 }
                           )}

diff --git a/apps/web/src/pages/tx/[hash].tsx b/apps/web/src/pages/tx/[hash].tsx
@@ -17,6 +17,7 @@ import {
   formatWei,
   formatBytes,
   formatNumber,
+  performDiv,
 } from "~/utils";
 
 const Tx: NextPage = () => {
@@ -39,13 +40,17 @@ const Tx: NextPage = () => {
             block: {
               ...txData_.block,
               blobGasPrice: BigInt(txData_.block.blobGasPrice),
-              excessBlobGas: BigInt(txData_.block.excessBlobGas),
+
+              Gas: BigInt(txData_.block.excessBlobGas),
             },
           }
         : undefined,
     [txData_]
   );
 
+  console.log("here");
+  console.log(txData?.blobAsCalldataGasUsed);
+
   if (error) {
     return (
       <NextError
@@ -62,7 +67,7 @@ const Tx: NextPage = () => {
   const sortedBlobs = txData?.blobs.sort((a, b) => a.index - b.index);
   const blobGasPrice = txData?.block.blobGasPrice ?? BigInt(0);
   const blobGasUsed = txData
-    ? BigInt(txData.blobs.length) * GAS_PER_BLOB
+    ? BigInt(txData.blobs.length) * BigInt(GAS_PER_BLOB)
     : BigInt(0);
   const totalBlobSize =
     txData?.blobs.reduce((acc, { blob }) => acc + blob.size, 0) ?? 0;
@@ -82,7 +87,7 @@ const Tx: NextPage = () => {
                   name: "Block",
                   value: (
                     <Link href={buildBlockRoute(txData.blockNumber)}>
-                      {formatNumber(txData.blockNumber)}
+                      {txData.blockNumber}
                     </Link>
                   ),
                 },
@@ -150,7 +155,7 @@ const Tx: NextPage = () => {
                       {formatNumber(txData.blobAsCalldataGasUsed)} (
                       <strong>
                         {formatNumber(
-                          txData.blobAsCalldataGasUsed / blobGasUsed,
+                          performDiv(txData.blobAsCalldataGasUsed, blobGasUsed),
                           "standard",
                           {
                             maximumFractionDigits: 2,