Feat: Add Button to Display Address on Ledger

_raw/locales/en/messages.json

@@ -1823,7 +1823,8 @@
       "manage-addresses-under-this-seed-phrase": "Manage addresses under this Seed Phrase",
       "safeModuleAddress": "Safe Module Address",
       "coboSafeErrorModule": "Address has expired, please delete and import the address again.",
-      "importedDelegatedAddress": "Imported Delegated address"
+      "importedDelegatedAddress": "Imported Delegated address",
+      "display-address-on-device": "Display address on device"
     },
     "preferMetamaskDapps": {
       "title": "MetaMask Preferred Dapps",

src/background/index.ts

@@ -11,6 +11,7 @@ import {
   EVENTS,
   EVENTS_IN_BG,
   KEYRING_CATEGORY_MAP,
+  KEYRING_CLASS,
   KEYRING_TYPE,
 } from 'consts';
 import { storage } from './webapi';
@@ -138,6 +139,28 @@ async function restoreAppState() {
         },
       });
     }
+    if (message.type === 'displayAddressOnDevice') {
+      const ledgerKeyring = keyringService.getKeyringByType(
+        KEYRING_CLASS.HARDWARE.LEDGER
+      );
+      if (
+        ledgerKeyring &&
+        typeof ledgerKeyring.displayAddressOnDevice === 'function'
+      ) {
+        ledgerKeyring
+          .displayAddressOnDevice(message.address)
+          .then(() => {
+            console.log('Address displayed successfully.');
+          })
+          .catch((error) => {
+            console.error('Error displaying address:', error);
+          });
+      } else {
+        console.error(
+          'LedgerBridgeKeyring instance not found or method unavailable.'
+        );
+      }
+    }
   });
 }
 

src/background/service/keyring/eth-ledger-keyring.ts

@@ -639,6 +639,18 @@ class LedgerBridgeKeyring {
     };
   }
 
+  async displayAddressOnDevice(address: string) {
+    await this.makeApp();
+
+    const { hdPath } = this.accountDetails[ethUtil.toChecksumAddress(address)];
+    if (!hdPath) {
+      throw new Error(`No HD path found for address: ${address}`);
+    }
+
+    const result = await this.app!.getAddress(hdPath, true, true);
+    console.log('Address displayed on device:', result.address);
+  }
+
   async getCurrentAccounts() {
     await this.unlock();
     const addresses = await this.getAccounts();

src/ui/views/AddressDetail/AddressInfo.tsx

@@ -274,6 +274,34 @@ const AddressInfo1 = ({ address, type, brandName, source }: Props) => {
         </div>
       )}
 
+      {accountInfo && type === KEYRING_CLASS.HARDWARE.LEDGER && (
+        <div className="rabby-list-item">
+          <div
+            className="rabby-list-item-content cursor-pointer"
+            onClick={() => {
+              chrome.runtime.sendMessage(
+                {
+                  type: 'displayAddressOnDevice',
+                  address: address,
+                },
+                (response) => {
+                  if (chrome.runtime.lastError) {
+                    console.error(chrome.runtime.lastError);
+                  } else {
+                    console.log('Response:', response);
+                  }
+                }
+              );
+            }}
+          >
+            <div className="rabby-list-item-label">
+              {t('page.addressDetail.display-address-on-device')}
+            </div>
+            <div className="rabby-list-item-extra"></div>
+          </div>
+        </div>
+      )}
+
       {isGnosis ? (
         <GnonisSafeInfo address={address} type={type} brandName={brandName} />
       ) : null}