@blocklet/did-space-react 0.5.58 → 0.5.60

package/.turbo/turbo-build.log

@@ -1,49 +1,68 @@
 
-> @blocklet/did-space-react@0.5.57 build /home/runner/work/did-spaces/did-spaces/packages/react
+> @blocklet/did-space-react@0.5.59 build /home/runner/work/did-spaces/did-spaces/packages/react
 > unbuild && node tools/auto-exports.js && npm run cpfiles && node tools/build-types.js
 
 [info] Building did-space-react
 [info] Cleaning dist directory: `./lib`
 [success] Build succeeded for did-space-react
-[log]   dist/index.js (total size: 1.35 kB, chunk size: 1.35 kB, exports: ConnectTo, PreviewNFT, SpaceCard, SpaceStatus, api, classNames, extraDIDSpacesCoreUrl, getDIDSpaceDidFromEndpoint, getDIDSpaceUrlFromEndpoint, getSpaceDidFromEndpoint, getSpaceDidFromGatewayUrl, getSpaceGatewayUrlFromEndpoint, getSpaceNftDisplayUrlFromEndpoint, translations, useLocale, useMobile, useSpaceInfo)
+[log]   dist/index.js (total size: 2.72 kB, chunk size: 2.72 kB, exports: AuthConnectTo, BaseConnectTo, EmptySpacesNFTIcon, GatewayAuth, PreviewSpaceNft, ReConnect, SessionConnectTo, SpaceCard, SpaceConnectErrorIcon, SpaceDisconnectedIcon, SpaceStatus, SpacesConnectedIcon, WalletAuth, api, classNames, decryptSpaceGateway, extraDIDSpacesCoreUrl, getDIDSpaceDidFromEndpoint, getDIDSpaceUrlFromEndpoint, getSpaceDidFromEndpoint, getSpaceDidFromGatewayUrl, getSpaceGatewayUrl, getSpaceGatewayUrlFromEndpoint, getSpaceNftDisplayUrlFromEndpoint, isValidSpaceGatewayUrl, translations, useLocale, useMobile, useSpaceInfo)
   └─ dist/libs/api.js
   └─ dist/hooks/use-mobile.js
   └─ dist/hooks/use-space-info.js
   └─ dist/hooks/use-locale.js
-  └─ dist/components/SpaceCard/index.js
-  └─ dist/components/PreviewNFT/index.js
-  └─ dist/components/ConnectTo/index.js
+  └─ dist/components/space-card/index.js
+  └─ dist/components/preview-space-nft/index.js
+  └─ dist/components/base-connect-to/index.js
+  └─ dist/components/auth-connect-to/index.js
+  └─ dist/components/session-connect-to/index.js
   └─ dist/libs/util.js
+  └─ dist/libs/gateway.js
   └─ dist/locales/index.js
   └─ dist/types/index.js
+  └─ dist/icons/index.js
+  └─ dist/icons/empty-space-nft.svg.js
+  └─ dist/icons/space-connected.svg.js
+  └─ dist/icons/space-disconnect.svg.js
+  └─ dist/icons/space-connect-error.svg.js
+  └─ dist/components/auth-connect-to/base-auth.js
+  └─ dist/components/auth-connect-to/gateway-auth.js
+  └─ dist/components/session-connect-to/re-connect.js
 
-Σ Total dist size (byte size): 1.35 kB
+Σ Total dist size (byte size): 2.72 kB
 [log]
 [warn] Build is done with some warnings:
+
+- Potential missing package.json files: es/index.js, es/hooks, es/libs, es/components/auth-connect-to/index.js, es/components/base-connect-to/index.js, es/components/preview-space-nft/index.js, es/components/session-connect-to/index.js, es/components/space-card/index.js, es/icons/index.js, es/locales/index.js, es/types/index.js
 [info] Building did-space-react
 [info] Cleaning dist directory: `./es`
