Blockhead: BK '24

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.

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!)