@arcblock/ux 2.7.16 → 2.7.18

package/src/SessionManager/index.jsx

@@ -2,11 +2,10 @@
 /* eslint-disable react/jsx-no-bind */
 import { useEffect, useMemo, useRef, useState } from 'react';
 import PropTypes from 'prop-types';
-import { Box, IconButton, MenuList, MenuItem, SvgIcon, Button, CircularProgress, Divider } from '@mui/material';
+import { Box, IconButton, MenuList, Button, CircularProgress, Divider } from '@mui/material';
 import AccountIcon from '@arcblock/icons/lib/Account';
-import DisconnectIcon from '@arcblock/icons/lib/Disconnect';
 import noop from 'lodash/noop';
-import isEmpty from 'lodash/isEmpty';
+import cloneDeep from 'lodash/cloneDeep';
 import { useLatest, useMemoizedFn } from 'ahooks';
 
 import DidAvatar from '../Avatar';
@@ -19,7 +18,8 @@ import ManageAccounts from './manage-accounts';
 import ManageBlocklet from './manage-blocklet';
 import { translations } from './translation';
 import { getConnectedAccounts, getSourceProvider } from './utils';
-import useAccounts from './use-accounts';
+import useConfig from './use-config';
+import { getCurrentApp, getFederatedApp } from '../Util/federated';
 
 function SessionManager({
   session,
@@ -40,10 +40,11 @@ function SessionManager({
   menuRender,
   dark,
   size,
+  showManageBlocklet,
   ...rest
 }) {
   const latestSession = useLatest(session);
-  const { connectAccount } = useAccounts();
+  const { connectAccount, config, setConfig } = useConfig();
   const t = useMemoizedFn((key, data = {}) => {
     return translate(translations, key, locale, 'en', data);
   });
@@ -61,7 +62,6 @@ function SessionManager({
     return session?.initialized === false && session?.loading === true;
   }, [session?.initialized, session?.loading]);
 
-  // const federatedAccount = connectedAccounts.find((item) => item.provider === 'federated');
   let hasBindWallet = false;
   let hasBindAccount = false;
   if (isRawWalletAccount) {
@@ -84,39 +84,18 @@ function SessionManager({
       return;
     }
     const blocklet = window?.blocklet;
-    if (!blocklet) {
-      return;
+    const currentApp = getCurrentApp(blocklet);
+    const masterApp = getFederatedApp(blocklet);
+    const targetApp = latestSession.current.user.sourceAppPid ? masterApp : currentApp;
+    if (targetApp) {
+      const loginAccount = {
+        did: latestSession.current.user.did,
+        avatar: latestSession.current.user.avatar,
+        provider: latestSession.current.provider,
+        ...targetApp,
+      };
+      connectAccount(loginAccount);
     }
-    const currentApp = {
-      appId: blocklet.appId,
-      appPid: blocklet.appPid,
-      appName: blocklet.appName,
-      appDescription: blocklet.appDescription,
-      appLogo: blocklet.appLogo,
-      appUrl: blocklet.appUrl,
-      version: blocklet.version,
-      provider: 'wallet',
-    };
-    const federatedMaster = blocklet.settings?.federated?.master;
-    const masterApp = isEmpty(federatedMaster)
-      ? null
-      : {
-          appId: federatedMaster.appId,
-          appName: federatedMaster.appName,
-          appDescription: federatedMaster.appDescription,
-          appLogo: federatedMaster.appLogo,
-          appPid: federatedMaster.appPid,
-          appUrl: federatedMaster.appUrl,
-          version: federatedMaster.version,
-          provider: 'federated',
-        };
-    const loginAccount = {
-      did: latestSession.current.user.did,
-      avatar: latestSession.current.user.avatar,
-      provider: latestSession.current.provider,
-      ...(latestSession.current.provider === 'federated' ? masterApp : currentApp),
-    };
-    connectAccount(loginAccount);
   });
 
   // HACK: 用于处理 统一登录 的自动登录情况，添加一个已连接的账号
@@ -219,7 +198,7 @@ function SessionManager({
 
   function _onSwitchPassport() {
     const { user, provider } = session;
-    if (!isRawWalletAccount && provider !== 'federated') {
+    if (['auth0'].includes(provider)) {
       switchOAuthPassport(user);
     } else {
       close();
@@ -250,7 +229,7 @@ function SessionManager({
             session={session}
             size={size}
             locale={locale}
-            onEditUser={() => {
+            onSwitchProfile={() => {
               close();
               _onSwitchProfile();
             }}
@@ -273,35 +252,34 @@ function SessionManager({
             connectAccount={_connectAccount}
             close={close}
             hasBindAccount={hasBindAccount}
+            onLogout={_onLogout}
+            expanded={config.expandAccount}
+            onExpand={(value) => {
+              const cloneConfig = cloneDeep(config);
+              cloneConfig.expandAccount = value;
+              setConfig(cloneConfig);
+            }}
           />
 
-          <Divider />
-
-          <ManageBlocklet menu={menu} menuRender={menuRender} locale={locale} />
-
-          <Divider />
-
-          {/* NOTE: federated 登录方式不允许切换 profile */}
-          {/* {!!switchProfile && hasBindWallet && session.provider !== 'federated' && (
-            <MenuItem
-              className="session-manager-menu-item"
-              onClick={_onSwitchProfile}
-              aria-label={translation.switchProfile}
-              data-cy="sessionManager-switch-profile-trigger">
-              <SvgIcon component={SwitchProfileIcon} className="session-manager-menu-icon" />
-              {translation.switchProfile}
-            </MenuItem>
-          )} */}
-
-          <MenuItem
-            className="session-manager-menu-item"
-            onClick={_onLogout}
-            disabled={disableLogout}
-            aria-label="Logout account"
-            data-cy="sessionManager-logout-trigger">
-            <SvgIcon component={DisconnectIcon} className="session-manager-menu-icon" />
-            {t('disconnect')}
-          </MenuItem>
+          {/* 为了避免控制台出现警告，采用数组的方式 */}
+          {/* MUI:The Menu component doesn't accept a Fragment as a child. Consider providing an array instead. */}
+          {showManageBlocklet
+            ? [
+                <Divider key="divider" />,
+                <ManageBlocklet
+                  key="manageBlocklet"
+                  menu={menu}
+                  menuRender={menuRender}
+                  locale={locale}
+                  expanded={config.expandBlocklet}
+                  onExpand={(value) => {
+                    const cloneConfig = cloneDeep(config);
+                    cloneConfig.expandBlocklet = value;
+                    setConfig(cloneConfig);
+                  }}
+                />,
+              ]
+            : null}
         </MenuList>
       </UserPopper>
     </>
@@ -311,7 +289,7 @@ function SessionManager({
 SessionManager.propTypes = {
   session: PropTypes.shape({
     federatedMaster: PropTypes.object,
-    provider: PropTypes.oneOf(['wallet', 'federated', 'auth0', '']),
+    provider: PropTypes.oneOf(['wallet', 'auth0', '']),
     user: PropTypes.shape({
       did: PropTypes.string.isRequired,
       role: PropTypes.string.isRequired,
@@ -360,6 +338,7 @@ SessionManager.propTypes = {
   menuRender: PropTypes.func,
   dark: PropTypes.bool,
   size: PropTypes.number,
+  showManageBlocklet: PropTypes.bool,
 };
 
 SessionManager.defaultProps = {
@@ -380,6 +359,7 @@ SessionManager.defaultProps = {
   onBindWallet: noop,
   dark: false,
   size: 24,
+  showManageBlocklet: true,
 };
 
 export default SessionManager;

package/src/SessionManager/manage-accounts.jsx

@@ -1,10 +1,11 @@
 /* eslint-disable react/prop-types */
 /* eslint-disable react/jsx-no-bind */
 import { useMemoizedFn, useUpdate } from 'ahooks';
-import { MenuItem } from '@mui/material';
+import { MenuItem, SvgIcon } from '@mui/material';
 import { Icon } from '@iconify/react';
 import AccountIcon from '@arcblock/icons/lib/Account';
 import LinkIcon from '@iconify-icons/mdi/link';
+import DisconnectIcon from '@arcblock/icons/lib/Disconnect';
 
 import AccountItem from './account-item';
 import MenuAccordion from './menu-accordion';
@@ -13,7 +14,7 @@ import { translate } from '../Locale/util';
 import { useConfirm } from '../Dialog/confirm';
 import { getSourceProvider } from './utils';
 import AddAccountItem from './add-account-item';
-import useAccounts from './use-accounts';
+import useConfig from './use-config';
 
 export default function ManageAccounts({
   session,
@@ -23,6 +24,10 @@ export default function ManageAccounts({
   connectAccount,
   close,
   hasBindAccount,
+  disableLogout,
+  onLogout,
+  expanded,
+  onExpand,
 }) {
   const { bindOAuth, configs: oauthConfigs } = session.useOAuth();
   const t = useMemoizedFn((key, data = {}) => {
@@ -30,7 +35,7 @@ export default function ManageAccounts({
   });
 
   const { confirmApi, confirmHolder } = useConfirm();
-  const { accounts, setAccounts } = useAccounts();
+  const { deleteAccount, config } = useConfig();
   const update = useUpdate();
 
   const onChoose = useMemoizedFn((account, { active }) => {
@@ -45,7 +50,7 @@ export default function ManageAccounts({
       },
       {
         provider: account.provider,
-        providerMode: 'paramsFirst',
+        sourceAppPid: account.sourceAppPid,
       }
     );
   });
@@ -68,11 +73,8 @@ export default function ManageAccounts({
       confirmButtonText: t('confirm'),
       cancelButtonText: t('cancel'),
       onConfirm(done) {
-        const findIndex = accounts.findIndex((item) => item.did === account.did);
-        if (findIndex >= 0) {
-          accounts.splice(findIndex, 1);
-        }
-        setAccounts(accounts);
+        deleteAccount(account);
+
         update();
         done();
       },
@@ -88,8 +90,8 @@ export default function ManageAccounts({
         onSwitchDid(...args);
       },
       {
+        sourceAppPid: app.sourceAppPid,
         provider: app.provider,
-        providerMode: 'paramsFirst',
       }
     );
   });
@@ -107,14 +109,16 @@ export default function ManageAccounts({
   return (
     <>
       <MenuAccordion
+        expanded={expanded}
+        onChange={onExpand}
         locale={locale}
         title={
           <>
             <AccountIcon className="session-manager-menu-icon" style={{ width: 24, height: 24 }} />
-            {t('manageAccounts')}
+            {t('accounts')}
           </>
         }>
-        {accounts.map((item) => (
+        {config.accounts.map((item) => (
           <AccountItem
             key={item.did}
             account={item}
@@ -126,7 +130,7 @@ export default function ManageAccounts({
         ))}
         <AddAccountItem locale={locale} onAdd={onAdd} />
 
-        {oauthConfigList.length > 0 && !hasBindAccount && session.provider !== 'federated' && (
+        {oauthConfigList.length > 0 && !hasBindAccount && (
           <MenuItem
             className="session-manager-menu-item"
             onClick={_onBindWallet}
@@ -136,6 +140,16 @@ export default function ManageAccounts({
             {!isRawWalletAccount ? `${t('bind')}DID Wallet` : `${t('bind')}${t('thirdParty')}`}
           </MenuItem>
         )}
+
+        <MenuItem
+          className="session-manager-menu-item"
+          onClick={onLogout}
+          disabled={disableLogout}
+          aria-label="Logout account"
+          data-cy="sessionManager-logout-trigger">
+          <SvgIcon component={DisconnectIcon} className="session-manager-menu-icon" />
+          {t('disconnect')}
+        </MenuItem>
       </MenuAccordion>
       {confirmHolder}
     </>

package/src/SessionManager/manage-blocklet.jsx

@@ -9,18 +9,20 @@ import MenuAccordion from './menu-accordion';
 import { translate } from '../Locale/util';
 import { translations } from './translation';
 
-export default function ManageBlocklet({ menu, menuRender, locale }) {
+export default function ManageBlocklet({ menu, menuRender, locale, expanded, onExpand }) {
   const t = useMemoizedFn((key, data = {}) => {
     return translate(translations, key, locale, 'en', data);
   });
 
   return (
     <MenuAccordion
+      expanded={expanded}
       locale={locale}
+      onChange={onExpand}
       title={
         <>
           <Icon icon={AppsIcon} width={24} height={24} className="session-manager-menu-icon" />
-          {t('manageBlocklet')}
+          {t('blocklet')}
         </>
       }>
       {Array.isArray(menu) &&
@@ -56,9 +58,13 @@ ManageBlocklet.propTypes = {
   menu: PropTypes.array,
   menuRender: PropTypes.func,
   locale: PropTypes.string.isRequired,
+  expanded: PropTypes.bool,
+  onExpand: PropTypes.func,
 };
 
 ManageBlocklet.defaultProps = {
   menu: [],
   menuRender: () => {},
+  expanded: true,
+  onExpand: () => {},
 };

package/src/SessionManager/menu-accordion.jsx

@@ -21,7 +21,7 @@ function isEmptyNode(node) {
   return false;
 }
 
-export default function MenuAccordion({ title, children, locale }) {
+export default function MenuAccordion({ title, children, locale, expanded, onChange }) {
   const isEmptyChildren = useCreation(() => isEmptyNode(children), [children]);
   const t = useMemoizedFn((key, data = {}) => {
     return translate(translations, key, locale, 'en', data);
@@ -29,9 +29,12 @@ export default function MenuAccordion({ title, children, locale }) {
 
   return (
     <Accordion
-      defaultExpanded
+      expanded={expanded}
       disableGutters
       elevation={0}
+      onChange={(e, value) => {
+        onChange(value);
+      }}
       sx={{
         '&.MuiAccordion-root:before': {
           content: 'unset',
@@ -48,7 +51,7 @@ export default function MenuAccordion({ title, children, locale }) {
           paddingLeft: '30px',
           '.session-manager-menu-item': {
             fontSize: '15px',
-            padding: '12px 20px',
+            padding: '12px 15px',
             whiteSpace: 'normal',
           },
           '.session-manager-menu-icon': {
@@ -81,7 +84,11 @@ MenuAccordion.propTypes = {
   title: PropTypes.any.isRequired,
   children: PropTypes.any.isRequired,
   locale: PropTypes.string,
+  expanded: PropTypes.bool,
+  onChange: PropTypes.func,
 };
 MenuAccordion.defaultProps = {
   locale: 'en',
+  expanded: true,
+  onChange: () => {},
 };

package/src/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/src/SessionManager/use-config.js

@@ -0,0 +1,33 @@
+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/src/SessionManager/user-info.jsx

@@ -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';
@@ -12,8 +12,9 @@ import DID from '../DID';
 import { getUserAvatar } from '../Util';
 import { t as translate } from '../Locale/util';
 import { translations } from './translation';
+import Typography from '../Typography';
 
-export default function UserInfo({ session, locale, onEditUser, onSwitchPassport, switchProfile, hasBindWallet }) {
+export default function UserInfo({ session, locale, onSwitchProfile, onSwitchPassport, switchProfile, hasBindWallet }) {
   const t = (key, data = {}) => {
     return translate(translations, key, locale, 'en', data);
   };
@@ -26,17 +27,17 @@ export default function UserInfo({ session, locale, onEditUser, onSwitchPassport
   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]);
+  }, [onSwitchProfile, switchProfile, hasBindWallet, session.provider]);
 
-  const _onEditUser = useMemoizedFn(() => {
+  const _onSwitchProfile = useMemoizedFn(() => {
     if (canEdit) {
-      onEditUser();
+      onSwitchProfile();
     }
   });
 
@@ -45,11 +46,11 @@ export default function UserInfo({ session, locale, onEditUser, onSwitchPassport
       sx={{
         display: 'flex',
         alignItems: 'center',
-        gap: '16px',
-        padding: '15px 20px',
+        gap: '12px',
+        padding: '15px',
       }}>
       <Box
-        onClick={_onEditUser}
+        onClick={_onSwitchProfile}
         data-cy="sessionManager-switch-profile-trigger"
         sx={{
           cursor: canEdit ? 'pointer' : 'default',
@@ -60,7 +61,7 @@ export default function UserInfo({ session, locale, onEditUser, onSwitchPassport
           '&:hover': canEdit
             ? {
                 '&::after': {
-                  content: `"${t('edit')}"`,
+                  content: `"${t('switch')}"`,
                   position: 'absolute',
                   bottom: 0,
                   background: 'rgba(0, 0, 0, 0.2)',
@@ -78,9 +79,28 @@ export default function UserInfo({ session, locale, onEditUser, onSwitchPassport
         <DidAvatar variant="circle" did={session.user.did} src={avatar} size={64} shape="circle" />
       </Box>
       <Box sx={{ flex: 1, position: 'static', overflow: 'hidden', fontSize: '14px' }}>
-        <Typography variant="h5" fontWeight="bold" mb={1}>
-          {session.user.fullName}
-        </Typography>
+        <Box display="flex" alignItems="center" gap="4px" mb={0.5}>
+          <Typography variant="h5" fontWeight="bold" fontSize="auto" sx={{ flex: 1, wordBreak: 'break-all' }}>
+            {session.user.fullName}
+          </Typography>
+          <Chip
+            label={currentRole?.title || session.user?.role.toUpperCase()}
+            size="small"
+            variant="outlined"
+            sx={{
+              height: 'auto',
+              marginRight: 0,
+              fontWeight: 'bold',
+              fontSize: '12px',
+            }}
+            icon={<Icon icon={ShieldCheckIcon} height="0.8em" />}
+            deleteIcon={<Icon icon={ExpandMoreIcon} height="1em" />}
+            // HACK: 必须设置 onDelete 函数，deleteIcon 才能显示出来
+            onDelete={onSwitchPassport}
+            onClick={onSwitchPassport}
+            data-cy="sessionManager-switch-passport-trigger"
+          />
+        </Box>
         {/* eslint-disable-next-line no-nested-ternary */}
         {session.provider === 'auth0' ? (
           walletDid ? (
@@ -90,26 +110,6 @@ export default function UserInfo({ session, locale, onEditUser, onSwitchPassport
           <DID responsive={false} compact did={session.user.did} />
         )}
         {userEmail ? <DidAddress responsive={false}>{userEmail}</DidAddress> : null}
-        <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={<Icon icon={ShieldCheckIcon} height="0.8em" />}
-          deleteIcon={<Icon icon={ExpandMoreIcon} height="1em" />}
-          // HACK: 必须设置 onDelete 函数，deleteIcon 才能显示出来
-          onDelete={onSwitchPassport}
-          onClick={onSwitchPassport}
-          data-cy="sessionManager-switch-passport-trigger"
-        />
       </Box>
     </Box>
   );

package/src/SessionManager/user-popper.jsx

@@ -78,23 +78,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 {