@dynamic-labs/sdk-react-core 0.16.1 → 0.16.2

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

@@ -0,0 +1,45 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var jsxRuntime = require('react/jsx-runtime');
+var iconic = require('@dynamic-labs/iconic');
+require('react');
+var Typography = require('../../components/Typography/Typography.cjs');
+require('@dynamic-labs/sdk-api');
+require('../../shared/logger.cjs');
+require('@dynamic-labs/multi-wallet');
+require('../../context/ViewContext/ViewContext.cjs');
+require('../../utils/constants/colors.cjs');
+require('../../shared/consts/index.cjs');
+var useInternalDynamicContext = require('../../context/DynamicContext/useInternalDynamicContext.cjs');
+var createUserProfile = require('../../utils/functions/createUserProfile/createUserProfile.cjs');
+require('../../components/ShadowDOM/ShadowDOM.cjs');
+require('../../context/ThemeContext/ThemeContext.cjs');
+require('react-dom');
+require('react-focus-lock');
+require('../../components/Transition/ZoomTransition/ZoomTransition.cjs');
+require('../../components/Transition/SlideInUpTransition/SlideInUpTransition.cjs');
+require('../../components/Transition/OpacityTransition/OpacityTransition.cjs');
+var TextButton = require('../../components/TextButton/TextButton.cjs');
+require('../../config/ApiEndpoint.cjs');
+require('../../context/ErrorContext/ErrorContext.cjs');
+require('ethers');
+require('../../context/MockContext/MockContext.cjs');
+require('../../context/CaptchaContext/CaptchaContext.cjs');
+require('../../utils/hooks/useUserUpdateRequest/useUserUpdateRequest.cjs');
+require('../../components/IconButton/IconButton.cjs');
+var UserDataForm = require('../CollectUserDataView/UserDataForm/UserDataForm.cjs');
+
+const CollectUserDataViewLoginWithEmail = () => {
+    const { appName, handleLogOut, projectSettings, onboardingImageUrl, decodedOnboardingOnlyToken, } = useInternalDynamicContext.useInternalDynamicContext();
+    if (!decodedOnboardingOnlyToken) {
+        return null;
+    }
+    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(UserDataForm.UserDataForm, 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" }))] }))] })));
+};
+
+exports.CollectUserDataViewLoginWithEmail = CollectUserDataViewLoginWithEmail;

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

@@ -0,0 +1,41 @@
+import { jsxs, jsx } from 'react/jsx-runtime';
+import { UserProfileIcon } from '@dynamic-labs/iconic';
+import 'react';
+import { Typography } from '../../components/Typography/Typography.js';
+import '@dynamic-labs/sdk-api';
+import '../../shared/logger.js';
+import '@dynamic-labs/multi-wallet';
+import '../../context/ViewContext/ViewContext.js';
+import '../../utils/constants/colors.js';
+import '../../shared/consts/index.js';
+import { useInternalDynamicContext } from '../../context/DynamicContext/useInternalDynamicContext.js';
+import { createUserProfile } from '../../utils/functions/createUserProfile/createUserProfile.js';
+import '../../components/ShadowDOM/ShadowDOM.js';
+import '../../context/ThemeContext/ThemeContext.js';
+import 'react-dom';
+import 'react-focus-lock';
+import '../../components/Transition/ZoomTransition/ZoomTransition.js';
+import '../../components/Transition/SlideInUpTransition/SlideInUpTransition.js';
+import '../../components/Transition/OpacityTransition/OpacityTransition.js';
+import { TextButton } from '../../components/TextButton/TextButton.js';
+import '../../config/ApiEndpoint.js';
+import '../../context/ErrorContext/ErrorContext.js';
+import 'ethers';
+import '../../context/MockContext/MockContext.js';
+import '../../context/CaptchaContext/CaptchaContext.js';
+import '../../utils/hooks/useUserUpdateRequest/useUserUpdateRequest.js';
+import '../../components/IconButton/IconButton.js';
+import { UserDataForm } from '../CollectUserDataView/UserDataForm/UserDataForm.js';
+
+const CollectUserDataViewLoginWithEmail = () => {
+    const { appName, handleLogOut, projectSettings, onboardingImageUrl, decodedOnboardingOnlyToken, } = useInternalDynamicContext();
+    if (!decodedOnboardingOnlyToken) {
+        return null;
+    }
+    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(UserDataForm, 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" }))] }))] })));
+};
+
+export { CollectUserDataViewLoginWithEmail };

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

@@ -0,0 +1,53 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var _tslib = require('../../../../_virtual/_tslib.cjs');
+var jsxRuntime = require('react/jsx-runtime');
+var React = require('react');
+var iconic = require('@dynamic-labs/iconic');
+var multiWallet = require('@dynamic-labs/multi-wallet');
+var Typography = require('../../components/Typography/Typography.cjs');
+require('@dynamic-labs/sdk-api');
+require('../../shared/logger.cjs');
+var ViewContext = require('../../context/ViewContext/ViewContext.cjs');
+var pencilAltIcon = require('../../shared/assets/pencil-alt-icon.cjs');
+require('../../utils/constants/colors.cjs');
+require('../../shared/consts/index.cjs');
+var useInternalDynamicContext = require('../../context/DynamicContext/useInternalDynamicContext.cjs');
+require('../../components/ShadowDOM/ShadowDOM.cjs');
+require('../../context/ThemeContext/ThemeContext.cjs');
+var Icon = require('../../components/Icon/Icon.cjs');
+require('react-dom');
+require('react-focus-lock');
+require('../../components/Transition/ZoomTransition/ZoomTransition.cjs');
+require('../../components/Transition/SlideInUpTransition/SlideInUpTransition.cjs');
+require('../../components/Transition/OpacityTransition/OpacityTransition.cjs');
+require('../../config/ApiEndpoint.cjs');
+require('../../context/ErrorContext/ErrorContext.cjs');
+require('ethers');
+require('../../context/MockContext/MockContext.cjs');
+require('../../context/CaptchaContext/CaptchaContext.cjs');
+require('../../utils/hooks/useUserUpdateRequest/useUserUpdateRequest.cjs');
+var IconButton = require('../../components/IconButton/IconButton.cjs');
+var PoweredByDynamic = require('../../components/PoweredByDynamic/PoweredByDynamic.cjs');
+var IconWithSpinner = require('../../components/IconWithSpinner/IconWithSpinner.cjs');
+var TosAndPp = require('../../components/TosAndPp/TosAndPp.cjs');
+
+const EmailConfirmationWaitingView = () => {
+    const { setView } = ViewContext.useViewContext();
+    const { clearStatesOnBackClick, termsOfServiceUrl, privacyPolicyUrl, selectedWalletConnector: walletConnector, } = useInternalDynamicContext.useInternalDynamicContext();
+    if (walletConnector && !multiWallet.isEmailWalletConnector(walletConnector)) {
+        throw new Error('Wallet connector is not email provider');
+    }
+    const emailConnector = walletConnector;
+    const onClickResetEmail = React.useCallback(() => _tslib.__awaiter(void 0, void 0, void 0, function* () {
+        var _a;
+        yield ((_a = emailConnector === null || emailConnector === void 0 ? void 0 : emailConnector.endSession) === null || _a === void 0 ? void 0 : _a.call(emailConnector));
+        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, {}) }))] })));
+};
+
+exports.EmailConfirmationWaitingView = EmailConfirmationWaitingView;

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

