@arcblock/did-connect-react 3.4.14 → 3.5.0

package/docs/getting-started.zh-TW.md

@@ -1,138 +0,0 @@
-# 入門指南
-
-本指南將引導您完成使用 `@arcblock/did-connect-react` 將去中心化身分（DID）驗證整合到您的 React 應用程式中的基本步驟。只需幾分鐘，您就可以擁有一個功能齊全的登入和登出流程。
-
-### 前提條件
-
-在開始之前，請確保您的開發環境符合以下標準：
-
-- 您已設定好一個 React 專案。
-- 您有一個正在執行的 Blocklet Server 實例，它將處理驗證請求。該函式庫旨在與由 Blocklet Server 驅動的後端無縫協作。
-
-## 步驟 1：安裝函式庫
-
-首先，將 `@arcblock/did-connect-react` 套件新增到您的專案中。您可以使用 npm 或 yarn。
-
-```bash Install with npm icon=logos:npm
-npm install @arcblock/did-connect-react
-```
-
-```bash Install with yarn icon=logos:yarn
-yarn add @arcblock/did-connect-react
-```
-
-## 步驟 2：設定 SessionProvider
-
-`SessionProvider` 是該函式庫的核心。它是一個 context provider，負責管理使用者的會話狀態（如登入狀態和使用者資訊），並將其提供給所有被它包裹的元件。您應該將它放在應用程式的根部，例如，在您的 `App.js` 檔案中。
-
-對於基於 Blocklet 建構的應用程式，建議使用 `createAuthServiceSessionContext` 工廠函數來初始化 provider。
-
-```javascript App.js icon=logos:react
-import React from 'react';
-import { createAuthServiceSessionContext } from '@arcblock/did-connect-react/lib/Session';
-import Home from './Home'; // 我們將在下一步建立此元件
-
-// createAuthServiceSessionContext 專為 Blocklet 環境進行了最佳化
-const { SessionProvider } = createAuthServiceSessionContext();
-
-function App() {
-  return (
-    // serviceHost 屬性指向您後端驗證服務的基礎路徑。
-    // 對於標準的 Blocklet，這通常是 blocklet 的前綴或 '/'。
-    <SessionProvider serviceHost="/">
-      <Home />
-    </SessionProvider>
-  );
-}
-
-export default App;
-```
-
-## 步驟 3：實作登入和登出
-
-現在，讓我們建立一個允許使用者登入和登出的元件。我們可以使用 React 的 `useContext` hook 搭配 `SessionContext` 來存取會話資料和函數。
-
-`session` 物件為您提供了所需的一切：目前的 `user`、`loading` 狀態，以及像 `login()` 和 `logout()` 這樣的函數。
-
-```javascript Home.js icon=logos:react
-import React, { useContext } from 'react';
-import { SessionContext } from '@arcblock/did-connect-react/lib/Session';
-import ConnectButton from '@arcblock/did-connect-react/lib/Button';
-import Button from '@arcblock/ux/lib/Button'; // 一個通用按鈕
-import CircularProgress from '@mui/material/CircularProgress';
-
-function Home() {
-  // 存取會話 context
-  const { session } = useContext(SessionContext);
-
-  // 解構以便於存取
-  const { user, loading, login, logout } = session;
-
-  // 在會話初始化期間顯示載入指示器
-  if (loading) {
-    return <CircularProgress />;
-  }
-
-  return (
-    <div style={{ padding: '20px', textAlign: 'center' }}>
-      {user ? (
-        // 如果使用者已登入，顯示他們的 DID 和一個登出按鈕
-        <div>
-          <h1>歡迎！</h1>
-          <p>您的 DID： {user.did}</p>
-          <Button variant="contained" color="secondary" onClick={logout}>
-            登出
-          </Button>
-        </div>
-      ) : (
-        // 如果未登入，顯示登入按鈕
-        <div>
-          <h1>請登入</h1>
-          <ConnectButton onClick={() => login()}>
-            連接錢包
-          </ConnectButton>
-        </div>
-      )}
-    </div>
-  );
-}
-
-export default Home;
-```
-
-當使用者點擊 `ConnectButton` 時，會呼叫 `login()` 函數。此函數負責打開 DID Connect 彈出視窗，該視窗會顯示一個 QR code 供使用者使用他們的 DID Wallet 掃描，並管理整個驗證過程。
-
-## 步驟 4：存取使用者資料
-
-一旦使用者成功登入，`session.user` 物件將會被填入資料。此物件包含從使用者的 DID Wallet 中檢索到的個人資料資訊。
-
-由 context 提供的 `session` 物件是您與使用者驗證狀態互動的主要介面。以下是其關鍵屬性：
-
-<x-field-group>
-  <x-field data-name="user" data-type="object | null" data-desc="已驗證的使用者物件。如果沒有使用者登入，則為 `null`。">
-    <x-field data-name="did" data-type="string" data-desc="使用者的去中心化身分識別碼（DID）。"></x-field>
-    <x-field data-name="fullName" data-type="string" data-desc="來自使用者錢包個人資料的全名。"></x-field>
-    <x-field data-name="email" data-type="string" data-desc="來自使用者錢包個人資料的電子郵件。"></x-field>
-  </x-field>
-  <x-field data-name="loading" data-type="boolean" data-desc="在會話初始化或刷新期間為 `true`，否則為 `false`。"></x-field>
-  <x-field data-name="login" data-type="function" data-desc="一個啟動登入過程的函數，它會打開 DID Connect 使用者介面。"></x-field>
-  <x-field data-name="logout" data-type="function" data-desc="一個將使用者登出並清除會話的函數。"></x-field>
-  <x-field data-name="initialized" data-type="boolean" data-desc="初始會話檢查完成後為 `true`。"></x-field>
-</x-field-group>
-
-## 你已完成所有設定！
-
-恭喜！您已成功在您的 React 應用程式中實作了一個完整的基於 DID 的驗證流程。使用者現在可以使用他們的 DID Wallet 登入，您的應用程式也可以安全地存取他們的會話資訊。
-
-### 後續步驟
-
-要深入了解並探索更多進階功能，請查看以下部分：
-
-<x-cards>
-  <x-card data-title="會話管理 (SessionProvider)" data-icon="lucide:key-round" data-href="/core-components/session-provider">
-    了解 SessionProvider 的所有設定選項，以自訂會話行為、逾時等。
-  </x-card>
-  <x-card data-title="連接 UI (DidConnect)" data-icon="lucide:qr-code" data-href="/core-components/did-connect">
-    探索 DidConnect 元件，以一種宣告式的方式將連接 UI 直接嵌入到您的頁面中。
-  </x-card>
-</x-cards>

