Docs

Get Started

Learn how to get a quote and send crypto purchase transactions.

Using the Connect UI

Buy With Crypto comes by default with our ConnectButton React component.

You can simply add the ConnectButton component to your React app. Connect handles everything including connecting the user to various wallets, sending & receiving tokens, and buying with crypto.

Using the SDK

There are 3 main steps to perform a Buy With Crypto transaction:

  • Get a price quote for the transaction
  • Execute the transaction with users connected wallet
  • Wait for the transaction to be confirmed by polling the status of the transaction

Install thirdweb

npm install thirdweb

Create a client

A client is required to use thirdweb SDK. Refer to this guide to learn how to create a client.

  • Get a Buy Quote

    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} />;
    }
  • Send a Transaction

    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>
    );
    }
  • Listening to Transaction Status

    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>;
    }
  • Set Up Fee Sharing

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