@arcblock/ux 3.4.14 → 3.5.0

package/src/global.d.ts

@@ -1,28 +0,0 @@
-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?react' {
-  import React from 'react';
-  const SVG: React.FC<React.SVGProps<SVGSVGElement>>;
-  export default SVG;
-}
-
-declare module '*.png' {
-  export default string;
-}
-
-type Blocklet = import('./type').Blocklet;
-
-interface Window {
-  blocklet?: Blocklet;
-  env?: Blocklet;
-}
-
-declare module globalThis {
-  var blocklet: Blocklet;
-  var env: Blocklet;
-}

package/src/hooks/use-blocklet-logo.tsx

@@ -1,32 +0,0 @@
-import { type Breakpoint } from '@mui/material';
-import { type ThemeOptions } from '@blocklet/theme';
-import { useCreation } from 'ahooks';
-import { useTheme } from '../Theme';
-import useMobile from './use-mobile';
-
-export default function useBlockletLogo({
-  key = 'sm',
-  meta = {},
-  theme: themeOverrides = {},
-  square,
-}: { key?: number | Breakpoint; meta?: any; theme?: ThemeOptions; square?: boolean } = {}) {
-  const isMobileDevice = useMobile({ key });
-  const theme = useTheme();
-
-  const mode = useCreation(() => {
-    return themeOverrides?.palette?.mode || theme.palette.mode;
-  }, [theme, themeOverrides]);
-
-  const finalAppLogo = useCreation<string>(() => {
-    const { appLogo, appLogoDark, appLogoRect, appLogoRectDark } = Object.assign({}, window.blocklet ?? {}, meta);
-    const isDark = mode === 'dark';
-
-    const squareLogo = (isDark ? appLogoDark : appLogo) || appLogo;
-    // 深色模式尽可能优先使用深色图标
-    const rectLogo = (isDark ? appLogoRectDark || appLogoDark : appLogoRect) || appLogoRect;
-
-    return isMobileDevice || square ? squareLogo : rectLogo || squareLogo || '';
-  }, [mode, meta, isMobileDevice, square]);
-
-  return finalAppLogo;
-}

package/src/hooks/use-clock.tsx

@@ -1,62 +0,0 @@
-import { useState, useEffect, useCallback } from 'react';
-import dayjs from 'dayjs';
-import 'dayjs/locale/zh-cn';
-import 'dayjs/locale/en';
-import utc from 'dayjs/plugin/utc';
-import timezonePlugin from 'dayjs/plugin/timezone';
-import localizedFormat from 'dayjs/plugin/localizedFormat';
-
-import { formatToDatetime } from '../Util';
-
-dayjs.extend(utc);
-dayjs.extend(timezonePlugin);
-dayjs.extend(localizedFormat);
-
-const currentTimezone = dayjs.tz.guess();
-
-// 获取时间段
-const getTimePhase = (hour: number) => {
-  if (hour >= 0 && hour < 6) return { phase: 'dawn', icon: '🌒' }; // 凌晨 00:00-05:59
-  if (hour >= 6 && hour < 12) return { phase: 'morning', icon: '🌞' }; // 上午 06:00-11:59
-  if (hour >= 12 && hour < 18) return { phase: 'afternoon', icon: '🌞' }; // 下午 12:00-17:59
-  return { phase: 'night', icon: '🌒' }; // 晚上 18:00-23:59
-};
-
-export default function useClock(timezone = currentTimezone, locale = 'zh') {
-  const getLatestTimeInfo = useCallback(() => {
-    const currentLocale = locale === 'zh' ? 'zh-cn' : 'en';
-    const localeOption = locale === 'zh' ? 'zh-cn' : 'en-us';
-    dayjs.locale(currentLocale);
-
-    const now = dayjs().tz(timezone);
-    const hour = now.hour();
-    const { phase, icon } = getTimePhase(hour);
-
-    return {
-      formattedTime: now.format('LT'),
-      fullDateTime: formatToDatetime(now.toDate(), { tz: timezone, locale: localeOption }),
-      phase,
-      icon,
-      rawTime: now,
-    };
-  }, [timezone, locale]);
-
-  const [timeInfo, setTimeInfo] = useState(getLatestTimeInfo());
-
-  useEffect(() => {
-    // 立即更新一次，确保初始状态是最新的
-    setTimeInfo(getLatestTimeInfo());
-
-    // 设置定时器
-    const timerId = setInterval(() => {
-      setTimeInfo(getLatestTimeInfo());
-    }, 6000);
-
-    // 清理函数
-    return () => {
-      clearInterval(timerId);
-    };
-  }, [timezone, locale, getLatestTimeInfo]);
-
-  return timeInfo;
-}

