@dynamic-labs/sdk-react-core 4.22.5 → 4.22.7

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

@@ -8,21 +8,32 @@ import { isSessionKeyCompatibleWallet } from '@dynamic-labs/wallet-connector-cor
 import '@dynamic-labs-sdk/client/core';
 import '@dynamic-labs-sdk/client';
 import '../../client/client.js';
-import { dynamicEvents } from '../../events/dynamicEvents.js';
-import { storeTokenAndUser } from '../../client/extension/storeTokenAndUser/storeTokenAndUser.js';
-import { convertSdkUserToUserProfile } from '../../client/extension/user/convertSdkUserToUserProfile/convertSdkUserToUserProfile.js';
-import { classNames } from '../../utils/functions/classNames/classNames.js';
-import '../../components/Accordion/components/AccordionItem/AccordionItem.js';
+import { findEmbeddedWalletFromVerifiedCredentials } from '../../utils/functions/findEmbeddedWalletFromVerifiedCredentials/findEmbeddedWalletFromVerifiedCredentials.js';
+import '@dynamic-labs/utils';
+import '../../utils/constants/values.js';
+import '@dynamic-labs/multi-wallet';
+import { logger } from '../../shared/logger.js';
+import '../../utils/constants/colors.js';
+import 'react-international-phone';
+import { shortenEmail } from '../../shared/utils/functions/shortenEmail/shortenEmail.js';
+import '@dynamic-labs/iconic';
 import { ReactComponent as SvgCheck } from '../../shared/assets/check.js';
 import { ReactComponent as SvgSignInWithEmail } from '../../shared/assets/sign-in-with-email.js';
-import '@dynamic-labs/iconic';
 import { useViewContext } from '../../context/ViewContext/ViewContext.js';
-import { logger } from '../../shared/logger.js';
 import '@dynamic-labs/wallet-book';
-import '@dynamic-labs/utils';
-import '../../utils/constants/colors.js';
-import '../../utils/constants/values.js';
 import '../../shared/consts/index.js';
+import '../../store/state/nonce/nonce.js';
+import { isTurnkeyEnabled } from '../../utils/functions/isTurnkeyEnabled/isTurnkeyEnabled.js';
+import { updatePrimaryWalletId } from '../../utils/functions/updatePrimaryWalletId/updatePrimaryWalletId.js';
+import '../../store/state/connectedWalletsInfo/connectedWalletsInfo.js';
+import '../../store/state/dynamicContextProps/dynamicContextProps.js';
+import '../../store/state/primaryWalletId/primaryWalletId.js';
+import { dynamicEvents } from '../../events/dynamicEvents.js';
+import '../../store/state/projectSettings/projectSettings.js';
+import { storeTokenAndUser } from '../../client/extension/storeTokenAndUser/storeTokenAndUser.js';
+import { convertSdkUserToUserProfile } from '../../client/extension/user/convertSdkUserToUserProfile/convertSdkUserToUserProfile.js';
+import { classNames } from '../../utils/functions/classNames/classNames.js';
+import '../../components/Accordion/components/AccordionItem/AccordionItem.js';
 import '../../components/Alert/Alert.js';
 import '../../context/DynamicContext/DynamicContext.js';
 import '../../store/state/loadingAndLifecycle/loadingAndLifecycle.js';
@@ -30,22 +41,11 @@ import '../../store/state/authMode/authMode.js';
 import { useInternalDynamicContext } from '../../context/DynamicContext/useDynamicContext/useInternalDynamicContext/useInternalDynamicContext.js';
 import '../../context/CaptchaContext/CaptchaContext.js';
 import { useErrorContext } from '../../context/ErrorContext/ErrorContext.js';
-import { findEmbeddedWalletFromVerifiedCredentials } from '../../utils/functions/findEmbeddedWalletFromVerifiedCredentials/findEmbeddedWalletFromVerifiedCredentials.js';
-import '@dynamic-labs/multi-wallet';
-import 'react-international-phone';
-import { shortenEmail } from '../../shared/utils/functions/shortenEmail/shortenEmail.js';
-import '../../store/state/nonce/nonce.js';
-import { isTurnkeyEnabled } from '../../utils/functions/isTurnkeyEnabled/isTurnkeyEnabled.js';
-import { updatePrimaryWalletId } from '../../utils/functions/updatePrimaryWalletId/updatePrimaryWalletId.js';
-import '../../store/state/connectedWalletsInfo/connectedWalletsInfo.js';
-import '../../store/state/dynamicContextProps/dynamicContextProps.js';
-import '../../store/state/primaryWalletId/primaryWalletId.js';
 import '../../context/AccessDeniedContext/AccessDeniedContext.js';
 import '../../context/AccountExistsContext/AccountExistsContext.js';
 import '../../context/UserWalletsContext/UserWalletsContext.js';
 import { signInWithEmailVerification, retryEmailVerification } from '../../data/api/email/email.js';
 import '../../config/ApiEndpoint.js';
