@arcblock/did-connect-reactライブラリには、DID関連情報を一貫性があり、美しく表示するのに役立つように設計された、事前にスタイル設定された補助的なUIコンポーネントのセットが含まれています。これらのコンポーネントは、コア接続フローとシームレスに連携し、堅牢な@arcblock/uxおよび@mui/materialライブラリ上に構築されており、アプリケーションにまとまりのあるルックアンドフィールを保証します。
このセクションでは、これらのコンポーネントの概要を説明します。いずれかのカードをクリックすると、プロパティや使用例を含む詳細なドキュメントが表示されます。
Avatar
ユーザーのアバターを表示するために設計されたコンポーネントで、DIDから自動的に派生します。
Address
ユーザーのDIDアドレスを、読みやすさを向上させるためにフォーマットされ、オプションで短縮された形式で表示するために使用されます。
Button
一貫したデザインでDID Connectフローを開始するための、事前にスタイル設定されたボタン、具体的には`ConnectButton`。
Logo
公式のDID Connectロゴを表示するためのシンプルなコンポーネントで、ブランディングとUIの一貫性に役立ちます。
組み合わせた使用例
これらのコンポーネントは、ユーザーインターフェースを構築するために組み合わせて使用できるように設計されています。Avatar、Address、ConnectButtonを使用して簡単なユーザープロフィール表示を作成する方法の例を次に示します。
Combined UI Example
import Avatar from '@arcblock/did-connect-react/lib/Avatar';
import Address from '@arcblock/did-connect-react/lib/Address';
import ConnectButton from '@arcblock/did-connect-react/lib/Button';
import { Box, Typography, Paper } from '@mui/material';
function UserDisplay({ userDid, userName }) {
if (!userDid) {
return <ConnectButton />;
}
return (
<Paper elevation={2} sx={{ padding: '16px', display: 'flex', alignItems: 'center', gap: '16px' }}>
<Avatar size={60} did={userDid} />
<Box>
<Typography variant="h6" component="div">{userName || 'Anonymous'}</Typography>
<Address variant="body2" color="text.secondary">{userDid}</Address>
</Box>
</Paper>
);
}
// 使用例:
// <UserDisplay userDid="z123..." userName="Alice" />
// <UserDisplay userDid={null} />この例は、提供されているコンポーネントを使用して、ログイン状態とログアウト状態の一般的なUIパターンをいかに簡単に構築できるかを示しています。
次のステップ
UIコンポーネントに慣れたら、認証フローとセッションデータをよりプログラム的に制御するために、ライブラリのHooksを調べてみるとよいでしょう。