@dynamic-labs/sdk-react-core 0.18.0-RC.1 → 0.18.0-RC.11

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

@@ -0,0 +1,78 @@
+import { useInternalDynamicContext } from '../../../context/DynamicContext/useInternalDynamicContext.js';
+import { useMockContext } from '../../../context/MockContext/MockContext.js';
+import { useViewContext } from '../../../context/ViewContext/ViewContext.js';
+import { isUserLinkingWallet } from '../../../shared/utils/functions/isUserLinkingWallet/isUserLinkingWallet.js';
+import { useQrCodeContext } from '../../../context/QrCodeContext/QrCodeContext.js';
+import { getDynamicLayoutData } from '../../functions/getDynamicLayoutData/getDynamicLayoutData.js';
+
+const useAuthLayoutChecks = (walletConnector) => {
+    const { view } = useViewContext();
+    const { user, privacyPolicyUrl, termsOfServiceUrl, isBridgeFlow } = useInternalDynamicContext();
+    const { showQrCodeMessage, showQrCodeImage } = useQrCodeContext();
+    const { mockedSDK } = useMockContext();
+    const { helpHeaderData } = getDynamicLayoutData({ view });
+    const isWalletListTypeView = view === 'wallet-connect-mobile-wallets-list' ||
+        view === 'wallet-list' ||
+        view === 'login-with-email-or-wallet-full-wallet-list';
+    const showHelpContent = Boolean(helpHeaderData &&
+        // Notice the negation here
+        !((view === 'qr-code' && !(walletConnector === null || walletConnector === void 0 ? void 0 : walletConnector.canConnectViaQrCode)) ||
+            view === 'no-qr-not-installed' ||
+            view === 'wallet-used' ||
+            view === 'chainalysis-blocked-wallet' ||
+            view === 'wallet-sign' ||
+            view === 'collect-user-data' ||
+            isUserLinkingWallet(user, view, mockedSDK)));
+    const showHeader = view !== 'collect-user-data' &&
+        view !== 'no-access' &&
+        view !== 'chainalysis-blocked-wallet' &&
+        view !== 'update-email' &&
+        view !== 'verify-email' &&
+        view !== 'network-not-supported' &&
+        view !== 'wallet-locked-view' &&
+        view !== 'gate-blocked-wallet' &&
+        view !== 'email-wallet-otp-verification-view' &&
+        view !== 'bridge-welcome' &&
+        view !== 'bridge-summary' &&
+        view !== 'bridge-next-wallet-connection';
+    const showConnectedWalletProgress = isBridgeFlow &&
+        (view === 'wallet-list' ||
+            view === 'qr-code' ||
+            view === 'wallet-connect-mobile-wallets-list' ||
+            view === 'pending-connect' ||
+            view === 'pending-signature' ||
+            view === 'pending-signature-without-back-button' ||
+            view === 'bridge-next-wallet-connection' ||
+            view === 'bridge-summary');
+    const showToSFooter = Boolean(!isUserLinkingWallet(user, view, mockedSDK) &&
+        (view === 'wallet-list' ||
+            view === 'wallet-connect-mobile-wallets-list' ||
+            // Don't show empty footer on login-with-email-or-wallet-full-wallet-list
+            (view === 'login-with-email-or-wallet' &&
+                termsOfServiceUrl &&
+                privacyPolicyUrl) ||
+            view === 'login-with-email-or-wallet-full-wallet-list'));
+    const showCloseButton = view !== 'login-with-email-or-wallet-full-wallet-list' &&
+        view !== 'login-with-email-verification';
+    const showBackButton = view === 'qr-code' ||
+        view === 'pending-signature' ||
+        view === 'no-qr-not-installed' ||
+        view === 'wallet-connect-mobile-wallets-list' ||
+        view === 'login-with-email-verification' ||
+        view === 'login-with-email-or-wallet-full-wallet-list' ||
+        view === 'wallet-group' ||
+        view === 'pending-connect';
+    const showQrCodePreHeader = view === 'qr-code' && showQrCodeMessage && !showQrCodeImage;
+    return {
+        isWalletListTypeView,
+        showBackButton,
+        showCloseButton,
+        showConnectedWalletProgress,
+        showHeader,
+        showHelpContent,
+        showQrCodePreHeader,
+        showToSFooter,
+    };
+};
+
+export { useAuthLayoutChecks };

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

