@arcblock/ux 3.4.15 → 3.5.1

package/src/DIDConnect/app-info-item.tsx

@@ -1,93 +0,0 @@
-import { Box, IconButton, SxProps, Tooltip } from '@mui/material';
-import CheckIcon from '@iconify-icons/material-symbols/check';
-import { Icon } from '@iconify/react';
-import { useCreation, useSize } from 'ahooks';
-import { useRef } from 'react';
-
-import { DID } from '../DID';
-import { mergeSx } from '../Util/style';
-import AppIcon from './app-icon';
-import { DID_CONNECT_MEDIUM_WIDTH } from '../Util/constant';
-
-export default function AppInfoItem({
-  appInfo,
-  active = false,
-  appLogo = null,
-  sx = {},
-}: {
-  appInfo: any;
-  active?: boolean;
-  appLogo?: React.ReactNode;
-  sx?: SxProps;
-}) {
-  const rootRef = useRef<HTMLDivElement>(null);
-  const size = useSize(rootRef);
-  const isTinyView = useCreation(() => {
-    if (size) {
-      return size.width < DID_CONNECT_MEDIUM_WIDTH - 50;
-    }
-    return true;
-  }, [size, size?.width]);
-
-  return (
-    <Box
-      ref={rootRef}
-      sx={mergeSx(
-        {
-          display: 'flex',
-          alignItems: 'center',
-          fontWeight: 600,
-          color: 'text.primary',
-
-          '& .app-info-content': {
-            paddingLeft: '8px',
-            overflow: 'hidden',
-          },
-
-          '& .app-info-name': {
-            maxWidth: '100%',
-            lineHeight: 'normal',
-            whiteSpace: 'nowrap',
-            overflow: 'hidden',
-            textOverflow: 'ellipsis',
-            fontSize: '12px',
-            color: 'text.primary',
-          },
-        },
-        sx
-      )}>
-      {appLogo || (
-        <Box
-          sx={{
-            borderRadius: 1,
-            overflow: 'hidden',
-            fontSize: 0,
-          }}>
-          <AppIcon appInfo={appInfo} />
-        </Box>
-      )}
-
-      <Box className="app-info-content">
-        <Tooltip title={appInfo.appName} placement="top">
-          <Box className="app-info-name">{appInfo.appName}</Box>
-        </Tooltip>
-        {appInfo.appPid && (
-          <DID
-            className="app-info-did"
-            did={appInfo.appPid}
-            sx={{ fontSize: '10px !important' }}
-            copyable={false}
-            startChars={isTinyView ? 6 : 8}
-            endChars={isTinyView ? 6 : 8}
-            size={12}
-          />
-        )}
-      </Box>
-      {active ? (
-        <IconButton size="small" color="success">
-          <Icon icon={CheckIcon} color="success" />
-        </IconButton>
-      ) : null}
-    </Box>
-  );
-}

package/src/DIDConnect/auth-apps/auth-apps-info.tsx

