@blocklet/ui-react 3.4.14 → 3.5.0

package/src/common/wizard-modal.jsx

@@ -1,200 +0,0 @@
-import { useLocaleContext } from '@arcblock/ux/lib/Locale/context';
-import { Box, CircularProgress, Dialog, Typography, useMediaQuery, useTheme } from '@mui/material';
-import merge from 'lodash/merge';
-import PropTypes from 'prop-types';
-import { useEffect, useRef, useState } from 'react';
-import { joinURL, withQuery } from 'ufo';
-
-const DEFAULT_WIZARD_PATH = '/.well-known/service/onboard/bind-account';
-
-export default function WizardModal({
-  onFinished = () => {},
-  show = false,
-  onChangeVisible = () => {},
-  loadingText = '',
-  defaultPath = DEFAULT_WIZARD_PATH,
-  ...props
-}) {
-  const [open, setOpen] = useState(show);
-  const [loaded, setLoaded] = useState(false);
-  const [currentUrl, setCurrentUrl] = useState(() => {
-    // 从 localStorage 恢复上次的 URL
-    const savedUrl = localStorage.getItem('wizard-current-url');
-    if (savedUrl?.includes('/.well-known/service/onboard')) {
-      return savedUrl;
-    }
-    return defaultPath;
-  });
-  const onFinishedRef = useRef(onFinished);
-  const handleCloseRef = useRef();
-  const iframeRef = useRef(null);
-  const { locale } = useLocaleContext();
-  const theme = useTheme();
-  const isMobile = useMediaQuery(theme.breakpoints.down('sm'));
-  onFinishedRef.current = onFinished;
-
-  handleCloseRef.current = () => {
-    if (iframeRef.current?.contentWindow) {
-      try {
-        const url = new URL(iframeRef.current.contentWindow.location.href);
-        const savedUrl = url.pathname;
-        localStorage.setItem('wizard-current-url', savedUrl);
-        setCurrentUrl(savedUrl);
-      } catch (e) {
-        setCurrentUrl(defaultPath);
-        console.warn('Failed to save wizard URL:', e);
-      }
-    }
-    localStorage.setItem('wizard-completed', 'true');
-    setOpen(false);
-    onChangeVisible(false);
-  };
-
-  useEffect(() => {
-    if (show !== open) {
-      setOpen(show);
-    }
-  }, [show]); // eslint-disable-line react-hooks/exhaustive-deps
-
-  useEffect(() => {
-    if (!open && loaded) {
-      setLoaded(false);
-    }
-  }, [open]); // eslint-disable-line react-hooks/exhaustive-deps
-
-  // 处理 iframe 消息
-  useEffect(() => {
-    const listener = (event) => {
-      // 只处理来自同源的消息
-      if (event.origin !== window.location.origin) {
-        return;
-      }
-
-      const { type, data } = event.data || {};
-
-      switch (type) {
-        case 'wizard.loaded':
-          setLoaded(true);
-          break;
-        case 'wizard.finished': {
-          setOpen(false);
-          // 完成后重置为默认 URL
-          setCurrentUrl(defaultPath);
-          localStorage.removeItem('wizard-current-url');
-          localStorage.setItem('wizard-completed', 'true');
-          onFinishedRef.current?.(data);
-          break;
-        }
-        case 'wizard.close': {
-          handleCloseRef.current();
-          break;
-        }
-        default:
-          break;
-      }
-    };
-
-    window.addEventListener('message', listener);
-    return () => {
-      window.removeEventListener('message', listener);
-    };
-  }, []); // eslint-disable-line react-hooks/exhaustive-deps
-
-  // 控制弹窗显示
-  useEffect(() => {
-    const wizardCompleted = localStorage.getItem('wizard-completed');
-    if (!wizardCompleted) {
-      setOpen(true);
-    }
-  }, []);
-
-  if (!open) {
-    return null;
-  }
-
-  const src = withQuery(joinURL(window.location.origin, currentUrl), {
-    locale,
-  });
-
-  return (
-    <Dialog
-      id="wizard-dialog"
-      open={open}
-      onClose={() => handleCloseRef.current()}
-      fullWidth
-      maxWidth={isMobile ? false : 'md'}
-      fullScreen={isMobile}
-      {...props}
-      slotProps={merge(
-        {},
-        {
-          paper: {
-            sx: {
-              margin: 0,
-              borderRadius: 0,
-              position: 'relative',
-              overflow: 'hidden',
-              ...(isMobile
-                ? { borderRadius: 0 }
-                : {
-                    borderRadius: 1,
-                    height: '720px',
-                  }),
-            },
-          },
-        },
-        props.slotProps
-      )}
-      sx={{
-        '& .MuiBackdrop-root': {
-          backgroundColor: 'rgba(0, 0, 0, 0.5)',
-        },
-        ...props.sx,
-      }}>
-      <iframe
-        ref={iframeRef}
-        id="wizard-iframe"
-        src={src}
-        title="Setup Wizard"
-        style={{
-          width: '100%',
-          height: '100%',
-          border: 0,
-          padding: 0,
-          margin: 0,
-          opacity: loaded ? 1 : 0,
-          transition: 'opacity 0.3s ease-in-out',
-        }}
-        onLoad={() => setLoaded(true)}
-      />
-      {loaded ? null : (
-        <Box
-          sx={{
-            position: 'absolute',
-            top: 0,
-            left: 0,
-            right: 0,
-            bottom: 0,
-            display: 'flex',
-            justifyContent: 'center',
-            alignItems: 'center',
-            bgcolor: 'background.paper',
-          }}>
-          <Box sx={{ display: 'flex', alignItems: 'center', flexDirection: 'column', gap: 1 }}>
-            <CircularProgress />
-            {typeof loadingText === 'string' ? <Typography variant="body1">{loadingText}</Typography> : loadingText}
-          </Box>
-        </Box>
-      )}
-    </Dialog>
-  );
-}
-
-WizardModal.propTypes = {
-  onFinished: PropTypes.func,
-  show: PropTypes.bool,
-  onChangeVisible: PropTypes.func,
-  loadingText: PropTypes.node,
-  defaultPath: PropTypes.string,
-  ...Dialog.propTypes,
-};

