@arcblock/did-connect-react 3.4.15 → 3.5.1

package/docs/overview.md

@@ -1,119 +0,0 @@
-# Overview
-
-The `@arcblock/did-connect-react` library provides a comprehensive set of React components and hooks designed to seamlessly integrate decentralized identity (DID) capabilities into your web applications. It simplifies the process of user authentication and session management using ArcBlock's DID Wallet, offering a secure and user-friendly alternative to traditional login systems.
-
-This library is built to be flexible and easy to use, whether you need a complete out-of-the-box solution or granular control over the authentication flow.
-
-### Key Features
-
-<x-cards data-columns="2">
-  <x-card data-title="Complete Connection UI" data-icon="lucide:qr-code-icon">
-    Includes the `DidConnect` component, a pre-built, customizable modal for handling the entire QR code scanning and connection process.
-  </x-card>
-  <x-card data-title="Seamless Session Management" data-icon="lucide:key-round">
-    Leverage the `SessionProvider` and `useSession` hook to effortlessly manage user login states, sessions, and profile data throughout your application.
-  </x-card>
-  <x-card data-title="Flexible Programmatic Control" data-icon="lucide:webhook">
-    Use hooks like `useConnect` to programmatically open, close, and manage the connection modal, giving you full control over the user experience.
-  </x-card>
-  <x-card data-title="Rich UI Toolkit" data-icon="lucide:gem">
-    A collection of supplementary UI components like `Avatar`, `Address`, and `Button` to display user identity information consistently.
-  </x-card>
-</x-cards>
-
-### Core Architecture
-
-The library revolves around a central `SessionProvider` that manages the user's session state. UI components like `Button` can trigger the `DidConnect` modal, which handles the secure, QR-code-based interaction with the user's DID Wallet. Once the connection is complete, the session is updated, and your application's UI reacts accordingly.
-
-It's important to note that `@arcblock/did-connect-react` is a client-side library and requires a corresponding backend service to handle the authentication logic. This service should be built using the [`@arcblock/did-connect-js`](https://www.arcblock.io/docs/did-connect-sdk) library for Node.js.
-
-<!-- DIAGRAM_IMAGE_START:architecture:16:9:1765962229 -->
-![Overview](assets/diagram/overview-01.jpg)
-<!-- DIAGRAM_IMAGE_END -->
-
-### Installation
-
-To get started, add the library to your project using `yarn` or `npm`.
-
-```shell Installation icon=lucide:download
-# With yarn
-yarn add @arcblock/did-connect-react
-
-# With npm
-npm install @arcblock/did-connect-react
-```
-
-### How It Works: A Quick Look
-
-Here is a minimal example of how to set up a login flow. The application is wrapped in a `SessionProvider`, and a `Button` is used to toggle the `DidConnect` modal.
-
-```jsx App.js icon=logos:react
-import React from 'react';
-import axios from 'axios';
-import { SessionProvider, SessionConsumer } from '@arcblock/did-connect-react/lib/Session';
-import DidConnect from '@arcblock/did-connect-react/lib/Connect';
-import Button from '@arcblock/did-connect-react/lib/Button';
-
-const webWalletUrl = 'https://web.abtwallet.io/';
-
-function App() {
-  const [isConnectOpen, setConnectOpen] = React.useState(false);
-
-  const handleClose = () => setConnectOpen(false);
-  const handleSuccess = () => {
-    // Redirect or update UI after successful login
-    window.location.reload();
-  };
-
-  return (
-    <SessionProvider serviceHost="/">
-      <div className="main-content">
-        <SessionConsumer>
-          {({ session }) => {
-            if (session.loading) {
-              return <div>Loading session...</div>;
-            }
-
-            return session.user ? (
-              <div>
-                <h2>Welcome, {session.user.did}!</h2>
-                <button onClick={() => session.logout()}>Logout</button>
-              </div>
-            ) : (
-              <Button onClick={() => setConnectOpen(true)}>Connect Wallet</Button>
-            );
-          }}
-        </SessionConsumer>
-      </div>
-
-      <DidConnect
-        popup
-        open={isConnectOpen}
-        action="login"
-        checkFn={axios.get}
-        onClose={handleClose}
-        onSuccess={handleSuccess}
-        messages={{
-          title: 'Login to My App',
-          scan: 'Scan QR code with your DID Wallet',
-          confirm: 'Confirm login on your wallet',
-          success: 'You have successfully signed in!',
-        }}
-        webWalletUrl={webWalletUrl}
-      />
-    </SessionProvider>
-  );
-}
-
-export default App;
-```
-
-This example demonstrates how to manage user sessions and trigger the login process with just a few components.
-
-### Next Steps
-
-Now that you have a basic understanding of the library, you're ready to dive deeper.
-
-<x-card data-title="Getting Started" data-href="/getting-started" data-icon="lucide:rocket" data-cta="Start Building">
-  Follow our step-by-step guide to integrate DID Connect into your own application from scratch.
-</x-card>

