@arcblock/ux 2.9.13 → 2.9.15

package/lib/withTracker/index.js

@@ -10,15 +10,15 @@ var _ahooks = require("ahooks");
 var _reactRouterDom = require("react-router-dom");
 var _error_boundary = _interopRequireDefault(require("./error_boundary"));
 var _jsxRuntime = require("react/jsx-runtime");
-function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
-function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
+function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(e) { return e ? t : r; })(e); }
+function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && Object.prototype.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
 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 ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
+function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
 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); } /* eslint-disable import/no-unresolved */
-var _default = function _default(WrappedComponent) {
+function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol" == typeof i ? i : String(i); }
+function _toPrimitive(t, r) { if ("object" != typeof t || !t) return t; var e = t[Symbol.toPrimitive]; if (void 0 !== e) { var i = e.call(t, r || "default"); if ("object" != typeof i) return i; throw new TypeError("@@toPrimitive must return a primitive value."); } return ("string" === r ? String : Number)(t); } /* eslint-disable import/no-unresolved */
+var _default = exports.default = function _default(WrappedComponent) {
   let options = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};
   const {
     appVersion,
@@ -61,5 +61,4 @@ var _default = function _default(WrappedComponent) {
     }
     return /*#__PURE__*/(0, _jsxRuntime.jsx)(WrappedComponent, _objectSpread({}, props));
   };
-};
-exports.default = _default;
+};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@arcblock/ux",
-  "version": "2.9.13",
+  "version": "2.9.15",
   "description": "Common used react components for arcblock products",
   "keywords": [
     "react",
@@ -215,6 +215,10 @@
       "import": "./es/PageScroller/index.js",
       "require": "./lib/PageScroller/index.js"
     },
