@arcblock/ux 3.4.14 → 3.5.0

package/src/SessionUser/components/logged-in.tsx

@@ -1,338 +0,0 @@
-import { ElementType, useEffect, useRef } from 'react';
-import { useCreation, useMemoizedFn, useReactive } from 'ahooks';
-import bridge from '@arcblock/bridge';
-import {
-  Box,
-  type BoxProps,
-  ClickAwayListener,
-  Divider,
-  Fade,
-  IconButton,
-  MenuItem,
-  MenuList,
-  Paper,
-  Popper,
-} from '@mui/material';
-import { Icon, type IconifyIcon } from '@iconify/react';
-import PersonOutlineRoundedIcon from '@iconify-icons/material-symbols/person-outline-rounded';
-import FilterVintageOutlineRoundedIcon from '@iconify-icons/material-symbols/filter-vintage-outline-rounded';
-import AccountCircleOffOutlineRoundedIcon from '@iconify-icons/material-symbols/account-circle-off-outline-rounded';
-import InviteIcon from '@iconify-icons/material-symbols/featured-seasonal-and-gifts-rounded';
-import Copy from 'copy-to-clipboard';
-import noop from 'lodash/noop';
-
-import Toast from '../../Toast';
-import DidAvatar from '../../Avatar';
-import { getUserAvatar } from '../../Util';
-import UserInfo from './user-info';
-import { DASHBOARD_URL, PROFILE_URL } from '../../Util/constant';
-import SessionPermission from '../../SessionPermission';
-import { translations } from '../libs/translation';
-import { translate } from '../../Locale/util';
-import type { Locale, Session } from '../../type';
-import DidSpace from './did-space';
-import { mergeSx } from '../../Util/style';
-import { createDebug } from '../../Util/logger';
-import { GA_LAST_ROLE } from '../../withTracker/constant';
-import type { SessionUserProps } from '..';
-
-const getInviteLink = (inviter: string) => {
-  const url = new URL(window.location.href);
-  url.searchParams.set('inviter', inviter);
-  return url.toString();
-};
-
-const debug = createDebug('did-connect');
-
-export interface LoggedInProps extends Omit<BoxProps, 'onClick' | 'onMouseEnter' | 'onMouseLeave'> {
-  session: Session;
-  onBindWallet?: () => void;
-  isBlocklet?: true | false;
-  locale?: Locale;
-  size?: number;
-  popperType?: 'hover' | 'click';
-  profileUrl?: string;
-  mode?: 'minimal' | 'normal';
-  renderUserButton: SessionUserProps['renderUserButton'];
-}
-
-export default function LoggedIn({
-  session,
-  onBindWallet = noop,
-  isBlocklet = true,
-  locale = 'en',
-  size = 24,
-  popperType = 'click',
-  profileUrl = PROFILE_URL,
-  mode = 'normal',
-  sx,
-  renderUserButton,
-  ...rest
-}: LoggedInProps) {
-  const t = useMemoizedFn((key, data = {}) => {
-    return translate(translations, key, locale, 'en', data);
-  });
-  const isInviteEnabled = useCreation(() => {
-    return !!globalThis?.blocklet?.settings?.invite?.enabled;
-  }, []);
-  const popperAnchorRef = useRef(null);
-  const currentState = useReactive({
-    open: false,
-  });
-  const onTogglePopper = useMemoizedFn((value = !currentState.open) => {
-    currentState.open = value;
-  });
-  const handleEventProps =
-    popperType === 'hover'
-      ? { onMouseEnter: () => onTogglePopper(true), onMouseLeave: () => onTogglePopper(false) }
-      : { onClick: () => onTogglePopper() };
-
-  // base64 img maybe have some blank char, need encodeURIComponent to transform it
-  const avatar = getUserAvatar(session.user?.avatar?.replace(/\s/g, encodeURIComponent(' ')));
-
-  // FIXME: @zhanghan this should be refactored into SessionContext
-  const oauth = session.useOAuth();
-  const passkey = typeof session.usePasskey === 'function' ? session.usePasskey() : null;
-  const handleSwitchPassport = useMemoizedFn(({ inArcSphere = false } = {}) => {
-    localStorage.setItem(GA_LAST_ROLE, session?.user?.role);
-    const extraParams: Record<string, any> = {};
-    if (inArcSphere) {
-      if (session?.user?.sourceAppPid) {
-        extraParams.sourceAppPid = session.user.sourceAppPid;
-      }
-    }
-    onTogglePopper(false);
-    if (session?.user?.sourceProvider === 'passkey') {
-      passkey.switchPassport(session.user);
-    } else if (['google', 'apple', 'email', 'github'].includes(session?.user?.sourceProvider)) {
-      oauth.switchOAuthPassport(session.user);
-    } else {
-      session.switchPassport(noop, extraParams);
-    }
-  });
-
-  const handleSwitchAccount = useMemoizedFn(({ userSession, inArcSphere = false } = {}) => {
-    return new Promise<void>((resolve) => {
-      const extraParams: Record<string, any> = {};
-      if (inArcSphere) {
-        if (session.user.sourceAppPid) {
-          extraParams.sourceAppPid = session.user.sourceAppPid;
-        }
-      }
-      const options: Record<string, any> = {};
-      if (!userSession) {
-        onTogglePopper(false);
-        options.showQuickConnect = false;
-      } else {
-        options.userSession = userSession;
-      }
-      session.switchDid(
-        () => {
-          onTogglePopper(false);
-          resolve();
-        },
-        extraParams,
-        options
-      );
-    });
-  });
-  const handleSwitchProfile = useMemoizedFn(({ inArcSphere = false } = {}) => {
-    const extraParams: Record<string, any> = {};
-    if (inArcSphere) {
-      if (session.user.sourceAppPid) {
-        extraParams.sourceAppPid = session.user.sourceAppPid;
-      }
-    }
-    onTogglePopper(false);
-    session.switchProfile(noop, extraParams);
-  });
-  const handleLogout = useMemoizedFn(() => {
-    onTogglePopper(false);
-    session.logout();
-  });
-
-  const handleBindWallet = useMemoizedFn(() => {
-    onTogglePopper(false);
-    session.bindWallet(onBindWallet);
-  });
-
-  const handleOpenInvite = useMemoizedFn(() => {
-    onTogglePopper(false);
-    const link = getInviteLink(session.user.did);
-    Copy(link);
-    Toast.success(t('inviteCopied'));
-  });
-
-  useEffect(() => {
-    bridge.registerBlocklet('callSwitchPassport', () => {
-      debug('bridge registerBlocklet: callSwitchPassport');
-      handleSwitchPassport({ inArcSphere: true });
-    });
-    bridge.registerBlocklet('callSwitchDid', () => {
-      debug('bridge registerBlocklet: callSwitchDid');
-      handleSwitchAccount({ inArcSphere: true });
-    });
-    bridge.registerBlocklet('callSwitchProfile', () => {
-      debug('bridge registerBlocklet: callSwitchProfile');
-      handleSwitchProfile({ inArcSphere: true });
-    });
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, []);
-
-  if (renderUserButton) {
-    return renderUserButton({
-      isBlocklet,
-      session,
-      locale,
-      size,
-      popperType,
-      profileUrl,
-      dashboardUrl: DASHBOARD_URL,
-      mode,
-      avatar,
-      isInviteEnabled,
-      handleSwitchPassport,
-      handleSwitchAccount,
-      handleSwitchProfile,
-      handleBindWallet,
-      handleOpenInvite,
-      handleLogout,
-    });
-  }
-
-  return (
-    <Box
-      sx={mergeSx(
-        {
-          display: 'inline-flex',
-          alignItems: 'center',
-          justifyContent: 'center',
-        },
-        // @ts-ignore
-        sx
-      )}
-      {...rest}>
-      <IconButton
-        ref={popperAnchorRef}
-        size="medium"
-        data-cy="sessionManager-logout-popup"
-        className="arc-session-user-logged-in"
-        aria-label="User info button"
-        {...handleEventProps}>
-        <DidAvatar variant="circle" did={session.user.did} src={avatar} size={size} shape="circle" />
-      </IconButton>
-
-      <Popper
-        open={currentState.open}
-        anchorEl={popperAnchorRef.current}
-        transition
-        placement="bottom-end"
-        sx={{
-          zIndex: 1600,
-        }}>
-        {({ TransitionProps }) => (
-          <ClickAwayListener
-            onClickAway={(e) => {
-              e.preventDefault();
-              e.stopPropagation();
-              onTogglePopper(false);
-            }}>
-            <Fade {...TransitionProps} timeout={350}>
-              <Paper
-                variant="outlined"
-                sx={{
-                  borderRadius: 1.5,
-                  width: 350,
-                  maxWidth: '90vw',
-                }}>
-                <UserInfo
-                  locale={locale}
-                  isBlocklet={isBlocklet}
-                  session={session}
-                  onSwitchPassport={handleSwitchPassport}
-                  onSwitchAccount={handleSwitchAccount}
-                  onSwitchProfile={handleSwitchProfile}
-                  onBindWallet={handleBindWallet}
-                  mode={mode}
-                />
-                <Divider sx={{ m: '0 !important' }} />
-                <MenuList sx={{ p: 0 }}>
-                  {isBlocklet ? (
-                    <>
-                      <SessionPermission session={session}>
-                        <SessionMenuItem
-                          icon={FilterVintageOutlineRoundedIcon}
-                          title={t('dashboard')}
-                          component="a"
-                          href={DASHBOARD_URL}
-                          sx={{ display: 'block', textDecoration: 'none', color: 'inherit' }}
-                        />
-                      </SessionPermission>
-                      <SessionMenuItem
-                        icon={PersonOutlineRoundedIcon}
-                        title={t('profile')}
-                        component="a"
-                        href={profileUrl}
-                        sx={{ display: 'block', textDecoration: 'none', color: 'inherit' }}
-                      />
-                      {isInviteEnabled && (
-                        <SessionMenuItem
-                          icon={InviteIcon}
-                          title={t('invite')}
-                          component="div"
-                          onClick={handleOpenInvite}
-                          sx={{ display: 'block', color: 'inherit' }}
-                        />
-                      )}
-                      <Divider sx={{ m: '0 !important' }} />
-                      {mode === 'normal' ? <DidSpace session={session} locale={locale} /> : null}
-                    </>
-                  ) : null}
-                  <SessionMenuItem
-                    icon={AccountCircleOffOutlineRoundedIcon}
-                    title={t('logout')}
-                    component="div"
-                    sx={{ color: 'error.main' }}
-                    onClick={handleLogout}
-                    data-cy="sessionManager-logout-trigger"
-                  />
-                </MenuList>
-              </Paper>
-            </Fade>
-          </ClickAwayListener>
-        )}
-      </Popper>
-    </Box>
-  );
-}
-
-interface SessionMenuItemProps {
-  icon: IconifyIcon | string;
-  title: string;
-}
-
-// prop component is required
-function SessionMenuItem<C extends ElementType>({
-  icon,
-  title,
-  ...rest
-}: SessionMenuItemProps & BoxProps<C, { component: C }>) {
-  return (
-    <Box {...rest} sx={{ p: 0.5, ...rest?.sx }}>
-      <MenuItem
-        sx={{
-          display: 'flex',
-          gap: 1,
-          alignItems: 'center',
-          borderRadius: 1,
-          '&:hover': {
-            backgroundColor: 'action.hover',
-          },
-          py: 1,
-        }}>
-        <Icon icon={icon} fontSize={24} />
-        {title}
-      </MenuItem>
-    </Box>
-  );
-}

package/src/SessionUser/components/quick-login-item.tsx

@@ -1,132 +0,0 @@
-import { Box, Chip, Typography, useMediaQuery, useTheme } from '@mui/material';
-import type { Theme } from '@mui/material';
-import noop from 'lodash/noop';
-
-import RelativeTime from '../../RelativeTime';
-import WalletOSIcon from '../../WalletOSIcon';
-import { DID } from '../../DID';
-import Avatar from '../../Avatar';
-import { getSourceProvider } from '../libs/utils';
-
-export default function QuickLoginItem({
-  userSession,
-  locale = 'en',
-  onClick = noop,
-}: {
-  onClick?: () => void;
-  locale?: string;
-  userSession: {
-    user: {
-      avatar: string;
-      did: string;
-      fullName: string;
-      role: string;
-      roleTitle: string;
-      email: string;
-    };
-    extra: {
-      walletOS: string;
-      provider: string;
-    };
-    updatedAt: string;
-  };
-}) {
-  const { palette } = useTheme();
-  const isMobile = useMediaQuery((theme: Theme) => theme.breakpoints.down('md'));
-  const isRawWalletAccount = getSourceProvider(userSession?.user) === 'wallet';
-
-  return (
-    <Box
-      sx={{
-        p: 2,
-        transition: 'background-color 0.5s',
-        bgcolor: 'background.paper',
-        '&:hover, &:active': {
-          backgroundColor: 'action.hover',
-        },
-        display: 'flex',
-        justifyContent: 'space-between',
-        alignItems: 'center',
-        cursor: 'pointer',
-        '&:hover': {
-          backgroundColor: 'action.hover',
-        },
-        width: '100%',
-      }}
-      onClick={onClick}>
-      <Box
-        sx={{
-          display: 'flex',
-          alignItems: 'center',
-          gap: 1.5,
-          flex: 1,
-          overflow: 'hidden',
-        }}>
-        <Avatar src={userSession.user.avatar} did={userSession.user.did} size={44} variant="circle" shape="circle" />
-        <Box sx={{ flex: 1, overflow: 'hidden' }}>
-          <Typography
-            component={Box}
-            sx={{
-              fontSize: '16px',
-              fontWeight: 500,
-              display: 'flex',
-              alignItems: 'center',
-              gap: 1,
-              color: 'text.primary',
-            }}>
-            {userSession.user.fullName}
-            <Chip
-              label={userSession.user?.roleTitle || userSession.user?.role}
-              size="small"
-              variant="outlined"
-              sx={() => ({
-                height: 'auto',
-                fontWeight: 'bold',
-                fontSize: '12px',
-                borderColor: 'grey.300',
-                color: 'text.secondary',
-              })}
-            />
-          </Typography>
-          {isRawWalletAccount ? (
-            <Box
-              sx={{
-                display: 'flex',
-                alignItems: 'center',
-                gap: 0.5,
-              }}>
-              <WalletOSIcon
-                provider={userSession?.extra?.provider}
-                walletOS={userSession?.extra?.walletOS}
-                color={palette.text.secondary}
-              />
-              <DID
-                // @ts-ignore
-                locale={locale}
-                did={userSession.user.did}
-                size={12}
-                sx={{
-                  lineHeight: 1,
-                  fontSize: '12px',
-                  mt: 0.5,
-                  '& span.arc-avatar-did-motif': {
-                    display: 'none !important',
-                  },
-                }}
-                compact
-              />
-            </Box>
-          ) : (
-            <Typography sx={{ fontSize: '12px', color: 'text.secondary' }}>{userSession.user.email}</Typography>
-          )}
-        </Box>
-      </Box>
-      {userSession.updatedAt && !isMobile && (
-        <Box component="span" sx={{ color: 'text.hint', fontSize: '12px', flexShrink: 0 }}>
-          {/* @ts-ignore */}
-          <RelativeTime value={userSession.updatedAt} locale={locale} />
-        </Box>
-      )}
-    </Box>
-  );
-}

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

@@ -1,93 +0,0 @@
-import { Box, type BoxProps, IconButton, Tooltip, Typography, useTheme } from '@mui/material';
-import { Icon } from '@iconify/react';
-import LensIcon from '@iconify-icons/material-symbols/lens';
-
-import WalletOSIcon from '../../WalletOSIcon';
-import Avatar from '../../Avatar';
-import { DID } from '../../DID';
-import { getSourceProvider } from '../libs/utils';
-import { Session } from '../../type';
-
-export interface SessionUserItemProps extends BoxProps {
-  sessionItem: Session;
-  statusContent?: React.ReactNode;
-  active?: false | true;
-}
-
-function SessionUserItem({
-  ref = undefined,
-  sessionItem,
-  statusContent = null,
-  active = false,
-  ...rest
-}: SessionUserItemProps & {
-  ref?: React.Ref<unknown>;
-}) {
-  const { palette } = useTheme();
-  const isRawWalletAccount = getSourceProvider(sessionItem?.user) === 'wallet';
-
-  return (
-    <Box
-      {...rest}
-      ref={ref}
-      sx={{
-        display: 'flex',
-        alignItems: 'center',
-        justifyContent: 'space-between',
-        py: 0.75,
-        px: 1,
-        width: '100%',
-        ...rest?.sx,
-      }}>
-      <Box
-        sx={{
-          display: 'flex',
-          alignItems: 'center',
-          gap: 0.5,
-          overflow: 'hidden',
-          '& .did-address-avatar': {
-            display: 'none !important',
-          },
-        }}>
-        <Box sx={{ mr: 0.5, fontSize: 0 }}>
-          <Avatar did={sessionItem.userDid} size={36} />
-        </Box>
-        <WalletOSIcon
-          color={palette.text.secondary}
-          loading={sessionItem.__isDefault}
-          provider={sessionItem?.extra?.provider}
-          walletOS={sessionItem?.extra?.walletOS}
-        />
-        {isRawWalletAccount ? (
-          <DID did={sessionItem.userDid} copyable={false} size={14} responsive={false} compact sx={{ lineHeight: 1 }} />
-        ) : (
-          sessionItem.user.email && (
-            <Tooltip
-              title={sessionItem.user.email}
-              sx={{
-                zIndex: 1600,
-              }}
-              placement="top">
-              <Typography
-                sx={{
-                  fontSize: 14,
-                  overflow: 'hidden',
-                  textOverflow: 'ellipsis',
-                }}>
-                {sessionItem.user.email}
-              </Typography>
-            </Tooltip>
-          )
-        )}
-      </Box>
-      {statusContent ||
-        (active && (
-          <IconButton size="small" disableRipple>
-            <Icon icon={LensIcon} fontSize={6} color={palette.success.main} />
-          </IconButton>
-        ))}
-    </Box>
-  );
-}
-
-export default SessionUserItem;