@arcblock/ux 3.0.32 → 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,83 +1,101 @@
-import { jsx as t, jsxs as W } from "react/jsx-runtime";
-import { useState as H, useMemo as f, useEffect as V } 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 X } from "react-intersection-observer";
-import _ from "@iconify-icons/material-symbols/warning-rounded";
-import q from "@iconify-icons/material-symbols/image-rounded";
-import { Icon as h } from "@iconify/react";
+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 I from "lodash/noop";
-import { mergeSx as C } from "../Util/style.js";
-const D = "Img", b = {
-  root: `${D}-root`
+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 F({
-  lazy: x = !0,
-  width: i = null,
-  height: c = null,
-  repeat: y = "no-repeat",
-  ratio: S = 1,
-  alt: N = null,
-  size: g = "cover",
-  position: u = "top center",
-  src: r,
-  placeholder: n = null,
-  fallback: a = null,
-  style: v = null,
-  className: $ = "",
-  onError: k = I,
-  onSuccess: w = I,
-  ...d
+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 [R, p] = x ? X({ threshold: 0, triggerOnce: !0 }) : [null, !0], [o, s] = H("init"), m = f(() => {
+  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 n;
+        return c;
       case "error":
-        return a;
+        return l ? null : a;
       case "loaded":
-        return r;
+        return n;
       default:
         return null;
     }
-  }, [n, a, r, o]), j = i && c ? 100 * c / i : S * 100, z = f(
+  }, [c, a, n, o, l]), _ = t && f ? 100 * f / t : N * 100, C = d(
     () => ({
-      backgroundImage: m ? `url(${m})` : "",
-      backgroundPosition: u,
-      backgroundSize: g,
-      backgroundRepeat: y,
-      paddingTop: `${j}%`
+      backgroundImage: u ? `url(${u})` : "",
+      backgroundPosition: I,
+      backgroundSize: p,
+      backgroundRepeat: E,
+      paddingTop: `${_}%`
     }),
     // eslint-disable-next-line react-hooks/exhaustive-deps
-    [m, u, g, o]
-  ), E = {
-    ...v,
+    [u, I, p, o]
+  ), H = {
+    ...T,
     display: "inline-block",
-    width: i ? `${i}px` : "100%"
+    width: t ? `${t}px` : "100%"
   };
-  function P() {
-    const l = new Image();
-    l.src = r, s("loading"), l.onload = () => {
-      s("loaded"), w();
-    }, l.onerror = (T) => {
-      s("error"), k(T);
+  function O() {
+    const i = new Image();
+    i.src = n, g("loading"), S(!1), i.onload = () => {
+      g("loaded"), L();
+    }, i.onerror = () => {
+      g("error");
     };
   }
-  return V(() => {
-    p && P();
-  }, [p]), // paddingTop 要求元素本身的宽度为 100%，所以只能加一个外层元素去限制宽度
-  /* @__PURE__ */ t(
+  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, a, l, h]), // paddingTop 要求元素本身的宽度为 100%，所以只能加一个外层元素去限制宽度
+  /* @__PURE__ */ s(
     B,
     {
       "data-id": "2",
-      ref: R,
-      style: E,
+      ref: U,
+      style: H,
       className: "arcblock_ux_img-wrapper",
-      ...d,
-      sx: C(
+      ...y,
+      sx: q(
         {
-          [`& .${b.root}`]: {
+          [`& .${v.root}`]: {
             position: "relative",
             overflow: "hidden",
             "& .image--state, & .image--img": {
@@ -109,17 +127,17 @@ function F({
             }
           }
         },
-        d.sx
+        y.sx
       ),
-      children: /* @__PURE__ */ W("div", { className: `image ${$} ${b.root}`, style: z, children: [
-        !a && o === "error" && /* @__PURE__ */ t("div", { className: "image--state", title: "loading image", children: /* @__PURE__ */ t(h, { icon: _, className: "image--icon" }) }),
-        !n && o === "loading" && /* @__PURE__ */ t("div", { className: "image--state", title: "Image load error", children: /* @__PURE__ */ t(h, { icon: q, className: "image--icon" }) }),
-        o === "loaded" && /* @__PURE__ */ t("img", { className: "image--img", src: r, alt: N })
+      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 })
       ] })
     }
   );
 }
-F.propTypes = {
+M.propTypes = {
   src: e.string.isRequired,
   alt: e.string,
   size: e.string,
@@ -134,8 +152,9 @@ F.propTypes = {
   fallback: e.string,
   className: e.string,
   onError: e.func,
-  onSuccess: e.func
+  onSuccess: e.func,
+  useProxyFallback: e.bool
 };
 export {
-  F as default
+  M as default
 };

package/lib/LoadingMask/index.js

@@ -1,15 +1,15 @@
-import { jsxs as h, jsx as a } from "react/jsx-runtime";
+import { jsxs as g, jsx as i } from "react/jsx-runtime";
 import { Box as n } from "@mui/material";
-function b({
+function x({
   size: s = 64,
-  padding: d = void 0,
-  borderWidth: l = void 0,
-  borderRadius: f = void 0,
+  padding: l = void 0,
+  borderWidth: f = void 0,
+  borderRadius: d = void 0,
   duration: c = void 0,
-  children: g
+  children: m
 }) {
-  const t = s, i = f ?? t / 8, e = l ?? t / 32, o = d ?? t * 0.25 - e, p = c ?? 2.5;
-  return /* @__PURE__ */ h(
+  const t = s, a = d ?? t / 8, e = f ?? t / 32, r = l ?? t * 0.35 - e, p = c ?? 2.5;
+  return /* @__PURE__ */ g(
     n,
     {
       sx: {
@@ -21,7 +21,7 @@ function b({
         position: "relative"
       },
       children: [
-        /* @__PURE__ */ a(
+        /* @__PURE__ */ i(
           n,
           {
             sx: {
@@ -37,7 +37,7 @@ function b({
               width: t,
               height: t,
               overflow: "hidden",
-              borderRadius: `${i}px`,
+              borderRadius: `${a}px`,
               backgroundColor: "grey.200",
               "&::before,&::after": {
                 content: '""',
@@ -50,7 +50,7 @@ function b({
                 top: e,
                 bottom: e,
                 backgroundColor: "background.default",
-                borderRadius: `${i - e}px`
+                borderRadius: `${a - e}px`
               },
               "&::before": {
                 width: t * 5,
@@ -58,7 +58,7 @@ function b({
                 top: "50%",
                 left: "50%",
                 transform: "translate(-50%, -50%)",
-                background: ({ palette: r }) => `conic-gradient(from 45deg, transparent 0%, transparent 50%, ${r.secondary.main} 90%, ${r.secondary.main} 100%)`,
+                background: ({ palette: o }) => `conic-gradient(from 45deg, transparent 0%, transparent 50%, ${o.secondary.main} 90%, ${o.secondary.main} 100%)`,
                 animation: `rotate ${p}s linear infinite`,
                 "@keyframes rotate": {
                   "0%": {
@@ -72,7 +72,7 @@ function b({
             }
           }
         ),
-        /* @__PURE__ */ a(
+        /* @__PURE__ */ i(
           n,
           {
             sx: {
@@ -80,10 +80,20 @@ function b({
               display: "flex",
               justifyContent: "center",
               alignItems: "center",
-              width: t - o - e,
-              height: t - o - e
+              width: t - r - e,
+              height: t - r - e,
+              animation: "wait-bounce 1.6s infinite",
+              transformOrigin: "center bottom",
+              "@keyframes wait-bounce": {
+                "0%": { transform: "scale(1) translateY(0)" },
+                "20%": { transform: "scale(1.03) translateY(-4px)" },
+                "40%": { transform: "scale(0.98) translateY(2px)" },
+                "60%": { transform: "scale(1.01) translateY(-2px)" },
+                "80%": { transform: "scale(0.99) translateY(1px)" },
+                "100%": { transform: "scale(1) translateY(0)" }
+              }
             },
-            children: g
+            children: m
           }
         )
       ]
@@ -91,5 +101,5 @@ function b({
   );
 }
 export {
-  b as default
+  x 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.32",
+  "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": "c81f41bdecc9ffb41a2f8158fb7a557fae62666b",
+  "gitHead": "e2822eb021fb9aebfcf80f71dd4da4ca76b2372b",
   "dependencies": {
-    "@arcblock/bridge": "3.0.32",
+    "@arcblock/bridge": "3.0.34",
     "@arcblock/did": "^1.21.0",
     "@arcblock/did-motif": "^1.1.14",
-    "@arcblock/icons": "3.0.32",
-    "@arcblock/nft-display": "3.0.32",
-    "@arcblock/react-hooks": "3.0.32",
+    "@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.32",
+    "@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,
@@ -64,6 +89,17 @@ function Img({
   const [ref, inView] = lazy ? useInView({ threshold: 0, triggerOnce: true }) : [null, true];
 
   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) {
@@ -71,13 +107,13 @@ function Img({
       case 'loading':
         return placeholder;
       case 'error':
-        return fallback;
+        return fallbackError ? null : fallbackSrc;
       case 'loaded':
         return src;
       default:
         return null;
     }
-  }, [placeholder, fallback, src, imgState]);
+  }, [placeholder, fallbackSrc, src, imgState, fallbackError]);
 
   const actualRatio = width && height ? (100 * height) / width : ratio * 100;
 
@@ -106,13 +142,13 @@ function Img({
     const img = new Image();
     img.src = src;
     setImgState('loading');
+    setFallbackError(false);
     img.onload = () => {
       setImgState('loaded');
       onSuccess();
     };
-    img.onerror = (err) => {
+    img.onerror = () => {
       setImgState('error');
-      onError(err);
     };
   }
 
@@ -121,6 +157,24 @@ function Img({
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [inView]);
 
+  // 处理 fallback 加载
+  useEffect(() => {
+    if (imgState === 'error' && fallbackSrc && !fallbackError) {
+      const fallbackImg = new Image();
+      fallbackImg.src = fallbackSrc;
+      fallbackImg.onload = () => {
+        // fallback 加载成功，保持在 error 状态但显示 fallback
+      };
+      fallbackImg.onerror = (err) => {
+        // fallback 也加载失败
+        setFallbackError(true);
+        if (imgState === 'error') {
+          onError(err);
+        }
+      };
+    }
+  }, [imgState, fallbackSrc, fallbackError, onError]);
+
   return (
     // paddingTop 要求元素本身的宽度为 100%，所以只能加一个外层元素去限制宽度
     <Box
@@ -166,13 +220,13 @@ function Img({
         rest.sx
       )}>
       <div className={`image ${className} ${classes.root}`} style={mergedStyle}>
-        {!fallback && imgState === 'error' && (
-          <div className="image--state" title="loading image">
+        {(fallbackError || (!fallbackSrc && imgState === 'error')) && (
+          <div className="image--state" title="Image load error">
             <Icon icon={WarningRoundedIcon} className="image--icon" />
           </div>
         )}
         {!placeholder && imgState === 'loading' && (
-          <div className="image--state" title="Image load error">
+          <div className="image--state" title="loading image">
             <Icon icon={ImageRoundedIcon} className="image--icon" />
           </div>
         )}
@@ -198,6 +252,7 @@ Img.propTypes = {
   className: PropTypes.string,
   onError: PropTypes.func,
   onSuccess: PropTypes.func,
+  useProxyFallback: PropTypes.bool,
 };
 
 export default Img;

package/src/LoadingMask/index.tsx

@@ -20,7 +20,7 @@ export default function LoadingMask({
   const finialSize = size;
   const finialRadius = borderRadius ?? finialSize / 8;
   const finialBorderWidth = borderWidth ?? finialSize / 32;
-  const finialPadding = padding ?? finialSize * 0.25 - finialBorderWidth;
+  const finialPadding = padding ?? finialSize * 0.35 - finialBorderWidth;
   const finialDuration = duration ?? 2.5;
   return (
     <Box
@@ -89,6 +89,17 @@ export default function LoadingMask({
           alignItems: 'center',
           width: finialSize - finialPadding - finialBorderWidth,
           height: finialSize - finialPadding - finialBorderWidth,
+
+          animation: 'wait-bounce 1.6s infinite',
+          transformOrigin: 'center bottom',
+          '@keyframes wait-bounce': {
+            '0%': { transform: 'scale(1) translateY(0)' },
+            '20%': { transform: 'scale(1.03) translateY(-4px)' },
+            '40%': { transform: 'scale(0.98) translateY(2px)' },
+            '60%': { transform: 'scale(1.01) translateY(-2px)' },
+            '80%': { transform: 'scale(0.99) translateY(1px)' },
+            '100%': { transform: 'scale(1) translateY(0)' },
+          },
         }}>
         {children}
       </Box>

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>
   );