import {
  useSendTransaction,
  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,
  );
  const account = useActiveAccount();
 
  async function handleBuyWithCrypto() {
    // if approval is required
    if (buyWithCryptoQuoteQuery.data.approval) {
      const approveTx = await sendTransaction({
        account: account,
        transaction: 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({
      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>;
}