@@ -0,0 +1,49 @@
+import { __awaiter } from '../../../../_virtual/_tslib.js';
+import { jsxs, jsx } from 'react/jsx-runtime';
+import { useCallback } from 'react';
+import { SignInWithEmailIcon } from '@dynamic-labs/iconic';
+import { isEmailWalletConnector } from '@dynamic-labs/multi-wallet';
+import { Typography } from '../../components/Typography/Typography.js';
+import '@dynamic-labs/sdk-api';
+import '../../shared/logger.js';
+import { useViewContext } from '../../context/ViewContext/ViewContext.js';
+import { ReactComponent as SvgPencilAltIcon } from '../../shared/assets/pencil-alt-icon.js';
+import '../../utils/constants/colors.js';
+import '../../shared/consts/index.js';
+import { useInternalDynamicContext } from '../../context/DynamicContext/useInternalDynamicContext.js';
+import '../../components/ShadowDOM/ShadowDOM.js';
+import '../../context/ThemeContext/ThemeContext.js';
+import { Icon } from '../../components/Icon/Icon.js';
+import 'react-dom';
+import 'react-focus-lock';
+import '../../components/Transition/ZoomTransition/ZoomTransition.js';
+import '../../components/Transition/SlideInUpTransition/SlideInUpTransition.js';
+import '../../components/Transition/OpacityTransition/OpacityTransition.js';
+import '../../config/ApiEndpoint.js';
+import '../../context/ErrorContext/ErrorContext.js';
+import 'ethers';
+import '../../context/MockContext/MockContext.js';
+import '../../context/CaptchaContext/CaptchaContext.js';
+import '../../utils/hooks/useUserUpdateRequest/useUserUpdateRequest.js';
+import { IconButton } from '../../components/IconButton/IconButton.js';
+import { PoweredByDynamic } from '../../components/PoweredByDynamic/PoweredByDynamic.js';
+import { IconWithSpinner } from '../../components/IconWithSpinner/IconWithSpinner.js';
+import { TosAndPp } from '../../components/TosAndPp/TosAndPp.js';
+
+const EmailConfirmationWaitingView = () => {
+    const { setView } = useViewContext();
+    const { clearStatesOnBackClick, termsOfServiceUrl, privacyPolicyUrl, selectedWalletConnector: walletConnector, } = useInternalDynamicContext();
+    if (walletConnector && !isEmailWalletConnector(walletConnector)) {
+        throw new Error('Wallet connector is not email provider');
+    }
+    const emailConnector = walletConnector;
+    const onClickResetEmail = useCallback(() => __awaiter(void 0, void 0, void 0, function* () {
+        var _a;
+        yield ((_a = emailConnector === null || emailConnector === void 0 ? void 0 : emailConnector.endSession) === null || _a === void 0 ? void 0 : _a.call(emailConnector));
+        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, {}) }))] })));
+};
+
+export { EmailConfirmationWaitingView };

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

