shadcn.io is not affiliated with official shadcn/ui
ABI Decoder Web3 Block for React Aria
A calldata decoder over a typed table of six functions: paste hex or use a sample, and it names the function, lists its arguments with types and amounts, and shows the 32-byte words, with a note for odd, short or unknown input.
Installation
Overview
Read what a transaction asks a contract to do, with this calldata decoder for React with React Aria. It's the bench of Hexbench, a transaction debugger. A hairline frame with a plus mark on each corner starts with a Textarea in mono type for the calldata and three ghost Buttons that fill a sample: a transfer, an approval and a swap. The decoder is real and small. It matches the first four bytes against a typed table of six functions, cuts the rest into 32-byte words and reads each argument by its type: an address, an amount with 18 decimals, a flag, or a list of addresses read through its offset. The function appears as a signature with its selector in a Badge, the arguments in a table of name, type and value with a Copy Button on each, and the words below in a scroll region. Input that is odd, too short, not hex or not in the table gets a note under the box that says what is wrong, and the panel keeps its height. There is no primary action: the result follows what you type. For debuggers, wallet tools and any page that shows a transaction.
FAQ
How does the decoder read the calldata?
It removes spaces and a leading 0x, checks that what is left is hex with whole bytes, and takes the first eight digits as the selector. If the selector is in the table, the rest must be 64-digit words, at least one per argument. An address is the last 40 digits of its word, an amount is the word read as an integer and shown with 18 decimals, a flag is 0 or 1, and a list is read through its offset, then its length, then its items. It is plain string work in the file, with no library.
What happens with a function that isn't in the table?
The panel says Selector 0x… is not in this demo's table of six functions, shows the selector and leaves the arguments empty. Real tools look the selector up in a public signature database and try each match; in your app replace FUNCTIONS with your contract's ABI, or with a lookup you run on your server, and keep the same decoding for the types you support.
What stays local, and how do I wire it?
All of it. The three samples and every address in them are invented, the text you paste is read in the tab and nothing is sent. To decode real transactions, fetch a transaction's input from your node or indexer and pass it to decode; for types the demo lacks (bytes, strings, tuples, signed integers) extend argOf with the ABI's rules for them.
What does it say about malformed input?
Each case has its own sentence: a character that is not a hex digit and where it is, an odd number of digits, fewer than the eight a selector needs, extra digits that don't fill a word, and a call with fewer words than its function takes. The byte count above the box still counts what you pasted, so you can see how much there is.
Is it accessible from the keyboard?
Yes. The calldata box has a visible-to-assistive-technology label, the samples and Clear are buttons, each copy button names its argument, the table and the word list are named scroll regions that take focus, and the status line reports what was decoded or why not. The problem note is text with an icon, never only a color.