feat: enable ledger hardware wallet implementation.

app/actions/accounts/index.test.ts

@@ -0,0 +1,19 @@
+import { setReloadAccounts } from '.';
+
+describe('accounts, reloadAccounts', () => {
+  describe('setReloadAccounts', () => {
+    it('should create an action to set reloadAccounts to true', () => {
+      expect(setReloadAccounts(true)).toEqual({
+        type: 'SET_RELOAD_ACCOUNTS',
+        reloadAccounts: true,
+      });
+    });
+
+    it('should create an action to set reloadAccounts to false', () => {
+      expect(setReloadAccounts(false)).toEqual({
+        type: 'SET_RELOAD_ACCOUNTS',
+        reloadAccounts: false,
+      });
+    });
+  });
+});

app/actions/accounts/index.ts

@@ -0,0 +1,27 @@
+import { Action } from 'redux';
+
+/**
+ * Deference action types available for different RPC event flow
+ */
+export enum AccountsActionType {
+  SET_RELOAD_ACCOUNTS = 'SET_RELOAD_ACCOUNTS',
+}
+
+/**
+ * Extend redux Action interface to add rpcName, eventStage and error properties
+ */
+export interface iAccountActions extends Action {
+  reloadAccounts: boolean;
+}
+
+/**
+ * setReloadAccounts action creator
+ * @param {boolean} reloadAccounts: true to reload accounts, false otherwise
+ * @returns {iAccountActions} - the action object to set reloadAccounts
+ */
+export function setReloadAccounts(reloadAccounts: boolean): iAccountActions {
+  return {
+    type: AccountsActionType.SET_RELOAD_ACCOUNTS,
+    reloadAccounts,
+  };
+}

app/actions/modals/index.js

@@ -32,3 +32,10 @@ export function toggleInfoNetworkModal(show) {
     show,
   };
 }
+
+export function toggleSignModal(show) {
+  return {
+    type: 'TOGGLE_SIGN_MODAL',
+    show,
+  };
+}

app/actions/rpcEvents/index.test.ts

@@ -0,0 +1,53 @@
+import { RPCStageTypes } from '../../reducers/rpcEvents';
+import {
+  ActionType,
+  resetEventStage,
+  setEventStage,
+  setEventStageError,
+} from '.';
+
+describe('action, rpcEvents', () => {
+  describe('setEventStage', () => {
+    const createExpectedAction = (eventStage: RPCStageTypes) => ({
+      type: ActionType.SET_EVENT_STAGE,
+      rpcName: 'eth_sign',
+      eventStage,
+    });
+
+    it('should create an action to set event stage to REQUEST_SENT', () => {
+      expect(setEventStage('eth_sign', RPCStageTypes.REQUEST_SEND)).toEqual(
+        createExpectedAction(RPCStageTypes.REQUEST_SEND),
+      );
+    });
+
+    it('should create an action to set event stage to COMPLETE', () => {
+      expect(setEventStage('eth_sign', RPCStageTypes.COMPLETE)).toEqual(
+        createExpectedAction(RPCStageTypes.COMPLETE),
+      );
+    });
+  });
+
+  describe('resetEventStage', () => {
+    it('should create an action to reset the event stage', () => {
+      const expectedAction = {
+        type: ActionType.RESET_EVENT_STATE,
+        rpcName: 'eth_sign',
+      };
+      expect(resetEventStage('eth_sign')).toEqual(expectedAction);
+    });
+  });
+
+  describe('setEventStageError', () => {
+    it('should create an action to set the event stage error', () => {
+      const expectedAction = {
+        type: ActionType.SET_EVENT_ERROR,
+        rpcName: 'eth_sign',
+        eventStage: RPCStageTypes.ERROR,
+        error: new Error('test error'),
+      };
+      expect(setEventStageError('eth_sign', new Error('test error'))).toEqual(
+        expectedAction,
+      );
+    });
+  });
+});

app/actions/rpcEvents/index.ts

