@dynamic-labs/sdk-react-core 4.6.2 → 4.6.3

package/src/lib/utils/types/ButtonAriaProps.d.ts

@@ -0,0 +1,5 @@
+export type ButtonAriaProps = {
+    ariaLabel?: string;
+    ariaExpanded?: boolean;
+    ariaControls?: string;
+};

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

@@ -4,10 +4,10 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 
 var jsxRuntime = require('react/jsx-runtime');
+var React = require('react');
 require('@dynamic-labs/utils');
 require('../../../../../components/Accordion/components/AccordionItem/AccordionItem.cjs');
 require('../../../../../components/Alert/Alert.cjs');
-require('react');
 require('../../../../../events/dynamicEvents.cjs');
 require('../../../../../../../_virtual/_tslib.cjs');
 require('../../../../../context/DynamicContext/DynamicContext.cjs');
@@ -15,7 +15,7 @@ require('@dynamic-labs/sdk-api-core');
 require('../../../../../shared/logger.cjs');
 require('@dynamic-labs/iconic');
 require('@dynamic-labs/wallet-connector-core');
-var gear = require('../../../../../shared/assets/gear.cjs');
+var arrowDown = require('../../../../../shared/assets/arrow-down.cjs');
 require('../../../../../context/ViewContext/ViewContext.cjs');
 require('@dynamic-labs/wallet-book');
 var shortenWalletAddress = require('../../../../../shared/utils/functions/shortenWalletAddress/shortenWalletAddress.cjs');
@@ -70,14 +70,15 @@ require('../../../../../context/WalletGroupContext/WalletGroupContext.cjs');
 require('../../DynamicWidgetHeader/DynamicWidgetHeader.cjs');
 require('react-focus-lock');
 require('../../../context/DynamicWidgetContext.cjs');
-var DotsMenu = require('../../DotsMenu/DotsMenu.cjs');
+require('../../../../../components/IconButton/IconButton.cjs');
+var Dropdown = require('../../../../../components/MenuList/Dropdown/Dropdown.cjs');
+var DotsMenuDropdown = require('../../DotsMenuDropdown/DotsMenuDropdown.cjs');
+var BaseButton = require('../../../../../components/BaseButton/BaseButton.cjs');
 require('formik');
 require('../../../../../utils/hooks/useSubdomainCheck/useSubdomainCheck.cjs');
-require('../../../../../components/IconButton/IconButton.cjs');
 require('../../../../../store/state/sendBalances.cjs');
 require('../../../../../components/Input/Input.cjs');
 require('../../../../../components/OverlayCard/OverlayCard.cjs');
-require('../../../../../components/MenuList/Dropdown/Dropdown.cjs');
 require('../../../../../views/TransactionConfirmationView/TransactionConfirmationView.cjs');
 var PasskeyContext = require('../../../../../context/PasskeyContext/PasskeyContext.cjs');
 require('../../../views/ManagePasskeysWidgetView/PasskeyCard/PasskeyCard.cjs');
