Docs

useBuyWithCryptoQuote

Defined in thirdweb/src/react/core/hooks/pay/useBuyWithCryptoQuote.ts#L76

Hook to get a price quote for performing a "Buy with crypto" transaction that allows users to buy a token with another token - aka a swap.

The price quote is an object of type BuyWithCryptoQuote . This quote contains the information about the purchase such as token amounts, processing fees, estimated time etc.

This hook is a React Query wrapper of the getBuyWithCryptoQuote function. You can also use that function directly

Once you have the quote, you can use the useSendTransaction function to send the purchase and useBuyWithCryptoStatus function to get the status of the swap transaction.

Example

import {
  useBuyWithCryptoQuote,
  useBuyWithCryptoStatus,
  type BuyWithCryptoStatusQueryParams,
  useActiveAccount,
} from "thirdweb/react";
import { sendTransaction } from "thirdweb";
 
function Component() {
  const buyWithCryptoQuoteQuery = useBuyWithCryptoQuote(swapParams);
  const [buyTxHash, setBuyTxHash] = useState<
    BuyWithCryptoStatusQueryParams | undefined
  >();
  const buyWithCryptoStatusQuery = useBuyWithCryptoStatus(
    buyTxHash
      ? {
          client,
          transactionHash: buyTxHash,
        }
      : undefined,
  );
 
  async function handleBuyWithCrypto() {
    const account = useActiveAccount();
 
    // if approval is required
    if (buyWithCryptoQuoteQuery.data.approval) {
      const approveTx = await sendTransaction({
        transaction: swapQuote.data.approval,
        account: account,
      });
      await waitForApproval(approveTx);
    }
 
    // send the transaction to buy crypto
    // this promise is resolved when user confirms the transaction in the wallet and the transaction is sent to the blockchain
    const buyTx = await sendTransaction({
      transaction: swapQuote.data.transactionRequest,
      account: account,
    });
    await waitForApproval(buyTx);
 
    // set buyTx.transactionHash to poll the status of the swap transaction
    setBuyWithCryptoTx(buyTx.transactionHash);
  }
 
  return <button onClick={handleBuyWithCrypto}>Swap</button>;
}

Parameters

Returns

A React Query object which contains the data of type BuyWithCryptoQuote