@arcblock/ux 2.8.25 → 2.9.0

package/src/SessionManager/components/user-info.jsx

@@ -1,117 +0,0 @@
-/* eslint-disable react/jsx-no-bind */
-/* eslint-disable react/prop-types */
-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';
-import { useCreation, useMemoizedFn } from 'ahooks';
-
-import DidAvatar from '../../Avatar';
-import DidAddress from '../../Address';
-import DID from '../../DID';
-import { getUserAvatar } from '../../Util';
-import { t as translate } from '../../Locale/util';
-import { translations } from '../libs/translation';
-import Typography from '../../Typography';
-
-export default function UserInfo({ session, locale, onSwitchProfile, onSwitchPassport, switchProfile, hasBindWallet }) {
-  const t = (key, data = {}) => {
-    return translate(translations, key, locale, 'en', data);
-  };
-  const avatar = getUserAvatar(session.user?.avatar?.replace(/\s/g, encodeURIComponent(' ')), 64);
-  const { walletDid } = session.useDid({ session });
-  const currentRole = useCreation(
-    () => session.user?.passports?.find((item) => item.name === session.user.role),
-    [session?.user?.passports, session?.user?.role]
-  );
-  const userEmail = useCreation(() => session.user?.email, [session?.user]);
-
-  const canEdit = useCreation(() => {
-    if (onSwitchProfile instanceof Function) {
-      if (switchProfile && hasBindWallet) {
-        return true;
-      }
-    }
-    return false;
-  }, [onSwitchProfile, switchProfile, hasBindWallet, session.provider]);
-
-  const _onSwitchProfile = useMemoizedFn(() => {
-    if (window.blocklet?.appPid) {
-      window.location.href = '/.well-known/service/user/profile';
-    } else if (canEdit) {
-      onSwitchProfile();
-    }
-  });
-
-  return (
-    <Box
-      sx={{
-        display: 'flex',
-        alignItems: 'center',
-        gap: '12px',
-        padding: '15px',
-      }}>
-      <Box
-        onClick={_onSwitchProfile}
-        data-cy="sessionManager-switch-profile-trigger"
-        sx={{
-          cursor: canEdit ? 'pointer' : 'default',
-          position: 'relative',
-          borderRadius: '100%',
-          overflow: 'hidden',
-          fontSize: 0,
-          '&:hover': canEdit
-            ? {
-                '&::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={64} shape="circle" />
-      </Box>
-      <Box sx={{ flex: 1, position: 'static', overflow: 'hidden', fontSize: '14px' }}>
-        <Typography variant="h5" fontWeight="bold" sx={{ wordBreak: 'break-all', lineHeight: 1 }}>
-          {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',
-            margin: '6px 0 4px 0',
-          }}
-          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"
-        />
-        {/* eslint-disable-next-line no-nested-ternary */}
-        {session.provider === 'auth0' ? (
-          walletDid ? (
-            <DID responsive={false} compact did={walletDid} />
-          ) : null
-        ) : (
-          <DID responsive={false} compact did={session.user.did} />
-        )}
-        {userEmail ? <DidAddress responsive={false}>{userEmail}</DidAddress> : null}
-      </Box>
-    </Box>
-  );
-}

package/src/SessionManager/components/user-popper.jsx

@@ -1,95 +0,0 @@
-import PropTypes from 'prop-types';
-import { IconButton, Paper, Popper, ClickAwayListener } from '@mui/material';
-import CloseIcon from '@iconify-icons/mdi/close';
-import { Icon } from '@iconify/react';
-import { styled } from '../../Theme';
-
-export default function UserPopper({ anchorEl, dark, children, open, onClose, autoClose }) {
-  return (
-    anchorEl && (
-      <StyledPopper open={open} disablePortal anchorEl={anchorEl} placement="bottom-end" $dark={dark}>
-        <Paper
-          sx={[
-            (theme) => ({
-              borderColor: '#F0F0F0',
-              boxShadow: '0px 8px 12px rgba(92, 92, 92, 0.04)',
-              borderRadius: theme.spacing(2),
-              overflow: 'auto',
-              maxWidth: 'calc(100vw - 10px)',
-              maxHeight: 'calc(100vh - 80px)',
-              '& .MuiChip-root .MuiChip-icon': {
-                color: theme.palette.success.main,
-              },
-              '& .MuiList-root': {
-                width: '320px',
-              },
-            }),
-            dark && {
-              backgroundColor: '#27282c',
-              color: '#fff',
-              border: 0,
-              '& .MuiChip-root': {
-                borderColor: '#aaa',
-              },
-              '& .MuiListItem-root, & .MuiChip-label': {
-                color: '#aaa',
-              },
-              '& .MuiListItem-root:hover': {
-                backgroundColor: '#363434',
-              },
-            },
-          ]}
-          variant="outlined">
-          {autoClose ? (
-            <ClickAwayListener onClickAway={onClose}>{children}</ClickAwayListener>
-          ) : (
-            <>
-              <IconButton
-                size="small"
-                sx={{ cursor: 'pointer', position: 'absolute', right: 0, top: 0, zIndex: 1 }}
-                onClick={onClose}>
-                <Icon icon={CloseIcon} width={20} height={20} />
-              </IconButton>
-              {children}
-            </>
-          )}
-        </Paper>
-      </StyledPopper>
-    )
-  );
-}
-
-UserPopper.propTypes = {
-  anchorEl: PropTypes.instanceOf(Element),
-  dark: PropTypes.bool,
-  open: PropTypes.bool,
-  children: PropTypes.any.isRequired,
-  onClose: PropTypes.func,
-  autoClose: PropTypes.bool,
-};
-UserPopper.defaultProps = {
-  anchorEl: null,
-  dark: false,
-  open: false,
-  onClose: () => {},
-  autoClose: true,
-};
-
-const StyledPopper = styled(Popper)`
-  z-index: ${({ theme }) => {
-    return theme.zIndex.tooltip;
-  }};
-
-  .session-manager-menu-item {
-    padding: 15px;
-    color: #777;
-    font-size: 16px;
-    &:hover {
-      background-color: #fbfbfb;
-    }
-  }
-  .session-manager-menu-icon {
-    color: #999;
-    margin-right: 8px;
-  }
-`;

package/src/SessionManager/hooks/use-config.js

@@ -1,33 +0,0 @@
-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/libs/translation.js

@@ -1,52 +0,0 @@
-/* eslint-disable import/prefer-default-export */
-export const translations = {
-  en: {
-    switch: 'Switch',
-    account: 'account',
-    switchDid: 'Switch DID',
-    switchTo: 'Switch to',
-    switchProfile: 'Switch Profile',
-    switchPassport: 'Switch Passport',
-    disconnect: 'Disconnect',
-    connect: 'Connect',
-    openInWallet: 'Open DID Wallet',
-    alreadyBindOAuth: 'Already bind Auth0',
-    bind: 'Bind ',
-    thirdParty: 'Third Party Login',
-    addAppAccount: 'Add {appName} account',
-    accounts: 'Accounts',
-    blocklet: 'Blocklet',
-    from: 'From',
-    addAnotherAccount: 'Add another account',
-    deleteAccountTitle: 'Remove this account ?',
-    deleteAccountContent: 'After delete account, you can add it again',
-    confirm: 'Confirm',
-    cancel: 'Cancel',
-    noneMenu: 'Empty menu, maybe you should switch to another role',
-  },
-  zh: {
-    switch: '切换',
-    account: '账号',
-    switchDid: '切换账户',
-    switchTo: '切换至',
-    switchProfile: '切换用户信息',
-    switchPassport: '切换通行证',
-    disconnect: '退出登录',
-    connect: '登录',
-    openInWallet: '打开 DID 钱包',
-    // NOTE: 目前只有 Auth0，展示出具体的第三方名字会更好
-    alreadyBindOAuth: '已绑定 Auth0 账号',
-    bind: '绑定',
-    thirdParty: '第三方登录',
-    addAppAccount: '添加 {appName} 账户',
-    accounts: '账户',
-    blocklet: '应用',
-    from: '连接至',
-    addAnotherAccount: '添加账号',
-    deleteAccountTitle: '是否删除账户？',
-    deleteAccountContent: '账户删除后，可再次添加',
-    confirm: '确认',
-    cancel: '取消',
-    noneMenu: '无操作项，请尝试切换角色',
-  },
-};