@dynamic-labs/sdk-react-core 4.4.2 → 4.4.4

package/src/lib/widgets/DynamicBridgeWidget/views/EditProfileView/EditProfileView.js

@@ -91,7 +91,7 @@ import '../../../../shared/utils/functions/getInitialUrl/getInitialUrl.js';
 import { useInternalDynamicContext } from '../../../../context/DynamicContext/useDynamicContext/useInternalDynamicContext.js';
 
 const EditProfileView = () => {
-    const { setView } = useViewContext();
+    const { pushView } = useViewContext();
     const { goToProfileView } = useDynamicBridgeWidgetContext();
     const { setShowAuthFlow } = useInternalDynamicContext();
     const { updateUser } = useUserUpdateRequestInternal({
@@ -105,9 +105,9 @@ const EditProfileView = () => {
                 ignoreIfIsEmbeddedWidget: false,
                 performMultiWalletChecks: false,
             });
-            setView(isEmailVerificationRequired ? 'verify-email' : 'verify-sms');
+            pushView(isEmailVerificationRequired ? 'verify-email' : 'verify-sms');
         }
-    }), [goToProfileView, setShowAuthFlow, setView, updateUser]);
+    }), [goToProfileView, setShowAuthFlow, pushView, updateUser]);
     return (jsx(UserProfileForm, { onEditProfileSubmit: onEditProfileFormSubmit, onEditProfileCancel: goToProfileView }));
 };
 

package/src/lib/widgets/DynamicWidget/components/DotsMenu/DotsMenu.cjs

@@ -9,17 +9,22 @@ var Icon = require('../../../../components/Icon/Icon.cjs');
 var IconButton = require('../../../../components/IconButton/IconButton.cjs');
 var Dropdown = require('../../../../components/MenuList/Dropdown/Dropdown.cjs');
 var DotsMenuDropdown = require('../DotsMenuDropdown/DotsMenuDropdown.cjs');
-var index = require('../../../../shared/utils/hooks/useOnClickOutside/index.cjs');
 var threeDots = require('../../../../shared/assets/three-dots.cjs');
 require('@dynamic-labs/iconic');
 require('../../../../context/ViewContext/ViewContext.cjs');
 
 const DotsMenu = ({ options, buttonClassName, buttonClassNameWithOpenMenu, direction = 'right', iconOverride, }) => {
     const dotsMenuRef = React.useRef(null);
-    const popperContentRef = React.useRef(null);
     const [showMenu, setShowMenu] = React.useState(false);
-    index.useOnClickOutside(popperContentRef, () => setShowMenu(false));
-    return (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx(IconButton.IconButton, { ref: dotsMenuRef, onClick: () => setShowMenu(true), "data-testid": 'dotsMenu', className: showMenu ? buttonClassNameWithOpenMenu : buttonClassName, children: iconOverride ? (iconOverride) : (jsxRuntime.jsx(Icon.Icon, { children: jsxRuntime.jsx(threeDots.ReactComponent, {}) })) }), jsxRuntime.jsx(Dropdown.Dropdown, { isOpen: showMenu, onClickOutside: () => setShowMenu(false), onScroll: () => setShowMenu(false), anchorRef: dotsMenuRef, ref: popperContentRef, anchorOrigin: direction === 'right' ? 'bottom-left' : 'top-right', transformOrigin: direction === 'right' ? 'top-left' : 'bottom-right', children: jsxRuntime.jsx(DotsMenuDropdown.DotsMenuDropdown, { options: options, setShowMenu: setShowMenu }) })] }));
+    const handleIconClick = React.useCallback(() => {
+        // Use setTimeout here to prevent React 17 from triggering a click event
+        // when the dropdown is rendered.
+        setTimeout(() => setShowMenu(true), 0);
+    }, [setShowMenu]);
+    const handleMenuClose = React.useCallback(() => {
+        setShowMenu(false);
+    }, [setShowMenu]);
+    return (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx(IconButton.IconButton, { ref: dotsMenuRef, onClick: handleIconClick, "data-testid": 'dotsMenu', className: showMenu ? buttonClassNameWithOpenMenu : buttonClassName, children: iconOverride ? (iconOverride) : (jsxRuntime.jsx(Icon.Icon, { children: jsxRuntime.jsx(threeDots.ReactComponent, {}) })) }), jsxRuntime.jsx(Dropdown.Dropdown, { isOpen: showMenu, onClickOutside: handleMenuClose, onScroll: handleMenuClose, anchorRef: dotsMenuRef, anchorOrigin: direction === 'right' ? 'bottom-left' : 'top-right', transformOrigin: direction === 'right' ? 'top-left' : 'bottom-right', children: jsxRuntime.jsx(DotsMenuDropdown.DotsMenuDropdown, { options: options, setShowMenu: setShowMenu }) })] }));
 };
 
 exports.DotsMenu = DotsMenu;

