@dynamic-labs/sdk-react-core 4.28.0 → 4.29.1

package/CHANGELOG.md

@@ -1,4 +1,21 @@
 
+### [4.29.1](https://github.com/dynamic-labs/dynamic-auth/compare/v4.29.0...v4.29.1) (2025-08-21)
+
+
+### Bug Fixes
+
+* clear user op cache on send transaction ([#9382](https://github.com/dynamic-labs/dynamic-auth/issues/9382)) ([ddef1e1](https://github.com/dynamic-labs/dynamic-auth/commit/ddef1e16367e04d217e6d79a138988394605dda6))
+* display error when trying to register a previously registered passkey ([#9381](https://github.com/dynamic-labs/dynamic-auth/issues/9381)) ([51ecdd8](https://github.com/dynamic-labs/dynamic-auth/commit/51ecdd84a3d1a36435cc79063caa2fd7187a25db))
+* do not double disable confirmation ui ([#9385](https://github.com/dynamic-labs/dynamic-auth/issues/9385)) ([2deb3ae](https://github.com/dynamic-labs/dynamic-auth/commit/2deb3aeb3055ceb79ea2e8410cce94448b18f8c5))
+* **react-native:** dont emit network change events for disabled chains ([#9375](https://github.com/dynamic-labs/dynamic-auth/issues/9375)) ([f03151e](https://github.com/dynamic-labs/dynamic-auth/commit/f03151ea6b065f6b297edb053fbf84f1060b35e4))
+
+## [4.29.0](https://github.com/dynamic-labs/dynamic-auth/compare/v4.28.0...v4.29.0) (2025-08-19)
+
+
+### Features
+
+* add support for World Mini App social redirect ([#9371](https://github.com/dynamic-labs/dynamic-auth/issues/9371)) ([12bcee8](https://github.com/dynamic-labs/dynamic-auth/commit/12bcee875007e6a2c6143a222f9af39d8127fcf8))
+
 ## [4.28.0](https://github.com/dynamic-labs/dynamic-auth/compare/v4.27.1...v4.28.0) (2025-08-18)
 
 

package/package.cjs

@@ -3,7 +3,7 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-var version = "4.28.0";
+var version = "4.29.1";
 var dependencies = {
 	"@dynamic-labs/sdk-api-core": "0.0.753",
 	"@dynamic-labs-sdk/client": "0.0.1-alpha.24",

package/package.js

@@ -1,5 +1,5 @@
 'use client'
-var version = "4.28.0";
+var version = "4.29.1";
 var dependencies = {
 	"@dynamic-labs/sdk-api-core": "0.0.753",
 	"@dynamic-labs-sdk/client": "0.0.1-alpha.24",

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@dynamic-labs/sdk-react-core",
-  "version": "4.28.0",
+  "version": "4.29.1",
   "dependencies": {
     "@dynamic-labs/sdk-api-core": "0.0.753",
     "@dynamic-labs-sdk/client": "0.0.1-alpha.24",
@@ -15,16 +15,16 @@
     "yup": "0.32.11",
     "react-international-phone": "4.5.0",
     "bs58": "5.0.0",
-    "@dynamic-labs/assert-package-version": "4.28.0",
-    "@dynamic-labs/iconic": "4.28.0",
-    "@dynamic-labs/logger": "4.28.0",
-    "@dynamic-labs/multi-wallet": "4.28.0",
-    "@dynamic-labs/rpc-providers": "4.28.0",
-    "@dynamic-labs/store": "4.28.0",
-    "@dynamic-labs/types": "4.28.0",
-    "@dynamic-labs/utils": "4.28.0",
-    "@dynamic-labs/wallet-book": "4.28.0",
-    "@dynamic-labs/wallet-connector-core": "4.28.0",
+    "@dynamic-labs/assert-package-version": "4.29.1",
+    "@dynamic-labs/iconic": "4.29.1",
+    "@dynamic-labs/logger": "4.29.1",
+    "@dynamic-labs/multi-wallet": "4.29.1",
+    "@dynamic-labs/rpc-providers": "4.29.1",
+    "@dynamic-labs/store": "4.29.1",
+    "@dynamic-labs/types": "4.29.1",
+    "@dynamic-labs/utils": "4.29.1",
+    "@dynamic-labs/wallet-book": "4.29.1",
+    "@dynamic-labs/wallet-connector-core": "4.29.1",
     "eventemitter3": "5.0.1"
   },
   "devDependencies": {

package/src/lib/context/SocialRedirectContext/hooks/useRedirectSocialHandler/useRedirectSocialHandler.cjs

@@ -108,6 +108,7 @@ require('../../../../store/state/tokenBalances.cjs');
 require('../../../../store/state/multichainBalances.cjs');
 require('../../../../shared/utils/functions/getInitialUrl/getInitialUrl.cjs');
 var usePromptAndFundWithExchange = require('../../../../utils/hooks/usePromptAndFundWithExchange/usePromptAndFundWithExchange.cjs');
+var getDynamicRedirectData = require('../../utils/getDynamicRedirectData/getDynamicRedirectData.cjs');
 
 const useRedirectSocialHandler = ({ setSocialProvider, }) => {
     const { clearStackAndPush } = ViewContext.useViewContext();
@@ -131,13 +132,14 @@ const useRedirectSocialHandler = ({ setSocialProvider, }) => {
         setShowAuthFlow,
     ]);
     useEffectOnce.useEffectOnce(() => {
+        var _a;
         // Do not run on server side
         if (isSSR.isSSR())
             return;
-        // TODO: use PlatformService
-        const url = new URL(redirectUrl !== null && redirectUrl !== void 0 ? redirectUrl : window.location.href);
-        const dynamicOauthState = url.searchParams.get('dynamicOauthState');
-        const dynamicOauthCode = url.searchParams.get('dynamicOauthCode');
+        /**
+         * Find the redirect data from the first available source
+         */
+        const { dynamicOauthCode, dynamicOauthState } = (_a = getDynamicRedirectData.getDynamicRedirectData(redirectUrl !== null && redirectUrl !== void 0 ? redirectUrl : null, window.location.href)) !== null && _a !== void 0 ? _a : {};
         if (!dynamicOauthState || !dynamicOauthCode) {
             return;
         }

package/src/lib/context/SocialRedirectContext/hooks/useRedirectSocialHandler/useRedirectSocialHandler.js

@@ -104,6 +104,7 @@ import '../../../../store/state/tokenBalances.js';
 import '../../../../store/state/multichainBalances.js';
 import '../../../../shared/utils/functions/getInitialUrl/getInitialUrl.js';
 import { usePromptAmountAndFundWithExchange } from '../../../../utils/hooks/usePromptAndFundWithExchange/usePromptAndFundWithExchange.js';
+import { getDynamicRedirectData } from '../../utils/getDynamicRedirectData/getDynamicRedirectData.js';
 
 const useRedirectSocialHandler = ({ setSocialProvider, }) => {
     const { clearStackAndPush } = useViewContext();
@@ -127,13 +128,14 @@ const useRedirectSocialHandler = ({ setSocialProvider, }) => {
         setShowAuthFlow,
     ]);
     useEffectOnce(() => {
+        var _a;
         // Do not run on server side
         if (isSSR())
             return;
-        // TODO: use PlatformService
-        const url = new URL(redirectUrl !== null && redirectUrl !== void 0 ? redirectUrl : window.location.href);
-        const dynamicOauthState = url.searchParams.get('dynamicOauthState');
-        const dynamicOauthCode = url.searchParams.get('dynamicOauthCode');
+        /**
+         * Find the redirect data from the first available source
+         */
+        const { dynamicOauthCode, dynamicOauthState } = (_a = getDynamicRedirectData(redirectUrl !== null && redirectUrl !== void 0 ? redirectUrl : null, window.location.href)) !== null && _a !== void 0 ? _a : {};
         if (!dynamicOauthState || !dynamicOauthCode) {
             return;
         }

package/src/lib/context/SocialRedirectContext/utils/getDynamicRedirectData/getDynamicRedirectData.cjs

@@ -0,0 +1,22 @@
+'use client'
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var getDynamicRedirectDataFromUrl = require('../getDynamicRedirectDataFromUrl/getDynamicRedirectDataFromUrl.cjs');
+
+const getDynamicRedirectData = (redirectUrl, href) => {
+    if (redirectUrl) {
+        const data = getDynamicRedirectDataFromUrl.getDynamicRedirectDataFromUrl(redirectUrl);
+        if (data) {
+            return data;
+        }
+    }
+    const data = getDynamicRedirectDataFromUrl.getDynamicRedirectDataFromUrl(href);
+    if (data) {
+        return data;
+    }
+    return null;
+};
+
+exports.getDynamicRedirectData = getDynamicRedirectData;

package/src/lib/context/SocialRedirectContext/utils/getDynamicRedirectData/getDynamicRedirectData.d.ts

@@ -0,0 +1,4 @@
+export declare const getDynamicRedirectData: (redirectUrl: string | null, href: string) => {
+    dynamicOauthCode: string;
+    dynamicOauthState: string;
+} | null;

package/src/lib/context/SocialRedirectContext/utils/getDynamicRedirectData/getDynamicRedirectData.js

@@ -0,0 +1,18 @@
+'use client'
+import { getDynamicRedirectDataFromUrl } from '../getDynamicRedirectDataFromUrl/getDynamicRedirectDataFromUrl.js';
+
+const getDynamicRedirectData = (redirectUrl, href) => {
+    if (redirectUrl) {
+        const data = getDynamicRedirectDataFromUrl(redirectUrl);
+        if (data) {
+            return data;
+        }
+    }
+    const data = getDynamicRedirectDataFromUrl(href);
+    if (data) {
+        return data;
+    }
+    return null;
+};
+
+export { getDynamicRedirectData };

package/src/lib/context/SocialRedirectContext/utils/getDynamicRedirectData/index.d.ts

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

package/src/lib/context/SocialRedirectContext/utils/getDynamicRedirectDataFromUrl/getDynamicRedirectDataFromUrl.cjs

@@ -0,0 +1,31 @@
+'use client'
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var logger = require('../../../../shared/logger.cjs');
+
+/**
+ * Extracts the dynamicOauthCode and dynamicOauthState from the URL
+ * if the URL is not a valid URL, returns null
+ */
+const getDynamicRedirectDataFromUrl = (url) => {
+    if (!url) {
+        return null;
+    }
+    try {
+        const urlObj = new URL(url);
+        const dynamicOauthCode = urlObj.searchParams.get('dynamicOauthCode');
+        const dynamicOauthState = urlObj.searchParams.get('dynamicOauthState');
+        if (!dynamicOauthCode || !dynamicOauthState) {
+            return null;
+        }
+        return { dynamicOauthCode, dynamicOauthState };
+    }
+    catch (error) {
+        logger.logger.error('Error extracting dynamic redirect data from URL', error);
+        return null;
+    }
+};
+
+exports.getDynamicRedirectDataFromUrl = getDynamicRedirectDataFromUrl;

package/src/lib/context/SocialRedirectContext/utils/getDynamicRedirectDataFromUrl/getDynamicRedirectDataFromUrl.d.ts

@@ -0,0 +1,8 @@
+/**
+ * Extracts the dynamicOauthCode and dynamicOauthState from the URL
+ * if the URL is not a valid URL, returns null
+ */
+export declare const getDynamicRedirectDataFromUrl: (url: string) => {
+    dynamicOauthCode: string;
+    dynamicOauthState: string;
+} | null;

package/src/lib/context/SocialRedirectContext/utils/getDynamicRedirectDataFromUrl/getDynamicRedirectDataFromUrl.js

@@ -0,0 +1,27 @@
+'use client'
+import { logger } from '../../../../shared/logger.js';
+
+/**
+ * Extracts the dynamicOauthCode and dynamicOauthState from the URL
+ * if the URL is not a valid URL, returns null
+ */
+const getDynamicRedirectDataFromUrl = (url) => {
+    if (!url) {
+        return null;
+    }
+    try {
+        const urlObj = new URL(url);
+        const dynamicOauthCode = urlObj.searchParams.get('dynamicOauthCode');
+        const dynamicOauthState = urlObj.searchParams.get('dynamicOauthState');
+        if (!dynamicOauthCode || !dynamicOauthState) {
+            return null;
+        }
+        return { dynamicOauthCode, dynamicOauthState };
+    }
+    catch (error) {
+        logger.error('Error extracting dynamic redirect data from URL', error);
+        return null;
+    }
+};
+
+export { getDynamicRedirectDataFromUrl };

package/src/lib/context/SocialRedirectContext/utils/getDynamicRedirectDataFromUrl/index.d.ts

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

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

@@ -15,6 +15,9 @@ const useGetPasskeyErrorMessage = (error) => {
         if (error.name === 'NotAllowedError') {
             return t('dyn_mfa.confirm_passkey_view.error.not_allowed');
         }
+        if (error.name === 'InvalidStateError') {
+            return error.message;
+        }
         return error.message;
     }, [error, t]);
 };

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

@@ -11,6 +11,9 @@ const useGetPasskeyErrorMessage = (error) => {
         if (error.name === 'NotAllowedError') {
             return t('dyn_mfa.confirm_passkey_view.error.not_allowed');
         }
+        if (error.name === 'InvalidStateError') {
+            return error.message;
+        }
         return error.message;
     }, [error, t]);
 };

package/src/lib/views/Passkey/ConfirmPasskeyView/ConfirmPasskeyView.cjs

@@ -92,6 +92,7 @@ require('../../../../index.cjs');
 require('../../../widgets/DynamicWidget/helpers/convertExchangeKeyAndProviderEnum.cjs');
 var TextButton = require('../../../components/TextButton/TextButton.cjs');
 require('qrcode');
+var useGetPasskeyErrorMessage = require('../../../utils/hooks/useGetPasskeyErrorMessage/useGetPasskeyErrorMessage.cjs');
 require('../../../widgets/DynamicWidget/views/ReceiveWalletFunds/ReceiveWalletFunds.cjs');
 require('../../../context/IpConfigurationContext/IpConfigurationContext.cjs');
 require('../../../context/ConnectWithOtpContext/ConnectWithOtpContext.cjs');
@@ -101,7 +102,6 @@ require('../../ExchangeWhitelistWarning/ExchangeWhitelistWarning.cjs');
 require('../../../context/ErrorContext/hooks/useErrorText/useErrorText.cjs');
 require('../../MfaChooseDeviceView/getMfaOptions/getMfaOptions.cjs');
 var ModalHeaderBanner = require('../../../components/ModalHeaderBanner/ModalHeaderBanner.cjs');
-var useGetPasskeyErrorMessage = require('../../../utils/hooks/useGetPasskeyErrorMessage/useGetPasskeyErrorMessage.cjs');
 require('../../../store/state/connectorsInitializing/connectorsInitializing.cjs');
 require('../../../store/state/tokenBalances.cjs');
 require('../../../store/state/multichainBalances.cjs');

package/src/lib/views/Passkey/ConfirmPasskeyView/ConfirmPasskeyView.js

@@ -88,6 +88,7 @@ import '../../../../index.js';
 import '../../../widgets/DynamicWidget/helpers/convertExchangeKeyAndProviderEnum.js';
 import { TextButton } from '../../../components/TextButton/TextButton.js';
 import 'qrcode';
+import { useGetPasskeyErrorMessage } from '../../../utils/hooks/useGetPasskeyErrorMessage/useGetPasskeyErrorMessage.js';
 import '../../../widgets/DynamicWidget/views/ReceiveWalletFunds/ReceiveWalletFunds.js';
 import '../../../context/IpConfigurationContext/IpConfigurationContext.js';
 import '../../../context/ConnectWithOtpContext/ConnectWithOtpContext.js';
@@ -97,7 +98,6 @@ import '../../ExchangeWhitelistWarning/ExchangeWhitelistWarning.js';
 import '../../../context/ErrorContext/hooks/useErrorText/useErrorText.js';
 import '../../MfaChooseDeviceView/getMfaOptions/getMfaOptions.js';
 import { ModalHeaderBanner } from '../../../components/ModalHeaderBanner/ModalHeaderBanner.js';
-import { useGetPasskeyErrorMessage } from '../../../utils/hooks/useGetPasskeyErrorMessage/useGetPasskeyErrorMessage.js';
 import '../../../store/state/connectorsInitializing/connectorsInitializing.js';
 import '../../../store/state/tokenBalances.js';
 import '../../../store/state/multichainBalances.js';

package/src/lib/views/Passkey/SetupPasskeyView/SetupPasskeyView.cjs

@@ -93,6 +93,7 @@ require('../../../../index.cjs');
 require('../../../widgets/DynamicWidget/helpers/convertExchangeKeyAndProviderEnum.cjs');
 var TextButton = require('../../../components/TextButton/TextButton.cjs');
 require('qrcode');
+var useGetPasskeyErrorMessage = require('../../../utils/hooks/useGetPasskeyErrorMessage/useGetPasskeyErrorMessage.cjs');
 require('../../../widgets/DynamicWidget/views/ReceiveWalletFunds/ReceiveWalletFunds.cjs');
 require('../../../context/IpConfigurationContext/IpConfigurationContext.cjs');
 require('../../../context/ConnectWithOtpContext/ConnectWithOtpContext.cjs');
@@ -102,7 +103,6 @@ require('../../ExchangeWhitelistWarning/ExchangeWhitelistWarning.cjs');
 require('../../../context/ErrorContext/hooks/useErrorText/useErrorText.cjs');
 require('../../MfaChooseDeviceView/getMfaOptions/getMfaOptions.cjs');
 var ModalHeaderBanner = require('../../../components/ModalHeaderBanner/ModalHeaderBanner.cjs');
-var useGetPasskeyErrorMessage = require('../../../utils/hooks/useGetPasskeyErrorMessage/useGetPasskeyErrorMessage.cjs');
 require('../../../store/state/connectorsInitializing/connectorsInitializing.cjs');
 require('../../../store/state/tokenBalances.cjs');
 require('../../../store/state/multichainBalances.cjs');

package/src/lib/views/Passkey/SetupPasskeyView/SetupPasskeyView.js

@@ -89,6 +89,7 @@ import '../../../../index.js';
 import '../../../widgets/DynamicWidget/helpers/convertExchangeKeyAndProviderEnum.js';
 import { TextButton } from '../../../components/TextButton/TextButton.js';
 import 'qrcode';
+import { useGetPasskeyErrorMessage } from '../../../utils/hooks/useGetPasskeyErrorMessage/useGetPasskeyErrorMessage.js';
 import '../../../widgets/DynamicWidget/views/ReceiveWalletFunds/ReceiveWalletFunds.js';
 import '../../../context/IpConfigurationContext/IpConfigurationContext.js';
 import '../../../context/ConnectWithOtpContext/ConnectWithOtpContext.js';
@@ -98,7 +99,6 @@ import '../../ExchangeWhitelistWarning/ExchangeWhitelistWarning.js';
 import '../../../context/ErrorContext/hooks/useErrorText/useErrorText.js';
 import '../../MfaChooseDeviceView/getMfaOptions/getMfaOptions.js';
 import { ModalHeaderBanner } from '../../../components/ModalHeaderBanner/ModalHeaderBanner.js';
-import { useGetPasskeyErrorMessage } from '../../../utils/hooks/useGetPasskeyErrorMessage/useGetPasskeyErrorMessage.js';
 import '../../../store/state/connectorsInitializing/connectorsInitializing.js';
 import '../../../store/state/tokenBalances.js';
 import '../../../store/state/multichainBalances.js';

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

@@ -92,6 +92,7 @@ require('../../../../../index.cjs');
 require('../../helpers/convertExchangeKeyAndProviderEnum.cjs');
 require('qrcode');
 var MfaDeviceTileSkeleton = require('../../../../components/MfaDeviceTileSkeleton/MfaDeviceTileSkeleton.cjs');
+var useGetPasskeyErrorMessage = require('../../../../utils/hooks/useGetPasskeyErrorMessage/useGetPasskeyErrorMessage.cjs');
 require('../ReceiveWalletFunds/ReceiveWalletFunds.cjs');
 require('../../../../context/IpConfigurationContext/IpConfigurationContext.cjs');
 require('../../../../context/ConnectWithOtpContext/ConnectWithOtpContext.cjs');
@@ -100,6 +101,7 @@ require('@hcaptcha/react-hcaptcha');
 require('../../../../views/ExchangeWhitelistWarning/ExchangeWhitelistWarning.cjs');
 require('../../../../context/ErrorContext/hooks/useErrorText/useErrorText.cjs');
 require('../../../../views/MfaChooseDeviceView/getMfaOptions/getMfaOptions.cjs');
+var ModalHeaderBanner = require('../../../../components/ModalHeaderBanner/ModalHeaderBanner.cjs');
 require('../../../../store/state/connectorsInitializing/connectorsInitializing.cjs');
 require('../../../../store/state/tokenBalances.cjs');
 require('../../../../store/state/multichainBalances.cjs');
@@ -120,15 +122,16 @@ const ManagePasskeysMfaWidgetView = () => {
         enabled: true,
         initialData: [],
     });
-    const { mutate: registerPasskey, isLoading: isRegisteringPasskey } = useMutation.useMutation(registerPasskeyFn, {
+    const { mutate: registerPasskey, isLoading: isRegisteringPasskey, error: registerPasskeyError, } = useMutation.useMutation(registerPasskeyFn, {
         onSuccess: () => {
             retrigger();
         },
     });
+    const errorMessage = useGetPasskeyErrorMessage.useGetPasskeyErrorMessage(registerPasskeyError);
     const shouldDisableActions = isLoadingPasskeys || isRegisteringPasskey;
     const { setDynamicWidgetView } = DynamicWidgetContext.useWidgetContext();
     const backButton = (jsxRuntime.jsx(IconButton.IconButton, { type: 'button', onClick: () => setDynamicWidgetView('account-and-security-settings'), "data-testid": 'back-button', children: jsxRuntime.jsx(chevronLeft.ReactComponent, {}) }));
-    return (jsxRuntime.jsxs("div", { className: 'manage-totp-mfa-widget-view', children: [jsxRuntime.jsx(ModalHeader.ModalHeader, { leading: backButton, children: jsxRuntime.jsx("div", { className: 'send-balance-page-layout__header-content', children: jsxRuntime.jsx(Typography.Typography, { variant: 'title', color: 'primary', copykey: 'dyn_manage_passkeys_mfa.title', children: t('dyn_manage_passkeys_mfa.title') }) }) }), jsxRuntime.jsxs("div", { className: 'manage-totp-mfa-widget-view__scroll-container', children: [isLoadingPasskeys && jsxRuntime.jsx(MfaDeviceTileSkeleton.MfaDeviceTileSkeleton, {}), !isLoadingPasskeys && passkeys.length === 0 && (jsxRuntime.jsx(Typography.Typography, { className: 'manage-totp-mfa-widget-view__no-devices', variant: 'body_normal', color: 'secondary', copykey: 'dyn_manage_passkeys_mfa.no_passkeys', children: t('dyn_manage_passkeys_mfa.no_passkeys') })), passkeys.map((passkey) => (jsxRuntime.jsx(PasskeyCard.PasskeyCard, { passkey: passkey, onUpdate: retrigger }, passkey.id)))] }), jsxRuntime.jsx("div", { className: 'manage-totp-mfa-widget-view__add-mfa-button-container', children: jsxRuntime.jsx(TypographyButton.TypographyButton, { buttonClassName: 'manage-totp-mfa-widget-view__add-mfa-button-container__button', onClick: () => registerPasskey(), copykey: 'dyn_manage_passkeys_mfa.add_passkey_button', startSlot: jsxRuntime.jsx(add.ReactComponent, {}), disabled: shouldDisableActions, children: t('dyn_manage_passkeys_mfa.add_passkey_button') }) })] }));
+    return (jsxRuntime.jsxs("div", { className: 'manage-totp-mfa-widget-view', children: [jsxRuntime.jsx(ModalHeader.ModalHeader, { leading: backButton, children: jsxRuntime.jsx("div", { className: 'send-balance-page-layout__header-content', children: jsxRuntime.jsx(Typography.Typography, { variant: 'title', color: 'primary', copykey: 'dyn_manage_passkeys_mfa.title', children: t('dyn_manage_passkeys_mfa.title') }) }) }), jsxRuntime.jsx(ModalHeaderBanner.ModalHeaderBanner, { type: 'error', messageKey: registerPasskeyError ? errorMessage : undefined, className: 'manage-totp-mfa-widget-view__header-banner' }), jsxRuntime.jsxs("div", { className: 'manage-totp-mfa-widget-view__scroll-container', children: [isLoadingPasskeys && jsxRuntime.jsx(MfaDeviceTileSkeleton.MfaDeviceTileSkeleton, {}), !isLoadingPasskeys && passkeys.length === 0 && (jsxRuntime.jsx(Typography.Typography, { className: 'manage-totp-mfa-widget-view__no-devices', variant: 'body_normal', color: 'secondary', copykey: 'dyn_manage_passkeys_mfa.no_passkeys', children: t('dyn_manage_passkeys_mfa.no_passkeys') })), passkeys.map((passkey) => (jsxRuntime.jsx(PasskeyCard.PasskeyCard, { passkey: passkey, onUpdate: retrigger }, passkey.id)))] }), jsxRuntime.jsx("div", { className: 'manage-totp-mfa-widget-view__add-mfa-button-container', children: jsxRuntime.jsx(TypographyButton.TypographyButton, { buttonClassName: 'manage-totp-mfa-widget-view__add-mfa-button-container__button', onClick: () => registerPasskey(), copykey: 'dyn_manage_passkeys_mfa.add_passkey_button', startSlot: jsxRuntime.jsx(add.ReactComponent, {}), disabled: shouldDisableActions, children: t('dyn_manage_passkeys_mfa.add_passkey_button') }) })] }));
 };
 
 exports.ManagePasskeysMfaWidgetView = ManagePasskeysMfaWidgetView;

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

@@ -88,6 +88,7 @@ import '../../../../../index.js';
 import '../../helpers/convertExchangeKeyAndProviderEnum.js';
 import 'qrcode';
 import { MfaDeviceTileSkeleton } from '../../../../components/MfaDeviceTileSkeleton/MfaDeviceTileSkeleton.js';
+import { useGetPasskeyErrorMessage } from '../../../../utils/hooks/useGetPasskeyErrorMessage/useGetPasskeyErrorMessage.js';
 import '../ReceiveWalletFunds/ReceiveWalletFunds.js';
 import '../../../../context/IpConfigurationContext/IpConfigurationContext.js';
 import '../../../../context/ConnectWithOtpContext/ConnectWithOtpContext.js';
@@ -96,6 +97,7 @@ import '@hcaptcha/react-hcaptcha';
 import '../../../../views/ExchangeWhitelistWarning/ExchangeWhitelistWarning.js';
 import '../../../../context/ErrorContext/hooks/useErrorText/useErrorText.js';
 import '../../../../views/MfaChooseDeviceView/getMfaOptions/getMfaOptions.js';
+import { ModalHeaderBanner } from '../../../../components/ModalHeaderBanner/ModalHeaderBanner.js';
 import '../../../../store/state/connectorsInitializing/connectorsInitializing.js';
 import '../../../../store/state/tokenBalances.js';
 import '../../../../store/state/multichainBalances.js';
@@ -116,15 +118,16 @@ const ManagePasskeysMfaWidgetView = () => {
         enabled: true,
         initialData: [],
     });
-    const { mutate: registerPasskey, isLoading: isRegisteringPasskey } = useMutation(registerPasskeyFn, {
+    const { mutate: registerPasskey, isLoading: isRegisteringPasskey, error: registerPasskeyError, } = useMutation(registerPasskeyFn, {
         onSuccess: () => {
             retrigger();
         },
     });
+    const errorMessage = useGetPasskeyErrorMessage(registerPasskeyError);
     const shouldDisableActions = isLoadingPasskeys || isRegisteringPasskey;
     const { setDynamicWidgetView } = useWidgetContext();
     const backButton = (jsx(IconButton, { type: 'button', onClick: () => setDynamicWidgetView('account-and-security-settings'), "data-testid": 'back-button', children: jsx(SvgChevronLeft, {}) }));
-    return (jsxs("div", { className: 'manage-totp-mfa-widget-view', children: [jsx(ModalHeader, { leading: backButton, children: jsx("div", { className: 'send-balance-page-layout__header-content', children: jsx(Typography, { variant: 'title', color: 'primary', copykey: 'dyn_manage_passkeys_mfa.title', children: t('dyn_manage_passkeys_mfa.title') }) }) }), jsxs("div", { className: 'manage-totp-mfa-widget-view__scroll-container', children: [isLoadingPasskeys && jsx(MfaDeviceTileSkeleton, {}), !isLoadingPasskeys && passkeys.length === 0 && (jsx(Typography, { className: 'manage-totp-mfa-widget-view__no-devices', variant: 'body_normal', color: 'secondary', copykey: 'dyn_manage_passkeys_mfa.no_passkeys', children: t('dyn_manage_passkeys_mfa.no_passkeys') })), passkeys.map((passkey) => (jsx(PasskeyCard, { passkey: passkey, onUpdate: retrigger }, passkey.id)))] }), jsx("div", { className: 'manage-totp-mfa-widget-view__add-mfa-button-container', children: jsx(TypographyButton, { buttonClassName: 'manage-totp-mfa-widget-view__add-mfa-button-container__button', onClick: () => registerPasskey(), copykey: 'dyn_manage_passkeys_mfa.add_passkey_button', startSlot: jsx(SvgAdd, {}), disabled: shouldDisableActions, children: t('dyn_manage_passkeys_mfa.add_passkey_button') }) })] }));
+    return (jsxs("div", { className: 'manage-totp-mfa-widget-view', children: [jsx(ModalHeader, { leading: backButton, children: jsx("div", { className: 'send-balance-page-layout__header-content', children: jsx(Typography, { variant: 'title', color: 'primary', copykey: 'dyn_manage_passkeys_mfa.title', children: t('dyn_manage_passkeys_mfa.title') }) }) }), jsx(ModalHeaderBanner, { type: 'error', messageKey: registerPasskeyError ? errorMessage : undefined, className: 'manage-totp-mfa-widget-view__header-banner' }), jsxs("div", { className: 'manage-totp-mfa-widget-view__scroll-container', children: [isLoadingPasskeys && jsx(MfaDeviceTileSkeleton, {}), !isLoadingPasskeys && passkeys.length === 0 && (jsx(Typography, { className: 'manage-totp-mfa-widget-view__no-devices', variant: 'body_normal', color: 'secondary', copykey: 'dyn_manage_passkeys_mfa.no_passkeys', children: t('dyn_manage_passkeys_mfa.no_passkeys') })), passkeys.map((passkey) => (jsx(PasskeyCard, { passkey: passkey, onUpdate: retrigger }, passkey.id)))] }), jsx("div", { className: 'manage-totp-mfa-widget-view__add-mfa-button-container', children: jsx(TypographyButton, { buttonClassName: 'manage-totp-mfa-widget-view__add-mfa-button-container__button', onClick: () => registerPasskey(), copykey: 'dyn_manage_passkeys_mfa.add_passkey_button', startSlot: jsx(SvgAdd, {}), disabled: shouldDisableActions, children: t('dyn_manage_passkeys_mfa.add_passkey_button') }) })] }));
 };
 
 export { ManagePasskeysMfaWidgetView };