Get Started

You can get a quote by using the useBuyWithCryptoQuote hook.

This hook takes an object with the following properties:

• client: The Thirdweb client instance.
• fromAddress: The address of the wallet initiating the transaction.
• toTokenAddress: The contract address of the destination token. This is the token the user wants to purchase.
• fromTokenAddress: The contract address of the source token. This is the token the user wants will use to purchase the destination token.
• fromChainId: The chain id of the source token.
• toChainId: The chain id of the destination token.
• toAmount: The amount of the token you to purchase.

import {
  NATIVE_TOKEN_ADDRESS,
  type BuyWithCryptoQuote,
  createThirdwebClient,
} from "thirdweb";
import {
  useBuyWithCryptoQuote,
  useActiveAccount,
  useSendTransaction,
} from "thirdweb/react";
 
const client = createThirdwebClient({
  clientId: "YOUR_CLIENT_ID",
});
 
// Buy 2 USDC token on Optimism mainnet from Ethereum mainnet native token
 
function Example() {
  const account = useActiveAccount();
 
  if (!account) {
    return <div> Wallet not connected </div>;
  }
 
  return <GetQuoteExample address={account.address} />;
}
 
function GetQuoteExample(props: { address: string }) {
  const quoteQuery = useBuyWithCryptoQuote({
    client: client,
    toAmount: "2", // 2 USDC
    toTokenAddress: "0x0b2C639c533813f4Aa9D7837CAf62653d097Ff85", // USDC token on Optimism mainnet
    toChainId: 10, // Optimism mainnet
    fromChainId: 1, // Ethereum mainnet
    fromTokenAddress: NATIVE_TOKEN_ADDRESS, // native token
    fromAddress: props.address, // wallet address
  });
 
  if (quoteQuery.isError) {
    console.error(quoteQuery.error);
    return <div> failed to get a quote </div>;
  }
 
  if (!quoteQuery.data) {
    return <div>Loading...</div>;
  }
 
  console.log(quoteQuery.data);
 
  // See next code snippet for this component
  return <BuyCrypto quote={quoteQuery.data} />;
}

Once you've received a quote, you can execute a buy transaction by using the useSendTransaction hook and then waiting for the transaction to be confirmed using the waitForReceipt function.

Note that buys with non-native (ERC20) tokens requires executing an approval transaction before executing the buy transaction as shown in the example below.

import { useSendTransaction } from "thirdweb/react";
import { type BuyWithCryptoQuote, waitForReceipt } from "thirdweb";
 
function BuyCrypto(props: { quote: BuyWithCryptoQuote }) {
  const quote = props.quote;
  const sendTransactionMutation = useSendTransaction();
  const [txHash, setTxHash] = useState<string | undefined>();
 
  async function handleBuy() {
    // if approval is required
    if (quote.approval) {
      // send the approval transaction
      const tx = await sendTransactionMutation.mutateAsync(
        quote.approval,
      );
      // wait for the transaction to be confirmed
      await waitForReceipt(tx);
    }
 
    // send the transaction to buy crypto
    const tx = await sendTransactionMutation.mutateAsync(
      quote.transactionRequest,
    );
 
    const receipt = await waitForReceipt(tx);
 
    setTxHash(receipt.transactionHash);
  }
 
  return (
    <div>
      <button onClick={handleBuy}>Buy</button>
      {/* See next code snippet for DisplayTxStatus code  */}
      {txHash && <DisplayTxStatus txHash={txHash} />}
    </div>
  );
}

Once you've submitted the transaction, you can listen to a transaction's status using the useBuyWithCryptoStatus hook.

import { useBuyWithCryptoStatus } from "thirdweb/react";
 
function DisplayTxStatus(props: { txHash: string }) {
  const statusQuery = useBuyWithCryptoStatus({
    transactionHash: props.txHash,
    client: client,
  });
 
  if (statusQuery.data) {
    return <div> {statusQuery.data.status} </div>;
  }
 
  return <div> Loading... </div>;
}

Now that you've set up Buy With Crypto, you can configure a recipient address to earn on every user transaction.