Repository: thirdweb-dev/js
Pull request #7090: [SDK] Implement allowedSmsCountryCodes option
Author: login: joaquim-verges
Labels: name: packages
name: SDK
description: Involves changes to the thirdweb SDK
name: codex
Created: 2025-05-20T03:24:34Z | Merged: 2025-05-23T04:14:30Z

Fixed TOOL-4529

## Summary
- add `allowedSmsCountryCodes` option for in-app and ecosystem wallets
- filter the country selector to only show those countries
- include tests for the new behaviour

## Testing
- `pnpm test` *(fails: connect EHOSTUNREACH)*

<!-- start pr-codex -->

---

## PR-Codex overview
This PR introduces a new feature to limit selectable countries for SMS login by adding an `allowedSmsCountryCodes` option. This allows customization of the country codes displayed in the country selector.

### Detailed summary
- Added `allowedSmsCountryCodes` option to limit selectable countries for SMS login.
- Updated `ConnectWalletSocialOptions.tsx` to utilize `allowedSmsCountryCodes`.
- Modified `CountrySelector.tsx` to filter supported countries based on `allowedCountryCodes`.
- Enhanced `InputSelectionUI.test.tsx` to test filtering based on `allowedSmsCountryCodes`.
- Adjusted `InputSelectionUI.tsx` to initialize country code based on `allowedSmsCountryCodes`.

> ✨ Ask PR-Codex anything about this PR by commenting with `/codex {your question}`

<!-- end pr-codex -->

<!-- This is an auto-generated comment: release notes by coderabbit.ai -->
## Summary by CodeRabbit

- **New Features**
  - Added the ability to restrict selectable countries during SMS-based login by specifying allowed country codes.
  - The country selection dropdown now only displays countries from the allowed list, if provided.

- **Tests**
  - Added tests to verify that the country selector correctly filters options based on allowed country codes.
<!-- end of auto-generated comment: release notes by coderabbit.ai -->


Diff:
diff --git a/.changeset/limited-country-dropdown.md b/.changeset/limited-country-dropdown.md
new file mode 100644
index 00000000000..126eda67a6c
--- /dev/null
+++ b/.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`.
diff --git a/packages/thirdweb/src/react/web/wallets/in-app/CountrySelector.tsx b/packages/thirdweb/src/react/web/wallets/in-app/CountrySelector.tsx
index a7f1c8c8d62..3952eddb56c 100644
--- a/packages/thirdweb/src/react/web/wallets/in-app/CountrySelector.tsx
+++ b/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 (
     <>
diff --git a/packages/thirdweb/src/react/web/wallets/in-app/InputSelectionUI.test.tsx b/packages/thirdweb/src/react/web/wallets/in-app/InputSelectionUI.test.tsx
index 16dc8327bcb..5adab29d9f3 100644
--- a/packages/thirdweb/src/react/web/wallets/in-app/InputSelectionUI.test.tsx
+++ b/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);
+  });
 });
diff --git a/packages/thirdweb/src/react/web/wallets/in-app/InputSelectionUI.tsx b/packages/thirdweb/src/react/web/wallets/in-app/InputSelectionUI.tsx
index 10221015574..762f86791e3 100644
--- a/packages/thirdweb/src/react/web/wallets/in-app/InputSelectionUI.tsx
+++ b/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
diff --git a/packages/thirdweb/src/react/web/wallets/shared/ConnectWalletSocialOptions.tsx b/packages/thirdweb/src/react/web/wallets/shared/ConnectWalletSocialOptions.tsx
index 7059402b9a8..240f23b8eb9 100644
--- a/packages/thirdweb/src/react/web/wallets/shared/ConnectWalletSocialOptions.tsx
+++ b/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
diff --git a/packages/thirdweb/src/wallets/ecosystem/types.ts b/packages/thirdweb/src/wallets/ecosystem/types.ts
index 92d4a9d066b..c0ca95db0e2 100644
--- a/packages/thirdweb/src/wallets/ecosystem/types.ts
+++ b/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
diff --git a/packages/thirdweb/src/wallets/in-app/core/wallet/types.ts b/packages/thirdweb/src/wallets/in-app/core/wallet/types.ts
index 0f728cbd615..98c5906a49e 100644
--- a/packages/thirdweb/src/wallets/in-app/core/wallet/types.ts
+++ b/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


Reviews:
user: login: graphite-app[bot]
state: COMMENTED
author_association: CONTRIBUTOR
submitted_at: 2025-05-20T18:11:34Z
user: login: graphite-app[bot]
state: COMMENTED
author_association: CONTRIBUTOR
submitted_at: 2025-05-20T18:11:59Z
user: login: coderabbitai[bot]
body: **Actionable comments posted: 0**

<details>
<summary>♻️ Duplicate comments (1)</summary><blockquote>

<details>
<summary>packages/thirdweb/src/react/web/wallets/in-app/InputSelectionUI.tsx (1)</summary><blockquote>

`32-34`: **Improved validation needed for allowedSmsCountryCodes first element.**

While the current implementation checks if `allowedSmsCountryCodes` exists and is non-empty, it doesn't validate that the first element is a valid `SupportedSmsCountry` before passing it to `getCountrySelector`.


Although `getCountrySelector` has a fallback to "US +1" if the country is not found, it would be better to add explicit validation:

```diff
-      : props.allowedSmsCountryCodes && props.allowedSmsCountryCodes.length > 0
-        ? getCountrySelector(props.allowedSmsCountryCodes[0])
+      : props.allowedSmsCountryCodes?.length > 0 && props.allowedSmsCountryCodes[0]
+        ? getCountrySelector(props.allowedSmsCountryCodes[0])
         : "US +1",