package/src/hooks/use-location-state.tsx

@@ -1,117 +0,0 @@
-/* eslint-disable no-restricted-globals */
-import { useEffect, useState } from 'react';
-
-type UrlChangeCallback = (location: Location) => void;
-
-const subscribers = new Set<UrlChangeCallback>();
-let patched = false;
-let lastHref = '';
-
-// 检查是否在浏览器环境中
-const isBrowser = typeof window !== 'undefined';
-
-function notifyIfChanged() {
-  if (!isBrowser) return;
-
-  const currentHref = window.location.href;
-  if (currentHref !== lastHref) {
-    lastHref = currentHref;
-    subscribers.forEach((cb) => cb(window.location));
-  }
-}
-
-function patchHistoryOnce() {
-  if (!isBrowser || patched) return;
-  patched = true;
-
-  const originalPushState = history.pushState;
-  history.pushState = function patchedPushState(...args) {
-    const result = originalPushState.apply(this, args);
-    notifyIfChanged();
-    return result;
-  };
-
-  const originalReplaceState = history.replaceState;
-  history.replaceState = function patchedReplaceState(...args) {
-    const result = originalReplaceState.apply(this, args);
-    notifyIfChanged();
-    return result;
-  };
-
-  window.addEventListener('popstate', notifyIfChanged);
-  window.addEventListener('hashchange', notifyIfChanged);
-}
-
-function subscribeUrlChange(callback: UrlChangeCallback): () => void {
-  if (isBrowser) {
-    patchHistoryOnce();
-    subscribers.add(callback);
-  }
-  return () => {
-    subscribers.delete(callback);
-  };
-}
-
-export interface LocationLike {
-  href: string;
-  origin: string;
-  host: string;
-  hostname: string;
-  port: string;
-  protocol: string;
-  pathname: string;
-  search: string;
-  hash: string;
-}
-
-function extractLocation(location: Location): LocationLike {
-  return {
-    href: location.href,
-    origin: location.origin,
-    host: location.host,
-    hostname: location.hostname,
-    pathname: location.pathname,
-    port: location.port,
-    protocol: location.protocol,
-    search: location.search,
-    hash: location.hash,
-  };
-}
-
-const defaultLocation: LocationLike = {
-  href: '',
-  origin: '',
-  host: '',
-  hostname: '',
-  port: '',
-  protocol: '',
-  pathname: '',
-  search: '',
-  hash: '',
-};
-
-/**
- * 监听 location 变化，返回当前 location 状态
- */
-export function useLocationState(): LocationLike {
-  const [location, setLocation] = useState<LocationLike>(() => {
-    if (!isBrowser) {
-      return defaultLocation;
-    }
-    return extractLocation(window.location);
-  });
-
-  useEffect(() => {
-    if (!isBrowser) {
-      return undefined;
-    }
-
-    return subscribeUrlChange((newLocation) => {
-      setLocation(extractLocation(newLocation));
-    });
-  }, []);
-
-  return location;
-}
-
-export default useLocationState;

package/src/hooks/use-mobile.tsx

@@ -1,6 +0,0 @@
-import { Breakpoint, useTheme, useMediaQuery } from '@mui/material';
-
-export default function useMobile({ key = 'sm' }: { key?: number | Breakpoint } = {}) {
-  const theme = useTheme();
-  return useMediaQuery(theme.breakpoints.down(key));
-}

package/src/index.ts

@@ -1,79 +0,0 @@
-import ActionButton from './ActionButton';
-import ActivityIndicator from './ActivityIndicator';
-import Address from './Address';
-import Alert from './Alert';
-import AnimationWaiter from './AnimationWaiter';
-import Async from './Async';
-import Avatar from './Avatar';
-import Badge from './Badge';
-import Button from './Button';
-import ClickToCopy from './ClickToCopy';
-import CodeBlock from './CodeBlock';
-import ContactForm from './ContactForm';
-import CountDown from './CountDown';
-import Earth from './Earth';
-import Footer from './Footer';
-import Icon from './Icon';
-import LocaleSelector from './Locale/selector';
-import Logo from './Logo';
-import RelativeTime from './RelativeTime';
-import SessionManager from './SessionManager';
-import Datatable from './Datatable';
-import Dialog from './Dialog';
-import DIDLogo from './DIDLogo';
-import SocialShare from './SocialShare';
-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';
-import WalletDownload from './Wallet/Download';
-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,
-  SocialShare,
-  Tag,
-  TextCollapse,
-  Theme,
-  Toast,
-  Util,
-  Video,
-  WebWalletSWKeeper,
-  WalletAction,
-  WalletDownload,
-  WechatPrompt,
-  withTheme,
-  withTracker,
-  Img,
-};