package/docs/overview.zh-TW.md

@@ -1,119 +0,0 @@
-# 總覽
-
-`@arcblock/did-connect-react` 程式庫提供了一套全面的 React 元件和掛鉤 (hooks)，旨在將去中心化身分 (DID) 功能無縫整合到您的 Web 應用程式中。它使用 ArcBlock 的 DID Wallet 簡化了使用者驗證和會話管理的流程，為傳統登入系統提供了一個安全且使用者友善的替代方案。
-
-無論您需要一個完整的開箱即用解決方案，還是對驗證流程進行精細控制，該程式庫的設計都兼具靈活性和易用性。
-
-### 主要功能
-
-<x-cards data-columns="2">
-  <x-card data-title="完整的連線 UI" data-icon="lucide:qr-code-icon">
-    包含 `DidConnect` 元件，這是一個預先建置、可自訂的對話方塊，用於處理整個 QR Code 掃描和連線過程。
-  </x-card>
-  <x-card data-title="無縫的會話管理" data-icon="lucide:key-round">
-    利用 `SessionProvider` 和 `useSession` 掛鉤，輕鬆管理整個應用程式中的使用者登入狀態、會話和個人資料。
-  </x-card>
-  <x-card data-title="靈活的程式化控制" data-icon="lucide:webhook">
-    使用像 `useConnect` 這樣的掛鉤，以程式化方式開啟、關閉和管理連線對話方塊，讓您完全掌控使用者體驗。
-  </x-card>
-  <x-card data-title="豐富的 UI 工具組" data-icon="lucide:gem">
-    一系列輔助 UI 元件，如 `Avatar`、`Address` 和 `Button`，用於一致地顯示使用者身分資訊。
-  </x-card>
-</x-cards>
-
-### 核心架構
-
-該程式庫圍繞一個核心的 `SessionProvider` 運作，它負責管理使用者的會話狀態。像 `Button` 這樣的 UI 元件可以觸發 `DidConnect` 對話方塊，該對話方塊處理與使用者 DID Wallet 之間基於 QR Code 的安全互動。連線完成後，會話將被更新，您的應用程式 UI 也會做出相應的反應。
-
-需要注意的是，`@arcblock/did-connect-react` 是一個用戶端程式庫，需要一個對應的後端服務來處理驗證邏輯。該服務應使用適用於 Node.js 的 [`@arcblock/did-connect-js`](https://www.arcblock.io/docs/did-connect-sdk) 程式庫來建構。
-
-<!-- DIAGRAM_IMAGE_START:architecture:16:9:1765962229 -->
-![Overview](assets/diagram/overview-01.zh-TW.jpg)
-<!-- DIAGRAM_IMAGE_END -->
-
-### 安裝
-
-若要開始使用，請使用 `yarn` 或 `npm` 將該程式庫新增至您的專案中。
-
-```shell 安裝 icon=lucide:download
-# 使用 yarn
-yarn add @arcblock/did-connect-react
-
-# 使用 npm
-npm install @arcblock/did-connect-react
-```
-
-### 運作方式：快速概覽
-
-以下是一個如何設定登入流程的最小範例。應用程式被包裹在一個 `SessionProvider` 中，並使用一個 `Button` 來切換 `DidConnect` 對話方塊的顯示。
-
-```jsx App.js icon=logos:react
-import React from 'react';
-import axios from 'axios';
-import { SessionProvider, SessionConsumer } from '@arcblock/did-connect-react/lib/Session';
-import DidConnect from '@arcblock/did-connect-react/lib/Connect';
-import Button from '@arcblock/did-connect-react/lib/Button';
-
-const webWalletUrl = 'https://web.abtwallet.io/';
-
-function App() {
-  const [isConnectOpen, setConnectOpen] = React.useState(false);
-
-  const handleClose = () => setConnectOpen(false);
-  const handleSuccess = () => {
-    // 成功登入後重新導向或更新 UI
-    window.location.reload();
-  };
-
-  return (
-    <SessionProvider serviceHost="/">
-      <div className="main-content">
-        <SessionConsumer>
-          {({ session }) => {
-            if (session.loading) {
-              return <div>Loading session...</div>;
-            }
-
-            return session.user ? (
-              <div>
-                <h2>Welcome, {session.user.did}!</h2>
-                <button onClick={() => session.logout()}>Logout</button>
-              </div>
-            ) : (
-              <Button onClick={() => setConnectOpen(true)}>Connect Wallet</Button>
-            );
-          }}
-        </SessionConsumer>
-      </div>
-
-      <DidConnect
-        popup
-        open={isConnectOpen}
-        action="login"
-        checkFn={axios.get}
-        onClose={handleClose}
-        onSuccess={handleSuccess}
-        messages={{
-          title: 'Login to My App',
-          scan: 'Scan QR code with your DID Wallet',
-          confirm: 'Confirm login on your wallet',
-          success: 'You have successfully signed in!',
-        }}
-        webWalletUrl={webWalletUrl}
-      />
-    </SessionProvider>
-  );
-}
-
-export default App;
-```
-
-此範例展示了如何僅用幾個元件來管理使用者會話並觸發登入過程。
-
-### 後續步驟
-
-現在您已對該程式庫有了基本了解，可以準備進行更深入的探索。
-
-<x-card data-title="開始使用" data-href="/getting-started" data-icon="lucide:rocket" data-cta="開始建構">
-  跟隨我們的逐步指南，從頭開始將 DID Connect 整合到您自己的應用程式中。
-</x-card>

package/docs/overview.zh.md

@@ -1,119 +0,0 @@
-# 概述
-
-`@arcblock/did-connect-react` 库提供了一套全面的 React 组件和钩子，旨在将去中心化身份 (DID) 功能无缝集成到您的 Web 应用程序中。它使用 ArcBlock 的 DID 钱包简化了用户身份验证和会话管理的过程，为传统的登录系统提供了一种安全且用户友好的替代方案。
-
-该库的设计灵活且易于使用，无论您需要一个完整的开箱即用解决方案，还是对身份验证流程进行精细控制，它都能满足您的需求。
-
-### 主要特性
-
-<x-cards data-columns="2">
-  <x-card data-title="完整的连接用户界面" data-icon="lucide:qr-code-icon">
-    包含 `DidConnect` 组件，这是一个预制的、可定制的模态框，用于处理整个二维码扫描和连接过程。
-  </x-card>
-  <x-card data-title="无缝的会话管理" data-icon="lucide:key-round">
-    利用 `SessionProvider` 和 `useSession` 钩子，在您的整个应用程序中轻松管理用户登录状态、会话和个人资料数据。
-  </x-card>
-  <x-card data-title="灵活的编程控制" data-icon="lucide:webhook">
-    使用 `useConnect` 等钩子以编程方式打开、关闭和管理连接模态框，让您完全控制用户体验。
-  </x-card>
-  <x-card data-title="丰富的 UI 工具包" data-icon="lucide:gem">
-    一系列辅助 UI 组件，如 `Avatar`、`Address` 和 `Button`，用于一致地显示用户身份信息。
-  </x-card>
-</x-cards>
-
-### 核心架构
-
-该库围绕一个核心的 `SessionProvider` 展开，它负责管理用户的会话状态。像 `Button` 这样的 UI 组件可以触发 `DidConnect` 模态框，该模态框处理与用户 DID 钱包之间基于二维码的安全交互。连接完成后，会话将被更新，您的应用程序 UI 会相应地做出反应。
-
-需要注意的是，`@arcblock/did-connect-react` 是一个客户端库，需要相应的后端服务来处理身份验证逻辑。该服务应使用适用于 Node.js 的 [`@arcblock/did-connect-js`](https://www.arcblock.io/docs/did-connect-sdk) 库来构建。
-
-<!-- DIAGRAM_IMAGE_START:architecture:16:9:1765962229 -->
-![Overview](assets/diagram/overview-01.zh.jpg)
-<!-- DIAGRAM_IMAGE_END -->
-
-### 安装
-
-首先，使用 `yarn` 或 `npm` 将该库添加到您的项目中。
-
-```shell 安装 icon=lucide:download
-# 使用 yarn
-yarn add @arcblock/did-connect-react
-
-# 使用 npm
-npm install @arcblock/did-connect-react
-```
-
-### 工作原理简介
-
-以下是一个如何设置登录流程的最小示例。应用程序被包裹在 `SessionProvider` 中，并使用一个 `Button` 来切换 `DidConnect` 模态框的显示。
-
-```jsx App.js icon=logos:react
-import React from 'react';
-import axios from 'axios';
-import { SessionProvider, SessionConsumer } from '@arcblock/did-connect-react/lib/Session';
-import DidConnect from '@arcblock/did-connect-react/lib/Connect';
-import Button from '@arcblock/did-connect-react/lib/Button';
-
-const webWalletUrl = 'https://web.abtwallet.io/';
-
-function App() {
-  const [isConnectOpen, setConnectOpen] = React.useState(false);
-
-  const handleClose = () => setConnectOpen(false);
-  const handleSuccess = () => {
-    // 登录成功后重定向或更新 UI
-    window.location.reload();
-  };
-
-  return (
-    <SessionProvider serviceHost="/">
-      <div className="main-content">
-        <SessionConsumer>
-          {({ session }) => {
-            if (session.loading) {
-              return <div>正在加载会话...</div>;
-            }
-
-            return session.user ? (
-              <div>
-                <h2>欢迎, {session.user.did}!</h2>
-                <button onClick={() => session.logout()}>登出</button>
-              </div>
-            ) : (
-              <Button onClick={() => setConnectOpen(true)}>连接钱包</Button>
-            );
-          }}
-        </SessionConsumer>
-      </div>
-
-      <DidConnect
-        popup
-        open={isConnectOpen}
-        action="login"
-        checkFn={axios.get}
-        onClose={handleClose}
-        onSuccess={handleSuccess}
-        messages={{
-          title: '登录我的应用',
-          scan: '请使用您的 DID 钱包扫描二维码',
-          confirm: '在您的钱包上确认登录',
-          success: '您已成功登录！',
-        }}
-        webWalletUrl={webWalletUrl}
-      />
-    </SessionProvider>
-  );
-}
-
-export default App;
-```
-
-这个例子展示了如何仅用几个组件来管理用户会话和触发登录过程。
-
-### 后续步骤
-
-现在您对该库有了基本的了解，可以开始更深入地学习了。
-
-<x-card data-title="开始使用" data-href="/getting-started" data-icon="lucide:rocket" data-cta="开始构建">
-  遵循我们的分步指南，从零开始将 DID Connect 集成到您自己的应用程序中。
-</x-card>

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

@@ -1,121 +0,0 @@
-# Address
-
-`Address`コンポーネントは、分散型識別子（DID）アドレスをクリーンで読みやすく、ユーザーフレンドリーな形式で表示するために設計された特殊なUI要素です。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がユーザーのクリップボードにコピーされ、便利なワンクリックアクションが提供されます。
-
-## Props
-
-`Address`コンポーネントは以下のpropsを受け入れます：
-
-<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-address.md

@@ -1,121 +0,0 @@
-# Address
-
-The `Address` component is a specialized UI element designed to display Decentralized Identifier (DID) addresses in a clean, readable, and user-friendly format. It intelligently handles the long strings typical of DIDs by providing options for shortening and easy copying, enhancing the overall user experience.
-
-This component is a simple re-export from `@arcblock/ux/lib/Address`, providing a consistent way to display addresses within the DID Connect ecosystem.
-
-## How to Import
-
-To use the `Address` component, import it from its specific module path within the library.
-
-```javascript Import icon=logos:javascript
-import Address from '@arcblock/did-connect-react/lib/Address';
-```
-
-## Basic Usage
-
-Simply pass the DID string as a child to the component to render the full address.
-
-```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>
-  );
-}
-```
-
-## Features
-
-The `Address` component includes several helpful features to improve usability.
-
-### Shortening
-
-Long DIDs can clutter the UI. Use the `shorten` prop to display a truncated version of the address, showing only the beginning and end characters. This is essential for lists or compact profile views.
-
-### Copy to Clipboard
-
-By adding the `copyable` prop, the component will render a copy icon next to the address. Clicking this icon copies the full DID to the user's clipboard, providing a convenient one-click action.
-
-## Props
-
-The `Address` component accepts the following props:
-
-<x-field-group>
-  <x-field data-name="children" data-type="string" data-required="true">
-    <x-field-desc markdown>The DID address string that you want to display.</x-field-desc>
-  </x-field>
-  <x-field data-name="shorten" data-type="boolean" data-default="false" data-required="false">
-    <x-field-desc markdown>If `true`, the address will be shortened to a more compact format (e.g., `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>If `true`, a copy icon is displayed, allowing users to copy the full address to their clipboard with a single click.</x-field-desc>
-  </x-field>
-  <x-field data-name="responsive" data-type="boolean" data-default="true" data-required="false">
-    <x-field-desc markdown>When `true`, the component will automatically shorten the address based on the available width, ensuring it fits within its container without breaking the layout.</x-field-desc>
-  </x-field>
-</x-field-group>
-
-## Examples
-
-Here are some common use cases for the `Address` component.
-
-### Shortened and Copyable Address
-
-This is the most common configuration, providing a compact and functional display suitable for most UIs.
-
-```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>
-  );
-}
-```
-
-### Usage with Avatar
-
-The `Address` component works great alongside the `Avatar` component to build user profile elements.
-
-```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>
-  );
-}
-```
-
-Now that you know how to display user addresses, you might want to learn how to display their profile pictures. Check out the [Avatar](./ui-components-avatar.md) component documentation for more details.