Frontend

Blockhead・Web3 Browser/Explorer

@blockhead updates since Devcon:

• updated Apps to include more apps supported by @zapper
• truncated addresses and transaction IDs can now expand to reveal full value upon focus
• migrated all TanStack Query functions to use query keys and lazy-loaded JavaScript modules
• overhauled Tenderly transaction simulation view in Explorer (by simply reusing the existing transaction component)
• improved state management logic for EIP-6963 providers, accounts and wallet connections (for both Svelte 4 and Svelte 5 in parallel)
• most state management and context are now migrated from Svelte 4 stores to Svelte 5 state on a separate branch; next up, preferences

A `<TruncatedValue>` component that keeps a long string of text fully rendered in HTML for copy-pastability, but visually hides the middle in CSS unless focused.

/frontend dev・founder/decentralized data wrangler /blockhead・ritual.net・UI/UX abstractionist・DeFi/web3 builder・dropout・24・prev /dydx・x.com/darryl__yeo

Alternate truncated value transition (with some slight `vertical-align` issues):

Here’s a fancier version using CSS math functions (though there’s a subtle vertical alignment problem that I haven’t quite figured out):

/frontend dev・founder/decentralized data wrangler /blockhead・UI/UX abstractionist・DeFi/web3 builder・dropout・24・prev /dydx, ritual.net・x.com/darryl__yeo

Here’s a fancier version using CSS math functions (though there’s a subtle vertical alignment problem that I haven’t quite figured out):

https://warpcast.com/darrylyeo/0x9f34f851

https://github.com/darrylyeo/blockhead/blob/main/src/components/TruncatedValue.svelte