@arcblock/ux 2.8.26 → 2.9.0

package/es/Address/did-address.js

@@ -1,11 +1,11 @@
 import React, { useRef, useState, forwardRef } from 'react';
 import PropTypes from 'prop-types';
 import '@fontsource/ubuntu-mono/400.css';
-import Tooltip from '@mui/material/Tooltip';
 import { green } from '@mui/material/colors';
+import { Tooltip, Box } from '@mui/material';
 import copy from 'copy-to-clipboard';
-import CopyIcon from '@mui/icons-material/ContentCopy';
-import CheckIcon from '@mui/icons-material/Check';
+import { ContentCopy as CopyIcon, Check as CheckIcon } from '@mui/icons-material';
+import noop from 'lodash/noop';
 import { styled } from '../Theme';
 import { getFontSize } from '../Util';
 import CompactText from './compact-text';
@@ -96,21 +96,35 @@ const DidAddress = /*#__PURE__*/forwardRef(({
     size: size,
     ...rest,
     ref: ref,
-    children: [prepend, /*#__PURE__*/_jsx("span", {
-      ref: textRef,
-      className: "did-address-text did-address-truncate",
-      style: {
-        display: compact ? 'none' : 'inline'
-      },
-      children: children
-    }), compact && /*#__PURE__*/_jsx("span", {
-      className: "did-address-text",
-      children: /*#__PURE__*/_jsx(CompactText, {
-        startChars: startChars,
-        endChars: endChars,
-        showCopyButtonInTooltip: showCopyButtonInTooltip,
+    children: [prepend, /*#__PURE__*/_jsxs(Tooltip, {
+      title: copyable ? '' : translations[locale].copied,
+      placement: "bottom",
+      arrow: true,
+      open: copied,
+      children: [/*#__PURE__*/_jsx(Box, {
+        ref: textRef,
+        component: "span",
+        className: "did-address-text did-address-truncate",
+        sx: {
+          display: compact ? 'none' : 'inline',
+          cursor: copyable ? 'text' : 'pointer'
+        },
+        onDoubleClick: copyable ? noop : onCopy,
         children: children
-      })
+      }), compact && /*#__PURE__*/_jsx(Box, {
+        component: "span",
+        className: "did-address-text",
+        sx: {
+          cursor: copyable ? 'text' : 'pointer'
+        },
+        onDoubleClick: copyable ? noop : onCopy,
+        children: /*#__PURE__*/_jsx(CompactText, {
+          startChars: startChars,
+          endChars: endChars,
+          showCopyButtonInTooltip: showCopyButtonInTooltip,
+          children: children
+        })
+      })]
     }), copyElement, append]
   });
 });
@@ -147,7 +161,7 @@ DidAddress.defaultProps = {
   endChars: 6,
   locale: 'en'
 };
-const Root = styled('div', {
+const Root = styled(Box, {
   shouldForwardProp: prop => prop !== 'inline'
 })`
   font-family: 'Ubuntu Mono', monospace;
@@ -177,9 +191,6 @@ const Root = styled('div', {
     text-overflow: ellipsis;
   }
 
-  .did-address-copy {
-    flex: 0 0 auto;
-  }
   .did-address-copy-wrapper {
     display: flex;
     justify-content: center;
@@ -189,6 +200,7 @@ const Root = styled('div', {
     margin-left: 8px;
   }
   .did-address-copy {
+    flex: 0 0 auto;
     font-size: 1em;
     color: #999;
     cursor: pointer;

package/es/AnimationWaiter/index.js

@@ -1,6 +1,7 @@
 import { useState, useEffect, useRef } from 'react';
 import PropTypes from 'prop-types';
 import Lottie from 'react-lottie-player';
+import noop from 'lodash/noop';
 import lottieJson from './default-animation.json';
 import { styled } from '../Theme';
 
@@ -70,7 +71,7 @@ export default function AnimationWaiter({
   // tips
   useEffect(() => {
     if (!tips.length) {
-      return () => {};
+      return noop;
     }
     const timer = setTimeout(() => {
       let nextId = tipsId + 1;

package/es/Avatar/index.js

@@ -127,7 +127,7 @@ Avatar.defaultProps = {
   shape: '',
   responsive: false
 };
-const BlockyIconContainer = styled('div')`
+const BlockyIconContainer = styled(Box)`
   display: flex;
   align-items: center;
   width: ${props => props.$size}px;

package/es/BlockletContext/index.js

@@ -36,7 +36,7 @@ function BlockletProvider({
       setBlockletData(data);
     } catch {
       // NOTICE: 如果获取指定 blockletData 失败，则使用 window.blocklet
-      const data = window.blocklet || window.env;
+      const data = globalThis.blocklet || globalThis.env;
       setBlockletData(data);
     }
     // eslint-disable-next-line react-hooks/exhaustive-deps

package/es/CardSelector/index.js

@@ -1,6 +1,7 @@
 import { useState, useEffect, useRef } from 'react';
 import styled from '@emotion/styled';
 import PropTypes from 'prop-types';
+import noop from 'lodash/noop';
 import { jsx as _jsx } from "react/jsx-runtime";
 export default function CardSelector({
   list,
@@ -143,6 +144,6 @@ CardSelector.defaultProps = {
   width: 300,
   height: 400,
   cardSpace: 40,
-  onSelect: () => {},
+  onSelect: noop,
   defaultIndex: 0
 };

package/es/Colors/index.js

@@ -1,2 +1,3 @@
 // eslint-disable-next-line no-restricted-exports
-export { default } from './themes/default';
+export { default } from './themes/default';
+export { default as temp } from './themes/temp';

package/es/Colors/themes/temp.js

@@ -0,0 +1,17 @@
+const colors = {
+  lineStep: 'rgba(18, 22, 24, 0.06)',
+  lineBorderStrong: 'rgba(18, 22, 24, 0.12)',
+  lineBorderBase: 'rgba(18, 22, 24, 0.06)',
+  borderBase: 'rgba(18, 22, 24, 0.06)',
+  textMuted: 'rgba(18, 22, 24, 0.36)',
+  textSubtitle: 'rgba(18, 22, 24, 0.6)',
+  textBase: 'rgba(18, 22, 24, 1)',
+  textPrimaryBase: 'rgba(18, 22, 24, 1)',
+  surfaceBgSubtitle: 'rgba(18, 22, 24, 0.03)',
+  surfacePrimarySubtitle: 'rgba(19, 125, 250, 0.06)',
+  surfaceSuccess: 'rgba(13, 202, 134, 1)',
+  primaryBase: 'rgba(19, 125, 250, 1)',
+  primary100: 'rgba(19, 125, 250, 1)',
+  gray6: 'rgba(17, 22, 24, 0.06)'
+};
+export default colors;

package/es/Datatable/TableSearch.js

@@ -6,6 +6,7 @@ import SearchIcon from '@mui/icons-material/Search';
 import TextField from '@mui/material/TextField';
 import ClearIcon from '@mui/icons-material/Clear';
 import clsx from 'clsx';
+import noop from 'lodash/noop';
 import { useDatatableContext } from './DatatableContext';
 import { styled } from '../Theme';
 import { jsx as _jsx } from "react/jsx-runtime";
@@ -110,7 +111,7 @@ TableSearch.propTypes = {
 TableSearch.defaultProps = {
   search: '',
   searchText: '',
-  onSearchOpen: () => {}
+  onSearchOpen: noop
 };
 const Container = styled('div')`
   display: flex;

package/es/Img/index.js

@@ -1,9 +1,10 @@
 import { useEffect, useMemo, useState } from 'react';
 import PropTypes from 'prop-types';
 import { useInView } from 'react-intersection-observer';
-import AlertIcon from '@iconify-icons/mdi/alert';
-import ImageIcon from '@iconify-icons/mdi/image';
+import WarningRoundedIcon from '@iconify-icons/material-symbols/warning-rounded';
+import ImageRoundedIcon from '@iconify-icons/material-symbols/image-rounded';
 import { Icon } from '@iconify/react';
+import noop from 'lodash/noop';
 import { styled } from '../Theme';
 
 /**
@@ -162,14 +163,14 @@ function Img({
           className: "image--state",
           title: "loading image",
           children: /*#__PURE__*/_jsx(Icon, {
-            icon: AlertIcon,
+            icon: WarningRoundedIcon,
             className: "image--icon"
           })
         }), !placeholder && imgState === 'loading' && /*#__PURE__*/_jsx("div", {
           className: "image--state",
           title: "Image load error",
           children: /*#__PURE__*/_jsx(Icon, {
-            icon: ImageIcon,
+            icon: ImageRoundedIcon,
             className: "image--icon"
           })
         }), imgState === 'loaded' && /*#__PURE__*/_jsx("img", {
@@ -211,7 +212,7 @@ Img.defaultProps = {
   placeholder: null,
   fallback: null,
   className: '',
-  onError: () => {},
-  onSuccess: () => {}
+  onError: noop,
+  onSuccess: noop
 };
 export default Img;

package/es/Locale/selector.js

@@ -2,9 +2,12 @@
 import { useState, useContext, useRef, useMemo } from 'react';
 import PropTypes from 'prop-types';
 import { Button, Typography, IconButton, Popper, MenuItem, MenuList, Box, ClickAwayListener } from '@mui/material';
-import CheckIcon from '@mui/icons-material/Check';
-import GlobeIcon from '@arcblock/icons/lib/Globe';
+import { Icon as IconifyIcon } from '@iconify/react';
+import LanguageIcon from '@iconify-icons/material-symbols/language';
+import CheckIcon from '@iconify-icons/material-symbols/check';
+import noop from 'lodash/noop';
 import { getColor, getBackground } from '../Util';
+import { temp as colors } from '../Colors';
 import { LocaleContext } from './context';
 import { styled, useTheme } from '../Theme';
 import { jsx as _jsx } from "react/jsx-runtime";
@@ -57,12 +60,10 @@ export default function LocaleSelector(props) {
     if (Icon) {
       return /*#__PURE__*/_jsx(Icon, {});
     }
-    return /*#__PURE__*/_jsx(GlobeIcon, {
-      style: {
-        width: 'auto',
-        height: size,
-        color: theme.palette.text.secondary
-      }
+    return /*#__PURE__*/_jsx(IconifyIcon, {
+      icon: LanguageIcon,
+      fontSize: size,
+      color: theme.palette.text.secondary
     });
   }, [Icon, theme?.palette?.text?.secondary, size]);
   return /*#__PURE__*/_jsxs(Div, {
@@ -101,9 +102,9 @@ export default function LocaleSelector(props) {
             }) => /*#__PURE__*/_jsxs(MenuItem, {
               className: "locale-item",
               onClick: () => onSelect(code, name),
-              children: [/*#__PURE__*/_jsx(CheckIcon, {
-                className: code === locale ? 'check-icon check-icon-visible' : 'check-icon',
-                fontSize: "small"
+              children: [/*#__PURE__*/_jsx(IconifyIcon, {
+                icon: CheckIcon,
+                className: code === locale ? 'check-icon check-icon-visible' : 'check-icon'
               }), name]
             }, code))
           })
@@ -124,7 +125,7 @@ LocaleSelector.defaultProps = {
   showText: true,
   size: 24,
   popperProps: {},
-  onChange: () => {},
+  onChange: noop,
   popperType: 'click',
   icon: null
 };
@@ -149,7 +150,8 @@ const Div = styled('div', {
 
   .locales {
     background: ${props => getBackground(props)};
-    box-shadow: 0 0 8px rgba(0, 0, 0, 0.2);
+    box-shadow: 0px 8px 16px 0px ${colors.gray6}, 0px 0px 0px 1px ${colors.gray6};
+    border-radius: 8px;
   }
 
   .locale-item {

package/es/NFTDisplay/index.js

@@ -8,6 +8,7 @@ import pako from 'pako';
 import base64 from 'base64-url';
 import isSvg from 'is-svg';
 import { ReactSVG } from 'react-svg';
+import noop from 'lodash/noop';
 import AspectRatioContainer from './aspect-ratio-container';
 import ImgSvgEmbedder from './svg-embedder/img';
 import InlineSvgEmbedder from './svg-embedder/inline-svg';
@@ -266,7 +267,7 @@ NFTDisplay.defaultProps = {
   preferredSvgEmbedder: 'img',
   checkSvg: false,
   minimumLoadingTime: 0,
-  onCompleted: () => {}
+  onCompleted: noop
 };
 const Root = styled('div')`
   display: flex;

package/es/QRCode/index.js

@@ -1,6 +1,7 @@
 import { useRef, useEffect, useMemo, useState } from 'react';
 import PropTypes from 'prop-types';
 import QRCodeStyling from '@solana/qr-code-styling';
+import { Box } from '@mui/material';
 import { jsx as _jsx } from "react/jsx-runtime";
 const defaults = {
   margin: 0,
@@ -52,7 +53,7 @@ function QRCode({
     qrCode.update(options);
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [data, size, image, config]);
-  return /*#__PURE__*/_jsx("div", {
+  return /*#__PURE__*/_jsx(Box, {
     ref: ref,
     ...rest
   });

package/es/SessionBlocklet/index.js

@@ -0,0 +1,169 @@
+import { useRef } from 'react';
+import PropTypes from 'prop-types';
+import { Box, ClickAwayListener, Fade, IconButton, List, ListItem, ListItemButton, Paper, Popper, Typography } from '@mui/material';
+import { Icon } from '@iconify/react';
+import DashboardOutlineRoundedIcon from '@iconify-icons/material-symbols/dashboard-outline-rounded';
+import WidgetsOutlineRoundedIcon from '@iconify-icons/material-symbols/widgets-outline-rounded';
+import { useMemoizedFn, useReactive } from 'ahooks';
+import Button from '../Button';
+import { temp as colors } from '../Colors';
+import { AUTH_SERVICE_PREFIX, NAVIGATION_URL } from '../Util/constant';
+import SessionPermission from '../SessionPermission';
+import { jsx as _jsx } from "react/jsx-runtime";
+import { jsxs as _jsxs } from "react/jsx-runtime";
+import { Fragment as _Fragment } from "react/jsx-runtime";
+export default function SessionBlocklet({
+  session,
+  locale,
+  size
+}) {
+  const blocklet = window?.blocklet || {};
+  const sessionMenuList = (blocklet.navigation || []
+  // HACK 过滤掉默认插入的 /sessionManager 菜单
+  ).filter(item => item.section === 'sessionManager' && !['/sessionManager'].includes(item.id)).filter(item => {
+    if ((item?.role || []).includes(session?.user?.role || 'guest')) {
+      return true;
+    }
+    return false;
+  }).map(item => {
+    const component = (blocklet?.componentMountPoints || []).find(x => item.component === x.name);
+    return {
+      ...item,
+      component
+    };
+  });
+  const popperAnchorRef = useRef(null);
+  const currentState = useReactive({
+    open: false
+  });
+  const onTogglePopper = useMemoizedFn((value = !currentState.open) => {
+    currentState.open = value;
+  });
+  if (sessionMenuList.length === 0) {
+    return null;
+  }
+  return /*#__PURE__*/_jsxs(_Fragment, {
+    children: [/*#__PURE__*/_jsx(IconButton, {
+      size: "medium",
+      ref: popperAnchorRef,
+      onClick: () => onTogglePopper(),
+      children: /*#__PURE__*/_jsx(Icon, {
+        icon: DashboardOutlineRoundedIcon,
+        fontSize: size
+      })
+    }), /*#__PURE__*/_jsx(Popper, {
+      open: currentState.open,
+      onClose: () => onTogglePopper(false),
+      anchorEl: popperAnchorRef.current,
+      transition: true,
+      placement: "bottom-end",
+      sx: {
+        zIndex: 1600
+      },
+      children: ({
+        TransitionProps
+      }) => /*#__PURE__*/_jsx(ClickAwayListener, {
+        onClickAway: e => {
+          e.preventDefault();
+          e.stopPropagation();
+          onTogglePopper(false);
+        },
+        children: /*#__PURE__*/_jsx(Fade, {
+          ...TransitionProps,
+          timeout: 350,
+          children: /*#__PURE__*/_jsxs(Paper, {
+            variant: "outlined",
+            sx: {
+              borderRadius: 3,
+              width: 350,
+              maxWidth: '90vw',
+              borderColor: colors.lineStep,
+              p: 2,
+              border: '0 !important',
+              boxShadow: `0px 8px 16px 0px ${colors.gray6}, 0px 0px 0px 1px ${colors.gray6}`
+            },
+            children: [/*#__PURE__*/_jsx(List, {
+              sx: {
+                display: 'grid',
+                gridTemplateColumns: 'repeat(auto-fill, 100px)',
+                gridAutoRows: 'minmax(100px, max-content)',
+                justifyContent: 'space-between',
+                maxHeight: 350,
+                overflowY: 'auto',
+                p: 0
+              },
+              children: sessionMenuList.map(item => /*#__PURE__*/_jsx(ListItem, {
+                disablePadding: true,
+                children: /*#__PURE__*/_jsxs(ListItemButton, {
+                  href: item.link,
+                  sx: {
+                    p: 1,
+                    display: 'flex',
+                    flexDirection: 'column',
+                    alignItems: 'center',
+                    gap: 1,
+                    width: '100%',
+                    height: '100%',
+                    borderRadius: 2,
+                    '&:hover': {
+                      backgroundColor: colors.surfacePrimarySubtitle
+                    }
+                  },
+                  children: [item?.component?.did ? /*#__PURE__*/_jsx(Box, {
+                    component: "img",
+                    src: `${AUTH_SERVICE_PREFIX}/blocklet/logo-bundle/${item.component.did}`,
+                    sx: {
+                      borderRadius: 2,
+                      width: 50,
+                      height: 50,
+                      objectFit: 'contain'
+                    }
+                  }) : /*#__PURE__*/_jsx(Icon, {
+                    fontSize: 50,
+                    icon: item.icon || WidgetsOutlineRoundedIcon,
+                    color: colors.textSubtitle
+                  }), /*#__PURE__*/_jsx(Typography, {
+                    sx: {
+                      fontSize: '12px',
+                      color: colors.textBase,
+                      textAlign: 'center',
+                      lineHeight: 'normal'
+                    },
+                    children: item.title?.zh || item.title
+                  })]
+                })
+              }, item.id))
+            }), /*#__PURE__*/_jsx(SessionPermission, {
+              session: session,
+              children: /*#__PURE__*/_jsx(Button, {
+                variant: "outlined",
+                fullWidth: true,
+                href: NAVIGATION_URL,
+                sx: {
+                  mt: 1,
+                  borderRadius: 2,
+                  color: colors.textBase,
+                  borderColor: colors.lineBorderStrong,
+                  '&:hover': {
+                    color: colors.primaryBase,
+                    borderColor: colors.primaryBase
+                  }
+                },
+                children: locale === 'zh' ? '管理' : 'Manage'
+              })
+            })]
+          })
+        })
+      })
+    })]
+  });
+}
+SessionBlocklet.propTypes = {
+  session: PropTypes.object.isRequired,
+  locale: PropTypes.string,
+  size: PropTypes.number
+};
+SessionBlocklet.defaultProps = {
+  locale: 'en',
+  size: 24
+};