diff --git a/packages/thirdweb/src/react/core/hooks/pay/useBuyWithFiatQuotesForProviders.ts b/packages/thirdweb/src/react/core/hooks/pay/useBuyWithFiatQuotesForProviders.ts index 62cec3c4558..3f858205a99 100644 --- a/packages/thirdweb/src/react/core/hooks/pay/useBuyWithFiatQuotesForProviders.ts +++ b/packages/thirdweb/src/react/core/hooks/pay/useBuyWithFiatQuotesForProviders.ts @@ -64,12 +64,16 @@ type UseBuyWithFiatQuotesForProvidersResult = { */ export function useBuyWithFiatQuotesForProviders( params?: UseBuyWithFiatQuotesForProvidersParams, + providers?: ("coinbase" | "stripe" | "transak")[], queryOptions?: OnrampQuoteQueryOptions, ): UseBuyWithFiatQuotesForProvidersResult { - const providers = ["coinbase", "stripe", "transak"] as const; + const providersToQuery = + providers && providers.length > 0 + ? providers + : (["coinbase", "stripe", "transak"] as const); const queries = useQueries({ - queries: providers.map((provider) => ({ + queries: providersToQuery.map((provider) => ({ ...queryOptions, enabled: !!params, queryFn: async () => { diff --git a/packages/thirdweb/src/react/web/ui/Bridge/BuyWidget.tsx b/packages/thirdweb/src/react/web/ui/Bridge/BuyWidget.tsx index 6f4be0889fb..decd06e5101 100644 --- a/packages/thirdweb/src/react/web/ui/Bridge/BuyWidget.tsx +++ b/packages/thirdweb/src/react/web/ui/Bridge/BuyWidget.tsx @@ -223,6 +223,20 @@ export type BuyWidgetProps = { * By default the token selection is editable. Set this to false to disable editing the token selection. */ tokenEditable?: boolean; + + /** + * Array of onramp provider IDs to hide from the payment provider selection. + * @example + * ```tsx + * + * ``` + */ + hiddenOnrampProviders?: ("coinbase" | "stripe" | "transak")[]; }; /** @@ -395,6 +409,7 @@ export function BuyWidget(props: BuyWidgetProps) { ? true : props.showThirdwebBranding } + hiddenOnrampProviders={props.hiddenOnrampProviders} /> ); @@ -558,6 +573,7 @@ function BridgeWidgetContent( currency={props.currency} supportedTokens={props.supportedTokens} country={props.country} + hiddenOnrampProviders={props.hiddenOnrampProviders} // others destinationToken={screen.destinationToken} destinationAmount={screen.destinationAmount} diff --git a/packages/thirdweb/src/react/web/ui/Bridge/bridge-widget/bridge-widget.tsx b/packages/thirdweb/src/react/web/ui/Bridge/bridge-widget/bridge-widget.tsx index d8aca486f9f..5ba533e3b23 100644 --- a/packages/thirdweb/src/react/web/ui/Bridge/bridge-widget/bridge-widget.tsx +++ b/packages/thirdweb/src/react/web/ui/Bridge/bridge-widget/bridge-widget.tsx @@ -197,6 +197,17 @@ export type BridgeWidgetProps = { presetOptions?: [number, number, number]; /** Arbitrary data to be included in returned status and webhook events. */ purchaseData?: PurchaseData; + /** + * Array of onramp provider IDs to hide from the payment provider selection. + * @example + * ```tsx + * + * ``` + */ + hiddenOnrampProviders?: ("coinbase" | "stripe" | "transak")[]; }; connectOptions?: { @@ -444,6 +455,7 @@ export function BridgeWidget(props: BridgeWidgetProps) { purchaseData={props.buy?.purchaseData} paymentMethods={["card"]} connectOptions={props.connectOptions} + hiddenOnrampProviders={props.buy?.hiddenOnrampProviders} style={{ border: "none", }} diff --git a/packages/thirdweb/src/react/web/ui/Bridge/payment-selection/FiatProviderSelection.tsx b/packages/thirdweb/src/react/web/ui/Bridge/payment-selection/FiatProviderSelection.tsx index 1cbe3040fb0..f4546d31020 100644 --- a/packages/thirdweb/src/react/web/ui/Bridge/payment-selection/FiatProviderSelection.tsx +++ b/packages/thirdweb/src/react/web/ui/Bridge/payment-selection/FiatProviderSelection.tsx @@ -28,6 +28,7 @@ interface FiatProviderSelectionProps { toAmount?: string; currency?: SupportedFiatCurrency; country: string | undefined; + hiddenOnrampProviders?: ("coinbase" | "stripe" | "transak")[]; } const PROVIDERS = [ @@ -60,17 +61,26 @@ export function FiatProviderSelection({ toAmount, currency, country, + hiddenOnrampProviders, }: FiatProviderSelectionProps) { - // Fetch quotes for all providers - const quoteQueries = useBuyWithFiatQuotesForProviders({ - amount: toAmount || "0", - chainId: toChainId, - client, - currency: currency || "USD", - receiver: checksumAddress(toAddress), - tokenAddress: checksumAddress(toTokenAddress), - country, - }); + const visibleProviders = useMemo(() => { + return PROVIDERS.filter( + (provider) => !hiddenOnrampProviders?.includes(provider.id), + ); + }, [hiddenOnrampProviders]); + + const quoteQueries = useBuyWithFiatQuotesForProviders( + { + amount: toAmount || "0", + chainId: toChainId, + client, + currency: currency || "USD", + receiver: checksumAddress(toAddress), + tokenAddress: checksumAddress(toTokenAddress), + country, + }, + visibleProviders.map((p) => p.id), + ); const quotes = useMemo(() => { return quoteQueries.map((q) => q.data).filter((q) => !!q); @@ -106,7 +116,7 @@ export function FiatProviderSelection({ quotes .sort((a, b) => a.currencyAmount - b.currencyAmount) .map((quote) => { - const provider = PROVIDERS.find( + const provider = visibleProviders.find( (p) => p.id === quote.intent.onramp, ); if (!provider) { diff --git a/packages/thirdweb/src/react/web/ui/Bridge/payment-selection/PaymentSelection.tsx b/packages/thirdweb/src/react/web/ui/Bridge/payment-selection/PaymentSelection.tsx index 6f85d72654f..b70e8af161c 100644 --- a/packages/thirdweb/src/react/web/ui/Bridge/payment-selection/PaymentSelection.tsx +++ b/packages/thirdweb/src/react/web/ui/Bridge/payment-selection/PaymentSelection.tsx @@ -90,6 +90,11 @@ type PaymentSelectionProps = { country: string | undefined; supportedTokens: SupportedTokens | undefined; + + /** + * Array of onramp provider IDs to hide from the payment provider selection. + */ + hiddenOnrampProviders?: ("coinbase" | "stripe" | "transak")[]; }; type Step = @@ -113,6 +118,7 @@ export function PaymentSelection({ feePayer, currency, country, + hiddenOnrampProviders, }: PaymentSelectionProps) { const connectedWallets = useConnectedWallets(); const activeWallet = useActiveWallet(); @@ -308,6 +314,7 @@ export function PaymentSelection({ toChainId={destinationToken.chainId} toTokenAddress={destinationToken.address} currency={currency} + hiddenOnrampProviders={hiddenOnrampProviders} /> )}