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

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/widgets/DynamicWidget/views/WalletsView/WalletsView.cjs

@@ -66,10 +66,11 @@ require('react-focus-lock');
 require('../../context/DynamicWidgetContext.cjs');
 var DynamicWidgetWallets = require('../../components/DynamicWidgetWallets/DynamicWidgetWallets.cjs');
 var SingleWalletButtons = require('../../components/SingleWalletButtons/SingleWalletButtons.cjs');
+require('../../../../components/IconButton/IconButton.cjs');
+require('../../../../components/MenuList/Dropdown/Dropdown.cjs');
 require('formik');
 var TypographyButton = require('../../../../components/TypographyButton/TypographyButton.cjs');
 require('../../../../views/TransactionConfirmationView/helpers/transactionErrorMessage.cjs');
-require('../../../../components/IconButton/IconButton.cjs');
 require('../../../../components/Input/Input.cjs');
 require('../../../../components/PasskeyCreatedSuccessBanner/PasskeyCreatedSuccessBanner.cjs');
 require('../../../../context/PasskeyContext/PasskeyContext.cjs');
@@ -78,7 +79,6 @@ var useDynamicModals = require('../../../../utils/hooks/useDynamicModals/useDyna
 require('../../../../components/InlineWidget/InlineWidget.cjs');
 require('../../../../components/IsBrowser/IsBrowser.cjs');
 var LogoutButton = require('../../../../components/LogoutButton/LogoutButton.cjs');
-require('../../../../components/MenuList/Dropdown/Dropdown.cjs');
 require('../../../../components/Popper/Popper/Popper.cjs');
 require('../../../../components/Popper/PopperContext/PopperContext.cjs');
 require('qrcode');

package/src/lib/widgets/DynamicWidget/views/WalletsView/WalletsView.js

@@ -62,10 +62,11 @@ import 'react-focus-lock';
 import '../../context/DynamicWidgetContext.js';
 import { DynamicWidgetWallets } from '../../components/DynamicWidgetWallets/DynamicWidgetWallets.js';
 import { SingleWalletButtons } from '../../components/SingleWalletButtons/SingleWalletButtons.js';
+import '../../../../components/IconButton/IconButton.js';
+import '../../../../components/MenuList/Dropdown/Dropdown.js';
 import 'formik';
 import { TypographyButton } from '../../../../components/TypographyButton/TypographyButton.js';
 import '../../../../views/TransactionConfirmationView/helpers/transactionErrorMessage.js';
-import '../../../../components/IconButton/IconButton.js';
 import '../../../../components/Input/Input.js';
 import '../../../../components/PasskeyCreatedSuccessBanner/PasskeyCreatedSuccessBanner.js';
 import '../../../../context/PasskeyContext/PasskeyContext.js';
@@ -74,7 +75,6 @@ import { useDynamicModals } from '../../../../utils/hooks/useDynamicModals/useDy
 import '../../../../components/InlineWidget/InlineWidget.js';
 import '../../../../components/IsBrowser/IsBrowser.js';
 import { LogoutButton } from '../../../../components/LogoutButton/LogoutButton.js';
-import '../../../../components/MenuList/Dropdown/Dropdown.js';
 import '../../../../components/Popper/Popper/Popper.js';
 import '../../../../components/Popper/PopperContext/PopperContext.js';
 import 'qrcode';