@dynamic-labs/sdk-react-core 0.19.0-alpha.4 → 0.19.0-alpha.6

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

@@ -143,6 +143,7 @@ const useSocialAccounts = ({ sessionTimeout } = {
             if (!isValidMessage) {
                 return;
             }
+            setIsProcessing(true);
             if (!((_c = providersWaitingOauthMessages.current) === null || _c === void 0 ? void 0 : _c[provider])) {
                 handleError(SocialOAuthErrorCode.SESSION_TIMEOUT, `Linking ${provider} account session timeout.`);
                 return;
@@ -197,15 +198,9 @@ const useSocialAccounts = ({ sessionTimeout } = {
         if (!providersWithoutWindowOpenerRefence.includes(provider)) {
             // For provider that support window.opener, we need to clear all states/listeners when the window is closed
             authWindowInterval.current = setInterval(() => {
-                var _a;
                 if (!(authWindow === null || authWindow === void 0 ? void 0 : authWindow.closed)) {
                     return;
                 }
-                // window was closed by user, before completing oauth
-                if ((_a = providersWaitingOauthMessages.current) === null || _a === void 0 ? void 0 : _a[provider]) {
-                    clearListeners();
-                    handleError(SocialOAuthErrorCode.OAUTH_WINDOW_CLOSED, `Linking ${provider} account window closed.`);
-                }
                 clearInterval(authWindowInterval.current);
                 setIsProcessing(false);
             });

package/src/lib/utils/hooks/useVerifyWallet/useVerifyWallet.cjs

@@ -90,21 +90,26 @@ const useVerifyWallet = ({ consumeNonce, displaySiweStatement, environmentId, pr
             }
         }
     };
+    const handleWalletUsedError = (e) => {
+        var _a;
+        // This is a special case where the user is trying to link a wallet
+        // and the wallet is already linked and we don't want to kill the session.
+        setShowAuthFlow(true);
+        setView('wallet-used');
+        setIsSingleWalletAccount(false);
+        if (e.code === 'reassign_wallet_error') {
+            if ((_a = projectSettings === null || projectSettings === void 0 ? void 0 : projectSettings.sdk) === null || _a === void 0 ? void 0 : _a.preventOrphanedAccounts) {
+                setView('wallet-cannot-be-transferred');
+            }
+            setIsSingleWalletAccount(true);
+        }
+    };
     const handleError = (e, walletConnector, address, oauth) => {
         removeConnectedWalletsInfo();
         // Ensure auth verification flag is taken down
         setIsVerificationInProgress(false);
-        // This is a special case where the user is trying to link a wallet
-        // and the wallet is already linked and we don't want to kill the session.
         if (e instanceof utils.WalletUsedError) {
-            setShowAuthFlow(true);
-            setView('wallet-used');
-            setIsSingleWalletAccount(false);
-            if (e.code === 'reassign_wallet_error') {
-                setView('wallet-cannot-be-transferred');
-                setIsSingleWalletAccount(true);
-            }
-            return;
+            return handleWalletUsedError(e);
         }
         walletConnector.endSession();
         if (e instanceof utils.ChainalysisError) {

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

@@ -86,21 +86,26 @@ const useVerifyWallet = ({ consumeNonce, displaySiweStatement, environmentId, pr
             }
         }
     };
+    const handleWalletUsedError = (e) => {
+        var _a;
+        // This is a special case where the user is trying to link a wallet
+        // and the wallet is already linked and we don't want to kill the session.
+        setShowAuthFlow(true);
+        setView('wallet-used');
+        setIsSingleWalletAccount(false);
+        if (e.code === 'reassign_wallet_error') {
+            if ((_a = projectSettings === null || projectSettings === void 0 ? void 0 : projectSettings.sdk) === null || _a === void 0 ? void 0 : _a.preventOrphanedAccounts) {
+                setView('wallet-cannot-be-transferred');
+            }
+            setIsSingleWalletAccount(true);
+        }
+    };
     const handleError = (e, walletConnector, address, oauth) => {
         removeConnectedWalletsInfo();
         // Ensure auth verification flag is taken down
         setIsVerificationInProgress(false);
-        // This is a special case where the user is trying to link a wallet
-        // and the wallet is already linked and we don't want to kill the session.
         if (e instanceof WalletUsedError) {
-            setShowAuthFlow(true);
-            setView('wallet-used');
-            setIsSingleWalletAccount(false);
-            if (e.code === 'reassign_wallet_error') {
-                setView('wallet-cannot-be-transferred');
-                setIsSingleWalletAccount(true);
-            }
-            return;
+            return handleWalletUsedError(e);
         }
         walletConnector.endSession();
         if (e instanceof ChainalysisError) {

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/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
@@ -103,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
@@ -99,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 };