@arcblock/ux 2.8.25 → 2.9.0

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

@@ -0,0 +1,194 @@
+import PropTypes from 'prop-types';
+import { useRef } from 'react';
+import { useMemoizedFn, useReactive } from 'ahooks';
+import { Box, ClickAwayListener, Divider, Fade, IconButton, MenuItem, MenuList, Paper, Popper } from '@mui/material';
+import { Icon } 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 noop from 'lodash/noop';
+
+import DidAvatar from '../../Avatar';
+import { getUserAvatar } from '../../Util';
+import UserInfo from './user-info';
+import { temp as colors } from '../../Colors';
+import { DASHBOARD_URL, PROFILE_URL } from '../../Util/constant';
+import SessionPermission from '../../SessionPermission';
+import { translations } from '../libs/translation';
+import { translate } from '../../Locale/util';
+
+export default function LoggedIn({ session, dark, onBindWallet, isBlocklet, locale, size }) {
+  const t = useMemoizedFn((key, data = {}) => {
+    return translate(translations, key, locale, 'en', data);
+  });
+  const popperAnchorRef = useRef(null);
+  const currentState = useReactive({
+    open: false,
+  });
+  const onTogglePopper = useMemoizedFn((value = !currentState.open) => {
+    currentState.open = value;
+  });
+  // base64 img maybe have some blank char, need encodeURIComponent to transform it
+  const avatar = getUserAvatar(session.user?.avatar?.replace(/\s/g, encodeURIComponent(' ')));
+  const handleSwitchPassport = useMemoizedFn(() => {
+    onTogglePopper(false);
+    session.switchPassport();
+  });
+  const handleSwitchAccount = useMemoizedFn(({ userSession } = {}) => {
+    return new Promise((resolve) => {
+      const options = {};
+      if (!userSession) {
+        onTogglePopper(false);
+        options.showQuickConnect = false;
+      } else {
+        options.userSession = userSession;
+      }
+      session.switchDid(
+        () => {
+          onTogglePopper(false);
+          resolve();
+        },
+        {},
+        options
+      );
+    });
+  });
+  const handleSwitchProfile = useMemoizedFn(() => {
+    onTogglePopper(false);
+    session.switchProfile();
+  });
+  const onLogout = useMemoizedFn(() => {
+    onTogglePopper(false);
+    session.logout();
+  });
+
+  const handleBindWallet = useMemoizedFn(() => {
+    onTogglePopper(false);
+    session.bindWallet(onBindWallet);
+  });
+  return (
+    <>
+      <IconButton
+        ref={popperAnchorRef}
+        onClick={() => onTogglePopper()}
+        size="medium"
+        data-cy="sessionManager-logout-popup"
+        aria-label="User info button">
+        <DidAvatar variant="circle" did={session.user.did} src={avatar} size={size} shape="circle" />
+      </IconButton>
+
+      <Popper
+        open={currentState.open}
+        onClose={() => onTogglePopper(false)}
+        anchorEl={popperAnchorRef.current}
+        dark={dark}
+        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: 3,
+                  width: 350,
+                  maxWidth: '90vw',
+                  borderColor: colors.lineStep,
+                  border: '0 !important',
+                  boxShadow: `0px 8px 16px 0px ${colors.gray6}, 0px 0px 0px 1px ${colors.gray6}`,
+                }}>
+                <UserInfo
+                  locale={locale}
+                  isBlocklet={isBlocklet}
+                  session={session}
+                  onSwitchPassport={handleSwitchPassport}
+                  onSwitchAccount={handleSwitchAccount}
+                  onSwitchProfile={handleSwitchProfile}
+                  onBindWallet={handleBindWallet}
+                />
+                <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={PROFILE_URL}
+                        sx={{ display: 'block', textDecoration: 'none', color: 'inherit' }}
+                      />
+                      <Divider sx={{ m: '0!important', borderColor: colors.lineStep }} />
+                    </>
+                  ) : null}
+                  <SessionMenuItem
+                    icon={AccountCircleOffOutlineRoundedIcon}
+                    title={t('logout')}
+                    sx={{ color: 'error.main' }}
+                    onClick={onLogout}
+                    data-cy="sessionManager-logout-trigger"
+                  />
+                </MenuList>
+              </Paper>
+            </Fade>
+          </ClickAwayListener>
+        )}
+      </Popper>
+    </>
+  );
+}
+
+LoggedIn.propTypes = {
+  session: PropTypes.object.isRequired,
+  onBindWallet: PropTypes.func,
+  dark: PropTypes.bool,
+  isBlocklet: PropTypes.bool,
+  locale: PropTypes.string,
+  size: PropTypes.number,
+};
+LoggedIn.defaultProps = {
+  dark: false,
+  isBlocklet: true,
+  onBindWallet: noop,
+  locale: 'en',
+  size: 24,
+};
+
+function SessionMenuItem({ icon, title, ...rest }) {
+  return (
+    <Box {...rest} sx={{ p: 0.5, ...rest?.sx }}>
+      <MenuItem
+        sx={{
+          display: 'flex',
+          gap: 1,
+          alignItems: 'center',
+          borderRadius: 2,
+          '&:hover': {
+            backgroundColor: `${colors.surfacePrimarySubtitle} !important`,
+          },
+          py: 1,
+        }}>
+        <Icon icon={icon} fontSize={24} />
+        {title}
+      </MenuItem>
+    </Box>
+  );
+}
+
+SessionMenuItem.propTypes = {
+  icon: PropTypes.string.isRequired,
+  title: PropTypes.string.isRequired,
+};

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

