@arcblock/ux 2.7.14 → 2.7.16

package/src/SessionManager/index.jsx

@@ -1,57 +1,25 @@
-/* eslint-disable react/no-array-index-key  */
+/* eslint-disable react/prop-types */
 /* eslint-disable react/jsx-no-bind */
-import { useMemo, useRef, useState } from 'react';
+import { useEffect, useMemo, useRef, useState } from 'react';
 import PropTypes from 'prop-types';
-import { Box, IconButton, MenuList, MenuItem, SvgIcon, Button, Chip, Link, CircularProgress } from '@mui/material';
-import SwitchProfileIcon from '@mui/icons-material/PersonOutline';
-import BindWalletIcon from '@mui/icons-material/Link';
-import SwitchPassportIcon from '@mui/icons-material/VpnKeyOutlined';
-import ConnectWithoutContactIcon from '@mui/icons-material/ConnectWithoutContact';
-import ShieldCheck from 'mdi-material-ui/ShieldCheck';
+import { Box, IconButton, MenuList, MenuItem, SvgIcon, Button, CircularProgress, Divider } from '@mui/material';
 import AccountIcon from '@arcblock/icons/lib/Account';
-import OpenInIcon from '@arcblock/icons/lib/OpenIn';
 import DisconnectIcon from '@arcblock/icons/lib/Disconnect';
-import SwitchDidIcon from '@arcblock/icons/lib/Switch';
-import useBrowser from '@arcblock/react-hooks/lib/useBrowser';
-import isEmpty from 'lodash/isEmpty';
 import noop from 'lodash/noop';
+import isEmpty from 'lodash/isEmpty';
+import { useLatest, useMemoizedFn } from 'ahooks';
 
 import DidAvatar from '../Avatar';
-import DidAddress from '../Address';
-import { getUserAvatar } from '../Util';
+import { getUserAvatar, sleep } from '../Util';
 import FederatedLoginDetecter from './federated-login-detecter';
 import UserPopper from './user-popper';
