[SDK] Implement allowedSmsCountryCodes option (#7090)

Co-authored-by: Jonas Daniels <jonas.daniels@outlook.com>

Author: joaquim-verges

.changeset/limited-country-dropdown.md

@@ -0,0 +1,5 @@
+---
+"thirdweb": patch
+---
+
+Allow limiting the selectable countries for SMS login via a new `allowedSmsCountryCodes` option placed alongside `defaultSmsCountryCode`.

packages/thirdweb/src/react/web/wallets/in-app/CountrySelector.tsx

@@ -21,19 +21,26 @@ export function getCountrySelector(countryIsoCode: SupportedSmsCountry) {
 export function CountrySelector({
   countryCode,
   setCountryCode,
+  allowedCountryCodes,
 }: {
   countryCode: string;
   setCountryCode: React.Dispatch<React.SetStateAction<string>>;
+  allowedCountryCodes?: SupportedSmsCountry[];
 }) {
   const selectRef = useRef<HTMLSelectElement>(null);
 
-  const supportedCountriesForSms = supportedSmsCountries ?? [
-    {
-      countryIsoCode: "US",
-      countryName: "United States",
-      phoneNumberCode: 1,
-    },
-  ];
+  const supportedCountriesForSms =
+    allowedCountryCodes && allowedCountryCodes.length > 0
+      ? supportedSmsCountries.filter((c) =>
+          allowedCountryCodes.includes(c.countryIsoCode as SupportedSmsCountry),
+        )
+      : (supportedSmsCountries ?? [
+          {
+            countryIsoCode: "US",
+            countryName: "United States",
+            phoneNumberCode: 1,
+          },
+        ]);
 
   return (
     <>

packages/thirdweb/src/react/web/wallets/in-app/InputSelectionUI.test.tsx

@@ -42,4 +42,27 @@ describe("InputSelectionUI", () => {
 
     expect(screen.getByRole("combobox")).toHaveValue("US +1");
   });
+
+  it("should filter countries based on allowedSmsCountryCodes", () => {
+    const mockGetCountrySelector = vi.mocked(getCountrySelector);
+    mockGetCountrySelector.mockReturnValue("IN +91");
+
+    render(
+      <InputSelectionUI
+        onSelect={vi.fn()}
+        placeholder=""
+        name=""
+        type=""
+        submitButtonText=""
+        format="phone"
+        allowedSmsCountryCodes={["IN", "BR"]}
+      />,
+    );
+
+    const options = screen.getAllByRole("option");
+    const optionTexts = options.map((o) => o.textContent);
+    expect(optionTexts.some((t) => t?.includes("India"))).toBe(true);
+    expect(optionTexts.some((t) => t?.includes("Brazil"))).toBe(true);
+    expect(optionTexts.some((t) => t?.includes("United States"))).toBe(false);
+  });
 });

packages/thirdweb/src/react/web/wallets/in-app/InputSelectionUI.tsx

@@ -24,11 +24,16 @@ export function InputSelectionUI(props: {
   format?: "phone";
   disabled?: boolean;
   defaultSmsCountryCode?: SupportedSmsCountry;
+  allowedSmsCountryCodes?: SupportedSmsCountry[];
 }) {
   const [countryCodeInfo, setCountryCodeInfo] = useState(
     props.defaultSmsCountryCode
       ? getCountrySelector(props.defaultSmsCountryCode)
-      : "US +1",
+      : props.allowedSmsCountryCodes &&
+          props.allowedSmsCountryCodes.length > 0 &&
+          props.allowedSmsCountryCodes[0]
+        ? getCountrySelector(props.allowedSmsCountryCodes[0])
+        : "US +1",
   );
   const [input, setInput] = useState("");
   const [error, setError] = useState<string | undefined>();
@@ -69,6 +74,7 @@ export function InputSelectionUI(props: {
           <CountrySelector
             countryCode={countryCodeInfo}
             setCountryCode={setCountryCodeInfo}
+            allowedCountryCodes={props.allowedSmsCountryCodes}
           />
         )}
         <Input

packages/thirdweb/src/react/web/wallets/shared/ConnectWalletSocialOptions.tsx

@@ -451,6 +451,9 @@ export const ConnectWalletSocialOptions = (
             defaultSmsCountryCode={
               wallet.getConfig()?.auth?.defaultSmsCountryCode
             }
+            allowedSmsCountryCodes={
+              wallet.getConfig()?.auth?.allowedSmsCountryCodes
+            }
           />
         ) : (
           <WalletTypeRowButton

packages/thirdweb/src/wallets/ecosystem/types.ts

@@ -19,6 +19,11 @@ export type EcosystemWalletCreationOptions = {
      * The default country code to use for SMS authentication
      */
     defaultSmsCountryCode?: SupportedSmsCountry;
+
+    /**
+     * The list of allowed country codes to display in the country selector
+     */
+    allowedSmsCountryCodes?: SupportedSmsCountry[];
   };
   /**
    * The partnerId of the ecosystem wallet to connect to

packages/thirdweb/src/wallets/in-app/core/wallet/types.ts

@@ -83,6 +83,11 @@ export type InAppWalletCreationOptions =
          * The default country code to use for SMS authentication
          */
         defaultSmsCountryCode?: SupportedSmsCountry;
+
+        /**
+         * The list of allowed country codes to display in the country selector
+         */
+        allowedSmsCountryCodes?: SupportedSmsCountry[];
       };
       /**
        * Metadata to display in the Connect Modal