@arcblock/ux 2.9.90 → 2.10.0

package/es/SessionUser/components/logged-in.js

@@ -1,229 +0,0 @@
-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';
-import { jsx as _jsx } from "react/jsx-runtime";
-import { Fragment as _Fragment } from "react/jsx-runtime";
-import { jsxs as _jsxs } from "react/jsx-runtime";
-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 /*#__PURE__*/_jsxs(_Fragment, {
-    children: [/*#__PURE__*/_jsx(IconButton, {
-      ref: popperAnchorRef,
-      onClick: () => onTogglePopper(),
-      size: "medium",
-      "data-cy": "sessionManager-logout-popup",
-      "aria-label": "User info button",
-      children: /*#__PURE__*/_jsx(DidAvatar, {
-        variant: "circle",
-        did: session.user.did,
-        src: avatar,
-        size: size,
-        shape: "circle"
-      })
-    }), /*#__PURE__*/_jsx(Popper, {
-      open: currentState.open,
-      onClose: () => onTogglePopper(false),
-      anchorEl: popperAnchorRef.current,
-      dark: dark,
-      transition: true,
-      placement: "bottom-end",
-      sx: {
-        zIndex: 1600
-      },
-      children: ({
-        TransitionProps
-      }) => /*#__PURE__*/_jsx(ClickAwayListener, {
-        onClickAway: e => {
-          e.preventDefault();
-          e.stopPropagation();
-          onTogglePopper(false);
-        },
-        children: /*#__PURE__*/_jsx(Fade, {
-          ...TransitionProps,
-          timeout: 350,
-          children: /*#__PURE__*/_jsxs(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}`
-            },
-            children: [/*#__PURE__*/_jsx(UserInfo, {
-              locale: locale,
-              isBlocklet: isBlocklet,
-              session: session,
-              onSwitchPassport: handleSwitchPassport,
-              onSwitchAccount: handleSwitchAccount,
-              onSwitchProfile: handleSwitchProfile,
-              onBindWallet: handleBindWallet
-            }), /*#__PURE__*/_jsx(Divider, {
-              sx: {
-                m: '0!important',
-                borderColor: colors.strokeSep
-              }
-            }), /*#__PURE__*/_jsxs(MenuList, {
-              sx: {
-                p: 0
-              },
-              children: [isBlocklet ? /*#__PURE__*/_jsxs(_Fragment, {
-                children: [/*#__PURE__*/_jsx(SessionPermission, {
-                  session: session,
-                  children: /*#__PURE__*/_jsx(SessionMenuItem, {
-                    icon: FilterVintageOutlineRoundedIcon,
-                    title: t('dashboard'),
-                    component: "a",
-                    href: DASHBOARD_URL,
-                    sx: {
-                      display: 'block',
-                      textDecoration: 'none',
-                      color: 'inherit'
-                    }
-                  })
-                }), /*#__PURE__*/_jsx(SessionMenuItem, {
-                  icon: PersonOutlineRoundedIcon,
-                  title: t('profile'),
-                  component: "a",
-                  href: PROFILE_URL,
-                  sx: {
-                    display: 'block',
-                    textDecoration: 'none',
-                    color: 'inherit'
-                  }
-                }), /*#__PURE__*/_jsx(Divider, {
-                  sx: {
-                    m: '0!important',
-                    borderColor: colors.strokeSep
-                  }
-                })]
-              }) : null, /*#__PURE__*/_jsx(SessionMenuItem, {
-                icon: AccountCircleOffOutlineRoundedIcon,
-                title: t('logout'),
-                sx: {
-                  color: 'error.main'
-                },
-                onClick: onLogout,
-                "data-cy": "sessionManager-logout-trigger"
-              })]
-            })]
-          })
-        })
-      })
-    })]
-  });
-}
-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 /*#__PURE__*/_jsx(Box, {
-    ...rest,
-    sx: {
-      p: 0.5,
-      ...rest?.sx
-    },
-    children: /*#__PURE__*/_jsxs(MenuItem, {
-      sx: {
-        display: 'flex',
-        gap: 1,
-        alignItems: 'center',
-        borderRadius: 2,
-        '&:hover': {
-          backgroundColor: `${colors.surfacePrimarySubtitle} !important`
-        },
-        py: 1
-      },
-      children: [/*#__PURE__*/_jsx(Icon, {
-        icon: icon,
-        fontSize: 24
-      }), title]
-    })
-  });
-}
-SessionMenuItem.propTypes = {
-  icon: PropTypes.any.isRequired,
-  title: PropTypes.string.isRequired
-};

package/es/SessionUser/components/session-user-item.js

@@ -1,102 +0,0 @@
-import PropTypes from 'prop-types';
-import { forwardRef } from 'react';
-import { Box, IconButton, Tooltip, Typography } 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 { temp as colors } from '../../Colors';
-import { getSourceProvider } from '../libs/utils';
-import { jsx as _jsx } from "react/jsx-runtime";
-import { jsxs as _jsxs } from "react/jsx-runtime";
-const SessionUserItem = /*#__PURE__*/forwardRef(({
-  sessionItem,
-  statusContent,
-  active,
-  ...rest
-}, ref) => {
-  const isRawWalletAccount = getSourceProvider(sessionItem?.user) === 'wallet';
-  return /*#__PURE__*/_jsxs(Box, {
-    ...rest,
-    ref: ref,
-    sx: {
-      display: 'flex',
-      alignItems: 'center',
-      justifyContent: 'space-between',
-      py: 0.75,
-      px: 1,
-      width: '100%',
-      ...rest?.sx
-    },
-    children: [/*#__PURE__*/_jsxs(Box, {
-      sx: {
-        display: 'flex',
-        alignItems: 'center',
-        gap: 0.5,
-        overflow: 'hidden',
-        '& .did-address-avatar': {
-          display: 'none !important'
-        },
-        '& .did-address-text': {
-          color: `${colors.textBase} !important`
-        }
-      },
-      children: [/*#__PURE__*/_jsx(Box, {
-        sx: {
-          mr: 0.5,
-          fontSize: 0
-        },
-        children: /*#__PURE__*/_jsx(Avatar, {
-          did: sessionItem.userDid,
-          size: 36
-        })
-      }), /*#__PURE__*/_jsx(WalletOSIcon, {
-        loading: sessionItem.__isDefault,
-        provider: sessionItem?.extra?.provider,
-        walletOS: sessionItem?.extra?.walletOS
-      }), isRawWalletAccount ? /*#__PURE__*/_jsx(DID, {
-        did: sessionItem.userDid,
-        copyable: false,
-        size: 14,
-        responsive: false,
-        compact: true,
-        sx: {
-          lineHeight: 1
-        }
-      }) : sessionItem.user.email && /*#__PURE__*/_jsx(Tooltip, {
-        title: sessionItem.user.email,
-        sx: {
-          zIndex: 1600
-        },
-        placement: "top",
-        children: /*#__PURE__*/_jsx(Typography, {
-          sx: {
-            fontSize: 14,
-            overflow: 'hidden',
-            textOverflow: 'ellipsis'
-          },
-          children: sessionItem.user.email
-        })
-      })]
-    }), statusContent || active && /*#__PURE__*/_jsx(IconButton, {
-      size: "small",
-      disableRipple: true,
-      children: /*#__PURE__*/_jsx(Icon, {
-        icon: LensIcon,
-        fontSize: 6,
-        color: colors.surfaceSuccess
-      })
-    })]
-  });
-});
-SessionUserItem.propTypes = {
-  sessionItem: PropTypes.object.isRequired,
-  statusContent: PropTypes.node,
-  active: PropTypes.bool
-};
-SessionUserItem.defaultProps = {
-  statusContent: null,
-  active: false
-};
-export default SessionUserItem;

package/es/SessionUser/components/session-user-switch.js

@@ -1,223 +0,0 @@
-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';
-import { jsx as _jsx } from "react/jsx-runtime";
-import { jsxs as _jsxs } from "react/jsx-runtime";
-import { Fragment as _Fragment } from "react/jsx-runtime";
-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 {
-      __isDefault: true,
-      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 /*#__PURE__*/_jsx(SessionUserItem, {
-      sessionItem: currentSession,
-      statusContent: /*#__PURE__*/_jsx(Icon, {
-        icon: SwapHorizRoundedIcon,
-        color: colors.textMuted
-      }),
-      sx: {
-        borderRadius: 2,
-        cursor: 'pointer',
-        py: 1.25,
-        px: 1.5
-      },
-      "data-cy": "sessionManager-switch-trigger",
-      onClick: handleAddAccount,
-      ref: popperAnchorRef
-    });
-  }
-  return /*#__PURE__*/_jsxs(_Fragment, {
-    children: [/*#__PURE__*/_jsx(SessionUserItem, {
-      sessionItem: currentSession,
-      statusContent: /*#__PURE__*/_jsx(Box, {
-        component: Icon,
-        icon: ExpandMoreRoundedIcon,
-        className: "session-user-switch-icon",
-        sx: {
-          transform: 'scale(1.5) rotate(-90deg)',
-          transition: 'transform 0.2s ease'
-        }
-      }),
-      sx: {
-        borderRadius: 2,
-        cursor: 'pointer',
-        py: 1.25,
-        px: 2,
-        '&:hover': {
-          backgroundColor: `${colors.surfacePrimarySubtitle} !important`,
-          '.session-user-switch-icon': {
-            transform: 'scale(1.5)'
-          }
-        }
-      },
-      onClick: () => onTogglePopper(),
-      ref: popperAnchorRef
-    }), /*#__PURE__*/_jsx(Popper, {
-      open: currentState.open,
-      onClose: () => onTogglePopper(false),
-      anchorEl: popperAnchorRef.current,
-      transition: true,
-      sx: {
-        zIndex: 1600
-      },
-      children: ({
-        TransitionProps
-      }) => /*#__PURE__*/_jsx(ClickAwayListener, {
-        onClickAway: e => {
-          e.preventDefault();
-          e.stopPropagation();
-          onTogglePopper(false);
-        },
-        children: /*#__PURE__*/_jsx(Fade, {
-          ...TransitionProps,
-          timeout: 350,
-          children: /*#__PURE__*/_jsx(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}`
-            },
-            children: /*#__PURE__*/_jsxs(MenuList, {
-              sx: {
-                p: 0.5
-              },
-              children: [currentState.userSessions.map(userSessionItem => {
-                const isLoading = currentState.loadingSessionId === userSessionItem.id;
-                const isActive = userSessionItem.id === currentSession.id;
-                return /*#__PURE__*/_jsxs(MenuItem, {
-                  sx: {
-                    position: 'relative',
-                    p: 0,
-                    '&:hover': {
-                      backgroundColor: `${colors.surfacePrimarySubtitle} !important`
-                    }
-                  },
-                  onClick: () => {
-                    if (!isActive) {
-                      handleSwitch(userSessionItem);
-                    }
-                  },
-                  children: [isLoading && /*#__PURE__*/_jsx(LinearProgress, {
-                    sx: {
-                      height: '2px',
-                      position: 'absolute',
-                      top: 0,
-                      left: 0,
-                      right: 0
-                    }
-                  }), /*#__PURE__*/_jsx(SessionUserItem, {
-                    sessionItem: userSessionItem,
-                    active: isActive
-                  })]
-                }, userSessionItem.id);
-              }), currentState.userSessions.length > 0 ? /*#__PURE__*/_jsx(Divider, {
-                sx: {
-                  m: '0!important',
-                  borderColor: colors.lineStep
-                }
-              }) : null, /*#__PURE__*/_jsxs(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",
-                children: [/*#__PURE__*/_jsx(Box, {
-                  component: Icon,
-                  icon: AddCircleOutlineRoundedIcon,
-                  fontSize: 20,
-                  sx: {
-                    mr: 0.5
-                  }
-                }), t('addAnotherAccount')]
-              })]
-            })
-          })
-        })
-      })
-    })]
-  });
-}
-SessionUserSwitch.propTypes = {
-  session: PropTypes.object.isRequired,
-  onSwitch: PropTypes.func.isRequired,
-  isBlocklet: PropTypes.bool,
-  locale: PropTypes.string
-};
-SessionUserSwitch.defaultProps = {
-  isBlocklet: true,
-  locale: 'en'
-};

