@dynamic-labs/sdk-react-core 4.6.2 → 4.7.0

package/src/lib/views/UserDeleteAccountView/UserDeleteAccountView.js

@@ -0,0 +1,125 @@
+'use client'
+import { __awaiter } from '../../../../_virtual/_tslib.js';
+import { jsx, jsxs } from 'react/jsx-runtime';
+import { useState, useCallback, useMemo } from 'react';
+import { useTranslation } from 'react-i18next';
+import '../../events/dynamicEvents.js';
+import '@dynamic-labs/utils';
+import '../../context/DynamicContext/DynamicContext.js';
+import '@dynamic-labs/sdk-api-core';
+import '../../shared/logger.js';
+import '@dynamic-labs/iconic';
+import '@dynamic-labs/wallet-connector-core';
+import { ReactComponent as SvgExclamation } from '../../shared/assets/exclamation.js';
+import '../../context/ViewContext/ViewContext.js';
+import { ReactComponent as SvgWarningRed } from '../../shared/assets/warning-red.js';
+import '@dynamic-labs/wallet-book';
+import '../../utils/constants/colors.js';
+import '../../utils/constants/values.js';
+import '../../shared/consts/index.js';
+import { useInternalDynamicContext } from '../../context/DynamicContext/useDynamicContext/useInternalDynamicContext.js';
+import '../../context/CaptchaContext/CaptchaContext.js';
+import '../../context/ErrorContext/ErrorContext.js';
+import '@dynamic-labs/multi-wallet';
+import 'react-international-phone';
+import '../../store/state/nonce/nonce.js';
+import '../../store/state/projectSettings/projectSettings.js';
+import '../../config/ApiEndpoint.js';
+import '../../store/state/user/user.js';
+import '../../locale/locale.js';
+import '../../store/state/dynamicContextProps/dynamicContextProps.js';
+import '../../store/state/primaryWalletId/primaryWalletId.js';
+import '../../context/AccessDeniedContext/AccessDeniedContext.js';
+import '../../context/AccountExistsContext/AccountExistsContext.js';
+import '../../context/UserWalletsContext/UserWalletsContext.js';
+import '../../context/VerificationContext/VerificationContext.js';
+import 'react-dom';
+import '../../utils/functions/compareChains/compareChains.js';
+import '../../context/ThemeContext/ThemeContext.js';
+import '../../utils/hooks/useUserUpdateRequest/useUpdateUser/userFieldsSchema.js';
+import 'bs58';
+import '@dynamic-labs/types';
+import '../../context/SocialRedirectContext/SocialRedirectContext.js';
+import '../../context/LoadingContext/LoadingContext.js';
+import '../../context/WalletContext/WalletContext.js';
+import '../../utils/hooks/useEmbeddedWallet/useSecureEnclaveEmbeddedWallet/constants.js';
+import 'yup';
+import '../../context/MockContext/MockContext.js';
+import '../CollectUserDataView/useFields.js';
+import '../../context/FieldsStateContext/FieldsStateContext.js';
+import '../../context/UserFieldEditorContext/UserFieldEditorContext.js';
+import '@dynamic-labs/rpc-providers';
+import '../../store/state/loadingAndLifecycle.js';
+import '@dynamic-labs/store';
+import '../../store/state/walletOptions/walletOptions.js';
+import '../../components/Accordion/components/AccordionItem/AccordionItem.js';
+import '../../components/Alert/Alert.js';
+import { Typography } from '../../components/Typography/Typography.js';
+import '../../components/ShadowDOM/ShadowDOM.js';
+import { TypographyButton } from '../../components/TypographyButton/TypographyButton.js';
+import '../../components/IconButton/IconButton.js';
+import '../../components/InlineWidget/InlineWidget.js';
+import { Input } from '../../components/Input/Input.js';
+import '../../components/IsBrowser/IsBrowser.js';
+import '../../components/MenuList/Dropdown/Dropdown.js';
+import '../../components/OverlayCard/OverlayCard.js';
+import '../../components/Transition/ZoomTransition/ZoomTransition.js';
+import '../../components/Transition/SlideInUpTransition/SlideInUpTransition.js';
+import '../../components/Transition/OpacityTransition/OpacityTransition.js';
+import '../../components/PasskeyCreatedSuccessBanner/PasskeyCreatedSuccessBanner.js';
+import '../../components/Popper/Popper/Popper.js';
+import '../../components/Popper/PopperContext/PopperContext.js';
+import 'react-focus-lock';
+import 'qrcode';
+import 'formik';
+import '../../utils/hooks/useSubdomainCheck/useSubdomainCheck.js';
+import '../../context/WalletGroupContext/WalletGroupContext.js';
+import '../../context/IpConfigurationContext/IpConfigurationContext.js';
+import '../../context/ConnectWithOtpContext/ConnectWithOtpContext.js';
+import '../../context/ConnectWithOtpContext/constants.js';
+import '../../widgets/DynamicBridgeWidget/views/WalletsView/components/SecondaryWallets/SecondaryWallets.js';
+import '@hcaptcha/react-hcaptcha';
+import '../../widgets/DynamicWidget/context/DynamicWidgetContext.js';
+import '../../context/FooterAnimationContext/index.js';
+import '../../context/PasskeyContext/PasskeyContext.js';
+import '../../store/state/sendBalances.js';
+import '../../components/OverlayCardBase/OverlayCardTarget/OverlayCardTarget.js';
+import '../../widgets/DynamicWidget/components/DynamicWidgetHeader/DynamicWidgetHeader.js';
+import '../TransactionConfirmationView/TransactionConfirmationView.js';
+import '../../widgets/DynamicWidget/views/ManagePasskeysWidgetView/PasskeyCard/PasskeyCard.js';
+import '../../context/OnrampContext/OnrampContext.js';
+import '../../widgets/DynamicWidget/views/ReceiveWalletFunds/ReceiveWalletFunds.js';
+import '../../../index.js';
+import '../../store/state/tokenBalances.js';
+import '../../shared/utils/functions/getInitialUrl/getInitialUrl.js';
+import { useDeleteUserAccount } from '../../utils/hooks/useDeleteUserAccount/useDeleteUserAccount.js';
+
+const UserDeleteAccountView = () => {
+    const { setShowAuthFlow } = useInternalDynamicContext();
+    const { t } = useTranslation();
+    const { deleteUser, isLoading, error } = useDeleteUserAccount();
+    const [isBackupConfirmed, setIsBackupConfirmed] = useState(false);
+    const [confirmText, setConfirmText] = useState('');
+    const handleConfirmTextChange = useCallback((e) => {
+        setConfirmText(e.target.value);
+    }, []);
+    const handleBackupConfirmChange = useCallback((e) => {
+        setIsBackupConfirmed(e.target.checked);
+    }, []);
+    const handleCancel = useCallback(() => {
+        setShowAuthFlow(false);
+    }, [setShowAuthFlow]);
+    const handleDelete = useCallback(() => __awaiter(void 0, void 0, void 0, function* () {
+        if (!isBackupConfirmed)
+            return;
+        yield deleteUser();
+    }), [deleteUser, isBackupConfirmed]);
+    const isDeleteEnabled = useMemo(() => isBackupConfirmed && confirmText === 'DELETE' && !isLoading, [isBackupConfirmed, confirmText, isLoading]);
+    return (jsx("div", { className: 'delete-account-view', children: jsxs("div", { className: 'delete-account-view__content', children: [jsx("div", { className: 'warning-section', children: jsxs("div", { className: 'warning-icon-container', children: [jsx(SvgWarningRed, { className: 'warning-icon' }), jsx(SvgExclamation, { className: 'exclamation-icon' })] }) }), jsx("div", { className: 'message-box', children: jsx(Typography, { variant: 'body_normal', children: t('dyn_settings.delete_account.description') }) }), jsxs("div", { className: 'confirmation-section', children: [jsxs("div", { className: 'checkbox-container', children: [jsx("input", { type: 'checkbox', checked: isBackupConfirmed, onChange: handleBackupConfirmChange }), jsx(Typography, { className: 'checkbox-text', variant: 'body_small', children: t('dyn_settings.delete_account.backup_confirmation') })] }), jsxs("div", { className: 'input-section', children: [jsx(Typography, { className: 'input-label', variant: 'body_small', children: t('dyn_settings.delete_account.type_delete') }), jsx(Input, { id: 'delete-confirmation', label: t('dyn_settings.delete_account.type_delete_label'), value: confirmText, onChange: handleConfirmTextChange, placeholder: 'DELETE', variant: 'dense' })] }), error && (jsx(Typography, { variant: 'body_small', color: 'error-1', children: error.message }))] }), jsxs("div", { className: 'button-group', children: [jsx(TypographyButton, { buttonClassName: 'cancel-button', buttonVariant: 'primary', type: 'button', onClick: handleCancel, copykey: 'dyn_settings.delete_account.cancel', children: t('dyn_settings.delete_account.cancel') }), jsx(TypographyButton, { buttonClassName: 'delete-button', buttonVariant: 'primary', type: 'submit', onClick: handleDelete, disabled: !isDeleteEnabled, typographyProps: {
+                                color: isDeleteEnabled ? 'white' : 'tertiary',
+                            }, copykey: 'dyn_settings.delete_account.confirm', children: isLoading
+                                ? t('dyn_settings.delete_account.deleting')
+                                : t('dyn_settings.delete_account.confirm') })] })] }) }));
+};
+
+export { UserDeleteAccountView, UserDeleteAccountView as default };

