@dynamic-labs/sdk-react-core 0.19.0-alpha.3 → 0.19.0-alpha.5

package/src/lib/utils/hooks/useAuthLayoutChecks/useAuthLayoutChecks.js

@@ -13,7 +13,8 @@ const useAuthLayoutChecks = (walletConnector) => {
     const { helpHeaderData } = getDynamicLayoutData({ view });
     const isWalletListTypeView = view === 'wallet-connect-mobile-wallets-list' ||
         view === 'wallet-list' ||
-        view === 'login-with-email-or-wallet-full-wallet-list';
+        view === 'login-with-email-or-wallet-full-wallet-list' ||
+        view === 'login-with-wallet-only';
     const showHelpContent = Boolean(helpHeaderData &&
         // Notice the negation here
         !((view === 'qr-code' && !(walletConnector === null || walletConnector === void 0 ? void 0 : walletConnector.canConnectViaQrCode)) ||
@@ -47,13 +48,14 @@ const useAuthLayoutChecks = (walletConnector) => {
     const showToSFooter = Boolean(!isUserLinkingWallet(user, view, mockedSDK) &&
         (view === 'wallet-list' ||
             view === 'wallet-connect-mobile-wallets-list' ||
-            // Don't show empty footer on login-with-email-or-wallet-full-wallet-list
-            (view === 'login-with-email-or-wallet' &&
+            // Don't show empty footer during the login
+            ((view === 'login-with-email-or-wallet' ||
+                view === 'login-with-email-or-wallet-full-wallet-list' ||
+                view === 'login-with-wallet-only') &&
                 (termsOfServiceUrl ||
                     privacyPolicyUrl ||
                     customPrivacyPolicy ||
-                    customTermsOfServices)) ||
-            view === 'login-with-email-or-wallet-full-wallet-list'));
+                    customTermsOfServices))));
     const showCloseButton = view !== 'login-with-email-or-wallet-full-wallet-list' &&
         view !== 'login-with-email-verification';
     const showBackButton = view === 'qr-code' ||

package/src/lib/views/AccountExistsView/AccountExistsView.cjs

@@ -53,7 +53,7 @@ require('../../components/InlineWidget/InlineWidget.cjs');
 require('../../components/MenuList/Dropdown/Dropdown.cjs');
 var capitalize = require('../../shared/utils/functions/capitalize/capitalize.cjs');
 var SocialRedirectContext = require('../../context/SocialRedirectContext/SocialRedirectContext.cjs');
-var LoginWithEmailForm = require('../LoginWithEmailView/components/LoginWithEmailForm/LoginWithEmailForm.cjs');
+var LoginEmailForm = require('../LoginView/components/EmailSignIn/LoginEmailForm.cjs');
 
 const AccountExistsView = () => {
     const { existentAccountData } = AccountExistsContext.useAccountExistsContext();
@@ -71,7 +71,7 @@ const AccountExistsView = () => {
             : '. Please log in with your email.';
         return (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: ["It looks like an account already exists using ", jsxRuntime.jsx("strong", { children: email }), '', messageTrail] }));
     };
-    return (jsxRuntime.jsxs("div", Object.assign({ className: 'account-exists__container' }, { children: [jsxRuntime.jsx(iconic.UserProfileIcon, { className: 'account-exists__image' }), jsxRuntime.jsxs("div", Object.assign({ className: 'account-exists__main' }, { children: [jsxRuntime.jsx("div", Object.assign({ className: 'account-exists__content' }, { children: jsxRuntime.jsx(Typography.Typography, Object.assign({ variant: 'body_normal', weight: 'regular', color: 'secondary', className: 'account-exists__content--secondary' }, { children: renderFullMessage() })) })), embeddedSocialSigninProvider ? (jsxRuntime.jsxs(IconListTile.IconListTile, Object.assign({ dataTestId: `inline-${embeddedSocialSigninProvider}`, onClick: () => handleNewLoging(), className: 'social-sign-in--tile' }, { children: [jsxRuntime.jsx(IconWithSpinner.IconWithSpinner, { Icon: findSocialIcon(embeddedSocialSigninProvider), isSpinning: socialProvider === embeddedSocialSigninProvider, iconSize: 32 }), jsxRuntime.jsxs(Typography.Typography, Object.assign({ variant: 'button_primary' }, { children: ["Connect with", ' ', capitalize.capitalize(embeddedSocialSigninProvider === null || embeddedSocialSigninProvider === void 0 ? void 0 : embeddedSocialSigninProvider.toString())] }))] }), embeddedSocialSigninProvider)) : (jsxRuntime.jsx(LoginWithEmailForm.LoginWithEmailForm, { currentEmail: email }))] }))] })));
+    return (jsxRuntime.jsxs("div", Object.assign({ className: 'account-exists__container' }, { children: [jsxRuntime.jsx(iconic.UserProfileIcon, { className: 'account-exists__image' }), jsxRuntime.jsxs("div", Object.assign({ className: 'account-exists__main' }, { children: [jsxRuntime.jsx("div", Object.assign({ className: 'account-exists__content' }, { children: jsxRuntime.jsx(Typography.Typography, Object.assign({ variant: 'body_normal', weight: 'regular', color: 'secondary', className: 'account-exists__content--secondary' }, { children: renderFullMessage() })) })), embeddedSocialSigninProvider ? (jsxRuntime.jsxs(IconListTile.IconListTile, Object.assign({ dataTestId: `inline-${embeddedSocialSigninProvider}`, onClick: () => handleNewLoging(), className: 'social-sign-in--tile' }, { children: [jsxRuntime.jsx(IconWithSpinner.IconWithSpinner, { Icon: findSocialIcon(embeddedSocialSigninProvider), isSpinning: socialProvider === embeddedSocialSigninProvider, iconSize: 32 }), jsxRuntime.jsxs(Typography.Typography, Object.assign({ variant: 'button_primary' }, { children: ["Connect with", ' ', capitalize.capitalize(embeddedSocialSigninProvider === null || embeddedSocialSigninProvider === void 0 ? void 0 : embeddedSocialSigninProvider.toString())] }))] }), embeddedSocialSigninProvider)) : (jsxRuntime.jsx(LoginEmailForm.LoginEmailForm, { isLoading: false, currentEmail: email }))] }))] })));
 };
 
 exports.AccountExistsView = AccountExistsView;

