@arcblock/ux 2.7.17 → 2.7.19

package/es/SessionManager/account-item.js

@@ -2,13 +2,20 @@ import { Box, IconButton, Link, MenuItem, Typography } from '@mui/material';
 import PropTypes from 'prop-types';
 import { Icon } from '@iconify/react';
 import CheckIcon from '@iconify-icons/mdi/check';
+import AppleIOSIcon from '@iconify-icons/mdi/apple-ios';
+import AndroidIcon from '@iconify-icons/mdi/android';
+import WebIcon from '@iconify-icons/mdi/web';
+import ApiIcon from '@iconify-icons/mdi/api';
+import Auth0Icon from '@iconify-icons/logos/auth0-icon';
 import TrashCanOutlineIcon from '@iconify-icons/mdi/trash-can-outline';
-import { useMemoizedFn } from 'ahooks';
+import { useCreation, useMemoizedFn } from 'ahooks';
 import Avatar from '../Avatar';
 import DID from '../DID';
 import { translate } from '../Locale/util';
 import { translations } from './translation';
+import { getFederatedEnabled } from '../Util/federated';
 import { jsx as _jsx } from "react/jsx-runtime";
+import { Fragment as _Fragment } from "react/jsx-runtime";
 import { jsxs as _jsxs } from "react/jsx-runtime";
 export default function AccountItem({
   account,
@@ -20,6 +27,7 @@ export default function AccountItem({
   const t = useMemoizedFn((key, data = {}) => {
     return translate(translations, key, locale, 'en', data);
   });
+  const federatedEnabled = getFederatedEnabled();
   const _onChoose = useMemoizedFn(() => onChoose(account, {
     active
   }));
@@ -30,6 +38,64 @@ export default function AccountItem({
       active
     });
   });
+  const stopPropagation = useMemoizedFn(e => {
+    e.stopPropagation();
+  });
+  const walletIcon = useCreation(() => {
+    const {
+      walletOS,
+      provider
+    } = account;
+    if (provider === 'auth0') {
+      return /*#__PURE__*/_jsx(Icon, {
+        icon: Auth0Icon,
+        width: 10,
+        height: 10,
+        style: {
+          color: 'black'
+        }
+      });
+    }
+    if (walletOS === 'ios') {
+      return /*#__PURE__*/_jsx(Icon, {
+        icon: AppleIOSIcon,
+        width: 16,
+        height: 16,
+        style: {
+          color: 'black'
+        }
+      });
+    }
+    if (walletOS === 'android') {
+      return /*#__PURE__*/_jsx(Icon, {
+        icon: AndroidIcon,
+        width: 14,
+        height: 14,
+        style: {
+          color: 'black'
+        }
+      });
+    }
+    if (walletOS === 'web') {
+      return /*#__PURE__*/_jsx(Icon, {
+        icon: WebIcon,
+        style: {
+          color: 'black'
+        }
+      });
+    }
+    if (walletOS === 'api') {
+      return /*#__PURE__*/_jsx(Icon, {
+        icon: ApiIcon,
+        width: 14,
+        height: 14,
+        style: {
+          color: 'black'
+        }
+      });
+    }
+    return null;
+  }, [account.walletOS]);
   if (!account?.did || !account?.appName) {
     return null;
   }
@@ -80,14 +146,22 @@ export default function AccountItem({
         sx: {
           lineHeight: 1
         }
-      }), account.sourceAppPid && /*#__PURE__*/_jsxs(Typography, {
+      }), /*#__PURE__*/_jsxs(Typography, {
         variant: "caption",
-        children: [t('from'), ' ', /*#__PURE__*/_jsx(Link, {
-          href: account.appUrl,
-          target: "_blank",
-          underline: "none",
-          children: account.appName
-        })]
+        display: "flex",
+        alignItems: "center",
+        gap: 0.5,
+        children: [walletIcon, federatedEnabled ? /*#__PURE__*/_jsxs(_Fragment, {
+          children: [t('from'), ' ', /*#__PURE__*/_jsx(Link, {
+            href: account.appUrl,
+            target: "_blank",
+            underline: "none",
+            onClick: stopPropagation,
+            children: account.appName
+          })]
+        }) :
+        // HACK: 用于在有 icon 的情况下，该该行的高度撑高为文字高度
+        walletIcon && '　']
       })]
     }), /*#__PURE__*/_jsx(Box, {
       className: "account-item-actions",

package/es/SessionManager/add-account-item.js

@@ -6,7 +6,7 @@ import { useCreation, useMemoizedFn, useReactive } from 'ahooks';
 import { useRef } from 'react';
 import { translate } from '../Locale/util';
 import { translations } from './translation';
-import { getCurrentApp, getFederatedApp } from '../Util/federated';
+import { getApps } from '../Util/federated';
 import { jsx as _jsx } from "react/jsx-runtime";
 import { jsxs as _jsxs } from "react/jsx-runtime";
 import { Fragment as _Fragment } from "react/jsx-runtime";
@@ -22,22 +22,8 @@ export default function AddAccountItem({
     return translate(translations, key, locale, 'en', data);
   });
   const apps = useCreation(() => {
-    const appList = [];
-    if (typeof window === 'undefined') {
-      return appList;
-    }
-    const blocklet = window?.blocklet;
-    const masterApp = getFederatedApp(blocklet);
-    const currentApp = getCurrentApp(blocklet);
-    if (currentApp) {
-      appList.push(currentApp);
-    }
-    if (masterApp && masterApp?.appId !== currentApp?.appId) {
-      appList.push(masterApp);
-    }
-    // NOTICE: masterApp 应该排在前面
-    return appList.reverse();
-  }, [window.blocklet]);
+    return getApps();
+  }, []);
   const _onAdd = useMemoizedFn(() => {
     if (apps.length <= 1) {
       onAdd(apps[0]);
@@ -83,8 +69,8 @@ export default function AddAccountItem({
       },
       children: apps.map(app => /*#__PURE__*/_jsx(MenuItem, {
         onClick: () => onAdd(app),
-        children: t('connectWithAccount', {
-          name: app.appName
+        children: t('addAppAccount', {
+          appName: app.appName
         })
       }, app.appId))
     }) : null]

package/es/SessionManager/index.js

@@ -93,10 +93,11 @@ function SessionManager({
     const targetApp = latestSession.current.user.sourceAppPid ? masterApp : currentApp;
     if (targetApp) {
       const loginAccount = {
+        ...targetApp,
         did: latestSession.current.user.did,
         avatar: latestSession.current.user.avatar,
-        provider: latestSession.current.provider,
-        ...targetApp
+        provider: latestSession.current.provider || targetApp.provider,
+        walletOS: latestSession.current.walletOS
       };
       connectAccount(loginAccount);
     }

package/es/SessionManager/manage-accounts.js

@@ -53,13 +53,28 @@ export default function ManageAccounts({
       return;
     }
     close();
+    if (account.provider === 'auth0') {
+      // 如果切换的目标是 auth0，则直接打开 auth0 登录页面
+      session.switchDid((...args) => {
+        connectAccount();
+        onSwitchDid(...args);
+      }, {
+        allowWallet: false,
+        sourceAppPid: account.sourceAppPid
+      });
+      return;
+    }
+    const options = {
+      provider: account.provider,
+      sourceAppPid: account.sourceAppPid
+    };
+    if (account.did) {
+      options.forceConnected = account.did;
+    }
     session.switchDid((...args) => {
       connectAccount();
       onSwitchDid(...args);
-    }, {
-      provider: account.provider,
-      sourceAppPid: account.sourceAppPid
-    });
+    }, options);
   });
   const oauthConfigList = Object.entries(oauthConfigs).map(([key, value]) => {
     return {
@@ -103,7 +118,9 @@ export default function ManageAccounts({
     if (!isRawWalletAccount) {
       session.bindWallet(onBindWallet);
     } else {
-      bindOAuth();
+      bindOAuth({
+        session
+      });
     }
   }
   return /*#__PURE__*/_jsxs(_Fragment, {

package/es/SessionManager/menu-accordion.js

@@ -52,10 +52,9 @@ export default function MenuAccordion({
       },
       '.MuiAccordionDetails-root': {
         padding: 0,
-        paddingLeft: '30px',
         '.session-manager-menu-item': {
           fontSize: '15px',
-          padding: '12px 15px',
+          padding: '12px 15px 12px 42px',
           whiteSpace: 'normal'
         },
         '.session-manager-menu-icon': {

package/es/SessionManager/user-info.js

@@ -100,7 +100,6 @@ export default function UserInfo({
         children: [/*#__PURE__*/_jsx(Typography, {
           variant: "h5",
           fontWeight: "bold",
-          fontSize: "auto",
           sx: {
             flex: 1,
             wordBreak: 'break-all'

package/es/Typography/index.js

@@ -1,6 +1,6 @@
 import PropTyps from 'prop-types';
 import { Box, Typography as MuiTypography, Skeleton } from '@mui/material';
-import { useReactive, useSize } from 'ahooks';
+import { useCreation, useReactive, useSize } from 'ahooks';
 import { useEffect, useRef } from 'react';
 import { jsx as _jsx } from "react/jsx-runtime";
 import { jsxs as _jsxs } from "react/jsx-runtime";
@@ -41,7 +41,13 @@ export default function Typography({
     }
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [fontSize, mockSize?.width, containerSize?.width]);
-  return state.loading ? /*#__PURE__*/_jsxs(Box, {
+  const loading = useCreation(() => {
+    if (fontSize === 'auto') {
+      return state.loading;
+    }
+    return false;
+  }, [fontSize, state.loading]);
+  return loading ? /*#__PURE__*/_jsxs(Box, {
     ref: refContainer,
     flex: 1,
     children: [/*#__PURE__*/_jsx(MuiTypography, {

package/es/Util/federated.js

@@ -11,6 +11,10 @@ export function getAutoLoginFederated(blocklet = window.blocklet) {
   const config = getConfig(blocklet);
   return Boolean(config?.autoLogin) && config?.status === 'approved';
 }
+export function getFederatedEnabled(blocklet = window.blocklet) {
+  const config = getConfig(blocklet);
+  return config?.status === 'approved';
+}
 export function getSourceAppPid(blocklet = window.blocklet) {
   const master = getMaster(blocklet);
   return master?.appPid;
@@ -62,4 +66,17 @@ export function getCurrentApp(blocklet = window.blocklet) {
     };
   }
   return null;
+}
+export function getApps(blocklet) {
+  const appList = [];
+  const masterApp = getFederatedApp(blocklet);
+  const currentApp = getCurrentApp(blocklet);
+  if (currentApp) {
+    appList.push(currentApp);
+  }
+  if (masterApp && masterApp?.appId !== currentApp?.appId) {
+    appList.push(masterApp);
+  }
+  // NOTICE: masterApp 应该排在前面
+  return appList.reverse();
 }

package/lib/SessionManager/account-item.js

@@ -8,12 +8,18 @@ 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 _appleIos = _interopRequireDefault(require("@iconify-icons/mdi/apple-ios"));
+var _android = _interopRequireDefault(require("@iconify-icons/mdi/android"));
+var _web = _interopRequireDefault(require("@iconify-icons/mdi/web"));
+var _api = _interopRequireDefault(require("@iconify-icons/mdi/api"));
+var _auth0Icon = _interopRequireDefault(require("@iconify-icons/logos/auth0-icon"));
 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 _federated = require("../Util/federated");
 var _jsxRuntime = require("react/jsx-runtime");
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 function AccountItem(_ref) {
@@ -28,6 +34,7 @@ function AccountItem(_ref) {
     let data = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};
     return (0, _util.translate)(_translation.translations, key, locale, 'en', data);
   });
+  const federatedEnabled = (0, _federated.getFederatedEnabled)();
   const _onChoose = (0, _ahooks.useMemoizedFn)(() => onChoose(account, {
     active
   }));
@@ -38,6 +45,64 @@ function AccountItem(_ref) {
       active
     });
   });
+  const stopPropagation = (0, _ahooks.useMemoizedFn)(e => {
+    e.stopPropagation();
+  });
+  const walletIcon = (0, _ahooks.useCreation)(() => {
+    const {
+      walletOS,
+      provider
+    } = account;
+    if (provider === 'auth0') {
+      return /*#__PURE__*/(0, _jsxRuntime.jsx)(_react.Icon, {
+        icon: _auth0Icon.default,
+        width: 10,
+        height: 10,
+        style: {
+          color: 'black'
+        }
+      });
+    }
+    if (walletOS === 'ios') {
+      return /*#__PURE__*/(0, _jsxRuntime.jsx)(_react.Icon, {
+        icon: _appleIos.default,
+        width: 16,
+        height: 16,
+        style: {
+          color: 'black'
+        }
+      });
+    }
+    if (walletOS === 'android') {
+      return /*#__PURE__*/(0, _jsxRuntime.jsx)(_react.Icon, {
+        icon: _android.default,
+        width: 14,
+        height: 14,
+        style: {
+          color: 'black'
+        }
+      });
+    }
+    if (walletOS === 'web') {
+      return /*#__PURE__*/(0, _jsxRuntime.jsx)(_react.Icon, {
+        icon: _web.default,
+        style: {
+          color: 'black'
+        }
+      });
+    }
+    if (walletOS === 'api') {
+      return /*#__PURE__*/(0, _jsxRuntime.jsx)(_react.Icon, {
+        icon: _api.default,
+        width: 14,
+        height: 14,
+        style: {
+          color: 'black'
+        }
+      });
+    }
+    return null;
+  }, [account.walletOS]);
   if (!(account !== null && account !== void 0 && account.did) || !(account !== null && account !== void 0 && account.appName)) {
     return null;
   }
@@ -88,14 +153,22 @@ function AccountItem(_ref) {
         sx: {
           lineHeight: 1
         }
-      }), account.sourceAppPid && /*#__PURE__*/(0, _jsxRuntime.jsxs)(_material.Typography, {
+      }), /*#__PURE__*/(0, _jsxRuntime.jsxs)(_material.Typography, {
         variant: "caption",
-        children: [t('from'), ' ', /*#__PURE__*/(0, _jsxRuntime.jsx)(_material.Link, {
-          href: account.appUrl,
-          target: "_blank",
-          underline: "none",
-          children: account.appName
-        })]
+        display: "flex",
+        alignItems: "center",
+        gap: 0.5,
+        children: [walletIcon, federatedEnabled ? /*#__PURE__*/(0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
+          children: [t('from'), ' ', /*#__PURE__*/(0, _jsxRuntime.jsx)(_material.Link, {
+            href: account.appUrl,
+            target: "_blank",
+            underline: "none",
+            onClick: stopPropagation,
+            children: account.appName
+          })]
+        }) :
+        // HACK: 用于在有 icon 的情况下，该该行的高度撑高为文字高度
+        walletIcon && '　']
       })]
     }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_material.Box, {
       className: "account-item-actions",

package/lib/SessionManager/add-account-item.js

@@ -29,23 +29,8 @@ function AddAccountItem(_ref) {
     return (0, _util.translate)(_translation.translations, key, locale, 'en', data);
   });
   const apps = (0, _ahooks.useCreation)(() => {
-    var _window;
-    const appList = [];
-    if (typeof window === 'undefined') {
-      return appList;
-    }
-    const blocklet = (_window = window) === null || _window === void 0 ? void 0 : _window.blocklet;
-    const masterApp = (0, _federated.getFederatedApp)(blocklet);
-    const currentApp = (0, _federated.getCurrentApp)(blocklet);
-    if (currentApp) {
-      appList.push(currentApp);
-    }
-    if (masterApp && (masterApp === null || masterApp === void 0 ? void 0 : masterApp.appId) !== (currentApp === null || currentApp === void 0 ? void 0 : currentApp.appId)) {
-      appList.push(masterApp);
-    }
-    // NOTICE: masterApp 应该排在前面
-    return appList.reverse();
-  }, [window.blocklet]);
+    return (0, _federated.getApps)();
+  }, []);
   const _onAdd = (0, _ahooks.useMemoizedFn)(() => {
     if (apps.length <= 1) {
       onAdd(apps[0]);
@@ -91,8 +76,8 @@ function AddAccountItem(_ref) {
       },
       children: apps.map(app => /*#__PURE__*/(0, _jsxRuntime.jsx)(_material.MenuItem, {
         onClick: () => onAdd(app),
-        children: t('connectWithAccount', {
-          name: app.appName
+        children: t('addAppAccount', {
+          appName: app.appName
         })
       }, app.appId))
     }) : null]

package/lib/SessionManager/index.js

@@ -109,11 +109,12 @@ function SessionManager(_ref) {
     const masterApp = (0, _federated.getFederatedApp)(blocklet);
     const targetApp = latestSession.current.user.sourceAppPid ? masterApp : currentApp;
     if (targetApp) {
-      const loginAccount = _objectSpread({
+      const loginAccount = _objectSpread(_objectSpread({}, targetApp), {}, {
         did: latestSession.current.user.did,
         avatar: latestSession.current.user.avatar,
-        provider: latestSession.current.provider
-      }, targetApp);
+        provider: latestSession.current.provider || targetApp.provider,
+        walletOS: latestSession.current.walletOS
+      });
       connectAccount(loginAccount);
     }
   });

package/lib/SessionManager/manage-accounts.js

@@ -64,13 +64,28 @@ function ManageAccounts(_ref) {
       return;
     }
     close();
+    if (account.provider === 'auth0') {
+      // 如果切换的目标是 auth0，则直接打开 auth0 登录页面
+      session.switchDid(function () {
+        connectAccount();
+        onSwitchDid(...arguments);
+      }, {
+        allowWallet: false,
+        sourceAppPid: account.sourceAppPid
+      });
+      return;
+    }
+    const options = {
+      provider: account.provider,
+      sourceAppPid: account.sourceAppPid
+    };
+    if (account.did) {
+      options.forceConnected = account.did;
+    }
     session.switchDid(function () {
       connectAccount();
       onSwitchDid(...arguments);
-    }, {
-      provider: account.provider,
-      sourceAppPid: account.sourceAppPid
-    });
+    }, options);
   });
   const oauthConfigList = Object.entries(oauthConfigs).map(_ref3 => {
     let [key, value] = _ref3;
@@ -115,7 +130,9 @@ function ManageAccounts(_ref) {
     if (!isRawWalletAccount) {
       session.bindWallet(onBindWallet);
     } else {
-      bindOAuth();
+      bindOAuth({
+        session
+      });
     }
   }
   return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {

package/lib/SessionManager/menu-accordion.js

@@ -60,10 +60,9 @@ function MenuAccordion(_ref) {
       },
       '.MuiAccordionDetails-root': {
         padding: 0,
-        paddingLeft: '30px',
         '.session-manager-menu-item': {
           fontSize: '15px',
-          padding: '12px 15px',
+          padding: '12px 15px 12px 42px',
           whiteSpace: 'normal'
         },
         '.session-manager-menu-icon': {

package/lib/SessionManager/user-info.js

@@ -116,7 +116,6 @@ function UserInfo(_ref) {
         children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_Typography.default, {
           variant: "h5",
           fontWeight: "bold",
-          fontSize: "auto",
           sx: {
             flex: 1,
             wordBreak: 'break-all'

package/lib/Typography/index.js

@@ -56,7 +56,13 @@ function Typography(_ref) {
     }
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [fontSize, mockSize === null || mockSize === void 0 ? void 0 : mockSize.width, containerSize === null || containerSize === void 0 ? void 0 : containerSize.width]);
-  return state.loading ? /*#__PURE__*/(0, _jsxRuntime.jsxs)(_material.Box, {
+  const loading = (0, _ahooks.useCreation)(() => {
+    if (fontSize === 'auto') {
+      return state.loading;
+    }
+    return false;
+  }, [fontSize, state.loading]);
+  return loading ? /*#__PURE__*/(0, _jsxRuntime.jsxs)(_material.Box, {
     ref: refContainer,
     flex: 1,
     children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_material.Typography, _objectSpread(_objectSpread({}, rest), {}, {

package/lib/Util/federated.js

@@ -3,10 +3,12 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
+exports.getApps = getApps;
 exports.getAutoLoginFederated = getAutoLoginFederated;
 exports.getConfig = getConfig;
 exports.getCurrentApp = getCurrentApp;
 exports.getFederatedApp = getFederatedApp;
+exports.getFederatedEnabled = getFederatedEnabled;
 exports.getMaster = getMaster;
 exports.getSourceAppPid = getSourceAppPid;
 var _isEmpty = _interopRequireDefault(require("lodash/isEmpty"));
@@ -28,6 +30,11 @@ function getAutoLoginFederated() {
   const config = getConfig(blocklet);
   return Boolean(config === null || config === void 0 ? void 0 : config.autoLogin) && (config === null || config === void 0 ? void 0 : config.status) === 'approved';
 }
+function getFederatedEnabled() {
+  let blocklet = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : window.blocklet;
+  const config = getConfig(blocklet);
+  return (config === null || config === void 0 ? void 0 : config.status) === 'approved';
+}
 function getSourceAppPid() {
   let blocklet = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : window.blocklet;
   const master = getMaster(blocklet);
@@ -82,4 +89,17 @@ function getCurrentApp() {
     };
   }
   return null;
+}
+function getApps(blocklet) {
+  const appList = [];
+  const masterApp = getFederatedApp(blocklet);
+  const currentApp = getCurrentApp(blocklet);
+  if (currentApp) {
+    appList.push(currentApp);
+  }
+  if (masterApp && (masterApp === null || masterApp === void 0 ? void 0 : masterApp.appId) !== (currentApp === null || currentApp === void 0 ? void 0 : currentApp.appId)) {
+    appList.push(masterApp);
+  }
+  // NOTICE: masterApp 应该排在前面
+  return appList.reverse();
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@arcblock/ux",
-  "version": "2.7.17",
+  "version": "2.7.19",
   "description": "Common used react components for arcblock products",
   "keywords": [
     "react",
@@ -322,21 +322,22 @@
   "peerDependencies": {
     "react": ">=18.1.0"
   },
-  "gitHead": "3a169b96cef38680f727a9d0aa0dc4588eaf85fd",
+  "gitHead": "b87566fc7ec2502f2f1481189cd9a22a2ebde42e",
   "dependencies": {
     "@arcblock/did-motif": "^1.1.13",
-    "@arcblock/icons": "^2.7.17",
-    "@arcblock/react-hooks": "^2.7.17",
+    "@arcblock/icons": "^2.7.19",
+    "@arcblock/react-hooks": "^2.7.19",
     "@babel/plugin-syntax-dynamic-import": "^7.8.3",
     "@emotion/react": "^11.10.4",
     "@emotion/styled": "^11.10.4",
     "@fontsource/lato": "^4.5.10",
     "@fontsource/ubuntu-mono": "^4.5.11",
     "@iconify-icons/ion": "^1.2.10",
+    "@iconify-icons/logos": "^1.2.35",
     "@iconify-icons/mdi": "^1.2.47",
     "@iconify/react": "^4.1.1",
-    "@mui/icons-material": "^5.10.6",
-    "@mui/material": "^5.10.8",
+    "@mui/icons-material": "^5.14.8",
+    "@mui/material": "^5.14.8",
     "@solana/qr-code-styling": "^1.6.0-beta.0",
     "@testing-library/react": "^14.0.0",
     "ahooks": "^3.7.8",
@@ -352,7 +353,7 @@
     "is-svg": "^4.3.2",
     "js-cookie": "^2.2.1",
     "lodash": "^4.17.21",
-    "mui-datatables": "^4.2.2",
+    "mui-datatables": "^4.3.0",
     "notistack": "^2.0.5",
     "pako": "^2.1.0",
     "react-cookie-consent": "^6.4.1",

package/src/SessionManager/account-item.jsx

@@ -2,19 +2,27 @@ import { Box, IconButton, Link, MenuItem, Typography } from '@mui/material';
 import PropTypes from 'prop-types';
 import { Icon } from '@iconify/react';
 import CheckIcon from '@iconify-icons/mdi/check';
+import AppleIOSIcon from '@iconify-icons/mdi/apple-ios';
+import AndroidIcon from '@iconify-icons/mdi/android';
+import WebIcon from '@iconify-icons/mdi/web';
+import ApiIcon from '@iconify-icons/mdi/api';
+import Auth0Icon from '@iconify-icons/logos/auth0-icon';
 import TrashCanOutlineIcon from '@iconify-icons/mdi/trash-can-outline';
-import { useMemoizedFn } from 'ahooks';
+import { useCreation, useMemoizedFn } from 'ahooks';
 
 import Avatar from '../Avatar';
 import DID from '../DID';
 import { translate } from '../Locale/util';
 import { translations } from './translation';
+import { getFederatedEnabled } from '../Util/federated';
 
 export default function AccountItem({ account, active, onDelete, onChoose, locale }) {
   const t = useMemoizedFn((key, data = {}) => {
     return translate(translations, key, locale, 'en', data);
   });
 
+  const federatedEnabled = getFederatedEnabled();
+
   const _onChoose = useMemoizedFn(() => onChoose(account, { active }));
 
   const _onDelete = useMemoizedFn((e) => {
@@ -23,6 +31,30 @@ export default function AccountItem({ account, active, onDelete, onChoose, local
     onDelete(account, { active });
   });
 
+  const stopPropagation = useMemoizedFn((e) => {
+    e.stopPropagation();
+  });
+
+  const walletIcon = useCreation(() => {
+    const { walletOS, provider } = account;
+    if (provider === 'auth0') {
+      return <Icon icon={Auth0Icon} width={10} height={10} style={{ color: 'black' }} />;
+    }
+    if (walletOS === 'ios') {
+      return <Icon icon={AppleIOSIcon} width={16} height={16} style={{ color: 'black' }} />;
+    }
+    if (walletOS === 'android') {
+      return <Icon icon={AndroidIcon} width={14} height={14} style={{ color: 'black' }} />;
+    }
+    if (walletOS === 'web') {
+      return <Icon icon={WebIcon} style={{ color: 'black' }} />;
+    }
+    if (walletOS === 'api') {
+      return <Icon icon={ApiIcon} width={14} height={14} style={{ color: 'black' }} />;
+    }
+    return null;
+  }, [account.walletOS]);
+
   if (!account?.did || !account?.appName) {
     return null;
   }
@@ -65,14 +97,20 @@ export default function AccountItem({ account, active, onDelete, onChoose, local
           },
         }}>
         <DID did={account.did} copyable={false} size={14} responsive={false} compact sx={{ lineHeight: 1 }} />
-        {account.sourceAppPid && (
-          <Typography variant="caption">
-            {t('from')}{' '}
-            <Link href={account.appUrl} target="_blank" underline="none">
-              {account.appName}
-            </Link>
-          </Typography>
-        )}
+        <Typography variant="caption" display="flex" alignItems="center" gap={0.5}>
+          {walletIcon}
+          {federatedEnabled ? (
+            <>
+              {t('from')}{' '}
+              <Link href={account.appUrl} target="_blank" underline="none" onClick={stopPropagation}>
+                {account.appName}
+              </Link>
+            </>
+          ) : (
+            // HACK: 用于在有 icon 的情况下，该该行的高度撑高为文字高度
+            walletIcon && '　'
+          )}
+        </Typography>
       </Box>
       <Box className="account-item-actions">
         {active ? (

package/src/SessionManager/add-account-item.jsx

@@ -6,7 +6,7 @@ import { useCreation, useMemoizedFn, useReactive } from 'ahooks';
 import { useRef } from 'react';
 import { translate } from '../Locale/util';
 import { translations } from './translation';
-import { getCurrentApp, getFederatedApp } from '../Util/federated';
+import { getApps } from '../Util/federated';
 
 export default function AddAccountItem({ onAdd, locale }) {
   const addRef = useRef(null);
@@ -18,24 +18,8 @@ export default function AddAccountItem({ onAdd, locale }) {
     return translate(translations, key, locale, 'en', data);
   });
   const apps = useCreation(() => {
-    const appList = [];
-    if (typeof window === 'undefined') {
-      return appList;
-    }
-    const blocklet = window?.blocklet;
-
-    const masterApp = getFederatedApp(blocklet);
-    const currentApp = getCurrentApp(blocklet);
-
-    if (currentApp) {
-      appList.push(currentApp);
-    }
-    if (masterApp && masterApp?.appId !== currentApp?.appId) {
-      appList.push(masterApp);
-    }
-    // NOTICE: masterApp 应该排在前面
-    return appList.reverse();
-  }, [window.blocklet]);
+    return getApps();
+  }, []);
 
   const _onAdd = useMemoizedFn(() => {
     if (apps.length <= 1) {
@@ -78,7 +62,7 @@ export default function AddAccountItem({ onAdd, locale }) {
           }}>
           {apps.map((app) => (
             <MenuItem key={app.appId} onClick={() => onAdd(app)}>
-              {t('connectWithAccount', { name: app.appName })}
+              {t('addAppAccount', { appName: app.appName })}
             </MenuItem>
           ))}
         </Menu>

package/src/SessionManager/index.jsx

@@ -89,10 +89,11 @@ function SessionManager({
     const targetApp = latestSession.current.user.sourceAppPid ? masterApp : currentApp;
     if (targetApp) {
       const loginAccount = {
+        ...targetApp,
         did: latestSession.current.user.did,
         avatar: latestSession.current.user.avatar,
-        provider: latestSession.current.provider,
-        ...targetApp,
+        provider: latestSession.current.provider || targetApp.provider,
+        walletOS: latestSession.current.walletOS,
       };
       connectAccount(loginAccount);
     }

package/src/SessionManager/manage-accounts.jsx

@@ -43,16 +43,31 @@ export default function ManageAccounts({
       return;
     }
     close();
-    session.switchDid(
-      (...args) => {
-        connectAccount();
-        onSwitchDid(...args);
-      },
-      {
-        provider: account.provider,
-        sourceAppPid: account.sourceAppPid,
-      }
-    );
+    if (account.provider === 'auth0') {
+      // 如果切换的目标是 auth0，则直接打开 auth0 登录页面
+      session.switchDid(
+        (...args) => {
+          connectAccount();
+          onSwitchDid(...args);
+        },
+        {
+          allowWallet: false,
+          sourceAppPid: account.sourceAppPid,
+        }
+      );
+      return;
+    }
+    const options = {
+      provider: account.provider,
+      sourceAppPid: account.sourceAppPid,
+    };
+    if (account.did) {
+      options.forceConnected = account.did;
+    }
+    session.switchDid((...args) => {
+      connectAccount();
+      onSwitchDid(...args);
+    }, options);
   });
 
   const oauthConfigList = Object.entries(oauthConfigs)
@@ -102,7 +117,7 @@ export default function ManageAccounts({
     if (!isRawWalletAccount) {
       session.bindWallet(onBindWallet);
     } else {
-      bindOAuth();
+      bindOAuth({ session });
     }
   }
 

package/src/SessionManager/menu-accordion.jsx

@@ -48,10 +48,9 @@ export default function MenuAccordion({ title, children, locale, expanded, onCha
         },
         '.MuiAccordionDetails-root': {
           padding: 0,
-          paddingLeft: '30px',
           '.session-manager-menu-item': {
             fontSize: '15px',
-            padding: '12px 15px',
+            padding: '12px 15px 12px 42px',
             whiteSpace: 'normal',
           },
           '.session-manager-menu-icon': {

package/src/SessionManager/user-info.jsx

@@ -80,7 +80,7 @@ export default function UserInfo({ session, locale, onSwitchProfile, onSwitchPas
       </Box>
       <Box sx={{ flex: 1, position: 'static', overflow: 'hidden', fontSize: '14px' }}>
         <Box display="flex" alignItems="center" gap="4px" mb={0.5}>
-          <Typography variant="h5" fontWeight="bold" fontSize="auto" sx={{ flex: 1, wordBreak: 'break-all' }}>
+          <Typography variant="h5" fontWeight="bold" sx={{ flex: 1, wordBreak: 'break-all' }}>
             {session.user.fullName}
           </Typography>
           <Chip

package/src/Typography/index.jsx

@@ -1,6 +1,6 @@
 import PropTyps from 'prop-types';
 import { Box, Typography as MuiTypography, Skeleton } from '@mui/material';
-import { useReactive, useSize } from 'ahooks';
+import { useCreation, useReactive, useSize } from 'ahooks';
 import { useEffect, useRef } from 'react';
 
 export default function Typography({ minFontSize, fontSize, children, sx, ...rest }) {
@@ -35,7 +35,14 @@ export default function Typography({ minFontSize, fontSize, children, sx, ...res
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [fontSize, mockSize?.width, containerSize?.width]);
 
-  return state.loading ? (
+  const loading = useCreation(() => {
+    if (fontSize === 'auto') {
+      return state.loading;
+    }
+    return false;
+  }, [fontSize, state.loading]);
+
+  return loading ? (
     <Box ref={refContainer} flex={1}>
       <MuiTypography {...rest} sx={sx} noWrap>
         <Skeleton variant="text" sx={{ fontSize: '1rem' }} />

package/src/Util/federated.js

@@ -15,6 +15,11 @@ export function getAutoLoginFederated(blocklet = window.blocklet) {
   return Boolean(config?.autoLogin) && config?.status === 'approved';
 }
 
+export function getFederatedEnabled(blocklet = window.blocklet) {
+  const config = getConfig(blocklet);
+  return config?.status === 'approved';
+}
+
 export function getSourceAppPid(blocklet = window.blocklet) {
   const master = getMaster(blocklet);
   return master?.appPid;
@@ -71,3 +76,19 @@ export function getCurrentApp(blocklet = window.blocklet) {
   }
   return null;
 }
+
+export function getApps(blocklet) {
+  const appList = [];
+
+  const masterApp = getFederatedApp(blocklet);
+  const currentApp = getCurrentApp(blocklet);
+
+  if (currentApp) {
+    appList.push(currentApp);
+  }
+  if (masterApp && masterApp?.appId !== currentApp?.appId) {
+    appList.push(masterApp);
+  }
+  // NOTICE: masterApp 应该排在前面
+  return appList.reverse();
+}