@dynamic-labs/sdk-react-core 0.17.0-RC.11 → 0.17.0-RC.13

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

@@ -1,14 +1,15 @@
-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/wallet-connector-core';
 import '../../../../context/ViewContext/ViewContext.js';
 import { ReactComponent as SvgThreeDots } from '../../../../shared/assets/three-dots.js';
-import '@dynamic-labs/utils';
 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';
@@ -28,37 +29,16 @@ import '../../../../context/CaptchaContext/CaptchaContext.js';
 import '../../../../utils/hooks/useUserUpdateRequest/useUserUpdateRequest.js';
 import { IconButton } from '../../../../components/IconButton/IconButton.js';
 import '../../../../components/Alert/Alert.js';
-import { DotsMenuWrapper } from '../DotsMenuWrapper/DotsMenuWrapper.js';
+import { Popper } from '../../../../components/Popper/Popper/Popper.js';
+import '../../../../components/Popper/PopperContext/PopperContext.js';
 import { DotsMenuDropdown } from '../DotsMenuDropdown/DotsMenuDropdown.js';
-import { useWidgetContext } from '../../context/DynamicWidgetContext.js';
 
-const MENU_HEIGHT = 90;
 const DotsMenu = ({ options, title, buttonClassName }) => {
     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 ? undefined : buttonClassName }, { children: jsx(Icon, Object.assign({ color: 'text-primary' }, { children: jsx(SvgThreeDots, {}) })) })), jsx(Popper, Object.assign({ isOpen: showMenu, setIsOpen: setShowMenu, anchorRef: dotsMenuRef, ref: popperContentRef, anchorOrigin: isMobile() ? 'bottom-left' : 'top-left', transformOrigin: isMobile() ? 'bottom-right' : 'top-right' }, { children: jsx(DotsMenuDropdown, { options: options }) }))] }));
 };
 
 export { DotsMenu };

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

@@ -13,7 +13,7 @@ require('../../../../context/ViewContext/ViewContext.cjs');
 require('@dynamic-labs/utils');
 require('../../../../utils/constants/colors.cjs');
 require('ethers');
-require('../../../../shared/consts/index.cjs');
+var index = require('../../../../shared/consts/index.cjs');
 require('../../../../context/DynamicContext/DynamicContext.cjs');
 require('@dynamic-labs/multi-wallet');
 require('../../../../components/ShadowDOM/ShadowDOM.cjs');
@@ -32,8 +32,10 @@ require('../../../../context/CaptchaContext/CaptchaContext.cjs');
 require('../../../../utils/hooks/useUserUpdateRequest/useUserUpdateRequest.cjs');
 require('../../../../components/IconButton/IconButton.cjs');
 require('../../../../components/Alert/Alert.cjs');
