📝 (doc) [DSDK-655]: Update documentation following guidelines (#660)

apps/docs/pages/docs/_meta.js

@@ -1,8 +1,11 @@
 export default {
-  docs: "Ledger Device Management Kits",
-  explanations: "Explanations",
+  "---": {
+    title: "Ledger Device Management Kits",
+    type: "separator",
+  },
   beginners: "Beginner's guide",
   integration_walkthroughs: "Integration Walkthrough",
-  migrations: "Migrations",
   references: "References (TSDoc)",
+  explanations: "Explanations",
+  ledgerjs: "LedgerJS: Soon deprecated",
 };

apps/docs/pages/docs/docs.mdx

@@ -31,5 +31,8 @@ Here you can found a summary of all the libraries that are composing the DMK
 | ---------------------- | -------------------------------------------------------------------------------------------------------------- | ------- |
 | Device Management Kit  | [@LedgerHQ/device-mangement-kit](https://www.npmjs.com/package/@ledgerhq/device-management-kit)                | 0.6.0   |
 | Device Signer Ethereum | [@LedgerHQ/device-signer-kit-ethereum](https://www.npmjs.com/package/@ledgerhq/device-signer-kit-ethereum)     | 1.2.0   |
-| WebHidTransport        | [@ledgerhq/device-transport-kit-web-hid](https://www.npmjs.com/package/@ledgerhq/device-transport-kit-web-hid) | 1.0.0   |
+| Device Signer Bitcoin  | [@LedgerHQ/device-signer-kit-bitcoin](https://www.npmjs.com/package/@ledgerhq/device-signer-kit-bitcoin)       | 1.0.0   |
+| Device Signer Solana   | [@LedgerHQ/device-signer-kit-solana](https://www.npmjs.com/package/@ledgerhq/device-signer-kit-solana)         | 1.1.0   |
+| Context Module         | [@ledgerhq/context-module](https://www.npmjs.com/package/@ledgerhq/context-module)                             | 1.0.0   |
+| WebHidTransport        | [@ledgerhq/device-transport-kit-web-hid](https://www.npmjs.com/package/@ledgerhq/device-transport-kit-web-hid) | 1.0.1   |
 | WebBleTransport        | [@ledgerhq/device-transport-kit-web-ble](https://www.npmjs.com/package/@ledgerhq/device-transport-kit-web-ble) | 1.0.0   |

apps/docs/pages/docs/integration_walkthroughs/_meta.js

@@ -1,3 +1,4 @@
 export default {
   how_to: "How to ...",
+  migrations: "Migrations",
 };

apps/docs/pages/docs/integration_walkthroughs/how_to/how_to_use_a_signer.mdx

@@ -1,6 +1,6 @@
 # Use a signer
 
-> [Note] We will show the usage of the signer with the Ethereum signer.
+> **Note:** We will show the usage of the signer with the Ethereum signer.
 > The same logic can be applied to the other signers.
 
 ## Installation

apps/docs/pages/docs/integration_walkthroughs/migrations.mdx

@@ -0,0 +1,17 @@
+---
+title: Migrations
+sidebarTitle: Migration Guides
+asIndexPage: true
+---
+
+# Migrations
+
+Find below all the migrations guide available:
+
+## Device Management Kit
+
+- migration from [v0.5.0 to v0.6.0](./migrations/dmk/05_to_06/)
+
+## Device Signer Kit - Ethereum
+
+- migration from [v1.1.0 to v1.2.0](./migrations/signers/eth/1_1_0_to_1_2_0/)

apps/docs/pages/docs/migrations/_meta.js → apps/docs/pages/docs/integration_walkthroughs/migrations/_meta.js

@@ -1,3 +1,5 @@
+import { title } from "process";
+
 export default {
   dmk: "Device Management Kit",
   signers: "Device Signer Kits",

apps/docs/pages/docs/migrations/dmk/05_to_06.mdx → apps/docs/pages/docs/integration_walkthroughs/migrations/dmk/05_to_06.mdx

@@ -11,7 +11,7 @@ The transports implementation have been moved to their own packages.
 
 To use a transport, you need to install the corresponding package and inject it in the DeviceManagementKit.
 
-**0.5**
+**DMK v0.5**
 
 Transports were built-in the DeviceManagementKit.
 
@@ -26,9 +26,9 @@ const dmk = new DeviceManagementKitBuilder()
   .build();
 ```
 
-**0.6**
+**DMK v0.6**
 
-In 0.6, you need to manually inject the transport you want to use.
+In v0.6, you need to manually inject the transport you want to use.
 
 ```typescript
 import {

apps/docs/pages/docs/migrations/signers/eth/1_1_0_to_1_2_0.mdx → apps/docs/pages/docs/integration_walkthroughs/migrations/signers/eth/1_1_0_to_1_2_0.mdx

@@ -1,4 +1,4 @@
-# Migration from 0.5.0 to 0.6.0
+# Migration from 1.1.0 to 1.2.0
 
 We made some breaking changes to the Ethereum Signer in 1.2.0 which are detailed below.
 

apps/docs/pages/docs/ledgerjs/_meta.js

@@ -0,0 +1,7 @@
+export default {
+    info: "Info note",
+    beginner: "Beginner's guides",
+    integration: "Integration walkthroughs",
+    references: "References",
+    explanation: "Explanation"
+}

apps/docs/pages/docs/ledgerjs/beginner/_meta.js

@@ -0,0 +1,7 @@
+export default {  
+	'transfer-eth': "Transfer of Ethers between accounts",
+	'transfer-sol': "Transfer of Sol between accounts",
+	'smart-contract': "Call a Smart Contract",
+	'personal-message': "Sign a personnal message",
+	'cosmos-app': "Interact with the Cosmos app"
+}

apps/docs/pages/docs/ledgerjs/beginner/cosmos-app.mdx

@@ -0,0 +1,230 @@
+---
+title: Interact with the Cosmos App
+description: In this section, we will guide you through the creation of a web application. This application will connect to your Nano and will allow you to use the Cosmos Embedded App. 
+---
+
+import Zoom from 'react-medium-image-zoom'
+import 'react-medium-image-zoom/dist/styles.css'
+import Image from 'next/image'
+
+
+# Interact with the Cosmos App
+
+## Introduction 
+
+In this section, we will guide you through the creation of a web application. This application will connect to your Nano and will allow you to use the Cosmos Embedded App. 
+
+Web USB and Web HID applications are implemented with `@ledgerhq/hw-transport-webusb` and `@ledgerhq/hw-transport-webhid`  respectively.
+
+This web application was originally developed by the Zondax team (here is a link to [their website](https://zondax.ch/) and to their [Twitter feed](https://twitter.com/_zondax_)) through [this source repo](https://github.com/cosmos/ledger-cosmos-js.git)). Zondax has been developing innovative end-to-end software solutions that are used by a large number of exchanges, hardware wallets, privacy coins, and decentralized finance (DeFi) protocols. Zondax has proven to be a reliable partner for Ledger apps development with more than 35 applications built to date.
+
+## Use case
+
+You will be able to do the following actions:
+
+- Get information about the Cosmos Embedded App installed on your Nano device
+- Get information about the public key and the public address
+- Sign an example of transaction with your Ledger Nano device
+
+## Tutorial prerequisites
+
+- Ensure you have gone through the [prerequisites](../getting-started#prerequisites).
+- Install or update your Cosmos Embedded app to the last version.
+
+## Installation
+
+First, open a terminal and create a new folder in your usual working directory. For this tutorial, the folder will be named “use-cosmos-webapp”.
+
+Run:
+```bash copy
+mkdir use-cosmos-webapp
+cd use-cosmos-webapp
+```
+
+Clone the repo (master branch) and go to the repo folder:
+```bash copy
+git clone https://github.com/LedgerHQ/ledger-cosmos-js.git
+cd ledger-cosmos-js
+```
+
+Run:
+```bash copy
+yarn install 
+npm install -g @vue/cli 
+npm install -g @vue/cli-plugin-typescript
+npm install vue-template-compiler
+npm install --save-dev webpack
+```
+
+
+## Usage
+
+Now, that all the needed packages are installed, you can launch the webapp by runnig:
+```bash copy
+npm run serve
+```
+
+The application is up and running. Open the browser and go to `http://localhost:8080`, it will display:
+
+![Cosmos integration example](/device-interaction/cosmos-01.png)
+
+- Make sure to select the **WebUSB** option (as the U2F option is deprecated). 
+
+- Connect your Nano to the USB port, unlock it and run the cosmos application. You’re now able to interact with the cosmos application.
+
+- Click on **Get Version**:
+
+<Zoom>
+	<img
+	  alt="Cosmos integration example"
+	  src="/device-interaction/cosmos-02.png"
+	/>
+</Zoom>
+
+
+You’re able to retrieve the app version installed on your Ledger Nano device and some other information using the `getVersion()` function.
+
+- Click on **AppInfo**:
+
+<Zoom>
+	<img
+	  alt="Cosmos integration example"
+	  src="/device-interaction/cosmos-03.png"
+	/>
+</Zoom>
+
+You’re able to retrieve the app version but also the app name and some other information using the `appInfo()` function.
+
+- Click on **Get pubkey only**:
+
+<Zoom>
+	<img
+	  alt="Cosmos integration example"
+	  src="/device-interaction/cosmos-04.png"
+	/>
+</Zoom>
+
+You can retrieve the data contained in the public key and some other information using the `getPublicKey()` function.
+
+- Click on **Get Address and Pubkey**:
+
+<Zoom>
+	<img
+	  alt="Cosmos integration example"
+	  src="/device-interaction/cosmos-05.png"
+	/>
+</Zoom>
+
+
+You can retrieve the public address, the data contained in the public key and some other information using the `getAddress()` and `getPublicKey()` functions.
+
+- Click on **Show Address and Pubkey**:
+	<Zoom>
+		<img
+		  alt="Cosmos integration example"
+		  src="/device-interaction/cosmos-06.png"
+		/>
+	</Zoom>
+
+
+	As in the previous step, you can retrieve the public address, the data contained in the public key and some other information, but here you can preview the public address on your Nano. The address you see on the Nano is the same as what you can have on your web app. In this case, the `showAddressAndPubKey()` function is used.
+
+	- Press the right button to do the review:
+
+	<br/>
+	<div className="center">
+	  <img src="/device-interaction/please-review-cosmos.png" alt="Cosmos integration example"/>
+	</div>
+
+	- Verify that the correct address is showing on your Nano. Then, you can press the right button to approve or reject.
+	<br/>
+	<div className="center">
+	  <img src="/device-interaction/address-cosmos.png" alt="Cosmos integration example"/>
+	</div>
+
+	- You can confirm by pressing both buttons.
+	<br/>
+	<div className="center">
+	  <img src="/device-interaction/approve-cosmos.png" alt="Cosmos integration example"/>
+	</div>
+
+	- You can also reject.
+	<br/>
+	<div className="center">
+	  <img src="/device-interaction/reject-cosmos.png" alt="Cosmos integration example"/>
+	</div>
+
+	After approving the review, the webapp will display to you the public address, the data of the public key and some other information.
+
+- Click on **Sign Example TX**: 
+
+![Cosmos integration example](/device-interaction/cosmos-07.png)
+
+Here, it provides you with an example of a transaction to sign on your Ledger Nano device using the `signExampleTx()` function. You’ll have to review the Chain ID, the Account, the Sequence, the Type, the Amount, the Delegator, the Validator, the Memo, the Fees and the Gas. Then you can approve or decline the transaction. 
+
+<br/>
+<div className="center">
+	<img src="/device-interaction/please-review-cosmos.png" alt="Cosmos integration example"/>
+</div>
+
+<br/>
+<div className="center">
+	<img src="/device-interaction/chain-id-cosmos.png" alt="Cosmos integration example"/>
+</div>
+
+<br/>
+<div className="center">
+	<img src="/device-interaction/account-cosmos.png" alt="Cosmos integration example"/>
+</div>
+
+<br/>
+<div className="center">
+	<img src="/device-interaction/sequence-cosmos.png" alt="Cosmos integration example"/>
+</div>
+
+<br/>
+<div className="center">
+	<img src="/device-interaction/type-cosmos.png" alt="Cosmos integration example"/>
+</div>
+
+<br/>
+<div className="center">
+	<img src="/device-interaction/amount-cosmos.png" alt="Cosmos integration example"/>
+</div>
+
+<br/>
+<div className="center">
+	<img src="/device-interaction/delegator-cosmos.png" alt="Cosmos integration example"/>
+</div>
+
+<br/>
+<div className="center">
+	<img src="/device-interaction/validator-cosmos.png" alt="Cosmos integration example"/>
+</div>
+
+<br/>
+<div className="center">
+	<img src="/device-interaction/memo-cosmos.png" alt="Cosmos integration example"/>
+</div>
+
+<br/>
+<div className="center">
+	<img src="/device-interaction/fee-cosmos.png" alt="Cosmos integration example"/>
+</div>
+
+<br/>
+<div className="center">
+	<img src="/device-interaction/gas-cosmos.png" alt="Cosmos integration example"/>
+</div>
+
+<br/>
+<div className="center">
+	<img src="/device-interaction/approve-cosmos.png" alt="Cosmos integration example"/>
+</div>
+
+
+If approved, your transaction is signed and the webapp will display it along with the type of transaction (here, a signature) and some other information.
+
+![Cosmos integration example](/device-interaction/cosmos-08.png)
+
+