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

package/src/lib/views/CollectUserDataViewLoginWithEmail/CollectUserDataViewLoginWithEmail.cjs

@@ -8,12 +8,12 @@ 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/wallet-connector-core');
 require('../../context/ViewContext/ViewContext.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');
 var useInternalDynamicContext = require('../../context/DynamicContext/useInternalDynamicContext.cjs');
@@ -28,6 +28,7 @@ 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('../../components/IconButton/IconButton.cjs');
@@ -40,6 +41,7 @@ require('../../components/Popper/Popper/Popper.cjs');
 require('../../components/Popper/PopperContext/PopperContext.cjs');
 require('formik');
 require('yup');
+require('../../components/InlineWidget/InlineWidget.cjs');
 var OnboardingUserDataForm = require('../CollectUserDataView/OnboardingUserDataForm/OnboardingUserDataForm.cjs');
 
 const CollectUserDataViewLoginWithEmail = () => {
@@ -50,7 +52,7 @@ const CollectUserDataViewLoginWithEmail = () => {
     const userProfile = createUserProfile.createUserProfile(decodedOnboardingOnlyToken);
     return (jsxRuntime.jsxs("div", Object.assign({ className: 'collect-user-data-login-with-email', "data-testid": 'collect-user-data-login-with-email' }, { children: [onboardingImageUrl && (jsxRuntime.jsx("img", { className: 'collect-user-data-login-with-email__main-img', src: onboardingImageUrl, alt: 'onboarding' })), jsxRuntime.jsx("div", Object.assign({ className: 'collect-user-data-login-with-email__icon-container' }, { children: jsxRuntime.jsx(iconic.UserProfileIcon, {}) })), jsxRuntime.jsxs("div", Object.assign({ className: 'collect-user-data-login-with-email__form' }, { children: [jsxRuntime.jsx(OnboardingUserDataForm.OnboardingUserDataForm, Object.assign({ userProfile: userProfile }, { children: jsxRuntime.jsxs("div", Object.assign({ className: 'collect-user-data-login-with-email__welcome-container' }, { children: [jsxRuntime.jsx(Typography.Typography, Object.assign({ variant: 'title', color: 'primary', className: 'collect-user-data-login-with-email__welcome-title' }, { children: (projectSettings === null || projectSettings === void 0 ? void 0 : projectSettings.general.collectUserDataWelcomeHeader) ||
                                         `Welcome to ${appName}` })), jsxRuntime.jsx(Typography.Typography, Object.assign({ variant: 'body_normal', weight: 'regular', color: 'secondary' }, { children: (projectSettings === null || projectSettings === void 0 ? void 0 : projectSettings.general.collectUserDataWelcomeMessage) ||
-                                        'We need a bit of information to get started' }))] })) })), jsxRuntime.jsx(TextButton.TextButton, Object.assign({ className: 'collect-user-data-login-with-email__log-out', onClick: () => handleLogOut() }, { children: "Log out" }))] }))] })));
+                                        'We need a bit of information to get started' }))] })) })), jsxRuntime.jsx(TextButton.TextButton, Object.assign({ className: 'collect-user-data-login-with-email__log-out', onClick: handleLogOut }, { children: "Log out" }))] }))] })));
 };
 
 exports.CollectUserDataViewLoginWithEmail = CollectUserDataViewLoginWithEmail;

package/src/lib/views/CollectUserDataViewLoginWithEmail/CollectUserDataViewLoginWithEmail.js

@@ -4,12 +4,12 @@ import 'react';
 import { Typography } from '../../components/Typography/Typography.js';
 import '@dynamic-labs/sdk-api';
 import '../../shared/logger.js';
-import '../../config/LSSuffix.js';
 import '@dynamic-labs/wallet-connector-core';
 import '../../context/ViewContext/ViewContext.js';
 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 { useInternalDynamicContext } from '../../context/DynamicContext/useInternalDynamicContext.js';
@@ -24,6 +24,7 @@ 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 '../../components/IconButton/IconButton.js';
@@ -36,6 +37,7 @@ import '../../components/Popper/Popper/Popper.js';
 import '../../components/Popper/PopperContext/PopperContext.js';
 import 'formik';
 import 'yup';
