@arcblock/ux 2.7.16 → 2.7.18

package/es/SessionManager/translation.js

@@ -1,7 +1,7 @@
 /* eslint-disable import/prefer-default-export */
 export const translations = {
   en: {
-    edit: 'Edit',
+    switch: 'Switch',
     account: 'account',
     switchDid: 'Switch DID',
     switchTo: 'Switch to',
@@ -13,9 +13,9 @@ export const translations = {
     alreadyBindOAuth: 'Already bind Auth0',
     bind: 'Bind ',
     thirdParty: 'Third Party Login',
-    connectedWith: 'Connected with',
-    manageAccounts: 'Manage Accounts',
-    manageBlocklet: 'Manage Blocklet',
+    addAppAccount: 'Add {appName} account',
+    accounts: 'Accounts',
+    blocklet: 'Blocklet',
     from: 'From',
     addAnotherAccount: 'Add another account',
     deleteAccountTitle: 'Remove this account ?',
@@ -25,24 +25,24 @@ export const translations = {
     noneMenu: 'Empty menu, maybe you should switch to another role'
   },
   zh: {
-    edit: '编辑',
+    switch: '切换',
     account: '账号',
     switchDid: '切换账户',
     switchTo: '切换至',
     switchProfile: '切换用户信息',
     switchPassport: '切换通行证',
-    disconnect: '退出',
+    disconnect: '退出登录',
     connect: '登录',
     openInWallet: '打开 DID 钱包',
     // NOTE: 目前只有 Auth0，展示出具体的第三方名字会更好
     alreadyBindOAuth: '已绑定 Auth0 账号',
     bind: '绑定',
     thirdParty: '第三方登录',
-    connectedWith: '连接至',
-    manageAccounts: '管理账户',
-    manageBlocklet: '管理应用',
+    addAppAccount: '添加 {appName} 账户',
+    accounts: '账户',
+    blocklet: '应用',
     from: '连接至',
-    addAnotherAccount: '添加一个账号',
+    addAnotherAccount: '添加账号',
     deleteAccountTitle: '是否删除账户？',
     deleteAccountContent: '账户删除后，可再次添加',
     confirm: '确认',

package/es/SessionManager/use-config.js

@@ -0,0 +1,34 @@
+import { useLocalStorageState, useMemoizedFn } from 'ahooks';
+import cloneDeep from 'lodash/cloneDeep';
+export default function useConfig() {
+  const [config, setConfig] = useLocalStorageState('blocklet:sessionManager:config', {
+    defaultValue: {
+      accounts: [],
+      expandAccount: true,
+      expandBlocklet: true
+    }
+  });
+  const connectAccount = useMemoizedFn(account => {
+    const cloneConfig = cloneDeep(config);
+    const accountIndex = cloneConfig.accounts.findIndex(x => x.did === account.did);
+    if (accountIndex >= 0) {
+      cloneConfig.accounts.splice(accountIndex, 1);
+    }
+    cloneConfig.accounts.unshift(account);
+    setConfig(cloneConfig);
+  });
+  const deleteAccount = useMemoizedFn(account => {
+    const cloneConfig = cloneDeep(config);
+    const findIndex = cloneConfig.accounts.findIndex(item => item.did === account.did);
+    if (findIndex >= 0) {
+      cloneConfig.accounts.splice(findIndex, 1);
+    }
+    setConfig(cloneConfig);
+  });
+  return {
+    config,
+    setConfig,
+    connectAccount,
+    deleteAccount
+  };
+}

package/es/SessionManager/user-info.js

@@ -1,6 +1,6 @@
 /* eslint-disable react/jsx-no-bind */
 /* eslint-disable react/prop-types */
-import { Box, Chip, Typography } from '@mui/material';
+import { Box, Chip } from '@mui/material';
 import ShieldCheckIcon from '@iconify-icons/mdi/shield-check';
 import ExpandMoreIcon from '@iconify-icons/mdi/expand-more';
 import { Icon } from '@iconify/react';
@@ -11,12 +11,13 @@ import DID from '../DID';
 import { getUserAvatar } from '../Util';
 import { t as translate } from '../Locale/util';
 import { translations } from './translation';
+import Typography from '../Typography';
 import { jsx as _jsx } from "react/jsx-runtime";
 import { jsxs as _jsxs } from "react/jsx-runtime";
 export default function UserInfo({
   session,
   locale,
-  onEditUser,
+  onSwitchProfile,
   onSwitchPassport,
   switchProfile,
   hasBindWallet
@@ -33,27 +34,27 @@ export default function UserInfo({
   const currentRole = useCreation(() => session.user?.passports?.find(item => item.name === session.user.role), [session?.user?.passports, session?.user?.role]);
   const userEmail = useCreation(() => session.user?.email || 'lancelot_lewis@163.com', [session?.user]);
   const canEdit = useCreation(() => {
-    if (onEditUser instanceof Function) {
-      if (switchProfile && hasBindWallet && session.provider !== 'federated') {
+    if (onSwitchProfile instanceof Function) {
+      if (switchProfile && hasBindWallet) {
         return true;
       }
     }
     return false;
-  }, [onEditUser, switchProfile, hasBindWallet, session.provider]);
-  const _onEditUser = useMemoizedFn(() => {
+  }, [onSwitchProfile, switchProfile, hasBindWallet, session.provider]);
+  const _onSwitchProfile = useMemoizedFn(() => {
     if (canEdit) {
-      onEditUser();
+      onSwitchProfile();
     }
   });
   return /*#__PURE__*/_jsxs(Box, {
     sx: {
       display: 'flex',
       alignItems: 'center',
-      gap: '16px',
-      padding: '15px 20px'
+      gap: '12px',
+      padding: '15px'
     },
     children: [/*#__PURE__*/_jsx(Box, {
-      onClick: _onEditUser,
+      onClick: _onSwitchProfile,
       "data-cy": "sessionManager-switch-profile-trigger",
       sx: {
         cursor: canEdit ? 'pointer' : 'default',
@@ -63,7 +64,7 @@ export default function UserInfo({
         fontSize: 0,
         '&:hover': canEdit ? {
           '&::after': {
-            content: `"${t('edit')}"`,
+            content: `"${t('switch')}"`,
             position: 'absolute',
             bottom: 0,
             background: 'rgba(0, 0, 0, 0.2)',
@@ -91,11 +92,44 @@ export default function UserInfo({
         overflow: 'hidden',
         fontSize: '14px'
       },
-      children: [/*#__PURE__*/_jsx(Typography, {
-        variant: "h5",
-        fontWeight: "bold",
-        mb: 1,
-        children: session.user.fullName
+      children: [/*#__PURE__*/_jsxs(Box, {
+        display: "flex",
+        alignItems: "center",
+        gap: "4px",
+        mb: 0.5,
+        children: [/*#__PURE__*/_jsx(Typography, {
+          variant: "h5",
+          fontWeight: "bold",
+          fontSize: "auto",
+          sx: {
+            flex: 1,
+            wordBreak: 'break-all'
+          },
+          children: session.user.fullName
+        }), /*#__PURE__*/_jsx(Chip, {
+          label: currentRole?.title || session.user?.role.toUpperCase(),
+          size: "small",
+          variant: "outlined",
+          sx: {
+            height: 'auto',
+            marginRight: 0,
+            fontWeight: 'bold',
+            fontSize: '12px'
+          },
+          icon: /*#__PURE__*/_jsx(Icon, {
+            icon: ShieldCheckIcon,
+            height: "0.8em"
+          }),
+          deleteIcon: /*#__PURE__*/_jsx(Icon, {
+            icon: ExpandMoreIcon,
+            height: "1em"
+          })
+          // HACK: 必须设置 onDelete 函数，deleteIcon 才能显示出来
+          ,
+          onDelete: onSwitchPassport,
+          onClick: onSwitchPassport,
+          "data-cy": "sessionManager-switch-passport-trigger"
+        })]
       }), session.provider === 'auth0' ? walletDid ? /*#__PURE__*/_jsx(DID, {
         responsive: false,
         compact: true,
@@ -107,33 +141,7 @@ export default function UserInfo({
       }), userEmail ? /*#__PURE__*/_jsx(DidAddress, {
         responsive: false,
         children: userEmail
-      }) : null, /*#__PURE__*/_jsx(Chip, {
-        label: currentRole?.title || session.user?.role.toUpperCase(),
-        size: "small",
-        variant: "outlined",
-        sx: {
-          height: 'auto',
-          marginRight: 0,
-          position: 'absolute',
-          top: 20,
-          right: 15,
-          fontWeight: 'bold',
-          fontSize: '12px'
-        },
-        icon: /*#__PURE__*/_jsx(Icon, {
-          icon: ShieldCheckIcon,
-          height: "0.8em"
-        }),
-        deleteIcon: /*#__PURE__*/_jsx(Icon, {
-          icon: ExpandMoreIcon,
-          height: "1em"
-        })
-        // HACK: 必须设置 onDelete 函数，deleteIcon 才能显示出来
-        ,
-        onDelete: onSwitchPassport,
-        onClick: onSwitchPassport,
-        "data-cy": "sessionManager-switch-passport-trigger"
-      })]
+      }) : null]
     })]
   });
 }

package/es/SessionManager/user-popper.js

@@ -93,25 +93,8 @@ const StyledPopper = styled(Popper)`
   .MuiList-root {
     width: 320px;
   }
-  .session-manager-user {
-    font-size: 12px;
-    flex-direction: column;
-    align-items: flex-start;
-    padding: 24px 24px 10px;
-  }
-  .session-manager-user-name {
-    font-size: 20px;
-    color: ${({
-  $dark
-}) => $dark ? '#aaa' : '#222'};
-    font-weight: bold;
-    margin-bottom: 10px;
-    display: flex;
-    align-items: center;
-    justify-content: space-between;
-  }
   .session-manager-menu-item {
-    padding: 18px 20px;
+    padding: 15px;
     color: #777;
     font-size: 16px;
     &:hover {

package/es/Typography/index.js

@@ -0,0 +1,89 @@
+import PropTyps from 'prop-types';
+import { Box, Typography as MuiTypography, Skeleton } from '@mui/material';
+import { 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";
+export default function Typography({
+  minFontSize,
+  fontSize,
+  children,
+  sx,
+  ...rest
+}) {
+  const refMock = useRef(null);
+  const refContainer = useRef(null);
+  const state = useReactive({
+    fontSize,
+    loading: true,
+    initialSize: undefined
+  });
+  const mockSize = useSize(refMock.current);
+  const containerSize = useSize(refContainer.current);
+  useEffect(() => {
+    if (state.loading) {
+      if (fontSize === 'auto') {
+        if (mockSize && !state.initialSize) {
+          const styleSize = getComputedStyle(refMock.current).fontSize;
+          state.initialSize = Number(styleSize.replace('px', ''));
+          state.fontSize = state.initialSize;
+        }
+        if (containerSize && mockSize) {
+          if (containerSize.width < mockSize.width && state.fontSize > minFontSize) {
+            state.fontSize--;
+          } else {
+            state.loading = false;
+          }
+        }
+      } else {
+        state.loading = false;
+      }
+    }
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [fontSize, mockSize?.width, containerSize?.width]);
+  return state.loading ? /*#__PURE__*/_jsxs(Box, {
+    ref: refContainer,
+    flex: 1,
+    children: [/*#__PURE__*/_jsx(MuiTypography, {
+      ...rest,
+      sx: sx,
+      noWrap: true,
+      children: /*#__PURE__*/_jsx(Skeleton, {
+        variant: "text",
+        sx: {
+          fontSize: '1rem'
+        }
+      })
+    }), /*#__PURE__*/_jsx(MuiTypography, {
+      ref: refMock,
+      ...rest,
+      sx: {
+        ...sx,
+        fontSize: `${state.fontSize}px !important`,
+        position: 'fixed',
+        top: -1000,
+        left: -1000
+      },
+      noWrap: true,
+      children: children
+    })]
+  }) : /*#__PURE__*/_jsx(MuiTypography, {
+    ...rest,
+    sx: {
+      ...sx,
+      fontSize: `${state.fontSize}px !important`
+    },
+    children: children
+  });
+}
+Typography.propTypes = {
+  fontSize: PropTyps.oneOfType([PropTyps.string, PropTyps.number]),
+  children: PropTyps.any.isRequired,
+  minFontSize: PropTyps.number,
+  sx: PropTyps.object
+};
+Typography.defaultProps = {
+  fontSize: undefined,
+  minFontSize: 12,
+  sx: {}
+};

package/es/Util/federated.js

@@ -0,0 +1,65 @@
+import isEmpty from 'lodash/isEmpty';
+export function getMaster(blocklet = window.blocklet) {
+  const federated = blocklet?.settings?.federated || {};
+  return federated.master;
+}
+export function getConfig(blocklet = window.blocklet) {
+  const federated = blocklet?.settings?.federated || {};
+  return federated.config;
+}
+export function getAutoLoginFederated(blocklet = window.blocklet) {
+  const config = getConfig(blocklet);
+  return Boolean(config?.autoLogin) && config?.status === 'approved';
+}
+export function getSourceAppPid(blocklet = window.blocklet) {
+  const master = getMaster(blocklet);
+  return master?.appPid;
+}
+export function getFederatedApp(blocklet = window.blocklet) {
+  const master = getMaster(blocklet);
+  const isFederatedMode = !isEmpty(master);
+  return isFederatedMode ? {
+    appId: master.appId,
+    appName: master.appName,
+    appDescription: master.appDescription,
+    appLogo: master.appLogo,
+    appPid: master.appPid,
+    appUrl: master.appUrl,
+    version: master.version,
+    sourceAppPid: master.appPid,
+    provider: 'wallet'
+  } : null;
+}
+export function getCurrentApp(blocklet = window.blocklet) {
+  // 适用于 blocklet 项目
+  if (blocklet) {
+    return {
+      appId: blocklet.appId,
+      appName: blocklet.appName,
+      appDescription: blocklet.appDescription,
+      appLogo: blocklet.appLogo,
+      appPid: blocklet.appPid,
+      appUrl: blocklet.appUrl,
+      version: blocklet.version,
+      // NOTICE: null 代表该值置空
+      sourceAppPid: null,
+      provider: 'wallet'
+    };
+  }
+  // HACK: 适用于 blockelt-server
+  if (window.env) {
+    // eslint-disable-next-line no-param-reassign
+    blocklet = window.env;
+    return {
+      appId: blocklet.appId,
+      appName: blocklet.appName,
+      appDescription: blocklet.appDescription,
+      appUrl: blocklet.baseUrl,
+      // NOTICE: null 代表该值置空
+      sourceAppPid: null,
+      provider: 'wallet',
+      type: 'server'
+    };
+  }
+  return null;
+}

package/lib/SessionManager/account-item.js

@@ -68,7 +68,8 @@ function AccountItem(_ref) {
     },
     className: "session-manager-menu-item",
     children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_Avatar.default, {
-      did: account.did
+      did: account.did,
+      size: 42
     }), /*#__PURE__*/(0, _jsxRuntime.jsxs)(_material.Box, {
       sx: {
         flex: 1,
@@ -87,14 +88,14 @@ function AccountItem(_ref) {
         sx: {
           lineHeight: 1
         }
-      }), /*#__PURE__*/(0, _jsxRuntime.jsxs)(_material.Typography, {
+      }), account.sourceAppPid && /*#__PURE__*/(0, _jsxRuntime.jsxs)(_material.Typography, {
         variant: "caption",
-        children: [t('from'), ' ', account.provider === 'federated' ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_material.Link, {
+        children: [t('from'), ' ', /*#__PURE__*/(0, _jsxRuntime.jsx)(_material.Link, {
           href: account.appUrl,
           target: "_blank",
           underline: "none",
           children: account.appName
-        }) : account.appName]
+        })]
       })]
     }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_material.Box, {
       className: "account-item-actions",

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

@@ -8,11 +8,11 @@ var _react = require("@iconify/react");
 var _propTypes = _interopRequireDefault(require("prop-types"));
 var _material = require("@mui/material");
 var _iosAddCircleOutline = _interopRequireDefault(require("@iconify-icons/ion/ios-add-circle-outline"));
-var _isEmpty = _interopRequireDefault(require("lodash/isEmpty"));
 var _ahooks = require("ahooks");
 var _react2 = require("react");
 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 AddAccountItem(_ref) {
@@ -29,42 +29,22 @@ function AddAccountItem(_ref) {
     return (0, _util.translate)(_translation.translations, key, locale, 'en', data);
   });
   const apps = (0, _ahooks.useCreation)(() => {
-    var _window, _blocklet$settings, _blocklet$settings$fe;
+    var _window;
     const appList = [];
     if (typeof window === 'undefined') {
       return appList;
     }
     const blocklet = (_window = window) === null || _window === void 0 ? void 0 : _window.blocklet;
-    if (!blocklet) {
-      return appList;
+    const masterApp = (0, _federated.getFederatedApp)(blocklet);
+    const currentApp = (0, _federated.getCurrentApp)(blocklet);
+    if (currentApp) {
+      appList.push(currentApp);
     }
-    const currentApp = {
-      appId: blocklet.appId,
-      appName: blocklet.appName,
-      appDescription: blocklet.appDescription,
-      appLogo: blocklet.appLogo,
-      appPid: blocklet.appPid,
-      appUrl: blocklet.appUrl,
-      version: blocklet.version,
-      provider: 'wallet'
-    };
-    appList.push(currentApp);
-    const isFederatedMember = !(0, _isEmpty.default)((_blocklet$settings = blocklet.settings) === null || _blocklet$settings === void 0 ? void 0 : (_blocklet$settings$fe = _blocklet$settings.federated) === null || _blocklet$settings$fe === void 0 ? void 0 : _blocklet$settings$fe.master);
-    if (isFederatedMember) {
-      const federatedMaster = blocklet.settings.federated.master;
-      const masterApp = {
-        appId: federatedMaster.appId,
-        appName: federatedMaster.appName,
-        appDescription: federatedMaster.appDescription,
-        appLogo: federatedMaster.appLogo,
-        appPid: federatedMaster.appPid,
-        appUrl: federatedMaster.appUrl,
-        version: federatedMaster.version,
-        provider: 'federated'
-      };
-      return [masterApp, currentApp];
+    if (masterApp && (masterApp === null || masterApp === void 0 ? void 0 : masterApp.appId) !== (currentApp === null || currentApp === void 0 ? void 0 : currentApp.appId)) {
+      appList.push(masterApp);
     }
-    return appList;
+    // NOTICE: masterApp 应该排在前面
+    return appList.reverse();
   }, [window.blocklet]);
   const _onAdd = (0, _ahooks.useMemoizedFn)(() => {
     if (apps.length <= 1) {
@@ -109,9 +89,11 @@ function AddAccountItem(_ref) {
         vertical: 'top',
         horizontal: 'left'
       },
-      children: apps.map(app => /*#__PURE__*/(0, _jsxRuntime.jsxs)(_material.MenuItem, {
+      children: apps.map(app => /*#__PURE__*/(0, _jsxRuntime.jsx)(_material.MenuItem, {
         onClick: () => onAdd(app),
-        children: ["Connect with ", app.appName, " account"]
+        children: t('connectWithAccount', {
+          name: app.appName
+        })
       }, app.appId))
     }) : null]
   });

package/lib/SessionManager/federated-login-detecter.js

@@ -11,6 +11,7 @@ var _Chip = _interopRequireDefault(require("@mui/material/Chip"));
 var _Divider = _interopRequireDefault(require("@mui/material/Divider"));
 var _shieldCheck = _interopRequireDefault(require("@iconify-icons/mdi/shield-check"));
 var _react2 = require("@iconify/react");
+var _ahooks = require("ahooks");
 var _userPopper = _interopRequireDefault(require("./user-popper"));
 var _Avatar = _interopRequireDefault(require("../Avatar"));
 var _Address = _interopRequireDefault(require("../Address"));
@@ -48,54 +49,60 @@ const translations = {
   }
 };
 function FederatedLoginDetecter(_ref3) {
-  var _session$federatedMas, _session$federatedMas2, _userInfo$role, _userInfo$role2;
+  var _federatedMaster$site2, _federatedMaster$user, _federatedMaster$user2;
   let {
     session,
     anchorEl,
     dark,
     locale: _locale
   } = _ref3;
-  const [federatedLoginOpen, setFederatedLoginOpen] = (0, _react.useState)(true);
-  const siteInfo = (_session$federatedMas = session.federatedMaster) === null || _session$federatedMas === void 0 ? void 0 : _session$federatedMas.site;
-  const userInfo = (_session$federatedMas2 = session.federatedMaster) === null || _session$federatedMas2 === void 0 ? void 0 : _session$federatedMas2.user;
+  const state = (0, _ahooks.useReactive)({
+    open: true
+  });
+  const federatedMaster = (0, _ahooks.useCreation)(() => {
+    return session.federatedMaster;
+  }, [session === null || session === void 0 ? void 0 : session.federatedMaster]);
   const localeList = Object.keys(translations);
   const locale = localeList.includes(_locale) ? _locale : localeList[0];
   const onLoginFederated = (0, _react.useCallback)(() => {
+    var _federatedMaster$site;
     session === null || session === void 0 ? void 0 : session.login(err => {
       if (err) {
         _Toast.default.error(err || translations[_locale].loginFederatedFailed);
       } else {
-        setFederatedLoginOpen(false);
+        state.open = false;
       }
     }, {
-      provider: 'federated',
-      mode: userInfo ? 'auto' : 'manual'
+      sourceAppPid: federatedMaster === null || federatedMaster === void 0 ? void 0 : (_federatedMaster$site = federatedMaster.site) === null || _federatedMaster$site === void 0 ? void 0 : _federatedMaster$site.appPid,
+      mode: federatedMaster !== null && federatedMaster !== void 0 && federatedMaster.user ? 'auto' : 'manual'
     });
-  }, [session, userInfo, _locale]);
+  }, [session, federatedMaster === null || federatedMaster === void 0 ? void 0 : (_federatedMaster$site2 = federatedMaster.site) === null || _federatedMaster$site2 === void 0 ? void 0 : _federatedMaster$site2.appPid, federatedMaster === null || federatedMaster === void 0 ? void 0 : federatedMaster.user, _locale, state]);
   let appLogoUrl;
-  if (siteInfo) {
-    appLogoUrl = new URL(siteInfo.appLogo, siteInfo.appUrl);
+  if (federatedMaster !== null && federatedMaster !== void 0 && federatedMaster.site) {
+    appLogoUrl = new URL(federatedMaster.site.appLogo, federatedMaster.site.appUrl);
     appLogoUrl.searchParams.set('imageFilter', 'resize');
     // HACK: 保持跟其他地方使用的尺寸一致，可以复用同一资源的缓存，减少网络请求
     appLogoUrl.searchParams.set('w', '80');
     appLogoUrl.searchParams.set('h', '80');
   }
-  return siteInfo && /*#__PURE__*/(0, _jsxRuntime.jsx)(_userPopper.default, {
-    open: federatedLoginOpen,
+  return (federatedMaster === null || federatedMaster === void 0 ? void 0 : federatedMaster.site) && /*#__PURE__*/(0, _jsxRuntime.jsx)(_userPopper.default, {
+    open: state.open,
     anchorEl: anchorEl,
     dark: dark,
     autoClose: false,
-    onClose: () => setFederatedLoginOpen(false),
+    onClose: () => {
+      state.open = false;
+    },
     children: /*#__PURE__*/(0, _jsxRuntime.jsxs)(_Box.default, {
       p: 2,
-      children: [siteInfo && /*#__PURE__*/(0, _jsxRuntime.jsxs)(_Box.default, {
+      children: [federatedMaster.site && /*#__PURE__*/(0, _jsxRuntime.jsxs)(_Box.default, {
         display: "flex",
         alignItems: "center",
         children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_Box.default, {
           component: "img",
           mr: 2,
           src: appLogoUrl.href,
-          alt: siteInfo.appName,
+          alt: federatedMaster.site.appName,
           width: "30px",
           height: "30px"
         }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_Box.default, {
@@ -105,7 +112,7 @@ function FederatedLoginDetecter(_ref3) {
           children: translations[locale].useToConnect({
             master: /*#__PURE__*/(0, _jsxRuntime.jsx)(_Box.default, {
               component: "a",
-              href: siteInfo.appUrl,
+              href: federatedMaster.site.appUrl,
               target: "_blank",
               sx: {
                 textDecoration: 'none',
@@ -113,22 +120,22 @@ function FederatedLoginDetecter(_ref3) {
                 color: 'primary.main',
                 fontSize: '1.2em'
               },
-              children: siteInfo.appName
+              children: federatedMaster.site.appName
             }),
             member: window.blocklet.appName
           })
         })]
-      }), siteInfo && userInfo && /*#__PURE__*/(0, _jsxRuntime.jsx)(_Divider.default, {
+      }), (federatedMaster === null || federatedMaster === void 0 ? void 0 : federatedMaster.site) && (federatedMaster === null || federatedMaster === void 0 ? void 0 : federatedMaster.user) && /*#__PURE__*/(0, _jsxRuntime.jsx)(_Divider.default, {
         style: {
           margin: '15px 0 10px 0'
         }
-      }), userInfo && /*#__PURE__*/(0, _jsxRuntime.jsxs)(_Box.default, {
+      }), (federatedMaster === null || federatedMaster === void 0 ? void 0 : federatedMaster.user) && /*#__PURE__*/(0, _jsxRuntime.jsxs)(_Box.default, {
         display: "flex",
         alignItems: "center",
         children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_Avatar.default, {
           variant: "circle",
-          did: userInfo.did,
-          src: (0, _Util.getUserAvatar)(userInfo.avatar),
+          did: federatedMaster.user.did,
+          src: (0, _Util.getUserAvatar)(federatedMaster.user.avatar),
           size: 28,
           shape: "circle"
         }), /*#__PURE__*/(0, _jsxRuntime.jsxs)(_Box.default, {
@@ -139,9 +146,9 @@ function FederatedLoginDetecter(_ref3) {
             alignItems: "center",
             children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_Box.default, {
               fontSize: 18,
-              children: userInfo.fullName
-            }), ((_userInfo$role = userInfo.role) === null || _userInfo$role === void 0 ? void 0 : _userInfo$role.toUpperCase()) && /*#__PURE__*/(0, _jsxRuntime.jsx)(_Chip.default, {
-              label: (_userInfo$role2 = userInfo.role) === null || _userInfo$role2 === void 0 ? void 0 : _userInfo$role2.toUpperCase(),
+              children: federatedMaster.user.fullName
+            }), ((_federatedMaster$user = federatedMaster.user.role) === null || _federatedMaster$user === void 0 ? void 0 : _federatedMaster$user.toUpperCase()) && /*#__PURE__*/(0, _jsxRuntime.jsx)(_Chip.default, {
+              label: (_federatedMaster$user2 = federatedMaster.user.role) === null || _federatedMaster$user2 === void 0 ? void 0 : _federatedMaster$user2.toUpperCase(),
               size: "small",
               variant: "outlined",
               sx: {
@@ -156,10 +163,10 @@ function FederatedLoginDetecter(_ref3) {
             })]
           }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_Address.default, {
             responsive: false,
-            children: userInfo.did
+            children: federatedMaster.user.did
           })]
         })]
-      }), siteInfo && /*#__PURE__*/(0, _jsxRuntime.jsx)(_Box.default, {
+      }), (federatedMaster === null || federatedMaster === void 0 ? void 0 : federatedMaster.site) && /*#__PURE__*/(0, _jsxRuntime.jsx)(_Box.default, {
         display: "flex",
         justifyContent: "center",
         mt: 2,