fix: resolve bugs (that I made)

Author: RobbyUitbeijerse

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

@@ -0,0 +1,68 @@
+import { ChevronDownIcon } from "@radix-ui/react-icons";
+import type { FiatProvider } from "src/pay/utils/commonTypes.js";
+import { iconSize, spacing } from "../../../../../core/design-system/index.js";
+import { Container } from "../../../components/basic.js";
+import { Button } from "../../../components/buttons.js";
+import { Text } from "../../../components/text.js";
+import { uppercaseFirstLetter } from "./utils.js";
+
+/**
+ * Shows the selected payment provider based on the preferred provider OR the quoted provider.
+ * @internal
+ */
+export const PayProviderSelection = (props: {
+  onShowProviders: () => void;
+  quotedProvider?: FiatProvider;
+  preferredProvider?: FiatProvider;
+  supportedProviders: FiatProvider[];
+}) => {
+  const ProviderItem = (
+    <Container
+      flex="row"
+      center="y"
+      gap="xxs"
+      color="secondaryText"
+      style={{ padding: spacing.md }}
+    >
+      <Text size="xs">
+        {uppercaseFirstLetter(
+          props.preferredProvider ?? props.quotedProvider ?? "",
+        )}
+      </Text>
+      {props.supportedProviders.length > 1 && (
+        <ChevronDownIcon width={iconSize.sm} height={iconSize.sm} />
+      )}
+    </Container>
+  );
+
+  return (
+    <Container
+      bg="tertiaryBg"
+      flex="row"
+      borderColor="borderColor"
+      style={{
+        paddingLeft: spacing.md,
+        justifyContent: "space-between",
+        alignItems: "center",
+        borderWidth: "1px",
+        borderStyle: "solid",
+        borderBottom: "none",
+      }}
+    >
+      <Text size="xs" color="secondaryText">
+        Provider
+      </Text>
+      {props.supportedProviders.length > 1 ? (
+        <Button
+          variant="ghost"
+          onClick={props.onShowProviders}
+          style={{ padding: 0 }}
+        >
+          {ProviderItem}
+        </Button>
+      ) : (
+        ProviderItem
+      )}
+    </Container>
+  );
+};

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

@@ -1,4 +1,3 @@
-import { ChevronDownIcon } from "@radix-ui/react-icons";
 import { useState } from "react";
 import { trackPayEvent } from "../../../../../../../analytics/track/pay.js";
 import type { Chain } from "../../../../../../../chains/types.js";
@@ -8,11 +7,7 @@ import {
   type FiatProvider,
   FiatProviders,
 } from "../../../../../../../pay/utils/commonTypes.js";
-import {
-  type Theme,
-  iconSize,
-  spacing,
-} from "../../../../../../core/design-system/index.js";
+import type { Theme } from "../../../../../../core/design-system/index.js";
 import type { PayUIOptions } from "../../../../../../core/hooks/connection/ConnectButtonProps.js";
 import { useBuyWithFiatQuote } from "../../../../../../core/hooks/pay/useBuyWithFiatQuote.js";
 import { PREFERRED_FIAT_PROVIDER_STORAGE_KEY } from "../../../../../../core/utils/storage.js";
@@ -29,11 +24,11 @@ import { Button } from "../../../../components/buttons.js";
 import { Text } from "../../../../components/text.js";
 import { type ERC20OrNativeToken, isNativeToken } from "../../nativeToken.js";
 import { EstimatedTimeAndFees } from "../EstimatedTimeAndFees.js";
+import { PayProviderSelection } from "../PayProviderSelection.js";
 import { PayWithCreditCard } from "../PayWIthCreditCard.js";
 import type { SelectedScreen } from "../main/types.js";
 import { FiatFees } from "../swap/Fees.js";
 import type { PayerInfo } from "../types.js";
-import { uppercaseFirstLetter } from "../utils.js";
 import { Providers } from "./Providers.js";
 import type { CurrencyMeta } from "./currencies.js";
 
