BuyListingButton

Purchase marketplace items with Bitcoin SV transactions, supporting various asset types and secure payment processing.

BitcoinAuthProviderBitcoinQueryProvider

marketplacepaymentsactions

Purchase button for marketplace items with Bitcoin SV transaction processing and built-in confirmation dialog.

BuyListingButton combines the Radix Button primitive and Dialog primitive with Bitcoin marketplace logic, providing secure payment processing, balance validation, and confirmation workflows for BSV20, BSV21, and Ordinals purchases.

Installation

npx bigblocks add buy-listing-button

Import

import { BuyListingButton } from 'bigblocks';

API Reference

This component extends the Button primitive and Dialog primitive and inherits their props.

Prop	Type	Default	Description
listing*	`MarketListing`	-	Marketplace listing to purchase
onSuccess	`(txid: string) => void`	-	Callback with transaction ID on successful purchase
onError	`(error: Error) => void`	-	Callback when purchase fails
buttonText	`string`	`'Buy Now'`	Custom button text
dialogTitle	`string`	`'Confirm Purchase'`	Purchase confirmation dialog title
showDetails	`boolean`	`true`	Show item details in confirmation dialog
disabled	`boolean`	`false`	Disable the button
loading	`boolean`	`false`	Show loading state
variant	`"solid" \| "soft" \| "outline" \| "ghost"`	`"solid"`	Button variant style
size	`"1" \| "2" \| "3" \| "4"`	`"2"`	Button size
className	`string`	-	Additional CSS classes

* Required props

Basic Usage

import { BuyListingButton } from 'bigblocks';

export default function MarketplaceListing() {
  const listing = {
    id: 'listing-123',
    assetType: 'BSV20',
    symbol: 'SATS',
    priceSats: 5000000,
    payAddress: '1Seller...',
    tokenAmount: 1000,
    decimals: 8
  };

  return (
    <BuyListingButton
      listing={listing}
      onSuccess={(txid) => {
        console.log('Purchase successful!', txid);
        router.push('/my-purchases');
      }}
      onError={(error) => {
        console.error('Purchase failed:', error.message);
      }}
    />
  );
}

Purchase Confirmation

BuyListingButton automatically handles the complete purchase flow:

<BuyListingButton
  listing={listing}
  dialogTitle="Purchase NFT"
  showDetails={true}
  onSuccess={(txid) => {
    toast.success(`Purchase completed! TX: ${txid}`);
    updateInventory();
  }}
  onError={(error) => {
    if (error.message === 'INSUFFICIENT_FUNDS') {
      toast.error('Not enough BSV in wallet');
    } else {
      toast.error(`Purchase failed: ${error.message}`);
    }
  }}
/>

Asset Support

Supports various Bitcoin asset types with automatic validation:

// BSV20 Token
<BuyListingButton
  listing={{
    assetType: 'BSV20',
    symbol: 'SATS',
    tokenAmount: 1000,
    priceSats: 100000,
    // ... other props
  }}
/>

// Ordinals NFT
<BuyListingButton
  listing={{
    assetType: 'Ordinals', 
    tokenId: 'abc123...',
    priceSats: 5000000,
    // ... other props
  }}
/>

Quick Buy Variant

For minimal UI with streamlined purchase flow:

import { QuickBuyButton } from 'bigblocks';

<QuickBuyButton
  listing={listing}
  onSuccess={(txid) => console.log('Quick purchase:', txid)}
/>

Marketplace Listing Structure

interface MarketListing {
  id: string;
  assetType: 'BSV20' | 'BSV21' | 'Ordinals';
  symbol?: string;
  tokenId?: string;
  tokenAmount?: number;
  decimals?: number;
  priceSats: number;
  payAddress: string;
}

For styling options (variant, size, etc.), see the Radix Button documentation.

MarketTable - Display multiple listings
CreateListingButton - Create new listings
QuickBuyButton - Streamlined purchase flow

BuyListingButton

On this page