@arcblock/ux 2.7.15 → 2.7.17

package/src/SessionManager/manage-accounts.jsx

@@ -0,0 +1,157 @@
+/* eslint-disable react/prop-types */
+/* eslint-disable react/jsx-no-bind */
+import { useMemoizedFn, useUpdate } from 'ahooks';
+import { 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 AccountItem from './account-item';
+import MenuAccordion from './menu-accordion';
+import { translations } from './translation';
+import { translate } from '../Locale/util';
+import { useConfirm } from '../Dialog/confirm';
+import { getSourceProvider } from './utils';
+import AddAccountItem from './add-account-item';
+import useConfig from './use-config';
+
+export default function ManageAccounts({
+  session,
+  locale,
+  onBindWallet,
+  onSwitchDid,
+  connectAccount,
+  close,
+  hasBindAccount,
+  disableLogout,
+  onLogout,
+  expanded,
+  onExpand,
+}) {
+  const { bindOAuth, configs: oauthConfigs } = session.useOAuth();
+  const t = useMemoizedFn((key, data = {}) => {
+    return translate(translations, key, locale, 'en', data);
+  });
+
+  const { confirmApi, confirmHolder } = useConfirm();
+  const { deleteAccount, config } = useConfig();
+  const update = useUpdate();
+
+  const onChoose = useMemoizedFn((account, { active }) => {
+    if (active) {
+      return;
+    }
+    close();
+    session.switchDid(
+      (...args) => {
+        connectAccount();
+        onSwitchDid(...args);
+      },
+      {
+        provider: account.provider,
+        sourceAppPid: account.sourceAppPid,
+      }
+    );
+  });
+
+  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,
+      }
+    );
+  });
+
+  function _onBindWallet() {
+    close();
+    // FIXME: @zhanghan 暂时切换回 isRawWalletAccount 的方式来判断，在 did-connect 改版时，简化这里的关系判断
+    if (!isRawWalletAccount) {
+      session.bindWallet(onBindWallet);
+    } else {
+      bindOAuth();
+    }
+  }
+
+  return (
+    <>
+      <MenuAccordion
+        expanded={expanded}
+        onChange={onExpand}
+        locale={locale}
+        title={
+          <>
+            <AccountIcon className="session-manager-menu-icon" style={{ width: 24, height: 24 }} />
+            {t('accounts')}
+          </>
+        }>
+        {config.accounts.map((item) => (
+          <AccountItem
+            key={item.did}
+            account={item}
+            locale={locale}
+            active={session.user.did === item.did}
+            onDelete={onDelete}
+            onChoose={onChoose}
+          />
+        ))}
+        <AddAccountItem 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>
+        )}
+
+        <MenuItem
+          className="session-manager-menu-item"
+          onClick={onLogout}
+          disabled={disableLogout}
+          aria-label="Logout account"
+          data-cy="sessionManager-logout-trigger">
+          <SvgIcon component={DisconnectIcon} className="session-manager-menu-icon" />
+          {t('disconnect')}
+        </MenuItem>
+      </MenuAccordion>
+      {confirmHolder}
+    </>
+  );
+}

package/src/SessionManager/manage-blocklet.jsx