@@ -0,0 +1,96 @@
+import PropTypes from 'prop-types';
+import { forwardRef } from 'react';
+import { Box, IconButton, Typography } from '@mui/material';
+import { useCreation } from 'ahooks';
+import { Icon } from '@iconify/react';
+import ApiIcon from '@iconify-icons/mdi/api';
+import IOSRoundedIcon from '@iconify-icons/material-symbols/ios-rounded';
+import LanguageIcon from '@iconify-icons/material-symbols/language';
+import LensIcon from '@iconify-icons/material-symbols/lens';
+import AndroidIcon from '@iconify-icons/material-symbols/android';
+import Auth0Icon from '@iconify-icons/logos/auth0-icon';
+
+import Avatar from '../../Avatar';
+import DID from '../../DID';
+import { temp as colors } from '../../Colors';
+import { getSourceProvider } from '../libs/utils';
+
+const SessionUserItem = forwardRef(({ sessionItem, statusContent, active, ...rest }, ref) => {
+  const isRawWalletAccount = getSourceProvider(sessionItem?.user) === 'wallet';
+  const walletIcon = useCreation(() => {
+    const { walletOS, provider } = sessionItem?.extra || {};
+    if (provider === 'auth0') {
+      return <Icon icon={Auth0Icon} width={10} height={10} style={{ color: 'black' }} />;
+    }
+    if (walletOS === 'ios') {
+      return <Icon icon={IOSRoundedIcon} width={16} height={16} style={{ color: 'black' }} />;
+    }
+    if (walletOS === 'android') {
+      return <Icon icon={AndroidIcon} width={14} height={14} style={{ color: 'black' }} />;
+    }
+    if (walletOS === 'web') {
+      return <Icon icon={LanguageIcon} style={{ color: 'black' }} />;
+    }
+    if (walletOS === 'api') {
+      return <Icon icon={ApiIcon} width={14} height={14} style={{ color: 'black' }} />;
+    }
+    return null;
+  }, [sessionItem?.extra?.walletOS, sessionItem?.extra?.provider]);
+
+  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,
+          '& .did-address-avatar': {
+            display: 'none !important',
+          },
+          '& .did-address-text': {
+            color: `${colors.textBase} !important`,
+          },
+        }}>
+        <Box sx={{ mr: 0.5, fontSize: 0 }}>
+          <Avatar did={sessionItem.userDid} size={36} />
+        </Box>
+        {walletIcon}
+        {isRawWalletAccount ? (
+          <DID did={sessionItem.userDid} copyable={false} size={14} responsive={false} compact sx={{ lineHeight: 1 }} />
+        ) : (
+          <Typography sx={{ fontSize: 14 }}>{sessionItem.user.email}</Typography>
+        )}
+      </Box>
+      {statusContent ||
+        (active && (
+          <IconButton size="small" disableRipple>
+            <Icon icon={LensIcon} fontSize={6} color={colors.surfaceSuccess} />
+          </IconButton>
+        ))}
+    </Box>
+  );
+});
+
+SessionUserItem.propTypes = {
+  sessionItem: PropTypes.object.isRequired,
+  statusContent: PropTypes.node,
+  active: PropTypes.bool,
+};
+
+SessionUserItem.defaultProps = {
+  statusContent: null,
+  active: false,
+};
+
+export default SessionUserItem;

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

