@arcblock/ux 2.8.26 → 2.9.0

package/src/SessionUser/components/user-info.jsx

@@ -0,0 +1,165 @@
+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';
+
+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 (
+    <Box
+      sx={{
+        p: 2,
+        pb: 1,
+        display: 'flex',
+        flexDirection: 'column',
+        gap: 1.5,
+      }}>
+      <Box
+        sx={{
+          display: 'flex',
+          justifyContent: 'space-between',
+          alignItems: 'center',
+          gap: 1,
+        }}>
+        <Box
+          sx={{
+            display: 'flex',
+            alignItems: 'center',
+            gap: 1.5,
+          }}>
+          <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',
+                    },
+                  },
+            }}>
+            <DidAvatar
+              variant="circle"
+              did={session.user.did}
+              src={avatar}
+              size={48}
+              shape="circle"
+              sx={{
+                cursor: isBlocklet ? 'unset' : 'pointer',
+              }}
+            />
+          </Box>
+
+          <Typography variant="h6" sx={{ wordBreak: 'break-all' }}>
+            {session.user.fullName}
+          </Typography>
+        </Box>
+        <Chip
+          label={currentRole?.title || session.user?.role.toUpperCase()}
+          size="small"
+          variant="outlined"
+          clickable
+          sx={{
+            flexShrink: 0,
+            fontWeight: 'bold',
+            fontSize: '12px',
+            color: colors.textBase,
+            borderColor: colors.borderBase,
+            pr: 1,
+            pl: 0.5,
+            '&:active': {
+              boxShadow: 'none',
+            },
+          }}
+          deleteIcon={<Icon icon={SwapHorizRoundedIcon} color={colors.textBase} />}
+          onDelete={onSwitchPassport}
+          onClick={onSwitchPassport}
+          data-cy="sessionManager-switch-passport-trigger"
+        />
+      </Box>
+      <SessionUserSwitch session={session} onSwitch={onSwitchAccount} isBlocklet={isBlocklet} locale={locale} />
+      {isRawWalletAccount ? null : (
+        <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">
+          {t('connectDIDWallet')}
+          <Icon icon={ArrowRightAltRoundedIcon} color={colors.primaryBase} fontSize={16} />
+        </Box>
+      )}
+    </Box>
+  );
+}
+
+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/src/SessionUser/index.jsx

