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

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

@@ -19,6 +19,7 @@ require('@dynamic-labs/wallet-book');
 require('../../utils/constants/colors.cjs');
 require('../../shared/utils/classes/storage/localStorage.cjs');
 require('ethers');
+var useEffectOnce = require('../../shared/utils/hooks/useEffectOnce/useEffectOnce.cjs');
 require('../../shared/consts/index.cjs');
 var useInternalDynamicContext = require('../../context/DynamicContext/useInternalDynamicContext.cjs');
 require('@dynamic-labs/multi-wallet');
@@ -43,44 +44,74 @@ var IconWithStatus = require('../../components/IconWithStatus/IconWithStatus.cjs
 var PoweredByDynamic = require('../../components/PoweredByDynamic/PoweredByDynamic.cjs');
 var IconWithSpinner = require('../../components/IconWithSpinner/IconWithSpinner.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('../../utils/hooks/useUserUpdateRequest/useUserUpdateRequest.cjs');
+var useEmailVerificationRequest = require('../../utils/hooks/authenticationHooks/useEmailVerificationRequest/useEmailVerificationRequest.cjs');
 var useCountdown = require('../../utils/hooks/useCountdown/useCountdown.cjs');
+require('@dynamic-labs/types');
+var useCreateUserProfileByJWTCallback = require('../../utils/hooks/useCreateUserProfileByJWTCallback/useCreateUserProfileByJWTCallback.cjs');
+require('../../utils/hooks/useUserUpdateRequest/useUpdateUser/useUpdateUser.cjs');
+require('../../context/UserFieldEditorContext/UserFieldEditorContext.cjs');
+var useOnUnmount = require('../../utils/hooks/useOnUnmount/useOnUnmount.cjs');
 var TextButton = require('../../components/TextButton/TextButton.cjs');
 var ErrorContainer = require('../../components/ErrorContainer/ErrorContainer.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');
 require('../../components/MenuList/Dropdown/Dropdown.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 SECONDS_TO_RETRY = 15;
 const EmailVerification = () => {
     const [hideRetryButton, setHideRetryButton] = React.useState(false);
     const [retried, setRetried] = React.useState(false);
-    const [isValidated, setIsValidated] = React.useState(false);
     const [showTransferMessage, setShowTransferMessage] = React.useState(false);
+    // Use a state to ensure UI is updated, but also a ref to access in effect cleanup
+    const [isValidated, _setIsValidated] = React.useState(false);
+    const isValidatedRef = React.useRef(isValidated);
+    const setIsValidated = (value) => {
+        _setIsValidated(value);
+        isValidatedRef.current = value;
+    };
     const { view, setView, goToInitialView } = ViewContext.useViewContext();
     const { error, setError, setErrorMessage } = ErrorContext.useErrorContext();
     const { setExistentAccountData } = AccountExistsContext.useAccountExistsContext();
-    const { environmentId, onboardingOnlyJwt, handleLogOut, authToken, setOnboardingOnlyJwt, setShowAuthFlow, setCallback, } = useInternalDynamicContext.useInternalDynamicContext();
+    const { environmentId, onboardingOnlyJwt, handleLogOut, authToken, setOnboardingOnlyJwt, setShowAuthFlow, setCallback, setIsVerificationInProgress, isVerificationInProgress, } = 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,
     });
+    // When true, causes the component to call emailVerificationX callback on unmount
+    const callCallbackOnUnmount = React.useRef(true);
+    useOnUnmount.useOnUnmount(() => {
+        if (!callCallbackOnUnmount.current)
+            return;
+        const callback = isValidatedRef.current
+            ? 'emailVerificationSuccess'
+            : 'emailVerificationFailure';
+        setCallback(callback, { email: email !== null && email !== void 0 ? email : '' });
+    });
+    useEffectOnce.useEffectOnce(() => {
+        // Set verification in progress
+        // It should be disabled by either clearStatesOnBackClick, the close button, or onAuthSuccess
+        setIsVerificationInProgress(true);
+    });
     const isLoginView = view === 'login-with-email-verification';
     const { verifyEmail } = useEmailVerificationRequest.useEmailVerificationRequest();
     const { createUserProfileByJWT } = useCreateUserProfileByJWTCallback.useCreateUserProfileByJWTCallback();
+    const close$1 = () => {
+        setShowAuthFlow(false);
+        if (isVerificationInProgress)
+            setIsVerificationInProgress(false);
+    };
     const handleComplete = React.useCallback((verificationToken) => _tslib.__awaiter(void 0, void 0, void 0, function* () {
         setError(undefined);
         setLoading(true);
@@ -222,10 +253,15 @@ const EmailVerification = () => {
             setLoading(false);
         }
     });
-    const closeButton = (jsxRuntime.jsx(IconButton.IconButton, Object.assign({ onClick: () => setShowAuthFlow(false), type: 'button' }, { children: jsxRuntime.jsx(close.ReactComponent, {}) })));
+    // Go to update email screen, but prevent onEmailVerificationX callback from being called
+    const updateEmail = () => {
+        callCallbackOnUnmount.current = false;
+        setView('update-email');
+    };
+    const closeButton = (jsxRuntime.jsx(IconButton.IconButton, Object.assign({ onClick: close$1, type: 'button', "data-testid": 'close-button' }, { children: jsxRuntime.jsx(close.ReactComponent, {}) })));
     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." }))), jsxRuntime.jsx(ModalHeader.ModalHeader, Object.assign({ style: { paddingBlock: 0 }, trailing: !isLoginView && closeButton }, { children: 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 ", 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, {})] })));
