@arcblock/ux 2.7.15 → 2.7.16

package/es/SessionManager/menu-accordion.js

@@ -0,0 +1,95 @@
+import PropTypes from 'prop-types';
+import { Accordion, AccordionDetails, AccordionSummary, MenuItem } from '@mui/material';
+import ExpandMoreIcon from '@iconify-icons/mdi/expand-more';
+import { Icon } from '@iconify/react';
+import isEmpty from 'lodash/isEmpty';
+import isNil from 'lodash/isNil';
+import { useCreation, useMemoizedFn } from 'ahooks';
+import { translate } from '../Locale/util';
+import { translations } from './translation';
+import { jsx as _jsx } from "react/jsx-runtime";
+import { jsxs as _jsxs } from "react/jsx-runtime";
+function isEmptyNode(node) {
+  if (isNil(node)) {
+    return true;
+  }
+  if (isEmpty(node)) {
+    return true;
+  }
+  if (Array.isArray(node)) {
+    return node.every(item => isEmptyNode(item));
+  }
+  return false;
+}
+export default function MenuAccordion({
+  title,
+  children,
+  locale
+}) {
+  const isEmptyChildren = useCreation(() => isEmptyNode(children), [children]);
+  const t = useMemoizedFn((key, data = {}) => {
+    return translate(translations, key, locale, 'en', data);
+  });
+  return /*#__PURE__*/_jsxs(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__*/_jsx(MenuItem, {
+      sx: {
+        padding: 0,
+        width: '100%'
+      },
+      children: /*#__PURE__*/_jsx(AccordionSummary, {
+        className: "session-manager-menu-item",
+        expandIcon: /*#__PURE__*/_jsx(Icon, {
+          icon: ExpandMoreIcon,
+          width: 24,
+          height: 24
+        }),
+        children: title
+      })
+    }), /*#__PURE__*/_jsx(AccordionDetails, {
+      children: isEmptyChildren ? /*#__PURE__*/_jsx(MenuItem, {
+        disabled: true,
+        className: "session-manager-menu-item",
+        sx: {
+          justifyContent: 'center'
+        },
+        children: t('noneMenu')
+      }, "empty") : children
+    })]
+  });
+}
+MenuAccordion.propTypes = {
+  title: PropTypes.any.isRequired,
+  children: PropTypes.any.isRequired,
+  locale: PropTypes.string
+};
+MenuAccordion.defaultProps = {
+  locale: 'en'
+};

package/es/SessionManager/translation.js

@@ -0,0 +1,52 @@
+/* eslint-disable import/prefer-default-export */
+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: '无操作项，请尝试切换角色'
+  }
+};

package/es/SessionManager/use-accounts.js

