blockhead.vision

NOTE: source code is located on the next/ethglobal-buenosaires branch of the GitHub repository: https://github.com/darrylyeo/blockhead/tree/next/ethglobal-buenosaires

blockhead.vision is the spiritual successor to blockhead.info, rewritten from scratch with a modern architecture and incorporating learnings from the past five years iterating on the project and integrating data providers at Ethereum/web3 hackathons.

Portfolios:

• Create one or more Portfolios

• Add Accounts to a Portfolio by typing Account IDs (single address, ENS domain for primary address / owner, Farcaster ID or name for Farcaster account address). A single Account ID may resolve to more than one address.

• The interface will find and display Networks, Coins, Positions and NFTs detected from activity across all resolved addresses, querying in parallel across all supported APIs and normalizing data structures to a consistent schema. APIs currently supported: Octav, 1inch, The Graph, ETH JSON-RPC via viem.

Explorer

• Linked time series charts for real-time blockchain stats like gas spend, gas fees, transactions

This iteration of Blockhead modernizes the stack to the latest version of Svelte + SvelteKit, using async Svelte for query parallelization and SvelteKit Remote Functions for type-safe, efficient API proxying / caching. A carefully constructed TypeScript schema identifies entities with multi-dimensional IDs and distinguishes one-to-one and one-to-many relationships between entities, allowing for compact definitions, optimistic rendering, on-demand data merging across multiple data providers, and efficient traversals as the user navigates around the site.

Codebase structure:

• The src/api folder contains TypeScript clients created for each API with each relevant endpoint exported as a function.

• SvelteKit Remote Functions (query() in src/data) consume these functions and perform data normalization to a carefully structured Entity schema.

• Entity` objects are defined in terms of TypeScript types and track combinations of fields that may uniquely identify an entity, owned fields, and references to other entities. This lets the UI flexibly display fragments of linked entities optimistically, and efficiently traverse links between entities on-demand as the user navigates the interface.

• Charts are created with SveltePlot, a Svelte wrapper for Observable Plot (a charting library adhering to the "Grammar of Graphics" philosophy).

• CSS styling is implemented with collection of global HTML data attributes from a personal design system I am currently building.