+import '../../components/InlineWidget/InlineWidget.js';
 import { OnboardingUserDataForm } from '../CollectUserDataView/OnboardingUserDataForm/OnboardingUserDataForm.js';
 
 const CollectUserDataViewLoginWithEmail = () => {
@@ -46,7 +48,7 @@ const CollectUserDataViewLoginWithEmail = () => {
     const userProfile = createUserProfile(decodedOnboardingOnlyToken);
     return (jsxs("div", Object.assign({ className: 'collect-user-data-login-with-email', "data-testid": 'collect-user-data-login-with-email' }, { children: [onboardingImageUrl && (jsx("img", { className: 'collect-user-data-login-with-email__main-img', src: onboardingImageUrl, alt: 'onboarding' })), jsx("div", Object.assign({ className: 'collect-user-data-login-with-email__icon-container' }, { children: jsx(UserProfileIcon, {}) })), jsxs("div", Object.assign({ className: 'collect-user-data-login-with-email__form' }, { children: [jsx(OnboardingUserDataForm, Object.assign({ userProfile: userProfile }, { children: jsxs("div", Object.assign({ className: 'collect-user-data-login-with-email__welcome-container' }, { children: [jsx(Typography, Object.assign({ variant: 'title', color: 'primary', className: 'collect-user-data-login-with-email__welcome-title' }, { children: (projectSettings === null || projectSettings === void 0 ? void 0 : projectSettings.general.collectUserDataWelcomeHeader) ||
                                         `Welcome to ${appName}` })), jsx(Typography, Object.assign({ variant: 'body_normal', weight: 'regular', color: 'secondary' }, { children: (projectSettings === null || projectSettings === void 0 ? void 0 : projectSettings.general.collectUserDataWelcomeMessage) ||
-                                        'We need a bit of information to get started' }))] })) })), jsx(TextButton, Object.assign({ className: 'collect-user-data-login-with-email__log-out', onClick: () => handleLogOut() }, { children: "Log out" }))] }))] })));
+                                        'We need a bit of information to get started' }))] })) })), jsx(TextButton, Object.assign({ className: 'collect-user-data-login-with-email__log-out', onClick: handleLogOut }, { children: "Log out" }))] }))] })));
 };
 
 export { CollectUserDataViewLoginWithEmail };

package/src/lib/views/EmailConfirmationWaitingView/EmailConfirmationWaitingView.cjs

@@ -10,12 +10,12 @@ var walletConnectorCore = require('@dynamic-labs/wallet-connector-core');
 var Typography = require('../../components/Typography/Typography.cjs');
 require('@dynamic-labs/sdk-api');
 require('../../shared/logger.cjs');
-require('../../config/LSSuffix.cjs');
 var ViewContext = require('../../context/ViewContext/ViewContext.cjs');
 var pencilAltIcon = require('../../shared/assets/pencil-alt-icon.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');
 var useInternalDynamicContext = require('../../context/DynamicContext/useInternalDynamicContext.cjs');
@@ -30,6 +30,7 @@ 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');
 var IconButton = require('../../components/IconButton/IconButton.cjs');
@@ -39,15 +40,15 @@ require('../../components/Alert/Alert.cjs');
 require('../../context/MockContext/MockContext.cjs');
 require('../../context/CaptchaContext/CaptchaContext.cjs');
 require('../../utils/hooks/useUserUpdateRequest/useUserUpdateRequest.cjs');
-var TosAndPp = require('../../components/TosAndPp/TosAndPp.cjs');
 require('../../components/Popper/Popper/Popper.cjs');
 require('../../components/Popper/PopperContext/PopperContext.cjs');
 require('formik');
 require('yup');
+require('../../components/InlineWidget/InlineWidget.cjs');
 
 const EmailConfirmationWaitingView = () => {
     const { setView } = ViewContext.useViewContext();
-    const { clearStatesOnBackClick, termsOfServiceUrl, privacyPolicyUrl, selectedWalletConnector: walletConnector, } = useInternalDynamicContext.useInternalDynamicContext();
+    const { clearStatesOnBackClick, selectedWalletConnector: walletConnector } = useInternalDynamicContext.useInternalDynamicContext();
     if (walletConnector && !walletConnectorCore.isEmailWalletConnector(walletConnector)) {
         throw new Error('Wallet connector is not email provider');
     }
@@ -57,7 +58,7 @@ const EmailConfirmationWaitingView = () => {
         setView('login-with-email-or-wallet');
         clearStatesOnBackClick();
     }), [setView, emailConnector, clearStatesOnBackClick]);
