@dynamic-labs/sdk-react-core 0.18.0-RC.1 → 0.18.0-RC.11

package/src/lib/views/EmailVerification/EmailVerification.js

@@ -1,18 +1,18 @@
 import { __awaiter } from '../../../../_virtual/_tslib.js';
 import { jsxs, jsx, Fragment } from 'react/jsx-runtime';
-import { useState, useCallback, useEffect } from 'react';
+import { useState, useCallback } from 'react';
 import { SignInWithEmailIcon } from '@dynamic-labs/iconic';
 import { NoAccessError } from '@dynamic-labs/utils';
 import { Typography } from '../../components/Typography/Typography.js';
 import { decodeJwt } from '../../shared/utils/functions/decodeJwt/decodeJwt.js';
-import '../../shared/logger.js';
-import '../../config/LSSuffix.js';
 import '@dynamic-labs/wallet-connector-core';
 import { useViewContext } from '../../context/ViewContext/ViewContext.js';
 import { ReactComponent as SvgCheck } from '../../shared/assets/check.js';
 import { ReactComponent as SvgCheckCircle } from '../../shared/assets/check-circle.js';
+import { logger } from '../../shared/logger.js';
 import '@dynamic-labs/wallet-book';
 import '../../utils/constants/colors.js';
+import '../../shared/utils/classes/storage/localStorage.js';
 import 'ethers';
 import '../../shared/consts/index.js';
 import { useInternalDynamicContext } from '../../context/DynamicContext/useInternalDynamicContext.js';
@@ -28,6 +28,7 @@ import '../../components/Transition/SlideInUpTransition/SlideInUpTransition.js';
 import '../../components/Transition/OpacityTransition/OpacityTransition.js';
 import { signInWithEmailVerification, retryEmailVerification } from '../../data/api.js';
 import '@dynamic-labs/rpc-providers';
+import '../../utils/hooks/useWallets/utils/verifyMagicIsSetup/verifyMagicIsSetup.js';
 import { useErrorContext } from '../../context/ErrorContext/ErrorContext.js';
 import '../../context/AccessDeniedContext/AccessDeniedContext.js';
 import '../../components/IconButton/IconButton.js';
@@ -38,32 +39,36 @@ import '../../components/Alert/Alert.js';
 import '../../context/MockContext/MockContext.js';
 import '../../context/CaptchaContext/CaptchaContext.js';
 import '../../utils/hooks/useUserUpdateRequest/useUserUpdateRequest.js';
+import { useCountdown } from '../../utils/hooks/useCountdown/useCountdown.js';
 import { TextButton } from '../../components/TextButton/TextButton.js';
 import { ErrorContainer } from '../../components/ErrorContainer/ErrorContainer.js';
-import { TosAndPp } from '../../components/TosAndPp/TosAndPp.js';
 import { PinField } from '../../components/PinField/PinField.js';
 import { shortenEmail } from '../../shared/utils/functions/shortenEmail/shortenEmail.js';
 import '../../components/Popper/Popper/Popper.js';
 import '../../components/Popper/PopperContext/PopperContext.js';
 import 'formik';
 import 'yup';
+import '../../components/InlineWidget/InlineWidget.js';
 import { useEmailVerificationContext } from '../../context/EmailVerificationContext/EmailVerificationContext.js';
 import { useLoadingContext } from '../../context/LoadingContext/LoadingContext.js';
 import { useEmailVerificationRequest } from '../../utils/hooks/authenticationHooks/useEmailVerificationRequest/useEmailVerificationRequest.js';
 import { useCreateUserProfileByJWTCallback } from '../../utils/hooks/useCreateUserProfileByJWTCallback/useCreateUserProfileByJWTCallback.js';
 