```

This suggestion is based on a previous review comment by graphite-app[bot] and would ensure robust handling of potentially invalid input.

</blockquote></details>

</blockquote></details>

<details>
<summary>🧹 Nitpick comments (1)</summary><blockquote>

<details>
<summary>packages/thirdweb/src/react/web/wallets/in-app/CountrySelector.tsx (1)</summary><blockquote>

`32-43`: **Implementation looks good!**

The filtering logic correctly handles the `allowedCountryCodes` prop to show only allowed countries when specified. The fallback to all countries (or US as a last resort) maintains backward compatibility.

A minor readability suggestion:

Consider refactoring the nested ternary expression to a more explicit if-else structure for improved readability:

```diff
-  const supportedCountriesForSms =
-    allowedCountryCodes && allowedCountryCodes.length > 0
-      ? supportedSmsCountries.filter((c) =>
-          allowedCountryCodes.includes(c.countryIsoCode as SupportedSmsCountry),
-        )
-      : supportedSmsCountries ?? [
-          {
-            countryIsoCode: "US",
-            countryName: "United States",
-            phoneNumberCode: 1,
-          },
-        ];
+  let supportedCountriesForSms;
+  if (allowedCountryCodes && allowedCountryCodes.length > 0) {
+    supportedCountriesForSms = supportedSmsCountries.filter((c) =>
+      allowedCountryCodes.includes(c.countryIsoCode as SupportedSmsCountry)
+    );
+  } else {
+    supportedCountriesForSms = supportedSmsCountries ?? [
+      {
+        countryIsoCode: "US",
+        countryName: "United States",
+        phoneNumberCode: 1,
+      },
+    ];
+  }
```

</blockquote></details>

</blockquote></details>

<details>
<summary>📜 Review details</summary>

**Configuration used: CodeRabbit UI**
**Review profile: CHILL**
**Plan: Pro**
**Cache: Disabled due to data retention organization setting**
**Knowledge Base: Disabled due to data retention organization setting**


<details>
<summary>📥 Commits</summary>

Reviewing files that changed from the base of the PR and between a3072c43358febb8b3a419414c7252934ba2d20c and 9fb96350bc7e65517d39fee79fe2f76febd22ba2.

</details>

<details>
<summary>📒 Files selected for processing (7)</summary>

* `.changeset/limited-country-dropdown.md` (1 hunks)
* `packages/thirdweb/src/react/web/wallets/in-app/CountrySelector.tsx` (1 hunks)
* `packages/thirdweb/src/react/web/wallets/in-app/InputSelectionUI.test.tsx` (1 hunks)
* `packages/thirdweb/src/react/web/wallets/in-app/InputSelectionUI.tsx` (2 hunks)
* `packages/thirdweb/src/react/web/wallets/shared/ConnectWalletSocialOptions.tsx` (1 hunks)
* `packages/thirdweb/src/wallets/ecosystem/types.ts` (1 hunks)
* `packages/thirdweb/src/wallets/in-app/core/wallet/types.ts` (1 hunks)

</details>

<details>
<summary>🧰 Additional context used</summary>

<details>
<summary>🧬 Code Graph Analysis (1)</summary>

<details>
<summary>packages/thirdweb/src/react/web/wallets/in-app/InputSelectionUI.tsx (1)</summary><blockquote>

<details>
<summary>packages/thirdweb/src/react/web/wallets/in-app/CountrySelector.tsx (1)</summary>

* `getCountrySelector` (11-19)

</details>

</blockquote></details>

</details>

</details>

<details>
<summary>⏰ Context from checks skipped due to timeout of 90000ms (5)</summary>

* GitHub Check: E2E Tests (pnpm, esbuild)
* GitHub Check: Lint Packages
* GitHub Check: E2E Tests (pnpm, vite)
* GitHub Check: Build Packages
* GitHub Check: Analyze (javascript)

</details>

<details>
<summary>🔇 Additional comments (6)</summary><blockquote>

<details>
<summary>.changeset/limited-country-dropdown.md (1)</summary>

`1-5`: **LGTM - Well-structured changeset!**

The changeset properly documents the new feature that allows limiting selectable countries for SMS login using the `allowedSmsCountryCodes` option, clearly indicating it works alongside the existing `defaultSmsCountryCode` option.

</details>
<details>
<summary>packages/thirdweb/src/react/web/wallets/shared/ConnectWalletSocialOptions.tsx (1)</summary>

`454-456`: **LGTM - Properly implemented new feature!**

The implementation correctly passes the `allowedSmsCountryCodes` configuration from the wallet to the `InputSelectionUI` component, following the same pattern as the existing `defaultSmsCountryCode` prop.

</details>
<details>
<summary>packages/thirdweb/src/wallets/ecosystem/types.ts (1)</summary>

`22-26`: **LGTM - Well-documented type addition!**

The addition of the `allowedSmsCountryCodes` property to the `EcosystemWalletCreationOptions` type is well-placed and includes clear JSDoc documentation explaining its purpose. The type `SupportedSmsCountry[]` is appropriate for this use case.

</details>
<details>
<summary>packages/thirdweb/src/wallets/in-app/core/wallet/types.ts (1)</summary>

`86-90`: **LGTM - Consistent type implementation!**

The addition of the `allowedSmsCountryCodes` property to the `InAppWalletCreationOptions` type maintains consistency with the ecosystem wallet implementation. The property is properly typed and documented with clear JSDoc comments.

</details>
<details>
<summary>packages/thirdweb/src/react/web/wallets/in-app/InputSelectionUI.test.tsx (1)</summary>

`46-67`: **Well-structured test for the new feature!**

The test correctly verifies that the country selector filters options based on the `allowedSmsCountryCodes` prop, checking both the inclusion of allowed countries (India, Brazil) and the exclusion of non-allowed countries (United States).

</details>
<details>
<summary>packages/thirdweb/src/react/web/wallets/in-app/InputSelectionUI.tsx (1)</summary>

`75-75`: **LGTM! Properly passing allowedSmsCountryCodes to CountrySelector.**

The component correctly passes the `allowedSmsCountryCodes` prop to the `CountrySelector` component as `allowedCountryCodes`, ensuring the filtering behavior is applied throughout the component hierarchy.

</details>

</blockquote></details>

</details>

<!-- This is an auto-generated comment by CodeRabbit for review status -->
state: COMMENTED
author_association: CONTRIBUTOR
submitted_at: 2025-05-20T18:14:11Z
user: login: graphite-app[bot]
state: COMMENTED
author_association: CONTRIBUTOR
submitted_at: 2025-05-20T18:19:30Z

Review comments:
diff_hunk: @@ -24,11 +24,14 @@ 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
+        ? getCountrySelector(props.allowedSmsCountryCodes[0])
+        : "US +1",
path: packages/thirdweb/src/react/web/wallets/in-app/InputSelectionUI.tsx
user: login: graphite-app[bot]
body: This code fails because it doesn't properly validate that props.allowedSmsCountryCodes[0] is a valid SupportedSmsCountry before passing it to getCountrySelector. We should add additional validation to ensure the first element exists and is valid, for example: `: props.allowedSmsCountryCodes?.length > 0 && props.allowedSmsCountryCodes[0] ? getCountrySelector(props.allowedSmsCountryCodes[0]) : "US +1",`

*Spotted by [Diamond](https://app.graphite.dev/diamond/?org=thirdweb-dev&ref=ai-review-comment) (based on CI logs)*<i class='graphite__hidden'><br /><br />Is this helpful? React 👍 or 👎 to let us know.</i>
created_at: 2025-05-20T18:11:33Z
author_association: CONTRIBUTOR
diff_hunk: @@ -24,11 +24,14 @@ 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
+        ? getCountrySelector(props.allowedSmsCountryCodes[0])
+        : "US +1",
path: packages/thirdweb/src/react/web/wallets/in-app/InputSelectionUI.tsx
user: login: graphite-app[bot]
body: The issue is that TypeScript might not be correctly inferring that props.allowedSmsCountryCodes[0] is defined when props.allowedSmsCountryCodes.length > 0. Adding parentheses to make the condition more explicit: (props.allowedSmsCountryCodes && props.allowedSmsCountryCodes.length > 0) ? getCountrySelector(props.allowedSmsCountryCodes[0]) : "US +1"

*Spotted by [Diamond](https://app.graphite.dev/diamond/?org=thirdweb-dev&ref=ai-review-comment) (based on CI logs)*<i class='graphite__hidden'><br /><br />Is this helpful? React 👍 or 👎 to let us know.</i>
created_at: 2025-05-20T18:11:58Z
author_association: CONTRIBUTOR
diff_hunk: @@ -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,
+          },
+        ];
path: packages/thirdweb/src/react/web/wallets/in-app/CountrySelector.tsx
user: login: graphite-app[bot]
body: Add parentheses around the nullish coalescing expression in the ternary operator's else branch to clarify operator precedence: ': (supportedSmsCountries ?? [...])'.

*Spotted by [Diamond](https://app.graphite.dev/diamond/?org=thirdweb-dev&ref=ai-review-comment) (based on CI logs)*<i class='graphite__hidden'><br /><br />Is this helpful? React 👍 or 👎 to let us know.</i>
created_at: 2025-05-20T18:19:29Z
author_association: CONTRIBUTOR

PR comments:
user: login: changeset-bot[bot]
created_at: 2025-05-20T03:24:38Z
body: ###  🦋  Changeset detected

Latest commit: 0f4fa257ce26bbd782a0099fa42a8fdf7fb54e07

**The changes in this PR will be included in the next version bump.**

<details><summary>This PR includes changesets to release 2 packages</summary>

  | Name                        | Type  |
| --------------------------- | ----- |
| thirdweb                    | Patch |
| @thirdweb-dev/wagmi-adapter | Patch |

</details>

Not sure what this means? [Click here  to learn what changesets are](https://github.com/changesets/changesets/blob/main/docs/adding-a-changeset.md).

[Click here if you're a maintainer who wants to add another changeset to this PR](https://github.com/thirdweb-dev/js/new/codex/add-option-to-limit-country-selector?filename=.changeset/few-nails-yawn.md&value=---%0A%22thirdweb%22%3A%20patch%0A---%0A%0A%5BSDK%5D%20Implement%20allowedSmsCountryCodes%20option%0A)


author_association: NONE
user: login: vercel[bot]
created_at: 2025-05-20T03:24:39Z
body: [vc]: #U60WCUtFBWBLWC5mAHGqq3/B/cXGnc0uDY3fcLU1ihw=:eyJpc01vbm9yZXBvIjp0cnVlLCJ0eXBlIjoiZ2l0aHViIiwicHJvamVjdHMiOlt7Im5hbWUiOiJkb2NzLXYyIiwicm9vdERpcmVjdG9yeSI6ImFwcHMvcG9ydGFsIiwiaW5zcGVjdG9yVXJsIjoiaHR0cHM6Ly92ZXJjZWwuY29tL3RoaXJkd2ViL2RvY3MtdjIvRGh6azdLMXFrYnB4bzNjOFUxVFBidDZ3MTZYWCIsInByZXZpZXdVcmwiOiJkb2NzLXYyLWdpdC1jb2RleC1hZGQtb3B0aW9uLXRvLWxpbWl0LWNvdW50cnktc2VsZWN0b3IudGhpcmR3ZWItcHJldmlldy5jb20iLCJuZXh0Q29tbWl0U3RhdHVzIjoiREVQTE9ZRUQiLCJsaXZlRmVlZGJhY2siOnsicmVzb2x2ZWQiOjAsInVucmVzb2x2ZWQiOjAsInRvdGFsIjowLCJsaW5rIjoiZG9jcy12Mi1naXQtY29kZXgtYWRkLW9wdGlvbi10by1saW1pdC1jb3VudHJ5LXNlbGVjdG9yLnRoaXJkd2ViLXByZXZpZXcuY29tIn19LHsibmFtZSI6InRoaXJkd2ViLXd3dyIsInJvb3REaXJlY3RvcnkiOiJhcHBzL2Rhc2hib2FyZCIsImluc3BlY3RvclVybCI6Imh0dHBzOi8vdmVyY2VsLmNvbS90aGlyZHdlYi90aGlyZHdlYi13d3cvajJzUUJtdFZ3VE5zV1plOHZja1BtZlhKUVJYdyIsInByZXZpZXdVcmwiOiJ0aGlyZHdlYi13d3ctZ2l0LWNvZGV4LWFkZC1vcHRpb24tdG8tbGltaXQtY291bnRyeS1zZWxlY3Rvci50aGlyZHdlYi1wcmV2aWV3LmNvbSIsIm5leHRDb21taXRTdGF0dXMiOiJERVBMT1lFRCIsImxpdmVGZWVkYmFjayI6eyJyZXNvbHZlZCI6MCwidW5yZXNvbHZlZCI6MCwidG90YWwiOjAsImxpbmsiOiJ0aGlyZHdlYi13d3ctZ2l0LWNvZGV4LWFkZC1vcHRpb24tdG8tbGltaXQtY291bnRyeS1zZWxlY3Rvci50aGlyZHdlYi1wcmV2aWV3LmNvbSJ9fSx7Im5hbWUiOiJsb2dpbiIsInJvb3REaXJlY3RvcnkiOiJhcHBzL2xvZ2luIiwiaW5zcGVjdG9yVXJsIjoiaHR0cHM6Ly92ZXJjZWwuY29tL3RoaXJkd2ViL2xvZ2luLzVMc0NYSmQ2Um91Z1E1UE56VXVWZUJUc3Q2b0EiLCJwcmV2aWV3VXJsIjoibG9naW4tZ2l0LWNvZGV4LWFkZC1vcHRpb24tdG8tbGltaXQtY291bnRyeS1zZWxlY3Rvci50aGlyZHdlYi1wcmV2aWV3LmNvbSIsIm5leHRDb21taXRTdGF0dXMiOiJERVBMT1lFRCIsImxpdmVGZWVkYmFjayI6eyJyZXNvbHZlZCI6MCwidW5yZXNvbHZlZCI6MCwidG90YWwiOjAsImxpbmsiOiJsb2dpbi1naXQtY29kZXgtYWRkLW9wdGlvbi10by1saW1pdC1jb3VudHJ5LXNlbGVjdG9yLnRoaXJkd2ViLXByZXZpZXcuY29tIn19LHsibmFtZSI6IndhbGxldC11aSIsInJvb3REaXJlY3RvcnkiOiJhcHBzL3dhbGxldC11aSIsImluc3BlY3RvclVybCI6Imh0dHBzOi8vdmVyY2VsLmNvbS90aGlyZHdlYi93YWxsZXQtdWkvQ2E3ZHFNMzVxdkxYRTZCODJIbkpoa3l1NktuQyIsInByZXZpZXdVcmwiOiJ3YWxsZXQtdWktZ2l0LWNvZGV4LWFkZC1vcHRpb24tdG8tbGltaXQtY291bnRyeS1zZWxlY3Rvci50aGlyZHdlYi1wcmV2aWV3LmNvbSIsIm5leHRDb21taXRTdGF0dXMiOiJERVBMT1lFRCIsImxpdmVGZWVkYmFjayI6eyJyZXNvbHZlZCI6MCwidW5yZXNvbHZlZCI6MCwidG90YWwiOjAsImxpbmsiOiJ3YWxsZXQtdWktZ2l0LWNvZGV4LWFkZC1vcHRpb24tdG8tbGltaXQtY291bnRyeS1zZWxlY3Rvci50aGlyZHdlYi1wcmV2aWV3LmNvbSJ9fSx7Im5hbWUiOiJ0aGlyZHdlYl9wbGF5Z3JvdW5kIiwicm9vdERpcmVjdG9yeSI6ImFwcHMvcGxheWdyb3VuZC13ZWIiLCJpbnNwZWN0b3JVcmwiOiJodHRwczovL3ZlcmNlbC5jb20vdGhpcmR3ZWIvdGhpcmR3ZWJfcGxheWdyb3VuZC80Qk1LTFNDVFVoTkhzYUZwTHdOSmU1NWFjeGZzIiwicHJldmlld1VybCI6InRoaXJkd2VicGxheWdyb3VuZC1naXQtY29kZXgtYWRkLW9wdGlvbi10by1saW1pdC1jb3VudHJ5LTVmMjFmOS50aGlyZHdlYi1wcmV2aWV3LmNvbSIsIm5leHRDb21taXRTdGF0dXMiOiJERVBMT1lFRCIsImxpdmVGZWVkYmFjayI6eyJyZXNvbHZlZCI6MCwidW5yZXNvbHZlZCI6MCwidG90YWwiOjAsImxpbmsiOiJ0aGlyZHdlYnBsYXlncm91bmQtZ2l0LWNvZGV4LWFkZC1vcHRpb24tdG8tbGltaXQtY291bnRyeS01ZjIxZjkudGhpcmR3ZWItcHJldmlldy5jb20ifX1dfQ==
**The latest updates on your projects**. Learn more about [Vercel for Git ↗︎](https://vercel.link/github-learn-more)

| Name | Status | Preview | Comments | Updated (UTC) |
| :--- | :----- | :------ | :------- | :------ |
| **docs-v2** | ✅ Ready ([Inspect](https://vercel.com/thirdweb/docs-v2/Dhzk7K1qkbpxo3c8U1TPbt6w16XX)) | [Visit Preview](https://docs-v2-git-codex-add-option-to-limit-country-selector.thirdweb-preview.com) | 💬 [**Add feedback**](https://vercel.live/open-feedback/docs-v2-git-codex-add-option-to-limit-country-selector.thirdweb-preview.com?via=pr-comment-feedback-link) | May 22, 2025 5:12am |
| **login** | ✅ Ready ([Inspect](https://vercel.com/thirdweb/login/5LsCXJd6RougQ5PNzUuVeBTst6oA)) | [Visit Preview](https://login-git-codex-add-option-to-limit-country-selector.thirdweb-preview.com) | 💬 [**Add feedback**](https://vercel.live/open-feedback/login-git-codex-add-option-to-limit-country-selector.thirdweb-preview.com?via=pr-comment-feedback-link) | May 22, 2025 5:12am |
| **thirdweb_playground** | ✅ Ready ([Inspect](https://vercel.com/thirdweb/thirdweb_playground/4BMKLSCTUhNHsaFpLwNJe55acxfs)) | [Visit Preview](https://thirdwebplayground-git-codex-add-option-to-limit-country-5f21f9.thirdweb-preview.com) | 💬 [**Add feedback**](https://vercel.live/open-feedback/thirdwebplayground-git-codex-add-option-to-limit-country-5f21f9.thirdweb-preview.com?via=pr-comment-feedback-link) | May 22, 2025 5:12am |
| **thirdweb-www** | ✅ Ready ([Inspect](https://vercel.com/thirdweb/thirdweb-www/j2sQBmtVwTNsWZe8vckPmfXJQRXw)) | [Visit Preview](https://thirdweb-www-git-codex-add-option-to-limit-country-selector.thirdweb-preview.com) | 💬 [**Add feedback**](https://vercel.live/open-feedback/thirdweb-www-git-codex-add-option-to-limit-country-selector.thirdweb-preview.com?via=pr-comment-feedback-link) | May 22, 2025 5:12am |
| **wallet-ui** | ✅ Ready ([Inspect](https://vercel.com/thirdweb/wallet-ui/Ca7dqM35qvLXE6B82HnJhkyu6KnC)) | [Visit Preview](https://wallet-ui-git-codex-add-option-to-limit-country-selector.thirdweb-preview.com) | 💬 [**Add feedback**](https://vercel.live/open-feedback/wallet-ui-git-codex-add-option-to-limit-country-selector.thirdweb-preview.com?via=pr-comment-feedback-link) | May 22, 2025 5:12am |






author_association: NONE
user: login: graphite-app[bot]
created_at: 2025-05-20T03:24:41Z
body: ## How to use the Graphite Merge Queue

Add either label to this PR to merge it via the merge queue:
- <kbd>merge-queue</kbd> - adds this PR to the back of the merge queue
- <kbd>hotfix</kbd> - for urgent hot fixes, skip the queue and merge this PR next

You must have a Graphite account in order to use the merge queue. Sign up using [this link](https://app.graphite.dev/invite/github/thirdweb-dev?ref=merge-queue-instructions-comment&prId=6249155542).

<h2></h2>
<sub>

An organization admin has enabled the [Graphite Merge Queue](https://graphite.dev/docs/graphite-merge-queue) in this repository.

</sub>

<sub>

Please do not merge from GitHub as this will restart CI on PRs being processed by the merge queue.

</sub>
author_association: CONTRIBUTOR
user: login: linear[bot]
created_at: 2025-05-20T03:25:40Z
body: <p><a href="https://linear.app/thirdweb/issue/TOOL-4529/allowedcountrycodes-flag-for-connect-button">TOOL-4529 allowedCountryCodes flag for connect button</a></p>
author_association: NONE
user: login: coderabbitai[bot]
created_at: 2025-05-20T18:11:40Z
body: <!-- This is an auto-generated comment: summarize by coderabbit.ai -->
<!-- walkthrough_start -->

"""
## Walkthrough

This update introduces a new configuration option, `allowedSmsCountryCodes`, to restrict which countries appear in the SMS login country selector. The change spans type definitions, UI components, and tests, ensuring that only specified countries are selectable for SMS-based authentication. No breaking changes or removals are included.

## Changes

| File(s)                                                                                      | Change Summary                                                                                                      |
|---------------------------------------------------------------------------------------------|---------------------------------------------------------------------------------------------------------------------|
| .changeset/limited-country-dropdown.md                                                      | Documents the addition of the `allowedSmsCountryCodes` option for SMS login country selection.                      |
| packages/thirdweb/src/react/web/wallets/in-app/CountrySelector.tsx                          | Adds `allowedCountryCodes` prop; filters country list in the selector based on this prop if provided.               |
| packages/thirdweb/src/react/web/wallets/in-app/InputSelectionUI.tsx                         | Adds `allowedSmsCountryCodes` prop; initializes selection and passes allowed codes to `CountrySelector`.            |
| packages/thirdweb/src/react/web/wallets/shared/ConnectWalletSocialOptions.tsx               | Passes `allowedSmsCountryCodes` from wallet config to `InputSelectionUI` when rendering phone login input.          |
| packages/thirdweb/src/wallets/ecosystem/types.ts                                            | Adds optional `allowedSmsCountryCodes` property to the `auth` object in `EcosystemWalletCreationOptions` type.      |
| packages/thirdweb/src/wallets/in-app/core/wallet/types.ts                                   | Adds optional `allowedSmsCountryCodes` property to the `auth` object in `InAppWalletCreationOptions` type.          |
| packages/thirdweb/src/react/web/wallets/in-app/InputSelectionUI.test.tsx                    | Adds a test verifying the country selector filters options based on `allowedSmsCountryCodes`.                       |

## Sequence Diagram(s)

```mermaid
sequenceDiagram
    participant App
    participant WalletConfig
    participant InputSelectionUI
    participant CountrySelector

    App->>WalletConfig: Get auth config (with allowedSmsCountryCodes)
    App->>InputSelectionUI: Render with allowedSmsCountryCodes prop
    InputSelectionUI->>CountrySelector: Pass allowedCountryCodes prop
    CountrySelector->>CountrySelector: Filter country list by allowedCountryCodes
    CountrySelector-->>InputSelectionUI: Render filtered selector