-
-const translations = {
-  en: {
-    switchDid: 'Switch DID',
-    switchProfile: 'Switch Profile',
-    switchPassport: 'Switch Passport',
-    disconnect: 'Disconnect',
-    connect: 'Connect',
-    openInWallet: 'Open DID Wallet',
-    alreadyBindOAuth: 'Already bind Auth0',
-    bind: 'Bind ',
-    thirdParty: 'Third Party Login',
-    connectedWith: 'Connected with',
-  },
-  zh: {
-    switchDid: '切换账户',
-    switchProfile: '切换用户信息',
-    switchPassport: '切换通行证',
-    disconnect: '退出',
-    connect: '登录',
-    openInWallet: '打开 DID 钱包',
-    // NOTE: 目前只有 Auth0，展示出具体的第三方名字会更好
-    alreadyBindOAuth: '已绑定 Auth0 账号',
-    bind: '绑定',
-    thirdParty: '第三方登录',
-    connectedWith: '连接至',
-  },
-};
-
-const getConnectedAccounts = (user) => user?.connectedAccounts || user?.extraConfigs?.connectedAccounts || [];
-const getSourceProvider = (user) => user?.sourceProvider || user?.extraConfigs?.sourceProvider || 'wallet';
+import UserInfo from './user-info';
+import { translate } from '../Locale/util';
+import ManageAccounts from './manage-accounts';
+import ManageBlocklet from './manage-blocklet';
+import { translations } from './translation';
+import { getConnectedAccounts, getSourceProvider } from './utils';
+import useAccounts from './use-accounts';
 
 function SessionManager({
   session,
@@ -74,25 +42,26 @@ function SessionManager({
   size,
   ...rest
 }) {
-  const translation = translations[locale] || translations.en;
+  const latestSession = useLatest(session);
+  const { connectAccount } = useAccounts();
+  const t = useMemoizedFn((key, data = {}) => {
+    return translate(translations, key, locale, 'en', data);
+  });
   const userAnchorRef = useRef(null);
-  // eslint-disable-next-line react/prop-types
-  const { logoutOAuth, bindOAuth, configs: oauthConfigs, switchOAuthPassport } = session.useOAuth();
+  const { logoutOAuth, switchOAuthPassport } = session.useOAuth();
   const [userOpen, setUserOpen] = useState(false);
 
   // base64 img maybe have some blank char, need encodeURIComponent to transform it
   const avatar = getUserAvatar(session.user?.avatar?.replace(/\s/g, encodeURIComponent(' ')));
-  const currentRole = useMemo(
-    () => session.user?.passports?.find((item) => item.name === session.user.role),
-    [session.user]
-  );
-  const browser = useBrowser();
-  // eslint-disable-next-line react/prop-types
-  const { walletDid } = session.useDid({ session });
 
   const isRawWalletAccount = getSourceProvider(session.user) === 'wallet';
   const connectedAccounts = getConnectedAccounts(session.user);
-  const federatedAccount = connectedAccounts.find((item) => item.provider === 'federated');
+
+  const isFirstLoading = useMemo(() => {
+    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) {
@@ -105,19 +74,59 @@ function SessionManager({
     hasBindWallet = true;
   }
 
-  const oauthConfigList = Object.entries(oauthConfigs)
-    .map(([key, value]) => {
-      return { ...value, provider: key };
-    })
-    .filter((item) => item.enabled);
-
-  const isFirstLoading = useMemo(() => {
-    // eslint-disable-next-line react/prop-types
-    return session?.initialized === false && session?.loading === true;
-    // eslint-disable-next-line react/prop-types
-  }, [session?.initialized, session?.loading]);
+  const _connectAccount = useMemoizedFn(async () => {
+    // HACK: 强制等待组件渲染一轮，以拿到最新的 session 值
+    await sleep();
+    if (!latestSession.current?.user) {
+      return;
+    }
+    if (typeof window === 'undefined') {
+      return;
+    }
+    const blocklet = window?.blocklet;
+    if (!blocklet) {
+      return;
+    }
+    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);
+  });
 
-  const masterSiteInfo = window.blocklet?.settings?.federated?.master;
+  // HACK: 用于处理 统一登录 的自动登录情况，添加一个已连接的账号
+  // 同时可用于以前的站点，会自动生成一个已连接的账号
+  useEffect(() => {
+    if (session.user) {
+      _connectAccount();
+    }
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [session.user]);
 
   if (!session.user) {
     return (
@@ -133,7 +142,7 @@ function SessionManager({
             {...rest}
             data-cy="sessionManager-login">
             {isFirstLoading ? <CircularProgress /> : <AccountIcon />}
-            <span style={{ lineHeight: '25px' }}>{translation.connect}</span>
+            <span style={{ lineHeight: '25px' }}>{t('connect')}</span>
           </Button>
         ) : (
           <IconButton
@@ -163,16 +172,23 @@ function SessionManager({
     setUserOpen((prevOpen) => !prevOpen);
   }
 
+  function close() {
+    setUserOpen(false);
+  }
+
   function onCloseUser(e) {
     if (userAnchorRef.current && userAnchorRef.current.contains(e.target)) {
       return;
     }
-    setUserOpen(false);
+    close();
   }
 
   function _onLogin() {
     if (!isFirstLoading) {
-      session.login(onLogin);
+      session.login((...args) => {
+        _connectAccount();
+        onLogin(...args);
+      });
     }
   }
   function _onLogout() {
@@ -185,48 +201,35 @@ function SessionManager({
           console.error(err);
         })
         .finally(() => {
-          setUserOpen(false);
+          close();
         });
     });
   }
-  function _onSwitchDid() {
-    session.switchDid((...args) => {
-      setUserOpen(false);
-      onSwitchDid(...args);
-    });
-  }
+  /**
+   * @name 切换账户
+   * @description 该功能仅在登录后才能使用，目前仅用于切换普通登录和统一登录的账户，所以会增加一些与统一登录相关的逻辑
+   */
+
   function _onSwitchProfile() {
     session.switchProfile((...args) => {
-      setUserOpen(false);
+      close();
       onSwitchProfile(...args);
     });
   }
+
   function _onSwitchPassport() {
     const { user, provider } = session;
     if (!isRawWalletAccount && provider !== 'federated') {
       switchOAuthPassport(user);
     } else {
-      setUserOpen(false);
+      close();
       session.switchPassport((...args) => {
-        setUserOpen(false);
+        close();
         onSwitchPassport(...args);
       });
     }
   }
 
-  function _onBindWallet() {
-    setUserOpen(false);
-    // FIXME: @zhanghan 暂时切换回 isRawWalletAccount 的方式来判断，在 did-connect 改版时，简化这里的关系判断
-    if (!isRawWalletAccount) {
-      session.bindWallet((...args) => {
-        setUserOpen(false);
-        onBindWallet(...args);
-      });
-    } else {
-      bindOAuth();
-    }
-  }
-
   return (
     <>
       <IconButton
@@ -243,103 +246,43 @@ function SessionManager({
 
       <UserPopper open={userOpen} onClose={onCloseUser} anchorEl={userAnchorRef.current} dark={dark}>
         <MenuList sx={{ p: 0 }}>
-          <div className="session-manager-user">
-            <div className="session-manager-user-name" role="button" aria-label="User info panel">
-              <span>{session.user.fullName}</span>
-              {!!showRole && (currentRole?.title || session.user?.role.toUpperCase()) && (
-                <Chip
-                  label={currentRole?.title || session.user?.role.toUpperCase()}
-                  size="small"
-                  variant="outlined"
-                  sx={{ height: 'auto', marginRight: 0 }}
-                  icon={<SvgIcon component={ShieldCheck} size="small" />}
-                />
-              )}
-            </div>
-            <div className="session-manager-id-list" aria-label="User DID list">
-              {walletDid && (
-                <div className="session-manager-id-item">
-                  <DidAddress responsive={false}>{walletDid}</DidAddress>
-                </div>
-              )}
-              {federatedAccount && (
-                <div className="session-manager-id-item">
-                  <DidAddress responsive={false}>{federatedAccount.did}</DidAddress>
-                </div>
-              )}
-              {session?.user?.email && (
-                <div className="session-manager-id-item">
-                  <DidAddress responsive={false}>{session.user.email}</DidAddress>
-                </div>
-              )}
-            </div>
-          </div>
-          {federatedAccount && !isEmpty(masterSiteInfo) && (
-            <MenuItem className="session-manager-menu-item" data-cy="sessionManager-connectWithFederated">
-              <Box overflow="hidden" textOverflow="ellipsis">
-                <SvgIcon component={ConnectWithoutContactIcon} className="session-manager-menu-icon" />
-                {translation.connectedWith}
-                <Link
-                  ml={1}
-                  href={masterSiteInfo.appUrl}
-                  underline="hover"
-                  target="_blank"
-                  title={masterSiteInfo.appName}
-                  aria-label="Open federated master site url">
-                  {masterSiteInfo.appName}
-                </Link>
-              </Box>
-            </MenuItem>
-          )}
-          {Array.isArray(menu) &&
-            menu.map((menuItem, index) => {
-              const { svgIcon, ...menuProps } = menuItem;
-              return (
-                <MenuItem
-                  key={index}
-                  className="session-manager-menu-item"
-                  {...{
-                    ...menuProps,
-                    icon: undefined,
-                    label: undefined,
-                  }}>
-                  {svgIcon
-                    ? svgIcon && <SvgIcon component={svgIcon} className="session-manager-menu-icon" />
-                    : menuItem.icon}
-                  {menuItem.label}
-                </MenuItem>
-              );
-            })}
-          {menuRender({
-            classes: {
-              menuItem: 'session-manager-menu-item',
-              menuIcon: 'session-manager-menu-icon',
-            },
-          })}
-          {!browser.wallet && (
-            <MenuItem
-              component="a"
-              className="session-manager-menu-item"
-              data-cy="sessionManager-openInWallet"
-              href="https://www.abtwallet.io/"
-              aria-label={translation.openInWallet}
-              target="_blank">
-              <SvgIcon component={OpenInIcon} className="session-manager-menu-icon" />
-              {translation.openInWallet}
-            </MenuItem>
-          )}
-          {!!switchDid && (
-            <MenuItem
-              className="session-manager-menu-item"
-              onClick={_onSwitchDid}
-              aria-label={translation.switchDid}
-              data-cy="sessionManager-switch-trigger">
-              <SvgIcon component={SwitchDidIcon} className="session-manager-menu-icon" />
-              {translation.switchDid}
-            </MenuItem>
-          )}
+          <UserInfo
+            session={session}
+            size={size}
+            locale={locale}
+            onEditUser={() => {
+              close();
+              _onSwitchProfile();
+            }}
+            onSwitchPassport={() => {
+              close();
+              _onSwitchPassport();
+            }}
+            close={close}
+            switchProfile={switchProfile}
+            hasBindWallet={hasBindWallet}
+          />
+
+          <Divider />
+
+          <ManageAccounts
+            session={session}
+            locale={locale}
+            onBindWallet={onBindWallet}
+            onSwitchDid={onSwitchDid}
+            connectAccount={_connectAccount}
+            close={close}
+            hasBindAccount={hasBindAccount}
+          />
+
+          <Divider />
+
+          <ManageBlocklet menu={menu} menuRender={menuRender} locale={locale} />
+
+          <Divider />
+
           {/* NOTE: federated 登录方式不允许切换 profile */}
-          {!!switchProfile && hasBindWallet && session.provider !== 'federated' && (
+          {/* {!!switchProfile && hasBindWallet && session.provider !== 'federated' && (
             <MenuItem
               className="session-manager-menu-item"
               onClick={_onSwitchProfile}
@@ -348,29 +291,7 @@ function SessionManager({
               <SvgIcon component={SwitchProfileIcon} className="session-manager-menu-icon" />
               {translation.switchProfile}
             </MenuItem>
-          )}
-          {!!switchPassport && (
-            <MenuItem
-              className="session-manager-menu-item"
-              onClick={_onSwitchPassport}
-              aria-label={translation.switchPassport}
-              data-cy="sessionManager-switch-passport-trigger">
-              <SvgIcon component={SwitchPassportIcon} className="session-manager-menu-icon" />
-              {translation.switchPassport}
-            </MenuItem>
-          )}
-          {oauthConfigList.length > 0 && !hasBindAccount && session.provider !== 'federated' && (
-            <MenuItem
-              className="session-manager-menu-item"
-              onClick={_onBindWallet}
-              aria-label={
-                !isRawWalletAccount ? `${translation.bind}DID Wallet` : `${translation.bind}${translation.thirdParty}`
-              }
-              data-cy="sessionManager-bind-trigger">
-              <SvgIcon component={BindWalletIcon} className="session-manager-menu-icon" />
-              {!isRawWalletAccount ? `${translation.bind}DID Wallet` : `${translation.bind}${translation.thirdParty}`}
-            </MenuItem>
-          )}
+          )} */}
 
           <MenuItem
             className="session-manager-menu-item"
@@ -379,7 +300,7 @@ function SessionManager({
             aria-label="Logout account"
             data-cy="sessionManager-logout-trigger">
             <SvgIcon component={DisconnectIcon} className="session-manager-menu-icon" />
-            {translation.disconnect}
+            {t('disconnect')}
           </MenuItem>
         </MenuList>
       </UserPopper>

package/src/SessionManager/manage-accounts.jsx

@@ -0,0 +1,143 @@
+/* eslint-disable react/prop-types */
+/* eslint-disable react/jsx-no-bind */
+import { useMemoizedFn, useUpdate } from 'ahooks';
+import { MenuItem } from '@mui/material';
+import { Icon } from '@iconify/react';
+import AccountIcon from '@arcblock/icons/lib/Account';
+import LinkIcon from '@iconify-icons/mdi/link';
+
+import AccountItem from './account-item';
+import MenuAccordion from './menu-accordion';
+import { translations } from './translation';
+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';
+
+export default function ManageAccounts({
+  session,
+  locale,
+  onBindWallet,
+  onSwitchDid,
+  connectAccount,
+  close,
+  hasBindAccount,
+}) {
+  const { bindOAuth, configs: oauthConfigs } = session.useOAuth();
+  const t = useMemoizedFn((key, data = {}) => {
+    return translate(translations, key, locale, 'en', data);
+  });
+
+  const { confirmApi, confirmHolder } = useConfirm();
+  const { accounts, setAccounts } = useAccounts();
+  const update = useUpdate();
+
+  const onChoose = useMemoizedFn((account, { active }) => {
+    if (active) {
+      return;
+    }
+    close();
+    session.switchDid(
+      (...args) => {
+        connectAccount();
+        onSwitchDid(...args);
+      },
+      {
+        provider: account.provider,
+        providerMode: 'paramsFirst',
+      }
+    );
+  });
+
+  const oauthConfigList = Object.entries(oauthConfigs)
+    .map(([key, value]) => {
+      return { ...value, provider: key };
+    })
+    .filter((item) => item.enabled);
+
+  const isRawWalletAccount = getSourceProvider(session.user) === 'wallet';
+
+  const onDelete = useMemoizedFn((account, { active }) => {
+    if (active) {
+      return;
+    }
+    confirmApi.open({
+      title: t('deleteAccountTitle'),
+      content: t('deleteAccountContent'),
+      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);
+        update();
+        done();
+      },
+    });
+  });
+
+  const onAdd = useMemoizedFn((app) => {
+    close();
+    session.switchDid(
+      (...args) => {
+        connectAccount();
+        update();
+        onSwitchDid(...args);
+      },
+      {
+        provider: app.provider,
+        providerMode: 'paramsFirst',
+      }
+    );
+  });
+
+  function _onBindWallet() {
+    close();
+    // FIXME: @zhanghan 暂时切换回 isRawWalletAccount 的方式来判断，在 did-connect 改版时，简化这里的关系判断
+    if (!isRawWalletAccount) {
+      session.bindWallet(onBindWallet);
+    } else {
+      bindOAuth();
+    }
+  }
+
+  return (
+    <>
+      <MenuAccordion
+        locale={locale}
+        title={
+          <>
+            <AccountIcon className="session-manager-menu-icon" style={{ width: 24, height: 24 }} />
+            {t('manageAccounts')}
+          </>
+        }>
+        {accounts.map((item) => (
+          <AccountItem
+            key={item.did}
+            account={item}
+            locale={locale}
+            active={session.user.did === item.did}
+            onDelete={onDelete}
+            onChoose={onChoose}
+          />
+        ))}
+        <AddAccountItem locale={locale} onAdd={onAdd} />
+
+        {oauthConfigList.length > 0 && !hasBindAccount && session.provider !== 'federated' && (
+          <MenuItem
+            className="session-manager-menu-item"
+            onClick={_onBindWallet}
+            aria-label={!isRawWalletAccount ? `${t('bind')}DID Wallet` : `${t('bind')}${t('thirdParty')}`}
+            data-cy="sessionManager-bind-trigger">
+            <Icon icon={LinkIcon} width={24} height={24} className="session-manager-menu-icon" />
+            {!isRawWalletAccount ? `${t('bind')}DID Wallet` : `${t('bind')}${t('thirdParty')}`}
+          </MenuItem>
+        )}
+      </MenuAccordion>
+      {confirmHolder}
+    </>
+  );
+}

package/src/SessionManager/manage-blocklet.jsx

@@ -0,0 +1,64 @@
+/* eslint-disable react/no-array-index-key */
+import PropTypes from 'prop-types';
+import { useMemoizedFn } from 'ahooks';
+import { Icon } from '@iconify/react';
+import AppsIcon from '@iconify-icons/mdi/apps';
+import { MenuItem, SvgIcon } from '@mui/material';
+
+import MenuAccordion from './menu-accordion';
+import { translate } from '../Locale/util';
+import { translations } from './translation';
+
+export default function ManageBlocklet({ menu, menuRender, locale }) {
+  const t = useMemoizedFn((key, data = {}) => {
+    return translate(translations, key, locale, 'en', data);
+  });
+
+  return (
+    <MenuAccordion
+      locale={locale}
+      title={
+        <>
+          <Icon icon={AppsIcon} width={24} height={24} className="session-manager-menu-icon" />
+          {t('manageBlocklet')}
+        </>
+      }>
+      {Array.isArray(menu) &&
+        menu.map((menuItem, index) => {
+          const { svgIcon, ...menuProps } = menuItem;
+          return (
+            <MenuItem
+              key={index}
+              className="session-manager-menu-item"
+              {...{
+                ...menuProps,
+                icon: undefined,
+                label: undefined,
+              }}>
+              {svgIcon
+                ? svgIcon && <SvgIcon component={svgIcon} className="session-manager-menu-icon" />
+                : menuItem.icon}
+              {menuItem.label}
+            </MenuItem>
+          );
+        })}
+      {menuRender({
+        classes: {
+          menuItem: 'session-manager-menu-item',
+          menuIcon: 'session-manager-menu-icon',
+        },
+      })}
+    </MenuAccordion>
+  );
+}
+
+ManageBlocklet.propTypes = {
+  menu: PropTypes.array,
+  menuRender: PropTypes.func,
+  locale: PropTypes.string.isRequired,
+};
+
+ManageBlocklet.defaultProps = {
+  menu: [],
+  menuRender: () => {},
+};