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 组件文档以获取更多详细信息。