@arcblock/ux 2.10.67 → 2.10.69

package/src/Screenshot/BaseScreenshot/{index.jsx → index.tsx}

@@ -1,4 +1,4 @@
-import PropTypes from 'prop-types';
+import { type SxProps } from '@mui/material';
 
 import phone from './shells/Phone';
 import macbook from './shells/Macbook';
@@ -9,10 +9,16 @@ const map = {
   macbook,
 };
 
-function Screenshot({ width, children, type, sx, ...rest }) {
+export interface ScreenshotProps extends React.ComponentProps<'div'> {
+  width?: number;
+  type?: string;
+  sx?: SxProps;
+}
+
+function Screenshot({ width = 0, children, type = 'phone', ...rest }: ScreenshotProps) {
   const _type = type.toLowerCase();
 
-  const { Shell, ratio, screenData, width: defaultWidth } = map[_type || 'phone'];
+  const { Shell, ratio, screenData, width: defaultWidth } = map[(_type as keyof typeof map) || 'phone'];
 
   const Root = styled('div')`
     position: relative;
@@ -64,16 +70,4 @@ function Screenshot({ width, children, type, sx, ...rest }) {
   );
 }
 
-Screenshot.propTypes = {
-  width: PropTypes.number,
-  type: PropTypes.string,
-  children: PropTypes.node.isRequired,
-  sx: PropTypes.object,
-};
-Screenshot.defaultProps = {
-  width: 0,
-  type: 'phone',
-  sx: {},
-};
-
 export default Screenshot;

package/src/Screenshot/BaseScreenshot/shells/{Macbook.jsx → Macbook.tsx}

@@ -1,4 +1,6 @@
-export function Shell({ ...rest }) {
+export interface ShellProps extends React.ComponentProps<'svg'> {}
+
+export function Shell({ ...rest }: ShellProps) {
   return (
     <svg width="909" height="517" viewBox="0 0 909 517" fill="none" xmlns="http://www.w3.org/2000/svg" {...rest}>
       <path d="M48 16C48 7.16343 55.1634 0 64 0H845C853.837 0 861 7.16344 861 16V490H48V16Z" fill="black" />

package/src/Screenshot/BaseScreenshot/shells/{Phone.jsx → Phone.tsx}

@@ -1,7 +1,9 @@
 export const width = 268;
 export const height = 554;
 
-export function Shell({ ...rest }) {
+export interface ShellProps extends React.ComponentProps<'svg'> {}
+
+export function Shell({ ...rest }: ShellProps) {
   return (
     <svg width="268" height="554" viewBox="0 0 268 554" fill="none" xmlns="http://www.w3.org/2000/svg" {...rest}>
       <path

package/src/Screenshot/{index.jsx → index.tsx}

@@ -1,5 +1,5 @@
 import { createElement, Children, cloneElement, useEffect, useRef, useState } from 'react';
-import PropTypes from 'prop-types';
+import { type SxProps } from '@mui/material';
 
 import { mergeProps } from '../Util';
 import { styled } from '../Theme';
@@ -7,6 +7,13 @@ import BaseScreenshot from './BaseScreenshot';
 
 import './devices.css';
 
+type DeviceStyles = {
+  borderRadius: number;
+  width: number;
+  scale: number;
+  zIndex?: number;
+};
+
 const types = {
   'iphone-x': {
     borderRadius: 32,
@@ -80,26 +87,26 @@ const childProps = {
   video: ['alt', 'title', 'muted', 'autoplay', 'loop', 'key', 'children'],
 };
 
-const createChild = (child) => [
+const createChild = (child: React.ReactElement) => [
   createElement(
     child.type,
-    childProps[child.type].reduce((acc, x) => {
+    childProps[child.type as keyof typeof childProps].reduce((acc: Record<string, any>, x: string) => {
       acc[x] = child.props[x];
       return acc;
     }, {})
   ),
 ];
 
-const findChildren = (children, returnArgWhenNotFound = true) => {
+const findChildren = (children: React.ReactElement[], returnArgWhenNotFound = true): React.ReactElement[] | null => {
   for (let i = 0; i < children.length; i++) {
     const child = children[i];
 
-    if (['img', 'video'].includes(child.type)) {
+    if (['img', 'video'].includes(child.type as string)) {
       return createChild(child);
     }
 
     if (child.props && child.props.children) {
-      const subChildren = Children.toArray(child.props.children);
+      const subChildren = Children.toArray(child.props.children) as React.ReactElement[];
       const result = findChildren(subChildren, false);
       if (result) {
         return result;
@@ -114,18 +121,27 @@ const findChildren = (children, returnArgWhenNotFound = true) => {
   return null;
 };
 
+export interface OldScreenshotProps extends React.ComponentProps<'div'> {
+  type?: keyof typeof types;
+  className?: string;
+  style?: React.CSSProperties;
+  width?: number;
+  height?: number;
+  sx?: SxProps;
+}
+
 // This component is built upon the awesome device.css lib
 // By default it will find and only render img/video tags in the children
 // If neither of them are found, the whole child tree is rendered
-function OldScreenshot(props) {
-  const newProps = mergeProps(props, OldScreenshot, ['style', 'width', 'height']);
+function OldScreenshot(props: OldScreenshotProps) {
+  const newProps = mergeProps(props, OldScreenshot, ['style', 'width', 'height']) as OldScreenshotProps;
   const { type, children, style, className, width, height, ...rest } = newProps;
-  const { zIndex = 0, borderRadius = 0 } = types[type] || {};
+  const { zIndex = 0, borderRadius = 0 } = (types[type!] || {}) as DeviceStyles;
 
   return (
     <Div
       {...rest}
-      type={type}
+      type={type!}
       className={`device device-${type} ${className}`.trim()}
       style={style}
       contentRadius={borderRadius}
@@ -133,7 +149,9 @@ function OldScreenshot(props) {
       <div className="device-frame">
         <div className="device-content">
           {/* eslint-disable-next-line react/no-array-index-key */}
-          {findChildren(Children.toArray(children)).map((item, index) => cloneElement(item, { key: index }))}
+          {findChildren(Children.toArray(children) as React.ReactElement[])?.map((item: any, index: number) =>
+            cloneElement(item, { key: index })
+          )}
         </div>
       </div>
       <div className="device-stripe" />
@@ -145,7 +163,21 @@ function OldScreenshot(props) {
   );
 }
 
-const Div = styled('div')`
+OldScreenshot.defaultProps = {
+  type: 'iphone-x' as const,
+  className: '',
+  style: {},
+  width: 0,
+  height: 0,
+};
+
+type DivProps = {
+  type: keyof typeof types;
+  contentRadius: number;
+  contentZIndex: number;
+};
+
+const Div = styled('div')<DivProps>`
   @media (max-width: ${(props) => types[props.type].width}px) {
     transform-origin: 0 0;
     transform: scale(${(props) => types[props.type].scale});
@@ -165,41 +197,26 @@ const Div = styled('div')`
   }
 `;
 
-OldScreenshot.propTypes = {
-  type: PropTypes.oneOf(Object.keys(types)),
-  children: PropTypes.any.isRequired,
-  className: PropTypes.string,
-  width: PropTypes.number,
-  height: PropTypes.number,
-  style: PropTypes.oneOfType([PropTypes.object, PropTypes.string]),
-};
-
-OldScreenshot.defaultProps = {
-  type: 'iphone-x',
-  className: '',
-  style: '{}',
-  width: 0,
-  height: 0,
-};
+export interface ScreenFixerProps extends OldScreenshotProps {}
 
 /**
  * 用于修正旧版 Screenshot 无法匹配尺寸的问题
  * @param {*} props params to OldScreenshot
  * @returns <OldScreenshot />
  */
-function ScreenFixer(props) {
-  const screenEl = useRef(null);
-  const [height, setHeight] = useState(undefined);
-  const [scale, setScale] = useState(null);
+function ScreenFixer(props: ScreenFixerProps) {
+  const screenEl = useRef<HTMLDivElement>(null);
+  const [height, setHeight] = useState<number>();
+  const [scale, setScale] = useState<number | null>(null);
 
   useEffect(() => {
-    let resizeObs;
+    let resizeObs: ResizeObserver | null = null;
 
     const fixSize = () => {
-      const { clientWidth } = screenEl.current;
+      const { clientWidth } = screenEl.current!;
 
       // 获取内部元素的宽高
-      const { clientWidth: targetWidth, clientHeight: targetHeight } = screenEl.current.children[0];
+      const { clientWidth: targetWidth, clientHeight: targetHeight } = screenEl.current!.children[0];
 
       const realScale = clientWidth / targetWidth;
       if (realScale < 1) {
@@ -238,13 +255,18 @@ const ReScreen = styled('div')`
   }
 `;
 
-function Screenshot({ type, src, children, style, sx, ...rest }) {
+export interface ScreenShotProps extends ScreenFixerProps {
+  type: keyof typeof types;
+  src?: string;
+}
+
+function Screenshot({ type, src = '', children, sx = {}, ...rest }: ScreenShotProps) {
   const _type = type.toLowerCase();
 
   // 新版采用容器采用BaseScreenshot，svg集成，更容易拓展，响应式更好
   if (['phone', 'macbook'].includes(_type)) {
     return (
-      <BaseScreenshot type={_type} sx={{ ...sx, ...style }} {...rest}>
+      <BaseScreenshot type={_type} sx={sx} {...rest}>
         {children || (src ? <img src={src} alt="screenshot" /> : null)}
       </BaseScreenshot>
     );
@@ -252,25 +274,9 @@ function Screenshot({ type, src, children, style, sx, ...rest }) {
 
   // 旧版采用纯css制作，定制性欠缺，暂时保留使用
   return (
-    <ScreenFixer type={type} {...rest} sx={{ ...sx, ...style, margin: 'auto' }}>
+    <ScreenFixer type={type} sx={{ ...sx, margin: 'auto' }} {...rest}>
       {children || (src ? <img src={src} alt="screenshot" /> : null)}
     </ScreenFixer>
   );
 }
-
-Screenshot.propTypes = {
-  type: PropTypes.string.isRequired,
-  src: PropTypes.string,
-  style: PropTypes.object,
-  sx: PropTypes.object,
-  children: PropTypes.any,
-};
-
-Screenshot.defaultProps = {
-  src: '',
-  children: null,
-  style: {},
-  sx: {},
-};
-
 export default Screenshot;

package/src/SessionBlocklet/{index.jsx → index.tsx}

@@ -1,5 +1,4 @@
 import { useRef } from 'react';
-import PropTypes from 'prop-types';
 import {
   Box,
   ClickAwayListener,
@@ -22,8 +21,15 @@ import { temp as colors } from '../Colors';
 import { AUTH_SERVICE_PREFIX, NAVIGATION_URL } from '../Util/constant';
 import SessionPermission from '../SessionPermission';
 import { getTranslation } from '../Util';
+import type { Locale } from '../type';
 
-export default function SessionBlocklet({ session, locale, size }) {
+export interface SessionBlockletProps {
+  session: Record<string, any>;
+  locale?: Locale;
+  size?: number;
+}
+
+export default function SessionBlocklet({ session, locale = 'zh', size = 24 }: SessionBlockletProps) {
   const blocklet = window?.blocklet || {};
   const sessionMenuList = (blocklet.navigation || [])
     // HACK 过滤掉默认插入的 /sessionManager 菜单
@@ -60,7 +66,6 @@ export default function SessionBlocklet({ session, locale, size }) {
       </IconButton>
       <Popper
         open={currentState.open}
-        onClose={() => onTogglePopper(false)}
         anchorEl={popperAnchorRef.current}
         transition
         placement="bottom-end"
@@ -121,6 +126,7 @@ export default function SessionBlocklet({ session, locale, size }) {
                               height: 50,
                               objectFit: 'contain',
                             }}
+                            alt="SessionBlocklet component icon"
                           />
                         ) : (
                           <Icon
@@ -169,14 +175,3 @@ export default function SessionBlocklet({ session, locale, size }) {
     </>
   );
 }
-
-SessionBlocklet.propTypes = {
-  session: PropTypes.object.isRequired,
-  locale: PropTypes.string,
-  size: PropTypes.number,
-};
-
-SessionBlocklet.defaultProps = {
-  locale: 'en',
-  size: 24,
-};

package/src/SessionPermission/index.tsx

@@ -0,0 +1,25 @@
+import { useCreation } from 'ahooks';
+
+const roleList = ['owner', 'admin', 'member', 'guest'] as const;
+
+export interface SessionPermissionProps {
+  session: Record<string, any>;
+  roles?: (typeof roleList)[number][];
+  children: ((props: { hasPermission: boolean }) => JSX.Element | null) | JSX.Element;
+}
+
+export default function SessionPermission({ session, roles = ['owner', 'admin'], children }: SessionPermissionProps) {
+  const hasPermission = useCreation(() => {
+    return roles.includes(session?.user?.role || 'guest');
+  }, [session?.user?.role, roles]);
+
+  if (typeof children === 'function') {
+    return children({ hasPermission });
+  }
+
+  if (hasPermission) {
+    return children;
+  }
+
+  return null;
+}

package/src/SessionUser/components/{logged-in.jsx → logged-in.tsx}

@@ -1,8 +1,18 @@
-import PropTypes from 'prop-types';
-import { useRef } from 'react';
+import { ElementType, useRef } from 'react';
 import { useCreation, useMemoizedFn, useReactive } from 'ahooks';
-import { Box, ClickAwayListener, Divider, Fade, IconButton, MenuItem, MenuList, Paper, Popper } from '@mui/material';
-import { Icon } from '@iconify/react';
+import {
+  Box,
+  type BoxProps,
+  ClickAwayListener,
+  Divider,
+  Fade,
+  IconButton,
+  MenuItem,
+  MenuList,
+  Paper,
+  Popper,
+} from '@mui/material';
+import { Icon, type IconifyIcon } from '@iconify/react';
 import PersonOutlineRoundedIcon from '@iconify-icons/material-symbols/person-outline-rounded';
 import FilterVintageOutlineRoundedIcon from '@iconify-icons/material-symbols/filter-vintage-outline-rounded';
 import AccountCircleOffOutlineRoundedIcon from '@iconify-icons/material-symbols/account-circle-off-outline-rounded';
@@ -19,20 +29,37 @@ import { DASHBOARD_URL, PROFILE_URL } from '../../Util/constant';
 import SessionPermission from '../../SessionPermission';
 import { translations } from '../libs/translation';
 import { translate } from '../../Locale/util';
+import type { Locale, Session } from '../../type';
 
-const getInviteLink = (inviter) => {
+const getInviteLink = (inviter: string) => {
   const url = new URL(window.location.href);
   url.searchParams.set('inviter', inviter);
   return url.toString();
 };
 
-export default function LoggedIn({ session, dark, onBindWallet, isBlocklet, locale, size }) {
+export interface LoggedInProps {
+  session: Session;
+  dark?: false | true;
+  onBindWallet?: () => void;
+  isBlocklet?: true | false;
+  locale?: Locale;
+  size?: number;
+}
+
+export default function LoggedIn({
+  session,
+  dark = false,
+  onBindWallet = noop,
+  isBlocklet = true,
+  locale = 'en',
+  size = 24,
+}: LoggedInProps) {
   const t = useMemoizedFn((key, data = {}) => {
     return translate(translations, key, locale, 'en', data);
   });
   const isInviteEnabled = useCreation(() => {
     return !!globalThis?.blocklet?.settings?.invite?.enabled;
-  });
+  }, []);
   const popperAnchorRef = useRef(null);
   const currentState = useReactive({
     open: false,
@@ -47,8 +74,8 @@ export default function LoggedIn({ session, dark, onBindWallet, isBlocklet, loca
     session.switchPassport();
   });
   const handleSwitchAccount = useMemoizedFn(({ userSession } = {}) => {
-    return new Promise((resolve) => {
-      const options = {};
+    return new Promise<void>((resolve) => {
+      const options: Record<string, any> = {};
       if (!userSession) {
         onTogglePopper(false);
         options.showQuickConnect = false;
@@ -99,8 +126,8 @@ export default function LoggedIn({ session, dark, onBindWallet, isBlocklet, loca
 
       <Popper
         open={currentState.open}
-        onClose={() => onTogglePopper(false)}
         anchorEl={popperAnchorRef.current}
+        // @ts-expect-error
         dark={dark}
         transition
         placement="bottom-end"
@@ -156,6 +183,7 @@ export default function LoggedIn({ session, dark, onBindWallet, isBlocklet, loca
                         <SessionMenuItem
                           icon={InviteIcon}
                           title={t('invite')}
+                          component="div"
                           onClick={handleOpenInvite}
                           sx={{ display: 'block', color: 'inherit' }}
                         />
@@ -166,6 +194,7 @@ export default function LoggedIn({ session, dark, onBindWallet, isBlocklet, loca
                   <SessionMenuItem
                     icon={AccountCircleOffOutlineRoundedIcon}
                     title={t('logout')}
+                    component="div"
                     sx={{ color: 'error.main' }}
                     onClick={onLogout}
                     data-cy="sessionManager-logout-trigger"
@@ -180,23 +209,17 @@ export default function LoggedIn({ session, dark, onBindWallet, isBlocklet, loca
   );
 }
 
-LoggedIn.propTypes = {
-  session: PropTypes.object.isRequired,
-  onBindWallet: PropTypes.func,
-  dark: PropTypes.bool,
-  isBlocklet: PropTypes.bool,
-  locale: PropTypes.string,
-  size: PropTypes.number,
-};
-LoggedIn.defaultProps = {
-  dark: false,
-  isBlocklet: true,
-  onBindWallet: noop,
-  locale: 'en',
-  size: 24,
-};
+interface SessionMenuItemProps {
+  icon: IconifyIcon | string;
+  title: string;
+}
 
-function SessionMenuItem({ icon, title, ...rest }) {
+// prop component is required
+function SessionMenuItem<C extends ElementType>({
+  icon,
+  title,
+  ...rest
+}: SessionMenuItemProps & BoxProps<C, { component: C }>) {
   return (
     <Box {...rest} sx={{ p: 0.5, ...rest?.sx }}>
       <MenuItem
@@ -216,8 +239,3 @@ function SessionMenuItem({ icon, title, ...rest }) {
     </Box>
   );
 }
-
-SessionMenuItem.propTypes = {
-  icon: PropTypes.any.isRequired,
-  title: PropTypes.string.isRequired,
-};

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

@@ -0,0 +1,97 @@
+import { forwardRef } from 'react';
+import { Box, type BoxProps, IconButton, Tooltip, Typography } 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';
+
+export interface SessionUserItemProps extends BoxProps {
+  sessionItem: Session;
+  statusContent?: React.ReactNode;
+  active?: false | true;
+}
+
+const SessionUserItem = forwardRef<HTMLDivElement, SessionUserItemProps>(
+  ({ sessionItem, statusContent = null, active = false, ...rest }, ref) => {
+    const isRawWalletAccount = getSourceProvider(sessionItem?.user) === 'wallet';
+
+    return (
+      <Box
+        {...rest}
+        ref={ref}
+        sx={{
+          display: 'flex',
+          alignItems: 'center',
+          justifyContent: 'space-between',
+          py: 0.75,
+          px: 1,
+          width: '100%',
+          ...rest?.sx,
+        }}>
+        <Box
+          sx={{
+            display: 'flex',
+            alignItems: 'center',
+            gap: 0.5,
+            overflow: 'hidden',
+            '& .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} />
+          </Box>
+          <WalletOSIcon
+            loading={sessionItem.__isDefault}
+            provider={sessionItem?.extra?.provider}
+            walletOS={sessionItem?.extra?.walletOS}
+          />
+          {isRawWalletAccount ? (
+            <DID
+              did={sessionItem.userDid}
+              copyable={false}
+              size={14}
+              responsive={false}
+              compact
+              sx={{ lineHeight: 1 }}
+            />
+          ) : (
+            sessionItem.user.email && (
+              <Tooltip
+                title={sessionItem.user.email}
+                sx={{
+                  zIndex: 1600,
+                }}
+                placement="top">
+                <Typography
+                  sx={{
+                    fontSize: 14,
+                    overflow: 'hidden',
+                    textOverflow: 'ellipsis',
+                  }}>
+                  {sessionItem.user.email}
+                </Typography>
+              </Tooltip>
+            )
+          )}
+        </Box>
+        {statusContent ||
+          (active && (
+            <IconButton size="small" disableRipple>
+              <Icon icon={LensIcon} fontSize={6} color={colors.surfaceSuccess} />
+            </IconButton>
+          ))}
+      </Box>
+    );
+  }
+);
+
+export default SessionUserItem;

package/src/SessionUser/components/{session-user-switch.jsx → session-user-switch.tsx}

@@ -1,4 +1,3 @@
-import PropTypes from 'prop-types';
 import {
   Box,
   ClickAwayListener,
@@ -23,8 +22,21 @@ import { temp as colors } from '../../Colors';
 import { getVisitorId } from '../../Util';
 import { translate } from '../../Locale/util';
 import { translations } from '../libs/translation';
+import type { Locale, Session } from '../../type';
 
-export default function SessionUserSwitch({ session, onSwitch, isBlocklet, locale }) {
+export interface SessionUserSwitchProps {
+  session: Session;
+  onSwitch: (params?: { userSession: Session }) => Promise<void> | void;
+  isBlocklet?: true | false;
+  locale?: Locale;
+}
+
+export default function SessionUserSwitch({
+  session,
+  onSwitch,
+  isBlocklet = true,
+  locale = 'en',
+}: SessionUserSwitchProps) {
   const popperAnchorRef = useRef(null);
   const t = useMemoizedFn((key, data = {}) => {
     return translate(translations, key, locale, 'en', data);
@@ -32,7 +44,7 @@ export default function SessionUserSwitch({ session, onSwitch, isBlocklet, local
 
   const currentState = useReactive({
     open: false,
-    userSessions: [],
+    userSessions: [] as Session[],
     loadingSessionId: null,
   });
 
@@ -136,12 +148,7 @@ export default function SessionUserSwitch({ session, onSwitch, isBlocklet, local
         onClick={() => onTogglePopper()}
         ref={popperAnchorRef}
       />
-      <Popper
-        open={currentState.open}
-        onClose={() => onTogglePopper(false)}
-        anchorEl={popperAnchorRef.current}
-        transition
-        sx={{ zIndex: 1600 }}>
+      <Popper open={currentState.open} anchorEl={popperAnchorRef.current} transition sx={{ zIndex: 1600 }}>
         {({ TransitionProps }) => (
           <ClickAwayListener
             onClickAway={(e) => {
@@ -223,15 +230,3 @@ export default function SessionUserSwitch({ session, onSwitch, isBlocklet, local
     </>
   );
 }
-
-SessionUserSwitch.propTypes = {
-  session: PropTypes.object.isRequired,
-  onSwitch: PropTypes.func.isRequired,
-  isBlocklet: PropTypes.bool,
-  locale: PropTypes.string,
-};
-
-SessionUserSwitch.defaultProps = {
-  isBlocklet: true,
-  locale: 'en',
-};