@dynamic-labs/sdk-react-core 1.1.0-alpha.6 → 1.1.0-alpha.8

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

@@ -6,11 +6,11 @@ var _tslib = require('../../../../../_virtual/_tslib.cjs');
 var React = require('react');
 var useInternalDynamicContext = require('../../../context/DynamicContext/useInternalDynamicContext.cjs');
 var ViewContext = require('../../../context/ViewContext/ViewContext.cjs');
-require('@dynamic-labs/sdk-api');
-require('../../../shared/logger.cjs');
+var decodeJwt = require('../../../shared/utils/functions/decodeJwt/decodeJwt.cjs');
 require('@dynamic-labs/iconic');
 require('@dynamic-labs/wallet-connector-core');
 require('react/jsx-runtime');
+require('../../../shared/logger.cjs');
 require('@dynamic-labs/wallet-book');
 require('../../constants/colors.cjs');
 require('../../../shared/utils/classes/storage/localStorage.cjs');
@@ -19,6 +19,7 @@ require('@dynamic-labs/utils');
 require('../../../shared/consts/index.cjs');
 require('@dynamic-labs/multi-wallet');
 var getAuthToken = require('../../functions/getAuthToken/getAuthToken.cjs');
+require('@dynamic-labs/sdk-api');
 var isTurnkeyEnabled = require('../../functions/isTurnkeyEnabled/isTurnkeyEnabled.cjs');
 var useEmbeddedWallet = require('../useEmbeddedWallet/useEmbeddedWallet.cjs');
 var dynamicEvents = require('../../../events/dynamicEvents.cjs');
