@arcblock/ux 2.5.59 → 2.5.60

package/lib/SessionManager/user-popper.js

@@ -0,0 +1,83 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = UserPopper;
+var _propTypes = _interopRequireDefault(require("prop-types"));
+var _material = require("@mui/material");
+var _Theme = require("../Theme");
+var _jsxRuntime = require("react/jsx-runtime");
+var _templateObject;
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+function _taggedTemplateLiteral(strings, raw) { if (!raw) { raw = strings.slice(0); } return Object.freeze(Object.defineProperties(strings, { raw: { value: Object.freeze(raw) } })); }
+function UserPopper(_ref) {
+  let {
+    anchorEl,
+    dark,
+    children,
+    open,
+    onClose
+  } = _ref;
+  return anchorEl && /*#__PURE__*/(0, _jsxRuntime.jsx)(StyledPopper, {
+    open: open,
+    disablePortal: true,
+    anchorEl: anchorEl,
+    placement: "bottom-end",
+    $dark: dark,
+    children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_material.Paper, {
+      sx: [theme => ({
+        borderColor: '#F0F0F0',
+        boxShadow: '0px 8px 12px rgba(92, 92, 92, 0.04)',
+        borderRadius: theme.spacing(2),
+        overflow: 'hidden',
+        maxWidth: 'calc(100vw - 10px)',
+        '& .MuiChip-root .MuiChip-icon': {
+          color: theme.palette.success.main
+        }
+      }), dark && {
+        backgroundColor: '#27282c',
+        color: '#fff',
+        border: 0,
+        '& .MuiChip-root': {
+          borderColor: '#aaa'
+        },
+        '& .MuiListItem-root, & .MuiChip-label': {
+          color: '#aaa'
+        },
+        '& .MuiListItem-root:hover': {
+          backgroundColor: '#363434'
+        }
+      }],
+      variant: "outlined",
+      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_material.ClickAwayListener, {
+        onClickAway: onClose,
+        children: children
+      })
+    })
+  });
+}
+UserPopper.propTypes = {
+  anchorEl: _propTypes.default.instanceOf(Element),
+  dark: _propTypes.default.bool,
+  open: _propTypes.default.bool,
+  children: _propTypes.default.any.isRequired,
+  onClose: _propTypes.default.func
+};
+UserPopper.defaultProps = {
+  anchorEl: null,
+  dark: false,
+  open: false,
+  onClose: () => {}
+};
+const StyledPopper = (0, _Theme.styled)(_material.Popper)(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  z-index: ", ";\n  .MuiList-root {\n    /* HACK: \u9700\u8981288px \u624D\u80FD\u5C06 did \u5C55\u793A\u5B8C\u6574 */\n    width: 290px;\n  }\n  .session-manager-user {\n    font-size: 12px;\n    flex-direction: column;\n    align-items: flex-start;\n    padding: 24px 24px 10px;\n  }\n  .session-manager-user-name {\n    font-size: 20px;\n    color: ", ";\n    font-weight: bold;\n    margin-bottom: 10px;\n    display: flex;\n    align-items: center;\n    justify-content: space-between;\n  }\n  .session-manager-id-item {\n    position: relative;\n    padding-left: 8px;\n    /* HACK: \u5F53\u524D\u5143\u7D20\u65E2\u662F\u7B2C\u4E00\u4E2A\uFF0C\u4E5F\u662F\u6700\u540E\u4E00\u4E2A\uFF0C\u5373\u53EA\u6709\u4E00\u4E2A\u540C\u7EA7\u5143\u7D20 */\n    &:first-of-type:last-of-type {\n      padding-left: 0;\n      &:before,\n      &:after {\n        content: unset;\n      }\n    }\n    &:before {\n      position: absolute;\n      content: '';\n      left: 0px;\n      top: 50%;\n      width: 6px;\n      height: 1px;\n      background-color: #aeaeae;\n    }\n    &:not(:last-of-type):after {\n      position: absolute;\n      content: '';\n      left: 0px;\n      top: 50%;\n      height: 100%;\n      width: 1px;\n      background-color: #aeaeae;\n    }\n  }\n  .session-manager-menu-item {\n    padding: 18.5px 24px;\n    color: #777;\n    font-size: 16px;\n    &:hover {\n      background-color: #fbfbfb;\n    }\n  }\n  .session-manager-menu-icon {\n    color: #999;\n    margin-right: 16px;\n  }\n"])), _ref2 => {
+  let {
+    theme
+  } = _ref2;
+  return theme.zIndex.tooltip;
+}, _ref3 => {
+  let {
+    $dark
+  } = _ref3;
+  return $dark ? '#aaa' : '#222';
+});

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@arcblock/ux",
-  "version": "2.5.59",
+  "version": "2.5.60",
   "description": "Common used react components for arcblock products",
   "keywords": [
     "react",
@@ -47,11 +47,11 @@
   "peerDependencies": {
     "react": ">=18.1.0"
   },
-  "gitHead": "f50c420e5f06ae108d59636cfdcfde88d1e10f4c",
+  "gitHead": "50a0f90ecfb1d239e04cdfebc16e30d3947db4a2",
   "dependencies": {
     "@arcblock/did-motif": "^1.1.13",
-    "@arcblock/icons": "^2.5.59",
-    "@arcblock/react-hooks": "^2.5.59",
+    "@arcblock/icons": "^2.5.60",
+    "@arcblock/react-hooks": "^2.5.60",
     "@babel/plugin-syntax-dynamic-import": "^7.8.3",
     "@emotion/react": "^11.10.4",
     "@emotion/styled": "^11.10.4",

package/src/Blocklet/blocklet.js

@@ -3,9 +3,9 @@ import { isValidElement } from 'react';
 import PropTypes from 'prop-types';
 import Typography from '@mui/material/Typography';
 import CircularProgress from '@mui/material/CircularProgress';
-import Avatar from '@arcblock/did-connect/lib/Avatar';
 import useMediaQuery from '@mui/material/useMediaQuery';
 
+import Avatar from '../Avatar';
 import Button from '../Button';
 import Img from '../Img';
 import { useTheme, styled } from '../Theme';

package/src/BlockletNFT/index.js

@@ -4,8 +4,8 @@ import Portal from '@mui/material/Portal';
 import Typography from '@mui/material/Typography';
 import CircularProgress from '@mui/material/CircularProgress';
 import useMediaQuery from '@mui/material/useMediaQuery';
-import Avatar from '@arcblock/did-connect/lib/Avatar';
 
+import Avatar from '../Avatar';
 import Icon from '../Icon';
 import Button from '../Button';
 import Img from '../Img';

package/src/SessionManager/federated-login-detecter.jsx

@@ -0,0 +1,138 @@
+import PropTypes from 'prop-types';
+import { useCallback, useState } from 'react';
+import { Box, Chip, Divider, SvgIcon } from '@mui/material';
+import ShieldCheck from 'mdi-material-ui/ShieldCheck';
+
+import UserPopper from './user-popper';
+import DidAvatar from '../Avatar';
+import DidAddress from '../Address';
+import Button from '../Button';
+import Toast from '../Toast';
+
+const translations = {
+  en: {
+    useToConnect({ master, member }) {
+      return (
+        <>
+          Use {master} account to connect {member}
+        </>
+      );
+    },
+    connect: 'Connect Account',
+    loginFederatedFailed: 'Login federated account failed',
+  },
+  zh: {
+    useToConnect({ master, member }) {
+      return (
+        <>
+          使用 {master} 账号连接 {member}
+        </>
+      );
+    },
+    connect: '连接账号',
+    loginFederatedFailed: '登录统一登录账号失败',
+  },
+};
+
+export default function FederatedLoginDetecter({ session, anchorEl, dark, locale: _locale }) {
+  const [federatedLoginOpen, setFederatedLoginOpen] = useState(true);
+
+  const siteInfo = session.federatedMaster?.site;
+  const userInfo = session.federatedMaster?.user;
+
+  const localeList = Object.keys(translations);
+  const locale = localeList.includes(_locale) ? _locale : localeList[0];
+
+  const onLoginFederated = useCallback(() => {
+    session?.loginFederated(
+      (err) => {
+        if (err) {
+          Toast.error(err || translations[_locale].loginFederatedFailed);
+        } else {
+          setFederatedLoginOpen(false);
+        }
+      },
+      { mode: userInfo ? 'auto' : 'manual' }
+    );
+  }, [session, userInfo, _locale]);
+
+  return (
+    siteInfo && (
+      <UserPopper
+        open={federatedLoginOpen}
+        anchorEl={anchorEl}
+        dark={dark}
+        onClose={() => setFederatedLoginOpen(false)}>
+        <Box p={2}>
+          {siteInfo && (
+            <Box display="flex" alignItems="center">
+              <Box
+                component="img"
+                mr={2}
+                src={`${siteInfo.appUrl}${siteInfo.appLogo}`}
+                alt={siteInfo.appName}
+                width="30px"
+                height="30px"
+              />
+              <Box>
+                {translations[locale].useToConnect({
+                  master: (
+                    <Box
+                      component="a"
+                      href={siteInfo.appUrl}
+                      target="_blank"
+                      sx={{ textDecoration: 'none', fontWeight: 'bold', color: 'primary.main', fontSize: '1.2em' }}>
+                      {siteInfo.appName}
+                    </Box>
+                  ),
+                  member: window.blocklet.appName,
+                })}
+              </Box>
+            </Box>
+          )}
+          {siteInfo && userInfo && <Divider style={{ margin: '15px 0 10px 0' }} />}
+          {userInfo && (
+            <Box display="flex" alignItems="center">
+              <DidAvatar variant="circle" did={userInfo.did} src={userInfo.avatar} size={28} shape="circle" />
+              <Box ml={2}>
+                <Box display="flex" justifyContent="space-between" alignItems="center">
+                  <Box fontSize={18}>{userInfo.fullName}</Box>
+                  {userInfo.role?.toUpperCase() && (
+                    <Chip
+                      label={userInfo.role?.toUpperCase()}
+                      size="small"
+                      variant="outlined"
+                      sx={{ height: 'auto', marginRight: 0, fontSize: 12 }}
+                      icon={<SvgIcon component={ShieldCheck} style={{ fontSize: '14px' }} />}
+                    />
+                  )}
+                </Box>
+                <DidAddress responsive={false}>{userInfo.did}</DidAddress>
+              </Box>
+            </Box>
+          )}
+          {siteInfo && (
+            <Box display="flex" justifyContent="center" mt={2}>
+              <Button variant="contained" size="small" onClick={onLoginFederated}>
+                {translations[locale].connect}
+              </Button>
+            </Box>
+          )}
+        </Box>
+      </UserPopper>
+    )
+  );
+}
+
+FederatedLoginDetecter.propTypes = {
+  session: PropTypes.object.isRequired,
+  anchorEl: PropTypes.instanceOf(Element),
+  dark: PropTypes.bool,
+  locale: PropTypes.string,
+};
+
+FederatedLoginDetecter.defaultProps = {
+  dark: false,
+  anchorEl: null,
+  locale: 'en',
+};