@dynamic-labs/sdk-react-core 0.18.0-beta.28 → 0.18.0-beta.30

package/CHANGELOG.md

@@ -1,4 +1,28 @@
 
+## [0.18.0-beta.30](https://github.com/dynamic-labs/DynamicAuth/compare/v0.18.0-beta.29...v0.18.0-beta.30) (2023-08-04)
+
+### Bug Fixes
+
+* add improves to wallet events handling
+
+## [0.18.0-beta.29](https://github.com/dynamic-labs/DynamicAuth/compare/v0.18.0-beta.28...v0.18.0-beta.29) (2023-08-03)
+
+
+### ⚠ BREAKING CHANGES
+
+* remove deprecated multiwallet prop (#2821)
+
+### Bug Fixes
+
+* array of dynamicWagmiSettings not being sent, must be turned into object ([#2837](https://github.com/dynamic-labs/DynamicAuth/issues/2837)) ([fc5051d](https://github.com/dynamic-labs/DynamicAuth/commit/fc5051d3ce4c5e28d54a74cc9d74424748b52df9)), closes [#2835](https://github.com/dynamic-labs/DynamicAuth/issues/2835)
+* change network modal doesn't pop on secondary wallet, when primaryWallet was disconnected ([#2831](https://github.com/dynamic-labs/DynamicAuth/issues/2831)) ([4a78cc8](https://github.com/dynamic-labs/DynamicAuth/commit/4a78cc8c9004e6716fa9e35d8572c57bfd8bdc22))
+* connectSuccess callback is not being called when connecting new wallet after unlink ([#2829](https://github.com/dynamic-labs/DynamicAuth/issues/2829)) ([37795e5](https://github.com/dynamic-labs/DynamicAuth/commit/37795e5304d65766968ae6168d329b899c0afdfa))
+* **wcv2:** simulate chain change event in switchNetwork ([#2827](https://github.com/dynamic-labs/DynamicAuth/issues/2827)) ([98cff76](https://github.com/dynamic-labs/DynamicAuth/commit/98cff7687112ddbf2971fa4e42cc959f5be62014)), closes [#2809](https://github.com/dynamic-labs/DynamicAuth/issues/2809)
+* wrong wallet list is showing after disconnecting and network change ([#2832](https://github.com/dynamic-labs/DynamicAuth/issues/2832)) ([b7af548](https://github.com/dynamic-labs/DynamicAuth/commit/b7af5480a0f05b851cf9accb3ab0870fd2836a92))
+
+
+* remove deprecated multiwallet prop ([#2821](https://github.com/dynamic-labs/DynamicAuth/issues/2821)) ([d95173d](https://github.com/dynamic-labs/DynamicAuth/commit/d95173de890104b1b94b612976682c9d86ec4b17))
+
 ## [0.18.0-beta.28](https://github.com/dynamic-labs/DynamicAuth/compare/v0.18.0-RC.27...v0.18.0-beta.28) (2023-08-03)
 
 

package/package.cjs

@@ -2,7 +2,7 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-var version = "0.18.0-beta.28";
+var version = "0.18.0-beta.30";
 var dependencies = {
 	"react-focus-lock": "2.9.2",
 	"@dynamic-labs/iconic": "0.1.23",

package/package.js

@@ -1,4 +1,4 @@
-var version = "0.18.0-beta.28";
+var version = "0.18.0-beta.30";
 var dependencies = {
 	"react-focus-lock": "2.9.2",
 	"@dynamic-labs/iconic": "0.1.23",

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@dynamic-labs/sdk-react-core",
-  "version": "0.18.0-beta.28",
+  "version": "0.18.0-beta.30",
   "repository": {
     "type": "git",
     "url": "https://github.com/dynamic-labs/DynamicAuth.git",
@@ -16,13 +16,14 @@
     "formik": "2.2.9",
     "qrcode": "1.5.1",
     "ethers": "5.7.2",
-    "@dynamic-labs/logger": "0.18.0-beta.28",
-    "@dynamic-labs/multi-wallet": "0.18.0-beta.28",
-    "@dynamic-labs/rpc-providers": "0.18.0-beta.28",
-    "@dynamic-labs/types": "0.18.0-beta.28",
-    "@dynamic-labs/utils": "0.18.0-beta.28",
-    "@dynamic-labs/wallet-book": "0.18.0-beta.28",
-    "@dynamic-labs/wallet-connector-core": "0.18.0-beta.28"
+    "@dynamic-labs/logger": "0.18.0-beta.30",
+    "@dynamic-labs/multi-wallet": "0.18.0-beta.30",
+    "@dynamic-labs/rpc-providers": "0.18.0-beta.30",
+    "@dynamic-labs/types": "0.18.0-beta.30",
+    "@dynamic-labs/utils": "0.18.0-beta.30",
+    "@dynamic-labs/wallet-book": "0.18.0-beta.30",
+    "@dynamic-labs/wallet-connector-core": "0.18.0-beta.30",
+    "eventemitter3": "5.0.1"
   },
   "devDependencies": {
     "semver": "7.3.8"

package/src/lib/context/DynamicContext/DynamicContext.cjs

@@ -99,7 +99,7 @@ const EMPTY_INITIAL_USER = undefined;
 const DynamicContext = React.createContext(undefined);
 const DynamicContextProvider = ({ children, theme, settings, }) => {
     var _a, _b, _c, _d, _e, _f, _g, _h;
-    const { accessDeniedMessagePrimary, accessDeniedMessageSecondary, accessDeniedButton, apiBaseUrl, walletsByChain, cssOverrides, defaultNumberOfWalletsToShow = values.DEFAULT_NUMBER_OF_WALLETS_TO_SHOW, flowNetwork, initialAuthenticationMode = 'connect-and-sign', debugError = false, displaySiweStatement = true, newToWeb3WalletChainMap, enableVisitTrackingOnConnectOnly = true, environmentId, localStorageSuffix, eventsCallbacks, evmNetworks, walletsFilter, logLevel = 'WARN', multiWallet: deprecatedMultiWallet, notInTheListImageUrl, onboardingImageUrl, policiesConsentInnerComponent, customPrivacyPolicy, privacyPolicyUrl, signWithEmailWalletName, socialMediaLinkText, socialMediaIconUrl, socialMediaUrl, customTermsOfServices, termsOfServiceUrl, toolkitEnabled, siweStatement, shadowDOMEnabled = true, walletConnectors: walletConnectorsProp, socialProvidersFilter, } = settings;
+    const { accessDeniedMessagePrimary, accessDeniedMessageSecondary, accessDeniedButton, apiBaseUrl, walletsByChain, cssOverrides, defaultNumberOfWalletsToShow = values.DEFAULT_NUMBER_OF_WALLETS_TO_SHOW, flowNetwork, initialAuthenticationMode = 'connect-and-sign', debugError = false, displaySiweStatement = true, newToWeb3WalletChainMap, enableVisitTrackingOnConnectOnly = true, environmentId, localStorageSuffix, eventsCallbacks, evmNetworks, walletsFilter, logLevel = 'WARN', notInTheListImageUrl, onboardingImageUrl, policiesConsentInnerComponent, customPrivacyPolicy, privacyPolicyUrl, signWithEmailWalletName, socialMediaLinkText, socialMediaIconUrl, socialMediaUrl, customTermsOfServices, termsOfServiceUrl, toolkitEnabled, siweStatement, shadowDOMEnabled = true, walletConnectors: walletConnectorsProp, socialProvidersFilter, } = settings;
     let { walletConnectV1Bridge, appLogoUrl = 'https://demo.dynamic.xyz/assets/dynamic-logo.svg', appName = 'Dynamic Example', } = settings;
     if (!environmentId) {
         throw new utils.MissingEnvironmentIdError();
@@ -135,10 +135,7 @@ const DynamicContextProvider = ({ children, theme, settings, }) => {
         dynamicContextProps: { settings },
         environmentId,
     });
-    const { multiWallet, setMultiWallet } = useMultiWallet.useMultiWallet({
-        deprecatedMultiWallet,
-        multiWalletSettings: (_b = projectSettings === null || projectSettings === void 0 ? void 0 : projectSettings.sdk) === null || _b === void 0 ? void 0 : _b.multiWallet,
-    });
+    const { multiWallet, setMultiWallet } = useMultiWallet.useMultiWallet((_b = projectSettings === null || projectSettings === void 0 ? void 0 : projectSettings.sdk) === null || _b === void 0 ? void 0 : _b.multiWallet);
     // for demo proposes when running single wallet
     // it should not use bridge even having walletConnectV1Bridge set on settings
     // but v2 if enabled
@@ -360,9 +357,12 @@ const DynamicContextProvider = ({ children, theme, settings, }) => {
         user,
     });
     const sendWagmiSettings = (settings) => {
-        api.sendDynamicProps(environmentId, {
-            dynamicWagmiSettings: settings.dynamicWagmiSettings,
-        });
+        const { dynamicWagmiSettings } = settings;
+        if (dynamicWagmiSettings) {
+            api.sendDynamicProps(environmentId, {
+                dynamicWagmiSettings: { dynamicWagmiSettings },
+            });
+        }
     };
     const clearStatesOnBackClick = React.useCallback(() => _tslib.__awaiter(void 0, void 0, void 0, function* () {
         setDesktopUri('');

package/src/lib/context/DynamicContext/DynamicContext.d.ts

@@ -36,8 +36,6 @@ export interface DynamicContextProps {
          * @default WARN
          */
         logLevel?: keyof typeof LogLevel;
-        /** @deprecated enable multi wallet in the dashboard settings instead */
-        multiWallet?: boolean;
         newToWeb3WalletChainMap?: ChainToWalletMap;
         notInTheListImageUrl?: string;
         onboardingImageUrl?: string;

package/src/lib/context/DynamicContext/DynamicContext.js

@@ -95,7 +95,7 @@ const EMPTY_INITIAL_USER = undefined;
 const DynamicContext = createContext(undefined);
 const DynamicContextProvider = ({ children, theme, settings, }) => {
     var _a, _b, _c, _d, _e, _f, _g, _h;
-    const { accessDeniedMessagePrimary, accessDeniedMessageSecondary, accessDeniedButton, apiBaseUrl, walletsByChain, cssOverrides, defaultNumberOfWalletsToShow = DEFAULT_NUMBER_OF_WALLETS_TO_SHOW, flowNetwork, initialAuthenticationMode = 'connect-and-sign', debugError = false, displaySiweStatement = true, newToWeb3WalletChainMap, enableVisitTrackingOnConnectOnly = true, environmentId, localStorageSuffix, eventsCallbacks, evmNetworks, walletsFilter, logLevel = 'WARN', multiWallet: deprecatedMultiWallet, notInTheListImageUrl, onboardingImageUrl, policiesConsentInnerComponent, customPrivacyPolicy, privacyPolicyUrl, signWithEmailWalletName, socialMediaLinkText, socialMediaIconUrl, socialMediaUrl, customTermsOfServices, termsOfServiceUrl, toolkitEnabled, siweStatement, shadowDOMEnabled = true, walletConnectors: walletConnectorsProp, socialProvidersFilter, } = settings;
+    const { accessDeniedMessagePrimary, accessDeniedMessageSecondary, accessDeniedButton, apiBaseUrl, walletsByChain, cssOverrides, defaultNumberOfWalletsToShow = DEFAULT_NUMBER_OF_WALLETS_TO_SHOW, flowNetwork, initialAuthenticationMode = 'connect-and-sign', debugError = false, displaySiweStatement = true, newToWeb3WalletChainMap, enableVisitTrackingOnConnectOnly = true, environmentId, localStorageSuffix, eventsCallbacks, evmNetworks, walletsFilter, logLevel = 'WARN', notInTheListImageUrl, onboardingImageUrl, policiesConsentInnerComponent, customPrivacyPolicy, privacyPolicyUrl, signWithEmailWalletName, socialMediaLinkText, socialMediaIconUrl, socialMediaUrl, customTermsOfServices, termsOfServiceUrl, toolkitEnabled, siweStatement, shadowDOMEnabled = true, walletConnectors: walletConnectorsProp, socialProvidersFilter, } = settings;
     let { walletConnectV1Bridge, appLogoUrl = 'https://demo.dynamic.xyz/assets/dynamic-logo.svg', appName = 'Dynamic Example', } = settings;
     if (!environmentId) {
         throw new MissingEnvironmentIdError();
@@ -131,10 +131,7 @@ const DynamicContextProvider = ({ children, theme, settings, }) => {
         dynamicContextProps: { settings },
         environmentId,
     });
-    const { multiWallet, setMultiWallet } = useMultiWallet({
-        deprecatedMultiWallet,
-        multiWalletSettings: (_b = projectSettings === null || projectSettings === void 0 ? void 0 : projectSettings.sdk) === null || _b === void 0 ? void 0 : _b.multiWallet,
-    });
+    const { multiWallet, setMultiWallet } = useMultiWallet((_b = projectSettings === null || projectSettings === void 0 ? void 0 : projectSettings.sdk) === null || _b === void 0 ? void 0 : _b.multiWallet);
     // for demo proposes when running single wallet
     // it should not use bridge even having walletConnectV1Bridge set on settings
     // but v2 if enabled
@@ -356,9 +353,12 @@ const DynamicContextProvider = ({ children, theme, settings, }) => {
         user,
     });
     const sendWagmiSettings = (settings) => {
-        sendDynamicProps(environmentId, {
-            dynamicWagmiSettings: settings.dynamicWagmiSettings,
-        });
+        const { dynamicWagmiSettings } = settings;
+        if (dynamicWagmiSettings) {
+            sendDynamicProps(environmentId, {
+                dynamicWagmiSettings: { dynamicWagmiSettings },
+            });
+        }
     };
     const clearStatesOnBackClick = useCallback(() => __awaiter(void 0, void 0, void 0, function* () {
         setDesktopUri('');

package/src/lib/utils/hooks/authenticationHooks/useConnectAndSign/useConnectAndSign.cjs

@@ -28,11 +28,11 @@ require('@dynamic-labs/multi-wallet');
 var isSupportedNetwork = require('../../../functions/isSupportedNetwork/isSupportedNetwork.cjs');
 var isProgrammableNetworkSwitchSupported = require('../../../functions/isProgrammableNetworkSwitchSupported/isProgrammableNetworkSwitchSupported.cjs');
 
-const useConnectAndSign = () => {
+const useConnectAndSign = ({ shouldUpdateWallets = true } = {}) => {
     const { setView, goToInitialView } = ViewContext.useViewContext();
     const { setErrorMessage } = ErrorContext.useErrorContext();
     const { captchaToken } = CaptchaContext.useCaptchaContext();
-    const { authMode, connectWallet, consumeNonce, displaySiweStatement, environmentId, projectSettings, setIsSingleWalletAccount, user, walletUiUtils, setCallback, setIsVerificationInProgress, isFullyConnected, } = useInternalDynamicContext.useInternalDynamicContext();
+    const { authMode, connectWallet, consumeNonce, displaySiweStatement, environmentId, projectSettings, setIsSingleWalletAccount, user, walletUiUtils, setCallback, setIsVerificationInProgress, isFullyConnected, walletsToConnectByChain, } = useInternalDynamicContext.useInternalDynamicContext();
     const { handleWalletsToConnect } = useHandleWalletsToConnect.useHandleWalletsToConnect();
     const verifyWallet = useVerifyWallet.useVerifyWallet({
         consumeNonce,
@@ -72,8 +72,10 @@ const useConnectAndSign = () => {
             }
             if (isConnectOnly.isConnectOnly(user, authMode)) {
                 localStorage.LocalStorage.setToLS(localStorage$1.LAST_USED_WALLET, walletConnector.name);
-                handleWalletsToConnect();
-                if (!isFullyConnected) {
+                if (shouldUpdateWallets) {
+                    handleWalletsToConnect();
+                }
+                if (!isFullyConnected || (walletsToConnectByChain === null || walletsToConnectByChain === void 0 ? void 0 : walletsToConnectByChain.length)) {
                     setCallback('connectSuccess');
                 }
                 return;

package/src/lib/utils/hooks/authenticationHooks/useConnectAndSign/useConnectAndSign.d.ts

@@ -3,5 +3,7 @@ type Props = {
     fetchPublicAddressOpts?: FetchPublicAddressOpts;
     walletConnector: WalletConnector;
 };
-export declare const useConnectAndSign: () => ({ walletConnector, fetchPublicAddressOpts, }: Props) => Promise<void>;
+export declare const useConnectAndSign: ({ shouldUpdateWallets }?: {
+    shouldUpdateWallets?: boolean | undefined;
+}) => ({ walletConnector, fetchPublicAddressOpts, }: Props) => Promise<void>;
 export {};

package/src/lib/utils/hooks/authenticationHooks/useConnectAndSign/useConnectAndSign.js

@@ -24,11 +24,11 @@ import '@dynamic-labs/multi-wallet';
 import { isSupportedNetwork } from '../../../functions/isSupportedNetwork/isSupportedNetwork.js';
 import { isProgrammableNetworkSwitchSupported } from '../../../functions/isProgrammableNetworkSwitchSupported/isProgrammableNetworkSwitchSupported.js';
 
-const useConnectAndSign = () => {
+const useConnectAndSign = ({ shouldUpdateWallets = true } = {}) => {
     const { setView, goToInitialView } = useViewContext();
     const { setErrorMessage } = useErrorContext();
     const { captchaToken } = useCaptchaContext();
-    const { authMode, connectWallet, consumeNonce, displaySiweStatement, environmentId, projectSettings, setIsSingleWalletAccount, user, walletUiUtils, setCallback, setIsVerificationInProgress, isFullyConnected, } = useInternalDynamicContext();
+    const { authMode, connectWallet, consumeNonce, displaySiweStatement, environmentId, projectSettings, setIsSingleWalletAccount, user, walletUiUtils, setCallback, setIsVerificationInProgress, isFullyConnected, walletsToConnectByChain, } = useInternalDynamicContext();
     const { handleWalletsToConnect } = useHandleWalletsToConnect();
     const verifyWallet = useVerifyWallet({
         consumeNonce,
@@ -68,8 +68,10 @@ const useConnectAndSign = () => {
             }
             if (isConnectOnly(user, authMode)) {
                 LocalStorage.setToLS(LAST_USED_WALLET, walletConnector.name);
-                handleWalletsToConnect();
-                if (!isFullyConnected) {
+                if (shouldUpdateWallets) {
+                    handleWalletsToConnect();
+                }
+                if (!isFullyConnected || (walletsToConnectByChain === null || walletsToConnectByChain === void 0 ? void 0 : walletsToConnectByChain.length)) {
                     setCallback('connectSuccess');
                 }
                 return;

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

@@ -30,3 +30,4 @@ export { useInterval } from './useInterval/useInterval';
 export { useCountdown } from './useCountdown/useCountdown';
 export { useValidateSession } from './useValidateSession';
 export { useEventListener } from './useEventListener';
+export { useWalletConnectorEvent } from './useWalletConnectorEvent';

package/src/lib/utils/hooks/multiWallet/useMultiWallet/useMultiWallet.cjs

@@ -4,9 +4,8 @@ Object.defineProperty(exports, '__esModule', { value: true });
 
 var React = require('react');
 
-const useMultiWallet = ({ deprecatedMultiWallet, multiWalletSettings, }) => {
-    var _a;
-    const isMultiWalletEnabled = (_a = deprecatedMultiWallet !== null && deprecatedMultiWallet !== void 0 ? deprecatedMultiWallet : multiWalletSettings) !== null && _a !== void 0 ? _a : false;
+const useMultiWallet = (multiWalletSettings) => {
+    const isMultiWalletEnabled = multiWalletSettings !== null && multiWalletSettings !== void 0 ? multiWalletSettings : false;
     const [multiWallet, setMultiWallet] = React.useState(isMultiWalletEnabled);
     React.useEffect(() => {
         setMultiWallet(isMultiWalletEnabled);

package/src/lib/utils/hooks/multiWallet/useMultiWallet/useMultiWallet.d.ts

@@ -1,8 +1,5 @@
 /// <reference types="react" />
-export declare const useMultiWallet: ({ deprecatedMultiWallet, multiWalletSettings, }: {
-    deprecatedMultiWallet?: boolean | undefined;
-    multiWalletSettings?: boolean | undefined;
-}) => {
+export declare const useMultiWallet: (multiWalletSettings?: boolean) => {
     multiWallet: boolean;
     setMultiWallet: import("react").Dispatch<import("react").SetStateAction<boolean>>;
 };

package/src/lib/utils/hooks/multiWallet/useMultiWallet/useMultiWallet.js

@@ -1,8 +1,7 @@
 import { useState, useEffect } from 'react';
 
-const useMultiWallet = ({ deprecatedMultiWallet, multiWalletSettings, }) => {
-    var _a;
-    const isMultiWalletEnabled = (_a = deprecatedMultiWallet !== null && deprecatedMultiWallet !== void 0 ? deprecatedMultiWallet : multiWalletSettings) !== null && _a !== void 0 ? _a : false;
+const useMultiWallet = (multiWalletSettings) => {
+    const isMultiWalletEnabled = multiWalletSettings !== null && multiWalletSettings !== void 0 ? multiWalletSettings : false;
     const [multiWallet, setMultiWallet] = useState(isMultiWalletEnabled);
     useEffect(() => {
         setMultiWallet(isMultiWalletEnabled);

package/src/lib/utils/hooks/useWalletConnectorEvent/index.d.ts

@@ -0,0 +1 @@
+export { useWalletConnectorEvent } from './useWalletConnectorEvent';

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

@@ -0,0 +1,42 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var React = require('react');
+var useIsomorphicLayoutEffect = require('../useIsomorphicLayoutEffect/useIsomorphicLayoutEffect.cjs');
+
+const useWalletConnectorEvent = (eventEmitters, eventName, handler) => {
+    const callbackRef = React.useRef(handler);
+    useIsomorphicLayoutEffect.useIsomorphicLayoutEffect(() => {
+        callbackRef.current = handler;
+    }, [handler]);
+    React.useEffect(() => {
+        if (!eventEmitters)
+            return;
+        const eventEmittersArray = Array.isArray(eventEmitters)
+            ? eventEmitters
+            : [eventEmitters];
+        /**
+         * Initialize the event listeners for the wallet connectors
+         * to ensure they were initialized before listening to events
+         *
+         * This will be removed when all wallets are migrated to
+         * use the event emitter "emit" method
+         *
+         * Ticket todo - QNTM-88
+         */
+        eventEmittersArray.forEach((connector) => connector.initEventListener());
+        const uniqueEventEmitters = Array.from(new Set(eventEmittersArray));
+        const unsubscribeCallbacks = uniqueEventEmitters.map((emitter) => {
+            const callback = (...args) => {
+                callbackRef.current(emitter, ...args);
+            };
+            emitter.on(eventName, callback);
+            return () => emitter.off(eventName, callback);
+        });
+        return () => unsubscribeCallbacks.forEach((unsubscribe) => unsubscribe());
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [eventEmitters, eventName]);
+};
+
+exports.useWalletConnectorEvent = useWalletConnectorEvent;

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

@@ -0,0 +1,12 @@
+import { WalletConnector, WalletConnectorEventTypes } from '@dynamic-labs/wallet-connector-core';
+/**
+ * This type is a copy of the ArgumentMap type from eventemitter3 package.
+ * Is used extract the arguments from a event type.
+ * Then we can use the arguments to reconstruct the callback we want
+ */
+type ArgumentMap<T extends object> = {
+    [K in keyof T]: T[K] extends (...args: any[]) => void ? Parameters<T[K]> : T[K] extends any[] ? T[K] : any[];
+};
+type EventArg<Event extends keyof WalletConnectorEventTypes> = ArgumentMap<WalletConnectorEventTypes>[Extract<Event, keyof WalletConnectorEventTypes>];
+export declare const useWalletConnectorEvent: <Event_1 extends keyof WalletConnectorEventTypes = keyof WalletConnectorEventTypes>(eventEmitters: WalletConnector | WalletConnector[] | undefined, eventName: Event_1, handler: (connector: WalletConnector, ...args: EventArg<Event_1>) => void) => void;
+export {};

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

@@ -0,0 +1,38 @@
+import { useRef, useEffect } from 'react';
+import { useIsomorphicLayoutEffect } from '../useIsomorphicLayoutEffect/useIsomorphicLayoutEffect.js';
+
+const useWalletConnectorEvent = (eventEmitters, eventName, handler) => {
+    const callbackRef = useRef(handler);
+    useIsomorphicLayoutEffect(() => {
+        callbackRef.current = handler;
+    }, [handler]);
+    useEffect(() => {
+        if (!eventEmitters)
+            return;
+        const eventEmittersArray = Array.isArray(eventEmitters)
+            ? eventEmitters
+            : [eventEmitters];
+        /**
+         * Initialize the event listeners for the wallet connectors
+         * to ensure they were initialized before listening to events
+         *
+         * This will be removed when all wallets are migrated to
+         * use the event emitter "emit" method
+         *
+         * Ticket todo - QNTM-88
+         */
+        eventEmittersArray.forEach((connector) => connector.initEventListener());
+        const uniqueEventEmitters = Array.from(new Set(eventEmittersArray));
+        const unsubscribeCallbacks = uniqueEventEmitters.map((emitter) => {
+            const callback = (...args) => {
+                callbackRef.current(emitter, ...args);
+            };
+            emitter.on(eventName, callback);
+            return () => emitter.off(eventName, callback);
+        });
+        return () => unsubscribeCallbacks.forEach((unsubscribe) => unsubscribe());
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [eventEmitters, eventName]);
+};
+
+export { useWalletConnectorEvent };

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

@@ -44,6 +44,18 @@ const useWalletConnectors = ({ authMode, authToken, connectedWallets, wallets: a
         }
         return connectedWallets;
     }, [authMode, connectedWallets, linkedWallets, user, onboardingOnlyJwt]);
+    /**
+     * This useEffect is temporary.
+     * While the wallet connectors don't use the event emitter, we need to manually
+     * initialize the bridge between the old event listeners and the new event emitter.
+     * When the wallet connectors are migrated to the new event emitter, there will be no
+     * need to initialize or teardown event listeners, then we can remove this useEffect.
+     * @todo remove this useEffect
+     * Ticket todo - QNTM-88
+     */
+    React.useEffect(() => walletsBasedOnAuthMode.forEach((wallet) => {
+        wallet.connector.initEventListener();
+    }), [walletsBasedOnAuthMode]);
     const { connectedWalletMap, computeConnectedStateForWallets, didConnectedStateLoad, } = useWalletsConnectionState.useWalletsConnectionState(walletsBasedOnAuthMode);
     const wallets = React.useMemo(() => walletsBasedOnAuthMode.map((wallet) => (Object.assign(Object.assign({}, wallet), { connected: Boolean(connectedWalletMap[wallet.id]) }))), [connectedWalletMap, walletsBasedOnAuthMode]);
     React.useEffect(() => {

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

@@ -40,6 +40,18 @@ const useWalletConnectors = ({ authMode, authToken, connectedWallets, wallets: a
         }
         return connectedWallets;
     }, [authMode, connectedWallets, linkedWallets, user, onboardingOnlyJwt]);
+    /**
+     * This useEffect is temporary.
+     * While the wallet connectors don't use the event emitter, we need to manually
+     * initialize the bridge between the old event listeners and the new event emitter.
+     * When the wallet connectors are migrated to the new event emitter, there will be no
+     * need to initialize or teardown event listeners, then we can remove this useEffect.
+     * @todo remove this useEffect
+     * Ticket todo - QNTM-88
+     */
+    useEffect(() => walletsBasedOnAuthMode.forEach((wallet) => {
+        wallet.connector.initEventListener();
+    }), [walletsBasedOnAuthMode]);
     const { connectedWalletMap, computeConnectedStateForWallets, didConnectedStateLoad, } = useWalletsConnectionState(walletsBasedOnAuthMode);
     const wallets = useMemo(() => walletsBasedOnAuthMode.map((wallet) => (Object.assign(Object.assign({}, wallet), { connected: Boolean(connectedWalletMap[wallet.id]) }))), [connectedWalletMap, walletsBasedOnAuthMode]);
     useEffect(() => {

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

@@ -16,8 +16,8 @@ require('../../constants/colors.cjs');
 require('../../../shared/utils/classes/storage/localStorage.cjs');
 require('ethers');
 require('../../../shared/consts/index.cjs');
+var useWalletConnectorEvent = require('../useWalletConnectorEvent/useWalletConnectorEvent.cjs');
 
-const orderedSecondaryWalletAddresses = (wallets) => wallets.map((wallet) => wallet.address).sort();
 const useWalletEventListeners = ({ computeConnectedStateForWallets, handleLogOut, multiWallet, multiWalletWidgetState, primaryWallet, secondaryWallets, selectedWalletConnector, selectedWalletWithAction, setSelectedWalletConnector, setSelectedWalletWithAction, setMultiWalletWidgetState, user, setPrimaryWalletId, authMode, refreshConnectedWallet, }) => {
     const [loadingNetwork, setLoadingNetwork] = React.useState(true);
     const [network, setNetwork] = React.useState(undefined);
@@ -39,31 +39,100 @@ const useWalletEventListeners = ({ computeConnectedStateForWallets, handleLogOut
         });
         fetchNetwork();
     }, [primaryWallet === null || primaryWallet === void 0 ? void 0 : primaryWallet.id]);
-    React.useEffect(() => {
+    useWalletConnectorEvent.useWalletConnectorEvent(primaryWallet === null || primaryWallet === void 0 ? void 0 : primaryWallet.connector, 'disconnect', () => {
+        logger.logger.debug('primary wallet disconnect');
+        handleLogOut();
+    });
+    useWalletConnectorEvent.useWalletConnectorEvent(primaryWallet === null || primaryWallet === void 0 ? void 0 : primaryWallet.connector, 'chainChange', (_, { chain }) => {
+        logger.logger.debug('primary wallet chain change', { chain });
         if (!primaryWallet) {
             return;
         }
-        const seen = new Set();
-        addPrimaryWalletEventListeners(seen);
-        addSecondaryWalletEventListeners(seen);
-        return () => {
-            primaryWallet.connector.teardownEventListeners();
-            for (const wallet of secondaryWallets) {
-                wallet.connector.teardownEventListeners();
+        refreshConnectedWallet(primaryWallet.id, primaryWallet.connector);
+        // https://linear.app/dynamic-labs/issue/QNTM-84/breaking-change-rename-network-to-primarywalletnetwork
+        if (primaryWallet.chain === 'starknet') {
+            setNetwork(chain);
+        }
+        else {
+            setNetwork(parseInt(chain));
+        }
+    });
+    useWalletConnectorEvent.useWalletConnectorEvent(primaryWallet === null || primaryWallet === void 0 ? void 0 : primaryWallet.connector, 'accountChange', (_, { accounts }) => _tslib.__awaiter(void 0, void 0, void 0, function* () {
+        logger.logger.debug('primary wallet account change', {
+            accounts,
+        });
+        // change the api here
+        if (!primaryWallet)
+            return;
+        const [newAddress] = accounts;
+        const newWallet = secondaryWallets.find((wallet) => walletConnectorCore.isSameAddress(wallet.address, newAddress, wallet.chain));
+        if (authMode === 'connect-only') {
+            refreshConnectedWallet(primaryWallet.id, primaryWallet.connector);
+            return;
+        }
+        if (walletConnectorCore.isSameAddress(newAddress, primaryWallet.address, primaryWallet.chain)) {
+            setMultiWalletWidgetState('idle');
+        }
+        else if (!multiWallet) {
+            yield handleLogOut();
+            return;
+        }
+        else if (multiWalletWidgetState === 'awaiting_account_switch') {
+            handleAccountChangeWhenAwaitingAccountSwitch(true, newAddress);
+        }
+        else if (multiWalletWidgetState === 'idle' && newWallet) {
+            setPrimaryWalletId(newWallet.id);
+        }
+        else if (multiWalletWidgetState === 'idle' && !newWallet) {
+            if (user) {
+                setMultiWalletWidgetState('detected_new_wallet');
+                setSelectedWalletConnector(primaryWallet.connector);
+                yield computeConnectedStateForWallets();
+                return;
             }
-        };
-        // justification: we don't want to setup event listeners more than needed
-        // eslint-disable-next-line react-hooks/exhaustive-deps
-    }, [
-        user,
-        primaryWallet === null || primaryWallet === void 0 ? void 0 : primaryWallet.address,
-        primaryWallet === null || primaryWallet === void 0 ? void 0 : primaryWallet.id,
-        multiWalletWidgetState,
-        // eslint-disable-next-line react-hooks/exhaustive-deps
-        orderedSecondaryWalletAddresses(secondaryWallets).join(),
-        selectedWalletConnector === null || selectedWalletConnector === void 0 ? void 0 : selectedWalletConnector.name,
-        primaryWallet === null || primaryWallet === void 0 ? void 0 : primaryWallet.connector.isInitialized,
-    ]);
+        }
+        else {
+            logger.logger.error(`Unexpected multiWalletWidgetState (${multiWalletWidgetState}) and onAccountChange combination. Resetting state to idle.`);
+            setMultiWalletWidgetState('idle');
+        }
+        yield computeConnectedStateForWallets();
+    }));
+    const uniqueNonPrimaryWallets = React.useMemo(() => {
+        const primaryConnector = primaryWallet === null || primaryWallet === void 0 ? void 0 : primaryWallet.connector;
+        const secondaryConnectors = secondaryWallets.map(({ connector }) => connector);
+        const allWalletConnectors = new Set([
+            ...secondaryConnectors,
+            primaryConnector,
+            selectedWalletConnector,
+        ].filter((connector) => Boolean(connector)));
+        if (primaryConnector) {
+            allWalletConnectors.delete(primaryConnector);
+        }
+        return Array.from(allWalletConnectors);
+    }, [secondaryWallets, selectedWalletConnector, primaryWallet === null || primaryWallet === void 0 ? void 0 : primaryWallet.connector]);
+    useWalletConnectorEvent.useWalletConnectorEvent(uniqueNonPrimaryWallets, 'accountChange', () => _tslib.__awaiter(void 0, void 0, void 0, function* () {
+        logger.logger.debug('secondary wallet account change');
+        if (authMode === 'connect-only' && secondaryWallets.length) {
+            refreshConnectedWallet(secondaryWallets[0].id, secondaryWallets[0].connector);
+            return;
+        }
+        if (multiWalletWidgetState === 'awaiting_account_switch') {
+            handleAccountChangeWhenAwaitingAccountSwitch(false, (selectedWalletWithAction === null || selectedWalletWithAction === void 0 ? void 0 : selectedWalletWithAction.wallet.address) || '');
+        }
+        yield computeConnectedStateForWallets();
+    }));
+    useWalletConnectorEvent.useWalletConnectorEvent(uniqueNonPrimaryWallets, 'chainChange', () => _tslib.__awaiter(void 0, void 0, void 0, function* () {
+        logger.logger.debug('secondary wallet chain change');
+        // We should pass the proper walletId here
+        if (!secondaryWallets.length) {
+            return;
+        }
+        refreshConnectedWallet(secondaryWallets[0].id, secondaryWallets[0].connector);
+    }));
+    useWalletConnectorEvent.useWalletConnectorEvent(uniqueNonPrimaryWallets, 'disconnect', () => {
+        logger.logger.debug('secondary wallet disconnect');
+        computeConnectedStateForWallets();
+    });
     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...
@@ -86,120 +155,6 @@ const useWalletEventListeners = ({ computeConnectedStateForWallets, handleLogOut
         setSelectedWalletWithAction,
         setPrimaryWalletId,
     ]);
-    const addPrimaryWalletEventListeners = React.useCallback((seen) => {
-        if (!primaryWallet) {
-            return;
-        }
-        seen.add(primaryWallet.connector.name);
-        primaryWallet.connector.setupEventListeners({
-            onAccountChange: (accounts) => _tslib.__awaiter(void 0, void 0, void 0, function* () {
-                const [newAddress] = accounts;
-                const newWallet = secondaryWallets.find((wallet) => walletConnectorCore.isSameAddress(wallet.address, newAddress, wallet.chain));
-                if (authMode === 'connect-only') {
-                    refreshConnectedWallet(primaryWallet.id, primaryWallet.connector);
-                    return;
-                }
-                if (walletConnectorCore.isSameAddress(newAddress, primaryWallet.address, primaryWallet.chain)) {
-                    setMultiWalletWidgetState('idle');
-                }
-                else if (!multiWallet) {
-                    yield handleLogOut();
-                    return;
-                }
-                else if (multiWalletWidgetState === 'awaiting_account_switch') {
-                    handleAccountChangeWhenAwaitingAccountSwitch(true, newAddress);
-                }
-                else if (multiWalletWidgetState === 'idle' && newWallet) {
-                    setPrimaryWalletId(newWallet.id);
-                }
-                else if (multiWalletWidgetState === 'idle' && !newWallet) {
-                    if (user) {
-                        setMultiWalletWidgetState('detected_new_wallet');
-                        setSelectedWalletConnector(primaryWallet.connector);
-                        yield computeConnectedStateForWallets();
-                        return;
-                    }
-                }
-                else {
-                    logger.logger.error(`Unexpected multiWalletWidgetState (${multiWalletWidgetState}) and onAccountChange combination. Resetting state to idle.`);
-                    setMultiWalletWidgetState('idle');
-                }
-                yield computeConnectedStateForWallets();
-            }),
-            onChainChange: (chain) => _tslib.__awaiter(void 0, void 0, void 0, function* () {
-                if (!primaryWallet) {
-                    return;
-                }
-                refreshConnectedWallet(primaryWallet.id, primaryWallet.connector);
-                // https://linear.app/dynamic-labs/issue/QNTM-84/breaking-change-rename-network-to-primarywalletnetwork
-                if (primaryWallet.chain === 'starknet') {
-                    setNetwork(chain);
-                }
-                else {
-                    setNetwork(parseInt(chain));
-                }
-            }),
-            onDisconnect: handleLogOut,
-        });
-    }, [
-        authMode,
-        primaryWallet,
-        setMultiWalletWidgetState,
-        multiWallet,
-        user,
-        computeConnectedStateForWallets,
-        handleLogOut,
-        multiWalletWidgetState,
-        secondaryWallets,
-        setSelectedWalletConnector,
-        handleAccountChangeWhenAwaitingAccountSwitch,
-        setPrimaryWalletId,
-        refreshConnectedWallet,
-    ]);
-    const addSecondaryWalletEventListeners = React.useCallback((seen) => {
-        const secondaryListeners = {
-            onAccountChange: () => _tslib.__awaiter(void 0, void 0, void 0, function* () {
-                if (authMode === 'connect-only' && secondaryWallets.length) {
-                    refreshConnectedWallet(secondaryWallets[0].id, secondaryWallets[0].connector);
-                    return;
-                }
-                if (multiWalletWidgetState === 'awaiting_account_switch') {
-                    handleAccountChangeWhenAwaitingAccountSwitch(false, (selectedWalletWithAction === null || selectedWalletWithAction === void 0 ? void 0 : selectedWalletWithAction.wallet.address) || '');
-                }
-                yield computeConnectedStateForWallets();
-            }),
-            onChainChange: () => _tslib.__awaiter(void 0, void 0, void 0, function* () {
-                // We should pass the proper walletId here
-                if (!secondaryWallets.length) {
-                    return;
-                }
-                refreshConnectedWallet(secondaryWallets[0].id, secondaryWallets[0].connector);
-            }),
-            onDisconnect: () => _tslib.__awaiter(void 0, void 0, void 0, function* () {
-                yield computeConnectedStateForWallets();
-            }),
-        };
-        if (selectedWalletConnector && !seen.has(selectedWalletConnector.name)) {
-            seen.add(selectedWalletConnector.name);
-            selectedWalletConnector.setupEventListeners(secondaryListeners);
-        }
-        for (const wallet of secondaryWallets) {
-            if (seen.has(wallet.connector.name)) {
-                continue;
-            }
-            seen.add(wallet.connector.name);
-            wallet.connector.setupEventListeners(secondaryListeners);
-        }
-    }, [
-        authMode,
-        computeConnectedStateForWallets,
-        selectedWalletConnector,
-        selectedWalletWithAction,
-        handleAccountChangeWhenAwaitingAccountSwitch,
-        multiWalletWidgetState,
-        secondaryWallets,
-        refreshConnectedWallet,
-    ]);
     return {
         loadingNetwork,
         network,

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

@@ -1,5 +1,5 @@
 import { __awaiter } from '../../../../../_virtual/_tslib.js';
-import { useState, useEffect, useCallback } from 'react';
+import { useState, useEffect, useMemo, useCallback } from 'react';
 import { isSameAddress } from '@dynamic-labs/wallet-connector-core';
 import '@dynamic-labs/sdk-api';
 import { logger } from '../../../shared/logger.js';
@@ -12,8 +12,8 @@ import '../../constants/colors.js';
 import '../../../shared/utils/classes/storage/localStorage.js';
 import 'ethers';
 import '../../../shared/consts/index.js';
+import { useWalletConnectorEvent } from '../useWalletConnectorEvent/useWalletConnectorEvent.js';
 
-const orderedSecondaryWalletAddresses = (wallets) => wallets.map((wallet) => wallet.address).sort();
 const useWalletEventListeners = ({ computeConnectedStateForWallets, handleLogOut, multiWallet, multiWalletWidgetState, primaryWallet, secondaryWallets, selectedWalletConnector, selectedWalletWithAction, setSelectedWalletConnector, setSelectedWalletWithAction, setMultiWalletWidgetState, user, setPrimaryWalletId, authMode, refreshConnectedWallet, }) => {
     const [loadingNetwork, setLoadingNetwork] = useState(true);
     const [network, setNetwork] = useState(undefined);
@@ -35,31 +35,100 @@ const useWalletEventListeners = ({ computeConnectedStateForWallets, handleLogOut
         });
         fetchNetwork();
     }, [primaryWallet === null || primaryWallet === void 0 ? void 0 : primaryWallet.id]);
-    useEffect(() => {
+    useWalletConnectorEvent(primaryWallet === null || primaryWallet === void 0 ? void 0 : primaryWallet.connector, 'disconnect', () => {
+        logger.debug('primary wallet disconnect');
+        handleLogOut();
+    });
+    useWalletConnectorEvent(primaryWallet === null || primaryWallet === void 0 ? void 0 : primaryWallet.connector, 'chainChange', (_, { chain }) => {
+        logger.debug('primary wallet chain change', { chain });
         if (!primaryWallet) {
             return;
         }
-        const seen = new Set();
-        addPrimaryWalletEventListeners(seen);
-        addSecondaryWalletEventListeners(seen);
-        return () => {
-            primaryWallet.connector.teardownEventListeners();
-            for (const wallet of secondaryWallets) {
-                wallet.connector.teardownEventListeners();
+        refreshConnectedWallet(primaryWallet.id, primaryWallet.connector);
+        // https://linear.app/dynamic-labs/issue/QNTM-84/breaking-change-rename-network-to-primarywalletnetwork
+        if (primaryWallet.chain === 'starknet') {
+            setNetwork(chain);
+        }
+        else {
+            setNetwork(parseInt(chain));
+        }
+    });
+    useWalletConnectorEvent(primaryWallet === null || primaryWallet === void 0 ? void 0 : primaryWallet.connector, 'accountChange', (_, { accounts }) => __awaiter(void 0, void 0, void 0, function* () {
+        logger.debug('primary wallet account change', {
+            accounts,
+        });
+        // change the api here
+        if (!primaryWallet)
+            return;
+        const [newAddress] = accounts;
+        const newWallet = secondaryWallets.find((wallet) => isSameAddress(wallet.address, newAddress, wallet.chain));
+        if (authMode === 'connect-only') {
+            refreshConnectedWallet(primaryWallet.id, primaryWallet.connector);
+            return;
+        }
+        if (isSameAddress(newAddress, primaryWallet.address, primaryWallet.chain)) {
+            setMultiWalletWidgetState('idle');
+        }
+        else if (!multiWallet) {
+            yield handleLogOut();
+            return;
+        }
+        else if (multiWalletWidgetState === 'awaiting_account_switch') {
+            handleAccountChangeWhenAwaitingAccountSwitch(true, newAddress);
+        }
+        else if (multiWalletWidgetState === 'idle' && newWallet) {
+            setPrimaryWalletId(newWallet.id);
+        }
+        else if (multiWalletWidgetState === 'idle' && !newWallet) {
+            if (user) {
+                setMultiWalletWidgetState('detected_new_wallet');
+                setSelectedWalletConnector(primaryWallet.connector);
+                yield computeConnectedStateForWallets();
+                return;
             }
-        };
-        // justification: we don't want to setup event listeners more than needed
-        // eslint-disable-next-line react-hooks/exhaustive-deps
-    }, [
-        user,
-        primaryWallet === null || primaryWallet === void 0 ? void 0 : primaryWallet.address,
-        primaryWallet === null || primaryWallet === void 0 ? void 0 : primaryWallet.id,
-        multiWalletWidgetState,
-        // eslint-disable-next-line react-hooks/exhaustive-deps
-        orderedSecondaryWalletAddresses(secondaryWallets).join(),
-        selectedWalletConnector === null || selectedWalletConnector === void 0 ? void 0 : selectedWalletConnector.name,
-        primaryWallet === null || primaryWallet === void 0 ? void 0 : primaryWallet.connector.isInitialized,
-    ]);
+        }
+        else {
+            logger.error(`Unexpected multiWalletWidgetState (${multiWalletWidgetState}) and onAccountChange combination. Resetting state to idle.`);
+            setMultiWalletWidgetState('idle');
+        }
+        yield computeConnectedStateForWallets();
+    }));
+    const uniqueNonPrimaryWallets = useMemo(() => {
+        const primaryConnector = primaryWallet === null || primaryWallet === void 0 ? void 0 : primaryWallet.connector;
+        const secondaryConnectors = secondaryWallets.map(({ connector }) => connector);
+        const allWalletConnectors = new Set([
+            ...secondaryConnectors,
+            primaryConnector,
+            selectedWalletConnector,
+        ].filter((connector) => Boolean(connector)));
+        if (primaryConnector) {
+            allWalletConnectors.delete(primaryConnector);
+        }
+        return Array.from(allWalletConnectors);
+    }, [secondaryWallets, selectedWalletConnector, primaryWallet === null || primaryWallet === void 0 ? void 0 : primaryWallet.connector]);
+    useWalletConnectorEvent(uniqueNonPrimaryWallets, 'accountChange', () => __awaiter(void 0, void 0, void 0, function* () {
+        logger.debug('secondary wallet account change');
+        if (authMode === 'connect-only' && secondaryWallets.length) {
+            refreshConnectedWallet(secondaryWallets[0].id, secondaryWallets[0].connector);
+            return;
+        }
+        if (multiWalletWidgetState === 'awaiting_account_switch') {
+            handleAccountChangeWhenAwaitingAccountSwitch(false, (selectedWalletWithAction === null || selectedWalletWithAction === void 0 ? void 0 : selectedWalletWithAction.wallet.address) || '');
+        }
+        yield computeConnectedStateForWallets();
+    }));
+    useWalletConnectorEvent(uniqueNonPrimaryWallets, 'chainChange', () => __awaiter(void 0, void 0, void 0, function* () {
+        logger.debug('secondary wallet chain change');
+        // We should pass the proper walletId here
+        if (!secondaryWallets.length) {
+            return;
+        }
+        refreshConnectedWallet(secondaryWallets[0].id, secondaryWallets[0].connector);
+    }));
+    useWalletConnectorEvent(uniqueNonPrimaryWallets, 'disconnect', () => {
+        logger.debug('secondary wallet disconnect');
+        computeConnectedStateForWallets();
+    });
     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...
@@ -82,120 +151,6 @@ const useWalletEventListeners = ({ computeConnectedStateForWallets, handleLogOut
         setSelectedWalletWithAction,
         setPrimaryWalletId,
     ]);
-    const addPrimaryWalletEventListeners = useCallback((seen) => {
-        if (!primaryWallet) {
-            return;
-        }
-        seen.add(primaryWallet.connector.name);
-        primaryWallet.connector.setupEventListeners({
-            onAccountChange: (accounts) => __awaiter(void 0, void 0, void 0, function* () {
-                const [newAddress] = accounts;
-                const newWallet = secondaryWallets.find((wallet) => isSameAddress(wallet.address, newAddress, wallet.chain));
-                if (authMode === 'connect-only') {
-                    refreshConnectedWallet(primaryWallet.id, primaryWallet.connector);
-                    return;
-                }
-                if (isSameAddress(newAddress, primaryWallet.address, primaryWallet.chain)) {
-                    setMultiWalletWidgetState('idle');
-                }
-                else if (!multiWallet) {
-                    yield handleLogOut();
-                    return;
-                }
-                else if (multiWalletWidgetState === 'awaiting_account_switch') {
-                    handleAccountChangeWhenAwaitingAccountSwitch(true, newAddress);
-                }
-                else if (multiWalletWidgetState === 'idle' && newWallet) {
-                    setPrimaryWalletId(newWallet.id);
-                }
-                else if (multiWalletWidgetState === 'idle' && !newWallet) {
-                    if (user) {
-                        setMultiWalletWidgetState('detected_new_wallet');
-                        setSelectedWalletConnector(primaryWallet.connector);
-                        yield computeConnectedStateForWallets();
-                        return;
-                    }
-                }
-                else {
-                    logger.error(`Unexpected multiWalletWidgetState (${multiWalletWidgetState}) and onAccountChange combination. Resetting state to idle.`);
-                    setMultiWalletWidgetState('idle');
-                }
-                yield computeConnectedStateForWallets();
-            }),
-            onChainChange: (chain) => __awaiter(void 0, void 0, void 0, function* () {
-                if (!primaryWallet) {
-                    return;
-                }
-                refreshConnectedWallet(primaryWallet.id, primaryWallet.connector);
-                // https://linear.app/dynamic-labs/issue/QNTM-84/breaking-change-rename-network-to-primarywalletnetwork
-                if (primaryWallet.chain === 'starknet') {
-                    setNetwork(chain);
-                }
-                else {
-                    setNetwork(parseInt(chain));
-                }
-            }),
-            onDisconnect: handleLogOut,
-        });
-    }, [
-        authMode,
-        primaryWallet,
-        setMultiWalletWidgetState,
-        multiWallet,
-        user,
-        computeConnectedStateForWallets,
-        handleLogOut,
-        multiWalletWidgetState,
-        secondaryWallets,
-        setSelectedWalletConnector,
-        handleAccountChangeWhenAwaitingAccountSwitch,
-        setPrimaryWalletId,
-        refreshConnectedWallet,
-    ]);
-    const addSecondaryWalletEventListeners = useCallback((seen) => {
-        const secondaryListeners = {
-            onAccountChange: () => __awaiter(void 0, void 0, void 0, function* () {
-                if (authMode === 'connect-only' && secondaryWallets.length) {
-                    refreshConnectedWallet(secondaryWallets[0].id, secondaryWallets[0].connector);
-                    return;
-                }
-                if (multiWalletWidgetState === 'awaiting_account_switch') {
-                    handleAccountChangeWhenAwaitingAccountSwitch(false, (selectedWalletWithAction === null || selectedWalletWithAction === void 0 ? void 0 : selectedWalletWithAction.wallet.address) || '');
-                }
-                yield computeConnectedStateForWallets();
-            }),
-            onChainChange: () => __awaiter(void 0, void 0, void 0, function* () {
-                // We should pass the proper walletId here
-                if (!secondaryWallets.length) {
-                    return;
-                }
-                refreshConnectedWallet(secondaryWallets[0].id, secondaryWallets[0].connector);
-            }),
-            onDisconnect: () => __awaiter(void 0, void 0, void 0, function* () {
-                yield computeConnectedStateForWallets();
-            }),
-        };
-        if (selectedWalletConnector && !seen.has(selectedWalletConnector.name)) {
-            seen.add(selectedWalletConnector.name);
-            selectedWalletConnector.setupEventListeners(secondaryListeners);
-        }
-        for (const wallet of secondaryWallets) {
-            if (seen.has(wallet.connector.name)) {
-                continue;
-            }
-            seen.add(wallet.connector.name);
-            wallet.connector.setupEventListeners(secondaryListeners);
-        }
-    }, [
-        authMode,
-        computeConnectedStateForWallets,
-        selectedWalletConnector,
-        selectedWalletWithAction,
-        handleAccountChangeWhenAwaitingAccountSwitch,
-        multiWalletWidgetState,
-        secondaryWallets,
-        refreshConnectedWallet,
-    ]);
     return {
         loadingNetwork,
         network,

package/src/lib/views/NetworkNotSupported/NetworkNotSupported.cjs

@@ -53,10 +53,12 @@ var SelectNetworkButton = require('../../components/SelectNetworkButton/SelectNe
 var useApplyWalletConnectorNetwork = require('../../utils/hooks/useApplyWalletConnectorNetwork/useApplyWalletConnectorNetwork.cjs');
 
 const NetworkNotSupported = () => {
-    const { network, onboardingImageUrl, selectedWalletConnector: walletConnector, connectedWallets, primaryWallet, } = useInternalDynamicContext.useInternalDynamicContext();
+    const { network, onboardingImageUrl, selectedWalletConnector: walletConnector, connectedWallets, primaryWallet, isFullyConnected, setShowAuthFlow, } = useInternalDynamicContext.useInternalDynamicContext();
     // Refresh selectedWalletConnector network when primaryWallet or connectedWallets updates
     const { data: walletConnectorNetwork } = usePromise.usePromise(() => walletConnector === null || walletConnector === void 0 ? void 0 : walletConnector.getNetwork(), { deps: [primaryWallet, walletConnector, connectedWallets] });
-    const finishConnectAndSign = useConnectAndSign.useConnectAndSign();
+    const finishConnectAndSign = useConnectAndSign.useConnectAndSign({
+        shouldUpdateWallets: !isFullyConnected,
+    });
     const [isNetworkPickerOpen, setIsNetworkPickerOpen] = React.useState(false);
     // Finishes auth flow when wallet switches to proper network
     React.useEffect(() => {
@@ -64,8 +66,16 @@ const NetworkNotSupported = () => {
             finishConnectAndSign({
                 walletConnector: walletConnector,
             });
+            // there are two scenarios here, one in not connected state and the other one in connected state.
+            // previously we were calling setShowAuthFlow(false) in useHandleWalletsToConnect.
+            // now, we don't call it in network-not-supported view, so we need to handle that scenario and close modal here
+            // this should be gone, once we're done with the useConnectAndSign hook refactor.
+            // TODO: https://linear.app/dynamic-labs/issue/QNTM-117/break-useconnectandsign-hook-to-small-parts
+            if (isFullyConnected) {
+                setShowAuthFlow(false);
+            }
         }
-    }, [walletConnectorNetwork]);
+    }, [walletConnectorNetwork, setShowAuthFlow, isFullyConnected]);
     // Updates the contexts 'network' based on the selected wallet connector.
     // It helps ensure that the 'network' is always in sync with the wallet's actual network,
     // Prevents 'network' from being 'undefined'.

package/src/lib/views/NetworkNotSupported/NetworkNotSupported.js

@@ -49,10 +49,12 @@ import { SelectNetworkButton } from '../../components/SelectNetworkButton/Select
 import { useApplyWalletConnectorNetwork } from '../../utils/hooks/useApplyWalletConnectorNetwork/useApplyWalletConnectorNetwork.js';
 
 const NetworkNotSupported = () => {
-    const { network, onboardingImageUrl, selectedWalletConnector: walletConnector, connectedWallets, primaryWallet, } = useInternalDynamicContext();
+    const { network, onboardingImageUrl, selectedWalletConnector: walletConnector, connectedWallets, primaryWallet, isFullyConnected, setShowAuthFlow, } = useInternalDynamicContext();
     // Refresh selectedWalletConnector network when primaryWallet or connectedWallets updates
     const { data: walletConnectorNetwork } = usePromise(() => walletConnector === null || walletConnector === void 0 ? void 0 : walletConnector.getNetwork(), { deps: [primaryWallet, walletConnector, connectedWallets] });
-    const finishConnectAndSign = useConnectAndSign();
+    const finishConnectAndSign = useConnectAndSign({
+        shouldUpdateWallets: !isFullyConnected,
+    });
     const [isNetworkPickerOpen, setIsNetworkPickerOpen] = useState(false);
     // Finishes auth flow when wallet switches to proper network
     useEffect(() => {
@@ -60,8 +62,16 @@ const NetworkNotSupported = () => {
             finishConnectAndSign({
                 walletConnector: walletConnector,
             });
+            // there are two scenarios here, one in not connected state and the other one in connected state.
+            // previously we were calling setShowAuthFlow(false) in useHandleWalletsToConnect.
+            // now, we don't call it in network-not-supported view, so we need to handle that scenario and close modal here
+            // this should be gone, once we're done with the useConnectAndSign hook refactor.
+            // TODO: https://linear.app/dynamic-labs/issue/QNTM-117/break-useconnectandsign-hook-to-small-parts
+            if (isFullyConnected) {
+                setShowAuthFlow(false);
+            }
         }
-    }, [walletConnectorNetwork]);
+    }, [walletConnectorNetwork, setShowAuthFlow, isFullyConnected]);
     // Updates the contexts 'network' based on the selected wallet connector.
     // It helps ensure that the 'network' is always in sync with the wallet's actual network,
     // Prevents 'network' from being 'undefined'.

package/src/lib/views/NetworkNotSupportedSwitchManual/NetworkNotSupportedSwitchManual.cjs

@@ -54,20 +54,30 @@ var useApplyWalletConnectorNetwork = require('../../utils/hooks/useApplyWalletCo
 //   as the wallet does not support programmatic network change.
 const NetworkNotSupportedSwitchManual = () => {
     var _a, _b;
-    const { user, selectedWalletConnector: walletConnector, connectedWallets, } = useInternalDynamicContext.useInternalDynamicContext();
+    const { user, selectedWalletConnector: walletConnector, connectedWallets, isFullyConnected, setShowAuthFlow, } = useInternalDynamicContext.useInternalDynamicContext();
     // Refresh selectedWalletConnector network when primaryWallet or connectedWallets updates
     const { data: walletConnectorNetwork } = usePromise.usePromise(() => walletConnector === null || walletConnector === void 0 ? void 0 : walletConnector.getNetwork(), {
         deps: [walletConnector, connectedWallets],
     });
-    const finishConnectAndSign = useConnectAndSign.useConnectAndSign();
+    const finishConnectAndSign = useConnectAndSign.useConnectAndSign({
+        shouldUpdateWallets: !isFullyConnected,
+    });
     // Finishes auth flow when wallet switches to proper network
     React.useEffect(() => {
         if (isSupportedNetwork.isSupportedNetwork({ network: walletConnectorNetwork, walletConnector })) {
             finishConnectAndSign({
                 walletConnector: walletConnector,
             });
+            // there are two scenarios here, one in not connected state and the other one in connected state.
+            // previously we were calling setShowAuthFlow(false) in useHandleWalletsToConnect.
+            // now, we don't call it in network-not-supported view, so we need to handle that scenario and close modal here
+            // this should be gone, once we're done with the useConnectAndSign hook refactor.
+            // TODO: https://linear.app/dynamic-labs/issue/QNTM-117/break-useconnectandsign-hook-to-small-parts
+            if (isFullyConnected) {
+                setShowAuthFlow(false);
+            }
         }
-    }, [walletConnectorNetwork]);
+    }, [walletConnectorNetwork, setShowAuthFlow, isFullyConnected]);
     // Updates the contexts 'network' based on the selected wallet connector.
     // It helps ensure that the 'network' is always in sync with the wallet's actual network,
     // Prevents 'network' from being 'undefined'.

package/src/lib/views/NetworkNotSupportedSwitchManual/NetworkNotSupportedSwitchManual.js

@@ -50,20 +50,30 @@ import { useApplyWalletConnectorNetwork } from '../../utils/hooks/useApplyWallet
 //   as the wallet does not support programmatic network change.
 const NetworkNotSupportedSwitchManual = () => {
     var _a, _b;
-    const { user, selectedWalletConnector: walletConnector, connectedWallets, } = useInternalDynamicContext();
+    const { user, selectedWalletConnector: walletConnector, connectedWallets, isFullyConnected, setShowAuthFlow, } = useInternalDynamicContext();
     // Refresh selectedWalletConnector network when primaryWallet or connectedWallets updates
     const { data: walletConnectorNetwork } = usePromise(() => walletConnector === null || walletConnector === void 0 ? void 0 : walletConnector.getNetwork(), {
         deps: [walletConnector, connectedWallets],
     });
-    const finishConnectAndSign = useConnectAndSign();
+    const finishConnectAndSign = useConnectAndSign({
+        shouldUpdateWallets: !isFullyConnected,
+    });
     // Finishes auth flow when wallet switches to proper network
     useEffect(() => {
         if (isSupportedNetwork({ network: walletConnectorNetwork, walletConnector })) {
             finishConnectAndSign({
                 walletConnector: walletConnector,
             });
+            // there are two scenarios here, one in not connected state and the other one in connected state.
+            // previously we were calling setShowAuthFlow(false) in useHandleWalletsToConnect.
+            // now, we don't call it in network-not-supported view, so we need to handle that scenario and close modal here
+            // this should be gone, once we're done with the useConnectAndSign hook refactor.
+            // TODO: https://linear.app/dynamic-labs/issue/QNTM-117/break-useconnectandsign-hook-to-small-parts
+            if (isFullyConnected) {
+                setShowAuthFlow(false);
+            }
         }
-    }, [walletConnectorNetwork]);
+    }, [walletConnectorNetwork, setShowAuthFlow, isFullyConnected]);
     // Updates the contexts 'network' based on the selected wallet connector.
     // It helps ensure that the 'network' is always in sync with the wallet's actual network,
     // Prevents 'network' from being 'undefined'.