@arcblock/ux 3.0.27 → 3.0.29

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

@@ -1,12 +1,21 @@
-import { jsxs as i, jsx as t } from "react/jsx-runtime";
-import { Box as e, Typography as l } from "@mui/material";
-import o from "../../Img/index.js";
-function c({
-  requestAppInfo: r,
-  currentAppInfo: a
+import { jsxs as a, jsx as o } from "react/jsx-runtime";
+import { Box as r, Typography as n } 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
 }) {
-  return /* @__PURE__ */ i(
-    e,
+  return /* @__PURE__ */ a(
+    r,
     {
       sx: {
         textAlign: "center",
@@ -16,8 +25,8 @@ function c({
         gap: 2
       },
       children: [
-        /* @__PURE__ */ i(
-          e,
+        /* @__PURE__ */ a(
+          r,
           {
             sx: {
               display: "flex",
@@ -25,9 +34,18 @@ function c({
               justifyContent: "center"
             },
             children: [
-              /* @__PURE__ */ t(o, { src: a.appLogo, alt: "Server", width: 48, height: 48 }),
-              /* @__PURE__ */ i(
-                e,
+              /* @__PURE__ */ o(
+                i,
+                {
+                  src: t.appLogo,
+                  alt: "Server",
+                  width: 48,
+                  height: 48,
+                  fallback: l(t.appLogo)
+                }
+              ),
+              /* @__PURE__ */ a(
+                r,
                 {
                   sx: {
                     mx: 2,
@@ -42,18 +60,27 @@ function c({
                     }
                   },
                   children: [
-                    /* @__PURE__ */ t(e, { className: "dot" }),
-                    /* @__PURE__ */ t(e, { className: "dot" }),
-                    /* @__PURE__ */ t(e, { className: "dot" })
+                    /* @__PURE__ */ o(r, { className: "dot" }),
+                    /* @__PURE__ */ o(r, { className: "dot" }),
+                    /* @__PURE__ */ o(r, { className: "dot" })
                   ]
                 }
               ),
-              /* @__PURE__ */ t(o, { src: r.appLogo, alt: r.appName, width: 48, height: 48 })
+              /* @__PURE__ */ o(
+                i,
+                {
+                  src: e.appLogo,
+                  alt: e.appName,
+                  width: 48,
+                  height: 48,
+                  fallback: l(e.appLogo)
+                }
+              )
             ]
           }
         ),
-        /* @__PURE__ */ i(
-          l,
+        /* @__PURE__ */ a(
+          n,
           {
             sx: {
               mb: 1,
@@ -62,7 +89,7 @@ function c({
             children: [
               "Authorize",
               " ",
-              /* @__PURE__ */ t(e, { component: "span", sx: { color: "primary.main" }, children: r.appName })
+              /* @__PURE__ */ o(r, { component: "span", sx: { color: "primary.main" }, children: e.appName })
             ]
           }
         )
@@ -71,5 +98,5 @@ function c({
   );
 }
 export {
-  c as default
+  g as default
 };

package/lib/RelativeTime/index.js

@@ -1,7 +1,7 @@
 import { jsxs as I, jsx as n, Fragment as F } from "react/jsx-runtime";
 import { Box as a, Tooltip as M } from "@mui/material";
 import { useEffect as R, useMemo as $ } from "react";
-import c from "dayjs";
+import s from "dayjs";
 import "dayjs/locale/zh-cn";
 import k from "dayjs/plugin/utc";
 import B from "dayjs/plugin/timezone";
@@ -10,12 +10,12 @@ import H from "dayjs/plugin/updateLocale";
 import N from "dayjs/plugin/localizedFormat";
 import { create as Z } from "zustand";
 import { formatToDatetime as O, setDateTool as q } from "../Util/index.js";
-c.extend(N);
-c.extend(k);
-c.extend(B);
-c.extend(H);
-c.extend(E);
-c.updateLocale("zh-cn", {
+s.extend(N);
+s.extend(k);
+s.extend(B);
+s.extend(H);
+s.extend(E);
+s.updateLocale("zh-cn", {
   // copy with https://github.com/iamkun/dayjs/blob/dev/src/locale/zh-cn.js
   relativeTime: {
     future: "%s后",
@@ -33,7 +33,7 @@ c.updateLocale("zh-cn", {
     yy: "%d 年"
   }
 });
-q(c);
+q(s);
 const j = {
   en: {
     utc: "UTC Timezone",
@@ -56,33 +56,33 @@ function w({
   locale: o = "en",
   withoutSuffix: p = !1,
   from: d = "",
-  to: u = "",
+  to: x = "",
   type: i = "relative",
   tz: l,
-  relativeRange: y,
-  format: U
+  relativeRange: m,
+  format: g
 }) {
-  const x = (/* @__PURE__ */ new Date()).getTimezoneOffset(), C = x > 0 ? "-" : "+", v = Math.abs(x) / 60, g = x === 0, r = A((L) => L.isUtc), T = A((L) => L.setIsUtc);
+  const C = (/* @__PURE__ */ new Date()).getTimezoneOffset(), T = C > 0 ? "-" : "+", v = Math.abs(C) / 60, L = C === 0, r = A((y) => y.isUtc), U = A((y) => y.setIsUtc);
   if (R(() => {
-    T(g);
-  }, [g]), !t)
-    return { innerContent: "-", popContent: "-", isUtc: r, setIsUtc: T, sign: C, hoursOffset: v };
-  const m = o === "zh" ? "zh-cn" : "en-us";
-  let s = c(t).locale(m);
-  i === "utc" && (s = c(t).utc().locale(m)), l && (s = s.tz(l));
-  const f = O(t, { locale: m, tz: l, format: U });
+    U(L);
+  }, [L]), !t)
+    return { innerContent: "-", popContent: "-", isUtc: r, setIsUtc: U, sign: T, hoursOffset: v };
+  const h = o === "zh" ? "zh-cn" : "en-us";
+  let c = s(t).locale(h);
+  i === "utc" && (c = s(t).utc().locale(h)), l && (c = c.tz(l));
+  const f = O(t, { locale: h, tz: l, format: g });
   let e;
   if (d)
-    e = s.from(d, p);
-  else if (u)
-    e = s.to(u, p);
-  else if (y) {
-    const L = s.diff(c());
-    Math.abs(L) > y && (e = f);
+    e = c.from(d, p);
+  else if (x)
+    e = c.to(x, p);
+  else if (m) {
+    const y = c.diff(s());
+    Math.abs(y) > m && (e = f);
   }
-  e || (e = s.fromNow(p));
-  let h = e, b = f;
-  return i === "absolute" && (h = f, b = e), i === "utc" && (r ? (h = O(t, { locale: m, tz: l, isUtc: !0, format: U }), b = O(t, { locale: m, tz: l, isUtc: !0, format: U })) : (h = f, b = e)), { innerContent: h, popContent: b, isUtc: r, setIsUtc: T, sign: C, hoursOffset: v, relativeString: e, absoluteString: f };
+  e || (e = c.fromNow(p));
+  let u = e, b = f;
+  return i === "absolute" && (u = f, b = e), i === "utc" && (r ? (u = O(t, { locale: h, tz: l, isUtc: !0, format: g }), b = O(t, { locale: h, tz: l, isUtc: !0, format: g })) : (u = f, b = e)), { innerContent: u, popContent: b, isUtc: r, setIsUtc: U, sign: T, hoursOffset: v, relativeString: e, absoluteString: f };
 }
 function z({
   locale: t,
@@ -90,9 +90,9 @@ function z({
   setIsUtc: p,
   useShortTimezone: d = !0
 }) {
-  const u = $(() => {
-    const i = d ? "shortUTC" : "utc", l = d ? "shortLocal" : "local";
-    return o ? `${j[t][i]}` : `${j[t][l]}`;
+  const x = $(() => {
+    const i = d ? "shortUTC" : "utc", l = d ? "shortLocal" : "local", m = j[t] || j.en;
+    return o ? `${m[i]}` : `${m[l]}`;
   }, [t, d, o]);
   return /* @__PURE__ */ n(
     a,
@@ -108,7 +108,7 @@ function z({
         lineHeight: 1
       },
       onClick: () => p(!o),
-      children: u
+      children: x
     }
   );
 }
@@ -117,29 +117,29 @@ function et({
   locale: o = "en",
   withoutSuffix: p = !1,
   from: d = "",
-  to: u = "",
+  to: x = "",
   type: i = "relative",
   tz: l = void 0,
-  relativeRange: y = void 0,
-  enableTooltip: U = !0,
+  relativeRange: m = void 0,
+  enableTooltip: g = !0,
   useShortTimezone: D = !1,
-  disableTimezone: x = !1,
-  placement: C = "top-end",
+  disableTimezone: C = !1,
+  placement: T = "top-end",
   format: v = "lll",
-  mode: g = "all",
+  mode: L = "all",
   ...r
 }) {
-  const { innerContent: T, popContent: m, isUtc: s, setIsUtc: f, relativeString: e } = w({
+  const { innerContent: U, popContent: h, isUtc: c, setIsUtc: f, relativeString: e } = w({
     value: t,
     locale: o,
     withoutSuffix: p,
     from: d,
-    to: u,
+    to: x,
     type: i === "all" ? "utc" : i,
     tz: l,
-    relativeRange: y,
+    relativeRange: m,
     format: v
-  }), h = /* @__PURE__ */ I(
+  }), u = /* @__PURE__ */ I(
     a,
     {
       ...r,
@@ -152,17 +152,17 @@ function et({
         ...Array.isArray(r.sx) ? r.sx : [r.sx]
       ],
       children: [
-        /* @__PURE__ */ n(a, { component: "span", ...r, sx: {}, children: T }),
+        /* @__PURE__ */ n(a, { component: "span", ...r, sx: {}, children: U }),
         /* @__PURE__ */ n(a, { component: "span", sx: { color: "inherit" }, children: "·" }),
         /* @__PURE__ */ n(a, { component: "span", sx: { color: "inherit" }, children: e }),
-        !x && /* @__PURE__ */ I(F, { children: [
+        !C && /* @__PURE__ */ I(F, { children: [
           /* @__PURE__ */ n(a, { component: "span", sx: { color: "inherit" }, children: "·" }),
-          /* @__PURE__ */ n(z, { locale: o, isUtc: s, setIsUtc: f, useShortTimezone: D })
+          /* @__PURE__ */ n(z, { locale: o, isUtc: c, setIsUtc: f, useShortTimezone: D })
         ] })
       ]
     }
   );
-  return g === "daysLeft" ? /* @__PURE__ */ n(M, { title: h, placement: C, enterTouchDelay: 0, children: /* @__PURE__ */ n(a, { component: "span", children: e }) }) : i === "all" && g === "all" ? /* @__PURE__ */ n(M, { title: void 0, placement: C, enterTouchDelay: 0, children: h }) : /* @__PURE__ */ n(M, { title: U ? m : void 0, placement: C, enterTouchDelay: 0, children: /* @__PURE__ */ I(
+  return L === "daysLeft" ? /* @__PURE__ */ n(M, { title: u, placement: T, enterTouchDelay: 0, children: /* @__PURE__ */ n(a, { component: "span", children: e }) }) : i === "all" && L === "all" ? /* @__PURE__ */ n(M, { title: void 0, placement: T, enterTouchDelay: 0, children: u }) : /* @__PURE__ */ n(M, { title: g ? h : void 0, placement: T, enterTouchDelay: 0, children: /* @__PURE__ */ I(
     a,
     {
       sx: {
@@ -171,8 +171,8 @@ function et({
         gap: 1
       },
       children: [
-        /* @__PURE__ */ n(a, { component: "span", ...r, children: T }),
-        i === "utc" && !x && /* @__PURE__ */ n(z, { locale: o, isUtc: s, setIsUtc: f, useShortTimezone: D })
+        /* @__PURE__ */ n(a, { component: "span", ...r, children: U }),
+        i === "utc" && !C && /* @__PURE__ */ n(z, { locale: o, isUtc: c, setIsUtc: f, useShortTimezone: D })
       ]
     }
   ) });

package/lib/Tag/index.d.ts

@@ -23,9 +23,9 @@ export type TagProps = TypographyProps & TagOwnProps;
 /**
  * @description
  * @param {TagProps} props
- * @return {import('react').ReactNode}
+ * @return {JSX.Element}
  */
-declare function Tag({ ...rawProps }: TagProps): import('react').ReactNode;
+declare function Tag({ ...rawProps }: TagProps): JSX.Element;
 declare namespace Tag {
     namespace propTypes {
         let children: PropTypes.Validator<any>;

package/lib/Theme/theme.d.ts

@@ -1,5 +1,6 @@
-import { ThemeOptions, PaletteMode, Theme } from '@mui/material';
+import { PaletteMode } from '@mui/material';
 import { deepmerge } from '@mui/utils';
+import { ThemeOptions, Theme } from '@blocklet/theme';
 /** 是否是 MUI Theme 对象 */
 export declare function isTheme(obj: any): obj is Theme;
 /** 是否是 UX Theme 对象 */

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@arcblock/ux",
-  "version": "3.0.27",
+  "version": "3.0.29",
   "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": "b1e137e0c74f4b58af16b1d75a65166b163cf65d",
+  "gitHead": "3c3532881441518b47bce00147ba469a03baad78",
   "dependencies": {
-    "@arcblock/bridge": "3.0.27",
+    "@arcblock/bridge": "3.0.29",
     "@arcblock/did": "^1.20.15",
     "@arcblock/did-motif": "^1.1.14",
-    "@arcblock/icons": "3.0.27",
-    "@arcblock/nft-display": "3.0.27",
-    "@arcblock/react-hooks": "3.0.27",
+    "@arcblock/icons": "3.0.29",
+    "@arcblock/nft-display": "3.0.29",
+    "@arcblock/react-hooks": "3.0.29",
     "@blocklet/js-sdk": "^1.16.46",
-    "@blocklet/theme": "3.0.27",
+    "@blocklet/theme": "3.0.29",
     "@fontsource/roboto": "~5.1.1",
     "@fontsource/ubuntu-mono": "^5.2.6",
     "@iconify-icons/logos": "^1.2.36",

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

@@ -1,5 +1,28 @@
 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;
@@ -36,7 +59,13 @@ export default function AuthAppsInfo({
           justifyContent: 'center',
         }}>
         {/* FIXME: @zhanghan 增加 hover 的效果 */}
-        <Img src={currentAppInfo.appLogo} alt="Server" width={48} height={48} />
+        <Img
+          src={currentAppInfo.appLogo}
+          alt="Server"
+          width={48}
+          height={48}
+          fallback={getProxyImageUrl(currentAppInfo.appLogo)}
+        />
 
         <Box
           sx={{
@@ -57,7 +86,13 @@ export default function AuthAppsInfo({
         </Box>
 
         {/* FIXME: @zhanghan 增加 hover 的效果 */}
-        <Img src={requestAppInfo.appLogo} alt={requestAppInfo.appName} width={48} height={48} />
+        <Img
+          src={requestAppInfo.appLogo}
+          alt={requestAppInfo.appName}
+          width={48}
+          height={48}
+          fallback={getProxyImageUrl(requestAppInfo.appLogo)}
+        />
       </Box>
 
       <Typography

package/src/RelativeTime/index.tsx

@@ -180,12 +180,14 @@ function UTCChip({
   const text = useMemo(() => {
     const UTC = useShortTimezone ? 'shortUTC' : 'utc';
     const LOCAL = useShortTimezone ? 'shortLocal' : 'local';
+    // fallback to en
+    const config = translations[locale] || translations.en;
 
     if (isUtc) {
-      return `${translations[locale][UTC]}`;
+      return `${config[UTC]}`;
     }
 
-    return `${translations[locale][LOCAL]}`;
+    return `${config[LOCAL]}`;
   }, [locale, useShortTimezone, isUtc]);
 
   return (

package/src/Tag/index.jsx

@@ -44,7 +44,7 @@ const types = {
 /**
  * @description
  * @param {TagProps} props
- * @return {import('react').ReactNode}
+ * @return {JSX.Element}
  */
 function Tag({ ...rawProps }) {
   const props = Object.assign({}, rawProps);

package/src/Theme/theme.ts

@@ -1,12 +1,6 @@
 /* eslint-disable no-shadow */
 // https://app.zeplin.io/styleguide/5d1436f1e97c2156f49c0725/colors
-import {
-  createTheme as _createTheme,
-  responsiveFontSizes,
-  type ThemeOptions,
-  type PaletteMode,
-  type Theme,
-} from '@mui/material';
+import { createTheme as _createTheme, responsiveFontSizes, type PaletteMode } from '@mui/material';
 import { deepmerge } from '@mui/utils';
 import webfontloader from 'webfontloader';
 import {
@@ -15,6 +9,8 @@ import {
   DEFAULT_FONTS,
   getDefaultThemePrefer,
   getBlockletThemeOptions,
+  type ThemeOptions,
+  type Theme,
 } from '@blocklet/theme';
 import { cleanedObj, deepmergeAll } from '../Util';