@arcblock/ux 2.8.25 → 2.9.0

package/src/SessionManager/components/federated-login-detecter.jsx

@@ -1,167 +0,0 @@
-import PropTypes from 'prop-types';
-import { useCallback } from 'react';
-import Box from '@mui/material/Box';
-import Chip from '@mui/material/Chip';
-import Divider from '@mui/material/Divider';
-import ShieldCheckIcon from '@iconify-icons/mdi/shield-check';
-import { Icon } from '@iconify/react';
-import { useCreation, useReactive } from 'ahooks';
-
-import UserPopper from './user-popper';
-import DidAvatar from '../../Avatar';
-import DidAddress from '../../Address';
-import Button from '../../Button';
-import Toast from '../../Toast';
-import { getUserAvatar } from '../../Util';
-
-const translations = {
-  en: {
-    useToConnect({ master, member }) {
-      return (
-        <>
-          Connect {member} with {master} account
-        </>
-      );
-    },
-    connect: 'Connect Account',
-    loginFederatedFailed: 'Login federated account failed',
-  },
-  zh: {
-    useToConnect({ master, member }) {
-      return (
-        <>
-          使用 {master} 账号连接 {member}
-        </>
-      );
-    },
-    connect: '连接账号',
-    loginFederatedFailed: '登录统一登录账号失败',
-  },
-};
-
-export default function FederatedLoginDetecter({ session, anchorEl, dark, locale: _locale }) {
-  const state = useReactive({
-    open: true,
-  });
-
-  const federatedMaster = useCreation(() => {
-    return session.federatedMaster;
-  }, [session?.federatedMaster]);
-
-  const localeList = Object.keys(translations);
-  const locale = localeList.includes(_locale) ? _locale : localeList[0];
-
-  const onLoginFederated = useCallback(() => {
-    session?.login(
-      (err) => {
-        if (err) {
-          Toast.error(err || translations[_locale].loginFederatedFailed);
-        } else {
-          state.open = false;
-        }
-      },
-      {
-        sourceAppPid: federatedMaster?.site?.appPid,
-        mode: federatedMaster?.user ? 'auto' : 'manual',
-      }
-    );
-  }, [session, federatedMaster?.site?.appPid, federatedMaster?.user, _locale, state]);
-
-  let appLogoUrl;
-  if (federatedMaster?.site) {
-    appLogoUrl = new URL(federatedMaster.site.appLogo, federatedMaster.site.appUrl);
-    appLogoUrl.searchParams.set('imageFilter', 'resize');
-    // HACK: 保持跟其他地方使用的尺寸一致，可以复用同一资源的缓存，减少网络请求
-    appLogoUrl.searchParams.set('w', '80');
-    appLogoUrl.searchParams.set('h', '80');
-  }
-
-  return (
-    federatedMaster?.site && (
-      <UserPopper
-        open={state.open}
-        anchorEl={anchorEl}
-        dark={dark}
-        autoClose={false}
-        onClose={() => {
-          state.open = false;
-        }}>
-        <Box p={2}>
-          {federatedMaster.site && (
-            <Box display="flex" alignItems="center">
-              <Box
-                component="img"
-                mr={2}
-                src={appLogoUrl.href}
-                alt={federatedMaster.site.appName}
-                width="30px"
-                height="30px"
-              />
-              <Box sx={{ maxWidth: '260px' }}>
-                {translations[locale].useToConnect({
-                  master: (
-                    <Box
-                      component="a"
-                      href={federatedMaster.site.appUrl}
-                      target="_blank"
-                      sx={{ textDecoration: 'none', fontWeight: 'bold', color: 'primary.main', fontSize: '1.2em' }}>
-                      {federatedMaster.site.appName}
-                    </Box>
-                  ),
-                  member: window.blocklet.appName,
-                })}
-              </Box>
-            </Box>
-          )}
-          {federatedMaster?.site && federatedMaster?.user && <Divider style={{ margin: '15px 0 10px 0' }} />}
-          {federatedMaster?.user && (
-            <Box display="flex" alignItems="center">
-              <DidAvatar
-                variant="circle"
-                did={federatedMaster.user.did}
-                src={getUserAvatar(federatedMaster.user.avatar)}
-                size={28}
-                shape="circle"
-              />
-              <Box ml={2}>
-                <Box display="flex" justifyContent="space-between" alignItems="center">
-                  <Box fontSize={18}>{federatedMaster.user.fullName}</Box>
-                  {federatedMaster.user.role?.toUpperCase() && (
-                    <Chip
-                      label={federatedMaster.user.role?.toUpperCase()}
-                      size="small"
-                      variant="outlined"
-                      sx={{ height: 'auto', marginRight: 0, fontSize: 12 }}
-                      icon={<Icon icon={ShieldCheckIcon} fontSize={14} />}
-                    />
-                  )}
-                </Box>
-                <DidAddress responsive={false}>{federatedMaster.user.did}</DidAddress>
-              </Box>
-            </Box>
-          )}
-          {federatedMaster?.site && (
-            <Box display="flex" justifyContent="center" mt={2}>
-              <Button variant="contained" size="small" onClick={onLoginFederated}>
-                {translations[locale].connect}
-              </Button>
-            </Box>
-          )}
-        </Box>
-      </UserPopper>
-    )
-  );
-}
-
-FederatedLoginDetecter.propTypes = {
-  session: PropTypes.object.isRequired,
-  anchorEl: PropTypes.instanceOf(Element),
-  dark: PropTypes.bool,
-  locale: PropTypes.string,
-};
-
-FederatedLoginDetecter.defaultProps = {
-  dark: false,
-  anchorEl: null,
-  locale: 'en',
-};

