@dynamic-labs/sdk-react-core 0.17.0-RC.3 → 0.17.0-RC.31

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

@@ -8,11 +8,14 @@ var Typography = require('../../../../components/Typography/Typography.cjs');
 require('@dynamic-labs/sdk-api');
 require('../../../../shared/logger.cjs');
 require('@dynamic-labs/iconic');
-require('@dynamic-labs/multi-wallet');
+require('@dynamic-labs/wallet-connector-core');
 require('../../../../context/ViewContext/ViewContext.cjs');
+require('@dynamic-labs/utils');
 require('../../../../utils/constants/colors.cjs');
+require('ethers');
 require('../../../../shared/consts/index.cjs');
 require('../../../../context/DynamicContext/DynamicContext.cjs');
+require('@dynamic-labs/multi-wallet');
 require('../../../../components/ShadowDOM/ShadowDOM.cjs');
 require('../../../../context/ThemeContext/ThemeContext.cjs');
 require('react-dom');
@@ -21,14 +24,21 @@ require('../../../../components/Transition/ZoomTransition/ZoomTransition.cjs');
 require('../../../../components/Transition/SlideInUpTransition/SlideInUpTransition.cjs');
 require('../../../../components/Transition/OpacityTransition/OpacityTransition.cjs');
 require('../../../../config/ApiEndpoint.cjs');
+require('@dynamic-labs/rpc-providers');
 require('../../../../context/ErrorContext/ErrorContext.cjs');
-require('ethers');
+require('../../../../context/AccessDeniedContext/AccessDeniedContext.cjs');
 var useFetchBalance = require('../../hooks/useFetchBalance/useFetchBalance.cjs');
 var useFetchCurrency = require('../../hooks/useFetchCurrency/useFetchCurrency.cjs');
+require('../../../../components/IconButton/IconButton.cjs');
+require('@dynamic-labs/wallet-book');
+require('../../../../components/Alert/Alert.cjs');
 require('../../../../context/MockContext/MockContext.cjs');
 require('../../../../context/CaptchaContext/CaptchaContext.cjs');
 require('../../../../utils/hooks/useUserUpdateRequest/useUserUpdateRequest.cjs');
