@arcblock/ux 2.7.3 → 2.7.5

package/es/Address/responsive-did-address.js

@@ -1,6 +1,6 @@
-import { useState, createRef, useEffect } from 'react';
+import { useState, createRef, useEffect, useRef } from 'react';
 import PropTypes from 'prop-types';
-import useMeasure from 'react-use/lib/useMeasure';
+import { useSize } from 'ahooks';
 import { styled } from '../Theme';
 import DidAddress from './did-address';
 
@@ -24,9 +24,9 @@ export default function ResponsiveDidAddress({
   const [compact, setCompact] = useState(false);
   // did address 完整显示时的宽度
   const [addressFullWidth, setAddressFullWidth] = useState(null);
-  const [containerRef, {
-    width: containerWidth
-  }] = useMeasure();
+  const containerRef = useRef(null);
+  const size = useSize(containerRef);
+  const containerWidth = size?.width || 0;
   const ref = /*#__PURE__*/createRef();
   // 存储完整显示时 address 组件的宽度
   useEffect(() => {

package/es/ClickToCopy/index.js

@@ -1,5 +1,5 @@
 import PropTypes from 'prop-types';
-import useWindowSize from 'react-use/lib/useWindowSize';
+import { useSize } from 'ahooks';
 import Tooltip from '@mui/material/Tooltip';
 import useCopy from './hook';
 import Toast, { ToastProvider } from '../Toast';
@@ -31,9 +31,8 @@ export default function ClickToCopy(props) {
   });
   const _tip = tip || texts.copy;
   const _copiedTip = copiedTip || texts.copied;
-  const {
-    width
-  } = useWindowSize();
+  const size = useSize(document.body);
+  const width = size?.width || 0;
   const onCopy = e => {
     copy(e);
     if (width < 600) {

package/es/Layout/dashboard-legacy/index.js

@@ -4,7 +4,7 @@ import Helmet from 'react-helmet';
 import Container from '@mui/material/Container';
 import Box from '@mui/material/Box';
 import Drawer from '@mui/material/Drawer';
-import useWindowSize from 'react-use/lib/useWindowSize';
+import { useSize } from 'ahooks';
 import Sidebar from './sidebar';
 import Header from './header';
 import Footer from '../../Footer';
@@ -58,9 +58,8 @@ export default function Dashboard({
   ...rest
 }) {
   const breakpoint = 960;
-  const {
-    width
-  } = useWindowSize();
+  const size = useSize(document.body);
+  const width = size?.width || 0;
   const [drawerMode, setDrawerMode] = useState(width >= breakpoint ? 'permanent' : 'temporary');
   const [drawerOpen, setDrawerOpen] = useState(drawerMode === 'permanent');
   useEffect(() => {

package/es/Locale/selector.js

@@ -81,6 +81,8 @@ export default function LocaleSelector(props) {
     children: [/*#__PURE__*/_jsx(ButtonComponent, {
       ref: anchorEl,
       className: "trigger",
+      role: "button",
+      "aria-label": "Locale selector button",
       children: /*#__PURE__*/_jsxs(Box, {
         display: "flex",
         alignItems: "center",

package/es/SessionManager/index.js

@@ -139,7 +139,8 @@ function SessionManager({
         }],
         variant: "outlined",
         onClick: _onLogin,
-        "aria-label": "login button",
+        role: "button",
+        "aria-label": "Login button",
         ...rest,
         "data-cy": "sessionManager-login",
         children: [isFirstLoading ? /*#__PURE__*/_jsx(CircularProgress, {}) : /*#__PURE__*/_jsx(AccountIcon, {}), /*#__PURE__*/_jsx("span", {
@@ -154,6 +155,8 @@ function SessionManager({
         onClick: _onLogin,
         "data-cy": "sessionManager-login",
         size: "medium",
+        role: "button",
+        "aria-label": "Login button",
         children: isFirstLoading ? /*#__PURE__*/_jsx(CircularProgress, {
           style: {
             width: size - 4,
@@ -248,6 +251,8 @@ function SessionManager({
       ...rest,
       "data-cy": "sessionManager-logout-popup",
       size: "medium",
+      role: "button",
+      "aria-label": "User info button",
       style: {
         lineHeight: 1
       },
@@ -271,6 +276,8 @@ function SessionManager({
           className: "session-manager-user",
           children: [/*#__PURE__*/_jsxs("div", {
             className: "session-manager-user-name",
+            role: "button",
+            "aria-label": "User info panel",
             children: [/*#__PURE__*/_jsx("span", {
               children: session.user.fullName
             }), !!showRole && (currentRole?.title || session.user?.role.toUpperCase()) && /*#__PURE__*/_jsx(Chip, {
@@ -288,6 +295,7 @@ function SessionManager({
             })]
           }), /*#__PURE__*/_jsxs("div", {
             className: "session-manager-id-list",
+            "aria-label": "User DID list",
             children: [walletDid && /*#__PURE__*/_jsx("div", {
               className: "session-manager-id-item",
               children: /*#__PURE__*/_jsx(DidAddress, {
@@ -319,6 +327,7 @@ function SessionManager({
             href: masterSiteInfo.appUrl,
             underline: "hover",
             target: "_blank",
+            "aria-label": "Open federated master site url",
             children: masterSiteInfo.appName
           })]
         }), Array.isArray(menu) && menu.map((menuItem, index) => {
@@ -346,6 +355,7 @@ function SessionManager({
           className: "session-manager-menu-item",
           "data-cy": "sessionManager-openInWallet",
           href: "https://www.abtwallet.io/",
+          "aria-label": translation.openInWallet,
           target: "_blank",
           children: [/*#__PURE__*/_jsx(SvgIcon, {
             component: OpenInIcon,
@@ -354,6 +364,7 @@ function SessionManager({
         }), !!switchDid && /*#__PURE__*/_jsxs(MenuItem, {
           className: "session-manager-menu-item",
           onClick: _onSwitchDid,
+          "aria-label": translation.switchDid,
           "data-cy": "sessionManager-switch-trigger",
           children: [/*#__PURE__*/_jsx(SvgIcon, {
             component: SwitchDidIcon,
@@ -362,6 +373,7 @@ function SessionManager({
         }), !!switchProfile && hasBindWallet && session.provider !== 'federated' && /*#__PURE__*/_jsxs(MenuItem, {
           className: "session-manager-menu-item",
           onClick: _onSwitchProfile,
+          "aria-label": translation.switchProfile,
           "data-cy": "sessionManager-switch-profile-trigger",
           children: [/*#__PURE__*/_jsx(SvgIcon, {
             component: SwitchProfileIcon,
@@ -370,6 +382,7 @@ function SessionManager({
         }), !!switchPassport && /*#__PURE__*/_jsxs(MenuItem, {
           className: "session-manager-menu-item",
           onClick: _onSwitchPassport,
+          "aria-label": translation.switchPassport,
           "data-cy": "sessionManager-switch-passport-trigger",
           children: [/*#__PURE__*/_jsx(SvgIcon, {
             component: SwitchPassportIcon,
@@ -378,6 +391,7 @@ function SessionManager({
         }), oauthConfigList.length > 0 && !hasBindAccount && session.provider !== 'federated' && /*#__PURE__*/_jsxs(MenuItem, {
           className: "session-manager-menu-item",
           onClick: _onBindWallet,
+          "aria-label": !isRawWalletAccount ? `${translation.bind}DID Wallet` : `${translation.bind}${translation.thirdParty}`,
           "data-cy": "sessionManager-bind-trigger",
           children: [/*#__PURE__*/_jsx(SvgIcon, {
             component: BindWalletIcon,
@@ -387,6 +401,7 @@ function SessionManager({
           className: "session-manager-menu-item",
           onClick: _onLogout,
           disabled: disableLogout,
+          "aria-label": "Logout account",
           "data-cy": "sessionManager-logout-trigger",
           children: [/*#__PURE__*/_jsx(SvgIcon, {
             component: DisconnectIcon,

package/es/Toast/index.js

@@ -28,7 +28,7 @@ let info = noop;
  */
 const genFn = (enqueueSnackbar, variant) => (message, opts = {}) => {
   enqueueSnackbar(message, {
-    autoHideDuration: 3000,
+    autoHideDuration: 5000,
     variant,
     ...opts
   });
@@ -83,7 +83,9 @@ export default {
   /**
    * @type {EnqueueSnackbarFunc}
    */
-  error: (message, options = {}, ...args) => error(message, options, ...args),
+  error: (message, options = {
+    autoHideDuration: 15000
+  }, ...args) => error(message, options, ...args),
   /**
    * @type {EnqueueSnackbarFunc}
    */

package/es/WebWalletSWKeeper/index.js

@@ -1,7 +1,7 @@
 import { useEffect, useRef } from 'react';
 import PropTypes from 'prop-types';
 import useIdle from 'react-use/lib/useIdle';
-import useLocalStorage from 'react-use/lib/useLocalStorage';
+import { useLocalStorageState } from 'ahooks';
 import useBrowser from '@arcblock/react-hooks/lib/useBrowser';
 import { detectWalletExtension } from '@arcblock/ux/lib/Util';
 import { getWebWalletUrl, checkSameProtocol } from '../Util/wallet';
@@ -93,7 +93,9 @@ export const withWebWalletSWKeeper = Component => {
     const browser = useBrowser();
     // eslint-disable-next-line no-param-reassign
     webWalletUrl = webWalletUrl || getWebWalletUrl();
-    const [disabled] = useLocalStorage(STORAGE_KEY_DISABLED, 1);
+    const [disabled] = useLocalStorageState(STORAGE_KEY_DISABLED, {
+      defaultValue: 1
+    });
     const extension = detectWalletExtension();
     const isSameProtocol = checkSameProtocol(webWalletUrl);
     const isWalletWebview = browser.wallet;

package/es/withTracker/index.js

@@ -1,8 +1,7 @@
 /* eslint-disable import/no-unresolved */
 import ReactGA from 'react-ga';
 import * as Sentry from '@sentry/browser';
-import useDeepCompareEffect from 'react-use/lib/useDeepCompareEffect';
-import useMount from 'react-use/lib/useMount';
+import { useMount, useDeepCompareEffect } from 'ahooks';
 import { useLocation } from 'react-router-dom';
 import ErrorBoundary from './error_boundary';
 import { jsx as _jsx } from "react/jsx-runtime";

package/lib/Address/responsive-did-address.js

@@ -6,7 +6,7 @@ Object.defineProperty(exports, "__esModule", {
 exports.default = ResponsiveDidAddress;
 var _react = require("react");
 var _propTypes = _interopRequireDefault(require("prop-types"));
-var _useMeasure = _interopRequireDefault(require("react-use/lib/useMeasure"));
+var _ahooks = require("ahooks");
 var _Theme = require("../Theme");
 var _didAddress = _interopRequireDefault(require("./did-address"));
 var _jsxRuntime = require("react/jsx-runtime");
@@ -41,9 +41,9 @@ function ResponsiveDidAddress(_ref) {
   const [compact, setCompact] = (0, _react.useState)(false);
   // did address 完整显示时的宽度
   const [addressFullWidth, setAddressFullWidth] = (0, _react.useState)(null);
-  const [containerRef, {
-    width: containerWidth
-  }] = (0, _useMeasure.default)();
+  const containerRef = (0, _react.useRef)(null);
+  const size = (0, _ahooks.useSize)(containerRef);
+  const containerWidth = (size === null || size === void 0 ? void 0 : size.width) || 0;
   const ref = /*#__PURE__*/(0, _react.createRef)();
   // 存储完整显示时 address 组件的宽度
   (0, _react.useEffect)(() => {

package/lib/ClickToCopy/index.js

@@ -11,7 +11,7 @@ Object.defineProperty(exports, "CopyButton", {
 });
 exports.default = ClickToCopy;
 var _propTypes = _interopRequireDefault(require("prop-types"));
-var _useWindowSize = _interopRequireDefault(require("react-use/lib/useWindowSize"));
+var _ahooks = require("ahooks");
 var _Tooltip = _interopRequireDefault(require("@mui/material/Tooltip"));
 var _hook = _interopRequireDefault(require("./hook"));
 var _Toast = _interopRequireWildcard(require("../Toast"));
@@ -56,9 +56,8 @@ function ClickToCopy(props) {
   });
   const _tip = tip || texts.copy;
   const _copiedTip = copiedTip || texts.copied;
-  const {
-    width
-  } = (0, _useWindowSize.default)();
+  const size = (0, _ahooks.useSize)(document.body);
+  const width = (size === null || size === void 0 ? void 0 : size.width) || 0;
   const onCopy = e => {
     copy(e);
     if (width < 600) {

package/lib/Layout/dashboard-legacy/index.js

@@ -10,7 +10,7 @@ var _reactHelmet = _interopRequireDefault(require("react-helmet"));
 var _Container = _interopRequireDefault(require("@mui/material/Container"));
 var _Box = _interopRequireDefault(require("@mui/material/Box"));
 var _Drawer = _interopRequireDefault(require("@mui/material/Drawer"));
-var _useWindowSize = _interopRequireDefault(require("react-use/lib/useWindowSize"));
+var _ahooks = require("ahooks");
 var _sidebar = _interopRequireDefault(require("./sidebar"));
 var _header = _interopRequireDefault(require("./header"));
 var _Footer = _interopRequireDefault(require("../../Footer"));
@@ -47,9 +47,8 @@ function Dashboard(_ref) {
     } = _ref,
     rest = _objectWithoutProperties(_ref, _excluded);
   const breakpoint = 960;
-  const {
-    width
-  } = (0, _useWindowSize.default)();
+  const size = (0, _ahooks.useSize)(document.body);
+  const width = (size === null || size === void 0 ? void 0 : size.width) || 0;
   const [drawerMode, setDrawerMode] = (0, _react.useState)(width >= breakpoint ? 'permanent' : 'temporary');
   const [drawerOpen, setDrawerOpen] = (0, _react.useState)(drawerMode === 'permanent');
   (0, _react.useEffect)(() => {

package/lib/Locale/selector.js

@@ -98,6 +98,8 @@ function LocaleSelector(props) {
     children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(ButtonComponent, {
       ref: anchorEl,
       className: "trigger",
+      role: "button",
+      "aria-label": "Locale selector button",
       children: /*#__PURE__*/(0, _jsxRuntime.jsxs)(_Box.default, {
         display: "flex",
         alignItems: "center",

package/lib/SessionManager/index.js

@@ -164,7 +164,8 @@ function SessionManager(_ref) {
         }],
         variant: "outlined",
         onClick: _onLogin,
-        "aria-label": "login button"
+        role: "button",
+        "aria-label": "Login button"
       }, rest), {}, {
         "data-cy": "sessionManager-login",
         children: [isFirstLoading ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_CircularProgress.default, {}) : /*#__PURE__*/(0, _jsxRuntime.jsx)(_Account.default, {}), /*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
@@ -179,6 +180,8 @@ function SessionManager(_ref) {
         onClick: _onLogin,
         "data-cy": "sessionManager-login",
         size: "medium",
+        role: "button",
+        "aria-label": "Login button",
         children: isFirstLoading ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_CircularProgress.default, {
           style: {
             width: size - 4,
@@ -276,6 +279,8 @@ function SessionManager(_ref) {
     }, rest), {}, {
       "data-cy": "sessionManager-logout-popup",
       size: "medium",
+      role: "button",
+      "aria-label": "User info button",
       style: {
         lineHeight: 1
       },
@@ -299,6 +304,8 @@ function SessionManager(_ref) {
           className: "session-manager-user",
           children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
             className: "session-manager-user-name",
+            role: "button",
+            "aria-label": "User info panel",
             children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
               children: session.user.fullName
             }), !!showRole && ((currentRole === null || currentRole === void 0 ? void 0 : currentRole.title) || ((_session$user3 = session.user) === null || _session$user3 === void 0 ? void 0 : _session$user3.role.toUpperCase())) && /*#__PURE__*/(0, _jsxRuntime.jsx)(_Chip.default, {
@@ -316,6 +323,7 @@ function SessionManager(_ref) {
             })]
           }), /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
             className: "session-manager-id-list",
+            "aria-label": "User DID list",
             children: [walletDid && /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
               className: "session-manager-id-item",
               children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_Address.default, {
@@ -347,6 +355,7 @@ function SessionManager(_ref) {
             href: masterSiteInfo.appUrl,
             underline: "hover",
             target: "_blank",
+            "aria-label": "Open federated master site url",
             children: masterSiteInfo.appName
           })]
         }), Array.isArray(menu) && menu.map((menuItem, index) => {
@@ -375,6 +384,7 @@ function SessionManager(_ref) {
           className: "session-manager-menu-item",
           "data-cy": "sessionManager-openInWallet",
           href: "https://www.abtwallet.io/",
+          "aria-label": translation.openInWallet,
           target: "_blank",
           children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_SvgIcon.default, {
             component: _OpenIn.default,
@@ -383,6 +393,7 @@ function SessionManager(_ref) {
         }), !!switchDid && /*#__PURE__*/(0, _jsxRuntime.jsxs)(_MenuItem.default, {
           className: "session-manager-menu-item",
           onClick: _onSwitchDid,
+          "aria-label": translation.switchDid,
           "data-cy": "sessionManager-switch-trigger",
           children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_SvgIcon.default, {
             component: _Switch.default,
@@ -391,6 +402,7 @@ function SessionManager(_ref) {
         }), !!switchProfile && hasBindWallet && session.provider !== 'federated' && /*#__PURE__*/(0, _jsxRuntime.jsxs)(_MenuItem.default, {
           className: "session-manager-menu-item",
           onClick: _onSwitchProfile,
+          "aria-label": translation.switchProfile,
           "data-cy": "sessionManager-switch-profile-trigger",
           children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_SvgIcon.default, {
             component: _PersonOutline.default,
@@ -399,6 +411,7 @@ function SessionManager(_ref) {
         }), !!switchPassport && /*#__PURE__*/(0, _jsxRuntime.jsxs)(_MenuItem.default, {
           className: "session-manager-menu-item",
           onClick: _onSwitchPassport,
+          "aria-label": translation.switchPassport,
           "data-cy": "sessionManager-switch-passport-trigger",
           children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_SvgIcon.default, {
             component: _VpnKeyOutlined.default,
@@ -407,6 +420,7 @@ function SessionManager(_ref) {
         }), oauthConfigList.length > 0 && !hasBindAccount && session.provider !== 'federated' && /*#__PURE__*/(0, _jsxRuntime.jsxs)(_MenuItem.default, {
           className: "session-manager-menu-item",
           onClick: _onBindWallet,
+          "aria-label": !isRawWalletAccount ? "".concat(translation.bind, "DID Wallet") : "".concat(translation.bind).concat(translation.thirdParty),
           "data-cy": "sessionManager-bind-trigger",
           children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_SvgIcon.default, {
             component: _Link2.default,
@@ -416,6 +430,7 @@ function SessionManager(_ref) {
           className: "session-manager-menu-item",
           onClick: _onLogout,
           disabled: disableLogout,
+          "aria-label": "Logout account",
           "data-cy": "sessionManager-logout-trigger",
           children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_SvgIcon.default, {
             component: _Disconnect.default,

package/lib/Toast/index.js

@@ -37,7 +37,7 @@ let _info = noop;
 const genFn = (enqueueSnackbar, variant) => function (message) {
   let opts = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};
   enqueueSnackbar(message, _objectSpread({
-    autoHideDuration: 3000,
+    autoHideDuration: 5000,
     variant
   }, opts));
 };
@@ -98,7 +98,9 @@ var _default = {
    * @type {EnqueueSnackbarFunc}
    */
   error: function error(message) {
-    let options = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};
+    let options = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {
+      autoHideDuration: 15000
+    };
     for (var _len2 = arguments.length, args = new Array(_len2 > 2 ? _len2 - 2 : 0), _key2 = 2; _key2 < _len2; _key2++) {
       args[_key2 - 2] = arguments[_key2];
     }

package/lib/WebWalletSWKeeper/index.js

@@ -7,7 +7,7 @@ exports.withWebWalletSWKeeper = exports.default = void 0;
 var _react = require("react");
 var _propTypes = _interopRequireDefault(require("prop-types"));
 var _useIdle = _interopRequireDefault(require("react-use/lib/useIdle"));
-var _useLocalStorage = _interopRequireDefault(require("react-use/lib/useLocalStorage"));
+var _ahooks = require("ahooks");
 var _useBrowser = _interopRequireDefault(require("@arcblock/react-hooks/lib/useBrowser"));
 var _Util = require("@arcblock/ux/lib/Util");
 var _wallet = require("../Util/wallet");
@@ -107,7 +107,9 @@ const withWebWalletSWKeeper = Component => {
     const browser = (0, _useBrowser.default)();
     // eslint-disable-next-line no-param-reassign
     webWalletUrl = webWalletUrl || (0, _wallet.getWebWalletUrl)();
-    const [disabled] = (0, _useLocalStorage.default)(STORAGE_KEY_DISABLED, 1);
+    const [disabled] = (0, _ahooks.useLocalStorageState)(STORAGE_KEY_DISABLED, {
+      defaultValue: 1
+    });
     const extension = (0, _Util.detectWalletExtension)();
     const isSameProtocol = (0, _wallet.checkSameProtocol)(webWalletUrl);
     const isWalletWebview = browser.wallet;

package/lib/withTracker/index.js

@@ -6,8 +6,7 @@ Object.defineProperty(exports, "__esModule", {
 exports.default = void 0;
 var _reactGa = _interopRequireDefault(require("react-ga"));
 var Sentry = _interopRequireWildcard(require("@sentry/browser"));
-var _useDeepCompareEffect = _interopRequireDefault(require("react-use/lib/useDeepCompareEffect"));
-var _useMount = _interopRequireDefault(require("react-use/lib/useMount"));
+var _ahooks = require("ahooks");
 var _reactRouterDom = require("react-router-dom");
 var _error_boundary = _interopRequireDefault(require("./error_boundary"));
 var _jsxRuntime = require("react/jsx-runtime");
@@ -49,10 +48,10 @@ var _default = function _default(WrappedComponent) {
   };
   return function TrackedComponent(props) {
     const location = (0, _reactRouterDom.useLocation)();
-    (0, _useMount.default)(() => {
+    (0, _ahooks.useMount)(() => {
       trackPage(location.pathname);
     });
-    (0, _useDeepCompareEffect.default)(() => {
+    (0, _ahooks.useDeepCompareEffect)(() => {
       trackPage(location.pathname);
     }, [location.pathname]);
     if (process.env.NODE_ENV === 'production') {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@arcblock/ux",
-  "version": "2.7.3",
+  "version": "2.7.5",
   "description": "Common used react components for arcblock products",
   "keywords": [
     "react",
@@ -314,11 +314,11 @@
   "peerDependencies": {
     "react": ">=18.1.0"
   },
-  "gitHead": "4479178bab7b830cd29fb1e263c67a56a12c23f8",
+  "gitHead": "5821ccc5b51c313ef45426587eb2357ffe951834",
   "dependencies": {
     "@arcblock/did-motif": "^1.1.13",
-    "@arcblock/icons": "^2.7.3",
-    "@arcblock/react-hooks": "^2.7.3",
+    "@arcblock/icons": "^2.7.5",
+    "@arcblock/react-hooks": "^2.7.5",
     "@babel/plugin-syntax-dynamic-import": "^7.8.3",
     "@emotion/react": "^11.10.4",
     "@emotion/styled": "^11.10.4",
@@ -328,6 +328,7 @@
     "@mui/material": "^5.10.8",
     "@solana/qr-code-styling": "^1.6.0-beta.0",
     "@testing-library/react": "^14.0.0",
+    "ahooks": "^3.7.8",
     "axios": "^0.27.2",
     "base64-url": "^2.3.3",
     "copy-to-clipboard": "^3.3.2",

package/src/Address/responsive-did-address.jsx

@@ -1,6 +1,6 @@
-import { useState, createRef, useEffect } from 'react';
+import { useState, createRef, useEffect, useRef } from 'react';
 import PropTypes from 'prop-types';
-import useMeasure from 'react-use/lib/useMeasure';
+import { useSize } from 'ahooks';
 import { styled } from '../Theme';
 
 import DidAddress from './did-address';
@@ -19,7 +19,9 @@ export default function ResponsiveDidAddress({ style, className, component, ...r
   const [compact, setCompact] = useState(false);
   // did address 完整显示时的宽度
   const [addressFullWidth, setAddressFullWidth] = useState(null);
-  const [containerRef, { width: containerWidth }] = useMeasure();
+  const containerRef = useRef(null);
+  const size = useSize(containerRef);
+  const containerWidth = size?.width || 0;
   const ref = createRef();
   // 存储完整显示时 address 组件的宽度
   useEffect(() => {

package/src/ClickToCopy/index.js

@@ -1,5 +1,5 @@
 import PropTypes from 'prop-types';
-import useWindowSize from 'react-use/lib/useWindowSize';
+import { useSize } from 'ahooks';
 import Tooltip from '@mui/material/Tooltip';
 
 import useCopy from './hook';
@@ -16,7 +16,8 @@ export default function ClickToCopy(props) {
   const _tip = tip || texts.copy;
   const _copiedTip = copiedTip || texts.copied;
 
-  const { width } = useWindowSize();
+  const size = useSize(document.body);
+  const width = size?.width || 0;
 
   const onCopy = (e) => {
     copy(e);

package/src/Layout/dashboard-legacy/index.js

@@ -4,7 +4,7 @@ import Helmet from 'react-helmet';
 import Container from '@mui/material/Container';
 import Box from '@mui/material/Box';
 import Drawer from '@mui/material/Drawer';
-import useWindowSize from 'react-use/lib/useWindowSize';
+import { useSize } from 'ahooks';
 
 import Sidebar from './sidebar';
 import Header from './header';
@@ -59,7 +59,8 @@ export default function Dashboard({
   ...rest
 }) {
   const breakpoint = 960;
-  const { width } = useWindowSize();
+  const size = useSize(document.body);
+  const width = size?.width || 0;
   const [drawerMode, setDrawerMode] = useState(width >= breakpoint ? 'permanent' : 'temporary');
   const [drawerOpen, setDrawerOpen] = useState(drawerMode === 'permanent');
 

package/src/Locale/selector.js

@@ -68,7 +68,7 @@ export default function LocaleSelector(props) {
 
   return (
     <Div component="div" dark={dark} theme={theme} {...rest} {...handleEventProps}>
-      <ButtonComponent ref={anchorEl} className="trigger">
+      <ButtonComponent ref={anchorEl} className="trigger" role="button" aria-label="Locale selector button">
         <Box display="flex" alignItems="center">
           {renderIcon}
 

package/src/SessionManager/index.jsx

@@ -135,14 +135,22 @@ function SessionManager({
             sx={[{ borderRadius: '100vw' }, dark && { color: '#fff', borderColor: '#fff' }]}
             variant="outlined"
             onClick={_onLogin}
-            aria-label="login button"
+            role="button"
+            aria-label="Login button"
             {...rest}
             data-cy="sessionManager-login">
             {isFirstLoading ? <CircularProgress /> : <AccountIcon />}
             <span style={{ lineHeight: '25px' }}>{translation.connect}</span>
           </Button>
         ) : (
-          <IconButton ref={userAnchorRef} {...rest} onClick={_onLogin} data-cy="sessionManager-login" size="medium">
+          <IconButton
+            ref={userAnchorRef}
+            {...rest}
+            onClick={_onLogin}
+            data-cy="sessionManager-login"
+            size="medium"
+            role="button"
+            aria-label="Login button">
             {isFirstLoading ? (
               <CircularProgress style={{ width: size - 4, height: size - 4, color: dark ? '#fff' : '' }} />
             ) : (
@@ -232,6 +240,8 @@ function SessionManager({
         {...rest}
         data-cy="sessionManager-logout-popup"
         size="medium"
+        role="button"
+        aria-label="User info button"
         style={{ lineHeight: 1 }}>
         <DidAvatar variant="circle" did={session.user.did} src={avatar} size={size} shape="circle" />
       </IconButton>
@@ -239,7 +249,7 @@ function SessionManager({
       <UserPopper open={userOpen} onClose={onCloseUser} anchorEl={userAnchorRef.current} dark={dark}>
         <MenuList sx={{ p: 0 }}>
           <div className="session-manager-user">
-            <div className="session-manager-user-name">
+            <div className="session-manager-user-name" role="button" aria-label="User info panel">
               <span>{session.user.fullName}</span>
               {!!showRole && (currentRole?.title || session.user?.role.toUpperCase()) && (
                 <Chip
@@ -251,7 +261,7 @@ function SessionManager({
                 />
               )}
             </div>
-            <div className="session-manager-id-list">
+            <div className="session-manager-id-list" aria-label="User DID list">
               {walletDid && (
                 <div className="session-manager-id-item">
                   <DidAddress responsive={false}>{walletDid}</DidAddress>
@@ -273,7 +283,12 @@ function SessionManager({
             <MenuItem className="session-manager-menu-item" data-cy="sessionManager-connectWithFederated">
               <SvgIcon component={ConnectWithoutContactIcon} className="session-manager-menu-icon" />
               {translation.connectedWith}
-              <Link ml={1} href={masterSiteInfo.appUrl} underline="hover" target="_blank">
+              <Link
+                ml={1}
+                href={masterSiteInfo.appUrl}
+                underline="hover"
+                target="_blank"
+                aria-label="Open federated master site url">
                 {masterSiteInfo.appName}
               </Link>
             </MenuItem>
@@ -309,6 +324,7 @@ function SessionManager({
               className="session-manager-menu-item"
               data-cy="sessionManager-openInWallet"
               href="https://www.abtwallet.io/"
+              aria-label={translation.openInWallet}
               target="_blank">
               <SvgIcon component={OpenInIcon} className="session-manager-menu-icon" />
               {translation.openInWallet}
@@ -318,6 +334,7 @@ function SessionManager({
             <MenuItem
               className="session-manager-menu-item"
               onClick={_onSwitchDid}
+              aria-label={translation.switchDid}
               data-cy="sessionManager-switch-trigger">
               <SvgIcon component={SwitchDidIcon} className="session-manager-menu-icon" />
               {translation.switchDid}
@@ -328,6 +345,7 @@ function SessionManager({
             <MenuItem
               className="session-manager-menu-item"
               onClick={_onSwitchProfile}
+              aria-label={translation.switchProfile}
               data-cy="sessionManager-switch-profile-trigger">
               <SvgIcon component={SwitchProfileIcon} className="session-manager-menu-icon" />
               {translation.switchProfile}
@@ -337,6 +355,7 @@ function SessionManager({
             <MenuItem
               className="session-manager-menu-item"
               onClick={_onSwitchPassport}
+              aria-label={translation.switchPassport}
               data-cy="sessionManager-switch-passport-trigger">
               <SvgIcon component={SwitchPassportIcon} className="session-manager-menu-icon" />
               {translation.switchPassport}
@@ -346,6 +365,9 @@ function SessionManager({
             <MenuItem
               className="session-manager-menu-item"
               onClick={_onBindWallet}
+              aria-label={
+                !isRawWalletAccount ? `${translation.bind}DID Wallet` : `${translation.bind}${translation.thirdParty}`
+              }
               data-cy="sessionManager-bind-trigger">
               <SvgIcon component={BindWalletIcon} className="session-manager-menu-icon" />
               {!isRawWalletAccount ? `${translation.bind}DID Wallet` : `${translation.bind}${translation.thirdParty}`}
@@ -356,6 +378,7 @@ function SessionManager({
             className="session-manager-menu-item"
             onClick={_onLogout}
             disabled={disableLogout}
+            aria-label="Logout account"
             data-cy="sessionManager-logout-trigger">
             <SvgIcon component={DisconnectIcon} className="session-manager-menu-icon" />
             {translation.disconnect}

package/src/Toast/index.js

@@ -29,7 +29,7 @@ const genFn =
   (enqueueSnackbar, variant) =>
   (message, opts = {}) => {
     enqueueSnackbar(message, {
-      autoHideDuration: 3000,
+      autoHideDuration: 5000,
       variant,
       ...opts,
     });
@@ -83,7 +83,7 @@ export default {
   /**
    * @type {EnqueueSnackbarFunc}
    */
-  error: (message, options = {}, ...args) => error(message, options, ...args),
+  error: (message, options = { autoHideDuration: 15000 }, ...args) => error(message, options, ...args),
 
   /**
    * @type {EnqueueSnackbarFunc}

package/src/WebWalletSWKeeper/index.js

@@ -1,7 +1,7 @@
 import { useEffect, useRef } from 'react';
 import PropTypes from 'prop-types';
 import useIdle from 'react-use/lib/useIdle';
-import useLocalStorage from 'react-use/lib/useLocalStorage';
+import { useLocalStorageState } from 'ahooks';
 import useBrowser from '@arcblock/react-hooks/lib/useBrowser';
 import { detectWalletExtension } from '@arcblock/ux/lib/Util';
 
@@ -92,7 +92,9 @@ export const withWebWalletSWKeeper = (Component) => {
     const browser = useBrowser();
     // eslint-disable-next-line no-param-reassign
     webWalletUrl = webWalletUrl || getWebWalletUrl();
-    const [disabled] = useLocalStorage(STORAGE_KEY_DISABLED, 1);
+    const [disabled] = useLocalStorageState(STORAGE_KEY_DISABLED, {
+      defaultValue: 1,
+    });
     const extension = detectWalletExtension();
     const isSameProtocol = checkSameProtocol(webWalletUrl);
     const isWalletWebview = browser.wallet;

package/src/withTracker/index.js

@@ -2,8 +2,7 @@
 import ReactGA from 'react-ga';
 import * as Sentry from '@sentry/browser';
 
-import useDeepCompareEffect from 'react-use/lib/useDeepCompareEffect';
-import useMount from 'react-use/lib/useMount';
+import { useMount, useDeepCompareEffect } from 'ahooks';
 import { useLocation } from 'react-router-dom';
 
 import ErrorBoundary from './error_boundary';