@arcblock/ux 2.10.48 → 2.10.49

package/lib/DID/index.js

@@ -118,16 +118,16 @@ const DID = /*#__PURE__*/forwardRef((props, ref) => {
   const [open, setOpen] = useState(false);
   const isEthDid = isEthereumDid(did);
   const didMotifInfo = isEthDid ? undefined : getDIDMotifInfo(did);
-  const getPrepend = avatarSize => [/*#__PURE__*/_jsx("span", {
+  const getPrepend = (avatarSize, keyPrefix) => [/*#__PURE__*/_jsx("span", {
     style: {
       flex: '0 0 auto',
       color: getFontColor(did, didMotifInfo, isEthDid)
     },
     children: "DID:"
-  }, "prefix-did"), /*#__PURE__*/_jsx("span", {
+  }, `${keyPrefix}-prefix-did-${avatarSize}`), /*#__PURE__*/_jsx("span", {
     className: "did-address-text",
     children: "ABT:"
-  }, "prefix-abt"), showAvatar && /*#__PURE__*/_jsx(Avatar, {
+  }, `${keyPrefix}-prefix-abt-${avatarSize}`), showAvatar && /*#__PURE__*/_jsx(Avatar, {
     src: "",
     did: did,
     size: getAvatarSize(didMotifInfo, isEthDid, avatarSize || 18),
@@ -139,7 +139,7 @@ const DID = /*#__PURE__*/forwardRef((props, ref) => {
     },
     blockiesPadding: false,
     className: "did-address-avatar"
-  }, "avatar")];
+  }, `${keyPrefix}-avatar-${avatarSize}`)];
   const closeQrCode = useMemoizedFn(() => {
     setOpen(false);
   });
@@ -188,7 +188,7 @@ const DID = /*#__PURE__*/forwardRef((props, ref) => {
       content: `${DID_PREFIX}${did}`,
       ...rest,
       ref: addressRef,
-      prepend: getPrepend(rest.size),
+      prepend: getPrepend(rest.size, 'address'),
       append: /*#__PURE__*/_jsxs(_Fragment, {
         children: [showQrcode ? /*#__PURE__*/_jsx(Box, {
           id: "did-qrcode-button",
@@ -198,13 +198,13 @@ const DID = /*#__PURE__*/forwardRef((props, ref) => {
           sx: {
             flexShrink: 0,
             cursor: 'pointer',
-            ml: rest.copyable ? 0.5 : 0,
+            ml: 0.5,
             color: 'grey.500'
           }
         }) : null, rest.append]
       }),
       children: did
-    }), /*#__PURE__*/_jsx(Dialog, {
+    }, "address"), /*#__PURE__*/_jsx(Dialog, {
       open: open,
       onClose: closeQrCode,
       maxWidth: "sm",
@@ -243,12 +243,12 @@ const DID = /*#__PURE__*/forwardRef((props, ref) => {
           children: /*#__PURE__*/_jsx(Address, {
             locale: locale,
             content: `${DID_PREFIX}${did}`,
-            prepend: getPrepend(16),
+            prepend: getPrepend(16, 'dialog'),
             ...rest,
             size: 16,
             copyable: true,
             children: did
-          })
+          }, "dialog-address")
         }), /*#__PURE__*/_jsx(Typography, {
           variant: "body2",
           sx: {

package/package.json

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

package/src/DID/index.tsx

@@ -158,16 +158,18 @@ const DID = forwardRef<HTMLDIDElement, IDIDPropTypes>((props, ref) => {
   const isEthDid = isEthereumDid(did);
   const didMotifInfo = isEthDid ? undefined : getDIDMotifInfo(did);
 
-  const getPrepend = (avatarSize: number) => [
-    <span key="prefix-did" style={{ flex: '0 0 auto', color: getFontColor(did, didMotifInfo, isEthDid) }}>
+  const getPrepend = (avatarSize: number, keyPrefix: string) => [
+    <span
+      key={`${keyPrefix}-prefix-did-${avatarSize}`}
+      style={{ flex: '0 0 auto', color: getFontColor(did, didMotifInfo, isEthDid) }}>
       DID:
     </span>,
-    <span key="prefix-abt" className="did-address-text">
+    <span key={`${keyPrefix}-prefix-abt-${avatarSize}`} className="did-address-text">
       ABT:
     </span>,
     showAvatar && (
       <Avatar
-        key="avatar"
+        key={`${keyPrefix}-avatar-${avatarSize}`}
         src=""
         did={did}
         size={getAvatarSize(didMotifInfo, isEthDid, avatarSize || 18)}
@@ -232,11 +234,12 @@ const DID = forwardRef<HTMLDIDElement, IDIDPropTypes>((props, ref) => {
   return (
     <>
       <Address
+        key="address"
         locale={locale}
         content={`${DID_PREFIX}${did}`}
         {...rest}
         ref={addressRef}
-        prepend={getPrepend(rest.size)}
+        prepend={getPrepend(rest.size, 'address')}
         append={
           <>
             {showQrcode ? (
@@ -248,7 +251,7 @@ const DID = forwardRef<HTMLDIDElement, IDIDPropTypes>((props, ref) => {
                 sx={{
                   flexShrink: 0,
                   cursor: 'pointer',
-                  ml: rest.copyable ? 0.5 : 0,
+                  ml: 0.5,
                   color: 'grey.500',
                 }}
               />
@@ -285,9 +288,10 @@ const DID = forwardRef<HTMLDIDElement, IDIDPropTypes>((props, ref) => {
           />
           <Box sx={{ mt: 1.5, textAlign: 'center' }}>
             <Address
+              key="dialog-address"
               locale={locale}
               content={`${DID_PREFIX}${did}`}
-              prepend={getPrepend(16)}
+              prepend={getPrepend(16, 'dialog')}
               {...rest}
               size={16}
               copyable>