BigBlocks

Transaction History

Transaction list with status indicators, amounts, relative dates, and pagination. Supports default and compact variants with inbound/outbound display.

Received from 1A1zP...DivfNa

a1b2c3d4...f0a1b2

+250,000 sat15m ago

Sent to 1BitcoinEaterAddress

b2c3d4e5...a1b2c3

-50,000 sat2h ago

NFT inscription

c3d4e5f6...b2c3d4

-1,500 sat5h ago

Token transfer PEPE

d4e5f6a7...c3d4e5

-100,000 sat1d ago

Ordinal purchase

e5f6a7b8...d4e5f6

-500,000 sat2d ago

"use client"

import { useState } from "react"
import {
  TransactionHistoryUI,
  type HistoryEntry,
} from "@/registry/bigblocks/blocks/transaction-history"

const MOCK_ENTRIES: HistoryEntry[] = [
  {
    txid: "a1b2c3d4e5f6a7b8c9d0e1f2a3b4c5d6e7f8a9b0c1d2e3f4a5b6c7d8e9f0a1b2",
    description: "Received from 1A1zP...DivfNa",
    satoshis: 250000,
    status: "completed",
    dateCreated: new Date(Date.now() - 1000 * 60 * 15).toISOString(),
  },
  {
    txid: "b2c3d4e5f6a7b8c9d0e1f2a3b4c5d6e7f8a9b0c1d2e3f4a5b6c7d8e9f0a1b2c3",
    description: "Sent to 1BitcoinEaterAddress",
    satoshis: -50000,
    status: "completed",
    dateCreated: new Date(Date.now() - 1000 * 60 * 60 * 2).toISOString(),
  },
  {
    txid: "c3d4e5f6a7b8c9d0e1f2a3b4c5d6e7f8a9b0c1d2e3f4a5b6c7d8e9f0a1b2c3d4",
    description: "NFT inscription",
    satoshis: -1500,
    status: "unproven",
    dateCreated: new Date(Date.now() - 1000 * 60 * 60 * 5).toISOString(),
  },
  {
    txid: "d4e5f6a7b8c9d0e1f2a3b4c5d6e7f8a9b0c1d2e3f4a5b6c7d8e9f0a1b2c3d4e5",
    description: "Token transfer PEPE",
    satoshis: -100000,
    status: "sending",
    dateCreated: new Date(Date.now() - 1000 * 60 * 60 * 24).toISOString(),
  },
  {
    txid: "e5f6a7b8c9d0e1f2a3b4c5d6e7f8a9b0c1d2e3f4a5b6c7d8e9f0a1b2c3d4e5f6",
    description: "Ordinal purchase",
    satoshis: -500000,
    status: "failed",
    dateCreated: new Date(Date.now() - 1000 * 60 * 60 * 48).toISOString(),
  },
]

export function TransactionHistoryDemo() {
  const [clicked, setClicked] = useState<string | null>(null)

  return (
    <div className="mx-auto w-full max-w-lg space-y-4">
      <TransactionHistoryUI
        entries={MOCK_ENTRIES}
        isLoading={false}
        error={null}
        hasMore={true}
        onRowClick={setClicked}
        onExternalLink={(txid) =>
          window.open(`https://whatsonchain.com/tx/${txid}`, "_blank")
        }
      />

      {clicked && (
        <p className="text-sm text-muted-foreground">
          Clicked:{" "}
          <span className="font-mono text-foreground">
            {clicked.slice(0, 12)}...
          </span>
        </p>
      )}
    </div>
  )
}

Compact

Received from 1A1zP...DivfNa

+250,000 sat

Sent to 1BitcoinEaterAddress

-50,000 sat

NFT inscription

-1,500 sat

"use client"

import {
  TransactionHistoryUI,
  type HistoryEntry,
} from "@/registry/bigblocks/blocks/transaction-history"

