@arcblock/ux 2.10.17 → 2.10.19

package/lib/NFTDisplay/demo/data/asset-state-bad-url.json

@@ -0,0 +1,7 @@
+{
+  "address": "zjdu6nZFWRPuDmgPf9ouyDwcDzHgPZnQK6x9",
+  "display": {
+    "content": "http://ffd25853-znkqnawy8sak6l8hgquuy2jp4mftzf4qqc1s.did.abtnet.io/uploads/W-SR0XIzQnL2EA1o728CN.jpeg",
+    "type": "url"
+  }
+}

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

@@ -0,0 +1,7 @@
+{
+  "address": "zjdq6X6NGfivzN22RjTD427kKSS6jE5Rmnmw",
+  "display": {
+    "content": "https://devcon.arcblock.io/workshop/api/nft/display",
+    "type": "url"
+  }
+}

package/lib/NFTDisplay/displayApi.js

@@ -0,0 +1,47 @@
+import axios from 'axios';
+import adapter from 'axios/lib/adapters/xhr.js';
+const cache = new Map();
+const EXPIRATION_TIME_MS = 10 * 60 * 1000; // 10 minutes
+
+const cacheAdapterEnhancer = config => {
+  const {
+    url,
+    method
+  } = config;
+  const cacheKey = JSON.stringify({
+    url,
+    method
+  });
+  if (cache.has(cacheKey)) {
+    const cachedResult = cache.get(cacheKey);
+    if (Date.now() - cachedResult.timestamp < EXPIRATION_TIME_MS) {
+      if (cachedResult.error) {
+        return Promise.reject(cachedResult.error);
+      }
+      return Promise.resolve({
+        headers: cachedResult.headers
+      });
+    }
+    cache.delete(cacheKey);
+  }
+  return adapter(config).then(response => {
+    // cache headers
+    cache.set(cacheKey, {
+      headers: response.headers,
+      timestamp: Date.now()
+    });
+    return response;
+  }).catch(error => {
+    // cache error
+    cache.set(cacheKey, {
+      error,
+      timestamp: Date.now()
+    });
+    throw error;
+  });
+};
+const instance = axios.create({
+  adapter: cacheAdapterEnhancer,
+  timeout: 5000
+});
+export default instance;

package/lib/NFTDisplay/index.js

@@ -14,6 +14,7 @@ import InlineSvgEmbedder from './svg-embedder/inline-svg';
 import DefaultLoading from './loading';
 import DefaultBrokenImage from './broken';
 import { styled } from '../Theme';
