@arcblock/did-connect-react 3.4.14 → 3.5.0

package/docs/hooks-use-connect.zh-TW.md

@@ -1,178 +0,0 @@
-# useConnect
-
-`useConnect` hook 提供了一種強大的程式化方式來開啟、關閉和管理 `DidConnect` UI 模態框。當您需要比宣告式 `Button` 元件提供更多對連線流程的控制時，例如從自訂 UI 元素、選單項目或響應應用程式事件來觸發模態框，這便是理想的解決方案。
-
-這個 hook 是 `Button` 元件背後的引擎，讓您可以直接存取相同的核心功能。
-
-## 運作方式
-
-`useConnect` hook 回傳兩個主要元素：
-
-1.  **`connectHolder`**：一個必須在您的元件樹中渲染的 React 元素。此元素負責在 `DidConnect` 模態框被啟動時進行渲染。在 `open` 函式被呼叫前，它保持不可見。
-2.  **`connectApi`**：一個包含您將用來控制模態框生命週期的函式（`open`、`close`、`openPopup`、`loginOAuth`）的物件。
-
-<!-- DIAGRAM_IMAGE_START:flowchart:4:3:1765962229 -->
-![useConnect](assets/diagram/use-connect-diagram-0.zh-TW.jpg)
-<!-- DIAGRAM_IMAGE_END -->
-
-## 設定
-
-若要使用此 hook，請在您的元件中匯入並呼叫它。然後，確保您在應用程式的某處渲染 `connectHolder`，最好是在頂層元件中，以確保模態框可以覆蓋所有其他內容。
-
-```javascript Basic Setup icon=logos:javascript
-import React from 'react';
-import { useConnect } from '@arcblock/did-connect-react';
-
-function MyComponent() {
-  // 1. 初始化 hook
-  const { connectHolder, connectApi } = useConnect();
-
-  const handleLogin = () => {
-    // 2. 使用 API 開啟模態框
-    connectApi.open({
-      action: 'login',
-      onSuccess: (result) => {
-        console.log('登入成功！', result);
-      },
-      onClose: () => {
-        console.log('模態框已由使用者關閉。');
-      }
-    });
-  };
-
-  return (
-    <div>
-      <button type="button" onClick={handleLogin}>
-        使用 DID 登入
-      </button>
-
-      {/* 3. 渲染 holder 元件 */}
-      {connectHolder}
-    </div>
-  );
-}
-
-export default MyComponent;
-```
-
-## API 參考
-
-`connectApi` 物件提供以下方法來控制連線過程。
-
-### `connectApi.open(options)`
-
-這是觸發並顯示 `DidConnect` 模態框的主要函式。它接受一個 `options` 物件來設定連線會話的行為、外觀和回呼。
-
-**參數 (`options`)**
-
-<x-field-group>
-  <x-field data-name="action" data-type="string" data-required="true">
-    <x-field-desc markdown>連線請求的目的，例如 `login`、`claim`、`sign` 等。這決定了錢包內的工作流程。</x-field-desc>
-  </x-field>
-  <x-field data-name="onSuccess" data-type="(result: object) => void" data-required="false">
-    <x-field-desc markdown>當使用者在錢包中成功完成操作時執行的回呼函式。`result` 物件包含來自錢包的回應。</x-field-desc>
-  </x-field>
-  <x-field data-name="onClose" data-type="() => void" data-required="false">
-    <x-field-desc markdown>當使用者在未完成操作的情況下手動關閉模態框時執行的回呼函式。</x-field-desc>
-  </x-field>
-  <x-field data-name="onError" data-type="(error: any) => void" data-required="false">
-    <x-field-desc markdown>如果在過程中發生錯誤（例如超時或網路問題）時執行的回呼函式。</x-field-desc>
-  </x-field>
-  <x-field data-name="messages" data-type="ConnectMessages" data-required="false">
-    <x-field-desc markdown>用於自訂模態框中顯示文字的物件。詳情請參閱 `ConnectMessages` 型別。</x-field-desc>
-    <x-field data-name="title" data-type="string" data-desc="模態框標題。"></x-field>
-    <x-field data-name="scan" data-type="string" data-desc="QR code 旁的文字。"></x-field>
-    <x-field data-name="confirm" data-type="string" data-desc="確認步驟的文字。"></x-field>
-    <x-field data-name="success" data-type="ReactNode" data-desc="成功畫面的內容。"></x-field>
-  </x-field>
-  <x-field data-name="popup" data-type="boolean" data-default="true">
-    <x-field-desc markdown>若為 `true`，UI 將以模態對話框形式顯示。若為 `false`，則會內聯渲染，需要設定 `containerEl`。</x-field-desc>
-  </x-field>
-  <x-field data-name="containerEl" data-type="Element" data-required="false">
-    <x-field-desc markdown>當 `popup` 設為 `false` 時，`DidConnect` 元件將在此 DOM 元素中渲染。</x-field-desc>
-  </x-field>
-  <x-field data-name="closeTimeout" data-type="number" data-default="2000">
-    <x-field-desc markdown>連線成功後，模態框自動關閉前的延遲時間（毫秒）。</x-field-desc>
-  </x-field>
-  <x-field data-name="checkInterval" data-type="number" data-default="2000">
-    <x-field-desc markdown>輪詢伺服器以檢查會話狀態的間隔時間（毫秒）。</x-field-desc>
-  </x-field>
-  <x-field data-name="checkTimeout" data-type="number" data-default="300000">
-    <x-field-desc markdown>連線嘗試超時前的總時間（毫秒）。</x-field-desc>
-  </x-field>
-  <x-field data-name="extraParams" data-type="object" data-default="{}">
-    <x-field-desc markdown>要包含在會話建立請求中的任何額外參數，這些參數可以在伺服器端擷取。</x-field-desc>
-  </x-field>
-</x-field-group>
-
-### `connectApi.close()`
-
-手動關閉 `DidConnect` 模態框。模態框在成功或使用者取消時會自動關閉，但如果您因其他原因需要以程式化方式關閉它，可以呼叫此函式。
-
-```javascript icon=lucide:x-circle
-// 範例：在成功回呼中短暫延遲後關閉模態框
-connectApi.open({
-  action: 'login',
-  onSuccess: () => {
-    showTemporarySuccessMessage();
-    setTimeout(() => {
-      connectApi.close();
-    }, 1500);
-  },
-  closeTimeout: 999999 // 防止自動關閉
-});
-```
-
-### `connectApi.openPopup(params, options)`
-
-此函式提供了一種替代的連線方法，它會在新的瀏覽器彈出視窗中開啟 DID Connect 流程，而不是在當前頁面內的模態框中。這對於某些類似 OAuth 的流程或與無法注入模態框的網站整合時非常有用。
-
-**參數**
-
-<x-field-group>
-  <x-field data-name="params" data-type="ConnectProps" data-required="true">
-    <x-field-desc markdown>與 `open` 方法的選項類似。一個關鍵區別是 `params.extraParams.provider` 是**必需的**，用於識別驗證方法（例如 'github'、'google'）。</x-field-desc>
-  </x-field>
-  <x-field data-name="options" data-type="object" data-required="false">
-    <x-field-desc markdown>彈出視窗本身的設定。</x-field-desc>
-    <x-field data-name="baseUrl" data-type="string" data-desc="用於建構彈出視窗 URL 的基礎 URL。"></x-field>
-    <x-field data-name="locale" data-type="string" data-default="en" data-desc="彈出視窗內容的語系。"></x-field>
-    <x-field data-name="popupOptions" data-type="object" data-desc="直接傳遞給 `window.open()` 的選項，用於自訂彈出視窗的大小和功能。"></x-field>
-  </x-field>
-</x-field-group>
-
-**用法**
-
-`openPopup` 函式回傳一個 `Promise`，在成功時會解析並帶有驗證資料，在失敗或取消時則會拒絕。
-
-```javascript icon=lucide:external-link
-const handleGithubLogin = async () => {
-  try {
-    const result = await connectApi.openPopup({
-      action: 'login',
-      onSuccess: () => console.log('此回呼也會被觸發'),
-      extraParams: { provider: 'github' } // 此為必需項
-    });
-    console.log('透過彈出視窗登入成功：', result);
-  } catch (err) {
-    if (err.message === 'Popup closed') {
-      console.log('使用者已關閉彈出視窗。');
-    } else {
-      console.error('發生錯誤：', err);
-    }
-  }
-};
-```
-
-### `connectApi.loginOAuth(options)`
-
-這是一個輔助函式，用於直接啟動 OAuth 登入流程。它是一個較低層級的工具，由函式庫的其他部分在內部使用。
-
-**參數 (`options`)**
-
-<x-field-group>
-  <x-field data-name="provider" data-type="string" data-required="true" data-desc="要使用的 OAuth 提供者，例如 'github'、'google'。"></x-field>
-  <x-field data-name="action" data-type="string" data-required="true" data-desc="操作，通常是 'login'。"></x-field>
-  <x-field data-name="extraParams" data-type="object" data-required="false" data-desc="OAuth 流程的額外參數。"></x-field>
-  <x-field data-name="onLogin" data-type="function" data-required="true" data-desc="登入成功後執行的回呼函式。"></x-field>
-</x-field-group>

