@arcblock/ux 2.10.73 → 2.10.75

package/lib/Dialog/confirm.d.ts

@@ -10,8 +10,8 @@
  *   showCancelButton?: true | false,
  *   showCloseButton?: true | false,
  *   fullScreen?: false | true,
- *   confirmButton?: {text: string, props?: ButtonProps}
- *   cancelButton?: {text: string, props?: ButtonProps}
+ *   confirmButton?: {text: React.ReactNode, props?: ButtonProps}
+ *   cancelButton?: {text: React.ReactNode, props?: ButtonProps}
  *   PaperProps?: PaperProps
  * }} ConfirmProps
  */
@@ -32,11 +32,11 @@ declare namespace Confirm {
         let showCloseButton: PropTypes.Requireable<boolean>;
         let fullScreen: PropTypes.Requireable<boolean>;
         let confirmButton: PropTypes.Requireable<PropTypes.InferProps<{
-            text: PropTypes.Validator<string>;
+            text: PropTypes.Validator<NonNullable<PropTypes.ReactNodeLike>>;
             props: PropTypes.Requireable<object>;
         }>>;
         let cancelButton: PropTypes.Requireable<PropTypes.InferProps<{
-            text: PropTypes.Validator<string>;
+            text: PropTypes.Validator<NonNullable<PropTypes.ReactNodeLike>>;
             props: PropTypes.Requireable<object>;
         }>>;
         let PaperProps: PropTypes.Requireable<object>;
@@ -74,11 +74,11 @@ export type ConfirmProps = {
     showCloseButton?: true | false;
     fullScreen?: false | true;
     confirmButton?: {
-        text: string;
+        text: React.ReactNode;
         props?: ButtonProps;
     };
     cancelButton?: {
-        text: string;
+        text: React.ReactNode;
         props?: ButtonProps;
     };
     PaperProps?: PaperProps;

package/lib/Dialog/confirm.js

@@ -16,8 +16,8 @@ import Dialog from './dialog';
  *   showCancelButton?: true | false,
  *   showCloseButton?: true | false,
  *   fullScreen?: false | true,
- *   confirmButton?: {text: string, props?: ButtonProps}
- *   cancelButton?: {text: string, props?: ButtonProps}
+ *   confirmButton?: {text: React.ReactNode, props?: ButtonProps}
+ *   cancelButton?: {text: React.ReactNode, props?: ButtonProps}
  *   PaperProps?: PaperProps
  * }} ConfirmProps
  */