-
-- Potential missing package.json files: es/index.js, es/hooks, es/components/ConnectTo/index.js, es/components/PreviewNFT/index.js, es/components/SpaceCard/index.js, es/icons/index.js, lib/icons/index.js, es/locales/index.js, es/types/index.js
 [success] Build succeeded for did-space-react
-[log]   dist/index.js (total size: 801 B, chunk size: 801 B, exports: ConnectTo, PreviewNFT, SpaceCard, SpaceStatus, api, classNames, extraDIDSpacesCoreUrl, getDIDSpaceDidFromEndpoint, getDIDSpaceUrlFromEndpoint, getSpaceDidFromEndpoint, getSpaceDidFromGatewayUrl, getSpaceGatewayUrlFromEndpoint, getSpaceNftDisplayUrlFromEndpoint, translations, useLocale, useMobile, useSpaceInfo)
+[log]   dist/index.js (total size: 1.63 kB, chunk size: 1.63 kB, exports: AuthConnectTo, BaseConnectTo, EmptySpacesNFTIcon, GatewayAuth, PreviewSpaceNft, ReConnect, SessionConnectTo, SpaceCard, SpaceConnectErrorIcon, SpaceDisconnectedIcon, SpaceStatus, SpacesConnectedIcon, WalletAuth, api, classNames, decryptSpaceGateway, extraDIDSpacesCoreUrl, getDIDSpaceDidFromEndpoint, getDIDSpaceUrlFromEndpoint, getSpaceDidFromEndpoint, getSpaceDidFromGatewayUrl, getSpaceGatewayUrl, getSpaceGatewayUrlFromEndpoint, getSpaceNftDisplayUrlFromEndpoint, isValidSpaceGatewayUrl, translations, useLocale, useMobile, useSpaceInfo)
   └─ dist/libs/api.js
   └─ dist/hooks/use-mobile.js
   └─ dist/hooks/use-space-info.js
   └─ dist/hooks/use-locale.js
-  └─ dist/components/SpaceCard/index.js
-  └─ dist/components/PreviewNFT/index.js
-  └─ dist/components/ConnectTo/index.js
+  └─ dist/components/space-card/index.js
+  └─ dist/components/preview-space-nft/index.js
+  └─ dist/components/base-connect-to/index.js
+  └─ dist/components/auth-connect-to/index.js
+  └─ dist/components/session-connect-to/index.js
   └─ dist/libs/util.js
+  └─ dist/libs/gateway.js
   └─ dist/locales/index.js
   └─ dist/types/index.js
+  └─ dist/icons/index.js
+  └─ dist/icons/empty-space-nft.svg.js
+  └─ dist/icons/space-connected.svg.js
+  └─ dist/icons/space-disconnect.svg.js
+  └─ dist/icons/space-connect-error.svg.js
+  └─ dist/components/auth-connect-to/base-auth.js
+  └─ dist/components/auth-connect-to/gateway-auth.js
+  └─ dist/components/session-connect-to/re-connect.js
 
-Σ Total dist size (byte size): 801 B
+Σ Total dist size (byte size): 1.63 kB
 [log]
-[warn] Build is done with some warnings:
-
-- Potential missing package.json files: es/icons/index.js, lib/icons/index.js
 
-> @blocklet/did-space-react@0.5.57 cpfiles
+> @blocklet/did-space-react@0.5.59 cpfiles
 > copyfiles -u 1 './src/**/*.css' lib/ && copyfiles -u 1 './src/**/*.css' es/
 
 tsc --declaration --emitDeclarationOnly --outDir lib --rootDir /home/runner/work/did-spaces/did-spaces/packages/react/src

package/.turbo/turbo-lint$colon$fix.log

@@ -1,8 +1,8 @@
 
-> @blocklet/did-space-react@0.5.58 lint:fix /home/runner/work/did-spaces/did-spaces/packages/react
+> @blocklet/did-space-react@0.5.60 lint:fix /home/runner/work/did-spaces/did-spaces/packages/react
 > npm run lint -- --fix
 
 