package/src/lib/views/AccountExistsView/AccountExistsView.js

@@ -49,7 +49,7 @@ import '../../components/InlineWidget/InlineWidget.js';
 import '../../components/MenuList/Dropdown/Dropdown.js';
 import { capitalize } from '../../shared/utils/functions/capitalize/capitalize.js';
 import { useSocialRedirectContext } from '../../context/SocialRedirectContext/SocialRedirectContext.js';
-import { LoginWithEmailForm } from '../LoginWithEmailView/components/LoginWithEmailForm/LoginWithEmailForm.js';
+import { LoginEmailForm } from '../LoginView/components/EmailSignIn/LoginEmailForm.js';
 
 const AccountExistsView = () => {
     const { existentAccountData } = useAccountExistsContext();
@@ -67,7 +67,7 @@ const AccountExistsView = () => {
             : '. Please log in with your email.';
         return (jsxs(Fragment, { children: ["It looks like an account already exists using ", jsx("strong", { children: email }), '', messageTrail] }));
     };
-    return (jsxs("div", Object.assign({ className: 'account-exists__container' }, { children: [jsx(UserProfileIcon, { className: 'account-exists__image' }), jsxs("div", Object.assign({ className: 'account-exists__main' }, { children: [jsx("div", Object.assign({ className: 'account-exists__content' }, { children: jsx(Typography, Object.assign({ variant: 'body_normal', weight: 'regular', color: 'secondary', className: 'account-exists__content--secondary' }, { children: renderFullMessage() })) })), embeddedSocialSigninProvider ? (jsxs(IconListTile, Object.assign({ dataTestId: `inline-${embeddedSocialSigninProvider}`, onClick: () => handleNewLoging(), className: 'social-sign-in--tile' }, { children: [jsx(IconWithSpinner, { Icon: findSocialIcon(embeddedSocialSigninProvider), isSpinning: socialProvider === embeddedSocialSigninProvider, iconSize: 32 }), jsxs(Typography, Object.assign({ variant: 'button_primary' }, { children: ["Connect with", ' ', capitalize(embeddedSocialSigninProvider === null || embeddedSocialSigninProvider === void 0 ? void 0 : embeddedSocialSigninProvider.toString())] }))] }), embeddedSocialSigninProvider)) : (jsx(LoginWithEmailForm, { currentEmail: email }))] }))] })));
+    return (jsxs("div", Object.assign({ className: 'account-exists__container' }, { children: [jsx(UserProfileIcon, { className: 'account-exists__image' }), jsxs("div", Object.assign({ className: 'account-exists__main' }, { children: [jsx("div", Object.assign({ className: 'account-exists__content' }, { children: jsx(Typography, Object.assign({ variant: 'body_normal', weight: 'regular', color: 'secondary', className: 'account-exists__content--secondary' }, { children: renderFullMessage() })) })), embeddedSocialSigninProvider ? (jsxs(IconListTile, Object.assign({ dataTestId: `inline-${embeddedSocialSigninProvider}`, onClick: () => handleNewLoging(), className: 'social-sign-in--tile' }, { children: [jsx(IconWithSpinner, { Icon: findSocialIcon(embeddedSocialSigninProvider), isSpinning: socialProvider === embeddedSocialSigninProvider, iconSize: 32 }), jsxs(Typography, Object.assign({ variant: 'button_primary' }, { children: ["Connect with", ' ', capitalize(embeddedSocialSigninProvider === null || embeddedSocialSigninProvider === void 0 ? void 0 : embeddedSocialSigninProvider.toString())] }))] }), embeddedSocialSigninProvider)) : (jsx(LoginEmailForm, { isLoading: false, currentEmail: email }))] }))] })));
 };
 
 export { AccountExistsView };

package/src/lib/views/EmailWalletOTPVerificationView/EmailWalletOTPVerificationView.cjs

@@ -69,7 +69,7 @@ const EmailWalletOTPVerificationView = () => {
     const { data: isValid, isLoading, mutate: onSubmit, } = useMutation.useMutation((otp) => emailWalletConnector.verifyOneTimePassword(otp), {
         onFailure: (error) => setError(error),
     });
-    return (jsxRuntime.jsx(OTPVerificationView.OTPVerificationView, { email: email, error: error, onClickBack: handleBackClick, isLoading: isLoading, onPinComplete: onSubmit, isValid: isValid === true, onPinChange: () => setError(undefined), onClickClose: handleOnClickClose, onClickEditEmail: handleBackClick, displayPoweredByDynamic: true, successBannerText: 'By signing in, you will access a wallet that is only associated to this email.' }));
+    return (jsxRuntime.jsx(OTPVerificationView.OTPVerificationView, { email: email, error: error, onClickBack: handleBackClick, isLoading: isLoading, onPinComplete: onSubmit, isValid: isValid === true, onPinChange: () => setError(undefined), onClickClose: handleOnClickClose, onClickEditEmail: handleBackClick, displayPoweredByDynamic: true, successBannerText: 'Sign in to access your email based wallet' }));
 };
 
 exports.EmailWalletOTPVerificationView = EmailWalletOTPVerificationView;

package/src/lib/views/EmailWalletOTPVerificationView/EmailWalletOTPVerificationView.js