-const secondsToRetry = 15;
+const SECONDS_TO_RETRY = 15;
 const EmailVerification = () => {
     const [hideRetryButton, setHideRetryButton] = useState(false);
-    const [count, setCount] = useState(secondsToRetry);
     const [retried, setRetried] = useState(false);
     const [isValidated, setIsValidated] = useState(false);
     const [showTransferMessage, setShowTransferMessage] = useState(false);
     const { view, setView, goToInitialView } = useViewContext();
     const { error, setError, setErrorMessage } = useErrorContext();
-    const { environmentId, onboardingOnlyJwt, handleLogOut, termsOfServiceUrl, privacyPolicyUrl, authToken, setOnboardingOnlyJwt, setShowAuthFlow, setCallback, } = useInternalDynamicContext();
+    const { environmentId, onboardingOnlyJwt, handleLogOut, authToken, setOnboardingOnlyJwt, setShowAuthFlow, setCallback, } = useInternalDynamicContext();
     const { email, verificationUUID, setVerificationUUID } = useEmailVerificationContext();
     const { loading, setLoading } = useLoadingContext();
+    const { remainingSeconds, startCountdown } = useCountdown({
+        callback: () => setRetried(false),
+        seconds: SECONDS_TO_RETRY,
+    });
     const isLoginView = view === 'login-with-email-verification';
     const { verifyEmail } = useEmailVerificationRequest();
     const { createUserProfileByJWT } = useCreateUserProfileByJWTCallback();
@@ -72,7 +77,7 @@ const EmailVerification = () => {
         setLoading(true);
         if (!verificationUUID || (!authToken && !onboardingOnlyJwt)) {
             yield handleLogOut();
-            setView('wallet-list');
+            goToInitialView();
             return;
         }
         try {
@@ -88,6 +93,7 @@ const EmailVerification = () => {
             setShowAuthFlow(false);
         }
         catch (error) {
+            logger.debug(error);
             setErrorMessage(error.code);
         }
         finally {
@@ -100,7 +106,7 @@ const EmailVerification = () => {
         authToken,
         onboardingOnlyJwt,
         handleLogOut,
-        setView,
+        goToInitialView,
         verifyEmail,
         setShowAuthFlow,
         setOnboardingOnlyJwt,
@@ -112,7 +118,7 @@ const EmailVerification = () => {
         setLoading(true);
         if (!verificationUUID) {
             yield handleLogOut();
-            setView('wallet-list');
+            goToInitialView();
             return;
         }
         try {
@@ -123,7 +129,7 @@ const EmailVerification = () => {
             });
             if (!jwt) {
                 yield handleLogOut();
-                setView('wallet-list');
+                goToInitialView();
                 return;
             }
             const decodedJwt = decodeJwt(jwt);
@@ -137,15 +143,16 @@ const EmailVerification = () => {
             }
             setCallback('authSuccess');
             // this timeout is set to make sure that the user will see success message
-            setTimeout(() => {
-                createUserProfileByJWT(jwt);
+            setTimeout(() => __awaiter(void 0, void 0, void 0, function* () {
+                yield createUserProfileByJWT(jwt);
                 setShowAuthFlow(false);
-            }, 1500);
+            }), 1500);
         }
         catch (error) {
             if (error instanceof NoAccessError) {
                 setView('no-access');
             }
+            logger.debug(error);
             setErrorMessage(error.code);
         }
         finally {
@@ -156,10 +163,11 @@ const EmailVerification = () => {
         setLoading,
         verificationUUID,
         handleLogOut,
-        setView,
+        goToInitialView,
         environmentId,
         setCallback,
         setOnboardingOnlyJwt,
+        setView,
         createUserProfileByJWT,
         setShowAuthFlow,
         setErrorMessage,
@@ -177,9 +185,11 @@ const EmailVerification = () => {
             });
             setVerificationUUID(newVerificationUUID);
             setRetried(true);
+            startCountdown();
             setError(undefined);
         }
         catch (error) {
+            logger.debug(error);
             setErrorMessage(error.code);
             if (error.code === 'too_many_email_verification_attempts') {
                 setHideRetryButton(true);
@@ -192,26 +202,9 @@ const EmailVerification = () => {
             setLoading(false);
         }
     });
-    useEffect(() => {
-        /* istanbul ignore next */
-        setCount(secondsToRetry);
-        const timeout = setTimeout(() => {
-            if (retried)
-                setRetried(false);
-        }, secondsToRetry * 1000);
-        return () => clearTimeout(timeout);
-    }, [retried]);
-    useEffect(() => {
-        /* istanbul ignore next */
-        const timeout = setTimeout(() => {
-            if (count)
-                setCount((prev) => prev - 1);
-        }, 1000);
-        return () => clearTimeout(timeout);
-    }, [count]);
     return (jsxs("div", Object.assign({ className: 'email-verification__container' }, { children: [error && (jsx(ErrorContainer, Object.assign({ withIcon: false, className: 'email-verification__error-message' }, { children: error }))), showTransferMessage && (jsx("div", Object.assign({ className: 'email-verification__transfer-message' }, { children: "Verification complete, the email is now verified to this account." }))), isValidated ? (jsx("div", Object.assign({ className: 'email-verification__icon-container' }, { children: jsx(IconWithStatus, { containerClassName: 'email-verification__icon--verified', Icon: SignInWithEmailIcon, iconSize: 50, InnerIcon: SvgCheck }) }))) : (jsx(IconWithSpinner, { className: classNames({
                     'email-verification__icon-with-spinner': Boolean(!error),
-                }), Icon: SignInWithEmailIcon, iconSize: 80, isSpinning: true })), jsx(Typography, Object.assign({ weight: 'medium', variant: 'title', className: 'email-verification__title', color: 'primary' }, { children: "Confirm verification code" })), jsxs("div", Object.assign({ className: 'email-verification__copy-text-container' }, { children: [jsx(Typography, Object.assign({ variant: 'body_normal', weight: 'regular', color: 'secondary' }, { children: "We\u2019ve sent a verification code to" })), jsx(Typography, Object.assign({ variant: 'body_normal', weight: 'bold', color: 'secondary' }, { children: shortenEmail(email) }))] })), !isLoginView && (jsx(TextButton, Object.assign({ onClick: () => setView('update-email'), className: 'email-verification__text-button', disabled: loading }, { children: "Edit email" }))), jsx(PinField, { initialValue: Array(6).join('.').split('.'), isLoading: loading, handleComplete: isLoginView ? handleEmailLogin : handleComplete, isValidated: isValidated, inputMode: 'numeric', pattern: '[0-9]*', hasError: Boolean(error), onChange: () => setError(undefined) }), retried ? (jsxs(Fragment, { children: [jsxs(Typography, Object.assign({ variant: 'body_small', color: 'secondary' }, { children: ["Re-send code in ", count] })), jsxs("span", Object.assign({ className: 'email-verification__retry-container' }, { children: [jsx(SvgCheckCircle, {}), jsx(Typography, Object.assign({ variant: 'body_small', weight: 'medium', color: 'primary', className: 'email-verification__retry-container-text' }, { children: "Code sent" }))] }))] })) : (!hideRetryButton && (jsxs(Fragment, { children: [jsx(Typography, Object.assign({ variant: 'body_small', weight: 'medium', color: 'secondary' }, { children: "Did not receive your code yet?" })), jsx(TextButton, Object.assign({ className: 'email-verification__text-button', disabled: loading || isValidated, onClick: () => handleRetry() }, { children: "Re-send code" }))] }))), !isLoginView && (jsx(TextButton, Object.assign({ className: 'email-verification__log-out', onClick: () => handleLogOut() }, { children: "Log out" }))), termsOfServiceUrl && privacyPolicyUrl && isLoginView && (jsx(TosAndPp, { mode: 'logging in', privacyPolicyUrl: privacyPolicyUrl, termsOfServiceUrl: termsOfServiceUrl })), jsx(PoweredByDynamic, {})] })));
+                }), Icon: SignInWithEmailIcon, iconSize: 80, isSpinning: true })), jsx(Typography, Object.assign({ weight: 'medium', variant: 'title', className: 'email-verification__title', color: 'primary' }, { children: "Confirm verification code" })), jsxs("div", Object.assign({ className: 'email-verification__copy-text-container' }, { children: [jsx(Typography, Object.assign({ variant: 'body_normal', weight: 'regular', color: 'secondary' }, { children: "We\u2019ve sent a verification code to" })), jsx(Typography, Object.assign({ variant: 'body_normal', weight: 'bold', color: 'secondary' }, { children: shortenEmail(email) }))] })), !isLoginView && (jsx(TextButton, Object.assign({ onClick: () => setView('update-email'), className: 'email-verification__text-button', disabled: loading }, { children: "Edit email" }))), jsx(PinField, { initialValue: Array(6).join('.').split('.'), isLoading: loading, handleComplete: isLoginView ? handleEmailLogin : handleComplete, isValidated: isValidated, inputMode: 'numeric', pattern: '[0-9]*', hasError: Boolean(error), onChange: () => setError(undefined) }), retried ? (jsxs(Fragment, { children: [jsxs(Typography, Object.assign({ variant: 'body_small', color: 'secondary' }, { children: ["Re-send code in ", remainingSeconds] })), jsxs("span", Object.assign({ className: 'email-verification__retry-container' }, { children: [jsx(SvgCheckCircle, {}), jsx(Typography, Object.assign({ variant: 'body_small', weight: 'medium', color: 'primary', className: 'email-verification__retry-container-text' }, { children: "Code sent" }))] }))] })) : (!hideRetryButton && (jsxs(Fragment, { children: [jsx(Typography, Object.assign({ variant: 'body_small', weight: 'medium', color: 'secondary' }, { children: "Did not receive your code yet?" })), jsx(TextButton, Object.assign({ className: 'email-verification__text-button', disabled: loading || isValidated, onClick: () => handleRetry() }, { children: "Re-send code" }))] }))), !isLoginView && (jsx(TextButton, Object.assign({ className: 'email-verification__log-out', onClick: handleLogOut }, { children: "Log out" }))), jsx(PoweredByDynamic, {})] })));
 };
 
 export { EmailVerification };

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

