feat: enable ledger hardware wallet implementation.

.detoxrc.js

@@ -10,7 +10,7 @@ module.exports = {
     },
     retries: 2,
   },
-
+  
   artifacts: {
     rootDir: "./artifacts/screenshots",
     plugins: {
@@ -23,7 +23,7 @@ module.exports = {
         }
       },
     },
-  },
+  }, 
   configurations: {
     'ios.sim.debug': {
       device: 'ios.simulator',

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/components/Views/ConnectHardware/SelectHardware/index.tsx

@@ -1,16 +1,18 @@
 /* eslint @typescript-eslint/no-var-requires: "off" */
 /* eslint @typescript-eslint/no-require-imports: "off" */
 
-import React, { useEffect } from 'react';
+import React, { useState, useEffect } from 'react';
 import {
   View,
   SafeAreaView,
-  Text,
   StyleSheet,
   TouchableOpacity,
   Image,
+  Alert,
 } from 'react-native';
+import { useSelector, useDispatch } from 'react-redux';
 import { useNavigation } from '@react-navigation/native';
+import { setLedgerBetaEnabled } from '../../../../actions/settings';
 import {
   mockTheme,
   useAppThemeFromContext,
@@ -23,9 +25,13 @@ import Routes from '../../../../constants/navigation/Routes';
 import { getLedgerKeyring } from '../../../../core/Ledger/Ledger';
 import { MetaMetricsEvents } from '../../../../core/Analytics';
 import AnalyticsV2 from '../../../../util/analyticsV2';
+import Text, {
+  TextVariant,
+} from '../../../../component-library/components/Texts/Text';
 
 const createStyle = (colors: any) =>
   StyleSheet.create({
+    screen: { justifyContent: 'center' },
     container: {
       flex: 1,
       marginHorizontal: '5%',
@@ -84,6 +90,13 @@ const SelectHardwareWallet = () => {
   const navigation = useNavigation();
   const { colors } = useAppThemeFromContext() || mockTheme;
   const styles = createStyle(colors);
+  const [ledgerTaps, setLedgerTaps] = useState<number>(1);
+
+  const ledgerBetaEnabled = useSelector(
+    (state: any) => state.settings.ledgerBetaEnabled,
+  );
+
+  const dispatch = useDispatch();
 
   useEffect(() => {
     navigation.setOptions(
@@ -96,6 +109,30 @@ const SelectHardwareWallet = () => {
     );
   }, [navigation, colors]);
 
+  const showLedgerBetaAlert = () =>
+    Alert.alert(
+      strings('ledger.ledger_beta_alert'),
+      strings('ledger.ledger_beta_alert_description'),
+      [
+        {
+          text: strings('ledger.ledger_beta_cta'),
+          onPress: () => dispatch(setLedgerBetaEnabled(true)),
+        },
+      ],
+    );
+
+  const updateLedgerBetaTaps = () => {
+    if (ledgerBetaEnabled) {
+      return;
+    }
+
+    if (ledgerTaps === 7) {
+      showLedgerBetaAlert();
+    } else {
+      setLedgerTaps(ledgerTaps + 1);
+    }
+  };
+
   const navigateToConnectQRWallet = () => {
     navigation.navigate(Routes.HW.CONNECT_QR_DEVICE);
   };
@@ -126,22 +163,32 @@ const SelectHardwareWallet = () => {
     </TouchableOpacity>
   );
 
+  const LedgerButton = () => {
+    const ledgerLogo = useAssetFromTheme(ledgerLogoLight, ledgerLogoDark);
+    return (
+      ledgerBetaEnabled &&
+      renderHardwareButton(ledgerLogo, navigateToConnectLedger)
+    );
+  };
+
+  const QRButton = () => {
+    const qrHardwareLogo = useAssetFromTheme(
+      qrHardwareLogoLight,
+      qrHardwareLogoDark,
+    );
+    return renderHardwareButton(qrHardwareLogo, navigateToConnectQRWallet);
+  };
+
   return (
     <SafeAreaView style={styles.container}>
       <View style={styles.textContainer}>
-        <Text style={styles.text}>
+        <Text variant={TextVariant.BodyMD} onPress={updateLedgerBetaTaps}>
           {strings('connect_hardware.select_hardware')}
         </Text>
       </View>
       <View style={styles.buttonsContainer}>
-        {renderHardwareButton(
-          useAssetFromTheme(ledgerLogoLight, ledgerLogoDark),
-          navigateToConnectLedger,
-        )}
-        {renderHardwareButton(
-          useAssetFromTheme(qrHardwareLogoLight, qrHardwareLogoDark),
-          navigateToConnectQRWallet,
-        )}
+        <LedgerButton />
+        <QRButton />
       </View>
     </SafeAreaView>
   );

app/reducers/settings/index.js

@@ -6,6 +6,7 @@ const initialState = {
   lockTime: -1, // Disabled by default
   useBlockieIcon: true,
   hideZeroBalanceTokens: false,
+  ledgerBetaEnabled: false,
 };
 
 const settingsReducer = (state = initialState, action) => {
@@ -45,6 +46,11 @@ const settingsReducer = (state = initialState, action) => {
         ...state,
         primaryCurrency: action.primaryCurrency,
       };
+    case 'SET_LEDGER_BETA_ENABLED':
+      return {
+        ...state,
+        ledgerBetaEnabled: action.ledgerBetaEnabled,
+      };
     default:
       return state;
   }

ios/Podfile.lock

@@ -597,6 +597,7 @@ DEPENDENCIES:
   - React-logger (from `../node_modules/react-native/ReactCommon/logger`)
   - react-native-aes (from `../node_modules/react-native-aes-crypto`)
   - react-native-background-timer (from `../node_modules/react-native-background-timer`)
+  - react-native-ble-plx (from `../node_modules/react-native-ble-plx`)
   - "react-native-blur (from `../node_modules/@react-native-community/blur`)"
   - react-native-branch (from `../node_modules/react-native-branch`)
   - react-native-camera (from `../node_modules/react-native-camera`)
@@ -670,6 +671,7 @@ SPEC REPOS:
     - FlipperKit
     - fmt
     - libevent
+    - MultiplatformBleAdapter
     - OpenSSL-Universal
     - Sentry
     - SentryPrivate
@@ -729,6 +731,8 @@ EXTERNAL SOURCES:
     :path: "../node_modules/react-native-aes-crypto"
   react-native-background-timer:
     :path: "../node_modules/react-native-background-timer"
+  react-native-ble-plx:
+    :path: "../node_modules/react-native-ble-plx"
   react-native-blur:
     :path: "../node_modules/@react-native-community/blur"
   react-native-branch:

locales/languages/en.json

@@ -2649,7 +2649,10 @@
     "error_during_connection_message": "There's been a slight problem connecting your Ledger Nano X, tap 'Retry' below to give this another go. Sometimes this occurs due to the ETH app on your Ledger Nano X being open at the start of the pairing process with MetaMask Mobile.",
     "how_to_install_eth_webview_title": "How to install the Ethereum App",
     "nonce_too_low": "Nonce too low",
-    "nonce_too_low_error": "The set nonce is too low"
+    "nonce_too_low_error": "The set nonce is too low",
+    "ledger_beta_alert": "Enabling Ledger integration",
+    "ledger_beta_alert_description": "You've found an experimental feature! By continuing you accept you're using this experimental feature at your own risk.",
+    "ledger_beta_cta": "Continue"
   },
   "account_actions": {
     "edit_name": "Edit account name",