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

package/CHANGELOG.md

@@ -1,4 +1,31 @@
 
+## [1.0.0-alpha.7](https://github.com/dynamic-labs/DynamicAuth/compare/v1.0.0-alpha.6...v1.0.0-alpha.7) (2023-12-05)
+
+
+### Features
+
+* add support for Turnkey HD wallets and backwards compatiblity for private key wallets ([#4011](https://github.com/dynamic-labs/DynamicAuth/issues/4011)) ([75c5258](https://github.com/dynamic-labs/DynamicAuth/commit/75c5258da494d5d4dfa8b96655303dd9645f2269))
+
+
+### Bug Fixes
+
+* add close button to wallets list ([#4036](https://github.com/dynamic-labs/DynamicAuth/issues/4036)) ([a2b988b](https://github.com/dynamic-labs/DynamicAuth/commit/a2b988bdfc662af6f85d37a79ed6666c483aa447))
+* add support for embedded wallets in connect-only ([#4041](https://github.com/dynamic-labs/DynamicAuth/issues/4041)) ([ceea635](https://github.com/dynamic-labs/DynamicAuth/commit/ceea635b69e2a0c2636b47fbd30639d69dba7a1c))
+* embedded wallet invalid stored chain breaking network picker ([#4050](https://github.com/dynamic-labs/DynamicAuth/issues/4050)) ([2e2384b](https://github.com/dynamic-labs/DynamicAuth/commit/2e2384ba37407d9164cce47e23f5d5f469f7e062))
+* handle insufficient funds from AA provider ([#4027](https://github.com/dynamic-labs/DynamicAuth/issues/4027)) ([6b9cc88](https://github.com/dynamic-labs/DynamicAuth/commit/6b9cc886f4f2590094bd50aba195c07a5532dfa4))
+* prevent double logout caused by wagmi sync ([#4048](https://github.com/dynamic-labs/DynamicAuth/issues/4048)) ([c66c81c](https://github.com/dynamic-labs/DynamicAuth/commit/c66c81c80839aa9ce1cfae76f4afce12e34f3513))
+* properly detect network switch for secondary wallets ([#4038](https://github.com/dynamic-labs/DynamicAuth/issues/4038)) ([f87174d](https://github.com/dynamic-labs/DynamicAuth/commit/f87174de0892dd057401eaf3c0bc68d974add0fc))
+* **use-wallets-connected-state:** update state on wallet id change ([#4045](https://github.com/dynamic-labs/DynamicAuth/issues/4045)) ([ca3a835](https://github.com/dynamic-labs/DynamicAuth/commit/ca3a8359eae386bffa758ed646ac14af8360a7f8))
+* user should be able to see the full passkey name on management view ([#4043](https://github.com/dynamic-labs/DynamicAuth/issues/4043)) ([7bc1b70](https://github.com/dynamic-labs/DynamicAuth/commit/7bc1b7043cbc9f0e21df78a57efc3e6938a99db2))
+* users should be able to easily find passkey recovery ([#4058](https://github.com/dynamic-labs/DynamicAuth/issues/4058)) ([0202ae9](https://github.com/dynamic-labs/DynamicAuth/commit/0202ae98c96544dec5ac357dc77000996e32ad33))
+
+## [1.0.0-alpha.6](https://github.com/dynamic-labs/DynamicAuth/compare/v1.0.0-alpha.5...v1.0.0-alpha.6) (2023-11-29)
+
+
+### Bug Fixes
+
+* transaction layout show alert ([#4024](https://github.com/dynamic-labs/DynamicAuth/issues/4024)) ([52057f5](https://github.com/dynamic-labs/DynamicAuth/commit/52057f54ebc32464b2486a2328cb6310caf85208)), closes [#4020](https://github.com/dynamic-labs/DynamicAuth/issues/4020)
+
 ## [1.0.0-alpha.5](https://github.com/dynamic-labs/DynamicAuth/compare/v1.0.0-alpha.4...v1.0.0-alpha.5) (2023-11-29)
 
 

package/package.cjs

@@ -2,10 +2,10 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-var version = "1.0.0-alpha.5";
+var version = "1.0.0-alpha.7";
 var dependencies = {
 	"@dynamic-labs/iconic": "0.1.44",
-	"@dynamic-labs/sdk-api": "0.0.311",
+	"@dynamic-labs/sdk-api": "0.0.315",
 	"@hcaptcha/react-hcaptcha": "1.4.4",
 	"country-list": "2.3.0",
 	formik: "2.2.9",

package/package.js

@@ -1,7 +1,7 @@
-var version = "1.0.0-alpha.5";
+var version = "1.0.0-alpha.7";
 var dependencies = {
 	"@dynamic-labs/iconic": "0.1.44",
-	"@dynamic-labs/sdk-api": "0.0.311",
+	"@dynamic-labs/sdk-api": "0.0.315",
 	"@hcaptcha/react-hcaptcha": "1.4.4",
 	"country-list": "2.3.0",
 	formik: "2.2.9",

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@dynamic-labs/sdk-react-core",
-  "version": "1.0.0-alpha.5",
+  "version": "1.0.0-alpha.7",
   "repository": {
     "type": "git",
     "url": "https://github.com/dynamic-labs/DynamicAuth.git",
@@ -8,7 +8,7 @@
   },
   "dependencies": {
     "@dynamic-labs/iconic": "0.1.44",
-    "@dynamic-labs/sdk-api": "0.0.311",
+    "@dynamic-labs/sdk-api": "0.0.315",
     "@hcaptcha/react-hcaptcha": "1.4.4",
     "country-list": "2.3.0",
     "formik": "2.2.9",
@@ -17,14 +17,14 @@
     "react-focus-lock": "2.9.2",
     "react-i18next": "^13.2.0",
     "yup": "0.32.11",
-    "@dynamic-labs/ethereum": "1.0.0-alpha.5",
-    "@dynamic-labs/logger": "1.0.0-alpha.5",
-    "@dynamic-labs/multi-wallet": "1.0.0-alpha.5",
-    "@dynamic-labs/rpc-providers": "1.0.0-alpha.5",
-    "@dynamic-labs/types": "1.0.0-alpha.5",
-    "@dynamic-labs/utils": "1.0.0-alpha.5",
-    "@dynamic-labs/wallet-book": "1.0.0-alpha.5",
-    "@dynamic-labs/wallet-connector-core": "1.0.0-alpha.5",
+    "@dynamic-labs/ethereum": "1.0.0-alpha.7",
+    "@dynamic-labs/logger": "1.0.0-alpha.7",
+    "@dynamic-labs/multi-wallet": "1.0.0-alpha.7",
+    "@dynamic-labs/rpc-providers": "1.0.0-alpha.7",
+    "@dynamic-labs/types": "1.0.0-alpha.7",
+    "@dynamic-labs/utils": "1.0.0-alpha.7",
+    "@dynamic-labs/wallet-book": "1.0.0-alpha.7",
+    "@dynamic-labs/wallet-connector-core": "1.0.0-alpha.7",
     "eventemitter3": "5.0.1"
   },
   "devDependencies": {

package/src/index.cjs

@@ -148,12 +148,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/InlineWidget/InlineWidget.cjs');
@@ -306,9 +307,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.IsBrowser = IsBrowser.IsBrowser;

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

@@ -144,12 +144,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/InlineWidget/InlineWidget.js';

package/src/lib/Main.cjs

@@ -92,27 +92,24 @@ const Main = () => {
         // We want to disconnect wallet when users closes `network not supported` view
         // without updating network in wallet
         // We use onExiting instead onUnmount to avoid jump effect in inline widget
-        if (isConnectOnly.isConnectOnly(user, authMode)) {
-            const viewsToDisconnectWalletOnClose = [
-                'network-not-supported',
-                'network-not-supported-manual',
-            ];
-            if (viewsToDisconnectWalletOnClose.includes(view)) {
-                if (!selectedWalletConnector) {
-                    return;
-                }
-                const walletByConnectorName = connectedWallets.find((connectedWallet) => connectedWallet.connector.name === selectedWalletConnector.name);
-                if (!walletByConnectorName) {
-                    return;
-                }
-                // Validate the network
-                if (!isSupportedNetwork.isSupportedNetwork({
-                    network: yield walletByConnectorName.connector.getNetwork(),
-                    walletConnector: walletByConnectorName.connector,
-                })) {
-                    disconnectWallet(walletByConnectorName.id);
-                }
-            }
+        const viewsToDisconnectWalletOnClose = [
+            'network-not-supported',
+            'network-not-supported-manual',
+        ];
+        if (!isConnectOnly.isConnectOnly(user, authMode) ||
+            !viewsToDisconnectWalletOnClose.includes(view) ||
+            !selectedWalletConnector)
+            return;
+        const walletByConnectorName = connectedWallets.find((connectedWallet) => connectedWallet.connector.name === selectedWalletConnector.name);
+        if (!walletByConnectorName) {
+            return;
+        }
+        // Validate the network
+        if (!isSupportedNetwork.isSupportedNetwork({
+            network: yield walletByConnectorName.connector.getNetwork(),
+            walletConnector: walletByConnectorName.connector,
+        })) {
+            disconnectWallet(walletByConnectorName.id);
         }
     }), [
         selectedWalletConnector,

package/src/lib/Main.js

@@ -88,27 +88,24 @@ const Main = () => {
         // We want to disconnect wallet when users closes `network not supported` view
         // without updating network in wallet
         // We use onExiting instead onUnmount to avoid jump effect in inline widget
-        if (isConnectOnly(user, authMode)) {
-            const viewsToDisconnectWalletOnClose = [
-                'network-not-supported',
-                'network-not-supported-manual',
-            ];
-            if (viewsToDisconnectWalletOnClose.includes(view)) {
-                if (!selectedWalletConnector) {
-                    return;
-                }
-                const walletByConnectorName = connectedWallets.find((connectedWallet) => connectedWallet.connector.name === selectedWalletConnector.name);
-                if (!walletByConnectorName) {
-                    return;
-                }
-                // Validate the network
-                if (!isSupportedNetwork({
-                    network: yield walletByConnectorName.connector.getNetwork(),
-                    walletConnector: walletByConnectorName.connector,
-                })) {
-                    disconnectWallet(walletByConnectorName.id);
-                }
-            }
+        const viewsToDisconnectWalletOnClose = [
+            'network-not-supported',
+            'network-not-supported-manual',
+        ];
+        if (!isConnectOnly(user, authMode) ||
+            !viewsToDisconnectWalletOnClose.includes(view) ||
+            !selectedWalletConnector)
+            return;
+        const walletByConnectorName = connectedWallets.find((connectedWallet) => connectedWallet.connector.name === selectedWalletConnector.name);
+        if (!walletByConnectorName) {
+            return;
+        }
+        // Validate the network
+        if (!isSupportedNetwork({
+            network: yield walletByConnectorName.connector.getNetwork(),
+            walletConnector: walletByConnectorName.connector,
+        })) {
+            disconnectWallet(walletByConnectorName.id);
         }
     }), [
         selectedWalletConnector,

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/AccessDeniedContext/AccessDeniedContext.cjs');
+require('../../context/AccountExistsContext/AccountExistsContext.cjs');
+require('../../context/ErrorContext/ErrorContext.cjs');
+require('react-dom');
+var classNames = require('../../utils/functions/classNames/classNames.cjs');
+require('../Alert/Alert.cjs');
 var Typography = require('../Typography/Typography.cjs');
+var TextButton = require('../TextButton/TextButton.cjs');
+require('../ShadowDOM/ShadowDOM.cjs');
+require('../IconButton/IconButton.cjs');
+require('../../context/ThemeContext/ThemeContext.cjs');
+require('../InlineWidget/InlineWidget.cjs');
+require('../MenuList/Dropdown/Dropdown.cjs');
+require('../Transition/ZoomTransition/ZoomTransition.cjs');
+require('../Transition/SlideInUpTransition/SlideInUpTransition.cjs');
+require('../Transition/OpacityTransition/OpacityTransition.cjs');
+require('../Popper/Popper/Popper.cjs');
+require('../Popper/PopperContext/PopperContext.cjs');
+require('react-focus-lock');
+require('formik');
+require('yup');
+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/AccessDeniedContext/AccessDeniedContext.js';
+import '../../context/AccountExistsContext/AccountExistsContext.js';
+import '../../context/ErrorContext/ErrorContext.js';
+import 'react-dom';
+import { classNames } from '../../utils/functions/classNames/classNames.js';
+import '../Alert/Alert.js';
 import { Typography } from '../Typography/Typography.js';
+import { TextButton } from '../TextButton/TextButton.js';
+import '../ShadowDOM/ShadowDOM.js';
+import '../IconButton/IconButton.js';
+import '../../context/ThemeContext/ThemeContext.js';
+import '../InlineWidget/InlineWidget.js';
+import '../MenuList/Dropdown/Dropdown.js';
+import '../Transition/ZoomTransition/ZoomTransition.js';
+import '../Transition/SlideInUpTransition/SlideInUpTransition.js';
+import '../Transition/OpacityTransition/OpacityTransition.js';
+import '../Popper/Popper/Popper.js';
+import '../Popper/PopperContext/PopperContext.js';
+import 'react-focus-lock';
+import 'formik';
+import 'yup';
+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/components/NetworkPicker/NetworkPicker.cjs

@@ -64,12 +64,13 @@ var MenuList = require('../MenuList/MenuList/MenuList.cjs');
 var NetworkAction = require('./components/NetworkAction/NetworkAction.cjs');
 var NetworkControl = require('./components/NetworkControl/NetworkControl.cjs');
 
-const NetworkPicker = ({ activeClassName = '', buttonClassName = '', checkboxClassName = '', connector, evmNetworks, isNetworkPickerOpen, listClassName = '', mainClassName = '', setIsNetworkPickerOpen, showNetworkName, customCallbackOnSuccess, }) => {
+const NetworkPicker = ({ activeClassName = '', buttonClassName = '', checkboxClassName = '', connector, evmNetworks, isNetworkPickerOpen, listClassName = '', mainClassName = '', setIsNetworkPickerOpen, showNetworkName, customCallbackOnSuccess, currentNetwork, }) => {
     const pickerRef = React.useRef(null);
     const [newNetworkId, setNewNetworkId] = React.useState(undefined);
-    const { loadingNetwork, network, setNetwork } = useInternalDynamicContext.useInternalDynamicContext();
+    const { loadingNetwork, primaryWallet, setNetwork } = useInternalDynamicContext.useInternalDynamicContext();
     const { data: supportedWalletNetworks } = usePromise.usePromise(() => connector === null || connector === void 0 ? void 0 : connector.getSupportedNetworks(), { deps: [connector] });
-    const shouldAllowOpenDropdown = isNetworkUnsupported.isNetworkUnsupported(network, evmNetworks) || (evmNetworks === null || evmNetworks === void 0 ? void 0 : evmNetworks.length) > 1;
+    const shouldAllowOpenDropdown = isNetworkUnsupported.isNetworkUnsupported(currentNetwork, evmNetworks) ||
+        (evmNetworks === null || evmNetworks === void 0 ? void 0 : evmNetworks.length) > 1;
     // Ref to anchor popper to
     const anchorRef = React.useRef(null);
     const handleNetworkChange = (networkId) => _tslib.__awaiter(void 0, void 0, void 0, function* () {
@@ -79,7 +80,8 @@ const NetworkPicker = ({ activeClassName = '', buttonClassName = '', checkboxCla
                 networkChainId: networkId,
             }));
             const chainId = yield (connector === null || connector === void 0 ? void 0 : connector.getNetwork());
-            setNetwork(chainId);
+            if ((primaryWallet === null || primaryWallet === void 0 ? void 0 : primaryWallet.connector.key) === (connector === null || connector === void 0 ? void 0 : connector.key))
+                setNetwork(chainId);
             customCallbackOnSuccess === null || customCallbackOnSuccess === void 0 ? void 0 : customCallbackOnSuccess();
         }
         catch (error) {
@@ -91,10 +93,10 @@ const NetworkPicker = ({ activeClassName = '', buttonClassName = '', checkboxCla
             setIsNetworkPickerOpen(false);
         }
     });
-    return (jsxRuntime.jsxs("div", { className: classNames.classNames('non-widget-network-picker', mainClassName), ref: pickerRef, "data-testid": 'network-picker', children: [jsxRuntime.jsxs("div", { className: 'network-picker-network-control', children: [jsxRuntime.jsx(NetworkControl.NetworkControl, { evmNetworks: evmNetworks, activeClassName: activeClassName, network: network, loading: loadingNetwork, isOpen: isNetworkPickerOpen, setIsOpen: setIsNetworkPickerOpen, walletConnector: connector, showNetworkName: showNetworkName, buttonClassName: buttonClassName }), jsxRuntime.jsx("div", { ref: anchorRef, className: 'network-picker-network-control__anchor' })] }), shouldAllowOpenDropdown && (jsxRuntime.jsx(MenuList.MenuList, { className: listClassName, isOpen: isNetworkPickerOpen, onClickClose: () => setIsNetworkPickerOpen(false), popperProps: {
+    return (jsxRuntime.jsxs("div", { className: classNames.classNames('non-widget-network-picker', mainClassName), ref: pickerRef, "data-testid": 'network-picker', children: [jsxRuntime.jsxs("div", { className: 'network-picker-network-control', children: [jsxRuntime.jsx(NetworkControl.NetworkControl, { evmNetworks: evmNetworks, activeClassName: activeClassName, network: currentNetwork, loading: loadingNetwork, isOpen: isNetworkPickerOpen, setIsOpen: setIsNetworkPickerOpen, walletConnector: connector, showNetworkName: showNetworkName, buttonClassName: buttonClassName }), jsxRuntime.jsx("div", { ref: anchorRef, className: 'network-picker-network-control__anchor' })] }), shouldAllowOpenDropdown && (jsxRuntime.jsx(MenuList.MenuList, { className: listClassName, isOpen: isNetworkPickerOpen, onClickClose: () => setIsNetworkPickerOpen(false), popperProps: {
                     anchorOrigin: 'bottom-left',
                     anchorRef,
-                }, mobileTitle: 'Select network', children: evmNetworks.map(({ name, networkId, vanityName, iconUrls }) => (jsxRuntime.jsx(NetworkAction.NetworkAction, { iconUrl: iconUrls === null || iconUrls === void 0 ? void 0 : iconUrls[0], networkId: networkId, networkName: vanityName || name, network: network, onClick: handleNetworkChange, checkboxClassName: checkboxClassName, newNetworkId: newNetworkId, notSupported: supportedWalletNetworks &&
+                }, mobileTitle: 'Select network', children: evmNetworks.map(({ name, networkId, vanityName, iconUrls }) => (jsxRuntime.jsx(NetworkAction.NetworkAction, { iconUrl: iconUrls === null || iconUrls === void 0 ? void 0 : iconUrls[0], networkId: networkId, networkName: vanityName || name, network: currentNetwork, onClick: handleNetworkChange, checkboxClassName: checkboxClassName, newNetworkId: newNetworkId, notSupported: supportedWalletNetworks &&
                         !supportedWalletNetworks.includes(`${networkId}`) }, networkId))) }))] }));
 };
 

package/src/lib/components/NetworkPicker/NetworkPicker.d.ts

@@ -13,6 +13,7 @@ type Props = {
     mainClassName?: string;
     setIsNetworkPickerOpen: Dispatch<SetStateAction<boolean>>;
     showNetworkName?: boolean;
+    currentNetwork: string | number | undefined;
 };
-export declare const NetworkPicker: ({ activeClassName, buttonClassName, checkboxClassName, connector, evmNetworks, isNetworkPickerOpen, listClassName, mainClassName, setIsNetworkPickerOpen, showNetworkName, customCallbackOnSuccess, }: Props) => JSX.Element;
+export declare const NetworkPicker: ({ activeClassName, buttonClassName, checkboxClassName, connector, evmNetworks, isNetworkPickerOpen, listClassName, mainClassName, setIsNetworkPickerOpen, showNetworkName, customCallbackOnSuccess, currentNetwork, }: Props) => JSX.Element;
 export {};

package/src/lib/components/NetworkPicker/NetworkPicker.js

@@ -60,12 +60,13 @@ import { MenuList } from '../MenuList/MenuList/MenuList.js';
 import { NetworkAction } from './components/NetworkAction/NetworkAction.js';
 import { NetworkControl } from './components/NetworkControl/NetworkControl.js';
 
-const NetworkPicker = ({ activeClassName = '', buttonClassName = '', checkboxClassName = '', connector, evmNetworks, isNetworkPickerOpen, listClassName = '', mainClassName = '', setIsNetworkPickerOpen, showNetworkName, customCallbackOnSuccess, }) => {
+const NetworkPicker = ({ activeClassName = '', buttonClassName = '', checkboxClassName = '', connector, evmNetworks, isNetworkPickerOpen, listClassName = '', mainClassName = '', setIsNetworkPickerOpen, showNetworkName, customCallbackOnSuccess, currentNetwork, }) => {
     const pickerRef = useRef(null);
     const [newNetworkId, setNewNetworkId] = useState(undefined);
-    const { loadingNetwork, network, setNetwork } = useInternalDynamicContext();
+    const { loadingNetwork, primaryWallet, setNetwork } = useInternalDynamicContext();
     const { data: supportedWalletNetworks } = usePromise(() => connector === null || connector === void 0 ? void 0 : connector.getSupportedNetworks(), { deps: [connector] });
-    const shouldAllowOpenDropdown = isNetworkUnsupported(network, evmNetworks) || (evmNetworks === null || evmNetworks === void 0 ? void 0 : evmNetworks.length) > 1;
+    const shouldAllowOpenDropdown = isNetworkUnsupported(currentNetwork, evmNetworks) ||
+        (evmNetworks === null || evmNetworks === void 0 ? void 0 : evmNetworks.length) > 1;
     // Ref to anchor popper to
     const anchorRef = useRef(null);
     const handleNetworkChange = (networkId) => __awaiter(void 0, void 0, void 0, function* () {
@@ -75,7 +76,8 @@ const NetworkPicker = ({ activeClassName = '', buttonClassName = '', checkboxCla
                 networkChainId: networkId,
             }));
             const chainId = yield (connector === null || connector === void 0 ? void 0 : connector.getNetwork());
-            setNetwork(chainId);
+            if ((primaryWallet === null || primaryWallet === void 0 ? void 0 : primaryWallet.connector.key) === (connector === null || connector === void 0 ? void 0 : connector.key))
+                setNetwork(chainId);
             customCallbackOnSuccess === null || customCallbackOnSuccess === void 0 ? void 0 : customCallbackOnSuccess();
         }
         catch (error) {
@@ -87,10 +89,10 @@ const NetworkPicker = ({ activeClassName = '', buttonClassName = '', checkboxCla
             setIsNetworkPickerOpen(false);
         }
     });
-    return (jsxs("div", { className: classNames('non-widget-network-picker', mainClassName), ref: pickerRef, "data-testid": 'network-picker', children: [jsxs("div", { className: 'network-picker-network-control', children: [jsx(NetworkControl, { evmNetworks: evmNetworks, activeClassName: activeClassName, network: network, loading: loadingNetwork, isOpen: isNetworkPickerOpen, setIsOpen: setIsNetworkPickerOpen, walletConnector: connector, showNetworkName: showNetworkName, buttonClassName: buttonClassName }), jsx("div", { ref: anchorRef, className: 'network-picker-network-control__anchor' })] }), shouldAllowOpenDropdown && (jsx(MenuList, { className: listClassName, isOpen: isNetworkPickerOpen, onClickClose: () => setIsNetworkPickerOpen(false), popperProps: {
+    return (jsxs("div", { className: classNames('non-widget-network-picker', mainClassName), ref: pickerRef, "data-testid": 'network-picker', children: [jsxs("div", { className: 'network-picker-network-control', children: [jsx(NetworkControl, { evmNetworks: evmNetworks, activeClassName: activeClassName, network: currentNetwork, loading: loadingNetwork, isOpen: isNetworkPickerOpen, setIsOpen: setIsNetworkPickerOpen, walletConnector: connector, showNetworkName: showNetworkName, buttonClassName: buttonClassName }), jsx("div", { ref: anchorRef, className: 'network-picker-network-control__anchor' })] }), shouldAllowOpenDropdown && (jsx(MenuList, { className: listClassName, isOpen: isNetworkPickerOpen, onClickClose: () => setIsNetworkPickerOpen(false), popperProps: {
                     anchorOrigin: 'bottom-left',
                     anchorRef,
-                }, mobileTitle: 'Select network', children: evmNetworks.map(({ name, networkId, vanityName, iconUrls }) => (jsx(NetworkAction, { iconUrl: iconUrls === null || iconUrls === void 0 ? void 0 : iconUrls[0], networkId: networkId, networkName: vanityName || name, network: network, onClick: handleNetworkChange, checkboxClassName: checkboxClassName, newNetworkId: newNetworkId, notSupported: supportedWalletNetworks &&
+                }, mobileTitle: 'Select network', children: evmNetworks.map(({ name, networkId, vanityName, iconUrls }) => (jsx(NetworkAction, { iconUrl: iconUrls === null || iconUrls === void 0 ? void 0 : iconUrls[0], networkId: networkId, networkName: vanityName || name, network: currentNetwork, onClick: handleNetworkChange, checkboxClassName: checkboxClassName, newNetworkId: newNetworkId, notSupported: supportedWalletNetworks &&
                         !supportedWalletNetworks.includes(`${networkId}`) }, networkId))) }))] }));
 };
 

package/src/lib/components/SendBalancePageLayout/SendBalancePageLayout.cjs

@@ -47,7 +47,7 @@ const SendBalancePageLayout = ({ error, walletAddress, onClickClose, onClickBack
             return;
         return parseFloat(balance);
     }, [balance]);
-    return (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx(ModalHeader.ModalHeader, { leading: backButton, trailing: closeButton, children: jsxRuntime.jsxs("div", { className: 'send-balance-page-layout__header-content', children: [jsxRuntime.jsx(Typography.Typography, { variant: 'body_normal', color: 'primary', as: 'p', children: t('dyn_send_transaction.data.from') }), walletKey && (jsxRuntime.jsx(Icon.Icon, { size: 'small', children: jsxRuntime.jsx(walletBook.WalletIcon, { walletKey: walletKey }) })), jsxRuntime.jsx(Typography.Typography, { variant: 'body_normal', color: 'primary', as: 'p', children: shortenWalletAddress.shortenWalletAddress(walletAddress, 3, 3) })] }) }), jsxRuntime.jsxs("div", { className: 'send-balance-page-layout__body', children: [jsxRuntime.jsx(AnimatePresence.AnimatePresence, { animationComponent: jsxRuntime.jsx(VerticalDrawerTransition.VerticalDrawerTransition, {}), children: error && (jsxRuntime.jsx("div", { className: 'send-balance-page-layout__error', children: jsxRuntime.jsx(Alert.Alert, { icon: 'error', variant: 'error', children: error }) })) }), networkName && networkIcon && (jsxRuntime.jsx("div", { className: 'send-balance-page-layout__network-container', children: jsxRuntime.jsx(Chip.Chip, { icon: networkIcon, children: networkName }) })), jsxRuntime.jsxs("div", { className: 'send-balance-page-layout__balance-container', children: [jsxRuntime.jsx(FormFieldLabel.FormFieldLabel, { divider: true, children: "Token" }), jsxRuntime.jsx(TokenBalanceCard.TokenBalanceCard, { chain: chain, currencySymbol: currencySymbol, balance: balance })] }), jsxRuntime.jsx(SendBalanceForm.SendBalanceForm, { onSubmit: onSubmit, initialValues: initialValues, balance: balanceNumber, decimals: networkCurrencyDecimals }), displayPoweredByDynamicFooter && (jsxRuntime.jsx(PoweredByDynamic.PoweredByDynamic, { classNameRoot: 'send-balance-page-layout__footer' }))] })] }));
+    return (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx(ModalHeader.ModalHeader, { leading: backButton, trailing: closeButton, children: jsxRuntime.jsxs("div", { className: 'send-balance-page-layout__header-content', children: [jsxRuntime.jsx(Typography.Typography, { variant: 'body_normal', color: 'primary', as: 'p', children: t('dyn_send_transaction.data.from') }), walletKey && (jsxRuntime.jsx(Icon.Icon, { size: 'small', children: jsxRuntime.jsx(walletBook.WalletIcon, { walletKey: walletKey }) })), jsxRuntime.jsx(Typography.Typography, { variant: 'body_normal', color: 'primary', as: 'p', children: shortenWalletAddress.shortenWalletAddress(walletAddress, 3, 3) })] }) }), jsxRuntime.jsxs("div", { className: 'send-balance-page-layout__body', children: [jsxRuntime.jsx(AnimatePresence.AnimatePresence, { animationComponent: jsxRuntime.jsx(VerticalDrawerTransition.VerticalDrawerTransition, {}), children: error && (jsxRuntime.jsx("div", { className: 'send-balance-page-layout__error', children: jsxRuntime.jsx(Alert.Alert, { icon: 'error', variant: 'error', children: error }) })) }), networkName && networkIcon && (jsxRuntime.jsx("div", { className: 'send-balance-page-layout__network-container', children: jsxRuntime.jsx(Chip.Chip, { icon: networkIcon, children: networkName }) })), jsxRuntime.jsxs("div", { className: 'send-balance-page-layout__balance-container', children: [jsxRuntime.jsx(FormFieldLabel.FormFieldLabel, { divider: true, children: "Token" }), jsxRuntime.jsx(TokenBalanceCard.TokenBalanceCard, { chainIcon: networkIcon, currencySymbol: currencySymbol, balance: balance })] }), jsxRuntime.jsx(SendBalanceForm.SendBalanceForm, { onSubmit: onSubmit, initialValues: initialValues, balance: balanceNumber, decimals: networkCurrencyDecimals }), displayPoweredByDynamicFooter && (jsxRuntime.jsx(PoweredByDynamic.PoweredByDynamic, { classNameRoot: 'send-balance-page-layout__footer' }))] })] }));
 };
 
 exports.SendBalancePageLayout = SendBalancePageLayout;

package/src/lib/components/SendBalancePageLayout/SendBalancePageLayout.js

@@ -43,7 +43,7 @@ const SendBalancePageLayout = ({ error, walletAddress, onClickClose, onClickBack
             return;
         return parseFloat(balance);
     }, [balance]);
-    return (jsxs(Fragment, { children: [jsx(ModalHeader, { leading: backButton, trailing: closeButton, children: jsxs("div", { className: 'send-balance-page-layout__header-content', children: [jsx(Typography, { variant: 'body_normal', color: 'primary', as: 'p', children: t('dyn_send_transaction.data.from') }), walletKey && (jsx(Icon, { size: 'small', children: jsx(WalletIcon, { walletKey: walletKey }) })), jsx(Typography, { variant: 'body_normal', color: 'primary', as: 'p', children: shortenWalletAddress(walletAddress, 3, 3) })] }) }), jsxs("div", { className: 'send-balance-page-layout__body', children: [jsx(AnimatePresence, { animationComponent: jsx(VerticalDrawerTransition, {}), children: error && (jsx("div", { className: 'send-balance-page-layout__error', children: jsx(Alert, { icon: 'error', variant: 'error', children: error }) })) }), networkName && networkIcon && (jsx("div", { className: 'send-balance-page-layout__network-container', children: jsx(Chip, { icon: networkIcon, children: networkName }) })), jsxs("div", { className: 'send-balance-page-layout__balance-container', children: [jsx(FormFieldLabel, { divider: true, children: "Token" }), jsx(TokenBalanceCard, { chain: chain, currencySymbol: currencySymbol, balance: balance })] }), jsx(SendBalanceForm, { onSubmit: onSubmit, initialValues: initialValues, balance: balanceNumber, decimals: networkCurrencyDecimals }), displayPoweredByDynamicFooter && (jsx(PoweredByDynamic, { classNameRoot: 'send-balance-page-layout__footer' }))] })] }));
+    return (jsxs(Fragment, { children: [jsx(ModalHeader, { leading: backButton, trailing: closeButton, children: jsxs("div", { className: 'send-balance-page-layout__header-content', children: [jsx(Typography, { variant: 'body_normal', color: 'primary', as: 'p', children: t('dyn_send_transaction.data.from') }), walletKey && (jsx(Icon, { size: 'small', children: jsx(WalletIcon, { walletKey: walletKey }) })), jsx(Typography, { variant: 'body_normal', color: 'primary', as: 'p', children: shortenWalletAddress(walletAddress, 3, 3) })] }) }), jsxs("div", { className: 'send-balance-page-layout__body', children: [jsx(AnimatePresence, { animationComponent: jsx(VerticalDrawerTransition, {}), children: error && (jsx("div", { className: 'send-balance-page-layout__error', children: jsx(Alert, { icon: 'error', variant: 'error', children: error }) })) }), networkName && networkIcon && (jsx("div", { className: 'send-balance-page-layout__network-container', children: jsx(Chip, { icon: networkIcon, children: networkName }) })), jsxs("div", { className: 'send-balance-page-layout__balance-container', children: [jsx(FormFieldLabel, { divider: true, children: "Token" }), jsx(TokenBalanceCard, { chainIcon: networkIcon, currencySymbol: currencySymbol, balance: balance })] }), jsx(SendBalanceForm, { onSubmit: onSubmit, initialValues: initialValues, balance: balanceNumber, decimals: networkCurrencyDecimals }), displayPoweredByDynamicFooter && (jsx(PoweredByDynamic, { classNameRoot: 'send-balance-page-layout__footer' }))] })] }));
 };
 
 export { SendBalancePageLayout };