@dynamic-labs/sdk-react-core 0.18.0-RC.2 → 0.18.0-RC.20

package/src/lib/utils/hooks/authenticationHooks/useConnectAndSignSplitSteps/useConnectAndSignSplitSteps.cjs

@@ -10,7 +10,7 @@ var useVerifyWallet = require('../../useVerifyWallet/useVerifyWallet.cjs');
 var showPendingConnectView = require('../helpers/showPendingConnectView.cjs');
 var isConnectOnly = require('../helpers/isConnectOnly.cjs');
 require('@dynamic-labs/sdk-api');
-require('../../../../shared/logger.cjs');
+var logger = require('../../../../shared/logger.cjs');
 require('@dynamic-labs/iconic');
 require('@dynamic-labs/wallet-connector-core');
 require('react/jsx-runtime');
@@ -29,7 +29,7 @@ const useConnectAndSignSplitSteps = () => {
     const { setView, goToInitialView } = ViewContext.useViewContext();
     const { setErrorMessage } = ErrorContext.useErrorContext();
     const { captchaToken } = CaptchaContext.useCaptchaContext();
-    const { connectWallet, consumeNonce, displayTermsOfService, projectSettings, environmentId, setIsSingleWalletAccount, setShowAuthFlow, user, authMode, setCallback, } = useInternalDynamicContext.useInternalDynamicContext();
+    const { connectWallet, consumeNonce, displayTermsOfService, projectSettings, environmentId, setIsSingleWalletAccount, setShowAuthFlow, user, authMode, setCallback, ongoingVerifications, } = useInternalDynamicContext.useInternalDynamicContext();
     const { handleWalletsToConnect } = useHandleWalletsToConnect.useHandleWalletsToConnect();
     const verifyWallet = useVerifyWallet.useVerifyWallet({
         consumeNonce,
@@ -44,6 +44,8 @@ const useConnectAndSignSplitSteps = () => {
     // or in Dapper
     const onlyConnectUser = ({ walletConnector, fetchPublicAddressOpts = undefined, }) => _tslib.__awaiter(void 0, void 0, void 0, function* () {
         var _a;
+        // Raise verification ongoing flag
+        ongoingVerifications.setAuthVerification(true);
         yield showPendingConnectView.showPendingConnectView(walletConnector, setView);
         try {
             yield connectWallet(walletConnector, fetchPublicAddressOpts);
@@ -61,16 +63,23 @@ const useConnectAndSignSplitSteps = () => {
             setView('pending-signature');
         }
         catch (err) {
+            logger.logger.debug(err);
             setErrorMessage(err.toString());
             goToInitialView();
+            ongoingVerifications.setAuthVerification(false);
             return;
         }
     });
     // This method is similar to useConnectAndSign, but it does not call showPendingConnectView
     // This is because we already called it in onlyConnectUser and now we just want to sign
     const signAlreadyConnectedUser = ({ walletConnector, fetchPublicAddressOpts = undefined, }) => _tslib.__awaiter(void 0, void 0, void 0, function* () {
+        // Raise verification ongoing flag
+        ongoingVerifications.setAuthVerification(true);
         try {
             const publicWalletAddress = yield connectWallet(walletConnector, fetchPublicAddressOpts);
+            if (!publicWalletAddress) {
+                return;
+            }
             yield verifyWallet({
                 captchaToken,
                 publicWalletAddress,
@@ -78,8 +87,10 @@ const useConnectAndSignSplitSteps = () => {
             });
         }
         catch (err) {
+            logger.logger.debug(err);
             setErrorMessage(err.toString());
             goToInitialView();
+            ongoingVerifications.setAuthVerification(false);
             return;
         }
     });

package/src/lib/utils/hooks/authenticationHooks/useConnectAndSignSplitSteps/useConnectAndSignSplitSteps.js

@@ -6,7 +6,7 @@ import { useVerifyWallet } from '../../useVerifyWallet/useVerifyWallet.js';
 import { showPendingConnectView } from '../helpers/showPendingConnectView.js';
 import { isConnectOnly } from '../helpers/isConnectOnly.js';
 import '@dynamic-labs/sdk-api';
-import '../../../../shared/logger.js';
+import { logger } from '../../../../shared/logger.js';
 import '@dynamic-labs/iconic';
 import '@dynamic-labs/wallet-connector-core';
 import 'react/jsx-runtime';
@@ -25,7 +25,7 @@ const useConnectAndSignSplitSteps = () => {
     const { setView, goToInitialView } = useViewContext();
     const { setErrorMessage } = useErrorContext();
     const { captchaToken } = useCaptchaContext();
-    const { connectWallet, consumeNonce, displayTermsOfService, projectSettings, environmentId, setIsSingleWalletAccount, setShowAuthFlow, user, authMode, setCallback, } = useInternalDynamicContext();
+    const { connectWallet, consumeNonce, displayTermsOfService, projectSettings, environmentId, setIsSingleWalletAccount, setShowAuthFlow, user, authMode, setCallback, ongoingVerifications, } = useInternalDynamicContext();
     const { handleWalletsToConnect } = useHandleWalletsToConnect();
     const verifyWallet = useVerifyWallet({
         consumeNonce,
@@ -40,6 +40,8 @@ const useConnectAndSignSplitSteps = () => {
     // or in Dapper
     const onlyConnectUser = ({ walletConnector, fetchPublicAddressOpts = undefined, }) => __awaiter(void 0, void 0, void 0, function* () {
         var _a;
+        // Raise verification ongoing flag
+        ongoingVerifications.setAuthVerification(true);
         yield showPendingConnectView(walletConnector, setView);
         try {
             yield connectWallet(walletConnector, fetchPublicAddressOpts);
@@ -57,16 +59,23 @@ const useConnectAndSignSplitSteps = () => {
             setView('pending-signature');
         }
         catch (err) {
+            logger.debug(err);
             setErrorMessage(err.toString());
             goToInitialView();
+            ongoingVerifications.setAuthVerification(false);
             return;
         }
     });
     // This method is similar to useConnectAndSign, but it does not call showPendingConnectView
     // This is because we already called it in onlyConnectUser and now we just want to sign
     const signAlreadyConnectedUser = ({ walletConnector, fetchPublicAddressOpts = undefined, }) => __awaiter(void 0, void 0, void 0, function* () {
+        // Raise verification ongoing flag
+        ongoingVerifications.setAuthVerification(true);
         try {
             const publicWalletAddress = yield connectWallet(walletConnector, fetchPublicAddressOpts);
+            if (!publicWalletAddress) {
+                return;
+            }
             yield verifyWallet({
                 captchaToken,
                 publicWalletAddress,
@@ -74,8 +83,10 @@ const useConnectAndSignSplitSteps = () => {
             });
         }
         catch (err) {
+            logger.debug(err);
             setErrorMessage(err.toString());
             goToInitialView();
+            ongoingVerifications.setAuthVerification(false);
             return;
         }
     });

package/src/lib/utils/hooks/authenticationHooks/useEmailVerificationRequest/useEmailVerificationRequest.cjs

@@ -6,20 +6,6 @@ var _tslib = require('../../../../../../_virtual/_tslib.cjs');
 var React = require('react');
 var useInternalDynamicContext = require('../../../../context/DynamicContext/useInternalDynamicContext.cjs');
 var api = require('../../../../data/api.cjs');
-var index = require('../../../functions/storeAuthToken/index.cjs');
-require('@dynamic-labs/multi-wallet');
-require('@dynamic-labs/utils');
-require('../../../constants/colors.cjs');
-require('@dynamic-labs/sdk-api');
-require('../../../../shared/logger.cjs');
-require('@dynamic-labs/iconic');
-require('@dynamic-labs/wallet-connector-core');
-require('react/jsx-runtime');
-require('../../../../context/ViewContext/ViewContext.cjs');
-require('@dynamic-labs/wallet-book');
-require('../../../../shared/utils/classes/storage/localStorage.cjs');
-require('ethers');
-require('../../../../shared/consts/index.cjs');
 var useUpdateUserProfileByJWTCallback = require('../../useUpdateUserProfileByJWTCallback/useUpdateUserProfileByJWTCallback.cjs');
 var EmailVerificationContext = require('../../../../context/EmailVerificationContext/EmailVerificationContext.cjs');
 
@@ -41,8 +27,7 @@ const useEmailVerificationRequest = () => {
             verificationToken,
             verificationUUID: String(verificationUUID || emailVerificationContextVerificationUUID),
         }, jwtToken);
-        updateUserProfileByJWT(verifyEmailResponse.jwt);
-        index.storeAuthToken(verifyEmailResponse.jwt);
+        yield updateUserProfileByJWT(verifyEmailResponse.jwt);
         return verifyEmailResponse;
     }), [
         emailVerificationContextVerificationUUID,

package/src/lib/utils/hooks/authenticationHooks/useEmailVerificationRequest/useEmailVerificationRequest.js

@@ -2,20 +2,6 @@ import { __awaiter } from '../../../../../../_virtual/_tslib.js';
 import { useCallback } from 'react';
 import { useInternalDynamicContext } from '../../../../context/DynamicContext/useInternalDynamicContext.js';
 import { verifyEmail } from '../../../../data/api.js';
-import { storeAuthToken } from '../../../functions/storeAuthToken/index.js';
-import '@dynamic-labs/multi-wallet';
-import '@dynamic-labs/utils';
-import '../../../constants/colors.js';
-import '@dynamic-labs/sdk-api';
-import '../../../../shared/logger.js';
-import '@dynamic-labs/iconic';
-import '@dynamic-labs/wallet-connector-core';
-import 'react/jsx-runtime';
-import '../../../../context/ViewContext/ViewContext.js';
-import '@dynamic-labs/wallet-book';
-import '../../../../shared/utils/classes/storage/localStorage.js';
-import 'ethers';
-import '../../../../shared/consts/index.js';
 import { useUpdateUserProfileByJWTCallback } from '../../useUpdateUserProfileByJWTCallback/useUpdateUserProfileByJWTCallback.js';
 import { useEmailVerificationContext } from '../../../../context/EmailVerificationContext/EmailVerificationContext.js';
 
@@ -37,8 +23,7 @@ const useEmailVerificationRequest = () => {
             verificationToken,
             verificationUUID: String(verificationUUID || emailVerificationContextVerificationUUID),
         }, jwtToken);
-        updateUserProfileByJWT(verifyEmailResponse.jwt);
-        storeAuthToken(verifyEmailResponse.jwt);
+        yield updateUserProfileByJWT(verifyEmailResponse.jwt);
         return verifyEmailResponse;
     }), [
         emailVerificationContextVerificationUUID,

package/src/lib/utils/hooks/authenticationHooks/useSignConnectOnlyUser/useSignConnectOnlyUser.cjs

@@ -7,6 +7,18 @@ var useInternalDynamicContext = require('../../../../context/DynamicContext/useI
 var ViewContext = require('../../../../context/ViewContext/ViewContext.cjs');
 var ErrorContext = require('../../../../context/ErrorContext/ErrorContext.cjs');
 var useVerifyWallet = require('../../useVerifyWallet/useVerifyWallet.cjs');
+require('@dynamic-labs/sdk-api');
+var logger = require('../../../../shared/logger.cjs');
+require('@dynamic-labs/iconic');
+require('@dynamic-labs/wallet-connector-core');
+require('react/jsx-runtime');
+require('react');
+require('@dynamic-labs/wallet-book');
+require('@dynamic-labs/utils');
+require('../../../constants/colors.cjs');
+require('../../../../shared/utils/classes/storage/localStorage.cjs');
+require('ethers');
+require('../../../../shared/consts/index.cjs');
 
 const useSignConnectOnlyUser = () => {
     const { setView } = ViewContext.useViewContext();
@@ -31,12 +43,16 @@ const useSignConnectOnlyUser = () => {
             // Wallet should be already connected at this point
             // We just need to verify it
             const publicWalletAddress = yield connectWallet(walletConnector, fetchPublicAddressOpts);
+            if (!publicWalletAddress) {
+                return;
+            }
             yield verifyWallet({
                 publicWalletAddress,
                 walletConnector,
             });
         }
         catch (err) {
+            logger.logger.debug(err);
             setErrorMessage(err.toString());
             setShowAuthFlow(false);
             return;

package/src/lib/utils/hooks/authenticationHooks/useSignConnectOnlyUser/useSignConnectOnlyUser.js

@@ -3,6 +3,18 @@ import { useInternalDynamicContext } from '../../../../context/DynamicContext/us
 import { useViewContext } from '../../../../context/ViewContext/ViewContext.js';
 import { useErrorContext } from '../../../../context/ErrorContext/ErrorContext.js';
 import { useVerifyWallet } from '../../useVerifyWallet/useVerifyWallet.js';
+import '@dynamic-labs/sdk-api';
+import { logger } from '../../../../shared/logger.js';
+import '@dynamic-labs/iconic';
+import '@dynamic-labs/wallet-connector-core';
+import 'react/jsx-runtime';
+import 'react';
+import '@dynamic-labs/wallet-book';
+import '@dynamic-labs/utils';
+import '../../../constants/colors.js';
+import '../../../../shared/utils/classes/storage/localStorage.js';
+import 'ethers';
+import '../../../../shared/consts/index.js';
 
 const useSignConnectOnlyUser = () => {
     const { setView } = useViewContext();
@@ -27,12 +39,16 @@ const useSignConnectOnlyUser = () => {
             // Wallet should be already connected at this point
             // We just need to verify it
             const publicWalletAddress = yield connectWallet(walletConnector, fetchPublicAddressOpts);
+            if (!publicWalletAddress) {
+                return;
+            }
             yield verifyWallet({
                 publicWalletAddress,
                 walletConnector,
             });
         }
         catch (err) {
+            logger.debug(err);
             setErrorMessage(err.toString());
             setShowAuthFlow(false);
             return;

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

@@ -24,3 +24,9 @@ export { useColorSchemePreference } from './useColorSchemePreference';
 export { useGetSocialIcon } from './useGetSocialIcon';
 export { useIconThemeVariant } from './useIconThemeVariant';
 export type { IconThemeVariant } from './useIconThemeVariant';
+export { useIsomorphicLayoutEffect } from './useIsomorphicLayoutEffect/useIsomorphicLayoutEffect';
+export { useTimeout } from './useTimeout/useTimeout';
+export { useInterval } from './useInterval/useInterval';
+export { useCountdown } from './useCountdown/useCountdown';
+export { useValidateSession } from './useValidateSession';
+export { useEventListener } from './useEventListener';

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

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

package/src/lib/utils/hooks/multiWallet/useMultiWallet/useMultiWallet.cjs

@@ -0,0 +1,17 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var React = require('react');
+
+const useMultiWallet = ({ deprecatedMultiWallet, multiWalletSettings, }) => {
+    var _a;
+    const isMultiWalletEnabled = (_a = deprecatedMultiWallet !== null && deprecatedMultiWallet !== void 0 ? deprecatedMultiWallet : multiWalletSettings) !== null && _a !== void 0 ? _a : false;
+    const [multiWallet, setMultiWallet] = React.useState(isMultiWalletEnabled);
+    React.useEffect(() => {
+        setMultiWallet(isMultiWalletEnabled);
+    }, [isMultiWalletEnabled]);
+    return { multiWallet, setMultiWallet };
+};
+
+exports.useMultiWallet = useMultiWallet;

package/src/lib/utils/hooks/multiWallet/useMultiWallet/useMultiWallet.d.ts

@@ -0,0 +1,8 @@
+/// <reference types="react" />
+export declare const useMultiWallet: ({ deprecatedMultiWallet, multiWalletSettings, }: {
+    deprecatedMultiWallet?: boolean | undefined;
+    multiWalletSettings?: boolean | undefined;
+}) => {
+    multiWallet: boolean;
+    setMultiWallet: import("react").Dispatch<import("react").SetStateAction<boolean>>;
+};

package/src/lib/utils/hooks/multiWallet/useMultiWallet/useMultiWallet.js

@@ -0,0 +1,13 @@
+import { useState, useEffect } from 'react';
+
+const useMultiWallet = ({ deprecatedMultiWallet, multiWalletSettings, }) => {
+    var _a;
+    const isMultiWalletEnabled = (_a = deprecatedMultiWallet !== null && deprecatedMultiWallet !== void 0 ? deprecatedMultiWallet : multiWalletSettings) !== null && _a !== void 0 ? _a : false;
+    const [multiWallet, setMultiWallet] = useState(isMultiWalletEnabled);
+    useEffect(() => {
+        setMultiWallet(isMultiWalletEnabled);
+    }, [isMultiWalletEnabled]);
+    return { multiWallet, setMultiWallet };
+};
+
+export { useMultiWallet };

package/src/lib/utils/hooks/multiWallet/useSyncPrimaryWallet/useSyncPrimaryWallet.cjs

@@ -5,17 +5,28 @@ Object.defineProperty(exports, '__esModule', { value: true });
 var React = require('react');
 var walletConnectorCore = require('@dynamic-labs/wallet-connector-core');
 var isWalletLinked = require('../../../functions/isWalletLinked/isWalletLinked.cjs');
+var ViewContext = require('../../../../context/ViewContext/ViewContext.cjs');
+var useInternalDynamicContext = require('../../../../context/DynamicContext/useInternalDynamicContext.cjs');
 
-const useSyncPrimaryWallet = ({ computeConnectedStateForWallets, handleLogOut, multiWalletWidgetState, primaryWallet, secondaryWallets, setMultiWalletWidgetState, setPrimaryWallet, setShowWidgetStatePopup, showWidgetStatePopup, canSync = true, }) => {
+const useSyncPrimaryWallet = ({ connectWallet, computeConnectedStateForWallets, handleLogOut, multiWalletWidgetState, primaryWallet, secondaryWallets, setMultiWalletWidgetState, setPrimaryWallet, setShowWidgetStatePopup, showWidgetStatePopup, canSync = true, authMode, }) => {
+    const { setShowAuthFlow } = useInternalDynamicContext.useInternalDynamicContext();
+    const { setView } = ViewContext.useViewContext();
     const handlePrimaryWalletNotActive = React.useCallback((connectedAddress) => {
         if (!primaryWallet)
             return;
+        if (authMode === 'connect-only') {
+            connectWallet(primaryWallet.connector);
+            return;
+        }
         const connectedWalletIsLinked = isWalletLinked.isWalletLinked(connectedAddress, [
             primaryWallet,
             ...secondaryWallets,
         ]);
         if (!connectedWalletIsLinked) {
-            const connectedSecondaryWallet = secondaryWallets.find((wallet) => wallet.connected);
+            // MM returns all connected wallets now, so we need to check if the active account
+            // is not in the same wallet as the primary wallet before automatically switching
+            // to a connected secondary wallet as it was causing an infinite loop
+            const connectedSecondaryWallet = secondaryWallets.find((wallet) => wallet.connected && primaryWallet.connector !== wallet.connector);
             if (!connectedSecondaryWallet) {
                 setMultiWalletWidgetState('awaiting_account_switch', 'primary_not_connected');
                 return;
@@ -41,12 +52,14 @@ const useSyncPrimaryWallet = ({ computeConnectedStateForWallets, handleLogOut, m
         setMultiWalletWidgetState('awaiting_account_switch', 'primary_not_connected');
     }, [
         primaryWallet,
+        authMode,
         secondaryWallets,
         showWidgetStatePopup,
-        setShowWidgetStatePopup,
         setMultiWalletWidgetState,
         setPrimaryWallet,
         computeConnectedStateForWallets,
+        setShowWidgetStatePopup,
+        connectWallet,
     ]);
     React.useEffect(() => {
         if (!canSync)
@@ -59,7 +72,8 @@ const useSyncPrimaryWallet = ({ computeConnectedStateForWallets, handleLogOut, m
             return;
         primaryWallet.connector
             .getConnectedAccounts()
-            .then(([connectedAddress]) => {
+            .then((accounts) => {
+            const [connectedAddress] = accounts;
             if (walletConnectorCore.isSameAddress(connectedAddress, primaryWallet.address, primaryWallet.chain)) {
                 return;
             }
@@ -72,7 +86,9 @@ const useSyncPrimaryWallet = ({ computeConnectedStateForWallets, handleLogOut, m
                 computeConnectedStateForWallets();
                 return;
             }
-            handleLogOut();
+            // no wallet is connected
+            setShowAuthFlow(true);
+            setView('wallet-locked-view');
         });
     }, [
         primaryWallet,
@@ -84,6 +100,9 @@ const useSyncPrimaryWallet = ({ computeConnectedStateForWallets, handleLogOut, m
         handleLogOut,
         setPrimaryWallet,
         canSync,
+        setView,
+        setShowAuthFlow,
+        authMode,
     ]);
 };
 

package/src/lib/utils/hooks/multiWallet/useSyncPrimaryWallet/useSyncPrimaryWallet.d.ts

@@ -1,8 +1,10 @@
 import { Dispatch, SetStateAction } from 'react';
-import { MultiWalletWidgetState, Wallet } from '../../../../shared/types';
+import { FetchPublicAddressOpts, WalletConnector } from '@dynamic-labs/wallet-connector-core';
+import { AuthModeType, MultiWalletWidgetState, Wallet } from '../../../../shared/types';
 import { MultiWalletWidgetStateSetter } from '../useMultiWalletWidgetState';
 export type UseSyncPrimaryWalletArgs = {
     canSync?: boolean;
+    connectWallet: (walletConnector: WalletConnector, fetchPublicAddressOpts?: FetchPublicAddressOpts) => Promise<string | undefined>;
     computeConnectedStateForWallets: () => Promise<void>;
     handleLogOut: () => Promise<void>;
     multiWalletWidgetState: MultiWalletWidgetState;
@@ -12,5 +14,6 @@ export type UseSyncPrimaryWalletArgs = {
     setPrimaryWallet: (walletId: string) => Promise<void>;
     setShowWidgetStatePopup: Dispatch<SetStateAction<boolean>>;
     showWidgetStatePopup: boolean;
+    authMode: AuthModeType;
 };
-export declare const useSyncPrimaryWallet: ({ computeConnectedStateForWallets, handleLogOut, multiWalletWidgetState, primaryWallet, secondaryWallets, setMultiWalletWidgetState, setPrimaryWallet, setShowWidgetStatePopup, showWidgetStatePopup, canSync, }: UseSyncPrimaryWalletArgs) => void;
+export declare const useSyncPrimaryWallet: ({ connectWallet, computeConnectedStateForWallets, handleLogOut, multiWalletWidgetState, primaryWallet, secondaryWallets, setMultiWalletWidgetState, setPrimaryWallet, setShowWidgetStatePopup, showWidgetStatePopup, canSync, authMode, }: UseSyncPrimaryWalletArgs) => void;

package/src/lib/utils/hooks/multiWallet/useSyncPrimaryWallet/useSyncPrimaryWallet.js

@@ -1,17 +1,28 @@
 import { useCallback, useEffect } from 'react';
 import { isSameAddress } from '@dynamic-labs/wallet-connector-core';
 import { isWalletLinked } from '../../../functions/isWalletLinked/isWalletLinked.js';
+import { useViewContext } from '../../../../context/ViewContext/ViewContext.js';
+import { useInternalDynamicContext } from '../../../../context/DynamicContext/useInternalDynamicContext.js';
 
-const useSyncPrimaryWallet = ({ computeConnectedStateForWallets, handleLogOut, multiWalletWidgetState, primaryWallet, secondaryWallets, setMultiWalletWidgetState, setPrimaryWallet, setShowWidgetStatePopup, showWidgetStatePopup, canSync = true, }) => {
+const useSyncPrimaryWallet = ({ connectWallet, computeConnectedStateForWallets, handleLogOut, multiWalletWidgetState, primaryWallet, secondaryWallets, setMultiWalletWidgetState, setPrimaryWallet, setShowWidgetStatePopup, showWidgetStatePopup, canSync = true, authMode, }) => {
+    const { setShowAuthFlow } = useInternalDynamicContext();
+    const { setView } = useViewContext();
     const handlePrimaryWalletNotActive = useCallback((connectedAddress) => {
         if (!primaryWallet)
             return;
+        if (authMode === 'connect-only') {
+            connectWallet(primaryWallet.connector);
+            return;
+        }
         const connectedWalletIsLinked = isWalletLinked(connectedAddress, [
             primaryWallet,
             ...secondaryWallets,
         ]);
         if (!connectedWalletIsLinked) {
-            const connectedSecondaryWallet = secondaryWallets.find((wallet) => wallet.connected);
+            // MM returns all connected wallets now, so we need to check if the active account
+            // is not in the same wallet as the primary wallet before automatically switching
+            // to a connected secondary wallet as it was causing an infinite loop
+            const connectedSecondaryWallet = secondaryWallets.find((wallet) => wallet.connected && primaryWallet.connector !== wallet.connector);
             if (!connectedSecondaryWallet) {
                 setMultiWalletWidgetState('awaiting_account_switch', 'primary_not_connected');
                 return;
@@ -37,12 +48,14 @@ const useSyncPrimaryWallet = ({ computeConnectedStateForWallets, handleLogOut, m
         setMultiWalletWidgetState('awaiting_account_switch', 'primary_not_connected');
     }, [
         primaryWallet,
+        authMode,
         secondaryWallets,
         showWidgetStatePopup,
-        setShowWidgetStatePopup,
         setMultiWalletWidgetState,
         setPrimaryWallet,
         computeConnectedStateForWallets,
+        setShowWidgetStatePopup,
+        connectWallet,
     ]);
     useEffect(() => {
         if (!canSync)
@@ -55,7 +68,8 @@ const useSyncPrimaryWallet = ({ computeConnectedStateForWallets, handleLogOut, m
             return;
         primaryWallet.connector
             .getConnectedAccounts()
-            .then(([connectedAddress]) => {
+            .then((accounts) => {
+            const [connectedAddress] = accounts;
             if (isSameAddress(connectedAddress, primaryWallet.address, primaryWallet.chain)) {
                 return;
             }
@@ -68,7 +82,9 @@ const useSyncPrimaryWallet = ({ computeConnectedStateForWallets, handleLogOut, m
                 computeConnectedStateForWallets();
                 return;
             }
-            handleLogOut();
+            // no wallet is connected
+            setShowAuthFlow(true);
+            setView('wallet-locked-view');
         });
     }, [
         primaryWallet,
@@ -80,6 +96,9 @@ const useSyncPrimaryWallet = ({ computeConnectedStateForWallets, handleLogOut, m
         handleLogOut,
         setPrimaryWallet,
         canSync,
+        setView,
+        setShowAuthFlow,
+        authMode,
     ]);
 };
 

package/src/lib/utils/hooks/multiWallet/useVerifyOnAwaitingSignature/useVerifyOnAwaitingSignature.cjs

@@ -25,24 +25,22 @@ require('../../../../context/AccessDeniedContext/AccessDeniedContext.cjs');
 require('../../../../context/CaptchaContext/CaptchaContext.cjs');
 
 const useVerifyOnAwaitingSignature = () => {
-    const { awaitingSignatureState, multiWalletWidgetState, setMultiWalletWidgetState, isVerifying, setIsVerifying, selectedWalletConnector, } = useInternalDynamicContext.useInternalDynamicContext();
+    const { awaitingSignatureState, multiWalletWidgetState, setMultiWalletWidgetState, ongoingVerifications, selectedWalletConnector, } = useInternalDynamicContext.useInternalDynamicContext();
     const triggerConnectAndSign = useConnectAndSign.useConnectAndSign();
     React.useEffect(() => {
-        if (!isVerifying &&
+        if (!ongoingVerifications.connectAndSignVerification &&
             multiWalletWidgetState === 'awaiting_signature' &&
             selectedWalletConnector &&
             awaitingSignatureState === 'linking_new_wallet' &&
             !requiresTwoStepAuthentication.requiresTwoStepAuthentication(selectedWalletConnector)) {
-            setIsVerifying(true);
+            ongoingVerifications.setConnectAndSignVerification(true);
             triggerConnectAndSign({ walletConnector: selectedWalletConnector })
-                .then(() => {
-                setMultiWalletWidgetState('idle');
-                setIsVerifying(false);
-            })
                 .catch((e) => {
-                setMultiWalletWidgetState('idle');
-                setIsVerifying(false);
                 logger.logger.error(e);
+            })
+                .finally(() => {
+                setMultiWalletWidgetState('idle');
+                ongoingVerifications.setConnectAndSignVerification(false);
             });
         }
     }, [
@@ -50,8 +48,7 @@ const useVerifyOnAwaitingSignature = () => {
         selectedWalletConnector === null || selectedWalletConnector === void 0 ? void 0 : selectedWalletConnector.name,
         multiWalletWidgetState,
         setMultiWalletWidgetState,
-        isVerifying,
-        setIsVerifying,
+        ongoingVerifications,
     ]);
 };
 

package/src/lib/utils/hooks/multiWallet/useVerifyOnAwaitingSignature/useVerifyOnAwaitingSignature.js

@@ -21,24 +21,22 @@ import '../../../../context/AccessDeniedContext/AccessDeniedContext.js';
 import '../../../../context/CaptchaContext/CaptchaContext.js';
 
 const useVerifyOnAwaitingSignature = () => {
-    const { awaitingSignatureState, multiWalletWidgetState, setMultiWalletWidgetState, isVerifying, setIsVerifying, selectedWalletConnector, } = useInternalDynamicContext();
+    const { awaitingSignatureState, multiWalletWidgetState, setMultiWalletWidgetState, ongoingVerifications, selectedWalletConnector, } = useInternalDynamicContext();
     const triggerConnectAndSign = useConnectAndSign();
     useEffect(() => {
-        if (!isVerifying &&
+        if (!ongoingVerifications.connectAndSignVerification &&
             multiWalletWidgetState === 'awaiting_signature' &&
             selectedWalletConnector &&
             awaitingSignatureState === 'linking_new_wallet' &&
             !requiresTwoStepAuthentication(selectedWalletConnector)) {
-            setIsVerifying(true);
+            ongoingVerifications.setConnectAndSignVerification(true);
             triggerConnectAndSign({ walletConnector: selectedWalletConnector })
-                .then(() => {
-                setMultiWalletWidgetState('idle');
-                setIsVerifying(false);
-            })
                 .catch((e) => {
-                setMultiWalletWidgetState('idle');
-                setIsVerifying(false);
                 logger.error(e);
+            })
+                .finally(() => {
+                setMultiWalletWidgetState('idle');
+                ongoingVerifications.setConnectAndSignVerification(false);
             });
         }
     }, [
@@ -46,8 +44,7 @@ const useVerifyOnAwaitingSignature = () => {
         selectedWalletConnector === null || selectedWalletConnector === void 0 ? void 0 : selectedWalletConnector.name,
         multiWalletWidgetState,
         setMultiWalletWidgetState,
-        isVerifying,
-        setIsVerifying,
+        ongoingVerifications,
     ]);
 };
 

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

@@ -0,0 +1,29 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var React = require('react');
+var useInternalDynamicContext = require('../../../context/DynamicContext/useInternalDynamicContext.cjs');
+
+//  This is temporary workaround what should be removed after refactoring the useWalletEventListeners.
+//  https://linear.app/dynamic-labs/issue/QNTM-74/cleanup-attached-events-to-wallet-connector-in-network-not-supported
+//  Currently the events and context properties f.e. `network` are based on primaryWallet
+//  which is define after signing the message
+const useApplyWalletConnectorNetwork = ({ walletConnector }) => {
+    const { network, setNetwork } = useInternalDynamicContext.useInternalDynamicContext();
+    // Updates the contexts 'network' based on the selected wallet connector.
+    // It helps ensure that the 'network' is always in sync with the wallet's actual network,
+    // Prevents 'network' from being 'undefined'.
+    React.useEffect(() => {
+        if (walletConnector) {
+            walletConnector.getNetwork().then((walletConnectorNetwork) => {
+                if (network !== walletConnectorNetwork) {
+                    setNetwork(walletConnectorNetwork);
+                }
+            });
+        }
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [network, walletConnector]);
+};
+
+exports.useApplyWalletConnectorNetwork = useApplyWalletConnectorNetwork;

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

@@ -0,0 +1,5 @@
+import { WalletConnector } from '@dynamic-labs/wallet-connector-core';
+export type Props = {
+    walletConnector?: WalletConnector | null;
+};
+export declare const useApplyWalletConnectorNetwork: ({ walletConnector }: Props) => void;

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

@@ -0,0 +1,25 @@
+import { useEffect } from 'react';
+import { useInternalDynamicContext } from '../../../context/DynamicContext/useInternalDynamicContext.js';
+
+//  This is temporary workaround what should be removed after refactoring the useWalletEventListeners.
+//  https://linear.app/dynamic-labs/issue/QNTM-74/cleanup-attached-events-to-wallet-connector-in-network-not-supported
+//  Currently the events and context properties f.e. `network` are based on primaryWallet
+//  which is define after signing the message
+const useApplyWalletConnectorNetwork = ({ walletConnector }) => {
+    const { network, setNetwork } = useInternalDynamicContext();
+    // Updates the contexts 'network' based on the selected wallet connector.
+    // It helps ensure that the 'network' is always in sync with the wallet's actual network,
+    // Prevents 'network' from being 'undefined'.
+    useEffect(() => {
+        if (walletConnector) {
+            walletConnector.getNetwork().then((walletConnectorNetwork) => {
+                if (network !== walletConnectorNetwork) {
+                    setNetwork(walletConnectorNetwork);
+                }
+            });
+        }
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [network, walletConnector]);
+};
+
+export { useApplyWalletConnectorNetwork };

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

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