@arcblock/did-connect-react 3.1.41 → 3.1.42

package/docs/overview.zh-TW.md

@@ -0,0 +1,159 @@
+# 總覽
+
+`@arcblock/did-connect-react` 函式庫提供了一套全面的 React 元件和鉤子 (hooks)，旨在將去中心化身份 (DID) 功能無縫整合到您的 Web 應用程式中。它使用 ArcBlock 的 DID Wallet 簡化了用戶身份驗證和會話管理的過程，為傳統登入系統提供了一個安全且用戶友好的替代方案。
+
+該函式庫的建構旨在實現靈活性和易用性，無論您需要一個開箱即用的完整解決方案，還是對身份驗證流程進行精細控制。
+
+### 主要功能
+
+<x-cards data-columns="2">
+  <x-card data-title="完整的連線 UI" data-icon="lucide:qr-code-icon">
+    包含 `DidConnect` 元件，這是一個預先建置、可自訂的彈窗，用於處理整個 QR code 掃描和連線過程。
+  </x-card>
+  <x-card data-title="無縫的會話管理" data-icon="lucide:key-round">
+    利用 `SessionProvider` 和 `useSession` 鉤子，在您的應用程式中輕鬆管理用戶登入狀態、會話和個人資料數據。
+  </x-card>
+  <x-card data-title="靈活的程式化控制" data-icon="lucide:webhook">
+    使用像 `useConnect` 這樣的鉤子，以程式化方式開啟、關閉和管理連線彈窗，讓您完全控制用戶體驗。
+  </x-card>
+  <x-card data-title="豐富的 UI 工具組" data-icon="lucide:gem">
+    一系列輔助 UI 元件，如 `Avatar`、`Address` 和 `Button`，用於一致地顯示用戶身份資訊。
+  </x-card>
+</x-cards>
+
+### 核心架構
+
+該函式庫圍繞一個核心的 `SessionProvider` 進行，它管理用戶的會話狀態。像 `Button` 這樣的 UI 元件可以觸發 `DidConnect` 彈窗，該彈窗處理與用戶 DID Wallet 之間基於 QR code 的安全互動。一旦連線完成，會話將被更新，您的應用程式 UI 也會相應地作出反應。
+
+```d2 基本身份驗證流程
+direction: down
+
+User: { 
+  shape: c4-person 
+}
+
+Your-Application: {
+  label: "您的 React 應用程式"
+  shape: rectangle
+
+  SessionProvider: {
+    label: "SessionProvider\n(管理會話狀態)"
+    shape: rectangle
+
+    App-Components: {
+      label: "您的應用程式元件"
+      shape: rectangle
+
+      ConnectButton: {
+        label: "ConnectButton"
+        shape: rectangle
+      }
+    }
+
+    DidConnect-Modal: {
+      label: "DidConnect 彈窗\n(處理 QR code 流程)"
+      shape: rectangle
+    }
+  }
+}
+
+DID-Wallet: {
+  label: "DID Wallet"
+  icon: "https://www.arcblock.io/image-bin/uploads/37198ddc4a0b9e91e5c1c821ab895a34.svg"
+}
+
+User -> Your-Application.SessionProvider.App-Components.ConnectButton: "1. 點擊按鈕"
+Your-Application.SessionProvider.App-Components.ConnectButton -> Your-Application.SessionProvider.DidConnect-Modal: "2. 開啟彈窗"
+Your-Application.SessionProvider.DidConnect-Modal -> User: "3. 顯示 QR code"
+User -> DID-Wallet: "4. 掃描並批准"
+DID-Wallet -> Your-Application.SessionProvider: "5. 完成連線"
+Your-Application.SessionProvider -> Your-Application.SessionProvider.App-Components: "6. 更新會話狀態"
+
+```
+
+### 安裝
+
+首先，使用 `yarn` 或 `npm` 將該函式庫新增至您的專案中。
+
+```shell 安裝 icon=lucide:download
+# 使用 yarn
+yarn add @arcblock/did-connect-react
+
+# 使用 npm
+npm install @arcblock/did-connect-react
+```
+
+### 運作方式：快速概覽
+
+以下是一個設定登入流程的最小範例。應用程式被包裹在一個 `SessionProvider` 中，並使用一個 `Button` 來切換 `DidConnect` 彈窗的顯示。
+
+```jsx App.js icon=logos:react
+import React from 'react';
+import axios from 'axios';
+import { SessionProvider, SessionConsumer } from '@arcblock/did-connect-react/lib/Session';
+import DidConnect from '@arcblock/did-connect-react/lib/Connect';
+import Button from '@arcblock/did-connect-react/lib/Button';
+
+const webWalletUrl = 'https://web.abtwallet.io/';
+
+function App() {
+  const [isConnectOpen, setConnectOpen] = React.useState(false);
+
+  const handleClose = () => setConnectOpen(false);
+  const handleSuccess = () => {
+    // 成功登入後重新導向或更新 UI
+    window.location.reload();
+  };
+
+  return (
+    <SessionProvider serviceHost="/">
+      <div className="main-content">
+        <SessionConsumer>
+          {({ session }) => {
+            if (session.loading) {
+              return <div>載入會話中...</div>;
+            }
+
+            return session.user ? (
+              <div>
+                <h2>歡迎，{session.user.did}！</h2>
+                <button onClick={() => session.logout()}>登出</button>
+              </div>
+            ) : (
+              <Button onClick={() => setConnectOpen(true)}>連接錢包</Button>
+            );
+          }}
+        </SessionConsumer>
+      </div>
+
+      <DidConnect
+        popup
+        open={isConnectOpen}
+        action="login"
+        checkFn={axios.get}
+        onClose={handleClose}
+        onSuccess={handleSuccess}
+        messages={{
+          title: '登入我的應用程式',
+          scan: '使用您的 DID Wallet 掃描 QR code',
+          confirm: '在您的錢包上確認登入',
+          success: '您已成功登入！',
+        }}
+        webWalletUrl={webWalletUrl}
+      />
+    </SessionProvider>
+  );
+}
+
+export default App;
+```
+
+這個範例展示了如何僅用幾個元件來管理用戶會話並觸發登入過程。
+
+### 下一步
+
+現在您對該函式庫有了基本的了解，可以準備深入探索了。
+
+<x-card data-title="入門指南" data-href="/getting-started" data-icon="lucide:rocket" data-cta="開始建構">
+  跟隨我們的逐步指南，從頭開始將 DID Connect 整合到您自己的應用程式中。
+</x-card>

