@blocklet/ui-react 2.9.52 → 2.9.54

package/lib/UserSessions/index.js

@@ -0,0 +1,13 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+Object.defineProperty(exports, "UserSessions", {
+  enumerable: true,
+  get: function () {
+    return _userSessions.default;
+  }
+});
+var _userSessions = _interopRequireDefault(require("./components/user-sessions"));
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }

package/lib/UserSessions/libs/locales.d.ts

@@ -0,0 +1,52 @@
+export declare const translations: {
+    zh: {
+        confirm: string;
+        cancel: string;
+        visitorId: string;
+        deviceType: string;
+        platform: string;
+        walletOS: string;
+        role: string;
+        fullname: string;
+        email: string;
+        avatar: string;
+        user: string;
+        updatedAt: string;
+        lastLoginIp: string;
+        actions: string;
+        logoutAll: string;
+        logoutAllTips: string;
+        logout: string;
+        currentSession: string;
+        unknown: string;
+        logoutThisSession: string;
+        logoutThisSessionConfirm: string;
+        logoutAllSession: string;
+        logoutAllSessionConfirm: string;
+    };
+    en: {
+        confirm: string;
+        cancel: string;
+        visitorId: string;
+        deviceType: string;
+        platform: string;
+        walletOS: string;
+        role: string;
+        fullname: string;
+        email: string;
+        avatar: string;
+        user: string;
+        updatedAt: string;
+        actions: string;
+        lastLoginIp: string;
+        logoutAll: string;
+        logoutAllTips: string;
+        logout: string;
+        currentSession: string;
+        unknown: string;
+        logoutThisSession: string;
+        logoutThisSessionConfirm: string;
+        logoutAllSession: string;
+        logoutAllSessionConfirm: string;
+    };
+};

package/lib/UserSessions/libs/locales.js

@@ -0,0 +1,58 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.translations = void 0;
+const translations = exports.translations = {
+  zh: {
+    confirm: "\u786E\u8BA4",
+    cancel: "\u53D6\u6D88",
+    visitorId: "\u8BBE\u5907\u6807\u8BC6",
+    deviceType: "\u8BBE\u5907\u7C7B\u578B",
+    platform: "\u64CD\u4F5C\u7CFB\u7EDF",
+    walletOS: "\u94B1\u5305\u7C7B\u578B",
+    role: "\u89D2\u8272",
+    fullname: "\u59D3\u540D",
+    email: "\u90AE\u7BB1",
+    avatar: "\u5934\u50CF",
+    user: "\u7528\u6237",
+    updatedAt: "\u6700\u8FD1\u6D3B\u52A8\u65F6\u95F4",
+    lastLoginIp: "\u6700\u8FD1\u6D3B\u52A8\u5730\u5740",
+    actions: "\u64CD\u4F5C",
+    logoutAll: "\u6CE8\u9500\u6240\u6709\u4F1A\u8BDD",
+    logoutAllTips: "\u4E0D\u4F1A\u6CE8\u9500\u5F53\u524D\u4F1A\u8BDD",
+    logout: "\u6CE8\u9500",
+    currentSession: "\u5F53\u524D\u4F1A\u8BDD",
+    unknown: "\u672A\u77E5",
+    logoutThisSession: "\u6CE8\u9500\u6307\u5B9A\u4F1A\u8BDD",
+    logoutThisSessionConfirm: "\u786E\u5B9A\u8981\u6CE8\u9500\u6B64\u4F1A\u8BDD\u5417?",
+    logoutAllSession: "\u6CE8\u9500\u6240\u6709\u4F1A\u8BDD",
+    logoutAllSessionConfirm: "\u786E\u5B9A\u8981\u6CE8\u9500\u6240\u6709\u4F1A\u8BDD\u5417?"
+  },
+  en: {
+    confirm: "Confirm",
+    cancel: "Cancel",
+    visitorId: "Device ID",
+    deviceType: "Device Type",
+    platform: "Platform",
+    walletOS: "Wallet OS",
+    role: "Role",
+    fullname: "Fullname",
+    email: "Email",
+    avatar: "Avatar",
+    user: "User",
+    updatedAt: "Last Active Time",
+    actions: "Actions",
+    lastLoginIp: "Last Login IP",
+    logoutAll: "Logout all",
+    logoutAllTips: "Will not logout current session",
+    logout: "Logout",
+    currentSession: "Current Session",
+    unknown: "Unknown",
+    logoutThisSession: "Logout this session",
+    logoutThisSessionConfirm: "Are you sure to logout this session?",
+    logoutAllSession: "Logout all sessions",
+    logoutAllSessionConfirm: "Are you sure to logout all sessions?"
+  }
+};