@@ -0,0 +1,80 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var _tslib = require('../../../../_virtual/_tslib.cjs');
+var jsxRuntime = require('react/jsx-runtime');
+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('@dynamic-labs/multi-wallet');
+var ViewContext = require('../../context/ViewContext/ViewContext.cjs');
+var chevronLeft = require('../../shared/assets/chevron-left.cjs');
+require('../../utils/constants/colors.cjs');
+require('../../shared/consts/index.cjs');
+var useInternalDynamicContext = require('../../context/DynamicContext/useInternalDynamicContext.cjs');
+require('../../components/ShadowDOM/ShadowDOM.cjs');
+require('../../context/ThemeContext/ThemeContext.cjs');
+var Input = require('../../components/Input/Input.cjs');
+require('react-dom');
+require('react-focus-lock');
+require('../../components/Transition/ZoomTransition/ZoomTransition.cjs');
+require('../../components/Transition/SlideInUpTransition/SlideInUpTransition.cjs');
+require('../../components/Transition/OpacityTransition/OpacityTransition.cjs');
+var api = require('../../data/api.cjs');
+var ErrorContext = require('../../context/ErrorContext/ErrorContext.cjs');
+require('ethers');
+require('../../context/MockContext/MockContext.cjs');
+require('../../context/CaptchaContext/CaptchaContext.cjs');
+require('../../utils/hooks/useUserUpdateRequest/useUserUpdateRequest.cjs');
+var Button = require('../../components/Button/Button.cjs');
+var IconButton = require('../../components/IconButton/IconButton.cjs');
+var EmailVerificationContext = require('../../context/EmailVerificationContext/EmailVerificationContext.cjs');
+var LoadingContext = require('../../context/LoadingContext/LoadingContext.cjs');
+
+const EmailUpdate = () => {
+    const [updatedEmail, setUpdatedEmail] = React.useState('');
+    const { setError, setErrorMessage } = ErrorContext.useErrorContext();
+    const { loading, setLoading } = LoadingContext.useLoadingContext();
+    const { setView } = ViewContext.useViewContext();
+    const { email, setEmail, setVerificationUUID } = EmailVerificationContext.useEmailVerificationContext();
+    const { environmentId, handleLogOut, onboardingOnlyJwt } = useInternalDynamicContext.useInternalDynamicContext();
+    const handleBackClick = () => {
+        setView('verify-email');
+        setError(undefined);
+    };
+    const handleEmailUpdate = () => _tslib.__awaiter(void 0, void 0, void 0, function* () {
+        try {
+            if (!updatedEmail) {
+                return;
+            }
+            setLoading(true);
+            const { emailVerification } = yield api.updateUserProfileFields(onboardingOnlyJwt, environmentId, { email: updatedEmail });
+            if (!emailVerification) {
+                yield handleLogOut();
+                setView('wallet-list');
+                return;
+            }
+            setError(undefined);
+            setView('verify-email');
+            setEmail(emailVerification.email);
+            setVerificationUUID(emailVerification.verificationUUID);
+        }
+        catch (error) {
+            setErrorMessage(error.code);
+        }
+        finally {
+            setLoading(false);
+        }
+    });
+    return (jsxRuntime.jsxs("div", Object.assign({ className: 'email-update__container' }, { children: [jsxRuntime.jsx("div", Object.assign({ className: 'email-update__header' }, { children: jsxRuntime.jsx(IconButton.IconButton, Object.assign({ type: 'button', onClick: handleBackClick, "data-testid": 'back-button' }, { children: jsxRuntime.jsx(chevronLeft.ReactComponent, {}) })) })), jsxRuntime.jsx(iconic.SignInWithEmailIcon, { style: {
+                    height: '3.125rem',
+                    width: '3.125rem',
+                }, className: 'email-update__icon' }), jsxRuntime.jsx(Typography.Typography, Object.assign({ weight: 'medium', variant: 'title', className: 'email-update__title' }, { children: "Update Email" })), jsxRuntime.jsxs("div", Object.assign({ className: 'email-update__copy-text-container' }, { children: [jsxRuntime.jsx(Typography.Typography, Object.assign({ variant: 'body_normal', weight: 'regular', color: 'secondary' }, { children: "Your current email address is" })), jsxRuntime.jsx(Typography.Typography, Object.assign({ variant: 'body_normal', weight: 'bold', color: 'secondary' }, { children: email }))] })), jsxRuntime.jsx(Input.Input, { id: 'email_field', onChange: (e) => {
+                    setUpdatedEmail(e.target.value);
+                }, type: 'email', label: 'Email address', className: 'email-update__input' }), jsxRuntime.jsx(Button.Button, Object.assign({ buttonVariant: 'primary', buttonPadding: 'medium', buttonClassName: 'email-update__button', onClick: () => handleEmailUpdate(), loading: loading }, { children: "Send Verification Code" }))] })));
+};
+
+exports.EmailUpdate = EmailUpdate;

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

