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

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

@@ -97,6 +97,7 @@ import '@hcaptcha/react-hcaptcha';
 import { getProperErrorMessage } from '../../../modals/SignMessageConfirmationModal/getProperErrorMessage.js';
 import { useWidgetContext } from '../../../widgets/DynamicWidget/context/DynamicWidgetContext.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';
@@ -119,6 +120,8 @@ const EmbeddedRevealView = ({ exportPrivateKey, isPromptForExport = false, }) =>
     const { primaryWallet, user, setShowAuthFlow, environmentId } = useInternalDynamicContext();
     const { handleAcknowledgeExportPrompt } = useSyncEmbeddedWalletFlow();
     const { isTurnkeyWallet } = 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 } = useWidgetContext();
     const { pushView } = useViewContext();
     const { getEOAWallet, isSmartWallet } = useSmartWallets();
@@ -127,10 +130,17 @@ const EmbeddedRevealView = ({ exportPrivateKey, isPromptForExport = false, }) =>
     if (!primaryWallet) {
         throw new DynamicError('No primary wallet found', INVALID_WALLET_DATA);
     }
-    const primaryTurnkeyWalletId = getPrimaryTurnkeyWalletId(primaryWallet.id, (user === null || user === void 0 ? void 0 : user.verifiedCredentials) || []);
+    let primaryTurnkeyWalletId;
+    try {
+        primaryTurnkeyWalletId = 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] = useState(false);
     // eslint-disable-next-line arrow-body-style
     useEffect(() => {
         return () => {
@@ -139,6 +149,11 @@ const EmbeddedRevealView = ({ exportPrivateKey, isPromptForExport = false, }) =>
                     wallet: wallet,
                 });
             }
+            if (isWaasWallet) {
+                cleanupExport$1({
+                    wallet: wallet,
+                });
+            }
         };
         // only run once on unmount
         // eslint-disable-next-line react-hooks/exhaustive-deps
