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

package/CHANGELOG.md

@@ -1,4 +1,24 @@
 
+### [4.4.4](https://github.com/dynamic-labs/dynamic-auth/compare/v4.4.3...v4.4.4) (2025-01-31)
+
+
+### Bug Fixes
+
+* coinbase connect only signature request message flicker ([#7950](https://github.com/dynamic-labs/dynamic-auth/issues/7950)) ([e7bc2b8](https://github.com/dynamic-labs/dynamic-auth/commit/e7bc2b82f611612936521838b0fe01a5115446c3))
+* decouple show menu from click event ([#7951](https://github.com/dynamic-labs/dynamic-auth/issues/7951)) ([b1132f9](https://github.com/dynamic-labs/dynamic-auth/commit/b1132f96bda15a9cbea30c3040f6bf9cd7be5e05))
+* ensure correct dependencies are listed in packages ([#7949](https://github.com/dynamic-labs/dynamic-auth/issues/7949)) ([a84f39f](https://github.com/dynamic-labs/dynamic-auth/commit/a84f39fcb289b17c6b17b51977b685ea66b4b16d))
+* in-app browser coinbase evm wallet ([#7957](https://github.com/dynamic-labs/dynamic-auth/issues/7957)) ([a85f556](https://github.com/dynamic-labs/dynamic-auth/commit/a85f556d4c44bf331718f9d04ec64a68f492240b))
+* mfa and external wallet funding back button ([#7930](https://github.com/dynamic-labs/dynamic-auth/issues/7930)) ([7f65dc6](https://github.com/dynamic-labs/dynamic-auth/commit/7f65dc66f4d121ac5ee1b34638f52543e53476db))
+* **sdk-react-core:** logout user when SDK is upgraded ([#7940](https://github.com/dynamic-labs/dynamic-auth/issues/7940)) ([e20b113](https://github.com/dynamic-labs/dynamic-auth/commit/e20b113d5dc182df499b34080893da9fc98568f6))
+* set sms verified to always true ([#7929](https://github.com/dynamic-labs/dynamic-auth/issues/7929)) ([9bfbc99](https://github.com/dynamic-labs/dynamic-auth/commit/9bfbc999da04ee9ebf1f4f4dff8c70c1cac18131))
+
+### [4.4.3](https://github.com/dynamic-labs/dynamic-auth/compare/v4.4.2...v4.4.3) (2025-01-30)
+
+
+### Bug Fixes
+
+* remove extra useOnClickOutside hook ([#7910](https://github.com/dynamic-labs/dynamic-auth/issues/7910)) ([42fce2e](https://github.com/dynamic-labs/dynamic-auth/commit/42fce2e91e814514a72c97b3ea06930db805a200))
+
 ### [4.4.2](https://github.com/dynamic-labs/dynamic-auth/compare/v4.4.1...v4.4.2) (2025-01-30)
 
 

package/package.cjs

@@ -3,9 +3,9 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-var version = "4.4.2";
+var version = "4.4.4";
 var dependencies = {
-	"@dynamic-labs/sdk-api-core": "0.0.599",
+	"@dynamic-labs/sdk-api-core": "0.0.604",
 	"@hcaptcha/react-hcaptcha": "1.4.4",
 	"@thumbmarkjs/thumbmarkjs": "0.16.0",
 	"country-list": "2.3.0",

package/package.js

@@ -1,7 +1,7 @@
 'use client'
-var version = "4.4.2";
+var version = "4.4.4";
 var dependencies = {
-	"@dynamic-labs/sdk-api-core": "0.0.599",
+	"@dynamic-labs/sdk-api-core": "0.0.604",
 	"@hcaptcha/react-hcaptcha": "1.4.4",
 	"@thumbmarkjs/thumbmarkjs": "0.16.0",
 	"country-list": "2.3.0",

package/package.json

@@ -1,8 +1,8 @@
 {
   "name": "@dynamic-labs/sdk-react-core",
-  "version": "4.4.2",
+  "version": "4.4.4",
   "dependencies": {
-    "@dynamic-labs/sdk-api-core": "0.0.599",
+    "@dynamic-labs/sdk-api-core": "0.0.604",
     "@hcaptcha/react-hcaptcha": "1.4.4",
     "@thumbmarkjs/thumbmarkjs": "0.16.0",
     "country-list": "2.3.0",
@@ -13,16 +13,16 @@
     "react-i18next": "13.5.0",
     "yup": "0.32.11",
     "react-international-phone": "4.2.5",
-    "@dynamic-labs/assert-package-version": "4.4.2",
-    "@dynamic-labs/iconic": "4.4.2",
-    "@dynamic-labs/logger": "4.4.2",
-    "@dynamic-labs/multi-wallet": "4.4.2",
-    "@dynamic-labs/rpc-providers": "4.4.2",
-    "@dynamic-labs/store": "4.4.2",
-    "@dynamic-labs/types": "4.4.2",
-    "@dynamic-labs/utils": "4.4.2",
-    "@dynamic-labs/wallet-book": "4.4.2",
-    "@dynamic-labs/wallet-connector-core": "4.4.2",
+    "@dynamic-labs/assert-package-version": "4.4.4",
+    "@dynamic-labs/iconic": "4.4.4",
+    "@dynamic-labs/logger": "4.4.4",
+    "@dynamic-labs/multi-wallet": "4.4.4",
+    "@dynamic-labs/rpc-providers": "4.4.4",
+    "@dynamic-labs/store": "4.4.4",
+    "@dynamic-labs/types": "4.4.4",
+    "@dynamic-labs/utils": "4.4.4",
+    "@dynamic-labs/wallet-book": "4.4.4",
+    "@dynamic-labs/wallet-connector-core": "4.4.4",
     "bs58": "5.0.0",
     "eventemitter3": "5.0.1"
   },

package/src/lib/Main.cjs

@@ -103,7 +103,7 @@ const viewsToDisableCloseOnOverlayClick = [
 ];
 const Main = () => {
     const { selectedWalletConnector, linkedWallets, projectSettings, setShowAuthFlow, showAuthFlow, walletConnectorOptions, clearStatesOnBackClick, user, disconnectWallet, authMode, connectedWallets, handleLogOut, } = useInternalDynamicContext.useInternalDynamicContext();
-    const { view, goToInitialView } = ViewContext.useViewContext();
+    const { view, clearStackAndPushInitialView } = ViewContext.useViewContext();
     const { setDeniedAddress, setDeniedOauthProvider } = AccessDeniedContext.useAccessDeniedContext();
     const { setExistentAccountData } = AccountExistsContext.useAccountExistsContext();
     const { setSocialProvider } = SocialRedirectContext.useSocialRedirectContext();
@@ -167,8 +167,8 @@ const Main = () => {
     const handleOnPortalUnmount = React.useCallback(() => {
         // IMPORTANT: we need to reset the view because we reset state that the view depends on
         // so if the previous view renders when the user reopens the widget, it will crash
-        goToInitialView();
-    }, [goToInitialView]);
+        clearStackAndPushInitialView();
+    }, [clearStackAndPushInitialView]);
     useVerifyOnAwaitingSignature.useVerifyOnAwaitingSignature();
     const { handleAlreadyConnectedWallet, handleCustodialWalletClick, handleInstalledExtensionClick, handleMobileWalletClick, handleUninstalledClick, } = useWalletItemActions.useWalletItemActions();
     /* istanbul ignore next */

package/src/lib/Main.js

@@ -99,7 +99,7 @@ const viewsToDisableCloseOnOverlayClick = [
 ];
 const Main = () => {
     const { selectedWalletConnector, linkedWallets, projectSettings, setShowAuthFlow, showAuthFlow, walletConnectorOptions, clearStatesOnBackClick, user, disconnectWallet, authMode, connectedWallets, handleLogOut, } = useInternalDynamicContext();
-    const { view, goToInitialView } = useViewContext();
+    const { view, clearStackAndPushInitialView } = useViewContext();
     const { setDeniedAddress, setDeniedOauthProvider } = useAccessDeniedContext();
     const { setExistentAccountData } = useAccountExistsContext();
     const { setSocialProvider } = useSocialRedirectContext();
@@ -163,8 +163,8 @@ const Main = () => {
     const handleOnPortalUnmount = useCallback(() => {
         // IMPORTANT: we need to reset the view because we reset state that the view depends on
         // so if the previous view renders when the user reopens the widget, it will crash
-        goToInitialView();
-    }, [goToInitialView]);
+        clearStackAndPushInitialView();
+    }, [clearStackAndPushInitialView]);
     useVerifyOnAwaitingSignature();
     const { handleAlreadyConnectedWallet, handleCustodialWalletClick, handleInstalledExtensionClick, handleMobileWalletClick, handleUninstalledClick, } = useWalletItemActions();
     /* istanbul ignore next */

package/src/lib/components/DynamicConnectButton/DynamicConnectButton.cjs

@@ -11,7 +11,7 @@ require('@dynamic-labs/sdk-api-core');
 require('../../shared/logger.cjs');
 require('@dynamic-labs/iconic');
 require('@dynamic-labs/wallet-connector-core');
-var ViewContext = require('../../context/ViewContext/ViewContext.cjs');
+require('../../context/ViewContext/ViewContext.cjs');
 require('@dynamic-labs/wallet-book');
 require('@dynamic-labs/utils');
 require('../../utils/constants/colors.cjs');
@@ -94,7 +94,6 @@ var useInternalDynamicContext = require('../../context/DynamicContext/useDynamic
 
 const DynamicConnectButton = ({ buttonContainerClassName = '', buttonClassName = '', children, copykey, }) => {
     const { projectSettings, setShowAuthFlow, setSelectedWalletConnectorKey } = useInternalDynamicContext.useInternalDynamicContext();
-    const { setView } = ViewContext.useViewContext();
     const [didUserClick, setUserClicked] = React.useState(false);
     const handleOnClick = React.useCallback(() => _tslib.__awaiter(void 0, void 0, void 0, function* () {
         if (!didUserClick) {
@@ -102,7 +101,7 @@ const DynamicConnectButton = ({ buttonContainerClassName = '', buttonClassName =
         }
         setSelectedWalletConnectorKey(null);
         setShowAuthFlow(true);
-    }), [didUserClick, setSelectedWalletConnectorKey, setShowAuthFlow, setView]);
+    }), [didUserClick, setSelectedWalletConnectorKey, setShowAuthFlow]);
     return (jsxRuntime.jsx(ConnectButton.ConnectButton, { isLoading: !projectSettings, isActive: didUserClick, onClick: handleOnClick, buttonContainerClassName: buttonContainerClassName, buttonClassName: buttonClassName, copykey: copykey, children: children }));
 };
 

package/src/lib/components/DynamicConnectButton/DynamicConnectButton.js

@@ -7,7 +7,7 @@ import '@dynamic-labs/sdk-api-core';
 import '../../shared/logger.js';
 import '@dynamic-labs/iconic';
 import '@dynamic-labs/wallet-connector-core';
-import { useViewContext } from '../../context/ViewContext/ViewContext.js';
+import '../../context/ViewContext/ViewContext.js';
 import '@dynamic-labs/wallet-book';
 import '@dynamic-labs/utils';
 import '../../utils/constants/colors.js';
@@ -90,7 +90,6 @@ import { useInternalDynamicContext } from '../../context/DynamicContext/useDynam
 
 const DynamicConnectButton = ({ buttonContainerClassName = '', buttonClassName = '', children, copykey, }) => {
     const { projectSettings, setShowAuthFlow, setSelectedWalletConnectorKey } = useInternalDynamicContext();
-    const { setView } = useViewContext();
     const [didUserClick, setUserClicked] = useState(false);
     const handleOnClick = useCallback(() => __awaiter(void 0, void 0, void 0, function* () {
         if (!didUserClick) {
@@ -98,7 +97,7 @@ const DynamicConnectButton = ({ buttonContainerClassName = '', buttonClassName =
         }
         setSelectedWalletConnectorKey(null);
         setShowAuthFlow(true);
-    }), [didUserClick, setSelectedWalletConnectorKey, setShowAuthFlow, setView]);
+    }), [didUserClick, setSelectedWalletConnectorKey, setShowAuthFlow]);
     return (jsx(ConnectButton, { isLoading: !projectSettings, isActive: didUserClick, onClick: handleOnClick, buttonContainerClassName: buttonContainerClassName, buttonClassName: buttonClassName, copykey: copykey, children: children }));
 };
 

package/src/lib/components/HardwareWalletToggle/HardwareWalletToggle.cjs

@@ -4,13 +4,11 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 
 var jsxRuntime = require('react/jsx-runtime');
-var Toggle = require('../Toggle/Toggle.cjs');
-var Icon = require('../Icon/Icon.cjs');
+var React = require('react');
 require('@dynamic-labs/sdk-api-core');
 require('../../shared/logger.cjs');
 require('@dynamic-labs/iconic');
 require('@dynamic-labs/wallet-connector-core');
-require('react');
 var check = require('../../shared/assets/check.cjs');
 require('../../context/ViewContext/ViewContext.cjs');
 require('@dynamic-labs/wallet-book');
@@ -18,17 +16,20 @@ require('@dynamic-labs/utils');
 require('../../utils/constants/colors.cjs');
 require('../../utils/constants/values.cjs');
 require('../../shared/consts/index.cjs');
+var Icon = require('../Icon/Icon.cjs');
 var ListTile = require('../ListTile/ListTile.cjs');
+var Toggle = require('../Toggle/Toggle.cjs');
 
 const HardwareWalletToggle = ({ connectors, label, copykey, }) => {
-    const toggle = (jsxRuntime.jsx(Toggle.Toggle, { defaultChecked: connectors.some((connector) => connector.isHardwareWalletEnabled), onChange: (event) => {
-            connectors.forEach((connector) => {
-                connector.isHardwareWalletEnabled = event.target.checked;
-            });
-        }, "data-testid": 'hardware-wallet-toggle', icon: 
-        // eslint-disable-next-line react/jsx-wrap-multilines
-        jsxRuntime.jsx(Icon.Icon, { size: 'small', children: jsxRuntime.jsx(check.ReactComponent, {}) }) }));
-    return (jsxRuntime.jsx(ListTile.ListTile, { trailing: toggle, children: jsxRuntime.jsx("span", { copykey, children: label }) }));
+    const [isEnabled, _setEnabled] = React.useState(connectors.some((connector) => connector.isHardwareWalletEnabled));
+    const setEnabled = React.useCallback((enabled) => {
+        _setEnabled(enabled);
+        connectors.forEach((connector) => {
+            connector.isHardwareWalletEnabled = enabled;
+        });
+    }, [connectors]);
+    const toggle = (jsxRuntime.jsx(Toggle.Toggle, { value: isEnabled, dataTestId: 'hardware-wallet-toggle', icon: jsxRuntime.jsx(Icon.Icon, { size: 'small', children: jsxRuntime.jsx(check.ReactComponent, {}) }), className: 'hardware-wallet-toggle__toggle' }));
+    return (jsxRuntime.jsx(ListTile.ListTile, { onClick: () => setEnabled(!isEnabled), trailing: toggle, children: jsxRuntime.jsx("span", { copykey, children: label }) }));
 };
 
 exports.HardwareWalletToggle = HardwareWalletToggle;

package/src/lib/components/HardwareWalletToggle/HardwareWalletToggle.js

@@ -1,12 +1,10 @@
 'use client'
 import { jsx } from 'react/jsx-runtime';
-import { Toggle } from '../Toggle/Toggle.js';
-import { Icon } from '../Icon/Icon.js';
+import { useState, useCallback } from 'react';
 import '@dynamic-labs/sdk-api-core';
 import '../../shared/logger.js';
 import '@dynamic-labs/iconic';
 import '@dynamic-labs/wallet-connector-core';
-import 'react';
 import { ReactComponent as SvgCheck } from '../../shared/assets/check.js';
 import '../../context/ViewContext/ViewContext.js';
 import '@dynamic-labs/wallet-book';
@@ -14,17 +12,20 @@ import '@dynamic-labs/utils';
 import '../../utils/constants/colors.js';
 import '../../utils/constants/values.js';
 import '../../shared/consts/index.js';
+import { Icon } from '../Icon/Icon.js';
 import { ListTile } from '../ListTile/ListTile.js';
+import { Toggle } from '../Toggle/Toggle.js';
 
 const HardwareWalletToggle = ({ connectors, label, copykey, }) => {
-    const toggle = (jsx(Toggle, { defaultChecked: connectors.some((connector) => connector.isHardwareWalletEnabled), onChange: (event) => {
-            connectors.forEach((connector) => {
-                connector.isHardwareWalletEnabled = event.target.checked;
-            });
-        }, "data-testid": 'hardware-wallet-toggle', icon: 
-        // eslint-disable-next-line react/jsx-wrap-multilines
-        jsx(Icon, { size: 'small', children: jsx(SvgCheck, {}) }) }));
-    return (jsx(ListTile, { trailing: toggle, children: jsx("span", { copykey, children: label }) }));
+    const [isEnabled, _setEnabled] = useState(connectors.some((connector) => connector.isHardwareWalletEnabled));
+    const setEnabled = useCallback((enabled) => {
+        _setEnabled(enabled);
+        connectors.forEach((connector) => {
+            connector.isHardwareWalletEnabled = enabled;
+        });
+    }, [connectors]);
+    const toggle = (jsx(Toggle, { value: isEnabled, dataTestId: 'hardware-wallet-toggle', icon: jsx(Icon, { size: 'small', children: jsx(SvgCheck, {}) }), className: 'hardware-wallet-toggle__toggle' }));
+    return (jsx(ListTile, { onClick: () => setEnabled(!isEnabled), trailing: toggle, children: jsx("span", { copykey, children: label }) }));
 };
 
 export { HardwareWalletToggle };

package/src/lib/components/NeedHelpSection/NeedHelpSection.cjs

@@ -100,7 +100,7 @@ const NeedHelpSection = ({ isRecoveryFlow = false, isExport = false, }) => {
     var _a, _b, _c, _d, _e;
     const { projectSettings, user } = useInternalDynamicContext.useInternalDynamicContext();
     const { t } = reactI18next.useTranslation();
-    const { setView } = ViewContext.useViewContext();
+    const { pushView } = ViewContext.useViewContext();
     const { initPasskeyRecoveryProcess } = usePasskeyRecovery.usePasskeyRecovery();
     const supportEmail = (_a = projectSettings === null || projectSettings === void 0 ? void 0 : projectSettings.general) === null || _a === void 0 ? void 0 : _a.supportEmail;
     const supportUrls = (_b = projectSettings === null || projectSettings === void 0 ? void 0 : projectSettings.general) === null || _b === void 0 ? void 0 : _b.supportUrls;
@@ -119,7 +119,7 @@ const NeedHelpSection = ({ isRecoveryFlow = false, isExport = false, }) => {
                     settings: isExport
                         ? {
                             goBack: () => {
-                                setView('embedded-reveal-view');
+                                pushView('embedded-reveal-view');
                             },
                         }
                         : undefined,

package/src/lib/components/NeedHelpSection/NeedHelpSection.js

@@ -96,7 +96,7 @@ const NeedHelpSection = ({ isRecoveryFlow = false, isExport = false, }) => {
     var _a, _b, _c, _d, _e;
     const { projectSettings, user } = useInternalDynamicContext();
     const { t } = useTranslation();
-    const { setView } = useViewContext();
+    const { pushView } = useViewContext();
     const { initPasskeyRecoveryProcess } = usePasskeyRecovery();
     const supportEmail = (_a = projectSettings === null || projectSettings === void 0 ? void 0 : projectSettings.general) === null || _a === void 0 ? void 0 : _a.supportEmail;
     const supportUrls = (_b = projectSettings === null || projectSettings === void 0 ? void 0 : projectSettings.general) === null || _b === void 0 ? void 0 : _b.supportUrls;
@@ -115,7 +115,7 @@ const NeedHelpSection = ({ isRecoveryFlow = false, isExport = false, }) => {
                     settings: isExport
                         ? {
                             goBack: () => {
-                                setView('embedded-reveal-view');
+                                pushView('embedded-reveal-view');
                             },
                         }
                         : undefined,

package/src/lib/components/QrCodeWrapper/QrCodeContainer/QrCodeContainer.cjs

@@ -101,7 +101,7 @@ var LoadingQrCode = require('../../LoadingQrCode/LoadingQrCode.cjs');
 
 const QrCodeContainer = ({ accentColor, walletConnector, qrcodeValue, Icon: MainIcon, showCopyToClipboardButton = false, desktopUri, showQrCodeMessage, showQrCodeImage, }) => {
     const { t } = reactI18next.useTranslation();
-    const { setView } = ViewContext.useViewContext();
+    const { pushView } = ViewContext.useViewContext();
     const downloadLinks = useWalletDownloadLinks.useWalletDownloadLinks(walletConnector);
     const renderAppOrExtensionButton = () => {
         if (desktopUri) {
@@ -110,7 +110,7 @@ const QrCodeContainer = ({ accentColor, walletConnector, qrcodeValue, Icon: Main
                 jsxRuntime.jsx(Icon.Icon, { size: 'xsmall', color: 'text-tertiary', children: jsxRuntime.jsx(externalLink.ReactComponent, {}) }), children: t('dyn_qr_code.open_button') }));
         }
         if (downloadLinks === null || downloadLinks === void 0 ? void 0 : downloadLinks.length) {
-            return (jsxRuntime.jsx(TypographyButton.TypographyButton, { expanded: true, dataTestId: 'get-extension-button', buttonPadding: 'small', buttonVariant: 'primary', buttonClassName: 'qr-code-button', onClick: () => setView('no-qr-not-installed'), copykey: 'dyn_qr_code.get_extension_button', typographyProps: { variant: 'button_secondary' }, startSlot: 
+            return (jsxRuntime.jsx(TypographyButton.TypographyButton, { expanded: true, dataTestId: 'get-extension-button', buttonPadding: 'small', buttonVariant: 'primary', buttonClassName: 'qr-code-button', onClick: () => pushView('no-qr-not-installed'), copykey: 'dyn_qr_code.get_extension_button', typographyProps: { variant: 'button_secondary' }, startSlot: 
                 // eslint-disable-next-line react/jsx-wrap-multilines
                 jsxRuntime.jsx(Icon.Icon, { size: 'xsmall', color: 'text-tertiary', children: jsxRuntime.jsx(externalLink.ReactComponent, {}) }), children: t('dyn_qr_code.get_extension_button') }));
         }

package/src/lib/components/QrCodeWrapper/QrCodeContainer/QrCodeContainer.js

@@ -97,7 +97,7 @@ import { LoadingQrCode } from '../../LoadingQrCode/LoadingQrCode.js';
 
 const QrCodeContainer = ({ accentColor, walletConnector, qrcodeValue, Icon: MainIcon, showCopyToClipboardButton = false, desktopUri, showQrCodeMessage, showQrCodeImage, }) => {
     const { t } = useTranslation();
-    const { setView } = useViewContext();
+    const { pushView } = useViewContext();
     const downloadLinks = useWalletDownloadLinks(walletConnector);
     const renderAppOrExtensionButton = () => {
         if (desktopUri) {
@@ -106,7 +106,7 @@ const QrCodeContainer = ({ accentColor, walletConnector, qrcodeValue, Icon: Main
                 jsx(Icon, { size: 'xsmall', color: 'text-tertiary', children: jsx(SvgExternalLink, {}) }), children: t('dyn_qr_code.open_button') }));
         }
         if (downloadLinks === null || downloadLinks === void 0 ? void 0 : downloadLinks.length) {
-            return (jsx(TypographyButton, { expanded: true, dataTestId: 'get-extension-button', buttonPadding: 'small', buttonVariant: 'primary', buttonClassName: 'qr-code-button', onClick: () => setView('no-qr-not-installed'), copykey: 'dyn_qr_code.get_extension_button', typographyProps: { variant: 'button_secondary' }, startSlot: 
+            return (jsx(TypographyButton, { expanded: true, dataTestId: 'get-extension-button', buttonPadding: 'small', buttonVariant: 'primary', buttonClassName: 'qr-code-button', onClick: () => pushView('no-qr-not-installed'), copykey: 'dyn_qr_code.get_extension_button', typographyProps: { variant: 'button_secondary' }, startSlot: 
                 // eslint-disable-next-line react/jsx-wrap-multilines
                 jsx(Icon, { size: 'xsmall', color: 'text-tertiary', children: jsx(SvgExternalLink, {}) }), children: t('dyn_qr_code.get_extension_button') }));
         }

package/src/lib/components/Toggle/Toggle.cjs

@@ -3,13 +3,9 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-var _tslib = require('../../../../_virtual/_tslib.cjs');
 var jsxRuntime = require('react/jsx-runtime');
 var classNames = require('../../utils/functions/classNames/classNames.cjs');
 
-const Toggle = (_a) => {
-    var { icon, variant = 'primary', className } = _a, props = _tslib.__rest(_a, ["icon", "variant", "className"]);
-    return (jsxRuntime.jsxs("label", { className: classNames.classNames('toggle', className), children: [jsxRuntime.jsx("input", Object.assign({ type: 'checkbox', className: 'toggle--input' }, props)), jsxRuntime.jsx("div", { className: classNames.classNames('toggle--content', `toggle--content__variant-${variant}`), children: jsxRuntime.jsx("div", { className: 'toggle--knob', children: icon }) })] }));
-};
+const Toggle = ({ icon, variant = 'primary', value, onChange, dataTestId, className, style, }) => (jsxRuntime.jsxs("label", { className: classNames.classNames('toggle', className), style: style, children: [jsxRuntime.jsx("input", { type: 'checkbox', className: 'toggle--input', "data-testid": dataTestId, checked: value, onChange: () => onChange === null || onChange === void 0 ? void 0 : onChange(!value) }), jsxRuntime.jsx("div", { className: classNames.classNames('toggle--content', `toggle--content__variant-${variant}`), children: jsxRuntime.jsx("div", { className: 'toggle--knob', children: icon }) })] }));
 
 exports.Toggle = Toggle;

package/src/lib/components/Toggle/Toggle.d.ts

@@ -1,7 +1,11 @@
-import { ComponentPropsWithoutRef, FC } from 'react';
-type ToggleProps = ComponentPropsWithoutRef<'input'> & {
+import { FC } from 'react';
+import { ClassStyleProps } from '../../utils/types';
+type ToggleProps = ClassStyleProps & {
+    dataTestId?: string;
     icon?: JSX.Element;
     variant?: 'primary';
+    value?: boolean;
+    onChange?: (value: boolean) => void;
 };
 export declare const Toggle: FC<ToggleProps>;
 export {};

package/src/lib/components/Toggle/Toggle.js

@@ -1,11 +1,7 @@
 'use client'
-import { __rest } from '../../../../_virtual/_tslib.js';
 import { jsxs, jsx } from 'react/jsx-runtime';
 import { classNames } from '../../utils/functions/classNames/classNames.js';
 
-const Toggle = (_a) => {
-    var { icon, variant = 'primary', className } = _a, props = __rest(_a, ["icon", "variant", "className"]);
-    return (jsxs("label", { className: classNames('toggle', className), children: [jsx("input", Object.assign({ type: 'checkbox', className: 'toggle--input' }, props)), jsx("div", { className: classNames('toggle--content', `toggle--content__variant-${variant}`), children: jsx("div", { className: 'toggle--knob', children: icon }) })] }));
-};
+const Toggle = ({ icon, variant = 'primary', value, onChange, dataTestId, className, style, }) => (jsxs("label", { className: classNames('toggle', className), style: style, children: [jsx("input", { type: 'checkbox', className: 'toggle--input', "data-testid": dataTestId, checked: value, onChange: () => onChange === null || onChange === void 0 ? void 0 : onChange(!value) }), jsx("div", { className: classNames('toggle--content', `toggle--content__variant-${variant}`), children: jsx("div", { className: 'toggle--knob', children: icon }) })] }));
 
 export { Toggle };

package/src/lib/components/TransactionConfirmationPageLayout/TransactionConfirmationPageLayout.cjs

@@ -115,7 +115,7 @@ const TransactionConfirmationPageLayout = ({ onClickClose, isLoading, onClickBac
     const { t } = reactI18next.useTranslation();
     const { isTurnkeyWallet } = useIsTurnkeyWallet.useIsTurnkeyWallet();
     const { setShowAuthFlow } = useInternalDynamicContext.useInternalDynamicContext();
-    const { setView } = ViewContext.useViewContext();
+    const { pushView } = ViewContext.useViewContext();
     const { userNeedsCrossDomainPasskey } = PasskeyContext.usePasskeyContext();
     const { initPasskeyRecoveryProcess, shouldInitRecovery } = usePasskeyRecovery.usePasskeyRecovery();
     const { currency } = useFetchCurrency.useFetchCurrency(walletConnector);
@@ -128,7 +128,7 @@ const TransactionConfirmationPageLayout = ({ onClickClose, isLoading, onClickBac
         userNeedsCrossDomainPasskey,
         usingSessionKey: usingSessionKeys.usingSessionKey,
         walletConnector,
-    }, { initPasskeyRecoveryProcess, shouldInitRecovery }, { setShowAuthFlow, setView });
+    }, { initPasskeyRecoveryProcess, shouldInitRecovery }, { pushView, setShowAuthFlow });
     const closeButton = onClickClose && (jsxRuntime.jsx(IconButton.IconButton, { type: 'button', onClick: onClickClose, "data-testid": 'close', disabled: isLoading, children: jsxRuntime.jsx(close.ReactComponent, {}) }));
     const backButton = onClickBack && (jsxRuntime.jsx(IconButton.IconButton, { type: 'button', onClick: onClickBack, "data-testid": 'back-button', children: jsxRuntime.jsx(arrowLeft.ReactComponent, {}) }));
     const gasFiatValue = fiatUtils.getGasFiatValue(currentToken, transaction, nativePrice);

package/src/lib/components/TransactionConfirmationPageLayout/TransactionConfirmationPageLayout.js

@@ -111,7 +111,7 @@ const TransactionConfirmationPageLayout = ({ onClickClose, isLoading, onClickBac
     const { t } = useTranslation();
     const { isTurnkeyWallet } = useIsTurnkeyWallet();
     const { setShowAuthFlow } = useInternalDynamicContext();
-    const { setView } = useViewContext();
+    const { pushView } = useViewContext();
     const { userNeedsCrossDomainPasskey } = usePasskeyContext();
     const { initPasskeyRecoveryProcess, shouldInitRecovery } = usePasskeyRecovery();
     const { currency } = useFetchCurrency(walletConnector);
@@ -124,7 +124,7 @@ const TransactionConfirmationPageLayout = ({ onClickClose, isLoading, onClickBac
         userNeedsCrossDomainPasskey,
         usingSessionKey,
         walletConnector,
-    }, { initPasskeyRecoveryProcess, shouldInitRecovery }, { setShowAuthFlow, setView });
+    }, { initPasskeyRecoveryProcess, shouldInitRecovery }, { pushView, setShowAuthFlow });
     const closeButton = onClickClose && (jsx(IconButton, { type: 'button', onClick: onClickClose, "data-testid": 'close', disabled: isLoading, children: jsx(SvgClose, {}) }));
     const backButton = onClickBack && (jsx(IconButton, { type: 'button', onClick: onClickBack, "data-testid": 'back-button', children: jsx(SvgArrowLeft, {}) }));
     const gasFiatValue = getGasFiatValue(currentToken, transaction, nativePrice);

package/src/lib/components/TransactionConfirmationPageLayout/utils.cjs

@@ -67,7 +67,7 @@ const useHandleRecovery = (walletConnector, usingSessionKey, onSuccess, shouldIn
 const useHandleSubmitWithChecks = (config, recoveryHandlers, viewHandlers) => (e) => _tslib.__awaiter(void 0, void 0, void 0, function* () {
     const { walletConnector, usingSessionKey, onClickSend, isTurnkeyWallet, userNeedsCrossDomainPasskey, } = config;
     const { shouldInitRecovery, initPasskeyRecoveryProcess } = recoveryHandlers;
-    const { setView, setShowAuthFlow } = viewHandlers;
+    const { pushView, setShowAuthFlow } = viewHandlers;
     if (walletConnector && usingSessionKey(walletConnector)) {
         onClickSend(e);
         return;
@@ -78,7 +78,7 @@ const useHandleSubmitWithChecks = (config, recoveryHandlers, viewHandlers) => (e
         });
     }
     if (isTurnkeyWallet && userNeedsCrossDomainPasskey) {
-        setView('passkey-new-domain-detected');
+        pushView('passkey-new-domain-detected');
         setShowAuthFlow(true, {
             ignoreIfIsEmbeddedWidget: false,
             performMultiWalletChecks: false,

package/src/lib/components/TransactionConfirmationPageLayout/utils.d.ts

@@ -20,7 +20,7 @@ interface RecoveryHandlers {
     initPasskeyRecoveryProcess: (authenticatorType?: AuthenticatorType, currentAction?: EmbeddedWalletCurrentAction) => Promise<Wallet>;
 }
 interface ViewHandlers {
-    setView: (view: ViewType) => void;
+    pushView: (view: ViewType) => void;
     setShowAuthFlow: (show: boolean, options: AuthFlowOptions) => void;
 }
 export declare const useCurrencySymbol: (currentToken: TokenBalance | undefined, currency: string | undefined) => string | undefined;

package/src/lib/components/TransactionConfirmationPageLayout/utils.js

@@ -63,7 +63,7 @@ const useHandleRecovery = (walletConnector, usingSessionKey, onSuccess, shouldIn
 const useHandleSubmitWithChecks = (config, recoveryHandlers, viewHandlers) => (e) => __awaiter(void 0, void 0, void 0, function* () {
     const { walletConnector, usingSessionKey, onClickSend, isTurnkeyWallet, userNeedsCrossDomainPasskey, } = config;
     const { shouldInitRecovery, initPasskeyRecoveryProcess } = recoveryHandlers;
-    const { setView, setShowAuthFlow } = viewHandlers;
+    const { pushView, setShowAuthFlow } = viewHandlers;
     if (walletConnector && usingSessionKey(walletConnector)) {
         onClickSend(e);
         return;
@@ -74,7 +74,7 @@ const useHandleSubmitWithChecks = (config, recoveryHandlers, viewHandlers) => (e
         });
     }
     if (isTurnkeyWallet && userNeedsCrossDomainPasskey) {
-        setView('passkey-new-domain-detected');
+        pushView('passkey-new-domain-detected');
         setShowAuthFlow(true, {
             ignoreIfIsEmbeddedWidget: false,
             performMultiWalletChecks: false,

package/src/lib/context/CaptchaContext/CaptchaContext.cjs

@@ -20,13 +20,13 @@ require('../../shared/consts/index.cjs');
 
 const CaptchaContext = React.createContext(undefined);
 const CaptchaContextProvider = ({ children, }) => {
-    const { setView } = ViewContext.useViewContext();
+    const { pushView } = ViewContext.useViewContext();
     const [captchaToken, setCaptchaToken, removeCaptchaToken] = useLocalStorage.useLocalStorage(localStorage.CAPTCHA_TOKEN, undefined);
     const [captchaAuthState, setCaptchaAuthState] = React.useState();
     const engageCaptcha = React.useCallback(({ authMethod, onCaptchaSuccess, }) => {
         setCaptchaAuthState({ authMethod, onCaptchaSuccess });
-        setView('captcha');
-    }, [setView, setCaptchaAuthState]);
+        pushView('captcha');
+    }, [pushView, setCaptchaAuthState]);
     const getCaptchaToken = React.useCallback(() => {
         const token = captchaToken;
         removeCaptchaToken();

package/src/lib/context/CaptchaContext/CaptchaContext.js

@@ -16,13 +16,13 @@ import '../../shared/consts/index.js';
 
 const CaptchaContext = createContext(undefined);
 const CaptchaContextProvider = ({ children, }) => {
-    const { setView } = useViewContext();
+    const { pushView } = useViewContext();
     const [captchaToken, setCaptchaToken, removeCaptchaToken] = useLocalStorage(CAPTCHA_TOKEN, undefined);
     const [captchaAuthState, setCaptchaAuthState] = useState();
     const engageCaptcha = useCallback(({ authMethod, onCaptchaSuccess, }) => {
         setCaptchaAuthState({ authMethod, onCaptchaSuccess });
-        setView('captcha');
-    }, [setView, setCaptchaAuthState]);
+        pushView('captcha');
+    }, [pushView, setCaptchaAuthState]);
     const getCaptchaToken = useCallback(() => {
         const token = captchaToken;
         removeCaptchaToken();

package/src/lib/context/ConnectWithOtpContext/utils/createSmsHandler.cjs

@@ -58,7 +58,7 @@ const createSmsHandler = (environmentId, { shouldRegisterSessionKeysOnSignin, ge
             return {
                 destination: phone,
                 response: response,
-                verified: Boolean(response.jwt),
+                verified: true,
             };
         }),
     };

package/src/lib/context/ConnectWithOtpContext/utils/createSmsHandler.js

@@ -54,7 +54,7 @@ const createSmsHandler = (environmentId, { shouldRegisterSessionKeysOnSignin, ge
             return {
                 destination: phone,
                 response: response,
-                verified: Boolean(response.jwt),
+                verified: true,
             };
         }),
     };

package/src/lib/context/DynamicContext/DynamicContext.cjs

@@ -166,10 +166,15 @@ const InnerDynamicContextProvider = (props) => {
     useRegisterStorageService.useRegisterStorageService({
         storagePostfix: settings$1.localStorageSuffix,
     });
+    /**
+     * Tracks if the store version has changed so we can logout
+     * to ensure the whole state is cleared
+     */
+    const didStoreVersionChangedRef = React.useRef(false);
     /**
      * initialize global store
      */
-    store.initializeStore(props);
+    store.initializeStore(Object.assign(Object.assign({}, props), { onPersistedVersionChanged: () => (didStoreVersionChangedRef.current = true) }));
     dynamicContextProps.useSyncDynamicContextProps(props);
     /**
      * Sets the chain info overrides if they are present
@@ -365,6 +370,7 @@ const InnerDynamicContextProvider = (props) => {
         walletConnectors,
     });
     useValidateSession.useValidateSession({
+        didStoreVersionChangedRef,
         environmentId,
         handleLogOut,
     });

package/src/lib/context/DynamicContext/DynamicContext.js

@@ -1,7 +1,7 @@
 'use client'
 import { __awaiter } from '../../../../_virtual/_tslib.js';
 import { jsx, jsxs } from 'react/jsx-runtime';
-import { createContext, useState, useMemo, useRef, useEffect, useCallback } from 'react';
+import { createContext, useRef, useState, useMemo, useEffect, useCallback } from 'react';
 import { I18nextProvider } from 'react-i18next';
 import { getIconicSpriteUrl } from '@dynamic-labs/iconic';
 import { Logger } from '@dynamic-labs/logger';
@@ -162,10 +162,15 @@ const InnerDynamicContextProvider = (props) => {
     useRegisterStorageService({
         storagePostfix: settings.localStorageSuffix,
     });
+    /**
+     * Tracks if the store version has changed so we can logout
+     * to ensure the whole state is cleared
+     */
+    const didStoreVersionChangedRef = useRef(false);
     /**
      * initialize global store
      */
-    initializeStore(props);
+    initializeStore(Object.assign(Object.assign({}, props), { onPersistedVersionChanged: () => (didStoreVersionChangedRef.current = true) }));
     useSyncDynamicContextProps(props);
     /**
      * Sets the chain info overrides if they are present
@@ -361,6 +366,7 @@ const InnerDynamicContextProvider = (props) => {
         walletConnectors,
     });
     useValidateSession({
+        didStoreVersionChangedRef,
         environmentId,
         handleLogOut,
     });

package/src/lib/context/MockContext/MockContext.cjs

@@ -93,10 +93,8 @@ const MockContextProvider = ({ children, view, customerTheme, dynamicLayoutClass
         clearStackAndPush: () => { },
         clearStackAndPushInitialView: () => { },
         goBack: () => { },
-        goToInitialView: () => { },
         pushView: () => { },
         replaceView: () => { },
-        setView: () => { },
         stack: [],
         view,
     };