-import '../../store/state/projectSettings/projectSettings.js';
 import '../../locale/locale.js';
 import { useOtpVerificationRequest } from '../../utils/hooks/authenticationHooks/useOtpVerificationRequest/useOtpVerificationRequest.js';
 import 'react-dom';

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

@@ -9,29 +9,26 @@ var React = require('react');
 var reactI18next = require('react-i18next');
 var utils = require('@dynamic-labs/utils');
 var walletConnectorCore = require('@dynamic-labs/wallet-connector-core');
-var Badge = require('../../../components/Badge/Badge.cjs');
-var Checkbox = require('../../../components/Checkbox/Checkbox.cjs');
-var ErrorContainer = require('../../../components/ErrorContainer/ErrorContainer.cjs');
-var IconButton = require('../../../components/IconButton/IconButton.cjs');
-var ModalHeader = require('../../../components/ModalHeader/ModalHeader.cjs');
-var Typography = require('../../../components/Typography/Typography.cjs');
-var TypographyButton = require('../../../components/TypographyButton/TypographyButton.cjs');
-require('../../../context/DynamicContext/DynamicContext.cjs');
-require('../../../store/state/loadingAndLifecycle/loadingAndLifecycle.cjs');
-require('@dynamic-labs/sdk-api-core');
-var logger = require('../../../shared/logger.cjs');
-require('@dynamic-labs/iconic');
+require('../../../components/Accordion/components/AccordionItem/AccordionItem.cjs');
 var close = require('../../../shared/assets/close.cjs');
 var exportEmbeddedHero = require('../../../shared/assets/export-embedded-hero.cjs');
 var eyeOffIcon = require('../../../shared/assets/eye-off-icon.cjs');
 var info = require('../../../shared/assets/info.cjs');
 var walletV2 = require('../../../shared/assets/wallet-v2.cjs');
+require('@dynamic-labs/iconic');
 var ViewContext = require('../../../context/ViewContext/ViewContext.cjs');
+require('@dynamic-labs/sdk-api-core');
+var logger = require('../../../shared/logger.cjs');
 require('@dynamic-labs/wallet-book');
 require('../../../utils/constants/colors.cjs');
 require('../../../utils/constants/values.cjs');
 require('../../../shared/consts/index.cjs');
+require('../../../components/Alert/Alert.cjs');
 var dynamicEvents = require('../../../events/dynamicEvents.cjs');
+require('../../../context/DynamicContext/DynamicContext.cjs');
+require('../../../store/state/loadingAndLifecycle/loadingAndLifecycle.cjs');
+require('../../../store/state/authMode/authMode.cjs');
+var useInternalDynamicContext = require('../../../context/DynamicContext/useDynamicContext/useInternalDynamicContext/useInternalDynamicContext.cjs');
 require('../../../context/CaptchaContext/CaptchaContext.cjs');
 require('../../../context/ErrorContext/ErrorContext.cjs');
 var errors = require('../../../utils/constants/errors.cjs');
@@ -50,7 +47,6 @@ require('../../../store/state/connectedWalletsInfo/connectedWalletsInfo.cjs');
 require('../../../context/AccessDeniedContext/AccessDeniedContext.cjs');
 require('../../../context/AccountExistsContext/AccountExistsContext.cjs');
 require('../../../context/UserWalletsContext/UserWalletsContext.cjs');
-require('../../../store/state/authMode/authMode.cjs');
 require('../../../context/VerificationContext/VerificationContext.cjs');
 require('react-dom');
 require('../../../utils/functions/compareChains/compareChains.cjs');
@@ -76,51 +72,55 @@ require('../../../context/FieldsStateContext/FieldsStateContext.cjs');
 require('../../../context/UserFieldEditorContext/UserFieldEditorContext.cjs');
 require('@dynamic-labs/rpc-providers');
 require('../../../store/state/walletOptions/walletOptions.cjs');
-require('../../../components/Accordion/components/AccordionItem/AccordionItem.cjs');
-require('../../../components/Alert/Alert.cjs');
+var Typography = require('../../../components/Typography/Typography.cjs');
+require('../../../context/FooterAnimationContext/index.cjs');
 require('../../../components/ShadowDOM/ShadowDOM.cjs');
-require('../../../components/InlineWidget/InlineWidget.cjs');
-require('../../../components/Input/Input.cjs');
-require('../../../components/IsBrowser/IsBrowser.cjs');
-require('../../../components/MenuList/Dropdown/Dropdown.cjs');
-require('../../../components/OverlayCard/OverlayCard.cjs');
 require('../../../components/Transition/ZoomTransition/ZoomTransition.cjs');
 require('../../../components/Transition/SlideInUpTransition/SlideInUpTransition.cjs');
 require('../../../components/Transition/OpacityTransition/OpacityTransition.cjs');
