@arcblock/ux 2.8.25 → 2.9.0

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

@@ -0,0 +1,148 @@
+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';
+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';
+  const walletIcon = useCreation(() => {
+    const {
+      walletOS,
+      provider
+    } = sessionItem?.extra || {};
+    if (provider === 'auth0') {
+      return /*#__PURE__*/_jsx(Icon, {
+        icon: Auth0Icon,
+        width: 10,
+        height: 10,
+        style: {
+          color: 'black'
+        }
+      });
+    }
+    if (walletOS === 'ios') {
+      return /*#__PURE__*/_jsx(Icon, {
+        icon: IOSRoundedIcon,
+        width: 16,
+        height: 16,
+        style: {
+          color: 'black'
+        }
+      });
+    }
+    if (walletOS === 'android') {
+      return /*#__PURE__*/_jsx(Icon, {
+        icon: AndroidIcon,
+        width: 14,
+        height: 14,
+        style: {
+          color: 'black'
+        }
+      });
+    }
+    if (walletOS === 'web') {
+      return /*#__PURE__*/_jsx(Icon, {
+        icon: LanguageIcon,
+        style: {
+          color: 'black'
+        }
+      });
+    }
+    if (walletOS === 'api') {
+      return /*#__PURE__*/_jsx(Icon, {
+        icon: ApiIcon,
+        width: 14,
+        height: 14,
+        style: {
+          color: 'black'
+        }
+      });
+    }
+    return null;
+  }, [sessionItem?.extra?.walletOS, sessionItem?.extra?.provider]);
+  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,
+        '& .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
+        })
+      }), walletIcon, isRawWalletAccount ? /*#__PURE__*/_jsx(DID, {
+        did: sessionItem.userDid,
+        copyable: false,
+        size: 14,
+        responsive: false,
+        compact: true,
+        sx: {
+          lineHeight: 1
+        }
+      }) : /*#__PURE__*/_jsx(Typography, {
+        sx: {
+          fontSize: 14
+        },
+        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

@@ -0,0 +1,213 @@
+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 {
+      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: {
+        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 /*#__PURE__*/_jsxs(_Fragment, {
+    children: [/*#__PURE__*/_jsx(SessionUserItem, {
+      sessionItem: currentSession,
+      statusContent: /*#__PURE__*/_jsx(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
+    }), /*#__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

@@ -0,0 +1,64 @@
+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';
+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.08)'
+        }
+      })
+    })
+  });
+}
+UnLogin.propTypes = {
+  session: PropTypes.object.isRequired,
+  onLogin: PropTypes.func,
+  size: PropTypes.number,
+  dark: PropTypes.bool
+};
+UnLogin.defaultProps = {
+  onLogin: noop,
+  size: 24,
+  dark: false
+};

package/es/SessionUser/components/user-info.js

@@ -0,0 +1,163 @@
+import PropTypes from 'prop-types';
+import { Box, Chip, Typography } from '@mui/material';
+import { Icon } from '@iconify/react';
+import SwapHorizRoundedIcon from '@iconify-icons/material-symbols/swap-horiz-rounded';
+import ArrowRightAltRoundedIcon from '@iconify-icons/material-symbols/arrow-right-alt-rounded';
+import { useCreation, useMemoizedFn } from 'ahooks';
+import noop from 'lodash/noop';
+import DidAvatar from '../../Avatar';
+import { getUserAvatar } from '../../Util';
+import SessionUserSwitch from './session-user-switch';
+import { temp as colors } from '../../Colors';
+import { getSourceProvider } from '../libs/utils';
+import { translations } from '../libs/translation';
+import { translate } from '../../Locale/util';
+import { jsx as _jsx } from "react/jsx-runtime";
+import { jsxs as _jsxs } from "react/jsx-runtime";
+export default function UserInfo({
+  session,
+  onSwitchPassport,
+  onSwitchAccount,
+  onBindWallet,
+  onSwitchProfile,
+  locale,
+  isBlocklet
+}) {
+  const t = useMemoizedFn((key, data = {}) => {
+    return translate(translations, key, locale, 'en', data);
+  });
+  const avatar = getUserAvatar(session.user?.avatar?.replace(/\s/g, encodeURIComponent(' ')), 64);
+  const currentRole = useCreation(() => session.user?.passports?.find(item => item.name === session.user.role), [session?.user?.passports, session?.user?.role]);
+  const isRawWalletAccount = getSourceProvider(session.user) === 'wallet';
+  return /*#__PURE__*/_jsxs(Box, {
+    sx: {
+      p: 2,
+      pb: 1,
+      display: 'flex',
+      flexDirection: 'column',
+      gap: 1.5
+    },
+    children: [/*#__PURE__*/_jsxs(Box, {
+      sx: {
+        display: 'flex',
+        justifyContent: 'space-between',
+        alignItems: 'center',
+        gap: 1
+      },
+      children: [/*#__PURE__*/_jsxs(Box, {
+        sx: {
+          display: 'flex',
+          alignItems: 'center',
+          gap: 1.5
+        },
+        children: [/*#__PURE__*/_jsx(Box, {
+          onClick: isBlocklet ? noop : onSwitchProfile,
+          "data-cy": "sessionManager-switch-profile-trigger",
+          sx: {
+            cursor: isBlocklet ? 'default' : 'pointer',
+            position: 'relative',
+            borderRadius: '100%',
+            overflow: 'hidden',
+            fontSize: 0,
+            flexShrink: 0,
+            '&:hover': isBlocklet ? {} : {
+              '&::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'
+              }
+            }
+          },
+          children: /*#__PURE__*/_jsx(DidAvatar, {
+            variant: "circle",
+            did: session.user.did,
+            src: avatar,
+            size: 48,
+            shape: "circle",
+            sx: {
+              cursor: isBlocklet ? 'unset' : 'pointer'
+            }
+          })
+        }), /*#__PURE__*/_jsx(Typography, {
+          variant: "h6",
+          sx: {
+            wordBreak: 'break-all'
+          },
+          children: session.user.fullName
+        })]
+      }), /*#__PURE__*/_jsx(Chip, {
+        label: currentRole?.title || session.user?.role.toUpperCase(),
+        size: "small",
+        variant: "outlined",
+        clickable: true,
+        sx: {
+          flexShrink: 0,
+          fontWeight: 'bold',
+          fontSize: '12px',
+          color: colors.textBase,
+          borderColor: colors.borderBase,
+          pr: 1,
+          pl: 0.5,
+          '&:active': {
+            boxShadow: 'none'
+          }
+        },
+        deleteIcon: /*#__PURE__*/_jsx(Icon, {
+          icon: SwapHorizRoundedIcon,
+          color: colors.textBase
+        }),
+        onDelete: onSwitchPassport,
+        onClick: onSwitchPassport,
+        "data-cy": "sessionManager-switch-passport-trigger"
+      })]
+    }), /*#__PURE__*/_jsx(SessionUserSwitch, {
+      session: session,
+      onSwitch: onSwitchAccount,
+      isBlocklet: isBlocklet,
+      locale: locale
+    }), isRawWalletAccount ? null : /*#__PURE__*/_jsxs(Box, {
+      sx: {
+        color: colors.primaryBase,
+        backgroundColor: colors.surfacePrimarySubtitle,
+        borderRadius: 1,
+        display: 'flex',
+        justifyContent: 'space-between',
+        alignItems: 'center',
+        fontSize: 12,
+        py: 0.75,
+        px: 1.5,
+        cursor: 'pointer',
+        mt: -0.75
+      },
+      onClick: onBindWallet,
+      "data-cy": "sessionManager-bind-trigger",
+      children: [t('connectDIDWallet'), /*#__PURE__*/_jsx(Icon, {
+        icon: ArrowRightAltRoundedIcon,
+        color: colors.primaryBase,
+        fontSize: 16
+      })]
+    })]
+  });
+}
+UserInfo.propTypes = {
+  session: PropTypes.object.isRequired,
+  onSwitchPassport: PropTypes.func.isRequired,
+  onSwitchAccount: PropTypes.func.isRequired,
+  onBindWallet: PropTypes.func.isRequired,
+  onSwitchProfile: PropTypes.func,
+  locale: PropTypes.string,
+  isBlocklet: PropTypes.bool
+};
+UserInfo.defaultProps = {
+  locale: 'en',
+  isBlocklet: true,
+  onSwitchProfile: noop
+};

package/es/SessionUser/index.js

@@ -0,0 +1,49 @@
+import PropTypes from 'prop-types';
+import noop from 'lodash/noop';
+import { useCreation } from 'ahooks';
+import LoggedIn from './components/logged-in';
+import UnLogin from './components/un-login';
+import { jsx as _jsx } from "react/jsx-runtime";
+export default function SessionUser({
+  session,
+  onBindWallet,
+  locale,
+  size
+}) {
+  const isBlocklet = useCreation(() => {
+    return !!globalThis?.blocklet;
+  });
+  if (session.user) {
+    return /*#__PURE__*/_jsx(LoggedIn, {
+      isBlocklet: isBlocklet,
+      session: session,
+      onBindWallet: onBindWallet,
+      locale: locale,
+      size: size
+    });
+  }
+  return /*#__PURE__*/_jsx(UnLogin, {
+    session: session,
+    isBlocklet: isBlocklet,
+    locale: locale,
+    size: size
+  });
+}
+SessionUser.propTypes = {
+  session: PropTypes.shape({
+    user: PropTypes.shape({
+      did: PropTypes.string.isRequired,
+      fullName: PropTypes.string.isRequired,
+      email: PropTypes.string.isRequired,
+      avatar: PropTypes.string.isRequired
+    })
+  }).isRequired,
+  onBindWallet: PropTypes.func,
+  locale: PropTypes.string,
+  size: PropTypes.number
+};
+SessionUser.defaultProps = {
+  onBindWallet: noop,
+  locale: 'en',
+  size: 24
+};

package/es/SessionUser/libs/translation.js

@@ -0,0 +1,19 @@
+/* eslint-disable import/prefer-default-export */
+export const translations = {
+  en: {
+    connectDIDWallet: 'Connect your DID Wallet for full functionality',
+    switch: 'Switch',
+    profile: 'Profile',
+    dashboard: 'Dashboard',
+    logout: 'Sign Out',
+    addAnotherAccount: 'Add another account'
+  },
+  zh: {
+    connectDIDWallet: '连接你的 DID Wallet 获得更全的功能',
+    switch: '切换',
+    profile: '个人中心',
+    dashboard: '控制台',
+    logout: '退出登录',
+    addAnotherAccount: '添加账户'
+  }
+};

package/es/SessionUser/libs/utils.js

@@ -0,0 +1,4 @@
+export const getSourceProvider = user => user?.sourceProvider || user?.extraConfigs?.sourceProvider || 'wallet';
+export const getSourceAppPid = user => user?.sourceAppPid;
+export const getCurrentAppPid = user => user?.sourceAppPid || window?.blocklet?.appPid;
+export const getConnectedAccounts = user => user?.connectedAccounts || user?.extraConfigs?.connectedAccounts || [];

package/es/SplitButton/index.js

@@ -8,6 +8,7 @@ import MenuList from '@mui/material/MenuList';
 import MenuItem from '@mui/material/MenuItem';
 import ButtonGroup from '@mui/material/ButtonGroup';
 import Button from '@mui/material/Button';
+import noop from 'lodash/noop';
 import { styled } from '../Theme';
 
 /**
@@ -118,7 +119,7 @@ SplitButton.defaultProps = {
   menu: [],
   children: null,
   variant: 'contained',
-  onClick: () => {},
+  onClick: noop,
   menuButtonProps: {}
 };
 /**

package/es/Toast/index.js

@@ -2,6 +2,7 @@ import { createRef } from 'react';
 import { SnackbarProvider, useSnackbar } from 'notistack';
 import IconButton from '@mui/material/IconButton';
 import CloseIcon from '@mui/icons-material/Close';
+import noop from 'lodash/noop';
 
 /**
  *
@@ -14,7 +15,6 @@ import CloseIcon from '@mui/icons-material/Close';
  */
 import { jsx as _jsx } from "react/jsx-runtime";
 import { jsxs as _jsxs } from "react/jsx-runtime";
-const noop = () => {};
 let success = noop;
 let error = noop;
 let warning = noop;