@dynamic-labs/sdk-react-core 1.0.0-alpha.0 → 1.0.0-alpha.10

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

@@ -7,14 +7,14 @@ import '@dynamic-labs/iconic';
 import 'react/jsx-runtime';
 import '../../../context/ViewContext/ViewContext.js';
 import '@dynamic-labs/wallet-book';
-import '@dynamic-labs/utils';
 import '../../constants/colors.js';
 import '../../../shared/utils/classes/storage/localStorage.js';
 import 'viem';
+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, setSelectedWalletConnector, 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,
         });
@@ -70,7 +70,11 @@ const useWalletEventListeners = ({ computeConnectedStateForWallets, handleLogOut
             setMultiWalletWidgetState('idle');
         }
         else if (!multiWallet) {
-            yield handleLogOut();
+            setSelectedWalletWithAction({
+                action: 'select',
+                wallet: primaryWallet,
+            });
+            setMultiWalletWidgetState('awaiting_account_switch', 'primary_not_connected');
             return;
         }
         else if (multiWalletWidgetState === 'awaiting_account_switch') {
@@ -82,8 +86,7 @@ const useWalletEventListeners = ({ computeConnectedStateForWallets, handleLogOut
         else if (multiWalletWidgetState === 'idle' && !newWallet) {
             if (user) {
                 setMultiWalletWidgetState('detected_new_wallet');
-                setSelectedWalletConnector(primaryWallet.connector);
-                yield computeConnectedStateForWallets();
+                setSelectedWalletConnectorKey(primaryWallet.connector.key);
                 return;
             }
         }
@@ -91,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);
@@ -106,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));
@@ -142,7 +145,7 @@ const useWalletEventListeners = ({ computeConnectedStateForWallets, handleLogOut
         if (!linkedSecondaryWallet) {
             setMultiWalletWidgetState('awaiting_signature', undefined, 'linking_new_wallet');
             if (isPrimaryWallet && primaryWallet) {
-                setSelectedWalletConnector(primaryWallet.connector);
+                setSelectedWalletConnectorKey(primaryWallet.connector.key);
             }
             return;
         }
@@ -154,7 +157,7 @@ const useWalletEventListeners = ({ computeConnectedStateForWallets, handleLogOut
         setMultiWalletWidgetState,
         primaryWallet,
         secondaryWallets,
-        setSelectedWalletConnector,
+        setSelectedWalletConnectorKey,
         setSelectedWalletWithAction,
         setPrimaryWalletId,
     ]);

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

@@ -23,14 +23,15 @@ require('@dynamic-labs/multi-wallet');
 var requiresTwoStepAuthentication = require('../../functions/requiresTwoStepAuthentication/requiresTwoStepAuthentication.cjs');
 var isSelectedWalletAlreadyConnected = require('../../functions/isSelectedWalletAlreadyConnected/isSelectedWalletAlreadyConnected.cjs');
 var useConnectAndSign = require('../authenticationHooks/useConnectAndSign/useConnectAndSign.cjs');
-require('../../../config/ApiEndpoint.cjs');
 require('../../../context/AccessDeniedContext/AccessDeniedContext.cjs');
 require('../../../context/AccountExistsContext/AccountExistsContext.cjs');
+require('../../../config/ApiEndpoint.cjs');
+require('../../../context/CaptchaContext/CaptchaContext.cjs');
 var useConnectAndSignSplitSteps = require('../authenticationHooks/useConnectAndSignSplitSteps/useConnectAndSignSplitSteps.cjs');
 require('../../../context/EmailVerificationContext/EmailVerificationContext.cjs');
 
 const useWalletItemActions = () => {
-    const { setMultiWalletWidgetState, setShowAuthFlow, setSelectedWalletConnector, wallets, setQrcodeUri, setDesktopUri, user, linkedWallets, setLegacyIsVerifying, } = useInternalDynamicContext.useInternalDynamicContext();
+    const { setMultiWalletWidgetState, setShowAuthFlow, setSelectedWalletConnectorKey, walletConnectorOptions, setQrcodeUri, setDesktopUri, user, linkedWallets, setLegacyIsVerifying, } = useInternalDynamicContext.useInternalDynamicContext();
     const { mockedSDK } = MockContext.useMockContext();
     const { setError } = ErrorContext.useErrorContext();
     const { setView } = ViewContext.useViewContext();
@@ -39,27 +40,27 @@ const useWalletItemActions = () => {
     const handleCustodialWalletClick = (walletConnector) => _tslib.__awaiter(void 0, void 0, void 0, function* () {
         const twoStepAuthentication = requiresTwoStepAuthentication.requiresTwoStepAuthentication(walletConnector);
         if (twoStepAuthentication) {
-            setSelectedWalletConnector(walletConnector);
+            setSelectedWalletConnectorKey(walletConnector.key);
             yield onlyConnectUser({
                 walletConnector,
             });
         }
         else {
-            setSelectedWalletConnector(walletConnector);
+            setSelectedWalletConnectorKey(walletConnector.key);
             setMultiWalletWidgetState('awaiting_signature', undefined, 'linking_new_wallet');
         }
         setView('pending-signature');
     });
     const handleMobileWalletClick = (walletConnector) => _tslib.__awaiter(void 0, void 0, void 0, function* () {
-        setSelectedWalletConnector(walletConnector);
+        setSelectedWalletConnectorKey(walletConnector.key);
         onlyConnectUser({ walletConnector });
     });
     const handleInstalledExtensionClick = (walletConnector) => _tslib.__awaiter(void 0, void 0, void 0, function* () {
-        setSelectedWalletConnector(walletConnector);
+        setSelectedWalletConnectorKey(walletConnector.key);
         setMultiWalletWidgetState('awaiting_signature', undefined, 'linking_new_wallet');
     });
     const handleUninstalledClick = (walletConnector) => _tslib.__awaiter(void 0, void 0, void 0, function* () {
-        setSelectedWalletConnector(walletConnector);
+        setSelectedWalletConnectorKey(walletConnector.key);
         if (!walletConnector.canConnectViaQrCode) {
             setView('no-qr-not-installed');
         }
@@ -89,21 +90,22 @@ const useWalletItemActions = () => {
             setMultiWalletWidgetState('awaiting_signature', undefined, 'linking_new_wallet');
         }
         setShowAuthFlow(false);
-        setSelectedWalletConnector(walletConnector);
+        setSelectedWalletConnectorKey(walletConnector.key);
     });
     const openWallet = (walletKey, handlers) => {
+        var _a;
         const { openMobileWallet = handleMobileWalletClick, openCustodialWallet = handleCustodialWalletClick, openExtensionWallet = handleInstalledExtensionClick, } = handlers || {};
-        const wallet = wallets.find((wallet) => wallet.key === walletKey);
-        if (!wallet)
+        const walletConnector = (_a = walletConnectorOptions.find((wallet) => wallet.key === walletKey)) === null || _a === void 0 ? void 0 : _a.walletConnector;
+        if (!walletConnector)
             return;
         if (utils.isMobile()) {
-            openMobileWallet(wallet.walletConnector);
+            openMobileWallet(walletConnector);
         }
-        else if (wallet.walletConnector.canConnectViaCustodialService) {
-            openCustodialWallet(wallet.walletConnector);
+        else if (walletConnector.canConnectViaCustodialService) {
+            openCustodialWallet(walletConnector);
         }
-        else if (wallet.isInstalledOnBrowser) {
-            openExtensionWallet(wallet.walletConnector);
+        else if (walletConnector.isInstalledOnBrowser()) {
+            openExtensionWallet(walletConnector);
         }
     };
     const handleWalletItemClick = (wallet) => _tslib.__awaiter(void 0, void 0, void 0, function* () {

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

@@ -19,14 +19,15 @@ import '@dynamic-labs/multi-wallet';
 import { requiresTwoStepAuthentication } from '../../functions/requiresTwoStepAuthentication/requiresTwoStepAuthentication.js';
 import { isSelectedWalletAlreadyConnected } from '../../functions/isSelectedWalletAlreadyConnected/isSelectedWalletAlreadyConnected.js';
 import { useConnectAndSign } from '../authenticationHooks/useConnectAndSign/useConnectAndSign.js';
-import '../../../config/ApiEndpoint.js';
 import '../../../context/AccessDeniedContext/AccessDeniedContext.js';
 import '../../../context/AccountExistsContext/AccountExistsContext.js';
+import '../../../config/ApiEndpoint.js';
+import '../../../context/CaptchaContext/CaptchaContext.js';
 import { useConnectAndSignSplitSteps } from '../authenticationHooks/useConnectAndSignSplitSteps/useConnectAndSignSplitSteps.js';
 import '../../../context/EmailVerificationContext/EmailVerificationContext.js';
 
 const useWalletItemActions = () => {
-    const { setMultiWalletWidgetState, setShowAuthFlow, setSelectedWalletConnector, wallets, setQrcodeUri, setDesktopUri, user, linkedWallets, setLegacyIsVerifying, } = useInternalDynamicContext();
+    const { setMultiWalletWidgetState, setShowAuthFlow, setSelectedWalletConnectorKey, walletConnectorOptions, setQrcodeUri, setDesktopUri, user, linkedWallets, setLegacyIsVerifying, } = useInternalDynamicContext();
     const { mockedSDK } = useMockContext();
     const { setError } = useErrorContext();
     const { setView } = useViewContext();
@@ -35,27 +36,27 @@ const useWalletItemActions = () => {
     const handleCustodialWalletClick = (walletConnector) => __awaiter(void 0, void 0, void 0, function* () {
         const twoStepAuthentication = requiresTwoStepAuthentication(walletConnector);
         if (twoStepAuthentication) {
-            setSelectedWalletConnector(walletConnector);
+            setSelectedWalletConnectorKey(walletConnector.key);
             yield onlyConnectUser({
                 walletConnector,
             });
         }
         else {
-            setSelectedWalletConnector(walletConnector);
+            setSelectedWalletConnectorKey(walletConnector.key);
             setMultiWalletWidgetState('awaiting_signature', undefined, 'linking_new_wallet');
         }
         setView('pending-signature');
     });
     const handleMobileWalletClick = (walletConnector) => __awaiter(void 0, void 0, void 0, function* () {
-        setSelectedWalletConnector(walletConnector);
+        setSelectedWalletConnectorKey(walletConnector.key);
         onlyConnectUser({ walletConnector });
     });
     const handleInstalledExtensionClick = (walletConnector) => __awaiter(void 0, void 0, void 0, function* () {
-        setSelectedWalletConnector(walletConnector);
+        setSelectedWalletConnectorKey(walletConnector.key);
         setMultiWalletWidgetState('awaiting_signature', undefined, 'linking_new_wallet');
     });
     const handleUninstalledClick = (walletConnector) => __awaiter(void 0, void 0, void 0, function* () {
-        setSelectedWalletConnector(walletConnector);
+        setSelectedWalletConnectorKey(walletConnector.key);
         if (!walletConnector.canConnectViaQrCode) {
             setView('no-qr-not-installed');
         }
@@ -85,21 +86,22 @@ const useWalletItemActions = () => {
             setMultiWalletWidgetState('awaiting_signature', undefined, 'linking_new_wallet');
         }
         setShowAuthFlow(false);
-        setSelectedWalletConnector(walletConnector);
+        setSelectedWalletConnectorKey(walletConnector.key);
     });
     const openWallet = (walletKey, handlers) => {
+        var _a;
         const { openMobileWallet = handleMobileWalletClick, openCustodialWallet = handleCustodialWalletClick, openExtensionWallet = handleInstalledExtensionClick, } = handlers || {};
-        const wallet = wallets.find((wallet) => wallet.key === walletKey);
-        if (!wallet)
+        const walletConnector = (_a = walletConnectorOptions.find((wallet) => wallet.key === walletKey)) === null || _a === void 0 ? void 0 : _a.walletConnector;
+        if (!walletConnector)
             return;
         if (isMobile()) {
-            openMobileWallet(wallet.walletConnector);
+            openMobileWallet(walletConnector);
         }
-        else if (wallet.walletConnector.canConnectViaCustodialService) {
-            openCustodialWallet(wallet.walletConnector);
+        else if (walletConnector.canConnectViaCustodialService) {
+            openCustodialWallet(walletConnector);
         }
-        else if (wallet.isInstalledOnBrowser) {
-            openExtensionWallet(wallet.walletConnector);
+        else if (walletConnector.isInstalledOnBrowser()) {
+            openExtensionWallet(walletConnector);
         }
     };
     const handleWalletItemClick = (wallet) => __awaiter(void 0, void 0, void 0, function* () {

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

@@ -6,47 +6,47 @@ var _tslib = require('../../../../../_virtual/_tslib.cjs');
 var jsxRuntime = require('react/jsx-runtime');
 var React = require('react');
 var reactI18next = require('react-i18next');
+require('@dynamic-labs/utils');
+require('../../../context/DynamicContext/DynamicContext.cjs');
+require('@dynamic-labs/wallet-connector-core');
+require('../../../context/CaptchaContext/CaptchaContext.cjs');
+require('../../../context/ErrorContext/ErrorContext.cjs');
+require('../../../context/ViewContext/ViewContext.cjs');
 require('@dynamic-labs/sdk-api');
 require('../../../shared/logger.cjs');
 require('@dynamic-labs/iconic');
-require('@dynamic-labs/wallet-connector-core');
-require('../../../context/ViewContext/ViewContext.cjs');
 require('@dynamic-labs/wallet-book');
-require('@dynamic-labs/utils');
 require('../../constants/colors.cjs');
 require('../../../shared/utils/classes/storage/localStorage.cjs');
 require('viem');
 require('../../../shared/consts/index.cjs');
-require('../../../context/DynamicContext/DynamicContext.cjs');
 require('@dynamic-labs/multi-wallet');
-require('../../../components/ShadowDOM/ShadowDOM.cjs');
-require('../../../context/ThemeContext/ThemeContext.cjs');
-require('react-dom');
-require('react-focus-lock');
-require('../../../components/Transition/ZoomTransition/ZoomTransition.cjs');
-require('../../../components/Transition/SlideInUpTransition/SlideInUpTransition.cjs');
-require('../../../components/Transition/OpacityTransition/OpacityTransition.cjs');
-require('../../../config/ApiEndpoint.cjs');
-require('@dynamic-labs/rpc-providers');
-require('../useWallets/utils/verifyMagicIsSetup/verifyMagicIsSetup.cjs');
-require('../../../context/ErrorContext/ErrorContext.cjs');
 require('../../../context/AccessDeniedContext/AccessDeniedContext.cjs');
 require('../../../context/AccountExistsContext/AccountExistsContext.cjs');
-var useConfirmationModal = require('../useConfirmationModal/useConfirmationModal.cjs');
-require('../../../context/MockContext/MockContext.cjs');
-require('../../../context/CaptchaContext/CaptchaContext.cjs');
+require('../../../config/ApiEndpoint.cjs');
 require('../../../context/EmailVerificationContext/EmailVerificationContext.cjs');
+var useConfirmationModal = require('../useConfirmationModal/useConfirmationModal.cjs');
+require('../../../context/ThemeContext/ThemeContext.cjs');
 require('@dynamic-labs/types');
+require('yup');
+require('../../../context/MockContext/MockContext.cjs');
 require('../useUserUpdateRequest/useUpdateUser/useUpdateUser.cjs');
 require('../../../context/UserFieldEditorContext/UserFieldEditorContext.cjs');
-require('yup');
-require('../../../components/IconButton/IconButton.cjs');
+require('@dynamic-labs/rpc-providers');
+require('../useWalletConnectorOptions/utils/verifyMagicIsSetup/verifyMagicIsSetup.cjs');
 require('../../../components/Alert/Alert.cjs');
+require('react-dom');
+require('../../../components/ShadowDOM/ShadowDOM.cjs');
+require('../../../components/IconButton/IconButton.cjs');
+require('../../../components/InlineWidget/InlineWidget.cjs');
+require('../../../components/MenuList/Dropdown/Dropdown.cjs');
+require('../../../components/Transition/ZoomTransition/ZoomTransition.cjs');
+require('../../../components/Transition/SlideInUpTransition/SlideInUpTransition.cjs');
+require('../../../components/Transition/OpacityTransition/OpacityTransition.cjs');
 require('../../../components/Popper/Popper/Popper.cjs');
 require('../../../components/Popper/PopperContext/PopperContext.cjs');
+require('react-focus-lock');
 require('formik');
-require('../../../components/InlineWidget/InlineWidget.cjs');
-require('../../../components/MenuList/Dropdown/Dropdown.cjs');
 require('../../../components/OverlayCard/OverlayCard.context.cjs');
 require('../../../context/FooterAnimationContext/index.cjs');
 require('../../../context/QrCodeContext/QrCodeContext.cjs');
@@ -54,8 +54,11 @@ require('../../../context/WalletGroupContext/WalletGroupContext.cjs');
 require('../../../widgets/DynamicWidget/components/DynamicWidgetHeader/DynamicWidgetHeader.cjs');
 require('qrcode');
 require('../../../context/LoadingContext/LoadingContext.cjs');
+require('i18next');
 require('../../../widgets/DynamicWidget/context/DynamicWidgetContext.cjs');
 require('../../../components/UserProfile/parts/UserProfileField/components/VerifiedEmailIcon/VerifiedEmailIcon.cjs');
+require('@dynamic-labs/viem-utils');
+require('../../../widgets/DynamicWidget/views/ManagePasskeysWidgetView/PasskeyCard/PasskeyCard.cjs');
 var SignMessageConfirmationModal = require('../../../modals/SignMessageConfirmationModal/SignMessageConfirmationModal.cjs');
 var TransactionConfirmationModal = require('../../../modals/TransactionConfirmationModal/TransactionConfirmationModal.cjs');
 

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

@@ -2,47 +2,47 @@ import { __awaiter } from '../../../../../_virtual/_tslib.js';
 import { jsx } from 'react/jsx-runtime';
 import { useRef, useCallback, useMemo } from 'react';
 import { useTranslation } from 'react-i18next';
+import '@dynamic-labs/utils';
+import '../../../context/DynamicContext/DynamicContext.js';
+import '@dynamic-labs/wallet-connector-core';
+import '../../../context/CaptchaContext/CaptchaContext.js';
+import '../../../context/ErrorContext/ErrorContext.js';
+import '../../../context/ViewContext/ViewContext.js';
 import '@dynamic-labs/sdk-api';
 import '../../../shared/logger.js';
 import '@dynamic-labs/iconic';
-import '@dynamic-labs/wallet-connector-core';
-import '../../../context/ViewContext/ViewContext.js';
 import '@dynamic-labs/wallet-book';
-import '@dynamic-labs/utils';
 import '../../constants/colors.js';
 import '../../../shared/utils/classes/storage/localStorage.js';
 import 'viem';
 import '../../../shared/consts/index.js';
-import '../../../context/DynamicContext/DynamicContext.js';
 import '@dynamic-labs/multi-wallet';
-import '../../../components/ShadowDOM/ShadowDOM.js';
-import '../../../context/ThemeContext/ThemeContext.js';
-import 'react-dom';
-import 'react-focus-lock';
-import '../../../components/Transition/ZoomTransition/ZoomTransition.js';
-import '../../../components/Transition/SlideInUpTransition/SlideInUpTransition.js';
-import '../../../components/Transition/OpacityTransition/OpacityTransition.js';
-import '../../../config/ApiEndpoint.js';
-import '@dynamic-labs/rpc-providers';
-import '../useWallets/utils/verifyMagicIsSetup/verifyMagicIsSetup.js';
-import '../../../context/ErrorContext/ErrorContext.js';
 import '../../../context/AccessDeniedContext/AccessDeniedContext.js';
 import '../../../context/AccountExistsContext/AccountExistsContext.js';
-import { useConfirmationModal } from '../useConfirmationModal/useConfirmationModal.js';
-import '../../../context/MockContext/MockContext.js';
-import '../../../context/CaptchaContext/CaptchaContext.js';
+import '../../../config/ApiEndpoint.js';
 import '../../../context/EmailVerificationContext/EmailVerificationContext.js';
+import { useConfirmationModal } from '../useConfirmationModal/useConfirmationModal.js';
+import '../../../context/ThemeContext/ThemeContext.js';
 import '@dynamic-labs/types';
+import 'yup';
+import '../../../context/MockContext/MockContext.js';
 import '../useUserUpdateRequest/useUpdateUser/useUpdateUser.js';
 import '../../../context/UserFieldEditorContext/UserFieldEditorContext.js';
-import 'yup';
-import '../../../components/IconButton/IconButton.js';
+import '@dynamic-labs/rpc-providers';
+import '../useWalletConnectorOptions/utils/verifyMagicIsSetup/verifyMagicIsSetup.js';
 import '../../../components/Alert/Alert.js';
+import 'react-dom';
+import '../../../components/ShadowDOM/ShadowDOM.js';
+import '../../../components/IconButton/IconButton.js';
+import '../../../components/InlineWidget/InlineWidget.js';
+import '../../../components/MenuList/Dropdown/Dropdown.js';
+import '../../../components/Transition/ZoomTransition/ZoomTransition.js';
+import '../../../components/Transition/SlideInUpTransition/SlideInUpTransition.js';
+import '../../../components/Transition/OpacityTransition/OpacityTransition.js';
 import '../../../components/Popper/Popper/Popper.js';
 import '../../../components/Popper/PopperContext/PopperContext.js';
+import 'react-focus-lock';
 import 'formik';
-import '../../../components/InlineWidget/InlineWidget.js';
-import '../../../components/MenuList/Dropdown/Dropdown.js';
 import '../../../components/OverlayCard/OverlayCard.context.js';
 import '../../../context/FooterAnimationContext/index.js';
 import '../../../context/QrCodeContext/QrCodeContext.js';
@@ -50,8 +50,11 @@ import '../../../context/WalletGroupContext/WalletGroupContext.js';
 import '../../../widgets/DynamicWidget/components/DynamicWidgetHeader/DynamicWidgetHeader.js';
 import 'qrcode';
 import '../../../context/LoadingContext/LoadingContext.js';
+import 'i18next';
 import '../../../widgets/DynamicWidget/context/DynamicWidgetContext.js';
 import '../../../components/UserProfile/parts/UserProfileField/components/VerifiedEmailIcon/VerifiedEmailIcon.js';
+import '@dynamic-labs/viem-utils';
+import '../../../widgets/DynamicWidget/views/ManagePasskeysWidgetView/PasskeyCard/PasskeyCard.js';
 import { SignMessageConfirmationModal } from '../../../modals/SignMessageConfirmationModal/SignMessageConfirmationModal.js';
 import { TransactionConfirmationModal } from '../../../modals/TransactionConfirmationModal/TransactionConfirmationModal.js';
 

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

@@ -5,19 +5,21 @@ Object.defineProperty(exports, '__esModule', { value: true });
 var _tslib = require('../../../../../_virtual/_tslib.cjs');
 var React = require('react');
 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');
 require('../../../context/ViewContext/ViewContext.cjs');
 require('@dynamic-labs/wallet-book');
-require('@dynamic-labs/utils');
 require('../../constants/colors.cjs');
 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,20 +28,53 @@ 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* () {
         const connectedWalletsMap = {};
-        yield Promise.all(linkedWallets.map((wallet) => _tslib.__awaiter(void 0, void 0, void 0, function* () {
+        yield Promise.all(wallets.map((wallet) => _tslib.__awaiter(void 0, void 0, void 0, function* () {
             connectedWalletsMap[wallet.id] = yield isWalletConnected.isWalletConnected(wallet);
         })));
         setState(connectedWalletsMap);
-    }), [linkedWallets, setState]);
+    }), [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;
+        lastCallTimestamp.current = callTimestamp;
+        // getConnectedAccounts trigger accountChanged event for Phantom EVM wallets
+        // which causes a loop of calls to this function
+        if (diffFromLastCall < 1000) {
+            logger.logger.warn('computeConnectedStateForWallets: skipping due too many calls.');
+            return;
+        }
+        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,19 +1,21 @@
 import { __awaiter } from '../../../../../_virtual/_tslib.js';
-import { useReducer, useCallback } from 'react';
+import { useReducer, useRef, useCallback, useEffect } from 'react';
 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';
 import '../../../context/ViewContext/ViewContext.js';
 import '@dynamic-labs/wallet-book';
-import '@dynamic-labs/utils';
 import '../../constants/colors.js';
 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,20 +24,53 @@ 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* () {
         const connectedWalletsMap = {};
-        yield Promise.all(linkedWallets.map((wallet) => __awaiter(void 0, void 0, void 0, function* () {
+        yield Promise.all(wallets.map((wallet) => __awaiter(void 0, void 0, void 0, function* () {
             connectedWalletsMap[wallet.id] = yield isWalletConnected(wallet);
         })));
         setState(connectedWalletsMap);
-    }), [linkedWallets, setState]);
+    }), [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;
+        lastCallTimestamp.current = callTimestamp;
+        // getConnectedAccounts trigger accountChanged event for Phantom EVM wallets
+        // which causes a loop of calls to this function
+        if (diffFromLastCall < 1000) {
+            logger.warn('computeConnectedStateForWallets: skipping due too many calls.');
+            return;
+        }
+        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,
     };