@dynamic-labs/sdk-react-core 0.18.0-RC.16 → 0.18.0-RC.17

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

@@ -1,6 +1,6 @@
 import { __awaiter } from '../../../../../_virtual/_tslib.js';
-import { useCallback, useMemo } from 'react';
-import { getWalletConnectorByName, isSameAddress } from '@dynamic-labs/wallet-connector-core';
+import { useState, useCallback, useEffect, useMemo } from 'react';
+import { getWalletConnectorByName, logger } from '@dynamic-labs/wallet-connector-core';
 import '@dynamic-labs/sdk-api';
 import '../../../shared/logger.js';
 import '@dynamic-labs/iconic';
@@ -21,10 +21,52 @@ import { shouldManuallyReconnectOnRefresh } from '../../functions/shouldManually
 
 const useConnectWallet = ({ authMode, clearPrimaryWalletId, enableVisitTrackingOnConnectOnly, environmentId, primaryWalletId, setPrimaryWalletId, wallets, onUnlink, }) => {
     const [connectedWalletsInfo, setConnectedWalletsInfo, removeConnectedWalletsInfo,] = useLocalStorage(CONNECTED_WALLETS_INFO, []);
+    const [connectedWallets, setConnectedWallets] = useState([]);
+    // The function to update and define the connectedWallets list.
+    // It uses walletConnector to get the current wallet address and network
+    // The address and network in the runtime are updated by the event listeners
+    // The event listeners are updating `connectedWallets` list.
+    // It should be called on the first render and when connectedWalletsInfo updates
+    const updateConnectedWalletsList = useCallback(() => __awaiter(void 0, void 0, void 0, function* () {
+        const walletConnectors = wallets.map((wallet) => wallet.walletConnector);
+        if (!walletConnectors.length) {
+            return;
+        }
+        const nextConnectedWallets = (yield Promise.all(connectedWalletsInfo.map((storedConnectedWalletInfo) => __awaiter(void 0, void 0, void 0, function* () {
+            const walletConnector = getWalletConnectorByName(walletConnectors, storedConnectedWalletInfo.walletConnectorKey);
+            if (!walletConnector) {
+                logger.error('Could not find walletConnector: ' +
+                    storedConnectedWalletInfo.walletConnectorKey);
+                return Promise.resolve(null);
+            }
+            const [walletAddress] = yield walletConnector.getConnectedAccounts();
+            const walletNetwork = yield walletConnector.getNetwork();
+            const walletChain = walletConnector.connectedChain;
+            const walletObject = {
+                address: 
+                // We use `storedConnectedWalletInfo.lastWalletAddress` as a workaround to Braavos issue
+                // Braavos during initialization returns an empty string as a wallet address
+                walletAddress ||
+                    storedConnectedWalletInfo.lastWalletAddress ||
+                    '',
+                chain: walletChain || '',
+                connected: true,
+                connector: walletConnector,
+                id: storedConnectedWalletInfo.id,
+                network: walletNetwork,
+            };
+            return Promise.resolve(walletObject);
+        })))).filter((wallet) => Boolean(wallet));
+        setConnectedWallets(nextConnectedWallets);
+    }), [connectedWalletsInfo, wallets]);
+    // Generate the connectedWallets list when connectedWalletsInfo (localStorage) or memoized wallet connector updates
+    useEffect(() => {
+        updateConnectedWalletsList();
+    }, [updateConnectedWalletsList]);
     const getNextIdAvailable = useCallback((currentWallets) => {
         const existingIds = currentWallets.map(({ id }) => id);
         const sortedIds = existingIds
-            .map((id) => Number(id.replace('connect-only-wallet-', '')))
+            .map((id) => Number(id.replace('connect-wallet-', '')))
             .sort((a, b) => a - b);
         for (let i = 0; i < sortedIds.length; i++) {
             if (sortedIds[i] !== i) {
@@ -33,82 +75,44 @@ const useConnectWallet = ({ authMode, clearPrimaryWalletId, enableVisitTrackingO
         }
         return sortedIds.length;
     }, []);
-    const connectedWallets = useMemo(() => connectedWalletsInfo
-        .map((connectedWallet) => {
-        const walletConnector = getWalletConnectorByName(wallets.map((wallet) => wallet.walletConnector), connectedWallet.name);
-        if (!walletConnector) {
-            return null;
+    const updateConnectedWalletById = useCallback((walletId, walletObject) => {
+        const clonedConnectedWalletsList = [...connectedWallets];
+        const connectedWalletIndex = clonedConnectedWalletsList.findIndex((connectedWallet) => connectedWallet.id === walletId);
+        if (connectedWalletIndex > -1) {
+            clonedConnectedWalletsList[connectedWalletIndex] = Object.assign(Object.assign({}, clonedConnectedWalletsList[connectedWalletIndex]), walletObject);
+            setConnectedWallets(clonedConnectedWalletsList);
         }
-        const connectedWalletInfo = {
-            address: connectedWallet.walletPublicKey,
-            chain: connectedWallet.chain,
-            connected: true,
-            connector: walletConnector,
-            id: connectedWallet.id,
-            network: connectedWallet.network,
-        };
-        return connectedWalletInfo;
-    })
-        .filter((wc) => wc !== null), [connectedWalletsInfo, wallets]);
-    const updateConnectedWalletById = useCallback((walletId, connectedWalletConnectorObject) => {
-        setConnectedWalletsInfo((currentWallets) => currentWallets.map((currentWallet) => {
-            if (currentWallet.id === walletId) {
-                return Object.assign(Object.assign({}, currentWallet), connectedWalletConnectorObject);
-            }
-            return currentWallet;
-        }));
-    }, [setConnectedWalletsInfo]);
+    }, [connectedWallets]);
     const connectedWallet = connectedWallets[0] || null;
-    const setConnectedStates = useCallback((walletConnector, address, chain, walletConnectorNetwork) => {
-        setConnectedWalletsInfo((currentWallets) => {
-            const existingWalletIndex = currentWallets.findIndex((currentWallet) => currentWallet.name === walletConnector.name);
-            const exists = currentWallets.some((currentWallet) => currentWallet.walletPublicKey === address);
-            // this is done, to make sure we're not adding two wallets with the same address to the array
-            if (exists) {
-                return currentWallets;
-            }
-            // when calling this function with a new wallet that has the same wallet connector as
-            // an existing one in the array, we intend to replace the existing wallet with the new one.
-            if (existingWalletIndex !== -1) {
-                const updatedWallets = [...currentWallets];
-                updatedWallets[existingWalletIndex] = Object.assign(Object.assign({}, updatedWallets[existingWalletIndex]), { chain, provider: getWalletProvider(walletConnector), walletPublicKey: address });
-                return updatedWallets;
-            }
-            // otherwise, add new wallet to connectedWalletsInfo array
-            return [
-                ...currentWallets,
-                {
-                    chain,
-                    id: `connect-only-wallet-${getNextIdAvailable(currentWallets)}`,
-                    name: walletConnector.name,
-                    network: walletConnectorNetwork,
-                    provider: getWalletProvider(walletConnector),
-                    walletPublicKey: address,
-                },
-            ];
+    // Keeps connected wallet data inside localStorage
+    const applyConnectedWalletToStore = ({ walletId, walletAddress, walletConnectorKey, walletChain, provider, }) => {
+        const nextConnectedWalletsInfo = [...connectedWalletsInfo];
+        nextConnectedWalletsInfo.push({
+            id: walletId,
+            lastWalletAddress: walletAddress,
+            provider,
+            walletChain,
+            walletConnectorKey,
         });
-    }, [getNextIdAvailable, setConnectedWalletsInfo]);
-    const connectWalletByAddressAndChain = useCallback((name, address, chain) => __awaiter(void 0, void 0, void 0, function* () {
-        const walletConnector = getWalletConnectorByName(wallets.map((wallet) => wallet.walletConnector), name);
-        if (walletConnector) {
-            if (shouldManuallyReconnectOnRefresh(walletConnector)) {
-                yield walletConnector.connect();
-            }
-            const connectedAccounts = yield walletConnector.getConnectedAccounts();
-            const result = connectedAccounts.filter((account) => isSameAddress(account, address, chain));
-            const walletNetwork = yield walletConnector.getNetwork();
-            if (result.length > 0) {
-                walletConnector.connect();
-                setConnectedStates(walletConnector, address, chain, walletNetwork);
-            }
-            else {
-                removeConnectedWalletsInfo();
-            }
+        setConnectedWalletsInfo(nextConnectedWalletsInfo);
+        return Promise.resolve();
+    };
+    // Updates connected wallet (network and address) and verifies connected wallet connection
+    const refreshConnectedWallet = (walletId, walletConnector) => __awaiter(void 0, void 0, void 0, function* () {
+        if (shouldManuallyReconnectOnRefresh(walletConnector)) {
+            yield walletConnector.connect();
         }
-        else {
-            removeConnectedWalletsInfo();
+        const currentWalletConnectorAddress = yield walletConnector.fetchPublicAddress();
+        if (!currentWalletConnectorAddress) {
+            logger.error('Could not refresh the wallet. The wallet address is not available');
+            return;
         }
-    }), [removeConnectedWalletsInfo, setConnectedStates, wallets]);
+        const currentWalletConnectoNetwork = yield walletConnector.getNetwork();
+        updateConnectedWalletById(walletId, {
+            address: currentWalletConnectorAddress,
+            network: currentWalletConnectoNetwork,
+        });
+    });
     const shouldSkipCreatingVisit = useMemo(() => (authMode === 'connect-only' && !enableVisitTrackingOnConnectOnly) ||
         connectedWallet, [authMode, connectedWallet, enableVisitTrackingOnConnectOnly]);
     const connectWallet = (walletConnector, fetchPublicAddressOpts) => __awaiter(void 0, void 0, void 0, function* () {
@@ -118,29 +122,39 @@ const useConnectWallet = ({ authMode, clearPrimaryWalletId, enableVisitTrackingO
             error.code = 'missing-public-address';
             throw error;
         }
-        const chain = walletConnector.connectedChain || '';
-        const walletConnectorNetwork = yield walletConnector.getNetwork();
-        // when we connect first wallet, it should be set as a primary wallet
-        const shouldSetPrimaryWalletId = authMode === 'connect-only' && !primaryWalletId;
-        if (shouldSetPrimaryWalletId) {
-            setPrimaryWalletId(`connect-only-wallet-${getNextIdAvailable(connectedWalletsInfo)}`);
+        const walletId = `connect-wallet-${getNextIdAvailable(connectedWalletsInfo)}`;
+        if (!primaryWalletId) {
+            setPrimaryWalletId(walletId);
+        }
+        const walletChain = walletConnector.connectedChain;
+        const isWalletStored = connectedWalletsInfo.some(({ walletConnectorKey: storedWalletConnectorKey }) => storedWalletConnectorKey === walletConnector.name);
+        if (isWalletStored) {
+            yield updateConnectedWalletsList();
+        }
+        else {
+            applyConnectedWalletToStore({
+                provider: getWalletProvider(walletConnector),
+                walletAddress: publicWalletAddress,
+                walletChain,
+                walletConnectorKey: walletConnector.name,
+                walletId,
+            });
         }
-        setConnectedStates(walletConnector, publicWalletAddress, chain, walletConnectorNetwork);
         if (shouldSkipCreatingVisit) {
-            return publicWalletAddress;
+            return Promise.resolve(publicWalletAddress);
         }
         // send information to backend to kick off background jobs
         // so verify/sign on the next step could go by more quickly
         // this is async work, but DO NOT AWAIT
         createVisit({
             authMode,
-            chain,
+            chain: walletChain || '',
             environmentId,
             publicWalletAddress,
             walletName: walletConnector.name,
             walletProvider: getWalletProvider(walletConnector),
         });
-        return publicWalletAddress;
+        return Promise.resolve(publicWalletAddress);
     });
     const unlinkConnectedWallet = (walletId) => {
         const filteredWallets = connectedWalletsInfo.filter((wallet) => wallet.id !== walletId);
@@ -153,14 +167,13 @@ const useConnectWallet = ({ authMode, clearPrimaryWalletId, enableVisitTrackingO
     const getConnectedWalletById = useCallback((walletId) => connectedWallets.find((wallet) => wallet.id === walletId), [connectedWallets]);
     return {
         connectWallet,
-        connectWalletByAddressAndChain,
         connectedWallet,
         connectedWallets,
         connectedWalletsInfo,
         getConnectedWalletById,
+        refreshConnectedWallet,
         removeConnectedWalletsInfo,
         unlinkConnectedWallet,
-        updateConnectedWalletById,
     };
 };
 

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

@@ -17,13 +17,17 @@ require('../../../shared/utils/classes/storage/localStorage.cjs');
 require('ethers');
 require('../../../shared/consts/index.cjs');
 var ErrorContext = require('../../../context/ErrorContext/ErrorContext.cjs');
+var useInternalDynamicContext = require('../../../context/DynamicContext/useInternalDynamicContext.cjs');
 
 const useConnectWithEmail = ({ emailWalletConnector, handleConnect, }) => {
     const { error } = ErrorContext.useErrorContext();
     const [loading, setLoading] = React.useState(false);
+    const { ongoingVerifications } = useInternalDynamicContext.useInternalDynamicContext();
     const connectWithEmail = (email) => _tslib.__awaiter(void 0, void 0, void 0, function* () {
         if (!email || !emailWalletConnector || loading)
             return;
+        // Indicate auth verification process start
+        ongoingVerifications.setAuthVerification(true);
         setLoading(true);
         emailWalletConnector.setEmail(email);
         try {
@@ -31,6 +35,7 @@ const useConnectWithEmail = ({ emailWalletConnector, handleConnect, }) => {
         }
         catch (e) {
             logger.logger.error(e);
+            ongoingVerifications.setAuthVerification(false);
             setLoading(false);
         }
     });

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

@@ -13,13 +13,17 @@ import '../../../shared/utils/classes/storage/localStorage.js';
 import 'ethers';
 import '../../../shared/consts/index.js';
 import { useErrorContext } from '../../../context/ErrorContext/ErrorContext.js';
+import { useInternalDynamicContext } from '../../../context/DynamicContext/useInternalDynamicContext.js';
 
 const useConnectWithEmail = ({ emailWalletConnector, handleConnect, }) => {
     const { error } = useErrorContext();
     const [loading, setLoading] = useState(false);
+    const { ongoingVerifications } = useInternalDynamicContext();
     const connectWithEmail = (email) => __awaiter(void 0, void 0, void 0, function* () {
         if (!email || !emailWalletConnector || loading)
             return;
+        // Indicate auth verification process start
+        ongoingVerifications.setAuthVerification(true);
         setLoading(true);
         emailWalletConnector.setEmail(email);
         try {
@@ -27,6 +31,7 @@ const useConnectWithEmail = ({ emailWalletConnector, handleConnect, }) => {
         }
         catch (e) {
             logger.error(e);
+            ongoingVerifications.setAuthVerification(false);
             setLoading(false);
         }
     });

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

@@ -0,0 +1,69 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var React = require('react');
+var useInternalDynamicContext = require('../../../context/DynamicContext/useInternalDynamicContext.cjs');
+var ViewContext = require('../../../context/ViewContext/ViewContext.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('@dynamic-labs/wallet-book');
+require('@dynamic-labs/utils');
+require('../../constants/colors.cjs');
+require('../../../shared/utils/classes/storage/localStorage.cjs');
+require('ethers');
+require('../../../shared/consts/index.cjs');
+require('@dynamic-labs/multi-wallet');
+var isSupportedNetwork = require('../../functions/isSupportedNetwork/isSupportedNetwork.cjs');
+var isProgrammableNetworkSwitchSupported = require('../../functions/isProgrammableNetworkSwitchSupported/isProgrammableNetworkSwitchSupported.cjs');
+
+const useConnectedWalletsNetworkValidation = () => {
+    const { connectedWallets, selectedWalletConnector, setSelectedWalletConnector, setShowAuthFlow, showAuthFlow, walletsToConnectByChain, isBridgeFlow, } = useInternalDynamicContext.useInternalDynamicContext();
+    const { view, setView } = ViewContext.useViewContext();
+    React.useEffect(() => {
+        if (!isBridgeFlow) {
+            return;
+        }
+        const connectedWalletsWithInvalidNetwork = connectedWallets.filter((connectedWallet) => {
+            const isChainInWalletsToConnect = walletsToConnectByChain === null || walletsToConnectByChain === void 0 ? void 0 : walletsToConnectByChain.some((walletToConnectByChain) => walletToConnectByChain.chain === connectedWallet.chain);
+            const isSupported = isSupportedNetwork.isSupportedNetwork({
+                network: connectedWallet.network,
+                walletConnector: connectedWallet.connector,
+            });
+            return !isChainInWalletsToConnect && !isSupported;
+        });
+        if (connectedWalletsWithInvalidNetwork.length) {
+            // If we found wallets that require a change of network
+            // then, one by one, in the first one we require a change of network.
+            const [connectedWalletWithInvalidNetwork] = connectedWalletsWithInvalidNetwork;
+            // Keeps the first wallet connectedWallet in setSelectedWalletConnector
+            // This is required because NetworkNotSupported uses walletConnector to display wallet icon, address etc.
+            if (connectedWalletWithInvalidNetwork.connector.name !==
+                (selectedWalletConnector === null || selectedWalletConnector === void 0 ? void 0 : selectedWalletConnector.name)) {
+                setSelectedWalletConnector(connectedWalletWithInvalidNetwork.connector);
+            }
+            const networkNotSupportedView = isProgrammableNetworkSwitchSupported.isProgrammableNetworkSwitchSupported(connectedWalletWithInvalidNetwork.connector)
+                ? 'network-not-supported'
+                : 'network-not-supported-manual';
+            if (!showAuthFlow) {
+                setShowAuthFlow(true);
+            }
+            setView(networkNotSupportedView);
+        }
+    }, [
+        isBridgeFlow,
+        connectedWallets,
+        view,
+        selectedWalletConnector,
+        walletsToConnectByChain,
+        showAuthFlow,
+        setView,
+        setSelectedWalletConnector,
+        setShowAuthFlow,
+    ]);
+};
+
+exports.useConnectedWalletsNetworkValidation = useConnectedWalletsNetworkValidation;

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

@@ -0,0 +1 @@
+export declare const useConnectedWalletsNetworkValidation: () => void;

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

@@ -0,0 +1,65 @@
+import { useEffect } from 'react';
+import { useInternalDynamicContext } from '../../../context/DynamicContext/useInternalDynamicContext.js';
+import { useViewContext } from '../../../context/ViewContext/ViewContext.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 '@dynamic-labs/wallet-book';
+import '@dynamic-labs/utils';
+import '../../constants/colors.js';
+import '../../../shared/utils/classes/storage/localStorage.js';
+import 'ethers';
+import '../../../shared/consts/index.js';
+import '@dynamic-labs/multi-wallet';
+import { isSupportedNetwork } from '../../functions/isSupportedNetwork/isSupportedNetwork.js';
+import { isProgrammableNetworkSwitchSupported } from '../../functions/isProgrammableNetworkSwitchSupported/isProgrammableNetworkSwitchSupported.js';
+
+const useConnectedWalletsNetworkValidation = () => {
+    const { connectedWallets, selectedWalletConnector, setSelectedWalletConnector, setShowAuthFlow, showAuthFlow, walletsToConnectByChain, isBridgeFlow, } = useInternalDynamicContext();
+    const { view, setView } = useViewContext();
+    useEffect(() => {
+        if (!isBridgeFlow) {
+            return;
+        }
+        const connectedWalletsWithInvalidNetwork = connectedWallets.filter((connectedWallet) => {
+            const isChainInWalletsToConnect = walletsToConnectByChain === null || walletsToConnectByChain === void 0 ? void 0 : walletsToConnectByChain.some((walletToConnectByChain) => walletToConnectByChain.chain === connectedWallet.chain);
+            const isSupported = isSupportedNetwork({
+                network: connectedWallet.network,
+                walletConnector: connectedWallet.connector,
+            });
+            return !isChainInWalletsToConnect && !isSupported;
+        });
+        if (connectedWalletsWithInvalidNetwork.length) {
+            // If we found wallets that require a change of network
+            // then, one by one, in the first one we require a change of network.
+            const [connectedWalletWithInvalidNetwork] = connectedWalletsWithInvalidNetwork;
+            // Keeps the first wallet connectedWallet in setSelectedWalletConnector
+            // This is required because NetworkNotSupported uses walletConnector to display wallet icon, address etc.
+            if (connectedWalletWithInvalidNetwork.connector.name !==
+                (selectedWalletConnector === null || selectedWalletConnector === void 0 ? void 0 : selectedWalletConnector.name)) {
+                setSelectedWalletConnector(connectedWalletWithInvalidNetwork.connector);
+            }
+            const networkNotSupportedView = isProgrammableNetworkSwitchSupported(connectedWalletWithInvalidNetwork.connector)
+                ? 'network-not-supported'
+                : 'network-not-supported-manual';
+            if (!showAuthFlow) {
+                setShowAuthFlow(true);
+            }
+            setView(networkNotSupportedView);
+        }
+    }, [
+        isBridgeFlow,
+        connectedWallets,
+        view,
+        selectedWalletConnector,
+        walletsToConnectByChain,
+        showAuthFlow,
+        setView,
+        setSelectedWalletConnector,
+        setShowAuthFlow,
+    ]);
+};
+
+export { useConnectedWalletsNetworkValidation };

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

@@ -22,7 +22,7 @@ var validators = require('../../../context/DynamicContext/validators.cjs');
 require('@dynamic-labs/multi-wallet');
 var index = require('../../functions/getEnabledProviders/index.cjs');
 
-const useFetchProjectSettings = ({ authToken, environmentId, maxRetries = 2, }) => {
+const useFetchProjectSettings = ({ authToken, environmentId, maxRetries = 2, dynamicContextProps, }) => {
     const [lsSettings, setLsSettings, removeLsSettings] = useLocalStorage.useLocalStorage(localStorage.PROJECT_SETTINGS_STORAGE_KEY, undefined, validators.validateLocalStorageExpiry);
     const [isLoading, setLoading] = React.useState(false);
     const [retries, setRetries] = React.useState(0);
@@ -44,6 +44,7 @@ const useFetchProjectSettings = ({ authToken, environmentId, maxRetries = 2, })
             environmentId &&
             retries < maxRetries) {
             setLoading(true);
+            api.sendDynamicProps(environmentId, dynamicContextProps);
             api.fetchProjectSettings(environmentId)
                 .then((response) => {
                 if (!response)

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

@@ -1,9 +1,11 @@
+import { DynamicContextProps } from '../../../context/DynamicContext';
 export type fetchProjectSettingsProps = {
     authToken: string | undefined;
     environmentId: string;
     maxRetries?: number;
+    dynamicContextProps: Pick<DynamicContextProps, 'settings'>;
 };
-export declare const useFetchProjectSettings: ({ authToken, environmentId, maxRetries, }: fetchProjectSettingsProps) => {
+export declare const useFetchProjectSettings: ({ authToken, environmentId, maxRetries, dynamicContextProps, }: fetchProjectSettingsProps) => {
     isLoading: boolean;
     projectSettings: import("@dynamic-labs/sdk-api").ProjectSettings | undefined;
     removeLsSettings: () => void;

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

@@ -1,6 +1,6 @@
 import { useState, useEffect, useMemo } from 'react';
 import { DynamicError } from '@dynamic-labs/utils';
-import { fetchProjectSettings } from '../../../data/api.js';
+import { sendDynamicProps, fetchProjectSettings } from '../../../data/api.js';
 import '@dynamic-labs/sdk-api';
 import '../../../shared/logger.js';
 import '@dynamic-labs/iconic';
@@ -18,7 +18,7 @@ import { validateLocalStorageExpiry } from '../../../context/DynamicContext/vali
 import '@dynamic-labs/multi-wallet';
 import { getEnabledProviders } from '../../functions/getEnabledProviders/index.js';
 
-const useFetchProjectSettings = ({ authToken, environmentId, maxRetries = 2, }) => {
+const useFetchProjectSettings = ({ authToken, environmentId, maxRetries = 2, dynamicContextProps, }) => {
     const [lsSettings, setLsSettings, removeLsSettings] = useLocalStorage(PROJECT_SETTINGS_STORAGE_KEY, undefined, validateLocalStorageExpiry);
     const [isLoading, setLoading] = useState(false);
     const [retries, setRetries] = useState(0);
@@ -40,6 +40,7 @@ const useFetchProjectSettings = ({ authToken, environmentId, maxRetries = 2, })
             environmentId &&
             retries < maxRetries) {
             setLoading(true);
+            sendDynamicProps(environmentId, dynamicContextProps);
             fetchProjectSettings(environmentId)
                 .then((response) => {
                 if (!response)

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

@@ -14,6 +14,11 @@ const useHandleWalletsToConnect = () => {
             setShowAuthFlow(false);
             return;
         }
+        // Avoid showing wallet-list when wallet updates network to the correct one in run time (bridge mode)
+        if (walletsToConnectByChain.length === 0) {
+            setShowAuthFlow(false);
+            return goToInitialView();
+        }
         const [firstWallet, ...restOfTheWallets] = walletsToConnectByChain;
         if (firstWallet.numberOfWallets > 1) {
             const updatedWallets = [

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

@@ -10,6 +10,11 @@ const useHandleWalletsToConnect = () => {
             setShowAuthFlow(false);
             return;
         }
+        // Avoid showing wallet-list when wallet updates network to the correct one in run time (bridge mode)
+        if (walletsToConnectByChain.length === 0) {
+            setShowAuthFlow(false);
+            return goToInitialView();
+        }
         const [firstWallet, ...restOfTheWallets] = walletsToConnectByChain;
         if (firstWallet.numberOfWallets > 1) {
             const updatedWallets = [

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

@@ -36,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, setAuthMode, removeConnectedWalletsInfo, } = useInternalDynamicContext.useInternalDynamicContext();
+    const { setUser, multiWalletWidgetState, debugError, multiWallet: multiWalletEnabled, appName, primaryWalletId, setCallback, setShowAuthFlow, setPrimaryWalletId, siweStatement, connectedWallet, authMode, setOnboardingOnlyJwt, authToken, setAuthMode, removeConnectedWalletsInfo, ongoingVerifications, } = 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.
@@ -90,6 +90,8 @@ const useVerifyWallet = ({ consumeNonce, displayTermsOfService, environmentId, p
     };
     const handleError = (e, walletConnector, address, oauth) => {
         removeConnectedWalletsInfo();
+        // Ensure auth verification flag is taken down
+        ongoingVerifications.setAuthVerification(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) {

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

@@ -32,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, setAuthMode, removeConnectedWalletsInfo, } = useInternalDynamicContext();
+    const { setUser, multiWalletWidgetState, debugError, multiWallet: multiWalletEnabled, appName, primaryWalletId, setCallback, setShowAuthFlow, setPrimaryWalletId, siweStatement, connectedWallet, authMode, setOnboardingOnlyJwt, authToken, setAuthMode, removeConnectedWalletsInfo, ongoingVerifications, } = 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.
@@ -86,6 +86,8 @@ const useVerifyWallet = ({ consumeNonce, displayTermsOfService, environmentId, p
     };
     const handleError = (e, walletConnector, address, oauth) => {
         removeConnectedWalletsInfo();
+        // Ensure auth verification flag is taken down
+        ongoingVerifications.setAuthVerification(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) {

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, }) => {
     const [showQrcodeModal, setShowQrcodeModal] = React.useState(false);
     const linkedWallets = React.useMemo(() => {
         if (!authToken) {
@@ -33,7 +33,16 @@ 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.
+        if (authMode === 'connect-and-sign' && user) {
+            return linkedWallets;
+        }
+        return connectedWallets;
+    }, [authMode, connectedWallets, linkedWallets, user]);
     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,7 @@ type Props = {
     wallets: WalletOption[];
     setPrimaryWalletId: (walletId: string) => void;
     primaryWalletId: string | undefined;
+    user?: UserProfile;
 };
 export interface UseWalletConnectors {
     computeConnectedStateForWallets: () => Promise<void>;
@@ -27,5 +28,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, }: 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, }) => {
     const [showQrcodeModal, setShowQrcodeModal] = useState(false);
     const linkedWallets = useMemo(() => {
         if (!authToken) {
@@ -29,7 +29,16 @@ 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.
+        if (authMode === 'connect-and-sign' && user) {
+            return linkedWallets;
+        }
+        return connectedWallets;
+    }, [authMode, connectedWallets, linkedWallets, user]);
     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(() => {