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

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

@@ -0,0 +1,35 @@
+import { useState, useRef, useEffect } from 'react';
+
+const useCountdown = ({ callback, seconds }) => {
+    const [remainingSeconds, setRemainingSeconds] = useState(seconds);
+    const timeoutRef = 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);
+    };
+    useEffect(() => {
+        if (!timeoutRef.current)
+            return;
+        if (remainingSeconds <= 0) {
+            if (callback)
+                callback();
+            return;
+        }
+        runCountdown();
+        return () => clearTimeout(timeoutRef.current);
+    }, [remainingSeconds, callback]);
+    return { remainingSeconds, startCountdown, stopCountdown };
+};
+
+export { useCountdown };

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

@@ -2,6 +2,7 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
+var _tslib = require('../../../../../_virtual/_tslib.cjs');
 var React = require('react');
 var useInternalDynamicContext = require('../../../context/DynamicContext/useInternalDynamicContext.cjs');
 var ViewContext = require('../../../context/ViewContext/ViewContext.cjs');
@@ -24,18 +25,18 @@ require('@dynamic-labs/sdk-api');
 const useCreateUserProfileByJWTCallback = () => {
     const { setUser, handleLogOut } = useInternalDynamicContext.useInternalDynamicContext();
     const { goToInitialView } = ViewContext.useViewContext();
-    const createUserProfileByJWT = React.useCallback((jwt) => {
+    const createUserProfileByJWT = React.useCallback((jwt) => _tslib.__awaiter(void 0, void 0, void 0, function* () {
         const decodedJWT = decodeJwt.decodeJwt(jwt);
         if (!decodedJWT) {
-            handleLogOut();
+            yield handleLogOut();
             goToInitialView();
             return;
         }
+        index.storeAuthToken(jwt);
         const userProfile = createUserProfile.createUserProfile(decodedJWT);
         setUser(userProfile);
-        index.storeAuthToken(jwt);
         // eslint-disable-next-line react-hooks/exhaustive-deps
-    }, []);
+    }), []);
     return { createUserProfileByJWT };
 };
 

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

@@ -1,3 +1,3 @@
 export declare const useCreateUserProfileByJWTCallback: () => {
-    createUserProfileByJWT: (jwt: string) => void;
+    createUserProfileByJWT: (jwt: string) => Promise<void>;
 };

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

@@ -1,3 +1,4 @@
+import { __awaiter } from '../../../../../_virtual/_tslib.js';
 import { useCallback } from 'react';
 import { useInternalDynamicContext } from '../../../context/DynamicContext/useInternalDynamicContext.js';
 import { useViewContext } from '../../../context/ViewContext/ViewContext.js';
@@ -20,18 +21,18 @@ import '@dynamic-labs/sdk-api';
 const useCreateUserProfileByJWTCallback = () => {
     const { setUser, handleLogOut } = useInternalDynamicContext();
     const { goToInitialView } = useViewContext();
-    const createUserProfileByJWT = useCallback((jwt) => {
+    const createUserProfileByJWT = useCallback((jwt) => __awaiter(void 0, void 0, void 0, function* () {
         const decodedJWT = decodeJwt(jwt);
         if (!decodedJWT) {
-            handleLogOut();
+            yield handleLogOut();
             goToInitialView();
             return;
         }
+        storeAuthToken(jwt);
         const userProfile = createUserProfile(decodedJWT);
         setUser(userProfile);
-        storeAuthToken(jwt);
         // eslint-disable-next-line react-hooks/exhaustive-deps
-    }, []);
+    }), []);
     return { createUserProfileByJWT };
 };
 

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

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

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

