@dynamic-labs/sdk-react-core 0.18.0-RC.2 → 0.18.0-RC.21

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

@@ -0,0 +1,82 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var _tslib = require('../../../../../_virtual/_tslib.cjs');
+var React = require('react');
+require('@dynamic-labs/sdk-api');
+var logger = 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('@dynamic-labs/utils');
+require('../../constants/colors.cjs');
+var localStorage = require('../../../shared/utils/classes/storage/localStorage.cjs');
+require('ethers');
+require('../../../shared/consts/index.cjs');
+
+const useValidateSession = ({ handleLogOut, user, authToken, walletConnectV1Bridge, walletConnectors, wcVersion, }) => {
+    const [hasLoggedOut, setHasLoggedOut] = React.useState(false);
+    if (hasLoggedOut) {
+        return;
+    }
+    const logout = (reason, params) => _tslib.__awaiter(void 0, void 0, void 0, function* () {
+        setHasLoggedOut(true);
+        logger.logger.debug(`Logging out - Reason: ${reason}`, Object.assign({}, params));
+        yield handleLogOut();
+    });
+    const handleUserDataOutOfSync = () => _tslib.__awaiter(void 0, void 0, void 0, function* () {
+        if (authToken || !user) {
+            return;
+        }
+        yield logout('user data out of sync', {
+            authToken,
+            user,
+        });
+    });
+    const handleConnectorBridgeOutOfSync = () => _tslib.__awaiter(void 0, void 0, void 0, function* () {
+        let currentWalletConnectV1Bridge;
+        if (walletConnectors) {
+            for (const connector of walletConnectors) {
+                if (!connector.isWalletConnect) {
+                    continue;
+                }
+                const session = yield connector.getSession();
+                const bridge = session && (session === null || session === void 0 ? void 0 : session.bridge);
+                if (bridge) {
+                    currentWalletConnectV1Bridge = bridge;
+                    break;
+                }
+            }
+        }
+        if (!walletConnectV1Bridge ||
+            !currentWalletConnectV1Bridge ||
+            walletConnectV1Bridge === currentWalletConnectV1Bridge) {
+            return;
+        }
+        yield logout('connector bridge out of sync', {
+            newBridge: walletConnectV1Bridge,
+            oldBridge: currentWalletConnectV1Bridge,
+        });
+    });
+    const hasWCV1Data = localStorage.LocalStorage.getKeys().some((key) => key.startsWith('walletconnect') || key.startsWith('walletlink'));
+    const hasWCV2Data = localStorage.LocalStorage.getKeys().some((key) => key.startsWith('wc@2'));
+    const handleConnectorVersionOutOfSync = () => _tslib.__awaiter(void 0, void 0, void 0, function* () {
+        if (!wcVersion ||
+            (wcVersion === 2 && !hasWCV1Data) ||
+            (wcVersion === 1 && !hasWCV2Data)) {
+            return;
+        }
+        yield logout('connector version out of sync', {
+            newVersion: wcVersion,
+            oldVersion: hasWCV1Data ? 1 : 2,
+        });
+    });
+    handleUserDataOutOfSync();
+    handleConnectorBridgeOutOfSync();
+    handleConnectorVersionOutOfSync();
+};
+
+exports.useValidateSession = useValidateSession;

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

@@ -0,0 +1,12 @@
+import { UserProfile } from '../../../shared';
+import { WalletConnector } from '../../../..';
+type Props = {
+    handleLogOut: () => Promise<void>;
+    user: UserProfile | undefined;
+    authToken: string | undefined;
+    walletConnectV1Bridge: string | undefined;
+    walletConnectors: WalletConnector[] | undefined;
+    wcVersion: number | undefined;
+};
+export declare const useValidateSession: ({ handleLogOut, user, authToken, walletConnectV1Bridge, walletConnectors, wcVersion, }: Props) => void;
+export {};

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

