BigBlocks

Receive Address

QR code and deposit address display with clipboard copy and optional address rotation. Supports default, compact, and inline variants.

Receive

1A1zP1eP5QGe...v7DivfNa

"use client"

import { useState } from "react"
import {
  ReceiveAddressUI,
} from "@/registry/bigblocks/blocks/receive-address"

const SAMPLE_ADDRESSES = [
  "1A1zP1eP5QGefi2DMPTfTL5SLmv7DivfNa",
  "1BvBMSEYstWetqTFn5Au4m4GFg7xJaNVN2",
  "3J98t1WpEZ73CNmQviecrnyiWrnqRhWNLy",
  "bc1qar0srrr7xfkvy5l643lydnw9re59gtzzwf5mdq",
]

export function ReceiveAddressDemo() {
  const [addressIndex, setAddressIndex] = useState(0)
  const address = SAMPLE_ADDRESSES[addressIndex]

  return (
    <div className="mx-auto w-full max-w-sm">
      <ReceiveAddressUI
        address={address}
        variant="default"
        qrSize={200}
        copied={false}
        isRotating={false}
        rotateError={null}
        canRotate={true}
        onCopy={() => console.log("Copied:", address)}
        onRotate={() => {
          setAddressIndex((i) => (i + 1) % SAMPLE_ADDRESSES.length)
        }}
      />
    </div>
  )
}

Compact

"use client"

import {
  ReceiveAddressUI,
} from "@/registry/bigblocks/blocks/receive-address"

const SAMPLE_ADDRESS = "1A1zP1eP5QGefi2DMPTfTL5SLmv7DivfNa"

export function ReceiveAddressCompactDemo() {
  return (
    <div className="flex justify-center">
      <ReceiveAddressUI
        address={SAMPLE_ADDRESS}
        variant="compact"
        qrSize={120}
        copied={false}
        isRotating={false}
        rotateError={null}
        canRotate={false}
        onCopy={() => console.log("Copied:", SAMPLE_ADDRESS)}
        onRotate={() => {}}
      />
    </div>
  )
}

Inline

1A1zP1eP5QGe...v7DivfNa

"use client"

import {
  ReceiveAddressUI,
} from "@/registry/bigblocks/blocks/receive-address"

const SAMPLE_ADDRESS = "1A1zP1eP5QGefi2DMPTfTL5SLmv7DivfNa"

export function ReceiveAddressInlineDemo() {
  return (
    <div className="mx-auto w-full max-w-sm">
      <ReceiveAddressUI
        address={SAMPLE_ADDRESS}
        variant="inline"
        copied={false}
        isRotating={false}
        rotateError={null}
        canRotate={false}
        onCopy={() => console.log("Copied:", SAMPLE_ADDRESS)}
        onRotate={() => {}}
      />
    </div>
  )
}

Installation

bunx shadcn@latest add https://registry.bigblocks.dev/r/receive-address.json

Usage

The composed ReceiveAddress component wires the hook and UI together. Pass an address and optional callbacks for rotation and copy.

import { ReceiveAddress } from "@/components/blocks/receive-address"
 
export function DepositPage() {
  return (
    <ReceiveAddress
      address="1A1zP1eP5QGefi2DMPTfTL5SLmv7DivfNa"
      onRotate={async () => {
        const newAddr = await generateNewAddress()
        return newAddr
      }}
      onCopy={(addr) => console.log("Copied:", addr)}
    />
  )
}

Variants

Default

Full card with QR code, address text, copy button, and optional rotate button.

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

Compact

Smaller layout with a reduced QR code size. Useful for sidebars and panels.

<ReceiveAddress address={address} variant="compact" qrSize={120} />

Inline

Horizontal layout with address and copy button only -- no QR code.

<ReceiveAddress address={address} variant="inline" />

Props

ReceiveAddress

Prop	Type	Default	Description
`address`	`string \| null`	required	The deposit address to display
`onRotate`	`() => Promise<string>`	--	Callback to rotate to a new address
`onCopy`	`(address: string) => void`	--	Called after address is copied
`variant`	`"default" \| "compact" \| "inline"`	`"default"`	Visual layout variant
`qrSize`	`number`	`200`	QR code pixel dimensions
`renderQr`	`(address: string) => ReactNode`	--	Custom QR code renderer
`className`	`string`	--	Additional CSS classes

Hook

useReceiveAddress can be used independently for a fully custom UI.

import { useReceiveAddress } from "@/components/blocks/receive-address"
 
function CustomReceive() {
  const { copied, isRotating, rotateError, copyAddress, rotateAddress } =
    useReceiveAddress({
      address: "1A1zP1eP...",
      onRotate: async () => generateNewAddress(),
    })
 
  return (
    <div>
      <button onClick={copyAddress}>{copied ? "Copied" : "Copy"}</button>
      <button onClick={rotateAddress} disabled={isRotating}>
        Rotate
      </button>
      {rotateError && <p>{rotateError.message}</p>}
    </div>
  )
}

Profile Card Send BSV