@arcblock/ux 3.0.33 → 3.0.35

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/lib/Util/constant.d.ts

@@ -23,6 +23,7 @@ export declare const LOGIN_PROVIDER: {
     WALLET: string;
     NFT: string;
     PASSKEY: string;
+    TWITTER: string;
 };
 export declare const LOGIN_PROVIDER_NAME: {
     [x: string]: string;
@@ -33,6 +34,7 @@ export declare const OAUTH_PROVIDER: {
     apple: string;
     github: string;
     google: string;
+    twitter: string;
 };
 export declare const DID_CONNECT_SMALL_WIDTH = 360;
 export declare const DID_CONNECT_MEDIUM_WIDTH = 576;

package/lib/Util/constant.js

@@ -1,4 +1,4 @@
-const o = 300, t = 1800, _ = "/.well-known/service", A = "login_token", I = "refresh_token", T = "/.well-known/service", e = "/api/did", n = `${_}/admin`, s = `${_}/user`, O = `${_}/user/did-spaces`, D = `${_}/admin/navigation`, L = "did:abt:", R = {
+const T = 300, _ = 1800, t = "/.well-known/service", o = "login_token", I = "refresh_token", e = "/.well-known/service", A = "/api/did", n = `${t}/admin`, s = `${t}/user`, O = `${t}/user/did-spaces`, R = `${t}/admin/navigation`, D = "did:abt:", L = {
   VALID: "valid",
   REVOKED: "revoked"
 }, E = {
@@ -9,8 +9,9 @@ const o = 300, t = 1800, _ = "/.well-known/service", A = "login_token", I = "ref
   GOOGLE: "google",
   WALLET: "wallet",
   NFT: "nft",
-  PASSKEY: "passkey"
-}, l = {
+  PASSKEY: "passkey",
+  TWITTER: "twitter"
+}, i = {
   [E.EMAIL]: "Email",
   [E.AUTH0]: "Auth0",
   [E.APPLE]: "Apple",
@@ -18,31 +19,33 @@ const o = 300, t = 1800, _ = "/.well-known/service", A = "login_token", I = "ref
   [E.GOOGLE]: "Google",
   [E.WALLET]: "DID Wallet",
   [E.NFT]: "NFT",
-  [E.PASSKEY]: "Passkey"
-}, c = {
+  [E.PASSKEY]: "Passkey",
+  [E.TWITTER]: "X"
+}, l = {
   email: "Email",
   auth0: "Auth0",
   apple: "Apple",
   github: "Github",
-  google: "Google"
-}, a = 360, i = 576;
+  google: "Google",
+  twitter: "X"
+}, c = 360, a = 576;
 export {
-  e as API_DID_PREFIX,
-  _ as BLOCKLET_SERVICE_PATH_PREFIX,
+  A as API_DID_PREFIX,
+  t as BLOCKLET_SERVICE_PATH_PREFIX,
   n as DASHBOARD_URL,
-  o as DEFAULT_TIMEOUT,
-  t as DEFAULT_WINDOW_TIMEOUT,
-  i as DID_CONNECT_MEDIUM_WIDTH,
-  a as DID_CONNECT_SMALL_WIDTH,
-  L as DID_PREFIX,
+  T as DEFAULT_TIMEOUT,
+  _ as DEFAULT_WINDOW_TIMEOUT,
+  a as DID_CONNECT_MEDIUM_WIDTH,
+  c as DID_CONNECT_SMALL_WIDTH,
+  D as DID_PREFIX,
   O as DID_SPACE_URL,
   E as LOGIN_PROVIDER,
-  l as LOGIN_PROVIDER_NAME,
-  D as NAVIGATION_URL,
-  c as OAUTH_PROVIDER,
-  R as PASSPORT_STATUS,
+  i as LOGIN_PROVIDER_NAME,
+  R as NAVIGATION_URL,
+  l as OAUTH_PROVIDER,
+  L as PASSPORT_STATUS,
   s as PROFILE_URL,
   I as REFRESH_TOKEN_STORAGE_KEY,
-  T as RELAY_SOCKET_PREFIX,
-  A as SESSION_TOKEN_STORAGE_KEY
+  e as RELAY_SOCKET_PREFIX,
+  o as SESSION_TOKEN_STORAGE_KEY
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@arcblock/ux",
-  "version": "3.0.33",
+  "version": "3.0.35",
   "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": "96e21256a13c640548c59ccd807a61e6faae35f8",
   "dependencies": {
-    "@arcblock/bridge": "3.0.33",
+    "@arcblock/bridge": "3.0.35",
     "@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.35",
+    "@arcblock/nft-display": "3.0.35",
+    "@arcblock/react-hooks": "3.0.35",
     "@blocklet/js-sdk": "^1.16.46",
-    "@blocklet/theme": "3.0.33",
+    "@blocklet/theme": "3.0.35",
     "@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/DIDConnect/icons/did-wallet-logo.tsx

@@ -0,0 +1,18 @@
+import { Box } from '@mui/material';
+
+type LogoSize = number | string;
+
+export default function DIDWalletLogo({
+  width = '100%',
+  height = '100%',
+  ...rest
+}: {
+  width?: LogoSize;
+  height?: LogoSize;
+  [key: string]: any;
+}) {
+  const didWalletLogo =
+    'data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMzIiIGhlaWdodD0iMzIiIGZpbGw9Im5vbmUiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGcgY2xpcC1wYXRoPSJ1cmwoI3ByZWZpeF9fY2xpcDApIj48cmVjdCB3aWR0aD0iMzIiIGhlaWdodD0iMzIiIHJ4PSI2IiBmaWxsPSJ1cmwoI3ByZWZpeF9fcGFpbnQwX2xpbmVhcikiLz48ZyBmaWx0ZXI9InVybCgjcHJlZml4X19maWx0ZXIwX2kpIj48cGF0aCBkPSJNMy41MiA3LjM2QTIuNTYgMi41NiAwIDAxNi4wOCA0LjhoMTkuODRhMi41NiAyLjU2IDAgMDEyLjU2IDIuNTZ2MTIuMTZhMi41NiAyLjU2IDAgMDEtMi41NiAyLjU2SDYuMDhhMi41NiAyLjU2IDAgMDEtMi41Ni0yLjU2VjcuMzZ6IiBmaWxsPSIjOUZDQkZGIi8+PC9nPjxnIGZpbHRlcj0idXJsKCNwcmVmaXhfX2ZpbHRlcjFfZCkiPjxwYXRoIGQ9Ik0yLjU2IDkuMjhhMi41NiAyLjU2IDAgMDEyLjU2LTIuNTZoMjEuNzZhMi41NiAyLjU2IDAgMDEyLjU2IDIuNTZ2MTMuNmEyLjU2IDIuNTYgMCAwMS0yLjU2IDIuNTZINS4xMmEyLjU2IDIuNTYgMCAwMS0yLjU2LTIuNTZWOS4yOHoiIGZpbGw9InVybCgjcHJlZml4X19wYWludDFfbGluZWFyKSIvPjwvZz48ZyBmaWx0ZXI9InVybCgjcHJlZml4X19maWx0ZXIyX2QpIj48cGF0aCBkPSJNMCAyMi4zMmwzMi02LjE2VjMySDB2LTkuNjh6IiBmaWxsPSJ1cmwoI3ByZWZpeF9fcGFpbnQyX2xpbmVhcikiLz48L2c+PHBhdGggZmlsbC1ydWxlPSJldmVub2RkIiBjbGlwLXJ1bGU9ImV2ZW5vZGQiIGQ9Ik01LjUzNiA5LjI0OGg4LjI4OGMuNDA4IDAgLjc0LjMuNzQuNjcydjQuNjRjMCAuMzcxLS4zMzIuNjcyLS43NC42NzJINS41MzZjLS40MDggMC0uNzQtLjMtLjc0LS42NzJ2LS4wNGEuMTU4LjE1OCAwIDEwLS4zMTYgMHYuMDRjMCAuNTMuNDczLjk2IDEuMDU2Ljk2aDguMjg4Yy41ODMgMCAxLjA1Ni0uNDMgMS4wNTYtLjk2VjkuOTJjMC0uNTMtLjQ3My0uOTYtMS4wNTYtLjk2SDUuNTM2Yy0uNTgzIDAtMS4wNTYuNDMtMS4wNTYuOTZ2LjA0YS4xNTguMTU4IDAgMDAuMzE3IDB2LS4wNGMwLS4zNzEuMzMtLjY3Mi43MzktLjY3MnptLTEuMDIzIDQuNjM4YS4xMjcuMTI3IDAgMDAuMDg3LjAzNGgxLjI2N2MuNDcyIDAgLjgzLS4xMDcgMS4wNzYtLjMyMi4yNS0uMjE3LjM4MS0uNTQ4LjM5Ny0uOTkzYTExLjI4MSAxMS4yODEgMCAwMDAtLjczNGMtLjAxMi0uNDI2LS4xNDgtLjc1MS0uNDA2LS45NzUtLjI1OC0uMjI0LS42MjItLjMzNi0xLjA5LS4zMzZINC42YS4xMjcuMTI3IDAgMDAtLjA4Ny4wMzQuMTE3LjExNyAwIDAwLS4wMzMuMDg2djMuMTJjMCAuMDMyLjAxMS4wNi4wMzMuMDg2em0xLjc5NC0uODA2Yy0uMDk5LjEtLjI1My4xNDktLjQ2NC4xNDloLS41MDJWMTEuMjVoLjQ3OGMuMjEgMCAuMzY5LjA1MS40NzQuMTU0LjEwOC4xMDIuMTY2LjI2LjE3Mi40NzUuMDA2LjA5LjAxLjIwOC4wMS4zNTVzLS4wMDQuMjY3LS4wMS4zNmMtLjAwNi4yMjEtLjA1OS4zODMtLjE1OC40ODV6bTEuNjMuODA2YS4xMjcuMTI3IDAgMDAuMDg3LjAzNGguNjRhLjExNi4xMTYgMCAwMC4wODctLjAzNC4xMS4xMSAwIDAwLjAzOC0uMDg2di0zLjEyYS4xMS4xMSAwIDAwLS4wMzgtLjA4Ni4xMTYuMTE2IDAgMDAtLjA4Ni0uMDM0aC0uNjQxYS4xMjcuMTI3IDAgMDAtLjA4Ny4wMzQuMTE3LjExNyAwIDAwLS4wMzMuMDg2djMuMTJjMCAuMDMyLjAxMS4wNi4wMzMuMDg2em0xLjYzNy4wMzRhLjEyNy4xMjcgMCAwMS0uMDg2LS4wMzQuMTI4LjEyOCAwIDAxLS4wMzMtLjA4NnYtMy4xMmMwLS4wMzUuMDEtLjA2NC4wMzMtLjA4NmEuMTI3LjEyNyAwIDAxLjA4Ni0uMDM0aDEuMjQ0Yy40NjkgMCAuODMyLjExMiAxLjA5LjMzNi4yNTkuMjI0LjM5NC41NDkuNDA3Ljk3NGExMS4yNDQgMTEuMjQ0IDAgMDEwIC43MzVjLS4wMTYuNDQ1LS4xNDguNzc2LS4zOTcuOTkzLS4yNDUuMjE1LS42MDQuMzIyLTEuMDc2LjMyMkg5LjU3NHptMS4yNDQtLjY5MWMuMjEgMCAuMzY1LS4wNS40NjQtLjE0OS4wOTktLjEwMi4xNTItLjI2NC4xNTgtLjQ4NWE1LjUyIDUuNTIgMCAwMC4wMS0uMzZjMC0uMTQ3LS4wMDQtLjI2NS0uMDEtLjM1NS0uMDA2LS4yMTQtLjA2NC0uMzczLS4xNzItLjQ3NS0uMTA2LS4xMDMtLjI2My0uMTU0LS40NzQtLjE1NGgtLjQ3OHYxLjk3OGguNTAyem0yLjQ2OC0xLjM4MmEuMjg4LjI4OCAwIDAxLS4yODgtLjI4Ni4yODguMjg4IDAgMDEuNTc2IDBjMCAuMTU4LS4xMy4yODYtLjI4OC4yODZ6bTAgMS40OTVhLjI4OC4yODggMCAwMS0uMjg4LS4yODYuMjg4LjI4OCAwIDAxLjU3NiAwYzAgLjE1OC0uMTMuMjg3LS4yODguMjg3eiIgZmlsbD0iIzQ1OThGQSIvPjwvZz48ZGVmcz48bGluZWFyR3JhZGllbnQgaWQ9InByZWZpeF9fcGFpbnQwX2xpbmVhciIgeDE9IjE2IiB5MT0iMCIgeDI9IjE2IiB5Mj0iMzIiIGdyYWRpZW50VW5pdHM9InVzZXJTcGFjZU9uVXNlIj48c3RvcCBzdG9wLWNvbG9yPSIjNEY5REY2Ii8+PHN0b3Agb2Zmc2V0PSIxIiBzdG9wLWNvbG9yPSIjMEE3OUY4Ii8+PC9saW5lYXJHcmFkaWVudD48bGluZWFyR3JhZGllbnQgaWQ9InByZWZpeF9fcGFpbnQxX2xpbmVhciIgeDE9IjE2IiB5MT0iNi43MiIgeDI9IjE2IiB5Mj0iMjUuNDQiIGdyYWRpZW50VW5pdHM9InVzZXJTcGFjZU9uVXNlIj48c3RvcCBzdG9wLWNvbG9yPSIjZmZmIi8+PHN0b3Agb2Zmc2V0PSIxIiBzdG9wLWNvbG9yPSIjRUNFRkZGIi8+PC9saW5lYXJHcmFkaWVudD48bGluZWFyR3JhZGllbnQgaWQ9InByZWZpeF9fcGFpbnQyX2xpbmVhciIgeDE9IjE2IiB5MT0iMTkuMiIgeDI9IjE4LjQ4IiB5Mj0iMzIiIGdyYWRpZW50VW5pdHM9InVzZXJTcGFjZU9uVXNlIj48c3RvcCBvZmZzZXQ9Ii4wMDciIHN0b3AtY29sb3I9IiM3N0IyRjYiLz48c3RvcCBvZmZzZXQ9Ii4wNTUiIHN0b3AtY29sb3I9IiM0RjlERjYiLz48c3RvcCBvZmZzZXQ9IjEiIHN0b3AtY29sb3I9IiM0NTk4RkEiLz48L2xpbmVhckdyYWRpZW50PjxmaWx0ZXIgaWQ9InByZWZpeF9fZmlsdGVyMF9pIiB4PSIzLjUyIiB5PSIxLjgiIHdpZHRoPSIyNC45NiIgaGVpZ2h0PSIyMC4yOCIgZmlsdGVyVW5pdHM9InVzZXJTcGFjZU9uVXNlIiBjb2xvci1pbnRlcnBvbGF0aW9uLWZpbHRlcnM9InNSR0IiPjxmZUZsb29kIGZsb29kLW9wYWNpdHk9IjAiIHJlc3VsdD0iQmFja2dyb3VuZEltYWdlRml4Ii8+PGZlQmxlbmQgaW49IlNvdXJjZUdyYXBoaWMiIGluMj0iQmFja2dyb3VuZEltYWdlRml4IiByZXN1bHQ9InNoYXBlIi8+PGZlQ29sb3JNYXRyaXggaW49IlNvdXJjZUFscGhhIiB2YWx1ZXM9IjAgMCAwIDAgMCAwIDAgMCAwIDAgMCAwIDAgMCAwIDAgMCAwIDEyNyAwIiByZXN1bHQ9ImhhcmRBbHBoYSIvPjxmZU9mZnNldCBkeT0iLTMiLz48ZmVHYXVzc2lhbkJsdXIgc3RkRGV2aWF0aW9uPSIyIi8+PGZlQ29tcG9zaXRlIGluMj0iaGFyZEFscGhhIiBvcGVyYXRvcj0iYXJpdGhtZXRpYyIgazI9Ii0xIiBrMz0iMSIvPjxmZUNvbG9yTWF0cml4IHZhbHVlcz0iMCAwIDAgMCAxIDAgMCAwIDAgMSAwIDAgMCAwIDEgMCAwIDAgMC4yIDAiLz48ZmVCbGVuZCBpbjI9InNoYXBlIiByZXN1bHQ9ImVmZmVjdDFfaW5uZXJTaGFkb3ciLz48L2ZpbHRlcj48ZmlsdGVyIGlkPSJwcmVmaXhfX2ZpbHRlcjFfZCIgeD0iLTEuNDQiIHk9IjEuNzIiIHdpZHRoPSIzNC44OCIgaGVpZ2h0PSIyNi43MiIgZmlsdGVyVW5pdHM9InVzZXJTcGFjZU9uVXNlIiBjb2xvci1pbnRlcnBvbGF0aW9uLWZpbHRlcnM9InNSR0IiPjxmZUZsb29kIGZsb29kLW9wYWNpdHk9IjAiIHJlc3VsdD0iQmFja2dyb3VuZEltYWdlRml4Ii8+PGZlQ29sb3JNYXRyaXggaW49IlNvdXJjZUFscGhhIiB2YWx1ZXM9IjAgMCAwIDAgMCAwIDAgMCAwIDAgMCAwIDAgMCAwIDAgMCAwIDEyNyAwIiByZXN1bHQ9ImhhcmRBbHBoYSIvPjxmZU9mZnNldCBkeT0iLTEiLz48ZmVHYXVzc2lhbkJsdXIgc3RkRGV2aWF0aW9uPSIyIi8+PGZlQ29sb3JNYXRyaXggdmFsdWVzPSIwIDAgMCAwIDAuMjIwNzY3IDAgMCAwIDAgMC40NzA4MDMgMCAwIDAgMCAwLjcwMTYwNSAwIDAgMCAwLjE4IDAiLz48ZmVCbGVuZCBpbjI9IkJhY2tncm91bmRJbWFnZUZpeCIgcmVzdWx0PSJlZmZlY3QxX2Ryb3BTaGFkb3ciLz48ZmVCbGVuZCBpbj0iU291cmNlR3JhcGhpYyIgaW4yPSJlZmZlY3QxX2Ryb3BTaGFkb3ciIHJlc3VsdD0ic2hhcGUiLz48L2ZpbHRlcj48ZmlsdGVyIGlkPSJwcmVmaXhfX2ZpbHRlcjJfZCIgeD0iLTUiIHk9IjExLjE2IiB3aWR0aD0iNDIiIGhlaWdodD0iMjUuODQiIGZpbHRlclVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgY29sb3ItaW50ZXJwb2xhdGlvbi1maWx0ZXJzPSJzUkdCIj48ZmVGbG9vZCBmbG9vZC1vcGFjaXR5PSIwIiByZXN1bHQ9IkJhY2tncm91bmRJbWFnZUZpeCIvPjxmZUNvbG9yTWF0cml4IGluPSJTb3VyY2VBbHBoYSIgdmFsdWVzPSIwIDAgMCAwIDAgMCAwIDAgMCAwIDAgMCAwIDAgMCAwIDAgMCAxMjcgMCIgcmVzdWx0PSJoYXJkQWxwaGEiLz48ZmVPZmZzZXQvPjxmZUdhdXNzaWFuQmx1ciBzdGREZXZpYXRpb249IjIuNSIvPjxmZUNvbG9yTWF0cml4IHZhbHVlcz0iMCAwIDAgMCAwLjE0MzgyIDAgMCAwIDAgMC4yMDUwNjUgMCAwIDAgMCAwLjUyMjYzNCAwIDAgMCAwLjI1IDAiLz48ZmVCbGVuZCBpbjI9IkJhY2tncm91bmRJbWFnZUZpeCIgcmVzdWx0PSJlZmZlY3QxX2Ryb3BTaGFkb3ciLz48ZmVCbGVuZCBpbj0iU291cmNlR3JhcGhpYyIgaW4yPSJlZmZlY3QxX2Ryb3BTaGFkb3ciIHJlc3VsdD0ic2hhcGUiLz48L2ZpbHRlcj48Y2xpcFBhdGggaWQ9InByZWZpeF9fY2xpcDAiPjxyZWN0IHdpZHRoPSIzMiIgaGVpZ2h0PSIzMiIgcng9IjYiIGZpbGw9IiNmZmYiLz48L2NsaXBQYXRoPjwvZGVmcz48L3N2Zz4=';
+
+  return <Box component="img" width={width} height={height} alt="did-wallet-logo" {...rest} src={didWalletLogo} />;
+}

package/src/DIDConnect/icons/github-logo.tsx

@@ -0,0 +1,17 @@
+type LogoSize = number | string;
+
+export default function GithubLogo({
+  width = 24,
+  height = 24,
+  ...props
+}: {
+  width?: LogoSize;
+  height?: LogoSize;
+  [key: string]: any;
+}) {
+  return (
+    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 250" width={width} height={height} {...props}>
+      <path d="M128.001 0C57.317 0 0 57.307 0 128.001c0 56.554 36.676 104.535 87.535 121.46c6.397 1.185 8.746-2.777 8.746-6.158c0-3.052-.12-13.135-.174-23.83c-35.61 7.742-43.124-15.103-43.124-15.103c-5.823-14.795-14.213-18.73-14.213-18.73c-11.613-7.944.876-7.78.876-7.78c12.853.902 19.621 13.19 19.621 13.19c11.417 19.568 29.945 13.911 37.249 10.64c1.149-8.272 4.466-13.92 8.127-17.116c-28.431-3.236-58.318-14.212-58.318-63.258c0-13.975 5-25.394 13.188-34.358c-1.329-3.224-5.71-16.242 1.24-33.874c0 0 10.749-3.44 35.21 13.121c10.21-2.836 21.16-4.258 32.038-4.307c10.878.049 21.837 1.47 32.066 4.307c24.431-16.56 35.165-13.12 35.165-13.12c6.967 17.63 2.584 30.65 1.255 33.873c8.207 8.964 13.173 20.383 13.173 34.358c0 49.163-29.944 59.988-58.447 63.157c4.591 3.972 8.682 11.762 8.682 23.704c0 17.126-.148 30.91-.148 35.126c0 3.407 2.304 7.398 8.792 6.14C219.37 232.5 256 184.537 256 128.002C256 57.307 198.691 0 128.001 0m-80.06 182.34c-.282.636-1.283.827-2.194.39c-.929-.417-1.45-1.284-1.15-1.922c.276-.655 1.279-.838 2.205-.399c.93.418 1.46 1.293 1.139 1.931m6.296 5.618c-.61.566-1.804.303-2.614-.591c-.837-.892-.994-2.086-.375-2.66c.63-.566 1.787-.301 2.626.591c.838.903 1 2.088.363 2.66m4.32 7.188c-.785.545-2.067.034-2.86-1.104c-.784-1.138-.784-2.503.017-3.05c.795-.547 2.058-.055 2.861 1.075c.782 1.157.782 2.522-.019 3.08m7.304 8.325c-.701.774-2.196.566-3.29-.49c-1.119-1.032-1.43-2.496-.726-3.27c.71-.776 2.213-.558 3.315.49c1.11 1.03 1.45 2.505.701 3.27m9.442 2.81c-.31 1.003-1.75 1.459-3.199 1.033c-1.448-.439-2.395-1.613-2.103-2.626c.301-1.01 1.747-1.484 3.207-1.028c1.446.436 2.396 1.602 2.095 2.622m10.744 1.193c.036 1.055-1.193 1.93-2.715 1.95c-1.53.034-2.769-.82-2.786-1.86c0-1.065 1.202-1.932 2.733-1.958c1.522-.03 2.768.818 2.768 1.868m10.555-.405c.182 1.03-.875 2.088-2.387 2.37c-1.485.271-2.861-.365-3.05-1.386c-.184-1.056.893-2.114 2.376-2.387c1.514-.263 2.868.356 3.061 1.403" />
+    </svg>
+  );
+}

package/src/DIDConnect/provider-icon.tsx

@@ -0,0 +1,62 @@
+import { memo } from 'react';
+import mailOutlineRoundedIcon from '@iconify-icons/material-symbols/mail-outline-rounded';
+import appleIcon from '@iconify-icons/logos/apple';
+import googleIcon from '@iconify-icons/logos/google-icon';
+import auth0Icon from '@iconify-icons/logos/auth0-icon';
+import passKeyRoundedIcon from '@iconify-icons/material-symbols/passkey-rounded';
+import { Icon } from '@iconify/react';
+import { Box, BoxProps, SxProps } from '@mui/material';
+
+import { LOGIN_PROVIDER } from '../Util/constant';
+import { mergeSx } from '../Util/style';
+import DIDWalletLogo from './icons/did-wallet-logo';
+import GithubLogo from './icons/github-logo';
+
+function ProviderIcon({
+  provider = 'wallet',
+  ...rest
+}: {
+  provider?: (typeof LOGIN_PROVIDER)[keyof typeof LOGIN_PROVIDER] | 'wallet-web';
+} & BoxProps) {
+  if (['wallet', 'wallet-web'].includes(provider)) {
+    // @ts-ignore
+    return <DIDWalletLogo {...rest} />;
+  }
+
+  if (provider === LOGIN_PROVIDER.GITHUB) {
+    return (
+      <Box component="span" {...rest} sx={mergeSx({ display: 'inline-block' }, rest.sx as SxProps)}>
+        <GithubLogo width="100%" height="100%" fill="currentColor" />
+      </Box>
+    );
+  }
+
+  const iconMap = {
+    [LOGIN_PROVIDER.AUTH0]: auth0Icon,
+    [LOGIN_PROVIDER.EMAIL]: mailOutlineRoundedIcon,
+    [LOGIN_PROVIDER.APPLE]: appleIcon,
+    [LOGIN_PROVIDER.GOOGLE]: googleIcon,
+    [LOGIN_PROVIDER.PASSKEY]: passKeyRoundedIcon,
+    [LOGIN_PROVIDER.TWITTER]: {
+      body: '<path fill="currentColor" d="M149.079 108.399L242.33 0h-22.098l-80.97 94.12L74.59 0H0l97.796 142.328L0 256h22.1l85.507-99.395L175.905 256h74.59L149.073 108.399zM118.81 143.58l-9.909-14.172l-78.84-112.773h33.943l63.625 91.011l9.909 14.173l82.705 118.3H186.3l-67.49-96.533z"/>',
+      width: 251,
+      height: 251,
+    },
+  };
+
+  return iconMap[provider] ? (
+    <Box
+      component={Icon}
+      icon={iconMap[provider]}
+      fill="currentColor"
+      {...rest}
+      sx={mergeSx(
+        { width: '100%', height: '100%' },
+        provider === LOGIN_PROVIDER.TWITTER ? { scale: '0.8' } : {},
+        rest.sx as SxProps
+      )}
+    />
+  ) : null;
+}
+
+export default memo(ProviderIcon);

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',
         }}