{ "$schema": "https://ui.shadcn.com/schema/registry-item.json", "name": "buy-listing", "title": "Buy Listing", "author": "Satchmo", "description": "Card component for purchasing ordinal NFTs from the global orderbook via @1sat/actions purchaseOrdinal", "dependencies": [ "class-variance-authority", "lucide-react" ], "registryDependencies": [ "badge", "button", "card", "separator" ], "files": [ { "path": "registry/new-york/blocks/buy-listing/index.tsx", "content": "\"use client\"\n\nimport { type VariantProps } from \"class-variance-authority\"\nimport { BuyListingUI, buyListingVariants } from \"./ui\"\nimport {\n useBuyListing,\n type PurchaseOrdinalParams,\n type PurchaseOrdinalResult,\n type UseBuyListingReturn,\n type UseBuyListingOptions,\n} from \"./use-buy-listing\"\n\n// ---------------------------------------------------------------------------\n// Re-exports\n// ---------------------------------------------------------------------------\n\nexport {\n BuyListingUI,\n buyListingVariants,\n type BuyListingUIProps,\n} from \"./ui\"\nexport {\n useBuyListing,\n type PurchaseOrdinalParams,\n type PurchaseOrdinalResult,\n type UseBuyListingReturn,\n type UseBuyListingOptions,\n} from \"./use-buy-listing\"\n\n// ---------------------------------------------------------------------------\n// Types\n// ---------------------------------------------------------------------------\n\nexport interface BuyListingProps\n extends VariantProps {\n /** Outpoint of the listing (txid.vout format) */\n outpoint: string\n /** Price in satoshis */\n price: number\n /** Seller display name or address */\n seller?: string\n /** Name of the ordinal */\n name?: string\n /** Content type (MIME type) for the thumbnail */\n contentType?: string\n /** Origin outpoint for thumbnail resolution */\n origin?: string\n /** Callback to execute the purchase action */\n onPurchase: (params: PurchaseOrdinalParams) => Promise\n /** Callback on successful purchase */\n onPurchased?: (result: PurchaseOrdinalResult) => void\n /** Callback on error */\n onError?: (error: Error) => void\n /** Marketplace address for fees */\n marketplaceAddress?: string\n /** Marketplace fee rate 0-1 */\n marketplaceRate?: number\n /** Optional CSS class name */\n className?: string\n /** Callback to handle external links (e.g. open in system browser from a WebView) */\n onExternalLink?: (url: string) => void\n}\n\n// ---------------------------------------------------------------------------\n// Constants\n// ---------------------------------------------------------------------------\n\nconst ORDFS_CONTENT_URL = \"https://ordfs.network/content\"\n\n// ---------------------------------------------------------------------------\n// Composed component\n// ---------------------------------------------------------------------------\n\n/**\n * A card component for purchasing ordinal NFTs from the global orderbook.\n *\n * Displays a thumbnail from ORDFS, price, optional seller info, marketplace\n * fee breakdown, and a \"Buy Now\" action. Uses the `purchaseOrdinal` action\n * from `@1sat/actions` via the `onPurchase` callback.\n *\n * @example\n * ```tsx\n * import { BuyListing } from \"@/components/blocks/buy-listing\"\n *\n * {\n * return await purchaseOrdinal.execute(ctx, params)\n * }}\n * />\n * ```\n */\nexport function BuyListing({\n outpoint,\n price,\n seller,\n name,\n contentType,\n origin,\n onPurchase,\n onPurchased,\n onError,\n marketplaceAddress,\n marketplaceRate,\n size = \"default\",\n className,\n onExternalLink,\n}: BuyListingProps) {\n const hook = useBuyListing({\n outpoint,\n price,\n onPurchase,\n onPurchased,\n onError,\n marketplaceAddress,\n marketplaceRate,\n })\n\n const thumbnailUrl = `${ORDFS_CONTENT_URL}/${origin ?? outpoint}`\n\n return (\n hook.setImgError(true)}\n marketFee={hook.marketFee}\n totalCost={hook.totalCost}\n isPurchasing={hook.isPurchasing}\n result={hook.result}\n error={hook.error}\n onPurchase={hook.handlePurchase}\n onExternalLink={onExternalLink}\n />\n )\n}\n", "type": "registry:block", "target": "~/components/blocks/buy-listing/index.tsx" }, { "path": "registry/new-york/blocks/buy-listing/ui.tsx", "content": "\"use client\"\n\nimport { cva, type VariantProps } from \"class-variance-authority\"\nimport {\n AlertCircle,\n CheckCircle2,\n ExternalLink,\n Loader2,\n ShoppingCart,\n} from \"lucide-react\"\nimport { Badge } from \"@/components/ui/badge\"\nimport { Button } from \"@/components/ui/button\"\nimport {\n Card,\n CardContent,\n CardFooter,\n CardHeader,\n} from \"@/components/ui/card\"\nimport { Separator } from \"@/components/ui/separator\"\nimport { cn } from \"@/lib/utils\"\nimport type { PurchaseOrdinalResult } from \"./use-buy-listing\"\n\n// ---------------------------------------------------------------------------\n// Variant definitions\n// ---------------------------------------------------------------------------\n\nexport const buyListingVariants = cva(\n \"group overflow-hidden transition-shadow hover:shadow-lg\",\n {\n variants: {\n size: {\n sm: \"max-w-[200px]\",\n default: \"\",\n lg: \"max-w-[400px]\",\n },\n },\n defaultVariants: {\n size: \"default\",\n },\n },\n)\n\nconst thumbnailVariants = cva(\n \"relative overflow-hidden bg-muted\",\n {\n variants: {\n size: {\n sm: \"aspect-square\",\n default: \"aspect-square\",\n lg: \"aspect-[4/3]\",\n },\n },\n defaultVariants: {\n size: \"default\",\n },\n },\n)\n\n// ---------------------------------------------------------------------------\n// Types\n// ---------------------------------------------------------------------------\n\nexport interface BuyListingUIProps\n extends VariantProps {\n /** Optional CSS class name */\n className?: string\n /** Name of the ordinal */\n name?: string\n /** Seller display name or address */\n seller?: string\n /** Content type (MIME type) for the thumbnail */\n contentType?: string\n /** Price in satoshis */\n price: number\n /** Thumbnail URL */\n thumbnailUrl: string\n /** Whether the thumbnail image failed to load */\n imgError: boolean\n /** Handle thumbnail image error */\n onImgError: () => void\n /** Marketplace fee in satoshis */\n marketFee: number\n /** Total cost in satoshis */\n totalCost: number\n /** Whether a purchase is in progress */\n isPurchasing: boolean\n /** Purchase result */\n result: PurchaseOrdinalResult | null\n /** Error message */\n error: string | null\n /** Execute the purchase */\n onPurchase: () => void\n /** Callback to handle external links (e.g. open in system browser from a WebView) */\n onExternalLink?: (url: string) => void\n}\n\n// ---------------------------------------------------------------------------\n// Helpers\n// ---------------------------------------------------------------------------\n\nfunction satsToBsv(sats: number): string {\n return (sats / 100000000).toFixed(8)\n}\n\nfunction formatPrice(sats: number): string {\n if (sats >= 100000000) {\n return `${satsToBsv(sats)} BSV`\n }\n if (sats >= 1000000) {\n return `${(sats / 1000000).toFixed(2)}M sats`\n }\n if (sats >= 1000) {\n return `${(sats / 1000).toFixed(1)}K sats`\n }\n return `${sats.toLocaleString()} sats`\n}\n\nfunction truncateAddress(address: string, chars = 6): string {\n if (address.length <= chars * 2 + 3) return address\n return `${address.slice(0, chars)}...${address.slice(-chars)}`\n}\n\n// ---------------------------------------------------------------------------\n// Component\n// ---------------------------------------------------------------------------\n\nexport function BuyListingUI({\n size = \"default\",\n className,\n name,\n seller,\n contentType,\n price,\n thumbnailUrl,\n imgError,\n onImgError,\n marketFee,\n totalCost,\n isPurchasing,\n result,\n error,\n onPurchase,\n onExternalLink,\n}: BuyListingUIProps) {\n return (\n \n {/* Thumbnail */}\n
\n {!imgError ? (\n \n ) : (\n
\n
\n \n

\n {contentType ?? \"Unknown type\"}\n

\n
\n
\n )}\n\n {/* Price badge */}\n \n {formatPrice(price)}\n \n
\n\n \n
\n

\n {name ?? \"Unnamed Ordinal\"}\n

\n {seller && (\n

\n Seller: {truncateAddress(seller)}\n

\n )}\n
\n \n\n \n {/* Cost breakdown */}\n
\n
\n Price\n {price.toLocaleString()} sats\n
\n {marketFee > 0 && (\n
\n Marketplace fee\n {marketFee.toLocaleString()} sats\n
\n )}\n {marketFee > 0 && (\n <>\n \n
\n Total\n {totalCost.toLocaleString()} sats\n
\n \n )}\n
\n\n {/* Success */}\n {result?.txid && (\n
\n \n
\n

Purchased

\n {onExternalLink ? (\n onExternalLink(`https://whatsonchain.com/tx/${result.txid}`)}\n className=\"inline-flex items-center gap-1 text-[10px] transition-colors hover:text-foreground\"\n >\n \n {result.txid}\n \n \n \n ) : (\n \n \n {result.txid}\n \n \n \n )}\n
\n
\n )}\n\n {/* Error */}\n {error && (\n
\n \n

{error}

\n
\n )}\n \n\n \n \n {isPurchasing ? (\n <>\n \n Purchasing...\n \n ) : result?.txid ? (\n <>\n \n Purchased\n \n ) : (\n <>\n \n Buy Now\n \n )}\n \n \n \n )\n}\n", "type": "registry:component", "target": "~/components/blocks/buy-listing/ui.tsx" }, { "path": "registry/new-york/blocks/buy-listing/use-buy-listing.ts", "content": "import { useCallback, useState } from \"react\"\n\n// ---------------------------------------------------------------------------\n// Types\n// ---------------------------------------------------------------------------\n\nexport interface PurchaseOrdinalParams {\n /** Outpoint of the listing to purchase */\n outpoint: string\n /** Marketplace address for fees (optional) */\n marketplaceAddress?: string\n /** Marketplace fee rate 0-1 (optional) */\n marketplaceRate?: number\n}\n\nexport interface PurchaseOrdinalResult {\n /** Transaction ID of the purchase */\n txid?: string\n /** Raw transaction hex */\n rawtx?: string\n /** Error message if purchase failed */\n error?: string\n}\n\nexport interface UseBuyListingOptions {\n /** Outpoint of the listing (txid.vout format) */\n outpoint: string\n /** Price in satoshis */\n price: number\n /** Callback to execute the purchase action */\n onPurchase: (params: PurchaseOrdinalParams) => Promise\n /** Callback on successful purchase */\n onPurchased?: (result: PurchaseOrdinalResult) => void\n /** Callback on error */\n onError?: (error: Error) => void\n /** Marketplace address for fees */\n marketplaceAddress?: string\n /** Marketplace fee rate 0-1 */\n marketplaceRate?: number\n}\n\nexport interface UseBuyListingReturn {\n /** Whether a purchase is in progress */\n isPurchasing: boolean\n /** Purchase result */\n result: PurchaseOrdinalResult | null\n /** Error message */\n error: string | null\n /** Whether the thumbnail image failed to load */\n imgError: boolean\n /** Mark the thumbnail as failed */\n setImgError: (failed: boolean) => void\n /** Marketplace fee in satoshis */\n marketFee: number\n /** Total cost in satoshis (price + marketplace fee) */\n totalCost: number\n /** Execute the purchase */\n handlePurchase: () => Promise\n}\n\n// ---------------------------------------------------------------------------\n// Hook\n// ---------------------------------------------------------------------------\n\nexport function useBuyListing({\n outpoint,\n price,\n onPurchase,\n onPurchased,\n onError,\n marketplaceAddress,\n marketplaceRate,\n}: UseBuyListingOptions): UseBuyListingReturn {\n const [isPurchasing, setIsPurchasing] = useState(false)\n const [result, setResult] = useState(null)\n const [error, setError] = useState(null)\n const [imgError, setImgError] = useState(false)\n\n const marketFee =\n marketplaceAddress && marketplaceRate\n ? Math.ceil(price * marketplaceRate)\n : 0\n const totalCost = price + marketFee\n\n const handlePurchase = useCallback(async () => {\n setIsPurchasing(true)\n setError(null)\n setResult(null)\n\n try {\n const purchaseResult = await onPurchase({\n outpoint,\n marketplaceAddress,\n marketplaceRate,\n })\n\n if (purchaseResult.error) {\n setError(purchaseResult.error)\n onError?.(new Error(purchaseResult.error))\n } else {\n setResult(purchaseResult)\n onPurchased?.(purchaseResult)\n }\n } catch (err) {\n const msg =\n err instanceof Error ? err.message : \"Purchase failed\"\n setError(msg)\n onError?.(err instanceof Error ? err : new Error(msg))\n } finally {\n setIsPurchasing(false)\n }\n }, [\n outpoint,\n marketplaceAddress,\n marketplaceRate,\n onPurchase,\n onPurchased,\n onError,\n ])\n\n return {\n isPurchasing,\n result,\n error,\n imgError,\n setImgError,\n marketFee,\n totalCost,\n handlePurchase,\n }\n}\n", "type": "registry:component", "target": "~/components/blocks/buy-listing/use-buy-listing.ts" } ], "type": "registry:block" }