Blockhead - Crypto Portfolio and Explorer

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.

• Track all your crypto holdings. Connect your wallets and see your tokens, DeFi balances and NFTs in one place.
• Visualize your crypto activity. See your transactions in new ways through interactive charts and visualizations.
• Explore the Ethereum Multiverse. Browse blockchain transactions and statistics for any EVM compatible chain!

Portfolio screen:

• Build one or more portfolios by adding wallet addresses or ENS names.
• All token balances, DeFi balances, and NFTs owned by your wallets across Ethereum, Polygon, and other EVM-compatible chains are fetched and displayed automatically.
• ENS resolution/reverse resolution.
• Each portfolio calculates its total value and can optionally be renamed.
• All portfolio data is persisted to your browser's local storage, and never leaves your browser.
• DeFi balances are grouped by DeFi protocol. Red-colored numbers denote debt/borrowed assets. Optionally show underlying assets deposited in DeFi vaults, liquidity pools, or index tokens.
• NFT assets are grouped by collection (contract). Optionally show metadata attributes.
• Sort assets alphabetically or numerically.
• Click any address to be taken to the appropriate detailed view in the Explorer.

Explorer screen:

• Choose any EVM-compatible blockchain to explore, including Ethereum, Polygon, Binance Smart Chain, Avalanche, and more.
• Get real time statistics including block height and oracle price.
• Enter an address, ENS name, or block number into the search field to retrieve details.
• All queries in the explorer map one-to-one with a dynamic URL scheme, blockhead.info/explorer/{networkName}/{query}.
• The query in the search field is preserved when switching chains, making it convenient to view balances owned by one address across multiple chains.

Preferences:

• Customize your preferred quote currency for denominating token balances, including world fiat currencies, Ethereum, and Bitcoin.
• Choose a light or dark theme for the interface.

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.

The biggest UI/UX innovation that came from this project was the use of a JavaScript ResizeObserver() along with Svelte's spring() motion function to automatically transition a container element's height whenever an inner element is added or removed from the UI. This helped Blockhead to achieve a highly-polished, futuristic-looking "fluid" navigational experience in addition to the performance benefits of Svelte.