@dynamic-labs/sdk-react-core 0.16.0

package/src/lib/widgets/DynamicWidget/components/AccountControl/AccountControl.cjs.js

@@ -0,0 +1,52 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var jsxRuntime = require('react/jsx-runtime');
+var walletBook = require('@dynamic-labs/wallet-book');
+require('@dynamic-labs/iconic');
+require('../../../../context/ViewContext/ViewContext.cjs.js');
+require('react');
+var threeDots = require('../../../../shared/assets/three-dots.cjs.js');
+require('@dynamic-labs/sdk-api');
+require('../../../../shared/logger.cjs.js');
+require('@dynamic-labs/multi-wallet');
+var shortenWalletAddress = require('../../../../shared/utils/functions/shortenWalletAddress/shortenWalletAddress.cjs.js');
+require('../../../../utils/constants/colors.cjs.js');
+var DynamicWidgetContext = require('../../context/DynamicWidgetContext.cjs.js');
+var useInternalDynamicContext = require('../../../../context/DynamicContext/useInternalDynamicContext.cjs.js');
+var classNames = require('../../../../utils/functions/classNames/classNames.cjs.js');
+var Typography = require('../../../../components/Typography/Typography.cjs.js');
+require('../../../../shared/consts/index.cjs.js');
+require('../../../../components/ShadowDOM/ShadowDOM.cjs.js');
+require('../../../../context/ThemeContext/ThemeContext.cjs.js');
+var Icon = require('../../../../components/Icon/Icon.cjs.js');
+require('react-dom');
+require('react-focus-lock');
+require('../../../../components/Transition/ZoomTransition/ZoomTransition.cjs.js');
+require('../../../../components/Transition/SlideInUpTransition/SlideInUpTransition.cjs.js');
+require('../../../../components/Transition/OpacityTransition/OpacityTransition.cjs.js');
+require('../../../../config/ApiEndpoint.cjs.js');
+require('../../../../context/ErrorContext/ErrorContext.cjs.js');
+require('ethers');
+require('../../../../context/MockContext/MockContext.cjs.js');
+require('../../../../context/CaptchaContext/CaptchaContext.cjs.js');
+require('../../../../utils/hooks/useUserUpdateRequest/useUserUpdateRequest.cjs.js');
+require('../../../../components/IconButton/IconButton.cjs.js');
+var getWalletVerifiedCredential = require('../../../../utils/functions/getWalletVerifiedCredential/getWalletVerifiedCredential.cjs.js');
+
+const AccountControl = ({ className }) => {
+    var _a;
+    const { primaryWallet, user } = useInternalDynamicContext.useInternalDynamicContext();
+    const { isOpen, setIsOpen } = DynamicWidgetContext.useWidgetContext();
+    const address = primaryWallet === null || primaryWallet === void 0 ? void 0 : primaryWallet.address;
+    const verifiedCredential = getWalletVerifiedCredential.getWalletVerifiedCredential(primaryWallet, user === null || user === void 0 ? void 0 : user.verifiedCredentials);
+    return (jsxRuntime.jsxs("button", Object.assign({ "data-testid": 'AccountControl', onClick: () => setIsOpen(!isOpen), className: classNames.classNames('account-control__container', {
+            'account-control__container--active': isOpen,
+            'account-control__container--multiwallet-disabled': true,
+        }, className) }, { children: [primaryWallet && (jsxRuntime.jsx(Icon.Icon, Object.assign({ size: 'small' }, { children: jsxRuntime.jsx(walletBook.WalletIcon, { walletName: primaryWallet.connector.name }) }))), jsxRuntime.jsx(Typography.Typography, Object.assign({ as: 'p' }, { children: ((_a = verifiedCredential === null || verifiedCredential === void 0 ? void 0 : verifiedCredential.nameService) === null || _a === void 0 ? void 0 : _a.name) ||
+                    shortenWalletAddress.shortenWalletAddress(address, 3, 3) ||
+                    (user === null || user === void 0 ? void 0 : user.email) })), jsxRuntime.jsx(Icon.Icon, Object.assign({ color: 'text-primary' }, { children: jsxRuntime.jsx(threeDots.ReactComponent, {}) }))] })));
+};
+
+exports.AccountControl = AccountControl;

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