-> @blocklet/did-space-react@0.5.58 lint
+> @blocklet/did-space-react@0.5.60 lint
 > tsc --noEmit && eslint src tests --ext js --ext jsx --ext ts --ext tsx --fix
 

package/README.md

@@ -3,50 +3,96 @@
 ## SpaceCard
 
 ```tsx
-const endpoint = "https://${spaceDomain}/app/api/space/${spaceDid}/app/${appDid}/object/"
-
-// Basic Use
-<SpaceCard endpoint={endpoint} />
-
-// With Action
-<SpaceCard endpoint={endpoint} action={
-  <IconButton
-    size="small"
-    LinkComponent={Link}
-    href={getSpaceHomeUrl(spaceGateway.endpoint)}
-    target="_blank">
-    <OpenInNewIcon />
-  </IconButton>
-}/>
-
-// With Render Action
-<SpaceCard
-  sx={{ marginTop: '12px', '&.selected': { borderColor: 'primary.main' } }}
-  key={x.endpoint}
-  endpoint={x.endpoint}
-  selected={x.endpoint === backupEndpoint}
-  action={({ spaceGateway, selected, compat, refresh }) => (
-    <MoreAction
-      spaceGateway={x}
-      onConnected={() => refresh()}
-      onBackedUp={() => refresh()}
+import { SpaceCard } from '@blocklet/did-space-react';
+
+function Demo() {
+  const endpoint = 'https://${spaceDomain}/app/api/space/${spaceDid}/app/${appDid}/object/';
+
+  return (
+    <>
+      {/* Basic use*/}
+      <SpaceCard endpoint={endpoint} selected />
+      {/* Compat layout */}
+      <SpaceCard endpoint={endpoint} selected compat />
+      {/* With Action */}
+      <SpaceCard
+        endpoint={endpoint}
+        selected
+        action={
+          <IconButton size="small" LinkComponent={Link} href={getSpaceHomeUrl(spaceGateway.endpoint)} target="_blank">
+            <OpenInNewIcon />
+          </IconButton>
+        }
+      />
+      {/* With Render Action */}
+      <SpaceCard
+        endpoint={x.endpoint}
+        selected
+        action={({ spaceGateway, selected, refresh }) => (
+          <MoreAction spaceGateway={spaceGateway} onBackedUp={() => refresh()} />
+        )}
+      />
+    </>
+  );
+}
+```
+
+## BaseConnectTo
+
+```tsx
+import { BaseConnectTo } from '@blocklet/did-space-react';
+
+function Demo() {
+  return (
+    <BaseConnectTo
+      onWalletClick={() => {
+        // eslint-disable-next-line no-console
+        console.log('on Wallet Click');
+      }}
+      onGatewayConfirm={({ spaceDid, spaceGatewayUrl }) => {
+        // eslint-disable-next-line no-console
+        console.log(`on Gateway Confirm\n spaceDid: ${spaceDid}\n spaceGatewayUrl: ${spaceGatewayUrl}`);
+      }}
     />
-  )}
-/>
+  );
+}
+```
+
+## AuthConnectTo
+
+Auto connect to DID Space and save space gateway:
+
+```tsx
+import Toast from '@arcblock/ux/lib/Toast';
+import { decryptSpaceGateway, AuthConnectTo, type AuthConnectToProps } from '@blocklet/did-space-react';
+
+function ConnectTo({ ...rest }: AuthConnectToProps) {
+  const onSuccess = async (response: Record<string, string>, decrypt: Function) => {
+    try {
+      const spaceGateway = decryptSpaceGateway(response, decrypt);
+      // do sth to save space gateway
+    } catch (error) {
+      console.error(error);
+      Toast.error(formatError(error));
+    }
+  };
+
+  return <AuthConnectTo {...rest} onSuccess={onSuccess} />;
+}
+
+export default ConnectTo;
 ```
 