@@ -0,0 +1,76 @@
+import { __awaiter } from '../../../../_virtual/_tslib.js';
+import { jsxs, jsx } from 'react/jsx-runtime';
+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 '@dynamic-labs/multi-wallet';
+import { useViewContext } from '../../context/ViewContext/ViewContext.js';
+import { ReactComponent as SvgChevronLeft } from '../../shared/assets/chevron-left.js';
+import '../../utils/constants/colors.js';
+import '../../shared/consts/index.js';
+import { useInternalDynamicContext } from '../../context/DynamicContext/useInternalDynamicContext.js';
+import '../../components/ShadowDOM/ShadowDOM.js';
+import '../../context/ThemeContext/ThemeContext.js';
+import { Input } from '../../components/Input/Input.js';
+import 'react-dom';
+import 'react-focus-lock';
+import '../../components/Transition/ZoomTransition/ZoomTransition.js';
+import '../../components/Transition/SlideInUpTransition/SlideInUpTransition.js';
+import '../../components/Transition/OpacityTransition/OpacityTransition.js';
+import { updateUserProfileFields } from '../../data/api.js';
+import { useErrorContext } from '../../context/ErrorContext/ErrorContext.js';
+import 'ethers';
+import '../../context/MockContext/MockContext.js';
+import '../../context/CaptchaContext/CaptchaContext.js';
+import '../../utils/hooks/useUserUpdateRequest/useUserUpdateRequest.js';
+import { Button } from '../../components/Button/Button.js';
+import { IconButton } from '../../components/IconButton/IconButton.js';
+import { useEmailVerificationContext } from '../../context/EmailVerificationContext/EmailVerificationContext.js';
+import { useLoadingContext } from '../../context/LoadingContext/LoadingContext.js';
+
+const EmailUpdate = () => {
+    const [updatedEmail, setUpdatedEmail] = useState('');
+    const { setError, setErrorMessage } = useErrorContext();
+    const { loading, setLoading } = useLoadingContext();
+    const { setView } = useViewContext();
+    const { email, setEmail, setVerificationUUID } = useEmailVerificationContext();
+    const { environmentId, handleLogOut, onboardingOnlyJwt } = useInternalDynamicContext();
+    const handleBackClick = () => {
+        setView('verify-email');
+        setError(undefined);
+    };
+    const handleEmailUpdate = () => __awaiter(void 0, void 0, void 0, function* () {
+        try {
+            if (!updatedEmail) {
+                return;
+            }
+            setLoading(true);
+            const { emailVerification } = yield updateUserProfileFields(onboardingOnlyJwt, environmentId, { email: updatedEmail });
+            if (!emailVerification) {
+                yield handleLogOut();
+                setView('wallet-list');
+                return;
+            }
+            setError(undefined);
+            setView('verify-email');
+            setEmail(emailVerification.email);
+            setVerificationUUID(emailVerification.verificationUUID);
+        }
+        catch (error) {
+            setErrorMessage(error.code);
+        }
+        finally {
+            setLoading(false);
+        }
+    });
+    return (jsxs("div", Object.assign({ className: 'email-update__container' }, { children: [jsx("div", Object.assign({ className: 'email-update__header' }, { children: jsx(IconButton, Object.assign({ type: 'button', onClick: handleBackClick, "data-testid": 'back-button' }, { children: jsx(SvgChevronLeft, {}) })) })), jsx(SignInWithEmailIcon, { style: {
+                    height: '3.125rem',
+                    width: '3.125rem',
+                }, className: 'email-update__icon' }), jsx(Typography, Object.assign({ weight: 'medium', variant: 'title', className: 'email-update__title' }, { children: "Update Email" })), jsxs("div", Object.assign({ className: 'email-update__copy-text-container' }, { children: [jsx(Typography, Object.assign({ variant: 'body_normal', weight: 'regular', color: 'secondary' }, { children: "Your current email address is" })), jsx(Typography, Object.assign({ variant: 'body_normal', weight: 'bold', color: 'secondary' }, { children: email }))] })), jsx(Input, { id: 'email_field', onChange: (e) => {
+                    setUpdatedEmail(e.target.value);
+                }, type: 'email', label: 'Email address', className: 'email-update__input' }), jsx(Button, Object.assign({ buttonVariant: 'primary', buttonPadding: 'medium', buttonClassName: 'email-update__button', onClick: () => handleEmailUpdate(), loading: loading }, { children: "Send Verification Code" }))] })));
+};
+
+export { EmailUpdate };

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