-require('../../../../components/IconButton/IconButton.cjs');
+require('../../../../components/Popper/Popper/Popper.cjs');
+require('../../../../components/Popper/PopperContext/PopperContext.cjs');
+require('formik');
+require('yup');
 var helpers = require('../../helpers/helpers.cjs');
 
 const Balance = ({ connector, address, network, className }) => {
@@ -36,7 +46,7 @@ const Balance = ({ connector, address, network, className }) => {
     const [balance] = useFetchBalance.useFetchBalance({ address, chain, connector, network });
     if (!balance)
         return null;
-    return (jsxRuntime.jsxs(Typography.Typography, Object.assign({ className: className, variant: 'numbers_medium', color: 'primary' }, { children: [helpers.roundBalance(balance), ' ', jsxRuntime.jsx(Typography.Typography, Object.assign({ as: 'span', variant: 'numbers_medium', color: 'secondary' }, { children: chain }))] })));
+    return (jsxRuntime.jsxs(Typography.Typography, Object.assign({ className: className, variant: 'body_normal', color: 'primary' }, { children: [helpers.roundBalance(balance), ' ', jsxRuntime.jsx(Typography.Typography, Object.assign({ as: 'span', variant: 'body_normal', color: 'secondary' }, { children: chain }))] })));
 };
 
 exports.Balance = Balance;

package/src/lib/widgets/DynamicWidget/components/Balance/Balance.d.ts

@@ -4,7 +4,7 @@ type Props = {
     address: string;
     className?: string;
     connector: WalletConnector;
-    network: number | undefined;
+    network: number | string | undefined;
 };
 export declare const Balance: ({ connector, address, network, className }: Props) => JSX.Element | null;
 export {};

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

@@ -4,11 +4,14 @@ import { Typography } from '../../../../components/Typography/Typography.js';
 import '@dynamic-labs/sdk-api';
 import '../../../../shared/logger.js';
 import '@dynamic-labs/iconic';
-import '@dynamic-labs/multi-wallet';
+import '@dynamic-labs/wallet-connector-core';
 import '../../../../context/ViewContext/ViewContext.js';
+import '@dynamic-labs/utils';
 import '../../../../utils/constants/colors.js';
+import 'ethers';
 import '../../../../shared/consts/index.js';
 import '../../../../context/DynamicContext/DynamicContext.js';
+import '@dynamic-labs/multi-wallet';
 import '../../../../components/ShadowDOM/ShadowDOM.js';
 import '../../../../context/ThemeContext/ThemeContext.js';
 import 'react-dom';
@@ -17,14 +20,21 @@ import '../../../../components/Transition/ZoomTransition/ZoomTransition.js';
 import '../../../../components/Transition/SlideInUpTransition/SlideInUpTransition.js';
 import '../../../../components/Transition/OpacityTransition/OpacityTransition.js';
 import '../../../../config/ApiEndpoint.js';
+import '@dynamic-labs/rpc-providers';
 import '../../../../context/ErrorContext/ErrorContext.js';
-import 'ethers';
+import '../../../../context/AccessDeniedContext/AccessDeniedContext.js';
 import { useFetchBalance } from '../../hooks/useFetchBalance/useFetchBalance.js';
 import { useFetchCurrency } from '../../hooks/useFetchCurrency/useFetchCurrency.js';
+import '../../../../components/IconButton/IconButton.js';
+import '@dynamic-labs/wallet-book';
+import '../../../../components/Alert/Alert.js';
 import '../../../../context/MockContext/MockContext.js';
 import '../../../../context/CaptchaContext/CaptchaContext.js';
 import '../../../../utils/hooks/useUserUpdateRequest/useUserUpdateRequest.js';
-import '../../../../components/IconButton/IconButton.js';
+import '../../../../components/Popper/Popper/Popper.js';
+import '../../../../components/Popper/PopperContext/PopperContext.js';
+import 'formik';
+import 'yup';
 import { roundBalance } from '../../helpers/helpers.js';
 
 const Balance = ({ connector, address, network, className }) => {
@@ -32,7 +42,7 @@ const Balance = ({ connector, address, network, className }) => {
     const [balance] = useFetchBalance({ address, chain, connector, network });
     if (!balance)
         return null;
-    return (jsxs(Typography, Object.assign({ className: className, variant: 'numbers_medium', color: 'primary' }, { children: [roundBalance(balance), ' ', jsx(Typography, Object.assign({ as: 'span', variant: 'numbers_medium', color: 'secondary' }, { children: chain }))] })));
+    return (jsxs(Typography, Object.assign({ className: className, variant: 'body_normal', color: 'primary' }, { children: [roundBalance(balance), ' ', jsx(Typography, Object.assign({ as: 'span', variant: 'body_normal', color: 'secondary' }, { children: chain }))] })));
 };
 
 export { Balance };

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

@@ -4,15 +4,19 @@ Object.defineProperty(exports, '__esModule', { value: true });
 
 var jsxRuntime = require('react/jsx-runtime');
 var React = require('react');
+var utils = require('@dynamic-labs/utils');
 require('@dynamic-labs/sdk-api');
 require('../../../../shared/logger.cjs');
 require('@dynamic-labs/iconic');
-require('@dynamic-labs/multi-wallet');
+require('@dynamic-labs/wallet-connector-core');
 require('../../../../context/ViewContext/ViewContext.cjs');
 var threeDots = require('../../../../shared/assets/three-dots.cjs');
 require('../../../../utils/constants/colors.cjs');
+require('ethers');
+var index = require('../../../../shared/utils/hooks/useOnClickOutside/index.cjs');
 require('../../../../shared/consts/index.cjs');
 require('../../../../context/DynamicContext/DynamicContext.cjs');
+require('@dynamic-labs/multi-wallet');
 require('../../../../components/ShadowDOM/ShadowDOM.cjs');
 require('../../../../context/ThemeContext/ThemeContext.cjs');
 var Icon = require('../../../../components/Icon/Icon.cjs');
@@ -22,43 +26,27 @@ require('../../../../components/Transition/ZoomTransition/ZoomTransition.cjs');
 require('../../../../components/Transition/SlideInUpTransition/SlideInUpTransition.cjs');
 require('../../../../components/Transition/OpacityTransition/OpacityTransition.cjs');
 require('../../../../config/ApiEndpoint.cjs');
+require('@dynamic-labs/rpc-providers');
 require('../../../../context/ErrorContext/ErrorContext.cjs');
-require('ethers');
+require('../../../../context/AccessDeniedContext/AccessDeniedContext.cjs');
+var IconButton = require('../../../../components/IconButton/IconButton.cjs');
+require('@dynamic-labs/wallet-book');
+require('../../../../components/Alert/Alert.cjs');
 require('../../../../context/MockContext/MockContext.cjs');
 require('../../../../context/CaptchaContext/CaptchaContext.cjs');
 require('../../../../utils/hooks/useUserUpdateRequest/useUserUpdateRequest.cjs');
-var IconButton = require('../../../../components/IconButton/IconButton.cjs');
-var DotsMenuWrapper = require('../DotsMenuWrapper/DotsMenuWrapper.cjs');
+var Popper = require('../../../../components/Popper/Popper/Popper.cjs');
+require('../../../../components/Popper/PopperContext/PopperContext.cjs');
+require('formik');
+require('yup');
 var DotsMenuDropdown = require('../DotsMenuDropdown/DotsMenuDropdown.cjs');
-var DynamicWidgetContext = require('../../context/DynamicWidgetContext.cjs');
 
-const MENU_HEIGHT = 90;
-const DotsMenu = ({ options, title, buttonClassName }) => {
+const DotsMenu = ({ options, title, buttonClassName, buttonClassNameWithOpenMenu, anchorOrigin = utils.isMobile() ? 'bottom-left' : 'top-left', transformOrigin = utils.isMobile() ? 'bottom-right' : 'top-right', }) => {
     const dotsMenuRef = React.useRef(null);
+    const popperContentRef = React.useRef(null);
     const [showMenu, setShowMenu] = React.useState(false);
-    const [alignment, setAlignment] = React.useState('bottom');
-    const { availableWalletsContainerRef } = DynamicWidgetContext.useWidgetContext();
-    const onClose = () => {
-        setShowMenu(false);
-    };
-    const handleOpenClick = (event) => {
-        var _a, _b;
-        event.stopPropagation();
-        const availableWalletsContainerBouding = (_a = availableWalletsContainerRef === null || availableWalletsContainerRef === void 0 ? void 0 : availableWalletsContainerRef.current) === null || _a === void 0 ? void 0 : _a.getBoundingClientRect();
-        const dotsMenuBounding = (_b = dotsMenuRef === null || dotsMenuRef === void 0 ? void 0 : dotsMenuRef.current) === null || _b === void 0 ? void 0 : _b.getBoundingClientRect();
-        if (availableWalletsContainerBouding && dotsMenuBounding) {
-            if (dotsMenuBounding.top + MENU_HEIGHT <
-                availableWalletsContainerBouding.bottom) {
-                setAlignment('bottom');
-            }
-            else if (dotsMenuBounding.top + MENU_HEIGHT >
-                availableWalletsContainerBouding.top) {
-                setAlignment('top');
-            }
-        }
-        setShowMenu(!showMenu);
-    };
-    return (jsxRuntime.jsx(DotsMenuWrapper.DotsMenuWrapper, Object.assign({ onClose: onClose, showMenu: showMenu, title: title, content: jsxRuntime.jsx(DotsMenuDropdown.DotsMenuDropdown, { options: options }), alignment: alignment }, { children: jsxRuntime.jsx(IconButton.IconButton, Object.assign({ ref: dotsMenuRef, onClick: handleOpenClick, "data-testid": 'dotsMenu', className: buttonClassName }, { children: jsxRuntime.jsx(Icon.Icon, Object.assign({ color: 'text-primary' }, { children: jsxRuntime.jsx(threeDots.ReactComponent, {}) })) })) })));
+    index.useOnClickOutside(popperContentRef, () => setShowMenu(false));
+    return (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx(IconButton.IconButton, Object.assign({ ref: dotsMenuRef, onClick: () => setShowMenu(true), "data-testid": 'dotsMenu', className: showMenu ? buttonClassNameWithOpenMenu : buttonClassName }, { children: jsxRuntime.jsx(Icon.Icon, { children: jsxRuntime.jsx(threeDots.ReactComponent, {}) }) })), jsxRuntime.jsx(Popper.Popper, Object.assign({ isOpen: showMenu, setIsOpen: setShowMenu, anchorRef: dotsMenuRef, ref: popperContentRef, anchorOrigin: anchorOrigin, transformOrigin: transformOrigin }, { children: jsxRuntime.jsx(DotsMenuDropdown.DotsMenuDropdown, { options: options, setShowMenu: setShowMenu }) }))] }));
 };
 
 exports.DotsMenu = DotsMenu;