-## ConnectTo
+## SessionConnectTo
+
+Auto connect to DID Space and save space gateway to the users table:
 
 ```tsx
-// trigger when click 'Connect with DID Wallet'
-const onWalletConnect = () => {
-  // ...rest
-};
+import { SessionConnectTo } from '@blocklet/did-space-react';
 
-// trigger when use 'Connect using the DID Spaces gateway'
-const onGatewayConnect = ({ spaceDid, spaceGatewayUrl }: { spaceDid: string; spaceGatewayUrl: string }) => {
-  // ...rest
-};
+function ConnectTo() {
+  const session = useSessionContext();
 
-<ConnectTo onWalletConnect={onWalletConnect} onGatewayConnect={onGatewayConnect} />;
+  return <SessionConnectTo session={session} />;
+}
 ```

package/es/components/auth-connect-to/base-auth.d.ts

@@ -0,0 +1,5 @@
+import type { BaseAuthOptions } from '../../types';
+export interface BaseAuthProps extends BaseAuthOptions, Record<string, any> {
+    open: boolean;
+}
+export declare function BaseAuth({ open, extraParams, onSuccess, onClose, ...rest }: BaseAuthProps): import("react/jsx-runtime").JSX.Element;

package/es/components/auth-connect-to/base-auth.js

@@ -0,0 +1,60 @@
+import { jsx } from 'react/jsx-runtime';
+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.js';
+import { AUTHORIZE } from '../../libs/constants.js';
+
+function BaseAuth({ open, extraParams, onSuccess, onClose, ...rest }) {
+  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: /* @__PURE__ */ jsx(Typography, { gutterBottom: true, children: t("storage.spaces.provideNFT.success") })
+    },
+    ...restOptions
+  } = rest;
+  return /* @__PURE__ */ jsx(
+    DidConnect,
+    {
+      ...restOptions,
+      open,
+      action,
+      prefix,
+      baseUrl,
+      checkFn,
+      webWalletUrl,
+      messages,
+      checkTimeout,
+      extraParams: finalExtraParams,
+      forceConnected: false,
+      saveConnect: false,
+      popup: true,
+      locale,
+      onSuccess,
+      onClose
+    }
+  );
+}
+
+export { BaseAuth };

package/es/components/auth-connect-to/gateway-auth.d.ts

@@ -0,0 +1,5 @@
+import type { GatewayAuthOptions } from '../../types';
+export interface GatewayAuthProps extends GatewayAuthOptions {
+    open: boolean;
+}
+export declare function GatewayAuth({ open, spaceDid, spaceGatewayUrl, extraParams, onSuccess, onClose, }: GatewayAuthProps): import("react/jsx-runtime").JSX.Element | null;

package/es/components/auth-connect-to/gateway-auth.js

@@ -0,0 +1,49 @@
+import { jsx } from 'react/jsx-runtime';
+import { joinURL } from 'ufo';
+import { createAxios } from '@blocklet/js-sdk';
+import { Typography } from '@mui/material';
+import useLocale from '../../hooks/use-locale.js';
+import { BaseAuth } from './base-auth.js';
+
+function GatewayAuth({
+  open,
+  spaceDid,
+  spaceGatewayUrl,
+  extraParams = {},
+  onSuccess,
+  onClose
+}) {
+  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: /* @__PURE__ */ jsx(Typography, { gutterBottom: true, children: t("storage.spaces.authorize.success") })
+  };
+  return /* @__PURE__ */ jsx(
+    BaseAuth,
+    {
+      open,
+      action: "one-click-authorization",
+      prefix,
+      baseUrl,
+      checkFn,
+      messages,
+      extraParams: {
+        ...extraParams,
+        spaceDid
+      },
+      onSuccess,
+      onClose
+    }
+  );
+}
+
+export { GatewayAuth };

package/es/components/auth-connect-to/index.d.ts

