feat(blocks/tx): Display raw blob data content via Beacon API

src/components/common/BlobDataDisplay.tsx

@@ -0,0 +1,105 @@
+import React, { useMemo, useState } from "react";
+import { useTranslation } from "react-i18next";
+import type { BlobSidecar } from "../../types";
+import CopyButton from "./CopyButton";
+import LongString from "./LongString";
+
+interface BlobDataDisplayProps {
+  blob: BlobSidecar;
+  index: number;
+}
+
+const BlobDataDisplay: React.FC<BlobDataDisplayProps> = React.memo(({ blob, index }) => {
+  const { t } = useTranslation("transaction");
+  const [showUtf8, setShowUtf8] = useState(false);
+  const [expanded, setExpanded] = useState(false);
+
+  const effectiveSize = useMemo(() => {
+    const hex = blob.blob.startsWith("0x") ? blob.blob.slice(2) : blob.blob;
+    let end = hex.length;
+    while (end > 0 && hex[end - 1] === "0" && hex[end - 2] === "0") {
+      end -= 2;
+    }
+    return end / 2;
+  }, [blob.blob]);
+
+  const utf8Content = useMemo(() => {
+    if (!showUtf8) return null;
+    try {
+      const hex = blob.blob.startsWith("0x") ? blob.blob.slice(2) : blob.blob;
+      const bytes = new Uint8Array(hex.length / 2);
+      for (let i = 0; i < bytes.length; i++) {
+        bytes[i] = Number.parseInt(hex.slice(i * 2, i * 2 + 2), 16);
+      }
+      let end = bytes.length;
+      while (end > 0 && bytes[end - 1] === 0) end--;
+      return new TextDecoder("utf-8", { fatal: false }).decode(bytes.slice(0, end));
+    } catch {
+      return null;
+    }
+  }, [blob.blob, showUtf8]);
+
+  const displayHex = expanded
+    ? blob.blob
+    : `${blob.blob.slice(0, 200)}${blob.blob.length > 200 ? "..." : ""}`;
+
+  return (
+    <div className="blob-sidecar-item">
+      <div className="blob-sidecar-header">
+        <span className="blob-sidecar-index">{t("blobData.blobIndex", { index })}</span>
+        <span className="blob-sidecar-size">
+          {t("blobData.effectiveSize", { bytes: effectiveSize.toLocaleString() })}
+        </span>
+      </div>
+
+      <div className="blob-sidecar-meta">
+        <div className="blob-meta-row">
+          <span className="tx-label">{t("blobData.kzgCommitment")}</span>
+          <span className="tx-value tx-mono">
+            <LongString value={blob.kzg_commitment} start={16} end={12} />
+            <CopyButton value={blob.kzg_commitment} />
+          </span>
+        </div>
+        <div className="blob-meta-row">
+          <span className="tx-label">{t("blobData.kzgProof")}</span>
+          <span className="tx-value tx-mono">
+            <LongString value={blob.kzg_proof} start={16} end={12} />
+            <CopyButton value={blob.kzg_proof} />
+          </span>
+        </div>
+      </div>
+
+      <div className="blob-sidecar-data">
+        <div className="blob-data-controls">
+          <button
+            type="button"
+            className={`blob-data-btn ${!showUtf8 ? "blob-data-btn--active" : ""}`}
+            onClick={() => setShowUtf8(false)}
+          >
+            {t("blobData.showHex")}
+          </button>
+          <button
+            type="button"
+            className={`blob-data-btn ${showUtf8 ? "blob-data-btn--active" : ""}`}
+            onClick={() => setShowUtf8(true)}
+          >
+            {t("blobData.showUtf8")}
+          </button>
+          <button type="button" className="blob-data-btn" onClick={() => setExpanded(!expanded)}>
+            {expanded ? t("blobData.collapse") : t("blobData.expand")}
+          </button>
+          <CopyButton value={blob.blob} />
+        </div>
+
+        {showUtf8 && utf8Content ? (
+          <pre className="blob-data-content blob-data-utf8">{utf8Content}</pre>
+        ) : (
+          <pre className="blob-data-content blob-data-hex">{displayHex}</pre>
+        )}
+      </div>
+    </div>
+  );
+});
+
+BlobDataDisplay.displayName = "BlobDataDisplay";
+export default BlobDataDisplay;

src/components/pages/evm/block/BlockAnalyser.tsx

