> ## Documentation Index
> Fetch the complete documentation index at: https://frenglish.mintlify.site/llms.txt
> Use this file to discover all available pages before exploring further.

# Marketplace Actions

> The action hooks are essential for interacting with the Marketplace in your application. Useful for making listings, making offers, and performing buy and sell actions.

## useCreateListingModal

The useCreateListingModal hook is used to list an item for sale on the Marketplace. It provides the necessary functionality to create and manage a new listing.

```ts theme={null}
import { useCreateListingModal } from "@0xsequence/marketplace-sdk/react";

## Into your React component:

const { show: showListModal } = useCreateListingModal({ onError });

const onClickList = () => {
	showListModal({
		collectionAddress,
		chainId,
		collectibleId,
		orderbookKind,
	});
};

return <button onClick={onClickList}>List</button>
```

<ResponseField name="useCreateListingModal">
  <ResponseField name="* params" />

  <Expandable>
    ```ts theme={null}
    interface useCreateListingModal {
    	onSuccess?: ({ hash, orderId }: {
    	hash?: Hash; 
    		orderId?: string; 
    	}) => void;
    	onError?: (error: Error) => void;
    }
    ```
  </Expandable>

  <ResponseField name="* return properties" />

  <Expandable>
    <ResponseField name="show" type="(args: ShowCreateListingModalArgs) => void">
      ```ts theme={null}
      interface ShowCreateListingModalArgs {
      	collectionAddress: Hex;
      	chainId: string;
      	collectibleId: string;
      	orderbookKind?: OrderbookKind;
      	callbacks?: ModalCallbacks;
      }
      ```
    </ResponseField>

    <ResponseField name="close" type="() => void" />
  </Expandable>
</ResponseField>

## useBuyModal

The useBuyModal hook allows users to purchase an NFT that is listed for sale on the Marketplace. It handles the buying process and transaction execution.

```ts theme={null}
import { useBuyModal } from "@0xsequence/marketplace-sdk/react";

## Into your React component:

const { show: showBuyModal } = useBuyModal({
	onSuccess(hash) {
		console.log("Buy transaction sent with hash: ", hash);
	},
	onError,
});

const onClickBuy = () => {
	showBuyModal({
		chainId,
		collectionAddress,
		tokenId,
		order,
	});
};

return <button onClick={onClickBuy}>Buy</button>
```

<ResponseField name="useBuyModal">
  <ResponseField name="* params" />

  <Expandable>
    ```ts theme={null}
    interface useBuyModal {
    	onSuccess?: ({ hash, orderId }: {
    			hash?: Hash;
    			orderId?: string;
    	}) => void;
    	onError?: (error: Error) => void;
    }
    ```
  </Expandable>

  <ResponseField name="* return properties" />

  <Expandable>
    <ResponseField name="show" type="(args: ShowBuyModalArgs) => void">
      ```ts theme={null}
      interface ShowBuyModalArgs {
      	chainId: string;
      	collectionAddress: Hex;
      	tokenId: string;
      	order: Order;
      }
      ```
    </ResponseField>

    <ResponseField name="close" type="() => void" />
  </Expandable>
</ResponseField>

## useMakeOfferModal

The useMakeOfferModal hook enables users to place an offer on an NFT. It facilitates creating and submitting offers within the Marketplace.

```ts theme={null}
import { useMakeOfferModal } from "@0xsequence/marketplace-sdk/react";

## Into your React component:

const { show: showOfferModal } = useMakeOfferModal({
	onError,
});

const onClickOffer = () => {
	showOfferModal({
		collectionAddress,
		chainId,
		collectibleId,
		orderbookKind,
	});
};

return <button onClick={onClickOffer}>Make Offer</button>
```

<ResponseField name="useMakeOfferModal">
  <ResponseField name="* params" />

  <Expandable>
    ```ts theme={null}
    interface useMakeOfferModal {
    	onSuccess?: ({ hash, orderId }: {
    			hash?: Hash;
    			orderId?: string;
    	}) => void;
    	onError?: (error: Error) => void;
    }
    ```
  </Expandable>

  <ResponseField name="* return properties" />

  <Expandable>
    <ResponseField name="show" type="(args: ShowMakeOfferModalArgs) => void">
      ```ts theme={null}
      interface ShowMakeOfferModalArgs {
      	collectionAddress: Hex;
      	chainId: string;
      	collectibleId: string;
      	orderbookKind?: OrderbookKind;
      	callbacks?: ModalCallbacks;
      }
      ```
    </ResponseField>

    <ResponseField name="close" type="() => void" />
  </Expandable>
</ResponseField>

## useSellModal

The useSellModal hook is used to sell an NFT by accepting an existing offer. It provides the necessary functionality to complete the selling process.

```ts theme={null}
import { useSellModal } from "@0xsequence/marketplace-sdk/react";

## Into your React component:

const { show: showSellModal } = useSellModal({ onError });

const onAcceptOffer = () => {
	showSellModal({
		collectionAddress,
		chainId,
		tokenId,
		order,
	});
};

return <button onClick={onAcceptOffer}>Accept Offer</button>
```

<ResponseField name="useSellModal">
  <ResponseField name="* params" />

  <Expandable>
    ```ts theme={null}
    interface useSellModal {
    	onSuccess?: ({ hash, orderId }: {
    		hash?: Hash;
    		orderId?: string;
    	}) => void;
    	onError?: (error: Error) => void;
    }
    ```
  </Expandable>

  <ResponseField name="* return properties" />

  <Expandable>
    <ResponseField name="show" type="(args: ShowSellModalArgs) => void">
      ```ts theme={null}
      interface ShowSellModalArgs {
      	collectionAddress: Hex;
      	chainId: string;
      	tokenId: string;
      	order: Order;
      	callbacks?: ModalCallbacks;
      }
      ```
    </ResponseField>

    <ResponseField name="close" type="() => void" />
  </Expandable>
</ResponseField>