@@ -11,11 +11,11 @@ require('../../../context/ViewContext/ViewContext.cjs');
 require('../../../context/ErrorContext/ErrorContext.cjs');
 require('@dynamic-labs/sdk-api');
 require('../../../shared/logger.cjs');
-require('../../../config/LSSuffix.cjs');
 require('@dynamic-labs/iconic');
 require('react/jsx-runtime');
 require('@dynamic-labs/wallet-book');
 require('../../constants/colors.cjs');
+require('../../../shared/utils/classes/storage/localStorage.cjs');
 require('ethers');
 require('../../../shared/consts/index.cjs');
 require('../../../config/ApiEndpoint.cjs');

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

@@ -7,11 +7,11 @@ import '../../../context/ViewContext/ViewContext.js';
 import '../../../context/ErrorContext/ErrorContext.js';
 import '@dynamic-labs/sdk-api';
 import '../../../shared/logger.js';
-import '../../../config/LSSuffix.js';
 import '@dynamic-labs/iconic';
 import 'react/jsx-runtime';
 import '@dynamic-labs/wallet-book';
 import '../../constants/colors.js';
+import '../../../shared/utils/classes/storage/localStorage.js';
 import 'ethers';
 import '../../../shared/consts/index.js';
 import '../../../config/ApiEndpoint.js';

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

@@ -4,6 +4,17 @@ Object.defineProperty(exports, '__esModule', { value: true });
 
 var React = require('react');
 var walletConnectorCore = require('@dynamic-labs/wallet-connector-core');
