@dynamic-labs/sdk-react-core 1.0.0-alpha.7 → 1.0.0-alpha.8

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

@@ -100,6 +100,7 @@ import { useNameService } from './hooks/useNameService/useNameService.js';
 import { useSelectedWalletConnector } from './hooks/useSelectedWalletConnector/useSelectedWalletConnector.js';
 import { useSetShowAuthFlowWithInit } from './hooks/useSetShowAuthFlowWithInit/useSetShowAuthFlowWithInit.js';
 import { useVerificationInProgress } from './hooks/useVerificationInProgress/useVerificationInProgress.js';
+import { useShowPasskeyCreateSuccess } from './hooks/useShowPasskeyCreateSuccess/useShowPasskeyCreateSuccess.js';
 import { getInternalEvents } from './internalEvents/internalEvents.js';
 import { useCustomerCallbacks } from './useCustomerCallbacks/useCustomerCallbacks.js';
 import { useCustomerAuthFlowCallbacks } from './useCustomerCallbacks/useCustomerAuthFlowCallbacks.js';
@@ -459,6 +460,7 @@ const DynamicContextProvider = ({ children, theme, settings, locale, }) => {
         clearAllWalletConnectSessions,
         removeConnectedWalletsInfo,
     ]);
+    const { showPasskeyCreatedSuccess, setShowPasskeyCreatedSuccess } = useShowPasskeyCreateSuccess();
     const value = useMemo(() => {
         var _a, _b, _c;
         return ({
@@ -556,6 +558,7 @@ const DynamicContextProvider = ({ children, theme, settings, locale, }) => {
             setShowAuthFlow: setShowAuthFlowWithInit,
             setShowBridgeWidget,
             setShowDynamicUserProfile,
+            setShowPasskeyCreatedSuccess,
             setShowQrcodeModal,
             setShowWidgetStatePopup,
             setUser,
@@ -564,6 +567,7 @@ const DynamicContextProvider = ({ children, theme, settings, locale, }) => {
             showBridgeWidget,
             showDynamicUserProfile,
             showLockedWalletView,
+            showPasskeyCreatedSuccess,
             showQrcodeModal,
             showWidgetStatePopup,
             signWithEmailWalletName,
@@ -621,6 +625,7 @@ const DynamicContextProvider = ({ children, theme, settings, locale, }) => {
         isSingleWalletAccount,
         isVerificationInProgress,
         legacyIsVerifying,
+        user,
         linkedOrConnectedWallets,
         loadingNetwork,
         loginWithEmail,
@@ -660,6 +665,7 @@ const DynamicContextProvider = ({ children, theme, settings, locale, }) => {
         setSdkHasLoaded,
         setSelectedWalletConnectorKey,
         setShowAuthFlowWithInit,
+        setShowPasskeyCreatedSuccess,
         setShowQrcodeModal,
         setUser,
         shadowDOMEnabled,
@@ -667,6 +673,7 @@ const DynamicContextProvider = ({ children, theme, settings, locale, }) => {
         showBridgeWidget,
         showDynamicUserProfile,
         showLockedWalletView,
+        showPasskeyCreatedSuccess,
         showQrcodeModal,
         showWidgetStatePopup,
         signWithEmailWalletName,
@@ -678,7 +685,6 @@ const DynamicContextProvider = ({ children, theme, settings, locale, }) => {
         termsOfServiceUrl,
         theme,
         toolkitEnabled,
-        user,
         walletUiUtils,
         wallets,
         walletsFilter,

package/src/lib/context/DynamicContext/hooks/index.d.ts

@@ -4,3 +4,4 @@ export * from './useNameService';
 export * from './useSelectedWalletConnector';
 export * from './useSetShowAuthFlowWithInit';
 export * from './useVerificationInProgress';
+export * from './useShowPasskeyCreateSuccess';

package/src/lib/context/DynamicContext/hooks/useShowPasskeyCreateSuccess/index.d.ts

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

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

@@ -0,0 +1,23 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var React = require('react');
+
+const useShowPasskeyCreateSuccess = () => {
+    const [showPasskeyCreatedSuccess, _setShowPasskeyCreatedSuccess] = React.useState(false);
+    // Show the success message for 2 seconds then hide it
+    // The logic is here to not have to duplicate it in multiple views
+    const setShowPasskeyCreatedSuccess = () => {
+        _setShowPasskeyCreatedSuccess(true);
+        setTimeout(() => {
+            _setShowPasskeyCreatedSuccess(false);
+        }, 2000);
+    };
+    return {
+        setShowPasskeyCreatedSuccess,
+        showPasskeyCreatedSuccess,
+    };
+};
+
+exports.useShowPasskeyCreateSuccess = useShowPasskeyCreateSuccess;

package/src/lib/context/DynamicContext/hooks/useShowPasskeyCreateSuccess/useShowPasskeyCreateSuccess.d.ts

@@ -0,0 +1,4 @@
+export declare const useShowPasskeyCreateSuccess: () => {
+    setShowPasskeyCreatedSuccess: () => void;
+    showPasskeyCreatedSuccess: boolean;
+};

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

@@ -0,0 +1,19 @@
+import { useState } from 'react';
+
+const useShowPasskeyCreateSuccess = () => {
+    const [showPasskeyCreatedSuccess, _setShowPasskeyCreatedSuccess] = useState(false);
+    // Show the success message for 2 seconds then hide it
+    // The logic is here to not have to duplicate it in multiple views
+    const setShowPasskeyCreatedSuccess = () => {
+        _setShowPasskeyCreatedSuccess(true);
+        setTimeout(() => {
+            _setShowPasskeyCreatedSuccess(false);
+        }, 2000);
+    };
+    return {
+        setShowPasskeyCreatedSuccess,
+        showPasskeyCreatedSuccess,
+    };
+};
+
+export { useShowPasskeyCreateSuccess };

package/src/lib/context/DynamicContext/types/index.d.ts

@@ -107,6 +107,7 @@ export interface IDynamicContext {
     /** The unwrapped version of setShowAuthFlow. See useSetShowAuthFlowWithInit.ts for context */
     internalSetShowAuthFlow: Dispatch<SetStateAction<boolean>>;
     setShowDynamicUserProfile: Dispatch<SetStateAction<boolean>>;
+    setShowPasskeyCreatedSuccess: VoidFunction;
     setShowQrcodeModal: Dispatch<SetStateAction<boolean>>;
     setShowWidgetStatePopup: Dispatch<SetStateAction<boolean>>;
     setUser: Dispatch<SetStateAction<UserProfile | undefined>>;
@@ -122,6 +123,7 @@ export interface IDynamicContext {
      */
     showBridgeWidget: boolean;
     showLockedWalletView?: boolean;
+    showPasskeyCreatedSuccess: boolean;
     showQrcodeModal: boolean;
     showWidgetStatePopup: boolean;
     signWithEmailWalletName?: string;

package/src/lib/data/api.cjs

@@ -475,19 +475,22 @@ const mergeUserAccounts = (userJwt, environmentId) => _tslib.__awaiter(void 0, v
     }
 });
 const createTurnkeyEvmEmbeddedWallet = ({ attestation, challenge, environmentId, userJwt, }) => _tslib.__awaiter(void 0, void 0, void 0, function* () {
+    const embeddedWallets = [
+        {
+            chain: sdkApi$1.ChainEnum.Evm,
+            embeddedWalletProvider: sdkApi$1.EmbeddedWalletProviderEnum.Turnkeyhd,
+            isAuthenticatorAttached: false,
+        },
+    ];
+    if (attestation && challenge) {
+        embeddedWallets[0] = Object.assign(Object.assign({}, embeddedWallets[0]), { embeddedWalletSpecificOpts: {
+                attestation,
+                challenge,
+            }, isAuthenticatorAttached: true });
+    }
     return sdkApi(userJwt).createEmbeddedWallets({
         createEmbeddedWalletsRequest: {
-            embeddedWallets: [
-                {
-                    chain: sdkApi$1.ChainEnum.Evm,
-                    embeddedWalletProvider: sdkApi$1.EmbeddedWalletProviderEnum.Turnkeyhd,
-                    embeddedWalletSpecificOpts: {
-                        attestation,
-                        challenge,
-                    },
-                    isAuthenticatorAttached: true,
-                },
-            ],
+            embeddedWallets,
         },
         environmentId,
     });

package/src/lib/data/api.d.ts

@@ -76,8 +76,8 @@ export declare const mergeUserAccounts: (userJwt: string, environmentId: string)
 export type CreateTurnkeyEvmEmbeddedWalletProps = {
     userJwt: string;
     environmentId: string;
-    attestation: PasskeyRegistrationCredential;
-    challenge: string;
+    attestation?: PasskeyRegistrationCredential;
+    challenge?: string;
 };
 export declare const createTurnkeyEvmEmbeddedWallet: ({ attestation, challenge, environmentId, userJwt, }: CreateTurnkeyEvmEmbeddedWalletProps) => Promise<VerifyResponse>;
 export type InitPasskeyRecoveryProps = {

package/src/lib/data/api.js

@@ -471,19 +471,22 @@ const mergeUserAccounts = (userJwt, environmentId) => __awaiter(void 0, void 0,
     }
 });
 const createTurnkeyEvmEmbeddedWallet = ({ attestation, challenge, environmentId, userJwt, }) => __awaiter(void 0, void 0, void 0, function* () {
+    const embeddedWallets = [
+        {
+            chain: ChainEnum.Evm,
+            embeddedWalletProvider: EmbeddedWalletProviderEnum.Turnkeyhd,
+            isAuthenticatorAttached: false,
+        },
+    ];
+    if (attestation && challenge) {
+        embeddedWallets[0] = Object.assign(Object.assign({}, embeddedWallets[0]), { embeddedWalletSpecificOpts: {
+                attestation,
+                challenge,
+            }, isAuthenticatorAttached: true });
+    }
     return sdkApi(userJwt).createEmbeddedWallets({
         createEmbeddedWalletsRequest: {
-            embeddedWallets: [
-                {
-                    chain: ChainEnum.Evm,
-                    embeddedWalletProvider: EmbeddedWalletProviderEnum.Turnkeyhd,
-                    embeddedWalletSpecificOpts: {
-                        attestation,
-                        challenge,
-                    },
-                    isAuthenticatorAttached: true,
-                },
-            ],
+            embeddedWallets,
         },
         environmentId,
     });

package/src/lib/locale/en/translation.cjs

@@ -480,6 +480,16 @@ const translation = {
         hang_tight: 'Hang tight while we get things ready for you',
         verification_succeeded: 'Verification code confirmed',
     },
+    /**
+     * @description copy key for passkey created success banner
+     * @default
+     * {
+        text: 'A new passkey has been created',
+      }
+     */
+    dyn_passkey_created_success: {
+        text: 'A new passkey has been created',
+    },
     /**
      * @description copy keys for passkey intro view
      * @default
@@ -569,6 +579,66 @@ const translation = {
             title: 'Initiate Request',
         },
     },
+    /**
+     * @description copy keys for passkeys creation flow for existent embedded wallets
+     * @default
+     * {
+        code: {
+          description: 'An email has been sent from',
+          input_label: 'Enter your code here...',
+          title: 'Enter email code',
+          resend: {
+            button: 'Resend code',
+            text: "Didn't receive a code?",
+          },
+        },
+        complete: {
+          complete_button: 'Create a passkey',
+          description:
+            'Passkeys are stored natively to your device with a biometric and can only be accessed by you.',
+          title: 'Secure your account',
+        },
+        start: {
+          description:
+            'A one-time security code will be sent to the email on file. It will expire in 15 minutes.',
+          start_button: 'Send me an email',
+          title: 'Send Email Code',
+        },
+      }
+     */
+    dyn_passkey_secure_modal: {
+        code: {
+            description: 'An email has been sent from',
+            input_label: 'Enter your code here...',
+            title: 'Enter email code',
+            resend: {
+                button: 'Resend code',
+                text: "Didn't receive a code?",
+            },
+        },
+        complete: {
+            complete_button: 'Create a passkey',
+            description: 'Passkeys are stored natively to your device with a biometric and can only be accessed by you.',
+            title: 'Secure your account',
+        },
+        start: {
+            description: 'A one-time security code will be sent to the email on file. It will expire in 15 minutes.',
+            start_button: 'Send me an email',
+            title: 'Send Email Code',
+        },
+    },
+    /**
+     * @description copy keys for secure pregenerated embedded wallet
+     * @default
+     * {
+        description: 'Some features are not available until you add a security method to your account.',
+        secure_button: 'Secure your account',
+      }
+     */
+    dyn_secure_pregenerated_wallet: {
+        description: 'Some features are not available until you add a security method to your account.',
+        secure_button: 'Secure your account',
+    },
     /**
      * @description copy keys for send transaction flow views
      * @default

package/src/lib/locale/en/translation.d.ts

@@ -475,6 +475,16 @@ export declare const translation: {
         hang_tight: string;
         verification_succeeded: string;
     };
+    /**
+     * @description copy key for passkey created success banner
+     * @default
+     * {
+        text: 'A new passkey has been created',
+      }
+     */
+    dyn_passkey_created_success: {
+        text: string;
+    };
     /**
      * @description copy keys for passkey intro view
      * @default
@@ -564,6 +574,66 @@ export declare const translation: {
             title: string;
         };
     };
+    /**
+     * @description copy keys for passkeys creation flow for existent embedded wallets
+     * @default
+     * {
+        code: {
+          description: 'An email has been sent from',
+          input_label: 'Enter your code here...',
+          title: 'Enter email code',
+          resend: {
+            button: 'Resend code',
+            text: "Didn't receive a code?",
+          },
+        },
+        complete: {
+          complete_button: 'Create a passkey',
+          description:
+            'Passkeys are stored natively to your device with a biometric and can only be accessed by you.',
+          title: 'Secure your account',
+        },
+        start: {
+          description:
+            'A one-time security code will be sent to the email on file. It will expire in 15 minutes.',
+          start_button: 'Send me an email',
+          title: 'Send Email Code',
+        },
+      }
+     */
+    dyn_passkey_secure_modal: {
+        code: {
+            description: string;
+            input_label: string;
+            title: string;
+            resend: {
+                button: string;
+                text: string;
+            };
+        };
+        complete: {
+            complete_button: string;
+            description: string;
+            title: string;
+        };
+        start: {
+            description: string;
+            start_button: string;
+            title: string;
+        };
+    };
+    /**
+     * @description copy keys for secure pregenerated embedded wallet
+     * @default
+     * {
+        description: 'Some features are not available until you add a security method to your account.',
+        secure_button: 'Secure your account',
+      }
+     */
+    dyn_secure_pregenerated_wallet: {
+        description: string;
+        secure_button: string;
+    };
     /**
      * @description copy keys for send transaction flow views
      * @default

package/src/lib/locale/en/translation.js

@@ -476,6 +476,16 @@ const translation = {
         hang_tight: 'Hang tight while we get things ready for you',
         verification_succeeded: 'Verification code confirmed',
     },
+    /**
+     * @description copy key for passkey created success banner
+     * @default
+     * {
+        text: 'A new passkey has been created',
+      }
+     */
+    dyn_passkey_created_success: {
+        text: 'A new passkey has been created',
+    },
     /**
      * @description copy keys for passkey intro view
      * @default
@@ -565,6 +575,66 @@ const translation = {
             title: 'Initiate Request',
         },
     },
+    /**
+     * @description copy keys for passkeys creation flow for existent embedded wallets
+     * @default
+     * {
+        code: {
+          description: 'An email has been sent from',
+          input_label: 'Enter your code here...',
+          title: 'Enter email code',
+          resend: {
+            button: 'Resend code',
+            text: "Didn't receive a code?",
+          },
+        },
+        complete: {
+          complete_button: 'Create a passkey',
+          description:
+            'Passkeys are stored natively to your device with a biometric and can only be accessed by you.',
+          title: 'Secure your account',
+        },
+        start: {
+          description:
+            'A one-time security code will be sent to the email on file. It will expire in 15 minutes.',
+          start_button: 'Send me an email',
+          title: 'Send Email Code',
+        },
+      }
+     */
+    dyn_passkey_secure_modal: {
+        code: {
+            description: 'An email has been sent from',
+            input_label: 'Enter your code here...',
+            title: 'Enter email code',
+            resend: {
+                button: 'Resend code',
+                text: "Didn't receive a code?",
+            },
+        },
+        complete: {
+            complete_button: 'Create a passkey',
+            description: 'Passkeys are stored natively to your device with a biometric and can only be accessed by you.',
+            title: 'Secure your account',
+        },
+        start: {
+            description: 'A one-time security code will be sent to the email on file. It will expire in 15 minutes.',
+            start_button: 'Send me an email',
+            title: 'Send Email Code',
+        },
+    },
+    /**
+     * @description copy keys for secure pregenerated embedded wallet
+     * @default
+     * {
+        description: 'Some features are not available until you add a security method to your account.',
+        secure_button: 'Secure your account',
+      }
+     */
+    dyn_secure_pregenerated_wallet: {
+        description: 'Some features are not available until you add a security method to your account.',
+        secure_button: 'Secure your account',
+    },
     /**
      * @description copy keys for send transaction flow views
      * @default

package/src/lib/modals/SignMessageConfirmationModal/SignMessageConfirmationModal.cjs

@@ -38,6 +38,7 @@ require('../../components/OverlayCard/OverlayCard.context.cjs');
 require('../../context/FooterAnimationContext/index.cjs');
 require('../../context/MockContext/MockContext.cjs');
 require('../../context/QrCodeContext/QrCodeContext.cjs');
+var useIsTurnkeyWallet = require('../../utils/hooks/useIsTurnkeyWallet/useIsTurnkeyWallet.cjs');
 var PoweredByDynamic = require('../../components/PoweredByDynamic/PoweredByDynamic.cjs');
 require('../../context/WalletGroupContext/WalletGroupContext.cjs');
 require('../../widgets/DynamicWidget/components/DynamicWidgetHeader/DynamicWidgetHeader.cjs');
@@ -54,6 +55,7 @@ require('yup');
 var ErrorContainer = require('../../components/ErrorContainer/ErrorContainer.cjs');
 require('../../components/UserProfile/parts/UserProfileField/components/VerifiedEmailIcon/VerifiedEmailIcon.cjs');
 require('@dynamic-labs/types');
+var useMutation = require('../../utils/hooks/useMutation/useMutation.cjs');
 require('../../utils/hooks/useUserUpdateRequest/useUpdateUser/useUpdateUser.cjs');
 require('../../context/UserFieldEditorContext/UserFieldEditorContext.cjs');
 require('formik');
@@ -63,9 +65,10 @@ var IconButton = require('../../components/IconButton/IconButton.cjs');
 var Typography = require('../../components/Typography/Typography.cjs');
 require('../../components/Alert/Alert.cjs');
 var AppOriginTile = require('../../components/AppOriginTile/AppOriginTile.cjs');
+var SecureTurnkeyWalletCard = require('../../components/SecureTurnkeyWalletCard/SecureTurnkeyWalletCard.cjs');
+var PasskeyCreatedSuccessBanner = require('../../components/PasskeyCreatedSuccessBanner/PasskeyCreatedSuccessBanner.cjs');
 require('../../widgets/DynamicWidget/views/ManagePasskeysWidgetView/PasskeyCard/PasskeyCard.cjs');
 var getProperErrorMessage = require('./getProperErrorMessage.cjs');
-var useMutation = require('../../utils/hooks/useMutation/useMutation.cjs');
 require('../../components/InlineWidget/InlineWidget.cjs');
 require('../../components/MenuList/Dropdown/Dropdown.cjs');
 var Modal = require('../../components/Modal/Modal.cjs');
@@ -80,6 +83,7 @@ const SignMessageConfirmationModal = ({ appLogoUrl, appName, appOrigin, message,
     usePreventPageScroll.usePreventPageScroll(true);
     const didConfirmRef = React.useRef(false);
     const [show, setShow] = React.useState(true);
+    const { isTurnkeyWalletWithoutAuthenticator } = useIsTurnkeyWallet.useIsTurnkeyWallet();
     const { t } = reactI18next.useTranslation();
     const handleOnReject = React.useCallback(() => {
         didConfirmRef.current = false;
@@ -100,7 +104,7 @@ const SignMessageConfirmationModal = ({ appLogoUrl, appName, appOrigin, message,
     const closeButton = (jsxRuntime.jsx(IconButton.IconButton, { type: 'button', onClick: handleOnReject, "data-testid": 'close', disabled: isLoading, children: jsxRuntime.jsx(close.ReactComponent, {}) }));
     return (jsxRuntime.jsx(Portal.Portal, { handleClose: handleOnReject, isShown: show, zIndex: index.authModalZIndex, withBackdrop: true, elementId: 'dynamic-sign-message', transitionEvents: {
             onUnmount: handleOnModalUnmount,
-        }, children: jsxRuntime.jsx(Modal.Modal, { children: jsxRuntime.jsxs(ModalCard.ModalCard, { children: [jsxRuntime.jsx(ModalHeader.ModalHeader, { trailing: closeButton, alignContent: 'bottom', children: jsxRuntime.jsx(IconWithSpinner.IconWithSpinner, { Icon: (props) => (jsxRuntime.jsx(Icon.Icon, { color: 'brand-primary', children: jsxRuntime.jsx(signCircle.ReactComponent, Object.assign({}, props)) })), iconSize: 64, isSpinning: true }) }), jsxRuntime.jsxs("div", { className: 'sign-message-confirmation__body', children: [jsxRuntime.jsx(Typography.Typography, { variant: 'title', color: 'primary', className: 'sign-message-confirmation__title', children: t('dyn_sign_message.title') }), jsxRuntime.jsx(AnimatePresence.AnimatePresence, { animationComponent: jsxRuntime.jsx(VerticalDrawerTransition.VerticalDrawerTransition, {}), children: signMessageError && (jsxRuntime.jsx("div", { className: 'sign-message-confirmation__error', children: jsxRuntime.jsx(ErrorContainer.ErrorContainer, { children: getProperErrorMessage.getProperErrorMessage(signMessageError) }) })) }), jsxRuntime.jsxs("div", { className: 'sign-message-confirmation__message-container', children: [jsxRuntime.jsx(AppOriginTile.AppOriginTile, { appLogoUrl: appLogoUrl, appName: appName, appOrigin: appOrigin }), jsxRuntime.jsx("div", { className: 'sign-message-confirmation__message', children: jsxRuntime.jsx(SignMessagePreview.SignMessagePreview, { message: message.toString() }) })] }), jsxRuntime.jsxs("div", { className: 'sign-message-confirmation__actions', children: [jsxRuntime.jsx(Button.Button, { buttonVariant: 'secondary', onClick: handleOnReject, expanded: true, buttonPadding: 'large', disabled: isLoading, children: t('dyn_sign_message.cancel_button') }), jsxRuntime.jsx(Button.Button, { buttonVariant: 'primary', buttonPadding: 'large', onClick: () => confirm(), expanded: true, loading: isLoading, children: t('dyn_sign_message.sign_button') })] }), jsxRuntime.jsx(NeedHelpSection.NeedHelpSection, {}), jsxRuntime.jsx(PoweredByDynamic.PoweredByDynamic, {})] })] }) }) }));
+        }, children: jsxRuntime.jsx(Modal.Modal, { children: jsxRuntime.jsxs(ModalCard.ModalCard, { children: [jsxRuntime.jsx(ModalHeader.ModalHeader, { trailing: closeButton, alignContent: 'bottom', children: jsxRuntime.jsx(IconWithSpinner.IconWithSpinner, { Icon: (props) => (jsxRuntime.jsx(Icon.Icon, { color: 'brand-primary', children: jsxRuntime.jsx(signCircle.ReactComponent, Object.assign({}, props)) })), iconSize: 64, isSpinning: true }) }), jsxRuntime.jsx(PasskeyCreatedSuccessBanner.PasskeyCreatedSuccessBanner, {}), jsxRuntime.jsxs("div", { className: 'sign-message-confirmation__body', children: [jsxRuntime.jsx(Typography.Typography, { variant: 'title', color: 'primary', className: 'sign-message-confirmation__title', children: t('dyn_sign_message.title') }), jsxRuntime.jsx(AnimatePresence.AnimatePresence, { animationComponent: jsxRuntime.jsx(VerticalDrawerTransition.VerticalDrawerTransition, {}), children: signMessageError && (jsxRuntime.jsx("div", { className: 'sign-message-confirmation__error', children: jsxRuntime.jsx(ErrorContainer.ErrorContainer, { children: getProperErrorMessage.getProperErrorMessage(signMessageError) }) })) }), jsxRuntime.jsxs("div", { className: 'sign-message-confirmation__message-container', children: [jsxRuntime.jsx(AppOriginTile.AppOriginTile, { appLogoUrl: appLogoUrl, appName: appName, appOrigin: appOrigin }), jsxRuntime.jsx("div", { className: 'sign-message-confirmation__message', children: jsxRuntime.jsx(SignMessagePreview.SignMessagePreview, { message: message.toString() }) })] }), jsxRuntime.jsx(SecureTurnkeyWalletCard.SecureTurnkeyWalletCard, { className: 'sign-message-confirmation__secure-wallet' }), jsxRuntime.jsxs("div", { className: 'sign-message-confirmation__actions', children: [jsxRuntime.jsx(Button.Button, { buttonVariant: 'secondary', onClick: handleOnReject, expanded: true, buttonPadding: 'large', disabled: isLoading, children: t('dyn_sign_message.cancel_button') }), jsxRuntime.jsx(Button.Button, { buttonVariant: 'primary', buttonPadding: 'large', onClick: () => confirm(), expanded: true, disabled: isTurnkeyWalletWithoutAuthenticator, loading: isLoading, children: t('dyn_sign_message.sign_button') })] }), jsxRuntime.jsx(NeedHelpSection.NeedHelpSection, {}), jsxRuntime.jsx(PoweredByDynamic.PoweredByDynamic, {})] })] }) }) }));
 };
 
 exports.SignMessageConfirmationModal = SignMessageConfirmationModal;

package/src/lib/modals/SignMessageConfirmationModal/SignMessageConfirmationModal.js

@@ -34,6 +34,7 @@ import '../../components/OverlayCard/OverlayCard.context.js';
 import '../../context/FooterAnimationContext/index.js';
 import '../../context/MockContext/MockContext.js';
 import '../../context/QrCodeContext/QrCodeContext.js';
+import { useIsTurnkeyWallet } from '../../utils/hooks/useIsTurnkeyWallet/useIsTurnkeyWallet.js';
 import { PoweredByDynamic } from '../../components/PoweredByDynamic/PoweredByDynamic.js';
 import '../../context/WalletGroupContext/WalletGroupContext.js';
 import '../../widgets/DynamicWidget/components/DynamicWidgetHeader/DynamicWidgetHeader.js';
@@ -50,6 +51,7 @@ import 'yup';
 import { ErrorContainer } from '../../components/ErrorContainer/ErrorContainer.js';
 import '../../components/UserProfile/parts/UserProfileField/components/VerifiedEmailIcon/VerifiedEmailIcon.js';
 import '@dynamic-labs/types';
+import { useMutation } from '../../utils/hooks/useMutation/useMutation.js';
 import '../../utils/hooks/useUserUpdateRequest/useUpdateUser/useUpdateUser.js';
 import '../../context/UserFieldEditorContext/UserFieldEditorContext.js';
 import 'formik';
@@ -59,9 +61,10 @@ import { IconButton } from '../../components/IconButton/IconButton.js';
 import { Typography } from '../../components/Typography/Typography.js';
 import '../../components/Alert/Alert.js';
 import { AppOriginTile } from '../../components/AppOriginTile/AppOriginTile.js';
+import { SecureTurnkeyWalletCard } from '../../components/SecureTurnkeyWalletCard/SecureTurnkeyWalletCard.js';
+import { PasskeyCreatedSuccessBanner } from '../../components/PasskeyCreatedSuccessBanner/PasskeyCreatedSuccessBanner.js';
 import '../../widgets/DynamicWidget/views/ManagePasskeysWidgetView/PasskeyCard/PasskeyCard.js';
 import { getProperErrorMessage } from './getProperErrorMessage.js';
-import { useMutation } from '../../utils/hooks/useMutation/useMutation.js';
 import '../../components/InlineWidget/InlineWidget.js';
 import '../../components/MenuList/Dropdown/Dropdown.js';
 import { Modal } from '../../components/Modal/Modal.js';
@@ -76,6 +79,7 @@ const SignMessageConfirmationModal = ({ appLogoUrl, appName, appOrigin, message,
     usePreventPageScroll(true);
     const didConfirmRef = useRef(false);
     const [show, setShow] = useState(true);
+    const { isTurnkeyWalletWithoutAuthenticator } = useIsTurnkeyWallet();
     const { t } = useTranslation();
     const handleOnReject = useCallback(() => {
         didConfirmRef.current = false;
@@ -96,7 +100,7 @@ const SignMessageConfirmationModal = ({ appLogoUrl, appName, appOrigin, message,
     const closeButton = (jsx(IconButton, { type: 'button', onClick: handleOnReject, "data-testid": 'close', disabled: isLoading, children: jsx(SvgClose, {}) }));
     return (jsx(Portal, { handleClose: handleOnReject, isShown: show, zIndex: authModalZIndex, withBackdrop: true, elementId: 'dynamic-sign-message', transitionEvents: {
             onUnmount: handleOnModalUnmount,
-        }, children: jsx(Modal, { children: jsxs(ModalCard, { children: [jsx(ModalHeader, { trailing: closeButton, alignContent: 'bottom', children: jsx(IconWithSpinner, { Icon: (props) => (jsx(Icon, { color: 'brand-primary', children: jsx(SvgSignCircle, Object.assign({}, props)) })), iconSize: 64, isSpinning: true }) }), jsxs("div", { className: 'sign-message-confirmation__body', children: [jsx(Typography, { variant: 'title', color: 'primary', className: 'sign-message-confirmation__title', children: t('dyn_sign_message.title') }), jsx(AnimatePresence, { animationComponent: jsx(VerticalDrawerTransition, {}), children: signMessageError && (jsx("div", { className: 'sign-message-confirmation__error', children: jsx(ErrorContainer, { children: getProperErrorMessage(signMessageError) }) })) }), jsxs("div", { className: 'sign-message-confirmation__message-container', children: [jsx(AppOriginTile, { appLogoUrl: appLogoUrl, appName: appName, appOrigin: appOrigin }), jsx("div", { className: 'sign-message-confirmation__message', children: jsx(SignMessagePreview, { message: message.toString() }) })] }), jsxs("div", { className: 'sign-message-confirmation__actions', children: [jsx(Button, { buttonVariant: 'secondary', onClick: handleOnReject, expanded: true, buttonPadding: 'large', disabled: isLoading, children: t('dyn_sign_message.cancel_button') }), jsx(Button, { buttonVariant: 'primary', buttonPadding: 'large', onClick: () => confirm(), expanded: true, loading: isLoading, children: t('dyn_sign_message.sign_button') })] }), jsx(NeedHelpSection, {}), jsx(PoweredByDynamic, {})] })] }) }) }));
+        }, children: jsx(Modal, { children: jsxs(ModalCard, { children: [jsx(ModalHeader, { trailing: closeButton, alignContent: 'bottom', children: jsx(IconWithSpinner, { Icon: (props) => (jsx(Icon, { color: 'brand-primary', children: jsx(SvgSignCircle, Object.assign({}, props)) })), iconSize: 64, isSpinning: true }) }), jsx(PasskeyCreatedSuccessBanner, {}), jsxs("div", { className: 'sign-message-confirmation__body', children: [jsx(Typography, { variant: 'title', color: 'primary', className: 'sign-message-confirmation__title', children: t('dyn_sign_message.title') }), jsx(AnimatePresence, { animationComponent: jsx(VerticalDrawerTransition, {}), children: signMessageError && (jsx("div", { className: 'sign-message-confirmation__error', children: jsx(ErrorContainer, { children: getProperErrorMessage(signMessageError) }) })) }), jsxs("div", { className: 'sign-message-confirmation__message-container', children: [jsx(AppOriginTile, { appLogoUrl: appLogoUrl, appName: appName, appOrigin: appOrigin }), jsx("div", { className: 'sign-message-confirmation__message', children: jsx(SignMessagePreview, { message: message.toString() }) })] }), jsx(SecureTurnkeyWalletCard, { className: 'sign-message-confirmation__secure-wallet' }), jsxs("div", { className: 'sign-message-confirmation__actions', children: [jsx(Button, { buttonVariant: 'secondary', onClick: handleOnReject, expanded: true, buttonPadding: 'large', disabled: isLoading, children: t('dyn_sign_message.cancel_button') }), jsx(Button, { buttonVariant: 'primary', buttonPadding: 'large', onClick: () => confirm(), expanded: true, disabled: isTurnkeyWalletWithoutAuthenticator, loading: isLoading, children: t('dyn_sign_message.sign_button') })] }), jsx(NeedHelpSection, {}), jsx(PoweredByDynamic, {})] })] }) }) }));
 };
 
 export { SignMessageConfirmationModal };