@@ -0,0 +1,18 @@
+import { 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 declare function AuthConnectTo({ options, onSuccess, ...rest }: AuthConnectToProps): import("react/jsx-runtime").JSX.Element;
+export declare namespace AuthConnectTo {
+    var WalletAuth: typeof BaseAuth;
+    var GatewayAuth: typeof import("./gateway-auth").GatewayAuth;
+}
+export { BaseAuth as WalletAuth, type BaseAuthProps as WalletAuthProps };
+export { GatewayAuth, type GatewayAuthProps };

package/es/components/auth-connect-to/index.js

@@ -0,0 +1,61 @@
+import { jsxs, Fragment, jsx } from 'react/jsx-runtime';
+import { useState } from 'react';
+import { BaseConnectTo } from '../base-connect-to/index.js';
+import { GatewayAuth } from './gateway-auth.js';
+import { BaseAuth } from './base-auth.js';
+
+function AuthConnectTo({ options, onSuccess, ...rest }) {
+  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 }) => {
+    setGatewayOptions((pre) => ({
+      ...pre,
+      open: true,
+      spaceDid,
+      spaceGatewayUrl
+    }));
+  };
+  const handleSuccess = async (response, decrypt) => {
+    await onSuccess?.(response, decrypt);
+    setWalletOptions((pre) => ({
+      ...pre,
+      open: false
+    }));
+    setGatewayOptions((pre) => ({
+      ...pre,
+      open: false
+    }));
+  };
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsx(BaseConnectTo, { ...rest, onWalletClick, onGatewayConfirm }),
+    /* @__PURE__ */ jsx(
+      BaseAuth,
+      {
+        ...options,
+        ...walletOptions,
+        onSuccess: handleSuccess,
+        onClose: () => setWalletOptions((pre) => ({ ...pre, open: false }))
+      }
+    ),
+    /* @__PURE__ */ jsx(
+      GatewayAuth,
+      {
+        ...options,
+        ...gatewayOptions,
+        onSuccess: handleSuccess,
+        onClose: () => setGatewayOptions((pre) => ({ ...pre, open: false }))
+      }
+    )
+  ] });
+}
+AuthConnectTo.WalletAuth = BaseAuth;
+AuthConnectTo.GatewayAuth = GatewayAuth;
+
+export { AuthConnectTo, GatewayAuth, BaseAuth as WalletAuth };

package/es/components/base-connect-to/index.d.ts

@@ -0,0 +1,10 @@
+import { SplitButtonProps } from '@arcblock/ux/lib/SplitButton';
+export interface BaseConnectToProps extends Omit<SplitButtonProps, 'menu' | 'onClick'> {
+    onWalletClick?: () => void;
+    onGatewayConfirm?: (params: {
+        spaceDid: string;
+        spaceGatewayUrl: string;
+    }) => void;
+}
+/** 基础连接按钮组件，只负责前端 ux */
+export declare function BaseConnectTo({ style, onWalletClick, onGatewayConfirm, ...rest }: BaseConnectToProps): import("react/jsx-runtime").JSX.Element;

package/es/components/{ConnectTo → base-connect-to}/index.js

@@ -1,21 +1,24 @@
 import { jsxs, Fragment, jsx } from 'react/jsx-runtime';
 import { useState } from 'react';
 import { isValid } from '@arcblock/did';
-import { Typography, CircularProgress, DialogContentText, TextField } from '@mui/material';
+import { Typography, CircularProgress, DialogContentText, TextField, Tooltip, Link } from '@mui/material';
+import HelpOutlineIcon from '@mui/icons-material/HelpOutline';
 import Button from '@arcblock/ux/lib/Button';
 import SplitButton from '@arcblock/ux/lib/SplitButton';
 import Dialog from '@arcblock/ux/lib/Dialog';