@@ -118,6 +119,16 @@ const ActiveWalletAddress = ({ wallet, nameServiceName, menuOption, fullWidth =
     const { showAlert } = PasskeyContext.usePasskeyContext();
     const header = nameServiceName || getNameIfNoIcon(wallet);
     const { network } = useWalletConnectorNetwork.useWalletConnectorNetwork(wallet === null || wallet === void 0 ? void 0 : wallet.connector);
+    const [showMenu, setShowMenu] = React.useState(false);
+    const handleMenuClose = React.useCallback(() => {
+        setShowMenu(false);
+    }, [setShowMenu]);
+    const handleMenuOpen = React.useCallback(() => {
+        // Use setTimeout here to prevent React 17 from triggering a click event
+        // when the dropdown is rendered.
+        setTimeout(() => setShowMenu(true), 0);
+    }, [setShowMenu]);
+    const iconRef = React.useRef(null);
     const { data: address } = usePromise.usePromise(() => {
         // COSMOS wallet address changes based on which network is selected
         if ((wallet === null || wallet === void 0 ? void 0 : wallet.connector.connectedChain) === 'COSMOS') {
@@ -128,9 +139,10 @@ const ActiveWalletAddress = ({ wallet, nameServiceName, menuOption, fullWidth =
         deps: [wallet, network],
         enabled: Boolean(wallet),
     });
-    return (jsxRuntime.jsxs("div", { className: 'active-wallet-information__address-container', children: [jsxRuntime.jsxs("div", { children: [jsxRuntime.jsx(Typography.Typography, { className: fullWidth
-                            ? 'active-wallet-information__handle--full-width'
-                            : 'active-wallet-information__handle', color: 'primary', variant: 'body_normal', "data-testid": 'header-text', children: header }), jsxRuntime.jsx(Typography.Typography, { className: 'active-wallet-information__address', weight: header ? 'regular' : 'medium', variant: header ? 'body_small' : 'body_normal', color: header ? 'secondary' : 'primary', children: isLoading ? (jsxRuntime.jsx(Skeleton.Skeleton, { className: 'active-wallet-information__address-skeleton' })) : (shortenWalletAddress.shortenWalletAddress(address, 4, 4)) })] }), jsxRuntime.jsx(DotsMenu.DotsMenu, { "data-testid": 'dots-menu', options: menuOption, buttonClassName: 'active-wallet-information__dots-menu', buttonClassNameWithOpenMenu: 'active-wallet-information__dots-menu', iconOverride: showAlert() ? (jsxRuntime.jsx(IconWithStatus.IconWithStatus, { Icon: () => jsxRuntime.jsx(gear.ReactComponent, { width: 16, height: 16 }), variant: 'yellow' })) : (jsxRuntime.jsx(gear.ReactComponent, { width: 16, height: 16 })) })] }));
+    const menuIcon = React.useMemo(() => (jsxRuntime.jsx("div", { ref: iconRef, className: 'active-wallet-information__handle-icon', children: showAlert() ? (jsxRuntime.jsx(IconWithStatus.IconWithStatus, { Icon: () => jsxRuntime.jsx(arrowDown.ReactComponent, { width: 24, height: 24 }), variant: 'yellow' })) : (jsxRuntime.jsx(arrowDown.ReactComponent, { width: 24, height: 24 })) })), [showAlert]);
+    return (jsxRuntime.jsxs("div", { className: 'active-wallet-information__address-container', children: [jsxRuntime.jsxs(BaseButton.BaseButton, { onClick: handleMenuOpen, dataTestId: 'active-wallet-information-button', children: [jsxRuntime.jsxs("div", { className: 'active-wallet-information__handle-row', children: [jsxRuntime.jsx(Typography.Typography, { className: fullWidth
+                                    ? 'active-wallet-information__handle--full-width'
+                                    : 'active-wallet-information__handle', color: 'primary', variant: 'body_normal', "data-testid": 'header-text', children: header }), header && menuIcon] }), jsxRuntime.jsxs("div", { className: 'active-wallet-information__handle-row', children: [jsxRuntime.jsx(Typography.Typography, { className: 'active-wallet-information__address', weight: header ? 'regular' : 'medium', variant: header ? 'body_small' : 'body_normal', color: header ? 'secondary' : 'primary', children: isLoading ? (jsxRuntime.jsx(Skeleton.Skeleton, { className: 'active-wallet-information__address-skeleton' })) : (shortenWalletAddress.shortenWalletAddress(address, 4, 4)) }), !header && menuIcon] })] }), jsxRuntime.jsx(Dropdown.Dropdown, { isOpen: showMenu, onClickOutside: handleMenuClose, onScroll: handleMenuClose, anchorRef: iconRef, anchorOrigin: 'bottom-right', transformOrigin: 'top-left', children: jsxRuntime.jsx(DotsMenuDropdown.DotsMenuDropdown, { options: menuOption, setShowMenu: setShowMenu }) })] }));
 };
 
 exports.ActiveWalletAddress = ActiveWalletAddress;

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

@@ -1,9 +1,9 @@
 'use client'
-import { jsxs, jsx } from 'react/jsx-runtime';
+import { jsx, jsxs } from 'react/jsx-runtime';
+import { useState, useCallback, useRef, useMemo } from 'react';
 import '@dynamic-labs/utils';
 import '../../../../../components/Accordion/components/AccordionItem/AccordionItem.js';
 import '../../../../../components/Alert/Alert.js';
-import 'react';
 import '../../../../../events/dynamicEvents.js';
 import '../../../../../../../_virtual/_tslib.js';
 import '../../../../../context/DynamicContext/DynamicContext.js';
@@ -11,7 +11,7 @@ import '@dynamic-labs/sdk-api-core';
 import '../../../../../shared/logger.js';
 import '@dynamic-labs/iconic';
 import '@dynamic-labs/wallet-connector-core';
-import { ReactComponent as SvgGear } from '../../../../../shared/assets/gear.js';
+import { ReactComponent as SvgArrowDown } from '../../../../../shared/assets/arrow-down.js';
 import '../../../../../context/ViewContext/ViewContext.js';
 import '@dynamic-labs/wallet-book';
 import { shortenWalletAddress } from '../../../../../shared/utils/functions/shortenWalletAddress/shortenWalletAddress.js';
@@ -66,14 +66,15 @@ import '../../../../../context/WalletGroupContext/WalletGroupContext.js';
 import '../../DynamicWidgetHeader/DynamicWidgetHeader.js';
 import 'react-focus-lock';
 import '../../../context/DynamicWidgetContext.js';
-import { DotsMenu } from '../../DotsMenu/DotsMenu.js';
+import '../../../../../components/IconButton/IconButton.js';
+import { Dropdown } from '../../../../../components/MenuList/Dropdown/Dropdown.js';
+import { DotsMenuDropdown } from '../../DotsMenuDropdown/DotsMenuDropdown.js';
+import { BaseButton } from '../../../../../components/BaseButton/BaseButton.js';
 import 'formik';
 import '../../../../../utils/hooks/useSubdomainCheck/useSubdomainCheck.js';
-import '../../../../../components/IconButton/IconButton.js';
 import '../../../../../store/state/sendBalances.js';
 import '../../../../../components/Input/Input.js';
 import '../../../../../components/OverlayCard/OverlayCard.js';
-import '../../../../../components/MenuList/Dropdown/Dropdown.js';
 import '../../../../../views/TransactionConfirmationView/TransactionConfirmationView.js';
 import { usePasskeyContext } from '../../../../../context/PasskeyContext/PasskeyContext.js';
 import '../../../views/ManagePasskeysWidgetView/PasskeyCard/PasskeyCard.js';
@@ -114,6 +115,16 @@ const ActiveWalletAddress = ({ wallet, nameServiceName, menuOption, fullWidth =
     const { showAlert } = usePasskeyContext();
     const header = nameServiceName || getNameIfNoIcon(wallet);
     const { network } = useWalletConnectorNetwork(wallet === null || wallet === void 0 ? void 0 : wallet.connector);
+    const [showMenu, setShowMenu] = useState(false);
+    const handleMenuClose = useCallback(() => {
+        setShowMenu(false);
+    }, [setShowMenu]);
+    const handleMenuOpen = useCallback(() => {
+        // Use setTimeout here to prevent React 17 from triggering a click event
+        // when the dropdown is rendered.
+        setTimeout(() => setShowMenu(true), 0);
+    }, [setShowMenu]);
+    const iconRef = useRef(null);
     const { data: address } = usePromise(() => {
         // COSMOS wallet address changes based on which network is selected
         if ((wallet === null || wallet === void 0 ? void 0 : wallet.connector.connectedChain) === 'COSMOS') {
@@ -124,9 +135,10 @@ const ActiveWalletAddress = ({ wallet, nameServiceName, menuOption, fullWidth =
         deps: [wallet, network],
         enabled: Boolean(wallet),
     });
-    return (jsxs("div", { className: 'active-wallet-information__address-container', children: [jsxs("div", { children: [jsx(Typography, { className: fullWidth
-                            ? 'active-wallet-information__handle--full-width'
-                            : 'active-wallet-information__handle', color: 'primary', variant: 'body_normal', "data-testid": 'header-text', children: header }), jsx(Typography, { className: 'active-wallet-information__address', weight: header ? 'regular' : 'medium', variant: header ? 'body_small' : 'body_normal', color: header ? 'secondary' : 'primary', children: isLoading ? (jsx(Skeleton, { className: 'active-wallet-information__address-skeleton' })) : (shortenWalletAddress(address, 4, 4)) })] }), jsx(DotsMenu, { "data-testid": 'dots-menu', options: menuOption, buttonClassName: 'active-wallet-information__dots-menu', buttonClassNameWithOpenMenu: 'active-wallet-information__dots-menu', iconOverride: showAlert() ? (jsx(IconWithStatus, { Icon: () => jsx(SvgGear, { width: 16, height: 16 }), variant: 'yellow' })) : (jsx(SvgGear, { width: 16, height: 16 })) })] }));
+    const menuIcon = useMemo(() => (jsx("div", { ref: iconRef, className: 'active-wallet-information__handle-icon', children: showAlert() ? (jsx(IconWithStatus, { Icon: () => jsx(SvgArrowDown, { width: 24, height: 24 }), variant: 'yellow' })) : (jsx(SvgArrowDown, { width: 24, height: 24 })) })), [showAlert]);
+    return (jsxs("div", { className: 'active-wallet-information__address-container', children: [jsxs(BaseButton, { onClick: handleMenuOpen, dataTestId: 'active-wallet-information-button', children: [jsxs("div", { className: 'active-wallet-information__handle-row', children: [jsx(Typography, { className: fullWidth
+                                    ? 'active-wallet-information__handle--full-width'
+                                    : 'active-wallet-information__handle', color: 'primary', variant: 'body_normal', "data-testid": 'header-text', children: header }), header && menuIcon] }), jsxs("div", { className: 'active-wallet-information__handle-row', children: [jsx(Typography, { className: 'active-wallet-information__address', weight: header ? 'regular' : 'medium', variant: header ? 'body_small' : 'body_normal', color: header ? 'secondary' : 'primary', children: isLoading ? (jsx(Skeleton, { className: 'active-wallet-information__address-skeleton' })) : (shortenWalletAddress(address, 4, 4)) }), !header && menuIcon] })] }), jsx(Dropdown, { isOpen: showMenu, onClickOutside: handleMenuClose, onScroll: handleMenuClose, anchorRef: iconRef, anchorOrigin: 'bottom-right', transformOrigin: 'top-left', children: jsx(DotsMenuDropdown, { options: menuOption, setShowMenu: setShowMenu }) })] }));
 };
 
 export { ActiveWalletAddress, getNameIfNoIcon };

package/src/lib/shared/assets/gear.cjs

@@ -1,54 +0,0 @@
-'use client'
-'use strict';
-
-Object.defineProperty(exports, '__esModule', { value: true });
-
-var React = require('react');
-
-function _interopNamespace(e) {
-  if (e && e.__esModule) return e;
-  var n = Object.create(null);
-  if (e) {
-    Object.keys(e).forEach(function (k) {
-      if (k !== 'default') {
-        var d = Object.getOwnPropertyDescriptor(e, k);
-        Object.defineProperty(n, k, d.get ? d : {
-          enumerable: true,
-          get: function () { return e[k]; }
-        });
-      }
-    });
-  }
-  n["default"] = e;
-  return Object.freeze(n);
-}
-
-var React__namespace = /*#__PURE__*/_interopNamespace(React);
-
-var _path;
-var _excluded = ["title", "titleId"];
-function _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) { ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } } return n; }, _extends.apply(null, arguments); }
-function _objectWithoutProperties(e, t) { if (null == e) return {}; var o, r, i = _objectWithoutPropertiesLoose(e, t); if (Object.getOwnPropertySymbols) { var s = Object.getOwnPropertySymbols(e); for (r = 0; r < s.length; r++) { o = s[r], t.includes(o) || {}.propertyIsEnumerable.call(e, o) && (i[o] = e[o]); } } return i; }
-function _objectWithoutPropertiesLoose(r, e) { if (null == r) return {}; var t = {}; for (var n in r) { if ({}.hasOwnProperty.call(r, n)) { if (e.includes(n)) continue; t[n] = r[n]; } } return t; }
-var SvgGear = function SvgGear(_ref) {
-  var title = _ref.title,
-    titleId = _ref.titleId,
-    props = _objectWithoutProperties(_ref, _excluded);
-  return /*#__PURE__*/React__namespace.createElement("svg", _extends({
-    width: 24,
-    height: 24,
-    viewBox: "0 0 24 24",
-    fill: "none",
-    xmlns: "http://www.w3.org/2000/svg",
-    "aria-labelledby": titleId
-  }, props), title ? /*#__PURE__*/React__namespace.createElement("title", {
-    id: titleId
-  }, title) : null, _path || (_path = /*#__PURE__*/React__namespace.createElement("path", {
-    fillRule: "evenodd",
-    clipRule: "evenodd",
-    d: "M9.353 4.081c.674-2.775 4.62-2.775 5.294 0a.724.724 0 0 0 1.08.448c2.44-1.486 5.23 1.305 3.744 3.744a.724.724 0 0 0 .448 1.08c2.775.674 2.775 4.62 0 5.294a.724.724 0 0 0-.448 1.08c1.486 2.44-1.305 5.23-3.744 3.744a.724.724 0 0 0-1.08.448c-.674 2.775-4.62 2.775-5.294 0a.724.724 0 0 0-1.08-.448c-2.44 1.486-5.23-1.305-3.744-3.744a.724.724 0 0 0-.448-1.08c-2.775-.674-2.775-4.62 0-5.294a.724.724 0 0 0 .448-1.08c-1.486-2.44 1.305-5.23 3.744-3.744a.724.724 0 0 0 1.08-.448Zm3.35.472c-.178-.737-1.227-.737-1.407 0a2.724 2.724 0 0 1-4.064 1.684c-.648-.395-1.39.347-.995.995.96 1.575.109 3.63-1.684 4.064-.737.18-.737 1.229 0 1.408a2.724 2.724 0 0 1 1.684 4.064c-.395.648.347 1.39.995.995a2.724 2.724 0 0 1 4.064 1.684c.18.737 1.229.737 1.408 0a2.724 2.724 0 0 1 4.064-1.684c.648.395 1.39-.347.995-.995a2.724 2.724 0 0 1 1.684-4.064c.737-.18.737-1.229 0-1.408a2.724 2.724 0 0 1-1.684-4.064c.395-.648-.347-1.39-.995-.995-1.575.96-3.63.109-4.064-1.684ZM12 10a2 2 0 1 0 0 4 2 2 0 0 0 0-4Zm-4 2a4 4 0 1 1 8 0 4 4 0 0 1-8 0Z",
-    fill: "#ABACB2"
-  })));
-};
-
-exports.ReactComponent = SvgGear;

package/src/lib/shared/assets/gear.js

@@ -1,30 +0,0 @@
-'use client'
-import * as React from 'react';
-
-var _path;
-var _excluded = ["title", "titleId"];
-function _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) { ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } } return n; }, _extends.apply(null, arguments); }
-function _objectWithoutProperties(e, t) { if (null == e) return {}; var o, r, i = _objectWithoutPropertiesLoose(e, t); if (Object.getOwnPropertySymbols) { var s = Object.getOwnPropertySymbols(e); for (r = 0; r < s.length; r++) { o = s[r], t.includes(o) || {}.propertyIsEnumerable.call(e, o) && (i[o] = e[o]); } } return i; }
-function _objectWithoutPropertiesLoose(r, e) { if (null == r) return {}; var t = {}; for (var n in r) { if ({}.hasOwnProperty.call(r, n)) { if (e.includes(n)) continue; t[n] = r[n]; } } return t; }
-var SvgGear = function SvgGear(_ref) {
-  var title = _ref.title,
-    titleId = _ref.titleId,
-    props = _objectWithoutProperties(_ref, _excluded);
-  return /*#__PURE__*/React.createElement("svg", _extends({
-    width: 24,
-    height: 24,
-    viewBox: "0 0 24 24",
-    fill: "none",
-    xmlns: "http://www.w3.org/2000/svg",
-    "aria-labelledby": titleId
-  }, props), title ? /*#__PURE__*/React.createElement("title", {
-    id: titleId
-  }, title) : null, _path || (_path = /*#__PURE__*/React.createElement("path", {
-    fillRule: "evenodd",
-    clipRule: "evenodd",
-    d: "M9.353 4.081c.674-2.775 4.62-2.775 5.294 0a.724.724 0 0 0 1.08.448c2.44-1.486 5.23 1.305 3.744 3.744a.724.724 0 0 0 .448 1.08c2.775.674 2.775 4.62 0 5.294a.724.724 0 0 0-.448 1.08c1.486 2.44-1.305 5.23-3.744 3.744a.724.724 0 0 0-1.08.448c-.674 2.775-4.62 2.775-5.294 0a.724.724 0 0 0-1.08-.448c-2.44 1.486-5.23-1.305-3.744-3.744a.724.724 0 0 0-.448-1.08c-2.775-.674-2.775-4.62 0-5.294a.724.724 0 0 0 .448-1.08c-1.486-2.44 1.305-5.23 3.744-3.744a.724.724 0 0 0 1.08-.448Zm3.35.472c-.178-.737-1.227-.737-1.407 0a2.724 2.724 0 0 1-4.064 1.684c-.648-.395-1.39.347-.995.995.96 1.575.109 3.63-1.684 4.064-.737.18-.737 1.229 0 1.408a2.724 2.724 0 0 1 1.684 4.064c-.395.648.347 1.39.995.995a2.724 2.724 0 0 1 4.064 1.684c.18.737 1.229.737 1.408 0a2.724 2.724 0 0 1 4.064-1.684c.648.395 1.39-.347.995-.995a2.724 2.724 0 0 1 1.684-4.064c.737-.18.737-1.229 0-1.408a2.724 2.724 0 0 1-1.684-4.064c.395-.648-.347-1.39-.995-.995-1.575.96-3.63.109-4.064-1.684ZM12 10a2 2 0 1 0 0 4 2 2 0 0 0 0-4Zm-4 2a4 4 0 1 1 8 0 4 4 0 0 1-8 0Z",
-    fill: "#ABACB2"
-  })));
-};
-
-export { SvgGear as ReactComponent };