@@ -0,0 +1,6 @@
+/// <reference types="react" />
+type Props = {
+    className?: string;
+};
+export declare const AccountControl: ({ className }: Props) => JSX.Element;
+export {};

package/src/lib/widgets/DynamicWidget/components/AccountControl/AccountControl.es.js

@@ -0,0 +1,48 @@
+import { jsxs, jsx } from 'react/jsx-runtime';
+import { WalletIcon } from '@dynamic-labs/wallet-book';
+import '@dynamic-labs/iconic';
+import '../../../../context/ViewContext/ViewContext.es.js';
+import 'react';
+import { ReactComponent as SvgThreeDots } from '../../../../shared/assets/three-dots.es.js';
+import '@dynamic-labs/sdk-api';
+import '../../../../shared/logger.es.js';
+import '@dynamic-labs/multi-wallet';
+import { shortenWalletAddress } from '../../../../shared/utils/functions/shortenWalletAddress/shortenWalletAddress.es.js';
+import '../../../../utils/constants/colors.es.js';
+import { useWidgetContext } from '../../context/DynamicWidgetContext.es.js';
+import { useInternalDynamicContext } from '../../../../context/DynamicContext/useInternalDynamicContext.es.js';
+import { classNames } from '../../../../utils/functions/classNames/classNames.es.js';
+import { Typography } from '../../../../components/Typography/Typography.es.js';
+import '../../../../shared/consts/index.es.js';
+import '../../../../components/ShadowDOM/ShadowDOM.es.js';
+import '../../../../context/ThemeContext/ThemeContext.es.js';
+import { Icon } from '../../../../components/Icon/Icon.es.js';
+import 'react-dom';
+import 'react-focus-lock';
+import '../../../../components/Transition/ZoomTransition/ZoomTransition.es.js';
+import '../../../../components/Transition/SlideInUpTransition/SlideInUpTransition.es.js';
+import '../../../../components/Transition/OpacityTransition/OpacityTransition.es.js';
+import '../../../../config/ApiEndpoint.es.js';
+import '../../../../context/ErrorContext/ErrorContext.es.js';
+import 'ethers';
+import '../../../../context/MockContext/MockContext.es.js';
+import '../../../../context/CaptchaContext/CaptchaContext.es.js';
+import '../../../../utils/hooks/useUserUpdateRequest/useUserUpdateRequest.es.js';
+import '../../../../components/IconButton/IconButton.es.js';
+import { getWalletVerifiedCredential } from '../../../../utils/functions/getWalletVerifiedCredential/getWalletVerifiedCredential.es.js';
+
+const AccountControl = ({ className }) => {
+    var _a;
+    const { primaryWallet, user } = useInternalDynamicContext();
+    const { isOpen, setIsOpen } = useWidgetContext();
+    const address = primaryWallet === null || primaryWallet === void 0 ? void 0 : primaryWallet.address;
+    const verifiedCredential = getWalletVerifiedCredential(primaryWallet, user === null || user === void 0 ? void 0 : user.verifiedCredentials);
+    return (jsxs("button", Object.assign({ "data-testid": 'AccountControl', onClick: () => setIsOpen(!isOpen), className: classNames('account-control__container', {
+            'account-control__container--active': isOpen,
+            'account-control__container--multiwallet-disabled': true,
+        }, className) }, { children: [primaryWallet && (jsx(Icon, Object.assign({ size: 'small' }, { children: jsx(WalletIcon, { walletName: primaryWallet.connector.name }) }))), jsx(Typography, Object.assign({ as: 'p' }, { children: ((_a = verifiedCredential === null || verifiedCredential === void 0 ? void 0 : verifiedCredential.nameService) === null || _a === void 0 ? void 0 : _a.name) ||
+                    shortenWalletAddress(address, 3, 3) ||
+                    (user === null || user === void 0 ? void 0 : user.email) })), jsx(Icon, Object.assign({ color: 'text-primary' }, { children: jsx(SvgThreeDots, {}) }))] })));
+};
+
+export { AccountControl };

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

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

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