+require('@dynamic-labs/sdk-api');
+require('../../../shared/logger.cjs');
+require('@dynamic-labs/iconic');
+require('react/jsx-runtime');
+require('../../../context/ViewContext/ViewContext.cjs');
+require('@dynamic-labs/wallet-book');
+require('@dynamic-labs/utils');
+require('../../constants/colors.cjs');
+var localStorage$1 = require('../../../shared/utils/classes/storage/localStorage.cjs');
+require('ethers');
+require('../../../shared/consts/index.cjs');
 
 const useClearWalletConnectSessions = ({ connectors }) => {
     const clearOphanedWalletConnectSessions = React.useCallback(() => {
@@ -12,7 +23,7 @@ const useClearWalletConnectSessions = ({ connectors }) => {
         if (connectors.length === 0)
             return;
         const names = new Set(connectors.map((connector) => walletConnectorCore.normalizeWalletName(connector.name)));
-        for (const key of Object.keys(localStorage)) {
+        for (const key of localStorage$1.LocalStorage.getKeys()) {
             if (key.startsWith('walletconnect') &&
                 !names.has(key.replace('walletconnect-', ''))) {
                 localStorage.removeItem(key);
@@ -22,8 +33,10 @@ const useClearWalletConnectSessions = ({ connectors }) => {
     const clearAllWalletConnectSessions = () => {
         if (typeof window === 'undefined')
             return;
-        for (const key of Object.keys(localStorage)) {
-            if (key.startsWith('walletconnect')) {
+        for (const key of localStorage$1.LocalStorage.getKeys()) {
+            if (key.startsWith('walletconnect') ||
+                key.startsWith('walletlink') ||
+                key.startsWith('wc@2')) {
                 localStorage.removeItem(key);
             }
         }

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

@@ -1,5 +1,16 @@
 import { useCallback } from 'react';
 import { normalizeWalletName } from '@dynamic-labs/wallet-connector-core';
+import '@dynamic-labs/sdk-api';
+import '../../../shared/logger.js';
+import '@dynamic-labs/iconic';
+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 useClearWalletConnectSessions = ({ connectors }) => {
     const clearOphanedWalletConnectSessions = useCallback(() => {
@@ -8,7 +19,7 @@ const useClearWalletConnectSessions = ({ connectors }) => {
         if (connectors.length === 0)
             return;
         const names = new Set(connectors.map((connector) => normalizeWalletName(connector.name)));
-        for (const key of Object.keys(localStorage)) {
+        for (const key of LocalStorage.getKeys()) {
             if (key.startsWith('walletconnect') &&
                 !names.has(key.replace('walletconnect-', ''))) {
                 localStorage.removeItem(key);
@@ -18,8 +29,10 @@ const useClearWalletConnectSessions = ({ connectors }) => {
     const clearAllWalletConnectSessions = () => {
         if (typeof window === 'undefined')
             return;
-        for (const key of Object.keys(localStorage)) {
-            if (key.startsWith('walletconnect')) {
+        for (const key of LocalStorage.getKeys()) {
+            if (key.startsWith('walletconnect') ||
+                key.startsWith('walletlink') ||
+                key.startsWith('wc@2')) {
                 localStorage.removeItem(key);
             }
         }

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

@@ -2,26 +2,24 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-var React = require('react');
+require('@dynamic-labs/sdk-api');
+require('../../../shared/logger.cjs');
+require('@dynamic-labs/iconic');
+require('@dynamic-labs/wallet-connector-core');
+require('react/jsx-runtime');
+require('../../../context/ViewContext/ViewContext.cjs');
+require('react');
+require('@dynamic-labs/wallet-book');
+require('@dynamic-labs/utils');
+require('../../constants/colors.cjs');
+require('../../../shared/utils/classes/storage/localStorage.cjs');
+require('ethers');
+var useMediaQuery = require('../../../shared/utils/hooks/useMediaQuery/useMediaQuery.cjs');
+require('../../../shared/consts/index.cjs');
 
 const useColorSchemePreference = () => {
-    const [preference, setPreference] = React.useState(() => window.matchMedia('(prefers-color-scheme: dark)').matches
-        ? 'dark'
-        : 'light');
-    React.useEffect(() => {
-        const listener = (e) => {
-            setPreference(e.matches ? 'dark' : 'light');
-        };
-        window
-            .matchMedia('(prefers-color-scheme: dark)')
-            .addEventListener('change', listener);
-        return () => {
-            window
-                .matchMedia('(prefers-color-scheme: dark)')
-                .removeEventListener('change', listener);
-        };
-    }, []);
-    return preference;
+    const isDarkMode = useMediaQuery.useMediaQuery('(prefers-color-scheme: dark)');
+    return isDarkMode ? 'dark' : 'light';
 };
 
 exports.useColorSchemePreference = useColorSchemePreference;

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

@@ -1,23 +1,21 @@
-import { useState, useEffect } from 'react';
+import '@dynamic-labs/sdk-api';
+import '../../../shared/logger.js';
+import '@dynamic-labs/iconic';
+import '@dynamic-labs/wallet-connector-core';
+import 'react/jsx-runtime';
+import '../../../context/ViewContext/ViewContext.js';
+import 'react';
+import '@dynamic-labs/wallet-book';
+import '@dynamic-labs/utils';
+import '../../constants/colors.js';
+import '../../../shared/utils/classes/storage/localStorage.js';
+import 'ethers';
+import { useMediaQuery } from '../../../shared/utils/hooks/useMediaQuery/useMediaQuery.js';
+import '../../../shared/consts/index.js';
 
 const useColorSchemePreference = () => {
-    const [preference, setPreference] = useState(() => window.matchMedia('(prefers-color-scheme: dark)').matches
-        ? 'dark'
-        : 'light');
-    useEffect(() => {
-        const listener = (e) => {
-            setPreference(e.matches ? 'dark' : 'light');
-        };
-        window
-            .matchMedia('(prefers-color-scheme: dark)')
-            .addEventListener('change', listener);
-        return () => {
-            window
-                .matchMedia('(prefers-color-scheme: dark)')
-                .removeEventListener('change', listener);
-        };
-    }, []);
-    return preference;
+    const isDarkMode = useMediaQuery('(prefers-color-scheme: dark)');
+    return isDarkMode ? 'dark' : 'light';
 };
 
 export { useColorSchemePreference };

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

@@ -7,7 +7,6 @@ var React = require('react');
 var walletConnectorCore = require('@dynamic-labs/wallet-connector-core');
 require('@dynamic-labs/sdk-api');
 require('../../../shared/logger.cjs');
-require('../../../config/LSSuffix.cjs');
 require('@dynamic-labs/iconic');
 require('react/jsx-runtime');
 require('../../../context/ViewContext/ViewContext.cjs');
@@ -15,6 +14,7 @@ require('@dynamic-labs/wallet-book');
 require('@dynamic-labs/utils');
 var localStorage = require('../../constants/localStorage.cjs');
 require('../../constants/colors.cjs');
+require('../../../shared/utils/classes/storage/localStorage.cjs');
 require('ethers');
 var useLocalStorage = require('../../../shared/utils/hooks/useLocalStorage/useLocalStorage.cjs');
 require('../../../shared/consts/index.cjs');
@@ -23,9 +23,36 @@ var api = require('../../../data/api.cjs');
 require('@dynamic-labs/multi-wallet');
 var shouldManuallyReconnectOnRefresh = require('../../functions/shouldManuallyReconnectOnRefresh/shouldManuallyReconnectOnRefresh.cjs');
 
-const useConnectWallet = (wallets, authMode, environmentId, enableVisitTrackingOnConnectOnly) => {
-    const [connectedInfo, setConnectedInfo, removeConnectedInfo] = useLocalStorage.useLocalStorage(localStorage.CONNECTED_WALLET_CONNECTOR_DATA, null);
+const useConnectWallet = ({ authMode, clearPrimaryWalletId, enableVisitTrackingOnConnectOnly, environmentId, primaryWalletId, setPrimaryWalletId, wallets, }) => {
+    const [connectedWalletsInfo, setConnectedWalletsInfo, removeConnectedWalletsInfo,] = useLocalStorage.useLocalStorage(localStorage.CONNECTED_WALLETS_INFO, []);
     const [connectedWallet, setConnectedWallet] = React.useState(null);
+    const getNextIdAvailable = React.useCallback((currentWallets) => {
+        const existingIds = currentWallets.map(({ id }) => id);
+        const sortedIds = existingIds
+            .map((id) => Number(id.replace('connect-only-wallet-', '')))
+            .sort((a, b) => a - b);
+        for (let i = 0; i < sortedIds.length; i++) {
+            if (sortedIds[i] !== i) {
+                return i;
+            }
+        }
+        return sortedIds.length;
+    }, []);
+    const connectedWallets = React.useMemo(() => connectedWalletsInfo
+        .map((connectedWallet) => {
+        const walletConnector = walletConnectorCore.getWalletConnectorByName(wallets.map((wallet) => wallet.walletConnector), connectedWallet.name);
+        if (!walletConnector) {
+            return null;
+        }
+        return {
+            address: connectedWallet.walletPublicKey,
+            chain: connectedWallet.chain,
+            connected: true,
+            connector: walletConnector,
+            id: connectedWallet.id,
+        };
+    })
+        .filter((wc) => wc !== null), [connectedWalletsInfo, wallets]);
     const setConnectedStates = React.useCallback((walletConnector, address, chain) => {
         setConnectedWallet({
             address,
@@ -34,13 +61,23 @@ const useConnectWallet = (wallets, authMode, environmentId, enableVisitTrackingO
             connector: walletConnector,
             id: 'connect-only-wallet',
         });
-        setConnectedInfo({
-            chain,
-            name: walletConnector.name,
-            provider: getWalletProvider.getWalletProvider(walletConnector),
-            walletPublicKey: address,
+        setConnectedWalletsInfo((currentWallets) => {
+            const exists = currentWallets.some((currentWallet) => currentWallet.walletPublicKey === address);
+            if (exists) {
+                return currentWallets;
+            }
+            return [
+                ...currentWallets,
+                {
+                    chain,
+                    id: `connect-only-wallet-${getNextIdAvailable(currentWallets)}`,
+                    name: walletConnector.name,
+                    provider: getWalletProvider.getWalletProvider(walletConnector),
+                    walletPublicKey: address,
+                },
+            ];
         });
-    }, [setConnectedInfo]);
+    }, [getNextIdAvailable, setConnectedWalletsInfo]);
     const connectWalletByAddressAndChain = React.useCallback((name, address, chain) => _tslib.__awaiter(void 0, void 0, void 0, function* () {
         const walletConnector = walletConnectorCore.getWalletConnectorByName(wallets.map((wallet) => wallet.walletConnector), name);
         if (walletConnector) {
@@ -62,19 +99,19 @@ const useConnectWallet = (wallets, authMode, environmentId, enableVisitTrackingO
         }
     }), [setConnectedStates, wallets]);
     React.useEffect(() => {
-        if (authMode === 'connect-only' && connectedInfo && !connectedWallet) {
-            if (connectedInfo.walletPublicKey &&
-                connectedInfo.name &&
-                connectedInfo.chain) {
-                const { name, walletPublicKey, chain } = connectedInfo;
-                connectWalletByAddressAndChain(name, walletPublicKey, chain);
-            }
+        const shouldUpdateConnectedWalletsState = authMode === 'connect-only' && connectedWalletsInfo.length;
+        if (shouldUpdateConnectedWalletsState) {
+            connectedWalletsInfo.forEach(({ name, walletPublicKey, chain }) => {
+                if (chain) {
+                    connectWalletByAddressAndChain(name, walletPublicKey, chain);
+                }
+            });
         }
     }, [
         authMode,
         connectWalletByAddressAndChain,
-        connectedInfo,
-        connectedWallet,
+        connectedWallets.length,
+        connectedWalletsInfo,
     ]);
     const shouldSkipCreatingVisit = React.useMemo(() => (authMode === 'connect-only' && !enableVisitTrackingOnConnectOnly) ||
         connectedWallet, [authMode, connectedWallet, enableVisitTrackingOnConnectOnly]);
@@ -86,6 +123,11 @@ const useConnectWallet = (wallets, authMode, environmentId, enableVisitTrackingO
             throw error;
         }
         const chain = walletConnector.connectedChain || '';
+        // 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)}`);
+        }
         setConnectedStates(walletConnector, publicWalletAddress, chain);
         if (shouldSkipCreatingVisit) {
             return publicWalletAddress;
@@ -103,14 +145,24 @@ const useConnectWallet = (wallets, authMode, environmentId, enableVisitTrackingO
         });
         return publicWalletAddress;
     });
+    const unlinkConnectedWallet = (walletId) => {
+        const filteredWallets = connectedWalletsInfo.filter((wallet) => wallet.id !== walletId);
+        if (walletId === primaryWalletId) {
+            clearPrimaryWalletId();
+        }
+        setConnectedWalletsInfo(filteredWallets);
+    };
+    const getConnectedWalletById = React.useCallback((walletId) => connectedWallets.find((wallet) => wallet.id === walletId), [connectedWallets]);
     return {
         connectWallet,
         connectWalletByAddressAndChain,
-        connectedInfo,
         connectedWallet,
-        removeConnectedInfo,
-        setConnectedInfo,
+        connectedWallets,
+        connectedWalletsInfo,
+        getConnectedWalletById,
+        removeConnectedWalletsInfo,
         setConnectedWallet,
+        unlinkConnectedWallet,
     };
 };
 

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

@@ -6,13 +6,26 @@ export type ConnectedWalletConnectorType = {
     name: string;
     provider: string;
     walletPublicKey: string;
+    id: string;
 };
-export declare const useConnectWallet: (wallets: WalletOption[], authMode: AuthModeType, environmentId: string, enableVisitTrackingOnConnectOnly: boolean) => {
+type Props = {
+    authMode: AuthModeType;
+    clearPrimaryWalletId: () => void;
+    enableVisitTrackingOnConnectOnly: boolean;
+    environmentId: string;
+    primaryWalletId: string | undefined;
+    setPrimaryWalletId: (walletId: string) => void;
+    wallets: WalletOption[];
+};
+export declare const useConnectWallet: ({ authMode, clearPrimaryWalletId, enableVisitTrackingOnConnectOnly, environmentId, primaryWalletId, setPrimaryWalletId, wallets, }: Props) => {
     connectWallet: (walletConnector: WalletConnector, fetchPublicAddressOpts?: FetchPublicAddressOpts) => Promise<string>;
     connectWalletByAddressAndChain: (name: string, address: string, chain: Chain) => Promise<void>;
-    connectedInfo: ConnectedWalletConnectorType | null;
     connectedWallet: Wallet | null;
-    removeConnectedInfo: () => void;
-    setConnectedInfo: (value: ConnectedWalletConnectorType | ((val: ConnectedWalletConnectorType | null) => ConnectedWalletConnectorType | null) | null) => void;
+    connectedWallets: Wallet[];
+    connectedWalletsInfo: [] | ConnectedWalletConnectorType[];
+    getConnectedWalletById: (walletId: string) => Wallet | undefined;
+    removeConnectedWalletsInfo: () => void;
     setConnectedWallet: import("react").Dispatch<import("react").SetStateAction<Wallet | null>>;
+    unlinkConnectedWallet: (walletId: string) => void;
 };
+export {};

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

@@ -1,16 +1,16 @@
 import { __awaiter } from '../../../../../_virtual/_tslib.js';
-import { useState, useCallback, useEffect, useMemo } from 'react';
+import { useState, useCallback, useMemo, useEffect } from 'react';
 import { getWalletConnectorByName, isSameAddress } from '@dynamic-labs/wallet-connector-core';
 import '@dynamic-labs/sdk-api';
 import '../../../shared/logger.js';
-import '../../../config/LSSuffix.js';
 import '@dynamic-labs/iconic';
 import 'react/jsx-runtime';
 import '../../../context/ViewContext/ViewContext.js';
 import '@dynamic-labs/wallet-book';
 import '@dynamic-labs/utils';
-import { CONNECTED_WALLET_CONNECTOR_DATA } from '../../constants/localStorage.js';
+import { CONNECTED_WALLETS_INFO } from '../../constants/localStorage.js';
 import '../../constants/colors.js';
+import '../../../shared/utils/classes/storage/localStorage.js';
 import 'ethers';
 import { useLocalStorage } from '../../../shared/utils/hooks/useLocalStorage/useLocalStorage.js';
 import '../../../shared/consts/index.js';
@@ -19,9 +19,36 @@ import { createVisit } from '../../../data/api.js';
 import '@dynamic-labs/multi-wallet';
 import { shouldManuallyReconnectOnRefresh } from '../../functions/shouldManuallyReconnectOnRefresh/shouldManuallyReconnectOnRefresh.js';
 
-const useConnectWallet = (wallets, authMode, environmentId, enableVisitTrackingOnConnectOnly) => {
-    const [connectedInfo, setConnectedInfo, removeConnectedInfo] = useLocalStorage(CONNECTED_WALLET_CONNECTOR_DATA, null);
+const useConnectWallet = ({ authMode, clearPrimaryWalletId, enableVisitTrackingOnConnectOnly, environmentId, primaryWalletId, setPrimaryWalletId, wallets, }) => {
+    const [connectedWalletsInfo, setConnectedWalletsInfo, removeConnectedWalletsInfo,] = useLocalStorage(CONNECTED_WALLETS_INFO, []);
     const [connectedWallet, setConnectedWallet] = useState(null);
+    const getNextIdAvailable = useCallback((currentWallets) => {
+        const existingIds = currentWallets.map(({ id }) => id);
+        const sortedIds = existingIds
+            .map((id) => Number(id.replace('connect-only-wallet-', '')))
+            .sort((a, b) => a - b);
+        for (let i = 0; i < sortedIds.length; i++) {
+            if (sortedIds[i] !== i) {
+                return i;
+            }
+        }
+        return sortedIds.length;
+    }, []);
+    const connectedWallets = useMemo(() => connectedWalletsInfo
+        .map((connectedWallet) => {
+        const walletConnector = getWalletConnectorByName(wallets.map((wallet) => wallet.walletConnector), connectedWallet.name);
+        if (!walletConnector) {
+            return null;
+        }
+        return {
+            address: connectedWallet.walletPublicKey,
+            chain: connectedWallet.chain,
+            connected: true,
+            connector: walletConnector,
+            id: connectedWallet.id,
+        };
+    })
+        .filter((wc) => wc !== null), [connectedWalletsInfo, wallets]);
     const setConnectedStates = useCallback((walletConnector, address, chain) => {
         setConnectedWallet({
             address,
@@ -30,13 +57,23 @@ const useConnectWallet = (wallets, authMode, environmentId, enableVisitTrackingO
             connector: walletConnector,
             id: 'connect-only-wallet',
         });
-        setConnectedInfo({
-            chain,
-            name: walletConnector.name,
-            provider: getWalletProvider(walletConnector),
-            walletPublicKey: address,
+        setConnectedWalletsInfo((currentWallets) => {
+            const exists = currentWallets.some((currentWallet) => currentWallet.walletPublicKey === address);
+            if (exists) {
+                return currentWallets;
+            }
+            return [
+                ...currentWallets,
+                {
+                    chain,
+                    id: `connect-only-wallet-${getNextIdAvailable(currentWallets)}`,
+                    name: walletConnector.name,
+                    provider: getWalletProvider(walletConnector),
+                    walletPublicKey: address,
+                },
+            ];
         });
-    }, [setConnectedInfo]);
+    }, [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) {
@@ -58,19 +95,19 @@ const useConnectWallet = (wallets, authMode, environmentId, enableVisitTrackingO
         }
     }), [setConnectedStates, wallets]);
     useEffect(() => {
-        if (authMode === 'connect-only' && connectedInfo && !connectedWallet) {
-            if (connectedInfo.walletPublicKey &&
-                connectedInfo.name &&
-                connectedInfo.chain) {
-                const { name, walletPublicKey, chain } = connectedInfo;
-                connectWalletByAddressAndChain(name, walletPublicKey, chain);
-            }
+        const shouldUpdateConnectedWalletsState = authMode === 'connect-only' && connectedWalletsInfo.length;
+        if (shouldUpdateConnectedWalletsState) {
+            connectedWalletsInfo.forEach(({ name, walletPublicKey, chain }) => {
+                if (chain) {
+                    connectWalletByAddressAndChain(name, walletPublicKey, chain);
+                }
+            });
         }
     }, [
         authMode,
         connectWalletByAddressAndChain,
-        connectedInfo,
-        connectedWallet,
+        connectedWallets.length,
+        connectedWalletsInfo,
     ]);
     const shouldSkipCreatingVisit = useMemo(() => (authMode === 'connect-only' && !enableVisitTrackingOnConnectOnly) ||
         connectedWallet, [authMode, connectedWallet, enableVisitTrackingOnConnectOnly]);
@@ -82,6 +119,11 @@ const useConnectWallet = (wallets, authMode, environmentId, enableVisitTrackingO
             throw error;
         }
         const chain = walletConnector.connectedChain || '';
+        // 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)}`);
+        }
         setConnectedStates(walletConnector, publicWalletAddress, chain);
         if (shouldSkipCreatingVisit) {
             return publicWalletAddress;
@@ -99,14 +141,24 @@ const useConnectWallet = (wallets, authMode, environmentId, enableVisitTrackingO
         });
         return publicWalletAddress;
     });
+    const unlinkConnectedWallet = (walletId) => {
+        const filteredWallets = connectedWalletsInfo.filter((wallet) => wallet.id !== walletId);
+        if (walletId === primaryWalletId) {
+            clearPrimaryWalletId();
+        }
+        setConnectedWalletsInfo(filteredWallets);
+    };
+    const getConnectedWalletById = useCallback((walletId) => connectedWallets.find((wallet) => wallet.id === walletId), [connectedWallets]);
     return {
         connectWallet,
         connectWalletByAddressAndChain,
-        connectedInfo,
         connectedWallet,
-        removeConnectedInfo,
-        setConnectedInfo,
+        connectedWallets,
+        connectedWalletsInfo,
+        getConnectedWalletById,
+        removeConnectedWalletsInfo,
         setConnectedWallet,
+        unlinkConnectedWallet,
     };
 };
 

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

@@ -6,7 +6,6 @@ var _tslib = require('../../../../../_virtual/_tslib.cjs');
 var React = require('react');
 require('@dynamic-labs/sdk-api');
 var logger = require('../../../shared/logger.cjs');
-require('../../../config/LSSuffix.cjs');
 require('@dynamic-labs/iconic');
 require('@dynamic-labs/wallet-connector-core');
 require('react/jsx-runtime');
@@ -14,6 +13,7 @@ require('../../../context/ViewContext/ViewContext.cjs');
 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');
 var ErrorContext = require('../../../context/ErrorContext/ErrorContext.cjs');

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

@@ -2,7 +2,6 @@ import { __awaiter } from '../../../../../_virtual/_tslib.js';
 import { useState, useEffect } from 'react';
 import '@dynamic-labs/sdk-api';
 import { logger } from '../../../shared/logger.js';
-import '../../../config/LSSuffix.js';
 import '@dynamic-labs/iconic';
 import '@dynamic-labs/wallet-connector-core';
 import 'react/jsx-runtime';
@@ -10,6 +9,7 @@ import '../../../context/ViewContext/ViewContext.js';
 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 { useErrorContext } from '../../../context/ErrorContext/ErrorContext.js';