package/es/SessionUser/components/un-login.js

@@ -1,64 +0,0 @@
-import PropTypes from 'prop-types';
-import { Box, CircularProgress, IconButton } from '@mui/material';
-import { Icon } from '@iconify/react';
-import PersonOutlineRoundedIcon from 'iconify-icons-material-symbols-400/person-outline-rounded';
-import { useRef } from 'react';
-import { useMemoizedFn } from 'ahooks';
-import noop from 'lodash/noop';
-import { jsx as _jsx } from "react/jsx-runtime";
-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 /*#__PURE__*/_jsx(Box, {
-    children: /*#__PURE__*/_jsx(IconButton, {
-      ref: userAnchorRef,
-      onClick: _onLogin,
-      "data-cy": "sessionManager-login",
-      size: "medium",
-      "aria-label": "Login button",
-      children: isFirstLoading ? /*#__PURE__*/_jsx(Box, {
-        width: size,
-        height: size,
-        display: "flex",
-        justifyContent: "center",
-        alignItems: "center",
-        children: /*#__PURE__*/_jsx(CircularProgress, {
-          style: {
-            width: size - 4,
-            height: size - 4,
-            color: dark ? '#fff' : ''
-          }
-        })
-      }) : /*#__PURE__*/_jsx(Icon, {
-        icon: PersonOutlineRoundedIcon,
-        fontSize: size,
-        color: dark ? '#fff' : 'inherit',
-        style: {
-          transform: 'scale(1.25)'
-        }
-      })
-    })
-  });
-}
-UnLogin.propTypes = {
-  session: PropTypes.object.isRequired,
-  onLogin: PropTypes.func,
-  size: PropTypes.number,
-  dark: PropTypes.bool
-};
-UnLogin.defaultProps = {
-  onLogin: noop,
-  size: 24,
-  dark: false
-};