@arcblock/ux 3.4.15 → 3.5.1

package/src/SessionUser/components/session-user-switch.tsx

@@ -1,240 +0,0 @@
-import {
-  Box,
-  ClickAwayListener,
-  Divider,
-  Fade,
-  LinearProgress,
-  MenuItem,
-  MenuList,
-  Paper,
-  Popper,
-  useTheme,
-} from '@mui/material';
-import { useRef } from 'react';
-import { useCreation, useMemoizedFn, useReactive, useSize, useMount } from 'ahooks';
-import { Icon } from '@iconify/react';
-import AddCircleOutlineRoundedIcon from '@iconify-icons/material-symbols/add-circle-outline-rounded';
-import ExpandMoreRoundedIcon from '@iconify-icons/material-symbols/expand-more-rounded';
-import SwapHorizRoundedIcon from '@iconify-icons/material-symbols/swap-horiz-rounded';
-import pick from 'lodash/pick';
-
-import SessionUserItem from './session-user-item';
-import { getVisitorId } from '../../Util';
-import { translate } from '../../Locale/util';
-import { translations } from '../libs/translation';
-import type { Locale, Session } from '../../type';
-
-export interface SessionUserSwitchProps {
-  session: Session;
-  onSwitch: (params?: { userSession: Session }) => Promise<void> | void;
-  isBlocklet?: true | false;
-  locale?: Locale;
-}
-
-export default function SessionUserSwitch({
-  session,
-  onSwitch,
-  isBlocklet = true,
-  locale = 'en',
-}: SessionUserSwitchProps) {
-  const popperAnchorRef = useRef(null);
-  const { palette } = useTheme();
-  const t = useMemoizedFn((key, data = {}) => {
-    return translate(translations, key, locale, 'en', data);
-  });
-
-  const currentState = useReactive({
-    open: false,
-    userSessions: [] as Session[],
-    loadingSessionId: null,
-  });
-
-  useMount(async () => {
-    if (isBlocklet) {
-      const userSessions = await session.getUserSessions();
-      currentState.userSessions = userSessions;
-    }
-  });
-
-  const currentSession = useCreation(() => {
-    const matchSession = (currentState.userSessions || []).find(
-      (item) => item.appPid === globalThis?.blocklet?.appPid && item.userDid === session?.user?.did
-    );
-    if (matchSession) {
-      return matchSession;
-    }
-
-    return {
-      __isDefault: true,
-      appName: globalThis?.blocklet?.appName || globalThis?.env?.appName,
-      appPid: globalThis?.blocklet?.appPid || globalThis?.env?.appPid,
-      userDid: session?.user?.did,
-      visitorId: getVisitorId(),
-      // passportId: '', // 无法从当前 session 获取 passportId 的值
-      // updatedAt: '', // 当前 session 拼凑的信息无法得到 userSession 的更新时间
-      user: pick(session?.user, [
-        'did',
-        'sourceProvider',
-        'fullName',
-        'email',
-        'avatar',
-        'remark',
-        'sourceAppPid',
-        'role',
-      ]),
-    };
-  }, [currentState.userSessions, session?.user]);
-  const onTogglePopper = useMemoizedFn((value = !currentState.open) => {
-    currentState.open = value;
-  });
-  const size = useSize(popperAnchorRef.current);
-  const handleAddAccount = useMemoizedFn(() => {
-    onTogglePopper(false);
-    onSwitch();
-  });
-  const handleSwitch = useMemoizedFn(async (userSession) => {
-    try {
-      currentState.loadingSessionId = userSession?.id;
-      await onSwitch({ userSession });
-      onTogglePopper(false);
-    } finally {
-      currentState.loadingSessionId = null;
-    }
-  });
-
-  if (!isBlocklet) {
-    return (
-      <SessionUserItem
-        sessionItem={currentSession}
-        statusContent={<Icon icon={SwapHorizRoundedIcon} color={palette.text.hint} />}
-        sx={{
-          borderRadius: 1,
-          cursor: 'pointer',
-          py: 1.25,
-          px: 1.5,
-        }}
-        data-cy="sessionManager-switch-trigger"
-        onClick={handleAddAccount}
-        ref={popperAnchorRef}
-      />
-    );
-  }
-  return (
-    <>
-      <SessionUserItem
-        sessionItem={currentSession}
-        statusContent={
-          <Box
-            component={Icon}
-            icon={ExpandMoreRoundedIcon}
-            className="session-user-switch-icon"
-            sx={{
-              transform: 'scale(1.5) rotate(-90deg)',
-              transition: 'transform 0.2s ease',
-            }}
-          />
-        }
-        sx={{
-          borderRadius: 1,
-          cursor: 'pointer',
-          py: 1.25,
-          px: 2,
-          '&:hover': {
-            backgroundColor: `${palette.grey[200]} !important`,
-            '.session-user-switch-icon': {
-              transform: 'scale(1.5)',
-            },
-          },
-        }}
-        onClick={() => onTogglePopper()}
-        ref={popperAnchorRef}
-      />
-      <Popper open={currentState.open} anchorEl={popperAnchorRef.current} transition sx={{ zIndex: 1600 }}>
-        {({ TransitionProps }) => (
-          <ClickAwayListener
-            onClickAway={(e) => {
-              e.preventDefault();
-              e.stopPropagation();
-              onTogglePopper(false);
-            }}>
-            <Fade {...TransitionProps} timeout={350}>
-              <Paper
-                variant="outlined"
-                sx={{
-                  borderRadius: 3,
-                  width: size?.width || 0,
-                  borderColor: 'divider',
-                  mt: 0.5,
-                  border: '0 !important',
-                  boxShadow: `0px 8px 16px 0px ${palette.grey[100]}, 0px 0px 0px 1px ${palette.grey[100]}`,
-                }}>
-                <MenuList sx={{ p: 0.5 }}>
-                  {currentState.userSessions.map((userSessionItem) => {
-                    const isLoading = currentState.loadingSessionId === userSessionItem.id;
-                    const isActive = userSessionItem.id === currentSession.id;
-
-                    return (
-                      <MenuItem
-                        key={userSessionItem.id}
-                        sx={{
-                          position: 'relative',
-                          p: 0,
-                          '&:hover': {
-                            backgroundColor: `${palette.grey[200]} !important`,
-                          },
-                        }}
-                        onClick={() => {
-                          if (!isActive) {
-                            handleSwitch(userSessionItem);
-                          }
-                        }}>
-                        {isLoading && (
-                          <LinearProgress
-                            sx={{
-                              height: '2px',
-                              position: 'absolute',
-                              top: 0,
-                              left: 0,
-                              right: 0,
-                            }}
-                          />
-                        )}
-                        <SessionUserItem sessionItem={userSessionItem} active={isActive} />
-                      </MenuItem>
-                    );
-                  })}
-                  {currentState.userSessions.length > 0 ? (
-                    <Divider sx={{ m: '0!important', borderColor: 'divider' }} />
-                  ) : null}
-                  <MenuItem
-                    sx={{
-                      color: 'secondary.main',
-                      borderRadius: 1,
-                      '&:hover': {
-                        backgroundColor: `${palette.grey[200]} !important`,
-                      },
-                      px: 1,
-                      py: 1.5,
-                      lineHeight: 1,
-                    }}
-                    onClick={handleAddAccount}
-                    data-cy="sessionManager-switch-trigger">
-                    <Box
-                      component={Icon}
-                      icon={AddCircleOutlineRoundedIcon}
-                      sx={{
-                        fontSize: 20,
-                        mr: 0.5,
-                      }}
-                    />
-                    {t('addAnotherAccount')}
-                  </MenuItem>
-                </MenuList>
-              </Paper>
-            </Fade>
-          </ClickAwayListener>
-        )}
-      </Popper>
-    </>
-  );
-}