@@ -0,0 +1,68 @@
+import { RPCStageTypes } from '../../reducers/rpcEvents';
+import { Action } from 'redux';
+
+/**
+ * Deference action types available for different RPC event flow
+ */
+export enum ActionType {
+  SET_EVENT_STAGE = 'SET_EVENT_STAGE',
+  RESET_EVENT_STATE = 'RESET_EVENT_STATE',
+  SET_EVENT_ERROR = 'SET_EVENT_ERROR',
+}
+
+/**
+ * Extend redux Action interface to add rpcName, eventStage and error properties
+ */
+export interface iEventAction extends Action {
+  rpcName: string;
+  eventStage?: string;
+  error?: Error | unknown;
+}
+
+/**
+ * Set the new RPC event stage.
+ * @param {string} rpcName - the rpc mehtod name which fires the event
+ * @param {string} eventStage - the crrent stage of the eventflow
+ * @returns {iEventAction} - Action object with type and payload to be passed to reducer
+ */
+export function setEventStage(
+  rpcName: string,
+  eventStage: string,
+): iEventAction {
+  return {
+    rpcName,
+    type: ActionType.SET_EVENT_STAGE,
+    eventStage,
+  };
+}
+
+/**
+ * Reset the RPC event stage in store to default IDLE stage.
+ * @param {string} rpcName - the rpc method name which fires the event
+ * @returns {iEventAction} - Action object with type and payload to be passed to reducer
+ */
+export function resetEventStage(rpcName: string): iEventAction {
+  return {
+    type: ActionType.RESET_EVENT_STATE,
+    rpcName,
+  };
+}
+
+/**
+ * Set the error stage if any error occurs in the event flow.
+ * This method will change the event group stage to ERROR.
+ * @param {string} rpcName - the rpc method name which fires the event
+ * @param {Error | unknown} e - Error object to be set in store
+ * @returns {iEventAction} - Action object to be passed to reducer
+ */
+export function setEventStageError(
+  rpcName: string,
+  e: Error | unknown,
+): iEventAction {
+  return {
+    type: ActionType.SET_EVENT_ERROR,
+    rpcName,
+    eventStage: RPCStageTypes.ERROR,
+    error: e,
+  };
+}

app/actions/settings/index.js

@@ -46,3 +46,10 @@ export function setUseBlockieIcon(useBlockieIcon) {
     useBlockieIcon,
   };
 }
+
+export function setLedgerBetaEnabled(ledgerBetaEnabled) {
+  return {
+    type: 'SET_LEDGER_BETA_ENABLED',
+    ledgerBetaEnabled,
+  };
+}

app/component-library/components-temp/Accounts/AccountBase/AccountBase.styles.ts

@@ -1,5 +1,4 @@
 // Third party dependencies.