@@ -0,0 +1,38 @@
+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';
+
+export default function SessionUser({ session, onBindWallet, locale, size }) {
+  const isBlocklet = useCreation(() => {
+    return !!globalThis?.blocklet;
+  });
+  if (session.user) {
+    return (
+      <LoggedIn isBlocklet={isBlocklet} session={session} onBindWallet={onBindWallet} locale={locale} size={size} />
+    );
+  }
+  return <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/src/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/src/{SessionManager → SessionUser}/libs/utils.js

@@ -1,3 +1,7 @@
 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/src/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';
 
@@ -99,7 +100,7 @@ SplitButton.defaultProps = {
   menu: [],
   children: null,
   variant: 'contained',
-  onClick: () => {},
+  onClick: noop,
   menuButtonProps: {},
 };
 /**

package/src/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';
 
 /**
  *
@@ -12,7 +13,6 @@ import CloseIcon from '@mui/icons-material/Close';
 /**
  * @type {import('notistack').ProviderContext['enqueueSnackbar']}
  */
-const noop = () => {};
 
 let success = noop;
 let error = noop;

package/src/Util/constant.js

@@ -0,0 +1,12 @@
+export const DEFAULT_TIMEOUT = 5 * 60;
+export const DEFAULT_WINDOW_TIMEOUT = 30 * 60;
+export const AUTH_SERVICE_PREFIX = '/.well-known/service';
+export const SESSION_TOKEN_STORAGE_KEY = 'login_token';
+export const REFRESH_TOKEN_STORAGE_KEY = 'refresh_token';
+
+export const RELAY_SOCKET_PREFIX = '/.well-known/service';
+export const API_DID_PREFIX = '/api/did';
+
+export const DASHBOARD_URL = `${AUTH_SERVICE_PREFIX}/admin`;
+export const PROFILE_URL = `${AUTH_SERVICE_PREFIX}/user`;
+export const NAVIGATION_URL = `${AUTH_SERVICE_PREFIX}/admin/navigation`;

package/src/Util/index.js

@@ -336,3 +336,16 @@ export const sleep = (time = 0) => {
 export const isUrl = (str) => {
   return /^https?:\/\//.test(str);
 };
+
+const visitorIdKey = '__visitor_id';
+export const getVisitorId = () => {
+  return localStorage.getItem(visitorIdKey);
+};
+
+export const setVisitorId = (value) => {
+  if (value === null) {
+    localStorage.removeItem(visitorIdKey);
+  } else {
+    localStorage.setItem(visitorIdKey, value);
+  }
+};

package/es/SessionManager/components/account-item.js

@@ -1,212 +0,0 @@
-import { Box, IconButton, Link, MenuItem, Typography } from '@mui/material';
-import PropTypes from 'prop-types';
-import { Icon } from '@iconify/react';
-import CheckIcon from '@iconify-icons/mdi/check';
-import AppleIOSIcon from '@iconify-icons/mdi/apple-ios';
-import AndroidIcon from '@iconify-icons/mdi/android';
-import WebIcon from '@iconify-icons/mdi/web';
-import ApiIcon from '@iconify-icons/mdi/api';
-import Auth0Icon from '@iconify-icons/logos/auth0-icon';
-import TrashCanOutlineIcon from '@iconify-icons/mdi/trash-can-outline';
-import { useCreation, useMemoizedFn } from 'ahooks';
-import Avatar from '../../Avatar';
-import DID from '../../DID';
-import { translate } from '../../Locale/util';
-import { translations } from '../libs/translation';
-import { getFederatedEnabled } from '../../Util/federated';
-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 AccountItem({
-  account,
-  active,
-  onDelete,
-  onChoose,
-  locale
-}) {
-  const t = useMemoizedFn((key, data = {}) => {
-    return translate(translations, key, locale, 'en', data);
-  });
-  const federatedEnabled = getFederatedEnabled();
-  const _onChoose = useMemoizedFn(() => onChoose(account, {
-    active
-  }));
-  const _onDelete = useMemoizedFn(e => {
-    e.preventDefault();
-    e.stopPropagation();
-    onDelete(account, {
-      active
-    });
-  });
-  const stopPropagation = useMemoizedFn(e => {
-    e.stopPropagation();
-  });
-  const walletIcon = useCreation(() => {
-    const {
-      walletOS,
-      provider
-    } = account;
-    if (provider === 'auth0') {
-      return /*#__PURE__*/_jsx(Icon, {
-        icon: Auth0Icon,
-        width: 10,
-        height: 10,
-        style: {
-          color: 'black'
-        }
-      });
-    }
-    if (walletOS === 'ios') {
-      return /*#__PURE__*/_jsx(Icon, {
-        icon: AppleIOSIcon,
-        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: WebIcon,
-        style: {
-          color: 'black'
-        }
-      });
-    }
-    if (walletOS === 'api') {
-      return /*#__PURE__*/_jsx(Icon, {
-        icon: ApiIcon,
-        width: 14,
-        height: 14,
-        style: {
-          color: 'black'
-        }
-      });
-    }
-    return null;
-  }, [account.walletOS]);
-  if (!account?.did || !account?.appName) {
-    return null;
-  }
-  return /*#__PURE__*/_jsxs(MenuItem, {
-    onClick: _onChoose,
-    sx: {
-      display: 'flex',
-      alignItems: 'center',
-      overflow: 'hidden',
-      gap: '8px',
-      position: 'relative',
-      '.account-item-actions': {
-        position: 'absolute',
-        right: 0,
-        top: 0,
-        bottom: 0,
-        marginRight: '12px',
-        display: 'flex',
-        alignItems: 'center'
-      },
-      '.account-item-action': {
-        alignItems: 'center',
-        display: 'none'
-      },
-      '&:hover .account-item-action': {
-        display: 'flex'
-      }
-    },
-    className: "session-manager-menu-item",
-    children: [/*#__PURE__*/_jsx(Avatar, {
-      did: account.did,
-      size: 42
-    }), /*#__PURE__*/_jsxs(Box, {
-      sx: {
-        flex: 1,
-        overflow: 'hidden',
-        fontSize: 0,
-        '.did-address-avatar': {
-          display: 'none !important'
-        }
-      },
-      children: [/*#__PURE__*/_jsx(DID, {
-        did: account.did,
-        copyable: false,
-        size: 14,
-        responsive: false,
-        compact: true,
-        sx: {
-          lineHeight: 1
-        }
-      }), /*#__PURE__*/_jsxs(Typography, {
-        variant: "caption",
-        display: "flex",
-        alignItems: "center",
-        gap: 0.5,
-        children: [walletIcon, federatedEnabled ? /*#__PURE__*/_jsxs(_Fragment, {
-          children: [t('from'), ' ', /*#__PURE__*/_jsx(Link, {
-            href: account.appUrl,
-            target: "_blank",
-            onClick: stopPropagation,
-            sx: {
-              textDecoration: 'none',
-              '&:hover': {
-                textDecoration: 'underline'
-              }
-            },
-            children: account.appName
-          })]
-        }) :
-        // HACK: 用于在有 icon 的情况下，该该行的高度撑高为文字高度
-        walletIcon && '　']
-      })]
-    }), /*#__PURE__*/_jsx(Box, {
-      className: "account-item-actions",
-      children: active ? /*#__PURE__*/_jsx(Box, {
-        className: "account-item-action",
-        style: {
-          display: 'flex'
-        },
-        children: /*#__PURE__*/_jsx(IconButton, {
-          color: "success",
-          children: /*#__PURE__*/_jsx(Icon, {
-            icon: CheckIcon,
-            color: "success"
-          })
-        })
-      }, "CheckIcon") : /*#__PURE__*/_jsx(Box, {
-        className: "account-item-action",
-        children: /*#__PURE__*/_jsx(IconButton, {
-          color: "error",
-          onClick: _onDelete,
-          children: /*#__PURE__*/_jsx(Icon, {
-            icon: TrashCanOutlineIcon,
-            color: "error"
-          })
-        })
-      }, "TrashCanOutlineIcon")
-    })]
-  });
-}
-AccountItem.propTypes = {
-  account: PropTypes.object,
-  active: PropTypes.bool,
-  locale: PropTypes.string,
-  onChoose: PropTypes.func,
-  onDelete: PropTypes.func
-};
-AccountItem.defaultProps = {
-  account: null,
-  active: false,
-  locale: 'en',
-  onChoose: () => {},
-  onDelete: () => {}
-};

package/es/SessionManager/components/add-account-item.js

@@ -1,57 +0,0 @@
-import { Icon } from '@iconify/react';
-import PropTypes from 'prop-types';
-import { MenuItem, Typography } from '@mui/material';
-import AddIcon from '@iconify-icons/ion/ios-add-circle-outline';
-import { useCreation, useMemoizedFn } from 'ahooks';
-import { translate } from '../../Locale/util';
-import { translations } from '../libs/translation';
-import { getApps } from '../../Util/federated';
-import { jsx as _jsx } from "react/jsx-runtime";
-import { jsxs as _jsxs } from "react/jsx-runtime";
-export default function AddAccountItem({
-  onAdd,
-  locale,
-  session
-}) {
-  const t = useMemoizedFn((key, data = {}) => {
-    return translate(translations, key, locale, 'en', data);
-  });
-  const apps = useCreation(() => {
-    return getApps();
-  }, []);
-  const _onAdd = useMemoizedFn(() => {
-    // HACK: 如果是非统一登录应用，则 sourceAppPid 的值为 null
-    const sourceAppPid = session?.user?.sourceAppPid || null;
-    const app = apps.find(x => x.appPid === sourceAppPid);
-    if (app) {
-      onAdd(app);
-    } else {
-      onAdd(apps[0]);
-    }
-  });
-  return /*#__PURE__*/_jsxs(MenuItem, {
-    onClick: _onAdd,
-    className: "session-manager-menu-item",
-    sx: {
-      display: 'flex',
-      gap: '8px'
-    },
-    "data-cy": "sessionManager-switch-trigger",
-    children: [/*#__PURE__*/_jsx(Icon, {
-      icon: AddIcon,
-      width: 24,
-      height: 24
-    }), /*#__PURE__*/_jsx(Typography, {
-      children: t('addAnotherAccount')
-    })]
-  });
-}
-AddAccountItem.propTypes = {
-  onAdd: PropTypes.func,
-  locale: PropTypes.string,
-  session: PropTypes.object.isRequired
-};
-AddAccountItem.defaultProps = {
-  onAdd: () => {},
-  locale: 'en'
-};