shadcn.io is not affiliated with official shadcn/ui
Contract Events Web3 Block for Vue
A decoded contract log you filter and export: an event toggle, a block range, an address field and a value-over number field narrow 18 sample logs, each row opens to its decoded parameters, topics and data, and Export CSV saves the visible rows.
Installation
Overview
Read a contract's log the way a developer does, with this contract events panel for Vue with Ark UI. It's Eventwell, a sample log viewer over eighteen typed logs from two contracts, a token and its pool, with sample transaction hashes. A Toggle Group narrows the list to All, Transfer, Approval, Swap or OwnershipTransferred, a select to a block range, an address field to rows whose addresses contain what you type, and a Number Input to values over an amount. Each row shows the event, the emitter, one line of decoded parameters and the block, and opens in place to the event signature, the parameters with their types, the topics and the data in monospace. The header's Shine Button saves a real CSV of exactly the rows showing. For explorers, indexers and contract dashboards.
FAQ
How do the filters combine?
They all apply at once: the event, the block range counted back from the head block, any address in the row that contains your text, and a value greater than the number. For a swap the value is the larger of the two token 0 amounts; an ownership change has no amount, so any value over 0 hides it.
Are the topics and data real encodings?
They follow the standard layout: the first topic is the hash of the event signature, each indexed address is padded to 32 bytes, and the data holds the other values as 32-byte words, with 18 decimals for the token and 6 for USDC. The addresses and transaction hashes are samples.
What does Export CSV save?
A real file with the rows showing right now: block, log index, event, emitter, the decoded line and the transaction. Cells are quoted where they need it and anything a spreadsheet could read as a formula is kept as text. With nothing showing the button answers in the status line instead of saving an empty file.
What stays local, and how do I wire it?
Everything but the download. No request is made. In your app fetch logs by address, topic and block range from your node or indexer, decode them with the contract's ABI, and keep the filters in the address bar so a view can be shared.