@@ -1,77 +0,0 @@
-import { Box, Typography } from '@mui/material';
-import Img from '../../Img';
-
-export type RequestAppInfo = {
-  appLogo: string;
-  appName: string;
-  appUrl: string;
-};
-
-export type CurrentAppInfo = {
-  appLogo: string;
-  appName: string;
-  appUrl: string;
-};
-
-export default function AuthAppsInfo({
-  requestAppInfo,
-  currentAppInfo,
-  titlePrefix = 'Authorize',
-}: {
-  requestAppInfo: RequestAppInfo;
-  currentAppInfo: CurrentAppInfo;
-  titlePrefix?: string;
-}) {
-  return (
-    <Box
-      sx={{
-        textAlign: 'center',
-        display: 'flex',
-        flexDirection: 'column',
-        alignItems: 'center',
-        gap: 2,
-      }}>
-      <Box
-        sx={{
-          display: 'flex',
-          alignItems: 'center',
-          justifyContent: 'center',
-        }}>
-        {/* FIXME: @zhanghan 增加 hover 的效果 */}
-        <Img src={currentAppInfo.appLogo} alt="Server" width={48} height={48} useProxyFallback />
-
-        <Box
-          sx={{
-            mx: 2,
-            display: 'flex',
-            alignItems: 'center',
-            '& .dot': {
-              width: 8,
-              height: 8,
-              borderRadius: '50%',
-              bgcolor: 'grey.500',
-              mx: 0.5,
-            },
-          }}>
-          <Box className="dot" />
-          <Box className="dot" />
-          <Box className="dot" />
-        </Box>
-
-        {/* FIXME: @zhanghan 增加 hover 的效果 */}
-        <Img src={requestAppInfo.appLogo} alt={requestAppInfo.appName} width={48} height={48} useProxyFallback />
-      </Box>
-
-      <Typography
-        sx={{
-          mb: 1,
-          fontSize: '1.2rem',
-        }}>
-        {titlePrefix}{' '}
-        <Box component="span" sx={{ color: 'primary.main' }}>
-          {requestAppInfo.appName}
-        </Box>
-      </Typography>
-    </Box>
-  );
-}

package/src/DIDConnect/auth-apps/index.tsx