@@ -0,0 +1,42 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var jsxRuntime = require('react/jsx-runtime');
+require('react');
+var Typography = require('../../../../components/Typography/Typography.cjs.js');
+require('@dynamic-labs/sdk-api');
+require('../../../../shared/logger.cjs.js');
+require('@dynamic-labs/iconic');
+require('@dynamic-labs/multi-wallet');
+require('../../../../context/ViewContext/ViewContext.cjs.js');
+require('../../../../utils/constants/colors.cjs.js');
+require('../../../../shared/consts/index.cjs.js');
+require('../../../../context/DynamicContext/DynamicContext.cjs.js');
+require('../../../../components/ShadowDOM/ShadowDOM.cjs.js');
+require('../../../../context/ThemeContext/ThemeContext.cjs.js');
+require('react-dom');
+require('react-focus-lock');
+require('../../../../components/Transition/ZoomTransition/ZoomTransition.cjs.js');
+require('../../../../components/Transition/SlideInUpTransition/SlideInUpTransition.cjs.js');
+require('../../../../components/Transition/OpacityTransition/OpacityTransition.cjs.js');
+require('../../../../config/ApiEndpoint.cjs.js');
+require('../../../../context/ErrorContext/ErrorContext.cjs.js');
+require('ethers');
+var useFetchBalance = require('../../hooks/useFetchBalance/useFetchBalance.cjs.js');
+var useFetchCurrency = require('../../hooks/useFetchCurrency/useFetchCurrency.cjs.js');
+require('../../../../context/MockContext/MockContext.cjs.js');
+require('../../../../context/CaptchaContext/CaptchaContext.cjs.js');
+require('../../../../utils/hooks/useUserUpdateRequest/useUserUpdateRequest.cjs.js');
+require('../../../../components/IconButton/IconButton.cjs.js');
+var helpers = require('../../helpers/helpers.cjs.js');
+
+const Balance = ({ connector, address, network, className }) => {
+    const [chain] = useFetchCurrency.useFetchCurrency(connector, network);
+    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 }))] })));
+};
+
+exports.Balance = Balance;

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

@@ -0,0 +1,10 @@
+/// <reference types="react" />
+import { WalletConnector } from '../../../../..';
+type Props = {
+    address: string;
+    className?: string;
+    connector: WalletConnector;
+    network: number | undefined;
+};
+export declare const Balance: ({ connector, address, network, className }: Props) => JSX.Element | null;
+export {};

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

@@ -0,0 +1,38 @@
+import { jsxs, jsx } from 'react/jsx-runtime';
+import 'react';
+import { Typography } from '../../../../components/Typography/Typography.es.js';
+import '@dynamic-labs/sdk-api';
+import '../../../../shared/logger.es.js';
+import '@dynamic-labs/iconic';
+import '@dynamic-labs/multi-wallet';
+import '../../../../context/ViewContext/ViewContext.es.js';
+import '../../../../utils/constants/colors.es.js';
+import '../../../../shared/consts/index.es.js';
+import '../../../../context/DynamicContext/DynamicContext.es.js';
+import '../../../../components/ShadowDOM/ShadowDOM.es.js';
+import '../../../../context/ThemeContext/ThemeContext.es.js';
+import 'react-dom';
+import 'react-focus-lock';
+import '../../../../components/Transition/ZoomTransition/ZoomTransition.es.js';
+import '../../../../components/Transition/SlideInUpTransition/SlideInUpTransition.es.js';
+import '../../../../components/Transition/OpacityTransition/OpacityTransition.es.js';
+import '../../../../config/ApiEndpoint.es.js';
+import '../../../../context/ErrorContext/ErrorContext.es.js';
+import 'ethers';
+import { useFetchBalance } from '../../hooks/useFetchBalance/useFetchBalance.es.js';
+import { useFetchCurrency } from '../../hooks/useFetchCurrency/useFetchCurrency.es.js';
+import '../../../../context/MockContext/MockContext.es.js';
+import '../../../../context/CaptchaContext/CaptchaContext.es.js';
+import '../../../../utils/hooks/useUserUpdateRequest/useUserUpdateRequest.es.js';
+import '../../../../components/IconButton/IconButton.es.js';
+import { roundBalance } from '../../helpers/helpers.es.js';
+
+const Balance = ({ connector, address, network, className }) => {
+    const [chain] = useFetchCurrency(connector, network);
+    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 }))] })));
+};
+
+export { Balance };

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

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