package/src/lib/widgets/DynamicWidget/components/DotsMenu/DotsMenu.d.ts

@@ -1,13 +1,17 @@
 import { ReactNode, ReactElement } from 'react';
+import { AnchorOrigin, TransformOrigin } from '../../../../components/Popper/Popper.types';
 export type DotsMenuOption = {
-    Icon: ReactElement;
+    Icon: ReactElement | null;
     callback: VoidFunction;
     text: string;
 };
 type Props = {
+    anchorOrigin?: AnchorOrigin;
     buttonClassName?: string;
+    buttonClassNameWithOpenMenu?: string;
     options: DotsMenuOption[];
     title?: ReactNode;
+    transformOrigin?: TransformOrigin;
 };
-export declare const DotsMenu: ({ options, title, buttonClassName }: Props) => JSX.Element;
+export declare const DotsMenu: ({ options, title, buttonClassName, buttonClassNameWithOpenMenu, anchorOrigin, transformOrigin, }: Props) => JSX.Element;
 export {};

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

@@ -1,14 +1,18 @@
-import { jsx } from 'react/jsx-runtime';
+import { jsxs, Fragment, jsx } from 'react/jsx-runtime';
 import { useRef, useState } from 'react';
+import { isMobile } from '@dynamic-labs/utils';
 import '@dynamic-labs/sdk-api';
 import '../../../../shared/logger.js';
 import '@dynamic-labs/iconic';
-import '@dynamic-labs/multi-wallet';
+import '@dynamic-labs/wallet-connector-core';
 import '../../../../context/ViewContext/ViewContext.js';
 import { ReactComponent as SvgThreeDots } from '../../../../shared/assets/three-dots.js';
 import '../../../../utils/constants/colors.js';
+import 'ethers';
+import { useOnClickOutside } from '../../../../shared/utils/hooks/useOnClickOutside/index.js';
 import '../../../../shared/consts/index.js';
 import '../../../../context/DynamicContext/DynamicContext.js';
+import '@dynamic-labs/multi-wallet';
 import '../../../../components/ShadowDOM/ShadowDOM.js';
 import '../../../../context/ThemeContext/ThemeContext.js';
 import { Icon } from '../../../../components/Icon/Icon.js';
@@ -18,43 +22,27 @@ import '../../../../components/Transition/ZoomTransition/ZoomTransition.js';
 import '../../../../components/Transition/SlideInUpTransition/SlideInUpTransition.js';
 import '../../../../components/Transition/OpacityTransition/OpacityTransition.js';
 import '../../../../config/ApiEndpoint.js';
+import '@dynamic-labs/rpc-providers';
 import '../../../../context/ErrorContext/ErrorContext.js';
-import 'ethers';
+import '../../../../context/AccessDeniedContext/AccessDeniedContext.js';
+import { IconButton } from '../../../../components/IconButton/IconButton.js';
+import '@dynamic-labs/wallet-book';
+import '../../../../components/Alert/Alert.js';
 import '../../../../context/MockContext/MockContext.js';
 import '../../../../context/CaptchaContext/CaptchaContext.js';
 import '../../../../utils/hooks/useUserUpdateRequest/useUserUpdateRequest.js';
-import { IconButton } from '../../../../components/IconButton/IconButton.js';
-import { DotsMenuWrapper } from '../DotsMenuWrapper/DotsMenuWrapper.js';
+import { Popper } from '../../../../components/Popper/Popper/Popper.js';
+import '../../../../components/Popper/PopperContext/PopperContext.js';
+import 'formik';
+import 'yup';
 import { DotsMenuDropdown } from '../DotsMenuDropdown/DotsMenuDropdown.js';
-import { useWidgetContext } from '../../context/DynamicWidgetContext.js';
 