@@ -1,278 +0,0 @@
-import { Box, BoxProps, Button, ButtonProps, CircularProgress, Link, Stack, SxProps, Typography } from '@mui/material';
-import { useMemoizedFn, useReactive } from 'ahooks';
-import noop from 'lodash/noop';
-import type { UserPublicInfo } from '@blocklet/js-sdk';
-import { useImperativeHandle, Ref } from 'react';
-
-import DIDConnectContainer from '../did-connect-container';
-import AuthAppsInfo, { type RequestAppInfo, type CurrentAppInfo } from './auth-apps-info';
-import Center from '../../Center';
-import LandingPage from '../landing-page';
-import { translate } from '../../Locale/util';
-import { useLocaleContext } from '../../Locale/context';
-import UserCard from '../../UserCard';
-import { CardType, InfoType } from '../../UserCard/types';
-import { mergeSx } from '../../Util/style';
-import SwitchRole from './switch-role';
-
-const translations = {
-  en: {
-    notThis: 'Not you?',
-    useAnother: 'Use another account',
-    authorize: 'Authorize',
-    connect: 'Connect',
-    cancel: 'Cancel',
-  },
-  zh: {
-    notThis: '不是这个？',
-    useAnother: '使用其他账户',
-    authorize: '授权',
-    connect: 'Connect',
-    cancel: '取消',
-  },
-};
-
-/**
- * @example app/connect-to-did-space?appPid=zNKp8tdZUanWKnvhwZWvF2hKRutwM9ykLaY8&appDid=zNKp8tdZUanWKnvhwZWvF2hKRutwM9ykLaY8&appName=233&appDescription=456&appUrl=https://bbqaw5mgxc6fnihrwqcejcxvukkdgkk4anwxwk5msvm.did.abtnet.io/zh
- */
-export default function AuthApps({
-  session,
-  requestAppInfo,
-  currentAppInfo,
-  children = null,
-  userInfo = undefined,
-
-  hideSwitchConnect = false,
-  hideAuthorize = false,
-  hideCancel = false,
-  hideButton = false,
-
-  notThisText = undefined,
-  authorizeText = undefined,
-  connectText = undefined,
-  cancelText = undefined,
-  useAnotherText = undefined,
-
-  slotProps = undefined,
-
-  onConnect = noop,
-  onAuthorize = noop,
-  onSwitchConnect = noop,
-  onSwitchPassport = noop,
-  onCancel = noop,
-  ref,
-
-  disableAuthorizeButton = false,
-  titlePrefix = undefined,
-}: {
-  session: any;
-  requestAppInfo: RequestAppInfo;
-  currentAppInfo: CurrentAppInfo;
-  children?: React.ReactNode;
-  userInfo?: UserPublicInfo;
-
-  hideSwitchConnect?: boolean;
-  hideAuthorize?: boolean;
-  hideCancel?: boolean;
-  hideButton?: boolean;
-
-  notThisText?: string;
-  authorizeText?: string;
-  connectText?: string;
-  cancelText?: string;
-  useAnotherText?: string;
-
-  slotProps?: {
-    root?: BoxProps;
-    didConnectContainer?: object;
-    contentContainer?: BoxProps;
-    connectButton?: ButtonProps;
-    authorizeButton?: ButtonProps;
-    cancelButton?: ButtonProps;
-  };
-
-  onConnect?: (done: () => void) => void;
-  onAuthorize?: (done: () => void) => void;
-  onSwitchConnect?: (done: () => void) => void;
-  onSwitchPassport?: (done: () => void) => void;
-  onCancel?: () => void;
-  ref: Ref<{ closeLoading: () => void }>;
-
-  disableAuthorizeButton?: boolean;
-  titlePrefix?: string;
-}) {
-  const currentState = useReactive({
-    loading: false,
-  });
-  const { locale = 'en' } = useLocaleContext() || {};
-
-  const t = useMemoizedFn((key, data = {}) => translate(translations, key, locale, 'en', data));
-
-  const handleCloseLoading = useMemoizedFn(() => {
-    currentState.loading = false;
-  });
-  const handleConnect = useMemoizedFn(() => {
-    currentState.loading = true;
-    onConnect?.(handleCloseLoading);
-  });
-  const handleSwitchConnect = useMemoizedFn(() => {
-    currentState.loading = true;
-    onSwitchConnect?.(handleCloseLoading);
-  });
-  const handleAuthorize = useMemoizedFn(() => {
-    currentState.loading = true;
-    onAuthorize?.(handleCloseLoading);
-  });
-  const handleSwitchPassport = useMemoizedFn(() => {
-    currentState.loading = true;
-    onSwitchPassport?.(handleCloseLoading);
-  });
-  const handleCancel = useMemoizedFn(() => {
-    onCancel?.();
-  });
-
-  useImperativeHandle(ref, () => ({
-    closeLoading: handleCloseLoading,
-  }));
-
-  if (session.loading || !session.initialized) {
-    return (
-      <Center>
-        <CircularProgress />
-      </Center>
-    );
-  }
-
-  const user = userInfo ?? session?.user;
-
-  return (
-    <LandingPage did={window.blocklet?.appPid} standalone>
-      <Box
-        {...slotProps?.root}
-        sx={mergeSx(
-          {
-            width: 420,
-            maxWidth: '100%',
-          },
-          slotProps?.root?.sx as SxProps
-        )}>
-        <DIDConnectContainer hideCloseButton {...slotProps?.didConnectContainer}>
-          <Box
-            {...slotProps?.contentContainer}
-            sx={mergeSx(
-              {
-                display: 'flex',
-                flexDirection: 'column',
-                gap: 1.5,
-                p: {
-                  xs: 2,
-                  lg: 3,
-                  xl: 4,
-                },
-                pt: {
-                  xs: 3,
-                  xl: 4,
-                },
-                bgcolor: 'background.paper',
-              },
-              slotProps?.contentContainer?.sx as SxProps
-            )}>
-            <AuthAppsInfo requestAppInfo={requestAppInfo} currentAppInfo={currentAppInfo} titlePrefix={titlePrefix} />
-
-            {user ? (
-              <>
-                <UserCard
-                  user={user}
-                  showDid
-                  cardType={CardType.Detailed}
-                  infoType={InfoType.Minimal}
-                  renderTopRightContent={() => <SwitchRole user={user} switchPassport={handleSwitchPassport} />}
-                />
-                <Box />
-              </>
-            ) : null}
-
-            {children}
-
-            {hideButton ? null : (
-              <>
-                <Box
-                  sx={{
-                    border: '1px solid',
-                    borderColor: 'divider',
-                    borderRadius: 2,
-                    overflow: 'hidden',
-                    my: 1,
-                  }}
-                />
-
-                <Stack direction="row" spacing={2}>
-                  {!hideCancel ? (
-                    <Button
-                      color="inherit"
-                      variant="outlined"
-                      size="large"
-                      fullWidth
-                      onClick={handleCancel}
-                      sx={{
-                        color: 'grey.500',
-                      }}
-                      {...slotProps?.cancelButton}>
-                      {cancelText || t('cancel')}
-                    </Button>
-                  ) : null}
-                  {user && !hideAuthorize ? (
-                    <Button
-                      variant="contained"
-                      size="large"
-                      fullWidth
-                      onClick={handleAuthorize}
-                      disabled={currentState.loading || disableAuthorizeButton}
-                      {...slotProps?.authorizeButton}>
-                      {currentState.loading ? <CircularProgress size={20} sx={{ mr: 1 }} /> : null}
-                      {authorizeText || t('authorize')}
-                    </Button>
-                  ) : (
-                    <Button
-                      variant="contained"
-                      size="large"
-                      fullWidth
-                      disabled={currentState.loading || disableAuthorizeButton}
-                      onClick={handleConnect}
-                      {...slotProps?.connectButton}>
-                      {currentState.loading ? <CircularProgress size={20} sx={{ mr: 1 }} /> : null}
-                      {connectText || t('connect')}
-                    </Button>
-                  )}
-                </Stack>
-              </>
-            )}
-
-            {hideSwitchConnect || !user ? null : (
-              <Box sx={{ textAlign: 'center' }}>
-                <Typography
-                  variant="body2"
-                  sx={{
-                    display: 'flex',
-                    alignItems: 'center',
-                    justifyContent: 'center',
-                    gap: 1,
-                  }}>
-                  {notThisText || t('notThis')} {/* eslint-disable-next-line jsx-a11y/anchor-is-valid */}
-                  <Link
-                    underline="hover"
-                    onClick={handleSwitchConnect}
-                    sx={{
-                      cursor: 'pointer',
-                    }}>
-                    {useAnotherText || t('useAnother')}
-                  </Link>
-                </Typography>
-              </Box>
-            )}
-          </Box>
-        </DIDConnectContainer>
-      </Box>
-    </LandingPage>
-  );
-}

