@dynamic-labs/sdk-react-core 2.0.0-alpha.20 → 2.0.0-alpha.22

package/src/lib/views/EnterPasswordView/EnterPasswordView.cjs

@@ -72,14 +72,13 @@ require('../../context/PasskeyContext/PasskeyContext.cjs');
 require('../../widgets/DynamicWidget/views/ManagePasskeysWidgetView/PasskeyCard/PasskeyCard.cjs');
 require('../../components/InlineWidget/InlineWidget.cjs');
 require('../../components/IsBrowser/IsBrowser.cjs');
-require('../../components/PhoneNumberField/usePhoneInputLogic/usePhoneInputLogic.cjs');
 require('../../components/Popper/Popper/Popper.cjs');
 require('../../components/Popper/PopperContext/PopperContext.cjs');
 require('qrcode');
 require('../WalletList/WalletList.cjs');
 require('../../widgets/DynamicBridgeWidget/views/WalletsView/components/SecondaryWallets/SecondaryWallets.cjs');
 require('@hcaptcha/react-hcaptcha');
-require('../../locale/locale.cjs');
+require('../LoginView/sections/PhoneNumberSignInSection/PhoneNumberSignInSection.cjs');
 var ToggleVisibilityButton = require('../../components/ToggleVisibilityButton/ToggleVisibilityButton.cjs');
 
 const EnterPasswordView = ({ mutation, onSuccess, onError, closeView = true, }) => {

package/src/lib/views/EnterPasswordView/EnterPasswordView.js

@@ -68,14 +68,13 @@ import '../../context/PasskeyContext/PasskeyContext.js';
 import '../../widgets/DynamicWidget/views/ManagePasskeysWidgetView/PasskeyCard/PasskeyCard.js';
 import '../../components/InlineWidget/InlineWidget.js';
 import '../../components/IsBrowser/IsBrowser.js';
-import '../../components/PhoneNumberField/usePhoneInputLogic/usePhoneInputLogic.js';
 import '../../components/Popper/Popper/Popper.js';
 import '../../components/Popper/PopperContext/PopperContext.js';
 import 'qrcode';
 import '../WalletList/WalletList.js';
 import '../../widgets/DynamicBridgeWidget/views/WalletsView/components/SecondaryWallets/SecondaryWallets.js';
 import '@hcaptcha/react-hcaptcha';
-import '../../locale/locale.js';
+import '../LoginView/sections/PhoneNumberSignInSection/PhoneNumberSignInSection.js';
 import { ToggleVisibilityButton } from '../../components/ToggleVisibilityButton/ToggleVisibilityButton.js';
 
 const EnterPasswordView = ({ mutation, onSuccess, onError, closeView = true, }) => {

package/src/lib/views/FarcasterConnectView/FarcasterConnectView.cjs

@@ -65,7 +65,6 @@ require('../../context/PasskeyContext/PasskeyContext.cjs');
 require('../../widgets/DynamicWidget/views/ManagePasskeysWidgetView/PasskeyCard/PasskeyCard.cjs');
 require('../../components/InlineWidget/InlineWidget.cjs');
 require('../../components/IsBrowser/IsBrowser.cjs');
-require('../../components/PhoneNumberField/usePhoneInputLogic/usePhoneInputLogic.cjs');
 require('../../components/Popper/Popper/Popper.cjs');
 require('../../components/Popper/PopperContext/PopperContext.cjs');
 require('qrcode');
@@ -73,7 +72,7 @@ var QrCodeWrapper = require('../../components/QrCodeWrapper/QrCodeWrapper.cjs');
 require('../WalletList/WalletList.cjs');
 require('../../widgets/DynamicBridgeWidget/views/WalletsView/components/SecondaryWallets/SecondaryWallets.cjs');
 require('@hcaptcha/react-hcaptcha');
-require('../../locale/locale.cjs');
+require('../LoginView/sections/PhoneNumberSignInSection/PhoneNumberSignInSection.cjs');
 
 const FarcasterConnectView = ({ url }) => {
     const iconThemeVariant = useIconThemeVariant.useIconThemeVariant();

package/src/lib/views/FarcasterConnectView/FarcasterConnectView.js

@@ -61,7 +61,6 @@ import '../../context/PasskeyContext/PasskeyContext.js';
 import '../../widgets/DynamicWidget/views/ManagePasskeysWidgetView/PasskeyCard/PasskeyCard.js';
 import '../../components/InlineWidget/InlineWidget.js';
 import '../../components/IsBrowser/IsBrowser.js';
-import '../../components/PhoneNumberField/usePhoneInputLogic/usePhoneInputLogic.js';
 import '../../components/Popper/Popper/Popper.js';
 import '../../components/Popper/PopperContext/PopperContext.js';
 import 'qrcode';
@@ -69,7 +68,7 @@ import { QrCodeWrapper } from '../../components/QrCodeWrapper/QrCodeWrapper.js';
 import '../WalletList/WalletList.js';
 import '../../widgets/DynamicBridgeWidget/views/WalletsView/components/SecondaryWallets/SecondaryWallets.js';
 import '@hcaptcha/react-hcaptcha';
-import '../../locale/locale.js';
+import '../LoginView/sections/PhoneNumberSignInSection/PhoneNumberSignInSection.js';
 
 const FarcasterConnectView = ({ url }) => {
     const iconThemeVariant = useIconThemeVariant();

package/src/lib/views/LoginView/LoginView.cjs

@@ -69,7 +69,6 @@ require('../../context/PasskeyContext/PasskeyContext.cjs');
 require('../../widgets/DynamicWidget/views/ManagePasskeysWidgetView/PasskeyCard/PasskeyCard.cjs');
 require('../../components/InlineWidget/InlineWidget.cjs');
 require('../../components/IsBrowser/IsBrowser.cjs');
-require('../../components/PhoneNumberField/usePhoneInputLogic/usePhoneInputLogic.cjs');
 require('../../components/Popper/Popper/Popper.cjs');
 require('../../components/Popper/PopperContext/PopperContext.cjs');
 require('qrcode');

package/src/lib/views/LoginView/LoginView.js

@@ -65,7 +65,6 @@ import '../../context/PasskeyContext/PasskeyContext.js';
 import '../../widgets/DynamicWidget/views/ManagePasskeysWidgetView/PasskeyCard/PasskeyCard.js';
 import '../../components/InlineWidget/InlineWidget.js';
 import '../../components/IsBrowser/IsBrowser.js';
-import '../../components/PhoneNumberField/usePhoneInputLogic/usePhoneInputLogic.js';
 import '../../components/Popper/Popper/Popper.js';
 import '../../components/Popper/PopperContext/PopperContext.js';
 import 'qrcode';

package/src/lib/views/LoginView/sections/EmailSignInSection/LoginEmailForm.cjs

@@ -5,7 +5,6 @@ Object.defineProperty(exports, '__esModule', { value: true });
 var _tslib = require('../../../../../../_virtual/_tslib.cjs');
 var jsxRuntime = require('react/jsx-runtime');
 var React = require('react');
-var reactI18next = require('react-i18next');
 require('../../../../events/dynamicEvents.cjs');
 require('@dynamic-labs/utils');
 require('../../../../context/DynamicContext/DynamicContext.cjs');
@@ -25,7 +24,6 @@ var ErrorContext = require('../../../../context/ErrorContext/ErrorContext.cjs');
 require('@dynamic-labs/multi-wallet');
 require('react-international-phone');
 var isEmailProviderEnabled = require('../../../../utils/functions/isEmailProviderEnabled/isEmailProviderEnabled.cjs');
-var isEmailValid = require('../../../../utils/functions/isEmailValid/isEmailValid.cjs');
 require('viem');
 require('viem/chains');
 require('../../../../config/ApiEndpoint.cjs');
@@ -38,6 +36,7 @@ require('../../../../context/WalletContext/WalletContext.cjs');
 require('../../../../context/ThemeContext/ThemeContext.cjs');
 require('@dynamic-labs/types');
 require('yup');
+require('react-i18next');
 require('../../../../context/FieldsStateContext/FieldsStateContext.cjs');
 require('../../../../context/MockContext/MockContext.cjs');
 require('../../../../utils/hooks/useUserUpdateRequest/useUpdateUser/useUpdateUser.cjs');
@@ -60,17 +59,14 @@ require('../../../../widgets/DynamicWidget/context/DynamicWidgetContext.cjs');
 require('../../../../components/IconButton/IconButton.cjs');
 require('../../../../components/MenuList/Dropdown/Dropdown.cjs');
 require('formik');
-var Button = require('../../../../components/Button/Button.cjs');
 require('../../../TransactionConfirmationView/helpers/transactionErrorMessage.cjs');
 require('../../../../components/Alert/Alert.cjs');
-var Input = require('../../../../components/Input/Input.cjs');
+require('../../../../components/Input/Input.cjs');
 require('../../../../components/PasskeyCreatedSuccessBanner/PasskeyCreatedSuccessBanner.cjs');
 require('../../../../context/PasskeyContext/PasskeyContext.cjs');
 require('../../../../widgets/DynamicWidget/views/ManagePasskeysWidgetView/PasskeyCard/PasskeyCard.cjs');
-var InlineSubmitButton = require('../../../../components/InlineSubmitButton/InlineSubmitButton.cjs');
 require('../../../../components/InlineWidget/InlineWidget.cjs');
 require('../../../../components/IsBrowser/IsBrowser.cjs');
-require('../../../../components/PhoneNumberField/usePhoneInputLogic/usePhoneInputLogic.cjs');
 require('../../../../components/Popper/Popper/Popper.cjs');
 require('../../../../components/Popper/PopperContext/PopperContext.cjs');
 require('qrcode');
@@ -78,29 +74,21 @@ require('../../../WalletList/WalletList.cjs');
 var useEmailProvider = require('../../../../utils/hooks/useEmailProvider/useEmailProvider.cjs');
 require('../../../../widgets/DynamicBridgeWidget/views/WalletsView/components/SecondaryWallets/SecondaryWallets.cjs');
 require('@hcaptcha/react-hcaptcha');
-require('../../../../locale/locale.cjs');
+require('../PhoneNumberSignInSection/PhoneNumberSignInSection.cjs');
+var EmailForm = require('../../../../components/EmailForm/EmailForm.cjs');
 
 const LoginEmailForm = ({ isLoading: isExternalLoading, onSubmit, onSubmitError, currentEmail, }) => {
     var _a, _b;
-    const { t } = reactI18next.useTranslation();
     const { walletConnectorOptions, projectSettings } = useInternalDynamicContext.useInternalDynamicContext();
     const { view, setView } = ViewContext.useViewContext();
     const { setErrorMessage } = ErrorContext.useErrorContext();
     const { engageCaptcha } = CaptchaContext.useCaptchaContext();
-    const [emailInput, setEmailInput] = React.useState(currentEmail !== null && currentEmail !== void 0 ? currentEmail : '');
     const [invalidEmail, setInvalidEmail] = React.useState(false);
     const emailWalletConnector = findEmailOtpWalletConnector.findEmailOtpWalletConnector(walletConnectorOptions);
-    /** Indicates the state of the input relative to the user's interaction */
-    const [isHovered, setIsHovered] = React.useState(false);
-    const [isFocused, setIsFocused] = React.useState(false);
     const { handleEmailSubmitWithOptionalCaptcha, isEmailProviderLoading } = useEmailProvider.useEmailProvider({
         emailWalletConnector,
     });
     const isLoading = React.useMemo(() => isEmailProviderLoading || isExternalLoading, [isEmailProviderLoading, isExternalLoading]);
-    const handleEmailOnChangeEvent = (event) => {
-        const { value } = event.currentTarget;
-        setEmailInput(value);
-    };
     const handleEmailSubmitError = (error) => {
         if (error.code === 'invalid_email_address') {
             setInvalidEmail(true);
@@ -111,13 +99,8 @@ const LoginEmailForm = ({ isLoading: isExternalLoading, onSubmit, onSubmitError,
         logger.logger.debug(error);
         onSubmitError === null || onSubmitError === void 0 ? void 0 : onSubmitError();
     };
-    const handleSubmit = (e) => _tslib.__awaiter(void 0, void 0, void 0, function* () {
+    const handleSubmit = (emailInput) => _tslib.__awaiter(void 0, void 0, void 0, function* () {
         var _c;
-        e.preventDefault();
-        if (!isEmailValid.isEmailValid(emailInput)) {
-            setInvalidEmail(true);
-            return;
-        }
         try {
             onSubmit === null || onSubmit === void 0 ? void 0 : onSubmit();
             // we are making sure that the wallet connect is not magic as to not show captcha
@@ -148,9 +131,7 @@ const LoginEmailForm = ({ isLoading: isExternalLoading, onSubmit, onSubmitError,
         logger.logger.error('Failed to render EmailSignInSection - no sign in provider enabled');
         return null;
     }
-    return (jsxRuntime.jsxs("form", { className: 'login-with-email-form', onSubmit: (e) => handleSubmit(e), children: [jsxRuntime.jsx(Input.Input, { id: 'email_field', value: emailInput, onChange: handleEmailOnChangeEvent, copykey: 'dyn_login.email_form.email_field.label', label: t('dyn_login.email_form.email_field.label'), error: invalidEmail, message: invalidEmail && t('dyn_login.helper.email_form.invalid_email'), suffix: jsxRuntime.jsx(InlineSubmitButton.InlineSubmitButton, { disabled: isLoading, highlighted: emailInput.length > 0, isFocused: isFocused, isHovered: isHovered }), disabled: isLoading, type: 'email', onPointerEnter: () => setIsHovered(true), onPointerLeave: () => setIsHovered(false), onFocus: () => setIsFocused(true), onBlur: () => setIsFocused(false) }), !((_b = projectSettings === null || projectSettings === void 0 ? void 0 : projectSettings.design.modal) === null || _b === void 0 ? void 0 : _b.emailSubmitButtonInsideInput) && (jsxRuntime.jsx(Button.Button, { dataTestId: 'submit_button', buttonClassName: 'login-with-email-form__button', type: 'submit', loading: isLoading, disabled: isLoading || emailInput.length < 3, buttonVariant: 'brand-primary', buttonPadding: 'login-screen-height', expanded: true, copykey: 'dyn_login.email_form.submit_button.label', typographyProps: {
-                    color: 'inherit',
-                }, children: t('dyn_login.email_form.submit_button.label') }))] }));
+    return (jsxRuntime.jsx(EmailForm.EmailForm, { onSubmit: handleSubmit, onSubmitError: onSubmitError, isLoading: isLoading, currentEmail: currentEmail, emailSubmitButtonInsideInput: (_b = projectSettings === null || projectSettings === void 0 ? void 0 : projectSettings.design.modal) === null || _b === void 0 ? void 0 : _b.emailSubmitButtonInsideInput, isEmailInvalid: invalidEmail }));
 };
 
 exports.LoginEmailForm = LoginEmailForm;

package/src/lib/views/LoginView/sections/EmailSignInSection/LoginEmailForm.js

@@ -1,7 +1,6 @@
 import { __awaiter } from '../../../../../../_virtual/_tslib.js';
-import { jsxs, jsx } from 'react/jsx-runtime';
+import { jsx } from 'react/jsx-runtime';
 import { useState, useMemo } from 'react';
-import { useTranslation } from 'react-i18next';
 import '../../../../events/dynamicEvents.js';
 import '@dynamic-labs/utils';
 import '../../../../context/DynamicContext/DynamicContext.js';
@@ -21,7 +20,6 @@ import { useErrorContext } from '../../../../context/ErrorContext/ErrorContext.j
 import '@dynamic-labs/multi-wallet';
 import 'react-international-phone';
 import { isEmailProviderEnabled } from '../../../../utils/functions/isEmailProviderEnabled/isEmailProviderEnabled.js';
-import { isEmailValid } from '../../../../utils/functions/isEmailValid/isEmailValid.js';
 import 'viem';
 import 'viem/chains';
 import '../../../../config/ApiEndpoint.js';
@@ -34,6 +32,7 @@ import '../../../../context/WalletContext/WalletContext.js';
 import '../../../../context/ThemeContext/ThemeContext.js';
 import '@dynamic-labs/types';
 import 'yup';
+import 'react-i18next';
 import '../../../../context/FieldsStateContext/FieldsStateContext.js';
 import '../../../../context/MockContext/MockContext.js';
 import '../../../../utils/hooks/useUserUpdateRequest/useUpdateUser/useUpdateUser.js';
@@ -56,17 +55,14 @@ import '../../../../widgets/DynamicWidget/context/DynamicWidgetContext.js';
 import '../../../../components/IconButton/IconButton.js';
 import '../../../../components/MenuList/Dropdown/Dropdown.js';
 import 'formik';
-import { Button } from '../../../../components/Button/Button.js';
 import '../../../TransactionConfirmationView/helpers/transactionErrorMessage.js';
 import '../../../../components/Alert/Alert.js';
-import { Input } from '../../../../components/Input/Input.js';
+import '../../../../components/Input/Input.js';
 import '../../../../components/PasskeyCreatedSuccessBanner/PasskeyCreatedSuccessBanner.js';
 import '../../../../context/PasskeyContext/PasskeyContext.js';
 import '../../../../widgets/DynamicWidget/views/ManagePasskeysWidgetView/PasskeyCard/PasskeyCard.js';
-import { InlineSubmitButton } from '../../../../components/InlineSubmitButton/InlineSubmitButton.js';
 import '../../../../components/InlineWidget/InlineWidget.js';
 import '../../../../components/IsBrowser/IsBrowser.js';
-import '../../../../components/PhoneNumberField/usePhoneInputLogic/usePhoneInputLogic.js';
 import '../../../../components/Popper/Popper/Popper.js';
 import '../../../../components/Popper/PopperContext/PopperContext.js';
 import 'qrcode';
@@ -74,29 +70,21 @@ import '../../../WalletList/WalletList.js';
 import { useEmailProvider } from '../../../../utils/hooks/useEmailProvider/useEmailProvider.js';
 import '../../../../widgets/DynamicBridgeWidget/views/WalletsView/components/SecondaryWallets/SecondaryWallets.js';
 import '@hcaptcha/react-hcaptcha';
-import '../../../../locale/locale.js';
+import '../PhoneNumberSignInSection/PhoneNumberSignInSection.js';
+import { EmailForm } from '../../../../components/EmailForm/EmailForm.js';
 
 const LoginEmailForm = ({ isLoading: isExternalLoading, onSubmit, onSubmitError, currentEmail, }) => {
     var _a, _b;
-    const { t } = useTranslation();
     const { walletConnectorOptions, projectSettings } = useInternalDynamicContext();
     const { view, setView } = useViewContext();
     const { setErrorMessage } = useErrorContext();
     const { engageCaptcha } = useCaptchaContext();
-    const [emailInput, setEmailInput] = useState(currentEmail !== null && currentEmail !== void 0 ? currentEmail : '');
     const [invalidEmail, setInvalidEmail] = useState(false);
     const emailWalletConnector = findEmailOtpWalletConnector(walletConnectorOptions);
-    /** Indicates the state of the input relative to the user's interaction */
-    const [isHovered, setIsHovered] = useState(false);
-    const [isFocused, setIsFocused] = useState(false);
     const { handleEmailSubmitWithOptionalCaptcha, isEmailProviderLoading } = useEmailProvider({
         emailWalletConnector,
     });
     const isLoading = useMemo(() => isEmailProviderLoading || isExternalLoading, [isEmailProviderLoading, isExternalLoading]);
-    const handleEmailOnChangeEvent = (event) => {
-        const { value } = event.currentTarget;
-        setEmailInput(value);
-    };
     const handleEmailSubmitError = (error) => {
         if (error.code === 'invalid_email_address') {
             setInvalidEmail(true);
@@ -107,13 +95,8 @@ const LoginEmailForm = ({ isLoading: isExternalLoading, onSubmit, onSubmitError,
         logger.debug(error);
         onSubmitError === null || onSubmitError === void 0 ? void 0 : onSubmitError();
     };
-    const handleSubmit = (e) => __awaiter(void 0, void 0, void 0, function* () {
+    const handleSubmit = (emailInput) => __awaiter(void 0, void 0, void 0, function* () {
         var _c;
-        e.preventDefault();
-        if (!isEmailValid(emailInput)) {
-            setInvalidEmail(true);
-            return;
-        }
         try {
             onSubmit === null || onSubmit === void 0 ? void 0 : onSubmit();
             // we are making sure that the wallet connect is not magic as to not show captcha
@@ -144,9 +127,7 @@ const LoginEmailForm = ({ isLoading: isExternalLoading, onSubmit, onSubmitError,
         logger.error('Failed to render EmailSignInSection - no sign in provider enabled');
         return null;
     }
-    return (jsxs("form", { className: 'login-with-email-form', onSubmit: (e) => handleSubmit(e), children: [jsx(Input, { id: 'email_field', value: emailInput, onChange: handleEmailOnChangeEvent, copykey: 'dyn_login.email_form.email_field.label', label: t('dyn_login.email_form.email_field.label'), error: invalidEmail, message: invalidEmail && t('dyn_login.helper.email_form.invalid_email'), suffix: jsx(InlineSubmitButton, { disabled: isLoading, highlighted: emailInput.length > 0, isFocused: isFocused, isHovered: isHovered }), disabled: isLoading, type: 'email', onPointerEnter: () => setIsHovered(true), onPointerLeave: () => setIsHovered(false), onFocus: () => setIsFocused(true), onBlur: () => setIsFocused(false) }), !((_b = projectSettings === null || projectSettings === void 0 ? void 0 : projectSettings.design.modal) === null || _b === void 0 ? void 0 : _b.emailSubmitButtonInsideInput) && (jsx(Button, { dataTestId: 'submit_button', buttonClassName: 'login-with-email-form__button', type: 'submit', loading: isLoading, disabled: isLoading || emailInput.length < 3, buttonVariant: 'brand-primary', buttonPadding: 'login-screen-height', expanded: true, copykey: 'dyn_login.email_form.submit_button.label', typographyProps: {
-                    color: 'inherit',
-                }, children: t('dyn_login.email_form.submit_button.label') }))] }));
+    return (jsx(EmailForm, { onSubmit: handleSubmit, onSubmitError: onSubmitError, isLoading: isLoading, currentEmail: currentEmail, emailSubmitButtonInsideInput: (_b = projectSettings === null || projectSettings === void 0 ? void 0 : projectSettings.design.modal) === null || _b === void 0 ? void 0 : _b.emailSubmitButtonInsideInput, isEmailInvalid: invalidEmail }));
 };
 
 export { LoginEmailForm };

package/src/lib/views/LoginView/sections/PhoneNumberSignInSection/PhoneNumberSignInSection.cjs

@@ -25,6 +25,7 @@ require('@dynamic-labs/multi-wallet');
 var isPhoneNumberProviderEnabled = require('../../../../utils/functions/isPhoneNumberProviderEnabled/isPhoneNumberProviderEnabled.cjs');
 var validatePhoneLength = require('../../../../utils/functions/validatePhoneLength/validatePhoneLength.cjs');
 require('react-international-phone');
+var getCustomCountries = require('../../../../utils/functions/getCustomCountries/getCustomCountries.cjs');
 require('viem');
 require('viem/chains');
 require('../../../../config/ApiEndpoint.cjs');
@@ -78,6 +79,8 @@ require('../../../../widgets/DynamicBridgeWidget/views/WalletsView/components/Se
 require('@hcaptcha/react-hcaptcha');
 var useSubmitPhoneNumber = require('./useSubmitPhoneNumber/useSubmitPhoneNumber.cjs');
 
+// For login, we always want to use only countries with verification supported
+const countriesWithVerification = getCustomCountries.getCustomCountries(true);
 const PhoneNumberSignInSection = ({ isLoading, onSubmit, onSubmitError, }) => {
     var _a, _b;
     const { projectSettings } = useInternalDynamicContext.useInternalDynamicContext();
@@ -105,7 +108,7 @@ const PhoneNumberSignInSection = ({ isLoading, onSubmit, onSubmitError, }) => {
         return null;
     }
     const showBigSubmitButton = !((_b = projectSettings === null || projectSettings === void 0 ? void 0 : projectSettings.design.modal) === null || _b === void 0 ? void 0 : _b.emailSubmitButtonInsideInput);
-    return (jsxRuntime.jsxs("form", { className: 'login-with-phone-number-form', onSubmit: (e) => handleSubmit(e), children: [jsxRuntime.jsx(PhoneNumberField.PhoneNumberField, { onUpdate: handleUpdate, error: invalidNumberMessage, setIsHovered: setIsHovered, setIsFocused: setIsFocused, appendRight: !showBigSubmitButton ? (jsxRuntime.jsx(InlineSubmitButton.InlineSubmitButton, { disabled: isLoading || !isInputComplete, highlighted: isInputComplete, isFocused: isFocused, isHovered: isHovered, className: 'login-with-phone-number-form__fields__inline-submit' })) : undefined }), showBigSubmitButton && (jsxRuntime.jsx(Button.Button, { dataTestId: 'big-submit-button', buttonClassName: 'login-with-phone-number-form__button', type: 'submit', loading: isLoading, disabled: isLoading || !isInputComplete, buttonVariant: 'brand-primary', buttonPadding: 'login-screen-height', expanded: true, typographyProps: {
+    return (jsxRuntime.jsxs("form", { className: 'login-with-phone-number-form', onSubmit: (e) => handleSubmit(e), children: [jsxRuntime.jsx(PhoneNumberField.PhoneNumberField, { countries: countriesWithVerification, onUpdate: handleUpdate, error: invalidNumberMessage, setIsHovered: setIsHovered, setIsFocused: setIsFocused, appendRight: jsxRuntime.jsx(InlineSubmitButton.InlineSubmitButton, { disabled: isLoading || !isInputComplete, highlighted: isInputComplete, isFocused: isFocused, isHovered: isHovered, className: 'login-with-phone-number-form__fields__inline-submit', emailSubmitButtonInsideInput: !showBigSubmitButton }) }), showBigSubmitButton && (jsxRuntime.jsx(Button.Button, { dataTestId: 'big-submit-button', buttonClassName: 'login-with-phone-number-form__button', type: 'submit', loading: isLoading, disabled: isLoading || !isInputComplete, buttonVariant: 'brand-primary', buttonPadding: 'login-screen-height', expanded: true, typographyProps: {
                     color: 'inherit',
                 }, children: "Continue" }))] }));
 };

package/src/lib/views/LoginView/sections/PhoneNumberSignInSection/PhoneNumberSignInSection.js

@@ -21,6 +21,7 @@ import '@dynamic-labs/multi-wallet';
 import { isPhoneNumberProviderEnabled } from '../../../../utils/functions/isPhoneNumberProviderEnabled/isPhoneNumberProviderEnabled.js';
 import { validatePhoneLength } from '../../../../utils/functions/validatePhoneLength/validatePhoneLength.js';
 import 'react-international-phone';
+import { getCustomCountries } from '../../../../utils/functions/getCustomCountries/getCustomCountries.js';
 import 'viem';
 import 'viem/chains';
 import '../../../../config/ApiEndpoint.js';
@@ -74,6 +75,8 @@ import '../../../../widgets/DynamicBridgeWidget/views/WalletsView/components/Sec
 import '@hcaptcha/react-hcaptcha';
 import { useSubmitPhoneNumber } from './useSubmitPhoneNumber/useSubmitPhoneNumber.js';
 
+// For login, we always want to use only countries with verification supported
+const countriesWithVerification = getCustomCountries(true);
 const PhoneNumberSignInSection = ({ isLoading, onSubmit, onSubmitError, }) => {
     var _a, _b;
     const { projectSettings } = useInternalDynamicContext();
@@ -101,7 +104,7 @@ const PhoneNumberSignInSection = ({ isLoading, onSubmit, onSubmitError, }) => {
         return null;
     }
     const showBigSubmitButton = !((_b = projectSettings === null || projectSettings === void 0 ? void 0 : projectSettings.design.modal) === null || _b === void 0 ? void 0 : _b.emailSubmitButtonInsideInput);
-    return (jsxs("form", { className: 'login-with-phone-number-form', onSubmit: (e) => handleSubmit(e), children: [jsx(PhoneNumberField, { onUpdate: handleUpdate, error: invalidNumberMessage, setIsHovered: setIsHovered, setIsFocused: setIsFocused, appendRight: !showBigSubmitButton ? (jsx(InlineSubmitButton, { disabled: isLoading || !isInputComplete, highlighted: isInputComplete, isFocused: isFocused, isHovered: isHovered, className: 'login-with-phone-number-form__fields__inline-submit' })) : undefined }), showBigSubmitButton && (jsx(Button, { dataTestId: 'big-submit-button', buttonClassName: 'login-with-phone-number-form__button', type: 'submit', loading: isLoading, disabled: isLoading || !isInputComplete, buttonVariant: 'brand-primary', buttonPadding: 'login-screen-height', expanded: true, typographyProps: {
+    return (jsxs("form", { className: 'login-with-phone-number-form', onSubmit: (e) => handleSubmit(e), children: [jsx(PhoneNumberField, { countries: countriesWithVerification, onUpdate: handleUpdate, error: invalidNumberMessage, setIsHovered: setIsHovered, setIsFocused: setIsFocused, appendRight: jsx(InlineSubmitButton, { disabled: isLoading || !isInputComplete, highlighted: isInputComplete, isFocused: isFocused, isHovered: isHovered, className: 'login-with-phone-number-form__fields__inline-submit', emailSubmitButtonInsideInput: !showBigSubmitButton }) }), showBigSubmitButton && (jsx(Button, { dataTestId: 'big-submit-button', buttonClassName: 'login-with-phone-number-form__button', type: 'submit', loading: isLoading, disabled: isLoading || !isInputComplete, buttonVariant: 'brand-primary', buttonPadding: 'login-screen-height', expanded: true, typographyProps: {
                     color: 'inherit',
                 }, children: "Continue" }))] }));
 };

package/src/lib/views/LoginView/sections/PhoneNumberSignInSection/useSubmitPhoneNumber/useSubmitPhoneNumber.cjs

@@ -53,7 +53,6 @@ require('../../../../../components/Transition/SlideInUpTransition/SlideInUpTrans
 require('../../../../../components/Transition/OpacityTransition/OpacityTransition.cjs');
 require('../../../../../components/OverlayCard/OverlayCardTarget/OverlayCardTarget.cjs');
 require('../../../../../components/PasskeyCreatedSuccessBanner/PasskeyCreatedSuccessBanner.cjs');
-require('../../../../../components/PhoneNumberField/usePhoneInputLogic/usePhoneInputLogic.cjs');
 require('../../../../../components/Popper/Popper/Popper.cjs');
 require('../../../../../components/Popper/PopperContext/PopperContext.cjs');
 require('react-focus-lock');
@@ -68,8 +67,7 @@ require('@hcaptcha/react-hcaptcha');
 require('../../../../../context/LoadingContext/LoadingContext.cjs');
 require('../../../../../config/ApiEndpoint.cjs');
 require('../../../../../context/FooterAnimationContext/index.cjs');
-require('../../../../../locale/locale.cjs');
-var translation = require('../../../../../locale/en/translation.cjs');
+require('../PhoneNumberSignInSection.cjs');
 require('../../../../../context/WalletGroupContext/WalletGroupContext.cjs');
 require('../../../../../context/PasskeyContext/PasskeyContext.cjs');
 require('../../../../../widgets/DynamicWidget/components/DynamicWidgetHeader/DynamicWidgetHeader.cjs');
@@ -77,6 +75,8 @@ require('../../../../../widgets/DynamicWidget/context/DynamicWidgetContext.cjs')
 require('../../../../TransactionConfirmationView/helpers/transactionErrorMessage.cjs');
 require('../../../../../widgets/DynamicWidget/views/ManagePasskeysWidgetView/PasskeyCard/PasskeyCard.cjs');
 var useInternalDynamicContext = require('../../../../../context/DynamicContext/useDynamicContext/useInternalDynamicContext.cjs');
+require('../../../../../locale/locale.cjs');
+var translation = require('../../../../../locale/en/translation.cjs');
 
 const useSubmitPhoneNumber = ({ onSubmit, onSubmitError, country, phone, setInvalidNumberMessage, }) => {
     const { engageCaptcha } = CaptchaContext.useCaptchaContext();

package/src/lib/views/LoginView/sections/PhoneNumberSignInSection/useSubmitPhoneNumber/useSubmitPhoneNumber.js

@@ -49,7 +49,6 @@ import '../../../../../components/Transition/SlideInUpTransition/SlideInUpTransi
 import '../../../../../components/Transition/OpacityTransition/OpacityTransition.js';
 import '../../../../../components/OverlayCard/OverlayCardTarget/OverlayCardTarget.js';
 import '../../../../../components/PasskeyCreatedSuccessBanner/PasskeyCreatedSuccessBanner.js';
-import '../../../../../components/PhoneNumberField/usePhoneInputLogic/usePhoneInputLogic.js';
 import '../../../../../components/Popper/Popper/Popper.js';
 import '../../../../../components/Popper/PopperContext/PopperContext.js';
 import 'react-focus-lock';
@@ -64,8 +63,7 @@ import '@hcaptcha/react-hcaptcha';
 import '../../../../../context/LoadingContext/LoadingContext.js';
 import '../../../../../config/ApiEndpoint.js';
 import '../../../../../context/FooterAnimationContext/index.js';
-import '../../../../../locale/locale.js';
-import { translation } from '../../../../../locale/en/translation.js';
+import '../PhoneNumberSignInSection.js';
 import '../../../../../context/WalletGroupContext/WalletGroupContext.js';
 import '../../../../../context/PasskeyContext/PasskeyContext.js';
 import '../../../../../widgets/DynamicWidget/components/DynamicWidgetHeader/DynamicWidgetHeader.js';
@@ -73,6 +71,8 @@ import '../../../../../widgets/DynamicWidget/context/DynamicWidgetContext.js';
 import '../../../../TransactionConfirmationView/helpers/transactionErrorMessage.js';
 import '../../../../../widgets/DynamicWidget/views/ManagePasskeysWidgetView/PasskeyCard/PasskeyCard.js';
 import { useInternalDynamicContext } from '../../../../../context/DynamicContext/useDynamicContext/useInternalDynamicContext.js';
+import '../../../../../locale/locale.js';
+import { translation } from '../../../../../locale/en/translation.js';
 
 const useSubmitPhoneNumber = ({ onSubmit, onSubmitError, country, phone, setInvalidNumberMessage, }) => {
     const { engageCaptcha } = useCaptchaContext();

package/src/lib/views/LoginView/sections/SocialSignInSection/DynamicSocialSignIn/DynamicSocialSignIn.cjs

@@ -67,14 +67,13 @@ require('../../../../../context/PasskeyContext/PasskeyContext.cjs');
 require('../../../../../widgets/DynamicWidget/views/ManagePasskeysWidgetView/PasskeyCard/PasskeyCard.cjs');
 require('../../../../../components/InlineWidget/InlineWidget.cjs');
 require('../../../../../components/IsBrowser/IsBrowser.cjs');
-require('../../../../../components/PhoneNumberField/usePhoneInputLogic/usePhoneInputLogic.cjs');
 require('../../../../../components/Popper/Popper/Popper.cjs');
 require('../../../../../components/Popper/PopperContext/PopperContext.cjs');
 require('qrcode');
 require('../../../../WalletList/WalletList.cjs');
 require('../../../../../widgets/DynamicBridgeWidget/views/WalletsView/components/SecondaryWallets/SecondaryWallets.cjs');
 require('@hcaptcha/react-hcaptcha');
-require('../../../../../locale/locale.cjs');
+require('../../PhoneNumberSignInSection/PhoneNumberSignInSection.cjs');
 var SocialSignIn = require('../../../../../components/SocialSignIn/SocialSignIn.cjs');
 
 const DynamicSocialSignIn = ({ defaultProvider, numOfItemsToDisplay, collapsedLayout, }) => {

package/src/lib/views/LoginView/sections/SocialSignInSection/DynamicSocialSignIn/DynamicSocialSignIn.js

@@ -63,14 +63,13 @@ import '../../../../../context/PasskeyContext/PasskeyContext.js';
 import '../../../../../widgets/DynamicWidget/views/ManagePasskeysWidgetView/PasskeyCard/PasskeyCard.js';
 import '../../../../../components/InlineWidget/InlineWidget.js';
 import '../../../../../components/IsBrowser/IsBrowser.js';
-import '../../../../../components/PhoneNumberField/usePhoneInputLogic/usePhoneInputLogic.js';
 import '../../../../../components/Popper/Popper/Popper.js';
 import '../../../../../components/Popper/PopperContext/PopperContext.js';
 import 'qrcode';
 import '../../../../WalletList/WalletList.js';
 import '../../../../../widgets/DynamicBridgeWidget/views/WalletsView/components/SecondaryWallets/SecondaryWallets.js';
 import '@hcaptcha/react-hcaptcha';
-import '../../../../../locale/locale.js';
+import '../../PhoneNumberSignInSection/PhoneNumberSignInSection.js';
 import { SocialSignIn } from '../../../../../components/SocialSignIn/SocialSignIn.js';
 
 const DynamicSocialSignIn = ({ defaultProvider, numOfItemsToDisplay, collapsedLayout, }) => {

package/src/lib/views/LoginView/sections/SocialSignInSection/MagicSocialSignIn/MagicSocialSignIn.cjs

@@ -66,14 +66,13 @@ require('../../../../../context/PasskeyContext/PasskeyContext.cjs');
 require('../../../../../widgets/DynamicWidget/views/ManagePasskeysWidgetView/PasskeyCard/PasskeyCard.cjs');
 require('../../../../../components/InlineWidget/InlineWidget.cjs');
 require('../../../../../components/IsBrowser/IsBrowser.cjs');
-require('../../../../../components/PhoneNumberField/usePhoneInputLogic/usePhoneInputLogic.cjs');
 require('../../../../../components/Popper/Popper/Popper.cjs');
 require('../../../../../components/Popper/PopperContext/PopperContext.cjs');
 require('qrcode');
 require('../../../../WalletList/WalletList.cjs');
 require('../../../../../widgets/DynamicBridgeWidget/views/WalletsView/components/SecondaryWallets/SecondaryWallets.cjs');
 require('@hcaptcha/react-hcaptcha');
-require('../../../../../locale/locale.cjs');
+require('../../PhoneNumberSignInSection/PhoneNumberSignInSection.cjs');
 var SocialSignIn = require('../../../../../components/SocialSignIn/SocialSignIn.cjs');
 
 const MagicSocialSignIn = ({ defaultProvider, numOfItemsToDisplay, collapsedLayout, }) => {

package/src/lib/views/LoginView/sections/SocialSignInSection/MagicSocialSignIn/MagicSocialSignIn.js

@@ -62,14 +62,13 @@ import '../../../../../context/PasskeyContext/PasskeyContext.js';
 import '../../../../../widgets/DynamicWidget/views/ManagePasskeysWidgetView/PasskeyCard/PasskeyCard.js';
 import '../../../../../components/InlineWidget/InlineWidget.js';
 import '../../../../../components/IsBrowser/IsBrowser.js';
-import '../../../../../components/PhoneNumberField/usePhoneInputLogic/usePhoneInputLogic.js';
 import '../../../../../components/Popper/Popper/Popper.js';
 import '../../../../../components/Popper/PopperContext/PopperContext.js';
 import 'qrcode';
 import '../../../../WalletList/WalletList.js';
 import '../../../../../widgets/DynamicBridgeWidget/views/WalletsView/components/SecondaryWallets/SecondaryWallets.js';
 import '@hcaptcha/react-hcaptcha';
-import '../../../../../locale/locale.js';
+import '../../PhoneNumberSignInSection/PhoneNumberSignInSection.js';
 import { SocialSignIn } from '../../../../../components/SocialSignIn/SocialSignIn.js';
 
 const MagicSocialSignIn = ({ defaultProvider, numOfItemsToDisplay, collapsedLayout, }) => {

package/src/lib/views/LoginView/sections/SocialSignInSection/SocialSignInSection.cjs

@@ -54,7 +54,6 @@ require('../../../../components/Transition/SlideInUpTransition/SlideInUpTransiti
 require('../../../../components/Transition/OpacityTransition/OpacityTransition.cjs');
 require('../../../../components/OverlayCard/OverlayCardTarget/OverlayCardTarget.cjs');
 require('../../../../components/PasskeyCreatedSuccessBanner/PasskeyCreatedSuccessBanner.cjs');
-require('../../../../components/PhoneNumberField/usePhoneInputLogic/usePhoneInputLogic.cjs');
 require('../../../../components/Popper/Popper/Popper.cjs');
 require('../../../../components/Popper/PopperContext/PopperContext.cjs');
 require('react-focus-lock');
@@ -67,7 +66,7 @@ require('i18next');
 require('@hcaptcha/react-hcaptcha');
 require('../../../../context/LoadingContext/LoadingContext.cjs');
 require('../../../../context/FooterAnimationContext/index.cjs');
-require('../../../../locale/locale.cjs');
+require('../PhoneNumberSignInSection/PhoneNumberSignInSection.cjs');
 var MagicSocialSignIn = require('./MagicSocialSignIn/MagicSocialSignIn.cjs');
 var DynamicSocialSignIn = require('./DynamicSocialSignIn/DynamicSocialSignIn.cjs');
 require('../../../../context/WalletGroupContext/WalletGroupContext.cjs');

package/src/lib/views/LoginView/sections/SocialSignInSection/SocialSignInSection.js

@@ -50,7 +50,6 @@ import '../../../../components/Transition/SlideInUpTransition/SlideInUpTransitio
 import '../../../../components/Transition/OpacityTransition/OpacityTransition.js';
 import '../../../../components/OverlayCard/OverlayCardTarget/OverlayCardTarget.js';
 import '../../../../components/PasskeyCreatedSuccessBanner/PasskeyCreatedSuccessBanner.js';
-import '../../../../components/PhoneNumberField/usePhoneInputLogic/usePhoneInputLogic.js';
 import '../../../../components/Popper/Popper/Popper.js';
 import '../../../../components/Popper/PopperContext/PopperContext.js';
 import 'react-focus-lock';
@@ -63,7 +62,7 @@ import 'i18next';
 import '@hcaptcha/react-hcaptcha';
 import '../../../../context/LoadingContext/LoadingContext.js';
 import '../../../../context/FooterAnimationContext/index.js';
-import '../../../../locale/locale.js';
+import '../PhoneNumberSignInSection/PhoneNumberSignInSection.js';
 import { MagicSocialSignIn } from './MagicSocialSignIn/MagicSocialSignIn.js';
 import { DynamicSocialSignIn } from './DynamicSocialSignIn/DynamicSocialSignIn.js';
 import '../../../../context/WalletGroupContext/WalletGroupContext.js';

package/src/lib/views/LoginView/sections/ToggleableSection/ToggleableSection.cjs

@@ -65,14 +65,13 @@ require('../../../../context/PasskeyContext/PasskeyContext.cjs');
 require('../../../../widgets/DynamicWidget/views/ManagePasskeysWidgetView/PasskeyCard/PasskeyCard.cjs');
 require('../../../../components/InlineWidget/InlineWidget.cjs');
 require('../../../../components/IsBrowser/IsBrowser.cjs');
-require('../../../../components/PhoneNumberField/usePhoneInputLogic/usePhoneInputLogic.cjs');
 require('../../../../components/Popper/Popper/Popper.cjs');
 require('../../../../components/Popper/PopperContext/PopperContext.cjs');
 require('qrcode');
 require('../../../WalletList/WalletList.cjs');
 require('../../../../widgets/DynamicBridgeWidget/views/WalletsView/components/SecondaryWallets/SecondaryWallets.cjs');
 require('@hcaptcha/react-hcaptcha');
-require('../../../../locale/locale.cjs');
+require('../PhoneNumberSignInSection/PhoneNumberSignInSection.cjs');
 
 const ToggleableSection = ({ sections }) => {
     /** When true, shows first section. When false, shows second */

package/src/lib/views/LoginView/sections/ToggleableSection/ToggleableSection.js

@@ -61,14 +61,13 @@ import '../../../../context/PasskeyContext/PasskeyContext.js';
 import '../../../../widgets/DynamicWidget/views/ManagePasskeysWidgetView/PasskeyCard/PasskeyCard.js';
 import '../../../../components/InlineWidget/InlineWidget.js';
 import '../../../../components/IsBrowser/IsBrowser.js';
-import '../../../../components/PhoneNumberField/usePhoneInputLogic/usePhoneInputLogic.js';
 import '../../../../components/Popper/Popper/Popper.js';
 import '../../../../components/Popper/PopperContext/PopperContext.js';
 import 'qrcode';
 import '../../../WalletList/WalletList.js';
 import '../../../../widgets/DynamicBridgeWidget/views/WalletsView/components/SecondaryWallets/SecondaryWallets.js';
 import '@hcaptcha/react-hcaptcha';
-import '../../../../locale/locale.js';
+import '../PhoneNumberSignInSection/PhoneNumberSignInSection.js';
 
 const ToggleableSection = ({ sections }) => {
     /** When true, shows first section. When false, shows second */

package/src/lib/views/LoginView/sections/WalletSignInSection/ListItemButton/ListItemButton.cjs

@@ -69,14 +69,13 @@ var Badge = require('../../../../../components/Badge/Badge.cjs');
 var ListTile = require('../../../../../components/ListTile/ListTile.cjs');
 require('../../../../../components/InlineWidget/InlineWidget.cjs');
 require('../../../../../components/IsBrowser/IsBrowser.cjs');
-require('../../../../../components/PhoneNumberField/usePhoneInputLogic/usePhoneInputLogic.cjs');
 require('../../../../../components/Popper/Popper/Popper.cjs');
 require('../../../../../components/Popper/PopperContext/PopperContext.cjs');
 require('qrcode');
 require('../../../../WalletList/WalletList.cjs');
 require('../../../../../widgets/DynamicBridgeWidget/views/WalletsView/components/SecondaryWallets/SecondaryWallets.cjs');
 require('@hcaptcha/react-hcaptcha');
-require('../../../../../locale/locale.cjs');
+require('../../PhoneNumberSignInSection/PhoneNumberSignInSection.cjs');
 
 const ListItemButton = ({ text, onClick, numberOfWallets, disabled = false, copykey, }) => {
     const numberOfWalletsText = React.useMemo(() => {

package/src/lib/views/LoginView/sections/WalletSignInSection/ListItemButton/ListItemButton.js

@@ -65,14 +65,13 @@ import { Badge } from '../../../../../components/Badge/Badge.js';
 import { ListTile } from '../../../../../components/ListTile/ListTile.js';
 import '../../../../../components/InlineWidget/InlineWidget.js';
 import '../../../../../components/IsBrowser/IsBrowser.js';
-import '../../../../../components/PhoneNumberField/usePhoneInputLogic/usePhoneInputLogic.js';
 import '../../../../../components/Popper/Popper/Popper.js';
 import '../../../../../components/Popper/PopperContext/PopperContext.js';
 import 'qrcode';
 import '../../../../WalletList/WalletList.js';
 import '../../../../../widgets/DynamicBridgeWidget/views/WalletsView/components/SecondaryWallets/SecondaryWallets.js';
 import '@hcaptcha/react-hcaptcha';
-import '../../../../../locale/locale.js';
+import '../../PhoneNumberSignInSection/PhoneNumberSignInSection.js';
 
 const ListItemButton = ({ text, onClick, numberOfWallets, disabled = false, copykey, }) => {
     const numberOfWalletsText = useMemo(() => {