@@ -11,14 +11,15 @@ require('@dynamic-labs/utils');
 require('@dynamic-labs/sdk-api');
 require('../../config/ApiEndpoint.cjs');
 require('../../shared/logger.cjs');
-require('../../config/LSSuffix.cjs');
 require('@dynamic-labs/iconic');
 require('@dynamic-labs/wallet-book');
 require('../../utils/constants/colors.cjs');
+require('../../shared/utils/classes/storage/localStorage.cjs');
 require('ethers');
 require('../../shared/consts/index.cjs');
 require('@dynamic-labs/multi-wallet');
 require('@dynamic-labs/rpc-providers');
+require('../../utils/hooks/useWallets/utils/verifyMagicIsSetup/verifyMagicIsSetup.cjs');
 require('../../context/ErrorContext/ErrorContext.cjs');
 require('../../context/AccessDeniedContext/AccessDeniedContext.cjs');
 require('react-dom');
@@ -35,6 +36,7 @@ require('../../components/Popper/Popper/Popper.cjs');
 require('../../components/Popper/PopperContext/PopperContext.cjs');
 require('formik');
 require('yup');
+require('../../components/InlineWidget/InlineWidget.cjs');
 require('../../context/MockContext/MockContext.cjs');
 require('../../context/CaptchaContext/CaptchaContext.cjs');
 var useMutation = require('../../utils/hooks/useMutation/useMutation.cjs');
