@dynamic-labs/sdk-react-core 1.1.0-alpha.0 → 1.1.0-alpha.10

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

@@ -4,6 +4,7 @@ import { useState, useRef, useCallback, useMemo } from 'react';
 import { useTranslation } from 'react-i18next';
 import { UserHasAccountWithEmailError, NoAccessError, AccountExistsError, sleep } from '@dynamic-labs/utils';
 import { classNames } from '../../utils/functions/classNames/classNames.js';
+import { dynamicEvents } from '../../events/dynamicEvents.js';
 import { useInternalDynamicContext } from '../../context/DynamicContext/useInternalDynamicContext.js';
 import '@dynamic-labs/wallet-connector-core';
 import '../../context/CaptchaContext/CaptchaContext.js';
@@ -23,6 +24,8 @@ import { useEffectOnce } from '../../shared/utils/hooks/useEffectOnce/useEffectO
 import '../../shared/consts/index.js';
 import '@dynamic-labs/multi-wallet';
 import '@dynamic-labs/sdk-api';
+import { isTurnkeyEnabled } from '../../utils/functions/isTurnkeyEnabled/isTurnkeyEnabled.js';
+import { storeAuthToken } from '../../utils/functions/storeAuthToken/index.js';
 import '../../context/AccessDeniedContext/AccessDeniedContext.js';
 import { useAccountExistsContext } from '../../context/AccountExistsContext/AccountExistsContext.js';
 import { signInWithEmailVerification, retryEmailVerification } from '../../data/api.js';
@@ -50,9 +53,10 @@ import '../../context/QrCodeContext/QrCodeContext.js';
 import { Typography } from '../../components/Typography/Typography.js';
 import '../../context/WalletGroupContext/WalletGroupContext.js';
 import '../../widgets/DynamicWidget/components/DynamicWidgetHeader/DynamicWidgetHeader.js';
+import 'react-focus-lock';
 import { IconWithSpinner } from '../../components/IconWithSpinner/IconWithSpinner.js';
-import 'qrcode';
 import { useLoadingContext } from '../../context/LoadingContext/LoadingContext.js';
+import 'qrcode';
 import { IconWithStatus } from '../../components/IconWithStatus/IconWithStatus.js';
 import 'i18next';
 import '../../widgets/DynamicWidget/context/DynamicWidgetContext.js';
@@ -71,7 +75,6 @@ import { shortenEmail } from '../../shared/utils/functions/shortenEmail/shortenE
 import { PinField } from '../../components/PinField/PinField.js';
 import '../../components/Popper/Popper/Popper.js';
 import '../../components/Popper/PopperContext/PopperContext.js';
-import 'react-focus-lock';
 import { useEmailVerificationContext } from '../../context/EmailVerificationContext/EmailVerificationContext.js';
 
 const SECONDS_TO_RETRY = 15;