@@ -0,0 +1,78 @@
+import { __awaiter } from '../../../../../_virtual/_tslib.js';
+import { useState } from 'react';
+import '@dynamic-labs/sdk-api';
+import { logger } from '../../../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 '@dynamic-labs/utils';
+import '../../constants/colors.js';
+import { LocalStorage } from '../../../shared/utils/classes/storage/localStorage.js';
+import 'ethers';
+import '../../../shared/consts/index.js';
+
+const useValidateSession = ({ handleLogOut, user, authToken, walletConnectV1Bridge, walletConnectors, wcVersion, }) => {
+    const [hasLoggedOut, setHasLoggedOut] = useState(false);
+    if (hasLoggedOut) {
+        return;
+    }
+    const logout = (reason, params) => __awaiter(void 0, void 0, void 0, function* () {
+        setHasLoggedOut(true);
+        logger.debug(`Logging out - Reason: ${reason}`, Object.assign({}, params));
+        yield handleLogOut();
+    });
+    const handleUserDataOutOfSync = () => __awaiter(void 0, void 0, void 0, function* () {
+        if (authToken || !user) {
+            return;
+        }
+        yield logout('user data out of sync', {
+            authToken,
+            user,
+        });
+    });
+    const handleConnectorBridgeOutOfSync = () => __awaiter(void 0, void 0, void 0, function* () {
+        let currentWalletConnectV1Bridge;
+        if (walletConnectors) {
+            for (const connector of walletConnectors) {
+                if (!connector.isWalletConnect) {
+                    continue;
+                }
+                const session = yield connector.getSession();
+                const bridge = session && (session === null || session === void 0 ? void 0 : session.bridge);
+                if (bridge) {
+                    currentWalletConnectV1Bridge = bridge;
+                    break;
+                }
+            }
+        }
+        if (!walletConnectV1Bridge ||
+            !currentWalletConnectV1Bridge ||
+            walletConnectV1Bridge === currentWalletConnectV1Bridge) {
+            return;
+        }
+        yield logout('connector bridge out of sync', {
+            newBridge: walletConnectV1Bridge,
+            oldBridge: currentWalletConnectV1Bridge,
+        });
+    });
+    const hasWCV1Data = LocalStorage.getKeys().some((key) => key.startsWith('walletconnect') || key.startsWith('walletlink'));
+    const hasWCV2Data = LocalStorage.getKeys().some((key) => key.startsWith('wc@2'));
+    const handleConnectorVersionOutOfSync = () => __awaiter(void 0, void 0, void 0, function* () {
+        if (!wcVersion ||
+            (wcVersion === 2 && !hasWCV1Data) ||
+            (wcVersion === 1 && !hasWCV2Data)) {
+            return;
+        }
+        yield logout('connector version out of sync', {
+            newVersion: wcVersion,
+            oldVersion: hasWCV1Data ? 1 : 2,
+        });
+    });
+    handleUserDataOutOfSync();
+    handleConnectorBridgeOutOfSync();
+    handleConnectorVersionOutOfSync();
+};
+
+export { useValidateSession };

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

@@ -8,8 +8,6 @@ var utils = require('@dynamic-labs/utils');
 var api = require('../../../data/api.cjs');
 var index = require('../../functions/storeAuthToken/index.cjs');
 require('@dynamic-labs/multi-wallet');
-var localStorage$1 = require('../../constants/localStorage.cjs');
-require('../../constants/colors.cjs');
 var decodeJwt = require('../../../shared/utils/functions/decodeJwt/decodeJwt.cjs');
 require('@dynamic-labs/iconic');
 require('react/jsx-runtime');
@@ -17,14 +15,14 @@ var ViewContext = require('../../../context/ViewContext/ViewContext.cjs');
 require('react');
 var logger = require('../../../shared/logger.cjs');
 require('@dynamic-labs/wallet-book');
+var localStorage$1 = require('../../constants/localStorage.cjs');
+require('../../constants/colors.cjs');
 var localStorage = require('../../../shared/utils/classes/storage/localStorage.cjs');
 require('ethers');
 require('../../../shared/consts/index.cjs');
 var getVerifyArgs = require('../../functions/getVerifyArgs/getVerifyArgs.cjs');
 var createUserProfile = require('../../functions/createUserProfile/createUserProfile.cjs');
-var isSupportedNetwork = require('../../functions/isSupportedNetwork/isSupportedNetwork.cjs');
 require('@dynamic-labs/sdk-api');
-var isProgrammableNetworkSwitchSupported = require('../../functions/isProgrammableNetworkSwitchSupported/isProgrammableNetworkSwitchSupported.cjs');
 var useInternalDynamicContext = require('../../../context/DynamicContext/useInternalDynamicContext.cjs');
 var ErrorContext = require('../../../context/ErrorContext/ErrorContext.cjs');
 var getSiweStatement = require('../../functions/getSiweStatement/getSiweStatement.cjs');
