​
Import

import { useCreateListingModal } from "@0xsequence/marketplace-sdk/react";
Create Listing Modal

​
Usage

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

​
Examples

Example of implementing a basic listing creation using the useCreateListingModal hook:
This example uses the useCollectible and useBalanceOfCollectible hooks from marketplace-sdk to verify ownership and get collectible details.
export default function BasicListingExample() {
  const { address: accountAddress } = useAccount();
  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 = OrderbookKind.sequence_marketplace_v2;

  // Get collectible metadata
  const {
    data: collectible,
    isLoading: isLoadingCollectible,
    isError: isErrorCollectible,
  } = useCollectible({
    chainId,
    collectionAddress,
    collectibleId,
  });

  // Check if user owns the collectible
  const {
    data: balance,
    isLoading: isLoadingBalance,
    isError: isErrorBalance,
  } = useBalanceOfCollectible({
    collectionAddress,
    collectableId: collectibleId,
    userAddress: accountAddress as Address,
    chainId,
    query: {
      enabled: !!accountAddress,
    },
  });

  const { show: showCreateListingModal } = useCreateListingModal({
    onSuccess: ({ hash, orderId }) => {
      console.log('Listing created successfully', { hash, orderId });
    },
    onError: (error) => {
      console.error('Listing creation failed:', error.message);
    },
  });

  const handleCreateListing = () => {
    if (!collectible || !balance || Number(balance) === 0) return;

    showCreateListingModal({
      chainId,
      collectionAddress,
      collectibleId,
      orderbookKind,
    });
  };

  const isOwner = balance && Number(balance) > 0;
  const isLoading = isLoadingCollectible || isLoadingBalance;
  const hasError = isErrorCollectible || isErrorBalance;

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

      {collectible && (
        <div style={{ marginBottom: '16px' }}>
          <p>Name: {collectible.name}</p>
          <p>Collectible ID: {collectibleId}</p>
          <p>Owned: {balance?.balance || '0'}</p>
        </div>
      )}

      <button
        type="button"
        onClick={handleCreateListing}
        disabled={isLoading || hasError || !isOwner || !accountAddress}
        style={{
          backgroundColor: isOwner ? '#007bff' : '#6c757d',
          color: 'white',
          border: 'none',
          padding: '12px 24px',
          borderRadius: '8px',
          cursor: isOwner ? 'pointer' : 'not-allowed',
        }}
      >
        {isLoading
          ? 'Loading...'
          : !accountAddress
            ? 'Connect Wallet'
            : !isOwner
              ? "You don't own this collectible"
              : 'Create Listing'}
      </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 listing is created successfully
callbacks.onError(error: Error) => voidOptional callback function called when an error occurs during listing 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: ShowCreateListingModalArgs) => void
  close: () => void
}

​
Methods

​
show

(args: ShowCreateListingModalArgs) => void Opens the create listing modal with the specified parameters. 
interface ShowCreateListingModalArgs {
  collectionAddress: Address;
  chainId: number;
  collectibleId: string;
  orderbookKind?: OrderbookKind;
}
ParameterTypeRequiredDescription
collectionAddressAddressYesThe contract address of the collection
chainIdnumberYesThe blockchain network ID (e.g., 1 for Ethereum, 137 for Polygon)
collectibleIdstringYesThe collectible ID of the collectible to list
orderbookKindOrderbookKindNoThe orderbook type to use (defaults to sequence_marketplace_v2)

​
close

() => void Closes the create listing modal.

​
Notes

The useCreateListingModal hook provides a convenient way to manage the create listing modal interface for collectible sales. It handles:
  • Opening and closing the modal
  • Managing the listing creation flow state
  • Price and quantity input validation
  • Expiration date selection
  • Error handling and success callbacks
  • Transaction approval and execution steps
  • Support for different orderbook types

​
Prerequisites

Before using this hook, ensure:
  1. User Authentication: The user must be connected with a wallet
  2. Ownership Verification: Use hooks like useBalanceOfCollectible to verify the user owns the collectible
  3. Collectible Data: Use useCollectible to get metadata for the collectible being listed
  4. Network Configuration: Ensure the marketplace is configured for the target chain