@arcblock/ux 2.9.67 → 2.9.69

package/es/Button/wrap.js

@@ -34,7 +34,7 @@ const extendedColors = {
  * @typedef {{
  *  rounded?: boolean,
  *  loading?: boolean,
- *  forwardedRef: import('react').ForwardedRef<any>,
+ *  forwardedRef?: import('react').ForwardedRef<any>,
  *  color?: 'default' | 'inherit' | 'primary' | 'secondary' | 'danger' | 'warning' | 'reverse' | 'did'
  * } & import('@mui/material').ButtonProps} ButtonProps
  */

package/es/Colors/themes/temp.js

@@ -35,6 +35,7 @@ const colors = {
   buttonsButtonNeutralHover: 'rgba(243, 244, 246, 1)',
   buttonsButtonInverted: 'rgba(3, 7, 18, 1)',
   buttonsButtonInvertedHover: 'rgba(17, 24, 39, 1)',
-  buttonsButtonDanger: 'rgba(225, 29, 72, 1)'
+  buttonsButtonDanger: 'rgba(225, 29, 72, 1)',
+  red: '#FF6369'
 };
 export default colors;

package/es/Dialog/types.d.ts

@@ -10,5 +10,8 @@ export type OpenConfirmProps = {
   cancelButtonText: string;
 };
 
+export type UpdateConfirmProps = Partial<Pick<OpenConfirmProps, 'title' | 'content'>>;
+
 export type OpenConfirm = (params: OpenConfirmProps) => void;
 export type CloseConfirm = () => void;
+export type UpdateConfirm = (params: UpdateConfirmProps) => void;

package/es/Dialog/use-confirm.js

@@ -44,6 +44,10 @@ const ConfirmHolder = /*#__PURE__*/forwardRef((props, ref) => {
       reset();
     }, 300);
   });