-var NeedHelpSection = require('../../../components/NeedHelpSection/NeedHelpSection.cjs');
-require('../../../components/PasskeyCreatedSuccessBanner/PasskeyCreatedSuccessBanner.cjs');
-require('../../../components/Popper/Popper/Popper.cjs');
-require('../../../components/Popper/PopperContext/PopperContext.cjs');
+require('../../../components/OverlayCardBase/OverlayCardTarget/OverlayCardTarget.cjs');
+require('../../../context/WalletGroupContext/WalletGroupContext.cjs');
+require('../../../widgets/DynamicWidget/components/DynamicWidgetHeader/DynamicWidgetHeader.cjs');
 require('react-focus-lock');
-require('qrcode');
+var DynamicWidgetContext = require('../../../widgets/DynamicWidget/context/DynamicWidgetContext.cjs');
+var IconButton = require('../../../components/IconButton/IconButton.cjs');
+require('../../../components/MenuList/Dropdown/Dropdown.cjs');
+var Badge = require('../../../components/Badge/Badge.cjs');
+var ErrorContainer = require('../../../components/ErrorContainer/ErrorContainer.cjs');
+var TypographyButton = require('../../../components/TypographyButton/TypographyButton.cjs');
 require('formik');
 require('../../../utils/hooks/useSubdomainCheck/useSubdomainCheck.cjs');
-require('../../../context/WalletGroupContext/WalletGroupContext.cjs');
+var ModalHeader = require('../../../components/ModalHeader/ModalHeader.cjs');
+require('../../../store/state/sendBalances.cjs');
+require('../../../components/Input/Input.cjs');
+require('../../../components/OverlayCard/OverlayCard.cjs');
+require('../../TransactionConfirmationView/TransactionConfirmationView.cjs');
+require('../../../context/PasskeyContext/PasskeyContext.cjs');
+require('../../../widgets/DynamicWidget/views/ManagePasskeysWidgetView/PasskeyCard/PasskeyCard.cjs');
+require('../../../context/OnrampContext/OnrampContext.cjs');
+require('../../../widgets/DynamicWidget/helpers/convertExchangeKeyAndProviderEnum.cjs');
+require('qrcode');
+require('../../../widgets/DynamicWidget/views/ReceiveWalletFunds/ReceiveWalletFunds.cjs');
+var getProperErrorMessage = require('../../../modals/SignMessageConfirmationModal/getProperErrorMessage.cjs');
+require('../../../../index.cjs');
+var NeedHelpSection = require('../../../components/NeedHelpSection/NeedHelpSection.cjs');
 require('../../../context/IpConfigurationContext/IpConfigurationContext.cjs');
 require('../../../context/ConnectWithOtpContext/ConnectWithOtpContext.cjs');
 require('../../../widgets/DynamicBridgeWidget/views/WalletsView/components/SecondaryWallets/SecondaryWallets.cjs');
 require('@hcaptcha/react-hcaptcha');
-var getProperErrorMessage = require('../../../modals/SignMessageConfirmationModal/getProperErrorMessage.cjs');
-var DynamicWidgetContext = require('../../../widgets/DynamicWidget/context/DynamicWidgetContext.cjs');
+var Checkbox = require('../../../components/Checkbox/Checkbox.cjs');
 var constants = require('../constants.cjs');
 var waasExport = require('../utils/waasExport/waasExport.cjs');
-require('../../../context/FooterAnimationContext/index.cjs');
 require('../../../context/ErrorContext/hooks/useErrorText/useErrorText.cjs');
-require('../../../context/PasskeyContext/PasskeyContext.cjs');
-require('../../../widgets/DynamicWidget/helpers/convertExchangeKeyAndProviderEnum.cjs');
-require('../../../store/state/sendBalances.cjs');
+require('../../../components/PasskeyCreatedSuccessBanner/PasskeyCreatedSuccessBanner.cjs');
 require('../../../store/state/connectorsInitializing/connectorsInitializing.cjs');
-require('../../../components/OverlayCardBase/OverlayCardTarget/OverlayCardTarget.cjs');
-require('../../../widgets/DynamicWidget/components/DynamicWidgetHeader/DynamicWidgetHeader.cjs');
-require('../../TransactionConfirmationView/TransactionConfirmationView.cjs');
-require('../../../widgets/DynamicWidget/views/ManagePasskeysWidgetView/PasskeyCard/PasskeyCard.cjs');
-require('../../../context/OnrampContext/OnrampContext.cjs');
-require('../../../widgets/DynamicWidget/views/ReceiveWalletFunds/ReceiveWalletFunds.cjs');
-require('../../../../index.cjs');
 require('../../../store/state/tokenBalances.cjs');
 var useSyncEmbeddedWalletFlow = require('../../../utils/hooks/useSyncEmbeddedWalletFlow/useSyncEmbeddedWalletFlow.cjs');
 require('../../../shared/utils/functions/getInitialUrl/getInitialUrl.cjs');