package/src/lib/widgets/DynamicWidget/components/DefaultPendingSignModalContent/DefaultPendingSignModalContent.cjs.js

@@ -0,0 +1,43 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var jsxRuntime = require('react/jsx-runtime');
+var multiWallet = require('@dynamic-labs/multi-wallet');
+var walletBook = require('@dynamic-labs/wallet-book');
+require('react');
+var Typography = require('../../../../components/Typography/Typography.cjs.js');
+require('@dynamic-labs/sdk-api');
+require('../../../../shared/logger.cjs.js');
+require('@dynamic-labs/iconic');
+require('../../../../context/ViewContext/ViewContext.cjs.js');
+require('../../../../utils/constants/colors.cjs.js');
+require('../../../../shared/consts/index.cjs.js');
+require('../../../../context/DynamicContext/DynamicContext.cjs.js');
+var pixelToRem = require('../../../../utils/functions/pixelToRem/pixelToRem.cjs.js');
+require('../../../../components/ShadowDOM/ShadowDOM.cjs.js');
+require('../../../../context/ThemeContext/ThemeContext.cjs.js');
+require('react-dom');
+require('react-focus-lock');
+require('../../../../components/Transition/ZoomTransition/ZoomTransition.cjs.js');
+require('../../../../components/Transition/SlideInUpTransition/SlideInUpTransition.cjs.js');
+require('../../../../components/Transition/OpacityTransition/OpacityTransition.cjs.js');
+require('../../../../config/ApiEndpoint.cjs.js');
+require('../../../../context/ErrorContext/ErrorContext.cjs.js');
+require('ethers');
+require('../../../../context/MockContext/MockContext.cjs.js');
+require('../../../../context/CaptchaContext/CaptchaContext.cjs.js');
+require('../../../../utils/hooks/useUserUpdateRequest/useUserUpdateRequest.cjs.js');
+var Button = require('../../../../components/Button/Button.cjs.js');
+require('../../../../components/IconButton/IconButton.cjs.js');
+var IconWithSpinner = require('../../../../components/IconWithSpinner/IconWithSpinner.cjs.js');
+var helpers = require('../../helpers/helpers.cjs.js');
+
+const DefaultPendingSignModalContent = ({ walletConnector, onClickToSign }) => {
+    const { name = '' } = walletConnector || {};
+    const iconSize = 80;
+    const icon = (jsxRuntime.jsx(walletBook.WalletIcon, { walletName: name, style: { height: pixelToRem.pixelToRem(iconSize), width: pixelToRem.pixelToRem(iconSize) } }));
+    return (jsxRuntime.jsxs("div", Object.assign({ className: 'default-pending-sign-modal-content__container' }, { children: [jsxRuntime.jsx(IconWithSpinner.IconWithSpinner, { iconSize: 80, Icon: icon, isSpinning: true }), name && (jsxRuntime.jsxs(Typography.Typography, Object.assign({ color: 'primary', className: 'default-pending-sign-modal-content__title', variant: 'body_normal', weight: 'medium' }, { children: ["Sign in with ", helpers.capitalize(name)] }))), jsxRuntime.jsx(Typography.Typography, Object.assign({ color: 'secondary', variant: 'body_small', weight: 'medium' }, { children: "Sign the message in your wallet to approve linking this wallet to your account" })), multiWallet.isMobile() && !(walletConnector === null || walletConnector === void 0 ? void 0 : walletConnector.canConnectViaCustodialService) && (jsxRuntime.jsx(Button.Button, Object.assign({ onClick: onClickToSign }, { children: "Click to Sign" })))] })));
+};
+
+exports.DefaultPendingSignModalContent = DefaultPendingSignModalContent;

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

@@ -0,0 +1,2 @@
+import { DefaultPendingSignModalContentComponent } from './DefaultPendingSignModalContent.types';
+export declare const DefaultPendingSignModalContent: DefaultPendingSignModalContentComponent;

package/src/lib/widgets/DynamicWidget/components/DefaultPendingSignModalContent/DefaultPendingSignModalContent.es.js