+import { withQuery } from 'ufo';
+import { copyGatewayPageUrl } from '../../libs/constants.js';
 import { extraDIDSpacesCoreUrl, getSpaceDidFromGatewayUrl } from '../../libs/util.js';
 import { getSpaceGatewayUrl, isValidSpaceGatewayUrl } from '../../libs/gateway.js';
 import useLocale from '../../hooks/use-locale.js';
 
-function ConnectTo({ style, onWalletConnect, onGatewayConnect, ...rest }) {
-  const { t } = useLocale();
+function BaseConnectTo({ style, onWalletClick, onGatewayConfirm, ...rest }) {
+  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);
       const spaceGatewayUrl = await getSpaceGatewayUrl(url);
@@ -24,7 +27,7 @@ function ConnectTo({ style, onWalletConnect, onGatewayConnect, ...rest }) {
       if (!isValid(spaceDid) || !await isValidSpaceGatewayUrl(didSpacesCoreUrl)) {
         throw new Error(t("storage.spaces.gateway.add.invalidUrl"));
       }
-      onGatewayConnect?.({
+      onGatewayConfirm?.({
         spaceDid,
         spaceGatewayUrl: didSpacesCoreUrl
       });
@@ -36,7 +39,7 @@ function ConnectTo({ style, onWalletConnect, onGatewayConnect, ...rest }) {
       setLoading(false);
     }
   };
-  const openGatewayInput = () => {
+  const onGatewayClick = () => {
     setErrorMessage("");
     setUrl("");
     setOpen(true);
@@ -53,19 +56,18 @@ function ConnectTo({ style, onWalletConnect, onGatewayConnect, ...rest }) {
               sx: {
                 textTransform: "none"
               },
-              onClick: openGatewayInput,
               size: "small",
-              ...rest,
+              onClick: onGatewayClick,
               children: t("storage.spaces.connect.useSpaceGateway")
             },
             "1"
           )
         ],
-        onClick: onWalletConnect,
         color: "primary",
         style: { textTransform: "none !important", fontSize: "1rem", ...style },
         size: "small",
         ...rest,
+        onClick: onWalletClick,
         children: /* @__PURE__ */ jsx(Typography, { sx: { fontWeight: "bold", textTransform: "none" }, children: t("storage.spaces.connect.useWallet") })
       }
     ),
@@ -91,20 +93,10 @@ function ConnectTo({ style, onWalletConnect, onGatewayConnect, ...rest }) {
               children: t("common.cancel")
             }
           ),
-          /* @__PURE__ */ jsxs(
-            Button,
-            {
-              onClick: handleUseSpaceGatewayConnect,
-              color: "primary",
-              disabled: loading || !url,
-              variant: "contained",
-              autoFocus: true,
-              children: [
-                loading && /* @__PURE__ */ jsx(CircularProgress, { size: 16 }),
-                t("common.confirm")
-              ]
-            }
-          )
+          /* @__PURE__ */ jsxs(Button, { onClick: onGatewayChange, color: "primary", disabled: loading || !url, variant: "contained", autoFocus: true, children: [
+            loading && /* @__PURE__ */ jsx(CircularProgress, { size: 16 }),
+            t("common.confirm")
+          ] })
         ] }),
         children: /* @__PURE__ */ jsx("div", { style: { paddingTop: 12, overflowY: "hidden" }, children: /* @__PURE__ */ jsx(DialogContentText, { component: "div", children: /* @__PURE__ */ jsx(Typography, { component: "div", children: /* @__PURE__ */ jsx(
           TextField,
@@ -124,10 +116,24 @@ function ConnectTo({ style, onWalletConnect, onGatewayConnect, ...rest }) {
             helperText: errorMessage,
             onKeyDown: async (e) => {
               if (e.key === "Enter") {
-                await handleUseSpaceGatewayConnect();
+                await onGatewayChange();
               }
             },
-            autoFocus: true
+            autoFocus: true,
+            InputProps: {
+              endAdornment: /* @__PURE__ */ jsx(Tooltip, { title: t("storage.spaces.connect.howToGetGatewayUrl"), placement: "top", children: /* @__PURE__ */ jsx(Link, { href: withQuery(copyGatewayPageUrl, { locale }), target: "_blank", children: /* @__PURE__ */ jsx(
+                HelpOutlineIcon,
+                {
+                  sx: {
+                    ml: 0.5,
+                    color: "text.secondary",
+                    cursor: "pointer",
+                    fontSize: "18px",
+                    verticalAlign: "-2px"
+                  }
+                }
+              ) }) })
+            }
           }
         ) }) }) })
       }
