chore: apply uppercaseFirstLetter throughout the PayEmbed screens

Author: RobbyUitbeijerse

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

@@ -33,6 +33,7 @@ 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";
 
@@ -221,9 +222,9 @@ export function FiatScreenContent(props: {
               <Container flex="row" center="y" gap="xxs" color="secondaryText">
                 <Text size="xs">
                   {preferredProvider
-                    ? `${preferredProvider.charAt(0).toUpperCase() + preferredProvider.slice(1).toLowerCase()}`
+                    ? `${uppercaseFirstLetter(preferredProvider)}`
                     : fiatQuoteQuery.data?.provider
-                      ? `${fiatQuoteQuery.data?.provider.charAt(0).toUpperCase() + fiatQuoteQuery.data?.provider.slice(1).toLowerCase()}`
+                      ? `${uppercaseFirstLetter(fiatQuoteQuery.data?.provider)}`
                       : ""}
                 </Text>
                 <ChevronDownIcon width={iconSize.sm} height={iconSize.sm} />

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

@@ -44,6 +44,7 @@ import { StepConnectorArrow } from "../swap/StepConnector.js";
 import { WalletRow } from "../swap/WalletRow.js";
 import { addPendingTx } from "../swap/pendingSwapTx.js";
 import type { PayerInfo } from "../types.js";
+import { uppercaseFirstLetter } from "../utils.js";
 import { StepContainer } from "./FiatSteps.js";
 
 type OnRampScreenState = {
@@ -213,7 +214,7 @@ function StepUI(props: {
         />
         <Container flex="column" gap="3xs" center="y" style={{ flex: "1" }}>
           <Text size="sm" color="primaryText">
-            {step.action.charAt(0).toUpperCase() + step.action.slice(1)}
+            {uppercaseFirstLetter(step.action)}
           </Text>
 
           <Container

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

@@ -1,4 +1,4 @@
-import { type FiatProvider } 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, Text } from "../../../../components/text.js";
@@ -21,42 +21,40 @@ export function Providers(props: {
         alignItems: "flex-start",
       }}
     >
-      {props.supportedProviders.map((provider) => {
-        return (
-          <Container
-            key={provider}
-            flex="row"
-            expand
-            style={{
-              justifyContent: "space-between",
-            }}
-          >
-            {!!props.supportedProviders.length ? (
-              <Button
-                fullWidth
-                onClick={() => props.onSelect(provider)}
-                variant={"link"}
+      {props.supportedProviders.map((provider) => (
+        <Container
+          key={provider}
+          flex="row"
+          expand
+          style={{
+            justifyContent: "space-between",
+          }}
+        >
+          {props.supportedProviders.length > 0 ? (
+            <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>
-            )}
-          </Container>
-        );
-      })}
+              </Link>
+            </Button>
+          ) : (
+            <Text color="primaryText" size="sm">
+              {uppercaseFirstLetter(provider)}
+            </Text>
+          )}
+        </Container>
+      ))}
     </Container>
   );
 }