DIDSpaceConnection

DIDSpaceConnection 组件是一个多功能的 UI 卡片，旨在显示已连接 DID Space 的关键信息。它提供了一种清晰且互动的方式来展示空间的详细信息，包括其 NFT 头像、名称、DID 和当前连接状态。

该组件高度可定制，允许您添加自定义操作和页脚内容，以根据应用程序的需求定制用户体验。

Props

endpoint string (required) — DID Space 对象的 API 端点 URL。示例：https://example.com/app/api/space/{spaceDid}/app/{appDid}/object/。
selected boolean (default: false) — 如果为 true，卡片将带有高亮边框并显示连接状态。
compat boolean — 如果为 true，则强制使用紧凑布局。如果为 undefined，则在移动设备上自动切换到紧凑布局。
action React.ReactNode | ((props: DIDSpaceConnectionContext) => React.ReactNode) (default: null) — 在卡片的操作区域渲染的自定义内容或组件。
footer boolean | React.ReactNode | ((props: DIDSpaceConnectionContext & { originalFooter: React.ReactNode }) => React.ReactNode) (default: false) — 页脚的自定义内容。如果设置为 true，默认显示最新的审计日志。
deps any[] (default: []) — 一个依赖项数组，当其发生变化时，将触发 DID Space 信息的刷新。

上下文类型

当为 action 或 footer 使用函数属性时，您会收到一个具有以下形状的上下文对象：

DIDSpaceConnectionContext

spaceGateway DIDSpaceGateway (required) — 包含有关已连接 DID Space 的基本信息。
spaceStatus DIDSpaceStatus (required) — DID Space 的当前连接状态。
errorCode number (required) — 当 spaceStatus 为 'unavailable' 时的特定错误代码。
selected boolean (required) — 传递给组件的 selected 属性的值。
compat boolean (required) — 指示组件是否处于紧凑模式。
refresh () => void (required) — 一个用于手动触发空间信息和状态刷新的函数。

DIDSpaceGateway

did string (required) — 空间的 DID。
name string (required) — 空间的名称。
url string (required) — DID Space 网关的基础 URL（例如，https://spaces.arcblock.io）。
endpoint string (required) — 完整的对象端点 URL。
ownerDid string (required) — 空间所有者的 DID。

DIDSpaceStatus

DIDSpaceStatus enum — 一个表示连接状态的枚举。可能的值包括：loading、connected、disconnected、unavailable。

基本用法

要显示 DID Space，您只需提供 endpoint 属性。该组件将处理获取和显示必要的信息。

Basic DIDSpaceConnection Example

import { DIDSpaceConnection } from '@blocklet/did-space-react';

export default function Demo() {
  const endpoint = 'https://arcblock.net/app/api/space/z8iZufAgx4Z1y5tA5y5Q4z4a5y5Q4z4a5y5Q/app/zNKd5QmRt3h5VX8u4J4egJkA4xQaDKwM2n5D/object/';

  return <DIDSpaceConnection endpoint={endpoint} />;
}

使用场景

选中状态和状态

将 selected 属性设置为 true 以应用高亮边框并显示连接状态。这对于在列表中指示当前活动或选定的 DID Space 非常有用。

Selected DIDSpaceConnection

import { DIDSpaceConnection } from '@blocklet/did-space-react';

export default function Demo() {
  const endpoint = 'https://arcblock.net/app/api/space/z8iZufAgx4Z1y5tA5y5Q4z4a5y5Q4z4a5y5Q/app/zNKd5QmRt3h5VX8u4J4egJkA4xQaDKwM2n5D/object/';

  return <DIDSpaceConnection endpoint={endpoint} selected />;
}

紧凑布局

使用 compat 属性来渲染卡片的更紧凑版本，这对于列表或移动视图非常理想。

Compact DIDSpaceConnection

import { DIDSpaceConnection } from '@blocklet/did-space-react';

export default function Demo() {
  const endpoint = 'https://arcblock.net/app/api/space/z8iZufAgx4Z1y5tA5y5Q4z4a5y5Q4z4a5y5Q/app/zNKd5QmRt3h5VX8u4J4egJkA4xQaDKwM2n5D/object/';

  return <DIDSpaceConnection endpoint={endpoint} selected compat />;
}

自定义操作

您可以使用 action 属性添加自定义交互元素，如按钮或链接。传递一个函数以访问连接上下文，包括 spaceGateway 详细信息和 refresh 函数。

示例 1：重新连接已断开的空间

一个常见的用例是为用户提供一种在会话断开时重新连接的方式。您可以检查 spaceStatus 并渲染一个 DIDSpaceConnect 组件来启动重新连接流程。DIDSpaceConnect 组件默认渲染一个按钮。

DIDSpaceConnection with Reconnect Action

import { DIDSpaceConnection, DIDSpaceConnect, DIDSpaceStatus } from '@blocklet/did-space-react';

