Ledger support for PolkadotGenericApp (#10744)

* Ledger support * Some changes * Test * get it working. Code is very ugly and messy * test changes :) * using PAPI merkeleized * Update polkadot-.js deps * Cleanup LedgerSigner * Add addressOffset * Fix ledger call * fix showLedgerAddress * Fix signPayload for addressIndex * Cleanup * set polkadot as default slip44 * fix nit * Fix nit --------- Co-authored-by: bee344 <alberto.penayo@parity.io>
polkadot-js · Jul 16, 2024 · afa3efb · afa3efb
1 parent df54e35
commit afa3efb
Show file tree

Hide file tree

Showing 16 changed files with 591 additions and 566 deletions.
diff --git a/package.json b/package.json
@@ -91,34 +91,34 @@
     "source-map-explorer": "^2.5.3"
   },
   "resolutions": {
-    "@polkadot/api": "^12.0.2",
-    "@polkadot/api-augment": "^12.0.2",
-    "@polkadot/api-base": "^12.0.2",
-    "@polkadot/api-contract": "^12.0.2",
-    "@polkadot/api-derive": "^12.0.2",
-    "@polkadot/hw-ledger": "^12.6.2",
-    "@polkadot/keyring": "^12.6.2",
-    "@polkadot/networks": "^12.6.2",
-    "@polkadot/phishing": "^0.22.10",
-    "@polkadot/rpc-augment": "^12.0.2",
-    "@polkadot/rpc-core": "^12.0.2",
-    "@polkadot/rpc-provider": "^12.0.2",
-    "@polkadot/types": "^12.0.2",
-    "@polkadot/types-augment": "^12.0.2",
-    "@polkadot/types-codec": "^12.0.2",
-    "@polkadot/types-create": "^12.0.2",
-    "@polkadot/types-known": "^12.0.2",
-    "@polkadot/types-support": "^12.0.2",
-    "@polkadot/util": "^12.6.2",
-    "@polkadot/util-crypto": "^12.6.2",
+    "@polkadot/api": "^12.2.1",
+    "@polkadot/api-augment": "^12.2.1",
+    "@polkadot/api-base": "^12.2.1",
+    "@polkadot/api-contract": "^12.2.1",
+    "@polkadot/api-derive": "^12.2.1",
+    "@polkadot/hw-ledger": "^13.0.2",
+    "@polkadot/keyring": "^13.0.2",
+    "@polkadot/networks": "^13.0.2",
+    "@polkadot/phishing": "^0.23.1",
+    "@polkadot/rpc-augment": "^12.2.1",
+    "@polkadot/rpc-core": "^12.2.1",
+    "@polkadot/rpc-provider": "^12.2.1",
+    "@polkadot/types": "^12.2.1",
+    "@polkadot/types-augment": "^12.2.1",
+    "@polkadot/types-codec": "^12.2.1",
+    "@polkadot/types-create": "^12.2.1",
+    "@polkadot/types-known": "^12.2.1",
+    "@polkadot/types-support": "^12.2.1",
+    "@polkadot/util": "^13.0.2",
+    "@polkadot/util-crypto": "^13.0.2",
     "@polkadot/wasm-crypto": "^7.3.2",
-    "@polkadot/x-bigint": "^12.6.2",
-    "@polkadot/x-fetch": "^12.6.2",
-    "@polkadot/x-global": "^12.6.2",
-    "@polkadot/x-randomvalues": "^12.6.2",
-    "@polkadot/x-textdecoder": "^12.6.2",
-    "@polkadot/x-textencoder": "^12.6.2",
-    "@polkadot/x-ws": "^12.6.2",
+    "@polkadot/x-bigint": "^13.0.2",
+    "@polkadot/x-fetch": "^13.0.2",
+    "@polkadot/x-global": "^13.0.2",
+    "@polkadot/x-randomvalues": "^13.0.2",
+    "@polkadot/x-textdecoder": "^13.0.2",
+    "@polkadot/x-textencoder": "^13.0.2",
+    "@polkadot/x-ws": "^13.0.2",
     "typescript": "^5.3.3"
   }
 }
