@arcblock/ux 2.10.14 → 2.10.16

package/lib/NFTDisplay/demo/data/asset-state-did-space.json

@@ -0,0 +1,7 @@
+{
+  "address": "zjdvx8aWRFo96Y974NDRDgynnRKVJyxeRpmv",
+  "display": {
+    "content": "https://storage.staging.abtnet.io/app/resolve/display",
+    "type": "url"
+  }
+}

package/lib/NFTDisplay/index.js

@@ -7,7 +7,6 @@ import get from 'lodash/get';
 import pako from 'pako';
 import base64 from 'base64-url';
 import isSvg from 'is-svg';
-import { ReactSVG } from 'react-svg';
 import noop from 'lodash/noop';
 import AspectRatioContainer from './aspect-ratio-container';
 import ImgSvgEmbedder from './svg-embedder/img';
@@ -65,6 +64,7 @@ function NFTDisplay({
   checkSvg,
   minimumLoadingTime,
   onCompleted,
+  imageFilter,
   ...rest
 }) {
   const wrapRoot = children => /*#__PURE__*/_jsx(Root, {
@@ -96,16 +96,77 @@ function NFTDisplay({
     // 首次加载, 对于 url type 的情况, loading 为 true
     const [state, setState] = useState({
       loading: isUrlType,
-      error: false
+      error: false,
+      loadingUrlType: true,
+      urlType: null
     });
     const [minimumLoadingReady, setMinimumLoadingReady] = useState(minimumLoadingTime <= 0);
     // console.log('[debug] render', {type, minimumLoadingTime}, JSON.stringify(state))
 
+    // assemble the complete url
+    const getFullContentUrl = ({
+      useImageFilter = false,
+      t
+    } = {}) => {
+      const urlObj = new URL(content);
+
+      // check protocol
+      if (window.location.protocol === 'https:' && urlObj.protocol === 'http:') {
+        urlObj.protocol = 'https:';
+      }
+      if (!urlObj.searchParams.has('assetId')) {
+        urlObj.searchParams.append('assetId', address);
+      }
+      if (!urlObj.searchParams.has('vcId') && vcId) {
+        urlObj.searchParams.append('vcId', vcId);
+      }
+
+      // image filter
+      if (useImageFilter && imageFilter) {
+        Object.entries(imageFilter).forEach(([key, value]) => {
+          urlObj.searchParams.append(key, value);
+        });
+      }
+
+      // other params
+      if (t) {
+        urlObj.searchParams.append('t', t);
+      }
+      return urlObj.href;
+    };
+
+    // get url content type
+    const getUrlContentType = async () => {
+      try {
+        const response = await fetch(getFullContentUrl({
+          useImageFilter: false,
+          t: 'nftdisplay'
+        }), {
+          method: 'HEAD'
+        });
+        const contentType = response.headers.get('Content-Type');
+        setState({
+          ...state,
+          loadingUrlType: false,
+          urlType: contentType
+        });
+      } catch (error) {
+        console.error('Failed to fetch url content type', error);
+        setState({
+          ...state,
+          loadingUrlType: false,
+          urlType: null
+        });
+      }
+    };
     useEffect(() => {
       let timer;
       if (minimumLoadingTime > 0) {
         timer = setTimeout(() => setMinimumLoadingReady(true), minimumLoadingTime);
       }
+      if (type === 'url') {
+        getUrlContentType();
+      }
       return () => clearTimeout(timer);
       // eslint-disable-next-line react-hooks/exhaustive-deps
     }, []);
@@ -120,69 +181,73 @@ function NFTDisplay({
     if (state.error) {
       throw new Error('Failed to render NFT Display.');
     }
+    const onLoad = () => {
+      if (state.loading) {
+        setState({
+          ...state,
+          loading: false
+        });
+      }
+    };
+    const onError = () => {
+      setState({
+        ...state,
+        error: true,
+        loading: false
+      });
+    };
+
+    // render image
+    const renderImg = () => {
+      const url = getFullContentUrl({
+        useImageFilter: true
+      });
+      return /*#__PURE__*/_jsx("img", {
+        src: url,
+        onError: onError,
+        onLoad: onLoad,
+        alt: "NFT Display",
+        style: {
+          width: 'auto',
+          height: 'auto'
+        }
+      });
+    };
+
+    // render object
+    const renderObject = () => {
+      const objectType = state.urlType || 'image/svg+xml';
+      const url = getFullContentUrl();
+      return (
+        /*#__PURE__*/
+        // eslint-disable-next-line jsx-a11y/alt-text
+        _jsx("object", {
+          type: objectType,
+          data: url,
+          onErrorCapture: onError,
+          onLoad: onLoad,
+          style: {
+            width: 'auto',
+            height: 'auto',
+            pointerEvents: 'none'
+          }
+        }, url)
+      );
+    };
     const renderNFT = () => {
       if (content) {
         switch (type) {
           case 'url':
             {
-              const urlObj = new URL(content);
-              if (!urlObj.searchParams.has('assetId')) {
-                urlObj.searchParams.append('assetId', address);
+              if (state.loadingUrlType) {
+                return null;
               }
-              if (!urlObj.searchParams.has('vcId') && vcId) {
-                urlObj.searchParams.append('vcId', vcId);
+
+              // render image
+              if (state.urlType?.startsWith('image') && !state.urlType.startsWith('image/svg')) {
+                return renderImg();
               }
-              const url = urlObj.href;
-              const safeOnLoad = () => {
-                if (state.loading) {
-                  setState({
-                    ...state,
-                    loading: false
-                  });
-                }
-              };
-              return state.fallback ? state.fallback?.() : /*#__PURE__*/_jsx(ReactSVG, {
-                src: url,
-                beforeInjection: svg => {
-                  svg.setAttribute('style', 'pointer-events: none; width: 100%; height: 100%;');
-                },
-                afterInjection: safeOnLoad,
-                onError: error => {
-                  let objectType = null;
-                  if (error?.message?.indexOf('Invalid content type: ') > -1) {
-                    objectType = error.message.split('Invalid content type: ')?.[1];
-                  } else if (error?.message?.indexOf('Unable to load SVG file: ') > -1) {
-                    objectType = 'image/svg+xml';
-                  }
-                  setState({
-                    ...state,
-                    // fallback to object, and use objectType to render
-                    fallback: () =>
-                    /*#__PURE__*/
-                    // eslint-disable-next-line jsx-a11y/alt-text
-                    _jsx("object", {
-                      type: objectType,
-                      data: url,
-                      onErrorCapture: () => {
-                        setState({
-                          ...state,
-                          error: true,
-                          loading: false
-                        });
-                      },
-                      onLoad: safeOnLoad,
-                      style: {
-                        width: 'auto',
-                        height: 'auto',
-                        pointerEvents: 'none'
-                      }
-                    }, url)
-                  });
-                }
-                // evalScripts="always"
-                ,
-                wrapper: "div"
-              });
+              return renderObject();
             }
           case 'uri':
             {
@@ -259,7 +324,10 @@ NFTDisplay.propTypes = {
   // loading 最小显示时间 (避免闪烁)
   minimumLoadingTime: PropTypes.number,
   // 完成回调, 无论加载成功|失败
-  onCompleted: PropTypes.func
+  onCompleted: PropTypes.func,
+  // 图片处理，参考：https://team.arcblock.io/comment/docs/c158aee4-accd-42f4-9ced-6a23f28c00e0/en/blocklet-image-service-guide
+  // 配置参数会全部转发给 Image Service
+  imageFilter: PropTypes.object
 };
 NFTDisplay.defaultProps = {
   component: 'span',
@@ -271,7 +339,8 @@ NFTDisplay.defaultProps = {
   preferredSvgEmbedder: 'img',
   checkSvg: false,
   minimumLoadingTime: 0,
-  onCompleted: noop
+  onCompleted: noop,
+  imageFilter: null
 };
 const Root = styled('div')`
   display: flex;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@arcblock/ux",
-  "version": "2.10.14",
+  "version": "2.10.16",
   "description": "Common used react components for arcblock products",
   "keywords": [
     "react",
@@ -54,12 +54,12 @@
     "react": ">=18.2.0",
     "react-router-dom": ">=6.22.3"
   },
-  "gitHead": "11320e1a4438e518799515f9e30f5fa091f6cf60",
+  "gitHead": "4e446d45fbf0db374ffe0ebc9ba0b9dce08fbe0a",
   "dependencies": {
     "@arcblock/did-motif": "^1.1.13",
-    "@arcblock/icons": "^2.10.14",
-    "@arcblock/nft-display": "^2.10.14",
-    "@arcblock/react-hooks": "^2.10.14",
+    "@arcblock/icons": "^2.10.16",
+    "@arcblock/nft-display": "^2.10.16",
+    "@arcblock/react-hooks": "^2.10.16",
     "@babel/plugin-syntax-dynamic-import": "^7.8.3",
     "@fontsource/inter": "^5.0.16",
     "@fontsource/ubuntu-mono": "^5.0.18",

package/src/NFTDisplay/index.js

@@ -7,7 +7,6 @@ import get from 'lodash/get';
 import pako from 'pako';
 import base64 from 'base64-url';
 import isSvg from 'is-svg';
-import { ReactSVG } from 'react-svg';
 import noop from 'lodash/noop';
 
 import AspectRatioContainer from './aspect-ratio-container';
@@ -64,6 +63,7 @@ function NFTDisplay({
   checkSvg,
   minimumLoadingTime,
   onCompleted,
+  imageFilter,
   ...rest
 }) {
   const wrapRoot = (children) => (
@@ -90,15 +90,71 @@ function NFTDisplay({
     const isUrlType = type === 'url';
 
     // 首次加载, 对于 url type 的情况, loading 为 true
-    const [state, setState] = useState({ loading: isUrlType, error: false });
+    const [state, setState] = useState({
+      loading: isUrlType,
+      error: false,
+      loadingUrlType: true,
+      urlType: null,
+    });
     const [minimumLoadingReady, setMinimumLoadingReady] = useState(minimumLoadingTime <= 0);
     // console.log('[debug] render', {type, minimumLoadingTime}, JSON.stringify(state))
 
+    // assemble the complete url
+    const getFullContentUrl = ({ useImageFilter = false, t } = {}) => {
+      const urlObj = new URL(content);
+
+      // check protocol
+      if (window.location.protocol === 'https:' && urlObj.protocol === 'http:') {
+        urlObj.protocol = 'https:';
+      }
+
+      if (!urlObj.searchParams.has('assetId')) {
+        urlObj.searchParams.append('assetId', address);
+      }
+
+      if (!urlObj.searchParams.has('vcId') && vcId) {
+        urlObj.searchParams.append('vcId', vcId);
+      }
+
+      // image filter
+      if (useImageFilter && imageFilter) {
+        Object.entries(imageFilter).forEach(([key, value]) => {
+          urlObj.searchParams.append(key, value);
+        });
+      }
+
+      // other params
+      if (t) {
+        urlObj.searchParams.append('t', t);
+      }
+
+      return urlObj.href;
+    };
+
+    // get url content type
+    const getUrlContentType = async () => {
+      try {
+        const response = await fetch(getFullContentUrl({ useImageFilter: false, t: 'nftdisplay' }), {
+          method: 'HEAD',
+        });
+        const contentType = response.headers.get('Content-Type');
+        setState({ ...state, loadingUrlType: false, urlType: contentType });
+      } catch (error) {
+        console.error('Failed to fetch url content type', error);
+        setState({ ...state, loadingUrlType: false, urlType: null });
+      }
+    };
+
     useEffect(() => {
       let timer;
       if (minimumLoadingTime > 0) {
         timer = setTimeout(() => setMinimumLoadingReady(true), minimumLoadingTime);
       }
+
+      if (type === 'url') {
+        getUrlContentType();
+      }
+
       return () => clearTimeout(timer);
       // eslint-disable-next-line react-hooks/exhaustive-deps
     }, []);
@@ -115,66 +171,55 @@ function NFTDisplay({
       throw new Error('Failed to render NFT Display.');
     }
 
+    const onLoad = () => {
+      if (state.loading) {
+        setState({ ...state, loading: false });
+      }
+    };
+
+    const onError = () => {
+      setState({ ...state, error: true, loading: false });
+    };
+
+    // render image
+    const renderImg = () => {
+      const url = getFullContentUrl({ useImageFilter: true });
+      return (
+        <img src={url} onError={onError} onLoad={onLoad} alt="NFT Display" style={{ width: 'auto', height: 'auto' }} />
+      );
+    };
+
+    // render object
+    const renderObject = () => {
+      const objectType = state.urlType || 'image/svg+xml';
+      const url = getFullContentUrl();
+      return (
+        // eslint-disable-next-line jsx-a11y/alt-text
+        <object
+          key={url}
+          type={objectType}
+          data={url}
+          onErrorCapture={onError}
+          onLoad={onLoad}
+          style={{ width: 'auto', height: 'auto', pointerEvents: 'none' }}
+        />
+      );
+    };
+
     const renderNFT = () => {
       if (content) {
         switch (type) {
           case 'url': {
-            const urlObj = new URL(content);
-            if (!urlObj.searchParams.has('assetId')) {
-              urlObj.searchParams.append('assetId', address);
+            if (state.loadingUrlType) {
+              return null;
             }
 
-            if (!urlObj.searchParams.has('vcId') && vcId) {
-              urlObj.searchParams.append('vcId', vcId);
+            // render image
+            if (state.urlType?.startsWith('image') && !state.urlType.startsWith('image/svg')) {
+              return renderImg();
             }
 
-            const url = urlObj.href;
-
-            const safeOnLoad = () => {
-              if (state.loading) {
-                setState({ ...state, loading: false });
-              }
-            };
-
-            return state.fallback ? (
-              state.fallback?.()
-            ) : (
-              <ReactSVG
-                src={url}
-                beforeInjection={(svg) => {
-                  svg.setAttribute('style', 'pointer-events: none; width: 100%; height: 100%;');
-                }}
-                afterInjection={safeOnLoad}
-                onError={(error) => {
-                  let objectType = null;
-                  if (error?.message?.indexOf('Invalid content type: ') > -1) {
-                    objectType = error.message.split('Invalid content type: ')?.[1];
-                  } else if (error?.message?.indexOf('Unable to load SVG file: ') > -1) {
-                    objectType = 'image/svg+xml';
-                  }
-
-                  setState({
-                    ...state,
-                    // fallback to object, and use objectType to render
-                    fallback: () => (
-                      // eslint-disable-next-line jsx-a11y/alt-text
-                      <object
-                        key={url}
-                        type={objectType}
-                        data={url}
-                        onErrorCapture={() => {
-                          setState({ ...state, error: true, loading: false });
-                        }}
-                        onLoad={safeOnLoad}
-                        style={{ width: 'auto', height: 'auto', pointerEvents: 'none' }}
-                      />
-                    ),
-                  });
-                }}
-                // evalScripts="always"
-                wrapper="div"
-              />
-            );
+            return renderObject();
           }
           case 'uri': {
             return (
@@ -245,6 +290,9 @@ NFTDisplay.propTypes = {
   minimumLoadingTime: PropTypes.number,
   // 完成回调, 无论加载成功|失败
   onCompleted: PropTypes.func,
+  // 图片处理，参考：https://team.arcblock.io/comment/docs/c158aee4-accd-42f4-9ced-6a23f28c00e0/en/blocklet-image-service-guide
+  // 配置参数会全部转发给 Image Service
+  imageFilter: PropTypes.object,
 };
 
 NFTDisplay.defaultProps = {
@@ -258,6 +306,7 @@ NFTDisplay.defaultProps = {
   checkSvg: false,
   minimumLoadingTime: 0,
   onCompleted: noop,
+  imageFilter: null,
 };
 
 const Root = styled('div')`