-import { fontStyles } from '../../../../../app/styles/common';
 import { StyleSheet } from 'react-native';
 
 /**
@@ -32,10 +31,8 @@ const styleSheet = StyleSheet.create({
   accountNameLabelText: {
     marginLeft: 4,
     paddingHorizontal: 8,
-    ...fontStyles.bold,
     borderWidth: 1,
     borderRadius: 8,
-    fontSize: 10,
   },
 });
 

app/component-library/components-temp/Accounts/AccountBase/AccountBase.tsx

@@ -50,7 +50,10 @@ const AccountBase = ({
         <View style={styles.accountNameLabel}>
           <Text variant={TextVariant.BodyMDBold}>{accountName}</Text>
           {accountTypeLabel && (
-            <Text style={styles.accountNameLabelText}>
+            <Text
+              variant={TextVariant.BodySM}
+              style={styles.accountNameLabelText}
+            >
               {strings(accountTypeLabel)}
             </Text>
           )}

app/components/Approvals/TransactionApproval/TransactionApproval.tsx

@@ -49,7 +49,13 @@ const TransactionApprovalInternal = (props: TransactionApprovalProps) => {
   }
 
   if (props.transactionType === TransactionModalType.Transaction) {
-    return <Approve modalVisible hideModal={onComplete} />;
+    return (
+      <Approve
+        modalVisible
+        hideModal={onComplete}
+        navigation={props.navigation}
+      />
+    );
   }
 
   if (props.isSigningQRObject && !props.transactionType) {

app/components/Nav/App/index.js

@@ -68,6 +68,9 @@ import AssetOptions from '../../Views/AssetOptions';
 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';
@@ -78,6 +81,8 @@ import WalletRestored from '../../Views/RestoreWallet/WalletRestored';
 import WalletResetNeeded from '../../Views/RestoreWallet/WalletResetNeeded';
 import SDKLoadingModal from '../../Views/SDKLoadingModal/SDKLoadingModal';
 import SDKFeedbackModal from '../../Views/SDKFeedbackModal/SDKFeedbackModal';
+import LedgerMessageSignModal from '../../UI/LedgerModals/LedgerMessageSignModal';
+import LedgerTransactionModal from '../../UI/LedgerModals/LedgerTransactionModal';
 import AccountActions from '../../../components/Views/AccountActions';
 import EthSignFriction from '../../../components/Views/Settings/AdvancedSettings/EthSignFriction';
 import WalletActions from '../../Views/WalletActions';
@@ -618,6 +623,23 @@ const App = ({ userLoggedIn }) => {
     </Stack.Navigator>
   );
 
+  const LedgerConnectFlow = () => (
+    <Stack.Navigator initialRouteName={Routes.HW.LEDGER_CONNECT}>
+      <Stack.Screen name={Routes.HW.LEDGER_CONNECT} component={LedgerConnect} />
+    </Stack.Navigator>
+  );
+
+  const ConnectHardwareWalletFlow = () => (
+    <Stack.Navigator name="ConnectHardwareWallet">
+      <Stack.Screen
+        name={Routes.HW.SELECT_DEVICE}
+        component={SelectHardwareWallet}
+        options={SelectHardwareWallet.navigationOptions}
+      />
+      <Stack.Screen name="LedgerAccountInfo" component={LedgerAccountInfo} />
+    </Stack.Navigator>
+  );
+
   const EditAccountNameFlow = () => (
     <Stack.Navigator>
       <Stack.Screen name="EditAccountName" component={EditAccountName} />
@@ -699,6 +721,40 @@ const App = ({ userLoggedIn }) => {
               component={ConnectQRHardwareFlow}
               options={{ animationEnabled: true }}
             />
+            <Stack.Screen
+              name={Routes.HW.CONNECT_LEDGER}
+              component={LedgerConnectFlow}
+            />
+            <Stack.Screen
+              name={Routes.HW.CONNECT}
+              component={ConnectHardwareWalletFlow}
+            />
+            <Stack.Screen
+              options={{
+                //Refer to - https://reactnavigation.org/docs/stack-navigator/#animations
+                cardStyle: { backgroundColor: importedColors.transparent },
+                cardStyleInterpolator: () => ({
+                  overlayStyle: {
+                    opacity: 0,
+                  },
+                }),
+              }}
+              name={Routes.LEDGER_TRANSACTION_MODAL}
+              component={LedgerTransactionModal}
+            />
+            <Stack.Screen
+              options={{
+                //Refer to - https://reactnavigation.org/docs/stack-navigator/#animations
+                cardStyle: { backgroundColor: importedColors.transparent },
+                cardStyleInterpolator: () => ({
+                  overlayStyle: {
+                    opacity: 0,
+                  },
+                }),
+              }}
+              name={Routes.LEDGER_MESSAGE_SIGN_MODAL}
+              component={LedgerMessageSignModal}
+            />
             <Stack.Screen
               name="EditAccountName"
               component={EditAccountNameFlow}

app/components/Nav/Main/RootRPCMethodsUI.js

@@ -36,7 +36,10 @@ import { toLowerCaseEquals } from '../../../util/general';
 import { KEYSTONE_TX_CANCELED } from '../../../constants/error';
 import { MetaMetricsEvents } from '../../../core/Analytics';
 import AnalyticsV2 from '../../../util/analyticsV2';
-
+import {
+  getAddressAccountType,
+  isHardwareAccount,
+} from '../../../util/address';
 import {
   selectChainId,
   selectProviderType,
@@ -57,6 +60,9 @@ import TemplateConfirmationModal from '../../Approvals/TemplateConfirmationModal
 import { selectTokenList } from '../../../selectors/tokenListController';
 import { selectTokens } from '../../../selectors/tokensController';
 import { selectSelectedAddress } from '../../../selectors/preferencesController';
+import { getLedgerKeyring } from '../../../core/Ledger/Ledger';
+import { createLedgerTransactionModalNavDetails } from '../../UI/LedgerModals/LedgerTransactionModal';
+import ExtendedKeyringTypes from '../../../constants/keyringTypes';
 
 const hstInterface = new ethers.utils.Interface(abi);
 
@@ -147,7 +153,11 @@ const RootRPCMethodsUI = (props) => {
           tokensReceived,
           swapTransaction.destinationToken.decimals,
         );
-        const analyticsParams = { ...swapTransaction.analytics };
+
+        const analyticsParams = {
+          ...swapTransaction.analytics,
+          account_type: getAddressAccountType(transactionMeta.transaction.from),
+        };
         delete newSwapsTransactions[transactionMeta.id].analytics;
         delete newSwapsTransactions[transactionMeta.id].paramsForAnalytics;
 
@@ -203,7 +213,28 @@ const RootRPCMethodsUI = (props) => {
           },
         );
         await KeyringController.resetQRKeyringState();
-        Engine.acceptPendingApproval(transactionMeta.id);
+
+        const isLedgerAccount = isHardwareAccount(
+          transactionMeta.transaction.from,
+          [ExtendedKeyringTypes.ledger],
+        );
+
+        // For Ledger Accounts we handover the signing to the confirmation flow
+        if (isLedgerAccount) {
+          const ledgerKeyring = await getLedgerKeyring();
+
+          props.navigation.navigate(
+            ...createLedgerTransactionModalNavDetails({
+              transactionId: transactionMeta.id,
+              deviceId: ledgerKeyring.deviceId,
+              // eslint-disable-next-line no-empty-function
+              onConfirmationComplete: () => {},
+              type: 'signTransaction',
+            }),
+          );
+        } else {
+          Engine.acceptPendingApproval(transactionMeta.id);
+        }
       } catch (error) {
         if (!error?.message.startsWith(KEYSTONE_TX_CANCELED)) {
           Alert.alert(
@@ -219,7 +250,7 @@ const RootRPCMethodsUI = (props) => {
         }
       }
     },
-    [props.swapsTransactions, trackSwaps],
+    [props.navigation, props.swapsTransactions, trackSwaps],
   );
 
   const onUnapprovedTransaction = useCallback(