@@ -0,0 +1,39 @@
+import { jsx, jsxs } from 'react/jsx-runtime';
+import { isMobile } from '@dynamic-labs/multi-wallet';
+import { WalletIcon } from '@dynamic-labs/wallet-book';
+import 'react';
+import { Typography } from '../../../../components/Typography/Typography.es.js';
+import '@dynamic-labs/sdk-api';
+import '../../../../shared/logger.es.js';
+import '@dynamic-labs/iconic';
+import '../../../../context/ViewContext/ViewContext.es.js';
+import '../../../../utils/constants/colors.es.js';
+import '../../../../shared/consts/index.es.js';
+import '../../../../context/DynamicContext/DynamicContext.es.js';
+import { pixelToRem } from '../../../../utils/functions/pixelToRem/pixelToRem.es.js';
+import '../../../../components/ShadowDOM/ShadowDOM.es.js';
+import '../../../../context/ThemeContext/ThemeContext.es.js';
+import 'react-dom';
+import 'react-focus-lock';
+import '../../../../components/Transition/ZoomTransition/ZoomTransition.es.js';
+import '../../../../components/Transition/SlideInUpTransition/SlideInUpTransition.es.js';
+import '../../../../components/Transition/OpacityTransition/OpacityTransition.es.js';
+import '../../../../config/ApiEndpoint.es.js';
+import '../../../../context/ErrorContext/ErrorContext.es.js';
+import 'ethers';
+import '../../../../context/MockContext/MockContext.es.js';
+import '../../../../context/CaptchaContext/CaptchaContext.es.js';
+import '../../../../utils/hooks/useUserUpdateRequest/useUserUpdateRequest.es.js';
+import { Button } from '../../../../components/Button/Button.es.js';
+import '../../../../components/IconButton/IconButton.es.js';
+import { IconWithSpinner } from '../../../../components/IconWithSpinner/IconWithSpinner.es.js';
+import { capitalize } from '../../helpers/helpers.es.js';
+
+const DefaultPendingSignModalContent = ({ walletConnector, onClickToSign }) => {
+    const { name = '' } = walletConnector || {};
+    const iconSize = 80;
+    const icon = (jsx(WalletIcon, { walletName: name, style: { height: pixelToRem(iconSize), width: pixelToRem(iconSize) } }));
+    return (jsxs("div", Object.assign({ className: 'default-pending-sign-modal-content__container' }, { children: [jsx(IconWithSpinner, { iconSize: 80, Icon: icon, isSpinning: true }), name && (jsxs(Typography, Object.assign({ color: 'primary', className: 'default-pending-sign-modal-content__title', variant: 'body_normal', weight: 'medium' }, { children: ["Sign in with ", capitalize(name)] }))), jsx(Typography, Object.assign({ color: 'secondary', variant: 'body_small', weight: 'medium' }, { children: "Sign the message in your wallet to approve linking this wallet to your account" })), isMobile() && !(walletConnector === null || walletConnector === void 0 ? void 0 : walletConnector.canConnectViaCustodialService) && (jsx(Button, Object.assign({ onClick: onClickToSign }, { children: "Click to Sign" })))] })));
+};
+
+export { DefaultPendingSignModalContent };

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

@@ -0,0 +1,7 @@
+import { FC } from 'react';
+import { WalletConnector } from '@dynamic-labs/wallet-connector-core';
+export type DefaultPendingSignModalContentProps = {
+    onClickToSign: () => void;
+    walletConnector: WalletConnector | null;
+};
+export type DefaultPendingSignModalContentComponent = FC<DefaultPendingSignModalContentProps>;

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

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

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