package/src/common/ws.js

@@ -1,68 +0,0 @@
-import { use } from 'react';
-import { WsClient } from '@arcblock/ws';
-import { useCreation, usePrevious, useUnmount } from 'ahooks';
-import { SessionContext } from '@arcblock/did-connect-react/lib/Session';
-import { joinURL } from 'ufo';
-import { BLOCKLET_SERVICE_PATH_PREFIX } from '@arcblock/ux/lib/Util/constant';
-
-const client = {};
-
-export function create(endpoint = 'admin') {
-  let pathPrefix = '/';
-  if (!window?.blocklet && window?.env?.apiPrefix) {
-    pathPrefix = window.env.apiPrefix;
-  }
-  const url = joinURL(pathPrefix, BLOCKLET_SERVICE_PATH_PREFIX, endpoint);
-  return new WsClient(url, {
-    heartbeatIntervalMs: 100 * 1000,
-  });
-}
-
-export default function getWsClient(endpoint = 'admin') {
-  if (!client[endpoint]) {
-    client[endpoint] = create(endpoint);
-  }
-
-  return client[endpoint];
-}
-
-export const useListenWsClient = (endpoint = 'admin') => {
-  const sessionCtx = use(SessionContext);
-  const { session } = sessionCtx ?? {};
-
-  const userDid = useCreation(() => session.user?.did, [session.user]);
-
-  const previousUserDid = usePrevious(userDid);
-
-  useUnmount(() => {
-    Object.keys(client).forEach((key) => {
-      if (client[key]?.isConnected()) {
-        client[key]?.disconnect();
-      }
-      delete client[key];
-    });
-  });
-
-  if (!userDid) {
-    return null;
-  }
-
-  // 同步检查：如果用户切换了，断开并重新连接所有客户端
-  if (previousUserDid && previousUserDid !== userDid) {
-    Object.keys(client).forEach((key) => {
-      if (client[key]) {
-        if (client[key].isConnected()) {
-          client[key].disconnect();
-        }
-        // 重新连接
-        client[key].connect();
-      }
-    });
-  }
-  if (!client[endpoint] && session.user) {
-    client[endpoint] = getWsClient(endpoint);
-    client[endpoint].connect();
-  }
-
-  return client[endpoint];
-};

