@arcblock/ux 2.8.25 → 2.9.0

package/es/Util/constant.js

@@ -0,0 +1,10 @@
+export const DEFAULT_TIMEOUT = 5 * 60;
+export const DEFAULT_WINDOW_TIMEOUT = 30 * 60;
+export const AUTH_SERVICE_PREFIX = '/.well-known/service';
+export const SESSION_TOKEN_STORAGE_KEY = 'login_token';
+export const REFRESH_TOKEN_STORAGE_KEY = 'refresh_token';
+export const RELAY_SOCKET_PREFIX = '/.well-known/service';
+export const API_DID_PREFIX = '/api/did';
+export const DASHBOARD_URL = `${AUTH_SERVICE_PREFIX}/admin`;
+export const PROFILE_URL = `${AUTH_SERVICE_PREFIX}/user`;
+export const NAVIGATION_URL = `${AUTH_SERVICE_PREFIX}/admin/navigation`;

package/es/Util/index.js

@@ -305,4 +305,15 @@ export const sleep = (time = 0) => {
 };
 export const isUrl = str => {
   return /^https?:\/\//.test(str);
+};
+const visitorIdKey = '__visitor_id';
+export const getVisitorId = () => {
+  return localStorage.getItem(visitorIdKey);
+};
+export const setVisitorId = value => {
+  if (value === null) {
+    localStorage.removeItem(visitorIdKey);
+  } else {
+    localStorage.setItem(visitorIdKey, value);
+  }
 };

package/lib/Address/did-address.js

@@ -7,11 +7,11 @@ exports.default = void 0;
 var _react = _interopRequireWildcard(require("react"));
 var _propTypes = _interopRequireDefault(require("prop-types"));
 require("@fontsource/ubuntu-mono/400.css");
-var _Tooltip = _interopRequireDefault(require("@mui/material/Tooltip"));
 var _colors = require("@mui/material/colors");
+var _material = require("@mui/material");
 var _copyToClipboard = _interopRequireDefault(require("copy-to-clipboard"));
-var _ContentCopy = _interopRequireDefault(require("@mui/icons-material/ContentCopy"));
-var _Check = _interopRequireDefault(require("@mui/icons-material/Check"));
+var _iconsMaterial = require("@mui/icons-material");
+var _noop = _interopRequireDefault(require("lodash/noop"));
 var _Theme = require("../Theme");
 var _Util = require("../Util");
 var _compactText = _interopRequireDefault(require("./compact-text"));
@@ -90,12 +90,12 @@ const DidAddress = /*#__PURE__*/(0, _react.forwardRef)((_ref, ref) => {
     copyElement = /*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
       className: "did-address-copy-wrapper",
       title: copied ? '' : translations[locale].copy,
-      children: copied ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_Tooltip.default, {
+      children: copied ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_material.Tooltip, {
         title: translations[locale].copied,
         placement: "bottom",
         arrow: true,
         open: copied,
-        children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_Check.default, {
+        children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_iconsMaterial.Check, {
           className: "did-address-copy",
           style: {
             color: _colors.green[500]
@@ -104,7 +104,7 @@ const DidAddress = /*#__PURE__*/(0, _react.forwardRef)((_ref, ref) => {
       }) :
       /*#__PURE__*/
       /* title prop 直接加在 icon 上不生效 */
-      (0, _jsxRuntime.jsx)(_ContentCopy.default, {
+      (0, _jsxRuntime.jsx)(_iconsMaterial.ContentCopy, {
         className: "did-address-copy",
         onClick: onCopy
       })
@@ -115,21 +115,35 @@ const DidAddress = /*#__PURE__*/(0, _react.forwardRef)((_ref, ref) => {
     size: size
   }, rest), {}, {
     ref: ref,
-    children: [prepend, /*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
-      ref: textRef,
-      className: "did-address-text did-address-truncate",
-      style: {
-        display: compact ? 'none' : 'inline'
-      },
-      children: children
-    }), compact && /*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
-      className: "did-address-text",
-      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_compactText.default, {
-        startChars: startChars,
-        endChars: endChars,
-        showCopyButtonInTooltip: showCopyButtonInTooltip,
+    children: [prepend, /*#__PURE__*/(0, _jsxRuntime.jsxs)(_material.Tooltip, {
+      title: copyable ? '' : translations[locale].copied,
+      placement: "bottom",
+      arrow: true,
+      open: copied,
+      children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_material.Box, {
+        ref: textRef,
+        component: "span",
+        className: "did-address-text did-address-truncate",
+        sx: {
+          display: compact ? 'none' : 'inline',
+          cursor: copyable ? 'text' : 'pointer'
+        },
+        onDoubleClick: copyable ? _noop.default : onCopy,
         children: children
-      })
+      }), compact && /*#__PURE__*/(0, _jsxRuntime.jsx)(_material.Box, {
+        component: "span",
+        className: "did-address-text",
+        sx: {
+          cursor: copyable ? 'text' : 'pointer'
+        },
+        onDoubleClick: copyable ? _noop.default : onCopy,
+        children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_compactText.default, {
+          startChars: startChars,
+          endChars: endChars,
+          showCopyButtonInTooltip: showCopyButtonInTooltip,
+          children: children
+        })
+      })]
     }), copyElement, append]
   }));
 });