package/src/lib/widgets/DynamicWidget/components/DotsMenu/DotsMenu.js

@@ -1,21 +1,26 @@
 'use client'
 import { jsxs, Fragment, jsx } from 'react/jsx-runtime';
-import { useRef, useState } from 'react';
+import { useRef, useState, useCallback } from 'react';
 import { Icon } from '../../../../components/Icon/Icon.js';
 import { IconButton } from '../../../../components/IconButton/IconButton.js';
 import { Dropdown } from '../../../../components/MenuList/Dropdown/Dropdown.js';
 import { DotsMenuDropdown } from '../DotsMenuDropdown/DotsMenuDropdown.js';
-import { useOnClickOutside } from '../../../../shared/utils/hooks/useOnClickOutside/index.js';
 import { ReactComponent as SvgThreeDots } from '../../../../shared/assets/three-dots.js';
 import '@dynamic-labs/iconic';
 import '../../../../context/ViewContext/ViewContext.js';
 
 const DotsMenu = ({ options, buttonClassName, buttonClassNameWithOpenMenu, direction = 'right', iconOverride, }) => {
     const dotsMenuRef = useRef(null);
-    const popperContentRef = useRef(null);
     const [showMenu, setShowMenu] = useState(false);
-    useOnClickOutside(popperContentRef, () => setShowMenu(false));
-    return (jsxs(Fragment, { children: [jsx(IconButton, { ref: dotsMenuRef, onClick: () => setShowMenu(true), "data-testid": 'dotsMenu', className: showMenu ? buttonClassNameWithOpenMenu : buttonClassName, children: iconOverride ? (iconOverride) : (jsx(Icon, { children: jsx(SvgThreeDots, {}) })) }), jsx(Dropdown, { isOpen: showMenu, onClickOutside: () => setShowMenu(false), onScroll: () => setShowMenu(false), anchorRef: dotsMenuRef, ref: popperContentRef, anchorOrigin: direction === 'right' ? 'bottom-left' : 'top-right', transformOrigin: direction === 'right' ? 'top-left' : 'bottom-right', children: jsx(DotsMenuDropdown, { options: options, setShowMenu: setShowMenu }) })] }));
+    const handleIconClick = useCallback(() => {
+        // Use setTimeout here to prevent React 17 from triggering a click event
+        // when the dropdown is rendered.
+        setTimeout(() => setShowMenu(true), 0);
+    }, [setShowMenu]);
+    const handleMenuClose = useCallback(() => {
+        setShowMenu(false);
+    }, [setShowMenu]);
+    return (jsxs(Fragment, { children: [jsx(IconButton, { ref: dotsMenuRef, onClick: handleIconClick, "data-testid": 'dotsMenu', className: showMenu ? buttonClassNameWithOpenMenu : buttonClassName, children: iconOverride ? (iconOverride) : (jsx(Icon, { children: jsx(SvgThreeDots, {}) })) }), jsx(Dropdown, { isOpen: showMenu, onClickOutside: handleMenuClose, onScroll: handleMenuClose, anchorRef: dotsMenuRef, anchorOrigin: direction === 'right' ? 'bottom-left' : 'top-right', transformOrigin: direction === 'right' ? 'top-left' : 'bottom-right', children: jsx(DotsMenuDropdown, { options: options, setShowMenu: setShowMenu }) })] }));
 };
 
 export { DotsMenu };

