@arcblock/ux 2.13.63 → 2.13.65

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';
@@ -100,7 +101,10 @@ function useDIDInfo({
       marginRight: 4
     },
     blockiesPadding: false,
-    className: "did-address-avatar"
+    className: "did-address-avatar",
+    sx: {
+      flexShrink: 0
+    }
   }, `${keyPrefix}-avatar-${avatarSize}`)]);
   return {
     isEthDid,
@@ -111,7 +115,7 @@ function useDIDInfo({
 }
 export const DID = /*#__PURE__*/forwardRef((props, ref) => {
   const {
-    did,
+    did: didAddress,
     chainId,
     roleType,
     showAvatar = true,
@@ -131,6 +135,7 @@ export const DID = /*#__PURE__*/forwardRef((props, ref) => {
     className,
     sx
   } = props;
+  const did = toAddress(didAddress);
   const rest = {
     size,
     component,

package/lib/Locale/selector.js

@@ -1,7 +1,7 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 /* eslint-disable react/jsx-no-bind */
 import React, { useState, useContext, useRef, useMemo } from 'react';
-import { Button, Typography, IconButton, Popper, MenuItem, MenuList, Box, ClickAwayListener } from '@mui/material';
+import { Button, Typography, IconButton, Popper, MenuItem, MenuList, Box, ClickAwayListener, Paper } from '@mui/material';
 import { Icon as IconifyIcon } from '@iconify/react';
 import CheckIcon from '@iconify-icons/material-symbols/check';
 import LanguageIcon from 'iconify-icons-material-symbols-400/language';
@@ -95,11 +95,10 @@ export default function LocaleSelector(props) {
       },
       // @ts-ignore
       popperProps?.sx),
-      children: /*#__PURE__*/_jsx(Box, {
+      children: /*#__PURE__*/_jsx(Paper, {
+        variant: "outlined",
         className: "locales",
         sx: {
-          backgroundColor: 'background.paper',
-          boxShadow: 2,
           borderRadius: 1
         },
         children: /*#__PURE__*/_jsx(ClickAwayListener, {

package/lib/SessionBlocklet/index.js

@@ -93,9 +93,7 @@ export default function SessionBlocklet({
               borderRadius: 1.5,
               width: 350,
               maxWidth: '90vw',
-              p: 2,
-              border: '0 !important',
-              boxShadow: 2
+              p: 2
             },
             children: [/*#__PURE__*/_jsx(List, {
               sx: {

package/lib/SessionUser/components/logged-in.js

@@ -182,10 +182,7 @@ export default function LoggedIn({
       transition: true,
       placement: "bottom-end",
       sx: {
-        zIndex: 1600,
-        '> div': {
-          boxShadow: theme => theme.palette.mode === 'dark' ? `${theme.shadows[2]}, inset 0 0 0 1px rgba(255, 255, 255, 0.05)` : theme.shadows[2]
-        }
+        zIndex: 1600
       },
       children: ({
         TransitionProps
@@ -203,9 +200,7 @@ export default function LoggedIn({
             sx: {
               borderRadius: 1.5,
               width: 350,
-              maxWidth: '90vw',
-              border: '0 !important',
-              boxShadow: 2
+              maxWidth: '90vw'
             },
             children: [/*#__PURE__*/_jsx(UserInfo, {
               locale: locale,

package/lib/Theme/theme.js

@@ -4,7 +4,7 @@
 import { createTheme as _createTheme, responsiveFontSizes } from '@mui/material/styles';
 import { deepmerge } from '@mui/utils';
 import webfontloader from 'webfontloader';
-import { BLOCKLET_THEME_LIGHT, BLOCKLET_THEME_DARK, DEFAULT_FONTS, getDefaultThemePrefer } from '@blocklet/theme';
+import { BLOCKLET_THEME_LIGHT, BLOCKLET_THEME_DARK, DEFAULT_FONTS, getDefaultThemePrefer, getBlockletThemeOptions } from '@blocklet/theme';
 import { cleanedObj, deepmergeAll } from '../Util';
 
 // 默认只加载最基本的 roboto latin 字体
@@ -82,7 +82,7 @@ export function lazyCreateDefaultTheme(mode) {
   let theme = null;
   return () => {
     if (theme) return theme;
-    const options = deepmerge(createDefaultThemeOptions(mode), window.blocklet?.theme?.[mode] ?? {});
+    const options = deepmerge(createDefaultThemeOptions(mode), getBlockletThemeOptions(mode));
     theme = _createTheme(options);
     return theme;
   };
@@ -138,7 +138,7 @@ export const create = (...args) => {
   const createBaseTheme = lazyCreateDefaultTheme(defaultPrefer);
   const userThemeOptions = args.reduce((acc, curr) => deepmerge(acc, normalizeUserThemeOptions(typeof curr === 'function' ? curr(createBaseTheme()) : curr)), normalizeUserThemeOptions(defaultUxThemeOptions));
   const prefer = userThemeOptions.mode || userThemeOptions.palette?.mode || defaultPrefer;
-  const blockletThemeOptions = window.blocklet?.theme?.[prefer] ?? {};
+  const blockletThemeOptions = getBlockletThemeOptions(prefer);
   const defaultThemeOptions = createDefaultThemeOptions(prefer);
   const {
     disableBlockletTheme

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@arcblock/ux",
-  "version": "2.13.63",
+  "version": "2.13.65",
   "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": "3ba664fa67f707517df7ba1958bc13870c253ac0",
+  "gitHead": "2b6e52f793163511cdf6aabf5b1382f8aa68e5f8",
   "dependencies": {
     "@arcblock/did-motif": "^1.1.13",
-    "@arcblock/icons": "^2.13.63",
-    "@arcblock/nft-display": "^2.13.63",
-    "@arcblock/react-hooks": "^2.13.63",
+    "@arcblock/icons": "^2.13.65",
+    "@arcblock/nft-display": "^2.13.65",
+    "@arcblock/react-hooks": "^2.13.65",
     "@babel/plugin-syntax-dynamic-import": "^7.8.3",
-    "@blocklet/theme": "^2.13.63",
+    "@blocklet/theme": "^2.13.65",
     "@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';
@@ -107,6 +108,7 @@ function useDIDInfo({ did, showAvatar }: { did: string; showAvatar?: boolean })
         style={{ display: 'inline-flex', alignItems: 'center', marginLeft: 2, marginRight: 4 }}
         blockiesPadding={false}
         className="did-address-avatar"
+        sx={{ flexShrink: 0 }}
       />
     ),
   ]);
@@ -136,7 +138,7 @@ export interface HTMLDIDElement extends HTMLDidAddressElement {
 
 export const DID = forwardRef<HTMLDIDElement, DIDProps>((props, ref) => {
   const {
-    did,
+    did: didAddress,
     chainId,
     roleType,
     showAvatar = true,
@@ -156,6 +158,7 @@ export const DID = forwardRef<HTMLDIDElement, DIDProps>((props, ref) => {
     className,
     sx,
   } = props;
+  const did = toAddress(didAddress);
 
   const rest = {
     size,

package/src/Locale/selector.tsx

@@ -1,6 +1,16 @@
 /* eslint-disable react/jsx-no-bind */
 import React, { useState, useContext, useRef, useMemo } from 'react';
-import { Button, Typography, IconButton, Popper, MenuItem, MenuList, Box, ClickAwayListener } from '@mui/material';
+import {
+  Button,
+  Typography,
+  IconButton,
+  Popper,
+  MenuItem,
+  MenuList,
+  Box,
+  ClickAwayListener,
+  Paper,
+} from '@mui/material';
 import { Icon as IconifyIcon } from '@iconify/react';
 import CheckIcon from '@iconify-icons/material-symbols/check';
 import LanguageIcon from 'iconify-icons-material-symbols-400/language';
@@ -104,11 +114,10 @@ export default function LocaleSelector(props: LocaleSelectorProps) {
           // @ts-ignore
           popperProps?.sx
         )}>
-        <Box
+        <Paper
+          variant="outlined"
           className="locales"
           sx={{
-            backgroundColor: 'background.paper',
-            boxShadow: 2,
             borderRadius: 1,
           }}>
           <ClickAwayListener onClickAway={onClose}>
@@ -147,7 +156,7 @@ export default function LocaleSelector(props: LocaleSelectorProps) {
               })}
             </MenuList>
           </ClickAwayListener>
-        </Box>
+        </Paper>
       </Popper>
     </Wrapper>
   );

package/src/SessionBlocklet/index.tsx

@@ -102,8 +102,6 @@ export default function SessionBlocklet({
                   width: 350,
                   maxWidth: '90vw',
                   p: 2,
-                  border: '0 !important',
-                  boxShadow: 2,
                 }}>
                 <List
                   sx={{

package/src/SessionUser/components/logged-in.tsx

@@ -201,12 +201,6 @@ export default function LoggedIn({
         placement="bottom-end"
         sx={{
           zIndex: 1600,
-          '> div': {
-            boxShadow: (theme) =>
-              theme.palette.mode === 'dark'
-                ? `${theme.shadows[2]}, inset 0 0 0 1px rgba(255, 255, 255, 0.05)`
-                : theme.shadows[2],
-          },
         }}>
         {({ TransitionProps }) => (
           <ClickAwayListener
@@ -222,8 +216,6 @@ export default function LoggedIn({
                   borderRadius: 1.5,
                   width: 350,
                   maxWidth: '90vw',
-                  border: '0 !important',
-                  boxShadow: 2,
                 }}>
                 <UserInfo
                   locale={locale}

package/src/Theme/theme.ts

@@ -4,7 +4,13 @@ import type { PaletteMode, Theme } from '@mui/material';
 import { createTheme as _createTheme, responsiveFontSizes, type ThemeOptions } from '@mui/material/styles';
 import { deepmerge } from '@mui/utils';
 import webfontloader from 'webfontloader';
-import { BLOCKLET_THEME_LIGHT, BLOCKLET_THEME_DARK, DEFAULT_FONTS, getDefaultThemePrefer } from '@blocklet/theme';
+import {
+  BLOCKLET_THEME_LIGHT,
+  BLOCKLET_THEME_DARK,
+  DEFAULT_FONTS,
+  getDefaultThemePrefer,
+  getBlockletThemeOptions,
+} from '@blocklet/theme';
 import { cleanedObj, deepmergeAll } from '../Util';
 
 // 默认只加载最基本的 roboto latin 字体
@@ -99,7 +105,7 @@ export function lazyCreateDefaultTheme(mode: PaletteMode) {
   return () => {
     if (theme) return theme;
 
-    const options = deepmerge(createDefaultThemeOptions(mode), window.blocklet?.theme?.[mode] ?? {});
+    const options = deepmerge(createDefaultThemeOptions(mode), getBlockletThemeOptions(mode));
 
     theme = _createTheme(options);
     return theme;
@@ -157,7 +163,7 @@ export const create = (...args: Array<UxThemeOptions | ((baseTheme: Theme) => Ux
     normalizeUserThemeOptions(defaultUxThemeOptions)
   );
   const prefer = userThemeOptions.mode || userThemeOptions.palette?.mode || defaultPrefer;
-  const blockletThemeOptions = window.blocklet?.theme?.[prefer] ?? {};
+  const blockletThemeOptions = getBlockletThemeOptions(prefer);
   const defaultThemeOptions = createDefaultThemeOptions(prefer);
   const { disableBlockletTheme } = userThemeOptions;