+                    }), 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: updateEmail, 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;

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

@@ -1,6 +1,6 @@
 import { __awaiter } from '../../../../_virtual/_tslib.js';
 import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
-import { useState, useCallback } from 'react';
+import { useState, useRef, useCallback } from 'react';
 import { SignInWithEmailIcon } from '@dynamic-labs/iconic';
 import { UserHasAccountWithEmailError, NoAccessError, AccountExistsError } from '@dynamic-labs/utils';
 import { Typography } from '../../components/Typography/Typography.js';
@@ -15,6 +15,7 @@ import '@dynamic-labs/wallet-book';
 import '../../utils/constants/colors.js';
 import '../../shared/utils/classes/storage/localStorage.js';
 import 'ethers';
+import { useEffectOnce } from '../../shared/utils/hooks/useEffectOnce/useEffectOnce.js';
 import '../../shared/consts/index.js';
 import { useInternalDynamicContext } from '../../context/DynamicContext/useInternalDynamicContext.js';
 import '@dynamic-labs/multi-wallet';
@@ -39,44 +40,74 @@ import { IconWithStatus } from '../../components/IconWithStatus/IconWithStatus.j
 import { PoweredByDynamic } from '../../components/PoweredByDynamic/PoweredByDynamic.js';
 import { IconWithSpinner } from '../../components/IconWithSpinner/IconWithSpinner.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 '../../utils/hooks/useUserUpdateRequest/useUserUpdateRequest.js';
+import { useEmailVerificationRequest } from '../../utils/hooks/authenticationHooks/useEmailVerificationRequest/useEmailVerificationRequest.js';
 import { useCountdown } from '../../utils/hooks/useCountdown/useCountdown.js';