```

## Assessment against linked issues

| Objective                                                                                           | Addressed | Explanation                                  |
|---------------------------------------------------------------------------------------------------|-----------|----------------------------------------------|
| Add `allowedCountryCodes` flag to restrict countries shown in phone login country selector (TOOL-4529) | ✅         |                                              |
| Ensure `allowedCountryCodes` works alongside `defaultSmsCountryCode` without breaking existing logic | ✅         |                                              |
| Provide ability to configure allowed countries via wallet config and pass to UI components          | ✅         |                                              |
"""

<!-- walkthrough_end -->


---

<details>
<summary>📜 Recent review details</summary>

**Configuration used: CodeRabbit UI**
**Review profile: CHILL**
**Plan: Pro**


<details>
<summary>📥 Commits</summary>

Reviewing files that changed from the base of the PR and between 9a2e6648bec2f5a3b29d0b0e9dd8b4b5154be7b5 and 0f4fa257ce26bbd782a0099fa42a8fdf7fb54e07.

</details>

<details>
<summary>📒 Files selected for processing (1)</summary>

* `packages/thirdweb/src/react/web/wallets/in-app/CountrySelector.tsx` (1 hunks)

</details>

<details>
<summary>🚧 Files skipped from review as they are similar to previous changes (1)</summary>

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

</details>

<details>
<summary>⏰ Context from checks skipped due to timeout of 90000ms (8)</summary>

* GitHub Check: E2E Tests (pnpm, esbuild)
* GitHub Check: E2E Tests (pnpm, webpack)
* GitHub Check: Unit Tests
* GitHub Check: Build Packages
* GitHub Check: E2E Tests (pnpm, vite)
* GitHub Check: Size
* GitHub Check: Lint Packages
* GitHub Check: Analyze (javascript)

</details>

</details>
<!-- internal state start -->


<!-- DwQgtGAEAqAWCWBnSTIEMB26CuAXA9mAOYCmGJATmriQCaQDG+Ats2bgFyQAOFk+AIwBWJBrngA3EsgEBPRvlqU0AgfFwA6NPEgQAfACgjoCEYDEZyAAUASpETZWaCrKNxU3bABsvkCiQBHbGlcABpIcVwvOkgAIgBtAGUAEQBpAF1IAElmbmi2DFx0H3wAdzpE5kQAYXxsQpdapWR8bnF8DFDYlAbFbAZpdEhyUsgAMxJqbH8I/AjYEkgU1PnqSDIVaOQveGZ1eAwiecXEEmixTcWmetwKeEGx/D5EgFlEyC98IgPICXg0dBYAAGaBK5VolRqdQasia0iB/Da8A6GhgC0YsEwpHQu2QBHWGExGAGkGwpz4JAAHtxKPdiYs5DwKPg/rQDkdmE8rh1bvhfCzKMcFDcXPYzqJ2lhePgBohkD8BPhcLAemA0NxuID6KJ8IhZIgaMxIKVQdFcIgNEZUiR5NhuLRqIMDgwvNglOhaGzDkKQWCKlVaiLYYp4YjJcUOkREPB3crFlSkOJvUClGM0N5cJDAzC4QjHs83h8vgdUXBFrs8iQCrhqMisJy2WN7shTlIqL4mLkOuxkJh6LhZDTEFwgbUMOQxAB1U0kTMy/5eADySI6FvNlIRqDtDpo/bmzqe3CejqFIzDdYA3JAgVkMJ5M+KxHWAKpZDTrzfIBvwJsxfEHfZQXgAAvRY42FGEFHdAQ0FOegOmvU0yn9KEgzhRAgSvUdoVuWREkfAgKHfRANxQZAyCJAY93GeAvBoPg+0gNlEDyNB5A6Lx5HApDwQg25m0gGC4P4LBlVQVpJUtAwAEFPX2DpTVkcIARoA1GFg8te09GIfhvO88Hw85JVfd8QmI0j8TbH8uMxIpwOuSCmzo2lvQEEhMSkXtyOpCUYlKBZgR4lDs1w9DP3QDUdjoKToBCdljVg9BcENNoYjJeKgW4O8jVU3AgXCAQ8BQIo01omJaGCWYhnIXBSieABrBRxwlSR1HkJAHEWAAKIEmGasRIAAUQACUXRJoGfAA5GxBuk6phqBABKUt0U8Hw/ECYI1LQT1/DlJ05Uq6BF0XAAZMAABYAFYACYAE4tTI9AJG0LxLnGJ4Nr+EhRjWWBku4YcAHoge+ZVsAEDROyBsSKFocoBDAJQJCBoRECBtavCBgB2AAGO7cak/RjHAKAyHgsYcAIYgyGUXcFFYdguF4fhhBazzBPkJglCoVR1C0HRiZMKB3HlXssHTanSHIKh6c7asuCoUYHCcUVGW55Q+c0bRdDAQwSdMAwoaJUhTlwIGdj2XcwAc3CkeZe0ygwDRmFoDgDFiT2DAsSBpKyGmZcdegVeYZx2MphgTekIxpOGH6eGoSOel5CrZSFFRaLaqq9v4gbwNOIz3ttu4Hk+153k+b4sEZHavSOTBEL9CEAxwxoQww88UTRcSVywVBmngIhyGotzSWE0FI2jWN0QTA0MtTdM6KzVvgyUBEzaTIgVquKOCUuZA+qbIhplrBD8Ut9RjQQJPi4EslKAPhuC4lJjpni8uwCEmJJYC8QGFP52RhzCWGks5WWdY8RzHAkoF0zgAEtEplSI8FB6afU8AIHYDACSRGbEYSa3ZLSe1iEYCAYAjDcDQAweqaBTYwwQHDBGQNEAUAYEDfwlDzaMJND4Wc6MDhqg1EDEKLhDISieOZd2RDvYgP9tLOmMQQ5h34BHKOiA3DomwkGURYgngIk7EecghQADkyBpSA2GGUHoLo3SLAbhJOsoJG6fHBMI1eoZnBUHDvYO0yC5Yr2yIkRcUFpDb2TpQDAjidhqXwBHVuAlmKsVkDEHqDgNRPF3MI5sAAxJ4kIlpPT6mySUikaJgLoFwH8TjkK0FcWFJ60pWTfwwPQDAHQwBVjaEpIUUSiioCcvRP8+5iSundBxLmcTBj+V1IsLIgTgm9hmLpIKNSV5hSvEqBYFBShIBIOES+aYfAyEoY1fE4ExjeF8ECVJvjgoTI7j0/gDEmIkDTBmew7JoiQGfO8dgopKlXJ8ek25IpmzhXqKmA40Vu5fkUD+AS4FK7wCwUoeiewMDxX8kilUt9BjqhpM4HoQpaAO1oE7TmHo65NSKQ43w/SXJHC/vBUS6IzxmKksA32YD4FVWgaIN64DVzKPWNSIF8E+DoMwdg/Y0cDBQFkkoeCvdHEUKoGweiVSXGrPbgAfi4IkQFKDgUwniOkBEpyNGuO0YRPRLADHsCZK0C0HsvaysNhQqhNDpB0PgAwkgAgmEsLYZMMQQMuEznNEDfheKga3nvFal8b5coSOdcQn2fsA7yODo4UOooYkYixDK2OZ5crqVOAlLSCqeUaNjQZAiCabVdkMXZEIkDfi0jGDZNY9l/HPyfAhYlrRSWlCwHSig8pzSdwwEc4SZ8NHLOXmhduCI2VojAiESAnIqF4g0aQXAlqCK6PGPUPtok5j+FwNMLAsQsiTUgAAajugARm6IxfwzSH5Cn0d2Qoxp1Aql9M4o1oUl1ijsnMIE8Rr2TViOEWIAAhGwsRTWoiyHZAK6B9ooO3V29EA7HbDsnfKYZNi4i3jZGgF9zS4hwaoMBWi3RCpFCpNY90sRnzovpokGsqkuhNSbBQNFRxlQ4e5I2+1TAKD+DEJxDaBo7hiG3dyIMhGq22Kbh8RM7LpGcvoty81iwYH8u5XmpBorHk8AhpK9g0q1GysgPg/NhxBj4lM4asVFmMFIqlQOZ5sCBVTuNJQRYoclDrIwDJgExb13/zLSaCtfk/0/HArPTeER10OHUCQQhLrSHkOOZ69GsN4Z+oDaw9hIaw08IjVGwRNaHxGQTcmqRabZG01lgo7NSi82RwLbZss146vxo6K+Btdqf1xYJJRGINc5Leki/HexClfBmI1UBtuzR8qAnQJJtiQrrlmfLnxUUGsLSrp6IBXwBoTz5mvMXNxt5HgIgm9uIOVVeDIjuOIUCQp+NqTu8E8YzIjQAeqQunMIHKmXxS+LegqBWkYHabkAc4QDk7FcscqqQI2PvDvc+hEYyUCU3IH+wUKYXmL0zC3Rda8LF8BB+CMHwGNvbcWA0mMUL5XyQiT4Lp4FNEwitYer9TaLGjCkyQSQzm51N0Z+t9xO35B/ABPN0YK2IlsHoPTugtSl3hA2J570l98Q53k0UT6o6xSFwwUphoAlGUiXmKgHpqIHMbMFIihgevJOfSJLQNHRBwifT6ryWlzjy0bthb+WgWm01cslK23lfnjOIJFW58zEqvPWfEDKuV2lFXFOWw7VbzdULg+aLqpYBrdyy9kCas1UDq36Xqy1YbWRRvfqKGYp1UjXVkIMO66htCiuMOYWV4NnCSvcLNOjRAmJ/C0CER0CcuBpxVcSPOUEy549Na9i1jN7Ws2qy8T1pzfX0Qn+xLXFsVePritgtGObEs5IF4dZqLXJedfM/0wNpvQ2MAjYZjGyKH8jIA2nfTuG9HAm4FgG7CLCrh6HvBWjh3jhW1QEQDqBYRiDGCB2vCn1nA0F3THCPi6kWm1S0DwFgDIPnSpzL3hFRCsH8D+DqEQE4kD3C3kDJ1eSXhoKZxICe0SgoX2mojEgPltQ7xdzmDdz4A93M2D2ZFD0sVQDQDGAmDEGiiAW01AV03j1U18yMx0JM1T1QXFUs0z0KBszwQIRTRITdXyyH3oWK39VH1DXDXRh1D1ANCrBhkHBCXNEkV3xkX31e0UVzRUV6xjjjlGEW251f0oB83fxrzqTzQHBpGvH1TSTcxrzr3D1rkGR9B/nxzZgGm2TEmZUWCBEGiYA8MNFXzNGqHYUlC3wgTNR8KQNMQdjiPkH8F4GkB7CGAeTzWWSO3GWaCqgSTenajKOGMtzET4Bu0Ox/ms3/kkns0kLjD4Av0mSCw3R2iyw0Nj20IgV0MMzgQMJTxuXcwzywSz1wTs3lRiGiOVQ6JQQ4OoNL14MQAr3SIuKyNNV0JBAoMKJEAGiSxniML/B8OvEqN1H1BqPDXqMmEaN7g7l0gHwK29V9ScMDTwIjXcNhK8JSN8Iwmy2IV7zyw9XsJ9UcNKxcKqz4QR2jQkxIFpLNG8KHGIn8NTUCLkQP28SPyFU2LPx3gLQpV7EiMnSeNaE6OL0SJA2/wBOVCBJfhKIQCmL0mkg1FqNnARIASaNXBaJpDaNiJeKegbg8V2zzSBG+NFRrwRBeldFxSo26L2j6IRUTCFSGP+xOzGKQESUJW7WU17UIlvyWELEWPMOWLrFCRS3nnJwzFlJpzMWlP8FDgOGQGPSjmj32JATjyOO/xOP8wQWFQuPT1MOuPMOz1s1z0rUeMLylJNISJ4Ll0+L1SrzW1rz+PlIKNZmBN6TVNvA1O4C1L3QaLrD1KnQNPLGBDRMpMxJpJxPpIEW4CBiZJZNnDZKJKBBJJsP1mFgJApipkIB5Ne3liZj8DQGVk6zVhGM1jUG1kFj1gMD3PlnUAAH0YxEBXzGD7hwRXyrsUFdZdzSZIA7oxgBA7oAA2AAZiulxgEAYGxhIAgquiukfWxloCgtApIBIGxiwpujGGxggomAEFoBuhuhghukAqfOArujQBuiQogougAA43IGB8Kro0AoKBB7paA4LcYSA7pPQWKLoBBUKroRKcLRKqK9zcYxgLo0wborpsYBgboILVBaBsYmKbo0BcZ8ZQK0ALptKmKxhaACKwLxKSBcZsYqLqKIAGYrZ3zaBPzvyfo6BXzyZAKgA== -->

<!-- internal state end -->
<!-- finishing_touch_checkbox_start -->

<details open="true">
<summary>✨ Finishing Touches</summary>

- [ ] <!-- {"checkboxId": "7962f53c-55bc-4827-bfbf-6a18da830691"} --> 📝 Generate Docstrings

</details>

<!-- finishing_touch_checkbox_end -->
<!-- tips_start -->

---



<details>
<summary>🪧 Tips</summary>

### Chat

There are 3 ways to chat with [CodeRabbit](https://coderabbit.ai?utm_source=oss&utm_medium=github&utm_campaign=thirdweb-dev/js&utm_content=7090):

- Review comments: Directly reply to a review comment made by CodeRabbit. Example:
  - `I pushed a fix in commit <commit_id>, please review it.`
  - `Explain this complex logic.`
  - `Open a follow-up GitHub issue for this discussion.`
- Files and specific lines of code (under the "Files changed" tab): Tag `@coderabbitai` in a new review comment at the desired location with your query. Examples:
  - `@coderabbitai explain this code block.`
  -	`@coderabbitai modularize this function.`
- PR comments: Tag `@coderabbitai` in a new PR comment to ask questions about the PR branch. For the best results, please provide a very specific query, as very limited context is provided in this mode. Examples:
  - `@coderabbitai gather interesting stats about this repository and render them as a table. Additionally, render a pie chart showing the language distribution in the codebase.`
  - `@coderabbitai read src/utils.ts and explain its main purpose.`
  - `@coderabbitai read the files in the src/scheduler package and generate a class diagram using mermaid and a README in the markdown format.`
  - `@coderabbitai help me debug CodeRabbit configuration file.`

### Support

Need help? Create a ticket on our [support page](https://www.coderabbit.ai/contact-us/support) for assistance with any issues or questions.

Note: Be mindful of the bot's finite context window. It's strongly recommended to break down tasks such as reading entire modules into smaller chunks. For a focused discussion, use review comments to chat about specific files and their changes, instead of using the PR comments.

### CodeRabbit Commands (Invoked using PR comments)

- `@coderabbitai pause` to pause the reviews on a PR.
- `@coderabbitai resume` to resume the paused reviews.
- `@coderabbitai review` to trigger an incremental review. This is useful when automatic reviews are disabled for the repository.
- `@coderabbitai full review` to do a full review from scratch and review all the files again.
- `@coderabbitai summary` to regenerate the summary of the PR.
- `@coderabbitai generate docstrings` to [generate docstrings](https://docs.coderabbit.ai/finishing-touches/docstrings) for this PR.
- `@coderabbitai generate sequence diagram` to generate a sequence diagram of the changes in this PR.
- `@coderabbitai resolve` resolve all the CodeRabbit review comments.
- `@coderabbitai configuration` to show the current CodeRabbit configuration for the repository.
- `@coderabbitai help` to get help.

### Other keywords and placeholders

- Add `@coderabbitai ignore` anywhere in the PR description to prevent this PR from being reviewed.
- Add `@coderabbitai summary` to generate the high-level summary at a specific location in the PR description.
- Add `@coderabbitai` anywhere in the PR title to generate the title automatically.

### CodeRabbit Configuration File (`.coderabbit.yaml`)

- You can programmatically configure CodeRabbit by adding a `.coderabbit.yaml` file to the root of your repository.
- Please see the [configuration documentation](https://docs.coderabbit.ai/guides/configure-coderabbit) for more information.
- If your editor has YAML language server enabled, you can add the path at the top of this file to enable auto-completion and validation: `# yaml-language-server: $schema=https://coderabbit.ai/integrations/schema.v2.json`

