@dynamic-labs/sdk-react-core 2.2.1 → 2.2.3

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

@@ -78,3 +78,4 @@ export * from './storeExpiresAt';
 export * from './getExpiresAt';
 export * from './getSupportedCountriesForVerificationFromProjectSettings';
 export * from './getDefaultCountriesIfEmpty';
+export * from './logVerboseTroubleshootingMessage';

package/src/lib/utils/functions/isPhoneNumberProviderEnabled/index.d.ts

@@ -0,0 +1 @@
+export * from './isPhoneNumberProviderEnabled';

package/src/lib/utils/functions/logVerboseTroubleshootingMessage/index.d.ts

@@ -0,0 +1 @@
+export * from './logVerboseTroubleshootingMessage';

package/src/lib/utils/functions/logVerboseTroubleshootingMessage/logVerboseTroubleshootingMessage.cjs

@@ -0,0 +1,27 @@
+'use client'
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+require('@dynamic-labs/sdk-api-core');
+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('react');
+require('@dynamic-labs/wallet-book');
+require('../../constants/colors.cjs');
+require('../../constants/values.cjs');
+require('../../../shared/utils/classes/storage/localStorage.cjs');
+require('@dynamic-labs/utils');
+require('../../../shared/consts/index.cjs');
+
+// use this in conjuction with dynamic_enableTroubleshootMode to see
+// more verbose logging to help troubleshoot issues
+// i.e: window.dynamic_enableTroubleshootMode = true
+const logVerboseTroubleshootingMessage = (message, ...args) => {
+    logger.logger.log(-1, message, ...args);
+};
+
+exports.logVerboseTroubleshootingMessage = logVerboseTroubleshootingMessage;

package/src/lib/utils/functions/logVerboseTroubleshootingMessage/logVerboseTroubleshootingMessage.d.ts

@@ -0,0 +1 @@
+export declare const logVerboseTroubleshootingMessage: (message: string | Error | unknown, ...args: any[]) => void;

package/src/lib/utils/functions/logVerboseTroubleshootingMessage/logVerboseTroubleshootingMessage.js

@@ -0,0 +1,23 @@
+'use client'
+import '@dynamic-labs/sdk-api-core';
+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 'react';
+import '@dynamic-labs/wallet-book';
+import '../../constants/colors.js';
+import '../../constants/values.js';
+import '../../../shared/utils/classes/storage/localStorage.js';
+import '@dynamic-labs/utils';
+import '../../../shared/consts/index.js';
+
+// use this in conjuction with dynamic_enableTroubleshootMode to see
+// more verbose logging to help troubleshoot issues
+// i.e: window.dynamic_enableTroubleshootMode = true
+const logVerboseTroubleshootingMessage = (message, ...args) => {
+    logger.log(-1, message, ...args);
+};
+
+export { logVerboseTroubleshootingMessage };

package/src/lib/utils/hooks/events/useDynamicEvents/useDynamicEvents.d.ts

@@ -2,7 +2,7 @@ import { DynamicEvents } from '../../../../events';
 import { EventArgs } from '../types';
 type DynamicEventListener<E extends keyof DynamicEvents> = (...args: EventArgs<DynamicEvents, E>) => void;
 /** Allows us to subscribe to all dynamicEvents with a hook, even the internal ones */
-export declare const useInternalDynamicEvents: <E extends keyof import("../../../../events/auth").AuthEvents | keyof import("../../../../events/ui").UIEvents | keyof import("../../../../events/otp").OTPEvents | keyof import("../../../../events/wallets").WalletEvents | keyof import("../../../../events/passkey").PasskeyEvents | "farcasterConnectCancelled" | keyof import("../../../../events/embeddedWallet").EmbeddedWalletEvents>(event: E, listener: DynamicEventListener<E>) => void;
+export declare const useInternalDynamicEvents: <E extends keyof import("../../../../events/auth").AuthEvents | keyof import("../../../../events/ui").UIEvents | keyof import("../../../../events/otp").OTPEvents | keyof import("../../../../events/wallets").WalletEvents | keyof import("../../../../events/passkey").PasskeyEvents | "farcasterConnectCancelled" | keyof import("../../../../events/embeddedWallet").EmbeddedWalletEvents | "triggerComputePrimaryWalletMultiWalletStateFromAccounts">(event: E, listener: DynamicEventListener<E>) => void;
 /** Allows subscribing to dynamic events directly inside components with a hook */
 export declare const useDynamicEvents: <E extends "logout" | "emailVerificationResult" | "walletAdded" | "embeddedWalletCreated">(event: E, listener: DynamicEventListener<E>) => void;
 export {};

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