@@ -0,0 +1,40 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var React = require('react');
+var useInternalDynamicContext = require('../../../context/DynamicContext/useInternalDynamicContext.cjs');
+
+// This hook can be used to get all of the user's scopes (nft/token gates)
+// and check if the user has a specific scopes with some logic AND/OR (nft/token gate)
+const useDynamicScopes = () => {
+    const { decodedAuthToken } = useInternalDynamicContext.useInternalDynamicContext();
+    const userScopes = React.useMemo(() => {
+        const { scope } = decodedAuthToken || {};
+        if (!scope)
+            return [];
+        // We need to split the scopes string into an array of scopes
+        // because the scopes string is a space separated string of scopes
+        // e.g. '"scope": "customerservice marketing tech"'
+        return scope.split(' ');
+    }, [decodedAuthToken]);
+    // If customer will set scopes to an empty string it will return false
+    const userHasScopes = (scopes, logicOperator = 'OR') => {
+        if (!scopes.length)
+            return false;
+        if (typeof scopes === 'string')
+            scopes = scopes.split(' ');
+        if (logicOperator === 'AND') {
+            // If the logic operator is AND, the user must have all of the scopes
+            // If the logic operator is OR, the user must have at least one of the scopes
+            return scopes.every((scope) => Boolean(userScopes.includes(scope)));
+        }
+        return scopes.some((scope) => Boolean(userScopes.includes(scope)));
+    };
+    return {
+        userHasScopes,
+        userScopes,
+    };
+};
+
+exports.useDynamicScopes = useDynamicScopes;

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

@@ -0,0 +1,6 @@
+type LogicGateOperators = 'AND' | 'OR';
+export declare const useDynamicScopes: () => {
+    userHasScopes: (scopes: string[] | string, logicOperator?: LogicGateOperators) => boolean;
+    userScopes: string[];
+};
+export {};

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

@@ -0,0 +1,36 @@
+import { useMemo } from 'react';
+import { useInternalDynamicContext } from '../../../context/DynamicContext/useInternalDynamicContext.js';
+
+// This hook can be used to get all of the user's scopes (nft/token gates)
+// and check if the user has a specific scopes with some logic AND/OR (nft/token gate)
+const useDynamicScopes = () => {
+    const { decodedAuthToken } = useInternalDynamicContext();
+    const userScopes = useMemo(() => {
+        const { scope } = decodedAuthToken || {};
+        if (!scope)
+            return [];
+        // We need to split the scopes string into an array of scopes
+        // because the scopes string is a space separated string of scopes
+        // e.g. '"scope": "customerservice marketing tech"'
+        return scope.split(' ');
+    }, [decodedAuthToken]);
+    // If customer will set scopes to an empty string it will return false
+    const userHasScopes = (scopes, logicOperator = 'OR') => {
+        if (!scopes.length)
+            return false;
+        if (typeof scopes === 'string')
+            scopes = scopes.split(' ');
+        if (logicOperator === 'AND') {
+            // If the logic operator is AND, the user must have all of the scopes
+            // If the logic operator is OR, the user must have at least one of the scopes
+            return scopes.every((scope) => Boolean(userScopes.includes(scope)));
+        }
+        return scopes.some((scope) => Boolean(userScopes.includes(scope)));
+    };
+    return {
+        userHasScopes,
+        userScopes,
+    };
+};
+
+export { useDynamicScopes };

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

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

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