diff --git a/packages/apps-config/package.json b/packages/apps-config/package.json
@@ -37,17 +37,17 @@
     "@peaqnetwork/type-definitions": "0.0.4",
     "@pendulum-chain/type-definitions": "0.3.8",
     "@phala/typedefs": "0.2.33",
-    "@polkadot/api": "^12.0.2",
-    "@polkadot/api-derive": "^12.0.2",
-    "@polkadot/networks": "^12.6.2",
-    "@polkadot/react-identicon": "^3.6.6",
-    "@polkadot/types": "^12.0.2",
-    "@polkadot/types-codec": "^12.0.2",
-    "@polkadot/util": "^12.6.2",
-    "@polkadot/util-crypto": "^12.6.2",
+    "@polkadot/api": "^12.2.1",
+    "@polkadot/api-derive": "^12.2.1",
+    "@polkadot/networks": "^13.0.2",
+    "@polkadot/react-identicon": "^3.7.1",
+    "@polkadot/types": "^12.2.1",
+    "@polkadot/types-codec": "^12.2.1",
+    "@polkadot/util": "^13.0.2",
+    "@polkadot/util-crypto": "^13.0.2",
     "@polkadot/wasm-util": "^7.3.2",
-    "@polkadot/x-fetch": "^12.6.2",
-    "@polkadot/x-ws": "^12.6.2",
+    "@polkadot/x-fetch": "^13.0.2",
+    "@polkadot/x-ws": "^13.0.2",
     "@polymeshassociation/polymesh-types": "5.7.0",
     "@snowfork/snowbridge-types": "0.2.7",
     "@sora-substrate/type-definitions": "1.27.7",

diff --git a/packages/page-accounts/package.json b/packages/page-accounts/package.json
@@ -16,12 +16,12 @@
   "type": "module",
   "version": "0.141.2-6-x",
   "dependencies": {
-    "@polkadot/hw-ledger": "^12.6.2",
-    "@polkadot/phishing": "^6",
+    "@polkadot/hw-ledger": "^13.0.2",
+    "@polkadot/phishing": "^0.23.1",
     "@polkadot/react-components": "^0.141.2-6-x",
     "@polkadot/react-hooks": "^0.141.2-6-x",
-    "@polkadot/util": "^12.6.2",
-    "@polkadot/vanitygen": "^0.56.13",
+    "@polkadot/util": "^13.0.2",
+    "@polkadot/vanitygen": "^0.57.1",
     "detect-browser": "^5.3.0",
     "file-saver": "^2.0.5"
   },

diff --git a/packages/page-accounts/src/Accounts/Account.tsx b/packages/page-accounts/src/Accounts/Account.tsx
@@ -4,7 +4,7 @@
 import type { ApiPromise } from '@polkadot/api';
 import type { SubmittableExtrinsic } from '@polkadot/api/types';
 import type { DeriveDemocracyLock, DeriveStakingAccount } from '@polkadot/api-derive/types';
-import type { Ledger } from '@polkadot/hw-ledger';
+import type { LedgerGeneric } from '@polkadot/hw-ledger';
 import type { ActionStatus } from '@polkadot/react-components/Status/types';
 import type { Option } from '@polkadot/types';
 import type { ProxyDefinition, RecoveryConfig } from '@polkadot/types/interfaces';
@@ -136,10 +136,10 @@ function createClearReferendaTx (api: ApiPromise, address: string, ids: [BN, BN]
   return api.tx.utility.batch(inner);
 }
 