@@ -65,7 +65,7 @@ const EmailWalletOTPVerificationView = () => {
     const { data: isValid, isLoading, mutate: onSubmit, } = useMutation((otp) => emailWalletConnector.verifyOneTimePassword(otp), {
         onFailure: (error) => setError(error),
     });
-    return (jsx(OTPVerificationView, { email: email, error: error, onClickBack: handleBackClick, isLoading: isLoading, onPinComplete: onSubmit, isValid: isValid === true, onPinChange: () => setError(undefined), onClickClose: handleOnClickClose, onClickEditEmail: handleBackClick, displayPoweredByDynamic: true, successBannerText: 'By signing in, you will access a wallet that is only associated to this email.' }));
+    return (jsx(OTPVerificationView, { email: email, error: error, onClickBack: handleBackClick, isLoading: isLoading, onPinComplete: onSubmit, isValid: isValid === true, onPinChange: () => setError(undefined), onClickClose: handleOnClickClose, onClickEditEmail: handleBackClick, displayPoweredByDynamic: true, successBannerText: 'Sign in to access your email based wallet' }));
 };
 
 export { EmailWalletOTPVerificationView };

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

@@ -0,0 +1,70 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var jsxRuntime = require('react/jsx-runtime');
+var React = require('react');
+var Divider = require('../../components/Divider/Divider.cjs');
+var ErrorContext = require('../../context/ErrorContext/ErrorContext.cjs');
+var ErrorContainer = require('../../components/ErrorContainer/ErrorContainer.cjs');
+var LoadingContext = require('../../context/LoadingContext/LoadingContext.cjs');
+var useAuthLayoutChecks = require('../../utils/hooks/useAuthLayoutChecks/useAuthLayoutChecks.cjs');
+var classNames = require('../../utils/functions/classNames/classNames.cjs');
+var ViewContext = require('../../context/ViewContext/ViewContext.cjs');
+var WalletList = require('../WalletList/WalletList.cjs');
+var SocialSignIn = require('./components/SocialSignIn/SocialSignIn.cjs');
+var WalletSignIn = require('./components/WalletSignIn/WalletSignIn.cjs');
+var LoginEmailForm = require('./components/EmailSignIn/LoginEmailForm.cjs');
+var useLoginView = require('./useLoginView.cjs');
+
+const LoginView = () => {
+    const { error } = ErrorContext.useErrorContext();
+    const { loading } = LoadingContext.useLoadingContext();
+    const { showToSFooter } = useAuthLayoutChecks.useAuthLayoutChecks();
+    const { view, setView } = ViewContext.useViewContext();
+    const { isWalletOnly, logingViewSections } = useLoginView.useLoginView();
+    const [showWalletList, setShowWalletList] = React.useState(isWalletOnly);
+    const [isLoading, setIsLoading] = React.useState(loading);
+    React.useEffect(() => {
+        // toolkit log in with email was set to false
+        if (isWalletOnly) {
+            setView('login-with-wallet-only');
+            setShowWalletList(true);
+        }
+        // returning from 'View all wallets' button
+        if (!isWalletOnly && view === 'login-with-email-or-wallet') {
+            setShowWalletList(false);
+        }
+        // toolkit log in with email was set back to true
+        if (!isWalletOnly &&
+            (!showWalletList || view === 'login-with-wallet-only')) {
+            setView('login-with-email-or-wallet');
+            setShowWalletList(false);
+        }
+    }, [isWalletOnly, view]);
+    const renderViewSections = React.useMemo(() => logingViewSections.map((viewSection, index) => {
+        switch (viewSection.type) {
+            case 'separator':
+                return (jsxRuntime.jsx(Divider.Divider, { text: viewSection.label }, `${viewSection.type}_${index}`));
+            case 'email':
+                return (jsxRuntime.jsx(LoginEmailForm.LoginEmailForm, { onSubmit: () => setIsLoading(true), onSubmitError: () => setIsLoading(false), isLoading: isLoading }, `${viewSection.type}_${index}`));
+            case 'wallet':
+                return (jsxRuntime.jsx(WalletSignIn.WalletSignIn, { numberOfItensToShow: viewSection.numOfItemsToDisplay || 0, onSubmit: () => {
+                        setView('login-with-email-or-wallet-full-wallet-list'); // this view is just to show the back button
+                        setShowWalletList(true);
+                    }, isLoading: isLoading }, `${viewSection.type}_${index}`));
+            case 'social':
+                return jsxRuntime.jsx(SocialSignIn.SocialSignIn, {}, `${viewSection.type}_${index}`);
+            default:
+                return;
+        }
+    }), [logingViewSections, isLoading, setView]);
+    if (showWalletList) {
+        return jsxRuntime.jsx(WalletList.WalletList, {});
+    }
+    return (jsxRuntime.jsxs("div", Object.assign({ className: 'login-with-email__container' }, { children: [error && jsxRuntime.jsx(ErrorContainer.ErrorContainer, { children: error }), jsxRuntime.jsx("div", Object.assign({ className: classNames.classNames('login-with-email__scroll', {
+                    'login-with-email__scroll--with-footer': showToSFooter,
+                }), "data-testid": 'login-with-email-scroll' }, { children: renderViewSections }))] })));
+};
+
+exports.LoginView = LoginView;

package/src/lib/views/LoginView/LoginView.d.ts

@@ -0,0 +1,2 @@
+/// <reference types="react" />
+export declare const LoginView: () => JSX.Element;

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

