@dynamic-labs/sdk-react-core 3.0.0-alpha.37 → 3.0.0-alpha.38

package/src/lib/widgets/DynamicWidget/components/DynamicWidgetHeader/DynamicWidgetHeader.cjs

@@ -5,6 +5,9 @@ Object.defineProperty(exports, '__esModule', { value: true });
 
 var jsxRuntime = require('react/jsx-runtime');
 var React = require('react');
+var DynamicWidgetContext = require('../../context/DynamicWidgetContext.cjs');
+require('../../../../components/Accordion/components/AccordionItem/AccordionItem.cjs');
+require('../../../../components/Alert/Alert.cjs');
 require('../../../../events/dynamicEvents.cjs');
 require('../../../../../../_virtual/_tslib.cjs');
 require('@dynamic-labs/utils');
@@ -37,7 +40,6 @@ require('../../../../context/WalletContext/WalletContext.cjs');
 require('../../../../utils/hooks/useEmbeddedWallet/useSecureEnclaveEmbeddedWallet/constants.cjs');
 require('../../../../context/ThemeContext/ThemeContext.cjs');
 require('../../../../utils/hooks/useUserUpdateRequest/useUpdateUser/userFieldsSchema.cjs');
-var useKYCFlag = require('../../../../utils/hooks/useKYCFlag/useKYCFlag.cjs');
 require('@dynamic-labs/types');
 require('../../../../context/LoadingContext/LoadingContext.cjs');
 require('yup');
@@ -47,78 +49,54 @@ require('../../../../context/FieldsStateContext/FieldsStateContext.cjs');
 require('../../../../context/UserFieldEditorContext/UserFieldEditorContext.cjs');
 require('@dynamic-labs/rpc-providers');
 require('react-i18next');
-require('../../../../components/Accordion/components/AccordionItem/AccordionItem.cjs');
-require('../../../../components/Alert/Alert.cjs');
+require('../../../../context/FooterAnimationContext/index.cjs');
 require('../../../../components/ShadowDOM/ShadowDOM.cjs');
-require('../../../../components/IconButton/IconButton.cjs');
-require('../../../../components/InlineWidget/InlineWidget.cjs');
-require('../../../../components/Input/Input.cjs');
-require('../../../../components/IsBrowser/IsBrowser.cjs');
-require('../../../../components/MenuList/Dropdown/Dropdown.cjs');
 require('../../../../components/Transition/ZoomTransition/ZoomTransition.cjs');
 require('../../../../components/Transition/SlideInUpTransition/SlideInUpTransition.cjs');
 require('../../../../components/Transition/OpacityTransition/OpacityTransition.cjs');
 require('../../../../components/OverlayCard/OverlayCardTarget/OverlayCardTarget.cjs');
-var OptionsSwitcher = require('../../../../components/OptionsSwitcher/OptionsSwitcher.cjs');
-var PasskeyCreatedSuccessBanner = require('../../../../components/PasskeyCreatedSuccessBanner/PasskeyCreatedSuccessBanner.cjs');
-require('../../../../components/Popper/Popper/Popper.cjs');
-require('../../../../components/Popper/PopperContext/PopperContext.cjs');
-require('react-focus-lock');
-require('qrcode');
-require('formik');
-require('../../../../views/WalletList/WalletList.cjs');
 require('../../../../context/SocialRedirectContext/SocialRedirectContext.cjs');
-require('../../../DynamicBridgeWidget/views/WalletsView/components/SecondaryWallets/SecondaryWallets.cjs');
-require('@hcaptcha/react-hcaptcha');
-require('../../../../context/FooterAnimationContext/index.cjs');
 require('../../../../context/WalletGroupContext/WalletGroupContext.cjs');
-require('../../../../context/IpConfigurationContext/IpConfigurationContext.cjs');
-require('../../../../context/PasskeyContext/PasskeyContext.cjs');
-var DynamicWidgetContext = require('../../context/DynamicWidgetContext.cjs');
+require('react-focus-lock');
+require('../../../../components/IconButton/IconButton.cjs');
+require('../../../../components/MenuList/Dropdown/Dropdown.cjs');
+require('formik');
 require('../../../../views/TransactionConfirmationView/helpers/transactionErrorMessage.cjs');
+require('../../../../components/Input/Input.cjs');
+var PasskeyCreatedSuccessBanner = require('../../../../components/PasskeyCreatedSuccessBanner/PasskeyCreatedSuccessBanner.cjs');
+require('../../../../context/PasskeyContext/PasskeyContext.cjs');
 require('../../views/ManagePasskeysWidgetView/PasskeyCard/PasskeyCard.cjs');
 require('../../../../../polyfills.cjs');
 require('../../../../context/ErrorBoundary/ErrorBoundaryBase.cjs');
 require('../../../../context/ErrorBoundary/ErrorBoundaryContext.cjs');
 require('../../../DynamicBridgeWidget/context/DynamicBridgeWidgetContext/DynamicBridgeWidgetContext.cjs');
 require('../DynamicWidgetCard/DynamicWidgetCard.cjs');
+require('../../../../components/IsBrowser/IsBrowser.cjs');
 require('../../../../context/WidgetRegistry/WidgetRegistryContextProvider.cjs');
 require('../../../../context/FundingContext/FundingContext.cjs');
+require('../../../../components/Popper/Popper/Popper.cjs');
+require('../../../../components/Popper/PopperContext/PopperContext.cjs');
+require('../../../../views/WalletList/WalletList.cjs');
+require('../../../DynamicBridgeWidget/views/WalletsView/components/SecondaryWallets/SecondaryWallets.cjs');
+require('@hcaptcha/react-hcaptcha');
+require('../../../../context/IpConfigurationContext/IpConfigurationContext.cjs');
 require('../../../../context/SendBalanceContext/SendBalanceContext.cjs');
 require('../../../../context/ConnectWithOtpContext/ConnectWithOtpContext.cjs');
 require('../../../../context/ConnectWithOtpContext/constants.cjs');
 require('../../../../context/ReinitializeContext/ReinitializeContextProvider.cjs');
