@blocklet/did-space-react 0.6.1 → 1.0.1

package/README.md

@@ -1,98 +1,145 @@
-# DID Space Components
+# Getting Started
 
-## SpaceCard
+This package provides React components designed to help you seamlessly integrate and interact with DID Space. With these components, you can easily enable users to connect to and display information about their DID Space.
 
-```tsx
-import { SpaceCard } from '@blocklet/did-space-react';
+```bash
+# install
+npm install @blocklet/did-space-react
+```
 
-function Demo() {
-  const endpoint = 'https://${spaceDomain}/app/api/space/${spaceDid}/app/${appDid}/object/';
+## Core Components
 
-  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()} />
-        )}
-      />
-    </>
-  );
-}
-```
+This package includes two key components:
 
-## BaseConnectTo
+1. DIDSpaceConnect: A button for connecting or reconnecting to DID Space.
+2. DIDSpaceConnection: A display card showcasing details of the connected DID Space.
 
-```tsx
-import { BaseConnectTo } from '@blocklet/did-space-react';
+# How to use
 
-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}`);
-      }}
-    />
-  );
-}
-```
+## DIDSpaceConnect
 
-## AuthConnectTo
+The DIDSpaceConnect component enables users to establish a connection with DID Space. Here are the main usage scenarios:
 
-Auto connect to DID Space and save space gateway:
+### Connecting to a Specific DID Space
+
+This component allows you to easily create a button on the page to connect to a DID Space. After clicking the button and successfully connecting to the DID Space, the system will return a `spaceGateway` object, which contains information such as the DID Space's name, DID, and site URL. You can choose how to store this object based on your needs.
+
+Example:
 
 ```tsx
 import Toast from '@arcblock/ux/lib/Toast';
-import { decryptSpaceGateway, AuthConnectTo, type AuthConnectToProps } from '@blocklet/did-space-react';
+import { DIDSpaceConnect, type DIDSpaceGateway } from '@blocklet/did-space-react';
 
