Ledger confim address (#2686)

packages/page-accounts/src/Accounts/Account.tsx

@@ -10,6 +10,7 @@ import { SortedAccount } from './types';
 import BN from 'bn.js';
 import React, { useCallback, useState, useEffect } from 'react';
 import styled from 'styled-components';
+import { getLedger } from '@polkadot/react-api';
 import { AddressInfo, AddressMini, AddressSmall, Badge, Button, ChainLock, CryptoType, Forget, Icon, IdentityIcon, LinkExternal, Menu, Popup, Tag } from '@polkadot/react-components';
 import { useAccountInfo, useApi, useCall, useIncrement, useToggle } from '@polkadot/react-hooks';
 import { Option, StorageKey } from '@polkadot/types';
@@ -59,7 +60,7 @@ function Account ({ account: { address, meta }, className, filter, isFavorite, s
         .filter(([, opt]) => opt.isSome)
         .map(([key, opt]) => [key.args[1] as H256, opt.unwrap()])
   });
-  const { flags: { isDevelopment, isExternal, isInjected, isMultisig }, genesisHash, name: accName, onSetGenesisHash, tags } = useAccountInfo(address);
+  const { flags: { isDevelopment, isExternal, isHardware, isInjected, isMultisig }, genesisHash, name: accName, onSetGenesisHash, tags } = useAccountInfo(address);
   const [isVisible, setIsVisible] = useState(true);
   const [isBackupOpen, toggleBackup] = useToggle();
   const [isDeriveOpen, toggleDerive] = useToggle();
@@ -118,6 +119,19 @@ function Account ({ account: { address, meta }, className, filter, isFavorite, s
     [refreshMulti, toggleMultisig]
   );
 
+  const _showOnHardware = useCallback(
+    (): void => {
+      // TODO: we should check the hardwareType from metadata here as well,
+      // for now we are always assuming hardwareType === 'ledger'
+      getLedger()
+        .getAddress(true)
+        .catch((error): void => {
+          console.error(`ledger: ${error.message}`);
+        });
+    },
+    []
+  );
+
   if (!isVisible) {
     return null;
   }
@@ -307,6 +321,13 @@ function Account ({ account: { address, meta }, className, filter, isFavorite, s
             >
               {t('Derive account via derivation path')}
             </Menu.Item>
+            {isHardware && (
+              <Menu.Item onClick={_showOnHardware}
+              >
+                {t('Show address on hardware device')}
+              </Menu.Item>
+            )}
+            <Menu.Divider />
             <Menu.Item
               disabled={isExternal || isInjected || isMultisig || isDevelopment}
               onClick={toggleBackup}

packages/react-hooks/src/types.ts

@@ -79,6 +79,7 @@ export interface AddressFlags extends DeriveAccountFlags {
   isEditable: boolean;
   isExternal: boolean;
   isFavorite: boolean;
+  isHardware: boolean;
   isInContacts: boolean;
   isInjected: boolean;
   isMultisig: boolean;

packages/react-hooks/src/useAccountInfo.ts

@@ -21,6 +21,7 @@ const IS_NONE = {
   isEditable: false,
   isExternal: false,
   isFavorite: false,
+  isHardware: false,
   isInContacts: false,
   isInjected: false,
   isMultisig: false,
@@ -99,6 +100,7 @@ export default function useAccountInfo (value: string): UseAccountInfo {
       isDevelopment: accountOrAddress?.meta.isTesting || false,
       isEditable: (!identity?.display && (isInContacts || accountOrAddress?.meta.isMultisig || (accountOrAddress && !(accountOrAddress.meta.isInjected || accountOrAddress.meta.isHardware)))) || false,
       isExternal: accountOrAddress?.meta.isExternal || false,
+      isHardware: accountOrAddress?.meta.isHardware || false,
       isInContacts,
       isInjected: accountOrAddress?.meta.isInjected || false,
       isMultisig: accountOrAddress?.meta.isMultisig || false,