Address | ArcBlock

Address 元件是一個專門的 UI 元素，旨在以清晰、可讀且使用者友善的格式顯示去中心化識別碼 (DID) 位址。它透過提供縮短和輕鬆複製的選項，智慧地處理 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 複製到使用者的剪貼簿，提供方便的一鍵操作。

屬性

Address 元件接受以下屬性：

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 元件文件以獲取更多詳細資訊。