package/docs/getting-started.zh.md

@@ -1,138 +0,0 @@
-# 快速入门
-
-本指南将引导你完成使用 `@arcblock/did-connect-react` 将去中心化身份（DID）验证集成到你的 React 应用中的基本步骤。只需几分钟，你就能拥有一个功能齐全的登录和登出流程。
-
-### 前提条件
-
-在开始之前，请确保你的开发环境满足以下条件：
-
-- 你已建立一个 React 项目。
-- 你有一个正在运行的 Blocklet Server 实例，用于处理验证请求。该库旨在与由 Blocklet Server 提供支持的后端无缝协作。
-
-## 第 1 步：安装库
-
-首先，将 `@arcblock/did-connect-react` 包添加到你的项目中。你可以使用 npm 或 yarn。
-
-```bash Install with npm icon=logos:npm
-npm install @arcblock/did-connect-react
-```
-
-```bash Install with yarn icon=logos:yarn
-yarn add @arcblock/did-connect-react
-```
-
-## 第 2 步：设置 SessionProvider
-
-`SessionProvider` 是该库的核心。它是一个上下文提供程序，用于管理用户的会话状态（如登录状态和用户信息），并使其对所有包裹在其中的组件可用。你应该将其放置在应用的根部，例如，在你的 `App.js` 文件中。
-
-对于基于 Blocklet 构建的应用，推荐的初始化提供程序的方法是使用 `createAuthServiceSessionContext` 工厂函数。
-
-```javascript App.js icon=logos:react
-import React from 'react';
-import { createAuthServiceSessionContext } from '@arcblock/did-connect-react/lib/Session';
-import Home from './Home'; // 我们将在下一步创建此组件
-
-// createAuthServiceSessionContext 针对 Blocklet 环境进行了优化
-const { SessionProvider } = createAuthServiceSessionContext();
-
-function App() {
-  return (
-    // serviceHost prop 指向后端验证服务的基础路径。
-    // 对于标准 Blocklet，这通常是 blocklet 的前缀或“/”。
-    <SessionProvider serviceHost="/">
-      <Home />
-    </SessionProvider>
-  );
-}
-
-export default App;
-```
-
-## 第 3 步：实现登录和登出
-
-现在，让我们创建一个允许用户登录和登出的组件。我们可以使用 React 的 `useContext` 钩子和 `SessionContext` 来访问会话数据和函数。
-
-`session` 对象为你提供了所需的一切：当前的 `user`、`loading` 状态，以及像 `login()` 和 `logout()` 这样的函数。
-
-```javascript Home.js icon=logos:react
-import React, { useContext } from 'react';
-import { SessionContext } from '@arcblock/did-connect-react/lib/Session';
-import ConnectButton from '@arcblock/did-connect-react/lib/Button';
-import Button from '@arcblock/ux/lib/Button'; // 一个通用按钮
-import CircularProgress from '@mui/material/CircularProgress';
-
-function Home() {
-  // 访问会话上下文
-  const { session } = useContext(SessionContext);
-
-  // 解构以便更轻松地访问
-  const { user, loading, login, logout } = session;
-
-  // 在会话初始化期间显示加载指示器
-  if (loading) {
-    return <CircularProgress />;
-  }
-
-  return (
-    <div style={{ padding: '20px', textAlign: 'center' }}>
-      {user ? (
-        // 如果用户已登录，则显示其 DID 和登出按钮
-        <div>
-          <h1>Welcome!</h1>
-          <p>Your DID: {user.did}</p>
-          <Button variant="contained" color="secondary" onClick={logout}>
-            Logout
-          </Button>
-        </div>
-      ) : (
-        // 如果未登录，则显示登录按钮
-        <div>
-          <h1>Please Sign In</h1>
-          <ConnectButton onClick={() => login()}>
-            Connect Wallet
-          </ConnectButton>
-        </div>
-      )}
-    </div>
-  );
-}
-
-export default Home;
-```
-
-当用户点击 `ConnectButton` 时，`login()` 函数被调用。该函数负责打开 DID Connect 弹窗，显示一个二维码供用户使用其 DID 钱包扫描，并管理整个验证过程。
-
-## 第 4 步：访问用户数据
-
-用户成功登录后，`session.user` 对象将被填充。该对象包含从用户 DID 钱包中检索到的用户个人资料信息。
-
-由上下文提供的 `session` 对象是你与用户验证状态交互的主要接口。以下是其关键属性：
-
-<x-field-group>
-  <x-field data-name="user" data-type="object | null" data-desc="已验证的用户对象。如果没有用户登录，则为 `null`。">
-    <x-field data-name="did" data-type="string" data-desc="用户的去中心化身份标识（DID）。"></x-field>
-    <x-field data-name="fullName" data-type="string" data-desc="来自用户钱包个人资料的全名。"></x-field>
-    <x-field data-name="email" data-type="string" data-desc="来自用户钱包个人资料的电子邮件。"></x-field>
-  </x-field>
-  <x-field data-name="loading" data-type="boolean" data-desc="在会话初始化或刷新期间为 `true`，否则为 `false`。"></x-field>
-  <x-field data-name="login" data-type="function" data-desc="一个启动登录过程的函数，它会打开 DID Connect UI。"></x-field>
-  <x-field data-name="logout" data-type="function" data-desc="一个用于登出用户并清除会话的函数。"></x-field>
-  <x-field data-name="initialized" data-type="boolean" data-desc="初始会话检查完成后为 `true`。"></x-field>
-</x-field-group>
-
-## 你已准备就绪！
-
-恭喜！你已成功在你的 React 应用中实现了一个完整的基于 DID 的验证流程。用户现在可以使用他们的 DID 钱包登录，并且你的应用可以安全地访问他们的会话信息。
-
-### 后续步骤
-
-要深入了解并探索更多高级功能，请查看以下部分：
-
-<x-cards>
-  <x-card data-title="会话管理 (SessionProvider)" data-icon="lucide:key-round" data-href="/core-components/session-provider">
-    了解 `SessionProvider` 的所有配置选项，以自定义会话行为、超时等。
-  </x-card>
-  <x-card data-title="连接 UI (DidConnect)" data-icon="lucide:qr-code" data-href="/core-components/did-connect">
-    探索 `DidConnect` 组件，以声明方式将连接 UI 直接嵌入到你的页面中。
-  </x-card>
-</x-cards>

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