package/lib/UserSessions/libs/utils.d.ts

@@ -0,0 +1,2 @@
+export declare function ip2Region(ip: string): Promise<string>;
+export declare function batchIp2Region(ips: string[]): Promise<string[]>;

package/lib/UserSessions/libs/utils.js

@@ -0,0 +1,80 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.batchIp2Region = batchIp2Region;
+exports.ip2Region = ip2Region;
+const RESERVED_IP = "Reserved IP";
+const IP_REGION_CACHE = "ip-region-cache";
+async function getIpRegionFromIpApi(ip) {
+  const url = `https://ipapi.co/${ip}/json/`;
+  const result = await fetch(url);
+  const data = await result.json();
+  let region = "";
+  if (data.error) {
+    if (data.reserved) {
+      region = RESERVED_IP;
+    }
+  } else {
+    region = [data.country_name, data.region, data.city].filter(Boolean).join("/");
+  }
+  return region;
+}
+async function getIpRegionFromIpSb(ip) {
+  const url = `https://api.ip.sb/geoip/${ip}`;
+  const result = await fetch(url);
+  const data = await result.json();
+  let region = "";
+  if (data.error) {
+    if (data.reserved) {
+      region = RESERVED_IP;
+    }
+  } else {
+    region = [data.country, data.region, data.city].filter(Boolean).join("/");
+  }
+  return region;
+}
+async function ip2Region(ip) {
+  let region = "";
+  let ipRegionCache = {};
+  try {
+    const tmpCache = localStorage.getItem(IP_REGION_CACHE);
+    if (tmpCache) {
+      ipRegionCache = JSON.parse(tmpCache);
+    }
+  } catch {
+    ipRegionCache = {};
+  }
+  if (ipRegionCache[ip]) {
+    region = ipRegionCache[ip];
+  } else {
+    try {
+      region = await getIpRegionFromIpSb(ip);
+    } catch {
+      console.warn("Fail to get ip region from ip.sb");
+    }
+    if (!region) {
+      try {
+        region = await getIpRegionFromIpApi(ip);
+      } catch {
+        console.warn("Fail to get ip region from ip-api.co");
+      }
+    }
+  }
+  if (region) {
+    const ipList = Object.keys(ipRegionCache);
+    if (ipList.length > 100) {
+      delete ipRegionCache[ipList[0]];
+    }
+    if (ipRegionCache[ip]) {
+      delete ipRegionCache[ip];
+    }
+    ipRegionCache[ip] = region;
+    localStorage.setItem(IP_REGION_CACHE, JSON.stringify(ipRegionCache));
+  }
+  return region;
+}
+async function batchIp2Region(ips) {
+  return Promise.all(ips.map(ip => ip2Region(ip)));
+}

package/lib/blocklets.js

@@ -40,30 +40,30 @@ const getLocalizedNavigation = (navigation, locale = 'en') => {
     return navigation;
   }
   // eslint-disable-next-line no-shadow