+require('../../../../components/InlineWidget/InlineWidget.cjs');
+require('qrcode');
 var DynamicWidgetWalletHeader = require('./DynamicWidgetWalletHeader/DynamicWidgetWalletHeader.cjs');
 
 function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
 
 var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
 
-const options = [
-    {
-        key: 'wallets',
-        label: 'Wallets',
-    },
-    {
-        key: 'profile',
-        label: 'Profile',
-    },
-];
 const DynamicWidgetHeader = ({ variant, }) => {
-    const { dynamicWidgetView, setDynamicWidgetView } = DynamicWidgetContext.useWidgetContext();
+    const { overridenWidgetView } = DynamicWidgetContext.useWidgetContext();
     const { multiWallet } = useInternalDynamicContext.useInternalDynamicContext();
-    const isKYCEnabled = useKYCFlag.useKYCFlag();
-    // Marks 'Profile' view as active when client goes to 'Edit Profile' view
-    const dynamicWidgetSwitcherOverwriteValue = React.useMemo(() => {
-        if (!isKYCEnabled && !multiWallet)
-            return 'wallets';
-        if (dynamicWidgetView === 'edit-profile')
-            return 'profile';
-        return dynamicWidgetView;
-    }, [dynamicWidgetView, isKYCEnabled, multiWallet]);
-    return (jsxRuntime.jsxs("div", { className: 'dynamic-widget-header', children: [isKYCEnabled && multiWallet && (jsxRuntime.jsx(OptionsSwitcher.OptionsSwitcher, { rootClassName: 'dynamic-widget-header__switcher', value: dynamicWidgetSwitcherOverwriteValue, options: options, onChange: (view) => setDynamicWidgetView(view) })), jsxRuntime.jsx(PasskeyCreatedSuccessBanner.PasskeyCreatedSuccessBanner, { className: 'dynamic-widget-header__passkey-success' }), (dynamicWidgetSwitcherOverwriteValue === 'wallets' ||
-                (dynamicWidgetSwitcherOverwriteValue === 'profile' &&
-                    !multiWallet)) && jsxRuntime.jsx(DynamicWidgetWalletHeader.DynamicWidgetWalletHeader, { variant: variant })] }));
+    return (jsxRuntime.jsxs("div", { className: 'dynamic-widget-header', children: [jsxRuntime.jsx(PasskeyCreatedSuccessBanner.PasskeyCreatedSuccessBanner, { className: 'dynamic-widget-header__passkey-success' }), (overridenWidgetView === 'wallets' ||
+                (overridenWidgetView === 'profile' && !multiWallet)) && (jsxRuntime.jsx(DynamicWidgetWalletHeader.DynamicWidgetWalletHeader, { variant: variant }))] }));
 };
 const MemoizedDynamicWidgetHeader = React__default["default"].memo(DynamicWidgetHeader);
 

package/src/lib/widgets/DynamicWidget/components/DynamicWidgetHeader/DynamicWidgetHeader.js

@@ -1,6 +1,9 @@
 'use client'
 import { jsxs, jsx } from 'react/jsx-runtime';
-import React__default, { useMemo } from 'react';
+import React__default from 'react';
+import { useWidgetContext } from '../../context/DynamicWidgetContext.js';
+import '../../../../components/Accordion/components/AccordionItem/AccordionItem.js';
+import '../../../../components/Alert/Alert.js';
 import '../../../../events/dynamicEvents.js';
 import '../../../../../../_virtual/_tslib.js';
 import '@dynamic-labs/utils';
@@ -33,7 +36,6 @@ import '../../../../context/WalletContext/WalletContext.js';
 import '../../../../utils/hooks/useEmbeddedWallet/useSecureEnclaveEmbeddedWallet/constants.js';
 import '../../../../context/ThemeContext/ThemeContext.js';
 import '../../../../utils/hooks/useUserUpdateRequest/useUpdateUser/userFieldsSchema.js';
-import { useKYCFlag } from '../../../../utils/hooks/useKYCFlag/useKYCFlag.js';
 import '@dynamic-labs/types';
 import '../../../../context/LoadingContext/LoadingContext.js';
 import 'yup';
@@ -43,74 +45,50 @@ import '../../../../context/FieldsStateContext/FieldsStateContext.js';
 import '../../../../context/UserFieldEditorContext/UserFieldEditorContext.js';
 import '@dynamic-labs/rpc-providers';
 import 'react-i18next';
-import '../../../../components/Accordion/components/AccordionItem/AccordionItem.js';
-import '../../../../components/Alert/Alert.js';
+import '../../../../context/FooterAnimationContext/index.js';
 import '../../../../components/ShadowDOM/ShadowDOM.js';
-import '../../../../components/IconButton/IconButton.js';
-import '../../../../components/InlineWidget/InlineWidget.js';
-import '../../../../components/Input/Input.js';
-import '../../../../components/IsBrowser/IsBrowser.js';
-import '../../../../components/MenuList/Dropdown/Dropdown.js';
 import '../../../../components/Transition/ZoomTransition/ZoomTransition.js';
 import '../../../../components/Transition/SlideInUpTransition/SlideInUpTransition.js';
 import '../../../../components/Transition/OpacityTransition/OpacityTransition.js';
 import '../../../../components/OverlayCard/OverlayCardTarget/OverlayCardTarget.js';
