Skip to content
shadcn.io

shadcn.io is not affiliated with official shadcn/ui

Transaction History Web3 Block for React Aria

A wallet statement with fourteen day-grouped transactions, status and type filters, rows that open the hash, nonce, block and fee, and one pending transfer you can speed up or cancel.

Framework
UI library

Preview

Preview width

Installation

Part of Pro
Pro unlocks the code and one-line install of every Pro button and text effect, plus the MCP for your AI editor.
Have Pro already? Sign in to open it.Opens here as soon as you're Pro.

Overview

Read a wallet's recent history and fix the one transfer that is stuck with this transaction history for React with React Aria. It's the statement of Ledgerwake, a wallet statement app, with fourteen typed transactions in day groups, 7 to 12 Oct 2026. A Segment Group filters by status with a count on each chip and a Native Select by type. Each row is a Collapsible with a type tile, the counterparty as a short address, the amount, and a status written as a glyph and a word; opening it lists the hash with a Copy Button, the nonce, the block, and gas used times gas price equal to the fee. The one pending transfer has Speed up, the single Shine Button, which raises the fee by at least 10 percent, and Cancel transaction, a zero-value replacement. Hashes are invented.

FAQ

What do Speed up and Cancel transaction do?

Both replace the pending transaction with a new one at the same nonce, which a chain only accepts if the fee is higher. Speed up raises the gas price by at least 10 percent, rounded up to a whole gwei, and shows the old and the new fee; the row reads Replaced with a higher fee. Cancel sends nothing to anyone: it is a zero-value replacement, and the row reads Cancelled. Undo puts the demo back.

Why does the nonce matter?

A wallet's own transactions run in nonce order. While nonce 43 is pending, nothing after it can be confirmed, so a stuck transfer blocks the next one you send. The note under the pending row says this, and replacing or cancelling is the way to unblock it.

How is the fee worked out?

Gas used times the gas price in gwei, divided by a billion, in ether, with a rough dollar figure from a typed sample rate. For a pending transaction the figure uses the gas limit. Received money shows Paid by the sender, because the sender pays the fee.

What stays local, and how do I wire it?

All of it. The transactions, hashes and addresses are typed and invented, and Speed up and Cancel only change local state; the message says nothing was sent to a chain. In your app read history from your indexer, send the replacement through the user's wallet with the same nonce, and let the wallet sign it.

Does filtering keep the page still?

Yes. The list sits in a named, focusable scroll region of fixed height, so any filter changes the rows and not the panel. With no match an empty state in the same space offers Show all transactions, and the polite status line says how many of the fourteen show.

How does it look on a phone?

The chips become a four-column grid, the type select spans the width, and each row keeps its tile, a title with the counterparty under it, and the amount with the status at the end. Day headings stay pinned while their rows scroll.