-function ConnectTo({ ...rest }: AuthConnectToProps) {
-  const onSuccess = async (response: Record<string, string>, decrypt: Function) => {
+export default function Demo() {
+  const onSuccess = async ({ spaceGateway }: { spaceGateway: DIDSpaceGateway }) => {
     try {
-      const spaceGateway = decryptSpaceGateway(response, decrypt);
-      // do sth to save space gateway
+      // do something with spaceGateway
     } catch (error) {
       console.error(error);
       Toast.error(formatError(error));
     }
   };
 
-  return <AuthConnectTo {...rest} onSuccess={onSuccess} />;
+  return <DIDSpaceConnect {...rest} onSuccess={onSuccess} />;
 }
+```
+
+### Connecting DID Space for Users
+
+When users connect to DID Space for the first time, the DIDSpaceConnect component will automatically save the `spaceGateway` to their account. This data can later be retrieved through `session.user.didSpace`.
+
+Example:
+
+```tsx
+import { DIDSpaceConnect } from '@blocklet/did-space-react';
+
+export default function Demo() {
+  const session = useSessionContext();
 
-export default ConnectTo;
+  return <DIDSpaceConnect session={session} />;
+}
 ```
 
-## SessionConnectTo
+### Reconnecting to a Specific DID Space
 
-Auto connect to DID Space and save space gateway to the users table:
+If the user needs to reconnect to a previously linked DID Space, you need to set `reconnect` to true and provide `spaceDid` and `spaceGatewayUrl` props. This turns the component into a reconnect button that triggers a reconnection request.
+
+Example:
 
 ```tsx
-import { SessionConnectTo } from '@blocklet/did-space-react';
+import { DIDSpaceConnect } from '@blocklet/did-space-react';
 
-function ConnectTo() {
+export default function Demo() {
   const session = useSessionContext();
+  const { did, url } = session.user?.didSpace ?? {};
+
+  if (did && url) {
+    return <DIDSpaceConnect reconnect spaceDid={did} spaceGatewayUrl={url} />;
+  }
 
-  return <SessionConnectTo session={session} />;
+  return null;
+}
+```
+
+## DIDSpaceConnection
+
+The DIDSpaceConnection component is a versatile UI element designed to display key information about the connected DID Space. It enhances the user experience by providing context and interactivity.
+
+Key Features:
+
+1. Display Information: Shows details like the DID Space name, DID, and URL.
+1. Connection Status: If the selected attribute is provided, it also displays the connection status and action buttons.
+1. Responsive Design: Adapts to various screen sizes, ensuring usability on mobile and desktop devices.
+1. Compact Mode: Use the compat attribute to enforce a compact layout.
+
+Example:
+
+```tsx
+import { DIDSpaceConnection } from '@blocklet/did-space-react';
+
+export default function Demo() {
+  // This is just a sample template, the actual endpoint address can be obtained from `spaceGateway.endpoint`
+  const endpoint = 'https://${spaceDomain}/app/api/space/${spaceDid}/app/${appDid}/object/';
+
+  return (
+    <>
+      {/* basic use */}
+      <DIDSpaceConnection endpoint={endpoint} selected />
+      {/* enforce compat layout */}
+      <DIDSpaceConnection endpoint={endpoint} selected compat />
+    </>
+  );
+}
+```
+
+### Custom Actions
+
+You can enhance the DIDSpaceConnection by customizing the action buttons through the action attribute. This allows you to tailor the functionality to your specific application needs.
+
+Example:
+
+```tsx
+import { DIDSpaceConnection } from '@blocklet/did-space-react';
+
+export default function Demo() {
+  const endpoint = 'https://${spaceDomain}/app/api/space/${spaceDid}/app/${appDid}/object/';
+
+  return (
+    <DIDSpaceConnection
+      endpoint={x.endpoint}
+      selected
+      action={({ spaceGateway, selected, refresh }) => (
+        // open DID Space site
+        <IconButton
+          size="small"
+          LinkComponent={Link}
+          href={`${spaceGateway.url}/space/${spaceGateway.did}`}
+          target="_blank"
+        >
+          <OpenInNewIcon />
+        </IconButton>
+      )}
+    />
+  );
 }
 ```

package/dist/cjs/components/auth-connect-to/index.d.ts

@@ -1,18 +1,53 @@
+import { ButtonProps } from '@mui/material';
 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> {
+import { BaseAuthOptions, DIDSpaceGateway } from '../../types';
+export interface DIDSpaceConnectOptions extends BaseAuthOptions, Record<string, any> {
 }
-export interface AuthConnectToProps extends BaseConnectToProps {
-    options?: Options;
-    onSuccess?: (response: Record<string, string>, decrypt: Function) => Promise<void>;
+export interface DIDSpaceConnectProps extends BaseConnectToProps {
+    session?: {
+        refresh: Function;
+    };
+    reconnect?: false | true;
+    spaceDid?: string;
+    spaceGatewayUrl?: string;
+    options?: DIDSpaceConnectOptions;
+    onSuccess?: ({ spaceGateway, response, decrypt, }: {
+        spaceGateway: DIDSpaceGateway;
+        response: Record<string, string>;
+        decrypt: Function;
+    }) => Promise<void>;
+    onError?: (error: Error) => void;
 }
-/** Space 连接组件, 内置 Auth 验证流程 */
-export declare function AuthConnectTo({ options, onSuccess, ...rest }: AuthConnectToProps): import("react/jsx-runtime").JSX.Element;
-export declare namespace AuthConnectTo {
+/** DID Space 连接组件, 内置 Auth 验证流程 */
+export declare function DIDSpaceConnect({ session, reconnect, spaceDid, spaceGatewayUrl, options, onSuccess, onError, ...rest }: DIDSpaceConnectProps): import("react/jsx-runtime").JSX.Element | null;
+export declare namespace DIDSpaceConnect {
     var WalletAuth: typeof BaseAuth;
     var GatewayAuth: typeof import("./gateway-auth").GatewayAuth;
 }
 export { BaseAuth as WalletAuth, type BaseAuthProps as WalletAuthProps };
 export { GatewayAuth, type GatewayAuthProps };
+export type Options = DIDSpaceConnectOptions;
+export type AuthConnectToProps = DIDSpaceConnectProps;
+export declare function AuthConnectTo(props: Omit<AuthConnectToProps, 'onSuccess'> & {
+    onSuccess?: (response: Record<string, string>, decrypt: Function) => Promise<void>;
+}): import("react/jsx-runtime").JSX.Element;
+export interface ReConnectProps extends Omit<ButtonProps, 'onClick' | 'onError'> {
+    session: {
+        refresh: Function;
+    };
+    spaceDid: string;
+    spaceGatewayUrl: string;
+    onConnected?: (spaceGateway: DIDSpaceGateway) => Promise<void>;
+    onError?: (error: Error) => void;
+}
+export declare function ReConnect(props: ReConnectProps): import("react/jsx-runtime").JSX.Element;
+export interface SessionConnectToProps extends Omit<BaseConnectToProps, 'onError'> {
+    session: {
+        refresh: Function;
+    };
+    onConnected?: (spaceGateway: DIDSpaceGateway) => Promise<void>;
+    onError?: (error: Error) => void;
+}
+export declare function SessionConnectTo({ session, onConnected, onError, ...rest }: SessionConnectToProps): import("react/jsx-runtime").JSX.Element;

package/dist/cjs/components/auth-connect-to/index.js

@@ -2,40 +2,98 @@
 
 const jsxRuntime = require('react/jsx-runtime');
 const React = require('react');
+const jsSdk = require('@blocklet/js-sdk');
+const material = require('@mui/material');
+const util = require('../../libs/util.js');
 const index = require('../base-connect-to/index.js');
 const gatewayAuth = require('./gateway-auth.js');
 const baseAuth = require('./base-auth.js');
 const popupAuth = require('./popup-auth.js');
+const useLocale = require('../../hooks/use-locale.js');
 
-function AuthConnectTo({ options, onSuccess, ...rest }) {
+function DIDSpaceConnect({
+  session,
+  reconnect = false,
+  spaceDid = "",
+  spaceGatewayUrl = "",
+  options = {},
+  onSuccess,
+  onError,
+  ...rest
+}) {
+  const { t } = useLocale();
   const [walletOptions, setWalletOptions] = React.useState({
     open: false
   });
   const [gatewayOptions, setGatewayOptions] = React.useState({
     open: false,
-    spaceDid: "",
-    spaceGatewayUrl: ""
+    spaceDid,
+    spaceGatewayUrl
   });
   const onWalletClick = () => setWalletOptions((pre) => ({ ...pre, open: true }));
-  const onGatewayConfirm = ({ spaceDid, spaceGatewayUrl }) => {
+  const onGatewayConfirm = (params) => {
     setGatewayOptions((pre) => ({
       ...pre,
       open: true,
-      spaceDid,
-      spaceGatewayUrl
+      ...params
     }));
   };
   const handleSuccess = async (response, decrypt) => {
-    await onSuccess?.(response, decrypt);
-    setWalletOptions((pre) => ({
-      ...pre,
-      open: false
-    }));
-    setGatewayOptions((pre) => ({
-      ...pre,
-      open: false
-    }));
+    try {
+      const spaceGateway = util.decryptSpaceGateway(response, decrypt);
+      if (session) {
+        await new jsSdk.BlockletSDK().user.updateDidSpace({ spaceGateway });
+        session.refresh();
+      }
+      await onSuccess?.({
+        spaceGateway,
+        response,
+        decrypt
+      });
+    } catch (err) {
+      console.error(err);
+      onError?.(err);
+    } finally {
+      setWalletOptions((pre) => ({
+        ...pre,
+        open: false
+      }));
+      setGatewayOptions((pre) => ({
+        ...pre,
+        open: false
+      }));
+    }
   };
+  if (session) {
+    options.action = "connect-to-did-spaces-for-user";
+  }
+  if (reconnect) {
+    if (!spaceDid || !spaceGatewayUrl) {
+      console.error("spaceDid and spaceGatewayUrl are required for reconnect");
+      return null;
+    }
+    return /* @__PURE__ */ jsxRuntime.jsxs(
+      material.Button,
+      {
+        ...rest,
+        onClick: () => {
+          setGatewayOptions((pre) => ({ ...pre, open: true }));
+        },
+        children: [
+          t("storage.spaces.connect.reconnect"),
+          /* @__PURE__ */ jsxRuntime.jsx(
+            gatewayAuth.GatewayAuth,
+            {
+              ...options,
+              ...gatewayOptions,
+              onSuccess: handleSuccess,
+              onClose: () => setGatewayOptions((pre) => ({ ...pre, open: false }))
+            }
+          )
+        ]
+      }
+    );
+  }
   return /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
     /* @__PURE__ */ jsxRuntime.jsx(index.BaseConnectTo, { ...rest, onWalletClick, onGatewayConfirm }),
     /* @__PURE__ */ jsxRuntime.jsx(
@@ -58,9 +116,45 @@ function AuthConnectTo({ options, onSuccess, ...rest }) {
     )
   ] });
 }
-AuthConnectTo.WalletAuth = baseAuth.BaseAuth;
-AuthConnectTo.GatewayAuth = gatewayAuth.GatewayAuth;
+DIDSpaceConnect.WalletAuth = baseAuth.BaseAuth;
+DIDSpaceConnect.GatewayAuth = gatewayAuth.GatewayAuth;
+function AuthConnectTo(props) {
+  const { onSuccess, ...rest } = props;
+  return /* @__PURE__ */ jsxRuntime.jsx(DIDSpaceConnect, { ...rest, onSuccess: async ({ response, decrypt }) => await onSuccess?.(response, decrypt) });
+}
+function ReConnect(props) {
+  const { session, spaceDid, spaceGatewayUrl, onConnected, onError, ...rest } = props;
+  return (
+    // @ts-ignore
+    /* @__PURE__ */ jsxRuntime.jsx(
+      DIDSpaceConnect,
+      {
+        ...rest,
+        reconnect: true,
+        session,
+        spaceDid,
+        spaceGatewayUrl,
+        onSuccess: async ({ spaceGateway }) => await onConnected?.(spaceGateway),
+        onError
+      }
+    )
+  );
+}
+function SessionConnectTo({ session, onConnected, onError, ...rest }) {
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    DIDSpaceConnect,
+    {
+      ...rest,
+      session,
+      onSuccess: async ({ spaceGateway }) => await onConnected?.(spaceGateway),
+      onError
+    }
+  );
+}
 
 exports.GatewayAuth = gatewayAuth.GatewayAuth;
 exports.WalletAuth = baseAuth.BaseAuth;
 exports.AuthConnectTo = AuthConnectTo;
+exports.DIDSpaceConnect = DIDSpaceConnect;
+exports.ReConnect = ReConnect;
+exports.SessionConnectTo = SessionConnectTo;

package/dist/cjs/components/base-connect-to/index.d.ts

@@ -1,5 +1,5 @@
 import { SplitButtonProps } from '@arcblock/ux/lib/SplitButton';
-export interface BaseConnectToProps extends Omit<SplitButtonProps, 'menu' | 'onClick'> {
+export interface BaseConnectToProps extends Omit<SplitButtonProps, 'menu' | 'onClick' | 'onError'> {
     onWalletClick?: () => void;
     onGatewayConfirm?: (params: {
         spaceDid: string;

package/dist/cjs/components/preview-space-nft/index.d.ts

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

package/dist/cjs/components/preview-space-nft/index.js

@@ -7,7 +7,7 @@ const CloseOutlinedIcon = require('@mui/icons-material/CloseOutlined');
 require('../../icons/index.js');
 const emptySpaceNft = require('../../icons/empty-space-nft.svg.js');
 
-function PreviewSpaceNft({
+function DIDSpaceNFTPreview({
   src,
   width = "58px",
   height = "58px"
@@ -82,5 +82,7 @@ function PreviewSpaceNft({
     )
   ] });
 }
+const PreviewSpaceNft = DIDSpaceNFTPreview;
 
+exports.DIDSpaceNFTPreview = DIDSpaceNFTPreview;
 exports.PreviewSpaceNft = PreviewSpaceNft;

package/dist/cjs/components/space-card/index.d.ts

@@ -1,18 +1,21 @@
 import { BoxProps } from '@mui/material';
-import { SpaceGateway, SpaceStatus } from '../../types';
-export type Action = React.ReactNode | ((props: {
-    spaceGateway: SpaceGateway;
-    spaceStatus: SpaceStatus;
+import { DIDSpaceGateway, DIDSpaceStatus } from '../../types';
+export type DIDSpaceConnectionAction = React.ReactNode | ((props: {
+    spaceGateway: DIDSpaceGateway;
+    spaceStatus: DIDSpaceStatus;
     errorCode: number;
     selected: boolean;
     compat: boolean;
     refresh: () => void;
 }) => React.ReactNode);
-export interface SpaceCardProps extends BoxProps {
+export interface DIDSpaceConnectionProps extends BoxProps {
     endpoint: string;
     selected?: boolean;
     compat?: boolean;
-    action?: Action;
+    action?: DIDSpaceConnectionAction;
     deps?: any[];
 }
-export declare function SpaceCard({ endpoint, selected, compat, action, className, deps, ...rest }: SpaceCardProps): import("react/jsx-runtime").JSX.Element;
+export declare function DIDSpaceConnection({ endpoint, selected, compat, action, className, deps, ...rest }: DIDSpaceConnectionProps): import("react/jsx-runtime").JSX.Element;
+export type SpaceCardProps = DIDSpaceConnectionProps;
+export declare const SpaceCard: typeof DIDSpaceConnection;
+export type Action = DIDSpaceConnectionAction;

package/dist/cjs/components/space-card/index.js

@@ -40,17 +40,17 @@ function Status({
   const statusConfig = ahooks.useCreation(
     () => ({
       // 加载中
-      [index.SpaceStatus.LOADING]: {
+      [index.DIDSpaceStatus.LOADING]: {
         icon: null,
         text: null
       },
       // 已连接
-      [index.SpaceStatus.CONNECTED]: {
+      [index.DIDSpaceStatus.CONNECTED]: {
         icon: /* @__PURE__ */ jsxRuntime.jsx(spaceConnected, { style: iconStyle }),
         text: /* @__PURE__ */ jsxRuntime.jsx("span", { style: { color: "#047857" }, children: t("storage.spaces.connected.tag") })
       },
       // 未连接(未授权)
-      [index.SpaceStatus.DISCONNECTED]: {
+      [index.DIDSpaceStatus.DISCONNECTED]: {
         icon: /* @__PURE__ */ jsxRuntime.jsx(spaceDisconnect, { style: iconStyle }),
         text: /* @__PURE__ */ jsxRuntime.jsx("span", { style: { color: "#626a77" }, children: t("storage.spaces.disconnected.tag") })
       }
@@ -107,14 +107,14 @@ function Status({
     }),
     [locale, spaceVersion]
   );
-  const { icon, text } = status === index.SpaceStatus.UNAVAILABLE ? errorStatusConfig[errorCode] : statusConfig[status];
+  const { icon, text } = status === index.DIDSpaceStatus.UNAVAILABLE ? errorStatusConfig[errorCode] : statusConfig[status];
   React.useEffect(() => {
     const handleVisibilityChange = () => {
       if (!document.hidden) {
         refresh();
       }
     };
-    if (status !== index.SpaceStatus.CONNECTED) {
+    if (status !== index.DIDSpaceStatus.CONNECTED) {
       document.addEventListener("visibilitychange", handleVisibilityChange);
     } else {
       document.removeEventListener("visibilitychange", handleVisibilityChange);
@@ -152,7 +152,15 @@ function ErrorLink({ title, url }) {
     }
   ) });
 }
-function SpaceCard({ endpoint, selected = false, compat, action, className, deps, ...rest }) {
+function DIDSpaceConnection({
+  endpoint,
+  selected = false,
+  compat,
+  action,
+  className,
+  deps,
+  ...rest
+}) {
   const isMobile = useMobile();
   const { t } = useLocale();
   let isCompact = compat;
@@ -174,34 +182,34 @@ function SpaceCard({ endpoint, selected = false, compat, action, className, deps
   });
   let spaceName = "";
   const isAvailable = spaceInfo?.isAvailable ?? false;
-  const spaceStatus = React.useRef(index.SpaceStatus.LOADING);
+  const spaceStatus = React.useRef(index.DIDSpaceStatus.LOADING);
   let errorCode = 0;
   if (loading) {
-    spaceStatus.current = index.SpaceStatus.LOADING;
+    spaceStatus.current = index.DIDSpaceStatus.LOADING;
     spaceName = /* @__PURE__ */ jsxRuntime.jsx(material.Skeleton, { variant: "text", sx: { width: "180px", fontSize: "1rem" } });
+  } else if (error instanceof axios.AxiosError) {
+    spaceName = t("common.unknown");
+    spaceStatus.current = index.DIDSpaceStatus.UNAVAILABLE;
+    if (util.isCorsBlockedError(error)) {
+      errorCode = constants.SPACE_CONNECT_ERROR_CODE.CORS_BLOCKED;
+    } else {
+      errorCode = constants.SPACE_CONNECT_ERROR_CODE.NETWORK_ERROR;
+    }
   } else if (spaceInfo) {
     spaceName = spaceInfo.name;
     const spaceVersion = spaceInfo.version;
     const isIncompatible = !spaceVersion || semver.major(expectVersion) !== semver.major(spaceVersion);
     if (isIncompatible) {
-      spaceStatus.current = index.SpaceStatus.UNAVAILABLE;
+      spaceStatus.current = index.DIDSpaceStatus.UNAVAILABLE;
       errorCode = constants.SPACE_CONNECT_ERROR_CODE.INCOMPATIBLE;
     } else if (!isAvailable) {
-      spaceStatus.current = index.SpaceStatus.UNAVAILABLE;
+      spaceStatus.current = index.DIDSpaceStatus.UNAVAILABLE;
       errorCode = spaceInfo.errorCode;
       if (errorCode === constants.SPACE_CONNECT_ERROR_CODE.UNAUTHORIZED) {
-        spaceStatus.current = index.SpaceStatus.DISCONNECTED;
+        spaceStatus.current = index.DIDSpaceStatus.DISCONNECTED;
       }
     } else {
-      spaceStatus.current = index.SpaceStatus.CONNECTED;
-    }
-  } else if (error instanceof axios.AxiosError) {
-    spaceName = t("common.unknown");
-    spaceStatus.current = index.SpaceStatus.UNAVAILABLE;
-    if (util.isCorsBlockedError(error)) {
-      errorCode = constants.SPACE_CONNECT_ERROR_CODE.CORS_BLOCKED;
-    } else {
-      errorCode = constants.SPACE_CONNECT_ERROR_CODE.NETWORK_ERROR;
+      spaceStatus.current = index.DIDSpaceStatus.CONNECTED;
     }
   }
   const renderAction = () => {
@@ -235,7 +243,7 @@ function SpaceCard({ endpoint, selected = false, compat, action, className, deps
       ...rest,
       children: [
         /* @__PURE__ */ jsxRuntime.jsxs(material.Box, { display: "flex", alignItems: "center", children: [
-          /* @__PURE__ */ jsxRuntime.jsx(index$1.PreviewSpaceNft, { src: util.getSpaceNftDisplayUrlFromEndpoint(endpoint), width: "72px", height: "72px" }),
+          /* @__PURE__ */ jsxRuntime.jsx(index$1.DIDSpaceNFTPreview, { src: util.getSpaceNftDisplayUrlFromEndpoint(endpoint), width: "72px", height: "72px" }),
           /* @__PURE__ */ jsxRuntime.jsxs(material.Stack, { ml: 2, flex: 1, spacing: 1, minWidth: 0, children: [
             /* @__PURE__ */ jsxRuntime.jsxs(material.Box, { display: "flex", alignItems: "center", sx: { whiteSpace: "nowrap" }, children: [
               spaceName && /* @__PURE__ */ jsxRuntime.jsx(material.Box, { className: "space-name", children: spaceName }),
@@ -311,5 +319,7 @@ const BoxContainer = Theme.styled(material.Box)`
     margin-right: 8px;
   }
 `;
+const SpaceCard = DIDSpaceConnection;
 
+exports.DIDSpaceConnection = DIDSpaceConnection;
 exports.SpaceCard = SpaceCard;

package/dist/cjs/hooks/use-space-info.js

@@ -23,7 +23,7 @@ function useSpaceInfo({ endpoint, deps = [] }) {
         isListable,
         isReadable,
         isWriteable,
-        rawVersion,
+        rawVersion = "legacy",
         rawOwnerDid,
         rawAvailable,
         rawErrorCode
@@ -43,7 +43,7 @@ function useSpaceInfo({ endpoint, deps = [] }) {
       if (rawAvailable === void 0 || rawErrorCode === void 0) {
         const isAvailable = isListable && isReadable && isWriteable;
         return {
-          version: rawVersion || "",
+          version: rawVersion,
           name,
           subscriptionId: rawSubscriptionId,
           ownerDid: rawOwnerDid || "",
@@ -52,7 +52,7 @@ function useSpaceInfo({ endpoint, deps = [] }) {
         };
       }
       return {
-        version: rawVersion || "",
+        version: rawVersion,
         name,
         subscriptionId: rawSubscriptionId,
         ownerDid: rawOwnerDid,

package/dist/cjs/index.d.ts

@@ -4,9 +4,8 @@ import useSpaceInfo from './hooks/use-space-info';
 import useLocale from './hooks/use-locale';
 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';
+export * from './components/base-connect-to';
 export * from './libs/constants';
 export * from './libs/util';
 export * from './libs/gateway';