@dynamic-labs/sdk-react-core 4.9.1 → 4.9.2

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

@@ -19,9 +19,9 @@ import '../../../context/ErrorContext/ErrorContext.js';
 import '@dynamic-labs/multi-wallet';
 import 'react-international-phone';
 import '../../../store/state/nonce/nonce.js';
-import '../../../store/state/projectSettings/projectSettings.js';
+import { useProjectSettings } from '../../../store/state/projectSettings/projectSettings.js';
 import '../../../config/ApiEndpoint.js';
-import '../../../store/state/user/user.js';
+import { useUserCoalesced } from '../../../store/state/user/user.js';
 import '../../../locale/locale.js';
 import '../../../store/state/dynamicContextProps/dynamicContextProps.js';
 import '../../../store/state/primaryWalletId/primaryWalletId.js';
@@ -65,6 +65,7 @@ import '../../../components/PasskeyCreatedSuccessBanner/PasskeyCreatedSuccessBan
 import '../../../components/Popper/Popper/Popper.js';
 import '../../../components/Popper/PopperContext/PopperContext.js';
 import 'react-focus-lock';
+import { useAllowClose } from './useAllowClose/useAllowClose.js';
 import 'qrcode';
 import 'formik';
 import '../useSubdomainCheck/useSubdomainCheck.js';
@@ -75,9 +76,10 @@ import '../../../context/ConnectWithOtpContext/constants.js';
 import '../../../widgets/DynamicBridgeWidget/views/WalletsView/components/SecondaryWallets/SecondaryWallets.js';
 import '@hcaptcha/react-hcaptcha';
 import '../../../widgets/DynamicWidget/context/DynamicWidgetContext.js';
+import { useFooterAnimationContext } from '../../../context/FooterAnimationContext/index.js';
 import { isUserLinkingWallet } from '../../../shared/utils/functions/isUserLinkingWallet/isUserLinkingWallet.js';
+import { viewsThatPreventBorderBelowHeader, viewsWithWalletListType, viewsThatHideHelpContent, viewsThatHideHeader, viewsThatShowConnectedWalletProgress, viewsThatShowDynamicFooter } from '../../constants/authViewLayoutChecks.js';
 import { useDynamicLayoutData } from '../useDynamicLayoutData/useDynamicLayoutData.js';
-import { useFooterAnimationContext } from '../../../context/FooterAnimationContext/index.js';
 import '../../../context/ErrorContext/hooks/useErrorText/useErrorText.js';
 import '../../../context/PasskeyContext/PasskeyContext.js';
 import '../../../store/state/sendBalances.js';
@@ -96,67 +98,24 @@ import { useInternalDynamicContext } from '../../../context/DynamicContext/useDy
 const useAuthLayoutChecks = () => {
     var _a;
     const { view } = useViewContext();
-    const { user, customPrivacyPolicy, customTermsOfServices, privacyPolicyUrl, termsOfServiceUrl, isBridgeFlow, authMode, projectSettings, } = useInternalDynamicContext();
+    const { customPrivacyPolicy, customTermsOfServices, privacyPolicyUrl, termsOfServiceUrl, isBridgeFlow, authMode, } = useInternalDynamicContext();
     const { isFooterExpanded } = useFooterAnimationContext();
     const { mockedSDK } = useMockContext();
     const { helpHeaderData } = useDynamicLayoutData({
         authMode,
         view: view.type,
     });
-    const displayBorderBelowHeader = (view.type !== 'wallet-list' &&
-        view.type !== 'login-with-email-or-wallet-full-wallet-list' &&
-        view.type !== 'multi-wallet-wallet-list' &&
-        view.type !== 'login-with-wallet-only') ||
-        isFooterExpanded;
-    const isWalletListTypeView = view.type === 'wallet-connect-mobile-wallets-list' ||
-        view.type === 'wallet-list' ||
-        view.type === 'login-with-email-or-wallet-full-wallet-list' ||
-        view.type === 'login-with-wallet-only';
+    const user = useUserCoalesced();
+    const projectSettings = useProjectSettings();
+    const isLinkingWallet = isUserLinkingWallet(user, view.type, mockedSDK);
+    const displayBorderBelowHeader = !viewsThatPreventBorderBelowHeader.includes(view.type) || isFooterExpanded;
+    const isWalletListTypeView = viewsWithWalletListType.includes(view.type);
     const showHelpContent = Boolean(helpHeaderData &&
-        // Notice the negation here
-        !(view.type === 'qr-code' ||
-            view.type === 'no-qr-not-installed' ||
-            view.type === 'wallet-used' ||
-            view.type === 'chainalysis-blocked-wallet' ||
-            view.type === 'wallet-sign' ||
-            view.type === 'collect-user-data' ||
-            view.type === 'passkey-new-domain-detected' ||
-            isUserLinkingWallet(user, view.type, mockedSDK)));
-    const showHeader = view.type !== 'collect-user-data' &&
-        view.type !== 'no-access' &&
-        view.type !== 'chainalysis-blocked-wallet' &&
-        view.type !== 'wallet-locked-view' &&
-        view.type !== 'gate-blocked-wallet' &&
-        view.type !== 'email-wallet-otp-verification-view' &&
-        view.type !== 'bridge-welcome' &&
-        view.type !== 'bridge-summary' &&
-        view.type !== 'bridge-next-wallet-connection' &&
-        view.type !== 'passkey-intro' &&
-        view.type !== 'passkey-new-domain-detected' &&
-        view.type !== 'social-redirect-view' &&
-        view.type !== 'collect-user-data-login-no-wallet' &&
-        view.type !== 'passkey-recovery-bundle' &&
-        view.type !== 'passkey-recovery-start' &&
-        view.type !== 'embedded-reveal-view' &&
-        view.type !== 'embedded-reveal-account-view' &&
-        view.type !== 'rename-passkey' &&
-        view.type !== 'embedded-wallet-auth-choice' &&
-        view.type !== 'passkey-recovery-add-email' &&
-        view.type !== 'global-wallet-confirm' &&
-        view.type !== 'global-wallet-malicious' &&
-        view.type !== 'global-wallet-info' &&
-        view.type !== 'mfa-choose-device' &&
-        view.type !== 'mfa-verification';
-    const showConnectedWalletProgress = isBridgeFlow &&
-        (view.type === 'wallet-list' ||
-            view.type === 'qr-code' ||
-            view.type === 'wallet-connect-mobile-wallets-list' ||
-            view.type === 'pending-connect' ||
-            view.type === 'pending-signature' ||
-            view.type === 'pending-signature-without-back-button' ||
-            view.type === 'bridge-next-wallet-connection' ||
-            view.type === 'bridge-summary');
-    const showToSFooter = Boolean(!isUserLinkingWallet(user, view.type, mockedSDK) &&
+        !viewsThatHideHelpContent.includes(view.type) &&
+        !isLinkingWallet);
+    const showHeader = !viewsThatHideHeader.includes(view.type);
+    const showConnectedWalletProgress = isBridgeFlow && viewsThatShowConnectedWalletProgress.includes(view.type);
+    const showToSFooter = Boolean(!isLinkingWallet &&
         (view.type === 'wallet-list' ||
             view.type === 'wallet-connect-mobile-wallets-list' ||
             // Don't show empty footer during the login
@@ -169,44 +128,12 @@ const useAuthLayoutChecks = () => {
                     customPrivacyPolicy ||
                     customTermsOfServices))));
     const showDynamicFooter = Boolean((_a = projectSettings === null || projectSettings === void 0 ? void 0 : projectSettings.sdk) === null || _a === void 0 ? void 0 : _a.displayDynamicMessaging) &&