-    return (jsxRuntime.jsxs("div", Object.assign({ className: 'email-confirmation-waiting-view' }, { children: [jsxRuntime.jsx("div", Object.assign({ className: 'email-confirmation-waiting-view__header-icon' }, { children: jsxRuntime.jsx(IconWithSpinner.IconWithSpinner, { Icon: iconic.SignInWithEmailIcon, iconSize: 80, isSpinning: true }) })), jsxRuntime.jsx(Typography.Typography, Object.assign({ weight: 'medium', variant: 'title', color: 'primary', className: 'email-confirmation-waiting-view__title' }, { children: "Confirm your email" })), jsxRuntime.jsxs(Typography.Typography, Object.assign({ weight: 'regular', variant: 'body_normal', color: 'secondary' }, { children: ["We\u2019ve sent a verification email to", ' '] })), jsxRuntime.jsxs("div", Object.assign({ className: 'email-confirmation-waiting-view__email-container' }, { children: [jsxRuntime.jsx(Typography.Typography, Object.assign({ variant: 'body_normal', color: 'secondary', weight: 'medium', as: 'span' }, { children: emailConnector === null || emailConnector === void 0 ? void 0 : emailConnector.email })), jsxRuntime.jsx(IconButton.IconButton, Object.assign({ onClick: onClickResetEmail, className: 'email-confirmation-waiting-view__edit-icon-button', "data-testid": 'email-confirmation-waiting-view__edit-button' }, { children: jsxRuntime.jsx(Icon.Icon, Object.assign({ color: 'text-tertiary' }, { children: jsxRuntime.jsx(pencilAltIcon.ReactComponent, {}) })) }))] })), jsxRuntime.jsx("div", Object.assign({ className: 'email-confirmation-waiting-view__note' }, { children: jsxRuntime.jsx(Typography.Typography, Object.assign({ weight: 'regular', variant: 'body_small', color: 'secondary' }, { children: "Note: it might take a few seconds to proceed after clicking the link in your email" })) })), jsxRuntime.jsx("div", Object.assign({ className: 'email-confirmation-waiting-view__term_of_service' }, { children: jsxRuntime.jsx(TosAndPp.TosAndPp, { mode: 'logging in', privacyPolicyUrl: privacyPolicyUrl, termsOfServiceUrl: termsOfServiceUrl }) })), jsxRuntime.jsx("div", Object.assign({ className: 'email-confirmation-waiting-view__powered_by_dynamic_footer' }, { children: jsxRuntime.jsx(PoweredByDynamic.PoweredByDynamic, {}) }))] })));
+    return (jsxRuntime.jsxs("div", Object.assign({ className: 'email-confirmation-waiting-view' }, { children: [jsxRuntime.jsx("div", Object.assign({ className: 'email-confirmation-waiting-view__header-icon' }, { children: jsxRuntime.jsx(IconWithSpinner.IconWithSpinner, { Icon: iconic.SignInWithEmailIcon, iconSize: 80, isSpinning: true }) })), jsxRuntime.jsx(Typography.Typography, Object.assign({ weight: 'medium', variant: 'title', color: 'primary', className: 'email-confirmation-waiting-view__title' }, { children: "Confirm your email" })), jsxRuntime.jsxs(Typography.Typography, Object.assign({ weight: 'regular', variant: 'body_normal', color: 'secondary' }, { children: ["We\u2019ve sent a verification email to", ' '] })), jsxRuntime.jsxs("div", Object.assign({ className: 'email-confirmation-waiting-view__email-container' }, { children: [jsxRuntime.jsx(Typography.Typography, Object.assign({ variant: 'body_normal', color: 'secondary', weight: 'medium', as: 'span' }, { children: emailConnector === null || emailConnector === void 0 ? void 0 : emailConnector.email })), jsxRuntime.jsx(IconButton.IconButton, Object.assign({ onClick: onClickResetEmail, className: 'email-confirmation-waiting-view__edit-icon-button', "data-testid": 'email-confirmation-waiting-view__edit-button' }, { children: jsxRuntime.jsx(Icon.Icon, Object.assign({ color: 'text-tertiary' }, { children: jsxRuntime.jsx(pencilAltIcon.ReactComponent, {}) })) }))] })), jsxRuntime.jsx("div", Object.assign({ className: 'email-confirmation-waiting-view__note' }, { children: jsxRuntime.jsx(Typography.Typography, Object.assign({ weight: 'regular', variant: 'body_small', color: 'secondary' }, { children: "Note: it might take a few seconds to proceed after clicking the link in your email" })) })), jsxRuntime.jsx("div", Object.assign({ className: 'email-confirmation-waiting-view__powered_by_dynamic_footer' }, { children: jsxRuntime.jsx(PoweredByDynamic.PoweredByDynamic, {}) }))] })));
 };
 
 exports.EmailConfirmationWaitingView = EmailConfirmationWaitingView;

package/src/lib/views/EmailConfirmationWaitingView/EmailConfirmationWaitingView.js

@@ -6,12 +6,12 @@ import { isEmailWalletConnector } from '@dynamic-labs/wallet-connector-core';
 import { Typography } from '../../components/Typography/Typography.js';
 import '@dynamic-labs/sdk-api';
 import '../../shared/logger.js';
-import '../../config/LSSuffix.js';
 import { useViewContext } from '../../context/ViewContext/ViewContext.js';
 import { ReactComponent as SvgPencilAltIcon } from '../../shared/assets/pencil-alt-icon.js';
 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 { useInternalDynamicContext } from '../../context/DynamicContext/useInternalDynamicContext.js';
@@ -26,6 +26,7 @@ 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 { IconButton } from '../../components/IconButton/IconButton.js';
@@ -35,15 +36,15 @@ import '../../components/Alert/Alert.js';
 import '../../context/MockContext/MockContext.js';
 import '../../context/CaptchaContext/CaptchaContext.js';
 import '../../utils/hooks/useUserUpdateRequest/useUserUpdateRequest.js';
