@dynamic-labs/sdk-react-core 0.17.0-RC.2 → 0.17.0-RC.21

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

@@ -0,0 +1,78 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var jsxRuntime = require('react/jsx-runtime');
+var React = require('react');
+var utils = require('@dynamic-labs/utils');
+var Typography = require('../../../../components/Typography/Typography.cjs');
+require('@dynamic-labs/sdk-api');
+require('../../../../shared/logger.cjs');
+require('@dynamic-labs/iconic');
+require('@dynamic-labs/wallet-connector-core');
+require('../../../../context/ViewContext/ViewContext.cjs');
+var shortenWalletAddress = require('../../../../shared/utils/functions/shortenWalletAddress/shortenWalletAddress.cjs');
+require('../../../../utils/constants/colors.cjs');
+require('ethers');
+require('../../../../shared/consts/index.cjs');
+var useInternalDynamicContext = require('../../../../context/DynamicContext/useInternalDynamicContext.cjs');
+require('@dynamic-labs/multi-wallet');
+require('../../../../components/ShadowDOM/ShadowDOM.cjs');
+require('../../../../context/ThemeContext/ThemeContext.cjs');
+var classNames = require('../../../../utils/functions/classNames/classNames.cjs');
+require('react-dom');
+require('react-focus-lock');
+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('../../../../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/Popper/Popper/Popper.cjs');
+require('../../../../components/Popper/PopperContext/PopperContext.cjs');
+require('../../../../components/SendBalanceForm/SendBalanceForm.cjs');
+var NetworkPicker = require('../../../../components/NetworkPicker/NetworkPicker.cjs');
+var useFetchNameService = require('../../hooks/useFetchNameService/useFetchNameService.cjs');
+var Balance = require('../Balance/Balance.cjs');
+var DotsMenu = require('../DotsMenu/DotsMenu.cjs');
+var WalletOrSocialMagicIcon = require('../../../../components/WalletOrSocialMagicIcon/WalletOrSocialMagicIcon.cjs');
+
+const ICON_SIZE = 28;
+const ActiveWalletInformation = () => {
+    const [isNetworkPickerOpen, setIsNetworkPickerOpen] = React.useState(false);
+    const { primaryWallet, authToken, network, handleLogOut } = useInternalDynamicContext.useInternalDynamicContext();
+    const address = primaryWallet === null || primaryWallet === void 0 ? void 0 : primaryWallet.address;
+    const nameService = useFetchNameService.useFetchNameService(address);
+    const options = [
+        {
+            Icon: null,
+            callback: () => (nameService === null || nameService === void 0 ? void 0 : nameService.name) && navigator.clipboard.writeText(nameService === null || nameService === void 0 ? void 0 : nameService.name),
+            text: 'Copy ENS',
+        },
+        {
+            Icon: null,
+            callback: () => address && navigator.clipboard.writeText(address),
+            text: 'Copy wallet address',
+        },
+        {
+            Icon: null,
+            callback: () => handleLogOut(),
+            text: 'Disconnect',
+        },
+    ];
+    const evmNetworks = ((primaryWallet === null || primaryWallet === void 0 ? void 0 : primaryWallet.connector) &&
+        (primaryWallet === null || primaryWallet === void 0 ? void 0 : primaryWallet.connector).evmNetworks) ||
+        [];
+    return (jsxRuntime.jsxs("div", Object.assign({ className: 'active-wallet-information-container', "data-testid": 'active-wallet-information' }, { children: [jsxRuntime.jsxs("div", Object.assign({ className: 'active-wallet-information' }, { children: [(nameService === null || nameService === void 0 ? void 0 : nameService.avatar) ? (jsxRuntime.jsx("div", Object.assign({ className: 'active-wallet-information__avatar' }, { children: jsxRuntime.jsx("img", { src: nameService === null || nameService === void 0 ? void 0 : nameService.avatar, alt: '' }) }))) : (jsxRuntime.jsx("div", Object.assign({ className: 'active-wallet-information__wallet-img' }, { children: jsxRuntime.jsx(WalletOrSocialMagicIcon.WalletOrSocialMagicIcon, { jwt: authToken, iconSize: ICON_SIZE, showStatus: true }) }))), jsxRuntime.jsxs("div", Object.assign({ className: 'active-wallet-information__details' }, { children: [jsxRuntime.jsxs("div", Object.assign({ className: classNames.classNames('active-wallet-information__actions-container', {
+                                    'active-wallet-information__actions-container--centered': !(nameService === null || nameService === void 0 ? void 0 : nameService.name),
+                                }) }, { children: [jsxRuntime.jsxs("div", { children: [jsxRuntime.jsx(Typography.Typography, Object.assign({ className: 'active-wallet-information__handle', color: 'primary', variant: 'body_normal' }, { children: nameService === null || nameService === void 0 ? void 0 : nameService.name })), jsxRuntime.jsx(Typography.Typography, Object.assign({ className: 'active-wallet-information__address', weight: (nameService === null || nameService === void 0 ? void 0 : nameService.name) ? 'regular' : 'medium', variant: (nameService === null || nameService === void 0 ? void 0 : nameService.name) ? 'body_small' : 'body_normal', color: (nameService === null || nameService === void 0 ? void 0 : nameService.name) ? 'secondary' : 'primary' }, { children: shortenWalletAddress.shortenWalletAddress(address, 4, 4) }))] }), jsxRuntime.jsx(DotsMenu.DotsMenu, { "data-testid": 'dots-menu', options: options, title: 'Wallet options', buttonClassName: 'active-wallet-information__dots-menu', buttonClassNameWithOpenMenu: 'active-wallet-information__dots-menu', anchorOrigin: 'bottom-left', transformOrigin: utils.isMobile() ? 'bottom-right' : 'top-left' })] })), jsxRuntime.jsx(NetworkPicker.NetworkPicker, { connector: primaryWallet === null || primaryWallet === void 0 ? void 0 : primaryWallet.connector, isNetworkPickerOpen: isNetworkPickerOpen, setIsNetworkPickerOpen: setIsNetworkPickerOpen, mainClassName: 'active-wallet-information__network-picker', buttonClassName: 'active-wallet-information__network-picker-button', evmNetworks: evmNetworks, showNetworkName: true })] }))] })), jsxRuntime.jsxs("div", Object.assign({ className: 'balance-container' }, { children: [jsxRuntime.jsx(Typography.Typography, Object.assign({ color: 'secondary', variant: 'body_small' }, { children: "Balance" })), primaryWallet && (jsxRuntime.jsx(Balance.Balance, { className: 'balance-container__balance', connector: primaryWallet.connector, address: primaryWallet.address, network: network }))] }))] })));
+};
+
+exports.ActiveWalletInformation = ActiveWalletInformation;

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

