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

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

@@ -33,7 +33,6 @@ export interface IDynamicContext {
     authorizationViewDisplayOrder: DisplayOrder;
     awaitingSignatureState: AwaitingSignatureState;
     clearStatesOnBackClick: () => void;
-    computeConnectedStateForWallets: () => Promise<void>;
     connectWallet: (walletConnector: WalletConnector, fetchPublicAddressOpts?: FetchPublicAddressOpts, shouldCallCallback?: boolean) => Promise<ConnectWalletResult | undefined>;
     connectedWallet: Wallet | null;
     connectedWallets: Wallet[];
@@ -108,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>>;
@@ -123,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,18 +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.Turnkey,
-                    embeddedWalletSpecificOpts: {
-                        attestation,
-                        challenge,
-                    },
-                },
-            ],
+            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,18 +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.Turnkey,
-                    embeddedWalletSpecificOpts: {
-                        attestation,
-                        challenge,
-                    },
-                },
-            ],
+            embeddedWallets,
         },
         environmentId,
     });

package/src/lib/layout/DynamicAuthLayout/Header/header.cjs

@@ -89,20 +89,18 @@ const Header = ({ onClose: handleClose, heading, projectSettings, walletConnecto
         selectedWalletConnector === null || selectedWalletConnector === void 0 ? void 0 : selectedWalletConnector.name,
         clearStatesOnBackClick,
     ]);
-    const leadingButtons = React.useMemo(() => {
-        let buttons = [];
-        if (showBackButton) {
-            buttons = [
-                ...buttons,
-                jsxRuntime.jsx(IconButton.IconButton, { type: 'button', onClick: handleBackClick, "data-testid": 'back-button', className: 'header__icon', children: jsxRuntime.jsx(arrowLeft.ReactComponent, {}) }, 'back-button'),
-            ];
-        }
-        return buttons;
-    }, [handleBackClick, showBackButton]);
     const closeButton = showCloseButton && handleClose && (jsxRuntime.jsx(IconButton.IconButton, { onClick: handleClose, type: 'button', id: 'close-button', "data-testid": 'close-button', className: 'header__icon', children: jsxRuntime.jsx(close.ReactComponent, {}) }));
     const infoButton = showHelpContent && (jsxRuntime.jsx(Tooltip.Tooltip, { content: 'Need some help?', className: 'header__tooltip', children: jsxRuntime.jsx(IconButton.IconButton, { type: 'button', onClick: () => setIsFooterExpanded(!isFooterExpanded), "data-testid": 'info-button', className: 'header__icon', children: isWalletListTypeView ? jsxRuntime.jsx(questionMark.ReactComponent, {}) : jsxRuntime.jsx(footerInfoIcon.ReactComponent, {}) }) }, 'info-button'));
+    const leadingButtons = [];
+    if (showBackButton) {
+        leadingButtons.push(jsxRuntime.jsx(IconButton.IconButton, { type: 'button', onClick: handleBackClick, "data-testid": 'back-button', className: 'header__icon', children: jsxRuntime.jsx(arrowLeft.ReactComponent, {}) }, 'back-button'));
+    }
+    // if has close button and info button, info button should be on the right
+    if (closeButton && infoButton) {
+        leadingButtons.push(infoButton);
+    }
     const qrCodePreHeader = (jsxRuntime.jsxs("div", { className: 'qr-code-view__scan-issue-message', children: [jsxRuntime.jsx(Typography.Typography, { color: 'primary', variant: 'body_small', children: "If you're having issues scanning, click\u00A0" }), jsxRuntime.jsx("button", { className: 'qr-code-view__scan-issue-button', onClick: () => setShowQrCodeImage(true), children: "here" })] }));
-    return (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx(ModalHeader.ModalHeader, { leading: leadingButtons, trailing: infoButton || closeButton, displayBorder: displayBorderBelowHeader, children: jsxRuntime.jsx(Typography.Typography, { as: 'h1', variant: 'title', color: 'primary', "data-testid": 'dynamic-auth-modal-heading', className: 'header__typography', children: !projectSettings ? (jsxRuntime.jsx(Skeleton.Skeleton, { className: 'header__skeleton' })) : (heading) }) }), showQrCodePreHeader && qrCodePreHeader] }));
+    return (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx(ModalHeader.ModalHeader, { leading: leadingButtons, trailing: closeButton || infoButton, displayBorder: displayBorderBelowHeader, children: jsxRuntime.jsx(Typography.Typography, { as: 'h1', variant: 'title', color: 'primary', "data-testid": 'dynamic-auth-modal-heading', className: 'header__typography', children: !projectSettings ? (jsxRuntime.jsx(Skeleton.Skeleton, { className: 'header__skeleton' })) : (heading) }) }), showQrCodePreHeader && qrCodePreHeader] }));
 };
 
 exports.Header = Header;

package/src/lib/layout/DynamicAuthLayout/Header/header.js

@@ -1,5 +1,5 @@
 import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
-import { useCallback, useMemo } from 'react';
+import { useCallback } from 'react';
 import '@dynamic-labs/utils';
 import '@dynamic-labs/sdk-api';
 import '../../../config/ApiEndpoint.js';
@@ -85,20 +85,18 @@ const Header = ({ onClose: handleClose, heading, projectSettings, walletConnecto
         selectedWalletConnector === null || selectedWalletConnector === void 0 ? void 0 : selectedWalletConnector.name,
         clearStatesOnBackClick,
     ]);