-        (view.type === 'login-with-email-or-wallet' ||
-            view.type === 'login-with-email-or-wallet-full-wallet-list' ||
-            view.type === 'login-with-wallet-only' ||
-            view.type === 'login-with-email-verification' ||
-            view.type === 'login-with-sms-verification' ||
-            view.type === 'verify-email' ||
-            view.type === 'verify-sms' ||
-            view.type === 'pending-connect' ||
-            view.type === 'wallet-group' ||
-            view.type === 'select-wallet-in-wallet-group' ||
-            view.type === 'select-hardware-wallet' ||
-            view.type === 'pending-signature' ||
-            view.type === 'qr-code' ||
-            view.type === 'wallet-used' ||
-            view.type === 'email-wallet-otp-verification-view' ||
-            view.type === 'farcaster-connect-view' ||
-            view.type === 'merge-user-accounts' ||
-            view.type === 'merge-user-accounts-conflicts' ||
-            view.type === 'mfa-verification' ||
-            view.type === 'mfa-display-backup-codes' ||
-            view.type === 'mfa-recovery');
-    const showCloseButton = view.type !== 'login-with-email-or-wallet-full-wallet-list' &&
-        view.type !== 'login-with-email-verification' &&
-        view.type !== 'login-with-sms-verification' &&
-        view.type !== 'network-not-supported' &&
-        view.type !== 'passkey-recovery-complete' &&
-        view.type !== 'passkey-recovery-start' &&
-        view.type !== 'passkey-recovery-bundle' &&
-        view.type !== 'rename-passkey' &&
-        view.type !== 'mobile-wallet-redirect-view' &&
-        view.type !== 'qr-code' &&
-        view.type !== 'mfa-verification' &&
-        view.type !== 'mfa-display-backup-codes' &&
-        view.type !== 'mfa-recovery' &&
-        view.type !== 'user-delete-account';
+        viewsThatShowDynamicFooter.includes(view.type);
     const showDefaultFooter = !showConnectedWalletProgress && !showDynamicFooter && !showToSFooter;
     const shouldHideDynamicFooterSeparator = showDynamicFooter && showToSFooter;
