@dynamic-labs/sdk-react-core 2.2.5 → 2.2.6

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

@@ -0,0 +1,10 @@
+'use client'
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var utils = require('@dynamic-labs/utils');
+
+const getPlatformForConnector = (connector) => utils.isMobile() || connector.isWalletConnect ? 'mobile' : 'browserExtension';
+
+exports.getPlatformForConnector = getPlatformForConnector;

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

@@ -0,0 +1,3 @@
+import { WalletSchema } from '@dynamic-labs/wallet-book';
+import { WalletConnector } from '../../../..';
+export declare const getPlatformForConnector: (connector: WalletConnector) => keyof NonNullable<WalletSchema['walletLimitations']>;

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

@@ -0,0 +1,6 @@
+'use client'
+import { isMobile } from '@dynamic-labs/utils';
+
+const getPlatformForConnector = (connector) => isMobile() || connector.isWalletConnect ? 'mobile' : 'browserExtension';
+
+export { getPlatformForConnector };

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

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

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

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

package/src/lib/utils/functions/walletListBuilder/utils/applyMultiWalletFilters/applyMultiWalletFilters.cjs

@@ -7,7 +7,7 @@ var filterConnectedWallets = require('../filterConnectedWallets/filterConnectedW
 var staticLinkedWalletFilter = require('../staticLinkedWalletFilter/staticLinkedWalletFilter.cjs');
 var filterWalletConnectWallets = require('../filterWalletConnectWallets/filterWalletConnectWallets.cjs');
 
-const applyMultiWalletFilters = ({ authMode, userWallets, walletOptions, }) => {
+const applyMultiWalletFilters = ({ authMode, userWallets, walletOptions, walletBook, }) => {
     const walletList = filterWalletConnectWallets.filterWalletConnectWallets({
         userWallets,
         walletOptions,
@@ -18,7 +18,7 @@ const applyMultiWalletFilters = ({ authMode, userWallets, walletOptions, }) => {
             walletOptions: walletList,
         });
     }
-    return staticLinkedWalletFilter.staticWalletFilter(userWallets, walletList);
+    return staticLinkedWalletFilter.staticWalletFilter(userWallets, walletList, walletBook);
 };
 
 exports.applyMultiWalletFilters = applyMultiWalletFilters;

package/src/lib/utils/functions/walletListBuilder/utils/applyMultiWalletFilters/applyMultiWalletFilters.d.ts

@@ -1,6 +1,8 @@
+import { WalletBookSchema } from '@dynamic-labs/wallet-book';
 import { AuthModeType, Wallet, WalletOption } from '../../../../../shared';
-export declare const applyMultiWalletFilters: ({ authMode, userWallets, walletOptions, }: {
+export declare const applyMultiWalletFilters: ({ authMode, userWallets, walletOptions, walletBook, }: {
     authMode: AuthModeType;
     userWallets: Wallet[];
     walletOptions: WalletOption[];
+    walletBook: WalletBookSchema;
 }) => WalletOption[];

package/src/lib/utils/functions/walletListBuilder/utils/applyMultiWalletFilters/applyMultiWalletFilters.js

@@ -3,7 +3,7 @@ import { filterConnectedWallets } from '../filterConnectedWallets/filterConnecte
 import { staticWalletFilter } from '../staticLinkedWalletFilter/staticLinkedWalletFilter.js';
 import { filterWalletConnectWallets } from '../filterWalletConnectWallets/filterWalletConnectWallets.js';
 
-const applyMultiWalletFilters = ({ authMode, userWallets, walletOptions, }) => {
+const applyMultiWalletFilters = ({ authMode, userWallets, walletOptions, walletBook, }) => {
     const walletList = filterWalletConnectWallets({
         userWallets,
         walletOptions,
@@ -14,7 +14,7 @@ const applyMultiWalletFilters = ({ authMode, userWallets, walletOptions, }) => {
             walletOptions: walletList,
         });
     }
-    return staticWalletFilter(userWallets, walletList);
+    return staticWalletFilter(userWallets, walletList, walletBook);
 };
 
 export { applyMultiWalletFilters };

package/src/lib/utils/functions/walletListBuilder/utils/staticLinkedWalletFilter/staticLinkedWalletFilter.cjs

@@ -3,22 +3,15 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-/**
- * These wallets do not fire events when switching accounts, so we should filter
- * them out of the wallet list if they are already linked to the user profile.
- */
-const staticListToFilter = [
-    'xverse',
-    'magiceden',
-    'magicedenbtc',
-    'magicedensol',
-];
+var walletBook = require('@dynamic-labs/wallet-book');
+var getPlatformForConnector = require('../../../getPlatformForConnector/getPlatformForConnector.cjs');
+
 /**
  * This function is a helper to filter out wallets that should not appear in the wallet list
  * if they are already linked to the user profile.
  */
-const staticWalletFilter = (linkedWallets, walletOptions) => walletOptions.filter((walletOption) => {
-    if (!staticListToFilter.includes(walletOption.key)) {
+const staticWalletFilter = (linkedWallets, walletOptions, walletBook$1) => walletOptions.filter((walletOption) => {
+    if (walletBook.isWalletEventSupported(walletBook.findWalletBookWallet(walletBook$1, walletOption.key), 'accountChanged', getPlatformForConnector.getPlatformForConnector(walletOption.walletConnector))) {
         return true;
     }
     if (linkedWallets.some((wallet) => wallet.connector.key === walletOption.key)) {

package/src/lib/utils/functions/walletListBuilder/utils/staticLinkedWalletFilter/staticLinkedWalletFilter.d.ts

@@ -1,6 +1,7 @@
+import { WalletBookSchema } from '@dynamic-labs/wallet-book';
 import { Wallet, WalletOption } from '../../../../../shared';
 /**
  * This function is a helper to filter out wallets that should not appear in the wallet list
  * if they are already linked to the user profile.
  */
-export declare const staticWalletFilter: (linkedWallets: Wallet[], walletOptions: WalletOption[]) => WalletOption[];
+export declare const staticWalletFilter: (linkedWallets: Wallet[], walletOptions: WalletOption[], walletBook: WalletBookSchema) => WalletOption[];

package/src/lib/utils/functions/walletListBuilder/utils/staticLinkedWalletFilter/staticLinkedWalletFilter.js

@@ -1,20 +1,13 @@
 'use client'
-/**
- * These wallets do not fire events when switching accounts, so we should filter
- * them out of the wallet list if they are already linked to the user profile.
- */
-const staticListToFilter = [
-    'xverse',
-    'magiceden',
-    'magicedenbtc',
-    'magicedensol',
-];
+import { isWalletEventSupported, findWalletBookWallet } from '@dynamic-labs/wallet-book';
+import { getPlatformForConnector } from '../../../getPlatformForConnector/getPlatformForConnector.js';
+
 /**
  * This function is a helper to filter out wallets that should not appear in the wallet list
  * if they are already linked to the user profile.
  */
-const staticWalletFilter = (linkedWallets, walletOptions) => walletOptions.filter((walletOption) => {
-    if (!staticListToFilter.includes(walletOption.key)) {
+const staticWalletFilter = (linkedWallets, walletOptions, walletBook) => walletOptions.filter((walletOption) => {
+    if (isWalletEventSupported(findWalletBookWallet(walletBook, walletOption.key), 'accountChanged', getPlatformForConnector(walletOption.walletConnector))) {
         return true;
     }
     if (linkedWallets.some((wallet) => wallet.connector.key === walletOption.key)) {

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

@@ -66,6 +66,7 @@ const walletListBuilder = ({ authMode, userWallets, multiWallet, numberOfWallets
         walletList = applyMultiWalletFilters.applyMultiWalletFilters({
             authMode,
             userWallets,
+            walletBook,
             walletOptions: walletList,
         });
     }

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

@@ -62,6 +62,7 @@ const walletListBuilder = ({ authMode, userWallets, multiWallet, numberOfWallets
         walletList = applyMultiWalletFilters({
             authMode,
             userWallets,
+            walletBook,
             walletOptions: walletList,
         });
     }

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

@@ -32,7 +32,7 @@ var reconnectSocialWallet = require('./reconnectSocialWallet.cjs');
 var createLinkedWalletsFromWalletOptions = require('./utils/createLinkedWalletsFromWalletOptions/createLinkedWalletsFromWalletOptions.cjs');
 var updateUserWalletsFromLinkedWallets = require('./utils/updateUserWalletsFromLinkedWallets/updateUserWalletsFromLinkedWallets.cjs');
 
-const useWalletConnectors = ({ authMode, connectedWallets, walletConnectorOptions, multiWalletWidgetState, setDesktopUri, setMultiWalletWidgetState, setQrcodeUri, primaryWalletId, setPrimaryWalletId, user, canHaveMultipleWalletsConnected, }) => {
+const useWalletConnectors = ({ authMode, connectedWallets, walletConnectorOptions, multiWalletWidgetState, setDesktopUri, setMultiWalletWidgetState, setQrcodeUri, primaryWalletId, setPrimaryWalletId, user, canHaveMultipleWalletsConnected, walletBook, }) => {
     const [showQrcodeModal, setShowQrcodeModal] = React.useState(false);
     const linkedWallets = React.useMemo(() => {
         if (!user) {
@@ -75,7 +75,7 @@ const useWalletConnectors = ({ authMode, connectedWallets, walletConnectorOption
     React.useEffect(() => walletsBasedOnAuthMode.forEach((wallet) => {
         wallet.connector.initEventListener();
     }), [walletsBasedOnAuthMode]);
-    const { connectedWalletsMap, didConnectedStateLoad } = useWalletsConnectionState.useWalletsConnectionState(walletsBasedOnAuthMode);
+    const { connectedWalletsMap, didConnectedStateLoad } = useWalletsConnectionState.useWalletsConnectionState(walletsBasedOnAuthMode, walletBook, primaryWalletId, authMode);
     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);

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

@@ -1,5 +1,6 @@
 import { Dispatch, SetStateAction } from 'react';
 import { UserProfile } from '@dynamic-labs/types';
+import { WalletBookSchema } from '@dynamic-labs/wallet-book';
 import { AuthModeType, MultiWalletWidgetState, Wallet, WalletOption } from '../../../shared';
 import { MultiWalletWidgetStateSetter } from '../multiWallet';
 type Props = {
@@ -14,6 +15,7 @@ type Props = {
     primaryWalletId: string | undefined;
     user?: UserProfile;
     canHaveMultipleWalletsConnected?: boolean;
+    walletBook: WalletBookSchema;
 };
 export interface UseWalletConnectors {
     didConnectedStateLoad: boolean;
@@ -24,5 +26,5 @@ export interface UseWalletConnectors {
     showQrcodeModal: boolean;
     wallets: Wallet[];
 }
-export declare const useWalletConnectors: ({ authMode, connectedWallets, walletConnectorOptions, multiWalletWidgetState, setDesktopUri, setMultiWalletWidgetState, setQrcodeUri, primaryWalletId, setPrimaryWalletId, user, canHaveMultipleWalletsConnected, }: Props) => UseWalletConnectors;
+export declare const useWalletConnectors: ({ authMode, connectedWallets, walletConnectorOptions, multiWalletWidgetState, setDesktopUri, setMultiWalletWidgetState, setQrcodeUri, primaryWalletId, setPrimaryWalletId, user, canHaveMultipleWalletsConnected, walletBook, }: Props) => UseWalletConnectors;
 export {};

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

@@ -28,7 +28,7 @@ import { reconnectSocialWallet } from './reconnectSocialWallet.js';
 import { createLinkedWalletsFromWalletOptions } from './utils/createLinkedWalletsFromWalletOptions/createLinkedWalletsFromWalletOptions.js';
 import { updateUserWalletsFromLinkedWallets } from './utils/updateUserWalletsFromLinkedWallets/updateUserWalletsFromLinkedWallets.js';
 
-const useWalletConnectors = ({ authMode, connectedWallets, walletConnectorOptions, multiWalletWidgetState, setDesktopUri, setMultiWalletWidgetState, setQrcodeUri, primaryWalletId, setPrimaryWalletId, user, canHaveMultipleWalletsConnected, }) => {
+const useWalletConnectors = ({ authMode, connectedWallets, walletConnectorOptions, multiWalletWidgetState, setDesktopUri, setMultiWalletWidgetState, setQrcodeUri, primaryWalletId, setPrimaryWalletId, user, canHaveMultipleWalletsConnected, walletBook, }) => {
     const [showQrcodeModal, setShowQrcodeModal] = useState(false);
     const linkedWallets = useMemo(() => {
         if (!user) {
@@ -71,7 +71,7 @@ const useWalletConnectors = ({ authMode, connectedWallets, walletConnectorOption
     useEffect(() => walletsBasedOnAuthMode.forEach((wallet) => {
         wallet.connector.initEventListener();
     }), [walletsBasedOnAuthMode]);
-    const { connectedWalletsMap, didConnectedStateLoad } = useWalletsConnectionState(walletsBasedOnAuthMode);
+    const { connectedWalletsMap, didConnectedStateLoad } = useWalletsConnectionState(walletsBasedOnAuthMode, walletBook, primaryWalletId, authMode);
     const wallets = useMemo(() => walletsBasedOnAuthMode.map((wallet) => (Object.assign(Object.assign({}, wallet), { connected: Boolean(connectedWalletsMap[getWalletIdentifier(wallet)]) }))), [connectedWalletsMap, walletsBasedOnAuthMode]);
     logVerboseTroubleshootingMessage('wallets', wallets);
     logVerboseTroubleshootingMessage('didConnectedStateLoad', didConnectedStateLoad);

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

@@ -6,12 +6,12 @@ Object.defineProperty(exports, '__esModule', { value: true });
 var _tslib = require('../../../../../_virtual/_tslib.cjs');
 var React = require('react');
 var walletConnectorCore = require('@dynamic-labs/wallet-connector-core');
+var walletBook = require('@dynamic-labs/wallet-book');
 require('@dynamic-labs/sdk-api-core');
 require('../../../shared/logger.cjs');
 require('@dynamic-labs/iconic');
 require('react/jsx-runtime');
 require('../../../context/ViewContext/ViewContext.cjs');
-require('@dynamic-labs/wallet-book');
 require('../../constants/colors.cjs');
 require('../../constants/values.cjs');
 require('../../../shared/utils/classes/storage/localStorage.cjs');
@@ -27,6 +27,7 @@ require('viem/chains');
 require('../../../config/ApiEndpoint.cjs');
 require('@dynamic-labs/store');
 require('../../../locale/locale.cjs');
+var getPlatformForConnector = require('../../functions/getPlatformForConnector/getPlatformForConnector.cjs');
 require('../../../events/dynamicEvents.cjs');
 var useWalletConnectorEvent = require('../events/useWalletConnectorEvent/useWalletConnectorEvent.cjs');
 var useWindowEvent = require('../events/useWindowEvent/useWindowEvent.cjs');
@@ -35,14 +36,17 @@ var useWindowEvent = require('../events/useWindowEvent/useWindowEvent.cjs');
  * For the given wallet array, this returns an object mapping from each wallet's
  * identifier to whether its connector recognizes it as currently connected or not.
  */
-const getConnectedWalletsMap = (wallets) => _tslib.__awaiter(void 0, void 0, void 0, function* () {
+const getConnectedWalletsMap = (wallets, walletBook$1, primaryWalletId) => _tslib.__awaiter(void 0, void 0, void 0, function* () {
     const newMap = {};
-    yield Promise.all(wallets.map((wallet) => _tslib.__awaiter(void 0, void 0, void 0, function* () {
+    yield Promise.all(wallets
+        .filter((wallet) => wallet.id === primaryWalletId ||
+        walletBook.isWalletMethodSupported(walletBook.findWalletBookWallet(walletBook$1, wallet.key), 'getConnectedAccounts', getPlatformForConnector.getPlatformForConnector(wallet.connector)))
+        .map((wallet) => _tslib.__awaiter(void 0, void 0, void 0, function* () {
         newMap[getWalletIdentifier.getWalletIdentifier(wallet)] = yield isWalletConnected.isWalletConnected(wallet);
     })));
     return newMap;
 });
-const useWalletsConnectionState = (wallets) => {
+const useWalletsConnectionState = (wallets, walletBook, primaryWalletId, authMode) => {
     const [connectedWalletsMap, setConnectedWalletsMap] = React.useState({});
     /**
      * Whether the connection map has been loaded off of the current wallet array.
@@ -59,7 +63,7 @@ const useWalletsConnectionState = (wallets) => {
     const incomingWalletSwitchAddress = React.useRef(undefined);
     const computeConnectedStateForWallets = React.useCallback(() => _tslib.__awaiter(void 0, void 0, void 0, function* () {
         didConnectedStateLoad.current = false;
-        const newMap = yield getConnectedWalletsMap(wallets);
+        const newMap = yield getConnectedWalletsMap(wallets, walletBook, primaryWalletId);
         if (Object.values(newMap).length === 0) {
             setConnectedWalletsMap({});
             return;
@@ -75,7 +79,7 @@ const useWalletsConnectionState = (wallets) => {
                 return;
         }
         setConnectedWalletsMap(newMap);
-    }), [wallets]);
+    }), [primaryWalletId, walletBook, wallets]);
     /** A string that is unique for each possible value of the wallets prop */
     const walletsHash = wallets.map(getWalletIdentifier.getWalletIdentifier).join('-');
     const connectors = wallets.map(({ connector }) => connector);
@@ -92,6 +96,9 @@ const useWalletsConnectionState = (wallets) => {
     useWalletConnectorEvent.useWalletConnectorEvent(connectors, 'accountChange', onAccountChange);
     useWalletConnectorEvent.useWalletConnectorEvent(connectors, 'disconnect', handleEvent);
     useWalletConnectorEvent.useWalletConnectorEvent(connectors, 'chainChange', handleEvent);
+    const computeConnectedStateKey = authMode === 'connect-and-sign'
+        ? `${primaryWalletId}-${walletsHash}`
+        : walletsHash;
     React.useEffect(() => {
         computeConnectedStateForWallets();
     }, 
@@ -100,7 +107,7 @@ const useWalletsConnectionState = (wallets) => {
      * wallets change.
      */
     // eslint-disable-next-line react-hooks/exhaustive-deps
-    [walletsHash]);
+    [computeConnectedStateKey]);
     /**
      * This is a workaround to detect when the user switches to another tab/extension
      * and then comes back to the dapp.

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

@@ -1,9 +1,10 @@
 import { MutableRefObject } from 'react';
-import { Wallet } from '../../../shared';
+import { WalletBookSchema } from '@dynamic-labs/wallet-book';
+import { AuthModeType, Wallet } from '../../../shared';
 type ConnectedWalletsMap = {
     [address: string]: boolean;
 };
-type WalletsConnectionStateHook = (wallets: Wallet[]) => {
+type WalletsConnectionStateHook = (wallets: Wallet[], walletBook: WalletBookSchema, primaryWalletId: string | undefined, authMode: AuthModeType) => {
     connectedWalletsMap: ConnectedWalletsMap;
     didConnectedStateLoad: MutableRefObject<boolean>;
 };

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

@@ -2,12 +2,12 @@
 import { __awaiter } from '../../../../../_virtual/_tslib.js';
 import { useState, useRef, useCallback, useEffect } from 'react';
 import { isSameAddress } from '@dynamic-labs/wallet-connector-core';
+import { isWalletMethodSupported, findWalletBookWallet } from '@dynamic-labs/wallet-book';
 import '@dynamic-labs/sdk-api-core';
 import '../../../shared/logger.js';
 import '@dynamic-labs/iconic';
 import 'react/jsx-runtime';
 import '../../../context/ViewContext/ViewContext.js';
-import '@dynamic-labs/wallet-book';
 import '../../constants/colors.js';
 import '../../constants/values.js';
 import '../../../shared/utils/classes/storage/localStorage.js';
@@ -23,6 +23,7 @@ import 'viem/chains';
 import '../../../config/ApiEndpoint.js';
 import '@dynamic-labs/store';
 import '../../../locale/locale.js';
+import { getPlatformForConnector } from '../../functions/getPlatformForConnector/getPlatformForConnector.js';
 import '../../../events/dynamicEvents.js';
 import { useWalletConnectorEvent } from '../events/useWalletConnectorEvent/useWalletConnectorEvent.js';
 import { useWindowEvent } from '../events/useWindowEvent/useWindowEvent.js';
@@ -31,14 +32,17 @@ import { useWindowEvent } from '../events/useWindowEvent/useWindowEvent.js';
  * For the given wallet array, this returns an object mapping from each wallet's
  * identifier to whether its connector recognizes it as currently connected or not.
  */
-const getConnectedWalletsMap = (wallets) => __awaiter(void 0, void 0, void 0, function* () {
+const getConnectedWalletsMap = (wallets, walletBook, primaryWalletId) => __awaiter(void 0, void 0, void 0, function* () {
     const newMap = {};
-    yield Promise.all(wallets.map((wallet) => __awaiter(void 0, void 0, void 0, function* () {
+    yield Promise.all(wallets
+        .filter((wallet) => wallet.id === primaryWalletId ||
+        isWalletMethodSupported(findWalletBookWallet(walletBook, wallet.key), 'getConnectedAccounts', getPlatformForConnector(wallet.connector)))
+        .map((wallet) => __awaiter(void 0, void 0, void 0, function* () {
         newMap[getWalletIdentifier(wallet)] = yield isWalletConnected(wallet);
     })));
     return newMap;
 });
-const useWalletsConnectionState = (wallets) => {
+const useWalletsConnectionState = (wallets, walletBook, primaryWalletId, authMode) => {
     const [connectedWalletsMap, setConnectedWalletsMap] = useState({});
     /**
      * Whether the connection map has been loaded off of the current wallet array.
@@ -55,7 +59,7 @@ const useWalletsConnectionState = (wallets) => {
     const incomingWalletSwitchAddress = useRef(undefined);
     const computeConnectedStateForWallets = useCallback(() => __awaiter(void 0, void 0, void 0, function* () {
         didConnectedStateLoad.current = false;
-        const newMap = yield getConnectedWalletsMap(wallets);
+        const newMap = yield getConnectedWalletsMap(wallets, walletBook, primaryWalletId);
         if (Object.values(newMap).length === 0) {
             setConnectedWalletsMap({});
             return;
@@ -71,7 +75,7 @@ const useWalletsConnectionState = (wallets) => {
                 return;
         }
         setConnectedWalletsMap(newMap);
-    }), [wallets]);
+    }), [primaryWalletId, walletBook, wallets]);
     /** A string that is unique for each possible value of the wallets prop */
     const walletsHash = wallets.map(getWalletIdentifier).join('-');
     const connectors = wallets.map(({ connector }) => connector);
@@ -88,6 +92,9 @@ const useWalletsConnectionState = (wallets) => {
     useWalletConnectorEvent(connectors, 'accountChange', onAccountChange);
     useWalletConnectorEvent(connectors, 'disconnect', handleEvent);
     useWalletConnectorEvent(connectors, 'chainChange', handleEvent);
+    const computeConnectedStateKey = authMode === 'connect-and-sign'
+        ? `${primaryWalletId}-${walletsHash}`
+        : walletsHash;
     useEffect(() => {
         computeConnectedStateForWallets();
     }, 
@@ -96,7 +103,7 @@ const useWalletsConnectionState = (wallets) => {
      * wallets change.
      */
     // eslint-disable-next-line react-hooks/exhaustive-deps
-    [walletsHash]);
+    [computeConnectedStateKey]);
     /**
      * This is a workaround to detect when the user switches to another tab/extension
      * and then comes back to the dapp.

package/src/lib/widgets/DynamicWidget/prompts/DetectedNewWalletModal/DetectedNewWalletModal.cjs

@@ -5,6 +5,7 @@ Object.defineProperty(exports, '__esModule', { value: true });
 
 var jsxRuntime = require('react/jsx-runtime');
 var reactI18next = require('react-i18next');
+var walletBook = require('@dynamic-labs/wallet-book');
 require('../../../../components/Accordion/components/AccordionItem/AccordionItem.cjs');
 require('../../../../components/Alert/Alert.cjs');
 require('react');
@@ -17,8 +18,6 @@ require('../../../../shared/logger.cjs');
 require('@dynamic-labs/iconic');
 require('@dynamic-labs/wallet-connector-core');
 require('../../../../context/ViewContext/ViewContext.cjs');
-var promptAccountSwitch = require('../../../../shared/assets/prompt-account-switch.cjs');
-require('@dynamic-labs/wallet-book');
 require('../../../../utils/constants/colors.cjs');
 require('../../../../utils/constants/values.cjs');
 require('../../../../shared/utils/classes/storage/localStorage.cjs');
@@ -63,6 +62,8 @@ require('../../components/DynamicWidgetHeader/DynamicWidgetHeader.cjs');
 var PromptModal = require('../../components/PromptModal/PromptModal.cjs');
 var WidgetPortal = require('../../components/WidgetPortal/WidgetPortal.cjs');
 var useCloseMultiWalletPrompt = require('../../hooks/useCloseMultiWalletPrompt/useCloseMultiWalletPrompt.cjs');
+var DefaultPromptModal = require('../DefaultPromptModal/DefaultPromptModal.cjs');
+var Divider = require('../../../../components/Divider/Divider.cjs');
 require('../../context/DynamicWidgetContext.cjs');
 require('../../../../components/IconButton/IconButton.cjs');
 require('../../../../components/MenuList/Dropdown/Dropdown.cjs');
@@ -75,6 +76,7 @@ require('../../../../context/PasskeyContext/PasskeyContext.cjs');
 require('../../views/ManagePasskeysWidgetView/PasskeyCard/PasskeyCard.cjs');
 require('../../../../components/InlineWidget/InlineWidget.cjs');
 require('../../../../components/IsBrowser/IsBrowser.cjs');
+var LogoutButton = require('../../../../components/LogoutButton/LogoutButton.cjs');
 require('../../../../components/Popper/Popper/Popper.cjs');
 require('../../../../components/Popper/PopperContext/PopperContext.cjs');
 require('react-focus-lock');
@@ -85,16 +87,17 @@ require('@hcaptcha/react-hcaptcha');
 require('../../../../context/IpConfigurationContext/IpConfigurationContext.cjs');
 
 const DetectedNewWalletContent = () => {
+    var _a;
     const { t } = reactI18next.useTranslation();
     const { setMultiWalletWidgetState, primaryWallet } = useInternalDynamicContext.useInternalDynamicContext();
     const handleClick = () => {
         setMultiWalletWidgetState('awaiting_signature', undefined, 'linking_new_wallet');
     };
-    return (jsxRuntime.jsxs("div", { className: 'detected-new-wallet-modal__content', children: [jsxRuntime.jsx(Typography.Typography, { variant: 'body_normal', color: 'primary', children: t('dyn_detected_new_wallet.title') }), jsxRuntime.jsx(promptAccountSwitch.ReactComponent, {}), jsxRuntime.jsx(Typography.Typography, { variant: 'body_small', color: 'secondary', children: t('dyn_detected_new_wallet.description', {
+    return (jsxRuntime.jsxs(DefaultPromptModal.DefaultPromptLayout, { dataTestId: 'detected-new-wallet-modal', icon: jsxRuntime.jsx(walletBook.WalletIcon, { walletKey: (_a = primaryWallet === null || primaryWallet === void 0 ? void 0 : primaryWallet.connector) === null || _a === void 0 ? void 0 : _a.key }), title: t('dyn_detected_new_wallet.title'), children: [jsxRuntime.jsx(Typography.Typography, { variant: 'body_normal', color: 'secondary', weight: 'regular', "data-testid": 'content', children: t('dyn_detected_new_wallet.description', {
                     walletName: primaryWallet === null || primaryWallet === void 0 ? void 0 : primaryWallet.connector.name,
-                }) }), jsxRuntime.jsx(TypographyButton.TypographyButton, { expanded: true, onClick: handleClick, typographyProps: {
+                }) }), jsxRuntime.jsx(TypographyButton.TypographyButton, { buttonClassName: 'detected-new-wallet-modal__confirm-button', expanded: true, onClick: handleClick, typographyProps: {
                     variant: 'button_secondary',
-                }, children: t('dyn_detected_new_wallet.confirm_button') })] }));
+                }, children: t('dyn_detected_new_wallet.confirm_button') }), jsxRuntime.jsx(Divider.Divider, { fullWidth: true, text: 'Or' }), jsxRuntime.jsx(LogoutButton.LogoutButton, { isTextButton: false, buttonClassName: 'detected-new-wallet-modal__log-out-button' })] }));
 };
 const DetectedNewWalletWidgetPortal = () => (jsxRuntime.jsx(WidgetPortal.WidgetPortal, { onClose: useCloseMultiWalletPrompt.useCloseMultiWalletPrompt(), children: jsxRuntime.jsx(DetectedNewWalletContent, {}) }));
 const DetectedNewWalletModal = () => (jsxRuntime.jsx(PromptModal.PromptModal, { onClose: useCloseMultiWalletPrompt.useCloseMultiWalletPrompt(), children: jsxRuntime.jsx(DetectedNewWalletContent, {}) }));

package/src/lib/widgets/DynamicWidget/prompts/DetectedNewWalletModal/DetectedNewWalletModal.js

@@ -1,6 +1,7 @@
 'use client'
 import { jsx, jsxs } from 'react/jsx-runtime';
 import { useTranslation } from 'react-i18next';
+import { WalletIcon } from '@dynamic-labs/wallet-book';
 import '../../../../components/Accordion/components/AccordionItem/AccordionItem.js';
 import '../../../../components/Alert/Alert.js';
 import 'react';
@@ -13,8 +14,6 @@ import '../../../../shared/logger.js';
 import '@dynamic-labs/iconic';
 import '@dynamic-labs/wallet-connector-core';
 import '../../../../context/ViewContext/ViewContext.js';
-import { ReactComponent as SvgPromptAccountSwitch } from '../../../../shared/assets/prompt-account-switch.js';
-import '@dynamic-labs/wallet-book';
 import '../../../../utils/constants/colors.js';
 import '../../../../utils/constants/values.js';
 import '../../../../shared/utils/classes/storage/localStorage.js';
@@ -59,6 +58,8 @@ import '../../components/DynamicWidgetHeader/DynamicWidgetHeader.js';
 import { PromptModal } from '../../components/PromptModal/PromptModal.js';
 import { WidgetPortal } from '../../components/WidgetPortal/WidgetPortal.js';
 import { useCloseMultiWalletPrompt } from '../../hooks/useCloseMultiWalletPrompt/useCloseMultiWalletPrompt.js';
+import { DefaultPromptLayout } from '../DefaultPromptModal/DefaultPromptModal.js';
+import { Divider } from '../../../../components/Divider/Divider.js';
 import '../../context/DynamicWidgetContext.js';
 import '../../../../components/IconButton/IconButton.js';
 import '../../../../components/MenuList/Dropdown/Dropdown.js';
@@ -71,6 +72,7 @@ import '../../../../context/PasskeyContext/PasskeyContext.js';
 import '../../views/ManagePasskeysWidgetView/PasskeyCard/PasskeyCard.js';
 import '../../../../components/InlineWidget/InlineWidget.js';
 import '../../../../components/IsBrowser/IsBrowser.js';
+import { LogoutButton } from '../../../../components/LogoutButton/LogoutButton.js';
 import '../../../../components/Popper/Popper/Popper.js';
 import '../../../../components/Popper/PopperContext/PopperContext.js';
 import 'react-focus-lock';
@@ -81,16 +83,17 @@ import '@hcaptcha/react-hcaptcha';
 import '../../../../context/IpConfigurationContext/IpConfigurationContext.js';
 
 const DetectedNewWalletContent = () => {
+    var _a;
     const { t } = useTranslation();
     const { setMultiWalletWidgetState, primaryWallet } = useInternalDynamicContext();
     const handleClick = () => {
         setMultiWalletWidgetState('awaiting_signature', undefined, 'linking_new_wallet');
     };
-    return (jsxs("div", { className: 'detected-new-wallet-modal__content', children: [jsx(Typography, { variant: 'body_normal', color: 'primary', children: t('dyn_detected_new_wallet.title') }), jsx(SvgPromptAccountSwitch, {}), jsx(Typography, { variant: 'body_small', color: 'secondary', children: t('dyn_detected_new_wallet.description', {
+    return (jsxs(DefaultPromptLayout, { dataTestId: 'detected-new-wallet-modal', icon: jsx(WalletIcon, { walletKey: (_a = primaryWallet === null || primaryWallet === void 0 ? void 0 : primaryWallet.connector) === null || _a === void 0 ? void 0 : _a.key }), title: t('dyn_detected_new_wallet.title'), children: [jsx(Typography, { variant: 'body_normal', color: 'secondary', weight: 'regular', "data-testid": 'content', children: t('dyn_detected_new_wallet.description', {
                     walletName: primaryWallet === null || primaryWallet === void 0 ? void 0 : primaryWallet.connector.name,
-                }) }), jsx(TypographyButton, { expanded: true, onClick: handleClick, typographyProps: {
+                }) }), jsx(TypographyButton, { buttonClassName: 'detected-new-wallet-modal__confirm-button', expanded: true, onClick: handleClick, typographyProps: {
                     variant: 'button_secondary',
-                }, children: t('dyn_detected_new_wallet.confirm_button') })] }));
+                }, children: t('dyn_detected_new_wallet.confirm_button') }), jsx(Divider, { fullWidth: true, text: 'Or' }), jsx(LogoutButton, { isTextButton: false, buttonClassName: 'detected-new-wallet-modal__log-out-button' })] }));
 };
 const DetectedNewWalletWidgetPortal = () => (jsx(WidgetPortal, { onClose: useCloseMultiWalletPrompt(), children: jsx(DetectedNewWalletContent, {}) }));
 const DetectedNewWalletModal = () => (jsx(PromptModal, { onClose: useCloseMultiWalletPrompt(), children: jsx(DetectedNewWalletContent, {}) }));

package/src/lib/widgets/DynamicWidget/prompts/PendingAccountSwitchModal/PendingAccountSwitchModal.cjs

@@ -75,8 +75,8 @@ require('../../../../context/PasskeyContext/PasskeyContext.cjs');
 require('../../components/DynamicWidgetHeader/DynamicWidgetHeader.cjs');
 var PromptModal = require('../../components/PromptModal/PromptModal.cjs');
 var WidgetPortal = require('../../components/WidgetPortal/WidgetPortal.cjs');
-var useConnectedAccountWallet = require('../../../../utils/hooks/useConnectedAccountWallet/useConnectedAccountWallet.cjs');
 var DefaultPromptModal = require('../DefaultPromptModal/DefaultPromptModal.cjs');
+var useConnectedAccountWallet = require('../../../../utils/hooks/useConnectedAccountWallet/useConnectedAccountWallet.cjs');
 var SwitchAccountView = require('./SwitchAccountView/SwitchAccountView.cjs');
 var SwitchOrUseActiveAccountView = require('./SwitchOrUseActiveAccountView/SwitchOrUseActiveAccountView.cjs');
 require('../../context/DynamicWidgetContext.cjs');

package/src/lib/widgets/DynamicWidget/prompts/PendingAccountSwitchModal/PendingAccountSwitchModal.js

@@ -71,8 +71,8 @@ import '../../../../context/PasskeyContext/PasskeyContext.js';
 import '../../components/DynamicWidgetHeader/DynamicWidgetHeader.js';
 import { PromptModal } from '../../components/PromptModal/PromptModal.js';
 import { WidgetPortal } from '../../components/WidgetPortal/WidgetPortal.js';
-import { useConnectedAccountWallet } from '../../../../utils/hooks/useConnectedAccountWallet/useConnectedAccountWallet.js';
 import { DefaultPromptLayout } from '../DefaultPromptModal/DefaultPromptModal.js';
+import { useConnectedAccountWallet } from '../../../../utils/hooks/useConnectedAccountWallet/useConnectedAccountWallet.js';
 import { SwitchAccountView } from './SwitchAccountView/SwitchAccountView.js';
 import { SwitchOrUseActiveAccountView } from './SwitchOrUseActiveAccountView/SwitchOrUseActiveAccountView.js';
 import '../../context/DynamicWidgetContext.js';

package/src/lib/shared/assets/prompt-account-switch.cjs

@@ -1,64 +0,0 @@
-'use client'
-'use strict';
-
-Object.defineProperty(exports, '__esModule', { value: true });
-
-var React = require('react');
-
-function _interopNamespace(e) {
-  if (e && e.__esModule) return e;
-  var n = Object.create(null);
-  if (e) {
-    Object.keys(e).forEach(function (k) {
-      if (k !== 'default') {
-        var d = Object.getOwnPropertyDescriptor(e, k);
-        Object.defineProperty(n, k, d.get ? d : {
-          enumerable: true,
-          get: function () { return e[k]; }
-        });
-      }
-    });
-  }
-  n["default"] = e;
-  return Object.freeze(n);
-}
-
-var React__namespace = /*#__PURE__*/_interopNamespace(React);
-
-var _path, _path2, _path3, _path4;
-var _excluded = ["title", "titleId"];
-function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
-function _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }
-function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }
-var SvgPromptAccountSwitch = function SvgPromptAccountSwitch(_ref) {
-  var title = _ref.title,
-    titleId = _ref.titleId,
-    props = _objectWithoutProperties(_ref, _excluded);
-  return /*#__PURE__*/React__namespace.createElement("svg", _extends({
-    width: 40,
-    height: 40,
-    viewBox: "0 0 42 42",
-    fill: "none",
-    xmlns: "http://www.w3.org/2000/svg",
-    "aria-labelledby": titleId
-  }, props), title ? /*#__PURE__*/React__namespace.createElement("title", {
-    id: titleId
-  }, title) : null, _path || (_path = /*#__PURE__*/React__namespace.createElement("path", {
-    d: "M31.583 11.75a7.617 7.617 0 0 0-1.25-.083H13.667c-.467 0-.917.033-1.35.1.233-.467.566-.9.966-1.3L18.7 5.033a5.875 5.875 0 0 1 8.267 0l2.916 2.95a5.623 5.623 0 0 1 1.7 3.767Z",
-    fill: "#2660FF"
-  })), _path2 || (_path2 = /*#__PURE__*/React__namespace.createElement("path", {
-    opacity: 0.4,
-    d: "M38.667 20v8.333c0 5-3.334 8.334-8.334 8.334H14.717a5.988 5.988 0 0 0 1.316-1.567c.617-1 .967-2.184.967-3.434A6.665 6.665 0 0 0 10.333 25c-2 0-3.783.883-5 2.267V20c0-4.534 2.734-7.7 6.984-8.233.433-.067.883-.1 1.35-.1h16.666c.434 0 .85.016 1.25.083 4.3.5 7.084 3.683 7.084 8.25Z",
-    fill: "#2660FF"
-  })), _path3 || (_path3 = /*#__PURE__*/React__namespace.createElement("path", {
-    d: "M38.667 20.833h-5a3.343 3.343 0 0 0-3.334 3.334c0 1.833 1.5 3.333 3.334 3.333h5",
-    fill: "#2660FF"
-  })), _path4 || (_path4 = /*#__PURE__*/React__namespace.createElement("path", {
-    fillRule: "evenodd",
-    clipRule: "evenodd",
-    d: "M10.333 25a6.667 6.667 0 1 0 0 13.333 6.667 6.667 0 0 0 0-13.333ZM2 31.667a8.333 8.333 0 1 1 16.667 0 8.333 8.333 0 0 1-16.667 0Zm8.577-3.09a.833.833 0 0 1 1.179 0l2.5 2.5a.833.833 0 0 1 0 1.18l-2.5 2.5a.833.833 0 0 1-1.179-1.18l1.078-1.077H7a.833.833 0 0 1 0-1.666h4.655l-1.078-1.078a.833.833 0 0 1 0-1.178Z",
-    fill: "#2660FF"
-  })));
-};
-
-exports.ReactComponent = SvgPromptAccountSwitch;