@arcblock/ux 2.10.33 → 2.10.35

package/lib/Badge/index.js

@@ -79,7 +79,7 @@ Badge.defaultProps = {
   className: '',
   style: '{}'
 };
-export default withDeprecated( /*#__PURE__*/forwardRef((props, ref) => /*#__PURE__*/_jsx(Badge, {
+export default withDeprecated(/*#__PURE__*/forwardRef((props, ref) => /*#__PURE__*/_jsx(Badge, {
   ...props,
   forwardedRef: ref
 })), {

package/lib/Datatable/CustomToolbar.js

@@ -135,7 +135,7 @@ export default function CustomToolbar(props) {
   // Large screens show the toolbar buttons directly, small screens show the drop-down menu style buttons
   // The right-hand button of the form toolbar in desktop mode
   const toolbarButtons = [...defaultButtons, ...customButtons].map((e, index) => {
-    if ( /*#__PURE__*/isValidElement(e)) {
+    if (/*#__PURE__*/isValidElement(e)) {
       return e;
     }
     const popId = getPopId(index);
@@ -146,7 +146,7 @@ export default function CustomToolbar(props) {
       } = e;
       // When popRender is present, clicking the button will bubble up the content returned by the popRender
       if (popRender) {
-        allPops.push( /*#__PURE__*/_jsx(Popover, {
+        allPops.push(/*#__PURE__*/_jsx(Popover, {
           open: !!allPopsEl[popId],
           anchorEl: () => allPopsEl[popId],
           onClose: () => {
@@ -192,7 +192,7 @@ export default function CustomToolbar(props) {
   const menuItems = [...defaultButtons, ...customButtons].map((e, index) => {
     const popId = getPopId(index);
     let content;
-    if ( /*#__PURE__*/isValidElement(e)) {
+    if (/*#__PURE__*/isValidElement(e)) {
       content = e;
     } else if (e.icon) {
       const {

package/lib/Datatable/index.js

@@ -278,7 +278,7 @@ function ReDataTable({
     emptyEl = /*#__PURE__*/_jsx(CircularProgress, {
       color: "primary"
     });
-  } else if ( /*#__PURE__*/isValidElement(emptyNode)) {
+  } else if (/*#__PURE__*/isValidElement(emptyNode)) {
     emptyEl = emptyNode;
   } else if (locale === 'zh') {
     emptyEl = /*#__PURE__*/_jsx(Empty, {

package/lib/Icon/index.js

@@ -75,7 +75,7 @@ const Span = styled('span')`
     line-height: ${props => props.size}px;
   }
 `;
-export default withDeprecated( /*#__PURE__*/forwardRef((props, ref) => /*#__PURE__*/_jsx(Icon, {
+export default withDeprecated(/*#__PURE__*/forwardRef((props, ref) => /*#__PURE__*/_jsx(Icon, {
   ...props,
   forwardedRef: ref
 })), {

package/lib/NFTDisplay/index.js

@@ -306,7 +306,7 @@ function NFTDisplay({
       }
       throw new Error(`unsupported display protocol: ${display.type}`);
     };
-    return wrapRoot( /*#__PURE__*/_jsxs(_Fragment, {
+    return wrapRoot(/*#__PURE__*/_jsxs(_Fragment, {
       children: [(state.loading || !minimumLoadingReady) && (renderLoading ? renderLoading() : /*#__PURE__*/_jsx(DefaultLoading, {})), renderNFT()]
     }));
   } catch (e) {

package/lib/PageScroller/index.js

@@ -88,7 +88,7 @@ function PageScroller({
     let i = 0;
     while (i < componentsToRenderLength && !isNil(children[i])) {
       containers[i] = true;
-      newComponentsToRender.push( /*#__PURE__*/_jsx("div", {
+      newComponentsToRender.push(/*#__PURE__*/_jsx("div", {
         style: {
           height: '100%',
           width: '100%'

package/lib/PageScroller/story/FullPage.js

@@ -13,7 +13,7 @@ export default function FullPage() {
   const [current, setCurrent] = useState(0);
   const pageNumbers = [];
   for (let i = 0; i < 5; i++) {
-    pageNumbers.push( /*#__PURE__*/_jsx(Button, {
+    pageNumbers.push(/*#__PURE__*/_jsx(Button, {
       variant: i === current ? 'contained' : 'outlined',
       size: "small",
       onClick: () => setCurrent(i),

package/lib/PageScroller/story/PageContain.js

@@ -13,7 +13,7 @@ export default function FullPage() {
   const [current, setCurrent] = useState(0);
   const pageNumbers = [];
   for (let i = 0; i < 5; i++) {
-    pageNumbers.push( /*#__PURE__*/_jsx(Button, {
+    pageNumbers.push(/*#__PURE__*/_jsx(Button, {
       variant: i === current ? 'contained' : 'outlined',
       size: "small",
       onClick: () => setCurrent(i),

package/lib/Passport/passport.js

@@ -4,6 +4,7 @@ import upperFirst from 'lodash/upperFirst';
 import { Box } from '@mui/material';
 import { useLocaleContext } from '@arcblock/ux/lib/Locale/context';
 import RevokeIcon from '@arcblock/icons/lib/RevokeIcon';
+import NFTDisplay from '../NFTDisplay';
 export default function Passport({
   passport,
   user,
@@ -24,13 +25,26 @@ export default function Passport({
       alignItems: 'center',
       ...rest?.sx
     },
-    children: [/*#__PURE__*/_jsx(Box, {
+    children: [!!passport.display && /*#__PURE__*/_jsx(Box, {
+      className: "passport-item__display",
+      sx: {
+        width
+      },
+      children: /*#__PURE__*/_jsx(NFTDisplay, {
+        address: passport.id,
+        data: passport.display,
+        imageFilter: typeof width === 'number' ? {
+          imageFilter: 'resize',
+          w: width
+        } : null
+      })
+    }), !passport.display && /*#__PURE__*/_jsx(Box, {
       className: "passport-item__display"
       // eslint-disable-next-line react/no-danger
       ,
       dangerouslySetInnerHTML: {
         __html: createPassportSvg({
-          title: passport.scope === 'passport' ? passport.title : passport.name,
+          title: passport.scope === 'kyc' ? passport.name : passport.title,
           issuer: passport.issuer && passport.issuer.name,
           issuerDid: passport.issuer && passport.issuer.id,
           ownerName: user.fullName,
@@ -39,6 +53,7 @@ export default function Passport({
           revoked: passport.revoked,
           scope: passport.scope,
           role: passport.role,
+          display: passport.display,
           preferredColor: color,
           width
         })

package/lib/withTracker/index.js

@@ -5,7 +5,7 @@ import * as Sentry from '@sentry/browser';
 import { useMount, useDeepCompareEffect } from 'ahooks';
 import { useLocation } from 'react-router-dom';
 import ErrorBoundary from './error_boundary';
-export default ((WrappedComponent, options = {}) => {
+export default (WrappedComponent, options = {}) => {
   const {
     appVersion,
     gaAccount,
@@ -52,4 +52,4 @@ export default ((WrappedComponent, options = {}) => {
       ...props
     });
   };
-});
+};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@arcblock/ux",
-  "version": "2.10.33",
+  "version": "2.10.35",
   "description": "Common used react components for arcblock products",
   "keywords": [
     "react",
@@ -48,8 +48,8 @@
     "copyfiles": "^2.4.1",
     "eslint-plugin-react-hooks": "^4.6.0",
     "glob": "^10.3.3",
-    "jest": "^28.1.3",
-    "jest-environment-jsdom": "^29.5.0",
+    "jest": "^29.7.0",
+    "jest-environment-jsdom": "^29.7.0",
     "moment-timezone": "^0.5.37",
     "typescript": "^5.5.4"
   },
@@ -61,12 +61,12 @@
     "react": ">=18.2.0",
     "react-router-dom": ">=6.22.3"
   },
-  "gitHead": "58a96227a0ce1ff3bb36b5f29ad09a4179d26020",
+  "gitHead": "f9b94c550f326b354ae2850e03e28947c5cdb0d1",
   "dependencies": {
     "@arcblock/did-motif": "^1.1.13",
-    "@arcblock/icons": "^2.10.33",
-    "@arcblock/nft-display": "^2.10.33",
-    "@arcblock/react-hooks": "^2.10.33",
+    "@arcblock/icons": "^2.10.35",
+    "@arcblock/nft-display": "^2.10.35",
+    "@arcblock/react-hooks": "^2.10.35",
     "@babel/plugin-syntax-dynamic-import": "^7.8.3",
     "@fontsource/inter": "^5.0.16",
     "@fontsource/ubuntu-mono": "^5.0.18",

package/src/Passport/passport.jsx

@@ -4,6 +4,8 @@ import { Box } from '@mui/material';
 import { useLocaleContext } from '@arcblock/ux/lib/Locale/context';
 import RevokeIcon from '@arcblock/icons/lib/RevokeIcon';
 
+import NFTDisplay from '../NFTDisplay';
+
 export default function Passport({ passport, user, color, width, icon, children, createPassportSvg, ...rest }) {
   const { t } = useLocaleContext();
   return (
@@ -14,25 +16,37 @@ export default function Passport({ passport, user, color, width, icon, children,
         alignItems: 'center',
         ...rest?.sx,
       }}>
-      <Box
-        className="passport-item__display"
-        // eslint-disable-next-line react/no-danger
-        dangerouslySetInnerHTML={{
-          __html: createPassportSvg({
-            title: passport.scope === 'passport' ? passport.title : passport.name,
-            issuer: passport.issuer && passport.issuer.name,
-            issuerDid: passport.issuer && passport.issuer.id,
-            ownerName: user.fullName,
-            ownerDid: user.did,
-            ownerAvatarUrl: user.avatar,
-            revoked: passport.revoked,
-            scope: passport.scope,
-            role: passport.role,
-            preferredColor: color,
-            width,
-          }),
-        }}
-      />
+      {!!passport.display && (
+        <Box className="passport-item__display" sx={{ width }}>
+          <NFTDisplay
+            address={passport.id}
+            data={passport.display}
+            imageFilter={typeof width === 'number' ? { imageFilter: 'resize', w: width } : null}
+          />
+        </Box>
+      )}
+      {!passport.display && (
+        <Box
+          className="passport-item__display"
+          // eslint-disable-next-line react/no-danger
+          dangerouslySetInnerHTML={{
+            __html: createPassportSvg({
+              title: passport.scope === 'kyc' ? passport.name : passport.title,
+              issuer: passport.issuer && passport.issuer.name,
+              issuerDid: passport.issuer && passport.issuer.id,
+              ownerName: user.fullName,
+              ownerDid: user.did,
+              ownerAvatarUrl: user.avatar,
+              revoked: passport.revoked,
+              scope: passport.scope,
+              role: passport.role,
+              display: passport.display,
+              preferredColor: color,
+              width,
+            }),
+          }}
+        />
+      )}
       <Box
         className="passport-item__body"
         sx={{