package/docs/overview.zh.md

@@ -0,0 +1,160 @@
+# 概览
+
+`@arcblock/did-connect-react` 库提供了一套全面的 React 组件和钩子，旨在将去中心化身份（DID）功能无缝集成到您的 Web 应用程序中。它简化了使用 ArcBlock 的 DID 钱包进行用户身份验证和会话管理的过程，为传统登录系统提供了一种安全且用户友好的替代方案。
+
+无论您是需要一个开箱即用的完整解决方案，还是需要对身份验证流程进行精细控制，该库都旨在提供灵活性和易用性。
+
+### 主要功能
+
+<x-cards data-columns="2">
+  <x-card data-title="完整的连接用户界面" data-icon="lucide:qr-code-icon">
+    包含 `DidConnect` 组件，这是一个预构建的、可自定义的模态框，用于处理整个二维码扫描和连接过程。
+  </x-card>
+  <x-card data-title="无缝的会话管理" data-icon="lucide:key-round">
+    利用 `SessionProvider` 和 `useSession` 钩子，轻松管理整个应用程序中的用户登录状态、会话和个人资料数据。
+  </x-card>
+  <x-card data-title="灵活的编程控制" data-icon="lucide:webhook">
+    使用像 `useConnect` 这样的钩子，以编程方式打开、关闭和管理连接模态框，让您完全控制用户体验。
+  </x-card>
+  <x-card data-title="丰富的 UI 工具包" data-icon="lucide:gem">
+    一系列辅助 UI 组件，如 `Avatar`、`Address` 和 `Button`，用于一致地显示用户身份信息。
+  </x-card>
+</x-cards>
+
+### 核心架构
+
+该库围绕一个中央 `SessionProvider` 展开，它管理用户的会话状态。像 `Button` 这样的 UI 组件可以触发 `DidConnect` 模态框，该模态框处理与用户的 DID 钱包之间基于二维码的安全交互。连接完成后，会话将更新，您的应用程序 UI 也会相应地做出反应。
+
+```d2 Basic Authentication Flow
+direction: down
+
+User: { 
+  label: "用户"
+  shape: c4-person 
+}
+
+Your-Application: {
+  label: "你的 React 应用"
+  shape: rectangle
+
+  SessionProvider: {
+    label: "SessionProvider\n（管理会话状态）"
+    shape: rectangle
+
+    App-Components: {
+      label: "你的应用组件"
+      shape: rectangle
+
+      ConnectButton: {
+        label: "ConnectButton"
+        shape: rectangle
+      }
+    }
+
+    DidConnect-Modal: {
+      label: "DidConnect 模态框\n（处理二维码流程）"
+      shape: rectangle
+    }
+  }
+}
+
+DID-Wallet: {
+  label: "DID 钱包"
+  icon: "https://www.arcblock.io/image-bin/uploads/37198ddc4a0b9e91e5c1c821ab895a34.svg"
+}
+
+User -> Your-Application.SessionProvider.App-Components.ConnectButton: "1. 点击按钮"
+Your-Application.SessionProvider.App-Components.ConnectButton -> Your-Application.SessionProvider.DidConnect-Modal: "2. 打开模态框"
+Your-Application.SessionProvider.DidConnect-Modal -> User: "3. 显示二维码"
+User -> DID-Wallet: "4. 扫描并批准"
+DID-Wallet -> Your-Application.SessionProvider: "5. 完成连接"
+Your-Application.SessionProvider -> Your-Application.SessionProvider.App-Components: "6. 更新会话状态"
+
+```
+
+### 安装
+
+要开始使用，请使用 `yarn` 或 `npm` 将该库添加到您的项目中。
+
+```shell Installation icon=lucide:download
+# 使用 yarn
+yarn add @arcblock/did-connect-react
+
+# 使用 npm
+npm install @arcblock/did-connect-react
+```
+
+### 工作原理：快速了解
+
+这是一个设置登录流程的最小示例。应用程序被包裹在 `SessionProvider` 中，并使用 `Button` 来切换 `DidConnect` 模态框的显示。
+
+```jsx App.js icon=logos:react
+import React from 'react';
+import axios from 'axios';
+import { SessionProvider, SessionConsumer } from '@arcblock/did-connect-react/lib/Session';
+import DidConnect from '@arcblock/did-connect-react/lib/Connect';
+import Button from '@arcblock/did-connect-react/lib/Button';
+
+const webWalletUrl = 'https://web.abtwallet.io/';
+
+function App() {
+  const [isConnectOpen, setConnectOpen] = React.useState(false);
+
+  const handleClose = () => setConnectOpen(false);
+  const handleSuccess = () => {
+    // 登录成功后重定向或更新 UI
+    window.location.reload();
+  };
+
+  return (
+    <SessionProvider serviceHost="/">
+      <div className="main-content">
+        <SessionConsumer>
+          {({ session }) => {
+            if (session.loading) {
+              return <div>正在加载会话...</div>;
+            }
+
+            return session.user ? (
+              <div>
+                <h2>欢迎，{session.user.did}！</h2>
+                <button onClick={() => session.logout()}>登出</button>
+              </div>
+            ) : (
+              <Button onClick={() => setConnectOpen(true)}>连接钱包</Button>
+            );
+          }}
+        </SessionConsumer>
+      </div>
+
+      <DidConnect
+        popup
+        open={isConnectOpen}
+        action="login"
+        checkFn={axios.get}
+        onClose={handleClose}
+        onSuccess={handleSuccess}
+        messages={{
+          title: '登录我的应用',
+          scan: '请使用您的 DID 钱包扫描二维码',
+          confirm: '请在您的钱包上确认登录',
+          success: '您已成功登录！',
+        }}
+        webWalletUrl={webWalletUrl}
+      />
+    </SessionProvider>
+  );
+}
+
+export default App;
+```
+
+这个例子展示了如何仅用几个组件来管理用户会话和触发登录过程。
+
+### 后续步骤
+
+现在您对该库有了基本的了解，可以准备进行更深入的探索了。
+
+<x-card data-title="开始使用" data-href="/getting-started" data-icon="lucide:rocket" data-cta="开始构建">
+  跟随我们的分步指南，从头开始将 DID Connect 集成到您自己的应用程序中。
+</x-card>