+require('../../../../components/Popper/Popper/Popper.cjs');
+require('../../../../components/Popper/PopperContext/PopperContext.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 }) => (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))) })));
 

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

@@ -9,7 +9,7 @@ import '../../../../context/ViewContext/ViewContext.js';
 import '@dynamic-labs/utils';
 import '../../../../utils/constants/colors.js';
 import 'ethers';
-import '../../../../shared/consts/index.js';
+import { tooltipZIndex } from '../../../../shared/consts/index.js';
 import '../../../../context/DynamicContext/DynamicContext.js';
 import '@dynamic-labs/multi-wallet';
 import '../../../../components/ShadowDOM/ShadowDOM.js';
@@ -28,8 +28,10 @@ import '../../../../context/CaptchaContext/CaptchaContext.js';
 import '../../../../utils/hooks/useUserUpdateRequest/useUserUpdateRequest.js';
 import '../../../../components/IconButton/IconButton.js';
 import '../../../../components/Alert/Alert.js';
+import '../../../../components/Popper/Popper/Popper.js';
+import '../../../../components/Popper/PopperContext/PopperContext.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 }) => (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))) })));
 

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

@@ -35,6 +35,8 @@ require('../../../../context/CaptchaContext/CaptchaContext.cjs');
 require('../../../../utils/hooks/useUserUpdateRequest/useUserUpdateRequest.cjs');
 require('../../../../components/IconButton/IconButton.cjs');
 require('../../../../components/Alert/Alert.cjs');
+require('../../../../components/Popper/Popper/Popper.cjs');
+require('../../../../components/Popper/PopperContext/PopperContext.cjs');
 var IsBrowser = require('../../../../components/IsBrowser/IsBrowser.cjs');
 
 const DynamicUserProfile = ({ variant, }) => {

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

@@ -31,6 +31,8 @@ import '../../../../context/CaptchaContext/CaptchaContext.js';
 import '../../../../utils/hooks/useUserUpdateRequest/useUserUpdateRequest.js';
 import '../../../../components/IconButton/IconButton.js';
 import '../../../../components/Alert/Alert.js';
+import '../../../../components/Popper/Popper/Popper.js';
+import '../../../../components/Popper/PopperContext/PopperContext.js';
 import { IsBrowser } from '../../../../components/IsBrowser/IsBrowser.js';
 
 const DynamicUserProfile = ({ variant, }) => {

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

@@ -27,6 +27,8 @@ require('../../../../components/Transition/SlideInUpTransition/SlideInUpTransiti
 require('../../../../components/Transition/OpacityTransition/OpacityTransition.cjs');
 require('../../../../components/IconButton/IconButton.cjs');
 require('../../../../components/Alert/Alert.cjs');
+require('../../../../components/Popper/Popper/Popper.cjs');
+require('../../../../components/Popper/PopperContext/PopperContext.cjs');
 var useKYCFlag = require('../../../../utils/hooks/useKYCFlag/useKYCFlag.cjs');
 var useMultiWalletFlag = require('../../../../utils/hooks/useMultiWalletFlag/useMultiWalletFlag.cjs');
 require('../../../../context/MockContext/MockContext.cjs');

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

@@ -23,6 +23,8 @@ import '../../../../components/Transition/SlideInUpTransition/SlideInUpTransitio
 import '../../../../components/Transition/OpacityTransition/OpacityTransition.js';
 import '../../../../components/IconButton/IconButton.js';
 import '../../../../components/Alert/Alert.js';
+import '../../../../components/Popper/Popper/Popper.js';
+import '../../../../components/Popper/PopperContext/PopperContext.js';
 import { useKYCFlag } from '../../../../utils/hooks/useKYCFlag/useKYCFlag.js';
 import { useMultiWalletFlag } from '../../../../utils/hooks/useMultiWalletFlag/useMultiWalletFlag.js';
 import '../../../../context/MockContext/MockContext.js';

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

@@ -38,6 +38,8 @@ var Button = require('../../../../../components/Button/Button.cjs');
 require('../../../../../components/IconButton/IconButton.cjs');
 require('../../../../../components/Alert/Alert.cjs');
 var StatusDot = require('../../../../../components/StatusDot/StatusDot.cjs');
+require('../../../../../components/Popper/Popper/Popper.cjs');
+require('../../../../../components/Popper/PopperContext/PopperContext.cjs');
 var Balance = require('../../Balance/Balance.cjs');
 var useFetchNameService = require('../../../hooks/useFetchNameService/useFetchNameService.cjs');
 var NetworkPicker = require('../../../../../components/NetworkPicker/NetworkPicker.cjs');

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

@@ -34,6 +34,8 @@ import { Button } from '../../../../../components/Button/Button.js';
 import '../../../../../components/IconButton/IconButton.js';
 import '../../../../../components/Alert/Alert.js';
 import { StatusDot } from '../../../../../components/StatusDot/StatusDot.js';
+import '../../../../../components/Popper/Popper/Popper.js';
+import '../../../../../components/Popper/PopperContext/PopperContext.js';
 import { Balance } from '../../Balance/Balance.js';
 import { useFetchNameService } from '../../../hooks/useFetchNameService/useFetchNameService.js';
 import { NetworkPicker } from '../../../../../components/NetworkPicker/NetworkPicker.js';

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

@@ -31,6 +31,8 @@ require('../../../../utils/hooks/useUserUpdateRequest/useUserUpdateRequest.cjs')
 require('../../../../components/IconButton/IconButton.cjs');
 require('../../../../components/Alert/Alert.cjs');
 var OptionsSwitcher = require('../../../../components/OptionsSwitcher/OptionsSwitcher.cjs');
+require('../../../../components/Popper/Popper/Popper.cjs');
+require('../../../../components/Popper/PopperContext/PopperContext.cjs');
 var DynamicWidgetContext = require('../../context/DynamicWidgetContext.cjs');
 
 const options = [

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

@@ -27,6 +27,8 @@ import '../../../../utils/hooks/useUserUpdateRequest/useUserUpdateRequest.js';
 import '../../../../components/IconButton/IconButton.js';
 import '../../../../components/Alert/Alert.js';
 import { OptionsSwitcher } from '../../../../components/OptionsSwitcher/OptionsSwitcher.js';
+import '../../../../components/Popper/Popper/Popper.js';
+import '../../../../components/Popper/PopperContext/PopperContext.js';
 import { useWidgetContext } from '../../context/DynamicWidgetContext.js';
 
 const options = [

package/src/lib/widgets/DynamicWidget/components/DynamicWidgetVariants/variants/DynamicWidgetDropdown/DynamicWidgetDropdown.cjs

@@ -28,6 +28,8 @@ require('../../../../../../context/ThemeContext/ThemeContext.cjs');
 require('react-focus-lock');
 require('../../../../../../components/IconButton/IconButton.cjs');
 require('../../../../../../components/Alert/Alert.cjs');
+require('../../../../../../components/Popper/Popper/Popper.cjs');
+require('../../../../../../components/Popper/PopperContext/PopperContext.cjs');
 require('../../../../../../context/MockContext/MockContext.cjs');
 require('../../../../../../context/CaptchaContext/CaptchaContext.cjs');
 require('../../../../../../utils/hooks/useUserUpdateRequest/useUserUpdateRequest.cjs');

package/src/lib/widgets/DynamicWidget/components/DynamicWidgetVariants/variants/DynamicWidgetDropdown/DynamicWidgetDropdown.js

@@ -24,6 +24,8 @@ import '../../../../../../context/ThemeContext/ThemeContext.js';
 import 'react-focus-lock';
 import '../../../../../../components/IconButton/IconButton.js';
 import '../../../../../../components/Alert/Alert.js';
+import '../../../../../../components/Popper/Popper/Popper.js';
+import '../../../../../../components/Popper/PopperContext/PopperContext.js';
 import '../../../../../../context/MockContext/MockContext.js';
 import '../../../../../../context/CaptchaContext/CaptchaContext.js';
 import '../../../../../../utils/hooks/useUserUpdateRequest/useUserUpdateRequest.js';

package/src/lib/widgets/DynamicWidget/components/DynamicWidgetVariants/variants/DynamicWidgetModal/DynamicWidgetModal.cjs

@@ -32,10 +32,12 @@ require('../../../../../../components/Alert/Alert.cjs');
 require('../../../../../../components/Transition/ZoomTransition/ZoomTransition.cjs');
 require('../../../../../../components/Transition/SlideInUpTransition/SlideInUpTransition.cjs');
 require('../../../../../../components/Transition/OpacityTransition/OpacityTransition.cjs');
+require('../../../../../../components/Popper/Popper/Popper.cjs');
+var PopperContext = require('../../../../../../components/Popper/PopperContext/PopperContext.cjs');
 
 const DynamicWidgetModal = ({ children, isShown, onClose, zIndex, className, }) => {
     usePreventPageScroll.usePreventPageScroll(Boolean(isShown));
-    return (jsxRuntime.jsx(Portal.Portal, Object.assign({ zIndex: zIndex, handleClose: () => onClose === null || onClose === void 0 ? void 0 : onClose(), isShown: isShown, withBackdrop: true }, { children: jsxRuntime.jsx("div", Object.assign({ className: classNames.classNames('dynamic-widget-modal', className) }, { children: children })) })));
+    return (jsxRuntime.jsx(Portal.Portal, Object.assign({ zIndex: zIndex, handleClose: () => onClose === null || onClose === void 0 ? void 0 : onClose(), isShown: isShown, withBackdrop: true }, { children: jsxRuntime.jsx("div", Object.assign({ className: classNames.classNames('dynamic-widget-modal', className) }, { children: jsxRuntime.jsx(PopperContext.PopperProvider, { children: children }) })) })));
 };
 
 exports.DynamicWidgetModal = DynamicWidgetModal;

package/src/lib/widgets/DynamicWidget/components/DynamicWidgetVariants/variants/DynamicWidgetModal/DynamicWidgetModal.js

@@ -28,10 +28,12 @@ import '../../../../../../components/Alert/Alert.js';
 import '../../../../../../components/Transition/ZoomTransition/ZoomTransition.js';
 import '../../../../../../components/Transition/SlideInUpTransition/SlideInUpTransition.js';
 import '../../../../../../components/Transition/OpacityTransition/OpacityTransition.js';
+import '../../../../../../components/Popper/Popper/Popper.js';
+import { PopperProvider } from '../../../../../../components/Popper/PopperContext/PopperContext.js';
 
 const DynamicWidgetModal = ({ children, isShown, onClose, zIndex, className, }) => {
     usePreventPageScroll(Boolean(isShown));
-    return (jsx(Portal, Object.assign({ zIndex: zIndex, handleClose: () => onClose === null || onClose === void 0 ? void 0 : onClose(), isShown: isShown, withBackdrop: true }, { children: jsx("div", Object.assign({ className: classNames('dynamic-widget-modal', className) }, { children: children })) })));
+    return (jsx(Portal, Object.assign({ zIndex: zIndex, handleClose: () => onClose === null || onClose === void 0 ? void 0 : onClose(), isShown: isShown, withBackdrop: true }, { children: jsx("div", Object.assign({ className: classNames('dynamic-widget-modal', className) }, { children: jsx(PopperProvider, { children: children }) })) })));
 };
 
 export { DynamicWidgetModal };

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

@@ -33,6 +33,8 @@ require('../../../../context/CaptchaContext/CaptchaContext.cjs');
 require('../../../../utils/hooks/useUserUpdateRequest/useUserUpdateRequest.cjs');
 require('../../../../components/IconButton/IconButton.cjs');
 require('../../../../components/Alert/Alert.cjs');
+require('../../../../components/Popper/Popper/Popper.cjs');
+require('../../../../components/Popper/PopperContext/PopperContext.cjs');
 var getWalletVerifiedCredential = require('../../../../utils/functions/getWalletVerifiedCredential/getWalletVerifiedCredential.cjs');
 var DynamicWidgetContext = require('../../context/DynamicWidgetContext.cjs');
 var EmptyWallets = require('../EmptyWallets/EmptyWallets.cjs');

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

@@ -29,6 +29,8 @@ import '../../../../context/CaptchaContext/CaptchaContext.js';
 import '../../../../utils/hooks/useUserUpdateRequest/useUserUpdateRequest.js';
 import '../../../../components/IconButton/IconButton.js';
 import '../../../../components/Alert/Alert.js';
+import '../../../../components/Popper/Popper/Popper.js';
+import '../../../../components/Popper/PopperContext/PopperContext.js';
 import { getWalletVerifiedCredential } from '../../../../utils/functions/getWalletVerifiedCredential/getWalletVerifiedCredential.js';
 import { useWidgetContext } from '../../context/DynamicWidgetContext.js';
 import { EmptyWallets } from '../EmptyWallets/EmptyWallets.js';

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

@@ -32,6 +32,8 @@ require('../../../../utils/hooks/useUserUpdateRequest/useUserUpdateRequest.cjs')
 require('../../../../components/IconButton/IconButton.cjs');
 require('../../../../components/Alert/Alert.cjs');
 var IconWithSpinner = require('../../../../components/IconWithSpinner/IconWithSpinner.cjs');
+require('../../../../components/Popper/Popper/Popper.cjs');
+require('../../../../components/Popper/PopperContext/PopperContext.cjs');
 
 const EmailConnectorPendingSignModalContent = ({ emailWalletConnector }) => (jsxRuntime.jsxs("div", Object.assign({ className: 'email-connector-pending-sign-modal-content' }, { children: [jsxRuntime.jsx(IconWithSpinner.IconWithSpinner, { Icon: iconic.SignInWithEmailIcon, iconSize: 80, isSpinning: true }), jsxRuntime.jsxs("div", Object.assign({ className: 'email-connector-pending-sign-modal-content__body' }, { children: [jsxRuntime.jsx(Typography.Typography, Object.assign({ weight: 'medium', variant: 'title', color: 'primary', className: 'email-connector-pending-sign-modal-content__title' }, { children: "Confirm your email" })), jsxRuntime.jsxs(Typography.Typography, Object.assign({ weight: 'regular', variant: 'body_normal', color: 'secondary' }, { children: ["We\u2019ve sent a verification email to", ' ', jsxRuntime.jsx(Typography.Typography, Object.assign({ variant: 'body_normal', color: 'secondary', weight: 'medium', as: 'span' }, { children: emailWalletConnector.email }))] })), jsxRuntime.jsx(Typography.Typography, Object.assign({ weight: 'regular', variant: 'body_small', color: 'secondary' }, { children: "Note: it might take a few seconds to proceed after clicking the link in your email" }))] }))] })));
 

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

@@ -28,6 +28,8 @@ import '../../../../utils/hooks/useUserUpdateRequest/useUserUpdateRequest.js';
 import '../../../../components/IconButton/IconButton.js';
 import '../../../../components/Alert/Alert.js';
 import { IconWithSpinner } from '../../../../components/IconWithSpinner/IconWithSpinner.js';
+import '../../../../components/Popper/Popper/Popper.js';
+import '../../../../components/Popper/PopperContext/PopperContext.js';
 
 const EmailConnectorPendingSignModalContent = ({ emailWalletConnector }) => (jsxs("div", Object.assign({ className: 'email-connector-pending-sign-modal-content' }, { children: [jsx(IconWithSpinner, { Icon: SignInWithEmailIcon, iconSize: 80, isSpinning: true }), jsxs("div", Object.assign({ className: 'email-connector-pending-sign-modal-content__body' }, { children: [jsx(Typography, Object.assign({ weight: 'medium', variant: 'title', color: 'primary', className: 'email-connector-pending-sign-modal-content__title' }, { children: "Confirm your email" })), jsxs(Typography, Object.assign({ weight: 'regular', variant: 'body_normal', color: 'secondary' }, { children: ["We\u2019ve sent a verification email to", ' ', jsx(Typography, Object.assign({ variant: 'body_normal', color: 'secondary', weight: 'medium', as: 'span' }, { children: emailWalletConnector.email }))] })), jsx(Typography, Object.assign({ weight: 'regular', variant: 'body_small', color: 'secondary' }, { children: "Note: it might take a few seconds to proceed after clicking the link in your email" }))] }))] })));
 

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

@@ -32,6 +32,8 @@ require('../../../../utils/hooks/useUserUpdateRequest/useUserUpdateRequest.cjs')
 require('../../../../components/IconButton/IconButton.cjs');
 require('../../../../components/Alert/Alert.cjs');
 var OTPVerificationView = require('../../../../components/OTPVerificationView/OTPVerificationView.cjs');
+require('../../../../components/Popper/Popper/Popper.cjs');
+require('../../../../components/Popper/PopperContext/PopperContext.cjs');
 
 const EmailOTPConnectorPendingSignModalContent = ({ walletConnector }) => {
     const [error, setError] = React.useState();

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

@@ -28,6 +28,8 @@ import '../../../../utils/hooks/useUserUpdateRequest/useUserUpdateRequest.js';
 import '../../../../components/IconButton/IconButton.js';
 import '../../../../components/Alert/Alert.js';
 import { OTPVerificationView } from '../../../../components/OTPVerificationView/OTPVerificationView.js';
+import '../../../../components/Popper/Popper/Popper.js';
+import '../../../../components/Popper/PopperContext/PopperContext.js';
 
 const EmailOTPConnectorPendingSignModalContent = ({ walletConnector }) => {
     const [error, setError] = useState();

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

@@ -33,6 +33,8 @@ require('../../../../context/CaptchaContext/CaptchaContext.cjs');
 require('../../../../utils/hooks/useUserUpdateRequest/useUserUpdateRequest.cjs');
 require('../../../../components/IconButton/IconButton.cjs');
 require('../../../../components/Alert/Alert.cjs');
+require('../../../../components/Popper/Popper/Popper.cjs');
+require('../../../../components/Popper/PopperContext/PopperContext.cjs');
 
 const EmptyWallets = () => (jsxRuntime.jsxs("div", Object.assign({ className: 'empty-wallet__container' }, { children: [jsxRuntime.jsx("div", Object.assign({ className: 'empty-wallet__icon-container' }, { children: jsxRuntime.jsx(Icon.Icon, Object.assign({ color: 'text-primary', size: 'medium' }, { children: jsxRuntime.jsx(addWallet.ReactComponent, {}) })) })), jsxRuntime.jsx("div", Object.assign({ className: 'empty-wallet__text-container' }, { children: jsxRuntime.jsx(Typography.Typography, Object.assign({ variant: 'body_small', color: 'primary' }, { children: "Link additional wallets to see them here." })) }))] })));
 

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

@@ -29,6 +29,8 @@ import '../../../../context/CaptchaContext/CaptchaContext.js';
 import '../../../../utils/hooks/useUserUpdateRequest/useUserUpdateRequest.js';
 import '../../../../components/IconButton/IconButton.js';
 import '../../../../components/Alert/Alert.js';
+import '../../../../components/Popper/Popper/Popper.js';
+import '../../../../components/Popper/PopperContext/PopperContext.js';
 
 const EmptyWallets = () => (jsxs("div", Object.assign({ className: 'empty-wallet__container' }, { children: [jsx("div", Object.assign({ className: 'empty-wallet__icon-container' }, { children: jsx(Icon, Object.assign({ color: 'text-primary', size: 'medium' }, { children: jsx(SvgAddWallet, {}) })) })), jsx("div", Object.assign({ className: 'empty-wallet__text-container' }, { children: jsx(Typography, Object.assign({ variant: 'body_small', color: 'primary' }, { children: "Link additional wallets to see them here." })) }))] })));
 

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

@@ -32,6 +32,8 @@ require('../../../../utils/hooks/useUserUpdateRequest/useUserUpdateRequest.cjs')
 var Button = require('../../../../components/Button/Button.cjs');
 require('../../../../components/IconButton/IconButton.cjs');
 require('../../../../components/Alert/Alert.cjs');
+require('../../../../components/Popper/Popper/Popper.cjs');
+require('../../../../components/Popper/PopperContext/PopperContext.cjs');
 var helpers = require('../../helpers/helpers.cjs');
 
 const SingleWalletButtons = () => {

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

@@ -28,6 +28,8 @@ import '../../../../utils/hooks/useUserUpdateRequest/useUserUpdateRequest.js';
 import { Button } from '../../../../components/Button/Button.js';
 import '../../../../components/IconButton/IconButton.js';
 import '../../../../components/Alert/Alert.js';
+import '../../../../components/Popper/Popper/Popper.js';
+import '../../../../components/Popper/PopperContext/PopperContext.js';
 import { copyToClipboard } from '../../helpers/helpers.js';
 
 const SingleWalletButtons = () => {

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

@@ -36,6 +36,8 @@ require('../../../../context/CaptchaContext/CaptchaContext.cjs');
 require('../../../../utils/hooks/useUserUpdateRequest/useUserUpdateRequest.cjs');
 require('../../../../components/IconButton/IconButton.cjs');
 require('../../../../components/Alert/Alert.cjs');
+require('../../../../components/Popper/Popper/Popper.cjs');
+require('../../../../components/Popper/PopperContext/PopperContext.cjs');
 var DotsMenu = require('../DotsMenu/DotsMenu.cjs');
 var helpers = require('../../helpers/helpers.cjs');
 var WalletIconWithStatus = require('../WalletIconWithStatus/WalletIconWithStatus.cjs');

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

@@ -32,6 +32,8 @@ import '../../../../context/CaptchaContext/CaptchaContext.js';
 import '../../../../utils/hooks/useUserUpdateRequest/useUserUpdateRequest.js';
 import '../../../../components/IconButton/IconButton.js';
 import '../../../../components/Alert/Alert.js';
+import '../../../../components/Popper/Popper/Popper.js';
+import '../../../../components/Popper/PopperContext/PopperContext.js';
 import { DotsMenu } from '../DotsMenu/DotsMenu.js';
 import { copyToClipboard } from '../../helpers/helpers.js';
 import { WalletIconWithStatus } from '../WalletIconWithStatus/WalletIconWithStatus.js';

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

@@ -27,6 +27,8 @@ require('../../../components/Transition/SlideInUpTransition/SlideInUpTransition.
 require('../../../components/Transition/OpacityTransition/OpacityTransition.cjs');
 require('../../../components/IconButton/IconButton.cjs');
 require('../../../components/Alert/Alert.cjs');
+require('../../../components/Popper/Popper/Popper.cjs');
+require('../../../components/Popper/PopperContext/PopperContext.cjs');
 var useKYCFlag = require('../../../utils/hooks/useKYCFlag/useKYCFlag.cjs');
 var useMultiWalletFlag = require('../../../utils/hooks/useMultiWalletFlag/useMultiWalletFlag.cjs');
 require('../../../context/MockContext/MockContext.cjs');

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

@@ -23,6 +23,8 @@ import '../../../components/Transition/SlideInUpTransition/SlideInUpTransition.j
 import '../../../components/Transition/OpacityTransition/OpacityTransition.js';
 import '../../../components/IconButton/IconButton.js';
 import '../../../components/Alert/Alert.js';
+import '../../../components/Popper/Popper/Popper.js';
+import '../../../components/Popper/PopperContext/PopperContext.js';
 import { useKYCFlag } from '../../../utils/hooks/useKYCFlag/useKYCFlag.js';
 import { useMultiWalletFlag } from '../../../utils/hooks/useMultiWalletFlag/useMultiWalletFlag.js';
 import '../../../context/MockContext/MockContext.js';

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

@@ -35,6 +35,8 @@ require('../../../../utils/hooks/useUserUpdateRequest/useUserUpdateRequest.cjs')
 var Button = require('../../../../components/Button/Button.cjs');
 require('../../../../components/IconButton/IconButton.cjs');
 require('../../../../components/Alert/Alert.cjs');
+require('../../../../components/Popper/Popper/Popper.cjs');
+require('../../../../components/Popper/PopperContext/PopperContext.cjs');
 
 const DetectedKnownSecondaryWalletModal = ({ setNewWalletId, }) => {
     const { setMultiWalletWidgetState, primaryWallet, secondaryWallets, setPrimaryWallet, } = useInternalDynamicContext.useInternalDynamicContext();

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

@@ -31,6 +31,8 @@ import '../../../../utils/hooks/useUserUpdateRequest/useUserUpdateRequest.js';
 import { Button } from '../../../../components/Button/Button.js';
 import '../../../../components/IconButton/IconButton.js';
 import '../../../../components/Alert/Alert.js';
+import '../../../../components/Popper/Popper/Popper.js';
+import '../../../../components/Popper/PopperContext/PopperContext.js';
 
 const DetectedKnownSecondaryWalletModal = ({ setNewWalletId, }) => {
     const { setMultiWalletWidgetState, primaryWallet, secondaryWallets, setPrimaryWallet, } = useInternalDynamicContext();

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

@@ -34,6 +34,8 @@ require('../../../../utils/hooks/useUserUpdateRequest/useUserUpdateRequest.cjs')
 var Button = require('../../../../components/Button/Button.cjs');
 require('../../../../components/IconButton/IconButton.cjs');
 require('../../../../components/Alert/Alert.cjs');
+require('../../../../components/Popper/Popper/Popper.cjs');
+require('../../../../components/Popper/PopperContext/PopperContext.cjs');
 
 const DetectedNewWalletModal = () => {
     const { setMultiWalletWidgetState, primaryWallet } = useInternalDynamicContext.useInternalDynamicContext();

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

@@ -30,6 +30,8 @@ import '../../../../utils/hooks/useUserUpdateRequest/useUserUpdateRequest.js';
 import { Button } from '../../../../components/Button/Button.js';
 import '../../../../components/IconButton/IconButton.js';
 import '../../../../components/Alert/Alert.js';
+import '../../../../components/Popper/Popper/Popper.js';
+import '../../../../components/Popper/PopperContext/PopperContext.js';
 
 const DetectedNewWalletModal = () => {
     const { setMultiWalletWidgetState, primaryWallet } = useInternalDynamicContext();

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

@@ -33,6 +33,8 @@ require('../../../../context/CaptchaContext/CaptchaContext.cjs');
 require('../../../../utils/hooks/useUserUpdateRequest/useUserUpdateRequest.cjs');
 require('../../../../components/IconButton/IconButton.cjs');
 require('../../../../components/Alert/Alert.cjs');
+require('../../../../components/Popper/Popper/Popper.cjs');
+require('../../../../components/Popper/PopperContext/PopperContext.cjs');
 var getBrowserIcon = require('../../../../shared/utils/functions/getBrowserIcon/getBrowserIcon.cjs');
 var WalletHelpLink = require('../../../../views/NoQrNotInstalledView/WalletHelpLink.cjs');
 var parseWalletLinks = require('../../../../utils/functions/parseWalletLinks/parseWalletLinks.cjs');

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

@@ -29,6 +29,8 @@ import '../../../../context/CaptchaContext/CaptchaContext.js';
 import '../../../../utils/hooks/useUserUpdateRequest/useUserUpdateRequest.js';
 import '../../../../components/IconButton/IconButton.js';
 import '../../../../components/Alert/Alert.js';
+import '../../../../components/Popper/Popper/Popper.js';
+import '../../../../components/Popper/PopperContext/PopperContext.js';
 import { getBrowserIcon } from '../../../../shared/utils/functions/getBrowserIcon/getBrowserIcon.js';
 import { WalletHelpLink } from '../../../../views/NoQrNotInstalledView/WalletHelpLink.js';
 import { parseWalletLinks } from '../../../../utils/functions/parseWalletLinks/parseWalletLinks.js';

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

@@ -35,6 +35,8 @@ require('../../../../utils/hooks/useUserUpdateRequest/useUserUpdateRequest.cjs')
 require('../../../../components/IconButton/IconButton.cjs');
 require('../../../../components/Alert/Alert.cjs');
 var IconWithSpinner = require('../../../../components/IconWithSpinner/IconWithSpinner.cjs');
+require('../../../../components/Popper/Popper/Popper.cjs');
+require('../../../../components/Popper/PopperContext/PopperContext.cjs');
 var WidgetPortal = require('../../components/WidgetPortal/WidgetPortal.cjs');
 
 const PendingAccountSwitchModal = () => {

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

@@ -31,6 +31,8 @@ import '../../../../utils/hooks/useUserUpdateRequest/useUserUpdateRequest.js';
 import '../../../../components/IconButton/IconButton.js';
 import '../../../../components/Alert/Alert.js';
 import { iconRatio, IconWithSpinner } from '../../../../components/IconWithSpinner/IconWithSpinner.js';
+import '../../../../components/Popper/Popper/Popper.js';
+import '../../../../components/Popper/PopperContext/PopperContext.js';
 import { WidgetPortal } from '../../components/WidgetPortal/WidgetPortal.js';
 
 const PendingAccountSwitchModal = () => {

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

@@ -35,6 +35,8 @@ require('../../../../components/IconButton/IconButton.cjs');
 require('../../../../components/Alert/Alert.cjs');
 var IconWithSpinner = require('../../../../components/IconWithSpinner/IconWithSpinner.cjs');
 var LogoutButton = require('../../../../components/LogoutButton/LogoutButton.cjs');
+require('../../../../components/Popper/Popper/Popper.cjs');
+require('../../../../components/Popper/PopperContext/PopperContext.cjs');
 var WidgetPortal = require('../../components/WidgetPortal/WidgetPortal.cjs');
 
 const PrimaryNotConnectedModal = () => {

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

@@ -31,6 +31,8 @@ import '../../../../components/IconButton/IconButton.js';
 import '../../../../components/Alert/Alert.js';
 import { IconWithSpinner } from '../../../../components/IconWithSpinner/IconWithSpinner.js';
 import { LogoutButton } from '../../../../components/LogoutButton/LogoutButton.js';
+import '../../../../components/Popper/Popper/Popper.js';
+import '../../../../components/Popper/PopperContext/PopperContext.js';
 import { WidgetPortal } from '../../components/WidgetPortal/WidgetPortal.js';
 
 const PrimaryNotConnectedModal = () => {

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

@@ -40,6 +40,8 @@ var CopyButton = require('../../../../components/CopyButton/CopyButton.cjs');
 require('../../../../components/IconButton/IconButton.cjs');
 var TextButton = require('../../../../components/TextButton/TextButton.cjs');
 require('../../../../components/Alert/Alert.cjs');
+require('../../../../components/Popper/Popper/Popper.cjs');
+require('../../../../components/Popper/PopperContext/PopperContext.cjs');
 
 const QrCodeModalView = ({ walletId }) => {
     var _a;

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

@@ -36,6 +36,8 @@ import { CopyButton } from '../../../../components/CopyButton/CopyButton.js';
 import '../../../../components/IconButton/IconButton.js';
 import { TextButton } from '../../../../components/TextButton/TextButton.js';
 import '../../../../components/Alert/Alert.js';
+import '../../../../components/Popper/Popper/Popper.js';
+import '../../../../components/Popper/PopperContext/PopperContext.js';
 
 const QrCodeModalView = ({ walletId }) => {
     var _a;

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

@@ -36,6 +36,8 @@ require('../../../../utils/hooks/useUserUpdateRequest/useUserUpdateRequest.cjs')
 var Button = require('../../../../components/Button/Button.cjs');
 require('../../../../components/IconButton/IconButton.cjs');
 require('../../../../components/Alert/Alert.cjs');
+require('../../../../components/Popper/Popper/Popper.cjs');
+require('../../../../components/Popper/PopperContext/PopperContext.cjs');
 
 const UnlinkWalletPopUp = ({ walletId }) => {
     const { setWalletIdToUnlink } = DynamicWidgetContext.useWidgetContext();

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

@@ -32,6 +32,8 @@ import '../../../../utils/hooks/useUserUpdateRequest/useUserUpdateRequest.js';
 import { Button } from '../../../../components/Button/Button.js';
 import '../../../../components/IconButton/IconButton.js';
 import '../../../../components/Alert/Alert.js';
+import '../../../../components/Popper/Popper/Popper.js';
+import '../../../../components/Popper/PopperContext/PopperContext.js';
 
 const UnlinkWalletPopUp = ({ walletId }) => {
     const { setWalletIdToUnlink } = useWidgetContext();

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

@@ -38,6 +38,8 @@ var useUserUpdateRequest = require('../../../../utils/hooks/useUserUpdateRequest
 var Button = require('../../../../components/Button/Button.cjs');
 require('../../../../components/IconButton/IconButton.cjs');
 require('../../../../components/Alert/Alert.cjs');
+require('../../../../components/Popper/Popper/Popper.cjs');
+require('../../../../components/Popper/PopperContext/PopperContext.cjs');
 var useUserDataForm = require('../../../../utils/hooks/useUserDataForm/useUserDataForm.cjs');
 var index = require('../../../../views/CollectUserDataView/UserDataFields/index.cjs');
 var DynamicWidgetFooter = require('../../components/DynamicWidgetFooter/DynamicWidgetFooter.cjs');

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

@@ -34,6 +34,8 @@ import { useUserUpdateRequestInternal } from '../../../../utils/hooks/useUserUpd
 import { Button } from '../../../../components/Button/Button.js';
 import '../../../../components/IconButton/IconButton.js';
 import '../../../../components/Alert/Alert.js';
+import '../../../../components/Popper/Popper/Popper.js';
+import '../../../../components/Popper/PopperContext/PopperContext.js';
 import { useUserDataForm } from '../../../../utils/hooks/useUserDataForm/useUserDataForm.js';
 import { UserDataFields } from '../../../../views/CollectUserDataView/UserDataFields/index.js';
 import { DynamicWidgetFooter } from '../../components/DynamicWidgetFooter/DynamicWidgetFooter.js';

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

@@ -36,6 +36,8 @@ var Button = require('../../../../components/Button/Button.cjs');
 require('../../../../components/IconButton/IconButton.cjs');
 require('../../../../components/Alert/Alert.cjs');
 var LogoutButton = require('../../../../components/LogoutButton/LogoutButton.cjs');
+require('../../../../components/Popper/Popper/Popper.cjs');
+require('../../../../components/Popper/PopperContext/PopperContext.cjs');
 var DynamicWidgetFooter = require('../../components/DynamicWidgetFooter/DynamicWidgetFooter.cjs');
 var DynamicWidgetWallets = require('../../components/DynamicWidgetWallets/DynamicWidgetWallets.cjs');
 var SingleWalletButtons = require('../../components/SingleWalletButtons/SingleWalletButtons.cjs');