-import { OptionsSwitcher } from '../../../../components/OptionsSwitcher/OptionsSwitcher.js';
-import { PasskeyCreatedSuccessBanner } from '../../../../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 '../../../../views/WalletList/WalletList.js';
 import '../../../../context/SocialRedirectContext/SocialRedirectContext.js';
-import '../../../DynamicBridgeWidget/views/WalletsView/components/SecondaryWallets/SecondaryWallets.js';
-import '@hcaptcha/react-hcaptcha';
-import '../../../../context/FooterAnimationContext/index.js';
 import '../../../../context/WalletGroupContext/WalletGroupContext.js';
-import '../../../../context/IpConfigurationContext/IpConfigurationContext.js';
-import '../../../../context/PasskeyContext/PasskeyContext.js';
-import { useWidgetContext } from '../../context/DynamicWidgetContext.js';
+import 'react-focus-lock';
+import '../../../../components/IconButton/IconButton.js';
+import '../../../../components/MenuList/Dropdown/Dropdown.js';
+import 'formik';
 import '../../../../views/TransactionConfirmationView/helpers/transactionErrorMessage.js';
+import '../../../../components/Input/Input.js';
+import { PasskeyCreatedSuccessBanner } from '../../../../components/PasskeyCreatedSuccessBanner/PasskeyCreatedSuccessBanner.js';
+import '../../../../context/PasskeyContext/PasskeyContext.js';
 import '../../views/ManagePasskeysWidgetView/PasskeyCard/PasskeyCard.js';
 import '../../../../../polyfills.js';
 import '../../../../context/ErrorBoundary/ErrorBoundaryBase.js';
 import '../../../../context/ErrorBoundary/ErrorBoundaryContext.js';
 import '../../../DynamicBridgeWidget/context/DynamicBridgeWidgetContext/DynamicBridgeWidgetContext.js';
 import '../DynamicWidgetCard/DynamicWidgetCard.js';
+import '../../../../components/IsBrowser/IsBrowser.js';
 import '../../../../context/WidgetRegistry/WidgetRegistryContextProvider.js';
 import '../../../../context/FundingContext/FundingContext.js';
+import '../../../../components/Popper/Popper/Popper.js';
+import '../../../../components/Popper/PopperContext/PopperContext.js';
+import '../../../../views/WalletList/WalletList.js';
+import '../../../DynamicBridgeWidget/views/WalletsView/components/SecondaryWallets/SecondaryWallets.js';
+import '@hcaptcha/react-hcaptcha';
+import '../../../../context/IpConfigurationContext/IpConfigurationContext.js';
 import '../../../../context/SendBalanceContext/SendBalanceContext.js';
 import '../../../../context/ConnectWithOtpContext/ConnectWithOtpContext.js';
 import '../../../../context/ConnectWithOtpContext/constants.js';
 import '../../../../context/ReinitializeContext/ReinitializeContextProvider.js';
+import '../../../../components/InlineWidget/InlineWidget.js';
+import 'qrcode';
 import { DynamicWidgetWalletHeader } from './DynamicWidgetWalletHeader/DynamicWidgetWalletHeader.js';
 
-const options = [
-    {
-        key: 'wallets',
-        label: 'Wallets',
-    },
-    {
-        key: 'profile',
-        label: 'Profile',
-    },
-];
 const DynamicWidgetHeader = ({ variant, }) => {
-    const { dynamicWidgetView, setDynamicWidgetView } = useWidgetContext();
+    const { overridenWidgetView } = useWidgetContext();
     const { multiWallet } = useInternalDynamicContext();
-    const isKYCEnabled = useKYCFlag();
-    // Marks 'Profile' view as active when client goes to 'Edit Profile' view
-    const dynamicWidgetSwitcherOverwriteValue = useMemo(() => {
-        if (!isKYCEnabled && !multiWallet)
-            return 'wallets';
-        if (dynamicWidgetView === 'edit-profile')
-            return 'profile';
-        return dynamicWidgetView;
-    }, [dynamicWidgetView, isKYCEnabled, multiWallet]);
-    return (jsxs("div", { className: 'dynamic-widget-header', children: [isKYCEnabled && multiWallet && (jsx(OptionsSwitcher, { rootClassName: 'dynamic-widget-header__switcher', value: dynamicWidgetSwitcherOverwriteValue, options: options, onChange: (view) => setDynamicWidgetView(view) })), jsx(PasskeyCreatedSuccessBanner, { className: 'dynamic-widget-header__passkey-success' }), (dynamicWidgetSwitcherOverwriteValue === 'wallets' ||
-                (dynamicWidgetSwitcherOverwriteValue === 'profile' &&
-                    !multiWallet)) && jsx(DynamicWidgetWalletHeader, { variant: variant })] }));
+    return (jsxs("div", { className: 'dynamic-widget-header', children: [jsx(PasskeyCreatedSuccessBanner, { className: 'dynamic-widget-header__passkey-success' }), (overridenWidgetView === 'wallets' ||
+                (overridenWidgetView === 'profile' && !multiWallet)) && (jsx(DynamicWidgetWalletHeader, { variant: variant }))] }));
 };
 const MemoizedDynamicWidgetHeader = React__default.memo(DynamicWidgetHeader);
 

package/src/lib/widgets/DynamicWidget/components/DynamicWidgetHeader/DynamicWidgetWalletHeader/DynamicWidgetWalletHeader.cjs

@@ -66,8 +66,8 @@ var Icon = require('../../../../../components/Icon/Icon.cjs');
 var DynamicWidgetContext = require('../../../context/DynamicWidgetContext.cjs');
 require('../../../../../components/IconButton/IconButton.cjs');
 require('../../../../../components/MenuList/Dropdown/Dropdown.cjs');