@@ -43,7 +45,7 @@ require('../../utils/hooks/useUserUpdateRequest/useUserUpdateRequest.cjs');
 const EmailWalletOTPVerificationView = () => {
     const { setView } = ViewContext.useViewContext();
     const [error, setError] = React.useState();
-    const { selectedWalletConnector: emailWalletConnector, termsOfServiceUrl, privacyPolicyUrl, clearStatesOnBackClick, } = useInternalDynamicContext.useInternalDynamicContext();
+    const { selectedWalletConnector: emailWalletConnector, clearStatesOnBackClick, } = useInternalDynamicContext.useInternalDynamicContext();
     if (!emailWalletConnector ||
         !walletConnectorCore.isEmailOTPWalletConnector(emailWalletConnector)) {
         throw new Error('Current wallet is not EmailWalletConnector');
@@ -60,7 +62,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, termsOfServiceUrl: termsOfServiceUrl, privacyPolicyUrl: privacyPolicyUrl, onPinChange: () => setError(undefined), onClickEditEmail: handleBackClick, displayPoweredByDynamic: true }));
+    return (jsxRuntime.jsx(OTPVerificationView.OTPVerificationView, { email: email, error: error, onClickBack: handleBackClick, isLoading: isLoading, onPinComplete: onSubmit, isValid: isValid === true, onPinChange: () => setError(undefined), onClickEditEmail: handleBackClick, displayPoweredByDynamic: true }));
 };
 
 exports.EmailWalletOTPVerificationView = EmailWalletOTPVerificationView;

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

@@ -7,14 +7,15 @@ import '@dynamic-labs/utils';
 import '@dynamic-labs/sdk-api';
 import '../../config/ApiEndpoint.js';
 import '../../shared/logger.js';
-import '../../config/LSSuffix.js';
 import '@dynamic-labs/iconic';
 import '@dynamic-labs/wallet-book';
 import '../../utils/constants/colors.js';
+import '../../shared/utils/classes/storage/localStorage.js';
 import 'ethers';
 import '../../shared/consts/index.js';
 import '@dynamic-labs/multi-wallet';
 import '@dynamic-labs/rpc-providers';
+import '../../utils/hooks/useWallets/utils/verifyMagicIsSetup/verifyMagicIsSetup.js';
 import '../../context/ErrorContext/ErrorContext.js';
 import '../../context/AccessDeniedContext/AccessDeniedContext.js';
 import 'react-dom';
@@ -31,6 +32,7 @@ import '../../components/Popper/Popper/Popper.js';
 import '../../components/Popper/PopperContext/PopperContext.js';
 import 'formik';
 import 'yup';
+import '../../components/InlineWidget/InlineWidget.js';
 import '../../context/MockContext/MockContext.js';
 import '../../context/CaptchaContext/CaptchaContext.js';
 import { useMutation } from '../../utils/hooks/useMutation/useMutation.js';
@@ -39,7 +41,7 @@ import '../../utils/hooks/useUserUpdateRequest/useUserUpdateRequest.js';
 const EmailWalletOTPVerificationView = () => {
     const { setView } = useViewContext();
     const [error, setError] = useState();
-    const { selectedWalletConnector: emailWalletConnector, termsOfServiceUrl, privacyPolicyUrl, clearStatesOnBackClick, } = useInternalDynamicContext();
+    const { selectedWalletConnector: emailWalletConnector, clearStatesOnBackClick, } = useInternalDynamicContext();
     if (!emailWalletConnector ||
         !isEmailOTPWalletConnector(emailWalletConnector)) {
         throw new Error('Current wallet is not EmailWalletConnector');
@@ -56,7 +58,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, termsOfServiceUrl: termsOfServiceUrl, privacyPolicyUrl: privacyPolicyUrl, onPinChange: () => setError(undefined), onClickEditEmail: handleBackClick, displayPoweredByDynamic: true }));
+    return (jsx(OTPVerificationView, { email: email, error: error, onClickBack: handleBackClick, isLoading: isLoading, onPinComplete: onSubmit, isValid: isValid === true, onPinChange: () => setError(undefined), onClickEditEmail: handleBackClick, displayPoweredByDynamic: true }));
 };
 
 export { EmailWalletOTPVerificationView };

package/src/lib/views/LoginWithEmailView/LoginWithEmailView.cjs

@@ -3,20 +3,19 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 
 var jsxRuntime = require('react/jsx-runtime');
+var walletBook = require('@dynamic-labs/wallet-book');
 var ErrorContext = require('../../context/ErrorContext/ErrorContext.cjs');
 require('@dynamic-labs/sdk-api');
 require('../../shared/logger.cjs');
-var getFromLS = require('../../shared/utils/functions/storage/getFromLS.cjs');
-require('../../config/LSSuffix.cjs');
 require('@dynamic-labs/iconic');
 require('@dynamic-labs/wallet-connector-core');
 require('../../context/ViewContext/ViewContext.cjs');
 require('react');
-require('@dynamic-labs/wallet-book');
 var isDisplayOrderPriorityForWeb2 = require('../../shared/utils/functions/isDisplayOrderPriorityForWeb2/isDisplayOrderPriorityForWeb2.cjs');
 require('@dynamic-labs/utils');
-var localStorage = require('../../utils/constants/localStorage.cjs');
+var localStorage$1 = require('../../utils/constants/localStorage.cjs');
 require('../../utils/constants/colors.cjs');
+var localStorage = require('../../shared/utils/classes/storage/localStorage.cjs');
 require('ethers');
 require('../../shared/consts/index.cjs');
 var ErrorContainer = require('../../components/ErrorContainer/ErrorContainer.cjs');
