@arcblock/did-connect-react 3.1.41 → 3.1.42

package/docs/ui-components-address.zh.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) 组件文档以获取更多详细信息。

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

@@ -0,0 +1,65 @@
+# Avatar
+
+`Avatar`コンポーネントは、ユーザーのプロフィール画像を表示するためのシンプルで便利な方法です。ユーザーの分散型識別子（DID）に基づいてユニークなアバターを自動生成したり、指定されたURLから画像を表示したりできます。
+
+このコンポーネントは`@arcblock/ux`ライブラリから直接再エクスポートされており、ArcBlockエコシステム全体で一貫したルックアンドフィールを保証します。
+
+## インポート
+
+`Avatar`コンポーネントは、次のようにライブラリからインポートできます。
+
+```javascript icon=logos:javascript
+import Avatar from '@arcblock/did-connect-react/lib/Avatar';
+```
+
+## 使用方法
+
+最も一般的な使用例は、現在ログインしているユーザーのアバターを表示することです。`useSession`フックからユーザー情報を取得し、そのDIDを`Avatar`コンポーネントに渡すことができます。
+
+```jsx User Profile Example icon=logos:react
+import React from 'react';
+import Avatar from '@arcblock/did-connect-react/lib/Avatar';
+import { useSession } from '@arcblock/did-connect-react';
+
+export default function UserProfile() {
+  const { session } = useSession();
+
+  if (!session.user) {
+    return <div>Loading user...</div>;
+  }
+
+  return (
+    <div style={{ display: 'flex', alignItems: 'center', gap: '16px' }}>
+      <Avatar size={64} did={session.user.did} />
+      <h3>{session.user.fullName || 'Anonymous User'}</h3>
+    </div>
+  );
+}
+```
+
+## プロパティ
+
+`Avatar`コンポーネントは、すべてのプロパティを`@arcblock/ux`の基盤となるコンポーネントに転送します。以下は、最も一般的に使用されるプロパティの一部です。
+
+<x-field-group>
+  <x-field data-name="did" data-type="string" data-required="false">
+    <x-field-desc markdown>ユーザーのDID。提供された場合、ユニークなブロックベースのアバターが生成されます。これはDIDユーザーのアバターを表示するための推奨される方法です。</x-field-desc>
+  </x-field>
+  <x-field data-name="src" data-type="string" data-required="false">
+    <x-field-desc markdown>表示する特定の画像のURL。`src`と`did`の両方が提供された場合、`src`が優先されます。</x-field-desc>
+  </x-field>
+  <x-field data-name="size" data-type="number" data-default="40" data-required="false">
+    <x-field-desc markdown>アバターのサイズ（幅と高さ）をピクセル単位で指定します。</x-field-desc>
+  </x-field>
+  <x-field data-name="shape" data-type="'circle' | 'square'" data-default="'circle'" data-required="false">
+    <x-field-desc markdown>アバターの形状を定義します。`circle`または`square`のいずれかを指定できます。</x-field-desc>
+  </x-field>
+  <x-field data-name="variant" data-type="string" data-default="'beam'" data-required="false">
+    <x-field-desc markdown>DIDからアバターを生成するために使用されるアルゴリズム。一般的な値には`beam`、`pixel`、`ring`などがあります。</x-field-desc>
+  </x-field>
+  <x-field data-name="...rest" data-type="any" data-required="false">
+    <x-field-desc markdown>`className`や`style`のような他の標準HTML属性は、コンポーネントのルート`div`要素に渡すことができます。</x-field-desc>
+  </x-field>
+</x-field-group>
+
+ユーザーのアバターを表示した後、彼らのDIDアドレスも表示したいかもしれません。次のセクションに進み、[Address](./ui-components-address.md)コンポーネントについて学びましょう。

package/docs/ui-components-avatar.md