-var useInternalDynamicContext = require('../../../context/DynamicContext/useDynamicContext/useInternalDynamicContext/useInternalDynamicContext.cjs');
+require('../../../components/InlineWidget/InlineWidget.cjs');
+require('../../../components/IsBrowser/IsBrowser.cjs');
+require('../../../components/Popper/Popper/Popper.cjs');
+require('../../../components/Popper/PopperContext/PopperContext.cjs');
 
 const EmbeddedRevealView = ({ exportPrivateKey, isPromptForExport = false, }) => {
     var _a, _b, _c;
@@ -133,6 +133,8 @@ const EmbeddedRevealView = ({ exportPrivateKey, isPromptForExport = false, }) =>
     const { getEOAWallet, isSmartWallet } = useSmartWallets.useSmartWallets();
     const [acknowledgement1, setAcknowledgement1] = React.useState(false);
     const iframeContainerRef = React.useRef(null);
+    const [showSkeleton, setShowSkeleton] = React.useState(false);
+    const [waasExportComplete, setWaasExportComplete] = React.useState(false);
     if (!primaryWallet) {
         throw new utils.DynamicError('No primary wallet found', errors.INVALID_WALLET_DATA);
     }
@@ -146,7 +148,6 @@ const EmbeddedRevealView = ({ exportPrivateKey, isPromptForExport = false, }) =>
     const walletProperties = (_b = (_a = user === null || user === void 0 ? void 0 : user.verifiedCredentials) === null || _a === void 0 ? void 0 : _a.find(({ walletName, id }) => (walletName === null || walletName === void 0 ? void 0 : walletName.startsWith('turnkey')) && id === primaryTurnkeyWalletId)) === null || _b === void 0 ? void 0 : _b.walletProperties;
     const isTurnkeyHDWallet = walletProperties === null || walletProperties === void 0 ? void 0 : walletProperties.turnkeyHDWalletId;
     const wallet = (_c = (primaryWallet && getEOAWallet(primaryWallet))) !== null && _c !== void 0 ? _c : primaryWallet;
-    const [showSkeleton, setShowSkeleton] = React.useState(false);
     // eslint-disable-next-line arrow-body-style
     React.useEffect(() => {
         return () => {
@@ -212,17 +213,22 @@ const EmbeddedRevealView = ({ exportPrivateKey, isPromptForExport = false, }) =>
             }
         }
         if (isWaasWallet) {
-            try {
-                return yield waasExport.exportWaasCredential({
-                    address: exportPrivateKey ? wallet === null || wallet === void 0 ? void 0 : wallet.address : undefined,
-                    iframeContainer: iframeContainerRef.current,
-                    user,
-                    wallet: wallet,
-                });
-            }
-            catch (_k) {
-                return undefined;
-            }
+            // Start the export in the background
+            waasExport.exportWaasCredential({
+                address: exportPrivateKey ? wallet === null || wallet === void 0 ? void 0 : wallet.address : undefined,
+                iframeContainer: iframeContainerRef.current,
+                user,
+                wallet: wallet,
+            })
+                .then(() => {
+                setWaasExportComplete(true);
+            })
+                .catch((error) => {
+                logger.logger.error(`Failed in exporting waas wallet ${wallet === null || wallet === void 0 ? void 0 : wallet.id}`, error);
+                dynamicEvents.dynamicEvents.emit('embeddedWalletRevealFailed', error);
+            });
+            // Return true immediately to show skeleton
+            return true;
         }
         return undefined;
     }), {
@@ -231,6 +237,12 @@ const EmbeddedRevealView = ({ exportPrivateKey, isPromptForExport = false, }) =>
             dynamicEvents.dynamicEvents.emit('embeddedWalletRevealFailed', err);
         },
     });
+    // Reset waasExportComplete when data changes to false (new export starting)
+    React.useEffect(() => {
+        if (!data) {
+            setWaasExportComplete(false);
+        }
+    }, [data]);
     const errorText = React.useMemo(() => {
         if (!error) {
             return undefined;
@@ -261,14 +273,22 @@ const EmbeddedRevealView = ({ exportPrivateKey, isPromptForExport = false, }) =>
         if (data) {
             // Show skeleton first
             setShowSkeleton(true);
-            // After a delay, hide skeleton and show the iframe
-            const timer = setTimeout(() => {
-                setShowSkeleton(false);
-            }, 2000);
-            return () => clearTimeout(timer);
+            if (isWaasWallet) {
+                // For WAAS wallets, hide skeleton when export is actually complete
+                if (waasExportComplete) {
+                    setShowSkeleton(false);
+                }
+            }
+            else {
+                // For other wallets, use the fixed 2-second delay
+                const timer = setTimeout(() => {
+                    setShowSkeleton(false);
+                }, 2000);
+                return () => clearTimeout(timer);
+            }
         }
         return;
-    }, [data]);
+    }, [data, isWaasWallet, waasExportComplete]);
     const closeButton = (jsxRuntime.jsx(IconButton.IconButton, { onClick: () => {
             setShowAuthFlow(false);
         }, type: 'button', children: jsxRuntime.jsx(close.ReactComponent, {}) }));

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

