​
Import

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

​
Usage

​
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.
import {
  useCreateListingModal,
  useCollectible,
  useBalanceOfCollectible,
} from "@0xsequence/marketplace-sdk/react";
import { useAccount } from "wagmi";
import type { Address } from "viem";
import type { OrderbookKind } from "@0xsequence/marketplace-sdk";

export default function BasicListingExample() {
  const { address: accountAddress } = useAccount();

  // Example values - replace with your own
  const chainId = 1; // Ethereum mainnet
  const collectionAddress =
    "0x1234567890123456789012345678901234567890" as Address;
  const collectibleId = "1";
  const orderbookKind = "sequence_marketplace_v2" as OrderbookKind;

  // 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 || "0"}</p>
        </div>
      )}

      <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