+    const { allowsClosing, showCloseButton } = useAllowClose();
     return {
+        allowsClosing,
         displayBorderBelowHeader,
         isWalletListTypeView,
         shouldHideDynamicFooterSeparator,

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

@@ -101,14 +101,15 @@ require('../../../shared/utils/functions/getInitialUrl/getInitialUrl.cjs');
 var useInternalDynamicContext = require('../../../context/DynamicContext/useDynamicContext/useInternalDynamicContext.cjs');
 
 const dynamicWaasKey = 'dynamicwaas';
-const configWaasWalletConnector = ({ walletConnector, environmentId, apiBaseUrl, authToken, }) => {
+const configWaasWalletConnector = ({ walletConnector, environmentId, apiBaseUrl, authToken, relayUrl, }) => {
     walletConnector.setEnvironmentId(environmentId);
     walletConnector.setBaseApiUrl(apiBaseUrl === null || apiBaseUrl === void 0 ? void 0 : apiBaseUrl.replace('/api/v0', ''));
     walletConnector.setGetAuthTokenFunction(() => authToken !== null && authToken !== void 0 ? authToken : '');
+    walletConnector.setRelayUrl(relayUrl);
     return walletConnector;
 };
 const useDynamicWaas = () => {
-    var _a;
+    var _a, _b, _c;
     const { setShowAuthFlow } = useInternalDynamicContext.useInternalDynamicContext();
     const { user: user$1 } = user.useUser();
     const apiBaseUrl = dynamicContextProps.useApiBaseUrl();
@@ -116,8 +117,9 @@ const useDynamicWaas = () => {
     const environmentId = dynamicContextProps.useEnvironmentId();
     const walletConnectorOptions = walletOptions.useWalletConnectorOptions();
     const refresh = useRefreshUser.useRefreshUser();
+    const relayUrl = (_b = (_a = projectSettings$1 === null || projectSettings$1 === void 0 ? void 0 : projectSettings$1.sdk) === null || _a === void 0 ? void 0 : _a.waas) === null || _b === void 0 ? void 0 : _b.relayUrl;
     const embeddedWalletSettings = projectSettings$1 === null || projectSettings$1 === void 0 ? void 0 : projectSettings$1.sdk.embeddedWallets;
-    const enabledChains = (_a = embeddedWalletSettings === null || embeddedWalletSettings === void 0 ? void 0 : embeddedWalletSettings.chainConfigurations) === null || _a === void 0 ? void 0 : _a.filter((c) => c.enabled);
+    const enabledChains = (_c = embeddedWalletSettings === null || embeddedWalletSettings === void 0 ? void 0 : embeddedWalletSettings.chainConfigurations) === null || _c === void 0 ? void 0 : _c.filter((c) => c.enabled);
     const primaryChain = enabledChains === null || enabledChains === void 0 ? void 0 : enabledChains.find((chain) => chain.primary);
     const enabledChainNames = enabledChains === null || enabledChains === void 0 ? void 0 : enabledChains.map((chain) => chain.name);
     const automaticEmbeddedWalletCreationEnabled = embeddedWalletSettings === null || embeddedWalletSettings === void 0 ? void 0 : embeddedWalletSettings.automaticEmbeddedWalletCreation;
@@ -142,6 +144,7 @@ const useDynamicWaas = () => {
             apiBaseUrl,
             authToken,
             environmentId,
+            relayUrl: relayUrl !== null && relayUrl !== void 0 ? relayUrl : '',
             walletConnector,
         });
         return configuredWalletConnector;
@@ -198,7 +201,7 @@ const useDynamicWaas = () => {
         automaticEmbeddedWalletCreationForExternalEnabled,
         walletConnectorOptions,
     ]);
-    const importPrivateKey = (_b) => _tslib.__awaiter(void 0, [_b], void 0, function* ({ chainName, privateKey, }) {
+    const importPrivateKey = (_d) => _tslib.__awaiter(void 0, [_d], void 0, function* ({ chainName, privateKey, }) {
         const walletConnector = getWalletConnector(chainName);
         if (!walletConnector)
             return;

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

@@ -1,15 +1,18 @@
 import { IDynamicWaasConnector } from '@dynamic-labs/wallet-connector-core';
-export declare const configWaasWalletConnector: ({ walletConnector, environmentId, apiBaseUrl, authToken, }: {
+export declare const configWaasWalletConnector: ({ walletConnector, environmentId, apiBaseUrl, authToken, relayUrl, }: {
     walletConnector: IDynamicWaasConnector;
     environmentId: string;
     apiBaseUrl: string;
     authToken: string | undefined;
+    relayUrl: string;
 }) => IDynamicWaasConnector;
 export declare const useDynamicWaas: () => {
     createWalletAccount: () => Promise<({
         chainName: string;
         accountAddress: string;
-        publicKeyHex: string;
+        rawPublicKey: Uint8Array;
+        clientKeyShares: string[];
+        publicKeyHex?: string | undefined;
     } | undefined)[]>;
     dynamicWaasIsEnabled: boolean;
     getWalletConnector: (chainName: string) => IDynamicWaasConnector | undefined;

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

@@ -97,14 +97,15 @@ import '../../../shared/utils/functions/getInitialUrl/getInitialUrl.js';
 import { useInternalDynamicContext } from '../../../context/DynamicContext/useDynamicContext/useInternalDynamicContext.js';
 
 const dynamicWaasKey = 'dynamicwaas';
-const configWaasWalletConnector = ({ walletConnector, environmentId, apiBaseUrl, authToken, }) => {
+const configWaasWalletConnector = ({ walletConnector, environmentId, apiBaseUrl, authToken, relayUrl, }) => {
     walletConnector.setEnvironmentId(environmentId);
     walletConnector.setBaseApiUrl(apiBaseUrl === null || apiBaseUrl === void 0 ? void 0 : apiBaseUrl.replace('/api/v0', ''));
     walletConnector.setGetAuthTokenFunction(() => authToken !== null && authToken !== void 0 ? authToken : '');
+    walletConnector.setRelayUrl(relayUrl);
     return walletConnector;
 };
 const useDynamicWaas = () => {
-    var _a;
+    var _a, _b, _c;
     const { setShowAuthFlow } = useInternalDynamicContext();
     const { user } = useUser();
     const apiBaseUrl = useApiBaseUrl();
@@ -112,8 +113,9 @@ const useDynamicWaas = () => {
     const environmentId = useEnvironmentId();
     const walletConnectorOptions = useWalletConnectorOptions();
     const refresh = useRefreshUser();
+    const relayUrl = (_b = (_a = projectSettings === null || projectSettings === void 0 ? void 0 : projectSettings.sdk) === null || _a === void 0 ? void 0 : _a.waas) === null || _b === void 0 ? void 0 : _b.relayUrl;
     const embeddedWalletSettings = projectSettings === null || projectSettings === void 0 ? void 0 : projectSettings.sdk.embeddedWallets;
-    const enabledChains = (_a = embeddedWalletSettings === null || embeddedWalletSettings === void 0 ? void 0 : embeddedWalletSettings.chainConfigurations) === null || _a === void 0 ? void 0 : _a.filter((c) => c.enabled);
+    const enabledChains = (_c = embeddedWalletSettings === null || embeddedWalletSettings === void 0 ? void 0 : embeddedWalletSettings.chainConfigurations) === null || _c === void 0 ? void 0 : _c.filter((c) => c.enabled);
     const primaryChain = enabledChains === null || enabledChains === void 0 ? void 0 : enabledChains.find((chain) => chain.primary);
     const enabledChainNames = enabledChains === null || enabledChains === void 0 ? void 0 : enabledChains.map((chain) => chain.name);
     const automaticEmbeddedWalletCreationEnabled = embeddedWalletSettings === null || embeddedWalletSettings === void 0 ? void 0 : embeddedWalletSettings.automaticEmbeddedWalletCreation;
@@ -138,6 +140,7 @@ const useDynamicWaas = () => {
             apiBaseUrl,
             authToken,
             environmentId,
+            relayUrl: relayUrl !== null && relayUrl !== void 0 ? relayUrl : '',
             walletConnector,
         });
         return configuredWalletConnector;
@@ -194,7 +197,7 @@ const useDynamicWaas = () => {
         automaticEmbeddedWalletCreationForExternalEnabled,
         walletConnectorOptions,
     ]);
-    const importPrivateKey = (_b) => __awaiter(void 0, [_b], void 0, function* ({ chainName, privateKey, }) {
+    const importPrivateKey = (_d) => __awaiter(void 0, [_d], void 0, function* ({ chainName, privateKey, }) {
         const walletConnector = getWalletConnector(chainName);
         if (!walletConnector)
             return;

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

@@ -105,7 +105,7 @@ const useSetWalletConnectorFetchers = (walletOptions, environmentId, projectSett
     if (!(walletOptions === null || walletOptions === void 0 ? void 0 : walletOptions.length))
         return;
     walletOptions.forEach((walletOption) => {
-        var _a, _b;
+        var _a, _b, _c, _d, _e;
         if (walletConnectorCore.isSessionKeyCompatibleWalletConnector(walletOption.walletConnector)) {
             (_a = walletOption.walletConnector) === null || _a === void 0 ? void 0 : _a.setSessionKeyFetcher(registerEmbeddedWalletSessionKey);
             (_b = walletOption.walletConnector) === null || _b === void 0 ? void 0 : _b.setSessionKeyRemoveFunction(() => removeSessionKey());
@@ -115,6 +115,7 @@ const useSetWalletConnectorFetchers = (walletOptions, environmentId, projectSett
                 apiBaseUrl: apiBaseUrl !== null && apiBaseUrl !== void 0 ? apiBaseUrl : DEFAULT_API_BASE_URL,
                 authToken,
                 environmentId,
+                relayUrl: (_e = (_d = (_c = projectSettings === null || projectSettings === void 0 ? void 0 : projectSettings.sdk) === null || _c === void 0 ? void 0 : _c.waas) === null || _d === void 0 ? void 0 : _d.relayUrl) !== null && _e !== void 0 ? _e : '',
                 walletConnector: walletOption.walletConnector,
             });
         }

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

@@ -101,7 +101,7 @@ const useSetWalletConnectorFetchers = (walletOptions, environmentId, projectSett
     if (!(walletOptions === null || walletOptions === void 0 ? void 0 : walletOptions.length))
         return;
     walletOptions.forEach((walletOption) => {
-        var _a, _b;
+        var _a, _b, _c, _d, _e;
         if (isSessionKeyCompatibleWalletConnector(walletOption.walletConnector)) {
             (_a = walletOption.walletConnector) === null || _a === void 0 ? void 0 : _a.setSessionKeyFetcher(registerEmbeddedWalletSessionKey);
             (_b = walletOption.walletConnector) === null || _b === void 0 ? void 0 : _b.setSessionKeyRemoveFunction(() => removeSessionKey());
@@ -111,6 +111,7 @@ const useSetWalletConnectorFetchers = (walletOptions, environmentId, projectSett
                 apiBaseUrl: apiBaseUrl !== null && apiBaseUrl !== void 0 ? apiBaseUrl : DEFAULT_API_BASE_URL,
                 authToken,
                 environmentId,
+                relayUrl: (_e = (_d = (_c = projectSettings === null || projectSettings === void 0 ? void 0 : projectSettings.sdk) === null || _c === void 0 ? void 0 : _c.waas) === null || _d === void 0 ? void 0 : _d.relayUrl) !== null && _e !== void 0 ? _e : '',
                 walletConnector: walletOption.walletConnector,
             });
         }

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

@@ -103,7 +103,7 @@ var useInternalDynamicContext = require('../../../context/DynamicContext/useDyna
  */
 const useSyncMfaFlow = ({ handler: headlessHandler, } = {}) => {
     const { setShowAuthFlow, userWithMissingInfo, sdkHasLoaded } = useInternalDynamicContext.useInternalDynamicContext();
-    const { pushView } = ViewContext.useViewContext();
+    const { pushView, clearStackAndPush } = ViewContext.useViewContext();
     const { getUserDevices } = useMfa.useMfa();
     // this is used to make sure we only trigger the effect once
     const triggered = React.useRef(false);
@@ -153,7 +153,7 @@ const useSyncMfaFlow = ({ handler: headlessHandler, } = {}) => {
             });
         }
         else {
-            pushView('mfa-display-backup-codes');
+            clearStackAndPush('mfa-display-backup-codes');
         }
     }, [
         getUserDevices,
@@ -162,6 +162,7 @@ const useSyncMfaFlow = ({ handler: headlessHandler, } = {}) => {
         pushView,
         userWithMissingInfo,
         headlessHandler,
+        clearStackAndPush,
     ]);
 };
 

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

@@ -99,7 +99,7 @@ import { useInternalDynamicContext } from '../../../context/DynamicContext/useDy
  */
 const useSyncMfaFlow = ({ handler: headlessHandler, } = {}) => {
     const { setShowAuthFlow, userWithMissingInfo, sdkHasLoaded } = useInternalDynamicContext();
-    const { pushView } = useViewContext();
+    const { pushView, clearStackAndPush } = useViewContext();
     const { getUserDevices } = useMfa();
     // this is used to make sure we only trigger the effect once
     const triggered = useRef(false);
@@ -149,7 +149,7 @@ const useSyncMfaFlow = ({ handler: headlessHandler, } = {}) => {
             });
         }
         else {
-            pushView('mfa-display-backup-codes');
+            clearStackAndPush('mfa-display-backup-codes');
         }
     }, [
         getUserDevices,
@@ -158,6 +158,7 @@ const useSyncMfaFlow = ({ handler: headlessHandler, } = {}) => {
         pushView,
         userWithMissingInfo,
         headlessHandler,
+        clearStackAndPush,
     ]);
 };
 

package/src/lib/utils/hooks/useWalletItemActions/useHandleWalletItem/useHandleWalletItem.cjs

@@ -210,7 +210,12 @@ const useHandleWalletItem = ({ allowAlreadyConnectedWallet, onQrCodeConnect, onC
     const handleWalletItemClick = (wallet) => _tslib.__awaiter(void 0, void 0, void 0, function* () {
         const { walletConnector, isInstalledOnBrowser } = wallet;
         const shouldEndWalletConnectorSession = walletConnector.connectedChain === 'FLOW' ||
-            walletConnectorCore.isPhantomRedirectConnector(walletConnector);
+            walletConnectorCore.isPhantomRedirectConnector(walletConnector) ||
+            // because WC only supports one connection at a time,
+            // we need to end the session (disconnect) when the user selects
+            // a different wallet to connect with
+            // a new connection is established a few steps further down
+            walletConnectorCore.isWalletConnectConnector(walletConnector);
         logger.logger.logVerboseTroubleshootingMessage('[handleWalletItemClick]', {
             mockedSDK,
             shouldEndWalletConnectorSession,
@@ -241,7 +246,8 @@ const useHandleWalletItem = ({ allowAlreadyConnectedWallet, onQrCodeConnect, onC
         }
         if (!allowAlreadyConnectedWallet &&
             isSelectedWalletAlreadyConnected.isSelectedWalletAlreadyConnected(linkedWallets, walletConnector, user) &&
-            walletConnector.connectedChain !== 'FLOW') {
+            walletConnector.connectedChain !== 'FLOW' &&
+            !walletConnector.isWalletConnect) {
             // wallet is already connected
             handleAlreadyConnectedWallet(walletConnector);
         }

package/src/lib/utils/hooks/useWalletItemActions/useHandleWalletItem/useHandleWalletItem.js

@@ -1,7 +1,7 @@
 'use client'
 import { __awaiter } from '../../../../../../_virtual/_tslib.js';
 import { StorageService, isMobile, UserRejectedRequestError } from '@dynamic-labs/utils';
-import { isPhantomRedirectConnector } from '@dynamic-labs/wallet-connector-core';
+import { isPhantomRedirectConnector, isWalletConnectConnector } from '@dynamic-labs/wallet-connector-core';
 import 'react';
 import '../../../../context/DynamicContext/DynamicContext.js';
 import '@dynamic-labs/sdk-api-core';
@@ -206,7 +206,12 @@ const useHandleWalletItem = ({ allowAlreadyConnectedWallet, onQrCodeConnect, onC
     const handleWalletItemClick = (wallet) => __awaiter(void 0, void 0, void 0, function* () {
         const { walletConnector, isInstalledOnBrowser } = wallet;
         const shouldEndWalletConnectorSession = walletConnector.connectedChain === 'FLOW' ||
-            isPhantomRedirectConnector(walletConnector);
+            isPhantomRedirectConnector(walletConnector) ||
+            // because WC only supports one connection at a time,
+            // we need to end the session (disconnect) when the user selects
+            // a different wallet to connect with
+            // a new connection is established a few steps further down
+            isWalletConnectConnector(walletConnector);
         logger.logVerboseTroubleshootingMessage('[handleWalletItemClick]', {
             mockedSDK,
             shouldEndWalletConnectorSession,
@@ -237,7 +242,8 @@ const useHandleWalletItem = ({ allowAlreadyConnectedWallet, onQrCodeConnect, onC
         }
         if (!allowAlreadyConnectedWallet &&
             isSelectedWalletAlreadyConnected(linkedWallets, walletConnector, user) &&
-            walletConnector.connectedChain !== 'FLOW') {
+            walletConnector.connectedChain !== 'FLOW' &&
+            !walletConnector.isWalletConnect) {
             // wallet is already connected
             handleAlreadyConnectedWallet(walletConnector);
         }

package/src/lib/views/EmailVerification/EmailVerification.cjs

@@ -71,8 +71,8 @@ require('../../store/state/loadingAndLifecycle.cjs');
 require('../../store/state/dynamicContextProps/dynamicContextProps.cjs');
 require('../../store/state/walletOptions/walletOptions.cjs');
 var Typography = require('../../components/Typography/Typography.cjs');
-var useIsTurnkeyWallet = require('../../utils/hooks/useIsTurnkeyWallet/useIsTurnkeyWallet.cjs');
 require('../../context/FooterAnimationContext/index.cjs');
+var useIsTurnkeyWallet = require('../../utils/hooks/useIsTurnkeyWallet/useIsTurnkeyWallet.cjs');
 require('../../components/ShadowDOM/ShadowDOM.cjs');
 require('../../components/Transition/ZoomTransition/ZoomTransition.cjs');
 require('../../components/Transition/SlideInUpTransition/SlideInUpTransition.cjs');

package/src/lib/views/EmailVerification/EmailVerification.js

@@ -67,8 +67,8 @@ import '../../store/state/loadingAndLifecycle.js';
 import '../../store/state/dynamicContextProps/dynamicContextProps.js';
 import '../../store/state/walletOptions/walletOptions.js';
 import { Typography } from '../../components/Typography/Typography.js';
-import { useIsTurnkeyWallet } from '../../utils/hooks/useIsTurnkeyWallet/useIsTurnkeyWallet.js';
 import '../../context/FooterAnimationContext/index.js';
+import { useIsTurnkeyWallet } from '../../utils/hooks/useIsTurnkeyWallet/useIsTurnkeyWallet.js';
 import '../../components/ShadowDOM/ShadowDOM.js';
 import '../../components/Transition/ZoomTransition/ZoomTransition.js';
 import '../../components/Transition/SlideInUpTransition/SlideInUpTransition.js';

package/src/lib/views/MfaChooseDeviceView/MfaChooseDeviceView.cjs

@@ -113,7 +113,10 @@ const MfaChooseDeviceView = ({ isInitialSetup = true, }) => {
             return;
         }
         if (isInitialSetup) {
-            pushView('mfa-secure-device', { isInitialSetup, type: option.type });
+            pushView('mfa-secure-device', {
+                isInitialSetup: true,
+                type: option.type,
+            });
             return;
         }
         pushView('mfa-verification', {

package/src/lib/views/MfaChooseDeviceView/MfaChooseDeviceView.js

@@ -109,7 +109,10 @@ const MfaChooseDeviceView = ({ isInitialSetup = true, }) => {
             return;
         }
         if (isInitialSetup) {
-            pushView('mfa-secure-device', { isInitialSetup, type: option.type });
+            pushView('mfa-secure-device', {
+                isInitialSetup: true,
+                type: option.type,
+            });
             return;
         }
         pushView('mfa-verification', {

package/src/lib/views/MfaSecureDeviceView/MfaSecureDeviceView.cjs

@@ -117,13 +117,10 @@ const MfaSecureDeviceView = ({ type, isInitialSetup = false, }) => {
         });
     };
     const onHelpClick = ({ secret, uri }) => {
-        const onMfaSecureDeviceHelpBackClick = () => {
-            pushView('mfa-secure-device', { isInitialSetup, type });
-        };
         pushView('mfa-secure-device-help', {
             secret,
             uri,
-        }, { onBackClick: onMfaSecureDeviceHelpBackClick });
+        });
     };
     return (jsxRuntime.jsxs("div", { className: 'mfa-secure-device-view__body', "data-testid": 'mfa-secure-device-view', children: [jsxRuntime.jsx(Typography.Typography, { className: 'mfa-secure-device-view__copy', variant: 'body_normal', weight: 'regular', color: 'secondary', children: t('dyn_mfa.secure_device_view.body') }), isLoading && (jsxRuntime.jsx(spinner.Spinner, { className: 'mfa-secure-device-view__loading-spinner' })), data && (jsxRuntime.jsxs("div", { className: 'mfa-secure-device-view__qrcode', children: [jsxRuntime.jsx(QRCode.QRCode, { Icon: jsxRuntime.jsx(passwordHero.ReactComponent, {}), value: data.uri, logoSize: 50 }), jsxRuntime.jsx("div", { className: 'button-container', children: jsxRuntime.jsx("button", { onClick: () => onHelpClick({ secret: data.secret, uri: data.uri }), children: jsxRuntime.jsx(Typography.Typography, { variant: 'body_small', weight: 'medium', color: 'secondary', children: t('dyn_mfa.secure_device_view.helper.button') }) }) })] })), jsxRuntime.jsx(TypographyButton.TypographyButton, { className: 'mfa-secure-device-view__button', expanded: true, onClick: onContinue, children: t('dyn_mfa.secure_device_view.continue') }), jsxRuntime.jsx(TextButton.TextButton, { className: 'mfa-secure-device-view__logout-button', onClick: handleLogOut, copykey: 'dyn_mfa.choose_device_view.logout', children: t('dyn_mfa.secure_device_view.logout') })] }));
 };

package/src/lib/views/MfaSecureDeviceView/MfaSecureDeviceView.js

@@ -113,13 +113,10 @@ const MfaSecureDeviceView = ({ type, isInitialSetup = false, }) => {
         });
     };
     const onHelpClick = ({ secret, uri }) => {
-        const onMfaSecureDeviceHelpBackClick = () => {
-            pushView('mfa-secure-device', { isInitialSetup, type });
-        };
         pushView('mfa-secure-device-help', {
             secret,
             uri,
-        }, { onBackClick: onMfaSecureDeviceHelpBackClick });
+        });
     };
     return (jsxs("div", { className: 'mfa-secure-device-view__body', "data-testid": 'mfa-secure-device-view', children: [jsx(Typography, { className: 'mfa-secure-device-view__copy', variant: 'body_normal', weight: 'regular', color: 'secondary', children: t('dyn_mfa.secure_device_view.body') }), isLoading && (jsx(Spinner, { className: 'mfa-secure-device-view__loading-spinner' })), data && (jsxs("div", { className: 'mfa-secure-device-view__qrcode', children: [jsx(QRCode, { Icon: jsx(SvgPasswordHero, {}), value: data.uri, logoSize: 50 }), jsx("div", { className: 'button-container', children: jsx("button", { onClick: () => onHelpClick({ secret: data.secret, uri: data.uri }), children: jsx(Typography, { variant: 'body_small', weight: 'medium', color: 'secondary', children: t('dyn_mfa.secure_device_view.helper.button') }) }) })] })), jsx(TypographyButton, { className: 'mfa-secure-device-view__button', expanded: true, onClick: onContinue, children: t('dyn_mfa.secure_device_view.continue') }), jsx(TextButton, { className: 'mfa-secure-device-view__logout-button', onClick: handleLogOut, copykey: 'dyn_mfa.choose_device_view.logout', children: t('dyn_mfa.secure_device_view.logout') })] }));
 };

package/src/lib/views/MfaVerificationView/MfaVerificationView.cjs

@@ -101,7 +101,7 @@ require('../../shared/utils/functions/getInitialUrl/getInitialUrl.cjs');
 
 const MfaVerificationView = ({ type, isInitialSetup = false, showBackButton = false, deviceId, }) => {
     const { t } = reactI18next.useTranslation();
-    const { pushView } = ViewContext.useViewContext();
+    const { clearStackAndPush, pushView, goBack, canGoBack } = ViewContext.useViewContext();
     const { authDevice } = useMfa.useMfa();
     const [code, setCode] = React.useState('');
     const [error, setError] = React.useState();
@@ -123,7 +123,7 @@ const MfaVerificationView = ({ type, isInitialSetup = false, showBackButton = fa
             const user$1 = user.getUser();
             if ((user$1 === null || user$1 === void 0 ? void 0 : user$1.mfaBackupCodeAcknowledgement) !==
                 sdkApiCore.MfaBackupCodeAcknowledgement.Complete) {
-                pushView('mfa-display-backup-codes');
+                clearStackAndPush('mfa-display-backup-codes');
             }
         }),
     });
@@ -134,14 +134,8 @@ const MfaVerificationView = ({ type, isInitialSetup = false, showBackButton = fa
     const onSubmit = (code) => {
         setCode(code);
     };
-    const onClickBack = () => {
-        if (!isInitialSetup) {
-            pushView('mfa-choose-device', { isInitialSetup });
-            return;
-        }
-        pushView('mfa-secure-device', { isInitialSetup, type });
-    };
-    return (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx(OTPVerificationView.OTPVerificationView, { MainIcon: passwordHero.ReactComponent, error: error, isLoading: isLoading, onPinComplete: onSubmit, isValid: Boolean(isValid), onPinChange: onCodeChange, description: t('dyn_mfa.otp_verification_view.body'), onClickBack: showBackButton ? onClickBack : undefined, disabled: isRateLimited }), !isInitialSetup && (jsxRuntime.jsx("div", { className: 'mfa-verification-view__choose-another-method', children: jsxRuntime.jsx(TextButton.TextButton, { className: 'mfa-verification-view__choose-another-method-button', onClick: () => pushView('mfa-choose-device', { isInitialSetup }), copykey: 'dyn_mfa.otp_verification_view.choose_another_method', children: t('dyn_mfa.otp_verification_view.choose_another_method') }) }))] }));
+    const onClickBack = canGoBack && showBackButton ? goBack : undefined;
+    return (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx(OTPVerificationView.OTPVerificationView, { MainIcon: passwordHero.ReactComponent, error: error, isLoading: isLoading, onPinComplete: onSubmit, isValid: Boolean(isValid), onPinChange: onCodeChange, description: t('dyn_mfa.otp_verification_view.body'), onClickBack: onClickBack, disabled: isRateLimited }), !isInitialSetup && (jsxRuntime.jsx("div", { className: 'mfa-verification-view__choose-another-method', children: jsxRuntime.jsx(TextButton.TextButton, { className: 'mfa-verification-view__choose-another-method-button', onClick: () => pushView('mfa-choose-device', { isInitialSetup }), copykey: 'dyn_mfa.otp_verification_view.choose_another_method', children: t('dyn_mfa.otp_verification_view.choose_another_method') }) }))] }));
 };
 
 exports.MfaVerificationView = MfaVerificationView;

package/src/lib/views/MfaVerificationView/MfaVerificationView.js

@@ -97,7 +97,7 @@ import '../../shared/utils/functions/getInitialUrl/getInitialUrl.js';
 
 const MfaVerificationView = ({ type, isInitialSetup = false, showBackButton = false, deviceId, }) => {
     const { t } = useTranslation();
-    const { pushView } = useViewContext();
+    const { clearStackAndPush, pushView, goBack, canGoBack } = useViewContext();
     const { authDevice } = useMfa();
     const [code, setCode] = useState('');
     const [error, setError] = useState();
@@ -119,7 +119,7 @@ const MfaVerificationView = ({ type, isInitialSetup = false, showBackButton = fa
             const user = getUser();
             if ((user === null || user === void 0 ? void 0 : user.mfaBackupCodeAcknowledgement) !==
                 MfaBackupCodeAcknowledgement.Complete) {
-                pushView('mfa-display-backup-codes');
+                clearStackAndPush('mfa-display-backup-codes');
             }
         }),
     });
@@ -130,14 +130,8 @@ const MfaVerificationView = ({ type, isInitialSetup = false, showBackButton = fa
     const onSubmit = (code) => {
         setCode(code);
     };
-    const onClickBack = () => {
-        if (!isInitialSetup) {
-            pushView('mfa-choose-device', { isInitialSetup });
-            return;
-        }
-        pushView('mfa-secure-device', { isInitialSetup, type });
-    };
-    return (jsxs(Fragment, { children: [jsx(OTPVerificationView, { MainIcon: SvgPasswordHero, error: error, isLoading: isLoading, onPinComplete: onSubmit, isValid: Boolean(isValid), onPinChange: onCodeChange, description: t('dyn_mfa.otp_verification_view.body'), onClickBack: showBackButton ? onClickBack : undefined, disabled: isRateLimited }), !isInitialSetup && (jsx("div", { className: 'mfa-verification-view__choose-another-method', children: jsx(TextButton, { className: 'mfa-verification-view__choose-another-method-button', onClick: () => pushView('mfa-choose-device', { isInitialSetup }), copykey: 'dyn_mfa.otp_verification_view.choose_another_method', children: t('dyn_mfa.otp_verification_view.choose_another_method') }) }))] }));
+    const onClickBack = canGoBack && showBackButton ? goBack : undefined;
+    return (jsxs(Fragment, { children: [jsx(OTPVerificationView, { MainIcon: SvgPasswordHero, error: error, isLoading: isLoading, onPinComplete: onSubmit, isValid: Boolean(isValid), onPinChange: onCodeChange, description: t('dyn_mfa.otp_verification_view.body'), onClickBack: onClickBack, disabled: isRateLimited }), !isInitialSetup && (jsx("div", { className: 'mfa-verification-view__choose-another-method', children: jsx(TextButton, { className: 'mfa-verification-view__choose-another-method-button', onClick: () => pushView('mfa-choose-device', { isInitialSetup }), copykey: 'dyn_mfa.otp_verification_view.choose_another_method', children: t('dyn_mfa.otp_verification_view.choose_another_method') }) }))] }));
 };
 
 export { MfaVerificationView };

package/src/lib/widgets/DynamicEmbeddedWidget/DynamicEmbeddedAuthFlow/DynamicEmbeddedAuthFlow.cjs

@@ -102,12 +102,14 @@ var SandboxIndicatorWrapper = require('../../../components/SandboxIndicatorWrapp
 
 const DynamicEmbeddedAuthFlow = ({ background = 'none', className, style, }) => {
     const hide = useIsLoggedIn.useIsLoggedIn();
-    const { projectSettings, isRenderingEmbeddedAuthFlow } = useInternalDynamicContext.useInternalDynamicContext();
-    isRenderingEmbeddedAuthFlow.current = !hide;
+    const { projectSettings, setIsRenderingEmbeddedAuthFlow } = useInternalDynamicContext.useInternalDynamicContext();
     // Keep isRenderingEmbeddedAuthFlow up to date
-    React.useEffect(() => () => {
-        isRenderingEmbeddedAuthFlow.current = false;
-    }, [isRenderingEmbeddedAuthFlow]);
+    React.useEffect(() => {
+        setIsRenderingEmbeddedAuthFlow(!hide);
+        return () => {
+            setIsRenderingEmbeddedAuthFlow(false);
+        };
+    }, [setIsRenderingEmbeddedAuthFlow, hide]);
     if (hide)
         return null;
     const content = (jsxRuntime.jsx(DynamicAuthLayout.DynamicAuthLayout, { className: className, style: style, projectSettings: projectSettings, children: jsxRuntime.jsx(RenderView.RenderView, {}) }));

package/src/lib/widgets/DynamicEmbeddedWidget/DynamicEmbeddedAuthFlow/DynamicEmbeddedAuthFlow.js

@@ -98,12 +98,14 @@ import { SandboxIndicatorWrapper } from '../../../components/SandboxIndicatorWra
 
 const DynamicEmbeddedAuthFlow = ({ background = 'none', className, style, }) => {
     const hide = useIsLoggedIn();
-    const { projectSettings, isRenderingEmbeddedAuthFlow } = useInternalDynamicContext();
-    isRenderingEmbeddedAuthFlow.current = !hide;
+    const { projectSettings, setIsRenderingEmbeddedAuthFlow } = useInternalDynamicContext();
     // Keep isRenderingEmbeddedAuthFlow up to date
-    useEffect(() => () => {
-        isRenderingEmbeddedAuthFlow.current = false;
-    }, [isRenderingEmbeddedAuthFlow]);
+    useEffect(() => {
+        setIsRenderingEmbeddedAuthFlow(!hide);
+        return () => {
+            setIsRenderingEmbeddedAuthFlow(false);
+        };
+    }, [setIsRenderingEmbeddedAuthFlow, hide]);
     if (hide)
         return null;
     const content = (jsx(DynamicAuthLayout, { className: className, style: style, projectSettings: projectSettings, children: jsx(RenderView, {}) }));