@dynamic-labs/sdk-react-core 0.17.0-RC.9 → 0.17.1

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

@@ -3,13 +3,13 @@
 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');
 require('react');
 var threeDots = require('../../../../shared/assets/three-dots.cjs');
 require('@dynamic-labs/sdk-api');
 require('../../../../shared/logger.cjs');
+require('../../../../config/LSSuffix.cjs');
 require('@dynamic-labs/wallet-connector-core');
 var shortenWalletAddress = require('../../../../shared/utils/functions/shortenWalletAddress/shortenWalletAddress.cjs');
 require('@dynamic-labs/utils');
@@ -32,24 +32,32 @@ require('../../../../components/Transition/OpacityTransition/OpacityTransition.c
 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/IconButton/IconButton.cjs');
-require('../../../../components/Alert/Alert.cjs');
+var shortenEmail = require('../../../../shared/utils/functions/shortenEmail/shortenEmail.cjs');
+require('../../../../components/Popper/Popper/Popper.cjs');
+require('../../../../components/Popper/PopperContext/PopperContext.cjs');
+require('formik');
+require('yup');
 var useFetchNameService = require('../../hooks/useFetchNameService/useFetchNameService.cjs');
+var AuthProviderIcon = require('../../../../components/AuthProviderIcon/AuthProviderIcon.cjs');
 
 const AccountControl = ({ className }) => {
-    const { primaryWallet, user } = useInternalDynamicContext.useInternalDynamicContext();
+    const { primaryWallet, user, authToken } = useInternalDynamicContext.useInternalDynamicContext();
     const { isOpen, setIsOpen } = DynamicWidgetContext.useWidgetContext();
     const address = primaryWallet === null || primaryWallet === void 0 ? void 0 : primaryWallet.address;
     const nameService = useFetchNameService.useFetchNameService(address);
     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: (nameService === null || nameService === void 0 ? void 0 : nameService.name) ||
+        }, className) }, { children: [jsxRuntime.jsx(AuthProviderIcon.AuthProviderIcon, { jwt: authToken, iconSize: 16 }), jsxRuntime.jsx(Typography.Typography, Object.assign({ className: 'account-control__name', as: 'p' }, { children: (nameService === null || nameService === void 0 ? void 0 : nameService.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, {}) }))] })));
+                    shortenEmail.shortenEmail(user === null || user === void 0 ? void 0 : user.email) })), jsxRuntime.jsx(Icon.Icon, Object.assign({ className: 'account-control__icon', color: 'text-primary' }, { children: jsxRuntime.jsx(threeDots.ReactComponent, {}) }))] })));
 };
 
 exports.AccountControl = AccountControl;

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

@@ -1,11 +1,11 @@
 import { jsxs, jsx } from 'react/jsx-runtime';
-import { WalletIcon } from '@dynamic-labs/wallet-book';
 import '@dynamic-labs/iconic';
 import '../../../../context/ViewContext/ViewContext.js';
 import 'react';
 import { ReactComponent as SvgThreeDots } from '../../../../shared/assets/three-dots.js';
 import '@dynamic-labs/sdk-api';
 import '../../../../shared/logger.js';
+import '../../../../config/LSSuffix.js';
 import '@dynamic-labs/wallet-connector-core';
 import { shortenWalletAddress } from '../../../../shared/utils/functions/shortenWalletAddress/shortenWalletAddress.js';
 import '@dynamic-labs/utils';
@@ -28,24 +28,32 @@ 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/IconButton/IconButton.js';
-import '../../../../components/Alert/Alert.js';
+import { shortenEmail } from '../../../../shared/utils/functions/shortenEmail/shortenEmail.js';
+import '../../../../components/Popper/Popper/Popper.js';
+import '../../../../components/Popper/PopperContext/PopperContext.js';
+import 'formik';
+import 'yup';
 import { useFetchNameService } from '../../hooks/useFetchNameService/useFetchNameService.js';