package/docs/ui-components-address.ja.md

@@ -0,0 +1,121 @@
+# Address
+
+`Address`コンポーネントは、分散型識別子（DID）アドレスをクリーンで読みやすく、ユーザーフレンドリーな形式で表示するために設計された特殊なUI要素です。DIDに典型的な長い文字列を、短縮や簡単なコピーのオプションを提供することで賢く処理し、全体的なユーザーエクスペリエンスを向上させます。
+
+このコンポーネントは`@arcblock/ux/lib/Address`からの単純な再エクスポートであり、DID Connectエコシステム内でアドレスを表示するための一貫した方法を提供します。
+
+## インポート方法
+
+`Address`コンポーネントを使用するには、ライブラリ内の特定のモジュールパスからインポートします。
+
+```javascript Import icon=logos:javascript
+import Address from '@arcblock/did-connect-react/lib/Address';
+```
+
+## 基本的な使用法
+
+コンポーネントにDID文字列を子として渡すだけで、完全なアドレスをレンダリングできます。
+
+```jsx Basic Address Display icon=logos:react
+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を受け入れます：
+
+<x-field-group>
+  <x-field data-name="children" data-type="string" data-required="true">
+    <x-field-desc markdown>表示したいDIDアドレス文字列。</x-field-desc>
+  </x-field>
+  <x-field data-name="shorten" data-type="boolean" data-default="false" data-required="false">
+    <x-field-desc markdown>`true`の場合、アドレスはよりコンパクトな形式（例：`z1Zg2a...s0t`）に短縮されます。</x-field-desc>
+  </x-field>
+  <x-field data-name="copyable" data-type="boolean" data-default="false" data-required="false">
+    <x-field-desc markdown>`true`の場合、コピーアイコンが表示され、ユーザーはワンクリックで完全なアドレスをクリップボードにコピーできます。</x-field-desc>
+  </x-field>
+  <x-field data-name="responsive" data-type="boolean" data-default="true" data-required="false">
+    <x-field-desc markdown>`true`の場合、コンポーネントは利用可能な幅に基づいてアドレスを自動的に短縮し、レイアウトを崩さずにコンテナ内に収まるようにします。</x-field-desc>
+  </x-field>
+</x-field-group>
+
+## 例
+
+以下は`Address`コンポーネントの一般的な使用例です。
+
+### 短縮およびコピー可能なアドレス
+
+これは最も一般的な設定で、ほとんどのUIに適したコンパクトで機能的な表示を提供します。
+
+```jsx Shortened and Copyable icon=logos:react
+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`コンポーネントと並行して使用することで、ユーザープロファイル要素を構築するのに最適です。
+
+```jsx Profile Header icon=logos:react
+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](./ui-components-avatar.md)コンポーネントのドキュメントで詳細を確認してください。

