BigBlocks

Lock BSV

Time-lock BSV until a future block height with lock form, lock summary, and unlock for matured locks

Lock BSV

5,000,000 sats locked

Time-lock satoshis until a future block height

Total Locked5,000,000 sats

Unlockable1,500,000 sats

Next Unlock892,450

Ready to Unlock1,500,000 sats available

"use client"

import { useState } from "react"
import {
  LockBsv,
  type LockOperationResult,
} from "@/registry/bigblocks/blocks/lock-bsv"

export function LockBsvDemo() {
  const [lastResult, setLastResult] = useState<LockOperationResult | null>(null)

  async function handleLock(params: {
    satoshis: number
    until: number
  }): Promise<LockOperationResult> {
    await new Promise((resolve) => setTimeout(resolve, 2000))
    return {
      txid: "a1b2c3d4e5f6a1b2c3d4e5f6a1b2c3d4e5f6a1b2c3d4e5f6a1b2c3d4e5f6a1b2",
    }
  }

  async function handleUnlock(): Promise<LockOperationResult> {
    await new Promise((resolve) => setTimeout(resolve, 2000))
    return {
      txid: "f6e5d4c3b2a1f6e5d4c3b2a1f6e5d4c3b2a1f6e5d4c3b2a1f6e5d4c3b2a1f6e5",
    }
  }

  return (
    <div className="flex flex-col items-start gap-4">
      <LockBsv
        lockData={{
          totalLocked: 5000000,
          unlockable: 1500000,
          nextUnlock: 892450,
        }}
        onLock={handleLock}
        onUnlock={handleUnlock}
        onSuccess={(result) => setLastResult(result)}
        onError={(error) => console.error("Lock error:", error)}
      />

      {lastResult?.txid && (
        <div className="w-full max-w-md rounded-md border bg-muted/50 p-3">
          <p className="text-xs text-muted-foreground">Last transaction</p>
          <p className="mt-1 break-all font-mono text-xs">{lastResult.txid}</p>
        </div>
      )}
    </div>
  )
}

Empty State

Lock BSV

Time-lock satoshis until a future block height

Total Locked0 sats

Unlockable0 sats

Next Unlock—

"use client"

import {
  LockBsv,
  type LockOperationResult,
} from "@/registry/bigblocks/blocks/lock-bsv"

export function LockBsvEmptyDemo() {
  async function handleLock(params: {
    satoshis: number
    until: number
  }): Promise<LockOperationResult> {
    await new Promise((resolve) => setTimeout(resolve, 2000))
    return {
      txid: "a1b2c3d4e5f6a1b2c3d4e5f6a1b2c3d4e5f6a1b2c3d4e5f6a1b2c3d4e5f6a1b2",
    }
  }

  async function handleUnlock(): Promise<LockOperationResult> {
    await new Promise((resolve) => setTimeout(resolve, 2000))
    return {
      txid: "f6e5d4c3b2a1f6e5d4c3b2a1f6e5d4c3b2a1f6e5d4c3b2a1f6e5d4c3b2a1f6e5",
    }
  }

  return (
    <LockBsv
      onLock={handleLock}
      onUnlock={handleUnlock}
      onSuccess={(result) => console.log("txid:", result.txid)}
    />
  )
}

Installation

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

Usage

LockBsv requires onLock and onUnlock callbacks that perform the actual lock/unlock transactions. Wire these to @1sat/actions lock operations.

import { LockBsv } from "@/components/blocks/lock-bsv"
import { lockBsv, unlockBsv, createContext } from "@1sat/actions"
import { useWallet } from "@1sat/react"
 
export function WalletLocks() {
  const { wallet } = useWallet()
  const ctx = createContext(wallet)
 
  return (
    <LockBsv
      onLock={(params) =>
        lockBsv.execute(ctx, { requests: [params] })
      }
      onUnlock={() => unlockBsv.execute(ctx)}
      onSuccess={(result) => console.log("txid:", result.txid)}
      onError={(err) => console.error(err)}
    />
  )
}

Props

LockBsv

Prop	Type	Default	Description
`lockData`	`{ totalLocked: number; unlockable: number; nextUnlock: number }`	--	Pre-populated lock summary data
`onLock`	`(params: { satoshis: number; until: number }) => Promise<LockOperationResult>`	--	Callback to execute the lock transaction
`onUnlock`	`() => Promise<LockOperationResult>`	--	Callback to unlock matured locks
`onSuccess`	`(result: LockOperationResult) => void`	--	Called after a successful lock or unlock
`onError`	`(error: Error) => void`	--	Called on error
`className`	`string`	--	Additional CSS classes

LockOperationResult

interface LockOperationResult {
  txid?: string
  error?: string
}

Like Button Market Grid