@dynamic-labs/sdk-react-core 0.19.4 → 0.19.5

package/CHANGELOG.md

@@ -1,4 +1,16 @@
 
+### [0.19.5](https://github.com/dynamic-labs/DynamicAuth/compare/v0.19.4...v0.19.5) (2023-12-05)
+
+
+### Bug Fixes
+
+* add support for embedded wallets in connect-only ([#4041](https://github.com/dynamic-labs/DynamicAuth/issues/4041)) ([#4056](https://github.com/dynamic-labs/DynamicAuth/issues/4056)) ([78f34cb](https://github.com/dynamic-labs/DynamicAuth/commit/78f34cbedf127c301997a72e058f9a4ff62badad))
+* show full passkey name on management view ([#4057](https://github.com/dynamic-labs/DynamicAuth/issues/4057)) ([be9c65a](https://github.com/dynamic-labs/DynamicAuth/commit/be9c65a04143b7253b9b6641e153cb100f626343)), closes [#4043](https://github.com/dynamic-labs/DynamicAuth/issues/4043)
+* make passkey recovery more easily discoverable ([#4058](https://github.com/dynamic-labs/DynamicAuth/issues/4058)) ([#4061](https://github.com/dynamic-labs/DynamicAuth/issues/4061)) ([93c4c4f](https://github.com/dynamic-labs/DynamicAuth/commit/93c4c4fb563bc723e3cd180ba44925db87b25459))
+* fix network picker when using embedded wallet ([#4054](https://github.com/dynamic-labs/DynamicAuth/issues/4054)) ([3bac838](https://github.com/dynamic-labs/DynamicAuth/commit/3bac838d434464ab33bca0fefb0c53208014f41b))
+* clear project settings on page refresh ([#3826](https://github.com/dynamic-labs/DynamicAuth/issues/3826)) ([#4039](https://github.com/dynamic-labs/DynamicAuth/issues/4039)) ([bfbb7b2](https://github.com/dynamic-labs/DynamicAuth/commit/bfbb7b2c3349895e0812c3e884a1e71e4ab84c58))
+* add close button to wallets list ([#4036](https://github.com/dynamic-labs/DynamicAuth/issues/4036)) ([#4046](https://github.com/dynamic-labs/DynamicAuth/issues/4046)) ([6e4038d](https://github.com/dynamic-labs/DynamicAuth/commit/6e4038d49de5c26ceda9be723298daaef4bf8356))
+
 ### [0.19.4](https://github.com/dynamic-labs/DynamicAuth/compare/v0.19.3...v0.19.4) (2023-11-29)
 
 

package/package.cjs

@@ -2,7 +2,7 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-var version = "0.19.4";
+var version = "0.19.5";
 var dependencies = {
 	"@dynamic-labs/iconic": "0.1.37",
 	"@dynamic-labs/sdk-api": "0.0.311",

package/package.js

@@ -1,4 +1,4 @@
-var version = "0.19.4";
+var version = "0.19.5";
 var dependencies = {
 	"@dynamic-labs/iconic": "0.1.37",
 	"@dynamic-labs/sdk-api": "0.0.311",

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@dynamic-labs/sdk-react-core",
-  "version": "0.19.4",
+  "version": "0.19.5",
   "repository": {
     "type": "git",
     "url": "https://github.com/dynamic-labs/DynamicAuth.git",
@@ -17,14 +17,14 @@
     "react-focus-lock": "2.9.2",
     "react-i18next": "^13.2.0",
     "yup": "0.32.11",
-    "@dynamic-labs/ethereum": "0.19.4",
-    "@dynamic-labs/logger": "0.19.4",
-    "@dynamic-labs/multi-wallet": "0.19.4",
-    "@dynamic-labs/rpc-providers": "0.19.4",
-    "@dynamic-labs/types": "0.19.4",
-    "@dynamic-labs/utils": "0.19.4",
-    "@dynamic-labs/wallet-book": "0.19.4",
-    "@dynamic-labs/wallet-connector-core": "0.19.4",
+    "@dynamic-labs/ethereum": "0.19.5",
+    "@dynamic-labs/logger": "0.19.5",
+    "@dynamic-labs/multi-wallet": "0.19.5",
+    "@dynamic-labs/rpc-providers": "0.19.5",
+    "@dynamic-labs/types": "0.19.5",
+    "@dynamic-labs/utils": "0.19.5",
+    "@dynamic-labs/wallet-book": "0.19.5",
+    "@dynamic-labs/wallet-connector-core": "0.19.5",
     "eventemitter3": "5.0.1"
   },
   "devDependencies": {

package/src/index.cjs

@@ -149,12 +149,13 @@ require('formik');
 require('viem');
 require('./lib/components/IconButton/IconButton.cjs');
 require('./lib/components/Alert/Alert.cjs');
-var useEmbeddedWallet = require('./lib/utils/hooks/useEmbeddedWallet/useEmbeddedWallet.cjs');
+var usePasskeyRecovery = require('./lib/utils/hooks/usePasskeyRecovery/usePasskeyRecovery.cjs');
 require('./lib/widgets/DynamicWidget/views/ManagePasskeysWidgetView/PasskeyCard/PasskeyCard.cjs');
 var useWalletItemActions = require('./lib/utils/hooks/useWalletItemActions/useWalletItemActions.cjs');
 var useAuthenticateConnectedUser = require('./lib/utils/hooks/useAuthenticateConnectedUser/useAuthenticateConnectedUser.cjs');
 require('./lib/context/UserFieldEditorContext/UserFieldEditorContext.cjs');
 require('./lib/utils/hooks/useUserUpdateRequest/useUpdateUser/useUpdateUser.cjs');
+var useEmbeddedWallet = require('./lib/utils/hooks/useEmbeddedWallet/useEmbeddedWallet.cjs');
 var useIsLoggedIn = require('./lib/utils/hooks/useIsLoggedIn/useIsLoggedIn.cjs');
 var DynamicConnectButton = require('./lib/components/DynamicConnectButton/DynamicConnectButton.cjs');
 require('./lib/components/Popper/Popper/Popper.cjs');
@@ -305,9 +306,10 @@ exports.useEmailVerificationRequest = useEmailVerificationRequest.useEmailVerifi
 exports.DynamicWidgetContextProvider = DynamicWidgetContext.DynamicWidgetContextProvider;
 exports.useSocialAccounts = useSocialAccounts.useSocialAccounts;
 exports.useUserUpdateRequest = useUserUpdateRequest.useUserUpdateRequest;
-exports.useEmbeddedWallet = useEmbeddedWallet.useEmbeddedWallet;
+exports.usePasskeyRecovery = usePasskeyRecovery.usePasskeyRecovery;
 exports.useWalletItemActions = useWalletItemActions.useWalletItemActions;
 exports.useAuthenticateConnectedUser = useAuthenticateConnectedUser.useAuthenticateConnectedUser;
+exports.useEmbeddedWallet = useEmbeddedWallet.useEmbeddedWallet;
 exports.useIsLoggedIn = useIsLoggedIn.useIsLoggedIn;
 exports.DynamicConnectButton = DynamicConnectButton.DynamicConnectButton;
 exports.WalletList = WalletList.WalletList;

package/src/index.d.ts

@@ -23,7 +23,7 @@ export { classNames } from './lib/utils/functions/classNames';
 export { getNetwork } from './lib/utils/functions/getNetwork';
 export * from './lib/utils/functions/walletFilters';
 export { DynamicWidgetContextProvider } from './lib/widgets/DynamicWidget/context';
-export { useWalletItemActions, useAuthenticateConnectedUser, useSocialAccounts, useEmbeddedWallet, useIsLoggedIn, } from './lib/utils/hooks';
+export { useWalletItemActions, useAuthenticateConnectedUser, useSocialAccounts, useEmbeddedWallet, usePasskeyRecovery, useIsLoggedIn, } from './lib/utils/hooks';
 export { useUserUpdateRequest } from './lib/utils/hooks';
 export { type VerifyEmailCallback, useEmailVerificationRequest, } from './lib/utils/hooks/authenticationHooks/';
 export type { UpdateUserFieldsArg } from './lib/utils/hooks/';

package/src/index.js

@@ -145,12 +145,13 @@ import 'formik';
 import 'viem';
 import './lib/components/IconButton/IconButton.js';
 import './lib/components/Alert/Alert.js';
-export { useEmbeddedWallet } from './lib/utils/hooks/useEmbeddedWallet/useEmbeddedWallet.js';
+export { usePasskeyRecovery } from './lib/utils/hooks/usePasskeyRecovery/usePasskeyRecovery.js';
 import './lib/widgets/DynamicWidget/views/ManagePasskeysWidgetView/PasskeyCard/PasskeyCard.js';
 export { useWalletItemActions } from './lib/utils/hooks/useWalletItemActions/useWalletItemActions.js';
 export { useAuthenticateConnectedUser } from './lib/utils/hooks/useAuthenticateConnectedUser/useAuthenticateConnectedUser.js';
 import './lib/context/UserFieldEditorContext/UserFieldEditorContext.js';
 import './lib/utils/hooks/useUserUpdateRequest/useUpdateUser/useUpdateUser.js';
+export { useEmbeddedWallet } from './lib/utils/hooks/useEmbeddedWallet/useEmbeddedWallet.js';
 export { useIsLoggedIn } from './lib/utils/hooks/useIsLoggedIn/useIsLoggedIn.js';
 export { DynamicConnectButton } from './lib/components/DynamicConnectButton/DynamicConnectButton.js';
 import './lib/components/Popper/Popper/Popper.js';

package/src/lib/components/NeedHelpSection/NeedHelpSection.cjs

@@ -5,18 +5,97 @@ Object.defineProperty(exports, '__esModule', { value: true });
 var jsxRuntime = require('react/jsx-runtime');
 var reactI18next = require('react-i18next');
 var useInternalDynamicContext = require('../../context/DynamicContext/useInternalDynamicContext.cjs');
+require('react');
+require('@dynamic-labs/utils');
+require('@dynamic-labs/sdk-api');
+require('../../config/ApiEndpoint.cjs');
+require('../../shared/logger.cjs');
+require('@dynamic-labs/iconic');
+require('@dynamic-labs/wallet-connector-core');
+var ViewContext = require('../../context/ViewContext/ViewContext.cjs');
+require('@dynamic-labs/wallet-book');
+require('../../utils/constants/colors.cjs');
+require('../../shared/utils/classes/storage/localStorage.cjs');
+require('viem');
+require('../../shared/consts/index.cjs');
+require('@dynamic-labs/multi-wallet');
+require('@dynamic-labs/rpc-providers');
+require('../../utils/hooks/useWallets/utils/verifyMagicIsSetup/verifyMagicIsSetup.cjs');
+require('../../context/ErrorContext/ErrorContext.cjs');
+require('../../context/AccessDeniedContext/AccessDeniedContext.cjs');
+require('../../context/AccountExistsContext/AccountExistsContext.cjs');
+require('react-dom');
 var Typography = require('../Typography/Typography.cjs');
+require('../ShadowDOM/ShadowDOM.cjs');
+require('../../context/ThemeContext/ThemeContext.cjs');
+var classNames = require('../../utils/functions/classNames/classNames.cjs');
+require('react-focus-lock');
+require('../Transition/ZoomTransition/ZoomTransition.cjs');
+require('../Transition/SlideInUpTransition/SlideInUpTransition.cjs');
+require('../Transition/OpacityTransition/OpacityTransition.cjs');
+var TextButton = require('../TextButton/TextButton.cjs');
+require('../IconButton/IconButton.cjs');
+require('../Alert/Alert.cjs');
+require('../Popper/Popper/Popper.cjs');
+require('../Popper/PopperContext/PopperContext.cjs');
+require('formik');
+require('yup');
+require('../InlineWidget/InlineWidget.cjs');
+require('../MenuList/Dropdown/Dropdown.cjs');
+require('../OverlayCard/OverlayCard.context.cjs');
+require('../../context/FooterAnimationContext/index.cjs');
+require('../../context/MockContext/MockContext.cjs');
+require('../../context/QrCodeContext/QrCodeContext.cjs');
+require('../../context/WalletGroupContext/WalletGroupContext.cjs');
+require('../../widgets/DynamicWidget/components/DynamicWidgetHeader/DynamicWidgetHeader.cjs');
+require('../../context/CaptchaContext/CaptchaContext.cjs');
+require('../../context/EmailVerificationContext/EmailVerificationContext.cjs');
+require('qrcode');
+require('../../context/LoadingContext/LoadingContext.cjs');
+require('i18next');
+require('../../widgets/DynamicWidget/context/DynamicWidgetContext.cjs');
+require('../UserProfile/parts/UserProfileField/components/VerifiedEmailIcon/VerifiedEmailIcon.cjs');
+require('@dynamic-labs/types');
+require('../../utils/hooks/useUserUpdateRequest/useUpdateUser/useUpdateUser.cjs');
+require('../../context/UserFieldEditorContext/UserFieldEditorContext.cjs');
+var usePasskeyRecovery = require('../../utils/hooks/usePasskeyRecovery/usePasskeyRecovery.cjs');
+require('../../widgets/DynamicWidget/views/ManagePasskeysWidgetView/PasskeyCard/PasskeyCard.cjs');
 
 const NeedHelpSection = () => {
+    var _a, _b, _c, _d;
     const { projectSettings } = useInternalDynamicContext.useInternalDynamicContext();
     const { t } = reactI18next.useTranslation();
-    const supportEmail = projectSettings === null || projectSettings === void 0 ? void 0 : projectSettings.general.supportEmail;
-    const supportUrl = (projectSettings === null || projectSettings === void 0 ? void 0 : projectSettings.general.supportUrls) &&
-        Object.values(projectSettings === null || projectSettings === void 0 ? void 0 : projectSettings.general.supportUrls)[0];
-    if (!supportEmail && !supportUrl) {
+    const { initPasskeyRecoveryProcess } = usePasskeyRecovery.usePasskeyRecovery();
+    const { view } = ViewContext.useViewContext();
+    const supportEmail = (_a = projectSettings === null || projectSettings === void 0 ? void 0 : projectSettings.general) === null || _a === void 0 ? void 0 : _a.supportEmail;
+    const supportUrl = ((_b = projectSettings === null || projectSettings === void 0 ? void 0 : projectSettings.general) === null || _b === void 0 ? void 0 : _b.supportUrls) &&
+        ((_c = Object.values(projectSettings === null || projectSettings === void 0 ? void 0 : projectSettings.general.supportUrls)) === null || _c === void 0 ? void 0 : _c[0]);
+    // don't show passkey recovery helper on passkey creation flow views
+    const isRecoveryEnabled = !view.startsWith('passkey') &&
+        Boolean((_d = projectSettings === null || projectSettings === void 0 ? void 0 : projectSettings.sdk) === null || _d === void 0 ? void 0 : _d.passkeyEmbeddedWalletRecoveryEnabled);
+    const hasContactInfo = Boolean(supportEmail || supportUrl);
+    const getSupportHelpSession = () => {
+        if (!hasContactInfo) {
+            return null;
+        }
+        return (jsxRuntime.jsxs("div", { className: 'need-help-section__links', children: [supportUrl && (jsxRuntime.jsx(Typography.Typography, { variant: 'body_small', color: 'link', children: jsxRuntime.jsx("a", { href: supportUrl, rel: 'noreferrer', target: '_blank', children: t('dyn_need_help_section.contact_support') }) })), supportEmail && (jsxRuntime.jsx(Typography.Typography, { variant: 'body_small', color: 'link', children: jsxRuntime.jsx("a", { href: `mailto:${supportEmail}`, children: supportEmail }) }))] }));
+    };
+    const getPasskeyRecoverySession = () => {
+        if (!isRecoveryEnabled) {
+            return null;
+        }
+        const recoveryText = t('dyn_need_help_section.recovery_button');
+        const finalRecoveryText = hasContactInfo
+            ? recoveryText
+            : recoveryText.slice(0, 1).toUpperCase() + recoveryText.slice(1);
+        return (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [hasContactInfo && (jsxRuntime.jsx(Typography.Typography, { color: 'secondary', variant: 'body_small', children: t('dyn_need_help_section.divider') })), jsxRuntime.jsx(TextButton.TextButton, { className: classNames.classNames('helper-link', {
+                        'need-help-section--captalize': !hasContactInfo,
+                    }), onClick: initPasskeyRecoveryProcess, children: finalRecoveryText })] }));
+    };
+    if (!hasContactInfo && !isRecoveryEnabled) {
         return null;
     }
-    return (jsxRuntime.jsxs("div", { className: 'need-help-section', children: [jsxRuntime.jsx(Typography.Typography, { color: 'secondary', variant: 'body_small', children: t('dyn_need_help_section.info') }), jsxRuntime.jsxs("div", { className: 'need-help-section__links', children: [supportUrl && (jsxRuntime.jsx(Typography.Typography, { variant: 'body_small', color: 'link', children: jsxRuntime.jsx("a", { href: supportUrl, rel: 'noreferrer', target: '_blank', children: t('dyn_need_help_section.contact_support') }) })), supportEmail && (jsxRuntime.jsx(Typography.Typography, { variant: 'body_small', color: 'link', children: jsxRuntime.jsx("a", { href: `mailto:${supportEmail}`, children: supportEmail }) }))] })] }));
+    return (jsxRuntime.jsxs("div", { className: 'need-help-section', children: [jsxRuntime.jsx(Typography.Typography, { color: 'secondary', variant: 'body_small', children: t('dyn_need_help_section.info') }), getSupportHelpSession(), getPasskeyRecoverySession()] }));
 };
 
 exports.NeedHelpSection = NeedHelpSection;

package/src/lib/components/NeedHelpSection/NeedHelpSection.js

@@ -1,18 +1,97 @@
-import { jsxs, jsx } from 'react/jsx-runtime';
+import { jsxs, jsx, Fragment } from 'react/jsx-runtime';
 import { useTranslation } from 'react-i18next';
 import { useInternalDynamicContext } from '../../context/DynamicContext/useInternalDynamicContext.js';
+import 'react';
+import '@dynamic-labs/utils';
+import '@dynamic-labs/sdk-api';
+import '../../config/ApiEndpoint.js';
+import '../../shared/logger.js';
+import '@dynamic-labs/iconic';
+import '@dynamic-labs/wallet-connector-core';
+import { useViewContext } from '../../context/ViewContext/ViewContext.js';
+import '@dynamic-labs/wallet-book';
+import '../../utils/constants/colors.js';
+import '../../shared/utils/classes/storage/localStorage.js';
+import 'viem';
+import '../../shared/consts/index.js';
+import '@dynamic-labs/multi-wallet';
+import '@dynamic-labs/rpc-providers';
+import '../../utils/hooks/useWallets/utils/verifyMagicIsSetup/verifyMagicIsSetup.js';
+import '../../context/ErrorContext/ErrorContext.js';
+import '../../context/AccessDeniedContext/AccessDeniedContext.js';
+import '../../context/AccountExistsContext/AccountExistsContext.js';
+import 'react-dom';
 import { Typography } from '../Typography/Typography.js';
+import '../ShadowDOM/ShadowDOM.js';
+import '../../context/ThemeContext/ThemeContext.js';
+import { classNames } from '../../utils/functions/classNames/classNames.js';
+import 'react-focus-lock';
+import '../Transition/ZoomTransition/ZoomTransition.js';
+import '../Transition/SlideInUpTransition/SlideInUpTransition.js';
+import '../Transition/OpacityTransition/OpacityTransition.js';
+import { TextButton } from '../TextButton/TextButton.js';
+import '../IconButton/IconButton.js';
+import '../Alert/Alert.js';
+import '../Popper/Popper/Popper.js';
+import '../Popper/PopperContext/PopperContext.js';
+import 'formik';
+import 'yup';
+import '../InlineWidget/InlineWidget.js';
+import '../MenuList/Dropdown/Dropdown.js';
+import '../OverlayCard/OverlayCard.context.js';
+import '../../context/FooterAnimationContext/index.js';
+import '../../context/MockContext/MockContext.js';
+import '../../context/QrCodeContext/QrCodeContext.js';
+import '../../context/WalletGroupContext/WalletGroupContext.js';
+import '../../widgets/DynamicWidget/components/DynamicWidgetHeader/DynamicWidgetHeader.js';
+import '../../context/CaptchaContext/CaptchaContext.js';
+import '../../context/EmailVerificationContext/EmailVerificationContext.js';
+import 'qrcode';
+import '../../context/LoadingContext/LoadingContext.js';
+import 'i18next';
+import '../../widgets/DynamicWidget/context/DynamicWidgetContext.js';
+import '../UserProfile/parts/UserProfileField/components/VerifiedEmailIcon/VerifiedEmailIcon.js';
+import '@dynamic-labs/types';
+import '../../utils/hooks/useUserUpdateRequest/useUpdateUser/useUpdateUser.js';
+import '../../context/UserFieldEditorContext/UserFieldEditorContext.js';
+import { usePasskeyRecovery } from '../../utils/hooks/usePasskeyRecovery/usePasskeyRecovery.js';
+import '../../widgets/DynamicWidget/views/ManagePasskeysWidgetView/PasskeyCard/PasskeyCard.js';
 
 const NeedHelpSection = () => {
+    var _a, _b, _c, _d;
     const { projectSettings } = useInternalDynamicContext();
     const { t } = useTranslation();
-    const supportEmail = projectSettings === null || projectSettings === void 0 ? void 0 : projectSettings.general.supportEmail;
-    const supportUrl = (projectSettings === null || projectSettings === void 0 ? void 0 : projectSettings.general.supportUrls) &&
-        Object.values(projectSettings === null || projectSettings === void 0 ? void 0 : projectSettings.general.supportUrls)[0];
-    if (!supportEmail && !supportUrl) {
+    const { initPasskeyRecoveryProcess } = usePasskeyRecovery();
+    const { view } = useViewContext();
+    const supportEmail = (_a = projectSettings === null || projectSettings === void 0 ? void 0 : projectSettings.general) === null || _a === void 0 ? void 0 : _a.supportEmail;
+    const supportUrl = ((_b = projectSettings === null || projectSettings === void 0 ? void 0 : projectSettings.general) === null || _b === void 0 ? void 0 : _b.supportUrls) &&
+        ((_c = Object.values(projectSettings === null || projectSettings === void 0 ? void 0 : projectSettings.general.supportUrls)) === null || _c === void 0 ? void 0 : _c[0]);
+    // don't show passkey recovery helper on passkey creation flow views
+    const isRecoveryEnabled = !view.startsWith('passkey') &&
+        Boolean((_d = projectSettings === null || projectSettings === void 0 ? void 0 : projectSettings.sdk) === null || _d === void 0 ? void 0 : _d.passkeyEmbeddedWalletRecoveryEnabled);
+    const hasContactInfo = Boolean(supportEmail || supportUrl);
+    const getSupportHelpSession = () => {
+        if (!hasContactInfo) {
+            return null;
+        }
+        return (jsxs("div", { className: 'need-help-section__links', children: [supportUrl && (jsx(Typography, { variant: 'body_small', color: 'link', children: jsx("a", { href: supportUrl, rel: 'noreferrer', target: '_blank', children: t('dyn_need_help_section.contact_support') }) })), supportEmail && (jsx(Typography, { variant: 'body_small', color: 'link', children: jsx("a", { href: `mailto:${supportEmail}`, children: supportEmail }) }))] }));
+    };
+    const getPasskeyRecoverySession = () => {
+        if (!isRecoveryEnabled) {
+            return null;
+        }
+        const recoveryText = t('dyn_need_help_section.recovery_button');
+        const finalRecoveryText = hasContactInfo
+            ? recoveryText
+            : recoveryText.slice(0, 1).toUpperCase() + recoveryText.slice(1);
+        return (jsxs(Fragment, { children: [hasContactInfo && (jsx(Typography, { color: 'secondary', variant: 'body_small', children: t('dyn_need_help_section.divider') })), jsx(TextButton, { className: classNames('helper-link', {
+                        'need-help-section--captalize': !hasContactInfo,
+                    }), onClick: initPasskeyRecoveryProcess, children: finalRecoveryText })] }));
+    };
+    if (!hasContactInfo && !isRecoveryEnabled) {
         return null;
     }
-    return (jsxs("div", { className: 'need-help-section', children: [jsx(Typography, { color: 'secondary', variant: 'body_small', children: t('dyn_need_help_section.info') }), jsxs("div", { className: 'need-help-section__links', children: [supportUrl && (jsx(Typography, { variant: 'body_small', color: 'link', children: jsx("a", { href: supportUrl, rel: 'noreferrer', target: '_blank', children: t('dyn_need_help_section.contact_support') }) })), supportEmail && (jsx(Typography, { variant: 'body_small', color: 'link', children: jsx("a", { href: `mailto:${supportEmail}`, children: supportEmail }) }))] })] }));
+    return (jsxs("div", { className: 'need-help-section', children: [jsx(Typography, { color: 'secondary', variant: 'body_small', children: t('dyn_need_help_section.info') }), getSupportHelpSession(), getPasskeyRecoverySession()] }));
 };
 
 export { NeedHelpSection };

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 { Typography } from '../../../components/Typography/Typography.js';
 import '@dynamic-labs/sdk-api';
 import '../../../shared/logger.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

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

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

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;