@dynamic-labs/sdk-react-core 4.4.2 → 4.4.4

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

@@ -94,14 +94,14 @@ var useInternalDynamicContext = require('../../../context/DynamicContext/useDyna
 
 const useEmbeddedWalletPassword = () => {
     const { primaryWallet, setShowAuthFlow, environmentId } = useInternalDynamicContext.useInternalDynamicContext();
-    const { setView } = ViewContext.useViewContext();
+    const { pushView } = ViewContext.useViewContext();
     const createPassword = React.useCallback((isClaim, isSignUp) => _tslib.__awaiter(void 0, void 0, void 0, function* () {
         setShowAuthFlow(true, { ignoreIfIsEmbeddedWidget: false });
         if (isClaim) {
-            setView('wallet-claim-intro');
+            pushView('wallet-claim-intro');
         }
         else {
-            setView('create-password-view', {
+            pushView('create-password-view', {
                 isSignUp,
                 notCalledFromWalletUtils: true,
             });
@@ -110,7 +110,7 @@ const useEmbeddedWalletPassword = () => {
             dynamicEvents.dynamicEvents.once('embeddedWalletCreatePasswordCompleted', (password) => resolve(password));
             dynamicEvents.dynamicEvents.once('embeddedWalletCreatePasswordFailed', (error) => reject(error));
         });
-    }), [setShowAuthFlow, setView]);
+    }), [setShowAuthFlow, pushView]);
     const claimWallet = React.useCallback(() => _tslib.__awaiter(void 0, void 0, void 0, function* () {
         try {
             if (!primaryWallet) {

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

@@ -90,14 +90,14 @@ import { useInternalDynamicContext } from '../../../context/DynamicContext/useDy
 
 const useEmbeddedWalletPassword = () => {
     const { primaryWallet, setShowAuthFlow, environmentId } = useInternalDynamicContext();
-    const { setView } = useViewContext();
+    const { pushView } = useViewContext();
     const createPassword = useCallback((isClaim, isSignUp) => __awaiter(void 0, void 0, void 0, function* () {
         setShowAuthFlow(true, { ignoreIfIsEmbeddedWidget: false });
         if (isClaim) {
-            setView('wallet-claim-intro');
+            pushView('wallet-claim-intro');
         }
         else {
-            setView('create-password-view', {
+            pushView('create-password-view', {
                 isSignUp,
                 notCalledFromWalletUtils: true,
             });
@@ -106,7 +106,7 @@ const useEmbeddedWalletPassword = () => {
             dynamicEvents.once('embeddedWalletCreatePasswordCompleted', (password) => resolve(password));
             dynamicEvents.once('embeddedWalletCreatePasswordFailed', (error) => reject(error));
         });
-    }), [setShowAuthFlow, setView]);
+    }), [setShowAuthFlow, pushView]);
     const claimWallet = useCallback(() => __awaiter(void 0, void 0, void 0, function* () {
         try {
             if (!primaryWallet) {

package/src/lib/utils/hooks/useFunding/useConnectWalletForFunding/useConnectWalletForFunding.cjs

@@ -33,7 +33,7 @@ var resolvePromiseRef = require('../../../functions/resolvePromiseRef/resolvePro
 var rejectPromiseRef = require('../../../functions/rejectPromiseRef/rejectPromiseRef.cjs');
 require('../../../../context/AccessDeniedContext/AccessDeniedContext.cjs');
 require('../../../../context/AccountExistsContext/AccountExistsContext.cjs');
-require('../../../../context/UserWalletsContext/UserWalletsContext.cjs');
+var UserWalletsContext = require('../../../../context/UserWalletsContext/UserWalletsContext.cjs');
 require('../../../../events/dynamicEvents.cjs');
 require('../../../../context/VerificationContext/VerificationContext.cjs');
 require('react-dom');
@@ -52,7 +52,7 @@ require('../../../../context/FieldsStateContext/FieldsStateContext.cjs');
 require('../../../../context/UserFieldEditorContext/UserFieldEditorContext.cjs');
 require('@dynamic-labs/rpc-providers');
 require('../../../../store/state/loadingAndLifecycle.cjs');
-require('../../../../store/state/walletOptions/walletOptions.cjs');
+var walletOptions = require('../../../../store/state/walletOptions/walletOptions.cjs');
 var useHandleWalletItem = require('../../useWalletItemActions/useHandleWalletItem/useHandleWalletItem.cjs');
 require('react-i18next');
 require('../../../../components/Accordion/components/AccordionItem/AccordionItem.cjs');
@@ -99,8 +99,9 @@ var useInternalDynamicContext = require('../../../../context/DynamicContext/useD
 
 const useConnectWalletForFunding = ({ externalWalletFundingEnabled, }) => {
     const { primaryWallet, setShowAuthFlow } = useInternalDynamicContext.useInternalDynamicContext();
-    const { setView } = ViewContext.useViewContext();
-    const { walletOptions } = useWalletOptions.useWalletOptions();
+    const { clearStackAndPush } = ViewContext.useViewContext();
+    const userWallets = UserWalletsContext.useUserWallets();
+    const { walletOptions: walletOptions$1 } = useWalletOptions.useWalletOptions();
     const internalConnectionPromiseRef = React.useRef(null);
     const connectWalletPromiseRef = React.useRef(null);
     const handleWalletMethod = React.useCallback((props) => _tslib.__awaiter(void 0, void 0, void 0, function* () {
@@ -122,22 +123,38 @@ const useConnectWalletForFunding = ({ externalWalletFundingEnabled, }) => {
         rejectPromiseRef.rejectPromiseRef(connectWalletPromiseRef, new utils.DynamicError('User cancelled'));
     });
     const getWalletAddress = React.useCallback((walletConnector) => {
-        const walletOption = walletOptions.find(({ key }) => key === walletConnector.key);
+        const walletOption = walletOptions$1.find(({ key }) => key === walletConnector.key);
         if (!walletOption)
             return Promise.reject(new utils.DynamicError(`Connect wallet for funding error: wallet option for ${walletConnector.key} not found`));
         internalConnectionPromiseRef.current = new utils.DeferredPromise();
         handleWalletItemClick(Object.assign(Object.assign({}, walletOption), { walletConnector }));
         return internalConnectionPromiseRef.current.promise;
-    }, [handleWalletItemClick, walletOptions]);
-    return React.useCallback(() => {
+    }, [handleWalletItemClick, walletOptions$1]);
+    const hasWalletConnectWallet = userWallets.some((wallet) => wallet.connector.isWalletConnect);
+    // WC does not allow multiple sessions, so we have 2 cases here:
+    // 1. The user has a linked WalletConnect wallet.
+    //    In this case, we should not do anything, and our logic will prevent other WCs from being
+    //    selected for funding.
+    // 2. The user does not have a WalletConnect wallet linked.
+    //    In this case, we should reset the WC session — this is because they might have just
+    //    previously connected another WC wallet for funding and that session could still be active.
+    const resetWalletConnectSession = React.useCallback(() => _tslib.__awaiter(void 0, void 0, void 0, function* () {
+        if (hasWalletConnectWallet)
+            return;
+        const walletOption = walletOptions.getWalletConnectorOptions().find(({ walletConnector }) => walletConnector.isWalletConnect);
+        yield (walletOption === null || walletOption === void 0 ? void 0 : walletOption.walletConnector.endSession());
+        yield (walletOption === null || walletOption === void 0 ? void 0 : walletOption.walletConnector.init());
+    }), [hasWalletConnectWallet]);
+    return React.useCallback(() => _tslib.__awaiter(void 0, void 0, void 0, function* () {
         if (!externalWalletFundingEnabled) {
             return Promise.reject(new Error('External wallet funding is not enabled'));
         }
         if (connectWalletPromiseRef.current) {
             return connectWalletPromiseRef.current.promise;
         }
+        resetWalletConnectSession();
         connectWalletPromiseRef.current = new utils.DeferredPromise();
-        setView('external-funding-wallet-list', {
+        clearStackAndPush('external-funding-wallet-list', {
             onSelectWallet: (_a) => _tslib.__awaiter(void 0, [_a], void 0, function* ({ walletConnector }) {
                 if (!connectWalletPromiseRef.current)
                     return;
@@ -176,9 +193,10 @@ const useConnectWalletForFunding = ({ externalWalletFundingEnabled, }) => {
             performMultiWalletChecks: false,
         });
         return connectWalletPromiseRef.current.promise;
-    }, [
+    }), [
         externalWalletFundingEnabled,
-        setView,
+        resetWalletConnectSession,
+        clearStackAndPush,
         primaryWallet === null || primaryWallet === void 0 ? void 0 : primaryWallet.chain,
         setShowAuthFlow,
         getWalletAddress,

package/src/lib/utils/hooks/useFunding/useConnectWalletForFunding/useConnectWalletForFunding.js

@@ -29,7 +29,7 @@ import { resolvePromiseRef } from '../../../functions/resolvePromiseRef/resolveP
 import { rejectPromiseRef } from '../../../functions/rejectPromiseRef/rejectPromiseRef.js';
 import '../../../../context/AccessDeniedContext/AccessDeniedContext.js';
 import '../../../../context/AccountExistsContext/AccountExistsContext.js';
-import '../../../../context/UserWalletsContext/UserWalletsContext.js';
+import { useUserWallets } from '../../../../context/UserWalletsContext/UserWalletsContext.js';
 import '../../../../events/dynamicEvents.js';
 import '../../../../context/VerificationContext/VerificationContext.js';
 import 'react-dom';
@@ -48,7 +48,7 @@ import '../../../../context/FieldsStateContext/FieldsStateContext.js';
 import '../../../../context/UserFieldEditorContext/UserFieldEditorContext.js';
 import '@dynamic-labs/rpc-providers';
 import '../../../../store/state/loadingAndLifecycle.js';
-import '../../../../store/state/walletOptions/walletOptions.js';
+import { getWalletConnectorOptions } from '../../../../store/state/walletOptions/walletOptions.js';
 import { useHandleWalletItem } from '../../useWalletItemActions/useHandleWalletItem/useHandleWalletItem.js';
 import 'react-i18next';
 import '../../../../components/Accordion/components/AccordionItem/AccordionItem.js';
@@ -95,7 +95,8 @@ import { useInternalDynamicContext } from '../../../../context/DynamicContext/us
 
 const useConnectWalletForFunding = ({ externalWalletFundingEnabled, }) => {
     const { primaryWallet, setShowAuthFlow } = useInternalDynamicContext();
-    const { setView } = useViewContext();
+    const { clearStackAndPush } = useViewContext();
+    const userWallets = useUserWallets();
     const { walletOptions } = useWalletOptions();
     const internalConnectionPromiseRef = useRef(null);
     const connectWalletPromiseRef = useRef(null);
@@ -125,15 +126,31 @@ const useConnectWalletForFunding = ({ externalWalletFundingEnabled, }) => {
         handleWalletItemClick(Object.assign(Object.assign({}, walletOption), { walletConnector }));
         return internalConnectionPromiseRef.current.promise;
     }, [handleWalletItemClick, walletOptions]);
-    return useCallback(() => {
+    const hasWalletConnectWallet = userWallets.some((wallet) => wallet.connector.isWalletConnect);
+    // WC does not allow multiple sessions, so we have 2 cases here:
+    // 1. The user has a linked WalletConnect wallet.
+    //    In this case, we should not do anything, and our logic will prevent other WCs from being
+    //    selected for funding.
+    // 2. The user does not have a WalletConnect wallet linked.
+    //    In this case, we should reset the WC session — this is because they might have just
+    //    previously connected another WC wallet for funding and that session could still be active.
+    const resetWalletConnectSession = useCallback(() => __awaiter(void 0, void 0, void 0, function* () {
+        if (hasWalletConnectWallet)
+            return;
+        const walletOption = getWalletConnectorOptions().find(({ walletConnector }) => walletConnector.isWalletConnect);
+        yield (walletOption === null || walletOption === void 0 ? void 0 : walletOption.walletConnector.endSession());
+        yield (walletOption === null || walletOption === void 0 ? void 0 : walletOption.walletConnector.init());
+    }), [hasWalletConnectWallet]);
+    return useCallback(() => __awaiter(void 0, void 0, void 0, function* () {
         if (!externalWalletFundingEnabled) {
             return Promise.reject(new Error('External wallet funding is not enabled'));
         }
         if (connectWalletPromiseRef.current) {
             return connectWalletPromiseRef.current.promise;
         }
+        resetWalletConnectSession();
         connectWalletPromiseRef.current = new DeferredPromise();
-        setView('external-funding-wallet-list', {
+        clearStackAndPush('external-funding-wallet-list', {
             onSelectWallet: (_a) => __awaiter(void 0, [_a], void 0, function* ({ walletConnector }) {
                 if (!connectWalletPromiseRef.current)
                     return;
@@ -172,9 +189,10 @@ const useConnectWalletForFunding = ({ externalWalletFundingEnabled, }) => {
             performMultiWalletChecks: false,
         });
         return connectWalletPromiseRef.current.promise;
-    }, [
+    }), [
         externalWalletFundingEnabled,
-        setView,
+        resetWalletConnectSession,
+        clearStackAndPush,
         primaryWallet === null || primaryWallet === void 0 ? void 0 : primaryWallet.chain,
         setShowAuthFlow,
         getWalletAddress,

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

@@ -93,7 +93,7 @@ var useInternalDynamicContext = require('../../../context/DynamicContext/useDyna
 
 const useHandleWalletsToConnect = () => {
     const { bridgeChains, bridgeChainsToConnect, setShowAuthFlow, bridgeOnboardingCompleted, setBridgeOnboardingCompleted, } = useInternalDynamicContext.useInternalDynamicContext();
-    const { setView, goToInitialView } = ViewContext.useViewContext();
+    const { pushView, clearStackAndPushInitialView } = ViewContext.useViewContext();
     const handleWalletsToConnect = ({ walletConnector, }) => {
         if (!bridgeChains) {
             setShowAuthFlow(false);
@@ -107,26 +107,26 @@ const useHandleWalletsToConnect = () => {
         // Avoid showing wallet-list when wallet updates network to the correct one in run time (bridge mode)
         if (bridgeChainsToConnect.length === 0) {
             setShowAuthFlow(false);
-            return goToInitialView();
+            return clearStackAndPushInitialView();
         }
         if (!walletConnector || !walletConnector.connectedChain) {
             setShowAuthFlow(false);
-            return goToInitialView();
+            return clearStackAndPushInitialView();
         }
         const restOfWallets = bridgeChainsToConnect.filter((wallet) => wallet.chain !== (walletConnector === null || walletConnector === void 0 ? void 0 : walletConnector.connectedChain));
         const allWalletsConnected = restOfWallets.length === 0;
         if (allWalletsConnected) {
             if (!bridgeOnboardingCompleted) {
                 setBridgeOnboardingCompleted(true);
-                setView('bridge-summary');
+                pushView('bridge-summary');
             }
             else {
                 setShowAuthFlow(false);
-                goToInitialView();
+                clearStackAndPushInitialView();
             }
             return;
         }
-        setView('bridge-next-wallet-connection');
+        pushView('bridge-next-wallet-connection');
     };
     return { handleWalletsToConnect };
 };

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

@@ -89,7 +89,7 @@ import { useInternalDynamicContext } from '../../../context/DynamicContext/useDy
 
 const useHandleWalletsToConnect = () => {
     const { bridgeChains, bridgeChainsToConnect, setShowAuthFlow, bridgeOnboardingCompleted, setBridgeOnboardingCompleted, } = useInternalDynamicContext();
-    const { setView, goToInitialView } = useViewContext();
+    const { pushView, clearStackAndPushInitialView } = useViewContext();
     const handleWalletsToConnect = ({ walletConnector, }) => {
         if (!bridgeChains) {
             setShowAuthFlow(false);
@@ -103,26 +103,26 @@ const useHandleWalletsToConnect = () => {
         // Avoid showing wallet-list when wallet updates network to the correct one in run time (bridge mode)
         if (bridgeChainsToConnect.length === 0) {
             setShowAuthFlow(false);
-            return goToInitialView();
+            return clearStackAndPushInitialView();
         }
         if (!walletConnector || !walletConnector.connectedChain) {
             setShowAuthFlow(false);
-            return goToInitialView();
+            return clearStackAndPushInitialView();
         }
         const restOfWallets = bridgeChainsToConnect.filter((wallet) => wallet.chain !== (walletConnector === null || walletConnector === void 0 ? void 0 : walletConnector.connectedChain));
         const allWalletsConnected = restOfWallets.length === 0;
         if (allWalletsConnected) {
             if (!bridgeOnboardingCompleted) {
                 setBridgeOnboardingCompleted(true);
-                setView('bridge-summary');
+                pushView('bridge-summary');
             }
             else {
                 setShowAuthFlow(false);
-                goToInitialView();
+                clearStackAndPushInitialView();
             }
             return;
         }
-        setView('bridge-next-wallet-connection');
+        pushView('bridge-next-wallet-connection');
     };
     return { handleWalletsToConnect };
 };

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

@@ -97,7 +97,7 @@ var useInternalDynamicContext = require('../../../context/DynamicContext/useDyna
 // This hook needs to be async that's why it's not using useMutation
 const useInitEmbeddedWalletAuthMethod = () => {
     const { primaryWallet, environmentId, user, projectSettings, setShowAuthFlow, } = useInternalDynamicContext.useInternalDynamicContext();
-    const { setView } = ViewContext.useViewContext();
+    const { pushView } = ViewContext.useViewContext();
     const [isLoading, setIsLoading] = React.useState(false);
     const [error, setError] = React.useState();
     const { getEOAWallet } = useSmartWallets.useSmartWallets();
@@ -125,7 +125,7 @@ const useInitEmbeddedWalletAuthMethod = () => {
                 wallet: wallet,
             });
             if (showEmailBundle) {
-                setView('passkey-recovery-bundle', {
+                pushView('passkey-recovery-bundle', {
                     authenticatorType,
                     currentAction,
                 });

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

@@ -93,7 +93,7 @@ import { useInternalDynamicContext } from '../../../context/DynamicContext/useDy
 // This hook needs to be async that's why it's not using useMutation
 const useInitEmbeddedWalletAuthMethod = () => {
     const { primaryWallet, environmentId, user, projectSettings, setShowAuthFlow, } = useInternalDynamicContext();
-    const { setView } = useViewContext();
+    const { pushView } = useViewContext();
     const [isLoading, setIsLoading] = useState(false);
     const [error, setError] = useState();
     const { getEOAWallet } = useSmartWallets();
@@ -121,7 +121,7 @@ const useInitEmbeddedWalletAuthMethod = () => {
                 wallet: wallet,
             });
             if (showEmailBundle) {
-                setView('passkey-recovery-bundle', {
+                pushView('passkey-recovery-bundle', {
                     authenticatorType,
                     currentAction,
                 });

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

@@ -4,13 +4,13 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 
 var React = require('react');
-var ViewContext = require('../../../context/ViewContext/ViewContext.cjs');
 require('../../../context/DynamicContext/DynamicContext.cjs');
 require('@dynamic-labs/sdk-api-core');
 require('../../../shared/logger.cjs');
 require('@dynamic-labs/iconic');
 require('@dynamic-labs/wallet-connector-core');
 require('react/jsx-runtime');
+var ViewContext = require('../../../context/ViewContext/ViewContext.cjs');
 require('@dynamic-labs/wallet-book');
 require('@dynamic-labs/utils');
 require('../../constants/colors.cjs');
@@ -94,49 +94,49 @@ var useInternalDynamicContext = require('../../../context/DynamicContext/useDyna
 const useMfaModals = () => {
     var _a;
     const { setShowAuthFlow, projectSettings } = useInternalDynamicContext.useInternalDynamicContext();
-    const { setView } = ViewContext.useViewContext();
+    const { clearStackAndPush } = ViewContext.useViewContext();
     const isMfaEnabled = (_a = projectSettings === null || projectSettings === void 0 ? void 0 : projectSettings.security.mfa) === null || _a === void 0 ? void 0 : _a.enabled;
     const setShowMfaChooseType = React.useCallback((value) => {
         if (value) {
             if (!isMfaEnabled)
                 return;
-            setView('mfa-choose-device');
+            clearStackAndPush('mfa-choose-device');
         }
         setShowAuthFlow(value, { emitCancelAuth: true });
-    }, [isMfaEnabled, setShowAuthFlow, setView]);
+    }, [isMfaEnabled, setShowAuthFlow, clearStackAndPush]);
     const setShowMfaQRCode = React.useCallback((value) => {
         if (value) {
             if (!isMfaEnabled)
                 return;
             // If MFA is enabled, show the MFA setup view and set it as the initial setup
-            setView('mfa-secure-device', { isInitialSetup: true });
+            clearStackAndPush('mfa-secure-device', { isInitialSetup: true });
         }
         setShowAuthFlow(value, { emitCancelAuth: true });
-    }, [isMfaEnabled, setShowAuthFlow, setView]);
+    }, [isMfaEnabled, setShowAuthFlow, clearStackAndPush]);
     const setShowOTPVerification = React.useCallback((value) => {
         if (value) {
             if (!isMfaEnabled)
                 return;
-            setView('mfa-verification');
+            clearStackAndPush('mfa-verification');
         }
         setShowAuthFlow(value, { emitCancelAuth: true });
-    }, [isMfaEnabled, setShowAuthFlow, setView]);
+    }, [isMfaEnabled, setShowAuthFlow, clearStackAndPush]);
     const setShowMfaViewBackupCodes = React.useCallback((value) => {
         if (value) {
             if (!isMfaEnabled)
                 return;
-            setView('mfa-display-backup-codes');
+            clearStackAndPush('mfa-display-backup-codes');
         }
         setShowAuthFlow(value, { emitCancelAuth: true });
-    }, [isMfaEnabled, setShowAuthFlow, setView]);
+    }, [isMfaEnabled, setShowAuthFlow, clearStackAndPush]);
     const setShowMfaEnterBackupCodes = React.useCallback((value) => {
         if (value) {
             if (!isMfaEnabled)
                 return;
-            setView('mfa-recovery');
+            clearStackAndPush('mfa-recovery');
         }
         setShowAuthFlow(value, { emitCancelAuth: true });
-    }, [isMfaEnabled, setShowAuthFlow, setView]);
+    }, [isMfaEnabled, setShowAuthFlow, clearStackAndPush]);
     return {
         setShowMfaChooseType,
         setShowMfaEnterBackupCodes,

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

@@ -1,12 +1,12 @@
 'use client'
 import { useCallback } from 'react';
-import { useViewContext } from '../../../context/ViewContext/ViewContext.js';
 import '../../../context/DynamicContext/DynamicContext.js';
 import '@dynamic-labs/sdk-api-core';
 import '../../../shared/logger.js';
 import '@dynamic-labs/iconic';
 import '@dynamic-labs/wallet-connector-core';
 import 'react/jsx-runtime';
+import { useViewContext } from '../../../context/ViewContext/ViewContext.js';
 import '@dynamic-labs/wallet-book';
 import '@dynamic-labs/utils';
 import '../../constants/colors.js';
@@ -90,49 +90,49 @@ import { useInternalDynamicContext } from '../../../context/DynamicContext/useDy
 const useMfaModals = () => {
     var _a;
     const { setShowAuthFlow, projectSettings } = useInternalDynamicContext();
-    const { setView } = useViewContext();
+    const { clearStackAndPush } = useViewContext();
     const isMfaEnabled = (_a = projectSettings === null || projectSettings === void 0 ? void 0 : projectSettings.security.mfa) === null || _a === void 0 ? void 0 : _a.enabled;
     const setShowMfaChooseType = useCallback((value) => {
         if (value) {
             if (!isMfaEnabled)
                 return;
-            setView('mfa-choose-device');
+            clearStackAndPush('mfa-choose-device');
         }
         setShowAuthFlow(value, { emitCancelAuth: true });
-    }, [isMfaEnabled, setShowAuthFlow, setView]);
+    }, [isMfaEnabled, setShowAuthFlow, clearStackAndPush]);
     const setShowMfaQRCode = useCallback((value) => {
         if (value) {
             if (!isMfaEnabled)
                 return;
             // If MFA is enabled, show the MFA setup view and set it as the initial setup
-            setView('mfa-secure-device', { isInitialSetup: true });
+            clearStackAndPush('mfa-secure-device', { isInitialSetup: true });
         }
         setShowAuthFlow(value, { emitCancelAuth: true });
-    }, [isMfaEnabled, setShowAuthFlow, setView]);
+    }, [isMfaEnabled, setShowAuthFlow, clearStackAndPush]);
     const setShowOTPVerification = useCallback((value) => {
         if (value) {
             if (!isMfaEnabled)
                 return;
-            setView('mfa-verification');
+            clearStackAndPush('mfa-verification');
         }
         setShowAuthFlow(value, { emitCancelAuth: true });
-    }, [isMfaEnabled, setShowAuthFlow, setView]);
+    }, [isMfaEnabled, setShowAuthFlow, clearStackAndPush]);
     const setShowMfaViewBackupCodes = useCallback((value) => {
         if (value) {
             if (!isMfaEnabled)
                 return;
-            setView('mfa-display-backup-codes');
+            clearStackAndPush('mfa-display-backup-codes');
         }
         setShowAuthFlow(value, { emitCancelAuth: true });
-    }, [isMfaEnabled, setShowAuthFlow, setView]);
+    }, [isMfaEnabled, setShowAuthFlow, clearStackAndPush]);
     const setShowMfaEnterBackupCodes = useCallback((value) => {
         if (value) {
             if (!isMfaEnabled)
                 return;
-            setView('mfa-recovery');
+            clearStackAndPush('mfa-recovery');
         }
         setShowAuthFlow(value, { emitCancelAuth: true });
-    }, [isMfaEnabled, setShowAuthFlow, setView]);
+    }, [isMfaEnabled, setShowAuthFlow, clearStackAndPush]);
     return {
         setShowMfaChooseType,
         setShowMfaEnterBackupCodes,

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

@@ -113,7 +113,7 @@ const usePasskeyRecovery = () => {
     const { initAuthMethod } = useInitEmbeddedWalletAuthMethod.useInitEmbeddedWalletAuthMethod();
     const { setDisplayedDestination: setEmailForVerification, setVerificationUUID, } = VerificationContext.useVerification();
     const { getEOAWallet } = useSmartWallets.useSmartWallets();
-    const { setView } = ViewContext.useViewContext();
+    const { pushView } = ViewContext.useViewContext();
     const wallet = (_a = (primaryWallet && getEOAWallet(primaryWallet))) !== null && _a !== void 0 ? _a : primaryWallet;
     const isSessionRestored = React.useCallback(() => _tslib.__awaiter(void 0, void 0, void 0, function* () {
         var _d, _e;
@@ -190,7 +190,7 @@ const usePasskeyRecovery = () => {
             ? Object.keys(supportedAuthenticators)
             : [];
         if (!hasRecoveryEmail) {
-            setView('passkey-recovery-add-email', { shouldInitRecovery: true });
+            pushView('passkey-recovery-add-email', { shouldInitRecovery: true });
             setShowAuthFlow(true, {
                 ignoreIfIsEmbeddedWidget: false,
                 performMultiWalletChecks: false,
@@ -198,9 +198,7 @@ const usePasskeyRecovery = () => {
         }
         else if (!authenticatorType &&
             supportedAuthenticatorMethods.length > 1) {
-            setView('embedded-wallet-auth-choice', {
-                currentAction,
-            });
+            pushView('embedded-wallet-auth-choice', { currentAction });
             setShowAuthFlow(true, {
                 ignoreIfIsEmbeddedWidget: false,
                 performMultiWalletChecks: false,
@@ -232,7 +230,7 @@ const usePasskeyRecovery = () => {
         environmentId,
         user$1,
         setShowAuthFlow,
-        setView,
+        pushView,
         initAuthMethod,
         iframeContainerRef,
     ]);
@@ -264,7 +262,7 @@ const usePasskeyRecovery = () => {
             if (nextView === sdkApiCore.NextViewEnum.Done) {
                 return userProfile;
             }
-            setView('verify-email', { isEmailRecoveryFlow: true });
+            pushView('verify-email', { isEmailRecoveryFlow: true });
             setEmailForVerification(emailInput);
             setVerificationUUID(emailVerification === null || emailVerification === void 0 ? void 0 : emailVerification.verificationUUID);
             return new Promise((resolve, reject) => {

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

@@ -109,7 +109,7 @@ const usePasskeyRecovery = () => {
     const { initAuthMethod } = useInitEmbeddedWalletAuthMethod();
     const { setDisplayedDestination: setEmailForVerification, setVerificationUUID, } = useVerification();
     const { getEOAWallet } = useSmartWallets();
-    const { setView } = useViewContext();
+    const { pushView } = useViewContext();
     const wallet = (_a = (primaryWallet && getEOAWallet(primaryWallet))) !== null && _a !== void 0 ? _a : primaryWallet;
     const isSessionRestored = useCallback(() => __awaiter(void 0, void 0, void 0, function* () {
         var _d, _e;
@@ -186,7 +186,7 @@ const usePasskeyRecovery = () => {
             ? Object.keys(supportedAuthenticators)
             : [];
         if (!hasRecoveryEmail) {
-            setView('passkey-recovery-add-email', { shouldInitRecovery: true });
+            pushView('passkey-recovery-add-email', { shouldInitRecovery: true });
             setShowAuthFlow(true, {
                 ignoreIfIsEmbeddedWidget: false,
                 performMultiWalletChecks: false,
@@ -194,9 +194,7 @@ const usePasskeyRecovery = () => {
         }
         else if (!authenticatorType &&
             supportedAuthenticatorMethods.length > 1) {
-            setView('embedded-wallet-auth-choice', {
-                currentAction,
-            });
+            pushView('embedded-wallet-auth-choice', { currentAction });
             setShowAuthFlow(true, {
                 ignoreIfIsEmbeddedWidget: false,
                 performMultiWalletChecks: false,
@@ -228,7 +226,7 @@ const usePasskeyRecovery = () => {
         environmentId,
         user,
         setShowAuthFlow,
-        setView,
+        pushView,
         initAuthMethod,
         iframeContainerRef,
     ]);
@@ -260,7 +258,7 @@ const usePasskeyRecovery = () => {
             if (nextView === NextViewEnum.Done) {
                 return userProfile;
             }
-            setView('verify-email', { isEmailRecoveryFlow: true });
+            pushView('verify-email', { isEmailRecoveryFlow: true });
             setEmailForVerification(emailInput);
             setVerificationUUID(emailVerification === null || emailVerification === void 0 ? void 0 : emailVerification.verificationUUID);
             return new Promise((resolve, reject) => {