@@ -46,6 +46,9 @@ const useHandleUnlinkWallet = ({ verifiedCredentials, environmentId, primaryWall
             return;
         yield wallets.unlinkWallet({
             environmentId,
+            onSuccess: () => {
+                removedWalletsIds.current.push(walletId);
+            },
             primaryWalletId: currentPrimaryWalletId,
             walletId,
         });
@@ -55,7 +58,6 @@ const useHandleUnlinkWallet = ({ verifiedCredentials, environmentId, primaryWall
         if (numberOfLinkedWallets === 1) {
             yield (wallet === null || wallet === void 0 ? void 0 : wallet.connector.endSession());
         }
-        removedWalletsIds.current.push(walletId);
     }), [
         primaryWalletId,
         environmentId,

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

@@ -42,6 +42,9 @@ const useHandleUnlinkWallet = ({ verifiedCredentials, environmentId, primaryWall
             return;
         yield unlinkWallet({
             environmentId,
+            onSuccess: () => {
+                removedWalletsIds.current.push(walletId);
+            },
             primaryWalletId: currentPrimaryWalletId,
             walletId,
         });
@@ -51,7 +54,6 @@ const useHandleUnlinkWallet = ({ verifiedCredentials, environmentId, primaryWall
         if (numberOfLinkedWallets === 1) {
             yield (wallet === null || wallet === void 0 ? void 0 : wallet.connector.endSession());
         }
-        removedWalletsIds.current.push(walletId);
     }), [
         primaryWalletId,
         environmentId,

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

@@ -26,7 +26,7 @@ require('@dynamic-labs/store');
 require('../../../locale/locale.cjs');
 var user = require('../../../data/api/user/user.cjs');
 require('../../../context/DynamicContext/DynamicContext.cjs');
-require('../../../events/dynamicEvents.cjs');
+var dynamicEvents = require('../../../events/dynamicEvents.cjs');
 require('../../../context/CaptchaContext/CaptchaContext.cjs');
 require('../../../context/ErrorContext/ErrorContext.cjs');
 require('../../../context/AccessDeniedContext/AccessDeniedContext.cjs');
@@ -79,7 +79,7 @@ require('../../../widgets/DynamicWidget/views/ManagePasskeysWidgetView/PasskeyCa
 var useInternalDynamicContext = require('../../../context/DynamicContext/useDynamicContext/useInternalDynamicContext.cjs');
 
 const useMergeUserAccounts = () => {
-    const { environmentId, setShowAuthFlow } = useInternalDynamicContext.useInternalDynamicContext();
+    const { environmentId, setShowAuthFlow, selectedWalletConnector } = useInternalDynamicContext.useInternalDynamicContext();
     const { addedWalletsIds } = UserWalletsContext.useInternalUserWallets();
     const mergeUserAccounts = (mergeConflictResolutions) => _tslib.__awaiter(void 0, void 0, void 0, function* () {
         const user$1 = yield user.verifyMergeUsers(environmentId, mergeConflictResolutions);
@@ -87,6 +87,10 @@ const useMergeUserAccounts = () => {
         if (walletId) {
             addedWalletsIds.current.push(walletId);
         }
+        const accounts = yield (selectedWalletConnector === null || selectedWalletConnector === void 0 ? void 0 : selectedWalletConnector.getConnectedAccounts());
+        if (accounts === null || accounts === void 0 ? void 0 : accounts.length) {
+            dynamicEvents.dynamicEvents.emit('triggerComputePrimaryWalletMultiWalletStateFromAccounts', { accounts });
+        }
         setShowAuthFlow(false);
     });
     return {

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

@@ -22,7 +22,7 @@ import '@dynamic-labs/store';
 import '../../../locale/locale.js';
 import { verifyMergeUsers } from '../../../data/api/user/user.js';
 import '../../../context/DynamicContext/DynamicContext.js';
-import '../../../events/dynamicEvents.js';
+import { dynamicEvents } from '../../../events/dynamicEvents.js';
 import '../../../context/CaptchaContext/CaptchaContext.js';
 import '../../../context/ErrorContext/ErrorContext.js';
 import '../../../context/AccessDeniedContext/AccessDeniedContext.js';
@@ -75,7 +75,7 @@ import '../../../widgets/DynamicWidget/views/ManagePasskeysWidgetView/PasskeyCar
 import { useInternalDynamicContext } from '../../../context/DynamicContext/useDynamicContext/useInternalDynamicContext.js';
 
 const useMergeUserAccounts = () => {
-    const { environmentId, setShowAuthFlow } = useInternalDynamicContext();
+    const { environmentId, setShowAuthFlow, selectedWalletConnector } = useInternalDynamicContext();
     const { addedWalletsIds } = useInternalUserWallets();
     const mergeUserAccounts = (mergeConflictResolutions) => __awaiter(void 0, void 0, void 0, function* () {
         const user = yield verifyMergeUsers(environmentId, mergeConflictResolutions);
@@ -83,6 +83,10 @@ const useMergeUserAccounts = () => {
         if (walletId) {
             addedWalletsIds.current.push(walletId);
         }
+        const accounts = yield (selectedWalletConnector === null || selectedWalletConnector === void 0 ? void 0 : selectedWalletConnector.getConnectedAccounts());
+        if (accounts === null || accounts === void 0 ? void 0 : accounts.length) {
+            dynamicEvents.emit('triggerComputePrimaryWalletMultiWalletStateFromAccounts', { accounts });
+        }
         setShowAuthFlow(false);
     });
     return {

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

@@ -107,7 +107,7 @@ const useSocialAccounts = ({ sessionTimeout } = {
     }, [user === null || user === void 0 ? void 0 : user.verifiedCredentials]);
     const checkValidOAuthLinking = React.useCallback((provider) => {
         if (!isSocialKycEnabled.isSocialKycEnabled(projectSettings)) {
-            handleError(provider, types.SocialOAuthErrorCode.SOCIAL_LINKING_NOT_ENABLED, 'Social linking is not enabled on the dashboard', { raiseAuthFailure: false });
+            handleError(provider, types.SocialOAuthErrorCode.SOCIAL_LINKING_NOT_ENABLED, 'Social linking is not enabled in Information Capture on the dashboard', { raiseAuthFailure: false });
             return false;
         }
         const verifiedCredential = verifiedOAuthCredentialsMap[provider];
@@ -118,7 +118,7 @@ const useSocialAccounts = ({ sessionTimeout } = {
         const oauthProviders = index.getEnabledOAuthProviders(projectSettings === null || projectSettings === void 0 ? void 0 : projectSettings.providers);
         const oauthProvider = oauthProviders.find((p) => p.provider === provider);
         if (!oauthProvider) {
-            handleError(provider, types.SocialOAuthErrorCode.PROVIDER_NOT_ENABLED, `Provider is not enabled on the dashboard: ${provider}`, { raiseAuthFailure: false });
+            handleError(provider, types.SocialOAuthErrorCode.PROVIDER_NOT_ENABLED, `Social linking provider is not enabled in Information Capture on the dashboard: ${provider}`, { raiseAuthFailure: false });
             return false;
         }
         return true;

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

@@ -103,7 +103,7 @@ const useSocialAccounts = ({ sessionTimeout } = {
     }, [user === null || user === void 0 ? void 0 : user.verifiedCredentials]);
     const checkValidOAuthLinking = useCallback((provider) => {
         if (!isSocialKycEnabled(projectSettings)) {
-            handleError(provider, SocialOAuthErrorCode.SOCIAL_LINKING_NOT_ENABLED, 'Social linking is not enabled on the dashboard', { raiseAuthFailure: false });
+            handleError(provider, SocialOAuthErrorCode.SOCIAL_LINKING_NOT_ENABLED, 'Social linking is not enabled in Information Capture on the dashboard', { raiseAuthFailure: false });
             return false;
         }
         const verifiedCredential = verifiedOAuthCredentialsMap[provider];
@@ -114,7 +114,7 @@ const useSocialAccounts = ({ sessionTimeout } = {
         const oauthProviders = getEnabledOAuthProviders(projectSettings === null || projectSettings === void 0 ? void 0 : projectSettings.providers);
         const oauthProvider = oauthProviders.find((p) => p.provider === provider);
         if (!oauthProvider) {
-            handleError(provider, SocialOAuthErrorCode.PROVIDER_NOT_ENABLED, `Provider is not enabled on the dashboard: ${provider}`, { raiseAuthFailure: false });
+            handleError(provider, SocialOAuthErrorCode.PROVIDER_NOT_ENABLED, `Social linking provider is not enabled in Information Capture on the dashboard: ${provider}`, { raiseAuthFailure: false });
             return false;
         }
         return true;

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

@@ -26,6 +26,7 @@ require('viem/chains');
 require('../../../config/ApiEndpoint.cjs');
 require('@dynamic-labs/store');
 require('../../../locale/locale.cjs');
+var logVerboseTroubleshootingMessage = require('../../functions/logVerboseTroubleshootingMessage/logVerboseTroubleshootingMessage.cjs');
 var useWalletsConnectionState = require('../useWalletsConnectionState/useWalletsConnectionState.cjs');
 var reconnectSocialWallet = require('./reconnectSocialWallet.cjs');
 var createLinkedWalletsFromWalletOptions = require('./utils/createLinkedWalletsFromWalletOptions/createLinkedWalletsFromWalletOptions.cjs');
@@ -43,6 +44,7 @@ const useWalletConnectors = ({ authMode, connectedWallets, walletConnectorOption
             walletConnectorOptions,
         });
     }, [user, primaryWalletId, walletConnectorOptions]);
+    logVerboseTroubleshootingMessage.logVerboseTroubleshootingMessage('linkedWallets', linkedWallets);
     const walletsBasedOnAuthMode = React.useMemo(() => {
         // Before signing the first message we are using connected wallets list
         // This is because we want the first connected wallet to have events applied by useWalletEventListeners
@@ -62,6 +64,7 @@ const useWalletConnectors = ({ authMode, connectedWallets, walletConnectorOption
         }
         return connectedWallets !== null && connectedWallets !== void 0 ? connectedWallets : [];
     }, [authMode, connectedWallets, linkedWallets, user]);
+    logVerboseTroubleshootingMessage.logVerboseTroubleshootingMessage('walletsBasedOnAuthMode', walletsBasedOnAuthMode);
     /**
      * This useEffect is temporary.
      * While the wallet connectors don't use the event emitter, we need to manually
@@ -74,16 +77,14 @@ const useWalletConnectors = ({ authMode, connectedWallets, walletConnectorOption
     }), [walletsBasedOnAuthMode]);
     const { connectedWalletsMap, didConnectedStateLoad } = useWalletsConnectionState.useWalletsConnectionState(walletsBasedOnAuthMode);
     const wallets = React.useMemo(() => walletsBasedOnAuthMode.map((wallet) => (Object.assign(Object.assign({}, wallet), { connected: Boolean(connectedWalletsMap[getWalletIdentifier.getWalletIdentifier(wallet)]) }))), [connectedWalletsMap, walletsBasedOnAuthMode]);
+    logVerboseTroubleshootingMessage.logVerboseTroubleshootingMessage('wallets', wallets);
+    logVerboseTroubleshootingMessage.logVerboseTroubleshootingMessage('didConnectedStateLoad', didConnectedStateLoad);
     const { setUserWallets } = UserWalletsContext.useInternalUserWallets();
     // Keep userWallets in sync whenever linkedWallets changes
     React.useEffect(() => {
-        // we don't want to set the user wallets until their connected states have been computed
-        // but that doesn't matter if the wallets list is empty, and if we return early when
-        // the wallets list is empty, we'll never set the user wallets correctly after logout
-        if (!didConnectedStateLoad.current && wallets.length)
-            return;
+        logVerboseTroubleshootingMessage.logVerboseTroubleshootingMessage('[useWalletConnectors] will call setUserWallets', wallets);
         setUserWallets((userWallets) => updateUserWalletsFromLinkedWallets.updateUserWalletsFromLinkedWallets(userWallets, wallets));
-    }, [didConnectedStateLoad, setUserWallets, wallets]);
+    }, [setUserWallets, wallets]);
     const primaryWallet = React.useMemo(() => { var _a; return (_a = wallets.find((wallet) => wallet.id === primaryWalletId)) !== null && _a !== void 0 ? _a : null; }, [primaryWalletId, wallets]);
     const secondaryWallets = React.useMemo(() => canHaveMultipleWalletsConnected
         ? wallets.filter((wallet) => wallet.id !== primaryWalletId)

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

@@ -22,6 +22,7 @@ import 'viem/chains';
 import '../../../config/ApiEndpoint.js';
 import '@dynamic-labs/store';
 import '../../../locale/locale.js';
+import { logVerboseTroubleshootingMessage } from '../../functions/logVerboseTroubleshootingMessage/logVerboseTroubleshootingMessage.js';
 import { useWalletsConnectionState } from '../useWalletsConnectionState/useWalletsConnectionState.js';
 import { reconnectSocialWallet } from './reconnectSocialWallet.js';
 import { createLinkedWalletsFromWalletOptions } from './utils/createLinkedWalletsFromWalletOptions/createLinkedWalletsFromWalletOptions.js';
@@ -39,6 +40,7 @@ const useWalletConnectors = ({ authMode, connectedWallets, walletConnectorOption
             walletConnectorOptions,
         });
     }, [user, primaryWalletId, walletConnectorOptions]);
+    logVerboseTroubleshootingMessage('linkedWallets', linkedWallets);
     const walletsBasedOnAuthMode = useMemo(() => {
         // Before signing the first message we are using connected wallets list
         // This is because we want the first connected wallet to have events applied by useWalletEventListeners
@@ -58,6 +60,7 @@ const useWalletConnectors = ({ authMode, connectedWallets, walletConnectorOption
         }
         return connectedWallets !== null && connectedWallets !== void 0 ? connectedWallets : [];
     }, [authMode, connectedWallets, linkedWallets, user]);
+    logVerboseTroubleshootingMessage('walletsBasedOnAuthMode', walletsBasedOnAuthMode);
     /**
      * This useEffect is temporary.
      * While the wallet connectors don't use the event emitter, we need to manually
@@ -70,16 +73,14 @@ const useWalletConnectors = ({ authMode, connectedWallets, walletConnectorOption
     }), [walletsBasedOnAuthMode]);
     const { connectedWalletsMap, didConnectedStateLoad } = useWalletsConnectionState(walletsBasedOnAuthMode);
     const wallets = useMemo(() => walletsBasedOnAuthMode.map((wallet) => (Object.assign(Object.assign({}, wallet), { connected: Boolean(connectedWalletsMap[getWalletIdentifier(wallet)]) }))), [connectedWalletsMap, walletsBasedOnAuthMode]);
+    logVerboseTroubleshootingMessage('wallets', wallets);
+    logVerboseTroubleshootingMessage('didConnectedStateLoad', didConnectedStateLoad);
     const { setUserWallets } = useInternalUserWallets();
     // Keep userWallets in sync whenever linkedWallets changes
     useEffect(() => {
-        // we don't want to set the user wallets until their connected states have been computed
-        // but that doesn't matter if the wallets list is empty, and if we return early when
-        // the wallets list is empty, we'll never set the user wallets correctly after logout
-        if (!didConnectedStateLoad.current && wallets.length)
-            return;
+        logVerboseTroubleshootingMessage('[useWalletConnectors] will call setUserWallets', wallets);
         setUserWallets((userWallets) => updateUserWalletsFromLinkedWallets(userWallets, wallets));
-    }, [didConnectedStateLoad, setUserWallets, wallets]);
+    }, [setUserWallets, wallets]);
     const primaryWallet = useMemo(() => { var _a; return (_a = wallets.find((wallet) => wallet.id === primaryWalletId)) !== null && _a !== void 0 ? _a : null; }, [primaryWalletId, wallets]);
     const secondaryWallets = useMemo(() => canHaveMultipleWalletsConnected
         ? wallets.filter((wallet) => wallet.id !== primaryWalletId)

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

@@ -17,7 +17,7 @@ require('../../constants/values.cjs');
 require('../../../shared/utils/classes/storage/localStorage.cjs');
 require('@dynamic-labs/utils');
 require('../../../shared/consts/index.cjs');
-require('../../../events/dynamicEvents.cjs');
+var useDynamicEvents = require('../events/useDynamicEvents/useDynamicEvents.cjs');
 var useWalletConnectorEvent = require('../events/useWalletConnectorEvent/useWalletConnectorEvent.cjs');
 
 const useWalletEventListeners = ({ disconnectWallet, handleLogOut, multiWallet, multiWalletWidgetState, primaryWallet, secondaryWallets, selectedWalletConnector, selectedWalletWithAction, setSelectedWalletConnectorKey, setSelectedWalletWithAction, setMultiWalletWidgetState, user, setPrimaryWalletId, authMode, refreshConnectedWallet, }) => {
@@ -32,10 +32,29 @@ const useWalletEventListeners = ({ disconnectWallet, handleLogOut, multiWallet,
         }
         refreshConnectedWallet(primaryWallet.id, primaryWallet.connector);
     });
-    useWalletConnectorEvent.useWalletConnectorEvent(primaryWallet === null || primaryWallet === void 0 ? void 0 : primaryWallet.connector, 'accountChange', ({ accounts }) => {
-        logger.logger.debug('primary wallet account change', {
-            accounts,
-        });
+    const handleAccountChangeWhenAwaitingAccountSwitch = React.useCallback((isPrimaryWallet, newAddress) => {
+        const linkedSecondaryWallet = secondaryWallets.find((wallet) => walletConnectorCore.isSameAddress(wallet.address, newAddress, wallet.chain));
+        // this means the user is linking a new account, so we need proof of ownership...
+        if (!linkedSecondaryWallet) {
+            setMultiWalletWidgetState('awaiting_signature', undefined, 'linking_new_wallet');
+            if (isPrimaryWallet && primaryWallet) {
+                setSelectedWalletConnectorKey(primaryWallet.connector.key);
+            }
+            return;
+        }
+        // ...otherwise, the user is switching primary accounts betweeen the same wallet
+        setSelectedWalletWithAction(null);
+        setPrimaryWalletId(linkedSecondaryWallet.id);
+        setMultiWalletWidgetState('idle');
+    }, [
+        setMultiWalletWidgetState,
+        primaryWallet,
+        secondaryWallets,
+        setSelectedWalletConnectorKey,
+        setSelectedWalletWithAction,
+        setPrimaryWalletId,
+    ]);
+    const calculatePrimaryWalletMultiWalletStateFromAccounts = React.useCallback(({ accounts }) => {
         // change the api here
         if (!primaryWallet)
             return;
@@ -74,6 +93,26 @@ const useWalletEventListeners = ({ disconnectWallet, handleLogOut, multiWallet,
             logger.logger.error(`Unexpected multiWalletWidgetState (${multiWalletWidgetState}) and onAccountChange combination. Resetting state to idle.`);
             setMultiWalletWidgetState('idle');
         }
+    }, [
+        authMode,
+        handleAccountChangeWhenAwaitingAccountSwitch,
+        multiWallet,
+        multiWalletWidgetState,
+        primaryWallet,
+        refreshConnectedWallet,
+        secondaryWallets,
+        setMultiWalletWidgetState,
+        setPrimaryWalletId,
+        setSelectedWalletConnectorKey,
+        setSelectedWalletWithAction,
+        user,
+    ]);
+    useDynamicEvents.useInternalDynamicEvents('triggerComputePrimaryWalletMultiWalletStateFromAccounts', calculatePrimaryWalletMultiWalletStateFromAccounts);
+    useWalletConnectorEvent.useWalletConnectorEvent(primaryWallet === null || primaryWallet === void 0 ? void 0 : primaryWallet.connector, 'accountChange', ({ accounts }) => {
+        logger.logger.debug('primary wallet account change', {
+            accounts,
+        });
+        calculatePrimaryWalletMultiWalletStateFromAccounts({ accounts });
     });
     const uniqueNonPrimaryWallets = React.useMemo(() => {
         const primaryConnector = primaryWallet === null || primaryWallet === void 0 ? void 0 : primaryWallet.connector;
@@ -117,28 +156,6 @@ const useWalletEventListeners = ({ disconnectWallet, handleLogOut, multiWallet,
             }
         }
     });
-    const handleAccountChangeWhenAwaitingAccountSwitch = React.useCallback((isPrimaryWallet, newAddress) => {
-        const linkedSecondaryWallet = secondaryWallets.find((wallet) => walletConnectorCore.isSameAddress(wallet.address, newAddress, wallet.chain));
-        // this means the user is linking a new account, so we need proof of ownership...
-        if (!linkedSecondaryWallet) {
-            setMultiWalletWidgetState('awaiting_signature', undefined, 'linking_new_wallet');
-            if (isPrimaryWallet && primaryWallet) {
-                setSelectedWalletConnectorKey(primaryWallet.connector.key);
-            }
-            return;
-        }
-        // ...otherwise, the user is switching primary accounts betweeen the same wallet
-        setSelectedWalletWithAction(null);
-        setPrimaryWalletId(linkedSecondaryWallet.id);
-        setMultiWalletWidgetState('idle');
-    }, [
-        setMultiWalletWidgetState,
-        primaryWallet,
-        secondaryWallets,
-        setSelectedWalletConnectorKey,
-        setSelectedWalletWithAction,
-        setPrimaryWalletId,
-    ]);
 };
 
 exports.useWalletEventListeners = useWalletEventListeners;

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

@@ -1,6 +1,6 @@
 'use client'
 import { __awaiter } from '../../../../../_virtual/_tslib.js';
-import { useMemo, useCallback } from 'react';
+import { useCallback, useMemo } from 'react';
 import { isSameAddress } from '@dynamic-labs/wallet-connector-core';
 import '@dynamic-labs/sdk-api-core';
 import { logger } from '../../../shared/logger.js';
@@ -13,7 +13,7 @@ import '../../constants/values.js';
 import '../../../shared/utils/classes/storage/localStorage.js';
 import '@dynamic-labs/utils';
 import '../../../shared/consts/index.js';
-import '../../../events/dynamicEvents.js';
+import { useInternalDynamicEvents } from '../events/useDynamicEvents/useDynamicEvents.js';
 import { useWalletConnectorEvent } from '../events/useWalletConnectorEvent/useWalletConnectorEvent.js';
 
 const useWalletEventListeners = ({ disconnectWallet, handleLogOut, multiWallet, multiWalletWidgetState, primaryWallet, secondaryWallets, selectedWalletConnector, selectedWalletWithAction, setSelectedWalletConnectorKey, setSelectedWalletWithAction, setMultiWalletWidgetState, user, setPrimaryWalletId, authMode, refreshConnectedWallet, }) => {
@@ -28,10 +28,29 @@ const useWalletEventListeners = ({ disconnectWallet, handleLogOut, multiWallet,
         }
         refreshConnectedWallet(primaryWallet.id, primaryWallet.connector);
     });
-    useWalletConnectorEvent(primaryWallet === null || primaryWallet === void 0 ? void 0 : primaryWallet.connector, 'accountChange', ({ accounts }) => {
-        logger.debug('primary wallet account change', {
-            accounts,
-        });
+    const handleAccountChangeWhenAwaitingAccountSwitch = useCallback((isPrimaryWallet, newAddress) => {
+        const linkedSecondaryWallet = secondaryWallets.find((wallet) => isSameAddress(wallet.address, newAddress, wallet.chain));
+        // this means the user is linking a new account, so we need proof of ownership...
+        if (!linkedSecondaryWallet) {
+            setMultiWalletWidgetState('awaiting_signature', undefined, 'linking_new_wallet');
+            if (isPrimaryWallet && primaryWallet) {
+                setSelectedWalletConnectorKey(primaryWallet.connector.key);
+            }
+            return;
+        }
+        // ...otherwise, the user is switching primary accounts betweeen the same wallet
+        setSelectedWalletWithAction(null);
+        setPrimaryWalletId(linkedSecondaryWallet.id);
+        setMultiWalletWidgetState('idle');
+    }, [
+        setMultiWalletWidgetState,
+        primaryWallet,
+        secondaryWallets,
+        setSelectedWalletConnectorKey,
+        setSelectedWalletWithAction,
+        setPrimaryWalletId,
+    ]);
+    const calculatePrimaryWalletMultiWalletStateFromAccounts = useCallback(({ accounts }) => {
         // change the api here
         if (!primaryWallet)
             return;
@@ -70,6 +89,26 @@ const useWalletEventListeners = ({ disconnectWallet, handleLogOut, multiWallet,
             logger.error(`Unexpected multiWalletWidgetState (${multiWalletWidgetState}) and onAccountChange combination. Resetting state to idle.`);
             setMultiWalletWidgetState('idle');
         }
+    }, [
+        authMode,
+        handleAccountChangeWhenAwaitingAccountSwitch,
+        multiWallet,
+        multiWalletWidgetState,
+        primaryWallet,
+        refreshConnectedWallet,
+        secondaryWallets,
+        setMultiWalletWidgetState,
+        setPrimaryWalletId,
+        setSelectedWalletConnectorKey,
+        setSelectedWalletWithAction,
+        user,
+    ]);
+    useInternalDynamicEvents('triggerComputePrimaryWalletMultiWalletStateFromAccounts', calculatePrimaryWalletMultiWalletStateFromAccounts);
+    useWalletConnectorEvent(primaryWallet === null || primaryWallet === void 0 ? void 0 : primaryWallet.connector, 'accountChange', ({ accounts }) => {
+        logger.debug('primary wallet account change', {
+            accounts,
+        });
+        calculatePrimaryWalletMultiWalletStateFromAccounts({ accounts });
     });
     const uniqueNonPrimaryWallets = useMemo(() => {
         const primaryConnector = primaryWallet === null || primaryWallet === void 0 ? void 0 : primaryWallet.connector;
@@ -113,28 +152,6 @@ const useWalletEventListeners = ({ disconnectWallet, handleLogOut, multiWallet,
             }
         }
     });
-    const handleAccountChangeWhenAwaitingAccountSwitch = useCallback((isPrimaryWallet, newAddress) => {
-        const linkedSecondaryWallet = secondaryWallets.find((wallet) => isSameAddress(wallet.address, newAddress, wallet.chain));
-        // this means the user is linking a new account, so we need proof of ownership...
-        if (!linkedSecondaryWallet) {
-            setMultiWalletWidgetState('awaiting_signature', undefined, 'linking_new_wallet');
-            if (isPrimaryWallet && primaryWallet) {
-                setSelectedWalletConnectorKey(primaryWallet.connector.key);
-            }
-            return;
-        }
-        // ...otherwise, the user is switching primary accounts betweeen the same wallet
-        setSelectedWalletWithAction(null);
-        setPrimaryWalletId(linkedSecondaryWallet.id);
-        setMultiWalletWidgetState('idle');
-    }, [
-        setMultiWalletWidgetState,
-        primaryWallet,
-        secondaryWallets,
-        setSelectedWalletConnectorKey,
-        setSelectedWalletWithAction,
-        setPrimaryWalletId,
-    ]);
 };
 
 export { useWalletEventListeners };

package/src/lib/views/MergeUserAccountsView/MergeUserAccountsView.cjs

@@ -7,22 +7,19 @@ var _tslib = require('../../../../_virtual/_tslib.cjs');
 var jsxRuntime = require('react/jsx-runtime');
 var React = require('react');
 var reactI18next = require('react-i18next');
-var walletBook = require('@dynamic-labs/wallet-book');
-var iconic = require('@dynamic-labs/iconic');
 require('../../events/dynamicEvents.cjs');
 require('@dynamic-labs/utils');
 require('../../context/DynamicContext/DynamicContext.cjs');
 require('@dynamic-labs/sdk-api-core');
 var logger = require('../../shared/logger.cjs');
+require('@dynamic-labs/iconic');
 require('@dynamic-labs/wallet-connector-core');
 var ViewContext = require('../../context/ViewContext/ViewContext.cjs');
-var add = require('../../shared/assets/add.cjs');
-var shortenWalletAddress = require('../../shared/utils/functions/shortenWalletAddress/shortenWalletAddress.cjs');
+require('@dynamic-labs/wallet-book');
 require('../../utils/constants/colors.cjs');
 require('../../utils/constants/values.cjs');
 require('../../shared/utils/classes/storage/localStorage.cjs');
 require('../../shared/consts/index.cjs');
-var useInternalDynamicContext = require('../../context/DynamicContext/useDynamicContext/useInternalDynamicContext.cjs');
 require('../../context/CaptchaContext/CaptchaContext.cjs');
 require('../../context/ErrorContext/ErrorContext.cjs');
 require('@dynamic-labs/multi-wallet');
@@ -83,12 +80,11 @@ require('../../widgets/DynamicWidget/views/ManagePasskeysWidgetView/PasskeyCard/
 var useMergeUserAccounts = require('../../utils/hooks/useMergeUserAccounts/useMergeUserAccounts.cjs');
 
 const MergeUserAccountsView = (props) => {
-    const { selectedWalletConnector } = useInternalDynamicContext.useInternalDynamicContext();
     const { setView } = ViewContext.useViewContext();
     const { mergeUserAccounts } = useMergeUserAccounts.useMergeUserAccounts();
     const { t } = reactI18next.useTranslation();
     const [error, setError] = React.useState('');
-    const { mergeConflicts, walletAddress } = props;
+    const { mergeConflicts } = props;
     const goToConflictsResolutionView = () => {
         // back button on conflicts resolution view should go back to this view
         const onConflictsResolutionBackClick = () => {
@@ -112,13 +108,7 @@ const MergeUserAccountsView = (props) => {
             setError(t('dyn_merge_user_accounts.errors.merge_error'));
         }
     });
-    const renderDuplicatedInfo = () => {
-        if (walletAddress) {
-            return (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx(walletBook.WalletIcon, { walletKey: selectedWalletConnector === null || selectedWalletConnector === void 0 ? void 0 : selectedWalletConnector.key, className: 'merge-user-accounts__accounts__item__icon' }), jsxRuntime.jsx(Typography.Typography, { variant: 'body_small', weight: 'bold', color: 'secondary', className: 'merge-user-accounts__accounts__item__text', children: shortenWalletAddress.shortenWalletAddress(walletAddress, 3, 3) })] }));
-        }
-        return (jsxRuntime.jsx(iconic.UserProfileIcon, { className: 'merge-user-accounts__accounts__item__icon' }));
-    };
-    return (jsxRuntime.jsxs("div", { className: 'merge-user-accounts', children: [error && (jsxRuntime.jsx(Alert.Alert, { icon: 'error', variant: 'error', className: 'merge-user-accounts__error', children: error })), jsxRuntime.jsxs("div", { className: 'merge-user-accounts__container', children: [jsxRuntime.jsx(Typography.Typography, { variant: 'body_normal', weight: 'regular', color: 'secondary', className: 'merge-user-accounts__title', copykey: 'dyn_merge_user_accounts.wallet.content', children: t('dyn_merge_user_accounts.wallet.content') }), jsxRuntime.jsxs("div", { className: 'merge-user-accounts__accounts', children: [jsxRuntime.jsx("div", { className: 'merge-user-accounts__accounts__item', children: renderDuplicatedInfo() }), jsxRuntime.jsxs("div", { className: 'merge-user-accounts__accounts__divider', children: [jsxRuntime.jsx("div", { className: 'merge-user-accounts__accounts__divider__dash' }), jsxRuntime.jsx("div", { className: 'merge-user-accounts__accounts__divider__icon', children: jsxRuntime.jsx(add.ReactComponent, {}) })] }), jsxRuntime.jsx("div", { className: 'merge-user-accounts__accounts__item', children: renderDuplicatedInfo() })] }), jsxRuntime.jsx(TypographyButton.TypographyButton, { onClick: handleMergeConfirm, buttonClassName: 'merge-user-accounts__button', buttonVariant: 'brand-primary', buttonPadding: 'large', typographyProps: {
+    return (jsxRuntime.jsxs("div", { className: 'merge-user-accounts', children: [error && (jsxRuntime.jsx(Alert.Alert, { icon: 'error', variant: 'error', className: 'merge-user-accounts__error', children: error })), jsxRuntime.jsxs("div", { className: 'merge-user-accounts__container', children: [jsxRuntime.jsx(Typography.Typography, { variant: 'body_normal', weight: 'regular', color: 'secondary', className: 'merge-user-accounts__title', copykey: 'dyn_merge_user_accounts.wallet.content', children: t('dyn_merge_user_accounts.wallet.content') }), jsxRuntime.jsx(TypographyButton.TypographyButton, { onClick: handleMergeConfirm, buttonClassName: 'merge-user-accounts__button', buttonVariant: 'brand-primary', buttonPadding: 'large', typographyProps: {
                             color: 'inherit',
                         }, expanded: true, copykey: 'dyn_merge_user_accounts.confirm_button', children: t('dyn_merge_user_accounts.confirm_button') })] })] }));
 };