@dynamic-labs/sdk-react-core 0.18.0-RC.6 → 0.18.0-RC.8

package/src/lib/utils/hooks/authenticationHooks/useConnectAndSignSplitSteps/useConnectAndSignSplitSteps.cjs

@@ -10,7 +10,7 @@ var useVerifyWallet = require('../../useVerifyWallet/useVerifyWallet.cjs');
 var showPendingConnectView = require('../helpers/showPendingConnectView.cjs');
 var isConnectOnly = require('../helpers/isConnectOnly.cjs');
 require('@dynamic-labs/sdk-api');
-require('../../../../shared/logger.cjs');
+var logger = require('../../../../shared/logger.cjs');
 require('@dynamic-labs/iconic');
 require('@dynamic-labs/wallet-connector-core');
 require('react/jsx-runtime');
@@ -61,6 +61,7 @@ const useConnectAndSignSplitSteps = () => {
             setView('pending-signature');
         }
         catch (err) {
+            logger.logger.debug(err);
             setErrorMessage(err.toString());
             goToInitialView();
             return;
@@ -78,6 +79,7 @@ const useConnectAndSignSplitSteps = () => {
             });
         }
         catch (err) {
+            logger.logger.debug(err);
             setErrorMessage(err.toString());
             goToInitialView();
             return;

package/src/lib/utils/hooks/authenticationHooks/useConnectAndSignSplitSteps/useConnectAndSignSplitSteps.js

@@ -6,7 +6,7 @@ import { useVerifyWallet } from '../../useVerifyWallet/useVerifyWallet.js';
 import { showPendingConnectView } from '../helpers/showPendingConnectView.js';
 import { isConnectOnly } from '../helpers/isConnectOnly.js';
 import '@dynamic-labs/sdk-api';
-import '../../../../shared/logger.js';
+import { logger } from '../../../../shared/logger.js';
 import '@dynamic-labs/iconic';
 import '@dynamic-labs/wallet-connector-core';
 import 'react/jsx-runtime';
@@ -57,6 +57,7 @@ const useConnectAndSignSplitSteps = () => {
             setView('pending-signature');
         }
         catch (err) {
+            logger.debug(err);
             setErrorMessage(err.toString());
             goToInitialView();
             return;
@@ -74,6 +75,7 @@ const useConnectAndSignSplitSteps = () => {
             });
         }
         catch (err) {
+            logger.debug(err);
             setErrorMessage(err.toString());
             goToInitialView();
             return;

package/src/lib/utils/hooks/authenticationHooks/useSignConnectOnlyUser/useSignConnectOnlyUser.cjs

@@ -7,6 +7,18 @@ var useInternalDynamicContext = require('../../../../context/DynamicContext/useI
 var ViewContext = require('../../../../context/ViewContext/ViewContext.cjs');
 var ErrorContext = require('../../../../context/ErrorContext/ErrorContext.cjs');
 var useVerifyWallet = require('../../useVerifyWallet/useVerifyWallet.cjs');
+require('@dynamic-labs/sdk-api');
+var logger = require('../../../../shared/logger.cjs');
+require('@dynamic-labs/iconic');
+require('@dynamic-labs/wallet-connector-core');
+require('react/jsx-runtime');
+require('react');
+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');
 
 const useSignConnectOnlyUser = () => {
     const { setView } = ViewContext.useViewContext();
@@ -37,6 +49,7 @@ const useSignConnectOnlyUser = () => {
             });
         }
         catch (err) {
+            logger.logger.debug(err);
             setErrorMessage(err.toString());
             setShowAuthFlow(false);
             return;

package/src/lib/utils/hooks/authenticationHooks/useSignConnectOnlyUser/useSignConnectOnlyUser.js

@@ -3,6 +3,18 @@ import { useInternalDynamicContext } from '../../../../context/DynamicContext/us
 import { useViewContext } from '../../../../context/ViewContext/ViewContext.js';
 import { useErrorContext } from '../../../../context/ErrorContext/ErrorContext.js';
 import { useVerifyWallet } from '../../useVerifyWallet/useVerifyWallet.js';
+import '@dynamic-labs/sdk-api';
+import { logger } from '../../../../shared/logger.js';
+import '@dynamic-labs/iconic';
+import '@dynamic-labs/wallet-connector-core';
+import 'react/jsx-runtime';
+import 'react';
+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';
 
 const useSignConnectOnlyUser = () => {
     const { setView } = useViewContext();
@@ -33,6 +45,7 @@ const useSignConnectOnlyUser = () => {
             });
         }
         catch (err) {
+            logger.debug(err);
             setErrorMessage(err.toString());
             setShowAuthFlow(false);
             return;

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

@@ -24,3 +24,7 @@ export { useColorSchemePreference } from './useColorSchemePreference';
 export { useGetSocialIcon } from './useGetSocialIcon';
 export { useIconThemeVariant } from './useIconThemeVariant';
 export type { IconThemeVariant } from './useIconThemeVariant';
+export { useIsomorphicLayoutEffect } from './useIsomorphicLayoutEffect/useIsomorphicLayoutEffect';
+export { useTimeout } from './useTimeout/useTimeout';
+export { useInterval } from './useInterval/useInterval';
+export { useCountdown } from './useCountdown/useCountdown';

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

@@ -5,8 +5,12 @@ Object.defineProperty(exports, '__esModule', { value: true });
 var React = require('react');
 var walletConnectorCore = require('@dynamic-labs/wallet-connector-core');
 var isWalletLinked = require('../../../functions/isWalletLinked/isWalletLinked.cjs');
+var ViewContext = require('../../../../context/ViewContext/ViewContext.cjs');
+var useInternalDynamicContext = require('../../../../context/DynamicContext/useInternalDynamicContext.cjs');
 
 const useSyncPrimaryWallet = ({ computeConnectedStateForWallets, handleLogOut, multiWalletWidgetState, primaryWallet, secondaryWallets, setMultiWalletWidgetState, setPrimaryWallet, setShowWidgetStatePopup, showWidgetStatePopup, canSync = true, }) => {
+    const { setShowAuthFlow } = useInternalDynamicContext.useInternalDynamicContext();
+    const { setView } = ViewContext.useViewContext();
     const handlePrimaryWalletNotActive = React.useCallback((connectedAddress) => {
         if (!primaryWallet)
             return;
@@ -72,7 +76,9 @@ const useSyncPrimaryWallet = ({ computeConnectedStateForWallets, handleLogOut, m
                 computeConnectedStateForWallets();
                 return;
             }
-            handleLogOut();
+            // no wallet is connected
+            setShowAuthFlow(true);
+            setView('wallet-locked-view');
         });
     }, [
         primaryWallet,
@@ -84,6 +90,8 @@ const useSyncPrimaryWallet = ({ computeConnectedStateForWallets, handleLogOut, m
         handleLogOut,
         setPrimaryWallet,
         canSync,
+        setView,
+        setShowAuthFlow,
     ]);
 };
 

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

@@ -1,8 +1,12 @@
 import { useCallback, useEffect } from 'react';
 import { isSameAddress } from '@dynamic-labs/wallet-connector-core';
 import { isWalletLinked } from '../../../functions/isWalletLinked/isWalletLinked.js';
+import { useViewContext } from '../../../../context/ViewContext/ViewContext.js';
+import { useInternalDynamicContext } from '../../../../context/DynamicContext/useInternalDynamicContext.js';
 
 const useSyncPrimaryWallet = ({ computeConnectedStateForWallets, handleLogOut, multiWalletWidgetState, primaryWallet, secondaryWallets, setMultiWalletWidgetState, setPrimaryWallet, setShowWidgetStatePopup, showWidgetStatePopup, canSync = true, }) => {
+    const { setShowAuthFlow } = useInternalDynamicContext();
+    const { setView } = useViewContext();
     const handlePrimaryWalletNotActive = useCallback((connectedAddress) => {
         if (!primaryWallet)
             return;
@@ -68,7 +72,9 @@ const useSyncPrimaryWallet = ({ computeConnectedStateForWallets, handleLogOut, m
                 computeConnectedStateForWallets();
                 return;
             }
-            handleLogOut();
+            // no wallet is connected
+            setShowAuthFlow(true);
+            setView('wallet-locked-view');
         });
     }, [
         primaryWallet,
@@ -80,6 +86,8 @@ const useSyncPrimaryWallet = ({ computeConnectedStateForWallets, handleLogOut, m
         handleLogOut,
         setPrimaryWallet,
         canSync,
+        setView,
+        setShowAuthFlow,
     ]);
 };
 

package/src/lib/utils/hooks/useAuthLayoutChecks/index.d.ts

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

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

@@ -0,0 +1,68 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var useInternalDynamicContext = require('../../../context/DynamicContext/useInternalDynamicContext.cjs');
+var MockContext = require('../../../context/MockContext/MockContext.cjs');
+var ViewContext = require('../../../context/ViewContext/ViewContext.cjs');
+var isUserLinkingWallet = require('../../../shared/utils/functions/isUserLinkingWallet/isUserLinkingWallet.cjs');
+var QrCodeContext = require('../../../context/QrCodeContext/QrCodeContext.cjs');
+var getDynamicLayoutData = require('../../functions/getDynamicLayoutData/getDynamicLayoutData.cjs');
+
+const useAuthLayoutChecks = (walletConnector) => {
+    const { view } = ViewContext.useViewContext();
+    const { user, privacyPolicyUrl, termsOfServiceUrl } = useInternalDynamicContext.useInternalDynamicContext();
+    const { showQrCodeMessage, showQrCodeImage } = QrCodeContext.useQrCodeContext();
+    const { mockedSDK } = MockContext.useMockContext();
+    const { helpHeaderData } = getDynamicLayoutData.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.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 !== 'email-wallet-otp-verification-view';
+    const showToSFooter = Boolean(!isUserLinkingWallet.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,
+        showHeader,
+        showHelpContent,
+        showQrCodePreHeader,
+        showToSFooter,
+    };
+};
+
+exports.useAuthLayoutChecks = useAuthLayoutChecks;

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

@@ -0,0 +1,10 @@
+import { WalletConnector } from '@dynamic-labs/wallet-connector-core';
+export declare const useAuthLayoutChecks: (walletConnector?: WalletConnector | null) => {
+    isWalletListTypeView: boolean;
+    showBackButton: boolean;
+    showCloseButton: boolean;
+    showHeader: boolean;
+    showHelpContent: boolean;
+    showQrCodePreHeader: boolean;
+    showToSFooter: boolean;
+};

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

@@ -0,0 +1,64 @@
+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 } = 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 !== 'email-wallet-otp-verification-view';
+    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,
+        showHeader,
+        showHelpContent,
+        showQrCodePreHeader,
+        showToSFooter,
+    };
+};
+
+export { useAuthLayoutChecks };

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

@@ -23,7 +23,7 @@ var api = require('../../../data/api.cjs');
 require('@dynamic-labs/multi-wallet');
 var shouldManuallyReconnectOnRefresh = require('../../functions/shouldManuallyReconnectOnRefresh/shouldManuallyReconnectOnRefresh.cjs');
 
-const useConnectWallet = (wallets, authMode, environmentId, enableVisitTrackingOnConnectOnly, primaryWalletId, setPrimaryWalletId) => {
+const useConnectWallet = ({ authMode, clearPrimaryWalletId, enableVisitTrackingOnConnectOnly, environmentId, primaryWalletId, setPrimaryWalletId, wallets, user, }) => {
     const [connectedWalletsInfo, setConnectedWalletsInfo, removeConnectedWalletsInfo,] = useLocalStorage.useLocalStorage(localStorage.CONNECTED_WALLETS_INFO, []);
     const [connectedWallet, setConnectedWallet] = React.useState(null);
     const [connectedWallets, setConnectedWallets] = React.useState([]);
@@ -37,9 +37,11 @@ const useConnectWallet = (wallets, authMode, environmentId, enableVisitTrackingO
         });
         setConnectedWallets((currentWallets) => {
             const exists = currentWallets.some((currentWallet) => walletConnectorCore.isSameAddress(currentWallet.address, address, chain));
-            if (currentWallets.length === 0 &&
-                authMode === 'connect-only' &&
-                !primaryWalletId) {
+            // when we connect first wallet, it should be set as a primary wallet
+            const shouldSetPrimaryWalletId = authMode === 'connect-only' &&
+                currentWallets.length === 0 &&
+                !primaryWalletId;
+            if (shouldSetPrimaryWalletId) {
                 setPrimaryWalletId(`connect-only-wallet-${0}`);
             }
             if (exists) {
@@ -65,6 +67,7 @@ const useConnectWallet = (wallets, authMode, environmentId, enableVisitTrackingO
                 ...currentWallets,
                 {
                     chain,
+                    id: `connect-only-wallet-${id}`,
                     name: walletConnector.name,
                     provider: getWalletProvider.getWalletProvider(walletConnector),
                     walletPublicKey: address,
@@ -72,6 +75,16 @@ const useConnectWallet = (wallets, authMode, environmentId, enableVisitTrackingO
             ];
         });
     }, [authMode, primaryWalletId, setConnectedWalletsInfo, setPrimaryWalletId]);
+    React.useEffect(() => {
+        const found = connectedWalletsInfo.find((connectedWalletInfo) => connectedWalletInfo.id !== primaryWalletId);
+        // when primaryWalletId is defined, but it does not exist in
+        // connectedWalletInfo that means we're out of sync and we want to remove all connected wallets data
+        if (primaryWalletId && !found && !user) {
+            removeConnectedWalletsInfo();
+            setConnectedWallets([]);
+            clearPrimaryWalletId();
+        }
+    }, []);
     const connectWalletByAddressAndChain = React.useCallback((name, address, chain, id) => _tslib.__awaiter(void 0, void 0, void 0, function* () {
         const walletConnector = walletConnectorCore.getWalletConnectorByName(wallets.map((wallet) => wallet.walletConnector), name);
         if (walletConnector) {
@@ -93,9 +106,10 @@ const useConnectWallet = (wallets, authMode, environmentId, enableVisitTrackingO
         }
     }), [setConnectedStates, wallets]);
     React.useEffect(() => {
-        if (authMode === 'connect-only' &&
+        const shouldUpdateConnectedWalletsState = authMode === 'connect-only' &&
             connectedWalletsInfo.length &&
-            !connectedWallets.length) {
+            !connectedWallets.length;
+        if (shouldUpdateConnectedWalletsState) {
             connectedWalletsInfo.forEach(({ name, walletPublicKey, chain }, id) => {
                 if (chain) {
                     connectWalletByAddressAndChain(name, walletPublicKey, chain, id);

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

@@ -1,13 +1,24 @@
 /// <reference types="react" />
 import { Chain, FetchPublicAddressOpts, WalletConnector } from '@dynamic-labs/wallet-connector-core';
-import { AuthModeType, Wallet, WalletOption } from '../../../shared';
+import { AuthModeType, UserProfile, Wallet, WalletOption } from '../../../shared';
 export type ConnectedWalletConnectorType = {
     chain: Chain | undefined;
     name: string;
     provider: string;
     walletPublicKey: string;
+    id: string;
 };
-export declare const useConnectWallet: (wallets: WalletOption[], authMode: AuthModeType, environmentId: string, enableVisitTrackingOnConnectOnly: boolean, primaryWalletId: string | undefined, setPrimaryWalletId: (walletId: string) => void) => {
+type Props = {
+    authMode: AuthModeType;
+    clearPrimaryWalletId: () => void;
+    enableVisitTrackingOnConnectOnly: boolean;
+    environmentId: string;
+    primaryWalletId: string | undefined;
+    setPrimaryWalletId: (walletId: string) => void;
+    wallets: WalletOption[];
+    user: UserProfile | undefined;
+};
+export declare const useConnectWallet: ({ authMode, clearPrimaryWalletId, enableVisitTrackingOnConnectOnly, environmentId, primaryWalletId, setPrimaryWalletId, wallets, user, }: Props) => {
     connectWallet: (walletConnector: WalletConnector, fetchPublicAddressOpts?: FetchPublicAddressOpts) => Promise<string>;
     connectWalletByAddressAndChain: (name: string, address: string, chain: Chain, id?: number) => Promise<void>;
     connectedWallet: Wallet | null;
@@ -17,3 +28,4 @@ export declare const useConnectWallet: (wallets: WalletOption[], authMode: AuthM
     setConnectedWallet: import("react").Dispatch<import("react").SetStateAction<Wallet | null>>;
     setConnectedWallets: import("react").Dispatch<import("react").SetStateAction<[] | Wallet[]>>;
 };
+export {};

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

@@ -19,7 +19,7 @@ import { createVisit } from '../../../data/api.js';
 import '@dynamic-labs/multi-wallet';
 import { shouldManuallyReconnectOnRefresh } from '../../functions/shouldManuallyReconnectOnRefresh/shouldManuallyReconnectOnRefresh.js';
 
-const useConnectWallet = (wallets, authMode, environmentId, enableVisitTrackingOnConnectOnly, primaryWalletId, setPrimaryWalletId) => {
+const useConnectWallet = ({ authMode, clearPrimaryWalletId, enableVisitTrackingOnConnectOnly, environmentId, primaryWalletId, setPrimaryWalletId, wallets, user, }) => {
     const [connectedWalletsInfo, setConnectedWalletsInfo, removeConnectedWalletsInfo,] = useLocalStorage(CONNECTED_WALLETS_INFO, []);
     const [connectedWallet, setConnectedWallet] = useState(null);
     const [connectedWallets, setConnectedWallets] = useState([]);
@@ -33,9 +33,11 @@ const useConnectWallet = (wallets, authMode, environmentId, enableVisitTrackingO
         });
         setConnectedWallets((currentWallets) => {
             const exists = currentWallets.some((currentWallet) => isSameAddress(currentWallet.address, address, chain));
-            if (currentWallets.length === 0 &&
-                authMode === 'connect-only' &&
-                !primaryWalletId) {
+            // when we connect first wallet, it should be set as a primary wallet
+            const shouldSetPrimaryWalletId = authMode === 'connect-only' &&
+                currentWallets.length === 0 &&
+                !primaryWalletId;
+            if (shouldSetPrimaryWalletId) {
                 setPrimaryWalletId(`connect-only-wallet-${0}`);
             }
             if (exists) {
@@ -61,6 +63,7 @@ const useConnectWallet = (wallets, authMode, environmentId, enableVisitTrackingO
                 ...currentWallets,
                 {
                     chain,
+                    id: `connect-only-wallet-${id}`,
                     name: walletConnector.name,
                     provider: getWalletProvider(walletConnector),
                     walletPublicKey: address,
@@ -68,6 +71,16 @@ const useConnectWallet = (wallets, authMode, environmentId, enableVisitTrackingO
             ];
         });
     }, [authMode, primaryWalletId, setConnectedWalletsInfo, setPrimaryWalletId]);
+    useEffect(() => {
+        const found = connectedWalletsInfo.find((connectedWalletInfo) => connectedWalletInfo.id !== primaryWalletId);
+        // when primaryWalletId is defined, but it does not exist in
+        // connectedWalletInfo that means we're out of sync and we want to remove all connected wallets data
+        if (primaryWalletId && !found && !user) {
+            removeConnectedWalletsInfo();
+            setConnectedWallets([]);
+            clearPrimaryWalletId();
+        }
+    }, []);
     const connectWalletByAddressAndChain = useCallback((name, address, chain, id) => __awaiter(void 0, void 0, void 0, function* () {
         const walletConnector = getWalletConnectorByName(wallets.map((wallet) => wallet.walletConnector), name);
         if (walletConnector) {
@@ -89,9 +102,10 @@ const useConnectWallet = (wallets, authMode, environmentId, enableVisitTrackingO
         }
     }), [setConnectedStates, wallets]);
     useEffect(() => {
-        if (authMode === 'connect-only' &&
+        const shouldUpdateConnectedWalletsState = authMode === 'connect-only' &&
             connectedWalletsInfo.length &&
-            !connectedWallets.length) {
+            !connectedWallets.length;
+        if (shouldUpdateConnectedWalletsState) {
             connectedWalletsInfo.forEach(({ name, walletPublicKey, chain }, id) => {
                 if (chain) {
                     connectWalletByAddressAndChain(name, walletPublicKey, chain, id);

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

@@ -0,0 +1,39 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var React = require('react');
+
+const useCountdown = ({ callback, seconds }) => {
+    const [remainingSeconds, setRemainingSeconds] = React.useState(seconds);
+    const timeoutRef = React.useRef();
+    const startCountdown = () => {
+        if (timeoutRef.current) {
+            return setRemainingSeconds(seconds);
+        }
+        runCountdown();
+    };
+    const stopCountdown = () => {
+        clearTimeout(timeoutRef.current);
+        timeoutRef.current = undefined;
+    };
+    const runCountdown = () => {
+        timeoutRef.current = setTimeout(() => {
+            setRemainingSeconds((prevSeconds) => prevSeconds - 1);
+        }, 1000);
+    };
+    React.useEffect(() => {
+        if (!timeoutRef.current)
+            return;
+        if (remainingSeconds <= 0) {
+            if (callback)
+                callback();
+            return;
+        }
+        runCountdown();
+        return () => clearTimeout(timeoutRef.current);
+    }, [remainingSeconds, callback]);
+    return { remainingSeconds, startCountdown, stopCountdown };
+};
+
+exports.useCountdown = useCountdown;

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

@@ -0,0 +1,11 @@
+type Prop = {
+    callback?: () => void;
+    seconds: number;
+};
+export interface UseCountdown {
+    remainingSeconds: number;
+    startCountdown: () => void;
+    stopCountdown: () => void;
+}
+export declare const useCountdown: ({ callback, seconds }: Prop) => UseCountdown;
+export {};