@arcblock/ux 2.13.62 → 2.13.64

package/lib/DID/index.js

@@ -7,6 +7,7 @@ import IconQrCode from '@iconify-icons/material-symbols/qr-code-rounded';
 import { Box, Dialog, DialogContent, Typography } from '@mui/material';
 import { useCreation, useMemoizedFn } from 'ahooks';
 import { forwardRef, useImperativeHandle, useRef, useState } from 'react';
+import { toAddress } from '@arcblock/did';
 import Address from '../Address';
 import Avatar from '../Avatar';
 import { DID_PREFIX } from '../Util/constant';
@@ -111,7 +112,7 @@ function useDIDInfo({
 }
 export const DID = /*#__PURE__*/forwardRef((props, ref) => {
   const {
-    did,
+    did: didAddress,
     chainId,
     roleType,
     showAvatar = true,
@@ -131,6 +132,7 @@ export const DID = /*#__PURE__*/forwardRef((props, ref) => {
     className,
     sx
   } = props;
+  const did = toAddress(didAddress);
   const rest = {
     size,
     component,

package/lib/DIDConnect/did-connect-container.js

@@ -98,7 +98,7 @@ export default function DIDConnectContainer({
     return `hsla(${h}, ${s}%, ${finalL}%, ${finalAlpha})`;
   });
   const backgroundGlow = `linear-gradient(45deg, ${colorListGlow.join(', ')})`;
-  const glowStyle = {
+  const glowStyle = open ? {
     overflow: 'visible',
     '&::before, &::after': {
       content: '""',
@@ -129,7 +129,7 @@ export default function DIDConnectContainer({
         backgroundPosition: '0 0'
       }
     }
-  };
+  } : {};
   if (openVariant === 'page') {
     return /*#__PURE__*/_jsx(Box, {
       className: "did-connect__container-page",
@@ -179,11 +179,11 @@ export default function DIDConnectContainer({
           borderBottomLeftRadius: 0,
           borderBottomRightRadius: 0,
           p: '2px',
-          animation: 'glowBreathe 7s linear infinite',
           '.did-connect__root': {
             backgroundColor: 'transparent'
           },
           overflow: 'hidden',
+          animation: open ? 'glowBreathe 7s linear infinite' : 'none',
           '@keyframes glowBreathe': {
             '0%, 100%': {
               boxShadow: `

package/lib/DIDConnect/did-connect-footer.js

@@ -2,6 +2,7 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { Box } from '@mui/material';
 import { useCreation, useSize } from 'ahooks';
 import { useRef } from 'react';
+import useBrowser from '@arcblock/react-hooks/lib/useBrowser';
 import PoweredBy from './powered-by';
 import AppInfoItem from './app-info-item';
 import AppIcon from './app-icon';
@@ -13,6 +14,7 @@ export default function DIDConnectFooter({
   currentAppColor = globalThis.blocklet?.appPid ? getDIDColor(globalThis.blocklet?.appPid) : '#fff',
   sx
 }) {
+  const browser = useBrowser();
   const rootRef = useRef(null);
   const size = useSize(rootRef);
   const isSmallView = useCreation(() => {
@@ -32,7 +34,8 @@ export default function DIDConnectFooter({
       backgroundColor: hexToRgba(currentAppColor, 0.08),
       // 需要保持跟 .did-connect__root 的规则一样
       mx: isSmallView ? -2 : -3,
-      px: isSmallView ? 2 : 3,
+      // eslint-disable-next-line no-nested-ternary
+      px: isSmallView ? browser.arcSphere ? 1 : 2 : 3,
       py: 1.5,
       // HACK: 极限条件下，footer 会溢出，使用隐藏的滚动条来处理这种情况（屏幕宽度小于 360 时会出现）
       overflow: 'auto',

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@arcblock/ux",
-  "version": "2.13.62",
+  "version": "2.13.64",
   "description": "Common used react components for arcblock products",
   "keywords": [
     "react",
@@ -71,14 +71,14 @@
     "react": ">=18.2.0",
     "react-router-dom": ">=6.22.3"
   },
-  "gitHead": "36a4594299167a1bff28fc11cb590e552576f687",
+  "gitHead": "04f505a6cbdced201553b0f69a4e62db07b1c736",
   "dependencies": {
     "@arcblock/did-motif": "^1.1.13",
-    "@arcblock/icons": "^2.13.62",
-    "@arcblock/nft-display": "^2.13.62",
-    "@arcblock/react-hooks": "^2.13.62",
+    "@arcblock/icons": "^2.13.64",
+    "@arcblock/nft-display": "^2.13.64",
+    "@arcblock/react-hooks": "^2.13.64",
     "@babel/plugin-syntax-dynamic-import": "^7.8.3",
-    "@blocklet/theme": "^2.13.62",
+    "@blocklet/theme": "^2.13.64",
     "@fontsource/roboto": "~5.1.1",
     "@fontsource/ubuntu-mono": "^5.0.18",
     "@iconify-icons/logos": "^1.2.36",

package/src/DID/index.tsx

@@ -6,6 +6,7 @@ import IconQrCode from '@iconify-icons/material-symbols/qr-code-rounded';
 import { Box, Dialog, DialogContent, ModalProps, Typography } from '@mui/material';
 import { useCreation, useMemoizedFn } from 'ahooks';
 import { forwardRef, useImperativeHandle, useRef, useState } from 'react';
+import { toAddress } from '@arcblock/did';
 
 import Address, { IDidAddressWrapper } from '../Address';
 import Avatar from '../Avatar';
@@ -136,7 +137,7 @@ export interface HTMLDIDElement extends HTMLDidAddressElement {
 
 export const DID = forwardRef<HTMLDIDElement, DIDProps>((props, ref) => {
   const {
-    did,
+    did: didAddress,
     chainId,
     roleType,
     showAvatar = true,
@@ -156,6 +157,7 @@ export const DID = forwardRef<HTMLDIDElement, DIDProps>((props, ref) => {
     className,
     sx,
   } = props;
+  const did = toAddress(didAddress);
 
   const rest = {
     size,

package/src/DIDConnect/did-connect-container.tsx

@@ -137,39 +137,41 @@ export default function DIDConnectContainer({
 
   const backgroundGlow = `linear-gradient(45deg, ${colorListGlow.join(', ')})`;
 
-  const glowStyle = {
-    overflow: 'visible',
-    '&::before, &::after': {
-      content: '""',
-      position: 'absolute',
-      top: '-3px',
-      right: '-3px',
-      bottom: '-3px',
-      left: '-3px',
-      background,
-      backgroundSize: '300% 300%',
-      backgroundRepeat: 'no-repeat',
-      animation: 'glowRotate 10s linear infinite',
-      borderRadius: '14px !important',
-      zIndex: 0,
-    },
-    '&::after': {
-      background: backgroundGlow,
-      filter: 'blur(15px)',
-    },
+  const glowStyle = open
+    ? {
+        overflow: 'visible',
+        '&::before, &::after': {
+          content: '""',
+          position: 'absolute',
+          top: '-3px',
+          right: '-3px',
+          bottom: '-3px',
+          left: '-3px',
+          background,
+          backgroundSize: '300% 300%',
+          backgroundRepeat: 'no-repeat',
+          animation: 'glowRotate 10s linear infinite',
+          borderRadius: '14px !important',
+          zIndex: 0,
+        },
+        '&::after': {
+          background: backgroundGlow,
+          filter: 'blur(15px)',
+        },
 
-    '@keyframes glowRotate': {
-      '0%': {
-        backgroundPosition: '0 0',
-      },
-      '50%': {
-        backgroundPosition: '100% 0',
-      },
-      '100%': {
-        backgroundPosition: '0 0',
-      },
-    },
-  };
+        '@keyframes glowRotate': {
+          '0%': {
+            backgroundPosition: '0 0',
+          },
+          '50%': {
+            backgroundPosition: '100% 0',
+          },
+          '100%': {
+            backgroundPosition: '0 0',
+          },
+        },
+      }
+    : {};
 
   if (openVariant === 'page') {
     return (
@@ -223,11 +225,11 @@ export default function DIDConnectContainer({
               borderBottomLeftRadius: 0,
               borderBottomRightRadius: 0,
               p: '2px',
-              animation: 'glowBreathe 7s linear infinite',
               '.did-connect__root': {
                 backgroundColor: 'transparent',
               },
               overflow: 'hidden',
+              animation: open ? 'glowBreathe 7s linear infinite' : 'none',
               '@keyframes glowBreathe': {
                 '0%, 100%': {
                   boxShadow: `

package/src/DIDConnect/did-connect-footer.tsx

@@ -1,6 +1,7 @@
 import { Box, SxProps } from '@mui/material';
 import { useCreation, useSize } from 'ahooks';
 import { useRef } from 'react';
+import useBrowser from '@arcblock/react-hooks/lib/useBrowser';
 
 import PoweredBy from './powered-by';
 import AppInfoItem from './app-info-item';
@@ -18,6 +19,7 @@ export default function DIDConnectFooter({
   currentAppColor?: string;
   sx?: SxProps;
 }) {
+  const browser = useBrowser();
   const rootRef = useRef<HTMLDivElement>(null);
   const size = useSize(rootRef);
   const isSmallView = useCreation(() => {
@@ -40,7 +42,8 @@ export default function DIDConnectFooter({
           backgroundColor: hexToRgba(currentAppColor, 0.08),
           // 需要保持跟 .did-connect__root 的规则一样
           mx: isSmallView ? -2 : -3,
-          px: isSmallView ? 2 : 3,
+          // eslint-disable-next-line no-nested-ternary
+          px: isSmallView ? (browser.arcSphere ? 1 : 2) : 3,
           py: 1.5,
           // HACK: 极限条件下，footer 会溢出，使用隐藏的滚动条来处理这种情况（屏幕宽度小于 360 时会出现）
           overflow: 'auto',