thirdwebDocs
GitHub

useBuyWithCryptoQuote

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>;
}
function useBuyWithCryptoQuote(
  queryParams?: BuyWithCryptoQuoteQueryOptions,
): UseQueryResult<BuyWithCryptoQuote>;

Parameters

object of type BuyWithCryptoQuoteQueryParams

Type

let params: {
  client: ThirdwebClient;
  fromAddress: string;
  fromChainId: number;
  fromTokenAddress: string;
  intentId?: string;
  maxSlippageBPS?: number;
  purchaseData?: object;
  toAddress: string;
  toChainId: number;
  toTokenAddress: string;
} & (
  | { fromAmount: string; toAmount?: never }
  | { fromAmount?: never; toAmount: string }
);

options to configure the react query

Type

let queryParams: BuyWithCryptoQuoteQueryOptions;

Returns

let returnType: UseQueryResult<BuyWithCryptoQuote>;

A React Query object which contains the data of type BuyWithCryptoQuote