-    const leadingButtons = useMemo(() => {
-        let buttons = [];
-        if (showBackButton) {
-            buttons = [
-                ...buttons,
-                jsx(IconButton, { type: 'button', onClick: handleBackClick, "data-testid": 'back-button', className: 'header__icon', children: jsx(SvgArrowLeft, {}) }, 'back-button'),
-            ];
-        }
-        return buttons;
-    }, [handleBackClick, showBackButton]);
     const closeButton = showCloseButton && handleClose && (jsx(IconButton, { onClick: handleClose, type: 'button', id: 'close-button', "data-testid": 'close-button', className: 'header__icon', children: jsx(SvgClose, {}) }));
     const infoButton = showHelpContent && (jsx(Tooltip, { content: 'Need some help?', className: 'header__tooltip', children: jsx(IconButton, { type: 'button', onClick: () => setIsFooterExpanded(!isFooterExpanded), "data-testid": 'info-button', className: 'header__icon', children: isWalletListTypeView ? jsx(SvgQuestionMark, {}) : jsx(SvgFooterInfoIcon, {}) }) }, 'info-button'));
+    const leadingButtons = [];
+    if (showBackButton) {
+        leadingButtons.push(jsx(IconButton, { type: 'button', onClick: handleBackClick, "data-testid": 'back-button', className: 'header__icon', children: jsx(SvgArrowLeft, {}) }, 'back-button'));
+    }
+    // if has close button and info button, info button should be on the right
+    if (closeButton && infoButton) {
+        leadingButtons.push(infoButton);
+    }
     const qrCodePreHeader = (jsxs("div", { className: 'qr-code-view__scan-issue-message', children: [jsx(Typography, { color: 'primary', variant: 'body_small', children: "If you're having issues scanning, click\u00A0" }), jsx("button", { className: 'qr-code-view__scan-issue-button', onClick: () => setShowQrCodeImage(true), children: "here" })] }));
-    return (jsxs(Fragment, { children: [jsx(ModalHeader, { leading: leadingButtons, trailing: infoButton || closeButton, displayBorder: displayBorderBelowHeader, children: jsx(Typography, { as: 'h1', variant: 'title', color: 'primary', "data-testid": 'dynamic-auth-modal-heading', className: 'header__typography', children: !projectSettings ? (jsx(Skeleton, { className: 'header__skeleton' })) : (heading) }) }), showQrCodePreHeader && qrCodePreHeader] }));
+    return (jsxs(Fragment, { children: [jsx(ModalHeader, { leading: leadingButtons, trailing: closeButton || infoButton, displayBorder: displayBorderBelowHeader, children: jsx(Typography, { as: 'h1', variant: 'title', color: 'primary', "data-testid": 'dynamic-auth-modal-heading', className: 'header__typography', children: !projectSettings ? (jsx(Skeleton, { className: 'header__skeleton' })) : (heading) }) }), showQrCodePreHeader && qrCodePreHeader] }));
 };
 
 export { Header };

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

@@ -372,13 +372,17 @@ const translation = {
      * @description copy key for Dynamic need help footer section
      * @default
      * {
-        info: 'Any troubles with your passkey?',
-        contact_support: 'Contact Support',
+        info: 'Can’t find your passkey?',
+        contact_support: 'Contact support',
+        divider: 'or',
+        recovery_button: 'generate a new one.',
       }
      */
     dyn_need_help_section: {
-        info: 'Any troubles with your passkey?',
+        info: 'Can’t find your passkey?',
         contact_support: 'Contact support',
+        divider: 'or',
+        recovery_button: 'generate a new one.',
     },
     /**
      * @description copy keys for network not supported view
@@ -476,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
@@ -565,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

@@ -367,13 +367,17 @@ export declare const translation: {
      * @description copy key for Dynamic need help footer section
      * @default
      * {
-        info: 'Any troubles with your passkey?',
-        contact_support: 'Contact Support',
+        info: 'Can’t find your passkey?',
+        contact_support: 'Contact support',
+        divider: 'or',
+        recovery_button: 'generate a new one.',
       }
      */
     dyn_need_help_section: {
         info: string;
         contact_support: string;
+        divider: string;
+        recovery_button: string;
     };
     /**
      * @description copy keys for network not supported view
@@ -471,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
@@ -560,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

@@ -368,13 +368,17 @@ const translation = {
      * @description copy key for Dynamic need help footer section
      * @default
      * {
-        info: 'Any troubles with your passkey?',
-        contact_support: 'Contact Support',
+        info: 'Can’t find your passkey?',
+        contact_support: 'Contact support',
+        divider: 'or',
+        recovery_button: 'generate a new one.',
       }
      */
     dyn_need_help_section: {
-        info: 'Any troubles with your passkey?',
+        info: 'Can’t find your passkey?',
         contact_support: 'Contact support',
+        divider: 'or',
+        recovery_button: 'generate a new one.',
     },
     /**
      * @description copy keys for network not supported view
@@ -472,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
@@ -561,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 };

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

@@ -8,7 +8,7 @@ const TurnkeyErrorMap = {
     3: 'You reached the limit of passkeys for this account.',
 };
 const DOMExceptionErrorMap = {
-    NotAllowedError: 'Make sure to have you browser tab focused.',
+    NotAllowedError: 'Request Cancelled. Select a device or password manager to set up a passkey.',
 };
 const getProperErrorMessage = (originalError) => {
     var _a, _b;

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

@@ -4,7 +4,7 @@ const TurnkeyErrorMap = {
     3: 'You reached the limit of passkeys for this account.',
 };
 const DOMExceptionErrorMap = {
-    NotAllowedError: 'Make sure to have you browser tab focused.',
+    NotAllowedError: 'Request Cancelled. Select a device or password manager to set up a passkey.',
 };
 const getProperErrorMessage = (originalError) => {
     var _a, _b;