feat: multiple accounts support in ledger

app/components/Nav/App/index.js

@@ -72,8 +72,6 @@ import ImportPrivateKey from '../../Views/ImportPrivateKey';
 import ImportPrivateKeySuccess from '../../Views/ImportPrivateKeySuccess';
 import ConnectQRHardware from '../../Views/ConnectQRHardware';
 import SelectHardwareWallet from '../../Views/ConnectHardware/SelectHardware';
-import LedgerAccountInfo from '../../Views/LedgerAccountInfo';
-import LedgerConnect from '../../Views/LedgerConnect';
 import { AUTHENTICATION_APP_TRIGGERED_AUTH_NO_CREDENTIALS } from '../../../constants/error';
 import { UpdateNeeded } from '../../../components/UI/UpdateNeeded';
 import { EnableAutomaticSecurityChecksModal } from '../../../components/UI/EnableAutomaticSecurityChecksModal';
@@ -111,6 +109,7 @@ import { MetaMetrics } from '../../../core/Analytics';
 import trackErrorAsAnalytics from '../../../util/metrics/TrackError/trackErrorAsAnalytics';
 import generateDeviceAnalyticsMetaData from '../../../util/metrics/DeviceAnalyticsMetaData/generateDeviceAnalyticsMetaData';
 import generateUserSettingsAnalyticsMetaData from '../../../util/metrics/UserSettingsAnalyticsMetaData/generateUserProfileAnalyticsMetaData';
+import LedgerSelectAccount from '../../Views/LedgerSelectAccount';
 import OnboardingSuccess from '../../Views/OnboardingSuccess';
 import DefaultSettings from '../../Views/OnboardingSuccess/DefaultSettings';
 import BasicFunctionalityModal from '../../UI/BasicFunctionality/BasicFunctionalityModal/BasicFunctionalityModal';
@@ -473,6 +472,7 @@ const App = ({ userLoggedIn }) => {
         }
       }
     }