@@ -0,0 +1,228 @@
+import type React from "react";
+import { useCallback, useState } from "react";
+import { useTranslation } from "react-i18next";
+import { Link } from "react-router-dom";
+import { useBeaconBlobs } from "../../../../hooks/useBeaconBlobs";
+import type { Block, BlockArbitrum } from "../../../../types";
+import BlobDataDisplay from "../../../common/BlobDataDisplay";
+
+type BlockAnalyserTab = "moreDetails" | "transactions" | "withdrawals" | "blobData";
+
+interface BlockAnalyserProps {
+  block: Block | BlockArbitrum;
+  networkId?: string;
+  isSuperUser: boolean;
+}
+
+const BlockAnalyser: React.FC<BlockAnalyserProps> = ({ block, networkId, isSuperUser }) => {
+  const { t } = useTranslation("block");
+
+  const hasTxs = block.transactions && block.transactions.length > 0;
+  const hasWithdrawals = block.withdrawals && block.withdrawals.length > 0;
+  const hasBlobGas = block.blobGasUsed && Number(block.blobGasUsed) > 0;
+
+  const caip2NetworkId = networkId ? `eip155:${networkId}` : undefined;
+
+  const [activeTab, setActiveTab] = useState<BlockAnalyserTab | null>(null);
+  const [collapsed, setCollapsed] = useState(true);
+
+  const {
+    blobs: blobSidecars,
+    loading: blobsLoading,
+    isPruned: blobsPruned,
+    isAvailable: beaconAvailable,
+  } = useBeaconBlobs(
+    isSuperUser && hasBlobGas ? caip2NetworkId : undefined,
+    isSuperUser && hasBlobGas && activeTab === "blobData" ? Number(block.timestamp) : undefined,
+  );
+
+  const showBlobTab = isSuperUser && hasBlobGas && beaconAvailable;
+  const blockNumber = Number(block.number);
+
+  const handleTabClick = useCallback(
+    (tab: BlockAnalyserTab) => {
+      if (tab === activeTab && !collapsed) {
+        setCollapsed(true);
+      } else {
+        setActiveTab(tab);
+        setCollapsed(false);
+      }
+    },
+    [activeTab, collapsed],
+  );
+
+  return (
+    <div className="detail-panel">
+      {/* Tab bar */}
+      <div className="detail-panel-tabs">
+        <button
+          type="button"
+          className={`detail-panel-tab${activeTab === "moreDetails" ? " detail-panel-tab--active-base" : ""}`}
+          onClick={() => handleTabClick("moreDetails")}
+        >
+          {t("analyser.moreDetails")}
+        </button>
+        {hasTxs && (
+          <button
+            type="button"
+            className={`detail-panel-tab${activeTab === "transactions" ? " detail-panel-tab--active-base" : ""}`}
+            onClick={() => handleTabClick("transactions")}
+          >
+            {t("analyser.transactions")} ({block.transactions.length})
+          </button>
+        )}
+        {hasWithdrawals && (
+          <button
+            type="button"
+            className={`detail-panel-tab${activeTab === "withdrawals" ? " detail-panel-tab--active-base" : ""}`}
+            onClick={() => handleTabClick("withdrawals")}
+          >
+            {t("analyser.withdrawals")} ({block.withdrawals.length})
+          </button>
+        )}
+        {showBlobTab && (
+          <button
+            type="button"
+            className={`detail-panel-tab${activeTab === "blobData" ? " detail-panel-tab--active" : ""}`}
+            onClick={() => handleTabClick("blobData")}
+          >
+            {t("analyser.blobData")} ({Math.floor(Number(block.blobGasUsed) / 131072)})
+          </button>
+        )}
+        <button
+          type="button"
+          className="detail-panel-collapse-btn"
+          onClick={() => setCollapsed((c) => !c)}
+          aria-label={collapsed ? t("analyser.expand") : t("analyser.collapse")}
+        >
+          {collapsed ? `▸ ${t("analyser.expand")}` : `▾ ${t("analyser.collapse")}`}
+        </button>
+      </div>
+
+      {/* Tab content */}
+      {!collapsed && (
+        <div className="detail-panel-body">
+          {activeTab === "moreDetails" && (
+            <div className="detail-panel-tab-content">
+              <div className="detail-row">
+                <span className="detail-label">{t("analyser.parentHash")}</span>
+                <span className="detail-value tx-mono">
+                  {networkId &&
+                  block.parentHash !==
+                    "0x0000000000000000000000000000000000000000000000000000000000000000" ? (
+                    <Link to={`/${networkId}/block/${blockNumber - 1}`} className="link-accent">
+                      {block.parentHash}
+                    </Link>
+                  ) : (
+                    block.parentHash
+                  )}
+                </span>
+              </div>
+              <div className="detail-row">
+                <span className="detail-label">{t("analyser.stateRoot")}</span>
+                <span className="detail-value tx-mono">{block.stateRoot}</span>
+              </div>
+              <div className="detail-row">
+                <span className="detail-label">{t("analyser.transactionsRoot")}</span>
+                <span className="detail-value tx-mono">{block.transactionsRoot}</span>
+              </div>
+              <div className="detail-row">
+                <span className="detail-label">{t("analyser.receiptsRoot")}</span>
+                <span className="detail-value tx-mono">{block.receiptsRoot}</span>
+              </div>
+              {block.withdrawalsRoot && (
+                <div className="detail-row">
+                  <span className="detail-label">{t("analyser.withdrawalsRoot")}</span>
+                  <span className="detail-value tx-mono">{block.withdrawalsRoot}</span>
+                </div>
+              )}
+              <div className="detail-row">
+                <span className="detail-label">{t("analyser.logsBloom")}</span>
+                <div className="detail-value">
+                  <code className="logs-bloom">{block.logsBloom}</code>
+                </div>
+              </div>
+              <div className="detail-row">
+                <span className="detail-label">{t("analyser.nonce")}</span>
+                <span className="detail-value">{block.nonce}</span>
+              </div>
+              <div className="detail-row">
+                <span className="detail-label">{t("analyser.mixHash")}</span>
+                <span className="detail-value tx-mono">{block.mixHash}</span>
+              </div>
+              <div className="detail-row">
+                <span className="detail-label">{t("analyser.sha3Uncles")}</span>
+                <span className="detail-value tx-mono">{block.sha3Uncles}</span>
+              </div>
+            </div>
+          )}
+
+          {activeTab === "transactions" && hasTxs && (
+            <div className="tx-list">
+              {block.transactions.map((txHash, index) => (
+                <div key={txHash} className="tx-list-item">
+                  <span className="tx-list-index">{index}</span>
+                  <span className="tx-list-hash tx-mono">
+                    {networkId ? (
+                      <Link to={`/${networkId}/tx/${txHash}`} className="link-accent">
+                        {txHash}
+                      </Link>
+                    ) : (
+                      txHash
+                    )}
+                  </span>
+                </div>
+              ))}
+            </div>
+          )}
+
+          {activeTab === "withdrawals" && hasWithdrawals && (
+            <div className="withdrawal-list">
+              {block.withdrawals.map((withdrawal, index) => (
+                // biome-ignore lint/suspicious/noArrayIndexKey: withdrawal index is stable
+                <div key={index} className="withdrawal-row">
+                  <div className="withdrawal-index">{index}</div>
+                  <div className="withdrawal-field">
+                    <span className="withdrawal-field-label">{t("index")}</span>
+                    <span>{Number(withdrawal.index).toLocaleString()}</span>
+                  </div>
+                  <div className="withdrawal-field">
+                    <span className="withdrawal-field-label">{t("validator")}</span>
+                    <span>{Number(withdrawal.validatorIndex).toLocaleString()}</span>
+                  </div>
+                  <div className="withdrawal-field withdrawal-address tx-mono">
+                    {networkId ? (
+                      <Link
+                        to={`/${networkId}/address/${withdrawal.address}`}
+                        className="link-accent"
+                      >
+                        {withdrawal.address}
+                      </Link>
+                    ) : (
+                      withdrawal.address
+                    )}
+                  </div>
+                  <div className="withdrawal-amount tx-value-highlight">
+                    {(Number(withdrawal.amount) / 1e9).toFixed(9)} ETH
+                  </div>
+                </div>
+              ))}
+            </div>
+          )}
+
+          {activeTab === "blobData" && showBlobTab && (
+            <div className="blob-section-list">
+              {blobsLoading && <div className="detail-panel-loading">{t("blobData.loading")}</div>}
+              {blobsPruned && <div className="detail-panel-error">{t("blobData.pruned")}</div>}
+              {blobSidecars?.map((blob) => (
+                <BlobDataDisplay key={blob.index} blob={blob} index={Number(blob.index)} />
+              ))}
+            </div>
+          )}
+        </div>
+      )}
+    </div>
+  );
+};
+
+export default BlockAnalyser;