package/src/lib/widgets/DynamicWidget/views/ChooseWalletFundingMethod/useFundingMethods/useStartExternalWalletFunding/useStartExternalWalletFunding.cjs

@@ -5,33 +5,17 @@ Object.defineProperty(exports, '__esModule', { value: true });
 
 var _tslib = require('../../../../../../../../_virtual/_tslib.cjs');
 var React = require('react');
-var UserWalletsContext = require('../../../../../../context/UserWalletsContext/UserWalletsContext.cjs');
 var projectSettings = require('../../../../../../store/state/projectSettings/projectSettings.cjs');
-var walletOptions = require('../../../../../../store/state/walletOptions/walletOptions.cjs');
 var useFunding = require('../../../../../../utils/hooks/useFunding/useFunding.cjs');
 var DynamicWidgetContext = require('../../../../context/DynamicWidgetContext.cjs');
 
 const useStartExternalWalletFunding = () => {
     var _a, _b;
-    const userWallets = UserWalletsContext.useUserWallets();
     const settings = projectSettings.useProjectSettings();
     const { connectWalletForFunding } = useFunding.useFunding();
     const { setDynamicWidgetView } = DynamicWidgetContext.useWidgetContext();
     return React.useCallback(() => _tslib.__awaiter(void 0, void 0, void 0, function* () {
         var _c, _d;
-        const hasWalletConnectWallet = userWallets.some((wallet) => wallet.connector.isWalletConnect);
-        // WC does not allow multiple sessions, so we have 2 cases here:
-        // 1. The user has a linked WalletConnect wallet.
-        //    In this case, we should not do anything, and our logic will prevent other WCs from being
-        //    selected for funding.
-        // 2. The user does not have a WalletConnect wallet linked.
-        //    In this case, we should reset the WC session — this is because they might have just
-        //    previously connected another WC wallet for funding and that session could still be active.
-        if (!hasWalletConnectWallet) {
-            const walletOption = walletOptions.getWalletConnectorOptions().find(({ walletConnector }) => walletConnector.isWalletConnect);
-            yield (walletOption === null || walletOption === void 0 ? void 0 : walletOption.walletConnector.endSession());
-            yield (walletOption === null || walletOption === void 0 ? void 0 : walletOption.walletConnector.init());
-        }
         try {
             const externalWallet = yield connectWalletForFunding();
             const minAmount = (_d = (_c = settings === null || settings === void 0 ? void 0 : settings.sdk.funding) === null || _c === void 0 ? void 0 : _c.externalWallets) === null || _d === void 0 ? void 0 : _d.minAmount;
@@ -57,7 +41,6 @@ const useStartExternalWalletFunding = () => {
         connectWalletForFunding,
         setDynamicWidgetView,
         (_b = (_a = settings === null || settings === void 0 ? void 0 : settings.sdk.funding) === null || _a === void 0 ? void 0 : _a.externalWallets) === null || _b === void 0 ? void 0 : _b.minAmount,
-        userWallets,
     ]);
 };
 

package/src/lib/widgets/DynamicWidget/views/ChooseWalletFundingMethod/useFundingMethods/useStartExternalWalletFunding/useStartExternalWalletFunding.js

@@ -1,33 +1,17 @@
 'use client'
 import { __awaiter } from '../../../../../../../../_virtual/_tslib.js';
 import { useCallback } from 'react';
-import { useUserWallets } from '../../../../../../context/UserWalletsContext/UserWalletsContext.js';
 import { useProjectSettings } from '../../../../../../store/state/projectSettings/projectSettings.js';
-import { getWalletConnectorOptions } from '../../../../../../store/state/walletOptions/walletOptions.js';
 import { useFunding } from '../../../../../../utils/hooks/useFunding/useFunding.js';
 import { useWidgetContext } from '../../../../context/DynamicWidgetContext.js';
 
 const useStartExternalWalletFunding = () => {
     var _a, _b;
-    const userWallets = useUserWallets();
     const settings = useProjectSettings();
     const { connectWalletForFunding } = useFunding();
     const { setDynamicWidgetView } = useWidgetContext();
     return useCallback(() => __awaiter(void 0, void 0, void 0, function* () {
         var _c, _d;
-        const hasWalletConnectWallet = userWallets.some((wallet) => wallet.connector.isWalletConnect);
-        // WC does not allow multiple sessions, so we have 2 cases here:
-        // 1. The user has a linked WalletConnect wallet.
-        //    In this case, we should not do anything, and our logic will prevent other WCs from being
-        //    selected for funding.
-        // 2. The user does not have a WalletConnect wallet linked.
-        //    In this case, we should reset the WC session — this is because they might have just
-        //    previously connected another WC wallet for funding and that session could still be active.
-        if (!hasWalletConnectWallet) {
-            const walletOption = getWalletConnectorOptions().find(({ walletConnector }) => walletConnector.isWalletConnect);
-            yield (walletOption === null || walletOption === void 0 ? void 0 : walletOption.walletConnector.endSession());
-            yield (walletOption === null || walletOption === void 0 ? void 0 : walletOption.walletConnector.init());
-        }
         try {
             const externalWallet = yield connectWalletForFunding();
             const minAmount = (_d = (_c = settings === null || settings === void 0 ? void 0 : settings.sdk.funding) === null || _c === void 0 ? void 0 : _c.externalWallets) === null || _d === void 0 ? void 0 : _d.minAmount;
@@ -53,7 +37,6 @@ const useStartExternalWalletFunding = () => {
         connectWalletForFunding,
         setDynamicWidgetView,
         (_b = (_a = settings === null || settings === void 0 ? void 0 : settings.sdk.funding) === null || _a === void 0 ? void 0 : _a.externalWallets) === null || _b === void 0 ? void 0 : _b.minAmount,
-        userWallets,
     ]);
 };
 

package/src/lib/widgets/DynamicWidget/views/EditProfileView/EditProfileView.cjs

@@ -96,7 +96,7 @@ require('../../../../components/Popper/Popper/Popper.cjs');
 require('../../../../components/Popper/PopperContext/PopperContext.cjs');
 
 const EditProfileView = ({ rootClassName, }) => {
-    const { setView } = ViewContext.useViewContext();
+    const { pushView } = ViewContext.useViewContext();
     const { setShowAuthFlow, multiWallet, user } = useInternalDynamicContext.useInternalDynamicContext();
     const { goToProfileView } = DynamicWidgetContext.useWidgetContext();
     const { updateUser } = useUserUpdateRequest.useUserUpdateRequestInternal({
@@ -111,9 +111,9 @@ const EditProfileView = ({ rootClassName, }) => {
                 initializeWalletConnect: false,
                 performMultiWalletChecks: false,
             });
-            setView(isEmailVerificationRequired ? 'verify-email' : 'verify-sms');
+            pushView(isEmailVerificationRequired ? 'verify-email' : 'verify-sms');
         }
-    }), [goToProfileView, setShowAuthFlow, setView, updateUser]);
+    }), [goToProfileView, setShowAuthFlow, pushView, updateUser]);
     const isKYCEnabled = useKYCFlag.useKYCFlag();
     return (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [!multiWallet && isKYCEnabled && (jsxRuntime.jsx(Typography.Typography, { weight: 'regular', color: 'secondary', variant: 'body_normal', className: 'dynamic-widget-edit-profile-view__profile-title', children: "My information" })), jsxRuntime.jsx(UserProfileForm.UserProfileForm, { formClassName: rootClassName, onEditProfileSubmit: onEditProfileFormSubmit, onEditProfileCancel: goToProfileView })] }));
 };

