このガイドでは、DID Spaceの機能をReactアプリケーションに統合するための基本的な手順を説明します。必要なパッケージのインストール方法と、ユーザーがDID Spaceに接続してその詳細を表示できる基本的なコンポーネントの実装方法を学びます。
ステップ1：インストール
まず、@blocklet/did-space-react パッケージをプロジェクトに追加する必要があります。npmまたはお好みのパッケージマネージャーを使用してこれを行うことができます。
Terminal
npm install @blocklet/did-space-reactステップ2：接続コンポーネントの作成
次に、主要な機能を示す簡単なReactコンポーネントを作成しましょう。この例では、DIDSpaceConnectコンポーネントを使用して接続を確立し、接続後にDIDSpaceConnectionコンポーネントを使用してスペースの情報を表示します。
接続状態を管理するために、ReactのuseStateフックを使用します。
GettingStartedExample.tsx
import React, { useState } from 'react';
import Toast from '@arcblock/ux/lib/Toast';
import Button from '@mui/material/Button';
import Box from '@mui/material/Box';
import Typography from '@mui/material/Typography';
import { DIDSpaceConnect, DIDSpaceConnection, type DIDSpaceGateway } from '@blocklet/did-space-react';
// エラーをフォーマットするヘルパー関数
const formatError = (error: any): string => {
return error.message || 'An unknown error occurred.';
};
export default function GettingStartedExample() {
const [spaceGateway, setSpaceGateway] = useState<DIDSpaceGateway | null>(null);
const handleSuccess = async ({ spaceGateway: gateway }: { spaceGateway: DIDSpaceGateway }) => {
try {
console.log('Successfully connected to DID Space:', gateway);
setSpaceGateway(gateway);
Toast.success('Successfully connected to DID Space!');
} catch (error) {
console.error(error);
Toast.error(formatError(error));
}
};
const handleError = (error: Error) => {
console.error('Connection failed:', error);
Toast.error(formatError(error));
};
const handleDisconnect = () => {
setSpaceGateway(null);
Toast.info('Disconnected from DID Space.');
};
return (
<Box sx={{ padding: 2, border: '1px solid #e0e0e0', borderRadius: '8px' }}>
<Typography variant="h6" gutterBottom>
DID Space Connection
</Typography>
{spaceGateway ? (
<Box>
<DIDSpaceConnection endpoint={spaceGateway.endpoint} selected sx={{ marginBottom: 2 }} />
<Button onClick={handleDisconnect} variant="outlined">
Disconnect
</Button>
</Box>
) : (
<DIDSpaceConnect
onSuccess={handleSuccess}
onError={handleError}
variant="contained"
/>
)}
</Box>
);
}仕組み
状態管理
接続されたDID Spaceを追跡するために
useState<DIDSpaceGateway | null>(null)を使用します。初期値はnullで、接続がないことを示します。接続
DIDSpaceConnectコンポーネントはボタンをレンダリングします。ユーザーがそれをクリックして正常に接続すると、onSuccessコールバックがトリガーされます。このコールバックは、ユーザーのDID Spaceに関する詳細を含むspaceGatewayオブジェクトを受け取ります。状態の更新
handleSuccess内でsetSpaceGateway(gateway)を呼び出して、接続詳細をコンポーネントの状態に保存します。これにより、コンポーネントが再レンダリングされます。情報の表示
再レンダリング後、
spaceGatewayの状態はnullではなくなります。コンポーネントはDIDSpaceConnectionカードを表示し、spaceGatewayオブジェクトからendpointを渡します。このカードはDID Spaceの名前、DID、接続状態を取得して表示します。切断
状態を
nullにリセットする「切断」ボタンを追加しました。これによりDIDSpaceConnectボタンが再び表示され、ユーザーは別のスペースに接続できます。
次のステップ
これで、基本的なDID Space接続フローを実装しました。より高度な機能やカスタマイズを探るには、詳細なコンポーネントのドキュメントに進んでください。