@@ -5,29 +5,26 @@ import { useState, useRef, useEffect, useMemo } from 'react';
 import { useTranslation } from 'react-i18next';
 import { DynamicError, AccessBlockedError } from '@dynamic-labs/utils';
 import { isSessionKeyCompatibleWalletConnector } from '@dynamic-labs/wallet-connector-core';
-import { Badge } from '../../../components/Badge/Badge.js';
-import { Checkbox } from '../../../components/Checkbox/Checkbox.js';
-import { ErrorContainer } from '../../../components/ErrorContainer/ErrorContainer.js';
-import { IconButton } from '../../../components/IconButton/IconButton.js';
-import { ModalHeader } from '../../../components/ModalHeader/ModalHeader.js';
-import { Typography } from '../../../components/Typography/Typography.js';
-import { TypographyButton } from '../../../components/TypographyButton/TypographyButton.js';
-import '../../../context/DynamicContext/DynamicContext.js';
-import '../../../store/state/loadingAndLifecycle/loadingAndLifecycle.js';
-import '@dynamic-labs/sdk-api-core';
-import { logger } from '../../../shared/logger.js';
-import '@dynamic-labs/iconic';
+import '../../../components/Accordion/components/AccordionItem/AccordionItem.js';
 import { ReactComponent as SvgClose } from '../../../shared/assets/close.js';
 import { ReactComponent as SvgExportEmbeddedHero } from '../../../shared/assets/export-embedded-hero.js';
 import { ReactComponent as SvgEyeOffIcon } from '../../../shared/assets/eye-off-icon.js';
 import { ReactComponent as SvgInfo } from '../../../shared/assets/info.js';
 import { ReactComponent as SvgWalletV2 } from '../../../shared/assets/wallet-v2.js';
+import '@dynamic-labs/iconic';
 import { useViewContext } from '../../../context/ViewContext/ViewContext.js';
+import '@dynamic-labs/sdk-api-core';
+import { logger } from '../../../shared/logger.js';
 import '@dynamic-labs/wallet-book';
 import '../../../utils/constants/colors.js';
 import '../../../utils/constants/values.js';
 import '../../../shared/consts/index.js';
+import '../../../components/Alert/Alert.js';
 import { dynamicEvents } from '../../../events/dynamicEvents.js';
+import '../../../context/DynamicContext/DynamicContext.js';
+import '../../../store/state/loadingAndLifecycle/loadingAndLifecycle.js';
+import '../../../store/state/authMode/authMode.js';
+import { useInternalDynamicContext } from '../../../context/DynamicContext/useDynamicContext/useInternalDynamicContext/useInternalDynamicContext.js';
 import '../../../context/CaptchaContext/CaptchaContext.js';
 import '../../../context/ErrorContext/ErrorContext.js';
 import { INVALID_WALLET_DATA } from '../../../utils/constants/errors.js';
@@ -46,7 +43,6 @@ import '../../../store/state/connectedWalletsInfo/connectedWalletsInfo.js';
 import '../../../context/AccessDeniedContext/AccessDeniedContext.js';
 import '../../../context/AccountExistsContext/AccountExistsContext.js';
 import '../../../context/UserWalletsContext/UserWalletsContext.js';
-import '../../../store/state/authMode/authMode.js';
 import '../../../context/VerificationContext/VerificationContext.js';
 import 'react-dom';
 import '../../../utils/functions/compareChains/compareChains.js';
@@ -72,51 +68,55 @@ import '../../../context/FieldsStateContext/FieldsStateContext.js';
 import '../../../context/UserFieldEditorContext/UserFieldEditorContext.js';
 import '@dynamic-labs/rpc-providers';
 import '../../../store/state/walletOptions/walletOptions.js';
-import '../../../components/Accordion/components/AccordionItem/AccordionItem.js';
-import '../../../components/Alert/Alert.js';
+import { Typography } from '../../../components/Typography/Typography.js';
+import '../../../context/FooterAnimationContext/index.js';
 import '../../../components/ShadowDOM/ShadowDOM.js';
-import '../../../components/InlineWidget/InlineWidget.js';
-import '../../../components/Input/Input.js';
-import '../../../components/IsBrowser/IsBrowser.js';
-import '../../../components/MenuList/Dropdown/Dropdown.js';
-import '../../../components/OverlayCard/OverlayCard.js';
 import '../../../components/Transition/ZoomTransition/ZoomTransition.js';
 import '../../../components/Transition/SlideInUpTransition/SlideInUpTransition.js';
 import '../../../components/Transition/OpacityTransition/OpacityTransition.js';
-import { NeedHelpSection } from '../../../components/NeedHelpSection/NeedHelpSection.js';
-import '../../../components/PasskeyCreatedSuccessBanner/PasskeyCreatedSuccessBanner.js';
-import '../../../components/Popper/Popper/Popper.js';
-import '../../../components/Popper/PopperContext/PopperContext.js';
+import '../../../components/OverlayCardBase/OverlayCardTarget/OverlayCardTarget.js';
+import '../../../context/WalletGroupContext/WalletGroupContext.js';
+import '../../../widgets/DynamicWidget/components/DynamicWidgetHeader/DynamicWidgetHeader.js';
 import 'react-focus-lock';