+import '@dynamic-labs/types';
+import { useCreateUserProfileByJWTCallback } from '../../utils/hooks/useCreateUserProfileByJWTCallback/useCreateUserProfileByJWTCallback.js';
+import '../../utils/hooks/useUserUpdateRequest/useUpdateUser/useUpdateUser.js';
+import '../../context/UserFieldEditorContext/UserFieldEditorContext.js';
+import { useOnUnmount } from '../../utils/hooks/useOnUnmount/useOnUnmount.js';
 import { TextButton } from '../../components/TextButton/TextButton.js';
 import { ErrorContainer } from '../../components/ErrorContainer/ErrorContainer.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 '../../components/MenuList/Dropdown/Dropdown.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 SECONDS_TO_RETRY = 15;
 const EmailVerification = () => {
     const [hideRetryButton, setHideRetryButton] = useState(false);
     const [retried, setRetried] = useState(false);
-    const [isValidated, setIsValidated] = useState(false);
     const [showTransferMessage, setShowTransferMessage] = useState(false);
+    // Use a state to ensure UI is updated, but also a ref to access in effect cleanup
+    const [isValidated, _setIsValidated] = useState(false);
+    const isValidatedRef = useRef(isValidated);
+    const setIsValidated = (value) => {
+        _setIsValidated(value);
+        isValidatedRef.current = value;
+    };
     const { view, setView, goToInitialView } = useViewContext();
     const { error, setError, setErrorMessage } = useErrorContext();
     const { setExistentAccountData } = useAccountExistsContext();
-    const { environmentId, onboardingOnlyJwt, handleLogOut, authToken, setOnboardingOnlyJwt, setShowAuthFlow, setCallback, } = useInternalDynamicContext();
+    const { environmentId, onboardingOnlyJwt, handleLogOut, authToken, setOnboardingOnlyJwt, setShowAuthFlow, setCallback, setIsVerificationInProgress, isVerificationInProgress, } = useInternalDynamicContext();
     const { email, verificationUUID, setVerificationUUID } = useEmailVerificationContext();
     const { loading, setLoading } = useLoadingContext();
     const { remainingSeconds, startCountdown } = useCountdown({
         callback: () => setRetried(false),
         seconds: SECONDS_TO_RETRY,
     });
+    // When true, causes the component to call emailVerificationX callback on unmount
+    const callCallbackOnUnmount = useRef(true);
+    useOnUnmount(() => {
+        if (!callCallbackOnUnmount.current)
+            return;
+        const callback = isValidatedRef.current
+            ? 'emailVerificationSuccess'
+            : 'emailVerificationFailure';
+        setCallback(callback, { email: email !== null && email !== void 0 ? email : '' });
+    });
+    useEffectOnce(() => {
+        // Set verification in progress
+        // It should be disabled by either clearStatesOnBackClick, the close button, or onAuthSuccess
+        setIsVerificationInProgress(true);
+    });
     const isLoginView = view === 'login-with-email-verification';
     const { verifyEmail } = useEmailVerificationRequest();
     const { createUserProfileByJWT } = useCreateUserProfileByJWTCallback();
+    const close = () => {
+        setShowAuthFlow(false);
+        if (isVerificationInProgress)
+            setIsVerificationInProgress(false);
+    };
     const handleComplete = useCallback((verificationToken) => __awaiter(void 0, void 0, void 0, function* () {
         setError(undefined);
         setLoading(true);
@@ -218,10 +249,15 @@ const EmailVerification = () => {
             setLoading(false);
         }
     });
-    const closeButton = (jsx(IconButton, Object.assign({ onClick: () => setShowAuthFlow(false), type: 'button' }, { children: jsx(SvgClose, {}) })));
+    // Go to update email screen, but prevent onEmailVerificationX callback from being called
+    const updateEmail = () => {
+        callCallbackOnUnmount.current = false;
+        setView('update-email');
+    };
+    const closeButton = (jsx(IconButton, Object.assign({ onClick: close, type: 'button', "data-testid": 'close-button' }, { children: jsx(SvgClose, {}) })));
     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." }))), jsx(ModalHeader, Object.assign({ style: { paddingBlock: 0 }, trailing: !isLoginView && closeButton }, { children: 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 ", 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, {})] })));
+                    }), 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: updateEmail, 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

@@ -39,10 +39,14 @@ require('formik');
 require('yup');
 require('../../components/InlineWidget/InlineWidget.cjs');
 require('../../components/MenuList/Dropdown/Dropdown.cjs');
+require('../CollectUserDataView/fieldsConfig.cjs');
 require('../../context/MockContext/MockContext.cjs');
 require('../../context/CaptchaContext/CaptchaContext.cjs');
+require('../../context/EmailVerificationContext/EmailVerificationContext.cjs');
 var useMutation = require('../../utils/hooks/useMutation/useMutation.cjs');
