@arcblock/ux 2.10.66 → 2.10.68

package/src/SessionUser/components/{un-login.jsx → un-login.tsx}

@@ -1,4 +1,3 @@
-import PropTypes from 'prop-types';
 import { Box, CircularProgress, IconButton } from '@mui/material';
 import { Icon } from '@iconify/react';
 import PersonOutlineRoundedIcon from 'iconify-icons-material-symbols-400/person-outline-rounded';
@@ -6,7 +5,16 @@ import { useRef } from 'react';
 import { useMemoizedFn } from 'ahooks';
 import noop from 'lodash/noop';
 
-export default function UnLogin({ session, onLogin, size, dark }) {
+import { Session } from '../../type';
+
+export interface UnLoginProps {
+  session: Session;
+  onLogin?: () => void;
+  size?: number;
+  dark?: false | true;
+}
+
+export default function UnLogin({ session, onLogin = noop, size = 24, dark = false }: UnLoginProps) {
   const isFirstLoading = false;
   const userAnchorRef = useRef(null);
   const _onLogin = useMemoizedFn(() => {
@@ -40,16 +48,3 @@ export default function UnLogin({ session, onLogin, size, dark }) {
     </Box>
   );
 }
-
-UnLogin.propTypes = {
-  session: PropTypes.object.isRequired,
-  onLogin: PropTypes.func,
-  size: PropTypes.number,
-  dark: PropTypes.bool,
-};
-
-UnLogin.defaultProps = {
-  onLogin: noop,
-  size: 24,
-  dark: false,
-};

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

@@ -1,4 +1,3 @@
-import PropTypes from 'prop-types';
 import { Box, Chip, Typography } from '@mui/material';
 import { Icon } from '@iconify/react';
 import SwapHorizRoundedIcon from '@iconify-icons/material-symbols/swap-horiz-rounded';
@@ -13,22 +12,33 @@ import { temp as colors } from '../../Colors';
 import { getWallet } from '../libs/utils';
 import { translations } from '../libs/translation';
 import { translate } from '../../Locale/util';
+import type { $TSFixMe, Locale, Session } from '../../type';
+
+export interface UserInfoProps {
+  session: Session;
+  onSwitchPassport: () => void;
+  onSwitchAccount: (params?: { userSession: Session }) => void;
+  onBindWallet: () => void;
+  onSwitchProfile?: () => void;
+  locale?: Locale;
+  isBlocklet?: true | false;
+}
 
 export default function UserInfo({
   session,
   onSwitchPassport,
   onSwitchAccount,
   onBindWallet,
-  onSwitchProfile,
-  locale,
-  isBlocklet,
-}) {
+  onSwitchProfile = noop,
+  locale = 'en',
+  isBlocklet = true,
+}: UserInfoProps) {
   const t = useMemoizedFn((key, data = {}) => {
     return translate(translations, key, locale, 'en', data);
   });
   const avatar = getUserAvatar(session.user?.avatar?.replace(/\s/g, encodeURIComponent(' ')), 64);
   const currentRole = useCreation(
-    () => session.user?.passports?.find((item) => item.name === session.user.role),
+    () => session.user?.passports?.find((item: $TSFixMe) => item.name === session.user.role),
     [session?.user?.passports, session?.user?.role]
   );
 
@@ -152,19 +162,3 @@ export default function UserInfo({
     </Box>
   );
 }
-
-UserInfo.propTypes = {
-  session: PropTypes.object.isRequired,
-  onSwitchPassport: PropTypes.func.isRequired,
-  onSwitchAccount: PropTypes.func.isRequired,
-  onBindWallet: PropTypes.func.isRequired,
-  onSwitchProfile: PropTypes.func,
-  locale: PropTypes.string,
-  isBlocklet: PropTypes.bool,
-};
-
-UserInfo.defaultProps = {
-  locale: 'en',
-  isBlocklet: true,
-  onSwitchProfile: noop,
-};

package/src/SessionUser/index.tsx

@@ -0,0 +1,26 @@
+import noop from 'lodash/noop';
+import { useCreation } from 'ahooks';
+
+import LoggedIn from './components/logged-in';
+import UnLogin from './components/un-login';
+import type { Locale, Session } from '../type';
+
+export interface SessionUserProps {
+  session: Session;
+  onBindWallet?: () => void;
+  locale?: Locale;
+  size?: number;
+}
+
+export default function SessionUser({ session, onBindWallet = noop, locale = 'en', size = 24 }: SessionUserProps) {
+  const isBlocklet = useCreation(() => {
+    return !!globalThis?.blocklet;
+  }, []);
+
+  if (session.user) {
+    return (
+      <LoggedIn isBlocklet={isBlocklet} session={session} onBindWallet={onBindWallet} locale={locale} size={size} />
+    );
+  }
+  return <UnLogin session={session} size={size} />;
+}

package/src/SessionUser/libs/{translation.js → translation.ts}

@@ -1,5 +1,7 @@
 /* eslint-disable import/prefer-default-export */
-export const translations = {
+import type { Translations } from '../../type';
+
+export const translations: Translations = {
   en: {
     connectDIDWallet: 'Connect your DID Wallet for enhanced security',
     switch: 'Switch',

package/src/SessionUser/libs/utils.ts

@@ -0,0 +1,39 @@
+import { $TSFixMe, User } from '../../type';
+
+export const getSourceAppPid = (user: User) => user?.sourceAppPid;
+
+export const getCurrentAppPid = (user: User) => user?.sourceAppPid || window?.blocklet?.appPid;
+
+export function getPermanentDid(user: User) {
+  return user?.did;
+}
+
+export function getConnectedAccounts(user: User) {
+  return user?.connectedAccounts || user?.extraConfigs?.connectedAccounts || [];
+}
+
+export function getSourceProvider(user: User) {
+  return user?.sourceProvider || user?.extraConfigs?.sourceProvider || 'wallet';
+}
+
+export function getSourceProviders(user: User) {
+  const connectedAccounts = getConnectedAccounts(user);
+  return connectedAccounts.map((item: $TSFixMe) => item.provider);
+}
+
+export function getConnectedDids(user: User) {
+  const connectedAccounts = getConnectedAccounts(user);
+  const didList = connectedAccounts.map((item: $TSFixMe) => item.did);
+  return didList;
+}
+
+export function getWallet(user: User) {
+  const connectedAccounts = getConnectedAccounts(user);
+  const walletAccount = connectedAccounts.find((item: $TSFixMe) => item.provider === 'wallet');
+  return walletAccount;
+}
+
+export function getWalletDid(user: User) {
+  const walletAccount = getWallet(user);
+  return walletAccount?.did;
+}

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

@@ -1,21 +1,20 @@
-/* eslint-disable guard-for-in */
-/* eslint-disable no-restricted-syntax */
 // origin: https://github.com/fnando/sparkline
-function getY(max, height, diff, value) {
+function getY(max: number, height: number, diff: number, value: number) {
   return parseFloat((height - (value * height) / max + diff).toFixed(2));
 }
 
-function removeChildren(svg) {
+function removeChildren(svg: SVGElement) {
   [...svg.querySelectorAll('*')].forEach((element) => svg.removeChild(element));
 }
 
-function defaultFetch(entry) {
+function defaultFetch(entry: { value: number }) {
   return entry.value;
 }
 
-function buildElement(tag, attrs) {
+function buildElement(tag: string, attrs: Record<string, any>) {
   const element = document.createElementNS('http://www.w3.org/2000/svg', tag);
 
+  // eslint-disable-next-line no-restricted-syntax, guard-for-in
   for (const name in attrs) {
     element.setAttribute(name, attrs[name]);
   }
@@ -23,21 +22,33 @@ function buildElement(tag, attrs) {
   return element;
 }
 
-export default function sparkline(svg, entries, options) {
+export interface SparklineProps {
+  svg: SVGElement;
+  entries?: number[] | { value: number }[];
+  options?: {
+    fetch?: (entry: { value: number }) => number;
+    interactive?: boolean;
+    onmousemove?: (event: MouseEvent, currentDataPoint: { value: number; index: number; x: number; y: number }) => void;
+    onmouseout?: (event: MouseEvent) => void;
+    spotRadius?: number;
+    cursorWidth?: number;
+  };
+}
+
+export default function sparkline({ svg, entries: _entries = [], options = {} }: SparklineProps) {
   removeChildren(svg);
 
-  if (entries.length <= 1) {
+  if (_entries.length <= 1) {
     return;
   }
 
-  // eslint-disable-next-line no-param-reassign
-  options = options || {};
-
-  if (typeof entries[0] === 'number') {
-    // eslint-disable-next-line no-param-reassign
-    entries = entries.map((entry) => {
+  let entries: { value: number }[] = [];
+  if (typeof _entries[0] === 'number') {
+    entries = (_entries as number[]).map((entry) => {
       return { value: entry };
     });
+  } else {
+    entries = _entries as typeof entries;
   }
 
   // This function will be called whenever the mouse moves
@@ -62,6 +73,7 @@ export default function sparkline(svg, entries, options) {
 
   // Get the stroke width; this is used to compute the
   // rendering offset.
+  // @ts-expect-error
   const strokeWidth = parseFloat(svg.attributes['stroke-width'].value);
 
   // By default, data must be formatted as an array of numbers or
@@ -74,10 +86,12 @@ export default function sparkline(svg, entries, options) {
   const values = entries.map((entry) => fetch(entry));
 
   // The rendering width will account for the spot size.
+  // @ts-expect-error
   const width = parseFloat(svg.attributes.width.value) - spotDiameter * 2;
 
   // Get the SVG element's full height.
   // This is used
+  // @ts-expect-error
   const fullHeight = parseFloat(svg.attributes.height.value);
 
   // The rendering height accounts for stroke width and spot size.
@@ -99,7 +113,7 @@ export default function sparkline(svg, entries, options) {
 
   // Hold all datapoints, which is whatever we got as the entry plus
   // x/y coords and the index.
-  const datapoints = [];
+  const datapoints: { value: number; index: number; x: number; y: number }[] = [];
 
   // Hold the line coordinates.
   const pathY = getY(max, height, strokeWidth + spotRadius, values[0]);
@@ -161,7 +175,9 @@ export default function sparkline(svg, entries, options) {
   svg.appendChild(spot);
 
   const interactionLayer = buildElement('rect', {
+    // @ts-expect-error
     width: svg.attributes.width.value,
+    // @ts-expect-error
     height: svg.attributes.height.value,
     style: 'fill: transparent; stroke: transparent',
     class: 'sparkline--interaction-layer',
@@ -169,10 +185,10 @@ export default function sparkline(svg, entries, options) {
   svg.appendChild(interactionLayer);
 
   interactionLayer.addEventListener('mouseout', (event) => {
-    cursor.setAttribute('x1', offscreen);
-    cursor.setAttribute('x2', offscreen);
+    cursor.setAttribute('x1', offscreen.toString());
+    cursor.setAttribute('x2', offscreen.toString());
 
-    spot.setAttribute('cx', offscreen);
+    spot.setAttribute('cx', offscreen.toString());
 
     if (onmouseout) {
       onmouseout(event);
@@ -204,11 +220,11 @@ export default function sparkline(svg, entries, options) {
     const { x } = currentDataPoint;
     const { y } = currentDataPoint;
 
-    spot.setAttribute('cx', x);
-    spot.setAttribute('cy', y);
+    spot.setAttribute('cx', x.toString());
+    spot.setAttribute('cy', y.toString());
 
-    cursor.setAttribute('x1', x);
-    cursor.setAttribute('x2', x);
+    cursor.setAttribute('x1', x.toString());
+    cursor.setAttribute('x2', x.toString());
 
     if (onmousemove) {
       onmousemove(event, currentDataPoint);

package/src/Spinner/index.tsx

@@ -0,0 +1,20 @@
+import CircularProgress, { type CircularProgressProps } from '@mui/material/CircularProgress';
+import { withDeprecated } from '../Util/deprecate';
+
+export interface SpinnerProps extends Omit<CircularProgressProps, 'size'> {
+  /** 之前 size prop 是 array 类型, 需要与 CircularProgress#size 兼容 */
+  size?: number | [number, number];
+}
+
+/** 之前的 Spinner 实现由内外 2 个环构成, 现在改为基于 @mui/material/CircularProgress 的实现 */
+function Spinner(props: SpinnerProps) {
+  const _props = { ...props } as CircularProgressProps;
+
+  // 兼容之前的 size prop (设置外圈/内圈的尺寸)
+  if (_props.size && Array.isArray(props.size)) {
+    [_props.size] = props.size;
+  }
+  return <CircularProgress {..._props} />;
+}
+
+export default withDeprecated(Spinner, { name: 'Spinner', alternative: '@mui/material/CircularProgress' });

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

@@ -1,8 +1,13 @@
-import PropTypes from 'prop-types';
 import { Box } from '@mui/material';
 
+export interface SuccessProps {
+  size?: number;
+  backgroundColor?: string;
+  borderWidth?: number;
+}
+
 // FIXME: @zhanghan 目前无法适配各种 size，后续优化
-export default function Success({ size, backgroundColor, borderWidth }) {
+export default function Success({ size = 64, backgroundColor = 'white', borderWidth = 4 }: SuccessProps) {
   const contentSize = size - borderWidth * 2;
 
   return (
@@ -163,14 +168,3 @@ export default function Success({ size, backgroundColor, borderWidth }) {
     </Box>
   );
 }
-
-Success.propTypes = {
-  size: PropTypes.number,
-  borderWidth: PropTypes.number,
-  backgroundColor: PropTypes.string,
-};
-Success.defaultProps = {
-  size: 64,
-  borderWidth: 4,
-  backgroundColor: 'white',
-};

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

@@ -1,5 +1,4 @@
-import PropTypes from 'prop-types';
-import { Tabs as MuiTabs, Tab as MuiTab } from '@mui/material';
+import { Tabs as MuiTabs, Tab as MuiTab, type TabsProps as MuiTabsProps } from '@mui/material';
 
 import { temp as colors } from '../Colors';
 import { styled } from '../Theme';
@@ -22,7 +21,13 @@ const StyledMuiTabs = styled(MuiTabs)(({ theme }) => ({
   },
 }));
 
-function CardTabs({ tabs, current, onChange, ...rest }) {
+interface CardTabsProps extends Omit<MuiTabsProps, 'onChange'> {
+  tabs: { value: any; label: React.ReactNode; icon?: string | React.ReactElement }[];
+  current: any;
+  onChange: (value: string) => void;
+}
+
+function CardTabs({ tabs, current, onChange, ...rest }: CardTabsProps) {
   return (
     <MuiTabs
       scrollButtons="auto"
@@ -72,19 +77,19 @@ function CardTabs({ tabs, current, onChange, ...rest }) {
         ...rest.sx,
       }}>
       {tabs.map((x) => (
-        <MuiTab className={classes.tab} key={x.value} value={x.value} label={x.label} icon={x.icon || null} />
+        <MuiTab className={classes.tab} key={x.value} value={x.value} label={x.label} icon={x.icon} />
       ))}
     </MuiTabs>
   );
 }
 
-CardTabs.propTypes = {
-  tabs: PropTypes.array.isRequired,
-  current: PropTypes.string.isRequired,
-  onChange: PropTypes.func.isRequired,
-};
+interface LineTabsProps extends Omit<MuiTabsProps, 'onChange'> {
+  tabs: { value: any; label: React.ReactNode; icon?: string | React.ReactElement }[];
+  current: any;
+  onChange: (value: string) => void;
+}
 
-function LineTabs({ tabs, current, onChange, ...rest }) {
+function LineTabs({ tabs, current, onChange, ...rest }: LineTabsProps) {
   return (
     <MuiTabs
       scrollButtons="auto"
@@ -137,38 +142,25 @@ function LineTabs({ tabs, current, onChange, ...rest }) {
         ...rest.sx,
       }}>
       {tabs.map((x) => (
-        <MuiTab className={classes.tab} key={x.value} value={x.value} label={x.label} icon={x.icon || null} />
+        <MuiTab className={classes.tab} key={x.value} value={x.value} label={x.label} icon={x.icon} />
       ))}
     </MuiTabs>
   );
 }
 
-LineTabs.propTypes = {
-  tabs: PropTypes.array.isRequired,
-  current: PropTypes.string.isRequired,
-  onChange: PropTypes.func.isRequired,
-};
-
-/**
- * @typedef {import('@mui/material').TabsProps & {
- *  tabs: string[];
- *  onChange: (value) => {};
- *  variant: 'line' | 'card' | 'fullWidth' | 'scrollable' | 'standard'
- * }} TabsProps
- */
-
-/**
- * @description
- * @param {TabsProps} props
- * @return {import('react').ReactNode}
- */
+interface TabsProps extends Omit<MuiTabsProps, 'variant' | 'onChange'> {
+  tabs: { value: any; label: React.ReactNode; icon?: string | React.ReactElement }[];
+  current: any;
+  onChange: (value: string) => void;
+  variant?: 'card' | 'line' | MuiTabsProps['variant'];
+}
 
-export default function Tabs({ tabs, current, onChange, ...rest }) {
-  if (rest.variant === 'card') {
+export default function Tabs({ tabs, current, onChange, variant, ...rest }: TabsProps) {
+  if (variant === 'card') {
     return <CardTabs {...rest} tabs={tabs} current={current} onChange={onChange} />;
   }
 
-  if (rest.variant === 'line') {
+  if (variant === 'line') {
     return <LineTabs {...rest} tabs={tabs} current={current} onChange={onChange} />;
   }
 
@@ -182,14 +174,8 @@ export default function Tabs({ tabs, current, onChange, ...rest }) {
       {...rest}
       className={[classes.tabs, rest.className || ''].join(' ')}>
       {tabs.map((x) => (
-        <MuiTab className={classes.tab} key={x.value} value={x.value} label={x.label} icon={x.icon || null} />
+        <MuiTab className={classes.tab} key={x.value} value={x.value} label={x.label} icon={x.icon} />
       ))}
     </StyledMuiTabs>
   );
 }
-
-Tabs.propTypes = {
-  tabs: PropTypes.array.isRequired,
-  current: PropTypes.string.isRequired,
-  onChange: PropTypes.func.isRequired,
-};

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

@@ -1,10 +1,28 @@
-import PropTypes from 'prop-types';
-import Typography from '@mui/material/Typography';
+import Typography, { type TypographyProps } from '@mui/material/Typography';
 
 import { styled } from '../Theme';
 import { withDeprecated } from '../Util/deprecate';
 
-function TextCollapse({ children, startChars, endChars, scaleFactor, maxWidth, style, fontType, ...rest }) {
+export interface TextCollapseProps {
+  children: string;
+  maxWidth: string | number;
+  startChars?: number;
+  endChars?: number;
+  scaleFactor?: number;
+  style?: React.CSSProperties;
+  fontType?: 'monospace' | 'normal';
+}
+
+function TextCollapse({
+  children,
+  maxWidth,
+  startChars = 5,
+  endChars = 5,
+  scaleFactor = 0.45,
+  style,
+  fontType = 'normal',
+  ...rest
+}: TextCollapseProps) {
   if (typeof children !== 'string') {
     return null;
   }
@@ -33,27 +51,14 @@ function TextCollapse({ children, startChars, endChars, scaleFactor, maxWidth, s
   );
 }
 
-TextCollapse.propTypes = {
-  children: PropTypes.string.isRequired,
-  maxWidth: PropTypes.oneOfType([PropTypes.string, PropTypes.number]).isRequired,
-  fontType: PropTypes.oneOf(['monospace', 'normal']),
-  style: PropTypes.object,
-  startChars: PropTypes.number,
-  endChars: PropTypes.number,
-  scaleFactor: PropTypes.number,
-};
+export default withDeprecated(TextCollapse, { name: 'TextCollapse' });
 
-TextCollapse.defaultProps = {
-  style: {},
-  startChars: 5,
-  endChars: 5,
-  scaleFactor: 0.45,
-  fontType: 'normal',
+type ContainerProps = {
+  startwidth: string;
+  endwidth: string;
 };
 
-export default withDeprecated(TextCollapse, { name: 'TextCollapse' });
-
-const Container = styled(Typography)`
+const Container = styled(Typography)<ContainerProps & TypographyProps>`
   display: inline-flex;
   align-items: center;
   justify-content: start;

package/src/Theme/index.ts

@@ -1,4 +1,3 @@
-/* eslint-disable no-unused-vars */
 import { CreateMUIStyled, Theme } from '@mui/material';
 import { styled as muiStyled, useTheme } from '@mui/material/styles';
 

package/src/Theme/theme-provider.tsx

@@ -14,7 +14,7 @@ export default function ThemeProvider({
   theme,
   injectFirst,
 }: {
-  children: React.ReactNode;
+  children?: React.ReactNode;
   theme: Theme;
   injectFirst: boolean;
 }) {

package/src/Theme/theme.ts

@@ -1,4 +1,3 @@
-/* eslint-disable no-unused-vars */
 /* eslint-disable no-shadow */
 // https://app.zeplin.io/styleguide/5d1436f1e97c2156f49c0725/colors
 import {
@@ -21,8 +20,8 @@ import '@fontsource/inter/latin-ext-500.css';
 import '@fontsource/inter/latin-ext-700.css';
 import colors from '../Colors';
 
-// 扩展 Theme 和 ThemeOptions 接口
-declare module '@mui/material/styles/createTheme' {
+// 扩展 Theme
+declare module '@mui/material/styles' {
   interface Theme {
     mode?: string;
     themeName?: string;
@@ -42,6 +41,10 @@ declare module '@mui/material/styles/createTheme' {
     pageWidth?: string;
     colors?: Record<string, string>;
   }
+
+  interface TypeText {
+    hint: string;
+  }
 }
 
 const muiDarkTheme = _createTheme({ palette: { mode: 'dark' } });

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

@@ -1,29 +1,38 @@
-import PropTyps from 'prop-types';
-import { Box, Typography as MuiTypography, Skeleton } from '@mui/material';
+import { Box, Typography as MuiTypography, Skeleton, type TypographyProps as MuiTypographyProps } from '@mui/material';
 import { useCreation, useReactive, useSize } from 'ahooks';
 import { useEffect, useRef } from 'react';
 
-export default function Typography({ minFontSize, fontSize, children, sx, ...rest }) {
-  const refMock = useRef(null);
-  const refContainer = useRef(null);
-  const state = useReactive({
+export interface TypographyProps extends MuiTypographyProps {
+  fontSize?: string | number;
+  minFontSize?: number;
+}
+
+export default function Typography({ children = null, minFontSize = 12, fontSize, sx, ...rest }: TypographyProps) {
+  const refMock = useRef<HTMLSpanElement>(null);
+  const refContainer = useRef<HTMLDivElement>(null);
+  const state = useReactive<{
+    fontSize?: number;
+    loading: boolean;
+    initialSize?: number;
+  }>({
+    // @ts-expect-error
     fontSize,
     loading: true,
-    initialSize: undefined,
   });
   const mockSize = useSize(refMock.current);
   const containerSize = useSize(refContainer.current);
+
   useEffect(() => {
     if (state.loading) {
       if (fontSize === 'auto') {
         if (mockSize && !state.initialSize) {
-          const styleSize = getComputedStyle(refMock.current).fontSize;
+          const styleSize = getComputedStyle(refMock.current!).fontSize;
           state.initialSize = Number(styleSize.replace('px', ''));
           state.fontSize = state.initialSize;
         }
         if (containerSize && mockSize) {
-          if (containerSize.width < mockSize.width && state.fontSize > minFontSize) {
-            state.fontSize--;
+          if (containerSize.width < mockSize.width && state.fontSize! > minFontSize) {
+            state.fontSize!--;
           } else {
             state.loading = false;
           }
@@ -72,15 +81,3 @@ export default function Typography({ minFontSize, fontSize, children, sx, ...res
     </MuiTypography>
   );
 }
-
-Typography.propTypes = {
-  fontSize: PropTyps.oneOfType([PropTyps.string, PropTyps.number]),
-  children: PropTyps.any.isRequired,
-  minFontSize: PropTyps.number,
-  sx: PropTyps.object,
-};
-Typography.defaultProps = {
-  fontSize: undefined,
-  minFontSize: 12,
-  sx: {},
-};