@arcblock/ux 2.10.65 → 2.10.67

package/lib/Util/constant.d.ts

@@ -1,33 +1,33 @@
-export const DEFAULT_TIMEOUT: number;
-export const DEFAULT_WINDOW_TIMEOUT: number;
-export const WELLKNOWN_SERVICE_PATH_PREFIX: "/.well-known/service";
-export const AUTH_SERVICE_PREFIX: "/.well-known/service";
-export const SESSION_TOKEN_STORAGE_KEY: "login_token";
-export const REFRESH_TOKEN_STORAGE_KEY: "refresh_token";
-export const RELAY_SOCKET_PREFIX: "/.well-known/service";
-export const API_DID_PREFIX: "/api/did";
-export const DASHBOARD_URL: "/.well-known/service/admin";
-export const PROFILE_URL: "/.well-known/service/user";
-export const NAVIGATION_URL: "/.well-known/service/admin/navigation";
-export const DID_PREFIX: "did:abt:";
-export namespace PASSPORT_STATUS {
-    let VALID: string;
-    let REVOKED: string;
-}
-export namespace LOGIN_PROVIDER {
-    let AUTH0: string;
-    let APPLE: string;
-    let GITHUB: string;
-    let GOOGLE: string;
-    let WALLET: string;
-    let NFT: string;
-}
-export const LOGIN_PROVIDER_NAME: {
+export declare const DEFAULT_TIMEOUT: number;
+export declare const DEFAULT_WINDOW_TIMEOUT: number;
+export declare const WELLKNOWN_SERVICE_PATH_PREFIX = "/.well-known/service";
+export declare const AUTH_SERVICE_PREFIX = "/.well-known/service";
+export declare const SESSION_TOKEN_STORAGE_KEY = "login_token";
+export declare const REFRESH_TOKEN_STORAGE_KEY = "refresh_token";
+export declare const RELAY_SOCKET_PREFIX = "/.well-known/service";
+export declare const API_DID_PREFIX = "/api/did";
+export declare const DASHBOARD_URL = "/.well-known/service/admin";
+export declare const PROFILE_URL = "/.well-known/service/user";
+export declare const NAVIGATION_URL = "/.well-known/service/admin/navigation";
+export declare const DID_PREFIX = "did:abt:";
+export declare const PASSPORT_STATUS: {
+    VALID: string;
+    REVOKED: string;
+};
+export declare const LOGIN_PROVIDER: {
+    AUTH0: string;
+    APPLE: string;
+    GITHUB: string;
+    GOOGLE: string;
+    WALLET: string;
+    NFT: string;
+};
+export declare const LOGIN_PROVIDER_NAME: {
     [x: string]: string;
 };
-export namespace OAUTH_PROVIDER {
-    let auth0: string;
-    let apple: string;
-    let github: string;
-    let google: string;
-}
+export declare const OAUTH_PROVIDER: {
+    auth0: string;
+    apple: string;
+    github: string;
+    google: string;
+};

package/lib/Util/deprecate.d.ts

@@ -1,5 +1,7 @@
-export function warn(name: any, alternative: any): void;
-export function withDeprecated(Component: any, { name, alternative }: {
-    name: any;
-    alternative: any;
-}): (props: any) => import("react/jsx-runtime").JSX.Element;
+import { ComponentType } from 'react';
+declare const warn: (name: string, alternative?: string) => void;
+declare const withDeprecated: <P extends object>(Component: ComponentType<P>, { name, alternative }: {
+    name: string;
+    alternative?: string;
+}) => (props: P) => import("react/jsx-runtime").JSX.Element;
+export { warn, withDeprecated };

package/lib/Util/federated.d.ts

@@ -1,8 +1,8 @@
-export function getMaster(blocklet?: any): any;
-export function getConfig(blocklet?: any): any;
-export function getFederatedEnabled(blocklet?: any): boolean;
-export function getSourceAppPid(blocklet?: any): any;
-export function getFederatedApp(blocklet?: any): {
+export declare function getMaster(blocklet?: import("../type").Blocklet): any;
+export declare function getConfig(blocklet?: import("../type").Blocklet): any;
+export declare function getFederatedEnabled(blocklet?: import("../type").Blocklet): boolean;
+export declare function getSourceAppPid(blocklet?: import("../type").Blocklet): any;
+export declare function getFederatedApp(blocklet?: import("../type").Blocklet): {
     appId: any;
     appName: any;
     appDescription: any;
@@ -13,22 +13,22 @@ export function getFederatedApp(blocklet?: any): {
     sourceAppPid: any;
     provider: string;
 } | null;
-export function getCurrentApp(blocklet?: any): {
-    appId: any;
-    appName: any;
-    appDescription: any;
-    appLogo: any;
-    appPid: any;
-    appUrl: any;
+export declare function getCurrentApp(blocklet?: import("../type").Blocklet): {
+    appId: string;
+    appName: string;
+    appDescription: string;
+    appLogo: string;
+    appPid: string;
+    appUrl: string;
     currentAppUrl: string | undefined;
-    version: any;
+    version: string;
     sourceAppPid: null;
     provider: string;
     type?: undefined;
 } | {
-    appId: any;
-    appName: any;
-    appDescription: any;
+    appId: string;
+    appName: string;
+    appDescription: string;
     appUrl: any;
     currentAppUrl: string;
     sourceAppPid: null;
@@ -38,7 +38,7 @@ export function getCurrentApp(blocklet?: any): {
     appPid?: undefined;
     version?: undefined;
 } | null;
-export function getApps(blocklet: any): ({
+export declare function getApps(blocklet: Blocklet): ({
     appId: any;
     appName: any;
     appDescription: any;
@@ -49,9 +49,9 @@ export function getApps(blocklet: any): ({
     sourceAppPid: any;
     provider: string;
 } | {
-    appId: any;
-    appName: any;
-    appDescription: any;
+    appId: string;
+    appName: string;
+    appDescription: string;
     appUrl: any;
     currentAppUrl: string;
     sourceAppPid: null;
@@ -61,4 +61,4 @@ export function getApps(blocklet: any): ({
     appPid?: undefined;
     version?: undefined;
 })[];
-export function getBlockletData(appUrl: any): Promise<any>;
+export declare function getBlockletData(appUrl: string): Promise<any>;

package/lib/Util/federated.js

@@ -50,7 +50,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;

package/lib/Util/index.d.ts

@@ -1,81 +1,80 @@
-export function parseQuery(str: any): any;
-export function stringifyQuery(params?: {}): string;
-/**
- * @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?: number): {
-    expires: number;
-    path: any;
-    domain: any;
-    sameSite: any;
-    secure: boolean;
-};
-export function mergeProps(props: any, component: any, jsonAttrs?: any[]): any;
-export function getCopyright(startYear?: number): string;
+import type { $TSFixMe } from '../type';
+declare let dateTool: $TSFixMe | null;
+export declare function parseQuery(str: string): Record<string, string | boolean>;
+export declare function stringifyQuery(params?: {}): string;
+export declare function getCookieOptions(expireInDays?: number | {
+    expireInDays: number;
+    path?: string;
+    domain?: string;
+    returnDomain?: boolean;
+    sameSite?: Cookies.CookieAttributes['sameSite'];
+    secure?: boolean;
+}): import("js-cookie").CookieAttributes;
+export declare const getColor: (props: $TSFixMe) => any;
+export declare const getBackground: (props: $TSFixMe) => any;
+export declare function mergeProps<P extends object>(props: Record<string, any>, component: React.ComponentType<P>, jsonAttrs?: string[]): Record<string, any>;
+export declare function getCopyright(startYear?: number): string;
+export declare const getTimezone: () => string;
+export declare const str2color: (str: string) => string;
+export declare const formatUptime: (uptime: number) => string;
 /**
  * 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: any): void;
-export function getDateTool(): any;
+export declare function setDateTool(tool: typeof dateTool): void;
+export declare function getDateTool(): any;
 /**
  * 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: string, { locale, tz }?: {
-    locale: string;
-    tz: string;
+export declare function formatToDate(date: string, { locale, tz }?: {
+    locale?: string;
+    tz?: string;
 }): any;
 /**
  * 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: string, { locale, tz }?: {
-    locale: string;
-    tz: string;
+export declare function formatToDatetime(date: string, { locale, tz }?: {
+    locale?: string;
+    tz?: string;
 }): any;
-export function detectWalletExtension(): any;
-export function openWebWallet({ webWalletUrl, action, locale, url, windowFeatures }: {
-    webWalletUrl: any;
-    action?: string | undefined;
-    locale?: string | undefined;
-    url: any;
-    windowFeatures: any;
+export declare function detectWalletExtension(): any;
+export declare function openWebWallet({ webWalletUrl, action, locale, url, windowFeatures, }: {
+    webWalletUrl: string;
+    action?: string;
+    locale?: string;
+    url: string;
+    windowFeatures: $TSFixMe;
 }): void;
-export function getColor(props: any): any;
-export function getBackground(props: any): any;
-export function getTimezone(): string;
-export function str2color(str: any): string;
-export function formatUptime(uptime: any): string;
-export function getFontSize(size: any): string;
-export function isEthereumDid(did: any): boolean;
-export function appendParams(url: string, params: {
+export declare const getFontSize: (size: string) => string;
+export declare const isEthereumDid: (did: string) => boolean;
+export declare const appendParams: (url: string, params: {
     imageFilter: "crop" | "resize";
     w?: number;
     h?: number;
     r?: 0 | 90 | 180 | 270;
-}): string;
-export function getUserAvatar(avatar: any, size?: number): any;
-export function sleep(time?: number): Promise<any>;
-export function isUrl(str: any): boolean;
-export function getVisitorId(): string | null;
-export function setVisitorId(value: any): void;
-export function getDIDColor(did: any): any;
-export function getTranslation(translations: Object | string, locale: string, { fallbackLocale, defaultValue }?: {
-    fallbackLocale?: string | undefined;
-    defaultValue?: string | undefined;
-}): string;
+}) => string;
+export declare const getUserAvatar: (avatar: string, size?: number) => string;
+export declare const sleep: (time?: number) => Promise<void>;
+export declare const isUrl: (str: string) => boolean;
+export declare const getVisitorId: () => string | null;
+export declare const setVisitorId: (value: string | null) => void;
+export declare const getDIDColor: (did: string) => any;
+type NestedTranslation = {
+    [key: string]: string | NestedTranslation;
+};
+type TranslationsObject = {
+    [locale: string]: NestedTranslation;
+};
+/**
+ * Retrieves the appropriate translation based on the locale, with fallback options.
+ * @return {string} The translated string based on the locale, with fallback options if necessary.
+ */
+export declare const getTranslation: (translations: string | TranslationsObject, locale: string, options?: {
+    fallbackLocale?: string;
+    defaultValue?: string;
+}) => string;
+export {};

package/lib/Util/index.js

@@ -14,19 +14,12 @@ export function parseQuery(str) {
 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;
+  let opts = expireInDays;
+  if (typeof opts === 'number') {
+    opts = {
+      expireInDays: opts
+    };
   }
   if (opts.path === undefined) {
     opts.path = '/';
@@ -120,13 +113,13 @@ export const formatUptime = uptime => {
   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) {
   dateTool = tool;
@@ -137,7 +130,7 @@ export function getDateTool() {
 const createDateFormatter = format => (date, {
   locale,
   tz
-}) => {
+} = {}) => {
   if (dateTool === null) {
     throw new Error('call setDateTool to set the date tool library, such as: setDateTool(dayjs)');
   }
@@ -157,14 +150,10 @@ const createDateFormatter = format => (date, {
 /**
  * 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,
+  locale = 'en',
   tz
 } = {}) {
   return createDateFormatter('ll')(date, {
@@ -176,14 +165,10 @@ export function formatToDate(date, {
 /**
  * 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,
+  locale = 'en',
   tz
 } = {}) {
   return createDateFormatter('lll')(date, {
@@ -192,6 +177,7 @@ export function formatToDatetime(date, {
   });
 }
 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;
@@ -261,13 +247,6 @@ 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) => {
   if (!params) {
     return url;
@@ -276,7 +255,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]));
     });
     // HACK: 如果前后域名一致，代表前面已经借用了 location.origin，这个时候只需要返回 urlInstance.pathname + urlInstance.search 即可
     if (urlInstance.origin === window.location.origin) {
@@ -333,21 +312,15 @@ export const getDIDColor = did => {
     return null;
   }
 };
-
 /**
  * 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, locale, options = {}) => {
+  const {
+    fallbackLocale = 'en',
+    defaultValue = 'unknown'
+  } = options;
   if (typeof translations === 'string') {
     return translations;
   }

package/lib/Util/passport.d.ts

@@ -1,9 +1,9 @@
-export function getPassportColor(preferredColor: any, did: any): {
+export declare const getPassportColor: (preferredColor: string, did: string) => {
     start: string;
     end: string;
 };
-export function getTextColor(background: any): "#111" | "#EEE";
-export function createPassportSvg({ issuer, title, issuerDid, issuerAvatarUrl, ownerDid, ownerAvatarUrl, preferredColor, revoked, isDataUrl, width, height, }: {
+export declare const getTextColor: (background: string) => "#111" | "#EEE";
+export declare const createPassportSvg: ({ issuer, title, issuerDid, issuerAvatarUrl, ownerDid, ownerAvatarUrl, preferredColor, revoked, isDataUrl, width, height, }: {
     issuer?: string | undefined;
     title?: string | undefined;
     issuerDid?: string | undefined;
@@ -15,8 +15,8 @@ export function createPassportSvg({ issuer, title, issuerDid, issuerAvatarUrl, o
     isDataUrl?: boolean | undefined;
     width?: string | undefined;
     height?: string | undefined;
-}): string;
-export function createKycSvg({ issuer, title, issuerDid, issuerAvatarUrl, ownerDid, ownerName, ownerAvatarUrl, preferredColor, type, revoked, isDataUrl, width, height, }: {
+}) => string;
+export declare const createKycSvg: ({ issuer, title, issuerDid, issuerAvatarUrl, ownerDid, ownerName, ownerAvatarUrl, preferredColor, type, revoked, isDataUrl, width, height, }: {
     issuer?: string | undefined;
     title?: string | undefined;
     issuerDid?: string | undefined;
@@ -30,4 +30,4 @@ export function createKycSvg({ issuer, title, issuerDid, issuerAvatarUrl, ownerD
     isDataUrl?: boolean | undefined;
     width?: string | undefined;
     height?: string | undefined;
-}): string;
+}) => string;

package/lib/Util/wallet.d.ts

@@ -1,3 +1,15 @@
-export const providerName: "wallet_url";
-export function getWebWalletUrl(): any;
-export function checkSameProtocol(webWalletUrl: any): boolean;
+export declare const providerName = "wallet_url";
+/**
+ * 获取 web wallet url, 常用于为 did connect 组件传递 webWalletUrl 参数,
+ * 更明确的说, 这里获取的应该是 **default web wallet url**,
+ * 如果用户使用自定义的 web wallet url, 不应该使用该方法, 应该显式的将自定义的 web wallet url 传递给 did connect 组件
+ * (参考: https://github.com/blocklet/ocap-playground/issues/98)
+ *
+ * 获取优先级:
+ * - localStorage  使用 provider 注册
+ * - window.env.webWalletUrl
+ * - window.blocklet.webWalletUrl
+ * - production web wallet url
+ */
+export declare const getWebWalletUrl: () => any;
+export declare const checkSameProtocol: (webWalletUrl: string) => boolean;

package/lib/WebWalletSWKeeper/index.js

@@ -4,8 +4,8 @@ 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/lib/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/lib/index.d.ts

@@ -16,15 +16,17 @@ import Footer from './Footer';
 import Icon from './Icon';
 import LocaleSelector from './Locale/selector';
 import Logo from './Logo';
-import Tabs from './Tabs';
 import RelativeTime from './RelativeTime';
 import SessionManager from './SessionManager';
 import Datatable from './Datatable';
 import Dialog from './Dialog';
 import DidLogo from './DidLogo';
+import Tabs from './Tabs';
 import Tag from './Tag';
 import TextCollapse from './TextCollapse';
+import * as Theme from './Theme';
 import Toast from './Toast';
+import * as Util from './Util';
 import Video from './Video';
 import WebWalletSWKeeper from './WebWalletSWKeeper';
 import WalletAction from './Wallet/Action';
@@ -33,4 +35,4 @@ import WechatPrompt from './WechatPrompt';
 import withTheme from './withTheme';
 import withTracker from './withTracker';
 import Img from './Img';
-export { ActionButton, ActivityIndicator, Address, Alert, AnimationWaiter, Async, Avatar, Badge, Button, ClickToCopy, CodeBlock, ContactForm, CountDown, Earth, Footer, Icon, LocaleSelector, Logo, Tabs, RelativeTime, SessionManager, Datatable, Dialog, DidLogo, Tag, TextCollapse, Theme, Toast, Util, Video, WebWalletSWKeeper, WalletAction, WalletDownload, WechatPrompt, withTheme, withTracker, Img };
+export { ActionButton, ActivityIndicator, Address, Alert, AnimationWaiter, Async, Avatar, Badge, Button, ClickToCopy, CodeBlock, ContactForm, CountDown, Earth, Footer, Icon, LocaleSelector, Logo, Tabs, RelativeTime, SessionManager, Datatable, Dialog, DidLogo, Tag, TextCollapse, Theme, Toast, Util, Video, WebWalletSWKeeper, WalletAction, WalletDownload, WechatPrompt, withTheme, withTracker, Img, };

package/lib/index.js

@@ -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/lib/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/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@arcblock/ux",
-  "version": "2.10.65",
+  "version": "2.10.67",
   "description": "Common used react components for arcblock products",
   "keywords": [
     "react",
@@ -64,12 +64,12 @@
     "react": ">=18.2.0",
     "react-router-dom": ">=6.22.3"
   },
-  "gitHead": "fd444285e65e55b45ceaf07b43dfa752c765f6d3",
+  "gitHead": "6832c5e23016283254d930ae879573fbb07710b2",
   "dependencies": {
     "@arcblock/did-motif": "^1.1.13",
-    "@arcblock/icons": "^2.10.65",
-    "@arcblock/nft-display": "^2.10.65",
-    "@arcblock/react-hooks": "^2.10.65",
+    "@arcblock/icons": "^2.10.67",
+    "@arcblock/nft-display": "^2.10.67",
+    "@arcblock/react-hooks": "^2.10.67",
     "@babel/plugin-syntax-dynamic-import": "^7.8.3",
     "@fontsource/inter": "^5.0.16",
     "@fontsource/ubuntu-mono": "^5.0.18",