@dynamic-labs/sdk-react-core 1.0.6 → 1.0.7

package/CHANGELOG.md

@@ -1,4 +1,16 @@
 
+### [1.0.7](https://github.com/dynamic-labs/DynamicAuth/compare/v1.0.6...v1.0.7) (2024-01-25)
+
+
+### Bug Fixes
+
+* add support for newest backpack extension ([66786ce](https://github.com/dynamic-labs/DynamicAuth/commit/66786ceb7927046c1cdb439888271f3070ca93a4))
+* broken help icon in create passkey view  ([2e38ea5](https://github.com/dynamic-labs/DynamicAuth/commit/2e38ea580e55f3349a2d3040d7b07bb2923631f7))
+* connect to wallet with wallet connect even if network is not supported ([#4465](https://github.com/dynamic-labs/DynamicAuth/issues/4465)) ([#4472](https://github.com/dynamic-labs/DynamicAuth/issues/4472)) ([8270b94](https://github.com/dynamic-labs/DynamicAuth/commit/8270b9468c289e7c49cd2ef104fb73dfaaa9f41c))
+* infinite loop when connecting with trust wallet ([#4448](https://github.com/dynamic-labs/DynamicAuth/issues/4448)) ([#4450](https://github.com/dynamic-labs/DynamicAuth/issues/4450)) ([c5ffee6](https://github.com/dynamic-labs/DynamicAuth/commit/c5ffee67a6a95ee62e779da69ce311c90575388f))
+* logging in with an email linked to a third party wallet gets stu… ([#4422](https://github.com/dynamic-labs/DynamicAuth/issues/4422)) ([995889b](https://github.com/dynamic-labs/DynamicAuth/commit/995889b5d03bcbafecd6959c52a88db8d9db940e))
+* switching wallet in extension caused connected flag to be false ([#4464](https://github.com/dynamic-labs/DynamicAuth/issues/4464)) ([a53dc1a](https://github.com/dynamic-labs/DynamicAuth/commit/a53dc1a9869a270c98753041cfbd587855629af4)), closes [#4454](https://github.com/dynamic-labs/DynamicAuth/issues/4454)
+
 ### [1.0.6](https://github.com/dynamic-labs/DynamicAuth/compare/v1.0.5...v1.0.6) (2024-01-18)
 
 

package/package.cjs

@@ -2,10 +2,10 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-var version = "1.0.6";
+var version = "1.0.7";
 var dependencies = {
-	"@dynamic-labs/iconic": "0.1.47",
-	"@dynamic-labs/sdk-api": "0.0.333",
+	"@dynamic-labs/iconic": "0.1.48",
+	"@dynamic-labs/sdk-api": "0.0.347",
 	"@hcaptcha/react-hcaptcha": "1.4.4",
 	"country-list": "2.3.0",
 	formik: "2.2.9",

package/package.js

@@ -1,7 +1,7 @@
-var version = "1.0.6";
+var version = "1.0.7";
 var dependencies = {
-	"@dynamic-labs/iconic": "0.1.47",
-	"@dynamic-labs/sdk-api": "0.0.333",
+	"@dynamic-labs/iconic": "0.1.48",
+	"@dynamic-labs/sdk-api": "0.0.347",
 	"@hcaptcha/react-hcaptcha": "1.4.4",
 	"country-list": "2.3.0",
 	formik: "2.2.9",

package/package.json

@@ -1,14 +1,14 @@
 {
   "name": "@dynamic-labs/sdk-react-core",
-  "version": "1.0.6",
+  "version": "1.0.7",
   "repository": {
     "type": "git",
     "url": "https://github.com/dynamic-labs/DynamicAuth.git",
     "directory": "packages/sdk-react-core"
   },
   "dependencies": {
-    "@dynamic-labs/iconic": "0.1.47",
-    "@dynamic-labs/sdk-api": "0.0.333",
+    "@dynamic-labs/iconic": "0.1.48",
+    "@dynamic-labs/sdk-api": "0.0.347",
     "@hcaptcha/react-hcaptcha": "1.4.4",
     "country-list": "2.3.0",
     "formik": "2.2.9",
@@ -17,15 +17,15 @@
     "react-focus-lock": "2.9.2",
     "react-i18next": "^13.2.0",
     "yup": "0.32.11",
-    "@dynamic-labs/ethereum": "1.0.6",
-    "@dynamic-labs/logger": "1.0.6",
-    "@dynamic-labs/multi-wallet": "1.0.6",
-    "@dynamic-labs/rpc-providers": "1.0.6",
-    "@dynamic-labs/types": "1.0.6",
-    "@dynamic-labs/utils": "1.0.6",
-    "@dynamic-labs/viem-utils": "1.0.6",
-    "@dynamic-labs/wallet-book": "1.0.6",
-    "@dynamic-labs/wallet-connector-core": "1.0.6",
+    "@dynamic-labs/ethereum": "1.0.7",
+    "@dynamic-labs/logger": "1.0.7",
+    "@dynamic-labs/multi-wallet": "1.0.7",
+    "@dynamic-labs/rpc-providers": "1.0.7",
+    "@dynamic-labs/types": "1.0.7",
+    "@dynamic-labs/utils": "1.0.7",
+    "@dynamic-labs/viem-utils": "1.0.7",
+    "@dynamic-labs/wallet-book": "1.0.7",
+    "@dynamic-labs/wallet-connector-core": "1.0.7",
     "eventemitter3": "5.0.1"
   },
   "devDependencies": {

package/src/index.cjs

@@ -38,13 +38,14 @@ var getWalletListItemLabel = require('./lib/shared/utils/functions/getWalletList
 var formatBigNumber = require('./lib/shared/utils/functions/formatBigNumber/formatBigNumber.cjs');
 var trimEnd = require('./lib/shared/utils/functions/trimEnd/trimEnd.cjs');
 var ceil = require('./lib/shared/utils/functions/ceil/ceil.cjs');
+var useEffectOnce = require('./lib/shared/utils/hooks/useEffectOnce/useEffectOnce.cjs');
+var useForwardedRef = require('./lib/shared/utils/hooks/useForwardedRef/useForwardedRef.cjs');
+var useGlobalLoading = require('./lib/shared/utils/hooks/useGlobalLoading/useGlobalLoading.cjs');
 var useLocalStorage = require('./lib/shared/utils/hooks/useLocalStorage/useLocalStorage.cjs');
+var useMediaQuery = require('./lib/shared/utils/hooks/useMediaQuery/useMediaQuery.cjs');
 var index$1 = require('./lib/shared/utils/hooks/useOnClickOutside/index.cjs');
 var usePreventPageScroll = require('./lib/shared/utils/hooks/usePreventPageScroll/usePreventPageScroll.cjs');
-var useGlobalLoading = require('./lib/shared/utils/hooks/useGlobalLoading/useGlobalLoading.cjs');
-var useMediaQuery = require('./lib/shared/utils/hooks/useMediaQuery/useMediaQuery.cjs');
-var useEffectOnce = require('./lib/shared/utils/hooks/useEffectOnce/useEffectOnce.cjs');
-var useForwardedRef = require('./lib/shared/utils/hooks/useForwardedRef/useForwardedRef.cjs');
+var useThrottle = require('./lib/shared/utils/hooks/useThrottle/useThrottle.cjs');
 var localStorage = require('./lib/shared/utils/classes/storage/localStorage.cjs');
 var PhantomLedgerIcon = require('./lib/shared/assets/wallets/PhantomLedgerIcon/PhantomLedgerIcon.cjs');
 var addWallet = require('./lib/shared/assets/add-wallet.cjs');
@@ -217,13 +218,14 @@ exports.getWalletListItemLabel = getWalletListItemLabel.getWalletListItemLabel;
 exports.formatBigNumber = formatBigNumber.formatBigNumber;
 exports.trimEnd = trimEnd.trimEnd;
 exports.ceil = ceil.ceil;
+exports.useEffectOnce = useEffectOnce.useEffectOnce;
+exports.useForwardedRef = useForwardedRef.useForwardedRef;
+exports.useGlobalLoading = useGlobalLoading.useGlobalLoading;
 exports.useLocalStorage = useLocalStorage.useLocalStorage;
+exports.useMediaQuery = useMediaQuery.useMediaQuery;
 exports.useOnClickOutside = index$1.useOnClickOutside;
 exports.usePreventPageScroll = usePreventPageScroll.usePreventPageScroll;
-exports.useGlobalLoading = useGlobalLoading.useGlobalLoading;
-exports.useMediaQuery = useMediaQuery.useMediaQuery;
-exports.useEffectOnce = useEffectOnce.useEffectOnce;
-exports.useForwardedRef = useForwardedRef.useForwardedRef;
+exports.useThrottle = useThrottle.useThrottle;
 exports.LocalStorage = localStorage.LocalStorage;
 exports.PhantomLedgerIcon = PhantomLedgerIcon.PhantomLedgerIcon;
 exports.AddWalletIcon = addWallet.ReactComponent;

package/src/index.js

@@ -34,13 +34,14 @@ export { getWalletListItemLabel } from './lib/shared/utils/functions/getWalletLi
 export { formatBigNumber } from './lib/shared/utils/functions/formatBigNumber/formatBigNumber.js';
 export { trimEnd } from './lib/shared/utils/functions/trimEnd/trimEnd.js';
 export { ceil } from './lib/shared/utils/functions/ceil/ceil.js';
+export { useEffectOnce } from './lib/shared/utils/hooks/useEffectOnce/useEffectOnce.js';
+export { useForwardedRef } from './lib/shared/utils/hooks/useForwardedRef/useForwardedRef.js';
+export { useGlobalLoading } from './lib/shared/utils/hooks/useGlobalLoading/useGlobalLoading.js';
 export { useLocalStorage } from './lib/shared/utils/hooks/useLocalStorage/useLocalStorage.js';
+export { useMediaQuery } from './lib/shared/utils/hooks/useMediaQuery/useMediaQuery.js';
 export { useOnClickOutside } from './lib/shared/utils/hooks/useOnClickOutside/index.js';
 export { usePreventPageScroll } from './lib/shared/utils/hooks/usePreventPageScroll/usePreventPageScroll.js';
-export { useGlobalLoading } from './lib/shared/utils/hooks/useGlobalLoading/useGlobalLoading.js';
-export { useMediaQuery } from './lib/shared/utils/hooks/useMediaQuery/useMediaQuery.js';
-export { useEffectOnce } from './lib/shared/utils/hooks/useEffectOnce/useEffectOnce.js';
-export { useForwardedRef } from './lib/shared/utils/hooks/useForwardedRef/useForwardedRef.js';
+export { useThrottle } from './lib/shared/utils/hooks/useThrottle/useThrottle.js';
 export { LocalStorage } from './lib/shared/utils/classes/storage/localStorage.js';
 export { PhantomLedgerIcon } from './lib/shared/assets/wallets/PhantomLedgerIcon/PhantomLedgerIcon.js';
 export { ReactComponent as AddWalletIcon } from './lib/shared/assets/add-wallet.js';

package/src/lib/components/MenuList/Dropdown/Dropdown.cjs

@@ -9,11 +9,11 @@ var classNames = require('../../../utils/functions/classNames/classNames.cjs');
 var Popper = require('../../Popper/Popper/Popper.cjs');
 var PopperContext = require('../../Popper/PopperContext/PopperContext.cjs');
 var watchToScrollInHierarchy = require('../utils/watchToScrollInHierarchy/watchToScrollInHierarchy.cjs');
+var useForwardedRef = require('../../../shared/utils/hooks/useForwardedRef/useForwardedRef.cjs');
 require('../../../shared/logger.cjs');
 require('../../../shared/utils/classes/storage/localStorage.cjs');
 var index = require('../../../shared/utils/hooks/useOnClickOutside/index.cjs');
 require('@dynamic-labs/utils');
-var useForwardedRef = require('../../../shared/utils/hooks/useForwardedRef/useForwardedRef.cjs');
 require('@dynamic-labs/sdk-api');
 require('@dynamic-labs/iconic');
 require('@dynamic-labs/wallet-connector-core');

package/src/lib/components/MenuList/Dropdown/Dropdown.js

@@ -5,11 +5,11 @@ import { classNames } from '../../../utils/functions/classNames/classNames.js';
 import { Popper } from '../../Popper/Popper/Popper.js';
 import { usePopper } from '../../Popper/PopperContext/PopperContext.js';
 import { watchToScrollInHierarchy } from '../utils/watchToScrollInHierarchy/watchToScrollInHierarchy.js';
+import { useForwardedRef } from '../../../shared/utils/hooks/useForwardedRef/useForwardedRef.js';
 import '../../../shared/logger.js';
 import '../../../shared/utils/classes/storage/localStorage.js';
 import { useOnClickOutside } from '../../../shared/utils/hooks/useOnClickOutside/index.js';
 import '@dynamic-labs/utils';
-import { useForwardedRef } from '../../../shared/utils/hooks/useForwardedRef/useForwardedRef.js';
 import '@dynamic-labs/sdk-api';
 import '@dynamic-labs/iconic';
 import '@dynamic-labs/wallet-connector-core';

package/src/lib/components/SyncPasskeyFlow/SyncPasskeyFlow.cjs

@@ -3,13 +3,13 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 
 var _tslib = require('../../../../_virtual/_tslib.cjs');
-var jsxRuntime = require('react/jsx-runtime');
 var React = require('react');
 var useInternalDynamicContext = require('../../context/DynamicContext/useInternalDynamicContext.cjs');
 require('@dynamic-labs/sdk-api');
 require('../../shared/logger.cjs');
 require('@dynamic-labs/iconic');
 require('@dynamic-labs/wallet-connector-core');
+require('react/jsx-runtime');
 require('../../context/ViewContext/ViewContext.cjs');
 require('@dynamic-labs/wallet-book');
 var localStorage$1 = require('../../utils/constants/localStorage.cjs');
@@ -102,7 +102,7 @@ const SyncPasskeyFlow = () => {
         user,
         createEmbeddedWallet,
     ]);
-    return jsxRuntime.jsx(jsxRuntime.Fragment, {});
+    return null;
 };
 
 exports.SyncPasskeyFlow = SyncPasskeyFlow;

package/src/lib/components/SyncPasskeyFlow/SyncPasskeyFlow.js

@@ -1,11 +1,11 @@
 import { __awaiter } from '../../../../_virtual/_tslib.js';
-import { jsx, Fragment } from 'react/jsx-runtime';
 import { useEffect } from 'react';
 import { useInternalDynamicContext } from '../../context/DynamicContext/useInternalDynamicContext.js';
 import '@dynamic-labs/sdk-api';
 import '../../shared/logger.js';
 import '@dynamic-labs/iconic';
 import '@dynamic-labs/wallet-connector-core';
+import 'react/jsx-runtime';
 import '../../context/ViewContext/ViewContext.js';
 import '@dynamic-labs/wallet-book';
 import { LAST_USED_WALLET } from '../../utils/constants/localStorage.js';
@@ -98,7 +98,7 @@ const SyncPasskeyFlow = () => {
         user,
         createEmbeddedWallet,
     ]);
-    return jsx(Fragment, {});
+    return null;
 };
 
 export { SyncPasskeyFlow };

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

@@ -21,8 +21,8 @@ require('../../utils/constants/colors.cjs');
 var values = require('../../utils/constants/values.cjs');
 var localStorage = require('../../shared/utils/classes/storage/localStorage.cjs');
 require('viem');
-var useLocalStorage = require('../../shared/utils/hooks/useLocalStorage/useLocalStorage.cjs');
 var useGlobalLoading = require('../../shared/utils/hooks/useGlobalLoading/useGlobalLoading.cjs');
+var useLocalStorage = require('../../shared/utils/hooks/useLocalStorage/useLocalStorage.cjs');
 require('../../shared/consts/index.cjs');
 require('@dynamic-labs/multi-wallet');
 var getAuthToken = require('../../utils/functions/getAuthToken/getAuthToken.cjs');
@@ -118,7 +118,7 @@ const DynamicContext = React.createContext(undefined);
 /** The context provider itself we only use internally */
 const InnerDynamicContextProvider = ({ children, theme, settings, locale: locale$1, }) => {
     var _a, _b, _c, _d, _e, _f, _g, _h;
-    const { accessDeniedMessagePrimary, accessDeniedMessageSecondary, accessDeniedButton, apiBaseUrl, enableForcedNetworkValidation: enableForcedNetworkValidationProp = false, deepLinkPreference = 'native', bridgeChains, 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, showLockedWalletView = true, walletConnectPreferredChains, walletConnectorExtensions, } = settings;
+    const { accessDeniedMessagePrimary, accessDeniedMessageSecondary, accessDeniedButton, apiBaseUrl, enableForcedNetworkValidation: enableForcedNetworkValidationProp = false, deepLinkPreference = 'native', bridgeChains, 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, showLockedWalletView = false, walletConnectPreferredChains, walletConnectorExtensions, } = settings;
     let enableForcedNetworkValidation = enableForcedNetworkValidationProp;
     if (bridgeChains) {
         enableForcedNetworkValidation = true;

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

@@ -17,8 +17,8 @@ import '../../utils/constants/colors.js';
 import { DEFAULT_NUMBER_OF_WALLETS_TO_SHOW } from '../../utils/constants/values.js';
 import { LocalStorage } from '../../shared/utils/classes/storage/localStorage.js';
 import 'viem';
-import { useLocalStorage } from '../../shared/utils/hooks/useLocalStorage/useLocalStorage.js';
 import { useGlobalLoading } from '../../shared/utils/hooks/useGlobalLoading/useGlobalLoading.js';
+import { useLocalStorage } from '../../shared/utils/hooks/useLocalStorage/useLocalStorage.js';
 import '../../shared/consts/index.js';
 import '@dynamic-labs/multi-wallet';
 import { getAuthToken } from '../../utils/functions/getAuthToken/getAuthToken.js';
@@ -114,7 +114,7 @@ const DynamicContext = createContext(undefined);
 /** The context provider itself we only use internally */
 const InnerDynamicContextProvider = ({ children, theme, settings, locale, }) => {
     var _a, _b, _c, _d, _e, _f, _g, _h;
-    const { accessDeniedMessagePrimary, accessDeniedMessageSecondary, accessDeniedButton, apiBaseUrl, enableForcedNetworkValidation: enableForcedNetworkValidationProp = false, deepLinkPreference = 'native', bridgeChains, 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, showLockedWalletView = true, walletConnectPreferredChains, walletConnectorExtensions, } = settings;
+    const { accessDeniedMessagePrimary, accessDeniedMessageSecondary, accessDeniedButton, apiBaseUrl, enableForcedNetworkValidation: enableForcedNetworkValidationProp = false, deepLinkPreference = 'native', bridgeChains, 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, showLockedWalletView = false, walletConnectPreferredChains, walletConnectorExtensions, } = settings;
     let enableForcedNetworkValidation = enableForcedNetworkValidationProp;
     if (bridgeChains) {
         enableForcedNetworkValidation = true;

package/src/lib/data/api.cjs

@@ -430,9 +430,9 @@ const getOnrampProviders = ({ chain, environmentId, networkId, token, walletAddr
 });
 const sendDynamicProps = (environmentId, settingsToSend) => _tslib.__awaiter(void 0, void 0, void 0, function* () {
     try {
-        const { dynamicContextProps, dynamicWagmiSettings } = settingsToSend;
+        const { dynamicContextProps, dynamicWagmiSettings, frameworkSettings } = settingsToSend;
         if (dynamicContextProps) {
-            yield sendDynamicContextSettings(environmentId, { dynamicContextProps }, helpers.isDynamicContextSessionSettingExpired, helpers.setDynamicContextSessionSettings);
+            yield sendDynamicContextSettings(environmentId, { dynamicContextProps, frameworkSettings }, helpers.isDynamicContextSessionSettingExpired, helpers.setDynamicContextSessionSettings);
         }
         if (dynamicWagmiSettings) {
             yield sendDynamicContextSettings(environmentId, { dynamicWagmiSettings }, helpers.isWagmiSessionSettingExpired, helpers.setWagmiSessionSettings);

package/src/lib/data/api.d.ts

@@ -70,6 +70,7 @@ export declare const getOnrampProviders: ({ chain, environmentId, networkId, tok
 export declare const sendDynamicProps: (environmentId: string, settingsToSend: {
     dynamicContextProps?: object;
     dynamicWagmiSettings?: object;
+    frameworkSettings?: object;
 }) => Promise<void>;
 export declare const mergeUserAccounts: (userJwt: string, environmentId: string) => Promise<string | undefined>;
 export type CreateTurnkeyEvmEmbeddedWalletProps = {

package/src/lib/data/api.js

@@ -426,9 +426,9 @@ const getOnrampProviders = ({ chain, environmentId, networkId, token, walletAddr
 });
 const sendDynamicProps = (environmentId, settingsToSend) => __awaiter(void 0, void 0, void 0, function* () {
     try {
-        const { dynamicContextProps, dynamicWagmiSettings } = settingsToSend;
+        const { dynamicContextProps, dynamicWagmiSettings, frameworkSettings } = settingsToSend;
         if (dynamicContextProps) {
-            yield sendDynamicContextSettings(environmentId, { dynamicContextProps }, isDynamicContextSessionSettingExpired, setDynamicContextSessionSettings);
+            yield sendDynamicContextSettings(environmentId, { dynamicContextProps, frameworkSettings }, isDynamicContextSessionSettingExpired, setDynamicContextSessionSettings);
         }
         if (dynamicWagmiSettings) {
             yield sendDynamicContextSettings(environmentId, { dynamicWagmiSettings }, isWagmiSessionSettingExpired, setWagmiSessionSettings);

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

@@ -1,7 +1,8 @@
+export { useEffectOnce } from './useEffectOnce';
+export { useForwardedRef } from './useForwardedRef';
+export { useGlobalLoading } from './useGlobalLoading';
 export { useLocalStorage } from './useLocalStorage';
+export { useMediaQuery } from './useMediaQuery';
 export { useOnClickOutside } from './useOnClickOutside';
 export { usePreventPageScroll } from './usePreventPageScroll';
-export { useGlobalLoading } from './useGlobalLoading';
-export { useMediaQuery } from './useMediaQuery';
-export { useEffectOnce } from './useEffectOnce';
-export { useForwardedRef } from './useForwardedRef';
+export * from './useThrottle';

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

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

package/src/lib/shared/utils/hooks/useThrottle/useThrottle.cjs

@@ -0,0 +1,29 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var React = require('react');
+
+/**
+ * useThrottle hook to throttle a callback function.
+ *
+ * @param callback - The callback function to be throttled. It must return void.
+ * @param delay - The time in milliseconds to wait before the next call.
+ * @returns A throttled version of the callback function.
+ */
+const useThrottle = (callback, delay) => {
+    const isThrottled = React.useRef(false);
+    const savedCallback = React.useRef(callback);
+    // Remember the latest callback if it changes.
+    savedCallback.current = callback;
+    return React.useCallback((...args) => {
+        if (!isThrottled.current) {
+            savedCallback.current(...args);
+            isThrottled.current = true;
+            // Set the throttle off after the delay
+            setTimeout(() => (isThrottled.current = false), delay);
+        }
+    }, [delay]);
+};
+
+exports.useThrottle = useThrottle;

package/src/lib/shared/utils/hooks/useThrottle/useThrottle.d.ts

@@ -0,0 +1,8 @@
+/**
+ * useThrottle hook to throttle a callback function.
+ *
+ * @param callback - The callback function to be throttled. It must return void.
+ * @param delay - The time in milliseconds to wait before the next call.
+ * @returns A throttled version of the callback function.
+ */
+export declare const useThrottle: <T extends (...args: unknown[]) => void>(callback: T, delay: number) => (...args: Parameters<T>) => void;

package/src/lib/shared/utils/hooks/useThrottle/useThrottle.js

@@ -0,0 +1,25 @@
+import { useRef, useCallback } from 'react';
+
+/**
+ * useThrottle hook to throttle a callback function.
+ *
+ * @param callback - The callback function to be throttled. It must return void.
+ * @param delay - The time in milliseconds to wait before the next call.
+ * @returns A throttled version of the callback function.
+ */
+const useThrottle = (callback, delay) => {
+    const isThrottled = useRef(false);
+    const savedCallback = useRef(callback);
+    // Remember the latest callback if it changes.
+    savedCallback.current = callback;
+    return useCallback((...args) => {
+        if (!isThrottled.current) {
+            savedCallback.current(...args);
+            isThrottled.current = true;
+            // Set the throttle off after the delay
+            setTimeout(() => (isThrottled.current = false), delay);
+        }
+    }, [delay]);
+};
+
+export { useThrottle };

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

@@ -2,6 +2,6 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-const getWalletIdentifier = ({ address, connector }) => `${address}+${connector.key}`;
+const getWalletIdentifier = ({ address, connector, }) => `${address}+${connector.key}`;
 
 exports.getWalletIdentifier = getWalletIdentifier;

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

@@ -1,2 +1,2 @@
 import { Wallet } from '../../../shared';
-export declare const getWalletIdentifier: ({ address, connector }: Wallet) => `${string}+${string}`;
+export declare const getWalletIdentifier: ({ address, connector, }: Pick<Wallet, 'address' | 'connector'>) => `${string}+${string}`;

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

@@ -1,3 +1,3 @@
-const getWalletIdentifier = ({ address, connector }) => `${address}+${connector.key}`;
+const getWalletIdentifier = ({ address, connector, }) => `${address}+${connector.key}`;
 
 export { getWalletIdentifier };

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

@@ -9,6 +9,15 @@ var isWalletLinked = require('../../../functions/isWalletLinked/isWalletLinked.c
 var ViewContext = require('../../../../context/ViewContext/ViewContext.cjs');
 var useInternalDynamicContext = require('../../../../context/DynamicContext/useInternalDynamicContext.cjs');
 var errors = require('../../../constants/errors.cjs');
+require('@dynamic-labs/sdk-api');
+var logger = require('../../../../shared/logger.cjs');
+require('@dynamic-labs/iconic');
+require('react/jsx-runtime');
+require('@dynamic-labs/wallet-book');
+require('../../../constants/colors.cjs');
+require('../../../../shared/utils/classes/storage/localStorage.cjs');
+require('viem');
+require('../../../../shared/consts/index.cjs');
 
 const useSyncPrimaryWallet = (canSync = true) => {
     const { setShowAuthFlow, isAuthenticated, authMode, connectWallet, handleLogOut, multiWalletWidgetState, primaryWallet, secondaryWallets, setMultiWalletWidgetState, setPrimaryWallet, setShowWidgetStatePopup, showLockedWalletView, showWidgetStatePopup, setSelectedWalletWithAction, } = useInternalDynamicContext.useInternalDynamicContext();
@@ -76,6 +85,10 @@ const useSyncPrimaryWallet = (canSync = true) => {
         primaryWallet.connector
             .getConnectedAccounts()
             .then((accounts) => {
+            logger.logger.debug('Sync primary wallet - getConnectedAccounts', {
+                accounts,
+                primaryWalletAddress: primaryWallet.address,
+            });
             const [connectedAddress] = accounts;
             if (!connectedAddress) {
                 throw new utils.DynamicError('Missing wallet address', errors.MISSING_ADDRESS_ERROR);
@@ -100,9 +113,7 @@ const useSyncPrimaryWallet = (canSync = true) => {
                 if (showLockedWalletView) {
                     setShowAuthFlow(true);
                     setView('wallet-locked-view');
-                    return;
                 }
-                handleLogOut();
             }
         });
     }, [

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

@@ -5,6 +5,15 @@ import { isWalletLinked } from '../../../functions/isWalletLinked/isWalletLinked
 import { useViewContext } from '../../../../context/ViewContext/ViewContext.js';
 import { useInternalDynamicContext } from '../../../../context/DynamicContext/useInternalDynamicContext.js';
 import { MISSING_ADDRESS_ERROR } from '../../../constants/errors.js';
+import '@dynamic-labs/sdk-api';
+import { logger } from '../../../../shared/logger.js';
+import '@dynamic-labs/iconic';
+import 'react/jsx-runtime';
+import '@dynamic-labs/wallet-book';
+import '../../../constants/colors.js';
+import '../../../../shared/utils/classes/storage/localStorage.js';
+import 'viem';
+import '../../../../shared/consts/index.js';
 
 const useSyncPrimaryWallet = (canSync = true) => {
     const { setShowAuthFlow, isAuthenticated, authMode, connectWallet, handleLogOut, multiWalletWidgetState, primaryWallet, secondaryWallets, setMultiWalletWidgetState, setPrimaryWallet, setShowWidgetStatePopup, showLockedWalletView, showWidgetStatePopup, setSelectedWalletWithAction, } = useInternalDynamicContext();
@@ -72,6 +81,10 @@ const useSyncPrimaryWallet = (canSync = true) => {
         primaryWallet.connector
             .getConnectedAccounts()
             .then((accounts) => {
+            logger.debug('Sync primary wallet - getConnectedAccounts', {
+                accounts,
+                primaryWalletAddress: primaryWallet.address,
+            });
             const [connectedAddress] = accounts;
             if (!connectedAddress) {
                 throw new DynamicError('Missing wallet address', MISSING_ADDRESS_ERROR);
@@ -96,9 +109,7 @@ const useSyncPrimaryWallet = (canSync = true) => {
                 if (showLockedWalletView) {
                     setShowAuthFlow(true);
                     setView('wallet-locked-view');
-                    return;
                 }
-                handleLogOut();
             }
         });
     }, [

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

@@ -13,8 +13,8 @@ require('@dynamic-labs/wallet-book');
 require('../../constants/colors.cjs');
 require('../../../shared/utils/classes/storage/localStorage.cjs');
 require('viem');
-require('@dynamic-labs/utils');
 var useMediaQuery = require('../../../shared/utils/hooks/useMediaQuery/useMediaQuery.cjs');
+require('@dynamic-labs/utils');
 require('../../../shared/consts/index.cjs');
 
 const useColorSchemePreference = () => {

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

@@ -9,8 +9,8 @@ import '@dynamic-labs/wallet-book';
 import '../../constants/colors.js';
 import '../../../shared/utils/classes/storage/localStorage.js';
 import 'viem';
-import '@dynamic-labs/utils';
 import { useMediaQuery } from '../../../shared/utils/hooks/useMediaQuery/useMediaQuery.js';
+import '@dynamic-labs/utils';
 import '../../../shared/consts/index.js';
 
 const useColorSchemePreference = () => {

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

@@ -61,7 +61,7 @@ const useEmbeddedWallet = () => {
         internalSetShowAuthFlow,
         internalEvents,
     ]);
-    const startEmbeddedWalletCreationFlow = () => _tslib.__awaiter(void 0, void 0, void 0, function* () {
+    const startEmbeddedWalletCreationFlow = React.useCallback(() => _tslib.__awaiter(void 0, void 0, void 0, function* () {
         internalSetShowAuthFlow(true);
         setView('passkey-intro');
         return new Promise((resolve, reject) => {
@@ -70,15 +70,16 @@ const useEmbeddedWallet = () => {
                 // when creating a passkey, if user cancels the passkey modal more than once
                 // it will throw this DOMException, but we don't want to let user to have access
                 // to the app before they've a passkey correctly setup
-                if (error instanceof DOMException && error.name === 'NotAllowedError') {
+                if (error instanceof DOMException &&
+                    error.name === 'NotAllowedError') {
                     logger.logger.error('User cancelled the passkey creation.', error);
                     return;
                 }
                 reject(error);
             });
         });
-    });
-    const returnEmbeddedWallet = (jwt, embeddedWalletVerifiedCredential) => _tslib.__awaiter(void 0, void 0, void 0, function* () {
+    }), [internalEvents, internalSetShowAuthFlow, setView]);
+    const returnEmbeddedWallet = React.useCallback((jwt, embeddedWalletVerifiedCredential) => _tslib.__awaiter(void 0, void 0, void 0, function* () {
         var _a, _b, _c, _d;
         const decodedJwt = decodeJwt.decodeJwt(jwt);
         const turnkeyWallet = findTurnkeyWallet.findTurnkeyWallet(walletConnectorOptions);
@@ -109,7 +110,7 @@ const useEmbeddedWallet = () => {
             id: embeddedWalletVerifiedCredential.id,
         };
         return Promise.resolve(passkeyWallet);
-    });
+    }), [setPrimaryWalletId, walletConnectorOptions]);
     const createEmbeddedWallet = React.useCallback(() => _tslib.__awaiter(void 0, void 0, void 0, function* () {
         var _e, _f, _g;
         const jwt = (_e = getAuthToken.getAuthToken()) !== null && _e !== void 0 ? _e : onboardingOnlyJwt;
@@ -132,14 +133,21 @@ const useEmbeddedWallet = () => {
         const embeddedWalletVerifiedCredential = findEmbeddedWalletFromVerifiedCredentials.findEmbeddedWalletFromVerifiedCredentials(jwt);
         // if user logged in with MM for example, just continue the flow
         if (!embeddedWalletVerifiedCredential) {
+            // user logged in through an email linked to a third party wallet
+            // at this point primary wallet is still undefined and we need to set it
+            if (!primaryWallet) {
+                setPrimaryWalletId(userWaletsCredentials[0].id);
+            }
             return Promise.resolve(primaryWallet);
         }
         // if user already has embedded wallet, returns it
         return returnEmbeddedWallet(jwt, embeddedWalletVerifiedCredential);
     }), [
-        internalSetShowAuthFlow,
         onboardingOnlyJwt,
         projectSettings,
+        internalSetShowAuthFlow,
+        returnEmbeddedWallet,
+        startEmbeddedWalletCreationFlow,
         startPregeneratedWalletCreationFlow,
         primaryWallet,
     ]);

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

@@ -57,7 +57,7 @@ const useEmbeddedWallet = () => {
         internalSetShowAuthFlow,
         internalEvents,
     ]);
-    const startEmbeddedWalletCreationFlow = () => __awaiter(void 0, void 0, void 0, function* () {
+    const startEmbeddedWalletCreationFlow = useCallback(() => __awaiter(void 0, void 0, void 0, function* () {
         internalSetShowAuthFlow(true);
         setView('passkey-intro');
         return new Promise((resolve, reject) => {
@@ -66,15 +66,16 @@ const useEmbeddedWallet = () => {
                 // when creating a passkey, if user cancels the passkey modal more than once
                 // it will throw this DOMException, but we don't want to let user to have access
                 // to the app before they've a passkey correctly setup
-                if (error instanceof DOMException && error.name === 'NotAllowedError') {
+                if (error instanceof DOMException &&
+                    error.name === 'NotAllowedError') {
                     logger.error('User cancelled the passkey creation.', error);
                     return;
                 }
                 reject(error);
             });
         });
-    });
-    const returnEmbeddedWallet = (jwt, embeddedWalletVerifiedCredential) => __awaiter(void 0, void 0, void 0, function* () {
+    }), [internalEvents, internalSetShowAuthFlow, setView]);
+    const returnEmbeddedWallet = useCallback((jwt, embeddedWalletVerifiedCredential) => __awaiter(void 0, void 0, void 0, function* () {
         var _a, _b, _c, _d;
         const decodedJwt = decodeJwt(jwt);
         const turnkeyWallet = findTurnkeyWallet(walletConnectorOptions);
@@ -105,7 +106,7 @@ const useEmbeddedWallet = () => {
             id: embeddedWalletVerifiedCredential.id,
         };
         return Promise.resolve(passkeyWallet);
-    });
+    }), [setPrimaryWalletId, walletConnectorOptions]);
     const createEmbeddedWallet = useCallback(() => __awaiter(void 0, void 0, void 0, function* () {
         var _e, _f, _g;
         const jwt = (_e = getAuthToken()) !== null && _e !== void 0 ? _e : onboardingOnlyJwt;
@@ -128,14 +129,21 @@ const useEmbeddedWallet = () => {
         const embeddedWalletVerifiedCredential = findEmbeddedWalletFromVerifiedCredentials(jwt);
         // if user logged in with MM for example, just continue the flow
         if (!embeddedWalletVerifiedCredential) {
+            // user logged in through an email linked to a third party wallet
+            // at this point primary wallet is still undefined and we need to set it
+            if (!primaryWallet) {
+                setPrimaryWalletId(userWaletsCredentials[0].id);
+            }
             return Promise.resolve(primaryWallet);
         }
         // if user already has embedded wallet, returns it
         return returnEmbeddedWallet(jwt, embeddedWalletVerifiedCredential);
     }), [
-        internalSetShowAuthFlow,
         onboardingOnlyJwt,
         projectSettings,
+        internalSetShowAuthFlow,
+        returnEmbeddedWallet,
+        startEmbeddedWalletCreationFlow,
         startPregeneratedWalletCreationFlow,
         primaryWallet,
     ]);

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

@@ -16,8 +16,8 @@ var localStorage = require('../../constants/localStorage.cjs');
 require('../../constants/colors.cjs');
 var localStorage$1 = require('../../../shared/utils/classes/storage/localStorage.cjs');
 require('viem');
-var useLocalStorage = require('../../../shared/utils/hooks/useLocalStorage/useLocalStorage.cjs');
 var useEffectOnce = require('../../../shared/utils/hooks/useEffectOnce/useEffectOnce.cjs');
+var useLocalStorage = require('../../../shared/utils/hooks/useLocalStorage/useLocalStorage.cjs');
 require('../../../shared/consts/index.cjs');
 var validators = require('../../../context/DynamicContext/validators.cjs');
 
@@ -61,6 +61,7 @@ const useFetchProjectSettings = ({ authToken, environmentId, maxRetries = 2, dyn
             const serializedDynamicContextProps = Object.assign(Object.assign({}, updatedDynamicProps), { settings: Object.assign(Object.assign({}, updatedDynamicProps.settings), { eventsCallbacks: serializedEventsCallbacks, walletConnectors: serializedWalletConnectors }) });
             api.sendDynamicProps(environmentId, {
                 dynamicContextProps: serializedDynamicContextProps,
+                frameworkSettings: getFrameworkSettings(),
             });
             api.fetchProjectSettings(environmentId)
                 .then((response) => {
@@ -123,6 +124,19 @@ const serializeWalletConnectors = (walletConnectors) => {
         return undefined;
     }
 };
+const getFrameworkSettings = () => {
+    var _a;
+    return ({
+        nextJs: {
+            // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+            // @ts-ignore
+            version: (_a = window.next) === null || _a === void 0 ? void 0 : _a.version,
+        },
+        react: {
+            version: React.version,
+        },
+    });
+};
 
 exports.serializeEventsCallbacks = serializeEventsCallbacks;
 exports.serializeWalletConnectors = serializeWalletConnectors;

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

@@ -1,4 +1,4 @@
-import { useState, useEffect, useMemo } from 'react';
+import { useState, useEffect, useMemo, version } from 'react';
 import { DynamicError } from '@dynamic-labs/utils';
 import { sendDynamicProps, fetchProjectSettings } from '../../../data/api.js';
 import '@dynamic-labs/sdk-api';
@@ -12,8 +12,8 @@ import { PROJECT_SETTINGS_STORAGE_KEY, CONNECTED_WALLETS_INFO } from '../../cons
 import '../../constants/colors.js';
 import { LocalStorage } from '../../../shared/utils/classes/storage/localStorage.js';
 import 'viem';
-import { useLocalStorage } from '../../../shared/utils/hooks/useLocalStorage/useLocalStorage.js';
 import { useEffectOnce } from '../../../shared/utils/hooks/useEffectOnce/useEffectOnce.js';
+import { useLocalStorage } from '../../../shared/utils/hooks/useLocalStorage/useLocalStorage.js';
 import '../../../shared/consts/index.js';
 import { validateLocalStorageExpiry } from '../../../context/DynamicContext/validators.js';
 
@@ -57,6 +57,7 @@ const useFetchProjectSettings = ({ authToken, environmentId, maxRetries = 2, dyn
             const serializedDynamicContextProps = Object.assign(Object.assign({}, updatedDynamicProps), { settings: Object.assign(Object.assign({}, updatedDynamicProps.settings), { eventsCallbacks: serializedEventsCallbacks, walletConnectors: serializedWalletConnectors }) });
             sendDynamicProps(environmentId, {
                 dynamicContextProps: serializedDynamicContextProps,
+                frameworkSettings: getFrameworkSettings(),
             });
             fetchProjectSettings(environmentId)
                 .then((response) => {
@@ -119,5 +120,18 @@ const serializeWalletConnectors = (walletConnectors) => {
         return undefined;
     }
 };
+const getFrameworkSettings = () => {
+    var _a;
+    return ({
+        nextJs: {
+            // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+            // @ts-ignore
+            version: (_a = window.next) === null || _a === void 0 ? void 0 : _a.version,
+        },
+        react: {
+            version,
+        },
+    });
+};
 
 export { serializeEventsCallbacks, serializeWalletConnectors, useFetchProjectSettings };

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

@@ -17,10 +17,10 @@ require('../../constants/colors.cjs');
 require('../../../shared/utils/classes/storage/localStorage.cjs');
 require('viem');
 require('../../../shared/consts/index.cjs');
-var isSameWalletName = require('../../functions/isSameWalletName/isSameWalletName.cjs');
-var useWalletsConnectionState = require('../useWalletsConnectionState/useWalletsConnectionState.cjs');
 require('@dynamic-labs/multi-wallet');
 var getWalletIdentifier = require('../../functions/getWalletIdentifier/getWalletIdentifier.cjs');
+var isSameWalletName = require('../../functions/isSameWalletName/isSameWalletName.cjs');
+var useWalletsConnectionState = require('../useWalletsConnectionState/useWalletsConnectionState.cjs');
 var reconnectSocialWallet = require('./reconnectSocialWallet.cjs');
 var createLinkedWalletsFromWalletOptions = require('./utils/createLinkedWalletsFromWalletOptions/createLinkedWalletsFromWalletOptions.cjs');
 var updateUserWalletsFromLinkedWallets = require('./utils/updateUserWalletsFromLinkedWallets/updateUserWalletsFromLinkedWallets.cjs');
@@ -66,14 +66,14 @@ const useWalletConnectors = ({ authMode, authToken, connectedWallets, walletConn
     React.useEffect(() => walletsBasedOnAuthMode.forEach((wallet) => {
         wallet.connector.initEventListener();
     }), [walletsBasedOnAuthMode]);
-    const { connectedWalletMap, didConnectedStateLoad } = useWalletsConnectionState.useWalletsConnectionState(walletsBasedOnAuthMode);
-    const wallets = React.useMemo(() => walletsBasedOnAuthMode.map((wallet) => (Object.assign(Object.assign({}, wallet), { connected: Boolean(connectedWalletMap[getWalletIdentifier.getWalletIdentifier(wallet)]) }))), [connectedWalletMap, walletsBasedOnAuthMode]);
+    const { connectedWalletsMap, didConnectedStateLoad } = useWalletsConnectionState.useWalletsConnectionState(walletsBasedOnAuthMode);
+    const wallets = React.useMemo(() => walletsBasedOnAuthMode.map((wallet) => (Object.assign(Object.assign({}, wallet), { connected: Boolean(connectedWalletsMap[getWalletIdentifier.getWalletIdentifier(wallet)]) }))), [connectedWalletsMap, walletsBasedOnAuthMode]);
     const { setUserWallets } = UserWalletsContext.useInternalUserWallets();
     // Keep userWallets in sync whenever linkedWallets changes
     React.useEffect(() => {
-        setUserWallets((userWallets) => didConnectedStateLoad
-            ? updateUserWalletsFromLinkedWallets.updateUserWalletsFromLinkedWallets(userWallets, wallets)
-            : userWallets);
+        if (!didConnectedStateLoad.current)
+            return;
+        setUserWallets((userWallets) => updateUserWalletsFromLinkedWallets.updateUserWalletsFromLinkedWallets(userWallets, wallets));
     }, [didConnectedStateLoad, setUserWallets, wallets]);
     const primaryWallet = React.useMemo(() => { var _a; return (_a = wallets.find((wallet) => wallet.id === primaryWalletId)) !== null && _a !== void 0 ? _a : null; }, [primaryWalletId, wallets]);
     const secondaryWallets = React.useMemo(() => canHaveMultipleWalletsConnected
@@ -173,7 +173,7 @@ const useWalletConnectors = ({ authMode, authToken, connectedWallets, walletConn
         setQrcodeUri,
     ]);
     return {
-        didConnectedStateLoad,
+        didConnectedStateLoad: didConnectedStateLoad.current,
         primaryWallet,
         secondaryWallets,
         setPrimaryWallet,

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

@@ -13,10 +13,10 @@ import '../../constants/colors.js';
 import '../../../shared/utils/classes/storage/localStorage.js';
 import 'viem';
 import '../../../shared/consts/index.js';
-import { isSameWalletName } from '../../functions/isSameWalletName/isSameWalletName.js';
-import { useWalletsConnectionState } from '../useWalletsConnectionState/useWalletsConnectionState.js';
 import '@dynamic-labs/multi-wallet';
 import { getWalletIdentifier } from '../../functions/getWalletIdentifier/getWalletIdentifier.js';
+import { isSameWalletName } from '../../functions/isSameWalletName/isSameWalletName.js';
+import { useWalletsConnectionState } from '../useWalletsConnectionState/useWalletsConnectionState.js';
 import { reconnectSocialWallet } from './reconnectSocialWallet.js';
 import { createLinkedWalletsFromWalletOptions } from './utils/createLinkedWalletsFromWalletOptions/createLinkedWalletsFromWalletOptions.js';
 import { updateUserWalletsFromLinkedWallets } from './utils/updateUserWalletsFromLinkedWallets/updateUserWalletsFromLinkedWallets.js';
@@ -62,14 +62,14 @@ const useWalletConnectors = ({ authMode, authToken, connectedWallets, walletConn
     useEffect(() => walletsBasedOnAuthMode.forEach((wallet) => {
         wallet.connector.initEventListener();
     }), [walletsBasedOnAuthMode]);
-    const { connectedWalletMap, didConnectedStateLoad } = useWalletsConnectionState(walletsBasedOnAuthMode);
-    const wallets = useMemo(() => walletsBasedOnAuthMode.map((wallet) => (Object.assign(Object.assign({}, wallet), { connected: Boolean(connectedWalletMap[getWalletIdentifier(wallet)]) }))), [connectedWalletMap, walletsBasedOnAuthMode]);
+    const { connectedWalletsMap, didConnectedStateLoad } = useWalletsConnectionState(walletsBasedOnAuthMode);
+    const wallets = useMemo(() => walletsBasedOnAuthMode.map((wallet) => (Object.assign(Object.assign({}, wallet), { connected: Boolean(connectedWalletsMap[getWalletIdentifier(wallet)]) }))), [connectedWalletsMap, walletsBasedOnAuthMode]);
     const { setUserWallets } = useInternalUserWallets();
     // Keep userWallets in sync whenever linkedWallets changes
     useEffect(() => {
-        setUserWallets((userWallets) => didConnectedStateLoad
-            ? updateUserWalletsFromLinkedWallets(userWallets, wallets)
-            : userWallets);
+        if (!didConnectedStateLoad.current)
+            return;
+        setUserWallets((userWallets) => updateUserWalletsFromLinkedWallets(userWallets, wallets));
     }, [didConnectedStateLoad, setUserWallets, wallets]);
     const primaryWallet = useMemo(() => { var _a; return (_a = wallets.find((wallet) => wallet.id === primaryWalletId)) !== null && _a !== void 0 ? _a : null; }, [primaryWalletId, wallets]);
     const secondaryWallets = useMemo(() => canHaveMultipleWalletsConnected
@@ -169,7 +169,7 @@ const useWalletConnectors = ({ authMode, authToken, connectedWallets, walletConn
         setQrcodeUri,
     ]);
     return {
-        didConnectedStateLoad,
+        didConnectedStateLoad: didConnectedStateLoad.current,
         primaryWallet,
         secondaryWallets,
         setPrimaryWallet,

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

@@ -65,12 +65,13 @@ const useWalletEventListeners = ({ handleLogOut, multiWallet, multiWalletWidgetS
         if (!primaryWallet)
             return;
         const [newAddress] = accounts;
-        const newWallet = secondaryWallets.find((wallet) => walletConnectorCore.isSameAddress(wallet.address, newAddress, wallet.chain));
-        if (authMode === 'connect-only') {
+        const changedAddress = !walletConnectorCore.isSameAddress(newAddress, primaryWallet.address, primaryWallet.chain);
+        if (changedAddress && authMode === 'connect-only') {
             refreshConnectedWallet(primaryWallet.id, primaryWallet.connector);
             return;
         }
-        if (walletConnectorCore.isSameAddress(newAddress, primaryWallet.address, primaryWallet.chain)) {
+        const newWallet = secondaryWallets.find((wallet) => walletConnectorCore.isSameAddress(wallet.address, newAddress, wallet.chain));
+        if (!changedAddress) {
             setMultiWalletWidgetState('idle');
         }
         else if (!multiWallet) {

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

@@ -61,12 +61,13 @@ const useWalletEventListeners = ({ handleLogOut, multiWallet, multiWalletWidgetS
         if (!primaryWallet)
             return;
         const [newAddress] = accounts;
-        const newWallet = secondaryWallets.find((wallet) => isSameAddress(wallet.address, newAddress, wallet.chain));
-        if (authMode === 'connect-only') {
+        const changedAddress = !isSameAddress(newAddress, primaryWallet.address, primaryWallet.chain);
+        if (changedAddress && authMode === 'connect-only') {
             refreshConnectedWallet(primaryWallet.id, primaryWallet.connector);
             return;
         }
-        if (isSameAddress(newAddress, primaryWallet.address, primaryWallet.chain)) {
+        const newWallet = secondaryWallets.find((wallet) => isSameAddress(wallet.address, newAddress, wallet.chain));
+        if (!changedAddress) {
             setMultiWalletWidgetState('idle');
         }
         else if (!multiWallet) {

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

@@ -4,10 +4,10 @@ Object.defineProperty(exports, '__esModule', { value: true });
 
 var _tslib = require('../../../../../_virtual/_tslib.cjs');
 var React = require('react');
+var walletConnectorCore = require('@dynamic-labs/wallet-connector-core');
 require('@dynamic-labs/sdk-api');
-var logger = require('../../../shared/logger.cjs');
+require('../../../shared/logger.cjs');
 require('@dynamic-labs/iconic');
-require('@dynamic-labs/wallet-connector-core');
 require('react/jsx-runtime');
 require('../../../context/ViewContext/ViewContext.cjs');
 require('@dynamic-labs/wallet-book');
@@ -15,6 +15,7 @@ require('../../constants/colors.cjs');
 require('../../../shared/utils/classes/storage/localStorage.cjs');
 require('viem');
 require('@dynamic-labs/utils');
+var useThrottle = require('../../../shared/utils/hooks/useThrottle/useThrottle.cjs');
 require('../../../shared/consts/index.cjs');
 require('@dynamic-labs/multi-wallet');
 var getWalletIdentifier = require('../../functions/getWalletIdentifier/getWalletIdentifier.cjs');
@@ -22,65 +23,84 @@ var isWalletConnected = require('../../functions/isWalletConnected/isWalletConne
 var useEventListener = require('../useEventListener/useEventListener.cjs');
 var useWalletConnectorEvent = require('../useWalletConnectorEvent/useWalletConnectorEvent.cjs');
 
-const connectedWalletStateReducer = (state, connectedWalletsMap) => {
-    // When setting to empty, unset load flag
-    if (Object.values(connectedWalletsMap).length === 0) {
-        if (state.didLoad === false)
-            return state;
-        return Object.assign(Object.assign({}, state), { connectedWalletsMap, didLoad: false });
-    }
-    return Object.assign(Object.assign({}, state), { connectedWalletsMap, didLoad: true });
-};
+/**
+ * For the given wallet array, this returns an object mapping from each wallet's
+ * identifier to whether its connector recognizes it as currently connected or not.
+ */
+const getConnectedWalletsMap = (wallets) => _tslib.__awaiter(void 0, void 0, void 0, function* () {
+    const newMap = {};
+    yield Promise.all(wallets.map((wallet) => _tslib.__awaiter(void 0, void 0, void 0, function* () {
+        newMap[getWalletIdentifier.getWalletIdentifier(wallet)] = yield isWalletConnected.isWalletConnected(wallet);
+    })));
+    return newMap;
+});
 const useWalletsConnectionState = (wallets) => {
-    const [state, setState] = React.useReducer(connectedWalletStateReducer, {
-        connectedWalletsMap: {},
-        didLoad: false,
-    });
-    const connectors = wallets.map(({ connector }) => connector);
-    const lastCallTimestamp = React.useRef(0);
+    const [connectedWalletsMap, setConnectedWalletsMap] = React.useState({});
+    /**
+     * Whether the connection map has been loaded off of the current wallet array.
+     * Always false for empty wallet arrays.
+     */
+    const didConnectedStateLoad = React.useRef(false);
+    /**
+     * When an accountChanged event is raised, we store the incoming wallet here
+     * until it is finally reflected in the wallets prop.
+     * During this time we do not update the connectedWalletsMap.
+     * This way, we avoid setting the connected state of the primary wallet
+     * to false due to a state transition delay.
+     */
+    const incomingWalletSwitchAddress = React.useRef(undefined);
     const computeConnectedStateForWallets = React.useCallback(() => _tslib.__awaiter(void 0, void 0, void 0, function* () {
-        const connectedWalletsMap = {};
-        yield Promise.all(wallets.map((wallet) => _tslib.__awaiter(void 0, void 0, void 0, function* () {
-            connectedWalletsMap[getWalletIdentifier.getWalletIdentifier(wallet)] =
-                yield isWalletConnected.isWalletConnected(wallet);
-        })));
-        setState(connectedWalletsMap);
-    }), [wallets]);
-    const handleOnEventUpdate = React.useCallback(() => _tslib.__awaiter(void 0, void 0, void 0, function* () {
-        if (!wallets.length)
-            return;
-        const callTimestamp = new Date().getTime();
-        const diffFromLastCall = callTimestamp - lastCallTimestamp.current;
-        lastCallTimestamp.current = callTimestamp;
-        // getConnectedAccounts trigger accountChanged event for Phantom EVM wallets
-        // which causes a loop of calls to this function
-        if (diffFromLastCall < 1000) {
-            logger.logger.warn('computeConnectedStateForWallets: skipping due too many calls.');
+        didConnectedStateLoad.current = false;
+        const newMap = yield getConnectedWalletsMap(wallets);
+        if (Object.values(newMap).length === 0) {
+            setConnectedWalletsMap({});
             return;
         }
-        computeConnectedStateForWallets();
-    }), [computeConnectedStateForWallets, wallets.length]);
-    useWalletConnectorEvent.useWalletConnectorEvent(connectors, 'accountChange', handleOnEventUpdate);
-    useWalletConnectorEvent.useWalletConnectorEvent(connectors, 'disconnect', handleOnEventUpdate);
-    useWalletConnectorEvent.useWalletConnectorEvent(connectors, 'chainChange', handleOnEventUpdate);
-    const refreshKey = wallets.map(getWalletIdentifier.getWalletIdentifier).join('-');
+        didConnectedStateLoad.current = true;
+        // If there is an incoming account switch and it isn't yet finished,
+        // we don't change the map to avoid setting it to a misleading state
+        if (incomingWalletSwitchAddress.current) {
+            const accountSwitchIsComplete = wallets.some((wallet) => walletConnectorCore.isSameAddress(incomingWalletSwitchAddress.current, wallet.address, wallet.chain));
+            if (accountSwitchIsComplete)
+                incomingWalletSwitchAddress.current = undefined;
+            else
+                return;
+        }
+        setConnectedWalletsMap(newMap);
+    }), [wallets]);
+    /** A string that is unique for each possible value of the wallets prop */
+    const walletsHash = wallets.map(getWalletIdentifier.getWalletIdentifier).join('-');
+    const connectors = wallets.map(({ connector }) => connector);
+    // getConnectedAccounts trigger accountChanged event for Phantom EVM wallets
+    // which causes a loop of calls to this function, so we throttle it
+    const handleEvent = useThrottle.useThrottle(() => {
+        if (walletsHash)
+            computeConnectedStateForWallets();
+    }, 1000);
+    const onAccountChange = ({ accounts }) => {
+        incomingWalletSwitchAddress.current = accounts[0];
+        handleEvent();
+    };
+    useWalletConnectorEvent.useWalletConnectorEvent(connectors, 'accountChange', onAccountChange);
+    useWalletConnectorEvent.useWalletConnectorEvent(connectors, 'disconnect', handleEvent);
+    useWalletConnectorEvent.useWalletConnectorEvent(connectors, 'chainChange', handleEvent);
     React.useEffect(() => {
         computeConnectedStateForWallets();
     }, 
     /**
-     * This is using a custom key to force the useEffect to run only when a connector is
-     * added or removed from the connectors list.
+     * This is using a custom key to force the useEffect to run only when the ids of the
+     * wallets change.
      */
     // eslint-disable-next-line react-hooks/exhaustive-deps
-    [refreshKey]);
+    [walletsHash]);
     /**
      * This is a workaround to detect when the user switches to another tab/extension
      * and then comes back to the dapp.
      */
     useEventListener.useEventListener('focus', computeConnectedStateForWallets);
     return {
-        connectedWalletMap: state.connectedWalletsMap,
-        didConnectedStateLoad: state.didLoad,
+        connectedWalletsMap,
+        didConnectedStateLoad,
     };
 };
 

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

@@ -1,13 +1,11 @@
+import { MutableRefObject } from 'react';
 import { Wallet } from '../../../shared';
-type ConnectedState = {
-    didLoad: boolean;
-    connectedWalletsMap: {
-        [address: string]: boolean;
-    };
+type ConnectedWalletsMap = {
+    [address: string]: boolean;
 };
 type WalletsConnectionStateHook = (wallets: Wallet[]) => {
-    connectedWalletMap: ConnectedState['connectedWalletsMap'];
-    didConnectedStateLoad: ConnectedState['didLoad'];
+    connectedWalletsMap: ConnectedWalletsMap;
+    didConnectedStateLoad: MutableRefObject<boolean>;
 };
 export declare const useWalletsConnectionState: WalletsConnectionStateHook;
 export {};

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

@@ -1,9 +1,9 @@
 import { __awaiter } from '../../../../../_virtual/_tslib.js';
-import { useReducer, useRef, useCallback, useEffect } from 'react';
+import { useState, useRef, useCallback, useEffect } from 'react';
+import { isSameAddress } from '@dynamic-labs/wallet-connector-core';
 import '@dynamic-labs/sdk-api';
-import { logger } from '../../../shared/logger.js';
+import '../../../shared/logger.js';
 import '@dynamic-labs/iconic';
-import '@dynamic-labs/wallet-connector-core';
 import 'react/jsx-runtime';
 import '../../../context/ViewContext/ViewContext.js';
 import '@dynamic-labs/wallet-book';
@@ -11,6 +11,7 @@ import '../../constants/colors.js';
 import '../../../shared/utils/classes/storage/localStorage.js';
 import 'viem';
 import '@dynamic-labs/utils';
+import { useThrottle } from '../../../shared/utils/hooks/useThrottle/useThrottle.js';
 import '../../../shared/consts/index.js';
 import '@dynamic-labs/multi-wallet';
 import { getWalletIdentifier } from '../../functions/getWalletIdentifier/getWalletIdentifier.js';
@@ -18,65 +19,84 @@ import { isWalletConnected } from '../../functions/isWalletConnected/isWalletCon
 import { useEventListener } from '../useEventListener/useEventListener.js';
 import { useWalletConnectorEvent } from '../useWalletConnectorEvent/useWalletConnectorEvent.js';
 
-const connectedWalletStateReducer = (state, connectedWalletsMap) => {
-    // When setting to empty, unset load flag
-    if (Object.values(connectedWalletsMap).length === 0) {
-        if (state.didLoad === false)
-            return state;
-        return Object.assign(Object.assign({}, state), { connectedWalletsMap, didLoad: false });
-    }
-    return Object.assign(Object.assign({}, state), { connectedWalletsMap, didLoad: true });
-};
+/**
+ * For the given wallet array, this returns an object mapping from each wallet's
+ * identifier to whether its connector recognizes it as currently connected or not.
+ */
+const getConnectedWalletsMap = (wallets) => __awaiter(void 0, void 0, void 0, function* () {
+    const newMap = {};
+    yield Promise.all(wallets.map((wallet) => __awaiter(void 0, void 0, void 0, function* () {
+        newMap[getWalletIdentifier(wallet)] = yield isWalletConnected(wallet);
+    })));
+    return newMap;
+});
 const useWalletsConnectionState = (wallets) => {
-    const [state, setState] = useReducer(connectedWalletStateReducer, {
-        connectedWalletsMap: {},
-        didLoad: false,
-    });
-    const connectors = wallets.map(({ connector }) => connector);
-    const lastCallTimestamp = useRef(0);
+    const [connectedWalletsMap, setConnectedWalletsMap] = useState({});
+    /**
+     * Whether the connection map has been loaded off of the current wallet array.
+     * Always false for empty wallet arrays.
+     */
+    const didConnectedStateLoad = useRef(false);
+    /**
+     * When an accountChanged event is raised, we store the incoming wallet here
+     * until it is finally reflected in the wallets prop.
+     * During this time we do not update the connectedWalletsMap.
+     * This way, we avoid setting the connected state of the primary wallet
+     * to false due to a state transition delay.
+     */
+    const incomingWalletSwitchAddress = useRef(undefined);
     const computeConnectedStateForWallets = useCallback(() => __awaiter(void 0, void 0, void 0, function* () {
-        const connectedWalletsMap = {};
-        yield Promise.all(wallets.map((wallet) => __awaiter(void 0, void 0, void 0, function* () {
-            connectedWalletsMap[getWalletIdentifier(wallet)] =
-                yield isWalletConnected(wallet);
-        })));
-        setState(connectedWalletsMap);
-    }), [wallets]);
-    const handleOnEventUpdate = useCallback(() => __awaiter(void 0, void 0, void 0, function* () {
-        if (!wallets.length)
-            return;
-        const callTimestamp = new Date().getTime();
-        const diffFromLastCall = callTimestamp - lastCallTimestamp.current;
-        lastCallTimestamp.current = callTimestamp;
-        // getConnectedAccounts trigger accountChanged event for Phantom EVM wallets
-        // which causes a loop of calls to this function
-        if (diffFromLastCall < 1000) {
-            logger.warn('computeConnectedStateForWallets: skipping due too many calls.');
+        didConnectedStateLoad.current = false;
+        const newMap = yield getConnectedWalletsMap(wallets);
+        if (Object.values(newMap).length === 0) {
+            setConnectedWalletsMap({});
             return;
         }
-        computeConnectedStateForWallets();
-    }), [computeConnectedStateForWallets, wallets.length]);
-    useWalletConnectorEvent(connectors, 'accountChange', handleOnEventUpdate);
-    useWalletConnectorEvent(connectors, 'disconnect', handleOnEventUpdate);
-    useWalletConnectorEvent(connectors, 'chainChange', handleOnEventUpdate);
-    const refreshKey = wallets.map(getWalletIdentifier).join('-');
+        didConnectedStateLoad.current = true;
+        // If there is an incoming account switch and it isn't yet finished,
+        // we don't change the map to avoid setting it to a misleading state
+        if (incomingWalletSwitchAddress.current) {
+            const accountSwitchIsComplete = wallets.some((wallet) => isSameAddress(incomingWalletSwitchAddress.current, wallet.address, wallet.chain));
+            if (accountSwitchIsComplete)
+                incomingWalletSwitchAddress.current = undefined;
+            else
+                return;
+        }
+        setConnectedWalletsMap(newMap);
+    }), [wallets]);
+    /** A string that is unique for each possible value of the wallets prop */
+    const walletsHash = wallets.map(getWalletIdentifier).join('-');
+    const connectors = wallets.map(({ connector }) => connector);
+    // getConnectedAccounts trigger accountChanged event for Phantom EVM wallets
+    // which causes a loop of calls to this function, so we throttle it
+    const handleEvent = useThrottle(() => {
+        if (walletsHash)
+            computeConnectedStateForWallets();
+    }, 1000);
+    const onAccountChange = ({ accounts }) => {
+        incomingWalletSwitchAddress.current = accounts[0];
+        handleEvent();
+    };
+    useWalletConnectorEvent(connectors, 'accountChange', onAccountChange);
+    useWalletConnectorEvent(connectors, 'disconnect', handleEvent);
+    useWalletConnectorEvent(connectors, 'chainChange', handleEvent);
     useEffect(() => {
         computeConnectedStateForWallets();
     }, 
     /**
-     * This is using a custom key to force the useEffect to run only when a connector is
-     * added or removed from the connectors list.
+     * This is using a custom key to force the useEffect to run only when the ids of the
+     * wallets change.
      */
     // eslint-disable-next-line react-hooks/exhaustive-deps
-    [refreshKey]);
+    [walletsHash]);
     /**
      * This is a workaround to detect when the user switches to another tab/extension
      * and then comes back to the dapp.
      */
     useEventListener('focus', computeConnectedStateForWallets);
     return {
-        connectedWalletMap: state.connectedWalletsMap,
-        didConnectedStateLoad: state.didLoad,
+        connectedWalletsMap,
+        didConnectedStateLoad,
     };
 };