@@ -0,0 +1,54 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var _tslib = require('../../../../../_virtual/_tslib.cjs');
+var sdkApi = require('@dynamic-labs/sdk-api');
+var useInternalDynamicContext = require('../../../context/DynamicContext/useInternalDynamicContext.cjs');
+var EmailVerificationContext = require('../../../context/EmailVerificationContext/EmailVerificationContext.cjs');
+var ViewContext = require('../../../context/ViewContext/ViewContext.cjs');
+var useWalletItemActions = require('../useWalletItemActions/useWalletItemActions.cjs');
+var useConnectWithEmail = require('../useConnectWithEmail/useConnectWithEmail.cjs');
+var api = require('../../../data/api.cjs');
+
+const useEmailProvider = ({ emailWalletConnector }) => {
+    const { projectSettings, environmentId } = useInternalDynamicContext.useInternalDynamicContext();
+    const { setEmail: setEmailForVerification, setVerificationUUID } = EmailVerificationContext.useEmailVerificationContext();
+    const { setView } = ViewContext.useViewContext();
+    const { handleInstalledExtensionClick } = useWalletItemActions.useWalletItemActions();
+    const { connectWithEmail, loading: isEmailProviderLoading } = useConnectWithEmail.useConnectWithEmail({
+        emailWalletConnector,
+        handleConnect: handleInstalledExtensionClick,
+    });
+    const { providers } = projectSettings || {};
+    const isInjectedWalletProviderEnabled = emailWalletConnector !== undefined;
+    const isMagicOrBloctoEnabled = isInjectedWalletProviderEnabled &&
+        Boolean(providers === null || providers === void 0 ? void 0 : providers.filter((provider) => provider.provider === sdkApi.ProviderEnum.MagicLink ||
+            provider.provider === sdkApi.ProviderEnum.Blocto).length);
+    const handleEmailOnlyLoginSubmit = (emailInput) => _tslib.__awaiter(void 0, void 0, void 0, function* () {
+        const { email, verificationUUID } = yield api.createEmailVerification({
+            email: emailInput,
+            environmentId,
+        });
+        setView('login-with-email-verification');
+        setEmailForVerification(email);
+        setVerificationUUID(verificationUUID);
+    });
+    const handleMagicLinkOrBloctoSubmit = (emailInput) => _tslib.__awaiter(void 0, void 0, void 0, function* () {
+        yield connectWithEmail(emailInput);
+    });
+    const submitEmail = (emailInput) => _tslib.__awaiter(void 0, void 0, void 0, function* () {
+        if (isMagicOrBloctoEnabled) {
+            yield handleMagicLinkOrBloctoSubmit(emailInput);
+            return;
+        }
+        yield handleEmailOnlyLoginSubmit(emailInput);
+    });
+    return {
+        handleEmailOnlyLoginSubmit,
+        isEmailProviderLoading,
+        submitEmail,
+    };
+};
+
+exports.useEmailProvider = useEmailProvider;

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

@@ -0,0 +1,10 @@
+import { IEmailWalletConnector } from '@dynamic-labs/wallet-connector-core';
+type Props = {
+    emailWalletConnector: IEmailWalletConnector | undefined;
+};
+export declare const useEmailProvider: ({ emailWalletConnector }: Props) => {
+    handleEmailOnlyLoginSubmit: (emailInput: string) => Promise<void>;
+    isEmailProviderLoading: boolean;
+    submitEmail: (emailInput: string) => Promise<void>;
+};
+export {};

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