@@ -1,178 +0,0 @@
-# useConnect
-
-`useConnect`フックは、`DidConnect` UIモーダルをプログラムで開閉・管理するための強力な方法を提供します。宣言的な`Button`コンポーネントが提供するものよりも接続フローをより詳細に制御する必要がある場合、例えばカスタムUI要素、メニュー項目、またはアプリケーションイベントに応じてモーダルをトリガーする場合に理想的なソリューションです。
-
-このフックは`Button`コンポーネントの背後にあるエンジンであり、同じコア機能への直接アクセスを提供します。
-
-## 仕組み
-
-`useConnect`フックは、主に2つの要素を返します：
-
-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.ja.jpg)
-<!-- DIAGRAM_IMAGE_END -->
-
-## セットアップ
-
-フックを使用するには、それをインポートし、コンポーネント内で呼び出します。次に、アプリケーションのどこか、できればトップレベルのコンポーネントで`connectHolder`をレンダリングして、モーダルが他のすべてのコンテンツの上にオーバーレイできるようにします。
-
-```javascript Basic Setup icon=logos:javascript
-import React from 'react';
-import { useConnect } from '@arcblock/did-connect-react';
-
-function MyComponent() {
-  // 1. フックを初期化する
-  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. ホルダーコンポーネントをレンダリングする */}
-      {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コードに付随するテキスト。"></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`メソッドのオプションに似ています。主な違いは、認証方法（例：「github」、「google」）を識別するために`params.extraParams.provider`が**必須**であることです。</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.md