package/src/contexts/config-user-space.tsx

@@ -1,88 +0,0 @@
-import { createContext, use, useMemo, useState, useEffect } from 'react';
-import { SessionContext } from '@arcblock/did-connect-react/lib/Session';
-
-import type { SessionContext as TSessionContext, Session } from '../@types';
-
-export interface SpaceGateway {
-  did: string;
-  name: string;
-  url: string;
-  endpoint: string;
-}
-
-export interface SettingStorageEndpoint {
-  (endpoint: string | undefined): void | Promise<void>;
-}
-
-interface ConfigUserSpaceContextType {
-  loading: boolean;
-  spaceGateway: SpaceGateway | undefined;
-  session: Session;
-  deleteSpaceGateway: (spaceGateway: SpaceGateway) => Promise<void>;
-  updateSpaceGateway: (updateSpaceGateway: SpaceGateway) => Promise<void>;
-  storageEndpoint: string;
-  settingStorageEndpoint: SettingStorageEndpoint;
-  hasStorageEndpoint: boolean;
-}
-
-const ConfigUserSpaceContext = createContext<ConfigUserSpaceContextType>({} as ConfigUserSpaceContextType);
-const { Provider, Consumer } = ConfigUserSpaceContext;
-
-function ConfigUserSpaceProvider({ children }: { children: React.ReactNode }) {
-  const [loading] = useState(false);
-  const { session } = use<TSessionContext>(SessionContext);
-  const { user } = session;
-
-  const [spaceGateway, setSpaceGateway] = useState<SpaceGateway | undefined>();
-  const storageEndpoint = useMemo(() => {
-    return user?.didSpace?.endpoint;
-  }, [user?.didSpace]);
-
-  useEffect(() => {
-    setSpaceGateway(user?.didSpace as SpaceGateway);
-  }, [user?.didSpace]);
-
-  // eslint-disable-next-line require-await
-  const deleteSpaceGateway = async (): Promise<void> => {
-    setSpaceGateway(undefined);
-  };
-
-  // eslint-disable-next-line @typescript-eslint/no-unused-vars
-  const settingStorageEndpoint = (endpoint: string | undefined) => {};
-
-  const updateSpaceGateway = async (x: SpaceGateway) => {
-    setSpaceGateway(x);
-    // eslint-disable-next-line no-use-before-define
-    await settingStorageEndpoint(x.endpoint);
-  };
-
-  const hasStorageEndpoint = Boolean(storageEndpoint && spaceGateway);
-
-  return (
-    <Provider
-      value={{
-        loading,
-        spaceGateway,
-        session,
-        deleteSpaceGateway,
-        updateSpaceGateway,
-        storageEndpoint,
-        settingStorageEndpoint,
-        hasStorageEndpoint,
-      }}>
-      {children}
-    </Provider>
-  );
-}
-
-function useConfigUserSpaceContext() {
-  const res = use(ConfigUserSpaceContext);
-  return res;
-}
-
-export {
-  ConfigUserSpaceContext,
-  ConfigUserSpaceProvider,
-  Consumer as ConfigUserSpaceConsumer,
-  useConfigUserSpaceContext,
-};

package/src/contexts/user-followers.tsx

