feat(blocks/tx): Display raw blob data content via Beacon API by AugustoL · Pull Request #332 · openscan-explorer/explorer

AugustoL · 2026-03-19T20:14:55Z

Description

Display actual EIP-4844 blob content by integrating with the Beacon Chain API (consensus layer). This builds on the blob metadata display from #300, allowing users to inspect the raw data submitted in blob transactions.

Related Issue

Closes #301

Type of Change

Changes Made

BeaconService (src/services/BeaconService.ts): Beacon API client that fetches blob sidecars, computes KZG → versioned hash mapping via Web Crypto SHA-256, and matches blobs to transactions
beaconConfig (src/config/beaconConfig.ts): Default public Beacon API endpoints (publicnode.com) for Ethereum and Sepolia, beacon genesis timestamps, and slot computation from execution block timestamps
useBeaconBlobs hook (src/hooks/useBeaconBlobs.ts): React hook with lazy-loading, loading/error/pruned state, and optional blob-to-transaction filtering
BlobDataDisplay (src/components/common/BlobDataDisplay.tsx): Reusable blob viewer with hex/UTF-8 toggle, expand/collapse, KZG commitment/proof display, effective data size
Block page: Collapsible "Blob Data" section after withdrawals (super user only)
Transaction page: "Blob Data" tab in TX Analyser for Type 3 transactions (super user only), lazy-loads on tab click
Settings: Beacon API endpoint configuration section in Network tab (super user only), pre-populated with default public endpoints
CSS: Purple-accented blob display styles matching existing blob metadata styling
i18n: All blob-related translation keys added for en, es, zh, ja, pt-BR

Key design decisions

Super user mode only — gated behind isSuperUser flag
Lazy loading — blob data (128KB per blob) only fetched when user expands the section or clicks the tab
Standalone service — Beacon API is a REST API, kept separate from the RPC DataService/adapter architecture
Blob pruning — graceful handling with clear message when blobs are no longer available (~18 days)

Screenshots (if applicable)

Test with block 24690689 or tx 0x148288e55992ca9dd42e08cb921927cfd70d45919b5415d83499dd51ddd368df on Ethereum mainnet (super user mode required).

Checklist

I have run npm run format:fix and npm run lint:fix
I have run npm run typecheck with no errors
I have run tests with npm run test:run
I have tested my changes locally
I have updated documentation if needed
My code follows the project's architecture patterns

Additional Notes

Default Beacon API endpoints are provided via publicnode.com — feature works out of the box without user configuration
Blob-to-transaction matching uses Web Crypto API (crypto.subtle.digest) for SHA-256 computation (zero dependencies added)
The BlobDataDisplay component is reusable and used in both block and transaction views

Add EIP-4844 blob data display by fetching from the Beacon Chain API. Super user mode only. Includes BeaconService for blob sidecar fetching, KZG commitment to versioned hash matching via Web Crypto SHA-256, configurable Beacon API endpoints in Settings, and blob viewer with hex/UTF-8 toggle. Block page shows all blobs in a collapsible section, transaction page adds a Blob Data tab in the TX Analyser. Default public Beacon API endpoints provided for Ethereum and Sepolia. Blob pruning (~18 days) handled gracefully with clear user messaging. i18n translations added for all 5 supported languages. Closes openscan-explorer#301

github-actions · 2026-03-19T20:16:07Z

🚀 Preview: https://pr-332--openscan.netlify.app
📝 Commit: df1878ccb662976a75a166ca5b1501390348a854

…l CSS Rename tx-analyser-* and analyser-* CSS classes to detail-panel-* for reuse across pages. Create BlockAnalyser tabbed panel for block details (More Details, Transactions, Withdrawals, Blob Data) mirroring the TxAnalyser pattern. Simplify BlockDisplay by replacing collapsible sections with the new BlockAnalyser component.

Merge openscan-explorer/dev into feat/beacon-blob-data, incorporating helper tooltips, knowledge levels, raw trace tab, FieldLabel component, Hardhat adapter, and Etherscan worker proxy alongside our beacon blob and block analyser changes.