-require('../../utils/hooks/useUserUpdateRequest/useUserUpdateRequest.cjs');
+require('@dynamic-labs/types');
+require('../../utils/hooks/useUserUpdateRequest/useUpdateUser/useUpdateUser.cjs');
+require('../../context/UserFieldEditorContext/UserFieldEditorContext.cjs');
 
 const EmailWalletOTPVerificationView = () => {
     const { setView } = ViewContext.useViewContext();
@@ -65,7 +69,7 @@ const EmailWalletOTPVerificationView = () => {
     const { data: isValid, isLoading, mutate: onSubmit, } = useMutation.useMutation((otp) => emailWalletConnector.verifyOneTimePassword(otp), {
         onFailure: (error) => setError(error),
     });
-    return (jsxRuntime.jsx(OTPVerificationView.OTPVerificationView, { email: email, error: error, onClickBack: handleBackClick, isLoading: isLoading, onPinComplete: onSubmit, isValid: isValid === true, onPinChange: () => setError(undefined), onClickClose: handleOnClickClose, onClickEditEmail: handleBackClick, displayPoweredByDynamic: true }));
+    return (jsxRuntime.jsx(OTPVerificationView.OTPVerificationView, { email: email, error: error, onClickBack: handleBackClick, isLoading: isLoading, onPinComplete: onSubmit, isValid: isValid === true, onPinChange: () => setError(undefined), onClickClose: handleOnClickClose, onClickEditEmail: handleBackClick, displayPoweredByDynamic: true, successBannerText: 'By signing in, you will access a wallet that is only associated to this email.' }));
 };
 
 exports.EmailWalletOTPVerificationView = EmailWalletOTPVerificationView;

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

@@ -35,10 +35,14 @@ import 'formik';
 import 'yup';
 import '../../components/InlineWidget/InlineWidget.js';
 import '../../components/MenuList/Dropdown/Dropdown.js';
+import '../CollectUserDataView/fieldsConfig.js';
 import '../../context/MockContext/MockContext.js';
 import '../../context/CaptchaContext/CaptchaContext.js';
+import '../../context/EmailVerificationContext/EmailVerificationContext.js';
 import { useMutation } from '../../utils/hooks/useMutation/useMutation.js';
-import '../../utils/hooks/useUserUpdateRequest/useUserUpdateRequest.js';
+import '@dynamic-labs/types';
+import '../../utils/hooks/useUserUpdateRequest/useUpdateUser/useUpdateUser.js';
+import '../../context/UserFieldEditorContext/UserFieldEditorContext.js';
 
 const EmailWalletOTPVerificationView = () => {
     const { setView } = useViewContext();
@@ -61,7 +65,7 @@ const EmailWalletOTPVerificationView = () => {
     const { data: isValid, isLoading, mutate: onSubmit, } = useMutation((otp) => emailWalletConnector.verifyOneTimePassword(otp), {
         onFailure: (error) => setError(error),
     });
-    return (jsx(OTPVerificationView, { email: email, error: error, onClickBack: handleBackClick, isLoading: isLoading, onPinComplete: onSubmit, isValid: isValid === true, onPinChange: () => setError(undefined), onClickClose: handleOnClickClose, onClickEditEmail: handleBackClick, displayPoweredByDynamic: true }));
+    return (jsx(OTPVerificationView, { email: email, error: error, onClickBack: handleBackClick, isLoading: isLoading, onPinComplete: onSubmit, isValid: isValid === true, onPinChange: () => setError(undefined), onClickClose: handleOnClickClose, onClickEditEmail: handleBackClick, displayPoweredByDynamic: true, successBannerText: 'By signing in, you will access a wallet that is only associated to this email.' }));
 };
 
 export { EmailWalletOTPVerificationView };

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

@@ -35,14 +35,18 @@ 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('../../../../utils/hooks/useUserUpdateRequest/useUserUpdateRequest.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('formik');
-require('yup');
 require('../../../../components/InlineWidget/InlineWidget.cjs');
 require('../../../../components/MenuList/Dropdown/Dropdown.cjs');
 var Badge = require('../../../../components/Badge/Badge.cjs');

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

@@ -31,14 +31,18 @@ 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 '../../../../utils/hooks/useUserUpdateRequest/useUserUpdateRequest.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 'formik';
-import 'yup';
 import '../../../../components/InlineWidget/InlineWidget.js';
 import '../../../../components/MenuList/Dropdown/Dropdown.js';
 import { Badge } from '../../../../components/Badge/Badge.js';

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

@@ -35,25 +35,29 @@ require('../../../../context/AccessDeniedContext/AccessDeniedContext.cjs');
 require('../../../../context/AccountExistsContext/AccountExistsContext.cjs');
 var IconButton = 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('../../../../utils/hooks/useUserUpdateRequest/useUserUpdateRequest.cjs');
+require('../../../../context/EmailVerificationContext/EmailVerificationContext.cjs');
+require('@dynamic-labs/types');
+require('../../../../utils/hooks/useUserUpdateRequest/useUpdateUser/useUpdateUser.cjs');
+require('../../../../context/UserFieldEditorContext/UserFieldEditorContext.cjs');
 require('../../../../components/Popper/Popper/Popper.cjs');
 require('../../../../components/Popper/PopperContext/PopperContext.cjs');
-require('formik');
-require('yup');
 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 = () => {
+const LoginWithEmailForm = ({ currentEmail }) => {
     var _a;
     const { environmentId, wallets, projectSettings } = useInternalDynamicContext.useInternalDynamicContext();
     const { loading, setLoading } = LoadingContext.useLoadingContext();
     const { setErrorMessage } = ErrorContext.useErrorContext();
-    const [emailInput, setEmailInput] = React.useState('');
+    const [emailInput, setEmailInput] = React.useState(currentEmail !== null && currentEmail !== void 0 ? currentEmail : '');
     const [emailError, setEmailError] = React.useState(false);
     const emailWalletConnector = wallets
         .map(({ walletConnector }) => walletConnector)

package/src/lib/views/LoginWithEmailView/components/LoginWithEmailForm/LoginWithEmailForm.d.ts

@@ -1,3 +1,7 @@
 /// <reference types="react" />
 export declare const EMAIL_REGEX: RegExp;
-export declare const LoginWithEmailForm: () => JSX.Element;
+type Props = {
+    currentEmail?: string;
+};
+export declare const LoginWithEmailForm: ({ currentEmail }: Props) => JSX.Element;
+export {};

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

@@ -31,25 +31,29 @@ import '../../../../context/AccessDeniedContext/AccessDeniedContext.js';
 import '../../../../context/AccountExistsContext/AccountExistsContext.js';
 import { IconButton } from '../../../../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 '../../../../utils/hooks/useUserUpdateRequest/useUserUpdateRequest.js';
+import '../../../../context/EmailVerificationContext/EmailVerificationContext.js';
+import '@dynamic-labs/types';
+import '../../../../utils/hooks/useUserUpdateRequest/useUpdateUser/useUpdateUser.js';
+import '../../../../context/UserFieldEditorContext/UserFieldEditorContext.js';
 import '../../../../components/Popper/Popper/Popper.js';
 import '../../../../components/Popper/PopperContext/PopperContext.js';
-import 'formik';
-import 'yup';
 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 = () => {
+const LoginWithEmailForm = ({ currentEmail }) => {
     var _a;
     const { environmentId, wallets, projectSettings } = useInternalDynamicContext();
     const { loading, setLoading } = useLoadingContext();
     const { setErrorMessage } = useErrorContext();
-    const [emailInput, setEmailInput] = useState('');
+    const [emailInput, setEmailInput] = useState(currentEmail !== null && currentEmail !== void 0 ? currentEmail : '');
     const [emailError, setEmailError] = useState(false);
     const emailWalletConnector = wallets
         .map(({ walletConnector }) => walletConnector)

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

@@ -26,7 +26,10 @@ const LoginWithEmailWalletList = ({ walletsList, numberOfWallets, }) => {
     const { setView } = ViewContext.useViewContext();
     const { projectSettings } = useInternalDynamicContext.useInternalDynamicContext();
     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, usingMultiWallet: isUsingMultiWallet }, wallet.key))), jsxRuntime.jsx(ListItemButton.ListItemButton, { text: 'View all wallets', onClick: () => setView('login-with-email-or-wallet-full-wallet-list'), numberOfWallets: numberOfWallets })] })));