-async function showLedgerAddress (getLedger: () => Ledger, meta: KeyringJson$Meta): Promise<void> {
+async function showLedgerAddress (getLedger: () => LedgerGeneric, meta: KeyringJson$Meta, ss58Prefix: number): Promise<void> {
   const ledger = getLedger();
 
-  await ledger.getAddress(true, meta.accountOffset || 0, meta.addressOffset || 0);
+  await ledger.getAddress(ss58Prefix, true, meta.accountOffset || 0, meta.addressOffset || 0);
 }
 
 const transformRecovery = {
@@ -292,11 +292,11 @@ function Account ({ account: { address, meta }, className = '', delegation, filt
     // TODO: we should check the hardwareType from metadata here as well,
     // for now we are always assuming hardwareType === 'ledger'
     (): void => {
-      showLedgerAddress(getLedger, meta).catch((error): void => {
+      showLedgerAddress(getLedger, meta, api.consts.system.ss58Prefix.toNumber()).catch((error): void => {
         console.error(`ledger: ${(error as Error).message}`);
       });
     },
-    [getLedger, meta]
+    [getLedger, meta, api.consts.system.ss58Prefix]
   );
 
   const menuItems = useMemo(() => [

diff --git a/packages/page-accounts/src/modals/Ledger.tsx b/packages/page-accounts/src/modals/Ledger.tsx
@@ -2,7 +2,7 @@
 // SPDX-License-Identifier: Apache-2.0
 
 import type { ApiPromise } from '@polkadot/api';
-import type { Ledger } from '@polkadot/hw-ledger';
+import type { LedgerGeneric } from '@polkadot/hw-ledger';
 
 import React, { useCallback, useRef, useState } from 'react';
 
@@ -26,8 +26,8 @@ interface Props {
 export const AVAIL_INDEXES = arrayRange(20);
 
 // query the ledger for the address, adding it to the keyring
-async function queryLedger (api: ApiPromise, getLedger: () => Ledger, name: string, accountOffset: number, addressOffset: number): Promise<void> {
-  const { address } = await getLedger().getAddress(false, accountOffset, addressOffset);
+async function queryLedger (api: ApiPromise, getLedger: () => LedgerGeneric, name: string, accountOffset: number, addressOffset: number, ss58Prefix: number): Promise<void> {
+  const { address } = await getLedger().getAddress(ss58Prefix, false, accountOffset, addressOffset);
 
   keyring.addHardware(address, 'ledger', {
     accountOffset,
@@ -67,7 +67,7 @@ function LedgerModal ({ className, onClose }: Props): React.ReactElement<Props>
       setError(null);
       setIsBusy(true);
 
-      queryLedger(api, getLedger, name, accIndex, addIndex)
+      queryLedger(api, getLedger, name, accIndex, addIndex, api.consts.system.ss58Prefix.toNumber())
         .then(() => onClose())
         .catch((error: Error): void => {
           console.error(error);

diff --git a/packages/page-contracts/package.json b/packages/page-contracts/package.json
@@ -16,7 +16,7 @@
   "type": "module",
   "version": "0.141.2-6-x",
   "dependencies": {
-    "@polkadot/api-contract": "12.0.2",
+    "@polkadot/api-contract": "12.2.1",
     "eventemitter3": "^5.0.1"
   },
   "peerDependencies": {

diff --git a/packages/page-treasury/src/Overview/ProposalCreate.tsx b/packages/page-treasury/src/Overview/ProposalCreate.tsx
@@ -1,6 +1,8 @@
 // Copyright 2017-2024 @polkadot/app-treasury authors & contributors
 // SPDX-License-Identifier: Apache-2.0
 
+import type { Option, u128 } from '@polkadot/types';
+import type { Permill } from '@polkadot/types/interfaces';
 import type { BN } from '@polkadot/util';
 
 import React, { useMemo, useState } from 'react';
@@ -26,11 +28,11 @@ function Propose ({ className }: Props): React.ReactElement<Props> | null {
 
   const [bondMin, bondMax, bondPercentage] = useMemo(
     () => [
-      api.consts.treasury.proposalBondMinimum.toString(),
-      api.consts.treasury.proposalBondMaximum?.isSome
-        ? api.consts.treasury.proposalBondMaximum.unwrap().toString()
+      (api.consts.treasury.proposalBondMinimum as u128).toString(),
+      (api.consts.treasury.proposalBondMaximum as Option<u128>)?.isSome
+        ? (api.consts.treasury.proposalBondMaximum as Option<u128>).unwrap().toString()
         : null,
-      `${api.consts.treasury.proposalBond.mul(BN_HUNDRED).div(BN_MILLION).toNumber().toFixed(2)}%`
+      `${(api.consts.treasury.proposalBond as Permill).mul(BN_HUNDRED).div(BN_MILLION).toNumber().toFixed(2)}%`
     ],
     [api]
   );

diff --git a/packages/react-api/package.json b/packages/react-api/package.json
@@ -20,10 +20,10 @@
     "path": false
   },
   "dependencies": {
-    "@polkadot/api": "^12.0.2",
-    "@polkadot/extension-compat-metamask": "^0.48.1",
-    "@polkadot/extension-dapp": "^0.48.1",
-    "@polkadot/rpc-provider": "^12.0.2",
+    "@polkadot/api": "^12.2.1",
+    "@polkadot/extension-compat-metamask": "^0.49.1",
+    "@polkadot/extension-dapp": "^0.49.1",
+    "@polkadot/rpc-provider": "^12.2.1",
     "fflate": "^0.8.1",
     "rxjs": "^7.8.1"
   },

diff --git a/packages/react-components/package.json b/packages/react-components/package.json
@@ -19,15 +19,15 @@
     "@fortawesome/fontawesome-svg-core": "^6.5.1",
     "@fortawesome/free-solid-svg-icons": "^6.5.1",
     "@fortawesome/react-fontawesome": "^0.2.0",
-    "@polkadot/keyring": "^12.6.2",
+    "@polkadot/keyring": "^13.0.2",
     "@polkadot/react-api": "^0.141.2-6-x",
-    "@polkadot/react-identicon": "^3.6.6",
-    "@polkadot/react-qr": "^3.6.6",
+    "@polkadot/react-identicon": "^3.7.1",
+    "@polkadot/react-qr": "^3.7.1",
     "@polkadot/react-query": "^0.141.2-6-x",
-    "@polkadot/ui-keyring": "^3.6.6",
-    "@polkadot/ui-settings": "^3.6.6",
-    "@polkadot/util": "^12.6.2",
-    "@polkadot/util-crypto": "^12.6.2",
+    "@polkadot/ui-keyring": "^3.7.1",
+    "@polkadot/ui-settings": "^3.7.1",
+    "@polkadot/util": "^13.0.2",
+    "@polkadot/util-crypto": "^13.0.2",
     "chart.js": "^4.4.1",
     "chartjs-plugin-annotation": "^3.0.1",
     "chartjs-plugin-crosshair": "^2.0.0",

diff --git a/packages/react-hooks/package.json b/packages/react-hooks/package.json
@@ -16,8 +16,8 @@
   "type": "module",
   "version": "0.141.2-6-x",
   "dependencies": {
-    "@polkadot/hw-ledger": "^12.6.2",
-    "@polkadot/hw-ledger-transports": "^12.6.2",
+    "@polkadot/hw-ledger": "^13.0.2",
+    "@polkadot/hw-ledger-transports": "^13.0.2",
     "is-ipfs": "^8.0.1"
   },
   "peerDependencies": {

diff --git a/packages/react-hooks/src/useLedger.ts b/packages/react-hooks/src/useLedger.ts
@@ -6,7 +6,7 @@ import type { TransportType } from '@polkadot/hw-ledger-transports/types';
 
 import { useCallback, useMemo } from 'react';
 
-import { Ledger } from '@polkadot/hw-ledger';
+import { LedgerGeneric } from '@polkadot/hw-ledger';
 import { knownGenesis, knownLedger } from '@polkadot/networks/defaults';
 import uiSettings from '@polkadot/ui-settings';
 import { assert } from '@polkadot/util';
@@ -22,7 +22,7 @@ interface StateBase {
 }
 
 interface State extends StateBase {
-  getLedger: () => Ledger;
+  getLedger: () => LedgerGeneric;
 }
 
 const EMPTY_STATE: StateBase = {
@@ -37,10 +37,10 @@ const ledgerChains = Object
   .keys(knownGenesis)
   .filter((n) => knownLedger[n]);
 const ledgerHashes = ledgerChains.reduce<string[]>((all, n) => [...all, ...knownGenesis[n]], []);
-let ledger: Ledger | null = null;
+let ledger: LedgerGeneric | null = null;
 let ledgerType: TransportType | null = null;
 
-function retrieveLedger (api: ApiPromise): Ledger {
+function retrieveLedger (api: ApiPromise): LedgerGeneric {
   const currType = uiSettings.ledgerConn as TransportType;
 
   if (!ledger || ledgerType !== currType) {
@@ -49,7 +49,9 @@ function retrieveLedger (api: ApiPromise): Ledger {
 
     assert(network, `Unable to find a known Ledger config for genesisHash ${genesisHex}`);
 
-    ledger = new Ledger(currType, network);
+    // All chains use the `slip44` from polkadot in their derivation path in ledger.
+    // This interface is specific to the underlying PolkadotGenericApp.
+    ledger = new LedgerGeneric(currType, network, knownLedger.polkadot);
     ledgerType = currType;
   }
 

diff --git a/packages/react-signer/package.json b/packages/react-signer/package.json
@@ -16,7 +16,8 @@
   "type": "module",
   "version": "0.141.2-6-x",
   "dependencies": {
-    "@polkadot/hw-ledger": "^12.6.2",
+    "@polkadot-api/merkleize-metadata": "^1.1.0",
+    "@polkadot/hw-ledger": "^13.0.2",
     "@polkadot/react-components": "^0.141.2-6-x"
   },
   "peerDependencies": {

diff --git a/packages/react-signer/src/TxSigned.tsx b/packages/react-signer/src/TxSigned.tsx
@@ -4,7 +4,7 @@
 import type { ApiPromise } from '@polkadot/api';
 import type { SignerOptions } from '@polkadot/api/submittable/types';
 import type { SubmittableExtrinsic } from '@polkadot/api/types';
-import type { Ledger } from '@polkadot/hw-ledger';
+import type { LedgerGeneric } from '@polkadot/hw-ledger';
 import type { KeyringPair } from '@polkadot/keyring/types';
 import type { QueueTx, QueueTxMessageSetStatus } from '@polkadot/react-components/Status/types';
 import type { Option } from '@polkadot/types';
@@ -190,12 +190,12 @@ async function wrapTx (api: ApiPromise, currentItem: QueueTx, { isMultiCall, mul
   return tx;
 }
 
-async function extractParams (api: ApiPromise, address: string, options: Partial<SignerOptions>, getLedger: () => Ledger, setQrState: (state: QrState) => void): Promise<['qr' | 'signing', string, Partial<SignerOptions>, boolean]> {
+async function extractParams (api: ApiPromise, address: string, options: Partial<SignerOptions>, getLedger: () => LedgerGeneric, setQrState: (state: QrState) => void): Promise<['qr' | 'signing', string, Partial<SignerOptions>, boolean]> {
   const pair = keyring.getPair(address);
   const { meta: { accountOffset, addressOffset, isExternal, isHardware, isInjected, isLocal, isProxied, source } } = pair;
 
   if (isHardware) {
-    return ['signing', address, { ...options, signer: new LedgerSigner(api.registry, getLedger, accountOffset || 0, addressOffset || 0) }, false];
+    return ['signing', address, { ...options, signer: new LedgerSigner(api, getLedger, accountOffset || 0, addressOffset || 0) }, false];
   } else if (isLocal) {
     return ['signing', address, { ...options, signer: new AccountSigner(api.registry, pair) }, true];
   } else if (isExternal && !isProxied) {
@@ -287,7 +287,7 @@ function TxSigned ({ className, currentItem, isQueueSubmit, queueSize, requestAd
         } else if (flags.isHardware) {
           try {
             const ledger = getLedger();
-            const { address } = await ledger.getAddress(false, flags.accountOffset, flags.addressOffset);
+            const { address } = await ledger.getAddress(api.consts.system.ss58Prefix.toNumber(), false, flags.accountOffset, flags.addressOffset);
 
             console.log(`Signing with Ledger address ${address}`);
           } catch (error) {
@@ -304,7 +304,7 @@ function TxSigned ({ className, currentItem, isQueueSubmit, queueSize, requestAd
 
       return !passwordError;
     },
-    [flags, getLedger, senderInfo, t]
+    [flags, getLedger, senderInfo, t, api.consts.system.ss58Prefix]
   );
 
   const _onSendPayload = useCallback(