@arcblock/ux 2.7.14 → 2.7.16

package/lib/SessionManager/manage-blocklet.js

@@ -0,0 +1,78 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = ManageBlocklet;
+var _propTypes = _interopRequireDefault(require("prop-types"));
+var _ahooks = require("ahooks");
+var _react = require("@iconify/react");
+var _apps = _interopRequireDefault(require("@iconify-icons/mdi/apps"));
+var _material = require("@mui/material");
+var _menuAccordion = _interopRequireDefault(require("./menu-accordion"));
+var _util = require("../Locale/util");
+var _translation = require("./translation");
+var _jsxRuntime = require("react/jsx-runtime");
+const _excluded = ["svgIcon"];
+/* eslint-disable react/no-array-index-key */
+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 _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }
+function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }
+function ManageBlocklet(_ref) {
+  let {
+    menu,
+    menuRender,
+    locale
+  } = _ref;
+  const t = (0, _ahooks.useMemoizedFn)(function (key) {
+    let data = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};
+    return (0, _util.translate)(_translation.translations, key, locale, 'en', data);
+  });
+  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_menuAccordion.default, {
+    locale: locale,
+    title: /*#__PURE__*/(0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
+      children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_react.Icon, {
+        icon: _apps.default,
+        width: 24,
+        height: 24,
+        className: "session-manager-menu-icon"
+      }), t('manageBlocklet')]
+    }),
+    children: [Array.isArray(menu) && menu.map((menuItem, index) => {
+      const {
+          svgIcon
+        } = menuItem,
+        menuProps = _objectWithoutProperties(menuItem, _excluded);
+      return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_material.MenuItem, _objectSpread(_objectSpread({
+        className: "session-manager-menu-item"
+      }, _objectSpread(_objectSpread({}, menuProps), {}, {
+        icon: undefined,
+        label: undefined
+      })), {}, {
+        children: [svgIcon ? svgIcon && /*#__PURE__*/(0, _jsxRuntime.jsx)(_material.SvgIcon, {
+          component: svgIcon,
+          className: "session-manager-menu-icon"
+        }) : menuItem.icon, menuItem.label]
+      }), index);
+    }), menuRender({
+      classes: {
+        menuItem: 'session-manager-menu-item',
+        menuIcon: 'session-manager-menu-icon'
+      }
+    })]
+  });
+}
+ManageBlocklet.propTypes = {
+  menu: _propTypes.default.array,
+  menuRender: _propTypes.default.func,
+  locale: _propTypes.default.string.isRequired
+};
+ManageBlocklet.defaultProps = {
+  menu: [],
+  menuRender: () => {}
+};

package/lib/SessionManager/menu-accordion.js

@@ -0,0 +1,103 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = MenuAccordion;
+var _propTypes = _interopRequireDefault(require("prop-types"));
+var _material = require("@mui/material");
+var _expandMore = _interopRequireDefault(require("@iconify-icons/mdi/expand-more"));
+var _react = require("@iconify/react");
+var _isEmpty = _interopRequireDefault(require("lodash/isEmpty"));
+var _isNil = _interopRequireDefault(require("lodash/isNil"));
+var _ahooks = require("ahooks");
+var _util = require("../Locale/util");
+var _translation = require("./translation");
+var _jsxRuntime = require("react/jsx-runtime");
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+function isEmptyNode(node) {
+  if ((0, _isNil.default)(node)) {
+    return true;
+  }
+  if ((0, _isEmpty.default)(node)) {
+    return true;
+  }
+  if (Array.isArray(node)) {
+    return node.every(item => isEmptyNode(item));
+  }
+  return false;
+}
+function MenuAccordion(_ref) {
+  let {
+    title,
+    children,
+    locale
+  } = _ref;
+  const isEmptyChildren = (0, _ahooks.useCreation)(() => isEmptyNode(children), [children]);
+  const t = (0, _ahooks.useMemoizedFn)(function (key) {
+    let data = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};
+    return (0, _util.translate)(_translation.translations, key, locale, 'en', data);
+  });
+  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_material.Accordion, {
+    defaultExpanded: true,
+    disableGutters: true,
+    elevation: 0,
+    sx: {
+      '&.MuiAccordion-root:before': {
+        content: 'unset'
+      },
+      '.MuiAccordionSummary-root': {
+        minHeight: 'auto',
+        width: '100%'
+      },
+      '.MuiAccordionSummary-content': {
+        margin: 0
+      },
+      '.MuiAccordionDetails-root': {
+        padding: 0,
+        paddingLeft: '30px',
+        '.session-manager-menu-item': {
+          fontSize: '15px',
+          padding: '12px 20px',
+          whiteSpace: 'normal'
+        },
+        '.session-manager-menu-icon': {
+          height: '21px',
+          widht: '21px'
+        }
+      }
+    },
+    children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_material.MenuItem, {
+      sx: {
+        padding: 0,
+        width: '100%'
+      },
+      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_material.AccordionSummary, {
+        className: "session-manager-menu-item",
+        expandIcon: /*#__PURE__*/(0, _jsxRuntime.jsx)(_react.Icon, {
+          icon: _expandMore.default,
+          width: 24,
+          height: 24
+        }),
+        children: title
+      })
+    }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_material.AccordionDetails, {
+      children: isEmptyChildren ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_material.MenuItem, {
+        disabled: true,
+        className: "session-manager-menu-item",
+        sx: {
+          justifyContent: 'center'
+        },
+        children: t('noneMenu')
+      }, "empty") : children
+    })]
+  });
+}
+MenuAccordion.propTypes = {
+  title: _propTypes.default.any.isRequired,
+  children: _propTypes.default.any.isRequired,
+  locale: _propTypes.default.string
+};
+MenuAccordion.defaultProps = {
+  locale: 'en'
+};