package/src/SessionUser/components/un-login.tsx

@@ -1,257 +0,0 @@
-import {
-  Box,
-  CircularProgress,
-  Divider,
-  Fade,
-  IconButton,
-  LinearProgress,
-  MenuItem,
-  MenuList,
-  Paper,
-  Popper,
-  useTheme,
-} from '@mui/material';
-import { Icon } from '@iconify/react';
-import UserIcon from '@iconify-icons/tabler/user';
-import { Fragment, useEffect, useRef } from 'react';
-import { useMemoizedFn, useReactive } from 'ahooks';
-import noop from 'lodash/noop';
-import DidBrandLogo from '@arcblock/icons/lib/DidBrandLogo';
-import { useBrowser } from '@arcblock/react-hooks';
-import { joinURL } from 'ufo';
-
-import { Session } from '../../type';
-import CloseButton from '../../CloseButton';
-import { translate } from '../../Locale/util';
-import { translations } from '../libs/translation';
-import Typography from '../../Typography';
-import QuickLoginItem from './quick-login-item';
-import { getFederatedEnabled, getMaster } from '../../Util/federated';
-import { BLOCKLET_SERVICE_PATH_PREFIX } from '../../Util/constant';
-
-export interface UnLoginProps {
-  session: Session;
-  onLogin?: () => void;
-  size?: number;
-  dark?: false | true;
-  locale?: string;
-}
-
-export default function UnLogin({ session, onLogin = noop, size = 24, dark = false, locale = 'en' }: UnLoginProps) {
-  const { palette } = useTheme();
-  const t = useMemoizedFn((key, data = {}) => {
-    return translate(translations, key, locale, 'en', data);
-  });
-  const searchParams = new URLSearchParams(window.location.search);
-  const browser = useBrowser();
-  const isFirstLoading = false;
-  const userAnchorRef = useRef(null);
-  const currentState = useReactive({
-    open: false,
-    userSessions: [] as Session[],
-    loadingSessionId: null,
-    loadAppLogoError: false,
-  });
-  const onTogglePopper = useMemoizedFn((value = !currentState.open) => {
-    currentState.open = value;
-  });
-
-  const _onLogin = useMemoizedFn(({ openMode } = {}) => {
-    if (isFirstLoading) {
-      return;
-    }
-    session.login(onLogin, { openMode });
-  });
-
-  const blocklet = window?.blocklet;
-  const federatedEnabled = getFederatedEnabled(blocklet);
-  const masterSite = getMaster(blocklet);
-  const loginApp = federatedEnabled && masterSite ? masterSite : blocklet;
-  const loginAppName = loginApp?.appName || 'DID Connect';
-  const loginAppLogo = joinURL(
-    loginApp?.appUrl || '/',
-    loginApp?.appLogo || `${BLOCKLET_SERVICE_PATH_PREFIX}/blocklet/logo?imageFilter=convert&f=png&h=80`
-  );
-
-  useEffect(() => {
-    let timer: NodeJS.Timeout;
-
-    // NOTICE: ArcSphere 中使用原生的快捷登录
-    if (!browser.arcSphere && searchParams.get('showQuickConnect') !== 'false') {
-      timer = setTimeout(async () => {
-        currentState.userSessions = await session.getUserSessions();
-        if (currentState.userSessions.length > 0) {
-          currentState.open = true;
-        }
-      }, 1500);
-    }
-
-    return () => {
-      clearTimeout(timer);
-    };
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, []);
-
-  const handleLogin = useMemoizedFn(async (userSession) => {
-    currentState.loadingSessionId = userSession.id;
-    try {
-      await session.loginUserSession({ ...userSession, appPid: blocklet?.appPid });
-    } catch (err) {
-      console.error('session.loginUserSession.error', err);
-    } finally {
-      currentState.loadingSessionId = null;
-    }
-  });
-
-  return (
-    <>
-      <IconButton
-        ref={userAnchorRef}
-        data-cy="sessionManager-login"
-        className="arc-session-user-unlogin"
-        size="medium"
-        onClick={_onLogin}
-        aria-label="Login button">
-        {isFirstLoading ? (
-          <Box
-            sx={{
-              width: size,
-              height: size,
-              display: 'flex',
-              justifyContent: 'center',
-              alignItems: 'center',
-            }}>
-            <CircularProgress style={{ width: size - 4, height: size - 4, color: dark ? '#fff' : '' }} />
-          </Box>
-        ) : (
-          <Icon
-            icon={UserIcon}
-            fontSize={size}
-            color={dark ? '#fff' : 'inherit'}
-            style={{ transform: 'scale(1.25)' }}
-          />
-        )}
-      </IconButton>
-      <Popper
-        open={currentState.open}
-        anchorEl={userAnchorRef.current}
-        transition
-        sx={{
-          zIndex: (theme) => theme.zIndex.appBar,
-        }}
-        placement="bottom-end"
-        modifiers={[
-          {
-            name: 'offset',
-            options: {
-              offset: [0, 10], // [水平偏移, 垂直偏移]
-            },
-          },
-        ]}>
-        {({ TransitionProps }) => (
-          <Fade {...TransitionProps}>
-            <Paper
-              variant="outlined"
-              sx={{
-                borderRadius: 1,
-                width: 400,
-                maxWidth: '90vw',
-                borderColor: 'divider',
-                border: '0 !important',
-                boxShadow: 4,
-                overflow: 'hidden',
-              }}>
-              <Box
-                sx={{
-                  display: 'flex',
-                  alignItems: 'center',
-                  gap: 1,
-                  p: 2,
-                  borderBottom: '1px solid',
-                  borderColor: 'divider',
-                }}>
-                {loginAppLogo && !currentState.loadAppLogoError ? (
-                  <img
-                    src={loginAppLogo}
-                    style={{
-                      height: 20,
-                      maxWidth: 100,
-                    }}
-                    onError={() => {
-                      currentState.loadAppLogoError = true;
-                    }}
-                    alt="Login App Logo"
-                  />
-                ) : (
-                  <DidBrandLogo height={24} width={24} />
-                )}
-                <Typography
-                  fontSize="auto"
-                  sx={{
-                    fontSize: '16',
-                    flex: 1,
-                    color: 'text.secondary',
-                    // 最多展示三行
-                    overflow: 'hidden',
-                    textOverflow: 'ellipsis',
-                    display: '-webkit-box',
-                    WebkitLineClamp: 3,
-                    WebkitBoxOrient: 'vertical',
-                  }}>
-                  {t('useQuickLogin', { name: loginAppName })}
-                </Typography>
-                <CloseButton onClose={() => onTogglePopper(false)} />
-              </Box>
-              <MenuList sx={{ p: 0, overflow: 'hidden' }}>
-                {currentState.userSessions.map((userSessionItem, index) => {
-                  const isLoading = currentState.loadingSessionId === userSessionItem.id;
-
-                  return (
-                    <Fragment key={`${userSessionItem.id}-root`}>
-                      <MenuItem
-                        key={userSessionItem.id}
-                        sx={{
-                          overflow: 'hidden',
-                          position: 'relative',
-                          p: 0,
-                          bgcolor: 'background.paper',
-                          '&:hover': {
-                            bgcolor: `${palette.action.hover} !important`,
-                          },
-                        }}
-                        onClick={() => {
-                          handleLogin(userSessionItem);
-                        }}>
-                        {isLoading && (
-                          <LinearProgress
-                            sx={{
-                              height: '2px',
-                              position: 'absolute',
-                              top: 0,
-                              left: 0,
-                              right: 0,
-                            }}
-                          />
-                        )}
-                        <QuickLoginItem userSession={userSessionItem as unknown as any} locale={locale} />
-                      </MenuItem>
-                      {index < currentState.userSessions.length - 1 ? (
-                        <Divider
-                          key={`${userSessionItem.id}-divider`}
-                          sx={{
-                            mx: 2,
-                            my: '0px !important',
-                          }}
-                        />
-                      ) : null}
-                    </Fragment>
-                  );
-                })}
-              </MenuList>
-            </Paper>
-          </Fade>
-        )}
-      </Popper>
-    </>
-  );
-}

package/src/SessionUser/components/user-info.tsx

@@ -1,201 +0,0 @@
-import { alpha, Box, Chip, Typography } from '@mui/material';
-import { Icon } from '@iconify/react';
-import SwapHorizRoundedIcon from '@iconify-icons/material-symbols/swap-horiz-rounded';
-import ArrowRightAltRoundedIcon from '@iconify-icons/material-symbols/arrow-right-alt-rounded';
-import { useCreation, useMemoizedFn } from 'ahooks';
-import noop from 'lodash/noop';
-
-import DidAvatar from '../../Avatar';
-import { getUserAvatar } from '../../Util';
-import SessionUserSwitch from './session-user-switch';
-import { getWallet } from '../libs/utils';
-import { translations } from '../libs/translation';
-import { translate } from '../../Locale/util';
-import type { $TSFixMe, Locale, Session } from '../../type';
-import Tag from '../../Tag';
-
-export interface UserInfoProps {
-  session: Session;
-  onSwitchPassport: () => void;
-  onSwitchAccount: (params?: { userSession: Session }) => void;
-  onBindWallet: () => void;
-  onSwitchProfile?: () => void;
-  locale?: Locale;
-  isBlocklet?: true | false;
-  mode?: 'minimal' | 'normal';
-}
-
-export default function UserInfo({
-  session,
-  onSwitchPassport,
-  onSwitchAccount,
-  onBindWallet,
-  onSwitchProfile = noop,
-  locale = 'en',
-  isBlocklet = true,
-  mode = 'normal',
-}: UserInfoProps) {
-  const t = useMemoizedFn((key, data = {}) => {
-    return translate(translations, key, locale, 'en', data);
-  });
-  const avatar = getUserAvatar(session.user?.avatar?.replace(/\s/g, encodeURIComponent(' ')), 64);
-  const currentRole = useCreation(() => {
-    // FIXME: @zhanghan 感觉应该把 name 的判断去掉？
-    return session.user?.passports?.find(
-      (item: $TSFixMe) => item.name === session.user.role || item.role === session.user.role
-    );
-  }, [session?.user?.passports, session?.user?.role]);
-
-  const hasBindWallet = useCreation(() => {
-    return getWallet(session?.user);
-  }, [session?.user]);
-
-  return (
-    <Box
-      sx={{
-        py: 2,
-        px: 0.5,
-        pb: 1,
-        display: 'flex',
-        flexDirection: 'column',
-        gap: 1.5,
-      }}>
-      <Box
-        sx={{
-          display: 'flex',
-          justifyContent: 'space-between',
-          alignItems: 'center',
-          gap: 1,
-          px: 2,
-        }}>
-        <Box
-          sx={{
-            display: 'flex',
-            alignItems: 'center',
-            gap: 1.5,
-          }}>
-          {mode === 'normal' ? (
-            <Box
-              onClick={isBlocklet ? noop : onSwitchProfile}
-              data-cy="sessionManager-switch-profile-trigger"
-              sx={{
-                cursor: isBlocklet ? 'default' : 'pointer',
-                position: 'relative',
-                borderRadius: '100%',
-                overflow: 'hidden',
-                fontSize: 0,
-                flexShrink: 0,
-                '&:hover': isBlocklet
-                  ? {}
-                  : {
-                      '&::after': {
-                        content: `"${t('switch')}"`,
-                        position: 'absolute',
-                        bottom: 0,
-                        background: 'rgba(0, 0, 0, 0.2)',
-                        left: 0,
-                        right: 0,
-                        height: '2.2em',
-                        color: 'white',
-                        textAlign: 'center',
-                        fontSize: '12px',
-                        lineHeight: '2em',
-                      },
-                    },
-              }}>
-              <DidAvatar
-                variant="circle"
-                did={session.user.did}
-                src={avatar}
-                size={48}
-                shape="circle"
-                sx={{
-                  cursor: isBlocklet ? 'unset' : 'pointer',
-                }}
-              />
-            </Box>
-          ) : null}
-
-          <Box>
-            <Typography variant={mode === 'normal' ? 'h6' : 'h4'} sx={{ wordBreak: 'break-word' }}>
-              {session.user.fullName}
-            </Typography>
-            {mode === 'normal' ? null : (
-              <Tag
-                className="user-info__connected-tag"
-                type="primary"
-                sx={{
-                  transform: 'scale(0.85)',
-                  transformOrigin: 'left',
-                  display: 'flex',
-                  alignItems: 'center',
-                }}>
-                <Box
-                  className="user-info__connected-tag__dot"
-                  sx={{
-                    mr: 0.75,
-                    width: 6,
-                    height: 6,
-                    backgroundColor: (theme) => theme.palette.text.contrast,
-                    borderRadius: '100vw',
-                  }}
-                />
-                <Box className="user-info__connected-tag__text">DID CONNECTED</Box>
-              </Tag>
-            )}
-          </Box>
-        </Box>
-        {mode === 'normal' ? (
-          <Chip
-            label={currentRole?.title || session.user?.role.toUpperCase()}
-            size="small"
-            variant="outlined"
-            clickable
-            sx={{
-              flexShrink: 0,
-              fontWeight: 'bold',
-              fontSize: '12px',
-              color: 'text.primary',
-              borderColor: 'grey.100',
-              pr: 1,
-              pl: 0.5,
-              '&:active': {
-                boxShadow: 'none',
-              },
-            }}
-            deleteIcon={<Icon icon={SwapHorizRoundedIcon} color="inherit" />}
-            onDelete={onSwitchPassport}
-            onClick={onSwitchPassport}
-            data-cy="sessionManager-switch-passport-trigger"
-          />
-        ) : null}
-      </Box>
-      {mode === 'normal' ? (
-        <>
-          <SessionUserSwitch session={session} onSwitch={onSwitchAccount} isBlocklet={isBlocklet} locale={locale} />
-          {!hasBindWallet ? (
-            <Box
-              sx={{
-                color: 'secondary.main',
-                bgcolor: ({ palette }) => alpha(palette.secondary.main, 0.05),
-                borderRadius: 1,
-                display: 'flex',
-                justifyContent: 'space-between',
-                alignItems: 'center',
-                fontSize: 12,
-                py: 0.75,
-                px: 1.5,
-                cursor: 'pointer',
-                mt: -0.75,
-              }}
-              onClick={onBindWallet}
-              data-cy="sessionManager-bind-trigger">
-              {t('connectDIDWallet')}
-              <Icon icon={ArrowRightAltRoundedIcon} color="inherit" fontSize={16} />
-            </Box>
-          ) : null}
-        </>
-      ) : null}
-    </Box>
-  );
-}