…-blob-data # Conflicts: # .claude/rules/architecture.md # .claude/rules/patterns.md # src/components/pages/evm/block/BlockDisplay.tsx # src/components/pages/evm/tx/TxAnalyser.tsx # src/components/pages/evm/tx/analyser/types.ts # src/locales/en/settings.json # src/locales/es/settings.json # src/locales/ja/settings.json # src/locales/pt-BR/settings.json # src/locales/zh/settings.json # src/types/index.ts

josealoha666

Nice feature overall. One thing I'd tighten before merging: BeaconService.getBlobSidecars() currently returns null for any non-OK response (500, 429, bad gateway, temporary network failure, etc.), and useBeaconBlobs() treats null as isPruned=true.

That means transient Beacon API failures will be shown to the user as “blob data was pruned”, which is misleading and makes debugging harder. I’d keep 404 as the pruned/unavailable case, but surface other failures separately (for example by throwing or returning a distinct error state) so the UI can show a real fetch error instead of the pruning message.

MatiasOS

I cannot see the blob data. This blocks shows blob information but not the content.

https://pr-332--openscan.netlify.app/#/1/block/24698978

MatiasOS · 2026-03-20T13:32:40Z

src/config/beaconConfig.ts

+ */
+
+/** Default public Beacon API endpoints per network (CAIP-2 format) */
+export const DEFAULT_BEACON_URLS: Record<string, string> = {


We should move this to configs

for now we have hardcoded beacon api urls, it is a super user feature. There ar enot much,m we can add more later or move it to the config seciton if needed.

AugustoL · 2026-03-20T13:37:54Z

I cannot see the blob data. This blocks shows blob information but not the content.

https://pr-332--openscan.netlify.app/#/1/block/24698978

Only super user mode can see that data, I think the base user wont be interested by it. wdyt?

AugustoL added 4 commits March 19, 2026 17:32

merge: resolve conflicts with upstream dev

78436d1

Merge openscan-explorer/dev into feat/beacon-blob-data, incorporating helper tooltips, knowledge levels, raw trace tab, FieldLabel component, Hardhat adapter, and Etherscan worker proxy alongside our beacon blob and block analyser changes.

fix: restore claude rules to match upstream dev

df1878c

AugustoL requested review from MatiasOS and josealoha666 March 20, 2026 10:09

AugustoL mentioned this pull request Mar 20, 2026

feat: add worker proxy routes for Beacon API and Bitcoin RPC #334

Closed

6 tasks

josealoha666 reviewed Mar 20, 2026

View reviewed changes

AugustoL mentioned this pull request Mar 20, 2026

feat(worker): add proxy routes for Beacon API, Bitcoin RPC and EVM RPC #335

Merged

12 tasks

MatiasOS requested changes Mar 20, 2026

View reviewed changes

MatiasOS approved these changes Mar 20, 2026

View reviewed changes

AugustoL merged commit 09cb9fb into openscan-explorer:dev Mar 20, 2026
4 of 7 checks passed

AugustoL mentioned this pull request Mar 25, 2026

v1.2.5-a #342

Open

11 tasks

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

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

feat(blocks/tx): Display raw blob data content via Beacon API#332
AugustoL merged 5 commits intoopenscan-explorer:devfrom
AugustoL:feat/beacon-blob-data

AugustoL commented Mar 19, 2026

Uh oh!

github-actions bot commented Mar 19, 2026 •

edited

Loading

Uh oh!

josealoha666 left a comment

Uh oh!

MatiasOS left a comment •

edited

Loading

Uh oh!

MatiasOS Mar 20, 2026

Uh oh!

AugustoL Mar 20, 2026

Uh oh!

AugustoL commented Mar 20, 2026

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

3 participants

Conversation

AugustoL commented Mar 19, 2026

Description

Related Issue

Type of Change

Changes Made

Key design decisions

Screenshots (if applicable)

Checklist

Additional Notes

Uh oh!

github-actions bot commented Mar 19, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

josealoha666 left a comment

Choose a reason for hiding this comment

Uh oh!

MatiasOS left a comment • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

MatiasOS Mar 20, 2026

Choose a reason for hiding this comment

Uh oh!

AugustoL Mar 20, 2026

Choose a reason for hiding this comment

Uh oh!

AugustoL commented Mar 20, 2026

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

3 participants

github-actions bot commented Mar 19, 2026 •

edited

Loading

MatiasOS left a comment •

edited

Loading