​
Import

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

​
Usage

Make sure you have followed the Getting Started guide to get the collection address and chainId.

​
Example

Example of implementing the make offer functionality using the useMakeOfferModal hook: 
export default function MakeOfferExample() {
  const { data: marketplaceConfig, isLoading: isMarketplaceConfigLoading } =
    useMarketplaceConfig();

  const collection = marketplaceConfig?.market.collections[0];
  const chainId = collection?.chainId as number;
  const collectionAddress = collection?.itemsAddress as Address;
  const collectibleId = '0';
  const orderbookKind = collection?.destinationMarketplace;

  const { show: showMakeOfferModal } = useMakeOfferModal({
    onSuccess: ({ hash }) => {
      console.log('Offer created successfully', { hash });
    },
    onError: (error) => {
      console.error('Failed to create offer:', error.message);
    },
  });

  const handleMakeOffer = () => {
    showMakeOfferModal({
      chainId,
      collectionAddress,
      collectibleId,
      orderbookKind, // Optional - defaults to sequence_marketplace_v2
    });
  };

  return (
    <div style={{ padding: '20px' }}>
      <h3>Make Offer</h3>

      <button
        type="button"
        onClick={handleMakeOffer}
        disabled={isMarketplaceConfigLoading}
      >
        Make Offer
      </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 offer is created successfully
callbacks.onError(error: Error) => voidOptional callback function called when an error occurs during offer creation
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: ShowMakeOfferModalArgs) => void
  close: () => void
}

​
Methods

​
show

(args: ShowMakeOfferModalArgs) => void Opens the make offer modal with the specified parameters. 
interface ShowMakeOfferModalArgs {
  collectionAddress: Address;
  chainId: number;
  collectibleId: string;
  orderbookKind?: OrderbookKind;
}
ParameterTypeDescription
collectionAddressAddressThe contract address of the NFT collection
chainIdnumberThe blockchain network chain ID where the collection exists
collectibleIdstringThe token ID of the specific collectible to make an offer on
orderbookKindOrderbookKindOptional. The marketplace orderbook to use (defaults to sequence_marketplace_v2)

​
OrderbookKind Values

You can import the OrderbookKind type from the marketplace SDK: 
import { OrderbookKind } from "@0xsequence/marketplace-sdk";

enum OrderbookKind {
  unknown = "unknown",
  sequence_marketplace_v1 = "sequence_marketplace_v1",
  sequence_marketplace_v2 = "sequence_marketplace_v2",
  blur = "blur",
  opensea = "opensea",
  looks_rare = "looks_rare",
}

​
close

() => void Closes the make offer modal.

​
Notes

The useMakeOfferModal hook provides a convenient way to manage the make offer modal interface for creating offers on collectibles. It handles:
  • Opening and closing the modal
  • Managing the offer creation flow state
  • Token approval for the offer currency (if required)
  • Error handling and success callbacks
  • Support for different marketplace orderbooks
  • Offer expiration date management (defaults to 7 days)
  • Currency selection and price input validation
The modal allows users to:
  • Select the offer price and currency
  • Set the offer quantity (for ERC-1155 tokens)
  • Choose an expiration date for the offer
  • Complete the necessary blockchain transactions (approval + offer creation)