@arcblock/ux 2.13.12 → 2.13.14

package/src/Header/header.tsx

@@ -152,7 +152,7 @@ const Root = styled(Box)`
     }
     .header-brand-desc {
       margin-top: 4px;
-      color: #9397a1;
+      color: ${({ theme }) => theme.palette.text.hint};
     }
   }
   .header-brand-addon {

package/src/Header/responsive-header.tsx

@@ -102,6 +102,8 @@ function ResponsiveHeader({ menu, prepend, children, ...rest }: ResponsiveHeader
               top: 64,
               bottom: 0,
               boxShadow: 'none',
+              backgroundImage: 'none',
+              backgroundColor: theme.palette.background.paper,
             },
           }}>
           <MenuPanel>{_children}</MenuPanel>

package/src/Layout/dashboard/index.tsx

@@ -73,6 +73,7 @@ function Dashboard({
   fullWidth = false,
   dense = 'auto',
   footerProps = {},
+  sx,
   children,
   ...rest
 }: DashboardProps) {
@@ -98,7 +99,7 @@ function Dashboard({
   }, []);
 
   return (
-    <Wrapper {...rest} className={classes} sidebarWidth={sidebarWidth}>
+    <Wrapper sx={sx} {...rest} className={classes} sidebarWidth={sidebarWidth}>
       <Helmet title={title} key={title} />
 
       {headerVisible && (
@@ -164,7 +165,7 @@ function Dashboard({
           <Container className="dashboard-content" id="arc__dashboard-content" {...(fullWidth && { maxWidth: false })}>
             {children}
           </Container>
-          {footerVisible && <Footer {...footerProps} />}
+          {footerVisible && <Footer {...{ dark: theme.palette.mode === 'dark', ...footerProps }} />}
         </Box>
       </Box>
     </Wrapper>
@@ -180,6 +181,7 @@ const Wrapper = styled('div', {
     display: flex;
     flex-direction: column;
     height: 100vh;
+    background-color: ${({ theme }) => theme.palette.background.default};
   }
   .dashboard-body {
     overflow: hidden;
@@ -209,11 +211,13 @@ const Wrapper = styled('div', {
   }
   &.dashboard-dense {
     .dashboard-header {
-      border-bottom: 1px solid #eee;
+      border-bottom: 1px solid;
+      border-color: ${({ theme }) => theme.palette.divider};
     }
     .dashboard-sidebar {
       width: 256px;
-      border-right: 1px solid #eee;
+      border-right: 1px solid;
+      border-color: ${({ theme }) => theme.palette.divider};
     }
   }
   ${(props) => props.theme.breakpoints.up('md')} {

package/src/Layout/dashboard/sidebar.tsx

@@ -1,5 +1,4 @@
 import Typography from '@mui/material/Typography';
-import { teal } from '@mui/material/colors';
 import clsx from 'clsx';
 import { styled } from '../../Theme';
 import { NavLink } from './external-link';
@@ -87,7 +86,7 @@ const Root = styled('div')`
     &.layout-sidebar-link--active {
       color: ${(props) => props.theme.palette.primary.main};
       background: ${gradient};
-      border-left-color: ${teal.A700};
+      border-left-color: ${(props) => props.theme.palette.primary.main};
     }
   }
   .layout-sidebar-icon {

package/src/LoadingMask/index.tsx

@@ -1,7 +1,5 @@
 import { Box } from '@mui/material';
 
-import { temp as colors } from '../Colors';
-
 export interface LoadingMaskProps {
   size?: number;
   padding?: number;
@@ -49,7 +47,7 @@ export default function LoadingMask({
           height: finialSize,
           overflow: 'hidden',
           borderRadius: `${finialRadius}px`,
-          backgroundColor: colors.strokeBorderBase,
+          backgroundColor: 'grey.200',
           '&::before,&::after': {
             content: '""',
             position: 'absolute',
@@ -68,7 +66,8 @@ export default function LoadingMask({
             borderRadius: `${finialRadius - finialBorderWidth}px`,
           },
           '&::before': {
-            background: `conic-gradient(from 45deg, ${colors.foregroundsFgInteractiveTransparent} 0%, ${colors.foregroundsFgInteractiveTransparent} 50%, ${colors.foregroundsFgInteractive} 90%, ${colors.foregroundsFgInteractive} 100%)`,
+            background: ({ palette }) =>
+              `conic-gradient(from 45deg, transparent 0%, transparent 50%, ${palette.secondary.main} 90%, ${palette.secondary.main} 100%)`,
             transform: 'scale(100)',
             animation: `rotate ${finialDuration}s linear infinite`,
             '@keyframes rotate': {

package/src/Locale/selector.tsx

@@ -6,7 +6,6 @@ import CheckIcon from '@iconify-icons/material-symbols/check';
 import LanguageIcon from 'iconify-icons-material-symbols-400/language';
 import noop from 'lodash/noop';
 
-import { temp as colors } from '../Colors';
 import { LocaleContext } from './context';
 import { styled, useTheme } from '../Theme';
 import type { Locale } from '../type';
@@ -108,9 +107,9 @@ export default function LocaleSelector(props: LocaleSelectorProps) {
         <Box
           className="locales"
           sx={{
-            backgroundColor: 'background.default',
+            backgroundColor: 'background.paper',
             boxShadow: 2,
-            borderRadius: 2,
+            borderRadius: 1,
           }}>
           <ClickAwayListener onClickAway={onClose}>
             <MenuList>
@@ -138,7 +137,7 @@ export default function LocaleSelector(props: LocaleSelectorProps) {
                       icon={CheckIcon}
                       className={code === locale ? 'check-icon check-icon-visible' : 'check-icon'}
                       sx={{
-                        marginRight: 0.5,
+                        marginRight: 1,
                         visibility: code === locale ? 'visible' : 'hidden',
                       }}
                     />

package/src/Locale/util.ts

@@ -2,8 +2,13 @@ import get from 'lodash/get';
 import type { Locale, Translations } from '../type';
 
 /* eslint-disable no-prototype-builtins */
-export const replace = (template: string, data: Record<string, any>) =>
-  template.replace(/{(\w*)}/g, (m, key) => (data.hasOwnProperty(key) ? data[key] : ''));
+export const replace = (template: string | Function, data: Record<string, any>) => {
+  if (typeof template === 'function') {
+    return template(data);
+  }
+
+  return template.replace(/{(\w*)}/g, (m, key) => (data.hasOwnProperty(key) ? data[key] : ''));
+};
 
 export const translate = (
   translations: Translations,

package/src/LoginButton/index.tsx

@@ -0,0 +1,73 @@
+import { Box } from '@mui/material';
+import { joinURL } from 'ufo';
+import { useRef, useState } from 'react';
+import { useMemoizedFn } from 'ahooks';
+import { useBrowser } from '@arcblock/react-hooks';
+
+import SharedBridge from '../SharedBridge';
+import { setVisitorId } from '../Util';
+import { getFederatedEnabled, getMaster } from '../Util/federated';
+import { callIframe } from '../Util/iframe';
+import { Locale } from '../type';
+
+type LoginButtonProps = {
+  onClick: (options?: { openMode?: 'popup' | 'window' }) => void;
+  render: (options: { onClick: () => void }) => React.ReactNode;
+  locale?: Locale;
+};
+
+export default function LoginButton({ onClick, render, locale }: LoginButtonProps) {
+  const blocklet = window?.blocklet;
+  const federatedEnabled = getFederatedEnabled(blocklet);
+  const masterSite = getMaster(blocklet);
+  const sharedBridgeRef = useRef<HTMLIFrameElement>(null);
+  const [hasStorageAccess, setHasStorageAccess] = useState(false);
+  const browser = useBrowser();
+
+  const handleClick = useMemoizedFn(() => {
+    if (hasStorageAccess) {
+      onClick({ openMode: 'popup' });
+    } else {
+      onClick();
+    }
+  });
+  const handleLoad = useMemoizedFn(async () => {
+    const { value: visitorId } = await callIframe(sharedBridgeRef.current as HTMLIFrameElement, 'getVisitorId');
+    if (visitorId) {
+      setHasStorageAccess(true);
+      setVisitorId(visitorId);
+    }
+  });
+  const handleClickBridge = useMemoizedFn(({ value, visitorId }) => {
+    if (visitorId) {
+      setVisitorId(visitorId);
+    }
+    if (value) {
+      onClick({ openMode: 'popup' });
+    } else {
+      onClick();
+    }
+  });
+
+  if (browser.arcSphere || browser.wallet) {
+    return render({ onClick });
+  }
+
+  return (
+    <Box
+      sx={{
+        position: 'relative',
+      }}>
+      {render({ onClick: handleClick })}
+      {masterSite?.appUrl && federatedEnabled ? (
+        <SharedBridge
+          locale={locale}
+          iframeRef={sharedBridgeRef}
+          onLoad={handleLoad}
+          onClick={handleClickBridge}
+          src={joinURL(masterSite.appUrl, '/.well-known/service/share/shared-bridge.html')}
+        />
+      ) : null}
+    </Box>
+  );
+}

package/src/NavMenu/nav-menu.tsx

@@ -7,6 +7,7 @@ import { useCreation, useMemoizedFn, useReactive, useSize, useThrottleFn } from
 import { NavMenuProvider, useNavMenuContext } from './nav-menu-context';
 import { NavMenuRoot, NavMenuItem, NavMenuSub, NavMenuSubList, NavMenuStyled } from './style';
 import { SubContainer } from './sub-container';
+import { useTheme } from '../Theme';
 
 // 过滤 children 中的 Item/Sub, 忽略其它类型的 element
 function filterItems(children: React.ReactNode) {
@@ -57,12 +58,16 @@ function NavMenu({
   mode = 'horizontal',
   children: _childs = null,
   activeId = null,
-  textColor = '#9397a1',
-  activeTextColor = '#25292f',
-  bgColor = '#fff',
+  textColor,
+  activeTextColor,
+  bgColor,
   onSelected,
   ...rest
 }: NavMenuProps) {
+  const theme = useTheme();
+  const $textColor = useCreation(() => theme.palette.grey[400], [theme]);
+  const $activeTextColor = useCreation(() => theme.palette.text.primary, [theme]);
+  const $bgColor = useCreation(() => theme.palette.background.default, [theme]);
   // eslint-disable-next-line no-param-reassign
   const children = filterItems(_childs);
   if (!items?.length && !children?.length) {
@@ -89,9 +94,9 @@ function NavMenu({
     return {
       ...currentState,
       mode,
-      textColor,
-      activeTextColor,
-      bgColor,
+      textColor: $textColor,
+      activeTextColor: $activeTextColor,
+      bgColor: $bgColor,
       activate,
       open,
       close,
@@ -101,9 +106,9 @@ function NavMenu({
     currentState.hiddenItemCount,
     currentState.openedIds,
     mode,
-    textColor,
-    activeTextColor,
-    bgColor,
+    $textColor,
+    $activeTextColor,
+    $bgColor,
     activate,
     open,
     close,
@@ -259,7 +264,7 @@ function NavMenu({
 
   return (
     <NavMenuProvider value={contextValue}>
-      <NavMenuStyled {...rest} className={classes} $textColor={textColor} $bgColor={bgColor}>
+      <NavMenuStyled {...rest} className={classes} $textColor={$textColor} $bgColor={$bgColor}>
         <NavMenuRoot className={clsx('navmenu-root', `navmenu-root--${mode}`)} ref={navMenuRef}>
           {items ? items.map((item, index) => renderItem(item, index)) : renderChildrenWithRef(children || [])}
           {currentState.hiddenItemCount > 0 && (

package/src/NavMenu/products.tsx

@@ -162,7 +162,7 @@ const Wrapper = styled(Box)`
   width: 80vw;
   max-width: 900px;
   padding: 8px;
-  background: #f7f9fc;
+  background: ${({ theme }) => theme.palette.grey[100]};
   border-radius: 8px;
 
   &.is-inline {

package/src/NavMenu/style.ts

@@ -8,7 +8,7 @@ type NavMenuProps = {
 // .navmenu
 export const NavMenuStyled = styled('nav', {
   shouldForwardProp: (prop) => prop !== '$bgColor' && prop !== '$textColor',
-})<NavMenuProps>(({ $bgColor, $textColor }) => ({
+})<NavMenuProps>(({ $bgColor, $textColor, theme }) => ({
   position: 'relative',
   padding: '0 16px',
   minWidth: '50px',
@@ -17,6 +17,9 @@ export const NavMenuStyled = styled('nav', {
   backgroundColor: $bgColor,
   color: $textColor,
   fontSize: '16px',
+  '&.navmenu--inline': {
+    backgroundColor: theme.palette.background.paper,
+  },
 }));
 
 // .navmenu-root
@@ -241,7 +244,7 @@ export const NavMenuSubList = styled('ul')(({ theme }) => ({
   margin: 0,
   padding: '16px',
   borderRadius: '4px',
-  background: theme.palette.background.default,
+  backgroundColor: theme.palette.background.paper,
   '& .navmenu-item + .navmenu-item': {
     marginTop: '8px',
   },

package/src/NavMenu/sub-item-group.tsx

@@ -4,7 +4,7 @@ import { styled } from '../Theme';
 const Group = styled(Box)`
   padding: 16px 24px;
   border-radius: 8px;
-  background-color: ${({ theme }) => theme.palette.background.default};
+  background-color: ${({ theme }) => theme.palette.background.paper};
   cursor: auto;
 
   .group-label {

package/src/PhoneInput/country-select.tsx

@@ -4,7 +4,6 @@ import { FlagEmoji, defaultCountries, parseCountry } from 'react-international-p
 import type { CountryIso2 } from 'react-international-phone';
 import { ParsedCountry } from 'react-international-phone/build/types';
 import ArrowDownwardIcon from '@arcblock/icons/lib/ArrowDown';
-import { temp as colors } from '../Colors';
 import { mergeSx } from '../Util/style';
 
 export interface CountryDisplayOptions {
@@ -97,11 +96,11 @@ const CountrySelectInner = forwardRef(
             svg: { right: 4, top: 10 },
             '&:hover': {
               'fieldset.MuiOutlinedInput-notchedOutline': {
-                borderColor: colors.dividerColor,
+                borderColor: 'divider',
               },
             },
             'fieldset.MuiOutlinedInput-notchedOutline': {
-              borderColor: colors.dividerColor,
+              borderColor: 'divider',
             },
             '.MuiMenuItem-root': { justifyContent: 'flex-start' },
           },

package/src/SessionBlocklet/index.tsx

@@ -98,7 +98,7 @@ export default function SessionBlocklet({
               <Paper
                 variant="outlined"
                 sx={{
-                  borderRadius: 3,
+                  borderRadius: 1.5,
                   width: 350,
                   maxWidth: '90vw',
                   p: 2,
@@ -127,7 +127,7 @@ export default function SessionBlocklet({
                           gap: 1,
                           width: '100%',
                           height: '100%',
-                          borderRadius: 2,
+                          borderRadius: 1,
                           '&:hover': {
                             backgroundColor: 'action.hover',
                           },
@@ -137,7 +137,7 @@ export default function SessionBlocklet({
                             component="img"
                             src={`${BLOCKLET_SERVICE_PATH_PREFIX}/blocklet/logo-bundle/${item.component.did}`}
                             sx={{
-                              borderRadius: 2,
+                              borderRadius: 1,
                               width: 50,
                               height: 50,
                               objectFit: 'contain',

package/src/SessionUser/components/did-space.tsx

@@ -1,9 +1,8 @@
 import { useState } from 'react';
 import { useMemoizedFn } from 'ahooks';
-import { MenuItem, BoxProps, Divider } from '@mui/material';
+import { MenuItem, BoxProps, Divider, useTheme } from '@mui/material';
 import { Icon } from '@iconify/react';
 import LensIcon from '@iconify-icons/material-symbols/lens';
-import { temp as colors } from '../../Colors';
 import { Locale, Session } from '../../type';
 import { translate } from '../../Locale/util';
 import { translations } from '../libs/translation';
@@ -21,6 +20,7 @@ export default function DidSpace({ session, locale = 'en', ...rest }: DidSpacePr
   const t = useMemoizedFn((key, data = {}) => {
     return translate(translations, key, locale, 'en', data);
   });
+  const theme = useTheme();
 
   const didSpace = session.user?.didSpace ?? {};
   const [offset, setOffset] = useState(0);
@@ -36,20 +36,24 @@ export default function DidSpace({ session, locale = 'en', ...rest }: DidSpacePr
             display: 'flex',
             alignItems: 'center',
             gap: 0.5,
-            '&:hover': {
-              backgroundColor: `${colors.surfacePrimarySubtitle} !important`,
-            },
             py: 1,
           }}>
           <div style={{ display: 'flex', alignItems: 'center' }}>
-            <DIDSpaceIcon style={{ height: '24px', marginLeft: '-24px', marginRight: '-28px' }} />
+            <DIDSpaceIcon
+              style={{
+                height: '24px',
+                marginLeft: '-24px',
+                marginRight: '-28px',
+                fill: theme.palette.text.secondary,
+              }}
+            />
           </div>
-          <span style={{ color: colors.foregroundsFgSubtile }}>:</span>
+          <span style={{ color: theme.palette.text.secondary }}>:</span>
           <div
             style={{
               flexGrow: 1,
               minWidth: 0,
-              color: didSpace.did ? colors.foregroundsFgSubtile : colors.textMuted,
+              color: didSpace.did ? theme.palette.text.primary : theme.palette.text.secondary,
               overflow: 'hidden',
               whiteSpace: 'nowrap',
             }}>
@@ -61,11 +65,11 @@ export default function DidSpace({ session, locale = 'en', ...rest }: DidSpacePr
             style={{ marginTop: `${offset}px`, flexShrink: 0 }}
             icon={LensIcon}
             fontSize={8}
-            color={didSpace.did ? colors.surfaceSuccess : colors.gray6}
+            color={didSpace.did ? theme.palette.success.main : theme.palette.grey[200]}
           />
         </MenuItem>
       </TBox>
-      <Divider sx={{ m: '0!important', borderColor: colors.strokeSep }} />
+      <Divider />
     </>
   );
 }

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

@@ -173,7 +173,7 @@ export default function LoggedIn({
               <Paper
                 variant="outlined"
                 sx={{
-                  borderRadius: 3,
+                  borderRadius: 1.5,
                   width: 350,
                   maxWidth: '90vw',
                   border: '0 !important',
@@ -257,7 +257,7 @@ function SessionMenuItem<C extends ElementType>({
           display: 'flex',
           gap: 1,
           alignItems: 'center',
-          borderRadius: 2,
+          borderRadius: 1,
           '&:hover': {
             backgroundColor: 'action.hover',
           },

package/src/SessionUser/components/quick-login-item.tsx

@@ -1,10 +1,8 @@
-import PropTypes from 'prop-types';
 import DID from '@arcblock/ux/lib/DID';
 import RelativeTime from '@arcblock/ux/lib/RelativeTime';
 import WalletOSIcon from '@arcblock/ux/lib/WalletOSIcon';
-import { Box, Chip, Typography, useMediaQuery } from '@mui/material';
+import { Box, Chip, Typography, useMediaQuery, useTheme } from '@mui/material';
 import type { Theme } from '@mui/material';
-import { temp as colors } from '@arcblock/ux/lib/Colors';
 import noop from 'lodash/noop';
 
 import Avatar from '../../Avatar';
@@ -33,24 +31,25 @@ export default function QuickLoginItem({
     updatedAt: string;
   };
 }) {
+  const { palette } = useTheme();
   const isMobile = useMediaQuery((theme: Theme) => theme.breakpoints.down('md'));
   const isRawWalletAccount = getSourceProvider(userSession?.user) === 'wallet';
 
   return (
     <Box
       sx={{
-        borderRadius: 2,
+        borderRadius: 1,
         p: 2,
         transition: 'background-color 0.5s',
         '&:hover, &:active': {
-          backgroundColor: colors.backgroundsBgSubtileHover,
+          backgroundColor: 'grey.100',
         },
         display: 'flex',
         justifyContent: 'space-between',
         alignItems: 'center',
         cursor: 'pointer',
         '&:hover': {
-          backgroundColor: colors.surfacePrimarySubtitle,
+          backgroundColor: 'grey.200',
         },
         width: '100%',
         backgroundColor: 'white',
@@ -74,7 +73,7 @@ export default function QuickLoginItem({
               display: 'flex',
               alignItems: 'center',
               gap: 1,
-              color: colors.textBase,
+              color: 'text.primary',
             }}>
             {userSession.user.fullName}
             <Chip
@@ -85,8 +84,8 @@ export default function QuickLoginItem({
                 height: 'auto',
                 fontWeight: 'bold',
                 fontSize: '12px',
-                borderColor: colors.lineBorderStrong,
-                color: colors.textSubtitle,
+                borderColor: 'grey.300',
+                color: 'text.secondary',
               })}
             />
           </Typography>
@@ -100,7 +99,7 @@ export default function QuickLoginItem({
               <WalletOSIcon
                 provider={userSession?.extra?.provider}
                 walletOS={userSession?.extra?.walletOS}
-                color={colors.textSubtitle}
+                color={palette.text.secondary}
               />
               <DID
                 // @ts-ignore
@@ -119,12 +118,12 @@ export default function QuickLoginItem({
               />
             </Box>
           ) : (
-            <Typography sx={{ fontSize: '12px', color: colors.textSubtitle }}>{userSession.user.email}</Typography>
+            <Typography sx={{ fontSize: '12px', color: 'text.secondary' }}>{userSession.user.email}</Typography>
           )}
         </Box>
       </Box>
       {userSession.updatedAt && !isMobile && (
-        <Box component="span" sx={{ color: colors.textMuted, fontSize: '12px', flexShrink: 0 }}>
+        <Box component="span" sx={{ color: 'text.hint', fontSize: '12px', flexShrink: 0 }}>
           {/* @ts-ignore */}
           <RelativeTime value={userSession.updatedAt} locale={locale} />
         </Box>

package/src/SessionUser/components/session-user-item.tsx

@@ -1,12 +1,11 @@
 import { forwardRef } from 'react';
-import { Box, type BoxProps, IconButton, Tooltip, Typography } from '@mui/material';
+import { Box, type BoxProps, IconButton, Tooltip, Typography, useTheme } from '@mui/material';
 import { Icon } from '@iconify/react';
 import LensIcon from '@iconify-icons/material-symbols/lens';
 
 import WalletOSIcon from '../../WalletOSIcon';
 import Avatar from '../../Avatar';
 import DID from '../../DID';
-import { temp as colors } from '../../Colors';
 import { getSourceProvider } from '../libs/utils';
 import { Session } from '../../type';
 
@@ -18,6 +17,7 @@ export interface SessionUserItemProps extends BoxProps {
 
 const SessionUserItem = forwardRef<HTMLDivElement, SessionUserItemProps>(
   ({ sessionItem, statusContent = null, active = false, ...rest }, ref) => {
+    const { palette } = useTheme();
     const isRawWalletAccount = getSourceProvider(sessionItem?.user) === 'wallet';
 
     return (
@@ -42,9 +42,6 @@ const SessionUserItem = forwardRef<HTMLDivElement, SessionUserItemProps>(
             '& .did-address-avatar': {
               display: 'none !important',
             },
-            '& .did-address-text': {
-              color: `${colors.textBase} !important`,
-            },
           }}>
           <Box sx={{ mr: 0.5, fontSize: 0 }}>
             <Avatar did={sessionItem.userDid} size={36} />
@@ -86,7 +83,7 @@ const SessionUserItem = forwardRef<HTMLDivElement, SessionUserItemProps>(
         {statusContent ||
           (active && (
             <IconButton size="small" disableRipple>
-              <Icon icon={LensIcon} fontSize={6} color={colors.surfaceSuccess} />
+              <Icon icon={LensIcon} fontSize={6} color={palette.success.main} />
             </IconButton>
           ))}
       </Box>