@dynamic-labs/sdk-react-core 1.4.2 → 1.4.4

package/src/lib/utils/functions/walletListBuilder/utils/getCalculatedOffset/getCalculatedOffset.js

@@ -1,13 +1,18 @@
+import '../../../../constants/colors.js';
+import { DEFAULT_NUMBER_OF_WALLETS_TO_SHOW } from '../../../../constants/values.js';
 import { findLastPriorityIndex } from '../findLastWalletIndex/findLastPriorityIndex.js';
 
 const getCalculatedOffset = ({ hasWalletFilter, defaultOffset, list, priorityList, }) => {
     const lastPriorityIndex = findLastPriorityIndex(list, priorityList);
-    if (hasWalletFilter ||
-        list.length <= defaultOffset ||
-        lastPriorityIndex === -1) {
+    if (defaultOffset === DEFAULT_NUMBER_OF_WALLETS_TO_SHOW &&
+        !hasWalletFilter &&
+        list.length > defaultOffset &&
+        lastPriorityIndex !== -1) {
+        return lastPriorityIndex + 1;
+    }
+    else {
         return defaultOffset;
     }
-    return lastPriorityIndex + 1;
 };
 
 export { getCalculatedOffset };

package/src/lib/utils/functions/walletListBuilder/walletListBuilder.cjs

@@ -86,8 +86,10 @@ const walletListBuilder = ({ authMode, connectedWallets, multiWallet, numberOfWa
     const finalizedWalletList = groupWallets
         ? groupWalletOptions.groupWalletOptions(walletBook, walletsList)
         : walletsList;
+    // If a filter has been applied we want to add an offset to the number of wallets
+    // to include the installed and last used wallets
     const updatedNumberOfWalletsToShow = showMoreWalletsWithFilter && hasWalletFilter
-        ? calculateWithFilterNumberOfWalletsToShow(orderedInputList, firstPriorityWallets.concat(installedWallets), numberOfWalletsToShow)
+        ? calculateWalletOffsetBasedOnInstalledAndLastUsedWallets(orderedInputList, firstPriorityWallets.concat(installedWallets), numberOfWalletsToShow)
         : numberOfWalletsToShow;
     return {
         numberOfWallets: walletsList.length,
@@ -104,17 +106,24 @@ const orderAndFilterList = (walletList, walletsFilter, isWalletConnectList) => {
         return sortedInputList(walletList);
     }
 };
+const KEEP_WALLETS_NAME_LIST = ['wallet connect'];
 const applySearchFilterToWalletOptionList = (rawSearchFilter, walletOptionList) => {
     const searchFilter = rawSearchFilter.trim().toLowerCase();
-    const cleanName = (name) => name
-        .trim()
-        .toLowerCase()
-        .replace('wallet', '')
-        .replace('evm', '')
-        .replace('starknet', '')
-        .replace('solana', '')
-        .replace('flow', '')
-        .replace('bitcoin', '');
+    const cleanName = (name) => {
+        const trimmedLowerName = name.trim().toLowerCase();
+        if (KEEP_WALLETS_NAME_LIST.includes(trimmedLowerName)) {
+            return trimmedLowerName;
+        }
+        else {
+            return trimmedLowerName
+                .replace('wallet', '')
+                .replace('evm', '')
+                .replace('starknet', '')
+                .replace('solana', '')
+                .replace('flow', '')
+                .replace('bitcoin', '');
+        }
+    };
     return walletOptionList.filter((walletOption) => {
         var _a;
         return cleanName(walletOption.name).includes(searchFilter) ||
@@ -145,19 +154,18 @@ const listToDisplay = (finalizedList, searchFilter, isWalletConnectList, numberO
     }
 };
 /**
- * When a filter is applied we would like to show the installed + last used wallets
- * in addition to the wallets that the filter has specified.
  * This calculation adds an offset to numberOfWalletsToShow so we will show the
  * intended wallets + installed and last used.
+ * We should would only apply the additonal offset if the installed wallets was not in the original list.
  *
  * For example:
  * we want to show 4 wallets: ['metamask', 'rainbow', 'walletconnect', 'coinbase']
  * and someone is using brave with installed phantom he should see
  * [ 'brave injected', phantom ,'metamask', 'rainbow', 'walletconnect', 'coinbase',]
- *
- * note — this should only apply to the WalletList view!
+ * And when someone is using metamask and coinbase they should see
+ * [ 'metamask', 'coinbase', 'rainbow', 'walletconnect']
  */
-const calculateWithFilterNumberOfWalletsToShow = (allWalletsOrdered, installedOrUsedWallets, numberOfWalletsToShow) => {
+const calculateWalletOffsetBasedOnInstalledAndLastUsedWallets = (allWalletsOrdered, installedOrUsedWallets, numberOfWalletsToShow) => {
     const filteredWallets = allWalletsOrdered.slice(0, numberOfWalletsToShow);
     const offset = installedOrUsedWallets.filter((wallet) => !filteredWallets.includes(wallet)).length;
     return numberOfWalletsToShow + offset;
@@ -177,4 +185,5 @@ const getSignWithEmailWallet = (signWithEmailWalletName, inputList) => {
 
 exports.PRIORITY_WALLET_LIST = PRIORITY_WALLET_LIST;
 exports.SIGN_IN_WITH_EMAIL_WALLET_NAME = SIGN_IN_WITH_EMAIL_WALLET_NAME;
+exports.calculateWalletOffsetBasedOnInstalledAndLastUsedWallets = calculateWalletOffsetBasedOnInstalledAndLastUsedWallets;
 exports.walletListBuilder = walletListBuilder;

package/src/lib/utils/functions/walletListBuilder/walletListBuilder.d.ts

@@ -23,4 +23,17 @@ type BuilderResult = {
 export declare const PRIORITY_WALLET_LIST: string[];
 export declare const SIGN_IN_WITH_EMAIL_WALLET_NAME = "Sign In With Email";
 export declare const walletListBuilder: ({ authMode, connectedWallets, multiWallet, numberOfWalletsToShow, inputList, isWalletConnectList, lastUsedWalletKey, signWithEmailWalletName, searchFilter, walletsFilter, loginWithEmail, groupWallets, walletBook, showMoreWalletsWithFilter, }: BuilderParams) => BuilderResult;
+/**
+ * This calculation adds an offset to numberOfWalletsToShow so we will show the
+ * intended wallets + installed and last used.
+ * We should would only apply the additonal offset if the installed wallets was not in the original list.
+ *
+ * For example:
+ * we want to show 4 wallets: ['metamask', 'rainbow', 'walletconnect', 'coinbase']
+ * and someone is using brave with installed phantom he should see
+ * [ 'brave injected', phantom ,'metamask', 'rainbow', 'walletconnect', 'coinbase',]
+ * And when someone is using metamask and coinbase they should see
+ * [ 'metamask', 'coinbase', 'rainbow', 'walletconnect']
+ */
+export declare const calculateWalletOffsetBasedOnInstalledAndLastUsedWallets: (allWalletsOrdered: WalletOption[], installedOrUsedWallets: WalletOption[], numberOfWalletsToShow: number) => number;
 export {};

package/src/lib/utils/functions/walletListBuilder/walletListBuilder.js

@@ -82,8 +82,10 @@ const walletListBuilder = ({ authMode, connectedWallets, multiWallet, numberOfWa
     const finalizedWalletList = groupWallets
         ? groupWalletOptions(walletBook, walletsList)
         : walletsList;
+    // If a filter has been applied we want to add an offset to the number of wallets
+    // to include the installed and last used wallets
     const updatedNumberOfWalletsToShow = showMoreWalletsWithFilter && hasWalletFilter
-        ? calculateWithFilterNumberOfWalletsToShow(orderedInputList, firstPriorityWallets.concat(installedWallets), numberOfWalletsToShow)
+        ? calculateWalletOffsetBasedOnInstalledAndLastUsedWallets(orderedInputList, firstPriorityWallets.concat(installedWallets), numberOfWalletsToShow)
         : numberOfWalletsToShow;
     return {
         numberOfWallets: walletsList.length,
@@ -100,17 +102,24 @@ const orderAndFilterList = (walletList, walletsFilter, isWalletConnectList) => {
         return sortedInputList(walletList);
     }
 };
+const KEEP_WALLETS_NAME_LIST = ['wallet connect'];
 const applySearchFilterToWalletOptionList = (rawSearchFilter, walletOptionList) => {
     const searchFilter = rawSearchFilter.trim().toLowerCase();
-    const cleanName = (name) => name
-        .trim()
-        .toLowerCase()
-        .replace('wallet', '')
-        .replace('evm', '')
-        .replace('starknet', '')
-        .replace('solana', '')
-        .replace('flow', '')
-        .replace('bitcoin', '');
+    const cleanName = (name) => {
+        const trimmedLowerName = name.trim().toLowerCase();
+        if (KEEP_WALLETS_NAME_LIST.includes(trimmedLowerName)) {
+            return trimmedLowerName;
+        }
+        else {
+            return trimmedLowerName
+                .replace('wallet', '')
+                .replace('evm', '')
+                .replace('starknet', '')
+                .replace('solana', '')
+                .replace('flow', '')
+                .replace('bitcoin', '');
+        }
+    };
     return walletOptionList.filter((walletOption) => {
         var _a;
         return cleanName(walletOption.name).includes(searchFilter) ||
@@ -141,19 +150,18 @@ const listToDisplay = (finalizedList, searchFilter, isWalletConnectList, numberO
     }
 };
 /**
- * When a filter is applied we would like to show the installed + last used wallets
- * in addition to the wallets that the filter has specified.
  * This calculation adds an offset to numberOfWalletsToShow so we will show the
  * intended wallets + installed and last used.
+ * We should would only apply the additonal offset if the installed wallets was not in the original list.
  *
  * For example:
  * we want to show 4 wallets: ['metamask', 'rainbow', 'walletconnect', 'coinbase']
  * and someone is using brave with installed phantom he should see
  * [ 'brave injected', phantom ,'metamask', 'rainbow', 'walletconnect', 'coinbase',]
- *
- * note — this should only apply to the WalletList view!
+ * And when someone is using metamask and coinbase they should see
+ * [ 'metamask', 'coinbase', 'rainbow', 'walletconnect']
  */
-const calculateWithFilterNumberOfWalletsToShow = (allWalletsOrdered, installedOrUsedWallets, numberOfWalletsToShow) => {
+const calculateWalletOffsetBasedOnInstalledAndLastUsedWallets = (allWalletsOrdered, installedOrUsedWallets, numberOfWalletsToShow) => {
     const filteredWallets = allWalletsOrdered.slice(0, numberOfWalletsToShow);
     const offset = installedOrUsedWallets.filter((wallet) => !filteredWallets.includes(wallet)).length;
     return numberOfWalletsToShow + offset;
@@ -171,4 +179,4 @@ const getSignWithEmailWallet = (signWithEmailWalletName, inputList) => {
     return walletOverride;
 };
 
-export { PRIORITY_WALLET_LIST, SIGN_IN_WITH_EMAIL_WALLET_NAME, walletListBuilder };
+export { PRIORITY_WALLET_LIST, SIGN_IN_WITH_EMAIL_WALLET_NAME, calculateWalletOffsetBasedOnInstalledAndLastUsedWallets, walletListBuilder };

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

@@ -23,6 +23,8 @@ require('../../../../shared/consts/index.cjs');
 require('../../../../events/dynamicEvents.cjs');
 var ErrorContext = require('../../../../context/ErrorContext/ErrorContext.cjs');
 require('@dynamic-labs/multi-wallet');
+var isProgrammableNetworkSwitchSupported = require('../../../functions/isProgrammableNetworkSwitchSupported/isProgrammableNetworkSwitchSupported.cjs');
+var isSupportedNetwork = require('../../../functions/isSupportedNetwork/isSupportedNetwork.cjs');
 require('viem/chains');
 var useHandleWalletsToConnect = require('../../useHandleWalletsToConnect/useHandleWalletsToConnect.cjs');
 var useVerifyWallet = require('../../useVerifyWallet/useVerifyWallet.cjs');
@@ -80,7 +82,7 @@ const useConnectAndSignSplitSteps = () => {
     const { setView, goToInitialView } = ViewContext.useViewContext();
     const { setErrorMessage } = ErrorContext.useErrorContext();
     const { getCaptchaToken, engageCaptcha } = CaptchaContext.useCaptchaContext();
-    const { connectWallet, consumeNonce, displaySiweStatement, projectSettings, environmentId, setIsSingleWalletAccount, setShowAuthFlow, user, authMode, setIsVerificationInProgress, } = useInternalDynamicContext.useInternalDynamicContext();
+    const { connectWallet, consumeNonce, displaySiweStatement, projectSettings, environmentId, networkValidationMode, setIsSingleWalletAccount, setShowAuthFlow, user, authMode, setIsVerificationInProgress, } = useInternalDynamicContext.useInternalDynamicContext();
     const { handleWalletsToConnect } = useHandleWalletsToConnect.useHandleWalletsToConnect();
     const verifyWallet = useVerifyWallet.useVerifyWallet({
         consumeNonce,
@@ -149,6 +151,19 @@ const useConnectAndSignSplitSteps = () => {
             if (!(connectionResult === null || connectionResult === void 0 ? void 0 : connectionResult.address)) {
                 return;
             }
+            const walletNetwork = yield walletConnector.getNetwork();
+            const usesSupportedNetwork = isSupportedNetwork.isSupportedNetwork({
+                network: walletNetwork,
+                walletConnector,
+            });
+            const isNetworkValidationEnabledForSignIn = networkValidationMode === 'always' ||
+                networkValidationMode === 'sign-in';
+            if (!usesSupportedNetwork && isNetworkValidationEnabledForSignIn) {
+                if (!isProgrammableNetworkSwitchSupported.isProgrammableNetworkSwitchSupported(walletConnector)) {
+                    return setView('network-not-supported-manual');
+                }
+                return setView('network-not-supported');
+            }
             yield verifyWallet({
                 captchaToken: getCaptchaToken(),
                 publicWalletAddress: connectionResult.address,

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

@@ -19,6 +19,8 @@ import '../../../../shared/consts/index.js';
 import '../../../../events/dynamicEvents.js';
 import { useErrorContext } from '../../../../context/ErrorContext/ErrorContext.js';
 import '@dynamic-labs/multi-wallet';
+import { isProgrammableNetworkSwitchSupported } from '../../../functions/isProgrammableNetworkSwitchSupported/isProgrammableNetworkSwitchSupported.js';
+import { isSupportedNetwork } from '../../../functions/isSupportedNetwork/isSupportedNetwork.js';
 import 'viem/chains';
 import { useHandleWalletsToConnect } from '../../useHandleWalletsToConnect/useHandleWalletsToConnect.js';
 import { useVerifyWallet } from '../../useVerifyWallet/useVerifyWallet.js';
@@ -76,7 +78,7 @@ const useConnectAndSignSplitSteps = () => {
     const { setView, goToInitialView } = useViewContext();
     const { setErrorMessage } = useErrorContext();
     const { getCaptchaToken, engageCaptcha } = useCaptchaContext();
-    const { connectWallet, consumeNonce, displaySiweStatement, projectSettings, environmentId, setIsSingleWalletAccount, setShowAuthFlow, user, authMode, setIsVerificationInProgress, } = useInternalDynamicContext();
+    const { connectWallet, consumeNonce, displaySiweStatement, projectSettings, environmentId, networkValidationMode, setIsSingleWalletAccount, setShowAuthFlow, user, authMode, setIsVerificationInProgress, } = useInternalDynamicContext();
     const { handleWalletsToConnect } = useHandleWalletsToConnect();
     const verifyWallet = useVerifyWallet({
         consumeNonce,
@@ -145,6 +147,19 @@ const useConnectAndSignSplitSteps = () => {
             if (!(connectionResult === null || connectionResult === void 0 ? void 0 : connectionResult.address)) {
                 return;
             }
+            const walletNetwork = yield walletConnector.getNetwork();
+            const usesSupportedNetwork = isSupportedNetwork({
+                network: walletNetwork,
+                walletConnector,
+            });
+            const isNetworkValidationEnabledForSignIn = networkValidationMode === 'always' ||
+                networkValidationMode === 'sign-in';
+            if (!usesSupportedNetwork && isNetworkValidationEnabledForSignIn) {
+                if (!isProgrammableNetworkSwitchSupported(walletConnector)) {
+                    return setView('network-not-supported-manual');
+                }
+                return setView('network-not-supported');
+            }
             yield verifyWallet({
                 captchaToken: getCaptchaToken(),
                 publicWalletAddress: connectionResult.address,

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

@@ -44,3 +44,4 @@ export { useWalletConnectorNetwork } from './useWalletConnectorNetwork';
 export { useInitEmbeddedWalletAuthMethod } from './useInitEmbeddedWalletAuthMethod';
 export { useEmbeddedWalletAuthenticator } from './useEmbeddedWalletAuthenticator';
 export { useViewSettings } from './useViewSettings';
+export { useNetworkNotSupported } from './useNetworkNotSupported';

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

@@ -142,7 +142,10 @@ const useAuthLayoutChecks = () => {
                     privacyPolicyUrl ||
                     customPrivacyPolicy ||
                     customTermsOfServices))));
-    const showDynamicFooter = view.type === 'login-with-email-verification' ||
+    const showDynamicFooter = view.type === 'login-with-email-or-wallet' ||
+        view.type === 'login-with-email-or-wallet-full-wallet-list' ||
+        view.type === 'login-with-wallet-only' ||
+        view.type === 'login-with-email-verification' ||
         view.type === 'verify-email' ||
         view.type === 'pending-connect' ||
         view.type === 'wallet-group' ||
@@ -176,9 +179,11 @@ const useAuthLayoutChecks = () => {
         view.type === 'farcaster-connect-view' ||
         (view.type === 'merge-user-accounts' && !user);
     const showDefaultFooter = !showConnectedWalletProgress && !showDynamicFooter && !showToSFooter;
+    const shouldHideDynamicFooterSeparator = showDynamicFooter && showToSFooter;
     return {
         displayBorderBelowHeader,
         isWalletListTypeView,
+        shouldHideDynamicFooterSeparator,
         showBackButton,
         showCloseButton,
         showConnectedWalletProgress,

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

@@ -1,6 +1,7 @@
 export declare const useAuthLayoutChecks: () => {
     displayBorderBelowHeader: boolean;
     isWalletListTypeView: boolean;
+    shouldHideDynamicFooterSeparator: boolean;
     showBackButton: boolean;
     showCloseButton: boolean;
     showConnectedWalletProgress: boolean;

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

@@ -138,7 +138,10 @@ const useAuthLayoutChecks = () => {
                     privacyPolicyUrl ||
                     customPrivacyPolicy ||
                     customTermsOfServices))));
-    const showDynamicFooter = view.type === 'login-with-email-verification' ||
+    const showDynamicFooter = view.type === 'login-with-email-or-wallet' ||
+        view.type === 'login-with-email-or-wallet-full-wallet-list' ||
+        view.type === 'login-with-wallet-only' ||
+        view.type === 'login-with-email-verification' ||
         view.type === 'verify-email' ||
         view.type === 'pending-connect' ||
         view.type === 'wallet-group' ||
@@ -172,9 +175,11 @@ const useAuthLayoutChecks = () => {
         view.type === 'farcaster-connect-view' ||
         (view.type === 'merge-user-accounts' && !user);
     const showDefaultFooter = !showConnectedWalletProgress && !showDynamicFooter && !showToSFooter;
+    const shouldHideDynamicFooterSeparator = showDynamicFooter && showToSFooter;
     return {
         displayBorderBelowHeader,
         isWalletListTypeView,
+        shouldHideDynamicFooterSeparator,
         showBackButton,
         showCloseButton,
         showConnectedWalletProgress,

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

@@ -30,7 +30,7 @@ var isConnectOnly = require('../authenticationHooks/helpers/isConnectOnly.cjs');
 var dynamicEvents = require('../../../events/dynamicEvents.cjs');
 var updateUserWalletsFromConnectedWallets = require('./updateUserWalletsFromConnectedWallets/updateUserWalletsFromConnectedWallets.cjs');
 
-const useConnectWallet = ({ authMode, clearPrimaryWalletId, enableVisitTrackingOnConnectOnly, environmentId, primaryWalletId, setPrimaryWalletId, walletConnectorOptions, onDisconnect, onBeforeConnectSuccessConfirmation, removeIsFullyConnected, setShowAuthFlow, isBridgeFlow, setIsVerificationInProgress, user, }) => {
+const useConnectWallet = ({ authMode, clearPrimaryWalletId, enableVisitTrackingOnConnectOnly, environmentId, primaryWalletId, setPrimaryWalletId, walletConnectorOptions, onDisconnect, onBeforeConnectSuccessConfirmation, setShowAuthFlow, isBridgeFlow, setIsVerificationInProgress, user, }) => {
     const [connectedWalletsInfo, setConnectedWalletsInfo, removeConnectedWalletsInfo,] = useLocalStorage.useLocalStorage(localStorage.CONNECTED_WALLETS_INFO, []);
     const [connectedWallets, _setConnectedWallets] = React.useState([]);
     /**
@@ -51,10 +51,7 @@ const useConnectWallet = ({ authMode, clearPrimaryWalletId, enableVisitTrackingO
         yield (walletToDisconnect === null || walletToDisconnect === void 0 ? void 0 : walletToDisconnect.connector.endSession());
         const updatedConnectedWalletsInfo = connectedWalletsInfo.filter((wallet) => wallet.id !== walletId);
         setConnectedWalletsInfo(updatedConnectedWalletsInfo);
-        if (updatedConnectedWalletsInfo.length === 0) {
-            removeIsFullyConnected();
-        }
-        onDisconnect(updatedConnectedWalletsInfo, walletToDisconnect);
+        onDisconnect(walletToDisconnect);
         if (walletId !== primaryWalletId) {
             return;
         }
@@ -72,7 +69,6 @@ const useConnectWallet = ({ authMode, clearPrimaryWalletId, enableVisitTrackingO
         isBridgeFlow,
         onDisconnect,
         primaryWalletId,
-        removeIsFullyConnected,
         setConnectedWalletsInfo,
         setPrimaryWalletId,
     ]);

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

@@ -16,9 +16,8 @@ export type UseConnectWalletProps = {
     primaryWalletId: string | undefined;
     setPrimaryWalletId: (walletId: string) => void;
     walletConnectorOptions: WalletOption[];
-    onDisconnect: (connectedWalletsInfo: ConnectedWalletConnectorType[], wallet?: Wallet) => void;
+    onDisconnect: (wallet?: Wallet) => void;
     onBeforeConnectSuccessConfirmation: OnBeforeConnectSuccessConfirmation | undefined;
-    removeIsFullyConnected: () => void;
     setShowAuthFlow: SetShowAuthFlow;
     isBridgeFlow: boolean;
     setIsVerificationInProgress: (newValue: boolean, checkWasSetOnDisable?: boolean | undefined) => void;
@@ -42,5 +41,5 @@ type UseConnectWalletValue = {
     removeConnectedWalletsInfo: () => void;
     disconnectWallet: (walletId: string) => Promise<void>;
 };
-export declare const useConnectWallet: ({ authMode, clearPrimaryWalletId, enableVisitTrackingOnConnectOnly, environmentId, primaryWalletId, setPrimaryWalletId, walletConnectorOptions, onDisconnect, onBeforeConnectSuccessConfirmation, removeIsFullyConnected, setShowAuthFlow, isBridgeFlow, setIsVerificationInProgress, user, }: UseConnectWalletProps) => UseConnectWalletValue;
+export declare const useConnectWallet: ({ authMode, clearPrimaryWalletId, enableVisitTrackingOnConnectOnly, environmentId, primaryWalletId, setPrimaryWalletId, walletConnectorOptions, onDisconnect, onBeforeConnectSuccessConfirmation, setShowAuthFlow, isBridgeFlow, setIsVerificationInProgress, user, }: UseConnectWalletProps) => UseConnectWalletValue;
 export {};

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

@@ -26,7 +26,7 @@ import { isConnectOnly } from '../authenticationHooks/helpers/isConnectOnly.js';
 import { dynamicEvents } from '../../../events/dynamicEvents.js';
 import { updateUserWalletsFromConnectedWallets } from './updateUserWalletsFromConnectedWallets/updateUserWalletsFromConnectedWallets.js';
 
-const useConnectWallet = ({ authMode, clearPrimaryWalletId, enableVisitTrackingOnConnectOnly, environmentId, primaryWalletId, setPrimaryWalletId, walletConnectorOptions, onDisconnect, onBeforeConnectSuccessConfirmation, removeIsFullyConnected, setShowAuthFlow, isBridgeFlow, setIsVerificationInProgress, user, }) => {
+const useConnectWallet = ({ authMode, clearPrimaryWalletId, enableVisitTrackingOnConnectOnly, environmentId, primaryWalletId, setPrimaryWalletId, walletConnectorOptions, onDisconnect, onBeforeConnectSuccessConfirmation, setShowAuthFlow, isBridgeFlow, setIsVerificationInProgress, user, }) => {
     const [connectedWalletsInfo, setConnectedWalletsInfo, removeConnectedWalletsInfo,] = useLocalStorage(CONNECTED_WALLETS_INFO, []);
     const [connectedWallets, _setConnectedWallets] = useState([]);
     /**
@@ -47,10 +47,7 @@ const useConnectWallet = ({ authMode, clearPrimaryWalletId, enableVisitTrackingO
         yield (walletToDisconnect === null || walletToDisconnect === void 0 ? void 0 : walletToDisconnect.connector.endSession());
         const updatedConnectedWalletsInfo = connectedWalletsInfo.filter((wallet) => wallet.id !== walletId);
         setConnectedWalletsInfo(updatedConnectedWalletsInfo);
-        if (updatedConnectedWalletsInfo.length === 0) {
-            removeIsFullyConnected();
-        }
-        onDisconnect(updatedConnectedWalletsInfo, walletToDisconnect);
+        onDisconnect(walletToDisconnect);
         if (walletId !== primaryWalletId) {
             return;
         }
@@ -68,7 +65,6 @@ const useConnectWallet = ({ authMode, clearPrimaryWalletId, enableVisitTrackingO
         isBridgeFlow,
         onDisconnect,
         primaryWalletId,
-        removeIsFullyConnected,
         setConnectedWalletsInfo,
         setPrimaryWalletId,
     ]);

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

@@ -72,11 +72,11 @@ require('../../../widgets/DynamicWidget/views/ManagePasskeysWidgetView/PasskeyCa
 var useInternalDynamicContext = require('../../../context/DynamicContext/useDynamicContext/useInternalDynamicContext.cjs');
 
 const useHandleWalletsToConnect = () => {
-    const { bridgeChainsToConnect, setBridgeChainsToConnect, setShowAuthFlow, setIsFullyConnected, isFullyConnected, } = useInternalDynamicContext.useInternalDynamicContext();
+    const { bridgeChainsToConnect, setShowAuthFlow, bridgeOnboardingCompleted, setBridgeOnboardingCompleted, } = useInternalDynamicContext.useInternalDynamicContext();
     const { setView, goToInitialView } = ViewContext.useViewContext();
     const handleWalletsToConnect = ({ walletConnector, }) => {
         if (!bridgeChainsToConnect) {
-            setIsFullyConnected(true);
+            setBridgeOnboardingCompleted(true);
             setShowAuthFlow(false);
             return;
         }
@@ -90,11 +90,10 @@ const useHandleWalletsToConnect = () => {
             return goToInitialView();
         }
         const restOfWallets = bridgeChainsToConnect.filter((wallet) => wallet.chain !== (walletConnector === null || walletConnector === void 0 ? void 0 : walletConnector.connectedChain));
-        setBridgeChainsToConnect(restOfWallets);
         const allWalletsConnected = restOfWallets.length === 0;
         if (allWalletsConnected) {
-            if (!isFullyConnected) {
-                setIsFullyConnected(true);
+            if (!bridgeOnboardingCompleted) {
+                setBridgeOnboardingCompleted(true);
                 setView('bridge-summary');
             }
             else {

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

@@ -68,11 +68,11 @@ import '../../../widgets/DynamicWidget/views/ManagePasskeysWidgetView/PasskeyCar
 import { useInternalDynamicContext } from '../../../context/DynamicContext/useDynamicContext/useInternalDynamicContext.js';
 
 const useHandleWalletsToConnect = () => {
-    const { bridgeChainsToConnect, setBridgeChainsToConnect, setShowAuthFlow, setIsFullyConnected, isFullyConnected, } = useInternalDynamicContext();
+    const { bridgeChainsToConnect, setShowAuthFlow, bridgeOnboardingCompleted, setBridgeOnboardingCompleted, } = useInternalDynamicContext();
     const { setView, goToInitialView } = useViewContext();
     const handleWalletsToConnect = ({ walletConnector, }) => {
         if (!bridgeChainsToConnect) {
-            setIsFullyConnected(true);
+            setBridgeOnboardingCompleted(true);
             setShowAuthFlow(false);
             return;
         }
@@ -86,11 +86,10 @@ const useHandleWalletsToConnect = () => {
             return goToInitialView();
         }
         const restOfWallets = bridgeChainsToConnect.filter((wallet) => wallet.chain !== (walletConnector === null || walletConnector === void 0 ? void 0 : walletConnector.connectedChain));
-        setBridgeChainsToConnect(restOfWallets);
         const allWalletsConnected = restOfWallets.length === 0;
         if (allWalletsConnected) {
-            if (!isFullyConnected) {
-                setIsFullyConnected(true);
+            if (!bridgeOnboardingCompleted) {
+                setBridgeOnboardingCompleted(true);
                 setView('bridge-summary');
             }
             else {

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

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

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

@@ -0,0 +1,104 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var React = require('react');
+var useWalletConnectorNetwork = require('../useWalletConnectorNetwork/useWalletConnectorNetwork.cjs');
+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('../../constants/colors.cjs');
+require('../../constants/values.cjs');
+require('../../../shared/utils/classes/storage/localStorage.cjs');
+require('viem');
+require('@dynamic-labs/utils');
+require('../../../shared/consts/index.cjs');
+require('../../../../../_virtual/_tslib.cjs');
+require('@dynamic-labs/multi-wallet');
+var isSupportedNetwork = require('../../functions/isSupportedNetwork/isSupportedNetwork.cjs');
+require('viem/chains');
+var useConnectAndSign = require('../authenticationHooks/useConnectAndSign/useConnectAndSign.cjs');
+require('../../../context/DynamicContext/DynamicContext.cjs');
+require('../../../events/dynamicEvents.cjs');
+require('react-dom');
+require('../../../config/ApiEndpoint.cjs');
+require('../../../context/ThemeContext/ThemeContext.cjs');
+require('@dynamic-labs/types');
+require('../../../context/ErrorContext/ErrorContext.cjs');
+require('../../../context/AccountExistsContext/AccountExistsContext.cjs');
+require('yup');
+require('react-i18next');
+require('../../../context/MockContext/MockContext.cjs');
+require('../useUserUpdateRequest/useUpdateUser/useUpdateUser.cjs');
+require('../../../context/UserFieldEditorContext/UserFieldEditorContext.cjs');
+require('../../../context/AccessDeniedContext/AccessDeniedContext.cjs');
+require('@dynamic-labs/rpc-providers');
+require('../../../context/UserWalletsContext/UserWalletsContext.cjs');
+require('../../../components/Alert/Alert.cjs');
+require('../../../components/ShadowDOM/ShadowDOM.cjs');
+require('../../../components/IconButton/IconButton.cjs');
+require('../../../components/InlineWidget/InlineWidget.cjs');
+require('../../../components/IsBrowser/IsBrowser.cjs');
+require('../../../components/MenuList/Dropdown/Dropdown.cjs');
+require('../../../components/Transition/ZoomTransition/ZoomTransition.cjs');
+require('../../../components/Transition/SlideInUpTransition/SlideInUpTransition.cjs');
+require('../../../components/Transition/OpacityTransition/OpacityTransition.cjs');
+require('../../../components/Popper/Popper/Popper.cjs');
+require('../../../components/Popper/PopperContext/PopperContext.cjs');
+require('react-focus-lock');
+require('qrcode');
+require('formik');
+require('i18next');
+require('../../../components/OverlayCard/OverlayCard.context.cjs');
+require('../../../components/PasskeyCreatedSuccessBanner/PasskeyCreatedSuccessBanner.cjs');
+require('../../../context/PasskeyContext/PasskeyContext.cjs');
+require('../../../views/WalletList/WalletList.cjs');
+require('../../../context/EmailVerificationContext/EmailVerificationContext.cjs');
+require('@hcaptcha/react-hcaptcha');
+require('../../../context/CaptchaContext/CaptchaContext.cjs');
+require('../../../context/LoadingContext/LoadingContext.cjs');
+require('../../../context/SocialRedirectContext/SocialRedirectContext.cjs');
+require('../../../context/WalletGroupContext/WalletGroupContext.cjs');
+require('../../../widgets/DynamicBridgeWidget/views/WalletsView/components/SecondaryWallets/SecondaryWallets.cjs');
+require('../../../context/FooterAnimationContext/index.cjs');
+require('../../../widgets/DynamicWidget/components/DynamicWidgetHeader/DynamicWidgetHeader.cjs');
+require('../../../widgets/DynamicWidget/context/DynamicWidgetContext.cjs');
+require('../../../components/UserProfile/parts/UserProfileField/components/VerifiedEmailIcon/VerifiedEmailIcon.cjs');
+require('@dynamic-labs/viem-utils');
+require('../../../views/TransactionConfirmationView/helpers/transactionErrorMessage.cjs');
+require('../useTransactionWithGasPrice/useTransactionWithGasPrice.cjs');
+require('../../../widgets/DynamicWidget/views/ManagePasskeysWidgetView/PasskeyCard/PasskeyCard.cjs');
+var useInternalDynamicContext = require('../../../context/DynamicContext/useDynamicContext/useInternalDynamicContext.cjs');
+
+const useNetworkNotSupported = () => {
+    const { selectedWalletConnector: walletConnector, setShowAuthFlow, bridgeChainsToConnect, bridgeOnboardingCompleted, } = useInternalDynamicContext.useInternalDynamicContext();
+    const { network: walletConnectorNetwork } = useWalletConnectorNetwork.useWalletConnectorNetwork(walletConnector);
+    const finishConnectAndSign = useConnectAndSign.useConnectAndSign({
+        shouldCallCallback: false,
+        shouldUpdateWallets: Boolean(bridgeChainsToConnect === null || bridgeChainsToConnect === void 0 ? void 0 : bridgeChainsToConnect.length),
+    });
+    // Finishes auth flow when wallet switches to proper network
+    React.useEffect(() => {
+        if (!isSupportedNetwork.isSupportedNetwork({ network: walletConnectorNetwork, walletConnector })) {
+            return;
+        }
+        finishConnectAndSign({
+            walletConnector: walletConnector,
+        });
+        // there are two scenarios here, one in not connected state and the other one in connected state.
+        // previously we were calling setShowAuthFlow(false) in useHandleWalletsToConnect.
+        // now, we don't call it in network-not-supported view, so we need to handle that scenario and close modal here
+        // this should be gone, once we're done with the useConnectAndSign hook refactor.
+        // TODO: https://linear.app/dynamic-labs/issue/QNTM-117/break-useconnectandsign-hook-to-small-parts
+        if (bridgeOnboardingCompleted) {
+            setShowAuthFlow(false);
+        }
+    }, [walletConnectorNetwork, setShowAuthFlow, bridgeOnboardingCompleted]);
+    return { currentNetwork: walletConnectorNetwork };
+};
+
+exports.useNetworkNotSupported = useNetworkNotSupported;

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

@@ -0,0 +1,3 @@
+export declare const useNetworkNotSupported: () => {
+    currentNetwork: string | number | undefined;
+};