@@ -108,11 +108,11 @@ Confirm.propTypes = {
   fullScreen: PropTypes.bool,
   // 可以传入 {text: ..., props: ...}
   confirmButton: PropTypes.shape({
-    text: PropTypes.string.isRequired,
+    text: PropTypes.node.isRequired,
     props: PropTypes.object
   }),
   cancelButton: PropTypes.shape({
-    text: PropTypes.string.isRequired,
+    text: PropTypes.node.isRequired,
     props: PropTypes.object
   }),
   PaperProps: PropTypes.object

package/lib/Locale/context.d.ts

@@ -20,7 +20,7 @@ interface LocaleProviderProps {
 export interface LocaleContextType {
     locale: Locale;
     changeLocale: (locale: Locale) => void;
-    t: (key: string, data?: Record<string, string | number>) => string;
+    t: (key: string, data?: Record<string, any>) => string;
     languages: {
         code: string;
         name: string;

package/lib/NFTDisplay/index.js

@@ -16,6 +16,7 @@ import DefaultLoading from './loading';
 import DefaultBrokenImage from './broken';
 import { styled } from '../Theme';
 import displayApi from './displayApi';
+import RenderSvg from './render-svg';
 
 /**
  * 从 assetState 中获取 nft data, 兼容新旧两种类型的数据结构, 建议将该方法的返回值传入 NFTDisplay 组件的 data prop
@@ -236,6 +237,11 @@ function NFTDisplay({
       if (imageExtensions.some(ext => pathname.endsWith(ext))) {
         return renderImg();
       }
+
+      // related: https://github.com/ArcBlock/did-spaces/issues/1367
+      if (objectType.includes('text/html;')) {
+        return /*#__PURE__*/_jsx(DefaultBrokenImage, {});
+      }
       return (
         /*#__PURE__*/
         // eslint-disable-next-line jsx-a11y/alt-text
@@ -260,9 +266,15 @@ function NFTDisplay({
               if (state.loadingUrlType) {
                 return null;
               }
+              if (state.urlType?.startsWith('image/svg+xml')) {
+                return /*#__PURE__*/_jsx(RenderSvg, {
+                  src: getFullContentUrl(),
+                  onLoad: onLoad
+                });
+              }
 
               // render image
-              if (state.urlType?.startsWith('image') && !state.urlType.startsWith('image/svg')) {
+              if (state.urlType?.startsWith('image')) {
                 return renderImg();
               }
               return renderObject();

package/lib/NFTDisplay/render-svg.d.ts

@@ -0,0 +1,5 @@
+declare function RenderSvg({ src, onLoad }: {
+    src: string;
+    onLoad?: () => void;
+}): import("react/jsx-runtime").JSX.Element;
+export default RenderSvg;

package/lib/NFTDisplay/render-svg.js

@@ -0,0 +1,23 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import DOMPurify from 'dompurify';
+import { useAsyncEffect } from 'ahooks';
+import axios from 'axios';
+import { useState } from 'react';
+import InlineSvg from './svg-embedder/inline-svg';
+function RenderSvg({
+  src,
+  onLoad
+}) {
+  const [svgContent, setSvgContent] = useState('');
+  useAsyncEffect(async () => {
+    // @note: 注意源站点需要允许跨域
+    const response = await axios.get(src);
+    const cleanSVG = DOMPurify.sanitize(response.data);
+    setSvgContent(cleanSVG);
+    onLoad?.();
+  }, []);
+  return /*#__PURE__*/_jsx(InlineSvg, {
+    svg: svgContent
+  });
+}
+export default RenderSvg;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@arcblock/ux",
-  "version": "2.10.73",
+  "version": "2.10.75",
   "description": "Common used react components for arcblock products",
   "keywords": [
     "react",
@@ -67,12 +67,12 @@
     "react": ">=18.2.0",
     "react-router-dom": ">=6.22.3"
   },
-  "gitHead": "ab1e258ff3ddcabdef0512d52baa75a5ad43a5ec",
+  "gitHead": "9e8d12bef56d3cd933ef1cb3a7209068de448dbb",
   "dependencies": {
     "@arcblock/did-motif": "^1.1.13",
-    "@arcblock/icons": "^2.10.73",
-    "@arcblock/nft-display": "^2.10.73",
-    "@arcblock/react-hooks": "^2.10.73",
+    "@arcblock/icons": "^2.10.75",
+    "@arcblock/nft-display": "^2.10.75",
+    "@arcblock/react-hooks": "^2.10.75",
     "@babel/plugin-syntax-dynamic-import": "^7.8.3",
     "@fontsource/inter": "^5.0.16",
     "@fontsource/ubuntu-mono": "^5.0.18",
@@ -83,6 +83,7 @@
     "@iconify/react": "^4.1.1",
     "@solana/qr-code-styling": "^1.6.0-beta.0",
     "@testing-library/react": "^14.0.0",
+    "@types/dompurify": "^3.2.0",
     "@types/mui-datatables": "^4.3.12",
     "ahooks": "^3.7.10",
     "axios": "^1.7.5",
@@ -92,6 +93,7 @@
     "d3-geo": "^1.12.1",
     "dayjs": "^1.11.5",
     "devices.css": "^0.1.15",
+    "dompurify": "^3.2.1",
     "highlight.js": "^11.6.0",
     "iconify-icon": "^1.0.8",
     "iconify-icons-material-symbols-400": "^0.0.1",

package/src/Dialog/confirm.jsx

@@ -16,8 +16,8 @@ import Dialog from './dialog';
  *   showCancelButton?: true | false,
  *   showCloseButton?: true | false,
  *   fullScreen?: false | true,
- *   confirmButton?: {text: string, props?: ButtonProps}
- *   cancelButton?: {text: string, props?: ButtonProps}
+ *   confirmButton?: {text: React.ReactNode, props?: ButtonProps}
+ *   cancelButton?: {text: React.ReactNode, props?: ButtonProps}
  *   PaperProps?: PaperProps
  * }} ConfirmProps
  */
@@ -121,11 +121,11 @@ Confirm.propTypes = {
   fullScreen: PropTypes.bool,
   // 可以传入 {text: ..., props: ...}
   confirmButton: PropTypes.shape({
-    text: PropTypes.string.isRequired,
+    text: PropTypes.node.isRequired,
     props: PropTypes.object,
   }),
   cancelButton: PropTypes.shape({
-    text: PropTypes.string.isRequired,
+    text: PropTypes.node.isRequired,
     props: PropTypes.object,
   }),
   PaperProps: PropTypes.object,

package/src/Locale/context.tsx

@@ -74,7 +74,7 @@ interface LocaleProviderProps {
 export interface LocaleContextType {
   locale: Locale;
   changeLocale: (locale: Locale) => void;
-  t: (key: string, data?: Record<string, string | number>) => string;
+  t: (key: string, data?: Record<string, any>) => string;
   languages: { code: string; name: string }[];
 }
 
@@ -130,7 +130,7 @@ function LocaleProvider({
   }
 
   const t = useCallback(
-    (key: string, data?: any) => translate(translations, key, currentLocale, fallbackLocale, data),
+    (key: string, data?: Record<string, any>) => translate(translations, key, currentLocale, fallbackLocale, data),
     [translations, currentLocale, fallbackLocale]
   );
 

package/src/Metric/index.tsx

@@ -31,7 +31,7 @@ export default function Metric({
       <div>
         <div
           className={`metric__number ${animated ? 'metric__number--animated' : ''}`}
-          dangerouslySetInnerHTML={{ __html: value }}
+          dangerouslySetInnerHTML={{ __html: value as string }}
         />
         <div className="metric__name">{name}</div>
       </div>

package/src/NFTDisplay/index.tsx

@@ -16,6 +16,7 @@ import DefaultLoading from './loading';
 import DefaultBrokenImage from './broken';
 import { styled } from '../Theme';
 import displayApi from './displayApi';
+import RenderSvg from './render-svg';
 
 /**
  * 从 assetState 中获取 nft data, 兼容新旧两种类型的数据结构, 建议将该方法的返回值传入 NFTDisplay 组件的 data prop
@@ -113,7 +114,7 @@ function NFTDisplay({
     const display = parsed.current.credentialSubject
       ? get(parsed.current, 'credentialSubject.display')
       : parsed.current;
-    const { content, type } = display;
+    const { content, type } = display as { content: string; type: string };
     const isUrlType = type === 'url';
 
     // 首次加载, 对于 url type 的情况, loading 为 true
@@ -256,6 +257,11 @@ function NFTDisplay({
         return renderImg();
       }
 
+      // related: https://github.com/ArcBlock/did-spaces/issues/1367
+      if (objectType.includes('text/html;')) {
+        return <DefaultBrokenImage />;
+      }
+
       return (
         // eslint-disable-next-line jsx-a11y/alt-text
         <object
@@ -277,8 +283,12 @@ function NFTDisplay({
               return null;
             }
 
+            if (state.urlType?.startsWith('image/svg+xml')) {
+              return <RenderSvg src={getFullContentUrl()} onLoad={onLoad} />;
+            }
+
             // render image
-            if (state.urlType?.startsWith('image') && !state.urlType.startsWith('image/svg')) {
+            if (state.urlType?.startsWith('image')) {
               return renderImg();
             }
 

package/src/NFTDisplay/render-svg.tsx

@@ -0,0 +1,21 @@
+import DOMPurify from 'dompurify';
+import { useAsyncEffect } from 'ahooks';
+import axios from 'axios';
+import { useState } from 'react';
+import InlineSvg from './svg-embedder/inline-svg';
+
+function RenderSvg({ src, onLoad }: { src: string; onLoad?: () => void }) {
+  const [svgContent, setSvgContent] = useState('');
+
+  useAsyncEffect(async () => {
+    // @note: 注意源站点需要允许跨域
+    const response = await axios.get(src);
+    const cleanSVG = DOMPurify.sanitize(response.data);
+    setSvgContent(cleanSVG);
+    onLoad?.();
+  }, []);
+
+  return <InlineSvg svg={svgContent} />;
+}
+
+export default RenderSvg;