Docs

useBuyWithCryptoQuote

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

Hook to get a quote of type BuyWithCryptoQuote for buying tokens with crypto. 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 {
  useSendTransaction,
  useBuyWithCryptoQuote,
  useBuyWithCryptoStatus,
  type BuyWithCryptoStatusQueryParams,
} from "thirdweb/react";
 
function Component() {
  const buyWithCryptoQuoteQuery = useBuyWithCryptoQuote(swapParams);
  const sendTransactionMutation = useSendTransaction();
  const [buyTxHash, setBuyTxHash] = useState<
    BuyWithCryptoStatusQueryParams | undefined
  >();
  const buyWithCryptoStatusQuery = useBuyWithCryptoStatus(
    buyTxHash
      ? {
          client,
          transactionHash: buyTxHash,
        }
      : undefined,
  );
 
  async function handleBuyWithCrypto() {
    // if approval is required
    if (buyWithCryptoQuoteQuery.data.approval) {
      const approveTx = await sendTransactionMutation.mutateAsync(
        swapQuote.data.approval,
      );
      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 sendTransactionMutation.mutateAsync(
      swapQuote.data.transactionRequest,
    );
    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