feat(sdk): default country code

gregfromstl · gregfromstl · commit 3de0ec81e3dd · 2024-12-12T02:20:16.000-08:00
diff --git a/.changeset/eighty-seahorses-breathe.md b/.changeset/eighty-seahorses-breathe.md
@@ -0,0 +1,9 @@
+---
+"thirdweb": minor
+---
+
+Allows specifying a default country code for SMS input
+
+```tsx
+<ConnectButton defaultCountryCode="GB" />
+```
diff --git a/packages/thirdweb/src/react/core/hooks/connection/ConnectButtonProps.ts b/packages/thirdweb/src/react/core/hooks/connection/ConnectButtonProps.ts
@@ -15,6 +15,7 @@ import type { WalletId } from "../../../../wallets/wallet-types.js";
 import type { NetworkSelectorProps } from "../../../web/ui/ConnectWallet/NetworkSelector.js";
 import type { WelcomeScreen } from "../../../web/ui/ConnectWallet/screens/types.js";
 import type { LocaleId } from "../../../web/ui/types.js";
+import type { SupportedSmsCountry } from "../../../web/wallets/in-app/supported-sms-countries.js";
 import type { Theme } from "../../design-system/index.js";
 import type {
   SupportedNFTs,
@@ -544,6 +545,11 @@ export type ConnectButtonProps = {
    */
   locale?: LocaleId;
 
+  /**
+   * Default country code to use for SMS verification.
+   */
+  defaultCountryCode?: SupportedSmsCountry;
+
   /**
    * Array of supported wallets. If not provided, default wallets will be used.
    * @example
diff --git a/packages/thirdweb/src/react/web/ui/ConnectWallet/ConnectButton.tsx b/packages/thirdweb/src/react/web/ui/ConnectWallet/ConnectButton.tsx
@@ -359,6 +359,7 @@ export function ConnectButton(props: ConnectButtonProps) {
         chains={props.chains}
         client={props.client}
         connectLocale={localeQuery.data}
+        defaultCountryCode={props.defaultCountryCode}
         meta={{
           title: props.connectModal?.title,
           titleIconUrl: props.connectModal?.titleIcon,
diff --git a/packages/thirdweb/src/react/web/ui/ConnectWallet/Modal/AnyWalletConnectUI.tsx b/packages/thirdweb/src/react/web/ui/ConnectWallet/Modal/AnyWalletConnectUI.tsx
@@ -15,6 +15,7 @@ import type { Wallet } from "../../../../../wallets/interfaces/wallet.js";
 import type { EcosystemWalletId } from "../../../../../wallets/wallet-types.js";
 import { iconSize } from "../../../../core/design-system/index.js";
 import { useWalletInfo } from "../../../../core/utils/wallet.js";
+import type { SupportedSmsCountry } from "../../../wallets/in-app/supported-sms-countries.js";
 import { getInjectedWalletLocale } from "../../../wallets/injected/locale/getInjectedWalletLocale.js";
 import { GetStartedScreen } from "../../../wallets/shared/GetStartedScreen.js";
 import { LoadingScreen } from "../../../wallets/shared/LoadingScreen.js";
@@ -44,6 +45,7 @@ const EcosystemWalletConnectUI = /* @__PURE__ */ lazy(
  * @internal
  */
 export function AnyWalletConnectUI(props: {
+  defaultCountryCode?: SupportedSmsCountry;
   wallet: Wallet;
   done: () => void;
   onBack?: () => void;
@@ -241,6 +243,7 @@ export function AnyWalletConnectUI(props: {
       <Suspense fallback={<LoadingScreen />}>
         <InAppWalletConnectUI
           wallet={props.wallet as Wallet<"inApp">}
+          defaultCountryCode={props.defaultCountryCode}
           done={props.done}
           goBack={props.onBack}
           chain={props.chain}
@@ -259,6 +262,7 @@ export function AnyWalletConnectUI(props: {
       <Suspense fallback={<LoadingScreen />}>
         <EcosystemWalletConnectUI
           wallet={props.wallet as Wallet<EcosystemWalletId>}
+          defaultCountryCode={props.defaultCountryCode}
           done={props.done}
           goBack={props.onBack}
           chain={props.chain}
diff --git a/packages/thirdweb/src/react/web/ui/ConnectWallet/Modal/ConnectModal.tsx b/packages/thirdweb/src/react/web/ui/ConnectWallet/Modal/ConnectModal.tsx
@@ -11,6 +11,7 @@ import {
   useSetIsWalletModalOpen,
   useSetSelectionData,
 } from "../../../providers/wallet-ui-states-provider.js";
+import type { SupportedSmsCountry } from "../../../wallets/in-app/supported-sms-countries.js";
 import { Modal } from "../../components/Modal.js";
 import type { LocaleId } from "../../types.js";
 import { onModalUnmount, reservedScreens } from "../constants.js";
@@ -40,6 +41,7 @@ type ConnectModalOptions = {
   client: ThirdwebClient;
   recommendedWallets: Wallet[] | undefined;
   localeId: LocaleId;
+  defaultCountryCode?: SupportedSmsCountry;
   chain: Chain | undefined;
   showAllWallets: boolean | undefined;
   chains: Chain[] | undefined;
@@ -130,6 +132,7 @@ const ConnectModal = (props: ConnectModalOptions) => {
       }}
     >
       <ConnectModalContent
+        defaultCountryCode={props.defaultCountryCode}
         shouldSetActive={props.shouldSetActive}
         screenSetup={screenSetup}
         setModalVisibility={setModalVisibility}
diff --git a/packages/thirdweb/src/react/web/ui/ConnectWallet/Modal/ConnectModalContent.tsx b/packages/thirdweb/src/react/web/ui/ConnectWallet/Modal/ConnectModalContent.tsx
@@ -14,6 +14,7 @@ import { useActiveWallet } from "../../../../core/hooks/wallets/useActiveWallet.
 import { useSetActiveWallet } from "../../../../core/hooks/wallets/useSetActiveWallet.js";
 import { useConnectionManager } from "../../../../core/providers/connection-manager.js";
 import { useSetSelectionData } from "../../../providers/wallet-ui-states-provider.js";
+import type { SupportedSmsCountry } from "../../../wallets/in-app/supported-sms-countries.js";
 import { LoadingScreen } from "../../../wallets/shared/LoadingScreen.js";
 import { WalletSelector } from "../WalletSelector.js";
 import { onModalUnmount, reservedScreens } from "../constants.js";
@@ -58,6 +59,7 @@ export const ConnectModalContent = (props: {
   client: ThirdwebClient;
   hideHeader: boolean;
   recommendedWallets: Wallet[] | undefined;
+  defaultCountryCode?: SupportedSmsCountry;
   chain: Chain | undefined;
   chains: Chain[] | undefined;
   showAllWallets: boolean | undefined;
@@ -146,6 +148,7 @@ export const ConnectModalContent = (props: {
         setScreen(reservedScreens.showAll);
       }}
       done={handleConnected}
+      defaultCountryCode={props.defaultCountryCode}
       goBack={props.wallets.length > 1 ? handleBack : undefined}
       setModalVisibility={setModalVisibility}
       client={props.client}
@@ -194,6 +197,7 @@ export const ConnectModalContent = (props: {
       return (
         <SmartConnectUI
           key={wallet.id}
+          defaultCountryCode={props.defaultCountryCode}
           accountAbstraction={props.accountAbstraction}
           done={(smartWallet) => {
             handleConnected(smartWallet);
@@ -215,6 +219,7 @@ export const ConnectModalContent = (props: {
     return (
       <AnyWalletConnectUI
         key={wallet.id}
+        defaultCountryCode={props.defaultCountryCode}
         wallet={wallet}
         onBack={goBack}
         done={() => {
diff --git a/packages/thirdweb/src/react/web/ui/ConnectWallet/Modal/SmartWalletConnectUI.tsx b/packages/thirdweb/src/react/web/ui/ConnectWallet/Modal/SmartWalletConnectUI.tsx
@@ -14,6 +14,7 @@ import {
 } from "../../../../core/design-system/index.js";
 import { useConnectionManager } from "../../../../core/providers/connection-manager.js";
 import { useWalletInfo } from "../../../../core/utils/wallet.js";
+import type { SupportedSmsCountry } from "../../../wallets/in-app/supported-sms-countries.js";
 import { LoadingScreen } from "../../../wallets/shared/LoadingScreen.js";
 import { getSmartWalletLocale } from "../../../wallets/smartWallet/locale/getSmartWalletLocale.js";
 import type { SmartWalletLocale } from "../../../wallets/smartWallet/locale/types.js";
@@ -32,6 +33,7 @@ import { AnyWalletConnectUI } from "./AnyWalletConnectUI.js";
 export function SmartConnectUI(props: {
   personalWallet: Wallet;
   done: (smartWallet: Wallet) => void;
+  defaultCountryCode?: SupportedSmsCountry;
   onBack?: () => void;
   accountAbstraction: SmartWalletOptions;
   setModalVisibility: (value: boolean) => void;
@@ -69,6 +71,7 @@ export function SmartConnectUI(props: {
           setKeyConnected(true);
         }}
         onBack={props.onBack}
+        defaultCountryCode={props.defaultCountryCode}
         setModalVisibility={props.setModalVisibility}
         chain={props.chain}
         chains={props.chains}
diff --git a/packages/thirdweb/src/react/web/ui/ConnectWallet/WalletSelector.tsx b/packages/thirdweb/src/react/web/ui/ConnectWallet/WalletSelector.tsx
@@ -18,6 +18,7 @@ import {
 } from "../../../core/design-system/index.js";
 import { useSetSelectionData } from "../../providers/wallet-ui-states-provider.js";
 import { sortWallets } from "../../utils/sortWallets.js";
+import type { SupportedSmsCountry } from "../../wallets/in-app/supported-sms-countries.js";
 import { LoadingScreen } from "../../wallets/shared/LoadingScreen.js";
 import { Img } from "../components/Img.js";
 import { Spacer } from "../components/Spacer.js";
@@ -61,6 +62,7 @@ type WalletSelectorProps = {
   setModalVisibility: (value: boolean) => void;
   accountAbstraction?: SmartWalletOptions;
   size: "compact" | "wide";
+  defaultCountryCode?: SupportedSmsCountry;
   meta: {
     title?: string;
     titleIconUrl?: string;
@@ -276,6 +278,7 @@ const WalletSelectorInner: React.FC<WalletSelectorProps> = (props) => {
   if (!isCompact) {
     topSection = (
       <WalletSelection
+        defaultCountryCode={props.defaultCountryCode}
         wallets={nonLocalWalletConfigs}
         selectWallet={handleSelect}
         done={props.done}
@@ -305,6 +308,7 @@ const WalletSelectorInner: React.FC<WalletSelectorProps> = (props) => {
     if (socialWallets.length === 0) {
       topSection = (
         <WalletSelection
+          defaultCountryCode={props.defaultCountryCode}
           wallets={nonLocalWalletConfigs}
           selectWallet={handleSelect}
           done={props.done}
@@ -351,6 +355,7 @@ const WalletSelectorInner: React.FC<WalletSelectorProps> = (props) => {
         topSection = (
           <Container px="xs">
             <WalletSelection
+              defaultCountryCode={props.defaultCountryCode}
               wallets={socialWallets}
               selectWallet={handleSelect}
               done={props.done}
@@ -422,6 +427,7 @@ const WalletSelectorInner: React.FC<WalletSelectorProps> = (props) => {
               <>
                 <Container px="lg">
                   <WalletSelection
+                    defaultCountryCode={props.defaultCountryCode}
                     wallets={eoaWallets}
                     selectWallet={handleSelect}
                     done={props.done}
@@ -462,6 +468,7 @@ const WalletSelectorInner: React.FC<WalletSelectorProps> = (props) => {
       else {
         topSection = (
           <WalletSelection
+            defaultCountryCode={props.defaultCountryCode}
             wallets={eoaWallets}
             selectWallet={handleSelect}
             done={props.done}
@@ -598,6 +605,7 @@ const WalletSelection: React.FC<{
   connectLocale: ConnectLocale;
   client: ThirdwebClient;
   chain: Chain | undefined;
+  defaultCountryCode?: SupportedSmsCountry;
   diableSelectionDataReset?: boolean;
   // If true, all options will be disabled. Used for things like requiring TOS approval.
   disabled?: boolean;
@@ -628,6 +636,7 @@ const WalletSelection: React.FC<{
                   select={() => props.selectWallet(wallet)}
                   wallet={wallet as Wallet<"inApp">}
                   goBack={props.goBack}
+                  defaultCountryCode={props.defaultCountryCode}
                   client={props.client}
                   connectLocale={props.connectLocale}
                   size={props.size}
diff --git a/packages/thirdweb/src/react/web/wallets/ecosystem/EcosystemWalletConnectUI.tsx b/packages/thirdweb/src/react/web/wallets/ecosystem/EcosystemWalletConnectUI.tsx
@@ -9,6 +9,7 @@ import {
 } from "../../providers/wallet-ui-states-provider.js";
 import type { ConnectLocale } from "../../ui/ConnectWallet/locale/types.js";
 import { WalletAuth } from "../in-app/WalletAuth.js";
+import type { SupportedSmsCountry } from "../in-app/supported-sms-countries.js";
 import { useInAppWalletLocale } from "../in-app/useInAppWalletLocale.js";
 import type { ConnectWalletSelectUIState } from "../shared/ConnectWalletSocialOptions.js";
 import { GuestLogin } from "../shared/GuestLogin.js";
@@ -29,6 +30,7 @@ function EcosystemWalletConnectUI(props: {
   client: ThirdwebClient;
   chain: Chain | undefined;
   connectLocale: ConnectLocale;
+  defaultCountryCode?: SupportedSmsCountry;
   size: "compact" | "wide";
   meta: {
     title?: string;
diff --git a/packages/thirdweb/src/react/web/wallets/ecosystem/EcosystemWalletFormUI.tsx b/packages/thirdweb/src/react/web/wallets/ecosystem/EcosystemWalletFormUI.tsx
@@ -10,6 +10,7 @@ import { PoweredByThirdweb } from "../../ui/ConnectWallet/PoweredByTW.js";
 import type { ConnectLocale } from "../../ui/ConnectWallet/locale/types.js";
 import { Spacer } from "../../ui/components/Spacer.js";
 import { Container, ModalHeader } from "../../ui/components/basic.js";
+import type { SupportedSmsCountry } from "../in-app/supported-sms-countries.js";
 import { ConnectWalletSocialOptions } from "../shared/ConnectWalletSocialOptions.js";
 import type { InAppWalletLocale } from "../shared/locale/types.js";
 import { EcosystemWalletHeader } from "./EcosystemWalletHeader.js";
@@ -29,6 +30,7 @@ type EcosystemWalletFormUIProps = {
     privacyPolicyUrl?: string;
     requireApproval?: boolean;
   };
+  defaultCountryCode?: SupportedSmsCountry;
   client: ThirdwebClient;
   chain: Chain | undefined;
   connectLocale: ConnectLocale;
@@ -80,6 +82,7 @@ export function EcosystemWalletFormUIScreen(props: EcosystemWalletFormUIProps) {
         p={isCompact ? undefined : "lg"}
       >
         <ConnectWalletSocialOptions
+          defaultCountryCode={props.defaultCountryCode}
           disabled={props.meta.requireApproval && !isApproved}
           {...props}
         />
diff --git a/packages/thirdweb/src/react/web/wallets/in-app/CountrySelector.test.tsx b/packages/thirdweb/src/react/web/wallets/in-app/CountrySelector.test.tsx
@@ -0,0 +1,45 @@
+import { describe, expect, it, vi } from "vitest";
+import {
+  fireEvent,
+  render,
+  screen,
+} from "../../../../../test/src/react-render.js";
+import { CountrySelector } from "./CountrySelector.js";
+
+describe("CountrySelector", () => {
+  it("renders with default country code", () => {
+    const setCountryCode = vi.fn();
+    render(
+      <CountrySelector countryCode="US +1" setCountryCode={setCountryCode} />,
+    );
+
+    const selectElement = screen.getByRole("combobox");
+    expect(selectElement).toBeTruthy();
+    expect(selectElement).toHaveValue("US +1");
+  });
+
+  it("changes country code on selection", () => {
+    const setCountryCode = vi.fn();
+    render(
+      <CountrySelector countryCode="US +1" setCountryCode={setCountryCode} />,
+    );
+
+    const selectElement = screen.getByRole("combobox");
+    fireEvent.change(selectElement, { target: { value: "CA +1" } });
+
+    expect(setCountryCode).toHaveBeenCalledWith("CA +1");
+  });
+
+  it("displays all supported countries", () => {
+    const setCountryCode = vi.fn();
+    render(
+      <CountrySelector countryCode="US +1" setCountryCode={setCountryCode} />,
+    );
+
+    const options = screen.getAllByRole("option");
+    expect(options.length).toBeGreaterThan(0);
+    expect(
+      options.some((option) => option.textContent?.includes("United States")),
+    ).toBe(true);
+  });
+});
diff --git a/packages/thirdweb/src/react/web/wallets/in-app/CountrySelector.tsx b/packages/thirdweb/src/react/web/wallets/in-app/CountrySelector.tsx
@@ -1,9 +1,22 @@
 "use client";
-import { useQuery } from "@tanstack/react-query";
 import { useRef } from "react";
 import { useCustomTheme } from "../../../core/design-system/CustomThemeProvider.js";
 import { radius, spacing } from "../../../core/design-system/index.js";
 import { StyledOption, StyledSelect } from "../../ui/design-system/elements.js";
+import {
+  type SupportedSmsCountry,
+  supportedSmsCountries,
+} from "./supported-sms-countries.js";
+
+export function getCountrySelector(countryIsoCode: SupportedSmsCountry) {
+  const country = supportedSmsCountries.find(
+    (country) => country.countryIsoCode === countryIsoCode,
+  );
+  if (!country) {
+    return "US +1";
+  }
+  return `${country.countryIsoCode} +${country.phoneNumberCode}`;
+}
 
 export function CountrySelector({
   countryCode,
@@ -14,17 +27,7 @@ export function CountrySelector({
 }) {
   const selectRef = useRef<HTMLSelectElement>(null);
 
-  const { data: supportedCountries } = useQuery({
-    queryKey: ["supported-sms-countries"],
-    queryFn: async () => {
-      const { supportedSmsCountries } = await import(
-        "./supported-sms-countries.js"
-      );
-      return supportedSmsCountries;
-    },
-  });
-
-  const supportedCountriesForSms = supportedCountries ?? [
+  const supportedCountriesForSms = supportedSmsCountries ?? [
     {
       countryIsoCode: "US",
       countryName: "United States",
@@ -58,7 +61,7 @@ export function CountrySelector({
           return (
             <Option
               key={country.countryIsoCode}
-              value={`${country.countryIsoCode} +${country.phoneNumberCode}`}
+              value={getCountrySelector(country.countryIsoCode)}
             >
               {country.countryName} +{country.phoneNumberCode}
             </Option>
diff --git a/packages/thirdweb/src/react/web/wallets/in-app/InAppWalletConnectUI.tsx b/packages/thirdweb/src/react/web/wallets/in-app/InAppWalletConnectUI.tsx
@@ -16,6 +16,7 @@ import { PassKeyLogin } from "../shared/PassKeyLogin.js";
 import { SocialLogin } from "../shared/SocialLogin.js";
 import { InAppWalletFormUIScreen } from "./InAppWalletFormUI.js";
 import { WalletAuth } from "./WalletAuth.js";
+import type { SupportedSmsCountry } from "./supported-sms-countries.js";
 import { useInAppWalletLocale } from "./useInAppWalletLocale.js";
 
 /**
@@ -39,6 +40,7 @@ function InAppWalletConnectUI(props: {
   connectLocale: ConnectLocale;
   isLinking?: boolean;
   walletConnect: { projectId?: string } | undefined;
+  defaultCountryCode?: SupportedSmsCountry;
 }) {
   const data = useSelectionData();
   const setSelectionData = useSetSelectionData();
@@ -157,6 +159,7 @@ function InAppWalletConnectUI(props: {
   return (
     <InAppWalletFormUIScreen
       select={() => {}}
+      defaultCountryCode={props.defaultCountryCode}
       connectLocale={props.connectLocale}
       inAppWalletLocale={locale}
       done={done}
diff --git a/packages/thirdweb/src/react/web/wallets/in-app/InAppWalletFormUI.tsx b/packages/thirdweb/src/react/web/wallets/in-app/InAppWalletFormUI.tsx
diff --git a/packages/thirdweb/src/react/web/wallets/in-app/InAppWalletSelectionUI.tsx b/packages/thirdweb/src/react/web/wallets/in-app/InAppWalletSelectionUI.tsx
diff --git a/packages/thirdweb/src/react/web/wallets/in-app/InputSelectionUI.tsx b/packages/thirdweb/src/react/web/wallets/in-app/InputSelectionUI.tsx
diff --git a/packages/thirdweb/src/react/web/wallets/in-app/supported-sms-countries.ts b/packages/thirdweb/src/react/web/wallets/in-app/supported-sms-countries.ts
diff --git a/packages/thirdweb/src/react/web/wallets/shared/ConnectWalletSocialOptions.tsx b/packages/thirdweb/src/react/web/wallets/shared/ConnectWalletSocialOptions.tsx
