useMakeOffer

Hook for placing an offer on a Marketplace direct listing.

import { useMakeOffer } from "@thirdweb-dev/react";

const { mutateAsync, isLoading, error } = useMakeOffer(contract);

Usage

Provide your Marketplace contract instance from the useContract hook as the argument.

Then, provide the listingId, pricePerToken, and quantity to the mutation.

import { useMakeOffer, useContract, Web3Button } from "@thirdweb-dev/react";

// Your smart contract address
const contractAddress = "{{contract_address}}";

function App() {
  const { contract } = useContract(contractAddress, "marketplace");
  const { mutateAsync: makeOffer, isLoading, error } = useMakeOffer(contract);

  return (
    <Web3Button
      contractAddress={contractAddress}
      action={() =>
        makeOffer({
          listingId: 1, // ID of the listing to make an offer on
          pricePerToken: 1, // Price per token to offer (in the listing's currency)
          quantity: 1, // Number of NFTs you want to buy (used for ERC1155 NFTs)
        })
      }
    >
      Make Bid
    </Web3Button>
  );
}

Configuration

listingId

listingId (required)

The ID of the listing to make an offer on.

If the listing cannot be found, is not a direct listing, or is not active, the error property will be set.

import { useMakeOffer, useContract, Web3Button } from "@thirdweb-dev/react";

// Your smart contract address
const contractAddress = "{{contract_address}}";

const listingId = "{{listing_id}}";

function App() {
  const { contract } = useContract(contractAddress, "marketplace");
  const { mutateAsync: makeOffer, isLoading, error } = useMakeOffer(contract);

  return (
    <Web3Button
      contractAddress={contractAddress}
      action={() =>
        makeOffer({
          listingId: listingId, // ID of the listing to make an offer on
          pricePerToken: 1,
          quantity: 1,
        })
      }
    >
      Make Bid
    </Web3Button>
  );
}

pricePerToken

pricePerToken (required)

The price to offer per token.

• For ERC1155, this is the price to offer per quantity of the NFT (see quantity below).
• For ERC721, this is the price to offer to buy the NFT.

import { useMakeOffer, useContract, Web3Button } from "@thirdweb-dev/react";

// Your smart contract address
const contractAddress = "{{contract_address}}";

const pricePerToken = "{{price_per_token}}";

function App() {
  const { contract } = useContract(contractAddress, "marketplace");
  const { mutateAsync: makeOffer, isLoading, error } = useMakeOffer(contract);

  return (
    <Web3Button
      contractAddress={contractAddress}
      action={() =>
        makeOffer({
          listingId: 1,
          pricePerToken: pricePerToken, // Price per token to offer (in the listing's currency)
          quantity: 1,
        })
      }
    >
      Make Bid
    </Web3Button>
  );
}

quantity

quantity (optional)

Used for ERC1155 NFTs, where multiple quantity of the same NFT can be bought at once.

This field works with the pricePerToken field to calculate the total price of the offer. For example, if you want to buy 5 NFTs at a price of 1 ETH each, you would set pricePerToken to 1 and quantity to 5, for a total of 5 ETH as the offer.

For ERC721 NFTs, this value is ignored and 1 is used instead.

The default value is 1.

import { useMakeOffer, useContract, Web3Button } from "@thirdweb-dev/react";

// Your smart contract address
const contractAddress = "{{contract_address}}";

function App() {
  const { contract } = useContract(contractAddress, "marketplace");
  const { mutateAsync: makeOffer, isLoading, error } = useMakeOffer(contract);

  return (
    <Web3Button
      contractAddress={contractAddress}
      action={() =>
        makeOffer({
          listingId: 1, // ID of the listing to make an offer on
          pricePerToken: 1, // Price per token to offer (in the listing's currency)
          quantity: 1, // Number of NFTs you want to buy (used for ERC1155 NFTs)
        })
      }
    >
      Make Bid
    </Web3Button>
  );
}