blockhead.vision

Problem Statement

NOTE: work is found on the "next" branch of the GitHub repository: https://github.com/darrylyeo/blockhead/tree/nextblockhead.vision is a modern, local-first block explorer interface with a super-slick browsing experience powered by a real-time 3D visualization and a resilient data fetching and caching model.Browse blocks, transactions, accounts, contracts and their interactions in a single unified timeline view, from the latest block height all the way back to the Ethereum Genesis block.blockhead.vision is the successor to my long-running hackathon project blockhead.info, a portfolio tracker and browser for blockchains and web3 protocols compatible with 40+ data sources / indexer services.This iteration modernizes the UI with the latest HTML/CSS web standards, and addresses several limitations with the old data fetching model by leveraging GraphQL semantics for data caching and normalization. Specifically, centralizing data in urql Graphcache's unified data store allows data structures from APIs and indexer services to be completely decoupled from data presentation, and makes it possible for novel visualizations that combine data sources across many different verticals across the decentralized web.

Solution

Technology used:• Svelte 5 / SvelteKit – frontend framework• Threlte – primitives for creating 3D experiences with three.js and Svelte• openapi-typescript – CLI to generate TypeScript types from OpenAPI / Swagger specifications, enabling type-safe REST queries (used with 1inch)• urql – GraphQL client for querying external GraphQL APIs (used with Blockscout)• urql Graphcache – normalized local-first cache leveraging GraphQL semantics for key and field derivation (https://nearform.com/open-source/urql/docs/graphcache)Data sources implemented (so far):• Blockscout – blocks, transactions, addresses, tokens, balances• 1inch – address, tokens, balances• Ethereum JSON-RPC (via viem) – blocks, transactions, addresses, tokens, balances