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>; + allowedCountryCodes?: SupportedSmsCountry[]; }) { const selectRef = useRef(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( + , + ); + + 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(); @@ -69,6 +74,7 @@ export function InputSelectionUI(props: { )} ) : (