Feature: Add derivation path helper to web-tools (#6800)

Add derivation path helper to web-tools

.changeset/weak-cows-design.md

@@ -0,0 +1,5 @@
+---
+"@ledgerhq/web-tools": minor
+---
+
+Adding derivation path helper

apps/web-tools/README.md

@@ -11,8 +11,9 @@ Today we have:
 - **REPL**: this allows developers to test the connectivity on the web through various web implementation of HW Transports against our different hardware wallets. (U2F, WebHID, WebUSB, Web Bluetooth,...). This is a low level technical tool for developers where you can execute arbitrary APDUs.
 - **Synchronisation**: this allows developers to test the coin implementations on the web. The page allows to take a Account ID and do a full synchronisation with the implementations. This helps revealing web specific issues like CORS or libraries that wouldn't be web compatible.
 - **Network Troubleshooting**: allows to run basic HTTP check on some important API endpoints Ledger Live uses. This typically allows us to ask if a user can access our network from there location (e.g. through VPN / behind firewall / etc...)
-- **Domain TLV Parser**: allows to test Ethereum domain TLV parsing. This is useful to test the parsing of the domain TLV in the Ethereum app.
+- **Domain TLV Parser**: allows to parse a domain APDU (TLV) returned by the Ledger NFT Metadata service. This is useful to test the parsing done in the Ethereum app.
 - **SVG Icons**: helper to facilitate the creation of currency SVG icons for the Ledger Live application. This will validate icons correctly matches Ledger Live expectations and will prefill a PR creation.
+- **Derivation Paths**: Get a simple list of supported derivation paths for a given currency
 
 ---
 

apps/web-tools/package.json

@@ -16,6 +16,7 @@
   },
   "dependencies": {
     "@ledgerhq/coin-framework": "workspace:^",
+    "@ledgerhq/cryptoassets": "workspace:^",
     "@ledgerhq/domain-service": "workspace:^",
     "@ledgerhq/errors": "workspace:^",
     "@ledgerhq/hw-app-eth": "workspace:^",
@@ -61,4 +62,4 @@
     "@types/react-table": "^7.7.15",
     "@types/semver": "^7.3.9"
   }
-}
+}

apps/web-tools/pages/derivations.tsx

@@ -0,0 +1,103 @@
+import React, { useCallback, useState } from "react";
+import { findCryptoCurrencyById, listCryptoCurrencies } from "@ledgerhq/cryptoassets";
+import { getDerivationModesForCurrency, getDerivationScheme, runDerivationScheme } from "@ledgerhq/coin-framework/derivation";
+import { CryptoCurrency } from "@ledgerhq/types-cryptoassets";
+
+export const getStaticProps = async () => ({ props: {} });
+
+const App = () => {
+  const [accountIndex, setAccountIndex] = useState("ACCOUNT");
+  const onAccountIndexChange = useCallback((e: React.ChangeEvent<HTMLInputElement>) => {
+    setAccountIndex(e.target.value);
+  }, []);
+  const [addressIndex, setAddressIndex] = useState("ADDRESS");
+  const onAddressIndexChange = useCallback((e: React.ChangeEvent<HTMLInputElement>) => {
+    setAddressIndex(e.target.value);
+  }, []);
+
+
+  const [currencyId, setCurrencyId] = useState("");
+  const [derivationsPerCurrency, setDerivationsPerCurrency] = useState<{currency: { name: string, id: string }, derivations: {name: string, path: string}[]}[]>([]);
+  const onCurrencyChange = useCallback((e: React.ChangeEvent<HTMLInputElement>) => {
+    setCurrencyId(e.target.value);
+  }, []);
+  const onSubmit = useCallback(() => {
+    const currencies = !currencyId ? listCryptoCurrencies()  : [findCryptoCurrencyById(currencyId)];
+    setDerivationsPerCurrency(currencies.map(currency => {
+      if (!currency) {
+        return {
+          currency: { name: "Unknown", id: "Unknown" },
+          derivations: []
+        };
+      }
+
+      return {
+        currency,
+        derivations: getDerivationModesForCurrency(currency).map((derivationMode) => {
+          const deriationScheme = getDerivationScheme({ currency, derivationMode });
+          return {
+            name: derivationMode,
+            path: runDerivationScheme(deriationScheme, currency, { account: accountIndex, address: addressIndex}),
+          };
+        })
+      }
+    })); 
+  }, [accountIndex, currencyId, addressIndex]);
+
+  return (
+    <>
+      <div>
+        <label>Account index</label>
+        <br/>
+        <input
+          type="text"
+          onChange={onAccountIndexChange}
+          value={accountIndex}
+          placeholder="Enter the account index"
+        />
+      </div>
+      <div>
+        <label>Address index</label>
+        <br/>
+        <input
+          type="text"
+          onChange={onAddressIndexChange}
+          value={addressIndex}
+          placeholder="Enter the address index"
+        />
+      </div>
+      <div>
+        <label>Currency Id</label>
+        <br/>
+        <input
+          type="text"
+          onChange={onCurrencyChange}
+          value={currencyId}
+          placeholder="Enter the currency id"
+        />
+      </div>
+      <br/>
+      <div>
+        <button onClick={onSubmit}>Get derivation paths</button>
+      </div>
+      {
+        derivationsPerCurrency.map(({ currency, derivations }) => (
+          <div key={currency.id}>
+            <h4>{currency.id}</h4>
+            <ul>
+              {
+                derivations.map(({ name, path }) => (
+                  <li key={name}>
+                    <li>{name || "Default"}: {path}</li>
+                  </li>
+                ))
+              }
+            </ul>
+          </div>
+        ))
+      }
+    </>
+  );
+};
+
+export default App;

apps/web-tools/pages/index.tsx

@@ -9,6 +9,9 @@ export default function Home() {
         <li>
           <Link href="/domain-tlv-parser">Domain TLV Parser</Link>
         </li>
+        <li>
+          <Link href="/derivations">Derivation Paths</Link>
+        </li>
         <li>
           <Link href="/eth-tx-tools">ETH Tx Tools</Link>
         </li>