package/docs/hooks-use-connect.zh.md

@@ -1,178 +0,0 @@
-# useConnect
-
-`useConnect` hook 提供了一种强大的、编程化的方式来打开、关闭和管理 `DidConnect` UI 模态框。当您需要比声明式的 `Button` 组件提供更多对连接流程的控制时，例如从自定义 UI 元素、菜单项或响应应用程序事件来触发模态框，它就是理想的解决方案。
-
-此 hook 是 `Button` 组件背后的引擎，让您可以直接访问相同的核心功能。
-
-## 工作原理
-
-`useConnect` hook 返回两个主要元素：
-
-1.  **`connectHolder`**：一个必须在组件树中渲染的 React 元素。此元素负责在 `DidConnect` 模态框被激活时进行渲染。在 `open` 函数被调用之前，它保持不可见。
-2.  **`connectApi`**：一个包含用于控制模态框生命周期的函数（`open`、`close`、`openPopup`、`loginOAuth`）的对象。
-
-<!-- DIAGRAM_IMAGE_START:flowchart:4:3:1765962229 -->
-![useConnect](assets/diagram/use-connect-diagram-0.zh.jpg)
-<!-- DIAGRAM_IMAGE_END -->
-
-## 设置
-
-要使用此 hook，请在您的组件中导入并调用它。然后，确保在您的应用程序中的某个位置渲染 `connectHolder`，最好是在顶层组件中，以确保模态框可以覆盖所有其他内容。
-
-```javascript Basic Setup icon=logos:javascript
-import React from 'react';
-import { useConnect } from '@arcblock/did-connect-react';
-
-function MyComponent() {
-  // 1. 初始化 hook
-  const { connectHolder, connectApi } = useConnect();
-
-  const handleLogin = () => {
-    // 2. 使用 API 打开模态框
-    connectApi.open({
-      action: 'login',
-      onSuccess: (result) => {
-        console.log('登录成功！', result);
-      },
-      onClose: () => {
-        console.log('模态框被用户关闭。');
-      }
-    });
-  };
-
-  return (
-    <div>
-      <button type="button" onClick={handleLogin}>
-        Login with DID
-      </button>
-
-      {/* 3. 渲染 holder 组件 */}
-      {connectHolder}
-    </div>
-  );
-}
-
-export default MyComponent;
-```
-
-## API 参考
-
-`connectApi` 对象提供了以下方法来控制连接过程。
-
-### `connectApi.open(options)`
-
-这是触发和显示 `DidConnect` 模态框的主要函数。它接受一个 `options` 对象，用于配置连接会话的行为、外观和回调。
-
-**参数 (`options`)**
-
-<x-field-group>
-  <x-field data-name="action" data-type="string" data-required="true">
-    <x-field-desc markdown>连接请求的目的，例如 `login`、`claim`、`sign` 等。这决定了钱包内的操作流程。</x-field-desc>
-  </x-field>
-  <x-field data-name="onSuccess" data-type="(result: object) => void" data-required="false">
-    <x-field-desc markdown>当用户在钱包中成功完成操作时执行的回调函数。`result` 对象包含来自钱包的响应。</x-field-desc>
-  </x-field>
-  <x-field data-name="onClose" data-type="() => void" data-required="false">
-    <x-field-desc markdown>当用户在未完成操作的情况下手动关闭模态框时执行的回调函数。</x-field-desc>
-  </x-field>
-  <x-field data-name="onError" data-type="(error: any) => void" data-required="false">
-    <x-field-desc markdown>如果在过程中发生错误（例如超时或网络问题）时执行的回调函数。</x-field-desc>
-  </x-field>
-  <x-field data-name="messages" data-type="ConnectMessages" data-required="false">
-    <x-field-desc markdown>一个用于自定义模态框中显示文本的对象。有关详细信息，请参阅 `ConnectMessages` 类型。</x-field-desc>
-    <x-field data-name="title" data-type="string" data-desc="模态框标题。"></x-field>
-    <x-field data-name="scan" data-type="string" data-desc="二维码附带的文本。"></x-field>
-    <x-field data-name="confirm" data-type="string" data-desc="确认步骤的文本。"></x-field>
-    <x-field data-name="success" data-type="ReactNode" data-desc="成功屏幕的内容。"></x-field>
-  </x-field>
-  <x-field data-name="popup" data-type="boolean" data-default="true">
-    <x-field-desc markdown>如果为 `true`，UI 将作为模态对话框显示。如果为 `false`，它将内联渲染，需要设置 `containerEl`。</x-field-desc>
-  </x-field>
-  <x-field data-name="containerEl" data-type="Element" data-required="false">
-    <x-field-desc markdown>当 `popup` 设置为 `false` 时，`DidConnect` 组件将在此 DOM 元素中渲染。</x-field-desc>
-  </x-field>
-  <x-field data-name="closeTimeout" data-type="number" data-default="2000">
-    <x-field-desc markdown>成功连接后，模态框自动关闭前的延迟时间（以毫秒为单位）。</x-field-desc>
-  </x-field>
-  <x-field data-name="checkInterval" data-type="number" data-default="2000">
-    <x-field-desc markdown>轮询服务器以检查会话状态的间隔时间（以毫秒为单位）。</x-field-desc>
-  </x-field>
-  <x-field data-name="checkTimeout" data-type="number" data-default="300000">
-    <x-field-desc markdown>连接尝试超时的总时间（以毫秒为单位）。</x-field-desc>
-  </x-field>
-  <x-field data-name="extraParams" data-type="object" data-default="{}">
-    <x-field-desc markdown>要包含在会话创建请求中的任何额外参数，这些参数可以在服务器端检索。</x-field-desc>
-  </x-field>
-</x-field-group>
-
-### `connectApi.close()`
-
-手动关闭 `DidConnect` 模态框。模态框在成功或用户取消时会自动关闭，但如果需要因其他原因以编程方式关闭它，可以调用此函数。
-
-```javascript icon=lucide:x-circle
-// 示例：在成功回调中短暂延迟后关闭模态框
-connectApi.open({
-  action: 'login',
-  onSuccess: () => {
-    showTemporarySuccessMessage();
-    setTimeout(() => {
-      connectApi.close();
-    }, 1500);
-  },
-  closeTimeout: 999999 // 防止自动关闭
-});
-```
-
-### `connectApi.openPopup(params, options)`
-
-此函数提供了一种替代的连接方法，它会在新的浏览器弹出窗口中打开 DID Connect 流程，而不是在当前页面内打开模态框。这对于某些类似 OAuth 的流程或在无法注入模态框的网站上进行集成时非常有用。
-
-**参数**
-
-<x-field-group>
-  <x-field data-name="params" data-type="ConnectProps" data-required="true">
-    <x-field-desc markdown>与 `open` 方法的选项类似。一个关键区别是，`params.extraParams.provider` 是**必需的**，用于标识认证方法（例如 'github'、'google'）。</x-field-desc>
-  </x-field>
-  <x-field data-name="options" data-type="object" data-required="false">
-    <x-field-desc markdown>弹出窗口本身的配置。</x-field-desc>
-    <x-field data-name="baseUrl" data-type="string" data-desc="用于构建弹出窗口 URL 的基础 URL。"></x-field>
-    <x-field data-name="locale" data-type="string" data-default="en" data-desc="弹出窗口内容的区域设置。"></x-field>
-    <x-field data-name="popupOptions" data-type="object" data-desc="直接传递给 `window.open()` 的选项，用于自定义弹出窗口的大小和功能。"></x-field>
-  </x-field>
-</x-field-group>
-
-**用法**
-
-`openPopup` 函数返回一个 `Promise`，它在成功时解析为认证数据，在失败或取消时拒绝。
-
-```javascript icon=lucide:external-link
-const handleGithubLogin = async () => {
-  try {
-    const result = await connectApi.openPopup({
-      action: 'login',
-      onSuccess: () => console.log('此回调也会被触发'),
-      extraParams: { provider: 'github' } // 这是必需的
-    });
-    console.log('通过弹出窗口登录成功：', result);
-  } catch (err) {
-    if (err.message === 'Popup closed') {
-      console.log('用户关闭了弹出窗口。');
-    } else {
-      console.error('发生错误：', err);
-    }
-  }
-};
-```
-
-### `connectApi.loginOAuth(options)`
-
-这是一个辅助函数，用于直接启动 OAuth 登录流程。它是一个较低级别的实用工具，在库的其他部分内部使用。
-
-**参数 (`options`)**
-
-<x-field-group>
-  <x-field data-name="provider" data-type="string" data-required="true" data-desc="要使用的 OAuth 提供商，例如 'github'、'google'。"></x-field>
-  <x-field data-name="action" data-type="string" data-required="true" data-desc="操作，通常是 'login'。"></x-field>
-  <x-field data-name="extraParams" data-type="object" data-required="false" data-desc="OAuth 流程的附加参数。"></x-field>
-  <x-field data-name="onLogin" data-type="function" data-required="true" data-desc="成功登录后执行的回调函数。"></x-field>
-</x-field-group>