@@ -135,4 +141,4 @@ function ConnectTo({ style, onWalletConnect, onGatewayConnect, ...rest }) {
   ] });
 }
 
-export { ConnectTo as default };
+export { BaseConnectTo };

package/{lib/components/PreviewNFT → es/components/preview-space-nft}/index.d.ts

@@ -1,6 +1,5 @@
-declare function PreviewSpaceNft({ src, width, height }: {
+export declare function PreviewSpaceNft({ src, width, height, }: {
     src: string;
     width?: string;
     height?: string;
 }): import("react/jsx-runtime").JSX.Element;
-export default PreviewSpaceNft;

package/es/components/{PreviewNFT → preview-space-nft}/index.js

@@ -2,9 +2,14 @@ import { jsxs, Fragment, jsx } from 'react/jsx-runtime';
 import { useState } from 'react';
 import { Dialog, DialogContent, IconButton } from '@mui/material';
 import CloseOutlinedIcon from '@mui/icons-material/CloseOutlined';
+import '../../icons/index.js';
 import SvgEmptySpaceNft from '../../icons/empty-space-nft.svg.js';
 
-function PreviewSpaceNft({ src, width = "58px", height = "58px" }) {
+function PreviewSpaceNft({
+  src,
+  width = "58px",
+  height = "58px"
+}) {
   const [open, setOpen] = useState(false);
   const handleOpen = () => setOpen(true);
   const handleClose = () => setOpen(false);
@@ -76,4 +81,4 @@ function PreviewSpaceNft({ src, width = "58px", height = "58px" }) {
   ] });
 }
 
-export { PreviewSpaceNft as default };
+export { PreviewSpaceNft };

package/es/components/session-connect-to/index.d.ts

@@ -0,0 +1,16 @@
+import { SpaceGateway } from '../../types';
+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 declare function SessionConnectTo({ session, onConnected, onError, ...rest }: SessionConnectToProps): import("react/jsx-runtime").JSX.Element;
+export declare namespace SessionConnectTo {
+    var ReConnect: typeof import("./re-connect").ReConnect;
+}
+export { ReConnect, type ReConnectProps };

package/es/components/session-connect-to/index.js

@@ -0,0 +1,26 @@
+import { jsx } from 'react/jsx-runtime';
+import { BlockletSDK } from '@blocklet/js-sdk';
+import { decryptSpaceGateway } from '../../libs/util.js';
+import { AuthConnectTo } from '../auth-connect-to/index.js';
+import { ReConnect } from './re-connect.js';
+
+function SessionConnectTo({ session, onConnected, onError, ...rest }) {
+  const options = {
+    action: "connect-to-did-spaces-for-user"
+  };
+  const onSuccess = async (response, decrypt) => {
+    try {
+      const spaceGateway = decryptSpaceGateway(response, decrypt);
+      await new BlockletSDK().user.updateDidSpace({ spaceGateway });
+      session.refresh();
+      await onConnected?.(spaceGateway);
+    } catch (err) {
+      console.error(err);
+      onError?.(err);
+    }
+  };
+  return /* @__PURE__ */ jsx(AuthConnectTo, { ...rest, options, onSuccess });
+}
+SessionConnectTo.ReConnect = ReConnect;
+
+export { ReConnect, SessionConnectTo };