-import 'qrcode';
+import { useWidgetContext } from '../../../widgets/DynamicWidget/context/DynamicWidgetContext.js';
+import { IconButton } from '../../../components/IconButton/IconButton.js';
+import '../../../components/MenuList/Dropdown/Dropdown.js';
+import { Badge } from '../../../components/Badge/Badge.js';
+import { ErrorContainer } from '../../../components/ErrorContainer/ErrorContainer.js';
+import { TypographyButton } from '../../../components/TypographyButton/TypographyButton.js';
 import 'formik';
 import '../../../utils/hooks/useSubdomainCheck/useSubdomainCheck.js';
-import '../../../context/WalletGroupContext/WalletGroupContext.js';
+import { ModalHeader } from '../../../components/ModalHeader/ModalHeader.js';
+import '../../../store/state/sendBalances.js';
+import '../../../components/Input/Input.js';
+import '../../../components/OverlayCard/OverlayCard.js';
+import '../../TransactionConfirmationView/TransactionConfirmationView.js';
+import '../../../context/PasskeyContext/PasskeyContext.js';
+import '../../../widgets/DynamicWidget/views/ManagePasskeysWidgetView/PasskeyCard/PasskeyCard.js';
+import '../../../context/OnrampContext/OnrampContext.js';
+import '../../../widgets/DynamicWidget/helpers/convertExchangeKeyAndProviderEnum.js';
+import 'qrcode';
+import '../../../widgets/DynamicWidget/views/ReceiveWalletFunds/ReceiveWalletFunds.js';
+import { getProperErrorMessage } from '../../../modals/SignMessageConfirmationModal/getProperErrorMessage.js';
+import '../../../../index.js';
+import { NeedHelpSection } from '../../../components/NeedHelpSection/NeedHelpSection.js';
 import '../../../context/IpConfigurationContext/IpConfigurationContext.js';
 import '../../../context/ConnectWithOtpContext/ConnectWithOtpContext.js';
 import '../../../widgets/DynamicBridgeWidget/views/WalletsView/components/SecondaryWallets/SecondaryWallets.js';
 import '@hcaptcha/react-hcaptcha';
-import { getProperErrorMessage } from '../../../modals/SignMessageConfirmationModal/getProperErrorMessage.js';
-import { useWidgetContext } from '../../../widgets/DynamicWidget/context/DynamicWidgetContext.js';
+import { Checkbox } from '../../../components/Checkbox/Checkbox.js';
 import { iframeContainerId, iframeElementId } from '../constants.js';
 import { cleanupExport as cleanupExport$1, exportWaasCredential } from '../utils/waasExport/waasExport.js';
-import '../../../context/FooterAnimationContext/index.js';
 import '../../../context/ErrorContext/hooks/useErrorText/useErrorText.js';
-import '../../../context/PasskeyContext/PasskeyContext.js';
-import '../../../widgets/DynamicWidget/helpers/convertExchangeKeyAndProviderEnum.js';
-import '../../../store/state/sendBalances.js';
+import '../../../components/PasskeyCreatedSuccessBanner/PasskeyCreatedSuccessBanner.js';
 import '../../../store/state/connectorsInitializing/connectorsInitializing.js';
-import '../../../components/OverlayCardBase/OverlayCardTarget/OverlayCardTarget.js';
-import '../../../widgets/DynamicWidget/components/DynamicWidgetHeader/DynamicWidgetHeader.js';
-import '../../TransactionConfirmationView/TransactionConfirmationView.js';
-import '../../../widgets/DynamicWidget/views/ManagePasskeysWidgetView/PasskeyCard/PasskeyCard.js';
-import '../../../context/OnrampContext/OnrampContext.js';
-import '../../../widgets/DynamicWidget/views/ReceiveWalletFunds/ReceiveWalletFunds.js';
-import '../../../../index.js';
 import '../../../store/state/tokenBalances.js';
 import { useSyncEmbeddedWalletFlow } from '../../../utils/hooks/useSyncEmbeddedWalletFlow/useSyncEmbeddedWalletFlow.js';
 import '../../../shared/utils/functions/getInitialUrl/getInitialUrl.js';