@@ -0,0 +1,65 @@
+# Avatar
+
+The `Avatar` component is a simple and convenient way to display a user's profile picture. It can automatically generate a unique avatar based on the user's Decentralized Identifier (DID) or display an image from a specified URL.
+
+This component is a direct re-export from the `@arcblock/ux` library, ensuring a consistent look and feel across ArcBlock's ecosystem.
+
+## Import
+
+You can import the `Avatar` component from the library as follows:
+
+```javascript icon=logos:javascript
+import Avatar from '@arcblock/did-connect-react/lib/Avatar';
+```
+
+## Usage
+
+The most common use case is to display the avatar of the currently logged-in user. You can get the user's information from the `useSession` hook and pass their DID to the `Avatar` component.
+
+```jsx User Profile Example icon=logos:react
+import React from 'react';
+import Avatar from '@arcblock/did-connect-react/lib/Avatar';
+import { useSession } from '@arcblock/did-connect-react';
+
+export default function UserProfile() {
+  const { session } = useSession();
+
+  if (!session.user) {
+    return <div>Loading user...</div>;
+  }
+
+  return (
+    <div style={{ display: 'flex', alignItems: 'center', gap: '16px' }}>
+      <Avatar size={64} did={session.user.did} />
+      <h3>{session.user.fullName || 'Anonymous User'}</h3>
+    </div>
+  );
+}
+```
+
+## Props
+
+The `Avatar` component forwards all its props to the underlying component from `@arcblock/ux`. Below are some of the most commonly used props:
+
+<x-field-group>
+  <x-field data-name="did" data-type="string" data-required="false">
+    <x-field-desc markdown>The user's DID. If provided, a unique, block-based avatar will be generated. This is the preferred method for displaying avatars for DID users.</x-field-desc>
+  </x-field>
+  <x-field data-name="src" data-type="string" data-required="false">
+    <x-field-desc markdown>The URL of a specific image to display. If both `src` and `did` are provided, `src` will take precedence.</x-field-desc>
+  </x-field>
+  <x-field data-name="size" data-type="number" data-default="40" data-required="false">
+    <x-field-desc markdown>The size (width and height) of the avatar in pixels.</x-field-desc>
+  </x-field>
+  <x-field data-name="shape" data-type="'circle' | 'square'" data-default="'circle'" data-required="false">
+    <x-field-desc markdown>Defines the shape of the avatar. Can be either `circle` or `square`.</x-field-desc>
+  </x-field>
+  <x-field data-name="variant" data-type="string" data-default="'beam'" data-required="false">
+    <x-field-desc markdown>The algorithm used to generate the avatar from the DID. Common values include `beam`, `pixel`, `ring`, etc.</x-field-desc>
+  </x-field>
+  <x-field data-name="...rest" data-type="any" data-required="false">
+    <x-field-desc markdown>Any other standard HTML attributes like `className` or `style` can be passed to the root `div` element of the component.</x-field-desc>
+  </x-field>
+</x-field-group>
+
+After displaying the user's avatar, you might also want to show their DID address. Proceed to the next section to learn about the [Address](./ui-components-address.md) component.

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

@@ -0,0 +1,65 @@
+# Avatar
+
+`Avatar` 元件是顯示使用者個人資料圖片的簡單方便方法。它可以根據使用者的去中心化識別碼 (DID) 自動產生獨特的頭像，或顯示來自指定 URL 的圖片。
+
+此元件直接從 `@arcblock/ux` 函式庫重新匯出，確保在 ArcBlock 生態系統中擁有一致的外觀和感覺。
+
+## 匯入
+
+您可以透過以下方式從函式庫匯入 `Avatar` 元件：
+
+```javascript icon=logos:javascript
+import Avatar from '@arcblock/did-connect-react/lib/Avatar';
+```
+
+## 用法
+
+最常見的使用案例是顯示目前登入使用者的頭像。您可以從 `useSession` 掛鉤中獲取使用者資訊，並將其 DID 傳遞給 `Avatar` 元件。
+
+```jsx User Profile Example icon=logos:react
+import React from 'react';
+import Avatar from '@arcblock/did-connect-react/lib/Avatar';
+import { useSession } from '@arcblock/did-connect-react';
+
+export default function UserProfile() {
+  const { session } = useSession();
+
+  if (!session.user) {
+    return <div>Loading user...</div>;
+  }
+
+  return (
+    <div style={{ display: 'flex', alignItems: 'center', gap: '16px' }}>
+      <Avatar size={64} did={session.user.did} />
+      <h3>{session.user.fullName || 'Anonymous User'}</h3>
+    </div>
+  );
+}
+```
+
+## 屬性
+
+`Avatar` 元件會將其所有屬性轉發給來自 `@arcblock/ux` 的底層元件。以下是一些最常用的屬性：
+
+<x-field-group>
+  <x-field data-name="did" data-type="string" data-required="false">
+    <x-field-desc markdown>使用者的 DID。如果提供，將會產生一個獨特的、基於區塊的頭像。這是顯示 DID 使用者頭像的首選方法。</x-field-desc>
+  </x-field>
+  <x-field data-name="src" data-type="string" data-required="false">
+    <x-field-desc markdown>要顯示的特定圖片的 URL。如果同時提供了 `src` 和 `did`，則 `src` 會優先。</x-field-desc>
+  </x-field>
+  <x-field data-name="size" data-type="number" data-default="40" data-required="false">
+    <x-field-desc markdown>頭像的尺寸（寬度和高度），單位為像素。</x-field-desc>
+  </x-field>
+  <x-field data-name="shape" data-type="'circle' | 'square'" data-default="'circle'" data-required="false">
+    <x-field-desc markdown>定義頭像的形狀。可以是 `circle` 或 `square`。</x-field-desc>
+  </x-field>
+  <x-field data-name="variant" data-type="string" data-default="'beam'" data-required="false">
+    <x-field-desc markdown>用於從 DID 產生頭像的演算法。常見值包括 `beam`、`pixel`、`ring` 等。</x-field-desc>
+  </x-field>
+  <x-field data-name="...rest" data-type="any" data-required="false">
+    <x-field-desc markdown>任何其他標準 HTML 屬性，如 `className` 或 `style`，都可以傳遞給元件的根 `div` 元素。</x-field-desc>
+  </x-field>
+</x-field-group>
+
+顯示使用者頭像後，您可能還想顯示他們的 DID 地址。請前往下一節了解 [Address](./ui-components-address.md) 元件。