@@ -153,11 +168,14 @@ const EmbeddedRevealView = ({ exportPrivateKey, isPromptForExport = false, }) =>
         if (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 initExport({
-            iframeContainer: iframeContainerElement,
-            iframeElementId,
-            wallet: wallet,
-        });
+        if (isTurnkeyWallet) {
+            return initExport({
+                iframeContainer: iframeContainerElement,
+                iframeElementId,
+                wallet: wallet,
+            });
+        }
+        return;
     }));
     const { mutate: handleExportWallet, isLoading, error, data, } = useMutation(() => __awaiter(void 0, void 0, void 0, function* () {
         var _f, _g, _h;
@@ -187,6 +205,19 @@ 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;
+            }
+        }
         return undefined;
     }), {
         onFailure: (err) => {
@@ -219,18 +250,38 @@ const EmbeddedRevealView = ({ exportPrivateKey, isPromptForExport = false, }) =>
                 !error && (jsxs("div", { className: 'embedded-reveal-view__zerodev-warning', children: [jsxs("div", { className: 'embedded-reveal-view__zerodev-warning__title-row', children: [jsx(SvgInfo, { className: 'embedded-reveal-view__zerodev-warning__icon' }), jsx(Typography, { variant: 'body_normal', weight: 'bold', copykey: 'dyn_embedded_reveal.aa_warning.title', children: t('dyn_embedded_reveal.aa_warning.title') })] }), jsxs(Typography, { variant: 'body_normal', weight: 'regular', copykey: 'dyn_embedded_reveal.aa_warning.subtitle', children: [t('dyn_embedded_reveal.aa_warning.subtitle'), jsx("button", { onClick: () => {
                                     setShowAuthFlow(false);
                                     setDynamicWidgetView('send-balance');
-                                }, className: 'embedded-reveal-view__zerodev-warning__link-button', children: jsx(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') }) })] })] })), 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("div", { className: 'embedded-reveal-view__header__hero', children: jsx(SvgExportEmbeddedHero, {}) }) })) })] }));
+                                }, className: 'embedded-reveal-view__zerodev-warning__link-button', children: jsx(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') }) })] })] })), jsx("div", { className: 'embedded-reveal-view__body__description', children: !(!isLoading && data && !error) && (jsx("div", { className: 'embedded-reveal-view__header', children: jsx("div", { className: 'embedded-reveal-view__header__hero', 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');
+                ? '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,
+    ]);
+    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 = (jsx(IconButton, { onClick: () => setShowAuthFlow(false), type: 'button', children: jsx(SvgClose, {}) }));
+        return;
+    }, [data]);
+    const closeButton = (jsx(IconButton, { onClick: () => {
+            setShowAuthFlow(false);
+        }, type: 'button', children: jsx(SvgClose, {}) }));
     const hasInjectedCredential = !isLoading && data && !error;
     const credentialTitle = !isTurnkeyHDWallet || exportPrivateKey
         ? t('dyn_embedded_reveal.private_key_title')
@@ -248,15 +299,48 @@ const EmbeddedRevealView = ({ exportPrivateKey, isPromptForExport = false, }) =>
     const handleClickUnlink = () => {
         pushView('embedded-delete-view');
     };
-    return (jsxs(Fragment, { children: [jsx(ModalHeader, { trailing: isPromptForExport ? null : 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, isTurnkeyWallet ? (jsx("div", { id: iframeContainerId, style: { display: data ? 'block' : 'none' }, ref: iframeContainerRef })) : null, hasInjectedCredential ? (jsxs(Fragment, { children: [jsx(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 (jsxs(Fragment, { children: [jsx(ModalHeader, { trailing: isPromptForExport ? null : 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: getBodyClassName(), children: [(!isWaasWallet ||
+                            !hasInjectedCredential ||
+                            title !== credentialTitle) &&
+                            contentHeader, isTurnkeyWallet || isWaasWallet ? (jsxs("div", { className: getCredentialContainerClassName(), children: [jsx("div", { id: iframeContainerId, className: getIframeContainerClassName(), ref: iframeContainerRef }), showSkeleton && data && (jsxs("div", { className: 'embedded-reveal-view__body__skeleton-container', children: [jsx("div", { className: 'embedded-reveal-view__body__skeleton-line', "data-testid": 'private-key-skeleton' }), jsx("div", { className: 'embedded-reveal-view__body__skeleton-line' }), jsx("div", { className: 'embedded-reveal-view__body__skeleton-line' }), jsx("div", { className: 'embedded-reveal-view__body__skeleton-line embedded-reveal-view__body__skeleton-line--short' })] }))] })) : null, hasInjectedCredential ? (jsxs(Fragment, { children: [jsx(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 && (jsx(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') }))] })) : (jsxs(Fragment, { children: [jsxs("div", { className: 'embedded-reveal-view__body__description', children: [jsx("div", { className: 'embedded-reveal-view__body__badge-container', children: jsx(Badge, { text: t('dyn_embedded_reveal.badge_label'), className: 'embedded-reveal-view__body__badge' }) }), jsx(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 && 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, { height: 16, width: 16 }) }), jsxs("div", { className: 'embedded-reveal-view__body__card__statement__text', children: [jsxs(Typography, { variant: 'body_small', color: 'primary', copykey: 'dyn_embedded_reveal.statement_1.title', children: [t('dyn_embedded_reveal.statement_1.title'), ":"] }), jsx(Typography, { variant: 'body_small', color: 'primary', 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, { height: 16, width: 16 }) }), jsx("div", { className: 'embedded-reveal-view__body__card__statement__text', children: jsx(Typography, { variant: 'body_small', color: 'primary', copykey: 'dyn_embedded_reveal.statement_2.title', children: t('dyn_embedded_reveal.statement_2.title') }) })] })] }), jsx("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_small', color: 'primary', style: { letterSpacing: '-0.15px' }, copykey: 'dyn_embedded_reveal.checkbox_label', children: t('dyn_embedded_reveal.checkbox_label') }) })] }) }), jsx(NeedHelpSection, { isExport: true }), jsxs("div", { className: 'embedded-reveal-view__body__button_section', children: [isPromptForExport && (jsx(TypographyButton, { buttonPadding: 'large', buttonVariant: 'primary', onClick: () => {
+                                    }, children: t('dyn_embedded_reveal.unlink') }))] })) : (jsxs(Fragment, { children: [jsxs("div", { className: 'embedded-reveal-view__body__description', children: [jsx("div", { className: 'embedded-reveal-view__body__badge-container', children: jsx(Badge, { text: t('dyn_embedded_reveal.badge_label'), className: 'embedded-reveal-view__body__badge' }) }), jsx(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 && 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, { height: 16, width: 16 }) }), jsxs("div", { className: 'embedded-reveal-view__body__card__statement__text', children: [jsxs(Typography, { variant: 'body_small', color: 'primary', copykey: 'dyn_embedded_reveal.statement_1.title', children: [t('dyn_embedded_reveal.statement_1.title'), ":"] }), jsx(Typography, { variant: 'body_small', color: 'primary', 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, { height: 16, width: 16 }) }), jsx("div", { className: 'embedded-reveal-view__body__card__statement__text', children: jsx(Typography, { variant: 'body_small', color: 'primary', copykey: 'dyn_embedded_reveal.statement_2.title', children: t('dyn_embedded_reveal.statement_2.title') }) })] })] }), jsx("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_small', color: 'primary', style: { letterSpacing: '-0.15px' }, copykey: 'dyn_embedded_reveal.checkbox_label', children: t('dyn_embedded_reveal.checkbox_label') }) })] }) }), jsx(NeedHelpSection, { isExport: true }), jsxs("div", { className: 'embedded-reveal-view__body__button_section', children: [isPromptForExport && (jsx(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') })), jsx(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') })), jsx(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')

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

@@ -0,0 +1 @@
+export * from './waasExport';

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

@@ -0,0 +1,53 @@
+'use client'
+'use strict';
+
+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');
+
+const handleExportInitCheck = ({ user, wallet, }) => {
+    var _a, _b;
+    if (!user) {
+        throw new utils.DynamicError(errors.USER_NOT_LOGGED_IN);
+    }
+    if (!(wallet === null || wallet === void 0 ? void 0 : wallet.connector) || !(wallet === null || wallet === void 0 ? void 0 : wallet.id)) {
+        throw new utils.DynamicError('Connector is missing. Please make sure you added EthereumWalletConnectors and/or SolanaWalletConnectors to DynamicProvider settings');
+    }
+    const connector = wallet.connector;
+    const walletProperties = (_b = (_a = user.verifiedCredentials) === null || _a === void 0 ? void 0 : _a.find(({ walletName }) => walletName === null || walletName === void 0 ? void 0 : walletName.startsWith('dynamicwaas'))) === null || _b === void 0 ? void 0 : _b.walletProperties;
+    if (!walletProperties) {
+        throw new utils.DynamicError('Invalid token!');
+    }
+    return {
+        connector,
+        walletProperties,
+    };
+};
+const exportWaasCredential = (_a) => _tslib.__awaiter(void 0, [_a], void 0, function* ({ user, wallet, address, iframeContainer, }) {
+    const { connector, walletProperties } = handleExportInitCheck({
+        user,
+        wallet,
+    });
+    connector.exportPrivateKey({
+        accountAddress: address || (walletProperties === null || walletProperties === void 0 ? void 0 : walletProperties.accountAddress),
+        displayContainer: iframeContainer,
+    });
+    return true;
+});
+const cleanupExport = (_b) => _tslib.__awaiter(void 0, [_b], void 0, function* ({ wallet }) {
+    var _c;
+    const connector = wallet === null || wallet === void 0 ? void 0 : wallet.connector;
+    // clear iframeStamper and its reference
+    try {
+        (_c = connector === null || connector === void 0 ? void 0 : connector.getExportHandler()) === null || _c === void 0 ? void 0 : _c.clear();
+    }
+    catch (error) {
+        logger.logger.error('Error cleaning up export:', error);
+    }
+});
+
+exports.cleanupExport = cleanupExport;
+exports.exportWaasCredential = exportWaasCredential;

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

@@ -0,0 +1,11 @@
+import { Wallet } from '../../../../shared';
+import { UserProfile } from '../../../../..';
+export declare const exportWaasCredential: ({ user, wallet, address, iframeContainer, }: {
+    user: UserProfile | undefined;
+    wallet: Wallet | null;
+    address?: string;
+    iframeContainer: HTMLIFrameElement;
+}) => Promise<boolean>;
+export declare const cleanupExport: ({ wallet }: {
+    wallet: Wallet | null;
+}) => Promise<void>;

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

@@ -0,0 +1,48 @@
+'use client'
+import { __awaiter } from '../../../../../../_virtual/_tslib.js';
+import { DynamicError } from '@dynamic-labs/utils';
+import { USER_NOT_LOGGED_IN } from '../../../../utils/constants/errors.js';
+import { logger } from '../../../../shared/logger.js';
+
+const handleExportInitCheck = ({ user, wallet, }) => {
+    var _a, _b;
+    if (!user) {
+        throw new DynamicError(USER_NOT_LOGGED_IN);
+    }
+    if (!(wallet === null || wallet === void 0 ? void 0 : wallet.connector) || !(wallet === null || wallet === void 0 ? void 0 : wallet.id)) {
+        throw new DynamicError('Connector is missing. Please make sure you added EthereumWalletConnectors and/or SolanaWalletConnectors to DynamicProvider settings');
+    }
+    const connector = wallet.connector;
+    const walletProperties = (_b = (_a = user.verifiedCredentials) === null || _a === void 0 ? void 0 : _a.find(({ walletName }) => walletName === null || walletName === void 0 ? void 0 : walletName.startsWith('dynamicwaas'))) === null || _b === void 0 ? void 0 : _b.walletProperties;
+    if (!walletProperties) {
+        throw new DynamicError('Invalid token!');
+    }
+    return {
+        connector,
+        walletProperties,
+    };
+};
+const exportWaasCredential = (_a) => __awaiter(void 0, [_a], void 0, function* ({ user, wallet, address, iframeContainer, }) {
+    const { connector, walletProperties } = handleExportInitCheck({
+        user,
+        wallet,
+    });
+    connector.exportPrivateKey({
+        accountAddress: address || (walletProperties === null || walletProperties === void 0 ? void 0 : walletProperties.accountAddress),
+        displayContainer: iframeContainer,
+    });
+    return true;
+});
+const cleanupExport = (_b) => __awaiter(void 0, [_b], void 0, function* ({ wallet }) {
+    var _c;
+    const connector = wallet === null || wallet === void 0 ? void 0 : wallet.connector;
+    // clear iframeStamper and its reference
+    try {
+        (_c = connector === null || connector === void 0 ? void 0 : connector.getExportHandler()) === null || _c === void 0 ? void 0 : _c.clear();
+    }
+    catch (error) {
+        logger.error('Error cleaning up export:', error);
+    }
+});
+
+export { cleanupExport, exportWaasCredential };

package/src/lib/views/UserDeleteAccountView/UserDeleteAccountView.cjs

@@ -125,9 +125,7 @@ const UserDeleteAccountView = () => {
     const hasEmbeddedWallet = React.useMemo(() => user === null || user === void 0 ? void 0 : user.verifiedCredentials.some((wallet) => wallet.walletProvider === sdkApiCore.WalletProviderEnum.EmbeddedWallet), [user]);
     return (jsxRuntime.jsx("div", { className: 'delete-account-view', children: jsxRuntime.jsxs("div", { className: 'delete-account-view__content', children: [jsxRuntime.jsx("div", { className: 'warning-section', children: jsxRuntime.jsxs("div", { className: 'warning-icon-container', children: [jsxRuntime.jsx(warningRed.ReactComponent, { className: 'warning-icon' }), jsxRuntime.jsx(exclamation.ReactComponent, { className: 'exclamation-icon' })] }) }), jsxRuntime.jsx("div", { className: 'message-box', children: jsxRuntime.jsx(Typography.Typography, { variant: 'body_normal', weight: 'bold', children: t('dyn_settings.delete_account.description') }) }), jsxRuntime.jsxs("div", { className: 'confirmation-section', children: [jsxRuntime.jsxs("div", { className: 'checkbox-container', children: [jsxRuntime.jsx("input", { type: 'checkbox', checked: isBackupConfirmed, onChange: handleBackupConfirmChange, "data-testid": 'delete-account-checkbox' }), jsxRuntime.jsx(Typography.Typography, { className: 'checkbox-text', variant: 'body_small', children: hasEmbeddedWallet
                                         ? t('dyn_settings.delete_account.backup_confirmation_embedded')
-                                        : t('dyn_settings.delete_account.backup_confirmation_no_embedded') })] }), jsxRuntime.jsxs("div", { className: 'input-section', children: [jsxRuntime.jsx(Typography.Typography, { className: 'input-label', variant: 'body_small', children: t('dyn_settings.delete_account.type_delete') }), jsxRuntime.jsx(Input.Input, { id: 'delete-confirmation', label: t('dyn_settings.delete_account.type_delete_label'), value: confirmText, onChange: handleConfirmTextChange, placeholder: 'DELETE', variant: 'dense', "data-testid": 'delete-account-input' })] }), error && (jsxRuntime.jsx(Typography.Typography, { variant: 'body_small', color: 'error-1', children: error.message }))] }), jsxRuntime.jsxs("div", { className: 'button-group', children: [jsxRuntime.jsx(TypographyButton.TypographyButton, { buttonClassName: 'cancel-button', buttonVariant: 'primary', type: 'button', onClick: handleCancel, copykey: 'dyn_settings.delete_account.cancel', children: t('dyn_settings.delete_account.cancel') }), jsxRuntime.jsx(TypographyButton.TypographyButton, { buttonClassName: 'delete-button', buttonVariant: 'primary', type: 'submit', onClick: handleDelete, disabled: !isDeleteEnabled, typographyProps: {
-                                color: isDeleteEnabled ? 'white' : 'tertiary',
-                            }, copykey: 'dyn_settings.delete_account.confirm', children: isLoading
+                                        : t('dyn_settings.delete_account.backup_confirmation_no_embedded') })] }), jsxRuntime.jsxs("div", { className: 'input-section', children: [jsxRuntime.jsx(Typography.Typography, { className: 'input-label', variant: 'body_small', children: t('dyn_settings.delete_account.type_delete') }), jsxRuntime.jsx(Input.Input, { id: 'delete-confirmation', label: t('dyn_settings.delete_account.type_delete_label'), value: confirmText, onChange: handleConfirmTextChange, placeholder: 'DELETE', variant: 'dense', "data-testid": 'delete-account-input' })] }), error && (jsxRuntime.jsx(Typography.Typography, { variant: 'body_small', color: 'error-1', children: error.message }))] }), jsxRuntime.jsxs("div", { className: 'button-group', children: [jsxRuntime.jsx(TypographyButton.TypographyButton, { buttonClassName: 'cancel-button', buttonVariant: 'primary', type: 'button', onClick: handleCancel, copykey: 'dyn_settings.delete_account.cancel', children: t('dyn_settings.delete_account.cancel') }), jsxRuntime.jsx(TypographyButton.TypographyButton, { buttonClassName: 'delete-button', buttonVariant: 'danger', type: 'submit', onClick: handleDelete, disabled: !isDeleteEnabled, copykey: 'dyn_settings.delete_account.confirm', children: isLoading
                                 ? t('dyn_settings.delete_account.deleting')
                                 : t('dyn_settings.delete_account.confirm') })] })] }) }));
 };

package/src/lib/views/UserDeleteAccountView/UserDeleteAccountView.js

@@ -121,9 +121,7 @@ const UserDeleteAccountView = () => {
     const hasEmbeddedWallet = useMemo(() => user === null || user === void 0 ? void 0 : user.verifiedCredentials.some((wallet) => wallet.walletProvider === WalletProviderEnum.EmbeddedWallet), [user]);
     return (jsx("div", { className: 'delete-account-view', children: jsxs("div", { className: 'delete-account-view__content', children: [jsx("div", { className: 'warning-section', children: jsxs("div", { className: 'warning-icon-container', children: [jsx(SvgWarningRed, { className: 'warning-icon' }), jsx(SvgExclamation, { className: 'exclamation-icon' })] }) }), jsx("div", { className: 'message-box', children: jsx(Typography, { variant: 'body_normal', weight: 'bold', children: t('dyn_settings.delete_account.description') }) }), jsxs("div", { className: 'confirmation-section', children: [jsxs("div", { className: 'checkbox-container', children: [jsx("input", { type: 'checkbox', checked: isBackupConfirmed, onChange: handleBackupConfirmChange, "data-testid": 'delete-account-checkbox' }), jsx(Typography, { className: 'checkbox-text', variant: 'body_small', children: hasEmbeddedWallet
                                         ? t('dyn_settings.delete_account.backup_confirmation_embedded')
-                                        : t('dyn_settings.delete_account.backup_confirmation_no_embedded') })] }), jsxs("div", { className: 'input-section', children: [jsx(Typography, { className: 'input-label', variant: 'body_small', children: t('dyn_settings.delete_account.type_delete') }), jsx(Input, { id: 'delete-confirmation', label: t('dyn_settings.delete_account.type_delete_label'), value: confirmText, onChange: handleConfirmTextChange, placeholder: 'DELETE', variant: 'dense', "data-testid": 'delete-account-input' })] }), error && (jsx(Typography, { variant: 'body_small', color: 'error-1', children: error.message }))] }), jsxs("div", { className: 'button-group', children: [jsx(TypographyButton, { buttonClassName: 'cancel-button', buttonVariant: 'primary', type: 'button', onClick: handleCancel, copykey: 'dyn_settings.delete_account.cancel', children: t('dyn_settings.delete_account.cancel') }), jsx(TypographyButton, { buttonClassName: 'delete-button', buttonVariant: 'primary', type: 'submit', onClick: handleDelete, disabled: !isDeleteEnabled, typographyProps: {
-                                color: isDeleteEnabled ? 'white' : 'tertiary',
-                            }, copykey: 'dyn_settings.delete_account.confirm', children: isLoading
+                                        : t('dyn_settings.delete_account.backup_confirmation_no_embedded') })] }), jsxs("div", { className: 'input-section', children: [jsx(Typography, { className: 'input-label', variant: 'body_small', children: t('dyn_settings.delete_account.type_delete') }), jsx(Input, { id: 'delete-confirmation', label: t('dyn_settings.delete_account.type_delete_label'), value: confirmText, onChange: handleConfirmTextChange, placeholder: 'DELETE', variant: 'dense', "data-testid": 'delete-account-input' })] }), error && (jsx(Typography, { variant: 'body_small', color: 'error-1', children: error.message }))] }), jsxs("div", { className: 'button-group', children: [jsx(TypographyButton, { buttonClassName: 'cancel-button', buttonVariant: 'primary', type: 'button', onClick: handleCancel, copykey: 'dyn_settings.delete_account.cancel', children: t('dyn_settings.delete_account.cancel') }), jsx(TypographyButton, { buttonClassName: 'delete-button', buttonVariant: 'danger', type: 'submit', onClick: handleDelete, disabled: !isDeleteEnabled, copykey: 'dyn_settings.delete_account.confirm', children: isLoading
                                 ? t('dyn_settings.delete_account.deleting')
                                 : t('dyn_settings.delete_account.confirm') })] })] }) }));
 };

package/src/lib/widgets/DynamicWidget/components/DynamicWidgetViews/mapViewToComponent.cjs

@@ -10,6 +10,7 @@ var SendBalanceWidgetView = require('../../views/SendBalanceWidgetView/SendBalan
 var ManagePasskeysWidgetView = require('../../views/ManagePasskeysWidgetView/ManagePasskeysWidgetView.cjs');
 var SettingsView = require('../../views/SettingsView/SettingsView.cjs');
 var AccountAndSecuritySettingsView = require('../../views/AccountAndSecuritySettingsView/AccountAndSecuritySettingsView.cjs');
+var SessionManagementView = require('../../views/SessionManagementView/SessionManagementView.cjs');
 var ChooseLinkedWalletView = require('../../views/ChooseLinkedWalletView/ChooseLinkedWalletView.cjs');
 var ChooseOnrampProviderView = require('../../views/ChooseOnrampProviderView/ChooseOnrampProviderView.cjs');
 var ChooseWalletFundingMethod = require('../../views/ChooseWalletFundingMethod/ChooseWalletFundingMethod.cjs');
@@ -18,6 +19,7 @@ var DepositView = require('../../views/DepositView/DepositView.cjs');
 var GlobalWalletView = require('../../views/GlobalWalletView/GlobalWalletView.cjs');
 var ManageMfaWidgetView = require('../../views/ManageMfaWidgetView/ManageMfaWidgetView.cjs');
 var ReceiveWalletFunds = require('../../views/ReceiveWalletFunds/ReceiveWalletFunds.cjs');
+var SessionManagementInfoView = require('../../views/SessionManagementView/SessionManagementInfoView/SessionManagementInfoView.cjs');
 
 const mapViewToComponent = {
     'account-and-security-settings': AccountAndSecuritySettingsView.AccountAndSecuritySettingsView,
@@ -34,6 +36,8 @@ const mapViewToComponent = {
     profile: ProfileView.ProfileView,
     'receive-wallet-funds': ReceiveWalletFunds.ReceiveWalletFunds,
     'send-balance': SendBalanceWidgetView.SendBalanceWidgetView,
+    'session-management': SessionManagementView.SessionManagementView,
+    'session-management-info': SessionManagementInfoView.SessionManagementInfoView,
     settings: SettingsView.SettingsView,
     wallets: WalletsView.WalletsView,
 };

package/src/lib/widgets/DynamicWidget/components/DynamicWidgetViews/mapViewToComponent.d.ts

@@ -18,6 +18,8 @@ export declare const mapViewToComponent: {
     profile: import("react").FC;
     'receive-wallet-funds': import("react").FC<import("../../views/ReceiveWalletFunds/types").ReceiveWalletFundsProps>;
     'send-balance': import("react").FC;
+    'session-management': import("react").FC;
+    'session-management-info': import("react").FC;
     settings: import("react").FC;
     wallets: import("react").FC;
 };

package/src/lib/widgets/DynamicWidget/components/DynamicWidgetViews/mapViewToComponent.js

@@ -6,6 +6,7 @@ import { SendBalanceWidgetView } from '../../views/SendBalanceWidgetView/SendBal
 import { ManagePasskeysWidgetView } from '../../views/ManagePasskeysWidgetView/ManagePasskeysWidgetView.js';
 import { SettingsView } from '../../views/SettingsView/SettingsView.js';
 import { AccountAndSecuritySettingsView } from '../../views/AccountAndSecuritySettingsView/AccountAndSecuritySettingsView.js';
+import { SessionManagementView } from '../../views/SessionManagementView/SessionManagementView.js';
 import { ChooseLinkedWalletView } from '../../views/ChooseLinkedWalletView/ChooseLinkedWalletView.js';
 import { ChooseOnrampProviderView } from '../../views/ChooseOnrampProviderView/ChooseOnrampProviderView.js';
 import { ChooseWalletFundingMethod } from '../../views/ChooseWalletFundingMethod/ChooseWalletFundingMethod.js';
@@ -14,6 +15,7 @@ import { DepositView } from '../../views/DepositView/DepositView.js';
 import { GlobalWalletView } from '../../views/GlobalWalletView/GlobalWalletView.js';
 import { ManageMfaWidgetView } from '../../views/ManageMfaWidgetView/ManageMfaWidgetView.js';
 import { ReceiveWalletFunds } from '../../views/ReceiveWalletFunds/ReceiveWalletFunds.js';
+import { SessionManagementInfoView } from '../../views/SessionManagementView/SessionManagementInfoView/SessionManagementInfoView.js';
 
 const mapViewToComponent = {
     'account-and-security-settings': AccountAndSecuritySettingsView,
@@ -30,6 +32,8 @@ const mapViewToComponent = {
     profile: ProfileView,
     'receive-wallet-funds': ReceiveWalletFunds,
     'send-balance': SendBalanceWidgetView,
+    'session-management': SessionManagementView,
+    'session-management-info': SessionManagementInfoView,
     settings: SettingsView,
     wallets: WalletsView,
 };

package/src/lib/widgets/DynamicWidget/context/DynamicWidgetContext.types.d.ts

@@ -9,9 +9,11 @@ export declare const DynamicPasskeyWidgetViews: readonly ["manage-passkeys"];
 export declare const DynamicMfaWidgetViews: readonly ["manage-mfa", "manage-mfa-no-footer"];
 export type DynamicPasskeyWidgetViewsType = typeof DynamicPasskeyWidgetViews[number];
 export type DynamicMfaWidgetViewsType = typeof DynamicMfaWidgetViews[number];
+export declare const DynamicSessionManagementViews: readonly ["session-management", "session-management-info"];
+export type DynamicSessionManagementViewsType = typeof DynamicSessionManagementViews[number];
 export declare const DynamicTransactionsWidgetViews: readonly ["send-balance"];
 export type DynamicTransactionsWidgetViewsType = typeof DynamicTransactionsWidgetViews[number];
-export type DynamicWidgetViews = 'wallets' | 'profile' | 'edit-profile' | 'choose-wallet-funding-method' | 'receive-wallet-funds' | DynamicTransactionsWidgetViewsType | DynamicPasskeyWidgetViewsType | DynamicMfaWidgetViewsType | DynamicSettingsType | DynamicGlobalWalletType | 'connected-apps' | 'deposit-view' | 'choose-onramp-provider' | 'choose-linked-wallet';
+export type DynamicWidgetViews = 'wallets' | 'profile' | 'edit-profile' | 'choose-wallet-funding-method' | 'receive-wallet-funds' | DynamicTransactionsWidgetViewsType | DynamicPasskeyWidgetViewsType | DynamicMfaWidgetViewsType | DynamicSettingsType | DynamicGlobalWalletType | DynamicSessionManagementViewsType | 'connected-apps' | 'deposit-view' | 'choose-onramp-provider' | 'choose-linked-wallet';
 export type DynamicWidgetViewMapConstraint = Record<DynamicWidgetViews, FC<any>>;
 export type DynamicWidgetViewMap = typeof mapViewToComponent;
 export type SetDynamicWidgetView = <T extends DynamicWidgetViews>(view: T, props?: ComponentProps<DynamicWidgetViewMap[T]>) => void;

package/src/lib/widgets/DynamicWidget/views/AccountAndSecuritySettingsView/AccountAndSecuritySettingsView.cjs

@@ -22,6 +22,7 @@ var chevronLeft = require('../../../../shared/assets/chevron-left.cjs');
 var exportPrivateKey = require('../../../../shared/assets/export-private-key.cjs');
 var exportRecoveryPhrase = require('../../../../shared/assets/export-recovery-phrase.cjs');
 var footerInfoIcon = require('../../../../shared/assets/footer-info-icon.cjs');
+var session = require('../../../../shared/assets/session.cjs');
 var shield = require('../../../../shared/assets/shield.cjs');
 var signInWithEmail = require('../../../../shared/assets/sign-in-with-email.cjs');
 var ViewContext = require('../../../../context/ViewContext/ViewContext.cjs');
@@ -43,6 +44,7 @@ require('../../../../locale/locale.cjs');
 require('../../../../store/state/dynamicContextProps/dynamicContextProps.cjs');
 require('../../../../store/state/primaryWalletId/primaryWalletId.cjs');
 require('../../../../store/state/connectedWalletsInfo/connectedWalletsInfo.cjs');
+var isZKSyncEnabled = require('../../../../utils/functions/isZKSyncEnabled/isZKSyncEnabled.cjs');
 require('../../../../context/AccessDeniedContext/AccessDeniedContext.cjs');
 require('../../../../context/AccountExistsContext/AccountExistsContext.cjs');
 require('../../../../context/UserWalletsContext/UserWalletsContext.cjs');
@@ -119,7 +121,7 @@ require('../../../../shared/utils/functions/getInitialUrl/getInitialUrl.cjs');
 var useInternalDynamicContext = require('../../../../context/DynamicContext/useDynamicContext/useInternalDynamicContext/useInternalDynamicContext.cjs');
 
 const AccountAndSecuritySettingsView = () => {
-    var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k;
+    var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m;
     const { clearStackAndPush } = ViewContext.useViewContext();
     const { primaryWallet, user, setShowAuthFlow } = useInternalDynamicContext.useInternalDynamicContext();
     const projectSettings$1 = projectSettings.useProjectSettings();
@@ -144,6 +146,8 @@ const AccountAndSecuritySettingsView = () => {
         (eoaWallet && walletConnectorCore.isSessionKeyCompatibleWallet(eoaWallet));
     const shouldShowPasskeyMFA = isPasskeyEnabled && isTurnkeyWallet && !isSessionKeyCompatible;
     const isEmbeddedWallet = Boolean(wallet && ((_k = (_j = wallet === null || wallet === void 0 ? void 0 : wallet.connector) === null || _j === void 0 ? void 0 : _j.key) === null || _k === void 0 ? void 0 : _k.startsWith('turnkey')));
+    const isV3WaasWallet = Boolean(wallet && ((_m = (_l = wallet === null || wallet === void 0 ? void 0 : wallet.connector) === null || _l === void 0 ? void 0 : _l.key) === null || _m === void 0 ? void 0 : _m.startsWith('dynamicwaas')));
+    const isZKSyncWallet = React.useMemo(() => isZKSyncEnabled.isZKSyncEnabled(projectSettings$1), [projectSettings$1]);
     const handleExportClick = React.useCallback((recoveryPhrase) => _tslib.__awaiter(void 0, void 0, void 0, function* () {
         if (!isSessionKeyCompatible) {
             if (yield shouldInitRecovery()) {
@@ -183,6 +187,7 @@ const AccountAndSecuritySettingsView = () => {
     ]);
     const handleBackClick = React.useCallback(() => setDynamicWidgetView('settings'), [setDynamicWidgetView]);
     const handleMfaClick = React.useCallback(() => setDynamicWidgetView('manage-mfa'), [setDynamicWidgetView]);
+    const handleSessionManagementClick = React.useCallback(() => setDynamicWidgetView('session-management'), [setDynamicWidgetView]);
     const handlePasskeyButtonClick = React.useCallback(() => handlePasskeyClick(), [handlePasskeyClick]);
     const handleExportButtonClick = React.useCallback(() => handleExportClick(), [handleExportClick]);
     const handleExportWithPhraseClick = React.useCallback(() => handleExportClick(true), [handleExportClick]);
@@ -223,7 +228,7 @@ const AccountAndSecuritySettingsView = () => {
                                     // eslint-disable-next-line react/jsx-wrap-multilines
                                     jsxRuntime.jsxs("div", { className: 'settings-view__body__section__button__start-slot', children: [jsxRuntime.jsx(PasskeyDeviceIcon.PasskeyDeviceIcon, { className: 'settings-view__body__section__button__icon', defaultIcon: jsxRuntime.jsx(androidTouchId.ReactComponent, { "data-testid": 'default-icon' }) }), jsxRuntime.jsx(Typography.Typography, { color: 'primary', weight: 'medium', copykey: 'dyn_settings.security_section.passkey_button', children: t('dyn_settings.security_section.passkey_button') }), !isTurnkeyWalletWithAuthenticator && (jsxRuntime.jsx(Badge.Badge, { text: t('dyn_settings.tags.recommended'), copykey: 'dyn_settings.tags.recommended', variant: 'secondary' }))] }), endSlot: renderPasskeysButtonEndSlot(), disabled: isLoading, showInternalLoading: false })), isMfaEnabled && (jsxRuntime.jsx(TypographyButton.TypographyButton, { dataTestId: 'manage-mfa-button', onClick: handleMfaClick, buttonClassName: 'settings-view__body__section__button', startSlot: 
                                     // eslint-disable-next-line react/jsx-wrap-multilines
-                                    jsxRuntime.jsxs("div", { className: 'settings-view__body__section__button__start-slot', children: [jsxRuntime.jsx(shield.ReactComponent, { className: 'settings-view__body__section__button__icon' }), jsxRuntime.jsx(Typography.Typography, { color: 'primary', weight: 'medium', copykey: 'dyn_settings.security_section.mfa_button', children: t('dyn_settings.security_section.mfa_button') })] }), endSlot: jsxRuntime.jsx(chevronLeft.ReactComponent, { className: 'settings-view__body__section__button__icon-secondary--rotate' }), disabled: isLoading, showInternalLoading: false }))] }), isEmbeddedWallet && (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [isTurnkeyWallet &&
+                                    jsxRuntime.jsxs("div", { className: 'settings-view__body__section__button__start-slot', children: [jsxRuntime.jsx(shield.ReactComponent, { className: 'settings-view__body__section__button__icon' }), jsxRuntime.jsx(Typography.Typography, { color: 'primary', weight: 'medium', copykey: 'dyn_settings.security_section.mfa_button', children: t('dyn_settings.security_section.mfa_button') })] }), endSlot: jsxRuntime.jsx(chevronLeft.ReactComponent, { className: 'settings-view__body__section__button__icon-secondary--rotate' }), disabled: isLoading, showInternalLoading: false }))] }), isZKSyncWallet && (jsxRuntime.jsxs("div", { className: 'settings-view__body__section', children: [jsxRuntime.jsx("div", { className: identitySectionTitleClasses, children: t('dyn_settings.session_management.title') }), jsxRuntime.jsx(TypographyButton.TypographyButton, { dataTestId: 'session-management-button', onClick: handleSessionManagementClick, buttonClassName: 'settings-view__body__section__button', startSlot: jsxRuntime.jsxs("div", { className: 'settings-view__body__section__button__start-slot', children: [jsxRuntime.jsx(session.ReactComponent, { className: 'settings-view__body__section__button__icon' }), jsxRuntime.jsx(Typography.Typography, { color: 'primary', weight: 'medium', copykey: 'dyn_settings.session_management.session_management_button', children: t('dyn_settings.session_management.session_management_button') })] }), endSlot: jsxRuntime.jsx(chevronLeft.ReactComponent, { className: 'settings-view__body__section__button__icon-secondary--rotate' }), disabled: isLoading, showInternalLoading: false })] })), (isEmbeddedWallet || isV3WaasWallet) && (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [isTurnkeyWallet &&
                                     !hasRecoveryEmail &&
                                     !isSessionKeyCompatible && (jsxRuntime.jsxs("div", { className: 'settings-view__body__section', children: [jsxRuntime.jsxs("div", { className: identitySectionTitleClasses, children: [t('dyn_settings.identity_section.title'), jsxRuntime.jsx(Icon.Icon, { size: 'small', children: jsxRuntime.jsx(footerInfoIcon.ReactComponent, { className: 'settings-view__body__section__title__info-icon', "data-testid": 'email-info-icon-title' }) })] }), jsxRuntime.jsx(TypographyButton.TypographyButton, { dataTestId: 'manage-email-recovery-button', onClick: addEmbeddedWalletRecoveryEmail, buttonClassName: emailButtonClasses, startSlot: 
                                             // eslint-disable-next-line react/jsx-wrap-multilines

package/src/lib/widgets/DynamicWidget/views/AccountAndSecuritySettingsView/AccountAndSecuritySettingsView.js

@@ -1,7 +1,7 @@
 'use client'
 import { __awaiter } from '../../../../../../_virtual/_tslib.js';
 import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
-import { useState, useCallback, useMemo } from 'react';
+import { useState, useMemo, useCallback } from 'react';
 import { useTranslation } from 'react-i18next';
 import { isSessionKeyCompatibleWallet } from '@dynamic-labs/wallet-connector-core';
 import { Typography } from '../../../../components/Typography/Typography.js';
@@ -18,6 +18,7 @@ import { ReactComponent as SvgChevronLeft } from '../../../../shared/assets/chev
 import { ReactComponent as SvgExportPrivateKey } from '../../../../shared/assets/export-private-key.js';
 import { ReactComponent as SvgExportRecoveryPhrase } from '../../../../shared/assets/export-recovery-phrase.js';
 import { ReactComponent as SvgFooterInfoIcon } from '../../../../shared/assets/footer-info-icon.js';
+import { ReactComponent as SvgSession } from '../../../../shared/assets/session.js';
 import { ReactComponent as SvgShield } from '../../../../shared/assets/shield.js';
 import { ReactComponent as SvgSignInWithEmail } from '../../../../shared/assets/sign-in-with-email.js';
 import { useViewContext } from '../../../../context/ViewContext/ViewContext.js';
@@ -39,6 +40,7 @@ import '../../../../locale/locale.js';
 import '../../../../store/state/dynamicContextProps/dynamicContextProps.js';
 import '../../../../store/state/primaryWalletId/primaryWalletId.js';
 import '../../../../store/state/connectedWalletsInfo/connectedWalletsInfo.js';
+import { isZKSyncEnabled } from '../../../../utils/functions/isZKSyncEnabled/isZKSyncEnabled.js';
 import '../../../../context/AccessDeniedContext/AccessDeniedContext.js';
 import '../../../../context/AccountExistsContext/AccountExistsContext.js';
 import '../../../../context/UserWalletsContext/UserWalletsContext.js';
@@ -115,7 +117,7 @@ import '../../../../shared/utils/functions/getInitialUrl/getInitialUrl.js';
 import { useInternalDynamicContext } from '../../../../context/DynamicContext/useDynamicContext/useInternalDynamicContext/useInternalDynamicContext.js';
 
 const AccountAndSecuritySettingsView = () => {
-    var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k;
+    var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m;
     const { clearStackAndPush } = useViewContext();
     const { primaryWallet, user, setShowAuthFlow } = useInternalDynamicContext();
     const projectSettings = useProjectSettings();
@@ -140,6 +142,8 @@ const AccountAndSecuritySettingsView = () => {
         (eoaWallet && isSessionKeyCompatibleWallet(eoaWallet));
     const shouldShowPasskeyMFA = isPasskeyEnabled && isTurnkeyWallet && !isSessionKeyCompatible;
     const isEmbeddedWallet = Boolean(wallet && ((_k = (_j = wallet === null || wallet === void 0 ? void 0 : wallet.connector) === null || _j === void 0 ? void 0 : _j.key) === null || _k === void 0 ? void 0 : _k.startsWith('turnkey')));
+    const isV3WaasWallet = Boolean(wallet && ((_m = (_l = wallet === null || wallet === void 0 ? void 0 : wallet.connector) === null || _l === void 0 ? void 0 : _l.key) === null || _m === void 0 ? void 0 : _m.startsWith('dynamicwaas')));
+    const isZKSyncWallet = useMemo(() => isZKSyncEnabled(projectSettings), [projectSettings]);
     const handleExportClick = useCallback((recoveryPhrase) => __awaiter(void 0, void 0, void 0, function* () {
         if (!isSessionKeyCompatible) {
             if (yield shouldInitRecovery()) {
@@ -179,6 +183,7 @@ const AccountAndSecuritySettingsView = () => {
     ]);
     const handleBackClick = useCallback(() => setDynamicWidgetView('settings'), [setDynamicWidgetView]);
     const handleMfaClick = useCallback(() => setDynamicWidgetView('manage-mfa'), [setDynamicWidgetView]);
+    const handleSessionManagementClick = useCallback(() => setDynamicWidgetView('session-management'), [setDynamicWidgetView]);
     const handlePasskeyButtonClick = useCallback(() => handlePasskeyClick(), [handlePasskeyClick]);
     const handleExportButtonClick = useCallback(() => handleExportClick(), [handleExportClick]);
     const handleExportWithPhraseClick = useCallback(() => handleExportClick(true), [handleExportClick]);
@@ -219,7 +224,7 @@ const AccountAndSecuritySettingsView = () => {
                                     // eslint-disable-next-line react/jsx-wrap-multilines
                                     jsxs("div", { className: 'settings-view__body__section__button__start-slot', children: [jsx(PasskeyDeviceIcon, { className: 'settings-view__body__section__button__icon', defaultIcon: jsx(SvgAndroidTouchId, { "data-testid": 'default-icon' }) }), jsx(Typography, { color: 'primary', weight: 'medium', copykey: 'dyn_settings.security_section.passkey_button', children: t('dyn_settings.security_section.passkey_button') }), !isTurnkeyWalletWithAuthenticator && (jsx(Badge, { text: t('dyn_settings.tags.recommended'), copykey: 'dyn_settings.tags.recommended', variant: 'secondary' }))] }), endSlot: renderPasskeysButtonEndSlot(), disabled: isLoading, showInternalLoading: false })), isMfaEnabled && (jsx(TypographyButton, { dataTestId: 'manage-mfa-button', onClick: handleMfaClick, buttonClassName: 'settings-view__body__section__button', startSlot: 
                                     // eslint-disable-next-line react/jsx-wrap-multilines
-                                    jsxs("div", { className: 'settings-view__body__section__button__start-slot', children: [jsx(SvgShield, { className: 'settings-view__body__section__button__icon' }), jsx(Typography, { color: 'primary', weight: 'medium', copykey: 'dyn_settings.security_section.mfa_button', children: t('dyn_settings.security_section.mfa_button') })] }), endSlot: jsx(SvgChevronLeft, { className: 'settings-view__body__section__button__icon-secondary--rotate' }), disabled: isLoading, showInternalLoading: false }))] }), isEmbeddedWallet && (jsxs(Fragment, { children: [isTurnkeyWallet &&
+                                    jsxs("div", { className: 'settings-view__body__section__button__start-slot', children: [jsx(SvgShield, { className: 'settings-view__body__section__button__icon' }), jsx(Typography, { color: 'primary', weight: 'medium', copykey: 'dyn_settings.security_section.mfa_button', children: t('dyn_settings.security_section.mfa_button') })] }), endSlot: jsx(SvgChevronLeft, { className: 'settings-view__body__section__button__icon-secondary--rotate' }), disabled: isLoading, showInternalLoading: false }))] }), isZKSyncWallet && (jsxs("div", { className: 'settings-view__body__section', children: [jsx("div", { className: identitySectionTitleClasses, children: t('dyn_settings.session_management.title') }), jsx(TypographyButton, { dataTestId: 'session-management-button', onClick: handleSessionManagementClick, buttonClassName: 'settings-view__body__section__button', startSlot: jsxs("div", { className: 'settings-view__body__section__button__start-slot', children: [jsx(SvgSession, { className: 'settings-view__body__section__button__icon' }), jsx(Typography, { color: 'primary', weight: 'medium', copykey: 'dyn_settings.session_management.session_management_button', children: t('dyn_settings.session_management.session_management_button') })] }), endSlot: jsx(SvgChevronLeft, { className: 'settings-view__body__section__button__icon-secondary--rotate' }), disabled: isLoading, showInternalLoading: false })] })), (isEmbeddedWallet || isV3WaasWallet) && (jsxs(Fragment, { children: [isTurnkeyWallet &&
                                     !hasRecoveryEmail &&
                                     !isSessionKeyCompatible && (jsxs("div", { className: 'settings-view__body__section', children: [jsxs("div", { className: identitySectionTitleClasses, children: [t('dyn_settings.identity_section.title'), jsx(Icon, { size: 'small', children: jsx(SvgFooterInfoIcon, { className: 'settings-view__body__section__title__info-icon', "data-testid": 'email-info-icon-title' }) })] }), jsx(TypographyButton, { dataTestId: 'manage-email-recovery-button', onClick: addEmbeddedWalletRecoveryEmail, buttonClassName: emailButtonClasses, startSlot: 
                                             // eslint-disable-next-line react/jsx-wrap-multilines

package/src/lib/widgets/DynamicWidget/views/SessionManagementView/EmptySessionsView/EmptySessionsView.cjs

@@ -0,0 +1,15 @@
+'use client'
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var jsxRuntime = require('react/jsx-runtime');
+var reactI18next = require('react-i18next');
+var Typography = require('../../../../../components/Typography/Typography.cjs');
+
+const EmptySessionsView = () => {
+    const { t } = reactI18next.useTranslation();
+    return (jsxRuntime.jsx("div", { className: 'empty-sessions-view', children: jsxRuntime.jsx(Typography.Typography, { variant: 'body_normal', color: 'secondary', children: t('dyn_session_management.empty_sessions_view.title') }) }));
+};
+
+exports.EmptySessionsView = EmptySessionsView;

package/src/lib/widgets/DynamicWidget/views/SessionManagementView/EmptySessionsView/EmptySessionsView.d.ts

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

package/src/lib/widgets/DynamicWidget/views/SessionManagementView/EmptySessionsView/EmptySessionsView.js

@@ -0,0 +1,11 @@
+'use client'
+import { jsx } from 'react/jsx-runtime';
+import { useTranslation } from 'react-i18next';
+import { Typography } from '../../../../../components/Typography/Typography.js';
+
+const EmptySessionsView = () => {
+    const { t } = useTranslation();
+    return (jsx("div", { className: 'empty-sessions-view', children: jsx(Typography, { variant: 'body_normal', color: 'secondary', children: t('dyn_session_management.empty_sessions_view.title') }) }));
+};
+
+export { EmptySessionsView };

package/src/lib/widgets/DynamicWidget/views/SessionManagementView/EmptySessionsView/index.d.ts

@@ -0,0 +1 @@
+export * from './EmptySessionsView';