Merge pull request #1948 from cosmos/ledger-demo-fixes

Ledger web demo fixes

Author: codingki

packages/ledger-amino/demo/index.css

@@ -1,7 +1,5 @@
 section {
-  display: flex;
-  align-items: center;
-  justify-content: center;
+  max-width: 500px;
   margin: auto;
   padding: 0.5em;
 }
@@ -20,5 +18,9 @@ input {
 
 textarea {
   width: 32em;
-  height: 28em;
+  height: 5em;
+}
+
+#accounts {
+  white-space: pre-wrap;
 }

packages/ledger-amino/demo/index.html

@@ -22,7 +22,7 @@ <h1>Ledger Demo</h1>
       <button onclick="createSigner().then((signer) => {window.signer = signer; console.log('Connected')}, console.error)">
         Connect to Ledger
       </button>
-    </div>
+    </section>
     <section>
       <h2>Accounts</h2>
       <button onclick="getAccounts(window.signer)">

packages/ledger-amino/src/demo/web.ts

@@ -1,5 +1,5 @@
-import { AccountData, makeCosmoshubPath, StdSignDoc } from "@cosmjs/amino";
-import { pathToString, stringToPath } from "@cosmjs/crypto";
+import { AccountData, StdSignDoc } from "@cosmjs/amino";
+import { HdPath, pathToString, stringToPath } from "@cosmjs/crypto";
 import { toBase64 } from "@cosmjs/encoding";
 import { Uint53 } from "@cosmjs/math";
 import { assert } from "@cosmjs/utils";
@@ -8,14 +8,33 @@ import TransportWebUSB from "@ledgerhq/hw-transport-webusb";
 
 import { LedgerSigner } from "../ledgersigner";
 
-const getElement = (id: string): HTMLInputElement => {
+function getElement(id: string): HTMLElement {
   const e = document.getElementById(id);
-  assert(e instanceof HTMLInputElement, "got the wrong element!");
+  assert(e, `Element with ID '${id}' not found`);
   return e;
-};
+}
+
+function getInputElement(id: string): HTMLInputElement {
+  const e = getElement(id);
+  assert(e instanceof HTMLInputElement, `Element with ID '${id}' is not an input element`);
+  return e;
+}
+
+function getTextAreaElement(id: string): HTMLTextAreaElement {
+  const e = getElement(id);
+  assert(e instanceof HTMLTextAreaElement, `Element with ID '${id}' is not a text area element`);
+  return e;
+}
 
-const accountNumbers = [0, 1, 2, 10];
-const paths = accountNumbers.map(makeCosmoshubPath);
+const paths: HdPath[] = [
+  stringToPath("m/44'/118'/0'/0/0"),
+  stringToPath("m/44'/118'/1'/0/0"),
+  stringToPath("m/44'/118'/2'/0/0"),
+  stringToPath("m/44'/118'/3'/0/0"),
+  stringToPath("m/44'/118'/4'/0/0"),
+  stringToPath("m/44'/118'/5'/0/0"),
+  stringToPath("m/44'/118'/6'/0/0"),
+];
 
 let accounts: readonly AccountData[] = [];
 
@@ -57,9 +76,9 @@ const updateMessage = (accountNumberInput: unknown): void => {
   }
 
   const address = accounts[accountNumber].address;
-  const addressInput = getElement("address");
+  const addressInput = getInputElement("address");
   addressInput.value = address;
-  const signDocTextArea = getElement("sign-doc");
+  const signDocTextArea = getTextAreaElement("sign-doc");
   signDocTextArea.textContent = createSignDoc(accountNumber, address);
 };
 
@@ -68,7 +87,7 @@ const setPath = (accountNumberInput: unknown): void => {
   const accountNumber = Uint53.fromString(accountNumberInput).toNumber();
 
   const path = pathToString(paths[accountNumber]);
-  const pathInput = getElement("path");
+  const pathInput = getInputElement("path");
   pathInput.value = path;
 };
 
@@ -87,11 +106,11 @@ const getAccounts = async function getAccounts(signer: LedgerSigner | undefined)
     console.error("Please wait for transport to connect");
     return;
   }
-  const accountNumberInput1 = getElement("account-number1");
-  const accountNumberInput2 = getElement("account-number2");
-  const addressInput = getElement("address");
+  const accountNumberInput1 = getInputElement("account-number1");
+  const accountNumberInput2 = getInputElement("account-number2");
+  const addressInput = getInputElement("address");
   const accountsDiv = getElement("accounts");
-  const signDocTextArea = getElement("sign-doc");
+  const signDocTextArea = getTextAreaElement("sign-doc");
   accountsDiv.textContent = "Loading...";
 
   try {
@@ -100,7 +119,7 @@ const getAccounts = async function getAccounts(signer: LedgerSigner | undefined)
       ...account,
       pubkey: toBase64(account.pubkey),
     }));
-    accountsDiv.textContent = JSON.stringify(prettyAccounts, null, "\n");
+    accountsDiv.textContent = prettyAccounts.map((pa) => JSON.stringify(pa, null, 4)).join("\n\n");
     const accountNumber = 0;
 
     // Show address block
@@ -125,7 +144,7 @@ const showAddress = async function showAddress(signer: LedgerSigner | undefined)
     console.error("Please wait for transport to connect");
     return;
   }
-  const path = stringToPath(getElement("path").value);
+  const path = stringToPath(getInputElement("path").value);
   await signer.showAddress(path);
 };
 
@@ -138,8 +157,8 @@ const sign = async function sign(signer: LedgerSigner | undefined): Promise<void
   signatureDiv.textContent = "Loading...";
 
   try {
-    const address = getElement("address").value;
-    const signDocJson = getElement("sign-doc").textContent;
+    const address = getInputElement("address").value;
+    const signDocJson = getTextAreaElement("sign-doc").textContent;
     const signDoc: StdSignDoc = JSON.parse(signDocJson);
     const signature = await signer.signAmino(address, signDoc);
     signatureDiv.textContent = JSON.stringify(signature, null, "\t");