package/docs/ui-components-avatar.zh.md

@@ -0,0 +1,65 @@
+# 头像
+
+`Avatar` 组件是显示用户头像的一种简单便捷的方式。它可以根据用户的去中心化身份标识（DID）自动生成一个独特的头像，或者显示来自指定 URL 的图像。
+
+该组件直接从 `@arcblock/ux` 库中重新导出，确保了 ArcBlock 生态系统中一致的外观和体验。
+
+## 导入
+
+你可以按如下方式从库中导入 `Avatar` 组件：
+
+```javascript icon=logos:javascript
+import Avatar from '@arcblock/did-connect-react/lib/Avatar';
+```
+
+## 用法
+
+最常见的用例是显示当前登录用户的头像。你可以从 `useSession` 钩子中获取用户信息，并将其 DID 传递给 `Avatar` 组件。
+
+```jsx 用户个人资料示例 icon=logos:react
+import React from 'react';
+import Avatar from '@arcblock/did-connect-react/lib/Avatar';
+import { useSession } from '@arcblock/did-connect-react';
+
+export default function UserProfile() {
+  const { session } = useSession();
+
+  if (!session.user) {
+    return <div>加载用户中...</div>;
+  }
+
+  return (
+    <div style={{ display: 'flex', alignItems: 'center', gap: '16px' }}>
+      <Avatar size={64} did={session.user.did} />
+      <h3>{session.user.fullName || '匿名用户'}</h3>
+    </div>
+  );
+}
+```
+
+## 属性
+
+`Avatar` 组件将其所有属性转发给来自 `@arcblock/ux` 的底层组件。以下是一些最常用的属性：
+
+<x-field-group>
+  <x-field data-name="did" data-type="string" data-required="false">
+    <x-field-desc markdown>用户的 DID。如果提供，将生成一个独特的、基于区块的头像。这是为 DID 用户显示头像的首选方法。</x-field-desc>
+  </x-field>
+  <x-field data-name="src" data-type="string" data-required="false">
+    <x-field-desc markdown>要显示的特定图像的 URL。如果同时提供了 `src` 和 `did`，`src` 将优先。</x-field-desc>
+  </x-field>
+  <x-field data-name="size" data-type="number" data-default="40" data-required="false">
+    <x-field-desc markdown>头像的尺寸（宽度和高度），单位为像素。</x-field-desc>
+  </x-field>
+  <x-field data-name="shape" data-type="'circle' | 'square'" data-default="'circle'" data-required="false">
+    <x-field-desc markdown>定义头像的形状。可以是 `circle` 或 `square`。</x-field-desc>
+  </x-field>
+  <x-field data-name="variant" data-type="string" data-default="'beam'" data-required="false">
+    <x-field-desc markdown>用于从 DID 生成头像的算法。常见值包括 `beam`、`pixel`、`ring` 等。</x-field-desc>
+  </x-field>
+  <x-field data-name="...rest" data-type="any" data-required="false">
+    <x-field-desc markdown>任何其他标准的 HTML 属性，如 `className` 或 `style`，都可以传递给组件的根 `div` 元素。</x-field-desc>
+  </x-field>
+</x-field-group>
+
+显示用户头像后，你可能还想显示他们的 DID 地址。请继续下一节，了解 [Address](./ui-components-address.md) 组件。

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

