@dynamic-labs/sdk-react-core 1.0.0-alpha.5 → 1.0.0-alpha.7

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

@@ -19,10 +19,12 @@ require('../../../shared/consts/index.cjs');
 require('@dynamic-labs/multi-wallet');
 var isProgrammableNetworkSwitchSupported = require('../../functions/isProgrammableNetworkSwitchSupported/isProgrammableNetworkSwitchSupported.cjs');
 var isSupportedNetwork = require('../../functions/isSupportedNetwork/isSupportedNetwork.cjs');
+var useIsLoggedIn = require('../useIsLoggedIn/useIsLoggedIn.cjs');
 
 const useConnectedWalletsNetworkValidation = () => {
-    const { connectedWallets, selectedWalletConnector, setSelectedWalletConnectorKey, setShowAuthFlow, showAuthFlow, bridgeChainsToConnect, sdkHasLoaded, } = useInternalDynamicContext.useInternalDynamicContext();
+    const { connectedWallets, selectedWalletConnector, setSelectedWalletConnectorKey, setShowAuthFlow, bridgeChainsToConnect, sdkHasLoaded, } = useInternalDynamicContext.useInternalDynamicContext();
     const { setView } = ViewContext.useViewContext();
+    const isLoggedIn = useIsLoggedIn.useIsLoggedIn();
     React.useEffect(() => {
         /**
          * This check was added to prevent the "wrong network" modal from appearing
@@ -33,7 +35,7 @@ const useConnectedWalletsNetworkValidation = () => {
          * extra popup because handleLogOut flips sdkHasLoaded to false, so on the
          * next render it will already be false.
          */
-        if (!sdkHasLoaded) {
+        if (!sdkHasLoaded || !isLoggedIn) {
             return;
         }
         const connectedWalletsWithInvalidNetwork = connectedWallets.filter((connectedWallet) => {
@@ -57,14 +59,10 @@ const useConnectedWalletsNetworkValidation = () => {
             const networkNotSupportedView = isProgrammableNetworkSwitchSupported.isProgrammableNetworkSwitchSupported(connectedWalletWithInvalidNetwork.connector)
                 ? 'network-not-supported'
                 : 'network-not-supported-manual';
-            if (!showAuthFlow) {
-                setShowAuthFlow(true);
-            }
+            // Doesn't rerender if it's already true
+            setShowAuthFlow(true);
             setView(networkNotSupportedView);
         }
-        // we need it to remove 'showAuthFlow' property. we don't want to react to it,
-        // because closing modal on network switch causes it to re-open
-        // eslint-disable-next-line react-hooks/exhaustive-deps
     }, [
         sdkHasLoaded,
         connectedWallets,
@@ -73,6 +71,7 @@ const useConnectedWalletsNetworkValidation = () => {
         setShowAuthFlow,
         setView,
         bridgeChainsToConnect,
+        isLoggedIn,
     ]);
 };
 

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

@@ -15,10 +15,12 @@ import '../../../shared/consts/index.js';
 import '@dynamic-labs/multi-wallet';
 import { isProgrammableNetworkSwitchSupported } from '../../functions/isProgrammableNetworkSwitchSupported/isProgrammableNetworkSwitchSupported.js';
 import { isSupportedNetwork } from '../../functions/isSupportedNetwork/isSupportedNetwork.js';
+import { useIsLoggedIn } from '../useIsLoggedIn/useIsLoggedIn.js';
 
 const useConnectedWalletsNetworkValidation = () => {
-    const { connectedWallets, selectedWalletConnector, setSelectedWalletConnectorKey, setShowAuthFlow, showAuthFlow, bridgeChainsToConnect, sdkHasLoaded, } = useInternalDynamicContext();
+    const { connectedWallets, selectedWalletConnector, setSelectedWalletConnectorKey, setShowAuthFlow, bridgeChainsToConnect, sdkHasLoaded, } = useInternalDynamicContext();
     const { setView } = useViewContext();
+    const isLoggedIn = useIsLoggedIn();
     useEffect(() => {
         /**
          * This check was added to prevent the "wrong network" modal from appearing
@@ -29,7 +31,7 @@ const useConnectedWalletsNetworkValidation = () => {
          * extra popup because handleLogOut flips sdkHasLoaded to false, so on the
          * next render it will already be false.
          */
-        if (!sdkHasLoaded) {
+        if (!sdkHasLoaded || !isLoggedIn) {
             return;
         }
         const connectedWalletsWithInvalidNetwork = connectedWallets.filter((connectedWallet) => {
@@ -53,14 +55,10 @@ const useConnectedWalletsNetworkValidation = () => {
             const networkNotSupportedView = isProgrammableNetworkSwitchSupported(connectedWalletWithInvalidNetwork.connector)
                 ? 'network-not-supported'
                 : 'network-not-supported-manual';
-            if (!showAuthFlow) {
-                setShowAuthFlow(true);
-            }
+            // Doesn't rerender if it's already true
+            setShowAuthFlow(true);
             setView(networkNotSupportedView);
         }
-        // we need it to remove 'showAuthFlow' property. we don't want to react to it,
-        // because closing modal on network switch causes it to re-open
-        // eslint-disable-next-line react-hooks/exhaustive-deps
     }, [
         sdkHasLoaded,
         connectedWallets,
@@ -69,6 +67,7 @@ const useConnectedWalletsNetworkValidation = () => {
         setShowAuthFlow,
         setView,
         bridgeChainsToConnect,
+        isLoggedIn,
     ]);
 };
 

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

@@ -7,6 +7,7 @@ var React = require('react');
 const useEventListener = (eventName, handler) => {
     // Create a ref that stores handler
     const savedHandler = React.useRef(handler);
+    savedHandler.current = handler;
     React.useEffect(() => {
         // Define the listening target
         const targetElement = window;
@@ -19,7 +20,7 @@ const useEventListener = (eventName, handler) => {
         return () => {
             targetElement.removeEventListener(eventName, listener);
         };
-    }, [eventName]);
+    }, [eventName, handler]);
 };
 
 exports.useEventListener = useEventListener;

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

@@ -3,6 +3,7 @@ import { useRef, useEffect } from 'react';
 const useEventListener = (eventName, handler) => {
     // Create a ref that stores handler
     const savedHandler = useRef(handler);
+    savedHandler.current = handler;
     useEffect(() => {
         // Define the listening target
         const targetElement = window;
@@ -15,7 +16,7 @@ const useEventListener = (eventName, handler) => {
         return () => {
             targetElement.removeEventListener(eventName, listener);
         };
-    }, [eventName]);
+    }, [eventName, handler]);
 };
 
 export { useEventListener };

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

@@ -42,6 +42,14 @@ const useWalletConnectors = ({ authMode, authToken, connectedWallets, wallets: a
         if (authMode === 'connect-and-sign' && (user || onboardingOnlyJwt)) {
             return linkedWallets;
         }
+        /**
+         * This is to handle users in connect-only who are signing in with social/email
+         * with an embedded wallet
+         */
+        if (authMode === 'connect-only' &&
+            linkedWallets.find((wallet) => walletConnectorCore.isEmbeddedConnector(wallet.connector))) {
+            return linkedWallets;
+        }
         return connectedWallets;
     }, [authMode, connectedWallets, linkedWallets, user, onboardingOnlyJwt]);
     /**
@@ -54,11 +62,8 @@ const useWalletConnectors = ({ authMode, authToken, connectedWallets, wallets: a
     React.useEffect(() => walletsBasedOnAuthMode.forEach((wallet) => {
         wallet.connector.initEventListener();
     }), [walletsBasedOnAuthMode]);
-    const { connectedWalletMap, computeConnectedStateForWallets, didConnectedStateLoad, } = useWalletsConnectionState.useWalletsConnectionState(walletsBasedOnAuthMode);
+    const { connectedWalletMap, didConnectedStateLoad } = useWalletsConnectionState.useWalletsConnectionState(walletsBasedOnAuthMode);
     const wallets = React.useMemo(() => walletsBasedOnAuthMode.map((wallet) => (Object.assign(Object.assign({}, wallet), { connected: Boolean(connectedWalletMap[wallet.id]) }))), [connectedWalletMap, walletsBasedOnAuthMode]);
-    React.useEffect(() => {
-        computeConnectedStateForWallets();
-    }, [primaryWalletId, computeConnectedStateForWallets]);
     const getPrimaryWallet = React.useCallback(() => { var _a; return (_a = wallets.find((wallet) => wallet.id === primaryWalletId)) !== null && _a !== void 0 ? _a : null; }, [primaryWalletId, wallets]);
     const getSecondaryWallets = React.useCallback(() => canHaveMultipleWalletsConnected
         ? wallets.filter((wallet) => wallet.id !== primaryWalletId)
@@ -159,7 +164,6 @@ const useWalletConnectors = ({ authMode, authToken, connectedWallets, wallets: a
     ]);
     const walletConnectors = wallets.map((wallet) => wallet.connector);
     return {
-        computeConnectedStateForWallets,
         didConnectedStateLoad,
         getPrimaryWallet,
         getSecondaryWallets,

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

@@ -18,7 +18,6 @@ type Props = {
     canHaveMultipleWalletsConnected?: boolean;
 };
 export interface UseWalletConnectors {
-    computeConnectedStateForWallets: () => Promise<void>;
     didConnectedStateLoad: boolean;
     getPrimaryWallet: () => Wallet | null;
     getSecondaryWallets: () => Wallet[];

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

@@ -1,6 +1,6 @@
 import { __awaiter } from '../../../../../_virtual/_tslib.js';
 import { useState, useMemo, useEffect, useCallback } from 'react';
-import { isEmailWalletConnector, isSocialWalletConnector } from '@dynamic-labs/wallet-connector-core';
+import { isEmbeddedConnector, isEmailWalletConnector, isSocialWalletConnector } from '@dynamic-labs/wallet-connector-core';
 import { DynamicError } from '@dynamic-labs/utils';
 import '@dynamic-labs/sdk-api';
 import { logger } from '../../../shared/logger.js';
@@ -38,6 +38,14 @@ const useWalletConnectors = ({ authMode, authToken, connectedWallets, wallets: a
         if (authMode === 'connect-and-sign' && (user || onboardingOnlyJwt)) {
             return linkedWallets;
         }
+        /**
+         * This is to handle users in connect-only who are signing in with social/email
+         * with an embedded wallet
+         */
+        if (authMode === 'connect-only' &&
+            linkedWallets.find((wallet) => isEmbeddedConnector(wallet.connector))) {
+            return linkedWallets;
+        }
         return connectedWallets;
     }, [authMode, connectedWallets, linkedWallets, user, onboardingOnlyJwt]);
     /**
@@ -50,11 +58,8 @@ const useWalletConnectors = ({ authMode, authToken, connectedWallets, wallets: a
     useEffect(() => walletsBasedOnAuthMode.forEach((wallet) => {
         wallet.connector.initEventListener();
     }), [walletsBasedOnAuthMode]);
-    const { connectedWalletMap, computeConnectedStateForWallets, didConnectedStateLoad, } = useWalletsConnectionState(walletsBasedOnAuthMode);
+    const { connectedWalletMap, didConnectedStateLoad } = useWalletsConnectionState(walletsBasedOnAuthMode);
     const wallets = useMemo(() => walletsBasedOnAuthMode.map((wallet) => (Object.assign(Object.assign({}, wallet), { connected: Boolean(connectedWalletMap[wallet.id]) }))), [connectedWalletMap, walletsBasedOnAuthMode]);
-    useEffect(() => {
-        computeConnectedStateForWallets();
-    }, [primaryWalletId, computeConnectedStateForWallets]);
     const getPrimaryWallet = useCallback(() => { var _a; return (_a = wallets.find((wallet) => wallet.id === primaryWalletId)) !== null && _a !== void 0 ? _a : null; }, [primaryWalletId, wallets]);
     const getSecondaryWallets = useCallback(() => canHaveMultipleWalletsConnected
         ? wallets.filter((wallet) => wallet.id !== primaryWalletId)
@@ -155,7 +160,6 @@ const useWalletConnectors = ({ authMode, authToken, connectedWallets, wallets: a
     ]);
     const walletConnectors = wallets.map((wallet) => wallet.connector);
     return {
-        computeConnectedStateForWallets,
         didConnectedStateLoad,
         getPrimaryWallet,
         getSecondaryWallets,

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

@@ -18,7 +18,7 @@ require('@dynamic-labs/utils');
 require('../../../shared/consts/index.cjs');
 var useWalletConnectorEvent = require('../useWalletConnectorEvent/useWalletConnectorEvent.cjs');
 
-const useWalletEventListeners = ({ computeConnectedStateForWallets, handleLogOut, multiWallet, multiWalletWidgetState, primaryWallet, secondaryWallets, selectedWalletConnector, selectedWalletWithAction, setSelectedWalletConnectorKey, setSelectedWalletWithAction, setMultiWalletWidgetState, user, setPrimaryWalletId, authMode, refreshConnectedWallet, }) => {
+const useWalletEventListeners = ({ handleLogOut, multiWallet, multiWalletWidgetState, primaryWallet, secondaryWallets, selectedWalletConnector, selectedWalletWithAction, setSelectedWalletConnectorKey, setSelectedWalletWithAction, setMultiWalletWidgetState, user, setPrimaryWalletId, authMode, refreshConnectedWallet, }) => {
     const [loadingNetwork, setLoadingNetwork] = React.useState(true);
     const [network, setNetwork] = React.useState(undefined);
     React.useEffect(() => {
@@ -57,7 +57,7 @@ const useWalletEventListeners = ({ computeConnectedStateForWallets, handleLogOut
             setNetwork(parseInt(chain));
         }
     });
-    useWalletConnectorEvent.useWalletConnectorEvent(primaryWallet === null || primaryWallet === void 0 ? void 0 : primaryWallet.connector, 'accountChange', (_, { accounts }) => _tslib.__awaiter(void 0, void 0, void 0, function* () {
+    useWalletConnectorEvent.useWalletConnectorEvent(primaryWallet === null || primaryWallet === void 0 ? void 0 : primaryWallet.connector, 'accountChange', (_, { accounts }) => {
         logger.logger.debug('primary wallet account change', {
             accounts,
         });
@@ -91,7 +91,6 @@ const useWalletEventListeners = ({ computeConnectedStateForWallets, handleLogOut
             if (user) {
                 setMultiWalletWidgetState('detected_new_wallet');
                 setSelectedWalletConnectorKey(primaryWallet.connector.key);
-                yield computeConnectedStateForWallets();
                 return;
             }
         }
@@ -99,8 +98,7 @@ const useWalletEventListeners = ({ computeConnectedStateForWallets, handleLogOut
             logger.logger.error(`Unexpected multiWalletWidgetState (${multiWalletWidgetState}) and onAccountChange combination. Resetting state to idle.`);
             setMultiWalletWidgetState('idle');
         }
-        yield computeConnectedStateForWallets();
-    }));
+    });
     const uniqueNonPrimaryWallets = React.useMemo(() => {
         const primaryConnector = primaryWallet === null || primaryWallet === void 0 ? void 0 : primaryWallet.connector;
         const secondaryConnectors = secondaryWallets.map(({ connector }) => connector);
@@ -114,35 +112,36 @@ const useWalletEventListeners = ({ computeConnectedStateForWallets, handleLogOut
         }
         return Array.from(allWalletConnectors);
     }, [secondaryWallets, selectedWalletConnector, primaryWallet === null || primaryWallet === void 0 ? void 0 : primaryWallet.connector]);
-    useWalletConnectorEvent.useWalletConnectorEvent(uniqueNonPrimaryWallets, 'accountChange', () => _tslib.__awaiter(void 0, void 0, void 0, function* () {
+    useWalletConnectorEvent.useWalletConnectorEvent(uniqueNonPrimaryWallets, 'accountChange', (changedConnector) => _tslib.__awaiter(void 0, void 0, void 0, function* () {
         logger.logger.debug('secondary wallet account change');
         if (authMode === 'connect-only' && secondaryWallets.length) {
-            refreshConnectedWallet(secondaryWallets[0].id, secondaryWallets[0].connector);
+            const affectedWallets = secondaryWallets.filter(({ connector }) => connector.key === changedConnector.key);
+            for (const wallet of affectedWallets)
+                refreshConnectedWallet(wallet.id, wallet.connector);
             return;
         }
         if (multiWalletWidgetState === 'awaiting_account_switch') {
             handleAccountChangeWhenAwaitingAccountSwitch(false, (selectedWalletWithAction === null || selectedWalletWithAction === void 0 ? void 0 : selectedWalletWithAction.wallet.address) || '');
         }
-        yield computeConnectedStateForWallets();
     }));
-    useWalletConnectorEvent.useWalletConnectorEvent(uniqueNonPrimaryWallets, 'chainChange', () => _tslib.__awaiter(void 0, void 0, void 0, function* () {
+    useWalletConnectorEvent.useWalletConnectorEvent(uniqueNonPrimaryWallets, 'chainChange', (changedConnector) => _tslib.__awaiter(void 0, void 0, void 0, function* () {
         logger.logger.debug('secondary wallet chain change');
-        // We should pass the proper walletId here
-        if (!secondaryWallets.length) {
-            return;
-        }
-        refreshConnectedWallet(secondaryWallets[0].id, secondaryWallets[0].connector);
+        // Get all wallets with this connector
+        const affectedWallets = secondaryWallets.filter(({ connector }) => connector.key === changedConnector.key);
+        for (const wallet of affectedWallets)
+            refreshConnectedWallet(wallet.id, wallet.connector);
     }));
-    useWalletConnectorEvent.useWalletConnectorEvent(uniqueNonPrimaryWallets, 'disconnect', () => {
+    useWalletConnectorEvent.useWalletConnectorEvent(uniqueNonPrimaryWallets, 'disconnect', (affectedConnector) => {
         logger.logger.debug('secondary wallet disconnect');
         // argent sends a disconnect event when the user adds a new account
-        if (authMode === 'connect-only' &&
-            secondaryWallets.length &&
-            secondaryWallets[0].connector.key === 'argentx') {
-            refreshConnectedWallet(secondaryWallets[0].id, secondaryWallets[0].connector);
-            return;
+        if (authMode === 'connect-only') {
+            // Get all wallets with this connector
+            const affectedWallets = secondaryWallets.filter(({ connector }) => connector.key === affectedConnector.key);
+            for (const wallet of affectedWallets) {
+                if (wallet.connector.key === 'argentx')
+                    refreshConnectedWallet(wallet.id, wallet.connector);
+            }
         }
-        computeConnectedStateForWallets();
     });
     const handleAccountChangeWhenAwaitingAccountSwitch = React.useCallback((isPrimaryWallet, newAddress) => {
         const linkedSecondaryWallet = secondaryWallets.find((wallet) => walletConnectorCore.isSameAddress(wallet.address, newAddress, wallet.chain));

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

@@ -4,7 +4,6 @@ import { AuthModeType, MultiWalletWidgetState, UserProfile, Wallet, WalletWithAc
 import { MultiWalletWidgetStateSetter } from '../multiWallet';
 import { IDynamicContext } from '../../../context/DynamicContext/types';
 export type UseWalletEventListenersArgs = {
-    computeConnectedStateForWallets(): Promise<void>;
     handleLogOut(): Promise<void>;
     multiWallet: boolean;
     multiWalletWidgetState: MultiWalletWidgetState;
@@ -20,7 +19,7 @@ export type UseWalletEventListenersArgs = {
     authMode: AuthModeType;
     refreshConnectedWallet: (walletId: string, walletConnector: WalletConnector, shouldCallCallback?: boolean) => Promise<void>;
 };
-export declare const useWalletEventListeners: ({ computeConnectedStateForWallets, handleLogOut, multiWallet, multiWalletWidgetState, primaryWallet, secondaryWallets, selectedWalletConnector, selectedWalletWithAction, setSelectedWalletConnectorKey, setSelectedWalletWithAction, setMultiWalletWidgetState, user, setPrimaryWalletId, authMode, refreshConnectedWallet, }: UseWalletEventListenersArgs) => {
+export declare const useWalletEventListeners: ({ handleLogOut, multiWallet, multiWalletWidgetState, primaryWallet, secondaryWallets, selectedWalletConnector, selectedWalletWithAction, setSelectedWalletConnectorKey, setSelectedWalletWithAction, setMultiWalletWidgetState, user, setPrimaryWalletId, authMode, refreshConnectedWallet, }: UseWalletEventListenersArgs) => {
     loadingNetwork: boolean;
     network: string | number | undefined;
     setNetwork: import("react").Dispatch<import("react").SetStateAction<string | number | undefined>>;

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

@@ -14,7 +14,7 @@ import '@dynamic-labs/utils';
 import '../../../shared/consts/index.js';
 import { useWalletConnectorEvent } from '../useWalletConnectorEvent/useWalletConnectorEvent.js';
 
-const useWalletEventListeners = ({ computeConnectedStateForWallets, handleLogOut, multiWallet, multiWalletWidgetState, primaryWallet, secondaryWallets, selectedWalletConnector, selectedWalletWithAction, setSelectedWalletConnectorKey, setSelectedWalletWithAction, setMultiWalletWidgetState, user, setPrimaryWalletId, authMode, refreshConnectedWallet, }) => {
+const useWalletEventListeners = ({ handleLogOut, multiWallet, multiWalletWidgetState, primaryWallet, secondaryWallets, selectedWalletConnector, selectedWalletWithAction, setSelectedWalletConnectorKey, setSelectedWalletWithAction, setMultiWalletWidgetState, user, setPrimaryWalletId, authMode, refreshConnectedWallet, }) => {
     const [loadingNetwork, setLoadingNetwork] = useState(true);
     const [network, setNetwork] = useState(undefined);
     useEffect(() => {
@@ -53,7 +53,7 @@ const useWalletEventListeners = ({ computeConnectedStateForWallets, handleLogOut
             setNetwork(parseInt(chain));
         }
     });
-    useWalletConnectorEvent(primaryWallet === null || primaryWallet === void 0 ? void 0 : primaryWallet.connector, 'accountChange', (_, { accounts }) => __awaiter(void 0, void 0, void 0, function* () {
+    useWalletConnectorEvent(primaryWallet === null || primaryWallet === void 0 ? void 0 : primaryWallet.connector, 'accountChange', (_, { accounts }) => {
         logger.debug('primary wallet account change', {
             accounts,
         });
@@ -87,7 +87,6 @@ const useWalletEventListeners = ({ computeConnectedStateForWallets, handleLogOut
             if (user) {
                 setMultiWalletWidgetState('detected_new_wallet');
                 setSelectedWalletConnectorKey(primaryWallet.connector.key);
-                yield computeConnectedStateForWallets();
                 return;
             }
         }
@@ -95,8 +94,7 @@ const useWalletEventListeners = ({ computeConnectedStateForWallets, handleLogOut
             logger.error(`Unexpected multiWalletWidgetState (${multiWalletWidgetState}) and onAccountChange combination. Resetting state to idle.`);
             setMultiWalletWidgetState('idle');
         }
-        yield computeConnectedStateForWallets();
-    }));
+    });
     const uniqueNonPrimaryWallets = useMemo(() => {
         const primaryConnector = primaryWallet === null || primaryWallet === void 0 ? void 0 : primaryWallet.connector;
         const secondaryConnectors = secondaryWallets.map(({ connector }) => connector);
@@ -110,35 +108,36 @@ const useWalletEventListeners = ({ computeConnectedStateForWallets, handleLogOut
         }
         return Array.from(allWalletConnectors);
     }, [secondaryWallets, selectedWalletConnector, primaryWallet === null || primaryWallet === void 0 ? void 0 : primaryWallet.connector]);
-    useWalletConnectorEvent(uniqueNonPrimaryWallets, 'accountChange', () => __awaiter(void 0, void 0, void 0, function* () {
+    useWalletConnectorEvent(uniqueNonPrimaryWallets, 'accountChange', (changedConnector) => __awaiter(void 0, void 0, void 0, function* () {
         logger.debug('secondary wallet account change');
         if (authMode === 'connect-only' && secondaryWallets.length) {
-            refreshConnectedWallet(secondaryWallets[0].id, secondaryWallets[0].connector);
+            const affectedWallets = secondaryWallets.filter(({ connector }) => connector.key === changedConnector.key);
+            for (const wallet of affectedWallets)
+                refreshConnectedWallet(wallet.id, wallet.connector);
             return;
         }
         if (multiWalletWidgetState === 'awaiting_account_switch') {
             handleAccountChangeWhenAwaitingAccountSwitch(false, (selectedWalletWithAction === null || selectedWalletWithAction === void 0 ? void 0 : selectedWalletWithAction.wallet.address) || '');
         }
-        yield computeConnectedStateForWallets();
     }));
-    useWalletConnectorEvent(uniqueNonPrimaryWallets, 'chainChange', () => __awaiter(void 0, void 0, void 0, function* () {
+    useWalletConnectorEvent(uniqueNonPrimaryWallets, 'chainChange', (changedConnector) => __awaiter(void 0, void 0, void 0, function* () {
         logger.debug('secondary wallet chain change');
-        // We should pass the proper walletId here
-        if (!secondaryWallets.length) {
-            return;
-        }
-        refreshConnectedWallet(secondaryWallets[0].id, secondaryWallets[0].connector);
+        // Get all wallets with this connector
+        const affectedWallets = secondaryWallets.filter(({ connector }) => connector.key === changedConnector.key);
+        for (const wallet of affectedWallets)
+            refreshConnectedWallet(wallet.id, wallet.connector);
     }));
-    useWalletConnectorEvent(uniqueNonPrimaryWallets, 'disconnect', () => {
+    useWalletConnectorEvent(uniqueNonPrimaryWallets, 'disconnect', (affectedConnector) => {
         logger.debug('secondary wallet disconnect');
         // argent sends a disconnect event when the user adds a new account
-        if (authMode === 'connect-only' &&
-            secondaryWallets.length &&
-            secondaryWallets[0].connector.key === 'argentx') {
-            refreshConnectedWallet(secondaryWallets[0].id, secondaryWallets[0].connector);
-            return;
+        if (authMode === 'connect-only') {
+            // Get all wallets with this connector
+            const affectedWallets = secondaryWallets.filter(({ connector }) => connector.key === affectedConnector.key);
+            for (const wallet of affectedWallets) {
+                if (wallet.connector.key === 'argentx')
+                    refreshConnectedWallet(wallet.id, wallet.connector);
+            }
         }
-        computeConnectedStateForWallets();
     });
     const handleAccountChangeWhenAwaitingAccountSwitch = useCallback((isPrimaryWallet, newAddress) => {
         const linkedSecondaryWallet = secondaryWallets.find((wallet) => isSameAddress(wallet.address, newAddress, wallet.chain));

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

@@ -16,8 +16,10 @@ require('../../../shared/utils/classes/storage/localStorage.cjs');
 require('viem');
 require('@dynamic-labs/utils');
 require('../../../shared/consts/index.cjs');
+var useWalletConnectorEvent = require('../useWalletConnectorEvent/useWalletConnectorEvent.cjs');
 require('@dynamic-labs/multi-wallet');
 var isWalletConnected = require('../../functions/isWalletConnected/isWalletConnected.cjs');
+var useEventListener = require('../useEventListener/useEventListener.cjs');
 
 const connectedWalletStateReducer = (state, connectedWalletsMap) => {
     const isConnectedWalletsMapEmpty = Object.values(connectedWalletsMap).length === 0;
@@ -26,14 +28,23 @@ const connectedWalletStateReducer = (state, connectedWalletsMap) => {
     }
     return Object.assign(Object.assign({}, state), { connectedWalletsMap, didLoad: true });
 };
-const useWalletsConnectionState = (linkedWallets) => {
+const useWalletsConnectionState = (wallets) => {
     const [state, setState] = React.useReducer(connectedWalletStateReducer, {
         connectedWalletsMap: {},
         didLoad: false,
     });
+    const refreshKey = wallets.map(({ id }) => id).join('-');
+    const connectors = wallets.map(({ connector }) => connector);
     const lastCallTimestamp = React.useRef(0);
     const computeConnectedStateForWallets = React.useCallback(() => _tslib.__awaiter(void 0, void 0, void 0, function* () {
-        if (!linkedWallets.length)
+        const connectedWalletsMap = {};
+        yield Promise.all(wallets.map((wallet) => _tslib.__awaiter(void 0, void 0, void 0, function* () {
+            connectedWalletsMap[wallet.id] = yield isWalletConnected.isWalletConnected(wallet);
+        })));
+        setState(connectedWalletsMap);
+    }), [wallets]);
+    const handleOnEventUpdate = React.useCallback(() => _tslib.__awaiter(void 0, void 0, void 0, function* () {
+        if (!wallets.length)
             return;
         const callTimestamp = new Date().getTime();
         const diffFromLastCall = callTimestamp - lastCallTimestamp.current;
@@ -44,14 +55,26 @@ const useWalletsConnectionState = (linkedWallets) => {
             logger.logger.warn('computeConnectedStateForWallets: skipping due too many calls.');
             return;
         }
-        const connectedWalletsMap = {};
-        yield Promise.all(linkedWallets.map((wallet) => _tslib.__awaiter(void 0, void 0, void 0, function* () {
-            connectedWalletsMap[wallet.id] = yield isWalletConnected.isWalletConnected(wallet);
-        })));
-        setState(connectedWalletsMap);
-    }), [linkedWallets, setState]);
+        computeConnectedStateForWallets();
+    }), [computeConnectedStateForWallets, wallets.length]);
+    useWalletConnectorEvent.useWalletConnectorEvent(connectors, 'accountChange', handleOnEventUpdate);
+    useWalletConnectorEvent.useWalletConnectorEvent(connectors, 'disconnect', handleOnEventUpdate);
+    useWalletConnectorEvent.useWalletConnectorEvent(connectors, 'chainChange', handleOnEventUpdate);
+    React.useEffect(() => {
+        computeConnectedStateForWallets();
+    }, 
+    /**
+     * This is using a custom key to force the useEffect to run only when a connector is
+     * added or removed from the connectors list.
+     */
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    [refreshKey]);
+    /**
+     * This is a workaround to detect when the user switches to another tab/extension
+     * and then comes back to the dapp.
+     */
+    useEventListener.useEventListener('focus', computeConnectedStateForWallets);
     return {
-        computeConnectedStateForWallets,
         connectedWalletMap: state.connectedWalletsMap,
         didConnectedStateLoad: state.didLoad,
     };

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

@@ -6,7 +6,6 @@ type ConnectedState = {
     };
 };
 type WalletsConnectionStateHook = (wallets: Wallet[]) => {
-    computeConnectedStateForWallets: () => Promise<void>;
     connectedWalletMap: ConnectedState['connectedWalletsMap'];
     didConnectedStateLoad: ConnectedState['didLoad'];
 };

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

@@ -1,5 +1,5 @@
 import { __awaiter } from '../../../../../_virtual/_tslib.js';
-import { useReducer, useRef, useCallback } from 'react';
+import { useReducer, useRef, useCallback, useEffect } from 'react';
 import '@dynamic-labs/sdk-api';
 import { logger } from '../../../shared/logger.js';
 import '@dynamic-labs/iconic';
@@ -12,8 +12,10 @@ import '../../../shared/utils/classes/storage/localStorage.js';
 import 'viem';
 import '@dynamic-labs/utils';
 import '../../../shared/consts/index.js';
+import { useWalletConnectorEvent } from '../useWalletConnectorEvent/useWalletConnectorEvent.js';
 import '@dynamic-labs/multi-wallet';
 import { isWalletConnected } from '../../functions/isWalletConnected/isWalletConnected.js';
+import { useEventListener } from '../useEventListener/useEventListener.js';
 
 const connectedWalletStateReducer = (state, connectedWalletsMap) => {
     const isConnectedWalletsMapEmpty = Object.values(connectedWalletsMap).length === 0;
@@ -22,14 +24,23 @@ const connectedWalletStateReducer = (state, connectedWalletsMap) => {
     }
     return Object.assign(Object.assign({}, state), { connectedWalletsMap, didLoad: true });
 };
-const useWalletsConnectionState = (linkedWallets) => {
+const useWalletsConnectionState = (wallets) => {
     const [state, setState] = useReducer(connectedWalletStateReducer, {
         connectedWalletsMap: {},
         didLoad: false,
     });
+    const refreshKey = wallets.map(({ id }) => id).join('-');
+    const connectors = wallets.map(({ connector }) => connector);
     const lastCallTimestamp = useRef(0);
     const computeConnectedStateForWallets = useCallback(() => __awaiter(void 0, void 0, void 0, function* () {
-        if (!linkedWallets.length)
+        const connectedWalletsMap = {};
+        yield Promise.all(wallets.map((wallet) => __awaiter(void 0, void 0, void 0, function* () {
+            connectedWalletsMap[wallet.id] = yield isWalletConnected(wallet);
+        })));
+        setState(connectedWalletsMap);
+    }), [wallets]);
+    const handleOnEventUpdate = useCallback(() => __awaiter(void 0, void 0, void 0, function* () {
+        if (!wallets.length)
             return;
         const callTimestamp = new Date().getTime();
         const diffFromLastCall = callTimestamp - lastCallTimestamp.current;
@@ -40,14 +51,26 @@ const useWalletsConnectionState = (linkedWallets) => {
             logger.warn('computeConnectedStateForWallets: skipping due too many calls.');
             return;
         }
-        const connectedWalletsMap = {};
-        yield Promise.all(linkedWallets.map((wallet) => __awaiter(void 0, void 0, void 0, function* () {
-            connectedWalletsMap[wallet.id] = yield isWalletConnected(wallet);
-        })));
-        setState(connectedWalletsMap);
-    }), [linkedWallets, setState]);
+        computeConnectedStateForWallets();
+    }), [computeConnectedStateForWallets, wallets.length]);
+    useWalletConnectorEvent(connectors, 'accountChange', handleOnEventUpdate);
+    useWalletConnectorEvent(connectors, 'disconnect', handleOnEventUpdate);
+    useWalletConnectorEvent(connectors, 'chainChange', handleOnEventUpdate);
+    useEffect(() => {
+        computeConnectedStateForWallets();
+    }, 
+    /**
+     * This is using a custom key to force the useEffect to run only when a connector is
+     * added or removed from the connectors list.
+     */
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    [refreshKey]);
+    /**
+     * This is a workaround to detect when the user switches to another tab/extension
+     * and then comes back to the dapp.
+     */
+    useEventListener('focus', computeConnectedStateForWallets);
     return {
-        computeConnectedStateForWallets,
         connectedWalletMap: state.connectedWalletsMap,
         didConnectedStateLoad: state.didLoad,
     };

package/src/lib/views/CollectUserDataView/CollectUserDataView.cjs

@@ -83,7 +83,7 @@ const CollectUserDataView = () => {
     const evmNetworks = walletConnector.evmNetworks || [];
     const _isSupportedNetwork = !network || isSupportedNetwork.isSupportedNetwork({ network, walletConnector });
     const walletAddress = (_a = userProfile === null || userProfile === void 0 ? void 0 : userProfile.verifiedCredentials.find((verifiedCredential) => verifiedCredential.id === userProfile.lastVerifiedCredentialId)) === null || _a === void 0 ? void 0 : _a.address;
-    return (jsxRuntime.jsxs("div", { className: 'collect-user-data', "data-testid": 'collect-user-data-view', children: [jsxRuntime.jsxs("div", { className: 'collect-user-data__network-container', children: [jsxRuntime.jsxs("div", { className: 'collect-user-data__img-container', children: [(nameService === null || nameService === void 0 ? void 0 : nameService.avatar) ? (jsxRuntime.jsx("img", { src: nameService.avatar, alt: '', className: 'collect-user-data__img collect-user-data__img--rounded' })) : (jsxRuntime.jsx(AuthProviderIcon.AuthProviderIcon, { jwt: onboardingOnlyJwt, iconSize: 28 })), jsxRuntime.jsx(Typography.Typography, { variant: 'body_normal', color: 'primary', weight: 'medium', className: 'collect-user-data__wallet-address', children: (nameService === null || nameService === void 0 ? void 0 : nameService.name) || shortenWalletAddress.shortenWalletAddress(walletAddress, 3, 3) })] }), jsxRuntime.jsx(NetworkPicker.NetworkPicker, { evmNetworks: evmNetworks, connector: walletConnector, showNetworkName: true, isNetworkPickerOpen: isNetworkPickerOpen, setIsNetworkPickerOpen: setIsNetworkPickerOpen, buttonClassName: 'collect-user-data__network-picker-button', mainClassName: 'collect-user-data__network-picker' })] }), onboardingImageUrl && (jsxRuntime.jsx("img", { className: 'collect-user-data__main-img', src: onboardingImageUrl, alt: 'onboarding' })), !_isSupportedNetwork && (jsxRuntime.jsx(ErrorContainer.ErrorContainer, { withIcon: false, className: 'collect-user-data__error--not-supported', children: t('dyn_collect_user_data.not_supported_network.error_message') })), jsxRuntime.jsxs("div", { className: classNames.classNames('collect-user-data__form', {
+    return (jsxRuntime.jsxs("div", { className: 'collect-user-data', "data-testid": 'collect-user-data-view', children: [jsxRuntime.jsxs("div", { className: 'collect-user-data__network-container', children: [jsxRuntime.jsxs("div", { className: 'collect-user-data__img-container', children: [(nameService === null || nameService === void 0 ? void 0 : nameService.avatar) ? (jsxRuntime.jsx("img", { src: nameService.avatar, alt: '', className: 'collect-user-data__img collect-user-data__img--rounded' })) : (jsxRuntime.jsx(AuthProviderIcon.AuthProviderIcon, { jwt: onboardingOnlyJwt, iconSize: 28 })), jsxRuntime.jsx(Typography.Typography, { variant: 'body_normal', color: 'primary', weight: 'medium', className: 'collect-user-data__wallet-address', children: (nameService === null || nameService === void 0 ? void 0 : nameService.name) || shortenWalletAddress.shortenWalletAddress(walletAddress, 3, 3) })] }), jsxRuntime.jsx(NetworkPicker.NetworkPicker, { currentNetwork: network, evmNetworks: evmNetworks, connector: walletConnector, showNetworkName: true, isNetworkPickerOpen: isNetworkPickerOpen, setIsNetworkPickerOpen: setIsNetworkPickerOpen, buttonClassName: 'collect-user-data__network-picker-button', mainClassName: 'collect-user-data__network-picker' })] }), onboardingImageUrl && (jsxRuntime.jsx("img", { className: 'collect-user-data__main-img', src: onboardingImageUrl, alt: 'onboarding' })), !_isSupportedNetwork && (jsxRuntime.jsx(ErrorContainer.ErrorContainer, { withIcon: false, className: 'collect-user-data__error--not-supported', children: t('dyn_collect_user_data.not_supported_network.error_message') })), jsxRuntime.jsxs("div", { className: classNames.classNames('collect-user-data__form', {
                     'collect-user-data__form--error': !_isSupportedNetwork,
                 }), children: [jsxRuntime.jsx("div", { className: 'collect-user-data__success-icon', children: jsxRuntime.jsx(Icon.Icon, { color: 'text-primary', size: 'large', children: jsxRuntime.jsx(checkConnection.ReactComponent, {}) }) }), jsxRuntime.jsx(OnboardingUserDataForm.OnboardingUserDataForm, { disableSubmit: !_isSupportedNetwork, userProfile: userProfile, children: !_isSupportedNetwork ? (jsxRuntime.jsxs("div", { className: 'collect-user-data__welcome-container', children: [jsxRuntime.jsx(Typography.Typography, { variant: 'title', color: 'primary', className: 'collect-user-data__welcome-title', children: t('dyn_collect_user_data.not_supported_network.title') }), jsxRuntime.jsx(Typography.Typography, { variant: 'body_normal', weight: 'regular', color: 'secondary', children: t('dyn_collect_user_data.not_supported_network.description') })] })) : (jsxRuntime.jsxs("div", { className: 'collect-user-data__welcome-container', children: [jsxRuntime.jsx(Typography.Typography, { variant: 'title', color: 'primary', className: 'collect-user-data__welcome-title', children: (projectSettings === null || projectSettings === void 0 ? void 0 : projectSettings.general.collectUserDataWelcomeHeader) ||
                                         t('dyn_collect_user_data.greeting', { appName }) }), jsxRuntime.jsx(Typography.Typography, { variant: 'body_normal', weight: 'regular', color: 'secondary', children: (projectSettings === null || projectSettings === void 0 ? void 0 : projectSettings.general.collectUserDataWelcomeMessage) ||

package/src/lib/views/CollectUserDataView/CollectUserDataView.js

@@ -79,7 +79,7 @@ const CollectUserDataView = () => {
     const evmNetworks = walletConnector.evmNetworks || [];
     const _isSupportedNetwork = !network || isSupportedNetwork({ network, walletConnector });
     const walletAddress = (_a = userProfile === null || userProfile === void 0 ? void 0 : userProfile.verifiedCredentials.find((verifiedCredential) => verifiedCredential.id === userProfile.lastVerifiedCredentialId)) === null || _a === void 0 ? void 0 : _a.address;
-    return (jsxs("div", { className: 'collect-user-data', "data-testid": 'collect-user-data-view', children: [jsxs("div", { className: 'collect-user-data__network-container', children: [jsxs("div", { className: 'collect-user-data__img-container', children: [(nameService === null || nameService === void 0 ? void 0 : nameService.avatar) ? (jsx("img", { src: nameService.avatar, alt: '', className: 'collect-user-data__img collect-user-data__img--rounded' })) : (jsx(AuthProviderIcon, { jwt: onboardingOnlyJwt, iconSize: 28 })), jsx(Typography, { variant: 'body_normal', color: 'primary', weight: 'medium', className: 'collect-user-data__wallet-address', children: (nameService === null || nameService === void 0 ? void 0 : nameService.name) || shortenWalletAddress(walletAddress, 3, 3) })] }), jsx(NetworkPicker, { evmNetworks: evmNetworks, connector: walletConnector, showNetworkName: true, isNetworkPickerOpen: isNetworkPickerOpen, setIsNetworkPickerOpen: setIsNetworkPickerOpen, buttonClassName: 'collect-user-data__network-picker-button', mainClassName: 'collect-user-data__network-picker' })] }), onboardingImageUrl && (jsx("img", { className: 'collect-user-data__main-img', src: onboardingImageUrl, alt: 'onboarding' })), !_isSupportedNetwork && (jsx(ErrorContainer, { withIcon: false, className: 'collect-user-data__error--not-supported', children: t('dyn_collect_user_data.not_supported_network.error_message') })), jsxs("div", { className: classNames('collect-user-data__form', {
+    return (jsxs("div", { className: 'collect-user-data', "data-testid": 'collect-user-data-view', children: [jsxs("div", { className: 'collect-user-data__network-container', children: [jsxs("div", { className: 'collect-user-data__img-container', children: [(nameService === null || nameService === void 0 ? void 0 : nameService.avatar) ? (jsx("img", { src: nameService.avatar, alt: '', className: 'collect-user-data__img collect-user-data__img--rounded' })) : (jsx(AuthProviderIcon, { jwt: onboardingOnlyJwt, iconSize: 28 })), jsx(Typography, { variant: 'body_normal', color: 'primary', weight: 'medium', className: 'collect-user-data__wallet-address', children: (nameService === null || nameService === void 0 ? void 0 : nameService.name) || shortenWalletAddress(walletAddress, 3, 3) })] }), jsx(NetworkPicker, { currentNetwork: network, evmNetworks: evmNetworks, connector: walletConnector, showNetworkName: true, isNetworkPickerOpen: isNetworkPickerOpen, setIsNetworkPickerOpen: setIsNetworkPickerOpen, buttonClassName: 'collect-user-data__network-picker-button', mainClassName: 'collect-user-data__network-picker' })] }), onboardingImageUrl && (jsx("img", { className: 'collect-user-data__main-img', src: onboardingImageUrl, alt: 'onboarding' })), !_isSupportedNetwork && (jsx(ErrorContainer, { withIcon: false, className: 'collect-user-data__error--not-supported', children: t('dyn_collect_user_data.not_supported_network.error_message') })), jsxs("div", { className: classNames('collect-user-data__form', {
                     'collect-user-data__form--error': !_isSupportedNetwork,
                 }), children: [jsx("div", { className: 'collect-user-data__success-icon', children: jsx(Icon, { color: 'text-primary', size: 'large', children: jsx(SvgCheckConnection, {}) }) }), jsx(OnboardingUserDataForm, { disableSubmit: !_isSupportedNetwork, userProfile: userProfile, children: !_isSupportedNetwork ? (jsxs("div", { className: 'collect-user-data__welcome-container', children: [jsx(Typography, { variant: 'title', color: 'primary', className: 'collect-user-data__welcome-title', children: t('dyn_collect_user_data.not_supported_network.title') }), jsx(Typography, { variant: 'body_normal', weight: 'regular', color: 'secondary', children: t('dyn_collect_user_data.not_supported_network.description') })] })) : (jsxs("div", { className: 'collect-user-data__welcome-container', children: [jsx(Typography, { variant: 'title', color: 'primary', className: 'collect-user-data__welcome-title', children: (projectSettings === null || projectSettings === void 0 ? void 0 : projectSettings.general.collectUserDataWelcomeHeader) ||
                                         t('dyn_collect_user_data.greeting', { appName }) }), jsx(Typography, { variant: 'body_normal', weight: 'regular', color: 'secondary', children: (projectSettings === null || projectSettings === void 0 ? void 0 : projectSettings.general.collectUserDataWelcomeMessage) ||