@dynamic-labs/sdk-react-core 4.29.0 → 4.29.2

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

@@ -0,0 +1,280 @@
+'use client'
+import { __awaiter } from '../../../../../_virtual/_tslib.js';
+import { useCallback } from 'react';
+import '@dynamic-labs-sdk/client/core';
+import '@dynamic-labs/sdk-api-core';
+import '../../../client/client.js';
+import '@dynamic-labs-sdk/client';
+import '../../../config/ApiEndpoint.js';
+import '@dynamic-labs/utils';
+import '../../constants/values.js';
+import '@dynamic-labs/multi-wallet';
+import { logger } from '../../../shared/logger.js';
+import '../../constants/colors.js';
+import 'react-international-phone';
+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 '../../../shared/consts/index.js';
+import '../../../store/state/nonce/nonce.js';
+import { useProjectSettings } from '../../../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 '../../../events/dynamicEvents.js';
+import { useOnboardingCompleteUser } from '../../../client/extension/user/useOnboardingCompleteUser/useOnboardingCompleteUser.js';
+import { useOnrampContext } from '../../../context/OnrampContext/OnrampContext.js';
+import { useConnectUnifiedForFunding } from '../useConnectUnifiedForFunding/useConnectUnifiedForFunding.js';
+import { useSocialAccounts } from '../useSocialAccounts/useSocialAccounts.js';
+import { usePromptAmountAndFundWithWallet } from '../useFundWithWallet/usePromptAmountAndFundWithWallet/usePromptAmountAndFundWithWallet.js';
+import { usePromptAmountAndFundWithExchange } from '../usePromptAndFundWithExchange/usePromptAndFundWithExchange.js';
+import { useWalletItemActions } from '../useWalletItemActions/useWalletItemActions.js';
+import { getWalletOptions } from '../../../store/state/walletOptions/walletOptions.js';
+import '../../../context/DynamicContext/DynamicContext.js';
+import '../../../store/state/loadingAndLifecycle/loadingAndLifecycle.js';
+import '../../../context/CaptchaContext/CaptchaContext.js';
+import '../../../context/ErrorContext/ErrorContext.js';
+import '../../../context/AccessDeniedContext/AccessDeniedContext.js';
+import '../../../context/AccountExistsContext/AccountExistsContext.js';
+import '../../../context/UserWalletsContext/UserWalletsContext.js';
+import '../../../store/state/authMode/authMode.js';
+import '../../../context/VerificationContext/VerificationContext.js';
+import 'react-dom';
+import '../../functions/compareChains/compareChains.js';
+import '../../../views/Passkey/utils/findPrimaryEmbeddedChain/findPrimaryEmbeddedChain.js';
+import '../../../context/ThemeContext/ThemeContext.js';
+import '../useUserUpdateRequest/useUpdateUser/userFieldsSchema.js';
+import 'bs58';
+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 'react-i18next';
+import '../../../components/Accordion/components/AccordionItem/AccordionItem.js';
+import '../../../components/Alert/Alert.js';
+import '../../../context/WalletContext/WalletContext.js';
+import '../../../components/ShadowDOM/ShadowDOM.js';
+import '../../../components/IconButton/IconButton.js';
+import '../../../components/InlineWidget/InlineWidget.js';
+import '../../../components/Input/Input.js';
+import '../../../components/IsBrowser/IsBrowser.js';
+import '../../../components/MenuList/Dropdown/Dropdown.js';
+import '../../../components/OverlayCard/OverlayCard.js';
+import '../../../components/Transition/ZoomTransition/ZoomTransition.js';
+import '../../../components/Transition/SlideInUpTransition/SlideInUpTransition.js';
+import '../../../components/Transition/OpacityTransition/OpacityTransition.js';
+import '../../../components/PasskeyCreatedSuccessBanner/PasskeyCreatedSuccessBanner.js';
+import '../../../components/Popper/Popper/Popper.js';
+import '../../../components/Popper/PopperContext/PopperContext.js';
+import 'react-focus-lock';
+import 'qrcode';
+import 'formik';
+import '../useSubdomainCheck/useSubdomainCheck.js';
+import '../../../context/WalletGroupContext/WalletGroupContext.js';
+import '../../../context/IpConfigurationContext/IpConfigurationContext.js';
+import '../../../context/SocialRedirectContext/SocialRedirectContext.js';
+import '../../../context/ConnectWithOtpContext/ConnectWithOtpContext.js';
+import '../../../widgets/DynamicBridgeWidget/views/WalletsView/components/SecondaryWallets/SecondaryWallets.js';
+import '@hcaptcha/react-hcaptcha';
+import '../../../context/LoadingContext/LoadingContext.js';
+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 '@dynamic-labs/types';
+import '../useEmbeddedWallet/useSecureEnclaveEmbeddedWallet/constants.js';
+import '../../../views/MfaChooseDeviceView/getMfaOptions/getMfaOptions.js';
+import '../../../context/PasskeyContext/PasskeyContext.js';
+import '../../../store/state/sendBalances.js';
+import '../../../store/state/connectorsInitializing/connectorsInitializing.js';
+import '../../../components/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';
+import { useInternalDynamicContext } from '../../../context/DynamicContext/useDynamicContext/useInternalDynamicContext/useInternalDynamicContext.js';
+
+const usePayWithDynamic = () => {
+    const connectUnifiedForFunding = useConnectUnifiedForFunding();
+    const projectSettings = useProjectSettings();
+    const { linkSocialAccount, signInWithSocialAccount } = useSocialAccounts();
+    const user = useOnboardingCompleteUser();
+    const { openOnramp, setEnabledOnrampProvidersTargetValue } = useOnrampContext();
+    const promptWallet = usePromptAmountAndFundWithWallet();
+    const promptExchange = usePromptAmountAndFundWithExchange();
+    const { handleWalletItemClick } = useWalletItemActions();
+    const { walletConnectorOptions } = getWalletOptions();
+    const { setShowAuthFlow, setShowDynamicUserProfile } = useInternalDynamicContext();
+    // Flow for funding via wallet
+    const handleWalletFlow = useCallback(({ wallet, props, onBack }) => {
+        // If user is not onboarded, trigger wallet connector UI
+        if (!user) {
+            const option = walletConnectorOptions.find(({ key }) => key === wallet.connector.key);
+            if (option)
+                handleWalletItemClick(option);
+        }
+        // Prompt for amount and execute wallet funding (shows deposit screen)
+        promptWallet({
+            amount: { rule: 'exact', value: props.tokenAmount },
+            destinationAddress: props.destinationAddress,
+            network: props.network,
+            onBack,
+            token: { rule: 'exact-with-amount', value: props.tokenSymbol },
+            wallet: wallet,
+        });
+        setShowAuthFlow(false);
+    }, [
+        handleWalletItemClick,
+        promptWallet,
+        setShowAuthFlow,
+        user,
+        walletConnectorOptions,
+    ]);
+    // Flow for linking or signing in with social account before exchange
+    const handleSocialConnect = useCallback((_a) => __awaiter(void 0, [_a], void 0, function* ({ provider, exchange, props, isSocialProviderAlreadyVerified, }) {
+        // if connected social return since already signed in
+        if (isSocialProviderAlreadyVerified) {
+            return false;
+        }
+        const payload = {
+            payingWithDynamic: {
+                chainName: props.chainName,
+                destinationAddress: props.destinationAddress,
+                network: props.network,
+                tokenAmount: props.tokenAmount,
+                tokenSymbol: props.tokenSymbol,
+            },
+            triggerFundFromExchangeOnSuccess: exchange,
+        };
+        if (user) {
+            // link if user exists
+            yield linkSocialAccount(provider, payload);
+        }
+        else {
+            // sign in if no user
+            yield signInWithSocialAccount(provider, payload);
+        }
+        return true;
+    }), [linkSocialAccount, signInWithSocialAccount, user]);
+    // exchange flow
+    const handleExchangeFlow = useCallback((_b) => __awaiter(void 0, [_b], void 0, function* ({ exchange, props, onBack }) {
+        var _c, _d, _e, _f, _g;
+        const fullExchange = (_c = projectSettings === null || projectSettings === void 0 ? void 0 : projectSettings.exchanges) === null || _c === void 0 ? void 0 : _c.find((e) => e.exchange === exchange);
+        // Social provider for this exchange, if any
+        const provider = fullExchange === null || fullExchange === void 0 ? void 0 : fullExchange.socialProvider;
+        const isProviderSocialConnectEnabled = provider &&
+            Boolean((_e = (_d = projectSettings === null || projectSettings === void 0 ? void 0 : projectSettings.providers) === null || _d === void 0 ? void 0 : _d.find((p) => p.provider === provider)) === null || _e === void 0 ? void 0 : _e.enabledAt);
+        // Check if user already verified this social provider
+        const isSocialProviderAlreadyVerified = (_g = (_f = user === null || user === void 0 ? void 0 : user.verifiedCredentials) === null || _f === void 0 ? void 0 : _f.some((c) => c.oauthProvider === provider)) !== null && _g !== void 0 ? _g : false;
+        // If exchange requires social connect, handle that first
+        if (isProviderSocialConnectEnabled && provider) {
+            const handled = yield handleSocialConnect({
+                exchange,
+                isSocialProviderAlreadyVerified,
+                props,
+                provider,
+            });
+            // Social connect flow opened, stop here
+            if (handled)
+                return;
+            // If already connected, prompt amount and fund with exchange
+            promptExchange({
+                exchange,
+                onBack,
+                payingWithDynamic: props,
+            });
+            return;
+        }
+        // No social provider = use on-ramp provider if configured
+        if (fullExchange === null || fullExchange === void 0 ? void 0 : fullExchange.onRampProvider) {
+            yield openOnramp({
+                address: props.destinationAddress,
+                chainName: props.chainName,
+                network: String(props.network),
+                onrampProvider: fullExchange.onRampProvider,
+                overrideOnRamp: true,
+                payingWithDynamic: true,
+                token: props.tokenSymbol,
+                tokenAmount: props.tokenAmount,
+            });
+        }
+    }), [
+        projectSettings === null || projectSettings === void 0 ? void 0 : projectSettings.exchanges,
+        projectSettings === null || projectSettings === void 0 ? void 0 : projectSettings.providers,
+        user === null || user === void 0 ? void 0 : user.verifiedCredentials,
+        handleSocialConnect,
+        promptExchange,
+        openOnramp,
+    ]);
+    const payWithDynamic = useCallback((props) => __awaiter(void 0, void 0, void 0, function* () {
+        try {
+            setEnabledOnrampProvidersTargetValue({
+                address: props.destinationAddress,
+                chainName: props.chainName,
+                network: String(props.network),
+                token: props.tokenSymbol,
+                tokenAmount: props.tokenAmount,
+            });
+            const result = yield connectUnifiedForFunding({
+                initiatedByWidget: false,
+            });
+            if (result.kind === 'wallet') {
+                handleWalletFlow({
+                    onBack: () => {
+                        setShowAuthFlow(true);
+                        setShowDynamicUserProfile(false);
+                        payWithDynamic(props);
+                    },
+                    props,
+                    wallet: result.wallet,
+                });
+            }
+            else if (result.kind === 'exchange') {
+                yield handleExchangeFlow({
+                    exchange: result.exchange,
+                    onBack: () => {
+                        setShowAuthFlow(true);
+                        setShowDynamicUserProfile(false);
+                        payWithDynamic(props);
+                    },
+                    props,
+                });
+            }
+            else {
+                yield openOnramp({
+                    address: props.destinationAddress,
+                    chainName: props.chainName,
+                    network: String(props.network),
+                    onrampProvider: result.onramp.id,
+                    payingWithDynamic: true,
+                    token: props.tokenSymbol,
+                    tokenAmount: props.tokenAmount,
+                });
+            }
+        }
+        catch (error) {
+            logger.error('usePayWithDynamic failed', error);
+        }
+    }), [
+        setEnabledOnrampProvidersTargetValue,
+        connectUnifiedForFunding,
+        handleWalletFlow,
+        setShowAuthFlow,
+        setShowDynamicUserProfile,
+        handleExchangeFlow,
+        openOnramp,
+    ]);
+    return payWithDynamic;
+};
+
+export { usePayWithDynamic };

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

