Blockhead: BK '24
Open-source, data-agnostic interface for tracking your web3 portfolio and exploring EVM chains and decentralized protocols. Now powered by APIs from 1inch and Curvegrid!
About
Blockhead is a super-frontend for web3 where users can swap out the data-sources powering a portfolio tracker, multi-EVM block explorer and more. For ETHGlobal Bangkok, I expanded upon Blockhead's selection of data sources by implementing API endpoints from 1inch's Dev Portal and Curvegrid's MultiBaas across the Portfolio and Explorer views. --- Portfolio • added 1inch Balance API + Token API as a Token Balances provider • added 1inch Portfolio API + Token API as a DeFi provider • added 1inch NFT API as an NFTs provider --- Explorer • added 1inch Spot Price API as a Current Price provider • added 1inch Charts API as a Historical Price provider • added CurveGrid MultiBaas as a Blocks/Transaction provider (transaction by hash and transactions in block only; transactions by wallet address are not indexed by MultiBaas outside of their Cloud Wallet API) • added CurveGrid MultiBaas as a Contract Source Code provider --- To test each of the endpoints, navigate to a supported view in Portfolio or Explorer, then select "1inch › ___ API" or "Curvegrid › MultiBaas" under Preferences.
How it's made
Other improvements: • Refined TypeScript types and views for blocks and transactions, including EIP-2718 transaction types, state roots and legacy data from Ethereum's PoW era • Created a `<TruncatedValue>` component that renders a long hexadecimal value fully in HTML but hides the middle dynamically with CSS based on user interaction! Used in the updated block view in Explorer – https://blockhead.info/explorer/ethereum/block/1 --- Tools and technology used: • SvelteKit • TanStack Query • TypeScript • openapi-typescript + openapi-typescript-fetch (first time using these; seems much leaner than oazapfts and swagger-typescript-api which I've used in the past to generate clients from OpenAPI specs!)