@@ -0,0 +1,222 @@
+import PropTypes from 'prop-types';
+import {
+  Box,
+  ClickAwayListener,
+  Divider,
+  Fade,
+  LinearProgress,
+  MenuItem,
+  MenuList,
+  Paper,
+  Popper,
+} 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 { temp as colors } from '../../Colors';
+import { getVisitorId } from '../../Util';
+import { translate } from '../../Locale/util';
+import { translations } from '../libs/translation';
+
+export default function SessionUserSwitch({ session, onSwitch, isBlocklet, locale }) {
+  const popperAnchorRef = useRef(null);
+  const t = useMemoizedFn((key, data = {}) => {
+    return translate(translations, key, locale, 'en', data);
+  });
+
+  const currentState = useReactive({
+    open: false,
+    userSessions: [],
+    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 {
+      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={colors.textMuted} />}
+        sx={{
+          border: `1px solid ${colors.borderBase}`,
+          borderRadius: 2,
+          cursor: 'pointer',
+          py: 1.25,
+          px: 1.5,
+        }}
+        data-cy="sessionManager-switch-trigger"
+        onClick={handleAddAccount}
+        ref={popperAnchorRef}
+      />
+    );
+  }
+  return (
+    <>
+      <SessionUserItem
+        sessionItem={currentSession}
+        statusContent={<Icon icon={ExpandMoreRoundedIcon} color={colors.textMuted} />}
+        sx={{
+          border: `1px solid ${colors.borderBase}`,
+          borderRadius: 2,
+          cursor: 'pointer',
+          py: 1.25,
+          px: 1.5,
+        }}
+        onClick={() => onTogglePopper()}
+        ref={popperAnchorRef}
+      />
+      <Popper
+        open={currentState.open}
+        onClose={() => onTogglePopper(false)}
+        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: colors.lineStep,
+                  mt: 0.5,
+                  border: '0 !important',
+                  boxShadow: `0px 8px 16px 0px ${colors.gray6}, 0px 0px 0px 1px ${colors.gray6}`,
+                }}>
+                <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: `${colors.surfacePrimarySubtitle} !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: colors.lineStep }} />
+                  ) : null}
+                  <MenuItem
+                    sx={{
+                      color: colors.primaryBase,
+                      borderRadius: 2,
+                      '&:hover': {
+                        backgroundColor: `${colors.surfacePrimarySubtitle} !important`,
+                      },
+                      px: 1,
+                      py: 1.5,
+                      lineHeight: 1,
+                    }}
+                    onClick={handleAddAccount}
+                    data-cy="sessionManager-switch-trigger">
+                    <Box component={Icon} icon={AddCircleOutlineRoundedIcon} fontSize={20} sx={{ mr: 0.5 }} />
+                    {t('addAnotherAccount')}
+                  </MenuItem>
+                </MenuList>
+              </Paper>
+            </Fade>
+          </ClickAwayListener>
+        )}
+      </Popper>
+    </>
+  );
+}
+
+SessionUserSwitch.propTypes = {
+  session: PropTypes.object.isRequired,
+  onSwitch: PropTypes.func.isRequired,
+  isBlocklet: PropTypes.bool,
+  locale: PropTypes.string,
+};
+
+SessionUserSwitch.defaultProps = {
+  isBlocklet: true,
+  locale: 'en',
+};

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

@@ -0,0 +1,55 @@
+import PropTypes from 'prop-types';
+import { Box, CircularProgress, IconButton } from '@mui/material';
+import { Icon } from '@iconify/react';
+import PersonOutlineRoundedIcon from '@iconify-icons/material-symbols/person-outline-rounded';
+import { useRef } from 'react';
+import { useMemoizedFn } from 'ahooks';
+import noop from 'lodash/noop';
+
+export default function UnLogin({ session, onLogin, size, dark }) {
+  const isFirstLoading = false;
+  const userAnchorRef = useRef(null);
+  const _onLogin = useMemoizedFn(() => {
+    if (isFirstLoading) {
+      return;
+    }
+    session.login(onLogin);
+  });
+
+  return (
+    <Box>
+      <IconButton
+        ref={userAnchorRef}
+        onClick={_onLogin}
+        data-cy="sessionManager-login"
+        size="medium"
+        aria-label="Login button">
+        {isFirstLoading ? (
+          <Box width={size} height={size} display="flex" justifyContent="center" alignItems="center">
+            <CircularProgress style={{ width: size - 4, height: size - 4, color: dark ? '#fff' : '' }} />
+          </Box>
+        ) : (
+          <Icon
+            icon={PersonOutlineRoundedIcon}
+            fontSize={size}
+            color={dark ? '#fff' : 'inherit'}
+            style={{ transform: 'scale(1.08)' }}
+          />
+        )}
+      </IconButton>
+    </Box>
+  );
+}
+
+UnLogin.propTypes = {
+  session: PropTypes.object.isRequired,
+  onLogin: PropTypes.func,
+  size: PropTypes.number,
+  dark: PropTypes.bool,
+};
+
+UnLogin.defaultProps = {
+  onLogin: noop,
+  size: 24,
+  dark: false,
+};