useBuyNow

Hook for buying a listing on a marketplace smart contract.

If the listing is in a currency that is not native to the chain (e.g. not Ether on Ethereum), the hook will prompt the user to approve the marketplace contract to spend the currency on their behalf before performing the buy.

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

Usage

Provide your marketplace contract as the argument.

import { useBuyNow, useContract, Web3Button } from "@thirdweb-dev/react";
import { ListingType } from "@thirdweb-dev/sdk";

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

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

  return (
    <Web3Button
      contractAddress={contractAddress}
      action={() =>
        buyNow({
          id: "{{listing_id}}", // ID of the listing to buy
          type: ListingType.Direct, // Direct or Auction
          buyAmount: "{{buy_amount}}", // Amount to buy
          buyForWallet: "{{wallet_address}}", // Wallet to buy for, defaults to current wallet
        })
      }
    >
      Buy Now
    </Web3Button>
  );
}

Configuration

id

The ID of the listing you want to buy.

import { useBuyNow, useContract, Web3Button } from "@thirdweb-dev/react";
import { ListingType } from "@thirdweb-dev/sdk";

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

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

  return (
    <Web3Button
      contractAddress={contractAddress}
      action={() =>
        buyNow({
          id: "{{listing_id}}", // ID of the listing to buy
          type: ListingType.Direct, // Direct or Auction
          buyAmount: "{{buy_amount}}",
        })
      }
    >
      Buy Now
    </Web3Button>
  );
}

type

The type of listing you want to buy.

Valid values are Direct or Auction.

import { useBuyNow, useContract, Web3Button } from "@thirdweb-dev/react";
import { ListingType } from "@thirdweb-dev/sdk";

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

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

  return (
    <Web3Button
      contractAddress={contractAddress}
      action={() =>
        buyNow({
          id: "{{listing_id}}",
          type: ListingType.Direct, // Direct or Auction
          buyAmount: "{{buy_amount}}",
        })
      }
    >
      Buy Now
    </Web3Button>
  );
}

buyAmount

The amount of tokens you want to buy.

import { useBuyNow, useContract, Web3Button } from "@thirdweb-dev/react";
import { ListingType } from "@thirdweb-dev/sdk";

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

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

  return (
    <Web3Button
      contractAddress={contractAddress}
      action={() =>
        buyNow({
          id: "{{listing_id}}",
          type: ListingType.Direct, // Direct or Auction
          buyAmount: "{{buy_amount}}", // Amount to buy
        })
      }
    >
      Buy Now
    </Web3Button>
  );
}

buyForWallet

Optionally, specify a different wallet address to buy the listing for.

import {
  useBuyNow,
  useContract,
  Web3Button,
  useAddress,
} from "@thirdweb-dev/react";
import { ListingType } from "@thirdweb-dev/sdk";

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

function App() {
  const address = useAddress();
  const { contract } = useContract(contractAddress, "marketplace");
  const { mutateAsync: buyNow, isLoading, error } = useBuyNow(contract);

  return (
    <Web3Button
      contractAddress={contractAddress}
      action={() =>
        buyNow({
          id: "{{listing_id}}",
          type: ListingType.Direct, // Direct or Auction
          buyAmount: "{{buy_amount}}",
          buyForWallet: address, // Wallet to buy for, defaults to current wallet
        })
      }
    >
      Buy Now
    </Web3Button>
  );
}