@@ -28,7 +29,8 @@ const useEmbeddedReveal = () => {
     const { projectSettings, internalSetShowAuthFlow } = useInternalDynamicContext.useInternalDynamicContext();
     const { userHasEmbeddedWallet } = useEmbeddedWallet.useEmbeddedWallet();
     const { setView } = ViewContext.useViewContext();
-    const initExportProcess = React.useCallback(() => _tslib.__awaiter(void 0, void 0, void 0, function* () {
+    const initExportProcess = React.useCallback((recoveryPhrase = false) => _tslib.__awaiter(void 0, void 0, void 0, function* () {
+        var _a, _b;
         const jwt = getAuthToken.getAuthToken();
         if (!jwt) {
             throw new Error('User is not logged in');
@@ -39,19 +41,24 @@ const useEmbeddedReveal = () => {
         if (!userHasEmbeddedWallet()) {
             throw new Error('Passkey embedded wallet not found');
         }
+        const decodedJwt = decodeJwt.decodeJwt(jwt);
+        const walletProperties = (_b = (_a = decodedJwt === null || decodedJwt === void 0 ? void 0 : decodedJwt.verifiedCredentials) === null || _a === void 0 ? void 0 : _a.find(({ walletName }) => walletName === null || walletName === void 0 ? void 0 : walletName.startsWith('turnkey'))) === null || _b === void 0 ? void 0 : _b.walletProperties;
+        const turnkeyHDWalletId = walletProperties === null || walletProperties === void 0 ? void 0 : walletProperties.turnkeyHDWalletId;
+        if (recoveryPhrase && !turnkeyHDWalletId) {
+            throw new Error('Wallet is non-HD and does not have a recovery phrase');
+        }
         internalSetShowAuthFlow(true);
-        setView('embedded-reveal-view');
+        if (recoveryPhrase) {
+            setView('embedded-reveal-view');
+        }
+        else {
+            setView('embedded-reveal-account-view');
+        }
         return new Promise((resolve, reject) => {
             dynamicEvents.dynamicEvents.once('embeddedWalletRevealCompleted', (wallet) => resolve(wallet));
             dynamicEvents.dynamicEvents.once('embeddedWalletRevealFailed', (error) => reject(error));
         });
-    }), [
-        dynamicEvents.dynamicEvents,
-        internalSetShowAuthFlow,
-        projectSettings,
-        setView,
-        userHasEmbeddedWallet,
-    ]);
+    }), [internalSetShowAuthFlow, projectSettings, setView, userHasEmbeddedWallet]);
     return {
         initExportProcess,
     };

package/src/lib/utils/hooks/useEmbeddedReveal/useEmbeddedReveal.d.ts

@@ -1,4 +1,4 @@
 import { Wallet } from '../../../shared';
 export declare const useEmbeddedReveal: () => {
-    readonly initExportProcess: () => Promise<Wallet>;
+    readonly initExportProcess: (recoveryPhrase?: boolean) => Promise<Wallet>;
 };

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

@@ -2,11 +2,11 @@ import { __awaiter } from '../../../../../_virtual/_tslib.js';
 import { useCallback } from 'react';
 import { useInternalDynamicContext } from '../../../context/DynamicContext/useInternalDynamicContext.js';
 import { useViewContext } from '../../../context/ViewContext/ViewContext.js';
-import '@dynamic-labs/sdk-api';
-import '../../../shared/logger.js';
+import { decodeJwt } from '../../../shared/utils/functions/decodeJwt/decodeJwt.js';
 import '@dynamic-labs/iconic';
 import '@dynamic-labs/wallet-connector-core';
 import 'react/jsx-runtime';
+import '../../../shared/logger.js';
 import '@dynamic-labs/wallet-book';
 import '../../constants/colors.js';
 import '../../../shared/utils/classes/storage/localStorage.js';
@@ -15,6 +15,7 @@ import '@dynamic-labs/utils';
 import '../../../shared/consts/index.js';
 import '@dynamic-labs/multi-wallet';
 import { getAuthToken } from '../../functions/getAuthToken/getAuthToken.js';
+import '@dynamic-labs/sdk-api';
 import { isTurnkeyEnabled } from '../../functions/isTurnkeyEnabled/isTurnkeyEnabled.js';
 import { useEmbeddedWallet } from '../useEmbeddedWallet/useEmbeddedWallet.js';
 import { dynamicEvents } from '../../../events/dynamicEvents.js';
@@ -24,7 +25,8 @@ const useEmbeddedReveal = () => {
     const { projectSettings, internalSetShowAuthFlow } = useInternalDynamicContext();
     const { userHasEmbeddedWallet } = useEmbeddedWallet();
     const { setView } = useViewContext();
-    const initExportProcess = useCallback(() => __awaiter(void 0, void 0, void 0, function* () {
+    const initExportProcess = useCallback((recoveryPhrase = false) => __awaiter(void 0, void 0, void 0, function* () {
+        var _a, _b;
         const jwt = getAuthToken();
         if (!jwt) {
             throw new Error('User is not logged in');
@@ -35,19 +37,24 @@ const useEmbeddedReveal = () => {
         if (!userHasEmbeddedWallet()) {
             throw new Error('Passkey embedded wallet not found');
         }
+        const decodedJwt = decodeJwt(jwt);
+        const walletProperties = (_b = (_a = decodedJwt === null || decodedJwt === void 0 ? void 0 : decodedJwt.verifiedCredentials) === null || _a === void 0 ? void 0 : _a.find(({ walletName }) => walletName === null || walletName === void 0 ? void 0 : walletName.startsWith('turnkey'))) === null || _b === void 0 ? void 0 : _b.walletProperties;
+        const turnkeyHDWalletId = walletProperties === null || walletProperties === void 0 ? void 0 : walletProperties.turnkeyHDWalletId;
+        if (recoveryPhrase && !turnkeyHDWalletId) {
+            throw new Error('Wallet is non-HD and does not have a recovery phrase');
+        }
         internalSetShowAuthFlow(true);
-        setView('embedded-reveal-view');
+        if (recoveryPhrase) {
+            setView('embedded-reveal-view');
+        }
+        else {
+            setView('embedded-reveal-account-view');
+        }
         return new Promise((resolve, reject) => {
             dynamicEvents.once('embeddedWalletRevealCompleted', (wallet) => resolve(wallet));
             dynamicEvents.once('embeddedWalletRevealFailed', (error) => reject(error));
         });
-    }), [
-        dynamicEvents,
-        internalSetShowAuthFlow,
-        projectSettings,
-        setView,
-        userHasEmbeddedWallet,
-    ]);
+    }), [internalSetShowAuthFlow, projectSettings, setView, userHasEmbeddedWallet]);
     return {
         initExportProcess,
     };

package/src/lib/utils/hooks/useWalletConnectorNetwork/index.d.ts

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

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

@@ -0,0 +1,42 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var React = require('react');
+var usePromise = require('../usePromise/usePromise.cjs');
+require('../../../events/dynamicEvents.cjs');
+var useWalletConnectorEvent = require('../events/useWalletConnectorEvent/useWalletConnectorEvent.cjs');
+
+/**
+ * Sync wallet connector network.
+ *
+ * @param walletConnector - The WalletConnector instance to be used.
+ *
+ * @returns {{ network: string | number | undefined }} An object containing the current network state.
+ *
+ * @example
+ * // Example of using the useWalletConnectorNetwork hook
+ * const { network } = useWalletConnectorNetwork(walletConnector);
+ *
+ * // You can then use the 'network' state in your component
+ * return <div>Current Network: {network}</div>;
+ */
+const useWalletConnectorNetwork = (walletConnector) => {
+    const [network, setNetwork] = React.useState();
+    usePromise.usePromise(() => walletConnector === null || walletConnector === void 0 ? void 0 : walletConnector.getNetwork(), {
+        onResolve: (network) => setNetwork(network),
+    });
+    useWalletConnectorEvent.useWalletConnectorEvent(walletConnector || undefined, 'chainChange', ({ chain }) => setNetwork(chain));
+    /**
+     * Listen to disconnect event and update the network because ArgentX
+     * emits a disconnect event when the user switches network.
+     */
+    useWalletConnectorEvent.useWalletConnectorEvent(walletConnector || undefined, 'disconnect', () => {
+        if ((walletConnector === null || walletConnector === void 0 ? void 0 : walletConnector.key) === 'argentx') {
+            walletConnector.getNetwork().then(setNetwork);
+        }
+    });
+    return { network };
+};
+
+exports.useWalletConnectorNetwork = useWalletConnectorNetwork;

package/src/lib/utils/hooks/useWalletConnectorNetwork/useWalletConnectorNetwork.d.ts

@@ -0,0 +1,18 @@
+import { WalletConnector } from '@dynamic-labs/wallet-connector-core';
+/**
+ * Sync wallet connector network.
+ *
+ * @param walletConnector - The WalletConnector instance to be used.
+ *
+ * @returns {{ network: string | number | undefined }} An object containing the current network state.
+ *
+ * @example
+ * // Example of using the useWalletConnectorNetwork hook
+ * const { network } = useWalletConnectorNetwork(walletConnector);
+ *
+ * // You can then use the 'network' state in your component
+ * return <div>Current Network: {network}</div>;
+ */
+export declare const useWalletConnectorNetwork: (walletConnector: WalletConnector | null | undefined) => {
+    network: string | number | undefined;
+};

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

@@ -0,0 +1,38 @@
+import { useState } from 'react';
+import { usePromise } from '../usePromise/usePromise.js';
+import '../../../events/dynamicEvents.js';
+import { useWalletConnectorEvent } from '../events/useWalletConnectorEvent/useWalletConnectorEvent.js';
+
+/**
+ * Sync wallet connector network.
+ *
+ * @param walletConnector - The WalletConnector instance to be used.
+ *
+ * @returns {{ network: string | number | undefined }} An object containing the current network state.
+ *
+ * @example
+ * // Example of using the useWalletConnectorNetwork hook
+ * const { network } = useWalletConnectorNetwork(walletConnector);
+ *
+ * // You can then use the 'network' state in your component
+ * return <div>Current Network: {network}</div>;
+ */
+const useWalletConnectorNetwork = (walletConnector) => {
+    const [network, setNetwork] = useState();
+    usePromise(() => walletConnector === null || walletConnector === void 0 ? void 0 : walletConnector.getNetwork(), {
+        onResolve: (network) => setNetwork(network),
+    });
+    useWalletConnectorEvent(walletConnector || undefined, 'chainChange', ({ chain }) => setNetwork(chain));
+    /**
+     * Listen to disconnect event and update the network because ArgentX
+     * emits a disconnect event when the user switches network.
+     */
+    useWalletConnectorEvent(walletConnector || undefined, 'disconnect', () => {
+        if ((walletConnector === null || walletConnector === void 0 ? void 0 : walletConnector.key) === 'argentx') {
+            walletConnector.getNetwork().then(setNetwork);
+        }
+    });
+    return { network };
+};
+
+export { useWalletConnectorNetwork };

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

@@ -13,7 +13,7 @@ var useInternalDynamicContext = require('../../../context/DynamicContext/useInte
 require('@dynamic-labs/wallet-connector-core');
 require('../../../context/CaptchaContext/CaptchaContext.cjs');
 require('../../../context/ErrorContext/ErrorContext.cjs');
-require('../../../context/ViewContext/ViewContext.cjs');
+var ViewContext = require('../../../context/ViewContext/ViewContext.cjs');
 var decodeJwt = require('../../../shared/utils/functions/decodeJwt/decodeJwt.cjs');
 require('@dynamic-labs/iconic');
 var close = require('../../../shared/assets/close.cjs');
@@ -78,17 +78,18 @@ var constants = require('../constants.cjs');
 const EmbeddedRevealView = () => {
     var _a, _b;
     const { authToken, primaryWallet, user, setShowAuthFlow, environmentId } = useInternalDynamicContext.useInternalDynamicContext();
+    const { view } = ViewContext.useViewContext();
     const [acknowledgement1, setAcknowledgement1] = React.useState(false);
     const iframeContainerRef = React.useRef(null);
     const decodedJwt = decodeJwt.decodeJwt(authToken);
     const walletProperties = (_b = (_a = decodedJwt === null || decodedJwt === void 0 ? void 0 : decodedJwt.verifiedCredentials) === null || _a === void 0 ? void 0 : _a.find(({ walletName }) => walletName === null || walletName === void 0 ? void 0 : walletName.startsWith('turnkey'))) === null || _b === void 0 ? void 0 : _b.walletProperties;
     const isTurnkeyHDWallet = walletProperties === null || walletProperties === void 0 ? void 0 : walletProperties.turnkeyHDWalletId;
+    const exportPrivateKey = view === null || view === void 0 ? void 0 : view.includes('account');
     React.useEffect(() => {
+        var _a;
         const iframeContainerElement = iframeContainerRef.current;
-        if (!iframeContainerElement) {
-            throw new utils.DynamicError('Missing iframe container');
-        }
-        if (iframeContainerElement.children.length > 0) {
+        if (!iframeContainerElement ||
+            ((_a = iframeContainerElement === null || iframeContainerElement === void 0 ? void 0 : iframeContainerElement.children) === null || _a === void 0 ? void 0 : _a.length) > 0) {
             return;
         }
         turnkeyExport.initExport({
@@ -105,11 +106,8 @@ const EmbeddedRevealView = () => {
         // eslint-disable-next-line react-hooks/exhaustive-deps
     }, []);
     const { mutate: handleExportWallet, isLoading, error, data, } = useMutation.useMutation(() => _tslib.__awaiter(void 0, void 0, void 0, function* () {
-        const iframeContainerElement = iframeContainerRef.current;
-        if (!iframeContainerElement) {
-            throw new utils.DynamicError('Missing iframe container');
-        }
         return turnkeyExport.exportCredential({
+            address: exportPrivateKey ? primaryWallet === null || primaryWallet === void 0 ? void 0 : primaryWallet.address : undefined,
             authToken,
             environmentId,
             userEmail: user === null || user === void 0 ? void 0 : user.email,
@@ -137,22 +135,26 @@ const EmbeddedRevealView = () => {
         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 ? 'height: 100px' : 'height: 60px');
+            iframeElement === null || iframeElement === void 0 ? void 0 : iframeElement.setAttribute('style', !isTurnkeyHDWallet || exportPrivateKey
+                ? 'height: 60px'
+                : 'height: 100px');
         }
-    }, [iframeContainerRef, data, isTurnkeyHDWallet]);
+    }, [iframeContainerRef, data, isTurnkeyHDWallet, exportPrivateKey]);
     const closeButton = (jsxRuntime.jsx(IconButton.IconButton, { onClick: () => setShowAuthFlow(false), type: 'button', children: jsxRuntime.jsx(close.ReactComponent, {}) }));
     const hasInjectedCredential = !isLoading && data && !error;
-    const credentialTitle = isTurnkeyHDWallet
-        ? t('dyn_embedded_reveal.recovery_phrase_title')
-        : t('dyn_embedded_reveal.private_key_title');
+    const credentialTitle = !isTurnkeyHDWallet || exportPrivateKey
+        ? t('dyn_embedded_reveal.private_key_title')
+        : t('dyn_embedded_reveal.recovery_phrase_title');
     const title = hasInjectedCredential
         ? credentialTitle
         : t('dyn_embedded_reveal.agreement_title');
-    return (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx(ModalHeader.ModalHeader, { trailing: closeButton, children: jsxRuntime.jsx(Typography.Typography, { as: 'h1', variant: 'title', color: 'primary', "data-testid": 'dynamic-auth-modal-heading', className: 'header__typography', children: title }) }), jsxRuntime.jsx("div", { className: 'embedded-reveal-view', children: jsxRuntime.jsxs("div", { className: 'embedded-reveal-view__body', children: [contentHeader, jsxRuntime.jsx("div", { id: constants.iframeContainerId, style: { display: data ? 'block' : 'none' }, ref: iframeContainerRef }), hasInjectedCredential ? (jsxRuntime.jsx(Button.Button, { buttonPadding: 'large', buttonVariant: 'brand-primary', onClick: () => setShowAuthFlow(false), loading: isLoading, typographyProps: {
+    return (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx(ModalHeader.ModalHeader, { trailing: closeButton, children: jsxRuntime.jsx(Typography.Typography, { as: 'h1', variant: 'title', color: 'primary', "data-testid": 'dynamic-auth-modal-heading', className: 'header__typography', children: title }) }), jsxRuntime.jsx("div", { className: 'embedded-reveal-view', children: jsxRuntime.jsxs("div", { className: 'embedded-reveal-view__body', children: [contentHeader, jsxRuntime.jsx("div", { id: constants.iframeContainerId, style: { display: data ? 'block' : 'none' }, ref: iframeContainerRef }), hasInjectedCredential ? (jsxRuntime.jsx(Button.Button, { buttonPadding: 'large', buttonVariant: 'brand-primary', onClick: () => setShowAuthFlow(false), loading: isLoading, copykey: 'dyn_embedded_reveal.done_button_label', typographyProps: {
                                 color: 'inherit',
-                            }, children: t('dyn_embedded_reveal.done_button_label') })) : (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx("div", { className: 'embedded-reveal-view__body__description', children: jsxRuntime.jsx(Badge.Badge, { text: t('dyn_embedded_reveal.badge_label'), className: 'embedded-reveal-view__body__badge' }) }), errorText && jsxRuntime.jsx(ErrorContainer.ErrorContainer, { children: errorText }), jsxRuntime.jsxs("div", { className: 'embedded-reveal-view__body__card', children: [jsxRuntime.jsxs("div", { className: 'embedded-reveal-view__body__card__statement', children: [jsxRuntime.jsx("div", { className: 'embedded-reveal-view__body__card__icon', children: jsxRuntime.jsx(walletV2.ReactComponent, {}) }), jsxRuntime.jsxs("div", { children: [jsxRuntime.jsx(Typography.Typography, { variant: 'body_normal', color: 'primary', style: { letterSpacing: '-0.15px' }, children: t('dyn_embedded_reveal.statement_1.title') }), jsxRuntime.jsx(Typography.Typography, { variant: 'body_small', color: 'secondary', weight: 'regular', children: t('dyn_embedded_reveal.statement_1.description') })] })] }), jsxRuntime.jsxs("div", { className: 'embedded-reveal-view__body__card__statement', children: [jsxRuntime.jsx("div", { className: 'embedded-reveal-view__body__card__icon', children: jsxRuntime.jsx(eyeOffIcon.ReactComponent, {}) }), jsxRuntime.jsxs("div", { children: [jsxRuntime.jsx(Typography.Typography, { variant: 'body_normal', color: 'primary', style: { letterSpacing: '-0.15px' }, children: t('dyn_embedded_reveal.statement_2.title') }), jsxRuntime.jsx(Typography.Typography, { variant: 'body_small', color: 'secondary', weight: 'regular', children: t('dyn_embedded_reveal.statement_2.description') })] })] })] }), jsxRuntime.jsxs("div", { className: 'embedded-reveal-view__body__confirm_card', children: [jsxRuntime.jsxs("button", { className: 'embedded-reveal-view__body__card__acknowledgement', onClick: () => setAcknowledgement1(!acknowledgement1), children: [jsxRuntime.jsx("div", { children: jsxRuntime.jsx(Checkbox.Checkbox, { checked: acknowledgement1, onChange: () => setAcknowledgement1(!acknowledgement1), className: 'embedded-reveal-view__body__card__statement__checkbox', id: 'embedded-reveal-checkbox-1' }) }), jsxRuntime.jsx("div", { children: jsxRuntime.jsx(Typography.Typography, { variant: 'body_normal', color: 'primary', style: { letterSpacing: '-0.15px' }, children: t('dyn_embedded_reveal.checkbox_label') }) })] }), jsxRuntime.jsx(Button.Button, { buttonPadding: 'large', buttonVariant: 'brand-primary', typographyProps: {
+                            }, children: t('dyn_embedded_reveal.done_button_label') })) : (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx("div", { className: 'embedded-reveal-view__body__description', children: jsxRuntime.jsx(Badge.Badge, { text: t('dyn_embedded_reveal.badge_label'), className: 'embedded-reveal-view__body__badge' }) }), errorText && jsxRuntime.jsx(ErrorContainer.ErrorContainer, { children: errorText }), jsxRuntime.jsxs("div", { className: 'embedded-reveal-view__body__card', children: [jsxRuntime.jsxs("div", { className: 'embedded-reveal-view__body__card__statement', children: [jsxRuntime.jsx("div", { className: 'embedded-reveal-view__body__card__icon', children: jsxRuntime.jsx(walletV2.ReactComponent, {}) }), jsxRuntime.jsxs("div", { children: [jsxRuntime.jsx(Typography.Typography, { variant: 'body_normal', color: 'primary', style: { letterSpacing: '-0.15px' }, copykey: 'dyn_embedded_reveal.statement_1.title', children: t('dyn_embedded_reveal.statement_1.title') }), jsxRuntime.jsx(Typography.Typography, { variant: 'body_small', color: 'secondary', weight: 'regular', copykey: 'dyn_embedded_reveal.statement_1.description', children: t('dyn_embedded_reveal.statement_1.description') })] })] }), jsxRuntime.jsxs("div", { className: 'embedded-reveal-view__body__card__statement', children: [jsxRuntime.jsx("div", { className: 'embedded-reveal-view__body__card__icon', children: jsxRuntime.jsx(eyeOffIcon.ReactComponent, {}) }), jsxRuntime.jsxs("div", { children: [jsxRuntime.jsx(Typography.Typography, { variant: 'body_normal', color: 'primary', style: { letterSpacing: '-0.15px' }, copykey: 'dyn_embedded_reveal.statement_2.title', children: t('dyn_embedded_reveal.statement_2.title') }), jsxRuntime.jsx(Typography.Typography, { variant: 'body_small', color: 'secondary', weight: 'regular', copykey: 'dyn_embedded_reveal.statement_2.description', children: t('dyn_embedded_reveal.statement_2.description', {
+                                                                credential_type: credentialTitle === null || credentialTitle === void 0 ? void 0 : credentialTitle.toLowerCase(),
+                                                            }) })] })] })] }), jsxRuntime.jsxs("div", { className: 'embedded-reveal-view__body__confirm_card', children: [jsxRuntime.jsxs("button", { className: 'embedded-reveal-view__body__card__acknowledgement', onClick: () => setAcknowledgement1(!acknowledgement1), children: [jsxRuntime.jsx("div", { children: jsxRuntime.jsx(Checkbox.Checkbox, { checked: acknowledgement1, onChange: () => setAcknowledgement1(!acknowledgement1), className: 'embedded-reveal-view__body__card__statement__checkbox', id: 'embedded-reveal-checkbox-1' }) }), jsxRuntime.jsx("div", { children: jsxRuntime.jsx(Typography.Typography, { variant: 'body_normal', color: 'primary', style: { letterSpacing: '-0.15px' }, copykey: 'dyn_embedded_reveal.checkbox_label', children: t('dyn_embedded_reveal.checkbox_label') }) })] }), jsxRuntime.jsx(Button.Button, { buttonPadding: 'large', buttonVariant: 'brand-primary', typographyProps: {
                                                 color: 'inherit',
-                                            }, onClick: () => handleExportWallet(), disabled: !acknowledgement1, loading: isLoading, dataTestId: 'embedded-reveal-button', children: t('dyn_embedded_reveal.reveal_button_label') })] })] }))] }) })] }));
+                                            }, onClick: () => handleExportWallet(), disabled: !acknowledgement1, loading: isLoading, dataTestId: 'embedded-reveal-button', copykey: 'dyn_embedded_reveal.reveal_button_label', children: t('dyn_embedded_reveal.reveal_button_label') })] })] }))] }) })] }));
 };
 
 exports.EmbeddedRevealView = EmbeddedRevealView;

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

