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!
Screenshots
Problem Statement
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 providerExplorer• 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 providerTo test each of the endpoints, navigate to a supported view in Portfolio or Explorer, then select "1inch › ___ API" or "Curvegrid › MultiBaas" under Preferences.
Solution
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/1Tools 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!)