@@ -1,54 +0,0 @@
-import { createContext, useContext } from 'react';
-import { translate } from '@arcblock/ux/lib/Locale/util';
-import { useMemoizedFn } from 'ahooks';
-import { useLocaleContext } from '@arcblock/ux/lib/Locale/context';
-
-import useFollow from '../hooks/use-follow';
-import { translations } from '../UserCenter/libs/locales';
-
-const UserFollowersContext = createContext<UserFollowersContextType>({
-  followed: false,
-  followUser: () => {},
-  unfollowUser: () => {},
-});
-const { Provider } = UserFollowersContext;
-
-type UserFollowersContextType = {
-  followed: boolean;
-  followUser: () => void;
-  unfollowUser: () => void;
-};
-
-function UserFollowersProvider({
-  isMySelf,
-  userDid,
-  children,
-}: {
-  children: React.ReactNode;
-  isMySelf: boolean;
-  userDid: string;
-}) {
-  const { locale } = useLocaleContext();
-  const t = useMemoizedFn((key, data = {}) => {
-    return translate(translations, key, locale, 'en', data);
-  });
-  const { followed, followUser, unfollowUser } = useFollow({ userDid, t, isMySelf });
-
-  return (
-    <Provider
-      value={{
-        followed,
-        followUser,
-        unfollowUser,
-      }}>
-      {children}
-    </Provider>
-  );
-}
-
-function useUserFollowersContext() {
-  const res = useContext(UserFollowersContext);
-  return res;
-}
-
-export { UserFollowersContext, useUserFollowersContext, UserFollowersProvider };

package/src/hooks/use-follow.tsx

@@ -1,75 +0,0 @@
-import { useEffect, useState } from 'react';
-import { useMemoizedFn } from 'ahooks';
-import Toast from '@arcblock/ux/lib/Toast';
-import { getBlockletSDK } from '@blocklet/js-sdk';
-
-import type { AxiosError } from 'axios';
-import { formatAxiosError } from '../UserCenter/libs/utils';
-
-/**
- * 登录用户与当前用户（userDid）的关注关系
- */
-export default function useFollow({
-  userDid,
-  t,
-  isMySelf,
-}: {
-  userDid: string;
-  t: (k: string) => string;
-  isMySelf: boolean;
-}) {
-  const client = getBlockletSDK();
-  const [followed, setFollowed] = useState(false);
-
-  const isFollowingUser = useMemoizedFn(async () => {
-    try {
-      if (isMySelf) {
-        setFollowed(true);
-        return;
-      }
-      const res = await client.user.isFollowingUser({ userDid });
-      setFollowed(res);
-    } catch (error) {
-      console.error(error);
-    }
-  });
-
-  const followUser = useMemoizedFn(async (followUserDid: string = userDid) => {
-    if (isMySelf && followUserDid === userDid) {
-      return;
-    }
-    try {
-      await client.user.followUser({ userDid: followUserDid });
-      Toast.success(t('profile.follow_success'));
-      isFollowingUser();
-    } catch (error) {
-      console.error(error);
-      Toast.error(formatAxiosError(error as AxiosError));
-    }
-  });
-  const unfollowUser = useMemoizedFn(async (unfollowUserDid: string = userDid) => {
-    if (isMySelf && unfollowUserDid === userDid) {
-      return;
-    }
-    try {
-      await client.user.unfollowUser({ userDid: unfollowUserDid });
-      Toast.success(t('profile.unfollow_success'));
-      isFollowingUser();
-    } catch (error) {
-      console.error(error);
-      Toast.error(formatAxiosError(error as AxiosError));
-    }
-  });
-
-  useEffect(() => {
-    if (userDid && !isMySelf) {
-      isFollowingUser();
-    }
-  }, [isFollowingUser, userDid, isMySelf]);
-
-  return {
-    followed,
-    followUser,
-    unfollowUser,
-  };
-}

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,16 +0,0 @@
-// @ts-ignore
-export { default as Header } from './Header';
-// @ts-ignore
-export { default as Footer } from './Footer';
-// @ts-ignore
-export { default as Dashboard } from './Dashboard';
-// @ts-ignore
-export { default as Icon } from './Icon';
-// @ts-ignore
-export { default as ComponentInstaller } from './ComponentInstaller';
-export { default as BlockletStudio } from './BlockletStudio';
-// @ts-ignore
-export { default as useComponentInstaller } from './ComponentInstaller/use-component-installed';
-export * from './UserCenter';
-export * from './UserSessions';
-export * from './ComponentManager';

