@arcblock/did-connect-react 3.1.41 → 3.1.42

package/docs/getting-started.ja.md

@@ -0,0 +1,138 @@
+# はじめに
+
+このガイドでは、`@arcblock/did-connect-react` を使用して、Reactアプリケーションに分散型ID（DID）認証を統合するための基本的な手順を説明します。わずか数分で、完全に機能するログインおよびログアウトフローを実装できます。
+
+### 前提条件
+
+開始する前に、開発環境が次の基準を満たしていることを確認してください：
+
+- Reactプロジェクトがセットアップされていること。
+- 認証リクエストを処理するBlocklet Serverインスタンスが実行されていること。このライブラリは、Blocklet Serverをバックエンドとしてシームレスに動作するように設計されています。
+
+## ステップ1：ライブラリをインストールする
+
+まず、`@arcblock/did-connect-react` パッケージをプロジェクトに追加します。npmまたはyarnのいずれかを使用できます。
+
+```bash npmでインストール icon=logos:npm
+npm install @arcblock/did-connect-react
+```
+
+```bash 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プロパティは、バックエンド認証サービスのベースパスを指します。
+    // 標準的な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>ようこそ！</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 WalletでスキャンするためのQRコードを表示するDID Connectモーダルを開き、認証プロセス全体を管理します。
+
+## ステップ4：ユーザーデータにアクセスする
+
+ユーザーが正常にログインすると、`session.user`オブジェクトが入力されます。このオブジェクトには、ユーザーのDID Walletから取得したプロファイル情報が含まれています。
+
+コンテキストによって提供される`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 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.md

@@ -0,0 +1,138 @@
+# Getting Started
+
+This guide will walk you through the essential steps to integrate decentralized identity (DID) authentication into your React application using `@arcblock/did-connect-react`. In just a few minutes, you'll have a fully functional login and logout flow.
+
+### Prerequisites
+
+Before you begin, ensure your development environment meets the following criteria:
+
+- You have a React project set up.
+- You have a running Blocklet Server instance that will handle the authentication requests. The library is designed to work seamlessly with a backend powered by Blocklet Server.
+
+## Step 1: Install the Library
+
+First, add the `@arcblock/did-connect-react` package to your project. You can use either npm or 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
+```
+
+## Step 2: Set Up the SessionProvider
+
+The `SessionProvider` is the heart of the library. It's a context provider that manages the user's session state (like login status and user information) and makes it available to all components wrapped within it. You should place it at the root of your application, for instance, in your `App.js` file.
+
+For applications built on Blocklet, the recommended way to initialize the provider is by using the `createAuthServiceSessionContext` factory function.
+
+```javascript App.js icon=logos:react
+import React from 'react';
+import { createAuthServiceSessionContext } from '@arcblock/did-connect-react/lib/Session';
+import Home from './Home'; // We will create this component in the next step
+
+// createAuthServiceSessionContext is optimized for Blocklet environments
+const { SessionProvider } = createAuthServiceSessionContext();
+
+function App() {
+  return (
+    // The serviceHost prop points to the base path of your backend authentication service.
+    // For a standard Blocklet, this is usually the blocklet's prefix or '/'.
+    <SessionProvider serviceHost="/">
+      <Home />
+    </SessionProvider>
+  );
+}
+
+export default App;
+```
+
+## Step 3: Implement Login and Logout
+
+Now, let's create a component that allows users to log in and log out. We can access the session data and functions using React's `useContext` hook with the `SessionContext`.
+
+The `session` object gives you everything you need: the current `user`, the `loading` state, and functions like `login()` and `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'; // A general-purpose button
+import CircularProgress from '@mui/material/CircularProgress';
+
+function Home() {
+  // Access the session context
+  const { session } = useContext(SessionContext);
+
+  // Destructure for easier access
+  const { user, loading, login, logout } = session;
+
+  // Display a loading indicator while the session is being initialized
+  if (loading) {
+    return <CircularProgress />;
+  }
+
+  return (
+    <div style={{ padding: '20px', textAlign: 'center' }}>
+      {user ? (
+        // If the user is logged in, show their DID and a logout button
+        <div>
+          <h1>Welcome!</h1>
+          <p>Your DID: {user.did}</p>
+          <Button variant="contained" color="secondary" onClick={logout}>
+            Logout
+          </Button>
+        </div>
+      ) : (
+        // If not logged in, show the login button
+        <div>
+          <h1>Please Sign In</h1>
+          <ConnectButton onClick={() => login()}>
+            Connect Wallet
+          </ConnectButton>
+        </div>
+      )}
+    </div>
+  );
+}
+
+export default Home;
+```
+
+When the user clicks the `ConnectButton`, the `login()` function is called. This function handles opening the DID Connect modal, which displays a QR code for the user to scan with their DID Wallet, and manages the entire authentication process.
+
+## Step 4: Access User Data
+
+Once a user has successfully logged in, the `session.user` object will be populated. This object contains the user's profile information retrieved from their DID Wallet.
+
+The `session` object provided by the context is your main interface to the user's authentication state. Here are its key properties:
+
+<x-field-group>
+  <x-field data-name="user" data-type="object | null" data-desc="The authenticated user object. It's `null` if no user is logged in.">
+    <x-field data-name="did" data-type="string" data-desc="The user's Decentralized Identifier (DID)."></x-field>
+    <x-field data-name="fullName" data-type="string" data-desc="The user's full name from their wallet profile."></x-field>
+    <x-field data-name="email" data-type="string" data-desc="The user's email from their wallet profile."></x-field>
+  </x-field>
+  <x-field data-name="loading" data-type="boolean" data-desc="`true` while the session is being initialized or refreshed, `false` otherwise."></x-field>
+  <x-field data-name="login" data-type="function" data-desc="A function to initiate the login process, which opens the DID Connect UI."></x-field>
+  <x-field data-name="logout" data-type="function" data-desc="A function to log the user out and clear the session."></x-field>
+  <x-field data-name="initialized" data-type="boolean" data-desc="`true` once the initial session check is complete."></x-field>
+</x-field-group>
+
+## You're All Set!
+
+Congratulations! You have successfully implemented a complete DID-based authentication flow in your React application. Users can now sign in using their DID Wallet, and your application can securely access their session information.
+
+### Next Steps
+
+To dive deeper and explore more advanced features, check out the following sections:
+
+<x-cards>
+  <x-card data-title="Session Management (SessionProvider)" data-icon="lucide:key-round" data-href="/core-components/session-provider">
+    Learn about all the configuration options for `SessionProvider` to customize session behavior, timeouts, and more.
+  </x-card>
+  <x-card data-title="Connection UI (DidConnect)" data-icon="lucide:qr-code" data-href="/core-components/did-connect">
+    Explore the `DidConnect` component for a declarative way to embed the connection UI directly into your pages.
+  </x-card>
+</x-cards>

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

@@ -0,0 +1,138 @@
+# 入門指南
+
+本指南將引導您完成使用 `@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

@@ -0,0 +1,138 @@
+# 快速入门
+
+本指南将引导你完成使用 `@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>