From 324f66c48cff7bef3e44a64b0b9a93da8cd05f6e Mon Sep 17 00:00:00 2001
From: Alberto Nicolas Penayo <74352651+bee344@users.noreply.github.com>
Date: Mon, 29 Jul 2024 14:24:51 -0300
Subject: [PATCH] feat: add support for Ledger Migration App (#1422)

* added warning

* linting
---
 packages/extension-base/package.json          |  4 +-
 packages/extension-ui/package.json            |  8 +--
 .../src/Popup/Signing/LedgerSign.tsx          |  6 ++
 packages/extension-ui/src/Popup/index.tsx     |  6 +-
 packages/extension-ui/src/hooks/useLedger.ts  | 13 ++++
 packages/extension-ui/src/i18n/i18n.ts        |  4 +-
 .../src/partials/MenuSettings.tsx             | 19 ++++++
 .../public/locales/en/translation.json        |  3 +-
 yarn.lock                                     | 60 +++++++++----------
 9 files changed, 81 insertions(+), 42 deletions(-)

diff --git a/packages/extension-base/package.json b/packages/extension-base/package.json
index ef344e07..a669c8d3 100644
--- a/packages/extension-base/package.json
+++ b/packages/extension-base/package.json
@@ -30,8 +30,8 @@
     "@polkadot/phishing": "^0.23.1",
     "@polkadot/rpc-provider": "^12.2.1",
     "@polkadot/types": "^12.2.1",
-    "@polkadot/ui-keyring": "^3.7.1",
-    "@polkadot/ui-settings": "^3.7.1",
+    "@polkadot/ui-keyring": "^3.8.2",
+    "@polkadot/ui-settings": "^3.8.2",
     "@polkadot/util": "^13.0.2",
     "@polkadot/util-crypto": "^13.0.2",
     "eventemitter3": "^5.0.1",
diff --git a/packages/extension-ui/package.json b/packages/extension-ui/package.json
index c4aefd0a..0c671541 100644
--- a/packages/extension-ui/package.json
+++ b/packages/extension-ui/package.json
@@ -32,12 +32,12 @@
     "@polkadot/hw-ledger": "^13.0.2",
     "@polkadot/keyring": "^13.0.2",
     "@polkadot/networks": "^13.0.2",
-    "@polkadot/react-identicon": "^3.7.1",
-    "@polkadot/react-qr": "^3.7.1",
+    "@polkadot/react-identicon": "^3.8.2",
+    "@polkadot/react-qr": "^3.8.2",
     "@polkadot/types": "^12.2.1",
     "@polkadot/types-augment": "^12.2.1",
-    "@polkadot/ui-keyring": "^3.7.1",
-    "@polkadot/ui-settings": "^3.7.1",
+    "@polkadot/ui-keyring": "^3.8.2",
+    "@polkadot/ui-settings": "^3.8.2",
     "@polkadot/util": "^13.0.2",
     "@polkadot/util-crypto": "^13.0.2",
     "file-saver": "^2.0.5",
diff --git a/packages/extension-ui/src/Popup/Signing/LedgerSign.tsx b/packages/extension-ui/src/Popup/Signing/LedgerSign.tsx
index 6322143a..14e70815 100644
--- a/packages/extension-ui/src/Popup/Signing/LedgerSign.tsx
+++ b/packages/extension-ui/src/Popup/Signing/LedgerSign.tsx
@@ -9,6 +9,7 @@ import { faSync } from '@fortawesome/free-solid-svg-icons';
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
 import React, { useCallback, useEffect, useState } from 'react';
 
+import settings from '@polkadot/ui-settings';
 import { assert, objectSpread, u8aToHex } from '@polkadot/util';
 import { merkleizeMetadata } from '@polkadot-api/merkleize-metadata';
 
@@ -119,6 +120,11 @@ function LedgerSign ({ accountIndex, addressOffset, className, error, genesisHas
           {error}
         </Warning>
       )}
+      {
+        <Warning>
+          {`You are using the Ledger ${settings.ledgerApp.toUpperCase()} App. If you would like to switch it, please go to "MANAGE LEDGER APP" in the extension's settings.`}
+        </Warning>
+      }
       {(ledgerLocked || error)
         ? (
           <Button
diff --git a/packages/extension-ui/src/Popup/index.tsx b/packages/extension-ui/src/Popup/index.tsx
index 74a02739..3fb30020 100644
--- a/packages/extension-ui/src/Popup/index.tsx
+++ b/packages/extension-ui/src/Popup/index.tsx
@@ -107,9 +107,9 @@ export default function Popup (): React.ReactElement {
       subscribeSigningRequests(setSignRequests)
     ]).catch(console.error);
 
-    settings.on('change', (uiSettings): void => {
-      setSettingsCtx(uiSettings);
-      setCameraOn(uiSettings.camera === 'on');
+    settings.on('change', (settings): void => {
+      setSettingsCtx(settings);
+      setCameraOn(settings.camera === 'on');
     });
 
     _onAction();
diff --git a/packages/extension-ui/src/hooks/useLedger.ts b/packages/extension-ui/src/hooks/useLedger.ts
index b645f3f1..2619543d 100644
--- a/packages/extension-ui/src/hooks/useLedger.ts
+++ b/packages/extension-ui/src/hooks/useLedger.ts
@@ -50,6 +50,8 @@ function getState (): StateBase {
 function retrieveLedger (genesis: string): LedgerGeneric {
   let ledger: LedgerGeneric | null = null;
 
+  const currApp = settings.get().ledgerApp;
+
   const { isLedgerCapable } = getState();
 
   assert(isLedgerCapable, 'Incompatible browser, only Chrome is supported');
@@ -64,6 +66,17 @@ function retrieveLedger (genesis: string): LedgerGeneric {
   // This interface is specific to the underlying PolkadotGenericApp.
   ledger = new LedgerGeneric('webusb', def.network, knownLedger['polkadot']);
 
+  if (currApp === 'generic') {
+    // All chains use the `slip44` from polkadot in their derivation path in ledger.
+    // This interface is specific to the underlying PolkadotGenericApp.
+    ledger = new LedgerGeneric('webusb', def.network, knownLedger['polkadot']);
+  } else if (currApp === 'migration') {
+    ledger = new LedgerGeneric('webusb', def.network, knownLedger[def.network]);
+  } else {
+    // This will never get touched since it will always hit the above two. This satisfies the compiler.
+    ledger = new LedgerGeneric('webusb', def.network, knownLedger['polkadot']);
+  }
+
   return ledger;
 }
 
diff --git a/packages/extension-ui/src/i18n/i18n.ts b/packages/extension-ui/src/i18n/i18n.ts
index c1e2b964..81cca548 100644
--- a/packages/extension-ui/src/i18n/i18n.ts
+++ b/packages/extension-ui/src/i18n/i18n.ts
@@ -29,8 +29,8 @@ i18next
     console.log('i18n: failure', error)
   );
 
-settings.on('change', (uiSettings): void => {
-  i18next.changeLanguage(uiSettings.i18nLang
+settings.on('change', (settings): void => {
+  i18next.changeLanguage(settings.i18nLang
   ).catch(console.error);
 });
 
diff --git a/packages/extension-ui/src/partials/MenuSettings.tsx b/packages/extension-ui/src/partials/MenuSettings.tsx
index 265c8ee2..139da2cb 100644
--- a/packages/extension-ui/src/partials/MenuSettings.tsx
+++ b/packages/extension-ui/src/partials/MenuSettings.tsx
@@ -39,6 +39,7 @@ function MenuSettings ({ className, reference }: Props): React.ReactElement<Prop
   const isPopup = useIsPopup();
   const languageOptions = useMemo(() => getLanguageOptions(), []);
   const onAction = useContext(ActionContext);
+  const _ledgerAppOptions = settings.availableLedgerApp;
 
   useEffect(() => {
     settings.set({ camera: camera ? 'on' : 'off' });
@@ -82,6 +83,12 @@ function MenuSettings ({ className, reference }: Props): React.ReactElement<Prop
     }, []
   );
 
+  const _onChangeLedgerApp = useCallback(
+    (value: string): void => {
+      settings.set({ ledgerApp: value });
+    }, []
+  );
+
   const _goToAuthList = useCallback(
     () => {
       onAction('auth-list');
@@ -116,6 +123,18 @@ function MenuSettings ({ className, reference }: Props): React.ReactElement<Prop
           value={`${prefix}`}
         />
       </MenuItem>
+      <MenuItem
+        className='setting'
+        title={t('Ledger App')}
+      >
+        <Dropdown
+          className='dropdown'
+          label=''
+          onChange={_onChangeLedgerApp}
+          options={_ledgerAppOptions}
+          value={settings.ledgerApp}
+        />
+      </MenuItem>
       <MenuItem
         className='setting'
         title={t('Language')}
diff --git a/packages/extension/public/locales/en/translation.json b/packages/extension/public/locales/en/translation.json
index 87fb67cd..c88e1014 100644
--- a/packages/extension/public/locales/en/translation.json
+++ b/packages/extension/public/locales/en/translation.json
@@ -178,5 +178,6 @@
   "assetId": "",
   "This approval will add the metadata to your extension instance, allowing future requests to be decoded using this metadata. It will also allow the use of Ledger's Generic Polkadot App.": "",
   "No metadata found for this chain. You must upload the metadata to the extension in order to use Ledger.": "",
-  "This network is not available, please report an issue to update the known chains": ""
+  "This network is not available, please report an issue to update the known chains": "",
+  "Ledger App": ""
 }
diff --git a/yarn.lock b/yarn.lock
index 370b0a58..597a955b 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -929,8 +929,8 @@ __metadata:
     "@polkadot/phishing": "npm:^0.23.1"
     "@polkadot/rpc-provider": "npm:^12.2.1"
     "@polkadot/types": "npm:^12.2.1"
-    "@polkadot/ui-keyring": "npm:^3.7.1"
-    "@polkadot/ui-settings": "npm:^3.7.1"
+    "@polkadot/ui-keyring": "npm:^3.8.2"
+    "@polkadot/ui-settings": "npm:^3.8.2"
     "@polkadot/util": "npm:^13.0.2"
     "@polkadot/util-crypto": "npm:^13.0.2"
     eventemitter3: "npm:^5.0.1"
@@ -1036,12 +1036,12 @@ __metadata:
     "@polkadot/hw-ledger": "npm:^13.0.2"
     "@polkadot/keyring": "npm:^13.0.2"
     "@polkadot/networks": "npm:^13.0.2"
-    "@polkadot/react-identicon": "npm:^3.7.1"
-    "@polkadot/react-qr": "npm:^3.7.1"
+    "@polkadot/react-identicon": "npm:^3.8.2"
+    "@polkadot/react-qr": "npm:^3.8.2"
     "@polkadot/types": "npm:^12.2.1"
     "@polkadot/types-augment": "npm:^12.2.1"
-    "@polkadot/ui-keyring": "npm:^3.7.1"
-    "@polkadot/ui-settings": "npm:^3.7.1"
+    "@polkadot/ui-keyring": "npm:^3.8.2"
+    "@polkadot/ui-settings": "npm:^3.8.2"
     "@polkadot/util": "npm:^13.0.2"
     "@polkadot/util-crypto": "npm:^13.0.2"
     "@types/enzyme": "npm:^3.10.18"
@@ -1165,13 +1165,13 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@polkadot/react-identicon@npm:^3.7.1":
-  version: 3.7.1
-  resolution: "@polkadot/react-identicon@npm:3.7.1"
+"@polkadot/react-identicon@npm:^3.8.2":
+  version: 3.8.2
+  resolution: "@polkadot/react-identicon@npm:3.8.2"
   dependencies:
     "@polkadot/keyring": "npm:^13.0.2"
-    "@polkadot/ui-settings": "npm:3.7.1"
-    "@polkadot/ui-shared": "npm:3.7.1"
+    "@polkadot/ui-settings": "npm:3.8.2"
+    "@polkadot/ui-shared": "npm:3.8.2"
     "@polkadot/util": "npm:^13.0.2"
     "@polkadot/util-crypto": "npm:^13.0.2"
     ethereum-blockies-base64: "npm:^1.0.2"
@@ -1186,15 +1186,15 @@ __metadata:
     react: "*"
     react-dom: "*"
     react-is: "*"
-  checksum: 10/3e160d9e628c4f5708c022729564ac5cabbe21e29175ec9980261f6c60711c754908903f4bb51744ec37de16792b94a847cbb38e91fc686ba6ffb26e6d8314f0
+  checksum: 10/791c4210410193f495d5b368d42730e8896503179d1bdbc6d3fe3cca37252a2480eeaeba8a56401d30c4223d2b35808f14b6b9156e563a68e74a3895df0f6abb
   languageName: node
   linkType: hard
 
-"@polkadot/react-qr@npm:^3.7.1":
-  version: 3.7.1
-  resolution: "@polkadot/react-qr@npm:3.7.1"
+"@polkadot/react-qr@npm:^3.8.2":
+  version: 3.8.2
+  resolution: "@polkadot/react-qr@npm:3.8.2"
   dependencies:
-    "@polkadot/ui-settings": "npm:3.7.1"
+    "@polkadot/ui-settings": "npm:3.8.2"
     "@polkadot/util": "npm:^13.0.2"
     "@polkadot/util-crypto": "npm:^13.0.2"
     qrcode-generator: "npm:^1.4.4"
@@ -1207,7 +1207,7 @@ __metadata:
     react: "*"
     react-dom: "*"
     react-is: "*"
-  checksum: 10/d703408839783b93736bc56b0c006ef56b836d5517b29c5ca03a44ca21c82ea2ed35ebeb0fbaf83a7a9f4f8f3f20bfb2b1ad2d1bb261ca9da52d032cdb63202d
+  checksum: 10/ad18ef45585503129863af44a7cb8cf0016b671624d446bf09751165a91f6615ddf6203b10e2c42ddf4723b9fff52deac4c974c2f1a287a9107cb8ba0d0ce4fa
   languageName: node
   linkType: hard
 
@@ -1336,12 +1336,12 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@polkadot/ui-keyring@npm:^3.7.1":
-  version: 3.7.1
-  resolution: "@polkadot/ui-keyring@npm:3.7.1"
+"@polkadot/ui-keyring@npm:^3.8.2":
+  version: 3.8.2
+  resolution: "@polkadot/ui-keyring@npm:3.8.2"
   dependencies:
     "@polkadot/keyring": "npm:^13.0.2"
-    "@polkadot/ui-settings": "npm:3.7.1"
+    "@polkadot/ui-settings": "npm:3.8.2"
     "@polkadot/util": "npm:^13.0.2"
     "@polkadot/util-crypto": "npm:^13.0.2"
     mkdirp: "npm:^3.0.1"
@@ -1352,13 +1352,13 @@ __metadata:
     "@polkadot/keyring": "*"
     "@polkadot/ui-settings": "*"
     "@polkadot/util": "*"
-  checksum: 10/e199c10d298d61ae69d8df57eba3cbb334a6e622b2b4e624967fbe7bd4ed730e0d69302ad8327c16cda5c1f69a6f8ce6b119a2068bd55a3e8a90fef89cd6901d
+  checksum: 10/0a6a6497cc95d8d2487bb3367ca40632f2f3bec6bd84a15a6d16d176659d8bdc79141628544c772e598fbbf3dade4698f5be5942f9b0509326f85d47f18b89ac
   languageName: node
   linkType: hard
 
-"@polkadot/ui-settings@npm:3.7.1, @polkadot/ui-settings@npm:^3.7.1":
-  version: 3.7.1
-  resolution: "@polkadot/ui-settings@npm:3.7.1"
+"@polkadot/ui-settings@npm:3.8.2, @polkadot/ui-settings@npm:^3.8.2":
+  version: 3.8.2
+  resolution: "@polkadot/ui-settings@npm:3.8.2"
   dependencies:
     "@polkadot/networks": "npm:^13.0.2"
     "@polkadot/util": "npm:^13.0.2"
@@ -1368,20 +1368,20 @@ __metadata:
   peerDependencies:
     "@polkadot/networks": "*"
     "@polkadot/util": "*"
-  checksum: 10/6309dbee72c93bd3df66fb49e0e73c3421e6176914ac2c6c7c37df18d3d7861877bf6d8849e091088363ee01f1b73c91ca865c85d678b457151f7a8a231cfdcb
+  checksum: 10/fa33f165cf9bba0492a1e56ecf0406b98392e24e395eb76dc892806eceec31d500585b417f49c3313ef6dff33e766de1d0e16864d9c4600494f50b50c4ef2ef8
   languageName: node
   linkType: hard
 
-"@polkadot/ui-shared@npm:3.7.1":
-  version: 3.7.1
-  resolution: "@polkadot/ui-shared@npm:3.7.1"
+"@polkadot/ui-shared@npm:3.8.2":
+  version: 3.8.2
+  resolution: "@polkadot/ui-shared@npm:3.8.2"
   dependencies:
     colord: "npm:^2.9.3"
     tslib: "npm:^2.6.2"
   peerDependencies:
     "@polkadot/util": "*"
     "@polkadot/util-crypto": "*"
-  checksum: 10/9c57e89bff41a2fe0bac4b59bca1c2c4a13c42ba2cb554664c0271404ee7b0f5989433ba5b122636715581219dd215695c4861fdb598791a903f9fc9facf2b2e
+  checksum: 10/add5ac48726c23cedc9fc5577c09130c5e331cdaa7fbdb762f43ed6fd1fbb4347c86c5a0480791b0095a4f82d0ea0f175d91d35a21c44b36b0ca5f7846843c06
   languageName: node
   linkType: hard