@arcblock/ux 2.10.67 → 2.10.68

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.68",
   "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": "abe3ae3ba176e5429ca94d3309ef99ed9544f39e",
   "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.68",
+    "@arcblock/nft-display": "^2.10.68",
+    "@arcblock/react-hooks": "^2.10.68",
     "@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({

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

@@ -1,12 +1,12 @@
-import PropTypes from 'prop-types';
-import Button from '@mui/material/Button';
+import Button, { type ButtonProps } from '@mui/material/Button';
 import CookieConsent, { resetCookieConsentValue } from 'react-cookie-consent';
 
 import { styled } from '../Theme';
+import type { Locale, Translations } from '../type';
 
 export { resetCookieConsentValue };
 
-const translations = {
+const translations: Translations = {
   en: {
     content:
       'We use cookies and other tracking technologies to improve your browsing experience on our website, to show you personalized content, to analyze our website traffic, and to understand where our visitors are coming from.',
@@ -27,16 +27,27 @@ function inIframe() {
   }
 }
 
-function AcceptButton(props) {
+function AcceptButton(props: ButtonProps) {
   return <Button variant="contained" {...props} />;
 }
 
+export interface CookieConsentProps extends React.ComponentProps<typeof CookieConsent> {
+  locale?: Locale;
+  displayInIframe?: false | true;
+}
+
 /**
  * DefaultCookieConsent, 对 react-cookie-consent package 封装, 以便 arcblock 内部产品可以快速使用
  * - 默认内容
  * - 默认配置/样式
  */
-export default function DefaultCookieConsent({ children, locale, style, displayInIframe, ...rest }) {
+export default function DefaultCookieConsent({
+  children,
+  locale = 'en',
+  style = {},
+  displayInIframe = false,
+  ...rest
+}: CookieConsentProps) {
   if (!displayInIframe && inIframe()) {
     return null;
   }
@@ -59,20 +70,6 @@ export default function DefaultCookieConsent({ children, locale, style, displayI
   );
 }
 
-DefaultCookieConsent.propTypes = {
-  children: PropTypes.any,
-  style: PropTypes.object,
-  locale: PropTypes.string,
-  displayInIframe: PropTypes.bool,
-};
-
-DefaultCookieConsent.defaultProps = {
-  children: null,
-  style: {},
-  locale: 'en',
-  displayInIframe: false,
-};
-
 const Wrapper = styled('div')`
   box-sizing: border-box;
   position: fixed;