package/src/type.d.ts

@@ -1,44 +0,0 @@
-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[];
-  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: {
-    prefer?: 'light' | 'dark' | 'system';
-    light: Theme;
-    dark: Theme;
-  };
-  navigation: $TSFixMe[];
-  preferences: Record<string, any>;
-  languages: {
-    code: string;
-    name: string;
-  }[];
-  passportColor: string;
-  componentMountPoints: $TSFixMe[];
-  alsoKnownAs: string[];
-  trustedFactories: string[];
-  [x: string]: any;
-};

package/src/withTheme/index.tsx

@@ -1,72 +0,0 @@
-import { useEffect } from 'react';
-import { Global, css } from '@emotion/react';
-import { CssBaseline, Breakpoint, type PaletteMode, type PaletteOptions } from '@mui/material';
-import { TypographyStyleOptions } from '@mui/material/styles/createTypography';
-
-import { createTheme, ThemeProvider } from '../Theme';
-
-function withTheme<P extends object>(
-  Component: React.ComponentType<P>,
-  {
-    mode = 'light',
-    pageWidth = 'md',
-    palette,
-    typography,
-  }: { mode?: PaletteMode; pageWidth?: Breakpoint; palette?: PaletteOptions; typography?: TypographyStyleOptions } = {}
-) {
-  // @ts-expect-error
-  const theme = createTheme({ mode, pageWidth, palette, typography });
-
-  const color = theme.typography.color.main;
-  const globalStyles = css`
-    font-family: ${theme.typography.fontFamily};
-    color: ${color};
-
-    a,
-    a:hover,
-    a:active {
-      text-decoration: none;
-      color: ${theme.palette.primary.dark};
-    }
-
-    a:hover {
-      color: ${theme.palette.primary.main};
-    }
-
-    .section--latest-post {
-      p:last-of-type {
-        margin: 0;
-      }
-    }
-
-    .has-scrolled {
-      .section--footnotes {
-        position: static !important;
-        transition-property: background-color;
-        transition-duration: 600ms;
-        transition-timing-function: ease;
-        .footnote__title {
-          color: #fff;
-        }
-      }
-    }
-  `;
-
-  return function WithTheme(props: P) {
-    useEffect(() => {
-      const jssStyles = document.querySelector('#jss-server-side');
-      if (jssStyles && jssStyles.parentNode) {
-        jssStyles.parentNode.removeChild(jssStyles);
-      }
-    }, []);
-    return (
-      <ThemeProvider theme={theme}>
-        <CssBaseline />
-        <Global styles={globalStyles} />
-        <Component {...props} />
-      </ThemeProvider>
-    );
-  };
-}
-
-export default withTheme;

package/src/withTracker/README.md

@@ -1,37 +0,0 @@
-# withTracker
-
-Add google analytics reporting to your application.
-
-## Usage
-
-### Installation
-
-```bash
-yarn add @arcblock/ux
-```
-
-### Configuration & Usage
-
-In your application entry file
-
-```javascript
-import React from 'react';
-import withTracker from '@arcblock/ux/lib/withTracker';
-import { BrowserRouter as Router } from 'react-router-dom';
-
-const App = () => <p>My awesome application</p>;
-const TrackedApp = withTracker(App);
-
-export default function WrappedApp() {
-  // While the blocklet is deploy to a sub path, this will be work properly.
-  const basename = window?.blocklet?.prefix || '/';
-
-  return (
-    <Router basename={basename}>
-      <TrackedApp />
-    </Router>
-  );
-}
-```
-
-Then you can use `window.trackPage(path, title)` and `window.trackEvent(category, action, label, value)` to track page views and events.

package/src/withTracker/action/bind-wallet.tsx

@@ -1,17 +0,0 @@
-import type { LiteralUnion } from 'type-fest';
-
-export interface BindWalletEvent {
-  action: 'bindWalletSuccess' | 'bindWalletFailed';
-  provider: LiteralUnion<'wallet' | 'apple' | 'github' | 'google' | 'email' | 'twitter' | 'passkey', string>;
-}
-
-export interface BindWalletSuccessEvent extends BindWalletEvent {
-  action: 'bindWalletSuccess';
-  success: true;
-}
-
-export interface BindWalletFailedEvent extends BindWalletEvent {
-  action: 'bindWalletFailed';
-  success: false;
-  errorMessage: string;
-}

package/src/withTracker/action/login.tsx