+    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) => {
+                var _a;
+                return (jsxRuntime.jsx(WalletListItem.WalletListItem, { wallet: wallet, usingMultiWallet: isUsingMultiWallet }, wallet.key + ((_a = wallet.groupedWallets) === null || _a === void 0 ? void 0 : _a.length)));
+            }), jsxRuntime.jsx(ListItemButton.ListItemButton, { text: 'View all wallets', onClick: () => setView('login-with-email-or-wallet-full-wallet-list'), numberOfWallets: numberOfWallets })] })));
 };
 
 exports.LoginWithEmailWalletList = LoginWithEmailWalletList;

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

@@ -22,7 +22,10 @@ const LoginWithEmailWalletList = ({ walletsList, numberOfWallets, }) => {
     const { setView } = useViewContext();
     const { projectSettings } = useInternalDynamicContext();
     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, usingMultiWallet: isUsingMultiWallet }, wallet.key))), jsx(ListItemButton, { text: 'View all wallets', onClick: () => setView('login-with-email-or-wallet-full-wallet-list'), numberOfWallets: numberOfWallets })] })));
+    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) => {
+                var _a;
+                return (jsx(WalletListItem, { wallet: wallet, usingMultiWallet: isUsingMultiWallet }, wallet.key + ((_a = wallet.groupedWallets) === null || _a === void 0 ? void 0 : _a.length)));
+            }), jsx(ListItemButton, { text: 'View all wallets', onClick: () => setView('login-with-email-or-wallet-full-wallet-list'), numberOfWallets: numberOfWallets })] })));
 };
 
 export { LoginWithEmailWalletList, NUMBER_OF_WALLETS };

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