@@ -89,7 +84,7 @@ export function FiatScreenContent(props: {
   );
 
   const supportedProviders = (() => {
-    if (!buyWithFiatOptions) return [];
+    if (!buyWithFiatOptions) return [...FiatProviders];
     const options = buyWithFiatOptions?.supportedProviders ?? [];
     return options.length > 0 &&
       (!preferredProvider || options.includes(preferredProvider))
@@ -202,35 +197,13 @@ export function FiatScreenContent(props: {
             currency={selectedCurrency}
             onSelectCurrency={showCurrencySelector}
           />
-          <Container
-            bg="tertiaryBg"
-            flex="row"
-            borderColor="borderColor"
-            style={{
-              paddingLeft: spacing.md,
-              justifyContent: "space-between",
-              alignItems: "center",
-              borderWidth: "1px",
-              borderStyle: "solid",
-              borderBottom: "none",
-            }}
-          >
-            <Text size="xs" color="secondaryText">
-              Provider
-            </Text>
-            <Button variant="ghost" onClick={showProviders}>
-              <Container flex="row" center="y" gap="xxs" color="secondaryText">
-                <Text size="xs">
-                  {preferredProvider
-                    ? `${uppercaseFirstLetter(preferredProvider)}`
-                    : fiatQuoteQuery.data?.provider
-                      ? `${uppercaseFirstLetter(fiatQuoteQuery.data?.provider)}`
-                      : ""}
-                </Text>
-                <ChevronDownIcon width={iconSize.sm} height={iconSize.sm} />
-              </Container>
-            </Button>
-          </Container>
+          {/** Shows preferred or quoted provider and conditional selection */}
+          <PayProviderSelection
+            onShowProviders={showProviders}
+            quotedProvider={fiatQuoteQuery.data?.provider}
+            preferredProvider={preferredProvider}
+            supportedProviders={supportedProviders}
+          />
           {/* Estimated time + View fees button */}
           <EstimatedTimeAndFees
             quoteIsLoading={fiatQuoteQuery.isLoading}

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

@@ -1,7 +1,7 @@
 import type { FiatProvider } from "../../../../../../../pay/utils/commonTypes.js";
 import { Container } from "../../../../components/basic.js";
 import { Button } from "../../../../components/buttons.js";
-import { Link, Text } from "../../../../components/text.js";
+import { Link } from "../../../../components/text.js";
 import { uppercaseFirstLetter } from "../utils.js";
 /**
  * @internal
@@ -30,29 +30,23 @@ export function Providers(props: {
             justifyContent: "space-between",
           }}
         >
-          {props.supportedProviders.length > 0 ? (
-            <Button
-              fullWidth
-              onClick={() => props.onSelect(provider)}
-              variant={"link"}
+          <Button
+            fullWidth
+            onClick={() => props.onSelect(provider)}
+            variant={"link"}
+          >
+            <Link
+              color={
+                props.preferredProvider === provider
+                  ? "primaryText"
+                  : "secondaryText"
+              }
+              size="sm"
+              hoverColor="primaryText"
             >
-              <Link
-                color={
-                  props.preferredProvider === provider
-                    ? "primaryText"
-                    : "secondaryText"
-                }
-                size="sm"
-                hoverColor="primaryText"
-              >
-                {uppercaseFirstLetter(provider)}
-              </Link>
-            </Button>
-          ) : (
-            <Text color="primaryText" size="sm">
               {uppercaseFirstLetter(provider)}
-            </Text>
-          )}
+            </Link>
+          </Button>
         </Container>
       ))}
     </Container>

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

@@ -3,5 +3,5 @@ export function getBuyTokenAmountFontSize(value: string) {
 }
 
 export function uppercaseFirstLetter(str: string) {
-  return str.charAt(0).toUpperCase() + str.slice(1);
+  return str.charAt(0).toUpperCase() + str.slice(1).toLowerCase();
 }