package/src/DIDConnect/auth-apps/switch-role.tsx

@@ -1,47 +0,0 @@
-import { memo } from 'react';
-import { Chip } from '@mui/material';
-import { Icon } from '@iconify/react';
-import SwapHorizRoundedIcon from '@iconify-icons/material-symbols/swap-horiz-rounded';
-import { useCreation } from 'ahooks';
-import type { UserPublicInfo } from '@blocklet/js-sdk';
-
-function SwitchRole({
-  user,
-  switchPassport,
-}: {
-  user: UserPublicInfo & { role: string; passports: { name: string; title: string; role: string }[] };
-  switchPassport: () => void;
-}) {
-  const currentRole = useCreation(
-    () => (user?.passports || [])?.find((item) => item.name === user.role || item.role === user.role),
-    [user?.passports, user?.role]
-  );
-
-  return (
-    <Chip
-      label={currentRole?.title || user?.role || 'Guest'}
-      size="small"
-      variant="outlined"
-      sx={{
-        flexShrink: 0,
-        fontWeight: 'bold',
-        fontSize: '12px',
-        color: 'text.primary',
-        borderColor: 'grey.100',
-        backgroundColor: 'transparent',
-        textTransform: 'capitalize',
-        pr: 1,
-        pl: 0.5,
-        '&:active': {
-          boxShadow: 'none',
-        },
-      }}
-      clickable
-      deleteIcon={<Icon icon={SwapHorizRoundedIcon} color="inherit" />}
-      onDelete={switchPassport}
-      onClick={switchPassport}
-    />
-  );
-}
-
-export default memo(SwitchRole);