@arcblock/ux 2.10.65 → 2.10.67

package/src/Util/{deprecate.jsx → deprecate.tsx}

@@ -1,6 +1,6 @@
-import { useEffect } from 'react';
+import { ComponentType, useEffect } from 'react';
 
-const warn = (name, alternative) => {
+const warn = (name: string, alternative?: string) => {
   if (process.env.NODE_ENV === 'production') {
     return;
   }
@@ -13,11 +13,15 @@ const warn = (name, alternative) => {
   }
 };
 
-const withDeprecated = (Component, { name, alternative }) => {
-  return function Deprecated(props) {
+const withDeprecated = <P extends object>(
+  Component: ComponentType<P>,
+  { name, alternative }: { name: string; alternative?: string }
+) => {
+  return function Deprecated(props: P) {
     useEffect(() => {
       warn(name, alternative);
     }, []);
+
     return <Component {...props} />;
   };
 };

package/src/Util/{federated.js → federated.ts}

@@ -58,7 +58,7 @@ export function getCurrentApp(blocklet = window.blocklet) {
       provider: 'wallet',
     };
   }
-  // HACK: 适用于 blockelt-server
+  // HACK: 适用于 blocklet-server
   if (window.env) {
     // eslint-disable-next-line no-param-reassign
     blocklet = window.env;
@@ -78,7 +78,7 @@ export function getCurrentApp(blocklet = window.blocklet) {
   return null;
 }
 
-export function getApps(blocklet) {
+export function getApps(blocklet: Blocklet) {
   const appList = [];
 
   const masterApp = getFederatedApp(blocklet);
@@ -95,7 +95,7 @@ export function getApps(blocklet) {
   return appList.reverse();
 }
 
-export async function getBlockletData(appUrl) {
+export async function getBlockletData(appUrl: string) {
   try {
     const url = new URL('__blocklet__.js', appUrl);
     url.searchParams.set('type', 'json');

package/src/Util/{index.js → index.ts}

@@ -2,16 +2,17 @@
 import padStart from 'lodash/padStart';
 import { getDIDMotifInfo, colors } from '@arcblock/did-motif';
 import { DID_PREFIX, WELLKNOWN_SERVICE_PATH_PREFIX } from './constant';
+import type { $TSFixMe } from '../type';
 
-let dateTool = null;
+let dateTool: $TSFixMe | null = null;
 
-export function parseQuery(str) {
+export function parseQuery(str: string) {
   return str
     .replace(/^\?/, '')
     .split('&')
     .map((x) => x.split('='))
     .filter(([key]) => !!key)
-    .reduce((memo, x) => {
+    .reduce<Record<string, string | boolean>>((memo, x) => {
       const key = x[0];
       const value = decodeURIComponent(x[1]) || true;
       memo[key] = value;
@@ -23,16 +24,22 @@ export function stringifyQuery(params = {}) {
   return new URLSearchParams(params).toString();
 }
 
-/**
- * @param {number} opts.expireInDays
- * @param {string} opts.path
- * @param {domain} opts.domain
- * @param {boolean} opts.returnDomain if === false, opts.domain will be skipped
- */
-export function getCookieOptions(expireInDays = 1) {
-  let opts = { expireInDays };
-  if (typeof expireInDays === 'object') {
-    opts = expireInDays;
+export function getCookieOptions(
+  expireInDays:
+    | number
+    | {
+        expireInDays: number;
+        path?: string;
+        domain?: string;
+        returnDomain?: boolean;
+        sameSite?: Cookies.CookieAttributes['sameSite'];
+        secure?: boolean;
+      } = 1
+) {
+  let opts = expireInDays;
+
+  if (typeof opts === 'number') {
+    opts = { expireInDays: opts };
   }
 
   if (opts.path === undefined) {
@@ -43,7 +50,7 @@ export function getCookieOptions(expireInDays = 1) {
     opts.expireInDays = 1;
   }
 
-  const options = {
+  const options: Cookies.CookieAttributes = {
     expires: opts.expireInDays,
     path: opts.path,
     domain: opts.domain || '',
@@ -61,7 +68,7 @@ export function getCookieOptions(expireInDays = 1) {
   return options;
 }
 
-export const getColor = (props) => {
+export const getColor = (props: $TSFixMe) => {
   if (props.color) {
     return props.color;
   }
@@ -73,7 +80,7 @@ export const getColor = (props) => {
   return props.theme.palette.text.primary;
 };
 
-export const getBackground = (props) => {
+export const getBackground = (props: $TSFixMe) => {
   if (props.background) {
     return props.background;
   }
@@ -85,11 +92,15 @@ export const getBackground = (props) => {
   return props.theme.palette.common.white;
 };
 
-export function mergeProps(props, component, jsonAttrs = []) {
+export function mergeProps<P extends object>(
+  props: Record<string, any>,
+  component: React.ComponentType<P>,
+  jsonAttrs: string[] = []
+) {
   const newProps = Object.assign({}, props);
   Object.keys(component.defaultProps || {}).forEach((x) => {
     if (typeof newProps[x] === 'string' && newProps[x].indexOf('::prop::') === 0) {
-      newProps[x] = component.defaultProps[x];
+      newProps[x] = component.defaultProps![x as keyof P];
     }
   });
 
@@ -133,7 +144,7 @@ export const getTimezone = () => {
   return '';
 };
 
-export const str2color = (str) => {
+export const str2color = (str: string) => {
   let hash = 0;
   for (let i = 0; i < str.length; i++) {
     hash = str.charCodeAt(i) + ((hash << 5) - hash);
@@ -146,20 +157,20 @@ export const str2color = (str) => {
   return colour;
 };
 
-export const formatUptime = (uptime) => {
+export const formatUptime = (uptime: number) => {
   const total = Math.round(uptime / 1000);
   const hours = Math.floor(total / 3600);
   const minutes = Math.floor((total - hours * 3600) / 60);
   const seconds = total % 60;
+  // @ts-expect-error
   return `${padStart(hours, 2, '0')}:${padStart(minutes, 2, '0')}:${padStart(seconds, 2, '0')}`;
 };
 
 /**
  * Set the date tool library which support for format() and locale() functions,
  *  moment and dayjs are recommended.
- * @param {object} the date tool library
  */
-export function setDateTool(tool) {
+export function setDateTool(tool: typeof dateTool) {
   dateTool = tool;
 }
 
@@ -168,8 +179,8 @@ export function getDateTool() {
 }
 
 const createDateFormatter =
-  (format) =>
-  (date, { locale, tz }) => {
+  (format: string) =>
+  (date: string, { locale, tz }: { locale?: string; tz?: string } = {}) => {
     if (dateTool === null) {
       throw new Error('call setDateTool to set the date tool library, such as: setDateTool(dayjs)');
     }
@@ -194,30 +205,23 @@ const createDateFormatter =
 /**
  * Format the time string as `ll` format: MMM D, YYYY
  * Ensure that the setDateTool() function is called first to set the time tool library.
- * @param {string} date date string
- * @param {object} option
- * @param {string} option.locale, default: en
- * @param {string} option.tz, default: timzone
  * @returns formatted date string
  */
-export function formatToDate(date, { locale, tz } = {}) {
+export function formatToDate(date: string, { locale = 'en', tz }: { locale?: string; tz?: string } = {}) {
   return createDateFormatter('ll')(date, { locale, tz });
 }
 
 /**
  * Format the time string as `lll` format: MMM D, YYYY h:mm A
  * Ensure that the setDateTool() function is called first to set the time tool library.
- * @param {string} date date string
- * @param {object} option
- * @param {string} option.locale, default: en
- * @param {string} option.tz, default: timzone
  * @returns formatted date string
  */
-export function formatToDatetime(date, { locale, tz } = {}) {
+export function formatToDatetime(date: string, { locale = 'en', tz }: { locale?: string; tz?: string } = {}) {
   return createDateFormatter('lll')(date, { locale, tz });
 }
 
 export function detectWalletExtension() {
+  // @ts-expect-error Property 'ABT_DEV' does not exist on type 'Window & typeof globalThis'.
   const extension = window?.ABT_DEV || window.ABT;
   if (extension && typeof extension.open === 'function') {
     return extension;
@@ -226,7 +230,19 @@ export function detectWalletExtension() {
   return null;
 }
 
-export function openWebWallet({ webWalletUrl, action = 'login', locale = 'en', url, windowFeatures }) {
+export function openWebWallet({
+  webWalletUrl,
+  action = 'login',
+  locale = 'en',
+  url,
+  windowFeatures,
+}: {
+  webWalletUrl: string;
+  action?: string;
+  locale?: string;
+  url: string;
+  windowFeatures: $TSFixMe;
+}) {
   // web wallet extension
   const extension = detectWalletExtension();
   if (extension) {
@@ -252,7 +268,7 @@ export function openWebWallet({ webWalletUrl, action = 'login', locale = 'en', u
   };
   const windowUrl = `${webWalletUrl}?action=${action}&locale=${locale}&url=${encodeURIComponent(url)}`;
   const mergedWindowFeatures = Object.assign({}, defaultWindowFeatures, windowFeatures);
-  const getWindowWidth = (win) => {
+  const getWindowWidth = (win: Window) => {
     return win.innerWidth || win.document.documentElement.clientWidth || win.document.body.clientWidth;
   };
   // 默认在浏览器右上角弹出窗口
@@ -271,7 +287,7 @@ export function openWebWallet({ webWalletUrl, action = 'login', locale = 'en', u
   window.open(windowUrl, 'targetWindow', strWindowFeatures);
 }
 
-export const getFontSize = (size) => {
+export const getFontSize = (size: string) => {
   // 12px 及以上的 size 有效, 否则返回 inherit
   if (size && Number(size) >= 12) {
     return `${Number(size)}px`;
@@ -280,7 +296,7 @@ export const getFontSize = (size) => {
 };
 
 // 参考: asset-chain @arcblock/did
-export const isEthereumDid = (did) => {
+export const isEthereumDid = (did: string) => {
   const address = did.replace(DID_PREFIX, '');
   // check if it has the basic requirements of an address
   if (!/^(0x)?[0-9a-f]{40}$/i.test(address)) {
@@ -289,13 +305,15 @@ export const isEthereumDid = (did) => {
   return true;
 };
 
-/**
- *
- * @param {string} url 需要处理的 url
- * @param {{imageFilter: 'crop'|'resize'; w?: number; h?: number; r?: 0|90|180|270}} params
- * @returns
- */
-export const appendParams = (url, params) => {
+export const appendParams = (
+  url: string,
+  params: {
+    imageFilter: 'crop' | 'resize';
+    w?: number;
+    h?: number;
+    r?: 0 | 90 | 180 | 270;
+  }
+) => {
   if (!params) {
     return url;
   }
@@ -303,7 +321,7 @@ export const appendParams = (url, params) => {
     // HACK: 如果 url 中带有域名，则 urlInstance.origin 为 url 中的域名；否则，借用当前页面的 location.origin 作为域名来拼接一个 url
     const urlInstance = new URL(url, window.location.origin);
     Object.keys(params).forEach((key) => {
-      urlInstance.searchParams.set(key, params[key]);
+      urlInstance.searchParams.set(key, String(params[key as keyof typeof params]));
     });
     // HACK: 如果前后域名一致，代表前面已经借用了 location.origin，这个时候只需要返回 urlInstance.pathname + urlInstance.search 即可
     if (urlInstance.origin === window.location.origin) {
@@ -315,7 +333,7 @@ export const appendParams = (url, params) => {
   }
 };
 
-export const getUserAvatar = (avatar, size = 48) => {
+export const getUserAvatar = (avatar: string, size = 48) => {
   if (!avatar) {
     return avatar;
   }
@@ -332,14 +350,14 @@ export const getUserAvatar = (avatar, size = 48) => {
 };
 
 export const sleep = (time = 0) => {
-  return new Promise((resolve) => {
+  return new Promise<void>((resolve) => {
     setTimeout(() => {
       resolve();
     }, time);
   });
 };
 
-export const isUrl = (str) => {
+export const isUrl = (str: string) => {
   return /^https?:\/\//.test(str);
 };
 
@@ -348,7 +366,7 @@ export const getVisitorId = () => {
   return localStorage.getItem(visitorIdKey);
 };
 
-export const setVisitorId = (value) => {
+export const setVisitorId = (value: string | null) => {
   if (value === null) {
     localStorage.removeItem(visitorIdKey);
   } else {
@@ -356,13 +374,13 @@ export const setVisitorId = (value) => {
   }
 };
 
-export const getDIDColor = (did) => {
+export const getDIDColor = (did: string) => {
   if (isEthereumDid(did)) {
     const index =
       Uint8Array.from(
         did
           .slice(2)
-          .match(/.{1,2}/g)
+          .match(/.{1,2}/g)!
           .map((pair) => parseInt(pair, 16))
       )
         .slice(0, 8)
@@ -378,17 +396,25 @@ export const getDIDColor = (did) => {
   }
 };
 
+type NestedTranslation = {
+  [key: string]: string | NestedTranslation;
+};
+
+type TranslationsObject = {
+  [locale: string]: NestedTranslation;
+};
+
 /**
  * Retrieves the appropriate translation based on the locale, with fallback options.
- *
- * @param {Object|string} translations - The translations object or string to retrieve translation from.
- * @param {string} locale - The locale to use for retrieving the translation.
- * @param {Object} options - Additional options for fallbackLocale and defaultValue.
- * @param {string} [options.fallbackLocale='en'] - The fallback locale to use if the translation for the specified locale is not found.
- * @param {string} [options.defaultValue='unknown'] - The default value to return if no translation is found.
  * @return {string} The translated string based on the locale, with fallback options if necessary.
  */
-export const getTranslation = (translations, locale, { fallbackLocale = 'en', defaultValue = 'unknown' } = {}) => {
+export const getTranslation = (
+  translations: string | TranslationsObject,
+  locale: string,
+  options: { fallbackLocale?: string; defaultValue?: string } = {}
+) => {
+  const { fallbackLocale = 'en', defaultValue = 'unknown' } = options;
+
   if (typeof translations === 'string') {
     return translations;
   }

package/src/Util/{passport.js → passport.ts}

@@ -1,6 +1,6 @@
 import { getNftBGColor, DEFAULT_COLORS, getNftBGColorFromDid, getSvg } from '@arcblock/nft-display';
 
-export const getPassportColor = (preferredColor, did) => {
+export const getPassportColor = (preferredColor: string, did: string) => {
   let color;
   if (preferredColor === 'default') {
     color = DEFAULT_COLORS['app-passport'];
@@ -13,7 +13,7 @@ export const getPassportColor = (preferredColor, did) => {
   return color;
 };
 
-export const getTextColor = (background) => {
+export const getTextColor = (background: string) => {
   const r = parseInt(background.slice(1, 3), 16);
   const g = parseInt(background.slice(3, 5), 16);
   const b = parseInt(background.slice(5, 7), 16);

package/src/Util/{wallet.js → wallet.ts}

@@ -23,7 +23,7 @@ export const getWebWalletUrl = () => {
 };
 
 // 检查 wallet url protocol 和当前页面地址的 protocol 是否一致
-export const checkSameProtocol = (webWalletUrl) => {
+export const checkSameProtocol = (webWalletUrl: string) => {
   const { protocol } = window.location;
   let walletProtocol = '';
   try {

package/src/WebWalletSWKeeper/index.jsx

@@ -3,9 +3,9 @@ import PropTypes from 'prop-types';
 import useIdle from 'react-use/lib/useIdle';
 import { useLocalStorageState } from 'ahooks';
 import useBrowser from '@arcblock/react-hooks/lib/useBrowser';
-import { detectWalletExtension } from '@arcblock/ux/lib/Util';
 
 import { getWebWalletUrl, checkSameProtocol } from '../Util/wallet';
+import { detectWalletExtension } from '../Util';
 
 // 默认最大空闲时间: 30min
 const DEFAULT_MAX_IDLE_TIME = 1000 * 60 * 30;

package/src/global.d.ts

@@ -0,0 +1,13 @@
+declare module '@arcblock/did-motif';
+
+type Blocklet = import('./type').Blocklet;
+
+interface Window {
+  blocklet?: Blocklet;
+  env?: Blocklet;
+}
+
+declare module globalThis {
+  var blocklet: Blocklet;
+  var env: Blocklet;
+}

package/src/{index.js → index.ts}

@@ -24,9 +24,9 @@ import DidLogo from './DidLogo';
 import Tabs from './Tabs';
 import Tag from './Tag';
 import TextCollapse from './TextCollapse';
-import Theme from './Theme';
+import * as Theme from './Theme';
 import Toast from './Toast';
-import Util from './Util';
+import * as Util from './Util';
 import Video from './Video';
 import WebWalletSWKeeper from './WebWalletSWKeeper';
 import WalletAction from './Wallet/Action';

package/src/type.d.ts

@@ -1 +1,31 @@
-declare module '@arcblock/did-motif';
+export type $TSFixMe = any;
+
+export type Blocklet = {
+  appId: string;
+  appIds: string[];
+  appPid: string;
+  appName: string;
+  appDescription: string;
+  appLogo: string;
+  appLogoRect: string;
+  appUrl: string;
+  isComponent: boolean;
+  prefix: string;
+  groupPrefix: string;
+  pageGroup: string;
+  version: string;
+  mode: string;
+  tenantMode: 'single' | 'multiple';
+  theme: TTheme;
+  navigation: TNavigation[];
+  preferences: Record<string, any>;
+  languages: {
+    code: string;
+    name: string;
+  }[];
+  passportColor: string;
+  componentMountPoints: TComponent[];
+  alsoKnownAs: string[];
+  trustedFactories: string[];
+  [x: string]: any;
+};

package/src/Center/index.jsx

@@ -1,41 +0,0 @@
-import PropTypes from 'prop-types';
-
-import { styled } from '../Theme';
-
-/**
- * @param {Object} props 属性
- * @param {*} props.children 子元素
- * @param {'screen'|'parent'} [props.relative='screen'] 容器相对尺寸，默认相对屏幕(screen)，可设置为父容器(parent)
- * @returns react component element
- */
-export default function Center({ children, relative }) {
-  let style = {};
-
-  if (relative === 'parent') {
-    style = {
-      width: '100%',
-      height: '100%',
-    };
-  }
-
-  return <Div style={style}>{children}</Div>;
-}
-
-const Div = styled('div')`
-  flex: 1;
-  width: 100vw;
-  height: 100vh;
-
-  display: flex;
-  justify-content: center;
-  align-items: center;
-`;
-
-Center.propTypes = {
-  children: PropTypes.any.isRequired,
-  relative: PropTypes.string,
-};
-
-Center.defaultProps = {
-  relative: 'screen',
-};