@@ -0,0 +1,99 @@
+# Button
+
+`ConnectButton`コンポーネントは、DID Connect認証プロセスを開始するための、事前にスタイル設定された認識しやすいボタンを提供します。これにより、アプリケーションのログインフローに一貫したユーザーエクスペリエンスを簡単に作成できます。このボタンは、ロゴやカラースキームを含む公式のDID Connectブランドでスタイル設定されており、ユーザーに明確な行動喚起を提供します。
+
+## インポート
+
+このボタンを使用するには、ライブラリの`Button`モジュールからインポートします。
+
+```javascript icon=logos:javascript
+import ConnectButton from '@arcblock/did-connect-react/lib/Button';
+```
+
+## 基本的な使い方
+
+最も一般的な使用例は、`ConnectButton`を`useConnect`フックと組み合わせることです。ボタンの`onClick`プロップは、フックから返される`open`関数に直接マッピングして、接続モーダルをトリガーできます。
+
+```javascript Basic Usage icon=logos:react
+import { useConnect } from '@arcblock/did-connect-react/lib/Connect/use-connect';
+import ConnectButton from '@arcblock/did-connect-react/lib/Button';
+
+export default function MyLoginComponent() {
+  const { open } = useConnect();
+
+  return (
+    <ConnectButton onClick={open} />
+  );
+}
+```
+
+デフォルトでは、ボタンには「Continue With」というテキストとDID Connectのロゴが表示されます。
+
+## カスタマイズ
+
+ボタンの外観や動作を簡単にカスタマイズできます。
+
+### カスタムテキスト
+
+デフォルトのテキストを変更するには、希望のコンテンツをコンポーネントの子要素として渡すだけです。
+
+```javascript Customizing Button Text icon=logos:react
+import { useConnect } from '@arcblock/did-connect-react/lib/Connect/use-connect';
+import ConnectButton from '@arcblock/did-connect-react/lib/Button';
+
+export default function CustomLoginComponent() {
+  const { open } = useConnect();
+
+  return (
+    <ConnectButton onClick={open}>
+      Login with DID Wallet
+    </ConnectButton>
+  );
+}
+```
+
+### 追加のプロップ
+
+`ConnectButton`は`@arcblock/ux/lib/Button`コンポーネント（Material-UIのButtonに基づく）のラッパーであり、そのすべての標準プロップを受け入れます。これにより、ボタンを無効にしたり、全幅にしたり、`sx`プロップでカスタムスタイルを適用したりするなど、広範なカスタマイズが可能です。
+
+```javascript Passing Additional Props icon=logos:react
+import { useConnect } from '@arcblock/did-connect-react/lib/Connect/use-connect';
+import ConnectButton from '@arcblock/did-connect-react/lib/Button';
+
+export default function DisabledButtonComponent() {
+  const { open } = useConnect();
+
+  // 例：プロセス実行中にボタンを無効にする
+  const isLoading = true; 
+
+  return (
+    <ConnectButton
+      onClick={open}
+      disabled={isLoading}
+      fullWidth
+      sx={{ mt: 2, mb: 2 }}
+    >
+      {isLoading ? 'Connecting...' : 'Login with DID Wallet'}
+    </ConnectButton>
+  );
+}
+```
+
+## Props
+
+<x-field-group>
+  <x-field data-name="children" data-type="React.ReactNode" data-required="false">
+    <x-field-desc markdown>ボタン内に表示するコンテンツ。指定しない場合、デフォルトは`"Continue With"`です。</x-field-desc>
+  </x-field>
+  <x-field data-name="...rest" data-type="ButtonProps" data-required="false">
+    <x-field-desc markdown>`ConnectButton`は、基盤となるMaterial-UI `Button`コンポーネントに有効な他のすべてのプロップを受け入れます。これには、`onClick`、`disabled`、`variant`、`color`、`fullWidth`、`sx`などの一般的なプロップが含まれます。</x-field-desc>
+  </x-field>
+</x-field-group>
+
+## 次のステップ
+
+`ConnectButton`の追加方法を理解したところで、次の論理的なステップは、その機能を支えるフックを理解することです。
+
+<x-card data-title="useConnect フック" data-href="/hooks/use-connect" data-icon="lucide:hook">
+  useConnectフックを使用して、プログラムでDidConnect UIモーダルを開いたり、閉じたり、管理したりする方法を学びます。
+</x-card>