package/src/lib/widgets/DynamicWidget/views/EditProfileView/EditProfileView.js

@@ -92,7 +92,7 @@ import '../../../../components/Popper/Popper/Popper.js';
 import '../../../../components/Popper/PopperContext/PopperContext.js';
 
 const EditProfileView = ({ rootClassName, }) => {
-    const { setView } = useViewContext();
+    const { pushView } = useViewContext();
     const { setShowAuthFlow, multiWallet, user } = useInternalDynamicContext();
     const { goToProfileView } = useWidgetContext();
     const { updateUser } = useUserUpdateRequestInternal({
@@ -107,9 +107,9 @@ const EditProfileView = ({ rootClassName, }) => {
                 initializeWalletConnect: false,
                 performMultiWalletChecks: false,
             });
-            setView(isEmailVerificationRequired ? 'verify-email' : 'verify-sms');
+            pushView(isEmailVerificationRequired ? 'verify-email' : 'verify-sms');
         }
-    }), [goToProfileView, setShowAuthFlow, setView, updateUser]);
+    }), [goToProfileView, setShowAuthFlow, pushView, updateUser]);
     const isKYCEnabled = useKYCFlag();
     return (jsxs(Fragment, { children: [!multiWallet && isKYCEnabled && (jsx(Typography, { weight: 'regular', color: 'secondary', variant: 'body_normal', className: 'dynamic-widget-edit-profile-view__profile-title', children: "My information" })), jsx(UserProfileForm, { formClassName: rootClassName, onEditProfileSubmit: onEditProfileFormSubmit, onEditProfileCancel: goToProfileView })] }));
 };