@@ -167,9 +181,9 @@ DidAddress.defaultProps = {
   endChars: 6,
   locale: 'en'
 };
-const Root = (0, _Theme.styled)('div', {
+const Root = (0, _Theme.styled)(_material.Box, {
   shouldForwardProp: prop => prop !== 'inline'
-})(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  font-family: 'Ubuntu Mono', monospace;\n  && {\n    display: ", ";\n    align-items: center;\n    max-width: 100%;\n    overflow: hidden;\n    color: #ccc;\n    font-size: ", ";\n    font-weight: 400;\n\n    svg {\n      fill: currentColor;\n    }\n  }\n\n  .did-address-text {\n    color: #666;\n  }\n  /* truncate string with ellipsis */\n  .did-address-truncate {\n    white-space: nowrap;\n    overflow: hidden;\n    text-overflow: ellipsis;\n  }\n\n  .did-address-copy {\n    flex: 0 0 auto;\n  }\n  .did-address-copy-wrapper {\n    display: flex;\n    justify-content: center;\n    align-items: center;\n    width: 1em;\n    height: 1em;\n    margin-left: 8px;\n  }\n  .did-address-copy {\n    font-size: 1em;\n    color: #999;\n    cursor: pointer;\n  }\n\n  /* link */\n  a {\n    color: #666;\n  }\n  &:hover a {\n    color: #222;\n    text-decoration: underline;\n  }\n"])), _ref2 => {
+})(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  font-family: 'Ubuntu Mono', monospace;\n  && {\n    display: ", ";\n    align-items: center;\n    max-width: 100%;\n    overflow: hidden;\n    color: #ccc;\n    font-size: ", ";\n    font-weight: 400;\n\n    svg {\n      fill: currentColor;\n    }\n  }\n\n  .did-address-text {\n    color: #666;\n  }\n  /* truncate string with ellipsis */\n  .did-address-truncate {\n    white-space: nowrap;\n    overflow: hidden;\n    text-overflow: ellipsis;\n  }\n\n  .did-address-copy-wrapper {\n    display: flex;\n    justify-content: center;\n    align-items: center;\n    width: 1em;\n    height: 1em;\n    margin-left: 8px;\n  }\n  .did-address-copy {\n    flex: 0 0 auto;\n    font-size: 1em;\n    color: #999;\n    cursor: pointer;\n  }\n\n  /* link */\n  a {\n    color: #666;\n  }\n  &:hover a {\n    color: #222;\n    text-decoration: underline;\n  }\n"])), _ref2 => {
   let {
     inline
   } = _ref2;

package/lib/AnimationWaiter/index.js

@@ -7,6 +7,7 @@ exports.default = AnimationWaiter;
 var _react = require("react");
 var _propTypes = _interopRequireDefault(require("prop-types"));
 var _reactLottiePlayer = _interopRequireDefault(require("react-lottie-player"));
+var _noop = _interopRequireDefault(require("lodash/noop"));
 var _defaultAnimation = _interopRequireDefault(require("./default-animation.json"));
 var _Theme = require("../Theme");
 var _jsxRuntime = require("react/jsx-runtime");
@@ -86,7 +87,7 @@ function AnimationWaiter(_ref) {
   // tips
   (0, _react.useEffect)(() => {
     if (!tips.length) {
-      return () => {};
+      return _noop.default;
     }
     const timer = setTimeout(() => {
       let nextId = tipsId + 1;

package/lib/Avatar/index.js

@@ -141,7 +141,7 @@ Avatar.defaultProps = {
   shape: '',
   responsive: false
 };
-const BlockyIconContainer = (0, _Theme.styled)('div')(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  display: flex;\n  align-items: center;\n  width: ", "px;\n  height: ", "px;\n  .blocky-icon-inner {\n    box-sizing: border-box;\n    display: flex;\n    justify-content: center;\n    align-items: center;\n    width: ", "px;\n    height: ", "px;\n    border-radius: ", "px;\n    background: #ddd;\n  }\n"])), props => props.$size, props => props.$size, props => props.$size, props => props.$size * 0.7, props => Math.min(10, Math.floor(0.1 * props.$size + 2)));
+const BlockyIconContainer = (0, _Theme.styled)(_Box.default)(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  display: flex;\n  align-items: center;\n  width: ", "px;\n  height: ", "px;\n  .blocky-icon-inner {\n    box-sizing: border-box;\n    display: flex;\n    justify-content: center;\n    align-items: center;\n    width: ", "px;\n    height: ", "px;\n    border-radius: ", "px;\n    background: #ddd;\n  }\n"])), props => props.$size, props => props.$size, props => props.$size, props => props.$size * 0.7, props => Math.min(10, Math.floor(0.1 * props.$size + 2)));
 const StyledImg = (0, _Theme.styled)(_Img.default)(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n  &.avatar-img--rounded {\n    border-radius: 4px;\n    overflow: hidden;\n  }\n  &.avatar-img--circle {\n    border-radius: 100%;\n    overflow: hidden;\n  }\n"])));
 function AvatarWithErrorBoundary(props) {
   const size = props.size || 36;

package/lib/BlockletContext/index.js

@@ -48,7 +48,7 @@ function BlockletProvider(_ref) {
       setBlockletData(data);
     } catch (_unused) {
       // NOTICE: 如果获取指定 blockletData 失败，则使用 window.blocklet
-      const data = window.blocklet || window.env;
+      const data = globalThis.blocklet || globalThis.env;
       setBlockletData(data);
     }
     // eslint-disable-next-line react-hooks/exhaustive-deps

package/lib/CardSelector/index.js

@@ -7,6 +7,7 @@ exports.default = CardSelector;
 var _react = require("react");
 var _styled = _interopRequireDefault(require("@emotion/styled"));
 var _propTypes = _interopRequireDefault(require("prop-types"));
+var _noop = _interopRequireDefault(require("lodash/noop"));
 var _jsxRuntime = require("react/jsx-runtime");
 var _templateObject;
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
@@ -119,6 +120,6 @@ CardSelector.defaultProps = {
   width: 300,
   height: 400,
   cardSpace: 40,
-  onSelect: () => {},
+  onSelect: _noop.default,
   defaultIndex: 0
 };

package/lib/Colors/index.js

@@ -9,5 +9,12 @@ Object.defineProperty(exports, "default", {
     return _default.default;
   }
 });
+Object.defineProperty(exports, "temp", {
+  enumerable: true,
+  get: function get() {
+    return _temp.default;
+  }
+});
 var _default = _interopRequireDefault(require("./themes/default"));
+var _temp = _interopRequireDefault(require("./themes/temp"));
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }

package/lib/Colors/themes/temp.js

@@ -0,0 +1,24 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+const colors = {
+  lineStep: 'rgba(18, 22, 24, 0.06)',
+  lineBorderStrong: 'rgba(18, 22, 24, 0.12)',
+  lineBorderBase: 'rgba(18, 22, 24, 0.06)',
+  borderBase: 'rgba(18, 22, 24, 0.06)',
+  textMuted: 'rgba(18, 22, 24, 0.36)',
+  textSubtitle: 'rgba(18, 22, 24, 0.6)',
+  textBase: 'rgba(18, 22, 24, 1)',
+  textPrimaryBase: 'rgba(18, 22, 24, 1)',
+  surfaceBgSubtitle: 'rgba(18, 22, 24, 0.03)',
+  surfacePrimarySubtitle: 'rgba(19, 125, 250, 0.06)',
+  surfaceSuccess: 'rgba(13, 202, 134, 1)',
+  primaryBase: 'rgba(19, 125, 250, 1)',
+  primary100: 'rgba(19, 125, 250, 1)',
+  gray6: 'rgba(17, 22, 24, 0.06)'
+};
+var _default = colors;
+exports.default = _default;

package/lib/Datatable/TableSearch.js

@@ -12,6 +12,7 @@ var _Search = _interopRequireDefault(require("@mui/icons-material/Search"));
 var _TextField = _interopRequireDefault(require("@mui/material/TextField"));
 var _Clear = _interopRequireDefault(require("@mui/icons-material/Clear"));
 var _clsx = _interopRequireDefault(require("clsx"));
+var _noop = _interopRequireDefault(require("lodash/noop"));
 var _DatatableContext = require("./DatatableContext");
 var _Theme = require("../Theme");
 var _jsxRuntime = require("react/jsx-runtime");
@@ -119,6 +120,6 @@ TableSearch.propTypes = {
 TableSearch.defaultProps = {
   search: '',
   searchText: '',
-  onSearchOpen: () => {}
+  onSearchOpen: _noop.default
 };
 const Container = (0, _Theme.styled)('div')(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  display: flex;\n  align-items: center;\n  .toolbar-search-area {\n    width: 0;\n    transition: all ease 0.3s;\n    overflow: hidden;\n    .MuiFormControl-root {\n      width: inherit;\n      margin: 0 12px;\n    }\n    &.toolbar-btn-show {\n      width: 260px;\n      padding-left: 8px;\n\n      ", " {\n        width: 200px;\n      }\n\n      ", " {\n        width: 180px;\n      }\n      &.small-textfield {\n        width: 200px;\n      }\n    }\n  }\n  .toolbar-search-close {\n    width: 0;\n    transition: all ease 0.3s;\n    overflow: hidden;\n    &.toolbar-btn-show {\n      width: 40px;\n    }\n  }\n  .toolbar-search-icon-placeholder {\n    display: flex;\n    justify-content: center;\n    align-items: center;\n    width: 40px;\n    height: 40px;\n  }\n  &.search-always-open {\n    .MuiFormControl-root {\n      margin: 0 12px 0 0;\n    }\n    .toolbar-btn-show {\n      padding-left: 0;\n    }\n  }\n"])), props => props.theme.breakpoints.down('md'), props => props.theme.breakpoints.down('sm'));

package/lib/Header/header.js

@@ -137,6 +137,6 @@ Header.defaultProps = {
   maxWidth: undefined,
   homeLink: '/'
 };
-const Root = (0, _Theme.styled)('div')(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  position: relative;\n  z-index: ", ";\n  font-size: 14px;\n  background: ", ";\n  .header-container {\n    display: flex;\n    align-items: center;\n    height: 64px;\n  }\n\n  .header-brand-wrapper {\n    flex-shrink: 2;\n    > a {\n      display: flex;\n      align-items: center;\n      height: 100%;\n      line-height: 1;\n      color: inherit;\n      text-decoration: none;\n    }\n  }\n  .header-brand-wrapper .header-logo {\n    display: inline-flex;\n    position: relative;\n    height: 44px;\n    margin-right: 16px;\n    img,\n    svg {\n      width: auto;\n      height: 100%;\n      max-height: 100%;\n    }\n  }\n  .header-brand {\n    display: flex;\n    flex-direction: column;\n    justify-content: center;\n    height: 44px;\n    margin-right: 16px;\n    line-height: 1;\n    a {\n      color: inherit;\n      text-decoration: none;\n    }\n    .header-brand-title {\n      display: flex;\n      align-items: center;\n      h2 {\n        margin: 0;\n        font-size: 16px;\n      }\n    }\n    .header-brand-desc {\n      margin-top: 4px;\n      color: #9397a1;\n    }\n  }\n  .header-brand-addon {\n    margin-right: 16px;\n  }\n  .header-addons {\n    display: flex;\n    align-items: center;\n    min-width: 150px;\n  }\n  ", " {\n    .header-brand {\n      margin-right: 12px;\n      .header-brand-title {\n        h2 {\n          font-size: 14px;\n        }\n      }\n    }\n    .header-brand-addon {\n      display: none;\n    }\n  }\n  ", " {\n    .header-menu {\n      display: inline-block;\n    }\n    .header-logo {\n      height: 32px;\n    }\n    .header-brand {\n      .header-brand-title {\n        h2 {\n          font-size: 13px;\n        }\n      }\n      .header-brand-desc {\n        font-size: 12px;\n      }\n    }\n  }\n"])), props => props.theme.zIndex.appBar, props => props.theme.palette.common.white, props => props.theme.breakpoints.down('lg'), props => props.theme.breakpoints.down('md'));
+const Root = (0, _Theme.styled)('div')(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  position: relative;\n  z-index: ", ";\n  font-size: 14px;\n  background: ", ";\n  .header-container {\n    display: flex;\n    align-items: center;\n    height: 64px;\n  }\n\n  .header-brand-wrapper {\n    flex-shrink: 2;\n    > a {\n      display: flex;\n      align-items: center;\n      height: 100%;\n      line-height: 1;\n      color: inherit;\n      text-decoration: none;\n    }\n  }\n  .header-brand-wrapper .header-logo {\n    display: inline-flex;\n    position: relative;\n    height: 44px;\n    margin-right: 16px;\n    img,\n    svg {\n      width: auto;\n      height: 100%;\n      max-height: 100%;\n    }\n  }\n  .header-brand {\n    display: flex;\n    flex-direction: column;\n    justify-content: center;\n    height: 44px;\n    margin-right: 16px;\n    line-height: 1;\n    a {\n      color: inherit;\n      text-decoration: none;\n    }\n    .header-brand-title {\n      display: flex;\n      align-items: center;\n      h2 {\n        margin: 0;\n        font-size: 16px;\n      }\n    }\n    .header-brand-desc {\n      margin-top: 4px;\n      color: #9397a1;\n    }\n  }\n  .header-brand-addon {\n    margin-right: 16px;\n  }\n  .header-addons {\n    display: flex;\n    align-items: center;\n  }\n  ", " {\n    .header-brand {\n      margin-right: 12px;\n      .header-brand-title {\n        h2 {\n          font-size: 14px;\n        }\n      }\n    }\n    .header-brand-addon {\n      display: none;\n    }\n  }\n  ", " {\n    .header-menu {\n      display: inline-block;\n    }\n    .header-logo {\n      height: 32px;\n    }\n    .header-brand {\n      .header-brand-title {\n        h2 {\n          font-size: 13px;\n        }\n      }\n      .header-brand-desc {\n        font-size: 12px;\n      }\n    }\n  }\n"])), props => props.theme.zIndex.appBar, props => props.theme.palette.common.white, props => props.theme.breakpoints.down('lg'), props => props.theme.breakpoints.down('md'));
 var _default = Header;
 exports.default = _default;

package/lib/Img/index.js

@@ -7,9 +7,10 @@ exports.default = void 0;
 var _react = require("react");
 var _propTypes = _interopRequireDefault(require("prop-types"));
 var _reactIntersectionObserver = require("react-intersection-observer");
-var _alert = _interopRequireDefault(require("@iconify-icons/mdi/alert"));
-var _image = _interopRequireDefault(require("@iconify-icons/mdi/image"));
+var _warningRounded = _interopRequireDefault(require("@iconify-icons/material-symbols/warning-rounded"));
+var _imageRounded = _interopRequireDefault(require("@iconify-icons/material-symbols/image-rounded"));
 var _react2 = require("@iconify/react");
+var _noop = _interopRequireDefault(require("lodash/noop"));
 var _Theme = require("../Theme");
 var _jsxRuntime = require("react/jsx-runtime");
 const _excluded = ["lazy", "width", "height", "repeat", "ratio", "alt", "size", "position", "src", "placeholder", "fallback", "style", "className", "onError", "onSuccess"];
@@ -174,14 +175,14 @@ function Img(_ref) {
           className: "image--state",
           title: "loading image",
           children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_react2.Icon, {
-            icon: _alert.default,
+            icon: _warningRounded.default,
             className: "image--icon"
           })
         }), !placeholder && imgState === 'loading' && /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
           className: "image--state",
           title: "Image load error",
           children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_react2.Icon, {
-            icon: _image.default,
+            icon: _imageRounded.default,
             className: "image--icon"
           })
         }), imgState === 'loaded' && /*#__PURE__*/(0, _jsxRuntime.jsx)("img", {
@@ -223,8 +224,8 @@ Img.defaultProps = {
   placeholder: null,
   fallback: null,
   className: '',
-  onError: () => {},
-  onSuccess: () => {}
+  onError: _noop.default,
+  onSuccess: _noop.default
 };
 var _default = Img;
 exports.default = _default;

package/lib/Locale/selector.js

@@ -7,9 +7,12 @@ exports.default = LocaleSelector;
 var _react = require("react");
 var _propTypes = _interopRequireDefault(require("prop-types"));
 var _material = require("@mui/material");
-var _Check = _interopRequireDefault(require("@mui/icons-material/Check"));
-var _Globe = _interopRequireDefault(require("@arcblock/icons/lib/Globe"));
+var _react2 = require("@iconify/react");
+var _language = _interopRequireDefault(require("@iconify-icons/material-symbols/language"));
+var _check = _interopRequireDefault(require("@iconify-icons/material-symbols/check"));
+var _noop = _interopRequireDefault(require("lodash/noop"));
 var _Util = require("../Util");
+var _Colors = require("../Colors");
 var _context = require("./context");
 var _Theme = require("../Theme");
 var _jsxRuntime = require("react/jsx-runtime");
@@ -75,12 +78,10 @@ function LocaleSelector(props) {
     if (Icon) {
       return /*#__PURE__*/(0, _jsxRuntime.jsx)(Icon, {});
     }
-    return /*#__PURE__*/(0, _jsxRuntime.jsx)(_Globe.default, {
-      style: {
-        width: 'auto',
-        height: size,
-        color: theme.palette.text.secondary
-      }
+    return /*#__PURE__*/(0, _jsxRuntime.jsx)(_react2.Icon, {
+      icon: _language.default,
+      fontSize: size,
+      color: theme.palette.text.secondary
     });
   }, [Icon, theme === null || theme === void 0 ? void 0 : (_theme$palette2 = theme.palette) === null || _theme$palette2 === void 0 ? void 0 : (_theme$palette2$text = _theme$palette2.text) === null || _theme$palette2$text === void 0 ? void 0 : _theme$palette2$text.secondary, size]);
   return /*#__PURE__*/(0, _jsxRuntime.jsxs)(Div, _objectSpread(_objectSpread(_objectSpread({
@@ -120,9 +121,9 @@ function LocaleSelector(props) {
               return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_material.MenuItem, {
                 className: "locale-item",
                 onClick: () => onSelect(code, name),
-                children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_Check.default, {
-                  className: code === locale ? 'check-icon check-icon-visible' : 'check-icon',
-                  fontSize: "small"
+                children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_react2.Icon, {
+                  icon: _check.default,
+                  className: code === locale ? 'check-icon check-icon-visible' : 'check-icon'
                 }), name]
               }, code);
             })
@@ -144,13 +145,13 @@ LocaleSelector.defaultProps = {
   showText: true,
   size: 24,
   popperProps: {},
-  onChange: () => {},
+  onChange: _noop.default,
   popperType: 'click',
   icon: null
 };
 const Div = (0, _Theme.styled)('div', {
   shouldForwardProp: prop => prop !== 'dark'
-})(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  display: inline-block;\n\n  .trigger {\n    display: flex;\n    flex-direction: column;\n    justify-content: center;\n    font-size: 14px;\n    white-space: nowrap;\n\n    .trigger-text {\n      margin-left: 5px;\n      font-size: 14px;\n      color: ", ";\n    }\n  }\n\n  .locales {\n    background: ", ";\n    box-shadow: 0 0 8px rgba(0, 0, 0, 0.2);\n  }\n\n  .locale-item {\n    font-size: 16px;\n    font-style: normal;\n    font-stretch: normal;\n    line-height: normal;\n    letter-spacing: 2px;\n    text-align: center;\n    color: ", ";\n    cursor: pointer;\n    display: flex;\n    padding: 16px;\n    align-items: center;\n    .check-icon {\n      visibility: hidden;\n      margin-right: 4px;\n    }\n    .check-icon-visible {\n      visibility: visible;\n    }\n  }\n"])), props => (0, _Util.getColor)(props), props => (0, _Util.getBackground)(props), props => (0, _Util.getColor)(props));
+})(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  display: inline-block;\n\n  .trigger {\n    display: flex;\n    flex-direction: column;\n    justify-content: center;\n    font-size: 14px;\n    white-space: nowrap;\n\n    .trigger-text {\n      margin-left: 5px;\n      font-size: 14px;\n      color: ", ";\n    }\n  }\n\n  .locales {\n    background: ", ";\n    box-shadow: 0px 8px 16px 0px ", ", 0px 0px 0px 1px ", ";\n    border-radius: 8px;\n  }\n\n  .locale-item {\n    font-size: 16px;\n    font-style: normal;\n    font-stretch: normal;\n    line-height: normal;\n    letter-spacing: 2px;\n    text-align: center;\n    color: ", ";\n    cursor: pointer;\n    display: flex;\n    padding: 16px;\n    align-items: center;\n    .check-icon {\n      visibility: hidden;\n      margin-right: 4px;\n    }\n    .check-icon-visible {\n      visibility: visible;\n    }\n  }\n"])), props => (0, _Util.getColor)(props), props => (0, _Util.getBackground)(props), _Colors.temp.gray6, _Colors.temp.gray6, props => (0, _Util.getColor)(props));
 const StyledPopper = (0, _Theme.styled)(_material.Popper)(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n  z-index: ", ";\n"])), _ref2 => {
   let {
     theme

package/lib/NFTDisplay/index.js

@@ -14,6 +14,7 @@ var _pako = _interopRequireDefault(require("pako"));
 var _base64Url = _interopRequireDefault(require("base64-url"));
 var _isSvg = _interopRequireDefault(require("is-svg"));
 var _reactSvg = require("react-svg");
+var _noop = _interopRequireDefault(require("lodash/noop"));
 var _aspectRatioContainer = _interopRequireDefault(require("./aspect-ratio-container"));
 var _img = _interopRequireDefault(require("./svg-embedder/img"));
 var _inlineSvg = _interopRequireDefault(require("./svg-embedder/inline-svg"));
@@ -284,7 +285,7 @@ NFTDisplay.defaultProps = {
   preferredSvgEmbedder: 'img',
   checkSvg: false,
   minimumLoadingTime: 0,
-  onCompleted: () => {}
+  onCompleted: _noop.default
 };
 const Root = (0, _Theme.styled)('div')(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  display: flex;\n  justify-content: center;\n  align-items: center;\n  position: relative;\n  /* \u9ED8\u8BA4\u5C3A\u5BF8 */\n  width: 150px;\n  height: 150px;\n  overflow: hidden;\n\n  &,\n  img,\n  object {\n    max-width: 100%;\n    max-height: 100%;\n  }\n\n  img,\n  object {\n    width: 100%;\n    height: 100%;\n  }\n\n  &.nft-display--inset {\n    width: 100%;\n    height: 100%;\n  }\n"])));
 function withAspectRatio(Component) {

package/lib/QRCode/index.js

@@ -7,6 +7,7 @@ exports.default = void 0;
 var _react = require("react");
 var _propTypes = _interopRequireDefault(require("prop-types"));
 var _qrCodeStyling = _interopRequireDefault(require("@solana/qr-code-styling"));
+var _material = require("@mui/material");
 var _jsxRuntime = require("react/jsx-runtime");
 const _excluded = ["data", "size", "image", "config"];
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
@@ -65,7 +66,7 @@ function QRCode(_ref) {
     qrCode.update(options);
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [data, size, image, config]);
-  return /*#__PURE__*/(0, _jsxRuntime.jsx)("div", _objectSpread({
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_material.Box, _objectSpread({
     ref: ref
   }, rest));
 }

package/lib/SessionBlocklet/index.js

@@ -0,0 +1,187 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = SessionBlocklet;
+var _react = require("react");
+var _propTypes = _interopRequireDefault(require("prop-types"));
+var _material = require("@mui/material");
+var _react2 = require("@iconify/react");
+var _dashboardOutlineRounded = _interopRequireDefault(require("@iconify-icons/material-symbols/dashboard-outline-rounded"));
+var _widgetsOutlineRounded = _interopRequireDefault(require("@iconify-icons/material-symbols/widgets-outline-rounded"));
+var _ahooks = require("ahooks");
+var _Button = _interopRequireDefault(require("../Button"));
+var _Colors = require("../Colors");
+var _constant = require("../Util/constant");
+var _SessionPermission = _interopRequireDefault(require("../SessionPermission"));
+var _jsxRuntime = require("react/jsx-runtime");
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
+function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
+function _defineProperty(obj, key, value) { key = _toPropertyKey(key); if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
+function _toPropertyKey(arg) { var key = _toPrimitive(arg, "string"); return typeof key === "symbol" ? key : String(key); }
+function _toPrimitive(input, hint) { if (typeof input !== "object" || input === null) return input; var prim = input[Symbol.toPrimitive]; if (prim !== undefined) { var res = prim.call(input, hint || "default"); if (typeof res !== "object") return res; throw new TypeError("@@toPrimitive must return a primitive value."); } return (hint === "string" ? String : Number)(input); }
+function SessionBlocklet(_ref) {
+  var _window;
+  let {
+    session,
+    locale,
+    size
+  } = _ref;
+  const blocklet = ((_window = window) === null || _window === void 0 ? void 0 : _window.blocklet) || {};
+  const sessionMenuList = (blocklet.navigation || []
+  // HACK 过滤掉默认插入的 /sessionManager 菜单
+  ).filter(item => item.section === 'sessionManager' && !['/sessionManager'].includes(item.id)).filter(item => {
+    var _session$user;
+    if (((item === null || item === void 0 ? void 0 : item.role) || []).includes((session === null || session === void 0 ? void 0 : (_session$user = session.user) === null || _session$user === void 0 ? void 0 : _session$user.role) || 'guest')) {
+      return true;
+    }
+    return false;
+  }).map(item => {
+    const component = ((blocklet === null || blocklet === void 0 ? void 0 : blocklet.componentMountPoints) || []).find(x => item.component === x.name);
+    return _objectSpread(_objectSpread({}, item), {}, {
+      component
+    });
+  });
+  const popperAnchorRef = (0, _react.useRef)(null);
+  const currentState = (0, _ahooks.useReactive)({
+    open: false
+  });
+  const onTogglePopper = (0, _ahooks.useMemoizedFn)(function () {
+    let value = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : !currentState.open;
+    currentState.open = value;
+  });
+  if (sessionMenuList.length === 0) {
+    return null;
+  }
+  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
+    children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_material.IconButton, {
+      size: "medium",
+      ref: popperAnchorRef,
+      onClick: () => onTogglePopper(),
+      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_react2.Icon, {
+        icon: _dashboardOutlineRounded.default,
+        fontSize: size
+      })
+    }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_material.Popper, {
+      open: currentState.open,
+      onClose: () => onTogglePopper(false),
+      anchorEl: popperAnchorRef.current,
+      transition: true,
+      placement: "bottom-end",
+      sx: {
+        zIndex: 1600
+      },
+      children: _ref2 => {
+        let {
+          TransitionProps
+        } = _ref2;
+        return /*#__PURE__*/(0, _jsxRuntime.jsx)(_material.ClickAwayListener, {
+          onClickAway: e => {
+            e.preventDefault();
+            e.stopPropagation();
+            onTogglePopper(false);
+          },
+          children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_material.Fade, _objectSpread(_objectSpread({}, TransitionProps), {}, {
+            timeout: 350,
+            children: /*#__PURE__*/(0, _jsxRuntime.jsxs)(_material.Paper, {
+              variant: "outlined",
+              sx: {
+                borderRadius: 3,
+                width: 350,
+                maxWidth: '90vw',
+                borderColor: _Colors.temp.lineStep,
+                p: 2,
+                border: '0 !important',
+                boxShadow: "0px 8px 16px 0px ".concat(_Colors.temp.gray6, ", 0px 0px 0px 1px ").concat(_Colors.temp.gray6)
+              },
+              children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_material.List, {
+                sx: {
+                  display: 'grid',
+                  gridTemplateColumns: 'repeat(auto-fill, 100px)',
+                  gridAutoRows: 'minmax(100px, max-content)',
+                  justifyContent: 'space-between',
+                  maxHeight: 350,
+                  overflowY: 'auto',
+                  p: 0
+                },
+                children: sessionMenuList.map(item => {
+                  var _item$component, _item$title;
+                  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_material.ListItem, {
+                    disablePadding: true,
+                    children: /*#__PURE__*/(0, _jsxRuntime.jsxs)(_material.ListItemButton, {
+                      href: item.link,
+                      sx: {
+                        p: 1,
+                        display: 'flex',
+                        flexDirection: 'column',
+                        alignItems: 'center',
+                        gap: 1,
+                        width: '100%',
+                        height: '100%',
+                        borderRadius: 2,
+                        '&:hover': {
+                          backgroundColor: _Colors.temp.surfacePrimarySubtitle
+                        }
+                      },
+                      children: [item !== null && item !== void 0 && (_item$component = item.component) !== null && _item$component !== void 0 && _item$component.did ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_material.Box, {
+                        component: "img",
+                        src: "".concat(_constant.AUTH_SERVICE_PREFIX, "/blocklet/logo-bundle/").concat(item.component.did),
+                        sx: {
+                          borderRadius: 2,
+                          width: 50,
+                          height: 50,
+                          objectFit: 'contain'
+                        }
+                      }) : /*#__PURE__*/(0, _jsxRuntime.jsx)(_react2.Icon, {
+                        fontSize: 50,
+                        icon: item.icon || _widgetsOutlineRounded.default,
+                        color: _Colors.temp.textSubtitle
+                      }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_material.Typography, {
+                        sx: {
+                          fontSize: '12px',
+                          color: _Colors.temp.textBase,
+                          textAlign: 'center',
+                          lineHeight: 'normal'
+                        },
+                        children: ((_item$title = item.title) === null || _item$title === void 0 ? void 0 : _item$title.zh) || item.title
+                      })]
+                    })
+                  }, item.id);
+                })
+              }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_SessionPermission.default, {
+                session: session,
+                children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_Button.default, {
+                  variant: "outlined",
+                  fullWidth: true,
+                  href: _constant.NAVIGATION_URL,
+                  sx: {
+                    mt: 1,
+                    borderRadius: 2,
+                    color: _Colors.temp.textBase,
+                    borderColor: _Colors.temp.lineBorderStrong,
+                    '&:hover': {
+                      color: _Colors.temp.primaryBase,
+                      borderColor: _Colors.temp.primaryBase
+                    }
+                  },
+                  children: locale === 'zh' ? '管理' : 'Manage'
+                })
+              })]
+            })
+          }))
+        });
+      }
+    })]
+  });
+}
+SessionBlocklet.propTypes = {
+  session: _propTypes.default.object.isRequired,
+  locale: _propTypes.default.string,
+  size: _propTypes.default.number
+};
+SessionBlocklet.defaultProps = {
+  locale: 'en',
+  size: 24
+};