[SDK] Feature: Adds defaultCountryCode prop to ConnectButton (#5709)

Author: gregfromstl

.changeset/fast-items-film.md

@@ -0,0 +1,18 @@
+---
+"thirdweb": minor
+---
+
+Adds a defaultSmsCountryCode configuration option to In-App and Ecosystem Wallets
+
+```ts
+createWallet("inApp", {
+    auth: {
+      options: [
+        "email",
+        "phone",
+      ],
+      mode: "redirect",
+      defaultSmsCountryCode: "IN", // Default country code for SMS
+    },
+  }),
+  ```

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);
+  });
+});

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>

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

@@ -0,0 +1,45 @@
+import { describe, expect, it, vi } from "vitest";
+import { render, screen } from "../../../../../test/src/react-render.js";
+import { getCountrySelector } from "./CountrySelector.js";
+import { InputSelectionUI } from "./InputSelectionUI.js";
+
+vi.mock("./CountrySelector.js", async (importOriginal) => ({
+  ...(await importOriginal()),
+  getCountrySelector: vi.fn(),
+}));
+
+describe("InputSelectionUI", () => {
+  it("should initialize countryCodeInfo with defaultSmsCountryCode", () => {
+    const mockGetCountrySelector = vi.mocked(getCountrySelector);
+    mockGetCountrySelector.mockReturnValue("CA +1");
+
+    render(
+      <InputSelectionUI
+        defaultSmsCountryCode="CA"
+        onSelect={vi.fn()}
+        placeholder=""
+        name=""
+        type=""
+        submitButtonText=""
+        format="phone"
+      />,
+    );
+
+    expect(screen.getByRole("combobox")).toHaveValue("CA +1");
+  });
+
+  it('should initialize countryCodeInfo with "US +1" if defaultSmsCountryCode is not provided', () => {
+    render(
+      <InputSelectionUI
+        onSelect={vi.fn()}
+        placeholder=""
+        name=""
+        type=""
+        submitButtonText=""
+        format="phone"
+      />,
+    );
+
+    expect(screen.getByRole("combobox")).toHaveValue("US +1");
+  });
+});

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

@@ -10,7 +10,8 @@ import { Spacer } from "../../ui/components/Spacer.js";
 import { IconButton } from "../../ui/components/buttons.js";
 import { Input, InputContainer } from "../../ui/components/formElements.js";
 import { Text } from "../../ui/components/text.js";
-import { CountrySelector } from "./CountrySelector.js";
+import { CountrySelector, getCountrySelector } from "./CountrySelector.js";
+import type { SupportedSmsCountry } from "./supported-sms-countries.js";
 
 export function InputSelectionUI(props: {
   onSelect: (data: string) => void;
@@ -22,8 +23,13 @@ export function InputSelectionUI(props: {
   submitButtonText: string;
   format?: "phone";
   disabled?: boolean;
+  defaultSmsCountryCode?: SupportedSmsCountry;
 }) {
-  const [countryCodeInfo, setCountryCodeInfo] = useState("US +1");
+  const [countryCodeInfo, setCountryCodeInfo] = useState(
+    props.defaultSmsCountryCode
+      ? getCountrySelector(props.defaultSmsCountryCode)
+      : "US +1",
+  );
   const [input, setInput] = useState("");
   const [error, setError] = useState<string | undefined>();
   const [showError, setShowError] = useState(false);

packages/thirdweb/src/react/web/wallets/in-app/supported-sms-countries.ts

@@ -1,3 +1,5 @@
+export type SupportedSmsCountry =
+  (typeof supportedSmsCountries)[number]["countryIsoCode"];
 export const supportedSmsCountries = [
   {
     countryIsoCode: "AD",
@@ -1183,4 +1185,4 @@ export const supportedSmsCountries = [
     countryName: "Zimbabwe",
     phoneNumberCode: "263",
   },
-];
+] as const;

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

@@ -448,6 +448,9 @@ export const ConnectWalletSocialOptions = (
             disabled={props.disabled}
             emptyErrorMessage={emptyErrorMessage}
             submitButtonText={locale.submitEmail}
+            defaultSmsCountryCode={
+              wallet.getConfig()?.auth?.defaultSmsCountryCode
+            }
           />
         ) : (
           <WalletTypeRowButton

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

@@ -1,3 +1,4 @@
+import type { SupportedSmsCountry } from "../../react/web/wallets/in-app/supported-sms-countries.js";
 import type {
   InAppWalletAutoConnectOptions,
   InAppWalletConnectionOptions,
@@ -13,6 +14,10 @@ export type EcosystemWalletCreationOptions = {
      * Optional url to redirect to after authentication
      */
     redirectUrl?: string;
+    /**
+     * The default country code to use for SMS authentication
+     */
+    defaultSmsCountryCode?: SupportedSmsCountry;
   };
   /**
    * The partnerId of the ecosystem wallet to connect to

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

@@ -1,5 +1,6 @@
 import type { Chain } from "../../../../chains/types.js";
 import type { ThirdwebClient } from "../../../../client/client.js";
+import type { SupportedSmsCountry } from "../../../../react/web/wallets/in-app/supported-sms-countries.js";
 import type { SmartWalletOptions } from "../../../smart/types.js";
 import type {
   AuthOption,
@@ -59,6 +60,10 @@ export type InAppWalletCreationOptions =
          * The domain of the passkey to use for authentication
          */
         passkeyDomain?: string;
+        /**
+         * The default country code to use for SMS authentication
+         */
+        defaultSmsCountryCode?: SupportedSmsCountry;
       };
       /**
        * Metadata to display in the Connect Modal