@@ -0,0 +1,64 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var jsxRuntime = require('react/jsx-runtime');
+var React = require('react');
+require('@dynamic-labs/sdk-api');
+require('../../../../shared/logger.cjs.js');
+require('@dynamic-labs/iconic');
+require('@dynamic-labs/multi-wallet');
+require('../../../../context/ViewContext/ViewContext.cjs.js');
+var threeDots = require('../../../../shared/assets/three-dots.cjs.js');
+require('../../../../utils/constants/colors.cjs.js');
+require('../../../../shared/consts/index.cjs.js');
+require('../../../../context/DynamicContext/DynamicContext.cjs.js');
+require('../../../../components/ShadowDOM/ShadowDOM.cjs.js');
+require('../../../../context/ThemeContext/ThemeContext.cjs.js');
+var Icon = require('../../../../components/Icon/Icon.cjs.js');
+require('react-dom');
+require('react-focus-lock');
+require('../../../../components/Transition/ZoomTransition/ZoomTransition.cjs.js');
+require('../../../../components/Transition/SlideInUpTransition/SlideInUpTransition.cjs.js');
+require('../../../../components/Transition/OpacityTransition/OpacityTransition.cjs.js');
+require('../../../../config/ApiEndpoint.cjs.js');
+require('../../../../context/ErrorContext/ErrorContext.cjs.js');
+require('ethers');
+require('../../../../context/MockContext/MockContext.cjs.js');
+require('../../../../context/CaptchaContext/CaptchaContext.cjs.js');
+require('../../../../utils/hooks/useUserUpdateRequest/useUserUpdateRequest.cjs.js');
+var IconButton = require('../../../../components/IconButton/IconButton.cjs.js');
+var DotsMenuWrapper = require('../DotsMenuWrapper/DotsMenuWrapper.cjs.js');
+var DotsMenuDropdown = require('../DotsMenuDropdown/DotsMenuDropdown.cjs.js');
+var DynamicWidgetContext = require('../../context/DynamicWidgetContext.cjs.js');
+
+const MENU_HEIGHT = 90;
+const DotsMenu = ({ options, title, buttonClassName }) => {
+    const dotsMenuRef = 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, {}) })) })) })));
+};
+
+exports.DotsMenu = DotsMenu;

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

@@ -0,0 +1,13 @@
+import { ReactNode, ReactElement } from 'react';
+export type DotsMenuOption = {
+    Icon: ReactElement;
+    callback: VoidFunction;
+    text: string;
+};
+type Props = {
+    buttonClassName?: string;
+    options: DotsMenuOption[];
+    title?: ReactNode;
+};
+export declare const DotsMenu: ({ options, title, buttonClassName }: Props) => JSX.Element;
+export {};

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

@@ -0,0 +1,60 @@
+import { jsx } from 'react/jsx-runtime';
+import { useRef, useState } from 'react';
+import '@dynamic-labs/sdk-api';
+import '../../../../shared/logger.es.js';
+import '@dynamic-labs/iconic';
+import '@dynamic-labs/multi-wallet';
+import '../../../../context/ViewContext/ViewContext.es.js';
+import { ReactComponent as SvgThreeDots } from '../../../../shared/assets/three-dots.es.js';
+import '../../../../utils/constants/colors.es.js';
+import '../../../../shared/consts/index.es.js';
+import '../../../../context/DynamicContext/DynamicContext.es.js';
+import '../../../../components/ShadowDOM/ShadowDOM.es.js';
+import '../../../../context/ThemeContext/ThemeContext.es.js';
+import { Icon } from '../../../../components/Icon/Icon.es.js';
+import 'react-dom';
+import 'react-focus-lock';
+import '../../../../components/Transition/ZoomTransition/ZoomTransition.es.js';
+import '../../../../components/Transition/SlideInUpTransition/SlideInUpTransition.es.js';
+import '../../../../components/Transition/OpacityTransition/OpacityTransition.es.js';
+import '../../../../config/ApiEndpoint.es.js';
+import '../../../../context/ErrorContext/ErrorContext.es.js';
+import 'ethers';
+import '../../../../context/MockContext/MockContext.es.js';
+import '../../../../context/CaptchaContext/CaptchaContext.es.js';
+import '../../../../utils/hooks/useUserUpdateRequest/useUserUpdateRequest.es.js';
+import { IconButton } from '../../../../components/IconButton/IconButton.es.js';
+import { DotsMenuWrapper } from '../DotsMenuWrapper/DotsMenuWrapper.es.js';
+import { DotsMenuDropdown } from '../DotsMenuDropdown/DotsMenuDropdown.es.js';
+import { useWidgetContext } from '../../context/DynamicWidgetContext.es.js';
+
+const MENU_HEIGHT = 90;
+const DotsMenu = ({ options, title, buttonClassName }) => {
+    const dotsMenuRef = 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, {}) })) })) })));
+};
+
+export { DotsMenu };

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