@@ -1,18 +0,0 @@
-import type { LiteralUnion } from 'type-fest';
-
-export interface LoginEvent {
-  action: 'loginSuccess' | 'loginFailed';
-  provider: LiteralUnion<'wallet' | 'apple' | 'github' | 'google' | 'email' | 'twitter' | 'passkey', string>;
-  success: boolean;
-}
-
-export interface LoginSuccessEvent extends LoginEvent {
-  action: 'loginSuccess';
-  success: true;
-}
-
-export interface LoginFailedEvent extends LoginEvent {
-  action: 'loginFailed';
-  success: false;
-  errorMessage: string;
-}

package/src/withTracker/action/pay.tsx

@@ -1,14 +0,0 @@
-export interface PayEvent {
-  action: 'paySuccess' | 'payFailed';
-  checkoutSessionMode: string;
-  success: boolean;
-}
-
-export interface PaySuccessEvent extends PayEvent {
-  success: true;
-}
-
-export interface PayFailedEvent extends PayEvent {
-  success: false;
-  errorMessage: string;
-}

package/src/withTracker/action/switch-passport.tsx

@@ -1,20 +0,0 @@
-export interface SwitchPassportEvent {
-  action: 'switchPassportSuccess' | 'switchPassportFailed';
-  success: boolean;
-}
-
-export interface SwitchPassportSuccessEvent extends SwitchPassportEvent {
-  success: true;
-  /**
-   *
-   * @example guest -> admin
-   * @type {string}
-   * @memberof SwitchPassportEvent
-   */
-  change: string;
-}
-
-export interface SwitchPassportFailedEvent extends SwitchPassportEvent {
-  success: false;
-  errorMessage: string;
-}

package/src/withTracker/constant/index.tsx

@@ -1,3 +0,0 @@
-export const GA_LAST_LOGIN_METHOD = 'ga-last-login-method';
-export const GA_LAST_ROLE = 'ga-last-role';
-export const GA_LAST_SOURCE_PROVIDER = 'ga-last-source-provider';

package/src/withTracker/env.tsx

@@ -1 +0,0 @@
-export const googleAnalyticsMeasurementId: string = window.blocklet?.GA_MEASUREMENT_ID || '';

package/src/withTracker/error_boundary.jsx

@@ -1,34 +0,0 @@
-/* eslint-disable import/no-unresolved */
-import { Component } from 'react';
-import * as Sentry from '@sentry/browser';
-
-import Alert from '../Alert';
-
-export default class ErrorBoundary extends Component {
-  constructor(props) {
-    super(props);
-    this.state = { error: null };
-  }
-
-  componentDidCatch(error, info) {
-    this.setState({ error });
-
-    Sentry.withScope((scope) => {
-      scope.setExtras(info);
-      Sentry.captureException(error);
-    });
-  }
-
-  render() {
-    if (this.state.error) {
-      return (
-        <Alert type="error" variant="icon">
-          Oops! We encountered an error, please try reload this application.
-        </Alert>
-      );
-    }
-
-    // eslint-disable-next-line react/prop-types
-    return this.props.children;
-  }
-}

package/src/withTracker/index.tsx

@@ -1,50 +0,0 @@
-import { useLocation } from 'react-router-dom';
-import { useMount, useDeepCompareEffect } from 'ahooks';
-import ReactGA from 'react-ga4';
-import { googleAnalyticsMeasurementId } from './env';
-
-let isInitialized = false;
-
-const initializeGA = () => {
-  if (googleAnalyticsMeasurementId && !isInitialized) {
-    ReactGA.initialize(googleAnalyticsMeasurementId);
-    isInitialized = true;
-  }
-};
-
-export { ReactGA };
-
-export default <P extends object>(WrappedComponent: React.ComponentType<P>) => {
-  const trackPage = (page: string, title = document.title) => {
-    initializeGA();
-    if (googleAnalyticsMeasurementId) {
-      ReactGA.send({ hitType: 'pageview', page, title });
-    }
-  };
-
-  const trackEvent = (category: string, action: string, label: string, value: number) => {
-    initializeGA();
-    if (googleAnalyticsMeasurementId) {
-      ReactGA.event({ category, action, label, value, transport: 'beacon' });
-    }
-  };
-
-  // @ts-ignore
-  window.trackPage = trackPage;
-  // @ts-ignore
-  window.trackEvent = trackEvent;
-
-  return function TrackedComponent(props: P) {
-    const location = useLocation();
-
-    useMount(() => {
-      trackPage(location.pathname);
-    });
-
-    useDeepCompareEffect(() => {
-      trackPage(location.pathname);
-    }, [location.pathname]);
-
-    return <WrappedComponent {...props} />;
-  };
-};