package/lib/SessionManager/translation.js

@@ -0,0 +1,59 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.translations = void 0;
+/* eslint-disable import/prefer-default-export */
+const translations = {
+  en: {
+    edit: 'Edit',
+    account: 'account',
+    switchDid: 'Switch DID',
+    switchTo: 'Switch to',
+    switchProfile: 'Switch Profile',
+    switchPassport: 'Switch Passport',
+    disconnect: 'Disconnect',
+    connect: 'Connect',
+    openInWallet: 'Open DID Wallet',
+    alreadyBindOAuth: 'Already bind Auth0',
+    bind: 'Bind ',
+    thirdParty: 'Third Party Login',
+    connectedWith: 'Connected with',
+    manageAccounts: 'Manage Accounts',
+    manageBlocklet: 'Manage Blocklet',
+    from: 'From',
+    addAnotherAccount: 'Add another account',
+    deleteAccountTitle: 'Remove this account ?',
+    deleteAccountContent: 'After delete account, you can add it agian',
+    confirm: 'Confirm',
+    cancel: 'Cancel',
+    noneMenu: 'Empty menu, maybe you should switch to another role'
+  },
+  zh: {
+    edit: '编辑',
+    account: '账号',
+    switchDid: '切换账户',
+    switchTo: '切换至',
+    switchProfile: '切换用户信息',
+    switchPassport: '切换通行证',
+    disconnect: '退出',
+    connect: '登录',
+    openInWallet: '打开 DID 钱包',
+    // NOTE: 目前只有 Auth0，展示出具体的第三方名字会更好
+    alreadyBindOAuth: '已绑定 Auth0 账号',
+    bind: '绑定',
+    thirdParty: '第三方登录',
+    connectedWith: '连接至',
+    manageAccounts: '管理账户',
+    manageBlocklet: '管理应用',
+    from: '连接至',
+    addAnotherAccount: '添加一个账号',
+    deleteAccountTitle: '是否删除账户？',
+    deleteAccountContent: '账户删除后，可再次添加',
+    confirm: '确认',
+    cancel: '取消',
+    noneMenu: '无操作项，请尝试切换角色'
+  }
+};
+exports.translations = translations;

package/lib/SessionManager/use-accounts.js

@@ -0,0 +1,25 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = useAccounts;
+var _ahooks = require("ahooks");
+function useAccounts() {
+  const [accounts, setAccounts] = (0, _ahooks.useLocalStorageState)('blocklet:sessionManager:accounts', {
+    defaultValue: []
+  });
+  const connectAccount = (0, _ahooks.useMemoizedFn)(account => {
+    const accountIndex = accounts.findIndex(x => x.did === account.did);
+    if (accountIndex >= 0) {
+      accounts.splice(accountIndex, 1);
+    }
+    accounts.unshift(account);
+    setAccounts(accounts);
+  });
+  return {
+    accounts,
+    setAccounts,
+    connectAccount
+  };
+}

package/lib/SessionManager/user-info.js