@@ -39,16 +39,20 @@ var ModalHeader = require('../../../../components/ModalHeader/ModalHeader.cjs');
 var IconButton = require('../../../../components/IconButton/IconButton.cjs');
 var IconWithSpinner = require('../../../../components/IconWithSpinner/IconWithSpinner.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');
 var useMutation = require('../../../../utils/hooks/useMutation/useMutation.cjs');
-require('../../../../utils/hooks/useUserUpdateRequest/useUserUpdateRequest.cjs');
 var useFindSocialIcon = require('../../../../utils/hooks/useFindSocialIcon/useFindSocialIcon.cjs');
+require('@dynamic-labs/types');
+require('../../../../utils/hooks/useUserUpdateRequest/useUpdateUser/useUpdateUser.cjs');
+require('../../../../context/UserFieldEditorContext/UserFieldEditorContext.cjs');
 var IconListTile = require('../../../../components/IconListTile/IconListTile.cjs');
 require('../../../../components/Popper/Popper/Popper.cjs');
 require('../../../../components/Popper/PopperContext/PopperContext.cjs');
-require('formik');
-require('yup');
 require('../../../../components/InlineWidget/InlineWidget.cjs');
 require('../../../../components/MenuList/Dropdown/Dropdown.cjs');
 var SocialRedirectContext = require('../../../../context/SocialRedirectContext/SocialRedirectContext.cjs');

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

@@ -35,16 +35,20 @@ import { ModalHeader } from '../../../../components/ModalHeader/ModalHeader.js';
 import { IconButton } from '../../../../components/IconButton/IconButton.js';
 import { IconWithSpinner } from '../../../../components/IconWithSpinner/IconWithSpinner.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 { useMutation } from '../../../../utils/hooks/useMutation/useMutation.js';