-require('formik');
 var TypographyButton = require('../../../../../components/TypographyButton/TypographyButton.cjs');
+require('formik');
 require('../../../../../views/TransactionConfirmationView/helpers/transactionErrorMessage.cjs');
 var spinner = require('../../../../../components/Spinner/spinner.cjs');
 require('../../../../../components/Input/Input.cjs');

package/src/lib/widgets/DynamicWidget/components/DynamicWidgetHeader/DynamicWidgetWalletHeader/DynamicWidgetWalletHeader.js

@@ -62,8 +62,8 @@ import { Icon } from '../../../../../components/Icon/Icon.js';
 import { useWidgetContext } from '../../../context/DynamicWidgetContext.js';
 import '../../../../../components/IconButton/IconButton.js';
 import '../../../../../components/MenuList/Dropdown/Dropdown.js';
-import 'formik';
 import { TypographyButton } from '../../../../../components/TypographyButton/TypographyButton.js';
+import 'formik';
 import '../../../../../views/TransactionConfirmationView/helpers/transactionErrorMessage.js';
 import { Spinner } from '../../../../../components/Spinner/spinner.js';
 import '../../../../../components/Input/Input.js';

package/src/lib/widgets/DynamicWidget/components/DynamicWidgetViews/DynamicWidgetViews.cjs

@@ -10,14 +10,14 @@ var ProfileView = require('../../views/ProfileView/ProfileView.cjs');
 var EditProfileView = require('../../views/EditProfileView/EditProfileView.cjs');
 var SendBalanceWidgetView = require('../../views/SendBalanceWidgetView/SendBalanceWidgetView.cjs');
 var ManagePasskeysWidgetView = require('../../views/ManagePasskeysWidgetView/ManagePasskeysWidgetView.cjs');