@@ -9,7 +9,7 @@ import { useInternalDynamicContext } from '../../../context/DynamicContext/useIn
 import '@dynamic-labs/wallet-connector-core';
 import '../../../context/CaptchaContext/CaptchaContext.js';
 import '../../../context/ErrorContext/ErrorContext.js';
-import '../../../context/ViewContext/ViewContext.js';
+import { useViewContext } from '../../../context/ViewContext/ViewContext.js';
 import { decodeJwt } from '../../../shared/utils/functions/decodeJwt/decodeJwt.js';
 import '@dynamic-labs/iconic';
 import { ReactComponent as SvgClose } from '../../../shared/assets/close.js';
@@ -74,17 +74,18 @@ import { iframeContainerId, iframeElementId } from '../constants.js';
 const EmbeddedRevealView = () => {
     var _a, _b;
     const { authToken, primaryWallet, user, setShowAuthFlow, environmentId } = useInternalDynamicContext();
+    const { view } = useViewContext();
     const [acknowledgement1, setAcknowledgement1] = useState(false);
     const iframeContainerRef = useRef(null);
     const decodedJwt = decodeJwt(authToken);
     const walletProperties = (_b = (_a = decodedJwt === null || decodedJwt === void 0 ? void 0 : decodedJwt.verifiedCredentials) === null || _a === void 0 ? void 0 : _a.find(({ walletName }) => walletName === null || walletName === void 0 ? void 0 : walletName.startsWith('turnkey'))) === null || _b === void 0 ? void 0 : _b.walletProperties;
     const isTurnkeyHDWallet = walletProperties === null || walletProperties === void 0 ? void 0 : walletProperties.turnkeyHDWalletId;
+    const exportPrivateKey = view === null || view === void 0 ? void 0 : view.includes('account');
     useEffect(() => {
+        var _a;
         const iframeContainerElement = iframeContainerRef.current;
-        if (!iframeContainerElement) {
-            throw new DynamicError('Missing iframe container');
-        }
-        if (iframeContainerElement.children.length > 0) {
+        if (!iframeContainerElement ||
+            ((_a = iframeContainerElement === null || iframeContainerElement === void 0 ? void 0 : iframeContainerElement.children) === null || _a === void 0 ? void 0 : _a.length) > 0) {
             return;
         }
         initExport({
@@ -101,11 +102,8 @@ const EmbeddedRevealView = () => {
         // eslint-disable-next-line react-hooks/exhaustive-deps
     }, []);
     const { mutate: handleExportWallet, isLoading, error, data, } = useMutation(() => __awaiter(void 0, void 0, void 0, function* () {
-        const iframeContainerElement = iframeContainerRef.current;
-        if (!iframeContainerElement) {
-            throw new DynamicError('Missing iframe container');
-        }
         return exportCredential({
+            address: exportPrivateKey ? primaryWallet === null || primaryWallet === void 0 ? void 0 : primaryWallet.address : undefined,
             authToken,
             environmentId,
             userEmail: user === null || user === void 0 ? void 0 : user.email,
@@ -133,22 +131,26 @@ const EmbeddedRevealView = () => {
         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 ? 'height: 100px' : 'height: 60px');
+            iframeElement === null || iframeElement === void 0 ? void 0 : iframeElement.setAttribute('style', !isTurnkeyHDWallet || exportPrivateKey
+                ? 'height: 60px'
+                : 'height: 100px');
         }
-    }, [iframeContainerRef, data, isTurnkeyHDWallet]);
+    }, [iframeContainerRef, data, isTurnkeyHDWallet, exportPrivateKey]);
     const closeButton = (jsx(IconButton, { onClick: () => setShowAuthFlow(false), type: 'button', children: jsx(SvgClose, {}) }));
     const hasInjectedCredential = !isLoading && data && !error;
-    const credentialTitle = isTurnkeyHDWallet
-        ? t('dyn_embedded_reveal.recovery_phrase_title')
-        : t('dyn_embedded_reveal.private_key_title');
+    const credentialTitle = !isTurnkeyHDWallet || exportPrivateKey
+        ? t('dyn_embedded_reveal.private_key_title')
+        : t('dyn_embedded_reveal.recovery_phrase_title');
     const title = hasInjectedCredential
         ? credentialTitle
         : t('dyn_embedded_reveal.agreement_title');
-    return (jsxs(Fragment, { children: [jsx(ModalHeader, { trailing: closeButton, children: jsx(Typography, { as: 'h1', variant: 'title', color: 'primary', "data-testid": 'dynamic-auth-modal-heading', className: 'header__typography', children: title }) }), jsx("div", { className: 'embedded-reveal-view', children: jsxs("div", { className: 'embedded-reveal-view__body', children: [contentHeader, jsx("div", { id: iframeContainerId, style: { display: data ? 'block' : 'none' }, ref: iframeContainerRef }), hasInjectedCredential ? (jsx(Button, { buttonPadding: 'large', buttonVariant: 'brand-primary', onClick: () => setShowAuthFlow(false), loading: isLoading, typographyProps: {
+    return (jsxs(Fragment, { children: [jsx(ModalHeader, { trailing: closeButton, children: jsx(Typography, { as: 'h1', variant: 'title', color: 'primary', "data-testid": 'dynamic-auth-modal-heading', className: 'header__typography', children: title }) }), jsx("div", { className: 'embedded-reveal-view', children: jsxs("div", { className: 'embedded-reveal-view__body', children: [contentHeader, jsx("div", { id: iframeContainerId, style: { display: data ? 'block' : 'none' }, ref: iframeContainerRef }), hasInjectedCredential ? (jsx(Button, { buttonPadding: 'large', buttonVariant: 'brand-primary', onClick: () => setShowAuthFlow(false), loading: isLoading, copykey: 'dyn_embedded_reveal.done_button_label', typographyProps: {
                                 color: 'inherit',
-                            }, children: t('dyn_embedded_reveal.done_button_label') })) : (jsxs(Fragment, { children: [jsx("div", { className: 'embedded-reveal-view__body__description', children: jsx(Badge, { text: t('dyn_embedded_reveal.badge_label'), className: 'embedded-reveal-view__body__badge' }) }), errorText && jsx(ErrorContainer, { children: errorText }), jsxs("div", { className: 'embedded-reveal-view__body__card', children: [jsxs("div", { className: 'embedded-reveal-view__body__card__statement', children: [jsx("div", { className: 'embedded-reveal-view__body__card__icon', children: jsx(SvgWalletV2, {}) }), jsxs("div", { children: [jsx(Typography, { variant: 'body_normal', color: 'primary', style: { letterSpacing: '-0.15px' }, children: t('dyn_embedded_reveal.statement_1.title') }), jsx(Typography, { variant: 'body_small', color: 'secondary', weight: 'regular', children: t('dyn_embedded_reveal.statement_1.description') })] })] }), jsxs("div", { className: 'embedded-reveal-view__body__card__statement', children: [jsx("div", { className: 'embedded-reveal-view__body__card__icon', children: jsx(SvgEyeOffIcon, {}) }), jsxs("div", { children: [jsx(Typography, { variant: 'body_normal', color: 'primary', style: { letterSpacing: '-0.15px' }, children: t('dyn_embedded_reveal.statement_2.title') }), jsx(Typography, { variant: 'body_small', color: 'secondary', weight: 'regular', children: t('dyn_embedded_reveal.statement_2.description') })] })] })] }), jsxs("div", { className: 'embedded-reveal-view__body__confirm_card', children: [jsxs("button", { className: 'embedded-reveal-view__body__card__acknowledgement', onClick: () => setAcknowledgement1(!acknowledgement1), children: [jsx("div", { children: jsx(Checkbox, { checked: acknowledgement1, onChange: () => setAcknowledgement1(!acknowledgement1), className: 'embedded-reveal-view__body__card__statement__checkbox', id: 'embedded-reveal-checkbox-1' }) }), jsx("div", { children: jsx(Typography, { variant: 'body_normal', color: 'primary', style: { letterSpacing: '-0.15px' }, children: t('dyn_embedded_reveal.checkbox_label') }) })] }), jsx(Button, { buttonPadding: 'large', buttonVariant: 'brand-primary', typographyProps: {
+                            }, children: t('dyn_embedded_reveal.done_button_label') })) : (jsxs(Fragment, { children: [jsx("div", { className: 'embedded-reveal-view__body__description', children: jsx(Badge, { text: t('dyn_embedded_reveal.badge_label'), className: 'embedded-reveal-view__body__badge' }) }), errorText && jsx(ErrorContainer, { children: errorText }), jsxs("div", { className: 'embedded-reveal-view__body__card', children: [jsxs("div", { className: 'embedded-reveal-view__body__card__statement', children: [jsx("div", { className: 'embedded-reveal-view__body__card__icon', children: jsx(SvgWalletV2, {}) }), jsxs("div", { children: [jsx(Typography, { variant: 'body_normal', color: 'primary', style: { letterSpacing: '-0.15px' }, copykey: 'dyn_embedded_reveal.statement_1.title', children: t('dyn_embedded_reveal.statement_1.title') }), jsx(Typography, { variant: 'body_small', color: 'secondary', weight: 'regular', copykey: 'dyn_embedded_reveal.statement_1.description', children: t('dyn_embedded_reveal.statement_1.description') })] })] }), jsxs("div", { className: 'embedded-reveal-view__body__card__statement', children: [jsx("div", { className: 'embedded-reveal-view__body__card__icon', children: jsx(SvgEyeOffIcon, {}) }), jsxs("div", { children: [jsx(Typography, { variant: 'body_normal', color: 'primary', style: { letterSpacing: '-0.15px' }, copykey: 'dyn_embedded_reveal.statement_2.title', children: t('dyn_embedded_reveal.statement_2.title') }), jsx(Typography, { variant: 'body_small', color: 'secondary', weight: 'regular', copykey: 'dyn_embedded_reveal.statement_2.description', children: t('dyn_embedded_reveal.statement_2.description', {
+                                                                credential_type: credentialTitle === null || credentialTitle === void 0 ? void 0 : credentialTitle.toLowerCase(),
+                                                            }) })] })] })] }), jsxs("div", { className: 'embedded-reveal-view__body__confirm_card', children: [jsxs("button", { className: 'embedded-reveal-view__body__card__acknowledgement', onClick: () => setAcknowledgement1(!acknowledgement1), children: [jsx("div", { children: jsx(Checkbox, { checked: acknowledgement1, onChange: () => setAcknowledgement1(!acknowledgement1), className: 'embedded-reveal-view__body__card__statement__checkbox', id: 'embedded-reveal-checkbox-1' }) }), jsx("div", { children: jsx(Typography, { variant: 'body_normal', color: 'primary', style: { letterSpacing: '-0.15px' }, copykey: 'dyn_embedded_reveal.checkbox_label', children: t('dyn_embedded_reveal.checkbox_label') }) })] }), jsx(Button, { buttonPadding: 'large', buttonVariant: 'brand-primary', typographyProps: {
                                                 color: 'inherit',
-                                            }, onClick: () => handleExportWallet(), disabled: !acknowledgement1, loading: isLoading, dataTestId: 'embedded-reveal-button', children: t('dyn_embedded_reveal.reveal_button_label') })] })] }))] }) })] }));
+                                            }, onClick: () => handleExportWallet(), disabled: !acknowledgement1, loading: isLoading, dataTestId: 'embedded-reveal-button', copykey: 'dyn_embedded_reveal.reveal_button_label', children: t('dyn_embedded_reveal.reveal_button_label') })] })] }))] }) })] }));
 };
 
 export { EmbeddedRevealView };

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

@@ -32,8 +32,8 @@ const initExport = ({ iframeContainer, iframeElementId, wallet, }) => _tslib.__a
     }
     return turnkeyExportHandler;
 });
-const exportCredential = ({ authToken, userEmail, wallet, environmentId, }) => _tslib.__awaiter(void 0, void 0, void 0, function* () {
-    var _b, _c;
+const handleExportInitCheck = ({ authToken, userEmail, wallet, }) => {
+    var _a, _b;
     if (!authToken) {
         throw new utils.DynamicError('User must be logged in');
     }
@@ -48,7 +48,7 @@ const exportCredential = ({ authToken, userEmail, wallet, environmentId, }) => _
     }
     const connector = wallet.connector;
     connector.setEmail(userEmail);
-    const walletProperties = (_c = (_b = decodedJwt.verifiedCredentials) === null || _b === void 0 ? void 0 : _b.find(({ walletName }) => walletName === null || walletName === void 0 ? void 0 : walletName.startsWith('turnkey'))) === null || _c === void 0 ? void 0 : _c.walletProperties;
+    const walletProperties = (_b = (_a = decodedJwt.verifiedCredentials) === null || _a === void 0 ? void 0 : _a.find(({ walletName }) => walletName === null || walletName === void 0 ? void 0 : walletName.startsWith('turnkey'))) === null || _b === void 0 ? void 0 : _b.walletProperties;
     const turnkeyHDWalletId = walletProperties === null || walletProperties === void 0 ? void 0 : walletProperties.turnkeyHDWalletId;
     const privateKeyId = walletProperties === null || walletProperties === void 0 ? void 0 : walletProperties.turnkeyPrivateKeyId;
     const organizationId = walletProperties === null || walletProperties === void 0 ? void 0 : walletProperties.turnkeySubOrganizationId;
@@ -56,59 +56,84 @@ const exportCredential = ({ authToken, userEmail, wallet, environmentId, }) => _
         (turnkeyHDWalletId === undefined && privateKeyId === undefined)) {
         throw new utils.DynamicError('Invalid token!');
     }
+    return {
+        connector,
+        organizationId,
+        privateKeyId,
+        turnkeyHDWalletId,
+    };
+};
+const extractExportBundle = ({ address, privateKeyId, activity, }) => {
+    var _a, _b, _c;
+    const exportWalletResult = address
+        ? (_a = activity.result) === null || _a === void 0 ? void 0 : _a.exportWalletAccountResult
+        : (_b = activity.result) === null || _b === void 0 ? void 0 : _b.exportWalletResult;
+    const result = privateKeyId
+        ? (_c = activity.result) === null || _c === void 0 ? void 0 : _c.exportPrivateKeyResult
+        : exportWalletResult;
+    return result === null || result === void 0 ? void 0 : result.exportBundle;
+};
+const exportCredential = ({ authToken, userEmail, wallet, environmentId, address, }) => _tslib.__awaiter(void 0, void 0, void 0, function* () {
+    const { connector, turnkeyHDWalletId, privateKeyId, organizationId } = handleExportInitCheck({
+        authToken,
+        userEmail,
+        wallet,
+    });
     const turnkeyExportHandler = connector.getExportHandler();
     const targetPublicKey = turnkeyExportHandler.publicKey;
     if (!targetPublicKey) {
         throw new utils.DynamicError('Must initialize export first');
     }
     // calls turnkey export api
+    let newActivity;
     if (turnkeyHDWalletId) {
-        const newActivity = yield turnkeyExportHandler.exportWallet({
+        newActivity = yield turnkeyExportHandler.exportWallet({
+            address,
             organizationId,
             walletId: turnkeyHDWalletId,
         });
-        const activityId = newActivity.id;
-        const res = yield api.exportEmbeddedWallet({
-            activityId,
-            environmentId,
-            userJwt: authToken,
-            walletId: wallet.id,
-        });
-        const exportBundle = res === null || res === void 0 ? void 0 : res.exportBundle;
-        if (!exportBundle) {
-            throw new utils.DynamicError('Invalid export response');
-        }
-        const injected = yield turnkeyExportHandler.verifyExportWallet(exportBundle);
-        return injected;
     }
     else if (privateKeyId) {
-        const newActivity = yield turnkeyExportHandler.exportPrivateKey({
+        newActivity = yield turnkeyExportHandler.exportPrivateKey({
             organizationId,
             privateKeyId,
         });
-        const activityId = newActivity.id;
+    }
+    const activityId = newActivity.id;
+    const activityStatus = newActivity.status;
+    let exportBundle;
+    if (activityStatus === 'ACTIVITY_STATUS_COMPLETED') {
+        exportBundle = extractExportBundle({
+            activity: newActivity,
+            address,
+            privateKeyId,
+        });
+    }
+    else {
         const res = yield api.exportEmbeddedWallet({
             activityId,
             environmentId,
-            userJwt: authToken,
-            walletId: wallet.id,
+            userJwt: authToken || '',
+            walletId: (wallet === null || wallet === void 0 ? void 0 : wallet.id) || '',
         });
-        const exportBundle = res === null || res === void 0 ? void 0 : res.exportBundle;
-        if (!exportBundle) {
-            throw new utils.DynamicError('Invalid export response');
-        }
-        const injected = yield turnkeyExportHandler.verifyExportPrivateKey(exportBundle);
-        return injected;
+        exportBundle = res === null || res === void 0 ? void 0 : res.exportBundle;
+    }
+    if (!exportBundle) {
+        throw new utils.DynamicError('Invalid export response');
+    }
+    if (address || privateKeyId) {
+        return turnkeyExportHandler.verifyExportPrivateKey(exportBundle);
     }
-    throw new utils.DynamicError('Invalid token!');
+    return turnkeyExportHandler.verifyExportWallet(exportBundle);
 });
 const cleanupExport = ({ wallet }) => _tslib.__awaiter(void 0, void 0, void 0, function* () {
-    var _d;
+    var _b;
     const connector = wallet === null || wallet === void 0 ? void 0 : wallet.connector;
     // clear iframeStamper and its reference
-    (_d = connector === null || connector === void 0 ? void 0 : connector.getExportHandler()) === null || _d === void 0 ? void 0 : _d.clear();
+    (_b = connector === null || connector === void 0 ? void 0 : connector.getExportHandler()) === null || _b === void 0 ? void 0 : _b.clear();
 });
 
 exports.cleanupExport = cleanupExport;
 exports.exportCredential = exportCredential;
+exports.extractExportBundle = extractExportBundle;
 exports.initExport = initExport;

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

@@ -4,11 +4,17 @@ export declare const initExport: ({ iframeContainer, iframeElementId, wallet, }:
     iframeElementId: string;
     wallet: Wallet | null;
 }) => Promise<import("@dynamic-labs/wallet-connector-core").ExportHandler>;
-export declare const exportCredential: ({ authToken, userEmail, wallet, environmentId, }: {
+export declare const extractExportBundle: ({ address, privateKeyId, activity, }: {
+    address?: string | undefined;
+    privateKeyId?: string | undefined;
+    activity: any;
+}) => any;
+export declare const exportCredential: ({ authToken, userEmail, wallet, environmentId, address, }: {
     authToken: string | undefined;
     userEmail: string | undefined;
     wallet: Wallet | null;
     environmentId: string;
+    address?: string | undefined;
 }) => Promise<unknown>;
 export declare const cleanupExport: ({ wallet }: {
     wallet: Wallet | null;