@@ -131,6 +131,7 @@ const useWalletOptions = () => {
                 isInstalledOnBrowser: option.isInstalledOnBrowser,
                 isWalletConnect: option.walletConnector.isWalletConnect,
                 key: option.walletConnector.key,
+                metadata: option.walletConnector.metadata,
                 name: option.name,
             };
         });

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

@@ -8,6 +8,7 @@ export declare const useWalletOptions: () => {
         isInstalledOnBrowser: boolean;
         isWalletConnect: boolean;
         key: string;
+        metadata: import("@dynamic-labs/wallet-connector-core").WalletMetadata;
         name: string;
     }[];
     selectWalletOption: (walletKey: string, selectGroupIfAvailable?: boolean) => Promise<Wallet<import("@dynamic-labs/wallet-connector-core").WalletConnectorCore.WalletConnector>>;
@@ -18,6 +19,7 @@ export declare const useWalletOptions: () => {
         isInstalledOnBrowser: boolean;
         isWalletConnect: boolean;
         key: string;
+        metadata: import("@dynamic-labs/wallet-connector-core").WalletMetadata;
         name: string;
     }[];
 };

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

@@ -127,6 +127,7 @@ const useWalletOptions = () => {
                 isInstalledOnBrowser: option.isInstalledOnBrowser,
                 isWalletConnect: option.walletConnector.isWalletConnect,
                 key: option.walletConnector.key,
+                metadata: option.walletConnector.metadata,
                 name: option.name,
             };
         });

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