-import { TosAndPp } from '../../components/TosAndPp/TosAndPp.js';
 import '../../components/Popper/Popper/Popper.js';
 import '../../components/Popper/PopperContext/PopperContext.js';
 import 'formik';
 import 'yup';
+import '../../components/InlineWidget/InlineWidget.js';
 
 const EmailConfirmationWaitingView = () => {
     const { setView } = useViewContext();
-    const { clearStatesOnBackClick, termsOfServiceUrl, privacyPolicyUrl, selectedWalletConnector: walletConnector, } = useInternalDynamicContext();
+    const { clearStatesOnBackClick, selectedWalletConnector: walletConnector } = useInternalDynamicContext();
     if (walletConnector && !isEmailWalletConnector(walletConnector)) {
         throw new Error('Wallet connector is not email provider');
     }
@@ -53,7 +54,7 @@ const EmailConfirmationWaitingView = () => {
         setView('login-with-email-or-wallet');
         clearStatesOnBackClick();
     }), [setView, emailConnector, clearStatesOnBackClick]);
-    return (jsxs("div", Object.assign({ className: 'email-confirmation-waiting-view' }, { children: [jsx("div", Object.assign({ className: 'email-confirmation-waiting-view__header-icon' }, { children: jsx(IconWithSpinner, { Icon: SignInWithEmailIcon, iconSize: 80, isSpinning: true }) })), jsx(Typography, Object.assign({ weight: 'medium', variant: 'title', color: 'primary', className: 'email-confirmation-waiting-view__title' }, { children: "Confirm your email" })), jsxs(Typography, Object.assign({ weight: 'regular', variant: 'body_normal', color: 'secondary' }, { children: ["We\u2019ve sent a verification email to", ' '] })), jsxs("div", Object.assign({ className: 'email-confirmation-waiting-view__email-container' }, { children: [jsx(Typography, Object.assign({ variant: 'body_normal', color: 'secondary', weight: 'medium', as: 'span' }, { children: emailConnector === null || emailConnector === void 0 ? void 0 : emailConnector.email })), jsx(IconButton, Object.assign({ onClick: onClickResetEmail, className: 'email-confirmation-waiting-view__edit-icon-button', "data-testid": 'email-confirmation-waiting-view__edit-button' }, { children: jsx(Icon, Object.assign({ color: 'text-tertiary' }, { children: jsx(SvgPencilAltIcon, {}) })) }))] })), jsx("div", Object.assign({ className: 'email-confirmation-waiting-view__note' }, { children: jsx(Typography, Object.assign({ weight: 'regular', variant: 'body_small', color: 'secondary' }, { children: "Note: it might take a few seconds to proceed after clicking the link in your email" })) })), jsx("div", Object.assign({ className: 'email-confirmation-waiting-view__term_of_service' }, { children: jsx(TosAndPp, { mode: 'logging in', privacyPolicyUrl: privacyPolicyUrl, termsOfServiceUrl: termsOfServiceUrl }) })), jsx("div", Object.assign({ className: 'email-confirmation-waiting-view__powered_by_dynamic_footer' }, { children: jsx(PoweredByDynamic, {}) }))] })));
+    return (jsxs("div", Object.assign({ className: 'email-confirmation-waiting-view' }, { children: [jsx("div", Object.assign({ className: 'email-confirmation-waiting-view__header-icon' }, { children: jsx(IconWithSpinner, { Icon: SignInWithEmailIcon, iconSize: 80, isSpinning: true }) })), jsx(Typography, Object.assign({ weight: 'medium', variant: 'title', color: 'primary', className: 'email-confirmation-waiting-view__title' }, { children: "Confirm your email" })), jsxs(Typography, Object.assign({ weight: 'regular', variant: 'body_normal', color: 'secondary' }, { children: ["We\u2019ve sent a verification email to", ' '] })), jsxs("div", Object.assign({ className: 'email-confirmation-waiting-view__email-container' }, { children: [jsx(Typography, Object.assign({ variant: 'body_normal', color: 'secondary', weight: 'medium', as: 'span' }, { children: emailConnector === null || emailConnector === void 0 ? void 0 : emailConnector.email })), jsx(IconButton, Object.assign({ onClick: onClickResetEmail, className: 'email-confirmation-waiting-view__edit-icon-button', "data-testid": 'email-confirmation-waiting-view__edit-button' }, { children: jsx(Icon, Object.assign({ color: 'text-tertiary' }, { children: jsx(SvgPencilAltIcon, {}) })) }))] })), jsx("div", Object.assign({ className: 'email-confirmation-waiting-view__note' }, { children: jsx(Typography, Object.assign({ weight: 'regular', variant: 'body_small', color: 'secondary' }, { children: "Note: it might take a few seconds to proceed after clicking the link in your email" })) })), jsx("div", Object.assign({ className: 'email-confirmation-waiting-view__powered_by_dynamic_footer' }, { children: jsx(PoweredByDynamic, {}) }))] })));
 };
 
 export { EmailConfirmationWaitingView };