@@ -0,0 +1,155 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = UserInfo;
+var _material = require("@mui/material");
+var _shieldCheck = _interopRequireDefault(require("@iconify-icons/mdi/shield-check"));
+var _expandMore = _interopRequireDefault(require("@iconify-icons/mdi/expand-more"));
+var _react = require("@iconify/react");
+var _ahooks = require("ahooks");
+var _Avatar = _interopRequireDefault(require("../Avatar"));
+var _Address = _interopRequireDefault(require("../Address"));
+var _DID = _interopRequireDefault(require("../DID"));
+var _Util = require("../Util");
+var _util = require("../Locale/util");
+var _translation = require("./translation");
+var _jsxRuntime = require("react/jsx-runtime");
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+/* eslint-disable react/jsx-no-bind */
+/* eslint-disable react/prop-types */
+
+function UserInfo(_ref) {
+  var _session$user, _session$user$avatar, _session$user3, _session$user4, _session$user6;
+  let {
+    session,
+    locale,
+    onEditUser,
+    onSwitchPassport,
+    switchProfile,
+    hasBindWallet
+  } = _ref;
+  const t = function t(key) {
+    let data = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};
+    return (0, _util.t)(_translation.translations, key, locale, 'en', data);
+  };
+  const avatar = (0, _Util.getUserAvatar)((_session$user = session.user) === null || _session$user === void 0 ? void 0 : (_session$user$avatar = _session$user.avatar) === null || _session$user$avatar === void 0 ? void 0 : _session$user$avatar.replace(/\s/g, encodeURIComponent(' ')));
+  const {
+    walletDid
+  } = session.useDid({
+    session
+  });
+  const currentRole = (0, _ahooks.useCreation)(() => {
+    var _session$user2, _session$user2$passpo;
+    return (_session$user2 = session.user) === null || _session$user2 === void 0 ? void 0 : (_session$user2$passpo = _session$user2.passports) === null || _session$user2$passpo === void 0 ? void 0 : _session$user2$passpo.find(item => item.name === session.user.role);
+  }, [session === null || session === void 0 ? void 0 : (_session$user3 = session.user) === null || _session$user3 === void 0 ? void 0 : _session$user3.passports, session === null || session === void 0 ? void 0 : (_session$user4 = session.user) === null || _session$user4 === void 0 ? void 0 : _session$user4.role]);
+  const userEmail = (0, _ahooks.useCreation)(() => {
+    var _session$user5;
+    return ((_session$user5 = session.user) === null || _session$user5 === void 0 ? void 0 : _session$user5.email) || 'lancelot_lewis@163.com';
+  }, [session === null || session === void 0 ? void 0 : session.user]);
+  const canEdit = (0, _ahooks.useCreation)(() => {
+    if (onEditUser instanceof Function) {
+      if (switchProfile && hasBindWallet && session.provider !== 'federated') {
+        return true;
+      }
+    }
+    return false;
+  }, [onEditUser, switchProfile, hasBindWallet, session.provider]);
+  const _onEditUser = (0, _ahooks.useMemoizedFn)(() => {
+    if (canEdit) {
+      onEditUser();
+    }
+  });
+  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_material.Box, {
+    sx: {
+      display: 'flex',
+      alignItems: 'center',
+      gap: '16px',
+      padding: '15px 20px'
+    },
+    children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_material.Box, {
+      onClick: _onEditUser,
+      "data-cy": "sessionManager-switch-profile-trigger",
+      sx: {
+        cursor: canEdit ? 'pointer' : 'default',
+        position: 'relative',
+        borderRadius: '100%',
+        overflow: 'hidden',
+        fontSize: 0,
+        '&:hover': canEdit ? {
+          '&::after': {
+            content: "\"".concat(t('edit'), "\""),
+            position: 'absolute',
+            bottom: 0,
+            background: 'rgba(0, 0, 0, 0.2)',
+            left: 0,
+            right: 0,
+            height: '2.2em',
+            color: 'white',
+            textAlign: 'center',
+            fontSize: '12px',
+            lineHeight: '2em'
+          }
+        } : {}
+      },
+      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_Avatar.default, {
+        variant: "circle",
+        did: session.user.did,
+        src: avatar,
+        size: 64,
+        shape: "circle"
+      })
+    }), /*#__PURE__*/(0, _jsxRuntime.jsxs)(_material.Box, {
+      sx: {
+        flex: 1,
+        position: 'static',
+        overflow: 'hidden',
+        fontSize: '14px'
+      },
+      children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_material.Typography, {
+        variant: "h5",
+        fontWeight: "bold",
+        mb: 1,
+        children: session.user.fullName
+      }), session.provider === 'auth0' ? walletDid ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_DID.default, {
+        responsive: false,
+        compact: true,
+        did: walletDid
+      }) : null : /*#__PURE__*/(0, _jsxRuntime.jsx)(_DID.default, {
+        responsive: false,
+        compact: true,
+        did: session.user.did
+      }), userEmail ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_Address.default, {
+        responsive: false,
+        children: userEmail
+      }) : null, /*#__PURE__*/(0, _jsxRuntime.jsx)(_material.Chip, {
+        label: (currentRole === null || currentRole === void 0 ? void 0 : currentRole.title) || ((_session$user6 = session.user) === null || _session$user6 === void 0 ? void 0 : _session$user6.role.toUpperCase()),
+        size: "small",
+        variant: "outlined",
+        sx: {
+          height: 'auto',
+          marginRight: 0,
+          position: 'absolute',
+          top: 20,
+          right: 15,
+          fontWeight: 'bold',
+          fontSize: '12px'
+        },
+        icon: /*#__PURE__*/(0, _jsxRuntime.jsx)(_react.Icon, {
+          icon: _shieldCheck.default,
+          height: "0.8em"
+        }),
+        deleteIcon: /*#__PURE__*/(0, _jsxRuntime.jsx)(_react.Icon, {
+          icon: _expandMore.default,
+          height: "1em"
+        })
+        // HACK: 必须设置 onDelete 函数，deleteIcon 才能显示出来
+        ,
+        onDelete: onSwitchPassport,
+        onClick: onSwitchPassport,
+        "data-cy": "sessionManager-switch-passport-trigger"
+      })]
+    })]
+  });
+}

