@dynamic-labs/sdk-react-core 4.18.5 → 4.18.6

package/src/lib/utils/functions/getOauthLoginUrl/getOauthLoginUrl.cjs

@@ -54,6 +54,9 @@ const getOauthLoginUrl = (providers, providerType) => {
         delete baseProps.client_id;
         baseProps.client_key = provider.clientId;
     }
+    if (providerType === sdkApiCore.ProviderEnum.Google) {
+        baseProps.access_type = 'offline';
+    }
     if (provider.scopes) {
         baseProps.scope = provider.scopes;
     }

package/src/lib/utils/functions/getOauthLoginUrl/getOauthLoginUrl.js

@@ -50,6 +50,9 @@ const getOauthLoginUrl = (providers, providerType) => {
         delete baseProps.client_id;
         baseProps.client_key = provider.clientId;
     }
+    if (providerType === ProviderEnum.Google) {
+        baseProps.access_type = 'offline';
+    }
     if (provider.scopes) {
         baseProps.scope = provider.scopes;
     }

package/src/lib/utils/hooks/useEmbeddedWalletSessionKeys/useEmbeddedWalletSessionKeys.cjs

@@ -45,6 +45,10 @@ const useEmbeddedWalletSessionKeys = ({ environmentId, projectSettings, }) => {
         const decodedSessionKeys = sessionKeysSS
             ? JSON.parse(Buffer.from(sessionKeysSS, 'base64').toString())
             : undefined;
+        utils.tracing.logEvent('session-key', 'registerEmbeddedWalletSessionKey', utils.tracing.formatObject({
+            hasDecodedSessionKeys: Boolean(decodedSessionKeys),
+            publicKey: decodedSessionKeys === null || decodedSessionKeys === void 0 ? void 0 : decodedSessionKeys.publicKey,
+        }));
         if (!decodedSessionKeys) {
             walletConnectorCore.logger.warn('Could not find session keys. Re-authentication is required to create new session keys.');
             dynamicEvents.dynamicEvents.emit('triggerLogout');
@@ -53,12 +57,20 @@ const useEmbeddedWalletSessionKeys = ({ environmentId, projectSettings, }) => {
         if (!user$1) {
             throw new Error('User not found');
         }
-        if (decodedSessionKeys.expirationDate &&
+        const isSessionKeyValid = decodedSessionKeys.expirationDate &&
             new Date() <= new Date(decodedSessionKeys.expirationDate) &&
-            !ignoreRestore) {
+            !ignoreRestore;
+        utils.tracing.logEvent('session-key', 'isSessionKeyValid', utils.tracing.formatObject({
+            isSessionKeyValid: Boolean(isSessionKeyValid),
+        }));
+        if (isSessionKeyValid) {
             // scenario 3
             return decodedSessionKeys;
         }
+        utils.tracing.logEvent('session-key', 'decodedSessionKeys', utils.tracing.formatObject({
+            publicKey: decodedSessionKeys.publicKey,
+            registered: decodedSessionKeys.registered,
+        }));
         let publicKey;
         let privateKey;
         let privateKeyJwk;
@@ -74,6 +86,7 @@ const useEmbeddedWalletSessionKeys = ({ environmentId, projectSettings, }) => {
             privateKey = nextPrivateKey;
             privateKeyJwk = nextPrivateKeyJwk;
             prevSessionKeySignature = yield utils$1.p256Sign(decodedSessionKeys.privateKeyJwk, user$1.sessionId);
+            utils.tracing.logEvent('session-key', 'Loaded prevSessionKeySignature', utils.tracing.formatObject({ nextPublicKey, prevSessionKeySignature }));
         }
         let resp;
         const primaryWalletId$1 = primaryWalletId.getPrimaryWalletId();
@@ -99,12 +112,19 @@ const useEmbeddedWalletSessionKeys = ({ environmentId, projectSettings, }) => {
             throw error;
         }
         const expirationDate = new Date(resp.expiresAt * 1000);
+        utils.tracing.logEvent('session-key', 'Created new session key', utils.tracing.formatObject({
+            expirationDate,
+            publicKey,
+        }));
         utils.StorageService.setItem(localStorage.SECURE_ENCLAVE_WALLET_SESSION_KEYS, toEncodedFormat(publicKey, privateKey, privateKeyJwk, true, expirationDate), localStorage.SECURE_ENCLAVE_WALLET_SESSION_KEYS_STORAGE_OPTIONS);
         return { expirationDate, privateKey, publicKey };
     });
     const generateSessionKey = () => _tslib.__awaiter(void 0, void 0, void 0, function* () {
         const { private: privateKey, public: publicKey, privateJwk, } = yield utils$1.p256Keygen();
         // convert to base64 and store the session keys in session storage
+        utils.tracing.logEvent('session-key', 'Generated new session key', utils.tracing.formatObject({
+            publicKey,
+        }));
         utils.StorageService.setItem(localStorage.SECURE_ENCLAVE_WALLET_SESSION_KEYS, toEncodedFormat(publicKey, privateKey, privateJwk, false), localStorage.SECURE_ENCLAVE_WALLET_SESSION_KEYS_STORAGE_OPTIONS);
         return { privateKey, privateKeyJwk: privateJwk, publicKey };
     });
@@ -114,8 +134,12 @@ const useEmbeddedWalletSessionKeys = ({ environmentId, projectSettings, }) => {
             ? JSON.parse(Buffer.from(sessionKeysSS, 'base64').toString())
             : undefined;
         if (!(decodedSessionKeys === null || decodedSessionKeys === void 0 ? void 0 : decodedSessionKeys.publicKey)) {
+            utils.tracing.logEvent('session-key', 'getSessionPublicKey', 'Could not find session keys.');
             throw new Error('Could not find session keys.');
         }
+        utils.tracing.logEvent('session-key', 'getSessionPublicKey', utils.tracing.formatObject({
+            publicKey: decodedSessionKeys === null || decodedSessionKeys === void 0 ? void 0 : decodedSessionKeys.publicKey,
+        }));
         return decodedSessionKeys === null || decodedSessionKeys === void 0 ? void 0 : decodedSessionKeys.publicKey;
     };
     // this is a temporary fix to ensure that session keys are registered on signin for all wallets
@@ -133,7 +157,10 @@ const useEmbeddedWalletSessionKeys = ({ environmentId, projectSettings, }) => {
         const sessionKeysString = JSON.stringify(sessionKeys);
         return Buffer.from(sessionKeysString).toString('base64');
     };
-    const removeSessionKey = React.useCallback(() => utils.StorageService.removeItem(localStorage.SECURE_ENCLAVE_WALLET_SESSION_KEYS, localStorage.SECURE_ENCLAVE_WALLET_SESSION_KEYS_STORAGE_OPTIONS), []);
+    const removeSessionKey = React.useCallback(() => {
+        utils.tracing.logEvent('session-key', 'removeSessionKey');
+        utils.StorageService.removeItem(localStorage.SECURE_ENCLAVE_WALLET_SESSION_KEYS, localStorage.SECURE_ENCLAVE_WALLET_SESSION_KEYS_STORAGE_OPTIONS);
+    }, []);
     return {
         generateSessionKey,
         getSessionPublicKey,

package/src/lib/utils/hooks/useEmbeddedWalletSessionKeys/useEmbeddedWalletSessionKeys.js

@@ -1,7 +1,7 @@
 'use client'
 import { __awaiter } from '../../../../../_virtual/_tslib.js';
 import { useCallback } from 'react';
-import { StorageService, InvalidEmbeddedWalletSessionKeyError } from '@dynamic-labs/utils';
+import { tracing, StorageService, InvalidEmbeddedWalletSessionKeyError } from '@dynamic-labs/utils';
 import { logger } from '@dynamic-labs/wallet-connector-core';
 import { SECURE_ENCLAVE_WALLET_SESSION_KEYS, SECURE_ENCLAVE_WALLET_SESSION_KEYS_STORAGE_OPTIONS } from '../../constants/localStorage.js';
 import { p256Sign, p256Keygen } from '../useEmbeddedWallet/useSecureEnclaveEmbeddedWallet/utils.js';
@@ -41,6 +41,10 @@ const useEmbeddedWalletSessionKeys = ({ environmentId, projectSettings, }) => {
         const decodedSessionKeys = sessionKeysSS
             ? JSON.parse(Buffer.from(sessionKeysSS, 'base64').toString())
             : undefined;
+        tracing.logEvent('session-key', 'registerEmbeddedWalletSessionKey', tracing.formatObject({
+            hasDecodedSessionKeys: Boolean(decodedSessionKeys),
+            publicKey: decodedSessionKeys === null || decodedSessionKeys === void 0 ? void 0 : decodedSessionKeys.publicKey,
+        }));
         if (!decodedSessionKeys) {
             logger.warn('Could not find session keys. Re-authentication is required to create new session keys.');
             dynamicEvents.emit('triggerLogout');
@@ -49,12 +53,20 @@ const useEmbeddedWalletSessionKeys = ({ environmentId, projectSettings, }) => {
         if (!user) {
             throw new Error('User not found');
         }
-        if (decodedSessionKeys.expirationDate &&
+        const isSessionKeyValid = decodedSessionKeys.expirationDate &&
             new Date() <= new Date(decodedSessionKeys.expirationDate) &&
-            !ignoreRestore) {
+            !ignoreRestore;
+        tracing.logEvent('session-key', 'isSessionKeyValid', tracing.formatObject({
+            isSessionKeyValid: Boolean(isSessionKeyValid),
+        }));
+        if (isSessionKeyValid) {
             // scenario 3
             return decodedSessionKeys;
         }
+        tracing.logEvent('session-key', 'decodedSessionKeys', tracing.formatObject({
+            publicKey: decodedSessionKeys.publicKey,
+            registered: decodedSessionKeys.registered,
+        }));
         let publicKey;
         let privateKey;
         let privateKeyJwk;
@@ -70,6 +82,7 @@ const useEmbeddedWalletSessionKeys = ({ environmentId, projectSettings, }) => {
             privateKey = nextPrivateKey;
             privateKeyJwk = nextPrivateKeyJwk;
             prevSessionKeySignature = yield p256Sign(decodedSessionKeys.privateKeyJwk, user.sessionId);
+            tracing.logEvent('session-key', 'Loaded prevSessionKeySignature', tracing.formatObject({ nextPublicKey, prevSessionKeySignature }));
         }
         let resp;
         const primaryWalletId = getPrimaryWalletId();
@@ -95,12 +108,19 @@ const useEmbeddedWalletSessionKeys = ({ environmentId, projectSettings, }) => {
             throw error;
         }
         const expirationDate = new Date(resp.expiresAt * 1000);
+        tracing.logEvent('session-key', 'Created new session key', tracing.formatObject({
+            expirationDate,
+            publicKey,
+        }));
         StorageService.setItem(SECURE_ENCLAVE_WALLET_SESSION_KEYS, toEncodedFormat(publicKey, privateKey, privateKeyJwk, true, expirationDate), SECURE_ENCLAVE_WALLET_SESSION_KEYS_STORAGE_OPTIONS);
         return { expirationDate, privateKey, publicKey };
     });
     const generateSessionKey = () => __awaiter(void 0, void 0, void 0, function* () {
         const { private: privateKey, public: publicKey, privateJwk, } = yield p256Keygen();
         // convert to base64 and store the session keys in session storage
+        tracing.logEvent('session-key', 'Generated new session key', tracing.formatObject({
+            publicKey,
+        }));
         StorageService.setItem(SECURE_ENCLAVE_WALLET_SESSION_KEYS, toEncodedFormat(publicKey, privateKey, privateJwk, false), SECURE_ENCLAVE_WALLET_SESSION_KEYS_STORAGE_OPTIONS);
         return { privateKey, privateKeyJwk: privateJwk, publicKey };
     });
@@ -110,8 +130,12 @@ const useEmbeddedWalletSessionKeys = ({ environmentId, projectSettings, }) => {
             ? JSON.parse(Buffer.from(sessionKeysSS, 'base64').toString())
             : undefined;
         if (!(decodedSessionKeys === null || decodedSessionKeys === void 0 ? void 0 : decodedSessionKeys.publicKey)) {
+            tracing.logEvent('session-key', 'getSessionPublicKey', 'Could not find session keys.');
             throw new Error('Could not find session keys.');
         }
+        tracing.logEvent('session-key', 'getSessionPublicKey', tracing.formatObject({
+            publicKey: decodedSessionKeys === null || decodedSessionKeys === void 0 ? void 0 : decodedSessionKeys.publicKey,
+        }));
         return decodedSessionKeys === null || decodedSessionKeys === void 0 ? void 0 : decodedSessionKeys.publicKey;
     };
     // this is a temporary fix to ensure that session keys are registered on signin for all wallets
@@ -129,7 +153,10 @@ const useEmbeddedWalletSessionKeys = ({ environmentId, projectSettings, }) => {
         const sessionKeysString = JSON.stringify(sessionKeys);
         return Buffer.from(sessionKeysString).toString('base64');
     };
-    const removeSessionKey = useCallback(() => StorageService.removeItem(SECURE_ENCLAVE_WALLET_SESSION_KEYS, SECURE_ENCLAVE_WALLET_SESSION_KEYS_STORAGE_OPTIONS), []);
+    const removeSessionKey = useCallback(() => {
+        tracing.logEvent('session-key', 'removeSessionKey');
+        StorageService.removeItem(SECURE_ENCLAVE_WALLET_SESSION_KEYS, SECURE_ENCLAVE_WALLET_SESSION_KEYS_STORAGE_OPTIONS);
+    }, []);
     return {
         generateSessionKey,
         getSessionPublicKey,

package/src/lib/utils/hooks/useGlobalLoading/useGlobalLoading.cjs

@@ -5,6 +5,7 @@ Object.defineProperty(exports, '__esModule', { value: true });
 
 var React = require('react');
 var walletBook = require('@dynamic-labs/wallet-book');
+var utils = require('@dynamic-labs/utils');
 var logger = require('../../../shared/logger.cjs');
 var index = require('../../../shared/utils/functions/lastAuthenticatedAccount/index.cjs');
 var shouldFetchNonce = require('../../../shared/utils/functions/shouldFetchNonce/shouldFetchNonce.cjs');
@@ -16,6 +17,11 @@ const useGlobalLoading = ({ connectedInfo, connectedWallets, projectSettings, pr
     // Once we declare the SDK as loaded, we do not ever want to flip back to false
     const hasLoaded = React.useRef(false);
     const loadingStart = React.useRef(new Date().getTime());
+    const didTraceSdkMountedRef = React.useRef(false);
+    if (!didTraceSdkMountedRef.current) {
+        didTraceSdkMountedRef.current = true;
+        utils.tracing.logEvent('sdk-react-core.initialization', 'sdk-mounted');
+    }
     const { sessionValidation } = loadingAndLifecycle.useLoadingAndLifecycle();
     const authMode$1 = authMode.useAuthMode();
     const isFetchingNonce = React.useMemo(() => shouldFetchNonce.shouldFetchNonce({
@@ -31,6 +37,7 @@ const useGlobalLoading = ({ connectedInfo, connectedWallets, projectSettings, pr
             primaryWallet,
             user,
         });
+        utils.tracing.logEvent('sdk-react-core.initialization', 'sdk-loaded');
         // Calculate how long loading took and emit log
         if (enableInstrumentation) {
             const loadingTime = new Date().getTime() - loadingStart.current;

package/src/lib/utils/hooks/useGlobalLoading/useGlobalLoading.js

@@ -1,6 +1,7 @@
 'use client'
 import { useRef, useMemo } from 'react';
 import { isWalletBookPopulated } from '@dynamic-labs/wallet-book';
+import { tracing } from '@dynamic-labs/utils';
 import { logger } from '../../../shared/logger.js';
 import { lastAuthenticatedAccount } from '../../../shared/utils/functions/lastAuthenticatedAccount/index.js';
 import { shouldFetchNonce } from '../../../shared/utils/functions/shouldFetchNonce/shouldFetchNonce.js';
@@ -12,6 +13,11 @@ const useGlobalLoading = ({ connectedInfo, connectedWallets, projectSettings, pr
     // Once we declare the SDK as loaded, we do not ever want to flip back to false
     const hasLoaded = useRef(false);
     const loadingStart = useRef(new Date().getTime());
+    const didTraceSdkMountedRef = useRef(false);
+    if (!didTraceSdkMountedRef.current) {
+        didTraceSdkMountedRef.current = true;
+        tracing.logEvent('sdk-react-core.initialization', 'sdk-mounted');
+    }
     const { sessionValidation } = useLoadingAndLifecycle();
     const authMode = useAuthMode();
     const isFetchingNonce = useMemo(() => shouldFetchNonce({
@@ -27,6 +33,7 @@ const useGlobalLoading = ({ connectedInfo, connectedWallets, projectSettings, pr
             primaryWallet,
             user,
         });
+        tracing.logEvent('sdk-react-core.initialization', 'sdk-loaded');
         // Calculate how long loading took and emit log
         if (enableInstrumentation) {
             const loadingTime = new Date().getTime() - loadingStart.current;

package/src/lib/utils/hooks/useSocialAuth/useSocialAuth.cjs

@@ -203,9 +203,17 @@ const useSocialAuth = ({ onSettled, onError, onFarcasterUrl, }) => {
     const completeConnection = React.useCallback((_a) => _tslib.__awaiter(void 0, [_a], void 0, function* ({ authMode, provider, state, authCode, captchaToken, verifier, telegramAuthToken, forceCreateUser = false, }) {
         try {
             let sessionPublicKey = undefined;
+            utils.tracing.logEvent('oauth', 'completeConnection', utils.tracing.formatObject({
+                authMode,
+                provider,
+                shouldRegisterSessionKeysOnSignin: shouldRegisterSessionKeysOnSignin(),
+            }));
             if (shouldRegisterSessionKeysOnSignin()) {
                 const keypair = yield generateSessionKey();
                 sessionPublicKey = keypair.publicKey;
+                utils.tracing.logEvent('oauth', 'completeConnection key generated', utils.tracing.formatObject({
+                    sessionPublicKey,
+                }));
             }
             if (authMode === 'signin') {
                 if (provider === sdkApiCore.ProviderEnum.Telegram && telegramAuthToken) {

package/src/lib/utils/hooks/useSocialAuth/useSocialAuth.js

@@ -3,7 +3,7 @@ import { __awaiter } from '../../../../../_virtual/_tslib.js';
 import { useMemo, useState, useCallback } from 'react';
 import { ProviderEnum } from '@dynamic-labs/sdk-api-core';
 import { SocialOAuthErrorCode } from '@dynamic-labs/types';
-import { SocialAccountAlreadyExistsError, PlatformService, isMobile, Oauth2Service } from '@dynamic-labs/utils';
+import { SocialAccountAlreadyExistsError, tracing, PlatformService, isMobile, Oauth2Service } from '@dynamic-labs/utils';
 import '../../../context/DynamicContext/DynamicContext.js';
 import '../../../store/state/loadingAndLifecycle/loadingAndLifecycle.js';
 import { logger } from '../../../shared/logger.js';
@@ -199,9 +199,17 @@ const useSocialAuth = ({ onSettled, onError, onFarcasterUrl, }) => {
     const completeConnection = useCallback((_a) => __awaiter(void 0, [_a], void 0, function* ({ authMode, provider, state, authCode, captchaToken, verifier, telegramAuthToken, forceCreateUser = false, }) {
         try {
             let sessionPublicKey = undefined;
+            tracing.logEvent('oauth', 'completeConnection', tracing.formatObject({
+                authMode,
+                provider,
+                shouldRegisterSessionKeysOnSignin: shouldRegisterSessionKeysOnSignin(),
+            }));
             if (shouldRegisterSessionKeysOnSignin()) {
                 const keypair = yield generateSessionKey();
                 sessionPublicKey = keypair.publicKey;
+                tracing.logEvent('oauth', 'completeConnection key generated', tracing.formatObject({
+                    sessionPublicKey,
+                }));
             }
             if (authMode === 'signin') {
                 if (provider === ProviderEnum.Telegram && telegramAuthToken) {

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

@@ -101,6 +101,7 @@ require('@hcaptcha/react-hcaptcha');
 var getProperErrorMessage = require('../../../modals/SignMessageConfirmationModal/getProperErrorMessage.cjs');
 var DynamicWidgetContext = require('../../../widgets/DynamicWidget/context/DynamicWidgetContext.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');
@@ -123,6 +124,8 @@ const EmbeddedRevealView = ({ exportPrivateKey, isPromptForExport = false, }) =>
     const { primaryWallet, user, setShowAuthFlow, environmentId } = useInternalDynamicContext.useInternalDynamicContext();
     const { handleAcknowledgeExportPrompt } = useSyncEmbeddedWalletFlow.useSyncEmbeddedWalletFlow();
     const { isTurnkeyWallet } = useIsTurnkeyWallet.useIsTurnkeyWallet();
+    //should use useIsWaasWallet hook
+    const isWaasWallet = user === null || user === void 0 ? void 0 : user.verifiedCredentials.find((vc) => { var _a; return (_a = vc.walletName) === null || _a === void 0 ? void 0 : _a.startsWith('dynamicwaas'); });
     const { setDynamicWidgetView } = DynamicWidgetContext.useWidgetContext();
     const { pushView } = ViewContext.useViewContext();
     const { getEOAWallet, isSmartWallet } = useSmartWallets.useSmartWallets();
@@ -131,10 +134,17 @@ const EmbeddedRevealView = ({ exportPrivateKey, isPromptForExport = false, }) =>
     if (!primaryWallet) {
         throw new utils.DynamicError('No primary wallet found', errors.INVALID_WALLET_DATA);
     }
-    const primaryTurnkeyWalletId = getPrimaryTurnkeyWalletId.getPrimaryTurnkeyWalletId(primaryWallet.id, (user === null || user === void 0 ? void 0 : user.verifiedCredentials) || []);
+    let primaryTurnkeyWalletId;
+    try {
+        primaryTurnkeyWalletId = getPrimaryTurnkeyWalletId.getPrimaryTurnkeyWalletId(primaryWallet.id, (user === null || user === void 0 ? void 0 : user.verifiedCredentials) || []);
+    }
+    catch (error) {
+        // waas wallet
+    }
     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 () => {
@@ -143,6 +153,11 @@ const EmbeddedRevealView = ({ exportPrivateKey, isPromptForExport = false, }) =>
                     wallet: wallet,
                 });
             }
+            if (isWaasWallet) {
+                waasExport.cleanupExport({
+                    wallet: wallet,
+                });
+            }
         };
         // only run once on unmount
         // eslint-disable-next-line react-hooks/exhaustive-deps
@@ -157,11 +172,14 @@ const EmbeddedRevealView = ({ exportPrivateKey, isPromptForExport = false, }) =>
         if (walletConnectorCore.isSessionKeyCompatibleWalletConnector(wallet === null || wallet === void 0 ? void 0 : wallet.connector)) {
             yield ((_e = wallet === null || wallet === void 0 ? void 0 : wallet.connector) === null || _e === void 0 ? void 0 : _e.createOrRestoreSession());
         }
-        return turnkeyExport.initExport({
-            iframeContainer: iframeContainerElement,
-            iframeElementId: constants.iframeElementId,
-            wallet: wallet,
-        });
+        if (isTurnkeyWallet) {
+            return turnkeyExport.initExport({
+                iframeContainer: iframeContainerElement,
+                iframeElementId: constants.iframeElementId,
+                wallet: wallet,
+            });
+        }
+        return;
     }));
     const { mutate: handleExportWallet, isLoading, error, data, } = useMutation.useMutation(() => _tslib.__awaiter(void 0, void 0, void 0, function* () {
         var _f, _g, _h;
@@ -191,6 +209,19 @@ 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;
+            }
+        }
         return undefined;
     }), {
         onFailure: (err) => {
@@ -223,18 +254,38 @@ const EmbeddedRevealView = ({ exportPrivateKey, isPromptForExport = false, }) =>
                 !error && (jsxRuntime.jsxs("div", { className: 'embedded-reveal-view__zerodev-warning', children: [jsxRuntime.jsxs("div", { className: 'embedded-reveal-view__zerodev-warning__title-row', children: [jsxRuntime.jsx(info.ReactComponent, { className: 'embedded-reveal-view__zerodev-warning__icon' }), jsxRuntime.jsx(Typography.Typography, { variant: 'body_normal', weight: 'bold', copykey: 'dyn_embedded_reveal.aa_warning.title', children: t('dyn_embedded_reveal.aa_warning.title') })] }), jsxRuntime.jsxs(Typography.Typography, { variant: 'body_normal', weight: 'regular', copykey: 'dyn_embedded_reveal.aa_warning.subtitle', children: [t('dyn_embedded_reveal.aa_warning.subtitle'), jsxRuntime.jsx("button", { onClick: () => {
                                     setShowAuthFlow(false);
                                     setDynamicWidgetView('send-balance');
-                                }, className: 'embedded-reveal-view__zerodev-warning__link-button', children: jsxRuntime.jsx(Typography.Typography, { variant: 'body_normal', weight: 'regular', color: 'primary', className: 'underline', copykey: 'dyn_embedded_reveal.aa_warning.button', children: t('dyn_embedded_reveal.aa_warning.button') }) })] })] })), 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("div", { className: 'embedded-reveal-view__header__hero', children: jsxRuntime.jsx(exportEmbeddedHero.ReactComponent, {}) }) })) })] }));
+                                }, className: 'embedded-reveal-view__zerodev-warning__link-button', children: jsxRuntime.jsx(Typography.Typography, { variant: 'body_normal', weight: 'regular', color: 'primary', className: 'underline', copykey: 'dyn_embedded_reveal.aa_warning.button', children: t('dyn_embedded_reveal.aa_warning.button') }) })] })] })), jsxRuntime.jsx("div", { className: 'embedded-reveal-view__body__description', children: !(!isLoading && data && !error) && (jsxRuntime.jsx("div", { className: 'embedded-reveal-view__header', children: jsxRuntime.jsx("div", { className: 'embedded-reveal-view__header__hero', 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');
+                ? 'height: 88px; min-height: 88px; width: 100%; border: none; background: transparent; overflow: visible;'
+                : 'height: 120px; min-height: 120px; width: 100%; border: none; background: transparent; overflow: visible;');
+        }
+    }, [
+        iframeContainerRef,
+        data,
+        isTurnkeyHDWallet,
+        isWaasWallet,
+        exportPrivateKey,
+    ]);
+    React.useEffect(() => {
+        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);
         }
-    }, [iframeContainerRef, data, isTurnkeyHDWallet, exportPrivateKey]);
-    const closeButton = (jsxRuntime.jsx(IconButton.IconButton, { onClick: () => setShowAuthFlow(false), type: 'button', children: jsxRuntime.jsx(close.ReactComponent, {}) }));
+        return;
+    }, [data]);
+    const closeButton = (jsxRuntime.jsx(IconButton.IconButton, { onClick: () => {
+            setShowAuthFlow(false);
+        }, type: 'button', children: jsxRuntime.jsx(close.ReactComponent, {}) }));
     const hasInjectedCredential = !isLoading && data && !error;
     const credentialTitle = !isTurnkeyHDWallet || exportPrivateKey
         ? t('dyn_embedded_reveal.private_key_title')
@@ -252,15 +303,48 @@ const EmbeddedRevealView = ({ exportPrivateKey, isPromptForExport = false, }) =>
     const handleClickUnlink = () => {
         pushView('embedded-delete-view');
     };
-    return (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx(ModalHeader.ModalHeader, { trailing: isPromptForExport ? null : 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, isTurnkeyWallet ? (jsxRuntime.jsx("div", { id: constants.iframeContainerId, style: { display: data ? 'block' : 'none' }, ref: iframeContainerRef })) : null, hasInjectedCredential ? (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx(TypographyButton.TypographyButton, { buttonPadding: 'large', buttonVariant: 'brand-primary', onClick: () => setShowAuthFlow(false), loading: isLoading, copykey: 'dyn_embedded_reveal.done_button_label', typographyProps: {
+    // Extract nested ternaries into separate functions for clarity
+    const getBodyClassName = () => {
+        const baseClass = 'embedded-reveal-view__body';
+        if (isWaasWallet && hasInjectedCredential && title === credentialTitle) {
+            return `${baseClass} ${baseClass}--waas-credentials`;
+        }
+        return baseClass;
+    };
+    const getCredentialContainerClassName = () => {
+        const baseClass = 'embedded-reveal-view__body__credential-container';
+        if (title !== credentialTitle) {
+            return `${baseClass} ${baseClass}--hidden`;
+        }
+        if (isWaasWallet) {
+            return `${baseClass} ${baseClass}--waas`;
+        }
+        return baseClass;
+    };
+    const getIframeContainerClassName = () => {
+        const baseClass = 'embedded-reveal-view__body__iframe-container';
+        if (!data) {
+            return `${baseClass} ${baseClass}--hidden`;
+        }
+        if (showSkeleton) {
+            return `${baseClass} ${baseClass}--invisible`;
+        }
+        return baseClass;
+    };
+    return (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx(ModalHeader.ModalHeader, { trailing: isPromptForExport ? null : 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: getBodyClassName(), children: [(!isWaasWallet ||
+                            !hasInjectedCredential ||
+                            title !== credentialTitle) &&
+                            contentHeader, isTurnkeyWallet || isWaasWallet ? (jsxRuntime.jsxs("div", { className: getCredentialContainerClassName(), children: [jsxRuntime.jsx("div", { id: constants.iframeContainerId, className: getIframeContainerClassName(), ref: iframeContainerRef }), showSkeleton && data && (jsxRuntime.jsxs("div", { className: 'embedded-reveal-view__body__skeleton-container', children: [jsxRuntime.jsx("div", { className: 'embedded-reveal-view__body__skeleton-line', "data-testid": 'private-key-skeleton' }), jsxRuntime.jsx("div", { className: 'embedded-reveal-view__body__skeleton-line' }), jsxRuntime.jsx("div", { className: 'embedded-reveal-view__body__skeleton-line' }), jsxRuntime.jsx("div", { className: 'embedded-reveal-view__body__skeleton-line embedded-reveal-view__body__skeleton-line--short' })] }))] })) : null, hasInjectedCredential ? (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx(TypographyButton.TypographyButton, { buttonPadding: 'medium', 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') }), !exportPrivateKey && (jsxRuntime.jsx(TypographyButton.TypographyButton, { buttonClassName: 'embedded-reveal-view__body__unlink_button', buttonVariant: 'tertiary', buttonPadding: 'none', copykey: 'dyn_embedded_reveal.unlink', onClick: handleClickUnlink, typographyProps: {
                                         color: 'secondary',
                                         variant: 'button_tertiary',
-                                    }, children: t('dyn_embedded_reveal.unlink') }))] })) : (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsxs("div", { className: 'embedded-reveal-view__body__description', children: [jsxRuntime.jsx("div", { className: 'embedded-reveal-view__body__badge-container', children: jsxRuntime.jsx(Badge.Badge, { text: t('dyn_embedded_reveal.badge_label'), className: 'embedded-reveal-view__body__badge' }) }), jsxRuntime.jsx(Typography.Typography, { variant: 'body_normal', color: 'primary', weight: 'regular', copykey: 'dyn_embedded_reveal.prompt_for_export_description', children: t('dyn_embedded_reveal.prompt_for_export_description') })] }), 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, { height: 16, width: 16 }) }), jsxRuntime.jsxs("div", { className: 'embedded-reveal-view__body__card__statement__text', children: [jsxRuntime.jsxs(Typography.Typography, { variant: 'body_small', color: 'primary', copykey: 'dyn_embedded_reveal.statement_1.title', children: [t('dyn_embedded_reveal.statement_1.title'), ":"] }), jsxRuntime.jsx(Typography.Typography, { variant: 'body_small', color: 'primary', 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, { height: 16, width: 16 }) }), jsxRuntime.jsx("div", { className: 'embedded-reveal-view__body__card__statement__text', children: jsxRuntime.jsx(Typography.Typography, { variant: 'body_small', color: 'primary', copykey: 'dyn_embedded_reveal.statement_2.title', children: t('dyn_embedded_reveal.statement_2.title') }) })] })] }), jsxRuntime.jsx("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_small', color: 'primary', style: { letterSpacing: '-0.15px' }, copykey: 'dyn_embedded_reveal.checkbox_label', children: t('dyn_embedded_reveal.checkbox_label') }) })] }) }), jsxRuntime.jsx(NeedHelpSection.NeedHelpSection, { isExport: true }), jsxRuntime.jsxs("div", { className: 'embedded-reveal-view__body__button_section', children: [isPromptForExport && (jsxRuntime.jsx(TypographyButton.TypographyButton, { buttonPadding: 'large', buttonVariant: 'primary', onClick: () => {
+                                    }, children: t('dyn_embedded_reveal.unlink') }))] })) : (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsxs("div", { className: 'embedded-reveal-view__body__description', children: [jsxRuntime.jsx("div", { className: 'embedded-reveal-view__body__badge-container', children: jsxRuntime.jsx(Badge.Badge, { text: t('dyn_embedded_reveal.badge_label'), className: 'embedded-reveal-view__body__badge' }) }), jsxRuntime.jsx(Typography.Typography, { variant: 'body_normal', color: 'primary', weight: 'regular', copykey: 'dyn_embedded_reveal.prompt_for_export_description', children: t('dyn_embedded_reveal.prompt_for_export_description') })] }), 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, { height: 16, width: 16 }) }), jsxRuntime.jsxs("div", { className: 'embedded-reveal-view__body__card__statement__text', children: [jsxRuntime.jsxs(Typography.Typography, { variant: 'body_small', color: 'primary', copykey: 'dyn_embedded_reveal.statement_1.title', children: [t('dyn_embedded_reveal.statement_1.title'), ":"] }), jsxRuntime.jsx(Typography.Typography, { variant: 'body_small', color: 'primary', 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, { height: 16, width: 16 }) }), jsxRuntime.jsx("div", { className: 'embedded-reveal-view__body__card__statement__text', children: jsxRuntime.jsx(Typography.Typography, { variant: 'body_small', color: 'primary', copykey: 'dyn_embedded_reveal.statement_2.title', children: t('dyn_embedded_reveal.statement_2.title') }) })] })] }), jsxRuntime.jsx("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_small', color: 'primary', style: { letterSpacing: '-0.15px' }, copykey: 'dyn_embedded_reveal.checkbox_label', children: t('dyn_embedded_reveal.checkbox_label') }) })] }) }), jsxRuntime.jsx(NeedHelpSection.NeedHelpSection, { isExport: true }), jsxRuntime.jsxs("div", { className: 'embedded-reveal-view__body__button_section', children: [isPromptForExport && (jsxRuntime.jsx(TypographyButton.TypographyButton, { buttonPadding: 'medium', buttonVariant: 'primary', onClick: () => {
                                                 handleAcknowledgeExportPrompt();
                                                 setShowAuthFlow(false);
-                                            }, dataTestId: 'embedded-reveal-button', copykey: 'dyn_embedded_reveal.skip_button_label', expanded: true, buttonClassName: 'embedded-reveal-view__body__button', children: t('dyn_embedded_reveal.skip_button_label') })), jsxRuntime.jsx(TypographyButton.TypographyButton, { buttonPadding: 'large', buttonVariant: 'brand-primary', typographyProps: {
+                                            }, dataTestId: 'embedded-reveal-button', copykey: 'dyn_embedded_reveal.skip_button_label', expanded: true, buttonClassName: 'embedded-reveal-view__body__button', children: t('dyn_embedded_reveal.skip_button_label') })), jsxRuntime.jsx(TypographyButton.TypographyButton, { buttonPadding: 'medium', buttonVariant: 'brand-primary', typographyProps: {
                                                 color: 'inherit',
                                             }, onClick: () => handleExportWallet(), disabled: !acknowledgement1 || exportLoading, loading: isLoading, dataTestId: 'embedded-reveal-button', copykey: 'dyn_embedded_reveal.reveal_button_label', style: { width: '100%' }, className: 'embedded-reveal-view__body__button', expanded: true, children: isPromptForExport
                                                 ? t('dyn_embedded_reveal.backup_button_label')