package/src/lib/views/UserDeleteAccountView/index.d.ts

@@ -0,0 +1 @@
+export * from './UserDeleteAccountView';

package/src/lib/views/viewToComponentMap.cjs

@@ -4,6 +4,7 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 
 var jsxRuntime = require('react/jsx-runtime');
+var UserDeleteAccountView = require('./UserDeleteAccountView/UserDeleteAccountView.cjs');
 var AccessBlockedView = require('./AccessBlockedView/AccessBlockedView.cjs');
 var AccountExistsView = require('./AccountExistsView/AccountExistsView.cjs');
 var BridgeNextWalletConnectionView = require('./BridgeNextWalletConnectionView/BridgeNextWalletConnectionView.cjs');
@@ -203,6 +204,7 @@ const viewToComponentMap = {
     'select-wallet-in-wallet-group': SelectWalletInWalletGroupView.SelectWalletInWalletGroupView,
     'social-redirect-view': SocialRedirectView.SocialRedirectView,
     'social-wrong-account': SocialWrongAccountView.SocialWrongAccountView,
+    'user-delete-account': UserDeleteAccountView.UserDeleteAccountView,
     'verify-email': EmailVerification.EmailVerification,
     'verify-sms': SmsVerification.SmsVerification,
     'wait-for-email-confirmation-view': EmailConfirmationWaitingView.EmailConfirmationWaitingView,

package/src/lib/views/viewToComponentMap.d.ts

@@ -78,6 +78,7 @@ export declare const viewToComponentMap: {
     }>;
     'social-redirect-view': () => JSX.Element;
     'social-wrong-account': () => JSX.Element | null;
+    'user-delete-account': import("react").FC<{}>;
     'verify-email': import("react").FC<import("./EmailVerification/EmailVerification").EmailVerificationProps>;
     'verify-sms': import("react").FC;
     'wait-for-email-confirmation-view': () => JSX.Element;

package/src/lib/views/viewToComponentMap.js

@@ -1,5 +1,6 @@
 'use client'
 import { jsx } from 'react/jsx-runtime';
+import { UserDeleteAccountView } from './UserDeleteAccountView/UserDeleteAccountView.js';
 import { AccessBlockedView } from './AccessBlockedView/AccessBlockedView.js';
 import { AccountExistsView } from './AccountExistsView/AccountExistsView.js';
 import { BridgeNextWalletConnectionView } from './BridgeNextWalletConnectionView/BridgeNextWalletConnectionView.js';
@@ -199,6 +200,7 @@ const viewToComponentMap = {
     'select-wallet-in-wallet-group': SelectWalletInWalletGroupView,
     'social-redirect-view': SocialRedirectView,
     'social-wrong-account': SocialWrongAccountView,
+    'user-delete-account': UserDeleteAccountView,
     'verify-email': EmailVerification,
     'verify-sms': SmsVerification,
     'wait-for-email-confirmation-view': EmailConfirmationWaitingView,

package/src/lib/widgets/DynamicWidget/components/ActiveWalletInformation/ActiveWalletAddress/ActiveWalletAddress.cjs

@@ -4,10 +4,10 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 
 var jsxRuntime = require('react/jsx-runtime');
+var React = require('react');
 require('@dynamic-labs/utils');
 require('../../../../../components/Accordion/components/AccordionItem/AccordionItem.cjs');
 require('../../../../../components/Alert/Alert.cjs');
-require('react');
 require('../../../../../events/dynamicEvents.cjs');
 require('../../../../../../../_virtual/_tslib.cjs');
 require('../../../../../context/DynamicContext/DynamicContext.cjs');
@@ -15,7 +15,7 @@ require('@dynamic-labs/sdk-api-core');
 require('../../../../../shared/logger.cjs');
 require('@dynamic-labs/iconic');
 require('@dynamic-labs/wallet-connector-core');
-var gear = require('../../../../../shared/assets/gear.cjs');
+var arrowDown = require('../../../../../shared/assets/arrow-down.cjs');
 require('../../../../../context/ViewContext/ViewContext.cjs');
 require('@dynamic-labs/wallet-book');
 var shortenWalletAddress = require('../../../../../shared/utils/functions/shortenWalletAddress/shortenWalletAddress.cjs');
@@ -70,14 +70,15 @@ require('../../../../../context/WalletGroupContext/WalletGroupContext.cjs');
 require('../../DynamicWidgetHeader/DynamicWidgetHeader.cjs');
 require('react-focus-lock');
 require('../../../context/DynamicWidgetContext.cjs');
-var DotsMenu = require('../../DotsMenu/DotsMenu.cjs');
+require('../../../../../components/IconButton/IconButton.cjs');
+var Dropdown = require('../../../../../components/MenuList/Dropdown/Dropdown.cjs');
+var DotsMenuDropdown = require('../../DotsMenuDropdown/DotsMenuDropdown.cjs');
+var BaseButton = require('../../../../../components/BaseButton/BaseButton.cjs');
 require('formik');
 require('../../../../../utils/hooks/useSubdomainCheck/useSubdomainCheck.cjs');
-require('../../../../../components/IconButton/IconButton.cjs');
 require('../../../../../store/state/sendBalances.cjs');
 require('../../../../../components/Input/Input.cjs');
 require('../../../../../components/OverlayCard/OverlayCard.cjs');
-require('../../../../../components/MenuList/Dropdown/Dropdown.cjs');
 require('../../../../../views/TransactionConfirmationView/TransactionConfirmationView.cjs');
 var PasskeyContext = require('../../../../../context/PasskeyContext/PasskeyContext.cjs');
 require('../../../views/ManagePasskeysWidgetView/PasskeyCard/PasskeyCard.cjs');
@@ -118,6 +119,16 @@ const ActiveWalletAddress = ({ wallet, nameServiceName, menuOption, fullWidth =
     const { showAlert } = PasskeyContext.usePasskeyContext();
     const header = nameServiceName || getNameIfNoIcon(wallet);
     const { network } = useWalletConnectorNetwork.useWalletConnectorNetwork(wallet === null || wallet === void 0 ? void 0 : wallet.connector);
+    const [showMenu, setShowMenu] = React.useState(false);
+    const handleMenuClose = React.useCallback(() => {
+        setShowMenu(false);
+    }, [setShowMenu]);
+    const handleMenuOpen = React.useCallback(() => {
+        // Use setTimeout here to prevent React 17 from triggering a click event
+        // when the dropdown is rendered.
+        setTimeout(() => setShowMenu(true), 0);
+    }, [setShowMenu]);
+    const iconRef = React.useRef(null);
     const { data: address } = usePromise.usePromise(() => {
         // COSMOS wallet address changes based on which network is selected
         if ((wallet === null || wallet === void 0 ? void 0 : wallet.connector.connectedChain) === 'COSMOS') {
@@ -128,9 +139,10 @@ const ActiveWalletAddress = ({ wallet, nameServiceName, menuOption, fullWidth =
         deps: [wallet, network],
         enabled: Boolean(wallet),
     });
-    return (jsxRuntime.jsxs("div", { className: 'active-wallet-information__address-container', children: [jsxRuntime.jsxs("div", { children: [jsxRuntime.jsx(Typography.Typography, { className: fullWidth
-                            ? 'active-wallet-information__handle--full-width'
-                            : 'active-wallet-information__handle', color: 'primary', variant: 'body_normal', "data-testid": 'header-text', children: header }), jsxRuntime.jsx(Typography.Typography, { className: 'active-wallet-information__address', weight: header ? 'regular' : 'medium', variant: header ? 'body_small' : 'body_normal', color: header ? 'secondary' : 'primary', children: isLoading ? (jsxRuntime.jsx(Skeleton.Skeleton, { className: 'active-wallet-information__address-skeleton' })) : (shortenWalletAddress.shortenWalletAddress(address, 4, 4)) })] }), jsxRuntime.jsx(DotsMenu.DotsMenu, { "data-testid": 'dots-menu', options: menuOption, buttonClassName: 'active-wallet-information__dots-menu', buttonClassNameWithOpenMenu: 'active-wallet-information__dots-menu', iconOverride: showAlert() ? (jsxRuntime.jsx(IconWithStatus.IconWithStatus, { Icon: () => jsxRuntime.jsx(gear.ReactComponent, { width: 16, height: 16 }), variant: 'yellow' })) : (jsxRuntime.jsx(gear.ReactComponent, { width: 16, height: 16 })) })] }));
+    const menuIcon = React.useMemo(() => (jsxRuntime.jsx("div", { ref: iconRef, className: 'active-wallet-information__handle-icon', children: showAlert() ? (jsxRuntime.jsx(IconWithStatus.IconWithStatus, { Icon: () => jsxRuntime.jsx(arrowDown.ReactComponent, { width: 24, height: 24 }), variant: 'yellow' })) : (jsxRuntime.jsx(arrowDown.ReactComponent, { width: 24, height: 24 })) })), [showAlert]);
+    return (jsxRuntime.jsxs("div", { className: 'active-wallet-information__address-container', children: [jsxRuntime.jsxs(BaseButton.BaseButton, { onClick: handleMenuOpen, dataTestId: 'active-wallet-information-button', children: [jsxRuntime.jsxs("div", { className: 'active-wallet-information__handle-row', children: [jsxRuntime.jsx(Typography.Typography, { className: fullWidth
+                                    ? 'active-wallet-information__handle--full-width'
+                                    : 'active-wallet-information__handle', color: 'primary', variant: 'body_normal', "data-testid": 'header-text', children: header }), header && menuIcon] }), jsxRuntime.jsxs("div", { className: 'active-wallet-information__handle-row', children: [jsxRuntime.jsx(Typography.Typography, { className: 'active-wallet-information__address', weight: header ? 'regular' : 'medium', variant: header ? 'body_small' : 'body_normal', color: header ? 'secondary' : 'primary', children: isLoading ? (jsxRuntime.jsx(Skeleton.Skeleton, { className: 'active-wallet-information__address-skeleton' })) : (shortenWalletAddress.shortenWalletAddress(address, 4, 4)) }), !header && menuIcon] })] }), jsxRuntime.jsx(Dropdown.Dropdown, { isOpen: showMenu, onClickOutside: handleMenuClose, onScroll: handleMenuClose, anchorRef: iconRef, anchorOrigin: 'bottom-right', transformOrigin: 'top-left', children: jsxRuntime.jsx(DotsMenuDropdown.DotsMenuDropdown, { options: menuOption, setShowMenu: setShowMenu }) })] }));
 };
 
 exports.ActiveWalletAddress = ActiveWalletAddress;

package/src/lib/widgets/DynamicWidget/components/ActiveWalletInformation/ActiveWalletAddress/ActiveWalletAddress.js

@@ -1,9 +1,9 @@
 'use client'
-import { jsxs, jsx } from 'react/jsx-runtime';
+import { jsx, jsxs } from 'react/jsx-runtime';
+import { useState, useCallback, useRef, useMemo } from 'react';
 import '@dynamic-labs/utils';
 import '../../../../../components/Accordion/components/AccordionItem/AccordionItem.js';
 import '../../../../../components/Alert/Alert.js';
-import 'react';
 import '../../../../../events/dynamicEvents.js';
 import '../../../../../../../_virtual/_tslib.js';
 import '../../../../../context/DynamicContext/DynamicContext.js';
@@ -11,7 +11,7 @@ import '@dynamic-labs/sdk-api-core';
 import '../../../../../shared/logger.js';
 import '@dynamic-labs/iconic';
 import '@dynamic-labs/wallet-connector-core';
-import { ReactComponent as SvgGear } from '../../../../../shared/assets/gear.js';
+import { ReactComponent as SvgArrowDown } from '../../../../../shared/assets/arrow-down.js';
 import '../../../../../context/ViewContext/ViewContext.js';
 import '@dynamic-labs/wallet-book';
 import { shortenWalletAddress } from '../../../../../shared/utils/functions/shortenWalletAddress/shortenWalletAddress.js';
@@ -66,14 +66,15 @@ import '../../../../../context/WalletGroupContext/WalletGroupContext.js';
 import '../../DynamicWidgetHeader/DynamicWidgetHeader.js';
 import 'react-focus-lock';
 import '../../../context/DynamicWidgetContext.js';
-import { DotsMenu } from '../../DotsMenu/DotsMenu.js';
+import '../../../../../components/IconButton/IconButton.js';
+import { Dropdown } from '../../../../../components/MenuList/Dropdown/Dropdown.js';
+import { DotsMenuDropdown } from '../../DotsMenuDropdown/DotsMenuDropdown.js';
+import { BaseButton } from '../../../../../components/BaseButton/BaseButton.js';
 import 'formik';
 import '../../../../../utils/hooks/useSubdomainCheck/useSubdomainCheck.js';
-import '../../../../../components/IconButton/IconButton.js';
 import '../../../../../store/state/sendBalances.js';
 import '../../../../../components/Input/Input.js';
 import '../../../../../components/OverlayCard/OverlayCard.js';
-import '../../../../../components/MenuList/Dropdown/Dropdown.js';
 import '../../../../../views/TransactionConfirmationView/TransactionConfirmationView.js';
 import { usePasskeyContext } from '../../../../../context/PasskeyContext/PasskeyContext.js';
 import '../../../views/ManagePasskeysWidgetView/PasskeyCard/PasskeyCard.js';
@@ -114,6 +115,16 @@ const ActiveWalletAddress = ({ wallet, nameServiceName, menuOption, fullWidth =
     const { showAlert } = usePasskeyContext();
     const header = nameServiceName || getNameIfNoIcon(wallet);
     const { network } = useWalletConnectorNetwork(wallet === null || wallet === void 0 ? void 0 : wallet.connector);
+    const [showMenu, setShowMenu] = useState(false);
+    const handleMenuClose = useCallback(() => {
+        setShowMenu(false);
+    }, [setShowMenu]);
+    const handleMenuOpen = useCallback(() => {
+        // Use setTimeout here to prevent React 17 from triggering a click event
+        // when the dropdown is rendered.
+        setTimeout(() => setShowMenu(true), 0);
+    }, [setShowMenu]);
+    const iconRef = useRef(null);
     const { data: address } = usePromise(() => {
         // COSMOS wallet address changes based on which network is selected
         if ((wallet === null || wallet === void 0 ? void 0 : wallet.connector.connectedChain) === 'COSMOS') {
@@ -124,9 +135,10 @@ const ActiveWalletAddress = ({ wallet, nameServiceName, menuOption, fullWidth =
         deps: [wallet, network],
         enabled: Boolean(wallet),
     });
-    return (jsxs("div", { className: 'active-wallet-information__address-container', children: [jsxs("div", { children: [jsx(Typography, { className: fullWidth
-                            ? 'active-wallet-information__handle--full-width'
-                            : 'active-wallet-information__handle', color: 'primary', variant: 'body_normal', "data-testid": 'header-text', children: header }), jsx(Typography, { className: 'active-wallet-information__address', weight: header ? 'regular' : 'medium', variant: header ? 'body_small' : 'body_normal', color: header ? 'secondary' : 'primary', children: isLoading ? (jsx(Skeleton, { className: 'active-wallet-information__address-skeleton' })) : (shortenWalletAddress(address, 4, 4)) })] }), jsx(DotsMenu, { "data-testid": 'dots-menu', options: menuOption, buttonClassName: 'active-wallet-information__dots-menu', buttonClassNameWithOpenMenu: 'active-wallet-information__dots-menu', iconOverride: showAlert() ? (jsx(IconWithStatus, { Icon: () => jsx(SvgGear, { width: 16, height: 16 }), variant: 'yellow' })) : (jsx(SvgGear, { width: 16, height: 16 })) })] }));
+    const menuIcon = useMemo(() => (jsx("div", { ref: iconRef, className: 'active-wallet-information__handle-icon', children: showAlert() ? (jsx(IconWithStatus, { Icon: () => jsx(SvgArrowDown, { width: 24, height: 24 }), variant: 'yellow' })) : (jsx(SvgArrowDown, { width: 24, height: 24 })) })), [showAlert]);
+    return (jsxs("div", { className: 'active-wallet-information__address-container', children: [jsxs(BaseButton, { onClick: handleMenuOpen, dataTestId: 'active-wallet-information-button', children: [jsxs("div", { className: 'active-wallet-information__handle-row', children: [jsx(Typography, { className: fullWidth
+                                    ? 'active-wallet-information__handle--full-width'
+                                    : 'active-wallet-information__handle', color: 'primary', variant: 'body_normal', "data-testid": 'header-text', children: header }), header && menuIcon] }), jsxs("div", { className: 'active-wallet-information__handle-row', children: [jsx(Typography, { className: 'active-wallet-information__address', weight: header ? 'regular' : 'medium', variant: header ? 'body_small' : 'body_normal', color: header ? 'secondary' : 'primary', children: isLoading ? (jsx(Skeleton, { className: 'active-wallet-information__address-skeleton' })) : (shortenWalletAddress(address, 4, 4)) }), !header && menuIcon] })] }), jsx(Dropdown, { isOpen: showMenu, onClickOutside: handleMenuClose, onScroll: handleMenuClose, anchorRef: iconRef, anchorOrigin: 'bottom-right', transformOrigin: 'top-left', children: jsx(DotsMenuDropdown, { options: menuOption, setShowMenu: setShowMenu }) })] }));
 };
 
 export { ActiveWalletAddress, getNameIfNoIcon };

package/src/lib/widgets/DynamicWidget/context/DynamicWidgetContext.types.d.ts

@@ -11,7 +11,7 @@ export type DynamicPasskeyWidgetViewsType = typeof DynamicPasskeyWidgetViews[num
 export type DynamicMfaWidgetViewsType = typeof DynamicMfaWidgetViews[number];
 export declare const DynamicTransactionsWidgetViews: readonly ["send-balance"];
 export type DynamicTransactionsWidgetViewsType = typeof DynamicTransactionsWidgetViews[number];
-export type DynamicWidgetViews = 'wallets' | 'profile' | 'edit-profile' | 'choose-wallet-funding-method' | 'receive-wallet-funds' | DynamicTransactionsWidgetViewsType | DynamicPasskeyWidgetViewsType | DynamicMfaWidgetViewsType | DynamicSettingsType | DynamicGlobalWalletType | 'connected-apps' | 'deposit-view' | 'choose-onramp-provider' | 'account-and-security-settings' | 'choose-linked-wallet';
+export type DynamicWidgetViews = 'wallets' | 'profile' | 'edit-profile' | 'choose-wallet-funding-method' | 'receive-wallet-funds' | DynamicTransactionsWidgetViewsType | DynamicPasskeyWidgetViewsType | DynamicMfaWidgetViewsType | DynamicSettingsType | DynamicGlobalWalletType | 'connected-apps' | 'deposit-view' | 'choose-onramp-provider' | 'choose-linked-wallet';
 export type DynamicWidgetViewMapConstraint = Record<DynamicWidgetViews, FC<any>>;
 export type DynamicWidgetViewMap = typeof mapViewToComponent;
 export type SetDynamicWidgetView = <T extends DynamicWidgetViews>(view: T, props?: ComponentProps<DynamicWidgetViewMap[T]>) => void;

package/src/lib/widgets/DynamicWidget/hooks/useFetchChain/useFetchChain.cjs

@@ -98,7 +98,7 @@ const useFetchChain = (connector) => {
         var _a, _b;
         if (!connector)
             return { chainId: undefined, name: '', symbol: undefined };
-        const chainId = yield connector.getNetwork();
+        const chainId = yield connector.getNetwork(true);
         const { connectedChain } = connector;
         const chainInfo = walletConnectorCore.getChainInfoWithOverrides(connectedChain || '');
         const chainWithIcon = {

package/src/lib/widgets/DynamicWidget/hooks/useFetchChain/useFetchChain.js

@@ -94,7 +94,7 @@ const useFetchChain = (connector) => {
         var _a, _b;
         if (!connector)
             return { chainId: undefined, name: '', symbol: undefined };
-        const chainId = yield connector.getNetwork();
+        const chainId = yield connector.getNetwork(true);
         const { connectedChain } = connector;
         const chainInfo = getChainInfoWithOverrides(connectedChain || '');
         const chainWithIcon = {

package/src/lib/widgets/DynamicWidget/hooks/useFetchCurrency/useFetchCurrency.cjs

@@ -95,10 +95,10 @@ require('../../../../shared/utils/functions/getInitialUrl/getInitialUrl.cjs');
 
 const useFetchCurrency = (connector, network) => {
     const fetchChainCurrency = () => _tslib.__awaiter(void 0, void 0, void 0, function* () {
-        var _a, _b, _c, _d, _e, _f;
+        var _a, _b, _c, _d, _e;
         if (!connector)
             return null;
-        const chainId = yield connector.getNetwork();
+        const chainId = yield connector.getNetwork(true);
         const chainInfo = walletConnectorCore.getChainInfoWithOverrides((_a = connector.connectedChain) !== null && _a !== void 0 ? _a : '');
         /* istanbul ignore else */
         if (!chainId) {
@@ -107,21 +107,11 @@ const useFetchCurrency = (connector, network) => {
                 symbol: chainInfo === null || chainInfo === void 0 ? void 0 : chainInfo.symbol,
             };
         }
-        const network = (() => {
-            if (connector.connectedChain === 'STARK') {
-                return 'starknetNetworks';
-            }
-            else if (connector.connectedChain === 'ECLIPSE') {
-                return 'eclipseNetworks';
-            }
-            else {
-                return 'evmNetworks';
-            }
-        })();
-        const result = (_b = connector[network]) === null || _b === void 0 ? void 0 : _b.find((element) => element.chainId === chainId);
+        const enabledNetworks = connector.getEnabledNetworks();
+        const result = enabledNetworks === null || enabledNetworks === void 0 ? void 0 : enabledNetworks.find((network) => network.chainId === chainId);
         return {
-            name: (_d = (_c = result === null || result === void 0 ? void 0 : result.nativeCurrency) === null || _c === void 0 ? void 0 : _c.name) !== null && _d !== void 0 ? _d : chainInfo === null || chainInfo === void 0 ? void 0 : chainInfo.displayName,
-            symbol: (_f = (_e = result === null || result === void 0 ? void 0 : result.nativeCurrency) === null || _e === void 0 ? void 0 : _e.symbol) !== null && _f !== void 0 ? _f : chainInfo === null || chainInfo === void 0 ? void 0 : chainInfo.symbol,
+            name: (_c = (_b = result === null || result === void 0 ? void 0 : result.nativeCurrency) === null || _b === void 0 ? void 0 : _b.name) !== null && _c !== void 0 ? _c : chainInfo === null || chainInfo === void 0 ? void 0 : chainInfo.displayName,
+            symbol: (_e = (_d = result === null || result === void 0 ? void 0 : result.nativeCurrency) === null || _d === void 0 ? void 0 : _d.symbol) !== null && _e !== void 0 ? _e : chainInfo === null || chainInfo === void 0 ? void 0 : chainInfo.symbol,
         };
     });
     const { data: currency, isLoading } = usePromise.usePromise(fetchChainCurrency, {

package/src/lib/widgets/DynamicWidget/hooks/useFetchCurrency/useFetchCurrency.js

@@ -91,10 +91,10 @@ import '../../../../shared/utils/functions/getInitialUrl/getInitialUrl.js';
 
 const useFetchCurrency = (connector, network) => {
     const fetchChainCurrency = () => __awaiter(void 0, void 0, void 0, function* () {
-        var _a, _b, _c, _d, _e, _f;
+        var _a, _b, _c, _d, _e;
         if (!connector)
             return null;
-        const chainId = yield connector.getNetwork();
+        const chainId = yield connector.getNetwork(true);
         const chainInfo = getChainInfoWithOverrides((_a = connector.connectedChain) !== null && _a !== void 0 ? _a : '');
         /* istanbul ignore else */
         if (!chainId) {
@@ -103,21 +103,11 @@ const useFetchCurrency = (connector, network) => {
                 symbol: chainInfo === null || chainInfo === void 0 ? void 0 : chainInfo.symbol,
             };
         }
-        const network = (() => {
-            if (connector.connectedChain === 'STARK') {
-                return 'starknetNetworks';
-            }
-            else if (connector.connectedChain === 'ECLIPSE') {
-                return 'eclipseNetworks';
-            }
-            else {
-                return 'evmNetworks';
-            }
-        })();
-        const result = (_b = connector[network]) === null || _b === void 0 ? void 0 : _b.find((element) => element.chainId === chainId);
+        const enabledNetworks = connector.getEnabledNetworks();
+        const result = enabledNetworks === null || enabledNetworks === void 0 ? void 0 : enabledNetworks.find((network) => network.chainId === chainId);
         return {
-            name: (_d = (_c = result === null || result === void 0 ? void 0 : result.nativeCurrency) === null || _c === void 0 ? void 0 : _c.name) !== null && _d !== void 0 ? _d : chainInfo === null || chainInfo === void 0 ? void 0 : chainInfo.displayName,
-            symbol: (_f = (_e = result === null || result === void 0 ? void 0 : result.nativeCurrency) === null || _e === void 0 ? void 0 : _e.symbol) !== null && _f !== void 0 ? _f : chainInfo === null || chainInfo === void 0 ? void 0 : chainInfo.symbol,
+            name: (_c = (_b = result === null || result === void 0 ? void 0 : result.nativeCurrency) === null || _b === void 0 ? void 0 : _b.name) !== null && _c !== void 0 ? _c : chainInfo === null || chainInfo === void 0 ? void 0 : chainInfo.displayName,
+            symbol: (_e = (_d = result === null || result === void 0 ? void 0 : result.nativeCurrency) === null || _d === void 0 ? void 0 : _d.symbol) !== null && _e !== void 0 ? _e : chainInfo === null || chainInfo === void 0 ? void 0 : chainInfo.symbol,
         };
     });
     const { data: currency, isLoading } = usePromise(fetchChainCurrency, {

package/src/lib/widgets/DynamicWidget/views/AccountAndSecuritySettingsView/AccountAndSecuritySettingsView.cjs

@@ -23,7 +23,7 @@ var exportRecoveryPhrase = require('../../../../shared/assets/export-recovery-ph
 var footerInfoIcon = require('../../../../shared/assets/footer-info-icon.cjs');
 var shield = require('../../../../shared/assets/shield.cjs');
 var signInWithEmail = require('../../../../shared/assets/sign-in-with-email.cjs');
-require('../../../../context/ViewContext/ViewContext.cjs');
+var ViewContext = require('../../../../context/ViewContext/ViewContext.cjs');
 require('@dynamic-labs/wallet-book');
 require('@dynamic-labs/utils');
 require('../../../../utils/constants/colors.cjs');
@@ -117,7 +117,8 @@ var useInternalDynamicContext = require('../../../../context/DynamicContext/useD
 
 const AccountAndSecuritySettingsView = () => {
     var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k;
-    const { primaryWallet, user } = useInternalDynamicContext.useInternalDynamicContext();
+    const { pushView } = ViewContext.useViewContext();
+    const { primaryWallet, user, setShowAuthFlow } = useInternalDynamicContext.useInternalDynamicContext();
     const projectSettings$1 = projectSettings.useProjectSettings();
     const { setDynamicWidgetView } = DynamicWidgetContext.useWidgetContext();
     const { addEmbeddedWalletRecoveryEmail } = useEmbeddedWalletAuthenticator.useEmbeddedWalletAuthenticator();
@@ -181,6 +182,14 @@ const AccountAndSecuritySettingsView = () => {
     const handlePasskeyButtonClick = React.useCallback(() => handlePasskeyClick(), [handlePasskeyClick]);
     const handleExportButtonClick = React.useCallback(() => handleExportClick(), [handleExportClick]);
     const handleExportWithPhraseClick = React.useCallback(() => handleExportClick(true), [handleExportClick]);
+    const handleDeleteAccountClick = React.useCallback(() => {
+        pushView('user-delete-account', {}, {
+            onBackClick: () => {
+                setShowAuthFlow(false);
+            },
+        });
+        setShowAuthFlow(true);
+    }, [pushView, setShowAuthFlow]);
     const renderPasskeysButtonEndSlot = () => {
         if (isTurnkeyWalletWithAuthenticator)
             return (jsxRuntime.jsx(checkCircle.ReactComponent, { className: 'settings-view__body__section__button__icon-secondary--success' }));
@@ -206,7 +215,7 @@ const AccountAndSecuritySettingsView = () => {
     const identitySectionTitleClasses = React.useMemo(() => classNames.classNames('settings-view__body__section__title', 'settings-view__body__section__title__info-icon'), []);
     const emailButtonClasses = React.useMemo(() => classNames.classNames('settings-view__body__section__button', 'settings-view__body__section__button__badge'), []);
     return (jsxRuntime.jsxs("div", { className: 'account-and-security-settings-view', children: [jsxRuntime.jsx(ModalHeader.ModalHeader, { leading: backButton, children: jsxRuntime.jsx("div", { className: 'send-balance-page-layout__header-content', children: jsxRuntime.jsx(Typography.Typography, { variant: 'title', color: 'primary', copykey: 'dyn_settings.account_security.title', children: t('dyn_settings.account_security.title') }) }) }), jsxRuntime.jsx("div", { className: 'account-wrap', children: jsxRuntime.jsxs("div", { className: 'settings-view__body', children: [jsxRuntime.jsxs("div", { className: 'settings-view__body__section', children: [shouldShowPasskeyMFA ||
-                                    (isMfaEnabled && (jsxRuntime.jsx("div", { className: securitySectionTitleClasses, children: t('dyn_settings.security_section.title') }))), ' ', shouldShowPasskeyMFA && (jsxRuntime.jsx(TypographyButton.TypographyButton, { dataTestId: 'manage-passkeys-button', onClick: handlePasskeyButtonClick, buttonClassName: passkeyButtonClasses, startSlot: 
+                                    (isMfaEnabled && (jsxRuntime.jsx("div", { className: securitySectionTitleClasses, children: t('dyn_settings.security_section.title') }))), shouldShowPasskeyMFA && (jsxRuntime.jsx(TypographyButton.TypographyButton, { dataTestId: 'manage-passkeys-button', onClick: handlePasskeyButtonClick, buttonClassName: passkeyButtonClasses, startSlot: 
                                     // eslint-disable-next-line react/jsx-wrap-multilines
                                     jsxRuntime.jsxs("div", { className: 'settings-view__body__section__button__start-slot', children: [jsxRuntime.jsx(PasskeyDeviceIcon.PasskeyDeviceIcon, { className: 'settings-view__body__section__button__icon', defaultIcon: jsxRuntime.jsx(androidTouchId.ReactComponent, { "data-testid": 'default-icon' }) }), jsxRuntime.jsx(Typography.Typography, { color: 'primary', weight: 'medium', copykey: 'dyn_settings.security_section.passkey_button', children: t('dyn_settings.security_section.passkey_button') }), !isTurnkeyWalletWithAuthenticator && (jsxRuntime.jsx(Badge.Badge, { text: t('dyn_settings.tags.recommended'), copykey: 'dyn_settings.tags.recommended', variant: 'secondary' }))] }), endSlot: renderPasskeysButtonEndSlot(), disabled: isLoading, showInternalLoading: false })), isMfaEnabled && (jsxRuntime.jsx(TypographyButton.TypographyButton, { dataTestId: 'manage-mfa-button', onClick: handleMfaClick, buttonClassName: 'settings-view__body__section__button', startSlot: 
                                     // eslint-disable-next-line react/jsx-wrap-multilines
@@ -218,7 +227,7 @@ const AccountAndSecuritySettingsView = () => {
                                             // eslint-disable-next-line react/jsx-wrap-multilines
                                             jsxRuntime.jsxs("div", { className: 'settings-view__body__section__button__start-slot', children: [jsxRuntime.jsx(exportPrivateKey.ReactComponent, { className: exportIconClasses }), jsxRuntime.jsx(Typography.Typography, { color: 'primary', weight: 'medium', copykey: 'dyn_settings.export_section.private_key_button', children: t('dyn_settings.export_section.private_key_button') })] }), endSlot: jsxRuntime.jsx(chevronLeft.ReactComponent, { className: 'settings-view__body__section__button__icon-secondary--rotate' }), showInternalLoading: false }), isTurnkeyHDWallet && (jsxRuntime.jsx(TypographyButton.TypographyButton, { dataTestId: 'embedded-reveal-button', onClick: handleExportWithPhraseClick, buttonClassName: 'settings-view__body__section__button', startSlot: 
                                             // eslint-disable-next-line react/jsx-wrap-multilines
-                                            jsxRuntime.jsxs("div", { className: 'settings-view__body__section__button__start-slot', children: [jsxRuntime.jsx(exportRecoveryPhrase.ReactComponent, { className: exportIconClasses }), jsxRuntime.jsx(Typography.Typography, { color: 'primary', weight: 'medium', copykey: 'dyn_settings.export_section.srp_button', children: t('dyn_settings.export_section.srp_button') })] }), endSlot: jsxRuntime.jsx(chevronLeft.ReactComponent, { className: 'settings-view__body__section__button__icon-secondary--rotate' }), showInternalLoading: false }))] })] }))] }) })] }));
+                                            jsxRuntime.jsxs("div", { className: 'settings-view__body__section__button__start-slot', children: [jsxRuntime.jsx(exportRecoveryPhrase.ReactComponent, { className: exportIconClasses }), jsxRuntime.jsx(Typography.Typography, { color: 'primary', weight: 'medium', copykey: 'dyn_settings.export_section.srp_button', children: t('dyn_settings.export_section.srp_button') })] }), endSlot: jsxRuntime.jsx(chevronLeft.ReactComponent, { className: 'settings-view__body__section__button__icon-secondary--rotate' }), showInternalLoading: false }))] })] }))] }) }), jsxRuntime.jsx("div", { className: 'account-and-security-settings-view__delete-account-container', children: jsxRuntime.jsx(Typography.Typography, { onClick: handleDeleteAccountClick, dataTestId: 'delete-account-button', color: 'error-1', variant: 'body_small', className: 'account-and-security-settings-view__delete-account-container__delete-button', children: t('dyn_settings.delete_account.title') }) })] }));
 };
 
 exports.AccountAndSecuritySettingsView = AccountAndSecuritySettingsView;

package/src/lib/widgets/DynamicWidget/views/AccountAndSecuritySettingsView/AccountAndSecuritySettingsView.js

@@ -19,7 +19,7 @@ import { ReactComponent as SvgExportRecoveryPhrase } from '../../../../shared/as
 import { ReactComponent as SvgFooterInfoIcon } from '../../../../shared/assets/footer-info-icon.js';
 import { ReactComponent as SvgShield } from '../../../../shared/assets/shield.js';
 import { ReactComponent as SvgSignInWithEmail } from '../../../../shared/assets/sign-in-with-email.js';
-import '../../../../context/ViewContext/ViewContext.js';
+import { useViewContext } from '../../../../context/ViewContext/ViewContext.js';
 import '@dynamic-labs/wallet-book';
 import '@dynamic-labs/utils';
 import '../../../../utils/constants/colors.js';
@@ -113,7 +113,8 @@ import { useInternalDynamicContext } from '../../../../context/DynamicContext/us
 
 const AccountAndSecuritySettingsView = () => {
     var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k;
-    const { primaryWallet, user } = useInternalDynamicContext();
+    const { pushView } = useViewContext();
+    const { primaryWallet, user, setShowAuthFlow } = useInternalDynamicContext();
     const projectSettings = useProjectSettings();
     const { setDynamicWidgetView } = useWidgetContext();
     const { addEmbeddedWalletRecoveryEmail } = useEmbeddedWalletAuthenticator();
@@ -177,6 +178,14 @@ const AccountAndSecuritySettingsView = () => {
     const handlePasskeyButtonClick = useCallback(() => handlePasskeyClick(), [handlePasskeyClick]);
     const handleExportButtonClick = useCallback(() => handleExportClick(), [handleExportClick]);
     const handleExportWithPhraseClick = useCallback(() => handleExportClick(true), [handleExportClick]);
+    const handleDeleteAccountClick = useCallback(() => {
+        pushView('user-delete-account', {}, {
+            onBackClick: () => {
+                setShowAuthFlow(false);
+            },
+        });
+        setShowAuthFlow(true);
+    }, [pushView, setShowAuthFlow]);
     const renderPasskeysButtonEndSlot = () => {
         if (isTurnkeyWalletWithAuthenticator)
             return (jsx(SvgCheckCircle, { className: 'settings-view__body__section__button__icon-secondary--success' }));
@@ -202,7 +211,7 @@ const AccountAndSecuritySettingsView = () => {
     const identitySectionTitleClasses = useMemo(() => classNames('settings-view__body__section__title', 'settings-view__body__section__title__info-icon'), []);
     const emailButtonClasses = useMemo(() => classNames('settings-view__body__section__button', 'settings-view__body__section__button__badge'), []);
     return (jsxs("div", { className: 'account-and-security-settings-view', children: [jsx(ModalHeader, { leading: backButton, children: jsx("div", { className: 'send-balance-page-layout__header-content', children: jsx(Typography, { variant: 'title', color: 'primary', copykey: 'dyn_settings.account_security.title', children: t('dyn_settings.account_security.title') }) }) }), jsx("div", { className: 'account-wrap', children: jsxs("div", { className: 'settings-view__body', children: [jsxs("div", { className: 'settings-view__body__section', children: [shouldShowPasskeyMFA ||
-                                    (isMfaEnabled && (jsx("div", { className: securitySectionTitleClasses, children: t('dyn_settings.security_section.title') }))), ' ', shouldShowPasskeyMFA && (jsx(TypographyButton, { dataTestId: 'manage-passkeys-button', onClick: handlePasskeyButtonClick, buttonClassName: passkeyButtonClasses, startSlot: 
+                                    (isMfaEnabled && (jsx("div", { className: securitySectionTitleClasses, children: t('dyn_settings.security_section.title') }))), shouldShowPasskeyMFA && (jsx(TypographyButton, { dataTestId: 'manage-passkeys-button', onClick: handlePasskeyButtonClick, buttonClassName: passkeyButtonClasses, startSlot: 
                                     // eslint-disable-next-line react/jsx-wrap-multilines
                                     jsxs("div", { className: 'settings-view__body__section__button__start-slot', children: [jsx(PasskeyDeviceIcon, { className: 'settings-view__body__section__button__icon', defaultIcon: jsx(SvgAndroidTouchId, { "data-testid": 'default-icon' }) }), jsx(Typography, { color: 'primary', weight: 'medium', copykey: 'dyn_settings.security_section.passkey_button', children: t('dyn_settings.security_section.passkey_button') }), !isTurnkeyWalletWithAuthenticator && (jsx(Badge, { text: t('dyn_settings.tags.recommended'), copykey: 'dyn_settings.tags.recommended', variant: 'secondary' }))] }), endSlot: renderPasskeysButtonEndSlot(), disabled: isLoading, showInternalLoading: false })), isMfaEnabled && (jsx(TypographyButton, { dataTestId: 'manage-mfa-button', onClick: handleMfaClick, buttonClassName: 'settings-view__body__section__button', startSlot: 
                                     // eslint-disable-next-line react/jsx-wrap-multilines
@@ -214,7 +223,7 @@ const AccountAndSecuritySettingsView = () => {
                                             // eslint-disable-next-line react/jsx-wrap-multilines
                                             jsxs("div", { className: 'settings-view__body__section__button__start-slot', children: [jsx(SvgExportPrivateKey, { className: exportIconClasses }), jsx(Typography, { color: 'primary', weight: 'medium', copykey: 'dyn_settings.export_section.private_key_button', children: t('dyn_settings.export_section.private_key_button') })] }), endSlot: jsx(SvgChevronLeft, { className: 'settings-view__body__section__button__icon-secondary--rotate' }), showInternalLoading: false }), isTurnkeyHDWallet && (jsx(TypographyButton, { dataTestId: 'embedded-reveal-button', onClick: handleExportWithPhraseClick, buttonClassName: 'settings-view__body__section__button', startSlot: 
                                             // eslint-disable-next-line react/jsx-wrap-multilines
-                                            jsxs("div", { className: 'settings-view__body__section__button__start-slot', children: [jsx(SvgExportRecoveryPhrase, { className: exportIconClasses }), jsx(Typography, { color: 'primary', weight: 'medium', copykey: 'dyn_settings.export_section.srp_button', children: t('dyn_settings.export_section.srp_button') })] }), endSlot: jsx(SvgChevronLeft, { className: 'settings-view__body__section__button__icon-secondary--rotate' }), showInternalLoading: false }))] })] }))] }) })] }));
+                                            jsxs("div", { className: 'settings-view__body__section__button__start-slot', children: [jsx(SvgExportRecoveryPhrase, { className: exportIconClasses }), jsx(Typography, { color: 'primary', weight: 'medium', copykey: 'dyn_settings.export_section.srp_button', children: t('dyn_settings.export_section.srp_button') })] }), endSlot: jsx(SvgChevronLeft, { className: 'settings-view__body__section__button__icon-secondary--rotate' }), showInternalLoading: false }))] })] }))] }) }), jsx("div", { className: 'account-and-security-settings-view__delete-account-container', children: jsx(Typography, { onClick: handleDeleteAccountClick, dataTestId: 'delete-account-button', color: 'error-1', variant: 'body_small', className: 'account-and-security-settings-view__delete-account-container__delete-button', children: t('dyn_settings.delete_account.title') }) })] }));
 };
 
 export { AccountAndSecuritySettingsView };