-import { useInternalDynamicContext } from '../../../context/DynamicContext/useDynamicContext/useInternalDynamicContext/useInternalDynamicContext.js';
+import '../../../components/InlineWidget/InlineWidget.js';
+import '../../../components/IsBrowser/IsBrowser.js';
+import '../../../components/Popper/Popper/Popper.js';
+import '../../../components/Popper/PopperContext/PopperContext.js';
 
 const EmbeddedRevealView = ({ exportPrivateKey, isPromptForExport = false, }) => {
     var _a, _b, _c;
@@ -129,6 +129,8 @@ const EmbeddedRevealView = ({ exportPrivateKey, isPromptForExport = false, }) =>
     const { getEOAWallet, isSmartWallet } = useSmartWallets();
     const [acknowledgement1, setAcknowledgement1] = useState(false);
     const iframeContainerRef = useRef(null);
+    const [showSkeleton, setShowSkeleton] = useState(false);
+    const [waasExportComplete, setWaasExportComplete] = useState(false);
     if (!primaryWallet) {
         throw new DynamicError('No primary wallet found', INVALID_WALLET_DATA);
     }
@@ -142,7 +144,6 @@ const EmbeddedRevealView = ({ exportPrivateKey, isPromptForExport = false, }) =>
     const walletProperties = (_b = (_a = user === null || user === void 0 ? void 0 : user.verifiedCredentials) === null || _a === void 0 ? void 0 : _a.find(({ walletName, id }) => (walletName === null || walletName === void 0 ? void 0 : walletName.startsWith('turnkey')) && id === primaryTurnkeyWalletId)) === null || _b === void 0 ? void 0 : _b.walletProperties;
     const isTurnkeyHDWallet = walletProperties === null || walletProperties === void 0 ? void 0 : walletProperties.turnkeyHDWalletId;
     const wallet = (_c = (primaryWallet && getEOAWallet(primaryWallet))) !== null && _c !== void 0 ? _c : primaryWallet;
-    const [showSkeleton, setShowSkeleton] = useState(false);
     // eslint-disable-next-line arrow-body-style
     useEffect(() => {
         return () => {
@@ -208,17 +209,22 @@ const EmbeddedRevealView = ({ exportPrivateKey, isPromptForExport = false, }) =>
             }
         }
         if (isWaasWallet) {
-            try {
-                return yield exportWaasCredential({
-                    address: exportPrivateKey ? wallet === null || wallet === void 0 ? void 0 : wallet.address : undefined,
-                    iframeContainer: iframeContainerRef.current,
-                    user,
-                    wallet: wallet,
-                });
-            }
-            catch (_k) {
-                return undefined;
-            }
+            // Start the export in the background
+            exportWaasCredential({
+                address: exportPrivateKey ? wallet === null || wallet === void 0 ? void 0 : wallet.address : undefined,
+                iframeContainer: iframeContainerRef.current,
+                user,
+                wallet: wallet,
+            })
+                .then(() => {
+                setWaasExportComplete(true);
+            })
+                .catch((error) => {
+                logger.error(`Failed in exporting waas wallet ${wallet === null || wallet === void 0 ? void 0 : wallet.id}`, error);
+                dynamicEvents.emit('embeddedWalletRevealFailed', error);
+            });
+            // Return true immediately to show skeleton
+            return true;
         }
         return undefined;
     }), {
@@ -227,6 +233,12 @@ const EmbeddedRevealView = ({ exportPrivateKey, isPromptForExport = false, }) =>
             dynamicEvents.emit('embeddedWalletRevealFailed', err);
         },
     });
+    // Reset waasExportComplete when data changes to false (new export starting)
+    useEffect(() => {
+        if (!data) {
+            setWaasExportComplete(false);
+        }
+    }, [data]);
     const errorText = useMemo(() => {
         if (!error) {
             return undefined;
@@ -257,14 +269,22 @@ const EmbeddedRevealView = ({ exportPrivateKey, isPromptForExport = false, }) =>
         if (data) {
             // Show skeleton first
             setShowSkeleton(true);
-            // After a delay, hide skeleton and show the iframe
-            const timer = setTimeout(() => {
-                setShowSkeleton(false);
-            }, 2000);
-            return () => clearTimeout(timer);
+            if (isWaasWallet) {
+                // For WAAS wallets, hide skeleton when export is actually complete
+                if (waasExportComplete) {
+                    setShowSkeleton(false);
+                }
+            }
+            else {
+                // For other wallets, use the fixed 2-second delay
+                const timer = setTimeout(() => {
+                    setShowSkeleton(false);
+                }, 2000);
+                return () => clearTimeout(timer);
+            }
         }
         return;
-    }, [data]);
+    }, [data, isWaasWallet, waasExportComplete]);
     const closeButton = (jsx(IconButton, { onClick: () => {
             setShowAuthFlow(false);
         }, type: 'button', children: jsx(SvgClose, {}) }));

package/src/lib/views/EmbeddedReveal/utils/turnkeyExport/turnkeyExport.cjs

@@ -7,8 +7,10 @@ var _tslib = require('../../../../../../_virtual/_tslib.cjs');
 var walletConnectorCore = require('@dynamic-labs/wallet-connector-core');
 var utils = require('@dynamic-labs/utils');
 require('@dynamic-labs/sdk-api-core');
-require('../../../../config/ApiEndpoint.cjs');
-require('../../../../store/state/projectSettings/projectSettings.cjs');
+require('@dynamic-labs-sdk/client/core');
+require('react');
+require('@dynamic-labs-sdk/client');
+require('../../../../client/client.cjs');
 require('../../../../utils/constants/values.cjs');
 var errors = require('../../../../utils/constants/errors.cjs');
 require('@dynamic-labs/multi-wallet');