+  const update = useMemoizedFn(params => {
+    if (params.title) setTitle(params.title);
+    if (params.content) setContent(params.content);
+  });
   const onCancel = useMemoizedFn((e, reason) => {
     close();
     state?.onCancel(e, reason);
@@ -59,9 +63,10 @@ const ConfirmHolder = /*#__PURE__*/forwardRef((props, ref) => {
   useImperativeHandle(ref, () => {
     return {
       open,
-      close
+      close,
+      update
     };
-  }, [open, close]);
+  }, [open, close, update]);
   return /*#__PURE__*/_jsx(Confirm, {
     ...props,
     open: state.show,
@@ -99,15 +104,24 @@ export default function useConfirm(props = {}) {
     confirmRef.current?.open(...args);
   });
   /**
-   * 挂你不一个弹窗
+   * 关闭一个弹窗
    * @type {import('./types').CloseConfirm}
    */
   const close = useMemoizedFn((...args) => {
     confirmRef.current?.close(...args);
   });
+
+  /**
+   * 更新弹窗的 title 和 content
+   * @type {import('./types').UpdateConfirm}
+   */
+  const update = useMemoizedFn((...args) => {
+    confirmRef.current?.update(...args);
+  });
   const confirmApi = {
     open,
-    close
+    close,
+    update
   };
   return {
     confirmHolder: /*#__PURE__*/_jsx(ConfirmHolder, {

package/es/Layout/dashboard/index.js

@@ -240,8 +240,6 @@ const Wrapper = styled('div', {
     .header-logo {
       display: flex;
       justify-content: center;
-      /* logo 与 sidebar 中的 icon 垂直对齐, sidebarWidth - 24 * 2 */
-      min-width: ${props => props.sidebarWidth - 24 * 2}px;
     }
     &.dashboard-dense {
       .header-logo {

package/es/SessionUser/components/session-user-item.js

@@ -1,6 +1,6 @@
 import PropTypes from 'prop-types';
 import { forwardRef } from 'react';
-import { Box, IconButton, Typography } from '@mui/material';
+import { Box, IconButton, Tooltip, Typography } from '@mui/material';
 import { Icon } from '@iconify/react';
 import LensIcon from '@iconify-icons/material-symbols/lens';
 import WalletOSIcon from '../../WalletOSIcon';
@@ -34,6 +34,7 @@ const SessionUserItem = /*#__PURE__*/forwardRef(({
         display: 'flex',
         alignItems: 'center',
         gap: 0.5,
+        overflow: 'hidden',
         '& .did-address-avatar': {
           display: 'none !important'
         },
@@ -63,11 +64,20 @@ const SessionUserItem = /*#__PURE__*/forwardRef(({
         sx: {
           lineHeight: 1
         }
-      }) : sessionItem.user.email && /*#__PURE__*/_jsx(Typography, {
+      }) : sessionItem.user.email && /*#__PURE__*/_jsx(Tooltip, {
+        title: sessionItem.user.email,
         sx: {
-          fontSize: 14
+          zIndex: 1600
         },
-        children: sessionItem.user.email
+        placement: "top",
+        children: /*#__PURE__*/_jsx(Typography, {
+          sx: {
+            fontSize: 14,
+            overflow: 'hidden',
+            textOverflow: 'ellipsis'
+          },
+          children: sessionItem.user.email
+        })
       })]
     }), statusContent || active && /*#__PURE__*/_jsx(IconButton, {
       size: "small",

package/es/Tabs/index.js

@@ -163,7 +163,7 @@ LineTabs.propTypes = {
 
 /**
  * @description
- * @param { TabsProps} props
+ * @param {TabsProps} props
  * @return {import('react').ReactNode}
  */
 

package/es/Util/constant.js

@@ -12,4 +12,30 @@ export const DID_PREFIX = 'did:abt:';
 export const PASSPORT_STATUS = {
   VALID: 'valid',
   REVOKED: 'revoked'
+};
+export const LOGIN_PROVIDER = {
+  // EMAIL: 'Email',
+  AUTH0: 'auth0',
+  APPLE: 'apple',
+  GITHUB: 'github',
+  GOOGLE: 'google',
+  WALLET: 'wallet',
+  NFT: 'nft'
+};
+export const LOGIN_PROVIDER_NAME = {
+  // [LOGIN_PROVIDER.EMAIL]: 'Email',
+  [LOGIN_PROVIDER.AUTH0]: 'Email',
+  [LOGIN_PROVIDER.APPLE]: 'Apple',
+  [LOGIN_PROVIDER.GITHUB]: 'Github',
+  [LOGIN_PROVIDER.GOOGLE]: 'Google',
+  [LOGIN_PROVIDER.WALLET]: 'DID Wallet',
+  [LOGIN_PROVIDER.NFT]: 'NFT'
+};
+
+// HACK: 目前这里的键值不能使用 [LOGIN_PROVIDER.AUTH0] 形式，否则会影响 ts 的 keyof typeof OAUTH_PROVIDER 来获取键值作为类型的判断
+export const OAUTH_PROVIDER = {
+  auth0: 'Email',
+  apple: 'Apple',
+  github: 'Github',
+  google: 'Google'
 };

package/es/Util/federated.js

@@ -76,4 +76,16 @@ export function getApps(blocklet) {
   }
   // NOTICE: masterApp 应该排在前面
   return appList.reverse();
+}
+export async function getBlockletData(appUrl) {
+  try {
+    const url = new URL('__blocklet__.js', appUrl);
+    url.searchParams.set('type', 'json');
+    const res = await fetch(url.href);
+    const jsonData = await res.json();
+    return jsonData;
+  } catch (err) {
+    console.error(`Failed to get blocklet data: ${appUrl}`, err);
+    return null;
+  }
 }

package/es/WalletOSIcon/index.js

@@ -5,7 +5,9 @@ import IOSRoundedIcon from '@iconify-icons/material-symbols/ios-rounded';
 import LanguageIcon from '@iconify-icons/material-symbols/language';
 import AndroidIcon from '@iconify-icons/material-symbols/android';
 import QuestionMarkRoundedIcon from '@iconify-icons/material-symbols/question-mark-rounded';
-import Auth0Icon from '@iconify-icons/logos/auth0-icon';
+// import Auth0Icon from '@iconify-icons/logos/auth0-icon';
+import MailOutlineRoundedIcon from '@iconify-icons/material-symbols/mail-outline-rounded';
+import { LOGIN_PROVIDER } from '../../es/Util/constant';
 import { jsx as _jsx } from "react/jsx-runtime";
 export default function WalletOSIcon({
   loading,
@@ -21,9 +23,9 @@ export default function WalletOSIcon({
       }
     });
   }
-  if (provider === 'auth0') {
+  if (provider === LOGIN_PROVIDER.AUTH0) {
     return /*#__PURE__*/_jsx(Icon, {
-      icon: Auth0Icon,
+      icon: MailOutlineRoundedIcon,
       style: {
         color,
         transform: 'scale(0.85)'

package/lib/Button/wrap.js

@@ -48,7 +48,7 @@ const extendedColors = {
  * @typedef {{
  *  rounded?: boolean,
  *  loading?: boolean,
- *  forwardedRef: import('react').ForwardedRef<any>,
+ *  forwardedRef?: import('react').ForwardedRef<any>,
  *  color?: 'default' | 'inherit' | 'primary' | 'secondary' | 'danger' | 'warning' | 'reverse' | 'did'
  * } & import('@mui/material').ButtonProps} ButtonProps
  */

package/lib/Colors/themes/temp.js

@@ -41,6 +41,7 @@ const colors = {
   buttonsButtonNeutralHover: 'rgba(243, 244, 246, 1)',
   buttonsButtonInverted: 'rgba(3, 7, 18, 1)',
   buttonsButtonInvertedHover: 'rgba(17, 24, 39, 1)',
-  buttonsButtonDanger: 'rgba(225, 29, 72, 1)'
+  buttonsButtonDanger: 'rgba(225, 29, 72, 1)',
+  red: '#FF6369'
 };
 var _default = exports.default = colors;

package/lib/Dialog/types.d.ts

@@ -10,5 +10,8 @@ export type OpenConfirmProps = {
   cancelButtonText: string;
 };
 
+export type UpdateConfirmProps = Partial<Pick<OpenConfirmProps, 'title' | 'content'>>;
+
 export type OpenConfirm = (params: OpenConfirmProps) => void;
 export type CloseConfirm = () => void;
+export type UpdateConfirm = (params: UpdateConfirmProps) => void;

package/lib/Dialog/use-confirm.js

@@ -58,6 +58,10 @@ const ConfirmHolder = /*#__PURE__*/(0, _react.forwardRef)((props, ref) => {
       reset();
     }, 300);
   });
+  const update = (0, _ahooks.useMemoizedFn)(params => {
+    if (params.title) setTitle(params.title);
+    if (params.content) setContent(params.content);
+  });
   const onCancel = (0, _ahooks.useMemoizedFn)((e, reason) => {
     close();
     state === null || state === void 0 ? void 0 : state.onCancel(e, reason);
@@ -73,9 +77,10 @@ const ConfirmHolder = /*#__PURE__*/(0, _react.forwardRef)((props, ref) => {
   (0, _react.useImperativeHandle)(ref, () => {
     return {
       open,
-      close
+      close,
+      update
     };
-  }, [open, close]);
+  }, [open, close, update]);
   return /*#__PURE__*/(0, _jsxRuntime.jsx)(_confirm.default, _objectSpread(_objectSpread({}, props), {}, {
     open: state.show,
     title: title,
@@ -117,7 +122,7 @@ function useConfirm() {
     (_confirmRef$current = confirmRef.current) === null || _confirmRef$current === void 0 ? void 0 : _confirmRef$current.open(...args);
   });
   /**
-   * 挂你不一个弹窗
+   * 关闭一个弹窗
    * @type {import('./types').CloseConfirm}
    */
   const close = (0, _ahooks.useMemoizedFn)(function () {
@@ -127,9 +132,22 @@ function useConfirm() {
     }
     (_confirmRef$current2 = confirmRef.current) === null || _confirmRef$current2 === void 0 ? void 0 : _confirmRef$current2.close(...args);
   });
+
+  /**
+   * 更新弹窗的 title 和 content
+   * @type {import('./types').UpdateConfirm}
+   */
+  const update = (0, _ahooks.useMemoizedFn)(function () {
+    var _confirmRef$current3;
+    for (var _len3 = arguments.length, args = new Array(_len3), _key3 = 0; _key3 < _len3; _key3++) {
+      args[_key3] = arguments[_key3];
+    }
+    (_confirmRef$current3 = confirmRef.current) === null || _confirmRef$current3 === void 0 ? void 0 : _confirmRef$current3.update(...args);
+  });
   const confirmApi = {
     open,
-    close
+    close,
+    update
   };
   return {
     confirmHolder: /*#__PURE__*/(0, _jsxRuntime.jsx)(ConfirmHolder, _objectSpread(_objectSpread({}, props), {}, {

package/lib/Layout/dashboard/index.js

@@ -212,7 +212,7 @@ Dashboard.defaultProps = {
 };
 const Wrapper = (0, _Theme.styled)('div', {
   shouldForwardProp: prop => prop !== 'sidebarWidth'
-})(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  &.dashboard {\n    display: flex;\n    flex-direction: column;\n    height: 100vh;\n  }\n  .dashboard-body {\n    overflow: hidden;\n    flex: 1;\n  }\n  .dashboard-sidebar {\n    box-sizing: border-box;\n    flex: 0 0 auto;\n    width: ", "px;\n    overflow: hidden;\n    &:hover {\n      overflow-y: auto;\n    }\n  }\n  .dashboard-sidebar-container {\n    width: ", "px;\n  }\n  .dashboard-main {\n    display: flex;\n    flex-direction: column;\n    overflow: auto;\n    flex: 1;\n    position: relative;\n  }\n  .dashboard-content {\n    flex: 1;\n  }\n  &.dashboard-dense {\n    .dashboard-header {\n      border-bottom: 1px solid #eee;\n    }\n    .dashboard-sidebar {\n      width: 256px;\n      border-right: 1px solid #eee;\n    }\n  }\n  ", " {\n    .header-logo {\n      display: flex;\n      justify-content: center;\n      /* logo \u4E0E sidebar \u4E2D\u7684 icon \u5782\u76F4\u5BF9\u9F50, sidebarWidth - 24 * 2 */\n      min-width: ", "px;\n    }\n    &.dashboard-dense {\n      .header-logo {\n        /* dense = true \u65F6 logo \u4E0E sidenav icons \u4E0D\u9700\u8981\u5BF9\u9F50 */\n        width: auto;\n      }\n    }\n  }\n"])), props => props.sidebarWidth, props => props.sidebarWidth, props => props.theme.breakpoints.up('md'), props => props.sidebarWidth - 24 * 2);
+})(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  &.dashboard {\n    display: flex;\n    flex-direction: column;\n    height: 100vh;\n  }\n  .dashboard-body {\n    overflow: hidden;\n    flex: 1;\n  }\n  .dashboard-sidebar {\n    box-sizing: border-box;\n    flex: 0 0 auto;\n    width: ", "px;\n    overflow: hidden;\n    &:hover {\n      overflow-y: auto;\n    }\n  }\n  .dashboard-sidebar-container {\n    width: ", "px;\n  }\n  .dashboard-main {\n    display: flex;\n    flex-direction: column;\n    overflow: auto;\n    flex: 1;\n    position: relative;\n  }\n  .dashboard-content {\n    flex: 1;\n  }\n  &.dashboard-dense {\n    .dashboard-header {\n      border-bottom: 1px solid #eee;\n    }\n    .dashboard-sidebar {\n      width: 256px;\n      border-right: 1px solid #eee;\n    }\n  }\n  ", " {\n    .header-logo {\n      display: flex;\n      justify-content: center;\n    }\n    &.dashboard-dense {\n      .header-logo {\n        /* dense = true \u65F6 logo \u4E0E sidenav icons \u4E0D\u9700\u8981\u5BF9\u9F50 */\n        width: auto;\n      }\n    }\n  }\n"])), props => props.sidebarWidth, props => props.sidebarWidth, props => props.theme.breakpoints.up('md'));
 const StyledUxHeader = (0, _Theme.styled)(_Header.ResponsiveHeader)(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n  .header-container {\n    max-width: 100%;\n  }\n"])));
 
 // 兼容旧版 dashboard

package/lib/SessionUser/components/session-user-item.js

@@ -48,6 +48,7 @@ const SessionUserItem = /*#__PURE__*/(0, _react.forwardRef)((_ref, ref) => {
         display: 'flex',
         alignItems: 'center',
         gap: 0.5,
+        overflow: 'hidden',
         '& .did-address-avatar': {
           display: 'none !important'
         },
@@ -77,11 +78,20 @@ const SessionUserItem = /*#__PURE__*/(0, _react.forwardRef)((_ref, ref) => {
         sx: {
           lineHeight: 1
         }
-      }) : sessionItem.user.email && /*#__PURE__*/(0, _jsxRuntime.jsx)(_material.Typography, {
+      }) : sessionItem.user.email && /*#__PURE__*/(0, _jsxRuntime.jsx)(_material.Tooltip, {
+        title: sessionItem.user.email,
         sx: {
-          fontSize: 14
+          zIndex: 1600
         },
-        children: sessionItem.user.email
+        placement: "top",
+        children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_material.Typography, {
+          sx: {
+            fontSize: 14,
+            overflow: 'hidden',
+            textOverflow: 'ellipsis'
+          },
+          children: sessionItem.user.email
+        })
       })]
     }), statusContent || active && /*#__PURE__*/(0, _jsxRuntime.jsx)(_material.IconButton, {
       size: "small",

package/lib/Tabs/index.js

@@ -183,7 +183,7 @@ LineTabs.propTypes = {
 
 /**
  * @description
- * @param { TabsProps} props
+ * @param {TabsProps} props
  * @return {import('react').ReactNode}
  */
 

package/lib/Util/constant.js

@@ -3,7 +3,7 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.SESSION_TOKEN_STORAGE_KEY = exports.RELAY_SOCKET_PREFIX = exports.REFRESH_TOKEN_STORAGE_KEY = exports.PROFILE_URL = exports.PASSPORT_STATUS = exports.NAVIGATION_URL = exports.DID_PREFIX = exports.DEFAULT_WINDOW_TIMEOUT = exports.DEFAULT_TIMEOUT = exports.DASHBOARD_URL = exports.AUTH_SERVICE_PREFIX = exports.API_DID_PREFIX = void 0;
+exports.SESSION_TOKEN_STORAGE_KEY = exports.RELAY_SOCKET_PREFIX = exports.REFRESH_TOKEN_STORAGE_KEY = exports.PROFILE_URL = exports.PASSPORT_STATUS = exports.OAUTH_PROVIDER = exports.NAVIGATION_URL = exports.LOGIN_PROVIDER_NAME = exports.LOGIN_PROVIDER = exports.DID_PREFIX = exports.DEFAULT_WINDOW_TIMEOUT = exports.DEFAULT_TIMEOUT = exports.DASHBOARD_URL = exports.AUTH_SERVICE_PREFIX = exports.API_DID_PREFIX = void 0;
 const DEFAULT_TIMEOUT = exports.DEFAULT_TIMEOUT = 5 * 60;
 const DEFAULT_WINDOW_TIMEOUT = exports.DEFAULT_WINDOW_TIMEOUT = 30 * 60;
 const AUTH_SERVICE_PREFIX = exports.AUTH_SERVICE_PREFIX = '/.well-known/service';
@@ -18,4 +18,30 @@ const DID_PREFIX = exports.DID_PREFIX = 'did:abt:';
 const PASSPORT_STATUS = exports.PASSPORT_STATUS = {
   VALID: 'valid',
   REVOKED: 'revoked'
+};
+const LOGIN_PROVIDER = exports.LOGIN_PROVIDER = {
+  // EMAIL: 'Email',
+  AUTH0: 'auth0',
+  APPLE: 'apple',
+  GITHUB: 'github',
+  GOOGLE: 'google',
+  WALLET: 'wallet',
+  NFT: 'nft'
+};
+const LOGIN_PROVIDER_NAME = exports.LOGIN_PROVIDER_NAME = {
+  // [LOGIN_PROVIDER.EMAIL]: 'Email',
+  [LOGIN_PROVIDER.AUTH0]: 'Email',
+  [LOGIN_PROVIDER.APPLE]: 'Apple',
+  [LOGIN_PROVIDER.GITHUB]: 'Github',
+  [LOGIN_PROVIDER.GOOGLE]: 'Google',
+  [LOGIN_PROVIDER.WALLET]: 'DID Wallet',
+  [LOGIN_PROVIDER.NFT]: 'NFT'
+};
+
+// HACK: 目前这里的键值不能使用 [LOGIN_PROVIDER.AUTH0] 形式，否则会影响 ts 的 keyof typeof OAUTH_PROVIDER 来获取键值作为类型的判断
+const OAUTH_PROVIDER = exports.OAUTH_PROVIDER = {
+  auth0: 'Email',
+  apple: 'Apple',
+  github: 'Github',
+  google: 'Google'
 };

package/lib/Util/federated.js

@@ -4,6 +4,7 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.getApps = getApps;
+exports.getBlockletData = getBlockletData;
 exports.getConfig = getConfig;
 exports.getCurrentApp = getCurrentApp;
 exports.getFederatedApp = getFederatedApp;
@@ -97,4 +98,16 @@ function getApps(blocklet) {
   }
   // NOTICE: masterApp 应该排在前面
   return appList.reverse();
+}
+async function getBlockletData(appUrl) {
+  try {
+    const url = new URL('__blocklet__.js', appUrl);
+    url.searchParams.set('type', 'json');
+    const res = await fetch(url.href);
+    const jsonData = await res.json();
+    return jsonData;
+  } catch (err) {
+    console.error("Failed to get blocklet data: ".concat(appUrl), err);
+    return null;
+  }
 }

package/lib/WalletOSIcon/index.js

@@ -11,9 +11,12 @@ var _iosRounded = _interopRequireDefault(require("@iconify-icons/material-symbol
 var _language = _interopRequireDefault(require("@iconify-icons/material-symbols/language"));
 var _android = _interopRequireDefault(require("@iconify-icons/material-symbols/android"));
 var _questionMarkRounded = _interopRequireDefault(require("@iconify-icons/material-symbols/question-mark-rounded"));
-var _auth0Icon = _interopRequireDefault(require("@iconify-icons/logos/auth0-icon"));
+var _mailOutlineRounded = _interopRequireDefault(require("@iconify-icons/material-symbols/mail-outline-rounded"));
+var _constant = require("../../es/Util/constant");
 var _jsxRuntime = require("react/jsx-runtime");
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+// import Auth0Icon from '@iconify-icons/logos/auth0-icon';
+
 function WalletOSIcon(_ref) {
   let {
     loading,
@@ -29,9 +32,9 @@ function WalletOSIcon(_ref) {
       }
     });
   }
-  if (provider === 'auth0') {
+  if (provider === _constant.LOGIN_PROVIDER.AUTH0) {
     return /*#__PURE__*/(0, _jsxRuntime.jsx)(_react.Icon, {
-      icon: _auth0Icon.default,
+      icon: _mailOutlineRounded.default,
       style: {
         color,
         transform: 'scale(0.85)'

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@arcblock/ux",
-  "version": "2.9.67",
+  "version": "2.9.69",
   "description": "Common used react components for arcblock products",
   "keywords": [
     "react",
@@ -355,15 +355,16 @@
   },
   "peerDependencies": {
     "@mui/icons-material": ">=5.15.0",
-    "@mui/material": "^5.15.0",
-    "react": ">=18.2.0"
+    "@mui/material": ">=5.15.0",
+    "react": ">=18.2.0",
+    "react-router-dom": ">=6.22.3"
   },
-  "gitHead": "d9517b055c9631ac47474119674ad845e4e7c03b",
+  "gitHead": "375716410d5c6dc796fbd8dcd3240b846a5e1b33",
   "dependencies": {
     "@arcblock/did-motif": "^1.1.13",
-    "@arcblock/icons": "^2.9.67",
-    "@arcblock/nft-display": "^2.9.67",
-    "@arcblock/react-hooks": "^2.9.67",
+    "@arcblock/icons": "^2.9.69",
+    "@arcblock/nft-display": "^2.9.69",
+    "@arcblock/react-hooks": "^2.9.69",
     "@babel/plugin-syntax-dynamic-import": "^7.8.3",
     "@emotion/react": "^11.10.4",
     "@emotion/styled": "^11.10.4",
@@ -399,7 +400,6 @@
     "react-intersection-observer": "^8.34.0",
     "react-lottie-player": "^1.4.3",
     "react-player": "^1.15.3",
-    "react-router-dom": "^6.4.2",
     "react-shadow": "^19.0.3",
     "react-svg": "^16.1.18",
     "react-use": "^17.4.0",

package/src/Button/wrap.js

@@ -22,7 +22,7 @@ const extendedColors = {
  * @typedef {{
  *  rounded?: boolean,
  *  loading?: boolean,
- *  forwardedRef: import('react').ForwardedRef<any>,
+ *  forwardedRef?: import('react').ForwardedRef<any>,
  *  color?: 'default' | 'inherit' | 'primary' | 'secondary' | 'danger' | 'warning' | 'reverse' | 'did'
  * } & import('@mui/material').ButtonProps} ButtonProps
  */

package/src/Colors/themes/temp.js

@@ -41,6 +41,8 @@ const colors = {
   buttonsButtonInverted: 'rgba(3, 7, 18, 1)',
   buttonsButtonInvertedHover: 'rgba(17, 24, 39, 1)',
   buttonsButtonDanger: 'rgba(225, 29, 72, 1)',
+
+  red: '#FF6369',
 };
 
 export default colors;

package/src/Dialog/types.d.ts

@@ -10,5 +10,8 @@ export type OpenConfirmProps = {
   cancelButtonText: string;
 };
 
+export type UpdateConfirmProps = Partial<Pick<OpenConfirmProps, 'title' | 'content'>>;
+
 export type OpenConfirm = (params: OpenConfirmProps) => void;
 export type CloseConfirm = () => void;
+export type UpdateConfirm = (params: UpdateConfirmProps) => void;

package/src/Dialog/use-confirm.jsx

@@ -46,6 +46,10 @@ const ConfirmHolder = forwardRef((props, ref) => {
       reset();
     }, 300);
   });
+  const update = useMemoizedFn((params) => {
+    if (params.title) setTitle(params.title);
+    if (params.content) setContent(params.content);
+  });
   const onCancel = useMemoizedFn((e, reason) => {
     close();
     state?.onCancel(e, reason);
@@ -64,9 +68,10 @@ const ConfirmHolder = forwardRef((props, ref) => {
       return {
         open,
         close,
+        update,
       };
     },
-    [open, close]
+    [open, close, update]
   );
 
   return (
@@ -109,15 +114,24 @@ export default function useConfirm(props = {}) {
     confirmRef.current?.open(...args);
   });
   /**
-   * 挂你不一个弹窗
+   * 关闭一个弹窗
    * @type {import('./types').CloseConfirm}
    */
   const close = useMemoizedFn((...args) => {
     confirmRef.current?.close(...args);
   });
+
+  /**
+   * 更新弹窗的 title 和 content
+   * @type {import('./types').UpdateConfirm}
+   */
+  const update = useMemoizedFn((...args) => {
+    confirmRef.current?.update(...args);
+  });
   const confirmApi = {
     open,
     close,
+    update,
   };
 
   return {

package/src/Layout/dashboard/index.js

@@ -207,8 +207,6 @@ const Wrapper = styled('div', {
     .header-logo {
       display: flex;
       justify-content: center;
-      /* logo 与 sidebar 中的 icon 垂直对齐, sidebarWidth - 24 * 2 */
-      min-width: ${(props) => props.sidebarWidth - 24 * 2}px;
     }
     &.dashboard-dense {
       .header-logo {

package/src/SessionUser/components/session-user-item.jsx

@@ -1,6 +1,6 @@
 import PropTypes from 'prop-types';
 import { forwardRef } from 'react';
-import { Box, IconButton, Typography } from '@mui/material';
+import { Box, IconButton, Tooltip, Typography } from '@mui/material';
 import { Icon } from '@iconify/react';
 import LensIcon from '@iconify-icons/material-symbols/lens';
 
@@ -31,6 +31,7 @@ const SessionUserItem = forwardRef(({ sessionItem, statusContent, active, ...res
           display: 'flex',
           alignItems: 'center',
           gap: 0.5,
+          overflow: 'hidden',
           '& .did-address-avatar': {
             display: 'none !important',
           },
@@ -49,7 +50,23 @@ const SessionUserItem = forwardRef(({ sessionItem, statusContent, active, ...res
         {isRawWalletAccount ? (
           <DID did={sessionItem.userDid} copyable={false} size={14} responsive={false} compact sx={{ lineHeight: 1 }} />
         ) : (
-          sessionItem.user.email && <Typography sx={{ fontSize: 14 }}>{sessionItem.user.email}</Typography>
+          sessionItem.user.email && (
+            <Tooltip
+              title={sessionItem.user.email}
+              sx={{
+                zIndex: 1600,
+              }}
+              placement="top">
+              <Typography
+                sx={{
+                  fontSize: 14,
+                  overflow: 'hidden',
+                  textOverflow: 'ellipsis',
+                }}>
+                {sessionItem.user.email}
+              </Typography>
+            </Tooltip>
+          )
         )}
       </Box>
       {statusContent ||

package/src/Tabs/index.jsx

@@ -157,7 +157,7 @@ LineTabs.propTypes = {
 
 /**
  * @description
- * @param { TabsProps} props
+ * @param {TabsProps} props
  * @return {import('react').ReactNode}
  */
 

package/src/Util/constant.js

@@ -17,3 +17,31 @@ export const PASSPORT_STATUS = {
   VALID: 'valid',
   REVOKED: 'revoked',
 };
+
+export const LOGIN_PROVIDER = {
+  // EMAIL: 'Email',
+  AUTH0: 'auth0',
+  APPLE: 'apple',
+  GITHUB: 'github',
+  GOOGLE: 'google',
+  WALLET: 'wallet',
+  NFT: 'nft',
+};
+
+export const LOGIN_PROVIDER_NAME = {
+  // [LOGIN_PROVIDER.EMAIL]: 'Email',
+  [LOGIN_PROVIDER.AUTH0]: 'Email',
+  [LOGIN_PROVIDER.APPLE]: 'Apple',
+  [LOGIN_PROVIDER.GITHUB]: 'Github',
+  [LOGIN_PROVIDER.GOOGLE]: 'Google',
+  [LOGIN_PROVIDER.WALLET]: 'DID Wallet',
+  [LOGIN_PROVIDER.NFT]: 'NFT',
+};
+
+// HACK: 目前这里的键值不能使用 [LOGIN_PROVIDER.AUTH0] 形式，否则会影响 ts 的 keyof typeof OAUTH_PROVIDER 来获取键值作为类型的判断
+export const OAUTH_PROVIDER = {
+  auth0: 'Email',
+  apple: 'Apple',
+  github: 'Github',
+  google: 'Google',
+};

package/src/Util/federated.js

@@ -88,3 +88,16 @@ export function getApps(blocklet) {
   // NOTICE: masterApp 应该排在前面
   return appList.reverse();
 }
+
+export async function getBlockletData(appUrl) {
+  try {
+    const url = new URL('__blocklet__.js', appUrl);
+    url.searchParams.set('type', 'json');
+    const res = await fetch(url.href);
+    const jsonData = await res.json();
+    return jsonData;
+  } catch (err) {
+    console.error(`Failed to get blocklet data: ${appUrl}`, err);
+    return null;
+  }
+}

package/src/WalletOSIcon/index.jsx

@@ -5,15 +5,17 @@ import IOSRoundedIcon from '@iconify-icons/material-symbols/ios-rounded';
 import LanguageIcon from '@iconify-icons/material-symbols/language';
 import AndroidIcon from '@iconify-icons/material-symbols/android';
 import QuestionMarkRoundedIcon from '@iconify-icons/material-symbols/question-mark-rounded';
-import Auth0Icon from '@iconify-icons/logos/auth0-icon';
+// import Auth0Icon from '@iconify-icons/logos/auth0-icon';
+import MailOutlineRoundedIcon from '@iconify-icons/material-symbols/mail-outline-rounded';
+import { LOGIN_PROVIDER } from '../../es/Util/constant';
 
 export default function WalletOSIcon({ loading, walletOS, provider, color }) {
   if (loading) {
     return <Icon icon={QuestionMarkRoundedIcon} style={{ color: 'transparent' }} />;
   }
 
-  if (provider === 'auth0') {
-    return <Icon icon={Auth0Icon} style={{ color, transform: 'scale(0.85)' }} />;
+  if (provider === LOGIN_PROVIDER.AUTH0) {
+    return <Icon icon={MailOutlineRoundedIcon} style={{ color, transform: 'scale(0.85)' }} />;
   }
   if (walletOS === 'ios') {
     return <Icon icon={IOSRoundedIcon} style={{ color, transform: 'scale(1.1)' }} />;