@dynamic-labs/sdk-react-core 1.1.0-phantom.0 → 1.1.0

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

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

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

@@ -12,15 +12,18 @@ require('react');
 require('../../../../../shared/logger.cjs');
 require('@dynamic-labs/wallet-book');
 require('../../../../constants/colors.cjs');
+require('../../../../constants/values.cjs');
 require('../../../../../shared/utils/classes/storage/localStorage.cjs');
 require('viem');
 require('@dynamic-labs/utils');
 require('../../../../../shared/consts/index.cjs');
+require('../../../../../../../_virtual/_tslib.cjs');
 require('@dynamic-labs/multi-wallet');
 var shouldManuallyReconnectOnRefresh = require('../../../../functions/shouldManuallyReconnectOnRefresh/shouldManuallyReconnectOnRefresh.cjs');
 require('viem/chains');
 var findWallet = require('../findWallet/findWallet.cjs');
 var smartWallet = require('../smartWallet/smartWallet.cjs');
+var convertLegacyPhantomLedgerConnector = require('../convertLegacyPhantomLedgerConnector/convertLegacyPhantomLedgerConnector.cjs');
 
 const createLinkedWalletsFromWalletOptions = ({ authToken, walletConnectorOptions, primaryWalletId, }) => {
     const decodedJwt = decodeJwt.decodeJwt(authToken);
@@ -29,6 +32,7 @@ const createLinkedWalletsFromWalletOptions = ({ authToken, walletConnectorOption
         return [];
     }
     return decodedJwt.verifiedCredentials
+        .map(convertLegacyPhantomLedger)
         .map((account) => {
         const wallet = findWallet.findWallet(account, walletConnectorOptions);
         // this probably shouldn't happen. this would mean that the user has an account linked
@@ -67,5 +71,11 @@ const createLinkedWalletsFromWalletOptions = ({ authToken, walletConnectorOption
     })
         .filter((wc) => wc !== null);
 };
+const convertLegacyPhantomLedger = (account) => {
+    if (account.walletName === 'phantomledger') {
+        return convertLegacyPhantomLedgerConnector.convertLegacyPhantomLedgerConnector(account);
+    }
+    return account;
+};
 
 exports.createLinkedWalletsFromWalletOptions = createLinkedWalletsFromWalletOptions;

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

@@ -8,15 +8,18 @@ import 'react';
 import '../../../../../shared/logger.js';
 import '@dynamic-labs/wallet-book';
 import '../../../../constants/colors.js';
+import '../../../../constants/values.js';
 import '../../../../../shared/utils/classes/storage/localStorage.js';
 import 'viem';
 import '@dynamic-labs/utils';
 import '../../../../../shared/consts/index.js';
+import '../../../../../../../_virtual/_tslib.js';
 import '@dynamic-labs/multi-wallet';
 import { shouldManuallyReconnectOnRefresh } from '../../../../functions/shouldManuallyReconnectOnRefresh/shouldManuallyReconnectOnRefresh.js';
 import 'viem/chains';
 import { findWallet } from '../findWallet/findWallet.js';
 import { isOwnerOfASmartWallet, initializeSmartWallet } from '../smartWallet/smartWallet.js';
+import { convertLegacyPhantomLedgerConnector } from '../convertLegacyPhantomLedgerConnector/convertLegacyPhantomLedgerConnector.js';
 
 const createLinkedWalletsFromWalletOptions = ({ authToken, walletConnectorOptions, primaryWalletId, }) => {
     const decodedJwt = decodeJwt(authToken);
@@ -25,6 +28,7 @@ const createLinkedWalletsFromWalletOptions = ({ authToken, walletConnectorOption
         return [];
     }
     return decodedJwt.verifiedCredentials
+        .map(convertLegacyPhantomLedger)
         .map((account) => {
         const wallet = findWallet(account, walletConnectorOptions);
         // this probably shouldn't happen. this would mean that the user has an account linked
@@ -63,5 +67,11 @@ const createLinkedWalletsFromWalletOptions = ({ authToken, walletConnectorOption
     })
         .filter((wc) => wc !== null);
 };
+const convertLegacyPhantomLedger = (account) => {
+    if (account.walletName === 'phantomledger') {
+        return convertLegacyPhantomLedgerConnector(account);
+    }
+    return account;
+};
 
 export { createLinkedWalletsFromWalletOptions };

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

@@ -3,10 +3,20 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 
 var walletConnectorCore = require('@dynamic-labs/wallet-connector-core');
+var values = require('../../../../constants/values.cjs');
 
 // remaining normalizeWalletName until QNTM-846 is complete due to us still passing the walletname to redcoast:
 // https://linear.app/dynamic-labs/issue/QNTM-846/remove-usage-of-walletwalletconnectorwname-to-instead-use
-const findWallet = (account, walletOptions) => walletOptions.find((wallet) => account.walletName &&
-    walletConnectorCore.normalizeWalletName(account.walletName) === wallet.key);
+const findWallet = (account, walletOptions) => {
+    const normalizedWalletName = account.walletName && walletConnectorCore.normalizeWalletName(account.walletName);
+    if (normalizedWalletName === 'turnkeyhd') {
+        const chain = account.chain
+            ? values.VerifiedCredentialNameToChainEnum[account.chain]
+            : undefined;
+        return walletOptions.find((wallet) => normalizedWalletName === wallet.key &&
+            wallet.walletConnector.connectedChain === chain);
+    }
+    return walletOptions.find((wallet) => normalizedWalletName === wallet.key);
+};
 
 exports.findWallet = findWallet;

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

@@ -1,8 +1,18 @@
 import { normalizeWalletName } from '@dynamic-labs/wallet-connector-core';
+import { VerifiedCredentialNameToChainEnum } from '../../../../constants/values.js';
 
 // remaining normalizeWalletName until QNTM-846 is complete due to us still passing the walletname to redcoast:
 // https://linear.app/dynamic-labs/issue/QNTM-846/remove-usage-of-walletwalletconnectorwname-to-instead-use
-const findWallet = (account, walletOptions) => walletOptions.find((wallet) => account.walletName &&
-    normalizeWalletName(account.walletName) === wallet.key);
+const findWallet = (account, walletOptions) => {
+    const normalizedWalletName = account.walletName && normalizeWalletName(account.walletName);
+    if (normalizedWalletName === 'turnkeyhd') {
+        const chain = account.chain
+            ? VerifiedCredentialNameToChainEnum[account.chain]
+            : undefined;
+        return walletOptions.find((wallet) => normalizedWalletName === wallet.key &&
+            wallet.walletConnector.connectedChain === chain);
+    }
+    return walletOptions.find((wallet) => normalizedWalletName === wallet.key);
+};
 
 export { findWallet };

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

@@ -12,6 +12,7 @@ require('react/jsx-runtime');
 require('../../../context/ViewContext/ViewContext.cjs');
 require('@dynamic-labs/wallet-book');
 require('../../constants/colors.cjs');
+require('../../constants/values.cjs');
 require('../../../shared/utils/classes/storage/localStorage.cjs');
 require('viem');
 require('@dynamic-labs/utils');
@@ -66,12 +67,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

@@ -8,6 +8,7 @@ import 'react/jsx-runtime';
 import '../../../context/ViewContext/ViewContext.js';
 import '@dynamic-labs/wallet-book';
 import '../../constants/colors.js';
+import '../../constants/values.js';
 import '../../../shared/utils/classes/storage/localStorage.js';
 import 'viem';
 import '@dynamic-labs/utils';
@@ -62,12 +63,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/useWalletItemActions/useWalletItemActions.cjs

@@ -14,6 +14,7 @@ require('react/jsx-runtime');
 var ViewContext = require('../../../context/ViewContext/ViewContext.cjs');
 require('@dynamic-labs/wallet-book');
 require('../../constants/colors.cjs');
+require('../../constants/values.cjs');
 require('../../../shared/utils/classes/storage/localStorage.cjs');
 require('viem');
 require('../../../shared/consts/index.cjs');
@@ -55,6 +56,7 @@ require('formik');
 require('i18next');
 require('../../../components/OverlayCard/OverlayCard.context.cjs');
 require('../../../components/PasskeyCreatedSuccessBanner/PasskeyCreatedSuccessBanner.cjs');
+require('../../../context/PasskeyContext/PasskeyContext.cjs');
 require('../../../views/WalletList/WalletList.cjs');
 require('qrcode');
 require('@hcaptcha/react-hcaptcha');
@@ -63,7 +65,6 @@ require('../../../context/SocialRedirectContext/SocialRedirectContext.cjs');
 require('../../../context/WalletGroupContext/WalletGroupContext.cjs');
 require('../../../widgets/DynamicBridgeWidget/views/WalletsView/components/SecondaryWallets/SecondaryWallets.cjs');
 require('../../../context/FooterAnimationContext/index.cjs');
-require('../../../context/PasskeyContext/PasskeyContext.cjs');
 require('../../../widgets/DynamicWidget/components/DynamicWidgetHeader/DynamicWidgetHeader.cjs');
 require('../../../widgets/DynamicWidget/context/DynamicWidgetContext.cjs');
 require('../../../components/UserProfile/parts/UserProfileField/components/VerifiedEmailIcon/VerifiedEmailIcon.cjs');

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

@@ -10,6 +10,7 @@ import 'react/jsx-runtime';
 import { useViewContext } from '../../../context/ViewContext/ViewContext.js';
 import '@dynamic-labs/wallet-book';
 import '../../constants/colors.js';
+import '../../constants/values.js';
 import '../../../shared/utils/classes/storage/localStorage.js';
 import 'viem';
 import '../../../shared/consts/index.js';
@@ -51,6 +52,7 @@ import 'formik';
 import 'i18next';
 import '../../../components/OverlayCard/OverlayCard.context.js';
 import '../../../components/PasskeyCreatedSuccessBanner/PasskeyCreatedSuccessBanner.js';
+import '../../../context/PasskeyContext/PasskeyContext.js';
 import '../../../views/WalletList/WalletList.js';
 import 'qrcode';
 import '@hcaptcha/react-hcaptcha';
@@ -59,7 +61,6 @@ import '../../../context/SocialRedirectContext/SocialRedirectContext.js';
 import '../../../context/WalletGroupContext/WalletGroupContext.js';
 import '../../../widgets/DynamicBridgeWidget/views/WalletsView/components/SecondaryWallets/SecondaryWallets.js';
 import '../../../context/FooterAnimationContext/index.js';
-import '../../../context/PasskeyContext/PasskeyContext.js';
 import '../../../widgets/DynamicWidget/components/DynamicWidgetHeader/DynamicWidgetHeader.js';
 import '../../../widgets/DynamicWidget/context/DynamicWidgetContext.js';
 import '../../../components/UserProfile/parts/UserProfileField/components/VerifiedEmailIcon/VerifiedEmailIcon.js';

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

@@ -16,6 +16,7 @@ require('@dynamic-labs/wallet-connector-core');
 require('../../../context/ViewContext/ViewContext.cjs');
 require('@dynamic-labs/wallet-book');
 require('../../constants/colors.cjs');
+require('../../constants/values.cjs');
 require('../../../shared/utils/classes/storage/localStorage.cjs');
 require('viem');
 require('../../../shared/consts/index.cjs');
@@ -52,6 +53,7 @@ require('formik');
 require('i18next');
 require('../../../components/OverlayCard/OverlayCard.context.cjs');
 require('../../../components/PasskeyCreatedSuccessBanner/PasskeyCreatedSuccessBanner.cjs');
+require('../../../context/PasskeyContext/PasskeyContext.cjs');
 require('../../../views/WalletList/WalletList.cjs');
 require('qrcode');
 require('@hcaptcha/react-hcaptcha');
@@ -60,7 +62,6 @@ require('../../../context/SocialRedirectContext/SocialRedirectContext.cjs');
 require('../../../context/WalletGroupContext/WalletGroupContext.cjs');
 require('../../../widgets/DynamicBridgeWidget/views/WalletsView/components/SecondaryWallets/SecondaryWallets.cjs');
 require('../../../context/FooterAnimationContext/index.cjs');
-require('../../../context/PasskeyContext/PasskeyContext.cjs');
 require('../../../widgets/DynamicWidget/components/DynamicWidgetHeader/DynamicWidgetHeader.cjs');
 require('../../../widgets/DynamicWidget/context/DynamicWidgetContext.cjs');
 require('../../../components/UserProfile/parts/UserProfileField/components/VerifiedEmailIcon/VerifiedEmailIcon.cjs');

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

@@ -12,6 +12,7 @@ import '@dynamic-labs/wallet-connector-core';
 import '../../../context/ViewContext/ViewContext.js';
 import '@dynamic-labs/wallet-book';
 import '../../constants/colors.js';
+import '../../constants/values.js';
 import '../../../shared/utils/classes/storage/localStorage.js';
 import 'viem';
 import '../../../shared/consts/index.js';
@@ -48,6 +49,7 @@ import 'formik';
 import 'i18next';
 import '../../../components/OverlayCard/OverlayCard.context.js';
 import '../../../components/PasskeyCreatedSuccessBanner/PasskeyCreatedSuccessBanner.js';
+import '../../../context/PasskeyContext/PasskeyContext.js';
 import '../../../views/WalletList/WalletList.js';
 import 'qrcode';
 import '@hcaptcha/react-hcaptcha';
@@ -56,7 +58,6 @@ import '../../../context/SocialRedirectContext/SocialRedirectContext.js';
 import '../../../context/WalletGroupContext/WalletGroupContext.js';
 import '../../../widgets/DynamicBridgeWidget/views/WalletsView/components/SecondaryWallets/SecondaryWallets.js';
 import '../../../context/FooterAnimationContext/index.js';
-import '../../../context/PasskeyContext/PasskeyContext.js';
 import '../../../widgets/DynamicWidget/components/DynamicWidgetHeader/DynamicWidgetHeader.js';
 import '../../../widgets/DynamicWidget/context/DynamicWidgetContext.js';
 import '../../../components/UserProfile/parts/UserProfileField/components/VerifiedEmailIcon/VerifiedEmailIcon.js';

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

@@ -4,17 +4,19 @@ 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');
 require('../../constants/colors.cjs');
+require('../../constants/values.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');
@@ -24,65 +26,84 @@ require('../../../events/dynamicEvents.cjs');
 var useWalletConnectorEvent = require('../events/useWalletConnectorEvent/useWalletConnectorEvent.cjs');
 var useWindowEvent = require('../events/useWindowEvent/useWindowEvent.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.
      */
     useWindowEvent.useWindowEvent('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,16 +1,18 @@
 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';
 import '../../constants/colors.js';
+import '../../constants/values.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';
@@ -20,65 +22,84 @@ import '../../../events/dynamicEvents.js';
 import { useWalletConnectorEvent } from '../events/useWalletConnectorEvent/useWalletConnectorEvent.js';
 import { useWindowEvent } from '../events/useWindowEvent/useWindowEvent.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.
      */
     useWindowEvent('focus', computeConnectedStateForWallets);
     return {
-        connectedWalletMap: state.connectedWalletsMap,
-        didConnectedStateLoad: state.didLoad,
+        connectedWalletsMap,
+        didConnectedStateLoad,
     };
 };