@arcblock/ux 3.0.33 → 3.0.34

package/lib/Avatar/index.d.ts

@@ -21,6 +21,7 @@ export type AvatarProps = {
     shape?: "" | "rectangle" | "square" | "hexagon" | "circle";
     blockiesPadding?: true | false;
     responsive?: false | true;
+    useProxyFallback?: boolean;
 } & Omit<import('../Img').ImgProps, "size" | "src">;
 export { Avatar as AvatarProps };
 /**
@@ -34,6 +35,7 @@ export { Avatar as AvatarProps };
  *  shape?: '' | 'rectangle' | 'square' | 'hexagon' | 'circle';
  *  blockiesPadding?: true | false;
  *  responsive?: false | true;
+ *  useProxyFallback?: boolean;
  * } & Omit<import('../Img').ImgProps, 'size' | 'src'>} AvatarProps
  */
 /**
@@ -51,6 +53,7 @@ declare namespace Avatar {
         let shape: PropTypes.Requireable<string>;
         let blockiesPadding: PropTypes.Requireable<boolean>;
         let responsive: PropTypes.Requireable<boolean>;
+        let useProxyFallback: PropTypes.Requireable<boolean>;
     }
     export { propTypes_1 as propTypes };
 }

package/lib/Avatar/index.js

@@ -1,6 +1,6 @@
 import { jsx as o } from "react/jsx-runtime";
-import { useState as k, useMemo as P } from "react";
-import t from "prop-types";
+import { useState as I, useMemo as P } from "react";
+import a from "prop-types";
 import { ErrorBoundary as z } from "react-error-boundary";
 import { Shape as D } from "@arcblock/did-motif";
 import { Box as u } from "@mui/material";
@@ -13,12 +13,12 @@ import { DID_PREFIX as f } from "../Util/constant.js";
 function d({ ...s }) {
   const r = Object.assign({}, s);
   n(r.did) && (r.did = ""), n(r.size) && (r.size = 36), n(r.variant) && (r.variant = "default"), n(r.animation) && (r.animation = !1), n(r.shape) && (r.shape = ""), n(r.blockiesPadding) && (r.blockiesPadding = !0), n(r.responsive) && (r.responsive = !1);
-  const [c, h] = k(!1), g = E(r, d, []), { did: i = "", size: e, src: p, variant: b, animation: v, shape: x, blockiesPadding: y, responsive: w, ...a } = g, l = P(() => R(i) ? T.createIcon({
+  const [l, h] = I(!1), g = E(r, d, []), { did: i = "", size: e, src: p, variant: b, animation: v, shape: x, blockiesPadding: y, responsive: k, ...t } = g, c = P(() => R(i) ? T.createIcon({
     seed: i.replace(f, "").toLowerCase(),
     size: 8,
     scale: 16
   }).toDataURL() : null, [i]);
-  if (p && !c)
+  if (p && !l)
     return /* @__PURE__ */ o(
       m,
       {
@@ -26,8 +26,9 @@ function d({ ...s }) {
         src: p,
         alt: i,
         onError: () => h(!0),
-        ...a,
-        className: `avatar-img--${b} ${a?.className || ""}`,
+        ...t,
+        className: `avatar-img--${b} ${t?.className || ""}`,
+        useProxyFallback: !0,
         sx: {
           "& .avatar-img--rounded": {
             borderRadius: "4px",
@@ -37,17 +38,17 @@ function d({ ...s }) {
             borderRadius: "100%",
             overflow: "hidden"
           },
-          ...a.sx
+          ...t.sx
         }
       }
     );
-  if (l) {
+  if (c) {
     if (y) {
-      const I = e > 24 ? 4 : 2;
+      const w = e > 24 ? 4 : 2;
       return /* @__PURE__ */ o(
         u,
         {
-          ...a,
+          ...t,
           sx: {
             display: "flex",
             alignItems: "center",
@@ -63,13 +64,13 @@ function d({ ...s }) {
               borderRadius: `${Math.min(10, Math.floor(0.1 * e + 2))}px`,
               background: "#ddd"
             },
-            ...a.sx
+            ...t.sx
           },
-          children: /* @__PURE__ */ o("div", { className: "blocky-icon-inner", children: /* @__PURE__ */ o(m, { width: e * 0.7 - I * 2, src: l, alt: i }) })
+          children: /* @__PURE__ */ o("div", { className: "blocky-icon-inner", children: /* @__PURE__ */ o(m, { width: e * 0.7 - w * 2, src: c, alt: i }) })
         }
       );
     }
-    return /* @__PURE__ */ o(m, { ...a, width: e, src: l, alt: i, style: { marginRight: 4 } });
+    return /* @__PURE__ */ o(m, { ...t, width: e, src: c, alt: i, style: { marginRight: 4 } });
   }
   if (i)
     return /* @__PURE__ */ o(
@@ -79,25 +80,26 @@ function d({ ...s }) {
         size: e,
         animation: v,
         shape: D[(x || "").toUpperCase()],
-        responsive: w,
-        ...a
+        responsive: k,
+        ...t
       }
     );
   throw new Error(`Invalid DID: ${i}`);
 }
 d.propTypes = {
-  did: t.string,
-  size: t.number,
-  variant: t.oneOf(["circle", "rounded", "default"]),
+  did: a.string,
+  size: a.number,
+  variant: a.oneOf(["circle", "rounded", "default"]),
   // animation 仅对 did motif 有效
-  animation: t.bool,
+  animation: a.bool,
   // shape 仅对 did motif 有效, 明确指定 motif shape, 而非由 did role type 自动推断 shape
-  shape: t.oneOf(["", "rectangle", "square", "hexagon", "circle"]),
-  blockiesPadding: t.bool,
-  responsive: t.bool
+  shape: a.oneOf(["", "rectangle", "square", "hexagon", "circle"]),
+  blockiesPadding: a.bool,
+  responsive: a.bool,
+  useProxyFallback: a.bool
 };
 function $(s) {
-  const r = s.size || 36, c = { rounded: "4px", circle: "100%" }[s.variant] || 0;
+  const r = s.size || 36, l = { rounded: "4px", circle: "100%" }[s.variant] || 0;
   return /* @__PURE__ */ o(
     z,
     {
@@ -108,7 +110,7 @@ function $(s) {
             width: r,
             height: r,
             bgcolor: "grey.300",
-            borderRadius: c
+            borderRadius: l
           }
         }
       ),

package/lib/DIDConnect/auth-apps/auth-apps-info.js

@@ -1,21 +1,12 @@
-import { jsxs as a, jsx as o } from "react/jsx-runtime";
-import { Box as r, Typography as n } from "@mui/material";
+import { jsxs as r, jsx as t } from "react/jsx-runtime";
+import { Box as e, Typography as l } from "@mui/material";
 import i from "../../Img/index.js";
-import { BLOCKLET_SERVICE_PATH_PREFIX as s } from "../../Util/constant.js";
-const l = (e) => {
-  if (!e) return "";
-  try {
-    return new URL(e).protocol !== "https:" ? (console.warn("Image URL must use HTTPS protocol:", e), "") : `${s}/proxy?url=${e}`;
-  } catch (t) {
-    return console.warn("Invalid image URL format:", e, t), "";
-  }
-};
-function g({
-  requestAppInfo: e,
-  currentAppInfo: t
+function m({
+  requestAppInfo: a,
+  currentAppInfo: o
 }) {
-  return /* @__PURE__ */ a(
-    r,
+  return /* @__PURE__ */ r(
+    e,
     {
       sx: {
         textAlign: "center",
@@ -25,8 +16,8 @@ function g({
         gap: 2
       },
       children: [
-        /* @__PURE__ */ a(
-          r,
+        /* @__PURE__ */ r(
+          e,
           {
             sx: {
               display: "flex",
@@ -34,18 +25,9 @@ function g({
               justifyContent: "center"
             },
             children: [
-              /* @__PURE__ */ o(
-                i,
-                {
-                  src: t.appLogo,
-                  alt: "Server",
-                  width: 48,
-                  height: 48,
-                  fallback: l(t.appLogo)
-                }
-              ),
-              /* @__PURE__ */ a(
-                r,
+              /* @__PURE__ */ t(i, { src: o.appLogo, alt: "Server", width: 48, height: 48, useProxyFallback: !0 }),
+              /* @__PURE__ */ r(
+                e,
                 {
                   sx: {
                     mx: 2,
@@ -60,27 +42,18 @@ function g({
                     }
                   },
                   children: [
-                    /* @__PURE__ */ o(r, { className: "dot" }),
-                    /* @__PURE__ */ o(r, { className: "dot" }),
-                    /* @__PURE__ */ o(r, { className: "dot" })
+                    /* @__PURE__ */ t(e, { className: "dot" }),
+                    /* @__PURE__ */ t(e, { className: "dot" }),
+                    /* @__PURE__ */ t(e, { className: "dot" })
                   ]
                 }
               ),
-              /* @__PURE__ */ o(
-                i,
-                {
-                  src: e.appLogo,
-                  alt: e.appName,
-                  width: 48,
-                  height: 48,
-                  fallback: l(e.appLogo)
-                }
-              )
+              /* @__PURE__ */ t(i, { src: a.appLogo, alt: a.appName, width: 48, height: 48, useProxyFallback: !0 })
             ]
           }
         ),
-        /* @__PURE__ */ a(
-          n,
+        /* @__PURE__ */ r(
+          l,
           {
             sx: {
               mb: 1,
@@ -89,7 +62,7 @@ function g({
             children: [
               "Authorize",
               " ",
-              /* @__PURE__ */ o(r, { component: "span", sx: { color: "primary.main" }, children: e.appName })
+              /* @__PURE__ */ t(e, { component: "span", sx: { color: "primary.main" }, children: a.appName })
             ]
           }
         )
@@ -98,5 +71,5 @@ function g({
   );
 }
 export {
-  g as default
+  m as default
 };

package/lib/Img/index.d.ts

@@ -19,6 +19,13 @@ export type ImgExProps = {
     lazy?: boolean | undefined;
     placeholder?: string | undefined;
     fallback?: string | undefined;
+    /**
+     * - 是否使用代理 fallback, 用于解决 CSP 的问题
+     */
+    /**
+     * - 是否使用代理 fallback, 用于解决 CSP 的问题
+     */
+    useProxyFallback?: boolean | undefined;
     className?: string | undefined;
     onError?: Function | undefined;
     onSuccess?: Function | undefined;
@@ -29,7 +36,7 @@ export type ImgProps = ImgExProps & import('@mui/material').BoxProps;
  * @param {ImgProps} props
  * @returns {React.ReactComponentElement}
  */
-declare function Img({ lazy, width, height, repeat, ratio, alt, size, position, src, placeholder, fallback, style, className, onError, onSuccess, ...rest }: ImgProps): import('react').ReactComponentElement<any, Pick<any, string | number | symbol>>;
+declare function Img({ lazy, width, height, repeat, ratio, alt, size, position, src, useProxyFallback, placeholder, fallback, style, className, onError, onSuccess, ...rest }: ImgProps): import('react').ReactComponentElement<any, Pick<any, string | number | symbol>>;
 declare namespace Img {
     namespace propTypes {
         let src: PropTypes.Validator<string>;
@@ -47,5 +54,6 @@ declare namespace Img {
         let className: PropTypes.Requireable<string>;
         let onError: PropTypes.Requireable<(...args: any[]) => any>;
         let onSuccess: PropTypes.Requireable<(...args: any[]) => any>;
+        let useProxyFallback: PropTypes.Requireable<boolean>;
     }
 }

package/lib/Img/index.js

@@ -1,91 +1,101 @@
-import { jsx as i, jsxs as X } from "react/jsx-runtime";
-import { useState as h, useMemo as b, useEffect as x } from "react";
+import { jsx as s, jsxs as F } from "react/jsx-runtime";
+import { useState as R, useMemo as d, useEffect as w } from "react";
 import e from "prop-types";
-import { useInView as _ } from "react-intersection-observer";
-import q from "@iconify-icons/material-symbols/warning-rounded";
-import B from "@iconify-icons/material-symbols/image-rounded";
-import { Icon as y } from "@iconify/react";
-import { Box as C } from "@mui/material";
-import S from "lodash/noop";
-import { mergeSx as D } from "../Util/style.js";
-const M = "Img", N = {
-  root: `${M}-root`
+import { useInView as V } from "react-intersection-observer";
+import W from "@iconify-icons/material-symbols/warning-rounded";
+import X from "@iconify-icons/material-symbols/image-rounded";
+import { Icon as k } from "@iconify/react";
+import { Box as B } from "@mui/material";
+import $ from "lodash/noop";
+import { mergeSx as q } from "../Util/style.js";
+import { BLOCKLET_SERVICE_PATH_PREFIX as A } from "../Util/constant.js";
+const D = (r) => {
+  if (!r) return "";
+  try {
+    return new URL(r).protocol !== "https:" ? (console.warn("Image URL must use HTTPS protocol:", r), "") : `${A}/proxy?url=${encodeURIComponent(r)}`;
+  } catch (t) {
+    return console.warn("Invalid image URL format:", r, t), "";
+  }
+}, K = "Img", v = {
+  root: `${K}-root`
 };
-function O({
-  lazy: v = !0,
-  width: a = null,
-  height: g = null,
-  repeat: w = "no-repeat",
-  ratio: $ = 1,
-  alt: k = null,
-  size: u = "cover",
-  position: d = "top center",
-  src: s,
-  placeholder: l = null,
-  fallback: t = null,
-  style: R = null,
-  className: E = "",
-  onError: j = S,
-  onSuccess: z = S,
-  ...p
+function M({
+  lazy: r = !0,
+  width: t = null,
+  height: f = null,
+  repeat: E = "no-repeat",
+  ratio: N = 1,
+  alt: P = null,
+  size: p = "cover",
+  position: I = "top center",
+  src: n,
+  useProxyFallback: b = !1,
+  // 是否使用代理 fallback, 用于解决 CSP 的问题
+  placeholder: c = null,
+  fallback: m = null,
+  style: T = null,
+  className: j = "",
+  onError: h = $,
+  onSuccess: L = $,
+  ...y
 }) {
-  const [P, f] = v ? _({ threshold: 0, triggerOnce: !0 }) : [null, !0], [o, m] = h("init"), [n, I] = h(!1), c = b(() => {
+  const [U, x] = r ? V({ threshold: 0, triggerOnce: !0 }) : [null, !0], [o, g] = R("init"), [l, S] = R(!1), a = d(() => m || (b && n ? D(n) : m), [n, b, m]), u = d(() => {
     switch (o) {
       case "init":
       case "loading":
-        return l;
+        return c;
       case "error":
-        return n ? null : t;
+        return l ? null : a;
       case "loaded":
-        return s;
+        return n;
       default:
         return null;
     }
-  }, [l, t, s, o, n]), T = a && g ? 100 * g / a : $ * 100, W = b(
+  }, [c, a, n, o, l]), _ = t && f ? 100 * f / t : N * 100, C = d(
     () => ({
-      backgroundImage: c ? `url(${c})` : "",
-      backgroundPosition: d,
-      backgroundSize: u,
-      backgroundRepeat: w,
-      paddingTop: `${T}%`
+      backgroundImage: u ? `url(${u})` : "",
+      backgroundPosition: I,
+      backgroundSize: p,
+      backgroundRepeat: E,
+      paddingTop: `${_}%`
     }),
     // eslint-disable-next-line react-hooks/exhaustive-deps
-    [c, d, u, o]
-  ), F = {
-    ...R,
+    [u, I, p, o]
+  ), H = {
+    ...T,
     display: "inline-block",
-    width: a ? `${a}px` : "100%"
+    width: t ? `${t}px` : "100%"
   };
-  function H() {
-    const r = new Image();
-    r.src = s, m("loading"), I(!1), r.onload = () => {
-      m("loaded"), z();
-    }, r.onerror = (V) => {
-      m("error"), j(V);
+  function O() {
+    const i = new Image();
+    i.src = n, g("loading"), S(!1), i.onload = () => {
+      g("loaded"), L();
+    }, i.onerror = () => {
+      g("error");
     };
   }
-  return x(() => {
-    f && H();
-  }, [f]), x(() => {
-    if (o === "error" && t && !n) {
-      const r = new Image();
-      r.src = t, r.onload = () => {
-      }, r.onerror = () => {
-        I(!0);
+  return w(() => {
+    x && O();
+  }, [x]), w(() => {
+    if (o === "error" && a && !l) {
+      const i = new Image();
+      i.src = a, i.onload = () => {
+      }, i.onerror = (z) => {
+        S(!0), o === "error" && h(z);
       };
     }
-  }, [o, t, n]), // paddingTop 要求元素本身的宽度为 100%，所以只能加一个外层元素去限制宽度
-  /* @__PURE__ */ i(
-    C,
+  }, [o, a, l, h]), // paddingTop 要求元素本身的宽度为 100%，所以只能加一个外层元素去限制宽度
+  /* @__PURE__ */ s(
+    B,
     {
       "data-id": "2",
-      ref: P,
-      style: F,
+      ref: U,
+      style: H,
       className: "arcblock_ux_img-wrapper",
-      ...p,
-      sx: D(
+      ...y,
+      sx: q(
         {
-          [`& .${N.root}`]: {
+          [`& .${v.root}`]: {
             position: "relative",
             overflow: "hidden",
             "& .image--state, & .image--img": {
@@ -117,17 +127,17 @@ function O({
             }
           }
         },
-        p.sx
+        y.sx
       ),
-      children: /* @__PURE__ */ X("div", { className: `image ${E} ${N.root}`, style: W, children: [
-        (n || !t && o === "error") && /* @__PURE__ */ i("div", { className: "image--state", title: "Image load error", children: /* @__PURE__ */ i(y, { icon: q, className: "image--icon" }) }),
-        !l && o === "loading" && /* @__PURE__ */ i("div", { className: "image--state", title: "loading image", children: /* @__PURE__ */ i(y, { icon: B, className: "image--icon" }) }),
-        o === "loaded" && /* @__PURE__ */ i("img", { className: "image--img", src: s, alt: k })
+      children: /* @__PURE__ */ F("div", { className: `image ${j} ${v.root}`, style: C, children: [
+        (l || !a && o === "error") && /* @__PURE__ */ s("div", { className: "image--state", title: "Image load error", children: /* @__PURE__ */ s(k, { icon: W, className: "image--icon" }) }),
+        !c && o === "loading" && /* @__PURE__ */ s("div", { className: "image--state", title: "loading image", children: /* @__PURE__ */ s(k, { icon: X, className: "image--icon" }) }),
+        o === "loaded" && /* @__PURE__ */ s("img", { className: "image--img", src: n, alt: P })
       ] })
     }
   );
 }
-O.propTypes = {
+M.propTypes = {
   src: e.string.isRequired,
   alt: e.string,
   size: e.string,
@@ -142,8 +152,9 @@ O.propTypes = {
   fallback: e.string,
   className: e.string,
   onError: e.func,
-  onSuccess: e.func
+  onSuccess: e.func,
+  useProxyFallback: e.bool
 };
 export {
-  O as default
+  M as default
 };

package/lib/UserCard/components.js

@@ -1,17 +1,17 @@
 import { jsx as a } from "react/jsx-runtime";
-import { Box as l, Avatar as f } from "@mui/material";
-import p from "../Avatar/index.js";
-import { createNameOnlyAvatar as u } from "./utils.js";
-const N = (r, t = 48, n = void 0, e = void 0, c = !1) => {
-  const o = (i) => {
+import { Box as o, Avatar as f } from "@mui/material";
+import u from "../Avatar/index.js";
+import { createNameOnlyAvatar as x } from "./utils.js";
+const N = (r, t = 48, c = void 0, e = void 0, l = !1) => {
+  const n = (i) => {
     e?.(r, i);
   };
   if (!r.avatar) {
-    const i = u(r), { className: s, style: d, alt: m } = n || {};
+    const i = x(r), { className: s, style: d, alt: m } = c || {};
     return /* @__PURE__ */ a(
       f,
       {
-        onClick: o,
+        onClick: n,
         className: s,
         style: d,
         alt: m,
@@ -19,7 +19,7 @@ const N = (r, t = 48, n = void 0, e = void 0, c = !1) => {
           width: t,
           height: t,
           fontSize: t * 0.4,
-          cursor: c || e ? "pointer" : "default"
+          cursor: l || e ? "pointer" : "default"
         },
         variant: "circular",
         children: i
@@ -27,30 +27,31 @@ const N = (r, t = 48, n = void 0, e = void 0, c = !1) => {
     );
   }
   return /* @__PURE__ */ a(
-    l,
+    o,
     {
       className: "user-card__avatar",
       sx: {
         display: "flex"
       },
       children: /* @__PURE__ */ a(
-        p,
+        u,
         {
           size: t,
           did: r.did,
           variant: "circle",
+          useProxyFallback: !0,
           style: {
-            cursor: c || e ? "pointer" : "default"
+            cursor: l || e ? "pointer" : "default"
           },
-          onClick: o,
+          onClick: n,
           src: r.avatar,
           alt: r.fullName || "",
-          ...n || {}
+          ...c || {}
         }
       )
     }
   );
-}, _ = (r, t = 120) => r ? /* @__PURE__ */ a(l, { sx: { maxWidth: t }, className: "user-card__top-right-content", children: r() }) : null;
+}, _ = (r, t = 120) => r ? /* @__PURE__ */ a(o, { sx: { maxWidth: t }, className: "user-card__top-right-content", children: r() }) : null;
 export {
   N as renderAvatar,
   _ as renderTopRight

package/lib/UserCard/index.js

@@ -1,34 +1,44 @@
 import { jsx as t } from "react/jsx-runtime";
-import { useRef as c, useState as h, useEffect as C } from "react";
-import { CardType as i } from "./types.js";
-import v from "./Cards/avatar-only.js";
-import f from "./Cards/index.js";
-import y from "./Container/dialog.js";
-import A from "./Container/card.js";
-import D from "../Avatar/index.js";
-import { isUserDid as P, getUserByDid as S } from "./utils.js";
+import { useRef as v, useState as C, useEffect as y, useMemo as P } from "react";
+import { CardType as o } from "./types.js";
+import A from "./Cards/avatar-only.js";
+import m from "./Cards/index.js";
+import D from "./Container/dialog.js";
+import S from "./Container/card.js";
+import w from "../Avatar/index.js";
+import { isUserDid as x, getUserByDid as U } from "./utils.js";
 function L(e) {
   if (!e) return null;
   let r = "";
   return e.fullName ? r = e.fullName.charAt(0).toUpperCase() : e.email ? r = e.email.split("@")[0].charAt(0).toUpperCase() : r = e.did ? e.did.charAt(0).toUpperCase() : "?", r;
 }
-function g(e) {
-  const { cardType: r = i.Detailed, showHoverCard: d } = e, n = d !== void 0 ? d : r === i.AvatarOnly, m = c(null), [a, o] = h(() => e.user || null);
-  if (C(() => {
-    let u = !0;
-    return e.user ? o(e.user) : e.did && P(e.did) && !e.user && S(e.did).then((s) => {
-      u && o(s || { fullName: "Anonymous", did: e.did, avatar: "" });
+function B(e) {
+  const { cardType: r = o.Detailed, showHoverCard: l } = e, u = l !== void 0 ? l : r === o.AvatarOnly, c = v(null), [i, f] = C(() => e.user || null);
+  y(() => {
+    let a = !0;
+    return e.user ? f(e.user) : e.did && x(e.did) && !e.user && U(e.did).then((d) => {
+      a && f(d || { fullName: "Anonymous", did: e.did, avatar: "" });
     }), () => {
-      u = !1;
+      a = !1;
     };
-  }, [e.did, e.user]), !a)
-    return /* @__PURE__ */ t(D, { did: e.did, size: e.avatarSize, ...e.avatarProps });
-  const l = () => /* @__PURE__ */ t(y, { sx: e.popupSx, children: /* @__PURE__ */ t(
-    f,
+  }, [e.did, e.user]);
+  const n = P(() => {
+    if (!i)
+      return null;
+    const { avatar: a = "", ...d } = i, h = a.split("?")[1];
+    return a && !h ? {
+      ...d,
+      avatar: `${a}?imageFilter=resize&w=48&h=48`
+    } : i;
+  }, [i]);
+  if (!n)
+    return /* @__PURE__ */ t(w, { did: e.did, size: e.avatarSize, useProxyFallback: !0, ...e.avatarProps });
+  const s = () => /* @__PURE__ */ t(D, { sx: e.popupSx, children: /* @__PURE__ */ t(
+    m,
     {
       ...e,
       shouldShowHoverCard: !1,
-      user: a,
+      user: n,
       avatarProps: e.popupAvatarProps,
       shortenLabelProps: e.popupShortenLabelProps || e.shortenLabelProps,
       renderFields: e.popupRenderFields,
@@ -38,25 +48,25 @@ function g(e) {
       showDid: e.popupShowDid || e.showDid
     }
   ) });
-  return r === i.AvatarOnly ? /* @__PURE__ */ t(
-    v,
+  return r === o.AvatarOnly ? /* @__PURE__ */ t(
+    A,
     {
       ...e,
-      shouldShowHoverCard: n,
-      renderCardContent: l,
-      user: a
+      shouldShowHoverCard: u,
+      renderCardContent: s,
+      user: n
     }
-  ) : /* @__PURE__ */ t(A, { containerRef: m, cardType: r, sx: e.sx, children: /* @__PURE__ */ t(
-    f,
+  ) : /* @__PURE__ */ t(S, { containerRef: c, cardType: r, sx: e.sx, children: /* @__PURE__ */ t(
+    m,
     {
       ...e,
-      shouldShowHoverCard: n,
-      renderCardContent: l,
-      user: a
+      shouldShowHoverCard: u,
+      renderCardContent: s,
+      user: n
     }
   ) });
 }
 export {
   L as createNameOnlyAvatar,
-  g as default
+  B as default
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@arcblock/ux",
-  "version": "3.0.33",
+  "version": "3.0.34",
   "description": "Common used react components for arcblock products",
   "keywords": [
     "react",
@@ -60,16 +60,16 @@
     "react": "^19.0.0",
     "react-router-dom": "^6.22.3"
   },
-  "gitHead": "4b6fbddbcafd122684b82a0b452ca34fc6d1a6ab",
+  "gitHead": "e2822eb021fb9aebfcf80f71dd4da4ca76b2372b",
   "dependencies": {
-    "@arcblock/bridge": "3.0.33",
+    "@arcblock/bridge": "3.0.34",
     "@arcblock/did": "^1.21.0",
     "@arcblock/did-motif": "^1.1.14",
-    "@arcblock/icons": "3.0.33",
-    "@arcblock/nft-display": "3.0.33",
-    "@arcblock/react-hooks": "3.0.33",
+    "@arcblock/icons": "3.0.34",
+    "@arcblock/nft-display": "3.0.34",
+    "@arcblock/react-hooks": "3.0.34",
     "@blocklet/js-sdk": "^1.16.46",
-    "@blocklet/theme": "3.0.33",
+    "@blocklet/theme": "3.0.34",
     "@fontsource/roboto": "~5.1.1",
     "@fontsource/ubuntu-mono": "^5.2.6",
     "@iconify-icons/logos": "^1.2.36",

package/src/Avatar/index.jsx

@@ -23,6 +23,7 @@ import { DID_PREFIX } from '../Util/constant';
  *  shape?: '' | 'rectangle' | 'square' | 'hexagon' | 'circle';
  *  blockiesPadding?: true | false;
  *  responsive?: false | true;
+ *  useProxyFallback?: boolean;
  * } & Omit<import('../Img').ImgProps, 'size' | 'src'>} AvatarProps
  */
 
@@ -84,6 +85,7 @@ function Avatar({ ...rawProps }) {
         {...rest}
         // HACK: 这个 className 是传递给子元素的，所以下面的 sx 需要通过子元素选择器来写样式
         className={`avatar-img--${variant} ${rest?.className || ''}`}
+        useProxyFallback
         sx={{
           '& .avatar-img--rounded': {
             borderRadius: '4px',
@@ -159,6 +161,7 @@ Avatar.propTypes = {
   shape: PropTypes.oneOf(['', 'rectangle', 'square', 'hexagon', 'circle']),
   blockiesPadding: PropTypes.bool,
   responsive: PropTypes.bool,
+  useProxyFallback: PropTypes.bool,
 };
 
 /**

package/src/DIDConnect/auth-apps/auth-apps-info.tsx

@@ -1,28 +1,5 @@
 import { Box, Typography } from '@mui/material';
 import Img from '../../Img';
-import { BLOCKLET_SERVICE_PATH_PREFIX } from '../../Util/constant';
-
-const getProxyImageUrl = (url: string) => {
-  if (!url) return '';
-
-  try {
-    // 检查是否是一个有效的URL
-    const urlObj = new URL(url);
-
-    // 检查协议是否是https
-    if (urlObj.protocol !== 'https:') {
-      console.warn('Image URL must use HTTPS protocol:', url);
-      return '';
-    }
-
-    // 返回代理URL
-    return `${BLOCKLET_SERVICE_PATH_PREFIX}/proxy?url=${url}`;
-  } catch (error) {
-    // URL construction failed, indicating invalid URL format
-    console.warn('Invalid image URL format:', url, error);
-    return '';
-  }
-};
 
 export type RequestAppInfo = {
   appLogo: string;
@@ -59,13 +36,7 @@ export default function AuthAppsInfo({
           justifyContent: 'center',
         }}>
         {/* FIXME: @zhanghan 增加 hover 的效果 */}
-        <Img
-          src={currentAppInfo.appLogo}
-          alt="Server"
-          width={48}
-          height={48}
-          fallback={getProxyImageUrl(currentAppInfo.appLogo)}
-        />
+        <Img src={currentAppInfo.appLogo} alt="Server" width={48} height={48} useProxyFallback />
 
         <Box
           sx={{
@@ -86,13 +57,7 @@ export default function AuthAppsInfo({
         </Box>
 
         {/* FIXME: @zhanghan 增加 hover 的效果 */}
-        <Img
-          src={requestAppInfo.appLogo}
-          alt={requestAppInfo.appName}
-          width={48}
-          height={48}
-          fallback={getProxyImageUrl(requestAppInfo.appLogo)}
-        />
+        <Img src={requestAppInfo.appLogo} alt={requestAppInfo.appName} width={48} height={48} useProxyFallback />
       </Box>
 
       <Typography

package/src/Img/index.jsx

@@ -7,6 +7,29 @@ import { Icon } from '@iconify/react';
 import { Box } from '@mui/material';
 import noop from 'lodash/noop';
 import { mergeSx } from '../Util/style';
+import { BLOCKLET_SERVICE_PATH_PREFIX } from '../Util/constant';
+
+const getProxyImageUrl = (url) => {
+  if (!url) return '';
+
+  try {
+    // 检查是否是一个有效的URL
+    const urlObj = new URL(url);
+
+    // 检查协议是否是https
+    if (urlObj.protocol !== 'https:') {
+      console.warn('Image URL must use HTTPS protocol:', url);
+      return '';
+    }
+
+    // 返回代理URL
+    return `${BLOCKLET_SERVICE_PATH_PREFIX}/proxy?url=${encodeURIComponent(url)}`;
+  } catch (error) {
+    // URL construction failed, indicating invalid URL format
+    console.warn('Invalid image URL format:', url, error);
+    return '';
+  }
+};
 
 /**
  * @typedef {Object} ImgExProps
@@ -22,6 +45,7 @@ import { mergeSx } from '../Util/style';
  * @property {boolean} [lazy=true]
  * @property {string} [placeholder]
  * @property {string} [fallback]
+ * @property {boolean} [useProxyFallback=false] - 是否使用代理 fallback, 用于解决 CSP 的问题
  * @property {string} [className='']
  * @property {function} [onError=() => {}]
  * @property {function} [onSuccess=() => {}]
@@ -52,6 +76,7 @@ function Img({
   size = 'cover',
   position = 'top center',
   src,
+  useProxyFallback = false, // 是否使用代理 fallback, 用于解决 CSP 的问题
   placeholder = null,
   fallback = null,
   style = null,
@@ -66,19 +91,29 @@ function Img({
   const [imgState, setImgState] = useState('init');
   const [fallbackError, setFallbackError] = useState(false);
 
+  const fallbackSrc = useMemo(() => {
+    if (fallback) {
+      return fallback;
+    }
+    if (useProxyFallback && src) {
+      return getProxyImageUrl(src);
+    }
+    return fallback;
+  }, [src, useProxyFallback, fallback]);
+
   const actualSrc = useMemo(() => {
     switch (imgState) {
       case 'init':
       case 'loading':
         return placeholder;
       case 'error':
-        return fallbackError ? null : fallback;
+        return fallbackError ? null : fallbackSrc;
       case 'loaded':
         return src;
       default:
         return null;
     }
-  }, [placeholder, fallback, src, imgState, fallbackError]);
+  }, [placeholder, fallbackSrc, src, imgState, fallbackError]);
 
   const actualRatio = width && height ? (100 * height) / width : ratio * 100;
 
@@ -112,9 +147,8 @@ function Img({
       setImgState('loaded');
       onSuccess();
     };
-    img.onerror = (err) => {
+    img.onerror = () => {
       setImgState('error');
-      onError(err);
     };
   }
 
@@ -125,18 +159,21 @@ function Img({
 
   // 处理 fallback 加载
   useEffect(() => {
-    if (imgState === 'error' && fallback && !fallbackError) {
+    if (imgState === 'error' && fallbackSrc && !fallbackError) {
       const fallbackImg = new Image();
-      fallbackImg.src = fallback;
+      fallbackImg.src = fallbackSrc;
       fallbackImg.onload = () => {
         // fallback 加载成功，保持在 error 状态但显示 fallback
       };
-      fallbackImg.onerror = () => {
+      fallbackImg.onerror = (err) => {
         // fallback 也加载失败
         setFallbackError(true);
+        if (imgState === 'error') {
+          onError(err);
+        }
       };
     }
-  }, [imgState, fallback, fallbackError]);
+  }, [imgState, fallbackSrc, fallbackError, onError]);
 
   return (
     // paddingTop 要求元素本身的宽度为 100%，所以只能加一个外层元素去限制宽度
@@ -183,7 +220,7 @@ function Img({
         rest.sx
       )}>
       <div className={`image ${className} ${classes.root}`} style={mergedStyle}>
-        {(fallbackError || (!fallback && imgState === 'error')) && (
+        {(fallbackError || (!fallbackSrc && imgState === 'error')) && (
           <div className="image--state" title="Image load error">
             <Icon icon={WarningRoundedIcon} className="image--icon" />
           </div>
@@ -215,6 +252,7 @@ Img.propTypes = {
   className: PropTypes.string,
   onError: PropTypes.func,
   onSuccess: PropTypes.func,
+  useProxyFallback: PropTypes.bool,
 };
 
 export default Img;

package/src/UserCard/components.tsx

@@ -51,6 +51,7 @@ export const renderAvatar = (
         size={avatarSize}
         did={user.did}
         variant="circle"
+        useProxyFallback
         style={{
           cursor: shouldShowHoverCard || onAvatarClick ? 'pointer' : 'default',
         }}

package/src/UserCard/index.tsx

@@ -1,4 +1,4 @@
-import { useEffect, useRef, useState } from 'react';
+import { useEffect, useMemo, useRef, useState } from 'react';
 import type { User } from './types';
 import { UserCardProps, CardType } from './types';
 import AvatarOnlyCard from './Cards/avatar-only';
@@ -55,9 +55,26 @@ function UserCard(props: UserCardProps) {
     };
   }, [props.did, props.user]);
 
+  // 补全 avatar 的 imageFilter 信息，以提高性能
+  const userInfo = useMemo(() => {
+    if (!user) {
+      return null;
+    }
+
+    const { avatar = '', ...rest } = user;
+    const avatarParam = avatar.split('?')[1];
+    if (avatar && !avatarParam) {
+      return {
+        ...rest,
+        avatar: `${avatar}?imageFilter=resize&w=48&h=48`,
+      };
+    }
+    return user;
+  }, [user]);
+
   // 如果不存在，则使用 did 渲染头像
-  if (!user) {
-    return <Avatar did={props.did} size={props.avatarSize} {...props.avatarProps} />;
+  if (!userInfo) {
+    return <Avatar did={props.did} size={props.avatarSize} useProxyFallback {...props.avatarProps} />;
   }
 
   // user 存在，则使用 user 渲染头像
@@ -68,7 +85,7 @@ function UserCard(props: UserCardProps) {
         <DetailedCard
           {...props}
           shouldShowHoverCard={false}
-          user={user!}
+          user={userInfo!}
           avatarProps={props.popupAvatarProps}
           shortenLabelProps={props.popupShortenLabelProps || props.shortenLabelProps}
           renderFields={props.popupRenderFields}
@@ -88,7 +105,7 @@ function UserCard(props: UserCardProps) {
         {...props}
         shouldShowHoverCard={shouldShowHoverCard}
         renderCardContent={renderCardContent}
-        user={user!}
+        user={userInfo!}
       />
     );
   }
@@ -100,7 +117,7 @@ function UserCard(props: UserCardProps) {
         {...props}
         shouldShowHoverCard={shouldShowHoverCard}
         renderCardContent={renderCardContent}
-        user={user!}
+        user={userInfo!}
       />
     </CardContainer>
   );