@dynamic-labs/sdk-react-core 1.0.0-alpha.1 → 1.0.0-alpha.11

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

@@ -7,7 +7,7 @@ import { useInternalDynamicContext } from '../../../../context/DynamicContext/us
 import { MISSING_ADDRESS_ERROR } from '../../../constants/errors.js';
 
 const useSyncPrimaryWallet = (canSync = true) => {
-    const { setShowAuthFlow, isAuthenticated, authMode, computeConnectedStateForWallets, connectWallet, handleLogOut, multiWalletWidgetState, primaryWallet, secondaryWallets, setMultiWalletWidgetState, setPrimaryWallet, setShowWidgetStatePopup, showLockedWalletView, showWidgetStatePopup, setSelectedWalletWithAction, } = useInternalDynamicContext();
+    const { setShowAuthFlow, isAuthenticated, authMode, connectWallet, handleLogOut, multiWalletWidgetState, primaryWallet, secondaryWallets, setMultiWalletWidgetState, setPrimaryWallet, setShowWidgetStatePopup, showLockedWalletView, showWidgetStatePopup, setSelectedWalletWithAction, } = useInternalDynamicContext();
     const { setView } = useViewContext();
     const handlePrimaryWalletNotActive = useCallback((connectedAddress) => {
         if (!primaryWallet)
@@ -34,7 +34,6 @@ const useSyncPrimaryWallet = (canSync = true) => {
                 return;
             }
             setPrimaryWallet(connectedSecondaryWallet.id);
-            computeConnectedStateForWallets();
             return;
         }
         if (showWidgetStatePopup) {
@@ -48,7 +47,6 @@ const useSyncPrimaryWallet = (canSync = true) => {
             isSameAddress(wallet.address, connectedAddress, wallet.chain));
         if (connectedWallet) {
             setPrimaryWallet(connectedWallet.id);
-            computeConnectedStateForWallets();
             return;
         }
         setMultiWalletWidgetState('awaiting_account_switch', 'primary_not_connected');
@@ -59,7 +57,6 @@ const useSyncPrimaryWallet = (canSync = true) => {
         showWidgetStatePopup,
         setMultiWalletWidgetState,
         setPrimaryWallet,
-        computeConnectedStateForWallets,
         setShowWidgetStatePopup,
         connectWallet,
     ]);
@@ -88,7 +85,6 @@ const useSyncPrimaryWallet = (canSync = true) => {
             const connectedSecondaryWallet = secondaryWallets.find((wallet) => wallet.connected);
             if (connectedSecondaryWallet) {
                 setPrimaryWallet(connectedSecondaryWallet.id);
-                computeConnectedStateForWallets();
                 return;
             }
             // user is logged in (has valid jwt), but no wallet is connected
@@ -110,7 +106,6 @@ const useSyncPrimaryWallet = (canSync = true) => {
         secondaryWallets,
         multiWalletWidgetState,
         setMultiWalletWidgetState,
-        computeConnectedStateForWallets,
         handlePrimaryWalletNotActive,
         handleLogOut,
         setPrimaryWallet,

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

@@ -20,9 +20,9 @@ require('@dynamic-labs/multi-wallet');
 var requiresTwoStepAuthentication = require('../../../functions/requiresTwoStepAuthentication/requiresTwoStepAuthentication.cjs');
 var useConnectAndSign = require('../../authenticationHooks/useConnectAndSign/useConnectAndSign.cjs');
 require('../../../../context/ErrorContext/ErrorContext.cjs');
-require('../../../../config/ApiEndpoint.cjs');
 require('../../../../context/AccessDeniedContext/AccessDeniedContext.cjs');
 require('../../../../context/AccountExistsContext/AccountExistsContext.cjs');
+require('../../../../config/ApiEndpoint.cjs');
 require('../../../../context/CaptchaContext/CaptchaContext.cjs');
 require('../../../../context/EmailVerificationContext/EmailVerificationContext.cjs');
 

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

@@ -16,9 +16,9 @@ import '@dynamic-labs/multi-wallet';
 import { requiresTwoStepAuthentication } from '../../../functions/requiresTwoStepAuthentication/requiresTwoStepAuthentication.js';
 import { useConnectAndSign } from '../../authenticationHooks/useConnectAndSign/useConnectAndSign.js';
 import '../../../../context/ErrorContext/ErrorContext.js';
-import '../../../../config/ApiEndpoint.js';
 import '../../../../context/AccessDeniedContext/AccessDeniedContext.js';
 import '../../../../context/AccountExistsContext/AccountExistsContext.js';
+import '../../../../config/ApiEndpoint.js';
 import '../../../../context/CaptchaContext/CaptchaContext.js';
 import '../../../../context/EmailVerificationContext/EmailVerificationContext.js';
 

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

@@ -47,7 +47,8 @@ const useAuthLayoutChecks = (walletConnector) => {
         view !== 'passkey-intro' &&
         view !== 'social-redirect-view' &&
         view !== 'update-email' &&
-        view !== 'collect-user-data-login-with-email';
+        view !== 'collect-user-data-login-with-email' &&
+        view !== 'passkey-recovery-start';
     const showConnectedWalletProgress = isBridgeFlow &&
         (view === 'wallet-list' ||
             view === 'qr-code' ||
@@ -78,7 +79,9 @@ const useAuthLayoutChecks = (walletConnector) => {
         view === 'email-wallet-otp-verification-view';
     const showCloseButton = view !== 'login-with-email-or-wallet-full-wallet-list' &&
         view !== 'login-with-email-verification' &&
-        view !== 'network-not-supported';
+        view !== 'network-not-supported' &&
+        view !== 'passkey-recovery-complete' &&
+        view !== 'passkey-recovery-start';
     const showBackButton = view === 'qr-code' ||
         view === 'pending-signature' ||
         view === 'no-qr-not-installed' ||

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

@@ -43,7 +43,8 @@ const useAuthLayoutChecks = (walletConnector) => {
         view !== 'passkey-intro' &&
         view !== 'social-redirect-view' &&
         view !== 'update-email' &&
-        view !== 'collect-user-data-login-with-email';
+        view !== 'collect-user-data-login-with-email' &&
+        view !== 'passkey-recovery-start';
     const showConnectedWalletProgress = isBridgeFlow &&
         (view === 'wallet-list' ||
             view === 'qr-code' ||
@@ -74,7 +75,9 @@ const useAuthLayoutChecks = (walletConnector) => {
         view === 'email-wallet-otp-verification-view';
     const showCloseButton = view !== 'login-with-email-or-wallet-full-wallet-list' &&
         view !== 'login-with-email-verification' &&
-        view !== 'network-not-supported';
+        view !== 'network-not-supported' &&
+        view !== 'passkey-recovery-complete' &&
+        view !== 'passkey-recovery-start';
     const showBackButton = view === 'qr-code' ||
         view === 'pending-signature' ||
         view === 'no-qr-not-installed' ||

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

@@ -7,8 +7,9 @@ var React = require('react');
 var utils = require('@dynamic-labs/utils');
 var useInternalDynamicContext = require('../../../context/DynamicContext/useInternalDynamicContext.cjs');
 require('@dynamic-labs/wallet-connector-core');
-require('../../../context/ViewContext/ViewContext.cjs');
+require('../../../context/CaptchaContext/CaptchaContext.cjs');
 require('../../../context/ErrorContext/ErrorContext.cjs');
+require('../../../context/ViewContext/ViewContext.cjs');
 require('@dynamic-labs/sdk-api');
 require('../../../shared/logger.cjs');
 require('@dynamic-labs/iconic');
@@ -18,31 +19,31 @@ require('../../constants/colors.cjs');
 require('../../../shared/utils/classes/storage/localStorage.cjs');
 require('viem');
 require('../../../shared/consts/index.cjs');
-require('../../../config/ApiEndpoint.cjs');
 require('@dynamic-labs/multi-wallet');
 require('../../../context/AccessDeniedContext/AccessDeniedContext.cjs');
 require('../../../context/AccountExistsContext/AccountExistsContext.cjs');
-require('../../../context/CaptchaContext/CaptchaContext.cjs');
+require('../../../config/ApiEndpoint.cjs');
 var useSignConnectOnlyUser = require('../authenticationHooks/useSignConnectOnlyUser/useSignConnectOnlyUser.cjs');
 require('../../../context/EmailVerificationContext/EmailVerificationContext.cjs');
 
 const useAuthenticateConnectedUser = () => {
     const signConnectOnlyUser = useSignConnectOnlyUser.useSignConnectOnlyUser();
-    const { connectedWallet, user } = useInternalDynamicContext.useInternalDynamicContext();
+    const { connectedWallets, user } = useInternalDynamicContext.useInternalDynamicContext();
     const [isAuthenticating, setIsAuthenticating] = React.useState(false);
     const authenticateUser = React.useCallback(() => _tslib.__awaiter(void 0, void 0, void 0, function* () {
         if (user) {
             throw new utils.DynamicError('User is already authenticated');
         }
-        if (!connectedWallet) {
+        if (connectedWallets.length === 0) {
             throw new utils.DynamicError('No connected wallet');
         }
+        const connectedWallet = connectedWallets[0];
         setIsAuthenticating(true);
         yield signConnectOnlyUser({
             walletConnector: connectedWallet.connector,
         });
         setIsAuthenticating(false);
-    }), [connectedWallet === null || connectedWallet === void 0 ? void 0 : connectedWallet.address, connectedWallet === null || connectedWallet === void 0 ? void 0 : connectedWallet.chain]);
+    }), [connectedWallets, signConnectOnlyUser, user]);
     return { authenticateUser, isAuthenticating };
 };
 

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

@@ -3,8 +3,9 @@ import { useState, useCallback } from 'react';
 import { DynamicError } from '@dynamic-labs/utils';
 import { useInternalDynamicContext } from '../../../context/DynamicContext/useInternalDynamicContext.js';
 import '@dynamic-labs/wallet-connector-core';
-import '../../../context/ViewContext/ViewContext.js';
+import '../../../context/CaptchaContext/CaptchaContext.js';
 import '../../../context/ErrorContext/ErrorContext.js';
+import '../../../context/ViewContext/ViewContext.js';
 import '@dynamic-labs/sdk-api';
 import '../../../shared/logger.js';
 import '@dynamic-labs/iconic';
@@ -14,31 +15,31 @@ import '../../constants/colors.js';
 import '../../../shared/utils/classes/storage/localStorage.js';
 import 'viem';
 import '../../../shared/consts/index.js';
-import '../../../config/ApiEndpoint.js';
 import '@dynamic-labs/multi-wallet';
 import '../../../context/AccessDeniedContext/AccessDeniedContext.js';
 import '../../../context/AccountExistsContext/AccountExistsContext.js';
-import '../../../context/CaptchaContext/CaptchaContext.js';
+import '../../../config/ApiEndpoint.js';
 import { useSignConnectOnlyUser } from '../authenticationHooks/useSignConnectOnlyUser/useSignConnectOnlyUser.js';
 import '../../../context/EmailVerificationContext/EmailVerificationContext.js';
 
 const useAuthenticateConnectedUser = () => {
     const signConnectOnlyUser = useSignConnectOnlyUser();
-    const { connectedWallet, user } = useInternalDynamicContext();
+    const { connectedWallets, user } = useInternalDynamicContext();
     const [isAuthenticating, setIsAuthenticating] = useState(false);
     const authenticateUser = useCallback(() => __awaiter(void 0, void 0, void 0, function* () {
         if (user) {
             throw new DynamicError('User is already authenticated');
         }
-        if (!connectedWallet) {
+        if (connectedWallets.length === 0) {
             throw new DynamicError('No connected wallet');
         }
+        const connectedWallet = connectedWallets[0];
         setIsAuthenticating(true);
         yield signConnectOnlyUser({
             walletConnector: connectedWallet.connector,
         });
         setIsAuthenticating(false);
-    }), [connectedWallet === null || connectedWallet === void 0 ? void 0 : connectedWallet.address, connectedWallet === null || connectedWallet === void 0 ? void 0 : connectedWallet.chain]);
+    }), [connectedWallets, signConnectOnlyUser, user]);
     return { authenticateUser, isAuthenticating };
 };
 

package/src/lib/utils/hooks/useConnectWallet/updateUserWalletsFromConnectedWallets/index.d.ts

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

package/src/lib/utils/hooks/useConnectWallet/updateUserWalletsFromConnectedWallets/updateUserWalletsFromConnectedWallets.cjs

@@ -0,0 +1,37 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+/**
+ * This takes a userWallets and connectedWallets array, and returns a new userWallets array
+ * updated to match the connectedWallets array.
+ * It will add any missing wallets, update properties that don't match, and remove wallets that aren't
+ * in the connectedWallets and is not linked to the user.
+ */
+const updateUserWalletsFromConnectedWallets = (userWallets, connectedWallets) => {
+    const userWalletsCopy = [...userWallets];
+    /** We will use this to find wallets addresses that were removed */
+    const newWalletsAddresses = new Set();
+    // First pass: add missing wallets and update changed properties
+    for (const connectedWallet of connectedWallets) {
+        newWalletsAddresses.add(connectedWallet.address);
+        const userWallet = userWalletsCopy.find((wallet) => wallet.address === connectedWallet.address);
+        // Catch new wallets
+        if (!userWallet) {
+            userWalletsCopy.push(connectedWallet);
+            continue;
+        }
+        // If already present, just update properties that might have changed
+        userWallet.connected = connectedWallet.connected;
+        userWallet.network = connectedWallet.network;
+    }
+    // This filter is to remove a wallet that was previously added to userWallets but is not present
+    // among the connected wallets (it should not be removed if it's authenticated to the suer tho)
+    return userWalletsCopy.filter((userWallet) => 
+    // Keep wallets that are still in the new list
+    newWalletsAddresses.has(userWallet.address) ||
+        // Or are linked to the current user
+        userWallet.authenticated);
+};
+
+exports.updateUserWalletsFromConnectedWallets = updateUserWalletsFromConnectedWallets;

package/src/lib/utils/hooks/useConnectWallet/updateUserWalletsFromConnectedWallets/updateUserWalletsFromConnectedWallets.d.ts

@@ -0,0 +1,8 @@
+import { Wallet } from '../../../../shared';
+/**
+ * This takes a userWallets and connectedWallets array, and returns a new userWallets array
+ * updated to match the connectedWallets array.
+ * It will add any missing wallets, update properties that don't match, and remove wallets that aren't
+ * in the connectedWallets and is not linked to the user.
+ */
+export declare const updateUserWalletsFromConnectedWallets: (userWallets: Wallet[], connectedWallets: Wallet[]) => Wallet[];

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

@@ -0,0 +1,33 @@
+/**
+ * This takes a userWallets and connectedWallets array, and returns a new userWallets array
+ * updated to match the connectedWallets array.
+ * It will add any missing wallets, update properties that don't match, and remove wallets that aren't
+ * in the connectedWallets and is not linked to the user.
+ */
+const updateUserWalletsFromConnectedWallets = (userWallets, connectedWallets) => {
+    const userWalletsCopy = [...userWallets];
+    /** We will use this to find wallets addresses that were removed */
+    const newWalletsAddresses = new Set();
+    // First pass: add missing wallets and update changed properties
+    for (const connectedWallet of connectedWallets) {
+        newWalletsAddresses.add(connectedWallet.address);
+        const userWallet = userWalletsCopy.find((wallet) => wallet.address === connectedWallet.address);
+        // Catch new wallets
+        if (!userWallet) {
+            userWalletsCopy.push(connectedWallet);
+            continue;
+        }
+        // If already present, just update properties that might have changed
+        userWallet.connected = connectedWallet.connected;
+        userWallet.network = connectedWallet.network;
+    }
+    // This filter is to remove a wallet that was previously added to userWallets but is not present
+    // among the connected wallets (it should not be removed if it's authenticated to the suer tho)
+    return userWalletsCopy.filter((userWallet) => 
+    // Keep wallets that are still in the new list
+    newWalletsAddresses.has(userWallet.address) ||
+        // Or are linked to the current user
+        userWallet.authenticated);
+};
+
+export { updateUserWalletsFromConnectedWallets };

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

@@ -5,6 +5,8 @@ Object.defineProperty(exports, '__esModule', { value: true });
 var _tslib = require('../../../../../_virtual/_tslib.cjs');
 var React = require('react');
 var walletConnectorCore = require('@dynamic-labs/wallet-connector-core');
+var UserWalletsContext = require('../../../context/UserWalletsContext/UserWalletsContext.cjs');
+var api = require('../../../data/api.cjs');
 require('@dynamic-labs/sdk-api');
 require('../../../shared/logger.cjs');
 require('@dynamic-labs/iconic');
@@ -18,14 +20,20 @@ require('viem');
 var useLocalStorage = require('../../../shared/utils/hooks/useLocalStorage/useLocalStorage.cjs');
 require('@dynamic-labs/utils');
 require('../../../shared/consts/index.cjs');
-var getWalletProvider = require('../../functions/getWalletProvider/getWalletProvider.cjs');
-var api = require('../../../data/api.cjs');
 require('@dynamic-labs/multi-wallet');
 var shouldManuallyReconnectOnRefresh = require('../../functions/shouldManuallyReconnectOnRefresh/shouldManuallyReconnectOnRefresh.cjs');
+var getWalletProvider = require('../../functions/getWalletProvider/getWalletProvider.cjs');
+var updateUserWalletsFromConnectedWallets = require('./updateUserWalletsFromConnectedWallets/updateUserWalletsFromConnectedWallets.cjs');
 
-const useConnectWallet = ({ authMode, clearPrimaryWalletId, enableVisitTrackingOnConnectOnly, environmentId, primaryWalletId, setPrimaryWalletId, wallets, onDisconnect, onBeforeConnectSuccessConfirmation, setShowAuthFlow, isBridgeFlow, }) => {
+const useConnectWallet = ({ authMode, clearPrimaryWalletId, enableVisitTrackingOnConnectOnly, environmentId, primaryWalletId, setPrimaryWalletId, walletConnectorOptions, onDisconnect, onBeforeConnectSuccessConfirmation, setShowAuthFlow, isBridgeFlow, }) => {
     const [connectedWalletsInfo, setConnectedWalletsInfo, removeConnectedWalletsInfo,] = useLocalStorage.useLocalStorage(localStorage.CONNECTED_WALLETS_INFO, []);
-    const [connectedWallets, setConnectedWallets] = React.useState([]);
+    const [connectedWallets, _setConnectedWallets] = React.useState([]);
+    const { setUserWallets } = UserWalletsContext.useInternalUserWallets();
+    /** This wrapper is to ensure userWallets is always properly updated alongside connectedWallets */
+    const setConnectedWallets = (newWallets) => {
+        _setConnectedWallets(newWallets);
+        setUserWallets((userWallets) => updateUserWalletsFromConnectedWallets.updateUserWalletsFromConnectedWallets(userWallets, newWallets));
+    };
     const disconnectWallet = React.useCallback((walletId) => _tslib.__awaiter(void 0, void 0, void 0, function* () {
         const walletToDisconnect = connectedWallets.find((wallet) => wallet.id === walletId);
         yield (walletToDisconnect === null || walletToDisconnect === void 0 ? void 0 : walletToDisconnect.connector.endSession());
@@ -58,7 +66,7 @@ const useConnectWallet = ({ authMode, clearPrimaryWalletId, enableVisitTrackingO
     // The event listeners are updating `connectedWallets` list.
     // It should be called on the first render and when connectedWalletsInfo updates
     const updateConnectedWalletsList = React.useCallback(() => _tslib.__awaiter(void 0, void 0, void 0, function* () {
-        const walletConnectors = wallets.map((wallet) => wallet.walletConnector);
+        const walletConnectors = walletConnectorOptions.map((wallet) => wallet.walletConnector);
         if (!walletConnectors.length) {
             return;
         }
@@ -79,6 +87,7 @@ const useConnectWallet = ({ authMode, clearPrimaryWalletId, enableVisitTrackingO
             const walletChain = walletConnector.connectedChain;
             const walletObject = {
                 address: walletAddress || '',
+                authenticated: false,
                 chain: walletChain || '',
                 connected: true,
                 connector: walletConnector,
@@ -88,12 +97,12 @@ const useConnectWallet = ({ authMode, clearPrimaryWalletId, enableVisitTrackingO
             return walletObject;
         })))).filter((wallet) => Boolean(wallet));
         setConnectedWallets(updatedConnectedWallets);
-    }), [connectedWalletsInfo, disconnectWallet, wallets]);
+    }), [connectedWalletsInfo, disconnectWallet, walletConnectorOptions]);
     // Generate the connectedWallets list when connectedWalletsInfo (localStorage) or memoized wallet connector updates
     React.useEffect(() => {
         updateConnectedWalletsList();
         // eslint-disable-next-line react-hooks/exhaustive-deps
-    }, [connectedWalletsInfo, wallets]);
+    }, [connectedWalletsInfo, walletConnectorOptions]);
     const getNextIdAvailable = React.useCallback((currentWallets) => {
         const existingIds = currentWallets.map(({ id }) => id);
         const sortedIds = existingIds
@@ -114,7 +123,6 @@ const useConnectWallet = ({ authMode, clearPrimaryWalletId, enableVisitTrackingO
             setConnectedWallets(clonedConnectedWalletsList);
         }
     }, [connectedWallets]);
-    const connectedWallet = connectedWallets[0] || null;
     // Keeps connected wallet data inside localStorage
     const applyConnectedWalletToStore = ({ walletId, walletConnectorKey, walletChain, provider, }) => {
         const updatedConnectedWalletsInfo = [...connectedWalletsInfo];
@@ -132,6 +140,9 @@ const useConnectWallet = ({ authMode, clearPrimaryWalletId, enableVisitTrackingO
             yield walletConnector.connect();
         }
         const currentWalletConnectorAddress = yield walletConnector.fetchPublicAddress();
+        if (!currentWalletConnectorAddress) {
+            return;
+        }
         if (onBeforeConnectSuccessConfirmation) {
             const shouldProceedWithConnection = yield onBeforeConnectSuccessConfirmation({
                 address: currentWalletConnectorAddress,
@@ -153,15 +164,15 @@ const useConnectWallet = ({ authMode, clearPrimaryWalletId, enableVisitTrackingO
     });
     const shouldSkipCreatingVisit = authMode === 'connect-only' && !enableVisitTrackingOnConnectOnly;
     const connectWallet = (walletConnector, fetchPublicAddressOpts, shouldCallCallback = true) => _tslib.__awaiter(void 0, void 0, void 0, function* () {
-        const publicWalletAddress = yield walletConnector.fetchPublicAddress(fetchPublicAddressOpts);
-        if (!publicWalletAddress) {
+        const walletAddress = yield walletConnector.fetchPublicAddress(fetchPublicAddressOpts);
+        if (!walletAddress) {
             const error = new Error();
             error.code = 'missing-public-address';
             throw error;
         }
         if (onBeforeConnectSuccessConfirmation && shouldCallCallback) {
             const shouldProceedWithConnection = yield onBeforeConnectSuccessConfirmation({
-                address: publicWalletAddress,
+                address: walletAddress,
                 chain: walletConnector.connectedChain,
                 connector: walletConnector,
             });
@@ -183,7 +194,7 @@ const useConnectWallet = ({ authMode, clearPrimaryWalletId, enableVisitTrackingO
         else {
             applyConnectedWalletToStore({
                 provider: getWalletProvider.getWalletProvider(walletConnector),
-                walletAddress: publicWalletAddress,
+                walletAddress: walletAddress,
                 walletChain,
                 walletConnectorKey: walletConnector.key,
                 walletId,
@@ -196,18 +207,17 @@ const useConnectWallet = ({ authMode, clearPrimaryWalletId, enableVisitTrackingO
                     authMode,
                     chain: walletChain || '',
                     environmentId,
-                    publicWalletAddress,
+                    publicWalletAddress: walletAddress,
                     walletName: walletConnector.name,
                     walletProvider: getWalletProvider.getWalletProvider(walletConnector),
                 });
             }
         }
-        return publicWalletAddress;
+        return { address: walletAddress, id: walletId };
     });
     const getConnectedWalletById = React.useCallback((walletId) => connectedWallets.find((wallet) => wallet.id === walletId), [connectedWallets]);
     return {
         connectWallet,
-        connectedWallet,
         connectedWallets,
         connectedWalletsInfo,
         disconnectWallet,

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

@@ -1,5 +1,6 @@
 import { Dispatch, SetStateAction } from 'react';
 import { Chain, FetchPublicAddressOpts, WalletConnector } from '@dynamic-labs/wallet-connector-core';
+import { ConnectWalletResult } from '../../../context/DynamicContext/types';
 import { AuthModeType, OnBeforeConnectSuccessConfirmation, Wallet, WalletOption } from '../../../shared';
 export type ConnectedWalletConnectorType = {
     id: string;
@@ -14,15 +15,14 @@ type Props = {
     environmentId: string;
     primaryWalletId: string | undefined;
     setPrimaryWalletId: (walletId: string) => void;
-    wallets: WalletOption[];
+    walletConnectorOptions: WalletOption[];
     onDisconnect: (connectedWalletsInfo: ConnectedWalletConnectorType[], wallet?: Wallet) => void;
     onBeforeConnectSuccessConfirmation: OnBeforeConnectSuccessConfirmation | undefined;
     setShowAuthFlow: Dispatch<SetStateAction<boolean>>;
     isBridgeFlow: boolean;
 };
 type UseConnectWalletValue = {
-    connectWallet: (walletConnector: WalletConnector, fetchPublicAddressOpts?: FetchPublicAddressOpts, shouldCallCallback?: boolean) => Promise<string | undefined>;
-    connectedWallet: Wallet | null;
+    connectWallet: (walletConnector: WalletConnector, fetchPublicAddressOpts?: FetchPublicAddressOpts, shouldCallCallback?: boolean) => Promise<ConnectWalletResult | undefined>;
     connectedWallets: Wallet[];
     connectedWalletsInfo: ConnectedWalletConnectorType[];
     getConnectedWalletById: (walletId: string) => Wallet | undefined;
@@ -30,5 +30,5 @@ type UseConnectWalletValue = {
     removeConnectedWalletsInfo: () => void;
     disconnectWallet: (walletId: string) => Promise<void>;
 };
-export declare const useConnectWallet: ({ authMode, clearPrimaryWalletId, enableVisitTrackingOnConnectOnly, environmentId, primaryWalletId, setPrimaryWalletId, wallets, onDisconnect, onBeforeConnectSuccessConfirmation, setShowAuthFlow, isBridgeFlow, }: Props) => UseConnectWalletValue;
+export declare const useConnectWallet: ({ authMode, clearPrimaryWalletId, enableVisitTrackingOnConnectOnly, environmentId, primaryWalletId, setPrimaryWalletId, walletConnectorOptions, onDisconnect, onBeforeConnectSuccessConfirmation, setShowAuthFlow, isBridgeFlow, }: Props) => UseConnectWalletValue;
 export {};

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

@@ -1,6 +1,8 @@
 import { __awaiter } from '../../../../../_virtual/_tslib.js';
 import { useState, useCallback, useEffect } from 'react';
 import { getWalletConnectorByKey, logger } from '@dynamic-labs/wallet-connector-core';
+import { useInternalUserWallets } from '../../../context/UserWalletsContext/UserWalletsContext.js';
+import { createVisit } from '../../../data/api.js';
 import '@dynamic-labs/sdk-api';
 import '../../../shared/logger.js';
 import '@dynamic-labs/iconic';
@@ -14,14 +16,20 @@ import 'viem';
 import { useLocalStorage } from '../../../shared/utils/hooks/useLocalStorage/useLocalStorage.js';
 import '@dynamic-labs/utils';
 import '../../../shared/consts/index.js';
-import { getWalletProvider } from '../../functions/getWalletProvider/getWalletProvider.js';
-import { createVisit } from '../../../data/api.js';
 import '@dynamic-labs/multi-wallet';
 import { shouldManuallyReconnectOnRefresh } from '../../functions/shouldManuallyReconnectOnRefresh/shouldManuallyReconnectOnRefresh.js';
+import { getWalletProvider } from '../../functions/getWalletProvider/getWalletProvider.js';
+import { updateUserWalletsFromConnectedWallets } from './updateUserWalletsFromConnectedWallets/updateUserWalletsFromConnectedWallets.js';
 
-const useConnectWallet = ({ authMode, clearPrimaryWalletId, enableVisitTrackingOnConnectOnly, environmentId, primaryWalletId, setPrimaryWalletId, wallets, onDisconnect, onBeforeConnectSuccessConfirmation, setShowAuthFlow, isBridgeFlow, }) => {
+const useConnectWallet = ({ authMode, clearPrimaryWalletId, enableVisitTrackingOnConnectOnly, environmentId, primaryWalletId, setPrimaryWalletId, walletConnectorOptions, onDisconnect, onBeforeConnectSuccessConfirmation, setShowAuthFlow, isBridgeFlow, }) => {
     const [connectedWalletsInfo, setConnectedWalletsInfo, removeConnectedWalletsInfo,] = useLocalStorage(CONNECTED_WALLETS_INFO, []);
-    const [connectedWallets, setConnectedWallets] = useState([]);
+    const [connectedWallets, _setConnectedWallets] = useState([]);
+    const { setUserWallets } = useInternalUserWallets();
+    /** This wrapper is to ensure userWallets is always properly updated alongside connectedWallets */
+    const setConnectedWallets = (newWallets) => {
+        _setConnectedWallets(newWallets);
+        setUserWallets((userWallets) => updateUserWalletsFromConnectedWallets(userWallets, newWallets));
+    };
     const disconnectWallet = useCallback((walletId) => __awaiter(void 0, void 0, void 0, function* () {
         const walletToDisconnect = connectedWallets.find((wallet) => wallet.id === walletId);
         yield (walletToDisconnect === null || walletToDisconnect === void 0 ? void 0 : walletToDisconnect.connector.endSession());
@@ -54,7 +62,7 @@ const useConnectWallet = ({ authMode, clearPrimaryWalletId, enableVisitTrackingO
     // 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);
+        const walletConnectors = walletConnectorOptions.map((wallet) => wallet.walletConnector);
         if (!walletConnectors.length) {
             return;
         }
@@ -75,6 +83,7 @@ const useConnectWallet = ({ authMode, clearPrimaryWalletId, enableVisitTrackingO
             const walletChain = walletConnector.connectedChain;
             const walletObject = {
                 address: walletAddress || '',
+                authenticated: false,
                 chain: walletChain || '',
                 connected: true,
                 connector: walletConnector,
@@ -84,12 +93,12 @@ const useConnectWallet = ({ authMode, clearPrimaryWalletId, enableVisitTrackingO
             return walletObject;
         })))).filter((wallet) => Boolean(wallet));
         setConnectedWallets(updatedConnectedWallets);
-    }), [connectedWalletsInfo, disconnectWallet, wallets]);
+    }), [connectedWalletsInfo, disconnectWallet, walletConnectorOptions]);
     // Generate the connectedWallets list when connectedWalletsInfo (localStorage) or memoized wallet connector updates
     useEffect(() => {
         updateConnectedWalletsList();
         // eslint-disable-next-line react-hooks/exhaustive-deps
-    }, [connectedWalletsInfo, wallets]);
+    }, [connectedWalletsInfo, walletConnectorOptions]);
     const getNextIdAvailable = useCallback((currentWallets) => {
         const existingIds = currentWallets.map(({ id }) => id);
         const sortedIds = existingIds
@@ -110,7 +119,6 @@ const useConnectWallet = ({ authMode, clearPrimaryWalletId, enableVisitTrackingO
             setConnectedWallets(clonedConnectedWalletsList);
         }
     }, [connectedWallets]);
-    const connectedWallet = connectedWallets[0] || null;
     // Keeps connected wallet data inside localStorage
     const applyConnectedWalletToStore = ({ walletId, walletConnectorKey, walletChain, provider, }) => {
         const updatedConnectedWalletsInfo = [...connectedWalletsInfo];
@@ -128,6 +136,9 @@ const useConnectWallet = ({ authMode, clearPrimaryWalletId, enableVisitTrackingO
             yield walletConnector.connect();
         }
         const currentWalletConnectorAddress = yield walletConnector.fetchPublicAddress();
+        if (!currentWalletConnectorAddress) {
+            return;
+        }
         if (onBeforeConnectSuccessConfirmation) {
             const shouldProceedWithConnection = yield onBeforeConnectSuccessConfirmation({
                 address: currentWalletConnectorAddress,
@@ -149,15 +160,15 @@ const useConnectWallet = ({ authMode, clearPrimaryWalletId, enableVisitTrackingO
     });
     const shouldSkipCreatingVisit = authMode === 'connect-only' && !enableVisitTrackingOnConnectOnly;
     const connectWallet = (walletConnector, fetchPublicAddressOpts, shouldCallCallback = true) => __awaiter(void 0, void 0, void 0, function* () {
-        const publicWalletAddress = yield walletConnector.fetchPublicAddress(fetchPublicAddressOpts);
-        if (!publicWalletAddress) {
+        const walletAddress = yield walletConnector.fetchPublicAddress(fetchPublicAddressOpts);
+        if (!walletAddress) {
             const error = new Error();
             error.code = 'missing-public-address';
             throw error;
         }
         if (onBeforeConnectSuccessConfirmation && shouldCallCallback) {
             const shouldProceedWithConnection = yield onBeforeConnectSuccessConfirmation({
-                address: publicWalletAddress,
+                address: walletAddress,
                 chain: walletConnector.connectedChain,
                 connector: walletConnector,
             });
@@ -179,7 +190,7 @@ const useConnectWallet = ({ authMode, clearPrimaryWalletId, enableVisitTrackingO
         else {
             applyConnectedWalletToStore({
                 provider: getWalletProvider(walletConnector),
-                walletAddress: publicWalletAddress,
+                walletAddress: walletAddress,
                 walletChain,
                 walletConnectorKey: walletConnector.key,
                 walletId,
@@ -192,18 +203,17 @@ const useConnectWallet = ({ authMode, clearPrimaryWalletId, enableVisitTrackingO
                     authMode,
                     chain: walletChain || '',
                     environmentId,
-                    publicWalletAddress,
+                    publicWalletAddress: walletAddress,
                     walletName: walletConnector.name,
                     walletProvider: getWalletProvider(walletConnector),
                 });
             }
         }
-        return publicWalletAddress;
+        return { address: walletAddress, id: walletId };
     });
     const getConnectedWalletById = useCallback((walletId) => connectedWallets.find((wallet) => wallet.id === walletId), [connectedWallets]);
     return {
         connectWallet,
-        connectedWallet,
         connectedWallets,
         connectedWalletsInfo,
         disconnectWallet,