### Documentation and Community

- Visit our [Documentation](https://docs.coderabbit.ai) for detailed information on how to use CodeRabbit.
- Join our [Discord Community](http://discord.gg/coderabbit) to get help, request features, and share feedback.
- Follow us on [X/Twitter](https://twitter.com/coderabbitai) for updates and announcements.

</details>

<!-- tips_end -->
author_association: CONTRIBUTOR
user: login: github-actions[bot]
created_at: 2025-05-22T01:10:55Z
body: ## size-limit report 📦 
| Path                                    | Size           | Loading time (3g) | Running time (snapdragon) | Total time |
| --------------------------------------- | -------------- | ----------------- | ------------------------- | ---------- |
| thirdweb (esm)                          | 56.64 KB (0%)  | 1.2 s (0%)        | 171 ms (+137.16% 🔺)      | 1.4 s      |
| thirdweb (cjs)                          | 309.36 KB (0%) | 6.2 s (0%)        | 560 ms (+4.37% 🔺)        | 6.8 s      |
| thirdweb (minimal + tree-shaking)       | 5.69 KB (0%)   | 114 ms (0%)       | 56 ms (+1128.3% 🔺)       | 170 ms     |
| thirdweb/chains (tree-shaking)          | 531 B (0%)     | 11 ms (0%)        | 17 ms (+862.75% 🔺)       | 27 ms      |
| thirdweb/react (minimal + tree-shaking) | 19.5 KB (0%)   | 390 ms (0%)       | 69 ms (+438.45% 🔺)       | 459 ms     |
author_association: CONTRIBUTOR
user: login: codecov[bot]
created_at: 2025-05-22T01:12:13Z
body: ## [Codecov](https://app.codecov.io/gh/thirdweb-dev/js/pull/7090?dropdown=coverage&src=pr&el=h1&utm_medium=referral&utm_source=github&utm_content=comment&utm_campaign=pr+comments&utm_term=thirdweb-dev) Report
Attention: Patch coverage is `57.14286%` with `9 lines` in your changes missing coverage. Please review.
> Project coverage is 55.63%. Comparing base [(`6104401`)](https://app.codecov.io/gh/thirdweb-dev/js/commit/61044013c88616708720a7bb554d908f846f4e52?dropdown=coverage&el=desc&utm_medium=referral&utm_source=github&utm_content=comment&utm_campaign=pr+comments&utm_term=thirdweb-dev) to head [(`0f4fa25`)](https://app.codecov.io/gh/thirdweb-dev/js/commit/0f4fa257ce26bbd782a0099fa42a8fdf7fb54e07?dropdown=coverage&el=desc&utm_medium=referral&utm_source=github&utm_content=comment&utm_campaign=pr+comments&utm_term=thirdweb-dev).
> Report is 31 commits behind head on main.

| [Files with missing lines](https://app.codecov.io/gh/thirdweb-dev/js/pull/7090?dropdown=coverage&src=pr&el=tree&utm_medium=referral&utm_source=github&utm_content=comment&utm_campaign=pr+comments&utm_term=thirdweb-dev) | Patch % | Lines |
|---|---|---|
| [...b/src/react/web/wallets/in-app/CountrySelector.tsx](https://app.codecov.io/gh/thirdweb-dev/js/pull/7090?src=pr&el=tree&filepath=packages%2Fthirdweb%2Fsrc%2Freact%2Fweb%2Fwallets%2Fin-app%2FCountrySelector.tsx&utm_medium=referral&utm_source=github&utm_content=comment&utm_campaign=pr+comments&utm_term=thirdweb-dev#diff-cGFja2FnZXMvdGhpcmR3ZWIvc3JjL3JlYWN0L3dlYi93YWxsZXRzL2luLWFwcC9Db3VudHJ5U2VsZWN0b3IudHN4) | 46.15% | [7 Missing :warning: ](https://app.codecov.io/gh/thirdweb-dev/js/pull/7090?src=pr&el=tree&utm_medium=referral&utm_source=github&utm_content=comment&utm_campaign=pr+comments&utm_term=thirdweb-dev) |
| [.../web/wallets/shared/ConnectWalletSocialOptions.tsx](https://app.codecov.io/gh/thirdweb-dev/js/pull/7090?src=pr&el=tree&filepath=packages%2Fthirdweb%2Fsrc%2Freact%2Fweb%2Fwallets%2Fshared%2FConnectWalletSocialOptions.tsx&utm_medium=referral&utm_source=github&utm_content=comment&utm_campaign=pr+comments&utm_term=thirdweb-dev#diff-cGFja2FnZXMvdGhpcmR3ZWIvc3JjL3JlYWN0L3dlYi93YWxsZXRzL3NoYXJlZC9Db25uZWN0V2FsbGV0U29jaWFsT3B0aW9ucy50c3g=) | 0.00% | [2 Missing :warning: ](https://app.codecov.io/gh/thirdweb-dev/js/pull/7090?src=pr&el=tree&utm_medium=referral&utm_source=github&utm_content=comment&utm_campaign=pr+comments&utm_term=thirdweb-dev) |

:x: Your patch status has failed because the patch coverage (57.14%) is below the target coverage (80.00%). You can increase the patch coverage or adjust the [target](https://docs.codecov.com/docs/commit-status#target) coverage.

<details><summary>Additional details and impacted files</summary>


```diff
@@            Coverage Diff             @@
##             main    #7090      +/-   ##
==========================================
- Coverage   55.81%   55.63%   -0.18%     
==========================================
  Files         900      902       +2     
  Lines       57848    58148     +300     
  Branches     4067     4094      +27     
==========================================
+ Hits        32288    32353      +65     
- Misses      25454    25690     +236     
+ Partials      106      105       -1     
```

| [Flag](https://app.codecov.io/gh/thirdweb-dev/js/pull/7090/flags?src=pr&el=flags&utm_medium=referral&utm_source=github&utm_content=comment&utm_campaign=pr+comments&utm_term=thirdweb-dev) | Coverage Δ | |
|---|---|---|
| [packages](https://app.codecov.io/gh/thirdweb-dev/js/pull/7090/flags?src=pr&el=flag&utm_medium=referral&utm_source=github&utm_content=comment&utm_campaign=pr+comments&utm_term=thirdweb-dev) | `55.63% <57.14%> (-0.18%)` | :arrow_down: |

| [Files with missing lines](https://app.codecov.io/gh/thirdweb-dev/js/pull/7090?dropdown=coverage&src=pr&el=tree&utm_medium=referral&utm_source=github&utm_content=comment&utm_campaign=pr+comments&utm_term=thirdweb-dev) | Coverage Δ | |
|---|---|---|
| [.../src/react/web/wallets/in-app/InputSelectionUI.tsx](https://app.codecov.io/gh/thirdweb-dev/js/pull/7090?src=pr&el=tree&filepath=packages%2Fthirdweb%2Fsrc%2Freact%2Fweb%2Fwallets%2Fin-app%2FInputSelectionUI.tsx&utm_medium=referral&utm_source=github&utm_content=comment&utm_campaign=pr+comments&utm_term=thirdweb-dev#diff-cGFja2FnZXMvdGhpcmR3ZWIvc3JjL3JlYWN0L3dlYi93YWxsZXRzL2luLWFwcC9JbnB1dFNlbGVjdGlvblVJLnRzeA==) | `63.96% <100.00%> (+1.69%)` | :arrow_up: |
| [.../web/wallets/shared/ConnectWalletSocialOptions.tsx](https://app.codecov.io/gh/thirdweb-dev/js/pull/7090?src=pr&el=tree&filepath=packages%2Fthirdweb%2Fsrc%2Freact%2Fweb%2Fwallets%2Fshared%2FConnectWalletSocialOptions.tsx&utm_medium=referral&utm_source=github&utm_content=comment&utm_campaign=pr+comments&utm_term=thirdweb-dev#diff-cGFja2FnZXMvdGhpcmR3ZWIvc3JjL3JlYWN0L3dlYi93YWxsZXRzL3NoYXJlZC9Db25uZWN0V2FsbGV0U29jaWFsT3B0aW9ucy50c3g=) | `35.61% <0.00%> (-0.17%)` | :arrow_down: |
| [...b/src/react/web/wallets/in-app/CountrySelector.tsx](https://app.codecov.io/gh/thirdweb-dev/js/pull/7090?src=pr&el=tree&filepath=packages%2Fthirdweb%2Fsrc%2Freact%2Fweb%2Fwallets%2Fin-app%2FCountrySelector.tsx&utm_medium=referral&utm_source=github&utm_content=comment&utm_campaign=pr+comments&utm_term=thirdweb-dev#diff-cGFja2FnZXMvdGhpcmR3ZWIvc3JjL3JlYWN0L3dlYi93YWxsZXRzL2luLWFwcC9Db3VudHJ5U2VsZWN0b3IudHN4) | `90.19% <46.15%> (+0.61%)` | :arrow_up: |

... and [24 files with indirect coverage changes](https://app.codecov.io/gh/thirdweb-dev/js/pull/7090/indirect-changes?src=pr&el=tree-more&utm_medium=referral&utm_source=github&utm_content=comment&utm_campaign=pr+comments&utm_term=thirdweb-dev)

</details>
<details><summary> :rocket: New features to boost your workflow: </summary>

- :snowflake: [Test Analytics](https://docs.codecov.com/docs/test-analytics): Detect flaky tests, report on failures, and find test suite problems.
- :package: [JS Bundle Analysis](https://docs.codecov.com/docs/javascript-bundle-analysis): Save yourself from yourself by tracking and limiting bundle sizes in JS merges.
</details>
author_association: NONE