export default function Demo() {
  const endpoint = 'https://arcblock.net/app/api/space/z8iZufAgx4Z1y5tA5y5Q4z4a5y5Q4z4a5y5Q/app/zNKd5QmRt3h5VX8u4J4egJkA4xQaDKwM2n5D/object/';

  return (
    <DIDSpaceConnection
      endpoint={endpoint}
      selected
      action={({ spaceStatus, spaceGateway, refresh }) => {
        if (spaceStatus === DIDSpaceStatus.DISCONNECTED) {
          return (
            <DIDSpaceConnect
              reconnect
              spaceDid={spaceGateway.did}
              spaceGatewayUrl={spaceGateway.url}
              onSuccess={refresh} // 成功重新连接后刷新卡片
            />
          );
        }
        return null;
      }}
    />
  );
}

示例 2：打开 DID Space 站点

此示例添加一个图标按钮，链接到 DID Space 的公共页面。

DIDSpaceConnection with Custom Action

import { DIDSpaceConnection } from '@blocklet/did-space-react';
import { IconButton, Link } from '@mui/material';
import OpenInNewIcon from '@mui/icons-material/OpenInNew';

export default function Demo() {
  const endpoint = 'https://arcblock.net/app/api/space/z8iZufAgx4Z1y5tA5y5Q4z4a5y5Q4z4a5y5Q/app/zNKd5QmRt3h5VX8u4J4egJkA4xQaDKwM2n5D/object/';

  return (
    <DIDSpaceConnection
      endpoint={endpoint}
      selected
      action={({ spaceGateway }) => (
        <IconButton
          size="small"
          component={Link}
          href={`${spaceGateway.url}/space/${spaceGateway.did}`}
          target="_blank"
        >
          <OpenInNewIcon />
        </IconButton>
      )}
    />
  );
}

自定义页脚

footer 属性支持强大的自定义功能。您可以启用默认的审计日志显示或渲染完全自定义的内容。

显示默认审计日志

将 footer 设置为 true 以自动获取并显示该 DID Space 内应用程序的最新审计日志条目。

DIDSpaceConnection with Audit Log Footer

import { DIDSpaceConnection } from '@blocklet/did-space-react';

export default function Demo() {
  const endpoint = 'https://arcblock.net/app/api/space/z8iZufAgx4Z1y5tA5y5Q4z4a5y5Q4z4a5y5Q/app/zNKd5QmRt3h5VX8u4J4egJkA4xQaDKwM2n5D/object/';

  return <DIDSpaceConnection endpoint={endpoint} selected footer />;
}

添加自定义页脚内容

为 footer 属性提供一个函数来渲染自定义组件。该函数接收连接上下文和 originalFooter（默认的审计日志栏），允许您构建自己的布局。

DIDSpaceConnection with Custom Footer Content

import { DIDSpaceConnection } from '@blocklet/did-space-react';
import { Box, Typography } from '@mui/material';

export default function Demo() {
  const endpoint = 'https://arcblock.net/app/api/space/z8iZufAgx4Z1y5tA5y5Q4z4a5y5Q4z4a5y5Q/app/zNKd5QmRt3h5VX8u4J4egJkA4xQaDKwM2n5D/object/';

  return (
    <DIDSpaceConnection
      endpoint={endpoint}
      selected
      footer={({ spaceGateway, originalFooter }) => (
        <>
          {/* 显示默认的审计日志 */}
          {originalFooter}
          {/* 显示额外的自定义信息 */}
          <Box display="flex" alignItems="center" mt={1}>
            <Typography variant="caption">Owner: {spaceGateway.ownerDid}</Typography>
          </Box>
        </>
      )}
    />
  );
}

连接状态

该组件直观地表示与 DID Space 的连接状态。了解这些状态有助于调试和提供更好的用户反馈。

加载中 (Loading)：组件在获取 DID Space 信息时最初处于加载状态。在此阶段会显示骨架加载器。
已连接 (Connected)：表示连接成功且处于活动状态。应用程序拥有必要的权限，且 DID Space 完全可操作。它会以“已连接”标签和成功图标显示。
已断开 (Disconnected)：应用程序未被授权访问 DID Space。这通常意味着用户需要通过连接流程来授予权限。它会以“已断开”标签和中性图标显示。
不可用 (Unavailable)：由于存在问题，无法访问或使用 DID Space。此状态会以错误标签和图标显示。当不可用时，悬停时工具提示会提供更多详细信息。常见原因包括：
- 订阅过期/逾期：DID Space 的订阅已过期。
- 使用量超限：DID Space 已达到其使用量限制。
- 版本不兼容：DID Space 版本与组件库的要求不兼容。
- CORS 阻止：跨源资源共享 (CORS) 错误正在阻止连接。这通常需要在 DID Space 主机上进行配置更改。
- 网络错误：由于超时或 DNS 失败等网络问题，组件无法访问 DID Space 端点。

既然您已经了解如何显示 DID Space 信息，您可能希望更深入地了解组件使用的数据结构。有关更多详细信息，请参阅 API 类型参考。