@blocklet/did-space-react 0.5.57 → 0.5.59

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@blocklet/did-space-react",
-  "version": "0.5.57",
+  "version": "0.5.59",
   "description": "Reusable react components for did space",
   "keywords": [
     "react",
@@ -42,17 +42,29 @@
       "import": "./es/hooks/*.js",
       "require": "./lib/hooks/*.js"
     },
-    "./lib/components/ConnectTo": {
-      "import": "./es/components/ConnectTo/index.js",
-      "require": "./lib/components/ConnectTo/index.js"
+    "./lib/libs/*": {
+      "import": "./es/libs/*.js",
+      "require": "./lib/libs/*.js"
     },
-    "./lib/components/PreviewNFT": {
-      "import": "./es/components/PreviewNFT/index.js",
-      "require": "./lib/components/PreviewNFT/index.js"
+    "./lib/components/auth-connect-to": {
+      "import": "./es/components/auth-connect-to/index.js",
+      "require": "./lib/components/auth-connect-to/index.js"
     },
-    "./lib/components/SpaceCard": {
-      "import": "./es/components/SpaceCard/index.js",
-      "require": "./lib/components/SpaceCard/index.js"
+    "./lib/components/base-connect-to": {
+      "import": "./es/components/base-connect-to/index.js",
+      "require": "./lib/components/base-connect-to/index.js"
+    },
+    "./lib/components/preview-space-nft": {
+      "import": "./es/components/preview-space-nft/index.js",
+      "require": "./lib/components/preview-space-nft/index.js"
+    },
+    "./lib/components/session-connect-to": {
+      "import": "./es/components/session-connect-to/index.js",
+      "require": "./lib/components/session-connect-to/index.js"
+    },
+    "./lib/components/space-card": {
+      "import": "./es/components/space-card/index.js",
+      "require": "./lib/components/space-card/index.js"
     },
     "./lib/icons": {
       "import": "./es/icons/index.js",
@@ -68,22 +80,22 @@
     }
   },
   "dependencies": {
-    "@abtnode/util": "1.16.32",
-    "@arcblock/did": "^1.18.135",
-    "@arcblock/ux": "^2.10.33",
+    "@arcblock/did": "^1.18.136",
+    "@arcblock/did-connect": "^2.10.48",
+    "@arcblock/ux": "^2.10.53",
     "@blocklet/js-sdk": "1.16.32",
-    "@mui/icons-material": "^5.16.6",
+    "@blocklet/sdk": "1.16.32",
+    "@mui/icons-material": "^5.16.7",
     "@mui/lab": "^5.0.0-alpha.173",
-    "@mui/material": "^5.16.6",
-    "@mui/system": "^5.16.6",
-    "@ocap/util": "^1.18.135",
-    "ahooks": "^3.8.0",
-    "axios": "^1.7.5",
+    "@mui/material": "^5.16.7",
+    "@mui/system": "^5.16.7",
+    "ahooks": "^3.8.1",
+    "axios": "^1.7.7",
     "flat": "^5.0.2",
     "is-url": "^1.2.4",
     "lodash": "^4.17.21",
     "p-wait-for": "3",
-    "react-error-boundary": "^4.0.13",
+    "react-error-boundary": "^4.1.2",
     "ufo": "^1.5.4"
   },
   "peerDependencies": {
@@ -93,13 +105,12 @@
     "access": "public"
   },
   "devDependencies": {
-    "@abtnode/client": "^1.16.32",
-    "@arcblock/eslint-config-ts": "^0.3.2",
-    "@babel/cli": "^7.24.8",
-    "@babel/core": "^7.25.2",
-    "@babel/preset-env": "^7.25.8",
-    "@babel/preset-react": "^7.25.7",
-    "@babel/preset-typescript": "^7.25.7",
+    "@arcblock/eslint-config-ts": "^0.3.3",
+    "@babel/cli": "^7.25.9",
+    "@babel/core": "^7.26.0",
+    "@babel/preset-env": "^7.26.0",
+    "@babel/preset-react": "^7.25.9",
+    "@babel/preset-typescript": "^7.26.0",
     "@storybook/addon-essentials": "^7.6.20",
     "@storybook/addon-interactions": "^7.6.20",
     "@storybook/addon-links": "^7.6.20",
@@ -109,26 +120,26 @@
     "@storybook/react-vite": "^7.6.20",
     "@storybook/test": "^7.6.20",
     "@svgr/rollup": "^8.1.0",
-    "@types/react": "^18.3.3",
-    "@types/react-dom": "^18.3.0",
-    "@vitejs/plugin-legacy": "^5.4.1",
-    "@vitest/coverage-v8": "^2.1.2",
+    "@types/react": "^18.3.12",
+    "@types/react-dom": "^18.3.1",
+    "@vitejs/plugin-legacy": "^5.4.3",
+    "@vitest/coverage-v8": "^2.1.4",
     "babel-plugin-inline-react-svg": "^2.0.2",
     "copyfiles": "^2.4.1",
-    "eslint": "^8.57.0",
+    "eslint": "^8.57.1",
     "glob": "^10.4.5",
     "prettier": "^2.8.8",
     "react": "^18.3.1",
     "react-dom": "^18.3.1",
     "rollup-plugin-node-builtins": "^2.1.2",
     "storybook": "^7.6.20",
-    "type-fest": "^4.23.0",
+    "type-fest": "^4.26.1",
     "typescript": "~5.5.4",
     "unbuild": "^2.0.0",
-    "vite": "^5.4.8",
+    "vite": "^5.4.10",
     "vite-plugin-babel": "^1.2.0",
     "vite-plugin-node-polyfills": "^0.22.0",
-    "vitest": "^2.1.2"
+    "vitest": "^2.1.4"
   },
-  "gitHead": "4ead6cc11feaff06936aba21cf3919e01cd12e97"
+  "gitHead": "b78b535df2c165c673fbd8d62db6509abc8ea5d8"
 }

package/src/components/auth-connect-to/base-auth.tsx

@@ -0,0 +1,64 @@
+import { Typography } from '@mui/material';
+import DidConnect from '@arcblock/did-connect/lib/Connect';
+import { RELAY_SOCKET_PREFIX } from '@arcblock/ux/lib/Util/constant';
+import { joinURL } from 'ufo';
+import { createAxios } from '@blocklet/js-sdk';
+import useLocale from '../../hooks/use-locale';
+import { AUTHORIZE } from '../../libs/constants';
+import type { BaseAuthOptions } from '../../types';
+
+export interface BaseAuthProps extends BaseAuthOptions, Record<string, any> {
+  open: boolean;
+}
+
+export function BaseAuth({ open, extraParams, onSuccess, onClose, ...rest }: BaseAuthProps) {
+  const { t, locale } = useLocale();
+
+  const finalExtraParams = {
+    appPid: window.blocklet?.appPid,
+    appDid: window.blocklet?.appId,
+    appName: window.blocklet?.appName,
+    appDescription: window.blocklet?.appDescription,
+    appUrl: window.blocklet?.appUrl,
+    referrer: window.location.href,
+    scopes: AUTHORIZE.DEFAULT_SCOPE,
+    ...extraParams,
+  };
+
+  const {
+    action = 'connect-to-did-spaces',
+    prefix = '/api/did',
+    baseUrl = joinURL(window.location.origin, RELAY_SOCKET_PREFIX),
+    checkFn = createAxios({ baseURL: joinURL(window.location.origin, RELAY_SOCKET_PREFIX) }).get,
+    webWalletUrl = window.blocklet?.webWalletUrl,
+    checkTimeout = 1e3 * 300,
+    messages = {
+      title: t('storage.spaces.provideNFT.title', { appName: finalExtraParams.appName }),
+      scan: t('storage.spaces.provideNFT.scan', { appName: finalExtraParams.appName }),
+      confirm: '',
+      success: <Typography gutterBottom>{t('storage.spaces.provideNFT.success')}</Typography>,
+    },
+    ...restOptions
+  } = rest;
+
+  return (
+    <DidConnect
+      {...restOptions}
+      open={open}
+      action={action}
+      prefix={prefix}
+      baseUrl={baseUrl}
+      checkFn={checkFn}
+      webWalletUrl={webWalletUrl}
+      messages={messages}
+      checkTimeout={checkTimeout}
+      extraParams={finalExtraParams}
+      forceConnected={false}
+      saveConnect={false}
+      popup
+      locale={locale}
+      onSuccess={onSuccess}
+      onClose={onClose}
+    />
+  );
+}

package/src/components/auth-connect-to/gateway-auth.tsx

@@ -0,0 +1,53 @@
+import { joinURL } from 'ufo';
+import { createAxios } from '@blocklet/js-sdk';
+import { Typography } from '@mui/material';
+import useLocale from '../../hooks/use-locale';
+import type { GatewayAuthOptions } from '../../types';
+import { BaseAuth } from './base-auth';
+
+export interface GatewayAuthProps extends GatewayAuthOptions {
+  open: boolean;
+}
+
+export function GatewayAuth({
+  open,
+  spaceDid,
+  spaceGatewayUrl,
+  extraParams = {},
+  onSuccess,
+  onClose,
+}: GatewayAuthProps) {
+  const { t } = useLocale();
+
+  if (!spaceGatewayUrl || !spaceDid) {
+    return null;
+  }
+
+  const { appName = window.blocklet?.appName } = extraParams;
+  const prefix = joinURL(spaceGatewayUrl, 'space/api/did');
+  const baseUrl = new URL(spaceGatewayUrl).origin;
+  const checkFn = createAxios({ baseURL: joinURL(spaceGatewayUrl, 'space') }).get;
+  const messages = {
+    title: t('storage.spaces.authorize.title', { appName }),
+    scan: t('storage.spaces.authorize.scan', { appName }),
+    confirm: '',
+    success: <Typography gutterBottom>{t('storage.spaces.authorize.success')}</Typography>,
+  };
+
+  return (
+    <BaseAuth
+      open={open}
+      action="one-click-authorization"
+      prefix={prefix}
+      baseUrl={baseUrl}
+      checkFn={checkFn}
+      messages={messages}
+      extraParams={{
+        ...extraParams,
+        spaceDid,
+      }}
+      onSuccess={onSuccess}
+      onClose={onClose}
+    />
+  );
+}

package/src/components/auth-connect-to/index.tsx

@@ -0,0 +1,71 @@
+import { useState } from 'react';
+import { BaseConnectTo, type BaseConnectToProps } from '../base-connect-to';
+import { GatewayAuth, type GatewayAuthProps } from './gateway-auth';
+import { BaseAuth, type BaseAuthProps } from './base-auth';
+import { BaseAuthOptions } from '../../types';
+
+export interface Options extends BaseAuthOptions, Record<string, any> {}
+
+export interface AuthConnectToProps extends BaseConnectToProps {
+  options?: Options;
+  onSuccess?: (response: Record<string, string>, decrypt: Function) => Promise<void>;
+}
+
+/** Space 连接组件, 内置 Auth 验证流程 */
+export function AuthConnectTo({ options, onSuccess, ...rest }: AuthConnectToProps) {
+  const [walletOptions, setWalletOptions] = useState({
+    open: false,
+  });
+  const [gatewayOptions, setGatewayOptions] = useState({
+    open: false,
+    spaceDid: '',
+    spaceGatewayUrl: '',
+  });
+
+  const onWalletClick = () => setWalletOptions((pre) => ({ ...pre, open: true }));
+
+  const onGatewayConfirm = ({ spaceDid, spaceGatewayUrl }: { spaceDid: string; spaceGatewayUrl: string }) => {
+    setGatewayOptions((pre) => ({
+      ...pre,
+      open: true,
+      spaceDid,
+      spaceGatewayUrl,
+    }));
+  };
+
+  const handleSuccess = async (response: Record<string, string>, decrypt: Function) => {
+    await onSuccess?.(response, decrypt);
+    setWalletOptions((pre) => ({
+      ...pre,
+      open: false,
+    }));
+    setGatewayOptions((pre) => ({
+      ...pre,
+      open: false,
+    }));
+  };
+
+  return (
+    <>
+      <BaseConnectTo {...rest} onWalletClick={onWalletClick} onGatewayConfirm={onGatewayConfirm} />
+      <BaseAuth
+        {...options}
+        {...walletOptions}
+        onSuccess={handleSuccess}
+        onClose={() => setWalletOptions((pre) => ({ ...pre, open: false }))}
+      />
+      <GatewayAuth
+        {...options}
+        {...gatewayOptions}
+        onSuccess={handleSuccess}
+        onClose={() => setGatewayOptions((pre) => ({ ...pre, open: false }))}
+      />
+    </>
+  );
+}
+
+AuthConnectTo.WalletAuth = BaseAuth;
+AuthConnectTo.GatewayAuth = GatewayAuth;
+
+export { BaseAuth as WalletAuth, type BaseAuthProps as WalletAuthProps };
+export { GatewayAuth, type GatewayAuthProps };

package/src/components/{ConnectTo/connect-to.stories.tsx → base-connect-to/base-connect-to.stories.tsx}

@@ -1,7 +1,7 @@
 import Basic from './stories/basic';
 
 export default {
-  title: 'Connect/ConnectTo',
+  title: 'Connect/BaseConnectTo',
   parameters: {
     layout: 'padded',
   },

package/src/components/{ConnectTo → base-connect-to}/index.tsx

@@ -1,27 +1,31 @@
 import { useState } from 'react';
 import { isValid as isValidDid } from '@arcblock/did';
-import { CircularProgress, DialogContentText, TextField, Typography } from '@mui/material';
+import { CircularProgress, DialogContentText, Link, TextField, Tooltip, Typography } from '@mui/material';
+import HelpOutlineIcon from '@mui/icons-material/HelpOutline';
 import Button from '@arcblock/ux/lib/Button';
 import SplitButton, { SplitButtonProps } from '@arcblock/ux/lib/SplitButton';
 import Dialog from '@arcblock/ux/lib/Dialog';
 
+import { withQuery } from 'ufo';
+import { copyGatewayPageUrl } from '../../libs/constants';
 import { extraDIDSpacesCoreUrl, getSpaceDidFromGatewayUrl } from '../../libs/util';
 import { getSpaceGatewayUrl, isValidSpaceGatewayUrl } from '../../libs/gateway';
 import useLocale from '../../hooks/use-locale';
 
-export interface ConnectToProps extends Omit<SplitButtonProps, 'menu' | 'onClick'> {
-  onWalletConnect?: () => void;
-  onGatewayConnect?: (params: { spaceDid: string; spaceGatewayUrl: string }) => void;
+export interface BaseConnectToProps extends Omit<SplitButtonProps, 'menu' | 'onClick'> {
+  onWalletClick?: () => void;
+  onGatewayConfirm?: (params: { spaceDid: string; spaceGatewayUrl: string }) => void;
 }
 
-function ConnectTo({ style, onWalletConnect, onGatewayConnect, ...rest }: ConnectToProps) {
-  const { t } = useLocale();
+/** 基础连接按钮组件，只负责前端 ux */
+export function BaseConnectTo({ style, onWalletClick, onGatewayConfirm, ...rest }: BaseConnectToProps) {
+  const { t, locale } = useLocale();
   const [url, setUrl] = useState('');
   const [loading, setLoading] = useState(false);
   const [open, setOpen] = useState(false);
   const [errorMessage, setErrorMessage] = useState('');
 
-  const handleUseSpaceGatewayConnect = async () => {
+  const onGatewayChange = async () => {
     try {
       setLoading(true);
 
@@ -33,7 +37,7 @@ function ConnectTo({ style, onWalletConnect, onGatewayConnect, ...rest }: Connec
         throw new Error(t('storage.spaces.gateway.add.invalidUrl'));
       }
 
-      onGatewayConnect?.({
+      onGatewayConfirm?.({
         spaceDid: spaceDid!,
         spaceGatewayUrl: didSpacesCoreUrl,
       });
@@ -46,7 +50,7 @@ function ConnectTo({ style, onWalletConnect, onGatewayConnect, ...rest }: Connec
     }
   };
 
-  const openGatewayInput = () => {
+  const onGatewayClick = () => {
     setErrorMessage('');
     setUrl('');
     setOpen(true);
@@ -62,19 +66,18 @@ function ConnectTo({ style, onWalletConnect, onGatewayConnect, ...rest }: Connec
               textTransform: 'none',
             }}
             key="1"
-            onClick={openGatewayInput}
             size="small"
-            {...rest}
+            onClick={onGatewayClick}
           >
             {t('storage.spaces.connect.useSpaceGateway')}
           </SplitButton.Item>,
         ]}
-        onClick={onWalletConnect}
         color="primary"
         // @ts-expect-error
         style={{ textTransform: 'none !important', fontSize: '1rem', ...style }}
         size="small"
         {...rest}
+        onClick={onWalletClick}
       >
         <Typography sx={{ fontWeight: 'bold', textTransform: 'none' }}>
           {t('storage.spaces.connect.useWallet')}
@@ -99,13 +102,7 @@ function ConnectTo({ style, onWalletConnect, onGatewayConnect, ...rest }: Connec
             >
               {t('common.cancel')}
             </Button>
-            <Button
-              onClick={handleUseSpaceGatewayConnect}
-              color="primary"
-              disabled={loading || !url}
-              variant="contained"
-              autoFocus
-            >
+            <Button onClick={onGatewayChange} color="primary" disabled={loading || !url} variant="contained" autoFocus>
               {loading && <CircularProgress size={16} />}
               {t('common.confirm')}
             </Button>
@@ -131,10 +128,28 @@ function ConnectTo({ style, onWalletConnect, onGatewayConnect, ...rest }: Connec
                 helperText={errorMessage}
                 onKeyDown={async (e) => {
                   if (e.key === 'Enter') {
-                    await handleUseSpaceGatewayConnect();
+                    await onGatewayChange();
                   }
                 }}
                 autoFocus
+                InputProps={{
+                  endAdornment: (
+                    <Tooltip title={t('storage.spaces.connect.howToGetGatewayUrl')} placement="top">
+                      {/* 打开如何复制网关地址 */}
+                      <Link href={withQuery(copyGatewayPageUrl, { locale })} target="_blank">
+                        <HelpOutlineIcon
+                          sx={{
+                            ml: 0.5,
+                            color: 'text.secondary',
+                            cursor: 'pointer',
+                            fontSize: '18px',
+                            verticalAlign: '-2px',
+                          }}
+                        />
+                      </Link>
+                    </Tooltip>
+                  ),
+                }}
               />
             </Typography>
           </DialogContentText>
@@ -143,5 +158,3 @@ function ConnectTo({ style, onWalletConnect, onGatewayConnect, ...rest }: Connec
     </>
   );
 }
-
-export default ConnectTo;

package/src/components/{PreviewNFT → preview-space-nft}/index.tsx

@@ -1,9 +1,17 @@
 import { useState } from 'react';
 import { Dialog, DialogContent, IconButton } from '@mui/material';
 import CloseOutlinedIcon from '@mui/icons-material/CloseOutlined';
-import { EmptySpacesNFT } from '../../icons';
+import { EmptySpacesNFTIcon } from '../../icons';
 
-function PreviewSpaceNft({ src, width = '58px', height = '58px' }: { src: string; width?: string; height?: string }) {
+export function PreviewSpaceNft({
+  src,
+  width = '58px',
+  height = '58px',
+}: {
+  src: string;
+  width?: string;
+  height?: string;
+}) {
   const [open, setOpen] = useState(false);
 
   const handleOpen = () => setOpen(true);
@@ -13,7 +21,7 @@ function PreviewSpaceNft({ src, width = '58px', height = '58px' }: { src: string
     <>
       <div style={{ position: 'relative' }} onClick={handleOpen}>
         <object data={src} width={width} height={height}>
-          <EmptySpacesNFT viewBox="0 0 228 258" style={{ cursor: 'pointer', width: '64px', height: '64px' }} />
+          <EmptySpacesNFTIcon viewBox="0 0 228 258" style={{ cursor: 'pointer', width: '64px', height: '64px' }} />
         </object>
         <div
           style={{
@@ -54,7 +62,7 @@ function PreviewSpaceNft({ src, width = '58px', height = '58px' }: { src: string
               objectFit: 'contain',
             }}
           >
-            <EmptySpacesNFT
+            <EmptySpacesNFTIcon
               viewBox="0 0 228 258"
               style={{
                 width: '100%',
@@ -68,5 +76,3 @@ function PreviewSpaceNft({ src, width = '58px', height = '58px' }: { src: string
     </>
   );
 }
-
-export default PreviewSpaceNft;

package/src/components/session-connect-to/index.tsx

@@ -0,0 +1,39 @@
+import { BlockletSDK } from '@blocklet/js-sdk';
+import { decryptSpaceGateway } from '../../libs/util';
+import { SpaceGateway } from '../../types';
+import { AuthConnectTo, type Options } from '../auth-connect-to';
+import { BaseConnectToProps } from '../base-connect-to';
+import { ReConnect, type ReConnectProps } from './re-connect';
+
+export interface SessionConnectToProps extends Omit<BaseConnectToProps, 'onError'> {
+  session: {
+    refresh: Function;
+  };
+  onConnected?: (spaceGateway: SpaceGateway) => Promise<void>;
+  onError?: (error: Error) => void;
+}
+
+/** 会话连接组件，会将 spaceGateway 信息存储于 users 表 */
+export function SessionConnectTo({ session, onConnected, onError, ...rest }: SessionConnectToProps) {
+  const options: Partial<Options> = {
+    action: 'connect-to-did-spaces-for-user',
+  };
+
+  const onSuccess = async (response: Record<string, string>, decrypt: Function) => {
+    try {
+      const spaceGateway = decryptSpaceGateway(response, decrypt);
+      await new BlockletSDK().user.updateDidSpace({ spaceGateway });
+      session.refresh();
+      await onConnected?.(spaceGateway);
+    } catch (err) {
+      console.error(err);
+      onError?.(err as Error);
+    }
+  };
+
+  return <AuthConnectTo {...rest} options={options} onSuccess={onSuccess} />;
+}
+
+SessionConnectTo.ReConnect = ReConnect;
+
+export { ReConnect, type ReConnectProps };

package/src/components/session-connect-to/re-connect.tsx

@@ -0,0 +1,57 @@
+import { Button, ButtonProps } from '@mui/material';
+import { useState } from 'react';
+import { BlockletSDK } from '@blocklet/js-sdk';
+import useLocale from '../../hooks/use-locale';
+import { decryptSpaceGateway } from '../../libs/util';
+import { GatewayAuth } from '../auth-connect-to/gateway-auth';
+import { SpaceGateway } from '../../types';
+
+export interface ReConnectProps extends Omit<ButtonProps, 'onClick' | 'onError'> {
+  session: {
+    refresh: Function;
+  };
+  spaceDid: string;
+  spaceGatewayUrl: string;
+  onConnected?: (spaceGateway: SpaceGateway) => Promise<void>;
+  onError?: (error: Error) => void;
+}
+
+/** 用于 DApp 重新连接 Space */
+export function ReConnect({ session, spaceDid, spaceGatewayUrl, onConnected, onError, ...rest }: ReConnectProps) {
+  const { t } = useLocale();
+  const [authOptions, setAuthOptions] = useState({
+    open: false,
+    spaceDid,
+    spaceGatewayUrl,
+  });
+
+  const onSuccess = async (response: Record<string, string>, decrypt: Function) => {
+    try {
+      const spaceGateway = decryptSpaceGateway(response, decrypt);
+      await new BlockletSDK().user.updateDidSpace({ spaceGateway });
+      session.refresh();
+      await onConnected?.(spaceGateway);
+    } catch (err) {
+      console.error(err);
+      onError?.(err as Error);
+    } finally {
+      setAuthOptions((pre) => ({ ...pre, open: false }));
+    }
+  };
+
+  return (
+    <Button
+      {...rest}
+      onClick={() => {
+        setAuthOptions((pre) => ({ ...pre, open: true }));
+      }}
+    >
+      {t('storage.spaces.connect.reconnect')}
+      <GatewayAuth
+        {...authOptions}
+        onSuccess={onSuccess}
+        onClose={() => setAuthOptions((pre) => ({ ...pre, open: false }))}
+      />
+    </Button>
+  );
+}