@@ -0,0 +1,66 @@
+import { jsx, jsxs } from 'react/jsx-runtime';
+import { useState, useEffect, useMemo } from 'react';
+import { Divider } from '../../components/Divider/Divider.js';
+import { useErrorContext } from '../../context/ErrorContext/ErrorContext.js';
+import { ErrorContainer } from '../../components/ErrorContainer/ErrorContainer.js';
+import { useLoadingContext } from '../../context/LoadingContext/LoadingContext.js';
+import { useAuthLayoutChecks } from '../../utils/hooks/useAuthLayoutChecks/useAuthLayoutChecks.js';
+import { classNames } from '../../utils/functions/classNames/classNames.js';
+import { useViewContext } from '../../context/ViewContext/ViewContext.js';
+import { WalletList } from '../WalletList/WalletList.js';
+import { SocialSignIn } from './components/SocialSignIn/SocialSignIn.js';
+import { WalletSignIn } from './components/WalletSignIn/WalletSignIn.js';
+import { LoginEmailForm } from './components/EmailSignIn/LoginEmailForm.js';
+import { useLoginView } from './useLoginView.js';
+
+const LoginView = () => {
+    const { error } = useErrorContext();
+    const { loading } = useLoadingContext();
+    const { showToSFooter } = useAuthLayoutChecks();
+    const { view, setView } = useViewContext();
+    const { isWalletOnly, logingViewSections } = useLoginView();
+    const [showWalletList, setShowWalletList] = useState(isWalletOnly);
+    const [isLoading, setIsLoading] = useState(loading);
+    useEffect(() => {
+        // toolkit log in with email was set to false
+        if (isWalletOnly) {
+            setView('login-with-wallet-only');
+            setShowWalletList(true);
+        }
+        // returning from 'View all wallets' button
+        if (!isWalletOnly && view === 'login-with-email-or-wallet') {
+            setShowWalletList(false);
+        }
+        // toolkit log in with email was set back to true
+        if (!isWalletOnly &&
+            (!showWalletList || view === 'login-with-wallet-only')) {
+            setView('login-with-email-or-wallet');
+            setShowWalletList(false);
+        }
+    }, [isWalletOnly, view]);
+    const renderViewSections = useMemo(() => logingViewSections.map((viewSection, index) => {
+        switch (viewSection.type) {
+            case 'separator':
+                return (jsx(Divider, { text: viewSection.label }, `${viewSection.type}_${index}`));
+            case 'email':
+                return (jsx(LoginEmailForm, { onSubmit: () => setIsLoading(true), onSubmitError: () => setIsLoading(false), isLoading: isLoading }, `${viewSection.type}_${index}`));
+            case 'wallet':
+                return (jsx(WalletSignIn, { numberOfItensToShow: viewSection.numOfItemsToDisplay || 0, onSubmit: () => {
+                        setView('login-with-email-or-wallet-full-wallet-list'); // this view is just to show the back button
+                        setShowWalletList(true);
+                    }, isLoading: isLoading }, `${viewSection.type}_${index}`));
+            case 'social':
+                return jsx(SocialSignIn, {}, `${viewSection.type}_${index}`);
+            default:
+                return;
+        }
+    }), [logingViewSections, isLoading, setView]);
+    if (showWalletList) {
+        return jsx(WalletList, {});
+    }
+    return (jsxs("div", Object.assign({ className: 'login-with-email__container' }, { children: [error && jsx(ErrorContainer, { children: error }), jsx("div", Object.assign({ className: classNames('login-with-email__scroll', {
+                    'login-with-email__scroll--with-footer': showToSFooter,
+                }), "data-testid": 'login-with-email-scroll' }, { children: renderViewSections }))] })));
+};
+
+export { LoginView };

package/src/lib/views/{LoginWithEmailView/components/LoginWithEmailForm/LoginWithEmailForm.cjs → LoginView/components/EmailSignIn/LoginEmailForm.cjs}

@@ -48,14 +48,12 @@ require('../../../../components/Popper/Popper/Popper.cjs');
 require('../../../../components/Popper/PopperContext/PopperContext.cjs');
 require('../../../../components/InlineWidget/InlineWidget.cjs');
 require('../../../../components/MenuList/Dropdown/Dropdown.cjs');
-var LoadingContext = require('../../../../context/LoadingContext/LoadingContext.cjs');
 var useEmailProvider = require('../../../../utils/hooks/useEmailProvider/useEmailProvider.cjs');
 
 const EMAIL_REGEX = /^[A-Z0-9._%+-]+@[A-Z0-9.-]+\.[A-Z]{2,}$/i;
