shadcn.io is not affiliated with official shadcn/ui
Block Explorer Web3 Block for Vue
A block explorer on a sample chain: search a block number, a transaction hash or an address, browse the latest ten blocks with gas used against the limit, and open a transaction or an address in place.
Installation
Overview
Look up a block, a transaction or an address and follow the links between them, with this block explorer panel for Vue with Ark UI. It's Blockwalk, a sample explorer on a fictional chain, so the blocks, hashes and balances are typed samples and nothing is fetched. A search field takes a block number, a transaction hash or an address (the first six characters of a hash or address are enough) with one example button of each kind under it, and anything it doesn't hold shows an Empty state reading Not in this demo. By default a list of the latest ten blocks, each with its time, transaction count, a gas meter against the limit and the miner, sits beside the chosen block's details and transactions. Opening a transaction shows its status, hash with a Copy Button, sender, receiver, value, fee and block; an address shows its balance and recent activity. For chain tools, wallet apps and developer docs.
FAQ
What can I search for?
A block number between 4,812,341 and 4,812,350 (commas are fine), a full transaction hash or the first six characters or more of one, or an address the same way. The three example buttons run real searches against the sample. Anything else, including a block outside the ten, shows Not in this demo with a way back to the latest block.
Why does a block say 142 transactions and list four?
The sample holds only the first few transactions of each block, and the list says so with a count such as 4 of 142. The block's gas used, transaction total and miner are typed separately, so the numbers stay consistent without a thousand rows.
What stays local, and how do I wire it?
Everything. No request is made and the hashes are generated sample values. In your app search your node or indexer by block number, hash or address, load the latest blocks over a subscription or a poll, and keep the details view driven by the same route, so a transaction has its own address.
What does the copy button do?
It copies the full transaction hash through the clipboard and confirms to screen readers that it did, or that the clipboard refused. Nothing else is copied.