@@ -0,0 +1,2 @@
+export { DotsMenu } from './DotsMenu';
+export type { DotsMenuOption } from './DotsMenu';

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

@@ -0,0 +1,36 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var jsxRuntime = require('react/jsx-runtime');
+require('react');
+var Typography = require('../../../../components/Typography/Typography.cjs.js');
+require('@dynamic-labs/sdk-api');
+require('../../../../shared/logger.cjs.js');
+require('@dynamic-labs/iconic');
+require('@dynamic-labs/multi-wallet');
+require('../../../../context/ViewContext/ViewContext.cjs.js');
+require('../../../../utils/constants/colors.cjs.js');
+require('../../../../shared/consts/index.cjs.js');
+require('../../../../context/DynamicContext/DynamicContext.cjs.js');
+require('../../../../components/ShadowDOM/ShadowDOM.cjs.js');
+require('../../../../context/ThemeContext/ThemeContext.cjs.js');
+var Icon = require('../../../../components/Icon/Icon.cjs.js');
+require('react-dom');
+require('react-focus-lock');
+require('../../../../components/Transition/ZoomTransition/ZoomTransition.cjs.js');
+require('../../../../components/Transition/SlideInUpTransition/SlideInUpTransition.cjs.js');
+require('../../../../components/Transition/OpacityTransition/OpacityTransition.cjs.js');
+require('../../../../config/ApiEndpoint.cjs.js');
+require('../../../../context/ErrorContext/ErrorContext.cjs.js');
+require('ethers');
+require('../../../../context/MockContext/MockContext.cjs.js');
+require('../../../../context/CaptchaContext/CaptchaContext.cjs.js');
+require('../../../../utils/hooks/useUserUpdateRequest/useUserUpdateRequest.cjs.js');
+require('../../../../components/IconButton/IconButton.cjs.js');
+
+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: () => {
+            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))) })));
+
+exports.DotsMenuDropdown = DotsMenuDropdown;

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

@@ -0,0 +1,2 @@
+import { DotsMenuDropdownComponent } from './DotsMenuDropdown.types';
+export declare const DotsMenuDropdown: DotsMenuDropdownComponent;

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

