Buywidget onramp visibility

packages/thirdweb/src/react/core/hooks/pay/useBuyWithFiatQuotesForProviders.ts

@@ -64,12 +64,16 @@
  */
 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 () => {

packages/thirdweb/src/react/web/ui/Bridge/BuyWidget.tsx

@@ -223,6 +223,20 @@
    * 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
+   * <BuyWidget
+   *   client={client}
+   *   chain={ethereum}
+   *   amount="0.1"
+   *   hiddenOnrampProviders={["transak"]}
+   * />
+   * ```
+   */
+  hiddenOnrampProviders?: ("coinbase" | "stripe" | "transak")[];
 };
 
 /**
@@ -395,6 +409,7 @@
             ? true
             : props.showThirdwebBranding
         }
+        hiddenOnrampProviders={props.hiddenOnrampProviders}
       />
     </BridgeWidgetContainer>
   );
@@ -558,6 +573,7 @@
         currency={props.currency}
         supportedTokens={props.supportedTokens}
         country={props.country}
+        hiddenOnrampProviders={props.hiddenOnrampProviders}
         // others
         destinationToken={screen.destinationToken}
         destinationAmount={screen.destinationAmount}

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
+     * <BridgeWidget
+     *   client={client}
+     *   buy={{ amount: "0.1", chainId: 8453, hiddenOnrampProviders: ["transak"] }}
+     * />
+     * ```
+     */
+    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",
             }}

packages/thirdweb/src/react/web/ui/Bridge/payment-selection/FiatProviderSelection.tsx

@@ -28,6 +28,7 @@
   toAmount?: string;
   currency?: SupportedFiatCurrency;
   country: string | undefined;
+  hiddenOnrampProviders?: ("coinbase" | "stripe" | "transak")[];
 }
 
 const PROVIDERS = [
@@ -60,17 +61,26 @@
   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 @@
         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) {

packages/thirdweb/src/react/web/ui/Bridge/payment-selection/PaymentSelection.tsx

@@ -90,6 +90,11 @@
   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 @@
   feePayer,
   currency,
   country,
+  hiddenOnrampProviders,
 }: PaymentSelectionProps) {
   const connectedWallets = useConnectedWallets();
   const activeWallet = useActiveWallet();
@@ -308,6 +314,7 @@
             toChainId={destinationToken.chainId}
             toTokenAddress={destinationToken.address}
             currency={currency}
+            hiddenOnrampProviders={hiddenOnrampProviders}
           />
         )}
       </Container>