​
Import

import { useBuyModal } from "@0xsequence/marketplace-sdk/react";

​
Usage

​
Examples

Example of implementing a market purchase (secondary sales) using the useBuyModal hook:
This example uses the useLowestListing hook from marketplace-sdk. If there is no lowestListing with the given parameters, it means there is no orderId available, and therefore the item cannot be bought.
import type { MarketplaceKind } from "@0xsequence/marketplace-sdk";
import {
  useBuyModal,
  useLowestListing,
} from "@0xsequence/marketplace-sdk/react";
import type { Address } from "viem";

export default function MarketPurchaseExample() {
  const {
    data: lowestListing,
    isLoading: isLoadingLowestListing,
    isError: isErrorLowestListing,
  } = useLowestListing({
    collectionAddress: "0x1234567890123456789012345678901234567890" as Address // Replace with your collection address
    chainId: 1 // Replace with your chain id
    tokenId: "1", // Replace with your token id
  });
  const chainId = lowestListing?.chainId as number;
  const collectionAddress = lowestListing?.collectionContractAddress as Address;
  const tokenId = lowestListing?.tokenId as string;
  const orderId = lowestListing?.orderId as string;
  const marketplace = lowestListing?.marketplace as MarketplaceKind;
  const priceUSDFormatted = lowestListing?.priceUSDFormatted as string;

const { show: showMarketModal } = useBuyModal({
onSuccess: ({ hash, orderId }) => {
console.log("Market purchase successful", { hash, orderId });
},
onError: (error) => {
console.error("Market purchase failed:", error.message);
},
});

const handleMarketBuy = () => {
if (!lowestListing || isLoadingLowestListing) return;

    showMarketModal({
      chainId,
      collectionAddress,
      collectibleId: tokenId,
      orderId,
      marketplace,
    });

};

return (

<div style={{ padding: "20px" }}>
<h3>Market Purchase</h3>

      <p>Price: ${priceUSDFormatted}</p>

      <button
        onClick={handleMarketBuy}
        disabled={isLoadingLowestListing || isErrorLowestListing}
      >
        Buy from Market
      </button>
    </div>

);
}

​
Parameters

The hook accepts an optional callbacks object with the following properties: 
interface ModalCallbacks {
  onSuccess?: ({ hash, orderId }: { hash?: Hash; orderId?: string }) => void;
  onError?: (error: Error) => void;
  successActionButtons?: Array<{ label: string; action: () => void }>;
}
ParameterTypeDescription
callbacks.onSuccess({ hash, orderId }: { hash?: Hash; orderId?: string }) => voidOptional callback function called when the purchase is successful
callbacks.onError(error: Error) => voidOptional callback function called when an error occurs during the purchase
callbacks.successActionButtonsArray<{ label: string; action: () => void }>Optional array of action buttons to show on success

​
Return Type

The hook returns an object with the following methods: 
{
  show: (args: BuyModalProps) => void
  close: () => void
}

​
Methods

​
show

(args: BuyModalProps) => void Opens the buy modal with the specified parameters. The BuyModalProps can be either ShopBuyModalProps or MarketplaceBuyModalProps depending on the purchase type. For market purchases (Secondary sales): 
interface MarketplaceBuyModalProps extends BuyModalBaseProps {
  marketplaceType?: "market";
  collectibleId: string;
  marketplace: MarketplaceKind;
  orderId: string;
}
For shop purchases (Primary sales): 
interface ShopBuyModalProps extends BuyModalBaseProps {
  marketplaceType: "shop";
  salesContractAddress: Address;
  items: Array<Partial<CheckoutOptionsItem> & { tokenId?: string }>;
  quantityDecimals: number;
  quantityRemaining: number;
  salePrice: {
    amount: string;
    currencyAddress: Address;
  };
  unlimitedSupply?: boolean;
}
Both types extend from BuyModalBaseProps: 
interface BuyModalBaseProps {
  chainId: number;
  collectionAddress: Address;
  skipNativeBalanceCheck?: boolean;
  nativeTokenAddress?: Address;
  marketplaceType?: MarketplaceType;
  customCreditCardProviderCallback?: (buyStep: Step) => void;
  successActionButtons?: Array<{ label: string; action: () => void }>;
}

​
close

() => void Closes the buy modal.

​
Notes

The useBuyModal hook provides a convenient way to manage the buy modal interface for collectible purchases. It handles:
  • Opening and closing the modal
  • Managing the purchase flow state
  • Error handling and success callbacks
  • Support for both primary and secondary sales