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

package/CHANGELOG.md

@@ -1,4 +1,22 @@
 
+## [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.29";
 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.29";
 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.29",
   "repository": {
     "type": "git",
     "url": "https://github.com/dynamic-labs/DynamicAuth.git",
@@ -16,13 +16,13 @@
     "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.29",
+    "@dynamic-labs/multi-wallet": "0.18.0-beta.29",
+    "@dynamic-labs/rpc-providers": "0.18.0-beta.29",
+    "@dynamic-labs/types": "0.18.0-beta.29",
+    "@dynamic-labs/utils": "0.18.0-beta.29",
+    "@dynamic-labs/wallet-book": "0.18.0-beta.29",
+    "@dynamic-labs/wallet-connector-core": "0.18.0-beta.29"
   },
   "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/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/useWalletEventListeners/useWalletEventListeners.cjs

@@ -21,6 +21,7 @@ const orderedSecondaryWalletAddresses = (wallets) => wallets.map((wallet) => wal
 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);
+    const seen = new Set();
     React.useEffect(() => {
         const fetchNetwork = () => _tslib.__awaiter(void 0, void 0, void 0, function* () {
             try {
@@ -43,14 +44,9 @@ const useWalletEventListeners = ({ computeConnectedStateForWallets, handleLogOut
         if (!primaryWallet) {
             return;
         }
-        const seen = new Set();
         addPrimaryWalletEventListeners(seen);
-        addSecondaryWalletEventListeners(seen);
         return () => {
             primaryWallet.connector.teardownEventListeners();
-            for (const wallet of secondaryWallets) {
-                wallet.connector.teardownEventListeners();
-            }
         };
         // justification: we don't want to setup event listeners more than needed
         // eslint-disable-next-line react-hooks/exhaustive-deps
@@ -60,10 +56,20 @@ const useWalletEventListeners = ({ computeConnectedStateForWallets, handleLogOut
         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,
     ]);
+    React.useEffect(() => {
+        addSecondaryWalletEventListeners(seen);
+        return () => {
+            for (const wallet of secondaryWallets) {
+                wallet.connector.teardownEventListeners();
+            }
+        };
+    }, [
+        multiWalletWidgetState,
+        orderedSecondaryWalletAddresses(secondaryWallets).join(),
+    ]);
     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...

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

@@ -17,6 +17,7 @@ const orderedSecondaryWalletAddresses = (wallets) => wallets.map((wallet) => wal
 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);
+    const seen = new Set();
     useEffect(() => {
         const fetchNetwork = () => __awaiter(void 0, void 0, void 0, function* () {
             try {
@@ -39,14 +40,9 @@ const useWalletEventListeners = ({ computeConnectedStateForWallets, handleLogOut
         if (!primaryWallet) {
             return;
         }
-        const seen = new Set();
         addPrimaryWalletEventListeners(seen);
-        addSecondaryWalletEventListeners(seen);
         return () => {
             primaryWallet.connector.teardownEventListeners();
-            for (const wallet of secondaryWallets) {
-                wallet.connector.teardownEventListeners();
-            }
         };
         // justification: we don't want to setup event listeners more than needed
         // eslint-disable-next-line react-hooks/exhaustive-deps
@@ -56,10 +52,20 @@ const useWalletEventListeners = ({ computeConnectedStateForWallets, handleLogOut
         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,
     ]);
+    useEffect(() => {
+        addSecondaryWalletEventListeners(seen);
+        return () => {
+            for (const wallet of secondaryWallets) {
+                wallet.connector.teardownEventListeners();
+            }
+        };
+    }, [
+        multiWalletWidgetState,
+        orderedSecondaryWalletAddresses(secondaryWallets).join(),
+    ]);
     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...

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'.