@arcblock/did-connect-react 3.1.44 → 3.1.45

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (6) hide show
  1. package/.aigne/doc-smith/upload-cache.yaml +27 -0
  2. package/docs/core-components-did-connect.ja.md +53 -54
  3. package/docs/core-components-did-connect.zh-TW.md +31 -32
  4. package/docs/core-components-did-connect.zh.md +46 -46
  5. package/lib/package.json.js +1 -1
  6. package/package.json +5 -5
package/.aigne/doc-smith/upload-cache.yaml CHANGED
@@ -166,3 +166,30 @@ ccb7eb47c3a485ce55add4c155e6d0228a94d4af795e3642f4cb7d187e9444e8:
166
166
  https://docsmith.aigne.io:
167
167
  url: https://docsmith.aigne.io/image-bin/uploads/005ab657c8c753e3.svg
168
168
  upload_time: 2025-09-24T04:16:55.549Z
169
+ 5478fa8491b7f97eb8d0d7b7b4634ce2cde168095efce9885b14041180540284:
170
+ local_path: .aigne/doc-smith/.tmp/assets/d2/187a7da6198218c13bdec366ca2c8c30f1a499017c294dbe844e0fff49285637.svg
171
+ sites:
172
+ https://www.arcblock.io:
173
+ url: https://www.arcblock.io/image-bin/uploads/5478fa8491b7f97e.svg
174
+ upload_time: 2025-10-01T08:13:10.399Z
175
+ https://docsmith.aigne.io:
176
+ url: https://docsmith.aigne.io/image-bin/uploads/5478fa8491b7f97e.svg
177
+ upload_time: 2025-10-01T08:13:35.738Z
178
+ 5857d2f95b18ac49a298f35e89d2e788810b3b5d3d4719e44b5164e33770be66:
179
+ local_path: .aigne/doc-smith/.tmp/assets/d2/ff54cd4af753701ae8fffa5ddd3369d6b0164d8a6e9002e859d8ce236adcd2fa.svg
180
+ sites:
181
+ https://www.arcblock.io:
182
+ url: https://www.arcblock.io/image-bin/uploads/5857d2f95b18ac49.svg
183
+ upload_time: 2025-10-01T08:13:11.881Z
184
+ https://docsmith.aigne.io:
185
+ url: https://docsmith.aigne.io/image-bin/uploads/5857d2f95b18ac49.svg
186
+ upload_time: 2025-10-01T08:13:36.567Z
187
+ 83aa6edd16327e9a3079425ddcd701b9dd1afb55a9e3589e74b036c0ceb63775:
188
+ local_path: .aigne/doc-smith/.tmp/assets/d2/cdf3792dc20797e89fc07d41c01c5039476cb01fc4b2d6a3b64dce33d484bc43.svg
189
+ sites:
190
+ https://www.arcblock.io:
191
+ url: https://www.arcblock.io/image-bin/uploads/83aa6edd16327e9a.svg
192
+ upload_time: 2025-10-01T08:13:13.301Z
193
+ https://docsmith.aigne.io:
194
+ url: https://docsmith.aigne.io/image-bin/uploads/83aa6edd16327e9a.svg
195
+ upload_time: 2025-10-01T08:13:37.399Z
package/docs/core-components-did-connect.ja.md CHANGED
@@ -1,16 +1,16 @@
1
- # 接続UI (DidConnect)
1
+ # 接続 UI (DidConnect)
2
2
 
3
- `DidConnect`コンポーネントは、さまざまな分散型アイデンティティ（DID）接続フローを処理するための、事前に構築された包括的なUIソリューションです。ログイン、認証、プロファイル要求などのアクションに対応したユーザーフレンドリーなインターフェースを提供し、複数の接続方法を標準でサポートしています。
3
+ `DidConnect` コンポーネントは、さまざまな分散型 ID (DID) 接続フローを処理するための、事前構築済みの包括的な UI ソリューションです。ログイン、認証、プロファイル要求などのアクションのための使いやすいインターフェースを提供し、複数の接続方法を標準でサポートします。
4
4
 
5
- このコンポーネントは`@arcblock/did-connect-react`ライブラリの視覚的な中心的存在として機能し、セッション管理とリアルタイムのステータス更新の複雑さを抽象化します。コンポーネントはDID Walletユーザー向けのQRコードを表示し、ソーシャルログイン（OAuth）やパスワードレス認証（Passkeys）などの代替ログインオプションを提供します。
5
+ これは `@arcblock/did-connect-react` ライブラリの視覚的な中心要素として機能し、セッション管理とリアルタイムのステータス更新の複雑さを抽象化します。このコンポーネントは、DID Wallet ユーザー向けの QR コードを表示し、ソーシャルログイン (OAuth) やパスワードレス認証 (Passkeys) などの代替ログインオプションを提供します。
6
6
 
7
- `DidConnect`を使用する前に、アプリケーションが[`SessionProvider`](./core-components-session-provider.md)でラップされ、全体のセッション状態が管理されていることを確認してください。
7
+ `DidConnect` を使用する前に、アプリケーションが [`SessionProvider`](./core-components-session-provider.md) でラップされ、全体的なセッション状態が管理されていることを確認してください。
8
8
 
9
- ## 基本的な使用方法
9
+ ## 基本的な使用法
10
10
 
11
- `DidConnect`を使用するには、コンポーネントをインポートし、いくつかの必須propsを指定する必要があります。通常、コンポーネントの表示・非表示は状態変数によって制御されます。
11
+ `DidConnect` を使用するには、インポートしていくつかの必須プロパティを提供する必要があります。コンポーネントは通常、その可視性を決定する状態変数によって制御されます。
12
12
 
13
- ```jsx DID Connect Example icon=logos:react
13
+ ```jsx DID Connect の例 icon=logos:react
14
14
  import React, { useState } from 'react';
15
15
  import axios from 'axios';
16
16
  import DidConnect from '@arcblock/did-connect-react/lib/Connect';