@@ -0,0 +1,50 @@
+import { __awaiter } from '../../../../../_virtual/_tslib.js';
+import { ProviderEnum } from '@dynamic-labs/sdk-api';
+import { useInternalDynamicContext } from '../../../context/DynamicContext/useInternalDynamicContext.js';
+import { useEmailVerificationContext } from '../../../context/EmailVerificationContext/EmailVerificationContext.js';
+import { useViewContext } from '../../../context/ViewContext/ViewContext.js';
+import { useWalletItemActions } from '../useWalletItemActions/useWalletItemActions.js';
+import { useConnectWithEmail } from '../useConnectWithEmail/useConnectWithEmail.js';
+import { createEmailVerification } from '../../../data/api.js';
+
+const useEmailProvider = ({ emailWalletConnector }) => {
+    const { projectSettings, environmentId } = useInternalDynamicContext();
+    const { setEmail: setEmailForVerification, setVerificationUUID } = useEmailVerificationContext();
+    const { setView } = useViewContext();
+    const { handleInstalledExtensionClick } = useWalletItemActions();
+    const { connectWithEmail, loading: isEmailProviderLoading } = useConnectWithEmail({
+        emailWalletConnector,
+        handleConnect: handleInstalledExtensionClick,
+    });
+    const { providers } = projectSettings || {};
+    const isInjectedWalletProviderEnabled = emailWalletConnector !== undefined;
+    const isMagicOrBloctoEnabled = isInjectedWalletProviderEnabled &&
+        Boolean(providers === null || providers === void 0 ? void 0 : providers.filter((provider) => provider.provider === ProviderEnum.MagicLink ||
+            provider.provider === ProviderEnum.Blocto).length);
+    const handleEmailOnlyLoginSubmit = (emailInput) => __awaiter(void 0, void 0, void 0, function* () {
+        const { email, verificationUUID } = yield createEmailVerification({
+            email: emailInput,
+            environmentId,
+        });
+        setView('login-with-email-verification');
+        setEmailForVerification(email);
+        setVerificationUUID(verificationUUID);
+    });
+    const handleMagicLinkOrBloctoSubmit = (emailInput) => __awaiter(void 0, void 0, void 0, function* () {
+        yield connectWithEmail(emailInput);
+    });
+    const submitEmail = (emailInput) => __awaiter(void 0, void 0, void 0, function* () {
+        if (isMagicOrBloctoEnabled) {
+            yield handleMagicLinkOrBloctoSubmit(emailInput);
+            return;
+        }
+        yield handleEmailOnlyLoginSubmit(emailInput);
+    });
+    return {
+        handleEmailOnlyLoginSubmit,
+        isEmailProviderLoading,
+        submitEmail,
+    };
+};
+
+export { useEmailProvider };

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

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

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

@@ -0,0 +1,25 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var React = require('react');
+
+const useEventListener = (eventName, handler) => {
+    // Create a ref that stores handler
+    const savedHandler = React.useRef(handler);
+    React.useEffect(() => {
+        // Define the listening target
+        const targetElement = window;
+        if (!(targetElement && targetElement.addEventListener))
+            return;
+        // Create event listener that calls handler function stored in ref
+        const listener = (event) => savedHandler.current(event);
+        targetElement.addEventListener(eventName, listener);
+        // Remove event listener on cleanup
+        return () => {
+            targetElement.removeEventListener(eventName, listener);
+        };
+    }, [eventName]);
+};
+
+exports.useEventListener = useEventListener;

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

@@ -0,0 +1 @@
+export declare const useEventListener: (eventName: string, handler: (event: Event) => Promise<void> | void) => void;

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

@@ -0,0 +1,21 @@
+import { useRef, useEffect } from 'react';
+
+const useEventListener = (eventName, handler) => {
+    // Create a ref that stores handler
+    const savedHandler = useRef(handler);
+    useEffect(() => {
+        // Define the listening target
+        const targetElement = window;
+        if (!(targetElement && targetElement.addEventListener))
+            return;
+        // Create event listener that calls handler function stored in ref
+        const listener = (event) => savedHandler.current(event);
+        targetElement.addEventListener(eventName, listener);
+        // Remove event listener on cleanup
+        return () => {
+            targetElement.removeEventListener(eventName, listener);
+        };
+    }, [eventName]);
+};
+
+export { useEventListener };

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

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

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

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

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

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

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