@@ -0,0 +1,204 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var _tslib = require('../../../../_virtual/_tslib.cjs');
+var jsxRuntime = require('react/jsx-runtime');
+var React = require('react');
+var iconic = require('@dynamic-labs/iconic');
+var Typography = require('../../components/Typography/Typography.cjs');
+var decodeJwt = require('../../shared/utils/functions/decodeJwt/decodeJwt.cjs');
+require('../../shared/logger.cjs');
+require('@dynamic-labs/multi-wallet');
+var ViewContext = require('../../context/ViewContext/ViewContext.cjs');
+var check = require('../../shared/assets/check.cjs');
+var checkCircle = require('../../shared/assets/check-circle.cjs');
+require('../../utils/constants/colors.cjs');
+require('../../shared/consts/index.cjs');
+var useInternalDynamicContext = require('../../context/DynamicContext/useInternalDynamicContext.cjs');
+require('@dynamic-labs/sdk-api');
+require('../../components/ShadowDOM/ShadowDOM.cjs');
+require('../../context/ThemeContext/ThemeContext.cjs');
+var classNames = require('../../utils/functions/classNames/classNames.cjs');
+require('react-dom');
+require('react-focus-lock');
+require('../../components/Transition/ZoomTransition/ZoomTransition.cjs');
+require('../../components/Transition/SlideInUpTransition/SlideInUpTransition.cjs');
+require('../../components/Transition/OpacityTransition/OpacityTransition.cjs');
+var TextButton = require('../../components/TextButton/TextButton.cjs');
+var api = require('../../data/api.cjs');
+var ErrorContext = require('../../context/ErrorContext/ErrorContext.cjs');
+require('ethers');
+require('../../context/MockContext/MockContext.cjs');
+require('../../context/CaptchaContext/CaptchaContext.cjs');
+require('../../utils/hooks/useUserUpdateRequest/useUserUpdateRequest.cjs');
+require('../../components/IconButton/IconButton.cjs');
+var PoweredByDynamic = require('../../components/PoweredByDynamic/PoweredByDynamic.cjs');
+var IconWithSpinner = require('../../components/IconWithSpinner/IconWithSpinner.cjs');
+var ErrorContainer = require('../../components/ErrorContainer/ErrorContainer.cjs');
+var TosAndPp = require('../../components/TosAndPp/TosAndPp.cjs');
+var PinField = require('../../components/PinField/PinField.cjs');
+var IconWithStatus = require('../../components/IconWithStatus/IconWithStatus.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 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 } = ViewContext.useViewContext();
+    const { error, setError, setErrorMessage } = ErrorContext.useErrorContext();
+    const { environmentId, onboardingOnlyJwt, handleLogOut, termsOfServiceUrl, privacyPolicyUrl, authToken, setOnboardingOnlyJwt, setShowAuthFlow, setCallback, } = useInternalDynamicContext.useInternalDynamicContext();
+    const { email, verificationUUID, setVerificationUUID } = EmailVerificationContext.useEmailVerificationContext();
+    const { loading, setLoading } = LoadingContext.useLoadingContext();
+    const isLoginView = view === 'login-with-email-verification';
+    const { verifyEmail } = useEmailVerificationRequest.useEmailVerificationRequest();
+    const { createUserProfileByJWT } = useCreateUserProfileByJWTCallback.useCreateUserProfileByJWTCallback();
+    const handleComplete = React.useCallback((verificationToken) => _tslib.__awaiter(void 0, void 0, void 0, function* () {
+        setError(undefined);
+        setLoading(true);
+        if (!verificationUUID || (!authToken && !onboardingOnlyJwt)) {
+            yield handleLogOut();
+            setView('wallet-list');
+            return;
+        }
+        try {
+            const { nextView } = yield verifyEmail(verificationToken, verificationUUID);
+            if (onboardingOnlyJwt) {
+                setOnboardingOnlyJwt(undefined);
+            }
+            setIsValidated(true);
+            if (nextView === 'verified-and-transferred') {
+                setShowTransferMessage(true);
+            }
+            setShowAuthFlow(false);
+        }
+        catch (error) {
+            setErrorMessage(error.code);
+        }
+        finally {
+            setLoading(false);
+        }
+    }), [
+        setError,
+        setLoading,
+        verificationUUID,
+        authToken,
+        onboardingOnlyJwt,
+        handleLogOut,
+        setView,
+        verifyEmail,
+        setShowAuthFlow,
+        setOnboardingOnlyJwt,
+        setErrorMessage,
+    ]);
+    const handleEmailLogin = React.useCallback((verificationToken) => _tslib.__awaiter(void 0, void 0, void 0, function* () {
+        setError(undefined);
+        setLoading(true);
+        if (!verificationUUID) {
+            yield handleLogOut();
+            setView('wallet-list');
+            return;
+        }
+        try {
+            const { jwt } = yield api.signInWithEmailVerification({
+                environmentId,
+                verificationToken,
+                verificationUUID,
+            });
+            if (!jwt) {
+                yield handleLogOut();
+                setView('wallet-list');
+                return;
+            }
+            const decodedJwt = decodeJwt.decodeJwt(jwt);
+            setCallback('authSuccess');
+            setIsValidated(true);
+            if (decodedJwt === null || decodedJwt === void 0 ? void 0 : decodedJwt.missingFields.length) {
+                setOnboardingOnlyJwt(jwt);
+                setTimeout(() => {
+                    setView('collect-user-data-login-with-email');
+                }, 1500);
+                return;
+            }
+            // this timeout is set to make sure that the user will see success message
+            setTimeout(() => {
+                createUserProfileByJWT(jwt);
+                setShowAuthFlow(false);
+            }, 1500);
+        }
+        catch (error) {
+            setErrorMessage(error.code);
+        }
+        finally {
+            setLoading(false);
+        }
+    }), [
+        setError,
+        setLoading,
+        verificationUUID,
+        handleLogOut,
+        setView,
+        environmentId,
+        setCallback,
+        setOnboardingOnlyJwt,
+        createUserProfileByJWT,
+        setShowAuthFlow,
+        setErrorMessage,
+    ]);
+    const handleRetry = () => _tslib.__awaiter(void 0, void 0, void 0, function* () {
+        try {
+            if (!verificationUUID || !email) {
+                return;
+            }
+            setLoading(true);
+            const { verificationUUID: newVerificationUUID } = yield api.retryEmailVerification({
+                email,
+                environmentId,
+                verificationUUID,
+            });
+            setVerificationUUID(newVerificationUUID);
+            setRetried(true);
+            setError(undefined);
+        }
+        catch (error) {
+            setErrorMessage(error.code);
+            if (error.code === 'too_many_email_verification_attempts') {
+                setHideRetryButton(true);
+            }
+            if (error.code === 'invalid_email_verification') {
+                setView(isLoginView ? 'login-with-email-or-wallet' : 'wallet-list');
+            }
+        }
+        finally {
+            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: 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, {})] })));
+};
+
+exports.EmailVerification = EmailVerification;