feat: introduce supportedProviders option for fiat onramping

Author: RobbyUitbeijerse

packages/thirdweb/src/react/core/hooks/connection/ConnectButtonProps.ts

@@ -98,6 +98,7 @@ export type PayUIOptions = Prettify<
             currency?: CurrencyMeta["shorthand"];
           };
           preferredProvider?: FiatProvider;
+          supportedProviders?: FiatProvider[];
         }
       | false;
 

packages/thirdweb/src/react/web/ui/ConnectWallet/screens/Buy/fiat/FiatScreenContent.tsx

@@ -4,7 +4,10 @@ import { trackPayEvent } from "../../../../../../../analytics/track/pay.js";
 import type { Chain } from "../../../../../../../chains/types.js";
 import type { ThirdwebClient } from "../../../../../../../client/client.js";
 import { NATIVE_TOKEN_ADDRESS } from "../../../../../../../constants/addresses.js";
-import type { FiatProvider } from "../../../../../../../pay/utils/commonTypes.js";
+import {
+  type FiatProvider,
+  FiatProviders,
+} from "../../../../../../../pay/utils/commonTypes.js";
 import {
   type Theme,
   iconSize,
@@ -84,6 +87,15 @@ export function FiatScreenContent(props: {
       : undefined,
   );
 
+  const supportedProviders =
+    buyWithFiatOptions !== false
+      ? !!buyWithFiatOptions?.supportedProviders?.length &&
+        (!preferredProvider ||
+          buyWithFiatOptions.supportedProviders.includes(preferredProvider))
+        ? buyWithFiatOptions?.supportedProviders
+        : [...FiatProviders]
+      : [];
+
   const fiatQuoteQuery = useBuyWithFiatQuote(
     buyWithFiatOptions !== false && tokenAmount
       ? {
@@ -159,6 +171,7 @@ export function FiatScreenContent(props: {
                 </Text>
                 <Spacer y="lg" />
                 <Providers
+                  supportedProviders={supportedProviders}
                   preferredProvider={
                     preferredProvider || fiatQuoteQuery.data?.provider
                   }

packages/thirdweb/src/react/web/ui/ConnectWallet/screens/Buy/fiat/Providers.tsx

@@ -1,14 +1,14 @@
-import {
-  type FiatProvider,
-  FiatProviders,
-} from "../../../../../../../pay/utils/commonTypes.js";
+import { type FiatProvider } from "../../../../../../../pay/utils/commonTypes.js";
 import { Container } from "../../../../components/basic.js";
 import { Button } from "../../../../components/buttons.js";
-import { Link } from "../../../../components/text.js";
+import { Link, Text } from "../../../../components/text.js";
+import { uppercaseFirstLetter } from "../utils.js";
 /**
  * @internal
  */
+
 export function Providers(props: {
+  supportedProviders: FiatProvider[];
   preferredProvider?: FiatProvider;
   onSelect: (provider: FiatProvider) => void;
 }) {
@@ -21,7 +21,7 @@ export function Providers(props: {
         alignItems: "flex-start",
       }}
     >
-      {FiatProviders.map((provider) => {
+      {props.supportedProviders.map((provider) => {
         return (
           <Container
             key={provider}
@@ -31,24 +31,29 @@ export function Providers(props: {
               justifyContent: "space-between",
             }}
           >
-            <Button
-              fullWidth
-              onClick={() => props.onSelect(provider)}
-              variant={"link"}
-            >
-              <Link
-                color={
-                  props.preferredProvider === provider
-                    ? "primaryText"
-                    : "secondaryText"
-                }
-                size="sm"
-                hoverColor="primaryText"
+            {!!props.supportedProviders.length ? (
+              <Button
+                fullWidth
+                onClick={() => props.onSelect(provider)}
+                variant={"link"}
               >
-                {provider.charAt(0).toUpperCase() +
-                  provider.slice(1).toLowerCase()}
-              </Link>
-            </Button>
+                <Link
+                  color={
+                    props.preferredProvider === provider
+                      ? "primaryText"
+                      : "secondaryText"
+                  }
+                  size="sm"
+                  hoverColor="primaryText"
+                >
+                  {uppercaseFirstLetter(provider)}
+                </Link>
+              </Button>
+            ) : (
+              <Text color="primaryText" size="sm">
+                {uppercaseFirstLetter(provider)}
+              </Text>
+            )}
           </Container>
         );
       })}

packages/thirdweb/src/react/web/ui/ConnectWallet/screens/Buy/utils.ts

@@ -1,3 +1,7 @@
 export function getBuyTokenAmountFontSize(value: string) {
   return value.length > 10 ? "26px" : value.length > 6 ? "34px" : "50px";
 }
+
+export function uppercaseFirstLetter(str: string) {
+  return str.charAt(0).toUpperCase() + str.slice(1);
+}