diff --git a/docs/build/dapp/01-introduction.md b/docs/build/dapp/01-introduction.md
new file mode 100644
index 000000000..72aead515
--- /dev/null
+++ b/docs/build/dapp/01-introduction.md
@@ -0,0 +1,53 @@
+---
+id: introduction
+title: Howto create a DApp
+sidebar_label: Introduction
+---
+import Tabs from '@theme/Tabs';
+import TabItem from '@theme/TabItem';
+
+
+This documentation aims to guide beginner and intermediate developers in integrating with **Archethic Wallet** (**aeWallet**). It explains various communication methods and includes code snippets in **Dart (Flutter)** and **TypeScript**.
+
+
+## Introduction
+
+Archethic wallets enable **DApps (Decentralized Applications)** to interact with the Archethic blockchain. This interaction is essential for:
+
+- Signing transactions.
+- Managing accounts.
+
+While keeping your secrets protected in **aeWallet**.
+
+
+## Communication Channels
+
+Below are the supported communication methods with Archethic wallets:
+
+| **DApp platform** | **aeWallet platform** | **Channel** | **Typescript Lib** | **Flutter Lib** |
+|---------------------------|---------------------------|-------------------------------|-----------------------|-----------------------|
+| Web (Desktop browser) | Desktop | WebSocket | ✅ | ✅ |
+| Web (aeWallet browser) | Mobile | Web Message Channel | ⛔️ Not implemented yet| ⛔️ Not implemented yet |
+| Web (Desktop browser) | Chrome Extension | Web Message Channel | ✅ | ✅ |
+| Desktop | Desktop | WebSocket | ✅ | ✅ |
+| Mobile | Mobile | DeepLink | ⛔️ | ✅ |
+
+
+:::info
+Currently, the primary use case is **web desktop DApps** running in browsers like Chrome. In the future, a mobile wallet will support DApps through an embedded browser.
+:::
+
+
+
+## Tools and Libraries
+
+- **Flutter/Dart:** [archethic_lib_dart](https://pub.dev/packages/archethic_lib_dart)
+- **TypeScript:** [@archethicjs/sdk](https://www.npmjs.com/package/@archethicjs/sdk)
+
+
+## Additional Resources
+
+- [archethic_wallet_client on pub.dev](https://pub.dev/packages/archethic_wallet_client)
+- [archethic_lib_dart on pub.dev](https://pub.dev/packages/archethic_lib_dart)
+- [@archethicjs/sdk on npm](https://www.npmjs.com/package/@archethicjs/sdk)
+
diff --git a/docs/build/dapp/02-getting-started.md b/docs/build/dapp/02-getting-started.md
new file mode 100644
index 000000000..1fdac5ee1
--- /dev/null
+++ b/docs/build/dapp/02-getting-started.md
@@ -0,0 +1,37 @@
+---
+id: getting-started
+title: Installation/Connection
+sidebar_label: Getting started
+---
+import Tabs from '@theme/Tabs';
+import TabItem from '@theme/TabItem';
+
+## Installing library
+
+
+
+
+```shell
+npm install @archethicjs/sdk
+```
+
+
+
+
+```shell
+flutter pub add archethic_wallet_client
+```
+
+
+
+
+## Setup Deeplink channel
+
+:::note
+For a **mobile DApp** to communicate with **aeWallet mobile**, the only communication channel is the deeplink.
+:::
+
+:::tip
+This is required only if your **DApp** is an Android or iOS application.
+:::
+
diff --git a/docs/build/dapp/03-connecting.md b/docs/build/dapp/03-connecting.md
new file mode 100644
index 000000000..2562f05f5
--- /dev/null
+++ b/docs/build/dapp/03-connecting.md
@@ -0,0 +1,120 @@
+---
+id: connecting
+title: Connecting aeWallet
+sidebar_label: Connecting aeWallet
+---
+import Tabs from '@theme/Tabs';
+import TabItem from '@theme/TabItem';
+
+
+
+This example attempts to connect to **aeWallet** and writes a log when connection status is updated.
+
+:::tip
+Ensure that the **aeWallet** application is **running and unlocked** before attempting connection.
+:::
+
+
+
+
+```html title="index.html"
+
+
+
+
+
+```
+
+```typescript title="main.js"
+import Archethic, { ConnectionState } from "https://esm.sh/@archethicjs/sdk";
+
+/// Creates an Archethic client.
+/// This checks aeWallet RPC available transport methods and creates
+/// an ArchethicWalletClient accordingly.
+/// - If Archethic Wallet desktop is running and unlocked, Websocket will be used
+/// - If Archethic Wallet Chrome extension is installed, it will be opened
+const archethicClient = new Archethic()
+
+/// Listen to rpc wallet connection status changes
+archethicClient.rpcWallet.onconnectionstatechange(async (state) => {
+ switch (state) {
+ case ConnectionState.Connecting:
+ console.log("Connecting ...")
+ break
+ case ConnectionState.Closed:
+ console.log("Connection closed")
+ break
+ case ConnectionState.Closing:
+ console.log("Disconnecting ...")
+ break
+ case ConnectionState.Open:
+ const { endpointUrl } = await archethicClient.rpcWallet.getEndpoint()
+ const walletAccount = await archethicClient.rpcWallet.getCurrentAccount()
+ console.log(`Connected as ${walletAccount.shortName} to ${endpointUrl}`)
+ break
+ }
+})
+
+/// Connect to aeWallet to check the selected chain.
+/// That chain will then be used by `archethicClient`.
+await archethicClient.connect()
+```
+
+
+
+
+By default, `ArchethicDAppClient` will check available communication channels, and choose the most appropriate one.
+
+Alternatively, you may force `ArchethicDAppClient` to use a specific communication channel using the dedicated factory (`ArchethicDAppClient.messageChannel()`, `ArchethicDAppClient.websocket()` ...).
+
+
+```dart
+import 'dart:developer';
+
+import 'package:archethic_wallet_client/archethic_wallet_client.dart';
+
+Future main() async {
+ final aewalletClient = await ArchethicDAppClient.auto(
+ origin: const RequestOrigin(
+ name: 'FlutterDappExample',
+ ),
+ replyBaseUrl: 'flutterdappexample://dapp.example',
+ );
+
+ /// Do not forget to close that subscription later.
+ final connectionStateSubscription =
+ aewalletClient.connectionStateStream.listen((event) {
+ event.when(
+ connecting: () {
+ log('Connecting ...');
+ },
+ disconnected: () {
+ log('Connection closed');
+ },
+ disconnecting: () {
+ log('Disconnecting ...');
+ },
+ connected: () async {
+ final walletAccount =
+ await aewalletClient.getCurrentAccount().valueOrThrow;
+ final endpoint = await aewalletClient.getEndpoint().valueOrThrow;
+ log('Connected as ${walletAccount.shortName} to ${endpoint.endpointUrl}');
+ },
+ );
+ });
+
+ await aewalletClient.connect();
+
+ await Future.delayed(Duration(seconds: 1));
+
+ await aewalletClient.close();
+ connectionStateSubscription.cancel();
+}
+```
+
+
+
+
+
+
+
diff --git a/docs/build/dapp/04-watching-account.md b/docs/build/dapp/04-watching-account.md
new file mode 100644
index 000000000..65a11b8b3
--- /dev/null
+++ b/docs/build/dapp/04-watching-account.md
@@ -0,0 +1,97 @@
+---
+id: watch-balance
+title: Watching account
+sidebar_label: Watching account
+---
+import Tabs from '@theme/Tabs';
+import TabItem from '@theme/TabItem';
+
+
+This example connects to **aeWallet** and watches any update to selected account.
+
+:::tip
+Ensure that the **aeWallet** application is **running and unlocked** before attempting connection.
+:::
+
+
+
+
+```html title="index.html"
+
+
+
+
+
+```
+
+```typescript title="main.js"
+import Archethic, { ConnectionState } from "https://esm.sh/@archethicjs/sdk";
+
+/// Creates an Archethic client.
+/// This checks aeWallet RPC available transport methods and creates
+/// an ArchethicWalletClient accordingly.
+const archethicClient = new Archethic()
+
+/// Listen to rpc wallet connection status changes
+archethicClient.rpcWallet.onconnectionstatechange(async (state) => {
+ switch (state) {
+ case ConnectionState.Connecting:
+ console.log("Connecting ...")
+ break
+ case ConnectionState.Closed:
+ console.log("Connection closed")
+ break
+ case ConnectionState.Closing:
+ console.log("Disconnecting ...")
+ break
+ case ConnectionState.Open:
+ const { endpointUrl } = await archethicClient.rpcWallet.getEndpoint()
+ const walletAccount = await archethicClient.rpcWallet.getCurrentAccount()
+ console.log(`Connected as ${walletAccount.shortName} to ${endpointUrl}`)
+ break
+ }
+})
+
+/// Connect to aeWallet to check the selected chain.
+/// That chain will then be used by `archethicClient`.
+await archethicClient.connect()
+```
+
+
+
+
+
+```dart
+import 'dart:convert';
+import 'dart:developer';
+
+import 'package:archethic_wallet_client/archethic_wallet_client.dart';
+
+Future main() async {
+ final aewalletClient = await ArchethicDAppClient.auto(
+ origin: const RequestOrigin(
+ name: 'FlutterDappExample',
+ ),
+ replyBaseUrl: 'flutterdappexample://dapp.example',
+ );
+
+ final subscription =
+ await aewalletClient.subscribeCurrentAccount().valueOrThrow;
+ subscription.updates.listen((account) {
+ log('Account updated : ${jsonEncode(account.toJson())} ...');
+ });
+ await aewalletClient.connect();
+
+ await Future.delayed(Duration(seconds: 10));
+
+ await aewalletClient.unsubscribeCurrentAccount(subscription.id);
+ await aewalletClient.close();
+}
+```
+
+
+
+
+
+
+
diff --git a/docs/build/dapp/05-sign-transaction.md b/docs/build/dapp/05-sign-transaction.md
new file mode 100644
index 000000000..c6e6d0037
--- /dev/null
+++ b/docs/build/dapp/05-sign-transaction.md
@@ -0,0 +1,117 @@
+---
+id: signing-transaction
+title: Signing transaction
+sidebar_label: Signing transaction
+---
+import Tabs from '@theme/Tabs';
+import TabItem from '@theme/TabItem';
+
+
+This example attempts to connect to **aeWallet** and writes a log when connection status is updated.
+
+:::tip
+Ensure that the **aeWallet** application is **running and unlocked** before attempting connection.
+:::
+
+
+
+
+```html title="index.html"
+
+
+
+
+
+```
+
+```typescript title="main.js"
+import Archethic, { ConnectionState } from "https://esm.sh/@archethicjs/sdk";
+
+/// Creates an Archethic client.
+/// This checks aeWallet RPC available transport methods and creates
+/// an ArchethicWalletClient accordingly.
+const archethicClient = new Archethic()
+
+/// Listen to rpc wallet connection status changes
+archethicClient.rpcWallet.onconnectionstatechange(async (state) => {
+ switch (state) {
+ case ConnectionState.Connecting:
+ console.log("Connecting ...")
+ break
+ case ConnectionState.Closed:
+ console.log("Connection closed")
+ break
+ case ConnectionState.Closing:
+ console.log("Disconnecting ...")
+ break
+ case ConnectionState.Open:
+ const { endpointUrl } = await archethicClient.rpcWallet.getEndpoint()
+ const walletAccount = await archethicClient.rpcWallet.getCurrentAccount()
+ console.log(`Connected as ${walletAccount.shortName} to ${endpointUrl}`)
+ break
+ }
+})
+
+/// Connect to aeWallet to check the selected chain.
+/// That chain will then be used by `archethicClient`.
+await archethicClient.connect()
+```
+
+
+
+
+By default, `ArchethicDAppClient` will check available communication channels, and choose the most appropriate one.
+
+Alternatively, you may force `ArchethicDAppClient` to use a specific communication channel using the dedicated factory (`ArchethicDAppClient.messageChannel()`, `ArchethicDAppClient.websocket()` ...).
+
+
+```dart
+import 'dart:developer';
+
+import 'package:archethic_wallet_client/archethic_wallet_client.dart';
+
+Future main() async {
+ final aewalletClient = await ArchethicDAppClient.auto(
+ origin: const RequestOrigin(
+ name: 'FlutterDappExample',
+ ),
+ replyBaseUrl: 'flutterdappexample://dapp.example',
+ );
+
+ /// Do not forget to close that subscription later.
+ final connectionStateSubscription =
+ aewalletClient.connectionStateStream.listen((event) {
+ event.when(
+ connecting: () {
+ log('Connecting ...');
+ },
+ disconnected: () {
+ log('Connection closed');
+ },
+ disconnecting: () {
+ log('Disconnecting ...');
+ },
+ connected: () async {
+ final walletAccount =
+ await aewalletClient.getCurrentAccount().valueOrThrow;
+ final endpoint = await aewalletClient.getEndpoint().valueOrThrow;
+ log('Connected as ${walletAccount.shortName} to ${endpoint.endpointUrl}');
+ },
+ );
+ });
+
+ await aewalletClient.connect();
+
+ await Future.delayed(Duration(seconds: 1));
+
+ await aewalletClient.close();
+ connectionStateSubscription.cancel();
+}
+```
+
+
+
+
+
+
+
diff --git a/docs/build/dapp/10-faq.md b/docs/build/dapp/10-faq.md
new file mode 100644
index 000000000..306c7c377
--- /dev/null
+++ b/docs/build/dapp/10-faq.md
@@ -0,0 +1,20 @@
+---
+id: faq
+title: FAQ
+sidebar_label: FAQ
+---
+
+## How to test a WebSocket connection locally?
+
+Ensure that the Archethic wallet is running and listening on the correct port. You can use tools like wscat for testing.
+
+## Which browsers are supported?
+
+Currently, only Chrome is supported with the Archethic extension.
+
+## Deeplink RPC limitations
+
+For a **mobile DApp** to communicate with **aeWallet mobile**, the only communication channel is the deeplink.
+This means that **aeWallet** will briefly be brought to the foreground during each call made by your **DApp**.
+
+Due to this limitation, we have decided to disable **subscription RPC calls** by **deeplink**.
diff --git a/docs/build/dapp/README.md b/docs/build/dapp/README.md
deleted file mode 100644
index e6d4d7c68..000000000
--- a/docs/build/dapp/README.md
+++ /dev/null
@@ -1,242 +0,0 @@
----
-id: connect-wallet
-title: Technical Connection to an Archethic Wallet
-sidebar_label: DApp - Connect to Wallet
----
-import Tabs from '@theme/Tabs';
-import TabItem from '@theme/TabItem';
-
-# Technical Connection to an Archethic Wallet
-
-This documentation aims to guide beginner and intermediate developers in integrating with **Archethic wallets**. It explains various communication methods and includes code snippets in **Dart** and **TypeScript**.
-
----
-
-## Introduction
-
-Archethic wallets enable **DApps (Decentralized Applications)** to interact with the Archethic blockchain. This interaction is essential for:
-
-- Signing transactions.
-- Managing accounts.
-- Accessing on-chain data.
-
-:::info
-Currently, the primary use case is **web desktop DApps** running in browsers like Chrome. In the future, a mobile wallet will support DApps through an embedded browser.
-:::
-
----
-
-## Communication Channels
-
-Below are the supported communication methods with Archethic wallets:
-
-| **Platform** | **Channel** | **Protocol** |
-|---------------------------|-------------------------------|-------------------------|
-| Web Desktop ↔ aeWallet Desktop | WebSocket | JSON RPC |
-| Web Desktop ↔ aeWallet Chrome Extension | Web Message Channel | JSON RPC |
-| Desktop (Flutter) ↔ aeWallet Desktop | WebSocket | JSON RPC |
-| Mobile ↔ aeWallet Mobile | DeepLink | JSON RPC |
-
----
-
-## Prerequisites
-
-### Tools and Libraries
-
-- **Dart:** [archethic_lib_dart](https://pub.dev/packages/archethic_lib_dart)
-- **TypeScript:** [@archethicjs/sdk](https://www.npmjs.com/package/@archethicjs/sdk)
-
-### Supported Environments
-
-- **Languages:** Dart, TypeScript.
-- **Browsers:** Chrome (with extension).
-- **Frameworks:** Flutter, Node.js for TypeScript examples.
-
-:::info
-Ensure that the wallet application (desktop or mobile) is running and listening for connections before attempting integration.
-:::
-
----
-
-## Connection Methods
-
-### Web Desktop ↔ aeWallet Desktop
-
-1. Establish a **WebSocket** connection to the wallet's local server.
-2. Send a JSON RPC request to initiate the connection.
-
-
-
-
-```typescript
-import { Archethic } from '@archethicjs/sdk';
-
-// Initialize WebSocket
-const websocket = new WebSocket("ws://localhost:PORT");
-
-// Send a JSON RPC request
-websocket.onopen = () => {
- const request = {
- jsonrpc: "2.0",
- id: 1,
- method: "wallet_connect",
- params: { app_name: "MyDApp" }
- };
- websocket.send(JSON.stringify(request));
-};
-
-// Handle response
-websocket.onmessage = (event) => {
- const response = JSON.parse(event.data);
- console.log("Response received:", response);
-};
-```
-
-
-
-
-```dart
-import 'package:archethic_lib_dart/archethic_lib_dart.dart';
-import 'dart:io';
-
-// WebSocket connection
-void connectToWallet() async {
- final socket = await WebSocket.connect('ws://localhost:PORT');
-
- // Send JSON RPC request
- final request = {
- 'jsonrpc': '2.0',
- 'id': 1,
- 'method': 'wallet_connect',
- 'params': {'app_name': 'MyDApp'}
- };
- socket.add(request);
-
- // Handle response
- socket.listen((data) {
- print('Response received: $data');
- });
-}
-```
-
-
-
-
-
-### Web Desktop (Chrome) ↔ aeWallet Chrome Extension
-
-
-1. Use the browser’s message channel to send and receive data between the DApp and the extension.
-
-
-
-
-```typescript
-// Listen for responses from the wallet extension
-window.addEventListener("message", (event) => {
- if (event.data.type === "WALLET_RESPONSE") {
- console.log("Wallet response:", event.data.payload);
- }
-});
-
-// Send a request to the wallet extension
-window.postMessage({
- type: "WALLET_REQUEST",
- method: "wallet_connect",
- params: { app_name: "MyDApp" }
-}, "*");
-```
-
-
-
-
-
-### Mobile ↔ aeWallet Mobile
-
-1. Use a deep link to open the mobile wallet app and pass the required parameters.
-
-
-
-
-
-```dart
-import 'package:url_launcher/url_launcher.dart';
-
-// Launch the wallet using a deep link
-void launchWallet() async {
- const deepLink = "archethicwallet://connect?app_name=MyDApp";
- if (await canLaunch(deepLink)) {
- await launch(deepLink);
- } else {
- throw 'Unable to open the wallet.';
- }
-}
-```
-
-
-
-
-
-## Error Handling
-
-:::tip
-Always implement error handling for connection failures and unexpected wallet responses.
-:::
-
-### Common Errors
-
-1. WebSocket connection error
- - Ensure the wallet is running and listening on the correct port.
-2. JSON RPC request rejected
- - Validate that the parameters sent are correct.
-
-
-### Example: Error Handling for WebSocket (TypeScript)
-
-
-
-
-```typescript
-websocket.onerror = (error) => {
- console.error("WebSocket error:", error);
-};
-
-websocket.onclose = () => {
- console.log("Connection closed. Attempting to reconnect...");
- // Implement reconnection logic here
-};
-```
-
-
-
-
-
-### Best Practices
-
-- Always validate JSON RPC responses to detect errors.
-- Implement reconnection mechanisms in case of failures.
-
-## Security
-1. **Private Keys:** Never store private keys in your code or on the client-side.
-2. **Secure Channels:** Use secure connections (HTTPS for Web and WSS for WebSocket).
-3. **Permissions:** Limit the permissions your application requests to only what is necessary.
-
-:::info
-Following these security best practices is critical to protecting user funds and data.
-:::
-
-## Additional Resources
-
-- [Official Archethic Documentation](https://www.archethic.net/)
-- [archethic_lib_dart on pub.dev](https://pub.dev/packages/archethic_lib_dart)
-- [@archethicjs/sdk on npm](https://www.npmjs.com/package/@archethicjs/sdk)
-
-# FAQ
-
-## How to test a WebSocket connection locally?
-
-Ensure that the Archethic wallet is running and listening on the correct port. You can use tools like wscat for testing.
-
-## Which browsers are supported?
-
-Currently, only Chrome is supported with the Archethic extension.
\ No newline at end of file
diff --git a/docs/build/dapp/_category_.json b/docs/build/dapp/_category_.json
new file mode 100644
index 000000000..c4cb5bc5f
--- /dev/null
+++ b/docs/build/dapp/_category_.json
@@ -0,0 +1,6 @@
+{
+ "label": "DApp development",
+ "link": {
+ "type": "generated-index"
+ }
+}
\ No newline at end of file
diff --git a/docusaurus.config.js b/docusaurus.config.js
index 31273634d..4d3123911 100644
--- a/docusaurus.config.js
+++ b/docusaurus.config.js
@@ -40,7 +40,6 @@ const config = {
}),
],
],
-
themeConfig: {
/** @type {import('@docusaurus/preset-classic').ThemeConfig} */
colorMode: {
diff --git a/package.json b/package.json
index 646a79829..23302bd42 100644
--- a/package.json
+++ b/package.json
@@ -44,4 +44,4 @@
"last 1 safari version"
]
}
-}
+}
\ No newline at end of file