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