@@ -0,0 +1,32 @@
+import { jsx, jsxs } from 'react/jsx-runtime';
+import 'react';
+import { Typography } from '../../../../components/Typography/Typography.es.js';
+import '@dynamic-labs/sdk-api';
+import '../../../../shared/logger.es.js';
+import '@dynamic-labs/iconic';
+import '@dynamic-labs/multi-wallet';
+import '../../../../context/ViewContext/ViewContext.es.js';
+import '../../../../utils/constants/colors.es.js';
+import '../../../../shared/consts/index.es.js';
+import '../../../../context/DynamicContext/DynamicContext.es.js';
+import '../../../../components/ShadowDOM/ShadowDOM.es.js';
+import '../../../../context/ThemeContext/ThemeContext.es.js';
+import { Icon } from '../../../../components/Icon/Icon.es.js';
+import 'react-dom';
+import 'react-focus-lock';
+import '../../../../components/Transition/ZoomTransition/ZoomTransition.es.js';
+import '../../../../components/Transition/SlideInUpTransition/SlideInUpTransition.es.js';
+import '../../../../components/Transition/OpacityTransition/OpacityTransition.es.js';
+import '../../../../config/ApiEndpoint.es.js';
+import '../../../../context/ErrorContext/ErrorContext.es.js';
+import 'ethers';
+import '../../../../context/MockContext/MockContext.es.js';
+import '../../../../context/CaptchaContext/CaptchaContext.es.js';
+import '../../../../utils/hooks/useUserUpdateRequest/useUserUpdateRequest.es.js';
+import '../../../../components/IconButton/IconButton.es.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: () => {
+            option.callback();
+        } }, { children: [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

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

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

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

package/src/lib/widgets/DynamicWidget/components/DotsMenuWrapper/DotsMenuWrapper.cjs.js

@@ -0,0 +1,64 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var jsxRuntime = require('react/jsx-runtime');
+var React = require('react');
+var multiWallet = require('@dynamic-labs/multi-wallet');
+require('@dynamic-labs/sdk-api');
+require('../../../../shared/logger.cjs.js');
+require('@dynamic-labs/iconic');
+require('../../../../context/ViewContext/ViewContext.cjs.js');
+var close = require('../../../../shared/assets/close.cjs.js');
+require('../../../../utils/constants/colors.cjs.js');
+var index = require('../../../../shared/utils/hooks/useOnClickOutside/index.cjs.js');
+require('../../../../shared/consts/index.cjs.js');
+var useTransition = require('../../../../utils/hooks/useTransition/useTransition.cjs.js');
+var classNames = require('../../../../utils/functions/classNames/classNames.cjs.js');
+var Typography = require('../../../../components/Typography/Typography.cjs.js');
+require('../../../../context/DynamicContext/DynamicContext.cjs.js');
+require('../../../../components/ShadowDOM/ShadowDOM.cjs.js');
+require('../../../../context/ThemeContext/ThemeContext.cjs.js');
+require('react-dom');
+require('react-focus-lock');
+require('../../../../components/Transition/ZoomTransition/ZoomTransition.cjs.js');
+require('../../../../components/Transition/SlideInUpTransition/SlideInUpTransition.cjs.js');
+require('../../../../components/Transition/OpacityTransition/OpacityTransition.cjs.js');
+require('../../../../config/ApiEndpoint.cjs.js');
+require('../../../../context/ErrorContext/ErrorContext.cjs.js');
+require('ethers');
+require('../../../../context/MockContext/MockContext.cjs.js');
+require('../../../../context/CaptchaContext/CaptchaContext.cjs.js');
+require('../../../../utils/hooks/useUserUpdateRequest/useUserUpdateRequest.cjs.js');
+var IconButton = require('../../../../components/IconButton/IconButton.cjs.js');
+
+const DotsMenuWrapper = ({ children, onClose, content, showMenu, title, alignment = 'bottom', }) => {
+    const ref = React.useRef(null);
+    const closeOnOutsideClick = React.useCallback((event) => {
+        event.stopPropagation();
+        onClose();
+    }, [onClose]);
+    const handleOnClose = React.useCallback((event) => {
+        event.stopPropagation();
+        onClose();
+    }, [onClose]);
+    index.useOnClickOutside(ref, closeOnOutsideClick);
+    const { mount, stage, currentDuration } = useTransition.useTransition({
+        inDuration: multiWallet.isMobile() ? 300 : 100,
+        isShown: showMenu,
+        outDuration: multiWallet.isMobile() ? 400 : 100,
+    });
+    const alignmentClassName = classNames.classNames({
+        'dots-menu-wrapper__container__alignment__bottom': alignment === 'bottom',
+        'dots-menu-wrapper__container__alignment__top': alignment === 'top',
+    });
+    const menuAnimationClassName = classNames.classNames('dots-menu-wrapper__container', alignmentClassName, {
+        'dots-menu-wrapper__container--entering': stage === 'ENTERING',
+        'dots-menu-wrapper__container--exiting': stage === 'EXITING',
+    });
+    return (jsxRuntime.jsxs("div", Object.assign({ className: 'dots-menu-wrapper', ref: ref }, { children: [children, showMenu && (jsxRuntime.jsx("div", { className: 'dots-menu-wrapper__backdrop', onClick: handleOnClose, "data-testid": 'dots-menu-wrapper__backdrop' })), mount && (jsxRuntime.jsxs("div", Object.assign({ className: menuAnimationClassName, onClick: handleOnClose, style: {
+                    animationDuration: `${currentDuration}ms`,
+                } }, { children: [jsxRuntime.jsxs("div", Object.assign({ className: 'dots-menu-wrapper__header' }, { children: [jsxRuntime.jsx("div", { className: 'dots-menu-wrapper__header__icon' }), jsxRuntime.jsx(Typography.Typography, Object.assign({ variant: 'body_normal', color: 'primary' }, { children: title })), jsxRuntime.jsx("div", Object.assign({ className: 'dots-menu-wrapper__header__icon' }, { children: jsxRuntime.jsx(IconButton.IconButton, Object.assign({ "data-testid": 'close-icon-button', onClick: handleOnClose }, { children: jsxRuntime.jsx(close.ReactComponent, {}) })) }))] })), content] })))] })));
+};
+
+exports.DotsMenuWrapper = DotsMenuWrapper;