@arcblock/ux 2.10.67 → 2.10.69

package/lib/Wallet/Open.js

@@ -1,11 +1,10 @@
 import { jsx as _jsx } from "react/jsx-runtime";
-import PropTypes from 'prop-types';
 import useBrowser from '@arcblock/react-hooks/lib/useBrowser';
 import Fab from '@mui/material/Fab';
 import { styled } from '../Theme';
 export default function OpenInWallet({
-  locale,
-  link
+  link,
+  locale = 'zh'
 }) {
   const buttonText = locale === 'zh' ? '在 DID 钱包打开' : 'Open in DID Wallet';
   const browser = useBrowser();
@@ -15,7 +14,9 @@ export default function OpenInWallet({
       size: "small",
       href: deepLink,
       variant: "extended",
-      color: "primary",
+      color: "primary"
+      // @ts-expect-error
+      ,
       rounded: true,
       target: "_blank",
       className: "open-in-wallet-button",
@@ -24,13 +25,6 @@ export default function OpenInWallet({
   }
   return null;
 }
-OpenInWallet.propTypes = {
-  locale: PropTypes.oneOf(['en', 'zh']),
-  link: PropTypes.string.isRequired
-};
-OpenInWallet.defaultProps = {
-  locale: 'zh'
-};
 const Button = styled(Fab)`
   && {
     font-size: 12px;

package/lib/WalletOSIcon/index.d.ts

@@ -1,26 +1,7 @@
-declare function WalletOSIcon({ loading, walletOS, provider, color }: {
-    loading: any;
-    walletOS: any;
-    provider: any;
-    color: any;
-}): import("react/jsx-runtime").JSX.Element | null;
-declare namespace WalletOSIcon {
-    namespace propTypes {
-        let loading: PropTypes.Requireable<boolean>;
-        let walletOS: PropTypes.Requireable<string>;
-        let provider: PropTypes.Requireable<string>;
-        let color: PropTypes.Requireable<string>;
-    }
-    namespace defaultProps {
-        let loading_1: boolean;
-        export { loading_1 as loading };
-        let walletOS_1: null;
-        export { walletOS_1 as walletOS };
-        let provider_1: null;
-        export { provider_1 as provider };
-        let color_1: string;
-        export { color_1 as color };
-    }
+export interface WalletOSIconProps {
+    loading?: false | true;
+    walletOS?: string;
+    provider?: string;
+    color?: string;
 }
-export default WalletOSIcon;
-import PropTypes from 'prop-types';
+export default function WalletOSIcon({ loading, walletOS, provider, color }: WalletOSIconProps): import("react/jsx-runtime").JSX.Element | null;

package/lib/WalletOSIcon/index.js

@@ -1,5 +1,4 @@
 import { jsx as _jsx } from "react/jsx-runtime";
-import PropTypes from 'prop-types';
 import { Icon } from '@iconify/react';
 import ApiIcon from '@iconify-icons/mdi/api';
 import IOSRoundedIcon from '@iconify-icons/material-symbols/ios-rounded';
@@ -10,10 +9,10 @@ import QuestionMarkRoundedIcon from '@iconify-icons/material-symbols/question-ma
 import MailOutlineRoundedIcon from '@iconify-icons/material-symbols/mail-outline-rounded';
 import { LOGIN_PROVIDER } from '../Util/constant';
 export default function WalletOSIcon({
-  loading,
+  loading = false,
   walletOS,
   provider,
-  color
+  color = 'black'
 }) {
   if (loading) {
     return /*#__PURE__*/_jsx(Icon, {
@@ -67,16 +66,4 @@ export default function WalletOSIcon({
     });
   }
   return null;
-}
-WalletOSIcon.propTypes = {
-  loading: PropTypes.bool,
-  walletOS: PropTypes.string,
-  provider: PropTypes.string,
-  color: PropTypes.string
-};
-WalletOSIcon.defaultProps = {
-  loading: false,
-  walletOS: null,
-  provider: null,
-  color: 'black'
-};
+}

package/lib/WebWalletSWKeeper/index.d.ts

@@ -1,21 +1,9 @@
-export default WebWalletSWKeeper;
-export function withWebWalletSWKeeper(Component: any): ({ webWalletUrl, maxIdleTime, ...rest }: {
-    [x: string]: any;
-    webWalletUrl: any;
-    maxIdleTime: any;
-}) => import("react/jsx-runtime").JSX.Element;
-declare function WebWalletSWKeeper({ webWalletUrl, maxIdleTime }: {
-    webWalletUrl: any;
-    maxIdleTime: any;
-}): null;
-declare namespace WebWalletSWKeeper {
-    namespace propTypes {
-        let webWalletUrl: PropTypes.Validator<string>;
-        let maxIdleTime: PropTypes.Requireable<number>;
-    }
-    namespace defaultProps {
-        export { DEFAULT_MAX_IDLE_TIME as maxIdleTime };
-    }
+interface WebWalletSWKeeperProps {
+    webWalletUrl: string;
+    maxIdleTime: number;
 }
-import PropTypes from 'prop-types';
-declare const DEFAULT_MAX_IDLE_TIME: number;
+declare function WebWalletSWKeeper({ webWalletUrl, maxIdleTime }: WebWalletSWKeeperProps): null;
+export declare const withWebWalletSWKeeper: <P extends {
+    webWalletUrl: string;
+}>(Component: React.ComponentType<P>) => ({ webWalletUrl, maxIdleTime, ...rest }: WebWalletSWKeeperProps & P) => import("react/jsx-runtime").JSX.Element;
+export default WebWalletSWKeeper;

package/lib/WebWalletSWKeeper/index.js

@@ -1,6 +1,5 @@
 import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
 import { useEffect, useRef } from 'react';
-import PropTypes from 'prop-types';
 import useIdle from 'react-use/lib/useIdle';
 import { useLocalStorageState } from 'ahooks';
 import useBrowser from '@arcblock/react-hooks/lib/useBrowser';
@@ -17,15 +16,15 @@ const injectIframe = webWalletUrl => {
   const iframe = document.createElement('iframe');
   iframe.title = 'abt wallet';
   iframe.id = id;
-  iframe.style.width = 0;
-  iframe.style.height = 0;
-  iframe.style.border = 0;
+  iframe.style.width = '0';
+  iframe.style.height = '0';
+  iframe.style.border = '0';
   // https://stackoverflow.com/questions/27858989/iframe-with-0-height-creates-a-gap
   iframe.style.display = 'block';
   // fix: 页面自动滚动到底部问题 (https://github.com/blocklet/abt-wallet/issues/1160)
   //      top: 0 可能不是必须的, 但测试中发现, 如果不设置, 在某些特殊情况下似乎也会导致页面自动滚动到底部
   iframe.style.position = 'absolute';
-  iframe.style.top = 0;
+  iframe.style.top = '0';
   iframe.src = `${webWalletUrl}?action=iframe`;
   document.body.appendChild(iframe);
 };
@@ -37,7 +36,7 @@ const removeIframe = () => {
 };
 const cleanup = () => {
   removeIframe();
-  id = null;
+  id = '';
 };
 const enable = webWalletUrl => {
   if (!id) {
@@ -45,11 +44,10 @@ const enable = webWalletUrl => {
     injectIframe(webWalletUrl);
   }
 };
-
 // 该组件通过嵌入一个 web wallet iframe 帮助 web wallet service worker 延最大空闲时间
 function WebWalletSWKeeper({
   webWalletUrl,
-  maxIdleTime
+  maxIdleTime = DEFAULT_MAX_IDLE_TIME
 }) {
   // 渲染前先记录是否已经存在一个 WebWalletSWKeeper 实例
   const instanceExists = useRef(!!id);
@@ -73,14 +71,6 @@ function WebWalletSWKeeper({
   useEffect(() => () => _cleanup(), []);
   return null;
 }
-WebWalletSWKeeper.propTypes = {
-  webWalletUrl: PropTypes.string.isRequired,
-  maxIdleTime: PropTypes.number
-};
-WebWalletSWKeeper.defaultProps = {
-  maxIdleTime: DEFAULT_MAX_IDLE_TIME
-};
-export default WebWalletSWKeeper;
 export const withWebWalletSWKeeper = Component => {
   // eslint-disable-next-line react/prop-types
   return function WithWebWalletSWKeeperComponent({
@@ -102,14 +92,19 @@ export const withWebWalletSWKeeper = Component => {
     // - 检查到 wallet 浏览器插件
     // - webWalletUrl 与当前页面 url 的 protocol 不同
     // - wallet webview
+
+    const props = {
+      webWalletUrl,
+      ...rest
+    };
     return /*#__PURE__*/_jsxs(_Fragment, {
       children: [!disabled && !extension && isSameProtocol && !isWalletWebview && /*#__PURE__*/_jsx(WebWalletSWKeeper, {
         webWalletUrl: webWalletUrl,
         maxIdleTime: maxIdleTime
       }), /*#__PURE__*/_jsx(Component, {
-        webWalletUrl: webWalletUrl,
-        ...rest
+        ...props
       })]
     });
   };
-};
+};
+export default WebWalletSWKeeper;

package/lib/WechatPrompt/index.js

@@ -13,6 +13,8 @@ export default function WechatPrompt() {
   if (!browser.wechat) {
     return null;
   }
+
+  // @ts-expect-error
   if (browser.android) {
     return /*#__PURE__*/_jsx(Dialog, {
       open: true,

package/lib/global.d.ts

@@ -1,4 +1,19 @@
 declare module '@arcblock/did-motif';
+declare module 'd3-geo';
+declare module 'topojson-client';
+declare module 'versor';
+declare module 'axios/*';
+
+// ux svg 由 babel-plugin-inline-react-svg 处理
+declare module '*.svg' {
+  import * as React from 'react';
+  const ReactComponent: React.FunctionComponent<React.SVGProps<SVGSVGElement>>;
+  export { ReactComponent };
+}
+
+declare module '*.png' {
+  export default string;
+}
 
 type Blocklet = import('./type').Blocklet;
 

package/lib/type.d.ts

@@ -1,5 +1,14 @@
+import type { Theme } from '@mui/material';
+import type { LiteralUnion } from 'type-fest';
+
 export type $TSFixMe = any;
+export type Translations = Record<string, Record<string, any>>;
+export type Locale = LiteralUnion<'en' | 'zh', string>;
 
+// TODO: 以下为 blocklet 应用专属的全局对象类型，可以更加具体
+export type User = Record<string, any>;
+export type Session = Record<string, any>;
+export type Passport = Record<string, any>;
 export type Blocklet = {
   appId: string;
   appIds: string[];
@@ -16,15 +25,15 @@ export type Blocklet = {
   version: string;
   mode: string;
   tenantMode: 'single' | 'multiple';
-  theme: TTheme;
-  navigation: TNavigation[];
+  theme: Theme;
+  navigation: $TSFixMe[];
   preferences: Record<string, any>;
   languages: {
     code: string;
     name: string;
   }[];
   passportColor: string;
-  componentMountPoints: TComponent[];
+  componentMountPoints: $TSFixMe[];
   alsoKnownAs: string[];
   trustedFactories: string[];
   [x: string]: any;

package/lib/withTheme/index.d.ts

@@ -1,7 +1,9 @@
+import { type PaletteOptions } from '@mui/material/styles/createPalette';
+import { type TypographyOptions } from '@mui/material/styles/createTypography';
+declare function withTheme<P extends object>(Component: React.ComponentType<P>, { mode, pageWidth, palette, typography, }?: {
+    mode?: string;
+    pageWidth?: string;
+    palette?: PaletteOptions;
+    typography?: TypographyOptions;
+}): (props: P) => import("react/jsx-runtime").JSX.Element;
 export default withTheme;
-declare function withTheme(Component: any, { mode, pageWidth, palette, typography }?: {
-    mode?: string | undefined;
-    pageWidth?: string | undefined;
-    palette: any;
-    typography: any;
-}): (props: any) => import("react/jsx-runtime").JSX.Element;

package/lib/withTracker/index.d.ts

@@ -1,2 +1,2 @@
-declare function _default(WrappedComponent: any): (props: any) => import("react/jsx-runtime").JSX.Element;
+declare const _default: <P extends object>(WrappedComponent: React.ComponentType<P>) => (props: P) => import("react/jsx-runtime").JSX.Element;
 export default _default;

package/lib/withTracker/index.js

@@ -30,7 +30,10 @@ export default WrappedComponent => {
   if (trackingId) {
     ReactGA.initialize(trackingId);
   }
+
+  // @ts-ignore
   window.trackPage = trackPage;
+  // @ts-ignore
   window.trackEvent = trackEvent;
   return function TrackedComponent(props) {
     const location = useLocation();

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@arcblock/ux",
-  "version": "2.10.67",
+  "version": "2.10.69",
   "description": "Common used react components for arcblock products",
   "keywords": [
     "react",
@@ -43,7 +43,10 @@
     "@babel/preset-env": "^7.19.3",
     "@babel/preset-react": "^7.18.6",
     "@babel/preset-typescript": "^7.24.7",
+    "@types/base64-url": "^2.2.2",
+    "@types/pako": "^2.0.3",
     "@types/react": "^18.3.4",
+    "@types/react-helmet": "^6.1.11",
     "@typescript-eslint/eslint-plugin": "^8.7.0",
     "@typescript-eslint/parser": "^8.7.0",
     "babel-plugin-inline-react-svg": "^1.1.2",
@@ -64,12 +67,12 @@
     "react": ">=18.2.0",
     "react-router-dom": ">=6.22.3"
   },
-  "gitHead": "6832c5e23016283254d930ae879573fbb07710b2",
+  "gitHead": "4b3b22a5487469fdbd2abd68c0bb74cb06a68bd9",
   "dependencies": {
     "@arcblock/did-motif": "^1.1.13",
-    "@arcblock/icons": "^2.10.67",
-    "@arcblock/nft-display": "^2.10.67",
-    "@arcblock/react-hooks": "^2.10.67",
+    "@arcblock/icons": "^2.10.69",
+    "@arcblock/nft-display": "^2.10.69",
+    "@arcblock/react-hooks": "^2.10.69",
     "@babel/plugin-syntax-dynamic-import": "^7.8.3",
     "@fontsource/inter": "^5.0.16",
     "@fontsource/ubuntu-mono": "^5.0.18",
@@ -111,6 +114,7 @@
     "react-use": "^17.4.0",
     "rebound": "^0.1.0",
     "topojson-client": "^3.1.0",
+    "type-fest": "^4.28.0",
     "versor": "^0.0.4"
   }
 }

package/src/Address/did-address.tsx

@@ -8,8 +8,9 @@ import React, { forwardRef, ReactNode, useImperativeHandle, useRef, useState } f
 import { styled } from '../Theme';
 import { getFontSize } from '../Util';
 import CompactText from './compact-text';
+import type { Locale, Translations } from '../type';
 
-const translations = {
+const translations: Translations = {
   en: {
     copy: 'Click To Copy',
     copied: 'Copied!',
@@ -26,18 +27,18 @@ export interface HTMLDidAddressElement extends HTMLDivElement {
 export interface IDidAddressProps extends BoxProps {
   component?: React.ElementType;
   size?: number;
-  copyable?: boolean;
+  copyable?: true | false;
   // compact mode 下, hover 时会在 tooltip 中显示完整地址, showCopyButtonInTooltip = true 时会在完整地址后显示一个复制按钮
-  showCopyButtonInTooltip?: boolean;
+  showCopyButtonInTooltip?: false | true;
   content?: string;
-  inline?: boolean;
+  inline?: false | true;
   prepend?: ReactNode;
   append?: ReactNode;
   // 紧凑模式
-  compact?: boolean;
+  compact?: false | true;
   startChars?: number;
   endChars?: number;
-  locale?: 'en' | 'zh';
+  locale?: Locale;
 }
 
 /**

package/src/Address/index.tsx

@@ -3,7 +3,7 @@ import DidAddress, { HTMLDidAddressElement, IDidAddressProps } from './did-addre
 import ResponsiveDidAddress from './responsive-did-address';
 
 export interface IDidAddressWrapper extends IDidAddressProps {
-  responsive?: boolean;
+  responsive?: true | false;
 }
 
 const DidAddressWrapper = forwardRef<HTMLDidAddressElement, IDidAddressWrapper>(

package/src/Avatar/index.jsx

@@ -13,14 +13,15 @@ import { DID_PREFIX } from '../Util/constant';
 /**
  * Avatar component
  * @typedef {{
+ *  src?: string;
  *  did?: string;
  *  size?: number;
  *  variant?: 'circle' | 'rounded' | 'default';
- *  animation?: boolean;
+ *  animation?: false | true;
  *  shape?: '' | 'rectangle' | 'square' | 'hexagon' | 'circle';
- *  blockiesPadding?: boolean;
- *  responsive?: boolean;
- * } & Omit<import('../Img').ImgProps, 'size'>} AvatarProps
+ *  blockiesPadding?: true | false;
+ *  responsive?: false | true;
+ * } & Omit<import('../Img').ImgProps, 'size' | 'src'>} AvatarProps
  */
 
 /**
@@ -30,6 +31,7 @@ import { DID_PREFIX } from '../Util/constant';
  */
 function Avatar(props) {
   const [imgError, setImgError] = useState(false);
+  /** @type {AvatarProps} */
   const newProps = mergeProps(props, Avatar, []);
   const { did = '', size, src, variant, animation, shape, blockiesPadding, responsive, ...rest } = newProps;
 

package/src/Blocklet/blocklet.jsx

@@ -132,8 +132,8 @@ const Div = styled('div')`
  *  cover?: string;
  *  version?: string;
  *  buttonText?: string;
- *  buttonDisabled?: boolean;
- *  buttonLoading?: boolean;
+ *  buttonDisabled?: false | true;
+ *  buttonLoading?: false | true;
  *  button?: JSX.Element;
  *  onButtonClick?: Function;
  *  onMainClick?: Function;

package/src/BlockletContext/index.tsx

@@ -11,12 +11,12 @@ function BlockletProvider({
   baseUrl = '',
   loading = null,
 }: {
-  children: React.ReactNode;
+  children?: React.ReactNode;
   /**
    * baseUrl 为 blocklet origin + blocklet prefix
    */
-  baseUrl: string;
-  loading: React.ReactNode;
+  baseUrl?: string;
+  loading?: React.ReactNode;
 }) {
   const [blockletData, setBlockletData] = useState<Blocklet | null>(null);
   const getBlockleData = useMemoizedFn(async () => {

package/src/BlockletNFT/index.jsx

@@ -208,10 +208,10 @@ BlockletIcon.propTypes = {
  *  description?: string;
  *  cover?: string;
  *  did?: string;
- *  isStickyButton?: boolean;
+ *  isStickyButton?: false | true;
  *  buttonText?: string;
- *  buttonDisabled?: boolean;
- *  buttonLoading?: boolean;
+ *  buttonDisabled?: false | true;
+ *  buttonLoading?: false | true;
  *  button?: JSX.Element;
  *  addons?: Array<any>;
  *  size?: 'xs' | 'sm' | 'md' | 'auto';

package/src/BlockletV2/blocklet.tsx

@@ -26,8 +26,8 @@ export interface IBlockletStore extends CardProps {
   };
   button?: React.ReactNode;
   buttonText?: string;
-  buttonDisabled?: boolean;
-  buttonLoading?: boolean;
+  buttonDisabled?: false | true;
+  buttonLoading?: false | true;
   onButtonClick?: Function;
   onMainClick?: Function;
   className?: string;

package/src/Button/wrap.jsx

@@ -21,8 +21,8 @@ const extendedColors = {
 /**
  * @typedef {import('@mui/material').ButtonProps} MuiButtonProps
  * @typedef {{
- *  rounded?: boolean,
- *  loading?: boolean,
+ *  rounded?: false | true,
+ *  loading?: false | true,
  *  forwardedRef?: import('react').ForwardedRef<any>,
  *  color?: MuiButtonProps['color'] | 'reverse' | 'did'
  * }} CustomButtonProps

package/src/CardSelector/index.tsx

@@ -1,4 +1,3 @@
-/* eslint-disable no-unused-vars */
 import { useState, useEffect, useRef } from 'react';
 import styled from '@emotion/styled';
 import noop from 'lodash/noop';

package/src/Center/index.tsx

@@ -4,7 +4,7 @@ export default function Center({
   children,
   relative = 'screen',
 }: {
-  children: React.ReactNode;
+  children?: React.ReactNode;
   /**
    * 容器相对尺寸，默认相对屏幕(screen)，可设置为父容器(parent)
    */

package/src/ClickToCopy/copy-button.tsx

@@ -1,15 +1,15 @@
-/* eslint-disable no-unused-vars */
 import Tooltip from '@mui/material/Tooltip';
 import { green } from '@mui/material/colors';
 import CopyIcon from '@mui/icons-material/ContentCopy';
 import CheckIcon from '@mui/icons-material/Check';
 import useCopy from './hook';
+import type { Locale } from '../type';
 
 export interface CopyButtonProps extends React.HTMLAttributes<HTMLSpanElement> {
   content?: string;
-  locale?: 'en' | 'zh';
-  render?: (props: { copyButton: React.ReactNode; containerRef: React.RefObject<HTMLElement> }) => React.ReactNode;
-  showTooltip?: boolean;
+  locale?: Locale;
+  render?: (props: { copyButton: React.ReactNode; containerRef: React.RefObject<HTMLElement> }) => JSX.Element | null;
+  showTooltip?: true | false;
 }
 
 export default function CopyButton({

package/src/ClickToCopy/hook.ts

@@ -1,7 +1,8 @@
 import { useState, useEffect, useRef } from 'react';
 import Copy from 'copy-to-clipboard';
+import type { Locale, Translations } from '../type';
 
-const translations = {
+const translations: Translations = {
   en: {
     copy: 'Click To Copy',
     copied: 'Copied!',
@@ -12,7 +13,7 @@ const translations = {
   },
 };
 
-export default function useCopy({ content, locale = 'en' }: { content?: string; locale?: 'en' | 'zh' }) {
+export default function useCopy({ content, locale = 'en' }: { content?: string; locale?: Locale }) {
   const [copied, setCopied] = useState(false);
   const containerRef = useRef<HTMLElement | null>(null);
   const copy = (e: React.MouseEvent) => {

package/src/ClickToCopy/index.tsx

@@ -1,11 +1,12 @@
 import { useSize } from 'ahooks';
-import Tooltip from '@mui/material/Tooltip';
+import Tooltip, { type TooltipProps } from '@mui/material/Tooltip';
 
 import { useSnackbar } from 'notistack';
 import useCopy from './hook';
 import Toast, { ToastProvider } from '../Toast';
 import { mergeProps } from '../Util';
 import { styled } from '../Theme';
+import type { Locale } from '../type';
 
 export { default as CopyButton } from './copy-button';
 
@@ -26,13 +27,13 @@ const UnstyledContainer = styled('span')`
   cursor: pointer;
 `;
 
-export interface ClickToCopyProps extends React.HTMLAttributes<HTMLDivElement> {
+export interface ClickToCopyProps extends TooltipProps {
   content?: string;
-  locale?: 'en' | 'zh';
+  locale?: Locale;
   tip?: string;
   tipPlacement?: string;
   copiedTip?: string;
-  unstyled?: boolean;
+  unstyled?: false | true;
 }
 
 export default function ClickToCopy(props: ClickToCopyProps) {
@@ -74,6 +75,6 @@ ClickToCopy.defaultProps = {
   tip: '',
   copiedTip: '',
   tipPlacement: 'right',
-  locale: 'en' as const,
+  locale: 'en',
   unstyled: false,
 };

package/src/CodeBlock/index.tsx

@@ -1,6 +1,7 @@
 /* eslint-disable react/no-danger */
 import { useState } from 'react';
 import Copy from 'copy-to-clipboard';
+import { type SxProps } from '@mui/material';
 
 import hljs from 'highlight.js/lib/core';
 import javascript from 'highlight.js/lib/languages/javascript';
@@ -59,7 +60,8 @@ export interface CodeBlockProps extends React.HTMLAttributes<HTMLPreElement> {
   code?: string;
   language?: string;
   children?: React.ReactNode;
-  dark?: boolean;
+  dark?: true | false;
+  sx?: SxProps;
 }
 
 export default function CodeBlock({