@dynamic-labs/sdk-react-core 4.0.0-alpha.18 → 4.0.0-alpha.19

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

@@ -67,3 +67,4 @@ export * from './useSmartWallets';
 export { useEmbeddedWalletSessionKeys } from './useEmbeddedWalletSessionKeys';
 export { useTelegramLogin } from './useTelegramLogin';
 export { useEndUserWarning } from './useEndUserWarning';
+export { useDebounce } from './useDebounce';

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

@@ -31,6 +31,7 @@ require('../../../locale/locale.cjs');
 var getWalletProvider = require('../../functions/getWalletProvider/getWalletProvider.cjs');
 var isConnectOnly = require('../authenticationHooks/helpers/isConnectOnly.cjs');
 var getWalletConnectorForWallet = require('../../functions/getWalletConnectorForWallet/getWalletConnectorForWallet.cjs');
+var useDebounce = require('../useDebounce/useDebounce.cjs');
 var updateUserWalletsFromConnectedWallets = require('./updateUserWalletsFromConnectedWallets/updateUserWalletsFromConnectedWallets.cjs');
 
 const useConnectWallet = ({ authMode, clearPrimaryWalletId, enableVisitTrackingOnConnectOnly, environmentId, primaryWalletId, setPrimaryWalletId, walletConnectorOptions, handleConnectedWallet, setShowAuthFlow, isBridgeFlow, user, }) => {
@@ -69,11 +70,10 @@ const useConnectWallet = ({ authMode, clearPrimaryWalletId, enableVisitTrackingO
         setPrimaryWalletId,
     ]);
     // The function to update and define the connectedWallets list.
-    // It uses walletConnector to get the current wallet address and network
-    // The address and network in the runtime are updated by the event listeners
-    // The event listeners are updating `connectedWallets` list.
-    // It should be called on the first render and when connectedWalletsInfo updates
-    const updateConnectedWalletsList = React.useCallback(() => _tslib.__awaiter(void 0, void 0, void 0, function* () {
+    // It should be called on the first render, when connectedWalletsInfo updates and when walletConnectorOptions updates.
+    // To avoid unnecessary updates that are causing issues with connectors added asynchronously,
+    // we're debouncing this function
+    const updateConnectedWalletsList = useDebounce.useDebounce(() => _tslib.__awaiter(void 0, void 0, void 0, function* () {
         const walletConnectors = walletConnectorOptions.map((wallet) => wallet.walletConnector);
         if (!walletConnectors.length) {
             return;
@@ -110,12 +110,7 @@ const useConnectWallet = ({ authMode, clearPrimaryWalletId, enableVisitTrackingO
             return walletObject;
         })))).filter((wallet) => Boolean(wallet));
         setConnectedWallets(updatedConnectedWallets);
-    }), [
-        connectedWalletsInfo,
-        disconnectWallet,
-        setConnectedWallets,
-        walletConnectorOptions,
-    ]);
+    }), 300);
     // Generate the connectedWallets list when connectedWalletsInfo (localStorage) or memoized wallet connector updates
     React.useEffect(() => {
         updateConnectedWalletsList();

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

@@ -27,6 +27,7 @@ import '../../../locale/locale.js';
 import { getWalletProvider } from '../../functions/getWalletProvider/getWalletProvider.js';
 import { isConnectOnly } from '../authenticationHooks/helpers/isConnectOnly.js';
 import { getWalletConnectorForWallet } from '../../functions/getWalletConnectorForWallet/getWalletConnectorForWallet.js';
+import { useDebounce } from '../useDebounce/useDebounce.js';
 import { updateUserWalletsFromConnectedWallets } from './updateUserWalletsFromConnectedWallets/updateUserWalletsFromConnectedWallets.js';
 
 const useConnectWallet = ({ authMode, clearPrimaryWalletId, enableVisitTrackingOnConnectOnly, environmentId, primaryWalletId, setPrimaryWalletId, walletConnectorOptions, handleConnectedWallet, setShowAuthFlow, isBridgeFlow, user, }) => {
@@ -65,11 +66,10 @@ const useConnectWallet = ({ authMode, clearPrimaryWalletId, enableVisitTrackingO
         setPrimaryWalletId,
     ]);
     // The function to update and define the connectedWallets list.
-    // It uses walletConnector to get the current wallet address and network
-    // The address and network in the runtime are updated by the event listeners
-    // The event listeners are updating `connectedWallets` list.
-    // It should be called on the first render and when connectedWalletsInfo updates
-    const updateConnectedWalletsList = useCallback(() => __awaiter(void 0, void 0, void 0, function* () {
+    // It should be called on the first render, when connectedWalletsInfo updates and when walletConnectorOptions updates.
+    // To avoid unnecessary updates that are causing issues with connectors added asynchronously,
+    // we're debouncing this function
+    const updateConnectedWalletsList = useDebounce(() => __awaiter(void 0, void 0, void 0, function* () {
         const walletConnectors = walletConnectorOptions.map((wallet) => wallet.walletConnector);
         if (!walletConnectors.length) {
             return;
@@ -106,12 +106,7 @@ const useConnectWallet = ({ authMode, clearPrimaryWalletId, enableVisitTrackingO
             return walletObject;
         })))).filter((wallet) => Boolean(wallet));
         setConnectedWallets(updatedConnectedWallets);
-    }), [
-        connectedWalletsInfo,
-        disconnectWallet,
-        setConnectedWallets,
-        walletConnectorOptions,
-    ]);
+    }), 300);
     // Generate the connectedWallets list when connectedWalletsInfo (localStorage) or memoized wallet connector updates
     useEffect(() => {
         updateConnectedWalletsList();

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

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

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

@@ -0,0 +1,22 @@
+'use client'
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var React = require('react');
+
+const useDebounce = (callback, timeout) => {
+    const timeoutId = React.useRef(null);
+    const callbackRef = React.useRef(callback);
+    callbackRef.current = callback;
+    return React.useCallback(((...params) => {
+        if (timeoutId.current) {
+            clearTimeout(timeoutId.current);
+        }
+        timeoutId.current = window.setTimeout(() => {
+            callbackRef.current(...params);
+        }, timeout);
+    }), [timeout]);
+};
+
+exports.useDebounce = useDebounce;

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

@@ -0,0 +1 @@
+export declare const useDebounce: <C extends (...params: any[]) => void>(callback: C, timeout: number) => C;

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

@@ -0,0 +1,18 @@
+'use client'
+import { useRef, useCallback } from 'react';
+
+const useDebounce = (callback, timeout) => {
+    const timeoutId = useRef(null);
+    const callbackRef = useRef(callback);
+    callbackRef.current = callback;
+    return useCallback(((...params) => {
+        if (timeoutId.current) {
+            clearTimeout(timeoutId.current);
+        }
+        timeoutId.current = window.setTimeout(() => {
+            callbackRef.current(...params);
+        }, timeout);
+    }), [timeout]);
+};
+
+export { useDebounce };

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

@@ -115,7 +115,7 @@ const useEmbeddedReveal = () => {
             throw new Error('Coinbase MPC wallet not found');
         }
     };
-    const initExportProcess = React.useCallback((...args_1) => _tslib.__awaiter(void 0, [...args_1], void 0, function* (recoveryPhrase = false) {
+    const initExportProcess = React.useCallback((...args_1) => _tslib.__awaiter(void 0, [...args_1], void 0, function* (recoveryPhrase = false, isPromptForExport = false) {
         if (!primaryWallet) {
             throw new Error('No primary wallet');
         }
@@ -135,7 +135,10 @@ const useEmbeddedReveal = () => {
             ignoreIfIsEmbeddedWidget: false,
             performMultiWalletChecks: false,
         });
-        setView('embedded-reveal-view', { exportPrivateKey: !recoveryPhrase });
+        setView('embedded-reveal-view', {
+            exportPrivateKey: !recoveryPhrase,
+            isPromptForExport,
+        });
         return new Promise((resolve, reject) => {
             dynamicEvents.dynamicEvents.once('embeddedWalletRevealCompleted', (wallet) => resolve(wallet));
             dynamicEvents.dynamicEvents.once('embeddedWalletRevealFailed', (error) => reject(error));

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

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

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

@@ -111,7 +111,7 @@ const useEmbeddedReveal = () => {
             throw new Error('Coinbase MPC wallet not found');
         }
     };
-    const initExportProcess = useCallback((...args_1) => __awaiter(void 0, [...args_1], void 0, function* (recoveryPhrase = false) {
+    const initExportProcess = useCallback((...args_1) => __awaiter(void 0, [...args_1], void 0, function* (recoveryPhrase = false, isPromptForExport = false) {
         if (!primaryWallet) {
             throw new Error('No primary wallet');
         }
@@ -131,7 +131,10 @@ const useEmbeddedReveal = () => {
             ignoreIfIsEmbeddedWidget: false,
             performMultiWalletChecks: false,
         });
-        setView('embedded-reveal-view', { exportPrivateKey: !recoveryPhrase });
+        setView('embedded-reveal-view', {
+            exportPrivateKey: !recoveryPhrase,
+            isPromptForExport,
+        });
         return new Promise((resolve, reject) => {
             dynamicEvents.once('embeddedWalletRevealCompleted', (wallet) => resolve(wallet));
             dynamicEvents.once('embeddedWalletRevealFailed', (error) => reject(error));

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

@@ -157,6 +157,7 @@ const useEmbeddedWallet = () => {
         }
         return revealCoinbaseMPCEmbeddedWalletKey();
     });
+    const shouldPromptForKeyExport = React.useCallback(() => { var _a; return Boolean((_a = projectSettings === null || projectSettings === void 0 ? void 0 : projectSettings.sdk.embeddedWallets) === null || _a === void 0 ? void 0 : _a.promptForKeyExport); }, [projectSettings]);
     const shouldAutoCreateEmbeddedWallet = React.useCallback((verifiedUser) => {
         var _a, _b, _c, _d, _e;
         const hasEmbeddedWalletProviderEnabled = isTurnkeyEnabled.isTurnkeyEnabled(projectSettings) ||
@@ -202,6 +203,7 @@ const useEmbeddedWallet = () => {
         revealWalletKey,
         sendOneTimeCode,
         shouldAutoCreateEmbeddedWallet,
+        shouldPromptForKeyExport,
         userHasEmbeddedWallet,
     };
 };

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

@@ -39,5 +39,6 @@ export declare const useEmbeddedWallet: () => {
     } | undefined) => Promise<boolean>;
     readonly sendOneTimeCode: () => Promise<string>;
     readonly shouldAutoCreateEmbeddedWallet: (verifiedUser?: UserProfile) => boolean;
+    readonly shouldPromptForKeyExport: () => boolean;
     readonly userHasEmbeddedWallet: () => boolean;
 };

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

@@ -153,6 +153,7 @@ const useEmbeddedWallet = () => {
         }
         return revealCoinbaseMPCEmbeddedWalletKey();
     });
+    const shouldPromptForKeyExport = useCallback(() => { var _a; return Boolean((_a = projectSettings === null || projectSettings === void 0 ? void 0 : projectSettings.sdk.embeddedWallets) === null || _a === void 0 ? void 0 : _a.promptForKeyExport); }, [projectSettings]);
     const shouldAutoCreateEmbeddedWallet = useCallback((verifiedUser) => {
         var _a, _b, _c, _d, _e;
         const hasEmbeddedWalletProviderEnabled = isTurnkeyEnabled(projectSettings) ||
@@ -198,6 +199,7 @@ const useEmbeddedWallet = () => {
         revealWalletKey,
         sendOneTimeCode,
         shouldAutoCreateEmbeddedWallet,
+        shouldPromptForKeyExport,
         userHasEmbeddedWallet,
     };
 };

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

@@ -18,10 +18,12 @@ require('@dynamic-labs/wallet-book');
 require('../../constants/colors.cjs');
 require('../../constants/values.cjs');
 require('../../../store/state/loadingAndLifecycle.cjs');
+var useLocalStorage = require('../../../shared/utils/hooks/useLocalStorage/useLocalStorage.cjs');
 require('../../../shared/consts/index.cjs');
 var useDynamicEvents = require('../events/useDynamicEvents/useDynamicEvents.cjs');
 require('../../../context/CaptchaContext/CaptchaContext.cjs');
 require('../../../context/ErrorContext/ErrorContext.cjs');
+var findEmbeddedWalletFromVerifiedCredentials = require('../../functions/findEmbeddedWalletFromVerifiedCredentials/findEmbeddedWalletFromVerifiedCredentials.cjs');
 require('@dynamic-labs/multi-wallet');
 require('react-international-phone');
 require('../../../config/ApiEndpoint.cjs');
@@ -78,53 +80,83 @@ require('../../../store/state/sendBalances.cjs');
 require('../../../widgets/DynamicWidget/components/DynamicWidgetHeader/DynamicWidgetHeader.cjs');
 require('../../../views/TransactionConfirmationView/helpers/transactionErrorMessage.cjs');
 require('../../../widgets/DynamicWidget/views/ManagePasskeysWidgetView/PasskeyCard/PasskeyCard.cjs');
+var useEmbeddedReveal = require('../useEmbeddedReveal/useEmbeddedReveal.cjs');
 require('../../../../index.cjs');
 require('../../../store/state/tokenBalances.cjs');
 require('../../../shared/utils/functions/getInitialUrl/getInitialUrl.cjs');
 var useInternalDynamicContext = require('../../../context/DynamicContext/useDynamicContext/useInternalDynamicContext.cjs');
 require('../useEmbeddedWallet/useSecureEnclaveEmbeddedWallet/constants.cjs');
 
+let acknowledgedExportPrompt = false;
 const useSyncEmbeddedWalletFlow = () => {
-    const { projectSettings, user, primaryWalletId, walletConnectorOptions, setShowAuthFlow, } = useInternalDynamicContext.useInternalDynamicContext();
+    const { projectSettings, user, primaryWalletId, walletConnectorOptions, primaryWallet, setShowAuthFlow, } = useInternalDynamicContext.useInternalDynamicContext();
     const { isLoadingEmbeddedWallet } = WalletContext.useWalletContext();
     const { loading: globalLoading } = LoadingContext.useLoadingContext();
-    const { createEmbeddedWallet, shouldAutoCreateEmbeddedWallet } = useEmbeddedWallet.useEmbeddedWallet();
+    const { initExportProcess } = useEmbeddedReveal.useEmbeddedReveal();
+    const [wasShownExportPrompt, setWasShownExportPrompt] = useLocalStorage.useLocalStorage(`dynamic_export_prompt-${user === null || user === void 0 ? void 0 : user.userId}`, false, (data) => Boolean(data));
+    const { createEmbeddedWallet, shouldAutoCreateEmbeddedWallet, shouldPromptForKeyExport, } = useEmbeddedWallet.useEmbeddedWallet();
     const triggeredCreate = React.useRef(false);
+    const handleAcknowledgeExportPrompt = React.useCallback((value = true) => {
+        acknowledgedExportPrompt = value;
+        setWasShownExportPrompt(value);
+    }, [setWasShownExportPrompt]);
     useDynamicEvents.useInternalDynamicEvents('logout', () => {
         triggeredCreate.current = false;
+        acknowledgedExportPrompt = false;
     });
     // this is used to trigger createEmbeddedWallet
     // when user didn't create a passkey after login,
     // we force them to created it before they can use the app
     // ** It must be an useEffect because some of the dependencies are async
     React.useEffect(() => {
-        const createWallet = () => _tslib.__awaiter(void 0, void 0, void 0, function* () {
-            triggeredCreate.current = true;
-            try {
-                yield createEmbeddedWallet();
+        const syncEmbeddedWallet = () => _tslib.__awaiter(void 0, void 0, void 0, function* () {
+            const isNewUser = user === null || user === void 0 ? void 0 : user.newUser;
+            if (shouldSyncCreateWallet) {
+                triggeredCreate.current = true;
+                try {
+                    yield createEmbeddedWallet();
+                }
+                catch (error) {
+                    if (error instanceof utils.EmbeddedWalletException) {
+                        logger.logger.debug('Error creating embedded wallet', error);
+                    }
+                    else {
+                        logger.logger.error('Error creating embedded wallet', error);
+                    }
+                    setShowAuthFlow(false);
+                }
             }
-            catch (error) {
-                if (error instanceof utils.EmbeddedWalletException) {
-                    logger.logger.debug('Error creating embedded wallet', error);
+            if (shouldSyncPromptKeyExport &&
+                isNewUser &&
+                findEmbeddedWalletFromVerifiedCredentials.findEmbeddedWalletFromVerifiedCredentials(user) &&
+                primaryWallet) {
+                try {
+                    setShowAuthFlow(true);
+                    yield initExportProcess(true, true);
                 }
-                else {
-                    logger.logger.error('Error creating embedded wallet', error);
+                catch (error) {
+                    logger.logger.error('Error initializing embedded wallet export', error);
+                    setShowAuthFlow(false);
                 }
-                setShowAuthFlow(false);
             }
         });
         const shouldCreateWallet = shouldAutoCreateEmbeddedWallet();
-        if (!shouldCreateWallet ||
+        const shouldSyncCreateWallet = shouldCreateWallet && !triggeredCreate.current;
+        if (wasShownExportPrompt && !acknowledgedExportPrompt)
+            acknowledgedExportPrompt = true;
+        const shouldPromptKeyExport = shouldPromptForKeyExport();
+        const shouldSyncPromptKeyExport = shouldPromptKeyExport && !acknowledgedExportPrompt;
+        const shouldSyncEmbeddedWallet = shouldSyncCreateWallet || shouldSyncPromptKeyExport;
+        if (!shouldSyncEmbeddedWallet ||
             !user ||
             !projectSettings ||
             !walletConnectorOptions.length || // no connectors to use for the embedded wallet
             isLoadingEmbeddedWallet || // already has a wallet
-            globalLoading || // this will be true if auth is in progress
-            triggeredCreate.current // already triggered
+            globalLoading // this will be true if auth is in progress
         ) {
             return;
         }
-        createWallet();
+        syncEmbeddedWallet();
     }, [
         user,
         projectSettings,
@@ -135,7 +167,17 @@ const useSyncEmbeddedWalletFlow = () => {
         globalLoading,
         shouldAutoCreateEmbeddedWallet,
         setShowAuthFlow,
+        initExportProcess,
+        primaryWallet,
+        shouldPromptForKeyExport,
+        setWasShownExportPrompt,
+        handleAcknowledgeExportPrompt,
+        wasShownExportPrompt,
     ]);
+    return {
+        acknowledgedExportPrompt,
+        handleAcknowledgeExportPrompt,
+    };
 };
 
 exports.useSyncEmbeddedWalletFlow = useSyncEmbeddedWalletFlow;

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

@@ -1 +1,4 @@
-export declare const useSyncEmbeddedWalletFlow: () => void;
+export declare const useSyncEmbeddedWalletFlow: () => {
+    acknowledgedExportPrompt: boolean;
+    handleAcknowledgeExportPrompt: (value?: boolean) => void;
+};

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

@@ -1,6 +1,6 @@
 'use client'
 import { __awaiter } from '../../../../../_virtual/_tslib.js';
-import { useRef, useEffect } from 'react';
+import { useRef, useCallback, useEffect } from 'react';
 import { EmbeddedWalletException } from '@dynamic-labs/utils';
 import { useEmbeddedWallet } from '../useEmbeddedWallet/useEmbeddedWallet.js';
 import '@dynamic-labs/sdk-api-core';
@@ -14,10 +14,12 @@ import '@dynamic-labs/wallet-book';
 import '../../constants/colors.js';
 import '../../constants/values.js';
 import '../../../store/state/loadingAndLifecycle.js';
+import { useLocalStorage } from '../../../shared/utils/hooks/useLocalStorage/useLocalStorage.js';
 import '../../../shared/consts/index.js';
 import { useInternalDynamicEvents } from '../events/useDynamicEvents/useDynamicEvents.js';
 import '../../../context/CaptchaContext/CaptchaContext.js';
 import '../../../context/ErrorContext/ErrorContext.js';
+import { findEmbeddedWalletFromVerifiedCredentials } from '../../functions/findEmbeddedWalletFromVerifiedCredentials/findEmbeddedWalletFromVerifiedCredentials.js';
 import '@dynamic-labs/multi-wallet';
 import 'react-international-phone';
 import '../../../config/ApiEndpoint.js';
@@ -74,53 +76,83 @@ import '../../../store/state/sendBalances.js';
 import '../../../widgets/DynamicWidget/components/DynamicWidgetHeader/DynamicWidgetHeader.js';
 import '../../../views/TransactionConfirmationView/helpers/transactionErrorMessage.js';
 import '../../../widgets/DynamicWidget/views/ManagePasskeysWidgetView/PasskeyCard/PasskeyCard.js';
+import { useEmbeddedReveal } from '../useEmbeddedReveal/useEmbeddedReveal.js';
 import '../../../../index.js';
 import '../../../store/state/tokenBalances.js';
 import '../../../shared/utils/functions/getInitialUrl/getInitialUrl.js';
 import { useInternalDynamicContext } from '../../../context/DynamicContext/useDynamicContext/useInternalDynamicContext.js';
 import '../useEmbeddedWallet/useSecureEnclaveEmbeddedWallet/constants.js';
 
+let acknowledgedExportPrompt = false;
 const useSyncEmbeddedWalletFlow = () => {
-    const { projectSettings, user, primaryWalletId, walletConnectorOptions, setShowAuthFlow, } = useInternalDynamicContext();
+    const { projectSettings, user, primaryWalletId, walletConnectorOptions, primaryWallet, setShowAuthFlow, } = useInternalDynamicContext();
     const { isLoadingEmbeddedWallet } = useWalletContext();
     const { loading: globalLoading } = useLoadingContext();
-    const { createEmbeddedWallet, shouldAutoCreateEmbeddedWallet } = useEmbeddedWallet();
+    const { initExportProcess } = useEmbeddedReveal();
+    const [wasShownExportPrompt, setWasShownExportPrompt] = useLocalStorage(`dynamic_export_prompt-${user === null || user === void 0 ? void 0 : user.userId}`, false, (data) => Boolean(data));
+    const { createEmbeddedWallet, shouldAutoCreateEmbeddedWallet, shouldPromptForKeyExport, } = useEmbeddedWallet();
     const triggeredCreate = useRef(false);
+    const handleAcknowledgeExportPrompt = useCallback((value = true) => {
+        acknowledgedExportPrompt = value;
+        setWasShownExportPrompt(value);
+    }, [setWasShownExportPrompt]);
     useInternalDynamicEvents('logout', () => {
         triggeredCreate.current = false;
+        acknowledgedExportPrompt = false;
     });
     // this is used to trigger createEmbeddedWallet
     // when user didn't create a passkey after login,
     // we force them to created it before they can use the app
     // ** It must be an useEffect because some of the dependencies are async
     useEffect(() => {
-        const createWallet = () => __awaiter(void 0, void 0, void 0, function* () {
-            triggeredCreate.current = true;
-            try {
-                yield createEmbeddedWallet();
+        const syncEmbeddedWallet = () => __awaiter(void 0, void 0, void 0, function* () {
+            const isNewUser = user === null || user === void 0 ? void 0 : user.newUser;
+            if (shouldSyncCreateWallet) {
+                triggeredCreate.current = true;
+                try {
+                    yield createEmbeddedWallet();
+                }
+                catch (error) {
+                    if (error instanceof EmbeddedWalletException) {
+                        logger.debug('Error creating embedded wallet', error);
+                    }
+                    else {
+                        logger.error('Error creating embedded wallet', error);
+                    }
+                    setShowAuthFlow(false);
+                }
             }
-            catch (error) {
-                if (error instanceof EmbeddedWalletException) {
-                    logger.debug('Error creating embedded wallet', error);
+            if (shouldSyncPromptKeyExport &&
+                isNewUser &&
+                findEmbeddedWalletFromVerifiedCredentials(user) &&
+                primaryWallet) {
+                try {
+                    setShowAuthFlow(true);
+                    yield initExportProcess(true, true);
                 }
-                else {
-                    logger.error('Error creating embedded wallet', error);
+                catch (error) {
+                    logger.error('Error initializing embedded wallet export', error);
+                    setShowAuthFlow(false);
                 }
-                setShowAuthFlow(false);
             }
         });
         const shouldCreateWallet = shouldAutoCreateEmbeddedWallet();
-        if (!shouldCreateWallet ||
+        const shouldSyncCreateWallet = shouldCreateWallet && !triggeredCreate.current;
+        if (wasShownExportPrompt && !acknowledgedExportPrompt)
+            acknowledgedExportPrompt = true;
+        const shouldPromptKeyExport = shouldPromptForKeyExport();
+        const shouldSyncPromptKeyExport = shouldPromptKeyExport && !acknowledgedExportPrompt;
+        const shouldSyncEmbeddedWallet = shouldSyncCreateWallet || shouldSyncPromptKeyExport;
+        if (!shouldSyncEmbeddedWallet ||
             !user ||
             !projectSettings ||
             !walletConnectorOptions.length || // no connectors to use for the embedded wallet
             isLoadingEmbeddedWallet || // already has a wallet
-            globalLoading || // this will be true if auth is in progress
-            triggeredCreate.current // already triggered
+            globalLoading // this will be true if auth is in progress
         ) {
             return;
         }
-        createWallet();
+        syncEmbeddedWallet();
     }, [
         user,
         projectSettings,
@@ -131,7 +163,17 @@ const useSyncEmbeddedWalletFlow = () => {
         globalLoading,
         shouldAutoCreateEmbeddedWallet,
         setShowAuthFlow,
+        initExportProcess,
+        primaryWallet,
+        shouldPromptForKeyExport,
+        setWasShownExportPrompt,
+        handleAcknowledgeExportPrompt,
+        wasShownExportPrompt,
     ]);
+    return {
+        acknowledgedExportPrompt,
+        handleAcknowledgeExportPrompt,
+    };
 };
 
 export { useSyncEmbeddedWalletFlow };

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

@@ -95,7 +95,7 @@ const useUserAuth = ({ authMethod, }) => {
     const { setErrorMessage, setError } = ErrorContext.useErrorContext();
     const { setExistentAccountData } = AccountExistsContext.useAccountExistsContext();
     const handleAuthenticatedUser = useHandleAuthenticatedUser.useHandleAuthenticatedUser();
-    const { shouldAutoCreateEmbeddedWallet } = useEmbeddedWallet.useEmbeddedWallet();
+    const { shouldAutoCreateEmbeddedWallet, shouldPromptForKeyExport } = useEmbeddedWallet.useEmbeddedWallet();
     const isVerifyResponse = (response) => response.user;
     const initAuth = (_a) => _tslib.__awaiter(void 0, [_a], void 0, function* ({ isSignIn = true, verifyFunction, onVerifySuccess, onSettled, onError, showSuccessMessage = false, skipDefaultErrorHandling = false, }) {
         var _b;
@@ -129,9 +129,10 @@ const useUserAuth = ({ authMethod, }) => {
             }
             setMultiWalletWidgetState('idle');
             yield handleAuthenticatedUser(verifiedUser);
-            // we should only close auth flow if no wallet is going to be created,
-            // otherwise there will be a glitch with auth flow closing and then reopening for passkeys
+            // we should only close auth flow if no wallet is going to be created or there is no key export
+            // otherwise there will be a glitch with auth flow closing and then reopening for passkeys or export
             const shouldCreateWallet = shouldAutoCreateEmbeddedWallet(verifiedUser);
+            const shouldPromptExport = shouldPromptForKeyExport();
             if (showSuccessMessage) {
                 // this timeout is set to make sure that the user will see success message
                 yield sleepToShowSuccessMessage();
@@ -139,7 +140,7 @@ const useUserAuth = ({ authMethod, }) => {
             if (isSignIn) {
                 setCallback('authSuccess');
             }
-            if (!shouldCreateWallet) {
+            if (!shouldCreateWallet && !shouldPromptExport) {
                 setShowAuthFlow(false);
             }
             onSettled === null || onSettled === void 0 ? void 0 : onSettled();

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

@@ -91,7 +91,7 @@ const useUserAuth = ({ authMethod, }) => {
     const { setErrorMessage, setError } = useErrorContext();
     const { setExistentAccountData } = useAccountExistsContext();
     const handleAuthenticatedUser = useHandleAuthenticatedUser();
-    const { shouldAutoCreateEmbeddedWallet } = useEmbeddedWallet();
+    const { shouldAutoCreateEmbeddedWallet, shouldPromptForKeyExport } = useEmbeddedWallet();
     const isVerifyResponse = (response) => response.user;
     const initAuth = (_a) => __awaiter(void 0, [_a], void 0, function* ({ isSignIn = true, verifyFunction, onVerifySuccess, onSettled, onError, showSuccessMessage = false, skipDefaultErrorHandling = false, }) {
         var _b;
@@ -125,9 +125,10 @@ const useUserAuth = ({ authMethod, }) => {
             }
             setMultiWalletWidgetState('idle');
             yield handleAuthenticatedUser(verifiedUser);
-            // we should only close auth flow if no wallet is going to be created,
-            // otherwise there will be a glitch with auth flow closing and then reopening for passkeys
+            // we should only close auth flow if no wallet is going to be created or there is no key export
+            // otherwise there will be a glitch with auth flow closing and then reopening for passkeys or export
             const shouldCreateWallet = shouldAutoCreateEmbeddedWallet(verifiedUser);
+            const shouldPromptExport = shouldPromptForKeyExport();
             if (showSuccessMessage) {
                 // this timeout is set to make sure that the user will see success message
                 yield sleepToShowSuccessMessage();
@@ -135,7 +136,7 @@ const useUserAuth = ({ authMethod, }) => {
             if (isSignIn) {
                 setCallback('authSuccess');
             }
-            if (!shouldCreateWallet) {
+            if (!shouldCreateWallet && !shouldPromptExport) {
                 setShowAuthFlow(false);
             }
             onSettled === null || onSettled === void 0 ? void 0 : onSettled();