@@ -17,17 +17,13 @@ require('ethers');
 var index = require('../../../shared/consts/index.cjs');
 
 const useFetchWalletsForChainsMap = (propsWalletsChainsMap) => {
-    const walletsForChainsMap = index.defaultWalletsForChains;
-    // Update default map only if is setup
-    React.useEffect(() => {
-        if (propsWalletsChainsMap) {
-            Object.assign(walletsForChainsMap, {
-                primary_chain: propsWalletsChainsMap.primary_chain,
-                wallets: Object.assign(Object.assign({}, index.defaultWalletsForChains.wallets), (Boolean(propsWalletsChainsMap.wallets) &&
-                    propsWalletsChainsMap.wallets)),
-            });
+    const walletsForChainsMap = React.useMemo(() => {
+        if (!propsWalletsChainsMap) {
+            return index.defaultWalletsForChains;
         }
-    }, []);
+        return Object.assign(Object.assign({}, index.defaultWalletsForChains), { primary_chain: propsWalletsChainsMap.primary_chain, wallets: Object.assign(Object.assign({}, index.defaultWalletsForChains.wallets), (Boolean(propsWalletsChainsMap.wallets) &&
+                propsWalletsChainsMap.wallets)) });
+    }, [propsWalletsChainsMap]);
     return { walletsForChainsMap };
 };
 

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

@@ -1,4 +1,4 @@
-import { useEffect } from 'react';
+import { useMemo } from 'react';
 import '@dynamic-labs/sdk-api';
 import '../../../shared/logger.js';
 import '@dynamic-labs/iconic';
@@ -13,17 +13,13 @@ import 'ethers';
 import { defaultWalletsForChains } from '../../../shared/consts/index.js';
 
 const useFetchWalletsForChainsMap = (propsWalletsChainsMap) => {
-    const walletsForChainsMap = defaultWalletsForChains;
-    // Update default map only if is setup
-    useEffect(() => {
-        if (propsWalletsChainsMap) {
-            Object.assign(walletsForChainsMap, {
-                primary_chain: propsWalletsChainsMap.primary_chain,
-                wallets: Object.assign(Object.assign({}, defaultWalletsForChains.wallets), (Boolean(propsWalletsChainsMap.wallets) &&
-                    propsWalletsChainsMap.wallets)),
-            });
+    const walletsForChainsMap = useMemo(() => {
+        if (!propsWalletsChainsMap) {
+            return defaultWalletsForChains;
         }
-    }, []);
+        return Object.assign(Object.assign({}, defaultWalletsForChains), { primary_chain: propsWalletsChainsMap.primary_chain, wallets: Object.assign(Object.assign({}, defaultWalletsForChains.wallets), (Boolean(propsWalletsChainsMap.wallets) &&
+                propsWalletsChainsMap.wallets)) });
+    }, [propsWalletsChainsMap]);
     return { walletsForChainsMap };
 };
 

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

@@ -6,13 +6,19 @@ var useInternalDynamicContext = require('../../../context/DynamicContext/useInte
 var ViewContext = require('../../../context/ViewContext/ViewContext.cjs');
 
 const useHandleWalletsToConnect = () => {
-    const { walletsToConnectByChain, setWalletsToConnectByChain, setShowAuthFlow, } = useInternalDynamicContext.useInternalDynamicContext();
-    const { setView } = ViewContext.useViewContext();
+    const { walletsToConnectByChain, setWalletsToConnectByChain, setShowAuthFlow, setIsFullyConnected, isFullyConnected, } = useInternalDynamicContext.useInternalDynamicContext();
+    const { setView, goToInitialView } = ViewContext.useViewContext();
     const handleWalletsToConnect = () => {
         if (!walletsToConnectByChain) {
+            setIsFullyConnected(true);
             setShowAuthFlow(false);
             return;
         }
+        // Avoid showing wallet-list when wallet updates network to the correct one in run time (bridge mode)
+        if (walletsToConnectByChain.length === 0) {
+            setShowAuthFlow(false);
+            return goToInitialView();
+        }
         const [firstWallet, ...restOfTheWallets] = walletsToConnectByChain;
         if (firstWallet.numberOfWallets > 1) {
             const updatedWallets = [
@@ -24,10 +30,19 @@ const useHandleWalletsToConnect = () => {
             return;
         }
         setWalletsToConnectByChain(restOfTheWallets);
-        if (restOfTheWallets.length === 0) {
-            setShowAuthFlow(false);
+        const allWalletsConnected = restOfTheWallets.length === 0;
+        if (allWalletsConnected) {
+            if (!isFullyConnected) {
+                setIsFullyConnected(true);
+                setView('bridge-summary');
+            }
+            else {
+                setShowAuthFlow(false);
+                goToInitialView();
+            }
+            return;
         }
-        setView('wallet-list');
+        setView('bridge-next-wallet-connection');
     };
     return { handleWalletsToConnect };
 };

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

@@ -2,13 +2,19 @@ import { useInternalDynamicContext } from '../../../context/DynamicContext/useIn
 import { useViewContext } from '../../../context/ViewContext/ViewContext.js';
 
 const useHandleWalletsToConnect = () => {
-    const { walletsToConnectByChain, setWalletsToConnectByChain, setShowAuthFlow, } = useInternalDynamicContext();
-    const { setView } = useViewContext();
+    const { walletsToConnectByChain, setWalletsToConnectByChain, setShowAuthFlow, setIsFullyConnected, isFullyConnected, } = useInternalDynamicContext();
+    const { setView, goToInitialView } = useViewContext();
     const handleWalletsToConnect = () => {
         if (!walletsToConnectByChain) {
+            setIsFullyConnected(true);
             setShowAuthFlow(false);
             return;
         }
+        // Avoid showing wallet-list when wallet updates network to the correct one in run time (bridge mode)
+        if (walletsToConnectByChain.length === 0) {
+            setShowAuthFlow(false);
+            return goToInitialView();
+        }
         const [firstWallet, ...restOfTheWallets] = walletsToConnectByChain;
         if (firstWallet.numberOfWallets > 1) {
             const updatedWallets = [
@@ -20,10 +26,19 @@ const useHandleWalletsToConnect = () => {
             return;
         }
         setWalletsToConnectByChain(restOfTheWallets);
-        if (restOfTheWallets.length === 0) {
-            setShowAuthFlow(false);
+        const allWalletsConnected = restOfTheWallets.length === 0;
+        if (allWalletsConnected) {
+            if (!isFullyConnected) {
+                setIsFullyConnected(true);
+                setView('bridge-summary');
+            }
+            else {
+                setShowAuthFlow(false);
+                goToInitialView();
+            }
+            return;
         }
-        setView('wallet-list');
+        setView('bridge-next-wallet-connection');
     };
     return { handleWalletsToConnect };
 };

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

@@ -0,0 +1 @@
+export declare const useInterval: (callback: () => void, delay: number | null) => void;

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

@@ -0,0 +1,10 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var React = require('react');
+
+// https://usehooks-ts.com/react-hook/use-isomorphic-layout-effect
+const useIsomorphicLayoutEffect = typeof window !== 'undefined' ? React.useLayoutEffect : React.useEffect;
+
+exports.useIsomorphicLayoutEffect = useIsomorphicLayoutEffect;

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

@@ -0,0 +1,2 @@
+import { useLayoutEffect } from 'react';
+export declare const useIsomorphicLayoutEffect: typeof useLayoutEffect;

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

@@ -0,0 +1,6 @@
+import { useLayoutEffect, useEffect } from 'react';
+
+// https://usehooks-ts.com/react-hook/use-isomorphic-layout-effect
+const useIsomorphicLayoutEffect = typeof window !== 'undefined' ? useLayoutEffect : useEffect;
+
+export { useIsomorphicLayoutEffect };

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

@@ -5,19 +5,17 @@ Object.defineProperty(exports, '__esModule', { value: true });
 var React = require('react');
 
 const useKeyboardEventListener = ({ disabled, inputKey, onKeyPressed, }) => {
-    const handleKeydown = React.useCallback((evt) => {
-        if (disabled)
-            return;
-        if (evt.key === inputKey) {
-            onKeyPressed();
-        }
-    }, [disabled, inputKey, onKeyPressed]);
     React.useEffect(() => {
+        const handleKeydown = (evt) => {
+            if (disabled || evt.key !== inputKey)
+                return;
+            onKeyPressed();
+        };
         document.addEventListener('keydown', handleKeydown);
         return () => {
             document.removeEventListener('keydown', handleKeydown);
         };
-    }, [handleKeydown]);
+    }, [disabled, inputKey, onKeyPressed]);
 };
 
 exports.useKeyboardEventListener = useKeyboardEventListener;