+import { AuthProviderIcon } from '../../../../components/AuthProviderIcon/AuthProviderIcon.js';
 
 const AccountControl = ({ className }) => {
-    const { primaryWallet, user } = useInternalDynamicContext();
+    const { primaryWallet, user, authToken } = useInternalDynamicContext();
     const { isOpen, setIsOpen } = useWidgetContext();
     const address = primaryWallet === null || primaryWallet === void 0 ? void 0 : primaryWallet.address;
     const nameService = useFetchNameService(address);
     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: (nameService === null || nameService === void 0 ? void 0 : nameService.name) ||
+        }, className) }, { children: [jsx(AuthProviderIcon, { jwt: authToken, iconSize: 16 }), jsx(Typography, Object.assign({ className: 'account-control__name', as: 'p' }, { children: (nameService === null || nameService === void 0 ? void 0 : nameService.name) ||
                     shortenWalletAddress(address, 3, 3) ||
-                    (user === null || user === void 0 ? void 0 : user.email) })), jsx(Icon, Object.assign({ color: 'text-primary' }, { children: jsx(SvgThreeDots, {}) }))] })));
+                    shortenEmail(user === null || user === void 0 ? void 0 : user.email) })), jsx(Icon, Object.assign({ className: 'account-control__icon', color: 'text-primary' }, { children: jsx(SvgThreeDots, {}) }))] })));
 };
 
 export { AccountControl };

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