-var WalletSettingsView = require('../../views/WalletSettingsView/WalletSettingsView.cjs');
+var SettingsView = require('../../views/SettingsView/SettingsView.cjs');
 
 const mapViewToComponent = {
     'edit-profile': EditProfileView.EditProfileView,
     'manage-passkeys': ManagePasskeysWidgetView.ManagePasskeysWidgetView,
     profile: ProfileView.ProfileView,
     'send-balance': SendBalanceWidgetView.SendBalanceWidgetView,
-    'wallet-settings': WalletSettingsView.WalletSettingsView,
+    settings: SettingsView.SettingsView,
     wallets: WalletsView.WalletsView,
 };
 const DynamicWidgetViews = () => {

package/src/lib/widgets/DynamicWidget/components/DynamicWidgetViews/DynamicWidgetViews.js

@@ -6,14 +6,14 @@ import { ProfileView } from '../../views/ProfileView/ProfileView.js';
 import { EditProfileView } from '../../views/EditProfileView/EditProfileView.js';
 import { SendBalanceWidgetView } from '../../views/SendBalanceWidgetView/SendBalanceWidgetView.js';
 import { ManagePasskeysWidgetView } from '../../views/ManagePasskeysWidgetView/ManagePasskeysWidgetView.js';
-import { WalletSettingsView } from '../../views/WalletSettingsView/WalletSettingsView.js';
+import { SettingsView } from '../../views/SettingsView/SettingsView.js';
 
 const mapViewToComponent = {
     'edit-profile': EditProfileView,
     'manage-passkeys': ManagePasskeysWidgetView,
     profile: ProfileView,
     'send-balance': SendBalanceWidgetView,
-    'wallet-settings': WalletSettingsView,
+    settings: SettingsView,
     wallets: WalletsView,
 };
 const DynamicWidgetViews = () => {

package/src/lib/widgets/DynamicWidget/components/DynamicWidgetWallets/DynamicWidgetWallets.cjs

@@ -18,6 +18,7 @@ require('../../../../shared/logger.cjs');
 require('@dynamic-labs/iconic');
 require('@dynamic-labs/wallet-connector-core');
 require('../../../../context/ViewContext/ViewContext.cjs');
+var add = require('../../../../shared/assets/add.cjs');
 require('@dynamic-labs/wallet-book');
 require('../../../../utils/constants/colors.cjs');
 require('../../../../utils/constants/values.cjs');
@@ -64,6 +65,7 @@ var DynamicWidgetContext = require('../../context/DynamicWidgetContext.cjs');
 var getWalletVerifiedCredential = require('../../../../utils/functions/getWalletVerifiedCredential/getWalletVerifiedCredential.cjs');
 var EmptyWallets = require('../EmptyWallets/EmptyWallets.cjs');
 var Wallet = require('../Wallet/Wallet.cjs');
+var TypographyButton = require('../../../../components/TypographyButton/TypographyButton.cjs');
 require('formik');
 require('../../../../views/TransactionConfirmationView/helpers/transactionErrorMessage.cjs');
 require('../../../../components/IconButton/IconButton.cjs');
@@ -90,15 +92,24 @@ require('../../../../context/SendBalanceContext/SendBalanceContext.cjs');
 require('../../../../context/ConnectWithOtpContext/ConnectWithOtpContext.cjs');
 require('../../../../context/ConnectWithOtpContext/constants.cjs');
 require('../../../../context/ReinitializeContext/ReinitializeContextProvider.cjs');
+var useDynamicModals = require('../../../../utils/hooks/useDynamicModals/useDynamicModals.cjs');
 require('../../../../components/InlineWidget/InlineWidget.cjs');
 require('qrcode');
 
 const DynamicWidgetWallets = () => {
     const { t } = reactI18next.useTranslation();
-    const { secondaryWallets, user, authMode } = useInternalDynamicContext.useInternalDynamicContext();
+    const { secondaryWallets, user, authMode, setSelectedWalletConnectorKey } = useInternalDynamicContext.useInternalDynamicContext();
+    const { setShowLinkNewWalletModal } = useDynamicModals.useDynamicModals();
     const { availableWalletsContainerRef } = DynamicWidgetContext.useWidgetContext();
     const isEmpty = secondaryWallets.length === 0;
-    return (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx("div", { className: 'dynamic-widget-wallets-header', children: jsxRuntime.jsx(Typography.Typography, { weight: 'medium', variant: 'body_small', color: 'secondary', className: 'dynamic-widget-wallets-header__title', copykey: 'dyn_widget.other_wallets', children: t('dyn_widget.other_wallets') }) }), jsxRuntime.jsx("div", { ref: availableWalletsContainerRef, className: 'dynamic-widget-wallets', "data-testid": 'dynamicWidgetWallets', children: jsxRuntime.jsx("div", { className: classNames.classNames('dynamic-widget-wallets__body', {
+    const addNewWallet = () => {
+        setShowLinkNewWalletModal(true);
+        setSelectedWalletConnectorKey(null);
+    };
+    return (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsxs("div", { className: 'dynamic-widget-wallets-header', children: [jsxRuntime.jsx(Typography.Typography, { weight: 'medium', variant: 'body_small', color: 'secondary', className: 'dynamic-widget-wallets-header__title', copykey: 'dyn_widget.other_wallets', children: t('dyn_widget.other_wallets') }), jsxRuntime.jsxs(TypographyButton.TypographyButton, { buttonClassName: 'dynamic-widget-wallets-header__add_wallet', buttonVariant: 'tertiary', buttonPadding: 'none', onClick: addNewWallet, typographyProps: {
+                            color: 'secondary',
+                            variant: 'button_tertiary',
+                        }, startSlot: jsxRuntime.jsx(add.ReactComponent, {}), children: [authMode === 'connect-only' ? 'Connect' : 'Link', " a new wallet"] })] }), jsxRuntime.jsx("div", { ref: availableWalletsContainerRef, className: 'dynamic-widget-wallets', "data-testid": 'dynamicWidgetWallets', children: jsxRuntime.jsx("div", { className: classNames.classNames('dynamic-widget-wallets__body', {
                         'dynamic-widget-wallets__body--apply-height': !isEmpty,
                     }), children: isEmpty ? (jsxRuntime.jsx(EmptyWallets.EmptyWallets, { copykey: 'dyn_widget.empty_wallets', text: t('dyn_widget.empty_wallets', {
                             action: authMode === 'connect-and-sign'

package/src/lib/widgets/DynamicWidget/components/DynamicWidgetWallets/DynamicWidgetWallets.js

@@ -14,6 +14,7 @@ import '../../../../shared/logger.js';
 import '@dynamic-labs/iconic';
 import '@dynamic-labs/wallet-connector-core';
 import '../../../../context/ViewContext/ViewContext.js';
+import { ReactComponent as SvgAdd } from '../../../../shared/assets/add.js';
 import '@dynamic-labs/wallet-book';
 import '../../../../utils/constants/colors.js';
 import '../../../../utils/constants/values.js';
@@ -60,6 +61,7 @@ import { useWidgetContext } from '../../context/DynamicWidgetContext.js';
 import { getWalletVerifiedCredential } from '../../../../utils/functions/getWalletVerifiedCredential/getWalletVerifiedCredential.js';
 import { EmptyWallets } from '../EmptyWallets/EmptyWallets.js';
 import { Wallet } from '../Wallet/Wallet.js';
+import { TypographyButton } from '../../../../components/TypographyButton/TypographyButton.js';
 import 'formik';
 import '../../../../views/TransactionConfirmationView/helpers/transactionErrorMessage.js';
 import '../../../../components/IconButton/IconButton.js';
@@ -86,15 +88,24 @@ import '../../../../context/SendBalanceContext/SendBalanceContext.js';
 import '../../../../context/ConnectWithOtpContext/ConnectWithOtpContext.js';
 import '../../../../context/ConnectWithOtpContext/constants.js';
 import '../../../../context/ReinitializeContext/ReinitializeContextProvider.js';
+import { useDynamicModals } from '../../../../utils/hooks/useDynamicModals/useDynamicModals.js';
 import '../../../../components/InlineWidget/InlineWidget.js';
 import 'qrcode';
 
 const DynamicWidgetWallets = () => {
     const { t } = useTranslation();
-    const { secondaryWallets, user, authMode } = useInternalDynamicContext();
+    const { secondaryWallets, user, authMode, setSelectedWalletConnectorKey } = useInternalDynamicContext();
+    const { setShowLinkNewWalletModal } = useDynamicModals();
     const { availableWalletsContainerRef } = useWidgetContext();
     const isEmpty = secondaryWallets.length === 0;
-    return (jsxs(Fragment, { children: [jsx("div", { className: 'dynamic-widget-wallets-header', children: jsx(Typography, { weight: 'medium', variant: 'body_small', color: 'secondary', className: 'dynamic-widget-wallets-header__title', copykey: 'dyn_widget.other_wallets', children: t('dyn_widget.other_wallets') }) }), jsx("div", { ref: availableWalletsContainerRef, className: 'dynamic-widget-wallets', "data-testid": 'dynamicWidgetWallets', children: jsx("div", { className: classNames('dynamic-widget-wallets__body', {
+    const addNewWallet = () => {
+        setShowLinkNewWalletModal(true);
+        setSelectedWalletConnectorKey(null);
+    };
+    return (jsxs(Fragment, { children: [jsxs("div", { className: 'dynamic-widget-wallets-header', children: [jsx(Typography, { weight: 'medium', variant: 'body_small', color: 'secondary', className: 'dynamic-widget-wallets-header__title', copykey: 'dyn_widget.other_wallets', children: t('dyn_widget.other_wallets') }), jsxs(TypographyButton, { buttonClassName: 'dynamic-widget-wallets-header__add_wallet', buttonVariant: 'tertiary', buttonPadding: 'none', onClick: addNewWallet, typographyProps: {
+                            color: 'secondary',
+                            variant: 'button_tertiary',
+                        }, startSlot: jsx(SvgAdd, {}), children: [authMode === 'connect-only' ? 'Connect' : 'Link', " a new wallet"] })] }), jsx("div", { ref: availableWalletsContainerRef, className: 'dynamic-widget-wallets', "data-testid": 'dynamicWidgetWallets', children: jsx("div", { className: classNames('dynamic-widget-wallets__body', {
                         'dynamic-widget-wallets__body--apply-height': !isEmpty,
                     }), children: isEmpty ? (jsx(EmptyWallets, { copykey: 'dyn_widget.empty_wallets', text: t('dyn_widget.empty_wallets', {
                             action: authMode === 'connect-and-sign'

package/src/lib/widgets/DynamicWidget/components/SingleWalletButtons/SingleWalletButtons.cjs

@@ -63,8 +63,8 @@ require('react-focus-lock');
 require('../../context/DynamicWidgetContext.cjs');
 require('../../../../components/IconButton/IconButton.cjs');
 require('../../../../components/MenuList/Dropdown/Dropdown.cjs');
-require('formik');
 var TypographyButton = require('../../../../components/TypographyButton/TypographyButton.cjs');
+require('formik');
 require('../../../../views/TransactionConfirmationView/helpers/transactionErrorMessage.cjs');
 require('../../../../components/Input/Input.cjs');
 require('../../../../components/PasskeyCreatedSuccessBanner/PasskeyCreatedSuccessBanner.cjs');

package/src/lib/widgets/DynamicWidget/components/SingleWalletButtons/SingleWalletButtons.js

@@ -59,8 +59,8 @@ import 'react-focus-lock';
 import '../../context/DynamicWidgetContext.js';
 import '../../../../components/IconButton/IconButton.js';
 import '../../../../components/MenuList/Dropdown/Dropdown.js';
-import 'formik';
 import { TypographyButton } from '../../../../components/TypographyButton/TypographyButton.js';
+import 'formik';
 import '../../../../views/TransactionConfirmationView/helpers/transactionErrorMessage.js';
 import '../../../../components/Input/Input.js';
 import '../../../../components/PasskeyCreatedSuccessBanner/PasskeyCreatedSuccessBanner.js';

package/src/lib/widgets/DynamicWidget/context/DynamicWidgetContext.cjs

@@ -103,6 +103,15 @@ const DynamicWidgetContextProvider = ({ children, }) => {
             return setDynamicWidgetView('profile');
         setDynamicWidgetView('wallets');
     }, [isKYCEnabled, multiWallet]);
+    const overridenWidgetView = React.useMemo(() => {
+        if (dynamicWidgetView === 'manage-passkeys')
+            return 'settings';
+        if (!isKYCEnabled && !multiWallet && dynamicWidgetView !== 'settings')
+            return 'wallets';
+        if (dynamicWidgetView === 'edit-profile')
+            return 'profile';
+        return dynamicWidgetView;
+    }, [dynamicWidgetView, isKYCEnabled, multiWallet]);
     useDynamicEvents.useInternalDynamicEvents('logout', () => goToInitialDynamicWidgetView());
     const value = React.useMemo(() => ({
         availableWalletsContainerRef,
@@ -111,6 +120,7 @@ const DynamicWidgetContextProvider = ({ children, }) => {
         goToProfileView,
         inlineControlsRef,
         isOpen: showDynamicUserProfile,
+        overridenWidgetView,
         setDynamicWidgetView,
         setIsOpen: setShowDynamicUserProfile,
         widgetRef,
@@ -121,6 +131,7 @@ const DynamicWidgetContextProvider = ({ children, }) => {
         showDynamicUserProfile,
         setDynamicWidgetView,
         setShowDynamicUserProfile,
+        overridenWidgetView,
     ]);
     return (jsxRuntime.jsx(DynamicWidgetContext.Provider, { value: value, children: children }));
 };

package/src/lib/widgets/DynamicWidget/context/DynamicWidgetContext.js

@@ -99,6 +99,15 @@ const DynamicWidgetContextProvider = ({ children, }) => {
             return setDynamicWidgetView('profile');
         setDynamicWidgetView('wallets');
     }, [isKYCEnabled, multiWallet]);
+    const overridenWidgetView = useMemo(() => {
+        if (dynamicWidgetView === 'manage-passkeys')
+            return 'settings';
+        if (!isKYCEnabled && !multiWallet && dynamicWidgetView !== 'settings')
+            return 'wallets';
+        if (dynamicWidgetView === 'edit-profile')
+            return 'profile';
+        return dynamicWidgetView;
+    }, [dynamicWidgetView, isKYCEnabled, multiWallet]);
     useInternalDynamicEvents('logout', () => goToInitialDynamicWidgetView());
     const value = useMemo(() => ({
         availableWalletsContainerRef,
@@ -107,6 +116,7 @@ const DynamicWidgetContextProvider = ({ children, }) => {
         goToProfileView,
         inlineControlsRef,
         isOpen: showDynamicUserProfile,
+        overridenWidgetView,
         setDynamicWidgetView,
         setIsOpen: setShowDynamicUserProfile,
         widgetRef,
@@ -117,6 +127,7 @@ const DynamicWidgetContextProvider = ({ children, }) => {
         showDynamicUserProfile,
         setDynamicWidgetView,
         setShowDynamicUserProfile,
+        overridenWidgetView,
     ]);
     return (jsx(DynamicWidgetContext.Provider, { value: value, children: children }));
 };

package/src/lib/widgets/DynamicWidget/context/DynamicWidgetContext.types.cjs

@@ -3,10 +3,10 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-const DynamicWalletSettingsViews = ['wallet-settings'];
+const DynamicSettingsViews = ['settings'];
 const DynamicPasskeyWidgetViews = ['manage-passkeys'];
 const DynamicTransactionsWidgetViews = ['send-balance'];
 
 exports.DynamicPasskeyWidgetViews = DynamicPasskeyWidgetViews;
+exports.DynamicSettingsViews = DynamicSettingsViews;
 exports.DynamicTransactionsWidgetViews = DynamicTransactionsWidgetViews;
-exports.DynamicWalletSettingsViews = DynamicWalletSettingsViews;

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

@@ -9,11 +9,12 @@ export interface WidgetContextProps {
     setDynamicWidgetView: Dispatch<SetStateAction<DynamicWidgetViews>>;
     setIsOpen: Dispatch<SetStateAction<boolean>>;
     widgetRef: RefObject<HTMLDivElement>;
+    overridenWidgetView: DynamicWidgetViews;
 }
-export declare const DynamicWalletSettingsViews: readonly ["wallet-settings"];
-export type DynamicWalletSettingsType = typeof DynamicWalletSettingsViews[number];
+export declare const DynamicSettingsViews: readonly ["settings"];
+export type DynamicSettingsType = typeof DynamicSettingsViews[number];
 export declare const DynamicPasskeyWidgetViews: readonly ["manage-passkeys"];
 export type DynamicPasskeyWidgetViewsType = typeof DynamicPasskeyWidgetViews[number];
 export declare const DynamicTransactionsWidgetViews: readonly ["send-balance"];
 export type DynamicTransactionsWidgetViewsType = typeof DynamicTransactionsWidgetViews[number];
-export type DynamicWidgetViews = 'wallets' | 'profile' | 'edit-profile' | DynamicTransactionsWidgetViewsType | DynamicPasskeyWidgetViewsType | DynamicWalletSettingsType;
+export type DynamicWidgetViews = 'wallets' | 'profile' | 'edit-profile' | DynamicTransactionsWidgetViewsType | DynamicPasskeyWidgetViewsType | DynamicSettingsType;

package/src/lib/widgets/DynamicWidget/context/DynamicWidgetContext.types.js

@@ -1,6 +1,6 @@
 'use client'
-const DynamicWalletSettingsViews = ['wallet-settings'];
+const DynamicSettingsViews = ['settings'];
 const DynamicPasskeyWidgetViews = ['manage-passkeys'];
 const DynamicTransactionsWidgetViews = ['send-balance'];
 
-export { DynamicPasskeyWidgetViews, DynamicTransactionsWidgetViews, DynamicWalletSettingsViews };
+export { DynamicPasskeyWidgetViews, DynamicSettingsViews, DynamicTransactionsWidgetViews };

package/src/lib/widgets/DynamicWidget/prompts/DetectedNewWalletModal/DetectedNewWalletModal.cjs

@@ -67,8 +67,8 @@ var Divider = require('../../../../components/Divider/Divider.cjs');
 require('../../context/DynamicWidgetContext.cjs');
 require('../../../../components/IconButton/IconButton.cjs');
 require('../../../../components/MenuList/Dropdown/Dropdown.cjs');
-require('formik');
 var TypographyButton = require('../../../../components/TypographyButton/TypographyButton.cjs');
+require('formik');
 require('../../../../views/TransactionConfirmationView/helpers/transactionErrorMessage.cjs');
 require('../../../../components/Input/Input.cjs');
 require('../../../../components/PasskeyCreatedSuccessBanner/PasskeyCreatedSuccessBanner.cjs');

package/src/lib/widgets/DynamicWidget/prompts/DetectedNewWalletModal/DetectedNewWalletModal.js

@@ -63,8 +63,8 @@ import { Divider } from '../../../../components/Divider/Divider.js';
 import '../../context/DynamicWidgetContext.js';
 import '../../../../components/IconButton/IconButton.js';
 import '../../../../components/MenuList/Dropdown/Dropdown.js';
-import 'formik';
 import { TypographyButton } from '../../../../components/TypographyButton/TypographyButton.js';
+import 'formik';
 import '../../../../views/TransactionConfirmationView/helpers/transactionErrorMessage.js';
 import '../../../../components/Input/Input.js';
 import '../../../../components/PasskeyCreatedSuccessBanner/PasskeyCreatedSuccessBanner.js';

package/src/lib/widgets/DynamicWidget/prompts/PendingAccountSwitchModal/SwitchOrUseActiveAccountView/SwitchOrUseActiveAccountView.cjs

@@ -65,8 +65,8 @@ var Divider = require('../../../../../components/Divider/Divider.cjs');
 require('../../../context/DynamicWidgetContext.cjs');
 require('../../../../../components/IconButton/IconButton.cjs');
 require('../../../../../components/MenuList/Dropdown/Dropdown.cjs');
-require('formik');
 var TypographyButton = require('../../../../../components/TypographyButton/TypographyButton.cjs');
+require('formik');
 require('../../../../../views/TransactionConfirmationView/helpers/transactionErrorMessage.cjs');
 require('../../../../../components/Input/Input.cjs');
 require('../../../../../components/PasskeyCreatedSuccessBanner/PasskeyCreatedSuccessBanner.cjs');

package/src/lib/widgets/DynamicWidget/prompts/PendingAccountSwitchModal/SwitchOrUseActiveAccountView/SwitchOrUseActiveAccountView.js

@@ -61,8 +61,8 @@ import { Divider } from '../../../../../components/Divider/Divider.js';
 import '../../../context/DynamicWidgetContext.js';
 import '../../../../../components/IconButton/IconButton.js';
 import '../../../../../components/MenuList/Dropdown/Dropdown.js';
-import 'formik';
 import { TypographyButton } from '../../../../../components/TypographyButton/TypographyButton.js';
+import 'formik';
 import '../../../../../views/TransactionConfirmationView/helpers/transactionErrorMessage.js';
 import '../../../../../components/Input/Input.js';
 import '../../../../../components/PasskeyCreatedSuccessBanner/PasskeyCreatedSuccessBanner.js';

package/src/lib/widgets/DynamicWidget/prompts/PendingSignModal/DefaultPendingSignModalContent/DefaultPendingSignModalContent.cjs

@@ -65,8 +65,8 @@ var DefaultPromptModal = require('../../DefaultPromptModal/DefaultPromptModal.cj
 require('../../../context/DynamicWidgetContext.cjs');
 require('../../../../../components/IconButton/IconButton.cjs');
 require('../../../../../components/MenuList/Dropdown/Dropdown.cjs');
-require('formik');
 var TypographyButton = require('../../../../../components/TypographyButton/TypographyButton.cjs');
+require('formik');
 require('../../../../../views/TransactionConfirmationView/helpers/transactionErrorMessage.cjs');
 require('../../../../../components/Input/Input.cjs');
 require('../../../../../components/PasskeyCreatedSuccessBanner/PasskeyCreatedSuccessBanner.cjs');

package/src/lib/widgets/DynamicWidget/prompts/PendingSignModal/DefaultPendingSignModalContent/DefaultPendingSignModalContent.js

@@ -61,8 +61,8 @@ import { DefaultPromptModal } from '../../DefaultPromptModal/DefaultPromptModal.
 import '../../../context/DynamicWidgetContext.js';
 import '../../../../../components/IconButton/IconButton.js';
 import '../../../../../components/MenuList/Dropdown/Dropdown.js';
-import 'formik';
 import { TypographyButton } from '../../../../../components/TypographyButton/TypographyButton.js';
+import 'formik';
 import '../../../../../views/TransactionConfirmationView/helpers/transactionErrorMessage.js';
 import '../../../../../components/Input/Input.js';
 import '../../../../../components/PasskeyCreatedSuccessBanner/PasskeyCreatedSuccessBanner.js';

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

@@ -66,8 +66,8 @@ require('react-focus-lock');
 var DynamicWidgetContext = require('../../context/DynamicWidgetContext.cjs');
 var IconButton = require('../../../../components/IconButton/IconButton.cjs');
 require('../../../../components/MenuList/Dropdown/Dropdown.cjs');
-require('formik');
 var TypographyButton = require('../../../../components/TypographyButton/TypographyButton.cjs');
+require('formik');
 require('../../../../views/TransactionConfirmationView/helpers/transactionErrorMessage.cjs');
 var ModalHeader = require('../../../../components/ModalHeader/ModalHeader.cjs');
 require('../../../../components/Input/Input.cjs');
@@ -103,7 +103,7 @@ const ManagePasskeysWidgetView = () => {
     const { initPasskeyRecoveryProcess } = usePasskeyRecovery.usePasskeyRecovery();
     const { t } = reactI18next.useTranslation();
     const isRecoveryEnabled = Boolean((_a = projectSettings === null || projectSettings === void 0 ? void 0 : projectSettings.sdk.embeddedWallets) === null || _a === void 0 ? void 0 : _a.emailRecoveryEnabled);
-    const backButton = (jsxRuntime.jsx(IconButton.IconButton, { type: 'button', onClick: () => setDynamicWidgetView('wallet-settings'), "data-testid": 'back-button', children: jsxRuntime.jsx(chevronLeft.ReactComponent, {}) }));
+    const backButton = (jsxRuntime.jsx(IconButton.IconButton, { type: 'button', onClick: () => setDynamicWidgetView('settings'), "data-testid": 'back-button', children: jsxRuntime.jsx(chevronLeft.ReactComponent, {}) }));
     return (jsxRuntime.jsxs("div", { className: 'manage-passkeys-widget-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_manage_passkeys.title', children: t('dyn_manage_passkeys.title') }) }) }), jsxRuntime.jsx(PasskeyCreatedSuccessBanner.PasskeyCreatedSuccessBanner, {}), jsxRuntime.jsxs("div", { className: 'manage-passkeys-widget-view__body', children: [jsxRuntime.jsx("div", { className: 'manage-passkeys-widget-view__body__cards', children: isLoading ? (jsxRuntime.jsx(Skeleton.Skeleton, { count: 1, className: 'manage-passkeys-widget-view__body__cards__skeleton' })) : (userPasskeys.map((passkey) => (jsxRuntime.jsx(PasskeyCard.PasskeyCard, { passkey: passkey }, passkey.id)))) }), isRecoveryEnabled && (jsxRuntime.jsx(TypographyButton.TypographyButton, { buttonPadding: 'large', buttonClassName: 'manage-passkeys-widget-view__body__recovery-button', onClick: () => initPasskeyRecoveryProcess('passkey'), showInternalLoading: false, startSlot: jsxRuntime.jsx(add.ReactComponent, {}), copykey: 'dyn_manage_passkeys.recovery_button', children: t('dyn_manage_passkeys.recovery_button') }))] })] }));
 };