package/src/lib/widgets/DynamicWidget/views/GlobalWalletView/GlobalWalletView.cjs

@@ -103,7 +103,7 @@ const GlobalWalletView = () => {
     var _a;
     const { t } = reactI18next.useTranslation();
     const { setDynamicWidgetView, goToInitialDynamicWidgetView } = DynamicWidgetContext.useWidgetContext();
-    const { setView } = ViewContext.useViewContext();
+    const { pushView } = ViewContext.useViewContext();
     const { setShowAuthFlow } = useInternalDynamicContext.useInternalDynamicContext();
     const { primaryWallet } = useDynamicContext.useDynamicContext();
     const [walletConnectUri, setWalletConnectUri] = React.useState('');
@@ -125,7 +125,7 @@ const GlobalWalletView = () => {
     // eslint-disable-next-line react-hooks/exhaustive-deps
     []);
     const handleConfirmView = (pairingInfo) => {
-        setView('global-wallet-confirm', {
+        pushView('global-wallet-confirm', {
             onCancel: () => {
                 setDynamicWidgetView('global-wallet');
                 setShowAuthFlow(false, {
@@ -166,7 +166,7 @@ const GlobalWalletView = () => {
         const pairingInfo = { icons, name, url };
         const isDefinitelyMalicious = yield blockaid.isMaliciousUrl({ environmentId, url });
         if (isDefinitelyMalicious || isDefinitelyMalicious === undefined) {
-            setView('global-wallet-malicious', {
+            pushView('global-wallet-malicious', {
                 maliciousSiteInfo: {
                     isDefinitelyMalicious: isDefinitelyMalicious !== null && isDefinitelyMalicious !== void 0 ? isDefinitelyMalicious : false,
                     proceedFlow: () => handleConfirmView(pairingInfo),
@@ -222,7 +222,7 @@ const GlobalWalletView = () => {
         // eslint-disable-next-line react-hooks/exhaustive-deps
     }, [walletConnectUri]);
     const renderHeader = () => (jsxRuntime.jsxs("div", { className: 'header', children: [jsxRuntime.jsx(IconButton.IconButton, { type: 'button', onClick: goToInitialDynamicWidgetView, "data-testid": 'back-button', children: jsxRuntime.jsx(arrowLeft.ReactComponent, {}) }), jsxRuntime.jsx(Typography.Typography, { variant: 'title', weight: 'medium', color: 'primary', as: 'h1', copykey: 'global_wallet.connect_to_apps', children: t('global_wallet.connect_to_apps') }), utils.isMobile() && (jsxRuntime.jsx(IconButton.IconButton, { type: 'button', onClick: () => {
-                    setView('global-wallet-info');
+                    pushView('global-wallet-info');
                     setShowAuthFlow(true, {
                         ignoreIfIsEmbeddedWidget: false,
                         performMultiWalletChecks: false,

package/src/lib/widgets/DynamicWidget/views/GlobalWalletView/GlobalWalletView.js

@@ -99,7 +99,7 @@ const GlobalWalletView = () => {
     var _a;
     const { t } = useTranslation();
     const { setDynamicWidgetView, goToInitialDynamicWidgetView } = useWidgetContext();
-    const { setView } = useViewContext();
+    const { pushView } = useViewContext();
     const { setShowAuthFlow } = useInternalDynamicContext();
     const { primaryWallet } = useDynamicContext();
     const [walletConnectUri, setWalletConnectUri] = useState('');
@@ -121,7 +121,7 @@ const GlobalWalletView = () => {
     // eslint-disable-next-line react-hooks/exhaustive-deps
     []);
     const handleConfirmView = (pairingInfo) => {
-        setView('global-wallet-confirm', {
+        pushView('global-wallet-confirm', {
             onCancel: () => {
                 setDynamicWidgetView('global-wallet');
                 setShowAuthFlow(false, {
@@ -162,7 +162,7 @@ const GlobalWalletView = () => {
         const pairingInfo = { icons, name, url };
         const isDefinitelyMalicious = yield isMaliciousUrl({ environmentId, url });
         if (isDefinitelyMalicious || isDefinitelyMalicious === undefined) {
-            setView('global-wallet-malicious', {
+            pushView('global-wallet-malicious', {
                 maliciousSiteInfo: {
                     isDefinitelyMalicious: isDefinitelyMalicious !== null && isDefinitelyMalicious !== void 0 ? isDefinitelyMalicious : false,
                     proceedFlow: () => handleConfirmView(pairingInfo),
@@ -218,7 +218,7 @@ const GlobalWalletView = () => {
         // eslint-disable-next-line react-hooks/exhaustive-deps
     }, [walletConnectUri]);
     const renderHeader = () => (jsxs("div", { className: 'header', children: [jsx(IconButton, { type: 'button', onClick: goToInitialDynamicWidgetView, "data-testid": 'back-button', children: jsx(SvgArrowLeft, {}) }), jsx(Typography, { variant: 'title', weight: 'medium', color: 'primary', as: 'h1', copykey: 'global_wallet.connect_to_apps', children: t('global_wallet.connect_to_apps') }), isMobile() && (jsx(IconButton, { type: 'button', onClick: () => {
-                    setView('global-wallet-info');
+                    pushView('global-wallet-info');
                     setShowAuthFlow(true, {
                         ignoreIfIsEmbeddedWidget: false,
                         performMultiWalletChecks: false,

package/src/lib/widgets/DynamicWidget/views/ManageMfaWidgetView/ManageMfaWidgetView.cjs

@@ -110,7 +110,7 @@ const ManageMfaWidgetView = () => {
     const [loading, setLoading] = React.useState(false);
     const { setDynamicWidgetView } = DynamicWidgetContext.useWidgetContext();
     const { setShowMfaQRCode, setShowOTPVerification } = useDynamicModals.useDynamicModals();
-    const { setView } = ViewContext.useViewContext();
+    const { pushView } = ViewContext.useViewContext();
     const { getUserDevices, deleteUserDevice } = useMfa.useMfa();
     const { t } = reactI18next.useTranslation();
     const { projectSettings, setShowAuthFlow } = useInternalDynamicContext.useInternalDynamicContext();
@@ -145,7 +145,7 @@ const ManageMfaWidgetView = () => {
     const backButton = (jsxRuntime.jsx(IconButton.IconButton, { type: 'button', onClick: () => setDynamicWidgetView('settings'), "data-testid": 'back-button', children: jsxRuntime.jsx(chevronLeft.ReactComponent, {}) }));
     const handleGenerateBackupCodes = () => _tslib.__awaiter(void 0, void 0, void 0, function* () {
         setShowAuthFlow(true);
-        setView('mfa-display-backup-codes', { regenerateCodes: true });
+        pushView('mfa-display-backup-codes', { regenerateCodes: true });
     });
     return (jsxRuntime.jsxs("div", { className: 'manage-mfa-widget-view', children: [jsxRuntime.jsx(ModalHeader.ModalHeader, { leading: backButton, children: jsxRuntime.jsx("div", { className: 'send-balance-page-layout__header-content', children: jsxRuntime.jsx(Typography.Typography, { variant: 'title', color: 'primary', copykey: 'dyn_manage_mfa.title', children: t('dyn_manage_mfa.title') }) }) }), jsxRuntime.jsxs("div", { className: 'manage-mfa-widget-view__scroll-container', children: [loading && jsxRuntime.jsx(MfaDeviceTileSkeleton.MfaDeviceTileSkeleton, {}), !loading && userDevices.length === 0 && (jsxRuntime.jsx(Typography.Typography, { className: 'manage-mfa-widget-view__no-devices', variant: 'body_normal', color: 'secondary', copykey: 'dyn_manage_mfa.no_devices', children: t('dyn_manage_mfa.no_devices') })), userDevices.map((device, index) => (jsxRuntime.jsx(UserDeviceTile.UserDeviceTile, { isMfaRequired: isMfaRequired, userDevice: device, index: index, deleteDevice: deleteDevice }, device.id)))] }), jsxRuntime.jsx("div", { className: 'manage-mfa-widget-view__add-mfa-button-container', children: userDevices.length > 0 ? (jsxRuntime.jsx(TypographyButton.TypographyButton, { buttonClassName: 'manage-mfa-widget-view__add-mfa-button-container__button', onClick: handleGenerateBackupCodes, copykey: 'dyn_manage_mfa.generate_backup_codes_button', children: t('dyn_manage_mfa.generate_backup_codes_button') })) : (jsxRuntime.jsx(TypographyButton.TypographyButton, { buttonClassName: 'manage-mfa-widget-view__add-mfa-button-container__button', onClick: () => setShowMfaQRCode(true), copykey: 'dyn_manage_mfa.add_mfa_button', startSlot: jsxRuntime.jsx(add.ReactComponent, {}), children: t('dyn_manage_mfa.add_mfa_button') })) })] }));
 };

package/src/lib/widgets/DynamicWidget/views/ManageMfaWidgetView/ManageMfaWidgetView.js

@@ -106,7 +106,7 @@ const ManageMfaWidgetView = () => {
     const [loading, setLoading] = useState(false);
     const { setDynamicWidgetView } = useWidgetContext();
     const { setShowMfaQRCode, setShowOTPVerification } = useDynamicModals();
-    const { setView } = useViewContext();
+    const { pushView } = useViewContext();
     const { getUserDevices, deleteUserDevice } = useMfa();
     const { t } = useTranslation();
     const { projectSettings, setShowAuthFlow } = useInternalDynamicContext();
@@ -141,7 +141,7 @@ const ManageMfaWidgetView = () => {
     const backButton = (jsx(IconButton, { type: 'button', onClick: () => setDynamicWidgetView('settings'), "data-testid": 'back-button', children: jsx(SvgChevronLeft, {}) }));
     const handleGenerateBackupCodes = () => __awaiter(void 0, void 0, void 0, function* () {
         setShowAuthFlow(true);
-        setView('mfa-display-backup-codes', { regenerateCodes: true });
+        pushView('mfa-display-backup-codes', { regenerateCodes: true });
     });
     return (jsxs("div", { className: 'manage-mfa-widget-view', children: [jsx(ModalHeader, { leading: backButton, children: jsx("div", { className: 'send-balance-page-layout__header-content', children: jsx(Typography, { variant: 'title', color: 'primary', copykey: 'dyn_manage_mfa.title', children: t('dyn_manage_mfa.title') }) }) }), jsxs("div", { className: 'manage-mfa-widget-view__scroll-container', children: [loading && jsx(MfaDeviceTileSkeleton, {}), !loading && userDevices.length === 0 && (jsx(Typography, { className: 'manage-mfa-widget-view__no-devices', variant: 'body_normal', color: 'secondary', copykey: 'dyn_manage_mfa.no_devices', children: t('dyn_manage_mfa.no_devices') })), userDevices.map((device, index) => (jsx(UserDeviceTile, { isMfaRequired: isMfaRequired, userDevice: device, index: index, deleteDevice: deleteDevice }, device.id)))] }), jsx("div", { className: 'manage-mfa-widget-view__add-mfa-button-container', children: userDevices.length > 0 ? (jsx(TypographyButton, { buttonClassName: 'manage-mfa-widget-view__add-mfa-button-container__button', onClick: handleGenerateBackupCodes, copykey: 'dyn_manage_mfa.generate_backup_codes_button', children: t('dyn_manage_mfa.generate_backup_codes_button') })) : (jsx(TypographyButton, { buttonClassName: 'manage-mfa-widget-view__add-mfa-button-container__button', onClick: () => setShowMfaQRCode(true), copykey: 'dyn_manage_mfa.add_mfa_button', startSlot: jsx(SvgAdd, {}), children: t('dyn_manage_mfa.add_mfa_button') })) })] }));
 };

package/src/lib/widgets/DynamicWidget/views/ManagePasskeysWidgetView/PasskeyCard/PasskeyCard.cjs

@@ -110,7 +110,7 @@ const PasskeyCard = ({ passkey }) => {
     var _a;
     const { t } = reactI18next.useTranslation();
     const { setShowAuthFlow } = useInternalDynamicContext.useInternalDynamicContext();
-    const { setView } = ViewContext.useViewContext();
+    const { pushView } = ViewContext.useViewContext();
     const { setPasskey, setPasskeyIcon } = PasskeyContext.usePasskeyContext();
     const menuOptions = [
         {
@@ -119,7 +119,7 @@ const PasskeyCard = ({ passkey }) => {
                 setShowAuthFlow(true);
                 setPasskey(passkey);
                 setPasskeyIcon(() => { var _a; return (_a = PasskeyProviderIcon()) !== null && _a !== void 0 ? _a : undefined; });
-                setView('rename-passkey');
+                pushView('rename-passkey');
             },
             text: 'Rename',
         },

package/src/lib/widgets/DynamicWidget/views/ManagePasskeysWidgetView/PasskeyCard/PasskeyCard.js

@@ -106,7 +106,7 @@ const PasskeyCard = ({ passkey }) => {
     var _a;
     const { t } = useTranslation();
     const { setShowAuthFlow } = useInternalDynamicContext();
-    const { setView } = useViewContext();
+    const { pushView } = useViewContext();
     const { setPasskey, setPasskeyIcon } = usePasskeyContext();
     const menuOptions = [
         {
@@ -115,7 +115,7 @@ const PasskeyCard = ({ passkey }) => {
                 setShowAuthFlow(true);
                 setPasskey(passkey);
                 setPasskeyIcon(() => { var _a; return (_a = PasskeyProviderIcon()) !== null && _a !== void 0 ? _a : undefined; });
-                setView('rename-passkey');
+                pushView('rename-passkey');
             },
             text: 'Rename',
         },