@@ -20,7 +20,7 @@ function App() {
20
20
 
21
21
  const handleClose = () => setConnectOpen(false);
22
22
  const handleSuccess = () => {
23
- // Handle successful login, e.g., redirect the user
23
+ // ログイン成功時の処理、例：ユーザーをリダイレクトする
24
24
  window.location.href = '/profile';
25
25
  };
26
26
 
@@ -48,22 +48,21 @@ function App() {
48
48
  export default App;
49
49
  ```
50
50
 
51
- この例では、「Login with DID」ボタンをクリックすると`isConnectOpen`ステートが`true`に設定され、`DidConnect`コンポーネントがモーダルダイアログとしてレンダリングされます。`checkFn` propは非常に重要で、コンポーネントがバックエンドからセッションステータスをポーリングするために使用する関数です。
51
+ この例では、「Login with DID」ボタンをクリックすると `isConnectOpen` の状態が `true` に設定され、`DidConnect` コンポーネントがモーダルダイアログとしてレンダリングされます。`checkFn` プロパティは非常に重要です。これは、コンポーネントがバックエンドからセッションステータスをポーリングするために使用する関数です。
52
52
 
53
53
  ## 仕組み
54
54
 
55
- `DidConnect`コンポーネントは、接続オプションの表示から最終的な成功またはエラー状態の処理まで、ユーザー認証フロー全体を統括します。
55
+ `DidConnect` コンポーネントは、接続オプションの表示から最終的な成功またはエラー状態の処理まで、ユーザー認証フロー全体を調整します。
56
56
 
57
57
  ```d2
58
58
  direction: down
59
59
 
60
- User: {
61
- label: "ユーザー"
62
- shape: c4-person
60
+ User: {
61
+ shape: c4-person
63
62
  }
64
63
 
65
64
  Application: {
66
- label: "Reactアプリケーション"
65
+ label: "React アプリケーション"
67
66
  shape: rectangle
68
67
 
69
68
  Login-Button: {
@@ -71,15 +70,15 @@ Application: {
71
70
  }
72
71
 
73
72
  DidConnect-UI: {
74
- label: "DidConnectコンポーネント"
73
+ label: "DidConnect コンポーネント"
75
74
  shape: rectangle
76
75
 
77
76
  QR-Code: {
78
- label: "QRコード"
77
+ label: "QR コード"
79
78
  }
80
79
 
81
80
  Login-Methods: {
82
- label: "その他のログイン方法\n(OAuth, Passkey)"
81
+ label: "他のログイン方法\n(OAuth、Passkey)"
83
82
  }
84
83
  }
85
84
  }
@@ -95,98 +94,98 @@ DID-Wallet: {
95
94
  }
96
95
 
97
96
  User -> Application.Login-Button: "1. ログインをクリック"
98
- Application.Login-Button -> Application.DidConnect-UI: "2. UIをレンダリング"
99
- Application.DidConnect-UI -> Backend: "3. セッションを作成し、checkFn経由でポーリングを開始"
100
- User -> DID-Wallet: "4a. QRコードをスキャン"
97
+ Application.Login-Button -> Application.DidConnect-UI: "2. UI をレンダリング"
98
+ Application.DidConnect-UI -> Backend: "3. セッションを作成し、checkFn を介してポーリングを開始"
99
+ User -> DID-Wallet: "4a. QR コードをスキャン"
101
100
  DID-Wallet -> Backend: "5. 承認を送信"
102
- User -> Application.DidConnect-UI.Login-Methods: "4b. OAuth/Passkeyをクリック"
101
+ User -> Application.DidConnect-UI.Login-Methods: "4b. OAuth/Passkey をクリック"
103
102
  Application.DidConnect-UI.Login-Methods -> Backend: "5. 認証"
104
103
  Backend -> Application.DidConnect-UI: "6. 成功ステータスを返す"
105
- Application.DidConnect-UI -> User: "7. onSuccessを呼び出し、UIを閉じる"
104
+ Application.DidConnect-UI -> User: "7. onSuccess を呼び出し、UI を閉じる"
106
105
 
107
106
  ```
108
107
 
109
- ## コンポーネントのProps
108
+ ## コンポーネントのプロパティ
110
109
 
111
- `DidConnect`コンポーネントは、propsを通じて高度な設定が可能です。以下に、利用可能なオプションの詳細なリストを示します。
110
+ `DidConnect` コンポーネントは、プロパティを通じて高度に設定可能です。以下に、利用可能なオプションの詳細なリストを示します。
112
111
 
113
112
  ### コア設定
114
113
 
115
- これらのpropsは、コンポーネントの基本機能を設定するために不可欠です。
114
+ これらのプロパティは、コンポーネントの基本機能を設定するために不可欠です。
116
115
 
117
116
  <x-field-group>
118
117
  <x-field data-name="action" data-type="string" data-required="true">
119
- <x-field-desc markdown>接続の目的を定義します（例：`login`、`claim`、`sign`など）。この文字列はバックエンドに渡され、必要なアクションを決定するために使用されます。</x-field-desc>
118
+ <x-field-desc markdown>接続の目的を定義します。`login`、`claim`、`sign` など。この文字列は、必要なアクションを決定するためにバックエンドに渡されます。</x-field-desc>
120
119
  </x-field>
121
120
  <x-field data-name="checkFn" data-type="function" data-required="true">
122
- <x-field-desc markdown>バックエンドにセッションステータスの更新をポーリングするために使用される関数です。`axios.get`のようにAPIリクエストを行う関数である必要があります。</x-field-desc>
121
+ <x-field-desc markdown>バックエンドにセッションステータスの更新をポーリングするために使用される関数です。`axios.get` のような API リクエストを行う関数である必要があります。</x-field-desc>
123
122
  </x-field>
124
123
  <x-field data-name="baseUrl" data-type="string" data-default="''">
125
- <x-field-desc markdown>APIエンドポイントのベースURLです。APIが別のドメインにある場合は、ここで指定します。</x-field-desc>
124
+ <x-field-desc markdown>API エンドポイントのベース URL です。API が別のドメインにある場合は、ここで指定します。</x-field-desc>
126
125
  </x-field>
127
126
  <x-field data-name="prefix" data-type="string" data-default="/api/did">
128
- <x-field-desc markdown>バックエンドのDID Connect APIエンドポイントのURLプレフィックスです。</x-field-desc>
127
+ <x-field-desc markdown>バックエンド上の DID Connect API エンドポイントの URL プレフィックスです。</x-field-desc>
129
128
  </x-field>
130
129
  </x-field-group>
131
130
 
132
131
  ### 動作制御
133
132
 
134
- これらのpropsは、接続プロセスの動作を制御します。
133
+ これらのプロパティは、接続プロセスの動作を制御します。
135
134
 
136
135
  <x-field-group>
137
136
  <x-field data-name="enabledConnectTypes" data-type="string[]" data-default='["web", "mobile", ...]'>
138
- <x-field-desc markdown>表示する接続方法を指定する文字列の配列です。設定可能な値には、`web`、`mobile`、`github`、`google`、`apple`、`passkey`などがあります。</x-field-desc>
137
+ <x-field-desc markdown>表示する接続方法を指定する文字列の配列です。可能な値には `web`、`mobile`、`github`、`google`、`apple`、`passkey` などがあります。</x-field-desc>
139
138
  </x-field>
140
139
  <x-field data-name="passkeyBehavior" data-type="'none' | 'both' | 'only-existing' | 'only-new'" data-default="'none'">
141
- <x-field-desc markdown>Passkey認証の動作を制御します。`none`は無効化、`both`は新しいパスキーの作成と既存のパスキーの使用を許可、`only-existing`は既存のパスキーに制限、`only-new`は新しいパスキーの作成を強制します。</x-field-desc>
140
+ <x-field-desc markdown>Passkey 認証の動作を制御します。`none` は無効にし、`both` は新しいパスキーの作成と既存のパスキーの使用を許可し、`only-existing` は既存のパスキーに制限し、`only-new` は新しいパスキーの作成を強制します。</x-field-desc>
142
141
  </x-field>
143
142
  <x-field data-name="allowWallet" data-type="boolean" data-default="true">
144
- <x-field-desc markdown>`false`の場合、QRコードとモバイルウォレットの接続オプションが非表示になります。</x-field-desc>
143
+ <x-field-desc markdown>`false` の場合、QR コードとモバイルウォレットの接続オプションは非表示になります。</x-field-desc>
145
144
  </x-field>
146
145
  <x-field data-name="autoConnect" data-type="boolean" data-default="true">
147
- <x-field-desc markdown>`true`の場合、コンポーネントは同じデバイスから以前に確立された接続を自動的に使用しようとします。</x-field-desc>
146
+ <x-field-desc markdown>`true` の場合、コンポーネントは同じデバイスから以前に確立された接続を自動的に使用しようとします。</x-field-desc>
148
147
  </x-field>
149
148
  <x-field data-name="forceConnected" data-type="boolean | string" data-default="true">
150
- <x-field-desc markdown>`true`の場合、ユーザーはすでにログインしているDIDと同じDIDで接続する必要があります。DID文字列が指定された場合は、その特定のDIDで接続する必要があります。</x-field-desc>
149
+ <x-field-desc markdown>`true` の場合、ユーザーはすでにログインしているのと同じ DID で接続する必要があります。DID 文字列が提供された場合、ユーザーはその特定の DID で接続する必要があります。</x-field-desc>
151
150
  </x-field>
152
151
  <x-field data-name="saveConnect" data-type="boolean" data-default="true">
153
- <x-field-desc markdown>`true`の場合、成功した接続情報が将来の`autoConnect`のためにローカルに保存されます。</x-field-desc>
152
+ <x-field-desc markdown>`true` の場合、成功した接続情報が将来の `autoConnect` の試行のためにローカルに保存されます。</x-field-desc>
154
153
  </x-field>
155
154
  <x-field data-name="useSocket" data-type="boolean" data-default="true">
156
- <x-field-desc markdown>`true`の場合、リアルタイムのステータス更新にWebSocketの使用を試み、接続が確立できない場合はポーリングにフォールバックします。</x-field-desc>
155
+ <x-field-desc markdown>`true` の場合、リアルタイムのステータス更新に WebSocket を使用しようと試み、接続が確立できない場合はポーリングにフォールバックします。</x-field-desc>
157
156
  </x-field>
158
157
  </x-field-group>
159
158
 
160
- ### UIのカスタマイズ
159
+ ### UI のカスタマイズ
161
160
 
162
- `DidConnect`コンポーネントの外観とテキストをカスタマイズします。
161
+ `DidConnect` コンポーネントの外観とテキストをカスタマイズします。
163
162
 
164
163
  <x-field-group>
165
164
  <x-field data-name="mode" data-type="'dialog' | 'drawer' | 'page'" data-default="'dialog'">
166
- <x-field-desc markdown>コンポーネントの表示方法を決定します。`dialog`は中央に配置されたモーダルとして、`drawer`はボトムシートとして（モバイルの場合）、`page`はドキュメントフローに直接埋め込みます。</x-field-desc>
165
+ <x-field-desc markdown>コンポーネントの表示方法を決定します。`dialog` は中央に配置されたモーダルとして表示し、`drawer` はボトムシートとして（モバイルで）表示し、`page` はドキュメントフローに直接埋め込みます。</x-field-desc>
167
166
  </x-field>
168
167
  <x-field data-name="messages" data-type="object">
169
- <x-field-desc markdown>UIに表示されるテキストをカスタマイズするためのオブジェクトです。</x-field-desc>
170
- <x-field data-name="title" data-type="string" data-desc="上部にあるメインタイトルです。"></x-field>
171
- <x-field data-name="scan" data-type="string" data-desc="タイトルの下にある説明文です。"></x-field>
172
- <x-field data-name="confirm" data-type="string" data-desc="QRコードがスキャンされた後に表示されるテキストです。"></x-field>
173
- <x-field data-name="success" data-type="string | ReactNode" data-desc="接続が成功したときに表示されるメッセージです。"></x-field>
174
- <x-field data-name="error" data-type="string" data-desc="エラー時に表示されるメッセージです。"></x-field>
168
+ <x-field-desc markdown>UI に表示されるテキストをカスタマイズするためのオブジェクトです。</x-field-desc>
169
+ <x-field data-name="title" data-type="string" data-desc="上部にあるメインタイトル。"></x-field>
170
+ <x-field data-name="scan" data-type="string" data-desc="タイトルの下にある説明テキスト。"></x-field>
171
+ <x-field data-name="confirm" data-type="string" data-desc="QR コードがスキャンされた後に表示されるテキスト。"></x-field>
172
+ <x-field data-name="success" data-type="string | ReactNode" data-desc="接続成功時に表示されるメッセージ。"></x-field>
173
+ <x-field data-name="error" data-type="string" data-desc="エラー時に表示されるメッセージ。"></x-field>
175
174
  </x-field>
176
175
  <x-field data-name="hideCloseButton" data-type="boolean" data-default="false">
177
- <x-field-desc markdown>`true`の場合、右上隅の閉じるボタン（X）が非表示になります。</x-field-desc>
176
+ <x-field-desc markdown>`true` の場合、右上隅の閉じるボタン（X）が非表示になります。</x-field-desc>
178
177
  </x-field>
179
178
  <x-field data-name="extraContent" data-type="ReactNode" data-default="null">
180
- <x-field-desc markdown>カスタムのReactコンポーネントや要素をUIに挿入できます。通常はメインタイトル/説明の下に表示されます。</x-field-desc>
179
+ <x-field-desc markdown>カスタムの React コンポーネントや要素を UI に挿入できます。通常はメインタイトル/説明の下に表示されます。</x-field-desc>
181
180
  </x-field>
182
181
  <x-field data-name="customItems" data-type="ReactNode[]" data-default="[]">
183
- <x-field-desc markdown>接続方法のリストに追加するカスタムReactノードの配列です。</x-field-desc>
182
+ <x-field-desc markdown>接続方法のリストに追加されるカスタム React ノードの配列です。</x-field-desc>
184
183
  </x-field>
185
184
  <x-field data-name="disableSwitchApp" data-type="boolean" data-default="false">
186
- <x-field-desc markdown>フェデレーションログインを使用している場合、このpropはログインプロセス中にユーザーがグループ内の異なるアプリケーションを切り替えるのを防ぎます。</x-field-desc>
185
+ <x-field-desc markdown>統一ログインサイト群を使用している場合、このプロパティはログインプロセス中にユーザーがグループ内の異なるアプリケーションを切り替えるのを防ぎます。</x-field-desc>
187
186
  </x-field>
188
187
  <x-field data-name="webWalletUrl" data-type="string">
189
- <x-field-desc markdown>「Webウォレットで接続」オプションで使用するWebベースのDID WalletのURLです。デフォルトは公式のArcBlock Webウォレットです。</x-field-desc>
188
+ <x-field-desc markdown>「Web Wallet で接続」オプションに使用される Web ベースの DID Wallet の URL です。デフォルトでは、公式の ArcBlock Web Wallet になります。</x-field-desc>
190
189
  </x-field>
191
190
  </x-field-group>
192
191
 
@@ -196,7 +195,7 @@ Application.DidConnect-UI -> User: "7. onSuccessを呼び出し、UIを閉じる
196
195
 
197
196
  <x-field-group>
198
197
  <x-field data-name="onClose" data-type="function" data-required="true">
199
- <x-field-desc markdown>ユーザーが`DidConnect`ダイアログを閉じたとき（例：閉じるボタンをクリックしたり、モーダルの外側をクリックしたりした場合）に実行されるコールバック関数です。</x-field-desc>
198
+ <x-field-desc markdown>ユーザーが `DidConnect` ダイアログを閉じたとき（例：閉じるボタンまたはモーダルの外側をクリックしたとき）に実行されるコールバック関数です。</x-field-desc>
200
199
  </x-field>
201
200
  <x-field data-name="onSuccess" data-type="function" data-required="true">
202
201
  <x-field-desc markdown>接続が成功したときに実行されるコールバック関数です。セッションデータが引数として渡されます。</x-field-desc>
@@ -205,10 +204,10 @@ Application.DidConnect-UI -> User: "7. onSuccessを呼び出し、UIを閉じる
205
204
  <x-field-desc markdown>プロセス中にエラーが発生したときに実行されるコールバック関数です。エラーオブジェクトまたはメッセージが引数として渡されます。</x-field-desc>
206
205
  </x-field>
207
206
  <x-field data-name="onRecreateSession" data-type="function">
208
- <x-field-desc markdown>タイムアウト後やユーザーが手動でキャンセルして再試行した場合など、セッションをリセットする必要があるときに呼び出されるコールバック関数です。</x-field-desc>
207
+ <x-field-desc markdown>セッションをリセットする必要があるとき（例：タイムアウト後やユーザーが手動でキャンセルして再試行したとき）に呼び出されるコールバック関数です。</x-field-desc>
209
208
  </x-field>
210
209
  </x-field-group>
211
210
 
212
211
  ## 次のステップ
213
212
 
214
- `DidConnect`コンポーネントを十分に理解することで、堅牢な認証体験を構築できるようになります。接続UIをよりプログラム的に制御したい場合は、[`useConnect`フック](./hooks-use-connect.md)を参照してください。これを使用すると、アプリケーションのどこからでも`DidConnect`モーダルを開閉できます。
213
+ `DidConnect` コンポーネントをしっかりと理解したことで、堅牢な認証体験を構築できるようになります。接続 UI をプログラムでより詳細に制御するには、[`useConnect` フック](./hooks-use-connect.md) を調べてください。これにより、アプリケーションのどこからでも `DidConnect` モーダルを開閉できます。
package/docs/core-components-did-connect.zh-TW.md CHANGED
@@ -1,16 +1,16 @@
1
1
  # 連線 UI (DidConnect)
2
2
 
3
- `DidConnect` 元件是一個預先建置、全面的 UI 解決方案，用於處理各種去中心化身分 (DID) 連線流程。它為登入、驗證和個人資料請求等操作提供了一個使用者友善的介面，並支援多種開箱即用的連線方法。
3
+ `DidConnect` 元件是一個預先建置的、全面的 UI 解決方案，用於處理各種去中心化身分（DID）連線流程。它為登入、驗證和個人資料請求等操作提供了一個使用者友善的介面，並原生支援多種連線方式。
4
4
 
5
- 它是 `@arcblock/did-connect-react` 函式庫的視覺核心，抽象化了會話管理和即時狀態更新的複雜性。該元件為 DID Wallet 使用者顯示 QR 碼，並提供其他登入選項，例如社交登入 (OAuth) 和無密碼驗證 (Passkeys)。
5
+ 它是 `@arcblock/did-connect-react` 函式庫的視覺核心，將 session 管理和即時狀態更新的複雜性抽象化。該元件會為 DID Wallet 使用者顯示一個 QR code，並提供其他登入選項，例如社群登入（OAuth）和無密碼驗證（Passkeys）。
6
6
 
7
- 在使用 `DidConnect` 之前，請確保您已使用 [`SessionProvider`](./core-components-session-provider.md) 包裹您的應用程式，以管理整體會話狀態。
7
+ 在使用 `DidConnect` 之前，請確保您已使用 [`SessionProvider`](./core-components-session-provider.md) 將您的應用程式包裹起來，以管理整體的 session 狀態。
8
8
 
9
9
  ## 基本用法
10
10
 
11
- 要使用 `DidConnect`，您需要匯入它並提供一些必要的 props。該元件通常由一個決定其可見性的狀態變數控制。
11
+ 要使用 `DidConnect`，您需要匯入它並提供一些必要的 props。該元件通常由一個決定其可見性的狀態變數來控制。
12
12
 
13
- ```jsx DID Connect Example icon=logos:react
13
+ ```jsx DID Connect 範例 icon=logos:react
14
14
  import React, { useState } from 'react';
15
15
  import axios from 'axios';
16
16
  import DidConnect from '@arcblock/did-connect-react/lib/Connect';
@@ -35,7 +35,7 @@ function App() {
35
35
  onSuccess={handleSuccess}
36
36
  messages={{
37
37
  title: '掃描以登入',
38
- scan: '使用您的 DID Wallet 掃描 QR 碼',
38
+ scan: '使用您的 DID Wallet 掃描 QR code',
39
39
  confirm: '在您的 DID Wallet 上確認登入',
40
40
  success: '您已成功登入！',
41
41
  }}
@@ -48,7 +48,7 @@ function App() {
48
48
  export default App;
49
49
  ```
50
50
 
51
- 在此範例中，點擊「使用 DID 登入」按鈕會將 `isConnectOpen` 狀態設定為 `true`，這會將 `DidConnect` 元件渲染為一個強制回應對話方塊。`checkFn` prop 至關重要，因為它是該元件用來從您的後端輪詢會話狀態的函式。
51
+ 在此範例中，點擊「使用 DID 登入」按鈕會將 `isConnectOpen` 狀態設定為 `true`，這會將 `DidConnect` 元件渲染為一個強制回應對話框。`checkFn` prop 至關重要，因為它是元件用來從您的後端輪詢 session 狀態的函式。
52
52
 
53
53
  ## 運作方式
54
54
 
@@ -58,7 +58,6 @@ export default App;
58
58
  direction: down
59
59
 
60
60
  User: {
61
- label: "使用者"
62
61
  shape: c4-person
63
62
  }
64
63
 
@@ -75,7 +74,7 @@ Application: {
75
74
  shape: rectangle
76
75
 
77
76
  QR-Code: {
78
- label: "QR 碼"
77
+ label: "QR Code"
79
78
  }
80
79
 
81
80
  Login-Methods: {
@@ -96,19 +95,19 @@ DID-Wallet: {
96
95
 
97
96
  User -> Application.Login-Button: "1. 點擊登入"
98
97
  Application.Login-Button -> Application.DidConnect-UI: "2. 渲染 UI"
99
- Application.DidConnect-UI -> Backend: "3. 建立會話，透過 checkFn 開始輪詢"
100
- User -> DID-Wallet: "4a. 掃描 QR 碼"
98
+ Application.DidConnect-UI -> Backend: "3. 建立 session，透過 checkFn 開始輪詢"
99
+ User -> DID-Wallet: "4a. 掃描 QR Code"
101
100
  DID-Wallet -> Backend: "5. 發送批准"
102
101
  User -> Application.DidConnect-UI.Login-Methods: "4b. 點擊 OAuth/Passkey"
103
102
  Application.DidConnect-UI.Login-Methods -> Backend: "5. 進行驗證"
104
- Backend -> Application.DidConnect-UI: "6. 返回成功狀態"
103
+ Backend -> Application.DidConnect-UI: "6. 回傳成功狀態"
105
104
  Application.DidConnect-UI -> User: "7. 呼叫 onSuccess 並關閉 UI"
106
105
 
107
106
  ```
108
107
 
109
108
  ## 元件 Props
110
109
 
111
- `DidConnect` 元件可透過其 props 進行高度設定。以下是可用選項的詳細列表。
110
+ `DidConnect` 元件可透過其 props 進行高度設定。以下是可用選項的詳細清單。
112
111
 
113
112
  ### 核心設定
114
113
 
@@ -119,7 +118,7 @@ Application.DidConnect-UI -> User: "7. 呼叫 onSuccess 並關閉 UI"
119
118
  <x-field-desc markdown>定義連線的目的，例如 `login`、`claim`、`sign` 等。此字串會傳遞到您的後端以確定所需的操作。</x-field-desc>
120
119
  </x-field>
121
120
  <x-field data-name="checkFn" data-type="function" data-required="true">
122
- <x-field-desc markdown>用於輪詢後端以獲取會話狀態更新的函式。它應該是一個發出 API 請求的函式，例如 `axios.get`。</x-field-desc>
121
+ <x-field-desc markdown>用於輪詢後端以獲取 session 狀態更新的函式。它應該是一個發出 API 請求的函式，例如 `axios.get`。</x-field-desc>
123
122
  </x-field>
124
123
  <x-field data-name="baseUrl" data-type="string" data-default="''">
125
124
  <x-field-desc markdown>API 端點的基礎 URL。如果您的 API 在不同的網域上，請在此處指定。</x-field-desc>
@@ -135,25 +134,25 @@ Application.DidConnect-UI -> User: "7. 呼叫 onSuccess 並關閉 UI"
135
134
 
136
135
  <x-field-group>
137
136
  <x-field data-name="enabledConnectTypes" data-type="string[]" data-default='["web", "mobile", ...]'>
138
- <x-field-desc markdown>一個字串陣列，指定要顯示哪些連線方法。可能的值包括 `web`、`mobile`、`github`、`google`、`apple`、`passkey` 等。</x-field-desc>
137
+ <x-field-desc markdown>一個字串陣列，指定要顯示哪些連線方式。可能的值包括 `web`、`mobile`、`github`、`google`、`apple`、`passkey` 等。</x-field-desc>
139
138
  </x-field>
140
139
  <x-field data-name="passkeyBehavior" data-type="'none' | 'both' | 'only-existing' | 'only-new'" data-default="'none'">
141
- <x-field-desc markdown>控制 Passkey 驗證的行為。`none` 禁用它，`both` 允許建立新的 passkey 並使用現有的，`only-existing` 限制為使用現有的 passkey，而 `only-new` 強制建立新的 passkey。</x-field-desc>
140
+ <x-field-desc markdown>控制 Passkey 驗證的行為。`none` 會停用它，`both` 允許建立新的 passkey 和使用現有的，`only-existing` 限制只能使用現有的 passkey，而 `only-new` 強制建立新的 passkey。</x-field-desc>
142
141
  </x-field>
143
142
  <x-field data-name="allowWallet" data-type="boolean" data-default="true">
144
- <x-field-desc markdown>如果為 `false`，QR 碼和行動錢包連線選項將被隱藏。</x-field-desc>
143
+ <x-field-desc markdown>如果為 `false`，QR code 和行動錢包連線選項將被隱藏。</x-field-desc>
145
144
  </x-field>
146
145
  <x-field data-name="autoConnect" data-type="boolean" data-default="true">
147
- <x-field-desc markdown>如果為 `true`，元件將自動嘗試使用來自同一裝置的先前建立的連線。</x-field-desc>
146
+ <x-field-desc markdown>如果為 `true`，元件將自動嘗試使用來自同一裝置先前建立的連線。</x-field-desc>
148
147
  </x-field>
149
148
  <x-field data-name="forceConnected" data-type="boolean | string" data-default="true">
150
149
  <x-field-desc markdown>如果為 `true`，使用者必須使用他們已經登入的同一個 DID 進行連線。如果提供了一個 DID 字串，使用者必須使用該特定的 DID 進行連線。</x-field-desc>
151
150
  </x-field>
152
151
  <x-field data-name="saveConnect" data-type="boolean" data-default="true">
153
- <x-field-desc markdown>如果為 `true`，成功的連線資訊將被儲存在本地，以供將來的 `autoConnect` 嘗試使用。</x-field-desc>
152
+ <x-field-desc markdown>如果為 `true`，成功的連線資訊會儲存在本機，以供未來的 `autoConnect` 嘗試使用。</x-field-desc>
154
153
  </x-field>
155
154
  <x-field data-name="useSocket" data-type="boolean" data-default="true">
156
- <x-field-desc markdown>如果為 `true`，則嘗試使用 WebSocket 進行即時狀態更新，如果無法建立連線，則退回到輪詢方式。</x-field-desc>
155
+ <x-field-desc markdown>如果為 `true`，則嘗試使用 WebSocket 進行即時狀態更新，如果無法建立連線，則退回使用輪詢。</x-field-desc>
157
156
  </x-field>
158
157
  </x-field-group>
159
158
 
@@ -163,52 +162,52 @@ Application.DidConnect-UI -> User: "7. 呼叫 onSuccess 並關閉 UI"
163
162
 
164
163
  <x-field-group>
165
164
  <x-field data-name="mode" data-type="'dialog' | 'drawer' | 'page'" data-default="'dialog'">
166
- <x-field-desc markdown>決定元件的顯示方式。`dialog` 將其顯示為置中的強制回應視窗，`drawer` 將其顯示為底部彈出視窗（在行動裝置上），而 `page` 將其直接嵌入到文件流中。</x-field-desc>
165
+ <x-field-desc markdown>決定元件的顯示方式。`dialog` 將其顯示為置中對話框，`drawer` 顯示為底部彈出視窗（在行動裝置上），而 `page` 將其直接嵌入文件流中。</x-field-desc>
167
166
  </x-field>
168
167
  <x-field data-name="messages" data-type="object">
169
168
  <x-field-desc markdown>一個用於客製化 UI 中顯示文字的物件。</x-field-desc>
170
169
  <x-field data-name="title" data-type="string" data-desc="頂部的主標題。"></x-field>
171
170
  <x-field data-name="scan" data-type="string" data-desc="標題下方的說明文字。"></x-field>
172
- <x-field data-name="confirm" data-type="string" data-desc="QR 碼掃描後顯示的文字。"></x-field>
173
- <x-field data-name="success" data-type="string | ReactNode" data-desc="成功連線後顯示的訊息。"></x-field>
171
+ <x-field data-name="confirm" data-type="string" data-desc="QR code 掃描後顯示的文字。"></x-field>
172
+ <x-field data-name="success" data-type="string | ReactNode" data-desc="成功連線時顯示的訊息。"></x-field>
174
173
  <x-field data-name="error" data-type="string" data-desc="發生錯誤時顯示的訊息。"></x-field>
175
174
  </x-field>
176
175
  <x-field data-name="hideCloseButton" data-type="boolean" data-default="false">
177
176
  <x-field-desc markdown>如果為 `true`，右上角的關閉按鈕（X）將被隱藏。</x-field-desc>
178
177
  </x-field>
179
178
  <x-field data-name="extraContent" data-type="ReactNode" data-default="null">
180
- <x-field-desc markdown>允許您將自訂的 React 元件或元素注入到 UI 中，通常顯示在主標題/描述下方。</x-field-desc>
179
+ <x-field-desc markdown>允許您將自訂的 React 元件或元素注入 UI 中，通常會出現在主標題/描述下方。</x-field-desc>
181
180
  </x-field>
182
181
  <x-field data-name="customItems" data-type="ReactNode[]" data-default="[]">
183
- <x-field-desc markdown>一個要新增到連線方法列表中的自訂 React 節點陣列。</x-field-desc>
182
+ <x-field-desc markdown>一個自訂 React 節點的陣列，將被新增到連線方式清單中。</x-field-desc>
184
183
  </x-field>
185
184
  <x-field data-name="disableSwitchApp" data-type="boolean" data-default="false">
186
185
  <x-field-desc markdown>如果您正在使用統一登入站點群，此 prop 可防止使用者在登入過程中在群組中的不同應用程式之間切換。</x-field-desc>
187
186
  </x-field>
188
187
  <x-field data-name="webWalletUrl" data-type="string">
189
- <x-field-desc markdown>用於「使用網頁錢包連線」選項的網頁版 DID Wallet 的 URL。預設為官方的 ArcBlock 網頁錢包。</x-field-desc>
188
+ <x-field-desc markdown>用於「使用網頁錢包連線」選項的網頁版 DID Wallet 的 URL。預設為官方 ArcBlock 網頁錢包。</x-field-desc>
190
189
  </x-field>
191
190
  </x-field-group>
192
191
 
193
- ### 回呼函式
192
+ ### 回呼
194
193
 
195
- 在連線生命週期的不同階段被呼叫的函式。
194
+ 在連線生命週期的不同階段呼叫的函式。
196
195
 
197
196
  <x-field-group>
198
197
  <x-field data-name="onClose" data-type="function" data-required="true">
199
- <x-field-desc markdown>當使用者關閉 `DidConnect` 對話方塊時（例如，透過點擊關閉按鈕或在強制回應視窗外點擊）執行的回呼函式。</x-field-desc>
198
+ <x-field-desc markdown>當使用者關閉 `DidConnect` 對話框時（例如，點擊關閉按鈕或在對話框外部點擊）執行的回呼函式。</x-field-desc>
200
199
  </x-field>
201
200
  <x-field data-name="onSuccess" data-type="function" data-required="true">
202
- <x-field-desc markdown>成功連線後執行的回呼函式。會話資料會作為參數傳遞。</x-field-desc>
201
+ <x-field-desc markdown>成功連線後執行的回呼函式。Session 資料會作為參數傳遞。</x-field-desc>
203
202
  </x-field>
204
203
  <x-field data-name="onError" data-type="function">
205
204
  <x-field-desc markdown>在過程中發生錯誤時執行的回呼函式。錯誤物件或訊息會作為參數傳遞。</x-field-desc>
206
205
  </x-field>
207
206
  <x-field data-name="onRecreateSession" data-type="function">
208
- <x-field-desc markdown>當需要重設會話時呼叫的回呼函式，例如，在超時後或當使用者手動取消並重試時。</x-field-desc>
207
+ <x-field-desc markdown>當 session 需要重置時（例如，逾時後或使用者手動取消並重試時）調用的回呼函式。</x-field-desc>
209
208
  </x-field>
210
209
  </x-field-group>
211
210
 
212
211
  ## 後續步驟
213
212
 
214
- 在對 `DidConnect` 元件有了深入的了解後，您現在可以建構穩健的驗證體驗。若要對連線 UI 進行更多的程式化控制，請探索 [`useConnect` hook](./hooks-use-connect.md)，它允許您從應用程式的任何地方開啟和關閉 `DidConnect` 強制回應視窗。
213
+ 在對 `DidConnect` 元件有了扎實的理解後，您現在可以建構穩健的驗證體驗。若想對連線 UI 進行更多程式化控制，請探索 [`useConnect` hook](./hooks-use-connect.md)，它允許您從應用程式的任何地方開啟和關閉 `DidConnect` 對話框。
package/docs/core-components-did-connect.zh.md CHANGED
@@ -1,16 +1,16 @@
1
1
  # 连接 UI (DidConnect)
2
2
 
3
- `DidConnect` 组件是一个预构建的、全面的 UI 解决方案，用于处理各种去中心化身份（DID）连接流程。它为登录、身份验证和个人资料请求等操作提供了用户友好的界面，并开箱即用地支持多种连接方法。
3
+ `DidConnect` 组件是一个预构建的、全面的 UI 解决方案，用于处理各种去中心化身份（DID）连接流程。它为登录、认证和个人资料请求等操作提供了用户友好的界面，并开箱即用地支持多种连接方式。
4
4
 
5
- 它作为 `@arcblock/did-connect-react` 库的视觉核心，抽象了会话管理和实时状态更新的复杂性。该组件显示一个供 DID 钱包用户使用的二维码，并提供其他登录选项，如社交登录（OAuth）和无密码身份验证（Passkeys）。
5
+ 它作为 `@arcblock/did-connect-react` 库的视觉核心，抽象了会话管理和实时状态更新的复杂性。该组件为 DID Wallet 用户显示二维码，并提供其他登录选项，如社交登录（OAuth）和无密码认证（Passkeys）。
6
6
 
7
- 在使用 `DidConnect` 之前，请确保您已使用 [`SessionProvider`](./core-components-session-provider.md) 包装您的应用程序，以管理整体会话状态。
7
+ 在使用 `DidConnect` 之前，请确保已使用 [`SessionProvider`](./core-components-session-provider.md) 包裹您的应用程序，以管理整体会话状态。
8
8
 
9
9
  ## 基本用法
10
10
 
11
11
  要使用 `DidConnect`，您需要导入它并提供一些必要的 props。该组件通常由一个决定其可见性的状态变量控制。
12
12
 
13
- ```jsx DID Connect Example icon=logos:react
13
+ ```jsx DID Connect 示例 icon=logos:react
14
14
  import React, { useState } from 'react';
15
15
  import axios from 'axios';
16
16
  import DidConnect from '@arcblock/did-connect-react/lib/Connect';
@@ -26,7 +26,7 @@ function App() {
26
26
 
27
27
  return (
28
28
  <div>
29
- <button onClick={() => setConnectOpen(true)}>使用 DID 登录</button>
29
+ <button onClick={() => setConnectOpen(true)}>Login with DID</button>
30
30
  {isConnectOpen && (
31
31
  <DidConnect
32
32
  action="login"
@@ -34,10 +34,10 @@ function App() {
34
34
  onClose={handleClose}
35
35
  onSuccess={handleSuccess}
36
36
  messages={{
37
- title: '扫描以登录',
38
- scan: '使用您的 DID 钱包扫描二维码',
39
- confirm: '在您的 DID 钱包上确认登录',
40
- success: '您已成功登录！',
37
+ title: 'Scan to Sign In',
38
+ scan: 'Scan QR code with your DID Wallet',
39
+ confirm: 'Confirm login on your DID Wallet',
40
+ success: 'You have successfully signed in!',
41
41
  }}
42
42
  />
43
43
  )}
@@ -48,11 +48,11 @@ function App() {
48
48
  export default App;
49
49
  ```
50
50
 
51
- 在此示例中，单击“使用 DID 登录”按钮会将 `isConnectOpen` 状态设置为 `true`，这会将 `DidConnect` 组件渲染为模态对话框。`checkFn` 属性至关重要，因为它是组件用来从您的后端轮询会话状态的函数。
51
+ 在此示例中，点击 “Login with DID” 按钮会将 `isConnectOpen` 状态设置为 `true`，从而将 `DidConnect` 组件渲染为模态对话框。`checkFn` prop 至关重要，因为它是组件用于从您的后端轮询会话状态的函数。
52
52
 
53
53
  ## 工作原理
54
54
 
55
- `DidConnect` 组件协调整个用户身份验证流程，从显示连接选项到处理最终的成功或错误状态。
55
+ `DidConnect` 组件协调整个用户认证流程，从显示连接选项到处理最终的成功或错误状态。
56
56
 
57
57
  ```d2
58
58
  direction: down
@@ -62,29 +62,29 @@ User: {
62
62
  }
63
63
 
64
64
  Application: {
65
- label: "React Application"
65
+ label: "React 应用程序"
66
66
  shape: rectangle
67
67
 
68
68
  Login-Button: {
69
- label: "Login Button"
69
+ label: "登录按钮"
70
70
  }
71
71
 
72
72
  DidConnect-UI: {
73
- label: "DidConnect Component"
73
+ label: "DidConnect 组件"
74
74
  shape: rectangle
75
75
 
76
76
  QR-Code: {
77
- label: "QR Code"
77
+ label: "二维码"
78
78
  }
79
79
 
80
80
  Login-Methods: {
81
- label: "Other Login Methods\n(OAuth, Passkey)"
81
+ label: "其他登录方式\n(OAuth, Passkey)"
82
82
  }
83
83
  }
84
84
  }
85
85
 
86
86
  Backend: {
87
- label: "Backend Server"
87
+ label: "后端服务器"
88
88
  shape: rectangle
89
89
  }
90
90
 
@@ -93,21 +93,21 @@ DID-Wallet: {
93
93
  icon: "https://www.arcblock.io/image-bin/uploads/37198ddc4a0b9e91e5c1c821ab895a34.svg"
94
94
  }
95
95
 
96
- User -> Application.Login-Button: "1. Clicks Login"
97
- Application.Login-Button -> Application.DidConnect-UI: "2. Renders UI"
98
- Application.DidConnect-UI -> Backend: "3. Creates session, starts polling via checkFn"
99
- User -> DID-Wallet: "4a. Scans QR Code"
100
- DID-Wallet -> Backend: "5. Sends approval"
101
- User -> Application.DidConnect-UI.Login-Methods: "4b. Clicks OAuth/Passkey"
102
- Application.DidConnect-UI.Login-Methods -> Backend: "5. Authenticates"
103
- Backend -> Application.DidConnect-UI: "6. Returns success status"
104
- Application.DidConnect-UI -> User: "7. Calls onSuccess & closes UI"
96
+ User -> Application.Login-Button: "1. 点击登录"
97
+ Application.Login-Button -> Application.DidConnect-UI: "2. 渲染 UI"
98
+ Application.DidConnect-UI -> Backend: "3. 创建会话，通过 checkFn 开始轮询"
99
+ User -> DID-Wallet: "4a. 扫描二维码"
100
+ DID-Wallet -> Backend: "5. 发送批准"
101
+ User -> Application.DidConnect-UI.Login-Methods: "4b. 点击 OAuth/Passkey"
102
+ Application.DidConnect-UI.Login-Methods -> Backend: "5. 进行认证"
103
+ Backend -> Application.DidConnect-UI: "6. 返回成功状态"
104
+ Application.DidConnect-UI -> User: "7. 调用 onSuccess 并关闭 UI"
105
105
 
106
106
  ```
107
107
 
108
- ## 组件属性
108
+ ## 组件 Props
109
109
 
110
- `DidConnect` 组件通过其 props 高度可配置。以下是可用选项的详细列表。
110
+ `DidConnect` 组件可通过其 props 进行高度配置。以下是可用选项的详细列表。
111
111
 
112
112
  ### 核心配置
113
113
 
@@ -115,10 +115,10 @@ Application.DidConnect-UI -> User: "7. Calls onSuccess & closes UI"
115
115
 
116
116
  <x-field-group>
117
117
  <x-field data-name="action" data-type="string" data-required="true">
118
- <x-field-desc markdown>定义连接的目的，例如 `login`、`claim`、`sign` 等。此字符串会传递给您的后端，以确定所需的操作。</x-field-desc>
118
+ <x-field-desc markdown>定义连接的目的，例如 `login`、`claim`、`sign` 等。此字符串会传递给您的后端以确定所需的操作。</x-field-desc>
119
119
  </x-field>
120
120
  <x-field data-name="checkFn" data-type="function" data-required="true">
121
- <x-field-desc markdown>用于向后端轮询会话状态更新的函数。它应该是一个发出 API 请求的函数，例如 `axios.get`。</x-field-desc>
121
+ <x-field-desc markdown>用于向后端轮询会话状态更新的函数。它应该是一个能发起 API 请求的函数，例如 `axios.get`。</x-field-desc>
122
122
  </x-field>
123
123
  <x-field data-name="baseUrl" data-type="string" data-default="''">
124
124
  <x-field-desc markdown>API 端点的基础 URL。如果您的 API 位于不同的域上，请在此处指定。</x-field-desc>
@@ -134,19 +134,19 @@ Application.DidConnect-UI -> User: "7. Calls onSuccess & closes UI"
134
134
 
135
135
  <x-field-group>
136
136
  <x-field data-name="enabledConnectTypes" data-type="string[]" data-default='["web", "mobile", ...]'>
137
- <x-field-desc markdown>一个字符串数组，指定要显示的连接方法。可能的值包括 `web`、`mobile`、`github`、`google`、`apple`、`passkey` 等。</x-field-desc>
137
+ <x-field-desc markdown>一个字符串数组，用于指定要显示的连接方式。可能的值包括 `web`、`mobile`、`github`、`google`、`apple`、`passkey` 等。</x-field-desc>
138
138
  </x-field>
139
139
  <x-field data-name="passkeyBehavior" data-type="'none' | 'both' | 'only-existing' | 'only-new'" data-default="'none'">
140
- <x-field-desc markdown>控制 Passkey 身份验证的行为。`none` 表示禁用，`both` 允许创建新密钥和使用现有密钥，`only-existing` 限制为仅使用现有密钥，`only-new` 强制创建新密钥。</x-field-desc>
140
+ <x-field-desc markdown>控制 Passkey 认证的行为。`none` 表示禁用，`both` 允许创建新密钥和使用现有密钥，`only-existing` 限制为仅使用现有密钥，而 `only-new` 强制创建新密钥。</x-field-desc>
141
141
  </x-field>
142
142
  <x-field data-name="allowWallet" data-type="boolean" data-default="true">
143
143
  <x-field-desc markdown>如果为 `false`，二维码和移动钱包连接选项将被隐藏。</x-field-desc>
144
144
  </x-field>
145
145
  <x-field data-name="autoConnect" data-type="boolean" data-default="true">
146
- <x-field-desc markdown>如果为 `true`，组件将自动尝试使用来自同一设备的先前已建立的连接。</x-field-desc>
146
+ <x-field-desc markdown>如果为 `true`，组件将自动尝试使用来自同一设备的先前建立的连接。</x-field-desc>
147
147
  </x-field>
148
148
  <x-field data-name="forceConnected" data-type="boolean | string" data-default="true">
149
- <x-field-desc markdown>如果为 `true`，用户必须使用他们已经登录的同一个 DID 进行连接。如果提供了一个 DID 字符串，用户必须使用该特定的 DID 进行连接。</x-field-desc>
149
+ <x-field-desc markdown>如果为 `true`，用户必须使用与他们已登录的 DID 相同的 DID 进行连接。如果提供了 DID 字符串，则用户必须使用该特定的 DID 进行连接。</x-field-desc>
150
150
  </x-field>
151
151
  <x-field data-name="saveConnect" data-type="boolean" data-default="true">
152
152
  <x-field-desc markdown>如果为 `true`，成功的连接信息将保存在本地，以供将来的 `autoConnect` 尝试使用。</x-field-desc>
@@ -162,46 +162,46 @@ Application.DidConnect-UI -> User: "7. Calls onSuccess & closes UI"
162
162
 
163
163
  <x-field-group>
164
164
  <x-field data-name="mode" data-type="'dialog' | 'drawer' | 'page'" data-default="'dialog'">
165
- <x-field-desc markdown>决定组件的显示方式。`dialog` 将其显示为居中模态框，`drawer` 将其显示为底部抽屉（在移动设备上），`page` 将其直接嵌入到文档流中。</x-field-desc>
165
+ <x-field-desc markdown>确定组件的显示方式。`dialog` 将其显示为居中模态框，`drawer` 显示为底部抽屉（在移动设备上），而 `page` 将其直接嵌入到文档流中。</x-field-desc>
166
166
  </x-field>
167
167
  <x-field data-name="messages" data-type="object">
168
168
  <x-field-desc markdown>一个用于自定义 UI 中显示的文本的对象。</x-field-desc>
169
169
  <x-field data-name="title" data-type="string" data-desc="顶部的​​主标题。"></x-field>
170
- <x-field data-name="scan" data-type="string" data-desc="标题下方的说明文字。"></x-field>
170
+ <x-field data-name="scan" data-type="string" data-desc="标题下方的说明性文本。"></x-field>
171
171
  <x-field data-name="confirm" data-type="string" data-desc="扫描二维码后显示的文本。"></x-field>
172
172
  <x-field data-name="success" data-type="string | ReactNode" data-desc="连接成功时显示的消息。"></x-field>
173
- <x-field data-name="error" data-type="string" data-desc="出错时显示的消息。"></x-field>
173
+ <x-field data-name="error" data-type="string" data-desc="发生错误时显示的消息。"></x-field>
174
174
  </x-field>
175
175
  <x-field data-name="hideCloseButton" data-type="boolean" data-default="false">
176
176
  <x-field-desc markdown>如果为 `true`，右上角的关闭按钮（X）将被隐藏。</x-field-desc>
177
177
  </x-field>
178
178
  <x-field data-name="extraContent" data-type="ReactNode" data-default="null">
179
- <x-field-desc markdown>允许您将自定义的 React 组件或元素注入到 UI 中，通常显示在主标题/描述下方。</x-field-desc>
179
+ <x-field-desc markdown>允许您向 UI 中注入自定义的 React 组件或元素，通常显示在主标题/描述下方。</x-field-desc>
180
180
  </x-field>
181
181
  <x-field data-name="customItems" data-type="ReactNode[]" data-default="[]">
182
- <x-field-desc markdown>一个自定义 React 节点数组，将被添加到连接方法列表中。</x-field-desc>
182
+ <x-field-desc markdown>一个自定义 React 节点数组，将被添加到连接方式列表中。</x-field-desc>
183
183
  </x-field>
184
184
  <x-field data-name="disableSwitchApp" data-type="boolean" data-default="false">
185
- <x-field-desc markdown>如果您正在使用统一登录站点群，此属性可防止用户在登录过程中在站点群中的不同应用程序之间切换。</x-field-desc>
185
+ <x-field-desc markdown>如果您正在使用统一登录站点群，此 prop 会阻止用户在登录过程中在站点群中的不同应用程序之间切换。</x-field-desc>
186
186
  </x-field>
187
187
  <x-field data-name="webWalletUrl" data-type="string">
188
- <x-field-desc markdown>用于“使用网页钱包连接”选项的基于 Web 的 DID 钱包的 URL。默认为官方的 ArcBlock 网页钱包。</x-field-desc>
188
+ <x-field-desc markdown>用于“使用网页钱包连接”选项的基于 Web 的 DID Wallet 的 URL。默认为官方的 ArcBlock 网页钱包。</x-field-desc>
189
189
  </x-field>
190
190
  </x-field-group>
191
191
 
192
- ### 回调函数
192
+ ### 回调
193
193
 
194
194
  在连接生命周期的不同阶段调用的函数。
195
195
 
196
196
  <x-field-group>
197
197
  <x-field data-name="onClose" data-type="function" data-required="true">
198
- <x-field-desc markdown>当用户关闭 `DidConnect` 对话框时（例如，通过单击关闭按钮或在模态框外部单击）执行的回调函数。</x-field-desc>
198
+ <x-field-desc markdown>当用户关闭 `DidConnect` 对话框时（例如，通过点击关闭按钮或模态框外部）执行的回调函数。</x-field-desc>
199
199
  </x-field>
200
200
  <x-field data-name="onSuccess" data-type="function" data-required="true">
201
- <x-field-desc markdown>连接成功时执行的回调函数。会话数据作为参数传递。</x-field-desc>
201
+ <x-field-desc markdown>连接成功后执行的回调函数。会话数据作为参数传递。</x-field-desc>
202
202
  </x-field>
203
203
  <x-field data-name="onError" data-type="function">
204
- <x-field-desc markdown>在过程中发生错误时执行的回调函数。错误对象或消息作为参数传递。</x-field-desc>
204
+ <x-field-desc markdown>在此过程中发生错误时执行的回调函数。错误对象或消息作为参数传递。</x-field-desc>
205
205
  </x-field>
206
206
  <x-field data-name="onRecreateSession" data-type="function">
207
207
  <x-field-desc markdown>当会话需要重置时（例如，在超时后或用户手动取消并重试时）调用的回调函数。</x-field-desc>
@@ -210,4 +210,4 @@ Application.DidConnect-UI -> User: "7. Calls onSuccess & closes UI"
210
210
 
211
211
  ## 后续步骤
212
212
 
213
- 在对 `DidConnect` 组件有了深入了解之后，您现在可以构建稳健的身份验证体验。要对连接 UI 进行更多编程控制，请探索 [`useConnect` 钩子](./hooks-use-connect.md)，它允许您从应用程序的任何位置打开和关闭 `DidConnect` 模态框。
213
+ 在对 `DidConnect` 组件有了扎实的理解之后，您现在可以构建稳健的认证体验。要对连接 UI 进行更多的程序化控制，请探索 [`useConnect` hook](./hooks-use-connect.md)，它允许您从应用程序的任何位置打开和关闭 `DidConnect` 模态框。
package/lib/package.json.js CHANGED
@@ -1,4 +1,4 @@
1
- const o = "3.1.44", s = {
1
+ const o = "3.1.45", s = {
2
2
  version: o
3
3
  };
4
4
  export {
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@arcblock/did-connect-react",
3
- "version": "3.1.44",
3
+ "version": "3.1.45",
4
4
  "description": "Client side library to work with DID Connect by ArcBlock.",
5
5
  "keywords": [
6
6
  "react",
@@ -32,10 +32,10 @@
32
32
  "url": "https://github.com/ArcBlock/ux/issues"
33
33
  },
34
34
  "dependencies": {
35
- "@arcblock/bridge": "3.1.44",
35
+ "@arcblock/bridge": "3.1.45",
36
36
  "@arcblock/did": "^1.21.3",
37
- "@arcblock/icons": "3.1.44",
38
- "@arcblock/react-hooks": "3.1.44",
37
+ "@arcblock/icons": "3.1.45",
38
+ "@arcblock/react-hooks": "3.1.45",
39
39
  "@arcblock/ws": "^1.21.3",
40
40
  "@fontsource/lexend": "^5.2.9",
41
41
  "@iconify-icons/logos": "^1.2.36",
@@ -80,5 +80,5 @@
80
80
  "eslint-plugin-react-hooks": "^4.6.2",
81
81
  "jest": "^29.7.0"
82
82
  },
83
- "gitHead": "fa84963f32d492f869850195429951e99d9b4df8"
83
+ "gitHead": "6706a870c69720bc0beae69a2c380247d4d0efaa"
84
84
  }