@@ -25,7 +24,7 @@ var useInternalDynamicContext = require('../../context/DynamicContext/useInterna
 var classNames = require('../../utils/functions/classNames/classNames.cjs');
 var walletListBuilder = require('../../utils/functions/walletListBuilder/walletListBuilder.cjs');
 var SocialRedirectContext = require('../../context/SocialRedirectContext/SocialRedirectContext.cjs');
-var hasWalletGroupFlag = require('../../utils/functions/hasWalletGroupFlag/hasWalletGroupFlag.cjs');
+var useAuthLayoutChecks = require('../../utils/hooks/useAuthLayoutChecks/useAuthLayoutChecks.cjs');
 var LoginWithEmailForm = require('./components/LoginWithEmailForm/LoginWithEmailForm.cjs');
 var LoginWithEmailWalletList = require('./components/LoginWithEmailWalletList/LoginWithEmailWalletList.cjs');
 var SocialSignIn = require('./components/SocialSignIn/SocialSignIn.cjs');
@@ -34,16 +33,19 @@ const LoginWithEmailView = () => {
     var _a;
     const { error } = ErrorContext.useErrorContext();
     const { authorizationViewDisplayOrder, wallets, projectSettings, walletsFilter, signWithEmailWalletName, loginWithEmail, } = useInternalDynamicContext.useInternalDynamicContext();
+    const { walletBook: walletBook$1 } = walletBook.useWalletBookContext();
+    const { showToSFooter } = useAuthLayoutChecks.useAuthLayoutChecks();
     const { enabledSocialProviders } = SocialRedirectContext.useSocialRedirectContext();
     const { numberOfWallets, walletsList } = walletListBuilder.walletListBuilder({
-        groupWallets: hasWalletGroupFlag.hasWalletGroupFlag(),
+        groupWallets: true,
         inputList: wallets,
         isWalletConnectList: false,
-        lastUsedWalletName: getFromLS.getFromLS(localStorage.LAST_USED_WALLET),
+        lastUsedWalletName: localStorage.LocalStorage.getFromLS(localStorage$1.LAST_USED_WALLET),
         loginWithEmail,
         numberOfWalletsToShow: LoginWithEmailWalletList.NUMBER_OF_WALLETS,
         searchFilter: undefined,
         signWithEmailWalletName,
+        walletBook: walletBook$1,
         walletsFilter,
     });
     const isWeb2Priority = isDisplayOrderPriorityForWeb2.isDisplayOrderPriorityForWeb2(authorizationViewDisplayOrder);
@@ -52,6 +54,7 @@ const LoginWithEmailView = () => {
         : 'Or continue with';
     return (jsxRuntime.jsxs("div", Object.assign({ className: 'login-with-email__container' }, { children: [error && jsxRuntime.jsx(ErrorContainer.ErrorContainer, { children: error }), jsxRuntime.jsxs("div", Object.assign({ className: classNames.classNames('login-with-email__scroll', {
                     'login-with-email__scroll--email-first': isWeb2Priority,
+                    'login-with-email__scroll--with-footer': showToSFooter,
                 }), "data-testid": 'login-with-email-scroll' }, { children: [numberOfWallets &&
                         walletsList.length &&
                         !((_a = projectSettings === null || projectSettings === void 0 ? void 0 : projectSettings.design.modal) === null || _a === void 0 ? void 0 : _a.emailOnly) ? (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx(LoginWithEmailWalletList.LoginWithEmailWalletList, { walletsList: walletsList, numberOfWallets: numberOfWallets }), jsxRuntime.jsx(Divider.Divider, { text: dividerText })] })) : null, jsxRuntime.jsxs("div", Object.assign({ className: 'login-with-email__scroll__web2' }, { children: [jsxRuntime.jsx(LoginWithEmailForm.LoginWithEmailForm, {}), enabledSocialProviders.length > 0 && jsxRuntime.jsx(SocialSignIn.SocialSignIn, {})] }))] }))] })));

package/src/lib/views/LoginWithEmailView/LoginWithEmailView.js

@@ -1,18 +1,17 @@
 import { jsxs, jsx, Fragment } from 'react/jsx-runtime';
+import { useWalletBookContext } from '@dynamic-labs/wallet-book';
 import { useErrorContext } from '../../context/ErrorContext/ErrorContext.js';
 import '@dynamic-labs/sdk-api';
 import '../../shared/logger.js';
-import { getFromLS } from '../../shared/utils/functions/storage/getFromLS.js';
-import '../../config/LSSuffix.js';
 import '@dynamic-labs/iconic';
 import '@dynamic-labs/wallet-connector-core';
 import '../../context/ViewContext/ViewContext.js';
 import 'react';
-import '@dynamic-labs/wallet-book';
 import { isDisplayOrderPriorityForWeb2 } from '../../shared/utils/functions/isDisplayOrderPriorityForWeb2/isDisplayOrderPriorityForWeb2.js';
 import '@dynamic-labs/utils';
 import { LAST_USED_WALLET } from '../../utils/constants/localStorage.js';
 import '../../utils/constants/colors.js';
+import { LocalStorage } from '../../shared/utils/classes/storage/localStorage.js';
 import 'ethers';
 import '../../shared/consts/index.js';
 import { ErrorContainer } from '../../components/ErrorContainer/ErrorContainer.js';
