BigBlocks

Send BSV

A trigger button that opens a send dialog for transferring Bitcoin SV to any address, with sats/BSV unit toggle and fee preview

"use client"

import {
  SendBsv,
  type SendBsvParams,
  type SendBsvResult,
} from "@/registry/bigblocks/blocks/send-bsv"

export function SendBsvDemo() {
  async function handleSend(_params: SendBsvParams): Promise<SendBsvResult> {
    await new Promise((resolve) => setTimeout(resolve, 2000))
    return {
      txid: "e3b0c44298fc1c149afbf4c8996fb92427ae41e4649b934ca495991b7852b855",
    }
  }

  return (
    <div className="flex items-center justify-center">
      <SendBsv
        onSend={handleSend}
        onSuccess={(result) => console.log("txid:", result.txid)}
        onError={(error) => console.error("Send error:", error)}
      />
    </div>
  )
}

Installation

bunx shadcn@latest add https://registry.bigblocks.dev/r/send-bsv.json

Usage

SendBsv requires an onSend callback that performs the actual transaction. The callback receives the destination address and satoshi amount and must return a SendBsvResult.

import { SendBsv } from "@/components/blocks/send-bsv"
 
export function WalletActions() {
  return (
    <SendBsv
      onSend={async ({ address, satoshis }) => {
        // Call your wallet's send action here.
        // With @1sat/actions:
        // const result = await sendBsv.execute(ctx, {
        //   requests: [{ address, satoshis }],
        // })
        // return result
        return { txid: "abc123..." }
      }}
      onSuccess={(result) => console.log("txid:", result.txid)}
      onError={(err) => console.error(err)}
    />
  )
}

Variants

Compact

An icon-only square button. Useful in dense UIs such as table rows or toolbars.

"use client"

import {
  SendBsv,
  type SendBsvParams,
  type SendBsvResult,
} from "@/registry/bigblocks/blocks/send-bsv"

export function SendBsvCompactDemo() {
  async function handleSend(_params: SendBsvParams): Promise<SendBsvResult> {
    await new Promise((resolve) => setTimeout(resolve, 2000))
    return {
      txid: "e3b0c44298fc1c149afbf4c8996fb92427ae41e4649b934ca495991b7852b855",
    }
  }

  return (
    <div className="flex items-center justify-center">
      <SendBsv
        variant="compact"
        dialogSize="compact"
        onSend={handleSend}
      />
    </div>
  )
}

Quick

An inline input + send button that pre-fills the dialog amount. Users type a satoshi amount directly without opening the dialog first.

"use client"

import {
  SendBsv,
  type SendBsvParams,
  type SendBsvResult,
} from "@/registry/bigblocks/blocks/send-bsv"

export function SendBsvQuickDemo() {
  async function handleSend(_params: SendBsvParams): Promise<SendBsvResult> {
    await new Promise((resolve) => setTimeout(resolve, 2000))
    return {
      txid: "e3b0c44298fc1c149afbf4c8996fb92427ae41e4649b934ca495991b7852b855",
    }
  }

  return (
    <div className="flex items-center justify-center">
      <SendBsv
        variant="quick"
        onSend={handleSend}
      />
    </div>
  )
}

Dialog Sizes

The send dialog has two size modes controlled by dialogSize:

Value	Max width	Use case
`"full"` (default)	`sm:max-w-md`	Standard send flow with description text
`"compact"`	`sm:max-w-sm`	Tighter layouts, hides the dialog description

Props

SendBsv

Prop	Type	Default	Description
`onSend`	`(params: SendBsvParams) => Promise<SendBsvResult>`	required	Callback that executes the send transaction
`variant`	`"default" \| "compact" \| "quick"`	`"default"`	Trigger button style
`dialogSize`	`"full" \| "compact"`	`"full"`	Controls the send dialog width and verbosity
`onSuccess`	`(result: SendBsvResult) => void`	—	Called after a successful send
`onError`	`(error: Error) => void`	—	Called when the send fails
`defaultAddress`	`string`	`""`	Pre-filled destination address
`defaultSatoshis`	`number`	—	Pre-filled amount in satoshis
`estimatedFee`	`number`	`50`	Network fee estimate shown in the dialog (satoshis)
`triggerLabel`	`string`	`"Send BSV"`	Label for the default variant button
`disabled`	`boolean`	`false`	Disables the trigger button
`className`	`string`	—	Additional CSS classes for the trigger
`dialogClassName`	`string`	—	Additional CSS classes for the dialog content

SendBsvParams

The object passed to your onSend callback:

interface SendBsvParams {
  address: string  // Destination BSV address
  satoshis: number // Amount in satoshis
}

SendBsvResult

The object your onSend callback must return:

interface SendBsvResult {
  txid?: string   // Transaction ID on success
  rawtx?: string  // Raw transaction hex
  error?: string  // Error message on failure
}

When error is present in the result, SendBsv surfaces it in the dialog and calls onError. When txid is present, the dialog shows a success state with the transaction ID.

Sub-components

The block exports SendBsvTrigger and SendBsvDialog separately if you need to wire them independently.

SendBsvTrigger

import { SendBsvTrigger } from "@/components/blocks/send-bsv"
 
<SendBsvTrigger
  variant="default"
  label="Send"
  loading={isSending}
  onClick={() => setDialogOpen(true)}
/>

SendBsvTrigger Props

Prop	Type	Default	Description
`variant`	`"default" \| "compact" \| "quick"`	`"default"`	Trigger style
`label`	`string`	`"Send BSV"`	Button label (default and quick variants)
`disabled`	`boolean`	`false`	Disables the trigger
`loading`	`boolean`	`false`	Shows a spinner and disables the trigger
`onClick`	`() => void`	—	Click handler (opens the dialog)
`quickAmount`	`string`	`""`	Controlled amount value for the quick variant
`onQuickAmountChange`	`(value: string) => void`	—	Called when the quick variant amount changes
`onQuickSend`	`() => void`	—	Called when the quick variant send button is clicked
`className`	`string`	—	Additional CSS classes

SendBsvDialog

import { SendBsvDialog } from "@/components/blocks/send-bsv"
 
<SendBsvDialog
  open={dialogOpen}
  onOpenChange={setDialogOpen}
  onSend={handleSend}
  onSuccess={(result) => console.log(result.txid)}
  estimatedFee={50}
/>

SendBsvDialog Props

Prop	Type	Default	Description
`open`	`boolean`	required	Whether the dialog is open
`onOpenChange`	`(open: boolean) => void`	required	Called when the open state should change
`onSend`	`(params: SendBsvParams) => Promise<SendBsvResult>`	required	Send callback
`onSuccess`	`(result: SendBsvResult) => void`	—	Called on successful send
`onError`	`(error: Error) => void`	—	Called on send failure
`defaultAddress`	`string`	`""`	Pre-filled destination address
`defaultSatoshis`	`number`	—	Pre-filled amount in satoshis
`estimatedFee`	`number`	`50`	Network fee shown in the summary row
`size`	`"full" \| "compact"`	`"full"`	Dialog width and description visibility
`className`	`string`	—	Additional CSS classes for the dialog content

Receive Address Send BSV21