+import displayApi from './displayApi';
 
 /**
  * 从 assetState 中获取 nft data, 兼容新旧两种类型的数据结构, 建议将该方法的返回值传入 NFTDisplay 组件的 data prop
@@ -138,13 +139,14 @@ function NFTDisplay({
     // get url content type
     const getUrlContentType = async () => {
       try {
-        const response = await fetch(getFullContentUrl({
-          useImageFilter: false,
-          t: 'nftdisplay'
-        }), {
+        const response = await displayApi({
+          url: getFullContentUrl({
+            useImageFilter: false,
+            t: 'nftdisplay'
+          }),
           method: 'HEAD'
         });
-        const contentType = response.headers.get('Content-Type');
+        const contentType = response?.headers?.get('Content-Type');
         setState({
           ...state,
           loadingUrlType: false,
@@ -152,6 +154,16 @@ function NFTDisplay({
         });
       } catch (error) {
         console.error('Failed to fetch url content type', error);
+        // display an error message when timeout occurs to avoid repeated waiting.
+        if (error?.message?.includes('timeout')) {
+          setState({
+            ...state,
+            loadingUrlType: false,
+            loading: false,
+            error: true
+          });
+          return;
+        }
         setState({
           ...state,
           loadingUrlType: false,
@@ -227,8 +239,8 @@ function NFTDisplay({
           onErrorCapture: onError,
           onLoad: onLoad,
           style: {
-            width: 'auto',
-            height: 'auto',
+            width: '100%',
+            height: '100%',
             pointerEvents: 'none'
           }
         }, url)

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@arcblock/ux",
-  "version": "2.10.17",
+  "version": "2.10.19",
   "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": "1c69e771a4305f01dc0070c3571364c81e8d0cb3",
+  "gitHead": "0cbaed2d297aa7ee7e7ebbaf7ccbc029ee3e624b",
   "dependencies": {
     "@arcblock/did-motif": "^1.1.13",
-    "@arcblock/icons": "^2.10.17",
-    "@arcblock/nft-display": "^2.10.17",
-    "@arcblock/react-hooks": "^2.10.17",
+    "@arcblock/icons": "^2.10.19",
+    "@arcblock/nft-display": "^2.10.19",
+    "@arcblock/react-hooks": "^2.10.19",
     "@babel/plugin-syntax-dynamic-import": "^7.8.3",
     "@fontsource/inter": "^5.0.16",
     "@fontsource/ubuntu-mono": "^5.0.18",

package/src/NFTDisplay/displayApi.js

@@ -0,0 +1,42 @@
+import axios from 'axios';
+import adapter from 'axios/lib/adapters/xhr.js';
+
+const cache = new Map();
+const EXPIRATION_TIME_MS = 10 * 60 * 1000; // 10 minutes
+
+const cacheAdapterEnhancer = (config) => {
+  const { url, method } = config;
+  const cacheKey = JSON.stringify({ url, method });
+
+  if (cache.has(cacheKey)) {
+    const cachedResult = cache.get(cacheKey);
+    if (Date.now() - cachedResult.timestamp < EXPIRATION_TIME_MS) {
+      if (cachedResult.error) {
+        return Promise.reject(cachedResult.error);
+      }
+
+      return Promise.resolve({ headers: cachedResult.headers });
+    }
+
+    cache.delete(cacheKey);
+  }
+
+  return adapter(config)
+    .then((response) => {
+      // cache headers
+      cache.set(cacheKey, { headers: response.headers, timestamp: Date.now() });
+      return response;
+    })
+    .catch((error) => {
+      // cache error
+      cache.set(cacheKey, { error, timestamp: Date.now() });
+      throw error;
+    });
+};
+
+const instance = axios.create({
+  adapter: cacheAdapterEnhancer,
+  timeout: 5000,
+});
+
+export default instance;

package/src/NFTDisplay/index.js

@@ -15,6 +15,7 @@ import InlineSvgEmbedder from './svg-embedder/inline-svg';
 import DefaultLoading from './loading';
 import DefaultBrokenImage from './broken';
 import { styled } from '../Theme';
+import displayApi from './displayApi';
 
 /**
  * 从 assetState 中获取 nft data, 兼容新旧两种类型的数据结构, 建议将该方法的返回值传入 NFTDisplay 组件的 data prop
@@ -134,13 +135,20 @@ function NFTDisplay({
     // get url content type
     const getUrlContentType = async () => {
       try {
-        const response = await fetch(getFullContentUrl({ useImageFilter: false, t: 'nftdisplay' }), {
+        const response = await displayApi({
+          url: getFullContentUrl({ useImageFilter: false, t: 'nftdisplay' }),
           method: 'HEAD',
         });
-        const contentType = response.headers.get('Content-Type');
+        const contentType = response?.headers?.get('Content-Type');
         setState({ ...state, loadingUrlType: false, urlType: contentType });
       } catch (error) {
         console.error('Failed to fetch url content type', error);
+        // display an error message when timeout occurs to avoid repeated waiting.
+        if (error?.message?.includes('timeout')) {
+          setState({ ...state, loadingUrlType: false, loading: false, error: true });
+          return;
+        }
+
         setState({ ...state, loadingUrlType: false, urlType: null });
       }
     };
@@ -201,7 +209,7 @@ function NFTDisplay({
           data={url}
           onErrorCapture={onError}
           onLoad={onLoad}
-          style={{ width: 'auto', height: 'auto', pointerEvents: 'none' }}
+          style={{ width: '100%', height: '100%', pointerEvents: 'none' }}
         />
       );
     };