thirdwebDocs
GitHub

useBuyWithCryptoQuote

Defined in

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 useBuyWithCryptoStatus function to get the status of the swap transaction.

Example

import { useSigner, useBuyWithCryptoQuote, useBuyWithCryptoStatus } from "@thirdweb-dev/react";
 
function Component() {
  const buyWithCryptoQuoteQuery = useBuyWithCryptoQuote* (swapParams);
  const signer = useSigner();
  const [buyTxHash, setBuyTxHash] = useState<string | undefined>();
  const buyWithCryptoStatusQuery = useBuyWithCryptoStatus* (buyTxHash ? {
    clientId: "YOUR_CLIENT_ID",
    transactionHash: buyTxHash,
  }: undefined);
 
  async function handleBuyWithCrypto() {
    if (!buyWithCryptoQuoteQuery.data || !signer) {
      return;
    }
 
    // if approval is required
    if (buyWithCryptoQuoteQuery.data.approval) {
      const approveTx = await signer.sendTransaction* (buyWithCryptoQuoteQuery.data.approval);
      await approveTx.wait();
    }
 
    // 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 signer.sendTransaction* (buyWithCryptoQuoteQuery.data.transactionRequest);
    await buyTx.wait();
 
    // set buyTx.hash to poll the status of the swap * transaction
    setBuyTxHash(buyTx.hash);
  }
 
  if (buyWithCryptoStatusQuery.data) {
    console.log('buyWithCryptoStatusQuery.data', * buyWithCryptoStatusQuery.data)
  }
    return <button onClick={handleBuyWithCrypto}>Swap</button>
 }
function useBuyWithCryptoQuote(
  queryParams?: BuyWithCryptoQuoteQueryOptions,
): UseQueryResult<BuyWithCryptoQuote>;

Parameters

object of type GetBuyWithCryptoQuoteParams

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