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

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

@@ -1,3 +1,4 @@
+import { __awaiter } from '../../../../../../../_virtual/_tslib.js';
 import { isSmartWalletConnector } from '@dynamic-labs/wallet-connector-core';
 import { findWallet } from '../findWallet/findWallet.js';
 
@@ -6,16 +7,16 @@ import { findWallet } from '../findWallet/findWallet.js';
 const findOwner = (account, verifiedCredentials) => verifiedCredentials.find((credential) => credential.id === account.signerRefId);
 const findSmartWallet = (account, verifiedCredentials) => verifiedCredentials.find((credential) => credential.signerRefId === account.id);
 const isOwnerOfASmartWallet = (account, verifiedCredentials) => Boolean(findSmartWallet(account, verifiedCredentials));
-const initializeSmartWallet = ({ account, verifiedCredentials, walletOptions, }) => {
+const initializeSmartWallet = ({ account, verifiedCredentials, walletConnectorOptions, }) => __awaiter(void 0, void 0, void 0, function* () {
     const owner = findOwner(account, verifiedCredentials);
     if (!owner) {
         throw new Error('could not find associated eoa account for smart wallet');
     }
-    const ownerWallet = findWallet(owner, walletOptions);
+    const ownerWallet = findWallet(owner, walletConnectorOptions);
     if (!ownerWallet) {
         throw new Error('could not find owner wallet from wallet options');
     }
-    const smartWallet = findWallet(account, walletOptions);
+    const smartWallet = findWallet(account, walletConnectorOptions);
     if (!smartWallet) {
         throw new Error('could not find smart wallet from wallet options');
     }
@@ -23,7 +24,7 @@ const initializeSmartWallet = ({ account, verifiedCredentials, walletOptions, })
     if (!isSmartWalletConnector(connector)) {
         throw new Error('could not initialize smart wallet');
     }
-    connector.setEoaConnector(ownerWallet.walletConnector);
-};
+    yield connector.setEoaConnector(ownerWallet.walletConnector);
+});
 
 export { findOwner, findSmartWallet, initializeSmartWallet, isOwnerOfASmartWallet };

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/useWalletItemActions/useWalletItemActions.cjs

@@ -23,15 +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, setSelectedWalletConnectorKey, 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();
@@ -93,18 +93,19 @@ const useWalletItemActions = () => {
         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,15 +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, setSelectedWalletConnectorKey, 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();
@@ -89,18 +89,19 @@ const useWalletItemActions = () => {
         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('../../constants/colors.cjs');
 require('../../../shared/utils/classes/storage/localStorage.cjs');
 require('viem');
-require('@dynamic-labs/utils');
 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 '../../constants/colors.js';
 import '../../../shared/utils/classes/storage/localStorage.js';
 import 'viem';
-import '@dynamic-labs/utils';
 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

@@ -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'];
 };