@@ -96,6 +99,7 @@ const EmailVerification = () => {
     const { loading, setLoading } = useLoadingContext();
     const { t } = useTranslation();
     const { createEmbeddedWallet } = useEmbeddedWallet();
+    const isTurnkeyProviderEnabled = isTurnkeyEnabled(projectSettings);
     const { remainingSeconds, startCountdown } = useCountdown({
         callback: () => setRetried(false),
         seconds: SECONDS_TO_RETRY,
@@ -105,10 +109,7 @@ const EmailVerification = () => {
     useOnUnmount(() => {
         if (!callCallbackOnUnmount.current)
             return;
-        const callback = isValidatedRef.current
-            ? 'emailVerificationSuccess'
-            : 'emailVerificationFailure';
-        setCallback(callback, { email: email !== null && email !== void 0 ? email : '' });
+        dynamicEvents.emit('emailVerificationResult', isValidatedRef.current, email !== null && email !== void 0 ? email : '');
     });
     useEffectOnce(() => {
         // Set verification in progress
@@ -128,7 +129,7 @@ const EmailVerification = () => {
             return;
         }
         try {
-            const { nextView } = yield verifyEmail(verificationToken, verificationUUID);
+            const { nextView, jwt } = yield verifyEmail(verificationToken, verificationUUID);
             if (onboardingOnlyJwt) {
                 setOnboardingOnlyJwt(undefined);
                 setCallback('authSuccess');
@@ -137,18 +138,20 @@ const EmailVerification = () => {
             if (nextView === 'verified-and-transferred') {
                 setShowTransferMessage(true);
             }
-            if (!((_c = projectSettings === null || projectSettings === void 0 ? void 0 : projectSettings.sdk) === null || _c === void 0 ? void 0 : _c.automaticEmbeddedWalletCreation)) {
-                setShowAuthFlow(false);
+            if (isTurnkeyProviderEnabled &&
+                ((_c = projectSettings === null || projectSettings === void 0 ? void 0 : projectSettings.sdk) === null || _c === void 0 ? void 0 : _c.automaticEmbeddedWalletCreation)) {
+                try {
+                    storeAuthToken(jwt);
+                    // this function will check turnkey wallet enabled and create wallet if needed
+                    // if not enabled, it will throw an error.
+                    yield createEmbeddedWallet();
+                }
+                catch (e) {
+                    setShowAuthFlow(false, { emitCancelAuth: true });
+                }
                 return;
             }
-            try {
-                // this function will check turnkey wallet enabled and create wallet if needed
-                // if not enabled, it will throw an error.
-                yield createEmbeddedWallet();
-            }
-            catch (e) {
-                setShowAuthFlow(false);
-            }
+            setShowAuthFlow(false);
         }
         catch (error) {
             logger.debug(error);
@@ -176,8 +179,8 @@ const EmailVerification = () => {
         (_a = projectSettings === null || projectSettings === void 0 ? void 0 : projectSettings.sdk) === null || _a === void 0 ? void 0 : _a.automaticEmbeddedWalletCreation,
         createEmbeddedWallet,
         setShowAuthFlow,
-        setErrorMessage,
         setView,
+        isTurnkeyProviderEnabled,
     ]);
     const handleEmailLogin = useCallback((verificationToken) => __awaiter(void 0, void 0, void 0, function* () {
         var _d;
@@ -210,19 +213,24 @@ const EmailVerification = () => {
             setCallback('authSuccess');
             // this timeout is set to make sure that the user will see success message
             yield sleepToShowSuccessMessage();
-            yield createUserProfileByJWT(jwt);
-            if (!((_d = projectSettings === null || projectSettings === void 0 ? void 0 : projectSettings.sdk) === null || _d === void 0 ? void 0 : _d.automaticEmbeddedWalletCreation)) {
-                setShowAuthFlow(false);
+            if (isTurnkeyProviderEnabled &&
+                ((_d = projectSettings === null || projectSettings === void 0 ? void 0 : projectSettings.sdk) === null || _d === void 0 ? void 0 : _d.automaticEmbeddedWalletCreation)) {
+                try {
+                    // Store the auth token in local storage so it can be used during embedded wallet creation
+                    storeAuthToken(jwt);
+                    // this function will check turnkey wallet enabled and create wallet if needed
+                    // if not enabled, it will throw an error.
+                    yield createEmbeddedWallet();
+                }
+                catch (e) {
+                    yield createUserProfileByJWT(jwt);
+                    setShowAuthFlow(false);
+                }
                 return;
             }
-            try {
-                // this function will check turnkey wallet enabled and create wallet if needed
-                // if not enabled, it will throw an error.
-                yield createEmbeddedWallet();
-            }
-            catch (e) {
-                setShowAuthFlow(false);
-            }
+            // If not creating embedded wallet automatically, create user profile
+            yield createUserProfileByJWT(jwt);
+            setShowAuthFlow(false);
         }
         catch (error) {
             if (error instanceof NoAccessError) {
@@ -254,6 +262,7 @@ const EmailVerification = () => {
         setShowAuthFlow,
         setErrorMessage,
         setExistentAccountData,
+        isTurnkeyProviderEnabled,
     ]);
     const handleRetry = () => __awaiter(void 0, void 0, void 0, function* () {
         try {
@@ -296,7 +305,7 @@ const EmailVerification = () => {
     }, []);
     return (jsxs(Fragment, { children: [error && (jsx(ErrorContainer, { withIcon: false, className: 'email-verification__error-message', children: error })), jsxs("div", { className: classNames('email-verification__container', {
                     'email-verification__container--error': Boolean(error),
-                }), children: [showTransferMessage && (jsx("div", { className: 'email-verification__transfer-message', children: t('dyn_email_verification.complete') })), isValidated ? (jsx("div", { className: 'email-verification__icon-container', children: jsx(IconWithStatus, { containerClassName: 'email-verification__icon--verified', Icon: EmailIcon, iconSize: 64, InnerIcon: SvgCheck }) })) : (jsx(IconWithSpinner, { Icon: EmailIcon, iconSize: 96, isSpinning: true, className: 'email-verification__icon-with-spinner' })), jsxs("div", { className: 'email-verification__copy-text-container', children: [jsx(Typography, { variant: 'body_normal', weight: 'regular', color: 'secondary', children: t('dyn_email_verification.description') }), jsx(Typography, { variant: 'body_normal', weight: 'bold', color: 'secondary', children: shortenEmail(email) })] }), !isLoginView && !isValidated && (jsx(TextButton, { onClick: updateEmail, className: 'email-verification__text-button', disabled: loading, children: t('dyn_email_verification.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: [jsx(Typography, { variant: 'body_small', color: 'secondary', className: 'email-verification__retry-text', children: t('dyn_email_verification.resend_code_in', { remainingSeconds }) }), jsxs("span", { className: 'email-verification__retry-container', children: [jsx(SvgCheckCircle, {}), jsx(Typography, { variant: 'body_small', weight: 'medium', color: 'primary', className: 'email-verification__retry-container-text', children: t('dyn_email_verification.code_sent') })] })] })) : (!hideRetryButton && (jsxs(Fragment, { children: [jsx(Typography, { className: 'email-verification__retry-copy', variant: 'body_small', weight: 'medium', color: 'secondary', children: t('dyn_email_verification.code_not_received') }), jsx(TextButton, { className: 'email-verification__text-button', disabled: loading || isValidated, onClick: () => handleRetry(), children: t('dyn_email_verification.resend_code') })] }))), !isLoginView && (jsx(TextButton, { className: 'email-verification__log-out', onClick: handleLogOut, children: t('dyn_email_verification.log_out_button') }))] })] }));
+                }), children: [showTransferMessage && (jsx("div", { className: 'email-verification__transfer-message', copykey: 'dyn_email_verification.complete', children: t('dyn_email_verification.complete') })), isValidated ? (jsx("div", { className: 'email-verification__icon-container', children: jsx(IconWithStatus, { containerClassName: 'email-verification__icon--verified', Icon: EmailIcon, iconSize: 64, InnerIcon: SvgCheck }) })) : (jsx(IconWithSpinner, { Icon: EmailIcon, iconSize: 96, isSpinning: true, className: 'email-verification__icon-with-spinner' })), jsxs("div", { className: 'email-verification__copy-text-container', children: [jsx(Typography, { variant: 'body_normal', weight: 'regular', color: 'secondary', copykey: 'dyn_email_verification.description', children: t('dyn_email_verification.description') }), jsx(Typography, { variant: 'body_normal', weight: 'bold', color: 'secondary', children: shortenEmail(email) })] }), !isLoginView && !isValidated && (jsx(TextButton, { onClick: updateEmail, className: 'email-verification__text-button', disabled: loading, copykey: 'dyn_email_verification.edit_email', children: t('dyn_email_verification.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: [jsx(Typography, { variant: 'body_small', color: 'secondary', className: 'email-verification__retry-text', copykey: 'dyn_email_verification.resend_code_in', children: t('dyn_email_verification.resend_code_in', { remainingSeconds }) }), jsxs("span", { className: 'email-verification__retry-container', children: [jsx(SvgCheckCircle, {}), jsx(Typography, { variant: 'body_small', weight: 'medium', color: 'primary', className: 'email-verification__retry-container-text', copykey: 'dyn_email_verification.code_sent', children: t('dyn_email_verification.code_sent') })] })] })) : (!hideRetryButton && (jsxs(Fragment, { children: [jsx(Typography, { className: 'email-verification__retry-copy', variant: 'body_small', weight: 'medium', color: 'secondary', copykey: 'dyn_email_verification.code_not_received', children: t('dyn_email_verification.code_not_received') }), jsx(TextButton, { className: 'email-verification__text-button', disabled: loading || isValidated, onClick: () => handleRetry(), copykey: 'dyn_email_verification.resend_code', children: t('dyn_email_verification.resend_code') })] }))), !isLoginView && (jsx(TextButton, { className: 'email-verification__log-out', onClick: handleLogOut, copykey: 'dyn_email_verification.log_out_button', children: t('dyn_email_verification.log_out_button') }))] })] }));
 };
 
 export { EmailVerification };

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

@@ -4,10 +4,10 @@ Object.defineProperty(exports, '__esModule', { value: true });
 
 var jsxRuntime = require('react/jsx-runtime');
 var React = require('react');
-var reactI18next = require('react-i18next');
 var walletConnectorCore = require('@dynamic-labs/wallet-connector-core');
 var useInternalDynamicContext = require('../../context/DynamicContext/useInternalDynamicContext.cjs');
 var ViewContext = require('../../context/ViewContext/ViewContext.cjs');
+var dynamicEvents = require('../../events/dynamicEvents.cjs');
 require('@dynamic-labs/utils');
 require('../../context/CaptchaContext/CaptchaContext.cjs');
 require('../../context/ErrorContext/ErrorContext.cjs');
@@ -25,10 +25,11 @@ require('../../context/AccountExistsContext/AccountExistsContext.cjs');
 require('../../config/ApiEndpoint.cjs');
 require('../../context/EmailVerificationContext/EmailVerificationContext.cjs');
 require('react-dom');
-var useMutation = require('../../utils/hooks/useMutation/useMutation.cjs');
 require('../../context/ThemeContext/ThemeContext.cjs');
+var useMutation = require('../../utils/hooks/useMutation/useMutation.cjs');
 require('@dynamic-labs/types');
 require('yup');
+require('react-i18next');
 require('../../context/MockContext/MockContext.cjs');
 require('../../utils/hooks/useUserUpdateRequest/useUpdateUser/useUpdateUser.cjs');
 require('../../context/UserFieldEditorContext/UserFieldEditorContext.cjs');
@@ -53,8 +54,8 @@ require('../../context/FooterAnimationContext/index.cjs');
 require('../../context/QrCodeContext/QrCodeContext.cjs');
 require('../../context/WalletGroupContext/WalletGroupContext.cjs');
 require('../../widgets/DynamicWidget/components/DynamicWidgetHeader/DynamicWidgetHeader.cjs');
-require('qrcode');
 require('../../context/LoadingContext/LoadingContext.cjs');
+require('qrcode');
 require('../../widgets/DynamicWidget/context/DynamicWidgetContext.cjs');
 require('../../components/UserProfile/parts/UserProfileField/components/VerifiedEmailIcon/VerifiedEmailIcon.cjs');
 require('@dynamic-labs/viem-utils');
@@ -63,7 +64,6 @@ require('../../widgets/DynamicWidget/views/ManagePasskeysWidgetView/PasskeyCard/
 const EmailWalletOTPVerificationView = () => {
     const { setView } = ViewContext.useViewContext();
     const [error, setError] = React.useState();
-    const { t } = reactI18next.useTranslation();
     const { selectedWalletConnector: emailWalletConnector, clearStatesOnBackClick, } = useInternalDynamicContext.useInternalDynamicContext();
     if (!emailWalletConnector ||
         !walletConnectorCore.isEmailOTPWalletConnector(emailWalletConnector)) {
@@ -79,9 +79,15 @@ const EmailWalletOTPVerificationView = () => {
         setView('login-with-email-or-wallet');
     };
     const { data: isValid, isLoading, mutate: onSubmit, } = useMutation.useMutation((otp) => emailWalletConnector.verifyOneTimePassword(otp), {
-        onFailure: (error) => setError(error),
+        onFailure: (error) => {
+            setError(error);
+            dynamicEvents.dynamicEvents.emit('emailVerificationResult', false, email);
+        },
+        onSuccess: () => {
+            dynamicEvents.dynamicEvents.emit('emailVerificationResult', true, email);
+        },
     });
-    return (jsxRuntime.jsx(OTPVerificationView.OTPVerificationView, { email: email, error: error, onClickBack: handleBackClick, isLoading: isLoading, onPinComplete: onSubmit, isValid: isValid === true, onPinChange: () => setError(undefined), onClickEditEmail: handleBackClick, successBannerText: t('dyn_otp_verification.banner_text') }));
+    return (jsxRuntime.jsx(OTPVerificationView.OTPVerificationView, { email: email, error: error, onClickBack: handleBackClick, isLoading: isLoading, onPinComplete: onSubmit, isValid: isValid === true, onPinChange: () => setError(undefined), onClickEditEmail: handleBackClick, successBannerTextKey: 'dyn_otp_verification.banner_text' }));
 };
 
 exports.EmailWalletOTPVerificationView = EmailWalletOTPVerificationView;

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

@@ -1,9 +1,9 @@
 import { jsx } from 'react/jsx-runtime';
 import { useState } from 'react';
-import { useTranslation } from 'react-i18next';
 import { isEmailOTPWalletConnector } from '@dynamic-labs/wallet-connector-core';
 import { useInternalDynamicContext } from '../../context/DynamicContext/useInternalDynamicContext.js';
 import { useViewContext } from '../../context/ViewContext/ViewContext.js';
+import { dynamicEvents } from '../../events/dynamicEvents.js';
 import '@dynamic-labs/utils';
 import '../../context/CaptchaContext/CaptchaContext.js';
 import '../../context/ErrorContext/ErrorContext.js';
@@ -21,10 +21,11 @@ import '../../context/AccountExistsContext/AccountExistsContext.js';
 import '../../config/ApiEndpoint.js';
 import '../../context/EmailVerificationContext/EmailVerificationContext.js';
 import 'react-dom';
-import { useMutation } from '../../utils/hooks/useMutation/useMutation.js';
 import '../../context/ThemeContext/ThemeContext.js';
+import { useMutation } from '../../utils/hooks/useMutation/useMutation.js';
 import '@dynamic-labs/types';
 import 'yup';
+import 'react-i18next';
 import '../../context/MockContext/MockContext.js';
 import '../../utils/hooks/useUserUpdateRequest/useUpdateUser/useUpdateUser.js';
 import '../../context/UserFieldEditorContext/UserFieldEditorContext.js';
@@ -49,8 +50,8 @@ import '../../context/FooterAnimationContext/index.js';
 import '../../context/QrCodeContext/QrCodeContext.js';
 import '../../context/WalletGroupContext/WalletGroupContext.js';
 import '../../widgets/DynamicWidget/components/DynamicWidgetHeader/DynamicWidgetHeader.js';
-import 'qrcode';
 import '../../context/LoadingContext/LoadingContext.js';
+import 'qrcode';
 import '../../widgets/DynamicWidget/context/DynamicWidgetContext.js';
 import '../../components/UserProfile/parts/UserProfileField/components/VerifiedEmailIcon/VerifiedEmailIcon.js';
 import '@dynamic-labs/viem-utils';
@@ -59,7 +60,6 @@ import '../../widgets/DynamicWidget/views/ManagePasskeysWidgetView/PasskeyCard/P
 const EmailWalletOTPVerificationView = () => {
     const { setView } = useViewContext();
     const [error, setError] = useState();
-    const { t } = useTranslation();
     const { selectedWalletConnector: emailWalletConnector, clearStatesOnBackClick, } = useInternalDynamicContext();
     if (!emailWalletConnector ||
         !isEmailOTPWalletConnector(emailWalletConnector)) {
@@ -75,9 +75,15 @@ const EmailWalletOTPVerificationView = () => {
         setView('login-with-email-or-wallet');
     };
     const { data: isValid, isLoading, mutate: onSubmit, } = useMutation((otp) => emailWalletConnector.verifyOneTimePassword(otp), {
-        onFailure: (error) => setError(error),
+        onFailure: (error) => {
+            setError(error);
+            dynamicEvents.emit('emailVerificationResult', false, email);
+        },
+        onSuccess: () => {
+            dynamicEvents.emit('emailVerificationResult', true, email);
+        },
     });
-    return (jsx(OTPVerificationView, { email: email, error: error, onClickBack: handleBackClick, isLoading: isLoading, onPinComplete: onSubmit, isValid: isValid === true, onPinChange: () => setError(undefined), onClickEditEmail: handleBackClick, successBannerText: t('dyn_otp_verification.banner_text') }));
+    return (jsx(OTPVerificationView, { email: email, error: error, onClickBack: handleBackClick, isLoading: isLoading, onPinComplete: onSubmit, isValid: isValid === true, onPinChange: () => setError(undefined), onClickEditEmail: handleBackClick, successBannerTextKey: 'dyn_otp_verification.banner_text' }));
 };
 
 export { EmailWalletOTPVerificationView };

package/src/lib/views/EmbeddedReveal/EmbeddedRevealView/EmbeddedRevealView.cjs

@@ -0,0 +1,160 @@
+'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 reactI18next = require('react-i18next');
+var utils = require('@dynamic-labs/utils');
+var getProperErrorMessage = require('../../../modals/SignMessageConfirmationModal/getProperErrorMessage.cjs');
+var dynamicEvents = require('../../../events/dynamicEvents.cjs');
+var useInternalDynamicContext = require('../../../context/DynamicContext/useInternalDynamicContext.cjs');
+require('@dynamic-labs/wallet-connector-core');
+require('../../../context/CaptchaContext/CaptchaContext.cjs');
+require('../../../context/ErrorContext/ErrorContext.cjs');
+var ViewContext = require('../../../context/ViewContext/ViewContext.cjs');
+var decodeJwt = require('../../../shared/utils/functions/decodeJwt/decodeJwt.cjs');
+require('@dynamic-labs/iconic');
+var close = require('../../../shared/assets/close.cjs');
+var eyeOffIcon = require('../../../shared/assets/eye-off-icon.cjs');
+var exportEmbeddedHero = require('../../../shared/assets/export-embedded-hero.cjs');
+var walletV2 = require('../../../shared/assets/wallet-v2.cjs');
+var logger = require('../../../shared/logger.cjs');
+require('@dynamic-labs/wallet-book');
+require('../../../utils/constants/colors.cjs');
+require('../../../shared/utils/classes/storage/localStorage.cjs');
+require('viem');
+require('../../../shared/consts/index.cjs');
+require('@dynamic-labs/multi-wallet');
+require('@dynamic-labs/sdk-api');
+require('../../../context/AccessDeniedContext/AccessDeniedContext.cjs');
+require('../../../context/AccountExistsContext/AccountExistsContext.cjs');
+require('../../../config/ApiEndpoint.cjs');
+require('../../../context/EmailVerificationContext/EmailVerificationContext.cjs');
+require('react-dom');
+require('../../../context/ThemeContext/ThemeContext.cjs');
+var useMutation = require('../../../utils/hooks/useMutation/useMutation.cjs');
+require('@dynamic-labs/types');
+require('yup');
+require('../../../context/MockContext/MockContext.cjs');
+require('../../../utils/hooks/useUserUpdateRequest/useUpdateUser/useUpdateUser.cjs');
+require('../../../context/UserFieldEditorContext/UserFieldEditorContext.cjs');
+require('@dynamic-labs/rpc-providers');
+require('../../../context/UserWalletsContext/UserWalletsContext.cjs');
+require('../../../components/Transition/ZoomTransition/ZoomTransition.cjs');
+require('../../../components/Transition/SlideInUpTransition/SlideInUpTransition.cjs');
+require('../../../components/Transition/OpacityTransition/OpacityTransition.cjs');
+require('../../../components/ShadowDOM/ShadowDOM.cjs');
+require('../../../components/OverlayCard/OverlayCard.context.cjs');
+require('../../../context/FooterAnimationContext/index.cjs');
+require('../../../context/QrCodeContext/QrCodeContext.cjs');
+var Typography = require('../../../components/Typography/Typography.cjs');
+var Badge = require('../../../components/Badge/Badge.cjs');
+require('../../../context/WalletGroupContext/WalletGroupContext.cjs');
+require('../../../widgets/DynamicWidget/components/DynamicWidgetHeader/DynamicWidgetHeader.cjs');
+require('react-focus-lock');
+require('../../../context/LoadingContext/LoadingContext.cjs');
+require('qrcode');
+require('i18next');
+require('../../../widgets/DynamicWidget/context/DynamicWidgetContext.cjs');
+var ErrorContainer = require('../../../components/ErrorContainer/ErrorContainer.cjs');
+require('../../../components/UserProfile/parts/UserProfileField/components/VerifiedEmailIcon/VerifiedEmailIcon.cjs');
+require('formik');
+var Button = require('../../../components/Button/Button.cjs');
+var ModalHeader = require('../../../components/ModalHeader/ModalHeader.cjs');
+var IconButton = require('../../../components/IconButton/IconButton.cjs');
+require('../../../components/Alert/Alert.cjs');
+require('@dynamic-labs/viem-utils');
+require('../../../widgets/DynamicWidget/views/ManagePasskeysWidgetView/PasskeyCard/PasskeyCard.cjs');
+var Checkbox = require('../../../components/Checkbox/Checkbox.cjs');
+require('../../../components/InlineWidget/InlineWidget.cjs');
+require('../../../components/MenuList/Dropdown/Dropdown.cjs');
+require('../../../components/Popper/Popper/Popper.cjs');
+require('../../../components/Popper/PopperContext/PopperContext.cjs');
+var turnkeyExport = require('../utils/turnkeyExport/turnkeyExport.cjs');
+var constants = require('../constants.cjs');
+
+const EmbeddedRevealView = () => {
+    var _a, _b;
+    const { authToken, primaryWallet, user, setShowAuthFlow, environmentId } = useInternalDynamicContext.useInternalDynamicContext();
+    const { view } = ViewContext.useViewContext();
+    const [acknowledgement1, setAcknowledgement1] = React.useState(false);
+    const iframeContainerRef = React.useRef(null);
+    const decodedJwt = decodeJwt.decodeJwt(authToken);
+    const walletProperties = (_b = (_a = decodedJwt === null || decodedJwt === void 0 ? void 0 : decodedJwt.verifiedCredentials) === null || _a === void 0 ? void 0 : _a.find(({ walletName }) => walletName === null || walletName === void 0 ? void 0 : walletName.startsWith('turnkey'))) === null || _b === void 0 ? void 0 : _b.walletProperties;
+    const isTurnkeyHDWallet = walletProperties === null || walletProperties === void 0 ? void 0 : walletProperties.turnkeyHDWalletId;
+    const exportPrivateKey = view === null || view === void 0 ? void 0 : view.includes('account');
+    React.useEffect(() => {
+        var _a;
+        const iframeContainerElement = iframeContainerRef.current;
+        if (!iframeContainerElement ||
+            ((_a = iframeContainerElement === null || iframeContainerElement === void 0 ? void 0 : iframeContainerElement.children) === null || _a === void 0 ? void 0 : _a.length) > 0) {
+            return;
+        }
+        turnkeyExport.initExport({
+            iframeContainer: iframeContainerElement,
+            iframeElementId: constants.iframeElementId,
+            wallet: primaryWallet,
+        });
+        return () => {
+            turnkeyExport.cleanupExport({
+                wallet: primaryWallet,
+            });
+        };
+        // only run once on mount
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, []);
+    const { mutate: handleExportWallet, isLoading, error, data, } = useMutation.useMutation(() => _tslib.__awaiter(void 0, void 0, void 0, function* () {
+        return turnkeyExport.exportCredential({
+            address: exportPrivateKey ? primaryWallet === null || primaryWallet === void 0 ? void 0 : primaryWallet.address : undefined,
+            authToken,
+            environmentId,
+            userEmail: user === null || user === void 0 ? void 0 : user.email,
+            wallet: primaryWallet,
+        });
+    }), {
+        onFailure: (err) => {
+            logger.logger.error('Failed to export', err);
+            dynamicEvents.dynamicEvents.emit('embeddedWalletRevealFailed', err);
+        },
+    });
+    const errorText = React.useMemo(() => {
+        if (!error) {
+            return undefined;
+        }
+        if (error instanceof utils.DynamicError) {
+            return error.message;
+        }
+        return getProperErrorMessage.getProperErrorMessage(error);
+    }, [error]);
+    const { t } = reactI18next.useTranslation();
+    const contentHeader = (jsxRuntime.jsx("div", { className: 'embedded-reveal-view__body__description', children: !isLoading && data && !error ? (jsxRuntime.jsx(Typography.Typography, { variant: 'body_normal', color: 'secondary', weight: 'regular', children: t('dyn_embedded_reveal.reveal_description') })) : (jsxRuntime.jsx("div", { className: 'embedded-reveal-view__header', children: jsxRuntime.jsx(exportEmbeddedHero.ReactComponent, {}) })) }));
+    React.useEffect(() => {
+        var _a;
+        if (((_a = iframeContainerRef === null || iframeContainerRef === void 0 ? void 0 : iframeContainerRef.current) === null || _a === void 0 ? void 0 : _a.children) && data) {
+            // eslint-disable-next-line prefer-destructuring
+            const iframeElement = iframeContainerRef.current.children[0];
+            iframeElement === null || iframeElement === void 0 ? void 0 : iframeElement.setAttribute('style', !isTurnkeyHDWallet || exportPrivateKey
+                ? 'height: 60px'
+                : 'height: 100px');
+        }
+    }, [iframeContainerRef, data, isTurnkeyHDWallet, exportPrivateKey]);
+    const closeButton = (jsxRuntime.jsx(IconButton.IconButton, { onClick: () => setShowAuthFlow(false, { emitCancelAuth: true }), type: 'button', children: jsxRuntime.jsx(close.ReactComponent, {}) }));
+    const hasInjectedCredential = !isLoading && data && !error;
+    const credentialTitle = !isTurnkeyHDWallet || exportPrivateKey
+        ? t('dyn_embedded_reveal.private_key_title')
+        : t('dyn_embedded_reveal.recovery_phrase_title');
+    const title = hasInjectedCredential
+        ? credentialTitle
+        : t('dyn_embedded_reveal.agreement_title');
+    return (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx(ModalHeader.ModalHeader, { trailing: closeButton, children: jsxRuntime.jsx(Typography.Typography, { as: 'h1', variant: 'title', color: 'primary', "data-testid": 'dynamic-auth-modal-heading', className: 'header__typography', children: title }) }), jsxRuntime.jsx("div", { className: 'embedded-reveal-view', children: jsxRuntime.jsxs("div", { className: 'embedded-reveal-view__body', children: [contentHeader, jsxRuntime.jsx("div", { id: constants.iframeContainerId, style: { display: data ? 'block' : 'none' }, ref: iframeContainerRef }), hasInjectedCredential ? (jsxRuntime.jsx(Button.Button, { buttonPadding: 'large', buttonVariant: 'brand-primary', onClick: () => setShowAuthFlow(false), loading: isLoading, copykey: 'dyn_embedded_reveal.done_button_label', typographyProps: {
+                                color: 'inherit',
+                            }, children: t('dyn_embedded_reveal.done_button_label') })) : (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx("div", { className: 'embedded-reveal-view__body__description', children: jsxRuntime.jsx(Badge.Badge, { text: t('dyn_embedded_reveal.badge_label'), className: 'embedded-reveal-view__body__badge' }) }), errorText && jsxRuntime.jsx(ErrorContainer.ErrorContainer, { children: errorText }), jsxRuntime.jsxs("div", { className: 'embedded-reveal-view__body__card', children: [jsxRuntime.jsxs("div", { className: 'embedded-reveal-view__body__card__statement', children: [jsxRuntime.jsx("div", { className: 'embedded-reveal-view__body__card__icon', children: jsxRuntime.jsx(walletV2.ReactComponent, {}) }), jsxRuntime.jsxs("div", { children: [jsxRuntime.jsx(Typography.Typography, { variant: 'body_normal', color: 'primary', style: { letterSpacing: '-0.15px' }, copykey: 'dyn_embedded_reveal.statement_1.title', children: t('dyn_embedded_reveal.statement_1.title') }), jsxRuntime.jsx(Typography.Typography, { variant: 'body_small', color: 'secondary', weight: 'regular', copykey: 'dyn_embedded_reveal.statement_1.description', children: t('dyn_embedded_reveal.statement_1.description') })] })] }), jsxRuntime.jsxs("div", { className: 'embedded-reveal-view__body__card__statement', children: [jsxRuntime.jsx("div", { className: 'embedded-reveal-view__body__card__icon', children: jsxRuntime.jsx(eyeOffIcon.ReactComponent, {}) }), jsxRuntime.jsxs("div", { children: [jsxRuntime.jsx(Typography.Typography, { variant: 'body_normal', color: 'primary', style: { letterSpacing: '-0.15px' }, copykey: 'dyn_embedded_reveal.statement_2.title', children: t('dyn_embedded_reveal.statement_2.title') }), jsxRuntime.jsx(Typography.Typography, { variant: 'body_small', color: 'secondary', weight: 'regular', copykey: 'dyn_embedded_reveal.statement_2.description', children: t('dyn_embedded_reveal.statement_2.description', {
+                                                                credential_type: credentialTitle === null || credentialTitle === void 0 ? void 0 : credentialTitle.toLowerCase(),
+                                                            }) })] })] })] }), jsxRuntime.jsxs("div", { className: 'embedded-reveal-view__body__confirm_card', children: [jsxRuntime.jsxs("button", { className: 'embedded-reveal-view__body__card__acknowledgement', onClick: () => setAcknowledgement1(!acknowledgement1), children: [jsxRuntime.jsx("div", { children: jsxRuntime.jsx(Checkbox.Checkbox, { checked: acknowledgement1, onChange: () => setAcknowledgement1(!acknowledgement1), className: 'embedded-reveal-view__body__card__statement__checkbox', id: 'embedded-reveal-checkbox-1' }) }), jsxRuntime.jsx("div", { children: jsxRuntime.jsx(Typography.Typography, { variant: 'body_normal', color: 'primary', style: { letterSpacing: '-0.15px' }, copykey: 'dyn_embedded_reveal.checkbox_label', children: t('dyn_embedded_reveal.checkbox_label') }) })] }), jsxRuntime.jsx(Button.Button, { buttonPadding: 'large', buttonVariant: 'brand-primary', typographyProps: {
+                                                color: 'inherit',
+                                            }, onClick: () => handleExportWallet(), disabled: !acknowledgement1, loading: isLoading, dataTestId: 'embedded-reveal-button', copykey: 'dyn_embedded_reveal.reveal_button_label', children: t('dyn_embedded_reveal.reveal_button_label') })] })] }))] }) })] }));
+};
+
+exports.EmbeddedRevealView = EmbeddedRevealView;

package/src/lib/views/EmbeddedReveal/EmbeddedRevealView/EmbeddedRevealView.d.ts

@@ -0,0 +1,2 @@
+import { FC } from 'react';
+export declare const EmbeddedRevealView: FC;

package/src/lib/views/EmbeddedReveal/EmbeddedRevealView/EmbeddedRevealView.js

@@ -0,0 +1,156 @@
+import { __awaiter } from '../../../../../_virtual/_tslib.js';
+import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
+import { useState, useRef, useEffect, useMemo } from 'react';
+import { useTranslation } from 'react-i18next';
+import { DynamicError } from '@dynamic-labs/utils';
+import { getProperErrorMessage } from '../../../modals/SignMessageConfirmationModal/getProperErrorMessage.js';
+import { dynamicEvents } from '../../../events/dynamicEvents.js';
+import { useInternalDynamicContext } from '../../../context/DynamicContext/useInternalDynamicContext.js';
+import '@dynamic-labs/wallet-connector-core';
+import '../../../context/CaptchaContext/CaptchaContext.js';
+import '../../../context/ErrorContext/ErrorContext.js';
+import { useViewContext } from '../../../context/ViewContext/ViewContext.js';
+import { decodeJwt } from '../../../shared/utils/functions/decodeJwt/decodeJwt.js';
+import '@dynamic-labs/iconic';
+import { ReactComponent as SvgClose } from '../../../shared/assets/close.js';
+import { ReactComponent as SvgEyeOffIcon } from '../../../shared/assets/eye-off-icon.js';
+import { ReactComponent as SvgExportEmbeddedHero } from '../../../shared/assets/export-embedded-hero.js';
+import { ReactComponent as SvgWalletV2 } from '../../../shared/assets/wallet-v2.js';
+import { logger } from '../../../shared/logger.js';
+import '@dynamic-labs/wallet-book';
+import '../../../utils/constants/colors.js';
+import '../../../shared/utils/classes/storage/localStorage.js';
+import 'viem';
+import '../../../shared/consts/index.js';
+import '@dynamic-labs/multi-wallet';
+import '@dynamic-labs/sdk-api';
+import '../../../context/AccessDeniedContext/AccessDeniedContext.js';
+import '../../../context/AccountExistsContext/AccountExistsContext.js';
+import '../../../config/ApiEndpoint.js';
+import '../../../context/EmailVerificationContext/EmailVerificationContext.js';
+import 'react-dom';
+import '../../../context/ThemeContext/ThemeContext.js';
+import { useMutation } from '../../../utils/hooks/useMutation/useMutation.js';
+import '@dynamic-labs/types';
+import 'yup';
+import '../../../context/MockContext/MockContext.js';
+import '../../../utils/hooks/useUserUpdateRequest/useUpdateUser/useUpdateUser.js';
+import '../../../context/UserFieldEditorContext/UserFieldEditorContext.js';
+import '@dynamic-labs/rpc-providers';
+import '../../../context/UserWalletsContext/UserWalletsContext.js';
+import '../../../components/Transition/ZoomTransition/ZoomTransition.js';
+import '../../../components/Transition/SlideInUpTransition/SlideInUpTransition.js';
+import '../../../components/Transition/OpacityTransition/OpacityTransition.js';
+import '../../../components/ShadowDOM/ShadowDOM.js';
+import '../../../components/OverlayCard/OverlayCard.context.js';
+import '../../../context/FooterAnimationContext/index.js';
+import '../../../context/QrCodeContext/QrCodeContext.js';
+import { Typography } from '../../../components/Typography/Typography.js';
+import { Badge } from '../../../components/Badge/Badge.js';
+import '../../../context/WalletGroupContext/WalletGroupContext.js';
+import '../../../widgets/DynamicWidget/components/DynamicWidgetHeader/DynamicWidgetHeader.js';
+import 'react-focus-lock';
+import '../../../context/LoadingContext/LoadingContext.js';
+import 'qrcode';
+import 'i18next';
+import '../../../widgets/DynamicWidget/context/DynamicWidgetContext.js';
+import { ErrorContainer } from '../../../components/ErrorContainer/ErrorContainer.js';
+import '../../../components/UserProfile/parts/UserProfileField/components/VerifiedEmailIcon/VerifiedEmailIcon.js';
+import 'formik';
+import { Button } from '../../../components/Button/Button.js';
+import { ModalHeader } from '../../../components/ModalHeader/ModalHeader.js';
+import { IconButton } from '../../../components/IconButton/IconButton.js';
+import '../../../components/Alert/Alert.js';
+import '@dynamic-labs/viem-utils';
+import '../../../widgets/DynamicWidget/views/ManagePasskeysWidgetView/PasskeyCard/PasskeyCard.js';
+import { Checkbox } from '../../../components/Checkbox/Checkbox.js';
+import '../../../components/InlineWidget/InlineWidget.js';
+import '../../../components/MenuList/Dropdown/Dropdown.js';
+import '../../../components/Popper/Popper/Popper.js';
+import '../../../components/Popper/PopperContext/PopperContext.js';
+import { initExport, cleanupExport, exportCredential } from '../utils/turnkeyExport/turnkeyExport.js';
+import { iframeContainerId, iframeElementId } from '../constants.js';
+
+const EmbeddedRevealView = () => {
+    var _a, _b;
+    const { authToken, primaryWallet, user, setShowAuthFlow, environmentId } = useInternalDynamicContext();
+    const { view } = useViewContext();
+    const [acknowledgement1, setAcknowledgement1] = useState(false);
+    const iframeContainerRef = useRef(null);
+    const decodedJwt = decodeJwt(authToken);
+    const walletProperties = (_b = (_a = decodedJwt === null || decodedJwt === void 0 ? void 0 : decodedJwt.verifiedCredentials) === null || _a === void 0 ? void 0 : _a.find(({ walletName }) => walletName === null || walletName === void 0 ? void 0 : walletName.startsWith('turnkey'))) === null || _b === void 0 ? void 0 : _b.walletProperties;
+    const isTurnkeyHDWallet = walletProperties === null || walletProperties === void 0 ? void 0 : walletProperties.turnkeyHDWalletId;
+    const exportPrivateKey = view === null || view === void 0 ? void 0 : view.includes('account');
+    useEffect(() => {
+        var _a;
+        const iframeContainerElement = iframeContainerRef.current;
+        if (!iframeContainerElement ||
+            ((_a = iframeContainerElement === null || iframeContainerElement === void 0 ? void 0 : iframeContainerElement.children) === null || _a === void 0 ? void 0 : _a.length) > 0) {
+            return;
+        }
+        initExport({
+            iframeContainer: iframeContainerElement,
+            iframeElementId,
+            wallet: primaryWallet,
+        });
+        return () => {
+            cleanupExport({
+                wallet: primaryWallet,
+            });
+        };
+        // only run once on mount
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, []);
+    const { mutate: handleExportWallet, isLoading, error, data, } = useMutation(() => __awaiter(void 0, void 0, void 0, function* () {
+        return exportCredential({
+            address: exportPrivateKey ? primaryWallet === null || primaryWallet === void 0 ? void 0 : primaryWallet.address : undefined,
+            authToken,
+            environmentId,
+            userEmail: user === null || user === void 0 ? void 0 : user.email,
+            wallet: primaryWallet,
+        });
+    }), {
+        onFailure: (err) => {
+            logger.error('Failed to export', err);
+            dynamicEvents.emit('embeddedWalletRevealFailed', err);
+        },
+    });
+    const errorText = useMemo(() => {
+        if (!error) {
+            return undefined;
+        }
+        if (error instanceof DynamicError) {
+            return error.message;
+        }
+        return getProperErrorMessage(error);
+    }, [error]);
+    const { t } = useTranslation();
+    const contentHeader = (jsx("div", { className: 'embedded-reveal-view__body__description', children: !isLoading && data && !error ? (jsx(Typography, { variant: 'body_normal', color: 'secondary', weight: 'regular', children: t('dyn_embedded_reveal.reveal_description') })) : (jsx("div", { className: 'embedded-reveal-view__header', children: jsx(SvgExportEmbeddedHero, {}) })) }));
+    useEffect(() => {
+        var _a;
+        if (((_a = iframeContainerRef === null || iframeContainerRef === void 0 ? void 0 : iframeContainerRef.current) === null || _a === void 0 ? void 0 : _a.children) && data) {
+            // eslint-disable-next-line prefer-destructuring
+            const iframeElement = iframeContainerRef.current.children[0];
+            iframeElement === null || iframeElement === void 0 ? void 0 : iframeElement.setAttribute('style', !isTurnkeyHDWallet || exportPrivateKey
+                ? 'height: 60px'
+                : 'height: 100px');
+        }
+    }, [iframeContainerRef, data, isTurnkeyHDWallet, exportPrivateKey]);
+    const closeButton = (jsx(IconButton, { onClick: () => setShowAuthFlow(false, { emitCancelAuth: true }), type: 'button', children: jsx(SvgClose, {}) }));
+    const hasInjectedCredential = !isLoading && data && !error;
+    const credentialTitle = !isTurnkeyHDWallet || exportPrivateKey
+        ? t('dyn_embedded_reveal.private_key_title')
+        : t('dyn_embedded_reveal.recovery_phrase_title');
+    const title = hasInjectedCredential
+        ? credentialTitle
+        : t('dyn_embedded_reveal.agreement_title');
+    return (jsxs(Fragment, { children: [jsx(ModalHeader, { trailing: closeButton, children: jsx(Typography, { as: 'h1', variant: 'title', color: 'primary', "data-testid": 'dynamic-auth-modal-heading', className: 'header__typography', children: title }) }), jsx("div", { className: 'embedded-reveal-view', children: jsxs("div", { className: 'embedded-reveal-view__body', children: [contentHeader, jsx("div", { id: iframeContainerId, style: { display: data ? 'block' : 'none' }, ref: iframeContainerRef }), hasInjectedCredential ? (jsx(Button, { buttonPadding: 'large', buttonVariant: 'brand-primary', onClick: () => setShowAuthFlow(false), loading: isLoading, copykey: 'dyn_embedded_reveal.done_button_label', typographyProps: {
+                                color: 'inherit',
+                            }, children: t('dyn_embedded_reveal.done_button_label') })) : (jsxs(Fragment, { children: [jsx("div", { className: 'embedded-reveal-view__body__description', children: jsx(Badge, { text: t('dyn_embedded_reveal.badge_label'), className: 'embedded-reveal-view__body__badge' }) }), errorText && jsx(ErrorContainer, { children: errorText }), jsxs("div", { className: 'embedded-reveal-view__body__card', children: [jsxs("div", { className: 'embedded-reveal-view__body__card__statement', children: [jsx("div", { className: 'embedded-reveal-view__body__card__icon', children: jsx(SvgWalletV2, {}) }), jsxs("div", { children: [jsx(Typography, { variant: 'body_normal', color: 'primary', style: { letterSpacing: '-0.15px' }, copykey: 'dyn_embedded_reveal.statement_1.title', children: t('dyn_embedded_reveal.statement_1.title') }), jsx(Typography, { variant: 'body_small', color: 'secondary', weight: 'regular', copykey: 'dyn_embedded_reveal.statement_1.description', children: t('dyn_embedded_reveal.statement_1.description') })] })] }), jsxs("div", { className: 'embedded-reveal-view__body__card__statement', children: [jsx("div", { className: 'embedded-reveal-view__body__card__icon', children: jsx(SvgEyeOffIcon, {}) }), jsxs("div", { children: [jsx(Typography, { variant: 'body_normal', color: 'primary', style: { letterSpacing: '-0.15px' }, copykey: 'dyn_embedded_reveal.statement_2.title', children: t('dyn_embedded_reveal.statement_2.title') }), jsx(Typography, { variant: 'body_small', color: 'secondary', weight: 'regular', copykey: 'dyn_embedded_reveal.statement_2.description', children: t('dyn_embedded_reveal.statement_2.description', {
+                                                                credential_type: credentialTitle === null || credentialTitle === void 0 ? void 0 : credentialTitle.toLowerCase(),
+                                                            }) })] })] })] }), jsxs("div", { className: 'embedded-reveal-view__body__confirm_card', children: [jsxs("button", { className: 'embedded-reveal-view__body__card__acknowledgement', onClick: () => setAcknowledgement1(!acknowledgement1), children: [jsx("div", { children: jsx(Checkbox, { checked: acknowledgement1, onChange: () => setAcknowledgement1(!acknowledgement1), className: 'embedded-reveal-view__body__card__statement__checkbox', id: 'embedded-reveal-checkbox-1' }) }), jsx("div", { children: jsx(Typography, { variant: 'body_normal', color: 'primary', style: { letterSpacing: '-0.15px' }, copykey: 'dyn_embedded_reveal.checkbox_label', children: t('dyn_embedded_reveal.checkbox_label') }) })] }), jsx(Button, { buttonPadding: 'large', buttonVariant: 'brand-primary', typographyProps: {
+                                                color: 'inherit',
+                                            }, onClick: () => handleExportWallet(), disabled: !acknowledgement1, loading: isLoading, dataTestId: 'embedded-reveal-button', copykey: 'dyn_embedded_reveal.reveal_button_label', children: t('dyn_embedded_reveal.reveal_button_label') })] })] }))] }) })] }));
+};
+
+export { EmbeddedRevealView };

package/src/lib/views/EmbeddedReveal/EmbeddedRevealView/index.d.ts

@@ -0,0 +1 @@
+export { EmbeddedRevealView } from './EmbeddedRevealView';