@blocklet/did-space-react 0.5.57 → 0.5.59

package/src/components/{SpaceCard → space-card}/index.tsx

@@ -1,10 +1,12 @@
 import isUndefined from 'lodash/isUndefined';
 import { joinURL, withQuery } from 'ufo';
-import { Box, BoxProps, Link, Stack } from '@mui/material';
+import { Box, BoxProps, Link, Skeleton, Stack, Tooltip } from '@mui/material';
+import OpenInNewIcon from '@mui/icons-material/OpenInNew';
 import DidAddress from '@arcblock/ux/lib/DID';
 import { styled } from '@arcblock/ux/lib/Theme';
 
 import { useEffect, useRef, useState } from 'react';
+import { AxiosError } from 'axios';
 import useMobile from '../../hooks/use-mobile';
 import useSpaceInfo from '../../hooks/use-space-info';
 import useLocale from '../../hooks/use-locale';
@@ -16,51 +18,67 @@ import {
   getSpaceNftDisplayUrlFromEndpoint,
 } from '../../libs/util';
 import { SpaceGateway, SpaceStatus } from '../../types';
-import { SpacesConnected, SpaceDisconnected, SpaceConnectError } from '../../icons';
-import PreviewNft from '../PreviewNFT';
+import { SpacesConnectedIcon, SpaceDisconnectedIcon, SpaceConnectErrorIcon } from '../../icons';
+import { PreviewSpaceNft } from '../preview-space-nft';
 
 function Status({
   spaceUrl,
   status,
+  isError,
   refresh,
   sx,
   ...rest
-}: { spaceUrl: string; status: SpaceStatus; refresh: () => void } & BoxProps) {
+}: { spaceUrl: string; status: SpaceStatus; isError: boolean; refresh: () => void } & BoxProps) {
   const { t } = useLocale();
-  const iconStyle = { marginLeft: '8px', marginRight: '4px' };
+  const iconStyle = { marginRight: '4px' };
 
-  // error
   let icon: React.ReactNode = null;
   let text: React.ReactNode = null;
 
   if (status === SpaceStatus.CONNECTED) {
-    icon = <SpacesConnected style={iconStyle} />;
+    icon = <SpacesConnectedIcon style={iconStyle} />;
     text = <span style={{ color: '#047857' }}>{t('storage.spaces.connected.tag')}</span>;
   }
 
   if (status === SpaceStatus.DISCONNECTED) {
-    icon = <SpaceDisconnected style={iconStyle} />;
+    icon = <SpaceDisconnectedIcon style={iconStyle} />;
     text = <span style={{ color: '#626a77' }}>{t('storage.spaces.disconnected.tag')}</span>;
   }
 
   if (status === SpaceStatus.EXPIRED) {
-    icon = <SpaceConnectError style={iconStyle} />;
+    icon = <SpaceConnectErrorIcon style={iconStyle} />;
     text = (
-      <Box component="span" sx={{ display: 'flex', alignItems: 'center', color: 'error.main' }}>
-        <span>{t('storage.spaces.expired.guide')}</span>
+      <Tooltip title={t('storage.spaces.error.expired')} placement="top">
         <Link
           href={withQuery(joinURL(spaceUrl, 'overview'), { guide: 1 })}
           target="_blank"
-          underline="always"
+          underline="hover"
           color="error"
-          sx={{ ml: 0.5 }}
+          sx={{ display: 'flex', alignItems: 'center', color: 'error.main' }}
         >
-          [{t('common.open')}]
+          <span>{t('storage.spaces.error.tag')}</span>
+          <OpenInNewIcon sx={{ fontSize: '14px', marginLeft: '4px' }} />
         </Link>
-      </Box>
+      </Tooltip>
     );
   }
 
+  if (status === SpaceStatus.CORS_BLOCKED) {
+    icon = <SpaceConnectErrorIcon style={iconStyle} />;
+    text = (
+      <Tooltip title={t('storage.spaces.error.corsBlocked')} placement="top">
+        <Box sx={{ display: 'flex', alignItems: 'center', color: 'error.main' }}>
+          <span>{t('storage.spaces.error.tag')}</span>
+        </Box>
+      </Tooltip>
+    );
+  }
+
+  if (status === SpaceStatus.UNKNOWN) {
+    icon = <SpaceConnectErrorIcon style={iconStyle} />;
+    text = <Box sx={{ color: 'error.main' }}>{t('storage.spaces.error.networkError')}</Box>;
+  }
+
   // 如果 Space 为 Error 状态，则在页面重新可见时刷新 Space 状态（此时 error 可能已经在外部处理了）
   useEffect(() => {
     const handleVisibilityChange = () => {
@@ -68,14 +86,14 @@ function Status({
         refresh();
       }
     };
-    if (status === SpaceStatus.EXPIRED) {
+    if (isError) {
       document.addEventListener('visibilitychange', handleVisibilityChange);
     } else {
       document.removeEventListener('visibilitychange', handleVisibilityChange);
     }
 
     return () => document.removeEventListener('visibilitychange', handleVisibilityChange);
-  }, [status, refresh]);
+  }, [isError, refresh]);
 
   return (
     <Box
@@ -106,8 +124,10 @@ export interface SpaceCardProps extends BoxProps {
   deps?: any[];
 }
 
-function SpaceCard({ endpoint, selected = false, compat, action, className, deps, ...rest }: SpaceCardProps) {
+export function SpaceCard({ endpoint, selected = false, compat, action, className, deps, ...rest }: SpaceCardProps) {
   const isMobile = useMobile();
+  const { t } = useLocale();
+
   let isCompact = compat;
 
   if (isUndefined(isCompact)) {
@@ -119,26 +139,51 @@ function SpaceCard({ endpoint, selected = false, compat, action, className, deps
   const gatewayUrl = getSpaceGatewayUrlFromEndpoint(endpoint);
   const [refreshSpaceInfo, setRefreshSpaceInfo] = useState(false);
   const refresh = () => setRefreshSpaceInfo((p) => !p);
-  const { data: spaceInfo, loading } = useSpaceInfo({
+  const {
+    data: spaceInfo,
+    error,
+    loading,
+  } = useSpaceInfo({
     endpoint,
     deps: [refreshSpaceInfo].concat(deps ?? []),
   });
-  const spaceName = spaceInfo?.spaceName ?? '';
+  let spaceName: React.ReactNode = '';
 
   // 是否授权连接
   const hasPermission = spaceInfo?.hasPermission ?? false;
   // 是否在订阅期内
   const isAvailable = spaceInfo?.isAvailable ?? false;
+  // 是否发生错误
+  let isError = false;
+  // space 状态
+  const spaceStatus = useRef(SpaceStatus.LOADING);
 
-  const spaceStatus = useRef(SpaceStatus.UNKNOWN);
-  if (spaceInfo && !loading) {
+  if (loading) {
+    spaceStatus.current = SpaceStatus.LOADING;
+    spaceName = <Skeleton variant="text" sx={{ width: '180px', fontSize: '1rem' }} />;
+  } else if (spaceInfo) {
+    spaceName = spaceInfo.spaceName;
     if (!isAvailable) {
       spaceStatus.current = SpaceStatus.EXPIRED;
+      isError = true;
     } else if (hasPermission) {
       spaceStatus.current = SpaceStatus.CONNECTED;
     } else {
       spaceStatus.current = SpaceStatus.DISCONNECTED;
     }
+  } else if (error instanceof AxiosError) {
+    spaceName = t('common.unknown');
+    isError = true;
+    if (
+      !error.response && // 无响应
+      error.message === 'Network Error' && // 网络错误
+      error.code !== 'ECONNABORTED' && // 非超时引起
+      new URL(error.config!.url!).origin !== window.location.origin // 满足跨域
+    ) {
+      spaceStatus.current = SpaceStatus.CORS_BLOCKED;
+    } else {
+      spaceStatus.current = SpaceStatus.UNKNOWN;
+    }
   }
 
   const renderAction = () => {
@@ -147,7 +192,7 @@ function SpaceCard({ endpoint, selected = false, compat, action, className, deps
       return action({
         spaceGateway: {
           did: spaceDid!,
-          name: spaceName,
+          name: spaceInfo?.spaceName ?? '',
           url: gatewayUrl,
           endpoint,
         },
@@ -165,17 +210,23 @@ function SpaceCard({ endpoint, selected = false, compat, action, className, deps
     <BoxContainer
       className={classNames(className, {
         selected,
-        error: spaceStatus.current === SpaceStatus.EXPIRED || spaceStatus.current === SpaceStatus.DISCONNECTED,
+        error: isError,
       })}
       {...rest}
     >
       <Box display="flex" alignItems="center">
-        <PreviewNft src={getSpaceNftDisplayUrlFromEndpoint(endpoint)} width="72px" height="72px" />
+        <PreviewSpaceNft src={getSpaceNftDisplayUrlFromEndpoint(endpoint)} width="72px" height="72px" />
         <Stack ml={2} flex={1} spacing={1} minWidth={0}>
           <Box display="flex" alignItems="center" sx={{ whiteSpace: 'nowrap' }}>
-            <Box className="space-name">{spaceName}</Box>
+            {spaceName && <Box className="space-name">{spaceName}</Box>}
             {!isCompact && selected && (
-              <Status spaceUrl={spaceUrl} status={spaceStatus.current} refresh={refresh} sx={{ mr: 1 }} />
+              <Status
+                spaceUrl={spaceUrl}
+                status={spaceStatus.current}
+                refresh={refresh}
+                isError={isError}
+                sx={{ mr: 1 }}
+              />
             )}
           </Box>
           <DidAddress
@@ -195,7 +246,15 @@ function SpaceCard({ endpoint, selected = false, compat, action, className, deps
       </Box>
       {isCompact && (
         <Box display="flex" alignItems="center" marginTop={0.5}>
-          {selected && <Status spaceUrl={spaceUrl} status={spaceStatus.current} refresh={refresh} flex={1} />}
+          {selected && (
+            <Status
+              spaceUrl={spaceUrl}
+              status={spaceStatus.current}
+              refresh={refresh}
+              isError={isError}
+              flexShrink={0}
+            />
+          )}
           <Box flex={1} />
           {renderAction()}
         </Box>
@@ -224,7 +283,6 @@ const BoxContainer = styled(Box)`
     white-space: nowrap;
     overflow: hidden;
     text-overflow: ellipsis;
+    margin-right: 8px;
   }
 `;
-
-export default SpaceCard;

package/src/hooks/use-space-info.ts

@@ -10,7 +10,7 @@ export default function useSpaceInfo({ endpoint, deps = [] }: { endpoint: string
       }
 
       const { headers } = await api.head(endpoint, {
-        timeout: 5000,
+        timeout: 1000 * 30,
       });
 
       const spaceName = headers['x-space-name'];

package/src/icons/index.tsx

@@ -1,4 +1,12 @@
-export { default as EmptySpacesNFT } from './empty-space-nft.svg';
-export { default as SpacesConnected } from './space-connected.svg';
-export { default as SpaceDisconnected } from './space-disconnect.svg';
-export { default as SpaceConnectError } from './space-connect-error.svg';
+import EmptySpacesNFTIcon from './empty-space-nft.svg';
+import SpacesConnectedIcon from './space-connected.svg';
+import SpaceDisconnectedIcon from './space-disconnect.svg';
+import SpaceConnectErrorIcon from './space-connect-error.svg';
+
+// 为了输出 icons/index.js 文件，添加一点副作用
+EmptySpacesNFTIcon.displayName = 'EmptySpacesNFTIcon';
+SpacesConnectedIcon.displayName = 'SpacesConnectedIcon';
+SpaceDisconnectedIcon.displayName = 'SpaceDisconnectedIcon';
+SpaceConnectErrorIcon.displayName = 'SpaceConnectErrorIcon';
+
+export { EmptySpacesNFTIcon, SpacesConnectedIcon, SpaceDisconnectedIcon, SpaceConnectErrorIcon };

package/src/index.ts

@@ -3,14 +3,19 @@ import useMobile from './hooks/use-mobile';
 import useSpaceInfo from './hooks/use-space-info';
 import useLocale from './hooks/use-locale';
 
-import SpaceCard from './components/SpaceCard';
-import PreviewNFT from './components/PreviewNFT';
-import ConnectTo from './components/ConnectTo';
-
-export { useMobile, useSpaceInfo, useLocale };
+// components
+export * from './components/space-card';
+export * from './components/preview-space-nft';
+export * from './components/base-connect-to';
+export * from './components/auth-connect-to';
+export * from './components/session-connect-to';
 
+// utils
 export * from './libs/util';
+export * from './libs/gateway';
 export * from './locales';
 export * from './types';
+export { api, useMobile, useSpaceInfo, useLocale };
 
-export { api, SpaceCard, PreviewNFT, ConnectTo };
+// icons
+export * from './icons';

package/src/libs/constants.ts

@@ -0,0 +1,4 @@
+export const AUTHORIZE = {
+  DEFAULT_SCOPE: 'list:object read:object write:object',
+};
+export const copyGatewayPageUrl = 'https://www.arcblock.io/content/docs/did-spaces/how-to-obtain-space-gateway-url';

package/src/libs/util.ts

@@ -1,4 +1,5 @@
 import { joinURL } from 'ufo';
+import isEmpty from 'lodash/isEmpty';
 
 type ClassStr = string | undefined | null;
 /** classObj -> className
@@ -84,3 +85,19 @@ const spaceDidRegex = /\/space\/([^/]+)/;
 export function getSpaceDidFromGatewayUrl(url: string) {
   return new URL(url).pathname.match(spaceDidRegex)?.[1];
 }
+
+export function decryptSpaceGateway(response: Record<string, string>, decrypt: Function) {
+  if (!isEmpty(response.spaceGateway)) {
+    return decrypt(response.spaceGateway);
+  }
+
+  const endpoint = decrypt(response.endpoint);
+  const space = response.space ? decrypt(response.space) : {};
+
+  return {
+    endpoint,
+    // name 默认为 DID Space，兼容旧版本的 DID Spaces
+    ...{ name: 'DID Space' },
+    ...space,
+  };
+}

package/src/locales/en.tsx

@@ -2,34 +2,53 @@ import { flatten } from 'flat';
 
 export default flatten({
   common: {
-    open: 'Open',
-    delete: 'Delete',
-    confirm: 'Confirm',
     cancel: 'Cancel',
+    confirm: 'Confirm',
+    delete: 'Delete',
     error: 'Error',
+    open: 'Open',
+    unknown: 'Unknown',
   },
   storage: {
     spaces: {
+      authorize: {
+        title: 'Connect {appName} to DID Spaces',
+        scan: 'Use your DID Wallet to scan the QR code below to allow the app {appName} to connect to DID Spaces',
+        success: 'Connected successfully',
+      },
       connect: {
+        reconnect: 'Reconnect Now',
         useSpaceGateway: 'Connect using the DID Spaces gateway',
         useWallet: 'Connect with DID Wallet',
+        howToGetGatewayUrl: 'How to get the url of did spaces',
+        providerForStorage: 'Please connect your DID Spaces',
       },
       connected: {
+        title: 'Connected DID Spaces',
         tag: 'Connected',
       },
       disconnected: {
         tag: 'Disconnected',
       },
-      expired: {
-        guide: 'Need Attention',
+      error: {
+        tag: 'Need Attention',
+        expired: 'This DID spaces has expired, you can re-subscribe by opening this link',
+        corsBlocked:
+          'Connection requests may be blocked by CORS. Please check security settings in the DID Space dashboard.',
+        networkError: 'Network error',
       },
       gateway: {
         add: {
-          title: 'Add DID Spaces',
-          label: 'Enter the url of the DID Spaces',
           invalidUrl: 'Invalid DID Spaces gateway url',
+          label: 'Enter the url of the DID Spaces',
+          title: 'Add DID Spaces',
         },
       },
+      provideNFT: {
+        title: 'Please show the DID Spaces NFT for {appName}',
+        scan: 'Use your DID Wallet to scan the QR code below to allow the app {appName} show DID space NFT',
+        success: 'Connected successfully',
+      },
     },
   },
 });

package/src/locales/zh.tsx

@@ -2,34 +2,52 @@ import { flatten } from 'flat';
 
 export default flatten({
   common: {
-    open: '打开',
-    delete: '删除',
-    confirm: '确认',
     cancel: '取消',
+    confirm: '确认',
+    delete: '删除',
     error: '错误',
+    open: '打开',
+    unknown: '未知',
   },
   storage: {
     spaces: {
+      authorize: {
+        title: '连接 {appName} 至 DID Spaces',
+        scan: '使用你的 DID Wallet 扫描下面的二维码以允许应用 {appName} 连接至 DID Spaces',
+        success: '连接成功',
+      },
       connect: {
+        reconnect: '立即重连',
         useSpaceGateway: '使用 DID Spaces 网关连接',
         useWallet: '使用 DID Wallet 连接',
+        howToGetGatewayUrl: '如何获取 DID Spaces 的网关地址',
+        providerForStorage: '请连接您的 DID Spaces',
       },
       connected: {
+        title: '已连接的 DID Spaces',
         tag: '已连接',
       },
       disconnected: {
         tag: '连接已断开',
       },
-      expired: {
-        guide: '需要注意',
+      error: {
+        tag: '需要关注',
+        expired: '此 DID Spaces 已过期，您可以打开此链接重新订阅',
+        corsBlocked: '连接请求可能被 CORS 阻止。请检查 DID Space 控制面板中的安全设置。',
+        networkError: '网络错误',
       },
       gateway: {
         add: {
-          title: '添加 DID Spaces',
-          label: '输入 DID Spaces 的地址',
           invalidUrl: '无效的 DID Spaces 网关地址',
+          label: '输入 DID Spaces 的地址',
+          title: '添加 DID Spaces',
         },
       },
+      provideNFT: {
+        title: '请为 {appName} 出示 DID Spaces NFT',
+        scan: '使用你的 DID Wallet 扫描下面的二维码为应用 {appName} 出示 DID Spaces NFT',
+        success: '连接成功',
+      },
     },
   },
 });

package/src/types/index.ts

@@ -1,27 +1,30 @@
 export type $TSFixMe = any;
 
 export interface AuthorizeConnect {
-  prefix?: string;
-  baseUrl?: string;
   open: boolean;
   action: string;
-  checkTimeout: number;
+  checkFn: Function;
   messages: {
     title: string;
     scan: string;
     confirm: string;
     success: React.ReactNode;
   };
+  prefix?: string;
+  baseUrl?: string;
+  webWalletUrl?: string;
+  maxIdleTime?: number;
+  checkTimeout?: number;
   extraParams?: Record<string, any>;
-  checkFn?: Function;
-  onClose?: Function;
 }
 
 export enum SpaceStatus {
-  UNKNOWN = 'unknown',
+  LOADING = 'loading',
   CONNECTED = 'connected',
   DISCONNECTED = 'disconnected',
   EXPIRED = 'expired',
+  CORS_BLOCKED = 'corsBlocked',
+  UNKNOWN = 'unknown',
 }
 
 export interface SpaceGateway {
@@ -32,3 +35,17 @@ export interface SpaceGateway {
   protected?: boolean;
   loading?: boolean;
 }
+
+export interface BaseAuthOptions {
+  action?: string;
+  checkFn?: Function;
+  extraParams?: Record<string, string>;
+  checkTimeout?: number;
+  onSuccess?: (response: Record<string, string>, decrypt: Function) => Promise<void>;
+  onClose?: () => void;
+}
+
+export interface GatewayAuthOptions extends BaseAuthOptions {
+  spaceDid?: string;
+  spaceGatewayUrl?: string;
+}

package/src/types/shims.d.ts

@@ -4,12 +4,12 @@ declare module '@abtnode/ux/*';
 declare module '@abtnode/util/*';
 declare module '@blocklet/*';
 
-declare module '*.png';
-declare module 'google-libphonenumber';
-declare module 'pretty-ms-i18n';
-
 declare module '*.svg' {
   import React from 'react';
   const SVG: React.FunctionComponent<React.SVGProps<SVGSVGElement>>;
   export default SVG;
 }
+
+declare interface Window {
+  blocklet: import('@blocklet/sdk').WindowBlocklet;
+}

package/es/components/ConnectTo/index.d.ts

@@ -1,10 +0,0 @@
-import { SplitButtonProps } from '@arcblock/ux/lib/SplitButton';
-export interface ConnectToProps extends Omit<SplitButtonProps, 'menu' | 'onClick'> {
-    onWalletConnect?: () => void;
-    onGatewayConnect?: (params: {
-        spaceDid: string;
-        spaceGatewayUrl: string;
-    }) => void;
-}
-declare function ConnectTo({ style, onWalletConnect, onGatewayConnect, ...rest }: ConnectToProps): import("react/jsx-runtime").JSX.Element;
-export default ConnectTo;

package/es/libs/theme.d.ts

@@ -1 +0,0 @@
-export default function create(settings?: any): import("@mui/material").Theme;

package/lib/components/ConnectTo/index.d.ts

@@ -1,10 +0,0 @@
-import { SplitButtonProps } from '@arcblock/ux/lib/SplitButton';
-export interface ConnectToProps extends Omit<SplitButtonProps, 'menu' | 'onClick'> {
-    onWalletConnect?: () => void;
-    onGatewayConnect?: (params: {
-        spaceDid: string;
-        spaceGatewayUrl: string;
-    }) => void;
-}
-declare function ConnectTo({ style, onWalletConnect, onGatewayConnect, ...rest }: ConnectToProps): import("react/jsx-runtime").JSX.Element;
-export default ConnectTo;

package/lib/libs/theme.d.ts

@@ -1 +0,0 @@
-export default function create(settings?: any): import("@mui/material").Theme;

package/src/libs/theme.ts

@@ -1,18 +0,0 @@
-import { createTheme } from '@arcblock/ux/lib/Theme';
-import merge from 'lodash/merge';
-
-export default function create(settings: any = {}) {
-  return createTheme(
-    merge(
-      {
-        typography: {
-          fontSize: 14,
-          allVariants: {
-            textTransform: 'none',
-          },
-        },
-      },
-      settings
-    )
-  );
-}