+
     initSDKConnect()
       .then(() => {
         queueOfHandleDeeplinkFunctions.current.forEach((func) => func());
@@ -742,7 +742,10 @@ const App = ({ userLoggedIn }) => {
 
   const LedgerConnectFlow = () => (
     <Stack.Navigator initialRouteName={Routes.HW.LEDGER_CONNECT}>
-      <Stack.Screen name={Routes.HW.LEDGER_CONNECT} component={LedgerConnect} />
+      <Stack.Screen
+        name={Routes.HW.LEDGER_CONNECT}
+        component={LedgerSelectAccount}
+      />
     </Stack.Navigator>
   );
 
@@ -753,7 +756,6 @@ const App = ({ userLoggedIn }) => {
         component={SelectHardwareWallet}
         options={SelectHardwareWallet.navigationOptions}
       />
-      <Stack.Screen name="LedgerAccountInfo" component={LedgerAccountInfo} />
     </Stack.Navigator>
   );
 

app/components/UI/BlockingActionModal/__snapshots__/index.test.tsx.snap

@@ -16,7 +16,7 @@ exports[`BlockingActionModal should render correctly 1`] = `
   deviceHeight={null}
   deviceWidth={null}
   hasBackdrop={true}
-  hideModalContentWhileAnimating={false}
+  hideModalContentWhileAnimating={true}
   isVisible={true}
   onBackButtonPress={[Function]}
   onBackdropPress={[Function]}

app/components/UI/BlockingActionModal/index.js

@@ -33,6 +33,7 @@ export default function BlockingActionModal({
   children,
   modalVisible,
   isLoadingAction,
+  onAnimationCompleted,
 }) {
   const { colors } = useTheme();
   const styles = createStyles(colors);
@@ -43,6 +44,8 @@ export default function BlockingActionModal({
       backdropOpacity={1}
       isVisible={modalVisible}
       style={styles.modal}
+      onModalShow={onAnimationCompleted}
+      hideModalContentWhileAnimating
     >
       <View style={styles.modalView}>
         <View style={baseStyles.flexGrow}>
@@ -69,4 +72,6 @@ BlockingActionModal.propTypes = {
    * Content to display above the action buttons
    */
   children: PropTypes.node,
+
+  onAnimationCompleted: PropTypes.func,
 };

app/components/UI/HardwareWallet/AccountSelector/index.tsx

@@ -19,7 +19,7 @@ interface ISelectQRAccountsProps {
   selectedAccounts: string[];
   nextPage: () => void;
   prevPage: () => void;
-  toggleAccount: (index: number) => void;
+  onCheck?: (index: number) => void;
   onUnlock: (accountIndex: number[]) => void;
   onForget: () => void;
   title: string;
@@ -30,7 +30,7 @@ const AccountSelector = (props: ISelectQRAccountsProps) => {
     accounts,
     prevPage,
     nextPage,
-    toggleAccount,
+    onCheck,
     selectedAccounts,
     onForget,
     onUnlock,
@@ -69,9 +69,12 @@ const AccountSelector = (props: ISelectQRAccountsProps) => {
         prev.has(index) ? prev.delete(index) : prev.add(index);
         return new Set(prev);
       });
-      toggleAccount(index);
+
+      if (onCheck) {
+        onCheck(index);
+      }
     },
-    [toggleAccount],
+    [onCheck],
   );
 
   return (

app/components/UI/HardwareWallet/AccountSelector/styles.tsx

@@ -50,7 +50,7 @@ export const createStyle = (colors: any) =>
     bottom: {
       alignItems: 'center',
       justifyContent: 'space-between',
-      paddingTop: 70,
+      paddingTop: 30,
       paddingBottom: Device.isIphoneX() ? 20 : 10,
     },
     button: {

app/components/UI/LedgerModals/LedgerConfirmationModal.test.tsx

@@ -15,15 +15,11 @@ import {
   BluetoothPermissionErrors,
   LedgerCommunicationErrors,
 } from '../../../core/Ledger/ledgerErrors';
-import { unlockLedgerDefaultAccount } from '../../../core/Ledger/Ledger';
 import { strings } from '../../../../locales/i18n';
 import { useMetrics } from '../../hooks/useMetrics';
 import { MetaMetricsEvents } from '../../../core/Analytics';
 import { fireEvent } from '@testing-library/react-native';
-
-jest.mock('../../../core/Ledger/Ledger', () => ({
-  unlockLedgerDefaultAccount: jest.fn(),
-}));
+import { HardwareDeviceTypes } from '../../../constants/keyringTypes';
 
 jest.mock('../../hooks/Ledger/useBluetooth', () => ({
   __esModule: true,
@@ -340,7 +336,6 @@ describe('LedgerConfirmationModal', () => {
 
   it('calls onConfirmation when ledger commands are being sent and confirmed have been received.', async () => {
     const onConfirmation = jest.fn();
-    unlockLedgerDefaultAccount.mockReturnValue(Promise.resolve(true));
     useLedgerBluetooth.mockReturnValue({
       isSendingLedgerCommands: true,
       isAppLaunchConfirmationNeeded: false,
@@ -359,11 +354,10 @@ describe('LedgerConfirmationModal', () => {
     // eslint-disable-next-line @typescript-eslint/no-empty-function
     await act(async () => {});
 
-    expect(unlockLedgerDefaultAccount).toHaveBeenCalled();
     expect(onConfirmation).toHaveBeenCalled();
   });
 
-  it('logs LEDGER_HARDWARE_WALLET_ERROR thrown by unlockLedgerDefaultAccount', async () => {
+  it('logs LEDGER_HARDWARE_WALLET_ERROR event when the ledger error occurs', async () => {
     const onConfirmation = jest.fn();
 
     const ledgerLogicToRun = jest.fn();
@@ -400,7 +394,7 @@ describe('LedgerConfirmationModal', () => {
       1,
       MetaMetricsEvents.LEDGER_HARDWARE_WALLET_ERROR,
       {
-        device_type: 'Ledger',
+        device_type: HardwareDeviceTypes.LEDGER,
         error: 'LEDGER_ETH_APP_NOT_INSTALLED',
       },
     );

app/components/UI/LedgerModals/LedgerConfirmationModal.tsx

@@ -10,13 +10,13 @@ import ConfirmationStep from './Steps/ConfirmationStep';
 import ErrorStep from './Steps/ErrorStep';
 import OpenETHAppStep from './Steps/OpenETHAppStep';
 import SearchingForDeviceStep from './Steps/SearchingForDeviceStep';
-import { unlockLedgerDefaultAccount } from '../../../core/Ledger/Ledger';
 import { MetaMetricsEvents } from '../../../core/Analytics';
 import { useMetrics } from '../../../components/hooks/useMetrics';
 import {
   BluetoothPermissionErrors,
   LedgerCommunicationErrors,
 } from '../../../core/Ledger/ledgerErrors';
+import { HardwareDeviceTypes } from '../../../constants/keyringTypes';
 
 const createStyles = (colors: Colors) =>
   StyleSheet.create({
@@ -71,14 +71,13 @@ const LedgerConfirmationModal = ({
   const connectLedger = () => {
     try {
       ledgerLogicToRun(async () => {
-        await unlockLedgerDefaultAccount(false);
         await onConfirmation();
       });
     } catch (_e) {
       // Handle a super edge case of the user starting a transaction with the device connected
       // After arriving to confirmation the ETH app is not installed anymore this causes a crash.
       trackEvent(MetaMetricsEvents.LEDGER_HARDWARE_WALLET_ERROR, {
-        device_type: 'Ledger',
+        device_type: HardwareDeviceTypes.LEDGER,
         error: 'LEDGER_ETH_APP_NOT_INSTALLED',
       });
     }
@@ -90,7 +89,7 @@ const LedgerConfirmationModal = ({
       onRejection();
     } finally {
       trackEvent(MetaMetricsEvents.LEDGER_HARDWARE_TRANSACTION_CANCELLED, {
-        device_type: 'Ledger',
+        device_type: HardwareDeviceTypes.LEDGER,
       });
     }
   };
@@ -179,7 +178,7 @@ const LedgerConfirmationModal = ({
       }
       if (ledgerError !== LedgerCommunicationErrors.UserRefusedConfirmation) {
         trackEvent(MetaMetricsEvents.LEDGER_HARDWARE_WALLET_ERROR, {
-          device_type: 'Ledger',
+          device_type: HardwareDeviceTypes.LEDGER,
           error: `${ledgerError}`,
         });
       }
@@ -208,7 +207,7 @@ const LedgerConfirmationModal = ({
       }
       setPermissionErrorShown(true);
       trackEvent(MetaMetricsEvents.LEDGER_HARDWARE_WALLET_ERROR, {
-        device_type: 'Ledger',
+        device_type: HardwareDeviceTypes.LEDGER,
         error: 'LEDGER_BLUETOOTH_PERMISSION_ERR',
       });
     }
@@ -219,7 +218,7 @@ const LedgerConfirmationModal = ({
         subtitle: strings('ledger.bluetooth_off_message'),
       });
       trackEvent(MetaMetricsEvents.LEDGER_HARDWARE_WALLET_ERROR, {
-        device_type: 'Ledger',
+        device_type: HardwareDeviceTypes.LEDGER,
         error: 'LEDGER_BLUETOOTH_CONNECTION_ERR',
       });
     }

app/components/Views/AccountActions/AccountActions.styles.ts

@@ -1,18 +1,25 @@
 // Third party dependencies.
 import { StyleSheet } from 'react-native';
+import { fontStyles } from '../../../styles/common';
+import { Colors } from '../../../util/theme/models';
 
 /**
  * Style sheet function for AccountActions component.
  *
  * @returns StyleSheet object.
  */
-const styleSheet = () =>
+const styleSheet = (colors: Colors) =>
   StyleSheet.create({
     actionsContainer: {
       alignItems: 'flex-start',
       justifyContent: 'center',
       paddingVertical: 16,
     },
+    text: {
+      color: colors.text.default,
+      fontSize: 14,
+      ...fontStyles.normal,
+    },
   });
 
 export default styleSheet;