@@ -0,0 +1,19 @@
+import { useLocalStorageState, useMemoizedFn } from 'ahooks';
+export default function useAccounts() {
+  const [accounts, setAccounts] = useLocalStorageState('blocklet:sessionManager:accounts', {
+    defaultValue: []
+  });
+  const connectAccount = 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/es/SessionManager/user-info.js

@@ -0,0 +1,139 @@
+/* eslint-disable react/jsx-no-bind */
+/* eslint-disable react/prop-types */
+import { Box, Chip, Typography } from '@mui/material';
+import ShieldCheckIcon from '@iconify-icons/mdi/shield-check';
+import ExpandMoreIcon from '@iconify-icons/mdi/expand-more';
+import { Icon } from '@iconify/react';
+import { useCreation, useMemoizedFn } from 'ahooks';
+import DidAvatar from '../Avatar';
+import DidAddress from '../Address';
+import DID from '../DID';
+import { getUserAvatar } from '../Util';
+import { t as translate } from '../Locale/util';
+import { translations } from './translation';
+import { jsx as _jsx } from "react/jsx-runtime";
+import { jsxs as _jsxs } from "react/jsx-runtime";
+export default function UserInfo({
+  session,
+  locale,
+  onEditUser,
+  onSwitchPassport,
+  switchProfile,
+  hasBindWallet
+}) {
+  const t = (key, data = {}) => {
+    return translate(translations, key, locale, 'en', data);
+  };
+  const avatar = getUserAvatar(session.user?.avatar?.replace(/\s/g, encodeURIComponent(' ')));
+  const {
+    walletDid
+  } = session.useDid({
+    session
+  });
+  const currentRole = useCreation(() => session.user?.passports?.find(item => item.name === session.user.role), [session?.user?.passports, session?.user?.role]);
+  const userEmail = useCreation(() => session.user?.email || 'lancelot_lewis@163.com', [session?.user]);
+  const canEdit = useCreation(() => {
+    if (onEditUser instanceof Function) {
+      if (switchProfile && hasBindWallet && session.provider !== 'federated') {
+        return true;
+      }
+    }
+    return false;
+  }, [onEditUser, switchProfile, hasBindWallet, session.provider]);
+  const _onEditUser = useMemoizedFn(() => {
+    if (canEdit) {
+      onEditUser();
+    }
+  });
+  return /*#__PURE__*/_jsxs(Box, {
+    sx: {
+      display: 'flex',
+      alignItems: 'center',
+      gap: '16px',
+      padding: '15px 20px'
+    },
+    children: [/*#__PURE__*/_jsx(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: `"${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__*/_jsx(DidAvatar, {
+        variant: "circle",
+        did: session.user.did,
+        src: avatar,
+        size: 64,
+        shape: "circle"
+      })
+    }), /*#__PURE__*/_jsxs(Box, {
+      sx: {
+        flex: 1,
+        position: 'static',
+        overflow: 'hidden',
+        fontSize: '14px'
+      },
+      children: [/*#__PURE__*/_jsx(Typography, {
+        variant: "h5",
+        fontWeight: "bold",
+        mb: 1,
+        children: session.user.fullName
+      }), session.provider === 'auth0' ? walletDid ? /*#__PURE__*/_jsx(DID, {
+        responsive: false,
+        compact: true,
+        did: walletDid
+      }) : null : /*#__PURE__*/_jsx(DID, {
+        responsive: false,
+        compact: true,
+        did: session.user.did
+      }), userEmail ? /*#__PURE__*/_jsx(DidAddress, {
+        responsive: false,
+        children: userEmail
+      }) : null, /*#__PURE__*/_jsx(Chip, {
+        label: currentRole?.title || session.user?.role.toUpperCase(),
+        size: "small",
+        variant: "outlined",
+        sx: {
+          height: 'auto',
+          marginRight: 0,
+          position: 'absolute',
+          top: 20,
+          right: 15,
+          fontWeight: 'bold',
+          fontSize: '12px'
+        },
+        icon: /*#__PURE__*/_jsx(Icon, {
+          icon: ShieldCheckIcon,
+          height: "0.8em"
+        }),
+        deleteIcon: /*#__PURE__*/_jsx(Icon, {
+          icon: ExpandMoreIcon,
+          height: "1em"
+        })
+        // HACK: 必须设置 onDelete 函数，deleteIcon 才能显示出来
+        ,
+        onDelete: onSwitchPassport,
+        onClick: onSwitchPassport,
+        "data-cy": "sessionManager-switch-passport-trigger"
+      })]
+    })]
+  });
+}

package/es/SessionManager/user-popper.js

@@ -1,6 +1,7 @@
 import PropTypes from 'prop-types';
 import { IconButton, Paper, Popper, ClickAwayListener } from '@mui/material';
-import { Close as CloseIcon } from '@mui/icons-material';
+import CloseIcon from '@iconify-icons/mdi/close';
+import { Icon } from '@iconify/react';
 import { styled } from '../Theme';
 import { jsx as _jsx } from "react/jsx-runtime";
 import { Fragment as _Fragment } from "react/jsx-runtime";
@@ -58,7 +59,11 @@ export default function UserPopper({
             zIndex: 1
           },
           onClick: onClose,
-          children: /*#__PURE__*/_jsx(CloseIcon, {})
+          children: /*#__PURE__*/_jsx(Icon, {
+            icon: CloseIcon,
+            width: 20,
+            height: 20
+          })
         }), children]
       })
     })
@@ -86,8 +91,7 @@ const StyledPopper = styled(Popper)`
   return theme.zIndex.tooltip;
 }};
   .MuiList-root {
-    /* HACK: 需要288px 才能将 did 展示完整 */
-    width: 290px;
+    width: 320px;
   }
   .session-manager-user {
     font-size: 12px;
@@ -106,38 +110,8 @@ const StyledPopper = styled(Popper)`
     align-items: center;
     justify-content: space-between;
   }
-  .session-manager-id-item {
-    position: relative;
-    padding-left: 8px;
-    /* HACK: 当前元素既是第一个，也是最后一个，即只有一个同级元素 */
-    &:first-of-type:last-of-type {
-      padding-left: 0;
-      &:before,
-      &:after {
-        content: unset;
-      }
-    }
-    &:before {
-      position: absolute;
-      content: '';
-      left: 0px;
-      top: 50%;
-      width: 6px;
-      height: 1px;
-      background-color: #aeaeae;
-    }
-    &:not(:last-of-type):after {
-      position: absolute;
-      content: '';
-      left: 0px;
-      top: 50%;
-      height: 100%;
-      width: 1px;
-      background-color: #aeaeae;
-    }
-  }
   .session-manager-menu-item {
-    padding: 18.5px 24px;
+    padding: 18px 20px;
     color: #777;
     font-size: 16px;
     &:hover {
@@ -146,6 +120,6 @@ const StyledPopper = styled(Popper)`
   }
   .session-manager-menu-icon {
     color: #999;
-    margin-right: 16px;
+    margin-right: 8px;
   }
 `;

package/es/SessionManager/utils.js

@@ -0,0 +1,2 @@
+export const getSourceProvider = user => user?.sourceProvider || user?.extraConfigs?.sourceProvider || 'wallet';
+export const getConnectedAccounts = user => user?.connectedAccounts || user?.extraConfigs?.connectedAccounts || [];

package/es/Util/index.js

@@ -295,4 +295,11 @@ export const getUserAvatar = (avatar, size = 48) => {
     });
   }
   return avatar;
+};
+export const sleep = (time = 0) => {
+  return new Promise(resolve => {
+    setTimeout(() => {
+      resolve();
+    }, time);
+  });
 };

package/lib/Dialog/confirm.js

@@ -9,7 +9,6 @@ var _propTypes = _interopRequireDefault(require("prop-types"));
 var _react = require("react");
 var _ahooks = require("ahooks");
 var _noop = _interopRequireDefault(require("lodash/noop"));
-var _context = require("../Locale/context");
 var _Button = _interopRequireDefault(require("../Button"));
 var _dialog = _interopRequireDefault(require("./dialog"));
 var _jsxRuntime = require("react/jsx-runtime");
@@ -106,16 +105,15 @@ Confirm.defaultProps = {
   PaperProps: {}
 };
 const ConfirmHolder = /*#__PURE__*/(0, _react.forwardRef)((props, ref) => {
-  const {
-    t
-  } = (0, _react.useContext)(_context.LocaleContext);
   const state = (0, _ahooks.useReactive)({
     show: false,
     title: '',
     content: '',
     onConfirm: _noop.default,
     onCancel: _noop.default,
-    loading: false
+    loading: false,
+    confirmButtonText: 'Confirm',
+    cancelButtonText: 'Cancel'
   });
   const open = (0, _ahooks.useMemoizedFn)(function () {
     let params = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
@@ -124,6 +122,8 @@ const ConfirmHolder = /*#__PURE__*/(0, _react.forwardRef)((props, ref) => {
     state.content = params.content;
     state.onConfirm = params.onConfirm || _noop.default;
     state.onCancel = params.onCancel || _noop.default;
+    if (params.confirmButtonText) state.confirmButtonText = params.confirmButtonText;
+    if (params.cancelButtonText) state.cancelButtonText = params.cancelButtonText;
     state.loading = false;
   });
   const reset = (0, _ahooks.useMemoizedFn)(() => {
@@ -131,6 +131,8 @@ const ConfirmHolder = /*#__PURE__*/(0, _react.forwardRef)((props, ref) => {
     state.content = '';
     state.onConfirm = _noop.default;
     state.onCancel = _noop.default;
+    state.confirmButtonText = 'Confirm';
+    state.cancelButtonText = 'Cancel';
   });
   const close = (0, _ahooks.useMemoizedFn)(() => {
     state.show = false;
@@ -162,7 +164,7 @@ const ConfirmHolder = /*#__PURE__*/(0, _react.forwardRef)((props, ref) => {
     onConfirm: onConfirm,
     onCancel: onCancel,
     confirmButton: {
-      text: t('common.confirm'),
+      text: state.confirmButtonText,
       props: {
         variant: 'contained',
         color: 'primary',
@@ -170,7 +172,7 @@ const ConfirmHolder = /*#__PURE__*/(0, _react.forwardRef)((props, ref) => {
       }
     },
     cancelButton: {
-      text: t('common.cancel'),
+      text: state.cancelButtonText,
       props: {
         variant: 'outlined',
         color: 'primary'

package/lib/Img/index.js

@@ -6,10 +6,10 @@ Object.defineProperty(exports, "__esModule", {
 exports.default = void 0;
 var _react = require("react");
 var _propTypes = _interopRequireDefault(require("prop-types"));
-var _SvgIcon = _interopRequireDefault(require("@mui/material/SvgIcon"));
 var _reactIntersectionObserver = require("react-intersection-observer");
-var _Alert = _interopRequireDefault(require("mdi-material-ui/Alert"));
-var _Image = _interopRequireDefault(require("mdi-material-ui/Image"));
+var _alert = _interopRequireDefault(require("@iconify-icons/mdi/alert"));
+var _image = _interopRequireDefault(require("@iconify-icons/mdi/image"));
+var _react2 = require("@iconify/react");
 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"];
@@ -173,15 +173,15 @@ function Img(_ref) {
         children: [!fallback && imgState === 'error' && /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
           className: "image--state",
           title: "loading image",
-          children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_SvgIcon.default, {
-            component: _Alert.default,
+          children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_react2.Icon, {
+            icon: _alert.default,
             className: "image--icon"
           })
         }), !placeholder && imgState === 'loading' && /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
           className: "image--state",
           title: "Image load error",
-          children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_SvgIcon.default, {
-            component: _Image.default,
+          children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_react2.Icon, {
+            icon: _image.default,
             className: "image--icon"
           })
         }), imgState === 'loaded' && /*#__PURE__*/(0, _jsxRuntime.jsx)("img", {

package/lib/SessionManager/account-item.js

@@ -0,0 +1,140 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = AccountItem;
+var _material = require("@mui/material");
+var _propTypes = _interopRequireDefault(require("prop-types"));
+var _react = require("@iconify/react");
+var _check = _interopRequireDefault(require("@iconify-icons/mdi/check"));
+var _trashCanOutline = _interopRequireDefault(require("@iconify-icons/mdi/trash-can-outline"));
+var _ahooks = require("ahooks");
+var _Avatar = _interopRequireDefault(require("../Avatar"));
+var _DID = _interopRequireDefault(require("../DID"));
+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 AccountItem(_ref) {
+  let {
+    account,
+    active,
+    onDelete,
+    onChoose,
+    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);
+  });
+  const _onChoose = (0, _ahooks.useMemoizedFn)(() => onChoose(account, {
+    active
+  }));
+  const _onDelete = (0, _ahooks.useMemoizedFn)(e => {
+    e.preventDefault();
+    e.stopPropagation();
+    onDelete(account, {
+      active
+    });
+  });
+  if (!(account !== null && account !== void 0 && account.did) || !(account !== null && account !== void 0 && account.appName)) {
+    return null;
+  }
+  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_material.MenuItem, {
+    onClick: _onChoose,
+    sx: {
+      display: 'flex',
+      alignItems: 'center',
+      overflow: 'hidden',
+      gap: '8px',
+      position: 'relative',
+      '.account-item-actions': {
+        position: 'absolute',
+        right: 0,
+        top: 0,
+        bottom: 0,
+        marginRight: '12px',
+        display: 'flex',
+        alignItems: 'center'
+      },
+      '.account-item-action': {
+        alignItems: 'center',
+        display: 'none'
+      },
+      '&:hover .account-item-action': {
+        display: 'flex'
+      }
+    },
+    className: "session-manager-menu-item",
+    children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_Avatar.default, {
+      did: account.did
+    }), /*#__PURE__*/(0, _jsxRuntime.jsxs)(_material.Box, {
+      sx: {
+        flex: 1,
+        overflow: 'hidden',
+        fontSize: 0,
+        '.did-address-avatar': {
+          display: 'none !important'
+        }
+      },
+      children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_DID.default, {
+        did: account.did,
+        copyable: false,
+        size: 14,
+        responsive: false,
+        compact: true,
+        sx: {
+          lineHeight: 1
+        }
+      }), /*#__PURE__*/(0, _jsxRuntime.jsxs)(_material.Typography, {
+        variant: "caption",
+        children: [t('from'), ' ', account.provider === 'federated' ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_material.Link, {
+          href: account.appUrl,
+          target: "_blank",
+          underline: "none",
+          children: account.appName
+        }) : account.appName]
+      })]
+    }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_material.Box, {
+      className: "account-item-actions",
+      children: active ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_material.Box, {
+        className: "account-item-action",
+        style: {
+          display: 'flex'
+        },
+        children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_material.IconButton, {
+          color: "success",
+          children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_react.Icon, {
+            icon: _check.default,
+            color: "success"
+          })
+        })
+      }, "CheckIcon") : /*#__PURE__*/(0, _jsxRuntime.jsx)(_material.Box, {
+        className: "account-item-action",
+        children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_material.IconButton, {
+          color: "error",
+          onClick: _onDelete,
+          children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_react.Icon, {
+            icon: _trashCanOutline.default,
+            color: "error"
+          })
+        })
+      }, "TrashCanOutlineIcon")
+    })]
+  });
+}
+AccountItem.propTypes = {
+  account: _propTypes.default.object,
+  active: _propTypes.default.bool,
+  locale: _propTypes.default.string,
+  onChoose: _propTypes.default.func,
+  onDelete: _propTypes.default.func
+};
+AccountItem.defaultProps = {
+  account: null,
+  active: false,
+  locale: 'en',
+  onChoose: () => {},
+  onDelete: () => {}
+};