Content pfp
Content
@
0 reply
0 recast
0 reaction
Darryl Yeo đŸ› ïž pfp
Darryl Yeo đŸ› ïž
@darrylyeo
This week on /blockhead (@devcon / @ethglobal Bangkok edition): ‱ updated block and transaction views to account for EIP-2718 transaction types, state roots and legacy data from Ethereum's PoW era ‱ created a “truncated value” component that visually hides/unhides the middle of a long string with CSS based on user interaction, while keeping it fully rendered in the HTML markup to allow for selection and copy/paste ‱ added support for @1inchnetwork API – query token balances, spot prices and historical prices in Portfolio and Explorer ‱ added support for @curvegrid MultiBaas API – query transactions in block, transaction by hash and smart contract source code by address in Explorer https://ethglobal.com/showcase/ytym8
1 reply
0 recast
6 reactions
Chris pfp
Chris
@chrisdom
"created a “truncated value” component that visually hides/unhides the middle of a long string with CSS based on user interaction" can you share a link or example? great update! 👀
1 reply
0 recast
1 reaction
Darryl Yeo đŸ› ïž pfp
Darryl Yeo đŸ› ïž
@darrylyeo
Thanks! So far it’s applied to block hashes on the block view in Explorer. Working on applying to hex addresses too once I’ve figured out focus states and layout shifts. https://blockhead.info/explorer/ethereum/block/12345678
1 reply
0 recast
0 reaction
Chris pfp
Chris
@chrisdom
no i meant how you did it, there has been a non-zero number of times where i needed exactly that and google wasn't helpful. curious what solution you landed on that's also not đŸ’© edit: it's done using <abbr>. html elements are the equivalent of coins stuck in your couch, you'll always find new ones.
1 reply
0 recast
1 reaction
Darryl Yeo đŸ› ïž pfp
Darryl Yeo đŸ› ïž
@darrylyeo
Yeah, I originally used `<abbr>` for truncating hex addresses but they’re still annoying to copy and paste 😅 This is the new implementation I landed on. Nested `<span>`s, ellipsis in pseudo-element content, `font-size` transition to/from 0. https://github.com/darrylyeo/blockhead/blob/main/src/components/TruncatedValue.svelte
0 reply
0 recast
1 reaction