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

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;

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

@@ -0,0 +1,200 @@
+import { __awaiter } from '../../../../_virtual/_tslib.js';
+import { jsxs, jsx, Fragment } from 'react/jsx-runtime';
+import { useState, useCallback, useEffect } from 'react';
+import { SignInWithEmailIcon } from '@dynamic-labs/iconic';
+import { Typography } from '../../components/Typography/Typography.js';
+import { decodeJwt } from '../../shared/utils/functions/decodeJwt/decodeJwt.js';
+import '../../shared/logger.js';
+import '@dynamic-labs/multi-wallet';
+import { useViewContext } from '../../context/ViewContext/ViewContext.js';
+import { ReactComponent as SvgCheck } from '../../shared/assets/check.js';
+import { ReactComponent as SvgCheckCircle } from '../../shared/assets/check-circle.js';
+import '../../utils/constants/colors.js';
+import '../../shared/consts/index.js';
+import { useInternalDynamicContext } from '../../context/DynamicContext/useInternalDynamicContext.js';
+import '@dynamic-labs/sdk-api';
+import '../../components/ShadowDOM/ShadowDOM.js';
+import '../../context/ThemeContext/ThemeContext.js';
+import { classNames } from '../../utils/functions/classNames/classNames.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 { signInWithEmailVerification, retryEmailVerification } 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 '../../components/IconButton/IconButton.js';
+import { PoweredByDynamic } from '../../components/PoweredByDynamic/PoweredByDynamic.js';
+import { IconWithSpinner } from '../../components/IconWithSpinner/IconWithSpinner.js';
+import { ErrorContainer } from '../../components/ErrorContainer/ErrorContainer.js';
+import { TosAndPp } from '../../components/TosAndPp/TosAndPp.js';
+import { PinField } from '../../components/PinField/PinField.js';
+import { IconWithStatus } from '../../components/IconWithStatus/IconWithStatus.js';
+import { useEmailVerificationContext } from '../../context/EmailVerificationContext/EmailVerificationContext.js';
+import { useLoadingContext } from '../../context/LoadingContext/LoadingContext.js';
+import { useEmailVerificationRequest } from '../../utils/hooks/authenticationHooks/useEmailVerificationRequest/useEmailVerificationRequest.js';
+import { useCreateUserProfileByJWTCallback } from '../../utils/hooks/useCreateUserProfileByJWTCallback/useCreateUserProfileByJWTCallback.js';
+
+const secondsToRetry = 15;
+const EmailVerification = () => {
+    const [hideRetryButton, setHideRetryButton] = useState(false);
+    const [count, setCount] = useState(secondsToRetry);
+    const [retried, setRetried] = useState(false);
+    const [isValidated, setIsValidated] = useState(false);
+    const [showTransferMessage, setShowTransferMessage] = useState(false);
+    const { view, setView } = useViewContext();
+    const { error, setError, setErrorMessage } = useErrorContext();
+    const { environmentId, onboardingOnlyJwt, handleLogOut, termsOfServiceUrl, privacyPolicyUrl, authToken, setOnboardingOnlyJwt, setShowAuthFlow, setCallback, } = useInternalDynamicContext();
+    const { email, verificationUUID, setVerificationUUID } = useEmailVerificationContext();
+    const { loading, setLoading } = useLoadingContext();
+    const isLoginView = view === 'login-with-email-verification';
+    const { verifyEmail } = useEmailVerificationRequest();
+    const { createUserProfileByJWT } = useCreateUserProfileByJWTCallback();
+    const handleComplete = useCallback((verificationToken) => __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 = useCallback((verificationToken) => __awaiter(void 0, void 0, void 0, function* () {
+        setError(undefined);
+        setLoading(true);
+        if (!verificationUUID) {
+            yield handleLogOut();
+            setView('wallet-list');
+            return;
+        }
+        try {
+            const { jwt } = yield signInWithEmailVerification({
+                environmentId,
+                verificationToken,
+                verificationUUID,
+            });
+            if (!jwt) {
+                yield handleLogOut();
+                setView('wallet-list');
+                return;
+            }
+            const decodedJwt = 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 = () => __awaiter(void 0, void 0, void 0, function* () {
+        try {
+            if (!verificationUUID || !email) {
+                return;
+            }
+            setLoading(true);
+            const { verificationUUID: newVerificationUUID } = yield 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);
+        }
+    });
+    useEffect(() => {
+        /* istanbul ignore next */
+        setCount(secondsToRetry);
+        const timeout = setTimeout(() => {
+            if (retried)
+                setRetried(false);
+        }, secondsToRetry * 1000);
+        return () => clearTimeout(timeout);
+    }, [retried]);
+    useEffect(() => {
+        /* istanbul ignore next */
+        const timeout = setTimeout(() => {
+            if (count)
+                setCount((prev) => prev - 1);
+        }, 1000);
+        return () => clearTimeout(timeout);
+    }, [count]);
+    return (jsxs("div", Object.assign({ className: 'email-verification__container' }, { children: [error && (jsx(ErrorContainer, Object.assign({ withIcon: false, className: 'email-verification__error-message' }, { children: error }))), showTransferMessage && (jsx("div", Object.assign({ className: 'email-verification__transfer-message' }, { children: "Verification complete, the email is now verified to this account." }))), isValidated ? (jsx("div", Object.assign({ className: 'email-verification__icon-container' }, { children: jsx(IconWithStatus, { containerClassName: 'email-verification__icon--verified', Icon: SignInWithEmailIcon, iconSize: 50, InnerIcon: SvgCheck }) }))) : (jsx(IconWithSpinner, { className: classNames({
+                    'email-verification__icon-with-spinner': Boolean(!error),
+                }), Icon: SignInWithEmailIcon, iconSize: 80, isSpinning: true })), jsx(Typography, Object.assign({ weight: 'medium', variant: 'title', className: 'email-verification__title', color: 'primary' }, { children: "Confirm verification code" })), jsxs("div", Object.assign({ className: 'email-verification__copy-text-container' }, { children: [jsx(Typography, Object.assign({ variant: 'body_normal', weight: 'regular', color: 'secondary' }, { children: "We\u2019ve sent a verification code to" })), jsx(Typography, Object.assign({ variant: 'body_normal', weight: 'bold', color: 'secondary' }, { children: email }))] })), !isLoginView && (jsx(TextButton, Object.assign({ onClick: () => setView('update-email'), className: 'email-verification__text-button', disabled: loading }, { children: "Edit email" }))), jsx(PinField, { initialValue: Array(6).join('.').split('.'), isLoading: loading, handleComplete: isLoginView ? handleEmailLogin : handleComplete, isValidated: isValidated, inputMode: 'numeric', pattern: '[0-9]*', hasError: Boolean(error), onChange: () => setError(undefined) }), retried ? (jsxs(Fragment, { children: [jsxs(Typography, Object.assign({ variant: 'body_small', color: 'secondary' }, { children: ["Re-send code in ", count] })), jsxs("span", Object.assign({ className: 'email-verification__retry-container' }, { children: [jsx(SvgCheckCircle, {}), jsx(Typography, Object.assign({ variant: 'body_small', weight: 'medium', color: 'primary', className: 'email-verification__retry-container-text' }, { children: "Code sent" }))] }))] })) : (!hideRetryButton && (jsxs(Fragment, { children: [jsx(Typography, Object.assign({ variant: 'body_small', weight: 'medium', color: 'secondary' }, { children: "Did not receive your code yet?" })), jsx(TextButton, Object.assign({ className: 'email-verification__text-button', disabled: loading || isValidated, onClick: () => handleRetry() }, { children: "Re-send code" }))] }))), !isLoginView && (jsx(TextButton, Object.assign({ className: 'email-verification__log-out', onClick: () => handleLogOut() }, { children: "Log out" }))), termsOfServiceUrl && privacyPolicyUrl && isLoginView && (jsx(TosAndPp, { mode: 'logging in', privacyPolicyUrl: privacyPolicyUrl, termsOfServiceUrl: termsOfServiceUrl })), jsx(PoweredByDynamic, {})] })));
+};
+
+export { EmailVerification };

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

@@ -0,0 +1,55 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var jsxRuntime = require('react/jsx-runtime');
+var React = require('react');
+var multiWallet = require('@dynamic-labs/multi-wallet');
+var useInternalDynamicContext = require('../../context/DynamicContext/useInternalDynamicContext.cjs');
+var ViewContext = require('../../context/ViewContext/ViewContext.cjs');
+require('@dynamic-labs/sdk-api');
+require('../../config/ApiEndpoint.cjs');
+require('../../shared/logger.cjs');
+require('@dynamic-labs/iconic');
+require('../../utils/constants/colors.cjs');
+require('../../shared/consts/index.cjs');
+require('../../context/ErrorContext/ErrorContext.cjs');
+require('react-dom');
+require('../../components/ShadowDOM/ShadowDOM.cjs');
+require('../../context/ThemeContext/ThemeContext.cjs');
+require('react-focus-lock');
+require('../../components/Transition/ZoomTransition/ZoomTransition.cjs');
+require('../../components/Transition/SlideInUpTransition/SlideInUpTransition.cjs');
+require('../../components/Transition/OpacityTransition/OpacityTransition.cjs');
+require('../../components/IconButton/IconButton.cjs');
+var OTPVerificationView = require('../../components/OTPVerificationView/OTPVerificationView.cjs');
+require('ethers');
+require('../../context/MockContext/MockContext.cjs');
+require('../../context/CaptchaContext/CaptchaContext.cjs');
+var useMutation = require('../../utils/hooks/useMutation/useMutation.cjs');
+require('../../utils/hooks/useUserUpdateRequest/useUserUpdateRequest.cjs');
+
+const EmailWalletOTPVerificationView = () => {
+    const { setView } = ViewContext.useViewContext();
+    const [error, setError] = React.useState();
+    const { selectedWalletConnector: emailWalletConnector, termsOfServiceUrl, privacyPolicyUrl, clearStatesOnBackClick, } = useInternalDynamicContext.useInternalDynamicContext();
+    if (!emailWalletConnector ||
+        !multiWallet.isEmailOTPWalletConnector(emailWalletConnector)) {
+        throw new Error('Current wallet is not EmailWalletConnector');
+    }
+    const { email } = emailWalletConnector;
+    if (!email) {
+        throw new Error('EmailWalletOtpVerificationView requires a email');
+    }
+    const handleBackClick = () => {
+        emailWalletConnector.cancelPreviousEmail();
+        clearStatesOnBackClick();
+        setView('login-with-email-or-wallet');
+    };
+    const { data: isValid, isLoading, mutate: onSubmit, } = useMutation.useMutation((otp) => emailWalletConnector.verifyOneTimePassword(otp), {
+        onFailure: (error) => setError(error),
+    });
+    return (jsxRuntime.jsx(OTPVerificationView.OTPVerificationView, { email: email, error: error, onClickBack: handleBackClick, isLoading: isLoading, onPinComplete: onSubmit, isValid: isValid === true, termsOfServiceUrl: termsOfServiceUrl, privacyPolicyUrl: privacyPolicyUrl, onPinChange: () => setError(undefined), onClickEditEmail: handleBackClick, displayPoweredByDynamic: true }));
+};
+
+exports.EmailWalletOTPVerificationView = EmailWalletOTPVerificationView;