package/src/lib/views/EmailUpdate/EmailUpdate.cjs

@@ -8,14 +8,14 @@ var React = require('react');
 var iconic = require('@dynamic-labs/iconic');
 var Typography = require('../../components/Typography/Typography.cjs');
 require('@dynamic-labs/sdk-api');
-require('../../shared/logger.cjs');
-require('../../config/LSSuffix.cjs');
+var logger = require('../../shared/logger.cjs');
 require('@dynamic-labs/wallet-connector-core');
 var ViewContext = require('../../context/ViewContext/ViewContext.cjs');
 var chevronLeft = require('../../shared/assets/chevron-left.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');
 var useInternalDynamicContext = require('../../context/DynamicContext/useInternalDynamicContext.cjs');
@@ -30,6 +30,7 @@ require('../../components/Transition/SlideInUpTransition/SlideInUpTransition.cjs
 require('../../components/Transition/OpacityTransition/OpacityTransition.cjs');
 var api = require('../../data/api.cjs');
 require('@dynamic-labs/rpc-providers');
+require('../../utils/hooks/useWallets/utils/verifyMagicIsSetup/verifyMagicIsSetup.cjs');
 var ErrorContext = require('../../context/ErrorContext/ErrorContext.cjs');
 require('../../context/AccessDeniedContext/AccessDeniedContext.cjs');
 var IconButton = require('../../components/IconButton/IconButton.cjs');
@@ -42,6 +43,7 @@ require('../../components/Popper/Popper/Popper.cjs');
 require('../../components/Popper/PopperContext/PopperContext.cjs');
 require('formik');
 require('yup');
+require('../../components/InlineWidget/InlineWidget.cjs');
 var EmailVerificationContext = require('../../context/EmailVerificationContext/EmailVerificationContext.cjs');
 var LoadingContext = require('../../context/LoadingContext/LoadingContext.cjs');
 
@@ -49,7 +51,7 @@ const EmailUpdate = () => {
     const [updatedEmail, setUpdatedEmail] = React.useState('');
     const { setError, setErrorMessage } = ErrorContext.useErrorContext();
     const { loading, setLoading } = LoadingContext.useLoadingContext();
-    const { setView } = ViewContext.useViewContext();
+    const { setView, goToInitialView } = ViewContext.useViewContext();
     const { email, setEmail, setVerificationUUID } = EmailVerificationContext.useEmailVerificationContext();
     const { environmentId, handleLogOut, onboardingOnlyJwt } = useInternalDynamicContext.useInternalDynamicContext();
     const handleBackClick = () => {
@@ -65,7 +67,7 @@ const EmailUpdate = () => {
             const { emailVerification } = yield api.updateUserProfileFields(onboardingOnlyJwt, environmentId, { email: updatedEmail });
             if (!emailVerification) {
                 yield handleLogOut();
-                setView('wallet-list');
+                goToInitialView();
                 return;
             }
             setError(undefined);
@@ -74,6 +76,7 @@ const EmailUpdate = () => {
             setVerificationUUID(emailVerification.verificationUUID);
         }
         catch (error) {
+            logger.logger.debug(error);
             setErrorMessage(error.code);
         }
         finally {

package/src/lib/views/EmailUpdate/EmailUpdate.js

@@ -4,14 +4,14 @@ import { useState } from 'react';
 import { SignInWithEmailIcon } from '@dynamic-labs/iconic';
 import { Typography } from '../../components/Typography/Typography.js';
 import '@dynamic-labs/sdk-api';
-import '../../shared/logger.js';
-import '../../config/LSSuffix.js';
+import { logger } from '../../shared/logger.js';
 import '@dynamic-labs/wallet-connector-core';
 import { useViewContext } from '../../context/ViewContext/ViewContext.js';
 import { ReactComponent as SvgChevronLeft } from '../../shared/assets/chevron-left.js';
 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 { useInternalDynamicContext } from '../../context/DynamicContext/useInternalDynamicContext.js';
@@ -26,6 +26,7 @@ import '../../components/Transition/SlideInUpTransition/SlideInUpTransition.js';
 import '../../components/Transition/OpacityTransition/OpacityTransition.js';
 import { updateUserProfileFields } 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 { IconButton } from '../../components/IconButton/IconButton.js';
@@ -38,6 +39,7 @@ 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';
 
@@ -45,7 +47,7 @@ const EmailUpdate = () => {
     const [updatedEmail, setUpdatedEmail] = useState('');
     const { setError, setErrorMessage } = useErrorContext();
     const { loading, setLoading } = useLoadingContext();
-    const { setView } = useViewContext();
+    const { setView, goToInitialView } = useViewContext();
     const { email, setEmail, setVerificationUUID } = useEmailVerificationContext();
     const { environmentId, handleLogOut, onboardingOnlyJwt } = useInternalDynamicContext();
     const handleBackClick = () => {
@@ -61,7 +63,7 @@ const EmailUpdate = () => {
             const { emailVerification } = yield updateUserProfileFields(onboardingOnlyJwt, environmentId, { email: updatedEmail });
             if (!emailVerification) {
                 yield handleLogOut();
-                setView('wallet-list');
+                goToInitialView();
                 return;
             }
             setError(undefined);
@@ -70,6 +72,7 @@ const EmailUpdate = () => {
             setVerificationUUID(emailVerification.verificationUUID);
         }
         catch (error) {
+            logger.debug(error);
             setErrorMessage(error.code);
         }
         finally {

package/src/lib/views/EmailVerification/EmailVerification.cjs

@@ -9,14 +9,14 @@ var iconic = require('@dynamic-labs/iconic');
 var utils = require('@dynamic-labs/utils');
 var Typography = require('../../components/Typography/Typography.cjs');
 var decodeJwt = require('../../shared/utils/functions/decodeJwt/decodeJwt.cjs');
-require('../../shared/logger.cjs');
-require('../../config/LSSuffix.cjs');
 require('@dynamic-labs/wallet-connector-core');
 var ViewContext = require('../../context/ViewContext/ViewContext.cjs');
 var check = require('../../shared/assets/check.cjs');
 var checkCircle = require('../../shared/assets/check-circle.cjs');
+var logger = require('../../shared/logger.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');
 var useInternalDynamicContext = require('../../context/DynamicContext/useInternalDynamicContext.cjs');
@@ -32,6 +32,7 @@ require('../../components/Transition/SlideInUpTransition/SlideInUpTransition.cjs
 require('../../components/Transition/OpacityTransition/OpacityTransition.cjs');
 var api = require('../../data/api.cjs');
 require('@dynamic-labs/rpc-providers');
+require('../../utils/hooks/useWallets/utils/verifyMagicIsSetup/verifyMagicIsSetup.cjs');
 var ErrorContext = require('../../context/ErrorContext/ErrorContext.cjs');
 require('../../context/AccessDeniedContext/AccessDeniedContext.cjs');
 require('../../components/IconButton/IconButton.cjs');
@@ -42,32 +43,36 @@ require('../../components/Alert/Alert.cjs');
 require('../../context/MockContext/MockContext.cjs');
 require('../../context/CaptchaContext/CaptchaContext.cjs');
 require('../../utils/hooks/useUserUpdateRequest/useUserUpdateRequest.cjs');
+var useCountdown = require('../../utils/hooks/useCountdown/useCountdown.cjs');
 var TextButton = require('../../components/TextButton/TextButton.cjs');
 var ErrorContainer = require('../../components/ErrorContainer/ErrorContainer.cjs');
-var TosAndPp = require('../../components/TosAndPp/TosAndPp.cjs');
 var PinField = require('../../components/PinField/PinField.cjs');
 var shortenEmail = require('../../shared/utils/functions/shortenEmail/shortenEmail.cjs');
 require('../../components/Popper/Popper/Popper.cjs');
 require('../../components/Popper/PopperContext/PopperContext.cjs');
 require('formik');
 require('yup');
+require('../../components/InlineWidget/InlineWidget.cjs');
 var EmailVerificationContext = require('../../context/EmailVerificationContext/EmailVerificationContext.cjs');
 var LoadingContext = require('../../context/LoadingContext/LoadingContext.cjs');
 var useEmailVerificationRequest = require('../../utils/hooks/authenticationHooks/useEmailVerificationRequest/useEmailVerificationRequest.cjs');
 var useCreateUserProfileByJWTCallback = require('../../utils/hooks/useCreateUserProfileByJWTCallback/useCreateUserProfileByJWTCallback.cjs');
 
-const secondsToRetry = 15;
+const SECONDS_TO_RETRY = 15;
 const EmailVerification = () => {
     const [hideRetryButton, setHideRetryButton] = React.useState(false);
-    const [count, setCount] = React.useState(secondsToRetry);
     const [retried, setRetried] = React.useState(false);
     const [isValidated, setIsValidated] = React.useState(false);
     const [showTransferMessage, setShowTransferMessage] = React.useState(false);
     const { view, setView, goToInitialView } = ViewContext.useViewContext();
     const { error, setError, setErrorMessage } = ErrorContext.useErrorContext();
-    const { environmentId, onboardingOnlyJwt, handleLogOut, termsOfServiceUrl, privacyPolicyUrl, authToken, setOnboardingOnlyJwt, setShowAuthFlow, setCallback, } = useInternalDynamicContext.useInternalDynamicContext();
+    const { environmentId, onboardingOnlyJwt, handleLogOut, authToken, setOnboardingOnlyJwt, setShowAuthFlow, setCallback, } = useInternalDynamicContext.useInternalDynamicContext();
     const { email, verificationUUID, setVerificationUUID } = EmailVerificationContext.useEmailVerificationContext();
     const { loading, setLoading } = LoadingContext.useLoadingContext();
+    const { remainingSeconds, startCountdown } = useCountdown.useCountdown({
+        callback: () => setRetried(false),
+        seconds: SECONDS_TO_RETRY,
+    });
     const isLoginView = view === 'login-with-email-verification';
     const { verifyEmail } = useEmailVerificationRequest.useEmailVerificationRequest();
     const { createUserProfileByJWT } = useCreateUserProfileByJWTCallback.useCreateUserProfileByJWTCallback();
@@ -76,7 +81,7 @@ const EmailVerification = () => {
         setLoading(true);
         if (!verificationUUID || (!authToken && !onboardingOnlyJwt)) {
             yield handleLogOut();
-            setView('wallet-list');
+            goToInitialView();
             return;
         }
         try {
@@ -92,6 +97,7 @@ const EmailVerification = () => {
             setShowAuthFlow(false);
         }
         catch (error) {
+            logger.logger.debug(error);
             setErrorMessage(error.code);
         }
         finally {
@@ -104,7 +110,7 @@ const EmailVerification = () => {
         authToken,
         onboardingOnlyJwt,
         handleLogOut,
-        setView,
+        goToInitialView,
         verifyEmail,
         setShowAuthFlow,
         setOnboardingOnlyJwt,
@@ -116,7 +122,7 @@ const EmailVerification = () => {
         setLoading(true);
         if (!verificationUUID) {
             yield handleLogOut();
-            setView('wallet-list');
+            goToInitialView();
             return;
         }
         try {
@@ -127,7 +133,7 @@ const EmailVerification = () => {
             });
             if (!jwt) {
                 yield handleLogOut();
-                setView('wallet-list');
+                goToInitialView();
                 return;
             }
             const decodedJwt = decodeJwt.decodeJwt(jwt);
@@ -141,15 +147,16 @@ const EmailVerification = () => {
             }
             setCallback('authSuccess');
             // this timeout is set to make sure that the user will see success message
-            setTimeout(() => {
-                createUserProfileByJWT(jwt);
+            setTimeout(() => _tslib.__awaiter(void 0, void 0, void 0, function* () {
+                yield createUserProfileByJWT(jwt);
                 setShowAuthFlow(false);
-            }, 1500);
+            }), 1500);
         }
         catch (error) {
             if (error instanceof utils.NoAccessError) {
                 setView('no-access');
             }
+            logger.logger.debug(error);
             setErrorMessage(error.code);
         }
         finally {
@@ -160,10 +167,11 @@ const EmailVerification = () => {
         setLoading,
         verificationUUID,
         handleLogOut,
-        setView,
+        goToInitialView,
         environmentId,
         setCallback,
         setOnboardingOnlyJwt,
+        setView,
         createUserProfileByJWT,
         setShowAuthFlow,
         setErrorMessage,
@@ -181,9 +189,11 @@ const EmailVerification = () => {
             });
             setVerificationUUID(newVerificationUUID);
             setRetried(true);
+            startCountdown();
             setError(undefined);
         }
         catch (error) {
+            logger.logger.debug(error);
             setErrorMessage(error.code);
             if (error.code === 'too_many_email_verification_attempts') {
                 setHideRetryButton(true);
@@ -196,26 +206,9 @@ const EmailVerification = () => {
             setLoading(false);
         }
     });
-    React.useEffect(() => {
-        /* istanbul ignore next */
-        setCount(secondsToRetry);
-        const timeout = setTimeout(() => {
-            if (retried)
-                setRetried(false);
-        }, secondsToRetry * 1000);
-        return () => clearTimeout(timeout);
-    }, [retried]);
-    React.useEffect(() => {
-        /* istanbul ignore next */
-        const timeout = setTimeout(() => {
-            if (count)
-                setCount((prev) => prev - 1);
-        }, 1000);
-        return () => clearTimeout(timeout);
-    }, [count]);
     return (jsxRuntime.jsxs("div", Object.assign({ className: 'email-verification__container' }, { children: [error && (jsxRuntime.jsx(ErrorContainer.ErrorContainer, Object.assign({ withIcon: false, className: 'email-verification__error-message' }, { children: error }))), showTransferMessage && (jsxRuntime.jsx("div", Object.assign({ className: 'email-verification__transfer-message' }, { children: "Verification complete, the email is now verified to this account." }))), isValidated ? (jsxRuntime.jsx("div", Object.assign({ className: 'email-verification__icon-container' }, { children: jsxRuntime.jsx(IconWithStatus.IconWithStatus, { containerClassName: 'email-verification__icon--verified', Icon: iconic.SignInWithEmailIcon, iconSize: 50, InnerIcon: check.ReactComponent }) }))) : (jsxRuntime.jsx(IconWithSpinner.IconWithSpinner, { className: classNames.classNames({
                     'email-verification__icon-with-spinner': Boolean(!error),
-                }), Icon: iconic.SignInWithEmailIcon, iconSize: 80, isSpinning: true })), jsxRuntime.jsx(Typography.Typography, Object.assign({ weight: 'medium', variant: 'title', className: 'email-verification__title', color: 'primary' }, { children: "Confirm verification code" })), jsxRuntime.jsxs("div", Object.assign({ className: 'email-verification__copy-text-container' }, { children: [jsxRuntime.jsx(Typography.Typography, Object.assign({ variant: 'body_normal', weight: 'regular', color: 'secondary' }, { children: "We\u2019ve sent a verification code to" })), jsxRuntime.jsx(Typography.Typography, Object.assign({ variant: 'body_normal', weight: 'bold', color: 'secondary' }, { children: shortenEmail.shortenEmail(email) }))] })), !isLoginView && (jsxRuntime.jsx(TextButton.TextButton, Object.assign({ onClick: () => setView('update-email'), className: 'email-verification__text-button', disabled: loading }, { children: "Edit email" }))), jsxRuntime.jsx(PinField.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 ? (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsxs(Typography.Typography, Object.assign({ variant: 'body_small', color: 'secondary' }, { children: ["Re-send code in ", count] })), jsxRuntime.jsxs("span", Object.assign({ className: 'email-verification__retry-container' }, { children: [jsxRuntime.jsx(checkCircle.ReactComponent, {}), jsxRuntime.jsx(Typography.Typography, Object.assign({ variant: 'body_small', weight: 'medium', color: 'primary', className: 'email-verification__retry-container-text' }, { children: "Code sent" }))] }))] })) : (!hideRetryButton && (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx(Typography.Typography, Object.assign({ variant: 'body_small', weight: 'medium', color: 'secondary' }, { children: "Did not receive your code yet?" })), jsxRuntime.jsx(TextButton.TextButton, Object.assign({ className: 'email-verification__text-button', disabled: loading || isValidated, onClick: () => handleRetry() }, { children: "Re-send code" }))] }))), !isLoginView && (jsxRuntime.jsx(TextButton.TextButton, Object.assign({ className: 'email-verification__log-out', onClick: () => handleLogOut() }, { children: "Log out" }))), termsOfServiceUrl && privacyPolicyUrl && isLoginView && (jsxRuntime.jsx(TosAndPp.TosAndPp, { mode: 'logging in', privacyPolicyUrl: privacyPolicyUrl, termsOfServiceUrl: termsOfServiceUrl })), jsxRuntime.jsx(PoweredByDynamic.PoweredByDynamic, {})] })));
+                }), Icon: iconic.SignInWithEmailIcon, iconSize: 80, isSpinning: true })), jsxRuntime.jsx(Typography.Typography, Object.assign({ weight: 'medium', variant: 'title', className: 'email-verification__title', color: 'primary' }, { children: "Confirm verification code" })), jsxRuntime.jsxs("div", Object.assign({ className: 'email-verification__copy-text-container' }, { children: [jsxRuntime.jsx(Typography.Typography, Object.assign({ variant: 'body_normal', weight: 'regular', color: 'secondary' }, { children: "We\u2019ve sent a verification code to" })), jsxRuntime.jsx(Typography.Typography, Object.assign({ variant: 'body_normal', weight: 'bold', color: 'secondary' }, { children: shortenEmail.shortenEmail(email) }))] })), !isLoginView && (jsxRuntime.jsx(TextButton.TextButton, Object.assign({ onClick: () => setView('update-email'), className: 'email-verification__text-button', disabled: loading }, { children: "Edit email" }))), jsxRuntime.jsx(PinField.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 ? (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsxs(Typography.Typography, Object.assign({ variant: 'body_small', color: 'secondary' }, { children: ["Re-send code in ", remainingSeconds] })), jsxRuntime.jsxs("span", Object.assign({ className: 'email-verification__retry-container' }, { children: [jsxRuntime.jsx(checkCircle.ReactComponent, {}), jsxRuntime.jsx(Typography.Typography, Object.assign({ variant: 'body_small', weight: 'medium', color: 'primary', className: 'email-verification__retry-container-text' }, { children: "Code sent" }))] }))] })) : (!hideRetryButton && (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx(Typography.Typography, Object.assign({ variant: 'body_small', weight: 'medium', color: 'secondary' }, { children: "Did not receive your code yet?" })), jsxRuntime.jsx(TextButton.TextButton, Object.assign({ className: 'email-verification__text-button', disabled: loading || isValidated, onClick: () => handleRetry() }, { children: "Re-send code" }))] }))), !isLoginView && (jsxRuntime.jsx(TextButton.TextButton, Object.assign({ className: 'email-verification__log-out', onClick: handleLogOut }, { children: "Log out" }))), jsxRuntime.jsx(PoweredByDynamic.PoweredByDynamic, {})] })));
 };
 
 exports.EmailVerification = EmailVerification;