@dynamic-labs/sdk-react-core 4.30.4 → 4.31.0

package/CHANGELOG.md

@@ -1,4 +1,15 @@
 
+## [4.31.0](https://github.com/dynamic-labs/dynamic-auth/compare/v4.30.4...v4.31.0) (2025-09-09)
+
+### Features
+
+* adds evmNetworks prop for the react native client ([#9429](https://github.com/dynamic-labs/dynamic-auth/pull/9429))
+* allow creating a mfaToken on authenticateRecoveryCode ([#9459](https://github.com/dynamic-labs/dynamic-auth/pull/9459))
+
+### Bug Fixes
+
+* fixed the yParity conversion in unFormatTransaction ([#9457](https://github.com/dynamic-labs/dynamic-auth/pull/9457))
+
 ### [4.30.4](https://github.com/dynamic-labs/dynamic-auth/compare/v4.30.3...v4.30.4) (2025-09-09)
 
 

package/package.cjs

@@ -3,10 +3,10 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-var version = "4.30.4";
+var version = "4.31.0";
 var dependencies = {
 	"@dynamic-labs/sdk-api-core": "0.0.762",
-	"@dynamic-labs-sdk/client": "0.0.1-alpha.25",
+	"@dynamic-labs-sdk/client": "0.1.0-alpha.3",
 	"@hcaptcha/react-hcaptcha": "1.4.4",
 	"@thumbmarkjs/thumbmarkjs": "0.16.0",
 	"country-list": "2.3.0",

package/package.js

@@ -1,8 +1,8 @@
 'use client'
-var version = "4.30.4";
+var version = "4.31.0";
 var dependencies = {
 	"@dynamic-labs/sdk-api-core": "0.0.762",
-	"@dynamic-labs-sdk/client": "0.0.1-alpha.25",
+	"@dynamic-labs-sdk/client": "0.1.0-alpha.3",
 	"@hcaptcha/react-hcaptcha": "1.4.4",
 	"@thumbmarkjs/thumbmarkjs": "0.16.0",
 	"country-list": "2.3.0",

package/package.json

@@ -1,9 +1,9 @@
 {
   "name": "@dynamic-labs/sdk-react-core",
-  "version": "4.30.4",
+  "version": "4.31.0",
   "dependencies": {
     "@dynamic-labs/sdk-api-core": "0.0.762",
-    "@dynamic-labs-sdk/client": "0.0.1-alpha.25",
+    "@dynamic-labs-sdk/client": "0.1.0-alpha.3",
     "@hcaptcha/react-hcaptcha": "1.4.4",
     "@thumbmarkjs/thumbmarkjs": "0.16.0",
     "country-list": "2.3.0",
@@ -15,16 +15,16 @@
     "yup": "0.32.11",
     "react-international-phone": "4.5.0",
     "bs58": "5.0.0",
-    "@dynamic-labs/assert-package-version": "4.30.4",
-    "@dynamic-labs/iconic": "4.30.4",
-    "@dynamic-labs/logger": "4.30.4",
-    "@dynamic-labs/multi-wallet": "4.30.4",
-    "@dynamic-labs/rpc-providers": "4.30.4",
-    "@dynamic-labs/store": "4.30.4",
-    "@dynamic-labs/types": "4.30.4",
-    "@dynamic-labs/utils": "4.30.4",
-    "@dynamic-labs/wallet-book": "4.30.4",
-    "@dynamic-labs/wallet-connector-core": "4.30.4",
+    "@dynamic-labs/assert-package-version": "4.31.0",
+    "@dynamic-labs/iconic": "4.31.0",
+    "@dynamic-labs/logger": "4.31.0",
+    "@dynamic-labs/multi-wallet": "4.31.0",
+    "@dynamic-labs/rpc-providers": "4.31.0",
+    "@dynamic-labs/store": "4.31.0",
+    "@dynamic-labs/types": "4.31.0",
+    "@dynamic-labs/utils": "4.31.0",
+    "@dynamic-labs/wallet-book": "4.31.0",
+    "@dynamic-labs/wallet-connector-core": "4.31.0",
     "eventemitter3": "5.0.1"
   },
   "devDependencies": {

package/src/lib/client/extension/hooks/useSyncVerifyResponseWithStorage/useSyncVerifyResponseWithStorage.cjs

@@ -5,12 +5,49 @@ Object.defineProperty(exports, '__esModule', { value: true });
 
 var React = require('react');
 var client = require('@dynamic-labs-sdk/client');
+var core = require('@dynamic-labs-sdk/client/core');
 var setVerifyResponseToStorage = require('../../setVerifyResponseToStorage/setVerifyResponseToStorage.cjs');
+var client$1 = require('../../../client.cjs');
+require('@dynamic-labs/sdk-api-core');
+var logger = require('../../../../shared/logger.cjs');
+require('@dynamic-labs/iconic');
+require('@dynamic-labs/wallet-connector-core');
+require('react/jsx-runtime');
+require('../../../../context/ViewContext/ViewContext.cjs');
+require('@dynamic-labs/wallet-book');
+require('@dynamic-labs/utils');
+require('../../../../utils/constants/colors.cjs');
+require('../../../../utils/constants/values.cjs');
+require('../../../../shared/consts/index.cjs');
 
 const useSyncVerifyResponseWithStorage = () => {
     React.useEffect(() => client.onEvent({
-        event: 'authenticated',
-        listener: ({ verifyResponse }) => setVerifyResponseToStorage.setVerifyResponseToStorage(verifyResponse),
+        event: 'tokenChanged',
+        listener: ({ token }) => {
+            var _a;
+            if (!token) {
+                return;
+            }
+            const clientState = core.getCore(client$1.getDynamicClient()).state.get();
+            const minifiedJwt = token;
+            const jwt = (_a = clientState.legacyToken) !== null && _a !== void 0 ? _a : undefined;
+            const { sessionExpiresAt } = clientState;
+            // default to 0 because a number is required
+            const expiresAt = sessionExpiresAt
+                ? Math.floor(sessionExpiresAt.getTime() / 1000)
+                : 0;
+            logger.logger.logVerboseTroubleshootingMessage('[useSyncVerifyResponseWithStorage]', {
+                expiresAt,
+                jwt,
+                minifiedJwt,
+                sessionExpiresAt,
+            });
+            setVerifyResponseToStorage.setVerifyResponseToStorage({
+                expiresAt,
+                jwt,
+                minifiedJwt,
+            });
+        },
     }), []);
 };
 

package/src/lib/client/extension/hooks/useSyncVerifyResponseWithStorage/useSyncVerifyResponseWithStorage.js

@@ -1,12 +1,49 @@
 'use client'
 import { useEffect } from 'react';
 import { onEvent } from '@dynamic-labs-sdk/client';
+import { getCore } from '@dynamic-labs-sdk/client/core';
 import { setVerifyResponseToStorage } from '../../setVerifyResponseToStorage/setVerifyResponseToStorage.js';
+import { getDynamicClient } from '../../../client.js';
+import '@dynamic-labs/sdk-api-core';
+import { logger } from '../../../../shared/logger.js';
+import '@dynamic-labs/iconic';
+import '@dynamic-labs/wallet-connector-core';
+import 'react/jsx-runtime';
+import '../../../../context/ViewContext/ViewContext.js';
+import '@dynamic-labs/wallet-book';
+import '@dynamic-labs/utils';
+import '../../../../utils/constants/colors.js';
+import '../../../../utils/constants/values.js';
+import '../../../../shared/consts/index.js';
 
 const useSyncVerifyResponseWithStorage = () => {
     useEffect(() => onEvent({
-        event: 'authenticated',
-        listener: ({ verifyResponse }) => setVerifyResponseToStorage(verifyResponse),
+        event: 'tokenChanged',
+        listener: ({ token }) => {
+            var _a;
+            if (!token) {
+                return;
+            }
+            const clientState = getCore(getDynamicClient()).state.get();
+            const minifiedJwt = token;
+            const jwt = (_a = clientState.legacyToken) !== null && _a !== void 0 ? _a : undefined;
+            const { sessionExpiresAt } = clientState;
+            // default to 0 because a number is required
+            const expiresAt = sessionExpiresAt
+                ? Math.floor(sessionExpiresAt.getTime() / 1000)
+                : 0;
+            logger.logVerboseTroubleshootingMessage('[useSyncVerifyResponseWithStorage]', {
+                expiresAt,
+                jwt,
+                minifiedJwt,
+                sessionExpiresAt,
+            });
+            setVerifyResponseToStorage({
+                expiresAt,
+                jwt,
+                minifiedJwt,
+            });
+        },
     }), []);
 };
 

package/src/lib/client/extension/setVerifyResponseToStorage/setVerifyResponseToStorage.d.ts

@@ -1,2 +1,2 @@
 import { VerifyResponse } from '@dynamic-labs/sdk-api-core';
-export declare const setVerifyResponseToStorage: ({ expiresAt, jwt, minifiedJwt, }: VerifyResponse) => void;
+export declare const setVerifyResponseToStorage: ({ expiresAt, jwt, minifiedJwt, }: Pick<VerifyResponse, 'expiresAt' | 'jwt' | 'minifiedJwt'>) => void;

package/src/lib/components/OptionsSwitcher/OptionsSwitcher.cjs

@@ -6,6 +6,102 @@ Object.defineProperty(exports, '__esModule', { value: true });
 var jsxRuntime = require('react/jsx-runtime');
 var React = require('react');
 var classNames = require('../../utils/functions/classNames/classNames.cjs');
+require('../../events/dynamicEvents.cjs');
+require('../../../../_virtual/_tslib.cjs');
+require('@dynamic-labs/utils');
+require('../../context/DynamicContext/DynamicContext.cjs');
+require('../../store/state/loadingAndLifecycle/loadingAndLifecycle.cjs');
+require('@dynamic-labs/sdk-api-core');
+require('../../shared/logger.cjs');
+require('@dynamic-labs/iconic');
+require('@dynamic-labs/wallet-connector-core');
+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('../../store/state/authMode/authMode.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('@dynamic-labs-sdk/client/core');
+require('../../client/client.cjs');
+require('@dynamic-labs-sdk/client');
+require('../../config/ApiEndpoint.cjs');
+require('../../store/state/projectSettings/projectSettings.cjs');
+require('../../locale/locale.cjs');
+require('../../store/state/dynamicContextProps/dynamicContextProps.cjs');
+require('../../store/state/primaryWalletId/primaryWalletId.cjs');
+require('../../store/state/connectedWalletsInfo/connectedWalletsInfo.cjs');
+require('../../context/AccessDeniedContext/AccessDeniedContext.cjs');
+require('../../context/AccountExistsContext/AccountExistsContext.cjs');
+require('../../context/UserWalletsContext/UserWalletsContext.cjs');
+require('../../context/VerificationContext/VerificationContext.cjs');
+require('react-dom');
+require('../../utils/functions/compareChains/compareChains.cjs');
+require('../../views/Passkey/utils/findPrimaryEmbeddedChain/findPrimaryEmbeddedChain.cjs');
+require('../../context/ThemeContext/ThemeContext.cjs');
+var useIsomorphicLayoutEffect = require('../../utils/hooks/useIsomorphicLayoutEffect/useIsomorphicLayoutEffect.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/walletOptions/walletOptions.cjs');
+require('react-i18next');
+require('../Accordion/components/AccordionItem/AccordionItem.cjs');
+require('../Alert/Alert.cjs');
+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('../Transition/ZoomTransition/ZoomTransition.cjs');
+require('../Transition/SlideInUpTransition/SlideInUpTransition.cjs');
+require('../Transition/OpacityTransition/OpacityTransition.cjs');
+require('../PasskeyCreatedSuccessBanner/PasskeyCreatedSuccessBanner.cjs');
+require('../Popper/Popper/Popper.cjs');
+require('../Popper/PopperContext/PopperContext.cjs');
+require('react-focus-lock');
+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('../../widgets/DynamicBridgeWidget/views/WalletsView/components/SecondaryWallets/SecondaryWallets.cjs');
+require('@hcaptcha/react-hcaptcha');
+require('../../widgets/DynamicWidget/context/DynamicWidgetContext.cjs');
+require('../../widgets/DynamicWidget/helpers/convertExchangeKeyAndProviderEnum.cjs');
+require('../../views/ExchangeWhitelistWarning/ExchangeWhitelistWarning.cjs');
+require('../../context/ErrorContext/hooks/useErrorText/useErrorText.cjs');
+require('../../context/FooterAnimationContext/index.cjs');
+require('../../views/MfaChooseDeviceView/useGetMfaOptions/useGetMfaOptions.cjs');
+require('../../context/PasskeyContext/PasskeyContext.cjs');
+require('../../context/OnrampContext/OnrampContext.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/components/PasskeyCard/PasskeyCard.cjs');
+require('../../../index.cjs');
+require('../../widgets/DynamicWidget/views/ReceiveWalletFunds/ReceiveWalletFunds.cjs');
+require('../../store/state/tokenBalances.cjs');
+require('../../store/state/multichainBalances.cjs');
+require('../../shared/utils/functions/getInitialUrl/getInitialUrl.cjs');
 
 const OptionsSwitcher = ({ onChange, value, options, rootClassName, activeButtonClassName, buttonClassName, }) => {
     const isActive = (_value) => _value !== undefined && _value === value;
@@ -13,7 +109,7 @@ const OptionsSwitcher = ({ onChange, value, options, rootClassName, activeButton
     const [railCSSLeft, setRailCSSLeft] = React.useState(0);
     const getOptionDisplayValue = (option) => option.label || option.key;
     // Updates .options-switcher__active-rail position
-    React.useLayoutEffect(() => {
+    useIsomorphicLayoutEffect.useIsomorphicLayoutEffect(() => {
         if (!rootRef.current)
             return;
         const activeOption = options === null || options === void 0 ? void 0 : options.find(({ key }) => key === value);

package/src/lib/components/OptionsSwitcher/OptionsSwitcher.js

@@ -1,7 +1,103 @@
 'use client'
 import { jsxs, jsx } from 'react/jsx-runtime';
-import { useRef, useState, useLayoutEffect } from 'react';
+import { useRef, useState } from 'react';
 import { classNames } from '../../utils/functions/classNames/classNames.js';
+import '../../events/dynamicEvents.js';
+import '../../../../_virtual/_tslib.js';
+import '@dynamic-labs/utils';
+import '../../context/DynamicContext/DynamicContext.js';
+import '../../store/state/loadingAndLifecycle/loadingAndLifecycle.js';
+import '@dynamic-labs/sdk-api-core';
+import '../../shared/logger.js';
+import '@dynamic-labs/iconic';
+import '@dynamic-labs/wallet-connector-core';
+import '../../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 '../../store/state/authMode/authMode.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 '@dynamic-labs-sdk/client/core';
+import '../../client/client.js';
+import '@dynamic-labs-sdk/client';
+import '../../config/ApiEndpoint.js';
+import '../../store/state/projectSettings/projectSettings.js';
+import '../../locale/locale.js';
+import '../../store/state/dynamicContextProps/dynamicContextProps.js';
+import '../../store/state/primaryWalletId/primaryWalletId.js';
+import '../../store/state/connectedWalletsInfo/connectedWalletsInfo.js';
+import '../../context/AccessDeniedContext/AccessDeniedContext.js';
+import '../../context/AccountExistsContext/AccountExistsContext.js';
+import '../../context/UserWalletsContext/UserWalletsContext.js';
+import '../../context/VerificationContext/VerificationContext.js';
+import 'react-dom';
+import '../../utils/functions/compareChains/compareChains.js';
+import '../../views/Passkey/utils/findPrimaryEmbeddedChain/findPrimaryEmbeddedChain.js';
+import '../../context/ThemeContext/ThemeContext.js';
+import { useIsomorphicLayoutEffect } from '../../utils/hooks/useIsomorphicLayoutEffect/useIsomorphicLayoutEffect.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/walletOptions/walletOptions.js';
+import 'react-i18next';
+import '../Accordion/components/AccordionItem/AccordionItem.js';
+import '../Alert/Alert.js';
+import '../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 '../Transition/ZoomTransition/ZoomTransition.js';
+import '../Transition/SlideInUpTransition/SlideInUpTransition.js';
+import '../Transition/OpacityTransition/OpacityTransition.js';
+import '../PasskeyCreatedSuccessBanner/PasskeyCreatedSuccessBanner.js';
+import '../Popper/Popper/Popper.js';
+import '../Popper/PopperContext/PopperContext.js';
+import 'react-focus-lock';
+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 '../../widgets/DynamicBridgeWidget/views/WalletsView/components/SecondaryWallets/SecondaryWallets.js';
+import '@hcaptcha/react-hcaptcha';
+import '../../widgets/DynamicWidget/context/DynamicWidgetContext.js';
+import '../../widgets/DynamicWidget/helpers/convertExchangeKeyAndProviderEnum.js';
+import '../../views/ExchangeWhitelistWarning/ExchangeWhitelistWarning.js';
+import '../../context/ErrorContext/hooks/useErrorText/useErrorText.js';
+import '../../context/FooterAnimationContext/index.js';
+import '../../views/MfaChooseDeviceView/useGetMfaOptions/useGetMfaOptions.js';
+import '../../context/PasskeyContext/PasskeyContext.js';
+import '../../context/OnrampContext/OnrampContext.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/components/PasskeyCard/PasskeyCard.js';
+import '../../../index.js';
+import '../../widgets/DynamicWidget/views/ReceiveWalletFunds/ReceiveWalletFunds.js';
+import '../../store/state/tokenBalances.js';
+import '../../store/state/multichainBalances.js';
+import '../../shared/utils/functions/getInitialUrl/getInitialUrl.js';
 
 const OptionsSwitcher = ({ onChange, value, options, rootClassName, activeButtonClassName, buttonClassName, }) => {
     const isActive = (_value) => _value !== undefined && _value === value;
@@ -9,7 +105,7 @@ const OptionsSwitcher = ({ onChange, value, options, rootClassName, activeButton
     const [railCSSLeft, setRailCSSLeft] = useState(0);
     const getOptionDisplayValue = (option) => option.label || option.key;
     // Updates .options-switcher__active-rail position
-    useLayoutEffect(() => {
+    useIsomorphicLayoutEffect(() => {
         if (!rootRef.current)
             return;
         const activeOption = options === null || options === void 0 ? void 0 : options.find(({ key }) => key === value);

package/src/lib/components/Select/Select.cjs

@@ -20,13 +20,98 @@ require('../../shared/consts/index.cjs');
 var classNames = require('../../utils/functions/classNames/classNames.cjs');
 var Icon = require('../Icon/Icon.cjs');
 var Typography = require('../Typography/Typography.cjs');
+require('../../events/dynamicEvents.cjs');
+require('../../context/DynamicContext/DynamicContext.cjs');
+require('../../store/state/loadingAndLifecycle/loadingAndLifecycle.cjs');
+require('../../store/state/authMode/authMode.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('@dynamic-labs-sdk/client/core');
+require('../../client/client.cjs');
+require('@dynamic-labs-sdk/client');
+require('../../config/ApiEndpoint.cjs');
+require('../../store/state/projectSettings/projectSettings.cjs');
+require('../../locale/locale.cjs');
+require('../../store/state/dynamicContextProps/dynamicContextProps.cjs');
+require('../../store/state/primaryWalletId/primaryWalletId.cjs');
+require('../../store/state/connectedWalletsInfo/connectedWalletsInfo.cjs');
+require('../../context/AccessDeniedContext/AccessDeniedContext.cjs');
+require('../../context/AccountExistsContext/AccountExistsContext.cjs');
+require('../../context/UserWalletsContext/UserWalletsContext.cjs');
+require('../../context/VerificationContext/VerificationContext.cjs');
+require('react-dom');
+require('../../utils/functions/compareChains/compareChains.cjs');
+require('../../views/Passkey/utils/findPrimaryEmbeddedChain/findPrimaryEmbeddedChain.cjs');
+require('../../context/ThemeContext/ThemeContext.cjs');
+var useIsomorphicLayoutEffect = require('../../utils/hooks/useIsomorphicLayoutEffect/useIsomorphicLayoutEffect.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/walletOptions/walletOptions.cjs');
+require('react-i18next');
+require('../Accordion/components/AccordionItem/AccordionItem.cjs');
+require('../Alert/Alert.cjs');
+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('../Transition/ZoomTransition/ZoomTransition.cjs');
+require('../Transition/SlideInUpTransition/SlideInUpTransition.cjs');
+require('../Transition/OpacityTransition/OpacityTransition.cjs');
+require('../PasskeyCreatedSuccessBanner/PasskeyCreatedSuccessBanner.cjs');
+require('../Popper/Popper/Popper.cjs');
+require('../Popper/PopperContext/PopperContext.cjs');
+require('react-focus-lock');
+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('../../widgets/DynamicBridgeWidget/views/WalletsView/components/SecondaryWallets/SecondaryWallets.cjs');
+require('@hcaptcha/react-hcaptcha');
+require('../../widgets/DynamicWidget/context/DynamicWidgetContext.cjs');
+require('../../widgets/DynamicWidget/helpers/convertExchangeKeyAndProviderEnum.cjs');
+require('../../views/ExchangeWhitelistWarning/ExchangeWhitelistWarning.cjs');
+require('../../context/ErrorContext/hooks/useErrorText/useErrorText.cjs');
+require('../../context/FooterAnimationContext/index.cjs');
+require('../../views/MfaChooseDeviceView/useGetMfaOptions/useGetMfaOptions.cjs');
+require('../../context/PasskeyContext/PasskeyContext.cjs');
+require('../../context/OnrampContext/OnrampContext.cjs');
 var getDisplayValue = require('./utils/getDisplayValue/getDisplayValue.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/components/PasskeyCard/PasskeyCard.cjs');
+require('../../../index.cjs');
+require('../../widgets/DynamicWidget/views/ReceiveWalletFunds/ReceiveWalletFunds.cjs');
+require('../../store/state/tokenBalances.cjs');
+require('../../store/state/multichainBalances.cjs');
+require('../../shared/utils/functions/getInitialUrl/getInitialUrl.cjs');
 
 const Select = (_a) => {
     var { children, className = '', id, label, value, error = false, selectDataTestId, message } = _a, selectProps = _tslib.__rest(_a, ["children", "className", "id", "label", "value", "error", "selectDataTestId", "message"]);
     const selectRef = React.useRef(null);
     const [displayValue, setDisplayValue] = React.useState();
-    React.useLayoutEffect(() => {
+    useIsomorphicLayoutEffect.useIsomorphicLayoutEffect(() => {
         if (!value)
             return;
         const selectElement = selectRef.current;

package/src/lib/components/Select/Select.js

@@ -1,7 +1,7 @@
 'use client'
 import { __rest } from '../../../../_virtual/_tslib.js';
 import { jsxs, jsx } from 'react/jsx-runtime';
-import { useRef, useState, useLayoutEffect } from 'react';
+import { useRef, useState } from 'react';
 import '@dynamic-labs/sdk-api-core';
 import '../../shared/logger.js';
 import '@dynamic-labs/iconic';
@@ -16,13 +16,98 @@ import '../../shared/consts/index.js';
 import { classNames } from '../../utils/functions/classNames/classNames.js';
 import { Icon } from '../Icon/Icon.js';
 import { Typography } from '../Typography/Typography.js';
+import '../../events/dynamicEvents.js';
+import '../../context/DynamicContext/DynamicContext.js';
+import '../../store/state/loadingAndLifecycle/loadingAndLifecycle.js';
+import '../../store/state/authMode/authMode.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 '@dynamic-labs-sdk/client/core';
+import '../../client/client.js';
+import '@dynamic-labs-sdk/client';
+import '../../config/ApiEndpoint.js';
+import '../../store/state/projectSettings/projectSettings.js';
+import '../../locale/locale.js';
+import '../../store/state/dynamicContextProps/dynamicContextProps.js';
+import '../../store/state/primaryWalletId/primaryWalletId.js';
+import '../../store/state/connectedWalletsInfo/connectedWalletsInfo.js';
+import '../../context/AccessDeniedContext/AccessDeniedContext.js';
+import '../../context/AccountExistsContext/AccountExistsContext.js';
+import '../../context/UserWalletsContext/UserWalletsContext.js';
+import '../../context/VerificationContext/VerificationContext.js';
+import 'react-dom';
+import '../../utils/functions/compareChains/compareChains.js';
+import '../../views/Passkey/utils/findPrimaryEmbeddedChain/findPrimaryEmbeddedChain.js';
+import '../../context/ThemeContext/ThemeContext.js';
+import { useIsomorphicLayoutEffect } from '../../utils/hooks/useIsomorphicLayoutEffect/useIsomorphicLayoutEffect.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/walletOptions/walletOptions.js';
+import 'react-i18next';
+import '../Accordion/components/AccordionItem/AccordionItem.js';
+import '../Alert/Alert.js';
+import '../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 '../Transition/ZoomTransition/ZoomTransition.js';
+import '../Transition/SlideInUpTransition/SlideInUpTransition.js';
+import '../Transition/OpacityTransition/OpacityTransition.js';
+import '../PasskeyCreatedSuccessBanner/PasskeyCreatedSuccessBanner.js';
+import '../Popper/Popper/Popper.js';
+import '../Popper/PopperContext/PopperContext.js';
+import 'react-focus-lock';
+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 '../../widgets/DynamicBridgeWidget/views/WalletsView/components/SecondaryWallets/SecondaryWallets.js';
+import '@hcaptcha/react-hcaptcha';
+import '../../widgets/DynamicWidget/context/DynamicWidgetContext.js';
+import '../../widgets/DynamicWidget/helpers/convertExchangeKeyAndProviderEnum.js';
+import '../../views/ExchangeWhitelistWarning/ExchangeWhitelistWarning.js';
+import '../../context/ErrorContext/hooks/useErrorText/useErrorText.js';
+import '../../context/FooterAnimationContext/index.js';
+import '../../views/MfaChooseDeviceView/useGetMfaOptions/useGetMfaOptions.js';
+import '../../context/PasskeyContext/PasskeyContext.js';
+import '../../context/OnrampContext/OnrampContext.js';
 import { getDisplayValue } from './utils/getDisplayValue/getDisplayValue.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/components/PasskeyCard/PasskeyCard.js';
+import '../../../index.js';
+import '../../widgets/DynamicWidget/views/ReceiveWalletFunds/ReceiveWalletFunds.js';
+import '../../store/state/tokenBalances.js';
+import '../../store/state/multichainBalances.js';
+import '../../shared/utils/functions/getInitialUrl/getInitialUrl.js';
 
 const Select = (_a) => {
     var { children, className = '', id, label, value, error = false, selectDataTestId, message } = _a, selectProps = __rest(_a, ["children", "className", "id", "label", "value", "error", "selectDataTestId", "message"]);
     const selectRef = useRef(null);
     const [displayValue, setDisplayValue] = useState();
-    useLayoutEffect(() => {
+    useIsomorphicLayoutEffect(() => {
         if (!value)
             return;
         const selectElement = selectRef.current;

package/src/lib/components/ShadowDOM/ShadowDOM.cjs

@@ -42,6 +42,7 @@ require('../../context/VerificationContext/VerificationContext.cjs');
 require('../../utils/functions/compareChains/compareChains.cjs');
 require('../../views/Passkey/utils/findPrimaryEmbeddedChain/findPrimaryEmbeddedChain.cjs');
 require('../../context/ThemeContext/ThemeContext.cjs');
+var useIsomorphicLayoutEffect = require('../../utils/hooks/useIsomorphicLayoutEffect/useIsomorphicLayoutEffect.cjs');
 require('../../utils/hooks/useUserUpdateRequest/useUpdateUser/userFieldsSchema.cjs');
 require('bs58');
 require('@dynamic-labs/types');
@@ -127,7 +128,7 @@ const ShadowDOM = ({ mode = 'open', id, className, children, dataTestId, zIndex,
         }
         return null;
     }, [cssOverrides]);
-    React.useLayoutEffect(() => {
+    useIsomorphicLayoutEffect.useIsomorphicLayoutEffect(() => {
         if (nodeRef && shadowDOMEnabled) {
             try {
                 const root = nodeRef.attachShadow({

package/src/lib/components/ShadowDOM/ShadowDOM.js

@@ -1,6 +1,6 @@
 'use client'
 import { jsx, jsxs } from 'react/jsx-runtime';
-import React__default, { useState, useMemo, useLayoutEffect } from 'react';
+import React__default, { useState, useMemo } from 'react';
 import { createPortal } from 'react-dom';
 import { isLegacySafari } from '@dynamic-labs/utils';
 import '../../context/DynamicContext/DynamicContext.js';
@@ -38,6 +38,7 @@ import '../../context/VerificationContext/VerificationContext.js';
 import '../../utils/functions/compareChains/compareChains.js';
 import '../../views/Passkey/utils/findPrimaryEmbeddedChain/findPrimaryEmbeddedChain.js';
 import '../../context/ThemeContext/ThemeContext.js';
+import { useIsomorphicLayoutEffect } from '../../utils/hooks/useIsomorphicLayoutEffect/useIsomorphicLayoutEffect.js';
 import '../../utils/hooks/useUserUpdateRequest/useUpdateUser/userFieldsSchema.js';
 import 'bs58';
 import '@dynamic-labs/types';
@@ -119,7 +120,7 @@ const ShadowDOM = ({ mode = 'open', id, className, children, dataTestId, zIndex,
         }
         return null;
     }, [cssOverrides]);
-    useLayoutEffect(() => {
+    useIsomorphicLayoutEffect(() => {
         if (nodeRef && shadowDOMEnabled) {
             try {
                 const root = nodeRef.attachShadow({

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

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

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

@@ -38,14 +38,11 @@ const useMfa = () => {
     const handleMfaAuth = React.useCallback((_a) => _tslib.__awaiter(void 0, [_a], void 0, function* ({ code, type, deviceId, createMfaToken, resultHandler, }) {
         let result;
         yield completeAuth({
-            onValidUpdatedJwt: () => _tslib.__awaiter(void 0, void 0, void 0, function* () {
-                // This callback is used by authDevice
-            }),
             updateJwtFunction: () => _tslib.__awaiter(void 0, void 0, void 0, function* () {
                 if (type !== sdkApiCore.MFADeviceType.Totp) {
                     throw new Error('Only Totp is supported');
                 }
-                const response = yield client.authTotpMfaDevice({
+                const response = yield client.authenticateTotpMfaDevice({
                     code,
                     createMfaTokenOptions: createMfaToken,
                     deviceId,
@@ -122,7 +119,7 @@ const useMfa = () => {
                 isValid = true;
             }),
             updateJwtFunction: () => _tslib.__awaiter(void 0, void 0, void 0, function* () {
-                const response = yield client.authMfaRecoveryCode({
+                const response = yield client.authenticateMfaRecoveryCode({
                     code,
                 });
                 if (!response) {
@@ -142,6 +139,33 @@ const useMfa = () => {
         });
         return isValid;
     }), [completeAuth]);
+    const authenticateRecoveryCode = React.useCallback((_c) => _tslib.__awaiter(void 0, [_c], void 0, function* ({ code, createMfaToken, }) {
+        let mfaToken = undefined;
+        yield completeAuth({
+            updateJwtFunction: () => _tslib.__awaiter(void 0, void 0, void 0, function* () {
+                const response = yield client.authenticateMfaRecoveryCode({
+                    code,
+                    createMfaTokenOptions: createMfaToken,
+                });
+                if (!response) {
+                    throw new Error('Failed to authenticate recovery code');
+                }
+                // eslint-disable-next-line prefer-destructuring
+                mfaToken = response.mfaToken;
+                dynamicEvents.dynamicEvents.emit('mfaCompletionSuccess', {
+                    mfaToken: response.mfaToken,
+                });
+                return {
+                    isEmailVerificationRequired: false,
+                    isSmsVerificationRequired: false,
+                    missingFields: [],
+                    // in the mfa flow, we only care about the user in the response
+                    updateUserProfileResponse: response,
+                };
+            }),
+        });
+        return mfaToken;
+    }), [completeAuth]);
     const verifyDevice = React.useCallback((code_2, ...args_3) => _tslib.__awaiter(void 0, [code_2, ...args_3], void 0, function* (code, type = sdkApiCore.MFADeviceType.Totp) {
         if (type === sdkApiCore.MFADeviceType.Totp) {
             const device = yield verifyTotpMfaDevice.verifyTotpMfaDevice({
@@ -172,6 +196,7 @@ const useMfa = () => {
         authDevice,
         authRecoveryCode,
         authenticateDevice,
+        authenticateRecoveryCode,
         completeAcknowledgement,
         deleteUserDevice,
         getRecoveryCodes,

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

@@ -14,10 +14,21 @@ type UseMfaHookResult = {
      * indicating if the authentication was successful.
      */
     authDevice: (code: string, type?: MFADeviceType, deviceId?: string) => Promise<boolean>;
+    /**
+     * @deprecated use authenticateRecoveryCode instead
+     */
     authRecoveryCode: (code: string) => Promise<boolean>;
+    /**
+     * Authenticates a recovery code and returns a single use MFA token
+     * if the authentication is successful and createMfaToken param is provided.
+     */
+    authenticateRecoveryCode: ({ code, createMfaToken, }: {
+        code: string;
+        createMfaToken?: CreateMfaToken;
+    }) => Promise<string | undefined>;
     /**
      * Authenticates a device and returns a single use MFA token
-     * if the authentication is successful.
+     * if the authentication is successful and createMfaToken param is provided.
      */
     authenticateDevice: ({ code, type, deviceId, createMfaToken, }: {
         code: string;

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

@@ -1,7 +1,7 @@
 'use client'
 import { __awaiter } from '../../../../../_virtual/_tslib.js';
 import { useCallback } from 'react';
-import { authTotpMfaDevice, getMfaDevices, setDefaultMfaDevice, deleteMfaDevice, registerTotpMfaDevice, authMfaRecoveryCode, createNewMfaRecoveryCodes, getMfaRecoveryCodes, acknowledgeRecoveryCodes } from '@dynamic-labs-sdk/client';
+import { authenticateTotpMfaDevice, getMfaDevices, setDefaultMfaDevice, deleteMfaDevice, registerTotpMfaDevice, authenticateMfaRecoveryCode, createNewMfaRecoveryCodes, getMfaRecoveryCodes, acknowledgeRecoveryCodes } from '@dynamic-labs-sdk/client';
 import { MFADeviceType } from '@dynamic-labs/sdk-api-core';
 import { verifyTotpMfaDevice } from '../../../client/extension/deprecated/mfa/verifyTotpMfaDevice/verifyTotpMfaDevice.js';
 import '../../../client/client.js';
@@ -34,14 +34,11 @@ const useMfa = () => {
     const handleMfaAuth = useCallback((_a) => __awaiter(void 0, [_a], void 0, function* ({ code, type, deviceId, createMfaToken, resultHandler, }) {
         let result;
         yield completeAuth({
-            onValidUpdatedJwt: () => __awaiter(void 0, void 0, void 0, function* () {
-                // This callback is used by authDevice
-            }),
             updateJwtFunction: () => __awaiter(void 0, void 0, void 0, function* () {
                 if (type !== MFADeviceType.Totp) {
                     throw new Error('Only Totp is supported');
                 }
-                const response = yield authTotpMfaDevice({
+                const response = yield authenticateTotpMfaDevice({
                     code,
                     createMfaTokenOptions: createMfaToken,
                     deviceId,
@@ -118,7 +115,7 @@ const useMfa = () => {
                 isValid = true;
             }),
             updateJwtFunction: () => __awaiter(void 0, void 0, void 0, function* () {
-                const response = yield authMfaRecoveryCode({
+                const response = yield authenticateMfaRecoveryCode({
                     code,
                 });
                 if (!response) {
@@ -138,6 +135,33 @@ const useMfa = () => {
         });
         return isValid;
     }), [completeAuth]);
+    const authenticateRecoveryCode = useCallback((_c) => __awaiter(void 0, [_c], void 0, function* ({ code, createMfaToken, }) {
+        let mfaToken = undefined;
+        yield completeAuth({
+            updateJwtFunction: () => __awaiter(void 0, void 0, void 0, function* () {
+                const response = yield authenticateMfaRecoveryCode({
+                    code,
+                    createMfaTokenOptions: createMfaToken,
+                });
+                if (!response) {
+                    throw new Error('Failed to authenticate recovery code');
+                }
+                // eslint-disable-next-line prefer-destructuring
+                mfaToken = response.mfaToken;
+                dynamicEvents.emit('mfaCompletionSuccess', {
+                    mfaToken: response.mfaToken,
+                });
+                return {
+                    isEmailVerificationRequired: false,
+                    isSmsVerificationRequired: false,
+                    missingFields: [],
+                    // in the mfa flow, we only care about the user in the response
+                    updateUserProfileResponse: response,
+                };
+            }),
+        });
+        return mfaToken;
+    }), [completeAuth]);
     const verifyDevice = useCallback((code_2, ...args_3) => __awaiter(void 0, [code_2, ...args_3], void 0, function* (code, type = MFADeviceType.Totp) {
         if (type === MFADeviceType.Totp) {
             const device = yield verifyTotpMfaDevice({
@@ -168,6 +192,7 @@ const useMfa = () => {
         authDevice,
         authRecoveryCode,
         authenticateDevice,
+        authenticateRecoveryCode,
         completeAcknowledgement,
         deleteUserDevice,
         getRecoveryCodes,

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

@@ -4,6 +4,7 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 
 var React = require('react');
+var useIsomorphicLayoutEffect = require('../useIsomorphicLayoutEffect/useIsomorphicLayoutEffect.cjs');
 
 const useResizeObserver = (ref, callback) => {
     const [rect, setRect] = React.useState();
@@ -17,7 +18,7 @@ const useResizeObserver = (ref, callback) => {
             callback(entry.contentRect);
         }
     }, [callback, setRect]);
-    React.useLayoutEffect(() => {
+    useIsomorphicLayoutEffect.useIsomorphicLayoutEffect(() => {
         if (!ref.current) {
             return;
         }

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

@@ -1,5 +1,6 @@
 'use client'
-import { useState, useCallback, useLayoutEffect } from 'react';
+import { useState, useCallback } from 'react';
+import { useIsomorphicLayoutEffect } from '../useIsomorphicLayoutEffect/useIsomorphicLayoutEffect.js';
 
 const useResizeObserver = (ref, callback) => {
     const [rect, setRect] = useState();
@@ -13,7 +14,7 @@ const useResizeObserver = (ref, callback) => {
             callback(entry.contentRect);
         }
     }, [callback, setRect]);
-    useLayoutEffect(() => {
+    useIsomorphicLayoutEffect(() => {
         if (!ref.current) {
             return;
         }