-const MENU_HEIGHT = 90;
-const DotsMenu = ({ options, title, buttonClassName }) => {
+const DotsMenu = ({ options, title, buttonClassName, buttonClassNameWithOpenMenu, anchorOrigin = isMobile() ? 'bottom-left' : 'top-left', transformOrigin = isMobile() ? 'bottom-right' : 'top-right', }) => {
     const dotsMenuRef = useRef(null);
+    const popperContentRef = useRef(null);
     const [showMenu, setShowMenu] = useState(false);
-    const [alignment, setAlignment] = useState('bottom');
-    const { availableWalletsContainerRef } = useWidgetContext();
-    const onClose = () => {
-        setShowMenu(false);
-    };
-    const handleOpenClick = (event) => {
-        var _a, _b;
-        event.stopPropagation();
-        const availableWalletsContainerBouding = (_a = availableWalletsContainerRef === null || availableWalletsContainerRef === void 0 ? void 0 : availableWalletsContainerRef.current) === null || _a === void 0 ? void 0 : _a.getBoundingClientRect();
-        const dotsMenuBounding = (_b = dotsMenuRef === null || dotsMenuRef === void 0 ? void 0 : dotsMenuRef.current) === null || _b === void 0 ? void 0 : _b.getBoundingClientRect();
-        if (availableWalletsContainerBouding && dotsMenuBounding) {
-            if (dotsMenuBounding.top + MENU_HEIGHT <
-                availableWalletsContainerBouding.bottom) {
-                setAlignment('bottom');
-            }
-            else if (dotsMenuBounding.top + MENU_HEIGHT >
-                availableWalletsContainerBouding.top) {
-                setAlignment('top');
-            }
-        }
-        setShowMenu(!showMenu);
-    };
-    return (jsx(DotsMenuWrapper, Object.assign({ onClose: onClose, showMenu: showMenu, title: title, content: jsx(DotsMenuDropdown, { options: options }), alignment: alignment }, { children: jsx(IconButton, Object.assign({ ref: dotsMenuRef, onClick: handleOpenClick, "data-testid": 'dotsMenu', className: buttonClassName }, { children: jsx(Icon, Object.assign({ color: 'text-primary' }, { children: jsx(SvgThreeDots, {}) })) })) })));
+    useOnClickOutside(popperContentRef, () => setShowMenu(false));
+    return (jsxs(Fragment, { children: [jsx(IconButton, Object.assign({ ref: dotsMenuRef, onClick: () => setShowMenu(true), "data-testid": 'dotsMenu', className: showMenu ? buttonClassNameWithOpenMenu : buttonClassName }, { children: jsx(Icon, { children: jsx(SvgThreeDots, {}) }) })), jsx(Popper, Object.assign({ isOpen: showMenu, setIsOpen: setShowMenu, anchorRef: dotsMenuRef, ref: popperContentRef, anchorOrigin: anchorOrigin, transformOrigin: transformOrigin }, { children: jsx(DotsMenuDropdown, { options: options, setShowMenu: setShowMenu }) }))] }));
 };
 
 export { DotsMenu };

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

@@ -8,11 +8,14 @@ var Typography = require('../../../../components/Typography/Typography.cjs');
 require('@dynamic-labs/sdk-api');
 require('../../../../shared/logger.cjs');
 require('@dynamic-labs/iconic');
-require('@dynamic-labs/multi-wallet');
+require('@dynamic-labs/wallet-connector-core');
 require('../../../../context/ViewContext/ViewContext.cjs');
+require('@dynamic-labs/utils');
 require('../../../../utils/constants/colors.cjs');
-require('../../../../shared/consts/index.cjs');
+require('ethers');
+var index = require('../../../../shared/consts/index.cjs');
 require('../../../../context/DynamicContext/DynamicContext.cjs');
+require('@dynamic-labs/multi-wallet');
 require('../../../../components/ShadowDOM/ShadowDOM.cjs');
 require('../../../../context/ThemeContext/ThemeContext.cjs');
 var Icon = require('../../../../components/Icon/Icon.cjs');
@@ -22,15 +25,23 @@ require('../../../../components/Transition/ZoomTransition/ZoomTransition.cjs');
 require('../../../../components/Transition/SlideInUpTransition/SlideInUpTransition.cjs');
 require('../../../../components/Transition/OpacityTransition/OpacityTransition.cjs');
 require('../../../../config/ApiEndpoint.cjs');
+require('@dynamic-labs/rpc-providers');
 require('../../../../context/ErrorContext/ErrorContext.cjs');
-require('ethers');
+require('../../../../context/AccessDeniedContext/AccessDeniedContext.cjs');
+require('../../../../components/IconButton/IconButton.cjs');
+require('@dynamic-labs/wallet-book');
+require('../../../../components/Alert/Alert.cjs');
 require('../../../../context/MockContext/MockContext.cjs');
 require('../../../../context/CaptchaContext/CaptchaContext.cjs');
 require('../../../../utils/hooks/useUserUpdateRequest/useUserUpdateRequest.cjs');
-require('../../../../components/IconButton/IconButton.cjs');
+require('../../../../components/Popper/Popper/Popper.cjs');
+require('../../../../components/Popper/PopperContext/PopperContext.cjs');
+require('formik');
+require('yup');
 
-const DotsMenuDropdown = ({ options }) => (jsxRuntime.jsx("div", Object.assign({ className: 'dots-menu-dropdown__container' }, { children: options.map((option) => (jsxRuntime.jsxs("div", Object.assign({ className: 'dots-menu-dropdown__item', onClick: () => {
+const DotsMenuDropdown = ({ options, setShowMenu, }) => (jsxRuntime.jsx("div", Object.assign({ className: 'dots-menu-dropdown__container', style: { zIndex: index.tooltipZIndex } }, { children: options.map((option) => (jsxRuntime.jsxs("div", Object.assign({ className: 'dots-menu-dropdown__item', onClick: () => {
             option.callback();
-        } }, { children: [jsxRuntime.jsx(Icon.Icon, Object.assign({ color: 'text-tertiary' }, { children: option.Icon })), jsxRuntime.jsx(Typography.Typography, Object.assign({ color: 'secondary' }, { children: option.text }))] }), option.text))) })));
+            setShowMenu(false);
+        } }, { children: [option.Icon && jsxRuntime.jsx(Icon.Icon, Object.assign({ color: 'text-tertiary' }, { children: option.Icon })), jsxRuntime.jsx(Typography.Typography, Object.assign({ color: 'secondary' }, { children: option.text }))] }), option.text))) })));
 
 exports.DotsMenuDropdown = DotsMenuDropdown;

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

@@ -4,11 +4,14 @@ import { Typography } from '../../../../components/Typography/Typography.js';
 import '@dynamic-labs/sdk-api';
 import '../../../../shared/logger.js';
 import '@dynamic-labs/iconic';
-import '@dynamic-labs/multi-wallet';
+import '@dynamic-labs/wallet-connector-core';
 import '../../../../context/ViewContext/ViewContext.js';
+import '@dynamic-labs/utils';
 import '../../../../utils/constants/colors.js';
-import '../../../../shared/consts/index.js';
+import 'ethers';
+import { tooltipZIndex } from '../../../../shared/consts/index.js';
 import '../../../../context/DynamicContext/DynamicContext.js';
+import '@dynamic-labs/multi-wallet';
 import '../../../../components/ShadowDOM/ShadowDOM.js';
 import '../../../../context/ThemeContext/ThemeContext.js';
 import { Icon } from '../../../../components/Icon/Icon.js';
@@ -18,15 +21,23 @@ import '../../../../components/Transition/ZoomTransition/ZoomTransition.js';
 import '../../../../components/Transition/SlideInUpTransition/SlideInUpTransition.js';
 import '../../../../components/Transition/OpacityTransition/OpacityTransition.js';
 import '../../../../config/ApiEndpoint.js';
+import '@dynamic-labs/rpc-providers';
 import '../../../../context/ErrorContext/ErrorContext.js';
-import 'ethers';
+import '../../../../context/AccessDeniedContext/AccessDeniedContext.js';
+import '../../../../components/IconButton/IconButton.js';
+import '@dynamic-labs/wallet-book';
+import '../../../../components/Alert/Alert.js';
 import '../../../../context/MockContext/MockContext.js';
 import '../../../../context/CaptchaContext/CaptchaContext.js';
 import '../../../../utils/hooks/useUserUpdateRequest/useUserUpdateRequest.js';
-import '../../../../components/IconButton/IconButton.js';
+import '../../../../components/Popper/Popper/Popper.js';
+import '../../../../components/Popper/PopperContext/PopperContext.js';
+import 'formik';
+import 'yup';
 
-const DotsMenuDropdown = ({ options }) => (jsx("div", Object.assign({ className: 'dots-menu-dropdown__container' }, { children: options.map((option) => (jsxs("div", Object.assign({ className: 'dots-menu-dropdown__item', onClick: () => {
+const DotsMenuDropdown = ({ options, setShowMenu, }) => (jsx("div", Object.assign({ className: 'dots-menu-dropdown__container', style: { zIndex: tooltipZIndex } }, { children: options.map((option) => (jsxs("div", Object.assign({ className: 'dots-menu-dropdown__item', onClick: () => {
             option.callback();
-        } }, { children: [jsx(Icon, Object.assign({ color: 'text-tertiary' }, { children: option.Icon })), jsx(Typography, Object.assign({ color: 'secondary' }, { children: option.text }))] }), option.text))) })));
+            setShowMenu(false);
+        } }, { children: [option.Icon && jsx(Icon, Object.assign({ color: 'text-tertiary' }, { children: option.Icon })), jsx(Typography, Object.assign({ color: 'secondary' }, { children: option.text }))] }), option.text))) })));
 
 export { DotsMenuDropdown };

package/src/lib/widgets/DynamicWidget/components/DotsMenuDropdown/DotsMenuDropdown.types.d.ts

@@ -1,11 +1,12 @@
-import { FC, ReactElement } from 'react';
+import { Dispatch, FC, ReactElement, SetStateAction } from 'react';
 type DotsMenuOption = {
-    Icon: ReactElement;
+    Icon: ReactElement | null;
     callback: VoidFunction;
     text: string;
 };
 export type DotsMenuDropdownProps = {
     options: DotsMenuOption[];
+    setShowMenu: Dispatch<SetStateAction<boolean>>;
 };
 export type DotsMenuDropdownComponent = FC<DotsMenuDropdownProps>;
 export {};

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

@@ -20,7 +20,7 @@ const DynamicNav = () => {
         [];
     if (!projectSettings)
         return null;
-    return (jsxRuntime.jsx(IsBrowser.IsBrowser, { children: jsxRuntime.jsxs("div", Object.assign({ ref: inlineControlsRef, "data-testid": 'DynamicNav', className: 'dynamic-widget-inline-controls' }, { children: [jsxRuntime.jsx(NetworkPicker.NetworkPicker, { connector: primaryWallet === null || primaryWallet === void 0 ? void 0 : primaryWallet.connector, showNetworkName: true, isNetworkPickerOpen: isNetworkPickerOpen, setIsNetworkPickerOpen: setIsNetworkPickerOpen, buttonClassName: 'dynamic-widget-inline-controls__network-picker', listClassName: 'dynamic-widget-inline-controls__network-picker-list', checkboxClassName: 'dynamic-widget-inline-controls__network-picker-checkbox', evmNetworks: evmNetworks }), jsxRuntime.jsx(AccountControl.AccountControl, {})] })) }));
+    return (jsxRuntime.jsx(IsBrowser.IsBrowser, { children: jsxRuntime.jsxs("div", Object.assign({ ref: inlineControlsRef, "data-testid": 'DynamicNav', className: 'dynamic-widget-inline-controls' }, { children: [jsxRuntime.jsx(NetworkPicker.NetworkPicker, { connector: primaryWallet === null || primaryWallet === void 0 ? void 0 : primaryWallet.connector, showNetworkName: true, isNetworkPickerOpen: isNetworkPickerOpen, setIsNetworkPickerOpen: setIsNetworkPickerOpen, mainClassName: 'dynamic-widget-inline-controls__network-picker-main', buttonClassName: 'dynamic-widget-inline-controls__network-picker', listClassName: 'dynamic-widget-inline-controls__network-picker-list', checkboxClassName: 'dynamic-widget-inline-controls__network-picker-checkbox', evmNetworks: evmNetworks }), jsxRuntime.jsx("div", Object.assign({ className: 'dynamic-widget-inline-controls__account-control-container' }, { children: jsxRuntime.jsx(AccountControl.AccountControl, { className: 'dynamic-widget-inline-controls__account-control' }) }))] })) }));
 };
 const ShadowedDynamicNav = () => (jsxRuntime.jsx(ShadowDOM.ShadowDOM, { children: jsxRuntime.jsx(DynamicNav, {}) }));
 

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

@@ -16,7 +16,7 @@ const DynamicNav = () => {
         [];
     if (!projectSettings)
         return null;
-    return (jsx(IsBrowser, { children: jsxs("div", Object.assign({ ref: inlineControlsRef, "data-testid": 'DynamicNav', className: 'dynamic-widget-inline-controls' }, { children: [jsx(NetworkPicker, { connector: primaryWallet === null || primaryWallet === void 0 ? void 0 : primaryWallet.connector, showNetworkName: true, isNetworkPickerOpen: isNetworkPickerOpen, setIsNetworkPickerOpen: setIsNetworkPickerOpen, buttonClassName: 'dynamic-widget-inline-controls__network-picker', listClassName: 'dynamic-widget-inline-controls__network-picker-list', checkboxClassName: 'dynamic-widget-inline-controls__network-picker-checkbox', evmNetworks: evmNetworks }), jsx(AccountControl, {})] })) }));
+    return (jsx(IsBrowser, { children: jsxs("div", Object.assign({ ref: inlineControlsRef, "data-testid": 'DynamicNav', className: 'dynamic-widget-inline-controls' }, { children: [jsx(NetworkPicker, { connector: primaryWallet === null || primaryWallet === void 0 ? void 0 : primaryWallet.connector, showNetworkName: true, isNetworkPickerOpen: isNetworkPickerOpen, setIsNetworkPickerOpen: setIsNetworkPickerOpen, mainClassName: 'dynamic-widget-inline-controls__network-picker-main', buttonClassName: 'dynamic-widget-inline-controls__network-picker', listClassName: 'dynamic-widget-inline-controls__network-picker-list', checkboxClassName: 'dynamic-widget-inline-controls__network-picker-checkbox', evmNetworks: evmNetworks }), jsx("div", Object.assign({ className: 'dynamic-widget-inline-controls__account-control-container' }, { children: jsx(AccountControl, { className: 'dynamic-widget-inline-controls__account-control' }) }))] })) }));
 };
 const ShadowedDynamicNav = () => (jsx(ShadowDOM, { children: jsx(DynamicNav, {}) }));
 

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

@@ -4,12 +4,14 @@ Object.defineProperty(exports, '__esModule', { value: true });
 
 var jsxRuntime = require('react/jsx-runtime');
 var React = require('react');
-var multiWallet = require('@dynamic-labs/multi-wallet');
+var utils = require('@dynamic-labs/utils');
 require('@dynamic-labs/sdk-api');
 require('../../../../shared/logger.cjs');
 require('@dynamic-labs/iconic');
+require('@dynamic-labs/wallet-connector-core');
 require('../../../../context/ViewContext/ViewContext.cjs');
 require('../../../../utils/constants/colors.cjs');
+require('ethers');
 var index = require('../../../../shared/consts/index.cjs');
 var DynamicWidgetCard = require('../DynamicWidgetCard/DynamicWidgetCard.cjs');
 var DynamicWidgetHeader = require('../DynamicWidgetHeader/DynamicWidgetHeader.cjs');
@@ -17,6 +19,7 @@ var DynamicWidgetPrompts = require('../DynamicWidgetPrompts/DynamicWidgetPrompts
 var DynamicWidgetVariants = require('../DynamicWidgetVariants/DynamicWidgetVariants.cjs');
 var DynamicWidgetViews = require('../DynamicWidgetViews/DynamicWidgetViews.cjs');
 var useInternalDynamicContext = require('../../../../context/DynamicContext/useInternalDynamicContext.cjs');
+require('@dynamic-labs/multi-wallet');
 var ShadowDOM = require('../../../../components/ShadowDOM/ShadowDOM.cjs');
 require('../../../../context/ThemeContext/ThemeContext.cjs');
 require('react-dom');
@@ -25,25 +28,35 @@ require('../../../../components/Transition/ZoomTransition/ZoomTransition.cjs');
 require('../../../../components/Transition/SlideInUpTransition/SlideInUpTransition.cjs');
 require('../../../../components/Transition/OpacityTransition/OpacityTransition.cjs');
 require('../../../../config/ApiEndpoint.cjs');
+require('@dynamic-labs/rpc-providers');
 require('../../../../context/ErrorContext/ErrorContext.cjs');
-require('ethers');
+require('../../../../context/AccessDeniedContext/AccessDeniedContext.cjs');
+require('../../../../components/IconButton/IconButton.cjs');
+require('@dynamic-labs/wallet-book');
+require('../../../../components/Alert/Alert.cjs');
 require('../../../../context/MockContext/MockContext.cjs');
 require('../../../../context/CaptchaContext/CaptchaContext.cjs');
 require('../../../../utils/hooks/useUserUpdateRequest/useUserUpdateRequest.cjs');
-require('../../../../components/IconButton/IconButton.cjs');
+require('../../../../components/Popper/Popper/Popper.cjs');
+require('../../../../components/Popper/PopperContext/PopperContext.cjs');
+require('formik');
+require('yup');
 var IsBrowser = require('../../../../components/IsBrowser/IsBrowser.cjs');
+var DynamicWidgetContext = require('../../context/DynamicWidgetContext.cjs');
 
 const DynamicUserProfile = ({ variant, }) => {
     const { projectSettings } = useInternalDynamicContext.useInternalDynamicContext();
+    const { dynamicWidgetView } = DynamicWidgetContext.useWidgetContext();
     const _variant = React.useMemo(() => {
-        if (multiWallet.isMobile()) {
+        if (utils.isMobile()) {
             return 'modal';
         }
         return variant;
     }, [variant]);
     if (!projectSettings)
         return null;
-    return (jsxRuntime.jsx(IsBrowser.IsBrowser, { children: jsxRuntime.jsx(DynamicWidgetVariants.DynamicWidgetVariants, Object.assign({ variant: _variant, zIndex: index.widgetModalZIndex }, { children: jsxRuntime.jsxs(DynamicWidgetCard.DynamicWidgetCard, { children: [jsxRuntime.jsx(DynamicWidgetHeader.MemoizedDynamicWidgetHeader, {}), jsxRuntime.jsx(DynamicWidgetViews.DynamicWidgetViews, {}), jsxRuntime.jsx(DynamicWidgetPrompts.DynamicWidgetPrompts, {})] }) })) }));
+    const shouldRenderHeader = dynamicWidgetView !== 'send-balance';
+    return (jsxRuntime.jsx(IsBrowser.IsBrowser, { children: jsxRuntime.jsx(DynamicWidgetVariants.DynamicWidgetVariants, Object.assign({ variant: _variant, zIndex: index.widgetModalZIndex }, { children: jsxRuntime.jsxs(DynamicWidgetCard.DynamicWidgetCard, { children: [shouldRenderHeader && jsxRuntime.jsx(DynamicWidgetHeader.MemoizedDynamicWidgetHeader, { variant: variant }), jsxRuntime.jsx(DynamicWidgetViews.DynamicWidgetViews, {}), jsxRuntime.jsx(DynamicWidgetPrompts.DynamicWidgetPrompts, {})] }) })) }));
 };
 const ShadowedDynamicUserProfile = () => (jsxRuntime.jsx(ShadowDOM.ShadowDOM, Object.assign({ zIndex: index.widgetModalZIndex }, { children: jsxRuntime.jsx(DynamicUserProfile, {}) })));
 

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

@@ -1,11 +1,13 @@
 import { jsx, jsxs } from 'react/jsx-runtime';
 import { useMemo } from 'react';
-import { isMobile } from '@dynamic-labs/multi-wallet';
+import { isMobile } from '@dynamic-labs/utils';
 import '@dynamic-labs/sdk-api';
 import '../../../../shared/logger.js';
 import '@dynamic-labs/iconic';
+import '@dynamic-labs/wallet-connector-core';
 import '../../../../context/ViewContext/ViewContext.js';
 import '../../../../utils/constants/colors.js';
+import 'ethers';
 import { widgetModalZIndex } from '../../../../shared/consts/index.js';
 import { DynamicWidgetCard } from '../DynamicWidgetCard/DynamicWidgetCard.js';
 import { MemoizedDynamicWidgetHeader } from '../DynamicWidgetHeader/DynamicWidgetHeader.js';
@@ -13,6 +15,7 @@ import { DynamicWidgetPrompts } from '../DynamicWidgetPrompts/DynamicWidgetPromp
 import { DynamicWidgetVariants } from '../DynamicWidgetVariants/DynamicWidgetVariants.js';
 import { DynamicWidgetViews } from '../DynamicWidgetViews/DynamicWidgetViews.js';
 import { useInternalDynamicContext } from '../../../../context/DynamicContext/useInternalDynamicContext.js';
+import '@dynamic-labs/multi-wallet';
 import { ShadowDOM } from '../../../../components/ShadowDOM/ShadowDOM.js';
 import '../../../../context/ThemeContext/ThemeContext.js';
 import 'react-dom';
@@ -21,16 +24,25 @@ import '../../../../components/Transition/ZoomTransition/ZoomTransition.js';
 import '../../../../components/Transition/SlideInUpTransition/SlideInUpTransition.js';
 import '../../../../components/Transition/OpacityTransition/OpacityTransition.js';
 import '../../../../config/ApiEndpoint.js';
+import '@dynamic-labs/rpc-providers';
 import '../../../../context/ErrorContext/ErrorContext.js';
-import 'ethers';
+import '../../../../context/AccessDeniedContext/AccessDeniedContext.js';
+import '../../../../components/IconButton/IconButton.js';
+import '@dynamic-labs/wallet-book';
+import '../../../../components/Alert/Alert.js';
 import '../../../../context/MockContext/MockContext.js';
 import '../../../../context/CaptchaContext/CaptchaContext.js';
 import '../../../../utils/hooks/useUserUpdateRequest/useUserUpdateRequest.js';
-import '../../../../components/IconButton/IconButton.js';
+import '../../../../components/Popper/Popper/Popper.js';
+import '../../../../components/Popper/PopperContext/PopperContext.js';
+import 'formik';
+import 'yup';
 import { IsBrowser } from '../../../../components/IsBrowser/IsBrowser.js';
+import { useWidgetContext } from '../../context/DynamicWidgetContext.js';
 
 const DynamicUserProfile = ({ variant, }) => {
     const { projectSettings } = useInternalDynamicContext();
+    const { dynamicWidgetView } = useWidgetContext();
     const _variant = useMemo(() => {
         if (isMobile()) {
             return 'modal';
@@ -39,7 +51,8 @@ const DynamicUserProfile = ({ variant, }) => {
     }, [variant]);
     if (!projectSettings)
         return null;
-    return (jsx(IsBrowser, { children: jsx(DynamicWidgetVariants, Object.assign({ variant: _variant, zIndex: widgetModalZIndex }, { children: jsxs(DynamicWidgetCard, { children: [jsx(MemoizedDynamicWidgetHeader, {}), jsx(DynamicWidgetViews, {}), jsx(DynamicWidgetPrompts, {})] }) })) }));
+    const shouldRenderHeader = dynamicWidgetView !== 'send-balance';
+    return (jsx(IsBrowser, { children: jsx(DynamicWidgetVariants, Object.assign({ variant: _variant, zIndex: widgetModalZIndex }, { children: jsxs(DynamicWidgetCard, { children: [shouldRenderHeader && jsx(MemoizedDynamicWidgetHeader, { variant: variant }), jsx(DynamicWidgetViews, {}), jsx(DynamicWidgetPrompts, {})] }) })) }));
 };
 const ShadowedDynamicUserProfile = () => (jsx(ShadowDOM, Object.assign({ zIndex: widgetModalZIndex }, { children: jsx(DynamicUserProfile, {}) })));
 

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

@@ -4,16 +4,21 @@ Object.defineProperty(exports, '__esModule', { value: true });
 
 var jsxRuntime = require('react/jsx-runtime');
 var React = require('react');
-require('@dynamic-labs/multi-wallet');
+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');
 require('../../../../context/ViewContext/ViewContext.cjs');
 require('../../../../utils/constants/colors.cjs');
+require('ethers');
 require('../../../../shared/consts/index.cjs');
+require('@dynamic-labs/multi-wallet');
+require('@dynamic-labs/rpc-providers');
 require('../../../../context/DynamicContext/DynamicContext.cjs');
 require('../../../../context/ErrorContext/ErrorContext.cjs');
+require('../../../../context/AccessDeniedContext/AccessDeniedContext.cjs');
 require('react-dom');
 require('../../../../components/ShadowDOM/ShadowDOM.cjs');
 require('../../../../context/ThemeContext/ThemeContext.cjs');
@@ -22,7 +27,12 @@ require('../../../../components/Transition/ZoomTransition/ZoomTransition.cjs');
 require('../../../../components/Transition/SlideInUpTransition/SlideInUpTransition.cjs');
 require('../../../../components/Transition/OpacityTransition/OpacityTransition.cjs');
 require('../../../../components/IconButton/IconButton.cjs');
-require('ethers');
+require('../../../../components/Alert/Alert.cjs');
+require('@dynamic-labs/wallet-book');
+require('../../../../components/Popper/Popper/Popper.cjs');
+require('../../../../components/Popper/PopperContext/PopperContext.cjs');
+require('formik');
+require('yup');
 var useKYCFlag = require('../../../../utils/hooks/useKYCFlag/useKYCFlag.cjs');
 var useMultiWalletFlag = require('../../../../utils/hooks/useMultiWalletFlag/useMultiWalletFlag.cjs');
 require('../../../../context/MockContext/MockContext.cjs');
@@ -36,7 +46,7 @@ function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'defau
 
 var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
 
-const DynamicWidgetHeader = () => {
+const DynamicWidgetHeader = ({ variant, }) => {
     const { dynamicWidgetView } = DynamicWidgetContext.useWidgetContext();
     const isKYCEnabled = useKYCFlag.useKYCFlag();
     const isMultiWalletEnabled = useMultiWalletFlag.useMultiWalletFlag();
@@ -50,7 +60,7 @@ const DynamicWidgetHeader = () => {
     }, [dynamicWidgetView, isKYCEnabled, isMultiWalletEnabled]);
     return (jsxRuntime.jsxs("div", Object.assign({ className: 'dynamic-widget-header' }, { children: [isKYCEnabled && isMultiWalletEnabled && (jsxRuntime.jsx(DynamicWidgetSwitcher.DynamicWidgetSwitcher, { overwriteValue: dynamicWidgetSwitcherOverwriteValue })), (dynamicWidgetSwitcherOverwriteValue === 'index' ||
                 (dynamicWidgetSwitcherOverwriteValue === 'profile' &&
-                    !isMultiWalletEnabled)) && jsxRuntime.jsx(DynamicWidgetWalletHeader.DynamicWidgetWalletHeader, {})] })));
+                    !isMultiWalletEnabled)) && (jsxRuntime.jsx(DynamicWidgetWalletHeader.DynamicWidgetWalletHeader, { variant: variant }))] })));
 };
 const MemoizedDynamicWidgetHeader = React__default["default"].memo(DynamicWidgetHeader);