package/src/SessionManager/components/manage-accounts.jsx

@@ -1,228 +0,0 @@
-/* eslint-disable react/jsx-no-bind */
-import PropTypes from 'prop-types';
-import { useMemoizedFn, useReactive, useUpdate } from 'ahooks';
-import { LinearProgress, MenuItem, SvgIcon } from '@mui/material';
-import { Icon } from '@iconify/react';
-import AccountIcon from '@arcblock/icons/lib/Account';
-import LinkIcon from '@iconify-icons/mdi/link';
-import DisconnectIcon from '@arcblock/icons/lib/Disconnect';
-import noop from 'lodash/noop';
-
-import AccountItem from './account-item';
-import MenuAccordion from './menu-accordion';
-import { translations } from '../libs/translation';
-import { translate } from '../../Locale/util';
-import { useConfirm } from '../../Dialog/confirm';
-import { getSourceProvider } from '../libs/utils';
-import AddAccountItem from './add-account-item';
-
-export default function ManageAccounts({
-  session,
-  locale,
-  onBindWallet,
-  onSwitchDid,
-  connectAccount,
-  close,
-  hasBindAccount,
-  disableLogout,
-  onLogout,
-  expanded,
-  onExpand,
-  accounts,
-  deleteAccount,
-  hideLogout,
-}) {
-  const { bindOAuth, configs: oauthConfigs } = session.useOAuth();
-  const t = useMemoizedFn((key, data = {}) => {
-    return translate(translations, key, locale, 'en', data);
-  });
-
-  const { confirmApi, confirmHolder } = useConfirm();
-  const update = useUpdate();
-  const pageState = useReactive({
-    logoutLoading: false,
-  });
-
-  const onChoose = useMemoizedFn((account, { active }) => {
-    if (active) {
-      return;
-    }
-    close();
-    if (account.provider === 'auth0') {
-      // 如果切换的目标是 auth0，则直接打开 auth0 登录页面
-      session.switchDid(
-        (...args) => {
-          connectAccount();
-          onSwitchDid(...args);
-        },
-        {
-          allowWallet: false,
-          sourceAppPid: account.sourceAppPid,
-        }
-      );
-      return;
-    }
-    const options = {
-      provider: account.provider,
-      sourceAppPid: account.sourceAppPid,
-    };
-    if (account.did) {
-      options.forceConnected = account.did;
-    }
-    session.switchDid((...args) => {
-      connectAccount();
-      onSwitchDid(...args);
-    }, options);
-  });
-
-  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) {
-        deleteAccount(account);
-
-        update();
-        done();
-      },
-    });
-  });
-
-  const onAdd = useMemoizedFn((app) => {
-    close();
-    session.switchDid(
-      (...args) => {
-        connectAccount();
-        update();
-        onSwitchDid(...args);
-      },
-      {
-        sourceAppPid: app.sourceAppPid,
-        provider: app.provider,
-      }
-    );
-  });
-
-  const _onLogout = useMemoizedFn(async (...args) => {
-    pageState.logoutLoading = true;
-    try {
-      await onLogout(...args);
-    } finally {
-      pageState.logoutLoading = true;
-    }
-  });
-
-  function _onBindWallet() {
-    close();
-    // FIXME: @zhanghan 暂时切换回 isRawWalletAccount 的方式来判断，在 did-connect 改版时，简化这里的关系判断
-    if (!isRawWalletAccount) {
-      session.bindWallet(onBindWallet);
-    } else {
-      bindOAuth({ session });
-    }
-  }
-
-  return (
-    <>
-      <MenuAccordion
-        expanded={expanded}
-        onChange={onExpand}
-        locale={locale}
-        title={
-          <>
-            <AccountIcon className="session-manager-menu-icon" style={{ width: 24, height: 24 }} />
-            {t('accounts')}
-          </>
-        }>
-        {accounts.map((item) => (
-          <AccountItem
-            key={item.did}
-            account={item}
-            locale={locale}
-            active={session.user.did === item.did}
-            onDelete={onDelete}
-            onChoose={onChoose}
-          />
-        ))}
-        <AddAccountItem session={session} locale={locale} onAdd={onAdd} />
-
-        {oauthConfigList.length > 0 && !hasBindAccount && (
-          <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>
-        )}
-
-        {!hideLogout ? (
-          <MenuItem
-            className="session-manager-menu-item"
-            onClick={_onLogout}
-            disabled={disableLogout}
-            aria-label="Logout account"
-            sx={{
-              position: 'relative',
-            }}
-            data-cy="sessionManager-logout-trigger">
-            {pageState.logoutLoading ? (
-              <LinearProgress
-                sx={{
-                  height: '2px',
-                  position: 'absolute',
-                  top: 0,
-                  left: 0,
-                  right: 0,
-                }}
-              />
-            ) : null}
-            <SvgIcon component={DisconnectIcon} className="session-manager-menu-icon" />
-            {t('disconnect')}
-          </MenuItem>
-        ) : null}
-      </MenuAccordion>
-      {confirmHolder}
-    </>
-  );
-}
-
-ManageAccounts.propTypes = {
-  session: PropTypes.object.isRequired,
-  locale: PropTypes.string,
-  onBindWallet: PropTypes.func.isRequired,
-  onSwitchDid: PropTypes.func.isRequired,
-  connectAccount: PropTypes.func.isRequired,
-  close: PropTypes.func.isRequired,
-  hasBindAccount: PropTypes.bool,
-  disableLogout: PropTypes.bool,
-  onLogout: PropTypes.func.isRequired,
-  expanded: PropTypes.bool,
-  onExpand: PropTypes.func,
-  accounts: PropTypes.array.isRequired,
-  deleteAccount: PropTypes.func.isRequired,
-  hideLogout: PropTypes.bool,
-};
-
-ManageAccounts.defaultProps = {
-  locale: 'en',
-  hasBindAccount: false,
-  disableLogout: false,
-  expanded: true,
-  onExpand: noop,
-  hideLogout: false,
-};