+    "./lib/Passport": {
+      "import": "./es/Passport/index.js",
+      "require": "./lib/Passport/index.js"
+    },
     "./lib/PoweredByArcBlock": {
       "import": "./es/PoweredByArcBlock/index.js",
       "require": "./lib/PoweredByArcBlock/index.js"
@@ -340,16 +344,17 @@
   "peerDependencies": {
     "react": ">=18.1.0"
   },
-  "gitHead": "c32202066e023e3ca91905f3d3292ac480325cd4",
+  "gitHead": "2402b2d3888dcac685215c373afd7651e6907acc",
   "dependencies": {
     "@arcblock/did-motif": "^1.1.13",
-    "@arcblock/icons": "^2.9.13",
-    "@arcblock/react-hooks": "^2.9.13",
+    "@arcblock/icons": "^2.9.15",
+    "@arcblock/nft-display": "^2.9.15",
+    "@arcblock/react-hooks": "^2.9.15",
     "@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",
+    "@fontsource/inter": "^5.0.16",
+    "@fontsource/ubuntu-mono": "^5.0.18",
     "@iconify-icons/logos": "^1.2.36",
     "@iconify-icons/material-symbols": "^1.2.58",
     "@iconify-icons/mdi": "^1.2.48",
@@ -368,6 +373,7 @@
     "devices.css": "^0.1.15",
     "highlight.js": "^11.6.0",
     "iconify-icon": "^1.0.8",
+    "iconify-icons-material-symbols-400": "^0.0.1",
     "is-svg": "^4.3.2",
     "js-cookie": "^2.2.1",
     "lodash": "^4.17.21",

package/src/Address/did-address.jsx

@@ -92,20 +92,12 @@ const DidAddress = forwardRef(
     return (
       <Root as={component} size={size} {...rest} ref={ref}>
         {prepend}
+        <Box sx={{ display: 'none' }} ref={textRef}>
+          {children}
+        </Box>
         {/* 注意: 该元素必须渲染(可以隐藏), 以便 compact 模式下复制的文本是完整的 */}
         <Tooltip title={copyable ? '' : translations[locale].copied} placement="bottom" arrow open={copied}>
-          <Box
-            ref={textRef}
-            component="span"
-            className="did-address-text did-address-truncate"
-            sx={{
-              display: compact ? 'none' : 'inline',
-              cursor: copyable ? 'text' : 'pointer',
-            }}
-            onDoubleClick={copyable ? noop : onCopy}>
-            {children}
-          </Box>
-          {compact && (
+          {compact ? (
             <Box
               component="span"
               className="did-address-text"
@@ -120,6 +112,17 @@ const DidAddress = forwardRef(
                 {children}
               </CompactText>
             </Box>
+          ) : (
+            <Box
+              component="span"
+              className="did-address-text did-address-truncate"
+              sx={{
+                display: compact ? 'none' : 'inline',
+                cursor: copyable ? 'text' : 'pointer',
+              }}
+              onDoubleClick={copyable ? noop : onCopy}>
+              {children}
+            </Box>
           )}
         </Tooltip>
         {copyElement}

package/src/Colors/themes/temp.js

@@ -13,6 +13,15 @@ const colors = {
   primaryBase: 'rgba(19, 125, 250, 1)',
   primary100: 'rgba(19, 125, 250, 1)',
   gray6: 'rgba(17, 22, 24, 0.06)',
+  backgroundsBgSubtitle: 'rgba(249, 250, 251, 1)',
+  backgroundsBgComponent: 'rgba(241, 243, 245, 1)',
+  backgroundsBgField: 'rgba(249, 250, 251, 1)',
+  foregroundsFgBase: 'rgba(3, 7, 18, 1)',
+  foregroundsFgSubtile: 'rgba(75, 85, 99, 1)',
+  strokeBorderBase: 'rgba(229, 231, 235, 1)',
+  strokeBorderStrong: 'rgba(209, 213, 219, 1)',
+  buttonsButtonNeutral: 'rgba(255, 255, 255, 1)',
+  buttonsButtonNeutralHover: 'rgba(243, 244, 246, 1)',
 };
 
 export default colors;

package/src/Dialog/confirm.jsx

@@ -0,0 +1,94 @@
+import PropTypes from 'prop-types';
+
+import Button from '../Button';
+import Dialog from './dialog';
+
+/**
+  @typedef {Object} ConfirmProps
+  @property {boolean} open
+  @property {React.ReactNode} title
+  @property {React.ReactNode} children
+  @property {() => void | Promise<void>} onConfirm
+  @property {() => void | Promise<void>} onCancel
+  @property {boolean} [showCancelButton=true]
+  @property {{text: string, props?: import('../Button/wrap').ButtonProps}} [confirmButton={text: 'Confirm'}]
+  @property {{text: string, props?: import('../Button/wrap').ButtonProps}} [cancelButton={text: 'Cancel'}]
+  @property {import('@mui/material').PaperProps} [PaperProps={}]
+*/
+
+// 注意排在 {...rest} 之后的 props 优先级更高
+/**
+ *
+ * @param {ConfirmProps} props
+ * @returns {import('react').ReactComponentElement}
+ */
+export default function Confirm({
+  title,
+  children,
+  onConfirm,
+  onCancel,
+  showCancelButton,
+  confirmButton,
+  cancelButton,
+  PaperProps,
+  ...rest
+}) {
+  // 去除 dialog 默认的 300 最小高度
+  PaperProps.style = Object.assign(
+    {
+      minHeight: 0,
+    },
+    PaperProps.style
+  );
+
+  return (
+    <Dialog
+      title={title}
+      PaperProps={PaperProps}
+      {...rest}
+      onClose={() => onCancel()}
+      actions={
+        <>
+          {showCancelButton && (
+            <Button onClick={() => onCancel()} color="primary" {...cancelButton.props}>
+              {cancelButton.text}
+            </Button>
+          )}
+          <Button onClick={() => onConfirm()} color="primary" autoFocus {...confirmButton.props}>
+            {confirmButton.text}
+          </Button>
+        </>
+      }>
+      {children}
+    </Dialog>
+  );
+}
+
+Confirm.propTypes = {
+  title: PropTypes.node.isRequired,
+  children: PropTypes.node.isRequired,
+  onConfirm: PropTypes.func.isRequired,
+  onCancel: PropTypes.func.isRequired,
+  showCancelButton: PropTypes.bool,
+  // 可以传入 {text: ..., props: ...}
+  confirmButton: PropTypes.shape({
+    text: PropTypes.string.isRequired,
+    props: PropTypes.object,
+  }),
+  cancelButton: PropTypes.shape({
+    text: PropTypes.string.isRequired,
+    props: PropTypes.object,
+  }),
+  PaperProps: PropTypes.object,
+};
+
+Confirm.defaultProps = {
+  showCancelButton: true,
+  confirmButton: {
+    text: 'Confirm',
+  },
+  cancelButton: {
+    text: 'Cancel',
+  },
+  PaperProps: {},
+};

package/src/Dialog/{dialog.js → dialog.jsx}

@@ -1,10 +1,13 @@
 import PropTypes from 'prop-types';
-import MuiDialog from '@mui/material/Dialog';
-import MuiDialogContent from '@mui/material/DialogContent';
-import DialogActions from '@mui/material/DialogActions';
-import IconButton from '@mui/material/IconButton';
-import useMediaQuery from '@mui/material/useMediaQuery';
 import CloseIcon from '@mui/icons-material/Close';
+import {
+  Typography,
+  Dialog as MuiDialog,
+  DialogContent as MuiDialogContent,
+  DialogActions,
+  IconButton,
+  useMediaQuery,
+} from '@mui/material';
 
 import { styled, useTheme } from '../Theme';
 
@@ -25,7 +28,7 @@ import { styled, useTheme } from '../Theme';
   @property {boolean} [showCloseButton=true] - Whether or not to show the close button.
   @property {'left'|'center'|'right'} [actionsPosition='right'] - The position of the actions toolbar.
   @property {PaperStyle} [PaperProps] - Props to be passed down to the dialog paper.
-  @property {(event: React.SyntheticEvent, reason: string) => void} [onClose] - Callback function fired when the dialog is closed. 
+  @property {(event: React.SyntheticEvent, reason: string) => void} [onClose] - Callback function fired when the dialog is closed.
 */
 
 /**
@@ -74,7 +77,11 @@ function Dialog({ children, title, prepend, toolbar, actions, showCloseButton, a
           <div className="ux-dialog_left">
             {showCloseButton && isMobile && closeButton}
             {prepend && <div className="ux-dialog_prepend">{prepend}</div>}
-            {title && <h6 className="ux-dialog_title">{title}</h6>}
+            {title && (
+              <Typography variant="h6" className="ux-dialog_title">
+                {title}
+              </Typography>
+            )}
           </div>
 
           <div className="ux-dialog_right">

package/src/Dialog/index.js

@@ -1,4 +1,4 @@
 // eslint-disable-next-line no-restricted-exports
 export { default } from './dialog';
 export { default as Confirm } from './confirm';
-export { useConfirm } from './confirm';
+export { default as useConfirm } from './use-confirm';

package/src/Dialog/use-confirm.jsx

@@ -0,0 +1,114 @@
+import { forwardRef, useImperativeHandle, useRef, useState } from 'react';
+import { useMemoizedFn, useReactive } from 'ahooks';
+import noop from 'lodash/noop';
+
+import Confirm from './confirm';
+
+const ConfirmHolder = forwardRef((props, ref) => {
+  // HACK: 这里默认值不使用 null，来避免开发环境中的字段必填警告
+  const [title, setTitle] = useState('');
+  const [content, setContent] = useState('');
+  const state = useReactive({
+    show: false,
+    onConfirm: noop,
+    onCancel: noop,
+    loading: false,
+    confirmButtonText: 'Confirm',
+    cancelButtonText: 'Cancel',
+  });
+  const open = useMemoizedFn((params = {}) => {
+    setTitle(params.title);
+    setContent(params.content);
+    state.onConfirm = params.onConfirm || noop;
+    state.onCancel = params.onCancel || noop;
+    state.showCancelButton = params.showCancelButton ?? true;
+    if (params.confirmButtonText) state.confirmButtonText = params.confirmButtonText;
+    if (params.cancelButtonText) state.cancelButtonText = params.cancelButtonText;
+
+    state.loading = false;
+    state.show = true;
+  });
+  const reset = useMemoizedFn(() => {
+    setTitle('');
+    setContent('');
+    state.onConfirm = noop;
+    state.onCancel = noop;
+    state.confirmButtonText = 'Confirm';
+    state.cancelButtonText = 'Cancel';
+  });
+  const close = useMemoizedFn(() => {
+    state.show = false;
+    setTimeout(() => {
+      reset();
+    }, 300);
+  });
+  const onCancel = useMemoizedFn(() => {
+    close();
+    state?.onCancel();
+  }, []);
+  const onConfirm = useMemoizedFn(async () => {
+    state.loading = true;
+    try {
+      await state?.onConfirm(close);
+    } finally {
+      state.loading = false;
+    }
+  }, []);
+  useImperativeHandle(
+    ref,
+    () => {
+      return {
+        open,
+        close,
+      };
+    },
+    [open, close]
+  );
+
+  return (
+    <Confirm
+      {...props}
+      open={state.show}
+      title={title}
+      onConfirm={onConfirm}
+      onCancel={onCancel}
+      confirmButton={{
+        text: state.confirmButtonText,
+        props: {
+          variant: 'contained',
+          color: 'primary',
+          loading: state.loading,
+        },
+      }}
+      showCancelButton={state.showCancelButton}
+      cancelButton={{
+        text: state.cancelButtonText,
+        props: {
+          variant: 'outlined',
+          color: 'primary',
+        },
+      }}>
+      {content}
+    </Confirm>
+  );
+});
+
+export default function useConfirm(props = {}) {
+  const confirmRef = useRef(null);
+
+  const open = useMemoizedFn((...args) => {
+    confirmRef.current?.open(...args);
+  });
+  const close = useMemoizedFn((...args) => {
+    confirmRef.current?.close(...args);
+  });
+  const confirmApi = {
+    open,
+    close,
+  };
+
+  return {
+    confirmHolder: <ConfirmHolder {...props} ref={confirmRef} />,
+    confirmApi,
+  };
+}

package/src/Locale/selector.jsx

@@ -3,8 +3,8 @@ import { useState, useContext, useRef, useMemo } from 'react';
 import PropTypes from 'prop-types';
 import { Button, Typography, IconButton, Popper, MenuItem, MenuList, Box, ClickAwayListener } from '@mui/material';
 import { Icon as IconifyIcon } from '@iconify/react';
-import LanguageIcon from '@iconify-icons/material-symbols/language';
 import CheckIcon from '@iconify-icons/material-symbols/check';
+import LanguageIcon from 'iconify-icons-material-symbols-400/language';
 import noop from 'lodash/noop';
 
 import { getColor, getBackground } from '../Util';

package/src/Locale/util.js

@@ -1,19 +1,26 @@
+import get from 'lodash/get';
+
 /* eslint-disable no-prototype-builtins */
 export const replace = (template, data) =>
   template.replace(/{(\w*)}/g, (m, key) => (data.hasOwnProperty(key) ? data[key] : ''));
 
 export const translate = (translations, key, locale, fallbackLocale = 'en', data = {}) => {
-  if (!translations[locale] || !translations[locale][key]) {
+  const translation = translations[locale];
+  const translationValue = get(translation, key);
+  const fallbackValue = get(translations[fallbackLocale], key);
+
+  if (!translation || !translationValue) {
     console.warn(`Warning: no ${key} translation of ${locale}`);
-    if (fallbackLocale && translations[fallbackLocale]?.[key]) {
-      return replace(translations[fallbackLocale]?.[key], data);
+    if (fallbackLocale && fallbackValue) {
+      return replace(fallbackValue, data);
     }
     return key;
   }
+
   if (typeof translations[locale] === 'function' || translations[locale].then) {
-    return replace(translations[fallbackLocale][key], data);
+    return replace(fallbackValue, data);
   }
-  return replace(translations[locale][key], data);
+  return replace(translationValue, data);
 };
 
 export const t = translate;

package/src/Passport/index.jsx

@@ -0,0 +1,3 @@
+import PassportItem from './passport';
+
+export default PassportItem;

package/src/Passport/passport.jsx

@@ -0,0 +1,99 @@
+import PropTypes from 'prop-types';
+import upperFirst from 'lodash/upperFirst';
+import { Box } from '@mui/material';
+import { useLocaleContext } from '@arcblock/ux/lib/Locale/context';
+import RevokeIcon from '@arcblock/icons/lib/RevokeIcon';
+
+export default function Passport({ passport, user, color, width, icon, children, createPassportSvg, ...rest }) {
+  const { t } = useLocaleContext();
+  return (
+    <Box
+      {...rest}
+      sx={{
+        display: 'flex',
+        alignItems: 'center',
+        ...rest?.sx,
+      }}>
+      <Box
+        className="passport-item__display"
+        // eslint-disable-next-line react/no-danger
+        dangerouslySetInnerHTML={{
+          __html: createPassportSvg({
+            title: passport.title || passport.name,
+            issuer: passport.issuer && passport.issuer.name,
+            issuerDid: passport.issuer && passport.issuer.id,
+            ownerName: user.fullName,
+            ownerDid: user.did,
+            ownerAvatarUrl: user.avatar,
+            revoked: passport.revoked,
+            preferredColor: color,
+            width,
+          }),
+        }}
+      />
+      <Box
+        className="passport-item__body"
+        sx={{
+          p: 0,
+          ml: 3,
+          mt: 0,
+        }}>
+        <Box
+          className="passport-item__title"
+          sx={{
+            display: 'flex',
+            alignItems: 'center',
+            fontWeight: 400,
+            fontSize: '16px',
+            lineHeight: 1.1875,
+            color: '#222222',
+          }}>
+          {upperFirst(passport.title)}
+          <Box
+            className="passport-item__status-icon"
+            sx={{
+              svg: {
+                fill: '#bfbfbf',
+                height: '1.2em',
+                marginLeft: '0.4em',
+              },
+            }}>
+            {icon}
+            {passport.revoked && <RevokeIcon />}
+          </Box>
+        </Box>
+        {passport.expirationDate && (
+          <Box
+            className="passport-item__title"
+            sx={{
+              display: 'flex',
+              alignItems: 'center',
+              fontWeight: 400,
+              fontSize: '16px',
+              lineHeight: 1.1875,
+              color: '#222222',
+            }}>
+            {t('team.passport.validUntil', { date: passport.expirationDate })}
+          </Box>
+        )}
+        {children}
+      </Box>
+    </Box>
+  );
+}
+
+Passport.propTypes = {
+  passport: PropTypes.any.isRequired,
+  user: PropTypes.any.isRequired,
+  color: PropTypes.string.isRequired,
+  createPassportSvg: PropTypes.func.isRequired,
+  icon: PropTypes.any,
+  children: PropTypes.any,
+  width: PropTypes.number,
+};
+
+Passport.defaultProps = {
+  icon: null,
+  children: null,
+  width: 150,
+};

package/src/SessionBlocklet/index.jsx

@@ -13,7 +13,7 @@ import {
   Typography,
 } from '@mui/material';
 import { Icon } from '@iconify/react';
-import DashboardOutlineRoundedIcon from '@iconify-icons/material-symbols/dashboard-outline-rounded';
+import DashboardOutlineRoundedIcon from 'iconify-icons-material-symbols-400/dashboard-outline-rounded';
 import WidgetsOutlineRoundedIcon from '@iconify-icons/material-symbols/widgets-outline-rounded';
 import { useMemoizedFn, useReactive } from 'ahooks';
 

package/src/SessionUser/components/logged-in.jsx

@@ -189,6 +189,6 @@ function SessionMenuItem({ icon, title, ...rest }) {
 }
 
 SessionMenuItem.propTypes = {
-  icon: PropTypes.string.isRequired,
+  icon: PropTypes.any.isRequired,
   title: PropTypes.string.isRequired,
 };

package/src/SessionUser/components/un-login.jsx

@@ -1,7 +1,7 @@
 import PropTypes from 'prop-types';
 import { Box, CircularProgress, IconButton } from '@mui/material';
 import { Icon } from '@iconify/react';
-import PersonOutlineRoundedIcon from '@iconify-icons/material-symbols/person-outline-rounded';
+import PersonOutlineRoundedIcon from 'iconify-icons-material-symbols-400/person-outline-rounded';
 import { useRef } from 'react';
 import { useMemoizedFn } from 'ahooks';
 import noop from 'lodash/noop';

package/src/SessionUser/components/user-info.jsx

@@ -98,7 +98,7 @@ export default function UserInfo({
             />
           </Box>
 
-          <Typography variant="h6" sx={{ wordBreak: 'break-all' }}>
+          <Typography variant="h6" sx={{ wordBreak: 'break-word' }}>
             {session.user.fullName}
           </Typography>
         </Box>

package/src/SessionUser/index.jsx

@@ -22,8 +22,8 @@ SessionUser.propTypes = {
     user: PropTypes.shape({
       did: PropTypes.string.isRequired,
       fullName: PropTypes.string.isRequired,
-      email: PropTypes.string.isRequired,
       avatar: PropTypes.string.isRequired,
+      email: PropTypes.string,
     }),
   }).isRequired,
   onBindWallet: PropTypes.func,