package/docs/ui-components-button.md

@@ -0,0 +1,99 @@
+# Button
+
+The `ConnectButton` component offers a pre-styled and recognizable button for initiating the DID Connect authentication process. It simplifies creating a consistent user experience for your application's login flow. The button is styled with the official DID Connect branding, including the logo and color scheme, providing a clear call-to-action for users.
+
+## Import
+
+To use the button, import it from the library's `Button` module.
+
+```javascript icon=logos:javascript
+import ConnectButton from '@arcblock/did-connect-react/lib/Button';
+```
+
+## Basic Usage
+
+The most common use case is to pair the `ConnectButton` with the `useConnect` hook. The `onClick` prop of the button can be directly mapped to the `open` function returned by the hook to trigger the connection modal.
+
+```javascript Basic Usage icon=logos:react
+import { useConnect } from '@arcblock/did-connect-react/lib/Connect/use-connect';
+import ConnectButton from '@arcblock/did-connect-react/lib/Button';
+
+export default function MyLoginComponent() {
+  const { open } = useConnect();
+
+  return (
+    <ConnectButton onClick={open} />
+  );
+}
+```
+
+By default, the button renders with the text "Continue With" followed by the DID Connect logo.
+
+## Customization
+
+You can easily customize the button's appearance and behavior.
+
+### Custom Text
+
+To change the default text, simply pass your desired content as children to the component.
+
+```javascript Customizing Button Text icon=logos:react
+import { useConnect } from '@arcblock/did-connect-react/lib/Connect/use-connect';
+import ConnectButton from '@arcblock/did-connect-react/lib/Button';
+
+export default function CustomLoginComponent() {
+  const { open } = useConnect();
+
+  return (
+    <ConnectButton onClick={open}>
+      Login with DID Wallet
+    </ConnectButton>
+  );
+}
+```
+
+### Additional Props
+
+The `ConnectButton` is a wrapper around the `@arcblock/ux/lib/Button` component (which is based on Material-UI's Button) and accepts all of its standard props. This allows for extensive customization, such as disabling the button, making it full-width, or applying custom styles with the `sx` prop.
+
+```javascript Passing Additional Props icon=logos:react
+import { useConnect } from '@arcblock/did-connect-react/lib/Connect/use-connect';
+import ConnectButton from '@arcblock/did-connect-react/lib/Button';
+
+export default function DisabledButtonComponent() {
+  const { open } = useConnect();
+
+  // Example: disable the button while a process is running
+  const isLoading = true; 
+
+  return (
+    <ConnectButton
+      onClick={open}
+      disabled={isLoading}
+      fullWidth
+      sx={{ mt: 2, mb: 2 }}
+    >
+      {isLoading ? 'Connecting...' : 'Login with DID Wallet'}
+    </ConnectButton>
+  );
+}
+```
+
+## Props
+
+<x-field-group>
+  <x-field data-name="children" data-type="React.ReactNode" data-required="false">
+    <x-field-desc markdown>The content to display inside the button. If not provided, it defaults to `"Continue With"`.</x-field-desc>
+  </x-field>
+  <x-field data-name="...rest" data-type="ButtonProps" data-required="false">
+    <x-field-desc markdown>The `ConnectButton` accepts any other props that are valid for the underlying Material-UI `Button` component. This includes common props like `onClick`, `disabled`, `variant`, `color`, `fullWidth`, and `sx`.</x-field-desc>
+  </x-field>
+</x-field-group>
+
+## Next Steps
+
+Now that you know how to add a `ConnectButton`, the next logical step is to understand the hook that powers its functionality.
+
+<x-card data-title="useConnect Hook" data-href="/hooks/use-connect" data-icon="lucide:hook">
+  Learn how to programmatically open, close, and manage the DidConnect UI modal using the useConnect hook.
+</x-card>