package/src/SessionManager/components/manage-blocklet.jsx

@@ -1,70 +0,0 @@
-/* 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 '../libs/translation';
-
-export default function ManageBlocklet({ menu, menuRender, locale, expanded, onExpand }) {
-  const t = useMemoizedFn((key, data = {}) => {
-    return translate(translations, key, locale, 'en', data);
-  });
-
-  return (
-    <MenuAccordion
-      expanded={expanded}
-      locale={locale}
-      onChange={onExpand}
-      title={
-        <>
-          <Icon icon={AppsIcon} width={24} height={24} className="session-manager-menu-icon" />
-          {t('blocklet')}
-        </>
-      }>
-      {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,
-  expanded: PropTypes.bool,
-  onExpand: PropTypes.func,
-};
-
-ManageBlocklet.defaultProps = {
-  menu: [],
-  menuRender: () => {},
-  expanded: true,
-  onExpand: () => {},
-};

package/src/SessionManager/components/menu-accordion.jsx

@@ -1,93 +0,0 @@
-import PropTypes from 'prop-types';
-import { Accordion, AccordionDetails, AccordionSummary, MenuItem } from '@mui/material';
-import ExpandMoreIcon from '@iconify-icons/mdi/expand-more';
-import { Icon } from '@iconify/react';
-import isEmpty from 'lodash/isEmpty';
-import isNil from 'lodash/isNil';
-import { useCreation, useMemoizedFn } from 'ahooks';
-import { translate } from '../../Locale/util';
-import { translations } from '../libs/translation';
-
-function isEmptyNode(node) {
-  if (isNil(node)) {
-    return true;
-  }
-  if (isEmpty(node)) {
-    return true;
-  }
-  if (Array.isArray(node)) {
-    return node.every((item) => isEmptyNode(item));
-  }
-  return false;
-}
-
-export default function MenuAccordion({ title, children, locale, expanded, onChange }) {
-  const isEmptyChildren = useCreation(() => isEmptyNode(children), [children]);
-  const t = useMemoizedFn((key, data = {}) => {
-    return translate(translations, key, locale, 'en', data);
-  });
-
-  return (
-    <Accordion
-      expanded={expanded}
-      disableGutters
-      elevation={0}
-      onChange={(e, value) => {
-        onChange(value);
-      }}
-      sx={{
-        '&.MuiAccordion-root:before': {
-          content: 'unset',
-        },
-        '.MuiAccordionSummary-root': {
-          minHeight: 'auto',
-          width: '100%',
-        },
-        '.MuiAccordionSummary-content': {
-          margin: 0,
-        },
-        '.MuiAccordionDetails-root': {
-          padding: 0,
-          '.session-manager-menu-item': {
-            fontSize: '15px',
-            padding: '12px 15px 12px 42px',
-            whiteSpace: 'normal',
-          },
-          '.session-manager-menu-icon': {
-            height: '21px',
-            widht: '21px',
-          },
-        },
-      }}>
-      <MenuItem sx={{ padding: 0, width: '100%' }}>
-        <AccordionSummary
-          className="session-manager-menu-item"
-          expandIcon={<Icon icon={ExpandMoreIcon} width={24} height={24} />}>
-          {title}
-        </AccordionSummary>
-      </MenuItem>
-      <AccordionDetails>
-        {isEmptyChildren ? (
-          <MenuItem disabled key="empty" className="session-manager-menu-item" sx={{ justifyContent: 'center' }}>
-            {t('noneMenu')}
-          </MenuItem>
-        ) : (
-          children
-        )}
-      </AccordionDetails>
-    </Accordion>
-  );
-}
-
-MenuAccordion.propTypes = {
-  title: PropTypes.any.isRequired,
-  children: PropTypes.any.isRequired,
-  locale: PropTypes.string,
-  expanded: PropTypes.bool,
-  onChange: PropTypes.func,
-};
-MenuAccordion.defaultProps = {
-  locale: 'en',
-  expanded: true,
-  onChange: () => {},
-};

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

@@ -1,26 +0,0 @@
-import { useCreation, useSize } from 'ahooks';
-
-import UserPopper from './user-popper';
-import UserDrawer from './user-drawer';
-import { useTheme } from '../../Theme';
-
-export default function ResponsivePopper(props) {
-  const theme = useTheme();
-  const size = useSize(document.body);
-  const isMobile = useCreation(() => {
-    if (size?.width <= theme.breakpoints.values.sm) {
-      return true;
-    }
-    return false;
-  }, [theme, size]);
-
-  const WrapContainer = useCreation(() => {
-    if (isMobile) {
-      return UserDrawer;
-    }
-
-    return UserPopper;
-  }, [isMobile]);
-
-  return <WrapContainer {...props} />;
-}

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

@@ -1,57 +0,0 @@
-import PropTypes from 'prop-types';
-import { IconButton, Drawer } from '@mui/material';
-import CloseIcon from '@iconify-icons/mdi/close';
-import { Icon } from '@iconify/react';
-import noop from 'lodash/noop';
-
-export default function UserDrawer({ children, open, onOpen, onClose }) {
-  return (
-    <Drawer
-      anchor="bottom"
-      open={open}
-      onClose={onClose}
-      onOpen={onOpen}
-      sx={(theme) => ({
-        '& .MuiDrawer-paper.MuiPaper-root': {
-          width: '100%',
-          height: '90vh',
-          borderTopLeftRadius: '16px',
-          borderTopRightRadius: '16px',
-        },
-        '& .MuiChip-root .MuiChip-icon': {
-          color: theme.palette.success.main,
-        },
-        '& .session-manager-menu-item': {
-          padding: '15px',
-          color: '#777',
-          fontSize: '16px',
-          '&:hover': {
-            backgroundColor: '#fbfbfb',
-          },
-        },
-        '& .session-manager-menu-icon': {
-          color: '#999',
-          marginRight: '8px',
-        },
-      })}>
-      <IconButton
-        sx={{ cursor: 'pointer', position: 'absolute', right: '8px', top: '8px', zIndex: 1 }}
-        onClick={onClose}>
-        <Icon icon={CloseIcon} width={28} height={28} />
-      </IconButton>
-      {children}
-    </Drawer>
-  );
-}
-
-UserDrawer.propTypes = {
-  children: PropTypes.any.isRequired,
-  open: PropTypes.bool.isRequired,
-  onOpen: PropTypes.func,
-  onClose: PropTypes.func,
-};
-
-UserDrawer.defaultProps = {
-  onOpen: noop,
-  onClose: noop,
-};