@@ -16,19 +18,17 @@ require('../../../../shared/logger.cjs');
 require('../../../../utils/constants/colors.cjs');
 require('react-international-phone');
 require('@dynamic-labs/iconic');
-require('react');
 require('react/jsx-runtime');
 require('../../../../context/ViewContext/ViewContext.cjs');
 require('@dynamic-labs/wallet-book');
 require('../../../../shared/consts/index.cjs');
 require('../../../../store/state/nonce/nonce.cjs');
-require('@dynamic-labs-sdk/client/core');
-require('@dynamic-labs-sdk/client');
-require('../../../../client/client.cjs');
-require('../../../../events/dynamicEvents.cjs');
 require('../../../../store/state/dynamicContextProps/dynamicContextProps.cjs');
 require('../../../../store/state/primaryWalletId/primaryWalletId.cjs');
 require('../../../../store/state/connectedWalletsInfo/connectedWalletsInfo.cjs');
+require('../../../../events/dynamicEvents.cjs');
+require('../../../../store/state/projectSettings/projectSettings.cjs');
+require('../../../../config/ApiEndpoint.cjs');
 var embeddedWallets = require('../../../../data/api/embeddedWallets/embeddedWallets.cjs');
 require('../../../../locale/locale.cjs');
 

package/src/lib/views/EmbeddedReveal/utils/turnkeyExport/turnkeyExport.js

@@ -3,8 +3,10 @@ import { __awaiter } from '../../../../../../_virtual/_tslib.js';
 import { isPasskeyWalletConnector } from '@dynamic-labs/wallet-connector-core';
 import { DynamicError } from '@dynamic-labs/utils';
 import '@dynamic-labs/sdk-api-core';
-import '../../../../config/ApiEndpoint.js';
-import '../../../../store/state/projectSettings/projectSettings.js';
+import '@dynamic-labs-sdk/client/core';
+import 'react';
+import '@dynamic-labs-sdk/client';
+import '../../../../client/client.js';
 import '../../../../utils/constants/values.js';
 import { INVALID_WALLET_DATA, ERROR_PROCESSING_REVEAL_REQUEST, USER_NOT_LOGGED_IN } from '../../../../utils/constants/errors.js';
 import '@dynamic-labs/multi-wallet';
@@ -12,19 +14,17 @@ import '../../../../shared/logger.js';
 import '../../../../utils/constants/colors.js';
 import 'react-international-phone';
 import '@dynamic-labs/iconic';
-import 'react';
 import 'react/jsx-runtime';
 import '../../../../context/ViewContext/ViewContext.js';
 import '@dynamic-labs/wallet-book';
 import '../../../../shared/consts/index.js';
 import '../../../../store/state/nonce/nonce.js';
-import '@dynamic-labs-sdk/client/core';
-import '@dynamic-labs-sdk/client';
-import '../../../../client/client.js';
-import '../../../../events/dynamicEvents.js';
 import '../../../../store/state/dynamicContextProps/dynamicContextProps.js';
 import '../../../../store/state/primaryWalletId/primaryWalletId.js';
 import '../../../../store/state/connectedWalletsInfo/connectedWalletsInfo.js';
+import '../../../../events/dynamicEvents.js';
+import '../../../../store/state/projectSettings/projectSettings.js';
+import '../../../../config/ApiEndpoint.js';
 import { exportEmbeddedWallet } from '../../../../data/api/embeddedWallets/embeddedWallets.js';
 import '../../../../locale/locale.js';
 

package/src/lib/views/EmbeddedReveal/utils/waasExport/waasExport.cjs

@@ -5,8 +5,8 @@ Object.defineProperty(exports, '__esModule', { value: true });
 
 var _tslib = require('../../../../../../_virtual/_tslib.cjs');
 var utils = require('@dynamic-labs/utils');
-var errors = require('../../../../utils/constants/errors.cjs');
 var logger = require('../../../../shared/logger.cjs');
+var errors = require('../../../../utils/constants/errors.cjs');
 
 const handleExportInitCheck = ({ user, wallet, }) => {
     var _a, _b;
@@ -31,7 +31,7 @@ const exportWaasCredential = (_a) => _tslib.__awaiter(void 0, [_a], void 0, func
         user,
         wallet,
     });
-    connector.exportPrivateKey({
+    yield connector.exportPrivateKey({
         accountAddress: address || (walletProperties === null || walletProperties === void 0 ? void 0 : walletProperties.accountAddress),
         displayContainer: iframeContainer,
     });

package/src/lib/views/EmbeddedReveal/utils/waasExport/waasExport.d.ts

@@ -1,5 +1,5 @@
-import { Wallet } from '../../../../shared';
 import { UserProfile } from '../../../../..';
+import { Wallet } from '../../../../shared';
 export declare const exportWaasCredential: ({ user, wallet, address, iframeContainer, }: {
     user: UserProfile | undefined;
     wallet: Wallet | null;