@dynamic-labs/sdk-react-core 4.9.2-preview.0 → 4.9.2

package/CHANGELOG.md

@@ -1,5 +1,18 @@
 
-### [4.9.2-preview.0](https://github.com/dynamic-labs/dynamic-auth/compare/v4.9.1...v4.9.2-preview.0) (2025-03-11)
+### [4.9.2](https://github.com/dynamic-labs/dynamic-auth/compare/v4.9.1...v4.9.2) (2025-03-12)
+
+
+### Features
+
+* **QNTM-2951:** update sdk styles ([#8214](https://github.com/dynamic-labs/dynamic-auth/issues/8214)) ([45cefa8](https://github.com/dynamic-labs/dynamic-auth/commit/45cefa82bdaad769c63ffeab4fb48f88ac855461))
+
+
+### Bug Fixes
+
+* embedded widget race condition that would show both embedded and non-embedded widgets at the same time ([#8208](https://github.com/dynamic-labs/dynamic-auth/issues/8208)) ([031fb77](https://github.com/dynamic-labs/dynamic-auth/commit/031fb775c10daa383bf56ab7ba5fa4cf6ae9451c))
+* **iframe-setup:** require the initial parent url when using an iframe ([#8268](https://github.com/dynamic-labs/dynamic-auth/issues/8268)) ([258e8a1](https://github.com/dynamic-labs/dynamic-auth/commit/258e8a128c31b8695518f9943bc74de9fce63196))
+* improve WalletConnect experience ([#8201](https://github.com/dynamic-labs/dynamic-auth/issues/8201)) ([a09b16d](https://github.com/dynamic-labs/dynamic-auth/commit/a09b16de2ccd3cbba89f70a8ded4b7656f09f807)), closes [#8202](https://github.com/dynamic-labs/dynamic-auth/issues/8202) [#8207](https://github.com/dynamic-labs/dynamic-auth/issues/8207)
+* prevent closing modal when mfa view is required ([#8156](https://github.com/dynamic-labs/dynamic-auth/issues/8156)) ([c34b245](https://github.com/dynamic-labs/dynamic-auth/commit/c34b24509e3f96046e72150b055d9c820f98706f))
 
 ### [4.9.1](https://github.com/dynamic-labs/dynamic-auth/compare/v4.9.0...v4.9.1) (2025-03-11)
 

package/package.cjs

@@ -3,9 +3,9 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-var version = "4.9.2-preview.0";
+var version = "4.9.2";
 var dependencies = {
-	"@dynamic-labs/sdk-api-core": "0.0.638",
+	"@dynamic-labs/sdk-api-core": "0.0.640",
 	"@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.9.2-preview.0";
+var version = "4.9.2";
 var dependencies = {
-	"@dynamic-labs/sdk-api-core": "0.0.638",
+	"@dynamic-labs/sdk-api-core": "0.0.640",
 	"@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.9.2-preview.0",
+  "version": "4.9.2",
   "dependencies": {
-    "@dynamic-labs/sdk-api-core": "0.0.638",
+    "@dynamic-labs/sdk-api-core": "0.0.640",
     "@hcaptcha/react-hcaptcha": "1.4.4",
     "@thumbmarkjs/thumbmarkjs": "0.16.0",
     "country-list": "2.3.0",
@@ -14,16 +14,16 @@
     "yup": "0.32.11",
     "react-international-phone": "4.2.5",
     "bs58": "5.0.0",
-    "@dynamic-labs/assert-package-version": "4.9.2-preview.0",
-    "@dynamic-labs/iconic": "4.9.2-preview.0",
-    "@dynamic-labs/logger": "4.9.2-preview.0",
-    "@dynamic-labs/multi-wallet": "4.9.2-preview.0",
-    "@dynamic-labs/rpc-providers": "4.9.2-preview.0",
-    "@dynamic-labs/store": "4.9.2-preview.0",
-    "@dynamic-labs/types": "4.9.2-preview.0",
-    "@dynamic-labs/utils": "4.9.2-preview.0",
-    "@dynamic-labs/wallet-book": "4.9.2-preview.0",
-    "@dynamic-labs/wallet-connector-core": "4.9.2-preview.0",
+    "@dynamic-labs/assert-package-version": "4.9.2",
+    "@dynamic-labs/iconic": "4.9.2",
+    "@dynamic-labs/logger": "4.9.2",
+    "@dynamic-labs/multi-wallet": "4.9.2",
+    "@dynamic-labs/rpc-providers": "4.9.2",
+    "@dynamic-labs/store": "4.9.2",
+    "@dynamic-labs/types": "4.9.2",
+    "@dynamic-labs/utils": "4.9.2",
+    "@dynamic-labs/wallet-book": "4.9.2",
+    "@dynamic-labs/wallet-connector-core": "4.9.2",
     "eventemitter3": "5.0.1"
   },
   "devDependencies": {

package/src/index.cjs

@@ -99,8 +99,8 @@ require('@dynamic-labs/wallet-book');
 require('./lib/store/state/walletOptions/walletOptions.cjs');
 var useWalletItemActions = require('./lib/utils/hooks/useWalletItemActions/useWalletItemActions.cjs');
 require('react-i18next');
-var useSmartWallets = require('./lib/utils/hooks/useSmartWallets/useSmartWallets.cjs');
 require('./lib/context/FooterAnimationContext/index.cjs');
+var useSmartWallets = require('./lib/utils/hooks/useSmartWallets/useSmartWallets.cjs');
 var ShadowDOM = require('./lib/components/ShadowDOM/ShadowDOM.cjs');
 require('./lib/components/Transition/ZoomTransition/ZoomTransition.cjs');
 require('./lib/components/Transition/SlideInUpTransition/SlideInUpTransition.cjs');

package/src/index.js

@@ -95,8 +95,8 @@ import '@dynamic-labs/wallet-book';
 import './lib/store/state/walletOptions/walletOptions.js';
 export { useWalletItemActions } from './lib/utils/hooks/useWalletItemActions/useWalletItemActions.js';
 import 'react-i18next';
-export { useSmartWallets } from './lib/utils/hooks/useSmartWallets/useSmartWallets.js';
 import './lib/context/FooterAnimationContext/index.js';
+export { useSmartWallets } from './lib/utils/hooks/useSmartWallets/useSmartWallets.js';
 export { ShadowDOM } from './lib/components/ShadowDOM/ShadowDOM.js';
 import './lib/components/Transition/ZoomTransition/ZoomTransition.js';
 import './lib/components/Transition/SlideInUpTransition/SlideInUpTransition.js';

package/src/lib/components/Portal/ModalComponent/ModalComponent.cjs

@@ -0,0 +1,32 @@
+'use client'
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var jsxRuntime = require('react/jsx-runtime');
+var React = require('react');
+var ReactFocusLock = require('react-focus-lock');
+var useAllowClose = require('../../../utils/hooks/useAuthLayoutChecks/useAllowClose/useAllowClose.cjs');
+var useKeyboardEventListener = require('../../../utils/hooks/useKeyboardEventListener/useKeyboardEventListener.cjs');
+
+function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
+
+var ReactFocusLock__default = /*#__PURE__*/_interopDefaultLegacy(ReactFocusLock);
+
+const ModalComponent = ({ children, handleClose, withBackdrop = true, whiteList, }) => {
+    const { allowsClosing } = useAllowClose.useAllowClose();
+    const onBackdropClick = React.useCallback((e) => {
+        if (!allowsClosing)
+            return;
+        e.stopPropagation();
+        handleClose(e);
+    }, [allowsClosing, handleClose]);
+    useKeyboardEventListener.useKeyboardEventListener({
+        disabled: !allowsClosing,
+        inputKey: 'Escape',
+        onKeyPressed: handleClose,
+    });
+    return (jsxRuntime.jsxs(ReactFocusLock__default["default"], { className: 'modal-component__container', whiteList: whiteList, children: [withBackdrop && (jsxRuntime.jsx("div", { "data-testid": 'portal-backdrop', role: 'button', onClick: onBackdropClick, tabIndex: 0, "aria-label": 'Close modal', className: 'modal-component__backdrop' })), jsxRuntime.jsx("div", { children: children })] }));
+};
+
+exports.ModalComponent = ModalComponent;

package/src/lib/components/Portal/ModalComponent/ModalComponent.d.ts

@@ -0,0 +1,9 @@
+import { PropsWithChildren } from 'react';
+export type ModalComponentProps = PropsWithChildren & {
+    handleClose: (e: {
+        stopPropagation: VoidFunction;
+    }) => void;
+    whiteList?: (activeElement: HTMLElement) => boolean;
+    withBackdrop?: boolean;
+};
+export declare const ModalComponent: ({ children, handleClose, withBackdrop, whiteList, }: ModalComponentProps) => JSX.Element;

package/src/lib/components/Portal/ModalComponent/ModalComponent.js

@@ -0,0 +1,24 @@
+'use client'
+import { jsxs, jsx } from 'react/jsx-runtime';
+import { useCallback } from 'react';
+import ReactFocusLock from 'react-focus-lock';
+import { useAllowClose } from '../../../utils/hooks/useAuthLayoutChecks/useAllowClose/useAllowClose.js';
+import { useKeyboardEventListener } from '../../../utils/hooks/useKeyboardEventListener/useKeyboardEventListener.js';
+
+const ModalComponent = ({ children, handleClose, withBackdrop = true, whiteList, }) => {
+    const { allowsClosing } = useAllowClose();
+    const onBackdropClick = useCallback((e) => {
+        if (!allowsClosing)
+            return;
+        e.stopPropagation();
+        handleClose(e);
+    }, [allowsClosing, handleClose]);
+    useKeyboardEventListener({
+        disabled: !allowsClosing,
+        inputKey: 'Escape',
+        onKeyPressed: handleClose,
+    });
+    return (jsxs(ReactFocusLock, { className: 'modal-component__container', whiteList: whiteList, children: [withBackdrop && (jsx("div", { "data-testid": 'portal-backdrop', role: 'button', onClick: onBackdropClick, tabIndex: 0, "aria-label": 'Close modal', className: 'modal-component__backdrop' })), jsx("div", { children: children })] }));
+};
+
+export { ModalComponent };

package/src/lib/components/Portal/ModalComponent/index.d.ts

@@ -0,0 +1 @@
+export * from './ModalComponent';

package/src/lib/components/Portal/Portal.cjs

@@ -6,132 +6,16 @@ Object.defineProperty(exports, '__esModule', { value: true });
 var jsxRuntime = require('react/jsx-runtime');
 var React = require('react');
 var reactDom = require('react-dom');
-var ReactFocusLock = require('react-focus-lock');
-require('../Transition/ZoomTransition/ZoomTransition.cjs');
-require('../Transition/SlideInUpTransition/SlideInUpTransition.cjs');
-var OpacityTransition = require('../Transition/OpacityTransition/OpacityTransition.cjs');
-require('../../../../_virtual/_tslib.cjs');
-require('../../events/dynamicEvents.cjs');
-require('@dynamic-labs/utils');
-require('../../context/DynamicContext/DynamicContext.cjs');
-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('@dynamic-labs/wallet-book');
-require('../../utils/constants/colors.cjs');
-require('../../utils/constants/values.cjs');
-require('../../shared/consts/index.cjs');
-require('../../context/CaptchaContext/CaptchaContext.cjs');
-require('../../context/ErrorContext/ErrorContext.cjs');
-require('@dynamic-labs/multi-wallet');
-require('react-international-phone');
-require('../../store/state/nonce/nonce.cjs');
-require('../../store/state/projectSettings/projectSettings.cjs');
-require('../../config/ApiEndpoint.cjs');
-require('../../store/state/user/user.cjs');
-require('../../locale/locale.cjs');
-require('../../store/state/dynamicContextProps/dynamicContextProps.cjs');
-require('../../store/state/primaryWalletId/primaryWalletId.cjs');
-require('../../context/AccessDeniedContext/AccessDeniedContext.cjs');
-require('../../context/AccountExistsContext/AccountExistsContext.cjs');
-require('../../context/UserWalletsContext/UserWalletsContext.cjs');
-require('../../store/state/connectedWalletsInfo/connectedWalletsInfo.cjs');
-require('../../context/VerificationContext/VerificationContext.cjs');
 var useElementById = require('../../utils/hooks/useElementById/useElementById.cjs');
-require('../../utils/functions/compareChains/compareChains.cjs');
-require('../../context/ThemeContext/ThemeContext.cjs');
-require('../../utils/hooks/useUserUpdateRequest/useUpdateUser/userFieldsSchema.cjs');
-require('bs58');
-require('@dynamic-labs/types');
-require('../../context/SocialRedirectContext/SocialRedirectContext.cjs');
-require('../../context/LoadingContext/LoadingContext.cjs');
-require('../../context/WalletContext/WalletContext.cjs');
-require('../../utils/hooks/useEmbeddedWallet/useSecureEnclaveEmbeddedWallet/constants.cjs');
-require('yup');
-require('../../context/MockContext/MockContext.cjs');
-require('../../views/CollectUserDataView/useFields.cjs');
-require('../../context/FieldsStateContext/FieldsStateContext.cjs');
-require('../../context/UserFieldEditorContext/UserFieldEditorContext.cjs');
-require('@dynamic-labs/rpc-providers');
-require('../../store/state/loadingAndLifecycle.cjs');
-require('../../store/state/walletOptions/walletOptions.cjs');
-require('react-i18next');
-require('../Accordion/components/AccordionItem/AccordionItem.cjs');
-require('../Alert/Alert.cjs');
 var ShadowDOM = require('../ShadowDOM/ShadowDOM.cjs');
-require('../IconButton/IconButton.cjs');
-require('../InlineWidget/InlineWidget.cjs');
-require('../Input/Input.cjs');
-require('../IsBrowser/IsBrowser.cjs');
-require('../MenuList/Dropdown/Dropdown.cjs');
-require('../OverlayCard/OverlayCard.cjs');
-require('../PasskeyCreatedSuccessBanner/PasskeyCreatedSuccessBanner.cjs');
-require('../Popper/Popper/Popper.cjs');
-require('../Popper/PopperContext/PopperContext.cjs');
-var useKeyboardEventListener = require('../../utils/hooks/useKeyboardEventListener/useKeyboardEventListener.cjs');
-require('qrcode');
-require('formik');
-require('../../utils/hooks/useSubdomainCheck/useSubdomainCheck.cjs');
-require('../../context/WalletGroupContext/WalletGroupContext.cjs');
-require('../../context/IpConfigurationContext/IpConfigurationContext.cjs');
-require('../../context/ConnectWithOtpContext/ConnectWithOtpContext.cjs');
-require('../../context/ConnectWithOtpContext/constants.cjs');
-require('../../widgets/DynamicBridgeWidget/views/WalletsView/components/SecondaryWallets/SecondaryWallets.cjs');
-require('@hcaptcha/react-hcaptcha');
-require('../../widgets/DynamicWidget/context/DynamicWidgetContext.cjs');
-require('../../context/FooterAnimationContext/index.cjs');
-require('../../context/ErrorContext/hooks/useErrorText/useErrorText.cjs');
-require('../../context/PasskeyContext/PasskeyContext.cjs');
-require('../../store/state/sendBalances.cjs');
-require('../../store/state/connectorsInitializing/connectorsInitializing.cjs');
-require('../OverlayCardBase/OverlayCardTarget/OverlayCardTarget.cjs');
-require('../../widgets/DynamicWidget/components/DynamicWidgetHeader/DynamicWidgetHeader.cjs');
-require('../../views/TransactionConfirmationView/TransactionConfirmationView.cjs');
-require('../../widgets/DynamicWidget/views/ManagePasskeysWidgetView/PasskeyCard/PasskeyCard.cjs');
-require('../../context/OnrampContext/OnrampContext.cjs');
-require('../../widgets/DynamicWidget/views/ReceiveWalletFunds/ReceiveWalletFunds.cjs');
-require('../../../index.cjs');
-require('../../store/state/tokenBalances.cjs');
-require('../../shared/utils/functions/getInitialUrl/getInitialUrl.cjs');
-
-function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
-
-var ReactFocusLock__default = /*#__PURE__*/_interopDefaultLegacy(ReactFocusLock);
+var OpacityTransition = require('../Transition/OpacityTransition/OpacityTransition.cjs');
+var ModalComponent = require('./ModalComponent/ModalComponent.cjs');
 
-const ModalComponent = ({ children, handleClose, withBackdrop = true, zIndex, whiteList, }) => {
-    const { view } = ViewContext.useViewContext();
-    const shouldCloseOnBackdropClick = (view === null || view === void 0 ? void 0 : view.type) &&
-        view.type !== 'collect-user-data' &&
-        view.type !== 'login-with-email-verification' &&
-        view.type !== 'login-with-sms-verification' &&
-        view.type !== 'verify-sms' &&
-        view.type !== 'verify-email' &&
-        view.type !== 'mfa-verification' &&
-        view.type !== 'mfa-display-backup-codes';
-    const onBackdropClick = (e) => {
-        if (!shouldCloseOnBackdropClick)
-            return;
-        e.stopPropagation();
-        handleClose(e);
-    };
-    useKeyboardEventListener.useKeyboardEventListener({
-        disabled: !shouldCloseOnBackdropClick,
-        inputKey: 'Escape',
-        onKeyPressed: handleClose,
-    });
-    return (jsxRuntime.jsxs(ReactFocusLock__default["default"], { className: 'portal__container', whiteList: whiteList, children: [withBackdrop && (jsxRuntime.jsx("div", { "data-testid": 'portal-backdrop', role: 'button', onClick: (e) => {
-                    onBackdropClick(e);
-                }, tabIndex: 0, "aria-label": 'Close modal', 
-                // z-index - 2 to ensure that the backdrop is always behind the content
-                style: { zIndex: zIndex ? zIndex - 2 : undefined }, className: 'portal__backdrop' })), jsxRuntime.jsx("div", { style: { zIndex }, children: children })] }));
-};
 const Portal = ({ children, isShown, handleClose, withBackdrop, zIndex, transitionEvents, elementId = 'dynamic-modal', }) => {
     const { createRootElement } = useElementById.useElementById();
     const modalRootElementRef = createRootElement(elementId);
     const whiteList = React.useCallback((node) => modalRootElementRef.current.contains(node), [modalRootElementRef]);
-    return reactDom.createPortal(jsxRuntime.jsx(ShadowDOM.ShadowDOM, { zIndex: zIndex, dataTestId: 'dynamic-modal-shadow', children: jsxRuntime.jsx(OpacityTransition.OpacityTransition, Object.assign({ isShown: isShown }, transitionEvents, { children: jsxRuntime.jsx(ModalComponent, { handleClose: handleClose, withBackdrop: withBackdrop, whiteList: whiteList, children: children }) })) }), modalRootElementRef.current);
+    return reactDom.createPortal(jsxRuntime.jsx(ShadowDOM.ShadowDOM, { zIndex: zIndex, dataTestId: 'dynamic-modal-shadow', children: jsxRuntime.jsx(OpacityTransition.OpacityTransition, Object.assign({ isShown: isShown }, transitionEvents, { children: jsxRuntime.jsx(ModalComponent.ModalComponent, { handleClose: handleClose, withBackdrop: withBackdrop, whiteList: whiteList, children: children }) })) }), modalRootElementRef.current);
 };
 
 exports.Portal = Portal;

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

@@ -1,15 +1,10 @@
-import { ReactNode } from 'react';
+import { PropsWithChildren } from 'react';
 import { UseTransitionEvents } from '../../utils/hooks/useTransition';
-type PortalProps = {
-    children: ReactNode;
+import { ModalComponentProps } from './ModalComponent';
+type PortalProps = PropsWithChildren & ModalComponentProps & {
     elementId?: string;
-    handleClose: (e: {
-        stopPropagation: VoidFunction;
-    }) => void;
     isShown?: boolean;
     transitionEvents?: UseTransitionEvents;
-    whiteList?: (activeElement: HTMLElement) => boolean;
-    withBackdrop?: boolean;
     zIndex?: number;
 };
 export declare const Portal: ({ children, isShown, handleClose, withBackdrop, zIndex, transitionEvents, elementId, }: PortalProps) => JSX.Element;

package/src/lib/components/Portal/Portal.js

@@ -1,124 +1,12 @@
 'use client'
-import { jsx, jsxs } from 'react/jsx-runtime';
+import { jsx } from 'react/jsx-runtime';
 import { useCallback } from 'react';
 import { createPortal } from 'react-dom';
-import ReactFocusLock from 'react-focus-lock';
-import '../Transition/ZoomTransition/ZoomTransition.js';
-import '../Transition/SlideInUpTransition/SlideInUpTransition.js';
-import { OpacityTransition } from '../Transition/OpacityTransition/OpacityTransition.js';
-import '../../../../_virtual/_tslib.js';
-import '../../events/dynamicEvents.js';
-import '@dynamic-labs/utils';
-import '../../context/DynamicContext/DynamicContext.js';
-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 '@dynamic-labs/wallet-book';
-import '../../utils/constants/colors.js';
-import '../../utils/constants/values.js';
-import '../../shared/consts/index.js';
-import '../../context/CaptchaContext/CaptchaContext.js';
-import '../../context/ErrorContext/ErrorContext.js';
-import '@dynamic-labs/multi-wallet';
-import 'react-international-phone';
-import '../../store/state/nonce/nonce.js';
-import '../../store/state/projectSettings/projectSettings.js';
-import '../../config/ApiEndpoint.js';
-import '../../store/state/user/user.js';
-import '../../locale/locale.js';
-import '../../store/state/dynamicContextProps/dynamicContextProps.js';
-import '../../store/state/primaryWalletId/primaryWalletId.js';
-import '../../context/AccessDeniedContext/AccessDeniedContext.js';
-import '../../context/AccountExistsContext/AccountExistsContext.js';
-import '../../context/UserWalletsContext/UserWalletsContext.js';
-import '../../store/state/connectedWalletsInfo/connectedWalletsInfo.js';
-import '../../context/VerificationContext/VerificationContext.js';
 import { useElementById } from '../../utils/hooks/useElementById/useElementById.js';
-import '../../utils/functions/compareChains/compareChains.js';
-import '../../context/ThemeContext/ThemeContext.js';
-import '../../utils/hooks/useUserUpdateRequest/useUpdateUser/userFieldsSchema.js';
-import 'bs58';
-import '@dynamic-labs/types';
-import '../../context/SocialRedirectContext/SocialRedirectContext.js';
-import '../../context/LoadingContext/LoadingContext.js';
-import '../../context/WalletContext/WalletContext.js';
-import '../../utils/hooks/useEmbeddedWallet/useSecureEnclaveEmbeddedWallet/constants.js';
-import 'yup';
-import '../../context/MockContext/MockContext.js';
-import '../../views/CollectUserDataView/useFields.js';
-import '../../context/FieldsStateContext/FieldsStateContext.js';
-import '../../context/UserFieldEditorContext/UserFieldEditorContext.js';
-import '@dynamic-labs/rpc-providers';
-import '../../store/state/loadingAndLifecycle.js';
-import '../../store/state/walletOptions/walletOptions.js';
-import 'react-i18next';
-import '../Accordion/components/AccordionItem/AccordionItem.js';
-import '../Alert/Alert.js';
 import { ShadowDOM } from '../ShadowDOM/ShadowDOM.js';
-import '../IconButton/IconButton.js';
-import '../InlineWidget/InlineWidget.js';
-import '../Input/Input.js';
-import '../IsBrowser/IsBrowser.js';
-import '../MenuList/Dropdown/Dropdown.js';
-import '../OverlayCard/OverlayCard.js';
-import '../PasskeyCreatedSuccessBanner/PasskeyCreatedSuccessBanner.js';
-import '../Popper/Popper/Popper.js';
-import '../Popper/PopperContext/PopperContext.js';
-import { useKeyboardEventListener } from '../../utils/hooks/useKeyboardEventListener/useKeyboardEventListener.js';
-import 'qrcode';
-import 'formik';
-import '../../utils/hooks/useSubdomainCheck/useSubdomainCheck.js';
-import '../../context/WalletGroupContext/WalletGroupContext.js';
-import '../../context/IpConfigurationContext/IpConfigurationContext.js';
-import '../../context/ConnectWithOtpContext/ConnectWithOtpContext.js';
-import '../../context/ConnectWithOtpContext/constants.js';
-import '../../widgets/DynamicBridgeWidget/views/WalletsView/components/SecondaryWallets/SecondaryWallets.js';
-import '@hcaptcha/react-hcaptcha';
-import '../../widgets/DynamicWidget/context/DynamicWidgetContext.js';
-import '../../context/FooterAnimationContext/index.js';
-import '../../context/ErrorContext/hooks/useErrorText/useErrorText.js';
-import '../../context/PasskeyContext/PasskeyContext.js';
-import '../../store/state/sendBalances.js';
-import '../../store/state/connectorsInitializing/connectorsInitializing.js';
-import '../OverlayCardBase/OverlayCardTarget/OverlayCardTarget.js';
-import '../../widgets/DynamicWidget/components/DynamicWidgetHeader/DynamicWidgetHeader.js';
-import '../../views/TransactionConfirmationView/TransactionConfirmationView.js';
-import '../../widgets/DynamicWidget/views/ManagePasskeysWidgetView/PasskeyCard/PasskeyCard.js';
-import '../../context/OnrampContext/OnrampContext.js';
-import '../../widgets/DynamicWidget/views/ReceiveWalletFunds/ReceiveWalletFunds.js';
-import '../../../index.js';
-import '../../store/state/tokenBalances.js';
-import '../../shared/utils/functions/getInitialUrl/getInitialUrl.js';
+import { OpacityTransition } from '../Transition/OpacityTransition/OpacityTransition.js';
+import { ModalComponent } from './ModalComponent/ModalComponent.js';
 
-const ModalComponent = ({ children, handleClose, withBackdrop = true, zIndex, whiteList, }) => {
-    const { view } = useViewContext();
-    const shouldCloseOnBackdropClick = (view === null || view === void 0 ? void 0 : view.type) &&
-        view.type !== 'collect-user-data' &&
-        view.type !== 'login-with-email-verification' &&
-        view.type !== 'login-with-sms-verification' &&
-        view.type !== 'verify-sms' &&
-        view.type !== 'verify-email' &&
-        view.type !== 'mfa-verification' &&
-        view.type !== 'mfa-display-backup-codes';
-    const onBackdropClick = (e) => {
-        if (!shouldCloseOnBackdropClick)
-            return;
-        e.stopPropagation();
-        handleClose(e);
-    };
-    useKeyboardEventListener({
-        disabled: !shouldCloseOnBackdropClick,
-        inputKey: 'Escape',
-        onKeyPressed: handleClose,
-    });
-    return (jsxs(ReactFocusLock, { className: 'portal__container', whiteList: whiteList, children: [withBackdrop && (jsx("div", { "data-testid": 'portal-backdrop', role: 'button', onClick: (e) => {
-                    onBackdropClick(e);
-                }, tabIndex: 0, "aria-label": 'Close modal', 
-                // z-index - 2 to ensure that the backdrop is always behind the content
-                style: { zIndex: zIndex ? zIndex - 2 : undefined }, className: 'portal__backdrop' })), jsx("div", { style: { zIndex }, children: children })] }));
-};
 const Portal = ({ children, isShown, handleClose, withBackdrop, zIndex, transitionEvents, elementId = 'dynamic-modal', }) => {
     const { createRootElement } = useElementById();
     const modalRootElementRef = createRootElement(elementId);

package/src/lib/components/TransactionCard/SendBalanceTransactionCard.cjs

@@ -74,8 +74,8 @@ require('../Transition/OpacityTransition/OpacityTransition.cjs');
 require('../PasskeyCreatedSuccessBanner/PasskeyCreatedSuccessBanner.cjs');
 require('../Popper/Popper/Popper.cjs');
 require('../Popper/PopperContext/PopperContext.cjs');
-require('react-focus-lock');
 require('../ShadowDOM/ShadowDOM.cjs');
+require('react-focus-lock');
 require('qrcode');
 var useFetchChain = require('../../widgets/DynamicWidget/hooks/useFetchChain/useFetchChain.cjs');
 require('formik');

package/src/lib/components/TransactionCard/SendBalanceTransactionCard.js

@@ -70,8 +70,8 @@ import '../Transition/OpacityTransition/OpacityTransition.js';
 import '../PasskeyCreatedSuccessBanner/PasskeyCreatedSuccessBanner.js';
 import '../Popper/Popper/Popper.js';
 import '../Popper/PopperContext/PopperContext.js';
-import 'react-focus-lock';
 import '../ShadowDOM/ShadowDOM.js';
+import 'react-focus-lock';
 import 'qrcode';
 import { useFetchChain } from '../../widgets/DynamicWidget/hooks/useFetchChain/useFetchChain.js';
 import 'formik';

package/src/lib/components/TransactionCard/TransactionCard.cjs

@@ -73,8 +73,8 @@ require('../Transition/OpacityTransition/OpacityTransition.cjs');
 require('../PasskeyCreatedSuccessBanner/PasskeyCreatedSuccessBanner.cjs');
 require('../Popper/Popper/Popper.cjs');
 require('../Popper/PopperContext/PopperContext.cjs');
-require('react-focus-lock');
 require('../ShadowDOM/ShadowDOM.cjs');
+require('react-focus-lock');
 require('qrcode');
 var useFetchChain = require('../../widgets/DynamicWidget/hooks/useFetchChain/useFetchChain.cjs');
 require('formik');

package/src/lib/components/TransactionCard/TransactionCard.js

@@ -69,8 +69,8 @@ import '../Transition/OpacityTransition/OpacityTransition.js';
 import '../PasskeyCreatedSuccessBanner/PasskeyCreatedSuccessBanner.js';
 import '../Popper/Popper/Popper.js';
 import '../Popper/PopperContext/PopperContext.js';
-import 'react-focus-lock';
 import '../ShadowDOM/ShadowDOM.js';
+import 'react-focus-lock';
 import 'qrcode';
 import { useFetchChain } from '../../widgets/DynamicWidget/hooks/useFetchChain/useFetchChain.js';
 import 'formik';

package/src/lib/components/Typography/Typography.cjs

@@ -17,6 +17,7 @@ const Typography = (_a) => {
         button_secondary: 'typography--button-secondary',
         button_tertiary: 'typography--button-tertiary',
         numbers_big: 'typography--numbers-big',
+        numbers_display: 'typography--numbers-display',
         numbers_medium: 'typography--numbers-medium',
         title: 'typography--title',
     };

package/src/lib/components/Typography/Typography.js

@@ -13,6 +13,7 @@ const Typography = (_a) => {
         button_secondary: 'typography--button-secondary',
         button_tertiary: 'typography--button-tertiary',
         numbers_big: 'typography--numbers-big',
+        numbers_display: 'typography--numbers-display',
         numbers_medium: 'typography--numbers-medium',
         title: 'typography--title',
     };

package/src/lib/components/Typography/Typography.types.d.ts

@@ -2,7 +2,7 @@ import { ComponentPropsWithoutRef, ElementType, ReactElement } from 'react';
 import { CopyKey } from '../../shared';
 import { ClassStyleProps } from '../../utils/types';
 export type TypographyTag = ElementType;
-export type TypographyVariant = 'title' | 'body_normal' | 'body_small' | 'body_mini' | 'button_primary' | 'button_secondary' | 'button_tertiary' | 'numbers_big' | 'numbers_medium';
+export type TypographyVariant = 'title' | 'body_normal' | 'body_small' | 'body_mini' | 'button_primary' | 'button_secondary' | 'button_tertiary' | 'numbers_display' | 'numbers_big' | 'numbers_medium';
 export type TypographyColor = 'primary' | 'secondary' | 'brand-primary' | 'tertiary' | 'link' | 'error-1' | 'error-2' | 'tooltip' | 'green-1' | 'inherit' | 'white' | 'current-color';
 export type TypographyWeight = 'regular' | 'medium' | 'bold';
 export type TypographyTransform = 'uppercase';

package/src/lib/components/WalletConnectorEvents/WalletConnectorEvents.cjs

@@ -181,11 +181,19 @@ const WalletConnectorEvents = ({ connectorProps, }) => {
     React.useEffect(() => {
         const handleConnectorInitStarted = (key) => {
             logger.logger.logVerboseTroubleshootingMessage('[WalletConnectorEvents] handleConnectorInitStarted', { key });
-            connectorsInitializing.setConnectorInitializing(key, true);
+            // need to add the timeout to ensure the setConnectorInitializing call is not
+            // made in the same tick to avoid a bad setState call error from React
+            setTimeout(() => {
+                connectorsInitializing.setConnectorInitializing(key, true);
+            }, 0);
         };
         const handleConnectorInitCompleted = (key) => {
             logger.logger.logVerboseTroubleshootingMessage('[WalletConnectorEvents] handleConnectorInitCompleted', { key });
-            connectorsInitializing.setConnectorInitializing(key, false);
+            // need to add the timeout to ensure the setConnectorInitializing call is not
+            // made in the same tick to avoid a bad setState call error from React
+            setTimeout(() => {
+                connectorsInitializing.setConnectorInitializing(key, false);
+            }, 0);
         };
         walletConnectorCore.walletConnectorEvents.on('connectorInitStarted', handleConnectorInitStarted);
         walletConnectorCore.walletConnectorEvents.on('connectorInitCompleted', handleConnectorInitCompleted);

package/src/lib/components/WalletConnectorEvents/WalletConnectorEvents.js

@@ -177,11 +177,19 @@ const WalletConnectorEvents = ({ connectorProps, }) => {
     useEffect(() => {
         const handleConnectorInitStarted = (key) => {
             logger.logVerboseTroubleshootingMessage('[WalletConnectorEvents] handleConnectorInitStarted', { key });
-            setConnectorInitializing(key, true);
+            // need to add the timeout to ensure the setConnectorInitializing call is not
+            // made in the same tick to avoid a bad setState call error from React
+            setTimeout(() => {
+                setConnectorInitializing(key, true);
+            }, 0);
         };
         const handleConnectorInitCompleted = (key) => {
             logger.logVerboseTroubleshootingMessage('[WalletConnectorEvents] handleConnectorInitCompleted', { key });
-            setConnectorInitializing(key, false);
+            // need to add the timeout to ensure the setConnectorInitializing call is not
+            // made in the same tick to avoid a bad setState call error from React
+            setTimeout(() => {
+                setConnectorInitializing(key, false);
+            }, 0);
         };
         walletConnectorEvents.on('connectorInitStarted', handleConnectorInitStarted);
         walletConnectorEvents.on('connectorInitCompleted', handleConnectorInitCompleted);