@@ -65,6 +65,8 @@ require('../../../store/state/tokenBalances.cjs');
 require('../../../store/state/multichainBalances.cjs');
 require('../../../context/WalletGroupContext/WalletGroupContext.cjs');
 require('../../../shared/utils/functions/getInitialUrl/getInitialUrl.cjs');
+require('../../../context/OnrampContext/OnrampContext.cjs');
+require('../../../../index.cjs');
 require('react-dom');
 require('../../../components/ShadowDOM/ShadowDOM.cjs');
 require('../../../components/IconButton/IconButton.cjs');
@@ -93,13 +95,11 @@ require('../../../context/ErrorContext/hooks/useErrorText/useErrorText.cjs');
 require('../../../context/FooterAnimationContext/index.cjs');
 require('../../../views/MfaChooseDeviceView/getMfaOptions/getMfaOptions.cjs');
 require('../../../context/PasskeyContext/PasskeyContext.cjs');
-require('../../../context/OnrampContext/OnrampContext.cjs');
 require('../../../store/state/sendBalances.cjs');
 require('../../../components/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');
 var SignMessageConfirmationModal = require('../../../modals/SignMessageConfirmationModal/SignMessageConfirmationModal.cjs');
 var SyncWalletPromptModal = require('../../../modals/SyncWalletPromptModal/SyncWalletPromptModal.cjs');

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

@@ -61,6 +61,8 @@ import '../../../store/state/tokenBalances.js';
 import '../../../store/state/multichainBalances.js';
 import '../../../context/WalletGroupContext/WalletGroupContext.js';
 import '../../../shared/utils/functions/getInitialUrl/getInitialUrl.js';
+import '../../../context/OnrampContext/OnrampContext.js';
+import '../../../../index.js';
 import 'react-dom';
 import '../../../components/ShadowDOM/ShadowDOM.js';
 import '../../../components/IconButton/IconButton.js';
@@ -89,13 +91,11 @@ import '../../../context/ErrorContext/hooks/useErrorText/useErrorText.js';
 import '../../../context/FooterAnimationContext/index.js';
 import '../../../views/MfaChooseDeviceView/getMfaOptions/getMfaOptions.js';
 import '../../../context/PasskeyContext/PasskeyContext.js';
-import '../../../context/OnrampContext/OnrampContext.js';
 import '../../../store/state/sendBalances.js';
 import '../../../components/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 { SignMessageConfirmationModal } from '../../../modals/SignMessageConfirmationModal/SignMessageConfirmationModal.js';
 import { SyncWalletPromptModal } from '../../../modals/SyncWalletPromptModal/SyncWalletPromptModal.js';

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 };