@arcblock/ux 2.6.2 → 2.6.3

package/lib/SessionManager/federated-login-detecter.js

@@ -13,6 +13,7 @@ var _Avatar = _interopRequireDefault(require("../Avatar"));
 var _Address = _interopRequireDefault(require("../Address"));
 var _Button = _interopRequireDefault(require("../Button"));
 var _Toast = _interopRequireDefault(require("../Toast"));
+var _Util = require("../Util");
 var _jsxRuntime = require("react/jsx-runtime");
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 const translations = {
@@ -111,7 +112,7 @@ function FederatedLoginDetecter(_ref3) {
         children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_Avatar.default, {
           variant: "circle",
           did: userInfo.did,
-          src: userInfo.avatar,
+          src: (0, _Util.getUserAvatar)(userInfo.avatar),
           size: 28,
           shape: "circle"
         }), /*#__PURE__*/(0, _jsxRuntime.jsxs)(_material.Box, {

package/lib/SessionManager/index.js

@@ -18,6 +18,7 @@ var _VpnKeyOutlined = _interopRequireDefault(require("@mui/icons-material/VpnKey
 var _useBrowser = _interopRequireDefault(require("@arcblock/react-hooks/lib/useBrowser"));
 var _Avatar = _interopRequireDefault(require("../Avatar"));
 var _Address = _interopRequireDefault(require("../Address"));
+var _Util = require("../Util");
 var _federatedLoginDetecter = _interopRequireDefault(require("./federated-login-detecter"));
 var _userPopper = _interopRequireDefault(require("./user-popper"));
 var _jsxRuntime = require("react/jsx-runtime");
@@ -101,7 +102,7 @@ function SessionManager(_ref) {
   const [userOpen, setUserOpen] = (0, _react.useState)(false);
 
   // base64 img maybe have some blank char, need encodeURIComponent to transform it
-  const avatar = (_session$user = session.user) === null || _session$user === void 0 ? void 0 : (_session$user$avatar = _session$user.avatar) === null || _session$user$avatar === void 0 ? void 0 : _session$user$avatar.replace(/\s/g, encodeURIComponent(' '));
+  const avatar = (0, _Util.getUserAvatar)((_session$user = session.user) === null || _session$user === void 0 ? void 0 : (_session$user$avatar = _session$user.avatar) === null || _session$user$avatar === void 0 ? void 0 : _session$user$avatar.replace(/\s/g, encodeURIComponent(' ')));
   const currentRole = (0, _react.useMemo)(() => {
     var _session$user2, _session$user2$passpo;
     return (_session$user2 = session.user) === null || _session$user2 === void 0 ? void 0 : (_session$user2$passpo = _session$user2.passports) === null || _session$user2$passpo === void 0 ? void 0 : _session$user2$passpo.find(item => item.name === session.user.role);

package/lib/Util/index.js

@@ -10,7 +10,7 @@ exports.getColor = exports.getBackground = exports.formatUptime = void 0;
 exports.getCookieOptions = getCookieOptions;
 exports.getCopyright = getCopyright;
 exports.getDateTool = getDateTool;
-exports.isEthereumDid = exports.getTimezone = exports.getFontSize = void 0;
+exports.isEthereumDid = exports.getUserAvatar = exports.getTimezone = exports.getFontSize = void 0;
 exports.mergeProps = mergeProps;
 exports.openWebWallet = openWebWallet;
 exports.parseQuery = parseQuery;
@@ -296,4 +296,16 @@ const isEthereumDid = did => {
   }
   return true;
 };
-exports.isEthereumDid = isEthereumDid;
+exports.isEthereumDid = isEthereumDid;
+const getUserAvatar = function getUserAvatar(avatar) {
+  var _window$blocklet, _window$blocklet$capa;
+  let size = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 48;
+  if (!avatar) {
+    return avatar;
+  }
+  if (avatar.indexOf('/.well-known/service') >= 0 && (_window$blocklet = window.blocklet) !== null && _window$blocklet !== void 0 && (_window$blocklet$capa = _window$blocklet.capabilities) !== null && _window$blocklet$capa !== void 0 && _window$blocklet$capa.httpImageFilter) {
+    return "".concat(avatar, "/resize?w=").concat(size, "&h=").concat(size);
+  }
+  return avatar;
+};
+exports.getUserAvatar = getUserAvatar;

package/package.json

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

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

@@ -8,6 +8,7 @@ import DidAvatar from '../Avatar';
 import DidAddress from '../Address';
 import Button from '../Button';
 import Toast from '../Toast';
+import { getUserAvatar } from '../Util';
 
 const translations = {
   en: {
@@ -93,7 +94,13 @@ export default function FederatedLoginDetecter({ session, anchorEl, dark, locale
           {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" />
+              <DidAvatar
+                variant="circle"
+                did={userInfo.did}
+                src={getUserAvatar(userInfo.avatar)}
+                size={28}
+                shape="circle"
+              />
               <Box ml={2}>
                 <Box display="flex" justifyContent="space-between" alignItems="center">
                   <Box fontSize={18}>{userInfo.fullName}</Box>

package/src/SessionManager/index.jsx

@@ -15,6 +15,7 @@ import useBrowser from '@arcblock/react-hooks/lib/useBrowser';
 
 import DidAvatar from '../Avatar';
 import DidAddress from '../Address';
+import { getUserAvatar } from '../Util';
 import FederatedLoginDetecter from './federated-login-detecter';
 import UserPopper from './user-popper';
 
@@ -75,7 +76,7 @@ function SessionManager({
   const [userOpen, setUserOpen] = useState(false);
 
   // base64 img maybe have some blank char, need encodeURIComponent to transform it
-  const avatar = session.user?.avatar?.replace(/\s/g, encodeURIComponent(' '));
+  const avatar = getUserAvatar(session.user?.avatar?.replace(/\s/g, encodeURIComponent(' ')));
   const currentRole = useMemo(
     () => session.user?.passports?.find((item) => item.name === session.user.role),
     [session.user]

package/src/Util/index.js

@@ -282,3 +282,15 @@ export const isEthereumDid = (did) => {
   }
   return true;
 };
+
+export const getUserAvatar = (avatar, size = 48) => {
+  if (!avatar) {
+    return avatar;
+  }
+
+  if (avatar.indexOf('/.well-known/service') >= 0 && window.blocklet?.capabilities?.httpImageFilter) {
+    return `${avatar}/resize?w=${size}&h=${size}`;
+  }
+
+  return avatar;
+};