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>;
}