@@ -0,0 +1,80 @@
+'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('../../../../config/LSSuffix.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('formik');
+require('yup');
+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 AuthProviderIcon = require('../../../../components/AuthProviderIcon/AuthProviderIcon.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(AuthProviderIcon.AuthProviderIcon, { 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,76 @@
+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 '../../../../config/LSSuffix.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 'formik';
+import 'yup';
+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 { AuthProviderIcon } from '../../../../components/AuthProviderIcon/AuthProviderIcon.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(AuthProviderIcon, { 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

@@ -7,6 +7,7 @@ require('react');
 var Typography = require('../../../../components/Typography/Typography.cjs');
 require('@dynamic-labs/sdk-api');
 require('../../../../shared/logger.cjs');
+require('../../../../config/LSSuffix.cjs');
 require('@dynamic-labs/iconic');
 require('@dynamic-labs/wallet-connector-core');
 require('../../../../context/ViewContext/ViewContext.cjs');
@@ -26,13 +27,19 @@ require('../../../../components/Transition/OpacityTransition/OpacityTransition.c
 require('../../../../config/ApiEndpoint.cjs');
 require('@dynamic-labs/rpc-providers');
 require('../../../../context/ErrorContext/ErrorContext.cjs');
+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/Alert/Alert.cjs');
+require('../../../../components/Popper/Popper/Popper.cjs');
+require('../../../../components/Popper/PopperContext/PopperContext.cjs');
+require('formik');
+require('yup');
 var helpers = require('../../helpers/helpers.cjs');
 
 const Balance = ({ connector, address, network, className }) => {
@@ -40,7 +47,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.js

@@ -3,6 +3,7 @@ import 'react';
 import { Typography } from '../../../../components/Typography/Typography.js';
 import '@dynamic-labs/sdk-api';
 import '../../../../shared/logger.js';
+import '../../../../config/LSSuffix.js';
 import '@dynamic-labs/iconic';
 import '@dynamic-labs/wallet-connector-core';
 import '../../../../context/ViewContext/ViewContext.js';
@@ -22,13 +23,19 @@ 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 { 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/Alert/Alert.js';
+import '../../../../components/Popper/Popper/Popper.js';
+import '../../../../components/Popper/PopperContext/PopperContext.js';
+import 'formik';
+import 'yup';
 import { roundBalance } from '../../helpers/helpers.js';
 
 const Balance = ({ connector, address, network, className }) => {
@@ -36,7 +43,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,17 @@ 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('../../../../config/LSSuffix.cjs');
 require('@dynamic-labs/iconic');
 require('@dynamic-labs/wallet-connector-core');
 require('../../../../context/ViewContext/ViewContext.cjs');
 var threeDots = require('../../../../shared/assets/three-dots.cjs');
-require('@dynamic-labs/utils');
 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');
@@ -27,42 +29,25 @@ require('../../../../components/Transition/OpacityTransition/OpacityTransition.c
 require('../../../../config/ApiEndpoint.cjs');
 require('@dynamic-labs/rpc-providers');
 require('../../../../context/ErrorContext/ErrorContext.cjs');
+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');
-require('../../../../components/Alert/Alert.cjs');
-var DotsMenuWrapper = require('../DotsMenuWrapper/DotsMenuWrapper.cjs');
+var Popper = require('../../../../components/Popper/Popper/Popper.cjs');
+require('../../../../components/Popper/PopperContext/PopperContext.cjs');
+require('formik');
+require('yup');
 var DotsMenuDropdown = require('../DotsMenuDropdown/DotsMenuDropdown.cjs');
-var DynamicWidgetContext = require('../../context/DynamicWidgetContext.cjs');
 
-const MENU_HEIGHT = 90;
-const DotsMenu = ({ options, title, buttonClassName }) => {
+const DotsMenu = ({ options, title, buttonClassName, buttonClassNameWithOpenMenu, anchorOrigin = utils.isMobile() ? 'bottom-left' : 'top-left', transformOrigin = utils.isMobile() ? 'bottom-right' : 'top-right', }) => {
     const dotsMenuRef = React.useRef(null);
+    const popperContentRef = React.useRef(null);
     const [showMenu, setShowMenu] = React.useState(false);
-    const [alignment, setAlignment] = React.useState('bottom');
-    const { availableWalletsContainerRef } = DynamicWidgetContext.useWidgetContext();
-    const onClose = () => {
-        setShowMenu(false);
-    };
-    const handleOpenClick = (event) => {
-        var _a, _b;
-        event.stopPropagation();
-        const availableWalletsContainerBouding = (_a = availableWalletsContainerRef === null || availableWalletsContainerRef === void 0 ? void 0 : availableWalletsContainerRef.current) === null || _a === void 0 ? void 0 : _a.getBoundingClientRect();
-        const dotsMenuBounding = (_b = dotsMenuRef === null || dotsMenuRef === void 0 ? void 0 : dotsMenuRef.current) === null || _b === void 0 ? void 0 : _b.getBoundingClientRect();
-        if (availableWalletsContainerBouding && dotsMenuBounding) {
-            if (dotsMenuBounding.top + MENU_HEIGHT <
-                availableWalletsContainerBouding.bottom) {
-                setAlignment('bottom');
-            }
-            else if (dotsMenuBounding.top + MENU_HEIGHT >
-                availableWalletsContainerBouding.top) {
-                setAlignment('top');
-            }
-        }
-        setShowMenu(!showMenu);
-    };
-    return (jsxRuntime.jsx(DotsMenuWrapper.DotsMenuWrapper, Object.assign({ onClose: onClose, showMenu: showMenu, title: title, content: jsxRuntime.jsx(DotsMenuDropdown.DotsMenuDropdown, { options: options }), alignment: alignment }, { children: jsxRuntime.jsx(IconButton.IconButton, Object.assign({ ref: dotsMenuRef, onClick: handleOpenClick, "data-testid": 'dotsMenu', className: buttonClassName }, { children: jsxRuntime.jsx(Icon.Icon, Object.assign({ color: 'text-primary' }, { children: jsxRuntime.jsx(threeDots.ReactComponent, {}) })) })) })));
+    index.useOnClickOutside(popperContentRef, () => setShowMenu(false));
+    return (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx(IconButton.IconButton, Object.assign({ ref: dotsMenuRef, onClick: () => setShowMenu(true), "data-testid": 'dotsMenu', className: showMenu ? buttonClassNameWithOpenMenu : buttonClassName }, { children: jsxRuntime.jsx(Icon.Icon, { children: jsxRuntime.jsx(threeDots.ReactComponent, {}) }) })), jsxRuntime.jsx(Popper.Popper, Object.assign({ isOpen: showMenu, setIsOpen: setShowMenu, anchorRef: dotsMenuRef, ref: popperContentRef, anchorOrigin: anchorOrigin, transformOrigin: transformOrigin }, { children: jsxRuntime.jsx(DotsMenuDropdown.DotsMenuDropdown, { options: options, setShowMenu: setShowMenu }) }))] }));
 };
 
 exports.DotsMenu = DotsMenu;

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

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

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

@@ -1,14 +1,16 @@
-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 '../../../../config/LSSuffix.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';
@@ -23,42 +25,25 @@ 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 { 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 '../../../../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 'formik';
+import 'yup';
 import { DotsMenuDropdown } from '../DotsMenuDropdown/DotsMenuDropdown.js';
-import { useWidgetContext } from '../../context/DynamicWidgetContext.js';
 
-const MENU_HEIGHT = 90;
-const DotsMenu = ({ options, title, buttonClassName }) => {
+const DotsMenu = ({ options, title, buttonClassName, buttonClassNameWithOpenMenu, anchorOrigin = isMobile() ? 'bottom-left' : 'top-left', transformOrigin = isMobile() ? 'bottom-right' : 'top-right', }) => {
     const dotsMenuRef = useRef(null);
+    const popperContentRef = useRef(null);
     const [showMenu, setShowMenu] = useState(false);
-    const [alignment, setAlignment] = useState('bottom');
-    const { availableWalletsContainerRef } = useWidgetContext();
-    const onClose = () => {
-        setShowMenu(false);
-    };
-    const handleOpenClick = (event) => {
-        var _a, _b;
-        event.stopPropagation();
-        const availableWalletsContainerBouding = (_a = availableWalletsContainerRef === null || availableWalletsContainerRef === void 0 ? void 0 : availableWalletsContainerRef.current) === null || _a === void 0 ? void 0 : _a.getBoundingClientRect();
-        const dotsMenuBounding = (_b = dotsMenuRef === null || dotsMenuRef === void 0 ? void 0 : dotsMenuRef.current) === null || _b === void 0 ? void 0 : _b.getBoundingClientRect();
-        if (availableWalletsContainerBouding && dotsMenuBounding) {
-            if (dotsMenuBounding.top + MENU_HEIGHT <
-                availableWalletsContainerBouding.bottom) {
-                setAlignment('bottom');
-            }
-            else if (dotsMenuBounding.top + MENU_HEIGHT >
-                availableWalletsContainerBouding.top) {
-                setAlignment('top');
-            }
-        }
-        setShowMenu(!showMenu);
-    };
-    return (jsx(DotsMenuWrapper, Object.assign({ onClose: onClose, showMenu: showMenu, title: title, content: jsx(DotsMenuDropdown, { options: options }), alignment: alignment }, { children: jsx(IconButton, Object.assign({ ref: dotsMenuRef, onClick: handleOpenClick, "data-testid": 'dotsMenu', className: buttonClassName }, { children: jsx(Icon, Object.assign({ color: 'text-primary' }, { children: jsx(SvgThreeDots, {}) })) })) })));
+    useOnClickOutside(popperContentRef, () => setShowMenu(false));
+    return (jsxs(Fragment, { children: [jsx(IconButton, Object.assign({ ref: dotsMenuRef, onClick: () => setShowMenu(true), "data-testid": 'dotsMenu', className: showMenu ? buttonClassNameWithOpenMenu : buttonClassName }, { children: jsx(Icon, { children: jsx(SvgThreeDots, {}) }) })), jsx(Popper, Object.assign({ isOpen: showMenu, setIsOpen: setShowMenu, anchorRef: dotsMenuRef, ref: popperContentRef, anchorOrigin: anchorOrigin, transformOrigin: transformOrigin }, { children: jsx(DotsMenuDropdown, { options: options, setShowMenu: setShowMenu }) }))] }));
 };
 
 export { DotsMenu };

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

@@ -7,13 +7,14 @@ require('react');
 var Typography = require('../../../../components/Typography/Typography.cjs');
 require('@dynamic-labs/sdk-api');
 require('../../../../shared/logger.cjs');
+require('../../../../config/LSSuffix.cjs');
 require('@dynamic-labs/iconic');
 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');
+var index = require('../../../../shared/consts/index.cjs');
 require('../../../../context/DynamicContext/DynamicContext.cjs');
 require('@dynamic-labs/multi-wallet');
 require('../../../../components/ShadowDOM/ShadowDOM.cjs');
@@ -27,14 +28,21 @@ require('../../../../components/Transition/OpacityTransition/OpacityTransition.c
 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/IconButton/IconButton.cjs');
-require('../../../../components/Alert/Alert.cjs');
+require('../../../../components/Popper/Popper/Popper.cjs');
+require('../../../../components/Popper/PopperContext/PopperContext.cjs');
+require('formik');
+require('yup');
 
-const DotsMenuDropdown = ({ options }) => (jsxRuntime.jsx("div", Object.assign({ className: 'dots-menu-dropdown__container' }, { children: options.map((option) => (jsxRuntime.jsxs("div", Object.assign({ className: 'dots-menu-dropdown__item', onClick: () => {
+const DotsMenuDropdown = ({ options, setShowMenu, }) => (jsxRuntime.jsx("div", Object.assign({ className: 'dots-menu-dropdown__container', style: { zIndex: index.tooltipZIndex } }, { children: options.map((option) => (jsxRuntime.jsxs("div", Object.assign({ className: 'dots-menu-dropdown__item', onClick: () => {
             option.callback();
-        } }, { children: [jsxRuntime.jsx(Icon.Icon, Object.assign({ color: 'text-tertiary' }, { children: option.Icon })), jsxRuntime.jsx(Typography.Typography, Object.assign({ color: 'secondary' }, { children: option.text }))] }), option.text))) })));
+            setShowMenu(false);
+        } }, { children: [option.Icon && jsxRuntime.jsx(Icon.Icon, Object.assign({ color: 'text-tertiary' }, { children: option.Icon })), jsxRuntime.jsx(Typography.Typography, Object.assign({ color: 'secondary' }, { children: option.text }))] }), option.text))) })));
 
 exports.DotsMenuDropdown = DotsMenuDropdown;