package/docs/hooks-use-did.ja.md

@@ -1,107 +0,0 @@
-# useDid
-
-`useDid`フックは、`session.user`オブジェクトから特定のDID関連情報を簡単に抽出して操作するための便利なユーティリティです。手動での処理なしに、永続DID、ウォレット情報、接続済みアカウントなどの一般的に必要なデータを取得するためにユーザーオブジェクトの解析を簡素化します。
-
-このフックは、セッションコンテキストにアクセスできるように、`SessionProvider`の子であるコンポーネント内で使用する必要があります。
-
-## 使用方法
-
-このフックを使用するには、`useSession`と一緒にインポートします。`useSession`を呼び出して現在のセッション状態を取得し、その`session`オブジェクトを`useDid`に渡します。
-
-```javascript Basic Usage icon=logos:react
-import { useSession } from '@arcblock/did-connect-react';
-import { useDid } from '@arcblock/did-connect-react/lib/User';
-
-function UserProfile() {
-  const { session } = useSession();
-  const {
-    did,
-    walletDid,
-    connectedDids,
-    sourceProvider,
-    connectedAccounts,
-  } = useDid({ session });
-
-  if (!session.user) {
-    return <p>DID情報を表示するにはログインしてください。</p>;
-  }
-
-  return (
-    <div>
-      <h2>ユーザーDID情報</h2>
-      <p><strong>永続DID:</strong> {did}</p>
-      <p><strong>ウォレットDID:</strong> {walletDid || 'N/A'}</p>
-      <p><strong>ログイン方法:</strong> {sourceProvider}</p>
-      <h3>接続済みアカウント ({connectedAccounts.length})</h3>
-      <ul>
-        {connectedAccounts.map((account) => (
-          <li key={account.did}>
-            {account.provider}: {account.did}
-          </li>
-        ))}
-      </ul>
-    </div>
-  );
-}
-```
-
-## パラメータ
-
-`useDid`フックは、単一のオブジェクトをパラメータとして受け取ります。
-
-<x-field data-name="options" data-type="object" data-required="true">
-  <x-field data-name="session" data-type="object" data-required="true" data-desc="`useSession`フックから取得したセッションオブジェクト。このフックは`session.user`が存在する場合にのみデータを計算します。">
-    <x-field data-name="user" data-type="object" data-required="false" data-desc="ログイン成功後にセッションコンテキストによって提供されるユーザーオブジェクト。"></x-field>
-  </x-field>
-</x-field>
-
-## 戻り値
-
-このフックは、派生したさまざまなDID情報を含む状態オブジェクトを返します。このオブジェクトは、`session.user`オブジェクトが変更されるたびに更新されます。
-
-<x-field-group>
-  <x-field data-name="did" data-type="string" data-desc="ユーザーの永続DID。これは`permanentDid`のエイリアスです。"></x-field>
-  <x-field data-name="wallet" data-type="object" data-desc="プロバイダーが'wallet'である接続済みアカウントオブジェクト。ウォレットが接続されていない場合は`undefined`を返します。">
-      <x-field data-name="did" data-type="string" data-desc="ウォレットアカウントのDID。"></x-field>
-      <x-field data-name="provider" data-type="string" data-desc="プロバイダー名。'wallet'になります。"></x-field>
-  </x-field>
-  <x-field data-name="walletDid" data-type="string" data-desc="ユーザーの接続済みウォレットのDID。ウォレットが接続されていない場合は`undefined`を返します。"></x-field>
-  <x-field data-name="permanentDid" data-type="string" data-desc="ユーザーの永続DIDで、`user.did`からのプライマリ識別子です。"></x-field>
-  <x-field data-name="connectedDids" data-type="string[]" data-desc="ユーザーの接続済みアカウントのすべてのDIDを含む配列。"></x-field>
-  <x-field data-name="connectedAccounts" data-type="object[]" data-desc="接続済みアカウントオブジェクトの完全な配列。">
-    <x-field data-name="did" data-type="string" data-desc="接続済みアカウントのDID。"></x-field>
-    <x-field data-name="provider" data-type="string" data-desc="アカウントのプロバイダー（例：'wallet'、'github'）。"></x-field>
-  </x-field>
-  <x-field data-name="sourceProvider" data-type="string" data-desc="ユーザーが最初にログインに使用したプロバイダー（例：'wallet'、'github'）。デフォルトは'wallet'です。"></x-field>
-  <x-field data-name="sourceProviders" data-type="string[]" data-desc="ユーザーの接続済みアカウントのすべてのプロバイダー名の配列。"></x-field>
-</x-field-group>
-
-## スタンドアロンのヘルパー関数
-
-`useDid`フックは、エクスポートされた一連のヘルパー関数に基づいて構築されています。フックのリアクティブな状態管理が不要で、単にユーザーオブジェクトから特定の情報を抽出したい場合は、これらの関数を直接インポートして使用できます。
-
-| Function                 | Description                                                  |
-| ------------------------ | ------------------------------------------------------------ |
-| `getPermanentDid(user)`  | ユーザーオブジェクトから永続DIDを抽出します。             |
-| `getWalletDid(user)`     | 接続済みウォレットのDIDを抽出します。                    |
-| `getConnectedAccounts(user)` | 接続済みアカウントの配列を取得します。                 |
-| `getConnectedDids(user)`   | すべての接続済みアカウントからDIDの配列を取得します。      |
-| `getSourceProvider(user)`  | 初回ログインに使用されたプロバイダーを取得します。                |
-| `getSourceProviders(user)` | 接続されているすべてのプロバイダー名の配列を取得します。               |
-| `getWallet(user)`        | 完全なウォレットアカウントオブジェクトを検索して返します。        |
-
-### 例：ヘルパー関数の使用
-
-```javascript Direct Function Usage icon=logos:javascript
-import { getWalletDid } from '@arcblock/did-connect-react/lib/User/use-did';
-import { useSession } from '@arcblock/did-connect-react';
-
-// このアプローチは、イベントハンドラーやその他の非React関数内で役立ちます
-function handleUserAction() {
-  const { session } = useSession();
-  if (session.user) {
-    const walletDid = getWalletDid(session.user);
-    console.log('ユーザーのウォレットDID:', walletDid);
-  }
-}
-```

