@arcblock/ux 2.6.2 → 2.6.4

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

@@ -3,6 +3,7 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
+exports.appendParams = void 0;
 exports.detectWalletExtension = detectWalletExtension;
 exports.formatToDate = formatToDate;
 exports.formatToDatetime = formatToDatetime;
@@ -10,7 +11,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 +297,46 @@ const isEthereumDid = did => {
   }
   return true;
 };
-exports.isEthereumDid = isEthereumDid;
+
+/**
+ *
+ * @param {string} url 需要处理的 url
+ * @param {{imageFilter: 'crop'|'resize'; w?: number; h?: number; r?: 0|90|180|270}} params
+ * @returns
+ */
+exports.isEthereumDid = isEthereumDid;
+const appendParams = (url, params) => {
+  if (!params) {
+    return url;
+  }
+  try {
+    // HACK: 如果 url 中带有域名，则 urlInstance.origin 为 url 中的域名；否则，借用当前页面的 location.origin 作为域名来拼接一个 url
+    const urlInstance = new URL(url, window.location.origin);
+    Object.keys(params).forEach(key => {
+      urlInstance.searchParams.set(key, params[key]);
+    });
+    // HACK: 如果前后域名一致，代表前面已经借用了 location.origin，这个时候只需要返回 urlInstance.pathname + urlInstance.search 即可
+    if (urlInstance.origin === window.location.origin) {
+      return urlInstance.pathname + urlInstance.search;
+    }
+    return urlInstance.href;
+  } catch (_unused) {
+    return url;
+  }
+};
+exports.appendParams = appendParams;
+const getUserAvatar = function getUserAvatar(avatar) {
+  let size = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 48;
+  if (!avatar) {
+    return avatar;
+  }
+  if (avatar.indexOf('/.well-known/service') >= 0) {
+    return appendParams(avatar, {
+      imageFilter: 'resize',
+      w: size,
+      h: size
+    });
+  }
+  return avatar;
+};
+exports.getUserAvatar = getUserAvatar;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@arcblock/ux",
-  "version": "2.6.2",
+  "version": "2.6.4",
   "description": "Common used react components for arcblock products",
   "keywords": [
     "react",
@@ -47,11 +47,11 @@
   "peerDependencies": {
     "react": ">=18.1.0"
   },
-  "gitHead": "000fa204bf5852285b314d989dacbf3b3fc24a9b",
+  "gitHead": "15205ba8243468982ed04553234ca9c54eaafe6a",
   "dependencies": {
     "@arcblock/did-motif": "^1.1.13",
-    "@arcblock/icons": "^2.6.2",
-    "@arcblock/react-hooks": "^2.6.2",
+    "@arcblock/icons": "^2.6.4",
+    "@arcblock/react-hooks": "^2.6.4",
     "@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,45 @@ export const isEthereumDid = (did) => {
   }
   return true;
 };
+
+/**
+ *
+ * @param {string} url 需要处理的 url
+ * @param {{imageFilter: 'crop'|'resize'; w?: number; h?: number; r?: 0|90|180|270}} params
+ * @returns
+ */
+export const appendParams = (url, params) => {
+  if (!params) {
+    return url;
+  }
+  try {
+    // HACK: 如果 url 中带有域名，则 urlInstance.origin 为 url 中的域名；否则，借用当前页面的 location.origin 作为域名来拼接一个 url
+    const urlInstance = new URL(url, window.location.origin);
+    Object.keys(params).forEach((key) => {
+      urlInstance.searchParams.set(key, params[key]);
+    });
+    // HACK: 如果前后域名一致，代表前面已经借用了 location.origin，这个时候只需要返回 urlInstance.pathname + urlInstance.search 即可
+    if (urlInstance.origin === window.location.origin) {
+      return urlInstance.pathname + urlInstance.search;
+    }
+    return urlInstance.href;
+  } catch {
+    return url;
+  }
+};
+
+export const getUserAvatar = (avatar, size = 48) => {
+  if (!avatar) {
+    return avatar;
+  }
+
+  if (avatar.indexOf('/.well-known/service') >= 0) {
+    return appendParams(avatar, {
+      imageFilter: 'resize',
+      w: size,
+      h: size,
+    });
+  }
+
+  return avatar;
+};