const MOCK_ENTRIES: HistoryEntry[] = [
  {
    txid: "a1b2c3d4e5f6a7b8c9d0e1f2a3b4c5d6e7f8a9b0c1d2e3f4a5b6c7d8e9f0a1b2",
    description: "Received from 1A1zP...DivfNa",
    satoshis: 250000,
    status: "completed",
    dateCreated: new Date(Date.now() - 1000 * 60 * 15).toISOString(),
  },
  {
    txid: "b2c3d4e5f6a7b8c9d0e1f2a3b4c5d6e7f8a9b0c1d2e3f4a5b6c7d8e9f0a1b2c3",
    description: "Sent to 1BitcoinEaterAddress",
    satoshis: -50000,
    status: "completed",
    dateCreated: new Date(Date.now() - 1000 * 60 * 60 * 2).toISOString(),
  },
  {
    txid: "c3d4e5f6a7b8c9d0e1f2a3b4c5d6e7f8a9b0c1d2e3f4a5b6c7d8e9f0a1b2c3d4",
    description: "NFT inscription",
    satoshis: -1500,
    status: "unproven",
    dateCreated: new Date(Date.now() - 1000 * 60 * 60 * 5).toISOString(),
  },
]

export function TransactionHistoryCompactDemo() {
  return (
    <div className="mx-auto w-full max-w-lg">
      <TransactionHistoryUI
        entries={MOCK_ENTRIES}
        isLoading={false}
        error={null}
        variant="compact"
      />
    </div>
  )
}

Loading

"use client"

import {
  TransactionHistoryUI,
} from "@/registry/bigblocks/blocks/transaction-history"

export function TransactionHistoryLoadingDemo() {
  return (
    <div className="mx-auto w-full max-w-lg">
      <TransactionHistoryUI
        entries={[]}
        isLoading={true}
        error={null}
        skeletonCount={3}
      />
    </div>
  )
}

Empty

No transactions yet

"use client"

import {
  TransactionHistoryUI,
} from "@/registry/bigblocks/blocks/transaction-history"

export function TransactionHistoryEmptyDemo() {
  return (
    <div className="mx-auto w-full max-w-lg">
      <TransactionHistoryUI entries={[]} isLoading={false} error={null} />
    </div>
  )
}

Installation

bunx shadcn@latest add https://registry.bigblocks.dev/r/transaction-history.json

Usage

Pass a BSV address to auto-fetch from the 1sat API, or provide pre-loaded entries directly.

import { TransactionHistory } from "@/components/blocks/transaction-history"
 
export function WalletActivity() {
  return (
    <TransactionHistory
      address="1A1zP1eP5QGefi2DMPTfTL5SLmv7DivfNa"
      onRowClick={(txid) => console.log("Clicked:", txid)}
      onExternalLink={(txid) =>
        window.open(`https://whatsonchain.com/tx/${txid}`, "_blank")
      }
    />
  )
}

Variants

Default

Full transaction rows with status badge, description, amount, and relative date.

<TransactionHistory address={address} variant="default" />

Compact

Condensed rows showing description and amount only.

<TransactionHistory address={address} variant="compact" />

Props

TransactionHistory

Prop	Type	Default	Description
`address`	`string \| null`	--	BSV address to fetch history for
`entries`	`HistoryEntry[]`	--	Pre-loaded entries (bypasses API)
`apiUrl`	`string`	`"https://api.1sat.app"`	Custom API base URL
`pageSize`	`number`	`20`	Entries per page
`autoFetch`	`boolean`	`true`	Auto-fetch on mount
`onRowClick`	`(txid: string) => void`	--	Row click callback
`onExternalLink`	`(url: string) => void`	--	External link callback
`onSuccess`	`(entries: HistoryEntry[]) => void`	--	Called on successful fetch
`onError`	`(error: Error) => void`	--	Called on fetch error
`variant`	`"default" \| "compact"`	`"default"`	Visual variant
`skeletonCount`	`number`	`5`	Skeleton rows while loading
`className`	`string`	--	Additional CSS classes

HistoryEntry

interface HistoryEntry {
  txid: string
  description: string
  satoshis: number       // Positive = inbound, negative = outbound
  status: TransactionStatus
  dateCreated: string    // ISO date string
}
 
type TransactionStatus = "completed" | "unproven" | "sending" | "failed"

Hook

useTransactionHistory manages fetching, pagination, and entry state.

import { useTransactionHistory } from "@/components/blocks/transaction-history"
 
function CustomHistory() {
  const { entries, isLoading, error, hasMore, loadMore } =
    useTransactionHistory({ address: "1A1zP1eP..." })
 
  return (
    <div>
      {entries.map((e) => (
        <div key={e.txid}>{e.description}: {e.satoshis} sats</div>
      ))}
      {hasMore && <button onClick={loadMore}>Load more</button>}
    </div>
  )
}

Token List Unlock Wallet