BigBlocks

Wallet Overview

Wallet dashboard card displaying BSV balance with privacy toggle, payment and ordinal addresses, identity key, and send/receive actions

Wallet

2,500,000sats

0.02500000 BSV

+50,000 unconfirmed

Payment Address

1A1zP1eP...DivfNa

Ordinal Address

1BvBMSEY...JaNVN2

Identity Key

02b4632d...9a8737

"use client"

import {
  WalletOverviewUI,
  type WalletBalance,
} from "@/registry/bigblocks/blocks/wallet-overview"

const MOCK_BALANCE: WalletBalance = {
  confirmed: 2_450_000,
  unconfirmed: 50_000,
  total: 2_500_000,
}

export function WalletOverviewDemo() {
  return (
    <div className="mx-auto w-full max-w-md">
      <WalletOverviewUI
        balance={MOCK_BALANCE}
        paymentAddress="1A1zP1eP5QGefi2DMPTfTL5SLmv7DivfNa"
        ordinalAddress="1BvBMSEYstWetqTFn5Au4m4GFg7xJaNVN2"
        identityKey="02b4632d08485ff1df2db55b9dafd23347d1c47a457072a1e87be26896549a8737"
        isLoading={false}
        error={null}
        onSend={() => console.log("Send")}
        onReceive={() => console.log("Receive")}
        onRefresh={() => console.log("Refresh")}
      />
    </div>
  )
}

Installation

bunx shadcn@latest add https://registry.bigblocks.dev/r/wallet-overview.json

Usage

WalletOverview must be rendered inside a WalletProvider from @1sat/react. It fetches balance data from the wallet context automatically.

import { WalletProvider } from "@1sat/react"
import { WalletOverview } from "@/components/blocks/wallet-overview"
 
export function Dashboard() {
  return (
    <WalletProvider>
      <WalletOverview
        onSend={() => console.log("Open send dialog")}
        onReceive={() => console.log("Open receive dialog")}
      />
    </WalletProvider>
  )
}

Props

WalletOverview

Prop	Type	Default	Description
`onSend`	`() => void`	--	Callback fired when the Send button is clicked
`onReceive`	`() => void`	--	Callback fired when the Receive button is clicked
`className`	`string`	--	Additional CSS classes

WalletOverviewUI

For standalone use without the hook, you can render WalletOverviewUI directly:

Prop	Type	Default	Description
`balance`	`WalletBalance \| null`	--	Balance data
`paymentAddress`	`string \| null`	--	Payment (BSV) address
`ordinalAddress`	`string \| null`	--	Ordinal address
`identityKey`	`string \| null`	--	Identity public key
`isLoading`	`boolean`	--	Loading state
`error`	`string \| null`	--	Error message
`onSend`	`() => void`	--	Send button callback
`onReceive`	`() => void`	--	Receive button callback
`onRefresh`	`() => void`	--	Refresh button callback

WalletBalance

interface WalletBalance {
  confirmed: number
  unconfirmed: number
  total: number
}

Unlock Wallet uauthentication Blocks