The Ethereum multiverse is expanding, and chances are you've already lost track of all the side-chains, layer-2 chains, and EVM blockchains you've ever interacted with. Not to worry! Whether you've been yield farming on Loopring or trading NFTs on Polygon, Blockhead can help you keep track of it all.
Blockhead is a user-friendly interface for tracking, visualizing and exploring your blockchain assets.
Blockhead is a front-end browser client/single-page web app with UI components and animations written from scratch with Svelte, TypeScript, and CSS. It runs entirely within your browser, pulling data from a wide spectrum of blockchain indexing solutions including Covalent, Zapper, The Graph, Chainlink, and ETH JSON-RPC. The charts are generated with Apache Echarts.
To integrate the Covalent API, I manually created my own collection of TypeScript functions and types matching the endpoints in the API documentation as closely as possible. The functions are based on the browser fetch() API. I may spin it out into a dedicated client library. The Covalent API is currently responsible for fetching the token balances and NFTs from multiple EVM chains on the Portfolio screen and the Ethereum account view Explorer, as well as transaction data and historical price information powering the charts.
To integrate the Zapper API, I used OpenAPI Generator to generate a TypeScript/fetch() client from the provided Swagger specification (though some manual adjustments were made as the Swagger specification wasn't completely up to date). The Zapper API is currently responsible for fetching DeFi balances across multiple EVM chains as well as fiat conversion rates in case the user prefers a quote currency other than the default US Dollar.
I used Apollo GraphQL to fetch data from The Graph. Currently, the ENS subgraph is used to retrieve ENS domain metadata in the Explorer.
The JSON-RPC-provider from web3/ethers.js is used to fetch real-time statistics on the default Explorer page for a given EVM network, including the current block height and the price of a given asset via price oracle contracts on Chainlink.
On the Portfolios screen, I created custom UI flows for MetaMask, Torus OpenLogin, and Portis to let the user connect multiple wallet providers simultaneously (as opposed to one at a time as implemented in most web3 templates).
The biggest technical challenge I faced when integrating many different indexing solutions was ensuring network names, chain names, chain IDs and ENS names were based on a consistent format. Some APIs take a string ("mainnet"), while others take a chainID (1), while still others use a full name ("ethereum"). Some APIs accept ENS names directly, while others only take Ethereum addresses and thus require ENS names to first be resolved. The use of internal TypeScript types throughout the application helped me tremendously in managing these inconsistencies.