package/src/libs/constant.ts

@@ -1 +0,0 @@
-export const EMBED_MODE_KEY = 'blocklet-ui-react-embed-mode';

package/src/libs/spaces.tsx

@@ -1,18 +0,0 @@
-import { joinURL } from 'ufo';
-
-export function getSpaceNftDisplayUrlFromEndpoint(endpoint: string): string {
-  const prefix = endpoint.replace(/\/api\/space\/.+/, '');
-
-  const strArray = endpoint.replace(/\/$/, '').split('/');
-  const spaceDid = strArray.at(-4);
-
-  return joinURL(prefix, `/api/space/nft/display?spaceDid=${spaceDid}`);
-}
-
-export function getSpaceHomeUrl(endpoint: string): string {
-  const baseUrl = endpoint.replace(/\/api\/space\/.+/, '');
-  const strArray = endpoint.replace(/\/$/, '').split('/');
-  const spaceDid = strArray.at(-4) as string;
-
-  return joinURL(baseUrl, 'space', spaceDid);
-}

package/src/libs/with-hide-when-embed.tsx

@@ -1,24 +0,0 @@
-import { useSessionStorageState } from 'ahooks';
-import { EMBED_MODE_KEY } from './constant';
-
-export default function withHideWhenEmbed<T extends object>(Component: React.ComponentType<T>) {
-  const displayName = Component.displayName || Component.name || 'Component';
-
-  function WrappedComponent(props: T) {
-    const [embedMode] = useSessionStorageState(EMBED_MODE_KEY, {
-      defaultValue: 0,
-      listenStorageChange: true,
-    });
-    const isEmbed = embedMode === 1;
-
-    if (isEmbed) {
-      return null;
-    }
-
-    return <Component {...props} />;
-  }
-
-  WrappedComponent.displayName = `withHideWhenEmbed(${displayName})`;
-
-  return WrappedComponent;
-}

package/src/types.js

@@ -1,45 +0,0 @@
-/* eslint-disable import/prefer-default-export */
-import PropTypes from 'prop-types';
-
-export const BlockletMetaProps = PropTypes.shape({
-  appLogo: PropTypes.node,
-  appName: PropTypes.string,
-  theme: PropTypes.shape({
-    background: PropTypes.string,
-  }),
-  enableConnect: PropTypes.bool,
-  enableLocale: PropTypes.bool,
-  navigation: PropTypes.arrayOf(
-    PropTypes.shape({
-      title: PropTypes.oneOfType([PropTypes.string, PropTypes.object]),
-      link: PropTypes.oneOfType([PropTypes.string, PropTypes.object]),
-      icon: PropTypes.string,
-      items: PropTypes.arrayOf(
-        PropTypes.shape({
-          title: PropTypes.oneOfType([PropTypes.string, PropTypes.object]),
-          link: PropTypes.oneOfType([PropTypes.string, PropTypes.object]),
-        })
-      ),
-    })
-  ),
-});
-
-export const SessionManagerProps = PropTypes.shape({
-  showText: PropTypes.bool,
-  showRole: PropTypes.bool,
-  switchDid: PropTypes.bool,
-  switchProfile: PropTypes.bool,
-  switchPassport: PropTypes.bool,
-  disableLogout: PropTypes.bool,
-  onLogin: PropTypes.func,
-  onLogout: PropTypes.func,
-  onSwitchDid: PropTypes.func,
-  onSwitchProfile: PropTypes.func,
-  onSwitchPassport: PropTypes.func,
-  menu: PropTypes.array,
-  menuRender: PropTypes.func,
-  dark: PropTypes.bool,
-  size: PropTypes.number,
-  profileUrl: PropTypes.string,
-  renderUserButton: PropTypes.func,
-});