@@ -21,7 +20,7 @@ import { useInternalDynamicContext } from '../../context/DynamicContext/useInter
 import { classNames } from '../../utils/functions/classNames/classNames.js';
 import { walletListBuilder } from '../../utils/functions/walletListBuilder/walletListBuilder.js';
 import { useSocialRedirectContext } from '../../context/SocialRedirectContext/SocialRedirectContext.js';
-import { hasWalletGroupFlag } from '../../utils/functions/hasWalletGroupFlag/hasWalletGroupFlag.js';
+import { useAuthLayoutChecks } from '../../utils/hooks/useAuthLayoutChecks/useAuthLayoutChecks.js';
 import { LoginWithEmailForm } from './components/LoginWithEmailForm/LoginWithEmailForm.js';
 import { NUMBER_OF_WALLETS, LoginWithEmailWalletList } from './components/LoginWithEmailWalletList/LoginWithEmailWalletList.js';
 import { SocialSignIn } from './components/SocialSignIn/SocialSignIn.js';
@@ -30,16 +29,19 @@ const LoginWithEmailView = () => {
     var _a;
     const { error } = useErrorContext();
     const { authorizationViewDisplayOrder, wallets, projectSettings, walletsFilter, signWithEmailWalletName, loginWithEmail, } = useInternalDynamicContext();
+    const { walletBook } = useWalletBookContext();
+    const { showToSFooter } = useAuthLayoutChecks();
     const { enabledSocialProviders } = useSocialRedirectContext();
     const { numberOfWallets, walletsList } = walletListBuilder({
-        groupWallets: hasWalletGroupFlag(),
+        groupWallets: true,
         inputList: wallets,
         isWalletConnectList: false,
-        lastUsedWalletName: getFromLS(LAST_USED_WALLET),
+        lastUsedWalletName: LocalStorage.getFromLS(LAST_USED_WALLET),
         loginWithEmail,
         numberOfWalletsToShow: NUMBER_OF_WALLETS,
         searchFilter: undefined,
         signWithEmailWalletName,
+        walletBook,
         walletsFilter,
     });
     const isWeb2Priority = isDisplayOrderPriorityForWeb2(authorizationViewDisplayOrder);
@@ -48,6 +50,7 @@ const LoginWithEmailView = () => {
         : 'Or continue with';
     return (jsxs("div", Object.assign({ className: 'login-with-email__container' }, { children: [error && jsx(ErrorContainer, { children: error }), jsxs("div", Object.assign({ className: classNames('login-with-email__scroll', {
                     'login-with-email__scroll--email-first': isWeb2Priority,
+                    'login-with-email__scroll--with-footer': showToSFooter,
                 }), "data-testid": 'login-with-email-scroll' }, { children: [numberOfWallets &&
                         walletsList.length &&
                         !((_a = projectSettings === null || projectSettings === void 0 ? void 0 : projectSettings.design.modal) === null || _a === void 0 ? void 0 : _a.emailOnly) ? (jsxs(Fragment, { children: [jsx(LoginWithEmailWalletList, { walletsList: walletsList, numberOfWallets: numberOfWallets }), jsx(Divider, { text: dividerText })] })) : null, jsxs("div", Object.assign({ className: 'login-with-email__scroll__web2' }, { children: [jsx(LoginWithEmailForm, {}), enabledSocialProviders.length > 0 && jsx(SocialSignIn, {})] }))] }))] })));

package/src/lib/views/LoginWithEmailView/components/ListItemButton/ListItemButton.cjs

@@ -10,11 +10,11 @@ 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('../../../../config/LSSuffix.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');
@@ -29,6 +29,7 @@ require('../../../../components/Transition/SlideInUpTransition/SlideInUpTransiti
 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('../../../../components/IconButton/IconButton.cjs');
@@ -41,6 +42,7 @@ require('../../../../components/Popper/Popper/Popper.cjs');
 require('../../../../components/Popper/PopperContext/PopperContext.cjs');
 require('formik');
 require('yup');
+require('../../../../components/InlineWidget/InlineWidget.cjs');
 var Badge = require('../../../../components/Badge/Badge.cjs');
 
 const ListItemButton = ({ text, onClick, numberOfWallets }) => {

package/src/lib/views/LoginWithEmailView/components/ListItemButton/ListItemButton.js

@@ -6,11 +6,11 @@ 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 '../../../../config/LSSuffix.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';
@@ -25,6 +25,7 @@ import '../../../../components/Transition/SlideInUpTransition/SlideInUpTransitio
 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 '../../../../components/IconButton/IconButton.js';
@@ -37,6 +38,7 @@ import '../../../../components/Popper/Popper/Popper.js';
 import '../../../../components/Popper/PopperContext/PopperContext.js';
 import 'formik';
 import 'yup';
+import '../../../../components/InlineWidget/InlineWidget.js';
 import { Badge } from '../../../../components/Badge/Badge.js';
 
 const ListItemButton = ({ text, onClick, numberOfWallets }) => {

package/src/lib/views/LoginWithEmailView/components/LoginWithEmailForm/LoginWithEmailForm.cjs

@@ -9,16 +9,17 @@ var walletConnectorCore = require('@dynamic-labs/wallet-connector-core');
 var sdkApi = require('@dynamic-labs/sdk-api');
 require('@dynamic-labs/utils');
 var api = require('../../../../data/api.cjs');
-require('../../../../shared/logger.cjs');
-require('../../../../config/LSSuffix.cjs');
+var logger = require('../../../../shared/logger.cjs');
 require('@dynamic-labs/iconic');
 var ViewContext = require('../../../../context/ViewContext/ViewContext.cjs');
 require('@dynamic-labs/wallet-book');
 require('../../../../utils/constants/colors.cjs');
+require('../../../../shared/utils/classes/storage/localStorage.cjs');
 require('ethers');
 require('../../../../shared/consts/index.cjs');
 require('@dynamic-labs/multi-wallet');
 require('@dynamic-labs/rpc-providers');
+require('../../../../utils/hooks/useWallets/utils/verifyMagicIsSetup/verifyMagicIsSetup.cjs');
 var useInternalDynamicContext = require('../../../../context/DynamicContext/useInternalDynamicContext.cjs');
 var ErrorContext = require('../../../../context/ErrorContext/ErrorContext.cjs');
 require('../../../../context/AccessDeniedContext/AccessDeniedContext.cjs');
@@ -37,6 +38,7 @@ require('../../../../components/Popper/Popper/Popper.cjs');
 require('../../../../components/Popper/PopperContext/PopperContext.cjs');
 require('formik');
 require('yup');
+require('../../../../components/InlineWidget/InlineWidget.cjs');
 var useWalletItemActions = require('../../../../utils/hooks/useWalletItemActions/useWalletItemActions.cjs');
 require('../../../../utils/hooks/useUserUpdateRequest/useUserUpdateRequest.cjs');
 var useConnectWithEmail = require('../../../../utils/hooks/useConnectWithEmail/useConnectWithEmail.cjs');
@@ -114,6 +116,7 @@ const LoginWithEmailForm = () => {
             yield submitHandler();
         }
         catch (error) {
+            logger.logger.debug(error);
             setErrorMessage(error.code);
         }
         finally {

package/src/lib/views/LoginWithEmailView/components/LoginWithEmailForm/LoginWithEmailForm.js

@@ -5,16 +5,17 @@ import { isEmailWalletConnector } from '@dynamic-labs/wallet-connector-core';
 import { ProviderEnum } from '@dynamic-labs/sdk-api';
 import '@dynamic-labs/utils';
 import { getEmailProvider, createEmailVerification } from '../../../../data/api.js';
-import '../../../../shared/logger.js';
-import '../../../../config/LSSuffix.js';
+import { logger } from '../../../../shared/logger.js';
 import '@dynamic-labs/iconic';
 import { useViewContext } from '../../../../context/ViewContext/ViewContext.js';
 import '@dynamic-labs/wallet-book';
 import '../../../../utils/constants/colors.js';
+import '../../../../shared/utils/classes/storage/localStorage.js';
 import 'ethers';
 import '../../../../shared/consts/index.js';
 import '@dynamic-labs/multi-wallet';
 import '@dynamic-labs/rpc-providers';
+import '../../../../utils/hooks/useWallets/utils/verifyMagicIsSetup/verifyMagicIsSetup.js';
 import { useInternalDynamicContext } from '../../../../context/DynamicContext/useInternalDynamicContext.js';
 import { useErrorContext } from '../../../../context/ErrorContext/ErrorContext.js';
 import '../../../../context/AccessDeniedContext/AccessDeniedContext.js';
@@ -33,6 +34,7 @@ import '../../../../components/Popper/Popper/Popper.js';
 import '../../../../components/Popper/PopperContext/PopperContext.js';
 import 'formik';
 import 'yup';
+import '../../../../components/InlineWidget/InlineWidget.js';
 import { useWalletItemActions } from '../../../../utils/hooks/useWalletItemActions/useWalletItemActions.js';
 import '../../../../utils/hooks/useUserUpdateRequest/useUserUpdateRequest.js';
 import { useConnectWithEmail } from '../../../../utils/hooks/useConnectWithEmail/useConnectWithEmail.js';
@@ -110,6 +112,7 @@ const LoginWithEmailForm = () => {
             yield submitHandler();
         }
         catch (error) {
+            logger.debug(error);
             setErrorMessage(error.code);
         }
         finally {

package/src/lib/views/LoginWithEmailView/components/LoginWithEmailWalletList/LoginWithEmailWalletList.cjs

@@ -8,15 +8,14 @@ var useInternalDynamicContext = require('../../../../context/DynamicContext/useI
 var ViewContext = require('../../../../context/ViewContext/ViewContext.cjs');
 require('@dynamic-labs/sdk-api');
 require('../../../../shared/logger.cjs');
-var getFromLS = require('../../../../shared/utils/functions/storage/getFromLS.cjs');
-require('../../../../config/LSSuffix.cjs');
 require('@dynamic-labs/iconic');
 require('@dynamic-labs/wallet-connector-core');
 require('react');
 require('@dynamic-labs/wallet-book');
 require('@dynamic-labs/utils');
-var localStorage = require('../../../../utils/constants/localStorage.cjs');
+var localStorage$1 = require('../../../../utils/constants/localStorage.cjs');
 require('../../../../utils/constants/colors.cjs');
+var localStorage = require('../../../../shared/utils/classes/storage/localStorage.cjs');
 require('ethers');
 require('../../../../shared/consts/index.cjs');
 var WalletListItem = require('../../../WalletList/WalletListItem/WalletListItem.cjs');
@@ -26,7 +25,7 @@ const NUMBER_OF_WALLETS = 3;
 const LoginWithEmailWalletList = ({ walletsList, numberOfWallets, }) => {
     const { setView } = ViewContext.useViewContext();
     const { projectSettings, connectedWallets } = useInternalDynamicContext.useInternalDynamicContext();
-    const isUsingMultiWallet = Boolean(getFromLS.getFromLS(localStorage.AUTH_USER));
+    const isUsingMultiWallet = Boolean(localStorage.LocalStorage.getFromLS(localStorage$1.AUTH_USER));
     return !projectSettings ? (jsxRuntime.jsx(Skeleton.Skeleton, { count: NUMBER_OF_WALLETS + 1, className: 'login-with-email-wallet-list__skeleton' })) : (jsxRuntime.jsxs("div", Object.assign({ className: 'login-with-email-wallet-list__container' }, { children: [walletsList.map((wallet) => (jsxRuntime.jsx(WalletListItem.WalletListItem, { wallet: wallet, connectedWallets: connectedWallets, usingMultiWallet: isUsingMultiWallet }, wallet.key))), jsxRuntime.jsx(ListItemButton.ListItemButton, { text: 'View all wallets', onClick: () => setView('login-with-email-or-wallet-full-wallet-list'), numberOfWallets: numberOfWallets })] })));
 };
 

package/src/lib/views/LoginWithEmailView/components/LoginWithEmailWalletList/LoginWithEmailWalletList.js

@@ -4,8 +4,6 @@ import { useInternalDynamicContext } from '../../../../context/DynamicContext/us
 import { useViewContext } from '../../../../context/ViewContext/ViewContext.js';
 import '@dynamic-labs/sdk-api';
 import '../../../../shared/logger.js';
-import { getFromLS } from '../../../../shared/utils/functions/storage/getFromLS.js';
-import '../../../../config/LSSuffix.js';
 import '@dynamic-labs/iconic';
 import '@dynamic-labs/wallet-connector-core';
 import 'react';
@@ -13,6 +11,7 @@ import '@dynamic-labs/wallet-book';
 import '@dynamic-labs/utils';
 import { AUTH_USER } from '../../../../utils/constants/localStorage.js';
 import '../../../../utils/constants/colors.js';
+import { LocalStorage } from '../../../../shared/utils/classes/storage/localStorage.js';
 import 'ethers';
 import '../../../../shared/consts/index.js';
 import { WalletListItem } from '../../../WalletList/WalletListItem/WalletListItem.js';
@@ -22,7 +21,7 @@ const NUMBER_OF_WALLETS = 3;
 const LoginWithEmailWalletList = ({ walletsList, numberOfWallets, }) => {
     const { setView } = useViewContext();
     const { projectSettings, connectedWallets } = useInternalDynamicContext();
-    const isUsingMultiWallet = Boolean(getFromLS(AUTH_USER));
+    const isUsingMultiWallet = Boolean(LocalStorage.getFromLS(AUTH_USER));
     return !projectSettings ? (jsx(Skeleton, { count: NUMBER_OF_WALLETS + 1, className: 'login-with-email-wallet-list__skeleton' })) : (jsxs("div", Object.assign({ className: 'login-with-email-wallet-list__container' }, { children: [walletsList.map((wallet) => (jsx(WalletListItem, { wallet: wallet, connectedWallets: connectedWallets, usingMultiWallet: isUsingMultiWallet }, wallet.key))), jsx(ListItemButton, { text: 'View all wallets', onClick: () => setView('login-with-email-or-wallet-full-wallet-list'), numberOfWallets: numberOfWallets })] })));
 };
 

package/src/lib/views/LoginWithEmailView/components/SocialSignIn/SocialSignIn.cjs

@@ -8,7 +8,6 @@ var React = require('react');
 var Typography = require('../../../../components/Typography/Typography.cjs');
 require('@dynamic-labs/sdk-api');
 require('../../../../shared/logger.cjs');
-require('../../../../config/LSSuffix.cjs');
 require('@dynamic-labs/iconic');
 require('@dynamic-labs/wallet-connector-core');
 require('../../../../context/ViewContext/ViewContext.cjs');
@@ -17,6 +16,7 @@ var dotsHorizontal = require('../../../../shared/assets/dots-horizontal.cjs');
 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');
@@ -31,6 +31,7 @@ require('../../../../components/Transition/SlideInUpTransition/SlideInUpTransiti
 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');
 var ModalHeader = require('../../../../components/ModalHeader/ModalHeader.cjs');
@@ -47,6 +48,7 @@ require('../../../../components/Popper/Popper/Popper.cjs');
 require('../../../../components/Popper/PopperContext/PopperContext.cjs');
 require('formik');
 require('yup');
+require('../../../../components/InlineWidget/InlineWidget.cjs');
 var SocialRedirectContext = require('../../../../context/SocialRedirectContext/SocialRedirectContext.cjs');
 var OverlayCard = require('../../../../components/OverlayCard/OverlayCard.cjs');
 require('../../../../components/OverlayCard/OverlayCard.context.cjs');