@arcblock/ux 2.8.25 → 2.9.0

package/es/SessionManager/index.js

@@ -1,381 +1,2 @@
-/* eslint-disable react/prop-types */
-/* eslint-disable react/jsx-no-bind */
-import { useEffect, useMemo, useRef, useState } from 'react';
-import PropTypes from 'prop-types';
-import { Box, IconButton, MenuList, Button, CircularProgress, Divider } from '@mui/material';
-import AccountIcon from '@arcblock/icons/lib/Account';
-import noop from 'lodash/noop';
-import cloneDeep from 'lodash/cloneDeep';
-import { useLatest, useMemoizedFn } from 'ahooks';
-import DidAvatar from '../Avatar';
-import { getUserAvatar, sleep } from '../Util';
-import FederatedLoginDetecter from './components/federated-login-detecter';
-import UserInfo from './components/user-info';
-import ResponsivePopper from './components/responsive-popper';
-import { translate } from '../Locale/util';
-import ManageAccounts from './components/manage-accounts';
-import ManageBlocklet from './components/manage-blocklet';
-import { translations } from './libs/translation';
-import { getConnectedAccounts, getSourceProvider } from './libs/utils';
-import useConfig from './hooks/use-config';
-import { getCurrentApp, getFederatedApp } from '../Util/federated';
-import { jsx as _jsx } from "react/jsx-runtime";
-import { jsxs as _jsxs } from "react/jsx-runtime";
-import { Fragment as _Fragment } from "react/jsx-runtime";
-function SessionManager({
-  session,
-  locale,
-  showText,
-  showRole,
-  switchDid,
-  switchProfile,
-  switchPassport,
-  disableLogout,
-  onLogin,
-  onLogout,
-  onSwitchDid,
-  onSwitchProfile,
-  onSwitchPassport,
-  onBindWallet,
-  menu,
-  menuRender,
-  dark,
-  size,
-  showManageBlocklet,
-  ...rest
-}) {
-  const latestSession = useLatest(session);
-  const {
-    connectAccount,
-    config,
-    setConfig,
-    deleteAccount
-  } = useConfig();
-  const t = useMemoizedFn((key, data = {}) => {
-    return translate(translations, key, locale, 'en', data);
-  });
-  const userAnchorRef = useRef(null);
-  const {
-    logoutOAuth,
-    switchOAuthPassport
-  } = session.useOAuth();
-  const [userOpen, setUserOpen] = useState(false);
-
-  // base64 img maybe have some blank char, need encodeURIComponent to transform it
-  const avatar = getUserAvatar(session.user?.avatar?.replace(/\s/g, encodeURIComponent(' ')));
-  const isRawWalletAccount = getSourceProvider(session.user) === 'wallet';
-  const connectedAccounts = getConnectedAccounts(session.user);
-  const isFirstLoading = useMemo(() => {
-    return session?.initialized === false && session?.loading === true;
-  }, [session?.initialized, session?.loading]);
-  let hasBindWallet = false;
-  let hasBindAccount = false;
-  if (isRawWalletAccount) {
-    if (connectedAccounts.some(item => item.provider !== 'wallet')) {
-      hasBindAccount = true;
-    }
-    hasBindWallet = true;
-  } else if (connectedAccounts.some(item => item.provider === 'wallet')) {
-    hasBindAccount = true;
-    hasBindWallet = true;
-  }
-  const _connectAccount = useMemoizedFn(async () => {
-    // HACK: 强制等待组件渲染一轮，以拿到最新的 session 值
-    await sleep();
-    if (!latestSession.current?.user) {
-      return;
-    }
-    if (typeof window === 'undefined') {
-      return;
-    }
-    const blocklet = window?.blocklet;
-    const currentApp = getCurrentApp(blocklet);
-    const masterApp = getFederatedApp(blocklet);
-    const targetApp = latestSession.current.user.sourceAppPid ? masterApp : currentApp;
-    if (targetApp) {
-      const loginAccount = {
-        ...targetApp,
-        did: latestSession.current.user.did,
-        avatar: latestSession.current.user.avatar,
-        provider: latestSession.current.provider || targetApp.provider,
-        walletOS: latestSession.current.walletOS
-      };
-      connectAccount(loginAccount);
-    }
-  });
-
-  // HACK: 用于处理 统一登录 的自动登录情况，添加一个已连接的账号
-  // 同时可用于以前的站点，会自动生成一个已连接的账号
-  useEffect(() => {
-    if (session.user) {
-      _connectAccount();
-    }
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [session.user]);
-  if (!session.user) {
-    return /*#__PURE__*/_jsxs(_Fragment, {
-      children: [showText ? /*#__PURE__*/_jsxs(Button, {
-        ref: userAnchorRef,
-        sx: [{
-          borderRadius: '100vw'
-        }, dark && {
-          color: '#fff',
-          borderColor: '#fff'
-        }],
-        variant: "outlined",
-        onClick: _onLogin,
-        role: "button",
-        "aria-label": "Login button",
-        ...rest,
-        "data-cy": "sessionManager-login",
-        children: [isFirstLoading ? /*#__PURE__*/_jsx(CircularProgress, {}) : /*#__PURE__*/_jsx(AccountIcon, {}), /*#__PURE__*/_jsx("span", {
-          style: {
-            lineHeight: '25px'
-          },
-          children: t('connect')
-        })]
-      }) : /*#__PURE__*/_jsx(IconButton, {
-        ref: userAnchorRef,
-        ...rest,
-        onClick: _onLogin,
-        "data-cy": "sessionManager-login",
-        size: "medium",
-        role: "button",
-        "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(AccountIcon, {
-          style: {
-            width: size,
-            height: size,
-            color: dark ? '#fff' : ''
-          }
-        })
-      }), /*#__PURE__*/_jsx(FederatedLoginDetecter, {
-        locale: locale,
-        dark: dark,
-        session: session,
-        anchorEl: userAnchorRef.current
-      })]
-    });
-  }
-  function onToggleUser() {
-    setUserOpen(prevOpen => !prevOpen);
-  }
-  function close() {
-    setUserOpen(false);
-  }
-  function onCloseUser(e) {
-    if (userAnchorRef.current && userAnchorRef.current.contains(e.target)) {
-      return;
-    }
-    close();
-  }
-  function _onLogin() {
-    if (!isFirstLoading) {
-      session.login((...args) => {
-        _connectAccount();
-        onLogin(...args);
-      });
-    }
-  }
-  function _onLogout() {
-    return new Promise((resolve, reject) => {
-      logoutOAuth({
-        session,
-        hack: true
-      }).catch(err => {
-        console.error(err);
-        reject(err);
-      }).finally(() => {
-        session.logout((...args) => {
-          onLogout(...args);
-          resolve();
-          close();
-        });
-      });
-    });
-  }
-  /**
-   * @name 切换账户
-   * @description 该功能仅在登录后才能使用，目前仅用于切换普通登录和统一登录的账户，所以会增加一些与统一登录相关的逻辑
-   */
-
-  function _onSwitchProfile() {
-    session.switchProfile((...args) => {
-      close();
-      onSwitchProfile(...args);
-    });
-  }
-  function _onSwitchPassport() {
-    const {
-      user,
-      provider
-    } = session;
-    if (['auth0'].includes(provider)) {
-      switchOAuthPassport(user);
-    } else {
-      close();
-      session.switchPassport((...args) => {
-        close();
-        onSwitchPassport(...args);
-      });
-    }
-  }
-  return /*#__PURE__*/_jsxs(_Fragment, {
-    children: [/*#__PURE__*/_jsx(IconButton, {
-      ref: userAnchorRef,
-      onClick: onToggleUser,
-      ...rest,
-      "data-cy": "sessionManager-logout-popup",
-      size: "medium",
-      role: "button",
-      "aria-label": "User info button",
-      style: {
-        lineHeight: 1
-      },
-      children: /*#__PURE__*/_jsx(DidAvatar, {
-        variant: "circle",
-        did: session.user.did,
-        src: avatar,
-        size: size,
-        shape: "circle"
-      })
-    }), /*#__PURE__*/_jsx(ResponsivePopper, {
-      open: userOpen,
-      onClose: onCloseUser,
-      anchorEl: userAnchorRef.current,
-      dark: dark,
-      children: /*#__PURE__*/_jsxs(MenuList, {
-        sx: {
-          p: 0
-        },
-        children: [/*#__PURE__*/_jsx(UserInfo, {
-          session: session,
-          size: size,
-          locale: locale,
-          onSwitchProfile: () => {
-            close();
-            _onSwitchProfile();
-          },
-          onSwitchPassport: () => {
-            close();
-            _onSwitchPassport();
-          },
-          close: close,
-          switchProfile: switchProfile,
-          hasBindWallet: hasBindWallet
-        }), /*#__PURE__*/_jsx(Divider, {}), /*#__PURE__*/_jsx(ManageAccounts, {
-          session: session,
-          locale: locale,
-          onBindWallet: onBindWallet,
-          onSwitchDid: onSwitchDid,
-          connectAccount: _connectAccount,
-          close: close,
-          hasBindAccount: hasBindAccount,
-          onLogout: _onLogout,
-          expanded: config.expandAccount,
-          onExpand: value => {
-            const cloneConfig = cloneDeep(config);
-            cloneConfig.expandAccount = value;
-            setConfig(cloneConfig);
-          },
-          deleteAccount: deleteAccount,
-          accounts: config.accounts
-        }), showManageBlocklet ? [/*#__PURE__*/_jsx(Divider, {}, "divider"), /*#__PURE__*/_jsx(ManageBlocklet, {
-          menu: menu,
-          menuRender: menuRender,
-          locale: locale,
-          expanded: config.expandBlocklet,
-          onExpand: value => {
-            const cloneConfig = cloneDeep(config);
-            cloneConfig.expandBlocklet = value;
-            setConfig(cloneConfig);
-          }
-        }, "manageBlocklet")] : null]
-      })
-    })]
-  });
-}
-SessionManager.propTypes = {
-  session: PropTypes.shape({
-    federatedMaster: PropTypes.object,
-    provider: PropTypes.oneOf(['wallet', 'auth0', '']),
-    user: PropTypes.shape({
-      did: PropTypes.string.isRequired,
-      role: PropTypes.string.isRequired,
-      fullName: PropTypes.string,
-      email: PropTypes.string,
-      avatar: PropTypes.string,
-      sourceProvider: PropTypes.string,
-      connectedAccounts: PropTypes.arrayOf(PropTypes.shape({
-        provider: PropTypes.string.isRequired,
-        did: PropTypes.string.isRequired,
-        id: PropTypes.string
-      })),
-      passports: PropTypes.arrayOf(PropTypes.shape({
-        name: PropTypes.string.isRequired,
-        title: PropTypes.string.isRequired
-      })),
-      // Deprecated
-      extraConfigs: PropTypes.object
-    }),
-    login: PropTypes.func.isRequired,
-    logout: PropTypes.func.isRequired,
-    switchDid: PropTypes.func.isRequired,
-    switchProfile: PropTypes.func.isRequired,
-    switchPassport: PropTypes.func.isRequired,
-    bindWallet: PropTypes.func.isRequired,
-    refresh: PropTypes.func.isRequired
-  }).isRequired,
-  locale: PropTypes.string,
-  showText: PropTypes.bool,
-  showRole: PropTypes.bool,
-  switchDid: PropTypes.bool,
-  switchProfile: PropTypes.bool,
-  switchPassport: PropTypes.bool,
-  disableLogout: PropTypes.bool,
-  onLogin: PropTypes.func,
-  onLogout: PropTypes.func,
-  onSwitchDid: PropTypes.func,
-  onSwitchProfile: PropTypes.func,
-  onSwitchPassport: PropTypes.func,
-  onBindWallet: PropTypes.func,
-  menu: PropTypes.array,
-  menuRender: PropTypes.func,
-  dark: PropTypes.bool,
-  size: PropTypes.number,
-  showManageBlocklet: PropTypes.bool
-};
-SessionManager.defaultProps = {
-  locale: 'en',
-  showText: false,
-  showRole: false,
-  switchDid: true,
-  switchProfile: true,
-  switchPassport: true,
-  disableLogout: false,
-  menu: [],
-  menuRender: noop,
-  onLogin: noop,
-  onLogout: noop,
-  onSwitchDid: noop,
-  onSwitchProfile: noop,
-  onSwitchPassport: noop,
-  onBindWallet: noop,
-  dark: false,
-  size: 24,
-  showManageBlocklet: true
-};
-export default SessionManager;
+import SessionUser from '../SessionUser';
+export default SessionUser;

package/es/SessionPermission/index.js

@@ -0,0 +1,28 @@
+import PropTypes from 'prop-types';
+import { useCreation } from 'ahooks';
+const roleList = ['owner', 'admin', 'member', 'guest'];
+export default function SessionPermission({
+  session,
+  roles,
+  children
+}) {
+  const hasPermission = useCreation(() => {
+    return roles.includes(session?.user?.role || 'guest');
+  }, [session?.user?.role, roles]);
+  if (typeof children === 'function') {
+    return children({
+      hasPermission
+    });
+  }
+  if (hasPermission) {
+    return children;
+  }
+}
+SessionPermission.propTypes = {
+  children: PropTypes.any.isRequired,
+  session: PropTypes.object.isRequired,
+  roles: PropTypes.arrayOf(PropTypes.oneOf(roleList))
+};
+SessionPermission.defaultProps = {
+  roles: ['owner', 'admin']
+};

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

@@ -0,0 +1,224 @@
+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__*/_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.lineStep
+                  }
+                })]
+              }) : 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.string.isRequired,
+  title: PropTypes.string.isRequired
+};