@@ -0,0 +1,70 @@
+/* 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 './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/menu-accordion.jsx

@@ -0,0 +1,94 @@
+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 './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,
+          paddingLeft: '30px',
+          '.session-manager-menu-item': {
+            fontSize: '15px',
+            padding: '12px 15px',
+            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/translation.js

@@ -0,0 +1,52 @@
+/* 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 agian',
+    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: '无操作项，请尝试切换角色',
+  },
+};

package/src/SessionManager/use-config.js

@@ -0,0 +1,33 @@
+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/user-info.jsx

@@ -0,0 +1,116 @@
+/* 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 './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(' ')));
+  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 || 'lancelot_lewis@163.com', [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 (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' }}>
+        <Box display="flex" alignItems="center" gap="4px" mb={0.5}>
+          <Typography variant="h5" fontWeight="bold" fontSize="auto" sx={{ flex: 1, wordBreak: 'break-all' }}>
+            {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',
+            }}
+            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"
+          />
+        </Box>
+        {/* 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/user-popper.jsx

@@ -1,6 +1,7 @@
 import PropTypes from 'prop-types';
 import { IconButton, Paper, Popper, ClickAwayListener } from '@mui/material';
-import { Close as CloseIcon } from '@mui/icons-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 }) {
@@ -43,7 +44,7 @@ export default function UserPopper({ anchorEl, dark, children, open, onClose, au
                 size="small"
                 sx={{ cursor: 'pointer', position: 'absolute', right: 0, top: 0, zIndex: 1 }}
                 onClick={onClose}>
-                <CloseIcon />
+                <Icon icon={CloseIcon} width={20} height={20} />
               </IconButton>
               {children}
             </>
@@ -75,56 +76,10 @@ const StyledPopper = styled(Popper)`
     return theme.zIndex.tooltip;
   }};
   .MuiList-root {
-    /* HACK: 需要288px 才能将 did 展示完整 */
-    width: 290px;
-  }
-  .session-manager-user {
-    font-size: 12px;
-    flex-direction: column;
-    align-items: flex-start;
-    padding: 24px 24px 10px;
-  }
-  .session-manager-user-name {
-    font-size: 20px;
-    color: ${({ $dark }) => ($dark ? '#aaa' : '#222')};
-    font-weight: bold;
-    margin-bottom: 10px;
-    display: flex;
-    align-items: center;
-    justify-content: space-between;
-  }
-  .session-manager-id-item {
-    position: relative;
-    padding-left: 8px;
-    /* HACK: 当前元素既是第一个，也是最后一个，即只有一个同级元素 */
-    &:first-of-type:last-of-type {
-      padding-left: 0;
-      &:before,
-      &:after {
-        content: unset;
-      }
-    }
-    &:before {
-      position: absolute;
-      content: '';
-      left: 0px;
-      top: 50%;
-      width: 6px;
-      height: 1px;
-      background-color: #aeaeae;
-    }
-    &:not(:last-of-type):after {
-      position: absolute;
-      content: '';
-      left: 0px;
-      top: 50%;
-      height: 100%;
-      width: 1px;
-      background-color: #aeaeae;
-    }
+    width: 320px;
   }
   .session-manager-menu-item {
-    padding: 18.5px 24px;
+    padding: 15px;
     color: #777;
     font-size: 16px;
     &:hover {
@@ -133,6 +88,6 @@ const StyledPopper = styled(Popper)`
   }
   .session-manager-menu-icon {
     color: #999;
-    margin-right: 16px;
+    margin-right: 8px;
   }
 `;

package/src/SessionManager/utils.js

@@ -0,0 +1,3 @@
+export const getSourceProvider = (user) => user?.sourceProvider || user?.extraConfigs?.sourceProvider || 'wallet';
+
+export const getConnectedAccounts = (user) => user?.connectedAccounts || user?.extraConfigs?.connectedAccounts || [];

package/src/Typography/index.jsx

@@ -0,0 +1,79 @@
+import PropTyps from 'prop-types';
+import { Box, Typography as MuiTypography, Skeleton } from '@mui/material';
+import { useReactive, useSize } from 'ahooks';
+import { useEffect, useRef } from 'react';
+
+export default function Typography({ minFontSize, fontSize, children, sx, ...rest }) {
+  const refMock = useRef(null);
+  const refContainer = useRef(null);
+  const state = useReactive({
+    fontSize,
+    loading: true,
+    initialSize: undefined,
+  });
+  const mockSize = useSize(refMock.current);
+  const containerSize = useSize(refContainer.current);
+  useEffect(() => {
+    if (state.loading) {
+      if (fontSize === 'auto') {
+        if (mockSize && !state.initialSize) {
+          const styleSize = getComputedStyle(refMock.current).fontSize;
+          state.initialSize = Number(styleSize.replace('px', ''));
+          state.fontSize = state.initialSize;
+        }
+        if (containerSize && mockSize) {
+          if (containerSize.width < mockSize.width && state.fontSize > minFontSize) {
+            state.fontSize--;
+          } else {
+            state.loading = false;
+          }
+        }
+      } else {
+        state.loading = false;
+      }
+    }
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [fontSize, mockSize?.width, containerSize?.width]);
+
+  return state.loading ? (
+    <Box ref={refContainer} flex={1}>
+      <MuiTypography {...rest} sx={sx} noWrap>
+        <Skeleton variant="text" sx={{ fontSize: '1rem' }} />
+      </MuiTypography>
+      <MuiTypography
+        ref={refMock}
+        {...rest}
+        sx={{
+          ...sx,
+          fontSize: `${state.fontSize}px !important`,
+          position: 'fixed',
+          top: -1000,
+          left: -1000,
+        }}
+        noWrap>
+        {children}
+      </MuiTypography>
+    </Box>
+  ) : (
+    <MuiTypography
+      {...rest}
+      sx={{
+        ...sx,
+        fontSize: `${state.fontSize}px !important`,
+      }}>
+      {children}
+    </MuiTypography>
+  );
+}
+
+Typography.propTypes = {
+  fontSize: PropTyps.oneOfType([PropTyps.string, PropTyps.number]),
+  children: PropTyps.any.isRequired,
+  minFontSize: PropTyps.number,
+  sx: PropTyps.object,
+};
+Typography.defaultProps = {
+  fontSize: undefined,
+  minFontSize: 12,
+  sx: {},
+};