thirdwebDocs
GitHub

useBuyWithFiatQuote

Hook to get a price quote for performing a "Buy with Fiat" transaction that allows users to buy a token with fiat currency.

The price quote is an object of type BuyWithFiatQuote. This quote contains the information about the purchase such as token amounts, processing fees, estimated time etc.

This hook is a React Query wrapper of the getBuyWithFiatQuote function. You can also use that function directly

Once you have the quote, you can open a new window with quote.onRampLink to allow the user to buy the token with fiat currency. and useBuyWithFiatStatus function to start polling for the status of this transaction.

Example

import { NATIVE_TOKEN_ADDRESS } from "thirdweb";
import { base } from "thirdweb/chains";
import { useBuyWithFiatQuote } from "thirdweb/react";
// get a quote for buying 0.01 base native token with USD fiat currency
function Example() {
const quote = useBuyWithFiatQuote({
client: client, // thirdweb client
fromCurrencySymbol: "USD", // fiat currency symbol
toChainId: base.id, // base chain id
toAmount: "0.01", // amount of token to buy
toTokenAddress: NATIVE_TOKEN_ADDRESS, // native token
toAddress: "0x...", // user's wallet address
});
return (
<div>
{quote.data && (
<a href={quote.data.onRampLink} target="_blank">
open onramp provider
</a>
)}
</div>
);
}
function useBuyWithFiatQuote(
queryOptions?: BuyWithFiatQuoteQueryOptions,
): UseQueryResult<BuyWithFiatQuote>;

Parameters

object of type GetBuyWithFiatQuoteParams

Type

let params: {
client: ThirdwebClient;
fromAddress: string;
fromAmount?: string;
fromCurrencySymbol: CurrencyMeta["shorthand"];
isTestMode?: boolean;
maxSlippageBPS?: number;
preferredProvider?: FiatProvider;
purchaseData?: object;
toAddress: string;
toAmount?: string;
toChainId: number;
toGasAmountWei?: string;
toTokenAddress: string;
};

Type

let queryOptions: BuyWithFiatQuoteQueryOptions;

Returns

let returnType: UseQueryResult<BuyWithFiatQuote>;

A React Query object which contains the data of type BuyWithFiatQuote