Skip to content

Commit

Permalink
🔧 (doc) [NO-ISSUE]: Update config to match monorepo setup (#482)
Browse files Browse the repository at this point in the history
  • Loading branch information
valpinkman authored Nov 8, 2024
2 parents 723235a + ff86841 commit b715759
Show file tree
Hide file tree
Showing 23 changed files with 184 additions and 194 deletions.
Empty file added apps/docs/.prettierignore
Empty file.
3 changes: 3 additions & 0 deletions apps/docs/.prettierrc.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,3 @@
module.exports = {
...require("@ledgerhq/prettier-config-dsdk"),
};
15 changes: 0 additions & 15 deletions apps/docs/CHANGELOG.md

This file was deleted.

32 changes: 32 additions & 0 deletions apps/docs/eslint.config.mjs
Original file line number Diff line number Diff line change
@@ -0,0 +1,32 @@
import baseConfig from "@ledgerhq/eslint-config-dsdk";
import globals from "globals";

export default [
...baseConfig,
{
ignores: [".next"],
},
{
languageOptions: {
parserOptions: {
project: "./tsconfig.eslint.json",
},
},
},
{
files: [
"next.config.js",
"postcss.config.js",
"tailwind.config.js",
"theme.config.tsx",
],
languageOptions: {
globals: {
...globals.node,
},
},
rules: {
"@typescript-eslint/no-var-requires": "off",
},
},
];
1 change: 1 addition & 0 deletions apps/docs/next.config.js
Original file line number Diff line number Diff line change
@@ -1,3 +1,4 @@
// eslint-disable-next-line @typescript-eslint/no-require-imports
const withNextra = require("nextra")({
defaultShowCopyCode: true,
theme: "nextra-theme-docs",
Expand Down
21 changes: 14 additions & 7 deletions apps/docs/package.json
Original file line number Diff line number Diff line change
Expand Up @@ -4,10 +4,14 @@
"description": "",
"private": true,
"scripts": {
"build": "next build",
"dev": "next dev",
"build": "next build",
"start": "next start",
"lint": "next lint"
"lint": "eslint",
"lint:fix": "eslint --fix",
"prettier": "prettier . --check",
"prettier:fix": "prettier . --write",
"typecheck": "tsc --noEmit"
},
"keywords": [],
"author": "",
Expand All @@ -16,15 +20,18 @@
"autoprefixer": "^10.4.17",
"next": "^14.1.0",
"nextra": "^2.13.3",
"nextra-theme-blog": "^2.13.3",
"nextra-theme-docs": "^2.13.3",
"postcss": "^8.4.35",
"react": "^18.2.0",
"react-dom": "^18.2.0",
"react": "^18.3.1",
"react-dom": "^18.3.1",
"tailwindcss": "^3.4.1"
},
"devDependencies": {
"@types/node": "^20.11.19",
"typescript": "^5.3.3"
"@ledgerhq/eslint-config-dsdk": "workspace:*",
"@ledgerhq/prettier-config-dsdk": "workspace:*",
"@ledgerhq/tsconfig-dsdk": "workspace:*",
"@types/node": "^22.7.5",
"@types/react": "^18.3.11",
"globals": "15.11.0"
}
}
2 changes: 1 addition & 1 deletion apps/docs/pages/_app.mdx
Original file line number Diff line number Diff line change
@@ -1,5 +1,5 @@
import "../style.css";

export default function App({ Component, pageProps }) {
return <Component {...pageProps} />
return <Component {...pageProps} />;
}
1 change: 1 addition & 0 deletions apps/docs/pages/docs/begginers/exchange_data.mdx
Original file line number Diff line number Diff line change
@@ -1,4 +1,5 @@
# Exchange data with the device

## Sending an APDU

Once you have a connected device, you can send it APDU commands.
Expand Down
2 changes: 0 additions & 2 deletions apps/docs/pages/docs/docs.mdx
Original file line number Diff line number Diff line change
Expand Up @@ -32,5 +32,3 @@ 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.4.0 |
| Device Signer Ethereum | [@LedgerHQ/device-signer-kit-ethereum](https://www.npmjs.com/package/@ledgerhq/device-signer-kit-ethereum) | 1.0.0 |
| Context Module | [@LedgerHQ/context-module](https://www.npmjs.com/package/@ledgerhq/context-module) | 1.0.0 |


17 changes: 12 additions & 5 deletions apps/docs/pages/docs/explanations/dmk.mdx
Original file line number Diff line number Diff line change
Expand Up @@ -17,7 +17,7 @@ As we wanted to make the project modular.
- Open app
- Close app
- Get battery status
- Execute a flow of commands with **DeviceAction**.
- Execute a flow of commands with **DeviceAction**.

> [!NOTE]
> At the moment we do not provide the possibility to distinguish two devices of the same model, via WebHID and to avoid connection to the same device twice.
Expand All @@ -27,25 +27,28 @@ As we wanted to make the project modular.
DMK is offering several ways to communicate with the device.

### Send APDU

<Callout type="warning" emoji="⚠️">
This method is not recommended for most of the use cases.
We recommend using the _Command_ or _DeviceAction_ instead.
This method is not recommended for most of the use cases. We recommend using
the _Command_ or _DeviceAction_ instead.
</Callout>

You can send APDU commands to the device using the `sendApdu` method of the `dmk` instance.
Parameters:

- `sessionId`: string - The session ID, which an identifier of the connection with a device.
- `apdu`: UInt8Array - Byte array of data to be send to the device.
- `apdu`: UInt8Array - Byte array of data to be send to the device.

```typescript
await dmk.sendApdu({ sessionId, apdu });
await dmk.sendApdu({ sessionId, apdu });
```

### Commands

Commands are pre-defined actions that you can send to the device.
You can use the `sendCommand` method of the `dmk` instance to send a command to the device.
Parameters:

- `sessionId`: string - The session ID, which an identifier of the connection with a device.
- `command`: Command - The command to be sent to the device.

Expand All @@ -55,6 +58,7 @@ import { OpenAppCommand } from "@ledgerhq/device-management-kit";
const command = new OpenAppCommand("Bitcoin"); // Open the Bitcoin app
await dmk.sendCommand({ sessionId, command });
```

### Device Actions

Device actions are a set of commands that are executed in a sequence.
Expand All @@ -64,6 +68,7 @@ It is returning an observable that will emit different states of the action exec
A device action is cancellable, you can cancel it by calling the `cancel` function returned by the `executeDeviceAction` method.

Parameters:

- `sessionId`: string - The session ID, which an identifier of the connection with a device.
- `deviceAction`: DeviceAction - The DeviceAction to be sent to the device.

Expand All @@ -75,10 +80,12 @@ const { observable, cancel } = await dmk.executeDeviceAction({
openAppDeviceAction,
});
```

## State Management

For each connected device, we are managing and providing a device state.
The states are:

- `connected`: The device is connected.
- `locked`: The device is locked.
- `busy`: The device is busy, so not reachable.
2 changes: 1 addition & 1 deletion apps/docs/pages/docs/explanations/introduction.mdx
Original file line number Diff line number Diff line change
Expand Up @@ -6,4 +6,4 @@ It has been designed for external developers with the main idea to provide the b

It should as maximum as possible abstract the complexity of the communication with the device and provide a simple and easy-to-use API.

It tends to be a replacement for the LedgerJS libraries, mainly `hw-app-XXX` and `transport-XXX` libraries. These libraries are intended to be deprecated in the future.
It tends to be a replacement for the LedgerJS libraries, mainly `hw-app-XXX` and `transport-XXX` libraries. These libraries are intended to be deprecated in the future.
9 changes: 5 additions & 4 deletions apps/docs/pages/docs/explanations/ledgerjs.mdx
Original file line number Diff line number Diff line change
Expand Up @@ -8,24 +8,25 @@ Ledger JS libraries where initially made for **Ledger Live** applications. As Le
we have inevitably a big technical debt. Moreover time make that some part of the logic are today hard to understand and to maintain.

Moreover, some device behavior are not well handled by the libraries. For example, opening an application on the device will cause unexpected disconnection.
Another feedback we have learnt from partners (software wallets) is that we have a lack of simplicity in the libraries, it require low level knowledge to use them (ex: APDU concept).
Another feedback we have learnt from partners (software wallets) is that we have a lack of simplicity in the libraries, it require low level knowledge to use them (ex: APDU concept).

## Target

LedgerJS was intended for Ledger Live. It was not designed to be used by third party developers.
With DMK we are targeting **third party developers first**.
LedgerJS was intended for Ledger Live. It was not designed to be used by third party developers.
With DMK we are targeting **third party developers first**.

## Abstract complexity

As said above, we wanted to reduce the entry level to interact with Ledger devices.
So we have tried as much as possible to abstract the complexity of the communication with the device and provide a simple and easy-to-use API.

## Multiple Connected devices

With LedgerJS, it was impossible to be connected at the same time to two devices.
With DMK, we have made it possible to connect to multiple devices at the same time and interact from one to another.

## When prefer LedgerJS instead of DMK ?

As we are still missing some features in DMK, you may still need to use LedgerJS in some cases.
For example, we are missing signer for some blockchains, so you may still need to use LedgerJS to sign transactions.
Some solutions are studied at the moment to provide a better compatibility between DMK and LedgerJS.
Some solutions are studied at the moment to provide a better compatibility between DMK and LedgerJS.
Original file line number Diff line number Diff line change
Expand Up @@ -19,7 +19,7 @@ export class MyCustomCommand
}

getApdu(): Apdu {

// Main args for the APDU
const getEthAddressArgs: ApduBuilderArgs = {
cla: 0xe0, // Command CLA
Expand Down Expand Up @@ -70,4 +70,4 @@ export class MyCustomCommand

## Usage of ApduBuilder

## Usage of ApduParser
## Usage of ApduParser
98 changes: 49 additions & 49 deletions apps/docs/style.css
Original file line number Diff line number Diff line change
@@ -1,106 +1,106 @@
/* Hero Section */

.title {
font-size: 2em
font-size: 2em;
}

.hero {
padding: 60px 20px;
text-align: center;
height: 60vh;
display: flex;
flex-direction: column;
justify-content: center;
padding: 60px 20px;
text-align: center;
height: 60vh;
display: flex;
flex-direction: column;
justify-content: center;
}

.hero h1 {
font-size: 2.5em;
margin-bottom: 20px;
font-size: 2.5em;
margin-bottom: 20px;
}

.hero p {
font-size: 1.2em;
font-size: 1.2em;
}

em {
color: #FF5300;
color: #ff5300;
}

/* Cards */
.card-container {
display: flex;
justify-content: center;
margin: 40px 0;
display: flex;
justify-content: center;
margin: 40px 0;
}

.card {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
border-radius: 8px;
padding: 20px;
width: 250px;
text-align: center;
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
margin: 0 20px;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
border-radius: 8px;
padding: 20px;
width: 250px;
text-align: center;
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
margin: 0 20px;
}

.card .icon {
font-size: 3em;
font-size: 3em;
}

.card h3 {
margin-top: 20px;
margin-bottom: 10px;
font-size: 1.5em;
margin-top: 20px;
margin-bottom: 10px;
font-size: 1.5em;
}

.card p {
font-size: 1em;
margin-bottom: 20px;
font-size: 1em;
margin-bottom: 20px;
}

.btn {
display: inline-block;
background-color: #FF5300;
color: white;
padding: 10px 20px;
text-align: center;
border-radius: 4px;
text-decoration: none;
display: inline-block;
background-color: #ff5300;
color: white;
padding: 10px 20px;
text-align: center;
border-radius: 4px;
text-decoration: none;
}

.btn:hover {
background-color: #FF5300;
background-color: #ff5300;
}

/* Additional Resources */
.resources-container {
text-align: center;
padding: 40px 20px;
text-align: center;
padding: 40px 20px;
}

.resources-container h2 {
font-size: 1.8em;
margin-bottom: 20px;
font-size: 1.8em;
margin-bottom: 20px;
}

.resources-container ul {
list-style: none;
padding: 0;
list-style: none;
padding: 0;
}

.resources-container ul li {
margin: 10px 0;
margin: 10px 0;
}

.resources-container ul li a {
font-size: 1.1em;
text-decoration: none;
color: #333;
font-size: 1.1em;
text-decoration: none;
color: #333;
}

.resources-container ul li a:hover {
text-decoration: underline;
text-decoration: underline;
}
Loading

0 comments on commit b715759

Please sign in to comment.