package/lib/SessionManager/user-popper.js

@@ -6,7 +6,8 @@ Object.defineProperty(exports, "__esModule", {
 exports.default = UserPopper;
 var _propTypes = _interopRequireDefault(require("prop-types"));
 var _material = require("@mui/material");
-var _iconsMaterial = require("@mui/icons-material");
+var _close = _interopRequireDefault(require("@iconify-icons/mdi/close"));
+var _react = require("@iconify/react");
 var _Theme = require("../Theme");
 var _jsxRuntime = require("react/jsx-runtime");
 var _templateObject;
@@ -66,7 +67,11 @@ function UserPopper(_ref) {
             zIndex: 1
           },
           onClick: onClose,
-          children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_iconsMaterial.Close, {})
+          children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_react.Icon, {
+            icon: _close.default,
+            width: 20,
+            height: 20
+          })
         }), children]
       })
     })
@@ -87,7 +92,7 @@ UserPopper.defaultProps = {
   onClose: () => {},
   autoClose: true
 };
-const StyledPopper = (0, _Theme.styled)(_material.Popper)(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  z-index: ", ";\n  .MuiList-root {\n    /* HACK: \u9700\u8981288px \u624D\u80FD\u5C06 did \u5C55\u793A\u5B8C\u6574 */\n    width: 290px;\n  }\n  .session-manager-user {\n    font-size: 12px;\n    flex-direction: column;\n    align-items: flex-start;\n    padding: 24px 24px 10px;\n  }\n  .session-manager-user-name {\n    font-size: 20px;\n    color: ", ";\n    font-weight: bold;\n    margin-bottom: 10px;\n    display: flex;\n    align-items: center;\n    justify-content: space-between;\n  }\n  .session-manager-id-item {\n    position: relative;\n    padding-left: 8px;\n    /* HACK: \u5F53\u524D\u5143\u7D20\u65E2\u662F\u7B2C\u4E00\u4E2A\uFF0C\u4E5F\u662F\u6700\u540E\u4E00\u4E2A\uFF0C\u5373\u53EA\u6709\u4E00\u4E2A\u540C\u7EA7\u5143\u7D20 */\n    &:first-of-type:last-of-type {\n      padding-left: 0;\n      &:before,\n      &:after {\n        content: unset;\n      }\n    }\n    &:before {\n      position: absolute;\n      content: '';\n      left: 0px;\n      top: 50%;\n      width: 6px;\n      height: 1px;\n      background-color: #aeaeae;\n    }\n    &:not(:last-of-type):after {\n      position: absolute;\n      content: '';\n      left: 0px;\n      top: 50%;\n      height: 100%;\n      width: 1px;\n      background-color: #aeaeae;\n    }\n  }\n  .session-manager-menu-item {\n    padding: 18.5px 24px;\n    color: #777;\n    font-size: 16px;\n    &:hover {\n      background-color: #fbfbfb;\n    }\n  }\n  .session-manager-menu-icon {\n    color: #999;\n    margin-right: 16px;\n  }\n"])), _ref2 => {
+const StyledPopper = (0, _Theme.styled)(_material.Popper)(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  z-index: ", ";\n  .MuiList-root {\n    width: 320px;\n  }\n  .session-manager-user {\n    font-size: 12px;\n    flex-direction: column;\n    align-items: flex-start;\n    padding: 24px 24px 10px;\n  }\n  .session-manager-user-name {\n    font-size: 20px;\n    color: ", ";\n    font-weight: bold;\n    margin-bottom: 10px;\n    display: flex;\n    align-items: center;\n    justify-content: space-between;\n  }\n  .session-manager-menu-item {\n    padding: 18px 20px;\n    color: #777;\n    font-size: 16px;\n    &:hover {\n      background-color: #fbfbfb;\n    }\n  }\n  .session-manager-menu-icon {\n    color: #999;\n    margin-right: 8px;\n  }\n"])), _ref2 => {
   let {
     theme
   } = _ref2;

package/lib/SessionManager/utils.js

@@ -0,0 +1,16 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.getSourceProvider = exports.getConnectedAccounts = void 0;
+const getSourceProvider = user => {
+  var _user$extraConfigs;
+  return (user === null || user === void 0 ? void 0 : user.sourceProvider) || (user === null || user === void 0 ? void 0 : (_user$extraConfigs = user.extraConfigs) === null || _user$extraConfigs === void 0 ? void 0 : _user$extraConfigs.sourceProvider) || 'wallet';
+};
+exports.getSourceProvider = getSourceProvider;
+const getConnectedAccounts = user => {
+  var _user$extraConfigs2;
+  return (user === null || user === void 0 ? void 0 : user.connectedAccounts) || (user === null || user === void 0 ? void 0 : (_user$extraConfigs2 = user.extraConfigs) === null || _user$extraConfigs2 === void 0 ? void 0 : _user$extraConfigs2.connectedAccounts) || [];
+};
+exports.getConnectedAccounts = getConnectedAccounts;

package/lib/Util/index.js

@@ -16,7 +16,7 @@ exports.mergeProps = mergeProps;
 exports.openWebWallet = openWebWallet;
 exports.parseQuery = parseQuery;
 exports.setDateTool = setDateTool;
-exports.str2color = void 0;
+exports.str2color = exports.sleep = void 0;
 exports.stringifyQuery = stringifyQuery;
 var _padStart = _interopRequireDefault(require("lodash/padStart"));
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
@@ -339,4 +339,13 @@ const getUserAvatar = function getUserAvatar(avatar) {
   }
   return avatar;
 };
-exports.getUserAvatar = getUserAvatar;
+exports.getUserAvatar = getUserAvatar;
+const sleep = function sleep() {
+  let time = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : 0;
+  return new Promise(resolve => {
+    setTimeout(() => {
+      resolve();
+    }, time);
+  });
+};
+exports.sleep = sleep;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@arcblock/ux",
-  "version": "2.7.14",
+  "version": "2.7.16",
   "description": "Common used react components for arcblock products",
   "keywords": [
     "react",
@@ -318,16 +318,19 @@
   "peerDependencies": {
     "react": ">=18.1.0"
   },
-  "gitHead": "bdb3657628085f18d46bca6769f62074d06f54d3",
+  "gitHead": "8adb844a1067ecca748cd70c5978c9f7497e3658",
   "dependencies": {
     "@arcblock/did-motif": "^1.1.13",
-    "@arcblock/icons": "^2.7.14",
-    "@arcblock/react-hooks": "^2.7.14",
+    "@arcblock/icons": "^2.7.16",
+    "@arcblock/react-hooks": "^2.7.16",
     "@babel/plugin-syntax-dynamic-import": "^7.8.3",
     "@emotion/react": "^11.10.4",
     "@emotion/styled": "^11.10.4",
     "@fontsource/lato": "^4.5.10",
     "@fontsource/ubuntu-mono": "^4.5.11",
+    "@iconify-icons/ion": "^1.2.10",
+    "@iconify-icons/mdi": "^1.2.47",
+    "@iconify/react": "^4.1.1",
     "@mui/icons-material": "^5.10.6",
     "@mui/material": "^5.10.8",
     "@solana/qr-code-styling": "^1.6.0-beta.0",
@@ -341,10 +344,10 @@
     "dayjs": "^1.11.5",
     "devices.css": "^0.1.15",
     "highlight.js": "^11.6.0",
+    "iconify-icon": "^1.0.8",
     "is-svg": "^4.3.2",
     "js-cookie": "^2.2.1",
     "lodash": "^4.17.21",
-    "mdi-material-ui": "^7.5.0",
     "mui-datatables": "^4.2.2",
     "notistack": "^2.0.5",
     "pako": "^2.1.0",

package/src/Dialog/confirm.js

@@ -1,9 +1,8 @@
 import PropTypes from 'prop-types';
-import { useContext, forwardRef, useRef, useImperativeHandle } from 'react';
+import { forwardRef, useRef, useImperativeHandle } from 'react';
 import { useMemoizedFn, useReactive } from 'ahooks';
 import noop from 'lodash/noop';
 
-import { LocaleContext } from '../Locale/context';
 import Button from '../Button';
 import Dialog from './dialog';
 
@@ -98,8 +97,6 @@ Confirm.defaultProps = {
 };
 
 const ConfirmHolder = forwardRef((props, ref) => {
-  const { t } = useContext(LocaleContext);
-
   const state = useReactive({
     show: false,
     title: '',
@@ -107,6 +104,8 @@ const ConfirmHolder = forwardRef((props, ref) => {
     onConfirm: noop,
     onCancel: noop,
     loading: false,
+    confirmButtonText: 'Confirm',
+    cancelButtonText: 'Cancel',
   });
   const open = useMemoizedFn((params = {}) => {
     state.show = true;
@@ -114,6 +113,8 @@ const ConfirmHolder = forwardRef((props, ref) => {
     state.content = params.content;
     state.onConfirm = params.onConfirm || noop;
     state.onCancel = params.onCancel || noop;
+    if (params.confirmButtonText) state.confirmButtonText = params.confirmButtonText;
+    if (params.cancelButtonText) state.cancelButtonText = params.cancelButtonText;
     state.loading = false;
   });
   const reset = useMemoizedFn(() => {
@@ -121,6 +122,8 @@ const ConfirmHolder = forwardRef((props, ref) => {
     state.content = '';
     state.onConfirm = noop;
     state.onCancel = noop;
+    state.confirmButtonText = 'Confirm';
+    state.cancelButtonText = 'Cancel';
   });
   const close = useMemoizedFn(() => {
     state.show = false;
@@ -158,7 +161,7 @@ const ConfirmHolder = forwardRef((props, ref) => {
       onConfirm={onConfirm}
       onCancel={onCancel}
       confirmButton={{
-        text: t('common.confirm'),
+        text: state.confirmButtonText,
         props: {
           variant: 'contained',
           color: 'primary',
@@ -166,7 +169,7 @@ const ConfirmHolder = forwardRef((props, ref) => {
         },
       }}
       cancelButton={{
-        text: t('common.cancel'),
+        text: state.cancelButtonText,
         props: {
           variant: 'outlined',
           color: 'primary',

package/src/Img/index.js

@@ -1,9 +1,9 @@
 import { useEffect, useMemo, useState } from 'react';
 import PropTypes from 'prop-types';
-import SvgIcon from '@mui/material/SvgIcon';
 import { useInView } from 'react-intersection-observer';
-import Alert from 'mdi-material-ui/Alert';
-import ImageIcon from 'mdi-material-ui/Image';
+import AlertIcon from '@iconify-icons/mdi/alert';
+import ImageIcon from '@iconify-icons/mdi/image';
+import { Icon } from '@iconify/react';
 import { styled } from '../Theme';
 
 /**
@@ -160,12 +160,12 @@ function Img({
       <div className={`image ${className} ${classes.root}`} style={mergedStyle}>
         {!fallback && imgState === 'error' && (
           <div className="image--state" title="loading image">
-            <SvgIcon component={Alert} className="image--icon" />
+            <Icon icon={AlertIcon} className="image--icon" />
           </div>
         )}
         {!placeholder && imgState === 'loading' && (
           <div className="image--state" title="Image load error">
-            <SvgIcon component={ImageIcon} className="image--icon" />
+            <Icon icon={ImageIcon} className="image--icon" />
           </div>
         )}
         {imgState === 'loaded' && <img className="image--img" src={src} alt={alt} />}