package/docs/ui-components-address.md

@@ -0,0 +1,121 @@
+# Address
+
+The `Address` component is a specialized UI element designed to display Decentralized Identifier (DID) addresses in a clean, readable, and user-friendly format. It intelligently handles the long strings typical of DIDs by providing options for shortening and easy copying, enhancing the overall user experience.
+
+This component is a simple re-export from `@arcblock/ux/lib/Address`, providing a consistent way to display addresses within the DID Connect ecosystem.
+
+## How to Import
+
+To use the `Address` component, import it from its specific module path within the library.
+
+```javascript Import icon=logos:javascript
+import Address from '@arcblock/did-connect-react/lib/Address';
+```
+
+## Basic Usage
+
+Simply pass the DID string as a child to the component to render the full address.
+
+```jsx Basic Address Display icon=logos:react
+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>
+  );
+}
+```
+
+## Features
+
+The `Address` component includes several helpful features to improve usability.
+
+### Shortening
+
+Long DIDs can clutter the UI. Use the `shorten` prop to display a truncated version of the address, showing only the beginning and end characters. This is essential for lists or compact profile views.
+
+### Copy to Clipboard
+
+By adding the `copyable` prop, the component will render a copy icon next to the address. Clicking this icon copies the full DID to the user's clipboard, providing a convenient one-click action.
+
+## Props
+
+The `Address` component accepts the following props:
+
+<x-field-group>
+  <x-field data-name="children" data-type="string" data-required="true">
+    <x-field-desc markdown>The DID address string that you want to display.</x-field-desc>
+  </x-field>
+  <x-field data-name="shorten" data-type="boolean" data-default="false" data-required="false">
+    <x-field-desc markdown>If `true`, the address will be shortened to a more compact format (e.g., `z1Zg2a...s0t`).</x-field-desc>
+  </x-field>
+  <x-field data-name="copyable" data-type="boolean" data-default="false" data-required="false">
+    <x-field-desc markdown>If `true`, a copy icon is displayed, allowing users to copy the full address to their clipboard with a single click.</x-field-desc>
+  </x-field>
+  <x-field data-name="responsive" data-type="boolean" data-default="true" data-required="false">
+    <x-field-desc markdown>When `true`, the component will automatically shorten the address based on the available width, ensuring it fits within its container without breaking the layout.</x-field-desc>
+  </x-field>
+</x-field-group>
+
+## Examples
+
+Here are some common use cases for the `Address` component.
+
+### Shortened and Copyable Address
+
+This is the most common configuration, providing a compact and functional display suitable for most UIs.
+
+```jsx Shortened and Copyable icon=logos:react
+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>
+  );
+}
+```
+
+### Usage with Avatar
+
+The `Address` component works great alongside the `Avatar` component to build user profile elements.
+
+```jsx Profile Header icon=logos:react
+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>
+  );
+}
+```
+
+Now that you know how to display user addresses, you might want to learn how to display their profile pictures. Check out the [Avatar](./ui-components-avatar.md) component documentation for more details.