-  const getTitle = (title, locale) => {
+  const getTitle = (title, _locale) => {
     if (typeof title === 'string') {
       return title;
     }
     if (typeof title === 'object') {
-      return title[locale] || title?.en || title?.zh;
+      return title[_locale] || title?.en || title?.zh;
     }
     return title;
   };
   // eslint-disable-next-line no-shadow
-  const getLink = (link, locale) => {
+  const getLink = (link, _locale) => {
     if (typeof link === 'string') {
       // http[s] 开头的 url
       if ((0, _utils.isUrl)(link)) {
         const url = new URL(link);
-        url.searchParams.set('locale', locale);
+        url.searchParams.set('locale', _locale);
         return url.href;
       }
       const url = new URL(link, window.location.origin);
-      url.searchParams.set('locale', locale);
+      url.searchParams.set('locale', _locale);
       return url.pathname + url.search;
     }
     if (typeof link === 'object') {
-      return link[locale] || link?.en || link?.zh;
+      return link[_locale] || link?.en || link?.zh;
     }
     return link;
   };

package/lib/common/header-addons.d.ts

@@ -7,16 +7,15 @@ declare namespace HeaderAddons {
     namespace propTypes {
         export let formattedBlocklet: any;
         export let addons: any;
-        export { sessionManagerProps };
+        export { SessionManagerProps as sessionManagerProps };
     }
     namespace defaultProps {
         let addons_1: null;
         export { addons_1 as addons };
-        export namespace sessionManagerProps_1 {
+        export namespace sessionManagerProps {
             let showRole: boolean;
         }
-        export { sessionManagerProps_1 as sessionManagerProps };
     }
 }
 export default HeaderAddons;
-import { sessionManagerProps } from '../types';
+import { SessionManagerProps } from '../types';

package/lib/common/header-addons.js

@@ -19,7 +19,7 @@ function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { de
 function HeaderAddons({
   formattedBlocklet,
   addons,
-  sessionManagerProps: sessionManagerProps2
+  sessionManagerProps
 }) {
   const sessionCtx = (0, _react.useContext)(_Session.SessionContext);
   const {
@@ -71,7 +71,7 @@ function HeaderAddons({
         locale,
         menu,
         showRole: true,
-        ...sessionManagerProps2
+        ...sessionManagerProps
       }, "session-user"));
     }
     if (typeof addons === "function") {
@@ -89,7 +89,7 @@ HeaderAddons.propTypes = {
   // - PropTypes.func: 可以把自定义 addons 插在 session-manager 或 locale-selector (如果存在的话) 前/中/后
   // - PropTypes.node: 将 addons 原样传给 UX Header 组件
   addons: _propTypes.default.oneOfType([_propTypes.default.func, _propTypes.default.node]),
-  sessionManagerProps: _types.sessionManagerProps
+  sessionManagerProps: _types.SessionManagerProps
 };
 HeaderAddons.defaultProps = {
   addons: null,

package/lib/contexts/config-user-space.js

@@ -35,12 +35,12 @@ function ConfigUserSpaceProvider({
   const deleteSpaceGateway = async () => {
     setSpaceGateway(void 0);
   };
+  const settingStorageEndpoint = endpoint => {};
   const updateSpaceGateway = async x => {
     setSpaceGateway(x);
     session.refresh();
     await settingStorageEndpoint(x.endpoint);
   };
-  const settingStorageEndpoint = endpoint => {};
   const hasStorageEndpoint = Boolean(storageEndpoint && spaceGateway);
   return /* @__PURE__ */(0, _jsxRuntime.jsx)(Provider, {
     value: {

package/lib/index.d.ts

@@ -5,3 +5,4 @@ export { default as Icon } from './Icon';
 export { default as ComponentInstaller } from './ComponentInstaller';
 export { default as useComponentInstaller } from './ComponentInstaller/use-component-installed';
 export * from './UserCenter';
+export * from './UserSessions';

package/lib/index.js

@@ -65,4 +65,16 @@ Object.keys(_UserCenter).forEach(function (key) {
     }
   });
 });
+var _UserSessions = require("./UserSessions");
+Object.keys(_UserSessions).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (Object.prototype.hasOwnProperty.call(_exportNames, key)) return;
+  if (key in exports && exports[key] === _UserSessions[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function () {
+      return _UserSessions[key];
+    }
+  });
+});
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }

package/lib/types.d.ts

@@ -1,2 +1,2 @@
-export const blockletMetaProps: any;
-export const sessionManagerProps: any;
+export const BlockletMetaProps: any;
+export const SessionManagerProps: any;

package/lib/types.js

@@ -3,12 +3,12 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.sessionManagerProps = exports.blockletMetaProps = void 0;
+exports.SessionManagerProps = exports.BlockletMetaProps = void 0;
 var _propTypes = _interopRequireDefault(require("prop-types"));
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 /* eslint-disable import/prefer-default-export */
 
-const blockletMetaProps = exports.blockletMetaProps = _propTypes.default.shape({
+const BlockletMetaProps = exports.BlockletMetaProps = _propTypes.default.shape({
   appLogo: _propTypes.default.node,
   appName: _propTypes.default.string,
   theme: _propTypes.default.shape({
@@ -26,7 +26,7 @@ const blockletMetaProps = exports.blockletMetaProps = _propTypes.default.shape({
     }))
   }))
 });
-const sessionManagerProps = exports.sessionManagerProps = _propTypes.default.shape({
+const SessionManagerProps = exports.SessionManagerProps = _propTypes.default.shape({
   showText: _propTypes.default.bool,
   showRole: _propTypes.default.bool,
   switchDid: _propTypes.default.bool,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@blocklet/ui-react",
-  "version": "2.9.52",
+  "version": "2.9.54",
   "description": "Some useful front-end web components that can be used in Blocklets.",
   "keywords": [
     "react",
@@ -18,9 +18,9 @@
     "url": "git+https://github.com/ArcBlock/ux.git"
   },
   "scripts": {
-    "lint": "eslint src tests --ext js --ext jsx",
+    "lint": "eslint src tests --ext js --ext jsx --ext tsx --ext ts",
     "lint:fix": "npm run lint -- --fix",
-    "build": "unbuild && node tools/auto-exports.js",
+    "build": "unbuild",
     "watch": "CONSOLA_LEVEL=1 nodemon -e .jsx,.js,.ts,.tsx -w src -x 'yalc publish --push'",
     "precommit": "CI=1 npm run lint",
     "prepush": "CI=1 npm run lint",
@@ -63,8 +63,9 @@
   },
   "dependencies": {
     "@abtnode/constant": "^1.16.24",
-    "@arcblock/did-connect": "^2.9.52",
-    "@arcblock/ux": "^2.9.52",
+    "@arcblock/did-connect": "^2.9.54",
+    "@arcblock/react-hooks": "^2.9.54",
+    "@arcblock/ux": "^2.9.54",
     "@blocklet/js-sdk": "^1.16.24",
     "@emotion/react": "^11.10.4",
     "@emotion/styled": "^11.10.4",
@@ -72,14 +73,20 @@
     "@iconify/react": "^4.1.1",
     "ahooks": "^3.7.10",
     "axios": "^0.27.2",
+    "clsx": "^2.1.0",
     "core-js": "^3.25.5",
+    "dsbridge": "^3.1.4",
     "iconify-icon": "^1.0.8",
     "iconify-icons-material-symbols-400": "^0.0.1",
     "is-url": "^1.2.4",
     "lodash": "^4.17.21",
+    "p-all": "^5.0.0",
     "p-wait-for": "^5.0.2",
+    "prop-types": "^15.8.1",
     "react-error-boundary": "^3.1.4",
     "react-placeholder": "^4.1.0",
+    "react-router-dom": "^6.22.3",
+    "ua-parser-js": "^1.0.37",
     "ufo": "^1.3.2",
     "url-join": "^4.0.1"
   },
@@ -96,10 +103,11 @@
     "@babel/core": "^7.19.3",
     "@babel/preset-env": "^7.19.3",
     "@babel/preset-react": "^7.18.6",
+    "@types/ua-parser-js": "^0.7.39",
     "eslint-plugin-react-hooks": "^4.6.0",
     "glob": "^10.3.3",
     "jest": "^28.1.3",
     "unbuild": "^2.0.0"
   },
-  "gitHead": "362391bd55f3b943e59f16dfaaded615c64ecb93"
+  "gitHead": "497c6bb83ad04937b3ba6a182e79383889a4562e"
 }

package/src/@types/index.ts

@@ -1,15 +1,13 @@
 import type { Axios } from 'axios';
+import type { UserPublicInfo } from '@blocklet/js-sdk';
 
 export type SessionContext = {
   session: Session;
   api: Axios;
 };
 
-export type User = {
-  did: string;
-  fullName: string;
+export type User = UserPublicInfo & {
   role: string;
-  avatar: string;
   email?: string;
   phone?: string;
   sourceProvider?: string;
@@ -17,7 +15,7 @@ export type User = {
   lastLoginIp?: string;
   createdAt?: string;
   passports?: any[];
-  didSpace: Record<string, any>;
+  didSpace?: Record<string, any>;
 };
 
 export type UserCenterTab = {

package/src/Dashboard/index.jsx

@@ -6,7 +6,7 @@ import PropTypes from 'prop-types';
 import { SessionContext } from '@arcblock/did-connect/lib/Session';
 import { useLocaleContext } from '@arcblock/ux/lib/Locale/context';
 import UxDashboard from '@arcblock/ux/lib/Layout/dashboard';
-import { blockletMetaProps, sessionManagerProps } from '../types';
+import { BlockletMetaProps, SessionManagerProps } from '../types';
 import { mapRecursive, flatRecursive, matchPaths } from '../utils';
 import { publicPath, formatBlockletInfo, getLocalizedNavigation, filterNavByRole } from '../blocklets';
 import HeaderAddons from '../common/header-addons';
@@ -32,6 +32,7 @@ function Dashboard({ meta, fallbackUrl, invalidPathFallback, headerAddons, sessi
     }
   }, [meta]);
   const { localizedNav, flattened, matchedIndex } = useMemo(() => {
+    // eslint-disable-next-line @typescript-eslint/no-shadow
     let localizedNav = getLocalizedNavigation(formattedBlocklet?.navigation?.dashboard, locale) || [];
     // 根据 role 筛选 nav 数据
     localizedNav = filterNavByRole(localizedNav, userRole);
@@ -49,7 +50,9 @@ function Dashboard({ meta, fallbackUrl, invalidPathFallback, headerAddons, sessi
       'items'
     );
     // 展平后使用 matchPaths 检测 link#active 状态
+    // eslint-disable-next-line @typescript-eslint/no-shadow
     const flattened = flatRecursive(localizedNav).filter((item) => !!item.url);
+    // eslint-disable-next-line @typescript-eslint/no-shadow
     const matchedIndex = matchPaths(flattened.map((item) => item.url));
     if (matchedIndex !== -1) {
       flattened[matchedIndex].active = true;
@@ -84,6 +87,7 @@ function Dashboard({ meta, fallbackUrl, invalidPathFallback, headerAddons, sessi
     return null;
   }
   const { appLogo, appLogoRect, appName } = formattedBlocklet;
+  // eslint-disable-next-line @typescript-eslint/naming-convention
   const _headerAddons = (
     <HeaderAddons
       formattedBlocklet={formattedBlocklet}
@@ -111,13 +115,13 @@ function Dashboard({ meta, fallbackUrl, invalidPathFallback, headerAddons, sessi
 }
 
 Dashboard.propTypes = {
-  meta: blockletMetaProps,
+  meta: BlockletMetaProps,
   // 如果当前用户没有权限访问任何导航菜单, 则自动跳转到 fallbackUrl, 默认值为 publicPath, 设置为 null 表示禁用自动跳转
   fallbackUrl: PropTypes.string,
   // 当前路径未匹配任何 nav links 时的 fallback, 默认行为跳转到首个可用的 nav link
   invalidPathFallback: PropTypes.func,
   headerAddons: PropTypes.oneOfType([PropTypes.func, PropTypes.node]),
-  sessionManagerProps,
+  sessionManagerProps: SessionManagerProps,
   links: PropTypes.oneOfType([PropTypes.array, PropTypes.func]),
 };
 

package/src/Footer/index.jsx

@@ -11,7 +11,7 @@ import OverridableThemeProvider from '../common/overridable-theme-provider';
 import InternalFooter from './internal-footer';
 import { mapRecursive } from '../utils';
 import { formatBlockletInfo, getLocalizedNavigation } from '../blocklets';
-import { blockletMetaProps } from '../types';
+import { BlockletMetaProps } from '../types';
 
 /**
  * 专门用于 (composable) blocklet 的 Footer 组件, 基于 blocklet meta 中的数据渲染
@@ -72,7 +72,7 @@ function Footer({ meta, theme: themeOverrides, ...rest }) {
 }
 
 Footer.propTypes = {
-  meta: blockletMetaProps,
+  meta: BlockletMetaProps,
   // 允许覆盖 footer 内置的 theme
   theme: PropTypes.object,
 };

package/src/Header/index.jsx

@@ -11,7 +11,7 @@ import omit from 'lodash/omit';
 
 import Icon from '../Icon';
 import OverridableThemeProvider from '../common/overridable-theme-provider';
-import { blockletMetaProps, sessionManagerProps } from '../types';
+import { BlockletMetaProps, SessionManagerProps } from '../types';
 import { mapRecursive, flatRecursive, matchPaths } from '../utils';
 import { publicPath, formatBlockletInfo, getLocalizedNavigation } from '../blocklets';
 import HeaderAddons from '../common/header-addons';
@@ -61,6 +61,7 @@ const parseNavigation = (navigation) => {
  * 专门用于 (composable) blocklet 的 Header 组件, 解析 blocklet meta 中的数据, 通过组合 UX 中的 Header & NavMenu 组件来渲染
  */
 // eslint-disable-next-line no-shadow
+
 function Header({ meta, addons, sessionManagerProps, homeLink, theme: themeOverrides, hideNavMenu, ...rest }) {
   useWalletHiddenTopbar();
   const { locale } = useLocaleContext() || {};
@@ -82,6 +83,7 @@ function Header({ meta, addons, sessionManagerProps, homeLink, theme: themeOverr
   const parsedNavigation = parseNavigation(navigation);
   const { navItems, activeId } = parsedNavigation;
 
+  // eslint-disable-next-line @typescript-eslint/naming-convention
   const _addons =
     typeof addons === 'function' ? (builtInAddons) => addons(builtInAddons, { navigation: parsedNavigation }) : addons;
   const headerAddons = (
@@ -116,14 +118,14 @@ function Header({ meta, addons, sessionManagerProps, homeLink, theme: themeOverr
 }
 
 Header.propTypes = {
-  meta: blockletMetaProps,
+  meta: BlockletMetaProps,
 
   // 需要考虑 定制的 addons 与内置的 连接钱包/选择语言 addons 共存的情况
   // - PropTypes.func: 可以把自定义 addons 插在 session-manager 或 locale-selector (如果存在的话) 前/中/后
   // - PropTypes.node: 将 addons 原样传给 UX Header 组件
   addons: PropTypes.oneOfType([PropTypes.func, PropTypes.node]),
 
-  sessionManagerProps,
+  sessionManagerProps: SessionManagerProps,
   homeLink: PropTypes.string,
   // 允许覆盖 header 内置的 theme
   theme: PropTypes.object,

package/src/Icon/index.jsx

@@ -8,6 +8,7 @@ import { isUrl, isIconifyString } from '../utils';
  * Icon 组件, 基于 mui Avatar 组件扩展对 iconify 的支持
  */
 export default function Icon({ icon, size, sx, ...rest }) {
+  // eslint-disable-next-line @typescript-eslint/naming-convention
   const _sx = [...(Array.isArray(sx) ? sx : [sx])];
   if (size) {
     _sx.push({ width: size, height: size });

package/src/UserCenter/components/notification.tsx

@@ -10,13 +10,13 @@ import Toast from '@arcblock/ux/lib/Toast';
 import { getWalletDid } from '@arcblock/ux/lib/SessionUser/libs/utils';
 import { translate } from '@arcblock/ux/lib/Locale/util';
 import { useLocaleContext } from '@arcblock/ux/lib/Locale/context';
+import { AxiosError } from 'axios';
 
 import { translations } from '../libs/locales';
 import WebhookItem from './webhook-item';
 import { User, WebhookItemData } from '../../@types';
 import { formatAxiosError } from '../libs/utils';
-import { client } from '../libs/client';
-import { AxiosError } from 'axios';
+import { client } from '../../libs/client';
 
 export default function Notification({ user }: { user: User }) {
   const { locale } = useLocaleContext();

package/src/UserCenter/components/passport.tsx

@@ -31,9 +31,8 @@ export default function Passport({ user, ...rest }: { user: User } & BoxProps) {
       }
       if (a.revoked) {
         return 1;
-      } else {
-        return -1;
       }
+      return -1;
     });
 
     return uniqBy(passportList, 'role');

package/src/UserCenter/components/privacy.tsx

@@ -8,7 +8,7 @@ import Toast from '@arcblock/ux/lib/Toast';
 import type { AxiosError } from 'axios';
 
 import { translations } from '../libs/locales';
-import { client } from '../libs/client';
+import { client } from '../../libs/client';
 import { formatAxiosError } from '../libs/utils';
 
 type PrivacyConfig = {

package/src/UserCenter/components/settings.tsx

@@ -4,12 +4,14 @@ import type { BoxProps } from '@mui/material';
 import { useCreation, useMemoizedFn, useReactive } from 'ahooks';
 import { translate } from '@arcblock/ux/lib/Locale/util';
 import { useLocaleContext } from '@arcblock/ux/lib/Locale/context';
+
 import { ConfigUserSpaceProvider } from '../../contexts/config-user-space';
 import { translations } from '../libs/locales';
 import Notification from './notification';
 import Privacy from './privacy';
 import { User, UserCenterTab } from '../../@types';
 import DidSpace from './storage';
+import { UserSessions } from '../../UserSessions';
 
 export default function Settings({
   user,
@@ -52,7 +54,16 @@ export default function Settings({
       user?.didSpace?.endpoint && {
         label: t('storageManagement'),
         value: 'storage',
-        content:  <ConfigUserSpaceProvider><DidSpace /></ConfigUserSpaceProvider>,
+        content: (
+          <ConfigUserSpaceProvider>
+            <DidSpace />
+          </ConfigUserSpaceProvider>
+        ),
+      },
+      {
+        label: t('sessionManagement'),
+        value: 'session',
+        content: <UserSessions user={user} />,
       },
     ].filter(Boolean);
   }, [user, privacyConfigList]);
@@ -73,7 +84,9 @@ export default function Settings({
         {...rest}
         sx={{
           ...rest?.sx,
-          width: 520,
+          minWidth: {
+            md: 500,
+          },
           maxWidth: '100%',
         }}>
         <Tabs variant="card" tabs={tabs} current={currentTab.value} onChange={handleChangeTab} />