@@ -38,7 +36,7 @@ const useVerifyWallet = ({ consumeNonce, displayTermsOfService, environmentId, p
     const { setDeniedAddress, setDeniedOauthProvider } = AccessDeniedContext.useAccessDeniedContext();
     const { setView, goToInitialView } = ViewContext.useViewContext();
     const { setErrorMessage, setError } = ErrorContext.useErrorContext();
-    const { setUser, multiWalletWidgetState, debugError, multiWallet: multiWalletEnabled, appName, primaryWalletId, setCallback, setShowAuthFlow, setPrimaryWalletId, siweStatement, connectedWallet, authMode, setOnboardingOnlyJwt, authToken, } = useInternalDynamicContext.useInternalDynamicContext();
+    const { setUser, multiWalletWidgetState, debugError, multiWallet: multiWalletEnabled, appName, primaryWalletId, setCallback, setShowAuthFlow, setPrimaryWalletId, siweStatement, connectedWallet, authMode, setOnboardingOnlyJwt, authToken, setAuthMode, removeConnectedWalletsInfo, setIsVerificationInProgress, } = useInternalDynamicContext.useInternalDynamicContext();
     // If the user is not already logged it means that we only need to verify
     // We need this boolean for the part of the logic where we already persisted a new authToken,
     // and need to distinguish between logic for verify or linking.
@@ -91,6 +89,9 @@ const useVerifyWallet = ({ consumeNonce, displayTermsOfService, environmentId, p
         }
     };
     const handleError = (e, walletConnector, address, oauth) => {
+        removeConnectedWalletsInfo();
+        // Ensure auth verification flag is taken down
+        setIsVerificationInProgress(false);
         // This is a special case where the user is trying to link a wallet
         // and the wallet is already linked and we don't want to kill the session.
         if (e instanceof utils.WalletUsedError) {
@@ -104,9 +105,15 @@ const useVerifyWallet = ({ consumeNonce, displayTermsOfService, environmentId, p
         }
         walletConnector.endSession();
         if (e instanceof utils.ChainalysisError) {
+            setDeniedAddress(address);
             setView('chainalysis-blocked-wallet');
             return;
         }
+        if (e instanceof utils.GateBlockedError) {
+            setDeniedAddress(address);
+            setView('gate-blocked-wallet');
+            return;
+        }
         if (e instanceof utils.NoAccessError) {
             setDeniedAddress(address);
             // we need to set this value if it's magic in order to set proper icon
@@ -130,11 +137,6 @@ const useVerifyWallet = ({ consumeNonce, displayTermsOfService, environmentId, p
     };
     return ({ walletConnector, fetchPublicAddressOpts, publicWalletAddress, captchaToken, oauth, }) => _tslib.__awaiter(void 0, void 0, void 0, function* () {
         const walletProvider = getWalletProvider.getWalletProvider(walletConnector);
-        const network = yield walletConnector.getNetwork();
-        const _isSupportedNetwork = isSupportedNetwork.isSupportedNetwork({
-            network,
-            walletConnector,
-        });
         try {
             const Jwt = yield generateJWT(walletConnector, walletProvider, fetchPublicAddressOpts, publicWalletAddress, captchaToken, oauth);
             const decodedJwt = decodeJwt.decodeJwt(Jwt);
@@ -144,17 +146,8 @@ const useVerifyWallet = ({ consumeNonce, displayTermsOfService, environmentId, p
             const isKycRequired = decodedJwt.missingFields.length;
             setOnboardingOnlyJwt(Jwt);
             localStorage.LocalStorage.setToLS(localStorage$1.LAST_USED_WALLET, walletConnector.name);
+            setAuthMode('connect-and-sign');
             updatePrimaryWalletId(walletConnector, user);
-            // Routes user to "Not Supported Network" screen if the user is not on the supported network
-            if (projectSettings &&
-                verifyOnly &&
-                !_isSupportedNetwork &&
-                !isKycRequired) {
-                if (isProgrammableNetworkSwitchSupported.isProgrammableNetworkSwitchSupported(walletConnector)) {
-                    return setView('network-not-supported');
-                }
-                return setView('network-not-supported-manual');
-            }
             // TODO: how can projectSettings be undefined?
             if (verifyOnly && projectSettings && isKycRequired) {
                 setShowAuthFlow(true);

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

@@ -1,11 +1,9 @@
 import { __awaiter } from '../../../../../_virtual/_tslib.js';
 import { isSocialWalletConnector } from '@dynamic-labs/wallet-connector-core';
-import { DynamicError, WalletUsedError, ChainalysisError, NoAccessError } from '@dynamic-labs/utils';
+import { DynamicError, WalletUsedError, ChainalysisError, GateBlockedError, NoAccessError } from '@dynamic-labs/utils';
 import { verifyWallet, linkWallet } from '../../../data/api.js';
 import { storeAuthToken } from '../../functions/storeAuthToken/index.js';
 import '@dynamic-labs/multi-wallet';
-import { LAST_USED_WALLET } from '../../constants/localStorage.js';
-import '../../constants/colors.js';
 import { decodeJwt } from '../../../shared/utils/functions/decodeJwt/decodeJwt.js';
 import '@dynamic-labs/iconic';
 import 'react/jsx-runtime';
@@ -13,14 +11,14 @@ import { useViewContext } from '../../../context/ViewContext/ViewContext.js';
 import 'react';
 import { logger } from '../../../shared/logger.js';
 import '@dynamic-labs/wallet-book';
+import { LAST_USED_WALLET } from '../../constants/localStorage.js';
+import '../../constants/colors.js';
 import { LocalStorage } from '../../../shared/utils/classes/storage/localStorage.js';
 import 'ethers';
 import '../../../shared/consts/index.js';
 import { getVerifyArgs } from '../../functions/getVerifyArgs/getVerifyArgs.js';
 import { createUserProfile } from '../../functions/createUserProfile/createUserProfile.js';
-import { isSupportedNetwork } from '../../functions/isSupportedNetwork/isSupportedNetwork.js';
 import '@dynamic-labs/sdk-api';
-import { isProgrammableNetworkSwitchSupported } from '../../functions/isProgrammableNetworkSwitchSupported/isProgrammableNetworkSwitchSupported.js';
 import { useInternalDynamicContext } from '../../../context/DynamicContext/useInternalDynamicContext.js';
 import { useErrorContext } from '../../../context/ErrorContext/ErrorContext.js';
 import { getSiweStatement } from '../../functions/getSiweStatement/getSiweStatement.js';
@@ -34,7 +32,7 @@ const useVerifyWallet = ({ consumeNonce, displayTermsOfService, environmentId, p
     const { setDeniedAddress, setDeniedOauthProvider } = useAccessDeniedContext();
     const { setView, goToInitialView } = useViewContext();
     const { setErrorMessage, setError } = useErrorContext();
-    const { setUser, multiWalletWidgetState, debugError, multiWallet: multiWalletEnabled, appName, primaryWalletId, setCallback, setShowAuthFlow, setPrimaryWalletId, siweStatement, connectedWallet, authMode, setOnboardingOnlyJwt, authToken, } = useInternalDynamicContext();
+    const { setUser, multiWalletWidgetState, debugError, multiWallet: multiWalletEnabled, appName, primaryWalletId, setCallback, setShowAuthFlow, setPrimaryWalletId, siweStatement, connectedWallet, authMode, setOnboardingOnlyJwt, authToken, setAuthMode, removeConnectedWalletsInfo, setIsVerificationInProgress, } = useInternalDynamicContext();
     // If the user is not already logged it means that we only need to verify
     // We need this boolean for the part of the logic where we already persisted a new authToken,
     // and need to distinguish between logic for verify or linking.
@@ -87,6 +85,9 @@ const useVerifyWallet = ({ consumeNonce, displayTermsOfService, environmentId, p
         }
     };
     const handleError = (e, walletConnector, address, oauth) => {
+        removeConnectedWalletsInfo();
+        // Ensure auth verification flag is taken down
+        setIsVerificationInProgress(false);
         // This is a special case where the user is trying to link a wallet
         // and the wallet is already linked and we don't want to kill the session.
         if (e instanceof WalletUsedError) {
@@ -100,9 +101,15 @@ const useVerifyWallet = ({ consumeNonce, displayTermsOfService, environmentId, p
         }
         walletConnector.endSession();
         if (e instanceof ChainalysisError) {
+            setDeniedAddress(address);
             setView('chainalysis-blocked-wallet');
             return;
         }
+        if (e instanceof GateBlockedError) {
+            setDeniedAddress(address);
+            setView('gate-blocked-wallet');
+            return;
+        }
         if (e instanceof NoAccessError) {
             setDeniedAddress(address);
             // we need to set this value if it's magic in order to set proper icon
@@ -126,11 +133,6 @@ const useVerifyWallet = ({ consumeNonce, displayTermsOfService, environmentId, p
     };
     return ({ walletConnector, fetchPublicAddressOpts, publicWalletAddress, captchaToken, oauth, }) => __awaiter(void 0, void 0, void 0, function* () {
         const walletProvider = getWalletProvider(walletConnector);
-        const network = yield walletConnector.getNetwork();
-        const _isSupportedNetwork = isSupportedNetwork({
-            network,
-            walletConnector,
-        });
         try {
             const Jwt = yield generateJWT(walletConnector, walletProvider, fetchPublicAddressOpts, publicWalletAddress, captchaToken, oauth);
             const decodedJwt = decodeJwt(Jwt);
@@ -140,17 +142,8 @@ const useVerifyWallet = ({ consumeNonce, displayTermsOfService, environmentId, p
             const isKycRequired = decodedJwt.missingFields.length;
             setOnboardingOnlyJwt(Jwt);
             LocalStorage.setToLS(LAST_USED_WALLET, walletConnector.name);
+            setAuthMode('connect-and-sign');
             updatePrimaryWalletId(walletConnector, user);
-            // Routes user to "Not Supported Network" screen if the user is not on the supported network
-            if (projectSettings &&
-                verifyOnly &&
-                !_isSupportedNetwork &&
-                !isKycRequired) {
-                if (isProgrammableNetworkSwitchSupported(walletConnector)) {
-                    return setView('network-not-supported');
-                }
-                return setView('network-not-supported-manual');
-            }
             // TODO: how can projectSettings be undefined?
             if (verifyOnly && projectSettings && isKycRequired) {
                 setShowAuthFlow(true);

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

@@ -21,7 +21,7 @@ var useWalletsConnectionState = require('../useWalletsConnectionState/useWallets
 var createLinkedWalletsFromWalletOptions = require('./utils/createLinkedWalletsFromWalletOptions/createLinkedWalletsFromWalletOptions.cjs');
 var reconnectSocialWallet = require('./reconnectSocialWallet.cjs');
 
-const useWalletConnectors = ({ authMode, authToken, connectedWallets, wallets: availableWallets, multiWalletWidgetState, setDesktopUri, setMultiWalletWidgetState, setQrcodeUri, primaryWalletId, setPrimaryWalletId, }) => {
+const useWalletConnectors = ({ authMode, authToken, connectedWallets, wallets: availableWallets, multiWalletWidgetState, setDesktopUri, setMultiWalletWidgetState, setQrcodeUri, primaryWalletId, setPrimaryWalletId, user, onboardingOnlyJwt, }) => {
     const [showQrcodeModal, setShowQrcodeModal] = React.useState(false);
     const linkedWallets = React.useMemo(() => {
         if (!authToken) {
@@ -33,7 +33,17 @@ const useWalletConnectors = ({ authMode, authToken, connectedWallets, wallets: a
             walletOptions: availableWallets,
         });
     }, [authToken, primaryWalletId, availableWallets]);
-    const walletsBasedOnAuthMode = React.useMemo(() => (authMode === 'connect-only' ? connectedWallets : linkedWallets), [authMode, connectedWallets, linkedWallets]);
+    const walletsBasedOnAuthMode = React.useMemo(() => {
+        // Before signing the first message we are using connected wallets list
+        // This is because we want the first connected wallet to have events applied by useWalletEventListeners
+        // In connect-and-sign mode, events are only applied after the message is signed.
+        // This change ensures that events will be applied even before the signature.
+        // After signing the message user could be undefined in scenarios like OTP
+        if (authMode === 'connect-and-sign' && (user || onboardingOnlyJwt)) {
+            return linkedWallets;
+        }
+        return connectedWallets;
+    }, [authMode, connectedWallets, linkedWallets, user, onboardingOnlyJwt]);
     const { connectedWalletMap, computeConnectedStateForWallets, didConnectedStateLoad, } = useWalletsConnectionState.useWalletsConnectionState(walletsBasedOnAuthMode);
     const wallets = React.useMemo(() => walletsBasedOnAuthMode.map((wallet) => (Object.assign(Object.assign({}, wallet), { connected: Boolean(connectedWalletMap[wallet.id]) }))), [connectedWalletMap, walletsBasedOnAuthMode]);
     React.useEffect(() => {

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

@@ -1,5 +1,5 @@
 import { Dispatch, SetStateAction } from 'react';
-import { WalletOption, Wallet, MultiWalletWidgetState, AuthModeType } from '../../../shared';
+import { WalletOption, Wallet, MultiWalletWidgetState, AuthModeType, UserProfile } from '../../../shared';
 import { MultiWalletWidgetStateSetter } from '../multiWallet';
 import { WalletConnector } from '../../../..';
 type Props = {
@@ -13,6 +13,8 @@ type Props = {
     wallets: WalletOption[];
     setPrimaryWalletId: (walletId: string) => void;
     primaryWalletId: string | undefined;
+    user?: UserProfile;
+    onboardingOnlyJwt?: string;
 };
 export interface UseWalletConnectors {
     computeConnectedStateForWallets: () => Promise<void>;
@@ -27,5 +29,5 @@ export interface UseWalletConnectors {
     walletConnectors: WalletConnector[];
     wallets: Wallet[];
 }
-export declare const useWalletConnectors: ({ authMode, authToken, connectedWallets, wallets: availableWallets, multiWalletWidgetState, setDesktopUri, setMultiWalletWidgetState, setQrcodeUri, primaryWalletId, setPrimaryWalletId, }: Props) => UseWalletConnectors;
+export declare const useWalletConnectors: ({ authMode, authToken, connectedWallets, wallets: availableWallets, multiWalletWidgetState, setDesktopUri, setMultiWalletWidgetState, setQrcodeUri, primaryWalletId, setPrimaryWalletId, user, onboardingOnlyJwt, }: Props) => UseWalletConnectors;
 export {};

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

@@ -17,7 +17,7 @@ import { useWalletsConnectionState } from '../useWalletsConnectionState/useWalle
 import { createLinkedWalletsFromWalletOptions } from './utils/createLinkedWalletsFromWalletOptions/createLinkedWalletsFromWalletOptions.js';
 import { reconnectSocialWallet } from './reconnectSocialWallet.js';
 
-const useWalletConnectors = ({ authMode, authToken, connectedWallets, wallets: availableWallets, multiWalletWidgetState, setDesktopUri, setMultiWalletWidgetState, setQrcodeUri, primaryWalletId, setPrimaryWalletId, }) => {
+const useWalletConnectors = ({ authMode, authToken, connectedWallets, wallets: availableWallets, multiWalletWidgetState, setDesktopUri, setMultiWalletWidgetState, setQrcodeUri, primaryWalletId, setPrimaryWalletId, user, onboardingOnlyJwt, }) => {
     const [showQrcodeModal, setShowQrcodeModal] = useState(false);
     const linkedWallets = useMemo(() => {
         if (!authToken) {
@@ -29,7 +29,17 @@ const useWalletConnectors = ({ authMode, authToken, connectedWallets, wallets: a
             walletOptions: availableWallets,
         });
     }, [authToken, primaryWalletId, availableWallets]);
-    const walletsBasedOnAuthMode = useMemo(() => (authMode === 'connect-only' ? connectedWallets : linkedWallets), [authMode, connectedWallets, linkedWallets]);
+    const walletsBasedOnAuthMode = useMemo(() => {
+        // Before signing the first message we are using connected wallets list
+        // This is because we want the first connected wallet to have events applied by useWalletEventListeners
+        // In connect-and-sign mode, events are only applied after the message is signed.
+        // This change ensures that events will be applied even before the signature.
+        // After signing the message user could be undefined in scenarios like OTP
+        if (authMode === 'connect-and-sign' && (user || onboardingOnlyJwt)) {
+            return linkedWallets;
+        }
+        return connectedWallets;
+    }, [authMode, connectedWallets, linkedWallets, user, onboardingOnlyJwt]);
     const { connectedWalletMap, computeConnectedStateForWallets, didConnectedStateLoad, } = useWalletsConnectionState(walletsBasedOnAuthMode);
     const wallets = useMemo(() => walletsBasedOnAuthMode.map((wallet) => (Object.assign(Object.assign({}, wallet), { connected: Boolean(connectedWalletMap[wallet.id]) }))), [connectedWalletMap, walletsBasedOnAuthMode]);
     useEffect(() => {

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

@@ -18,7 +18,7 @@ require('ethers');
 require('../../../shared/consts/index.cjs');
 
 const orderedSecondaryWalletAddresses = (wallets) => wallets.map((wallet) => wallet.address).sort();
-const useWalletEventListeners = ({ computeConnectedStateForWallets, handleLogOut, multiWallet, multiWalletWidgetState, primaryWallet, secondaryWallets, selectedWalletConnector, selectedWalletWithAction, setSelectedWalletConnector, setSelectedWalletWithAction, setMultiWalletWidgetState, user, setPrimaryWalletId, connectWalletByAddressAndChain, }) => {
+const useWalletEventListeners = ({ computeConnectedStateForWallets, handleLogOut, multiWallet, multiWalletWidgetState, primaryWallet, secondaryWallets, selectedWalletConnector, selectedWalletWithAction, setSelectedWalletConnector, setSelectedWalletWithAction, setMultiWalletWidgetState, user, setPrimaryWalletId, authMode, refreshConnectedWallet, }) => {
     const [loadingNetwork, setLoadingNetwork] = React.useState(true);
     const [network, setNetwork] = React.useState(undefined);
     React.useEffect(() => {
@@ -62,6 +62,7 @@ const useWalletEventListeners = ({ computeConnectedStateForWallets, handleLogOut
         // eslint-disable-next-line react-hooks/exhaustive-deps
         orderedSecondaryWalletAddresses(secondaryWallets).join(),
         selectedWalletConnector === null || selectedWalletConnector === void 0 ? void 0 : selectedWalletConnector.name,
+        primaryWallet === null || primaryWallet === void 0 ? void 0 : primaryWallet.connector.isInitialized,
     ]);
     const handleAccountChangeWhenAwaitingAccountSwitch = React.useCallback((isPrimaryWallet, newAddress) => {
         const linkedSecondaryWallet = secondaryWallets.find((wallet) => walletConnectorCore.isSameAddress(wallet.address, newAddress, wallet.chain));
@@ -94,6 +95,10 @@ const useWalletEventListeners = ({ computeConnectedStateForWallets, handleLogOut
             onAccountChange: (accounts) => _tslib.__awaiter(void 0, void 0, void 0, function* () {
                 const [newAddress] = accounts;
                 const newWallet = secondaryWallets.find((wallet) => walletConnectorCore.isSameAddress(wallet.address, newAddress, wallet.chain));
+                if (authMode === 'connect-only') {
+                    refreshConnectedWallet(primaryWallet.id, primaryWallet.connector);
+                    return;
+                }
                 if (walletConnectorCore.isSameAddress(newAddress, primaryWallet.address, primaryWallet.chain)) {
                     setMultiWalletWidgetState('idle');
                 }
@@ -114,7 +119,6 @@ const useWalletEventListeners = ({ computeConnectedStateForWallets, handleLogOut
                         yield computeConnectedStateForWallets();
                         return;
                     }
-                    connectWalletByAddressAndChain(primaryWallet.connector.name, newAddress, primaryWallet.chain);
                 }
                 else {
                     logger.logger.error(`Unexpected multiWalletWidgetState (${multiWalletWidgetState}) and onAccountChange combination. Resetting state to idle.`);
@@ -123,32 +127,54 @@ const useWalletEventListeners = ({ computeConnectedStateForWallets, handleLogOut
                 yield computeConnectedStateForWallets();
             }),
             onChainChange: (chain) => _tslib.__awaiter(void 0, void 0, void 0, function* () {
-                setNetwork(parseInt(chain));
+                if (!primaryWallet) {
+                    return;
+                }
+                refreshConnectedWallet(primaryWallet.id, primaryWallet.connector);
+                // https://linear.app/dynamic-labs/issue/QNTM-84/breaking-change-rename-network-to-primarywalletnetwork
+                if (primaryWallet.chain === 'starknet') {
+                    setNetwork(chain);
+                }
+                else {
+                    setNetwork(parseInt(chain));
+                }
             }),
             onDisconnect: handleLogOut,
         });
     }, [
+        authMode,
         primaryWallet,
         setMultiWalletWidgetState,
         multiWallet,
         user,
         computeConnectedStateForWallets,
         handleLogOut,
-        connectWalletByAddressAndChain,
         multiWalletWidgetState,
         secondaryWallets,
         setSelectedWalletConnector,
         handleAccountChangeWhenAwaitingAccountSwitch,
         setPrimaryWalletId,
+        refreshConnectedWallet,
     ]);
     const addSecondaryWalletEventListeners = React.useCallback((seen) => {
         const secondaryListeners = {
             onAccountChange: () => _tslib.__awaiter(void 0, void 0, void 0, function* () {
+                if (authMode === 'connect-only' && secondaryWallets.length) {
+                    refreshConnectedWallet(secondaryWallets[0].id, secondaryWallets[0].connector);
+                    return;
+                }
                 if (multiWalletWidgetState === 'awaiting_account_switch') {
                     handleAccountChangeWhenAwaitingAccountSwitch(false, (selectedWalletWithAction === null || selectedWalletWithAction === void 0 ? void 0 : selectedWalletWithAction.wallet.address) || '');
                 }
                 yield computeConnectedStateForWallets();
             }),
+            onChainChange: () => _tslib.__awaiter(void 0, void 0, void 0, function* () {
+                // We should pass the proper walletId here
+                if (!secondaryWallets.length) {
+                    return;
+                }
+                refreshConnectedWallet(secondaryWallets[0].id, secondaryWallets[0].connector);
+            }),
             onDisconnect: () => _tslib.__awaiter(void 0, void 0, void 0, function* () {
                 yield computeConnectedStateForWallets();
             }),
@@ -165,12 +191,14 @@ const useWalletEventListeners = ({ computeConnectedStateForWallets, handleLogOut
             wallet.connector.setupEventListeners(secondaryListeners);
         }
     }, [
+        authMode,
         computeConnectedStateForWallets,
         selectedWalletConnector,
         selectedWalletWithAction,
         handleAccountChangeWhenAwaitingAccountSwitch,
         multiWalletWidgetState,
         secondaryWallets,
+        refreshConnectedWallet,
     ]);
     return {
         loadingNetwork,

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

@@ -1,10 +1,9 @@
 /// <reference types="react" />
-import type { Chain, WalletConnector } from '@dynamic-labs/wallet-connector-core';
-import { MultiWalletWidgetState, UserProfile, Wallet, WalletWithAction } from '../../../shared';
+import type { WalletConnector } from '@dynamic-labs/wallet-connector-core';
+import { AuthModeType, MultiWalletWidgetState, UserProfile, Wallet, WalletWithAction } from '../../../shared';
 import { MultiWalletWidgetStateSetter } from '../multiWallet';
 export type UseWalletEventListenersArgs = {
     computeConnectedStateForWallets(): Promise<void>;
-    connectWalletByAddressAndChain: (name: string, address: string, chain: Chain) => Promise<void>;
     handleLogOut(): Promise<void>;
     multiWallet: boolean;
     multiWalletWidgetState: MultiWalletWidgetState;
@@ -17,8 +16,10 @@ export type UseWalletEventListenersArgs = {
     setSelectedWalletConnector(connector: WalletConnector | null): void;
     setSelectedWalletWithAction(walletWithAction: WalletWithAction | null): void;
     user: UserProfile | undefined;
+    authMode: AuthModeType;
+    refreshConnectedWallet: (walletId: string, walletConnector: WalletConnector) => Promise<void>;
 };
-export declare const useWalletEventListeners: ({ computeConnectedStateForWallets, handleLogOut, multiWallet, multiWalletWidgetState, primaryWallet, secondaryWallets, selectedWalletConnector, selectedWalletWithAction, setSelectedWalletConnector, setSelectedWalletWithAction, setMultiWalletWidgetState, user, setPrimaryWalletId, connectWalletByAddressAndChain, }: UseWalletEventListenersArgs) => {
+export declare const useWalletEventListeners: ({ computeConnectedStateForWallets, handleLogOut, multiWallet, multiWalletWidgetState, primaryWallet, secondaryWallets, selectedWalletConnector, selectedWalletWithAction, setSelectedWalletConnector, setSelectedWalletWithAction, setMultiWalletWidgetState, user, setPrimaryWalletId, authMode, refreshConnectedWallet, }: UseWalletEventListenersArgs) => {
     loadingNetwork: boolean;
     network: string | number | undefined;
     setNetwork: import("react").Dispatch<import("react").SetStateAction<string | number | undefined>>;