DIDSpaceConnection

DIDSpaceConnection コンポーネントは、接続されたDID Spaceに関する主要情報を表示するために設計された多目的なUIカードです。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への接続状態を視覚的に表します。これらのステータスを理解することは、デバッグやより良いユーザーフィードバックの提供に役立ちます。

ローディング中: コンポーネントは、DID Spaceに関する情報を取得している間、最初はローディング状態になります。このフェーズではスケルトンローダーが表示されます。
接続済み: 成功したアクティブな接続を示します。アプリケーションは必要な権限を持ち、DID Spaceは完全に機能しています。「接続済み」タグと成功アイコンで表示されます。
切断済み: アプリケーションはDID Spaceへのアクセスを許可されていません。これは通常、ユーザーが権限を付与するために接続フローを経る必要があることを意味します。「切断済み」タグとニュートラルなアイコンで表示されます。
利用不可: 問題のため、DID Spaceに到達または使用できません。このステータスはエラータグとアイコンで表示されます。利用不可の場合、ホバーするとツールチップで詳細が表示されます。一般的な理由には次のものがあります：
- サブスクリプションの有効期限切れ/支払い遅延: DID Spaceのサブスクリプションが期限切れです。
- 使用量制限超過: DID Spaceが使用量制限に達しました。
- 互換性のないバージョン: DID Spaceのバージョンがコンポーネントライブラリの要件と互換性がありません。
- CORSブロック: クロスオリジンリソース共有（CORS）エラーが接続を妨げています。これは通常、DID Spaceホストでの設定変更が必要です。
- ネットワークエラー: タイムアウトやDNS障害などのネットワークの問題により、コンポーネントがDID Spaceエンドポイントに到達できませんでした。

これでDID Space情報を表示する方法がわかりましたので、コンポーネントが使用するデータ構造についてさらに詳しく知りたいかもしれません。詳細については、型に関するAPIリファレンスを参照してください。