package/docs/ui-components-address.zh-TW.md

@@ -0,0 +1,121 @@
+# Address
+
+`Address` 元件是一個專門的 UI 元素，旨在以清晰、可讀且使用者友善的格式顯示去中心化識別碼 (DID) 位址。它透過提供縮短和輕鬆複製的選項，智慧地處理 DID 常見的長字串，從而提升整體使用者體驗。
+
+此元件是從 `@arcblock/ux/lib/Address` 簡單地重新匯出，提供在 DID Connect 生態系統內顯示位址的一致方式。
+
+## 如何匯入
+
+若要使用 `Address` 元件，請從其在函式庫中的特定模組路徑匯入。
+
+```javascript Import icon=logos:javascript
+import Address from '@arcblock/did-connect-react/lib/Address';
+```
+
+## 基本用法
+
+只需將 DID 字串作為子項傳遞給元件，即可渲染完整的位址。
+
+```jsx Basic Address Display icon=logos:react
+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` 元件接受以下屬性：
+
+<x-field-group>
+  <x-field data-name="children" data-type="string" data-required="true">
+    <x-field-desc markdown>您想顯示的 DID 位址字串。</x-field-desc>
+  </x-field>
+  <x-field data-name="shorten" data-type="boolean" data-default="false" data-required="false">
+    <x-field-desc markdown>若為 `true`，位址將被縮短為更緊湊的格式 (例如，`z1Zg2a...s0t`)。</x-field-desc>
+  </x-field>
+  <x-field data-name="copyable" data-type="boolean" data-default="false" data-required="false">
+    <x-field-desc markdown>若為 `true`，將顯示一個複製圖示，讓使用者可以一鍵將完整的位址複製到剪貼簿。</x-field-desc>
+  </x-field>
+  <x-field data-name="responsive" data-type="boolean" data-default="true" data-required="false">
+    <x-field-desc markdown>當為 `true` 時，元件將根據可用寬度自動縮短位址，確保它能適應其容器而不會破壞佈局。</x-field-desc>
+  </x-field>
+</x-field-group>
+
+## 範例
+
+以下是 `Address` 元件的一些常見用例。
+
+### 縮短且可複製的位址
+
+這是最常見的配置，提供適合大多數 UI 的緊湊且功能性的顯示。
+
+```jsx Shortened and Copyable icon=logos:react
+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` 元件完美搭配，以建構使用者個人資料元素。
+
+```jsx Profile Header icon=logos:react
+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](./ui-components-avatar.md) 元件文件以獲取更多詳細資訊。