shadcn.io is not affiliated with official shadcn/ui
Mempool Viewer Web3 Block for React Aria
A mempool queue of 24 pending transactions sorted by max fee, with a cutoff after the 14 the next block fits, a My max fee slider that inserts your bid and says how many blocks and transactions are ahead, and a type filter.
Installation
Overview
See where a fee lands in the queue before sending anything, with this mempool viewer for React with React Aria. It's Waitroom, a sample viewer, and the queue is a typed snapshot with sample hashes: 24 pending transactions sorted by max fee, each with a short hash, a type, the sender, the gas it uses and its bid. A Slider, My max fee in gwei, inserts your own marker row at its place and the sentence beside it says whether you land in the next block or about how many blocks away, and how many transactions are ahead. A cutoff after the 14 transactions the next block fits splits the list into Next block and Later, and a Toggle Group filters by All, Swap, Transfer, Approve or Mint. The list scrolls in a region of fixed height. For gas tools, wallets and fee estimators.
FAQ
How is the cutoff decided?
The next block fits the top 14 entries of the queue by max fee, a typed capacity. Your marker is inserted before every transaction that bids the same or less, so a tie queues behind the others. If that puts you in the first 14 you are in the next block; otherwise the blocks away are the number of entries ahead divided by 14, rounded down, plus 1.
Does the filter change where I land?
No. The cutoff and your place are worked out on the whole queue first, then the filter hides rows of other types. Your marker row always shows, and each band counts how many of its rows are showing.
What stays local, and how do I wire it?
Everything. Nothing is sent, sped up or replaced, and the hashes are samples. In your app read pending transactions from your node's pool or a fee service, sort by the effective tip, take the block gas limit instead of a fixed count, and let the user submit a replacement with a higher fee as a signed transaction.
Is the slider accessible?
Yes. It moves with the arrow keys, Home and End, and its spoken value includes the sentence, such as 40 gwei, about 2 blocks, 18 transactions ahead. The list is a named scroll region you can focus.