@@ -1,178 +0,0 @@
-# useConnect
-
-The `useConnect` hook provides a powerful, programmatic way to open, close, and manage the `DidConnect` UI modal. It's the ideal solution when you need more control over the connection flow than the declarative `Button` component offers, such as triggering the modal from a custom UI element, a menu item, or in response to an application event.
-
-This hook is the engine behind the `Button` component and gives you direct access to the same core functionalities.
-
-## How It Works
-
-The `useConnect` hook returns two main elements:
-
-1.  **`connectHolder`**: A React element that must be rendered in your component tree. This element is responsible for rendering the `DidConnect` modal when it's activated. It remains invisible until the `open` function is called.
-2.  **`connectApi`**: An object containing the functions (`open`, `close`, `openPopup`, `loginOAuth`) you'll use to control the modal's lifecycle.
-
-<!-- DIAGRAM_IMAGE_START:flowchart:4:3:1765962229 -->
-![useConnect](assets/diagram/use-connect-diagram-0.jpg)
-<!-- DIAGRAM_IMAGE_END -->
-
-## Setup
-
-To use the hook, import it and call it within your component. Then, ensure you render the `connectHolder` somewhere in your application, preferably at a top-level component to ensure the modal can overlay all other content.
-
-```javascript Basic Setup icon=logos:javascript
-import React from 'react';
-import { useConnect } from '@arcblock/did-connect-react';
-
-function MyComponent() {
-  // 1. Initialize the hook
-  const { connectHolder, connectApi } = useConnect();
-
-  const handleLogin = () => {
-    // 2. Use the API to open the modal
-    connectApi.open({
-      action: 'login',
-      onSuccess: (result) => {
-        console.log('Login successful!', result);
-      },
-      onClose: () => {
-        console.log('Modal closed by user.');
-      }
-    });
-  };
-
-  return (
-    <div>
-      <button type="button" onClick={handleLogin}>
-        Login with DID
-      </button>
-
-      {/* 3. Render the holder component */}
-      {connectHolder}
-    </div>
-  );
-}
-
-export default MyComponent;
-```
-
-## API Reference
-
-The `connectApi` object provides the following methods to control the connection process.
-
-### `connectApi.open(options)`
-
-This is the primary function to trigger and display the `DidConnect` modal. It accepts a single `options` object to configure the behavior, appearance, and callbacks for the connection session.
-
-**Parameters (`options`)**
-
-<x-field-group>
-  <x-field data-name="action" data-type="string" data-required="true">
-    <x-field-desc markdown>The purpose of the connection request, e.g., `login`, `claim`, `sign`, etc. This determines the workflow within the wallet.</x-field-desc>
-  </x-field>
-  <x-field data-name="onSuccess" data-type="(result: object) => void" data-required="false">
-    <x-field-desc markdown>Callback function executed when the user successfully completes the action in their wallet. The `result` object contains the response from the wallet.</x-field-desc>
-  </x-field>
-  <x-field data-name="onClose" data-type="() => void" data-required="false">
-    <x-field-desc markdown>Callback function executed when the user manually closes the modal without completing the action.</x-field-desc>
-  </x-field>
-  <x-field data-name="onError" data-type="(error: any) => void" data-required="false">
-    <x-field-desc markdown>Callback function executed if an error occurs during the process, such as a timeout or a network issue.</x-field-desc>
-  </x-field>
-  <x-field data-name="messages" data-type="ConnectMessages" data-required="false">
-    <x-field-desc markdown>An object to customize the text displayed in the modal. See `ConnectMessages` type for details.</x-field-desc>
-    <x-field data-name="title" data-type="string" data-desc="Modal title."></x-field>
-    <x-field data-name="scan" data-type="string" data-desc="Text accompanying the QR code."></x-field>
-    <x-field data-name="confirm" data-type="string" data-desc="Text for the confirmation step."></x-field>
-    <x-field data-name="success" data-type="ReactNode" data-desc="Content for the success screen."></x-field>
-  </x-field>
-  <x-field data-name="popup" data-type="boolean" data-default="true">
-    <x-field-desc markdown>If `true`, the UI is displayed as a modal dialog. If `false`, it renders inline, requiring `containerEl` to be set.</x-field-desc>
-  </x-field>
-  <x-field data-name="containerEl" data-type="Element" data-required="false">
-    <x-field-desc markdown>A DOM element where the `DidConnect` component will be rendered if `popup` is set to `false`.</x-field-desc>
-  </x-field>
-  <x-field data-name="closeTimeout" data-type="number" data-default="2000">
-    <x-field-desc markdown>The delay in milliseconds before the modal automatically closes after a successful connection.</x-field-desc>
-  </x-field>
-  <x-field data-name="checkInterval" data-type="number" data-default="2000">
-    <x-field-desc markdown>The interval in milliseconds for polling the server to check the session status.</x-field-desc>
-  </x-field>
-  <x-field data-name="checkTimeout" data-type="number" data-default="300000">
-    <x-field-desc markdown>The total time in milliseconds before the connection attempt times out.</x-field-desc>
-  </x-field>
-  <x-field data-name="extraParams" data-type="object" data-default="{}">
-    <x-field-desc markdown>Any extra parameters to be included in the session creation request, which can be retrieved on the server-side.</x-field-desc>
-  </x-field>
-</x-field-group>
-
-### `connectApi.close()`
-
-Manually closes the `DidConnect` modal. The modal closes automatically on success or user cancellation, but you can call this function if you need to close it programmatically for other reasons.
-
-```javascript icon=lucide:x-circle
-// Example: Close the modal after a short delay in the success callback
-connectApi.open({
-  action: 'login',
-  onSuccess: () => {
-    showTemporarySuccessMessage();
-    setTimeout(() => {
-      connectApi.close();
-    }, 1500);
-  },
-  closeTimeout: 999999 // Prevent auto-close
-});
-```
-
-### `connectApi.openPopup(params, options)`
-
-This function provides an alternative connection method that opens the DID Connect flow in a new browser popup window instead of a modal within the current page. This is useful for certain OAuth-like flows or when integrating with sites where you cannot inject a modal.
-
-**Parameters**
-
-<x-field-group>
-  <x-field data-name="params" data-type="ConnectProps" data-required="true">
-    <x-field-desc markdown>Similar to the `open` method's options. A key difference is that `params.extraParams.provider` is **required** to identify the authentication method (e.g., 'github', 'google').</x-field-desc>
-  </x-field>
-  <x-field data-name="options" data-type="object" data-required="false">
-    <x-field-desc markdown>Configuration for the popup window itself.</x-field-desc>
-    <x-field data-name="baseUrl" data-type="string" data-desc="The base URL for constructing the popup URL."></x-field>
-    <x-field data-name="locale" data-type="string" data-default="en" data-desc="The locale for the popup content."></x-field>
-    <x-field data-name="popupOptions" data-type="object" data-desc="Options passed directly to `window.open()` for customizing the popup's size and features."></x-field>
-  </x-field>
-</x-field-group>
-
-**Usage**
-
-The `openPopup` function returns a `Promise` that resolves with the authentication data on success or rejects on failure or cancellation.
-
-```javascript icon=lucide:external-link
-const handleGithubLogin = async () => {
-  try {
-    const result = await connectApi.openPopup({
-      action: 'login',
-      onSuccess: () => console.log('This callback is also triggered'),
-      extraParams: { provider: 'github' } // This is required
-    });
-    console.log('Login successful via popup:', result);
-  } catch (err) {
-    if (err.message === 'Popup closed') {
-      console.log('User closed the popup window.');
-    } else {
-      console.error('An error occurred:', err);
-    }
-  }
-};
-```
-
-### `connectApi.loginOAuth(options)`
-
-This is a helper function to directly initiate an OAuth login flow. It's a lower-level utility that is internally used by other parts of the library.
-
-**Parameters (`options`)**
-
-<x-field-group>
-  <x-field data-name="provider" data-type="string" data-required="true" data-desc="The OAuth provider to use, e.g., 'github', 'google'."></x-field>
-  <x-field data-name="action" data-type="string" data-required="true" data-desc="The action, typically 'login'."></x-field>
-  <x-field data-name="extraParams" data-type="object" data-required="false" data-desc="Additional parameters for the OAuth flow."></x-field>
-  <x-field data-name="onLogin" data-type="function" data-required="true" data-desc="Callback function executed upon successful login."></x-field>
-</x-field-group>