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.