-const LoginWithEmailForm = ({ currentEmail }) => {
+const LoginEmailForm = ({ isLoading: isExternalLoading, onSubmit, onSubmitError, currentEmail, }) => {
     var _a;
     const { environmentId, wallets, projectSettings } = useInternalDynamicContext.useInternalDynamicContext();
-    const { loading, setLoading } = LoadingContext.useLoadingContext();
     const { setErrorMessage } = ErrorContext.useErrorContext();
     const [emailInput, setEmailInput] = React.useState(currentEmail !== null && currentEmail !== void 0 ? currentEmail : '');
     const [emailError, setEmailError] = React.useState(false);
@@ -65,13 +63,12 @@ const LoginWithEmailForm = ({ currentEmail }) => {
     const { handleEmailOnlyLoginSubmit, submitEmail, isEmailProviderLoading } = useEmailProvider.useEmailProvider({
         emailWalletConnector,
     });
-    const isLoading = React.useMemo(() => isEmailProviderLoading || loading, [isEmailProviderLoading, loading]);
+    const isLoading = React.useMemo(() => isEmailProviderLoading || isExternalLoading, [isEmailProviderLoading, isExternalLoading]);
     const handleEmailOnChangeEvent = (event) => {
         const { value } = event.currentTarget;
         setEmailInput(value);
     };
     const isInjectedWalletProviderEnabled = emailWalletConnector !== undefined;
-    const onChangeHandler = handleEmailOnChangeEvent;
     const emailInputSuffixIcon = (jsxRuntime.jsx(IconButton.IconButton, Object.assign({ "data-testid": 'email_submit_button', type: 'submit', className: `icon-button${((_a = emailInput === null || emailInput === void 0 ? void 0 : emailInput.trim()) === null || _a === void 0 ? void 0 : _a.length) ? '--visible' : ''}`, disabled: isLoading }, { children: jsxRuntime.jsx(arrowRight.ReactComponent, {}) })));
     const handleSubmit = (e) => _tslib.__awaiter(void 0, void 0, void 0, function* () {
         e.preventDefault();
@@ -80,7 +77,7 @@ const LoginWithEmailForm = ({ currentEmail }) => {
             return;
         }
         try {
-            setLoading(true);
+            onSubmit === null || onSubmit === void 0 ? void 0 : onSubmit();
             if (isInjectedWalletProviderEnabled &&
                 (projectSettings === null || projectSettings === void 0 ? void 0 : projectSettings.sdk.confirmEmailProviderForVerify)) {
                 // see: https://linear.app/dynamic-labs/issue/DYN-2517
@@ -89,7 +86,11 @@ const LoginWithEmailForm = ({ currentEmail }) => {
                     email: emailInput,
                     environmentId,
                 });
-                if (emailProvider === sdkApi.ProviderEnum.EmailOnly) {
+                // For v0.19 we will support emailOnly and Dynamic as email providers
+                // For v0.20/v1 we need to remove emailOnly and leave Dynamic as the only one email provider
+                // Ticket: https://linear.app/dynamic-labs/issue/GVTY-213/remove-emailonly-as-a-provider-from-sdk
+                if (emailProvider === sdkApi.ProviderEnum.EmailOnly ||
+                    emailProvider === sdkApi.ProviderEnum.Dynamic) {
                     yield handleEmailOnlyLoginSubmit(emailInput);
                     return;
                 }
@@ -99,14 +100,12 @@ const LoginWithEmailForm = ({ currentEmail }) => {
         catch (error) {
             logger.logger.debug(error);
             setErrorMessage(error.code);
-        }
-        finally {
-            setLoading(false);
+            onSubmitError === null || onSubmitError === void 0 ? void 0 : onSubmitError();
         }
     });
     // social sign in currently coupled to email... might be better to decouple
-    return (jsxRuntime.jsx("form", Object.assign({ className: 'login-with-email-form', onSubmit: (e) => handleSubmit(e) }, { children: jsxRuntime.jsx(Input.Input, { id: 'email_field', value: emailInput, onChange: onChangeHandler, label: 'Enter your email', error: emailError, message: emailError && 'Please enter a valid email address', suffix: emailInputSuffixIcon }) })));
+    return (jsxRuntime.jsx("form", Object.assign({ className: 'login-with-email-form', onSubmit: (e) => handleSubmit(e) }, { children: jsxRuntime.jsx(Input.Input, { id: 'email_field', value: emailInput, onChange: handleEmailOnChangeEvent, label: 'Enter your email', error: emailError, message: emailError && 'Please enter a valid email address', suffix: emailInputSuffixIcon, disabled: isLoading }) })));
 };
 
 exports.EMAIL_REGEX = EMAIL_REGEX;
-exports.LoginWithEmailForm = LoginWithEmailForm;
+exports.LoginEmailForm = LoginEmailForm;

package/src/lib/views/LoginView/components/EmailSignIn/LoginEmailForm.d.ts

@@ -0,0 +1,8 @@
+/// <reference types="react" />
+import { LoginWidgetProps } from '../LoginWidget';
+export declare const EMAIL_REGEX: RegExp;
+interface Props extends LoginWidgetProps {
+    currentEmail?: string;
+}
+export declare const LoginEmailForm: React.FC<Props>;
+export {};

package/src/lib/views/{LoginWithEmailView/components/LoginWithEmailForm/LoginWithEmailForm.js → LoginView/components/EmailSignIn/LoginEmailForm.js}

@@ -44,14 +44,12 @@ import '../../../../components/Popper/Popper/Popper.js';
 import '../../../../components/Popper/PopperContext/PopperContext.js';
 import '../../../../components/InlineWidget/InlineWidget.js';
 import '../../../../components/MenuList/Dropdown/Dropdown.js';
-import { useLoadingContext } from '../../../../context/LoadingContext/LoadingContext.js';
 import { useEmailProvider } from '../../../../utils/hooks/useEmailProvider/useEmailProvider.js';
 
 const EMAIL_REGEX = /^[A-Z0-9._%+-]+@[A-Z0-9.-]+\.[A-Z]{2,}$/i;
-const LoginWithEmailForm = ({ currentEmail }) => {
+const LoginEmailForm = ({ isLoading: isExternalLoading, onSubmit, onSubmitError, currentEmail, }) => {
     var _a;
     const { environmentId, wallets, projectSettings } = useInternalDynamicContext();
-    const { loading, setLoading } = useLoadingContext();
     const { setErrorMessage } = useErrorContext();
     const [emailInput, setEmailInput] = useState(currentEmail !== null && currentEmail !== void 0 ? currentEmail : '');
     const [emailError, setEmailError] = useState(false);
@@ -61,13 +59,12 @@ const LoginWithEmailForm = ({ currentEmail }) => {
     const { handleEmailOnlyLoginSubmit, submitEmail, isEmailProviderLoading } = useEmailProvider({
         emailWalletConnector,
     });
-    const isLoading = useMemo(() => isEmailProviderLoading || loading, [isEmailProviderLoading, loading]);
+    const isLoading = useMemo(() => isEmailProviderLoading || isExternalLoading, [isEmailProviderLoading, isExternalLoading]);
     const handleEmailOnChangeEvent = (event) => {
         const { value } = event.currentTarget;
         setEmailInput(value);
     };
     const isInjectedWalletProviderEnabled = emailWalletConnector !== undefined;
-    const onChangeHandler = handleEmailOnChangeEvent;
     const emailInputSuffixIcon = (jsx(IconButton, Object.assign({ "data-testid": 'email_submit_button', type: 'submit', className: `icon-button${((_a = emailInput === null || emailInput === void 0 ? void 0 : emailInput.trim()) === null || _a === void 0 ? void 0 : _a.length) ? '--visible' : ''}`, disabled: isLoading }, { children: jsx(SvgArrowRight, {}) })));
     const handleSubmit = (e) => __awaiter(void 0, void 0, void 0, function* () {
         e.preventDefault();
@@ -76,7 +73,7 @@ const LoginWithEmailForm = ({ currentEmail }) => {
             return;
         }
         try {
-            setLoading(true);
+            onSubmit === null || onSubmit === void 0 ? void 0 : onSubmit();
             if (isInjectedWalletProviderEnabled &&
                 (projectSettings === null || projectSettings === void 0 ? void 0 : projectSettings.sdk.confirmEmailProviderForVerify)) {
                 // see: https://linear.app/dynamic-labs/issue/DYN-2517
@@ -85,7 +82,11 @@ const LoginWithEmailForm = ({ currentEmail }) => {
                     email: emailInput,
                     environmentId,
                 });
-                if (emailProvider === ProviderEnum.EmailOnly) {
+                // For v0.19 we will support emailOnly and Dynamic as email providers
+                // For v0.20/v1 we need to remove emailOnly and leave Dynamic as the only one email provider
+                // Ticket: https://linear.app/dynamic-labs/issue/GVTY-213/remove-emailonly-as-a-provider-from-sdk
+                if (emailProvider === ProviderEnum.EmailOnly ||
+                    emailProvider === ProviderEnum.Dynamic) {
                     yield handleEmailOnlyLoginSubmit(emailInput);
                     return;
                 }
@@ -95,13 +96,11 @@ const LoginWithEmailForm = ({ currentEmail }) => {
         catch (error) {
             logger.debug(error);
             setErrorMessage(error.code);
-        }
-        finally {
-            setLoading(false);
+            onSubmitError === null || onSubmitError === void 0 ? void 0 : onSubmitError();
         }
     });
     // social sign in currently coupled to email... might be better to decouple
-    return (jsx("form", Object.assign({ className: 'login-with-email-form', onSubmit: (e) => handleSubmit(e) }, { children: jsx(Input, { id: 'email_field', value: emailInput, onChange: onChangeHandler, label: 'Enter your email', error: emailError, message: emailError && 'Please enter a valid email address', suffix: emailInputSuffixIcon }) })));
+    return (jsx("form", Object.assign({ className: 'login-with-email-form', onSubmit: (e) => handleSubmit(e) }, { children: jsx(Input, { id: 'email_field', value: emailInput, onChange: handleEmailOnChangeEvent, label: 'Enter your email', error: emailError, message: emailError && 'Please enter a valid email address', suffix: emailInputSuffixIcon, disabled: isLoading }) })));
 };
 
-export { EMAIL_REGEX, LoginWithEmailForm };
+export { EMAIL_REGEX, LoginEmailForm };

package/src/lib/views/LoginView/components/EmailSignIn/index.d.ts

@@ -0,0 +1 @@
+export { LoginEmailForm } from './LoginEmailForm';

package/src/lib/views/LoginView/components/LoginWidget.d.ts

@@ -0,0 +1,5 @@
+export interface LoginWidgetProps {
+    onSubmit?: () => void;
+    onSubmitError?: () => void;
+    isLoading: boolean;
+}

package/src/lib/views/LoginView/components/WalletSignIn/ListItemButton/ListItemButton.cjs

@@ -0,0 +1,65 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var jsxRuntime = require('react/jsx-runtime');
+var React = require('react');
+require('@dynamic-labs/iconic');
+require('../../../../../context/ViewContext/ViewContext.cjs');
+var stroke = require('../../../../../shared/assets/stroke.cjs');
+var classNames = require('../../../../../utils/functions/classNames/classNames.cjs');
+require('@dynamic-labs/sdk-api');
+require('../../../../../shared/logger.cjs');
+require('@dynamic-labs/wallet-connector-core');
+require('@dynamic-labs/wallet-book');
+require('@dynamic-labs/utils');
+require('../../../../../utils/constants/colors.cjs');
+require('../../../../../shared/utils/classes/storage/localStorage.cjs');
+require('ethers');
+require('../../../../../shared/consts/index.cjs');
+require('../../../../../context/DynamicContext/DynamicContext.cjs');
+require('@dynamic-labs/multi-wallet');
+require('../../../../../components/ShadowDOM/ShadowDOM.cjs');
+require('../../../../../context/ThemeContext/ThemeContext.cjs');
+var Icon = require('../../../../../components/Icon/Icon.cjs');
+require('react-dom');
+require('react-focus-lock');
+require('../../../../../components/Transition/ZoomTransition/ZoomTransition.cjs');
+require('../../../../../components/Transition/SlideInUpTransition/SlideInUpTransition.cjs');
+require('../../../../../components/Transition/OpacityTransition/OpacityTransition.cjs');
+require('../../../../../config/ApiEndpoint.cjs');
+require('@dynamic-labs/rpc-providers');
+require('../../../../../utils/hooks/useWallets/utils/verifyMagicIsSetup/verifyMagicIsSetup.cjs');
+require('../../../../../context/ErrorContext/ErrorContext.cjs');
+require('../../../../../context/AccessDeniedContext/AccessDeniedContext.cjs');
+require('../../../../../context/AccountExistsContext/AccountExistsContext.cjs');
+require('../../../../../components/IconButton/IconButton.cjs');
+require('../../../../../components/Alert/Alert.cjs');
+require('formik');
+require('yup');
+require('../../../../CollectUserDataView/fieldsConfig.cjs');
+require('../../../../../context/MockContext/MockContext.cjs');
+require('../../../../../context/CaptchaContext/CaptchaContext.cjs');
+require('../../../../../context/EmailVerificationContext/EmailVerificationContext.cjs');
+require('@dynamic-labs/types');
+require('../../../../../utils/hooks/useUserUpdateRequest/useUpdateUser/useUpdateUser.cjs');
+require('../../../../../context/UserFieldEditorContext/UserFieldEditorContext.cjs');
+var ListTile = require('../../../../../components/ListTile/ListTile.cjs');
+require('../../../../../components/Popper/Popper/Popper.cjs');
+require('../../../../../components/Popper/PopperContext/PopperContext.cjs');
+require('../../../../../components/InlineWidget/InlineWidget.cjs');
+require('../../../../../components/MenuList/Dropdown/Dropdown.cjs');
+var Badge = require('../../../../../components/Badge/Badge.cjs');
+
+const ListItemButton = ({ text, onClick, numberOfWallets, disabled = false, }) => {
+    const numberOfWalletsText = React.useMemo(() => {
+        if (numberOfWallets <= 10) {
+            return numberOfWallets;
+        }
+        return `+${Math.floor(numberOfWallets / 10) * 10}`;
+    }, [numberOfWallets]);
+    const trailing = (jsxRuntime.jsxs("div", Object.assign({ className: 'list-item-button__trailing' }, { children: [jsxRuntime.jsx("div", Object.assign({ className: classNames.classNames('list-item-button__trailing-child', 'list-item-button__trailing-label') }, { children: jsxRuntime.jsx(Badge.Badge, { text: `${numberOfWalletsText} available` }) })), jsxRuntime.jsx("div", Object.assign({ className: classNames.classNames('list-item-button__trailing-child', 'list-item-button__trailing-icon') }, { children: jsxRuntime.jsx(Icon.Icon, Object.assign({ color: 'text-primary', size: 'small' }, { children: jsxRuntime.jsx(stroke.ReactComponent, {}) })) }))] })));
+    return (jsxRuntime.jsx(ListTile.ListTile, Object.assign({ trailing: trailing, onClick: onClick, className: 'list-item-button', disabled: disabled }, { children: text })));
+};
+
+exports.ListItemButton = ListItemButton;

package/src/lib/views/{LoginWithEmailView/components → LoginView/components/WalletSignIn}/ListItemButton/ListItemButton.d.ts

@@ -3,6 +3,7 @@ type Props = {
     numberOfWallets: number;
     onClick: VoidFunction;
     text: string;
+    disabled?: boolean;
 };
-export declare const ListItemButton: ({ text, onClick, numberOfWallets }: Props) => JSX.Element;
+export declare const ListItemButton: ({ text, onClick, numberOfWallets, disabled, }: Props) => JSX.Element;
 export {};

package/src/lib/views/LoginView/components/WalletSignIn/ListItemButton/ListItemButton.js

@@ -0,0 +1,61 @@
+import { jsxs, jsx } from 'react/jsx-runtime';
+import { useMemo } from 'react';
+import '@dynamic-labs/iconic';
+import '../../../../../context/ViewContext/ViewContext.js';
+import { ReactComponent as SvgStroke } from '../../../../../shared/assets/stroke.js';
+import { classNames } from '../../../../../utils/functions/classNames/classNames.js';
+import '@dynamic-labs/sdk-api';
+import '../../../../../shared/logger.js';
+import '@dynamic-labs/wallet-connector-core';
+import '@dynamic-labs/wallet-book';
+import '@dynamic-labs/utils';
+import '../../../../../utils/constants/colors.js';
+import '../../../../../shared/utils/classes/storage/localStorage.js';
+import 'ethers';
+import '../../../../../shared/consts/index.js';
+import '../../../../../context/DynamicContext/DynamicContext.js';
+import '@dynamic-labs/multi-wallet';
+import '../../../../../components/ShadowDOM/ShadowDOM.js';
+import '../../../../../context/ThemeContext/ThemeContext.js';
+import { Icon } from '../../../../../components/Icon/Icon.js';
+import 'react-dom';
+import 'react-focus-lock';
+import '../../../../../components/Transition/ZoomTransition/ZoomTransition.js';
+import '../../../../../components/Transition/SlideInUpTransition/SlideInUpTransition.js';
+import '../../../../../components/Transition/OpacityTransition/OpacityTransition.js';
+import '../../../../../config/ApiEndpoint.js';
+import '@dynamic-labs/rpc-providers';
+import '../../../../../utils/hooks/useWallets/utils/verifyMagicIsSetup/verifyMagicIsSetup.js';
+import '../../../../../context/ErrorContext/ErrorContext.js';
+import '../../../../../context/AccessDeniedContext/AccessDeniedContext.js';
+import '../../../../../context/AccountExistsContext/AccountExistsContext.js';
+import '../../../../../components/IconButton/IconButton.js';
+import '../../../../../components/Alert/Alert.js';
+import 'formik';
+import 'yup';
+import '../../../../CollectUserDataView/fieldsConfig.js';
+import '../../../../../context/MockContext/MockContext.js';
+import '../../../../../context/CaptchaContext/CaptchaContext.js';
+import '../../../../../context/EmailVerificationContext/EmailVerificationContext.js';
+import '@dynamic-labs/types';
+import '../../../../../utils/hooks/useUserUpdateRequest/useUpdateUser/useUpdateUser.js';
+import '../../../../../context/UserFieldEditorContext/UserFieldEditorContext.js';
+import { ListTile } from '../../../../../components/ListTile/ListTile.js';
+import '../../../../../components/Popper/Popper/Popper.js';
+import '../../../../../components/Popper/PopperContext/PopperContext.js';
+import '../../../../../components/InlineWidget/InlineWidget.js';
+import '../../../../../components/MenuList/Dropdown/Dropdown.js';
+import { Badge } from '../../../../../components/Badge/Badge.js';
+
+const ListItemButton = ({ text, onClick, numberOfWallets, disabled = false, }) => {
+    const numberOfWalletsText = useMemo(() => {
+        if (numberOfWallets <= 10) {
+            return numberOfWallets;
+        }
+        return `+${Math.floor(numberOfWallets / 10) * 10}`;
+    }, [numberOfWallets]);
+    const trailing = (jsxs("div", Object.assign({ className: 'list-item-button__trailing' }, { children: [jsx("div", Object.assign({ className: classNames('list-item-button__trailing-child', 'list-item-button__trailing-label') }, { children: jsx(Badge, { text: `${numberOfWalletsText} available` }) })), jsx("div", Object.assign({ className: classNames('list-item-button__trailing-child', 'list-item-button__trailing-icon') }, { children: jsx(Icon, Object.assign({ color: 'text-primary', size: 'small' }, { children: jsx(SvgStroke, {}) })) }))] })));
+    return (jsx(ListTile, Object.assign({ trailing: trailing, onClick: onClick, className: 'list-item-button', disabled: disabled }, { children: text })));
+};
+
+export { ListItemButton };

package/src/lib/views/{LoginWithEmailView/components/ListItemButton/ListItemButton.cjs → LoginView/components/WalletSignIn/WalletSignIn.cjs}

@@ -3,14 +3,12 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 
 var jsxRuntime = require('react/jsx-runtime');
-var React = require('react');
-require('@dynamic-labs/iconic');
-require('../../../../context/ViewContext/ViewContext.cjs');
-var stroke = require('../../../../shared/assets/stroke.cjs');
-var classNames = require('../../../../utils/functions/classNames/classNames.cjs');
+require('react');
 require('@dynamic-labs/sdk-api');
 require('../../../../shared/logger.cjs');
+require('@dynamic-labs/iconic');
 require('@dynamic-labs/wallet-connector-core');
+require('../../../../context/ViewContext/ViewContext.cjs');
 require('@dynamic-labs/wallet-book');
 require('@dynamic-labs/utils');
 require('../../../../utils/constants/colors.cjs');
@@ -21,7 +19,6 @@ require('../../../../context/DynamicContext/DynamicContext.cjs');
 require('@dynamic-labs/multi-wallet');
 require('../../../../components/ShadowDOM/ShadowDOM.cjs');
 require('../../../../context/ThemeContext/ThemeContext.cjs');
-var Icon = require('../../../../components/Icon/Icon.cjs');
 require('react-dom');
 require('react-focus-lock');
 require('../../../../components/Transition/ZoomTransition/ZoomTransition.cjs');
@@ -34,6 +31,7 @@ require('../../../../context/ErrorContext/ErrorContext.cjs');
 require('../../../../context/AccessDeniedContext/AccessDeniedContext.cjs');
 require('../../../../context/AccountExistsContext/AccountExistsContext.cjs');
 require('../../../../components/IconButton/IconButton.cjs');
+var Button = require('../../../../components/Button/Button.cjs');
 require('../../../../components/Alert/Alert.cjs');
 require('formik');
 require('yup');
@@ -44,22 +42,12 @@ require('../../../../context/EmailVerificationContext/EmailVerificationContext.c
 require('@dynamic-labs/types');
 require('../../../../utils/hooks/useUserUpdateRequest/useUpdateUser/useUpdateUser.cjs');
 require('../../../../context/UserFieldEditorContext/UserFieldEditorContext.cjs');
-var ListTile = require('../../../../components/ListTile/ListTile.cjs');
 require('../../../../components/Popper/Popper/Popper.cjs');
 require('../../../../components/Popper/PopperContext/PopperContext.cjs');
 require('../../../../components/InlineWidget/InlineWidget.cjs');
 require('../../../../components/MenuList/Dropdown/Dropdown.cjs');
-var Badge = require('../../../../components/Badge/Badge.cjs');
+var WalletSimpleSignIn = require('./WalletSimpleSignIn/WalletSimpleSignIn.cjs');
 
-const ListItemButton = ({ text, onClick, numberOfWallets }) => {
-    const numberOfWalletsText = React.useMemo(() => {
-        if (numberOfWallets <= 10) {
-            return numberOfWallets;
-        }
-        return `+${Math.floor(numberOfWallets / 10) * 10}`;
-    }, [numberOfWallets]);
-    const trailing = (jsxRuntime.jsxs("div", Object.assign({ className: 'list-item-button__trailing' }, { children: [jsxRuntime.jsx("div", Object.assign({ className: classNames.classNames('list-item-button__trailing-child', 'list-item-button__trailing-label') }, { children: jsxRuntime.jsx(Badge.Badge, { text: `${numberOfWalletsText} available` }) })), jsxRuntime.jsx("div", Object.assign({ className: classNames.classNames('list-item-button__trailing-child', 'list-item-button__trailing-icon') }, { children: jsxRuntime.jsx(Icon.Icon, Object.assign({ color: 'text-primary', size: 'small' }, { children: jsxRuntime.jsx(stroke.ReactComponent, {}) })) }))] })));
-    return (jsxRuntime.jsx(ListTile.ListTile, Object.assign({ trailing: trailing, onClick: onClick, className: 'list-item-button' }, { children: text })));
-};
+const WalletSignIn = ({ numberOfItensToShow, isLoading, onSubmit, }) => numberOfItensToShow > 0 ? (jsxRuntime.jsx(WalletSimpleSignIn.WalletSimpleSignIn, { previewWalletsNumber: numberOfItensToShow, onshowAllWallets: () => onSubmit === null || onSubmit === void 0 ? void 0 : onSubmit(), disabled: isLoading })) : (jsxRuntime.jsx(Button.Button, Object.assign({ disabled: isLoading, onClick: () => onSubmit === null || onSubmit === void 0 ? void 0 : onSubmit(), buttonVariant: 'primary', buttonPadding: 'large' }, { children: "Connect with Wallet" })));
 
-exports.ListItemButton = ListItemButton;
+exports.WalletSignIn = WalletSignIn;

package/src/lib/views/LoginView/components/WalletSignIn/WalletSignIn.d.ts

@@ -0,0 +1,7 @@
+/// <reference types="react" />
+import { LoginWidgetProps } from '../LoginWidget';
+interface WalletLoginProps extends LoginWidgetProps {
+    numberOfItensToShow: number;
+}
+export declare const WalletSignIn: React.FC<WalletLoginProps>;
+export {};