-import '../../../../utils/hooks/useUserUpdateRequest/useUserUpdateRequest.js';
 import { useFindSocialIcon } from '../../../../utils/hooks/useFindSocialIcon/useFindSocialIcon.js';
+import '@dynamic-labs/types';
+import '../../../../utils/hooks/useUserUpdateRequest/useUpdateUser/useUpdateUser.js';
+import '../../../../context/UserFieldEditorContext/UserFieldEditorContext.js';
 import { IconListTile } from '../../../../components/IconListTile/IconListTile.js';
 import '../../../../components/Popper/Popper/Popper.js';
 import '../../../../components/Popper/PopperContext/PopperContext.js';
-import 'formik';
-import 'yup';
 import '../../../../components/InlineWidget/InlineWidget.js';
 import '../../../../components/MenuList/Dropdown/Dropdown.js';
 import { useSocialRedirectContext } from '../../../../context/SocialRedirectContext/SocialRedirectContext.js';

package/src/lib/views/MergeUserAccountsView/MergeUserAccountsView.cjs

@@ -41,17 +41,20 @@ require('../../context/AccountExistsContext/AccountExistsContext.cjs');
 require('../../components/IconButton/IconButton.cjs');
 var Button = require('../../components/Button/Button.cjs');
 require('../../components/Alert/Alert.cjs');
+require('formik');
+require('yup');
+require('../CollectUserDataView/fieldsConfig.cjs');
 require('../../context/MockContext/MockContext.cjs');
 require('../../context/CaptchaContext/CaptchaContext.cjs');
-require('../../utils/hooks/useUserUpdateRequest/useUserUpdateRequest.cjs');
+var EmailVerificationContext = require('../../context/EmailVerificationContext/EmailVerificationContext.cjs');
+require('@dynamic-labs/types');
+require('../../utils/hooks/useUserUpdateRequest/useUpdateUser/useUpdateUser.cjs');
+require('../../context/UserFieldEditorContext/UserFieldEditorContext.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');
 require('../../components/MenuList/Dropdown/Dropdown.cjs');
-var EmailVerificationContext = require('../../context/EmailVerificationContext/EmailVerificationContext.cjs');
 
 const MergeUserAccountsView = () => {
     const { environmentId, setUser, setOnboardingOnlyJwt, setShowAuthFlow, setCallback, primaryWallet, user, authToken, onboardingOnlyJwt, } = useInternalDynamicContext.useInternalDynamicContext();
@@ -84,6 +87,10 @@ const MergeUserAccountsView = () => {
         }
         catch (e) {
             setError('Something went wrong, please try again.');
+            if (user) {
+                setShowAuthFlow(false);
+                return;
+            }
             goToInitialView();
         }
     });

package/src/lib/views/MergeUserAccountsView/MergeUserAccountsView.js

@@ -37,17 +37,20 @@ import '../../context/AccountExistsContext/AccountExistsContext.js';
 import '../../components/IconButton/IconButton.js';
 import { Button } from '../../components/Button/Button.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 '../../utils/hooks/useUserUpdateRequest/useUserUpdateRequest.js';
+import { useEmailVerificationContext } from '../../context/EmailVerificationContext/EmailVerificationContext.js';
+import '@dynamic-labs/types';
+import '../../utils/hooks/useUserUpdateRequest/useUpdateUser/useUpdateUser.js';
+import '../../context/UserFieldEditorContext/UserFieldEditorContext.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 '../../components/MenuList/Dropdown/Dropdown.js';
-import { useEmailVerificationContext } from '../../context/EmailVerificationContext/EmailVerificationContext.js';
 
 const MergeUserAccountsView = () => {
     const { environmentId, setUser, setOnboardingOnlyJwt, setShowAuthFlow, setCallback, primaryWallet, user, authToken, onboardingOnlyJwt, } = useInternalDynamicContext();
@@ -80,6 +83,10 @@ const MergeUserAccountsView = () => {
         }
         catch (e) {
             setError('Something went wrong, please try again.');
+            if (user) {
+                setShowAuthFlow(false);
+                return;
+            }
             goToInitialView();
         }
     });