Address | ArcBlock

Addressコンポーネントは、分散型識別子（DID）アドレスをクリーンで読みやすく、ユーザーフレンドリーな形式で表示するために設計された特殊なUI要素です。DIDに典型的な長い文字列を、短縮や簡単なコピーのオプションを提供することで賢く処理し、全体的なユーザーエクスペリエンスを向上させます。

このコンポーネントは@arcblock/ux/lib/Addressからの単純な再エクスポートであり、DID Connectエコシステム内でアドレスを表示するための一貫した方法を提供します。

インポート方法

Addressコンポーネントを使用するには、ライブラリ内の特定のモジュールパスからインポートします。

Import

import Address from '@arcblock/did-connect-react/lib/Address';

基本的な使用法

コンポーネントにDID文字列を子として渡すだけで、完全なアドレスをレンダリングできます。

Basic Address Display

import React from 'react';
import Address from '@arcblock/did-connect-react/lib/Address';

function UserProfile() {
  const userDid = 'z1Zg2a5Vw2fA2b3c4d5e6f7g8h9i0j1k2l3m4n5o6p7q8r9s0t';

  return (
    <div>
      <h4>User DID:</h4>
      <Address>{userDid}</Address>
    </div>
  );
}

機能

Addressコンポーネントには、使いやすさを向上させるためのいくつかの便利な機能が含まれています。

短縮

長いDIDはUIを乱雑にする可能性があります。shortenプロパティを使用して、アドレスの短縮版を表示し、先頭と末尾の文字のみを表示します。これは、リストやコンパクトなプロファイルビューに不可欠です。

クリップボードにコピー

copyableプロパティを追加すると、コンポーネントはアドレスの横にコピーアイコンをレンダリングします。このアイコンをクリックすると、完全なDIDがユーザーのクリップボードにコピーされ、便利なワンクリックアクションが提供されます。

Props

Addressコンポーネントは以下のpropsを受け入れます：

children string (required) — 表示したいDIDアドレス文字列。
shorten boolean (default: false) — trueの場合、アドレスはよりコンパクトな形式（例：z1Zg2a...s0t）に短縮されます。
copyable boolean (default: false) — trueの場合、コピーアイコンが表示され、ユーザーはワンクリックで完全なアドレスをクリップボードにコピーできます。
responsive boolean (default: true) — trueの場合、コンポーネントは利用可能な幅に基づいてアドレスを自動的に短縮し、レイアウトを崩さずにコンテナ内に収まるようにします。

例

以下はAddressコンポーネントの一般的な使用例です。

短縮およびコピー可能なアドレス

これは最も一般的な設定で、ほとんどのUIに適したコンパクトで機能的な表示を提供します。

Shortened and Copyable

import React from 'react';
import Address from '@arcblock/did-connect-react/lib/Address';

function UserCard({ did }) {
  return (
    <div style={{ display: 'flex', alignItems: 'center', gap: '8px' }}>
      <span>DID:</span>
      <Address shorten copyable>
        {did}
      </Address>
    </div>
  );
}

Avatarとの使用

Addressコンポーネントは、Avatarコンポーネントと並行して使用することで、ユーザープロファイル要素を構築するのに最適です。

Profile Header

import React from 'react';
import Address from '@arcblock/did-connect-react/lib/Address';
import Avatar from '@arcblock/did-connect-react/lib/Avatar';
import { useSession } from '@arcblock/did-connect-react';

function ProfileHeader() {
  const { session } = useSession();

  if (!session.user) {
    return <p>Please log in.</p>;
  }

  return (
    <div style={{ display: 'flex', alignItems: 'center', gap: '12px' }}>
      <Avatar did={session.user.did} />
      <div>
        <strong>{session.user.name}</strong>
        <Address shorten copyable>
          {session.user.did}
        </Address>
      </div>
    </div>
  );
}

ユーザーアドレスの表示方法を学んだので、次はプロフィール写真の表示方法を学びたいかもしれません。Avatarコンポーネントのドキュメントで詳細を確認してください。