📝 (doc) [NO-ISSUE]: Format docs to make CI pass (#671)

LedgerHQ · Feb 13, 2025 · 942a46b · 942a46b
2 parents 7970862 + 6361033
commit 942a46b
Show file tree

Hide file tree

Showing 163 changed files with 1,779 additions and 1,190 deletions.
diff --git a/apps/docs/package.json b/apps/docs/package.json
@@ -24,6 +24,7 @@
     "nextra-theme-docs": "^3.0.15",
     "react": "^18.3.1",
     "react-dom": "^18.3.1",
+    "react-medium-image-zoom": "5.1.8",
     "tailwindcss": "^3.4.16",
     "tailwind-merge": "^1.14.0"
   },

diff --git a/apps/docs/pages/docs/ledgerjs/_meta.js b/apps/docs/pages/docs/ledgerjs/_meta.js
@@ -1,7 +1,7 @@
 export default {
-    info: "Info note",
-    beginner: "Beginner's guides",
-    integration: "Integration walkthroughs",
-    references: "References",
-    explanation: "Explanation"
-}
+  info: "Info note",
+  beginner: "Beginner's guides",
+  integration: "Integration walkthroughs",
+  references: "References",
+  explanation: "Explanation",
+};
diff --git a/apps/docs/pages/docs/ledgerjs/beginner/_meta.js b/apps/docs/pages/docs/ledgerjs/beginner/_meta.js
@@ -1,7 +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"
-}
+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",
+};
diff --git a/apps/docs/pages/docs/ledgerjs/beginner/cosmos-app.mdx b/apps/docs/pages/docs/ledgerjs/beginner/cosmos-app.mdx
@@ -1,20 +1,19 @@
 ---
 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. 
+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'
-
+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 
+## 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.
 
-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.
+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.
 
@@ -36,30 +35,33 @@ You will be able to do the following actions:
 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 
+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
 ```
@@ -68,163 +70,208 @@ The application is up and running. Open the browser and go to `http://localhost:
 
 ![Cosmos integration example](/device-interaction/cosmos-01.png)
 
-- Make sure to select the **WebUSB** option (as the U2F option is deprecated). 
+- 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"
-	/>
+  <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"
-	/>
+  <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"
-	/>
+  <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"
-	/>
+  <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**: 
+  <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. 
+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/>
+<br />
 <div className="center">
-	<img src="/device-interaction/please-review-cosmos.png" alt="Cosmos integration example"/>
+  <img
+    src="/device-interaction/please-review-cosmos.png"
+    alt="Cosmos integration example"
+  />
 </div>
 
-<br/>
+<br />
 <div className="center">
-	<img src="/device-interaction/chain-id-cosmos.png" alt="Cosmos integration example"/>
+  <img
+    src="/device-interaction/chain-id-cosmos.png"
+    alt="Cosmos integration example"
+  />
 </div>
 
-<br/>
+<br />
 <div className="center">
-	<img src="/device-interaction/account-cosmos.png" alt="Cosmos integration example"/>
+  <img
+    src="/device-interaction/account-cosmos.png"
+    alt="Cosmos integration example"
+  />
 </div>
 
-<br/>
+<br />
 <div className="center">
-	<img src="/device-interaction/sequence-cosmos.png" alt="Cosmos integration example"/>
+  <img
+    src="/device-interaction/sequence-cosmos.png"
+    alt="Cosmos integration example"
+  />
 </div>
 
-<br/>
+<br />
 <div className="center">
-	<img src="/device-interaction/type-cosmos.png" alt="Cosmos integration example"/>
+  <img
+    src="/device-interaction/type-cosmos.png"
+    alt="Cosmos integration example"
+  />
 </div>
 
-<br/>
+<br />
 <div className="center">
-	<img src="/device-interaction/amount-cosmos.png" alt="Cosmos integration example"/>
+  <img
+    src="/device-interaction/amount-cosmos.png"
+    alt="Cosmos integration example"
+  />
 </div>
 
-<br/>
+<br />
 <div className="center">
-	<img src="/device-interaction/delegator-cosmos.png" alt="Cosmos integration example"/>
+  <img
+    src="/device-interaction/delegator-cosmos.png"
+    alt="Cosmos integration example"
+  />
 </div>
 
-<br/>
+<br />
 <div className="center">
-	<img src="/device-interaction/validator-cosmos.png" alt="Cosmos integration example"/>
+  <img
+    src="/device-interaction/validator-cosmos.png"
+    alt="Cosmos integration example"
+  />
 </div>
 
-<br/>
+<br />
 <div className="center">
-	<img src="/device-interaction/memo-cosmos.png" alt="Cosmos integration example"/>
+  <img
+    src="/device-interaction/memo-cosmos.png"
+    alt="Cosmos integration example"
+  />
 </div>
 
-<br/>
+<br />
 <div className="center">
-	<img src="/device-interaction/fee-cosmos.png" alt="Cosmos integration example"/>
+  <img
+    src="/device-interaction/fee-cosmos.png"
+    alt="Cosmos integration example"
+  />
 </div>
 
-<br/>
+<br />
 <div className="center">
-	<img src="/device-interaction/gas-cosmos.png" alt="Cosmos integration example"/>
+  <img
+    src="/device-interaction/gas-cosmos.png"
+    alt="Cosmos integration example"
+  />
 </div>
 
-<br/>
+<br />
 <div className="center">
-	<img src="/device-interaction/approve-cosmos.png" alt="Cosmos integration example"/>
+  <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)
-
-