Transaction List
Wallet activity grouped by day. Direction is derived against the connected account, not passed in — the same transfer is a send for one wallet and a receive for another, and a self-transfer is both.
src/components/ui/transaction-list.tsxAbout
From the component's own source, where it was written.
Wallet activity, grouped by day.
Direction is relative to the connected wallet, not a property of the transaction. The same transfer is a send for one account and a receive for another, and a self-transfer is both — which is why account is required and the direction is derived rather than passed in. Components that take a type: 'send' | 'receive' prop get this wrong the moment two of your own addresses transact.
A failed transaction still appears. It consumed gas and it is on-chain; hiding it makes the balance look unexplained.
Install
npx astralyx-ui add transaction-list
Usage
import { TransactionList } from '@/components/ui/transaction-list'
<TransactionList transactions={txs} account={address} />Composer
Change the props and the source below follows.
Examples
Activity
<TransactionList transactions={txs} account={address} />API
Generated from the source, so it cannot fall behind the code. One table per exported component, then hooks, functions and types.
TransactionList
Extends ComponentProps<'div'>.
| Prop | Type | Default | Description |
|---|---|---|---|
| transactions | WalletTx[] | required | { hash, from, to, amount?, fiat?, time, kind?, failed?, href? }. |
| account | string | required | Required. Direction is computed against it, which is the only way a self-transfer renders correctly. |
| locale | string | 'en-GB' | — |
| currency | string | 'USD' | — |
| now | Date | — | — |
| emptyLabel | ReactNode | 'No activity yet' | — |
| explorerLabel | string | 'View on block explorer' | — |
Types
WalletTx
Wallet activity, grouped by day.
| Field | Type | Description |
|---|---|---|
| hash | string | — |
| from | string | Sender. Compared against account to derive direction. |
| to | string | — |
| amount? | ReactNode | Formatted amount with symbol. |
| fiat? | number | — |
| time | Date | — |
| kind? | 'transfer' | 'swap' | 'approve' | 'contract' | — |
| failed? | boolean | Still shown — it consumed gas and is on-chain; hiding it leaves the balance unexplained. |
| href? | string | — |