package/docs/hooks-use-did.md

@@ -1,107 +0,0 @@
-# useDid
-
-The `useDid` hook is a convenient utility for easily extracting and working with specific DID-related information from the `session.user` object. It simplifies parsing the user object to get commonly needed data like the permanent DID, wallet information, and connected accounts without manual processing.
-
-This hook should be used within a component that is a child of the `SessionProvider` to ensure it has access to the session context.
-
-## How to Use
-
-To use the hook, import it along with `useSession`. Call `useSession` to get the current session state, and then pass the `session` object to `useDid`.
-
-```javascript Basic Usage icon=logos:react
-import { useSession } from '@arcblock/did-connect-react';
-import { useDid } from '@arcblock/did-connect-react/lib/User';
-
-function UserProfile() {
-  const { session } = useSession();
-  const {
-    did,
-    walletDid,
-    connectedDids,
-    sourceProvider,
-    connectedAccounts,
-  } = useDid({ session });
-
-  if (!session.user) {
-    return <p>Please log in to view your DID information.</p>;
-  }
-
-  return (
-    <div>
-      <h2>User DID Information</h2>
-      <p><strong>Permanent DID:</strong> {did}</p>
-      <p><strong>Wallet DID:</strong> {walletDid || 'N/A'}</p>
-      <p><strong>Login Method:</strong> {sourceProvider}</p>
-      <h3>Connected Accounts ({connectedAccounts.length})</h3>
-      <ul>
-        {connectedAccounts.map((account) => (
-          <li key={account.did}>
-            {account.provider}: {account.did}
-          </li>
-        ))}
-      </ul>
-    </div>
-  );
-}
-```
-
-## Parameters
-
-The `useDid` hook accepts a single object as its parameter.
-
-<x-field data-name="options" data-type="object" data-required="true">
-  <x-field data-name="session" data-type="object" data-required="true" data-desc="The session object obtained from the `useSession` hook. The hook will only compute data when `session.user` is present.">
-    <x-field data-name="user" data-type="object" data-required="false" data-desc="The user object provided by the session context after a successful login."></x-field>
-  </x-field>
-</x-field>
-
-## Return Value
-
-The hook returns a state object containing various pieces of derived DID information. This object will be updated whenever the `session.user` object changes.
-
-<x-field-group>
-  <x-field data-name="did" data-type="string" data-desc="The user's permanent DID. This is an alias for `permanentDid`."></x-field>
-  <x-field data-name="wallet" data-type="object" data-desc="The connected account object where the provider is 'wallet'. Returns `undefined` if no wallet is connected.">
-      <x-field data-name="did" data-type="string" data-desc="The DID of the wallet account."></x-field>
-      <x-field data-name="provider" data-type="string" data-desc="The provider name, which will be 'wallet'."></x-field>
-  </x-field>
-  <x-field data-name="walletDid" data-type="string" data-desc="The DID of the user's connected wallet. Returns `undefined` if no wallet is connected."></x-field>
-  <x-field data-name="permanentDid" data-type="string" data-desc="The user's permanent DID, which is the primary identifier from `user.did`."></x-field>
-  <x-field data-name="connectedDids" data-type="string[]" data-desc="An array of all DIDs from the user's connected accounts."></x-field>
-  <x-field data-name="connectedAccounts" data-type="object[]" data-desc="The full array of connected account objects.">
-    <x-field data-name="did" data-type="string" data-desc="The DID of the connected account."></x-field>
-    <x-field data-name="provider" data-type="string" data-desc="The provider of the account (e.g., 'wallet', 'github')."></x-field>
-  </x-field>
-  <x-field data-name="sourceProvider" data-type="string" data-desc="The provider the user originally used to log in (e.g., 'wallet', 'github'). Defaults to 'wallet'."></x-field>
-  <x-field data-name="sourceProviders" data-type="string[]" data-desc="An array of all provider names from the user's connected accounts."></x-field>
-</x-field-group>
-
-## Standalone Helper Functions
-
-The `useDid` hook is built on a set of exported helper functions. If you don't need the reactive state management of a hook and just want to extract a specific piece of information from a user object, you can import and use these functions directly.
-
-| Function                 | Description                                                  |
-| ------------------------ | ------------------------------------------------------------ |
-| `getPermanentDid(user)`  | Extracts the permanent DID from the user object.             |
-| `getWalletDid(user)`     | Extracts the DID of the connected wallet.                    |
-| `getConnectedAccounts(user)` | Retrieves the array of connected accounts.                 |
-| `getConnectedDids(user)`   | Retrieves an array of DIDs from all connected accounts.      |
-| `getSourceProvider(user)`  | Gets the provider used for the initial login.                |
-| `getSourceProviders(user)` | Gets an array of all connected provider names.               |
-| `getWallet(user)`        | Finds and returns the complete wallet account object.        |
-
-### Example: Using a Helper Function
-
-```javascript Direct Function Usage icon=logos:javascript
-import { getWalletDid } from '@arcblock/did-connect-react/lib/User/use-did';
-import { useSession } from '@arcblock/did-connect-react';
-
-// This approach can be useful inside event handlers or other non-React functions
-function handleUserAction() {
-  const { session } = useSession();
-  if (session.user) {
-    const walletDid = getWalletDid(session.user);
-    console.log('User Wallet DID:', walletDid);
-  }
-}
-```