@@ -0,0 +1,2 @@
+/// <reference types="react" />
+export declare const ActiveWalletInformation: () => JSX.Element;

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

@@ -0,0 +1,74 @@
+import { jsxs, jsx } from 'react/jsx-runtime';
+import { useState } from 'react';
+import { isMobile } from '@dynamic-labs/utils';
+import { Typography } from '../../../../components/Typography/Typography.js';
+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 { shortenWalletAddress } from '../../../../shared/utils/functions/shortenWalletAddress/shortenWalletAddress.js';
+import '../../../../utils/constants/colors.js';
+import 'ethers';
+import '../../../../shared/consts/index.js';
+import { useInternalDynamicContext } from '../../../../context/DynamicContext/useInternalDynamicContext.js';
+import '@dynamic-labs/multi-wallet';
+import '../../../../components/ShadowDOM/ShadowDOM.js';
+import '../../../../context/ThemeContext/ThemeContext.js';
+import { classNames } from '../../../../utils/functions/classNames/classNames.js';
+import 'react-dom';
+import 'react-focus-lock';
+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 '../../../../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/Popper/Popper/Popper.js';
+import '../../../../components/Popper/PopperContext/PopperContext.js';
+import '../../../../components/SendBalanceForm/SendBalanceForm.js';
+import { NetworkPicker } from '../../../../components/NetworkPicker/NetworkPicker.js';
+import { useFetchNameService } from '../../hooks/useFetchNameService/useFetchNameService.js';
+import { Balance } from '../Balance/Balance.js';
+import { DotsMenu } from '../DotsMenu/DotsMenu.js';
+import { WalletOrSocialMagicIcon } from '../../../../components/WalletOrSocialMagicIcon/WalletOrSocialMagicIcon.js';
+
+const ICON_SIZE = 28;
+const ActiveWalletInformation = () => {
+    const [isNetworkPickerOpen, setIsNetworkPickerOpen] = useState(false);
+    const { primaryWallet, authToken, network, handleLogOut } = useInternalDynamicContext();
+    const address = primaryWallet === null || primaryWallet === void 0 ? void 0 : primaryWallet.address;
+    const nameService = useFetchNameService(address);
+    const options = [
+        {
+            Icon: null,
+            callback: () => (nameService === null || nameService === void 0 ? void 0 : nameService.name) && navigator.clipboard.writeText(nameService === null || nameService === void 0 ? void 0 : nameService.name),
+            text: 'Copy ENS',
+        },
+        {
+            Icon: null,
+            callback: () => address && navigator.clipboard.writeText(address),
+            text: 'Copy wallet address',
+        },
+        {
+            Icon: null,
+            callback: () => handleLogOut(),
+            text: 'Disconnect',
+        },
+    ];
+    const evmNetworks = ((primaryWallet === null || primaryWallet === void 0 ? void 0 : primaryWallet.connector) &&
+        (primaryWallet === null || primaryWallet === void 0 ? void 0 : primaryWallet.connector).evmNetworks) ||
+        [];
+    return (jsxs("div", Object.assign({ className: 'active-wallet-information-container', "data-testid": 'active-wallet-information' }, { children: [jsxs("div", Object.assign({ className: 'active-wallet-information' }, { children: [(nameService === null || nameService === void 0 ? void 0 : nameService.avatar) ? (jsx("div", Object.assign({ className: 'active-wallet-information__avatar' }, { children: jsx("img", { src: nameService === null || nameService === void 0 ? void 0 : nameService.avatar, alt: '' }) }))) : (jsx("div", Object.assign({ className: 'active-wallet-information__wallet-img' }, { children: jsx(WalletOrSocialMagicIcon, { jwt: authToken, iconSize: ICON_SIZE, showStatus: true }) }))), jsxs("div", Object.assign({ className: 'active-wallet-information__details' }, { children: [jsxs("div", Object.assign({ className: classNames('active-wallet-information__actions-container', {
+                                    'active-wallet-information__actions-container--centered': !(nameService === null || nameService === void 0 ? void 0 : nameService.name),
+                                }) }, { children: [jsxs("div", { children: [jsx(Typography, Object.assign({ className: 'active-wallet-information__handle', color: 'primary', variant: 'body_normal' }, { children: nameService === null || nameService === void 0 ? void 0 : nameService.name })), jsx(Typography, Object.assign({ className: 'active-wallet-information__address', weight: (nameService === null || nameService === void 0 ? void 0 : nameService.name) ? 'regular' : 'medium', variant: (nameService === null || nameService === void 0 ? void 0 : nameService.name) ? 'body_small' : 'body_normal', color: (nameService === null || nameService === void 0 ? void 0 : nameService.name) ? 'secondary' : 'primary' }, { children: shortenWalletAddress(address, 4, 4) }))] }), jsx(DotsMenu, { "data-testid": 'dots-menu', options: options, title: 'Wallet options', buttonClassName: 'active-wallet-information__dots-menu', buttonClassNameWithOpenMenu: 'active-wallet-information__dots-menu', anchorOrigin: 'bottom-left', transformOrigin: isMobile() ? 'bottom-right' : 'top-left' })] })), jsx(NetworkPicker, { connector: primaryWallet === null || primaryWallet === void 0 ? void 0 : primaryWallet.connector, isNetworkPickerOpen: isNetworkPickerOpen, setIsNetworkPickerOpen: setIsNetworkPickerOpen, mainClassName: 'active-wallet-information__network-picker', buttonClassName: 'active-wallet-information__network-picker-button', evmNetworks: evmNetworks, showNetworkName: true })] }))] })), jsxs("div", Object.assign({ className: 'balance-container' }, { children: [jsx(Typography, Object.assign({ color: 'secondary', variant: 'body_small' }, { children: "Balance" })), primaryWallet && (jsx(Balance, { className: 'balance-container__balance', connector: primaryWallet.connector, address: primaryWallet.address, network: network }))] }))] })));
+};
+
+export { ActiveWalletInformation };

package/src/lib/widgets/DynamicWidget/components/ActiveWalletInformation/index.d.ts

@@ -0,0 +1 @@
+export { ActiveWalletInformation } from './ActiveWalletInformation';

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,20 @@ 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('../../../../components/SendBalanceForm/SendBalanceForm.cjs');
 var helpers = require('../../helpers/helpers.cjs');
 
 const Balance = ({ connector, address, network, className }) => {
@@ -36,7 +45,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,20 @@ 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 '../../../../components/SendBalanceForm/SendBalanceForm.js';
 import { roundBalance } from '../../helpers/helpers.js';
 
 const Balance = ({ connector, address, network, className }) => {
@@ -32,7 +41,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,26 @@ 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('../../../../components/SendBalanceForm/SendBalanceForm.cjs');
 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,26 @@ 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 '../../../../components/SendBalanceForm/SendBalanceForm.js';
 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,22 @@ 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('../../../../components/SendBalanceForm/SendBalanceForm.cjs');
 
-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,22 @@ 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 '../../../../components/SendBalanceForm/SendBalanceForm.js';
 
-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 {};